luohairen
2024-11-27 f67241a72e48a90cbcca28acbc2ce9aaffdfa43d
src/views/projectProcess/components/RunProcess.vue
@@ -1,15 +1,16 @@
<template>
  <div>
    <el-dialog
      title="流程启动"
      :title="`流程启动:` + projectInfo.projectName"
      :visible.sync="show"
      width="750px"
      width="950px"
      :destroy-on-close="true"
      :close-on-click-modal="false"
      :before-close="handleClose">
      <div>
        <div style="display: flex; flex-direction: row; justify-content: center; align-items: center;font-size: 24px">
          <div>当前流程:</div>
          <div v-if="nowProcessId">{{nowProcessName}}</div>
          <div v-if="nowProcessId">{{selectProcessName}}</div>
          <div v-else>未绑定流程</div>
        </div>
      </div>
@@ -34,10 +35,46 @@
            label="流程类型"
          >
          </el-table-column>
          <el-table-column label="项目类型" >
            <template slot-scope="scope">
              <dict-tag
                :options="dict.type.sys_project_type"
                :value="scope.row.projectType"
              >
              </dict-tag>
            </template>
          </el-table-column>
          <el-table-column label="资金类型" >
            <template slot-scope="scope">
              <dict-tag
                :options="dict.type.sys_funding_type"
                :value="scope.row.fundType"
              >
              </dict-tag>
            </template>
          </el-table-column>
          <el-table-column label="投资类别" >
            <template slot-scope="scope">
              <dict-tag
                :options="dict.type.sys_investment_type"
                :value="scope.row.investType"
              >
              </dict-tag>
            </template>
          </el-table-column>
          <el-table-column label="重点分类" >
            <template slot-scope="scope">
              <dict-tag
                :options="dict.type.sys_key_categories"
                :value="scope.row.importanceType"
              >
              </dict-tag>
            </template>
          </el-table-column>
        </el-table>
      </div>
      <span slot="footer" class="dialog-footer">
        <el-button @click="startProcess">启动</el-button>
        <el-button type="danger" @click="startProcess">启动</el-button>
        <el-button type="primary" @click="changeProcess">变更</el-button>
      </span>
    </el-dialog>
@@ -45,57 +82,68 @@
</template>
<script>
import {projectSetProcess} from "@/api/projectProcess/projectProcess";
export default {
  dicts: ['sys_project_type', 'sys_funding_type', 'sys_investment_type', 'sys_key_categories'],
  name: "RunProcess",
  props: {
    show: {
      require: true,
      required: true,
      type: Boolean
    },
    projectId: {
      require: true,  // 项目id
      type: Number
    projectInfo: {
      required: true,  // 项目id、名称
      type: Object
    },
    processList: {  // 流程列表
      require: true,
      required: true,
      type: Array
    },
    nowProcessId: {  // 当前项目绑定的流程id
      require: true,
      type: String
    },
    nowProcessName: {
      require: true,
      required: true,
      type: String
    }
  },
  watch: {
    // 监听回显值
    nowProcessId(newVal, oldVal) {
      this.processList.forEach((item,index) => {
        if(item.id == newVal){
          this.$nextTick(() => {
            this.$refs.myTable.toggleRowSelection(item);
          })
        }
      })
    projectInfo: {
      handler(newVal, oldVal) {
        console.log("传入值:", newVal, this.processList)
        this.setSelect(this.nowProcessId)
      },
      deep: true
    }
  },
  data() {
    return {
      selectProcessId: '',  // 组件内部选中的流程id
      selectProcessName: '',  // 组件内部选中的流程id
    }
  },
  methods: {
    setSelect(value) {
      console.log("调用值:", value)
      this.processList.forEach((item,index) => {
        console.log(item.id, value, item.id === value)
        if(item.id === value){
          this.selectProcessName = item.name
          this.$nextTick(() => {
            this.$refs.myTable.toggleRowSelection(item);
          })
        }
      })
    },
    // 实现el-table单选
    handleSelectionChange(val) {
      console.log(val, "选中")
      if (val.length > 1) {
        this.$refs.myTable.clearSelection();
        this.$refs.myTable.toggleRowSelection(val.pop());
        this.$refs.myTable.toggleRowSelection(val[val.length - 1]);
      }
      if(val.length != 0){
        this.selectProcessId = val[val.length - 1].id;
        console.log("选中id:", this.selectProcessId)
      }
    },
    // 启动流程
@@ -104,9 +152,22 @@
    },
    // 变更流程
    changeProcess() {
      if (!this.selectProcessId) {
        this.$message.error("选则一个流程后才能变更")
        return
      }
      const data = {
        projectId: this.projectInfo.projectId,
        flowableProcessId: this.selectProcessId
      }
      projectSetProcess(data).then(res => {
        this.$message.success("变更成功")
        this.handleClose()
      })
    },
    handleClose() {
      this.selectProcessId = ""
      this.selectProcessName = ""
      this.$emit("close")
    }
  }