中航光电热表web
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.
 
 
 
 

308 lines
12 KiB

<template>
<div>
<avue-crud :height="460" :option="option" v-model:search="search" :table-loading="loading" :data="data" v-model:page="page" :before-open="beforeOpen"
v-model="form" ref="crud" @row-update="rowUpdate"
@search-change="searchChange" @search-reset="searchReset" @selection-change="selectionChange"
@current-change="currentChange" @size-change="sizeChange" @refresh-change="refreshChange" @on-load="onLoad">
<template #menu-left>
<el-button type="primary" @click="handleAdd">新 增</el-button>
<!-- <el-button type="primary" @click="handleSet">批量设置分类</el-button> -->
</template>
<template #menu="scope">
<el-button type="text" @click="handleEdit(scope.row,scope.$index)">修改</el-button>
<el-button type="text" @click="handleDelete(scope.row)">删除</el-button>
</template>
</avue-crud>
<el-dialog title="项目" append-to-body v-model="showDialog" width="60%">
<div>
<el-button type="primary" @click="insertEvent()">插入一行</el-button>
<el-button plain type="danger" @click="remove">删除选择行</el-button>
<!-- <el-button type="primary" @click="handleSave">保存</el-button> -->
</div>
<div style="margin-top: 20px;">
<el-table :data="tidList" @selection-change="selectionChangeProject" @select="selectChange">
<el-table-column type="selection" width="55px"></el-table-column>
<el-table-column label="编码" prop="code">
<template #default="scope">
<el-input v-model="scope.row.code"></el-input>
</template>
</el-table-column>
<el-table-column label="名称" prop="name">
<template #default="scope">
<el-input v-model="scope.row.name"></el-input>
</template>
</el-table-column>
<el-table-column label="类型" prop="itemType">
<template #default="scope">
<el-select v-model="scope.row.itemType" placeholder="请选择" style="width: 240px">
<el-option
v-for="item in typeList"
:key="item.id"
:label="item.dictValue"
:value="item.dictKey"
/>
</el-select>
</template>
</el-table-column>
</el-table>
</div>
<template #footer>
<span class="dialog-footer">
<el-button @click="showDialog = false">取 消</el-button>
<el-button type="primary" @click="handleSave"> </el-button>
</span>
</template>
</el-dialog>
</div>
</template>
<script>
import {getList,getType,addItem,getDetail,deleteItem,editItem} from '@/api/productionInspection/trialItem'
export default {
data() {
return {
loading: false,
data: [],
form: {},
showDialog: false,
tidList: [],
rowId: null, //选中的id
projectArr: [],
deleteTidArr: [], //删除的数据
page: {
pageSize: 10,
currentPage: 1,
total: 0,
},
search:{},
option: {
tip: false,
align: 'center',
height: 'auto',
searchLabelWidth: 120,
simplePage: true,
searchShow: true,
searchMenuSpan: 6,
searchIcon: true,
searchIndex: 3,
tree: false,
border: true,
selection: false,
viewBtn: false,
editBtn: false,
addBtn: false,
delBtn: false,
editBtnText: '修改',
viewBtnText: '详情',
labelWidth: 120,
menuWidth: 120,
dialogWidth: 800,
dialogClickModal: false,
searchEnter: true,
excelBtn: false,
filterBtn: true,
searchShowBtn: false,
excelBtn: true,
index: true,
showOverflowTooltip: true,
searchLabelPosition: 'left',
searchGutter: 24,
searchSpan: 6,
menuAlign: 'left',
gridBtn: false,
searchMenuPosition: 'right',
addBtnIcon: ' ',
viewBtnIcon: ' ',
delBtnIcon: ' ',
editBtnIcon: ' ',
column: [
{
label: '编码',
prop: 'code',
addDisplay: false,
// editDisplay: false,
span: 24,
search: true,
searchLabelWidth:50,
rules: [
{
required: true,
message: '请输入编码',
trigger: 'click',
},
],
},
{
label: '名称',
prop: 'name',
addDisplay: false,
// editDisplay: false,
span: 24,
search: true,
searchLabelWidth:50,
rules: [
{
required: true,
message: '请输入名称',
trigger: 'click',
},
],
},
{
label: '类型',
prop: 'itemType',
span: 24,
search: true,
searchLabelWidth:50,
type:"select",
dicUrl:'/blade-system/dict/dictionary?code=InspectionItem-ItemType',
props: { label: 'dictValue', value: 'dictKey' },
// dicData:[
// {
// label:'性能检测',
// value:1
// },
// {
// label:'尺寸检测',
// value:2
// },
// ],
rules: [
{
required: true,
message: '请输入名称',
trigger: 'click',
},
],
},
]
},
typeList:[]
}
},
mounted() {
this.getTypeList()
},
methods: {
getTypeList(){
getType().then(res =>{
this.typeList = res.data.data
})
},
handleAdd() {
this.showDialog = true
this.tidList = []
},
insertEvent() {
const record = { _select: false };
this.tidList.push(record)
},
searchChange(params, done){
this.page.currentPage = 1;
this.onLoad();
done();
},
searchReset(){
this.page.currentPage = 1
this.search = {}
this.onLoad()
},
currentChange(currentPage) {
this.page.currentPage = currentPage;
},
sizeChange(pageSize) {
this.page.pageSize = pageSize;
},
refreshChange() {
this.onLoad();
},
remove() {
let arr = this.tidList.filter(item => item._select)
if (arr.length != 0) {
this.$confirm('确定将选择数据删除?', {
confirmButtonText: '确定',
cancelButtonText: '取消',
type: 'warning',
}).then(() => {
if (this.rowId) {
let deleteData = this.tidList.filter(item => item._select)
this.deleteTidArr = deleteData.filter(item => item.tidId)
}
let deleteArr = this.tidList.filter(item => !item._select)
this.tidList = deleteArr
})
} else {
this.$message.error('请至少选择一条数据进行操作!')
}
},
selectChange(list, row) {
row._select = !row._select
},
handleEdit(row,index) {
getDetail({id:row.id}).then(res =>{
res.data.data.itemType = res.data.data.itemType + ''
this.$refs.crud.rowEdit(res.data.data, index)
})
},
rowUpdate(form, index, done, loading){
editItem(form).then(res =>{
if(res.data.code == 200){
this.$message.success('修改成功')
this.onLoad()
done()
}
})
},
handleSave() {
if (this.tidList.length == 0) {
this.$message.error('请至少填写一条数据')
} else {
let tmp = this.tidList.find(item => !item.code || !item.name || !item.itemType)
if (tmp) {
this.$message.error('数据请填写完整!')
}else{
addItem(this.tidList).then(res =>{
if(res.data.code == 200){
this.$message.success('新增成功')
this.showDialog = false
this.onLoad()
}
})
}
}
},
handleDelete(row){
this.$confirm('确定将选择数据删除?', {
confirmButtonText: '确定',
cancelButtonText: '取消',
type: 'warning',
}).then(() => {
deleteItem({ids:row.id}).then(res =>{
if(res.data.code == 200){
this.$message.success('删除成功')
this.onLoad()
}
})
})
},
onLoad() {
this.loading = true
getList({current:this.page.currentPage,size:this.page.pageSize,...this.search}).then(res =>{
this.data = res.data.data.records
this.page.total = res.data.data.total
this.loading = false
})
// this.data = [
// { amId: 3, code: '003', name: '泄漏率检测' },
// { amId: 4, code: '002', name: '外观检测' },
// { amId: 5, code: '001', name: '厚度检测' },
// ]
// this.loading = false
},
}
}
</script>
<style></style>