qgb-process 0.2.3 → 0.2.7

package/src/components/public/MemberSelection.vue

@@ -1,487 +1,487 @@
-<template>
-  <el-dialog
-    :title="title"
-    :visible.sync="dialogVisible"
-    width="600px"
-    append-to-body
-    :before-close="handleClose"
-  >
-    <div class="wrapper">
-      <div class="plan">
-        <div class="plan-title">选择：</div>
-        <div class="tab">
-          <div class="tab-title" v-if="onlyType == ''">
-            <span
-              :class="type == 1 ? 'active' : ''"
-              @click="changeList('type', 1)"
-              >角色</span
-            >
-            <span
-              :class="type == 2 ? 'active' : ''"
-              @click="changeList('type', 2)"
-              >成员</span
-            >
-          </div>
-          <div class="approvers">
-            <div>
-              <el-input
-                v-show="type == 1"
-                placeholder="输入角色名"
-                v-model="filterApprovers"
-                clearable
-              ></el-input>
-              <el-input
-                v-show="type == 2"
-                placeholder="输入姓名"
-                v-model="filterNotifiers"
-                clearable
-              ></el-input>
-              <el-tree
-                :load="loadNode"
-                lazy
-                :class="onlyType != '' ? 'filter-tree' : ''"
-                :props="defaultProps"
-                default-expand-all
-                show-checkbox
-                node-key="id"
-                :default-checked-keys="defaultCheck"
-                :filter-node-method="filterNode"
-                @check="handleCheckChange1"
-                ref="approvers"
-              ></el-tree>
-            </div>
-          </div>
-        </div>
-      </div>
-      <div :span="11" class="plan">
-        <div class="plan-title">已选：</div>
-        <div>
-          <div class="checklist">
-            <el-row v-if="roleList.length > 0">
-              <el-col :span="6">
-                <span>角色:</span>
-              </el-col>
-              <el-col :span="16">
-                <div
-                  class="check-list"
-                  v-for="(item, index) in roleList"
-                  :key="index"
-                >
-                  <span>{{ item.name }}</span>
-                  <i
-                    class="el-icon-circle-close"
-                    @click="removeList('roleList', item)"
-                  ></i>
-                </div>
-              </el-col>
-            </el-row>
-            <el-row v-if="userList.length > 0">
-              <el-col :span="6">
-                <span>成员:</span>
-              </el-col>
-              <el-col :span="16">
-                <!-- {{userList}} -->
-                <div
-                  class="check-list"
-                  v-for="(item, index) in userList"
-                  :key="index"
-                >
-                  <span>{{ item.name || item.userName }}</span>
-                  <!-- <span>{{ item.id }}</span> -->
-                  <i
-                    class="el-icon-circle-close"
-                    @click="removeList('userList', item)"
-                  ></i>
-                </div>
-              </el-col>
-            </el-row>
-          </div>
-        </div>
-      </div>
-    </div>
-    <div>
-      <slot></slot>
-    </div>
-    <span slot="footer" class="dialog-footer">
-      <el-button @click="handleClose">取 消</el-button>
-      <el-button type="primary" @click="save">保 存</el-button>
-    </span>
-  </el-dialog>
-</template>
-
-<script>
-// import api from "@/api/apiSystem/index";
-import api from "@/api/apiMemberSelection";
-export default {
-  name: "",
-  mixins: [],
-  extends: {},
-  components: {},
-  props: {
-    // 题目
-    title: {
-      type: String,
-      default: "选择"
-    },
-    // 已选成员或角色
-    formData: {
-      type: Object,
-      default: () => {
-        return {
-          roleList: [],
-          userList: []
-        };
-      }
-    },
-    // 只展示角色 1; 只展示成员 2;  两个都显示 ''
-    onlyType: {
-      type: String,
-      default: "2"
-    },
-    isRadio: {
-      type: Boolean,
-      default: false
-    },
-    memberNo: {
-      type: Array,
-      default: () => {
-        return [];
-      }
-    },
-    directClose: {
-      type: Boolean,
-      default: true
-    }
-  },
-  data() {
-    return {
-      editChekcId: "",
-      dialogVisible: true,
-      filterNotifiers: "",
-      filterApprovers: "",
-      type: "1",
-      defaultProps: {
-        children: "children",
-        label: "name"
-      },
-      roleList: [],
-      userList: [],
-      defaultCheck: []
-    };
-  },
-  filters: {
-    // 处理函数
-    addPriceIcon(value) {
-      // console.log(value); //200
-      // return "¥" + value;
-    }
-  },
-  watch: {
-    filterApprovers(val) {
-      this.$refs.approvers.filter(val);
-    },
-    filterNotifiers(val) {
-      this.$refs.approvers.filter(val);
-    },
-    formData: {
-      immediate: true,
-      deep: true,
-      handler: function(newVal, oldVal) {
-        this.userList = newVal.userList;
-        // this.roleList = newVal.roleList;
-        this.userList = newVal.userList ?  this.userList : [];
-        var obj = {};
-
-        // console.log( newVal.roleList," newVal.userList;");
-        // for (var i = 0; i < newVal.userList.length; i++) {
-        //   if (!obj[newVal.userList[i].id]) {
-        //     this.userList.push(newVal.userList[i]);
-        //     obj[newVal.userList[i].id] = true;
-        //   }
-        // }
-        var obj2 = {};
-        for (var i = 0; i < newVal.roleList.length; i++) {
-          if (!obj2[newVal.roleList[i].id]) {
-            this.roleList.push(newVal.roleList[i]);
-            obj2[newVal.roleList[i].id] = true;
-          }
-        }
-        console.log(this.roleList, " newVal.roleList;");
-        this.$nextTick(() => {
-          if (this.onlyType == "2") {
-            this.defaultCheck =
-              this.userList.length > 0
-                ? this.userList.map((item) => item.id)
-                : [];
-          } else {
-            this.defaultCheck =
-              this.roleList.length > 0
-                ? this.roleList.map((item) => item.id)
-                : [];
-          }
-        });
-      }
-    },
-    onlyType: {
-      immediate: true,
-      handler: function(newVal, oldVal) {
-        if (newVal == "") {
-          return;
-        } else {
-          this.type = newVal;
-        }
-      }
-    }
-  },
-  computed: {},
-  methods: {
-    handleClose() {
-      this.roleList = [];
-      this.userList = [];
-      this.$emit("close");
-    },
-    save() {
-      const json = {
-        roleList: this.roleList,
-        userList: []
-      };
-      // console.log(this.roleList);
-      // console.log(json);
-      var obj2 = {};
-      for (var i = 0; i < this.userList.length; i++) {
-        if (!obj2[this.userList[i].id]) {
-          json.userList.push(this.userList[i]);
-          obj2[this.userList[i].id] = true;
-        }
-      }
-      this.$emit("save", json);
-      this.directClose && this.handleClose();
-    },
-    filterNode(value, data) {
-      if (!value) return true;
-      return data.name.indexOf(value) !== -1;
-    },
-    handleCheckChange1(data, checked) {
-      if (this.type == 1) {
-        if (this.isRadio) {
-          const flg = checked.checkedKeys.indexOf(data.id) > -1;
-          this.roleList = !flg ? [] : [data];
-          this.$refs.approvers.setCheckedNodes(this.roleList);
-        } else {
-          const list = this.$refs.approvers
-            .getCheckedNodes()
-            .filter(
-              (item, index) =>
-                !!(item.type == undefined && item.children == undefined)
-            );
-          this.roleList = list;
-        }
-      } else {
-        if (this.isRadio) {
-          const flg = checked.checkedKeys.indexOf(data.id) > -1;
-          this.userList = !flg ? [] : [data];
-          this.$refs.approvers.setCheckedNodes(this.userList);
-        } else {
-          const list = this.$refs.approvers
-            .getCheckedNodes()
-            .filter(
-              (item, index) =>
-                !!(item.type == undefined && item.children == undefined)
-            );
-          this.userList = list;
-        }
-      }
-    },
-    changeList(type, num) {
-      this[type] = num;
-      if (num == 1) {
-        this.$refs.approvers.setCheckedNodes(this.roleList);
-      } else {
-        this.$refs.approvers.setCheckedNodes(this.userList);
-      }
-    },
-    func(arr) {
-      arr.forEach((v) => {
-        if (v.contacts) {
-          if (v.contacts.length !== 0) {
-            v.contacts.forEach((val) => {
-              v.children.push(val);
-              // this.func(v.children);
-              this.treeData = arr;
-            });
-          }
-        }
-      });
-    },
-    async loadNode(node, resolve) {
-      const _this = this
-      if (node.level === 0) {
-        const res = await api.getOrgsData();
-        const data = [];
-        data.push(res.data.data);
-        if (data[0] && data[0].contacts && data[0].contacts.length > 0) {
-          const contacts = data[0].contacts.map(j => {
-            // j.disabled = j.imAccount == _this.$store.state.user.imAccount || !j.imAccount
-            j.disabled = j.imAccount == !j.imAccount
-            return j
-          })
-          data[0].children = data[0].children.concat(contacts)
-          data[0].imAccount = "account" + data[0].id
-        }
-        return resolve(data);
-      } else {
-        if (node.data.children) {
-          const data = node.data.children
-          data.forEach(item => {
-            if (item.contacts && item.contacts.length > 0) {
-              const contacts = item.contacts.map(j => {
-                // j.disabled = j.imAccount == _this.$store.state.user.imAccount || !j.imAccount
-                return j
-              })
-              item.children = item.children.concat(contacts)
-            }
-            // item.disabled = !!(item.imAccount == _this.$store.state.user.imAccount || item.disabled)
-            item.imAccount = item.imAccount ? item.imAccount : "account" + item.id
-          })
-          return resolve(data)
-        } else {
-          return resolve([])
-        }
-      }
-    },
-    removeList(type, obj) {
-      this[type] = this[type].filter((item) => item.memberNo !== obj.memberNo);
-      if (this[type].length > 0) {
-        this.$refs.approvers.setCheckedNodes(this[type]);
-      } else {
-        this.$refs.approvers.setCheckedKeys([]);
-      }
-    }
-  },
-  created() {},
-  mounted() {}
-};
-</script>
-<style lang="scss" scoped>
-.wrapper {
-  display: flex;
-  .plan {
-    .plan-title {
-      height: 44px;
-      line-height: 44px;
-      padding-left: 10px;
-      color: #666666;
-      border-bottom: 1px solid #e4e7ed;
-    }
-    flex: 1;
-    height: 420px;
-    border: 1px solid #ccc;
-    border-radius: 4px;
-    width: 50%;
-    &:nth-of-type(2) {
-      margin-left: 10px;
-    }
-    .tab-title {
-      display: flex;
-      justify-content: center;
-      padding: 20px 0 10px 0;
-      span {
-        display: block;
-        text-align: center;
-        line-height: 30px;
-        width: 50px;
-        cursor: pointer;
-        border: 1px solid #e4e7ed;
-        &:nth-of-type(1) {
-          border-radius: 4px 0 0 4px;
-        }
-        &:nth-of-type(2) {
-          border-radius: 0 4px 4px 0;
-        }
-        &.active {
-          border-color: #0286df;
-        }
-      }
-    }
-    .tab-title-app {
-      height: 30px;
-      margin-bottom: 10px;
-      display: flex;
-      justify-content: center;
-      span {
-        display: block;
-        border: 1px solid #ccc;
-        width: 60px;
-        line-height: 30px;
-        text-align: center;
-        cursor: pointer;
-        &:nth-of-type(1) {
-          border-radius: 4px 0 0 4px;
-        }
-        &:nth-of-type(2) {
-          border-radius: 0 4px 4px 0;
-        }
-        &.active {
-          border-color: #0b9dfe;
-        }
-      }
-    }
-    .approvers {
-      padding: 10px;
-    }
-    .notifiers {
-      padding: 10px;
-    }
-    .checklist {
-      padding: 10px;
-      height: 356px;
-      overflow: auto;
-    }
-  }
-  .approver-type {
-    display: flex;
-    padding: 20px 0;
-    span {
-      width: 90px;
-      &:before {
-        content: "*";
-        color: #f56c6c;
-        margin-right: 4px;
-      }
-    }
-    div {
-      flex: 1;
-      /deep/.el-radio {
-        display: block;
-        margin-bottom: 10px;
-      }
-    }
-  }
-  .check-list {
-    display: flex;
-    justify-content: space-between;
-    align-items: center;
-    margin-bottom: 4px;
-    .el-icon-circle-close {
-      cursor: pointer;
-    }
-  }
-  /deep/ .el-tree-node__loading-icon .el-icon-loading {
-    font-size: 16px;
-  }
-  /deep/ .el-tree {
-    margin-top: 8px;
-    height: 240px;
-    overflow-y: auto;
-  }
-  /deep/ .el-tree-node__loading-icon {
-    font-size: 20px;
-  }
-  .filter-tree {
-    height: 300px !important;
-  }
-}
-/deep/ .el-dialog__body {
-  padding: 10px 20px;
-}
-</style>
+<template>
+  <el-dialog
+    :title="title"
+    :visible.sync="dialogVisible"
+    width="600px"
+    append-to-body
+    :before-close="handleClose"
+  >
+    <div class="wrapper">
+      <div class="plan">
+        <div class="plan-title">选择：</div>
+        <div class="tab">
+          <div class="tab-title" v-if="onlyType == ''">
+            <span
+              :class="type == 1 ? 'active' : ''"
+              @click="changeList('type', 1)"
+              >角色</span
+            >
+            <span
+              :class="type == 2 ? 'active' : ''"
+              @click="changeList('type', 2)"
+              >成员</span
+            >
+          </div>
+          <div class="approvers">
+            <div>
+              <el-input
+                v-show="type == 1"
+                placeholder="输入角色名"
+                v-model="filterApprovers"
+                clearable
+              ></el-input>
+              <el-input
+                v-show="type == 2"
+                placeholder="输入姓名"
+                v-model="filterNotifiers"
+                clearable
+              ></el-input>
+              <el-tree
+                :load="loadNode"
+                lazy
+                :class="onlyType != '' ? 'filter-tree' : ''"
+                :props="defaultProps"
+                default-expand-all
+                show-checkbox
+                node-key="id"
+                :default-checked-keys="defaultCheck"
+                :filter-node-method="filterNode"
+                @check="handleCheckChange1"
+                ref="approvers"
+              ></el-tree>
+            </div>
+          </div>
+        </div>
+      </div>
+      <div :span="11" class="plan">
+        <div class="plan-title">已选：</div>
+        <div>
+          <div class="checklist">
+            <el-row v-if="roleList.length > 0">
+              <el-col :span="6">
+                <span>角色:</span>
+              </el-col>
+              <el-col :span="16">
+                <div
+                  class="check-list"
+                  v-for="(item, index) in roleList"
+                  :key="index"
+                >
+                  <span>{{ item.name }}</span>
+                  <i
+                    class="el-icon-circle-close"
+                    @click="removeList('roleList', item)"
+                  ></i>
+                </div>
+              </el-col>
+            </el-row>
+            <el-row v-if="userList.length > 0">
+              <el-col :span="6">
+                <span>成员:</span>
+              </el-col>
+              <el-col :span="16">
+                <!-- {{userList}} -->
+                <div
+                  class="check-list"
+                  v-for="(item, index) in userList"
+                  :key="index"
+                >
+                  <span>{{ item.name || item.userName }}</span>
+                  <!-- <span>{{ item.id }}</span> -->
+                  <i
+                    class="el-icon-circle-close"
+                    @click="removeList('userList', item)"
+                  ></i>
+                </div>
+              </el-col>
+            </el-row>
+          </div>
+        </div>
+      </div>
+    </div>
+    <div>
+      <slot></slot>
+    </div>
+    <span slot="footer" class="dialog-footer">
+      <el-button @click="handleClose">取 消</el-button>
+      <el-button type="primary" @click="save">保 存</el-button>
+    </span>
+  </el-dialog>
+</template>
+
+<script>
+// import api from "@/api/apiSystem/index";
+import api from "@/api/apiMemberSelection";
+export default {
+  name: "",
+  mixins: [],
+  extends: {},
+  components: {},
+  props: {
+    // 题目
+    title: {
+      type: String,
+      default: "选择"
+    },
+    // 已选成员或角色
+    formData: {
+      type: Object,
+      default: () => {
+        return {
+          roleList: [],
+          userList: []
+        };
+      }
+    },
+    // 只展示角色 1; 只展示成员 2;  两个都显示 ''
+    onlyType: {
+      type: String,
+      default: "2"
+    },
+    isRadio: {
+      type: Boolean,
+      default: false
+    },
+    memberNo: {
+      type: Array,
+      default: () => {
+        return [];
+      }
+    },
+    directClose: {
+      type: Boolean,
+      default: true
+    }
+  },
+  data() {
+    return {
+      editChekcId: "",
+      dialogVisible: true,
+      filterNotifiers: "",
+      filterApprovers: "",
+      type: "1",
+      defaultProps: {
+        children: "children",
+        label: "name"
+      },
+      roleList: [],
+      userList: [],
+      defaultCheck: []
+    };
+  },
+  filters: {
+    // 处理函数
+    addPriceIcon(value) {
+      // console.log(value); //200
+      // return "¥" + value;
+    }
+  },
+  watch: {
+    filterApprovers(val) {
+      this.$refs.approvers.filter(val);
+    },
+    filterNotifiers(val) {
+      this.$refs.approvers.filter(val);
+    },
+    formData: {
+      immediate: true,
+      deep: true,
+      handler: function(newVal, oldVal) {
+        this.userList = newVal.userList;
+        // this.roleList = newVal.roleList;
+        this.userList = newVal.userList ?  this.userList : [];
+        var obj = {};
+
+        // console.log( newVal.roleList," newVal.userList;");
+        // for (var i = 0; i < newVal.userList.length; i++) {
+        //   if (!obj[newVal.userList[i].id]) {
+        //     this.userList.push(newVal.userList[i]);
+        //     obj[newVal.userList[i].id] = true;
+        //   }
+        // }
+        var obj2 = {};
+        for (var i = 0; i < newVal.roleList.length; i++) {
+          if (!obj2[newVal.roleList[i].id]) {
+            this.roleList.push(newVal.roleList[i]);
+            obj2[newVal.roleList[i].id] = true;
+          }
+        }
+        console.log(this.roleList, " newVal.roleList;");
+        this.$nextTick(() => {
+          if (this.onlyType == "2") {
+            this.defaultCheck =
+              this.userList.length > 0
+                ? this.userList.map((item) => item.id)
+                : [];
+          } else {
+            this.defaultCheck =
+              this.roleList.length > 0
+                ? this.roleList.map((item) => item.id)
+                : [];
+          }
+        });
+      }
+    },
+    onlyType: {
+      immediate: true,
+      handler: function(newVal, oldVal) {
+        if (newVal == "") {
+          return;
+        } else {
+          this.type = newVal;
+        }
+      }
+    }
+  },
+  computed: {},
+  methods: {
+    handleClose() {
+      this.roleList = [];
+      this.userList = [];
+      this.$emit("close");
+    },
+    save() {
+      const json = {
+        roleList: this.roleList,
+        userList: []
+      };
+      // console.log(this.roleList);
+      // console.log(json);
+      var obj2 = {};
+      for (var i = 0; i < this.userList.length; i++) {
+        if (!obj2[this.userList[i].id]) {
+          json.userList.push(this.userList[i]);
+          obj2[this.userList[i].id] = true;
+        }
+      }
+      this.$emit("save", json);
+      this.directClose && this.handleClose();
+    },
+    filterNode(value, data) {
+      if (!value) return true;
+      return data.name.indexOf(value) !== -1;
+    },
+    handleCheckChange1(data, checked) {
+      if (this.type == 1) {
+        if (this.isRadio) {
+          const flg = checked.checkedKeys.indexOf(data.id) > -1;
+          this.roleList = !flg ? [] : [data];
+          this.$refs.approvers.setCheckedNodes(this.roleList);
+        } else {
+          const list = this.$refs.approvers
+            .getCheckedNodes()
+            .filter(
+              (item, index) =>
+                !!(item.type == undefined && item.children == undefined)
+            );
+          this.roleList = list;
+        }
+      } else {
+        if (this.isRadio) {
+          const flg = checked.checkedKeys.indexOf(data.id) > -1;
+          this.userList = !flg ? [] : [data];
+          this.$refs.approvers.setCheckedNodes(this.userList);
+        } else {
+          const list = this.$refs.approvers
+            .getCheckedNodes()
+            .filter(
+              (item, index) =>
+                !!(item.type == undefined && item.children == undefined)
+            );
+          this.userList = list;
+        }
+      }
+    },
+    changeList(type, num) {
+      this[type] = num;
+      if (num == 1) {
+        this.$refs.approvers.setCheckedNodes(this.roleList);
+      } else {
+        this.$refs.approvers.setCheckedNodes(this.userList);
+      }
+    },
+    func(arr) {
+      arr.forEach((v) => {
+        if (v.contacts) {
+          if (v.contacts.length !== 0) {
+            v.contacts.forEach((val) => {
+              v.children.push(val);
+              // this.func(v.children);
+              this.treeData = arr;
+            });
+          }
+        }
+      });
+    },
+    async loadNode(node, resolve) {
+      const _this = this
+      if (node.level === 0) {
+        const res = await api.getOrgsData();
+        const data = [];
+        data.push(res.data.data);
+        if (data[0] && data[0].contacts && data[0].contacts.length > 0) {
+          const contacts = data[0].contacts.map(j => {
+            // j.disabled = j.imAccount == _this.$store.state.user.imAccount || !j.imAccount
+            j.disabled = j.imAccount == !j.imAccount
+            return j
+          })
+          data[0].children = data[0].children.concat(contacts)
+          data[0].imAccount = "account" + data[0].id
+        }
+        return resolve(data);
+      } else {
+        if (node.data.children) {
+          const data = node.data.children
+          data.forEach(item => {
+            if (item.contacts && item.contacts.length > 0) {
+              const contacts = item.contacts.map(j => {
+                // j.disabled = j.imAccount == _this.$store.state.user.imAccount || !j.imAccount
+                return j
+              })
+              item.children = item.children.concat(contacts)
+            }
+            // item.disabled = !!(item.imAccount == _this.$store.state.user.imAccount || item.disabled)
+            item.imAccount = item.imAccount ? item.imAccount : "account" + item.id
+          })
+          return resolve(data)
+        } else {
+          return resolve([])
+        }
+      }
+    },
+    removeList(type, obj) {
+      this[type] = this[type].filter((item) => item.memberNo !== obj.memberNo);
+      if (this[type].length > 0) {
+        this.$refs.approvers.setCheckedNodes(this[type]);
+      } else {
+        this.$refs.approvers.setCheckedKeys([]);
+      }
+    }
+  },
+  created() {},
+  mounted() {}
+};
+</script>
+<style lang="scss" scoped>
+.wrapper {
+  display: flex;
+  .plan {
+    .plan-title {
+      height: 44px;
+      line-height: 44px;
+      padding-left: 10px;
+      color: #666666;
+      border-bottom: 1px solid #e4e7ed;
+    }
+    flex: 1;
+    height: 420px;
+    border: 1px solid #ccc;
+    border-radius: 4px;
+    width: 50%;
+    &:nth-of-type(2) {
+      margin-left: 10px;
+    }
+    .tab-title {
+      display: flex;
+      justify-content: center;
+      padding: 20px 0 10px 0;
+      span {
+        display: block;
+        text-align: center;
+        line-height: 30px;
+        width: 50px;
+        cursor: pointer;
+        border: 1px solid #e4e7ed;
+        &:nth-of-type(1) {
+          border-radius: 4px 0 0 4px;
+        }
+        &:nth-of-type(2) {
+          border-radius: 0 4px 4px 0;
+        }
+        &.active {
+          border-color: #0286df;
+        }
+      }
+    }
+    .tab-title-app {
+      height: 30px;
+      margin-bottom: 10px;
+      display: flex;
+      justify-content: center;
+      span {
+        display: block;
+        border: 1px solid #ccc;
+        width: 60px;
+        line-height: 30px;
+        text-align: center;
+        cursor: pointer;
+        &:nth-of-type(1) {
+          border-radius: 4px 0 0 4px;
+        }
+        &:nth-of-type(2) {
+          border-radius: 0 4px 4px 0;
+        }
+        &.active {
+          border-color: #0b9dfe;
+        }
+      }
+    }
+    .approvers {
+      padding: 10px;
+    }
+    .notifiers {
+      padding: 10px;
+    }
+    .checklist {
+      padding: 10px;
+      height: 356px;
+      overflow: auto;
+    }
+  }
+  .approver-type {
+    display: flex;
+    padding: 20px 0;
+    span {
+      width: 90px;
+      &:before {
+        content: "*";
+        color: #f56c6c;
+        margin-right: 4px;
+      }
+    }
+    div {
+      flex: 1;
+      /deep/.el-radio {
+        display: block;
+        margin-bottom: 10px;
+      }
+    }
+  }
+  .check-list {
+    display: flex;
+    justify-content: space-between;
+    align-items: center;
+    margin-bottom: 4px;
+    .el-icon-circle-close {
+      cursor: pointer;
+    }
+  }
+  /deep/ .el-tree-node__loading-icon .el-icon-loading {
+    font-size: 16px;
+  }
+  /deep/ .el-tree {
+    margin-top: 8px;
+    height: 240px;
+    overflow-y: auto;
+  }
+  /deep/ .el-tree-node__loading-icon {
+    font-size: 20px;
+  }
+  .filter-tree {
+    height: 300px !important;
+  }
+}
+/deep/ .el-dialog__body {
+  padding: 10px 20px;
+}
+</style>