qgb-process 0.2.3 → 0.2.7

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

@@ -1,355 +1,355 @@
-<template>
-  <el-dialog
-    title="选择审批人/抄送人"
-    :visible.sync="dialogVisible"
-    width="600px"
-    class="wrapper"
-    :before-close="handleClose">
-    <el-row :gutter="10">
-      <el-col :span="12">
-        <div class="plan-title">选择：</div>
-        <div class="plan">
-          <div class="tab-title">
-            <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
-                lazy
-                :load="loadNode"
-                class="filter-tree"
-                :props="defaultProps"
-                default-expand-all
-                show-checkbox
-                node-key="id"
-                :default-checked-keys="defaultCheck"
-                :filter-node-method="filterNode"
-                @check-change="handleCheckChange1"
-                ref="approvers">
-              </el-tree>
-            </div>
-          </div>
-        </div>
-      </el-col>
-      <el-col :span="12">
-        <div class="plan-title">已选：</div>
-        <div class="plan">
-          <div class="checklist">
-            <el-row v-if="approvers.length > 0">
-              <el-col :span="6">
-                <span>审批人:</span>
-              </el-col>
-              <el-col :span="16">
-                <div class="check-list" v-for="(item,index) in approvers" :key="index"><span>{{item.userName}}</span><i class="el-icon-circle-close" @click="removeList('approvers',item)"></i></div>
-              </el-col>
-            </el-row>
-            <el-row v-if="notifiers.length > 0">
-              <el-col :span="6">
-                <span>抄送人：</span>
-              </el-col>
-              <el-col :span="16">
-                <div class="check-list" v-for="(item,index) in notifiers" :key="index"><span>{{item.userName}}</span><i class="el-icon-circle-close" @click="removeList('notifiers',item)"></i></div>
-              </el-col>
-            </el-row>
-          </div>
-        </div>
-      </el-col>
-    </el-row>
-    <div class="approver-type" v-if="approvers.length > 1">
-      <span>审批方式: </span>
-      <div>
-        <el-radio-group v-model="approverType">
-          <el-radio label="1">会签（须所有人同意）</el-radio>
-          <el-radio label="2">或签（一名审批人同意或拒绝即可）</el-radio>
-        </el-radio-group>
-      </div>
-    </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/apiMemberSelection"
-export default {
-  name: "",
-  mixins: [],
-  extends: {},
-  components: {},
-  props: {
-    formData: {
-      type: Object,
-      default: () => {
-        return {
-          approverType: "1",
-          approvers: [],
-          notifiers: []
-        }
-      }
-    }
-  },
-  data() {
-    return {
-      dialogVisible: true,
-      filterNotifiers: "",
-      filterApprovers: "",
-      filterApproversX: "",
-      type: "1",
-      appType: "1",
-      approverType: "",
-      list: [],
-      defaultProps: {
-        children: "children",
-        label: "name"
-      },
-      approvers: [],
-      notifiers: [],
-      defaultCheck: [],
-      defaultNotifiers: []
-    }
-  },
-  watch: {
-    filterApprovers(val) {
-      this.$refs.approvers.filter(val);
-    },
-    filterNotifiers(val) {
-      this.$refs.notifiers.filter(val);
-    },
-    filterApproversX(val) {
-      this.$refs.fullName.filter(val);
-    },
-    formData: {
-      immediate: true,
-      deep: true,
-      handler: function(newVal, oldVal) {
-        this.approverType = newVal.approverType == "2" ? "2" : "1"
-        this.approvers = newVal.approvers
-        this.notifiers = newVal.notifiers
-        this.$nextTick(() => {
-          this.defaultCheck = this.approvers.length > 0 ? this.approvers.map(item => (item.id)) : []
-        })
-      }
-    }
-  },
-  computed: {},
-  methods: {
-    handleClose() {
-      this.$emit("close")
-    },
-    save() {
-      if (this.approvers.length > 1 && this.approverType == "") {
-        this.$message.error("请选择审批方式")
-        return false
-      }
-      const json = {
-        approverType: this.approvers.length > 1 ? this.approverType : "1",
-        approvers: this.approvers,
-        notifiers: this.notifiers
-      }
-      this.$emit("save", json)
-      this.handleClose()
-    },
-    filterNode(value, data) {
-      if (!value) return true;
-      return data.name.indexOf(value) !== -1;
-    },
-    handleCheckChange1(data, checked, indeterminate) {
-      if (this.type == 1) {
-        const list = this.$refs.approvers.getCheckedNodes().filter((item, index) => (!!(item.type == undefined && item.children == undefined)))
-        const approvers = [];
-        const approversId = [];
-        list.forEach((item, index) => {
-          if (approversId.indexOf(item.memberNo) == -1 || item.memberNo  == "") {
-            approvers.push({ id: item.id, userName: item.name, phone: item.phone, roleName: item.roleName, companyId: item.comNo, userId: item.memberNo })
-            approversId.push(item.memberNo)
-          }
-        })
-        this.approvers = approvers
-        // this.approvers = list
-
-      } else {
-        const list = this.$refs.approvers.getCheckedNodes().filter((item, index) => (!!(item.type == undefined && item.children == undefined)))
-        const notifiers = []
-        const notifiersId = []
-        list.forEach((item, index) => {
-          if (notifiersId.indexOf(item.memberNo) == -1 || item.memberNo  == "") {
-            notifiers.push({ id: item.id, userName: item.name, phone: item.phone, roleName: item.roleName, companyId: item.comNo, userId: item.memberNo })
-            notifiersId.push(item.memberNo)
-          }
-        })
-        this.notifiers = notifiers
-        // this.notifiers = list
-      }
-    },
-    changeList(type, num) {
-      this[type] = num
-      if (num == 1) {
-        this.$refs.approvers.setCheckedNodes(this.approvers)
-      } else {
-        this.$refs.approvers.setCheckedNodes(this.notifiers)
-      }
-    },
-    async loadNode(node, resolve) {
-      const _this = this
-      if (node.level === 0) {
-        const res = await api.list();
-        const data = [];
-        data.push(res.data.data);
-        if (data[0].contacts.length > 0) {
-          const contacts = data[0].contacts.map(j => {
-            return j
-          })
-          data[0].children = data[0].children.concat(contacts)
-        }
-        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 => {
-                return j
-              })
-              item.children = item.children.concat(contacts)
-            }
-          })
-          return resolve(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{
-  .plan-title{
-    height: 30px;
-    line-height: 30px;
-    padding: 0 0 10px 0px;
-  }
-  .plan{
-    height: 400px;
-    border: 1px solid #ccc;
-    border-radius: 4px;
-    .tab-title{
-      display: flex;
-      height: 41px;
-      align-items: center;
-      span{
-        display: block;
-        text-align: center;
-        line-height: 40px;
-        width: 50%;
-        cursor: pointer;
-        background-color: rgba(0, 0, 0, 0.0196078431372549);
-        border-bottom: 1px solid #ccc;
-        &:nth-of-type(1){
-          border-right: 1px solid #ccc;
-        }
-        &:nth-of-type(2){
-          border-left: 1px solid #ccc;
-        }
-        &.active{
-          border: 0;
-          background-color: #fff;
-        }
-      }
-    }
-    .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;
-    }
-    .el-tree{
-      margin: 10px 0;
-      height: 290px;
-      overflow-y: 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-dialog__body{
-    padding: 10px 20px;
-  }
-  /deep/ .el-tree-node__loading-icon.el-icon-loading{
-    font-size: 16px;
-  }
- }
-</style>
+<template>
+  <el-dialog
+    title="选择审批人/抄送人"
+    :visible.sync="dialogVisible"
+    width="600px"
+    class="wrapper"
+    :before-close="handleClose">
+    <el-row :gutter="10">
+      <el-col :span="12">
+        <div class="plan-title">选择：</div>
+        <div class="plan">
+          <div class="tab-title">
+            <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
+                lazy
+                :load="loadNode"
+                class="filter-tree"
+                :props="defaultProps"
+                default-expand-all
+                show-checkbox
+                node-key="id"
+                :default-checked-keys="defaultCheck"
+                :filter-node-method="filterNode"
+                @check-change="handleCheckChange1"
+                ref="approvers">
+              </el-tree>
+            </div>
+          </div>
+        </div>
+      </el-col>
+      <el-col :span="12">
+        <div class="plan-title">已选：</div>
+        <div class="plan">
+          <div class="checklist">
+            <el-row v-if="approvers.length > 0">
+              <el-col :span="6">
+                <span>审批人:</span>
+              </el-col>
+              <el-col :span="16">
+                <div class="check-list" v-for="(item,index) in approvers" :key="index"><span>{{item.userName}}</span><i class="el-icon-circle-close" @click="removeList('approvers',item)"></i></div>
+              </el-col>
+            </el-row>
+            <el-row v-if="notifiers.length > 0">
+              <el-col :span="6">
+                <span>抄送人：</span>
+              </el-col>
+              <el-col :span="16">
+                <div class="check-list" v-for="(item,index) in notifiers" :key="index"><span>{{item.userName}}</span><i class="el-icon-circle-close" @click="removeList('notifiers',item)"></i></div>
+              </el-col>
+            </el-row>
+          </div>
+        </div>
+      </el-col>
+    </el-row>
+    <div class="approver-type" v-if="approvers.length > 1">
+      <span>审批方式: </span>
+      <div>
+        <el-radio-group v-model="approverType">
+          <el-radio label="1">会签（须所有人同意）</el-radio>
+          <el-radio label="2">或签（一名审批人同意或拒绝即可）</el-radio>
+        </el-radio-group>
+      </div>
+    </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/apiMemberSelection"
+export default {
+  name: "",
+  mixins: [],
+  extends: {},
+  components: {},
+  props: {
+    formData: {
+      type: Object,
+      default: () => {
+        return {
+          approverType: "1",
+          approvers: [],
+          notifiers: []
+        }
+      }
+    }
+  },
+  data() {
+    return {
+      dialogVisible: true,
+      filterNotifiers: "",
+      filterApprovers: "",
+      filterApproversX: "",
+      type: "1",
+      appType: "1",
+      approverType: "",
+      list: [],
+      defaultProps: {
+        children: "children",
+        label: "name"
+      },
+      approvers: [],
+      notifiers: [],
+      defaultCheck: [],
+      defaultNotifiers: []
+    }
+  },
+  watch: {
+    filterApprovers(val) {
+      this.$refs.approvers.filter(val);
+    },
+    filterNotifiers(val) {
+      this.$refs.notifiers.filter(val);
+    },
+    filterApproversX(val) {
+      this.$refs.fullName.filter(val);
+    },
+    formData: {
+      immediate: true,
+      deep: true,
+      handler: function(newVal, oldVal) {
+        this.approverType = newVal.approverType == "2" ? "2" : "1"
+        this.approvers = newVal.approvers
+        this.notifiers = newVal.notifiers
+        this.$nextTick(() => {
+          this.defaultCheck = this.approvers.length > 0 ? this.approvers.map(item => (item.id)) : []
+        })
+      }
+    }
+  },
+  computed: {},
+  methods: {
+    handleClose() {
+      this.$emit("close")
+    },
+    save() {
+      if (this.approvers.length > 1 && this.approverType == "") {
+        this.$message.error("请选择审批方式")
+        return false
+      }
+      const json = {
+        approverType: this.approvers.length > 1 ? this.approverType : "1",
+        approvers: this.approvers,
+        notifiers: this.notifiers
+      }
+      this.$emit("save", json)
+      this.handleClose()
+    },
+    filterNode(value, data) {
+      if (!value) return true;
+      return data.name.indexOf(value) !== -1;
+    },
+    handleCheckChange1(data, checked, indeterminate) {
+      if (this.type == 1) {
+        const list = this.$refs.approvers.getCheckedNodes().filter((item, index) => (!!(item.type == undefined && item.children == undefined)))
+        const approvers = [];
+        const approversId = [];
+        list.forEach((item, index) => {
+          if (approversId.indexOf(item.memberNo) == -1 || item.memberNo  == "") {
+            approvers.push({ id: item.id, userName: item.name, phone: item.phone, roleName: item.roleName, companyId: item.comNo, userId: item.memberNo })
+            approversId.push(item.memberNo)
+          }
+        })
+        this.approvers = approvers
+        // this.approvers = list
+
+      } else {
+        const list = this.$refs.approvers.getCheckedNodes().filter((item, index) => (!!(item.type == undefined && item.children == undefined)))
+        const notifiers = []
+        const notifiersId = []
+        list.forEach((item, index) => {
+          if (notifiersId.indexOf(item.memberNo) == -1 || item.memberNo  == "") {
+            notifiers.push({ id: item.id, userName: item.name, phone: item.phone, roleName: item.roleName, companyId: item.comNo, userId: item.memberNo })
+            notifiersId.push(item.memberNo)
+          }
+        })
+        this.notifiers = notifiers
+        // this.notifiers = list
+      }
+    },
+    changeList(type, num) {
+      this[type] = num
+      if (num == 1) {
+        this.$refs.approvers.setCheckedNodes(this.approvers)
+      } else {
+        this.$refs.approvers.setCheckedNodes(this.notifiers)
+      }
+    },
+    async loadNode(node, resolve) {
+      const _this = this
+      if (node.level === 0) {
+        const res = await api.list();
+        const data = [];
+        data.push(res.data.data);
+        if (data[0].contacts.length > 0) {
+          const contacts = data[0].contacts.map(j => {
+            return j
+          })
+          data[0].children = data[0].children.concat(contacts)
+        }
+        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 => {
+                return j
+              })
+              item.children = item.children.concat(contacts)
+            }
+          })
+          return resolve(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{
+  .plan-title{
+    height: 30px;
+    line-height: 30px;
+    padding: 0 0 10px 0px;
+  }
+  .plan{
+    height: 400px;
+    border: 1px solid #ccc;
+    border-radius: 4px;
+    .tab-title{
+      display: flex;
+      height: 41px;
+      align-items: center;
+      span{
+        display: block;
+        text-align: center;
+        line-height: 40px;
+        width: 50%;
+        cursor: pointer;
+        background-color: rgba(0, 0, 0, 0.0196078431372549);
+        border-bottom: 1px solid #ccc;
+        &:nth-of-type(1){
+          border-right: 1px solid #ccc;
+        }
+        &:nth-of-type(2){
+          border-left: 1px solid #ccc;
+        }
+        &.active{
+          border: 0;
+          background-color: #fff;
+        }
+      }
+    }
+    .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;
+    }
+    .el-tree{
+      margin: 10px 0;
+      height: 290px;
+      overflow-y: 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-dialog__body{
+    padding: 10px 20px;
+  }
+  /deep/ .el-tree-node__loading-icon.el-icon-loading{
+    font-size: 16px;
+  }
+ }
+</style>