qgb-process 0.2.3 → 0.2.7

package/src/views/formBuilder/components/menuConfig.vue

@@ -1,1752 +1,1752 @@
-
-<template>
-  <el-tabs @tab-click="handleClick">
-    <el-tab-pane label="菜单">
-
-      <span slot="label">
-        <!-- <span class="span-box"> -->
-        <i class="el-icon-document span-box-icon"></i>
-        菜单
-        <!-- </span> -->
-      </span>
-      <div class="menu-list">
-        <div class="menu-config">
-          <div class="config-title">
-            <!-- <h4>菜单配置</h4><i
-          class="el-icon-circle-plus-outline"
-          @click.stop="addMenu()"
-        ></i> -->
-            <el-button
-              type="primary"
-              class='addgroup'
-              @click.stop="addMenu()"
-              style="margin-right:50px"
-            >新增分组</el-button>
-            <el-button
-              class='addform'
-              plain
-              @click.stop="addForm()"
-            >新增表单</el-button>
-          </div>
-          <div class="collapse"></div>
-        </div>
-        <!-- 配置菜单 -->
-
-        <el-menu
-          default-active="2"
-          class="el-menu-vertical-demo"
-          @select="handleSelect"
-          @open="handleOpen"
-          @close="handleClose"
-        >
-          <el-submenu
-            :index="item.id"
-            v-for="(item,ind) in menu"
-            :key="'pre'+ind"
-            :class="{'is-open': item.open}"
-          >
-            <template
-              slot="title"
-              class='mTitle'
-            >
-              <!-- <i class="el-icon-location"></i> -->
-              <img
-                :src="item.icon"
-                v-if="getIcon(item.icon).isOss"
-                alt=""
-                srcset=""
-                style="width: 40px;height:40px;margin-right:10px;"
-              >
-              <span
-                :class="['icon-menu-'+(item.icon),'iconMenu']"
-                v-else-if="!getIcon(item.icon).isOss"
-              >
-                <span class="path1"></span>
-                <span class="path2"></span>
-                <span class="path3"></span>
-                <span class="path4"></span>
-              </span>
-              <div
-                v-else
-                style="width: 79px;height:40px;margin-right:10px;"
-              ></div>
-              <span class="menu-item-name"><span>{{item.name}}</span></span>
-              <div
-                class="menu-item-option"
-                v-if="item.operateStatus"
-                @click.stop
-              >
-                <!-- <i class="el-icon-edit" @click.stop="editMenuName(index,senindex)"></i>
-            <i :class="[senitem.isShow == 1 ? 'el-icon-view' : 'el-icon-no-view']" @click.stop="changeMenu(index,senindex)"></i> -->
-                <el-dropdown
-                  trigger="click"
-                  @command="handleCommand"
-                >
-                  <span class="el-dropdown-link">
-                    <i class="el-icon-setting el-icon--right"></i>
-                  </span>
-                  <el-dropdown-menu slot="dropdown">
-                    <el-dropdown-item :command="`edit-${ind}`">编辑</el-dropdown-item>
-                    <!-- <el-dropdown-item :command="`change-${index}-${senindex}`">
-                      {{senitem.isShow == 1 ? '隐藏' : '启用'}}</el-dropdown-item>-->
-                    <el-dropdown-item :command="`delete-${ind}`">删除</el-dropdown-item>
-                  </el-dropdown-menu>
-                </el-dropdown>
-              </div>
-            </template>
-            <template v-for="(item1,ind1) in item.subMenu">
-              <el-submenu
-                :index="item.id+'-'+item1.id"
-                :key="item1.id"
-                v-if="item1.type"
-              >
-                <template slot="title"> <span class="menu-item-name"><span>{{item1.name}}</span></span>
-                  <div
-                    class="menu-item-option"
-                    v-if="item1.operateStatus"
-                    @click.stop
-                  >
-                    <!-- <i class="el-icon-edit" @click.stop="editMenuName(index,senindex)"></i>
-            <i :class="[senitem.isShow == 1 ? 'el-icon-view' : 'el-icon-no-view']" @click.stop="changeMenu(index,senindex)"></i> -->
-                    <el-dropdown
-                      trigger="click"
-                      @command="handleCommand"
-                    >
-                      <span class="el-dropdown-link">
-                        <i class="el-icon-setting el-icon--right"></i>
-                      </span>
-                      <el-dropdown-menu slot="dropdown">
-                        <el-dropdown-item :command="`edit-${ind}-${ind1}`">编辑</el-dropdown-item>
-                        <!-- <el-dropdown-item :command="`change-${index}-${senindex}`">
-                      {{senitem.isShow == 1 ? '隐藏' : '启用'}}</el-dropdown-item>-->
-                        <el-dropdown-item :command="`delete-${ind}-${ind1}`">删除</el-dropdown-item>
-                      </el-dropdown-menu>
-                    </el-dropdown>
-                  </div>
-                </template>
-                <el-menu-item
-                  :index="item1.id+'-'+item2.id"
-                  :key="item2.id"
-                  v-for="(item2,ind2) in item1.subMenu"
-                  @click="getFormDes(item2.id,item2.name,'blank',item2.pid)"
-                >
-                  <img
-                    :src="item2.icon"
-                    v-if="getIcon(item2.icon).isOss"
-                    alt=""
-                    srcset=""
-                    style="width: 40px;height:40px;margin-right:10px;"
-                  >
-                  <span
-                    :class="['icon-menu-'+(item2.icon),'iconMenu']"
-                    v-else-if="!getIcon(item2.icon).isOss"
-                  >
-                    <span class="path1"></span>
-                    <span class="path2"></span>
-                    <span class="path3"></span>
-                    <span class="path4"></span>
-                  </span>
-                  <div
-                    v-else
-                    style="width: 79px;height:40px;margin-right:10px;"
-                  ></div>
-                  <span class="menu-item-name"><span>{{item2.name}}</span></span>
-                  <div
-                    class="menu-item-option"
-                    @click.stop
-                  >
-                    <!-- <i class="el-icon-edit" @click.stop="editMenuName(index,senindex)"></i>
-            <i :class="[senitem.isShow == 1 ? 'el-icon-view' : 'el-icon-no-view']" @click.stop="changeMenu(index,senindex)"></i> -->
-                    <el-dropdown
-                      trigger="click"
-                      @command="handleCommand"
-                    >
-                      <span class="el-dropdown-link">
-                        <i class="el-icon-setting el-icon--right"></i>
-                      </span>
-                      <el-dropdown-menu slot="dropdown">
-                        <el-dropdown-item :command="`edit-${ind}-${ind1}-${ind2}`">编辑</el-dropdown-item>
-                        <el-dropdown-item :command="`delete-${ind}-${ind1}-${ind2}`">删除</el-dropdown-item>
-                      </el-dropdown-menu>
-                    </el-dropdown>
-                  </div>
-
-                </el-menu-item>
-              </el-submenu>
-
-              <el-menu-item
-                :index="item.id+'-'+item1.id"
-                :key="item1.id"
-                @click="getFormDes(item1.id,item1.name,'blank',item1.pid)"
-                v-else
-              >
-                <img
-                  :src="item1.icon"
-                  v-if="getIcon(item1.icon).isOss"
-                  alt=""
-                  srcset=""
-                  style="width: 40px;height:40px;margin-right:10px;"
-                >
-                <span
-                  :class="['icon-menu-'+(item1.icon),'iconMenu']"
-                  v-else-if="!getIcon(item1.icon).isOss"
-                >
-                  <span class="path1"></span>
-                  <span class="path2"></span>
-                  <span class="path3"></span>
-                  <span class="path4"></span>
-                </span>
-                <div
-                  v-else
-                  style="width: 79px;height:40px;margin-right:10px;"
-                ></div>
-                <span class="menu-item-name"><span>{{item1.name}}</span></span>
-                <div
-                  class="menu-item-option"
-                  @click.stop
-                >
-                  <!-- <i class="el-icon-edit" @click.stop="editMenuName(index,senindex)"></i>
-            <i :class="[senitem.isShow == 1 ? 'el-icon-view' : 'el-icon-no-view']" @click.stop="changeMenu(index,senindex)"></i> -->
-                  <el-dropdown
-                    trigger="click"
-                    @command="handleCommand"
-                  >
-                    <span class="el-dropdown-link">
-                      <i class="el-icon-setting el-icon--right"></i>
-                    </span>
-                    <el-dropdown-menu slot="dropdown">
-                      <el-dropdown-item :command="`edit-${ind}-${ind1}`">编辑</el-dropdown-item>
-                      <el-dropdown-item :command="`delete-${ind}-${ind1}`">删除</el-dropdown-item>
-                    </el-dropdown-menu>
-                  </el-dropdown>
-                </div>
-
-              </el-menu-item>
-            </template>
-
-          </el-submenu>
-
-        </el-menu>
-
-        <el-dialog
-          :title="getTitle"
-          :visible.sync="dialogFormVisible"
-          :close-on-click-modal="false"
-          width="500px"
-        >
-          <el-dialog
-            width="30%"
-            title="图标选择"
-            :visible.sync="innerVisible"
-            append-to-body
-          >
-            <div>
-
-              <el-row>
-                <el-col
-                  :span="3"
-                  v-for="(e,i) in 40"
-                  :key='i'
-                  class='menuIconBox'
-                >
-                  <span
-                    :class="['icon-menu-'+(i+1),'iconMenu',{ bgc: menuIconInnerIndex == (i+1) }]"
-                    @dblclick="innerVisible = false;
-                    menuIconIndex = menuIconInnerIndex = (i+1);
-                    $nextTick(()=>{form.icon = menuIconIndex})
-
-                     "
-                    @click="menuIconInnerIndex = (i+1)"
-                  >
-                    <span class="path1"></span>
-                    <span class="path2"></span>
-                    <span class="path3"></span>
-                    <span class="path4"></span>
-                  </span>
-                </el-col>
-              </el-row>
-            </div>
-            <div
-              slot="footer"
-              class="dialog-footer"
-            >
-              <el-button @click="innerVisible = false">取 消</el-button>
-              <el-button
-                type="primary"
-                @click="innerVisible = false;
-                menuIconIndex = menuIconInnerIndex
-                 $nextTick(()=>{form.icon = menuIconIndex})
-                 "
-              >确定</el-button>
-            </div>
-          </el-dialog>
-          <el-form
-            ref="form"
-            :rules="ruleForm"
-            :model="form"
-            label-width="100px"
-            label-position="right"
-          >
-            <el-form-item
-              label="上级菜单："
-              v-if="form.pName"
-              prop="pName"
-            >
-              <el-input
-                v-model="form.pName"
-                disabled
-                autocomplete="off"
-              ></el-input>
-            </el-form-item>
-            <el-form-item
-              :label="'所属分组：'"
-              v-if="getTitle !=='编辑表单' && curLevel != 1 ||(getTitle =='新增分组'&&curLevel == 1) ||(getTitle =='新增表单'&&curLevel == 1)"
-              prop="group"
-              :rules="type=='addForm'?{required: true, message: '所属分组不能为空', trigger: 'blur'}:null"
-            >
-              <el-cascader
-                :disabled="getTitle =='编辑分组' && curLevel != 1"
-                ref="cascader"
-                v-model="form.group"
-                :options="type!=='addForm'?menuOneLevel:menuTwoLevel"
-                :props="cascaderProps"
-                clearable
-                @change="handleChange"
-              ></el-cascader>
-            </el-form-item>
-            <el-form-item
-              :label="getTitle =='新增表单' || getTitle =='编辑表单'? '表单名称：':'分组名称：'"
-              prop="name"
-            >
-              <el-input
-                v-model="form.name"
-                maxlength
-                autocomplete="off"
-              ></el-input>
-            </el-form-item>
-            <el-form-item
-              v-if="isShowIconItem"
-              :label="'图标：'"
-              prop="icon"
-            >
-              <span
-                v-if="menuIconIndex==0"
-                :class="['iconMenu']"
-                style="background-color:#ccc;color:#fff"
-                @click="innerVisible=true"
-              >
-                ICON
-              </span>
-              <span
-                :class="['icon-menu-'+menuIconIndex,'iconMenu']"
-                @click="innerVisible=true;$nextTick(()=>{form.icon = menuIconIndex})
-                 "
-              >
-                <span class="path1"></span>
-                <span class="path2"></span>
-                <span class="path3"></span>
-                <span class="path4"></span>
-              </span>
-            </el-form-item>
-          </el-form>
-          <div
-            slot="footer"
-            class="dialog-footer"
-          >
-            <el-button @click="dialogFormVisible = false;form.group=''">取 消</el-button>
-            <el-button
-              type="primary"
-              @click="operation"
-            >确 定</el-button>
-          </div>
-        </el-dialog>
-      </div>
-
-    </el-tab-pane>
-    <el-tab-pane label="组件">
-      <span slot="label">
-        <!-- <span class="span-box"> -->
-        <i class="el-icon-set-up span-box-icon"></i>
-        组件
-        <!-- </span> -->
-      </span>
-      <app-main-left class="app-main-left" />
-    </el-tab-pane>
-
-  </el-tabs>
-
-</template>
-<script>
-import _ from "lodash-es";
-import formAttrDefault from "@/store/formBuilder/formAttrDefault";
-import dd from "@/assets/icon_warning.png";
-import AppMainLeft from "@/formBuilder/components/app-main/components/main-left";
-import AppMainRight from "@/formBuilder/components/app-main/components/main-right/index";
-import configList from "@/formBuilder/config";
-import apiAuth from "@/api/apiAuth";
-import * as api from "@/api/apiFormBuilder/menu";
-import { mapMutations } from "vuex";
-import { getMenuRouter } from "@/formBuilder/menuConfig";
-export default {
-  components: {
-    AppMainLeft
-  },
-  data() {
-    return {
-      curType: 1,
-      curOperateStatus: 0,
-      curLevel: 0,
-      menuIconIndex: 0,
-      menuIconInnerIndex: 0,
-      innerVisible: false,
-      menuTwoLevelRes: [],
-      menuOneLevelRes: [],
-      cascaderProps: {
-        value: "id",
-        label: "name",
-        checkStrictly: true,
-        children: "subMenu"
-      },
-      currentMIndex: null,
-      currentMkeyPath: null,
-      dialogFormVisible: false,
-      type: "add",
-      form: {
-        id: "",
-        pName: "",
-        name: "",
-        oneName: "",
-        twoName: "",
-        thrName: "",
-        index: "",
-        icon: 1,
-        secIndex: "",
-        group: "",
-        thrIndex: "",
-        pid: "",
-        menuLevel: undefined
-      },
-      menu: [],
-      precutMenu: [],
-      step: 0,
-      oldMenu: {},
-      ruleForm: {
-        name: [
-          { required: true, message: "请输入菜单名称", trigger: "blur" },
-          { min: 1, max: 12, message: "长度在 1 到 12 个字符", trigger: "blur" }
-        ],
-
-        icon: [{ required: true, message: "请选择图标", trigger: "blur" }]
-      }
-    };
-  },
-  watch: {},
-  computed: {
-    getIcon() {
-      return function(icon) {
-        if (_.includes(icon, "http")) {
-          return { icon, isOss: true };
-        } else {
-          return { icon, isOss: false };
-        }
-      };
-    },
-    isShowIconItem: function() {
-      if (this.type == "add") {
-        if (
-          (this.curOperateStatus == 1 && this.curLevel == 2) ||
-          this.form.group == "" ||
-          this.curLevel == 0
-        ) {
-          return true;
-        }
-      }
-      if (this.type == "addForm") {
-        // if (this.curOperateStatus == 1) {
-        return true;
-        // }
-      }
-      if (this.type == "edit") {
-        if (
-          (this.curOperateStatus == 1 && this.curLevel == 2) ||
-          (this.curOperateStatus == 1 && this.curLevel == 1) ||
-          this.curType == 0
-        ) {
-          return true;
-        }
-      }
-      return false;
-    },
-    companyNo: function() {
-      return this.$store.state.user.cno;
-    },
-    menuOneLevel: function() {
-      const arr = _.cloneDeep(this.menu);
-      arr.forEach((e, i) => {
-        e.curLevel = 1;
-        if (e.type == 0) {
-          e.subMenu.splice(i, 1);
-        }
-        delete e.subMenu;
-      });
-      return arr;
-    },
-    menuTwoLevel: function() {
-      const arr = _.cloneDeep(this.menu);
-
-      for (let index = 0; index < arr.length; index++) {
-        const e = arr[index];
-        e.curLevel = 1;
-        if (e.type == 0) {
-          e.subMenu.splice(index, 1);
-          index--;
-        }
-        for (let index2 = 0; index2 < e.subMenu.length; index2++) {
-          const e2 = e.subMenu[index2];
-          e2.curLevel = 2;
-          if (e2.type == 0) {
-            e.subMenu.splice(index2, 1);
-            index2--;
-          }
-          delete e2.subMenu;
-        }
-      }
-      //   arr.forEach((e, i) => {
-      //     e.curLevel = 1;
-      //     if (e.type == 0) {
-      //       e.subMenu.splice(i, 1);
-      //       i--;
-      //     }
-      //     e.subMenu.forEach((e2, i2) => {
-      //       e2.curLevel = 2;
-      //       if (e2.type == 0) {
-      //         e.subMenu.splice(i2, 1);
-      //         i2--;
-      //       }
-      //       delete e2.subMenu;
-      //     });
-      //   });
-      //   arr.forEach((e, i) => {
-      //     const iterator = data => {
-      //       if (e.type == 0) {
-      //         data.subMenu.splice(i, 1);
-      //       }
-      //       if (data.subMenu && data.subMenu.length > 0) {
-      //         data.subMenu.forEach((item, i2) => {
-      //           if (item.type == 0) {
-      //             data.subMenu.splice(i, 1);
-      //           }
-      //           if (item.subMenu && item.subMenu.length > 0) {
-      //             iterator(item);
-      //           } else {
-      //             delete item.subMenu;
-      //           }
-      //         });
-      //       } else {
-      //         delete data.subMenu;
-      //       }
-      //     };
-      //     iterator(e);
-      //   });
-      console.log("@@@@@@@@@@@@@@@@@");
-      return arr;
-    },
-    menuClone: function() {
-      const arr = _.cloneDeep(this.menu);
-      arr.forEach((e, i) => {
-        e.curLevel = 1;
-        e.subMenu.forEach((e2, i2) => {
-          e2.curLevel = 2;
-          e.subMenu.forEach((e3, i3) => {
-            e3.curLevel = 3;
-          });
-        });
-      });
-      return arr;
-    },
-    getTitle: function() {
-      if (this.type == "add") {
-        return "新增分组";
-      } else if (this.type == "addForm") {
-        return "新增表单";
-      } else if (this.type == "edit" && this.curType == 0) {
-        return "编辑表单";
-      } else if (this.type == "edit" && this.curType == 1) {
-        return "编辑分组";
-      }
-      return this.$store.state.user.cno;
-    },
-    menuId: function() {
-      return this.$store.state.formBuilder.menuId;
-    }
-  },
-  methods: {
-    ...mapMutations([
-      "updateFormBuilder",
-      "updateList",
-      "updateFormAttr",
-      "clearForm",
-      "updateSelectIndex"
-    ]),
-
-    handleChange(res) {
-      const vm = this;
-      this.curOperateStatus =
-        this.$refs.cascader.getCheckedNodes()[0].data.operateStatus;
-      this.curLevel = this.$refs.cascader.getCheckedNodes()[0].data.curLevel;
-      this.form.menuLevel =
-        this.$refs.cascader.getCheckedNodes()[0].data.menuLevel;
-      this.form.pid = this.$refs.cascader.getCheckedNodes()[0].data.pid;
-      this.form.id = this.$refs.cascader.getCheckedNodes()[0].data.id;
-      this.form.index = _.findIndex(
-        this.menu,
-        this.$refs.cascader.getCheckedNodes()[0].data
-      );
-      // this.form.oneName = this.menu[index].name;
-      //  this.form.twoName = this.menu[index]?.subMenu[secIndex]?.name;
-      //  this.form.thrName =
-      //    this.menu[index]?.subMenu[secIndex]?.subMenu[thrIndex]?.name;
-    },
-    handleClick(res) {
-      const vm = this;
-      if (res.paneName == 1) {
-        vm.$parent.$refs.MainRight.$refs.FormItemTabs.$children[0].$refs.tabs[0].click();
-      }
-    },
-    handleOpen(key, keyPath) {
-      this.currentMIndex = key;
-      this.currentMkeyPath = keyPath;
-      console.log(key, keyPath);
-    },
-    handleSelect(key, keyPath) {
-      let oneIndex, twoIndex, thrIndex;
-      const arr = [];
-      keyPath.forEach(e => {
-        arr.push(e.split("-")[e.split("-").length - 1]);
-      });
-
-      arr.forEach((e, i) => {
-        if (i == 0) {
-          oneIndex = _.findIndex(this.menu, function(r) {
-            return r.id == e;
-          });
-        }
-        if (i == 1) {
-          twoIndex = _.findIndex(this.menu[oneIndex].subMenu, function(r) {
-            return r.id == e;
-          });
-        }
-        if (i == 2) {
-          thrIndex = _.findIndex(
-            this.menu[oneIndex].subMenu[twoIndex].subMenu,
-            function(r) {
-              return r.id == e;
-            }
-          );
-        }
-      });
-      this.form.oneIndex = oneIndex;
-      this.form.twoIndex = twoIndex;
-      this.form.thrIndex = thrIndex;
-      if (thrIndex != -1 && thrIndex != undefined) {
-        this.form.title = `${this.menu[oneIndex].name}/${this.menu[oneIndex].subMenu[twoIndex].name}/${this.menu[oneIndex].subMenu[twoIndex].subMenu[thrIndex].name}`;
-      } else if (twoIndex != -1 && twoIndex != undefined) {
-        this.form.title = `${this.menu[oneIndex].name}/${this.menu[oneIndex].subMenu[twoIndex].name}`;
-      } else if (oneIndex != -1 && oneIndex != undefined) {
-        this.form.title = `${this.menu[oneIndex].name}`;
-      }
-    },
-
-    handleClose(key, keyPath) {
-      this.currentMIndex = key;
-      this.currentMkeyPath = keyPath;
-      console.log(key, keyPath);
-    },
-    // 获取自定义菜单
-    async getConfigList() {
-      const vm = this;
-      const params = { companyNo: this.companyNo };
-      //   const data2 = await api.gitMenuConfig(params);
-      const { data } = await api.gitMenuConfig(params);
-      if (data.state == "ok") {
-        const menuList = _.sortBy(data.data, function(item) {
-          return item.sort;
-        });
-
-        menuList.forEach(async(item, i) => {
-          if (
-            i == 0 &&
-            item.subMenu.length > 0 &&
-            item.subMenu[0].subMenu.length > 0
-          ) {
-            item.open = true;
-            await vm.getFormDes(
-              item.subMenu[0].subMenu[0].id,
-              item.subMenu[0].subMenu[0].name,
-              "blank",
-              item.subMenu[0].subMenu[0].pid,
-              "frist"
-            );
-          } else {
-            item.open = false;
-          }
-          if (item.subMenu.length > 0) {
-            item.subMenu = _.sortBy(item.subMenu, function(secItem) {
-              return secItem.sort;
-            });
-          }
-          item.subMenu.forEach((e, i) => {
-            e["open"] = false;
-          });
-        });
-
-        this.menu = menuList;
-        console.log("我获取了");
-        this.$store.commit("SET_MENULIST", this.menu);
-        // this.changeOpen(0)
-      }
-      //  ;
-    },
-    editMenuName(index, secIndex, thrIndex) {
-      this.type = "edit";
-      this.form.index = index;
-      this.form.secIndex = secIndex;
-      this.form.thrIndex = thrIndex;
-      this.menuIconIndex = this.form.menuIconIndex = thrIndex
-        ? this.menu[index].subMenu[secIndex].subMenu[thrIndex].icon
-        : secIndex
-          ? this.menu[index].subMenu[secIndex].icon
-          : this.menu[index].icon;
-      this.form.icon = thrIndex
-        ? this.menu[index].subMenu[secIndex].subMenu[thrIndex].icon
-        : secIndex
-          ? this.menu[index].subMenu[secIndex].icon
-          : this.menu[index].icon;
-      this.form.pName = thrIndex ? this.menu[index].subMenu[secIndex].name : "";
-      this.form.group = secIndex ? this.menu[index].subMenu[secIndex].pid : "";
-      this.form.name = thrIndex
-        ? this.menu[index].subMenu[secIndex].subMenu[thrIndex].name
-        : secIndex
-          ? this.menu[index].subMenu[secIndex].name
-          : this.menu[index].name;
-      this.dialogFormVisible = true;
-      this.curOperateStatus = thrIndex
-        ? this.menu[index].subMenu[secIndex].subMenu[thrIndex].operateStatus
-        : secIndex
-          ? this.menu[index].subMenu[secIndex].operateStatus
-          : this.menu[index].operateStatus;
-      this.curLevel = thrIndex
-        ? this.menuClone[index].subMenu[secIndex].subMenu[thrIndex].curLevel
-        : secIndex
-          ? this.menuClone[index].subMenu[secIndex].curLevel
-          : this.menuClone[index].curLevel;
-      this.curType = thrIndex
-        ? this.menu[index].subMenu[secIndex].subMenu[thrIndex].type
-        : secIndex
-          ? this.menu[index].subMenu[secIndex].type
-          : this.menu[index].type;
-
-      //    this.$store.commit("SET_MENULIST", this.menu);
-
-      this.$store.commit("SET_MENULIST", this.menu);
-    },
-    addMenu(index) {
-      this.type = "add";
-      //   if (indexPath.length == 1) {
-      //     // 新增2级菜单
-      //   }
-      this.form.index = index != undefined ? index : "";
-      this.form.pName = index != undefined ? this.menu[index].name : "";
-      this.form.name = "";
-      this.form.group = "";
-      this.form.icon = 1;
-      this.menuIconIndex = 1;
-      this.menuIconInnerIndex = 1;
-      this.form.pid = "";
-      this.dialogFormVisible = true;
-
-      this.$store.commit("SET_MENULIST", this.menu);
-      this.$refs.form.clearValidate();
-    },
-    addForm(index) {
-      this.type = "addForm";
-      this.form.pid = "";
-      this.form.name = "";
-      this.form.group = "";
-      this.form.pName = "";
-      this.form.icon = 1;
-      this.menuIconIndex = 1;
-      this.menuIconInnerIndex = 1;
-      this.dialogFormVisible = true;
-      this.getConfigList();
-      this.$refs.form.clearValidate();
-    },
-    async changeMenu(index, secIndex) {
-      let params = {};
-      let item = null;
-      if (secIndex == undefined) {
-        params = { id: this.menu[index].id };
-        item = this.menu[index];
-      } else {
-        params = { id: this.menu[index]["subMenu"][secIndex].id };
-        item = this.menu[index]["subMenu"][secIndex];
-      }
-      const tip = item.isShow == 1 ? "隐藏菜单" : "开启菜单";
-      this.$confirm(`确定要${tip}吗？`, `${tip}`, {
-        confirmButtonText: "确定",
-        cancelButtonText: "取消",
-        type: "warning"
-      })
-        .then(async() => {
-          const { data } = await api.changeShow(params);
-          if (data.state == "ok") {
-            item.isShow = item.isShow == 1 ? 0 : 1;
-            this.$message.success(data.msg ? data.msg : "更改成功");
-          } else {
-            this.$message.error(data.msg ? data.msg : "修改失败，请重试");
-          }
-        })
-        .catch(() => {});
-    },
-    async deleteMenu(index, secIndex, thrIndex) {
-      let params = {};
-      const item = null;
-      const vm = this;
-      if (secIndex == undefined) {
-        params = { id: vm.menu[index].id };
-      } else if (thrIndex == undefined) {
-        params = { id: vm.menu[index]["subMenu"][secIndex].id };
-      } else {
-        debugger;
-        params = {
-          id: vm.menu[index]["subMenu"][secIndex]["subMenu"][thrIndex].id
-        };
-      }
-      const h = vm.$createElement;
-      vm.$msgbox({
-        title: "删除提示",
-        message: h(
-          "div",
-          {
-            class: {
-              msgboxDiv: true
-            }
-          },
-          [
-            h(
-              "img",
-              {
-                domProps: {
-                  src: dd
-                }
-              },
-              "VNode"
-            ),
-            //   h("img", { "src": "../../../assets/icon_warning.png" }, "VNode"),
-            h(
-              "div",
-              null,
-              "删除表单后，将删除表单控件及业务数据，是否确认删除？"
-            )
-          ]
-        ),
-        showCancelButton: true,
-        closeOnClickModal: false,
-        closeOnPressEscape: false,
-        confirmButtonText: "确定",
-        cancelButtonText: "取消",
-        cancelButtonClass: "cancelBtn1",
-        confirmButtonClass: "confirmBtn1"
-      }).then(async() => {
-        const { data } = await api.deleteMenu(params);
-        if (data.state == "ok") {
-          vm.getConfigList();
-        } else {
-          this.$message.error(data.msg ? data.msg : "删除失败，请重试");
-        }
-      });
-
-      //   this.$confirm(
-      //     "删除表单后，将删除表单控件及业务数据，是否确认删除？",
-      //     "删除提示",
-      //     {
-      //       confirmButtonText: "确定",
-      //       cancelButtonText: "取消",
-      //       type: "warning"
-      //       // center: true
-      //     }
-      //   )
-      //     .then(async() => {
-      //       const { data } = await api.deleteMenu(params);
-      //       if (data.state == "ok") {
-      //         if (secIndex == undefined) {
-      //           this.menu.splice(index, 1);
-      //           this.$store.commit("SET_MENULIST", this.menu);
-      //         } else {
-      //           this.menu[index]["subMenu"].splice(secIndex, 1);
-      //           this.$store.commit("SET_MENULIST", this.menu);
-      //         }
-      //       } else {
-      //         this.$message.error(data.msg ? data.msg : "删除失败，请重试");
-      //       }
-      //     })
-      //     .catch(() => {});
-    },
-    handleCommand(val) {
-      const option = val.split("-");
-      switch (option[0]) {
-        case "add":
-          this.addMenu(option[1]);
-          break;
-        case "edit":
-          this.editMenuName(option[1], option[2], option[3]);
-          break;
-        case "delete":
-          this.deleteMenu(option[1], option[2], option[3]);
-          break;
-        case "change":
-          this.changeMenu(option[1], option[2]);
-          break;
-        default:
-          break;
-      }
-    },
-    resetForm() {
-      this.form = {
-        pName: "",
-        name: "",
-        index: "",
-        secIndex: ""
-      };
-    },
-    changeOpen(index, type, item) {
-      const vm = this;
-      debugger;
-      this.currentMIndex = index;
-      //   if (type) {
-      //     this.precutMenu[index].open = !this.precutMenu[index].open;
-      //   } else
-      if (type == 3) {
-      } else {
-        this.menu[index].open = !this.menu[index].open;
-        this.menu.map((e, i) => {
-          e.active = false;
-        });
-        this.menu[index].active = true;
-        // this.$store.state.formBuilder.currentMenu = this.menu[index];
-      }
-    },
-    // 添加分组
-    addMenuFunc() {
-      const vm = this;
-      vm.$refs.form.validate(async valid => {
-        if (valid) {
-          const params = {
-            name: vm.form.name,
-            companyNo: vm.companyNo,
-            icon: vm.form.icon.toString(),
-            pid: vm.form.pid ? vm.form.pid : vm.form.id
-          };
-          const { data } = await api.addMenu(params);
-          if (data.state == "ok") {
-            const sort = vm.menu.length;
-            vm.getConfigList();
-            // vm.menu[vm.form.index]["subMenu"].push({
-            //   subMenu: [],
-            //   name: vm.form.name,
-            //   id: data.id,
-            //   sort: sort,
-            //   isShow: 1,
-            //   type: 1,
-            //   operateStatus: 1,
-            //   open: false
-            // });
-            vm.dialogFormVisible = false;
-            vm.form.pid = "";
-            vm.form.icon = 1;
-            vm.$store.commit("SET_MENULIST", vm.menu);
-            vm.resetForm();
-          } else {
-            vm.$message.error(data.msg ? data.msg : "添加菜单失败");
-          }
-        }
-      });
-    },
-    addFormFunc() {
-      const vm = this;
-      vm.$refs.form.validate(async valid => {
-        if (valid) {
-          const params = {
-            pid: vm.form.id,
-            name: vm.form.name,
-            companyNo: vm.companyNo,
-            icon: vm.form.icon.toString()
-          };
-          const { data } = await api.addForm(params);
-          if (data.state == "ok") {
-            vm.$message.success("添加表单成功");
-            vm.getConfigList();
-            vm.dialogFormVisible = false;
-            vm.form.icon = 1;
-            vm.resetForm();
-          } else {
-            vm.$message.error(data.msg ? data.msg : "添加菜单失败");
-          }
-        }
-      });
-    },
-    // 编辑菜单名称
-    async editMenuFunc() {
-      const vm = this;
-      vm.$refs.form.validate(async valid => {
-        if (valid) {
-          let params = {};
-          let item = null;
-          if (vm.form.thrIndex) {
-            params = {
-              id: vm.menu[vm.form.index].subMenu[vm.form.secIndex].subMenu[
-                vm.form.thrIndex
-              ].id,
-              name: vm.form.name,
-              icon: vm.form.icon.toString()
-            };
-            item =
-              vm.menu[vm.form.index].subMenu[vm.form.secIndex].subMenu[
-                vm.form.thrIndex
-              ];
-          } else if (!vm.form.thrIndex && vm.form.secIndex) {
-            params = {
-              id: vm.menu[vm.form.index].subMenu[vm.form.secIndex].id,
-              name: vm.form.name,
-              icon: vm.form.icon.toString()
-            };
-            item = vm.menu[vm.form.index].subMenu[vm.form.secIndex];
-          } else {
-            params = {
-              id: vm.menu[vm.form.index].id,
-              name: vm.form.name,
-              icon: vm.form.icon.toString()
-            };
-            item = vm.menu[vm.form.index];
-            vm.$store.state.menuList = vm.menu;
-          }
-          //   debugger;
-          const { data } = await api.changeMenuName(params);
-          if (data.state == "ok") {
-            item.name = vm.form.name;
-            this.updateFormBuilder({
-              name: vm.form.name,
-              menuId: this.$store.state.formBuilder.menuId,
-              formDesId: this.$store.state.formBuilder.formDesId,
-              type: this.$store.state.formBuilder.type,
-              currentMenu: this.$store.state.formBuilder.currentMenu
-            });
-            this.getConfigList();
-            vm.dialogFormVisible = false;
-            vm.resetForm();
-          } else {
-            vm.$message.error(data.msg ? data.msg : "修改名称失败，请重试");
-          }
-        }
-      });
-    },
-    // 操作按钮
-    async operation() {
-      if (this.type == "add") {
-        this.addMenuFunc();
-      } else if (this.type == "addForm") {
-        this.addFormFunc();
-      } else {
-        this.editMenuFunc();
-      }
-    },
-    // 获取表单json数据
-    async getFormDes(id, name, type, pid, flg) {
-      const vm = this;
-      const h = this.$createElement;
-      const isSingleArr = [];
-      let isSingle = false;
-      vm.menu.forEach((e, i) => {
-        e.subMenu.forEach(e2 => {
-          isSingleArr.push(e2);
-        });
-      });
-      if (isSingleArr.length <= 1) {
-        isSingle = true;
-      } else {
-        isSingle = false;
-      }
-      if (!flg && !isSingle) {
-        vm.$msgbox({
-          title: "保存提示",
-          message: h(
-            "div",
-            {
-              class: {
-                msgboxDiv: true
-              }
-            },
-            [
-              h(
-                "img",
-                {
-                  domProps: {
-                    src: dd
-                  }
-                },
-                "VNode"
-              ),
-              //   h("img", { "src": "../../../assets/icon_warning.png" }, "VNode"),
-              h("div", null, "表单设计修改但未保存，是否保存后继续？")
-            ]
-          ),
-          confirmButtonText: "保存并继续",
-          cancelButtonText: "不保存",
-          closeOnClickModal: false,
-          closeOnPressEscape: false,
-          showCancelButton: true,
-          cancelButtonClass: "cancelBtn",
-          confirmButtonClass: "confirmBtn"
-        })
-          .then(async() => {
-            const res =
-              await vm.$parent.$refs.AppMain.$refs.mainHeader.saveDate();
-            vm.$store.state.formBuilder.currentMenu = id;
-            vm.$nextTick(() => {
-              vm.menu.map((e, i) => {
-                e.active = false;
-                if (e.subMenu) {
-                  e.subMenu.map((e2, i) => {
-                    if (e2.id == id) {
-                      e2.active = true;
-                    }
-                  });
-                }
-              });
-            });
-
-            const views = getMenuRouter(id);
-            if ((type == "precut" && views == "") || vm.menuId == id) return;
-            //   this.updateFormBuilder({
-            //     menuId: id,
-            //     name: name,
-            //     formDesId: "",
-            //     type: type,
-            //     currentMenu: id
-            //   });
-            const { data } = await api.queryFormByMenu({
-              menuId: id,
-              companyNo: vm.companyNo
-            });
-            let pName = {};
-            if (vm.$store.state.menuList) {
-              pName = _.find(vm.$store.state.menuList, function(o) {
-                return o.id == pid;
-              })?.name;
-            }
-
-            if (data.state == "ok" && JSON.stringify(data.data) == "{}") {
-              vm.clearForm();
-              vm.updateFormAttr(_.cloneDeep(formAttrDefault));
-              vm.updateFormBuilder({
-                menuId: id,
-                name: vm.form.title,
-                formDesId: data.data.id,
-                type: type,
-                currentMenu: id
-              });
-            } else if (data.state == "ok" && data.data) {
-              const keys = Object.keys(formAttrDefault);
-              var formAttr = Object.assign(
-                _.cloneDeep(formAttrDefault),
-                _.pick(data.data.content.formAttr, keys)
-              );
-              formAttr = Object.assign(formAttr, data.data.content.formAttr);
-
-              vm.json2Form(data.data.content.formDesc, type);
-              vm.updateFormAttr(formAttr);
-
-              vm.updateFormBuilder({
-                menuId: id,
-                name: vm.form.title,
-                formDesId: data.data.id,
-                type: type,
-                currentMenu: id
-              });
-            } else {
-              vm.$message.error(data.msg ? data.msg : "获取信息失败");
-            }
-          })
-          .catch(async() => {
-            vm.$store.state.formBuilder.currentMenu = id;
-            vm.$nextTick(() => {
-              vm.menu.map((e, i) => {
-                e.active = false;
-                if (e.subMenu) {
-                  e.subMenu.map((e2, i) => {
-                    if (e2.id == id) {
-                      e2.active = true;
-                    }
-                  });
-                }
-              });
-            });
-
-            const views = getMenuRouter(id);
-            if ((type == "precut" && views == "") || vm.menuId == id) return;
-            //   this.updateFormBuilder({
-            //     menuId: id,
-            //     name: name,
-            //     formDesId: "",
-            //     type: type,
-            //     currentMenu: id
-            //   });
-            const { data } = await api.queryFormByMenu({
-              menuId: id,
-              companyNo: vm.companyNo
-            });
-            let pName = {};
-            if (vm.$store.state.menuList) {
-              pName = _.find(vm.$store.state.menuList, function(o) {
-                return o.id == pid;
-              })?.name;
-            }
-
-            if (data.state == "ok" && JSON.stringify(data.data) == "{}") {
-              vm.clearForm();
-              vm.updateFormAttr(_.cloneDeep(formAttrDefault));
-              vm.updateFormBuilder({
-                menuId: id,
-                name: vm.form.title,
-                formDesId: data.data.id,
-                type: type,
-                currentMenu: id
-              });
-            } else if (data.state == "ok" && data.data) {
-              const keys = Object.keys(formAttrDefault);
-              var formAttr = Object.assign(
-                _.cloneDeep(formAttrDefault),
-                _.pick(data.data.content.formAttr, keys)
-              );
-              formAttr = Object.assign(formAttr, data.data.content.formAttr);
-
-              vm.json2Form(data.data.content.formDesc, type);
-              vm.updateFormAttr(formAttr);
-
-              vm.updateFormBuilder({
-                menuId: id,
-                name: vm.form.title,
-                formDesId: data.data.id,
-                type: type,
-                currentMenu: id
-              });
-            } else {
-              vm.$message.error(data.msg ? data.msg : "获取信息失败");
-            }
-            vm.$message({
-              type: "info",
-              message: "已取消保存"
-            });
-          });
-      } else {
-        vm.$store.state.formBuilder.currentMenu = id;
-
-        vm.$nextTick(() => {
-          vm.menu.map((e, i) => {
-            e.active = false;
-            if (e.subMenu) {
-              e.subMenu.map((e2, i) => {
-                if (e2.id == id) {
-                  e2.active = true;
-                }
-              });
-            }
-          });
-        });
-
-        const views = getMenuRouter(id);
-        if ((type == "precut" && views == "") || vm.menuId == id) return;
-        //   this.updateFormBuilder({
-        //     menuId: id,
-        //     name: name,
-        //     formDesId: "",
-        //     type: type,
-        //     currentMenu: id
-        //   });
-        const { data } = await api.queryFormByMenu({
-          menuId: id,
-          companyNo: vm.companyNo
-        });
-        let pName = {};
-        if (vm.$store.state.menuList) {
-          pName = _.find(vm.$store.state.menuList, function(o) {
-            return o.id == pid;
-          })?.name;
-        }
-
-        if (data.state == "ok" && JSON.stringify(data.data) == "{}") {
-          vm.clearForm();
-          vm.updateFormAttr(_.cloneDeep(formAttrDefault));
-          debugger;
-          vm.updateFormBuilder({
-            menuId: id,
-            name: vm.form.title,
-            formDesId: data.data.id,
-            type: type,
-            currentMenu: id
-          });
-        } else if (data.state == "ok" && data.data) {
-          const keys = Object.keys(formAttrDefault);
-          var formAttr = Object.assign(
-            _.cloneDeep(formAttrDefault),
-            _.pick(data.data.content.formAttr, keys)
-          );
-          formAttr = Object.assign(formAttr, data.data.content.formAttr);
-
-          vm.json2Form(data.data.content.formDesc, type);
-          vm.updateFormAttr(formAttr);
-
-          vm.form.title = `${vm.menu[0].name}/${vm.menu[0].subMenu[0].name}/${vm.menu[0].subMenu[0].subMenu[0].name}`;
-          vm.updateFormBuilder({
-            menuId: id,
-            name: vm.form.title,
-            formDesId: data.data.id,
-            type: type,
-            currentMenu: id
-          });
-        } else {
-          vm.$message.error(data.msg ? data.msg : "获取信息失败");
-        }
-      }
-    },
-    json2Form(formDesc, type) {
-      // 清空原有list （待优化）
-      this.clearForm(); // 2.更新 formDesc（组件通用配置数据） // 3.处理 formDesc.attr（组件属性配置数据）
-      if (type == "blank") {
-        const list = Object.entries(formDesc).map(([key, val]) => {
-          const attrsDefaultData = configList[val.type]
-            ? _.cloneDeep(configList[val.type].attrsDefaultData)
-            : {};
-          const attrs = val.attrs
-            ? Object.assign(attrsDefaultData, val.attrs)
-            : attrsDefaultData;
-          return {
-            ...val,
-            attrs,
-            field: key
-          };
-        }); // 更新 list
-        this.updateList({ name: "default", newList: list });
-      } else {
-        for (const name in formDesc) {
-          const list = Object.entries(formDesc[name]).map(([key, val]) => {
-            const attrsDefaultData = configList[val.type]
-              ? _.cloneDeep(configList[val.type].attrsDefaultData)
-              : {};
-            const attrs = val.attrs
-              ? Object.assign(attrsDefaultData, val.attrs)
-              : attrsDefaultData;
-            return {
-              attrs: val.attrs || {},
-              field: key,
-              ...val
-            };
-          }); // 更新 list
-          this.updateList({ name: name, newList: list });
-        }
-      } // 更新 selectIndex
-      this.updateSelectIndex(0);
-    },
-    // 获取预制菜单
-    async getPrecutMenu() {
-      //   const { data } = await api.getPrecutMenu();
-      const { data } = await apiAuth.getMenus();
-      console.log(data);
-      if (data.state == "ok") {
-        const menuList = _.sortBy(data.data, function(item) {
-          return item.sort;
-        });
-        menuList.forEach(item => {
-          item.open = false;
-          item.icon = item.icon
-            ? require(`@/assets/center/menuIcon/${item.icon}.png`)
-            : "";
-          if (item.list.length > 0) {
-            item.subMenu = _.sortBy(item.list, function(secItem) {
-              return secItem.sort;
-            });
-          }
-        });
-        this.precutMenu = menuList;
-      }
-    }
-  },
-  mounted() {
-    const _this = this;
-    // this.getPrecutMenu();
-    this.getConfigList();
-    this.$dragging.$on("dragged", ({ value }) => {
-      console.log(value);
-      if (this.step == 0) {
-        this.oldMenu = this.menu;
-      }
-      this.step++;
-    });
-    this.$dragging.$on("dragend", async val => {
-      if (this.step < 1) return;
-      console.log(val);
-      console.log(_this.menu, "end");
-      const group = val.group.split("-");
-      let params = {};
-      if (group[0] == "item") {
-        const id = this.menu.map(item => item.id);
-        params = { ids: id };
-        console.log(id);
-      } else {
-        const index = group[1];
-        const id = this.menu[index].subMenu.map(item => item.id);
-        params = { ids: id };
-      }
-      const { data } = await api.sortMenu(params);
-      if (data.state == "ok") {
-        this.step = 0;
-      } else {
-        this.menu = this.oldMenu;
-        this.$message.error(data.msg ? data.msg : "保存失败");
-      }
-    });
-  }
-};
-</script>
-
-<style lang="scss" scoped>
-[class^="icon-"],
-[class*=" icon-"] {
-  /* use !important to prevent issues with browser extensions that change fonts */
-  font-size: 40px;
-}
-.menuIconBox {
-  margin-bottom: 5px;
-}
-.iconMenuBox {
-  text-align: center;
-  width: 56px;
-  height: 19px;
-  font-size: 14px;
-  font-family: "Microsoft YaHei";
-  color: #333333;
-  line-height: 19px;
-}
-.iconMenu {
-  text-align: center;
-  display: inline-block;
-  width: 40px;
-  margin-right: 12px;
-  border-radius: 5px;
-}
-.el-dialog__body {
-  .iconMenu {
-    text-align: center;
-    display: inline-block;
-    width: 40px;
-    margin-right: 12px;
-    border-radius: 5px;
-    padding: 5px;
-    &:hover {
-      background-color: rgb(233, 233, 233);
-    }
-    &:active {
-      background-color: rgb(210, 234, 249);
-    }
-  }
-}
-.bgc {
-  background-color: rgb(210, 234, 249);
-}
-
-/deep/ .el-cascader {
-  width: 100%;
-}
-.msgboxDiv {
-  text-align: center !important;
-  div {
-    margin-top: 20px;
-    margin-bottom: 10px;
-  }
-}
-.msgboxDiv .el-message-box__btns {
-  text-align: center !important;
-  margin-bottom: 20px;
-}
-.msgboxDiv .el-message-box__btns button:nth-child(2) {
-  margin-left: 20px !important;
-}
-.el-message-box__btns {
-  text-align: center !important;
-}
-.dialog-footer {
-  text-align: center;
-}
-.el-icon-setting {
-  color: #ccc !important;
-  font-size: 18px !important;
-}
-.el-icon-setting:hover {
-  color: #0286df !important;
-}
-.addgroup {
-  background: #0286df;
-  border-radius: 4px;
-  padding: 10px 13px;
-}
-.addform {
-  // background: #0286DF;
-  border-radius: 4px;
-  padding: 10px 13px;
-  background: #fff;
-  border-color: #409eff;
-  color: #409eff;
-}
-/deep/ .el-tabs__nav-scroll {
-  // padding: 5px;
-}
-/deep/ .el-tabs__header {
-  margin: 0 0 5px !important;
-}
-/deep/ .el-tabs__nav {
-  width: 100% !important;
-  padding-top: 5px !important;
-  display: flex;
-  justify-content: center;
-  align-items: center;
-}
-/deep/ .el-tabs__nav .el-tabs__item {
-  //   height: 80px !important;
-  text-align: center;
-  width: 50% !important;
-  .span-box {
-    position: relative;
-    bottom: -10px;
-  }
-  span {
-    //   line-height: 20px;
-  }
-}
-//   border-bottom: 1px solid #ccc;
-.span-box {
-  text-align: center;
-  display: block;
-}
-.span-box-icon {
-  text-align: center;
-  font-size: 19px;
-  //   display: block;
-}
-.is-active {
-  background-color: #ecf5ff;
-  color: #0286df;
-}
-
-/deep/ .el-tabs__content {
-  //   height: 100% !important;
-  //   overflow: auto !important;
-}
-.el-tabs--left {
-  //   height: 100% !important;
-}
-.el-tab-pane {
-}
-.menu-list {
-  //   overflow: auto;
-  width: 100%;
-  background-color: #ffffff;
-
-  height: 100%;
-  .menu-config {
-    display: flex;
-    margin-bottom: 10px;
-    justify-content: space-between;
-    align-items: center;
-    // height: 32px;
-    overflow: hidden;
-    padding-top: 10px;
-    .config-title {
-      width: 100%;
-      display: flex;
-      justify-content: center;
-      align-items: center;
-      h4 {
-        font-size: 18px;
-        margin: 0;
-        display: inline-block;
-      }
-      i {
-        margin-left: 8px;
-        font-size: 18px;
-        cursor: pointer;
-        color: #666666;
-      }
-    }
-  }
-  .menu-item {
-    padding: 0 10px 0 20px;
-    position: relative;
-    display: flex;
-    justify-content: space-between;
-    align-items: center;
-    height: 56px;
-    color: #333;
-    line-height: 56px;
-    font-size: 16px;
-    cursor: pointer;
-    &:hover {
-      i {
-        display: inline-block;
-      }
-    }
-    i {
-      color: #909399;
-    }
-  }
-  .menu-item-name {
-    width: 155% !important;
-  }
-  .menu-item-child {
-    transition: 0.5s all ease;
-    height: 0;
-    overflow: hidden;
-    padding-left: 0;
-    margin: 0;
-    font-size: 14px;
-    color: #666;
-    li {
-      padding-left: 30px;
-      .menu-item-name {
-        font-size: 14px;
-        span {
-          max-width: 200px;
-        }
-      }
-      .menu-item-option {
-        width: 46px;
-      }
-    }
-    li.active {
-      background-color: #ecf5ff;
-      color: #0286df;
-    }
-  }
-  .menu-item-name {
-    display: flex;
-    align-items: center;
-    color: #303133;
-    img {
-      height: 16px;
-      width: 16px;
-      margin-right: 6px;
-    }
-    .no-img {
-      visibility: hidden;
-    }
-    span {
-      max-width: 180px;
-      overflow: hidden;
-      text-overflow: ellipsis;
-      white-space: nowrap;
-    }
-  }
-  .el-icon-arrow-down {
-    position: absolute;
-    right: 6px;
-    top: 10px;
-    transition: 0.5s all ease;
-    transform: rotate(0deg);
-    -ms-transform: rotate(0deg); /* IE 9 */
-    -webkit-transform: rotate(0deg); /* Safari and Chrome */
-  }
-  .menu-item-option {
-    width: 60px;
-    i {
-      margin-left: 3px;
-      font-size: 14px;
-      cursor: pointer;
-      color: #666666;
-    }
-    .el-icon-no-view {
-      height: 14px;
-      width: 14px;
-      background: url("../../../assets/login/close-eye.png") center center
-        no-repeat;
-      background-size: 100%;
-    }
-    .active {
-      color: #ccc;
-    }
-    .el-dropdown-link {
-      color: #0286df;
-      font-size: 12px;
-      i {
-        color: #0286df;
-        font-size: 12px;
-      }
-    }
-  }
-  .hover-col {
-    &:hover {
-      background-color: #ecf5ff;
-    }
-  }
-  .active {
-    background-color: #ecf5ff;
-  }
-  .is-open {
-    .el-icon-arrow-down {
-      transform: rotate(180deg);
-      -ms-transform: rotate(180deg); /* IE 9 */
-      -webkit-transform: rotate(180deg); /* Safari and Chrome */
-    }
-    .menu-item-child {
-      height: auto;
-    }
-  }
-}
-.el-menu-item {
-  display: flex;
-}
-.el-menu-item.is-active {
-  color: #303133 !important;
-}
-/deep/ .el-submenu__title {
-  display: flex !important;
-  align-items: center !important;
-  //   padding: 0 10px 0 10px !important;
-}
-.el-submenu__icon-arrow {
-  position: absolute !important;
-  top: 50% !important;
-  right: 8px !important;
-  margin-top: -7px !important;
-  -webkit-transition: -webkit-transform 0.3s !important;
-  transition: -webkit-transform 0.3s !important;
-  transition: transform 0.3s !important;
-  transition: transform 0.3s, -webkit-transform 0.3s !important;
-  font-size: 12px !important;
-}
-.menu-item-option {
-  span {
-    height: 50px;
-    display: inline-block;
-    i {
-      vertical-align: revert;
-    }
-  }
-}
-
-/deep/ .el-submenu .el-menu-item {
-  height: 50px;
-  line-height: 50px;
-  //   padding: 0 20px 0 60px !important;
-  padding: 0 20px 0 24px !important;
-  min-width: 200px;
-}
-</style>
+
+<template>
+  <el-tabs @tab-click="handleClick">
+    <el-tab-pane label="菜单">
+
+      <span slot="label">
+        <!-- <span class="span-box"> -->
+        <i class="el-icon-document span-box-icon"></i>
+        菜单
+        <!-- </span> -->
+      </span>
+      <div class="menu-list">
+        <div class="menu-config">
+          <div class="config-title">
+            <!-- <h4>菜单配置</h4><i
+          class="el-icon-circle-plus-outline"
+          @click.stop="addMenu()"
+        ></i> -->
+            <el-button
+              type="primary"
+              class='addgroup'
+              @click.stop="addMenu()"
+              style="margin-right:50px"
+            >新增分组</el-button>
+            <el-button
+              class='addform'
+              plain
+              @click.stop="addForm()"
+            >新增表单</el-button>
+          </div>
+          <div class="collapse"></div>
+        </div>
+        <!-- 配置菜单 -->
+
+        <el-menu
+          default-active="2"
+          class="el-menu-vertical-demo"
+          @select="handleSelect"
+          @open="handleOpen"
+          @close="handleClose"
+        >
+          <el-submenu
+            :index="item.id"
+            v-for="(item,ind) in menu"
+            :key="'pre'+ind"
+            :class="{'is-open': item.open}"
+          >
+            <template
+              slot="title"
+              class='mTitle'
+            >
+              <!-- <i class="el-icon-location"></i> -->
+              <img
+                :src="item.icon"
+                v-if="getIcon(item.icon).isOss"
+                alt=""
+                srcset=""
+                style="width: 40px;height:40px;margin-right:10px;"
+              >
+              <span
+                :class="['icon-menu-'+(item.icon),'iconMenu']"
+                v-else-if="!getIcon(item.icon).isOss"
+              >
+                <span class="path1"></span>
+                <span class="path2"></span>
+                <span class="path3"></span>
+                <span class="path4"></span>
+              </span>
+              <div
+                v-else
+                style="width: 79px;height:40px;margin-right:10px;"
+              ></div>
+              <span class="menu-item-name"><span>{{item.name}}</span></span>
+              <div
+                class="menu-item-option"
+                v-if="item.operateStatus"
+                @click.stop
+              >
+                <!-- <i class="el-icon-edit" @click.stop="editMenuName(index,senindex)"></i>
+            <i :class="[senitem.isShow == 1 ? 'el-icon-view' : 'el-icon-no-view']" @click.stop="changeMenu(index,senindex)"></i> -->
+                <el-dropdown
+                  trigger="click"
+                  @command="handleCommand"
+                >
+                  <span class="el-dropdown-link">
+                    <i class="el-icon-setting el-icon--right"></i>
+                  </span>
+                  <el-dropdown-menu slot="dropdown">
+                    <el-dropdown-item :command="`edit-${ind}`">编辑</el-dropdown-item>
+                    <!-- <el-dropdown-item :command="`change-${index}-${senindex}`">
+                      {{senitem.isShow == 1 ? '隐藏' : '启用'}}</el-dropdown-item>-->
+                    <el-dropdown-item :command="`delete-${ind}`">删除</el-dropdown-item>
+                  </el-dropdown-menu>
+                </el-dropdown>
+              </div>
+            </template>
+            <template v-for="(item1,ind1) in item.subMenu">
+              <el-submenu
+                :index="item.id+'-'+item1.id"
+                :key="item1.id"
+                v-if="item1.type"
+              >
+                <template slot="title"> <span class="menu-item-name"><span>{{item1.name}}</span></span>
+                  <div
+                    class="menu-item-option"
+                    v-if="item1.operateStatus"
+                    @click.stop
+                  >
+                    <!-- <i class="el-icon-edit" @click.stop="editMenuName(index,senindex)"></i>
+            <i :class="[senitem.isShow == 1 ? 'el-icon-view' : 'el-icon-no-view']" @click.stop="changeMenu(index,senindex)"></i> -->
+                    <el-dropdown
+                      trigger="click"
+                      @command="handleCommand"
+                    >
+                      <span class="el-dropdown-link">
+                        <i class="el-icon-setting el-icon--right"></i>
+                      </span>
+                      <el-dropdown-menu slot="dropdown">
+                        <el-dropdown-item :command="`edit-${ind}-${ind1}`">编辑</el-dropdown-item>
+                        <!-- <el-dropdown-item :command="`change-${index}-${senindex}`">
+                      {{senitem.isShow == 1 ? '隐藏' : '启用'}}</el-dropdown-item>-->
+                        <el-dropdown-item :command="`delete-${ind}-${ind1}`">删除</el-dropdown-item>
+                      </el-dropdown-menu>
+                    </el-dropdown>
+                  </div>
+                </template>
+                <el-menu-item
+                  :index="item1.id+'-'+item2.id"
+                  :key="item2.id"
+                  v-for="(item2,ind2) in item1.subMenu"
+                  @click="getFormDes(item2.id,item2.name,'blank',item2.pid)"
+                >
+                  <img
+                    :src="item2.icon"
+                    v-if="getIcon(item2.icon).isOss"
+                    alt=""
+                    srcset=""
+                    style="width: 40px;height:40px;margin-right:10px;"
+                  >
+                  <span
+                    :class="['icon-menu-'+(item2.icon),'iconMenu']"
+                    v-else-if="!getIcon(item2.icon).isOss"
+                  >
+                    <span class="path1"></span>
+                    <span class="path2"></span>
+                    <span class="path3"></span>
+                    <span class="path4"></span>
+                  </span>
+                  <div
+                    v-else
+                    style="width: 79px;height:40px;margin-right:10px;"
+                  ></div>
+                  <span class="menu-item-name"><span>{{item2.name}}</span></span>
+                  <div
+                    class="menu-item-option"
+                    @click.stop
+                  >
+                    <!-- <i class="el-icon-edit" @click.stop="editMenuName(index,senindex)"></i>
+            <i :class="[senitem.isShow == 1 ? 'el-icon-view' : 'el-icon-no-view']" @click.stop="changeMenu(index,senindex)"></i> -->
+                    <el-dropdown
+                      trigger="click"
+                      @command="handleCommand"
+                    >
+                      <span class="el-dropdown-link">
+                        <i class="el-icon-setting el-icon--right"></i>
+                      </span>
+                      <el-dropdown-menu slot="dropdown">
+                        <el-dropdown-item :command="`edit-${ind}-${ind1}-${ind2}`">编辑</el-dropdown-item>
+                        <el-dropdown-item :command="`delete-${ind}-${ind1}-${ind2}`">删除</el-dropdown-item>
+                      </el-dropdown-menu>
+                    </el-dropdown>
+                  </div>
+
+                </el-menu-item>
+              </el-submenu>
+
+              <el-menu-item
+                :index="item.id+'-'+item1.id"
+                :key="item1.id"
+                @click="getFormDes(item1.id,item1.name,'blank',item1.pid)"
+                v-else
+              >
+                <img
+                  :src="item1.icon"
+                  v-if="getIcon(item1.icon).isOss"
+                  alt=""
+                  srcset=""
+                  style="width: 40px;height:40px;margin-right:10px;"
+                >
+                <span
+                  :class="['icon-menu-'+(item1.icon),'iconMenu']"
+                  v-else-if="!getIcon(item1.icon).isOss"
+                >
+                  <span class="path1"></span>
+                  <span class="path2"></span>
+                  <span class="path3"></span>
+                  <span class="path4"></span>
+                </span>
+                <div
+                  v-else
+                  style="width: 79px;height:40px;margin-right:10px;"
+                ></div>
+                <span class="menu-item-name"><span>{{item1.name}}</span></span>
+                <div
+                  class="menu-item-option"
+                  @click.stop
+                >
+                  <!-- <i class="el-icon-edit" @click.stop="editMenuName(index,senindex)"></i>
+            <i :class="[senitem.isShow == 1 ? 'el-icon-view' : 'el-icon-no-view']" @click.stop="changeMenu(index,senindex)"></i> -->
+                  <el-dropdown
+                    trigger="click"
+                    @command="handleCommand"
+                  >
+                    <span class="el-dropdown-link">
+                      <i class="el-icon-setting el-icon--right"></i>
+                    </span>
+                    <el-dropdown-menu slot="dropdown">
+                      <el-dropdown-item :command="`edit-${ind}-${ind1}`">编辑</el-dropdown-item>
+                      <el-dropdown-item :command="`delete-${ind}-${ind1}`">删除</el-dropdown-item>
+                    </el-dropdown-menu>
+                  </el-dropdown>
+                </div>
+
+              </el-menu-item>
+            </template>
+
+          </el-submenu>
+
+        </el-menu>
+
+        <el-dialog
+          :title="getTitle"
+          :visible.sync="dialogFormVisible"
+          :close-on-click-modal="false"
+          width="500px"
+        >
+          <el-dialog
+            width="30%"
+            title="图标选择"
+            :visible.sync="innerVisible"
+            append-to-body
+          >
+            <div>
+
+              <el-row>
+                <el-col
+                  :span="3"
+                  v-for="(e,i) in 40"
+                  :key='i'
+                  class='menuIconBox'
+                >
+                  <span
+                    :class="['icon-menu-'+(i+1),'iconMenu',{ bgc: menuIconInnerIndex == (i+1) }]"
+                    @dblclick="innerVisible = false;
+                    menuIconIndex = menuIconInnerIndex = (i+1);
+                    $nextTick(()=>{form.icon = menuIconIndex})
+
+                     "
+                    @click="menuIconInnerIndex = (i+1)"
+                  >
+                    <span class="path1"></span>
+                    <span class="path2"></span>
+                    <span class="path3"></span>
+                    <span class="path4"></span>
+                  </span>
+                </el-col>
+              </el-row>
+            </div>
+            <div
+              slot="footer"
+              class="dialog-footer"
+            >
+              <el-button @click="innerVisible = false">取 消</el-button>
+              <el-button
+                type="primary"
+                @click="innerVisible = false;
+                menuIconIndex = menuIconInnerIndex
+                 $nextTick(()=>{form.icon = menuIconIndex})
+                 "
+              >确定</el-button>
+            </div>
+          </el-dialog>
+          <el-form
+            ref="form"
+            :rules="ruleForm"
+            :model="form"
+            label-width="100px"
+            label-position="right"
+          >
+            <el-form-item
+              label="上级菜单："
+              v-if="form.pName"
+              prop="pName"
+            >
+              <el-input
+                v-model="form.pName"
+                disabled
+                autocomplete="off"
+              ></el-input>
+            </el-form-item>
+            <el-form-item
+              :label="'所属分组：'"
+              v-if="getTitle !=='编辑表单' && curLevel != 1 ||(getTitle =='新增分组'&&curLevel == 1) ||(getTitle =='新增表单'&&curLevel == 1)"
+              prop="group"
+              :rules="type=='addForm'?{required: true, message: '所属分组不能为空', trigger: 'blur'}:null"
+            >
+              <el-cascader
+                :disabled="getTitle =='编辑分组' && curLevel != 1"
+                ref="cascader"
+                v-model="form.group"
+                :options="type!=='addForm'?menuOneLevel:menuTwoLevel"
+                :props="cascaderProps"
+                clearable
+                @change="handleChange"
+              ></el-cascader>
+            </el-form-item>
+            <el-form-item
+              :label="getTitle =='新增表单' || getTitle =='编辑表单'? '表单名称：':'分组名称：'"
+              prop="name"
+            >
+              <el-input
+                v-model="form.name"
+                maxlength
+                autocomplete="off"
+              ></el-input>
+            </el-form-item>
+            <el-form-item
+              v-if="isShowIconItem"
+              :label="'图标：'"
+              prop="icon"
+            >
+              <span
+                v-if="menuIconIndex==0"
+                :class="['iconMenu']"
+                style="background-color:#ccc;color:#fff"
+                @click="innerVisible=true"
+              >
+                ICON
+              </span>
+              <span
+                :class="['icon-menu-'+menuIconIndex,'iconMenu']"
+                @click="innerVisible=true;$nextTick(()=>{form.icon = menuIconIndex})
+                 "
+              >
+                <span class="path1"></span>
+                <span class="path2"></span>
+                <span class="path3"></span>
+                <span class="path4"></span>
+              </span>
+            </el-form-item>
+          </el-form>
+          <div
+            slot="footer"
+            class="dialog-footer"
+          >
+            <el-button @click="dialogFormVisible = false;form.group=''">取 消</el-button>
+            <el-button
+              type="primary"
+              @click="operation"
+            >确 定</el-button>
+          </div>
+        </el-dialog>
+      </div>
+
+    </el-tab-pane>
+    <el-tab-pane label="组件">
+      <span slot="label">
+        <!-- <span class="span-box"> -->
+        <i class="el-icon-set-up span-box-icon"></i>
+        组件
+        <!-- </span> -->
+      </span>
+      <app-main-left class="app-main-left" />
+    </el-tab-pane>
+
+  </el-tabs>
+
+</template>
+<script>
+import _ from "lodash-es";
+import formAttrDefault from "@/store/formBuilder/formAttrDefault";
+import dd from "@/assets/icon_warning.png";
+import AppMainLeft from "@/formBuilder/components/app-main/components/main-left";
+import AppMainRight from "@/formBuilder/components/app-main/components/main-right/index";
+import configList from "@/formBuilder/config";
+import apiAuth from "@/api/apiAuth";
+import * as api from "@/api/apiFormBuilder/menu";
+import { mapMutations } from "vuex";
+import { getMenuRouter } from "@/formBuilder/menuConfig";
+export default {
+  components: {
+    AppMainLeft
+  },
+  data() {
+    return {
+      curType: 1,
+      curOperateStatus: 0,
+      curLevel: 0,
+      menuIconIndex: 0,
+      menuIconInnerIndex: 0,
+      innerVisible: false,
+      menuTwoLevelRes: [],
+      menuOneLevelRes: [],
+      cascaderProps: {
+        value: "id",
+        label: "name",
+        checkStrictly: true,
+        children: "subMenu"
+      },
+      currentMIndex: null,
+      currentMkeyPath: null,
+      dialogFormVisible: false,
+      type: "add",
+      form: {
+        id: "",
+        pName: "",
+        name: "",
+        oneName: "",
+        twoName: "",
+        thrName: "",
+        index: "",
+        icon: 1,
+        secIndex: "",
+        group: "",
+        thrIndex: "",
+        pid: "",
+        menuLevel: undefined
+      },
+      menu: [],
+      precutMenu: [],
+      step: 0,
+      oldMenu: {},
+      ruleForm: {
+        name: [
+          { required: true, message: "请输入菜单名称", trigger: "blur" },
+          { min: 1, max: 12, message: "长度在 1 到 12 个字符", trigger: "blur" }
+        ],
+
+        icon: [{ required: true, message: "请选择图标", trigger: "blur" }]
+      }
+    };
+  },
+  watch: {},
+  computed: {
+    getIcon() {
+      return function(icon) {
+        if (_.includes(icon, "http")) {
+          return { icon, isOss: true };
+        } else {
+          return { icon, isOss: false };
+        }
+      };
+    },
+    isShowIconItem: function() {
+      if (this.type == "add") {
+        if (
+          (this.curOperateStatus == 1 && this.curLevel == 2) ||
+          this.form.group == "" ||
+          this.curLevel == 0
+        ) {
+          return true;
+        }
+      }
+      if (this.type == "addForm") {
+        // if (this.curOperateStatus == 1) {
+        return true;
+        // }
+      }
+      if (this.type == "edit") {
+        if (
+          (this.curOperateStatus == 1 && this.curLevel == 2) ||
+          (this.curOperateStatus == 1 && this.curLevel == 1) ||
+          this.curType == 0
+        ) {
+          return true;
+        }
+      }
+      return false;
+    },
+    companyNo: function() {
+      return this.$store.state.user.cno;
+    },
+    menuOneLevel: function() {
+      const arr = _.cloneDeep(this.menu);
+      arr.forEach((e, i) => {
+        e.curLevel = 1;
+        if (e.type == 0) {
+          e.subMenu.splice(i, 1);
+        }
+        delete e.subMenu;
+      });
+      return arr;
+    },
+    menuTwoLevel: function() {
+      const arr = _.cloneDeep(this.menu);
+
+      for (let index = 0; index < arr.length; index++) {
+        const e = arr[index];
+        e.curLevel = 1;
+        if (e.type == 0) {
+          e.subMenu.splice(index, 1);
+          index--;
+        }
+        for (let index2 = 0; index2 < e.subMenu.length; index2++) {
+          const e2 = e.subMenu[index2];
+          e2.curLevel = 2;
+          if (e2.type == 0) {
+            e.subMenu.splice(index2, 1);
+            index2--;
+          }
+          delete e2.subMenu;
+        }
+      }
+      //   arr.forEach((e, i) => {
+      //     e.curLevel = 1;
+      //     if (e.type == 0) {
+      //       e.subMenu.splice(i, 1);
+      //       i--;
+      //     }
+      //     e.subMenu.forEach((e2, i2) => {
+      //       e2.curLevel = 2;
+      //       if (e2.type == 0) {
+      //         e.subMenu.splice(i2, 1);
+      //         i2--;
+      //       }
+      //       delete e2.subMenu;
+      //     });
+      //   });
+      //   arr.forEach((e, i) => {
+      //     const iterator = data => {
+      //       if (e.type == 0) {
+      //         data.subMenu.splice(i, 1);
+      //       }
+      //       if (data.subMenu && data.subMenu.length > 0) {
+      //         data.subMenu.forEach((item, i2) => {
+      //           if (item.type == 0) {
+      //             data.subMenu.splice(i, 1);
+      //           }
+      //           if (item.subMenu && item.subMenu.length > 0) {
+      //             iterator(item);
+      //           } else {
+      //             delete item.subMenu;
+      //           }
+      //         });
+      //       } else {
+      //         delete data.subMenu;
+      //       }
+      //     };
+      //     iterator(e);
+      //   });
+      console.log("@@@@@@@@@@@@@@@@@");
+      return arr;
+    },
+    menuClone: function() {
+      const arr = _.cloneDeep(this.menu);
+      arr.forEach((e, i) => {
+        e.curLevel = 1;
+        e.subMenu.forEach((e2, i2) => {
+          e2.curLevel = 2;
+          e.subMenu.forEach((e3, i3) => {
+            e3.curLevel = 3;
+          });
+        });
+      });
+      return arr;
+    },
+    getTitle: function() {
+      if (this.type == "add") {
+        return "新增分组";
+      } else if (this.type == "addForm") {
+        return "新增表单";
+      } else if (this.type == "edit" && this.curType == 0) {
+        return "编辑表单";
+      } else if (this.type == "edit" && this.curType == 1) {
+        return "编辑分组";
+      }
+      return this.$store.state.user.cno;
+    },
+    menuId: function() {
+      return this.$store.state.formBuilder.menuId;
+    }
+  },
+  methods: {
+    ...mapMutations([
+      "updateFormBuilder",
+      "updateList",
+      "updateFormAttr",
+      "clearForm",
+      "updateSelectIndex"
+    ]),
+
+    handleChange(res) {
+      const vm = this;
+      this.curOperateStatus =
+        this.$refs.cascader.getCheckedNodes()[0].data.operateStatus;
+      this.curLevel = this.$refs.cascader.getCheckedNodes()[0].data.curLevel;
+      this.form.menuLevel =
+        this.$refs.cascader.getCheckedNodes()[0].data.menuLevel;
+      this.form.pid = this.$refs.cascader.getCheckedNodes()[0].data.pid;
+      this.form.id = this.$refs.cascader.getCheckedNodes()[0].data.id;
+      this.form.index = _.findIndex(
+        this.menu,
+        this.$refs.cascader.getCheckedNodes()[0].data
+      );
+      // this.form.oneName = this.menu[index].name;
+      //  this.form.twoName = this.menu[index]?.subMenu[secIndex]?.name;
+      //  this.form.thrName =
+      //    this.menu[index]?.subMenu[secIndex]?.subMenu[thrIndex]?.name;
+    },
+    handleClick(res) {
+      const vm = this;
+      if (res.paneName == 1) {
+        vm.$parent.$refs.MainRight.$refs.FormItemTabs.$children[0].$refs.tabs[0].click();
+      }
+    },
+    handleOpen(key, keyPath) {
+      this.currentMIndex = key;
+      this.currentMkeyPath = keyPath;
+      console.log(key, keyPath);
+    },
+    handleSelect(key, keyPath) {
+      let oneIndex, twoIndex, thrIndex;
+      const arr = [];
+      keyPath.forEach(e => {
+        arr.push(e.split("-")[e.split("-").length - 1]);
+      });
+
+      arr.forEach((e, i) => {
+        if (i == 0) {
+          oneIndex = _.findIndex(this.menu, function(r) {
+            return r.id == e;
+          });
+        }
+        if (i == 1) {
+          twoIndex = _.findIndex(this.menu[oneIndex].subMenu, function(r) {
+            return r.id == e;
+          });
+        }
+        if (i == 2) {
+          thrIndex = _.findIndex(
+            this.menu[oneIndex].subMenu[twoIndex].subMenu,
+            function(r) {
+              return r.id == e;
+            }
+          );
+        }
+      });
+      this.form.oneIndex = oneIndex;
+      this.form.twoIndex = twoIndex;
+      this.form.thrIndex = thrIndex;
+      if (thrIndex != -1 && thrIndex != undefined) {
+        this.form.title = `${this.menu[oneIndex].name}/${this.menu[oneIndex].subMenu[twoIndex].name}/${this.menu[oneIndex].subMenu[twoIndex].subMenu[thrIndex].name}`;
+      } else if (twoIndex != -1 && twoIndex != undefined) {
+        this.form.title = `${this.menu[oneIndex].name}/${this.menu[oneIndex].subMenu[twoIndex].name}`;
+      } else if (oneIndex != -1 && oneIndex != undefined) {
+        this.form.title = `${this.menu[oneIndex].name}`;
+      }
+    },
+
+    handleClose(key, keyPath) {
+      this.currentMIndex = key;
+      this.currentMkeyPath = keyPath;
+      console.log(key, keyPath);
+    },
+    // 获取自定义菜单
+    async getConfigList() {
+      const vm = this;
+      const params = { companyNo: this.companyNo };
+      //   const data2 = await api.gitMenuConfig(params);
+      const { data } = await api.gitMenuConfig(params);
+      if (data.state == "ok") {
+        const menuList = _.sortBy(data.data, function(item) {
+          return item.sort;
+        });
+
+        menuList.forEach(async(item, i) => {
+          if (
+            i == 0 &&
+            item.subMenu.length > 0 &&
+            item.subMenu[0].subMenu.length > 0
+          ) {
+            item.open = true;
+            await vm.getFormDes(
+              item.subMenu[0].subMenu[0].id,
+              item.subMenu[0].subMenu[0].name,
+              "blank",
+              item.subMenu[0].subMenu[0].pid,
+              "frist"
+            );
+          } else {
+            item.open = false;
+          }
+          if (item.subMenu.length > 0) {
+            item.subMenu = _.sortBy(item.subMenu, function(secItem) {
+              return secItem.sort;
+            });
+          }
+          item.subMenu.forEach((e, i) => {
+            e["open"] = false;
+          });
+        });
+
+        this.menu = menuList;
+        console.log("我获取了");
+        this.$store.commit("SET_MENULIST", this.menu);
+        // this.changeOpen(0)
+      }
+      //  ;
+    },
+    editMenuName(index, secIndex, thrIndex) {
+      this.type = "edit";
+      this.form.index = index;
+      this.form.secIndex = secIndex;
+      this.form.thrIndex = thrIndex;
+      this.menuIconIndex = this.form.menuIconIndex = thrIndex
+        ? this.menu[index].subMenu[secIndex].subMenu[thrIndex].icon
+        : secIndex
+          ? this.menu[index].subMenu[secIndex].icon
+          : this.menu[index].icon;
+      this.form.icon = thrIndex
+        ? this.menu[index].subMenu[secIndex].subMenu[thrIndex].icon
+        : secIndex
+          ? this.menu[index].subMenu[secIndex].icon
+          : this.menu[index].icon;
+      this.form.pName = thrIndex ? this.menu[index].subMenu[secIndex].name : "";
+      this.form.group = secIndex ? this.menu[index].subMenu[secIndex].pid : "";
+      this.form.name = thrIndex
+        ? this.menu[index].subMenu[secIndex].subMenu[thrIndex].name
+        : secIndex
+          ? this.menu[index].subMenu[secIndex].name
+          : this.menu[index].name;
+      this.dialogFormVisible = true;
+      this.curOperateStatus = thrIndex
+        ? this.menu[index].subMenu[secIndex].subMenu[thrIndex].operateStatus
+        : secIndex
+          ? this.menu[index].subMenu[secIndex].operateStatus
+          : this.menu[index].operateStatus;
+      this.curLevel = thrIndex
+        ? this.menuClone[index].subMenu[secIndex].subMenu[thrIndex].curLevel
+        : secIndex
+          ? this.menuClone[index].subMenu[secIndex].curLevel
+          : this.menuClone[index].curLevel;
+      this.curType = thrIndex
+        ? this.menu[index].subMenu[secIndex].subMenu[thrIndex].type
+        : secIndex
+          ? this.menu[index].subMenu[secIndex].type
+          : this.menu[index].type;
+
+      //    this.$store.commit("SET_MENULIST", this.menu);
+
+      this.$store.commit("SET_MENULIST", this.menu);
+    },
+    addMenu(index) {
+      this.type = "add";
+      //   if (indexPath.length == 1) {
+      //     // 新增2级菜单
+      //   }
+      this.form.index = index != undefined ? index : "";
+      this.form.pName = index != undefined ? this.menu[index].name : "";
+      this.form.name = "";
+      this.form.group = "";
+      this.form.icon = 1;
+      this.menuIconIndex = 1;
+      this.menuIconInnerIndex = 1;
+      this.form.pid = "";
+      this.dialogFormVisible = true;
+
+      this.$store.commit("SET_MENULIST", this.menu);
+      this.$refs.form.clearValidate();
+    },
+    addForm(index) {
+      this.type = "addForm";
+      this.form.pid = "";
+      this.form.name = "";
+      this.form.group = "";
+      this.form.pName = "";
+      this.form.icon = 1;
+      this.menuIconIndex = 1;
+      this.menuIconInnerIndex = 1;
+      this.dialogFormVisible = true;
+      this.getConfigList();
+      this.$refs.form.clearValidate();
+    },
+    async changeMenu(index, secIndex) {
+      let params = {};
+      let item = null;
+      if (secIndex == undefined) {
+        params = { id: this.menu[index].id };
+        item = this.menu[index];
+      } else {
+        params = { id: this.menu[index]["subMenu"][secIndex].id };
+        item = this.menu[index]["subMenu"][secIndex];
+      }
+      const tip = item.isShow == 1 ? "隐藏菜单" : "开启菜单";
+      this.$confirm(`确定要${tip}吗？`, `${tip}`, {
+        confirmButtonText: "确定",
+        cancelButtonText: "取消",
+        type: "warning"
+      })
+        .then(async() => {
+          const { data } = await api.changeShow(params);
+          if (data.state == "ok") {
+            item.isShow = item.isShow == 1 ? 0 : 1;
+            this.$message.success(data.msg ? data.msg : "更改成功");
+          } else {
+            this.$message.error(data.msg ? data.msg : "修改失败，请重试");
+          }
+        })
+        .catch(() => {});
+    },
+    async deleteMenu(index, secIndex, thrIndex) {
+      let params = {};
+      const item = null;
+      const vm = this;
+      if (secIndex == undefined) {
+        params = { id: vm.menu[index].id };
+      } else if (thrIndex == undefined) {
+        params = { id: vm.menu[index]["subMenu"][secIndex].id };
+      } else {
+        debugger;
+        params = {
+          id: vm.menu[index]["subMenu"][secIndex]["subMenu"][thrIndex].id
+        };
+      }
+      const h = vm.$createElement;
+      vm.$msgbox({
+        title: "删除提示",
+        message: h(
+          "div",
+          {
+            class: {
+              msgboxDiv: true
+            }
+          },
+          [
+            h(
+              "img",
+              {
+                domProps: {
+                  src: dd
+                }
+              },
+              "VNode"
+            ),
+            //   h("img", { "src": "../../../assets/icon_warning.png" }, "VNode"),
+            h(
+              "div",
+              null,
+              "删除表单后，将删除表单控件及业务数据，是否确认删除？"
+            )
+          ]
+        ),
+        showCancelButton: true,
+        closeOnClickModal: false,
+        closeOnPressEscape: false,
+        confirmButtonText: "确定",
+        cancelButtonText: "取消",
+        cancelButtonClass: "cancelBtn1",
+        confirmButtonClass: "confirmBtn1"
+      }).then(async() => {
+        const { data } = await api.deleteMenu(params);
+        if (data.state == "ok") {
+          vm.getConfigList();
+        } else {
+          this.$message.error(data.msg ? data.msg : "删除失败，请重试");
+        }
+      });
+
+      //   this.$confirm(
+      //     "删除表单后，将删除表单控件及业务数据，是否确认删除？",
+      //     "删除提示",
+      //     {
+      //       confirmButtonText: "确定",
+      //       cancelButtonText: "取消",
+      //       type: "warning"
+      //       // center: true
+      //     }
+      //   )
+      //     .then(async() => {
+      //       const { data } = await api.deleteMenu(params);
+      //       if (data.state == "ok") {
+      //         if (secIndex == undefined) {
+      //           this.menu.splice(index, 1);
+      //           this.$store.commit("SET_MENULIST", this.menu);
+      //         } else {
+      //           this.menu[index]["subMenu"].splice(secIndex, 1);
+      //           this.$store.commit("SET_MENULIST", this.menu);
+      //         }
+      //       } else {
+      //         this.$message.error(data.msg ? data.msg : "删除失败，请重试");
+      //       }
+      //     })
+      //     .catch(() => {});
+    },
+    handleCommand(val) {
+      const option = val.split("-");
+      switch (option[0]) {
+        case "add":
+          this.addMenu(option[1]);
+          break;
+        case "edit":
+          this.editMenuName(option[1], option[2], option[3]);
+          break;
+        case "delete":
+          this.deleteMenu(option[1], option[2], option[3]);
+          break;
+        case "change":
+          this.changeMenu(option[1], option[2]);
+          break;
+        default:
+          break;
+      }
+    },
+    resetForm() {
+      this.form = {
+        pName: "",
+        name: "",
+        index: "",
+        secIndex: ""
+      };
+    },
+    changeOpen(index, type, item) {
+      const vm = this;
+      debugger;
+      this.currentMIndex = index;
+      //   if (type) {
+      //     this.precutMenu[index].open = !this.precutMenu[index].open;
+      //   } else
+      if (type == 3) {
+      } else {
+        this.menu[index].open = !this.menu[index].open;
+        this.menu.map((e, i) => {
+          e.active = false;
+        });
+        this.menu[index].active = true;
+        // this.$store.state.formBuilder.currentMenu = this.menu[index];
+      }
+    },
+    // 添加分组
+    addMenuFunc() {
+      const vm = this;
+      vm.$refs.form.validate(async valid => {
+        if (valid) {
+          const params = {
+            name: vm.form.name,
+            companyNo: vm.companyNo,
+            icon: vm.form.icon.toString(),
+            pid: vm.form.pid ? vm.form.pid : vm.form.id
+          };
+          const { data } = await api.addMenu(params);
+          if (data.state == "ok") {
+            const sort = vm.menu.length;
+            vm.getConfigList();
+            // vm.menu[vm.form.index]["subMenu"].push({
+            //   subMenu: [],
+            //   name: vm.form.name,
+            //   id: data.id,
+            //   sort: sort,
+            //   isShow: 1,
+            //   type: 1,
+            //   operateStatus: 1,
+            //   open: false
+            // });
+            vm.dialogFormVisible = false;
+            vm.form.pid = "";
+            vm.form.icon = 1;
+            vm.$store.commit("SET_MENULIST", vm.menu);
+            vm.resetForm();
+          } else {
+            vm.$message.error(data.msg ? data.msg : "添加菜单失败");
+          }
+        }
+      });
+    },
+    addFormFunc() {
+      const vm = this;
+      vm.$refs.form.validate(async valid => {
+        if (valid) {
+          const params = {
+            pid: vm.form.id,
+            name: vm.form.name,
+            companyNo: vm.companyNo,
+            icon: vm.form.icon.toString()
+          };
+          const { data } = await api.addForm(params);
+          if (data.state == "ok") {
+            vm.$message.success("添加表单成功");
+            vm.getConfigList();
+            vm.dialogFormVisible = false;
+            vm.form.icon = 1;
+            vm.resetForm();
+          } else {
+            vm.$message.error(data.msg ? data.msg : "添加菜单失败");
+          }
+        }
+      });
+    },
+    // 编辑菜单名称
+    async editMenuFunc() {
+      const vm = this;
+      vm.$refs.form.validate(async valid => {
+        if (valid) {
+          let params = {};
+          let item = null;
+          if (vm.form.thrIndex) {
+            params = {
+              id: vm.menu[vm.form.index].subMenu[vm.form.secIndex].subMenu[
+                vm.form.thrIndex
+              ].id,
+              name: vm.form.name,
+              icon: vm.form.icon.toString()
+            };
+            item =
+              vm.menu[vm.form.index].subMenu[vm.form.secIndex].subMenu[
+                vm.form.thrIndex
+              ];
+          } else if (!vm.form.thrIndex && vm.form.secIndex) {
+            params = {
+              id: vm.menu[vm.form.index].subMenu[vm.form.secIndex].id,
+              name: vm.form.name,
+              icon: vm.form.icon.toString()
+            };
+            item = vm.menu[vm.form.index].subMenu[vm.form.secIndex];
+          } else {
+            params = {
+              id: vm.menu[vm.form.index].id,
+              name: vm.form.name,
+              icon: vm.form.icon.toString()
+            };
+            item = vm.menu[vm.form.index];
+            vm.$store.state.menuList = vm.menu;
+          }
+          //   debugger;
+          const { data } = await api.changeMenuName(params);
+          if (data.state == "ok") {
+            item.name = vm.form.name;
+            this.updateFormBuilder({
+              name: vm.form.name,
+              menuId: this.$store.state.formBuilder.menuId,
+              formDesId: this.$store.state.formBuilder.formDesId,
+              type: this.$store.state.formBuilder.type,
+              currentMenu: this.$store.state.formBuilder.currentMenu
+            });
+            this.getConfigList();
+            vm.dialogFormVisible = false;
+            vm.resetForm();
+          } else {
+            vm.$message.error(data.msg ? data.msg : "修改名称失败，请重试");
+          }
+        }
+      });
+    },
+    // 操作按钮
+    async operation() {
+      if (this.type == "add") {
+        this.addMenuFunc();
+      } else if (this.type == "addForm") {
+        this.addFormFunc();
+      } else {
+        this.editMenuFunc();
+      }
+    },
+    // 获取表单json数据
+    async getFormDes(id, name, type, pid, flg) {
+      const vm = this;
+      const h = this.$createElement;
+      const isSingleArr = [];
+      let isSingle = false;
+      vm.menu.forEach((e, i) => {
+        e.subMenu.forEach(e2 => {
+          isSingleArr.push(e2);
+        });
+      });
+      if (isSingleArr.length <= 1) {
+        isSingle = true;
+      } else {
+        isSingle = false;
+      }
+      if (!flg && !isSingle) {
+        vm.$msgbox({
+          title: "保存提示",
+          message: h(
+            "div",
+            {
+              class: {
+                msgboxDiv: true
+              }
+            },
+            [
+              h(
+                "img",
+                {
+                  domProps: {
+                    src: dd
+                  }
+                },
+                "VNode"
+              ),
+              //   h("img", { "src": "../../../assets/icon_warning.png" }, "VNode"),
+              h("div", null, "表单设计修改但未保存，是否保存后继续？")
+            ]
+          ),
+          confirmButtonText: "保存并继续",
+          cancelButtonText: "不保存",
+          closeOnClickModal: false,
+          closeOnPressEscape: false,
+          showCancelButton: true,
+          cancelButtonClass: "cancelBtn",
+          confirmButtonClass: "confirmBtn"
+        })
+          .then(async() => {
+            const res =
+              await vm.$parent.$refs.AppMain.$refs.mainHeader.saveDate();
+            vm.$store.state.formBuilder.currentMenu = id;
+            vm.$nextTick(() => {
+              vm.menu.map((e, i) => {
+                e.active = false;
+                if (e.subMenu) {
+                  e.subMenu.map((e2, i) => {
+                    if (e2.id == id) {
+                      e2.active = true;
+                    }
+                  });
+                }
+              });
+            });
+
+            const views = getMenuRouter(id);
+            if ((type == "precut" && views == "") || vm.menuId == id) return;
+            //   this.updateFormBuilder({
+            //     menuId: id,
+            //     name: name,
+            //     formDesId: "",
+            //     type: type,
+            //     currentMenu: id
+            //   });
+            const { data } = await api.queryFormByMenu({
+              menuId: id,
+              companyNo: vm.companyNo
+            });
+            let pName = {};
+            if (vm.$store.state.menuList) {
+              pName = _.find(vm.$store.state.menuList, function(o) {
+                return o.id == pid;
+              })?.name;
+            }
+
+            if (data.state == "ok" && JSON.stringify(data.data) == "{}") {
+              vm.clearForm();
+              vm.updateFormAttr(_.cloneDeep(formAttrDefault));
+              vm.updateFormBuilder({
+                menuId: id,
+                name: vm.form.title,
+                formDesId: data.data.id,
+                type: type,
+                currentMenu: id
+              });
+            } else if (data.state == "ok" && data.data) {
+              const keys = Object.keys(formAttrDefault);
+              var formAttr = Object.assign(
+                _.cloneDeep(formAttrDefault),
+                _.pick(data.data.content.formAttr, keys)
+              );
+              formAttr = Object.assign(formAttr, data.data.content.formAttr);
+
+              vm.json2Form(data.data.content.formDesc, type);
+              vm.updateFormAttr(formAttr);
+
+              vm.updateFormBuilder({
+                menuId: id,
+                name: vm.form.title,
+                formDesId: data.data.id,
+                type: type,
+                currentMenu: id
+              });
+            } else {
+              vm.$message.error(data.msg ? data.msg : "获取信息失败");
+            }
+          })
+          .catch(async() => {
+            vm.$store.state.formBuilder.currentMenu = id;
+            vm.$nextTick(() => {
+              vm.menu.map((e, i) => {
+                e.active = false;
+                if (e.subMenu) {
+                  e.subMenu.map((e2, i) => {
+                    if (e2.id == id) {
+                      e2.active = true;
+                    }
+                  });
+                }
+              });
+            });
+
+            const views = getMenuRouter(id);
+            if ((type == "precut" && views == "") || vm.menuId == id) return;
+            //   this.updateFormBuilder({
+            //     menuId: id,
+            //     name: name,
+            //     formDesId: "",
+            //     type: type,
+            //     currentMenu: id
+            //   });
+            const { data } = await api.queryFormByMenu({
+              menuId: id,
+              companyNo: vm.companyNo
+            });
+            let pName = {};
+            if (vm.$store.state.menuList) {
+              pName = _.find(vm.$store.state.menuList, function(o) {
+                return o.id == pid;
+              })?.name;
+            }
+
+            if (data.state == "ok" && JSON.stringify(data.data) == "{}") {
+              vm.clearForm();
+              vm.updateFormAttr(_.cloneDeep(formAttrDefault));
+              vm.updateFormBuilder({
+                menuId: id,
+                name: vm.form.title,
+                formDesId: data.data.id,
+                type: type,
+                currentMenu: id
+              });
+            } else if (data.state == "ok" && data.data) {
+              const keys = Object.keys(formAttrDefault);
+              var formAttr = Object.assign(
+                _.cloneDeep(formAttrDefault),
+                _.pick(data.data.content.formAttr, keys)
+              );
+              formAttr = Object.assign(formAttr, data.data.content.formAttr);
+
+              vm.json2Form(data.data.content.formDesc, type);
+              vm.updateFormAttr(formAttr);
+
+              vm.updateFormBuilder({
+                menuId: id,
+                name: vm.form.title,
+                formDesId: data.data.id,
+                type: type,
+                currentMenu: id
+              });
+            } else {
+              vm.$message.error(data.msg ? data.msg : "获取信息失败");
+            }
+            vm.$message({
+              type: "info",
+              message: "已取消保存"
+            });
+          });
+      } else {
+        vm.$store.state.formBuilder.currentMenu = id;
+
+        vm.$nextTick(() => {
+          vm.menu.map((e, i) => {
+            e.active = false;
+            if (e.subMenu) {
+              e.subMenu.map((e2, i) => {
+                if (e2.id == id) {
+                  e2.active = true;
+                }
+              });
+            }
+          });
+        });
+
+        const views = getMenuRouter(id);
+        if ((type == "precut" && views == "") || vm.menuId == id) return;
+        //   this.updateFormBuilder({
+        //     menuId: id,
+        //     name: name,
+        //     formDesId: "",
+        //     type: type,
+        //     currentMenu: id
+        //   });
+        const { data } = await api.queryFormByMenu({
+          menuId: id,
+          companyNo: vm.companyNo
+        });
+        let pName = {};
+        if (vm.$store.state.menuList) {
+          pName = _.find(vm.$store.state.menuList, function(o) {
+            return o.id == pid;
+          })?.name;
+        }
+
+        if (data.state == "ok" && JSON.stringify(data.data) == "{}") {
+          vm.clearForm();
+          vm.updateFormAttr(_.cloneDeep(formAttrDefault));
+          debugger;
+          vm.updateFormBuilder({
+            menuId: id,
+            name: vm.form.title,
+            formDesId: data.data.id,
+            type: type,
+            currentMenu: id
+          });
+        } else if (data.state == "ok" && data.data) {
+          const keys = Object.keys(formAttrDefault);
+          var formAttr = Object.assign(
+            _.cloneDeep(formAttrDefault),
+            _.pick(data.data.content.formAttr, keys)
+          );
+          formAttr = Object.assign(formAttr, data.data.content.formAttr);
+
+          vm.json2Form(data.data.content.formDesc, type);
+          vm.updateFormAttr(formAttr);
+
+          vm.form.title = `${vm.menu[0].name}/${vm.menu[0].subMenu[0].name}/${vm.menu[0].subMenu[0].subMenu[0].name}`;
+          vm.updateFormBuilder({
+            menuId: id,
+            name: vm.form.title,
+            formDesId: data.data.id,
+            type: type,
+            currentMenu: id
+          });
+        } else {
+          vm.$message.error(data.msg ? data.msg : "获取信息失败");
+        }
+      }
+    },
+    json2Form(formDesc, type) {
+      // 清空原有list （待优化）
+      this.clearForm(); // 2.更新 formDesc（组件通用配置数据） // 3.处理 formDesc.attr（组件属性配置数据）
+      if (type == "blank") {
+        const list = Object.entries(formDesc).map(([key, val]) => {
+          const attrsDefaultData = configList[val.type]
+            ? _.cloneDeep(configList[val.type].attrsDefaultData)
+            : {};
+          const attrs = val.attrs
+            ? Object.assign(attrsDefaultData, val.attrs)
+            : attrsDefaultData;
+          return {
+            ...val,
+            attrs,
+            field: key
+          };
+        }); // 更新 list
+        this.updateList({ name: "default", newList: list });
+      } else {
+        for (const name in formDesc) {
+          const list = Object.entries(formDesc[name]).map(([key, val]) => {
+            const attrsDefaultData = configList[val.type]
+              ? _.cloneDeep(configList[val.type].attrsDefaultData)
+              : {};
+            const attrs = val.attrs
+              ? Object.assign(attrsDefaultData, val.attrs)
+              : attrsDefaultData;
+            return {
+              attrs: val.attrs || {},
+              field: key,
+              ...val
+            };
+          }); // 更新 list
+          this.updateList({ name: name, newList: list });
+        }
+      } // 更新 selectIndex
+      this.updateSelectIndex(0);
+    },
+    // 获取预制菜单
+    async getPrecutMenu() {
+      //   const { data } = await api.getPrecutMenu();
+      const { data } = await apiAuth.getMenus();
+      console.log(data);
+      if (data.state == "ok") {
+        const menuList = _.sortBy(data.data, function(item) {
+          return item.sort;
+        });
+        menuList.forEach(item => {
+          item.open = false;
+          item.icon = item.icon
+            ? require(`@/assets/center/menuIcon/${item.icon}.png`)
+            : "";
+          if (item.list.length > 0) {
+            item.subMenu = _.sortBy(item.list, function(secItem) {
+              return secItem.sort;
+            });
+          }
+        });
+        this.precutMenu = menuList;
+      }
+    }
+  },
+  mounted() {
+    const _this = this;
+    // this.getPrecutMenu();
+    this.getConfigList();
+    this.$dragging.$on("dragged", ({ value }) => {
+      console.log(value);
+      if (this.step == 0) {
+        this.oldMenu = this.menu;
+      }
+      this.step++;
+    });
+    this.$dragging.$on("dragend", async val => {
+      if (this.step < 1) return;
+      console.log(val);
+      console.log(_this.menu, "end");
+      const group = val.group.split("-");
+      let params = {};
+      if (group[0] == "item") {
+        const id = this.menu.map(item => item.id);
+        params = { ids: id };
+        console.log(id);
+      } else {
+        const index = group[1];
+        const id = this.menu[index].subMenu.map(item => item.id);
+        params = { ids: id };
+      }
+      const { data } = await api.sortMenu(params);
+      if (data.state == "ok") {
+        this.step = 0;
+      } else {
+        this.menu = this.oldMenu;
+        this.$message.error(data.msg ? data.msg : "保存失败");
+      }
+    });
+  }
+};
+</script>
+
+<style lang="scss" scoped>
+[class^="icon-"],
+[class*=" icon-"] {
+  /* use !important to prevent issues with browser extensions that change fonts */
+  font-size: 40px;
+}
+.menuIconBox {
+  margin-bottom: 5px;
+}
+.iconMenuBox {
+  text-align: center;
+  width: 56px;
+  height: 19px;
+  font-size: 14px;
+  font-family: "Microsoft YaHei";
+  color: #333333;
+  line-height: 19px;
+}
+.iconMenu {
+  text-align: center;
+  display: inline-block;
+  width: 40px;
+  margin-right: 12px;
+  border-radius: 5px;
+}
+.el-dialog__body {
+  .iconMenu {
+    text-align: center;
+    display: inline-block;
+    width: 40px;
+    margin-right: 12px;
+    border-radius: 5px;
+    padding: 5px;
+    &:hover {
+      background-color: rgb(233, 233, 233);
+    }
+    &:active {
+      background-color: rgb(210, 234, 249);
+    }
+  }
+}
+.bgc {
+  background-color: rgb(210, 234, 249);
+}
+
+/deep/ .el-cascader {
+  width: 100%;
+}
+.msgboxDiv {
+  text-align: center !important;
+  div {
+    margin-top: 20px;
+    margin-bottom: 10px;
+  }
+}
+.msgboxDiv .el-message-box__btns {
+  text-align: center !important;
+  margin-bottom: 20px;
+}
+.msgboxDiv .el-message-box__btns button:nth-child(2) {
+  margin-left: 20px !important;
+}
+.el-message-box__btns {
+  text-align: center !important;
+}
+.dialog-footer {
+  text-align: center;
+}
+.el-icon-setting {
+  color: #ccc !important;
+  font-size: 18px !important;
+}
+.el-icon-setting:hover {
+  color: #0286df !important;
+}
+.addgroup {
+  background: #0286df;
+  border-radius: 4px;
+  padding: 10px 13px;
+}
+.addform {
+  // background: #0286DF;
+  border-radius: 4px;
+  padding: 10px 13px;
+  background: #fff;
+  border-color: #409eff;
+  color: #409eff;
+}
+/deep/ .el-tabs__nav-scroll {
+  // padding: 5px;
+}
+/deep/ .el-tabs__header {
+  margin: 0 0 5px !important;
+}
+/deep/ .el-tabs__nav {
+  width: 100% !important;
+  padding-top: 5px !important;
+  display: flex;
+  justify-content: center;
+  align-items: center;
+}
+/deep/ .el-tabs__nav .el-tabs__item {
+  //   height: 80px !important;
+  text-align: center;
+  width: 50% !important;
+  .span-box {
+    position: relative;
+    bottom: -10px;
+  }
+  span {
+    //   line-height: 20px;
+  }
+}
+//   border-bottom: 1px solid #ccc;
+.span-box {
+  text-align: center;
+  display: block;
+}
+.span-box-icon {
+  text-align: center;
+  font-size: 19px;
+  //   display: block;
+}
+.is-active {
+  background-color: #ecf5ff;
+  color: #0286df;
+}
+
+/deep/ .el-tabs__content {
+  //   height: 100% !important;
+  //   overflow: auto !important;
+}
+.el-tabs--left {
+  //   height: 100% !important;
+}
+.el-tab-pane {
+}
+.menu-list {
+  //   overflow: auto;
+  width: 100%;
+  background-color: #ffffff;
+
+  height: 100%;
+  .menu-config {
+    display: flex;
+    margin-bottom: 10px;
+    justify-content: space-between;
+    align-items: center;
+    // height: 32px;
+    overflow: hidden;
+    padding-top: 10px;
+    .config-title {
+      width: 100%;
+      display: flex;
+      justify-content: center;
+      align-items: center;
+      h4 {
+        font-size: 18px;
+        margin: 0;
+        display: inline-block;
+      }
+      i {
+        margin-left: 8px;
+        font-size: 18px;
+        cursor: pointer;
+        color: #666666;
+      }
+    }
+  }
+  .menu-item {
+    padding: 0 10px 0 20px;
+    position: relative;
+    display: flex;
+    justify-content: space-between;
+    align-items: center;
+    height: 56px;
+    color: #333;
+    line-height: 56px;
+    font-size: 16px;
+    cursor: pointer;
+    &:hover {
+      i {
+        display: inline-block;
+      }
+    }
+    i {
+      color: #909399;
+    }
+  }
+  .menu-item-name {
+    width: 155% !important;
+  }
+  .menu-item-child {
+    transition: 0.5s all ease;
+    height: 0;
+    overflow: hidden;
+    padding-left: 0;
+    margin: 0;
+    font-size: 14px;
+    color: #666;
+    li {
+      padding-left: 30px;
+      .menu-item-name {
+        font-size: 14px;
+        span {
+          max-width: 200px;
+        }
+      }
+      .menu-item-option {
+        width: 46px;
+      }
+    }
+    li.active {
+      background-color: #ecf5ff;
+      color: #0286df;
+    }
+  }
+  .menu-item-name {
+    display: flex;
+    align-items: center;
+    color: #303133;
+    img {
+      height: 16px;
+      width: 16px;
+      margin-right: 6px;
+    }
+    .no-img {
+      visibility: hidden;
+    }
+    span {
+      max-width: 180px;
+      overflow: hidden;
+      text-overflow: ellipsis;
+      white-space: nowrap;
+    }
+  }
+  .el-icon-arrow-down {
+    position: absolute;
+    right: 6px;
+    top: 10px;
+    transition: 0.5s all ease;
+    transform: rotate(0deg);
+    -ms-transform: rotate(0deg); /* IE 9 */
+    -webkit-transform: rotate(0deg); /* Safari and Chrome */
+  }
+  .menu-item-option {
+    width: 60px;
+    i {
+      margin-left: 3px;
+      font-size: 14px;
+      cursor: pointer;
+      color: #666666;
+    }
+    .el-icon-no-view {
+      height: 14px;
+      width: 14px;
+      background: url("../../../assets/login/close-eye.png") center center
+        no-repeat;
+      background-size: 100%;
+    }
+    .active {
+      color: #ccc;
+    }
+    .el-dropdown-link {
+      color: #0286df;
+      font-size: 12px;
+      i {
+        color: #0286df;
+        font-size: 12px;
+      }
+    }
+  }
+  .hover-col {
+    &:hover {
+      background-color: #ecf5ff;
+    }
+  }
+  .active {
+    background-color: #ecf5ff;
+  }
+  .is-open {
+    .el-icon-arrow-down {
+      transform: rotate(180deg);
+      -ms-transform: rotate(180deg); /* IE 9 */
+      -webkit-transform: rotate(180deg); /* Safari and Chrome */
+    }
+    .menu-item-child {
+      height: auto;
+    }
+  }
+}
+.el-menu-item {
+  display: flex;
+}
+.el-menu-item.is-active {
+  color: #303133 !important;
+}
+/deep/ .el-submenu__title {
+  display: flex !important;
+  align-items: center !important;
+  //   padding: 0 10px 0 10px !important;
+}
+.el-submenu__icon-arrow {
+  position: absolute !important;
+  top: 50% !important;
+  right: 8px !important;
+  margin-top: -7px !important;
+  -webkit-transition: -webkit-transform 0.3s !important;
+  transition: -webkit-transform 0.3s !important;
+  transition: transform 0.3s !important;
+  transition: transform 0.3s, -webkit-transform 0.3s !important;
+  font-size: 12px !important;
+}
+.menu-item-option {
+  span {
+    height: 50px;
+    display: inline-block;
+    i {
+      vertical-align: revert;
+    }
+  }
+}
+
+/deep/ .el-submenu .el-menu-item {
+  height: 50px;
+  line-height: 50px;
+  //   padding: 0 20px 0 60px !important;
+  padding: 0 20px 0 24px !important;
+  min-width: 200px;
+}
+</style>