@jx3box/jx3box-common-ui 8.6.6 → 8.6.7

package/package.json

@@ -1,6 +1,6 @@
 {
     "name": "@jx3box/jx3box-common-ui",
-    "version": "8.6.6",
+    "version": "8.6.7",
     "description": "JX3BOX UI",
     "main": "index.js",
     "scripts": {

package/service/community.js

@@ -32,6 +32,10 @@ export const manageTopic = (id, action, value) => {
     return $next().put(`${API_PREFIX}/community/discussion/manage/topic/item/${id}/opt/${action}/${value}`);
 };
 
+export const manageTopicAll = (id, data) => {
+    return $next().put(`${API_PREFIX}/community/discussion/manage/topic/item/${id}/opt`, data);
+}
+
 export const getTopicDetails = (id) => {
     return $next().get(`${API_PREFIX}/community/discussion/topic/item/${id}`);
 };

package/src/App.vue

@@ -14,7 +14,7 @@
             <img slot="logo" svg-inline src="../assets/img/jx3.svg" />
             bread info
             <template #op-prepend>
-                <AdminDrop :post="post" :user-id="8" :showMove="true"/>
+                <AdminDrop :post="community" :isCommunity="true" :user-id="8" :showMove="true"/>
             </template>
         </Breadcrumb>
 
@@ -202,6 +202,7 @@ import { __server } from "@jx3box/jx3box-common/data/jx3box.json";
 import { wiki } from "@jx3box/jx3box-common/js/wiki";
 import post_topics from "@jx3box/jx3box-common/data/post_topics.json";
 import Homework from './interact/Homework.vue';
+import { getTopicDetails } from "../service/community"
 
 export default {
     name: "App",
@@ -281,6 +282,8 @@ export default {
             tag2: '',
 
             homeworkVisible: false,
+
+            community: {}
         };
     },
     created: function () {
@@ -288,6 +291,8 @@ export default {
             res = res.data;
             this.wikiPost = res.data;
         });
+
+        this.loadCommunity();
     },
     methods: {
         addUser: function (val) {
@@ -302,6 +307,12 @@ export default {
         updateExtend: function (val) {
             // console.log(val);
         },
+        loadCommunity: function () {
+            // 72
+            getTopicDetails(82).then((res) => {
+                this.community = res.data.data;
+            });
+        },
     },
     watch: {
         post_id: {

package/src/bread/CommunityAdmin.vue

@@ -28,7 +28,7 @@
                     </el-select>
                 </div>
             </div>
-            <div class="c-admin-extend">
+            <div class="c-admin-extend m-community-tag">
                 <div class="u-condition u-map">
                     <span class="u-prepend el-input-group__prepend">标签</span>
                     <el-select
@@ -39,11 +39,22 @@
                         default-first-option
                         placeholder="请选择"
                         clearable
+                        @change="onTagChange"
                     >
-                        <el-option v-for="item in tags" :value="item.label" :label="item.label" :key="item.uuid">
+                        <el-option v-for="item in tags" :value="item.label" :label="item.label" :key="item.label">
                         </el-option>
                     </el-select>
                 </div>
+                <div  class="m-community-tag__content">
+                    <template v-if="finalTags.length">
+                        <div class="m-community-tag__list" v-for="item in finalTags" :key="item.uuid">
+                            <el-input v-model="item.label"></el-input>
+                            <el-color-picker v-model="item.color"
+                            :predefine="color_options"></el-color-picker>
+                        </div>
+                    </template>
+                    <el-alert title="暂未设置标签" v-else type="info" show-icon :closable="false"></el-alert>
+                </div>
             </div>
             <div class="c-admin-extend">
                 <div class="u-condition u-map">
@@ -64,31 +75,28 @@
             <el-divider content-position="left">高亮置顶</el-divider>
 
             <p class="c-admin-space">
-                <span class="c-admin-lable">置顶：</span>
+                <span class="c-admin-label">置顶：</span>
                 <el-checkbox-group
-                    v-model="isTopStatus"
-                    @change="onTopStatusChange"
+                    v-model="topStatus"
                     class="c-admin-status"
                     size="small"
                 >
-                    <el-checkbox-button :label="1">全局置顶</el-checkbox-button>
-                    <el-checkbox-button :label="2">版内置顶</el-checkbox-button>
+                    <el-checkbox-button label="is_top">全局置顶</el-checkbox-button>
+                    <el-checkbox-button label="is_category_top">版内置顶</el-checkbox-button>
                 </el-checkbox-group>
             </p>
             <p class="c-admin-space">
-                <span class="c-admin-lable">精选：</span>
+                <span class="c-admin-label">精选：</span>
                 <el-switch
                     v-model="form.is_star"
-                    @change="onManageTopic($event, 'star')"
                     :active-value="1"
                     :inactive-value="0"
                 />
             </p>
 
             <p class="c-admin-space">
-                <span class="c-admin-lable">高亮：</span>
+                <span class="c-admin-label">高亮：</span>
                 <el-switch
-                    @change="onManageTopic($event, 'hight')"
                     v-model="form.is_hight"
                     :active-value="1"
                     :inactive-value="0"
@@ -96,7 +104,7 @@
                 <span v-show="showColors">
                     <el-color-picker
                         class="c-admin-highlight-block"
-                        v-model="color"
+                        v-model="form.hight_color"
                         :predefine="color_options"
                         size="mini"
                     ></el-color-picker>
@@ -131,7 +139,9 @@ import {
     getTopicDetails,
     manageTopic,
     updateTopicItem,
+    manageTopicAll
 } from "../../service/community";
+import {cloneDeep} from "lodash";
 
 export default {
     name: "CommunityAdmin",
@@ -153,7 +163,7 @@ export default {
     data() {
         return {
             tags: [],
-            isTopStatus: [],
+            topStatus: [],
             post: null,
             pushing: false,
             categoryList: [],
@@ -173,7 +183,10 @@ export default {
                 is_star: 0,
                 is_hight: 0,
                 is_category_top: 0,
+                hight_color: "rgb(255,0,1)",
             },
+
+            finalTags: []
         };
     },
     computed: {
@@ -185,69 +198,16 @@ export default {
         },
     },
     watch: {
-        post() {
-            this.form = {
-                ...this.form,
-                is_hight: this.post.is_hight,
-                category: this.post.category,
-                is_top: this.post.is_top,
-                is_star: this.post.is_star,
-                tags: this.post.tags,
-                is_category_top: this.post.is_category_top,
-                user_id: this.post.user_id,
-                title: this.post.title,
-            };
-        },
-        form() {
-            const isTopStatus = [];
-            if (this.form.is_top == 1) {
-                isTopStatus.push(1);
-            }
-            if (this.form.is_category_top == 1) {
-                isTopStatus.push(2);
-            }
-            this.isTopStatus = isTopStatus;
-        },
-        modelValue(val) {
+        modelValue: async function(val) {
             if (val) {
-                this.getTopicDetails();
+                await this.getCategoryList();
+                await this.getCommunityTags();
+                await this.getTopicDetails();
             }
         },
-    },
-    created: function () {
-        this.getCategoryList();
-        this.getCommunityTags();
+
     },
     methods: {
-        onTopStatusChange(vals) {
-            if (vals.includes(1) && this.form.is_top == 0) {
-                this.onManageTopic(true, "top");
-            }
-            if (!vals.includes(1) && this.form.is_top == 1) {
-                this.onManageTopic(false, "top");
-            }
-            if (vals.includes(2) && this.form.is_category_top == 0) {
-                this.onManageTopic(true, "category_top");
-            }
-            if (!vals.includes(2) && this.form.is_category_top == 1) {
-                this.onManageTopic(false, "category_top");
-            }
-        },
-        onManageTopic(e, action) {
-            const value = e ? 1 : 0;
-            manageTopic(this.post.id, action, value).then(() => {
-                if (action === "top") {
-                    this.form.is_top = value;
-                }
-                if (action === "category_top") {
-                    this.form.is_category_top = value;
-                }
-                this.$message({
-                    type: "success",
-                    message: "操作成功!",
-                });
-            });
-        },
         handleCheck() {
             const id = this.post.id;
             if (!id) {
@@ -269,22 +229,39 @@ export default {
                 });
             });
         },
-        submit() {
+        async submit() {
             const id = this.post.id;
             if (!id) {
                 this.$message.error("ID不存在!");
                 return;
             }
-            updateTopicItem(id, {
+
+            const promises = [];
+
+            promises.push(updateTopicItem(id, {
                 ...this.post,
-                tags: this.form.tags,
                 user_id: this.form.user_id,
                 title: this.form.title,
                 category: this.form.category,
-            }).then((res) => {
-                this.$message.success("修改成功");
+            }));
+
+            promises.push(manageTopicAll(id, {
+                is_top: this.topStatus.includes("is_top") ? 1 : 0,
+                is_category_top: this.topStatus.includes("is_category_top") ? 1 : 0,
+                is_star: this.form.is_star,
+                is_hight: this.form.is_hight,
+                hight_color: this.form.hight_color,
+                color_tag: this.finalTags,
+            }));
+
+
+            Promise.all(promises).then(() => {
+                this.$message({
+                    type: "success",
+                    message: "操作成功!",
+                });
                 this.$emit("update:modelValue", false);
-                window.location.reload();
+                window.reload();
             });
         },
         getCommunityTags() {
@@ -335,8 +312,44 @@ export default {
         getTopicDetails() {
             getTopicDetails(this.postId).then((res) => {
                 this.post = res.data.data;
+                this.form = {
+                    ...this.form,
+                    is_hight: this.post.is_hight,
+                    category: this.post.category,
+                    is_top: this.post.is_top,
+                    is_star: this.post.is_star,
+                    is_category_top: this.post.is_category_top,
+                    user_id: this.post.user_id,
+                    title: this.post.title,
+                    hight_color: this.post.hight_color,
+                    tags: this.post?.color_tag?.map((item) => item.label) || [],
+                }
+
+                this.finalTags = this.post.color_tag;
+                this.topStatus = [];
+                if (this.post.is_top) {
+                    this.topStatus.push("is_top");
+                }
+                if (this.post.is_category_top) {
+                    this.topStatus.push("is_category_top");
+                }
             });
         },
+        onTagChange() {
+            const tags = this.form.tags.map((item) => {
+                const tag = this.tags.find((tag) => tag.label === item);
+
+                if (tag) {
+                    return tag;
+                }
+
+                return {
+                    label: item,
+                    color: "rgb(255,0,1)",
+                }
+            });
+            this.finalTags = tags;
+        }
     },
 };
 </script>
@@ -351,7 +364,7 @@ export default {
         height: 28px;
         gap: 4px;
     }
-    .c-admin-lable {
+    .c-admin-label {
         font-size: 14px;
         font-weight: 500;
     }
@@ -373,5 +386,30 @@ export default {
         min-width: 62px;
         box-sizing: border-box;
     }
+
+    .m-community-tag {
+        .u-prepend {
+            border-bottom-left-radius: 0!important;
+        }
+        .el-input__inner {
+            border-bottom-right-radius: 0!important;
+        }
+    }
+
+    .m-community-tag__content {
+        border: 1px solid #dcdfe6;
+        border-top: none;
+        padding: 10px;
+    }
+
+    .m-community-tag__list {
+        .flex;
+        align-items: center;
+        gap: 10px;
+
+        &:not(:last-child) {
+            margin-bottom: 10px;
+        }
+    }
 }
 </style>