mosr-web/src/components/SelectPreProcess.vue

<template>
 <div style="display: flex;align-items: center;flex-wrap: wrap;">
   <el-button color="#DED0B2" @click="handleShowPreTable" style="margin-right: 10px">
     {{
       localFormData.preProcess && localFormData.preProcess.length > 0 ? '更改' : '请选择前置流程'
     }}
   </el-button>
   <div v-for="(item,index) in localFormData.preProcess" :key="item.requestId">
     <a :href="item.baseUrl" target="_blank"
        style="color: #2a99ff;cursor: pointer">{{ item.requestName }}<span v-if="index != localFormData.preProcess.length -1">，</span>
     </a>
   </div>
 </div>
  <el-dialog v-if="showPreTable" title="前置流程" v-model="showPreTable" width="80%">
    <el-form :model="preProcessForm" inline @submit.prevent="getPreProcessList">
      <el-form-item label="请求名称">
        <el-input v-model="preProcessForm.requestName" placeholder="请输入请求名称" clearable>
        </el-input>
      </el-form-item>
      <el-form-item>
        <el-button color="#DED0B2" @click="getPreProcessList">搜索</el-button>
        <el-button @click="handleReset">重置</el-button>
      </el-form-item>
    </el-form>
    <el-table :data="preProcessList" v-loading="loading"
              @select="handleSelect" @select-all="handleSelect" row-key="requestId" ref="preProcessTable">
      <el-table-column type="selection" width="55" :reserve-selection="true"/>
      <el-table-column prop="requestId" label="请求id"></el-table-column>
      <el-table-column prop="requestName" label="请求名称"></el-table-column>
      <el-table-column prop="lastOperatorName" label="最后操作人名称"></el-table-column>
      <el-table-column prop="lastOperateTime" label="最后操作时间"></el-table-column>
      <el-table-column prop="currentNodeName" label="当前节点"></el-table-column>
      <el-table-column prop="creatorName" label="创建人"></el-table-column>
      <el-table-column prop="createTime" label="创建时间"></el-table-column>
      <el-table-column label="操作" align="center">
        <template #default="scope">
          <a :href="scope.row.baseUrl" target="_blank" style="color: #2a99ff;margin-left: 10px">查看流程</a>
        </template>
      </el-table-column>
    </el-table>
    <paging :current-page="pageInfo.pageNum" :page-size="pageInfo.pageSize" :page-sizes="[10, 20, 30, 40,50]"
            :total="total" @changeSize="handleSizeChange" @goPage="handleCurrentChange"/>
    <div class="oper">
      <el-button color="#DED0B2" @click="choosePreProcess">确定</el-button>
      <el-button @click="handleCancel">取消</el-button>
    </div>
  </el-dialog>

</template>

<script setup>
import {
  getPreProcess
} from "@/api/project-manage";
import Paging from "@/components/pagination/index.vue";
const props = defineProps({
  formData: {
    type: Object,
    default: {}
  },
})
const loading = ref(false)
//暂存数据
const currentList = ref([])
const showPreTable = ref(false)
const selectRows = ref([])
const preProcessList = ref([])
const total = ref(0)
const localFormData = ref({
  projectPersonIds: [],
  projectChargePerson: null,
  preProcess: [
    // {
    //   requestId: null,
    //   requestName: '',
    //   baseUrl: ''
    // }
  ]
})
const preProcessForm = reactive({
  requestName: ''
})
const pageInfo = reactive({
  pageNum: 1,
  pageSize: 10,
})
const handleReset = () => {
  preProcessForm.requestName = ''
  getPreProcessList()
}
const handleSelect = async (selection) => {
  selectRows.value = selection
}
const handleShowPreTable = () => {
  showPreTable.value = true
  getPreProcessList()
}
const handleCancel = () => {
  showPreTable.value = false
}

const choosePreProcess = () => {
  let preProcessObj = {}
  let preProcessArray = []
  selectRows.value.forEach((item) => {
    preProcessObj = {
      requestId: item.requestId,
      requestName: item.requestName,
      baseUrl: item.baseUrl
    }
    preProcessArray.push(preProcessObj)
  })
  localFormData.value.preProcess = preProcessArray
  showPreTable.value = false
  localStorage.setItem('preProcess', JSON.stringify(preProcessArray))
}

const getPreProcessList = () => {
  console.log('getPreProcessList')
  loading.value = true
  getPreProcess().then(res => {
    loading.value = false
    let searchArray = []
    let regexPattern = ("%" + preProcessForm.requestName + "%").replace(/%/g, '.*').replace(/_/g, '.');
    let regex = new RegExp('^' + regexPattern + '$');
    res.data.filter((item) => {
      if (regex.test(item.requestName)) {
        searchArray.push(item)
      }
    })
    // res.data.forEach((item) => {
    //   localFormData.value.preProcess.forEach((item1) => {
    //     if (item.requestId == item1.requestId) {
    //       preProcessTable.value.toggleRowSelection(item)
    //     }
    //   })
    // })
    total.value = searchArray.length
    currentList.value = searchArray
    preProcessList.value = currentList.value.slice(0, 10)
  })
}
//切换每页显示条数
const handleSizeChange = (val) => {
  pageInfo.pageSize = val;
  preProcessList.value = currentList.value.slice((pageInfo.pageNum - 1) * val, pageInfo.pageNum * val)
};

//点击页码进行分页功能
const handleCurrentChange = (val) => {
  pageInfo.pageNum = val;
  preProcessList.value = currentList.value.slice((val - 1) * pageInfo.pageSize, val * pageInfo.pageSize)
};
watchEffect(() => {
 return  Object.keys(props.formData).length && (localFormData.value = props.formData)
})
</script>

<style scoped>
.oper {
  margin-top: 20px;
  display: flex;
  justify-content: flex-end;
}
</style>