WholeProcessPlatform/frontend-sjtb/src/views/system/menu/index.vue

<script setup lang="ts">
import { ref, onMounted } from "vue";
import { ElForm, ElMessageBox, ElMessage } from "element-plus";
import {
  getdata,
  addmenu,
  editmenu,
  deltmenu,
  moveOrderno,
  uploadIcon,
  moveIcon,
} from "@/api/menu";
import Sortable from "sortablejs";
//定义表格数据
const url = import.meta.env.VITE_APP_BASE_API;
const tableData: any = ref([]);
function gteTabledata() {
  const params = {
    systemcode: systemcode.value,
    name: "",
  };
  loading.value = true;
  getdata(params)
    .then((res) => {
      tableData.value = res;
      loading.value = false;
    })
    .catch(() => {
      loading.value = false;
    });
}
const expertInfoRef = ref();
const menuInfoRef = ref();
const btnInfoRef = ref();
const loading = ref(false);
//定义tabbar
const systemcode = ref("4");
const activeIndex = ref("4");
function handleSelect(key: string) {
  if (key == "1") {
    systemcode.value = "1";
  } else if (key == "2") {
    systemcode.value = "2";
  } else if (key == "3") {
    systemcode.value = "3";
  } else if (key == "4") {
    systemcode.value = "4";
  }
  gteTabledata();
}
//定义搜索框文本
const menuname = ref("");
//点击搜索
function search() {
  menuname.value = menuname.value.replace(/\s+/g, "");
  let params = {
    systemcode: systemcode.value,
    name: menuname.value,
    isdisplay: "",
  };
  getdata(params).then((res) => {
    tableData.value = res;
  });
}
//目录添加
const title = ref("");
const expertInfo: any = ref({
  name: "",
  type: "0",
  opturl: "",
  permission: "",
  isdisplay: true,
  systemcode: "",
  icon: "",
  code: "",
});
const dialogVisible = ref(false);
function addClick() {
  title.value = "新增目录";
  const orgnamemage = ref({
    name: "",
    type: "3",
    opturl: "",
    permission: "",
    orderno: 1,
    isdisplay: "1",
  });
  expertInfo.value = orgnamemage.value;
  dialogVisible.value = true;
}
//关闭目录
function handleClose() {
  dialogVisible.value = false;
  btnVisible.value = false;
  menuVisible.value = false;
  if (expertInfoRef.value != null) expertInfoRef.value.resetFields();
  if (menuInfoRef.value != null) menuInfoRef.value.resetFields();
  if (btnInfoRef.value != null) btnInfoRef.value.resetFields();
}
//表格规则定义
const rules = ref({
  name: [{ required: true, message: "请输入目录名称", trigger: "blur" }],
  opturl: [{ required: true, message: "请输入操作URL", trigger: "blur" }],
  permission: [{ required: true, message: "请输入目录权限标识", trigger: "blur" }],
});
//添加子目录
const parentID = ref("");
function addchilder(row: any) {
  title.value = "新增子目录";

  const orgnamemage = ref({
    name: "",
    type: "3",
    opturl: "",
    permission: "",
    orderno: 1,
    isdisplay: "1",
  });
  parentID.value = row.id;
  expertInfo.value = orgnamemage.value;
  dialogVisible.value = true;
  iconall.value = "";
  getid.value = row.id;
}
//新增目录-确认按钮
function expertsubmit() {
  if (expertInfo.value.name == "") {
    ElMessage({
      message: "请填写目录名称",
      type: "error",
    });
    return false;
  }
  if (expertInfo.value.id) {
    let params = {
      name: expertInfo.value.name,
      systemcode: systemcode.value,
      type: "0",
      parentid: "0",
      id: expertInfo.value.id,
      icon: iconall.value,
      opturl: expertInfo.value.opturl,
      isdisplay: expertInfo.value.isdisplay,
    };
    editmenu(params).then(() => {
      gteTabledata();
      dialogVisible.value = false;
      ElMessage({
        message: "修改成功",
        type: "success",
      });
    });
  } else if (title.value == "新增子目录") {
    let params = {
      name: expertInfo.value.name,
      systemcode: systemcode.value,
      type: "0",
      opturl: expertInfo.value.opturl,
      isdisplay: expertInfo.value.isdisplay,
      parentid: parentID.value,
      icon: iconall.value,
    };
    addmenu(params).then(() => {
      gteTabledata();
      dialogVisible.value = false;
      ElMessage({
        message: "新建成功",
        type: "success",
      });
    });
  } else {
    let params = {
      name: expertInfo.value.name,
      systemcode: systemcode.value,
      type: "0",
      opturl: expertInfo.value.opturl,
      isdisplay: expertInfo.value.isdisplay,
      parentid: "0",
      id: expertInfo.value.id,
      icon: iconall.value,
    };
    addmenu(params).then(() => {
      gteTabledata();
      dialogVisible.value = false;
      ElMessage({
        message: "新建成功",
        type: "success",
      });
    });
  }
}
//菜单目录
const menurules = ref({
  name: [{ required: true, message: "请输入菜单名称", trigger: "blur" }],
  opturl: [{ required: true, message: "请输入操作URL", trigger: "blur" }],
  permission: [{ required: true, message: "请输入菜单权限标识", trigger: "blur" }],
});
const menuVisible = ref(false);
const menutitle = ref("");
//定义按钮弹窗数据
const btnInfo: any = ref({
  name: " ",
  orderno: " ",
  islink: " ",
  opturl: " ",
  permission: " ",
  isdisplay: " ",
  icon: "",
});
const btnVisible = ref(false);
const btnrules = ref({
  name: [{ required: true, message: "请输入按钮名称", trigger: "blur" }],
  permission: [{ required: true, message: "请输入按钮权限标识", trigger: "blur" }],
});
//定义菜单弹窗数据
const menuInfo: any = ref({
  name: "",
  orderno: "",
  islink: "",
  opturl: "",
  permission: "",
  isdisplay: "",
  icon: "",
});
//修改目录
const btntitle = ref("");
const getid = ref("");
const allId = ref("");
function handleEdit(row: any) {
  iconall.value = row.icon;
  const Row = JSON.parse(JSON.stringify(row));
  getid.value = row.id;
  btnparentid.value = row.parentid;
  if (row.type == "2") {
    btntitle.value = "修改按钮";
    let newInfo = ref({});
    newInfo.value = Row;
    btnInfo.value = newInfo.value;
    btnVisible.value = true;
  } else if (row.type == "1") {
    menutitle.value = "修改菜单";
    let newInfo = ref({});
    newInfo.value = Row;
    menuInfo.value = newInfo.value;
    menuVisible.value = true;
  } else {
    title.value = "修改目录";
    let newInfo = ref({});
    newInfo.value = Row;
    expertInfo.value = newInfo.value;
    dialogVisible.value = true;
  }
}
//新增菜单
const btnparentid = ref("");
function menuclick(row: any) {
  if (row.id == undefined) {
    btnparentid.value = "0";
  } else {
    btnparentid.value = row.id;
  }
  menutitle.value = "添加菜单";
  (menuInfo.value = {
    name: "",
    type: "1",
    islink: "0",
    opturl: "",
    permission: "",
    orderno: 1,
    isdisplay: "1",
  }),
    (menuVisible.value = true);
  iconall.value = "";
  getid.value = row.id;
}
//添加按钮
function btnclick(row: any) {
  getid.value = row.id;
  btntitle.value = "添加按钮";
  (btnInfo.value = {
    name: "",
    type: "2",
    islink: "0",
    opturl: "",
    permission: "",
    orderno: 1,
    isdisplay: "1",
  }),
    (btnVisible.value = true);
  btnparentid.value = row.id;
}
//删除
function handleDelete(row: any) {
  const message = ref();
  if (row.type == "0") {
    message.value = "确定删除此目录及此目录下的所有菜单吗？";
  } else if (row.type == "1") {
    message.value = "确定删除此菜单及此菜单下的所有按钮吗？";
  } else if (row.type == "2") {
    message.value = "确定删除此按钮吗？";
  }
  ElMessageBox.confirm(message.value, "删除提示", {
    confirmButtonText: "确定",
    cancelButtonText: "取消",
    type: "warning",
  }).then(() => {
    const params = {
      id: row.id,
    };
    deltmenu(params).then(() => {
      gteTabledata();
      ElMessage({
        message: "删除成功",
        type: "success",
      });
    });
  });
}
//菜单目录-确定
function menusubmit() {
  if (menuInfo.value.name == "") {
    ElMessage({
      message: "请填写菜单名称",
      type: "error",
    });
    return false;
  }
  if (menuInfo.value.id) {
    let params = {
      name: menuInfo.value.name,
      systemcode: systemcode.value,
      type: "1",
      opturl: menuInfo.value.opturl,
      permission: menuInfo.value.permission,
      islink: menuInfo.value.islink,
      isdisplay: menuInfo.value.isdisplay,
      // parentid: '',
      id: getid.value,
      icon: iconall.value,
    };
    editmenu(params).then(() => {
      gteTabledata();
      menuVisible.value = false;
      ElMessage({
        message: "修改成功",
        type: "success",
      });
    });
  } else {
    let params = {
      name: menuInfo.value.name,
      systemcode: systemcode.value,
      type: "1",
      opturl: menuInfo.value.opturl,
      islink: menuInfo.value.islink,
      isdisplay: menuInfo.value.isdisplay,
      parentid: btnparentid.value,
      id: expertInfo.value.id,
      icon: iconall.value,
    };
    addmenu(params).then(() => {
      gteTabledata();
      menuVisible.value = false;
      ElMessage({
        message: "新建成功",
        type: "success",
      });
    });
  }
}
//按钮目录-确定

function btnsubmit() {
  if (btnInfo.value.name == "" || btnInfo.value.permission == "") {
    ElMessage({
      message: "请填写按钮名称和权限标识",
      type: "error",
    });
    return false;
  }
  if (btnInfo.value.id) {
    let params = {
      code: btnInfo.value.code,
      name: btnInfo.value.name,
      systemcode: systemcode.value,
      type: "2",
      opturl: btnInfo.value.opturl,
      permission: btnInfo.value.permission,
      islink: btnInfo.value.islink,
      // isdisplay: btnInfo.value.isdisplay,
      id: getid.value,
    };
    editmenu(params).then(() => {
      gteTabledata();
      dialogVisible.value = false;
      ElMessage({
        message: "修改成功",
        type: "success",
      });
      btnVisible.value = false;
    });
  } else {
    let params = {
      name: btnInfo.value.name,
      systemcode: systemcode.value,
      type: "2",
      opturl: btnInfo.value.opturl,
      permission: btnInfo.value.permission,
      islink: btnInfo.value.islink,
      isdisplay: btnInfo.value.isdisplay,
      parentid: btnparentid.value,
    };
    addmenu(params).then(() => {
      gteTabledata();
      dialogVisible.value = false;
      ElMessage({
        message: "新建成功",
        type: "success",
      });
      btnVisible.value = false;
    });
  }
}
function dateFormat(row: any) {
  const daterc = row;
  if (daterc != null) {
    var date = new Date(daterc);
    var year = date.getFullYear();
    var month =
      date.getMonth() + 1 < 10 ? "0" + (date.getMonth() + 1) : date.getMonth() + 1;
    date.getMonth() + 1 < 10 ? "0" + (date.getMonth() + 1) : date.getMonth() + 1;
    var day = date.getDate() < 10 ? "0" + date.getDate() : date.getDate();
    var hours = date.getHours() < 10 ? "0" + date.getHours() : date.getHours();
    var minutes = date.getMinutes() < 10 ? "0" + date.getMinutes() : date.getMinutes();
    var seconds = date.getSeconds() < 10 ? "0" + date.getSeconds() : date.getSeconds();
    // 拼接
    return year + "-" + month + "-" + day + " " + hours + ":" + minutes + ":" + seconds;
  }
}
//上传图标
function fileClick(val: any) {
  allId.value = val;
  const avatar = document.getElementById("avatar");
  avatar?.click();
}
const iconall = ref("");
function changeFile(e: any) {
  const files = new FormData();
  files.append("icon", e.target.files[0]);
  files.append("menuId", allId.value);
  uploadIcon(files)
    .then((res) => {
      iconall.value = res.data;
      gteTabledata();
      ElMessage({
        type: "success",
        message: "上传成功",
      });
      // location.reload()
      var file: any = document.getElementById("avatar");
      file.value = "";
    })
    .catch(() => {
      ElMessage({
        type: "error",
        message: "上传失败",
      });
      var file: any = document.getElementById("avatar");
      file.value = "";
    });
}
//图标删除事件
function delectIcon(id: any) {
  ElMessageBox.confirm("确定删除此图标吗？", "删除提示", {
    confirmButtonText: "确定",
    cancelButtonText: "取消",
    type: "warning",
  }).then(() => {
    const params = {
      id: id,
    };
    moveIcon(params).then(() => {
      iconall.value = "";
      gteTabledata();
      ElMessage({
        type: "success",
        message: "删除成功",
      });
    });
  });
}
// Icon选择器显示状态
function treeToTile(treeData: any, childKey = "children") {
  const arr = [] as any[];
  const expanded = (data: any) => {
    if (data && data.length > 0) {
      data
        .filter((d: any) => d)
        .forEach((e: any) => {
          arr.push(e);
          expanded(e[childKey] || []);
        });
    }
  };
  expanded(treeData);
  return arr;
}
const activeRows: any = ref([]);
function rowDrop() {
  const tbody = document.querySelector(".draggable .el-table__body-wrapper tbody");
  Sortable.create(tbody, {
    draggable: ".draggable .el-table__row",
    onMove: () => {
      activeRows.value = treeToTile(tableData.value); // 把树形的结构转为列表再进行拖拽
    },
    onEnd(e: any) {
      const oldRow = activeRows.value[e.oldIndex]; // 移动的那个元素
      const newRow = activeRows.value[e.newIndex]; // 新的元素

      if (oldRow.type != newRow.type) {
        ElMessage({
          message: "拖拽同级目录排序",
          type: "warning",
        });
        tableData.value = [];
        gteTabledata();
        return;
      }
      const params = {
        fromId: oldRow.id,
        toId: newRow.id,
      };
      moveOrderno(params).then((res: any) => {
        if (res.code == 1) {
          tableData.value = [];
          gteTabledata();
          ElMessage({
            type: "error",
            message: "修改失败",
          });
        } else {
          tableData.value = [];
          gteTabledata();
        }
      });
    },
  });
}
onMounted(() => {
  gteTabledata();
  rowDrop();
});
</script>
<template>
  <div class="collectiontemplate-box">
    <section class="detail-box">
      <el-menu
        style="margin-bottom: 10px"
        :default-active="activeIndex"
        class="el-menu-demo"
        mode="horizontal"
        @select="handleSelect"
      >
        <!-- <el-menu-item index="1">Web端</el-menu-item>
        <el-menu-item index="2">手机App</el-menu-item>
        <el-menu-item index="3">Pad端</el-menu-item> -->
        <el-menu-item index="4">数据填报</el-menu-item>
      </el-menu>
      <div
        style="
          display: flex;
          display: -webkit-flex;
          justify-content: space-between;
          -webkit-justify-content: space-between;
          margin-bottom: 10px;
        "
      >
        <div style="display: flex; display: -webkit-flex">
          <el-input
            v-model="menuname"
            placeholder="请输入菜单标题"
            clearable
            style="width: 200px; margin-right: 10px"
            @keyup.enter="search()"
          />
          <el-button type="primary" @click="search()">搜索</el-button>
        </div>
        <div>
          <el-button v-hasPerm="['add:menu']" type="primary" @click="addClick">
            <img
              src="@/assets/MenuIcon/jscz_xz.png"
              alt=""
              style="margin-right: 4px"
            />新增目录</el-button
          >
          <el-button v-hasPerm="['add:menu']" type="primary" @click="menuclick">
            <img
              src="@/assets/MenuIcon/jscz_xz.png"
              alt=""
              style="margin-right: 4px"
            />添加菜单</el-button
          >
        </div>
      </div>
      <div class="draggable">
        <el-table
          v-loading="loading"
          ref="multipleTable"
          :data="tableData"
          default-expand-all
          tooltip-effect="dark"
          style="width: 100%; height: calc(104vh - 290px)"
          row-key="id"
          border
          :header-cell-style="{
            background: 'rgb(250 250 250)',
            color: '#383838',
            height: '50px',
          }"
        >
          <el-table-column label="菜单标题" width="250" prop="name" show-overflow-tooltip>
            <template #default="scope">
              <div style="position: absolute; left: 15px">
                <img src="@/assets/MenuIcon/lbcz_td.png" alt="" />
              </div>
              <div style="margin-left: 20px">{{ scope.row.name }}</div>
            </template>
          </el-table-column>
          <el-table-column label="菜单类型" width="100" align="center" prop="type">
            <template #default="scope">
              <span v-if="scope.row.type == '2'">按钮</span>
              <span v-else-if="scope.row.type == '1'">菜单</span>
              <span v-else>目录</span>
            </template>
          </el-table-column>
          <el-table-column
            label="菜单编号"
            prop="code"
            width="100"
            show-overflow-tooltip
          />
          <el-table-column label="系统类型" width="120" prop="systemcode" align="center">
            <template #default="scope">
              <span v-if="scope.row.systemcode == '1'">Web端</span>
              <span v-else-if="scope.row.systemcode == '2'">手机App</span>
              <span v-else-if="scope.row.systemcode == '3'">Pad端</span>
              <span v-else-if="scope.row.systemcode == '4'">数据填报</span>
            </template>
          </el-table-column>
          <!-- <el-table-column label="图标" width="100" prop="icon" align="center">
            <template #default="scope">
              <div
                v-if="scope.row.type !== '2'"
                style="
                  display: flex;
                  display: -webkit-flex;
                  justify-content: center;
                  -webkit-justify-content: center;
                  align-items: center;
                  -webkit-align-items: center;
                  width: 100%;
                  height: 100%;
                "
              >
                <div v-if="scope.row.icon == ''">
                  <el-button @click="fileClick(scope.row.id)" class="avatar"
                    >上传</el-button
                  >
                  <input
                    type="file"
                    id="avatar"
                    style="display: none"
                    @change="changeFile"
                  />
                </div>
                <div v-else class="delicon">
                  <div
                    class="delIcon"
                    style="
                      position: absolute;
                      top: 0px;
                      right: -7px;
                      background-color: red;
                      width: 10px;
                      height: 10px;
                      text-align: center;
                      line-height: 9px;
                      border-radius: 50%;
                      display: none;
                      z-index: 1000;
                    "
                    @click="delectIcon(scope.row.id)"
                  >
                    x
                  </div>
                  <img
                    :src="url + '/menu/' + scope.row.icon"
                    @click="fileClick(scope.row.id)"
                    alt=""
                    style="width: 16px; height: 16px; cursor: pointer"
                  />
                  <input
                    type="file"
                    id="avatar"
                    style="display: none"
                    @change="changeFile"
                  />
                </div>
              </div>
            </template>
          </el-table-column> -->
          <!-- <el-table-column label="是否外链" width="100" prop="islink" align="center">
            <template #default="scope">
              <span v-if="scope.row.islink == '1'">是</span>
              <span v-else>否</span>
            </template>
          </el-table-column> -->
          <el-table-column
            label="操作URL"
            min-width="100"
            prop="opturl"
            show-overflow-tooltip
          >
            <template #default="scope">
              <span v-if="scope.row.opturl">{{ scope.row.opturl }}</span>
              <span v-else>--</span>
            </template>
          </el-table-column>
          <el-table-column
            label="权限标识"
            width="140"
            prop="permission"
            show-overflow-tooltip
          />
          <el-table-column label="是否显示" width="100" prop="isdisplay" align="center">
            <template #default="scope">
              <span v-if="scope.row.isdisplay == '1'">是</span>
              <span v-else>否</span>
            </template>
          </el-table-column>
          <el-table-column
            prop="lastmodifier"
            label="最近修改者"
            width="120"
          ></el-table-column>
          <el-table-column prop="lastmodifydate" label="最近修改日期" width="170">
            <template #default="scope">
              {{ dateFormat(scope.row.lastmodifydate) }}
            </template>
          </el-table-column>
          <el-table-column
            label="操作"
            width="160"
            fixed="right"
            align="center"
            style="display: flex; display: -webkit-flex"
          >
            <template #default="scope">
              <!-- <img src="@/assets/icon/edit.png" alt="" title="修改" @click="handleEdit(scope.row)"
                style="cursor: pointer;margin-left:5px;"> -->
              <!-- <img src="@/assets/icon/subdirectory.png" alt="" title="子目录"  @click="subdirectoryclick(scope.$index, scope.row)"  style="cursor: pointer;margin-left:5px"> -->
              <span
                style="
                  display: flex;
                  display: -webkit-flex;
                  justify-content: space-around;
                  -webkit-justify-content: space-around;
                "
              >
                <img
                  src="@/assets/MenuIcon/lbcz_xg.png"
                  alt=""
                  v-hasPerm="['update:menu']"
                  title="修改"
                  @click="handleEdit(scope.row)"
                  style="cursor: pointer"
                />
                <img
                  src="@/assets/MenuIcon/lbcz_zml.png"
                  alt=""
                  v-hasPerm="['add:menu']"
                  v-if="scope.row.type == '0'"
                  title="添加子目录"
                  @click="addchilder(scope.row)"
                  style="cursor: pointer"
                />
                <img
                  src="@/assets/MenuIcon/lbcz_zml1.png"
                  alt=""
                  v-hasPerm="['add:menu']"
                  v-else
                  title="新增子目录"
                  style="cursor: pointer"
                />
                <img
                  src="@/assets/MenuIcon/lbcz_cd.png"
                  alt=""
                  v-hasPerm="['add:menu']"
                  v-if="scope.row.type == '0'"
                  title="添加菜单"
                  @click="menuclick(scope.row)"
                  style="cursor: pointer"
                />
                <img
                  src="@/assets/MenuIcon/lbcz_cd1.png"
                  alt=""
                  v-hasPerm="['add:menu']"
                  v-else
                  title="添加菜单"
                  style="cursor: pointer"
                />
                <img
                  src="@/assets/MenuIcon/lbcz_an.png"
                  alt=""
                  v-hasPerm="['add:menu']"
                  v-if="scope.row.type == '1'"
                  title="按钮"
                  @click="btnclick(scope.row)"
                  style="cursor: pointer"
                />
                <img
                  src="@/assets/MenuIcon/lbcz_an1.png"
                  alt=""
                  v-hasPerm="['add:menu']"
                  v-else
                  title="按钮"
                  style="
                    cursor: pointer;
                    margin-left: 5px;
                    font-size: 18px;
                    color: rgb(153 214 255);
                  "
                />
                <img
                  src="@/assets/MenuIcon/lbcz_sc.png"
                  alt=""
                  v-hasPerm="['del:menu']"
                  v-if="scope.row.status == '09'"
                  title="删除"
                  style="cursor: pointer"
                />
                <img
                  src="@/assets/MenuIcon/lbcz_sc.png"
                  alt=""
                  v-hasPerm="['del:menu']"
                  v-else
                  title="删除"
                  @click="handleDelete(scope.row)"
                  style="cursor: pointer"
                />
              </span>
            </template>
          </el-table-column>
        </el-table>
      </div>
      <!-- </div> -->
    </section>
    <!-- 新增目录 -->
    <el-dialog
      v-model="dialogVisible"
      :close-on-click-modal="false"
      :before-close="handleClose"
      :title="title"
      draggable
      append-to-body
      width="620px"
      class="dialogClass"
    >
      <el-form ref="expertInfoRef" :model="expertInfo" :rules="rules" label-width="90px">
        <el-form-item label="目录编号" prop="name">
          <el-input
            v-model="expertInfo.code"
            placeholder=""
            disabled
            style="width: 100%"
          ></el-input>
        </el-form-item>
        <el-form-item label="目录名称" prop="name">
          <el-input
            v-model="expertInfo.name"
            placeholder=""
            style="width: 100%"
          ></el-input>
        </el-form-item>
        <el-form-item label="是否显示" prop="isdisplay">
          <el-radio-group v-model="expertInfo.isdisplay">
            <el-radio label="1">是</el-radio>
            <el-radio label="0">否</el-radio>
          </el-radio-group>
        </el-form-item>
      </el-form>
      <span
        class="dialog-footer"
        style="
          display: flex;
          display: -webkit-flex;
          justify-content: flex-end;
          -webkit-justify-content: flex-end;
        "
      >
        <el-button @click="handleClose">取 消</el-button>
        <el-button type="primary" @click="expertsubmit">确 定</el-button>
      </span>
    </el-dialog>
    <!-- 菜单目录 -->
    <el-dialog
      v-model="menuVisible"
      :close-on-click-modal="false"
      :before-close="handleClose"
      :title="menutitle"
      draggable
      append-to-body
      width="620px"
      class="dialogClass"
    >
      <el-form ref="menuInfoRef" :model="menuInfo" :rules="menurules" label-width="90px">
        <el-form-item label="菜单编号">
          <el-input
            v-model="menuInfo.code"
            placeholder=""
            disabled
            style="width: 100%"
          ></el-input>
        </el-form-item>
        <el-form-item label="菜单名称" prop="name">
          <el-input v-model="menuInfo.name" placeholder="" style="width: 100%"></el-input>
        </el-form-item>

        <!-- <el-form-item label="是否外链" prop="islink">
          <el-radio-group v-model="menuInfo.islink">
            <el-radio label="1">是</el-radio>
            <el-radio label="0">否</el-radio>
          </el-radio-group>
        </el-form-item> -->
        <el-form-item label="操作URL" prop="opturl">
          <el-input
            v-model="menuInfo.opturl"
            placeholder=""
            style="width: 100%"
          ></el-input>
        </el-form-item>
        <el-form-item label="是否显示" prop="isdisplay">
          <el-radio-group v-model="menuInfo.isdisplay">
            <el-radio label="1">是</el-radio>
            <el-radio label="0">否</el-radio>
          </el-radio-group>
        </el-form-item>
      </el-form>
      <span
        class="dialog-footer"
        style="
          display: flex;
          display: -webkit-flex;
          justify-content: flex-end;
          -webkit-justify-content: flex-end;
        "
      >
        <el-button @click="handleClose">取 消</el-button>
        <el-button type="primary" @click="menusubmit">确 定</el-button>
      </span>
    </el-dialog>
    <!-- 按钮 -->
    <el-dialog
      v-model="btnVisible"
      :close-on-click-modal="false"
      :before-close="handleClose"
      :title="btntitle"
      append-to-body
      width="620px"
      class="dialogClass"
      draggable
    >
      <el-form ref="btnInfoRef" :model="btnInfo" :rules="btnrules" label-width="90px">
        <el-form-item label="按钮编号">
          <el-input
            v-model="btnInfo.code"
            placeholder=""
            disabled
            style="width: 100%"
          ></el-input>
        </el-form-item>
        <el-form-item label="按钮名称" prop="name">
          <el-input v-model="btnInfo.name" placeholder="" style="width: 100%"></el-input>
        </el-form-item>
        <el-form-item label="权限标识" prop="permission">
          <el-input
            v-model="btnInfo.permission"
            placeholder=""
            style="width: 100%"
          ></el-input>
        </el-form-item>
        <el-form-item label="是否显示" prop="isdisplay">
          <el-radio-group v-model="btnInfo.isdisplay">
            <el-radio label="1">是</el-radio>
            <el-radio label="0">否</el-radio>
          </el-radio-group>
        </el-form-item>
      </el-form>
      <span
        class="dialog-footer"
        style="
          display: flex;
          display: -webkit-flex;
          justify-content: flex-end;
          -webkit-justify-content: flex-end;
        "
      >
        <el-button @click="handleClose">取 消</el-button>
        <el-button type="primary" @click="btnsubmit">确 定</el-button>
      </span>
    </el-dialog>
  </div>
</template>
<style scoped lang="scss">
.detail-box {
  position: relative;
  z-index: 900;
  pointer-events: all;
  width: 100%;
  height: calc(100vh - 110px);
  overflow: auto;
  background-color: rgba(255, 255, 255, 1);
  border: none;
  padding: 5px 20px 0px;
  box-sizing: border-box;
}

:deep(.el-tooltip) {
  display: flex;
  display: -webkit-flex;
  align-items: center;
  -webkit-align-items: center;
  position: relative;
}

.delicon {
  width: 20px;
  height: 25px;
  position: relative;
  display: flex;
  display: -webkit-flex;
  align-items: center;
  -webkit-align-items: center;
  // margin-left: 20px;
}

.delicon:hover {
  // background-color: red;

  .delIcon {
    display: block !important;
    color: #fff;
    cursor: pointer;
  }
}

:deep(.el-table__expand-icon) {
  margin-left: 15px;
  margin-right: -10px !important;
}
</style>