11

lxl

2022-10-13 8460d91255f5ff11a6c9a8199c313226b21f815a

 src/views/maintenance/menuSettings.vue

@@ -2,9 +2,9 @@
  <div class="menuSettings_box">
    <div class="menuSettings_tree">
      <My-bread :list="['运维管理', '菜单设置']"></My-bread>
      <el-button class="saveBtn" type="primary" size="mini" @click="sendChange"
      <!-- <el-button class="saveBtn" type="primary" size="mini" @click="sendChange"
        >保存</el-button
      >
      > -->
      <el-divider />
      <div class="menuTreeBox">
        <el-tree
@@ -21,6 +21,22 @@
        >
          <span class="custom-tree-node" slot-scope="{ node, data }">
            <span>{{ node.label }}</span>
            <span class="btnBox">
              <el-button
                type="text"
                size="mini"
                @click="() => append(node, data)"
              >
                <i class="el-icon-circle-plus"></i>
              </el-button>
              <el-button
                type="text"
                size="mini"
                @click="() => remove(node, data)"
              >
                <i class="el-icon-delete-solid"></i>
              </el-button>
            </span>
          </span>
        </el-tree>
      </div>
@@ -30,38 +46,139 @@
        <h4>详细信息</h4>
      </div>
      <div class="form_box">
        <el-form :model="itemdetail">
          <el-form-item label="英文名称" :label-width="formLabelWidth">
        <el-form :model="itemdetail" ref="itemdetail" :rules="rules">
          <el-form-item
            prop="enName"
            label="英文名称"
            :label-width="formLabelWidth"
          >
            <el-input v-model="itemdetail.enName" autocomplete="off"></el-input>
          </el-form-item>
          <el-form-item label="中文名称" :label-width="formLabelWidth">
          <el-form-item
            prop="cnName"
            label="中文名称"
            :label-width="formLabelWidth"
          >
            <el-input v-model="itemdetail.cnName" autocomplete="off"></el-input>
          </el-form-item>
          <el-form-item label="图标" :label-width="formLabelWidth">
            <el-input v-model="itemdetail.icon" autocomplete="off"></el-input>
          </el-form-item>
          <el-form-item label="是否显示" :label-width="formLabelWidth">
            <el-input v-model="itemdetail.isShow" autocomplete="off"></el-input>
          <el-form-item
            prop="isShow"
            label="是否显示"
            :label-width="formLabelWidth"
          >
            <el-select v-model="itemdetail.isShow" placeholder="">
              <el-option
                v-for="item in options1"
                :key="item.value"
                :label="item.label"
                :value="item.value"
              >
              </el-option>
            </el-select>
          </el-form-item>
          <el-form-item label="菜单Url" :label-width="formLabelWidth">
          <el-form-item
            prop="url"
            label="菜单Url"
            :label-width="formLabelWidth"
          >
            <el-input v-model="itemdetail.url" autocomplete="off"></el-input>
          </el-form-item>
          <el-form-item label="授权" :label-width="formLabelWidth">
            <el-input v-model="itemdetail.perms" autocomplete="off"></el-input>
          </el-form-item>
          <el-form-item label="类型" :label-width="formLabelWidth">
            <el-input v-model="itemdetail.type" autocomplete="off"></el-input>
          <el-form-item label="类型" prop="type" :label-width="formLabelWidth">
            <el-select v-model="itemdetail.type" placeholder="请选择类型">
              <el-option
                v-for="item in options2"
                :key="item.value"
                :label="item.label"
                :value="item.value"
              >
              </el-option>
            </el-select>
          </el-form-item>
          <el-form-item label="备注" :label-width="formLabelWidth">
            <el-input v-model="itemdetail.bak" autocomplete="off"></el-input>
          </el-form-item>
          <div class="btnBox">
            <el-button type="primary" @click="updMenu">保存</el-button>
            <el-button type="primary" @click="reset">取消</el-button>
            <el-button type="primary" @click="updMenu('itemdetail')"
              >保存</el-button
            >
            <el-button type="primary" @click="reset('itemdetail')"
              >取消</el-button
            >
          </div>
        </el-form>
      </div>
    </div>
    <el-dialog title="新增子菜单" :visible.sync="dialogFormVisible">
      <el-form :model="ruleForm" ref="ruleForm" :rules="rules">
        <el-form-item
          prop="enName"
          label="英文名称"
          :label-width="formLabelWidth"
        >
          <el-input v-model="ruleForm.enName" autocomplete="off"></el-input>
        </el-form-item>
        <el-form-item
          prop="cnName"
          label="中文名称"
          :label-width="formLabelWidth"
        >
          <el-input v-model="ruleForm.cnName" autocomplete="off"></el-input>
        </el-form-item>
        <el-form-item label="图标" :label-width="formLabelWidth">
          <el-input v-model="ruleForm.icon" autocomplete="off"></el-input>
        </el-form-item>
        <el-form-item
          prop="isShow"
          label="是否显示"
          :label-width="formLabelWidth"
        >
          <el-select v-model="ruleForm.isShow" placeholder="">
            <el-option
              v-for="item in options1"
              :key="item.value"
              :label="item.label"
              :value="item.value"
            >
            </el-option>
          </el-select>
        </el-form-item>
        <el-form-item prop="url" label="菜单Url" :label-width="formLabelWidth">
          <el-input v-model="ruleForm.url" autocomplete="off"></el-input>
        </el-form-item>
        <el-form-item label="授权" :label-width="formLabelWidth">
          <el-input v-model="ruleForm.perms" autocomplete="off"></el-input>
        </el-form-item>
        <el-form-item label="类型" prop="type" :label-width="formLabelWidth">
          <el-select v-model="ruleForm.type" placeholder="请选择类型">
            <el-option
              v-for="item in options2"
              :key="item.value"
              :label="item.label"
              :value="item.value"
            >
            </el-option>
          </el-select>
        </el-form-item>
        <el-form-item label="备注" :label-width="formLabelWidth">
          <el-input v-model="ruleForm.bak" autocomplete="off"></el-input>
        </el-form-item>
      </el-form>
      <div slot="footer" class="dialog-footer">
        <el-button @click="resetForm('ruleForm')">取消</el-button>
        <el-button
          type="primary"
          @click="submitForm('ruleForm')"
          v-loading.fullscreen.lock="fullscreenLoading"
          >提交</el-button
        >
      </div>
    </el-dialog>
  </div>
</template>

@@ -72,19 +189,21 @@
  updateMenuTree,
  updateMenuTrees,
  queryMaxId,
  insertMenu,
  deleteMenu,
} from "../../api/api";
export default {
  //import引入的组件需要注入到对象中才能使用
  components: {
    MyBread,
  },

  data() {
    return {
      defaultProps: {
        children: "children",
        label: "cnName",
      },
      fullscreenLoading: false,
      oriData: [], //原始树数据
      menuList: [], //el树数据
      old_dirDat: [], //el树数据(拖动前)
@@ -99,8 +218,75 @@
        type: null,
        bak: "",
      },
      backUpData: {},
      formLabelWidth: "170px",
      backUpData: "",
      formLabelWidth: "130px",
      delChildID: "",
      delChildIDs: [],
      dialogFormVisible: false,
      ruleForm: {
        level: null,
        orderNum: null,
        pid: null,
        enName: "",
        cnName: "",
        icon: "",
        isShow: null,
        url: "",
        perms: null,
        type: null,
        bak: "",
      },
      rules: {
        enName: [
          { required: true, message: "请输入英文名称", trigger: "blur" },
        ],
        cnName: [
          { required: true, message: "请输入中文名称", trigger: "blur" },
        ],
        url: [
          { required: true, message: "请输入菜单跳转的地址", trigger: "blur" },
        ],
        isShow: [
          {
            required: true,
            message: "请选择是否显示",
            trigger: "change",
          },
        ],
        type: [
          {
            required: true,
            message: "请选择节点类型",
            trigger: "change",
          },
        ],
      },
      // 下拉的option里面的value定义成0,1，不能定义成’0’,'1’字符串，
      // 如果要定义成字符串，后台需要返回的也是字符串
      options1: [
        {
          value: 0,
          label: "隐藏",
        },
        {
          value: 1,
          label: "显示",
        },
      ],
      options2: [
        {
          value: 0,
          label: "根目录",
        },
        {
          value: 1,
          label: "菜单",
        },
        {
          value: 2,
          label: "按钮",
        },
      ],
    };
  },
  methods: {
@@ -125,38 +311,55 @@
        // 循环所有项
        let branchArr = cloneData.filter((child) => father.id == child.pid); // 对比ID，分别上下级菜单，并返回数据
        branchArr.length > 0 ? (father.children = branchArr) : ""; // 给父级添加一个children属性，并赋值
        return father.pid == 1; // 返回一级菜单
        return father.pid == 0; // 返回一级菜单
      });
    },
    append(data) {
      this.$prompt("请输入名称", "提示", {
        confirmButtonText: "确定",
        cancelButtonText: "取消",
      })
        .then(({ value }) => {
          const newChild = {
            id: this.id + 1,
            name: value,
            pid: data.id,
            // children: [],
            orderNum: data.children ? data.children.length + 1 : 1,
          };
          this.id = newChild.id; //修改新的最大I
          console.log(newChild);

          if (!data.children) {
            this.$set(data, "children", []);
    append(node, data) {
      this.dialogFormVisible = true;
      this.ruleForm.pid = data.id;
      this.ruleForm.orderNum = node.childNodes.length + 1;
      this.ruleForm.level = data.level + 1;
    },
    resetForm(formName) {
      this.dialogFormVisible = false;
      this.$nextTick(() => {
        this.$refs[formName].resetFields();
        this.ruleForm = {};
      });
    },
    submitForm(formName) {
      this.$nextTick(() => {
        this.$refs[formName].validate((valid) => {
          if (valid) {
            this.fullscreenLoading = true;
            insertMenu(this.ruleForm)
              .then((res) => {
                setTimeout(() => {
                  this.fullscreenLoading = false;
                  if (res.code == 200) {
                    this.$message({
                      message: "添加成功",
                      type: "success",
                    });
                    this.itemdetail = {};
                    this.ruleForm = {};
                    this.dialogFormVisible = false;
                    this.$refs[formName].resetFields();
                  }
                }, 500);
              })
              .catch((res) => {
                this.itemdetail = {};
                this.$message.error("添加失败");
                this.fullscreenLoading = false;
                console.log(res);
              });
          } else {
            // alert("目录名称不能为空");
            return false;
          }
          data.children.push(newChild);
          this.newData.push(newChild);
          // this.sendChange();
        })
        .catch(() => {
          this.$message({
            type: "info",
            message: "取消输入",
          });
        });
      });
    },
    remove(node, data) {
      this.$confirm("此操作将删除该节点, 是否继续?", "提示", {
@@ -165,41 +368,61 @@
        type: "warning",
      })
        .then(() => {
          //兄弟重新排序
          const parent = node.parent;
          const children = parent.data.children || parent.data;
          const index = children.findIndex((d) => d.id === data.id);
          let res = children.splice(index, 1);
          var std = [];
          for (var i in res) {
            std.push(res[i].id);
          }
          // deleteDirTree(std);
          this.getDirTree();
          this.$message({
            type: "success",
            message: "删除成功!",
          children.splice(data.orderNum - 1, 1);
          children.forEach((item, index) => {
            item.orderNum = index + 1;
          });

          this.traverseArr(data); //获取删除的子ID
          this.delChildIDs.push(data.id); //要删除的全部ID
          let delIDs = this.delChildIDs;
          Promise.all([
            deleteMenu({ ids: delIDs.toString() }),
            updateMenuTrees(children),
          ])
            .then((res) => {
              console.log(res);
              if (res[0].code == 200 && res[1].code == 200) {
                this.$message({
                  type: "success",
                  message: "删除成功!",
                });
                this.itemdetail = {};
              } else if (res[0].code == 200) {
                this.$message.error("删除成功，位置调整失败");
              } else if (res[1].code == 200) {
                this.$message.error("删除失败,位置调整成功");
              } else {
                this.$message.error("删除失败");
              }
            })
            .catch(() => {
              this.$message({
                type: "error",
                message: "删除失败",
              });
            });

          //重置要删除的子ID
          this.delChildIDs = [];
        })
        .catch(() => {
          this.$message({
            type: "info",
            message: "已取消删除",
          });
          this.$message("已取消删除");
        });
      // this.dialogMessage="是否删除"
      // this.dialogFlag = 1;
      // this.dialogFrom ={
      //   node:node,
      //   val:data
      // }
      //   this.dialogVisible=true;//目录树更改弹窗
      // const parent = node.parent;
      // const children = parent.data.children || parent.data;
      // const index = children.findIndex((d) => d.id === data.id);
      // let res = children.splice(index, 1);
      // // console.log(res);
      // // console.log(data);
      // console.log(this.flaten(res));
    },
    traverseArr(obj) {
      if (obj.children) {
        return obj.children.forEach((item) => {
          // console.log(item.id + "---" + item.name);
          // this.delChildID += "id=" + item.id + "&";
          this.delChildIDs.push(item.id);
          this.traverseArr(item);
        });
      }
      return;
    },
    flaten(arr) {
      return arr.reduce((p, v, i) => {
@@ -215,7 +438,7 @@
      this.old_dirDat = JSON.parse(JSON.stringify(this.menuList)); //将备份的dir重新赋值
    },
    handleDrop(draggingNode, dropNode, dropType, ev) {
      this.$confirm("是否调整至该位置?", "提示", {
      this.$confirm("此操作将保存目录更改, 是否继续?", "提示", {
        confirmButtonText: "确定",
        cancelButtonText: "取消",
        type: "warning",
@@ -240,7 +463,7 @@
            }
            item.orderNum = i + 1;
          });
          console.log(nodeData);
          // console.log(nodeData);
          //更新原始整体数据
          let arr = [];
          this.oriData.forEach((e) => {
@@ -250,6 +473,7 @@
            arr.push(e);
          });
          this.newData = arr;
          this.sendChange();
        })
        .catch(() => {
          this.$message({
@@ -260,33 +484,61 @@
        });
    },
    sendChange() {
      updateMenuTrees(this.newData).then((res) => {
        if (res.code == 200) {
          alert("更改完成。请及时刷新页面！");
          return;
        } else {
          alert("修改失败，请重试！");
      this.newData.forEach((item) => {
        if (item.pid == 0) {
          item.type = 0;
        }
      });
      updateMenuTrees(this.newData)
        .then((res) => {
          if (res.code == 200) {
            alert("调整完成。请及时刷新页面！");
            return;
          } else {
            alert("调整失败，请重试！");
          }
        })
        .catch(() => {
          alert("修改失败，请重试！");
        });
    },
    handleNodeClick(data) {
      // console.log(data);
      this.backUpData = JSON.stringify(data);
      this.itemdetail = JSON.parse(JSON.stringify(data));
    },
    updMenu() {
      updateMenuTree(this.itemdetail).then((res) => {
        // console.log(res);
        if (res.code == 200) {
          alert("修改完成，请及时刷新页面！");
          return;
        } else {
          alert("修改失败，请重试！");
        }
    updMenu(formName) {
      this.$nextTick(() => {
        this.$refs[formName].validate((valid) => {
          if (valid) {
            this.fullscreenLoading = true;
            updateMenuTree(this.itemdetail)
              .then((res) => {
                setTimeout(() => {
                  this.fullscreenLoading = false;
                  if (res.code == 200) {
                    alert("修改完成，请及时刷新页面！");
                    this.itemdetail = {};
                    this.dialogFormVisible = false;
                    this.$refs[formName].resetFields();
                  }
                }, 500);
              })
              .catch((res) => {
                alert("修改失败，请重试！");
                this.fullscreenLoading = false;
              });
          } else {
            return false;
          }
        });
      });
    },
    reset() {
      this.itemdetail = JSON.parse(this.backUpData);
    reset(formName) {
      this.$refs[formName].resetFields();
      if (this.backUpData != "") {
        this.itemdetail = JSON.parse(this.backUpData);
      }
    },
  },
  mounted() {
@@ -340,7 +592,7 @@
          background-color: rgb(153, 153, 153);
        }
        .btnBox {
          margin-left: 5px;
          margin: 0 10px 0 5px;
          .el-button + .el-button {
            margin-left: 5px;
          }