front / strategy-eigine-ui · Files

<template>
  <div>
    <el-dialog
      :title="title"
      :visible.sync="open"
      v-if="open"
      width="1000px"
      append-to-body
      top="10vh"
      custom-class="new_dialog"
    >
      <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="baseNo" label-width="120px">
                <el-input
                  v-model="dynamicValidateForm.baseNo"
                  placeholder="请输入预警编号"
                  :disabled="true"
                />
              </el-form-item>
            </el-col>
            <el-col :span="12">
              <el-form-item
                label="预警名称"
                prop="baseName"
                label-width="120px"
              >
                <el-input
                  v-model="dynamicValidateForm.baseName"
                  placeholder="请输入预警名称"
                  :disabled="disabled"
                />
              </el-form-item>
            </el-col>
          </el-row>
          <el-row :gutter="24">
            <el-col :span="12">
              <el-form-item
                label="预警指标类型"
                prop="baseType"
                label-width="120px"
              >
                <el-select
                  v-model="dynamicValidateForm.baseType"
                  placeholder="预警指标类型"
                  clearable
                  size="small"
                  :disabled="disabled"
                >
                  <el-option
                    v-for="(item, index) in dict.type.index_type_list"
                    :key="index"
                    :label="item.label"
                    :value="item.value"
                  />
                </el-select>
              </el-form-item>
            </el-col>
            <el-col :span="12">
              <el-form-item label="指标说明" prop="note" label-width="120px">
                <el-input
                  v-model="dynamicValidateForm.note"
                  type="textarea"
                  placeholder="请输入指标说明"
                  show-word-limit
                  :disabled="disabled"
                />
              </el-form-item>
            </el-col>
          </el-row>
          <el-row :gutter="24">
            <el-col :span="12">
              <el-form-item label="监控预警详细" label-width="120px">
              </el-form-item>
            </el-col>
          </el-row>
          <div
            style="
              display: flex;
              justify-content: space-between;
              width: 90%;
              margin: auto;
            "
          >
            <div>注：在新增监控指标项时，需要技术提供sql</div>
            <el-button type="text" :disabled="disabled" @click="guize">添加</el-button>
          </div>
          <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="name" label="监控指标项" align="center" />
            <el-table-column
              prop="baseSql"
              label="监控指标sql"
              align="center"
            />
            <el-table-column fixed="right" label="操作" align="center">
              <template slot-scope="scope">
                <el-button
                  @click="handleClick(scope.row, scope.$index)"
                  type="text"
                  size="small"
                  :disabled="disabled"
                  >编辑</el-button
                >
                <el-button
                  type="text"
                  size="small"
                  :disabled="disabled"
                  @click.native.prevent="deleteRow(scope.$index, tableData)"
                  >删除</el-button
                >
              </template>
            </el-table-column>
          </el-table>
        </el-form>
        <div
          slot="footer"
          class="dialog-footer"
          style="margin-left: 83%"
          v-if="!disabled"
        >
          <el-button type="primary" @click="submitForm">确 定</el-button>
          <el-button @click="cancel">取 消</el-button>
        </div>
      </div>
    </el-dialog>
    <el-dialog
      title="新增规则"
      :visible.sync="dialogFormVisible"
      v-if="dialogFormVisible"
    >
      <el-form ref="formAdd" :model="formAdd" :rules="rules2">
        <el-row :gutter="24">
          <el-col :span="12">
            <el-form-item label="监控指标项" prop="name" label-width="120px">
              <el-input v-model="formAdd.name" placeholder="请输入监控指标项" />
            </el-form-item>
          </el-col>
          <el-col :span="12">
            <el-form-item
              label="监控指标sql"
              prop="baseSql"
              label-width="120px"
            >
              <el-input
                v-model="formAdd.baseSql"
                placeholder="请输入监控指标sql"
              />
            </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>
import {
  getEarlylNo,
  earlyBaseSave,
  earlyBaseModifier,
} from "@/api/postList/list";
export default {
  name: "addMobile",
  dicts: ["sys_normal_disable", "name_roll_type", "index_type_list"],
  props: [],
  data() {
    return {
      imageUrl: "",
      labelProduct: [],
      checkList: [],
      open: false,
      // 弹出层标题
      title: "",
      // 表单参数
      dialogFormVisible: false,
      formLabelWidth: "120px",
      dynamicValidateForm: {
        baseNo: "",
      },
      disabled: false,
      rules: {
        baseNo: [
          { required: true, message: "预警编号不能为空", trigger: "blur" },
        ],
        baseName: [
          { required: true, message: "预警名称不能为空", trigger: "blur" },
        ],
        baseType: [
          { required: true, message: "请选择预警指标", trigger: "change" },
        ],
      },
      rules2: {
        name: [
          { required: true, message: "监控指标项不能为空", trigger: "blur" },
        ],
        baseSql: [
          { required: true, message: "监控指标sql不能为空", trigger: "blur" },
        ],
      },
      tableData: [],
      formAdd: {},
      fileList: [],
      id: "",
      addBtn: 1,
      indexNum: "",
    };
  },
  methods: {
    // 取消按钮
    cancel() {
      this.open = false;
    },
    add() {
      this.open = true;
      this.id = "";
      this.dynamicValidateForm = {
        baseNo: "",
        baseType: "",
        note: "",
      };
      this.tableData = [];
      this.openGetEarlylNo();
    },
    edit(res) {
      this.open = true;
      this.id = res.id;
      this.dynamicValidateForm = res;
      this.tableData = res.earlyBaseSqls;
    },
    see(res) {
      this.open = true;
    },
    openGetEarlylNo() {
      getEarlylNo().then((response) => {
        this.dynamicValidateForm.baseNo = response.msg;
      });
    },
    submitForm(formName) {
      this.$refs["dynamicValidateForm"].validate((valid) => {
        if (valid) {
          if (this.id) {
            let list = {
              ...this.dynamicValidateForm,
              earlyBaseSqls: this.tableData,
              id:this.id
            };
            // console.log(list)
            earlyBaseModifier(list).then((response) => {
              if (response.code == 200) {
                this.$modal.msgSuccess(response.msg);
                this.open = false;
                this.$emit("getList");
              } else {
                this.$modal.msgSuccess(response.msg);
                this.open = false;
              }
            });
          } else {
            let list = {
              ...this.dynamicValidateForm,
              earlyBaseSqls: this.tableData,
            };
            // console.log(list)
            earlyBaseSave(list).then((response) => {
              if (response.code == 200) {
                this.$modal.msgSuccess(response.msg);
                this.open = false;
                this.$emit("getList");
              } else {
                this.$modal.msgSuccess(response.msg);
                this.open = false;
              }
            });
          }
        }
      });
    },
    guize() {
      this.dialogFormVisible = true;
      this.formAdd = {};
      this.addBtn = 1;
    },
    tableUp() {
      this.$refs["formAdd"].validate((valid) => {
        if (valid) {
          if (this.addBtn == 1) {
            this.tableData.push(this.formAdd);
            this.dialogFormVisible = false;
          } else {
            this.tableData.splice(this.indexNum, 1);
            this.tableData.push(this.formAdd);
            this.dialogFormVisible = false;
            console.log(this.formAdd);
          }
        }
      });
    },
    deleteRow(index, rows) {
      rows.splice(index, 1);
    },
    handleClick(row, index) {
      console.log(row, index);
      this.addBtn = 2;
      this.dialogFormVisible = true;
      this.formAdd = row;
      this.indexNum = index;
    },
    removeDomain(item) {
      var index = this.dynamicValidateForm.domains.indexOf(item);
      if (index !== -1) {
        this.dynamicValidateForm.domains.splice(index, 1);
      }
    },
  },
};
</script>
      
<style lang="scss" 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>