soc_web/src/views/iot/diagnoseThreshold/dialog.addThreshold.vue

<template>
  <div class="edu-training-edit">
    <DialogCom :title="title" @close="onHide" :visible.sync="isShow" width="460px">
      <div class="page-body">
        <el-form :model="formData" :rules="formDataRules" size="small" ref="form" label-position="top"
                 label-width="150px" label-prefix=":">
          <el-row>
            <el-col :span="19">
              <el-form-item prop="thresholdName" label="阈值名称">
                <el-input
                  v-model="formData.thresholdName"
                  :maxlength="32"
                  placeholder="请输入阈值名称"
                  clearable
                />
              </el-form-item>
            </el-col>
            <el-col :span="19">
              <el-form-item  prop="timeRange" label="有效时段">
                <el-time-picker style="width:100%"  v-model="formData.timeRange" value-format="HH:mm:ss"
                               is-range  start-placeholder="开始时间" end-placeholder="结束时间" @change="startDateChanged">
                </el-time-picker>
              </el-form-item>
            </el-col>
          </el-row>

          <el-row>
                <el-col :span="19">
                  <el-form-item prop="nosignal" label="信号丢失">
                    <el-input
                      v-model="formData.nosignal"
                      :maxlength="32"
                      clearable
                    />
                  </el-form-item>
                </el-col>
                <el-col :span="19">
                  <el-form-item prop="covered" label="遮挡">
                    <el-input
                      v-model="formData.covered"
                      :maxlength="32"
                      clearable
                    />
                  </el-form-item>
                </el-col>
          </el-row>

        </el-form>

      </div>

      <div slot="footer" class="dialog-footer">
        <el-button type="primary" @click="onSubmit">确 定</el-button>
        <el-button @click="onHide">取 消</el-button>
      </div>
    </DialogCom>
  </div>
</template>

<script>
import {mapMutations, mapState} from "vuex";
import {addThreshold,editThreshold} from "@/api/iot/diagnoseThreshold";
import dayjs from "dayjs";

export default {
  components: {},
  data() {
    return {
      isShow: false,
      title: '',
      formData: this.reset(),
      isEdit: false,
      formDataRules: {
        thresholdName: [{required: true, message: "请输入阈值名称", trigger: 'blur'}],
        timeRange: [{required: true, message: "请选择有效时段", trigger: 'blur'}],
        nosignal: [
          {required: true, message: '请输入信号丢失，格式为：@value==255', trigger: 'blur'},
          {validator: this.validatePort, trigger: 'blur'}
        ],
        covered: [
          {required: true, message: '请输入遮挡，格式为：@value>=255', trigger: 'blur'},
          {validator: this.validatePort, trigger: 'blur'}
        ],
      },
    };
  },
  props: {},
  watch: {},
  created() {

  },

  mounted() {

  },
  computed: {
    ...mapState(["loginUser", "org"]),
  },
  methods: {
    ...mapMutations([]),
    reset() {
      return {
        thresholdId: null,
        thresholdCode: null,
        thresholdName: null,
        timeRange: ['00:00:00', '23:59:59'],
        nosignal: "@value==255",
        covered: "@value>=255",
      };
    },
    async show(param) {
      this.title = '新增阈值';
      this.isEdit=false;
      if (param.thresholdCode){
        this.formData = {
                thresholdId: param.thresholdId,
                thresholdCode: param.thresholdCode,
                thresholdName: param.thresholdName,
                timeRange: [param.beginTime,param.endTime],
                nosignal: param.nosignal,
                covered: param.covered,
        }
        this.title = '编辑阈值';
        this.isEdit=true;
      }
      this.isShow = true;
    },

    // 事件
    onHide() {
      this.isShow = false;
      this.formData = this.reset();
    },
    async onSubmit() {
      this.$refs["form"].validate(async (valid) => {
        if (valid) {

            if (!this.formData.thresholdCode) {
              await addThreshold(this.formData).then(r => {
                  this.$modal.msgSuccess("新增成功");
              })
            } else {
              await editThreshold(this.formData).then(r => {
                   this.$modal.msgSuccess("修改成功");
              })
            }
            this.$emit("success");
            this.isShow = false;
        }
      });
    },
    validatePort(rule, value, callback) {
      if (!value) {
        return callback(new Error('请输入'));
      }
      const ipRegex = /^@value[<>=!]{1,1}[=]{0,1}\d+$/;
      if (!ipRegex.test(value)) {
        callback(new Error('格式错误，格式为：@value>=255'));
      } else {
        callback();
      }
    },

  },

};
</script>
<style lang="scss" scoped>
  .el-form-item{
      justify-content:center;
      align-items:center;
  }
</style>