Bladeren bron

fix: 调研表格应用层

ldong 2 weken geleden
bovenliggende
commit
ec5c4de122

+ 1 - 0
src/lang/modules/ETATables/En.js

@@ -214,6 +214,7 @@ export default {
   /* 混合表  */
   MixSheet:{
     save_btn:'save',
+    font_size:'Font size',
     font_color:'Font color',
     fill_color:'Fill color',
     conditional_format:'Conditional formatting',

+ 1 - 0
src/lang/modules/ETATables/Zh.js

@@ -227,6 +227,7 @@ export default {
   /* 混合表  */
   MixSheet:{
     save_btn:'保存',
+    font_size:'字号',
     font_color:'字体颜色',
     fill_color:'颜色填充',
     conditional_format:'条件格式',

+ 85 - 3
src/views/datasheet_manage/components/toolBarSection.vue

@@ -34,7 +34,21 @@
             </el-option>
           </el-select>
         </template>
-          
+        <template v-if="tool.type==='size'">
+          <el-popover
+            popper-class="select-font-size"	
+            placement="bottom"
+            v-model="visible"
+            width="70"
+            trigger="click">
+              <div class="font-size-list">
+                <div @click.stop="chooseSize(item)" :class="{'choose-size':option.fontSize==item}" :id="'size'+item" class="font-size-item" v-for="(item,index) in fontSizeList" :key="index" >{{ item }}px</div>
+              </div>
+              <el-tooltip slot="reference" effect="dark" :content="tool.title" placement="top">
+                <span v-html="tool.icon"></span>
+              </el-tooltip>
+          </el-popover>
+        </template>
         <template v-if="tool.type==='color'">
           <el-tooltip  effect="dark" :content="tool.title" placement="top">
             <div class="color-picker-box">
@@ -78,7 +92,7 @@ export default {
     */
     tools:{
       type:'String',
-      default:'cell-point-type,cell-merge,font-color,condition-format,cell-decimal,cell-align',
+      default:'cell-point-type,cell-merge,font-color,condition-format,cell-decimal,cell-align,font-size',
     },
     // 回显参数
     echoParameter:{
@@ -89,6 +103,17 @@ export default {
     }
   },
   watch: {
+    visible:{
+      handler(nval) {
+        console.log(nval)
+        if(nval){
+          if(this.option.fontSize){
+            this.scrollTo('size'+this.option.fontSize)
+          }
+        }
+      },
+      deep:true
+    },
     cell:{
       handler(nval) {
         if(nval) {
@@ -99,6 +124,7 @@ export default {
           }:{
             nt: "",//numberType
             pn: 0,//ponitNum
+            fontSize:''
           }
           this.option.decimal=!isNaN(parseFloat(this.option.decimal)) && isFinite(this.option.decimal)?this.option.decimal:undefined
         }else{
@@ -106,6 +132,7 @@ export default {
           this.option ={
             nt: "",//numberType
             pn: 0,//ponitNum
+            fontSize:''
           }
         }
       },
@@ -114,6 +141,7 @@ export default {
   },
   data() {
     return {
+      visible:false,
       option: {
         nt: "",//numberType  number percent
         pn: 0,//ponitNum
@@ -124,6 +152,7 @@ export default {
         fontColor:'',
         backColor:'',
       },
+      fontSizeList:["6","8","10","12", "13","14","15", "16", "18", "20", "22", "24", "28", "32", "36", "40"],
       predefineColors: [
         '#ff4500',
         '#ff8c00',
@@ -205,7 +234,15 @@ export default {
           title:this.echoParameter.hasMergedCell?this.$t('ETable.Btn.unmerge'):this.$t('ETable.Btn.merge_cell'),
           tool:'cell-merge'
         },
-        
+        { 
+          icon: `<svg t="1733796725915" class="icon" viewBox="0 0 1024 1024" version="1.1" xmlns="http://www.w3.org/2000/svg" p-id="2327" width="20" height="20">
+            <path d="M1021.7 855.6L867 430.5c-3.1-11.6-11.6-21.5-23.7-26-10-3.7-21.1-3-30.7 2s-16.4 13.6-19.2 24L638.6 855.6c-7.2 19.8 3.1 41.5 22.8 48.7 19.8 7.2 41.5-3.1 48.7-22.8l40.1-110.2h160l40.1 110.2c7.2 19.8 29.1 29.9 48.7 22.8 19.7-7.2 29.9-29.1 22.7-48.7z m-244-160.3L830 551.4l52.4 143.9H777.7zM149.7 693.8l-46 128.7c-3.7 10.4-7.5 20.5-11.3 30.2-3.7 9.8-8 18.7-12.9 26.8-4.8 8.2-10.4 14.7-16.8 19.5-6.3 4.8-13.6 7.3-21.9 7.3-15 0-26.5-4.6-34.7-14-8.2-9.4-8.2-26.6 0-52.1l235.3-683.9c3.7-11.9 10.3-21.4 19.5-28.6 9.4-7 21.4-10.6 36.4-10.6 15.6 0 28.3 3.6 38.1 10.6s16.4 16.7 20.2 28.6l236.2 686.3c6.1 17.9 6.3 33 1.1 45.4-5.2 12.2-17.6 18.5-37 18.5-12.7 0.7-22.9-2.7-30.8-10.6-7.9-7.9-13.6-18.1-17.3-30.8L446.2 694l-296.5-0.2z m276.6-78.2L298.6 231.5 171.1 615.6h255.2z" p-id="2328" fill="#333333"></path>
+            </svg>`,
+          key: 'fontSize',
+          type:'size',
+          title: this.$t("MixSheet.font_size"),
+          tool:'font-size'
+        },
         { 
           icon: `<svg width="23" height="23" viewBox="0 0 20 20"  xmlns="http://www.w3.org/2000/svg">
             <path d="M8.875 1.25H11.125L16.25 13.75H14.125L12.875 10.5H7.125L5.875 13.75H3.75L8.875 1.25ZM7.75 9H12.25L10 3.375H9.875L7.75 9Z" fill="#333333"/>
@@ -309,6 +346,14 @@ export default {
     },
   },
   methods: {
+    // 滚动到指定位置
+    scrollTo(id) {
+      this.$nextTick(()=>{
+        document.getElementById(id).scrollIntoView({
+          behavior: 'smooth' // 平滑滚动
+        });
+      })
+    },
     // 当新增状态不可添加条件格式
     handlerClickTj(){
       this.$message({
@@ -351,6 +396,21 @@ export default {
         }
       })
     },
+    // 选择字号
+    chooseSize(val){
+      this.visible=false
+      this.cellArray.map(item =>{
+        if(!item.merData || item.merData.type=='merge'){
+          this.chooseCellSize(val,item)
+        }
+      })
+    },
+    /* 处理单个单元格字号 */
+    chooseCellSize(size,cell) {
+      let sizeObj={'fontSize':`${size}`}
+      let cellValueStyle = cell.ShowStyle?JSON.parse(cell.ShowStyle):{}
+      cell.ShowStyle = JSON.stringify({...cellValueStyle,...sizeObj})
+    },
     /* 处理单个单元格 */
     chooseCellColor(type,color,cell) {
       let colorObj=type==='font'?{'color':`${color}`}:{'background-color':`${color}`}
@@ -579,4 +639,26 @@ export default {
     }
   }
 }
+
+.select-font-size{
+  width: 65px;
+  min-width: 65px;
+  height:275px;
+  overflow-y: auto;
+  padding:12px 0;
+  .font-size-list{
+    .font-size-item{
+      cursor: pointer;
+      padding: 5px 0;
+      text-align: center;
+      &:hover{
+        background: #DEE0E2;
+      }
+    }
+  }
+  .choose-size{
+    background: #409EFF;
+    color: white;
+  }
+}
 </style>

+ 1 - 0
src/views/datasheet_manage/mixins/conditionTableMixin.js

@@ -536,6 +536,7 @@ export default {
                 "background-color": BackgroundColor,
                 'text-align': styleCss.align ? styleCss.align : 'center',
                 'width': styleCss.width ? styleCss.width + 'px' : '140px',
+                'font-size': styleCss.fontSize ? styleCss.fontSize+'px' : '14px',
             }
             if (type == 'header') {
                 obj = {