vue-web-frame/src/views/basicinfo/station.vue

<template>
  <div>
    <div class="query mg-b-8">
      <div class="query-items">
        <div class="query-item">
          <div class="lable">场站名称：</div>
          <div class="search-input">
            <el-input
              v-model="search"
              size="small"
              placeholder="输入场站名称"
              @input="filterStation"
            />
          </div>
        </div>
      </div>
      <div class="query-actions" style="margin-left: 50px">
        <button class="btn" @click="insertItem()">新增</button>
      </div>
    </div>
    <div class="df-table">
      <el-table :data="tableData" class="custom-table" height="80vh">
        <el-table-column type="index" label="序号" align="center" width="50" />
        <el-table-column prop="name" align="center" label="场站名称" />
        <el-table-column prop="id" align="center" label="场站编码" />
        <el-table-column prop="capacity" align="center" label="装机容量(MW)" />
        <el-table-column prop="model" align="center" label="风机型号" />
        <el-table-column prop="longitude" align="center" label="经度" />
        <el-table-column prop="latitude" align="center" label="纬度" />
        <el-table-column prop="manufacturer" align="center" label="风机厂商" />
        <el-table-column align="center" label="操作">
          <template v-slot="scope">
            <el-button type="text" @click="editItem(scope)">编辑</el-button>
          </template>
        </el-table-column>
      </el-table>
      <el-dialog
        :title="dialogTitle"
        v-model="dialogShow"
        width="50%"
        top="15vh"
        custom-class="modal"
        :close-on-click-modal="true"
      >
        <el-form
          ref="ruleFormRef"
          :model="ruleForm"
          :rules="rules"
          label-width="120px"
          size="default"
        >
          <div class="inlineItem">
            <el-form-item :label="`${ruleForm['name--name--']}：`" prop="name">
              <el-input
                v-model="ruleForm.name"
                :placeholder="`请输入${ruleForm['name--name--']}`"
                type="input"
              />
            </el-form-item>
            <el-form-item :label="`${ruleForm['id--name--']}：`" prop="id">
              <el-input
                v-model="ruleForm.id"
                :placeholder="`请输入${ruleForm['id--name--']}`"
                type="input"
                :disabled="codedisabled"
              />
            </el-form-item>
          </div>
          <div class="inlineItem">
            <el-form-item
              :label="`${ruleForm['capacity--name--']}：`"
              prop="capacity"
            >
              <el-input
                v-model="ruleForm.capacity"
                :placeholder="`请输入${ruleForm['capacity--name--']}`"
                type="input"
              />
            </el-form-item>
            <el-form-item
              :label="`${ruleForm['model--name--']}：`"
              prop="model"
            >
              <el-input
                v-model="ruleForm.model"
                :placeholder="`请输入${ruleForm['model--name--']}`"
                type="input"
              />
            </el-form-item>
          </div>
          <div class="inlineItem">
            <el-form-item
              :label="`${ruleForm['longitude--name--']}：`"
              prop="longitude"
              type="input"
            >
              <el-input
                v-model="ruleForm.longitude"
                :placeholder="'请输入风机型号用/隔开'"
                type="input"
              />
            </el-form-item>
            <el-form-item
              :label="`${ruleForm['latitude--name--']}：`"
              prop="latitude"
            >
              <el-input
                v-model="ruleForm.latitude"
                :placeholder="`请输入${ruleForm['latitude--name--']}`"
                type="input"
              />
            </el-form-item>
          </div>
          <div class="inlineItem">
            <el-form-item
              :label="`${ruleForm['manufacturer--name--']}：`"
              prop="manufacturer"
            >
              <el-select
                v-model="ruleForm.manufacturer"
                :placeholder="`请输入${ruleForm['manufacturer--name--']}`"
                popper-class="select"
              >
                <el-option
                  v-for="item in manufacturerArray"
                  :key="item.value"
                  :value="item.value"
                  :label="item.label"
                >
                </el-option>
              </el-select>
            </el-form-item>
          </div>
        </el-form>
        <template #footer>
          <span class="dialog-footer">
            <el-button type="info" size="medium" @click="cancel"
              >取消</el-button
            >
            <el-button
              type="success"
              size="medium"
              @click="submit('ruleFormRef')"
              >提交</el-button
            >
          </span>
        </template>
      </el-dialog>
    </div>
  </div>
</template>

<script>
export default {
  data() {
    return {
      filterTableData: [],
      tableData: [],
      dialogTitle: "",
      dialogShow: false,
      codedisabled: false,
      ruleForm: {
        name: "",
        "name--name--": "场站名称",
        id: "",
        "id--name--": "场站编码",
        capacity: "",
        "capacity--name--": "装机容量",
        model: "",
        "model--name--": "风机型号",
        longitude: "",
        "longitude--name--": "经度",
        latitude: "",
        "latitude--name--": "经度",
        manufacturer: "",
        "manufacturer--name--": "风机厂商",
      },
      rules: {
        name: [
          {
            required: true,
            message: "不可为空",
            trigger: "blur",
          },
        ],
        id: [
          {
            required: true,
            message: "不可为空",
            trigger: "blur",
          },
        ],
        capacity: [
          {
            required: true,
            message: "不可为空",
            trigger: "blur",
          },
        ],
        model: [
          {
            required: true,
            message: "不可为空",
            trigger: "blur",
          },
        ],
        longitude: [
          {
            required: true,
            message: "不可为空",
            trigger: "blur",
          },
        ],
        latitude: [
          {
            required: true,
            message: "不可为空",
            trigger: "blur",
          },
        ],
        manufacturer: [
          {
            required: true,
            message: "不可为空",
            trigger: "blur",
          },
        ],
      },
      manufacturerArray: [
        { label: "联合动力", value: "联合动力" },
        { label: "华创", value: "华创" },
      ],
    };
  },

  created() {
    this.getStationType();
    this.renderRules();
  },

  methods: {
    filterStation(value) {
      if (value) {
        let tableData = [];
        this.filterTableData.forEach((ele) => {
          if (ele.name.indexOf(value) !== -1) {
            tableData.push(ele);
          }
        });
        this.tableData = tableData;
      } else {
        this.tableData = this.filterTableData;
      }
    },
    // 获取所有故障类型
    getStationType() {
      const that = this;
      this.API.requestData({
        subUrl: "basic/station/all",
        success(res) {
          that.tableData = res.data;
          that.filterTableData = res.data;
        },
      });
    },

    // 取消新增或编辑
    cancel() {
      this.dialogShow = false;
    },

    //新增
    insertItem() {
      this.resetForm();
      this.dialogShow = true;
      this.dialogTitle = "新增";
      this.codedisabled = false;
    },

    // 编辑某一条
    editItem({ row }) {
      for (let key in row) {
        if (key !== "time") {
          this.ruleForm[key] = row[key];
        }
      }
      this.dialogShow = true;
      this.dialogTitle = "编辑";
      this.codedisabled = true;
    },

    // 提交编辑或者新增数据
    submit(formName = "") {
      const that = this;
      that.$refs[formName].validate((valid) => {
        if (valid) {
          let data = {};
          for (let key in that.ruleForm) {
            if (key.indexOf("--name--") === -1) {
              data[key] = that.ruleForm[key];
            }
          }
          data.time = new Date().formatDate("yyyy-MM-dd hh:mm:ss");
          data.category = "GZ";
          that.API.request({
            method: "POST",
            subUrl: "know/fault/type/insert",
            data,
            success() {
              that.BASE.showMsg({
                type: "success",
                msg: `${data.id ? "编辑" : "新增"}成功`,
              });
              that.dialogShow = false;
              that.getStationType();
            },
          });
        } else {
          return false;
        }
      });
    },

    // 渲染 rules 中文描述
    renderRules() {
      for (let key in this.rules) {
        this.rules[key].forEach((ele) => {
          ele.message = `${this.ruleForm[key + "--name--"]}` + ele.message;
        });
      }
    },

    // 重置表单并且重置表单效验
    resetForm() {
      this.dialogTitle = "";
      this.ruleForm.id && delete this.ruleForm.id;
      for (let key in this.ruleForm) {
        if (key.indexOf("--name--") === -1) {
          this.ruleForm[key] = "";
        }
      }
    },
  },
};
</script>


<style lang="less" scpoed>
.el-form {
  margin-left: 50px;
}
.el-form .el-form-item {
  margin-top: 40px;
  width: 80%;
  display: flex;
  justify-items: center;
}
.el-form {
  display: flex;
  justify-content: start;
  align-items: center;
  flex-wrap: wrap;
  .inlineItem {
    width: 100%;
    display: flex;
    justify-content: start;
    align-items: center;
    height: 80px;
    .el-form-item {
      width: 100%;
      margin-bottom: 40px;

      .el-input__count {
        background: rgba(83, 98, 104, 0.2);
        color: #b3bdc0;
      }
      .el-input{
           width: 250px;
      }
      .el-select{
           width: 250px;
      }
    }
  }
}
</style>