372 lines
10 KiB
Vue
372 lines
10 KiB
Vue
<script lang="ts" setup>
|
||
import type { VxeGridListeners } from '#/adapter/vxe-table';
|
||
|
||
import { computed, ref } from 'vue';
|
||
|
||
import { Page, useVbenModal } from '@vben/common-ui';
|
||
import { useUserStore } from '@vben/stores';
|
||
|
||
import { useClipboard } from '@vueuse/core';
|
||
import { Button, Image, message, Switch, Tag } from 'ant-design-vue';
|
||
|
||
import { useVbenVxeGrid } from '#/adapter/vxe-table';
|
||
import { Icon } from '#/components/icon';
|
||
import QrCodePreview from '#/components/modal/QrCodePreview.vue';
|
||
import { TableAction } from '#/components/table-action';
|
||
|
||
import {
|
||
deleteStore,
|
||
openPcWindowsApiByStore,
|
||
openQrCodeApi,
|
||
updateStoreShippingFree,
|
||
updateStoreSubscribeStatus,
|
||
} from './api';
|
||
import FormModalDemo from './components/modal.vue';
|
||
import DrugPriceModal from './components/DrugPriceModal.vue';
|
||
import BindConsultationModal from './components/BindConsultationModal.vue';
|
||
import { formOptions } from './config/search';
|
||
import { gridOptions } from './config/table';
|
||
|
||
const userStore = useUserStore();
|
||
|
||
// 判断是否为平台管理员（user_type === 2）
|
||
const isPlatformAdmin = computed(() => {
|
||
return userStore?.userInfo?.roles?.user_type === 2;
|
||
});
|
||
|
||
const hasTopTableDropDownActions = ref(false);
|
||
|
||
const gridEvents: VxeGridListeners<any> = {
|
||
checkboxChange() {
|
||
// eslint-disable-next-line no-use-before-define
|
||
const records = gridApi.grid.getCheckboxRecords();
|
||
hasTopTableDropDownActions.value = records.length > 0;
|
||
},
|
||
checkboxAll() {
|
||
// eslint-disable-next-line no-use-before-define
|
||
const records = gridApi.grid.getCheckboxRecords();
|
||
hasTopTableDropDownActions.value = records.length > 0;
|
||
},
|
||
};
|
||
|
||
const [Grid, gridApi] = useVbenVxeGrid({
|
||
formOptions,
|
||
gridOptions,
|
||
gridEvents,
|
||
});
|
||
|
||
const [QrCodePreviewModal, QrCodePreviewApi] = useVbenModal({
|
||
connectedComponent: QrCodePreview,
|
||
});
|
||
|
||
const openQrCodeModal = (url, title, address) => {
|
||
QrCodePreviewApi.setData({
|
||
// 表单值
|
||
values: url,
|
||
title,
|
||
address,
|
||
});
|
||
QrCodePreviewApi.open();
|
||
};
|
||
|
||
const [FormModal, formModalApi] = useVbenModal({
|
||
connectedComponent: FormModalDemo,
|
||
});
|
||
|
||
const [DrugPriceModalComponent, drugPriceModalApi] = useVbenModal({
|
||
connectedComponent: DrugPriceModal,
|
||
});
|
||
|
||
const [BindConsultationModalComponent, bindConsultationModalApi] = useVbenModal({
|
||
connectedComponent: BindConsultationModal,
|
||
});
|
||
|
||
const showModal = (data = {}, isUpdate = false) => {
|
||
formModalApi.setData({
|
||
// 表单值
|
||
values: data,
|
||
update: isUpdate,
|
||
gridApi,
|
||
});
|
||
formModalApi.open();
|
||
};
|
||
|
||
/**
|
||
* 打开修改药品价格模态框
|
||
*/
|
||
const showDrugPriceModal = (row: any) => {
|
||
drugPriceModalApi.setData({
|
||
store_id: row.id,
|
||
});
|
||
drugPriceModalApi.open();
|
||
};
|
||
|
||
/**
|
||
* 打开绑定在线复诊配置弹窗
|
||
*/
|
||
const showBindConsultationModal = (row: any) => {
|
||
bindConsultationModalApi.setData({
|
||
values: row,
|
||
gridApi,
|
||
});
|
||
bindConsultationModalApi.open();
|
||
};
|
||
|
||
const deleteApi = (row: any) => {
|
||
let ids = [];
|
||
if (row) {
|
||
ids.push(row);
|
||
} else {
|
||
ids = gridApi.grid.getCheckboxRecords().map((item) => item.id);
|
||
}
|
||
deleteStore({ ids }).then(() => {
|
||
message.success('删除成功!');
|
||
gridApi.reload();
|
||
});
|
||
};
|
||
/**
|
||
* 开启后台账号
|
||
*/
|
||
function openPcWindows(id) {
|
||
openPcWindowsApiByStore(id).then(() => {
|
||
message.success('操作成功!');
|
||
gridApi.reload();
|
||
});
|
||
}
|
||
/**
|
||
* 开启后台账号
|
||
*/
|
||
function openQrCode(id) {
|
||
openQrCodeApi(id).then(() => {
|
||
message.success('操作成功!');
|
||
gridApi.reload();
|
||
});
|
||
}
|
||
|
||
function copyText(source) {
|
||
copy(source);
|
||
message.success('复制成功');
|
||
}
|
||
const { copy } = useClipboard({ legacy: true });
|
||
|
||
/**
|
||
* 更新包邮状态
|
||
*/
|
||
const updateShippingFree = (id: number) => {
|
||
updateStoreShippingFree({ id }).then(() => {
|
||
message.success('修改成功!');
|
||
gridApi.query();
|
||
});
|
||
};
|
||
|
||
/**
|
||
* 更新价格波动订阅状态
|
||
*/
|
||
const updateSubscribe = (id: number) => {
|
||
updateStoreSubscribeStatus({ id }).then(() => {
|
||
message.success('修改成功!');
|
||
gridApi.query();
|
||
});
|
||
};
|
||
</script>
|
||
|
||
<template>
|
||
<Page auto-content-height title="诊所管理">
|
||
<FormModal />
|
||
<QrCodePreviewModal />
|
||
<DrugPriceModalComponent />
|
||
<BindConsultationModalComponent />
|
||
<Grid>
|
||
<template #toolbar-buttons>
|
||
<TableAction
|
||
:actions="[
|
||
{
|
||
label: '新增',
|
||
type: 'primary',
|
||
icon: 'ant-design:plus-outlined',
|
||
// auth: ['超级诊所', 'sys:user:save'],
|
||
onClick: showModal.bind(null),
|
||
},
|
||
]"
|
||
:drop-down-actions="[
|
||
{
|
||
label: '删除',
|
||
icon: 'ant-design:delete-outlined',
|
||
ifShow: hasTopTableDropDownActions,
|
||
// auth: ['超级诊所', 'sys:user:save'],
|
||
popConfirm: {
|
||
title: '确定删除吗？',
|
||
confirm: deleteApi.bind(null, false),
|
||
},
|
||
},
|
||
]"
|
||
>
|
||
<template #more>
|
||
<Button style="margin-left: 16px">
|
||
批量操作
|
||
<Icon icon="ant-design:down-outlined" />
|
||
</Button>
|
||
</template>
|
||
</TableAction>
|
||
</template>
|
||
<template #mobile="{ row }">
|
||
<div>
|
||
诊所联系人：{{ row.contact }}
|
||
<Button type="link" @click="copyText(row.contact)">复制</Button>
|
||
</div>
|
||
<div>
|
||
号码：{{ row.mobile }}
|
||
<Button type="link" @click="copyText(row.mobile)">复制</Button>
|
||
</div>
|
||
</template>
|
||
<template #qr_code="{ row }">
|
||
<div class="qr_code">
|
||
<Image
|
||
:preview="false"
|
||
:src="row.qr_code"
|
||
height="30"
|
||
width="30"
|
||
@click="
|
||
openQrCodeModal(
|
||
row.qr_code,
|
||
row.name,
|
||
`${row.province.name}${row.city.name}${row.position}`,
|
||
)
|
||
"
|
||
/>
|
||
</div>
|
||
</template>
|
||
<template #type="{ row }">
|
||
</template>
|
||
<template #online_consultation_config="{ row }">
|
||
<div
|
||
v-if="row.is_internet_medical === 1 && row.online_consultation_doctor_name"
|
||
class="cursor-pointer hover:text-blue-500"
|
||
@click="showBindConsultationModal(row)"
|
||
>
|
||
<div>负责人：{{ row.online_consultation_doctor_name }}</div>
|
||
</div>
|
||
<div
|
||
v-else-if="row.delegate_store_name || row.online_consultation_doctor_name"
|
||
class="cursor-pointer hover:text-blue-500"
|
||
@click="showBindConsultationModal(row)"
|
||
>
|
||
<div v-if="row.delegate_store_name">委托：{{ row.delegate_store_name }}</div>
|
||
<div v-if="row.online_consultation_doctor_name">负责人：{{ row.online_consultation_doctor_name }}</div>
|
||
</div>
|
||
<Button v-else type="link" size="small" @click="showBindConsultationModal(row)">
|
||
绑定
|
||
</Button>
|
||
</template>
|
||
<template #is_shipping_free="{ row }">
|
||
<Switch
|
||
:checked="row.is_shipping_free"
|
||
:checked-value="1"
|
||
:un-checked-value="0"
|
||
checked-children="包邮"
|
||
un-checked-children="不包邮"
|
||
@click="updateShippingFree(row.id)"
|
||
/>
|
||
</template>
|
||
<template #subscribe_price_change="{ row }">
|
||
<Tag
|
||
:color="row.subscribe_price_change === 0 ? 'success' : 'default'"
|
||
style="cursor: pointer"
|
||
@click="updateSubscribe(row.id)"
|
||
>
|
||
{{ row.subscribe_price_change === 0 ? '订阅' : '不订阅' }}
|
||
</Tag>
|
||
</template>
|
||
<template #start-time="{ row }">
|
||
早：<Tag color="success">{{ row.start_time }}</Tag>
|
||
<br />
|
||
<br />
|
||
晚：<Tag color="error">{{ row.end_time }}</Tag>
|
||
</template>
|
||
<template #toolbar-tools></template>
|
||
<template #action="{ row }">
|
||
<TableAction
|
||
:actions="[
|
||
{
|
||
label: '编辑',
|
||
type: 'link',
|
||
icon: 'uil:edit',
|
||
size: 'small',
|
||
// auth: ['store', 'sys:role:detail'],
|
||
onClick: showModal.bind(null, row, true),
|
||
},
|
||
{
|
||
label: '删除',
|
||
type: 'link',
|
||
icon: 'ant-design:delete-outlined',
|
||
size: 'small',
|
||
// auth: ['store', 'sys:role:detail'],
|
||
popConfirm: {
|
||
title: '确定删除吗？',
|
||
confirm: deleteApi.bind(null, row.id),
|
||
},
|
||
},
|
||
]"
|
||
:drop-down-actions="[
|
||
// {
|
||
// label: '编辑',
|
||
// type: 'link',
|
||
// icon: 'ant-design:delete-outlined',
|
||
// size: 'small',
|
||
// // auth: ['store', 'sys:role:detail'],
|
||
// onClick: showModal.bind(null, row, true),
|
||
// },
|
||
// {
|
||
// label: '删除',
|
||
// type: 'link',
|
||
// icon: 'ant-design:delete-outlined',
|
||
// size: 'small',
|
||
// // auth: ['store', 'sys:role:detail'],
|
||
// popConfirm: {
|
||
// title: '确定删除吗？',
|
||
// confirm: deleteApi.bind(null, row.id),
|
||
// },
|
||
// },
|
||
{
|
||
label: '开通后台',
|
||
type: 'link',
|
||
icon: 'uil:edit',
|
||
size: 'small',
|
||
// auth: ['store', 'sys:role:detail'],
|
||
popConfirm: {
|
||
title: '确定开通后台吗？',
|
||
confirm: openPcWindows.bind(null, row.id),
|
||
},
|
||
},
|
||
{
|
||
label: '生成诊所二维码',
|
||
type: 'link',
|
||
icon: 'uil:edit',
|
||
size: 'small',
|
||
// auth: ['store', 'sys:role:detail'],
|
||
popConfirm: {
|
||
title: '确定生成诊所二维码吗？',
|
||
confirm: openQrCode.bind(null, row.id),
|
||
},
|
||
},
|
||
{
|
||
label: '修改药品价格',
|
||
type: 'link',
|
||
icon: 'ant-design:edit-outlined',
|
||
size: 'small',
|
||
ifShow: isPlatformAdmin,
|
||
onClick: showDrugPriceModal.bind(null, row),
|
||
},
|
||
]"
|
||
/>
|
||
</template>
|
||
</Grid>
|
||
</Page>
|
||
</template>
|
||
|
||
<style scoped>
|
||
.qr_code:hover {
|
||
cursor: pointer;
|
||
}
|
||
</style>
|