You can not select more than 25 topics
Topics must start with a letter or number, can include dashes ('-') and can be up to 35 characters long.
412 lines
13 KiB
412 lines
13 KiB
<template> |
|
<basic-container style="max-height: 800px; overflow: hidden"> |
|
<avue-crud |
|
:option="option" |
|
:table-loading="loading" |
|
:data="data" |
|
:page.sync="page" |
|
ref="crud" |
|
v-model="form" |
|
:permission="permissionList" |
|
:before-open="beforeOpen" |
|
:before-close="beforeClose" |
|
@search-change="searchChange" |
|
@search-reset="searchReset" |
|
@current-change="currentChange" |
|
@size-change="sizeChange" |
|
@refresh-change="refreshChange" |
|
@on-load="onLoad" |
|
> |
|
<template slot-scope="{ row }" slot="deviceStatus"> |
|
<el-tag |
|
size="small" |
|
:type=" |
|
row.deviceStatus == 0 |
|
? 'warning' |
|
: row.deviceStatus == 1 |
|
? '' |
|
: '' |
|
" |
|
> |
|
{{ |
|
row.deviceStatus == 0 |
|
? "待确认" |
|
: row.deviceStatus == 1 |
|
? "已确认" |
|
: "" |
|
}} |
|
</el-tag> |
|
</template> |
|
<template slot-scope="{ row }" slot="runingStatus"> |
|
<el-tag |
|
size="small" |
|
:type=" |
|
row.runingStatus == 0 |
|
? 'info' |
|
: row.runingStatus == 1 |
|
? 'success' |
|
: row.runingStatus == 2 |
|
? 'danger' |
|
: '' |
|
" |
|
> |
|
{{ |
|
row.runingStatus == 0 |
|
? "关机" |
|
: row.runingStatus == 1 |
|
? "运行中" |
|
: row.runingStatus == 2 |
|
? '报警中' |
|
: "" |
|
}} |
|
</el-tag> |
|
</template> |
|
<template slot-scope="scope" slot="menuLeft"> |
|
<el-button |
|
size="small" |
|
@click="handleAdd" |
|
>新增</el-button |
|
> |
|
<el-button |
|
type="primary" |
|
size="small" |
|
@click="addOperation" |
|
>需求提报</el-button |
|
> |
|
</template> |
|
<template slot-scope="{ row }" slot="menu"> |
|
<el-button @click="handleView(row)">查看</el-button> |
|
<el-button @click="handleEdit(row)">编辑</el-button> |
|
<el-button @click="handleDelete(row)">停用</el-button> |
|
</template> |
|
</avue-crud> |
|
<el-dialog |
|
:title="dialogTitle" |
|
:visible.sync="dialogVisible" |
|
:append-to-body="true" |
|
width="50%" |
|
> |
|
<div style="height: 500px; overflow: auto"> |
|
<el-form ref="form" :model="addForm" :rules="addRules" label-width="120px" label-position="left"> |
|
<div> |
|
<div |
|
style=" |
|
color: #101010; |
|
font-size: 20px; |
|
font-weight: 550; |
|
margin-bottom: 20px; |
|
" |
|
> |
|
基本信息 |
|
</div> |
|
<el-form-item label="设备编号" prop="deviceNo"> |
|
<el-input placeholder="请输入设备编号" v-model="addForm.deviceNo"></el-input> |
|
</el-form-item> |
|
<el-form-item label="设备名称" prop="deviceName"> |
|
<el-input placeholder="请输入设备名称" v-model="addForm.deviceName"></el-input> |
|
</el-form-item> |
|
<el-form-item label="型号" prop="deviceModel"> |
|
<el-input placeholder="请输入型号" v-model="addForm.deviceModel"></el-input> |
|
</el-form-item> |
|
<el-form-item label="设备位置" prop="devicePosition"> |
|
<el-input placeholder="请输入设备位置" v-model="addForm.devicePosition"></el-input> |
|
</el-form-item> |
|
<el-form-item label="设备类型" prop="deviceType"> |
|
<el-select style="width:100%;" placeholder="请选择设备类型" v-model="addForm.deviceType"> |
|
<el-option v-for="item in typeList" :key="item.value" :label="item.label" :value="item.value"></el-option> |
|
</el-select> |
|
</el-form-item> |
|
<el-form-item label="供应商" prop="supplier"> |
|
<el-input placeholder="请输入供应商" v-model="addForm.supplier"></el-input> |
|
</el-form-item> |
|
<el-form-item label="生产时间" prop="productTime"> |
|
<el-date-picker |
|
style="width:100%;" |
|
v-model="addForm.productTime" |
|
type="date" |
|
placeholder="请选择生产时间"> |
|
</el-date-picker> |
|
</el-form-item> |
|
</div> |
|
<div> |
|
<div |
|
style=" |
|
color: #101010; |
|
font-size: 20px; |
|
font-weight: 550; |
|
margin-bottom: 20px; |
|
" |
|
> |
|
附件 |
|
</div> |
|
<el-form-item label="附件名称" prop="fileName"> |
|
<el-input placeholder="请输入附件名称" v-model="addForm.fileName"></el-input> |
|
</el-form-item> |
|
<el-form-item label="附件上传"> |
|
<!-- :limit="3" --> |
|
<el-upload |
|
class="upload-demo" |
|
action="https://jsonplaceholder.typicode.com/posts/" |
|
:on-success="handleSuccess" |
|
:on-remove="handleRemove" |
|
multiple |
|
accept=".jpeg,.jpg,.png,.pdf" |
|
:on-exceed="handleExceed" |
|
:file-list="fileList"> |
|
<el-button size="small" type="primary">点击上传</el-button> |
|
<div slot="tip" class="el-upload__tip">支持上传jpeg、jpg、pdf文件，且不超过10M</div> |
|
</el-upload> |
|
</el-form-item> |
|
</div> |
|
</el-form> |
|
</div> |
|
<span slot="footer" class="dialog-footer"> |
|
<el-button @click="handleClose">关 闭</el-button> |
|
<el-button @click="handleSave">保 存</el-button> |
|
<el-button type="primary" @click="handleConfirm">确 定</el-button> |
|
</span> |
|
</el-dialog> |
|
</basic-container> |
|
</template> |
|
|
|
<script> |
|
export default { |
|
data(){ |
|
return{ |
|
option: { |
|
height: "auto", |
|
calcHeight: 30, |
|
tip: false, |
|
searchShow: true, |
|
searchMenuSpan: 6, |
|
border: true, |
|
index: true, |
|
dialogType: "dialog", |
|
dialogClickModal: false, |
|
addBtn: false, |
|
viewBtn: false, |
|
editBtn: false, |
|
delBtn: false, |
|
searchShowBtn: false, |
|
refreshBtn: false, |
|
columnBtn: false, |
|
menuWidth: 300, |
|
column: [ |
|
{ |
|
label: "巡检单号", |
|
labelWidth: 120, |
|
prop: "inspectionNo", |
|
overHidden: true, |
|
}, |
|
{ |
|
label: "单位名称", |
|
labelWidth: 120, |
|
prop: "unitName", |
|
search: true, |
|
overHidden: true, |
|
}, |
|
{ |
|
label: "巡检项目名称", |
|
labelWidth: 120, |
|
prop: "inspectionName", |
|
overHidden: true, |
|
}, |
|
{ |
|
label: "项目地址", |
|
labelWidth: 120, |
|
prop: "projectAddr", |
|
overHidden: true, |
|
}, |
|
{ |
|
label: "班组", |
|
labelWidth: 120, |
|
prop: "team", |
|
overHidden: true, |
|
}, |
|
{ |
|
label: "巡检计划开始时间", |
|
labelWidth: 120, |
|
prop: "startTime", |
|
overHidden: true, |
|
}, |
|
{ |
|
label: "巡检周期", |
|
labelWidth: 120, |
|
prop: "cycle", |
|
slot: true, |
|
}, |
|
{ |
|
label: "下次巡检日期", |
|
labelWidth: 120, |
|
prop: "nextDate", |
|
}, |
|
{ |
|
label: "状态", |
|
labelWidth: 120, |
|
prop: "status", |
|
slot: true, |
|
formslot: true, |
|
}, |
|
], |
|
}, |
|
data: [], |
|
page: { |
|
pageSize: 10, |
|
currentPage: 1, |
|
total: 0, |
|
}, |
|
dialogTitle:'设备新增', |
|
dialogVisible:false, |
|
addForm:{}, |
|
addRules:{ |
|
deviceNo:{required:true,message:'请输入设备编号',trigger:'blur'}, |
|
deviceName:{required:true,message:'请输入设备名称',trigger:'blur'}, |
|
deviceModel:{required:true,message:'请输入型号',trigger:'blur'}, |
|
devicePosition:{required:true,message:'请输入设备位置',trigger:'blur'}, |
|
deviceType:{required:true,message:'请选择设备类型',trigger:'blur'}, |
|
supplier:{required:true,message:'请输入供应商',trigger:'blur'}, |
|
productTime:{required:true,message:'请选择生产时间',trigger:'blur'}, |
|
fileName:{required:true,message:'请输入附件名称',trigger:'blur'}, |
|
}, |
|
typeList:[ |
|
{label:'类型一',value:'001'}, |
|
{label:'类型二',value:'002'}, |
|
{label:'类型三',value:'003'}, |
|
], |
|
fileList:[], |
|
requestVisible:false, |
|
requestForm:{} |
|
} |
|
}, |
|
mounted(){}, |
|
methods:{ |
|
beforeOpen(done, type) { |
|
done(); |
|
}, |
|
beforeClose(done) { |
|
done(); |
|
}, |
|
searchReset(params, done) { |
|
// params.releaseTimeRange = dateFormat(new Date(), 'yyyy-MM-dd'); |
|
this.query = params; |
|
this.onLoad(this.page); |
|
}, |
|
searchChange(params, done) { |
|
this.query = params; |
|
this.page.currentPage = 1; |
|
this.onLoad(this.page, params); |
|
done(); |
|
}, |
|
addOperation(val){ |
|
console.log('val================>',val && val.deviceNo) |
|
if(val && val.deviceNo){ |
|
this.requestForm = { |
|
errPosition:val.devicePosition, |
|
deviceName:val.deviceName, |
|
errType:val.deviceType |
|
} |
|
this.requestVisible = true |
|
}else{ |
|
this.requestVisible = true |
|
} |
|
}, |
|
closeRequest(){ |
|
this.requestVisible = false |
|
}, |
|
// 点击新增按钮 |
|
handleAdd(){ |
|
this.dialogTitle = '设备新增' |
|
this.addForm = {} |
|
this.fileList = [] |
|
this.$refs['form'].resetFields() |
|
this.dialogVisible = true |
|
}, |
|
// 点击编辑按钮 |
|
handleEdit(row){ |
|
this.addForm = row |
|
this.fileList = row.fileList |
|
this.dialogTitle = '设备编辑' |
|
this.dialogVisible = true |
|
}, |
|
// 点击删除按钮 |
|
handleDelete(row){ |
|
this.$confirm('请确认是否删除该设备?', '提示', { |
|
confirmButtonText: '确定', |
|
cancelButtonText: '取消', |
|
type: 'warning' |
|
}).then(() => { |
|
this.$message({ |
|
type: 'success', |
|
message: '删除成功!' |
|
}); |
|
}).catch(() => { |
|
// this.$message({ |
|
// type: 'info', |
|
// message: '已取消删除' |
|
// }); |
|
}); |
|
}, |
|
// 点击新增弹窗关闭按钮 |
|
handleClose(){ |
|
this.dialogVisible = false |
|
this.addForm = {} |
|
}, |
|
// 点击新增弹窗保存按钮 |
|
handleSave(){ |
|
this.$refs['form'].validate((valid) => { |
|
if(valid){ |
|
if(this.fileList.length == 0){ |
|
this.$message.error('请至少上传一个附件') |
|
}else{ |
|
|
|
} |
|
} |
|
}) |
|
}, |
|
// 附件上传成功 |
|
handleSuccess(response, file, fileList){ |
|
console.log('response------------------>',response) |
|
console.log('file------------------>',file) |
|
console.log('fileList------------------>',fileList) |
|
this.fileList = [] |
|
fileList.map(item =>{ |
|
this.fileList.push({name:item.name}) |
|
}) |
|
console.log('fileList------------------>',this.fileList) |
|
}, |
|
// 附件删除 |
|
handleRemove(file, fileList){ |
|
this.fileList = [] |
|
fileList.map(item =>{ |
|
this.fileList.push({name:item.name}) |
|
}) |
|
}, |
|
onLoad(page, params = {}) { |
|
this.data = [ |
|
{ |
|
inspectionNo:'WX-20240820-01', |
|
unitName:'济南安池实验室', |
|
inspectionName:'实验室设备巡检', |
|
projectAddr:'济南市钢城区', |
|
deviceType:'通风与空调及净化系统', |
|
supplier:'山东烁今', |
|
productTime:'2024/8/20', |
|
deviceStatus:0, //设备状态 0-待确认 1-已确认 |
|
runingStatus:1, //运行状态 0-关机 1-运行中 2-报警中 |
|
fileName:'图纸', |
|
fileList:[ |
|
{name: 'food.jpeg', url: 'https://fuss10.elemecdn.com/3/63/4e7f3a15429bfda99bce42a18cdd1jpeg.jpeg?imageMogr2/thumbnail/360x360/format/webp/quality/100'}, |
|
{name: 'food2.jpeg', url: 'https://fuss10.elemecdn.com/3/63/4e7f3a15429bfda99bce42a18cdd1jpeg.jpeg?imageMogr2/thumbnail/360x360/format/webp/quality/100'} |
|
] |
|
}, |
|
]; |
|
this.page.total = this.data.length |
|
this.loading = false; |
|
}, |
|
} |
|
} |
|
</script> |
|
|
|
<style> |
|
|
|
</style> |