xt_vue/src/xt_pages/management/components/PlanForm.vue

<template>
  <div id="plan-form">
    <el-dialog
      title="新增计划"
      :visible.sync="dialogVisible"
      width="55%"
      center
    >
      <el-form ref="form" :model="form" :rules="rules">
        <el-row>
          <el-col :span="10">
            <el-form-item label="设备型号:" required prop="device_type">
              <el-select style="width:135px" v-model="form.device_type">
                <el-option
                  v-for="item in this.DeviceType"
                  :key="item.id"
                  :label="item.device_mode"
                  :value="item.id"
                ></el-option>
              </el-select>
            </el-form-item>
          </el-col>
          <el-col :span="10">
            <el-form-item label="消毒时长:" required prop="disinfec_time">
              <el-input
                style="width:135px"
                v-model="form.disinfec_time"
              ></el-input>
              <span>分钟</span>
            </el-form-item>
          </el-col>
        </el-row>
        <el-row>
          <el-col :span="10">
            <el-form-item label="时间:" required prop="time">
              <el-select
                v-model="form.time"
                multiple
                filterable
                allow-create
                default-first-option
                placeholder="请选择时间"
                style="width: 135px;"
              >
                <el-option
                  v-for="item in this.timeType"
                  :key="item.id"
                  :label="item.name"
                  :value="item.id"
                ></el-option>
              </el-select>
            </el-form-item>
          </el-col>
          <el-col :span="10">
            <el-form-item label="班次:" required prop="class_time">
              <el-select
                v-model="form.class_time"
                multiple
                filterable
                allow-create
                default-first-option
                placeholder="请选择时间"
                style="width: 135px;"
              >
                <el-option
                  v-for="item in this.classType"
                  :key="item.id"
                  :label="item.name"
                  :value="item.id"
                ></el-option>
              </el-select>
            </el-form-item>
          </el-col>
        </el-row>
        <el-row>
          <el-col :span="10">
            <el-form-item label="机表消毒方式:">
              <el-select style="width:135px" v-model="form.way">
                <el-option
                  v-for="item in this.disinfectType"
                  :key="item.id"
                  :label="item.name"
                  :value="item.id"
                ></el-option>
              </el-select>
            </el-form-item>
          </el-col>
          <el-col :span="10">
            <el-form-item label="机表消毒液:">
              <el-select
                style="width:135px"
                v-model="form.machine_disinfectant"
              >
                <el-option
                  v-for="item in this.disinfectantType"
                  :key="item.id"
                  :label="item.name"
                  :value="item.id"
                ></el-option>
              </el-select>
            </el-form-item>
          </el-col>
        </el-row>
        <el-row>
          <el-col :span="10">
            <el-form-item label="液路消毒方式:">
              <el-select style="width:135px" v-model="form.disinfectant_way">
                <el-option
                  v-for="item in this.sterilizeType"
                  :key="item.id"
                  :label="item.name"
                  :value="item.id"
                ></el-option>
              </el-select>
            </el-form-item>
          </el-col>
          <el-col :span="10">
            <el-form-item label="液路消毒液:">
              <el-select style="width:135px" v-model="form.disinfectant">
                <el-option
                  v-for="item in this.fluidPathType"
                  :key="item.id"
                  :label="item.name"
                  :value="item.id"
                ></el-option>
              </el-select>
            </el-form-item>
          </el-col>
        </el-row>
      </el-form>
      <span slot="footer" class="dialog-footer">
        <el-button @click="dialogVisible = false">取 消</el-button>
        <el-button type="primary" @click="savePlan('form')">保存</el-button>
      </span>
    </el-dialog>
  </div>
</template>

<script>
import { getAllEquimentName, savePlan, getAllEquitType } from "@/api/manage";
export default {
  name: "PlanForm",
  props: {
    equimentid: Number
  },
  data() {
    return {
      dialogVisible: false,
      form: {
        device_type: "",
        disinfec_time: "",
        time: [],
        class_time: [],
        way: 0,
        machine_disinfectant: 0,
        disinfectant_way: 0,
        disinfectant: 0
      },
      value: [],
      timeType: [
        { id: 1, name: "周一" },
        { id: 2, name: "周二" },
        { id: 3, name: "周三" },
        { id: 4, name: "周四" },
        { id: 5, name: "周五" },
        { id: 6, name: "周六" },
        { id: 7, name: "周日" }
      ],
      classType: [
        { id: 1, name: "上午" },
        { id: 2, name: "下午" },
        { id: 3, name: "晚上" }
      ],
      // 机表消毒方式
      disinfectType: [
        { id: 0, name: "/" },
        { id: 1, name: "擦拭" },
        { id: 2, name: "化学消毒" }
      ],
      // 基表消毒液
      disinfectantType: [
        { id: 0, name: "/" },
        { id: 1, name: "0.22%季铵盐" },
        { id: 2, name: "500mg/l含氯消毒剂" },
        { id: 3, name: "1000mg/l含氯消毒剂" },
        { id: 4, name: "1500mg/l含氯消毒剂" }
      ],
      // 夜路消毒方式
      sterilizeType: [
        { id: 0, name: "/" },
        { id: 1, name: "热化学消毒" },
        { id: 2, name: "化学消毒 + 除钙" },
        { id: 3, name: "热化学消毒 + 除钙" },
        { id: 4, name: "热消毒" },
        { id: 5, name: "化学消毒" },
        { id: 6, name: "除钙" },
        { id: 7, name: "清洗" }
      ],
      // 夜路消毒液
      fluidPathType: [
        { id: 0, name: "/" },
        { id: 1, name: "20%柠檬酸" },
        { id: 2, name: "25%柠檬酸" },
        { id: 3, name: "50%柠檬酸" },
        { id: 4, name: "50%柠檬酸 + 5%次氯酸钠" },
        { id: 5, name: "20%柠檬酸 + 10%冰醋酸" },
        { id: 6, name: "0.2%过氧化乙酸" },
        { id: 7, name: "10%冰醋酸" },
        { id: 8, name: "50%冰醋酸" },
        { id: 9, name: "5%次氯酸钠" }
      ],
      DeviceType: [],
      planid: 0,
      plandata: 0,
      rules: {
        device_type: [{ required: true, message: "请输入设备型号" }],
        disinfec_time: [{ required: true, message: "请输入消毒时长" }],
        time: [{ required: true, message: "请输入时间" }],
        class_time: [{ required: true, message: "请输入班次" }]
      }
    };
  },
  methods: {
    open: function() {
      this.dialogVisible = true;
    },
    getAllEquimentName() {
      getAllEquimentName().then(response => {
        if (response.data.state === 1) {
          var equit = response.data.data.equit;
          // console.log('equit', equit);
          // this.DeviceType = equit;
        }
      });
    },
    savePlan(formName) {
      var equimentid = this.equimentid;
      // console.log('equimentid', equimentid);
      console.log("数据---", this.form.device_type);
      if (this.form.device_type === "") {
        this.form.device_type === "";
      }
      if (this.form.device_type !== "") {
        var devicetype = this.form.device_type;
        var devicetypes = parseInt(devicetype);
        this.form.device_type = devicetypes;
      }

      var ways = this.form.way;
      var way = parseInt(ways);
      this.form.way = way;

      var machinedisinfectant = this.form.machine_disinfectant;
      var machinedisinfectants = parseInt(machinedisinfectant);
      this.form.machine_disinfectant = machinedisinfectants;

      var disinfectantways = this.form.disinfectant_way;
      var disinfectantway = parseInt(disinfectantways);
      this.form.disinfectant_way = disinfectantway;

      var disinfectants = this.form.disinfectant;
      var disinfectant = parseInt(disinfectants);
      this.form.disinfectant = disinfectant;
      this.$refs[formName].validate(valid => {
        if (valid) {
          savePlan(this.form, this.equimentid).then(response => {
            if (response.data.state === 1) {
              var msg = response.data.data.msg;
              // console.log('msg', msg);
              this.$message.success("保存成功");
              this.form.device_type = "";
              this.form.disinfec_time = [];
              this.form.time = [];
              this.form.class_time = "";
              this.form.way = 0;
              this.form.machine_disinfectant = 0;
              this.form.disinfectant_way = 0;
              this.form.disinfectant = 0;
              this.dialogVisible = false;
              this.$emit("getAllPlan");
              this.$emit("getAllPlanDetail");
              // 如果保存成功通过状态值改变父组键表格的值
              this.plandata = 1;
              this.$emit("func", this.plandata);
            } else {
              this.$message.error("该消毒计划已存在");
              // this.form.disinfec_time = "";
              // this.form.time = [];
              // this.form.class_time = [];
              // this.form.way = 0;
              // this.form.machine_disinfectant = 0;
              // this.form.disinfectant_way = 0;
              // this.form.disinfectant = 0;
            }
          });
        }
      });
    },
    getAllEquitType() {
      getAllEquitType().then(response => {
        if (response.data.state === 1) {
          this.DeviceType = response.data.data.mode;
          console.log("类型", this.DeviceType);
        }
      });
    }
  },
  created() {
    this.getAllEquimentName();
    this.getAllEquitType();
  }
};
</script>

<style lang="scss">
#plan-form {
  .el-form-item__label {
    width: 100px;
  }
  .el-dialog__footer {
    text-align: right;
  }
}
</style>