<template>
|
<div>
|
<el-dialog
|
title="检验项管理"
|
top="5vh"
|
:visible.sync="inspectDialog"
|
@close="$emit('update:currshowlist', false)"
|
:show="currshowlist"
|
width="80%">
|
<avue-crud
|
ref="inspectDetail"
|
:data="dataList"
|
:option="option"
|
@row-save="addInspectHandler"
|
@row-del="delInspectHandler"
|
:page="page">
|
<template slot="inspectNameForm" slot-scope="scope">
|
<el-input
|
placeholder="请输入检验项目名称"
|
type="textarea"
|
v-model="scope.row.inspectName"
|
:rows="2" />
|
</template>
|
<template slot="inspectRequiredForm" slot-scope="scope">
|
<el-input
|
placeholder="请输入检验标准"
|
type="textarea"
|
v-model="scope.row.inspectRequired"
|
:rows="2" />
|
</template>
|
<template #menu="{size,row,index}">
|
<el-button v-if="row.children!=null" class="menu-button" :size="size" @click="addChildren(size,row,index)" type="text" icon="el-icon-circle-plus-outline">添加子项目</el-button>
|
<el-button v-if="row.children==null" class="menu-button" :size="size" @click="showUpdateDialog(size,row,index)" type="text" icon="el-icon-edit">编辑</el-button>
|
<el-button v-if="row.children==null" class="menu-button" :size="size" @click="delInspectHandler(size,row,index)" type="text" icon="el-icon-delete">删除</el-button>
|
</template>
|
</avue-crud>
|
</el-dialog>
|
<el-dialog
|
title="编辑"
|
:visible.sync="updateVisible"
|
width="50%">
|
<el-form :model="editForm" label-position="right" label-width="100px" ref="editForm">
|
<el-form-item label="检验项" prop="inspectName" :rules="{required:true,message:'检验项不能为空',trigger:'blur'}">
|
<el-input
|
disabled
|
placeholder="请输入检验项目名称"
|
type="textarea"
|
v-model="editForm.inspectName"
|
:rows="2" />
|
</el-form-item>
|
<el-form-item label="检验标准" prop="inspectRequired" :rules="{required:true,message:'检验标准不能为空',trigger:'blur'}">
|
<el-input
|
placeholder="请输入检验标准"
|
type="textarea"
|
v-model="editForm.inspectRequired"
|
:rows="2" />
|
</el-form-item>
|
</el-form>
|
<span slot="footer" class="dialog-footer">
|
<el-button @click="updateVisible = false">取 消</el-button>
|
<el-button type="primary" @click="updateInspectHandler">确 定</el-button>
|
</span>
|
</el-dialog>
|
<el-dialog
|
title="添加子项目"
|
:visible.sync="addChildrenVisible"
|
width="50%">
|
<el-form :model="addChildrenForm" label-position="right"
|
label-width="100px" ref="addChildrenForm">
|
<el-form-item label="检验项" prop="inspectName">
|
<el-input
|
placeholder="请输入检验项目名称"
|
type="textarea"
|
disabled
|
v-model="addChildrenForm.inspectName"
|
:rows="2" />
|
</el-form-item>
|
<el-form-item label="检验标准" prop="inspectRequired" :rules="{required:true,message:'检验标准不能为空',trigger:'blur'}">
|
<el-input
|
placeholder="请输入检验标准"
|
type="textarea"
|
v-model="addChildrenForm.inspectRequired"
|
:rows="2" />
|
</el-form-item>
|
</el-form>
|
<span slot="footer" class="dialog-footer">
|
<el-button @click="addChildrenVisible = false">取 消</el-button>
|
<el-button type="primary" @click="addChildrenHandler">确 定</el-button>
|
</span>
|
</el-dialog>
|
</div>
|
</template>
|
|
<script>
|
import {getInspectList,addInspect,updateInspect,deleteInspect} from '@/api/quality/packageInspectTemp'
|
export default {
|
props: {
|
currshowlist: {
|
type: Boolean,
|
default: false
|
},
|
paramObj: {
|
type: Object,
|
default: ()=>{
|
return null
|
}
|
}
|
},
|
watch: {
|
updateVisible(newVal){
|
if(!newVal){
|
this.$refs.editForm.resetFields()
|
}
|
},
|
addChildrenVisible(newVal){
|
if(!newVal){
|
this.$refs.addChildrenForm.resetFields()
|
}
|
},
|
currshowlist() {
|
this.inspectDialog = this.currshowlist
|
if (this.currshowlist) {
|
this.$nextTick(() => {
|
this.getData()
|
})
|
}
|
}
|
},
|
data(){
|
return {
|
addChildrenVisible: false,
|
addChildrenForm: {
|
inspectName: null,
|
inspectRequired: null,
|
},
|
editForm: {
|
inspectName: null,
|
inspectRequired: null,
|
},
|
updateVisible: false,
|
inspectDialog: false,
|
dataList: [],
|
page:{
|
currentPage: 1,
|
pageSize: 20,
|
total: 0
|
},
|
option: {
|
rowKey: 'id',
|
rowParentKey: 'id',
|
defaultExpandAll: true,
|
dialogWidth: '60%',
|
menu: true,
|
addBtn: true,
|
editBtn: false,
|
delBtn: false,
|
border: true,
|
index: true,
|
height: 350,
|
indexLabel: '序号',
|
align: 'center',
|
refreshBtn: false,
|
columnBtn: false, // 是否显示显影按钮H
|
headerAlign: 'center',
|
column: [{
|
label: '检验项',
|
prop: 'inspectName',
|
overHidden: true,
|
formslot: true,
|
}, {
|
label: '检验标准',
|
prop: 'inspectRequired',
|
overHidden: true,
|
formslot: true,
|
}]
|
},
|
}
|
},
|
methods:{
|
addChildren(size,row,index){
|
this.addChildrenForm.inspectName = row.inspectName
|
this.addChildrenVisible = true
|
},
|
addInspectHandler(row,done,loading){
|
const _than = this
|
let obj = {
|
parentId: this.paramObj.id,
|
...row
|
}
|
addInspect(obj).then(res=>{
|
if(res.status===200){
|
_than.getData()
|
_than.$message.success("添加成功")
|
}
|
}).catch(error=>{
|
console.error(error)
|
})
|
done()
|
},
|
delInspectHandler(size,row,index){
|
const _than = this
|
this.$confirm('此操作将永久删除该检验项, 是否继续?', '提示', {
|
confirmButtonText: '确定',
|
cancelButtonText: '取消',
|
type: 'warning'
|
}).then(() => {
|
deleteInspect(row.id).then(res=>{
|
if(res.status===200){
|
_than.$message.success("删除成功")
|
_than.getData()
|
}
|
}).catch(error=>{
|
console.error(error)
|
})
|
}).catch(() => {});
|
},
|
showUpdateDialog(size,row,index){
|
this.editForm = {
|
id: row.id,
|
inspectName: row.templateName,
|
inspectRequired: row.inspectRequired
|
}
|
this.updateVisible = true
|
},
|
updateInspectHandler(){
|
this.$refs.editForm.validate(valid=>{
|
if(valid){
|
updateInspect(this.editForm).then(res=>{
|
if(res.status===200){
|
this.$message.success("修改成功")
|
this.getData()
|
this.updateVisible = false
|
}
|
}).catch(error=>{
|
console.error(error)
|
})
|
}
|
})
|
},
|
addChildrenHandler(){
|
const _than = this
|
this.$refs.addChildrenForm.validate(valid=>{
|
if(valid){
|
let obj = {
|
parentId: this.paramObj.id,
|
...this.addChildrenForm
|
}
|
addInspect(obj).then(res=>{
|
if(res.status===200){
|
_than.getData()
|
_than.$message.success("添加成功")
|
_than.addChildrenVisible = false
|
}
|
}).catch(error=>{
|
console.error(error)
|
})
|
}
|
})
|
},
|
getData(){
|
getInspectList(this.paramObj.id).then(res=>{
|
if(res.status===200){
|
let dataList = res.data.data.records
|
dataList.forEach(ele=>{
|
ele.id = Math.random()
|
})
|
this.dataList = dataList
|
this.page.total = res.data.data.total
|
}
|
}).catch(error=>{
|
console.error(error)
|
})
|
},
|
}
|
}
|
</script>
|
|
<style scope>
|
.avue-crud__pagination {
|
position: relative;
|
padding: 0px 0 0px 20px;
|
text-align: right;
|
z-index: 10;
|
}
|
</style>
|
