Files
2026-05-29 13:58:41 +08:00

610 lines
23 KiB
Vue
Raw Blame History

This file contains ambiguous Unicode characters
This file contains Unicode characters that might be confused with other characters. If you think that this is intentional, you can safely ignore this warning. Use the Escape button to reveal them.
<template>
<div class="app-container">
<el-card>
<div>
<span style="line-height: 25px;font-size: 20px">设备对应点检类型维护</span>
<!-- <div style="float: right;margin: 5px">-->
<!-- <el-select v-model="OPnameValue" filterable size="small" placeholder="工位号" style="width: 110px">-->
<!-- <el-option-->
<!-- v-for="item in OPname"-->
<!-- :key="item.value"-->
<!-- :label="item.label"-->
<!-- :value="item.value"/>-->
<!-- </el-select>-->
<!-- <span>选择月份</span>-->
<!-- <el-date-picker v-model="monthssss" size="small" type="month" value-format="yyyy-MM" format="yyyy-MM" style="width: 120px" placeholder="选择月"/>-->
<!-- <el-button v-positive="'loading'" :disabled="false" size="small" type="warning" style="margin-right: 50px" plain @click="exportOut()">导出日点检表</el-button>-->
<!-- </div>-->
</div>
<el-table v-loading="loading1" :data="tableData1" stripe height="420" border>
<el-table-column align="center" label="序号" type="index" width="50"/>
<el-table-column align="center" label="工位号">
<template slot-scope="scope">
{{ scope.row.工位号 }}
</template>
</el-table-column>
<el-table-column align="center" label="工位名称">
<template slot-scope="scope">
{{ scope.row.工位名称 }}
</template>
</el-table-column>
<el-table-column align="center" label="点检表类型" min-width="150">
<template slot-scope="scope">
<el-select v-model="tableData1[scope.$index].点检表类型流水号" filterable size="small" placeholder="点检表类型" style="margin:3px 10px;width: 150px" @change="editType(scope.row)">
<el-option
v-for="item in 点检表类型"
:key="item.value"
:label="item.label"
:value="item.value"/>
</el-select>
</template>
</el-table-column>
<el-table-column align="center" label="点检指导图片" show-overflow-tooltip min-width="200">
<template slot-scope="scope">
<el-image :src="scope.row.点检图片url" :preview-src-list="[scope.row.点检图片url]" style="width: 50px; height: 50px"/>
</template>
</el-table-column>
<el-table-column align="center" label="操作" width="120">
<template slot-scope="scope">
<el-button type="text" size="mini" icon="el-icon-edit" @click="uploadShow(scope.row)"/>
</template>
</el-table-column>
</el-table>
</el-card>
<el-card>
<el-col :span="6">
<span>点检类型维护</span>
<el-button type="distribution" icon="el-icon-circle-plus-outline" size="small" style="margin: 10px 0 3px 10px" @click="handleAdd1('form1')" >新增</el-button>
<el-table v-loading="loading2" :data="tableData2" height="300" highlight-current-row border @row-click="getTableData3">
<el-table-column align="center" label="序号" type="index" width="50"/>
<el-table-column align="center" label="点检类型名称" min-width="150">
<template slot-scope="scope">
<template v-if="scope.row.edit">
<el-input v-model="scope.row.点检表类型名称" style="width:120px;margin-right:3px" clearable size="mini" width="120"/>
</template>
<span v-else>{{ scope.row.点检表类型名称 }}</span>
</template>
</el-table-column>
<el-table-column align="center" label="操作" width="120">
<template slot-scope="scope">
<el-button v-if="scope.row.edit" type="text" size="mini" icon="el-icon-circle-check-outline" @click="confirmEdit1(scope.row)">确定</el-button>
<el-button v-if="scope.row.edit" class="cancel-btn" size="mini" type="text" @click="cancelEdit1(scope.$index, scope.row)">取消</el-button>
<el-button v-else type="text" size="mini" icon="el-icon-edit" @click="scope.row.edit=!scope.row.edit"/>
<el-button v-if="!scope.row.edit" type="text" size="mini" plain icon="el-icon-delete" @click="openDelete1(scope.row)"/>
</template>
</el-table-column>
</el-table>
</el-col>
<el-col :span="18">
<span>点检内容维护</span>
<el-button type="distribution" icon="el-icon-circle-plus-outline" size="small" style="margin: 10px 0 3px 10px" @click="handleAdd2('form2')" >新增</el-button>
<el-table v-loading="loading3" :data="tableData3" height="300" highlight-current-row border>
<el-table-column align="center" label="序号" type="index" width="50"/>
<el-table-column align="center" label="保养周期" min-width="110">
<template slot-scope="scope">
<template v-if="scope.row.edit">
<el-select v-model="tableData3[scope.$index].保养周期" filterable size="small" placeholder="点检表类型" style="margin:3px 10px;width: 150px" @change="editType(scope.row)">
<el-option
v-for="item in 保养周期"
:key="item.value"
:label="item.label"
:value="item.value"/>
</el-select>
</template>
<template v-else slot-scope="scope">
<span v-if="scope.row.保养周期 === 1"></span>
<span v-if="scope.row.保养周期 === 7"></span>
<span v-if="scope.row.保养周期 === 30"></span>
<span v-if="scope.row.保养周期 === 90"></span>
<span v-if="scope.row.保养周期 === 365"></span>
</template>
</template>
</el-table-column>
<el-table-column align="center" label="保养项目" min-width="250">
<template slot-scope="scope">
<template v-if="scope.row.edit">
<el-input v-model="scope.row.保养项目" style="width: 90%;margin-right:3px" clearable size="mini" width="120"/>
</template>
<span v-else>{{ scope.row.保养项目 }}</span>
</template>
</el-table-column>
<el-table-column align="center" label="操作" width="120">
<template slot-scope="scope">
<el-button v-if="scope.row.edit" type="text" size="mini" icon="el-icon-circle-check-outline" @click="confirmEdit2(scope.row)">确定</el-button>
<el-button v-if="scope.row.edit" class="cancel-btn" size="mini" type="text" @click="cancelEdit2(scope.$index, scope.row)">取消</el-button>
<el-button v-else type="text" size="mini" icon="el-icon-edit" @click="scope.row.edit=!scope.row.edit"/>
<el-button v-if="!scope.row.edit" type="text" size="mini" plain icon="el-icon-delete" @click="openDelete2(scope.row)"/>
</template>
</el-table-column>
</el-table>
</el-col>
</el-card>
<el-dialog v-el-drag-dialog :visible.sync="dialogFormVisible" title="上传图片" center style="height: 800px" width="17%">
<el-upload
id="invoiceScan"
ref="upload"
:on-remove="handelLimitStyle"
:on-change="handelLimit"
:multiple="true"
:auto-upload="false"
:on-success="uploadSuccess"
:on-preview="handlePictureCardPreview"
:before-upload="beforeUpload"
:on-exceed="warningExceed"
:limit="limit"
:data="Data"
:action="upload"
style="margin-left: 60px"
list-type="picture-card">
<i class="el-icon-plus"/>
</el-upload>
<div slot="footer" class="dialog-footer">
<el-button @click="dialogFormVisible=false">取消</el-button>
<el-button type="primary" style="width: 70px" @click="submitPicture()">确定</el-button>
</div>
</el-dialog>
<el-dialog :visible.sync="dialogFormVisible1" title="新增" center width="500px">
<el-form ref="form1" :model="form1" :rules="rules" label-position="right" label-width="160px">
<el-form-item label="点检类型名称" prop="点检类型名称">
<el-input v-model="form1.点检类型名称" placeholder="点检类型名称" clearable size="small" style="width:180px;"/>
</el-form-item>
</el-form>
<div slot="footer" class="dialog-footer">
<el-button @click="callOff1('form1')">取消</el-button>
<el-button v-positive="'loading'" :disabled="false" type="primary" @click="submit1('form1')" >确定</el-button>
</div>
</el-dialog>
<el-dialog :visible.sync="dialogFormVisible2" title="新增" center width="500px">
<el-form ref="form2" :model="form2" :rules="rules" label-position="right" label-width="160px">
<el-form-item label="保养项目" prop="保养项目">
<el-input v-model="form2.保养项目" placeholder="保养项目" clearable size="small" style="width:180px;"/>
</el-form-item>
<el-form-item label="保养周期" prop="保养周期">
<el-select v-model="form2.保养周期" filterable size="small" placeholder="保养周期" style="width: 180px">
<el-option
v-for="item in 保养周期"
:key="item.value"
:label="item.label"
:value="item.value"/>
</el-select>
</el-form-item>
</el-form>
<div slot="footer" class="dialog-footer">
<el-button @click="callOff2('form2')">取消</el-button>
<el-button v-positive="'loading'" :disabled="false" type="primary" @click="submit2('form2')" >确定</el-button>
</div>
</el-dialog>
</div>
</template>
<script>
import { getTableData1, getTableData2, getTableData3, editType, confirmEdit1, confirmEdit2, selectCount, openDelete1, openDelete2, submit1, submit2, exportOut } from '@/api/ManufacturingCenter/maintainInformation'
import $ from 'jquery'
import { url } from '@/utils/request'
export default {
data() {
return {
opCode: '',
limit: 1,
Data: {},
upload: url,
点检表类型: [],
tableData1: [],
loading1: false,
tableData2: [],
loading2: false,
点检表类型流水号: '',
保养周期: [{
value: 1,
label: '日'
}, {
value: 7,
label: '周'
}, {
value: 30,
label: '月'
}, {
value: 90,
label: '季'
}, {
value: 365,
label: '年'
}],
tableData3: [],
loading3: false,
form1: {
点检类型名称: ''
},
dialogFormVisible: false,
dialogFormVisible1: false,
form2: {
保养项目: '',
保养周期: ''
},
dialogFormVisible2: false,
rules: { // 表单验证规则
点检类型名称: [{ required: true, message: '请输入点检类型名称', trigger: 'blur' }],
保养项目: [{ required: true, message: '请输入保养项目', trigger: 'blur' }],
保养周期: [{ required: true, message: '请选择保养周期', trigger: 'change' }]
},
OPnameValue: '',
OPname: [],
monthssss: '',
tableData: [],
设备名称: '',
设备编号: ''
}
},
created() {
this.getTableData1()
this.getTableData2()
this.getStationNumber()
},
methods: {
getStationNumber() {
this.OPname = []
var param = []
var Data = this.CreateData('11', 'MES_计划BOM_工位与名称_查询', param)
this.ExecDatabase(Data).then(response => {
for (let i = 0; i < response.data.length; i++) {
this.OPname.push({
label: response.data[i].工位号,
value: response.data[i].工位号
})
}
})
},
getTableData1() {
this.tableData1 = []
this.loading1 = true
getTableData1().then(response => {
for (let i = 0; i < response.data.length; i++) {
if (response.data[i]['点检图片']) {
response.data[i]['点检图片url'] = 'data:image/png;base64,' + response.data[i]['点检图片']
}
}
this.tableData1 = response.data
this.loading1 = false
})
},
// 编辑 表1
editType(row) {
editType(row.点检表类型流水号, row.ID)
},
getTableData2() {
this.点检表类型 = []
this.tableData2 = []
this.loading2 = true
getTableData2().then(response => {
for (let i = 0; i < response.data.length; i++) {
this.点检表类型.push({
label: response.data[i].点检表类型名称,
value: response.data[i].点检表类型流水号
})
}
if (response.data.length !== 0) {
for (let i = 0; i < response.data.length; i++) {
this.tableData2.push({
点检表类型流水号: response.data[i].点检表类型流水号,
点检表类型名称: response.data[i].点检表类型名称,
点检表类型流水号_原: response.data[i].点检表类型流水号,
点检表类型名称_原: response.data[i].点检表类型名称,
edit: false
})
}
}
this.loading2 = false
})
},
// 取消编辑
cancelEdit1(index, row) {
row.edit = false
row.点检表类型名称 = this.tableData2[index].点检表类型名称_原
this.$message('取消修改')
},
// 编辑 表2
confirmEdit1(row) {
confirmEdit1(row.点检表类型名称, row.点检表类型流水号).then(response => {
row.edit = false
})
},
// 删除 表2
openDelete1(row) {
this.$confirm('此操作将永久删除该行信息, 是否继续?', '提示', {
confirmButtonText: '确定',
cancelButtonText: '取消',
type: 'warning'
}).then(() => {
selectCount(row.点检表类型流水号).then(response => {
if (response.data.length === 0) {
openDelete1(row.点检表类型流水号).then(() => {
this.tableData3 = []
this.getTableData2()
})
} else {
var message
message = '工位:'
for (let i = 0; i < response.data.length; i++) {
if (i === response.data.length - 1) {
message = message + response.data[i].工位号
} else {
message = message + response.data[i].工位号 + '、'
}
}
message = message + '占用,请先将以上工位改为其他点检类型'
this.$message.error(message)
}
})
}).catch(() => {
this.$message({
type: 'info',
message: '已取消删除'
})
})
},
// 新增 表2
handleAdd1(formName) {
if (this.$refs[formName] !== undefined) {
this.$refs[formName].resetFields()
}
this.form1.点检类型名称 = ''
this.dialogFormVisible1 = true
},
callOff1() {
this.dialogFormVisible1 = false
},
submit1(formName) {
this.$refs[formName].validate((valid) => {
if (valid) {
submit1(this.form1.点检类型名称).then(response => {
this.getTableData2()
this.dialogFormVisible1 = false
})
} else {
return false
}
})
},
getTableData3(row) {
this.点检表类型流水号 = row.点检表类型流水号
this.tableData3 = []
this.loading3 = true
getTableData3(row.点检表类型流水号).then(response => {
if (response.data.length !== 0) {
for (let i = 0; i < response.data.length; i++) {
this.tableData3.push({
ID: response.data[i].ID,
保养周期: response.data[i].保养周期,
保养项目: response.data[i].保养项目,
保养周期_原: response.data[i].保养周期,
保养项目_原: response.data[i].保养项目,
edit: false
})
}
}
this.loading3 = false
})
},
// 取消编辑
cancelEdit2(index, row) {
row.edit = false
row.保养周期 = this.tableData3[index].保养周期_原
row.保养项目 = this.tableData3[index].保养项目_原
this.$message('取消修改')
},
// 编辑 表3
confirmEdit2(row) {
confirmEdit2(row.保养周期, row.保养项目, row.ID).then(response => {
row.edit = false
})
},
// 删除 表3
openDelete2(row) {
this.$confirm('此操作将永久删除该行信息, 是否继续?', '提示', {
confirmButtonText: '确定',
cancelButtonText: '取消',
type: 'warning'
}).then(() => {
openDelete2(row.ID).then(() => {
this.tableData3 = []
this.loading3 = true
getTableData3(this.点检表类型流水号).then(response => {
if (response.data.length !== 0) {
for (let i = 0; i < response.data.length; i++) {
this.tableData3.push({
ID: response.data[i].ID,
保养周期: response.data[i].保养周期,
保养项目: response.data[i].保养项目,
保养周期_原: response.data[i].保养周期,
保养项目_原: response.data[i].保养项目,
edit: false
})
}
}
this.loading3 = false
})
})
}).catch(() => {
this.$message({
type: 'info',
message: '已取消删除'
})
})
},
// 新增 表3
handleAdd2(formName) {
if (this.$refs[formName] !== undefined) {
this.$refs[formName].resetFields()
}
this.form2.保养项目 = ''
this.form2.保养周期 = ''
if (this.点检表类型流水号) {
this.dialogFormVisible2 = true
} else {
this.$message.error('请先选择一个点检类型')
}
},
callOff2() {
this.dialogFormVisible2 = false
},
submit2(formName) {
this.$refs[formName].validate((valid) => {
if (valid) {
if (this.点检表类型流水号) {
submit2(this.点检表类型流水号, this.form2.保养项目, this.form2.保养周期).then(response => {
this.tableData3 = []
this.loading3 = true
getTableData3(this.点检表类型流水号).then(response => {
if (response.data.length !== 0) {
for (let i = 0; i < response.data.length; i++) {
this.tableData3.push({
ID: response.data[i].ID,
保养周期: response.data[i].保养周期,
保养项目: response.data[i].保养项目,
保养周期_原: response.data[i].保养周期,
保养项目_原: response.data[i].保养项目,
edit: false
})
}
}
this.loading3 = false
})
})
}
this.dialogFormVisible2 = false
} else {
return false
}
})
},
exportOut() {
this.tableData = []
if (this.OPnameValue) {
if (this.monthssss) {
var year = this.monthssss.split('-')[0]
var month = this.monthssss.split('-')[1]
exportOut(this.OPnameValue, year, month).then(response => {
if (response.data.length !== 0) {
this.设备名称 = response.data[0].设备名称
this.设备编号 = response.data[0].设备编号
this.tableData = response.data
}
}).then(() => {
if (this.tableData.length !== 0) {
this.Out()
} else {
this.$message.error('暂无该月数据')
}
})
} else {
this.$message.error('请选择月份')
}
} else {
this.$message.error('请选择工位')
}
},
Out() {
const htmlNode = $('#dianjianbiao').html()
const body = $('body')
body.children().hide()
const printNode = $(htmlNode)
body.append(printNode)
window.print()
body.children().not('script').show()
body.children().not('#app').hide()
printNode.remove()
},
uploadShow(row) {
this.opCode = row.工位号
this.dialogFormVisible = true
},
handelLimit() {
var obj = document.getElementsByClassName('el-upload--picture-card')
if (obj[0].style.display === '') {
for (var i = 0; i < obj.length; i++) {
obj[i].style.display = 'none'
}
}
},
handelLimitStyle() {
var obj = document.getElementsByClassName('el-upload--picture-card')
if (obj[0].style.display === 'none') {
for (var i = 0; i < obj.length; i++) {
obj[i].style.display = 'block'
}
}
},
warningExceed() {
this.$message.error('仅可上传一张照片')
},
beforeUpload(file) { // 上传前检测
const isJPG = /^image\/.*/.test(file.type)
if (!isJPG) {
this.$message.error('只能上传图片。。')
}
return isJPG
},
uploadSuccess(res) { // 上传成功回调
this.dialogFormVisible = false
this.$refs.upload.clearFiles()
var obj = document.getElementsByClassName('el-upload--picture-card')
if (obj[0].style.display === 'none') {
for (var i = 0; i < obj.length; i++) {
obj[i].style.display = 'block'
}
}
this.getTableData1()
},
handlePictureCardPreview(file) {
this.dialogImageUrl = file.url
this.dialogVisiblePictureCard = true
},
submitPicture() {
var param = []
param[0] = ['工位号', this.opCode]
param[1] = ['文件名称', '']
param[2] = ['文件后缀', '']
param[3] = ['文件内容', null]
var Data1 = this.CreateData('15', '基础数据_设备工位点检表图片_保存图片', param)
this.Data.param = Data1
this.$refs.upload.submit()
this.dialogFormVisible = false
},
callOff() {
this.dialogFormVisible = false
this.$refs['form'].resetFields()
}
}
}
</script>
<style lang="scss">
.NewlyAdded{
background:rgb(253,246,236);
border-color: #ff9759;
color: #ff9759;
&:hover{
background: #ff9759;
border-color: #ff9759;
color: white;
}
&:focus{
background: #ff9759;
border-color: #ff9759;
color: white;
}
}
#dianjianbiao {
/*.el-table td, .el-table th.is-leaf,.el-table--border, .el-table--group{*/
/*border-color: black !important;*/
/*}*/
/*.el-table--border::after, .el-table--group::after, .el-table::before{*/
/*background-color: black !important;*/
/*}*/
/*th {*/
/*background: white !important;*/
/*color: black !important;*/
/*}*/
}
</style>