<!-- 易耗物资申请单 列表 --> <script name="ConsumableApplyList" lang="ts" setup> import type { DateModelType } from 'element-plus' import { ElMessage, ElMessageBox, dayjs } from 'element-plus' import type { IApplyListQuery, IConsumableApply, IConsumableApplyGoods } from './consumable-interface' import ApprovalDialog from '@/views/resource/common/approvalDialog.vue' import { SCHEDULE } from '@/utils/scheduleDict' import type { IMenu } from '@/components/buttonBox/buttonBox' import type { TableColumn } from '@/components/NormalTable/table_interface' import { getDictByCode } from '@/api/system/dict' import { canceledApprDeleteApply, detailConsumableApply, draftDeleteApply, getConsumableApplyList, refuseApprovalApply, revokeApprovalApply } from '@/api/resource/supplierConsumable' // 定义常量 const buttonBoxActive = 'consumableApplyApproval' // 存储在sessionstorage里面的字段名,用于记录右上角buttonbox点击状态 const { proxy } = getCurrentInstance() as any const router = useRouter() // 选中的审批状态按钮 const active = ref('') const menu = ref<IMenu[]>([]) // 审批状态按钮组合 const approvalStatusList = ref<String[]>([ '全部', '已审批', '待审批', '审批', '草稿箱', '审批中', '已通过', '未通过', '已取消', ]) // 弹窗子组件 const apprDial = ref() const applyTableRef = ref() // 查询条件 const searchQuery = ref<IApplyListQuery>({ applyNo: '', // 申请单编号 applyName: '', // 申请单名称 createDept: '', // 编制部门 createUserName: '', // 编制人 createTimeStart: '', // 创建时间-起始 createTimeEnd: '', // 创建时间-结束 approvalStatus: active.value, // 审批状态 formId: SCHEDULE.CONSUMABLE_MATERIAL_APPROVAL, // 表单id(流程定义对应的表单id,等价于业务id),此处为固定值 offset: 1, limit: 20, }) const dateRange = ref<[DateModelType, DateModelType]>(['', ''])// 筛选时间段数据 const total = ref(0) // 数据条数 const loadingTable = ref(false) // 表格loading const expandLoading = ref(false) // 展开表格的loading // 表头 const columns = ref<TableColumn[]>([ { text: '文件编号', value: 'applyNo', align: 'center', width: '200' }, { text: '易耗物资名称、规格型号及数量', value: 'goodsListStr', align: 'center' }, { text: '申请部门', value: 'createDept', align: 'center', width: '160' }, { text: '申请人', value: 'createUserName', align: 'center', width: '120' }, { text: '申请时间', value: 'createTime', align: 'center', width: '120' }, { text: '审批状态', value: 'approvalStatusName', align: 'center', width: '100' }, ]) const statusColumn = ref<TableColumn>({ text: '审批状态', value: 'approvalStatusName', align: 'center', width: '100' }) const applyList = ref<Array<IConsumableApply>>([]) // 表格数据 const expandRowKey = ref<string>('') const goodsListExpand = ref<Array<IConsumableApplyGoods>>([]) const expandRowKeys = computed(() => { return [expandRowKey.value] }) // 逻辑 // 跳转到新建的页面 const addConsumableApply = () => { router.push({ query: { type: 'create', }, path: 'consumableApply/detail', }) } // 点击编辑按钮 const updateInfo = (row: IConsumableApply) => { sessionStorage.setItem('consumableApplyTaskId', row.taskId!) router.push({ query: { type: 'update', id: row.id, status: searchQuery.value.approvalStatus, }, path: 'consumableApply/detail', }) } // 点击查看(或编辑)按钮 const detail = (row: IConsumableApply) => { if (searchQuery.value.approvalStatus === '1') { // 全部或草稿箱 状态的 查看 是可以编辑的组件 updateInfo(row) } else if (active.value === '0') { router.push({ query: { type: 'apply', id: row.id, }, path: 'consumableApply/approved', }) } else { // 将行数据存入缓存 用来在路由之间传递数据 sessionStorage.setItem('consumableApplyTaskId', row.taskId!) router.push({ query: { type: 'detail', id: row.id, status: searchQuery.value.approvalStatus, }, path: 'consumableApply/detail', }) } } // 删除易耗物资申请单 或 删除草稿箱中的审批单 const deleteById = (row: any) => { ElMessageBox.confirm('是否删除易耗物资申请单', '提示', { confirmButtonText: '确认', cancelButtonText: '取消', type: 'warning', }).then(() => { if (active.value === '1') { // 草稿箱中的删除记录 draftDeleteApply({ id: row.id }).then((res) => { if (res.code === 200) { ElMessage.success('易耗物资申请单删除成功') fetchData() } else { ElMessage.error(`易耗物资申请单删除失败: ${res.message}`) } }) } else if (active.value === '6') { // 已取消中的删除记录 canceledApprDeleteApply({ id: row.id, taskId: row.taskId }).then((res) => { if (res.code === 200) { ElMessage.success('易耗物资申请单删除成功') fetchData() } else { ElMessage.error(`易耗物资申请单删除失败: ${res.message}`) } }) } }) } const getDetailGoodsList = (goods: IConsumableApply) => { expandLoading.value = true detailConsumableApply({ id: goods.id }).then((res) => { if (res.code === 200) { goodsListExpand.value = res.data.goodsDetailList expandLoading.value = false } }).catch(() => { expandLoading.value = false }) } // 数据查询 function fetchData(isNowPage = false) { loadingTable.value = true if (!isNowPage) { // 是否显示当前页,否则跳转第一页 searchQuery.value.offset = 1 } if (searchQuery.value.approvalStatus === '10') { searchQuery.value.approvalStatus = '' } // 审批状态不允许传字典要求传'' getConsumableApplyList(searchQuery.value).then((response) => { if (response.code === 200) { applyList.value = response.data.rows.map((item: IConsumableApply) => { return { ...item, createTime: item.createTime!.length > 16 ? item.createTime!.substring(0, 10) : '', goodsListStr: `${item.goodsName};${item.goodsModel};${item.goodsQuantity}`, } }) total.value = parseInt(response.data.total) } expandRowKey.value = '' loadingTable.value = false }).catch(() => { loadingTable.value = false }) } const searchList = () => { fetchData(true) } // 页数发生变化后的操作,可能是页码变化,可能是每页容量变化,此函数必写 const changePage = (val: { size?: number; page?: number }) => { if (val && val.size) { searchQuery.value.limit = val.size } if (val && val.page) { searchQuery.value.offset = val.page } fetchData(true) } // 改变页容量 function handleSizeChange(val: number) { changePage({ size: val }) } // 改变当前页 function handleCurrentChange(val: number) { changePage({ page: val }) } // 重置 const reset = () => { searchQuery.value = { applyNo: '', // 申请单编号 applyName: '', // 申请单名称 createDept: '', // 编制部门 createUserName: '', // 编制人 createTimeStart: '', // 创建时间-起始 createTimeEnd: '', // 创建时间-结束 approvalStatus: active.value, // 审批状态 formId: SCHEDULE.CONSUMABLE_MATERIAL_APPROVAL, // 表单id(流程定义对应的表单id,等价于业务id),此处为固定值 offset: 1, limit: 20, } dateRange.value = ['', ''] fetchData(true) } // 审批按钮点击切换事件 const changeCurrentButton = (val: string) => { active.value = val // 此时的tab window.sessionStorage.setItem(buttonBoxActive, val) // 记录tab状态 const hasStatus = columns.value.filter((col) => { return col.value === statusColumn.value.value }) if (val === '0') { // 全部的时候不要显示审批状态 if (hasStatus.length > 0) { columns.value.pop() } } else { // 其他状态下要显示审批状态字段 if (hasStatus.length === 0) { columns.value.push(statusColumn.value) } } reset() // 刷新 } // 展开行 每次只能展开一行 const expandCurrentRow = (row: IConsumableApply) => { if (expandRowKey.value === '') { // 全部收起的状态 展开当前点击的行 expandRowKey.value = row.applyNo } else if (expandRowKey.value !== row.applyNo) { // 已经有展开的行 切换到当前打开的行 expandRowKey.value = row.applyNo } else { // 点击的是当前已经展开的行 收起 expandRowKey.value = '' } } // 点击行 const expandClickedHandler = async (row: IConsumableApply, event: any) => { expandCurrentRow(row) if (expandRowKey.value !== '') { getDetailGoodsList(row) } } const tableRowExpandChange = (row: IConsumableApply) => { expandCurrentRow(row) } // 流程审批-同意 const approvalAgreeHandler = (row: IConsumableApply) => { apprDial.value.initDialog('agree', row.id, row.taskId, '') } // 流程审批-拒绝 const approvalRefuseHandler = (row: IConsumableApply) => { apprDial.value.initDialog('refuse', row.id, row.taskId, '') } // 取消(撤回审批单) const revokeApprById = (row: IConsumableApply) => { apprDial.value.initDialog('revoke', row.id, row.taskId, row.processId) } // 流程操作之后刷新 const afterApprovalHandler = () => { fetchData(true) } // 取消 const revokeHandler = (param: any) => { revokeApprovalApply(param).then((res) => { if (res.code === 200) { ElMessage.success('流程取消成功') } else { ElMessage.error(`流程取消失败:${res.message}`) } // 关闭弹窗 apprDial.value.handleClose() fetchData(true) }) } // 拒绝 const refuseHandler = (param: any) => { refuseApprovalApply(param).then((res) => { if (res.code === 200) { ElMessage.success('拒绝审批完成') } else { ElMessage.error(`拒绝审批失败:${res.message}`) } // 关闭弹窗 apprDial.value.handleClose() fetchData(true) }) } // 初始化流程审批状态按钮 const getApprovalStatusDict = () => { getDictByCode('approvalStatus').then((res) => { if (res.code === 200) { approvalStatusList.value.forEach((item) => { const tempFindData = res.data.find((e: { name: string; value: string }) => e.name === item) if (tempFindData) { menu.value.push({ name: tempFindData.name, id: `${tempFindData.value}`, }) } }) } }) } const getLabCodeDict = async () => { await getDictByCode('bizLabCode').then((res) => { if (res.code === 200) { sessionStorage.setItem('bizLabCode', JSON.stringify(res.data)) } }) } const getGroupCodeDict = async () => { await getDictByCode('bizGroupCode').then((res) => { if (res.code === 200) { sessionStorage.setItem('bizGroupCode', JSON.stringify(res.data)) } }) } const getDict = async () => { getApprovalStatusDict() getLabCodeDict() getGroupCodeDict() } watch(dateRange, (val) => { if (val) { searchQuery.value.createTimeStart = dayjs(val[0]).format('YYYY-MM-DD') === 'Invalid Date' ? '' : dayjs(val[0]).format('YYYY-MM-DD') searchQuery.value.createTimeEnd = dayjs(val[1]).format('YYYY-MM-DD') === 'Invalid Date' ? '' : dayjs(val[1]).format('YYYY-MM-DD') } else { searchQuery.value.createTimeStart = '' searchQuery.value.createTimeEnd = '' } }) watch(() => active.value, (val) => { if (val === '10') { // 审批把审批状态加上 if (columns.value[columns.value.length - 1].value !== 'approvalStatusName') { columns.value.push({ text: '审批状态', value: 'approvalStatusName', align: 'center' }) } } else { // 其他不显示审批状态 if (columns.value[columns.value.length - 1].value === 'approvalStatusName') { columns.value.pop() } } }, { immediate: true }) onMounted(async () => { await getDict() if (sessionStorage.getItem(buttonBoxActive) !== 'undefined' && sessionStorage.getItem(buttonBoxActive) !== null) { active.value = sessionStorage.getItem(buttonBoxActive)! } else { active.value = '0' // 全部 } }) </script> <template> <app-container> <!-- 筛选条件 --> <search-area :need-clear="true" @search="searchList" @clear="reset"> <search-item> <el-input v-model="searchQuery.applyNo" placeholder="文件编号" clearable /> </search-item> <search-item> <el-input v-model="searchQuery.createDept" placeholder="申请部门" clearable /> </search-item> <search-item> <el-input v-model="searchQuery.createUserName" placeholder="申请人" clearable /> </search-item> <search-item> <el-date-picker v-model="dateRange" type="daterange" start-placeholder="申请时间(开始)" end-placeholder="申请时间(结束)" /> </search-item> </search-area> <!-- 表格数据展示 --> <table-container> <!-- 表头区域 --> <template v-if="active === '0' && proxy.hasPerm(`/resource/outsideService/consumableApply/add`)" #btns-right> <icon-button icon="icon-add" title="新建" @click="addConsumableApply" /> </template> <el-table ref="applyTableRef" v-loading="loadingTable" :data="applyList" style="width: 100%;" stripe border row-key="applyNo" :expand-row-keys="expandRowKeys" @expand-change="tableRowExpandChange" > <el-table-column type="expand" width="1"> <el-table v-loading="expandLoading" :show-header="false" :data="goodsListExpand" border :class="active === '0' ? 'expand-approval-all' : 'expand-approval-with-status'" > <el-table-column label="名称" prop="goodsName" align="center" /> <el-table-column label="规格型号" prop="goodsModel" align="center" /> <el-table-column label="数量" prop="goodsQuantity" align="center" /> </el-table> </el-table-column> <el-table-column align="center" label="序号" width="55" type="index" /> <el-table-column v-for="item in columns" :key="item.value" :prop="item.value" :label="item.text" :width="item.width" align="center" /> <el-table-column fixed="right" label="操作" align="center" width="130"> <template #default="{ row }"> <el-button size="small" type="primary" link @click="expandClickedHandler(row, $event)"> <template v-if="expandRowKey !== row.applyNo"> 展开物资 </template> <template v-else> 收起展开 </template> </el-button> <el-button size="small" type="primary" link @click="detail(row)"> 查看 </el-button> <el-button v-if="(active === '1' || active === '6') && proxy.hasPerm(`/resource/outsideService/consumableApply/del`)" size="small" type="danger" link @click="deleteById(row)"> 删除 </el-button> <template v-if="active === '2'"> <el-button size="small" type="primary" link @click="approvalAgreeHandler(row)"> 同意 </el-button> <el-button size="small" type="danger" link @click="approvalRefuseHandler(row)"> 拒绝 </el-button> </template> <template v-if="active === '3'"> <el-button size="small" type="info" link @click="revokeApprById(row)"> 取消 </el-button> </template> </template> </el-table-column> </el-table> <!-- 分页 --> <div style="width: 100%;margin-top: 10px;"> <el-pagination :current-page="searchQuery.offset" :page-sizes="[10, 20, 30]" :page-size="searchQuery.limit" :total="total" layout="total, sizes, prev, pager, next" @size-change="handleSizeChange" @current-change="handleCurrentChange" /> </div> </table-container> <!-- 审批单弹窗 --> <approval-dialog ref="apprDial" @on-success="afterApprovalHandler" @on-refuse="refuseHandler" @on-revoke="revokeHandler" /> <!-- 右上角按钮集合 --> <button-box :active="active" :menu="menu" @change-current-button="changeCurrentButton" /> </app-container> </template> <style scoped lang="scss"> :deep(.el-table__expand-icon) { visibility: hidden !important; } :deep(.el-table__expanded-cell) { padding-top: 0 !important; } /* 其他状态下的列表 */ .expand-approval-with-status { width: calc(100% - 885px); margin-left: 255px; } /* 全部状态下的列表 */ .expand-approval-all { width: calc(100% - 785px); margin-left: 255px; } </style>