queenshow/src/modules/resource/components/SouceModal.tsx

import Thumbnail from "@/components/Thumbnail";
import { SelectOneImage } from "@/pages/website/Material2/modal";
import { css } from "@linaria/core";
import { Button, Form, Input, TreeSelect } from "ant-design-vue";
import { useModal } from "queenjs";
import { defineComponent, nextTick, onMounted, reactive, ref } from "vue";
import { any, string } from "vue-types";
import { useResource } from "..";
export default defineComponent({
  props: {
    item: any(),
    sourceType: string().isRequired,
  },
  setup(props) {
    const { controls } = useResource();
    let data = props.item
      ? { ...props.item }
      : {
          title: "",
          categories: [],
        };
    if (!data.categories) {
      data.categories = [];
    }
    const formState: { [name: string]: any } = reactive({ ...data });
    const sourceTitle = ["comp", "shape", "text", "template", "v"];
    const state = reactive({
      categoriesVal: {} as any,
      categoryList: [] as any,
      categoryMap: new Map<string, any>(),
    });

    const getCate = () => {
      const categories = controls.categoryCtrl.state.categories;
      const currCate: any = categories.find((e: any) => {
        return e.value == props.sourceType;
      });
      initCateMap(currCate?.children || []);
      state.categoryList = currCate?.children || [];
    };
    const initCateMap = (options: any, parent = "") => {
      options.map((e: any) => {
        state.categoryMap.set(e.id, {
          parent: parent,
          children: e.children || undefined,
        });
        if (e.children) {
          initCateMap(e.children, e.id);
        }
      });
    };
    onMounted(() => {
      getCate();
      nextTick(() => {
        initCateValue();
      });
    });

    const initCateValue = () => {
      let values: any = {};
      formState.categories.map((id: string) => {
        const rootId = getRootParent(id);
        if (rootId) {
          values[rootId] || (values[rootId] = []);
          values[rootId].push(id);
        }
      });

      state.categoriesVal = values;
    };
    const getRootParent = (id: string): string => {
      const item = state.categoryMap.get(id);
      if (!item.parent) {
        return id;
      } else {
        return getRootParent(item.parent);
      }
    };
    const rules = ref({
      title: [
        {
          required: props.sourceType != "image" ? true : false,
          message: "名称不能为空！",
        },
      ],
      thumbnail: [
        {
          required: props.sourceType != "image" ? true : false,
          message: "封面图不能为空",
        },
      ],
    });

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

    const modal = useModal();

    const submit = () => {
      validate().then(async (values) => {
        let categoriesVal: any = [];
        Object.values(state.categoriesVal).forEach((e: any) => {
          categoriesVal = [...categoriesVal, ...e];
        });
        formState.categories = categoriesVal;
        modal.submit(formState);
      });
    };
    const changeThumbnail = async () => {
      if (props.sourceType == "image") {
        return;
      }
      const url = await SelectOneImage();
      if (!url) return;
      formState.thumbnail = url;
    };

    return () => {
      const thumbnail =
        props.sourceType != "image" ? formState.thumbnail : formState.file.url;
      return (
        <div class={configFormStyle}>
          <div class="modal_form">
            <Form name="basic">
              <Form.Item name="thumbnail" {...validateInfos.thumbnail}>
                <div class={"h-180px bg-light-50"} onClick={changeThumbnail}>
                  <Thumbnail
                    src={thumbnail}
                    class="h-1/1 w-1/1"
                    objectContain={props.sourceType == "image" ? true : false}
                  />
                </div>
              </Form.Item>
              {sourceTitle.includes(props.sourceType) && (
                <Form.Item name="title" {...validateInfos.title}>
                  <Input v-model={[formState.title, "value"]} />
                </Form.Item>
              )}
              {state.categoryList.map((item: any, index: number) => {
                if (!item.isEdit) return null;
                return (
                  <Form.Item key={index} name={`categories.${index}`}>
                    <TreeSelect
                      value={state.categoriesVal[item.id]}
                      allowClear
                      treeCheckable
                      dropdownStyle={{ maxHeight: "500px", overflow: "auto" }}
                      placeholder={`请选择${item.name}`}
                      treeData={item?.children}
                      replaceFields={{
                        children: "children",
                        label: "name",
                        value: "id",
                      }}
                      onChange={(v) => {
                        state.categoriesVal[item.id] = v;
                      }}
                    />
                  </Form.Item>
                );
              })}
            </Form>
          </div>
          <div class="modal_footer">
            <Button onClick={modal.cancel}>取消</Button>
            <Button type="primary" onClick={submit}>
              确定
            </Button>
          </div>
        </div>
      );
    };
  },
});

const configFormStyle = css`
  .thumb_wapper {
    height: 180px;
  }
  .modal_footer {
    display: flex;
    justify-content: flex-end;
    padding: 10px 0;
    .ant-btn + .ant-btn {
      margin-left: 10px;
    }
  }
`;