@jx3box/jx3box-editor 1.2.2 → 1.2.5

package/assets/css/resource.less

@@ -29,18 +29,19 @@
 
         .u-item {
             .db;
-            border: 1px solid @border-hr;
+            border: 2px solid @border-hr;
             background: #fafbfc;
             margin-bottom: 10px;
             padding: 10px 10px 10px 70px;
             min-height: 60px;
-            .r(3px);
+            .r(6px);
             &:hover {
                 background-color: #e7f9ff;
             }
             &.on {
                 border-color: #34d058;
                 background-color: #fff;
+                box-shadow: 0 0 8px rgba(0, 0, 0, 0.2);
                 // &:hover{
                 //     border:1px dashed #ddd;
                 //     background-color:#eee;
@@ -95,7 +96,7 @@
             .mb(5px);
             .db;
 
-            .u-map, .u-life, {
+            .u-map, .u-life {
                 .mr(20px)
             }
         }

package/package.json

@@ -1,6 +1,6 @@
 {
   "name": "@jx3box/jx3box-editor",
-  "version": "1.2.2",
+  "version": "1.2.5",
   "description": "JX3BOX Article & Editor",
   "main": "index.js",
   "scripts": {
@@ -41,6 +41,7 @@
     "axios": "^0.19.2",
     "core-js": "^3.6.5",
     "csslab": "^4.0.3",
+    "dayjs": "^1.10.7",
     "element-ui": "^2.13.2",
     "hevue-img-preview": "^5.0.0",
     "highlight.js": "^11.3.1",

package/src/Item.vue

@@ -22,7 +22,7 @@
             <div
                 v-if="parseInt(source.MaxExistTime) > 0"
                 class="u-max-exist-time"
-                v-text="'存在时间：' + second_format(source.MaxExistTime)"
+                v-text="'限时时间：' + showDuration(source.MaxExistTime)"
             ></div>
             <!-- 最大拥有数 -->
             <div
@@ -242,12 +242,17 @@
 
 <script>
 import { get_item } from "../service/item.js";
-import second_format from "../assets/js/item/second_format.js";
+
 import attribute_percent from "../assets/js/item/attribute_percent.js";
 import bind from "../assets/js/item/bind.js";
 import color from "../assets/js/item/color.js";
 import { iconLink } from "@jx3box/jx3box-common/js/utils";
 
+import second_format from "../assets/js/item/second_format.js";
+import dayjs from 'dayjs';
+import duration from 'dayjs/plugin/duration'
+dayjs.extend(duration);
+
 export default {
     name: "Item",
     props: ["item", "item_id", "jx3ClientType","client"],
@@ -280,6 +285,10 @@ export default {
             return iconLink(id,this.final_client)
         },
         second_format,
+        showDuration : function (val){
+            val = Number(val)
+            return val && dayjs.duration(val).asDays().toFixed(0) + '天';
+        },
         attribute_percent,
         bind,
         color,
@@ -334,4 +343,4 @@ export default {
 
 <style lang="less">
 @import "../assets/css/module/item.less";
-</style>
+</style>

package/src/Resource.vue

@@ -1,7 +1,7 @@
 <template>
     <div class="c-resource">
         <!-- 上传触发按钮 -->
-        <el-button class="u-switch" type="primary" @click="openDialog" :disabled="!enable"> <img class="u-icon" svg-inline src="../assets/img/jx3.svg" />剑三资源 </el-button>
+        <el-button class="u-switch" type="primary" @click="openDialog" :disabled="!enable"> <img class="u-icon" svg-inline src="../assets/img/jx3.svg" />插入资源 </el-button>
 
         <!-- 弹出界面 -->
         <el-dialog class="c-large-dialog" title="剑三数据库" :visible.sync="dialogVisible">
@@ -97,15 +97,19 @@
                             <i class="el-icon-s-data"></i> 共找到 <b>{{ item.length }}</b> 条记录
                         </p>
                         <ul class="m-resource-list" v-if="item.length">
-                            <li v-for="(o, i) in item" :key="i" class="u-item" :class="{ on: o.isSelected }" @click="selectItem(o, i)" ref="item">
-                                <span class="u-id">ID:{{ o.id }}</span>
-                                <img class="u-pic" :title="'IconID:' + o.IconID" :src="iconURL(o.IconID)" />
-                                <span class="u-name">{{ o.Name }}</span>
-                                <span class="u-content" v-html="o.DescHtml"></span>
-                                <span class="u-remark">
-                                    {{ o.Requirement }}
-                                </span>
-                            </li>
+                            <el-popover popper-class="m-item-pop" :visible-arrow="false" trigger="hover" placement="left" v-for="(o, i) in item" :key="i">
+                                <li slot="reference" class="u-item" :class="{ on: o.isSelected }" @click="selectItem(o, i)" ref="item">
+                                    <span class="u-id">ID:{{ o.id }}</span>
+                                    <img class="u-pic" :title="'IconID:' + o.IconID" :src="iconURL(o.IconID)" />
+                                    <span class="u-name">{{ o.Name }}</span>
+                                    <span class="u-content" v-html="o.DescHtml"></span>
+                                    <span class="u-remark">
+                                        {{ o.Requirement }}
+                                    </span>
+                                </li>
+
+                                <jx3-item :item_id="o.id"></jx3-item>
+                            </el-popover>
                         </ul>
                         <el-alert v-if="!item.length && done" title="没有找到相关条目" type="info" show-icon></el-alert>
                     </el-tab-pane>
@@ -193,12 +197,11 @@
 </template>
 
 <script>
-import axios from "axios";
 import { loadResource, loadStat, getIcons } from "../service/database";
 import { __ossRoot, __iconPath, __Root, __OriginRoot } from "@jx3box/jx3box-common/data/jx3box.json";
 import detach_types from "../assets/data/detach_type.json";
-import User from "@jx3box/jx3box-common/js/user";
 import { iconLink,getLink } from "@jx3box/jx3box-common/js/utils";
+import Item from './Item.vue';
 export default {
     name: "Resource",
     props: {
@@ -454,10 +457,18 @@ export default {
     created: function() {
         this.checkUA();
     },
-    components: {},
+    components: {
+        'jx3-item': Item
+    },
 };
 </script>
 
 <style lang="less">
 @import "../assets/css/resource.less";
+
+.m-item-pop {
+    padding: 0 !important;
+    background: none !important;
+    border: none;
+}
 </style>

package/src/Upload.vue

@@ -53,174 +53,187 @@
 </template>
 
 <script>
-import axios from "axios";
-import { __cms } from "@jx3box/jx3box-common/data/jx3box.json";
-const API_Root = process.env.NODE_ENV === "production" ? __cms : "/";
-const API = API_Root + "api/cms/upload";
-
-import allow_types from "@jx3box/jx3box-common/data/conf";
-const imgtypes = ["jpg", "png", "gif", "bmp", "webp"];
-
-export default {
-    name: "Upload",
-    props: {
-        text: {
-            type: String,
-        },
-        onlyImage: {
-            type: Boolean,
-        },
-        desc: {
-            type: String,
+    import axios from "axios";
+    import { __cms } from "@jx3box/jx3box-common/data/jx3box.json";
+    const API_Root = process.env.NODE_ENV === "production" ? __cms : "/";
+    const API = API_Root + "api/cms/upload";
+
+    import allow_types from "@jx3box/jx3box-common/data/conf";
+    const imgtypes = ["jpg", "png", "gif", "bmp", "webp"];
+
+    export default {
+        name: "Upload",
+        props: {
+            text: {
+                type: String,
+            },
+            onlyImage: {
+                type: Boolean,
+            },
+            desc: {
+                type: String,
+            },
+            accept: {
+                type: String,
+            },
+            enable: {
+                type: Boolean,
+                default: true,
+            },
         },
-        accept: {
-            type: String,
+        data: function() {
+            return {
+                API: API,
+                dialogVisible: false,
+                tip: this.desc || "一次最多同时上传10个文件（不超过5M），格式限常见的图片、文档、数据表及压缩包",
+                btn_txt: this.text || "上传附件",
+
+                fileList: [],
+                selectedCount: 0,
+                insertList: "",
+
+                // accept: allow_types.accept,
+                // sizeLimit: allow_types.sizeLimit,
+            };
         },
-        enable : {
-            type: Boolean,
-            default : true,
-        }
-    },
-    data: function() {
-        return {
-            API: API,
-            dialogVisible: false,
-            tip: this.desc || "一次最多同时上传10个文件（不超过5M），格式限常见的图片、文档、数据表及压缩包",
-            btn_txt: this.text || "上传附件",
-
-            fileList: [],
-            selectedCount: 0,
-            insertList: "",
-
-            // accept: allow_types.accept,
-            // sizeLimit: allow_types.sizeLimit,
-        };
-    },
-    watch: {
-        fileList: {
-            deep: true,
-            handler: function(newval) {
-                this.$emit("update", newval);
+        watch: {
+            fileList: {
+                deep: true,
+                handler: function(newval) {
+                    this.$emit("update", newval);
+                },
+            },
+            insertList: function(newval) {
+                this.$emit("htmlUpdate", newval);
             },
         },
-        insertList: function(newval) {
-            this.$emit("htmlUpdate", newval);
-        },
-    },
-    computed: {
-        buttonTXT: function() {
-            return this.selectedCount ? "插 入" : "确 定";
+        computed: {
+            buttonTXT: function() {
+                return this.selectedCount ? "插 入" : "确 定";
+            },
         },
-    },
-    methods: {
-        change: function(file, fileList) {
-            if (file.status != "success") {
-                // 判断大小
-                // if (file.size > this.sizeLimit) {
-                //     this.$message.error("文件超出大小限制");
-                //     this.removeFile(fileList, file.uid);
-                //     return;
-                // }
-
-                // 分析文件类型
-                let ext = file.name.split(".").pop();
-                let is_img = imgtypes.includes(ext);
-
-                if (this.onlyImage && !is_img) return;
-
-                // 构建数据
-                let fdata = new FormData();
-                fdata.append("file", file.raw);
-
-                // 异步上传
-                axios
-                    .post(API, fdata, {
-                        headers: { "Content-Type": "multipart/form-data" },
-                        withCredentials: true,
-                    })
-                    .then((res) => {
-                        // 提醒
-                        this.$message({
-                            message: "上传成功",
-                            type: "success",
+        methods: {
+            change: function(file, fileList) {
+                if (file.status != "success") {
+                    // 判断大小
+                    // if (file.size > this.sizeLimit) {
+                    //     this.$message.error("文件超出大小限制");
+                    //     this.removeFile(fileList, file.uid);
+                    //     return;
+                    // }
+
+                    // 分析文件类型
+                    let ext = file.name.split(".").pop();
+                    let is_img = imgtypes.includes(ext);
+
+                    if (this.onlyImage && !is_img) return;
+
+                    // 构建数据
+                    let fdata = new FormData();
+                    fdata.append("file", file.raw);
+
+                    // 异步上传
+                    axios
+                        .post(API, fdata, {
+                            headers: {
+                                "Content-Type": "multipart/form-data",
+                                auth: {
+                                    username: (localStorage && localStorage.getItem("token")) || "",
+                                    password: "cms common request",
+                                },
+                            },
+                            withCredentials: true,
+                        })
+                        .then((res) => {
+                            if (res.data.code) {
+                                this.$message({
+                                    message: res.data.msg,
+                                    type: "error",
+                                });
+                                return;
+                            }
+                            // 提醒
+                            this.$message({
+                                message: "上传成功",
+                                type: "success",
+                            });
+
+                            // 修改path
+                            file.url = res.data.data && res.data.data[0];
+
+                            // 额外赋值
+                            file.is_img = is_img;
+                            file.selected = true;
+
+                            // 修改状态加入仓库
+                            file.status = "success";
+                            this.fileList.push(file);
+                            this.selectedCount++;
+                        })
+                        .catch((err) => {
+                            if (err.response.data.code) {
+                                this.$message.error(`[${err.response.data.code}] ${err.response.data.message}`);
+                            } else {
+                                this.$message.error("请求异常");
+                            }
                         });
-
-                        // 修改path
-                        file.url = res.data.data && res.data.data[0];
-
-                        // 额外赋值
-                        file.is_img = is_img;
-                        file.selected = true;
-
-                        // 修改状态加入仓库
-                        file.status = "success";
-                        this.fileList.push(file);
-                        this.selectedCount++;
-                    })
-                    .catch((err) => {
-                        if (err.response.data.code) {
-                            this.$message.error(`[${err.response.data.code}] ${err.response.data.message}`);
-                        } else {
-                            this.$message.error("请求异常");
-                        }
-                    });
-            }
-        },
-        select: function(file) {
-            if (file.status == "success") {
-                this.$set(file, "selected", !file.selected);
-                file.selected ? this.selectedCount++ : this.selectedCount--;
-            }
-        },
-        buildHTML: function() {
-            let list = [];
-            this.fileList.forEach((file) => {
-                if (file.selected) {
-                    file.is_img ? list.push(`<img src="${file.url}" />`) : list.push(`<a target="_blank" href="${file.url}">${file.name}</a>`);
                 }
-            });
-            this.insertList = list.join(" \n");
-            return this.insertList;
-        },
-        insert: function() {
-            // 关闭窗口
-            this.dialogVisible = false;
+            },
+            select: function(file) {
+                if (file.status == "success") {
+                    this.$set(file, "selected", !file.selected);
+                    file.selected ? this.selectedCount++ : this.selectedCount--;
+                }
+            },
+            buildHTML: function() {
+                let list = [];
+                this.fileList.forEach((file) => {
+                    if (file.selected) {
+                        file.is_img ? list.push(`<img src="${file.url}" />`) : list.push(`<a target="_blank" href="${file.url}">${file.name}</a>`);
+                    }
+                });
+                this.insertList = list.join(" \n");
+                return this.insertList;
+            },
+            insert: function() {
+                // 关闭窗口
+                this.dialogVisible = false;
 
-            //为空不执行插入
-            if (!this.selectedCount) return;
+                //为空不执行插入
+                if (!this.selectedCount) return;
 
-            // 传递值
-            this.$emit("insert", {
-                list: this.fileList,
-                html: this.buildHTML(),
-            });
+                // 传递值
+                this.$emit("insert", {
+                    list: this.fileList,
+                    html: this.buildHTML(),
+                });
 
-            //移除所有选择状态
-            this.resetSelectStatus();
-        },
-        resetSelectStatus: function() {
-            this.fileList.forEach((file, i) => {
-                this.$set(this.fileList[i], "selected", false);
-            });
-            this.selectedCount = 0;
-        },
-        clear: function() {
-            this.$refs.uploadbox.clearFiles();
-            this.fileList = [];
-        },
-        removeFile: function(fileList, uid) {
-            fileList.forEach((file, i) => {
-                if (file.uid == uid) {
-                    fileList.splice(i, 1);
-                }
-            });
+                //移除所有选择状态
+                this.resetSelectStatus();
+            },
+            resetSelectStatus: function() {
+                this.fileList.forEach((file, i) => {
+                    this.$set(this.fileList[i], "selected", false);
+                });
+                this.selectedCount = 0;
+            },
+            clear: function() {
+                this.$refs.uploadbox.clearFiles();
+                this.fileList = [];
+            },
+            removeFile: function(fileList, uid) {
+                fileList.forEach((file, i) => {
+                    if (file.uid == uid) {
+                        fileList.splice(i, 1);
+                    }
+                });
+            },
         },
-    },
-    mounted: function() {},
-    components: {},
-};
+        mounted: function() {},
+        components: {},
+    };
 </script>
 
 <style lang="less">
-@import "../assets/css/upload.less";
+    @import "../assets/css/upload.less";
 </style>