health.admin/src/service/IntroduceProjectList.vue

<script lang="ts" setup>
import { ref, onMounted, reactive } from 'vue';
import type { SystemItemModel, SystemCwModel } from '@/model/care.model';
import { VxeUI } from 'vxe-pc-ui';
import { getCopyCwMethod } from '@/request/api/care.api';
import AddItems from '@/service/addItems.vue';
import HealthEvaluation from '@/service/HealthEvaluation.vue';
import { CheckCircleOutlined } from '@ant-design/icons-vue';

const emit = defineEmits<{
  submit: [data: any];
}>();
const tableData = ref<SystemItemModel[]>([]);
type FollowModel = Partial<SystemCwModel>;
const props = defineProps<{ data: FollowModel; id: number | string; institutionId: number | string; institutionName: string }>();
// 引入已有项目
async function handleAdd() {
  // 关闭引入服务包弹窗
  VxeUI.modal.close(`systemService-list-modal`);
  // 关闭引入已有项目弹窗
  VxeUI.modal.close(`introduceProjectList-modal`);
  // 向父组件传入数据
  emit('submit', props.data as SystemCwModel);
}
function handleCancel() {
  VxeUI.modal.close(`introduceProjectList-modal`);
}
const detailData = ref<any>({});

const dataObj = reactive({
  types: 'institution',
  id: props.id,
  institutionId: props.institutionId,
});
// 获取详情数据
async function getDetailData(data?: SystemItemModel) {
  const res: any = await getCopyCwMethod(dataObj as Partial<SystemCwModel>);
  if (res && res.items && res.items.length > 0) {
    tableData.value = res.items;
  }
}
onMounted(async () => {
  const res: any = await getCopyCwMethod(dataObj as Partial<SystemCwModel>);
  detailData.value = res;
  if (res && res.items && res.items.length > 0) {
    tableData.value = res.items;
  }
});
function addProject(row: any) {
  row.sourceId = row.id;
  const addType = 'itemsList';
  const isType = 'itemsList';
  if (row?.isErasable === 'N') {
    // 健康咨询 健康评估 x显示
    VxeUI.modal.open({
      title: row?.conditioningProgramType,
      height: 400,
      width: 750,
      id: `health-consultation-modal`,
      remember: true,
      storage: true,
      slots: {
        default() {
          return h(HealthEvaluation, <any>{
            data: {
              ...row,
              addType,
              institutionId: props.institutionId,
              institutionName: props.institutionName,
              isType,
            },
            onSubmit(data?: SystemItemModel) {
              // 点击确定 刷新列表
              getDetailData();
              VxeUI.modal.close(`health-consultation-modal`);
            },
          });
        },
      },
    });
  } else {
    VxeUI.modal.open({
      id: 'add-items-modal',
      title: '新增项目',
      width: 1000,
      height: 1000,
      escClosable: true,
      destroyOnClose: true,
      slots: {
        default() {
          return h(AddItems, {
            data: {
              ...row,
              addType,
              isType,
              institutionId: props.institutionId,
              institutionName: props.institutionName,
            },
            onSubmit(data?: SystemItemModel) {
              // 点击确定 刷新列表
              getDetailData();
              VxeUI.modal.close(`add-items-modal`);
            },
          });
        },
      },
    });
  }
}
</script>

<template>
  <div style="background: #fff; border-radius: 6px">
    <vxe-table :data="tableData" border :row-class-name="({ row }) => (row.isForCopyCw === 'N' ? 'highlight-row' : '')">
      <vxe-column field="conditioningProgramDetail.name" title="项目名称" />
      <vxe-column field="conditioningProgramDetail.conditioningProgramType" title="方案类型" />

      <vxe-column title="是否可引入" align="center">
        <template #default="{ row }">
          <span v-if="row.isForCopyCw !== 'Y'" style="color: #f5222d; font-size: 11px">机构没有此项目，请先维护</span>
          <CheckCircleOutlined v-else style="color: #52c41a; font-size: 16px" />
        </template>
      </vxe-column>
      <vxe-column field="conditioningProgramDetail" title="操作" align="center">
        <template #default="{ row }">
          <a-button type="primary" @click="addProject(row.conditioningProgramDetail)" v-if="row.isForCopyCw === 'N'">新增</a-button>
        </template>
      </vxe-column>
    </vxe-table>
    <div style="display: flex; justify-content: center; margin-top: 24px">
      <a-button style="margin-right: 24px" @click="handleCancel">取消</a-button>
      <a-button type="primary" @click="handleAdd">引入已有项目</a-button>
    </div>
  </div>
</template>

<style scoped>
.highlight-row {
  background: red !important;
}
</style>