<template>
|
<div>
|
<div class="search">
|
<el-button size="small" type="primary" @click="refreshTableList">刷 新</el-button>
|
<el-button size="small" type="primary" @click="openDia('add')">新 增</el-button>
|
<el-button :loading="outLoading" size="small" type="primary" @click="openHandleOut">导 出</el-button>
|
</div>
|
<div>
|
<lims-table :tableData="tableData" :column="column"
|
height="calc(100vh - 20em)" @pagination="pagination"
|
:page="page" :tableLoading="tableLoading"></lims-table>
|
</div>
|
<el-dialog :close-on-click-modal="false" :close-on-press-escape="false" :visible.sync="usageTableDia"
|
title="设备保养计划表" width="80%" @close="closeDialog">
|
<div style="display: flex;align-items: center;">
|
<el-button size="small" type="primary" @click="addTableRow" v-if="operationType !== 'check'">添加</el-button>
|
<span style="width: 60px;margin-left: 10px">年份：</span>
|
<el-date-picker v-model="form.impowerYear" type="year" value-format="yyyy" clearable size="small" format="yyyy"
|
placeholder="选择年" :disabled="operationType === 'check'">
|
</el-date-picker>
|
</div>
|
<div style="margin: 10px 0">
|
<el-table ref="deviceImpowerDetails" :data="deviceImpowerDetails" id="templateParamTable" row-key="deviceId"
|
:header-cell-style="{ background: '#f8f8f9', color: '#515a6e' }" border
|
height="560px" style="width: 100% ;">
|
<el-table-column align="center" header-align="center" label="序号" type="index" width="60"></el-table-column>
|
<el-table-column label="设备名称" min-width="170" prop="deviceName">
|
<template slot-scope="scope">
|
<el-input v-model="scope.row.deviceName" clearable
|
size="small" :disabled="operationType === 'check'"></el-input>
|
</template>
|
</el-table-column>
|
<el-table-column label="设备编号" min-width="140" prop="managementNumber">
|
<template slot-scope="scope">
|
<el-input v-model="scope.row.managementNumber" clearable
|
size="small" :disabled="operationType === 'check'"></el-input>
|
</template>
|
</el-table-column>
|
<el-table-column label="规格型号" min-width="120" prop="specificationModel">
|
<template slot-scope="scope">
|
<el-input v-model="scope.row.specificationModel" clearable
|
size="small" :disabled="operationType === 'check'"></el-input>
|
</template>
|
</el-table-column>
|
<el-table-column label="检测项目" min-width="120" prop="inspectionItem<">
|
<template slot-scope="scope">
|
<el-input v-model="scope.row.inspectionItem" clearable size="small"
|
:disabled="operationType === 'check'"></el-input>
|
</template>
|
</el-table-column>
|
<el-table-column label="被授权人" min-width="160" prop="delegatee">
|
<template slot-scope="scope">
|
<el-select v-model="scope.row.delegatedUserArr"
|
clearable filterable multiple
|
:disabled="operationType === 'check'"
|
placeholder="请选择" size="small" style="width: 100%;">
|
<el-option v-for="item in responsibleOptions" :key="item.id" :label="item.name" :value="item.id">
|
</el-option>
|
</el-select>
|
</template>
|
</el-table-column>
|
<el-table-column label="操作" width="80" align="center" v-if="operationType !== 'check'">
|
<template slot-scope="scope">
|
<el-button style="color: #f56c6c" type="text" @click="deleteRow(scope.$index)">删除</el-button>
|
</template>
|
</el-table-column>
|
</el-table>
|
</div>
|
<span slot="footer" class="dialog-footer">
|
<el-button @click="closeDialog">取 消</el-button>
|
<el-button v-if="operationType !== 'check'" :loading="submitFormLoading" type="primary" @click="submitForm">确认</el-button>
|
<el-button v-if="operationType === 'check'" :loading="submitFormLoading" type="primary"
|
@click="checkStatus(0)">不通过</el-button>
|
<el-button v-if="operationType === 'check'" :loading="submitFormLoading" type="primary"
|
@click="checkStatus(1)">通过</el-button>
|
</span>
|
</el-dialog>
|
<el-dialog :close-on-click-modal="false" :close-on-press-escape="false" :visible.sync="addEquipDia" title="添加设备"
|
width="50%">
|
<div style="display: flex;align-items: center;">
|
<span style="width: 90px;margin-left: 10px">被授权人：</span>
|
<el-select v-model="delegatedUser" clearable filterable multiple
|
placeholder="请选择" size="small" style="width: 100%;">
|
<el-option v-for="item in responsibleOptions" :key="item.name" :label="item.name" :value="item.name">
|
</el-option>
|
</el-select>
|
</div>
|
<el-table ref="multipleTable" :data="equipOptions" tooltip-effect="dark" height="500" style="width: 100%"
|
:header-cell-style="{ background: '#f8f8f9', color: '#515a6e' }" border
|
@selection-change="handleSelectionChange">
|
<el-table-column type="selection" width="55"></el-table-column>
|
<el-table-column label="设备名称" prop="label" width="190"></el-table-column>
|
<el-table-column prop="value" label="设备编号" width="130"></el-table-column>
|
<el-table-column prop="storagePoint" label="归属实验室"></el-table-column>
|
</el-table>
|
<span slot="footer" class="dialog-footer">
|
<el-button @click="addEquipDia = false">取 消</el-button>
|
<el-button :loading="submitFormLoading" type="primary" @click="changeMachineName">确认</el-button>
|
</span>
|
</el-dialog>
|
</div>
|
</template>
|
|
<script>
|
import limsTable from "@/components/Table/lims-table.vue";
|
import {
|
addImpower,
|
deleteImpower, deviceScopeSearch, getImpowerDetail, reviewImpowerStatus,
|
selectDeviceImpowerByPage, updateImpower
|
} from "@/api/cnas/resourceDemand/device";
|
import {exportQualityMonitorDetail} from "@/api/cnas/process/ensureResults/qualityMonitor";
|
import {selectUserCondition} from "@/api/system/user";
|
|
export default {
|
name: '',
|
// import 引入的组件需要注入到对象中才能使用
|
components: {limsTable},
|
props: {
|
clickNodeVal: {
|
type: Object,
|
default: () => {
|
}
|
}
|
},
|
data() {
|
// 这里存放数据
|
return {
|
outLoading: false,
|
tableData: [],
|
tableLoading: false,
|
page: {
|
total: 0,
|
size: 20,
|
current: 1
|
},
|
column: [
|
{ label: '计划年份', prop: 'impowerYear' },
|
{ label: '编制人', prop: 'compiler' },
|
{ label: '编制时间', prop: 'datePreparation' },
|
{ label: '授权人', prop: 'audit' },
|
{ label: '授权日期', prop: 'auditDate' },
|
{
|
dataType: 'tag',
|
label: '授权状态',
|
prop: 'status',
|
formatData: (params) => {
|
if (params === 1) {
|
return '已授权'
|
} else if (params == 0) {
|
return '未授权'
|
} else {
|
return null
|
}
|
},
|
formatType: (params) => {
|
if (params == 1) {
|
return 'success'
|
} else if (params === 0) {
|
return 'danger'
|
} else {
|
return null
|
}
|
}
|
},
|
{
|
dataType: 'action',
|
label: '操作',
|
operation: [
|
{
|
name: '编辑',
|
type: 'text',
|
clickFun: (row) => {
|
this.openDia('edit', row);
|
},
|
disabled: (row) => {
|
return row.status === 1;
|
},
|
},
|
{
|
name: '授权',
|
type: 'text',
|
clickFun: (row) => {
|
this.openDia('check', row);
|
},
|
disabled: (row) => {
|
return row.status === 1;
|
},
|
},
|
{
|
name: '删除',
|
type: 'text',
|
clickFun: (row) => {
|
this.handleDeleteClick(row);
|
},
|
disabled: (row) => {
|
return row.status === 1;
|
},
|
},
|
]
|
}
|
],
|
responsibleOptions: [],
|
operationType: '',
|
usageTableDia: false,
|
deviceImpowerDetails: [],
|
submitFormLoading: false,
|
addEquipDia: false,
|
equipOptions: [],
|
selectionRows: [],
|
form: {
|
impowerYear: ''
|
},
|
delegatedUser: [],
|
impowerId: ''
|
};
|
},
|
mounted() {
|
this.refreshTableList()
|
},
|
// 方法集合
|
methods: {
|
// 点击刷新
|
refreshTableList () {
|
this.page.current = 1;
|
this.getTableList()
|
},
|
// 分页切换
|
pagination(page) {
|
this.page.size = page.limit
|
this.getTableList()
|
},
|
getTableList () {
|
this.tableLoading = true
|
selectDeviceImpowerByPage({
|
...this.page
|
}).then(res => {
|
this.tableLoading = false
|
this.tableData = res.data.records
|
this.page.total = res.data.total
|
}).catch(err => {
|
this.tableLoading = false
|
})
|
},
|
// 打开操作弹框
|
openDia (type, row) {
|
this.operationType = type
|
this.usageTableDia = true
|
this.form = {
|
impowerYear: '',
|
deviceImpowerDetails: [],
|
}
|
this.deviceImpowerDetails = []
|
if (row) {
|
this.impowerId = row.impowerId
|
getImpowerDetail({ impowerId: this.impowerId }).then(res => {
|
if (res.code === 200) {
|
this.form = res.data
|
this.deviceImpowerDetails = this.form.deviceImpowerDetails
|
this.deviceImpowerDetails.forEach(item => {
|
this.$set(item, 'delegatedUserArr', item.delegatedUser.split(','))
|
})
|
}
|
}).catch(error => {
|
console.error(error)
|
})
|
}
|
this.getEquipOptions()
|
this.getUserList()
|
},
|
closeDialog () {
|
this.usageTableDia = false
|
this.getTableList()
|
},
|
// 添加设备
|
addTableRow() {
|
this.addEquipDia = true
|
this.delegatedUser = this.responsibleOptions.map((item) => item.name);
|
this.getEquipOptions()
|
},
|
// 删除表格行
|
deleteRow(index) {
|
this.deviceImpowerDetails.splice(index, 1)
|
},
|
// 提交新增和修改
|
submitForm() {
|
this.form.deviceImpowerDetails = this.HaveJson(this.deviceImpowerDetails)
|
this.form.deviceImpowerDetails.forEach((item) => {
|
item.delegatedUser = item.delegatedUserArr.join(',')
|
})
|
this.submitFormLoading = true
|
if (this.operationType === 'add') {
|
addImpower(this.form).then(res => {
|
if (res.code == 200) {
|
this.$message.success('新增成功')
|
this.usageTableDia = false
|
this.refreshTableList()
|
}
|
this.submitFormLoading = false
|
}).catch(err => {
|
this.submitFormLoading = false
|
})
|
} else {
|
updateImpower(this.form).then(res => {
|
if (res.code == 200) {
|
this.$message.success('修改成功')
|
this.usageTableDia = false
|
this.refreshTableList()
|
}
|
this.submitFormLoading = false
|
}).catch(err => {
|
this.submitFormLoading = false
|
})
|
}
|
},
|
// 提交审核
|
checkStatus(status) {
|
const params = {
|
status: status,
|
impowerId: this.impowerId
|
}
|
reviewImpowerStatus(params).then(res => {
|
if (res.code == 200) {
|
this.$message.success('审核成功')
|
this.usageTableDia = false
|
this.refreshTableList()
|
}
|
this.submitFormLoading = false
|
}).catch(err => {
|
this.submitFormLoading = false
|
})
|
},
|
handleSelectionChange(selection) {
|
this.selectionRows = selection
|
},
|
// 赋值仪器编号
|
changeMachineName() {
|
this.deviceMaintenancePlanDetails = []
|
this.selectionRows.map(val => {
|
this.deviceImpowerDetails.push({ deviceId: val.id, deviceName: val.label, managementNumber: val.value, specificationModel: val.specificationModel, delegatedUserArr: this.delegatedUser })
|
})
|
this.addEquipDia = false
|
},
|
// 获取所有设备
|
getEquipOptions() {
|
this.equipOptions = []
|
deviceScopeSearch({ status: 0 }).then(res => {
|
if (res.code === 200 && res.data) {
|
this.equipOptions = res.data.map(m => {
|
m.value = m.managementNumber
|
m.label = m.deviceName
|
m.storagePoint = m.storagePoint
|
return m
|
})
|
}
|
}).catch(error => {
|
console.error(error)
|
})
|
},
|
openHandleOut (row) {
|
exportQualityMonitorDetail({ impowerId: row.impowerId }).then(res => {
|
this.outLoading = false
|
const blob = new Blob([res], { type: 'application/msword' });
|
this.$download.saveAs(blob, row.monitorName + '.docx')
|
})
|
},
|
handleDeleteClick(row) {
|
this.$confirm('此操作将永久删除该文件, 是否继续?', '提示', {
|
confirmButtonText: '确定',
|
cancelButtonText: '取消',
|
type: 'warning'
|
}).then(() => {
|
deleteImpower({ impowerId: row.impowerId }).then(res => {
|
this.$message({
|
type: 'success',
|
message: '删除成功!'
|
});
|
this.refreshTableList()
|
})
|
}).catch(() => {
|
this.$message({
|
type: 'info',
|
message: '已取消删除'
|
});
|
});
|
},
|
// 获取负责人信息接口
|
getUserList() {
|
selectUserCondition({type: 2}).then(res => {
|
if (res.code == 200) {
|
this.responsibleOptions = res.data
|
}
|
})
|
},
|
},
|
watch: {
|
// 监听点击el-tree的数据，进行数据刷新
|
clickNodeVal(newVal) {
|
if (newVal.value) {
|
this.refreshTableList();
|
}
|
},
|
},
|
};
|
</script>
|
|
<style scoped>
|
.search {
|
height: 46px;
|
text-align: right;
|
margin-top: 10px;
|
}
|
</style>
|
