list edit

src/modules/admin/module/article/index.ts

@@ -3,6 +3,7 @@ import { defineStore } from "pinia";
 import { request } from "../../objects";
 import loading from "@/components/Provider/Loading";
 import { message } from "ant-design-vue";
+import Modal from "@/components/Provider/Modal";
 export const useArticle = defineStore("article", {
   state: () => ({
     listController: new ListController(request),
@@ -35,5 +36,34 @@ export const useArticle = defineStore("article", {
       }
       return res.result;
     },
+   
+    async deleteArticle(item: any) {
+      const ok = await Modal.confirm({
+        title: "删除确认",
+        content: `删除后数据无法恢复，确认删除：${item?.title}？`,
+        type: "danger",
+      });
+      if (ok) {
+        loading.show("删除中");
+        await this.listController.deleteItem(item._id);
+        loading.hidden();
+        message.success("删除成功");
+      }
+    },
+    getContentFirstImage(content: string) {
+      if (!content) {
+        return "";
+      }
+      const html = content;
+      const reg = /<img.*?(?:>|\/>)/gi;
+      const images = html.match(reg);
+      const firstImage = images ? images[0] : "";
+      if (!firstImage) {
+        return "";
+      }
+      const srcReg = /src=[\'\"]?([^\'\"]*)[\'\"]?/i;
+      const src = firstImage.match(srcReg);
+      return src ? src[1] : "";
+    },
   },
 });

src/modules/admin/module/category/https.ts

@@ -1,31 +0,0 @@
-import { request } from "../../objects";
-export const https = {
-  createCategory(data: any) {
-    return request("/category/create", {
-      method: "POST",
-      data,
-    });
-  },
-  listCategory(params: any) {
-    return request("/category/list", {
-      method: "GET",
-      params,
-    });
-  },
-  deleteCategory(id: string) {
-    return request(`/category/delete/${id}`, {
-      method: "POST",
-    });
-  },
-  detailCategory(id: string) {
-    return request(`/category/detail/${id}`, {
-      method: "GET",
-    });
-  },
-  updateCategory(data: any) {
-    return request("/category/update", {
-      method: "POST",
-      data,
-    });
-  },
-};

src/styles/main.css

@@ -14,3 +14,11 @@
 .image_error {
   background: #f2f2f2 url("../assets/image_error.png") no-repeat center;
 }
+h1,
+h2,
+h3,
+h4,
+h5,
+h6 {
+  font-weight: 700;
+}

src/typings/asset.d.ts

@@ -21,9 +21,9 @@ declare type ArticleItem = {
   _id: string;
   cid: string; // 分类id
   title: string; //名称
-  cover: string; //封面图
-  summary: string;
-  content: string; //内容
+  cover?: string; //封面图
+  summary?: string;
+  content?: string; //内容
   sort: number;
 };
 

src/views/admin/components/WangEditor.tsx

@@ -79,11 +79,6 @@ export default defineComponent({
           fieldName: "image",
           maxFileSize: 5 * 1024 * 1024, // 5M
           allowedFileTypes: ["image/*"],
-          // 自定义增加 http  header
-          // headers: {
-          //   Accept: "text/x-json",
-          //   otherKey: "xxx",
-          // },
           customInsert(
             res: any,
             insertFn: (url: string, alt: string, href: string) => void
@@ -112,8 +107,9 @@ export default defineComponent({
         }
         loadingRef.value = false;
         const html = editor.getHtml();
-        emit("change", html);
-        console.log(html);
+        const text = editor.getText();
+        emit("change", { html, text });
+        console.log(html, text);
       },
     };
 
@@ -127,6 +123,10 @@ export default defineComponent({
         config: editorConfig,
         mode: "default",
       });
+      if (props.content && loadingRef.value) {
+        editor.setHtml(props.content);
+        loadingRef.value = false;
+      }
       const toolbar = createToolbar({
         editor,
         selector: "#toolbar-container",

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

@@ -37,8 +37,8 @@ export default defineComponent({
       }
       loading.hidden();
     };
-    const editorChange = (v: any) => {
-      state.data.content = v;
+    const editorChange = ({ html, text }: any) => {
+      state.data.content = html;
     };
     const submit = () => {
       const subData = { ...state.data };

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

@@ -1,18 +1,13 @@
-import { Button, Col, Form, Input, PageHeader, Row } from "ant-design-vue";
+import { Button, Form, Input } from "ant-design-vue";
 import { defineComponent, onMounted, reactive } from "vue";
 
-import loading from "@/components/Provider/Loading";
-import { useArticle } from "@/modules/admin";
+import Modal from "@/components/Provider/Modal";
+import UploadImage from "@/modules/admin/components/UploadImage";
 import { ArticleItem } from "@/typings/asset";
+import { css } from "@linaria/core";
 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 },
-};
+import { useArticle } from "@/modules/admin";
 
 export default defineComponent({
   props: {
@@ -20,7 +15,7 @@ export default defineComponent({
   },
   setup(props) {
     const modal = Modal.use();
-    // const artStore = useArticle();
+    const artStore = useArticle();
     const state = reactive({
       formData: {
         ...{
@@ -34,38 +29,29 @@ export default defineComponent({
       },
     });
 
-    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 });
-    //   await artStore.listController.loadPage(1);
-    //   const item = artStore.listController.state.list[0] || {};
-    //   if (item._id) {
-    //     const detRes = await artStore.getArticleDetail(item);
-    //     if (detRes) {
-    //       state.data = detRes;
-    //     }
-    //   }
-    //   loading.hidden();
-    // };
-    const editorChange = (v: any) => {
-      //   state.data.content = v;
+
+    const editorChange = ({ html, text }: any) => {
+      state.formData.content = html;
+      state.formData.summary = text;
     };
     const submit = () => {
-      //   const subData = { ...state.data };
-      //   if (!subData._id) {
-      //     subData.title = data?.name;
-      //     subData.cid = data._id;
-      //   }
-      //   artStore.addOrUpdateArticle(subData);
+      validate().then(async () => {
+        if (!state.formData.cover) {
+          state.formData.cover = artStore.getContentFirstImage(
+            state.formData.content
+          );
+        }
+        let summary = state.formData.summary.substring(0, 70);
+        summary = summary.replace(/\n/g, "");
+        state.formData.summary = summary;
+        modal.submit(state.formData);
+      });
     };
     const changeThumb = (v: string) => {
       state.formData.cover = v;
@@ -75,8 +61,13 @@ export default defineComponent({
         <div>
           <div class={ModalPage}>
             <div class={"form_box"}>
-              <Form {...layout}>
-                <Form.Item {...validateInfos.title} label={"名称"}>
+              <Form>
+                <Form.Item
+                  {...validateInfos.title}
+                  labelCol={{ span: 24 }}
+                  wrapperCol={{ span: 24 }}
+                  label={"名称"}
+                >
                   <Input
                     placeholder={"请输入名称"}
                     v-model={[state.formData.title, "value"]}
@@ -112,12 +103,14 @@ export default defineComponent({
 const ModalPage = css`
   padding: 20px;
   height: 100%;
+  overflow: hidden;
   display: flex;
   flex-direction: column;
   .form_box {
     flex: 1;
     width: 100%;
     display: flex;
+    overflow: hidden;
     .ant-form {
       width: 260px;
       padding-right: 20px;

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

@@ -1,4 +1,4 @@
-import { Button, PageHeader, Space, Table } from "ant-design-vue";
+import { Button, PageHeader, Space, Table, message } from "ant-design-vue";
 import { defineComponent, onMounted, reactive } from "vue";
 
 import loading from "@/components/Provider/Loading";
@@ -17,9 +17,6 @@ export default defineComponent({
   setup(props) {
     const data: any = props.data || {};
     const artStore = useArticle();
-    const state = reactive({
-      data: {} as any,
-    });
 
     onMounted(() => {
       initList();
@@ -29,13 +26,6 @@ export default defineComponent({
       loading.show("");
       artStore.listController.state.query = JSON.stringify({ cid: data._id });
       await artStore.listController.loadPage(1);
-      //   const item = artStore.listController.state.list[0] || {};
-      //   if (item._id) {
-      //     const detRes = await artStore.getArticleDetail(item);
-      //     if (detRes) {
-      //       state.data = detRes;
-      //     }
-      //   }
       loading.hidden();
     };
     const columns = [
@@ -68,6 +58,7 @@ export default defineComponent({
                 danger
                 type="link"
                 onClick={() => {
+                  artStore.deleteArticle(record);
                   console.log(record);
                 }}
               >
@@ -78,19 +69,29 @@ export default defineComponent({
         },
       },
     ];
+
     const editItem = async (item?: any) => {
-      const itemData = Modal.show(<ListEditModal />, {
-        title: item._id ? `编辑${data?.name}` : `添加${data?.name}`,
-        fullscreen: true,
-      });
-    };
-    const submit = () => {
-      const subData = { ...state.data };
-      if (!subData._id) {
-        subData.title = data?.name;
-        subData.cid = data._id;
+      let listItem = undefined;
+      if (item._id) {
+        const res = await artStore.listController.itemDetail(item._id);
+        if (res.errorNo != 200) {
+          message.warn("未查询到数据！");
+          return;
+        }
+        listItem = res.result;
+      }
+
+      const itemData: any = await Modal.show(
+        <ListEditModal data={listItem} />,
+        {
+          title: item._id ? `编辑${data?.name}` : `添加${data?.name}`,
+          fullscreen: true,
+        }
+      );
+      if (!itemData._id) {
+        itemData.cid = data._id;
       }
-      artStore.addOrUpdateArticle(subData);
+      artStore.addOrUpdateArticle(itemData);
     };
 
     return () => {