qgb-process 0.2.3 → 0.2.7

package/src/components/public/MemberSelection coby.vue

@@ -1,444 +1,444 @@
-<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">
-                <div class="check-list" v-for="(item,index) in userList" :key="index">
-                  <span>{{item.name}}</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: []
-    };
-  },
-  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.roleList = newVal.roleList;
-        this.userList = newVal.userList;
-        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: this.userList
-      };
-      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) {
-      if (node.level === 0) {
-        const res = await api.list();
-        const newRes = res.data.data;
-        let data = [];
-        data.push(newRes);
-        if (data[0] && data[0].contacts && data[0].contacts.length !== 0) {
-          data[0].contacts.forEach(v => {
-            data[0].children.push(v);
-          });
-        }
-        this.func(data[0].children);
-        if (this.isRadio) {
-          data = data.map(item => {
-            const newArr = [];
-            newArr.push(item);
-            newArr.forEach(v => {
-              if (v.children) {
-                v.disabled = true;
-              }
-            });
-            return item;
-          });
-        }
-        return resolve(data);
-      } else if (
-        node.level > 0 &&
-        node.data.children &&
-        node.data.children.length > 0
-      ) {
-        let data = node.data.children;
-        if (this.isRadio) {
-          data = data.map(item => {
-            const newArr = [];
-            newArr.push(item);
-            newArr.forEach(v => {
-              if (v.children) {
-                v.disabled = true;
-              }
-            });
-            return item;
-          });
-        }
-        if (this.memberNo.length > 0) {
-          data.forEach(item => {
-            // if (item.memberNo && this.memberNo.indexOf(item.memberNo) > -1) {
-            //   this.userList.push(item);
-            //   this.defaultCheck.push(item.id);
-            // }
-          });
-        }
-        return resolve(data);
-      } else if (node.level > 0 && node.data.type !== undefined) {
-        const user = await api.getUserByParentId(node.data.id);
-        if (this.memberNo.length > 0) {
-          user.data.data.forEach(item => {
-            if (this.memberNo.indexOf(item.memberNo) > -1) {
-              // this.userList.push(item);
-              // this.defaultCheck.push(item.id);
-            }
-          });
-        }
-        return resolve(user.data.data);
-      } else {
-        return resolve([]);
-      }
-    },
-    removeList(type, obj) {
-      this[type] = this[type].filter(item => item.id !== obj.id);
-      this.$refs.approvers.setCheckedNodes(this[type]);
-    }
-  },
-  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">
+                <div class="check-list" v-for="(item,index) in userList" :key="index">
+                  <span>{{item.name}}</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: []
+    };
+  },
+  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.roleList = newVal.roleList;
+        this.userList = newVal.userList;
+        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: this.userList
+      };
+      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) {
+      if (node.level === 0) {
+        const res = await api.list();
+        const newRes = res.data.data;
+        let data = [];
+        data.push(newRes);
+        if (data[0] && data[0].contacts && data[0].contacts.length !== 0) {
+          data[0].contacts.forEach(v => {
+            data[0].children.push(v);
+          });
+        }
+        this.func(data[0].children);
+        if (this.isRadio) {
+          data = data.map(item => {
+            const newArr = [];
+            newArr.push(item);
+            newArr.forEach(v => {
+              if (v.children) {
+                v.disabled = true;
+              }
+            });
+            return item;
+          });
+        }
+        return resolve(data);
+      } else if (
+        node.level > 0 &&
+        node.data.children &&
+        node.data.children.length > 0
+      ) {
+        let data = node.data.children;
+        if (this.isRadio) {
+          data = data.map(item => {
+            const newArr = [];
+            newArr.push(item);
+            newArr.forEach(v => {
+              if (v.children) {
+                v.disabled = true;
+              }
+            });
+            return item;
+          });
+        }
+        if (this.memberNo.length > 0) {
+          data.forEach(item => {
+            // if (item.memberNo && this.memberNo.indexOf(item.memberNo) > -1) {
+            //   this.userList.push(item);
+            //   this.defaultCheck.push(item.id);
+            // }
+          });
+        }
+        return resolve(data);
+      } else if (node.level > 0 && node.data.type !== undefined) {
+        const user = await api.getUserByParentId(node.data.id);
+        if (this.memberNo.length > 0) {
+          user.data.data.forEach(item => {
+            if (this.memberNo.indexOf(item.memberNo) > -1) {
+              // this.userList.push(item);
+              // this.defaultCheck.push(item.id);
+            }
+          });
+        }
+        return resolve(user.data.data);
+      } else {
+        return resolve([]);
+      }
+    },
+    removeList(type, obj) {
+      this[type] = this[type].filter(item => item.id !== obj.id);
+      this.$refs.approvers.setCheckedNodes(this[type]);
+    }
+  },
+  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>