matching/src/pages/match/Design/components/OperationModal.tsx

import { css } from "@linaria/core";
import { Button, Form, Input } from "ant-design-vue";
import { Rule } from "ant-design-vue/lib/form";
import { queenApi } from "queenjs";
import { defineComponent, reactive, ref } from "vue";
import { object } from "vue-types";
import Thumbnail from "./Thumbnail";

const layout = {
  labelCol: { span: 6 },
  wrapperCol: { span: 16 },
};

export default defineComponent({
  props: {
    data: object<IStyle>(),
  },
  setup(props) {
    const modal = queenApi.useDialog();

    const formRef = ref();

    const formState = reactive({
      scenePack: props.data?.scenePack || {},
      name: props.data?.name || "",
    });

    const checkPack = async (_rule: Rule, value: any) => {
      if (!value._id) {
        return Promise.reject("款式不能为空");
      } else {
        return Promise.resolve();
      }
    };

    const submit = async () => {
      const values = await formRef.value?.validateFields();
      values.thumbnail = values.scenePack.thumbnail;
      modal.submit(values);
    };

    return () => {
      return (
        <div class={modalStyle}>
          <Form {...layout} ref={formRef} model={formState}>
            <Form.Item
              name="scenePack"
              label="选择款式"
              rules={[{ validator: checkPack, trigger: "change" }]}
            >
              <Thumbnail v-model={[formState.scenePack, "value"]} />
            </Form.Item>
            <Form.Item
              name="name"
              label="款式名"
              rules={[{ required: true, message: "款式不能为空" }]}
            >
              <Input
                v-model={[formState.name, "value"]}
                placeholder="请输入款式名"
              />
            </Form.Item>
            <Form.Item class="text-center" wrapperCol={{ span: 24 }}>
              <Button onClick={() => modal.cancel()}>取消</Button>
              <Button type="primary" class="ml-10px" onClick={submit}>
                确定
              </Button>
            </Form.Item>
          </Form>
        </div>
      );
    };
  },
});

const modalStyle = css`
  .content {
    padding-top: 20px;
    padding-bottom: 10px;
    text-align: left;
  }

  .footer {
    margin-bottom: 0;
    text-align: right;
  }
`;