| ÎļþÃû´Ó src/views/stocktaking/plan/components/select-dialog.vue ÐÞ¸Ä |
| | |
| | | <script lang="ts" setup> |
| | | import type { VxeTableGridOptions } from '#/adapter/vxe-table'; |
| | | import type { MesWmStockTakingPlanApi } from '#/api/mes/wm/stocktaking/plan'; |
| | | import type { ErpSupplierApi } from '#/api/erp/purchase/supplier'; |
| | | |
| | | import { nextTick, ref } from 'vue'; |
| | | |
| | |
| | | import { message, Modal } from 'ant-design-vue'; |
| | | |
| | | import { useVbenVxeGrid } from '#/adapter/vxe-table'; |
| | | import { getStockTakingPlanPage } from '#/api/mes/wm/stocktaking/plan'; |
| | | import { getSupplierPage } from '#/api/erp/purchase/supplier'; |
| | | |
| | | import { useSelectGridColumns, useSelectGridFormSchema } from '../data'; |
| | | defineOptions({ name: 'ErpSupplierSelectDialog' }); |
| | | |
| | | const emit = defineEmits<{ |
| | | selected: [rows: MesWmStockTakingPlanApi.StockTakingPlan[]]; |
| | | selected: [rows: ErpSupplierApi.Supplier[]]; |
| | | }>(); |
| | | |
| | | const open = ref(false); // å¼¹çªæ¯å¦æå¼ |
| | | const multiple = ref(true); // æ¯å¦å¤é |
| | | const selectedRows = ref<MesWmStockTakingPlanApi.StockTakingPlan[]>([]); // å·²éçç¹æ¹æ¡ |
| | | const preSelectedIds = ref<number[]>([]); // é¢éçç¹æ¹æ¡ç¼å· |
| | | const open = ref(false); |
| | | const multiple = ref(true); |
| | | const selectedRows = ref<ErpSupplierApi.Supplier[]>([]); |
| | | const preSelectedIds = ref<number[]>([]); |
| | | |
| | | /** è·åå¤éè®°å½ï¼å
å« VXE reserve è·¨é¡µè®°å½ */ |
| | | function getTableRows() { |
| | | return gridApi.grid.getTableData().fullData as ErpSupplierApi.Supplier[]; |
| | | } |
| | | |
| | | function getMultipleSelectedRows() { |
| | | const selectedMap = new Map< |
| | | number, |
| | | MesWmStockTakingPlanApi.StockTakingPlan |
| | | >(); |
| | | const selectedMap = new Map<number, ErpSupplierApi.Supplier>(); |
| | | const records = [ |
| | | ...(gridApi.grid.getCheckboxReserveRecords?.() ?? []), |
| | | ...(gridApi.grid.getCheckboxRecords?.() ?? []), |
| | | ] as MesWmStockTakingPlanApi.StockTakingPlan[]; |
| | | ] as ErpSupplierApi.Supplier[]; |
| | | records.forEach((row) => { |
| | | if (row.id !== undefined && row.id !== null) { |
| | | selectedMap.set(row.id, row); |
| | | const rowId = row.id; |
| | | if (rowId) { |
| | | selectedMap.set(rowId, row); |
| | | } |
| | | }); |
| | | return [...selectedMap.values()]; |
| | | } |
| | | |
| | | /** å¤çå¾éåå */ |
| | | function handleCheckboxSelectChange() { |
| | | selectedRows.value = getMultipleSelectedRows(); |
| | | } |
| | | |
| | | /** å¤çåéåå */ |
| | | function handleRadioChange(row: MesWmStockTakingPlanApi.StockTakingPlan) { |
| | | function handleRadioChange(row: ErpSupplierApi.Supplier) { |
| | | selectedRows.value = [row]; |
| | | } |
| | | |
| | | /** å¤é模å¼ä¸åæ¢è¡å¾é */ |
| | | async function toggleMultipleRow(row: MesWmStockTakingPlanApi.StockTakingPlan) { |
| | | async function toggleMultipleRow(row: ErpSupplierApi.Supplier) { |
| | | const selected = gridApi.grid.isCheckedByCheckboxRow(row); |
| | | await gridApi.grid.setCheckboxRow(row, !selected); |
| | | selectedRows.value = getMultipleSelectedRows(); |
| | | } |
| | | |
| | | /** å¤çè¡åå»ï¼åéç´æ¥ç¡®è®¤ï¼å¤é忢å¾é */ |
| | | async function handleCellDblclick({ |
| | | row, |
| | | }: { |
| | | row: MesWmStockTakingPlanApi.StockTakingPlan; |
| | | }) { |
| | | async function handleCellDblclick({ row }: { row: ErpSupplierApi.Supplier }) { |
| | | if (multiple.value) { |
| | | await toggleMultipleRow(row); |
| | | return; |
| | |
| | | handleConfirm(); |
| | | } |
| | | |
| | | /** åæ¾é¢éçç¹æ¹æ¡ */ |
| | | async function applyPreSelection() { |
| | | if (preSelectedIds.value.length === 0) { |
| | | return; |
| | | } |
| | | const rows = |
| | | gridApi.grid.getData() as MesWmStockTakingPlanApi.StockTakingPlan[]; |
| | | const rows = getTableRows(); |
| | | for (const row of rows) { |
| | | if ( |
| | | row.id === undefined || |
| | |
| | | } |
| | | } |
| | | |
| | | function useSelectGridFormSchema() { |
| | | return [ |
| | | { |
| | | fieldName: 'name', |
| | | label: 'ä¾åºååç§°', |
| | | component: 'Input', |
| | | componentProps: { |
| | | placeholder: '请è¾å
¥ä¾åºååç§°', |
| | | allowClear: true, |
| | | }, |
| | | }, |
| | | ]; |
| | | } |
| | | |
| | | function useSelectGridColumns(multiple = false): VxeTableGridOptions<ErpSupplierApi.Supplier>['columns'] { |
| | | return [ |
| | | { |
| | | type: multiple ? 'checkbox' : 'radio', |
| | | width: 50, |
| | | }, |
| | | { |
| | | field: 'name', |
| | | title: 'ä¾åºååç§°', |
| | | minWidth: 150, |
| | | }, |
| | | { |
| | | field: 'contact', |
| | | title: 'è系人', |
| | | minWidth: 120, |
| | | }, |
| | | { |
| | | field: 'mobile', |
| | | title: 'ææºå·ç ', |
| | | minWidth: 130, |
| | | }, |
| | | { |
| | | field: 'telephone', |
| | | title: 'èç³»çµè¯', |
| | | minWidth: 130, |
| | | }, |
| | | ]; |
| | | } |
| | | |
| | | const [Grid, gridApi] = useVbenVxeGrid({ |
| | | formOptions: { |
| | | schema: useSelectGridFormSchema(), |
| | | }, |
| | | gridOptions: { |
| | | columns: useSelectGridColumns(true), |
| | | height: 480, |
| | | height: 520, |
| | | keepSource: true, |
| | | checkboxConfig: { |
| | | highlight: true, |
| | |
| | | proxyConfig: { |
| | | ajax: { |
| | | query: async ({ page }, formValues) => { |
| | | return await getStockTakingPlanPage({ |
| | | return await getSupplierPage({ |
| | | pageNo: page.currentPage, |
| | | pageSize: page.pageSize, |
| | | ...formValues, |
| | | // éæ©å¨åªå±ç¤ºå¯ç¨ç¶æçæ¹æ¡ |
| | | status: CommonStatusEnum.ENABLE, |
| | | }); |
| | | }, |
| | |
| | | refresh: true, |
| | | search: true, |
| | | }, |
| | | } as VxeTableGridOptions<MesWmStockTakingPlanApi.StockTakingPlan>, |
| | | } as VxeTableGridOptions<ErpSupplierApi.Supplier>, |
| | | gridEvents: { |
| | | cellDblclick: handleCellDblclick, |
| | | checkboxAll: handleCheckboxSelectChange, |
| | | checkboxChange: handleCheckboxSelectChange, |
| | | radioChange: ({ |
| | | row, |
| | | }: { |
| | | row: MesWmStockTakingPlanApi.StockTakingPlan; |
| | | }) => { |
| | | radioChange: ({ row }: { row: ErpSupplierApi.Supplier }) => { |
| | | handleRadioChange(row); |
| | | }, |
| | | }, |
| | | }); |
| | | |
| | | /** éç½®æ¥è¯¢åéæ©ç¶æ */ |
| | | async function resetQueryState() { |
| | | selectedRows.value = []; |
| | | await gridApi.grid.clearCheckboxRow(); |
| | |
| | | await gridApi.formApi.resetForm(); |
| | | } |
| | | |
| | | /** æå¼çç¹æ¹æ¡éæ©å¼¹çª */ |
| | | async function openModal( |
| | | selectedIds?: number[], |
| | | options?: { multiple?: boolean }, |
| | |
| | | await applyPreSelection(); |
| | | } |
| | | |
| | | /** å
³éå¼¹çª */ |
| | | function closeModal() { |
| | | async function closeModal() { |
| | | open.value = false; |
| | | await resetQueryState(); |
| | | } |
| | | |
| | | /** ç¡®è®¤éæ© */ |
| | | function handleConfirm() { |
| | | const rows = multiple.value ? getMultipleSelectedRows() : selectedRows.value; |
| | | if (rows.length === 0) { |
| | |
| | | <template> |
| | | <Modal |
| | | v-model:open="open" |
| | | :destroy-on-close="true" |
| | | title="çç¹æ¹æ¡éæ©" |
| | | title="ä¾åºåéæ©" |
| | | width="70%" |
| | | @cancel="closeModal" |
| | | :destroy-on-close="true" |
| | | @ok="handleConfirm" |
| | | @cancel="closeModal" |
| | | > |
| | | <Grid table-title="çç¹æ¹æ¡å表" /> |
| | | <Grid table-title="ä¾åºåå表" /> |
| | | </Modal> |
| | | </template> |