qgb-process 0.1.52 → 0.1.53

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

@@ -1,582 +0,0 @@
-
-<template>
-    <el-drawer
-      :visible="nodeConditionModal"
-      direction="rtl"
-      :wrapperClosable="false"
-      :show-close="false"
-      :close-on-press-escape="false"
-      destroy-on-close
-      :append-to-body="true"
-      class="nodeConditionModal"
-    >
-        <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>
-
-            <div class="content">
-                <!-- 表单 -->
-                <el-form class="form-box" ref="form" :model="form" label-width="80px">
-                    <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-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>
-
-                    <template v-if="item.ele == 'spoSxy'">
-                        <el-form-item :label="item.name + ': '">
-                        <div>
-                            <template v-if=" form[item.variable].sponsors && form[item.variable].sponsors.length > 0">
-                            <div class="selector"  @click="showSxyL(item.variable)">
-                                <el-tag v-for="tag in form[item.variable].sponsors" :key="tag[item.variable]"  @close="removeTag(item.variable, tag)" closable>
-                                {{ tag.userName }}
-                                </el-tag>
-                            </div>
-                            </template>
-                            <template v-else>
-                            <el-input placeholder="请选择人员" @focus="showSxyL(item.variable)"></el-input>
-                            </template>
-                        </div>
-                        </el-form-item>
-                    </template>
-
-                    <template v-if="item.ele == 'radio'">
-                        <el-form-item :label="item.name + ': '">
-                        <div>
-                            <el-radio-group v-model="form[item.variable].value">
-                            <template v-for="(rad, ind) in item.data">
-                                <el-radio :label="rad.value" :key="ind">{{rad.name}}</el-radio>
-                            </template>
-                            </el-radio-group>
-                        </div>
-                        </el-form-item>
-                    </template>
-
-                    </div>
-                </el-form>
-
-                <!-- 添加条件 -->
-                <el-form class="userHandle">
-                    <el-form-item>
-                        <el-button type="primary" @click.stop="addCondition" size="medium">添加条件</el-button>
-                        <span class="mar_l20">还有 {{ able }} 个可用条件</span>
-                    </el-form-item>
-                </el-form>
-            </div>
-
-            <!-- 操作按钮 -->
-            <div class="btn-group">
-                <el-button @click.stop="nodeConditionHandler">取消</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" class="conditionSelect">
-                <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
-                v-if="showSxytor"
-                title="选择申请人"
-                :directClose="false"
-                @close="showSxytor = false"
-                :formData="selSxytData"
-                :memberNo="memSxyrNo"
-                @save="checkSxyber"
-            />
-
-        </div>
-    </el-drawer>
-</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 {
-      SxyData: "",
-      form: {},
-      optOption: [
-        { labal: "大于等于", value: ">=" },
-        { labal: "大于", value: ">" },
-        { labal: "小于等于", value: "<=" },
-        { labal: "小于", value: "<" }
-      ],
-      formConfig: [],
-      isShow: false,
-      configList: [],
-      condition: [],
-      oldCOndition: [],
-      isEdit: true,
-      conName: "",
-      applyType: "",
-      showSelector: false,
-      showSxytor: false,
-      selectData: {
-        roleList: [],
-        userList: []
-      },
-      selSxytData: {
-        roleList: [],
-        userList: []
-      },
-      memberNo: [],
-      memSxyrNo: [],
-
-      nodeConditionModal: false // 抽屉窗口是否展示
-    };
-  },
-  watch: {
-    showSelector: {
-      deep: true,
-      handler: function(val) {
-      }
-    },
-    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 = [];
-          }
-
-          if (keys.indexOf("proposer") > -1) {
-            this.selSxytData.userList = newVal.proposer.sponsors;
-            this.memSxyrNo = newVal.proposer.sponsors.map(i => i.userId);
-          } else {
-            this.selSxytData.userList = [];
-            this.memSxyrNo = [];
-          }
-          this.formConfig = arr;
-          this.form = newVal;
-
-          if (keys[0] == "documentType") {
-            newVal.documentType.value.map((value, index) => {
-              newVal.documentType.value[index] = Number(newVal.documentType.value[index])
-            })
-          }
-          this.condition = conArr;
-        } else {
-          this.formConfig = [];
-          this.form = {};
-          this.condition = [];
-          this.selectData.userList = [];
-          this.selSxytData.userList = [];
-          this.memberNo = [];
-          this.memSxyrNo = [];
-        }
-      }
-    },
-    title: {
-      immediate: true,
-      handler: function(newVal, oldVal) {
-        this.conName = newVal;
-      }
-    }
-  },
-  computed: {
-    able() {
-      return this.configList.length - this.condition.length;
-    }
-  },
-  methods: {
-    showSxyL(data) {
-      this.SxyData = data;
-      this.showSxytor = true;
-    },
-    // 弹出抽屉控制
-    nodeConditionHandler() {
-      this.nodeConditionModal = !this.nodeConditionModal
-    },
-    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.form[name].ele != "spoSxy") {
-              this.$message.error("条件数据不能为空");
-              return;
-            }
-            if ((this.form[name].ele == "spoSxy" || name == "userId") && this.form[name].sponsors.length < 1) {
-              this.$message.error("条件数据不能为空");
-              return;
-            }
-            if (this.form[name].ele == "radio" || this.form[name].ele == "checkbox") {
-              const data = this.configList.filter(i => i.variable == name)[0].data;
-              let descArr;
-              if (data && Array.isArray(this.form[name].value)) {
-                descArr = this.form[name].value.map(item => data.filter(j => j.no == item)[0].name)
-              } else if (data && !Array.isArray(this.form[name].value)) {
-                const satff = data.filter(j => j.value == this.form[name].value)[0].name;
-                descArr = [satff];
-              }
-              desc.push(this.form[name].name + "属于：" + descArr.join("或"));
-            } else if (this.form[name].ele == "spoSxy" || 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.$parent.submitCondition({ form: this.form, desc: desc, SxyData: this.SxyData })
-        }
-      });
-    },
-    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() {
-      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" ? "" : "=";
-            let value = item.ele == "input" ? "" : [];
-            if (item.ele == "radio") {
-              value = item.data && item.data.length > 0 ? item.data[0].value : "0";
-            }
-            formData[item.variable] = {
-              opt: opt,
-              value: value,
-              dateType: "String",
-              name: item.name,
-              sponsors: [],
-              ele: item.ele
-            };
-          }
-        } else {
-          if (formData[item.variable] !== undefined) {
-            delete formData[item.variable];
-          }
-        }
-        if (item.ele == "radio" && (!item.data || item.data.length == 0)) {
-          _this.$set(item, "data", [
-            { value: "1", name: "是" },
-            { value: "0", name: "否" }
-          ]);
-        }
-      });
-      this.form = formData;
-      this.formConfig = arr;
-      this.isShow = false;
-    },
-
-    // 设置条件
-    async setConfig() {
-      this.applyType = this.$route.query.type;
-      var configDefault = {
-        ele: "sponsor",
-        name: "发起人",
-        variable: "userId"
-      };
-
-      this.configList = config[this.applyType] ? await config[this.applyType](this) : [];
-
-      if (this.$route.query.type == "sealApproval" || this.$route.query.name == "用章申请" || this.$route.query.name == "用车申请" || this.$route.query.type == "carApproval") {
-        configDefault = {};
-      } else {
-        this.configList.unshift(configDefault);
-      }
-    },
-    handlerChange(val, item) {
-      if (item.changeFuc != undefined) {
-        item.changeFuc(val, this);
-      }
-    },
-    checkMenber(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.$set(this.selectData, "userList", data.userList);
-      this.showSelector = false;
-    },
-    checkSxyber(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.memSxyrNo = memberNo;
-      this.form[this.SxyData].sponsors = sponsor;
-      this.form = Object.assign({}, this.form);
-      this.showSxytor = false;
-    }
-  },
-  created() {
-    this.setConfig();
-  },
-  mounted() {}
-};
-</script>
-<style lang="scss" scoped>
-.nodeConditionModal /deep/.content {
-    overflow-y: scroll;
-    overflow-x: initial;
-}
-/deep/ .el-drawer__header{
-    display: none;
-}
-/deep/ .el-radio-group{
-    display: flex;
-    flex-direction: column;
-}
-
-/deep/ .el-radio-group .el-radio{
-    margin-bottom: 15px;
-}
-
-/deep/ .el-radio-group .el-radio:last-child{
-    margin-bottom: 0;
-}
-
-/deep/ :focus {
-    outline: 0;
-}
-/deep/ .el-drawer {
-    width: 25% !important;
-}
-
-/deep/ .el-form-item{
-    margin-bottom: 10px;
-}
-
-/deep/ .el-form-item__label{
-    text-align: left;
-}
-
-.content{
-    height: calc(80vh);
-    overflow-y: scroll;
-}
-
-.conditionSelect /deep/ .el-dialog__header{
-    padding: 15px 20px;
-    border-bottom: 1px solid #eaeaea;
-    
-}
-
-.conditionSelect /deep/ .el-dialog__header .el-dialog__title{
-  font-size: 16px;
-}
-
-.conditionSelect /deep/ .el-dialog__footer{
-    padding: 15px 20px;
-    border-top: 1px solid #eaeaea;
-}
-
-.userHandle{
-    padding: 0 25px;
-}
-
-.wrapper-mask {
-  background-color: rgba(0, 0, 0, 0.4);
-  cursor: pointer;
-  z-index: 1999;
-}
-
-.wrapper {
-  width: 100%;
-  .title {
-    padding-left: 25px;
-    height: 60px;
-    border-bottom: 1px solid #dfe4ea;
-    display: flex;
-    align-items: center;
-    margin-bottom: 20px;
-    font-size: 16px;
-    .el-icon-edit {
-      cursor: pointer;
-      margin-left: 10px;
-    }
-  }
-  .form-box {
-    padding: 0 25px 0 25px;
-    // width: 100%;
-  }
-  .btn-group {
-    position: absolute;
-    bottom: 0;
-    left: 0;
-    right: 0;
-    text-align: left;
-    border-top: 1px solid #eaeaea;
-    padding: 15px 0 15px 25px;
-    background-color: #fff;
-    z-index: 10000;
-  }
-}
-.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>