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

This commit is contained in:
2024-09-09 15:26:17 +08:00
parent fe5d3b70df
commit 563132273c
717 changed files with 107188 additions and 138520 deletions

View File

@@ -0,0 +1,634 @@
<template>
<div class="app-container">
<el-card style="height: 850px">
<el-tabs v-model="PartType" type="border-card" style="height: 850px" @tab-click="getData()">
<el-tab-pane label="动力头备货" name="动力头备货">
<el-table v-loading="loading" ref="table" :data="tableData" highlight-current-row border show-summary stripe size="small" style="width: 781px">
<el-table-column :width="setColumnWidth('序号')" type="index" label="序号" align="center"/>
<el-table-column width="200px" label="动力头型号" align="center" show-overflow-tooltip>
<template slot-scope="scope">
<template v-if="scope.row.是否完成 === 0">
<el-cascader ref="cascader" v-model="scope.row.产品位置" :options="product" :show-all-levels="false" style="width: 170px" clearable @change="getData1(scope.row, scope.$index)"/>
</template>
<template v-else>
{{ scope.row.产品名称 }}
</template>
</template>
</el-table-column>
<el-table-column :width="setColumnWidth('数量')" label="库存" align="center" prop="库存">
<template slot-scope="scope">
{{ scope.row.库存 }}
</template>
</el-table-column>
<el-table-column width="90px" label="最低库存" align="center" prop="最低库存">
<template slot-scope="scope">
{{ scope.row.最低库存 }}
</template>
</el-table-column>
<el-table-column width="130px" label="备货数量" align="center">
<template slot-scope="scope">
<template v-if="scope.row.是否完成 === 0">
<el-input-number v-model="scope.row.备货数量" :min="1" :step="1" size="mini" style="width: 100%"/>
</template>
<template v-else>
{{ scope.row.备货数量 }}
</template>
</template>
</el-table-column>
<el-table-column label="操作" align="center">
<template slot-scope="scope">
<el-button
v-if="scope.row.是否完成 === 0"
size="mini"
type="success"
plain
style="margin-right: 10px"
icon="el-icon-folder-add"
@click="StockUp(scope.row)">备货</el-button>
<el-button
v-if="scope.row.是否完成 === 1"
size="mini"
type="primary"
plain
style="margin-right: 10px"
icon="el-icon-check"
@click="finish(scope.row)">完成</el-button>
<el-button
:disabled="scope.row.是否完成 === 0"
size="mini"
type="text"
style="margin-right: 10px"
icon="el-icon-shopping-cart-2"
@click="searchTableMaterial(scope.row)">领料</el-button>
<el-tooltip :open-delay="500" effect="dark" content="删除备货" placement="top">
<el-button
size="mini"
type="text"
icon="el-icon-delete"
@click="handleDelete(scope.row)"/>
</el-tooltip>
</template>
</el-table-column>
</el-table>
<el-tooltip :open-delay="700" effect="dark" content="增加备货" placement="top">
<el-button type="text" size="mini" @click="createProduct"><svg-icon icon-class="加号1" style="width: 30px;height: 30px"/></el-button>
</el-tooltip>
</el-tab-pane>
<el-tab-pane label="备货查询" name="备货查询">
<el-cascader ref="cascader" :options="product" :show-all-levels="false" size="small" style="width: 200px" clearable @change="getData2"/>
<span style="font-size: 13px;color: black">入库时间</span>
<el-date-picker
v-model="dateRange"
size="small"
type="daterange"
align="center"
style="width: 240px;"
value-format="yyyy-MM-dd"
format="yyyy-MM-dd"
range-separator=""
start-placeholder="开始日期"
end-placeholder="结束日期"
@change="pageCurrent1 = 1;pageSize1 = 30;searchTable1()"/>
<el-button type="primary" size="small" icon="el-icon-search" @click="pageCurrent1 = 1;pageSize1 = 30;searchTable1()">查询</el-button>
<el-table
v-loading="loading"
ref="table1"
:data="tableData1"
highlight-current-row
show-summary
border
stripe
size="small"
style="width: 541px"
height="700px">
<el-table-column width="100px" label="备货日期" align="center" show-overflow-tooltip>
<template slot-scope="scope">
{{ scope.row.备货日期 }}
</template>
</el-table-column>
<el-table-column label="动力头型号" align="center">
<template slot-scope="scope">
{{ scope.row.产品名称 }}
</template>
</el-table-column>
<el-table-column width="100px" label="备货数量" align="center" prop="备货数量">
<template slot-scope="scope">
{{ scope.row.备货数量 }}
</template>
</el-table-column>
<el-table-column width="100px" label="完成数量" align="center" prop="完成数量">
<template slot-scope="scope">
{{ scope.row.完成数量 }}
</template>
</el-table-column>
<el-table-column width="100px" label="入库时间" align="center">
<template slot-scope="scope">
{{ scope.row.完成日期 }}
</template>
</el-table-column>
</el-table>
<div class="block" style="margin-top: 10px;">
<el-pagination
:current-page="pageCurrent1"
:page-sizes="[10, 20, 30, 40, 100]"
:page-size="pageSize1"
:total="total1"
layout="total, sizes, prev, pager, next, jumper"
@size-change="handleSizeChanges1"
@current-change="handleCurrentChanges1"/>
</div>
</el-tab-pane>
</el-tabs>
</el-card>
<el-dialog v-el-drag-dialog :visible.sync="dialogFormVisible" title="完成数量" center width="320px">
<el-form ref="form" :model="form" :rules="rules" label-position="center" label-width="80px" class="demo-ruleForm">
<el-form-item label="完成数" prop="完成数">
<el-input-number v-model="form.完成数" :min="1" :max="form.完成数" style="width:150px;" placeholder="完成数" size="small" clearable/>
</el-form-item>
</el-form>
<div slot="footer" class="dialog-footer">
<el-button size="small" @click="callOff('form')">取消</el-button>
<el-button :disabled="disabled" type="distribution" size="small" @click="submitOrder('form')">确定</el-button>
</div>
</el-dialog>
<el-dialog v-el-drag-dialog :visible.sync="dialogFormVisible1" center width="900px">
<el-button style="float: right;margin-right: 10px;margin-bottom: 10px" icon="el-icon-check" type="primary" plain size="small" @click="createPickingList">
领料单
</el-button>
<el-button style="float: right;margin-right: 10px;margin-bottom: 10px" icon="el-icon-plus" type="distribution" plain size="small" @click="createSpareParts">
新增零件
</el-button>
<span style="font-size: 18px">领料单号{{ DocumentNumber }}</span>
<el-table :data="tableData2" highlight-current-row border stripe size="small" style="width: 841px" height="650px" @selection-change="handleSelectionChange">
<el-table-column :selectable="selectable" type="selection" align="center" width="50px"/>
<el-table-column label="序号" type="index" align="center" width="60px"/>
<el-table-column width="170px" label="物料名称" align="center" show-overflow-tooltip>
<template slot-scope="scope">
{{ scope.row.零件名称 }}
</template>
</el-table-column>
<el-table-column :width="setColumnWidth('图号或型号')" label="图号/型号" align="center" show-overflow-tooltip>
<template slot-scope="scope">
{{ scope.row.图号或型号 }}
</template>
</el-table-column>
<el-table-column :width="setColumnWidth('数量')" label="库存数" align="center">
<template slot-scope="scope">
{{ scope.row.库存 }}
</template>
</el-table-column>
<el-table-column :width="setColumnWidth('应领数')" label="应领数" align="center">
<template slot-scope="scope">
{{ scope.row.数量 }}
</template>
</el-table-column>
<el-table-column width="140px" label="实领数" align="center">
<template slot-scope="scope">
<el-input-number v-model="scope.row.实领数" :min="0" :max="scope.row.数量-scope.row.已领数量" size="mini" style="width: 100%"/>
</template>
</el-table-column>
<el-table-column :width="setColumnWidth('已领数')" label="已领数" align="center">
<template slot-scope="scope">
{{ scope.row.已领数量 }}
</template>
</el-table-column>
</el-table>
</el-dialog>
<el-dialog v-el-drag-dialog :visible.sync="dialogFormVisible8" title="新增零件" center style="min-height: 300px;" width="760px">
<el-row style="margin-bottom: 10px">
<span>名称</span>
<el-input v-model="materialName" placeholder="名称" style="width: 170px" size="small" clearable/>
<span>图号/型号</span>
<el-input v-model="materialSpec" placeholder="图号/型号" style="width: 170px" size="small" clearable/>
<el-button type="success" size="small" icon="el-icon-search" style="margin-left:10px" @click="pageCurrent10=1;pageSize10=10;total10=0;searchMaterial()">查询</el-button>
</el-row>
<el-table :data="tableData10" :header-cell-style="{background: '#383E4B',color: 'white'}" size="mini" style="width: 97%;max-height: 300px;margin-top:15px" height="400px" border highlight-current-row @row-click="selectNewMaterial">
<el-table-column align="center" label="名称">
<template slot-scope="scope">
{{ scope.row.名称 }}
</template>
</el-table-column>
<el-table-column align="center" label="图号/型号">
<template slot-scope="scope">
{{ scope.row.代号 }}
</template>
</el-table-column>
<el-table-column align="center" label="库存">
<template slot-scope="scope">
{{ scope.row.库存 }}
</template>
</el-table-column>
</el-table>
<div class="block" style="margin: 10px 0;">
<el-pagination
:current-page="pageCurrent10"
:page-sizes="[10, 20, 30, 40]"
:page-size="pageSize10"
:total="total10"
:pager-count="pagerCount"
style="display:inline-block;width:50%"
layout="total, sizes, prev, pager, next, jumper"
@size-change="handleSizeChange1"
@current-change="handleCurrentChange1"/>
</div>
<div>
<span>领用数量</span>
<el-input-number v-model="CollectNumber" placeholder="领用数量" style="width: 170px" size="small" clearable/>
</div>
<div slot="footer" class="dialog-footer">
<el-button size="small" @click="dialogFormVisible8=false">取消</el-button>
<el-button type="primary" size="small" @click="submitMaterialChange">确定</el-button>
</div>
</el-dialog>
</div>
</template>
<script>
import { mapGetters } from 'vuex'
export default {
data() {
return {
materialName: '',
materialSpec: '',
CollectNumber: '',
addmaterial: '',
NumberValue1: [],
Number: [],
type: [],
pagerCount: 5,
PartType: '动力头备货',
productValue: '',
product: [],
NumberValue: '',
DocumentNumber: '',
dialogFormVisible: false,
dialogFormVisible1: false,
dialogFormVisible8: false,
form: {
完成数: ''
},
rules: {
完成数: [{ required: true, message: '请填写完成数量', trigger: 'blur' }]
},
dateRange: '',
loading: false, // 数据加载
total: 0, // 分页总数
total1: 0, // 分页总数
total10: 0, // 分页总数
tableData: [],
tableData1: [],
tableData2: [],
tableData10: [],
tableData100: [],
disabled: false,
multipleSelection: [],
multipleSelection_variable: [],
pageCurrent: 1, // 分页当前页
pageSize: 50, // 分页每页显示条数
pageCurrent1: 1, // 分页当前页
pageSize1: 50, // 分页每页显示条数
pageCurrent10: 1, // 分页当前页
pageSize10: 10, // 分页每页显示条数
orderName: '', // 排序列名
order: '' // 排序方式
}
},
computed: {
...mapGetters([
'id',
'token'
])
},
updated() {
this.$nextTick(() => {
this.$refs['table'].doLayout()
this.$refs['table1'].doLayout()
})
},
created() {
this.searchTable()
this.getTreeData()
},
methods: {
getTreeData() {
var param = []
param[0] = ['子节点', 0]
var Data = this.CreateData('11', '产品关系_动力头备货_查询节点', param)
this.ExecDatabase(Data).then(response => {
const data = response.data
this.product = this.tree(data, 0)
})
},
tree(data, pid) {
const result = []
let temp
for (let i = 0; i < data.length; i++) {
if (data[i].父节点 === pid) {
const obj = { label: data[i].节点名称, value: data[i].子节点 }
temp = this.tree(data, data[i].子节点)
if (temp.length > 0) {
obj.children = temp
}
result.push(obj)
}
}
return result
},
getData1(row) {
this.productValue = row.产品位置[row.产品位置.length - 1]
var param = []
param[0] = ['产品流水号', this.productValue]
param[1] = ['产品位置', row.产品位置.join(',')]
param[2] = ['动力头备货流水号', row.动力头备货流水号]
var Data = this.CreateData('12', '装配管理_动力头备货_获取动力头库存', param)
this.ExecDatabase(Data).then(response => {
if (response.data[0].result === '1') {
this.searchTable()
}
})
},
StockUp(row) {
if (this.productValue && row.备货数量) {
var param = []
param[0] = ['产品流水号', this.productValue]
param[1] = ['动力头备货流水号', row.动力头备货流水号]
param[2] = ['备货数量', row.备货数量]
var Data = this.CreateData('12', '装配管理_动力头备货_编辑数据', param)
this.ExecDatabase(Data).then(response => {
if (response.data[0].result === '1') {
this.searchTable()
this.$message.success('备货成功')
} else {
this.$message.error('备货失败')
}
})
} else {
this.$message.warning('数据不完整')
}
},
finish(row) {
if (this.$refs['form'] !== undefined) {
this.$refs['form'].resetFields()
}
this.NumberValue = row.动力头备货流水号
this.form.完成数 = row.剩余数
this.dialogFormVisible = true
},
submitOrder(formName) {
this.disabled = true
setTimeout(() => {
if (this.form.完成数) {
var param = []
param[0] = ['动力头备货流水号', this.NumberValue]
var Data = this.CreateData('11', '装配管理_动力头备货新_物料验证', param)
this.ExecDatabase(Data).then(response => {
if (Number(response.data[0].条数) === 0) {
this.$message.error('该物料不存在,请通知技术增加相应物料')
this.disabled = false
} else {
var param1 = []
param1[0] = ['动力头备货流水号', this.NumberValue]
param1[1] = ['完成数量', this.form.完成数]
param1[2] = ['入库人员流水号', this.id]
var Data1 = this.CreateData('12', '装配管理_动力头备货_完成备货', param1)
this.ExecDatabase(Data1).then(response => {
if (response.data[0].result === '1') {
this.searchTable()
this.dialogFormVisible = false
this.disabled = false
} else {
this.$message.error('完成失败')
this.disabled = false
}
})
}
})
} else {
this.$message.error('数量不能为0或空')
this.disabled = false
}
}, 500)
},
callOff(formName) {
this.dialogFormVisible = false
this.$refs[formName].resetFields()
},
selectable(row) {
return Number(row.数量) > Number(row.已领数量) && Number(row.实领数) > 0
},
// 领料数据库
searchTableMaterial(row) {
this.NumberValue = row.动力头备货流水号
var param1 = []
var Data1 = this.CreateData('11', '车间装配管理_领料单_获取单号', param1)
this.ExecDatabase(Data1).then(response => {
this.DocumentNumber = response.data[0].领料单编号
})
var param = []
param[0] = ['动力头备货流水号', row.动力头备货流水号]
var Data = this.CreateData('11', '装配管理_备货三表_查询', param)
this.ExecDatabase(Data).then(response => {
this.tableData2 = response.data
this.dialogFormVisible1 = true
})
},
searchMaterial() {
let materialName_check, materialSpec_check
this.materialName ? materialName_check = 1 : materialName_check = 0
this.materialSpec ? materialSpec_check = 1 : materialSpec_check = 0
var param = []
param[0] = ['名称_check', materialName_check]
param[1] = ['名称', this.materialName]
param[2] = ['代号_check', materialSpec_check]
param[3] = ['代号', this.materialSpec]
var Data = this.CreateData('11', '物料信息_查询', param, this.pageSize10, this.pageCurrent10)
this.ExecDatabase(Data).then(response => {
this.tableData10 = response.data.rows
this.total10 = response.data.total
})
},
submitMaterialChange() {
if (this.CollectNumber && this.addmaterial) {
var param1 = []
param1[0] = ['动力头备货流水号', this.NumberValue]
param1[1] = ['物料流水号', this.addmaterial]
param1[2] = ['实领数', this.CollectNumber]
var Data1 = this.CreateData('12', '车间装配管理_动力头备货_临时领料明细_增加', param1)
this.ExecDatabase(Data1).then(response => {
if (response.data[0].result === '1') {
var param1 = []
param1[0] = ['动力头备货流水号', this.NumberValue]
var Data1 = this.CreateData('11', '装配管理_备货三表_查询', param1)
this.ExecDatabase(Data1).then(response => {
this.tableData2 = response.data
})
this.$message.success('新增成功')
} else {
this.$message.error('新增失败')
}
})
} else {
this.$message.warning('未选择物料或领用数量为0')
}
},
createPickingList() {
if (this.multipleSelection.length !== 0) {
this.NumberValue1 = []
this.Number = []
this.type = []
this.multipleSelection_variable = this.multipleSelection
this.multipleSelection = []
for (let i = 0; i < this.multipleSelection_variable.length; i++) {
if (parseInt(this.multipleSelection_variable[i].实领数) > 0) {
this.NumberValue1[i] = parseInt(this.multipleSelection_variable[i].流水号)
this.Number[i] = parseInt(this.multipleSelection_variable[i].实领数)
this.type[i] = parseInt(this.multipleSelection_variable[i].零件类型)
}
}
var param = []
param[0] = ['动力头备货流水号', this.NumberValue]
param[1] = ['流水号数组', this.NumberValue1]
param[2] = ['实领数数组', this.Number]
param[3] = ['零件类型数组', this.type]
param[4] = ['人员编号', this.id]
var Data = this.CreateData('12', '装配执行_动力头备货_领料', param)
this.ExecDatabase(Data).then(response => {
if (response.data[0].result === '1') {
this.$message.success('执行成功')
this.searchTable()
var param1 = []
param1[0] = ['动力头备货流水号', this.NumberValue]
var Data1 = this.CreateData('11', '装配管理_备货三表_查询', param1)
this.ExecDatabase(Data1).then(response => {
this.tableData2 = response.data
})
} else {
this.$message.error('执行失败')
}
})
} else {
this.$message.warning('请选择物料')
}
},
selectNewMaterial(row) {
this.addmaterial = row.物料流水号
},
handleSizeChange1(val) {
this.pageCurrent10 = 1
this.pageSize10 = val
this.searchMaterial()
},
handleCurrentChange1(val) {
this.pageCurrent10 = val
this.searchMaterial()
},
handleSelectionChange(val) {
this.multipleSelection = val
},
createSpareParts() {
this.dialogFormVisible8 = true
},
getData() {
if (this.PartType === '动力头备货') {
this.searchTable()
} else if (this.PartType === '备货查询') {
this.NumberValue = ''
this.searchTable1()
}
},
searchTable() {
this.tableData100 = []
var param = []
var Data = this.CreateData('11', '装配管理_动力头备货新_查询数据', param)
this.ExecDatabase(Data).then(response => {
for (let i = 0; i < response.data.length; i++) {
this.tableData100.push({
动力头备货流水号: response.data[i].动力头备货流水号,
库存: response.data[i].累计库存,
产品名称: response.data[i].产品名称,
最低库存: response.data[i].最低库存,
备货数量: response.data[i].备货数量,
剩余数: response.data[i].剩余数,
完成数量: response.data[i].完成数量,
产品位置: response.data[i].产品位置 ? response.data[i].产品位置.split(',').map(Number) : [],
产品流水号: response.data[i].产品流水号,
是否完成: response.data[i].是否完成
})
}
}).then(() => {
this.tableData = this.tableData100
})
},
createProduct() {
var param = []
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('添加失败')
}
})
},
handleDelete(row) {
this.$confirm('是否删除?', '提示', {
confirmButtonText: '确定',
cancelButtonText: '取消',
type: 'warning'
}).then(() => {
var param = []
param[0] = ['动力头备货流水号', 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('删除失败')
}
})
}).catch(() => {
this.$message({
type: 'info',
message: '已取消删除'
})
})
},
getData2(val) {
this.NumberValue = val[val.length - 1]
this.searchTable1()
},
searchTable1() {
let dateRange_check, NumberValue_check
this.dateRange ? dateRange_check = 1 : (dateRange_check = 0, this.dateRange = '')
this.NumberValue ? NumberValue_check = 1 : NumberValue_check = 0
var param = []
param[0] = ['产品流水号', this.NumberValue]
param[1] = ['产品流水号_check', NumberValue_check]
param[2] = ['开始时间', this.dateRange[0]]
param[3] = ['结束时间', this.dateRange[1]]
param[4] = ['时间_check', dateRange_check]
var Data = this.CreateData('11', '装配管理_动力头备货_查询数据新_全部', param, this.pageSize1, this.pageCurrent1)
this.ExecDatabase(Data).then(response => {
this.tableData1 = response.data.rows
this.total1 = response.data.total
})
},
handleSizeChanges1(val) {
this.pageCurrent1 = 1
this.pageSize1 = val
this.searchTable1()
},
handleCurrentChanges1(val) {
this.pageCurrent1 = val
this.searchTable1()
}
}
}
</script>
<style scoped lang="scss">
/deep/ .el-card__body{
padding: 0px!important;
}
</style>