merchant-web/src/views/modules/local-school/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>
import { cloneDeep } from "lodash";
export default {
  data() {
    return {
      isAdd: true,
      isLoading: false,
      //监控对象数据
      tableData: [],
      //表格属性
      tableProp: {},
      modalConfig: {
        fullscreen: false,
        title: "添加机构",
        show: false,
        width: "900px",
      },
      modalData: {
        name: "",
        eduDuration: '',
        contactName: "",
        contactPhone: "",
        provinceCode: "",
        cityCode: "",
        areaCode: "",
        parentOrgId: '',
        areaArray: [],
      },
    };
  },
  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", "新增学校");
          this.$nextTick(() => {
            this.modalData = {
              name: "",
              eduDuration: '',
              contactName: "",
              contactPhone: "",
              provinceCode: "",
              cityCode: "",
              areaCode: "",
              parentOrgId: '',
              areaArray: [],
            };
            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", "编辑学校");
          this.isAdd = false;
        },
      };
    },
    init(row) {
      this.modalData = {
        ...row,
        areaArray: [],
        contactPhone: row.contactMobile,
      };
    },
  },
  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;
    },
  },
  computed: {
    modalCols() {
      return [
        {
          label: "学校名称",
          prop: "name",
          type: "Input",
          labelWidth: "120px",
          width: "100%",
          require: true,
          rules: { required: true, message: "学校名称" },
        },
        {
          label: "学制",
          prop: "eduDuration",
          type: "jsx",
          width: "100%",
          require: true,
          rules: { required: true, message: "请选择学制" },
          render: () => {
            return (
              <el-form-item
                style="width: 100%;"
                prop="eduDuration"
                rules={[{ required: true, message: "请选择学制" }]}
              >
                <el-select
                  v-model={this.modalData.eduDuration}
                  style="width: 100%;"
                >
                  {this.eduDurationOptions.map((item) => {
                    return (
                      <el-option
                        label={item.name}
                        value={item.value}
                        key={item.value}
                      ></el-option>
                    );
                  })}
                </el-select>
              </el-form-item>
            );
          },
        },
        {
          label: "所属教育局",
          prop: "parentOrgId",
          type: "jsx",
          width: "100%",
          require: true,
          rules: { required: true, message: "所属教育局" },
          render: () => {
            return (
              <el-form-item
                style="width: 100%;"
                prop="parentOrgId"
                rules={[{ required: true, message: "所属教育局" }]}
              >
                <el-select
                  v-model={this.modalData.parentOrgId}
                  style="width: 100%;"
                >
                  {this.orgOptions.map((item) => {
                    return (
                      <el-option
                        label={item.orgName}
                        value={item.orgId}
                        key={item.orgId}
                      ></el-option>
                    );
                  })}
                </el-select>
              </el-form-item>
            );
          },
        },
        {
          label: "联系人",
          prop: "contactName",
          labelWidth: "120px",
          type: "Input",
          require: true,
          rules: { required: true, message: "联系人" },
        },
        {
          label: "联系人电话",
          prop: "contactPhone",
          labelWidth: "120px",
          type: "Input",
          require: true,
          rules: { required: true, message: "联系人电话" },
        },
        {
          label: "省市区",
          prop: "provinceCode", //provinceCode,cityCode,areaCode
          labelWidth: "120px",
          type: "jsx",
          require: true,
          rules: { required: true, message: "省市区" },
          render: () => {
            const changeArea = (e) => {
              console.log(e);
              this.modalData.provinceCode = e[0] || "";
              this.modalData.cityCode = e[1] || "";
              this.modalData.areaCode = e[2] || "";
            };
            return (
              <el-form-item
                style="width:100%;"
                prop="provinceCode"
                rules={[{ required: true, message: "请选择省市区" }]}
              >
                <el-cascader
                  style="width:100%;"
                  onChange={changeArea}
                  options={this.getAreaOptions}
                  v-model={this.modalData.areaArray}
                  props={{
                    props: {
                      checkStrictly: true,
                      label: "name",
                      value: "code",
                      emitPath: true,
                    },
                  }}
                ></el-cascader>
              </el-form-item>
            );
          },
        },
      ];
    },
    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);
            this.$api.local_admin
              .addSchool({
                name: this.modalData.name,
                eduDuration: this.modalData.eduDuration,
                contactName: this.modalData.contactName,
                contactPhone: this.modalData.contactPhone,
                provinceCode: this.modalData.provinceCode,
                cityCode: this.modalData.cityCode,
                areaCode: this.modalData.areaCode,
                parentOrgId: this.modalData.parentOrgId,
              })
              .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>