performance-test/src/views/system/menuMag/components/editDialog.vue

<template>
  <div>
    <el-form
      :model="menuForm"
      :rules="addMenuRules"
      ref="addUserForm"
      label-width="100px"
      class="demo-ruleForm"
    >
      <el-form-item label="上级目录:" prop="parentId" v-if="activeName !== '1'">
        <treeselect
          :normalizer="normalizer"
          :noChildrenText="'没有子选项'"
          :noOptionsText="'没有可选项'"
          :noResultsText="'没有匹配的结果'"
          :placeholder="'请选择'"
          :searchable="true"
          v-model="menuForm.parentId"
          placeholder="请选择"
          :options="menuOptions"
        ></treeselect>
      </el-form-item>
      <el-form-item label="菜单名称:" prop="pname">
        <el-input
          v-model="menuForm.pname"
          placeholder="请输入菜单名称"
        ></el-input>
      </el-form-item>
      <el-form-item label="菜单标识:" prop="pcode">
        <el-input
          v-model="menuForm.pcode"
          placeholder="请输入菜单标识"
        ></el-input>
      </el-form-item>
      <el-form-item label="路由地址:" prop="purl" v-if="activeName !== '1'">
        <el-input
          v-model="menuForm.purl"
          placeholder="请输入路由地址"
        ></el-input>
      </el-form-item>
      <el-form-item label="是否显示:" prop="permissionShow">
        <el-select
          v-model="menuForm.permissionShow"
          placeholder="请选择状态"
          style="width: 100%"
        >
          <el-option label="显示" :value="1"></el-option>
          <el-option label="不显示" :value="2"></el-option>
        </el-select>
      </el-form-item>
      <el-form-item label="状态:" prop="pstat">
        <el-select
          v-model="menuForm.pstat"
          placeholder="请选择状态"
          style="width: 100%"
        >
          <el-option label="启用" :value="1"></el-option>
          <el-option label="停用" :value="0"></el-option>
        </el-select>
      </el-form-item>
    </el-form>
  </div>
</template>

<script>
import Treeselect from "@riophae/vue-treeselect";
import { addMenuFn, updateMenuFn } from "@/api/system";

import "@riophae/vue-treeselect/dist/vue-treeselect.css";

export default {
  components: {
    Treeselect,
  },
  props: {
    activeName: {
      type: String,
    },
    tableData: {
      type: Array,
    },
    checkId: {
      type: Number,
    },
    title: {
      type: String,
    },
    row: {
      type: Object,
    },
  },
  data() {
    return {
      menuForm: {
        parentId: null,
        pname: null,
        purl: null,
        pstat: null,
        pcode: null,
        permissionShow: null,
      },
      addMenuRules: {
        permissionShow: {
          required: true,
          message: "请选择",
          trigger: "change",
        },
        pcode: [
          { required: true, message: "请填写菜单菜单标识", trigger: "blur" },
        ],
        pname: [{ required: true, message: "请填写菜单名称", trigger: "blur" }],
        purl: [{ required: true, message: "请填写路由地址", trigger: "blur" }],
        parentId: [
          { required: true, message: "请选择上级目录", trigger: "change" },
        ],
        pstat: [{ required: true, message: "请选择状态", trigger: "change" }],
      },
      stateOPtions: [],
      menuOptions: [
        { permissionId: 0, permissionName: "主类目", children: [] },
      ],
    };
  },
  created() {
    console.log(this.checkId, "checkid");
    this.menuOptions[0].children.push(...this.tableData);
    if (this.title === "编辑" && this.activeName === "2") {
      this.menuForm = {
        parentId: this.row.parentId,
        pname: this.row.permissionName,
        purl: this.row.permissionUrl,
        pstat: this.row.permissionState,
        pcode: this.row.permissionCode,
        permissionShow: this.row.permissionShow,
      };
    } else if (this.title === "新增" && this.activeName === "2") {
      this.menuForm.parentId = this.checkId;
    } else {
      this.menuForm.parentId = 0;
    }
  },
  watch: {
    row: {
      handler(newVal) {
        if (newVal) {
          console.log(newVal, "newRowValue");
          if (this.title === "编辑" && this.activeName === "2") {
            this.menuForm = {
              parentId: newVal.parentId,
              pname: newVal.permissionName,
              purl: newVal.permissionUrl,
              pstat: newVal.permissionState,
              pcode: newVal.permissionCode,
              permissionShow: newVal.permissionShow,
            };
          } else if (this.title === "新增" && this.activeName === "2") {
            this.menuForm.parentId = this.checkId;
          } else {
            this.menuForm.parentId = 0;
          }
        }
      },
      immediate: true,
      deep: true,
    },
    checkId(newVal) {
      if (newVal !== null && newVal !== undefined) {
        console.log(newVal, "checkId");
        this.menuForm.parentId = newVal;
      }
    },
    tableData: {
      handler(newData) {
        this.$nextTick(() => {
          console.log("gengxin");
          this.setExpandAll(this.defaultExpandAll);
        });
      },
      immediate: true,
      deep: true,
    },
  },

  methods: {
    setExpandAll(expand) {
      const table = this.$refs.table;
      if (table) {
        this.tableData.forEach((row) => {
          table.toggleRowExpansion(row, expand);
          if (row.children) {
            row.children.forEach((child) => {
              table.toggleRowExpansion(child, expand);
            });
          }
        });
      }
    },
    /** 转换菜单数据结构 */
    normalizer(node) {
      if (node.children && !node.children.length) {
        delete node.children;
      }
      return {
        id: node.permissionId,
        label: node.permissionName,
        children: node.children,
      };
    },
    submit() {
      const that = this;
      this.$refs["addUserForm"].validate((valid) => {
        if (valid) {
          if (this.title === "编辑") {
            updateMenuFn({
              ...this.menuForm,
              permissionId: this.row.permissionId,
            })
              .then((res) => {
                this.$message({
                  type: "success",
                  message: "编辑成功",
                });
                this.cancel();
                that.$emit("updateList");
              })
              .catch((error) => {
                this.$message({
                  type: "error",
                  message: "编辑失败",
                });
              });
          } else if (this.title === "新增") {
            addMenuFn({
              ...this.menuForm,
              purl:
                this.menuForm.purl !== null ? this.menuForm.purl : undefined,
              ptype: "1",
              parentId:
                this.activeName === "1" ? undefined : this.menuForm.parentId,
            })
              .then((res) => {
                this.$message({
                  type: "success",
                  message: "新增成功",
                });
                this.cancel();
                that.$emit("updateList");
              })
              .catch((error) => {
                this.$message({
                  type: "error",
                  message: "新增失败",
                });
              });
          }
        } else {
          return false;
        }
      });
    },
    cancel() {
      this.$refs["addUserForm"].resetFields();
      this.menuForm = {
        parentId: null,
        pname: null,
        purl: null,
        pstat: null,
        pcode: null,
        permissionShow: null,
      };
    },
  },
};
</script>

<style scoped lang="scss"></style>