elizebeth/src/xt_pages/management/components/ManageForm.vue

<template>
  <div id="manage-form">
    <el-dialog
      title="新增设备"
      :visible.sync="dialogVisible"
      width="70%"
      align="center"
    >
      <el-form ref="form" :model="form" :rules="rules">
        <el-row>
          <el-col :span="8">
            <el-form-item label="序列号:" required prop="serial_number">
              <el-input
                style="width:135px"
                v-model="form.serial_number"
              ></el-input>
            </el-form-item>
          </el-col>
          
          <el-col :span="8">
            <el-form-item label="设备类型:" required prop="device_type">
              <el-select
                style="width:135px"
                v-model="form.device_type"
                @change="changeDeviceType"
              >
                <el-option
                  v-for="item in this.DeviceType"
                  :key="item.id"
                  :label="item.name"
                  :value="item.id"
                ></el-option>
              </el-select>
            </el-form-item>
          </el-col>

          <el-col :span="8">
            <el-form-item
              label="分区:"
              v-show="bedShowTwo"
              required
              prop="zone_id"
            >
              <el-select style="width:135px" v-model="form.zone_id">
                <el-option
                  v-for="item in this.deviceType"
                  :key="item.id"
                  :label="item.name"
                  :value="item.id"
                ></el-option>
              </el-select>
            </el-form-item>
          </el-col>

          <el-col :span="8">
            <el-form-item
              label="机位号:"
              v-show="bedShow"
              required
              prop="bed_number"
            >
              <el-select style="width:135px" v-model="form.bed_number">
                <el-option
                  v-for="item in this.bedNumber"
                  :key="item.bed_id"
                  :label="item.bed_number"
                  :value="item.bed_id"
                ></el-option>
              </el-select>
            </el-form-item>

            <el-form-item label="机位号:" v-show="bedShowTwo">
              <el-input v-model="forms.beds" style="width:135px"></el-input>
            </el-form-item>
          </el-col>
        </el-row>
        <el-row>
          <el-col :span="8">
            <el-form-item label="设备名称:" required prop="device_name">
              <el-input
                style="width:135px"
                v-model="form.device_name"
              ></el-input>
            </el-form-item>
          </el-col>
          <el-col :span="8">
            <el-form-item label="生产厂家:" prop="manufacture_factory">
              <el-input
                style="width:135px"
                v-model="form.manufacture_factory"
              ></el-input>
            </el-form-item>
          </el-col>
          <el-col :span="8">
            <el-form-item label="维修厂家:" prop="service_manufacturer">
              <el-input
                style="width:135px"
                v-model="form.service_manufacturer"
              ></el-input>
            </el-form-item>
          </el-col>
        </el-row>
        <el-row>
          <el-col :span="8">
            <el-form-item label="设备型号:" required prop="unit_type">
              <el-select style="width:135px" v-model="form.unit_type">
                <el-option
                  v-for="item in this.deviceMode"
                  :key="item.id"
                  :label="item.device_mode"
                  :value="item.id"
                ></el-option>
              </el-select>
            </el-form-item>
          </el-col>
          <el-col :span="8">
            <el-form-item label="使用科室:" prop="use_section">
              <el-input
                style="width:135px"
                v-model="form.use_section"
              ></el-input>
            </el-form-item>
          </el-col>
          <el-col :span="8">
            <el-form-item label="科室编号:" prop="section_number">
              <el-input
                style="width:135px"
                v-model="form.section_number"
              ></el-input>
            </el-form-item>
          </el-col>
        </el-row>
        <el-row>
          <el-col :span="8">
            <el-form-item label="购买日期:" prop="buy_date">
              <el-date-picker
                v-model="form.buy_date"
                prefix-icon="none"
                type="date"
                placeholder="请选择"
                format="yyyy-MM-dd"
                value-format="yyyy-MM-dd"
                style="width:135px"
              ></el-date-picker>
            </el-form-item>
          </el-col>
          <el-col :span="8">
            <el-form-item label="安装日期:" prop="install_date">
              <el-date-picker
                v-model="form.install_date"
                prefix-icon="none"
                type="date"
                placeholder="请选择"
                format="yyyy-MM-dd"
                value-format="yyyy-MM-dd"
                style="width:140px"
              ></el-date-picker>
            </el-form-item>
          </el-col>
          <el-col :span="8">
            <el-form-item label="启用日期:" prop="start_date">
              <el-date-picker
                v-model="form.start_date"
                prefix-icon="none"
                type="date"
                placeholder="请选择"
                format="yyyy-MM-dd"
                value-format="yyyy-MM-dd"
                style="width:140px"
              ></el-date-picker>
            </el-form-item>
          </el-col>
        </el-row>
        <el-row>
          <el-col :span="8">
            <el-form-item label="维修工程师:" prop="maintenance_engineer">
              <el-input
                style="width:135px"
                v-model="form.maintenance_engineer"
              ></el-input>
            </el-form-item>
          </el-col>
          <el-col :span="8">
            <el-form-item label="联系电话:" prop="telephone">
              <el-input style="width:135px" v-model="form.telephone"></el-input>
            </el-form-item>
          </el-col>
          <el-col :span="8">
            <el-form-item label="保修期限:" prop="guarantee_date">
              <el-input
                style="width:135px"
                v-model="form.guarantee_date"
              ></el-input>
            </el-form-item>
          </el-col>
        </el-row>
        <el-row>
          <el-col :span="8">
            <el-form-item label="机器状态:" prop="machine_Status">
              <el-select
                style="width:135px"
                v-model="form.machine_status"
                @change="changeMachineStatus"
              >
                <el-option
                  v-for="item in machineStatus"
                  :key="item.id"
                  :label="item.name"
                  :value="item.id"
                ></el-option>
              </el-select>
            </el-form-item>
          </el-col>
          <el-col :span="8">
            <el-form-item
              label="初次使用次数:"
              prop="user_total"
              v-show="totalShow"
            >
              <el-input
                v-model="form.user_total"
                style="width:135px"
              ></el-input>
            </el-form-item>
          </el-col>
          <el-col :span="8" v-show="DisinfectionShow">
            <el-form-item label="消毒方式:">
              <el-select style="width:135px" v-model="form.Disinfection_mode">
                <el-option
                  v-for="item in this.DisinfectionMode"
                  :key="item.id"
                  :label="item.name"
                  :value="item.id"
                ></el-option>
              </el-select>
            </el-form-item>
          </el-col>
          <el-col :span="8">
            <el-form-item label="备注:" prop="remarks">
              <el-input style="width:135px" v-model="form.remarks"></el-input>
            </el-form-item>
          </el-col>
        </el-row>
        <el-row>
          <el-col :span="8">
            <el-form-item label="报废日期:" prop="rubbish_date">
              <el-date-picker
                v-model="form.rubbish_date"
                :disabled="disa"
                prefix-icon="none"
                type="date"
                placeholder="请选择"
                format="yyyy-MM-dd"
                value-format="yyyy-MM-dd"
                style="width:135px"
              ></el-date-picker>
            </el-form-item>
          </el-col>
          <el-col :span="8">
            <el-form-item label="报废原因:" prop="rubbish_reason">
              <el-select style="width:135px" v-model="form.rubbish_reason">
                <el-option
                  v-for="item in this.DisCardResion"
                  :key="item.id"
                  :label="item.name"
                  :value="item.id"
                  :disabled="disa"
                ></el-option>
              </el-select>
            </el-form-item>
          </el-col>
          <el-col :span="8">
            <el-form-item label="使用年限(年)" prop="user_year">
              <el-input style="width:135px" v-model="form.user_year"></el-input>
            </el-form-item>
          </el-col>
        </el-row>
        <el-row>
          <el-col :span="8">
            <el-form-item label="工作时长(h)" prop="work_time">
              <el-input style="width:135px" v-model="form.work_time"></el-input>
            </el-form-item>
          </el-col>

          <el-col :span="8">
            <el-form-item label="反渗模式:" v-show="reverseShow">
              <el-select style="width:135px" v-model="form.revers_mode">
                <el-option
                  v-for="item in this.reverseMode"
                  :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="24">
            <el-form-item
              label="治疗模式:"
              prop="treat_mode"
              v-show="treatShow"
            >
              <el-checkbox-group
                v-model="form.treat_mode"
                @change="changetreatmentmode"
              >
                <el-checkbox
                  style="min-width:50px"
                  v-for="item in treatmentmode"
                  :key="item"
                  :label="item"
                  :value="item"
                ></el-checkbox>
              </el-checkbox-group>
            </el-form-item>
          </el-col>
        </el-row>
        <el-row>
          <el-col :span="4" v-show="allShow">
            <el-checkbox
              :indeterminate="isIndeterminate"
              v-model="checkAll"
              @change="handleCheckAllChange"
              >全选</el-checkbox
            >
          </el-col>
        </el-row>
      </el-form>
      <span slot="footer" class="dialog-footer">
        <el-button @click="delManageInfo() ">取 消</el-button>
        <el-button
          type="primary"
          @click="SaveManageInfo('form')"
          v-show="buttonShow"
          >保存</el-button
        >
        <el-button
          type="primary"
          @click="SaveManageInfoTwo('form')"
          v-show="buttonShowTwo"
          >保存</el-button
        >
        <el-button @click="SaveManageInfoThree('form')" v-show="buttonShowThree"
          >保存</el-button
        >
      </span>
    </el-dialog>
  </div>
</template>

<script>
import {
  getAllSubregion,
  SaveManageInfo,
  SaveManageInfoTwo,
  getAllMode
} from "@/api/manage";
const treatmentmodes = [
  "HD",
  "HDF",
  "HD+HP",
  "HP",
  "HF",
  "SCUF",
  "IUF",
  "HFHD",
  "HFHD+HP",
  "PHF",
  "HFR",
  "HDF+HP",
  "CRRT",
  "腹水回输"
];
export default {
  name: "ManageForm",
  data() {
    return {
      dialogVisible: false,
      checked1: "",
      form: {
        serial_number: "", // 序列号
        device_type: 1, // 设备类型
        bed_number: "", // 床位号
        device_name: "", // 设备名称
        manufacture_factory: "", // 生产厂家
        service_manufacturer: "", // 维修厂家
        unit_type: "", // 设备型号
        use_section: "", // 使用科室
        section_number: "", // 科室编号
        buy_date: "", // 购买日期
        install_date: "", // 安装日期
        start_date: "", // 启用日期
        maintenance_engineer: "", // 维修工程师
        telephone: "", // 联系电话
        guarantee_date: "", // 保修日期
        machine_status: 1, // 机器状态
        user_total: "", // 初次使用次数
        Disinfection_mode: "", // 消毒方式
        remarks: "", // 备注
        rubbish_date: "", // 报废日期
        rubbish_reason: "", // 报废原因
        user_year: "", // 使用年限
        work_time: "", // 工作时长
        revers_mode: "", // 反渗模式
        treat_mode: [],
        treat_type: [], // 治疗模式
        beds: "",
        zone_id:"",
      },
      forms: {
        beds: ""
      },
      deviceType: [],
      bedNumber: [],
      machineStatus: [
        { id: 1, name: "使用机" },
        { id: 2, name: "备用机" },
        { id: 3, name: "急诊机" },
        { id: 4, name: "报废机" }
      ],
      DisinfectionMode: [
        { id: 0, name: "请选择" },
        { id: 1, name: "化学消毒" },
        { id: 2, name: "热消毒" },
        { id: 3, name: "化学消毒+热消毒" }
      ],
      DisCardResion: [
        { id: 0, name: "请选择" },
        { id: 1, name: "超期限报废" },
        { id: 2, name: "故障报废" },
        { id: 3, name: "核定报废" }
      ],
      checkAll: false,
      isIndeterminate: true,
      treatmentmode: treatmentmodes,
      // treatmentmode: [
      //   { id: 1, name: 'zs' },
      //   { id: 2, name: 'ls' },
      //   { id: 3, name: 'ww' }
      // ],
      DeviceType: [
        { id: 1, name: "透析机" },
        { id: 2, name: "水处理机" },
        { id: 3, name: "其他" }
      ],
      reverseMode: [
        { id: 0, name: "请选择" },
        { id: 1, name: "单级反渗" },
        { id: 2, name: "双级反渗" }
      ],
      rules: {
        serial_number: [{ required: true, message: "请填写序列号" }],
        device_name: [{ required: true, message: "请填写设备名称" }],
        device_type: [{ required: true, message: "请填写设备类型" }],
        unit_type: [{ required: true, message: "请填写设备型号" }],
        bed_number: [{ required: true, message: "请填写机位号" }]
        // treat_mode: [{ required: true, message: "请选择至少一种治疗模式" }]
      },
      DisinfectionShow: false,
      reverseShow: false,
      treatShow: true,
      allShow: true,
      totalShow: true,
      bedShow: true,
      bedShowTwo: false,
      disa: true,
      buttonShow: true,
      buttonShowTwo: false,
      buttonShowThree: false,
      deviceMode: []
    };
  },
  methods: {
    open: function() {
      this.dialogVisible = true;
      // this.resetForm("form");
    },
    changetreatmentmode(val) {
      const checkedCount = val.length;
      this.checkAll = checkedCount === 14;
      this.isIndeterminate = checkedCount > 0 && checkedCount < 14;
    },
    handleCheckAllChange(val) {
      this.form.treat_mode = val ? this.treatmentmode : [];
      this.isIndeterminate = false;
    },
    getAllSubregion() {
      getAllSubregion().then(response => {
        if (response.data.state === 1) {
          var zones = response.data.data.zones;
        
          this.deviceType = zones;
          var numbers = response.data.data.numbers;
          var devicenumber = response.data.data.devicenumber;
         
          this.bedNumber = devicenumber;
        }
      });
    },

    changeDeviceType(val) {
      if (val === 1) {
        this.bedShow = true;
        this.totalShow = true;
        this.treatShow = true;
        this.allShow = true;
        this.bedShowTwo = false;
        this.buttonShow = true;
        this.buttonShowTwo = false;
        this.buttonShowThree = false;
      }

      if (val === 2) {
        this.totalShow = false;
        this.DisinfectionShow = true;
        this.allShow = false;
        this.treatShow = false;
        this.reverseShow = true;
        this.bedShow = false;
        this.bedShowTwo = true;
        this.buttonShow = false;
        this.buttonShowTwo = true;
        this.buttonShowThree = false;
      }

      if (val === 3) {
        this.bedShow = false;
        this.totalShow = false;
        this.reverseShow = false;
        this.allShow = false;
        this.treatShow = false;
        this.DisinfectionShow = false;
        this.bedShowTwo = false;
        this.buttonShow = false;
        this.buttonShowTwo = false;
        this.buttonShowThree = true;
      }
    },
    changeMachineStatus(val) {
      if (val === 4) {
        this.disa = false;
      } else {
        this.disa = true;
        this.form.rubbish_date = "";
        this.form.rubbish_reason = "";
      }
    },
    SaveManageInfoThree(formName) {
      if (this.form.bed_number === "") {
        this.form.bed_number = 0;
      }
      const arr1 = [];
      this.form.treat_mode.map((item, index) => {
        const obj = {};
        if (item === "HD") {
          obj.id = 1;
        }
        if (item === "HDF") {
          obj.id = 2;
        }
        if (item === "HD+HP") {
          obj.id = 3;
        }
        if (item === "HP") {
          obj.id = 4;
        }
        if (item === "HF") {
          obj.id = 5;
        }
        if (item === "SCUF") {
          obj.id = 6;
        }
        if (item === "IUF") {
          obj.id = 7;
        }
        if (item === "HFHD") {
          obj.id = 8;
        }
        if (item === "HFHD+HP") {
          obj.id = 9;
        }
        if (item === "PHF") {
          obj.id = 10;
        }
        if (item === "HFR") {
          obj.id = 11;
        }
        if (item === "HDF+HP") {
          obj.id = 12;
        }
        if (item === "CRRT") {
          obj.id = 13;
        }
        if (item === "腹水回输") {
          obj.id = 14;
        }
        arr1.push(obj.id);
      });
     
      this.form.treat_type = arr1;

      var device_type = this.form.device_type;
      var device_types = parseInt(device_type);
      this.form.device_type = device_types;

      if (this.form.rubbish_reason === "") {
        this.form.rubbish_reason = 0;
      }
      var rubbish_reason = this.form.rubbish_reason;
      var rubbish_reasons = parseInt(rubbish_reason);
      this.form.rubbish_reason = rubbish_reasons;

      var machine_status = this.form.machine_status;
      var machine_statuss = parseInt(machine_status);
      this.form.machine_status = machine_statuss;



      if (this.form.Disinfection_mode === "") {
        this.form.Disinfection_mode = 0;
      }
      var disinfecction_modes = this.form.Disinfection_mode;
      var disinfecction_modess = parseInt(disinfecction_modes);
      this.form.Disinfection_mode = disinfecction_modess;

      if (this.form.revers_mode === "") {
        this.form.revers_mode = 0;
      }

      this.$refs[formName].validate(valid => {
        if (valid) {
          SaveManageInfo(this.form).then(response => {
            if (response.data.state === 1) {
              var addmacher = response.data.data.addmacher;
              this.dialogVisible = false;
              this.$message.success("保存成功");
              this.form.bed_number = "";
              this.form.serial_number = "";
              this.form.device_name = "";
              this.form.manufacture_factory = "";
              this.form.service_manufacturer = "";
              this.form.use_section = "";
              this.form.section_number = "";
              this.form.maintenance_engineer = "";
              this.form.telephone = "";
              this.form.user_total = "";
              this.form.remarks = "";
              this.form.user_year = "";
              this.form.work_time = "";
              this.form.unit_type = "";
              this.getAllSubregion();
              this.$emit("getAllMachineInfo");
              this.$forceUpdate();
            } else {
              this.$message.error("添加失败");
            }
          });
        }
      });
    },

    SaveManageInfo(formName) {
      const arr1 = [];
      this.form.treat_mode.map((item, index) => {
        const obj = {};
        if (item === "HD") {
          obj.id = 1;
        }
        if (item === "HDF") {
          obj.id = 2;
        }
        if (item === "HD+HP") {
          obj.id = 3;
        }
        if (item === "HP") {
          obj.id = 4;
        }
        if (item === "HF") {
          obj.id = 5;
        }
        if (item === "SCUF") {
          obj.id = 6;
        }
        if (item === "IUF") {
          obj.id = 7;
        }
        if (item === "HFHD") {
          obj.id = 8;
        }
        if (item === "HFHD+HP") {
          obj.id = 9;
        }
        if (item === "PHF") {
          obj.id = 10;
        }
        if (item === "HFR") {
          obj.id = 11;
        }
        if (item === "HDF+HP") {
          obj.id = 12;
        }
        if (item === "CRRT") {
          obj.id = 13;
        }
        if (item === "腹水回输") {
          obj.id = 14;
        }
        arr1.push(obj.id);
      });
     
      this.form.treat_type = arr1;

      var device_type = this.form.device_type;
      var device_types = parseInt(device_type);
      this.form.device_type = device_types;

      if (this.form.rubbish_reason === "") {
        this.form.rubbish_reason = 0;
      }
      var rubbish_reason = this.form.rubbish_reason;
      var rubbish_reasons = parseInt(rubbish_reason);
      this.form.rubbish_reason = rubbish_reasons;

      var machine_status = this.form.machine_status;
      var machine_statuss = parseInt(machine_status);
      this.form.machine_status = machine_statuss;

 

      if (this.form.Disinfection_mode === "") {
        this.form.Disinfection_mode = 0;
      }
      var disinfecction_modes = this.form.Disinfection_mode;
      var disinfecction_modess = parseInt(disinfecction_modes);
      this.form.Disinfection_mode = disinfecction_modess;

      if (this.form.revers_mode === "") {
        this.form.revers_mode = 0;
      }
      if(this.form.zone_id == ""){
         this.form.zone_id = 0
      }
      this.$refs[formName].validate(valid => {
        if (valid) {
          SaveManageInfo(this.form).then(response => {
            if (response.data.state === 1) {
              var addmacher = response.data.data.addmacher;
              this.dialogVisible = false;
              this.$message.success("保存成功");
              this.form.bed_number = "";
              this.form.serial_number = "";
              this.form.device_name = "";
              this.form.manufacture_factory = "";
              this.form.service_manufacturer = "";
              this.form.use_section = "";
              this.form.section_number = "";
              this.form.maintenance_engineer = "";
              this.form.telephone = "";
              this.form.user_total = "";
              this.form.remarks = "";
              this.form.user_year = "";
              this.form.work_time = "";
              this.form.unit_type = "";
              this.getAllSubregion();
              this.$emit("getAllMachineInfo");
              this.$forceUpdate();
              this.$refs['form'].resetFields()
            } else {
              this.$message.error("该机位号已绑定设备,添加失败");
              this.$refs['form'].resetFields()
            }
          });
        }
      });
    },
    SaveManageInfoTwo(formName) {
      if (this.form.bed_number === "") {
        this.form.bed_number = 0;
      }

      var device_type = this.form.device_type;
      var device_types = parseInt(device_type);
      this.form.device_type = device_types;

      if (this.form.rubbish_reason === "") {
        this.form.rubbish_reason = 0;
      }
      var rubbish_reason = this.form.rubbish_reason;
      var rubbish_reasons = parseInt(rubbish_reason);
      this.form.rubbish_reason = rubbish_reasons;

      var machine_status = this.form.machine_status;
      var machine_statuss = parseInt(machine_status);
      this.form.machine_status = machine_statuss;

      if (this.form.revers_mode === "") {
        this.form.revers_mode = 0;
      }

      var revers_mode = this.form.revers_mode;
      var revers_modes = parseInt(revers_mode);
      this.form.revers_mode = revers_modes;

      if (this.form.Disinfection_mode === "") {
        this.form.Disinfection_mode = 0;
      }
      var disinfecction_modes = this.form.Disinfection_mode;
      var disinfecction_modess = parseInt(disinfecction_modes);
      this.form.Disinfection_mode = disinfecction_modess;
      if(this.form.zone_id == ""){
         this.form.zone_id = 0
      }
    
    
    
      this.$refs[formName].validate(valid => {
        if (valid) {
          SaveManageInfoTwo(this.form, this.forms.beds).then(response => {
            if (response.data.state === 1) {
              var add = response.data.data.addmacher;
          
              this.dialogVisible = false;
              this.$message.success("保存成功");
              this.getAllSubregion();
              this.$emit("getAllMachineInfo");
              this.$forceUpdate();
            }
          });
        }
      });
    },
    getAllMode() {
      getAllMode().then(response => {
        var mode = response.data.data.mode;
        this.deviceMode = mode;
       
      });
    },
    delManageInfo(){
      this.dialogVisible = false
      this.$refs['form'].resetFields()
    }
  },
  created() {
    this.getAllSubregion();
    this.getAllMode();
  }
};
</script>

<style lang="scss" >
.el-form-item__label {
  font-size: 14px;
}
// .el-form-item {
//     margin-bottom: 10px;
// }

.el-checkbox {
  line-height: 26px;
  height: 26px;
}
#manage-form {
  .el-form-item__label {
    width: 100px;
    padding: 0;
  }
  .el-form-item__error {
    //  margin-left: 60px; 
    margin-left: 200px;
  }
  
}
.el-checkbox {
  color: #606266;
  font-weight: 500;
  font-size: 14px;
  cursor: pointer;
  -webkit-user-select: none;
  -moz-user-select: none;
  -ms-user-select: none;
  user-select: none;
  margin-right: 26px;
}
</style>
<!-- <style lang="scss" scoped>
#manage-form {
  .el-form-item__label {
    width: 100px;
    padding: 0;
  }
  .el-form-item__error {
     /* margin-left: 60px; */
    margin-left: 200px;
  }
}
  
</style> -->