ocpview-pro 0.1.2 → 0.1.4

package/package.json

@@ -1,6 +1,6 @@
 {
   "name": "ocpview-pro",
-  "version": "0.1.2",
+  "version": "0.1.4",
   "title": "ocpviewPlus",
   "description": "A high quality Service UI components Library with Vue.js",
   "homepage": "",

package/src/components/label/showtext.vue

@@ -1,95 +1,162 @@
-<template> 
-    <Tooltip transfer  :content="labeltext" :disabled="!showTooltip" :max-width="maxWidth" class="ivu-table-cell-tooltip" >
-            <template v-if="textLink">
-                <a  href="#"  style="text-decoration:underline" @click.prevent="linkTo"><span ref="content"  class="ivu-table-cell-tooltip-content" v-html="showText" :style="'text-align:'+ contentAlign" @mouseenter="handleTooltipIn" @mouseleave="handleTooltipOut"/> </a>
-            </template>
-            <template v-else>
-                  <span ref="content"  class="ivu-table-cell-tooltip-content" v-html="showText" :style="'text-align:'+ contentAlign" @mouseenter="handleTooltipIn" @mouseleave="handleTooltipOut"/>
-            </template>
-    </Tooltip>
+<template>
+    <component
+        :is="showTooltip ? 'Tooltip' : 'div'"
+        v-bind="showTooltip ? { transfer: true, content: labeltext, maxWidth: maxWidth, disabled: tooltipDisabled } : {}"
+        class="ivu-table-cell-tooltip"
+    >
+        <template v-if="showTooltip" #content>
+            <span class="showtext-tooltip-content">{{ labeltext }}</span>
+        </template>
+        <span
+            ref="content"
+            class="ivu-table-cell-tooltip-content"
+            :class="{ 'showtext-link': textLink }"
+            v-html="displayText"
+            :style="{ textAlign: contentAlign }"
+            v-on="hasOverflow ? { mouseenter: handleTooltipIn, mouseleave: handleTooltipOut } : {}"
+            @click.prevent="textLink && linkTo()"
+        />
+    </component>
 </template>
 <script>
-    export default {
-        name: 'showText',
-        data () {
-            return {
-                showTooltip:false,
-                labeltext: '',
-                showIcon:false,
-                iconWidth:0,
-                textLink:false
-            };
+export default {
+    name: "showText",
+    data() {
+        return {
+            showTooltip: false,
+            tooltipDisabled: true,
+            tooltipTimer: null,
+            hasOverflow: false,
+        };
+    },
+    props: {
+        label: {
+            type: [String, Number],
+            default: "",
         },
-        props:{
-            label:{
-                type: [String,Number],
-                default: ''
-            },
-            maxWidth:{
-                type: [String,Number],
-                default: 300
-            },
-            contentAlign: {
-                type: String,
-                default: 'center'
-            },
-            resetText: {
-                type: Function,
-                default: null
-            },
-            config: {
-                type: Object,
-                default: () => {},
-            },
-            rowIndex: {
-                type: [String,Number],
-                default: ''
+        maxWidth: {
+            type: [String, Number],
+            default: 300,
+        },
+        contentAlign: {
+            type: String,
+            default: "center",
+        },
+        resetText: {
+            type: Function,
+            default: null,
+        },
+        config: {
+            type: Object,
+            default: () => ({}),
+        },
+        rowIndex: {
+            type: [String, Number],
+            default: "",
+        },
+    },
+    computed: {
+        labeltext() {
+            return this.label;
+        },
+        textLink() {
+            return !!(this.config && this.config.textLink);
+        },
+        displayText() {
+            if (this.resetText) {
+                return this.resetText(
+                    this.doSpecialSymbols(this.label),
+                    this.label
+                );
+            }
+            return this.doSpecialSymbols(this.label);
+        },
+    },
+    mounted() {
+        this.$nextTick(() => {
+            this.checkOverflow();
+            this.setupResizeObserver();
+        });
+    },
+    beforeUnmount() {
+        if (this.tooltipTimer) {
+            clearTimeout(this.tooltipTimer);
+            this.tooltipTimer = null;
+        }
+        if (this.resizeObserver) {
+            this.resizeObserver.disconnect();
+            this.resizeObserver = null;
+        }
+        if (this.checkOverflowDebounced) {
+            this.checkOverflowDebounced.cancel();
+            this.checkOverflowDebounced = null;
+        }
+    },
+    methods: {
+        checkOverflow() {
+            const content = this.$refs.content;
+            this.hasOverflow = !!(
+                content && content.scrollWidth > content.offsetWidth
+            );
+        },
+        setupResizeObserver() {
+            const content = this.$refs.content;
+            if (!content || !window.ResizeObserver) return;
+            this.checkOverflowDebounced = this.$utils.debounce(
+                this.checkOverflow, 150
+            );
+            this.resizeObserver = new ResizeObserver(
+                this.checkOverflowDebounced
+            );
+            this.resizeObserver.observe(content.parentElement);
+        },
+        handleTooltipIn() {
+            if (this.tooltipTimer) {
+                clearTimeout(this.tooltipTimer);
+                this.tooltipTimer = null;
             }
+            this.showTooltip = true;
+            this.tooltipTimer = setTimeout(() => {
+                this.tooltipDisabled = false;
+                this.tooltipTimer = null;
+            }, 300);
         },
-        created() {
-            if (this.config && this.config.textLink !== undefined) {
-                this.textLink = this.config.textLink;
+        handleTooltipOut() {
+            if (this.tooltipTimer) {
+                clearTimeout(this.tooltipTimer);
+                this.tooltipTimer = null;
             }
+            this.tooltipDisabled = true;
+            this.tooltipTimer = setTimeout(() => {
+                this.showTooltip = false;
+                this.tooltipTimer = null;
+            }, 300);
         },
-        methods:{
-            handleTooltipIn () {
-                const $content = this.$refs.content;
-                this.showTooltip = $content.scrollWidth > $content.offsetWidth;  
-            },
-            handleTooltipOut () {
-                this.showTooltip = false;  
-            },
-            doSpecialSymbols(str) {
-                if (str) {
-                    str = str + '';
-                    //替换所有的换行符
-                    str = str.replace(/\r\n/g,'<br>');
-                    str = str.replace(/\n/g,'<br>');
-                    //替换所有的空格（中文空格、英文空格都会被替换）
-                    str = str.replace(/\s/g,'&nbsp;');
-                }
-                return str; 
-            },
-            linkTo() {
-                if (this.config.onLinkTo) {
-                    let obj = this.$Method.copy(this.config);
-                    obj.rowIndex = this.rowIndex;
-                    this.config.onLinkTo(obj);
-                }
+        doSpecialSymbols(str) {
+            if (str) {
+                str = str + "";
+                str = str.replace(/\r\n/g, "<br>");
+                str = str.replace(/\n/g, "<br>");
+                str = str.replace(/\s/g, "&nbsp;");
             }
+            return str;
         },
-        watch:{
-            label: {
-                handler (data) {
-                    this.labeltext = data;
-                    if (this.resetText) {
-                        this.showText = this.resetText(this.doSpecialSymbols(data),data);
-                    } else {
-                        this.showText = this.doSpecialSymbols(data);
-                    }
-                },
-                immediate: true
+        linkTo() {
+            if (this.config && this.config.onLinkTo) {
+                let obj = this.$Method.copy(this.config);
+                obj.rowIndex = this.rowIndex;
+                this.config.onLinkTo(obj);
             }
-        }
-    };
-</script>
+        },
+    },
+};
+</script>
+<style scoped>
+.showtext-tooltip-content {
+    white-space: pre-wrap;
+}
+.showtext-link {
+    text-decoration: underline;
+    cursor: pointer;
+}
+</style>

package/src/components/masterplate/RewriteBillListDetails/BillListPanelTable.vue

@@ -26,6 +26,7 @@
                     :loading="loading"
                     :sort-config="{ remote: true, trigger: 'cell' }"
                     :seq-config="seqConfig"
+                    :cell-style="cellStyleMethod"
                     @sort-change="RewriteTableOnSortChange"
                     @cell-dblclick="RewriteTableCellDBlclick"
                 >
@@ -347,6 +348,22 @@ export default {
             const { row } = params;
             this.dbclick(row);
         },
+        /**
+         * 单据状态列颜色渲染
+         */
+        cellStyleMethod({ row, column }) {
+            const item = this.tableColumns.find(
+                (c) => c.name === column.field
+            );
+            if (item && item._colorMap) {
+                const code = row[column.field];
+                const color = item._colorMap[code];
+                if (color) {
+                    return { color };
+                }
+            }
+            return {};
+        },
     },
     mounted() {
         // console.log("我继承覆写了22222", this.myConfig);

package/src/components/masterplate/billquerygrid.vue

@@ -78,6 +78,19 @@ import elementResizeDetectorMaker from "element-resize-detector";
 import QueryBar from "./querybar.vue";
 import GridColSet from "./gridcolset.vue";
 import { resolveComponent } from "vue";
+const columnColorConfig = {
+    billstatus: {
+        A: "#FA8C16",
+        N: "#1677FF",
+        S: "#1677FF",
+        Q: "#F5222D",
+        T: "#F5222D",
+        W: "#FA8C16",
+        X: "#00875A",
+        Y: "#52C41A",
+        C: "#666666",
+    },
+};
 export default {
     name: "mbillquerygrid",
     components: { QueryBar, GridColSet },
@@ -140,12 +153,14 @@ export default {
                         ? this.OmdUrl.billQueryComboBoxCodeWithName
                         : true; // 默认值为 true 表示有编码
             }
+            this.injectColumnRender(el);
         });
         if (this.myConfig.gridConfig.initRefresh !== undefined) {
             this.initRefresh = this.myConfig.gridConfig.initRefresh;
         }
         if (!this.myConfig.gridConfig.method) {
-            this.myConfig.gridConfig.method = this.myConfig.classPrefix + '.search';
+            this.myConfig.gridConfig.method =
+                this.myConfig.classPrefix + ".search";
         }
         if (!this.myConfig.gridConfig.resources) {
             this.myConfig.gridConfig.resources = this.config.resources;
@@ -166,7 +181,7 @@ export default {
         this.myConfig.queryConfig = {};
         this.myConfig.queryConfig.curHelpUrl = this.config.curHelpUrl;
         this.myConfig.queryConfig.items = this.$Method.copy(
-            this.myConfig.gridConfig.items,
+            this.myConfig.gridConfig.items
         );
         this.myConfig.queryConfig.modulecode = this.config.modulecode;
         this.myConfig.queryConfig.enablePermissions = this.enablePermissions;
@@ -179,12 +194,12 @@ export default {
         if (this.myConfig.usercustominfo) {
             if (this.myConfig.usercustominfo.filterscene) {
                 this.myConfig.queryConfig.sceneData = this.$Method.copy(
-                    this.myConfig.usercustominfo.filterscene,
+                    this.myConfig.usercustominfo.filterscene
                 );
             }
             if (this.myConfig.usercustominfo.colset) {
                 this.gridCol = JSON.parse(
-                    this.$Method.copy(this.myConfig.usercustominfo.colset),
+                    this.$Method.copy(this.myConfig.usercustominfo.colset)
                 );
             }
         }
@@ -192,12 +207,33 @@ export default {
         this.setChangeGridConfig();
     },
     methods: {
+        injectColumnRender(el) {
+            const colorMap = columnColorConfig[el.name];
+            if (
+                !colorMap ||
+                el.type !== "ComboBox" ||
+                el.render !== undefined
+            ) {
+                return;
+            }
+            const fieldName = el.name;
+            el.render = (h, params) => {
+                const code = params.row[fieldName];
+                const color = colorMap[code];
+                const text = this.$Method.formatComboBox(code, params.column);
+                if (color) {
+                    return h("span", { style: { color } }, text);
+                }
+                return h("span", text);
+            };
+            el._colorMap = colorMap;
+        },
         initRowBtn() {
             if (this.enablePermissions) {
                 let btns = [];
                 this.moduleMethod.forEach((el) => {
                     let btn = this.rowBtnData.find(
-                        (el2) => el.name === el2.name,
+                        (el2) => el.name === el2.name
                     );
                     if (btn) {
                         btns.push(btn);
@@ -262,7 +298,7 @@ export default {
                         let culIndex = data.findIndex(
                             (el) =>
                                 el[self.myConfig.gridConfig.bindSearchParam] ===
-                                self.ph_key,
+                                self.ph_key
                         );
                         if (culIndex > -1) {
                             index = culIndex;
@@ -334,7 +370,7 @@ export default {
                     if (el.name && el.visible) {
                         let tmp = this.myConfig.gridConfig.items.find(
                             (el2) =>
-                                el.name === el2.name || el.name === el2.sname,
+                                el.name === el2.name || el.name === el2.sname
                         );
                         if (tmp) {
                             let tmp2 = this.$Method.copy(tmp);
@@ -383,7 +419,7 @@ export default {
         if (this.$refs.toolbar) {
             this.observer.removeListener(
                 this.$refs.toolbar,
-                this.setOutsideHeight,
+                this.setOutsideHeight
             );
         }
     },