feat : 前置流程组件
This commit is contained in:
165
src/components/SelectPreProcess.vue
Normal file
165
src/components/SelectPreProcess.vue
Normal file
@@ -0,0 +1,165 @@
|
||||
<template>
|
||||
<div style="display: flex;align-items: center">
|
||||
<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>
|
||||
Reference in New Issue
Block a user