项目中心分页优化

xiangpei

2025-02-25 9ada813d51a0a7da7a22143af4b548a44472f0d6

 src/views/projectProcess/components/RunProcess.vue

@@ -3,18 +3,28 @@
    <el-dialog
      :title="`流程启动：` + projectInfo.projectName"
      :visible.sync="show"
      width="950px"
      width="1050px"
      :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="nowProcessDefId">{{selectProcessName}}<span v-if="nowProcessInsId" style="color: red">（运行中）</span></div>
          <div v-else>未绑定流程</div>
        </div>
      </div>
      <div style="margin-top: 20px">
      <div style="margin-top: 10px">
        <el-form :inline="true" :model="queryParams" size="small">
          <el-form-item label="流程名称">
            <el-input placeholder="流程名称搜索" clearable @clear="search" v-model="queryParams.name"></el-input>
          </el-form-item>
          <el-form-item>
            <el-button type="primary" @click="search">搜索</el-button>
          </el-form-item>
        </el-form>
      </div>
      <div style="margin-top: 0px">
        <el-table
          ref="myTable"
          :data="processList"
@@ -27,7 +37,14 @@
          </el-table-column>
          <el-table-column
            prop="name"
            :show-overflow-tooltip="true"
            min-width="200"
            label="流程名称"
          >
          </el-table-column>
          <el-table-column
            prop="version"
            label="流程版本"
          >
          </el-table-column>
          <el-table-column
@@ -72,17 +89,26 @@
            </template>
          </el-table-column>
        </el-table>
        <pagination
          v-show="total>0"
          :total="total"
          :page.sync="queryParams.currentPage"
          :limit.sync="queryParams.pageSize"
          :page-sizes="[8]"
          @pagination="getList"
        />
      </div>
      <span slot="footer" class="dialog-footer">
        <el-button type="danger" @click="startProcess">启动</el-button>
        <el-button type="primary" @click="changeProcess">变更</el-button>
        <el-button type="danger" v-loading="startLoading" @click="startProcess" :disabled="(nowProcessInsId !== '') || (selectProcessDefId === '')">启动流程</el-button>
        <el-button type="primary" v-loading="setLoading" @click="changeProcess" :disabled="((nowProcessDefId === selectProcessDefId) && nowProcessInsId !== '') || selectProcessDefId === '' || nowProcessInsId === ''">流程变更</el-button>
      </span>
    </el-dialog>
  </div>
</template>

<script>
import {projectSetProcess} from "@/api/projectProcess/projectProcess";
import {projectSetProcess, startProcess} from "@/api/projectProcess/projectProcess";
import {getProcessConfigInfoPage} from "@/api/projectProcess/processConfigInfo";

export default {
  dicts: ['sys_project_type', 'sys_funding_type', 'sys_investment_type', 'sys_key_categories'],
@@ -96,72 +122,114 @@
      required: true,  // 项目id、名称
      type: Object
    },
    processList: {  // 流程列表
      required: true,
      type: Array
    },
    nowProcessId: {  // 当前项目绑定的流程id
    nowProcessDefId: {  // 当前项目绑定的定义id
      required: true,
      type: String
    },
    nowProcessName: {
    nowProcessInsId: {  // 当前项目绑定的实例id
      required: true,
      type: String
    }
    },
  },
  watch: {
    // 监听回显值
    nowProcessId(newVal, oldVal) {
      console.log("传入值：", newVal, this.processList)
    projectInfo: {
      handler(newVal, oldVal) {
        console.log("传入值：", newVal, this.processList)
        this.setSelect(this.nowProcessDefId)
      },
      deep: true
    },
    processList: {
      handler(newVal, oldVal) {
        this.setSelect(this.nowProcessDefId)
      },
      deep: true
    }
  },
  data() {
    return {
      startLoading: false,
      setLoading: false,
      processList: [],
      total:0,
      queryParams: {
        pageSize: 8,
        currentPage: 1,
        name: ""
      },
      selectProcessDefId: '',  // 组件内部选中的流程id
      selectProcessName: '',  // 组件内部选中的流程id
    }
  },
  created() {
    this.getList()
    console.log(this.nowProcessInsId, typeof this.nowProcessInsId, "wwwww")
  },
  methods: {
    search() {
      this.queryParams.currentPage = 1
      this.getList()
    },
    getList() {
      getProcessConfigInfoPage(this.queryParams).then(res => {
        this.processList = res.data;
        this.total = res.total
      });
    },
    setSelect(value) {
      console.log("调用值：", value)
      this.processList.forEach((item,index) => {
        console.log(item.id, newVal, item.id === newVal)
        if(item.id === newVal){
          console.log("wwwwwww")
          this.selectProcessId = newVal
        console.log(item.id, value, item.id === value)
        if(item.id === value){
          this.selectProcessName = item.name
          this.$nextTick(() => {
            this.$refs.myTable.toggleRowSelection(item);
          })
        }
      })
    }
  },
  data() {
    return {
      selectProcessId: '',  // 组件内部选中的流程id
    }
  },
  methods: {
    },
    // 实现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;
        this.selectProcessDefId = val[val.length - 1].id;
        console.log("选中id：", this.selectProcessDefId)
      }
    },
    // 启动流程
    startProcess() {

      this.startLoading = true
      startProcess(this.projectInfo.projectId, this.selectProcessDefId).then(res => {
        this.$message.success(res.msg);
        this.startLoading = false
        this.handleClose()
      })
    },
    // 变更流程
    changeProcess() {
      if (!this.selectProcessId) {
      if (!this.selectProcessDefId) {
        this.$message.error("选则一个流程后才能变更")
        return
      }
      const data = {
        projectId: this.projectInfo.projectId,
        flowableProcessId: this.selectProcessId
        processDefId: this.selectProcessDefId
      }
      this.setLoading = true
      projectSetProcess(data).then(res => {
        this.$message.success("变更成功")
        this.setLoading = false
        this.handleClose()
      })
    },
    handleClose() {
      this.selectProcessDefId = ""
      this.selectProcessName = ""
      this.$emit("close")
    }
  }