front / strategy-eigine-ui · Files

<template>
  <div>
    <el-form
      :model="dynamicValidateForm"
      ref="dynamicValidateForm"
      label-width="100px"
      class="demo-dynamic"
      :rules="rules"
    >
      <el-row :gutter="24">
        <el-col :span="12">
          <el-form-item label="预警编号" prop="a1" label-width="120px">
            <el-input
              v-model="dynamicValidateForm.a1"
              placeholder="请输入预警编号"
              :disabled="disabled"
            />
          </el-form-item>
        </el-col>
        <el-col :span="12">
          <el-form-item label="预警名称" prop="a2" label-width="120px">
            <el-input
              v-model="dynamicValidateForm.a2"
              placeholder="请输入预警名称"
              :disabled="disabled"
            />
          </el-form-item>
        </el-col>
      </el-row>
      <el-row :gutter="24">
        <el-col :span="12">
          <el-form-item label="预警指标" prop="a3" label-width="120px">
            <el-select
              v-model="dynamicValidateForm.a3"
              placeholder="预警指标"
              clearable
              size="small"
              :disabled="disabled"
            >
              <el-option label="item.name" value="item.businessCode" />
            </el-select>
          </el-form-item>
        </el-col>
        <el-col :span="12">
          <el-form-item label="备注" prop="a4" label-width="120px">
            <el-input
              v-model="dynamicValidateForm.a4"
              type="textarea"
              placeholder="请输入备注"
              show-word-limit
              :disabled="disabled"
            />
          </el-form-item>
        </el-col>
      </el-row>
      <div>
        <span>预警配置</span>
        <el-divider></el-divider>
      </div>
      <el-row :gutter="24">
        <el-col :span="12">
          <el-form-item label="监控粒度" prop="a5" label-width="120px">
            <el-select
              v-model="dynamicValidateForm.a5"
              placeholder="监控粒度"
              clearable
              size="small"
              :disabled="disabled"
            >
              <el-option label="按小时" value="1" />
              <el-option label="按天" value="2" />
              <el-option label="按周" value="3" />
            </el-select>
          </el-form-item>
        </el-col>
        <el-col :span="12">
          <el-form-item label="监控时段" prop="a6" label-width="120px">
            <el-select
              v-model="dynamicValidateForm.a6"
              placeholder="监控时段"
              clearable
              size="small"
              :disabled="disabled"
            >
              <el-option label="全周（7）" value="1" />
              <el-option label="全天" value="2" />
            </el-select>
          </el-form-item>
        </el-col>
        <el-col :span="12">
          <el-form-item label="监控时段" prop="a7" label-width="120px">
            <el-select
              v-model="dynamicValidateForm.a7"
              placeholder="监控时段"
              clearable
              size="small"
              :disabled="disabled"
            >
              <el-option label="全天（24）" value="2" />
            </el-select>
          </el-form-item>
        </el-col>
      </el-row>
      <el-row :gutter="24">
        <el-col :span="12">
          <el-form-item label="预警规则" label-width="120px">
            <el-button type="text" icon="el-icon-plus" @click="guize"
              >添加规则</el-button
            >
          </el-form-item>
        </el-col>
      </el-row>
      <el-table
        :data="tableData"
        border
        style="width: 95%; margin: auto; margin-bottom: 20px"
      >
        <el-table-column label="序号" type="index" width="55" align="center" />
        <el-table-column prop="b1" label="监控指标项" align="center" />
        <el-table-column prop="b2" label="对比方式" align="center" />
        <el-table-column prop="b3" label="阀值" align="center" />
        <el-table-column fixed="right" label="操作" align="center">
          <template slot-scope="scope">
            <el-button @click="handleClick(scope.row)" type="text" size="small"
              >编辑</el-button
            >
            <el-button
              type="text"
              size="small"
              @click.native.prevent="deleteRow(scope.$index, tableData)"
              >删除</el-button
            >
          </template>
        </el-table-column>
      </el-table>
      <el-row :gutter="24">
        <el-col :span="12">
          <el-form-item label="通知方式" prop="ruleList" label-width="120px">
            <el-checkbox-group v-model="dynamicValidateForm.checkList">
              <el-checkbox :label="0" name="type">系统通知</el-checkbox>
              <el-checkbox :label="1" name="type">短信通知</el-checkbox>
              <el-checkbox :label="2" name="type">邮件通知</el-checkbox>
            </el-checkbox-group>
          </el-form-item>
        </el-col>
      </el-row>
      <el-row :gutter="24">
        <el-col :span="4">
          <el-button
            type="text"
            icon="el-icon-plus"
            @click="addDomain"
            style="margin-left: 25px; margin-bottom: 20px"
            >新增手机号</el-button
          >
        </el-col>
        <el-col :span="1">
          <el-button type="text">详细</el-button>
        </el-col>
        <el-col :span="3">
          <el-button type="text">下载导入模板</el-button>
        </el-col>
        <el-col :span="10">
          <el-upload
            class="upload-demo"
            action="https://jsonplaceholder.typicode.com/posts/"
            :on-preview="handlePreview"
            :on-remove="handleRemove"
            :before-remove="beforeRemove"
            multiple
            :limit="1"
            :on-exceed="handleExceed"
            :file-list="fileList"
          >
            <el-button type="text">点击上传</el-button>
          </el-upload>
        </el-col>
      </el-row>
      <el-row :gutter="24">
        <el-col
          :span="12"
          v-for="(domain, index) in dynamicValidateForm.domains"
          :key="domain.key"
        >
          <el-form-item
            :label="'手机号' + (index + 1)"
            :prop="'domains.' + index + '.value'"
            :rules="[
              { required: true, message: '请填写手机号码' },
              {
                pattern: /^((\(\d{2,3}\))|(\d{3}\-))?1[3|5|8]\d{9}$/,
                message: '请输入正确的手机号码',
              },
              { min: 11, message: '请输入不少于11个字符', trigger: 'blur' },
            ]"
          >
            <el-input v-model="domain.value" style="width: 200px"></el-input
            ><el-button
              @click.prevent="removeDomain(domain)"
              type="text"
              style="margin-left: 12px"
              >删除</el-button
            >
          </el-form-item>
        </el-col>
      </el-row>
      <el-row :gutter="24">
        <el-col :span="4">
          <el-button
            type="text"
            icon="el-icon-plus"
            @click="addDomain2"
            style="margin-left: 25px; margin-bottom: 20px"
            >新增手机号</el-button
          >
        </el-col>
        <el-col :span="1">
          <el-button type="text">详细</el-button>
        </el-col>
        <el-col :span="3">
          <el-button type="text">下载导入模板</el-button>
        </el-col>
        <el-col :span="10">
          <el-upload
            class="upload-demo"
            action="https://jsonplaceholder.typicode.com/posts/"
            :on-preview="handlePreview"
            :on-remove="handleRemove"
            :before-remove="beforeRemove"
            multiple
            :limit="1"
            :on-exceed="handleExceed"
            :file-list="fileList"
          >
            <el-button type="text">点击上传</el-button>
          </el-upload>
        </el-col>
      </el-row>
      <el-row :gutter="24">
        <el-col
          :span="12"
          v-for="(domain2, index) in dynamicValidateForm.domains2"
          :key="domain2.key"
        >
          <el-form-item
            :label="'邮箱' + (index + 1)"
            :prop="'domains2.' + index + '.value'"
            :rules="[
              { required: true, message: '请填写邮箱', trigger: 'blur' },
              {
                pattern:
                  /^([a-zA-Z0-9._-])+@([a-zA-Z0-9_-])+(\.[a-zA-Z0-9_-])+/,
                message: '请输入正确的邮箱',
              },
            ]"
          >
            <el-input v-model="domain2.value" style="width: 200px"></el-input
            ><el-button
              @click.prevent="removeDomain(domain2)"
              type="text"
              style="margin-left: 12px"
              >删除</el-button
            >
          </el-form-item>
        </el-col>
      </el-row>
      <el-row :gutter="24">
        <el-col :span="24">
          <el-form-item label="通知内容" prop="a10" label-width="120px">
            <el-input
              v-model="dynamicValidateForm.a10"
              type="textarea"
              placeholder="请输入通知内容"
              show-word-limit
              maxlength="120"
              :disabled="disabled"
            />
          </el-form-item>
        </el-col>
      </el-row>
    </el-form>
    <div slot="footer" class="dialog-footer" v-if="!disabled">
        <el-button type="primary" @click="submitForm">确 定</el-button>
        <el-button @click="cancel">取 消</el-button>
      </div>
    <el-dialog
      title="新增规则"
      :visible.sync="dialogFormVisible"
      v-if="dialogFormVisible"
    >
      <el-form ref="formAdd" :model="formAdd">
        <el-row :gutter="24">
          <el-col :span="12">
            <el-form-item label="监控指标项" prop="b1" label-width="120px">
              <el-input
                v-model="formAdd.b1"
                placeholder="请输入监控指标项"
                :disabled="disabled"
              />
            </el-form-item>
          </el-col>
          <el-col :span="12">
            <el-form-item label="对比方式" prop="b2" label-width="120px">
              <el-input
                v-model="formAdd.b2"
                placeholder="请输入对比方式"
                :disabled="disabled"
              />
            </el-form-item>
          </el-col>
          <el-col :span="12">
            <el-form-item label="阀值" prop="b3" label-width="120px">
              <el-input
                v-model="formAdd.b3"
                placeholder="请输入阀值"
                :disabled="disabled"
              />
            </el-form-item>
          </el-col>
        </el-row>
      </el-form>
      <div slot="footer" class="dialog-footer">
        <el-button @click="dialogFormVisible = false">取 消</el-button>
        <el-button type="primary" @click="tableUp">确 定</el-button>
      </div>
    </el-dialog>
  </div>
</template>
  <script>
export default {
  data() {
    var Mobile = (rule, value, callback) => {
      const regMobile = /^((\(\d{2,3}\))|(\d{3}\-))?1[3|5|8]\d{9}$/;
      if (!value) {
        return callback(new Error("请输入手机！"));
      }
      if (!regMobile.test(value)) {
        callback(new Error("您输入手机格式错误！"));
      }
    };
    return {
      dynamicValidateForm: {
        domains: [
          {
            value: "",
          },
        ],
        domains2: [
          {
            value: "",
          },
        ],
        a1: "",
        a2: "",
        a3: "",
        a4: "",
        a5: "",
        a6: "",
        a7: "",
        a10: "",
        checkList: [],
      },
      disabled: false,
      rules: {
        a1: [{ required: true, message: "预警编号不能为空", trigger: "blur" }],
        a2: [{ required: true, message: "预警名称不能为空", trigger: "blur" }],
        a3: [{ required: true, message: "请选择预警指标", trigger: "change" }],
        a5: [
          { required: true, message: "监控粒度不能为空", trigger: "change" },
        ],
        ruleList: [
          {
            type: "array",
            required: true,
            message: "请至少选择一个通知方式",
            trigger: "change",
          },
        ],
        a10: [{ required: true, message: "通知内容不能为空", trigger: "blur" }],
      },
      tableData: [],
      dialogFormVisible: false,
      formAdd: {},
      fileList: [],
    };
  },
  methods: {
    submitForm(formName) {
      this.$refs[formName].validate((valid) => {
        if (valid) {
          alert("submit!");
        } else {
          console.log("error submit!!");
          return false;
        }
      });
    },
    handleRemove(file, fileList) {
      console.log(file, fileList);
    },
    handlePreview(file) {
      console.log(file);
    },
    handleExceed(files, fileList) {
      this.$message.warning(
        `当前限制选择 3 个文件，本次选择了 ${files.length} 个文件，共选择了 ${
          files.length + fileList.length
        } 个文件`
      );
    },
    beforeRemove(file, fileList) {
      return this.$confirm(`确定移除 ${file.name}？`);
    },
    guize() {
      this.dialogFormVisible = true;
      this.formAdd = {};
    },
    tableUp() {
      this.$refs["formAdd"].validate((valid) => {
        if (valid) {
          console.log(this.formAdd);
          this.tableData.push(this.formAdd);
          this.dialogFormVisible = false;
        }
      });
    },
    deleteRow(index, rows) {
      rows.splice(index, 1);
    },
    handleClick(row) {
      console.log(row);
    },
    removeDomain(item) {
      var index = this.domains.indexOf(item);
      if (index !== -1) {
        this.domains.splice(index, 1);
      }
    },
    resetForm(formName) {
      this.$refs[formName].resetFields();
    },
    removeDomain(item) {
      var index = this.dynamicValidateForm.domains.indexOf(item);
      if (index !== -1) {
        this.dynamicValidateForm.domains.splice(index, 1);
      }
    },
    addDomain() {
      this.dynamicValidateForm.domains.push({
        value: "",
        key: Date.now(),
      });
    },
    removeDomain2(item) {
      var index = this.dynamicValidateForm.domains2.indexOf(item);
      if (index !== -1) {
        this.dynamicValidateForm.domains2.splice(index, 1);
      }
    },
    addDomain2() {
      this.dynamicValidateForm.domains2.push({
        value: "",
        key: Date.now(),
      });
    },
  },
};
</script>
<style scoped>
.box1 {
  display: flex;
  justify-content: space-around;
  width: 100%;
}

.avatar-uploader .el-upload {
  border: 1px dashed #d9d9d9;
  border-radius: 6px;
  cursor: pointer;
  position: relative;
  overflow: hidden;
}

.avatar-uploader .el-upload:hover {
  border-color: #409eff;
}

.avatar-uploader-icon {
  font-size: 28px;
  color: #8c939d;
  width: 178px;
  height: 178px;
  line-height: 178px;
  text-align: center;
}

.avatar {
  width: 178px;
  height: 178px;
  display: block;
}

.new_dialog {
  height: 70%;
  overflow: hidden;
  overflow-y: scroll;
}
</style>