xihuaDesign/src/modules/admin/components/CategoryModal.tsx

import Modal from "@/components/Provider/Modal";
import { css } from "@linaria/core";
import { Button, Checkbox, Form, Input, Select } from "ant-design-vue";
import { defineComponent, onMounted, reactive, ref } from "vue";
import { any } from "vue-types";
import UploadImage from "./UploadImage";
import { uploader } from "../objects";
const layout = {
  labelCol: { span: 6 },
  wrapperCol: { span: 18 },
};

export default defineComponent({
  props: {
    data: any(),
  },
  setup(props) {
    const modal = Modal.use();
    const formState: { [name: string]: any } = reactive({
      formData: {
        ...{
          name: "",
          cover: "",
          subName: "",
          sort: 0,
          type: "list",
          isHome: false,
        },
        ...props.data,
      },
    });

    const rules = reactive({
      name: [{ required: true, message: "名称不能为空", trigger: "change" }],
      cover: [{ required: false }],
      subName: [{ required: false }],
      isHome: [{ required: false }],
      type: [{ required: true, message: "类型不能为空", trigger: "change" }],
    });

    const { validate, validateInfos } = Form.useForm(formState.formData, rules);

    function submit() {
      validate().then(async () => {
        await uploader.uploadBlobImages(formState.formData);
        modal.submit(formState.formData);
      });
    }
    const changeBanner = (v: string) => {
      formState.formData.cover = v;
    };

    return () => {
      return (
        <div class={EditStyle}>
          <Form {...layout} onSubmit={submit}>
            <Form.Item {...validateInfos.cover} wrapperCol={{ span: 24 }}>
              <UploadImage
                data={formState.formData.cover}
                text={"上传菜单banner图"}
                onChange={changeBanner}
              ></UploadImage>
            </Form.Item>
            <Form.Item {...validateInfos.name} label={"菜单名称"}>
              <Input
                placeholder={"请输入菜单名称"}
                v-model={[formState.formData.name, "value"]}
                maxlength={30}
              />
            </Form.Item>
            <Form.Item {...validateInfos.subName} label={"副标题"}>
              <Input
                placeholder={"请输入副标题"}
                v-model={[formState.formData.subName, "value"]}
                maxlength={30}
              />
            </Form.Item>
            <Form.Item {...validateInfos.type} label={"菜单类型"}>
              <Select v-model={[formState.formData.type, "value"]}>
                <Select.Option value="list">列表</Select.Option>
                <Select.Option value="detail">详情</Select.Option>
                <Select.Option value="download">下载</Select.Option>
              </Select>
            </Form.Item>
            <Form.Item {...validateInfos.isHome} label={"是否首页展示"}>
              <Checkbox
                v-model={[formState.formData.isHome, "checked"]}
              ></Checkbox>
            </Form.Item>
            <Form.Item style={{ marginBottom: 0 }} wrapperCol={{ span: 24 }}>
              <Button type="primary" htmlType="submit" block>
                保存
              </Button>
            </Form.Item>
          </Form>
        </div>
      );
    };
  },
});
const EditStyle = css`
  width: 500px;
`;