fix: 1.8.9表格条件格式

src/lang/modules/ETATables/En.js

@@ -1,6 +1,7 @@
 export default {
   /* 在线EXCEL */
   OnlineExcelPage: {
+    conditional_format:'Conditional format',
     add_excel_btn: "Add excel spreadsheet",
     add_timeline_table_btn: "Add a timeline table",
     add_mixed_table_btn: "Add mixed table",

src/lang/modules/ETATables/Zh.js

@@ -1,6 +1,7 @@
 export default {
   /* 在线EXCEL */
   OnlineExcelPage: {
+    conditional_format:'条件格式',
     add_excel_btn: "添加Excel表格",
     add_timeline_table_btn: "添加时间序列表格",
     add_mixed_table_btn: "添加混合表格",
@@ -138,6 +139,7 @@ export default {
   },
 
   ETableChildren: {
+    save_btn:'保存',
     date_calculation_btn: "日期计算",
     select_date_pld: "选择日期",
     add_more_dates: "添加更多日期",

src/views/datasheet_manage/components/MixedTable.vue

@@ -3,7 +3,7 @@
     <template v-if="config.data.length">
 
       <!-- 工具栏 -->
-      <toolBarSection v-if="!disabled" :cell="selectCell?selectCell:selectedCells" @cellMerge="toolCellMergeFun"
+      <toolBarSection  v-if="!disabled" :cell="selectCell?selectCell:selectedCells"  @openConDialog="openConDialog"  @cellMerge="toolCellMergeFun"
         :echoParameter="{hasMergedCell}"/>
       
       <!-- 公式显示区 -->
@@ -20,6 +20,7 @@
         width="auto"
         border="0"
         class="table"
+        id="myTable"
         :style="disabled ? 'width:100%' : ''"
         ref="tableRef"
         style="position: relative;"
@@ -63,6 +64,8 @@
               :data-cindex="columnHeader[cell_index]"
               :data-datarindex="index"
               :data-datacindex="cell_index"
+              :style="cell.ShowStyle?getShowCss(cell.ShowStyle):{}"
+              :initIndex="initIndex(index,cell_index,rowHeader[index],columnHeader[cell_index])"
               :data-key="cell.Uid"
               v-show="!cell.merData || cell.merData.type!=='merged'"
               :colspan="(cell.merData && cell.merData.type=='merge' && cell.merData.mer)?cell.merData.mer.colspan || 1:1"
@@ -74,7 +77,6 @@
               @copy="copyCellHandle($event,cell)"
               @paste="pasteCellHandle($event,cell)"
             >
-
             <!-- 插入单元格禁止编辑 -->
             <!-- [4,5,6,7,8].includes(cell.DataType)&&!cell.CanEdit -->
             <template 
@@ -123,7 +125,7 @@
                 :data-datacindex="cell_index"
                 :data-key="cell.Uid"
               >
-                {{cell.ShowFormatValue}}
+                {{isShowFormat(cell.ShowStyle)?cell.ShowFormatValue:cell.DataTime?cell.ShowValue:cell.Value}}
               </span>
 
               <span
@@ -241,6 +243,8 @@
       :info="insertCalculateDateInfo"
       @insert="insertCalculateDateValue"
     />
+
+    <condition-dia :chooseCell="selectCell?selectCell:selectedCells" ref="conditionDia" />
   </div>
 </template>
 <script>
@@ -273,6 +277,7 @@ import insertDateDia from './insertDateDia.vue';
 import calculateEdbDia from './calculateEdbDia.vue';
 import calculateDateDia from './calculateDateDia.vue';
 import toolBarSection from './toolBarSection.vue';
+import conditionDia from './conditionDia.vue'
 import { formulaTip } from '@/views/dataEntry_manage/databaseComponents/util';
 export default {
   props: {
@@ -287,7 +292,8 @@ export default {
       },
     }
   },
-  components: { 
+  components: {
+    conditionDia,
     selectTargetValueDia,
     insertDateDia,
     calculateEdbDia,
@@ -423,6 +429,29 @@ export default {
     if(this.$route.path === '/addMixedSheet' && !this.$route.query.id) this.initData();
   },
   methods: {
+    getCellIndices(table, startRow, endRow, startCol, endCol) {
+      const indices = [];
+      for (let i = startRow; i <= endRow; i++) {
+        for (let j = startCol; j <= endCol; j++) {
+          const cell = table.rows[i].cells[j];
+          indices.push({ row: i, col: j, index: cell });
+        }
+      }
+      return indices;
+    },
+    // 打开选择条件格式弹框
+    openConDialog({chooseItem,chooseCells}){
+      this.$refs.conditionDia.openDialog(chooseItem.label,chooseCells)
+      // 使用示例
+      const table = document.getElementById('myTable'); // 假设你有一个id为'myTable'的表格
+      const startRow = 3; // 从第几行开始
+      const endRow = 4; // 到第几行结束
+      const startCol = 3; // 从第几列开始
+      const endCol = 4; // 到第几列结束
+      
+      const cellIndices = this.getCellIndices(table, startRow, endRow, startCol, endCol);
+      console.log(cellIndices);
+    },
 
     /* 输入时实时搜索 满足日期格式不搜索 有=视为输入公式不搜索  eta1.5.6弃用了*/
     async searchTarget(query,cb) {
@@ -450,6 +479,37 @@ export default {
       let arr = DataType===2 ? [res.Data] : (res.Data.List||[])
       cb(arr);
     },
+    // 由于在showStyle做了背景色及字体颜色处理，解决判断冲突
+    isShowFormat(style,type='css'){
+      const styleCss=JSON.parse(style)
+      let tag=type==='css'?styleCss.pn>0:style.EdbInfoId
+      return tag
+    },
+    // 初始化单元格横纵坐标
+    initIndex(rindex,cindex,row,col){
+      this.config.data[rindex][cindex]['colIndex']=col
+      this.config.data[rindex][cindex]['rowIndex']=row
+      if(rindex==3&&cindex==3){
+        const styleCss=JSON.parse(this.config.data[3-1][3-1].ShowStyle)
+        this.config.data[3-1][3-1].ShowStyle=JSON.stringify({
+            ...styleCss,
+            glObj:{
+            'color':'green',
+            'background-color':'black'
+          }
+        })
+      }
+    },
+    // 设置背景色及字体颜色
+    getShowCss(style){
+      const styleCss=JSON.parse(style)
+      let color=styleCss.glObj?styleCss.glObj['color']:styleCss['color']
+      let bgcolor=styleCss.glObj?styleCss.glObj['background-color']:styleCss['background-color']
+      return {
+        'color':color,
+        'background-color':bgcolor
+      }
+    },
 
     /* 单击 */
     clickCell(e, cell) {

src/views/datasheet_manage/components/conditionDia.vue

@@ -0,0 +1,351 @@
+<template>
+  <div v-dialogDrag v-if="isOpenDialog">
+    <div class="condition-dialog el-dialog">
+      <div class="header el-dialog__header">
+        <span>{{
+          $t("OnlineExcelPage.conditional_format") + "-" + chooseType
+        }}</span>
+        <i class="el-icon-close" @click="cancelHandle" />
+      </div>
+
+      <div class="main">
+        <el-form
+          hide-required-asterisk
+          :model="ruleForm"
+          :rules="rules"
+          ref="ruleForm"
+          label-width="90px"
+          class="demo-ruleForm"
+        >
+          <div class="flex-align">
+            <el-form-item :label="chooseType" prop="pdzleft">
+              <el-input
+                @focus="momentRef = 'pdzleftRef'"
+                ref="pdzleftRef"
+                style="width: 100%"
+                v-model="ruleForm.pdzleft"
+              ></el-input>
+            </el-form-item>
+            <template v-if="chooseType == '介于'">
+              <span style="margin: 0 10px 22px">到</span>
+              <el-form-item
+                class="right-form-item"
+                label-width="0"
+                label=""
+                prop="pdzright"
+              >
+                <el-input
+                  @focus="momentRef = 'pdzrightRef'"
+                  ref="pdzrightRef"
+                  style="width: 100%"
+                  v-model="ruleForm.pdzright"
+                ></el-input>
+              </el-form-item>
+            </template>
+            <el-form-item label="设置为" prop="szw">
+              <el-select
+                style="width: 100%"
+                @change="changeColorSel"
+                v-model="ruleForm.szw"
+                placeholder="请设置样式"
+              >
+                <el-option
+                  v-for="(color, colorIndex) in colorSelect"
+                  :key="colorIndex"
+                  :label="color.label"
+                  :value="color.value"
+                ></el-option>
+              </el-select>
+            </el-form-item>
+          </div>
+          <div class="flex-align">
+            <el-form-item label="应用选区" prop="yyxq">
+              <el-input
+                @focus="momentRef = 'yyxqRef'"
+                ref="yyxqRef"
+                style="width: 100%"
+                v-model="ruleForm.yyxq"
+              ></el-input>
+            </el-form-item>
+            <el-form-item
+              v-if="ruleForm.szw === '自定义'"
+              label="填充色"
+              prop="bgColor"
+            >
+              <div class="flex-align">
+                <div class="flex-align">
+                  <el-color-picker
+                    v-model="ruleForm.bgColor"
+                    show-alpha
+                  ></el-color-picker>
+                  <div class="flex-align">
+                    <div
+                      style="
+                        width: 90px;
+                        text-align: right;
+                        padding-right: 12px;
+                      "
+                    >
+                      文本颜色
+                    </div>
+                    <el-color-picker
+                      v-model="ruleForm.fontColor"
+                      show-alpha
+                    ></el-color-picker>
+                  </div>
+                </div>
+              </div>
+            </el-form-item>
+          </div>
+        </el-form>
+      </div>
+      <section class="bot">
+        <el-button type="primary" plain @click="cancelHandle">{{
+          $t("ETable.Btn.cancel_btn")
+        }}</el-button>
+        <el-button type="primary" @click="saveHandle">{{
+          $t("ETableChildren.save_btn")
+        }}</el-button>
+      </section>
+    </div>
+  </div>
+</template>
+<script>
+export default {
+  props: {
+    chooseCell: {
+      type: Object,
+    },
+  },
+  watch: {
+    chooseCell: {
+      handler(nval) {
+        console.log(nval, this.momentRef);
+        if (nval && this.momentRef) {
+          if (this.momentRef == "yyxqRef") {
+            this.chooseArray = Array.isArray(nval) ? nval : [nval];
+            this.formatXq(this.chooseArray);
+          } else {
+            console.log(!Array.isArray(nval));
+            if (!Array.isArray(nval)) {
+              this.formatXq(
+                [nval],
+                this.momentRef === "pdzleftRef" ? "pdzleft" : "pdzright"
+              );
+            }
+          }
+        }
+      },
+      deep: true,
+    },
+  },
+  data() {
+    var validateValue = (rule, value, callback) => {
+      const regex1 = /^\$[A-Z]+\$[1-9][0-9]*$/;
+      if (value === "") {
+        callback(new Error("请输入数字或选择数值单元格"));
+      } else if (regex1.test(value) || Number.isFinite(+value)) {
+        callback();
+      } else {
+        callback(new Error("请输入数字或选择数值单元格"));
+      }
+    };
+    var validateYyxq = (rule, value, callback) => {
+      const regex1 = /^\$[A-Z]+\$[1-9][0-9]*$/;
+      const regex2 = /^\$[A-Z]+\$[1-9][0-9]*:\$[A-Z]+\$[1-9][0-9]*$/;
+      if (value === "") {
+        callback(new Error("请选择数值单元格"));
+      } else if (regex1.test(value) || regex2.test(value)) {
+        callback();
+      } else {
+        callback(new Error("单元格格式不正确"));
+      }
+    };
+    return {
+      chooseType: "",
+      isOpenDialog: false,
+      chooseArray: [],
+      colorSelect: [
+        {
+          label: "浅红色填充色深红色文本",
+          value: "rgb(254,67,101)-rba(252,157,154)", //前为文本颜色，后为填充色
+        },
+        {
+          label: "黄填充色深黄色文本",
+          value: "rgb(255,255,224)-rba(255,215,0)",
+        },
+        {
+          label: "绿填充色深绿色文本",
+          value: "rgb(0,100,0)-rba(0,255,0)",
+        },
+        {
+          label: "浅红色填充",
+          value: "''-rba(252,157,154)",
+        },
+        {
+          label: "红色文本",
+          value: "rgb(255, 0, 0)-''",
+        },
+        {
+          label: "自定义格式...",
+          value: "自定义",
+        },
+      ],
+      ruleForm: {
+        pdzleft: "",
+        pdzright: "",
+        szw: "rgb(254,67,101)-rba(252,157,154)",
+        fontColor: "rgb(254,67,101)",
+        bgColor: "rba(252,157,154)",
+        yyxq: "",
+      },
+      rules: {
+        pdzleft: [
+          {
+            required: true,
+            message: "请输入数字或选择数值单元格",
+            trigger: ["blur", "change"],
+          },
+          { validator: validateValue, trigger: "blur" },
+        ],
+        pdzright: [
+          {
+            required: true,
+            message: "请输入数字或选择数值单元格",
+            trigger: ["blur", "change"],
+          },
+          { validator: validateValue, trigger: "blur" },
+        ],
+        szw: [{ required: true, message: "请选择样式", trigger: "change" }],
+        yyxq: [
+          {
+            required: true,
+            message: "请输入或选择应用选区",
+            trigger: ["blur", "change"],
+          },
+          { validator: validateYyxq, trigger: "blur" },
+        ],
+      },
+    };
+  },
+  methods: {
+    // 切换颜色选择
+    changeColorSel(val) {
+      const colorArr = val.split("-");
+      this.ruleForm.fontColor = val != "自定义" ? colorArr[0] : "";
+      this.ruleForm.bgColor = val != "自定义" ? colorArr[1] : "";
+    },
+    // 保存
+    saveHandle() {
+      this.momentRef = "";
+      this.$refs["ruleForm"].validate((valid) => {
+        if (valid) {
+          console.log(this.ruleForm);
+        } else {
+          return false;
+        }
+      });
+    },
+    // 打开弹框
+    openDialog(type, array) {
+      this.chooseType = type;
+      this.isOpenDialog = true;
+      this.chooseArray = array;
+      this.formatXq(this.chooseArray);
+    },
+    formatXq(array, key = "yyxq") {
+      console.log(array);
+      if (array.length < 2) {
+        this.ruleForm[key] = "$" + array[0].colIndex + "$" + array[0].rowIndex;
+      } else {
+        let str = "";
+        array.forEach((el, index) => {
+          if (index === 0 || index == array.length - 1) {
+            str +=
+              "$" +
+              array[index].colIndex +
+              "$" +
+              array[index].rowIndex +
+              (index === 0 ? ":" : "");
+          }
+        });
+        this.ruleForm[key] = str;
+      }
+    },
+    cancelHandle() {
+      this.momentRef = "";
+      this.isOpenDialog = false;
+    },
+    handleClickOutside(event) {
+      let _this = this;
+      console.log(_this);
+      // 检查点击是否发生在el-input外
+      if (
+        this.$refs[_this.momentRef] &&
+        !this.$refs.pdzleftRef.$el.contains(event.target)
+      ) {
+        // 如果是，则将焦点设置到当前el-input
+        this.$refs[_this.momentRef].focus();
+      }
+    },
+  },
+  mounted() {
+    // 监听全局点击事件
+    document.addEventListener("click", this.handleClickOutside);
+  },
+  beforeDestroy() {
+    // 组件销毁前移除监听
+    document.removeEventListener("click", this.handleClickOutside);
+  },
+};
+</script>
+<style lang="scss" scoped>
+@import "~@/styles/theme-vars.scss";
+.condition-dialog {
+  background: #fff;
+  position: fixed;
+  top: 20%;
+  left: 50%;
+  width: 750px;
+  border-radius: 2px;
+  box-shadow: 0 1px 3px rgba(0, 0, 0, 0.3);
+  z-index: 9999;
+  .header {
+    font-size: 16px;
+    background: $theme-color;
+    color: #fff;
+    padding: 15px;
+    display: flex;
+    align-content: center;
+    justify-content: space-between;
+    .el-icon-close {
+      font-size: 20px;
+      cursor: pointer;
+    }
+  }
+
+  .main {
+    padding: 20px;
+    max-height: calc(100vh - 350px);
+    min-height: 300px;
+    overflow-y: auto;
+    .main-top {
+      margin-bottom: 20px;
+      .right-form-item {
+        .el-form-item__error {
+          padding-left: 20px;
+        }
+      }
+    }
+  }
+  .bot {
+    display: flex;
+    justify-content: center;
+    margin: 30px 0;
+  }
+  .flex-align {
+    display: flex;
+    align-items: center;
+  }
+}
+</style>