| | |
| | | <template> |
| | | <div> |
| | | <div class="search"> |
| | | <el-row :gutter="10" style="width: 100%;"> |
| | | <el-col :span="20" style="display: flex;flex-wrap: wrap;"> |
| | | <div class="search_thing"> |
| | | <div class="search_label">流程编号:</div> |
| | | <div class="search_input"> |
| | | <el-input v-model="search.processNumber" clearable placeholder="请输入" size="small" style="width: 100%" |
| | | @keyup.enter.native="getDeviceStatePage(clickNodeVal.value)"></el-input> |
| | | </div> |
| | | </div> |
| | | <div class="search_thing" style="padding-left: 20px;"> |
| | | <el-button size="small" @click="resetSearch">重 置</el-button> |
| | | <el-button size="small" type="primary" @click="getDeviceStatePage(clickNodeVal.value)">查 询</el-button> |
| | | </div> |
| | | </el-col> |
| | | <el-col :span="4"> |
| | | <div class="btns"> |
| | | <el-button size="small" type="primary" @click="dialogVisible = true">新建</el-button> |
| | | <el-button :loading="outLoading" size="small" type="primary" @click="handleDown">导出Excel</el-button> |
| | | </div> |
| | | </el-col> |
| | | </el-row> |
| | | <el-form :model="search" ref="search" size="small" :inline="true"> |
| | | <el-form-item label="流程编号"> |
| | | <el-input v-model="search.processNumber" clearable placeholder="请输入" size="small" style="width: 100%" |
| | | @keyup.enter.native="getDeviceStatePage(clickNodeVal.value)"></el-input> |
| | | </el-form-item> |
| | | <el-form-item> |
| | | <el-button size="mini" type="primary" @click="getDeviceStatePage(clickNodeVal.value)">查询</el-button> |
| | | <el-button size="mini" @click="resetSearch">重置</el-button> |
| | | </el-form-item> |
| | | </el-form> |
| | | <div> |
| | | <el-button size="small" type="primary" @click="dialogVisible = true">新建</el-button> |
| | | <el-button :loading="outLoading" size="small" type="primary" @click="handleDown">导出Excel</el-button> |
| | | </div> |
| | | </div> |
| | | <div> |
| | | <el-table :data="tableDatalist" height="calc(100vh - 20em)" style="width: 100% ;"> |
| | | <el-table :data="tableDatalist" height="calc(100vh - 20em)" style="width: 100% ;" |
| | | :header-cell-style="{ background: '#f8f8f9', color: '#515a6e' }" border> |
| | | <!-- 表格列 --> |
| | | <el-table-column align="center" header-align="center" label="序号" prop="prop" type="index" |
| | | width="70"></el-table-column> |
| | |
| | | </el-table> |
| | | <el-pagination :current-page="1" :page-size="search.size" :page-sizes="[10, 20, 30, 50, 100]" |
| | | :total="search.total" layout="->,total, sizes, prev, pager, next, jumper" @size-change="handleSizeChange" |
| | | @current-change="handleCurrentChange"> |
| | | @current-change="handleCurrentChange" background> |
| | | </el-pagination> |
| | | </div> |
| | | <el-dialog :close-on-click-modal="false" :close-on-press-escape="false" :visible.sync="dialogVisible" title="设备情况" |
| | |
| | | </div> |
| | | </template> |
| | | <script> |
| | | import { |
| | | saveDeviceState, |
| | | selectDeviceByCode, |
| | | exportDeviceStatus, |
| | | deleteDeviceState, |
| | | deviceStateExport, |
| | | getDeviceStatePage, |
| | | } from '@/api/cnas/resourceDemand/device.js' |
| | | import { selectUserCondition } from "@/api/business/inspectionTask"; |
| | | import { dateFormat } from '@/utils/date' |
| | | import { mapGetters } from "vuex"; |
| | | export default { |
| | | props: { |
| | | clickNodeVal: { |
| | |
| | | return {}; |
| | | } |
| | | } |
| | | }, |
| | | computed: { |
| | | ...mapGetters(["nickName"]), |
| | | }, |
| | | data() { |
| | | return { |
| | |
| | | this.$refs.form.validate((valid) => { |
| | | if (valid === true || saveState !== '1submit') { |
| | | // 给当前环节设置创建人与时间 |
| | | let user = JSON.parse(localStorage.getItem('user')) |
| | | const dateTime = dateFormat(new Date()) |
| | | // 获取当前环节操作人与日期 |
| | | switch (this.currentStep) { |
| | | case 0: |
| | | this.form.createUser = user.name |
| | | this.form.submitOperatingPersonnel = user.name |
| | | this.form.createUser = this.nickName |
| | | this.form.submitOperatingPersonnel = this.nickName |
| | | this.form.submitDate = dateTime |
| | | break |
| | | case 1: |
| | | this.form.departmentOperatingPersonnel = user.name |
| | | this.form.departmentOperatingPersonnel = this.nickName |
| | | this.form.departmentDate = dateTime |
| | | break |
| | | case 2: |
| | | this.form.measuringRoomOperatingPersonnel = user.name |
| | | this.form.measuringRoomOperatingPersonnel = this.nickName |
| | | this.form.measuringRoomDate = dateTime |
| | | break |
| | | case 3: |
| | | this.form.approvalOperatingPersonnel = user.name |
| | | this.form.approvalOperatingPersonnel = this.nickName |
| | | this.form.approvalDate = dateTime |
| | | break |
| | | default: |
| | |
| | | // 获取当前状态 |
| | | this.form.currentState = currentStepAction === 4 ? '关闭' : this.steps[currentStepAction] |
| | | this.form.deviceId = this.clickNodeVal.value |
| | | this.$axios.post(this.$api.deviceCheck.saveDeviceState, this.form, { |
| | | headers: { |
| | | 'Content-Type': 'application/json' |
| | | } |
| | | }).then(res => { |
| | | saveDeviceState(this.form).then(res => { |
| | | if (res.code == 200) { |
| | | this.$message.success('提交成功') |
| | | this.getDeviceStatePage(this.clickNodeVal.value) |
| | |
| | | }, |
| | | openRecordAcceptance() { |
| | | // 获取设备基础信息 |
| | | this.$axios.get(this.$api.deviceScope.selectDeviceByCode + '?id=' + this.clickNodeVal.value).then(res => { |
| | | selectDeviceByCode({ id: this.clickNodeVal.value }).then(res => { |
| | | this.form.deviceName = res.data.deviceName |
| | | this.form.specificationModel = res.data.specificationModel |
| | | this.form.managementNumber = res.data.managementNumber |
| | |
| | | }, |
| | | // 获取负责人信息接口 |
| | | getUserList() { |
| | | this.$axios.get(this.$api.deviceScope.selectUserList).then(res => { |
| | | selectUserCondition().then(res => { |
| | | if (res.code == 200) { |
| | | this.responsibleOptions = res.data |
| | | } |
| | |
| | | // 导出 |
| | | handleDownOne(row) { |
| | | this.outLoading = true |
| | | this.$axios.get(this.$api.deviceCheck.exportDeviceStatus + '?deviceId=' + row.deviceId + '&processNumber=' + row.processNumber, { |
| | | responseType: "blob" |
| | | }).then(res => { |
| | | exportDeviceStatus({ deviceId: row.deviceId, processNumber: row.processNumber }).then(res => { |
| | | this.outLoading = false |
| | | const blob = new Blob([res], { type: 'application/octet-stream' }); |
| | | //将Blob 对象转换成字符串 |
| | | let reader = new FileReader(); |
| | | reader.readAsText(blob, 'utf-8'); |
| | | reader.onload = () => { |
| | | try { |
| | | let result = JSON.parse(reader.result); |
| | | if (result.message) { |
| | | this.$message.error(result.message); |
| | | } else { |
| | | const url = URL.createObjectURL(blob); |
| | | const link = document.createElement('a'); |
| | | link.href = url; |
| | | link.download = '设备停/启用.doc'; |
| | | link.click(); |
| | | this.$message.success('导出成功') |
| | | } |
| | | } catch (err) { |
| | | console.log(err); |
| | | const url = URL.createObjectURL(blob); |
| | | const link = document.createElement('a'); |
| | | link.href = url; |
| | | link.download = '设备停/启用.doc'; |
| | | link.click(); |
| | | this.$message.success('导出成功') |
| | | } |
| | | } |
| | | this.$download.saveAs(blob, '设备停/启用.doc') |
| | | }) |
| | | }, |
| | | // 删除 |
| | |
| | | cancelButtonText: '取消', |
| | | type: 'warning' |
| | | }).then(() => { |
| | | this.$axios.delete(this.$api.deviceCheck.deleteDeviceState + '?stateId=' + row.stateId).then(res => { |
| | | deleteDeviceState({ stateId: row.stateId }).then(res => { |
| | | if (res.code == 200) { |
| | | this.$message.success('删除成功') |
| | | this.getDeviceStatePage(this.clickNodeVal.value) |
| | |
| | | message: '已取消删除' |
| | | }); |
| | | }); |
| | | |
| | | }, |
| | | //导出 |
| | | handleDown() { |
| | | this.outLoading = true |
| | | this.$axios.post(this.$api.deviceCheck.deviceStateExport, { |
| | | deviceStateExport({ |
| | | deviceId: this.clickNodeVal.value, |
| | | processNumber: this.search.processNumber |
| | | }, { responseType: "blob" }).then(res => { |
| | | }).then(res => { |
| | | this.outLoading = false |
| | | const blob = new Blob([res], { type: 'application/octet-stream' }); |
| | | //将Blob 对象转换成字符串 |
| | | let reader = new FileReader(); |
| | | reader.readAsText(blob, 'utf-8'); |
| | | reader.onload = () => { |
| | | try { |
| | | let result = JSON.parse(reader.result); |
| | | if (result.message) { |
| | | this.$message.error(result.message); |
| | | } else { |
| | | const url = URL.createObjectURL(blob); |
| | | const link = document.createElement('a'); |
| | | link.href = url; |
| | | link.download = '设备停用/启用.xlsx'; |
| | | link.click(); |
| | | this.$message.success('导出成功') |
| | | } |
| | | } catch (err) { |
| | | console.log(err); |
| | | const url = URL.createObjectURL(blob); |
| | | const link = document.createElement('a'); |
| | | link.href = url; |
| | | link.download = '设备停用/启用.xlsx'; |
| | | link.click(); |
| | | this.$message.success('导出成功') |
| | | } |
| | | } |
| | | this.$download.saveAs(blob, '设备停用/启用.xlsx') |
| | | }).finally(() => { |
| | | this.outLoading = false |
| | | }) |
| | |
| | | this.getDeviceStatePage(this.clickNodeVal.value); |
| | | }, |
| | | getDeviceStatePage(deviceId) { |
| | | this.$axios.get(this.$api.deviceCheck.getDeviceStatePage + '?deviceId=' + deviceId + "&size=" + this.search.size + "¤t=" + this.search.current + "&processNumber=" + this.search.processNumber).then(res => { |
| | | getDeviceStatePage({ deviceId, ...this.search }).then(res => { |
| | | if (res.code == 200) { |
| | | this.tableDatalist = res.data.records |
| | | this.search.total = res.data.total |
| | |
| | | </script> |
| | | |
| | | <style scoped> |
| | | .dialog-content { |
| | | max-height: 70vh; |
| | | /* 设置最大高度 */ |
| | | overflow-y: auto; |
| | | /* 启用垂直滚动 */ |
| | | } |
| | | |
| | | h4 { |
| | | font-weight: 400; |
| | | font-size: 16px; |
| | | margin: 10px 0; |
| | | } |
| | | |
| | | /* |
| | | 保存提交按钮样式 |
| | | */ |
| | | h4 .title { |
| | | width: 100%; |
| | | display: flex; |
| | | align-items: center; |
| | | justify-content: space-between; |
| | | } |
| | | |
| | | h4 .title .line { |
| | | display: inline-block; |
| | | width: 3px; |
| | | height: 16px; |
| | | background: #3A7BFA; |
| | | margin-right: 4px; |
| | | } |
| | | |
| | | .tables { |
| | | width: 100%; |
| | | height: calc(100vh - 15em); |
| | | } |
| | | |
| | | .el-from { |
| | | max-width: 400px; |
| | | margin: 0 auto; |
| | | } |
| | | |
| | | .form-row { |
| | | display: flex; |
| | | justify-content: space-between; |
| | | } |
| | | |
| | | |
| | | .form-row .el-form-item { |
| | | flex: 1; |
| | | /* 每个表单项占据相同比例的空间 */ |
| | | margin-right: 100px; |
| | | /* 可选:为右侧元素添加间距 */ |
| | | } |
| | | |
| | | /* 移除最后一个元素的右边距 */ |
| | | .form-row .el-form-item:last-child { |
| | | margin-right: 0; |
| | | |
| | | } |
| | | |
| | | .search { |
| | | background-color: #fff; |
| | | margin: 10px 0; |
| | | height: 46px; |
| | | display: flex; |
| | | align-items: center; |
| | | position: relative; |
| | | } |
| | | |
| | | .search_thing { |
| | | display: flex; |
| | | align-items: center; |
| | | height: 40px; |
| | | } |
| | | |
| | | .search_label { |
| | | width: 70px; |
| | | font-size: 14px; |
| | | text-align: right; |
| | | } |
| | | |
| | | .search_input { |
| | | width: 70%; |
| | | } |
| | | |
| | | .btns { |
| | | position: absolute; |
| | | right: 0; |
| | | top: 50%; |
| | | transform: translate(0, -50%); |
| | | } |
| | | |
| | | .form .search_label { |
| | | width: 120px; |
| | | justify-content: space-between; |
| | | margin-top: 10px; |
| | | } |
| | | </style> |