| | |
| | | <template> |
| | | <basic-container> |
| | | 供需填报管理 |
| | | </basic-container> |
| | | <basic-container> |
| | | <el-form ref="queryParamsRef" :model="searchParams" class="gd-search-form"> |
| | | <el-form-item label="需求名称" prop="demandName"> |
| | | <el-input |
| | | class="gd-input gray" |
| | | v-model="searchParams.demandName" |
| | | placeholder="请输入" |
| | | clearable |
| | | @clear="handleSearch" |
| | | /> |
| | | </el-form-item> |
| | | |
| | | <el-form-item label="需求状态" prop="demandStatus"> |
| | | <el-select |
| | | class="gd-select gray" |
| | | popper-class="gd-select-popper" |
| | | v-model="searchParams.demandStatus" |
| | | placeholder="请选择" |
| | | clearable |
| | | @change="handleSearch" |
| | | > |
| | | <el-option |
| | | v-for="item in dictObj.demandStatus" |
| | | :key="item.dictKey" |
| | | :label="item.dictValue" |
| | | :value="item.dictKey" |
| | | /> |
| | | </el-select> |
| | | </el-form-item> |
| | | |
| | | <el-form-item class="gd-search-actions"> |
| | | <el-button :icon="RefreshRight" @click="resetForm"></el-button> |
| | | <el-button class="search-btn" :icon="Search" @click="handleSearch"></el-button> |
| | | </el-form-item> |
| | | </el-form> |
| | | |
| | | <div class="gd-table-toolbar" v-if="permissionList.addBtn"> |
| | | <el-button :icon="Plus" color="#4C34FF" type="primary" @click="openForm('add')">供需填报新增</el-button> |
| | | </div> |
| | | |
| | | <div class="gd-table-container" v-loading="loading"> |
| | | <div class="gd-table-content gd-table-content-bg"> |
| | | <el-table class="gd-table" :data="list"> |
| | | <el-table-column label="序号" width="70" align="center"> |
| | | <template #default="scope"> |
| | | {{ scope.$index + 1 }} |
| | | </template> |
| | | </el-table-column> |
| | | <el-table-column prop="demandName" show-overflow-tooltip label="需求名称" /> |
| | | <el-table-column prop="demandType" show-overflow-tooltip label="需求类型"> |
| | | <template v-slot="{ row }"> |
| | | {{ getDictLabel(row.demandType, dictObj.requirementType) }} |
| | | </template> |
| | | </el-table-column> |
| | | <el-table-column prop="contactPerson" show-overflow-tooltip label="需求联系人" /> |
| | | <el-table-column prop="contactPhone" show-overflow-tooltip width="180" label="需求联系人电话" /> |
| | | <el-table-column prop="contactEmail" show-overflow-tooltip label="需求邮箱" /> |
| | | <el-table-column prop="demandStatus" show-overflow-tooltip label="需求状态"> |
| | | <template v-slot="{ row }"> |
| | | {{ getDictLabel(row.demandStatus, dictObj.demandStatus) }} |
| | | </template> |
| | | </el-table-column> |
| | | <el-table-column prop="updateCycle" show-overflow-tooltip label="更新周期" /> |
| | | <el-table-column prop="applyBasis" show-overflow-tooltip label="申请依据" /> |
| | | <el-table-column prop="shareType" show-overflow-tooltip label="共享类型"> |
| | | <template v-slot="{ row }"> |
| | | {{ getDictLabel(row.shareType, dictObj.sharedType) }} |
| | | </template> |
| | | </el-table-column> |
| | | <el-table-column prop="applicationScene" show-overflow-tooltip label="应用场景类型"> |
| | | <template v-slot="{ row }"> |
| | | {{ getDictLabel(row.applicationScene, dictObj.appSceneType) }} |
| | | </template> |
| | | </el-table-column> |
| | | <el-table-column prop="responsibleDeptName" show-overflow-tooltip label="责任部门" /> |
| | | <el-table-column prop="dataSource" show-overflow-tooltip label="数据来源依据" /> |
| | | <el-table-column prop="demandInfo" show-overflow-tooltip label="需求信息项" /> |
| | | <el-table-column label="操作" class-name="operation-btns" width="150"> |
| | | <template v-slot="{ row }"> |
| | | <el-link type="primary" @click="openForm('view', row)">查看</el-link> |
| | | <el-link type="primary" @click="openForm('edit', row)" v-if="!['1', '2', '3'].includes(row.demandStatus) && permissionList.addBtn">编辑</el-link> |
| | | <el-link type="primary" @click="handleDelete(row)" v-if="!['1', '2', '3'].includes(row.demandStatus) && permissionList.deleteBtn">删除</el-link> |
| | | </template> |
| | | </el-table-column> |
| | | </el-table> |
| | | </div> |
| | | |
| | | <div class="gd-pagination-parent"> |
| | | <el-pagination |
| | | popper-class="gd-select-popper" |
| | | v-model:current-page="searchParams.current" |
| | | v-model:page-size="searchParams.size" |
| | | layout="total, prev, pager, next, sizes" |
| | | :total="total" |
| | | @change="getList" |
| | | /> |
| | | </div> |
| | | </div> |
| | | |
| | | <FormDiaLog ref="dialogRef" @success="getList" v-if="dialogVisible" v-model="dialogVisible" /> |
| | | <ApplyViewDialog ref="applyDialogRef" @success="getList" v-if="applyDialogVisible" v-model="applyDialogVisible" /> |
| | | </basic-container> |
| | | </template> |
| | | <script setup> |
| | | import { Search, RefreshRight, Plus, Delete } from '@element-plus/icons-vue' |
| | | import { onMounted, ref, nextTick } from 'vue' |
| | | import { ElMessage, ElMessageBox } from 'element-plus' |
| | | import { getDictionaryByCode } from '@/api/system/dictbiz' |
| | | import { getDeptTree } from '@/api/system/dept' |
| | | import { getDictLabel } from '@ztzf/utils' |
| | | import FormDiaLog from './FormDiaLog.vue' |
| | | import ApplyViewDialog from './ApplyViewDialog.vue' |
| | | import { |
| | | gdSupplyDemandPageApi, |
| | | gdSupplyDemandRemoveApi, |
| | | } from '@/views/orderView/orderDataManage/supplyAdd/supplyAddApi' |
| | | import { useStore } from 'vuex' |
| | | const store = useStore() |
| | | const permission = computed(() => store.state.user.permission); |
| | | // 初始化查询参数 |
| | | const initSearchParams = () => ({ |
| | | demandName: '', // 需求名称 |
| | | demandStatus: '', // 需求状态 |
| | | current: 1, // 当前页 |
| | | size: 10, // 每页大小 |
| | | }) |
| | | const searchParams = ref(initSearchParams()) // 查询参数 |
| | | const total = ref(0) // 总条数 |
| | | const loading = ref(true) // 列表加载中 |
| | | const list = ref([]) // 列表数据 |
| | | const queryParamsRef = ref(null) // 查询表单实例 |
| | | const dialogRef = ref(null) // 弹框实例 |
| | | const dialogVisible = ref(false) |
| | | const applyDialogRef = ref(null) // 申请详情弹框实例 |
| | | const applyDialogVisible = ref(false) |
| | | const dictObj = ref({ |
| | | requirementType: [], // 需求类型 |
| | | sharedType: [], // 共享类型 |
| | | appSceneType: [], // 应用场景类型 |
| | | demandStatus: [], // 需求状态 |
| | | }) |
| | | provide('dictObj', dictObj) |
| | | const deptTree = ref([]) // 部门树 |
| | | const treeProps = { |
| | | label: 'name', |
| | | children: 'children', |
| | | } |
| | | provide('deptTree', deptTree) |
| | | provide('treeProps', treeProps) |
| | | const detailDemandStatus = ref('') |
| | | provide('detailDemandStatus', detailDemandStatus) |
| | | const reasonForRejection = ref('') //拒绝原因 |
| | | provide('reasonForRejection', reasonForRejection) |
| | | |
| | | function validData(value, defaultValue) { |
| | | return value !== undefined ? value : defaultValue |
| | | } |
| | | const permissionList = computed(() => { |
| | | return { |
| | | addBtn: validData(permission.value.orderData_addDemand, false), |
| | | deleteBtn: validData(permission.value.orderData_delete, false), |
| | | } |
| | | }) |
| | | |
| | | // 根据部门ID获取部门名称 |
| | | function getDeptNameById(deptId, deptList) { |
| | | if (!deptId || !Array.isArray(deptList)) return '' |
| | | for (const dept of deptList) { |
| | | if (dept.id === deptId) { |
| | | return dept.name |
| | | } |
| | | if (Array.isArray(dept.children) && dept.children.length > 0) { |
| | | const name = getDeptNameById(deptId, dept.children) |
| | | if (name) return name |
| | | } |
| | | } |
| | | return '' |
| | | } |
| | | |
| | | // 获取列表 |
| | | async function getList() { |
| | | loading.value = true |
| | | try { |
| | | const res = await gdSupplyDemandPageApi(searchParams.value) |
| | | const records = res?.data?.data?.records ?? [] |
| | | // 为每条记录添加部门名称 |
| | | list.value = records.map(item => ({ |
| | | ...item, |
| | | responsibleDeptName: item.responsibleDeptName || getDeptNameById(item.responsibleDeptId, deptTree.value), |
| | | })) |
| | | total.value = res?.data?.data?.total ?? 0 |
| | | } finally { |
| | | loading.value = false |
| | | } |
| | | } |
| | | |
| | | // 查询 |
| | | function handleSearch() { |
| | | searchParams.value.current = 1 |
| | | getList() |
| | | } |
| | | |
| | | // 重置查询 |
| | | function resetForm() { |
| | | queryParamsRef.value?.resetFields() |
| | | searchParams.value.current = 1 |
| | | getList() |
| | | } |
| | | |
| | | // 新增/编辑/查看 弹框 |
| | | function openForm(mode, row) { |
| | | detailDemandStatus.value = row?.demandStatus |
| | | // 对于所有审批相关状态(申请中、审核通过、审核拒绝)都使用申请详情弹框 |
| | | if (mode === 'view' && ['1', '2', '3'].includes(row?.demandStatus)) { |
| | | // 使用申请详情弹框 |
| | | openApplyViewDialog(row) |
| | | } else { |
| | | // 其他情况使用原有弹框 |
| | | dialogVisible.value = true |
| | | nextTick(() => { |
| | | dialogRef.value?.open({ mode, row }) |
| | | }) |
| | | } |
| | | } |
| | | |
| | | // 打开申请详情弹框 |
| | | function openApplyViewDialog(row) { |
| | | if (row?.id) { |
| | | applyDialogVisible.value = true |
| | | nextTick(() => { |
| | | applyDialogRef.value?.open({ row }) |
| | | }) |
| | | } |
| | | } |
| | | |
| | | // 删除 |
| | | async function handleDelete(row) { |
| | | await ElMessageBox.confirm('确认删除该条记录吗?', '提示', { |
| | | type: 'warning', |
| | | customClass: 'gd-confirm-custom', |
| | | confirmButtonClass: 'gd-confirm-button', |
| | | cancelButtonClass: 'gd-confirm-cancel-button', |
| | | }) |
| | | await gdSupplyDemandRemoveApi({ ids: row.id }) |
| | | ElMessage.success('删除成功') |
| | | getList() |
| | | } |
| | | |
| | | // 获取字典 |
| | | function getDictList() { |
| | | return getDictionaryByCode('requirementType,sharedType,appSceneType,demandStatus').then(res => { |
| | | dictObj.value = res.data.data |
| | | }) |
| | | } |
| | | |
| | | // 获取部门树 |
| | | function getDeptTreeFun() { |
| | | return getDeptTree().then(res => { |
| | | deptTree.value = res.data.data |
| | | }) |
| | | } |
| | | |
| | | onMounted(async () => { |
| | | // 先获取字典和部门树数据,再获取列表数据 |
| | | await Promise.all([getDictList(), getDeptTreeFun()]) |
| | | getList() |
| | | }) |
| | | </script> |
| | | <style scoped lang="scss"> |
| | | </style> |
| | | <style scoped lang="scss"></style> |