Files
mosr-web/src/views/project-demand/requirement/index.vue

281 lines
7.4 KiB
Vue

<template>
<el-form ref="formRef" :model="selectForm" class="search-form select-form" style="margin-top: 18px;">
<el-row >
<el-col :span="5">
<el-form-item prop="requirementName" label="征集名称">
<el-input v-model="selectForm.requirementName" placeholder="请输入征集名称" clearable @keyup.enter.native="getList"/>
</el-form-item>
</el-col>
<el-col :span="5" :offset="1">
<el-form-item prop="collectType" label="征集类型">
<el-select v-model="selectForm.collectType" ref="collectTypeSelectRef" placeholder="请选择征集类型" clearable filterable remote
@change="getList">
<el-option
v-for="item in cacheStore.getDict('collect_type')"
:key="item.value"
:label="item.label"
:value="item.value"
/>
</el-select>
</el-form-item>
</el-col>
<el-col :span="5" :offset="1">
<el-form-item prop="state" label="状态">
<el-select v-model="selectForm.state" placeholder="请选择状态" clearable filterable @change="getList" remote @visible-change="selectOptionVisibleChange">
<el-option
v-for="item in stateOption"
:key="item.value"
:label="item.label"
:value="item.value"
/>
</el-select>
</el-form-item>
</el-col>
<el-col :span="6" :offset="1">
<el-form-item>
<el-button color="#DED0B2" @click="getList">搜索</el-button>
<el-button @click="handleReset">重置</el-button>
</el-form-item>
</el-col>
</el-row>
</el-form>
<fvTable ref="tableIns" :tableConfig="tableConfig" @headBtnClick="headBtnClick">
<template #empty>
<el-empty description="暂无数据"/>
</template>
</fvTable>
</template>
<script setup lang="jsx">
import {useAuthStore} from '@/stores/userstore.js'
import Tag from '@/components/Tag.vue'
import fvSelect from '@/fvcomponents/fvSelect/index.vue'
import {ElNotification} from "element-plus";
import {deleteDemand} from "@/api/project-demand";
import {useCacheStore} from '@/stores/cache.js'
import {getRequirementStatePerm} from "@/api/project-demand";
const cacheStore = useCacheStore()
const authStore = useAuthStore()
const router = useRouter()
const selectForm = ref({})
const tableIns = ref()
const formRef = ref()
const stateOption = ref([])
const userInfo = ref(authStore.userinfo)
const auths = {
edit: ['mosr:requirement:resubmit'],
detail: ['mosr:requirement:info'],
add: ['mosr:requirement:add'],
del: ['mosr:requirement:del'],
report: ['mosr:collect:reported'],
}
const tableConfig = reactive({
columns: [
// {
// type: 'selection',
// prop: 'selection'
// },
{
prop: 'index',
type: 'index',
label: '序号',
align: 'center',
width:85,
},
{
prop: 'requirementName',
label: '征集名称',
align: 'center',
},
{
prop: 'collectType',
label: '征集类型',
align: 'center',
// width: 200
},
{
prop: 'companyName',
label: '征集公司',
align: 'center',
// width: 200
},
{
prop: 'deadline',
label: '需求上报截止时间',
align: 'center',
width: 150,
},
{
prop: 'approveName',
label: '当前审批节点',
align: 'center',
width: 120,
currentRender: ({row, index}) => {
if(row.state=='1'){
return <span>{row.approveName}</span>
}else {
return <span>{row.taskNode}</span>
}
}
},
{
prop: 'state',
label: '状态',
align: 'center',
width: 120,
showOverflowTooltip: false,
currentRender: ({row, index}) => (<Tag dictType={'demand_collection'} value={row.state}/>)
},
{
prop: 'oper',
label: '操作',
align: 'center',
width: 150,
showOverflowTooltip: false,
currentRender: ({row, index}) => {
let btn = []
let buttons = new Set(Array.from(row.buttons))
if (buttons.has("details")) {
btn.push({label: '详情', prem: auths.detail, func: () => handleDetail(row), type: 'primary'})
}
if (buttons.has("edit")) {
btn.push({label: '编辑', prem: auths.edit, func: () => handleEdit(row), type: 'primary'})
}
if (buttons.has("report")) {
btn.push({label: '需求上报', prem: auths.report, func: () => handleReport(row), type: 'primary'})
}
return (
<div style={{width: '100%'}}>
{
btn.map(item => (
<el-button
type={item.type}
v-perm={item.prem}
onClick={() => item.func()}
link
>
{item.label}
</el-button>
))
}
{
buttons.has("delete") ?
<popover-delete name={row.requirementName} type={'需求征集'} btnType={'danger'}
perm={auths.del}
onDelete={() => handleDelete(row)}/> : ''
}
</div>
)
}
}
],
api: '/workflow/mosr/requirement',
btns: [
{name: '新增', key: 'add', color: '#DED0B2', auth: auths.add},
// {name: '导出', key: 'export', type: ''},
],
params: {}
})
const selectOptionVisibleChange=(value)=>{
console.log('value',value)
}
const getStatePerm = () => {
getRequirementStatePerm().then(res => {
stateOption.value=res.data
})
}
getStatePerm()
//重置功能
const handleReset = () => {
formRef.value.resetFields()
getList()
}
const getList = () => {
tableConfig.params = {...selectForm.value}
tableIns.value.refresh()
}
const search = (val) => {
tableConfig.params = {...val}
tableIns.value.refresh()
}
const handleAdd = (row) => {
router.push({
name: 'Requirement/add',
query: {
// id: row.requirementId
}
})
}
const handleEdit = (row) => {
router.push({
name: 'Requirement/edit',
query: {
id: row.requirementId
}
})
}
const handleDelete = (row) => {
deleteDemand(row.requirementId).then(res => {
ElNotification({
title: '提示',
message: res.msg,
type: res.code === 1000 ? 'success' : 'error'
})
tableIns.value.refresh()
})
}
const handleDetail = (row) => {
router.push({
name: 'Requirement/detail',
query: {
id: row.requirementId
}
})
}
const handleReport = (row) => {
router.push({
name: 'Summary/add',
query: {
id: row.requirementId
}
})
}
const headBtnClick = (key) => {
switch (key) {
case 'add':
handleAdd()
break;
case 'export':
handleExport()
break;
}
}
</script>
<style lang="scss">
.select-form{
.el-select {
.el-select__wrapper{
.el-select__suffix::before {
content: "";
width: 6px;
height: 6px;
border: solid #a8abb2;
border-width: 0 0 1px 1px;
transform: translate(-50%, -50%) rotate(-45deg);
}
}
.is-focused {
.el-select__suffix::before {
margin-top: 10px;
transform:translate(-50%, -50%) rotate(-225deg)!important;
}
}
}
}
</style>