health.admin/src/service/AcupointEdit.vue

<script setup lang="ts">
import { ref, computed } from 'vue';
import { notification } from 'ant-design-vue';
import { VxeUI } from 'vxe-pc-ui';
import { MinusCircleOutlined } from '@ant-design/icons-vue';
import { pageAcupointMethod, pageMeridianMethod } from '@/request/api/care.api';
import RemoteSelect from '@/libs/v-select-page/RemoteSelect.vue';
import type { SystemCwModel } from '@/model/care.model';
const props = defineProps<{
  data: SystemCwModel;
}>();

const emit = defineEmits(['submit']);

// 定义数据类型接口
interface AcuMeridian {
  id: string | number;
  name: string;
  code: string;
}

// 模式：穴位或经络
const mode = ref('acupoint');
const acupointList = ref<AcuMeridian[]>([]);
const meridianList = ref<AcuMeridian[]>([]);
const showInput = ref(true);
const inputValue = ref('');

// 获取当前模式的API方法
const getApiMethod = computed(() => {
  return mode.value === 'acupoint' ? pageAcupointMethod : pageMeridianMethod;
});

// 处理选择事件
function handleSelect(selectedItem: any) {
  const list = mode.value === 'acupoint' ? acupointList.value : meridianList.value;
  // 判断是否已存在
  const exists = list.some((item) => item.name === selectedItem);
  if (exists) {
    notification.warning({
      message: '不能重复添加',
    });
    inputValue.value = '';
    return;
  }
  if (selectedItem && selectedItem) {
    if (mode.value === 'acupoint') {
      acupointList.value.push({
        name: selectedItem,
        id: 0,
        code: '',
      });
    } else {
      meridianList.value.push({
        name: selectedItem,
        id: 0,
        code: '',
      });
    }
    inputValue.value = '';
  }
}

// 删除项目
function remove(idx: number) {
  if (mode.value === 'acupoint') {
    acupointList.value.splice(idx, 1);
  } else {
    meridianList.value.splice(idx, 1);
  }
  showInput.value = true;
}

// 清空当前模式的数据
function clearAll() {
  if (mode.value === 'acupoint') {
    acupointList.value = [];
  } else {
    meridianList.value = [];
  }
  inputValue.value = '';
}

const tableData = computed(() => {
  const list = mode.value === 'acupoint' ? acupointList.value : meridianList.value;
  return [...list, { id: '', name: '' }];
});

// 保存
function save() {
  props.data.cwcpAcuPoints = [...acupointList.value];
  props.data.cwcpAcuMeridians = [...meridianList.value];

  props.data.acuMeridianNames = [...meridianList.value].map((item) => item.name);
  props.data.acuPointNames = [...acupointList.value].map((item) => item.name);
  emit('submit', props.data);
  VxeUI.modal.close(`edit-part-modal`);
}
onMounted(() => {
  console.log(props.data.cwcpAcuPoints, 'data-onmounted');
  if (props.data.cwcpAcuPoints && props.data.cwcpAcuPoints.length > 0 && props.data.cwcpAcuPoints[0].name) {
    acupointList.value = [...props.data.cwcpAcuPoints];
  }
  if (props.data.cwcpAcuMeridians && props.data.cwcpAcuMeridians.length > 0 && props.data.cwcpAcuMeridians[0].name) {
    meridianList.value = [...props.data.cwcpAcuMeridians];
  }
});
</script>

<template>
  <div>
    <!-- 模式切换 -->
    <div style="display: flex; align-items: center; justify-content: space-between; margin-bottom: 12px">
      <a-radio-group v-model:value="mode">
        <a-radio value="acupoint">穴位</a-radio>
        <a-radio value="meridian">经络</a-radio>
      </a-radio-group>
    </div>

    <!-- 表格区域 -->
    <!-- 穴位 -->
    <div class="mb-2" v-if="mode === 'acupoint'">
      <div class="table-header-bar">
        <div style="flex: 1"></div>
        <a-button type="link" @click="clearAll" class="mb-2" style="float: right; margin-bottom: 4px">清空</a-button>
      </div>
      <vxe-table :data="tableData" border>
        <vxe-column field="id" title="序号" width="60" type="seq" />
        <vxe-column field="name" title="穴位/经络/部位">
          <template #default="{ rowIndex }">
            <template v-if="rowIndex === tableData.length - 1">
              <RemoteSelect :load="getApiMethod" key-prop="name" v-model:value="inputValue" style="margin: 0 8px" @update:value="handleSelect" :immediate="true" />
            </template>
            <template v-else>
              {{ tableData[rowIndex].name }}
            </template>
          </template>
        </vxe-column>
        <vxe-column title="操作" width="60">
          <template #default="{ rowIndex }">
            <template v-if="rowIndex !== tableData.length - 1">
              <a-button type="text" danger @click="remove(rowIndex)">
                <MinusCircleOutlined />
              </a-button>
            </template>
          </template>
        </vxe-column>
      </vxe-table>
    </div>

    <!-- 经络 -->
    <div class="mb-2" v-if="mode === 'meridian'">
      <div class="table-header-bar">
        <div style="flex: 1"></div>
        <a-button type="link" @click="clearAll" class="mb-2" style="float: right; margin-bottom: 4px">清空</a-button>
      </div>
      <vxe-table :data="tableData" border>
        <vxe-column field="id" title="序号" width="60" type="seq" />
        <vxe-column field="name" title="穴位/经络/部位">
          <template #default="{ rowIndex }">
            <template v-if="rowIndex === tableData.length - 1">
              <RemoteSelect :load="getApiMethod" key-prop="name" v-model:value="inputValue" style="margin: 0 8px" @update:value="handleSelect" :immediate="true" />
            </template>
            <template v-else>
              {{ tableData[rowIndex].name }}
            </template>
          </template>
        </vxe-column>
        <vxe-column title="操作" width="60">
          <template #default="{ rowIndex }">
            <template v-if="rowIndex !== tableData.length - 1">
              <a-button type="text" danger @click="remove(rowIndex)">
                <MinusCircleOutlined />
              </a-button>
            </template>
          </template>
        </vxe-column>
      </vxe-table>
    </div>
    <!-- 底部按钮 -->
    <div style="margin-top: 40px; text-align: center">
      <a-button style="margin-right: 24px" @click="VxeUI.modal.close(`edit-part-modal`)">取消</a-button>
      <a-button type="primary" @click="save">保存</a-button>
    </div>
  </div>
</template>

<style scoped lang="scss">
.table-header-bar {
  display: flex;
  justify-content: flex-end;
  align-items: center;
  margin-bottom: 4px;
}
</style>