merchant-web/src/views/modules/local-affairs/class-popup/add-or-update.vue

<template>
  <div>
    <obj-modal
      ref="modal"
      labelWidth="120px"
      :modalConfig="modalConfig"
      :modalCols="modalCols"
      :modalData="modalData"
      :modalHandles="modalHandles"
    >
    </obj-modal>
  </div>
</template>
<script>
const BASE_MODAL_DATA = () => {
  return {
    name: "",
    gradeId: "",
    sortKey: "",
  };
};
const ADD_TITLE = "新增班级";
const EDIT_TITLE = "编辑班级";
import { cloneDeep } from "lodash";
export default {
  data() {
    return {
      isAdd: true,
      isLoading: false,
      //监控对象数据
      tableData: [],
      //表格属性
      tableProp: {},
      modalConfig: {
        fullscreen: false,
        title: "添加机构",
        show: false,
        width: "500px",
      },
      modalData: BASE_MODAL_DATA(),
    };
  },
  methods: {
    toggle(e) {
      if (this.modalConfig.show == false) {
        this.modalConfig.show = true;
      } else {
        this.modalConfig.show = false;
      }
      if (e) {
        this.init(cloneDeep(e));
      }
      return {
        add: () => {
          this.$set(this.modalConfig, "title", ADD_TITLE);
          this.$nextTick(() => {
            this.modalData = BASE_MODAL_DATA();
            this.$refs.modal?.resetFields();
          });
          this.isAdd = true;
        },
        update: () => {
          if (this.modalData.provinceCode) {
            this.modalData.areaArray.push(this.modalData.provinceCode);
          }
          if (this.modalData.cityCode) {
            this.modalData.areaArray.push(this.modalData.cityCode);
          }
          if (this.modalData.areaCode) {
            this.modalData.areaArray.push(this.modalData.areaCode);
          }
          this.$set(this.modalConfig, "title", EDIT_TITLE);
          this.isAdd = false;
        },
      };
    },
    init(row) {
      this.modalData = row;
    },
  },
  asyncComputed: {
    // async orgOptions() {
    //   let res = await this.$api.local_admin.getEducationBureauList();
    //   console.log(res.data.data);
    //   return res.data.data;
    // },
    async eduDurationOptions() {
      let res = await this.$api.local_admin.getDictionary("edu_duration");
      return res.data.data;
    },
    async getAreaOptions() {
      let res = await this.$api.local_admin.getArea();
      return res.data.data;
    },
    async getGradeOptions() {
      let res = await this.$api.local_admin.getGradeList();
      console.log("res", res);
      return res.data.data;
    },
  },
  computed: {
    modalCols() {
      return [
        {
          label: "班级名称",
          prop: "name",
          type: "Input",
          labelWidth: "80px",
          width: "100%",
          require: true,
          rules: { required: true, message: "班级名称" },
        },
        {
          label: "所属年级",
          prop: "gradeId",
          labelWidth: "80px",
          width: "100%",
          require: true,
          rules: { required: true, message: "所属年级" },
          type: "jsx",
          render: () => {
            return (
              <el-select
                style="width:100%;"
                placeholder="请选择班级所属年级"
                filterable
                v-model={this.modalData.gradeId}
              >
                {this.getGradeOptions.map((item) => {
                  return (
                    <el-option
                      label={item.name}
                      value={item.id}
                      key={item.id}
                    ></el-option>
                  );
                })}
              </el-select>
            );
          },
        },
        {
          label: "排序号",
          prop: "sortKey",
          type: "Input",
          labelWidth: "80px",
          width: "100%",
          require: true,
          rules: { required: true, message: "排序号" },
          type: "jsx",
          render: () => {
            const onChange = () => {};
            return (
              <el-input-number
                style="width:100%;"
                v-model={this.modalData.sortKey}
                onChange={onChange}
                min={0}
                label=""
              ></el-input-number>
            );
          },
        },
      ];
    },
    modalHandles() {
      return [
        {
          label: "取消",
          icon: "el-icon-close",
          handle: () => {
            this.toggle();
          },
        },
        {
          label: this.isAdd ? "确认添加" : "确认修改",
          type: "primary",
          icon: "el-icon-check",
          loading: this.isLoading,
          submit: true,
          handle: () => {
            setTimeout(() => {
              this.isLoading = false;
            }, 1000);
            console.log(this.modalData);
            if (this.isAdd) {
              this.$api.local_admin.addClass(this.modalData).then((res) => {
                this.$emit("refresh");
                this.toggle();
              });
            } else {
              this.$api.local_admin
                .updateClass(this.modalData)
                .then((res) => {
                  this.$emit("refresh");
                  this.toggle();
                });
            }

            // this.api.common.addDict(this.modalData).then((res) => {
            //   this.emit("refresh");
            //   this.toggle();
            // });
          },
        },
      ];
    },
  },
};
</script>
<style lang="scss" scoped>
</style>