admin-vben5/apps/web-antd/src/views/property/clean/cleanOrders/clean-detail-modal.vue

<script setup lang="ts">
import { computed, ref } from 'vue';
import { useVbenModal } from '@vben/common-ui';
import { $t } from '@vben/locales';
import { cloneDeep } from '@vben/utils';
import { useVbenForm } from '#/adapter/form';
import { cleanList } from '#/api/property/clean';
import { defaultFormValueGetter, useBeforeCloseDiff } from '#/utils/popup';

const emit = defineEmits<{ reload: [data: any], editReload: [data: any] }>();

const isUpdate = ref(false);
const isAdd = ref(false);
const isView = ref(false);
const title = computed(() => {
  if(isAdd.value){
    return $t('pages.common.add');
  }else if(isView.value){
    return '查看';
  }else{
    return $t('pages.common.edit');
  }
});

// 缓存清洁服务数据
let cleanListData: any[] = [];
const detailIndex = ref<number>();//传index对应详情的某条数据,对该条数据进行编辑修改
const detailSchema = [
  {
    label: '劳务名称',
    fieldName: 'name',
    component: 'ApiSelect',
    componentProps: {
      disabled: isView,
      api: async () => {
        const res = await cleanList({stater:1});
        cleanListData = res.rows || [];
        return res;
      },
      resultField: 'rows',
      labelField: 'name',
      valueField: 'id',
      onChange: async (value: string) => {
        // 找到选中的服务数据
        const selectedService = cleanListData.find(item => item.id === value);
        if (selectedService) {
          // 自动填充其他字段
          await formApi.setValues({
            measure: selectedService.measure,
            method: selectedService.method,
            peices: selectedService.peices,
            frequency: selectedService.frequency,
            standard: selectedService.standard,
            remark: selectedService.remark,
            stater: selectedService.stater,
          });
        }
      },
    },
    rules: 'required',
  },
  {
    label: '保洁面积',
    fieldName: 'area',
    component: 'InputNumber',
    rules: 'required',
    componentProps: {
      disabled: isView,
      onChange: async (value: number) => {
        const formValues = await formApi.getValues();
        if (formValues.peices && value) {
          await formApi.setValues({
            sumPeices: Number((formValues.peices * value).toFixed(2)),
          });
        }
      },
    },
  },
  {
    label: '计量单位',
    fieldName: 'measure',
    component: 'Input',
    componentProps: {
      disabled: true,
    },
    rules: 'required',
  },
  {
    label: '计算方式',
    fieldName: 'method',
    component: 'Input',
    componentProps: {
      disabled: true,
    },
    rules: 'required',
  },
  {
    label: '申报单价含税（元）',
    fieldName: 'peices',
    component: 'InputNumber',
    componentProps: {
      disabled: true,
    },
    rules: 'required',
  },
  {
    label: '保洁频率',
    fieldName: 'frequency',
    component: 'Input',
    componentProps: {
      disabled: true,
    },
    rules: 'required',
  },
  {
    label: '保洁标准',
    fieldName: 'standard',
    component: 'Input',
    componentProps: {
      disabled: true,
    },
    rules: 'required',
  },
  {
    label: '备注',
    fieldName: 'remark',
    component: 'Input',
    componentProps: {
      disabled: true,
    },
  },
  {
    label: '状态',
    fieldName: 'stater',
    component: 'Select',
    componentProps: {
      disabled: true,
      options: [
        { label: '上架', value: 1 },
        { label: '下架', value: 0 },
      ],
    },
    rules: 'required',
  },
  {
    label: '合计费用',
    fieldName: 'sumPeices',
    component: 'InputNumber',
    componentProps: {
      disabled: true,
    },
  },
];

const [BasicForm, formApi] = useVbenForm({
  commonConfig: {
    labelWidth: 120,
    componentProps: {
      class: 'w-full',
    },
  },
  schema: detailSchema,
  showDefaultActions: false,
});

const { onBeforeClose, markInitialized, resetInitialized } = useBeforeCloseDiff(
  {
    initializedGetter: defaultFormValueGetter(formApi),
    currentGetter: defaultFormValueGetter(formApi),
  },
);

const [BasicModal, modalApi] = useVbenModal({
  onBeforeClose,
  onClosed: handleClosed,
  onConfirm: handleConfirm,
  onOpenChange: async (isOpen) => {
    if (!isOpen) {
      return null;
    }
    modalApi.modalLoading(true);
    const data = modalApi.getData();
    detailIndex.value = modalApi.getData().index;
    if(!data || Object.keys(data).length === 0){
    //modalApi.getData()为空时表示添加
      isAdd.value = true;
    }else if(data.readonly){
     isView.value = true;
    }else{
    //表示编辑
     isUpdate.value = true;
    }
    // TODO: 获取详情数据
    await formApi.setValues(modalApi.getData());
    await markInitialized();
    modalApi.modalLoading(false);
  },
});

async function handleConfirm() {
  try {
    modalApi.lock(true);
    const { valid } = await formApi.validate();
    if (!valid) {
      return;
    }
    let data = cloneDeep(await formApi.getValues());
    // 获取选中的服务名称
    const selectedService = cleanListData.find(item => item.id === data.name);
    if (selectedService) {
      data.name = selectedService.name;
      data.id = selectedService.id
    }
    if (isUpdate.value) {
      data.index = detailIndex.value;
      emit('editReload', data);
    }else if(isAdd.value){
      emit('reload', data);
    }
    handleClosed()
    await markInitialized();
    modalApi.close();
  } catch (error) {
    console.error(error);
  } finally {
    modalApi.lock(false);
  }
}

async function handleClosed() {
  isAdd.value = false;
  isView.value = false;
  isUpdate.value = false;
  await formApi.resetForm();
  resetInitialized();
}
</script>

<template>
  <BasicModal :title="title">
    <BasicForm >
    </BasicForm>
  </BasicModal>
</template>
<style scoped>
/* 使用 :deep() 穿透 scoped 样式，影响子组件 */
:deep(.ant-input[disabled]),
:deep(.ant-input-number-disabled .ant-input-number-input),
:deep(.ant-select-disabled .ant-select-selection-item) {
  /* 设置一个更深的颜色，可以自己调整 */
  color: rgba(0, 0, 0, 0.65) !important;
  /* 有些浏览器需要这个来覆盖默认颜色 */
  -webkit-text-fill-color: rgba(0, 0, 0, 0.65) !important;
}
</style>