screenShow/src/comm/controllers/components/SaveForm.tsx

import { useCtx } from "@/comm/ctx";
import { css } from "@linaria/core";
import { Button, Form, Input, Select } from "ant-design-vue";
import { useModal } from "queenjs";

import { defineComponent, reactive } from "vue";
import { string } from "vue-types";
const layout = {
  wrapperCol: { span: 24 },
};

export default defineComponent({
  props: {
    thumbnail: string(),
    name: string(),
  },

  setup(props) {
    const modal = useModal();

    const { storeCtrl } = useCtx();
    const formState = reactive({
      thumbnail: props.thumbnail,
      name: props.name,
      category: "default",
    });
    const rules = reactive({
      name: [
        { required: true, message: "名称不能为空", trigger: "change" },
        {
          min: 2,
          max: 20,
          message: "长度为2~20位字符",
          trigger: "change",
        },
      ],
    });

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

    const changeCategory = (v: any) => {
      formState.category = v;
    };

    const saveSubmit = async () => {
      await validate();
      modal.submit(formState);
    };

    return () => {
      return (
        <div class={EditFormStyle}>
          <div class={"thumbnail mb-24px"}>
            <img src={formState.thumbnail} />
          </div>
          <div class="mb-8px">选择保存位置</div>
          <div class={"select_box"}>
            <Select
              class={"w-full"}
              value={formState.category}
              options={storeCtrl.state.category}
              onChange={(v: any) => changeCategory(v)}
            />
          </div>
          <div class={"mt-24px"}>
            <Form {...layout} name="basic">
              <Form.Item {...validateInfos.name}>
                <Input
                  prefix="名称"
                  v-model={[formState.name, "value"]}
                  maxlength={20}
                />
              </Form.Item>
            </Form>
          </div>
          <div class={btsStyle}>
            <Button onClick={() => modal.cancel()}>取消</Button>
            <Button
              type="primary"
              danger={false}
              style={{ marginLeft: "10px" }}
              onClick={() => saveSubmit()}
            >
              保存
            </Button>
          </div>
        </div>
      );
    };
  },
});

const EditFormStyle = css`
  .thumbnail {
    text-align: center;
    img {
      width: 180px;
      height: 180px;
      object-fit: cover;
    }
  }
`;

const btsStyle = css`
  display: flex;
  justify-content: end;
`;