| | |
| | | import ButtonIcon from '@/components/custom/button-icon.vue'; |
| | | import StdOperateDrawer from './modules/std-operate-drawer.vue'; |
| | | import StdSearch from './modules/std-search.vue'; |
| | | import StdSubTable from './modules/std-sub-table.vue'; |
| | | |
| | | defineOptions({ |
| | | name: 'StdList' |
| | |
| | | const appStore = useAppStore(); |
| | | const { download } = useDownload(); |
| | | const { hasAuth } = useAuth(); |
| | | |
| | | const selectedStdId = ref<CommonType.IdType | null>(null); |
| | | |
| | | const searchParams = ref<Api.Qm.StdSearchParams>({ |
| | | pageNum: 1, |
| | |
| | | minWidth: 120, |
| | | render: row => { |
| | | const v = String(row?.category ?? ''); |
| | | return v === '0' ? '成品' : v === '1' ? '辅料' : v; |
| | | if (v === '0') return '成品'; |
| | | if (v === '1') return '辅料'; |
| | | return v; |
| | | } |
| | | }, |
| | | { |
| | |
| | | minWidth: 120, |
| | | render: row => { |
| | | const v = String(row?.enable ?? ''); |
| | | return v === '0' ? '停用' : v === '1' ? '启用' : v; |
| | | if (v === '0') return '停用'; |
| | | if (v === '1') return '启用'; |
| | | return v; |
| | | } |
| | | }, |
| | | { |
| | |
| | | function handleExport() { |
| | | download('/qm/std/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; |
| | | selectedStdId.value = row.id; |
| | | }, |
| | | style: 'cursor: pointer;' |
| | | }; |
| | | } |
| | | </script> |
| | | |
| | | <template> |
| | | <div class="min-h-500px flex-col-stretch gap-16px overflow-hidden lt-sm:overflow-auto"> |
| | | <StdSearch 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:std:add')" |
| | | :show-delete="hasAuth('qm:std:remove')" |
| | | :show-export="hasAuth('qm:std:export')" |
| | | @add="handleAdd" |
| | | @delete="handleBatchDelete" |
| | | @export="handleExport" |
| | | @refresh="getData" |
| | | /> |
| | | </template> |
| | | <NDataTable |
| | | v-model:checked-row-keys="checkedRowKeys" |
| | | :columns="columns" |
| | | :data="data" |
| | | <div class="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" |
| | | /> |
| | | <StdOperateDrawer |
| | | v-model:visible="drawerVisible" |
| | | :operate-type="operateType" |
| | | :row-data="editingData" |
| | | @submitted="getDataByPage" |
| | | /> |
| | | </NCard> |
| | | class="card-wrapper flex-col-stretch 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:std:add')" |
| | | :show-delete="hasAuth('qm:std:remove')" |
| | | :show-export="hasAuth('qm:std: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" |
| | | /> |
| | | <StdOperateDrawer |
| | | v-model:visible="drawerVisible" |
| | | :operate-type="operateType" |
| | | :row-data="editingData" |
| | | @submitted="getDataByPage" |
| | | /> |
| | | </NCard> |
| | | <StdSubTable :std-id="selectedStdId" 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> |