| | |
| | | import ButtonIcon from '@/components/custom/button-icon.vue'; |
| | | import JudgeOperateDrawer from './modules/judge-operate-drawer.vue'; |
| | | import JudgeSearch from './modules/judge-search.vue'; |
| | | import JudgeDetailsSubTable from '../judge-details/modules/judge-details-sub-table.vue'; |
| | | import StdSubTable from "@/views/qm/std/modules/std-sub-table.vue"; |
| | | |
| | | defineOptions({ |
| | | name: 'JudgeList' |
| | | }); |
| | | |
| | | |
| | | const appStore = useAppStore(); |
| | | const { download } = useDownload(); |
| | | const { hasAuth } = useAuth(); |
| | | |
| | | const selectedJudgeId = ref<CommonType.IdType | null>(null); |
| | | |
| | | const searchParams = ref<Api.Qm.JudgeSearchParams>({ |
| | | pageNum: 1, |
| | |
| | | matName: null, |
| | | judgeName: null, |
| | | category: 0, // 默认选择成品 |
| | | status: -1, // 默认选择全部 |
| | | status: 1, // 默认查询启用 |
| | | params: {} |
| | | }); |
| | | |
| | | const { columns, columnChecks, data, getData, getDataByPage, loading, mobilePagination, scrollX } = |
| | | useNaivePaginatedTable({ |
| | | api: () => { |
| | | const params = { ...searchParams.value }; |
| | | if (params.status === -1) { |
| | | delete params.status; |
| | | } |
| | | return fetchGetJudgeList(params); |
| | | }, |
| | | transform: response => defaultTransform(response), |
| | | onPaginationParamsChange: params => { |
| | | searchParams.value.pageNum = params.page; |
| | | searchParams.value.pageSize = params.pageSize; |
| | | }, |
| | | columns: () => [ |
| | | { |
| | | type: 'selection', |
| | | align: 'center', |
| | | width: 48 |
| | | }, |
| | | { |
| | | key: 'index', |
| | | title: $t('common.index'), |
| | | align: 'center', |
| | | width: 64, |
| | | render: (_, index) => index + 1 |
| | | }, |
| | | { |
| | | key: 'judgeName', |
| | | title: '判定名称', |
| | | align: 'center', |
| | | width: 200, |
| | | render: row => ( |
| | | <NTooltip trigger="hover"> |
| | | {{ |
| | | trigger: () => ( |
| | | <div |
| | | style={{ |
| | | whiteSpace: 'nowrap', |
| | | overflow: 'hidden', |
| | | textOverflow: 'ellipsis' |
| | | }} |
| | | > |
| | | {row.judgeName} |
| | | </div> |
| | | ), |
| | | default: () => row.judgeName |
| | | }} |
| | | </NTooltip> |
| | | ) |
| | | }, |
| | | { |
| | | key: 'category', |
| | | title: '物料类型', |
| | | align: 'center', |
| | | width: 100, |
| | | render: row => { |
| | | if (row.category === 0) { |
| | | return '成品'; |
| | | } |
| | | if (row.category === 1) { |
| | | return '辅料'; |
| | | } |
| | | return String(row.category); |
| | | api: () => { |
| | | const params = { ...searchParams.value }; |
| | | if (params.status === -1) { |
| | | delete params.status; |
| | | } |
| | | return fetchGetJudgeList(params); |
| | | }, |
| | | { |
| | | key: 'typeName', |
| | | title: '辅料类型', |
| | | align: 'center', |
| | | width: 100, |
| | | render: row => ( |
| | | <NTooltip trigger="hover"> |
| | | {{ |
| | | trigger: () => ( |
| | | <div |
| | | style={{ |
| | | whiteSpace: 'nowrap', |
| | | overflow: 'hidden', |
| | | textOverflow: 'ellipsis' |
| | | }} |
| | | > |
| | | {row.typeName} |
| | | </div> |
| | | ), |
| | | default: () => row.typeName |
| | | }} |
| | | </NTooltip> |
| | | ) |
| | | transform: response => defaultTransform(response), |
| | | onPaginationParamsChange: params => { |
| | | searchParams.value.pageNum = params.page; |
| | | searchParams.value.pageSize = params.pageSize; |
| | | }, |
| | | { |
| | | key: 'matName', |
| | | title: '物料牌号', |
| | | align: 'center', |
| | | width: 180, |
| | | render: row => ( |
| | | <NTooltip trigger="hover"> |
| | | {{ |
| | | trigger: () => ( |
| | | <div |
| | | style={{ |
| | | whiteSpace: 'nowrap', |
| | | overflow: 'hidden', |
| | | textOverflow: 'ellipsis' |
| | | }} |
| | | > |
| | | {row.matName} |
| | | </div> |
| | | ), |
| | | default: () => row.matName |
| | | }} |
| | | </NTooltip> |
| | | ) |
| | | }, |
| | | { |
| | | key: 'matCode', |
| | | title: '物料牌号代码', |
| | | align: 'center', |
| | | width: 150 |
| | | }, |
| | | { |
| | | key: 'version', |
| | | title: '版本号', |
| | | align: 'center', |
| | | width: 100 |
| | | }, |
| | | { |
| | | key: 'status', |
| | | title: '状态', |
| | | align: 'center', |
| | | width: 100, |
| | | render: row => { |
| | | if (row.status === 1) { |
| | | return '启用'; |
| | | } |
| | | if (row.status === 0) { |
| | | return '归档'; |
| | | } |
| | | return String(row.status); |
| | | } |
| | | }, |
| | | { |
| | | key: 'stdName', |
| | | title: '判定规程', |
| | | align: 'center', |
| | | width: 200 |
| | | }, |
| | | { |
| | | key: 'cdate', |
| | | title: '创建时间', |
| | | align: 'center', |
| | | width: 180 |
| | | }, |
| | | { |
| | | key: 'oper', |
| | | title: '操作人', |
| | | align: 'center', |
| | | width: 100 |
| | | }, |
| | | { |
| | | key: 'des', |
| | | title: '备注', |
| | | align: 'center', |
| | | width: 200 |
| | | }, |
| | | { |
| | | key: 'operate', |
| | | title: $t('common.operate'), |
| | | align: 'center', |
| | | fixed: 'right', |
| | | width: 130, |
| | | render: row => { |
| | | const divider = () => { |
| | | if (!hasAuth('qm:judge:edit') || !hasAuth('qm:judge:remove')) { |
| | | return null; |
| | | columns: () => [ |
| | | { |
| | | type: 'selection', |
| | | align: 'center', |
| | | width: 48 |
| | | }, |
| | | { |
| | | key: 'index', |
| | | title: $t('common.index'), |
| | | align: 'center', |
| | | width: 64, |
| | | render: (_, index) => index + 1 |
| | | }, |
| | | { |
| | | key: 'judgeName', |
| | | title: '判定名称', |
| | | align: 'center', |
| | | width: 200, |
| | | render: row => ( |
| | | <NTooltip trigger="hover"> |
| | | {{ |
| | | trigger: () => ( |
| | | <div |
| | | style={{ |
| | | whiteSpace: 'nowrap', |
| | | overflow: 'hidden', |
| | | textOverflow: 'ellipsis' |
| | | }} |
| | | > |
| | | {row.judgeName} |
| | | </div> |
| | | ), |
| | | default: () => row.judgeName |
| | | }} |
| | | </NTooltip> |
| | | ) |
| | | }, |
| | | { |
| | | key: 'category', |
| | | title: '物料类型', |
| | | align: 'center', |
| | | width: 100, |
| | | render: row => { |
| | | if (row.category === 0) { |
| | | return '成品'; |
| | | } |
| | | return <NDivider vertical />; |
| | | }; |
| | | if (row.category === 1) { |
| | | return '辅料'; |
| | | } |
| | | return String(row.category); |
| | | } |
| | | }, |
| | | { |
| | | key: 'typeName', |
| | | title: '辅料类型', |
| | | align: 'center', |
| | | width: 100, |
| | | render: row => ( |
| | | <NTooltip trigger="hover"> |
| | | {{ |
| | | trigger: () => ( |
| | | <div |
| | | style={{ |
| | | whiteSpace: 'nowrap', |
| | | overflow: 'hidden', |
| | | textOverflow: 'ellipsis' |
| | | }} |
| | | > |
| | | {row.typeName} |
| | | </div> |
| | | ), |
| | | default: () => row.typeName |
| | | }} |
| | | </NTooltip> |
| | | ) |
| | | }, |
| | | { |
| | | key: 'matName', |
| | | title: '物料牌号', |
| | | align: 'center', |
| | | width: 180, |
| | | render: row => ( |
| | | <NTooltip trigger="hover"> |
| | | {{ |
| | | trigger: () => ( |
| | | <div |
| | | style={{ |
| | | whiteSpace: 'nowrap', |
| | | overflow: 'hidden', |
| | | textOverflow: 'ellipsis' |
| | | }} |
| | | > |
| | | {row.matName} |
| | | </div> |
| | | ), |
| | | default: () => row.matName |
| | | }} |
| | | </NTooltip> |
| | | ) |
| | | }, |
| | | { |
| | | key: 'matCode', |
| | | title: '物料牌号代码', |
| | | align: 'center', |
| | | width: 150 |
| | | }, |
| | | { |
| | | key: 'version', |
| | | title: '版本号', |
| | | align: 'center', |
| | | width: 100 |
| | | }, |
| | | { |
| | | key: 'status', |
| | | title: '状态', |
| | | align: 'center', |
| | | width: 100, |
| | | render: row => { |
| | | if (row.status === 1) { |
| | | return '启用'; |
| | | } |
| | | if (row.status === 0) { |
| | | return '归档'; |
| | | } |
| | | return String(row.status); |
| | | } |
| | | }, |
| | | { |
| | | key: 'stdName', |
| | | title: '判定规程', |
| | | align: 'center', |
| | | width: 200 |
| | | }, |
| | | { |
| | | key: 'cdate', |
| | | title: '创建时间', |
| | | align: 'center', |
| | | width: 180 |
| | | }, |
| | | { |
| | | key: 'oper', |
| | | title: '操作人', |
| | | align: 'center', |
| | | width: 100 |
| | | }, |
| | | { |
| | | key: 'des', |
| | | title: '备注', |
| | | align: 'center', |
| | | width: 200 |
| | | }, |
| | | { |
| | | key: 'operate', |
| | | title: $t('common.operate'), |
| | | align: 'center', |
| | | fixed: 'right', |
| | | width: 130, |
| | | render: row => { |
| | | const divider = () => { |
| | | if (!hasAuth('qm:judge:edit') || !hasAuth('qm:judge:remove')) { |
| | | return null; |
| | | } |
| | | return <NDivider vertical />; |
| | | }; |
| | | |
| | | const editBtn = () => { |
| | | if (!hasAuth('qm:judge:edit')) { |
| | | return null; |
| | | } |
| | | const editBtn = () => { |
| | | if (!hasAuth('qm:judge:edit')) { |
| | | return null; |
| | | } |
| | | return ( |
| | | <ButtonIcon |
| | | text |
| | | type="primary" |
| | | icon="material-symbols:drive-file-rename-outline-outline" |
| | | tooltipContent={$t('common.edit')} |
| | | onClick={() => edit(row.id)} |
| | | /> |
| | | ); |
| | | }; |
| | | |
| | | const deleteBtn = () => { |
| | | if (!hasAuth('qm:judge:remove')) { |
| | | return null; |
| | | } |
| | | return ( |
| | | <ButtonIcon |
| | | text |
| | | type="error" |
| | | icon="material-symbols:delete-outline" |
| | | tooltipContent={$t('common.delete')} |
| | | popconfirmContent={$t('common.confirmDelete')} |
| | | onPositiveClick={() => handleDelete(row.id)} |
| | | /> |
| | | ); |
| | | }; |
| | | |
| | | return ( |
| | | <ButtonIcon |
| | | text |
| | | type="primary" |
| | | icon="material-symbols:drive-file-rename-outline-outline" |
| | | tooltipContent={$t('common.edit')} |
| | | onClick={() => edit(row.id)} |
| | | /> |
| | | <div class="flex-center gap-8px"> |
| | | {editBtn()} |
| | | {divider()} |
| | | {deleteBtn()} |
| | | </div> |
| | | ); |
| | | }; |
| | | |
| | | const deleteBtn = () => { |
| | | if (!hasAuth('qm:judge:remove')) { |
| | | return null; |
| | | } |
| | | return ( |
| | | <ButtonIcon |
| | | text |
| | | type="error" |
| | | icon="material-symbols:delete-outline" |
| | | tooltipContent={$t('common.delete')} |
| | | popconfirmContent={$t('common.confirmDelete')} |
| | | onPositiveClick={() => handleDelete(row.id)} |
| | | /> |
| | | ); |
| | | }; |
| | | |
| | | return ( |
| | | <div class="flex-center gap-8px"> |
| | | {editBtn()} |
| | | {divider()} |
| | | {deleteBtn()} |
| | | </div> |
| | | ); |
| | | } |
| | | } |
| | | } |
| | | ] |
| | | }); |
| | | ] |
| | | }); |
| | | |
| | | const { drawerVisible, operateType, editingData, handleAdd, handleEdit, checkedRowKeys, onBatchDeleted, onDeleted } = |
| | | useTableOperate(data, 'id', getData); |
| | |
| | | function handleExport() { |
| | | download('/qm/judge/export', searchParams.value, `判定依据_${new Date().getTime()}.xlsx`); |
| | | } |
| | | |
| | | function handleRowClick(row: any) { |
| | | return { |
| | | onClick: (e: MouseEvent) => { |
| | | const target = e.target as HTMLElement | null; |
| | | if (target?.closest('.n-checkbox') || target?.closest('.n-button') || target?.closest('a')) return; |
| | | selectedJudgeId.value = row.id; |
| | | }, |
| | | style: 'cursor: pointer;' |
| | | }; |
| | | } |
| | | </script> |
| | | |
| | | <template> |
| | | <div class="min-h-500px flex-col-stretch gap-16px overflow-hidden lt-sm:overflow-auto"> |
| | | <JudgeSearch v-model:model="searchParams" @search="getDataByPage" /> |
| | | <NCard title="判定依据列表" :bordered="false" size="small" class="card-wrapper sm:flex-1-hidden"> |
| | | <template #header-extra> |
| | | <TableHeaderOperation |
| | | v-model:columns="columnChecks" |
| | | :disabled-delete="checkedRowKeys.length === 0" |
| | | :loading="loading" |
| | | :show-add="hasAuth('qm:judge:add')" |
| | | :show-delete="hasAuth('qm:judge:remove')" |
| | | :show-export="hasAuth('qm:judge:export')" |
| | | @add="handleAdd" |
| | | @delete="handleBatchDelete" |
| | | @export="handleExport" |
| | | @refresh="getData" |
| | | /> |
| | | </template> |
| | | <NDataTable |
| | | v-model:checked-row-keys="checkedRowKeys" |
| | | :columns="columns" |
| | | :data="data" |
| | | <div class="judge-content-area relative flex-col-stretch gap-16px sm:flex-1-hidden"> |
| | | <NCard |
| | | title="判定依据列表" |
| | | :bordered="false" |
| | | size="small" |
| | | :flex-height="!appStore.isMobile" |
| | | :scroll-x="scrollX" |
| | | :loading="loading" |
| | | remote |
| | | :row-key="row => row.id" |
| | | :pagination="mobilePagination" |
| | | class="sm:h-full" |
| | | /> |
| | | <JudgeOperateDrawer |
| | | v-model:visible="drawerVisible" |
| | | :operate-type="operateType" |
| | | :row-data="editingData" |
| | | @submitted="getDataByPage" |
| | | /> |
| | | </NCard> |
| | | class="flex-col-stretch card-wrapper sm:flex-1-hidden" |
| | | :content-style="{ flex: 1, overflow: 'hidden', display: 'flex', flexDirection: 'column' }" |
| | | > |
| | | <template #header-extra> |
| | | <TableHeaderOperation |
| | | v-model:columns="columnChecks" |
| | | :disabled-delete="checkedRowKeys.length === 0" |
| | | :loading="loading" |
| | | :show-add="hasAuth('qm:judge:add')" |
| | | :show-delete="hasAuth('qm:judge:remove')" |
| | | :show-export="hasAuth('qm:judge:export')" |
| | | @add="handleAdd" |
| | | @delete="handleBatchDelete" |
| | | @export="handleExport" |
| | | @refresh="getData" |
| | | /> |
| | | </template> |
| | | <NDataTable |
| | | v-model:checked-row-keys="checkedRowKeys" |
| | | :columns="columns" |
| | | :data="data" |
| | | size="small" |
| | | :flex-height="!appStore.isMobile" |
| | | :scroll-x="scrollX" |
| | | :loading="loading" |
| | | remote |
| | | :row-key="row => row.id" |
| | | :pagination="mobilePagination" |
| | | :row-props="handleRowClick" |
| | | class="flex-1-hidden" |
| | | /> |
| | | <JudgeOperateDrawer |
| | | v-model:visible="drawerVisible" |
| | | :operate-type="operateType" |
| | | :row-data="editingData" |
| | | @submitted="getDataByPage" |
| | | /> |
| | | </NCard> |
| | | <JudgeDetailsSubTable :judge-id="selectedJudgeId" class="sm:flex-1-hidden" /> |
| | | </div> |
| | | </div> |
| | | </template> |
| | | |
| | | <style scoped></style> |
| | | <style scoped> |
| | | :deep(.n-data-table-th), |
| | | :deep(.n-data-table-td) { |
| | | padding: 4px 6px; |
| | | overflow: hidden; |
| | | } |
| | | </style> |