Vue_New/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">
        <el-row>
          <el-col :span="10">
            <el-form-item label="设备型号:" 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="消毒时长:" 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="时间:" 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="班次:" 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="20">
            <el-form-item label="机表(床单元、床旁桌)消毒方式:" prop="way" >
              <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="机表(床单元、床旁桌)消毒液:" label-width="200" prop="machine_disinfectant">
              <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="20">
            <el-form-item label="机表(床单元、床旁桌)消毒液:" label-width="200" prop="machine_disinfectant">
              <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="液路消毒方式:" prop="disinfectant_way">
              <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="液路消毒液:" prop="disinfectant">
              <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-row>
          <el-col :span="10">
            <el-form-item label="床单位更换:" prop="bed_way">
              <el-select style="width:135px" v-model="form.bed_way">
                <el-option
                  v-for="item in this.bedType"
                  :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,
        bed_way: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含氯消毒剂" },
        { id: 5,  name:"消毒湿巾"}
      ],
      // 夜路消毒方式
      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%次氯酸钠" },
        { id: 10,name:"25%的柠檬酸+5%次氯酸钠"},
      ],
      // 床单位更换
       bedType: [
        { id: 0, name: "/" },
        { id: 1, name: "床单" },
        { id: 2, name: "被套" },
        { id: 3, name: "枕套" },

      ],
      DeviceType: [],
      planid: 0,
      plandata: 0
    };
  },
  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);
      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.form.bed_way = parseInt(this.form.bed_way)
      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.dialogVisible = false;
          this.$refs['form'].resetFields()
          this.$emit("getAllPlan");
          this.$emit("getAllPlanDetail");
          // 如果保存成功通过状态值改变父组键表格的值
          this.plandata = 1;
          this.$emit("func", this.plandata);

        } else {
          this.$message.error("该消毒计划已存在");
        }
      });

    },
    getAllEquitType() {
      getAllEquitType().then(response => {
        if (response.data.state === 1) {
          var equitname = response.data.data.mode;
          this.DeviceType = equitname;
        }
      });
    }
  },
  created() {
    this.getAllEquimentName();
    this.getAllEquitType();
  }
};
</script>

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