125 lines
3.2 KiB
Vue
125 lines
3.2 KiB
Vue
<script lang="ts" setup>
|
|
import { computed, nextTick, ref, watch } from 'vue';
|
|
|
|
import { useVbenModal } from '@vben/common-ui';
|
|
|
|
import { Button, Image, Tabs, TabPane } from 'ant-design-vue';
|
|
|
|
import { useVbenVxeGrid } from '#/adapter/vxe-table';
|
|
|
|
import {
|
|
type DrugItem,
|
|
type ProductTypeOption,
|
|
fetchProductTypeOptions,
|
|
getDrugPriceGridOptions,
|
|
handleBatchSave,
|
|
handleSaveRow,
|
|
TCM_PLACEHOLDER_IMAGE,
|
|
} from '../config/drug-price-table';
|
|
import { drugPriceFormOptions } from '../config/search';
|
|
|
|
const activeTab = ref<string>('');
|
|
const storeId = ref<number>(0);
|
|
const productTypeOptions = ref<ProductTypeOption[]>([]);
|
|
|
|
const [Modal, modalApi] = useVbenModal({
|
|
fullscreenButton: false,
|
|
draggable: true,
|
|
width: 1200,
|
|
onCancel() {
|
|
modalApi.close();
|
|
},
|
|
onConfirm: async () => {
|
|
await handleBatchSave(drugGridApi, storeId.value);
|
|
},
|
|
onOpenChange: async (isOpen: boolean) => {
|
|
if (isOpen) {
|
|
const data = modalApi.getData<{ store_id: number }>();
|
|
if (data?.store_id) {
|
|
storeId.value = data.store_id;
|
|
}
|
|
productTypeOptions.value = await fetchProductTypeOptions();
|
|
activeTab.value = String(productTypeOptions.value[0]?.value ?? '1');
|
|
await nextTick();
|
|
drugGridApi?.reload?.();
|
|
} else {
|
|
activeTab.value = '';
|
|
storeId.value = 0;
|
|
productTypeOptions.value = [];
|
|
}
|
|
},
|
|
});
|
|
|
|
const handleSaveCurrentRow = async (row: DrugItem) => {
|
|
await handleSaveRow(row, storeId.value, drugGridApi);
|
|
};
|
|
|
|
const activeProductType = computed(() => Number(activeTab.value) || 1);
|
|
|
|
const drugPriceGridOptions = computed(() =>
|
|
getDrugPriceGridOptions(
|
|
() => storeId.value,
|
|
() => activeProductType.value,
|
|
handleSaveCurrentRow,
|
|
),
|
|
);
|
|
|
|
const [DrugGrid, drugGridApi] = useVbenVxeGrid({
|
|
formOptions: drugPriceFormOptions,
|
|
gridOptions: drugPriceGridOptions,
|
|
});
|
|
|
|
watch(activeTab, async (tab, prev) => {
|
|
if (!storeId.value || !tab || !prev) {
|
|
return;
|
|
}
|
|
await nextTick();
|
|
drugGridApi?.reload?.();
|
|
});
|
|
|
|
const handleBatchSaveCurrent = async () => {
|
|
await handleBatchSave(drugGridApi, storeId.value);
|
|
};
|
|
|
|
const rowImageSrc = (row: DrugItem) => {
|
|
return row.image || TCM_PLACEHOLDER_IMAGE;
|
|
};
|
|
</script>
|
|
|
|
<template>
|
|
<Modal title="修改药品价格" class="w-[80%]">
|
|
<div>
|
|
<Tabs v-model:activeKey="activeTab">
|
|
<TabPane
|
|
v-for="option in productTypeOptions"
|
|
:key="String(option.value)"
|
|
:tab="option.label"
|
|
/>
|
|
</Tabs>
|
|
<DrugGrid v-if="activeTab">
|
|
<template #toolbar-buttons>
|
|
<Button type="primary" @click="handleBatchSaveCurrent">
|
|
批量保存
|
|
</Button>
|
|
</template>
|
|
<template #drug-image="{ row }">
|
|
<div class="div" style="width: 120px; height: 120px; overflow: scroll">
|
|
<Image :src="rowImageSrc(row)" height="30" width="30" />
|
|
</div>
|
|
</template>
|
|
<template #row-action="{ row }">
|
|
<Button type="link" size="small" @click="handleSaveCurrentRow(row)">
|
|
保存
|
|
</Button>
|
|
</template>
|
|
</DrugGrid>
|
|
</div>
|
|
</Modal>
|
|
</template>
|
|
|
|
<style scoped>
|
|
:deep(.ant-tabs-content-holder) {
|
|
padding-top: 16px;
|
|
}
|
|
</style>
|