init

src/assets/js/global.js

@@ -0,0 +1,420 @@
+/* eslint-disable no-prototype-builtins */
+/* eslint-disable no-mixed-operators */
+/* eslint-disable no-array-constructor */
+/* eslint-disable one-var */
+import store from "@/store";
+import router from "@/router";
+
+const MSG = {
+  CATCH_MSG: "网络异常，请检查网络",
+  QUERY_ERR_MSG: "数据获取失败，请稍后重试",
+  UPLOAD_ERR_MSG: "头像上传失败，请稍后重试",
+  UPLOAD_EXCEED_SIZE: "上传头像图片大小不能超过500K",
+  FILE_NAME_EXCEED_LENGTH: "文件名长度不能大于40个字符",
+  FILE_EXCEED_SIZE: "上传文件大小不能超过200MB"
+};
+
+const QUERY = {
+  PAGE_SIZE: 15,
+  LOADING_TEXT: "数据加载中...",
+  EMPTY_TEXT: "暂无数据"
+};
+
+let CONSTANTS = {
+  DEFAULT_USER_TYPE: "2", // 普通用户
+  DEFAULT_USER_STATE: "4", // 正常
+  DEFAULT_USER_NATURE: "1", // 临时
+  DEFAULT_USER_EFFECT_MON: "7776000000", // 三个月
+  DEFAULT_ORG_STATE: "1", // 启用
+  DEFAULT_PERS_SEX: "1", // 男
+  USER_STATE_LOCK: "3", // 锁定
+  USER_STATE_SLEEP: "2" // 休眠
+};
+
+let formatter = {
+  /**
+   * 格式化列表序号
+   */
+  formatIndex: function(index, currentPage, pageSize = QUERY.PAGE_SIZE) {
+    if ((!index && index !== 0) || (!currentPage && currentPage !== 0)) {
+      return "";
+    }
+    return index + (currentPage - 1) * pageSize + 1;
+  },
+
+  /**
+   * 格式化时间
+   */
+  formatDateTime: function(msec, formatter) {
+    return msec ? new Date(msec).format(formatter || "YYYY-MM-DD hh:mm") : "";
+  },
+
+  /**
+   * 格式化密码
+   */
+  formatPwd: function(pwd) {
+    return pwd ? "********" : "";
+  },
+
+  /**
+   * 格式化表格列数据
+   */
+  formatTableCol: function(val, param) {
+    let map =
+      typeof param === "string" ? store.state.dic.mapFormat[param] : param;
+    return map && (val || val === 0) ? map[val] : "";
+  },
+
+  /**
+   * IP转成整型
+   */
+  IP2Int: function(ip) {
+    let num = 0;
+    ip = ip.split(".");
+    num =
+      Number(ip[0]) * 256 * 256 * 256 +
+      Number(ip[1]) * 256 * 256 +
+      Number(ip[2]) * 256 +
+      Number(ip[3]);
+    num = num >>> 0;
+    return num;
+  },
+
+  /**
+   * 整型解析为IP地址
+   */
+  int2IP: function(num) {
+    num = num * 1;
+    let str,
+      tt = new Array();
+    tt[0] = (num >>> 24) >>> 0;
+    tt[1] = ((num << 8) >>> 24) >>> 0;
+    tt[2] = (num << 16) >>> 24;
+    tt[3] = (num << 24) >>> 24;
+    str =
+      String(tt[0]) +
+      "." +
+      String(tt[1]) +
+      "." +
+      String(tt[2]) +
+      "." +
+      String(tt[3]);
+    return str;
+  }
+};
+
+let filter = {
+  /**
+   * 过滤空格
+   */
+  filterSpace: function(params) {
+    if (!params) {
+      return params;
+    }
+    if (typeof params === "string") {
+      return params.replace(/(^\s*)|(\s*$)/g, "");
+    }
+    let obj = JSON.parse(JSON.stringify(params));
+    for (let key in obj) {
+      obj[key] =
+        typeof obj[key] === "string"
+          ? obj[key].replace(/(^\s*)|(\s*$)/g, "")
+          : obj[key];
+    }
+    return obj;
+  },
+
+  /**
+   * 过滤非数字
+   */
+  filterNaN: function(input) {
+    return input.replace(/[^\d]/g, "") * 1;
+  },
+
+  /**
+   * 过滤所有空格
+   */
+  allFilterSpace: function(obj) {
+    for (const key in obj) {
+      if (obj.hasOwnProperty(key) && obj[key]) {
+        obj[key] = obj[key].replace(/\s+/g, "");
+      }
+    }
+  }
+};
+
+let number = {
+  /**
+   * 加一个数，并返回字符串格式
+   */
+  addANum: function(val, num = 1, max = 10) {
+    if (isNaN(Number(val)) || isNaN(Number(num))) {
+      return "";
+    }
+    let res = val * 1 + num * 1;
+    if (max === isFinite || isNaN(Number(max))) {
+      return res + "";
+    }
+    return res > max * 1 ? max + "" : res + "";
+  }
+};
+
+let object = {
+  /**
+   * 清空对象的value值
+   */
+  clearValOfObj: function(obj) {
+    if (!obj || obj === {}) return {};
+    for (let key in obj) {
+      typeof obj[key] === "object" &&
+        Array.isArray(obj[key]) &&
+        (obj[key] = []);
+      typeof obj[key] === "object" &&
+        !Array.isArray(obj[key]) &&
+        obj[key] &&
+        (obj[key] = {});
+      typeof obj[key] !== "object" && (obj[key] = "");
+    }
+    return obj;
+  }
+};
+
+let array = {
+  /**
+   * 取某个字段拼接成字符串
+   */
+  jointValOfOneKey: function(list, key, mark = "、") {
+    if (!list || !list.length) return "";
+    let str = "";
+    list.forEach((index, item) => {
+      str += (index === 0 ? "" : mark) + item[key];
+    });
+    return str;
+  },
+
+  /**
+   * 取某个字段转换成list
+   */
+  selectOneKey: function(list, key) {
+    if (!list || !list.length) return [];
+    return list.map(item => item[key]);
+  },
+
+  /**
+   * 通过value获取Key值
+   */
+  getKeyByValue: function(list, val, key = "code", value = "name") {
+    if (!list || !list.length) return "";
+    let res;
+    for (let item of list) {
+      if (item[value] === val) {
+        res = item[key];
+        break;
+      }
+    }
+    return res;
+  },
+
+  /**
+   * 转化为el-tree树形结构数据
+   */
+  transToTreeData: function(arr) {
+    let list = JSON.parse(JSON.stringify(arr));
+    if (!list || !list.length) return [];
+    var map = {};
+    for (var item of list) {
+      map[item.id] = item;
+    }
+    var nodes = [];
+    for (var lis of list) {
+      var p = map[lis.pid];
+      if (!p) {
+        nodes.push(lis);
+        continue;
+      }
+      p.children || (p.children = []);
+      p.children.push(lis);
+    }
+    return nodes;
+  },
+
+  /*
+    tree 去除无子节点的父节点
+  */
+  deletTree(tree, father, grand) {
+    for (let node = tree.length - 1; node >= 0; node--) {
+      if (tree[node].children.length === 0 && tree[node].type === "mgroup") {
+        tree.splice(node, 1);
+        if (father && grand && father.children.length === 0) {
+          this.deletTree(grand);
+        }
+      } else if (tree[node].children.length !== 0) {
+        this.deletTree(tree[node].children, tree[node], tree);
+      }
+    }
+  },
+
+  /**
+   * 树结构转化为扁平化结构
+   */
+  deepTraversal: function(tree) {
+    let list = [];
+    tree.forEach(item => {
+      const loop = data => {
+        list.push(data);
+        let children = data.children;
+        children &&
+          children.length &&
+          children.forEach(child => {
+            loop(child);
+          });
+      };
+      loop(item);
+    });
+    return list;
+  }
+};
+
+let upload = {
+  /**
+   * 判断上传头像图片大小是否超出限制
+   */
+  isLimited: function(size, limit = 500) {
+    return size / 1024 <= limit;
+  }
+};
+
+let app = {
+  /**
+   * 关闭当前tab页
+   */
+  closeCurrTab: function(currPath, next) {
+    let opts = store.state.app.options,
+      index = opts.findIndex(item => item.path === currPath);
+    store.commit("DEL_TAB", currPath);
+    router.push(next || opts[index - 1]);
+  }
+};
+
+let pwdHandler = {
+  // 密码验证规则的安全配置编码
+  SAFE_CONFIG_CODE: "PWD_CHECK_RULES",
+
+  // 密码验证规则
+  rules: [
+    { label: "数字", reg: "[0-9]" },
+    { label: "大写字母", reg: "[A-Z]" },
+    { label: "小写字母", reg: "[a-z]" },
+    { label: "特殊字符" }
+  ],
+
+  /**
+   * 校验密码是否包含用户名
+   */
+  checkPwdByName(pwd, name) {
+    if (pwd === name) {
+      return "不能与用户名相同";
+    }
+    if (pwd.includes(name)) {
+      return "不能包含用户名";
+    }
+    return "";
+  },
+
+  /**
+   * 判断密码是否符合规则
+   */
+  checkPwdByRules(pwd, str = "0000") {
+    let cbMsg = "",
+      checked = true;
+    for (let i = 0; i < this.rules.length; i++) {
+      if (str.charAt(i) !== "1") {
+        continue;
+      }
+      let rule = this.rules[i];
+      cbMsg += (!cbMsg ? "" : "、") + `${rule.label}`;
+      if (
+        (rule.reg && !new RegExp(rule.reg).test(pwd)) ||
+        (!rule.reg && !this.hasSpecial(pwd))
+      ) {
+        checked = false;
+      }
+    }
+    return checked ? "" : cbMsg;
+  },
+
+  /**
+   * 判断字符串中是否包含特殊字符
+   */
+  hasSpecial(str) {
+    for (var i in str) {
+      var asc = str.charCodeAt(i);
+      if (
+        !(
+          (asc >= 48 && asc <= 57) ||
+          (asc >= 65 && asc <= 90) ||
+          (asc >= 97 && asc <= 122)
+        )
+      ) {
+        return true;
+      }
+    }
+    return false;
+  },
+
+  /**
+   * 随机生成数字
+   */
+  getRandomInt: function(min, max) {
+    min = Math.ceil(min);
+    max = Math.floor(max);
+    return Math.floor(Math.random() * (max - min + 1)) + min;
+  },
+
+  /**
+   * 随机生成符合全部规则的密码
+   */
+  getRandomPwd: function(len = 8) {
+    len = len * 1;
+    len < 8 && (len = 8);
+    len > 20 && (len = 20);
+    let pwdArr = [
+        "ABCDEFGHIJKLMNOPQRSTUVWXYZ",
+        "abcdefghijklmnopqrstuvwxyz",
+        "1234567890",
+        "~!@#$%^&*_-+=?"
+      ],
+      pwds = [],
+      n = 0;
+    for (let i = 0; i < len; i++) {
+      if (pwds.length < len - 4) {
+        let itemIdx = Math.floor(Math.random() * 4);
+        let pwdItem = pwdArr[itemIdx];
+        let item = pwdItem[Math.floor(Math.random() * pwdItem.length)];
+        pwds.push(item);
+      } else {
+        let newItem = pwdArr[n];
+        let lastItem = newItem[Math.floor(Math.random() * newItem.length)];
+        let spliceIdx = Math.floor(Math.random() * pwds.length);
+        pwds.splice(spliceIdx, 0, lastItem);
+        n++;
+      }
+    }
+    return pwds.join("");
+  }
+};
+
+export default {
+  MSG,
+  QUERY,
+  CONSTANTS,
+
+  formatter,
+  filter,
+  number,
+  object,
+  array,
+  upload,
+  app,
+  pwdHandler
+};

src/components/selectBox/index.js

@@ -1,2 +1,5 @@
-import SelectBox from './selectBox.vue'
-export default SelectBox
+import SelectBox from "./selectBox.vue";
+SelectBox.install = function(Vue) {
+  Vue.component(SelectBox.name, SelectBox);
+};
+export default SelectBox;

src/components/selectBox/selectBox.vue

@@ -25,103 +25,93 @@
           ></el-input>
         </div>
         <div class="left-bottom">
-          <el-tabs ref="selectTab" v-model="selectBox.tabConfig.activeName">
-            <el-tab-pane
-              :key="idx"
-              :label="item.title"
-              :name="item.name"
-              style="height:100%"
-              v-for="(item, idx) in selectBox.tabConfig.items"
-            >
-              <div style="height: 93%">
-                <el-form
-                  class="personnel-form-top"
-                  label-width="90px"
-                  size="small"
+          <div style="height: 93%">
+            <el-form class="personnel-form-top" label-width="90px" size="small">
+              <div
+                class="vc-page vc-page-parts"
+                style="
+                  position: relative;
+                  overflow: hidden;
+                  padding-bottom: 20px;
+                  margin-right: 0px;
+                "
+              >
+                <div
+                  class="tree-dialog scrollbar"
+                  style="width: 600px; background: white"
                 >
-                  <div
-                    class="vc-page vc-page-parts"
-                    style="position:relative;overflow:hidden;padding-bottom:20px; margin-right: 0px;"
+                  <!-- <el-tree
+                    :data="treeConfig.insideTreeData"
+                    :default-expanded-keys="treeConfig.expandedKeys"
+                    :empty-text="treeConfig.treeEmptyText"
+                    :expand-on-click-node="true"
+                    :key="treeKey"
+                    :props="item.defaultProps"
+                    :ref="'roleTree'"
+                    :render-content="renderContent"
+                    @check-change="treeConfig.handleSelectionChange"
+                    check-strictly
+                    class="org-tree"
+                    highlight-current
+                    node-key="id"
+                    render-after-expand
+                    show-checkbox
+                    v-if="!showList && listStyle === 'tree' && indep"
+                  ></el-tree>
+                  <el-tree
+                    :data="treeConfig.insideTreeData"
+                    :default-expanded-keys="treeConfig.expandedKeys"
+                    :empty-text="treeConfig.treeEmptyText"
+                    :expand-on-click-node="true"
+                    :key="treeKey"
+                    :props="item.defaultProps"
+                    :ref="'roleTree'"
+                    :render-content="renderContent"
+                    @check-change="treeConfig.handleSelectionChange"
+                    class="org-tree"
+                    highlight-current
+                    node-key="id"
+                    render-after-expand
+                    show-checkbox
+                    v-if="!showList && listStyle === 'tree' && !indep"
+                  ></el-tree> -->
+                  <el-checkbox-group
+                    class="checkbox"
+                    v-if="showList && leftList.items.length !== 0"
+                    v-model="leftList.default"
                   >
-                    <!-- 左侧 - 用户组树 -->
                     <div
-                      class="tree-dialog scrollbar"
-                      style="width:600px;background: white;"
+                      :key="idx"
+                      class="checkBox-box"
+                      v-for="(item, idx) in leftList.items"
                     >
-                      <el-tree
-                        :data="item.treeConfig.insideTreeData"
-                        :default-expanded-keys="item.treeConfig.expandedKeys"
-                        :empty-text="item.treeConfig.treeEmptyText"
-                        :expand-on-click-node="true"
-                        :key="treeKey"
-                        :props="item.defaultProps"
-                        :ref="'roleTree'"
-                        :render-content="renderContent"
-                        @check-change="item.treeConfig.handleSelectionChange"
-                        check-strictly
-                        class="org-tree"
-                        highlight-current
-                        node-key="id"
-                        render-after-expand
-                        show-checkbox
-                        v-if="!showList && listStyle === 'tree' && indep"
-                      ></el-tree>
-                      <el-tree
-                        :data="item.treeConfig.insideTreeData"
-                        :default-expanded-keys="item.treeConfig.expandedKeys"
-                        :empty-text="item.treeConfig.treeEmptyText"
-                        :expand-on-click-node="true"
-                        :key="treeKey"
-                        :props="item.defaultProps"
-                        :ref="'roleTree'"
-                        :render-content="renderContent"
-                        @check-change="item.treeConfig.handleSelectionChange"
-                        class="org-tree"
-                        highlight-current
-                        node-key="id"
-                        render-after-expand
-                        show-checkbox
-                        v-if="!showList && listStyle === 'tree' && !indep"
-                      ></el-tree>
-                      <el-checkbox-group
-                        class="checkbox"
-                        v-else-if="showList && leftList.items.length !== 0"
-                        v-model="leftList.default"
-                      >
-                        <div
-                          :key="idx"
-                          class="checkBox-box"
-                          v-for="(item, idx) in leftList.items"
+                      <div class="vm-line icon-left">
+                        <el-checkbox
+                          :label="item.id"
+                          @change="checked => leftListChange(checked, item)"
                         >
-                          <div class="vm-line icon-left">
-                            <el-checkbox
-                              :label="item.id"
-                              @change="checked => leftListChange(checked, item)"
-                            >
-                              <i
-                                class="el-icon-user checkedIcon"
-                                style="color:rgba(170,207,255,1)"
-                              ></i>
-                              <span>{{ item[searchConfig.key] }}</span>
-                            </el-checkbox>
-                          </div>
-                        </div>
-                      </el-checkbox-group>
-                      <div
-                        style="text-align: center;"
-                        v-else-if="showList && leftList.items.length === 0"
-                      >
-                        暂无数据
+                          <i
+                            class="el-icon-user checkedIcon"
+                            style="color: rgba(170, 207, 255, 1)"
+                          ></i>
+                          <span>{{ item[searchConfig.key] }}</span>
+                        </el-checkbox>
                       </div>
                     </div>
+                  </el-checkbox-group>
+                  <div
+                    style="text-align: center"
+                    v-else-if="showList && leftList.items.length === 0"
+                  >
+                    暂无数据
                   </div>
-                </el-form>
+                </div>
               </div>
-            </el-tab-pane>
-          </el-tabs>
+            </el-form>
+          </div>
         </div>
       </div>
-      <div class="right-box" style="float:right;height:100%">
+      <div class="right-box" style="float: right; height: 100%">
         <div class="right-top">
           <div class="top-box">
             <span
@@ -132,7 +122,7 @@
             <span
               @click="removeCheck"
               class="color-primary"
-              style="cursor: pointer;"
+              style="cursor: pointer"
               >清空</span
             >
           </div>
@@ -152,7 +142,7 @@
               <div class="vm-line icon-right">
                 <i
                   class="el-icon-circle-close"
-                  style="color:#DFE7F1"
+                  style="color: #dfe7f1"
                   v-on:click="clickIcon(item)"
                 ></i>
               </div>
@@ -162,7 +152,7 @@
       </div>
     </div>
 
-    <div class="dialog-footer" style="text-align: right;padding:20px">
+    <div class="dialog-footer" style="text-align: right; padding: 20px">
       <el-button @click="cancel" size="small">取消</el-button>
       <el-button :disabled="disabled" @click="save" size="small" type="primary"
         >保存</el-button
@@ -287,48 +277,23 @@ export default {
       insideAllNode: [],
       insideChecked: [],
       checkList: [],
-      timer: "",
-      para_rds_ud: {
-        roleIds: [],
-
-        ugroupId: ""
-      },
-      roleData: [],
-      roleTreeData: [],
       expandedKeys: [],
       treeEmptyText: " ",
       // 索引值
       index: 0,
       // insideTreeData
       insideTreeData: [],
-      selectBox: {
-        searchConfig: {
-          // 搜索
-          placeholder: "请输入", // 默认提示
-          key: "key" // key值
-        },
-        tabConfig: {
-          activeName: "org", // 默认tab页
-          index: 0,
-          items: [
-            {
-              name: "org",
-              title: "用户组织机构",
-              defaultProps: {
-                id: "id",
-                label: "text",
-                children: "children",
-                isLeaf: "isLeaf"
-              },
-              treeConfig: {
-                insideTreeData: [],
-                expandedKeys: [],
-                treeEmptyText: " ",
-                handleSelectionChange: this.handleSelectionChange
-              }
-            }
-          ]
-        }
+      inSideDefaultProps: {
+        id: "id",
+        label: "text",
+        children: "children",
+        isLeaf: "isLeaf"
+      },
+      treeConfig: {
+        insideTreeData: [],
+        expandedKeys: [],
+        treeEmptyText: " ",
+        handleSelectionChange: this.handleSelectionChange
       },
       // 最后提交
       addList: [],
@@ -345,11 +310,7 @@ export default {
       }
     };
   },
-  computed: {
-    id() {
-      return this.$parent.id; // id指打开对话框之前父页面所选择的用户组id.
-    }
-  },
+  computed: {},
   mounted() {},
   created() {},
 
@@ -367,6 +328,7 @@ export default {
     leftInputChange
     */
     leftInputChange(value) {
+      console.log("1111111111");
       if (this.listStyle === "tree" && value.length === 0) {
         this.showList = false;
         this.$nextTick(() => {
@@ -425,32 +387,17 @@ export default {
         this.$refs.roleTree[0].setCheckedKeys([]);
       }
       this.rightList.items = [];
-      this.selectBox.tabConfig.items[this.index].treeConfig.insideTreeData = [];
       this.insideChecked = [];
       this.insideAllNode = [];
-      this.selectBox.tabConfig.items[0].title = this.tabTitle
-        ? this.tabTitle
-        : "用户组织机构";
       this.insideAllNode = [...this.allNode];
       this.insideChecked = [...this.checkedNode];
       this.leftList.default = this.insideChecked.map(i => i.id);
+      console.log(this.insideAllNode, this.insideChecked, "this.insideAllNode");
       if (this.listStyle === "tree") {
         this.initTree(this.insideAllNode, this.insideChecked);
       } else {
         this.initList(this.insideAllNode, this.insideChecked);
       }
-      setTimeout(() => {
-        this.judgeLength();
-      }, 0);
-    },
-    /**
-     * 判断数组
-     */
-    judgeLength() {
-      if (this.selectBox.tabConfig.items.length <= 1) {
-        const el = this.$refs.selectTab.$children[0];
-        el.$el.style.display = "none";
-      }
     },
     initTree(all, checked) {
       this.disable(all, checked);
@@ -461,6 +408,18 @@ export default {
       this.disable(all, checked);
       this.showList = true;
     },
+    /**
+     * 节点禁用  取交集
+     */
+    disable(all, checked) {
+      all.forEach(x => {
+        if (checked.some(y => y.id === x.id)) {
+          // x.disabled = true
+          x.old = true;
+        }
+      });
+      this.rightList.items = all.filter(i => i.old);
+    },
     /**
      * 左侧多选框改变
      */
@@ -590,22 +549,12 @@ export default {
       this.$refs.roleTree.setCheckedKeys([]);
       this.disabled = true;
     },
-    /**
-     * 节点禁用  取交集
-     */
-    disable(all, checked) {
-      all.forEach(x => {
-        if (checked.some(y => y.id === x.id)) {
-          // x.disabled = true
-          x.old = true;
-        }
-      });
-      this.rightList.items = all.filter(i => i.old);
-    },
+
     /**
      * 获取树结构
      */
     getInsideTreeData(lists) {
+      console.log(lists, "lists", this.selectBox.tabConfig.items);
       this.showList = false;
       const temp = this.selectBox.tabConfig.items[this.index].treeConfig;
       temp.expandedKeys = [];
@@ -877,7 +826,6 @@ li {
       margin-left: 15px !important;
     }
     .el-dialog__header {
-      height: 24px;
       border-bottom: 1px solid #dfe7f1;
       padding: 10px 17px;
       .el-dialog__headerbtn {

src/main.js

@@ -5,13 +5,16 @@ import ElementUI from "element-ui";
 import store from "./store";
 import ant from "ant-design-vue";
 import EchartsDemo from "./components/echarts";
-import selectBox from "@/components/selectBox/selectBox";
+import "element-ui/lib/theme-chalk/index.css";
+import global_ from "@/assets/js/global";
+import selectBox from "@/components/selectBox";
 import "ant-design-vue/dist/antd.less";
 Vue.config.productionTip = false;
 Vue.use(ant);
 Vue.use(ElementUI);
 Vue.use(EchartsDemo);
 Vue.use(selectBox);
+Vue.prototype.GLOBAL = global_;
 new Vue({
   router,
   store,

src/views/selectBox/selectBox.vue

@@ -1,11 +1,122 @@
 <template>
   <div>
     selectBox
+    <el-button @click="editVisible()" type="primary">显示selectBox</el-button>
+    <!-- 关联权限 -->
+    <select-box
+      ref="selectBox"
+      :allNode="relatePermConfig.allNode"
+      :boxDialogVisible="relatePermConfig.editVisible"
+      :checkedNode="relatePermConfig.checked"
+      :iconConfig="relatePermConfig.iconConfig"
+      :rightKeyQ="relatePermConfig.rightKeyQ"
+      :searchConfig="relatePermConfig.search"
+      :title="relatePermConfig.title"
+      @close="relatePermConfig.editVisible = false"
+      @save="addAndRemovePermPtag"
+    />
   </div>
 </template>
 
 <script>
-export default {};
+export default {
+  name: "selectBoxDom",
+  data() {
+    return {
+      // 关联权限
+      relatePermConfig: {
+        iconConfig: {
+          parentType: {
+            key: "mgroup",
+            icon: "vc-icon vc-icon-tree-rGroup"
+          },
+          childrenType: {
+            key: "permission",
+            icon: "vc-icon vc-icon-tree-role"
+          }
+        },
+        rightKey: "name",
+        editVisible: false,
+        title: "关联权限",
+        listStyle: "tree",
+        search: {
+          title: "请输入",
+          patch: "getpermissionByName",
+          key: "name",
+          params: {}
+        },
+        defaultProps: {
+          id: "id",
+          label: "name",
+          children: "children",
+          isLeaf: "isLeaf"
+        },
+        allNode: [
+          {
+            id: "root",
+            name: "root",
+            pid: null
+          },
+          {
+            id: "1-1",
+            name: "1-1",
+            pid: "root"
+          },
+          {
+            id: "1-2",
+            name: "1-2",
+            pid: "root"
+          },
+          {
+            id: "1-3",
+            name: "1-3",
+            pid: "root"
+          },
+          {
+            id: "1-1-1",
+            name: "1-1-1",
+            pid: "1-1"
+          },
+          {
+            id: "1-1-2",
+            name: "1-1-2",
+            pid: "1-1"
+          },
+          {
+            id: "1-2-1",
+            name: "1-2-1",
+            pid: "1-2"
+          },
+          {
+            id: "1-2-2",
+            name: "1-2-2",
+            pid: "1-2"
+          },
+          {
+            id: "1-3-1",
+            name: "1-3-1",
+            pid: "1-3"
+          },
+          {
+            id: "1-3-2",
+            name: "1-3-2",
+            pid: "1-3"
+          }
+        ],
+        checked: ["1-3-2", "1-1-1"]
+      }
+    };
+  },
+  methods: {
+    /**
+     * '关联权限'弹出框关闭事件
+     */
+    addAndRemovePermPtag() {},
+    editVisible() {
+      this.relatePermConfig.editVisible = true;
+    }
+  }
+};
 </script>
 
 <style></style>