lims_college/frontend_web/src/views/instrument/maintainlog/_opera/add.vue

<template>
  <div>
    <el-dialog title="添加记录"
               :visible.sync="dialogvisible"
               width="50%"
               :before-close="handleCloseAdd">
      <el-form size="mini"
               :model="testlistform"
               :rules="rulestestlistform"
               label-width="130px"
               height="600px"
               ref="testlistform">
        <el-row :gutter="20"
                class="donorsaddformcss">

          <el-col :span="24">
            <el-form-item label="设备名称"
                          required
                          prop="InstrumenId"
                          label-width="80px">
              <el-select ref="InstrumenId"
                         v-model="testlistform.InstrumenId"
                         placeholder="设备名称"
                         style="width: 100%">
                <el-option v-for="item in InstrumenNamelist"
                           :key="item.id"
                           :label="item.name"
                           :value="item.id">
                  <span style="float: left">{{ item.name }}</span>
                  <span style="float: right; color: #8492a6; font-size: 13px">{{ item.code }}&nbsp;{{item.brand}}&nbsp;{{item.model}}</span>
                </el-option>
              </el-select>
            </el-form-item>
          </el-col>

          <el-col :span="24">
            <el-form-item label="操作人"
                          required
                          prop="OperaUser"
                          label-width="80px">
              <el-input v-model="testlistform.OperaUser"
                        placeholder="请输入操作人"
                        style="width:100%"></el-input>
            </el-form-item>
          </el-col>

          <el-col :span="24">
            <el-form-item label="操作类型"
                          required
                          prop="OperaTpye"
                          label-width="80px">
              <el-select ref="reftube"
                         v-model="testlistform.OperaTpye"
                         placeholder="请输入操作类型"
                         style="width:100%">
                <el-option v-for="item in classificationlist"
                           :label="item.Value"
                           :value="item.Value"
                           :key="item.Id">
                </el-option>
              </el-select>

            </el-form-item>
          </el-col>

          <el-col :span="24">
            <el-form-item label="操作日期"
                          label-width="80px"
                          prop="OperaOn">
              <el-date-picker v-model="testlistform.OperaOn"
                              type="datetime"
                              style="width:100%"
                              placeholder="请选择操作日期">
              </el-date-picker>
            </el-form-item>
          </el-col>

          <el-col :span="24">
            <el-form-item label="操作说明"
                          label-width="80px">
              <el-input v-model="testlistform.OperaRemark"
                        type="textarea"
                        :rows=3
                        placeholder="请输入操作说明"
                        style="width:100%"></el-input>
            </el-form-item>
          </el-col>

          <!-- <el-col :span="24">
            <el-form-item label="附件上传"
                          label-width="80px">
              <el-button size="mini"
                         type="primary"
                         style="width: 100px"
                         @click="maintainlogattr()">上传附件</el-button>
            </el-form-item>
          </el-col> -->

        </el-row>
        <el-row>
          <el-col :span="12">
            <template>
              <el-row>
                <el-col :span="24"
                        v-for="(v,K) in maintainlogattrlist"
                        :key="v">
                  <a>{{ v.FileName }}</a>
                  <span>
                    <el-button size="mini"
                               type="text"
                               icon="el-icon-delete"
                               title="删除"
                               @click="deletedata(K)"></el-button>
                  </span>
                </el-col>
              </el-row>
            </template>
            <!-- </div>
            </el-form-item> -->
          </el-col>
        </el-row>
      </el-form>
      <span slot="footer">
        <el-button size="mini"
                   type="primary"
                   @click="getInstrumenCode('testlistform')">保存</el-button>
        <el-button size="mini"
                   @click="handleCloseAdd">关闭</el-button>
      </span>
    </el-dialog>

    <maintainlogdialog @close="attachmentclose"
                       :attrinfo="attrinfo"
                       :visible.sync="dialoguploadVisible"
                       :modal="false"></maintainlogdialog>
  </div>
</template>

<script>
// import {
//   mapGetters
// } from 'vuex'
import {
  maintainsavedata,
  selectinstrument,
  InstrumenCode,
  savedataOne
} from '@/api/instrumentroom'
import maintainlogdialog from '@/components/samples/maintainlogdialog'
export default {
  name: 'materialdetect',
  props: {
    classificationlist: Array
  },
  components: {
    maintainlogdialog
  },
  data () {
    return {
      dialogvisible: false,
      waituploads: [], // 等待上传的附件列表
      formtype: '1',
      dialoguploadVisible: false, // 上传附 件
      testlistform: {
        InstrumenId: '',
        InstrumenName: '',
        InstrumenCode: '',
        OperaRemark: '',
        OperaTpye: '',
        OperaUser: '',
        OperaOn: new Date(),
        uploadeds: [], // 已上传的附件
        TypeCode: 2 // 1 确认及报废  2 维护保养
      },
      attrinfo: {
        ID: 0
      }, // 附件参数信息
      ID: '',
      InstrumenNamelist: [],
      maintainlogattrlist: [],

      rulestestlistform: {

        InstrumenId: [{
          required: true,
          message: '请输入设备名称',
          trigger: 'blur'
        }],
        OperaTpye: [{
          required: true,
          message: '请输入操作类型',
          trigger: 'blur'
        }],
        OperaUser: [{
          required: true,
          message: '请输入操作人',
          trigger: 'blur'
        }],
        OperaOn: [{
          required: true,
          message: '请输入品牌名称',
          trigger: 'blur'
        }]

      }
    }
  },
  mounted () {
    selectinstrument()
    InstrumenCode()
    if (this.$route.query.pid) {
      let pid = parseInt(this.$route.query.pid)
      if (pid > 0) {
        this.testlistform.InstrumenId = pid
      }
    }
    this.getselectinstrument()
  },
  methods: {
    // 保存
    savedata () {
      let _this = this
      _this.testlistform.TypeCode = 2
      _this.testlistform.InstrumenName = _this.$refs.InstrumenId.selectedLabel
      _this.testlistform.InstrumenId = parseInt(_this.testlistform.InstrumenId)
      maintainsavedata(_this.testlistform)
        // _this.$axios.post('instrument/addinstrumenMaintainLog', _this.testlistform)
        .then(res => {
          // response
          if (res.info.code === 0) {
            // if (this.maintainlogattrlist !== '') {
            //   _this.savedataOne(res.info.item)
            // }

            _this.$message({
              type: 'success',
              message: res.info.message
            })
          } else {
            _this.$message({
              type: 'warning',
              message: res.info.message
            })
          }
          this.handleCloseAdd()
        })
        .catch(err => {
          // handle error
          console.error(err)
        })
    },

    maintainlogattr () {
      let _this = this
      _this.attrinfo.ID = _this.ID
      _this.dialoguploadVisible = true
    },
    attachmentclose (attrlist) {
      let _this = this
      for (let i = 0; i < attrlist.length; i++) {
        _this.maintainlogattrlist.push(attrlist[i])
      }
    },
    // 获取设备名称下拉
    getselectinstrument () {
      let _this = this
      selectinstrument()
        // _this.$axios.get('/instrument/selectlist', {})
        .then(res => {
          // response
          _this.InstrumenNamelist = res.info.items
        })
    },
    // 根据设备名称ID查询 设备编号
    getInstrumenCode (formName) {
      let _this = this
      this.$refs[formName].validate((valid) => {
        if (valid) {
          InstrumenCode(_this.testlistform.InstrumenId)
            .then(function (response) {
              _this.testlistform.InstrumenCode = response.info.items.Code
              console.log('---response.info.items.Code----', response.info.items.Code)
              _this.savedata()
            })
            .catch(err => {
              // handle error
              console.error(err)
            })
        } else {
          return false
        }
      })
    },
    // 保存附件
    savedataOne (pid) {
      let _this = this
      let params = {
        AttachmodelList: _this.maintainlogattrlist,
        MaintainLogId: pid

      }
      savedataOne(params)
        // _this.$axios.put('/instrument/savesampleattach', params)
        .then(res => {
          if (res.info.code === 0) {
            _this.$message({
              type: 'success',
              message: res.info.message
            })
          } else {
            _this.$message({
              type: 'warning',
              message: res.info.message
            })
          }
        })
        .catch(() => { })
    },

    deletedata (index) {
      let _this = this
      _this.$confirm('此操作将永久删除该数据, 是否继续?', '提示', {
        confirmButtonText: '确定',
        cancelButtonText: '关闭',
        type: 'warning'
      })
        .then(() => {
          this.maintainlogattrlist.splice(index, 1)
        })
        .catch(() => { })
    },
    handleCloseAdd () {
      this.$emit('closeAddDialog')
      this.testlistform.InstrumenId = ''
      this.testlistform.OperaUser = ''
      this.testlistform.OperaTpye = ''
      this.testlistform.OperaRemark = ''
      this.maintainlogattrlist = ''
      this.$refs['testlistform'].resetFields()
    }
  }
}

</script>

<style lang="scss">
.button {
  padding: 0;
  float: right;
}

.donorsaddformcss .el-col-8 {
  height: 58px;
}

.maintainlog div {
  margin-top: -4px;
  color: #4f94cd;
  cursor: pointer;
}

.maintainlog div span {
  float: right;
}
</style>