meixioacomponent 0.3.39 → 0.3.42

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,6 +121,25 @@
               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="
@@ -137,19 +161,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 +213,7 @@ import baseButtonHandle from '../base/baseButtonHandle/baseButtonHandle.vue' //
 
 //
 import componentConfig from '../../config/componentConfig'
+let canPush = true
 export default {
   name: 'baseProTable',
   data() {
@@ -221,26 +233,14 @@ 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,
     }
@@ -275,7 +275,8 @@ export default {
     },
     fixedList() {
       return this.$props.tableConfig.filter((item) => {
-        return item.lock
+        const { lock } = item
+        return lock && lock != 'right'
       })
     },
 
@@ -293,15 +294,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 +422,7 @@ export default {
   },
   methods: {
     init() {
+      canPush = !this.isAverageWidth
       this.initProScreenConfig()
       this.initFooterHandleConfig()
       this.$props.tableConfig.forEach((item, index) => {
@@ -438,17 +431,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 +446,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
@@ -711,23 +677,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,
       })
     },
     // 表格行被选中时
@@ -798,6 +786,7 @@ export default {
       })
     },
     sortChange(column) {
+      console.log('sort')
       this.tableData = this.tableData.sort(
         this.sortFun(
           column.prop,
@@ -823,6 +812,15 @@ 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: {},
 }
@@ -894,11 +892,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 {
@@ -14276,16 +14267,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 +18371,7 @@
 .el-tooltip__popper {
   position: absolute;
   border-radius: 4px;
-  padding: 10px;
+  padding: 4px;
   z-index: 2000;
   font-size: 12px;
   line-height: 1.2;

package/packages/components/style/index.less

@@ -13,6 +13,10 @@ body {
   margin: 0px;
   --footer-height: 40px;
   --header-height: 63px;
+
+  .popper__arrow {
+    display: none !important;
+  }
 }
 
 html {
@@ -109,4 +113,4 @@ h6 {
 
 #nprogress .bar {
   background: var(--color-primary) !important;
-}
+}

package/src/App.vue

@@ -1,36 +1,38 @@
 <template>
   <div id="app">
-    <div style="height: 100vh">
-
+    <div style="height: 100vh;">
+      <test></test>
     </div>
   </div>
 </template>
 
 <script>
-import test from "./component/test.vue";
+import test from './component/test.vue'
 
-import BaseArea from "../packages/components/base/baseArea/baseArea.vue";
-import BaseTimeLine from "../packages/components/base/baseTimeLine/baseTimeLine.vue";
+import BaseArea from '../packages/components/base/baseArea/baseArea.vue'
+import BaseTimeLine from '../packages/components/base/baseTimeLine/baseTimeLine.vue'
 export default {
   components: { test, BaseArea, BaseTimeLine },
   data() {
     return {
       test: [],
       items: [
-        { type: "", label: "标签一" },
-        { type: "success", label: "标签二" },
-        { type: "info", label: "标签三" },
-        { type: "danger", label: "标签四" },
-        { type: "warning", label: "标签五" },
+        { type: '', label: '标签一' },
+        { type: 'success', label: '标签二' },
+        { type: 'info', label: '标签三' },
+        { type: 'danger', label: '标签四' },
+        { type: 'warning', label: '标签五' },
       ],
       value: [],
       value2: [],
       value3: [],
-    };
+
+      flag: false,
+    }
   },
   mounted() {},
   methods: {},
-};
+}
 </script>
 
 <style lang="less" scoped>

package/src/component/test.vue

@@ -456,6 +456,7 @@ export default {
         width: 150,
         template: false,
         screen: true,
+        toolTip: true,
       },
       {
         label: '合同名称',
@@ -486,10 +487,32 @@ export default {
         width: 280,
         template: false,
       },
+      {
+        label: '审核状态2',
+        key: 'status1',
+        lock: false,
+        width: 280,
+        template: false,
+      },
+      {
+        label: '审核状态3',
+        key: 'status2',
+        lock: false,
+        width: 280,
+        template: false,
+      },
+      {
+        label: '审核状态4',
+        key: 'status3',
+        lock: false,
+        width: 280,
+        template: false,
+      },
       {
         label: '签署时间',
         key: 'gmtCreate',
-        lock: false,
+        lock: 'right',
+        // lock: false,
         width: 280,
         template: false,
       },

package/src/test.js

@@ -1,8 +1,8 @@
-import { reactive } from "vue"
+import { reactive, ref } from "vue"
 
 
-let tableTable = reactive([{ firmName: 1 },
-{ firmName: 2 },
+let tableTable = ref([{ firmName: 1 },
+{ firmName: '这是一段八个字的文字' },
 { firmName: 3 },
 { firmName: 4 },
 { firmName: 5 },