表格样式调整，销售漏斗，订单管理

src/HDrpManagement/orderManage/details/tabs/table.vue

@@ -7,10 +7,10 @@
           type="selection"
           width="35" fixed v-if="checkbox">
       </el-table-column>
-      <el-table-column 
-        v-for="(col,index) in layout" :key="col.tablecolid" 
-        :prop="col.columnname" 
-        :label="col.title" 
+      <el-table-column
+        v-for="(col,index) in layout" :key="col.tablecolid"
+        :prop="col.columnname"
+        :label="col.title"
         :min-width="tool.calcTableColWidth($refs.table,layout,index)"
         :fixed="fixedCalc(col.columnname)"
       >
@@ -48,6 +48,14 @@ export default {
       list:[],
     }
   },
+  watch:{
+    data(){
+      console.log('执行了222')
+      this.$nextTick(() => {
+        this.$refs.table.doLayout()
+      });
+    }
+  },
   computed:{
     ...mapGetters({
       loading:'loading'
@@ -69,9 +77,9 @@ export default {
           }
         } else {
           return false
-        } 
+        }
       }
-      
+
     }
   },
   methods:{
@@ -84,12 +92,32 @@ export default {
     selectionChange(row){
       this.$emit('selectionChange',row)
     },
-    
+
   },
   mounted () {
   }
 }
 
 </script>
-<style>
-</style>
+<style scoped>
+/* 解决横向滚动条被固定列遮住的问题 */
+>>>.el-table__fixed, >>>.el-table__fixed-right {
+  height: calc(100% - 15px) !important;
+}
+/* 解决横向滚动条滑至最右时，列对不齐的问题 */
+>>>.el-table__header-wrapper{
+  padding-right: 15px !important;
+}
+/* 解决竖向滚动条被固定列遮住的问题 */
+>>>.el-table__fixed-right {
+  right: 15px !important;
+}
+/* 解决竖向滚动条滑至底部时，行对不齐的问题 */
+>>>.el-table__fixed-body-wrapper .el-table__body {
+  padding-bottom: 15px;
+}
+/* 解决滑动横向滚动条时，表头最右侧会露出其他列表头的内容，形成的“样式穿透”问题 */
+>>>.el-table__fixed-right-patch {
+  width: 15px !important;
+}
+</style>

src/HDrpManagement/salerPortrait/modules/detail.vue

@@ -951,7 +951,7 @@
               >
                 <template v-slot:custom="scope">
                   <div v-if="scope.data.columnname == 'specialoffer'">
-                    {{ scope.data.data.specialoffer ? this.$t("是") :  this.$t("否") }}
+                    {{ scope.data.data.specialoffer ? $t("是") :  $t("否") }}
                   </div>
                   <div v-else-if="scope.data.columnname == 'sumamount'">
                     {{

src/components/table/index10.vue

@@ -0,0 +1,70 @@
+<template>
+  <div>
+    <!-- :header-cell-style="{background:'#EEEEEE',color:'#333'}" -->
+    <el-table ref="table" :row-class-name="tableClassName" highlight-current-row :data="data"  size="small"    @row-click="rowClick" show-summary
+              style="width:100%;" :header-cell-style="{height:'60px',fontWeight:'400',fontSize:'22px',color:'#333333',background:'#ddebf7'}"
+              :cell-style="{height:'40px',fontWeight:'400',fontSize:'18px'}" border @selection-change="selectionChange" >
+      <el-table-column
+          type="selection"
+          width="35" fixed v-if="checkbox">
+      </el-table-column>
+      <el-table-column v-for="(col,index) in layout" :key="col.tablecolid" :prop="col.columnname" :label="col.title" :min-width="tool.calcTableColWidth($refs.table,layout,index)" :fixed="fixedName ? fixedName.indexOf(col.columnname)!= -1?'right':false : false">
+        <template slot-scope="scope">
+          <div class="table-panel">
+            <!-- 自定义表格显示内容 -->
+            <slot v-if="custom" name="customcol" :column="{data:scope.row,columnname:col.columnname}"></slot>
+            <!-- 否则就是默认 -->
+            <span v-else>{{scope.row[col.columnname]}}</span>
+            <!-- 操作结构内容 -->
+            <slot v-if="col.columnname === 'operation'" name="opreation" :data="scope.row"></slot>
+          </div>
+        </template>
+      </el-table-column>
+    </el-table>
+  </div>
+</template>
+
+<script>
+import {mapGetters} from "vuex"
+export default {
+  /*
+    layout:表结构数据;
+    data:表渲染数据;
+    custom:是否启用自定义结构;
+    opwidth:操作列宽度
+  */
+  props:['layout','data','custom','height','fixedName','width','checkbox','showSummary'],
+  data () {
+    return {
+      list:[],
+      allArr:[],
+      loading:false
+    }
+  },
+  /*computed:{
+    ...mapGetters({
+      loading:'loading'
+    })
+  },*/
+  methods:{
+    rowClick (row) {
+      this.$emit('rowClick',row)
+    },
+    tableClassName ({row,rowIndex}) {
+      row.index = rowIndex
+    },
+    selectionChange(row){
+      this.allArr = row
+      this.$emit('selectionChange',row)
+    }
+  },
+  mounted () {
+  }
+}
+
+</script>
+<style scoped>
+/deep/ .el-table--small {
+  font-size: 18px;
+}
+</style>

src/components/table/index8.vue

@@ -8,7 +8,7 @@
           type="selection"
           width="35" fixed v-if="checkbox">
       </el-table-column>
-      <el-table-column v-for="(col,index) in layout" :key="col.tablecolid" :prop="col.columnname" :label="col.title" :min-width="tool.calcTableColWidth($refs.table,layout,index)":fixed="fixedName ? fixedName.indexOf(col.columnname)!= -1?'right':false : false">
+      <el-table-column v-for="(col,index) in layout" :key="col.tablecolid" :prop="col.columnname" :label="col.title" :min-width="tool.calcTableColWidth($refs.table,layout,index)" :fixed="fixedName ? fixedName.indexOf(col.columnname)!= -1?'right':false : false">
         <template slot-scope="scope">
           <div class="table-panel">
             <!-- 自定义表格显示内容 -->

src/views/mediaStatistics/modules/salesfunnel.vue

@@ -31,15 +31,15 @@
       </el-select>
     </div>
     <div class="inline-16">
-      <el-checkbox v-model="unfinish" true-label="0" false-label="1" @change="dataParam.content.where.unfinish = unfinish;projectParam.content.where.unfinish = unfinish;getProportionOfFileModel()">包含失败、结案项目</el-checkbox>
+      <el-checkbox v-model="unfinish" true-label="0" false-label="1" @change="dataParam.content.where.unfinish = unfinish;projectParam.content.where.unfinish = unfinish;getProportionOfFileModel()">{{$t(`包含失败、结案项目`)}}</el-checkbox>
     </div>
     <div class="inline-16" style="margin-top:0px;margin-bottom: 20px">
       <el-button-group>
         <el-button size="small" :type="dataParam.content.dateType==99?'primary':''" @click="dataChange(99)">{{$t(`全部`)}}</el-button>
-        <el-button size="small" :type="dataParam.content.dateType==1?'primary':''" @click="dataChange(1)">近一年</el-button>
-        <el-button size="small" :type="dataParam.content.dateType==2?'primary':''" @click="dataChange(2)">近九个月</el-button>
-        <el-button size="small" :type="dataParam.content.dateType==3?'primary':''" @click="dataChange(3)">近六个月</el-button>
-        <el-button size="small" :type="dataParam.content.dateType==4?'primary':''" @click="dataChange(4)">近三个月</el-button>
+        <el-button size="small" :type="dataParam.content.dateType==1?'primary':''" @click="dataChange(1)">{{$t(`近一年`)}}</el-button>
+        <el-button size="small" :type="dataParam.content.dateType==2?'primary':''" @click="dataChange(2)">{{$t(`近九个月`)}}</el-button>
+        <el-button size="small" :type="dataParam.content.dateType==3?'primary':''" @click="dataChange(3)">{{$t(`近六个月`)}}</el-button>
+        <el-button size="small" :type="dataParam.content.dateType==4?'primary':''" @click="dataChange(4)">{{$t(`近三个月`)}}</el-button>
       </el-button-group>
     </div>
     <div class="inline-16" style="margin-top:0px;margin-bottom: 20px">
@@ -59,47 +59,21 @@
     <div>
       <el-row>
         <el-col :xs="15" :sm="15" :md="15" :lg="15" :xl="14">
-          <p class="title">销售漏斗图</p>
+          <p class="title">{{$t(`销售漏斗图`)}}</p>
           <div class="re-panel">
             <div id="containerFunnel" style="height: calc(60vh)"></div>
           </div>
         </el-col>
         <el-col :offset="1" :xs="8" :sm="8" :md="8" :lg="8" :xl="9">
           <div>
-            <p class="title">表格数据</p>
-            <el-table
-                show-summary
-                :data="tableData"
-                style="width: 100%"
-                size="small"
-                :header-cell-style="{height:'60px',fontWeight:'400',fontSize:'22px',color:'#333333',background:'#ddebf7'}"
-                :cell-style="{height:'40px',fontWeight:'400',fontSize:'18px'}"
-                border>
-              <el-table-column
-                  prop="stagename"
-                  label="阶段"
-                  width="150">
-              </el-table-column>
-              <el-table-column
-                  prop="projectqty"
-                  label="项目数"
-                  width="100">
-              </el-table-column>
-              <el-table-column
-                  prop="signamount_due"
-                  label="预计签约金额(万元)">
-                <template slot-scope="scope">
-                  <div style="white-space: pre-wrap">{{scope.row.signamount_due}}</div>
-                </template>
-              </el-table-column>
-              <el-table-column
-                  prop="dealamount"
-                  label="项目成交金额(万元)">
-                <template slot-scope="scope">
-                  <div style="white-space: pre-wrap">{{scope.row.dealamount}}</div>
-                </template>
-              </el-table-column>
-            </el-table>
+            <p class="title">{{$t(`表格数据`)}}</p>
+            <tableNewTemp :layout="tablecolsData" :data="tableData" :opwidth="200" :custom="true" >
+              <template v-slot:customcol="scope">
+                <div>
+                  {{scope.column.data[[scope.column.columnname]]?scope.column.data[[scope.column.columnname]]:'--'}}
+                </div>
+              </template>
+            </tableNewTemp>
           </div>
         </el-col>
       </el-row>
@@ -179,10 +153,11 @@
 
 <script>
 import tableTemp from '@/components/table/index8'
+import tableNewTemp from '@/components/table/index10'
 import { Funnel,G2 } from '@antv/g2plot';
 const G = G2.getEngine('canvas');
 export default {
-  components:{tableTemp},
+  components:{tableTemp,tableNewTemp},
   data () {
     return {
       chartPie:null,
@@ -209,6 +184,7 @@ export default {
       personnelList:[],
       projectList:[],
       tablecols:[],
+      tablecolsData:[],
       depmentParam:{
         "id": 20230620102004,
         "content": {
@@ -837,6 +813,7 @@ export default {
   },
   created() {
     this.tablecols = this.tool.tabelCol(this.$route.name).projectTable.tablecols
+    this.tablecolsData = this.tool.tabelCol(this.$route.name).tableDatas.tablecols
   }
 }
 
@@ -857,11 +834,4 @@ export default {
 .container{
  /* height:calc(100vh)*/
 }
-/*/deep/.el-table .cell {*/
-
-/*  font-size: 18px;*/
-/*}*/
-/deep/ .el-table--small {
-  font-size: 18px;
-}
 </style>