health.admin/src/service/ServiceItemsSystem.vue

<script setup lang="ts">
import Enabled from '@/components/Enabled.vue';
import AddItems from './addItems.vue';
import type { SystemIteQuery, SystemItemModel } from '@/model/care.model';
// 接口数据
import { pageSystemCpMethod, deleteSystemCpMethod, selectSystemCpMethod } from '@/request/api/care.api';
import { usePagination, useRequest } from 'alova/client';
import { notification } from 'ant-design-vue';

import { type VxeFormListeners, type VxeFormProps, type VxeGridInstance, type VxeGridListeners, type VxeGridProps, VxeUI } from 'vxe-pc-ui';
import ServiceDetail from './ServiceDetail.vue';
import HealthEvaluation from './HealthEvaluation.vue';
import seeHealthEvaluation from './seeHealthEvaluation.vue';

const model = shallowRef<SystemIteQuery>();
const searchFormProps = reactive<VxeFormProps<SystemIteQuery>>({
  titleWidth: 100,
  titleAlign: 'right',
  titleColon: true,
  data: {},
  items: [
    {
      field: 'name',
      title: '项目名称',
      span: 8,
      itemRender: { name: 'VxeInput', props: { placeholder: '请输入' } },
    },
    {
      field: 'conditioningProgramType',
      title: '方案类型',
      span: 8,
      itemRender: { name: 'VxeInput', props: { placeholder: '请输入' } },
    },

    {
      span: 6,
      itemRender: {
        name: 'VxeButtonGroup',
        options: [
          { name: 'search', type: 'submit', content: '查询', status: 'primary' },
          { name: 'reset', type: 'reset', content: '清空', status: 'warning' },
          { name: 'add', content: '新增', status: 'primary' },
        ],
        events: {
          click(slotParams, { name }) {
            if (name === 'add') {
              // 新增
              editItems();
            }
          },
        },
      },
    },
    {
      span: 24,
      itemRender: {
        name: 'VxeButton',
        props: {
          content: '选择引入',
          type: 'warning',
          style: 'margin-top: 8px;background-color: #DE7D13;color: #FFFFFF;',
        },
        events: {
          click() {
            // 这里写你的选择引入逻辑
            selectImport();
          },
        },
      },
    },
  ],
});
function selectImport() {
  let ids = selectedRows.value.map((item: any) => item.id);
  if (ids.length > 0) {
    selectSystemCpMethod(ids).then((res) => {
      refresh(page.value);
      selectedRows.value = [];
      notification.success({
        message: '引入项目成功',
      });
    });
  } else {
    notification.warning({
      message: '请选择要引入的项目',
    });
  }
}
const searchFormEmits: VxeFormListeners<SystemIteQuery> = {
  // 查询随访计划
  submit({ data }) {
    model.value = { ...data };
  },
  // 重置
  reset({ data }) {
    model.value = { ...data };
  },
};
const gridRef = ref<VxeGridInstance<SystemItemModel>>();
const gridOptions = reactive<VxeGridProps<SystemItemModel>>({
  id: 'tag-list',
  border: true,
  showOverflow: true,
  height: 'auto',
  autoResize: true,
  syncResize: true,
  scrollY: { enabled: true, gt: 0 },
  toolbarConfig: {
    custom: true,
    zoom: true,
    slots: {
      // buttons: 'handle',
      tools: 'toolbar-extra',
    },
  },
  columnConfig: {
    resizable: true,
  },
  customConfig: {
    storage: true,
  },
  columns: [
    { type: 'checkbox', width: 100, fixed: 'left', title: '批量' },
    { field: 'name', title: '项目名称' },
    { field: 'conditioningProgramType', title: '方案类型' },
    { field: 'cpFixedPricingRule.unitPrice', title: '单价（元）', slots: { default: 'unitPriceCell' }, width: 150 },
    { field: 'cpFixedPricingRule.pricingUnit', title: '计价单位' },
    { field: 'cpFixedPricingRule.convertDose', title: '计价说明', width: 150, slots: { default: 'convertDoseCell' } },
    { field: 'conditioningProgramSupplierName', title: '供应商' },

    {
      title: '操作',
      align: 'center',
      width: 160,
      slots: { default: 'actionSlot' },
    },
  ],
  data: [],
});
const gridEvents: VxeGridListeners = {};

const { loading, page, pageSize, total, onSuccess, replace, refresh, remove,send:sendRefresh } = usePagination((page, size) => pageSystemCpMethod(page, size, model.value), {
  initialData: { data: [], total: 0 },
  initialPage: 1,
  initialPageSize: 100,
  watchingStates: [model],
  immediate: true,
});
onSuccess(({ data: { data } }) => {
  gridRef.value?.loadData(data);
});

// const send = () => {
//   sendRefresh();
// }

onMounted(() => {
  model.value = toRaw(searchFormProps.data);
});

function deleteItems(model: SystemItemModel, index: number) {
  const { name } = model;
  VxeUI.modal.confirm({
    title: `删除项目`,
    content: `确认要删除 ${name} 项目吗？`,
    showClose: false,
    onConfirm() {
      deleteSystemCpMethod(model).then(() => {
        notification.success({
          message: `删除项目: ${name}`,
          description: '操作成功',
        });
        refresh(page.value);
      });
    },
  });
}
function seeItems(model?: SystemItemModel, index?: number) {
  console.log(model, 'model');
  if (model?.isErasable === 'N') {
    // 健康咨询 健康评估 查看
    VxeUI.modal.open({
      title: model?.conditioningProgramType,
      height: 500,
      width: 750,
      id: `see-health-evaluation-modal`,
      remember: true,
      storage: true,
      slots: {
        default() {
          return h(seeHealthEvaluation, <any>{
            data: model,
          });
        },
      },
    });
  } else {
    VxeUI.modal.open({
      title: '查看',
      height: 600,
      width: 850,
      position: {
        top: Math.min(100, window.innerHeight * 0.1),
      },
      escClosable: true,
      destroyOnClose: true,
      id: `service-detail-modal`,
      remember: true,
      storage: true,
      slots: {
        default() {
          return h(ServiceDetail, <any>{
            data: model,
            onSubmit(data: SystemItemModel) {
              refresh(page.value);
              VxeUI.modal.close(`service-detail-modal`);
            },
          });
        },
      },
    });
  }
}
function editItems(model?: SystemItemModel, index?: number) {
  const addType = 'system';
  if (model?.isErasable === 'N') {
    // 健康咨询 健康评估 x显示
    VxeUI.modal.open({
      title: model?.conditioningProgramType ?? '项目',
      height: 400,
      width: 750,
      id: `health-consultation-modal`,
      remember: true,
      storage: true,
      slots: {
        default() {
          return h(HealthEvaluation, <any>{
            data: {
              ...model,
              addType,
            },
          });
        },
      },
    });
  } else {
    VxeUI.modal.open({
      title: model?.id ? `编辑项目` : `新增项目`,
      height: 700,
      width: 850,
      position: {
        top: Math.min(100, window.innerHeight * 0.1),
      },
      escClosable: true,
      destroyOnClose: true,
      id: `add-items-modal`,
      remember: true,
      storage: true,
      slots: {
        default() {
          return h(AddItems, <any>{
            data: {
              ...model,
              addType,
            },
            onSubmit(data: SystemItemModel) {
              refresh(page.value);
              VxeUI.modal.close(`add-items-modal`);
            },
          });
        },
      },
    });
  }
}
const selectedRows = ref<any[]>([]);
const onCheckboxChange = (params: any) => {
  const { records } = params; // 当前选中的行数据
  selectedRows.value = records;
};

const onCheckboxAll = (params: any) => {
  const { records } = params; // 全选时选中的行数据
  selectedRows.value = records;
};
defineExpose({
  send: sendRefresh,
})
</script>
<template>
  <div class="page-container flex flex-col">
    <header class="flex-none mt-4">
      <vxe-form v-bind="searchFormProps" v-on="searchFormEmits"></vxe-form>
    </header>
    <main class="flex-auto overflow-hidden">
      <vxe-grid ref="gridRef" v-bind="gridOptions" v-on="gridEvents" :loading="loading" @checkbox-change="onCheckboxChange" @checkbox-all="onCheckboxAll">
        <template #unitPriceCell="{ row }">
          <!-- {{ row.cpDynamicPricingRule }} -->
          {{ row.pricingType === '1' ? `` : row.cpFixedPricingRule?.unitPrice }}
        </template>
        <template #convertDoseCell="{ row }">
          {{
            row.pricingType === '1'
              ? `当"穴位/经络/部位 ≤${row?.cpDynamicPricingRule ? row?.cpDynamicPricingRule[1]?.max || 0 : 0}个时，
          单价为${row?.cpDynamicPricingRule ? row?.cpDynamicPricingRule[0]?.price || 0 : 0}元，
          当"穴位/经络/部位 ＞${row?.cpDynamicPricingRule ? row?.cpDynamicPricingRule[1]?.max || 0 : 0}个时，
          单价为${row?.cpDynamicPricingRule ? row?.cpDynamicPricingRule[1]?.price || 0 : 0}元`
              : ''
          }}
        </template>
        <template #toolbar-extra>
          <vxe-button style="margin-right: 12px" icon="vxe-icon-repeat" circle @click="refresh(page)"></vxe-button>
        </template>
        <template #actionSlot="{ row, rowIndex }">
          <vxe-button mode="text" status="primary" @click="seeItems(row, rowIndex)">查看</vxe-button>
          <vxe-button mode="text" status="primary" @click="editItems(row, rowIndex)">编辑</vxe-button>
          <vxe-button mode="text" status="primary" @click="deleteItems(row, rowIndex)" v-if="row.isErasable === 'N' ? false : true">删除</vxe-button>
        </template>
      </vxe-grid>
    </main>
    <footer class="flex-none">
      <vxe-pager
        v-model:current-page="page"
        v-model:page-size="pageSize"
        :total="total"
        :layouts="['Home', 'PrevJump', 'PrevPage', 'Number', 'NextPage', 'NextJump', 'End', 'Sizes', 'FullJump', 'Total']"
      />
    </footer>
  </div>
</template>
<style scoped lang="scss">
.page-container {
  height: 100%;
  display: flex;
  flex-direction: column;
}
</style>