meixioacomponent 0.3.41 → 0.3.45

package/packages/components/proPageTable/oa_pro_handle_table_border.vue

@@ -8,8 +8,11 @@
       :label="`开启斑马条纹:`"
     >
       <template slot="lineInforSlot">
-        <base-toggle v-model="stripe" :toggleList="toggleList" :size="`min`">
-        </base-toggle>
+        <base-toggle
+          v-model="stripe"
+          :toggleList="toggleList"
+          :size="`min`"
+        ></base-toggle>
       </template>
     </base-line-info-item>
     <base-line-info-item
@@ -24,8 +27,7 @@
           v-model="borderColu"
           :toggleList="toggleList"
           :size="`min`"
-        >
-        </base-toggle>
+        ></base-toggle>
       </template>
     </base-line-info-item>
     <base-line-info-item
@@ -36,100 +38,105 @@
       :label="`开启横向条纹:`"
     >
       <template slot="lineInforSlot">
-        <base-toggle v-model="borderRow" :toggleList="toggleList" :size="`min`">
-        </base-toggle>
+        <base-toggle
+          v-model="borderRow"
+          :toggleList="toggleList"
+          :size="`min`"
+        ></base-toggle>
       </template>
     </base-line-info-item>
   </div>
 </template>
 
 <script>
-import componentConfig from "../../config/componentConfig";
+import componentConfig from '../../config/componentConfig'
 export default {
   data() {
     return {
       tableBorderConfig: null,
       toggleList: [
-        { label: "开启", value: true },
-        { label: "关闭", value: false },
+        { label: '开启', value: true },
+        { label: '关闭', value: false },
       ],
-    };
+    }
   },
   created() {
-    this.init();
+    this.init()
   },
   computed: {
     stripe: {
       set(val) {
-        this.tableBorderConfig.stripe = val;
-        componentConfig.eventBus.$emit("handleTableBorder", {
-          key: "stripe",
+        this.tableBorderConfig.stripe = val
+        componentConfig.eventBus.$emit('handleTableBorder', {
+          key: 'stripe',
           value: val,
-        });
-        this.setLocalStorage();
+        })
+        this.setLocalStorage()
       },
       get() {
-        return this.tableBorderConfig.stripe;
+        return this.tableBorderConfig.stripe
       },
     },
     borderColu: {
       set(val) {
-        this.tableBorderConfig.borderColu = val;
-        componentConfig.eventBus.$emit("handleTableBorder", {
-          key: "borderColu",
+        this.tableBorderConfig.borderColu = val
+        componentConfig.eventBus.$emit('handleTableBorder', {
+          key: 'borderColu',
           value: val,
-        });
-        this.setLocalStorage();
+        })
+        this.setLocalStorage()
       },
       get() {
-        return this.tableBorderConfig.borderColu;
+        return this.tableBorderConfig.borderColu
       },
     },
     borderRow: {
       set(val) {
-        this.tableBorderConfig.borderRow = val;
-        componentConfig.eventBus.$emit("handleTableBorder", {
-          key: "borderRow",
+        this.tableBorderConfig.borderRow = val
+        componentConfig.eventBus.$emit('handleTableBorder', {
+          key: 'borderRow',
           value: val,
-        });
-        this.setLocalStorage();
+        })
+        this.setLocalStorage()
       },
       get() {
-        return this.tableBorderConfig.borderRow;
+        return this.tableBorderConfig.borderRow
       },
     },
   },
   methods: {
     init() {
-      let tableBorderConfig = window.localStorage.getItem("tableBorderConfig");
+      let tableBorderConfig = window.localStorage.getItem('tableBorderConfig')
       if (tableBorderConfig) {
-        this.tableBorderConfig = JSON.parse(tableBorderConfig);
+        this.tableBorderConfig = JSON.parse(tableBorderConfig)
         for (const key in this.tableBorderConfig) {
-          componentConfig.eventBus.$emit("handleTableBorder", {
+          componentConfig.eventBus.$emit('handleTableBorder', {
             key: `${key}`,
             value: this.tableBorderConfig[`${key}`],
-          });
+          })
         }
       } else {
         this.tableBorderConfig = {
           stripe: true,
           borderColu: true,
           borderRow: true,
-        };
+        }
       }
     },
 
     setLocalStorage() {
       window.localStorage.setItem(
-        "tableBorderConfig",
-        JSON.stringify(this.tableBorderConfig)
-      );
+        'tableBorderConfig',
+        JSON.stringify(this.tableBorderConfig),
+      )
     },
   },
-};
+}
 </script>
 
 <style lang="less" scoped>
 .handle-table-border-wrap {
+  box-sizing: border-box;
+  padding: var(--padding-2) var(--padding-4);
 }
 </style>

package/packages/components/proPageTable/oa_pro_table-header.vue

@@ -1,7 +1,7 @@
 <template>
   <div class="table-header" v-show="config.key != 'noData'">
     <div class="table-header-left">
-      <span class="cell-text">{{ scope.column.label }} </span>
+      <span class="cell-text">{{ scope.column.label }}</span>
       <span class="caret-wrapper defind">
         <i class="sort-caret ascending"></i>
         <i class="sort-caret descending"></i>
@@ -15,9 +15,9 @@
         :plain="true"
         :name="lockClass"
         class="lock-icons"
-        :active="config.lock ? true : false"
-        v-if="!isAverageWidth"
         @iconClick="handleClick('lock')"
+        :active="config.lock ? true : false"
+        v-if="!isAverageWidth && config.lock != 'right'"
       ></base-icon>
 
       <base-icon
@@ -30,6 +30,8 @@
         @iconClick="handleClick('screen')"
         v-if="config.screen"
       ></base-icon>
+
+      <slot name="flex-slot" v-if="config.lock == 'right'"></slot>
     </div>
   </div>
 </template>
@@ -39,19 +41,19 @@ export default {
   data() {
     return {
       // preIndex: null,
-    };
+    }
   },
   created() {},
   mounted() {},
   computed: {
     preIndex() {
-      return this.$props.config.preIndex;
+      return this.$props.config.preIndex
     },
     lockClass() {
       if (!this.$props.config.lock) {
-        return "meixicomponenticon-suoding";
+        return 'meixicomponenticon-suoding'
       }
-      return "meixicomponenticon-jiesuo";
+      return 'meixicomponenticon-jiesuo'
     },
   },
   props: {
@@ -69,37 +71,37 @@ export default {
   methods: {
     handleClick(type) {
       switch (type) {
-        case "lock":
-          this.handleLock();
-          break;
-        case "screen":
-          this.handleScreen();
-          break;
+        case 'lock':
+          this.handleLock()
+          break
+        case 'screen':
+          this.handleScreen()
+          break
 
         default:
-          break;
+          break
       }
     },
 
     handleLock() {
       if (!this.$props.config.lock) {
-        this.$emit("headerItemLock", {
+        this.$emit('headerItemLock', {
           preIndex: this.preIndex,
           index: this.$props.index,
-        });
+        })
       } else {
-        this.$emit("headerItemUnlock", {
+        this.$emit('headerItemUnlock', {
           preIndex: this.preIndex,
           index: this.$props.index,
-        });
+        })
       }
     },
 
     handleScreen() {
-      this.$emit("handleScreenItem", this.$props.config);
+      this.$emit('handleScreenItem', this.$props.config)
     },
   },
-};
+}
 </script>
 
 <style lang="less">
@@ -133,7 +135,7 @@ export default {
     overflow: hidden;
     white-space: nowrap;
     text-overflow: ellipsis;
-    color: var(--font-color-m);
+    color: var(--font-color-s);
     font-size: var(--font-size-base);
     font-weight: var(--font-weight-g);
   }

package/packages/components/proPageTable/oa_pro_table.vue

@@ -46,6 +46,7 @@
         ref="elTable"
         :row-key="rowKey"
         :stripe="stripe"
+        :fit="true"
         :data="tableData"
         :border="borderColu"
         :height="tableHeight"
@@ -54,8 +55,6 @@
           'no-row-bordel': !borderRow,
         }"
         @sort-change="sortChange"
-        @cell-mouse-enter="cellMouseEnter"
-        @cell-mouse-leave="cellMouseLeave"
         @selection-change="handleSelectionChange"
         :style="{
           width: width,
@@ -87,11 +86,10 @@
           :selectable="selected"
         ></el-table-column>
         <el-table-column
-          :key="index"
+          :key="item.key"
           :align="align"
           sortable="custom"
           :fixed="item.lock"
-          v-show="item.show"
           :prop="item.key"
           :label="item.label"
           :width="isAverageWidth ? '' : item.width"
@@ -106,7 +104,14 @@
               @headerItemLock="headerItemLock"
               @headerItemUnlock="headerItemUnlock"
               @handleScreenItem="handleScreenItem"
-            ></oaProtableHeader>
+            >
+              <oa_pro_colum_configVue
+                slot="flex-slot"
+                :config="tableConfig"
+                v-if="isListLast(item.key)"
+                @setTableHeaderConfig="setTableHeaderConfig"
+              ></oa_pro_colum_configVue>
+            </oaProtableHeader>
           </template>
 
           <template slot-scope="scope">
@@ -116,13 +121,33 @@
               v-if="item.template"
             ></slot>
 
+            <el-tooltip
+              effect="dark"
+              placement="top"
+              :content="scope.row[`${item.key}`]"
+              v-else-if="item.toolTip && scope.row[`${item.key}`].length > 8"
+            >
+              <span
+                class="cell-content-text"
+                :class="[
+                  item.fun ? 'fun' : '',
+                  item.click ? 'primary' : '',
+                  item.color ? item.color : '',
+                ]"
+                @click="rowClick(item, scope.row)"
+              >
+                {{ scope.row[`${item.key}`] }}
+              </span>
+            </el-tooltip>
+
             <span
               v-else
-              :class="
-                item.click
-                  ? 'cell-content-text active'
-                  : `cell-content-text ${item.color}`
-              "
+              class="cell-content-text"
+              :class="[
+                item.fun ? 'fun' : '',
+                item.click ? 'primary' : '',
+                item.color ? item.color : '',
+              ]"
               @click="rowClick(item, scope.row)"
             >
               {{ scope.row[`${item.key}`] }}
@@ -137,19 +162,6 @@
           @setTableHeaderConfig="setTableHeaderConfig"
         ></oa_pro_colum_configVue>
       </div>
-      <!-- 每一个单元格提示内容 -->
-      <el-tooltip
-        class="item"
-        effect="dark"
-        :manual="true"
-        placement="top"
-        ref="tableTooltip"
-        v-model="tooltip.show"
-        :visible-arrow="false"
-        :content="`${tooltip.content}`"
-      >
-        <span class="table-tooltip-wrap" :style="toolTipsStyle"></span>
-      </el-tooltip>
     </div>
 
     <!-- 表格尾部 -->
@@ -202,6 +214,7 @@ import baseButtonHandle from '../base/baseButtonHandle/baseButtonHandle.vue' //
 
 //
 import componentConfig from '../../config/componentConfig'
+let canPush = true
 export default {
   name: 'baseProTable',
   data() {
@@ -221,28 +234,19 @@ export default {
       /* 控制loading动画 */
       loading: false,
       defaultSvg: false,
-      /* 黑色提示框数据 */
-      tooltip: {
-        top: null,
-        left: null,
-        width: null,
-        height: null,
-        show: false,
-        content: '',
-      },
       /* 单选表格  记录之前选择的表格数据 */
       preSingleTableValue: null,
-
       // 是否开启斑马纹
       stripe: true,
       // 是否开启表格竖向条纹
       borderColu: true,
-
       // 是否开启表格横向条纹
       borderRow: true,
-
       // 倒计时
       triggerDown: null,
+
+      // 组件销毁时重置的class 配合 LinkViewClass使用
+      _linkViewClassSubs: null,
     }
   },
   created() {
@@ -255,6 +259,9 @@ export default {
   beforeDestroy() {
     componentConfig.eventBus.$off('handleTableBorder', this.handleTableBorder)
     clearTimeout(this.triggerDown)
+    if (this._linkViewClassSubs) {
+      this._linkViewClassSubs.init()
+    }
   },
   computed: {
     config() {
@@ -275,7 +282,8 @@ export default {
     },
     fixedList() {
       return this.$props.tableConfig.filter((item) => {
-        return item.lock
+        const { lock } = item
+        return lock && lock != 'right'
       })
     },
 
@@ -293,15 +301,6 @@ export default {
         return item.show
       })
     },
-
-    toolTipsStyle() {
-      return {
-        top: `${this.tooltip.top}px`,
-        left: `${this.tooltip.left}px`,
-        width: `${this.tooltip.width}px`,
-        height: `${this.tooltip.height}px`,
-      }
-    },
   },
   props: {
     // 当加载树形结构的表格时必须传入该值
@@ -430,6 +429,7 @@ export default {
   },
   methods: {
     init() {
+      canPush = !this.isAverageWidth
       this.initProScreenConfig()
       this.initFooterHandleConfig()
       this.$props.tableConfig.forEach((item, index) => {
@@ -438,17 +438,13 @@ export default {
         if (!item.width || item.width < 100) {
           item.width = 100
         }
+        if (item.lock == 'right') {
+          canPush = false
+        }
       })
 
-      if (!this.isAverageWidth) {
-        this.$props.tableConfig.push({
-          label: '',
-          key: 'noData',
-          lock: false,
-          width: 30,
-          show: true,
-          template: false,
-        })
+      if (canPush) {
+        this.tableConfigPushEmpty()
       }
 
       this.refreshData()
@@ -457,29 +453,6 @@ export default {
       this.searchContentHeight = height
     },
 
-    cellMouseEnter(row, column, cell, event) {
-      let content = row[`${column.property}`]
-      this.tooltip.show = false
-      if (typeof content == 'number' || typeof content == 'string') {
-        const { tooltip } = this
-        let style = event.target
-        let position = style.getBoundingClientRect()
-        const { top, left } = position
-        const { clientWidth, clientHeight } = style
-        tooltip.width = clientWidth
-        tooltip.height = clientHeight
-        tooltip.top = top
-        tooltip.left = left
-        tooltip.content = content
-        this.$nextTick(() => {
-          tooltip.show = true
-        })
-      }
-    },
-
-    cellMouseLeave() {
-      this.tooltip.show = false
-    },
     headerItemLock(params) {
       let { preIndex, index } = { ...params }
       let tableConfig = this.$props.tableConfig
@@ -671,7 +644,22 @@ export default {
 
       let screenResult = this.returnProScreenResult()
       this.$props.httpRequire(screenResult).then((res) => {
-        this.setTableData(res)
+        let isArray = res instanceof Array
+        if (isArray) {
+          this.setTableData(res)
+        } else {
+          const tableData = res.tableData
+          if (
+            res._class.__proto__.__proto__.constructor.name ==
+              'LinkViewClass' &&
+            !this._linkViewClassSubs
+          ) {
+            this._linkViewClassSubs = res._class
+          }
+          if (tableData) {
+            this.setTableData(tableData)
+          }
+        }
       })
     },
     // 设置表格数据
@@ -711,23 +699,45 @@ export default {
     },
     // 自定义表格的列
     setTableHeaderConfig(configList) {
-      //console.log(configList);
-      const index = this.$props.tableConfig.filter((item) => {
-        return item.lock
-      }).length
-      this.$props.tableConfig.splice(index, configList.length + 1)
-      this.$nextTick(() => {
-        configList.forEach((item) => {
-          this.$props.tableConfig.push(item)
-        })
-        this.$props.tableConfig.push({
-          label: '',
-          key: 'noData',
-          lock: false,
-          width: 30,
-          show: true,
-          template: false,
+      let leftFixedList = []
+      let rightFixedList = []
+      const { tableConfig } = this.$props
+      tableConfig.forEach((item) => {
+        const { lock } = item
+        if (lock && lock != 'right') {
+          leftFixedList.push(item)
+        } else if (lock && lock == 'right') {
+          rightFixedList.push(item)
+        }
+      })
+
+      tableConfig.splice(
+        leftFixedList.length,
+        configList.length - rightFixedList.length + 1,
+      )
+
+      configList.forEach((item, index) => {
+        const length = leftFixedList.length
+        tableConfig.splice(index + length, 1, item)
+      })
+      if (rightFixedList.length > 0) {
+        rightFixedList.forEach((item) => {
+          tableConfig.push(item)
         })
+      }
+      if (canPush) {
+        this.tableConfigPushEmpty()
+      }
+    },
+    tableConfigPushEmpty() {
+      const { tableConfig } = this.$props
+      tableConfig.push({
+        label: '',
+        key: 'noData',
+        lock: false,
+        width: 40,
+        show: true,
+        template: false,
       })
     },
     // 表格行被选中时
@@ -823,8 +833,16 @@ export default {
         return 0
       }
     },
+
+    isListLast(key) {
+      const { tableConfig } = this.$props
+      let index = tableConfig.findIndex((item) => {
+        return item.key == key
+      })
+
+      return index == tableConfig.length - 1
+    },
   },
-  watch: {},
 }
 </script>
 
@@ -894,11 +912,15 @@ export default {
       color: var(--font-color-d) !important;
       font-size: var(--font-size-base) !important;
     }
-    .active {
-      cursor: pointer;
+
+    .primary,
+    .fun {
       font-weight: var(--font-weight-g);
-      font-size: var(--font-size-base) !important;
       color: var(--color-primary) !important;
+      font-size: var(--font-size-base) !important;
+    }
+    .fun {
+      cursor: pointer;
       &:hover {
         text-decoration: underline;
       }

package/packages/components/style/element/index.css

@@ -8923,16 +8923,7 @@
   outline-width: 0;
 }
 
-.el-tooltip__popper {
-  position: absolute;
-  border-radius: 4px;
-  padding: 10px;
-  z-index: 2000;
-  font-size: 12px;
-  line-height: 1.2;
-  min-width: 10px;
-  word-wrap: break-word;
-}
+
 
 .el-tooltip__popper .popper__arrow,
 .el-tooltip__popper .popper__arrow::after {
@@ -11522,7 +11513,7 @@
   resize: vertical;
   padding: var(--padding-2) var(--padding-3);
   line-height: 1.5;
-  border: 0px !important;
+  border: 2px solid var(--color-gray-d) !important;
   -webkit-box-sizing: border-box;
   box-sizing: border-box;
   width: 100%;
@@ -11536,6 +11527,10 @@
   transition: border-color 0.2s cubic-bezier(0.645, 0.045, 0.355, 1);
 }
 
+.el-textarea__inner:hover {
+  border-color: var(--color-primary) !important;
+}
+
 .el-textarea__inner::-webkit-input-placeholder {
   color: #8f959e;
 }
@@ -14276,16 +14271,6 @@
   outline-width: 0;
 }
 
-.el-tooltip__popper {
-  position: absolute;
-  border-radius: 4px;
-  padding: 10px;
-  z-index: 2000;
-  font-size: 12px;
-  line-height: 1.2;
-  min-width: 10px;
-  word-wrap: break-word;
-}
 
 .el-tooltip__popper .popper__arrow,
 .el-tooltip__popper .popper__arrow::after {
@@ -18390,7 +18375,7 @@
 .el-tooltip__popper {
   position: absolute;
   border-radius: 4px;
-  padding: 10px;
+  padding: 4px;
   z-index: 2000;
   font-size: 12px;
   line-height: 1.2;