edit

src/modules/admin/components/CategoryModal.tsx

@@ -30,8 +30,6 @@ export default defineComponent({
       },
     });
 
-    onMounted(() => {});
-
     const rules = reactive({
       name: [{ required: true, message: "名称不能为空", trigger: "change" }],
       cover: [{ required: false }],
@@ -57,7 +55,7 @@ export default defineComponent({
         <div class={EditStyle}>
           <div class={"edit_content"}>
             <div class={"form_content"}>
-              <Form {...layout} class={EditFormStyle} onSubmit={submit}>
+              <Form {...layout} onSubmit={submit}>
                 <Form.Item {...validateInfos.cover} wrapperCol={{ span: 24 }}>
                   <UploadImage
                     data={formState.formData.cover}
@@ -136,16 +134,3 @@ const EditStyle = css`
     }
   }
 `;
-const CompTabPane = css`
-  height: 100%;
-`;
-const EditFormStyle = css`
-  .thumb {
-    width: 180px;
-    height: 180px;
-  }
-  .updatime {
-    margin-bottom: 24px;
-    font-size: 12px;
-  }
-`;

src/views/admin/detail/components/ListEditModal.tsx

@@ -1,4 +1,4 @@
-import { Button, PageHeader } from "ant-design-vue";
+import { Button, Col, Form, Input, PageHeader, Row } from "ant-design-vue";
 import { defineComponent, onMounted, reactive } from "vue";
 
 import loading from "@/components/Provider/Loading";
@@ -7,22 +7,42 @@ import { ArticleItem } from "@/typings/asset";
 import { object } from "vue-types";
 import WangEditor from "../../components/WangEditor";
 import { css } from "@linaria/core";
+import Modal from "@/components/Provider/Modal";
+import UploadImage from "@/modules/admin/components/UploadImage";
+const layout = {
+  labelCol: { span: 6 },
+  wrapperCol: { span: 18 },
+};
 
 export default defineComponent({
   props: {
     data: object<ArticleItem>(),
   },
   setup(props) {
-    const data: any = props.data || {};
-    const artStore = useArticle();
+    const modal = Modal.use();
+    // const artStore = useArticle();
     const state = reactive({
-      data: {} as any,
+      formData: {
+        ...{
+          title: "",
+          cover: "",
+          content: "",
+          summary: "",
+          sort: 0,
+        },
+        ...props.data,
+      },
     });
 
     onMounted(() => {
       //   initDetail();
     });
+    const rules = reactive({
+      title: [{ required: true, message: "名称不能为空", trigger: "change" }],
+      cover: [{ required: false }],
+    });
 
+    const { validate, validateInfos } = Form.useForm(state.formData, rules);
     // const initDetail = async () => {
     //   loading.show("");
     //   artStore.listController.state.query = JSON.stringify({ cid: data._id });
@@ -47,19 +67,42 @@ export default defineComponent({
       //   }
       //   artStore.addOrUpdateArticle(subData);
     };
-
+    const changeThumb = (v: string) => {
+      state.formData.cover = v;
+    };
     return () => {
       return (
         <div>
           <div class={ModalPage}>
-            <Button type="primary" onClick={submit}>
-              保存
-            </Button>
-            <WangEditor
-              key={data._id}
-              content={state.data.content}
-              onChange={editorChange}
-            />
+            <div class={"form_box"}>
+              <Form {...layout}>
+                <Form.Item {...validateInfos.title} label={"名称"}>
+                  <Input
+                    placeholder={"请输入名称"}
+                    v-model={[state.formData.title, "value"]}
+                  />
+                </Form.Item>
+                <Form.Item {...validateInfos.cover} wrapperCol={{ span: 24 }}>
+                  <UploadImage
+                    data={state.formData.cover}
+                    text={"上传封面图"}
+                    onChange={changeThumb}
+                  ></UploadImage>
+                </Form.Item>
+                <div class={"tips"}>
+                  未上传封面图，封面图将是内容中第一张图片
+                </div>
+              </Form>
+              <WangEditor
+                content={state.formData.content}
+                onChange={editorChange}
+              />
+            </div>
+            <div class={"footer"}>
+              <Button type="primary" onClick={submit}>
+                保存
+              </Button>
+            </div>
           </div>
         </div>
       );
@@ -68,4 +111,27 @@ export default defineComponent({
 });
 const ModalPage = css`
   padding: 20px;
+  height: 100%;
+  display: flex;
+  flex-direction: column;
+  .form_box {
+    flex: 1;
+    width: 100%;
+    display: flex;
+    .ant-form {
+      width: 260px;
+      padding-right: 20px;
+    }
+    .tips {
+      font-size: 12px;
+      color: #666;
+    }
+  }
+  .footer {
+    padding-top: 20px;
+    text-align: center;
+    button {
+      width: 200px;
+    }
+  }
 `;