feat: 物料选择器添加分页功能,sap编号自动生成

master
zangch@mesnac.com 5 days ago
parent 9ef1fc161b
commit 35d2ca06d7

@ -32,7 +32,7 @@
<el-table <el-table
ref="materialTable" ref="materialTable"
v-loading="loading" v-loading="loading"
:data="displayList" :data="materialList"
height="420" height="420"
border border
highlight-current-row highlight-current-row
@ -53,7 +53,19 @@
</el-table> </el-table>
<div slot="footer" class="dialog-footer"> <div slot="footer" class="dialog-footer">
<span style="float: left; color: #909399;"> {{ displayList.length }} </span> <span style="float: left; color: #909399;"> {{ total }} </span>
<el-pagination
v-show="total > 0"
style="display: inline-block; margin-right: 12px;"
background
small
:current-page.sync="queryParams.pageNum"
:page-size.sync="queryParams.pageSize"
layout="prev, pager, next"
:total="total"
@current-change="getList"
@size-change="getList"
/>
<el-button @click="dialogVisible = false"> </el-button> <el-button @click="dialogVisible = false"> </el-button>
<el-button type="primary" @click="handleConfirm"> </el-button> <el-button type="primary" @click="handleConfirm"> </el-button>
</div> </div>
@ -61,7 +73,7 @@
</template> </template>
<script> <script>
import { listAllMaterialInfo } from '@/api/base/materialInfo' import { listMaterialInfo } from '@/api/base/materialInfo'
export default { export default {
name: 'MaterialSelector', name: 'MaterialSelector',
@ -78,13 +90,14 @@ export default {
data() { data() {
return { return {
loading: false, loading: false,
loaded: false, total: 0,
queryParams: { queryParams: {
pageNum: 1,
pageSize: 10,
materialCode: '', materialCode: '',
materialName: '' materialName: ''
}, },
materialList: [], materialList: [],
displayList: [],
currentRow: null currentRow: null
} }
}, },
@ -101,38 +114,35 @@ export default {
methods: { methods: {
handleOpen() { handleOpen() {
this.resetQuery() this.resetQuery()
if (!this.loaded) {
this.loadMaterialList()
return
}
this.syncCurrentSelection()
}, },
loadMaterialList() { getList() {
this.loading = true this.loading = true
listAllMaterialInfo() listMaterialInfo(this.queryParams)
.then(response => { .then(response => {
this.materialList = response.data || [] const data = response && response.data ? response.data : response
this.loaded = true this.materialList = data && data.rows ? data.rows : []
this.total = data && data.total ? data.total : this.materialList.length
this.syncCurrentSelection() this.syncCurrentSelection()
}) })
.catch(() => {
this.materialList = []
this.total = 0
this.currentRow = null
})
.finally(() => { .finally(() => {
this.loading = false this.loading = false
}) })
}, },
handleQuery() { handleQuery() {
const codeKeyword = (this.queryParams.materialCode || '').trim().toLowerCase() this.queryParams.pageNum = 1
const nameKeyword = (this.queryParams.materialName || '').trim().toLowerCase() this.getList()
this.displayList = this.materialList.filter(item => {
const materialCode = (item.materialCode || '').toLowerCase()
const materialName = (item.materialName || '').toLowerCase()
return materialCode.includes(codeKeyword) && materialName.includes(nameKeyword)
})
this.syncCurrentSelection()
}, },
resetQuery() { resetQuery() {
this.queryParams.pageNum = 1
this.queryParams.pageSize = 10
this.queryParams.materialCode = '' this.queryParams.materialCode = ''
this.queryParams.materialName = '' this.queryParams.materialName = ''
this.handleQuery() this.getList()
}, },
handleCurrentChange(row) { handleCurrentChange(row) {
this.currentRow = row this.currentRow = row
@ -150,7 +160,7 @@ export default {
this.dialogVisible = false this.dialogVisible = false
}, },
syncCurrentSelection() { syncCurrentSelection() {
this.currentRow = this.displayList.find(item => item.materialCode === this.selectedMaterialCode) || null this.currentRow = this.materialList.find(item => item.materialCode === this.selectedMaterialCode) || null
this.$nextTick(() => { this.$nextTick(() => {
if (this.$refs.materialTable) { if (this.$refs.materialTable) {
this.$refs.materialTable.setCurrentRow(this.currentRow || null) this.$refs.materialTable.setCurrentRow(this.currentRow || null)

@ -252,7 +252,7 @@
<el-dialog :title="title" :visible.sync="open" width="620px" append-to-body> <el-dialog :title="title" :visible.sync="open" width="620px" append-to-body>
<el-form ref="form" :model="form" :rules="rules" label-width="120px"> <el-form ref="form" :model="form" :rules="rules" label-width="120px">
<el-form-item label="SAP计划编号" prop="orderCode"> <el-form-item label="SAP计划编号" prop="orderCode">
<el-input v-model="form.orderCode" placeholder="请输入SAP计划编号"/> <el-input v-model="form.orderCode" placeholder="保存后自动生成" readonly/>
</el-form-item> </el-form-item>
<el-form-item label="工作中心" prop="workCenterCode"> <el-form-item label="工作中心" prop="workCenterCode">
<el-select v-model="form.workCenterCode" placeholder="请选择工作中心"> <el-select v-model="form.workCenterCode" placeholder="请选择工作中心">
@ -454,9 +454,6 @@ export default {
form: {}, form: {},
// //
rules: { rules: {
orderCode: [
{ required: true, message: 'SAP计划编号不能为空', trigger: 'blur' }
],
workCenterCode: [ workCenterCode: [
{ required: true, message: '请选择工作中心', trigger: 'change' } { required: true, message: '请选择工作中心', trigger: 'change' }
], ],
@ -557,6 +554,7 @@ export default {
factoryCode: '1301', factoryCode: '1301',
isFlag: 0, isFlag: 0,
isRelease: null, isRelease: null,
workCenterCode: '7',
createdBy: null, createdBy: null,
createdTime: null, createdTime: null,
updatedBy: null, updatedBy: null,

@ -21,23 +21,23 @@
<span v-else style="color: #909399;"> 待保养</span> <span v-else style="color: #909399;"> 待保养</span>
</template> </template>
</el-table-column> </el-table-column>
<el-table-column label="操作" align="center" width="180"> <!-- <el-table-column label="操作" align="center" width="180">-->
<template slot-scope="scope"> <!-- <template slot-scope="scope">-->
<el-button <!-- <el-button-->
v-if="scope.row.maintStatus !== 3" <!-- v-if="scope.row.maintStatus !== 3"-->
size="mini" <!-- size="mini"-->
type="success" <!-- type="success"-->
icon="el-icon-check" <!-- icon="el-icon-check"-->
@click="updateStatus(scope.row, 3)" <!-- @click="updateStatus(scope.row, 3)"-->
>完成</el-button> <!-- >完成</el-button>-->
<!-- <el-button <!--&lt;!&ndash; <el-button-->
v-if="scope.row.maintStatus === 3" <!-- v-if="scope.row.maintStatus === 3"-->
size="mini" <!-- size="mini"-->
type="text" <!-- type="text"-->
@click="viewDetail(scope.row)" <!-- @click="viewDetail(scope.row)"-->
>查看详情</el-button>--> <!-- >查看详情</el-button>&ndash;&gt;-->
</template> <!-- </template>-->
</el-table-column> <!-- </el-table-column>-->
</el-table> </el-table>
<div style="margin-top: 15px; color: #909399; font-size: 12px;"> <div style="margin-top: 15px; color: #909399; font-size: 12px;">
图例<span style="color: #67C23A;"> 已完成</span> | <span style="color: #409EFF;"> 保养中</span> | <span style="color: #909399;"> 待保养</span> 图例<span style="color: #67C23A;"> 已完成</span> | <span style="color: #409EFF;"> 保养中</span> | <span style="color: #909399;"> 待保养</span>
@ -197,13 +197,13 @@
<!-- @click="getJump(scope.row)"--> <!-- @click="getJump(scope.row)"-->
<!-- v-hasPermi="['dms:dmsBillsMaintInstance:view']"--> <!-- v-hasPermi="['dms:dmsBillsMaintInstance:view']"-->
<!-- >详情</el-button>--> <!-- >详情</el-button>-->
<el-button <!-- <el-button-->
size="mini" <!-- size="mini"-->
type="text" <!-- type="text"-->
icon="el-icon-info" <!-- icon="el-icon-info"-->
@click="getJump(scope.row)" <!-- @click="getJump(scope.row)"-->
v-hasPermi="['dms:dmsBillsMaintInstance:edit']" <!-- v-hasPermi="['dms:dmsBillsMaintInstance:edit']"-->
>详情</el-button> <!-- >详情</el-button>-->
</template> </template>
</el-table-column> </el-table-column>
</el-table> </el-table>

@ -192,11 +192,11 @@
<el-table v-loading="loading" :data="this.planMaintDetailLists" > <el-table v-loading="loading" :data="this.planMaintDetailLists" >
<!-- <el-table-column type="selection" width="55" align="center" />--> <!-- <el-table-column type="selection" width="55" align="center" />-->
<el-table-column label="计划ID" align="center" prop="planMaintId" /> <!-- <el-table-column label="计划ID" align="center" prop="planMaintId" />-->
<el-table-column label="设备名称" align="center" prop="deviceName" /> <el-table-column label="设备名称" align="center" prop="deviceName" />
<el-table-column label="保养部位" align="center" prop="maintStationCode" /> <el-table-column label="保养部位" align="center" prop="maintStationCode" />
<el-table-column label="保养标准" align="center" prop="maintProtocol" /> <el-table-column label="保养标准" align="center" prop="maintProtocol" />
<el-table-column label="操作描述" align="center" prop="operationDescription" /> <!-- <el-table-column label="操作描述" align="center" prop="operationDescription" />-->
</el-table> </el-table>

Loading…
Cancel
Save