qgb-process 0.2.3 → 0.2.7

package/src/views/formBuilder/components/nodeConditionConfig cody.vue

@@ -1,376 +1,376 @@
-<template>
-  <div class="wrapper-mask" @click="$emit('cancal')">
-    <div class="wrapper" @click.stop="">
-      <div class="title">
-
-        <div v-if="isEdit">
-          <span>{{title}}</span>
-          <i class="el-icon-edit" @click.stop="isEdit = false"></i>
-        </div>
-        <div v-else>
-          <el-input v-model="conName" autofocus placeholder="请输入内容" @blur="changeName"></el-input>
-        </div>
-      </div>
-      <el-form class="form-box" ref="form" :model="form" label-width="90px">
-        <div v-for="(item,index) in formConfig" :key="index">
-          <template v-if="item.ele == 'checkbox'">
-            <el-form-item :label="item.name+': '">
-              <el-checkbox-group v-model="form[item.variable].value" @change="(val)=>{handlerChange(val,item)}">
-                <el-checkbox :label="items.no" v-for="(items,indexs) in item.data" :key="indexs">{{items.name}}</el-checkbox>
-              </el-checkbox-group>
-            </el-form-item>
-          </template>
-          <template v-if="item.ele == 'input'">
-            <el-form-item :label="item.name+': '" :rules="{ validator: validatePass, trigger: 'change', message: '不能小于0'}" :prop="item.variable">
-              <el-row :gutter="4">
-                <el-col :span="11">
-                  <el-select v-model="form[item.variable].opt" placeholder="请选择">
-                    <el-option
-v-for="item in optOption"
-                    :key="item.value"
-                    :label="item.labal"
-                    :value="item.value"></el-option>
-                  </el-select>
-                </el-col>
-                <el-col :span="11">
-                  <el-input v-model="form[item.variable].value"></el-input>
-                </el-col>
-              </el-row>
-            </el-form-item>
-          </template>
-          <template v-if="item.ele == 'sponsor'">
-            <el-form-item :label="item.name+': '">
-              <div>
-                <template v-if="form[item.variable].sponsors && form[item.variable].sponsors.length > 0">
-                  <div class="selector" @click="showSelector = true">
-                    <el-tag
-                      v-for="tag in form[item.variable].sponsors"
-                      :key="tag.userId"
-                      @close="removeTag(item.variable,tag)"
-                      closable>
-                      {{tag.userName}}
-                    </el-tag>
-                  </div>
-                </template>
-                <template v-else>
-                  <el-input placeholder="请选择具体人员" @focus="showSelector = true"></el-input>
-                </template>
-              </div>
-            </el-form-item>
-          </template>
-        </div>
-        <el-form-item>
-          <el-button type="primary" @click.stop="addCondition">添加条件</el-button>
-          <span class="mar_l20">还有 {{able}} 个可用条件</span>
-        </el-form-item>
-      </el-form>
-      <div class="btn-group">
-        <el-button @click.stop="$emit('cancal')">取消</el-button>
-        <el-button type="primary" @click.stop="save">保存</el-button>
-      </div>
-      <el-dialog
-        title="选择条件"
-        :visible.sync="isShow"
-        width="30%"
-        :modal="false"
-        :before-close="handleClose">
-        <span>请选择用来区分审批流程的条件字段</span>
-        <el-checkbox-group v-model="condition"  class="mar_t20">
-          <el-checkbox :label="items.variable" v-for="(items,indexs) in configList" :key="indexs">{{items.name}}</el-checkbox>
-        </el-checkbox-group>
-        <span slot="footer" class="dialog-footer">
-          <el-button @click.stop="cancel">取 消</el-button>
-          <el-button type="primary" @click.stop="determine">确 定</el-button>
-        </span>
-      </el-dialog>
-      <MemberSelection  v-if="showSelector" title="选择发起人" :directClose="false" @close="showSelector = false;" :formData="selectData" :memberNo="memberNo" @save="checkMenber"></MemberSelection>
-    </div>
-  </div>
-</template>
-
-<script>
-import * as config from "./conditionConfig"
-import MemberSelection from "@/components/public/MemberSelection.vue"
-import _ from "lodash-es"
-export default {
-  name: "",
-  mixins: [],
-  extends: {},
-  components: {
-    MemberSelection
-  },
-  props: {
-    formData: {
-      type: Object,
-      default: () => {
-        return {}
-      }
-    },
-    title: {
-      type: String,
-      default: ""
-    }
-  },
-  data() {
-    return {
-      form: {},
-      optOption: [
-        { labal: "大于等于", value: ">=" },
-        { labal: "大于", value: ">" },
-        { labal: "小于等于", value: "<=" },
-        { labal: "小于", value: "<" }
-      ],
-      formConfig: [],
-      isShow: false,
-      configList: [],
-      condition: [],
-      oldCOndition: [],
-      isEdit: true,
-      conName: "",
-      applyType: "",
-      showSelector: false,
-      selectData: {
-        roleList: [],
-        userList: []
-      },
-      memberNo: []
-    }
-  },
-  watch: {
-    formData: {
-      immediate: true,
-      deep: true,
-      handler: function(newVal, oldVal) {
-        const keys = Object.keys(newVal)
-        if (keys.length > 0) {
-          const arr = []
-          const conArr = []
-          this.configList.forEach((item, index) => {
-            if (keys.indexOf(item.variable) > -1) {
-              arr.push(item)
-              conArr.push(item.variable)
-            }
-          })
-          if (keys.indexOf("userId") > -1) {
-            this.selectData.userList = newVal.userId.sponsors
-            this.memberNo = newVal.userId.sponsors.map(i => (i.userId))
-          } else {
-            this.selectData.userList = []
-            this.memberNo = []
-          }
-          this.formConfig = arr
-          this.form = newVal
-          this.condition = conArr
-        } else {
-          this.formConfig = []
-          this.form = {}
-          this.condition = []
-          this.selectData.userList = []
-          this.memberNo = []
-        }
-      }
-    },
-    title: {
-      immediate: true,
-      handler: function(newVal, oldVal) {
-        this.conName = newVal
-      }
-    }
-  },
-  computed: {
-    able() {
-      return this.configList.length - this.condition.length
-    }
-  },
-  methods: {
-    removeTag(key, item) {
-      this.form[key].sponsors = this.form[key].sponsors.filter(i => ((i.userName != item.userName && i.userId != item.userId)))
-      this.memberNo =  this.form[key].sponsors.map(i => (i.userId))
-      this.selectData.userList = this.form[key].value
-    },
-    validatePass(rule, value, callback) {
-      if (parseFloat(value.value) != "" && parseFloat(value.value) >= 0) {
-        callback();
-      } else {
-        callback("不能小于0");
-      }
-    },
-    save() {
-      this.$refs.form.validate((valid) => {
-        if (valid) {
-          const desc = []
-          for (const name in this.form) {
-            const flg = this.form[name].value == "" || this.form[name].value == [] || this.form[name].opt == ""
-            if (flg && name != "userId") {
-              this.$message.error("条件数据不能为空")
-              return
-            }
-            if (name == "userId" && this.form[name].sponsors.length < 1) {
-              this.$message.error("条件数据不能为空")
-              return
-            }
-            if (Array.isArray(this.form[name].value) &&　name != "userId") {
-              const data = this.configList.filter(i => (i.variable == name))[0].data
-              let descArr;
-              if (data) {
-                descArr = this.form[name].value.map(item => {
-                  return data.filter(j => (j.no == item))[0].name
-                })
-              }
-              desc.push(this.form[name].name + "属于：" + descArr.join("或"))
-            } else if (name == "userId") {
-              const descArr = this.form[name].sponsors.map(item => (item.userName))
-              desc.push(this.form[name].name + "属于：" + descArr.join("或"))
-            } else {
-              desc.push(`${this.form[name].name} ${this.form[name].opt} ${this.form[name].value}`)
-            }
-          }
-          this.$emit("save", { form: this.form, desc: desc })
-        }
-      });
-    },
-    changeName() {
-      if (this.conName) {
-        this.$emit("edit", this.conName)
-      } else {
-        this.conName = this.title
-      }
-      this.isEdit = true
-    },
-    handleClose() {
-      this.isShow = false
-    },
-    addCondition() {
-      this.oldCondition = this.condition
-      this.isShow = true
-    },
-    cancel() {
-      console.log("00")
-      this.condition = this.oldCondition
-      this.isShow = false
-    },
-    // 添加条件确认按钮
-    determine() {
-      const arr = [];
-      const _this = this
-      const formData = _.cloneDeep(_this.form)
-      _this.configList.forEach((item, index) => {
-        if (_this.condition.indexOf(item.variable) > -1) {
-          arr.push(item)
-          if (formData[item.variable] == undefined) {
-            const opt = item.ele == "input" ? "" : "="
-            const value = item.ele == "input" ? "" : []
-            formData[item.variable] = { opt: opt, value: value, dateType: "String", name: item.name, sponsors: [] }
-          }
-        } else {
-          if (formData[item.variable] !== undefined) {
-            delete formData[item.variable]
-          }
-        }
-      })
-      this.form = formData
-      this.formConfig = arr
-      this.isShow = false
-    },
-    // 设置条件
-    async setConfig() {
-      this.applyType = this.$route.query.type;
-      const configDefault = { ele: "sponsor", name: "发起人", variable: "userId" }
-      this.configList = config[this.applyType] ? await config[this.applyType](this) : []
-      this.configList.unshift(configDefault)
-    },
-    handlerChange(val, item) {
-      if (item.changeFuc != undefined) {
-        item.changeFuc(val, this)
-      }
-    },
-    checkMenber(data) {
-      console.log(data)
-      const sponsor = []
-      const memberNo = []
-      data.userList.forEach((item, index) => {
-        sponsor.push({ userId: item.memberNo, companyId: item.comNo, userName: item.name, roleName: item.roleName })
-        memberNo.push(item.memberNo)
-      })
-      this.memberNo = memberNo
-      this.form.userId.sponsors = sponsor
-      this.form = Object.assign({}, this.form)
-      this.showSelector = false
-    }
-  },
-  created() {
-    this.setConfig()
-  },
-  mounted() {}
-}
-</script>
-<style lang="scss" scoped>
-.wrapper-mask{
-  position: fixed;
-  top: 0;
-  left: 0;
-  right: 0;
-  bottom: 0;
-  background-color: rgba(0,0,0,0.4);
-  cursor: pointer;
-  z-index: 999;
-}
-.wrapper{
-  position: absolute;
-  right: 0;
-  top: 0;
-  bottom: 0;
-  overflow-y: auto;
-  width: 598px;
-  border: 1px solid #ccc;
-  background-color: #fff;
-  .title{
-    padding: 0 20px;
-    height: 60px;
-    border-bottom: 1px solid #DFE4EA;
-    display: flex;
-    align-items: center;
-    margin-bottom: 20px;
-    font-size: 18px;
-    .el-icon-edit{
-      cursor: pointer;
-      margin-left: 20px;
-    }
-  }
-  .form-box{
-    padding: 0 20px;
-  }
-  .btn-group{
-    position: absolute;
-    bottom: 50px;
-    left: 0;
-    right: 0;
-    text-align: center;
-  }
-}
-.mar_t20{
-  margin-top: 20px;
-}
-.mar_l20{
-  margin-left: 20px;
-}
-.selector{
-  padding: 0 4px;
-  border: 1px solid #d9d9d9;
-  line-height: 30px;
-  border-radius: 4px;
-  &:hover{
-    border: 1px solid #1890ff;
-  }
-}
-/deep/ .selector .el-tag{
-  height: 22px;
-  line-height: 20px;
-  padding: 0 0 0 8px;
-  font-size: 14px;
-  margin-right: 4px;
-}
-/deep/ .selector .el-tag .el-icon-close{
-  right: 2px;
-}
-</style>
+<template>
+  <div class="wrapper-mask" @click="$emit('cancal')">
+    <div class="wrapper" @click.stop="">
+      <div class="title">
+
+        <div v-if="isEdit">
+          <span>{{title}}</span>
+          <i class="el-icon-edit" @click.stop="isEdit = false"></i>
+        </div>
+        <div v-else>
+          <el-input v-model="conName" autofocus placeholder="请输入内容" @blur="changeName"></el-input>
+        </div>
+      </div>
+      <el-form class="form-box" ref="form" :model="form" label-width="90px">
+        <div v-for="(item,index) in formConfig" :key="index">
+          <template v-if="item.ele == 'checkbox'">
+            <el-form-item :label="item.name+': '">
+              <el-checkbox-group v-model="form[item.variable].value" @change="(val)=>{handlerChange(val,item)}">
+                <el-checkbox :label="items.no" v-for="(items,indexs) in item.data" :key="indexs">{{items.name}}</el-checkbox>
+              </el-checkbox-group>
+            </el-form-item>
+          </template>
+          <template v-if="item.ele == 'input'">
+            <el-form-item :label="item.name+': '" :rules="{ validator: validatePass, trigger: 'change', message: '不能小于0'}" :prop="item.variable">
+              <el-row :gutter="4">
+                <el-col :span="11">
+                  <el-select v-model="form[item.variable].opt" placeholder="请选择">
+                    <el-option
+v-for="item in optOption"
+                    :key="item.value"
+                    :label="item.labal"
+                    :value="item.value"></el-option>
+                  </el-select>
+                </el-col>
+                <el-col :span="11">
+                  <el-input v-model="form[item.variable].value"></el-input>
+                </el-col>
+              </el-row>
+            </el-form-item>
+          </template>
+          <template v-if="item.ele == 'sponsor'">
+            <el-form-item :label="item.name+': '">
+              <div>
+                <template v-if="form[item.variable].sponsors && form[item.variable].sponsors.length > 0">
+                  <div class="selector" @click="showSelector = true">
+                    <el-tag
+                      v-for="tag in form[item.variable].sponsors"
+                      :key="tag.userId"
+                      @close="removeTag(item.variable,tag)"
+                      closable>
+                      {{tag.userName}}
+                    </el-tag>
+                  </div>
+                </template>
+                <template v-else>
+                  <el-input placeholder="请选择具体人员" @focus="showSelector = true"></el-input>
+                </template>
+              </div>
+            </el-form-item>
+          </template>
+        </div>
+        <el-form-item>
+          <el-button type="primary" @click.stop="addCondition">添加条件</el-button>
+          <span class="mar_l20">还有 {{able}} 个可用条件</span>
+        </el-form-item>
+      </el-form>
+      <div class="btn-group">
+        <el-button @click.stop="$emit('cancal')">取消</el-button>
+        <el-button type="primary" @click.stop="save">保存</el-button>
+      </div>
+      <el-dialog
+        title="选择条件"
+        :visible.sync="isShow"
+        width="30%"
+        :modal="false"
+        :before-close="handleClose">
+        <span>请选择用来区分审批流程的条件字段</span>
+        <el-checkbox-group v-model="condition"  class="mar_t20">
+          <el-checkbox :label="items.variable" v-for="(items,indexs) in configList" :key="indexs">{{items.name}}</el-checkbox>
+        </el-checkbox-group>
+        <span slot="footer" class="dialog-footer">
+          <el-button @click.stop="cancel">取 消</el-button>
+          <el-button type="primary" @click.stop="determine">确 定</el-button>
+        </span>
+      </el-dialog>
+      <MemberSelection  v-if="showSelector" title="选择发起人" :directClose="false" @close="showSelector = false;" :formData="selectData" :memberNo="memberNo" @save="checkMenber"></MemberSelection>
+    </div>
+  </div>
+</template>
+
+<script>
+import * as config from "./conditionConfig"
+import MemberSelection from "@/components/public/MemberSelection.vue"
+import _ from "lodash-es"
+export default {
+  name: "",
+  mixins: [],
+  extends: {},
+  components: {
+    MemberSelection
+  },
+  props: {
+    formData: {
+      type: Object,
+      default: () => {
+        return {}
+      }
+    },
+    title: {
+      type: String,
+      default: ""
+    }
+  },
+  data() {
+    return {
+      form: {},
+      optOption: [
+        { labal: "大于等于", value: ">=" },
+        { labal: "大于", value: ">" },
+        { labal: "小于等于", value: "<=" },
+        { labal: "小于", value: "<" }
+      ],
+      formConfig: [],
+      isShow: false,
+      configList: [],
+      condition: [],
+      oldCOndition: [],
+      isEdit: true,
+      conName: "",
+      applyType: "",
+      showSelector: false,
+      selectData: {
+        roleList: [],
+        userList: []
+      },
+      memberNo: []
+    }
+  },
+  watch: {
+    formData: {
+      immediate: true,
+      deep: true,
+      handler: function(newVal, oldVal) {
+        const keys = Object.keys(newVal)
+        if (keys.length > 0) {
+          const arr = []
+          const conArr = []
+          this.configList.forEach((item, index) => {
+            if (keys.indexOf(item.variable) > -1) {
+              arr.push(item)
+              conArr.push(item.variable)
+            }
+          })
+          if (keys.indexOf("userId") > -1) {
+            this.selectData.userList = newVal.userId.sponsors
+            this.memberNo = newVal.userId.sponsors.map(i => (i.userId))
+          } else {
+            this.selectData.userList = []
+            this.memberNo = []
+          }
+          this.formConfig = arr
+          this.form = newVal
+          this.condition = conArr
+        } else {
+          this.formConfig = []
+          this.form = {}
+          this.condition = []
+          this.selectData.userList = []
+          this.memberNo = []
+        }
+      }
+    },
+    title: {
+      immediate: true,
+      handler: function(newVal, oldVal) {
+        this.conName = newVal
+      }
+    }
+  },
+  computed: {
+    able() {
+      return this.configList.length - this.condition.length
+    }
+  },
+  methods: {
+    removeTag(key, item) {
+      this.form[key].sponsors = this.form[key].sponsors.filter(i => ((i.userName != item.userName && i.userId != item.userId)))
+      this.memberNo =  this.form[key].sponsors.map(i => (i.userId))
+      this.selectData.userList = this.form[key].value
+    },
+    validatePass(rule, value, callback) {
+      if (parseFloat(value.value) != "" && parseFloat(value.value) >= 0) {
+        callback();
+      } else {
+        callback("不能小于0");
+      }
+    },
+    save() {
+      this.$refs.form.validate((valid) => {
+        if (valid) {
+          const desc = []
+          for (const name in this.form) {
+            const flg = this.form[name].value == "" || this.form[name].value == [] || this.form[name].opt == ""
+            if (flg && name != "userId") {
+              this.$message.error("条件数据不能为空")
+              return
+            }
+            if (name == "userId" && this.form[name].sponsors.length < 1) {
+              this.$message.error("条件数据不能为空")
+              return
+            }
+            if (Array.isArray(this.form[name].value) &&　name != "userId") {
+              const data = this.configList.filter(i => (i.variable == name))[0].data
+              let descArr;
+              if (data) {
+                descArr = this.form[name].value.map(item => {
+                  return data.filter(j => (j.no == item))[0].name
+                })
+              }
+              desc.push(this.form[name].name + "属于：" + descArr.join("或"))
+            } else if (name == "userId") {
+              const descArr = this.form[name].sponsors.map(item => (item.userName))
+              desc.push(this.form[name].name + "属于：" + descArr.join("或"))
+            } else {
+              desc.push(`${this.form[name].name} ${this.form[name].opt} ${this.form[name].value}`)
+            }
+          }
+          this.$emit("save", { form: this.form, desc: desc })
+        }
+      });
+    },
+    changeName() {
+      if (this.conName) {
+        this.$emit("edit", this.conName)
+      } else {
+        this.conName = this.title
+      }
+      this.isEdit = true
+    },
+    handleClose() {
+      this.isShow = false
+    },
+    addCondition() {
+      this.oldCondition = this.condition
+      this.isShow = true
+    },
+    cancel() {
+      console.log("00")
+      this.condition = this.oldCondition
+      this.isShow = false
+    },
+    // 添加条件确认按钮
+    determine() {
+      const arr = [];
+      const _this = this
+      const formData = _.cloneDeep(_this.form)
+      _this.configList.forEach((item, index) => {
+        if (_this.condition.indexOf(item.variable) > -1) {
+          arr.push(item)
+          if (formData[item.variable] == undefined) {
+            const opt = item.ele == "input" ? "" : "="
+            const value = item.ele == "input" ? "" : []
+            formData[item.variable] = { opt: opt, value: value, dateType: "String", name: item.name, sponsors: [] }
+          }
+        } else {
+          if (formData[item.variable] !== undefined) {
+            delete formData[item.variable]
+          }
+        }
+      })
+      this.form = formData
+      this.formConfig = arr
+      this.isShow = false
+    },
+    // 设置条件
+    async setConfig() {
+      this.applyType = this.$route.query.type;
+      const configDefault = { ele: "sponsor", name: "发起人", variable: "userId" }
+      this.configList = config[this.applyType] ? await config[this.applyType](this) : []
+      this.configList.unshift(configDefault)
+    },
+    handlerChange(val, item) {
+      if (item.changeFuc != undefined) {
+        item.changeFuc(val, this)
+      }
+    },
+    checkMenber(data) {
+      console.log(data)
+      const sponsor = []
+      const memberNo = []
+      data.userList.forEach((item, index) => {
+        sponsor.push({ userId: item.memberNo, companyId: item.comNo, userName: item.name, roleName: item.roleName })
+        memberNo.push(item.memberNo)
+      })
+      this.memberNo = memberNo
+      this.form.userId.sponsors = sponsor
+      this.form = Object.assign({}, this.form)
+      this.showSelector = false
+    }
+  },
+  created() {
+    this.setConfig()
+  },
+  mounted() {}
+}
+</script>
+<style lang="scss" scoped>
+.wrapper-mask{
+  position: fixed;
+  top: 0;
+  left: 0;
+  right: 0;
+  bottom: 0;
+  background-color: rgba(0,0,0,0.4);
+  cursor: pointer;
+  z-index: 999;
+}
+.wrapper{
+  position: absolute;
+  right: 0;
+  top: 0;
+  bottom: 0;
+  overflow-y: auto;
+  width: 598px;
+  border: 1px solid #ccc;
+  background-color: #fff;
+  .title{
+    padding: 0 20px;
+    height: 60px;
+    border-bottom: 1px solid #DFE4EA;
+    display: flex;
+    align-items: center;
+    margin-bottom: 20px;
+    font-size: 18px;
+    .el-icon-edit{
+      cursor: pointer;
+      margin-left: 20px;
+    }
+  }
+  .form-box{
+    padding: 0 20px;
+  }
+  .btn-group{
+    position: absolute;
+    bottom: 50px;
+    left: 0;
+    right: 0;
+    text-align: center;
+  }
+}
+.mar_t20{
+  margin-top: 20px;
+}
+.mar_l20{
+  margin-left: 20px;
+}
+.selector{
+  padding: 0 4px;
+  border: 1px solid #d9d9d9;
+  line-height: 30px;
+  border-radius: 4px;
+  &:hover{
+    border: 1px solid #1890ff;
+  }
+}
+/deep/ .selector .el-tag{
+  height: 22px;
+  line-height: 20px;
+  padding: 0 0 0 8px;
+  font-size: 14px;
+  margin-right: 4px;
+}
+/deep/ .selector .el-tag .el-icon-close{
+  right: 2px;
+}
+</style>