cmc-oa/oa-ui/src/views/flowable/form/inProgress/changeData.vue

<template>
  <div class="mt20" style="width:99%">
    <div class="nav-btn" v-if="taskName != ''">
      <div>
        <el-button class="mb20" type="primary" plain size="mini" icon="el-icon-plus" @click="addChange">变更记录</el-button>
      </div>
      <div>
        <el-button icon="el-icon-refresh" circle size="mini" @click="getList()"></el-button>
      </div>
    </div>
    <el-table :data="projectChangeList">
      <el-table-column type="index" width="55" align="center" label="序号" />
      <el-table-column label="变更id" align="center" prop="changeId" />
      <el-table-column label="项目id" align="center" prop="projectId" />
      <el-table-column label="变更内容" align="center" prop="content" />
      <el-table-column label="登记人" align="center" prop="registrant" />
      <el-table-column label="登记时间" align="center" prop="registerTime" width="180">
        <template slot-scope="scope">
          <span>{{ parseTime(scope.row.registerTime, '{y}-{m}-{d}') }}</span>
        </template>
      </el-table-column>
      <el-table-column label="操作" fixed="right" header-align="center">
        <template slot-scope="scope">
          <el-button icon="el-icon-view" type="text" size="mini" @click="handleLook(scope.row)">查看明细</el-button>
        </template>
      </el-table-column>
    </el-table>

    <el-dialog title=" 变更记录" :visible.sync="open" append-to-body width="65%">
      <change-form :taskForm="openObj" :taskName="''" :isFlow="false"></change-form>
    </el-dialog>
  </div>
</template>

<script>
import { listProjectChange } from "@/api/oa/project/projectChange";
import { listDefinition } from "@/api/flowable/definition";
import { getNextFlowNodeByStart } from "@/api/flowable/todo";
import { definitionStart, flowXmlAndNode } from "@/api/flowable/definition";
import { todoList } from "@/api/flowable/todo";
import changeForm from '../changeForm.vue';
import { getProject } from "@/api/oa/project/project";
import { MessageBox } from 'element-ui'
import { Snowflake } from '@/utils/snowFlake.js'

export default {
  components: { changeForm },
  props: {
    taskForm: {
      type: Object,
      required: true
    },
    taskName: {
      type: String,
      default: ''
    }
  },
  data() {
    return {
      // 是否显示弹出层
      open: false,
      openObj: {},
      // 表单参数
      form: {},
      definitionList: [],
      projectChangeList: [],
    };
  },
  mounted() {
    this.getList();
    this.listDefinition();
  },
  methods: {
    /** 查询cmc项目变更列表 */
    getList() {
      listProjectChange({ pageSize: 9999, projectId: this.taskForm.formId }).then(response => {
        this.projectChangeList = response.rows;
      });
    },
    listDefinition() {
      listDefinition({
        pageNum: 1,
        pageSize: 9999,
        name: '项目变更'
      }).then(response => {
        this.definitionList = response.data.records;
      });
    },
    handleLook(row) {
      this.form = row
      this.openObj.formId = row.changeId
      getProject(row.projectId).then(res => {
        if (res.data)
          this.$set(this.form, 'projectName', res.data.projectNumber + '-' + res.data.projectName)
        this.open = true
      })
    },
    addChange() {
      let row = this.definitionList[0];
      let formId = new Snowflake(1n, 1n, 0n).nextId().toString();
      getNextFlowNodeByStart({ deploymentId: row.deploymentId, variables: { formId: formId } }).then(res => {
        let data = res.data
        const variables = {};
        const formData = {};
        formData.formId = formId
        if (row.id) {
          MessageBox.confirm('是否发起项目变更？', '系统提示', { confirmButtonText: '确认', cancelButtonText: '取消', type: 'warning' }).then(() => {
            variables.variables = formData;
            // 启动流程并将表单数据加入流程变量
            definitionStart(row.id, JSON.stringify(variables)).then(res => {
              this.$modal.msgSuccess(res.msg);
              let procInstanceId = res.data;
              todoList({
                pageNum: 1,
                pageSize: 99999999,
                processInsId: procInstanceId
              }).then(toDoRes => {
                let records = toDoRes.data.records;
                if (records.length == 1) {
                  records = records[0]
                }
                this.$router.push({
                  path: '/applyForm/change',
                  query: {
                    procInsId: records.procInsId,
                    executionId: records.executionId,
                    deployId: records.deployId,
                    taskId: records.taskId,
                    taskName: records.taskName,
                    startUser: records.startUserName + '--' + records.startDeptName,
                    formId: formData.formId,
                    procDefName: records.procDefName,
                    projectId: this.taskForm.formId
                  }
                })
              })
            })
          })
        }
      })
    },
  }
};
</script>
<style lang="scss" scoped>
.nav-btn {
  display: flex;
  justify-content: space-between;
}

.custom-table {
  display: block;
  /* 确保表格不会超出容器 */
  overflow-x: auto;
  /* 横向滚动条 */
}
</style>