health.admin/src/components/EditSupplier.vue

<script setup lang="ts">
import { VxeUI, type VxeFormProps, type VxeFormListeners } from 'vxe-pc-ui';
import type { SupplierModel } from '@/model/care.model';
import { useRequest } from 'alova/client';
import { supplierMethod, supplierEditMethod } from '@/request/api/care.api';
import { getDictionaryMethod } from '@/request/api/dictionary.api';
import { branchMethod } from '@/request/api/system.api';
import { notification } from 'ant-design-vue';
import { TreeSelect } from 'ant-design-vue';
const SHOW_ALL = TreeSelect.SHOW_ALL;

type FormModel = Partial<SupplierModel>;

const defaultModel = {};

const props = defineProps<{ data: FormModel }>();
const emits = defineEmits<{
  submit: [data?: SupplierModel];
}>();

const model = ref<Record<string, any>>({});
watchEffect(() => {
  const data = props.data;
  const collaborateDepts = data?.collaborateDepts?.map((item: any) => ({value: item.deptId, label: item.deptName})) ?? [];
  model.value = {
    collaborateDepts
  }
  console.log(model.value, 'model');
});

const branch = ref<any[]>([]);
const { loading: branchLoading } = useRequest(branchMethod).onSuccess(({ data }) => {
  const to = (data?: any[]): any[] => {
    return Array.isArray(data) ? data.map(item => {
      return {
        ...item,
        value: item.id,
        key: item.id.toString(),
        children: to(item.children)
      }
    }) : [];
  }
  branch.value = to(data);
  console.log(branch.value, 'branch');
});
const { loading, send: load } = useRequest((params) => supplierMethod(1, 10, params), {
  immediate: false,
  initialData: props.data ?? defaultModel,
});
const { loading: submitting, send: submit } = useRequest(supplierEditMethod, { immediate: false }).onSuccess(({ data }) => {
  emits('submit');
});

const projectList = ref<Array<{ label: string; value: string }>>([]);

const formProps = reactive<VxeFormProps<FormModel>>({
  titleWidth: 100,
  titleAlign: 'right',
  titleColon: true,
  data: { ...props.data },
  items: [
    {
      field: 'name',
      title: '供应商',
      span: 24,
      itemRender: { name: 'VxeInput', props: { placeholder: '请输入' } },
    },
    {
      field: 'detailAddress',
      title: '地址',
      span: 24,
      itemRender: { name: 'VxeInput', props: { placeholder: '请输入' } },
    },
    {
      field: 'kahuna',
      title: '负责人',
      span: 24,
      itemRender: { name: 'VxeInput', props: { placeholder: '请输入' } },
    },
    {
      field: 'phone',
      title: '联系电话',
      span: 24,
      itemRender: { name: 'VxeInput', props: { placeholder: '请输入' } },
    },
    {
      field: 'collaborateDepts',
      title: '合作机构',
      span: 24,
      slots: {
        default: 'initiate',
      },
    },
    {
      field: 'onlineCPTypes',
      title: '居家项目',
      span: 24,
      itemRender: {
        name: 'VxeSelect',
        props: {
          placeholder: '请选择',
          options: computed(() => projectList.value),
          optionProps: {
            value: 'value',
            label: 'label',
          },
          multiple: true,
          collapseTags: true,
          clearable: true,
        },
      },
    },
    {
      field: 'offlineCPTypes',
      title: '线下项目',
      span: 24,
      itemRender: {
        name: 'VxeSelect',
        props: {
          placeholder: '请选择',
          options: computed(() => projectList.value),
          optionProps: {
            value: 'value',
            label: 'label',
          },
          multiple: true,
          collapseTags: true,
          clearable: true,
        },
      },
    },
    { align: 'center', span: 24, slots: { default: 'active' } },
  ],
  rules: {
    name: [{ required: true, message: '请输入供应商名称' }],
    phone: [{ pattern: /^1[3-9]\d{9}$/, message: '请输入正确的手机号码' }],
  },
});

function handleSelect(value: string, node: any, extra: any) {
  const get = (children?: any[]) => {
    if (!Array.isArray(children)) return;
    children.forEach(child => {
      if (!model.value.collaborateDepts.find((item: any) => item.value === child.value)) {
        model.value.collaborateDepts.push(child)
      }
      get(child.children)
    })
  }
  get(node.children)
}

const formEmits: VxeFormListeners<FormModel> = {
  submit({ data }) {
    data.collaborateDepts = model.value.collaborateDepts.map((item: any) =>{
      return {
        deptId: item.value,
        deptName: item.label
      }
    })
    console.log(data, '转换之后的新增');
    submit(data).then(() => {
      notification.success({
        message: '操作成功',
      });
      VxeUI.modal.close('supplier-modal');
    });
  },
};
function cancel() {
  VxeUI.modal.close('supplier-modal');
}
onBeforeMount(async () => {
  if (props.data?.id) load(props.data);
  try {
    const res = await getDictionaryMethod('condition_type');
    if (res?.length > 0) {
      projectList.value = res; // 直接使用返回的数据
    }
  } catch (error) {
    console.error('获取项目列表失败:', error);
  }
});
</script>

<template>
  <div class="form-container">
    <vxe-form v-bind="formProps" v-on="formEmits" :loading="submitting">
      <template #initiate>
        <a-tree-select
          style="width: 100%"
          :show-checked-strategy="SHOW_ALL"
          tree-check-strictly
          :tree-data="branch"
          tree-checkable
          allow-clear
          v-model:value="model.collaborateDepts"
          placeholder="请选择"
          @select="handleSelect"
        />
      </template>
      <template #active>
        <vxe-button type="reset" content="取消" :disabled="submitting" @click="cancel"></vxe-button>
        <vxe-button type="submit" status="primary" content="确定" :loading="submitting"></vxe-button>
      </template>
    </vxe-form>

  </div>
</template>

<style scoped lang="scss">
.form-container {
  padding: 20px;
}
</style>