toolbar改变小数位数

src/views/datasheet_manage/common/customTable.js

@@ -262,3 +262,52 @@ export function findCellKeyByFactor(str) {
 
   return el ? (el.dataset.key||'') : null;
 }
+
+/* 判断值是否是一个数字或数字字符串 */
+export function isNumberVal(value) {
+   let reg = /^(?:\d*\.?\d+|\d+%|\d*\.\d+%)$/;
+   
+   return reg.test(value);
+}
+
+/* 增加减少小数点位数 */
+export function transDecimalPlace(str,decimalNum) {
+  console.log(str,decimalNum)
+  let s = str, decimalPlaces = getDecimalPlaces(str);
+
+  if(decimalPlaces===0) { //整数
+    // 补零
+    const zerosToAdd = Math.max(0, decimalNum);
+    return zerosToAdd > 0 ? `${s}.${'0'.repeat(zerosToAdd)}`:s;
+  }
+
+  let integerStr = str.split('.')[0],
+      decimalStr = str.split('.')[1];
+
+  if(decimalNum>0) {
+    return `${s}${'0'.repeat(decimalNum)}`
+  } else {
+    return decimalNum+decimalPlaces > 0 ? `${integerStr}.${decimalStr.substring(0,decimalNum+decimalPlaces)}`:integerStr
+  }
+}
+
+/* 计算小数点位数 */
+export function getDecimalPlaces(numStr) {
+  // 移除百分号，如果有的话
+  numStr = numStr.replace('%', '');
+
+  // 如果没有小数点，说明小数点位数为 0
+  if (!numStr.includes('.')) {
+    return 0;
+  }
+
+  // 获取当前小数点后的位数
+  const decimalPlaces = numStr.split('.')[1].length;
+
+  return decimalPlaces;
+}
+
+/* 格式化单元格值 显示转换 */
+export function transShowValueByStyle() {
+
+}

src/views/datasheet_manage/components/MixedTable.vue

@@ -1,6 +1,9 @@
 <template>
   <div class="table-wrapper" @keydown="handlekeyDownKeys">
     <template v-if="config.data.length">
+
+      <!-- 工具栏 -->
+      <toolBarSection v-if="!disabled" :cell="selectCell" @updateCell="updateCellStyle"/>
       
       <!-- 公式显示区 -->
       <div class="formula-wrapper" v-if="!disabled">
@@ -64,8 +67,9 @@
             >
 
             <!-- 插入单元格禁止编辑 -->
+            <!-- [4,5,6,7,8].includes(cell.DataType)&&!cell.CanEdit -->
             <template 
-              v-if="([4,5,6,7,8].includes(cell.DataType)&&!cell.CanEdit)
+              v-if="!cell.CanEdit
               ||disabled
               ||(cell.DataType===1&&[1,2].includes(cell.DataTimeType))"
             >
@@ -96,9 +100,19 @@
                   :data-rindex="rowHeader[index]"
                   :data-cindex="columnHeader[cell_index]"
                   :data-key="cell.Uid"
-                >{{ cell.ShowValue }}</span>
+                >{{ cell.ShowStyle?cell.ShowFormulaValue:cell.ShowValue }}</span>
               </el-popover>
 
+              <!-- 数字格式化显示 -->
+              <span 
+                v-else-if="cell.ShowStyle"
+                :data-rindex="rowHeader[index]"
+                :data-cindex="columnHeader[cell_index]"
+                :data-key="cell.Uid"
+              >
+                {{cell.ShowFormulaValue}}
+              </span>
+
               <span
                 :data-rindex="rowHeader[index]"
                 :data-cindex="columnHeader[cell_index]"
@@ -170,6 +184,7 @@
     <!-- 选择指标 -->
     <selectTargetValueDia
       :isShow.sync="isSelectTargetValueDialog"
+      :info="insertTargetValueInfo"
       @insert="insertSelectData"
       ref="selectTargetValueRef"
     />
@@ -224,6 +239,7 @@ import selectTargetValueDia from './selectTargetValueDia.vue';
 import insertDateDia from './insertDateDia.vue';
 import calculateEdbDia from './calculateEdbDia.vue';
 import calculateDateDia from './calculateDateDia.vue';
+import toolBarSection from './toolBarSection.vue';
 import { formulaTip } from '@/views/dataEntry_manage/databaseComponents/util';
 export default {
   props: {
@@ -232,7 +248,13 @@ export default {
       default: false,
     }
   },
-  components: { selectTargetValueDia,insertDateDia,calculateEdbDia,calculateDateDia },
+  components: { 
+    selectTargetValueDia,
+    insertDateDia,
+    calculateEdbDia,
+    calculateDateDia,
+    toolBarSection
+  },
   computed: {
     //列头
     columnHeader() {
@@ -290,7 +312,8 @@ export default {
 
       insertRelationArr: [], //表格单元格依赖关系数组
 
-      isSelectTargetValueDialog: false,
+      isSelectTargetValueDialog: false,//选择指标插入值弹窗
+      insertTargetValueInfo: {},//编辑 关联info
 
       cellrelationEdbInfo: {}, //指标浮窗信息
 
@@ -367,10 +390,10 @@ export default {
       }
 
       //选择指标弹窗打开时选择日期更新弹窗数据
-      this.isSelectTargetValueDialog&&this.$refs.selectTargetValueRef.chooseEdb(this.$refs.selectTargetValueRef.edbInfo)
+      this.isSelectTargetValueDialog&&this.$refs.selectTargetValueRef.changeDateType(this.selectCell)
 
       //计算指标弹窗打开时选择日期更新弹窗数据
-      this.isInsertCalculate&&this.$refs.calculateEdbDiaRef.showResult&&this.$refs.calculateEdbDiaRef.calculateHandle()
+      // this.isInsertCalculate&&this.$refs.calculateEdbDiaRef.showResult&&this.$refs.calculateEdbDiaRef.calculateHandle()
 
       //日期计算弹窗打开选中日期框时且有选中item时更新选中值
       cell.DataType===1&&this.isInsertCalculateDate&&this.$refs.calculateDateDiaRef.selectIndex&&this.$refs.calculateDateDiaRef.setSelectItemValue(this.selectCell)
@@ -504,7 +527,6 @@ export default {
       // 是日期格式 DataType为1
       // 自定义内容 DataType 3
       //有=号为输入公式 DataType 6
-
       const {value} = e.target;
       if(!value){ //无值重置单元格
         cell.DataType = 3;
@@ -713,8 +735,10 @@ export default {
     /* 右键事件 */
     async handleContext(key) {
 
+      //可右键编辑的单元格类型
       let editHandlesMap = {
         1: this.insertDateOpen,
+        5: this.selectTargetOpen,
         7: this.edbCalculateInsertOpen,
         8: this.insertDateCalculateOpen
       }
@@ -740,27 +764,34 @@ export default {
 
     /* 打开选择指标弹窗  
     打开弹窗后仍可以在页面上点击 多存一个选择指标时的当前单元格信息 */
-    selectTargetOpen() {
+    selectTargetOpen(type) {
       this.insertTargetCell = this.selectCell;
       setRelationStyle({ key:this.insertTargetCell.Uid },'td-choose-insert-target')
+      if(type === 'cell-edit') {
+        this.insertTargetValueInfo = {
+          ...this.insertTargetCell
+        }
+      }else {
+        this.insertTargetValueInfo = {}
+      }
       this.isSelectTargetValueDialog = true;
 
       this.resetDialogStatus('insertEdbVal')
     },
 
     /* 插入选择指标的值 */
-    insertSelectData({ edbId,value,date }) {
+    insertSelectData({ edbId,value,relationDate,str }) {
 
       this.insertTargetCell.DataType = 5;
       this.insertTargetCell.ShowValue = value;
-      this.insertTargetCell.Value = value;
+      this.insertTargetCell.Value = str;
       this.insertTargetCell.EdbInfoId = edbId;
-      this.insertTargetCell.DataTime = date;
+      this.insertTargetCell.DataTime = relationDate;
 
-      this.$message.success('插入成功')
+      value ? this.$message.success('插入成功') : this.$message.warning('该日期当前无值')
 
       //如果有关联表格日期就建立新的关联关系
-      if(date) {
+      if(relationDate) {
         let relation = {
           insert_cell: {
             key: this.insertTargetCell.Uid,
@@ -964,7 +995,7 @@ export default {
 
     /* 导入指标计算值 */
     insertCalculateData(item) {
-      console.log(item)
+      // console.log(item)
       const { InsertValue,EdbInfoId,Str,Date } = item;
       this.insertTargetCell.DataType = 7;
       this.insertTargetCell.ShowValue = InsertValue;
@@ -972,7 +1003,7 @@ export default {
       this.insertTargetCell.EdbInfoId = EdbInfoId;
       this.insertTargetCell.DataTime = Date;
 
-      this.$message.success('插入成功')
+      InsertValue ? this.$message.success('插入成功') : this.$message.warning('该日期当前无值')
 
       //如果有关联表格日期就建立新的关联关系
       if(Date) {
@@ -1090,19 +1121,17 @@ export default {
         e.target.nodeName && e.target.blur();
         this.$refs[`inputRef${e.target.dataset.key}`]&&this.$refs[`inputRef${e.target.dataset.key}`][0].close()
 
-        cell.DataType===6 && this.$set(cell,'CanEdit',false)
-        // this.calculateClickCell = null
+        // cell.DataType===6 && this.$set(cell,'CanEdit',false)
+        this.$set(cell,'CanEdit',false)
       }
     },
 
-    /* 支持公式单元格双击切换状态 */
+    /* 双击切换状态 插值单元格不允许切换 可切换类型1，2，3，6*/
     dblClickCellHandle(e,cell) {
-      if(this.disabled || cell.DataType!==6) return
+      if(this.disabled || ![1,2,3,6].includes(cell.DataType) || [1,2].includes(cell.DataTimeType)) return
 
       this.$set(cell,'CanEdit',true)
-
-      // this.calculateClickCell = cell;
-      // setRelationStyle({ key:cell.Uid },'td-choose-insert-target')
+      console.log(cell)
 
       this.$nextTick(() => {
         if(e.target.childNodes[0].childNodes[0].childNodes[1].nodeName==='INPUT') e.target.childNodes[0].childNodes[0].childNodes[1].focus();
@@ -1126,6 +1155,17 @@ export default {
       if(e.keyCode === 9) {
         e.preventDefault();
       }
+    },
+
+    /* 改变单元格显示文本 */
+    updateCellStyle({ShowStyle,ShowFormulaValue}) {
+      // this.selectCell = {
+      //   ...this.selectCell,
+      //   ...item
+      // }
+      this.$set(this.selectCell,'ShowStyle',ShowStyle)
+      this.$set(this.selectCell,'ShowFormulaValue',ShowFormulaValue)
+      console.log(this.selectCell)
     }
   },
 };

src/views/datasheet_manage/components/calculateEdbDia.vue

@@ -46,7 +46,7 @@
                 v-for="(item,index) in edbArrFromTable" 
                 :key="index"
                 @click="selectTableEdbHandle(item)"
-              >{{ item.ShowValue }}</el-tag>
+              >{{ item.EdbName }}</el-tag>
           </div>
         </section>
         
@@ -70,7 +70,6 @@
 								style="width: 100px"
 								placeholder=""
 								size="mini"
-								@change="changeParams"
 							>
 								<el-option
 									v-for="item in moveTypeOpions"
@@ -87,14 +86,12 @@
 								size="mini"
 								v-model="formData.moveVal"
 								@keyup.native="filterCode(formData)"
-                @change="changeParams"
 							></el-input>
 							<el-select
 								v-model="formData.moveUnit"
 								size="mini"
 								placeholder=""
 								style="width: 100px"
-                @change="changeParams"
 							>
 								<el-option
 									v-for="item in fre_options"
@@ -112,7 +109,6 @@
 								style="width: 200px"
 								placeholder="请输入N数值"
 								type="number"
-								@change="changeParams"
 							/>
 						</el-form-item>
 
@@ -121,7 +117,6 @@
 								v-model="formData.calendarType"
 								placeholder="请选择日历"
 								style="width: 200px"
-								@change="changeParams"
 							>
 								<el-option
 									v-for="item in calendarOptions"
@@ -139,7 +134,6 @@
 								placeholder="请选择频度"
 								style="width: 200px"
 								clearable
-                @change="changeParams"
 							>
 								<el-option
 									v-for="item in frequencyArr"
@@ -156,7 +150,6 @@
 								v-model="formData.valueType"
 								placeholder="请选择数据取值类型"
 								style="width: 200px"
-                @change="changeParams"
 							>
 								<el-option key="期末值" label="期末值" value="期末值"/>
 								<el-option key="平均值" label="平均值" value="平均值"/>
@@ -168,14 +161,38 @@
                 v-model="formData.alphaValue" 
                 placeholder="请选择alpha值"
                 style="width: 200px"
-                @change="changeParams"
               />
 						</el-form-item>
 					</el-form>
         </section>
 
+        <section>
+          <!-- 依赖日期选择方式 -->
+          <ul class="date-select-cont">
+            <li class="flex">
+              <div class="flex">
+                <el-radio v-model="dateSelectForm.Type" :label="1">指标最新日期</el-radio>
+                <div>
+                  <label class="el-form-item__label">期数前移</label>
+                  <el-input
+                    v-model="dateSelectForm.MoveForward"
+                    type="number"
+                    :min="0"
+                    style="margin-right:10px;width:80px"
+                    @change="e => {dateSelectForm.MoveForward=Number(e);}"
+                  />期
+                </div>
+              </div>
+              <el-radio v-model="dateSelectForm.Type" :label="2" style="margin-left:50px">表格日期</el-radio>
+            </li>
+            <li>
+              <dateMoveWaySec ref="dateMoveWayRef"/>
+            </li>
+          </ul>
+        </section>
+
         <!-- 计算结果 -->
-        <section class="result-section" v-if="showResult">
+        <!-- <section class="result-section" v-if="showResult">
           <label>计算结果:</label>
           <ul class="data-cont" v-if="calculateShowData.length">
               <li 
@@ -189,11 +206,11 @@
           </ul>
 
           <tableNoData text="无对应的数据" size="mini" v-else/>
-        </section>
+        </section> -->
 
         <section class="bot">
-          <el-button type="primary" @click="insertData" v-if="showResult">插入值</el-button>
-          <el-button type="primary" @click="calculateHandle" v-else>计算</el-button>
+          <!-- <el-button type="primary" @click="insertData" v-if="showResult">插入值</el-button> -->
+          <el-button type="primary" @click="calculateHandle">插入值</el-button>
           <el-button type="primary" plain @click="cancelHandle">取消</el-button>
 
         </section>
@@ -210,6 +227,7 @@ import * as preDictEdbInterface from '@/api/modules/predictEdbApi.js';
 import { resetDialogCellStyle } from "../common/customTable";
 import selectTarget from '@/views/chartRelevance_manage/components/selectTarget.vue';
 import edbDetailSection from './edbDetailSection.vue';
+import dateMoveWaySec from './dateMoveWaySection.vue'
 import { formRules } from '@/views/dataEntry_manage/databaseComponents/util';
 export default {
   props: {
@@ -220,25 +238,12 @@ export default {
       type: Object
     }
   },
-  components: { selectTarget,edbDetailSection },
-  computed: {
-    edbArrFromTable() {
-      let arr = this.$parent.config.data.flat().filter(_ =>_.DataType === 2);
-      let filterArr =  []
-      
-      arr.forEach(item => {
-        if(filterArr.findIndex(_ => _.EdbInfoId===item.EdbInfoId)===-1) {
-          filterArr.push(item)
-        }
-      })
-      
-       return filterArr
-    }
-  },
+  components: { selectTarget,edbDetailSection,dateMoveWaySec },
   watch: {
     isShow(nval) {
       if(!nval) return
       console.log(this.info)
+      this.getTableEdbList()
       const { source,formStr } = this.info;
 
       this.formData.source = source;
@@ -251,7 +256,10 @@ export default {
           EdbInfoId,
           MoveFrequency,
           MoveType, 
-          Calendar 
+          Calendar,
+          DataTime,
+          MoveForward,
+          DateChange
         } = JSON.parse(formStr);
 
         this.formData = {
@@ -265,7 +273,16 @@ export default {
           valueType: Formula,
           alphaValue: Formula,
         }
+
+        this.dateSelectForm = {
+          Type: DataTime ? 2 : 1,
+          MoveForward: MoveForward || 0
+        }
         this.selectTableEdbHandle({EdbInfoId})
+
+        this.$nextTick(() => {
+          DateChange&&this.$refs.dateMoveWayRef.initData(DateChange)
+        })
       }
     }
   },
@@ -286,6 +303,8 @@ export default {
       formRules,
       frequencyArr: ['日度', '周度','旬度', '月度', '季度', '年度'],
 
+      edbArrFromTable: [],
+
       showResult: false,
       calculateShowData: [], //计算全部数据
       chooseItem: {
@@ -311,12 +330,31 @@ export default {
 				{label: '公历',key: 1},
 				{label: '农历',key: 2},
 			],
+
+      dateSelectForm: {
+        Type:1,
+        MoveForward: 0,
+        relationDate: '',//关联的表格日期
+      }
     }
   },
   mounted(){
 
   },
   methods:{
+    /* 获取表格中关联的表格列表 单元格2 5 7*/
+    async getTableEdbList() {
+        let arr = this.$parent.config.data.flat().filter(_ =>[2,5,7].includes(_.DataType)).map(_ => _.EdbInfoId);
+        let filterArr =  Array.from(new Set(arr));
+
+        if(!filterArr.length) return
+
+        let res = await sheetInterface.getEdbBaseInfo({EdbInfoIds: filterArr.join(',')})
+        if(res.Ret !==200) return
+
+        this.edbArrFromTable = res.Data.List;
+    },
+
     /* 计算结果 */
     async calculateHandle() {
       await this.$refs.form.validate();
@@ -336,7 +374,10 @@ export default {
         'alpha': 'alphaValue'
       }
 
-      let DataTime = this.$parent.selectCell.DataType === 1 ? this.$parent.selectCell.ShowValue : ''
+      let DataTime = '';
+      if(this.dateSelectForm.Type===2) { //选框为表格日期再去取Date
+        DataTime = this.$parent.selectCell.DataType === 1 ? this.$parent.selectCell.ShowValue : ''
+      }
 
       let params = {
         DataTime,
@@ -346,44 +387,49 @@ export default {
         EdbInfoId: this.selectEdbInfo.EdbInfoId,
         MoveFrequency: moveUnit,
         MoveType: moveType, 
-        Calendar: calendarType
+        Calendar: calendarType,
+        MoveForward: this.dateSelectForm.MoveForward,
+        DateChange: this.$refs.dateMoveWayRef.dateChangeArr,
       }
 
       const res = await sheetInterface.getMixedCalculateData(params)
       if(res.Ret!==200) return 
 
       this.showResult = true;
-      this.calculateShowData = res.Data.List || [];
-
-      // if(!this.calculateShowData.length && DataTime) return this.$message.warning('所选指标所选日期无值')
+      // this.calculateShowData = res.Data.List || [];
 
-      let InsertValue = this.calculateShowData.length 
-        ? (this.calculateShowData.find(_ => _.DataTime===DataTime) ? this.calculateShowData.find(_ => _.DataTime===DataTime).Value.toString() : this.calculateShowData[0].Value.toString()) 
-        : ''
+      // let InsertValue = this.calculateShowData.length 
+      //   ? (this.calculateShowData.find(_ => _.DataTime===res.Data.Date) ? this.calculateShowData.find(_ => _.DataTime===res.Data.Date).Value.toString() : '') 
+      //   : ''
       this.chooseItem = {
-          Date:DataTime,
-          EdbInfoId: this.selectEdbInfo.EdbInfoId,
-          InsertValue,
-          Str: JSON.stringify(params)
-        }
+        Date:DataTime,
+        EdbInfoId: this.selectEdbInfo.EdbInfoId,
+        InsertValue: res.Data.ShowValue||"",
+        Str: JSON.stringify(params)
+      }
+
+      // if(!this.calculateShowData.length) return this.$message.warning('该日期无数据')
+      
+      this.$emit('insert',this.chooseItem)
+      this.cancelHandle();
       
     },
 
     /* 已计算过改参数重新计算 */
-    changeParams() {
-      this.showResult && this.calculateHandle()
-    },
+    // changeParams() {
+    //   this.showResult && this.calculateHandle()
+    // },
 
-    /* 插入值 */
-    insertData() {
+    // /* 插入值 */
+    // insertData() {
 
-      // if(this.$parent.selectCell.DataType !== 1) return this.$message.warning('请在表格中选择日期')
+    //   // if(this.$parent.selectCell.DataType !== 1) return this.$message.warning('请在表格中选择日期')
         
-      if(!this.calculateShowData.length) return this.$message.warning('该日期无数据')
+    //   if(!this.calculateShowData.length) return this.$message.warning('该日期无数据')
       
-      this.$emit('insert',this.chooseItem)
-      this.cancelHandle();
-    },
+    //   this.$emit('insert',this.chooseItem)
+    //   this.cancelHandle();
+    // },
 
     /* 选择指标 */
     async selectTargetHandle(e) {
@@ -446,6 +492,8 @@ export default {
 				calendarType: '公历',
 				valueType: '期末值'
       }
+      this.dateSelectForm = {Type:1,MoveForward: 0}
+      this.$refs.dateMoveWayRef.initData();
     },
 
     cancelHandle() {
@@ -516,6 +564,16 @@ export default {
         }
       }
     }
+
+    .date-select-cont {
+      li {
+        margin: 20px 0;
+      }
+      .flex {
+        display: flex;
+        align-items: center;
+      }
+    }
   }
 }  
 </style>

src/views/datasheet_manage/components/dateMoveWaySection.vue

@@ -21,19 +21,19 @@
               v-model="dateItem.Day"
               type="number"
               style="margin-right:10px;width:80px"
-              @change="e => {dateItem.Day=Number(e)}"
+              @change="e => {dateItem.Day=Number(e);changeParams()}"
             />天
             <el-input
               v-model="dateItem.Month"
               type="number"
               style="margin-right:10px;width:80px"
-              @change="e => {dateItem.Month=Number(e)}"
+              @change="e => {dateItem.Month=Number(e);changeParams()}"
             />月
             <el-input
               v-model="dateItem.Year"
               type="number"
               style="margin-right:10px;width:80px"
-              @change="e => {dateItem.Year=Number(e)}"
+              @change="e => {dateItem.Year=Number(e);changeParams()}"
             />年
           </div>
           <i class="el-icon-delete" @click="removeDateItem(index)"></i>
@@ -45,7 +45,7 @@
               style="max-width: 120px;"
               v-model="dateItem.Frequency"
               placeholder="请选择频度"
-              @change="dateItem.FrequencyDay=frequencyDaysOptions[0].name"
+              @change="dateItem.FrequencyDay=frequencyDaysOptions[0].name;changeParams()"
           >
             <el-option
                 v-for="item in frequencyOptions"
@@ -59,6 +59,7 @@
               style="max-width: 120px;margin:0 10px"
               v-model="dateItem.FrequencyDay"
               placeholder="请选择"
+              @change="changeParams"
           >
             <el-option
                 v-for="item in frequencyDaysOptions"
@@ -128,6 +129,12 @@ export default {
       }
 
       this.dateChangeArr.push(item)
+      this.changeParams()
+    },
+
+    /* 参数更新时刷数据 */
+    changeParams() {
+      this.$emit('updateData')
     },
 
     initData(data=null) {
@@ -141,6 +148,7 @@ export default {
 
     removeDateItem(index) {
       this.dateChangeArr.splice(index,1)
+      this.changeParams()
     }
   },
 }

src/views/datasheet_manage/components/selectTargetValueDia.vue

@@ -17,7 +17,7 @@
           <li 
             v-for="(item,index) in result.List" 
             :key="index" 
-            :class="[{'choose': item.DataTime===chooseItem.date || (!chooseItem.date&&index===0)},'data-li']"
+            :class="[{'choose': item.DataTime===result.Date},'data-li']"
           >
             <span>{{item.DataTime}}</span>
             <span style="min-width:150px">{{item.Value}}</span>
@@ -28,24 +28,24 @@
 
       <!-- 依赖日期选择方式 -->
       <ul class="date-select-cont">
-        <li>
-          <div>
-            <el-radio v-model="dateSelectForm.Type" :label="1">指标最新日期</el-radio>
-              <div>
-                <label class="el-form-item__label">期数前移</label>
-                <el-input
-                  v-model="dateSelectForm.CalculateNum"
-                  type="number"
-                  :min="0"
-                  style="margin-right:10px;width:80px"
-                  @change="e => {dateSelectForm.CalculateNum=Number(e)}"
-                />期
-              </div>
+        <li class="flex">
+          <div class="flex">
+            <el-radio v-model="dateSelectForm.Type" :label="1" @input="chooseEdb(edbInfo)">指标最新日期</el-radio>
+            <div>
+              <label class="el-form-item__label">期数前移</label>
+              <el-input
+                v-model="dateSelectForm.MoveForward"
+                type="number"
+                :min="0"
+                style="margin-right:10px;width:80px"
+                @change="e => {dateSelectForm.MoveForward=Number(e);chooseEdb(edbInfo)}"
+              />期
+            </div>
           </div>
-          <el-radio v-model="dateSelectForm.Type" :label="2">表格日期</el-radio>
+          <el-radio v-model="dateSelectForm.Type" :label="2" style="margin-left:50px"  @input="chooseEdb(edbInfo)">表格日期</el-radio>
         </li>
         <li>
-          <dateMoveWaySec ref="dateMoveWayRef"/>
+          <dateMoveWaySec ref="dateMoveWayRef" @updateData="chooseEdb(edbInfo)"/>
         </li>
       </ul>
 
@@ -62,6 +62,7 @@
 </template>
 <script>
 import * as sheetInterface from "@/api/modules/sheetApi.js";
+import { dataBaseInterface } from '@/api/api.js';
 import selectTarget from '@/views/chartRelevance_manage/components/selectTarget.vue';
 import { resetDialogCellStyle } from "../common/customTable";
 import dateMoveWaySec from './dateMoveWaySection.vue'
@@ -69,9 +70,30 @@ export default {
   props: {
     isShow: {
       type: Boolean,
+    },
+    info: {
+      type: Object
     }
   },
   components: { selectTarget,dateMoveWaySec },
+  watch: {
+    isShow(nval) {
+      if(!nval) return
+
+      if(this.info.DataType===5) {
+        const valueObj = JSON.parse(this.info.Value);
+        this.dateSelectForm = {
+          Type: this.info.DataTime ? 2 : 1,
+          MoveForward: valueObj.MoveForward || 0
+        }
+
+        this.getEdbInfo(this.info.EdbInfoId);
+        this.$nextTick(() => {
+          valueObj.DateChange&&this.$refs.dateMoveWayRef.initData(valueObj.DateChange)
+        })
+      }
+    }
+  },
   data() {
     return {
       result: {},
@@ -83,7 +105,8 @@ export default {
 
       dateSelectForm: {
         Type:1,
-        CalculateNum: 0
+        MoveForward: 0,
+        relationDate: '',//关联的表格日期
       }
     }
   },
@@ -97,36 +120,61 @@ export default {
 
       this.edbInfo = edb;
 
-      let Date = this.$parent.selectCell.DataType === 1 ? this.$parent.selectCell.ShowValue : ''
+      let Date='';
+      if(this.dateSelectForm.Type===2) { //选框为表格日期再去取Date
+        Date = this.$parent.selectCell.DataType === 1 ? this.$parent.selectCell.ShowValue : '';
+      }
 
       const res = await sheetInterface.getDateLatelyData({ 
         EdbInfoId: edb.EdbInfoId,
+        MoveForward: this.dateSelectForm.MoveForward,
+        DateChange: this.$refs.dateMoveWayRef.dateChangeArr,
         Date
       })
       if(res.Ret !== 200) return
 
       this.result = res.Data;
-      // if(!this.result.Date && Date) return this.$message.warning('所选指标所选日期无值')
 
       let value = (this.result.List&&this.result.List.length)
-        ? (this.result.List.find(_ => _.DataTime===Date) ? this.result.List.find(_ => _.DataTime===Date).Value.toString() : this.result.List[0].Value.toString()) 
+        ? this.result.List.find(_ => _.DataTime===this.result.Date) ? this.result.List.find(_ => _.DataTime===this.result.Date).Value.toString() : ''
         : ''
       this.chooseItem = {
-        date: Date,
+        relationDate: Date,
         edbId: edb.EdbInfoId,
-        value
+        value,
+        str: JSON.stringify({
+          MoveForward: this.dateSelectForm.MoveForward,
+          DateChange: this.$refs.dateMoveWayRef.dateChangeArr
+        })
       }
 
       console.log( this.chooseItem)
 
     },
 
+    // 切换日期依赖类型，在选择表格中日期的话默认切换到表格日期 在弹窗中手动切换类型不做处理
+    changeDateType(cell) {
+      //根据表格中点选的是否是日期来勾选类型
+      this.dateSelectForm.Type=cell.DataType === 1?2:1;
+      this.dateSelectForm.relationDate=cell.DataType === 1?'':cell.ShowValue;
+      this.chooseEdb(this.edbInfo);
+    },
+
+    /* 获取指标信息回显 */
+    async getEdbInfo(EdbInfoId) {
+      const { Data } = await dataBaseInterface.targetDetail({EdbInfoId})
+
+      const { EdbName,LatestDate,Frequency } = Data;
+      this.edbInfo = { EdbName,LatestDate,Frequency,EdbInfoId };
+      this.$refs.selectRef.search_txt = EdbName;
+    },
+
     insertData() {
       // if(this.$parent.selectCell.DataType !== 1){
       //   this.$message.warning('请在表格中选择日期')
       //   return
       // }
-      if(!this.chooseItem.value) return this.$message.warning('该日期无数据')
+      // if(!this.chooseItem.value) return this.$message.warning('该日期无数据')
 
       this.$emit('insert',this.chooseItem)
       this.cancelHandle();
@@ -137,6 +185,8 @@ export default {
       this.result = {};
       this.edbInfo=null;
       this.chooseItem = { edbId: 0,value: '',date: '' }
+      this.dateSelectForm = {Type:1,MoveForward: 0}
+      this.$refs.dateMoveWayRef.initData();
     },
 
     cancelHandle() {
@@ -193,13 +243,17 @@ export default {
       }
     }
     .dia-bot {
-      margin-top: 20px; 
+      margin-top: 30px; 
       display: flex;
       justify-content: center;
     }
     .date-select-cont {
       li {
-        margin: 10px 0;
+        margin: 20px 0;
+      }
+      .flex {
+        display: flex;
+        align-items: center;
       }
     }
   }

src/views/datasheet_manage/components/toolBarSection.vue

@@ -0,0 +1,180 @@
+<template>
+  <!-- 混合表格顶部工具栏 -->
+  <div class="toolbar-wrapper">
+    <div 
+      class="tool-btn-item" v-for="tool in toolIcons" 
+      :key="tool.key" 
+      @click="dealToolHandles(tool)"
+    >
+      <button>
+        <!-- icon -->
+        <template v-if="tool.type==='icon'">
+          <span class="icon-wrap" v-html="tool.icon"></span>
+        </template>
+
+        <template v-if="tool.type==='select'">
+          <el-select v-model="option.nt" style="width: 90px" size="small" v-if="tool.key==='cell-type-edit'">
+            <el-option
+              v-for="item in numberTypeOptions"
+              :key="item.key"
+              :value="item.key"
+              :label="item.label"
+            >
+            </el-option>
+          </el-select>
+        </template>
+      </button>
+    </div>
+  </div>
+</template>
+<script>
+import { transDecimalPlace,isNumberVal,getDecimalPlaces } from '../common/customTable';
+export default {
+  props: {
+    cell: {
+      type: Object,
+    },
+  },
+  watch: {
+    cell(nval) {
+      if(nval.ShowStyle) {
+        this.option = {
+          ...JSON.parse(nval.ShowStyle)
+        }
+      }else {
+        this.option = {
+          nt: "number",//numberType
+          pn: 0,//ponitNum
+        }
+      }
+    }
+  },
+  data() {
+    return {
+      option: {
+        nt: "number",//numberType
+        pn: 0,//ponitNum
+      },
+
+      toolIcons: [
+        {
+          icon: `<svg viewBox="0 0 16 16" version="1.1" xmlns="http://www.w3.org/2000/svg" xmlns:xlink="http://www.w3.org/1999/xlink">
+              <g id="increase-decimal" stroke="none" stroke-width="1" fill="none" fill-rule="evenodd">
+                  <g id="Increase-Decimal" transform="translate(1.000000, 1.000000)">
+                      <polygon id="Shape" fill="#333" fill-rule="nonzero" transform="translate(3.500000, 2.500000) rotate(-270.000000) translate(-3.500000, -2.500000) " points="3.5 6 6 3.5 4 3.5 4 -1 3 -1 3 3.5 1 3.5"></polygon>
+                      <path d="M12,0 C12.6360153,0 13.1340996,0.274932615 13.4942529,0.84097035 C13.8314176,1.37466307 14,2.09433962 14,3 C14,3.90566038 13.8314176,4.62533693 13.4942529,5.15902965 C13.1340996,5.71698113 12.6360153,6 12,6 C11.3563218,6 10.8582375,5.71698113 10.5057471,5.15902965 C10.1685824,4.62533693 10,3.90566038 10,3 C10,2.09433962 10.1685824,1.37466307 10.5057471,0.84097035 C10.8582375,0.274932615 11.3563218,0 12,0 Z M12,0.800539084 C11.5632184,0.800539084 11.256705,1.05121294 11.0804598,1.56873315 C10.9578544,1.91644205 10.8965517,2.393531 10.8965517,3 C10.8965517,3.59838275 10.9578544,4.0754717 11.0804598,4.43126685 C11.256705,4.94070081 11.5632184,5.19946092 12,5.19946092 C12.4291188,5.19946092 12.7356322,4.94070081 12.9195402,4.43126685 C13.0421456,4.0754717 13.1034483,3.59838275 13.1034483,3 C13.1034483,2.393531 13.0421456,1.91644205 12.9195402,1.56873315 C12.7356322,1.05121294 12.4291188,0.800539084 12,0.800539084 Z" id="0" fill="#333"></path>
+                      <path d="M12,8 C12.6360153,8 13.1340996,8.27493261 13.4942529,8.84097035 C13.8314176,9.37466307 14,10.0943396 14,11 C14,11.9056604 13.8314176,12.6253369 13.4942529,13.1590296 C13.1340996,13.7169811 12.6360153,14 12,14 C11.3563218,14 10.8582375,13.7169811 10.5057471,13.1590296 C10.1685824,12.6253369 10,11.9056604 10,11 C10,10.0943396 10.1685824,9.37466307 10.5057471,8.84097035 C10.8582375,8.27493261 11.3563218,8 12,8 Z M12,8.80053908 C11.5632184,8.80053908 11.256705,9.05121294 11.0804598,9.56873315 C10.9578544,9.91644205 10.8965517,10.393531 10.8965517,11 C10.8965517,11.5983827 10.9578544,12.0754717 11.0804598,12.4312668 C11.256705,12.9407008 11.5632184,13.1994609 12,13.1994609 C12.4291188,13.1994609 12.7356322,12.9407008 12.9195402,12.4312668 C13.0421456,12.0754717 13.1034483,11.5983827 13.1034483,11 C13.1034483,10.393531 13.0421456,9.91644205 12.9195402,9.56873315 C12.7356322,9.05121294 12.4291188,8.80053908 12,8.80053908 Z" id="0-copy" fill="#333"></path>
+                      <path d="M6,8 C6.63601533,8 7.13409962,8.27493261 7.49425287,8.84097035 C7.83141762,9.37466307 8,10.0943396 8,11 C8,11.9056604 7.83141762,12.6253369 7.49425287,13.1590296 C7.13409962,13.7169811 6.63601533,14 6,14 C5.35632184,14 4.85823755,13.7169811 4.50574713,13.1590296 C4.16858238,12.6253369 4,11.9056604 4,11 C4,10.0943396 4.16858238,9.37466307 4.50574713,8.84097035 C4.85823755,8.27493261 5.35632184,8 6,8 Z M6,8.80053908 C5.56321839,8.80053908 5.25670498,9.05121294 5.08045977,9.56873315 C4.95785441,9.91644205 4.89655172,10.393531 4.89655172,11 C4.89655172,11.5983827 4.95785441,12.0754717 5.08045977,12.4312668 C5.25670498,12.9407008 5.56321839,13.1994609 6,13.1994609 C6.42911877,13.1994609 6.73563218,12.9407008 6.91954023,12.4312668 C7.04214559,12.0754717 7.10344828,11.5983827 7.10344828,11 C7.10344828,10.393531 7.04214559,9.91644205 6.91954023,9.56873315 C6.73563218,9.05121294 6.42911877,8.80053908 6,8.80053908 Z" id="0-copy-2" fill="#333"></path>
+                      <path d="M7.99363057,4 C8.27388535,4 8.50318471,4.08917197 8.70700637,4.29299363 C8.89808917,4.48407643 9,4.72611465 9,5.00636943 C9,5.2866242 8.89808917,5.51592357 8.70700637,5.71974522 C8.50318471,5.89808917 8.27388535,6 7.99363057,6 C7.7133758,6 7.47133758,5.89808917 7.29299363,5.71974522 C7.08917197,5.51592357 7,5.2866242 7,5.00636943 C7,4.72611465 7.08917197,4.48407643 7.29299363,4.29299363 C7.47133758,4.08917197 7.7133758,4 7.99363057,4 Z" id="." fill="#333"></path>
+                      <path d="M0.993630573,12 C1.27388535,12 1.50318471,12.089172 1.70700637,12.2929936 C1.89808917,12.4840764 2,12.7261146 2,13.0063694 C2,13.2866242 1.89808917,13.5159236 1.70700637,13.7197452 C1.50318471,13.8980892 1.27388535,14 0.993630573,14 C0.713375796,14 0.47133758,13.8980892 0.292993631,13.7197452 C0.0891719745,13.5159236 0,13.2866242 0,13.0063694 C0,12.7261146 0.0891719745,12.4840764 0.292993631,12.2929936 C0.47133758,12.089172 0.713375796,12 0.993630573,12 Z" id=".-copy" fill="#333"></path>
+                  </g>
+              </g>
+          </svg>`,
+          key: "add-point",
+          type: 'icon',
+          title: '增加小数位数'
+        },
+        { 
+          icon: `<svg viewBox="0 0 16 16" version="1.1" xmlns="http://www.w3.org/2000/svg" xmlns:xlink="http://www.w3.org/1999/xlink">
+              <g id="decrease-decimal" stroke="none" stroke-width="1" fill="none" fill-rule="evenodd">
+                  <g transform="translate(1.000000, 1.000000)">
+                      <polygon id="Shape" fill="#333" fill-rule="nonzero" transform="translate(3.500000, 10.500000) rotate(-90.000000) translate(-3.500000, -10.500000) " points="3.5 14 6 11.5 4 11.5 4 7 3 7 3 11.5 1 11.5"></polygon>
+                      <path d="M12,0 C12.6360153,0 13.1340996,0.274932615 13.4942529,0.84097035 C13.8314176,1.37466307 14,2.09433962 14,3 C14,3.90566038 13.8314176,4.62533693 13.4942529,5.15902965 C13.1340996,5.71698113 12.6360153,6 12,6 C11.3563218,6 10.8582375,5.71698113 10.5057471,5.15902965 C10.1685824,4.62533693 10,3.90566038 10,3 C10,2.09433962 10.1685824,1.37466307 10.5057471,0.84097035 C10.8582375,0.274932615 11.3563218,0 12,0 Z M12,0.800539084 C11.5632184,0.800539084 11.256705,1.05121294 11.0804598,1.56873315 C10.9578544,1.91644205 10.8965517,2.393531 10.8965517,3 C10.8965517,3.59838275 10.9578544,4.0754717 11.0804598,4.43126685 C11.256705,4.94070081 11.5632184,5.19946092 12,5.19946092 C12.4291188,5.19946092 12.7356322,4.94070081 12.9195402,4.43126685 C13.0421456,4.0754717 13.1034483,3.59838275 13.1034483,3 C13.1034483,2.393531 13.0421456,1.91644205 12.9195402,1.56873315 C12.7356322,1.05121294 12.4291188,0.800539084 12,0.800539084 Z" id="0" fill="#333"></path>
+                      <path d="M12,8 C12.6360153,8 13.1340996,8.27493261 13.4942529,8.84097035 C13.8314176,9.37466307 14,10.0943396 14,11 C14,11.9056604 13.8314176,12.6253369 13.4942529,13.1590296 C13.1340996,13.7169811 12.6360153,14 12,14 C11.3563218,14 10.8582375,13.7169811 10.5057471,13.1590296 C10.1685824,12.6253369 10,11.9056604 10,11 C10,10.0943396 10.1685824,9.37466307 10.5057471,8.84097035 C10.8582375,8.27493261 11.3563218,8 12,8 Z M12,8.80053908 C11.5632184,8.80053908 11.256705,9.05121294 11.0804598,9.56873315 C10.9578544,9.91644205 10.8965517,10.393531 10.8965517,11 C10.8965517,11.5983827 10.9578544,12.0754717 11.0804598,12.4312668 C11.256705,12.9407008 11.5632184,13.1994609 12,13.1994609 C12.4291188,13.1994609 12.7356322,12.9407008 12.9195402,12.4312668 C13.0421456,12.0754717 13.1034483,11.5983827 13.1034483,11 C13.1034483,10.393531 13.0421456,9.91644205 12.9195402,9.56873315 C12.7356322,9.05121294 12.4291188,8.80053908 12,8.80053908 Z" id="0-copy" fill="#333"></path>
+                      <path d="M6,0 C6.63601533,0 7.13409962,0.274932615 7.49425287,0.84097035 C7.83141762,1.37466307 8,2.09433962 8,3 C8,3.90566038 7.83141762,4.62533693 7.49425287,5.15902965 C7.13409962,5.71698113 6.63601533,6 6,6 C5.35632184,6 4.85823755,5.71698113 4.50574713,5.15902965 C4.16858238,4.62533693 4,3.90566038 4,3 C4,2.09433962 4.16858238,1.37466307 4.50574713,0.84097035 C4.85823755,0.274932615 5.35632184,0 6,0 Z M6,0.800539084 C5.56321839,0.800539084 5.25670498,1.05121294 5.08045977,1.56873315 C4.95785441,1.91644205 4.89655172,2.393531 4.89655172,3 C4.89655172,3.59838275 4.95785441,4.0754717 5.08045977,4.43126685 C5.25670498,4.94070081 5.56321839,5.19946092 6,5.19946092 C6.42911877,5.19946092 6.73563218,4.94070081 6.91954023,4.43126685 C7.04214559,4.0754717 7.10344828,3.59838275 7.10344828,3 C7.10344828,2.393531 7.04214559,1.91644205 6.91954023,1.56873315 C6.73563218,1.05121294 6.42911877,0.800539084 6,0.800539084 Z" id="0-copy-2" fill="#333"></path>
+                      <path d="M7.99363057,12 C8.27388535,12 8.50318471,12.089172 8.70700637,12.2929936 C8.89808917,12.4840764 9,12.7261146 9,13.0063694 C9,13.2866242 8.89808917,13.5159236 8.70700637,13.7197452 C8.50318471,13.8980892 8.27388535,14 7.99363057,14 C7.7133758,14 7.47133758,13.8980892 7.29299363,13.7197452 C7.08917197,13.5159236 7,13.2866242 7,13.0063694 C7,12.7261146 7.08917197,12.4840764 7.29299363,12.2929936 C7.47133758,12.089172 7.7133758,12 7.99363057,12 Z" id="." fill="#333"></path>
+                      <path d="M0.993630573,4 C1.27388535,4 1.50318471,4.08917197 1.70700637,4.29299363 C1.89808917,4.48407643 2,4.72611465 2,5.00636943 C2,5.2866242 1.89808917,5.51592357 1.70700637,5.71974522 C1.50318471,5.89808917 1.27388535,6 0.993630573,6 C0.713375796,6 0.47133758,5.89808917 0.292993631,5.71974522 C0.0891719745,5.51592357 0,5.2866242 0,5.00636943 C0,4.72611465 0.0891719745,4.48407643 0.292993631,4.29299363 C0.47133758,4.08917197 0.713375796,4 0.993630573,4 Z" id=".-copy" fill="#333"></path>
+                  </g>
+              </g>
+          </svg>`, 
+          key: "del-point", 
+          type: 'icon',
+          title: '减少小数位数' 
+        },
+        { 
+          icon: '',
+          key: 'cell-type-edit',
+          type:'select',
+          title:'' 
+        }
+      ],
+
+      numberTypeOptions: [
+        { label: "数字", key: "number" },
+        { label: "百分位", key: "percent" },
+      ],
+    };
+  },
+  methods: {
+    dealToolHandles({key}) {
+      //单元格不是数字就不用转了
+      if(!isNumberVal(this.cell.ShowValue)) return
+
+      const handlesMap = {
+        'add-point': this.changeCellPoint,
+        'del-point': this.changeCellPoint,
+        'cell-type-edit': this.changeCellType,
+      }
+
+      handlesMap[key]&&handlesMap[key](key)
+    },
+
+    /* 处理小数点位数 */
+    changeCellPoint(key) {
+      let value = _.cloneDeep(this.cell.ShowValue)
+      key==='add-point' ? this.option.pn++ : this.option.pn--;
+      
+      //判断小数点后尾数 整数最小pn为0 小数最小为负位数
+      if(this.option.pn <= parseInt(`-${getDecimalPlaces(value)}`)) {
+        this.option.pn = parseInt(`-${getDecimalPlaces(value)}`)
+      }
+
+      let nval = transDecimalPlace(value,this.option.pn)
+      
+      console.log({
+        ShowStyle: JSON.stringify(this.option),
+        ShowFormulaValue: nval
+      })
+      this.$emit('updateCell',{
+        ShowStyle: JSON.stringify(this.option),
+        ShowFormulaValue: nval
+      })
+    },
+
+    /* 处理显示格式 */
+    changeCellType() {
+      
+    }
+  },
+};
+</script>
+<style scoped lang="scss">
+.toolbar-wrapper {
+  width: fit-content;
+  display: flex;
+  overflow: hidden;
+  background: #fff;
+  border: 1px solid #ccc;
+  padding: 4px 12px;
+  margin: 10px 0;
+  .tool-btn-item {
+    margin: 5px;
+    display: flex;
+    align-items: center;
+    button {
+      border: none;
+      padding: 4px;
+      background: #fff;
+      &:hover {
+        background: #ccc;
+      }
+
+      .icon-wrap {
+        width: 20px;
+        height: 20px;
+        display: inline-block;
+      }
+    }
+  }
+}
+</style>