<template>
<div :class="$options.name"></div>
</template>
<script>
export default {
name: "sgBody",
components: {},
data() {
return {
loading: false, //是否加载中
visible: false, //是否显示
forbid: false, //是否禁用
form: {}, //表单信息
tableData: [], //表格、列表数据
selection: [], //勾选的数据
currentPage: 1,
pageSize: 10,
total: 0, //页码数据
showEditDrawer: false, //显示编辑抽屉
editDrawerData: null, //抽屉数据
keyword: "", //搜索关键词
GXSJ: null, //更新时间
};
},
props: [
"value", //是否显示
"disabled", //是否禁用
"data",
],
computed: {},
watch: {
value: {
handler(d) {
this.visible = d;
},
deep: true,
immediate: true,
},
visible(d) {
this.$emit("input", d);
}, //是否显示(双向绑定)
disabled: {
handler(d) {
this.forbid = d;
},
deep: true,
immediate: true,
},
forbid(d) {
this.$emit(`update:disabled`, d);
}, //是否显示(双向绑定)
data: {
handler(newValue, oldValue) {
//console.log('深度监听:', newValue, oldValue);
if (newValue && Object.keys(newValue).length) {
this.form = JSON.parse(JSON.stringify(newValue));
} else {
this.form = {};
}
},
deep: true, //深度监听
immediate: true, //立即执行
},
},
created() {
this.init();
},
mounted() {},
methods: {
//初始化
init({ d } = {}) {
this.initData();
},
//初始化数据
initData({ d } = {}) {
this.initList();
},
// 重置
reset(d) {
this.resetFilterData(), this.initList();
},
// 重置筛选条件
resetFilterData(d) {
this.currentPage = 1;
this.keyword = "";
this.GXSJ = null;
},
//初始化列表
initList({ keyword = this.keyword } = {}) {
// 更新时间
let KSSJ = this.$g.date.get_yyyy_MM_dd(this.GXSJ[0]); //开始时间
let JSSJ = this.$g.date.get_yyyy_MM_dd(this.GXSJ[1]); //结束时间
let data = {
MC: keyword,
KSSJ,
JSSJ,
start: this.currentPage - 1, //当前页数(从0开始)
limit: this.pageSize, //每页显示条目个数
};
this.$d.查询数据接口({
data,
r: {
s: (d) => {
this.tableData = d.data; //列表数据赋值
this.tableData.sort((prev, next) => prev.RANK - next.RANK); //从小到大升序(会改变原数组)
this.total = d.totalCount; //总条数
},
},
});
},
add(d) {
this.editDrawerData = null;
this.showEditDrawer = true;
},
edit(d) {
this.editDrawerData = JSON.parse(JSON.stringify(d));
this.showEditDrawer = true;
},
delAny() {
this.del(this.selection);
},
del(arr) {
Array.isArray(arr) || (arr = [arr]);
this.$confirm(`此操作将永久删除此数据,是否继续?`, `提示`, {
dangerouslyUseHTMLString: true,
confirmButtonText: `确定`,
cancelButtonText: `取消`,
type: "warning",
})
.then(() => {
let data = {
IDS: arr.map((v) => v.ID),
};
this.$d.删除数据接口({
data,
r: {
s: (d) => {
this.initList();
this.$message.success(arr.length > 1 ? `批量删除成功` : "已删除");
},
},
});
})
.catch(() => {
//this.$message(`已取消删除`);
});
},
valid(d) {
// if (!this.form.MC) return this.$message.error(this.$refs.MC.$el.querySelector("input").placeholder);
},
save(data) {
if (this.valid()) return;
this.$d.保存数据接口({
data,
r: {
s: (d) => {
this.initList({
keyword: "",
});
},
},
});
},
cancel(d) {
this.$emit(`hide`, d);
},
},
destroyed() {},
};
</script>
<style lang="scss" scoped>
.sgBody {
}
</style>
❤❤❤常用模板❤❤❤Vue常用后台管理系统增删改查列表(表格)模板
猜你喜欢
转载自blog.csdn.net/qq_37860634/article/details/134868955
今日推荐
周排行