|
|
@@ -0,0 +1,198 @@
|
|
|
+import { css } from "@linaria/core";
|
|
|
+import { Button, Form, Input, DatePicker } from "ant-design-vue";
|
|
|
+import dayjs, { Dayjs } from "dayjs";
|
|
|
+import { useModal } from "queenjs";
|
|
|
+import { defineComponent, reactive } from "vue";
|
|
|
+import { any, string } from "vue-types";
|
|
|
+import locale from "ant-design-vue/es/date-picker/locale/zh_CN";
|
|
|
+import localeData from "dayjs/plugin/localeData";
|
|
|
+import weekday from "dayjs/plugin/weekday";
|
|
|
+import { Image } from "@queenjs/ui";
|
|
|
+import { IconImage } from "@/assets/icons";
|
|
|
+import { IconAddLine } from "@queenjs/icons";
|
|
|
+import { useEditor } from "@/modules/editor";
|
|
|
+import { SelectOneImage } from "@/pages/website/Material2/modal";
|
|
|
+const layout = {
|
|
|
+ labelCol: { span: 8 },
|
|
|
+ wrapperCol: { span: 16 },
|
|
|
+};
|
|
|
+dayjs.extend(weekday);
|
|
|
+dayjs.extend(localeData);
|
|
|
+const { RangePicker } = DatePicker;
|
|
|
+type RangeValue = [Dayjs, Dayjs];
|
|
|
+export default defineComponent({
|
|
|
+ props: {
|
|
|
+ record: any().isRequired,
|
|
|
+ },
|
|
|
+ setup(props, { slots }) {
|
|
|
+ const dateLocal: any = locale;
|
|
|
+ dateLocal.lang.shortWeekDays = "日_一_二_三_四_五_六".split("_");
|
|
|
+ dateLocal.lang.shortMonths =
|
|
|
+ "1月_2月_3月_4月_5月_6月_7月_8月_9月_10月_11月_12月".split("_");
|
|
|
+ const modal = useModal();
|
|
|
+ const data = props.record
|
|
|
+ ? { ...props.record }
|
|
|
+ : {
|
|
|
+ thumbnail: "",
|
|
|
+ logo: "",
|
|
|
+ title: "",
|
|
|
+ startTime: "",
|
|
|
+ endTime: "",
|
|
|
+ };
|
|
|
+ const formState: { [name: string]: any } = reactive({
|
|
|
+ ...data,
|
|
|
+ });
|
|
|
+
|
|
|
+ const rules = reactive({
|
|
|
+ title: [
|
|
|
+ { required: true, message: "标题不能为空", trigger: "change" },
|
|
|
+ {
|
|
|
+ min: 2,
|
|
|
+ max: 20,
|
|
|
+ message: "长度为2~20位字符",
|
|
|
+ trigger: "change",
|
|
|
+ },
|
|
|
+ ],
|
|
|
+ thumbnail: [
|
|
|
+ { required: true, message: "封面图不能为空", trigger: "change" },
|
|
|
+ ],
|
|
|
+ logo: [{ required: false }],
|
|
|
+ });
|
|
|
+
|
|
|
+ const { validate, validateInfos } = Form.useForm(formState, rules);
|
|
|
+
|
|
|
+ function submit() {
|
|
|
+ validate().then(async () => {
|
|
|
+ modal.submit(formState);
|
|
|
+ });
|
|
|
+ }
|
|
|
+ const pickerRanges = () => {
|
|
|
+ return {
|
|
|
+ 今天: [dayjs(), dayjs()] as RangeValue,
|
|
|
+ 本周: [
|
|
|
+ dayjs().startOf("week").add(1, "day"),
|
|
|
+ dayjs().endOf("week").add(1, "day"),
|
|
|
+ ] as RangeValue,
|
|
|
+ 本月: [dayjs().startOf("month"), dayjs().endOf("month")] as RangeValue,
|
|
|
+ };
|
|
|
+ };
|
|
|
+ return () => {
|
|
|
+ return (
|
|
|
+ <div class={ModalStyle}>
|
|
|
+ <Form {...layout} onSubmit={submit}>
|
|
|
+ <Form.Item {...validateInfos.thumbnail} wrapperCol={{ span: 24 }}>
|
|
|
+ <div class={"w-full h-150px pt-20px"}>
|
|
|
+ <ImageUploader
|
|
|
+ data={formState.thumbnail}
|
|
|
+ text="请选择封面图"
|
|
|
+ onChange={(v) => {
|
|
|
+ formState.thumbnail = v;
|
|
|
+ console.log(v);
|
|
|
+ }}
|
|
|
+ />
|
|
|
+ </div>
|
|
|
+ </Form.Item>
|
|
|
+ <Form.Item {...validateInfos.title} label="标题">
|
|
|
+ <Input
|
|
|
+ placeholder={"请输入标题"}
|
|
|
+ v-model={[formState.title, "value"]}
|
|
|
+ />
|
|
|
+ </Form.Item>
|
|
|
+ <Form.Item {...validateInfos.logo} label="logo">
|
|
|
+ <div class={"w-80px h-80px"}>
|
|
|
+ <ImageUploader
|
|
|
+ data={formState.logo}
|
|
|
+ text="请选择logo"
|
|
|
+ icon={<IconAddLine class="text-18px" />}
|
|
|
+ onChange={(v) => {
|
|
|
+ formState.logo = v;
|
|
|
+ console.log(v);
|
|
|
+ }}
|
|
|
+ />
|
|
|
+ </div>
|
|
|
+ </Form.Item>
|
|
|
+ <Form.Item label="开始/结束日期">
|
|
|
+ <RangePicker
|
|
|
+ locale={dateLocal}
|
|
|
+ ranges={pickerRanges()}
|
|
|
+ onChange={(datas: any) => {
|
|
|
+ console.log(datas);
|
|
|
+ formState.startTime = dayjs(datas[0]).format("YYYY-MM-DD");
|
|
|
+ formState.endTime = dayjs(datas[1]).format("YYYY-MM-DD");
|
|
|
+ }}
|
|
|
+ />
|
|
|
+ </Form.Item>
|
|
|
+ <Form.Item style={{ marginBottom: 0 }} wrapperCol={{ span: 24 }}>
|
|
|
+ <Button block type="primary" htmlType="submit">
|
|
|
+ 确定
|
|
|
+ </Button>
|
|
|
+ </Form.Item>
|
|
|
+ </Form>
|
|
|
+ </div>
|
|
|
+ );
|
|
|
+ };
|
|
|
+ },
|
|
|
+});
|
|
|
+
|
|
|
+const ImageUploader = defineComponent({
|
|
|
+ props: {
|
|
|
+ data: string(),
|
|
|
+ icon: any(),
|
|
|
+ text: string().def(""),
|
|
|
+ },
|
|
|
+ emits: ["change"],
|
|
|
+ setup(props, { emit }) {
|
|
|
+ const { controls } = useEditor();
|
|
|
+ const uploadImage = async () => {
|
|
|
+ const url = await SelectOneImage();
|
|
|
+ if (!url) return;
|
|
|
+ emit("change", url);
|
|
|
+ };
|
|
|
+ return () => (
|
|
|
+ <div class={ImageStyle} onClick={uploadImage}>
|
|
|
+ <div class={"wapper"}>
|
|
|
+ {props.data ? (
|
|
|
+ <Image src={props.data} size={0} />
|
|
|
+ ) : (
|
|
|
+ <div class={"no_value"}>
|
|
|
+ {props.icon ? props.icon : <IconImage class={"text-30px"} />}
|
|
|
+ {props.text ? <div class={"up_txt"}>{props.text}</div> : null}
|
|
|
+ </div>
|
|
|
+ )}
|
|
|
+ </div>
|
|
|
+ </div>
|
|
|
+ );
|
|
|
+ },
|
|
|
+});
|
|
|
+const ImageStyle = css`
|
|
|
+ width: 100%;
|
|
|
+ height: 100%;
|
|
|
+ color: #fff;
|
|
|
+ background-color: #303030;
|
|
|
+ border-radius: 2px;
|
|
|
+ cursor: pointer;
|
|
|
+ .wapper {
|
|
|
+ width: 100%;
|
|
|
+ height: 100%;
|
|
|
+ display: flex;
|
|
|
+ align-items: center;
|
|
|
+ justify-content: center;
|
|
|
+ }
|
|
|
+ .no_value {
|
|
|
+ display: inline-flex;
|
|
|
+ flex-direction: column;
|
|
|
+ align-items: center;
|
|
|
+ .up_txt {
|
|
|
+ margin-top: 10px;
|
|
|
+ font-size: 14px;
|
|
|
+ }
|
|
|
+ }
|
|
|
+ img {
|
|
|
+ width: 100%;
|
|
|
+ height: 100%;
|
|
|
+ border-radius: 2px;
|
|
|
+ object-fit: cover;
|
|
|
+ }
|
|
|
+`;
|
|
|
+
|
|
|
+const ModalStyle = css``;
|
