ioc-admin-ui/src/views/systemManagement/indexConfiguration/dialog/editDialog.vue

<template>
  <div>
    <el-dialog
      v-dialog-drag
      class="dialog"
      title="指标编辑"
      :visible.sync="dialogVisible"
      width="460px"
      left
      @before-close="close"
    >
      <el-divider></el-divider>
      <div class="container">
        <el-scrollbar style="height: 100%">
          <el-form
            ref="form"
            :model="form"
            label-position="left"
            label-width="75px"
          >
            <el-form-item label="指标名称：">
              <el-input v-model="form.name"></el-input>
            </el-form-item>
            <el-form-item label="默认值：">
              <el-input
                type="number"
                v-model="form.defaultValue"
              ></el-input>
            </el-form-item>
            <el-form-item label="比较值：">
              <el-input
                type="number"
                v-model="form.compare"
              ></el-input>
            </el-form-item>
            <el-form-item label="计算规则：">
              <el-input v-model="form.rule"></el-input>
            </el-form-item>
          </el-form>
        </el-scrollbar>
      </div>
      <div
        slot="footer"
        class="dialog-footer"
      >
        <el-button
          style="background: #2ea8e6; color: #fff"
          @click="close"
        >取消</el-button>
        <el-button
          type="primary"
          style="background: #2ea8e6"
          @click="submitForm('form')"
        >确认</el-button>
      </div>
    </el-dialog>
  </div>
</template>

<script>
import api from "@/api/systemConfig/api";
export default {
  props: {
    update: {
      type: Function,
    },
    beforeFrom: {
      type: Object,
    },
  },
  data() {
    return {
      dialogVisible: false,
      form: {},
      action: "",
    };
  },
  methods: {
    submitForm() {
      const loading = this.$loading({
        lock: true,
        text: "更新中，请稍后！",
        spinner: "el-icon-loading",
        background: "rgba(0, 0, 0, 0.7)",
        customClass: "systemConfigLoading",
      });
      this.form.defaultValue =
        this.form.defaultValue.replace(/ /g, "") == ""
          ? "0"
          : this.form.compare;
      this.form.compare =
        this.form.compare.replace(/ /g, "") == "" ? "0" : this.form.compare;
      api
        .updateIndex({ data: JSON.stringify(this.form) })
        .then((result) => {
          loading.close();
          if (result.data.code == 0) {
            this.$message({
              type: "success",
              message: "指标更新成功!",
            });
            this.update();
            this.dialogVisible = false;
          } else {
            this.$message({
              type: "error",
              message: "指标更新失败!",
            });
          }
        })
        .catch((err) => {
          loading.close();
          this.$message({
            type: "error",
            message: "指标更新失败!",
          });
        });
    },
    close() {
      this.dialogVisible = false;
    },
  },
  watch: {
    beforeFrom(newVal) {
      this.form = JSON.parse(JSON.stringify(newVal));
    },
  },
};
</script>
<style lang="less" scoped>
.container {
  height: 230px;
  padding: 10px 10px;
}

.el-form {
  .el-form-item {
    margin: 10px 0 0 40px;
    width: 400px;

    /deep/.el-form-item__label {
      padding: 0;
      font-size: 15px;
    }

    /deep/.el-input__inner {
      width: 300px;
      height: 30px;
    }

    .life {
      /deep/.el-input__inner {
        width: 270px !important;
      }
    }

    .person {
      /deep/.el-input__inner {
        width: 285px !important;
      }
    }

    .note {
      /deep/.el-input__inner {
        width: 330px !important;
      }
    }
  }
}

// .dialog-footer {
//   // display: flex;
//   // margin-top: 10px;
// }

// /deep/.el-dialog {
//   height: 30vh;
// }

// /deep/.el-dialog__title {
//   margin-right: 330px;
// }
/deep/.el-dialog__header {
  padding-bottom: 0;
  color: #333333;
}

/deep/.el-dialog__headerbtn {
  font-size: 25px;
}

/deep/.el-dialog__body {
  padding: 0;
}

/deep/.el-divider--horizontal {
  display: block;
  height: 1px;
  width: 95%;
  margin: 0;
  margin-left: 2.5%;
}

/deep/.el-dialog__footer {
  padding: 0;
}

.el-button {
  width: 100px;
  height: 30px;
  text-align: center;
  margin: 30px;
  padding: 5px;
}
</style>