meswork/JY1.0
6
0
Fork 0
Code Issues Pull Requests Actions Packages Projects Releases Wiki Activity

2024-09-09 修改了大部分下拉组件为模糊筛选，减轻前端渲染压力

Browse Source
This commit is contained in:
zhangshun
2024-09-09 15:26:17 +08:00
parent fe5d3b70df
commit 563132273c
717 changed files with 107188 additions and 138520 deletions
Download Patch File Download Diff File Expand all files Collapse all files

273
src/views/WarehouseManagement/LocationManagement/index.vue Normal file
View File

@@ -0,0 +1,273 @@
<template>
<div class="app-container">
<el-card style="height: 850px">
<div style="margin-top: 7px; margin-bottom: 7px">
<el-input v-model="LocationName" style="width: 200px " size="small" clearable placeholder="库位"/>
<el-button style="margin-left: 7px;width: 80px" type="primary" plain size="small" @click="searchTable()">查询</el-button>
<el-button type="distribution" size="small" @click="addLocation()">增加库位</el-button>
<el-button v-show="true" type="success" plain size="small" @click="Pronters()">批量打印</el-button>
</div>
<div>
<el-table
v-loading="loading"
:data="tableData"
highlight-current-row
show-summary
border
stripe
size="small"
style="width: 411px"
height="740px"
@row-dblclick="changeState"
@selection-change="handleSelectionChange">
<el-table-column type="selection" align="center" width="50px"/>
<el-table-column :width="setColumnWidth('序号')" type="index" label="序号" align="center"/>
<el-table-column label="库位" align="center" show-overflow-tooltip>
<template slot-scope="scope">
<template v-if="scope.row.edit">
<el-input v-model="scope.row.货位名称" style="width:100%" clearable size="mini" />
</template>
<span v-else>{{ scope.row.货位名称 }}</span>
</template>
</el-table-column>
<el-table-column :width="setColumnWidth('操作')" label="操作" align="center">
<template slot-scope="scope">
<el-button v-if="scope.row.edit" type="text" size="mini" icon="el-icon-circle-check-outline" @click="confirmEdit(scope.row)">确定</el-button>
<el-button v-if="scope.row.edit" class="cancel-btn" size="mini" type="text" @click="cancelEdit(scope.$index, scope.row)">取消</el-button>
<el-button v-else type="text" size="mini" @click="scope.row.edit=!scope.row.edit">编辑</el-button>
</template>
</el-table-column>
</el-table>
</div>
<div class="block" style="margin-top: 10px;">
<el-pagination
:current-page="pageCurrent"
:page-sizes="[10, 20, 30, 40, 100]"
:page-size="pageSize"
:total="total"
layout="total, sizes, prev, pager, next, jumper"
@size-change="handleSizeChanges"
@current-change="handleCurrentChanges"/>
</div>
</el-card>
<el-dialog v-el-drag-dialog :visible.sync="dialogFormVisible" title="增加库位" center width="390px">
<el-form ref="form" :model="form" :rules="rules" label-position="left" label-width="100px" class="demo-ruleForm" style="margin: auto">
<el-row>
<el-form-item label="库位:" prop="库位">
<el-input v-model="form.库位" clearable size="small" style="width:200px" placeholder="请输入库位"/>
</el-form-item>
</el-row>
</el-form>
<div slot="footer" class="dialog-footer">
<el-button size="small" @click="callOff('form')">取消</el-button>
<el-button type="distribution" size="small" @click="submitLocation('form')">确 定</el-button>
</div>
</el-dialog>
</div>
</template>
<script>
import { ExecDatabase } from '@/main'
import { mapGetters } from 'vuex'
import { wsuri } from '@/utils/request'
export default {
data() {
return {
dialogFormVisible: false,
Location: '',
LocationName: '',
form: {
库位: ''
},
multipleSelection: [],
materialName1: '',
productName: [],
editorialStaff: [],
rules: {
库位: [{ required: true, message: '请输入库位' }]
},
loading: false, // 数据加载
total: 0, // 分页总数
tableData: [], // 合同信息表
tableData1: [],
pageCurrent: 1, // 分页当前页
pageSize: 20, // 分页每页显示条数
orderName: '', // 排序列名
order: '' // 排序方式
}
},
computed: {
...mapGetters([
'id',
'token'
])
},
created() {
// this.searchData()
this.searchTable()
this.initWebpack()
},
methods: {
// 初始化websocket
initWebpack() {
this.websock = new WebSocket(wsuri)// 这里面的this都指向vue
this.websock.onopen = this.websocketopen
this.websock.onclose = this.websocketclose
this.websock.onerror = this.websocketerror
},
// searchData() {
// let LocationName_check
// this.LocationName ? LocationName_check = 1 : LocationName_check = 0
// var param = []
// param[0] = ['库位_check', LocationName_check]
// param[1] = ['库位', this.LocationName]
// var Data = this.CreateData('11', '仓储管理_库位_查询_打印用', param)
// ExecDatabase(Data).then(response => {
// this.tableData1 = response.data
// console.log(this.tableData1, 123)
// })
// },
handleSelectionChange(val) {
this.multipleSelection = val
},
Pronters() {
if (this.multipleSelection.length === 0) {
this.$message.warning('请勾选要打印的库位码！')
}
let sendMessage, word, number
sendMessage = 'TOCS??JY_Warehouse?PDA~'
word = ''
number = 0
for (let i = 0; i < this.multipleSelection.length; i++) {
word = word + this.getWord(1, this.multipleSelection[i].货位名称, this.multipleSelection[i].货位名称)
number = number + 1
}
sendMessage = sendMessage + number + word
this.websock.send(sendMessage)
},
getWord(number, name, val) {
let word
word = ''
for (let i = 0; i < number; i++) {
word = word + '~JY_Location|QR_Code^Code0^' + val + '|TEXT^TEXT0^' + name
}
return word
},
// 打开
websocketopen() {
console.log('WebSocket连接成功')
},
// 数据接收
websocketonmessage(msg) {
this.partNumberP = msg.data.split('|')[3]
this.partNumber = this.partNumberP.slice(1)
this.getscantable(this.partNumber)
},
// 关闭
websocketclose() {
console.log('WebSocket关闭')
},
// 失败
websocketerror() {
console.log('WebSocket连接失败')
},
searchTable() {
this.loading = true
this.tableData = []
let LocationName_check
this.LocationName ? LocationName_check = 1 : LocationName_check = 0
var param = []
param[0] = ['库位_check', LocationName_check]
param[1] = ['库位', this.LocationName]
var Data = this.CreateData('11', '仓储管理_库位_查询', param, this.pageSize, this.pageCurrent)
ExecDatabase(Data).then(response => {
// console.log(response.data)
if (response.data.rows.length !== 0) {
for (let i = 0; i < response.data.rows.length; i++) {
this.tableData.push({
// 表示将从数据库中查询到的数据，分别对应填充到表格中
货位流水号: response.data.rows[i].货位流水号,
货位名称: response.data.rows[i].货位名称,
货位名称_before: response.data.rows[i].货位名称,
edit: false
})
}
}
this.total = response.data.total
this.loading = false
})
},
addLocation() {
if (this.$refs['form'] !== undefined) {
this.$refs['form'].resetFields()
}
this.form.库位 = ''
this.dialogFormVisible = true
},
callOff(formName) {
this.dialogFormVisible = false
this.$refs[formName].resetFields()
},
changeState(row) {
row.edit = !row.edit
},
submitLocation(formName) {
var param = []
param[0] = ['库位', this.form.库位]
var Data = this.CreateData('11', '仓储管理_库位_验证是否存在', param)
this.ExecDatabase(Data).then(response => {
if (Number(response.data[0].条数) > 0) {
this.$message.warning('增加的库位已存在列表中')
} else {
this.$refs[formName].validate((valid) => {
if (valid) {
var param = []
param[0] = ['库位', this.form.库位]
var Data = this.CreateData('12', '仓储管理_库位_增加数据', param)
this.ExecDatabase(Data).then(response => {
if (response.data[0].result === '1') {
this.$message.success('添加成功')
this.searchTable()
this.dialogFormVisible = false
} else {
this.$message.error('添加失败')
}
})
}
})
}
})
},
confirmEdit(row) {
var param = []
param[0] = ['货位流水号', row.货位流水号]
param[1] = ['库位', row.货位名称]
var Data = this.CreateData('12', '仓储管理_库位_编辑数据', param)
this.ExecDatabase(Data).then(response => {
if (response.data[0].result === '1') {
this.$message.success('编辑成功')
this.searchTable()
} else {
this.$message.error('编辑失败')
}
})
},
// 取消编辑
cancelEdit(index, row) {
row.edit = false
row.货位名称 = row.货位名称_before
this.$message('取消修改')
},
handleSizeChanges(val) {
this.pageCurrent = 1
this.pageSize = val
this.searchTable()
},
handleCurrentChanges(val) {
this.pageCurrent = val
this.searchTable()
}
}
}
</script>