@jx3box/jx3box-common-ui 7.5.0 → 7.5.2

package/package.json

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

package/service/admin.js

@@ -12,8 +12,31 @@ function postSetting(data) {
     return $cms().put(`/api/cms/post/${data.ID}/setting`, data);
 }
 
+// 管理员发送私信
 function sendMessage(data){
     return $cms().post(`/api/cms/admin/direct-message`, data);
 }
 
-export { getSetting, postSetting, sendMessage };
+// 管理员新增自定义主题
+function addTopicBucket(data){
+    return $cms().post(`/api/cms/post/topic/bucket`, data);
+}
+
+// 管理员删除自定义主题
+function deleteTopicBucket(id){
+    return $cms().delete(`/api/cms/post/topic/bucket/${id}`);
+}
+
+// 管理员修改自定义主题
+function updateTopicBucket(id, data){
+    return $cms().put(`/api/cms/post/topic/bucket/${id}`, data);
+}
+
+// 管理员获取自定义主题
+function getTopicBucket(params) {
+    return $cms().get(`/api/cms/post/topic/bucket/manage`, {
+        params: params,
+    });
+}
+
+export { getSetting, postSetting, sendMessage, addTopicBucket, deleteTopicBucket, updateTopicBucket, getTopicBucket };

package/src/App.vue

@@ -9,6 +9,7 @@
             :feedbackEnable="true"
             :adminEnable="true"
             :crumb-enable="true"
+            :topicEnable="true"
         >
             <img slot="logo" svg-inline src="../assets/img/jx3.svg" />
             bread info

package/src/Breadcrumb.vue

@@ -43,6 +43,7 @@
                 <span>反馈</span>
             </a>
             <Adminbutton v-if="adminEnable" class="u-admin" />
+            <ListAdmin v-if="topicEnable" />
             <Admin v-if="adminEnable" :marksOptions="adminMarks" />
             <slot name="op-prepend"></slot>
         </div>
@@ -57,6 +58,7 @@ import User from "@jx3box/jx3box-common/js/user";
 import Admin from "./bread/Admin";
 import Crumb from "./bread/Crumb";
 import Adminbutton from "./bread/Adminbutton";
+import ListAdmin from "./bread/ListAdmin";
 
 import { isApp } from "../assets/js/app.js";
 import Bus from "../service/bus";
@@ -69,6 +71,7 @@ export default {
         "root",
         "publishEnable",
         "adminEnable",
+        "topicEnable",
         "feedbackEnable",
         "overlayEnable",
         "crumbEnable",
@@ -121,6 +124,7 @@ export default {
         Admin,
         Crumb,
         Adminbutton,
+        ListAdmin,
     },
 };
 </script>

package/src/bread/ListAdmin.vue

@@ -0,0 +1,195 @@
+<template>
+    <div v-if="hasRight" class="u-admin-button">
+        <el-button
+            type="primary"
+            icon="el-icon-setting"
+            class="c-admin-button u-admin"
+            :size="buttonSize"
+            @click="show = true"
+            >管理</el-button
+        >
+        <el-drawer
+            class="c-admin"
+            title="管理主题"
+            :visible.sync="show"
+            :before-close="close"
+            :append-to-body="true"
+            :modal="false"
+            :withHeader="false"
+        >
+            <div class="c-admin-wrapper" v-loading="loading">
+                <el-divider content-position="left">当前主题</el-divider>
+                <div class="m-bucket-list" v-if="upList && upList.length">
+                    <div v-for="item in upList" :key="item.id" class="m-bucket-item">
+                        <el-tag size="medium">{{ item.name }}</el-tag>
+                        <div class="m-bucket-op">
+                            <el-button type="text" class="u-op-btn" icon="el-icon-download" @click="update(item.id, item.status)">下架</el-button>
+                            <el-button type="text" class="u-op-btn" icon="el-icon-delete" @click="del(item.id)">删除</el-button>
+                        </div>
+                    </div>
+                </div>
+                <el-empty v-else description="暂无主题"></el-empty>
+
+                <el-button class="u-bucket-add" icon="el-icon-plus" type="primary" @click="add">添加主题</el-button>
+
+                <el-divider content-position="left">下架主题</el-divider>
+                <div class="m-bucket-list">
+                    <div v-for="item in downList" :key="item.id" class="m-bucket-item">
+                        <el-tag size="medium">{{ item.name }}</el-tag>
+                        <div class="m-bucket-op">
+                            <el-button type="text" class="u-op-btn" icon="el-icon-upload2" @click="update(item.id, item.status)">上架</el-button>
+                            <el-button type="text" class="u-op-btn" icon="el-icon-delete" @click="del(item.id)">删除</el-button>
+                        </div>
+                    </div>
+                </div>
+                <div class="c-admin-buttons">
+                    <!-- <el-button type="primary" @click="submit" :loading="pushing">提交</el-button> -->
+                    <el-button type="plain" @click="close">关闭</el-button>
+                </div>
+            </div>
+        </el-drawer>
+    </div>
+</template>
+
+<script>
+import { addTopicBucket, deleteTopicBucket, updateTopicBucket, getTopicBucket } from "../../service/admin";
+import User from "@jx3box/jx3box-common/js/user";
+export default {
+    name: "ListAdmin",
+    props: {
+        type: {
+            type: String,
+            default: "bbs",
+        },
+        buttonSize: {
+            type: String,
+            default: "medium",
+        },
+    },
+    data() {
+        return {
+            show: false,
+            list: [],
+            loading: false,
+            currentStatus: "",
+        };
+    },
+    computed: {
+        hasRight() {
+            return User.isEditor();
+        },
+        // 上架主题
+        upList() {
+            return this.list.filter((item) => item.status == 1);
+        },
+        // 下架主题
+        downList() {
+            return this.list.filter((item) => item.status == 0);
+        },
+    },
+    watch: {
+        show(val) {
+            val && this.loadData();
+        },
+    },
+    methods: {
+        close() {
+            this.show = false;
+        },
+        loadData() {
+            const params = {
+                type: this.type,
+            };
+            this.loading = true;
+            getTopicBucket(params)
+                .then((res) => {
+                    this.list = res.data.data;
+                })
+                .finally(() => {
+                    this.loading = false;
+                });
+        },
+        del(id) {
+            this.$confirm("此操作将删除该主题, 是否继续?", "提示", {
+                confirmButtonText: "确定",
+                cancelButtonText: "取消",
+                type: "warning",
+            })
+                .then(() => {
+                    deleteTopicBucket(id).then((res) => {
+                        this.$message({
+                            type: "success",
+                            message: "删除成功!",
+                        });
+                        this.loadData();
+                    });
+                })
+                .catch(() => {});
+        },
+        update(id, status) {
+            const params = {
+                status: status ? 0 : 1,
+            };
+            updateTopicBucket(id, params).then((res) => {
+                this.$message({
+                    type: "success",
+                    message: "更新成功!",
+                });
+                this.loadData();
+            });
+        },
+        add() {
+            this.$prompt("请输入主题名称", "提示", {
+                confirmButtonText: "确定",
+                cancelButtonText: "取消",
+                inputPattern: /\S+/,
+                inputErrorMessage: "主题名称不能为空",
+            })
+                .then(({ value }) => {
+                    const data = {
+                        type: this.type,
+                        name: value,
+                    };
+                    addTopicBucket(data).then((res) => {
+                        this.$message({
+                            type: "success",
+                            message: "添加成功!",
+                        });
+                        this.loadData();
+                    });
+                })
+                .catch(() => {});
+        },
+    },
+};
+</script>
+
+<style lang="less">
+.u-admin-button {
+    padding: 0;
+    float: right;
+}
+.c-admin-wrapper {
+    .u-admin-setting {
+        .pointer;
+    }
+    .m-bucket-list {
+        .m-bucket-item {
+            .flex;
+            align-items: center;
+            justify-content: space-between;
+            padding: 0 5px;
+            border-radius: 3px;
+
+            // odd
+            &:nth-child(odd) {
+                background-color: #f7f7f7;
+            }
+        }
+    }
+    .u-bucket-add {
+        margin-top: 20px;
+        width: 100%;
+    }
+}
+</style>