<template>
|
<a-spin :spinning="confirmLoading">
|
<vxe-toolbar>
|
<template v-slot:buttons>
|
<vxe-button status="primary" @click="insertEvent()">新增</vxe-button>
|
<vxe-button status="danger" @click="handleBatchRemove()">批量删除</vxe-button>
|
</template>
|
</vxe-toolbar>
|
<vxe-table
|
ref="editableDetailTable"
|
border
|
resizable
|
show-overflow
|
keep-source
|
:height="300"
|
:loading="confirmLoading"
|
:data="dataSource"
|
:edit-rules="validRules"
|
:edit-config="{trigger: 'manual', mode: 'row', showStatus: true}"
|
style="margin-top: 8px;">
|
<vxe-table-column type="checkbox" width="60"></vxe-table-column>
|
<vxe-table-column type="seq" width="60"></vxe-table-column>
|
<vxe-table-column title="ID" field="id" :visible="false"></vxe-table-column>
|
<vxe-table-column title="equipmentId" field="equipmentId" :visible="false"></vxe-table-column>
|
<vxe-table-column title="参数名称" field="parameterId" align="center"
|
:edit-render="{name : '$select', options: processParameterList, optionProps: {label:'parameterName', value:'id'}, props: {clearable:true}, events: {change:handleParamSelectChange}}"></vxe-table-column>
|
<vxe-table-column title="参数编码" field="parameterCode" align="center"></vxe-table-column>
|
<vxe-table-column title="计量单位" field="parameterUnit" align="center"></vxe-table-column>
|
<vxe-table-column title="参数范围" field="parameterPeriod" align="center"
|
:edit-render="{name : '$input'}"></vxe-table-column>
|
<vxe-table-column title="操作" width="160">
|
<template v-slot="{row}">
|
<template v-if="hasEditStatus(row)">
|
<vxe-button @click="saveRowEvent(row)">保存</vxe-button>
|
<vxe-button @click="cancelRowEvent(row)">取消</vxe-button>
|
</template>
|
<template v-else>
|
<vxe-button @click="editRowEvent(row)">编辑</vxe-button>
|
<vxe-button @click="handleRemove(row)">删除</vxe-button>
|
</template>
|
|
</template>
|
</vxe-table-column>
|
</vxe-table>
|
<a-pagination
|
v-bind="ipagination"
|
@change="handlePageChange"
|
@showSizeChange="handleShowSizeChange"
|
/>
|
</a-spin>
|
</template>
|
|
<script>
|
import { deleteAction, getAction, httpAction } from '@/api/manage'
|
|
export default {
|
name: 'EamEquipmentProcessModal',
|
data() {
|
return {
|
title: '操作',
|
confirmLoading: false,
|
url: {
|
add: '/eam/equipmentProcessParameters/add',
|
edit: '/eam/equipmentProcessParameters/edit',
|
list: '/eam/equipmentProcessParameters/list',
|
delete: '/eam/equipmentProcessParameters/delete',
|
deleteBatch: '/eam/equipmentProcessParameters/deleteBatch',
|
processParamList: '/eam/processParameters/listAll'
|
},
|
/* 分页参数 */
|
ipagination: {
|
current: 1,
|
pageSize: 10,
|
pageSizeOptions: ['10', '20', '30'],
|
showTotal: (total, range) => {
|
return range[0] + '-' + range[1] + ' 共' + total + '条'
|
},
|
showQuickJumper: true,
|
showSizeChanger: true,
|
total: 0,
|
size: 'small'
|
},
|
dataSource: [],
|
processParameterList: [],
|
queryParam: {
|
equipmentId: '-1'
|
},
|
validRules: {
|
parameterId: [
|
{ required: true, message: '请选择参数！' }
|
],
|
parameterPeriod: [
|
{ required: true, message: '请输入参数范围！' }
|
]
|
}
|
}
|
},
|
created() {
|
this.loadProcessParameterList()
|
},
|
methods: {
|
handleParamSelectChange($event, value) {
|
let parameter = this.processParameterList.find(item => item.id === value.value)
|
if (parameter) {
|
$event.row.parameterUnit = parameter.parameterUnit
|
$event.row.parameterCode = parameter.parameterCode
|
} else {
|
$event.row.parameterUnit = undefined
|
$event.row.parameterCode = undefined
|
}
|
},
|
loadProcessParameterList() {
|
getAction(this.url.processParamList).then(res => {
|
if (res.success) {
|
this.processParameterList = [...res.result]
|
}
|
})
|
},
|
onClearSelected() {
|
this.dataSource = []
|
this.queryParam.equipmentId = '-1'
|
this.ipagination.current = 1
|
this.ipagination.total = 0
|
},
|
loadData(args) {
|
if (!this.url.list) {
|
this.$message.error('请设置url.list属性!')
|
return
|
}
|
if (args === 1) {
|
this.ipagination.current = 1
|
}
|
// 封装查询条件
|
let formData = {
|
pageNo: args,
|
pageSize: this.ipagination.pageSize,
|
equipmentId: this.queryParam.equipmentId
|
}
|
// 调用查询数据接口
|
this.confirmLoading = true
|
getAction(this.url.list, formData).then(res => {
|
if (res.success) {
|
// 后台查询回来的 total，数据总数量
|
this.dataSource = res.result.records || res.result
|
if (res.result.total) {
|
this.ipagination.total = res.result.total
|
} else {
|
this.ipagination.total = 0
|
}
|
} else {
|
this.$message.warning(res.message)
|
}
|
}).finally(() => {
|
// 这里是无论成功或失败都会执行的方法，在这里关闭loading
|
this.confirmLoading = false
|
})
|
},
|
async insertEvent() {
|
let record = { equipmentId: this.queryParam.equipmentId }
|
let { row: newRow } = await this.$refs.editableDetailTable.insert(record)
|
await this.$refs.editableDetailTable.setActiveCell(newRow, 'parameterId')
|
},
|
async saveRowEvent(row) {
|
let that = this
|
const errMap = await that.$refs.editableDetailTable.validate().catch(errMap => errMap)
|
if (errMap) {
|
that.$message.warning('校验不通过,请补充必填项！')
|
return
|
}
|
that.confirmLoading = true
|
let httpurl = ''
|
let method = ''
|
if (!row.id) {
|
httpurl += that.url.add
|
method = 'post'
|
} else {
|
httpurl += that.url.edit
|
method = 'put'
|
}
|
let res = await httpAction(httpurl, row, method)
|
if (res.success) {
|
that.$message.success(res.message)
|
that.loadData(that.ipagination.current)
|
await that.$refs.editableDetailTable.clearActived()
|
} else {
|
that.$message.warning(res.message)
|
}
|
that.confirmLoading = false
|
},
|
handleRemove(row) {
|
let xTable = this.$refs.editableDetailTable
|
let that = this
|
this.$confirm({
|
content: `确认要删除吗？`,
|
onOk: () => {
|
if (row.id) {
|
//后端删除
|
deleteAction(that.url.delete, { id: row.id }).then((res) => {
|
if (res.success) {
|
that.reCalculatePage(1)
|
that.$message.success(res.message)
|
that.loadData(that.ipagination.current)
|
} else {
|
that.$message.warning(res.message)
|
}
|
})
|
} else {
|
//前端删除
|
xTable.remove(row)
|
}
|
},
|
onCancel: () => {
|
xTable.setActiveCell(row, 'parameterId')
|
}
|
})
|
},
|
handleBatchRemove(){
|
let xTable = this.$refs.editableDetailTable
|
let that = this
|
let checkboxRecords = xTable.getCheckboxRecords();
|
if(checkboxRecords && checkboxRecords.length > 0) {
|
let ids = checkboxRecords.map(record => record.id);
|
this.$confirm({
|
title: "确认删除",
|
content: "是否删除选中数据?",
|
onOk: function () {
|
that.confirmLoading = true;
|
deleteAction(that.url.deleteBatch, {ids: ids.join(',')}).then((res) => {
|
if (res.success) {
|
//重新计算分页问题
|
that.reCalculatePage(checkboxRecords.length)
|
that.$message.success(res.message);
|
that.loadData(that.ipagination.current);
|
} else {
|
that.$message.warning(res.message);
|
}
|
}).finally(() => {
|
that.confirmLoading = false;
|
});
|
}
|
});
|
} else {
|
that.$message.warning('请先选中数据行！');
|
}
|
},
|
editRowEvent(row) {
|
this.$refs.editableDetailTable.setActiveRow(row)
|
},
|
cancelRowEvent(row) {
|
let xTable = this.$refs.editableDetailTable
|
this.$confirm({
|
content: `确认要放弃编辑吗？`,
|
onOk: () => {
|
xTable.revertData()
|
},
|
onCancel: () => {
|
xTable.setActiveCell(row, 'parameterId')
|
}
|
})
|
},
|
hasEditStatus(row) {
|
const $table = this.$refs.editableDetailTable
|
if ($table) {
|
return $table.isActiveByRow(row)
|
}
|
return false
|
},
|
reCalculatePage(count) {
|
//总数量-count
|
let total = this.ipagination.total - count
|
//获取删除后的分页数
|
let currentIndex = Math.ceil(total / this.ipagination.pageSize)
|
//删除后的分页数<所在当前页
|
if (currentIndex < this.ipagination.current) {
|
this.ipagination.current = currentIndex
|
}
|
},
|
handlePageChange(current, pageSize){
|
this.$set(this.ipagination, 'current', current)
|
this.$emit('change', {current, pageSize})
|
},
|
handleShowSizeChange(current, pageSize){
|
this.$set(this.ipagination, 'pageSize', pageSize)
|
this.$emit('change', {current, pageSize})
|
},
|
}
|
}
|
</script>
|
|
<style lang="less" scoped>
|
|
</style>
|
