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

<template>
  <div id="manage-form">
    <el-dialog
      title="新增设备"
      :visible.sync="dialogVisible"
      width="52%"
      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="机位号:"
              required
              prop="bed_number"
              v-show="bedShow"
            >
              <el-select style="width:135px" v-model="form.bed_number">
                <el-option
                  v-for="item in this.bedNumber"
                  :key="item.id"
                  :label="item.number"
                  :value="item.id"
                ></el-option>
              </el-select>
            </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-input style="width:135px" v-model="form.unit_type"></el-input>
            </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:140px"
              ></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.id"
                  :label="item.name"
                  :value="item.id"
                ></el-checkbox> -->
                <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="dialogVisible = false">取 消</el-button>
        <el-button type="primary" @click="SaveManageInfo('form')"
          >保存</el-button
        >
      </span>
    </el-dialog>
  </div>
</template>

<script>
import { getAllSubregion, SaveManageInfo } 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: [] // 治疗模式
      },
      fucks: [
        { id: 1, name: 'zs' },
        { id: 2, name: 'ls' },
        { id: 3, name: 'ww' }
      ],
      deviceType: [],
      bedNumber: [],
      machineStatus: [
        { id: 1, name: '使用机' },
        { id: 2, name: '备用机' },
        { id: 3, name: '急诊机' },
        { id: 4, name: '报废机' }
      ],
      DisinfectionMode: [
        { 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: 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,
      disa: true
    }
  },
  methods: {
    open: function() {
      this.dialogVisible = true
      // this.resetForm("form");
    },
    changetreatmentmode(val) {
      // console.log('val是什么-------------------', val)
      const checkedCount = val.length
      this.checkAll = checkedCount === 14
      this.isIndeterminate = checkedCount > 0 && checkedCount < 14
    },
    handleCheckAllChange(val) {
      console.log('val=================', val)
      console.log('是什么', this.form.treat_mode)
      console.log('hh', this.treatmentmode)
      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
          var device = [{ id: 0, number: '请选择' }]
          for (let index = 0; index < devicenumber.length; index++) {
            const item = devicenumber[index]
            device.push({ id: item.id, number: item.number })
          }
          this.bedNumber = device
        }
      })
    },

    changeDeviceType(val) {
      if (val === 1) {
        this.bedShow = true
        this.totalShow = true
        this.treatShow = true
        this.allShow = true
      }

      if (val === 2) {
        this.totalShow = false
        this.DisinfectionShow = true
        this.allShow = false
        this.treatShow = false
        this.reverseShow = true
        this.bedShow = true
      }

      if (val === 3) {
        this.bedShow = false
        this.totalShow = false
        this.reverseShow = false
        this.allShow = false
        this.treatShow = false
        this.DisinfectionShow = false
      }
    },
    changeMachineStatus(val) {
      if (val === 4) {
        this.disa = false
      } else {
        this.disa = true
        this.form.rubbish_date = ''
        this.form.rubbish_reason = ''
      }
    },
    SaveManageInfo(formName) {
      console.log('====', this.form.treat_mode)
      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_mode.map((item, index) => {
      //   const obj = {};
      //   obj.id = index + 1;
      //   // obj.name = item
      //   arr1.push(obj.id);
      // });
      console.log('arrr1', arr1)
      this.form.treat_type = arr1

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

      console.log('机号是什么东西', this.form.bed_number)

      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.bed_number === '') {
        this.form.bed_number = 0
      }
      var bed_numbers = this.form.bed_number
      var bed_numberss = parseInt(bed_numbers)
      this.form.bed_number = bed_numberss
      console.log('购买日期', this.form.buy_date)
      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.getAllSubregion()
              this.$emit('getAllMachineInfo')
            } else {
              this.$message.error('添加失败')
            }
          })
        }
      })
    }
  },
  created() {
    this.getAllSubregion()
  }
}
</script>

<style lang="scss">
.el-form-item__label {
  width: 100px;
  font-size: 14px;
}
// .el-form-item {
//     margin-bottom: 10px;
// }
.el-form-item__error {
  margin-left: 110px;
}
.el-checkbox {
  line-height: 26px;
  height: 26px;
}
</style>