流程列表改为分页

xiangpei

2025-02-11 5bfa6203e47bde993d19e8e606d27a8c40d5a0f5

流程列表改为分页

 src/api/projectProcess/processConfigInfo.js

@@ -18,6 +18,14 @@
  })
}

export const getProcessConfigInfoPage = (params) => {
  return request({
    url: "/process-config-info/page",
    method: "GET",
    params: params
  })
}

// 保存流程类型配置信息表
export const saveProcessConfigInfo = (data) => {
  return request({

 src/views/projectProcess/components/RunProcess.vue

@@ -3,7 +3,7 @@
    <el-dialog
      :title="`流程启动：` + projectInfo.projectName"
      :visible.sync="show"
      width="950px"
      width="1050px"
      :destroy-on-close="true"
      :close-on-click-modal="false"
      :before-close="handleClose">
@@ -14,7 +14,17 @@
          <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,6 +37,8 @@
          </el-table-column>
          <el-table-column
            prop="name"
            :show-overflow-tooltip="true"
            min-width="200"
            label="流程名称"
          >
          </el-table-column>
@@ -77,6 +89,14 @@
            </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" :disabled="(nowProcessInsId !== '') || (selectProcessDefId === '')">启动流程</el-button>
@@ -88,6 +108,7 @@

<script>
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'],
@@ -101,10 +122,10 @@
      required: true,  // 项目id、名称
      type: Object
    },
    processList: {  // 流程列表
      required: true,
      type: Array
    },
    // processList: {  // 流程列表
    //   required: true,
    //   type: Array
    // },
    nowProcessDefId: {  // 当前项目绑定的定义id
      required: true,
      type: String
@@ -122,18 +143,42 @@
        this.setSelect(this.nowProcessDefId)
      },
      deep: true
    },
    processList: {
      handler(newVal, oldVal) {
        this.setSelect(this.nowProcessDefId)
      },
      deep: true
    }
  },
  data() {
    return {
      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) => {

 src/views/projectProcess/index.vue

@@ -417,9 +417,6 @@
    },
    // 打开流程页面
    openOpProcess(row) {
      // 拿到流程列表 TODO 根据项目类型做筛选
      getProcessConfigInfoList().then(response => {
        this.processList = response.data;
        this.nowProcessDefId = row.processDefId ? row.processDefId : '';
        this.nowProcessInsId = row.processInsId ? row.processInsId : '';
        // // 防止：id没变不触发监听
@@ -428,7 +425,11 @@
        this.projectRunFrom.projectName = row.projectName;

        this.showRunProcess = true;
      });
      // 拿到流程列表 TODO 根据项目类型做筛选
      // getProcessConfigInfoList().then(response => {
      //   this.processList = response.data;
      //
      // });
    },
    // 重置排序的方法
    handleResetSort() {