eta_front/src/views/datasheet_manage/components/conditionDia.vue

<template>
  <div v-dialogDrag v-if="isOpenDialog">
    <div class="condition-dialog el-dialog" style="width:522px">
      <div class="header el-dialog__header">
        <span>{{
          $t("MixSheet.conditional_format") + "-" + chooseTitleObj[chooseType]
        }}</span>
        <i class="el-icon-close" @click="cancelHandle" />
      </div>

      <div class="main" :style="{'padding-top':chooseType==6?'30px':'10px'}">
        <el-form v-if="chooseType != 6" hide-required-asterisk :model="ruleForm" :rules="rules" ref="ruleForm"
          class="demo-ruleForm" label-position="top">
          <el-form-item :label="chooseTitleObj[chooseType]">
            <div class="flex-align value-box">
              <el-form-item label-width="0" label="" :rules="chooseType == 5 ? rules.fsrqval : rules.LeftValue"
                prop="LeftValue">
                <el-select v-if="chooseType == 5" style="width:100%" v-model="ruleForm.LeftValue"
                  :placeholder="$t('MixSheet.please_choose')">
                  <el-option v-for="item in dateSel" :key="item.value" :label="item.label" :value="item.value">
                  </el-option>
                </el-select>
                <el-input :placeholder="$t('MixSheet.enter_number')" v-else style="width:100%"
                  @focus="momentRef = 'LeftValueRef'" ref="LeftValueRef" v-model="ruleForm.LeftValue"></el-input>
              </el-form-item>
              <template v-if="chooseType == 3">
                <span style="margin:0 9px;">{{ $t("MixSheet.and") }}</span>
                <el-form-item label-width="0" label="" prop="RightValue">
                  <el-input :placeholder="$t('MixSheet.enter_number')" @focus="momentRef = 'RightValueRef'"
                    ref="RightValueRef" style="width:100%" v-model="ruleForm.RightValue"></el-input>
                </el-form-item>
              </template>
            </div>
          </el-form-item>
          <el-form-item :label="$t('MixSheet.set_to')" prop="Remark">
            <el-select style="width:100%" @change="changeColorSel" v-model="ruleForm.Remark"
              :placeholder="$t('MixSheet.please_set')">
              <el-option v-for="color in colorSelect" :key="color.label" :label="color.label"
                :value="color.value"></el-option>
            </el-select>
          </el-form-item>
          <el-form-item :label="$t('MixSheet.apply_selection')" prop="Scope">
            <el-input :placeholder="$t('MixSheet.please_c_or_i')" @focus="momentRef = 'ScopeRef'" ref="ScopeRef"
              style="width:100%" v-model="ruleForm.Scope"></el-input>
          </el-form-item>
          <el-form-item label-position="left" v-if="ruleForm.Remark === '自定义'" label="" label-width="0"
            prop="BackgroundColor">
            <div class="flex-align">
              <div style="margin-right:10px;">
                {{ $t("MixSheet.background_color") }}
              </div>
              <el-color-picker v-model="ruleForm.BackgroundColor" show-alpha></el-color-picker>
              <div style="margin:0 10px 0 40px;">
                {{ $t("MixSheet.text_color") }}
              </div>
              <el-color-picker v-model="ruleForm.FontColor" show-alpha></el-color-picker>
            </div>
          </el-form-item>
        </el-form>
        <div class="dialog-table-box" v-else>
          <el-table :data="diaRuleList" :header-cell-style="{
            background: '#F6F7FA',
            'text-align': 'center',
          }" border style="width: 100%">
            <el-table-column align="center" :label="$t('MixSheet.rule')">
              <template slot-scope="scope">
                <template v-if="scope.row.RuleType != 5">
                  {{ chooseTitleObj[scope.row.RuleType] }}{{ scope.row.LeftValue }}<span
                    v-if="scope.row.RuleType == 3">{{
                      $t("MixSheet.and") }}{{ scope.row.RightValue }}</span>
                </template>
                <template v-else>
                  {{ dateSel.find(el=>el.value==scope.row.LeftValue).label }}
                </template>
              </template>
            </el-table-column>
            <el-table-column align="center" prop="ScopeShow" :label="$t('MixSheet.apply_selection')">
            </el-table-column>
            <el-table-column align="center" :label="$t('MixSheet.operation')" width="150">
              <template slot-scope="scope">
                <el-button @click="handleEdit(scope.row)" type="text" size="small">{{ $t("MixSheet.edit") }}</el-button>
                <el-button style="color: #f56c6c" @click="handleDelete(scope.row, scope.$index)" type="text"
                  size="small">{{ $t("MixSheet.delete") }}</el-button>
              </template>
            </el-table-column>
          </el-table>
        </div>
      </div>
      <section class="bot" v-if="chooseType != 6">
        <el-button type="primary" plain @click="cancelHandle">{{
          $t("MixSheet.cancel_btn")
        }}</el-button>
        <el-button type="primary" @click="saveHandle">{{
          $t("MixSheet.save_btn")
        }}</el-button>
      </section>
    </div>
  </div>
</template>
<script>
import { dataBaseInterface } from "@/api/api.js";

export default {
  props: {
    chooseCell: {
      type: Object,
    },
  },
  watch: {
    chooseCell: {
      handler(nval) {
        if (nval && this.momentRef) {
          // console.log(nval, this.momentRef);
          if (this.momentRef == "ScopeRef") {
            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 === "LeftValueRef" ? "LeftValue" : "RightValue"
              );
            }
          }
        }
      },
      deep: true,
    },
  },
  computed: {
    colorSelect() {
      return [
        {
          label: this.$t("MixSheet.lrf_drt"),
          value: "rgb(235, 49, 34)-rgb(255, 235, 235)", //前为文本颜色，后为填充色
        },
        {
          label: this.$t("MixSheet.yf_dyt"),
          value: "rgb(255, 175, 1)-rgb(255, 248, 216)",
        },
        {
          label: this.$t("MixSheet.gf_dgt"),
          value: "rgb(10, 147, 47)-rgb(231, 255, 231)",
        },
        {
          label: this.$t("MixSheet.lrf"),
          value: "-rgb(252,157,154)",
        },
        {
          label: this.$t("MixSheet.rt"),
          value: "rgb(255, 0, 0)-",
        },
        {
          label: this.$t("MixSheet.custom"),
          value: "自定义",
        },
      ];
    },
    dateSel() {
      return [
        {
          label: this.$t("MixSheet.today"),
          value: "today",
        },
        {
          label: this.$t("MixSheet.tomorrow"),
          value: "tomorrow",
        },
        {
          label: this.$t("MixSheet.last_7_days"),
          value: "last7days",
        },
        {
          label: this.$t("MixSheet.last_week"),
          value: "lastweek",
        },
        {
          label: this.$t("MixSheet.this_week"),
          value: "thisweek",
        },
        {
          label: this.$t("MixSheet.next_week"),
          value: "nextweek",
        },
        {
          label: this.$t("MixSheet.last_month"),
          value: "lastmonth",
        },
        {
          label: this.$t("MixSheet.this_month"),
          value: "thismonth",
        },
        {
          label: this.$t("MixSheet.next_month"),
          value: "nextmonth",
        },
      ];
    },
    chooseTitleObj() {
      return {
        1: this.$t("MixSheet.greater_than"),
        2: this.$t("MixSheet.less_than"),
        3: this.$t("MixSheet.between"),
        4: this.$t("MixSheet.equal_to"),
        5: this.$t("MixSheet.occurrence_date"),
        6: this.$t("MixSheet.manage_rules"),
      };
    },
    rules() {
      const validateValue = (rule, value, callback) => {
        const regex1 = /^\$[A-Z]+\$[1-9][0-9]*$/;
        if (value === "") {
          callback(new Error(this.$t("MixSheet.enter_number")));
        } else if (regex1.test(value) || Number.isFinite(+value)) {
          callback();
        } else {
          callback(new Error(this.$t("MixSheet.parameter_error")));
        }
      };
      const validateScope = (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(this.$t("MixSheet.please_c_or_i")));
        } else if (regex1.test(value) || regex2.test(value)) {
          callback();
        } else {
          callback(new Error(this.$t("MixSheet.apply_selection_error")));
        }
      };
      return {
        fsrqval: [
          {
            required: true,
            message: this.$t("MixSheet.please_choose"),
            trigger: "change",
          },
        ],
        LeftValue: [
          {
            required: true,
            message: this.$t("MixSheet.enter_number"),
            trigger: ["blur", "change"],
          },
          { validator: validateValue, trigger: "blur" },
        ],
        RightValue: [
          {
            required: true,
            message: this.$t("MixSheet.enter_number"),
            trigger: ["blur", "change"],
          },
          { validator: validateValue, trigger: "blur" },
        ],
        Remark: [
          {
            required: true,
            message: this.$t("MixSheet.please_choose"),
            trigger: "change",
          },
        ],
        Scope: [
          {
            required: true,
            message: this.$t("MixSheet.please_c_or_i"),
            trigger: ["blur", "change"],
          },
          { validator: validateScope, trigger: "blur" },
        ],
      };
    },
  },
  data() {
    return {
      ExcelInfoId: 0,
      diaRuleList: [],
      ExcelRuleMappingId: 0,
      chooseType: "",
      isOpenDialog: false,
      chooseArray: [],
      ruleForm: {
        LeftValue: "",
        RightValue: "",
        Remark: "rgb(235, 49, 34)-rgb(255, 235, 235)",
        FontColor: "rgb(235, 49, 34)",
        BackgroundColor: "rgb(255, 235, 235)",
        Scope: "",
      },
    };
  },
  methods: {
    // 编辑规则
    async handleEdit(row) {
      this.$nextTick(() => {
        this.ruleForm = JSON.parse(
          JSON.stringify({ ...row, Scope: row.ScopeShow })
        );
        this.chooseType = row.RuleType;
        this.ExcelRuleMappingId = row.ExcelInfoRuleMappingId;
      });
    },
    // 删除规则
    async handleDelete(row, index) {
      // console.log(index);
      const res = await dataBaseInterface.excelRuleDelete({
        ExcelRuleMappingId: row.ExcelInfoRuleMappingId,
      });
      // console.log(res);
      if (res.Ret !== 200) return;
      this.diaRuleList.splice(index, 1);
      this.$message({
        message: this.$t("MixSheet.delete_text"),
        type: "success",
      });
      this.$emit("deleteRule", row);
    },
    // 切换颜色选择
    changeColorSel(val) {
      const colorArr = val.split("-");
      this.ruleForm.FontColor = val != "自定义" ? colorArr[0] : "";
      this.ruleForm.BackgroundColor = val != "自定义" ? colorArr[1] : "";
    },
    // 保存
    saveHandle() {
      this.momentRef = "";
      this.$refs["ruleForm"].validate(async (valid) => {
        if(this.chooseType == 3 && (+this.ruleForm.LeftValue >= +this.ruleForm.RightValue)) 
          return this.$message.warning('介于规则不允许前值大于等于后值');
        if (valid) {
          const params = {
            ...this.ruleForm,
            ExcelRuleMappingId: +this.ExcelRuleMappingId,
            ExcelInfoId: +this.ExcelInfoId,
            RuleType: +this.chooseType,
            LeftValueType:
              this.chooseType == 5
                ? 1
                : Number.isFinite(+this.ruleForm.LeftValue)
                  ? 1
                  : 2,
            RightValueType: this.ruleForm.RightValue
              ? Number.isFinite(+this.ruleForm.RightValue)
                ? 1
                : 2
              : 0,
          };
          let res = "";
          if (this.ExcelRuleMappingId) {
            res = await dataBaseInterface.excelRuleEdit(params);
          } else {
            res = await dataBaseInterface.excelRuleAdd(params);
          }
          // console.log(res);
          if (res.Ret !== 200) return;
          this.$message({
            message: this.ExcelRuleMappingId
              ? this.$t("MixSheet.edit_text")
              : this.$t("MixSheet.add_text"),
            type: "success",
          });
          if (this.ExcelRuleMappingId) {
            this.$emit("editRule", { ...params, ScopeShow: params.Scope });
          } else {
            this.$emit("changeRule");
          }
          this.cancelHandle();
        } else {
          return false;
        }
      });
    },
    // 打开弹框
    openDialog(type, array, ruleList, id) {
      if (this.isOpenDialog) {
        this.cancelHandle();
      }
      this.ExcelRuleMappingId = 0;
      this.chooseType = type;
      this.isOpenDialog = true;
      this.chooseArray = array;
      this.diaRuleList = ruleList;
      this.ExcelInfoId = id;
      if (type != 6) {
        this.formatXq(this.chooseArray);
      }
    },
    formatXq(array, key = "Scope") {
      // console.log(array, key);
      if (array.length < 2) {
        let str = "$" + array[0].colIndex + "$" + array[0].rowIndex;
        this.$set(this.ruleForm, key, str);
      } else {
        let str = "";
        array.forEach((el, index) => {
          if (index === 0 || index == array.length - 1) {
            str +=
              "$" +
              array[index].colIndex +
              "$" +
              array[index].rowIndex +
              (index === 0 ? ":" : "");
          }
        });
        this.$set(this.ruleForm, key, str);
      }
    },
    cancelHandle() {
      this.momentRef = "";
      this.$refs.ruleForm && this.$refs.ruleForm.resetFields();
      this.isOpenDialog = false;
      this.ruleForm = {
        LeftValue: "",
        RightValue: "",
        Remark: "rgb(235, 49, 34)-rgb(255, 235, 235)",
        FontColor: "rgb(235, 49, 34)",
        BackgroundColor: "rgb(255, 235, 235)",
      };
    },
    handleClickOutside(event) {
      let _this = this;
      // 检查点击是否发生在el-input外
      if (
        _this.$refs[_this.momentRef] &&
        !_this.$refs.LeftValueRef.$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: 45%;
  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: 30px 60px;
    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>
<style lang="scss">
.condition-dialog {
  .value-box {
    .el-form-item {
      flex: 1;
    }
  }
}
</style>