zfb_mp/src/views/product/editCategoryModal.vue

<!-- bannerUrl: ""
iconUrl: ""
imgUrl: ""
isShow: "0"
level: "L1"
name: "test"
type: 0
wapBannerUrl: "https://4dkk.4dage.com/shop/huafa/20220302/23135195983e96.png?x-oss-process=image/resize,m_fixed,w_100,h_100" -->
<template>
  <BasicModal v-bind="$attrs" @register="register" title="编  辑" @ok="handleOk">
    <div class="pt-3px pr-3px">
      <BasicForm @register="registerForm" />
    </div>
  </BasicModal>
</template>
<script lang="ts">
  import { defineComponent } from 'vue';
  import { categoryApi, uploadBannerApi, updateCategoryApi } from '/@/api/product/category';
  import { TreeNode } from '/@/utils/treeUtils';
  import { BasicModal, useModalInner } from '/@/components/Modal';
  import { BasicForm, FormSchema, useForm } from '/@/components/Form/index';
  import { cloneDeep } from 'lodash-es';
  import { useMessage } from '/@/hooks/web/useMessage';
  import { useI18n } from '/@/hooks/web/useI18n';
  const { t } = useI18n();
  const isLevel2 = (type: string) => type === 'L2';
  const schemas: FormSchema[] = [
    {
      field: 'id',
      label: 'Id',
      component: 'Input',
      ifShow: false,
    },
    {
      field: 'name',
      component: 'Input',
      label: '分类名称',
      colProps: {
        span: 24,
      },
      componentProps: {
        maxLength: 15,
      },
      required: true,
    },
    {
      field: 'level',
      component: 'RadioGroup',
      label: '级别',
      defaultValue: 'L1',
      colProps: {
        span: 24,
      },
      componentProps: {
        options: [
          {
            label: '一级分类',
            value: 'L1',
          },
          {
            label: '二级分类',
            value: 'L2',
          },
        ],
      },
    },

    {
      field: 'parentId',
      component: 'ApiSelect',
      label: '上级分类',
      ifShow: ({ values }) => isLevel2(values.level),
      colProps: {
        span: 18,
      },
      componentProps: {
        api: async function (params) {
          const res = (await categoryApi(params)) as any as TreeNode[];
          // const treeData = makeTree(res);
          return res.filter((i) => i.level === 'L1');
        },
        labelField: 'name',
        valueField: 'id',
      },
    },
    {
      field: 'isShow',
      component: 'RadioGroup',
      label: '是否显示',
      defaultValue: '1',
      colProps: {
        span: 24,
      },
      componentProps: {
        options: [
          {
            label: '显示',
            value: '1',
          },
          {
            label: '不显示',
            value: '0',
          },
        ],
      },
    },
    {
      field: 'sortOrder',
      component: 'InputNumber',
      label: '排序',
      defaultValue: 1,
      colProps: {
        span: 24,
      },
      componentProps: {
        min: 0,
      },
    },
    {
      field: 'wapBannerUrl',
      component: 'Upload',
      show: false,
      label: '手机banner',
      rules: [{ required: true, message: '请选择上传文件' }],
      itemProps: {
        validateTrigger: 'blur',
      },
      componentProps: {
        api: uploadBannerApi,
        maxNumber: 1,
        maxSize: 5,
        afterFetch: function (data) {
          Reflect.set(data, 'url', data.message.url);
          return data;
        },
      },
      required: true,
    },
  ];
  export default defineComponent({
    components: { BasicModal, BasicForm },
    props: {
      userData: { type: Object },
    },
    emits: ['update', 'register'],
    setup(_, { emit }) {
      const { createMessage } = useMessage();

      const [
        registerForm,
        { validate, getFieldsValue, resetFields, setFieldsValue, updateSchema },
      ] = useForm({
        labelWidth: 120,
        schemas,
        showActionButtonGroup: false,
        actionColOptions: {
          span: 24,
        },
      });

      const [register, { closeModal }] = useModalInner((data) => {
        data && onDataReceive(data);
      });

      function onDataReceive(data) {
        console.log('Data Received', cloneDeep(data));
        setFieldsValue({
          ...data,
          isShow: String(data.isShow),
          wapBannerUrl: [data.wapBannerUrl],
        });
        updateSchema({
          field: 'parentId',
          componentProps: {
            api: async function (params) {
              const res = (await categoryApi(params)) as any as TreeNode[];
              return res.filter((i) => i.level === 'L1' && i.id !== data.id);
            },
            labelField: 'name',
            valueField: 'id',
          },
        });
      }

      async function handleOk() {
        try {
          const values = await validate();
          console.log('values', values);
          if (values) {
            let data = getFieldsValue();
            console.log('data', data);
            await updateCategoryApi({
              id: data.id,
              level: data.level,
              isShow: data.isShow,
              name: data.name,
              parentId: data.parentId,
              sortOrder: data.sortOrder,
              wapBannerUrl: data.wapBannerUrl[0] || '',
            });
            emit('update');
            createMessage.success(t('common.optSuccess'));
            resetFields();
            closeModal();
          }
        } catch (error) {}

        // let res = await saveItemApi(data);
      }

      return { register, schemas, registerForm, handleOk };
    },
  });
</script>