<!-- 检定审批管理列表列表 -->
<script name="TaskMeasureCertificateList" lang="ts" setup>
import { getCurrentInstance, ref } from 'vue'
import type { Ref } from 'vue'
import type { DateModelType } from 'element-plus'
import { ElLoading, ElMessage, ElMessageBox } from 'element-plus'
import dayjs from 'dayjs'
import type { IList, IListQuery } from './certificate-interface'
import ApprovalDialog from '@/components/Approval/ApprovalDialog.vue'
import type { TableColumn } from '@/components/NormalTable/table_interface'
import { exportFile } from '@/utils/exportUtils'
import { getDictByCode } from '@/api/system/dict'
import type { deptType, dictType } from '@/global'
import type { IMenu } from '@/components/buttonBox/buttonBox'
import { SCHEDULE } from '@/utils/scheduleDict'
import {
approvalDelete,
cancelApproval,
createMeasureCert,
draftDelete,
exportCertificateList,
getCertificateList,
measureApprovalDelete,
refuseApproval,
rejectApproval,
} from '@/api/business/taskMeasure/certificate'
import useBridgeCount from '@/components/buttonBox/useBridgeCount'
import useUserStore from '@/store/modules/user'
const $router = useRouter()
const buttonBoxActive = 'businessCertificate' // 存储在sessionstorage里面的字段名，用于记录右上角buttonbox点击状态
const { proxy } = getCurrentInstance() as any
const menu = ref<IMenu[]>([]) // 右上角审批状态按钮组合
const user = useUserStore() // 用户信息
const active = ref('') // 选中的按钮
// 查询条件
const timeRange = ref<[DateModelType, DateModelType]>(['', ''])
const listQuery: Ref<IListQuery> = ref({
approvalStatus: active.value, // 审批状态类型code，导出接口不用传
certificateName: '', // 证书名称
certificateNo: '', // 证书编号
formId: SCHEDULE.CERTIFICATE_APPROVAL, // 表单id（流程定义对应的表单id，等价于业务id），导出接口不用传
groupCode: '', // 部门(字典code)
labCode: '', // 实验室(字典code)
manufactureNo: '', // 出厂编号
manufacturer: '', // 生产厂家
measureCategory: '', // 检校类别(字典code)
model: '', // 规格型号
sampleName: '', // 受检设备名称
sampleNo: '', // 被检设备统一编号
staffName: '', // 检定员名字
traceDateEnd: '', // 测试、校准或检定日期结束
traceDateStart: '', // 测试、校准或检定日期开始
measureValidDateStart: '', // 检定有效期开始
measureValidDateEnd: '', // 检定有效期结束
conclusion: '', // 检定结论
customerName: '', // 委托方
deptName: '', // 使用部门
measureDataNo: '', // 检定数据编号
offset: 1,
limit: 20,
})
const operateWidth = ref('180') // 操作栏的宽度
const approvalDialog = ref() // 审批对话ref
const columns = ref<TableColumn[]>([ // 表头
{ text: '证书编号', value: 'certificateNo', width: '160', align: 'center' },
{ text: '证书名称', value: 'certificateName', align: 'center' },
// { text: '被检设备统一编号', value: 'sampleNo', align: 'center', width: '160' },
{ text: '被检设备名称', value: 'sampleName', align: 'center' },
{ text: '规格型号', value: 'model', align: 'center' },
{ text: '出厂编号', value: 'manufactureNo', align: 'center' },
{ text: '生产厂家', value: 'manufacturer', align: 'center' },
{ text: '委托方', value: 'customerName', align: 'center' },
{ text: '使用部门', value: 'deptName', align: 'center' },
{ text: '检定数据编号', value: 'fileArr', align: 'center', width: '180', followLink: true },
{ text: '检校类别', value: 'measureCategoryName', align: 'center', width: '55' },
{ text: '检定日期', value: 'traceDate', align: 'center', width: '120' },
{ text: '检定结论', value: 'conclusion', align: 'center' },
// { text: '限用说明', value: 'restrictionInstruction', align: 'center' },
{ text: '检定有效期', value: 'measureValidDate', align: 'center', width: '120' },
{ text: '实验室', value: 'labCodeName', align: 'center', width: '120' },
{ text: '部门', value: 'groupCodeName', align: 'center', width: '120' },
{ text: '检定员', value: 'staffName', align: 'center' },
])
const list = ref<IList[]>([]) // 表格数据
const total = ref(0) // 总数
const totalToApproval = ref(0) // 待审批数据条数
const totalApproval = ref(0) // 审批中数据条数
const totalRefuse = ref(0) // 未通过数据条数
const loadingTable = ref(false) // 表格加载状态
const checkoutList = ref<IList[]>([]) // 选中的内容
const dateRangeCertificateValid = ref<[DateModelType, DateModelType]>(['', ''])
// --------------------------------------------字典--------------------------------------
const measureCategoryList = ref<dictType[]>([])// 检校类别
const useDeptList = ref<deptType[]>([]) // 部门
const labDeptList = ref<deptType[]>([]) // 实验室
const conclusionList = ref<deptType[]>([]) // 检定结论
async function getDict() {
// 审批状态
const res = await getDictByCode('approvalStatus')
// 制作右上角的菜单
const tempMenu = ['全部', '已审批', '待审批', '审批', '草稿箱', '审批中', '已通过', '未通过', '已取消']
tempMenu.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}`,
})
}
})
// 检校类别
getDictByCode('measureCategory').then((response) => {
measureCategoryList.value = response.data
})
// 实验室
getDictByCode('bizGroupCodeEquipment').then((response) => {
labDeptList.value = response.data
})
// 部门
getDictByCode('bizGroupCode').then((response) => {
useDeptList.value = response.data
useDeptList.value = useDeptList.value.filter(item => item.value !== 'GL')
})
// 检定结论
getDictByCode('bizConclusion').then((response) => {
conclusionList.value = response.data
})
}
// -----------------------------------------表格数据--------------------------------------------
// 数据查询
function fetchData(isNowPage = false) {
loadingTable.value = true
if (!isNowPage) {
// 是否显示当前页，否则跳转第一页
listQuery.value.offset = 1
}
if (listQuery.value.approvalStatus === '10') { listQuery.value.approvalStatus = '' } // 审批状态不允许传字典要求传''
getCertificateList(listQuery.value).then((res) => {
list.value = res.data.rows.map((item: IList) => {
return {
...item,
certificateName: `${item.certificateNo}-${item.certificateName}`, // 证书报告名称
followLinkArr: [item.measureDataNo], // 检定数据编号，是一个链接，可跳转
measureValidDate: item.measureValidDate ? dayjs(item.measureValidDate).format('YYYY-MM-DD') : item.measureValidDate,
labCodeName: item.labCodeName === '西昌' || item.labCodeName === '海口' ? `${item.labCodeName}实验室` : item.labCodeName,
}
})
total.value = res.data.total
loadingTable.value = false
})
// 获取待审批，审批中，未通过数据数量
useBridgeCount(listQuery.value).then((res: any) => {
totalToApproval.value = res.totalToApproval // 待审批数据条数
totalApproval.value = res.totalApproval // 审批中数据条数
totalRefuse.value = res.totalRefuse // 未通过数据条数
})
}
// 多选发生改变时
function handleSelectionChange(e: any) {
checkoutList.value = e.map((item: { id: string }) => item.id)
}
// 点击搜索
const searchList = () => {
fetchData(true)
}
// 点击重置
const clearList = () => {
listQuery.value = {
approvalStatus: active.value, // 审批状态类型code，导出接口不用传
certificateName: '', // 证书名称
certificateNo: '', // 证书编号
formId: SCHEDULE.CERTIFICATE_APPROVAL, // 表单id（流程定义对应的表单id，等价于业务id），导出接口不用传
groupCode: '', // 部门(字典code)
labCode: '', // 实验室(字典code)
manufactureNo: '', // 出厂编号
manufacturer: '', // 生产厂家
measureCategory: '', // 检校类别(字典code)
model: '', // 规格型号
sampleName: '', // 受检设备名称
sampleNo: '', // 被检设备统一编号
staffName: '', // 检定员名字
traceDateEnd: '', // 测试、校准或检定日期结束
traceDateStart: '', // 测试、校准或检定日期开始
measureValidDateStart: '', // 检定有效期开始
measureValidDateEnd: '', // 检定有效期结束
conclusion: '', // 检定结论
customerName: '', // 委托方
deptName: '', // 使用部门
measureDataNo: '', // 检定数据编号
offset: 1,
limit: 20,
}
timeRange.value = ['', '']
dateRangeCertificateValid.value = ['', '']
fetchData(false)
}
// 页数发生变化后的操作，可能是页码变化，可能是每页容量变化，此函数必写
const changePage = (val: { size?: number; page?: number }) => {
if (val && val.size) {
listQuery.value.limit = val.size
}
if (val && val.page) {
listQuery.value.offset = val.page
}
fetchData(true)
}
// ----------------------------------------------操作---------------------------------------------------
const approvalId = ref('') // 操作的行id
const handleEdit = (row: IList, type: string) => {
approvalId.value = row.id
if (type === 'detail') { // 详情
$router.push({
path: `/businessCertificate/${type}/${row.id}`,
query: {
approvalStatusName: active.value === '0' ? '全部' : active.value === '7' ? '已审批' : row.approvalStatusName, // 审批状态名称
processId: row.processId, // 流程实例id
taskId: row.taskId, // 任务id
sampleName: row.sampleName, // 被检设备名称
model: row.model, // 规格型号
manufacturingNo: row.manufactureNo, // 出厂编号
measureDataId: row.dataId, // 检定数据id
decisionItem: row.decisionItem,
},
})
}
else if (type === '同意') {
approvalDialog.value.initDialog('agree', row.taskId)
}
else if (type === '驳回') {
approvalDialog.value.initDialog('reject', row.taskId, row.id)
}
else if (type === '拒绝') {
approvalDialog.value.initDialog('refuse', row.taskId, row.id)
}
else if (type === '取消') {
const params = {
processInstanceId: row.processId!,
comments: '',
id: row.id,
}
ElMessageBox.confirm(
'确认取消该审批吗？',
'提示',
{
confirmButtonText: '确认',
cancelButtonText: '取消',
type: 'warning',
},
)
.then(() => {
cancelApproval(params).then((res) => {
ElMessage({
type: 'success',
message: '已取消',
})
fetchData(true)
})
})
}
else {
ElMessageBox.confirm(
`确认${type}吗？`,
'提示',
{
confirmButtonText: '确认',
cancelButtonText: '取消',
type: 'warning',
},
).then(() => {
// 草稿箱删除
if (type === '删除' && row.approvalStatusName === '草稿箱') {
draftDelete({ id: row.id }).then(() => {
ElMessage.success(`已${type}`)
fetchData()
})
}
// 审批删除--已取消、全部
else if (type === '删除' && (row.approvalStatusName === '已取消' || row.approvalStatusName === '未通过')) {
approvalDelete({ id: row.id, taskId: row.taskId }).then(() => {
ElMessage.success(`已${type}`)
fetchData()
})
}
else if (type === '删除' && active.value === '0') { // 全部的删除
measureApprovalDelete({ id: row.id }).then(() => {
ElMessage.success(`已${type}`)
fetchData()
})
}
})
}
}
// 拒绝
const refuse = (comments: string, taskId: string, id: string) => {
const params = {
id,
taskId, // 任务id
comments, // 拒绝原因
}
refuseApproval(params).then((res) => {
ElMessage({
type: 'success',
message: '已拒绝',
})
fetchData(true)
})
}
// 驳回
const reject = (comments: string, taskId: string, id: string) => {
const params = {
id,
taskId, // 任务id
comments, // 拒绝原因
}
rejectApproval(params).then((res) => {
ElMessage({
type: 'success',
message: '已驳回',
})
fetchData(true)
})
}
// -----------------------------------------审批------------------------------------------------
// 审批结束回调(同意)
const approvalSuccess = () => {
loadingTable.value = true
createMeasureCert({ id: approvalId.value }).then((res) => {
fetchData(true)
})
}
// 切换tab状态
const changeCurrentButton = (val: string) => {
active.value = val
window.sessionStorage.setItem(buttonBoxActive, val)
listQuery.value.approvalStatus = val
fetchData()
}
// --------------------------------------按钮（表格上方）--------------------------------------------------------
// 导出
const exportAll = () => {
const loading = ElLoading.service({
lock: true,
text: '下载中请稍后',
background: 'rgba(255, 255, 255, 0.8)',
})
if (list.value.length > 0) {
const param = {
approvalStatus: listQuery.value.approvalStatus, // 审批状态类型code，导出接口不用传
certificateName: listQuery.value.certificateName, // 证书名称
certificateNo: listQuery.value.certificateNo, // 证书编号
formId: listQuery.value.formId, // 表单id（流程定义对应的表单id，等价于业务id），导出接口不用传
groupCode: listQuery.value.groupCode, // 部门(字典code)
labCode: listQuery.value.labCode, // 实验室(字典code)
manufactureNo: listQuery.value.manufactureNo, // 出厂编号
manufacturer: listQuery.value.manufacturer, // 生产厂家
measureCategory: listQuery.value.measureCategory, // 检校类别(字典code)
model: listQuery.value.model, // 规格型号
sampleName: listQuery.value.sampleName, // 受检设备名称
sampleNo: listQuery.value.sampleNo, // 被检设备统一编号
staffName: listQuery.value.staffName, // 检定员名字
traceDateEnd: listQuery.value.traceDateEnd, // 测试、校准或检定日期结束
traceDateStart: listQuery.value.traceDateStart, // 测试、校准或检定日期开始
measureValidDateStart: listQuery.value.measureValidDateStart, // 检定有效期开始
measureValidDateEnd: listQuery.value.measureValidDateEnd, // 检定有效期结束
conclusion: listQuery.value.conclusion, // 检定结论
customerName: listQuery.value.customerName, // 委托方
deptName: listQuery.value.deptName, // 使用部门
measureDataNo: listQuery.value.measureDataNo, // 检定数据编号
offset: 1,
limit: 20,
ids: checkoutList.value,
}
exportCertificateList(param).then((res) => {
exportFile(res.data, '检定审批管理')
loading.close()
}).catch((_) => {
loading.close()
})
}
else {
ElMessage.warning('无数据可导出数据')
}
loading.close()
}
// 点击检定数据编号
const handleClickFollowLink = (row: any, title: string) => {
$router.push({
path: `measureData/detail/${row.dataId}`,
query: {
itemCategoryName: row.itemCategoryName, // 检定项分类名称
itemCategoryId: row.itemCategoryId, // 检定项分类id
belongStandardEquipment: row.belongStandardEquipment, // 标准装置code
belongStandardEquipmentName: row.belongStandardEquipmentName, // 标准装置名称
},
})
}
// ---------------------------------------钩子-------------------------------------------------------
watch(timeRange, (val) => { // 监听时间变化
if (val) {
listQuery.value.traceDateStart = `${val[0]}`
listQuery.value.traceDateEnd = `${val[1]}`
}
else {
listQuery.value.traceDateStart = ''
listQuery.value.traceDateEnd = ''
}
})
watch(dateRangeCertificateValid, (val) => { // 检定有效期变化
if (val) {
listQuery.value.measureValidDateStart = `${val[0]}`
listQuery.value.measureValidDateEnd = `${val[1]}`
}
else {
listQuery.value.measureValidDateStart = ''
listQuery.value.measureValidDateEnd = ''
}
})
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 () => {
listQuery.value.labCode = user.bizLabCode // 实验室
listQuery.value.groupCode = user.groupNo === 'GL' ? '' : user.groupNo // 部门
getDict().then(() => {
console.log('weiufwebfwefdwklfwenkl')
console.log(window.sessionStorage.getItem(buttonBoxActive))
if (window.sessionStorage.getItem(buttonBoxActive)) {
active.value = window.sessionStorage.getItem(buttonBoxActive)!
}
else {
active.value = menu.value.find(item => item.name === '全部')!.id as string // 全部
console.log('active.value', active.value)
}
})
})
</script>
<template>
<app-container>
<search-area :need-clear="true" @search="searchList" @clear="clearList">
<search-item>
<el-input
v-model.trim="listQuery.certificateNo"
placeholder="证书编号"
class="short-input"
clearable
/>
</search-item>
<search-item>
<el-input
v-model.trim="listQuery.certificateName"
placeholder="证书名称"
clearable
class="short-input"
/>
</search-item>
<search-item>
<el-input
v-model.trim="listQuery.sampleName"
placeholder="被检设备名称"
clearable
class="short-input"
/>
</search-item>
<search-item>
<el-input
v-model.trim="listQuery.model"
placeholder="规格型号"
clearable
class="short-input"
/>
</search-item>
<search-item>
<el-input
v-model.trim="listQuery.manufactureNo"
placeholder="出厂编号"
clearable
class="short-input"
/>
</search-item>
<search-item>
<el-input
v-model.trim="listQuery.manufacturer"
placeholder="生产厂家"
clearable
class="short-input"
/>
</search-item>
<search-item>
<el-input
v-model.trim="listQuery.customerName"
placeholder="委托方"
clearable
class="short-input"
/>
</search-item>
<search-item>
<el-input
v-model.trim="listQuery.deptName"
placeholder="使用部门"
clearable
class="short-input"
/>
</search-item>
<search-item>
<el-input
v-model.trim="listQuery.measureDataNo"
placeholder="检定数据编号"
clearable
class="short-input"
/>
</search-item>
<search-item>
<el-select
v-model="listQuery.measureCategory"
placeholder="检校类别"
class="short-input"
filterable
clearable
>
<el-option v-for="item in measureCategoryList" :key="item.id" :label="item.name" :value="item.value" />
</el-select>
</search-item>
<search-item>
<el-date-picker
v-model="timeRange"
type="daterange"
range-separator="至"
format="YYYY-MM-DD"
value-format="YYYY-MM-DD"
start-placeholder="检定日期(开始)"
end-placeholder="检定日期(结束)"
class="short-input"
/>
</search-item>
<search-item>
<el-select
v-model="listQuery.conclusion"
placeholder="检定结论"
filterable
class="short-input"
clearable
>
<el-option v-for="item in conclusionList" :key="item.id" :label="item.name" :value="item.name" />
</el-select>
</search-item>
<search-item>
<el-date-picker
v-model="dateRangeCertificateValid"
type="daterange"
range-separator="至"
format="YYYY-MM-DD"
value-format="YYYY-MM-DD"
start-placeholder="检定有效期(开始)"
end-placeholder="检定有效期(结束)"
class="short-input"
/>
</search-item>
<search-item>
<el-select
v-model="listQuery.labCode"
placeholder="实验室"
class="short-input"
filterable
clearable
>
<el-option v-for="item in labDeptList" :key="item.id" :label="item.name" :value="item.value" />
</el-select>
</search-item>
<search-item>
<el-select
v-model="listQuery.groupCode"
placeholder="部门"
class="short-input"
filterable
clearable
>
<el-option v-for="item in useDeptList" :key="item.id" :label="item.name" :value="item.value" />
</el-select>
</search-item>
<search-item>
<el-input
v-model.trim="listQuery.staffName"
placeholder="检定员"
class="short-input"
clearable
/>
</search-item>
</search-area>
<table-container>
<template #btns-right>
<icon-button icon="icon-export" title="导出" @click="exportAll" />
</template>
<normal-table
:data="list" :total="total" :columns="columns" :query="listQuery"
:list-loading="loadingTable" is-showmulti-select @change="changePage" @multi-select="handleSelectionChange"
@handle-click-follow-link="handleClickFollowLink"
>
<template #preColumns>
<el-table-column label="序号" width="55" align="center">
<template #default="scope">
{{ (listQuery.offset - 1) * listQuery.limit + scope.$index + 1 }}
</template>
</el-table-column>
</template>
<template #columns>
<el-table-column
label="操作"
align="center"
fixed="right"
:width="operateWidth"
>
<template #default="{ row }">
<el-button
size="small"
type="primary"
link
@click="handleEdit(row, 'detail')"
>
查看
</el-button>
<el-button
v-if="row.approvalStatusName === '待审批'"
size="small"
link
type="primary"
@click="handleEdit(row, '同意')"
>
同意
</el-button>
<el-button
v-if="row.approvalStatusName === '待审批' && (`${row.decisionItem}` === '1' || `${row.decisionItem}` === '2')"
size="small"
link
type="warning"
@click="handleEdit(row, '驳回')"
>
驳回
</el-button>
<el-button
v-if="row.approvalStatusName === '待审批' && (`${row.decisionItem}` === '1' || `${row.decisionItem}` === '3')"
size="small"
link
type="danger"
@click="handleEdit(row, '拒绝')"
>
拒绝
</el-button>
<!-- <el-button
v-if="active === '0'"
size="small"
link
type="primary"
@click="handleEdit(row, 'edit')"
>
编辑
</el-button> -->
<!-- 是发起者且审批中可以取消 -->
<el-button
v-if="row.approvalStatusName === '审批中' && active !== '7' && active !== '0'"
size="small"
link
type="info"
@click="handleEdit(row, '取消')"
>
取消
</el-button>
<el-button
v-if="active !== '7' && (active === '0' || row.approvalStatusName === '草稿箱' || row.approvalStatusName === '已取消' || row.approvalStatusName === '未通过')"
size="small"
link
type="danger"
@click="handleEdit(row, '删除')"
>
删除
</el-button>
</template>
</el-table-column>
</template>
</normal-table>
</table-container>
<!-- 审批弹窗 -->
<approval-dialog ref="approvalDialog" @on-success="approvalSuccess" @refuse="refuse" @reject="reject" />
<!-- 右上角按钮集合 -->
<button-box :active="active" :total-refuse="totalRefuse" :total-approval="totalApproval" :total-to-approval="totalToApproval" :menu="menu" @change-current-button="changeCurrentButton" />
</app-container>
</template>
<style lang="scss" scoped>
.short-input {
width: 160px;
}
</style>
