hjjc-workbench-web/src/views/sysManage/menu/component/addMenu.vue

<template>
  <div>
    <xy-dialog
      ref="dialog"
      :is-show.sync="isShow"
      type="form"
      :title="type === 'add' ? '新增制度目录' : '编辑制度目录'"
      :form="form"
      :rules="rules"
      @submit="submit"
    >
      <template v-slot:name>
        <div class="xy-table-item">
          <div class="xy-table-item-label">名称 ：</div>
          <div class="xy-table-item-content">
            <el-input
              v-model="form.name"
              clearable
              placeholder="请输入名称"
              style="width: 300px"
            ></el-input>
          </div>
        </div>
      </template>
      <template v-slot:pid>
        <div class="xy-table-item">
          <div class="xy-table-item-label">上级 ：</div>
          <div class="xy-table-item-content">
            <el-cascader
              :key="cascaderId_pid"
              clearable
              style="width: 300px"
              :show-all-levels="false"
              v-model="form.pid"
              :options="pidsRoot"
              :props="{ value: 'id', label: 'name', checkStrictly: true }"
              @change="pidCascaderHandler"
            ></el-cascader>
          </div>
        </div>
      </template>
      <template v-slot:type>
        <div class="xy-table-item">
          <div class="xy-table-item-label">类型 ：</div>
          <div class="xy-table-item-content">
            <el-input
              v-model="form.type"
              clearable
              placeholder="请输入类型"
              style="width: 300px"
            ></el-input>
          </div>
        </div>
      </template>
      <template v-slot:remark>
        <div class="xy-table-item">
          <div class="xy-table-item-label">备注 ：</div>
          <div class="xy-table-item-content">
            <el-input
              type="textarea"
              :autosize="{ minRows: 2 }"
              v-model="form.remark"
              clearable
              placeholder="请输入备注"
              style="width: 300px"
            ></el-input>
          </div>
        </div>
      </template>
    </xy-dialog>
  </div>
</template>

<script>
import { show, save, store } from "@/api/sysManage/menu";
export default {
  props: {
    pids: {
      type: Array,
      default: () => [],
    },
  },
  data() {
    return {
      isShow: false,
      id: "",
      type: "",

      cascaderId_pid: "",

      form: {
        name: "",
        pid: 0,
        type: "",
        remark: "",
      },
      rules: {},
    };
  },
  methods: {
    show() {
      this.isShow = true;
    },
    hidden() {
      this.isShow = false;
    },
    init() {
      for (let key in this.form) {
        if (this.form[key] instanceof Array) {
          this.form[key] = [];
        } else {
          this.form[key] = "";
        }
      }
      this.$refs["dialog"].clearValidate();
    },
    setId(id) {
      if (typeof id == "number") {
        this.id = id;
      } else {
        console.error("error typeof id: " + typeof id);
      }
    },
    getId() {
      return this.id;
    },
    setType(type = "add") {
      let types = ["add", "editor"];
      if (types.includes(type)) {
        this.type = type;
      } else {
        console.warn("Unknown type: " + type);
      }
    },
    setForm(key = [], value = []) {
      if (key instanceof Array) {
        key.forEach((key, index) => {
          this.form[key] = value[index] ?? "";
        });
      }
      if (typeof key === "string") {
        this.form[key] = value;
      }
      if (!key) {
        this.init();
      }
    },
    pidCascaderHandler(e) {
      if (e.length > 0) {
        this.form.pid = e.at(-1);
      } else {
        this.form.pid = "";
      }
    },

    async getDetail() {
      const res = await show({ id: this.id });
      this.$integrateData(this.form, res);
    },

    submit() {
      if (this.type === "add") {
        if (this.form.hasOwnProperty("regulation_menu_id")) {
          delete this.form.regulation_menu_id;
        }
        store(this.form).then((res) => {
          this.$message({
            type: "success",
            message:
              this.type === "add" ? "新增制度目录" : "编辑制度目录" + "成功",
          });
          this.isShow = false;
          this.$emit("refresh");
        });
      }
      if (this.type === "editor") {
        Object.defineProperty(this.form, "regulation_menu_id", {
          value: this.id,
          enumerable: true,
          configurable: true,
          writable: true,
        });
        save(this.form).then((res) => {
          this.$message({
            type: "success",
            message:
              this.type === "add" ? "新增制度目录" : "编辑制度目录" + "成功",
          });
          this.isShow = false;
          this.$emit("refresh");
        });
      }
    },
  },
  computed: {
    pidsRoot () {
      return [{ id: 0, name: '根目录', children: this.pids }]
    }
  },
  watch: {
    isShow(val) {
      if (val) {
        if (this.type === "editor") {
          this.getDetail();
        }
      } else {
        this.id = "";
        this.type = "";
        this.init();
        this.$refs["dialog"].clearValidate();
        delete this.form.regulation_menu_id;
      }
    },
    pids() {
      ++this.cascaderId_pid;
    },
  },
};
</script>

<style scoped lang="scss">
::v-deep .el-input__inner {
  text-align: left;
}
</style>