❤❤❤常用模板❤❤❤Vue常用后台管理系统增删改查列表（表格）模板

<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>