licp
2024-08-20 6f30bbf4f118d3357d1e6e503aa986227e2cc6ea
src/components/do/a6-device/files.vue
@@ -3,8 +3,20 @@
    <div class="page-header">
      <h4><span class="line"></span><span>设备档案</span></h4>
      <div class="btns">
        <el-button type="primary" size="small">修订档案</el-button>
        <el-button type="primary" size="small">添加附件</el-button>
        <el-button type="primary" size="small" @click="dialogVisible=true" style="margin-right: 16px;">修订档案</el-button>
        <!-- <el-button type="primary" size="small">添加附件</el-button> -->
        <el-upload
            class="upload-demo"
            :action="action"
            :headers="headers"
            :show-file-list="false"
            :limit="1"
            :before-upload="beforeUpload"
            :on-success="handleSuccess"
            ref="upload"
            :on-error="onError">
            <el-button size="small" type="primary" :loading="inLoading">添加附件</el-button>
          </el-upload>
      </div>
    </div>
    <el-divider></el-divider>
@@ -136,6 +148,152 @@
            :url="$api.auxiliaryWorkingHoursDay.selectAuxiliaryWorkingHoursDay"
            :delUrl="$api.auxiliaryWorkingHoursDay.deleteAuxiliaryWorkingHoursDay" :componentData="componentData" :key="upIndex" style="min-height: 400px;"/>
    </div>
    <el-dialog title="档案修订" :visible.sync="dialogVisible" width="70%" :before-close="handleClose">
         <el-row style="display:flex;justify-content: space-around;">
            <!-- 左边布局 -->
            <el-col :span="7">
               <el-col>
                  <!-- 图片 -->
                  <el-image class="img" style="width:100%;height: 320px;marginBottom:16px"
                     :src="javaApi+'/img/'+formData.imageUpload">
                     <div slot="error" class="image-error" style="width: calc(100% -2px);
            height: 318px;
            border-radius: 16px;
            display: flex;
            align-items: center;
            justify-content: center;
            border: 1px solid #EEEEEE;">
                        <i class="el-icon-picture-outline" style="font-size:60px;color:#666666;"></i>
                     </div>
                  </el-image>
                  <!-- 表单 -->
                  <el-form :model="formData" label-width="120px">
                     <el-form-item label="仪器名称:" required>
                     <el-input v-model="formData.deviceName" size="small"></el-input>
                              </el-form-item>
                     <el-form-item label="仪器名称EN:" required>
                        <el-input v-model="formData.enDeviceName" size="small"></el-input>
                                 </el-form-item>
                     <el-form-item label="规格型号:" required>
                        <el-input v-model="formData.specificationModel" size="small"></el-input>
                                 </el-form-item>
                     <el-form-item label="生产厂家:">
                        <el-input v-model="formData.manufacturer" size="small"></el-input>
                                 </el-form-item>
                              </el-form>
                           </el-col>
                        </el-col>
                        <!-- 中间布局 -->
                        <el-col :span="7">
                           <el-form :model="formData" label-width="116px">
                              <el-form-item label="校准服务机构:">
                     <el-input v-model="formData.calibrationServices" size="small"></el-input>
                     </el-form-item>
                     <el-form-item label="出厂编号:">
                     <el-input v-model="formData.factoryNo" size="small"></el-input>
                     </el-form-item>
                     <el-form-item label="管理编号:" required>
                     <el-input v-model="formData.managementNumber" size="small"></el-input>
                     </el-form-item>
                     <el-form-item label="购置日期:">
                                 <el-date-picker style="width:100%" v-model="formData.acquisitionDate" type="date"
                                    format="yyyy-MM-dd" value-format="yyyy-MM-dd HH:mm:ss" size="small" placeholder="选择日期">
                                 </el-date-picker>
                              </el-form-item>
                     <el-form-item label="启用日期:" required>
                                 <el-date-picker style="width:100%" v-model="formData.activationDate" type="date"
                                    format="yyyy-MM-dd" value-format="yyyy-MM-dd HH:mm:ss" size="small" placeholder="选择日期">
                                 </el-date-picker>
                              </el-form-item>
                     <el-form-item label="管理人:">
                     <el-select v-model="formData.equipmentManager" placeholder="请选择" size="small" style="width:100%">
                        <el-option v-for="item in responsiblePersonList" :key="item.value" :label="item.label"
                        :value="item.value">
                        </el-option>
                     </el-select>
                     </el-form-item>
                     <el-form-item label="存放点:">
                     <el-input v-model="formData.storagePoint" size="small"></el-input>
                     </el-form-item>
                     <el-form-item label="技术指标:">
                     <el-input v-model="formData.technicalIndicators" :rows="7" type="textarea" size="small"></el-input>
                     </el-form-item>
               </el-form>
            </el-col>
            <!-- 右边布局 -->
            <el-col :span="7">
               <el-form :model="formData" label-width="140px" ref="ruleForm">
            <!-- 实验室列表 -->
            <el-form-item label="所属部门:">
              <el-select v-model="formData.subordinateDepartmentsId" placeholder="请选择" size="small" style="width:100%">
                <el-option v-for="item in subordinateDepartmentsList" :key="item.value" :label="item.label"
                  :value="item.value">
                </el-option>
              </el-select>
            </el-form-item>
            <el-form-item label="检测项目:">
              <el-cascader
              v-model="formData.insProductIds"
              :options="options"
              :show-all-levels="false"
              :props="props"
              placeholder="请选择" size="small"
              style="width:100%;"
              :collapse-tags="true"
              separator=","
           filterable
              clearable></el-cascader>
            </el-form-item>
            <el-form-item label="最近校准日期:">
                     <el-date-picker style="width:100%" v-model="formData.latestTraceability" format="yyyy-MM-dd"
                        value-format="yyyy-MM-dd" type="date" size="small" placeholder="选择日期">
                     </el-date-picker>
                  </el-form-item>
            <el-form-item label="下次校准日期:">
                     <el-date-picker style="width:100%" v-model="formData.latestTraceability" format="yyyy-MM-dd"
                        value-format="yyyy-MM-dd" type="date" size="small" placeholder="选择日期">
                     </el-date-picker>
                  </el-form-item>
            <el-form-item label="设备类型:">
              <el-select v-model="formData.largeCategory" placeholder="请选择" size="small" style="width:100%">
                <el-option v-for="item in equipmentList" :key="item.value" :label="item.label"
                  :value="item.value">
                </el-option>
              </el-select>
            </el-form-item>
            <el-form-item label="单价(万元):">
              <el-input v-model="formData.unitPrice" size="small"></el-input>
            </el-form-item>
            <el-form-item label="当前状态:" required>
                     <el-select v-model="formData.deviceStatus" placeholder="请选择" size="small" style="width:100%">
                        <el-option v-for="item in deviceStatusList" :key="item.value" :label="item.label" :value="item.value">
                        </el-option>
                     </el-select>
                  </el-form-item>
            <el-form-item label="校准周期(月):" required>
              <el-input v-model="formData.calibrationDate" size="small"></el-input>
            </el-form-item>
                  <el-form-item label="图片:">
                     <div
                        style="border: 1px solid #DCDFE6;border-radius:4px;height:32px;lineHeight:32px;display:flex;justify-content: space-around;font-size: 13px;">
                        <div v-show="formData.imageName" class="picName">{{formData.imageName}}</div>
                        <el-upload :action="action" :on-success="handleSuccessUpImg2" :show-file-list="false"
                           accept='image/jpg,image/jpeg,image/png' :headers="headers" :on-change="beforeUpload"
                           :on-error="onError" ref='upload'>
                           <el-button type="text" style="height:30px;padding-top:8px">上传</el-button>
                        </el-upload>
                     </div>
                  </el-form-item>
               </el-form>
            </el-col>
         </el-row>
         <span slot="footer" class="dialog-footer">
            <el-row>
               <el-button @click="handleClose">取 消</el-button>
               <el-button type="primary" @click="submitForm" :loading="upLoad">确 定</el-button>
            </el-row>
         </span>
      </el-dialog>
  </div>
</template>
@@ -240,10 +398,36 @@
        requiredUp: []
         },
      upIndex:0,
      dialogVisible:false,
      inLoading:false,
      form: {
        value1:''
      }
      },
      upLoad:false,
      formData:{},
      responsiblePersonList:[],
      subordinateDepartmentsList:[],
      options:[],
      equipmentList:[],
      deviceStatusList:[],
      props: { multiple: true,emitPath:false,value:'id',label:'name' },
    }
  },
  computed: {
    headers() {
      return {
        'token': sessionStorage.getItem('token')
      }
    },
    action() {
      return this.javaApi + this.$api.deviceScope.uploadFile
    }
  },
  mounted(){
    this.selectDevicePrincipal()
    this.obtainItemParameterList()
    this.getInsProductIds()
    this.selectEnumByCategory()
  },
  methods: {
    handleData(m){
@@ -252,7 +436,161 @@
      }else{
        return '-'
      }
    }
    },
    handleClose(){
      this.dialogVisible = false
    },
    handleSuccess(response,){
      this.inLoading = false;
      if (response.code == 200) {
        this.$message.success('上传成功')
        // 更新页面
      }else{
        this.$message.error(response.message)
      }
    },
    submitForm(){
      if(!this.formData.deviceName){
          this.$message.error('未输入仪器名称')
          return
        }
        if(!this.formData.enDeviceName){
          this.$message.error('未输入仪器名称EN')
          return
        }
        if(!this.formData.specificationModel){
          this.$message.error('未输入规格型号')
          return
        }
        if(!this.formData.managementNumber){
          this.$message.error('未输入管理编号')
          return
        }
        if(!this.formData.activationDate){
          this.$message.error('未输入启用日期')
          return
        }
        if(this.formData.deviceStatus==='' || this.formData.deviceStatus===null){
          this.$message.error('未选择当前状态')
          return
        }
        if(!this.formData.calibrationDate){
          this.$message.error('未输入校准周期(月)')
          return
        }
            delete this.formData.createTime
            delete this.formData.updateTime
            delete this.formData.createUser
            delete this.formData.updateUser
        this.formData.insProductIds = this.formData.insProductIds?this.formData.insProductIds.join():''
        this.upLoad = true;
            this.$axios.post(this.$api.deviceScope.upDeviceParameter, this.formData, {
               headers: {
                  'Content-Type': 'application/json'
               }
            }).then(res => {
               if (res.code === 201) {
                  this.upLoad = false
                  return
               }
               this.$message.success('修改成功')
               this.upLoad = false
               this.dialogVisible = false
            }).catch(e => {
               this.$message.error('修改失败')
               this.dialogVisible = false
               this.upLoad = false
            })
    },
    handleSuccessUpImg2(response) {
      if (response.code == 200) {
        this.$nextTick(() => {
          this.formData.imageUpload = response.data.url;
          this.formData.imageName = response.data.name;
        })
      }
    },
    beforeUpload(file) {
      if (file.size > 1024 * 1024 * 10) {
        this.$message.error('上传文件不超过10M');
        this.$refs.upload.clearFiles()
        return false;
      } else {
        return true;
      }
    },
    onError(err, file, fileList) {
      this.$message.error('上传失败')
      this.$refs.upload.clearFiles()
    },
    // 获取负责人列表
    selectDevicePrincipal() {
      this.$axios.get(this.$api.deviceScope.selectDevicePrincipal).then(res => {
        let data = []
        res.data.forEach(a => {
          data.push({
            label: a.name,
            value: a.id
          })
        })
        this.responsiblePersonList = data
      })
    },
    obtainItemParameterList() {
      this.$axios.get(this.$api.laboratoryScope.obtainItemParameterList).then(res => {
        let data = []
        res.data.forEach(a=>{
          data.push({
            label: a.laboratoryName,
            value: a.id
          })
        })
        this.subordinateDepartmentsList = data
      })
    },
    getInsProductIds(){
      this.$axios.post(this.$api.capacityScope.getInsProduction).then(res => {
        this.options = res.data.map((m,i)=>{
          m.id = m.name;
          return m
        })
        this.options.forEach(item=>{
          if(item.children.length==0){
            item.children = null;
          }else{
            item.children.forEach(m=>{
              if(m.children.length==0){
                m.children = null;
              }else{
                m.children.forEach(n=>{
                  if(n.children&&n.children.length==0){
                    n.children = null;
                  }
                })
              }
            })
          }
        })
      })
    },
    // 获取字典
    selectEnumByCategory() {
      this.$axios.post(this.$api.enums.selectEnumByCategory, {
        category: "设备状态"
      }).then(res => {
        this.deviceStatusList = res.data
        this.deviceStatusList.forEach(a=>{
          if(!isNaN(a.value)){
            a.value = parseInt(a.value)
          }
        })
      })
      this.$axios.post(this.$api.enums.selectEnumByCategory, {
        category: "设备分类"
      }).then(res => {
        this.equipmentList = res.data
      })
    },
  }
}
</script>
@@ -304,4 +642,8 @@
  margin-right: 20px;
  color: #999;
}
.btns {
  display: flex;
  align-items: center;
}
</style>