feat(device): 设备核查计划附件上传与运行记录导出调整

吴羡

2 天以前 d2eed0eb7c2f9537d5eaab7ccc3b6ab258959227

 src/views/CNAS/resourceDemand/device/component/record.vue

@@ -5,51 +5,67 @@
      <el-form :model="search" ref="search" size="small" :inline="true">
        <el-form-item label="样品编号">
          <el-input v-model="search.sampleCode" clearable placeholder="请输入" size="small"
                    @keyup.enter="getTableList(clickNodeVal.value)"></el-input>
                    @keyup.enter="getTableList()"></el-input>
        </el-form-item>
        <el-form-item label="管理编号">
        <el-form-item label="设备编号">
          <el-input v-model="search.managementNumber" clearable placeholder="请输入" size="small"
                    @keyup.enter="getTableList(clickNodeVal.value)"></el-input>
                    @keyup.enter="getTableList()"></el-input>
        </el-form-item>
        <el-form-item>
          <el-button size="small" type="primary" @click="getTableList(clickNodeVal.value)">查询</el-button>
          <el-button size="small" type="primary" @click="getTableList()">查询</el-button>
          <el-button size="small" @click="resetSearch">重置</el-button>
        </el-form-item>
      </el-form>
      <div>
        <el-button v-if="isMenuList !== 1" size="small" type="primary" @click="dialogVisible = true, openAdd()">新 建</el-button>
        <el-button :loading="outLoading" size="small" type="primary" @click="openHandleOut">导 出</el-button>
      </div>
    </div>
    <div>
      <el-table ref="Recordtable" :data="formParamList" height="calc(100vh - 20em)"
                v-loading="tableLoading"
 border>
        <!-- 表格列 -->
        <el-table-column label="序号" type="index" width="70" align="center">
          <template v-slot="scope">
      <el-table ref="Recordtable" :data="formParamList" height="calc(100vh - 25em)"
                v-loading="tableLoading" border>
        <el-table-column label="序号" type="index" width="60" align="center">
          <template #default="scope">
            <span>{{ (search.current - 1) * search.size + scope.$index + 1 }}</span>
          </template>
        </el-table-column>
        <el-table-column label="样品编号" min-width="180" prop="sampleCode" />
        <el-table-column label="设备名称" min-width="150" prop="deviceName" />
        <el-table-column label="管理编号" min-width="150" prop="managementNumber" />
        <el-table-column label="使用前" min-width="120" prop="useBefore">
          <template v-slot="scope">
            {{ scope.row.useBefore === 1 ? '良好' : '异常' }}
        <el-table-column label="设备名称" min-width="140" prop="deviceName" show-overflow-tooltip />
        <el-table-column label="设备型号" min-width="120" prop="specificationModel" show-overflow-tooltip />
        <el-table-column label="设备编号" min-width="130" prop="managementNumber" />
        <el-table-column label="使用日期" width="110" align="center">
          <template #default="scope">
            {{ formatDateCell(scope.row.useStartDate) }}
          </template>
        </el-table-column>
        <el-table-column label="使用后" min-width="120" prop="useAfter">
          <template v-slot="scope">
            {{ scope.row.useAfter === 1 ? '良好' : '异常' }}
        <el-table-column label="样品编号" min-width="150" prop="sampleCode">
          <template #default="scope">
            <span>{{ scope.row.sampleCode }}</span>
            <el-tooltip v-if="scope.row.orderCode" :content="'关联原始记录：' + scope.row.orderCode" placement="top">
              <lims-icon class="link-icon" name="el-icon-link"></lims-icon>
            </el-tooltip>
          </template>
        </el-table-column>
        <!--        <el-table-column label="异常情况" min-width="120" prop="abnormal" />-->
        <el-table-column label="使用开始日期" min-width="170" prop="useStartDate" :formatter="formatDateCell" />
        <el-table-column label="使用结束日期" min-width="170" prop="useEndDate" :formatter="formatDateCell" />
        <el-table-column label="使用人" min-width="120" prop="usePerson" />
        <el-table-column label="备注" min-width="120" prop="remark" />
        <!-- 操作按钮 -->
        <el-table-column label="时间（24小时制）" align="center">
          <el-table-column label="开始" width="90" align="center">
            <template #default="scope">{{ formatTimeCell(scope.row.useStartDate) }}</template>
          </el-table-column>
          <el-table-column label="结束" width="90" align="center">
            <template #default="scope">{{ formatTimeCell(scope.row.useEndDate) }}</template>
          </el-table-column>
        </el-table-column>
        <el-table-column label="设备状况" align="center">
          <el-table-column label="使用前" width="80" align="center">
            <template #default="scope">{{ formatStatus(scope.row.useBefore) }}</template>
          </el-table-column>
          <el-table-column label="使用后" width="80" align="center">
            <template #default="scope">{{ formatStatus(scope.row.useAfter) }}</template>
          </el-table-column>
        </el-table-column>
        <el-table-column label="环境条件" align="center">
          <el-table-column label="℃" width="80" align="center" prop="temperature" />
          <el-table-column label="%RH" width="80" align="center" prop="humidity" />
        </el-table-column>
        <el-table-column label="使用人" width="100" prop="usePerson" />
        <el-table-column label="备注" min-width="140" prop="remark" show-overflow-tooltip />
        <el-table-column fixed="right" label="操作" width="150" align="center">
          <template #default="scope">
            <el-button size="small" link type="primary" @click="showDetailsDialog('edit', scope.row)">编辑</el-button>
@@ -63,30 +79,57 @@
        @current-change="handleCurrentChange" background>
      </el-pagination>
    </div>
    <el-dialog v-model="dialogVisible" title="仪器设备使用记录表" top="5vh" width="55%">
      <el-form ref="form" :model="form" label-width="130px">
        <el-row>
          <el-col :span="24">
            <el-form-item :rules="[{ required: true, message: '样品编号', trigger: 'blur' }]" label="样品编号:"
    <el-dialog v-model="dialogVisible" title="仪器设备运行记录" top="5vh" width="70%">
      <el-form ref="form" :model="form" label-width="105px">
        <el-row :gutter="16">
          <el-col :span="8">
            <el-form-item label="设备名称:">
              <el-input v-model="form.deviceName" disabled size="small"></el-input>
            </el-form-item>
          </el-col>
          <el-col :span="8">
            <el-form-item label="设备型号:">
              <el-input v-model="form.specificationModel" disabled size="small"></el-input>
            </el-form-item>
          </el-col>
          <el-col :span="8">
            <el-form-item label="设备编号:">
              <el-input v-model="form.managementNumber" disabled size="small"></el-input>
            </el-form-item>
          </el-col>
          <el-col :span="12">
            <el-form-item :rules="[{ required: true, message: '请选择使用日期', trigger: 'change' }]" label="使用日期:"
              prop="useDate">
              <el-date-picker v-model="form.useDate" :disabled="operationType === 'view'" format="YYYY-MM-DD"
                placeholder="选择使用日期" size="small" style="width: 100%" type="date" value-format="YYYY-MM-DD"
                :disabled-date="disabledDate">
              </el-date-picker>
            </el-form-item>
          </el-col>
          <el-col :span="12">
            <el-form-item :rules="[{ required: true, message: '请输入样品编号', trigger: 'blur' }]" label="样品编号:"
              prop="sampleCode">
              <el-input v-model="form.sampleCode" :disabled="operationType === 'view'" size="small"
                style="width: 100%;"></el-input>
              <el-input v-model="form.sampleCode" :disabled="operationType === 'view'" size="small"></el-input>
            </el-form-item>
          </el-col>
          <el-col :span="12">
            <el-form-item label="设备名称:" required>
              <el-input v-model="form.deviceName" :disabled="operationType === 'view'" size="small"
                style="width: 100%;"></el-input>
            <el-form-item :rules="[{ required: true, message: '请选择开始时间', trigger: 'change' }]" label="开始时间:"
              prop="useStartTime">
              <el-time-picker v-model="form.useStartTime" :disabled="operationType === 'view'" format="HH:mm"
                placeholder="选择开始时间" size="small" style="width: 100%" value-format="HH:mm:ss">
              </el-time-picker>
            </el-form-item>
          </el-col>
          <el-col :span="12">
            <el-form-item label="管理编号:" required>
              <el-input v-model="form.managementNumber" :disabled="operationType === 'view'" size="small"
                style="width: 100%;"></el-input>
            <el-form-item :rules="[{ required: true, message: '请选择结束时间', trigger: 'change' }]" label="结束时间:"
              prop="useEndTime">
              <el-time-picker v-model="form.useEndTime" :disabled="operationType === 'view'" format="HH:mm"
                placeholder="选择结束时间" size="small" style="width: 100%" value-format="HH:mm:ss">
              </el-time-picker>
            </el-form-item>
          </el-col>
          <el-col :span="12">
            <el-form-item :rules="[{ required: true, message: '请选择使用前', trigger: 'change' }]" label="使用前:"
            <el-form-item :rules="[{ required: true, message: '请选择使用前状态', trigger: 'change' }]" label="使用前:"
              prop="useBefore">
              <el-radio-group v-model="form.useBefore" :disabled="operationType === 'view'">
                <el-radio :value="1">良好</el-radio>
@@ -95,7 +138,7 @@
            </el-form-item>
          </el-col>
          <el-col :span="12">
            <el-form-item :rules="[{ required: true, message: '请选择使用后', trigger: 'change' }]" label="使用后:"
            <el-form-item :rules="[{ required: true, message: '请选择使用后状态', trigger: 'change' }]" label="使用后:"
              prop="useAfter">
              <el-radio-group v-model="form.useAfter" :disabled="operationType === 'view'">
                <el-radio :value="1">良好</el-radio>
@@ -104,22 +147,31 @@
            </el-form-item>
          </el-col>
          <el-col :span="12">
            <el-form-item :rules="[{ required: true, message: '请输入使用日期', trigger: 'blur' }]" label="使用日期:"
              prop="useDateList">
              <el-date-picker v-model="form.useDateList" :disabled="operationType === 'view'" end-placeholder="结束日期"
                format="YYYY-MM-DD HH:mm:ss" size="small" start-placeholder="开始日期" style="width:100%"
                type="datetimerange" value-format="YYYY-MM-DD HH:mm:ss"
                              :disabled-date="disabledDate">
              </el-date-picker>
            <el-form-item label="环境温度:">
              <el-input v-model="form.temperature" :disabled="operationType === 'view'" placeholder="请输入温度" size="small">
                <template #append>℃</template>
              </el-input>
            </el-form-item>
          </el-col>
          <el-col :span="12">
            <el-form-item :rules="[{ required: true, message: '请输入使用人', trigger: 'change' }]" label="使用人:"
            <el-form-item label="环境湿度:">
              <el-input v-model="form.humidity" :disabled="operationType === 'view'" placeholder="请输入湿度" size="small">
                <template #append>%RH</template>
              </el-input>
            </el-form-item>
          </el-col>
          <el-col :span="12">
            <el-form-item :rules="[{ required: true, message: '请选择使用人', trigger: 'change' }]" label="使用人:"
              prop="usePersonId">
              <el-select @change="usePersonName" v-model="form.usePersonId" :disabled="operationType === 'view'"
                placeholder="请选择" size="small" style="width: 100%">
                <el-option v-for="item in userList" :key="item.id" :label="item.name" :value="item.id"></el-option>
              </el-select>
            </el-form-item>
          </el-col>
          <el-col :span="12" v-if="form.orderCode">
            <el-form-item label="关联原始记录:">
              <el-input v-model="form.orderCode" disabled size="small"></el-input>
            </el-form-item>
          </el-col>
          <el-col :span="24">
@@ -129,7 +181,7 @@
          </el-col>
        </el-row>
      </el-form>
      <template #footer><span  class="dialog-footer">
      <template #footer><span class="dialog-footer">
        <el-button @click="dialogVisible = false">取 消</el-button>
        <el-button v-if="operationType !== 'view'" type="primary" @click="saveRecord">确 定</el-button>
      </span></template>
@@ -140,7 +192,7 @@
          type="month" value-format="YYYY-MM">
        </el-date-picker>
      </span>
      <template #footer><span  class="dialog-footer">
      <template #footer><span class="dialog-footer">
        <el-button @click="ratifyDialog = false, exportDate = ''">取 消</el-button>
        <el-button :loading="outLoading" type="primary" @click="handleDown">导 出</el-button>
      </span></template>
@@ -151,28 +203,41 @@
import {
  deviceRecordPage,
  exportUseRecord,
  selectDeviceByCode,
  saveDeviceRecord,
  updateDeviceRecord,
  deleteDeviceRecord,
} from '@/api/cnas/resourceDemand/device.js'
import { selectUserCondition } from "@/api/business/inspectionTask";
import { formatListDate } from './dateFormat';
import { formatDateOnly as toDateOnly } from './dateFormat';
import { saveBlobOrShowError } from '@/utils/saveBlob'
import dayjs from 'dayjs'

const today = () => {
  const now = new Date()
  return `${now.getFullYear()}-${String(now.getMonth() + 1).padStart(2, '0')}-${String(now.getDate()).padStart(2, '0')}`
}

const defaultForm = () => ({
  id: null,
  deviceId: '',
  deviceName: '',
  specificationModel: '',
  managementNumber: '',
  insOrderId: null,
  orderCode: '',
  sampleCode: '',
  useDate: today(),
  useStartTime: '',
  useEndTime: '',
  temperature: '',
  humidity: '',
  useBefore: 1,
  useAfter: 1,
  abnormal: '',
  usePersonId: '',
  usePerson: '',
  remark: '',
})
export default {
  props: {
    clickNodeVal: {
      type: Object,
      default: () => {
        return {};
      }
    },
    // 判断是否是外部分离
    isMenuList: {
      type: Number,
      default: 0
    }
  },
  data() {
    return {
      search: {
@@ -182,37 +247,11 @@
        sampleCode: '',
        managementNumber: ''
      },
      responsiblePersonList: {},
      isShow: false,
      outLoading: false,
      ratifyDialog: false,
      exportDate: '',
      userList: [],
      form: {
        // deviceId:'',
        processNumber: '',
        deviceName: '',
        managementNumber: '',
        //温度
        temperature: '',
        //湿度
        humidity: '',
        //使用前
        useBefore: 1,
        //使用后
        useAfter: 1,
        //异常情况
        abnormal: '',
        useDateList: [],
        //使用日期
        useStartDate: null,
        useEndDate: null,
        //使用人
        usePerson: '',
        usePersonId: '',
        //备注
        remark: '',
      },
      form: defaultForm(),
      dialogVisible: false,
      operationType: '',
      formParamList: [],
@@ -220,11 +259,21 @@
    }
  },
  mounted() {
    this.getTableList(this.clickNodeVal.value);
    this.getTableList();
  },
  methods: {
    formatDateCell(row, column, cellValue) {
      return formatListDate(cellValue)
    formatDateCell(value) {
      return toDateOnly(value)
    },
    formatTimeCell(value) {
      if (!value) return ''
      const date = dayjs(String(value).replace('T', ' '))
      return date.isValid() ? date.format('HH:mm') : ''
    },
    formatStatus(value) {
      if (value === 1) return '良好'
      if (value === 0) return '异常'
      return ''
    },
    // element-plus 的 el-date-picker 没有 picker-options，改成 :disabled-date
    disabledDate(time) {
@@ -232,11 +281,11 @@
    },
    handleSizeChange(val) {
      this.search.size = val
      this.getTableList(this.clickNodeVal.value);
      this.getTableList();
    },
    handleCurrentChange(val) {
      this.search.current = val
      this.getTableList(this.clickNodeVal.value);
      this.getTableList();
    },
    resetSearch() {
      this.search = {
@@ -246,15 +295,11 @@
        sampleCode: '',
        managementNumber: ''
      }
      this.getTableList(this.clickNodeVal.value);
      this.getTableList();
    },
    async getTableList(deviceId) {
      if (deviceId === undefined) {
        deviceId = ''
      }
    async getTableList() {
      this.tableLoading = true
      await deviceRecordPage({
        deviceId: deviceId,
        ...this.search
      }).then(res => {
        this.tableLoading = false
@@ -274,28 +319,18 @@
    handleDown() {
      this.outLoading = true
      exportUseRecord({
        deviceId: this.clickNodeVal.value,
        sampleCode: this.search.sampleCode,
        managementNumber: this.search.managementNumber,
        exportDate: this.exportDate
      }).then(res => {
        this.outLoading = false
        saveBlobOrShowError(res, '设备使用记录.doc', 'application/msword')
        saveBlobOrShowError(res, '仪器设备运行记录.docx', 'application/vnd.openxmlformats-officedocument.wordprocessingml.document')
      }).catch(() => {
        this.outLoading = false
      })
    },
    //新建
    openAdd() {
      this.operationType = 'add'
      this.getUserList()
      selectDeviceByCode({ id: this.clickNodeVal.value }).then(res => {
        this.form.deviceName = res.data.deviceName
        this.form.managementNumber = res.data.managementNumber
        this.$nextTick(() => {
          this.$refs['form'].clearValidate()
        })
      });
    resetForm() {
      this.form = defaultForm()
    },
    usePersonName(value) {
      const index = this.userList.findIndex(item => item.id === value)
@@ -303,31 +338,39 @@
        this.form.usePerson = this.userList[index].name
      }
    },
    //确认添加记录
    //保存修改
    saveRecord() {
      this.$refs.form.validate((valid) => {
        if (valid) {
          this.form.useStartDate = this.form.useDateList[0]
          this.form.useEndDate = this.form.useDateList[1]
          this.form.deviceId = this.clickNodeVal.value
          if (this.operationType === 'add') {
            saveDeviceRecord(this.form).then(res => {
              if (res.code == 200) {
                this.$message.success('新增成功')
                this.getTableList(this.clickNodeVal.value)
                this.dialogVisible = false
              }
            })
          } else {
            updateDeviceRecord(this.form).then(res => {
              if (res.code == 200) {
                this.$message.success('修改成功')
                this.getTableList(this.clickNodeVal.value)
                this.dialogVisible = false
              }
            })
          }
        if (!valid) {
          return
        }
        if (this.form.useStartTime >= this.form.useEndTime) {
          this.$message.error('结束时间必须晚于开始时间')
          return
        }
        const payload = {
          id: this.form.id || undefined,
          deviceId: this.form.deviceId,
          insOrderId: this.form.insOrderId || undefined,
          sampleCode: this.form.sampleCode,
          temperature: this.form.temperature,
          humidity: this.form.humidity,
          useBefore: this.form.useBefore,
          useAfter: this.form.useAfter,
          abnormal: this.form.abnormal,
          usePersonId: this.form.usePersonId,
          usePerson: this.form.usePerson,
          remark: this.form.remark,
          useStartDate: `${this.form.useDate} ${this.form.useStartTime}`,
          useEndDate: `${this.form.useDate} ${this.form.useEndTime}`,
        }
        updateDeviceRecord(payload).then(res => {
          if (res.code == 200) {
            this.$message.success('修改成功')
            this.getTableList()
            this.dialogVisible = false
          }
        })
      });
    },
    //查看详情
@@ -336,13 +379,23 @@
      this.dialogVisible = true;
      this.getUserList()
      // 复制一份再编辑，避免直接改动表格里的数据
      const useStartDate = row.useStartDate || ''
      const useEndDate = row.useEndDate || ''
      const start = row.useStartDate ? String(row.useStartDate).replace('T', ' ') : ''
      const end = row.useEndDate ? String(row.useEndDate).replace('T', ' ') : ''
      this.form = {
        ...defaultForm(),
        ...row,
        useStartDate,
        useEndDate,
        useDateList: useStartDate && useEndDate ? [useStartDate, useEndDate] : []
        deviceId: row.deviceId,
        deviceName: row.deviceName || '',
        specificationModel: row.specificationModel || '',
        managementNumber: row.managementNumber || '',
        orderCode: row.orderCode || '',
        useDate: start ? start.slice(0, 10) : '',
        useStartTime: start.length >= 19 ? start.slice(11, 19) : '',
        useEndTime: end.length >= 19 ? end.slice(11, 19) : '',
        temperature: row.temperature || '',
        humidity: row.humidity || '',
        usePersonId: row.usePersonId || '',
        usePerson: row.usePerson || '',
      }
    },
    handleDeleteClick(index, row) {
@@ -372,37 +425,12 @@
    },
  },
  watch: {
    // 监听点击el-tree的数据，进行数据刷新
    clickNodeVal(newVal) {
      if (newVal.value) {
        this.getTableList(newVal.value);
      }
    },
    dialogVisible(newVal) {
      if (newVal === false) {
        this.form = {
          // deviceId:'',
          sampleCode: '',
          deviceName: '',
          managementNumber: '',
          //温度
          temperature: '',
          //湿度
          humidity: '',
          //使用前
          useBefore: 1,
          //使用后
          useAfter: 1,
          //异常情况
          abnormal: '',
          //使用日期
          useDateList: [],
          //使用人
          usePersonId: '',
          //备注
          remark: '',
        }
        this.$refs.form.clearValidate()
        this.resetForm()
        this.$nextTick(() => {
          this.$refs.form && this.$refs.form.clearValidate()
        })
      }
    }
  }
@@ -414,6 +442,13 @@
  height: 46px;
  display: flex;
  justify-content: space-between;
  margin-top: 10px;
  margin-top: 4px;
}

.link-icon {
  margin-left: 4px;
  color: #409eff;
  font-size: 14px;
  vertical-align: middle;
}
</style>