soc_web/src/views/warnRule/addDialogCom.vue

<template>
  <div>
    <!-- <div>{{ datas }}</div>
    <br />
    <div>{{ sourceTypeList }}</div> -->
    <el-row>
      <el-col :span="14">
        <el-row>
          <el-col :span="24">
            <el-radio-group v-model="weekDay">
              <el-radio-button label="1">星期一</el-radio-button>
              <el-radio-button label="2">星期二</el-radio-button>
              <el-radio-button label="3">星期三</el-radio-button>
              <el-radio-button label="4">星期四</el-radio-button>
              <el-radio-button label="5">星期五</el-radio-button>
              <el-radio-button label="6">星期六</el-radio-button>
              <el-radio-button label="7">星期日</el-radio-button>
            </el-radio-group>
          </el-col>
        </el-row>
      </el-col>
      <el-col :span="10">
        <el-row type="flex" justify="end">
          <el-col :span="11">
            <el-button type="primary" size="medium" @click="addBtnClick">新增规则</el-button>&nbsp;&nbsp;
            <el-popover placement="bottom" title="复制到" trigger="click" @show="copyToPanelShow" v-model="copyToPanelVisible">
              <div class="copytoPanel">
                <el-card>
                  <el-checkbox-group v-model="copyToSelects">
                    <el-checkbox label="1">周一</el-checkbox>
                    <el-checkbox label="2">周二</el-checkbox>
                    <el-checkbox label="3">周三</el-checkbox>
                    <el-checkbox label="4">周四</el-checkbox>
                    <el-checkbox label="5">周五</el-checkbox>
                    <el-checkbox label="6">周六</el-checkbox>
                    <el-checkbox label="7">周日</el-checkbox>
                  </el-checkbox-group>
                  <br />
                  <el-button type="primary" @click="copyToClick">复制</el-button>
                </el-card>
              </div>

              <el-button slot="reference" type="primary">复制到</el-button>
            </el-popover>

          </el-col>
        </el-row>
      </el-col>
    </el-row>
    <el-empty
      v-if="datas[sourceType] == undefined || datas[sourceType][weekDay] == undefined || datas[sourceType][weekDay].length == 0"
      description="未找到数据"></el-empty>

    <div v-else v-for="(item, index) in datas[sourceType][weekDay]" :key="item" class="ruleDiv">

      <div class="sonruleDiv">
        <el-time-picker placeholder="开始时间" value-format="HH:mm:ss" v-model="item.times" is-range range-separator="至"
          @input="timeInput(item.times)" clearable=false clear-icon="">

        </el-time-picker>&nbsp;&nbsp;
        <el-select v-model="item.fieldcode" placholeder="请选择属性" @change="sourceTypeItemChanged(item, item.fieldcode)">
          <el-option v-for="sourceTypeItem in sourceTypeList" :key="sourceTypeItem.sysFieldCode"
            :label="sourceTypeItem.name" :value="sourceTypeItem.sysFieldCode">
          </el-option>
        </el-select>&nbsp;&nbsp;
        <el-select v-model="item.operator" placeholder="请选择操作" @change="operatorChanged(item, item.operator)">
          <el-option v-for="operatorsItem in item.operators" :key="operatorsItem.key" :label="operatorsItem.value"
            :value="operatorsItem.key">
          </el-option>
        </el-select>&nbsp;&nbsp;
        <el-input-number v-if="item.sourceValues == undefined || item.sourceValues.length==0"
         v-model="item.value" :precision="2" :step="0.1" @change="onInputChange" ></el-input-number>
        <el-select v-else v-model="item.value" placeholder="请选择操作" @change="valueChanged(item, item.value)">
          <el-option v-for="sourceValueItem in item.sourceValues" :key="sourceValueItem.key"
            :label="sourceValueItem.value" :value="sourceValueItem.key"
            @click.native="sourceValueItemClick(sourceValueItem, item)">
          </el-option>
        </el-select>&nbsp;&nbsp;
        <el-button type="primary" @click.native="removeClick(item, index)">移除</el-button>
      </div>
    </div>
  </div>
</template>
<script>
export default {
  props: {
    sourceType: String,
    datas: Object,
    sourceTypeList: Array,
  },
  name: "SocWebAddDialogCom",
  data() {
    return {
      weekDay: "1",
      copyToSelects: [],
      copyToPanelVisible:false
    };
  },

  mounted() { },

  methods: {
    addBtnClick() {
      if (this.datas[this.sourceType] == undefined) {
        this.datas[this.sourceType] = {};
      }
      if (this.datas[this.sourceType][this.weekDay] == undefined) {
        this.datas[this.sourceType][this.weekDay] = [];
      }
      let weekDayDatas = this.datas[this.sourceType][this.weekDay];
      let newData = {
        id: "",
        ruleId: "",
        fieldcode: "",
        //@ApiModelProperty(value = "操作符，GT(大于)、GTE(大于等于)、LT(小于)、LTE(小于等	于)、EQUALS(等于)、STARTS_WITH(以什么开始)、	ENDS_WITH(以什么结束)、CONTAIN(包含)")
        operator: "",
        value: "",
        valueText: "",
        //@ApiModelProperty(value = "报警源类型：4：烟雾传感器；5： 温湿度采集器；6：水浸； 7：门磁、窗磁；8：卷帘门门磁；9：地磁；10燃气报警器；20：报警防区")
        sourceType: this.sourceType,
        //@ApiModelProperty(value = "规则使用周期：1.周一，2.周二，3.周三，4.周四，5.周五，6.周六，7.周日")
        weekDay: this.weekDay,
        startTime: "00:00:00",
        endTime: "23:59:59",
        times: ["00:00:00", "23:59:59"]
      };
      if (newData.fieldcode == undefined || newData.fieldcode == "") {
        if (this.sourceTypeList != undefined && this.sourceTypeList.length > 0) {
          newData.fieldcode = this.sourceTypeList[0].sysFieldCode;
        }
      }
      if (newData.operator == undefined || newData.operator == "") {
        if (this.sourceTypeList != undefined && this.sourceTypeList.length > 0 
        && this.sourceTypeList[0].operatorsList != undefined 
        && this.sourceTypeList[0].operatorsList.length > 0) {
          newData.operator = this.sourceTypeList[0].operatorsList[0].key
        }
      }
      if (newData.value == undefined || newData.value == "") {
        if (this.sourceTypeList != undefined && this.sourceTypeList.length > 0
          && this.sourceTypeList[0].specsList != undefined 
          && this.sourceTypeList[0].specsList.length > 0) {
          newData.value = this.sourceTypeList[0].specsList[0].key
          newData.valueText = this.sourceTypeList[0].specsList[0].value;
        }
      }
      this.initDataItem(newData, newData.fieldcode);
      weekDayDatas.push(newData);
      this.$forceUpdate();
    },
    copyToClick() {
      if (this.copyToSelects.length == 0) {
        this.$message({ message: "请选择需要复制到的星期！", type: 'warning' });
        return;
      }
      if (this.datas[this.sourceType] == undefined ||
        this.datas[this.sourceType][this.weekDay] == undefined ||
        this.datas[this.sourceType][this.weekDay].length == 0) {
        this.$message({ message: "没有可复制的数据", type: 'warning' });
        return;
      }

      this.copyToSelects.forEach(i => {
        let tempData = JSON.stringify(this.datas[this.sourceType][this.weekDay]);
        let newData = JSON.parse(tempData);
        newData.forEach(newDataItem => {
          newDataItem.weekDay=i;
        })
        this.datas[this.sourceType][i] = newData;
      });

      this.copyToPanelVisible = false;
      this.$forceUpdate();
      return true;
    },
    sourceTypeItemChanged(item, type) {
      this.initDataItem(item, type);
      this.$forceUpdate();
    },
    initDataItem(item, type) {
      let exist = this.sourceTypeList.find(i => i.sysFieldCode == type)
      if (exist == undefined) {
        item.operators = [];
        item.sourceValues = [];
      }
      else {
        item.operators = exist.operatorsList;
        item.sourceValues = exist.specsList;
      }
      return item;
    },
    operatorChanged(item, value) {
      this.$forceUpdate();
    },
    valueChanged(item, value) {
      this.$forceUpdate();
    },
    timeInput(value) {
      this.$forceUpdate();
    },
    onInputChange()
    {
      this.$forceUpdate();
    },
    removeClick(item, index) {
      if (this.datas[this.sourceType] == undefined) {
        this.datas[this.sourceType] = {};
      }
      if (this.datas[this.sourceType][this.weekDay] == undefined) {
        this.datas[this.sourceType][this.weekDay] = [];
      }
      let weekDayDatas = this.datas[this.sourceType][this.weekDay];
      if (weekDayDatas.length > index) {
        weekDayDatas.splice(index, 1)
        this.$forceUpdate();
      }
    },
    sourceValueItemClick(sourceValueItem, item) {
      console.log(sourceValueItem, item);
    },
    copyToPanelShow() {
      this.copyToSelects = [];
    }
  },
};
</script>
<style lang="scss" scoped>
.ruleDiv {
  margin-top: 20px;

  .sonruleDiv {
    margin-top: 10px;

    .el-button {
      margin-left: 20px;
    }
  }
}

.copytoPanel {
  .el-checkbox {
    width: 50px;
    margin-top: 10px;
  }
}
</style>