Source/plt-web/plt-web-ui/src/components/actions/base/startWorkFlow.vue

@@ -1,19 +1,23 @@
<template>
  <el-dialog v-dialogDrag
             append-to-body="true"
             :close-on-click-modal="false"
             :destroy-on-close="true"
             :visible.sync="visible"
             :width="width"
             append-to-body="true"
             class="avue-dialog"
             title="启动流程"
             top="0"
             style="margin-top: -10% !important;"
             @close="dialogClose">

    <el-form :model="saveParam" :rules="rules" class="demo-form-inline" label-position="left" label-width="auto">
    <el-divider content-position="left">流程信息</el-divider>

    <el-form ref="nodeForm" :model="saveParam" :rules="rules" class="demo-form-inline" label-position="left"
             label-width="auto">
      <el-form-item label="流程模板">
        <el-input v-model="saveParam.modelName" disabled placeholder="流程模板"></el-input>
        <el-select v-model="saveParam.processTemplate" filterable style="width: 100%;" @change="proTemSelect($event)">
          <el-option v-for="(item, key) in processTemplateList" :key="key" :label="item.value"
                     :value="item.value"></el-option>
        </el-select>
      </el-form-item>
      <el-form-item label="流程名称" prop="processName">
        <el-input v-model="saveParam.processName" placeholder="流程名称">
@@ -25,29 +29,33 @@
      </el-form-item>
    </el-form>

    <el-divider></el-divider>
<!--    <div class="btns-icon">-->
<!--      <el-button circle icon="el-icon-star-off" @click="handleCollect"></el-button>-->
<!--    </div>-->
    <el-form :model="collectParam" class="demo-form-inline" label-position="left" label-width="auto">
      <el-form-item v-for="(item, index) in initFrom" :key="index" :label="item.taskName">
        <el-select v-model="collectParam.flowTaskUsers[index]['userId']" :placeholder="item.taskName" filterable
                   style="width: 100%;" @change="handleSelect($event, index)">
          <el-option v-for="(key, keyi) in typeName" :key="keyi" :label="key.userNames"
                     :value="key.userId"></el-option>
        </el-select>
    <el-divider content-position="left">流程节点</el-divider>


    <el-form :key="formKey" v-loading="nodeLoading" :model="collectParam" :rules="nodeRules" class="demo-form-inline"
             label-position="left"
             label-width="auto">
      <el-form-item v-for="(item, index) in initFrom" :key="index" :label="item.name" prop="node">
        <div @click="nodeChange(item)">
          <el-input v-model="collectParam[item.name+'name']" readonly="true" suffix-icon="el-icon-zoom-in"></el-input>
        </div>
      </el-form-item>
    </el-form>
    <div slot="footer" class="dialog-footer">
      <el-button @click="handleCancel">取 消</el-button>
      <el-button type="primary" @click="handleConfirm">确 定</el-button>
    </div>

    <div slot="footer" class="dialog-footer">
      <el-button size="small" @click="handleCancel">取 消</el-button>
      <el-button size="small" type="primary" @click="handleConfirm">确 定</el-button>
    </div>
    <transfer ref="transfer" :left-role-data="leftRoleData" :right-role-data="rightRoleData"
              :title="`为【${this.nodeName}】选取值`" :transferTitle="transferTitle" :bottomValue="bottomValue"
              @transferSend="roleSendHandler"></transfer>
  </el-dialog>

</template>

<script>
import {validatenull} from "@/util/validate";
import {getTemplateByType, getAllProcessNode, startProcess} from "@/api/base/startWork/index"

export default {
  name: "startWorkFlow",
@@ -70,34 +78,67 @@
  data() {
    return {
      visible: false,
      saveParam: {}, // 对象包含 {modelName流程模板(由接口返回当前流程模板) , processName流程名称（为当前用户+'启动流程'+当前分类） , processDesc流程描述 }
      saveParam: {
        processName: ''
      }, // 对象包含 {processTemplate流程模板(由接口返回当前流程模板) , processName流程名称（为当前用户+'启动流程'+当前分类） , processDesc流程描述 }
      processTemplateList: [], // 流程模板下拉数组
      initFrom: [],  // 当前流程节点循环数组
      collectParam: {}, // 流程节点下拉框双向绑定属性
      typeName: [], // 流程节点option循环选项
      nodeLoading: false,
      rules: {
        processName: [
          { required: true, message: '流程名称不能为空', trigger: 'blur' },
          { min: 3, max: 50, message: '长度在 3 到 50 个字符', trigger: 'blur' }
          {required: true, message: '流程名称不能为空', trigger: 'blur'},
          {min: 3, max: 50, message: '长度在 3 到 50 个字符', trigger: 'blur'}
        ]
      }
      },
      nodeRules: {
        node: [
          {required: true, message: '选择内容不能为空', trigger: 'change'},
        ]
      },
      bottomValue:'',
      leftRoleData: [],
      rightRoleData: [],
      transferTitle: [],
      nodeName: '', // 当前节点名称
      userVo: [
        {
          "children": [],
          "id": "zkjs",
          "leaf": true,
          "name": "总会计师",
          "oid": "1241AC3B-26AF-9B86-7870-53DA8D78A742",
          "secret": -1,
          "secretText": "",
          "type": "user"
        },
        {
          "children": [],
          "id": "1",
          "leaf": true,
          "name": "测试",
          "oid": "921D71F8-C2BB-3BCE-B744-AD0C3812F41A",
          "secret": -1,
          "secretText": "",
          "type": "user"
        },
        {
          "children": [],
          "id": "5",
          "leaf": true,
          "name": "总会计师",
          "oid": "34ddb5a8-ab95-4070-b72f-abaaa48cf8b1",
          "secret": -1,
          "secretText": "",
          "type": "user"
        }
      ],
      formKey: 0,

    }
  },
  watch: {
    users: {
      handler(val) {
        this.collectParam.flowTaskUsers = val
      },
      deep: true,
      immediate: true
    },
    parameter: {
      handler(newval, oldval) {
        this.saveParam = Object.assign({processName: '', processDesc: '' , }, newval);
      },
      deep: true,
      immediate: true
    }
  },
  watch: {},
  computed: {
    fullscreen() {
      if (this.paramVOS.width || this.paramVOS.height) {
@@ -119,47 +160,165 @@
      }
    },
  },
  created() {
    // this.modelNameChange();
    this.getWorkByType();
  },
  mounted() {
    this.modelNameChange();
  },
  methods: {
    // 获取流程模板信息
    getWorkByType() {
      let params = {
        type: '文档审签流程',
        filterTemplate: "文档审签流程"
      }
      getTemplateByType(params).then(res => {
        const data = res.data.data;
        const userInfo = JSON.parse(localStorage.getItem('saber-userInfo'));

        this.processTemplateList = data;
        this.saveParam.processTemplate = data[0].value;
        this.saveParam.processName = this.paramVOS.processName || userInfo.content.userName + '-' + data[0].value; // 对流程模板 流程名称赋默认值

        this.getProcessNode(data[0].attributes.oid); // 首次进入调用第一个模板的所有节点
      }).catch(err => {
        this.$message.error(err);
      })
    },

    // 请求流程节点
    getProcessNode(oid) {
      let params = {
        processOid: oid,
        maxSecret: -1
      }
      getAllProcessNode(params).then(res => {
        const nodes = res.data.data;
        this.initFrom = nodes;
        nodes.forEach(item => {
          // let name = item.processUserVO[0].children.map(name => name.name).join(',');
          // let ids = item.processUserVO[0].children.map(id => id.id).join(',');
          let name = this.userVo.map(name => name.name).join(',');
          let ids = this.userVo.map(id => id.id).join(',');
          this.bottomValue = name;
          this.collectParam[item.name + 'name'] = name;
          this.collectParam[item.name] = ids;
        })
        this.nodeLoading = false;
      }).catch(err => {
        this.$message.error(err);
      })
    },

    // 关闭弹窗
    dialogClose() {
      this.visible = false;
    },

    handleSelect() {

    },

    handleCollect() {

    },

    handleCancel() {
      this.dialogClose();
    },

    handleConfirm() {
      console.log(this.paramVOS)
      const oids = this.dataStore.map(item => item.oid).join(',');
      let params = {
        deployid:this.processTemplateList[0].attributes.deploymentId,
        title:this.saveParam.processName,
        description:this.saveParam.processDesc,
        btmType:this.processTemplateList[0].attributes.taskType,
        uiType:this.processTemplateList[0].attributes.taskType,
        oids:oids, // 当前数据oid，多个用,分隔
        detailInfoUrl:this.paramVOS.detailInfoUrl || '', // 用户配置属性
        resetStatus:'Editing',
        nodeUsers:{
          ...this.collectParam
        }
      }
      startProcess(params).then(res => {
        if(res.data.obj.status === 200){
          this.dialogClose();
          this.$message.success('启动流程成功');
        }else {
          this.$message.error(res.data.obj.error);
        }
      }).catch(err => {
        this.$message.error(err);
      })
    },

  //  流程名称初始化绑定
    modelNameChange(){
      var userInfo = JSON.parse(localStorage.getItem('saber-userInfo'));
    // 切换流程模板
    proTemSelect(event) {
      this.nodeLoading = true;
      this.getProcessNode(event);
      this.$refs.nodeForm.clearValidate();
    },

      if (this.paramVOS && this.paramVOS.modelName) {
        this.saveParam.modelName = this.paramVOS.modelName;
      } else if (userInfo.content && userInfo.content.userName) {
        this.saveParam.modelName = userInfo.content.userName + '[启动流程]';
      } else {
        this.saveParam.modelName = '';
      }
    }
    // 节点点击事件
    nodeChange(item) {
      this.nodeName = item.name;
      this.transferTitle = [`[${item.name}]未选用户`, `[${item.name}]已选用户`]
      this.leftRoleData = [
        {
          "children": [],
          "id": "zkjs",
          "leaf": true,
          "name": "总会计师",
          "oid": "1241AC3B-26AF-9B86-7870-53DA8D78A742",
          "secret": -1,
          "secretText": "",
          "type": "user"
        },
        {
          "children": [],
          "id": "1",
          "leaf": true,
          "name": "测试",
          "oid": "921D71F8-C2BB-3BCE-B744-AD0C3812F41A",
          "secret": -1,
          "secretText": "",
          "type": "user"
        },
        {
          "children": [],
          "id": "5",
          "leaf": true,
          "name": "总会计师",
          "oid": "34ddb5a8-ab95-4070-b72f-abaaa48cf8b1",
          "secret": -1,
          "secretText": "",
          "type": "user"
        }
      ];
      this.rightRoleData = this.userVo.map(item => item.oid);
      this.$refs.transfer.visible = true;
    },

    // 穿梭框回填
    roleSendHandler(data) {
      let filterData;
      filterData = this.userVo.filter(item => {
        return data.includes(item.oid);
      });
      const filterName = filterData.map(item => item.name).join(',');
      this.$set(this.collectParam, this.nodeName + 'name', filterName);
      this.formKey += 1; // 刷新表单 因为双向绑定的this.collectParam[this.nodeName + 'name']是动态值 vue无法检测到值的更新
    },
  }
}
</script>

<style scoped lang="scss">
<style lang="scss" scoped>
.el-form-item {
  margin-bottom: 25px;
}

.el-divider--horizontal {
  margin-bottom: 20px !important;
}

.el-divider__text.is-left {
  color: #8b8989 !important;
}
</style>