sis_zhfx/src/views/HealthControl/assess/compoenets/popupcreate.vue

<template>
  <div class="assess-create">
    <div class="top">
      <div class="query mg-b-8">
        <div class="query-items flex-column">
          <div class="query-item flex-row">
            <div class="lable item-name">模块：</div>
            <div class="search-input item-content">
              <el-input v-model="form.name" placeholder="请填写"></el-input>
            </div>
          </div>
          <div class="query-item flex-row">
            <div class="lable item-name">场站：</div>
            <div class="search-input item-content">
              <el-select
                v-model="form.wpids"
                multiple
                collapse-tags
                popper-class="select"
              >
                <el-option
                  v-for="item in stations"
                  :key="item.label"
                  :value="item.id"
                  :label="item.name"
                >
                </el-option>
              </el-select>
            </div>
          </div>
          <div class="query-item flex-row">
            <div class="lable item-name">日期：</div>
            <div class="search-input item-content">
              <el-select
                v-model="form.timetypes"
                multiple
                popper-class="select"
              >
                <el-option
                  v-for="item in dates"
                  :key="item.label"
                  :value="item.label"
                  :label="item.label"
                >
                </el-option>
              </el-select>
            </div>
          </div>
          <div class="query-item flex-row">
            <div class="lable item-name">是否启用：</div>
            <div class="search-input item-content">
              <el-select v-model="form.isenable" popper-class="select">
                <el-option
                  v-for="item in enables"
                  :key="item.value"
                  :value="item.value"
                  :label="item.label"
                >
                </el-option>
              </el-select>
            </div>
          </div>
        </div>
      </div>
    </div>
    <div class="bottom">
      <button class="btn green mg-l-30" @click="onClickClear">清空</button>
      <button class="btn green mg-l-30" @click="onClickSave">保存</button>
    </div>
  </div>
</template>

<script>
import axios from "axios";

export default {
  name: "popup-create",
  props: {
    data: Object,
    station: Array,
  },
  data() {
    return {
      form: {},
      dates: [{ label: "日" }, { label: "月" }, { label: "年" }],
      stations: [],
      enables: [
        { value: "0", label: "否" },
        { value: "1", label: "是" },
      ],
    };
  },
  // 自定义事件
  emits: {
    onClick: null,
  },
  created() {
    this.stations = this.station;
    this.form = this.convertArray(this.data);
  },
  methods: {
    onClickClear() {
      this.form = {};
    },
    onClickSave() {
      this.requestSave();
    },
    requestSave() {
      if (this.form.name == undefined) return;
      let params = {
        name: this.form.name,
        wpids: this.form.wpids.toString(),
        timetypes: this.form.timetypes.toString(),
        isenable: this.form.isenable,
      };
      if (this.form.id) {
        params.id = this.form.id;
      }

      axios({
        method: "post",
        url: "http://10.155.32.4:8034/evaluation/saveModelMain/",
        data: params,
        header: {
          "Content-Type": "application/json",
        },
      }).then((res) => {
        if (res.data.success) {
          this.form = {};
          this.$emit("onClick", true);
        }
      });
    },
    convertArray(form) {
      if (form.wpids != undefined && form.timetypes != undefined) {
        form.wpids = form.wpids.split(",");
        form.timetypes = form.timetypes.split(",");
        form.isenable = form.isenable == "是" ? 1 : 0;
      }
      return form;
    },
  },
  watch: {
    data(value) {
      this.form = this.convertArray(value);
    },
  },
};
</script>

<style lang="less" scoped>
.assess-create {
  width: 100%;
  display: flex;
  flex-direction: column;

  .top {
    width: 60%;
    margin-top: 50px;
    display: flex;
    flex-direction: column;
    align-self: center;

    .flex-row {
      margin-bottom: 20px;
      display: flex;
      flex-direction: row;
    }

    .flex-column {
      display: flex;
      flex-direction: column;
    }

    .item-name {
      width: 100px;
      text-align: end;
    }
    .item-content {
      width: 300px;
    }
  }

  .bottom {
    margin: 50px 0;
    display: flex;
    flex-direction: row;
    justify-content: center;

    .mg-l-30 {
      margin-left: 30px;
    }
  }
}
</style>