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

297
src/views/WarehouseManagement/OutsourcingWarehousing/index.vue Normal file
View File

@@ -0,0 +1,297 @@
<!--外协厂家外协厂家外协厂家外协厂家外协厂家外协厂家外协厂家外协厂家外协厂家外协厂家外协厂家-->
<template>
<div class="app-container">
<el-card>
<div style="margin-top: 7px; margin-bottom: 7px">
<el-input v-model="outManufacturerNameValue" style="width:150px" size="small" clearable placeholder="外协厂家名称"/>
<el-button icon="el-icon-search" type="primary" plain size="small" style="margin-left: 10px" @click="pageCurrent = 1,pageSize = 100,searchTable()">查询</el-button>
<el-button type="warning" plain icon="el-icon-plus" size="small" @click="editType('form')">外协厂家</el-button>
</div>
</el-card>
<el-card>
<el-table v-loading="loading" :data="tableData" highlight-current-row border stripe size="small" style="width: 100%" height="750" @sort-change="sortChange">
<el-table-column type="index" label="序号" align="center" width="50"/>
<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" 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="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="setColumnWidth('操作')" label="操作" align="center">
<template slot-scope="scope">
<el-button type="text" icon="el-icon-edit" size="mini" style="margin-right: 10px" @click="handleEdit(scope.row)"/>
<el-button type="text" icon="el-icon-delete" size="mini" @click="handleDelete(scope.row)"/>
</template>
</el-table-column>
</el-table>
<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-dialog v-el-drag-dialog :visible.sync="dialogFormVisible" :title="title" center width="660px">
<el-form ref="form" :model="form" :rules="rules" label-position="center" label-width="100px" class="demo-ruleForm">
<el-form-item label="厂家名称" prop="厂家名称" style="display: inline-block;">
<el-input v-model="form.厂家名称" style="width:180px;display: inline-block" placeholder="厂家名称" size="small" clearable/>
</el-form-item>
<el-form-item label="厂家简称" prop="厂家简称" style="display: inline-block;margin-left: 10px">
<el-input v-model="form.厂家简称" style="width:180px;display: inline-block" placeholder="厂家简称" size="small" clearable/>
</el-form-item>
<el-form-item label="地址" prop="地址" style="display: inline-block;margin-left: -30px">
<el-input v-model="form.地址" style="width:180px;display: inline-block;margin-left: 30px" placeholder="地址" size="small" clearable/>
</el-form-item>
<el-form-item label="联系人" prop="联系人" style="display: inline-block;margin-left: -4px">
<el-input v-model="form.联系人" style="width:180px;display: inline-block;margin-left: 14px" placeholder="联系人" size="small" clearable/>
</el-form-item>
<el-form-item label="电话" prop="电话" style="display: inline-block;margin-left: -30px">
<el-input v-model="form.电话" style="width:180px;display: inline-block;margin-left: 30px" placeholder="电话" size="small" clearable/>
</el-form-item>
<el-form-item label="备注" prop="备注" style="display: inline-block;margin-left: -20px">
<el-input v-model="form.备注" style="width:180px;display: inline-block;margin-left: 30px" placeholder="备注" size="small" clearable/>
</el-form-item>
<el-form-item v-if="!buttonChange">
<el-button style="margin-left: 230px;margin-top: 30px" @click="callOff('form')">取消</el-button>
<el-button style="margin-left: 10px;background-color: rgb(255,151,89);color: white" @click="submit('form')">确定</el-button>
</el-form-item>
<el-form-item v-if="buttonChange">
<el-button style="margin-left: 230px;margin-top: 30px" @click="dialogFormVisible=false">取消</el-button>
<el-button style="margin-left: 10px;background-color: rgb(255,151,89);color: white" @click="submitUpdate('form')">确定</el-button>
</el-form-item>
</el-form>
</el-dialog>
</el-card>
</div>
</template>
<script>
import { mapGetters } from 'vuex'
export default {
data() {
return {
buttonChange: '',
form: {
厂家名称: '',
厂家简称: '',
地址: '',
联系人: '',
电话: '',
备注: ''
},
rules: {
厂家名称: [{ required: true, message: '请输入厂家名称', trigger: 'blur' }],
厂家简称: [{ required: true, message: '请输入厂家简称', trigger: 'blur' }]
},
title: '',
dialogFormVisible: false,
outManufacturerNameValue: '',
loading: false, // 数据加载
total: 0, // 分页总数
tableData: [], // 合同信息表
pageCurrent: 1, // 分页当前页
pageSize: 100 // 分页每页显示条数
}
},
computed: {
...mapGetters([
'id',
'token'
])
},
created() {
// this.fetchData()
},
methods: {
// fetchData() {
// this.getCustomer()
// },
editType(formName) {
if (this.$refs['form'] !== undefined) {
this.$refs['form'].resetFields()
}
this.buttonChange = false
this.title = '增加外协厂家'
this.dialogFormVisible = true
},
// 增加删除
callOff(formName) {
this.dialogFormVisible = false
this.$refs[formName].resetFields()
},
// 增加确定
submit(formName) {
this.$refs[formName].validate((valid) => {
if (valid) {
var param = []
param[0] = ['外协厂家名称', this.form.厂家名称]
param[1] = ['外协厂家简称', this.form.厂家简称]
param[2] = ['地址', this.form.地址]
param[3] = ['联系人', this.form.联系人]
param[4] = ['电话', this.form.电话]
param[5] = ['备注', this.form.备注]
console.log(param)
var Data = this.CreateData('11', '技术中心_外协厂家_增加', param)
this.ExecDatabase(Data).then(response => {
if (response.data[0].结果 === 1) {
this.$message({
message: '信息增加成功',
type: 'success'
})
this.searchTable()
} else {
this.$message.error('信息增加失败')
}
})
this.dialogFormVisible = false
} else {
return false
}
})
},
// 删除
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('删除成功')
if (this.tableData && this.tableData.length === 1 && this.pageList > 1) { // 判断删除的是否是最后一页最后一行，如果是且不是第一页，页数减一
this.pageList--
}
this.searchTable()
} else {
this.$message.error('删除失败')
}
})
}).catch(() => {
this.$message({
type: 'info',
message: '已取消删除'
})
})
},
searchTable() {
let outManufacturerNameValue_check
this.outManufacturerNameValue ? outManufacturerNameValue_check = 1 : outManufacturerNameValue_check = 0
var param = []
param[0] = ['外协厂家名称_check', outManufacturerNameValue_check]
param[1] = ['外协厂家名称', this.outManufacturerNameValue]
var Data = this.CreateData('11', '技术中心_技术确认_外协厂家_查询数据', param, this.pageSize, this.pageCurrent)
this.ExecDatabase(Data).then(response => {
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].外协厂家名称,
外协厂家简称: response.data.rows[i].外协厂家简称,
地址: response.data.rows[i].地址,
联系人: response.data.rows[i].联系人,
电话: response.data.rows[i].电话,
备注: response.data.rows[i].备注,
edit: false
})
}
}
this.tableData = response.data.rows
this.total = response.data.total
})
},
handleEdit(row) {
if (this.$refs['form'] !== undefined) {
this.$refs['form'].resetFields()
}
this.title = '编辑'
this.buttonChange = true
this.form.厂家名称 = row.外协厂家名称
this.form.厂家简称 = row.外协厂家简称
this.外协厂家流水号 = row.外协厂家流水号
this.form.地址 = row.地址
// this.form.材料 = Number(row.材料流水号) === 3 ? null : Number(row.材料流水号)
this.form.联系人 = row.联系人
this.form.电话 = row.电话
this.form.备注 = row.备注
this.dialogFormVisible = true
},
submitUpdate(formName, row) {
console.log('李显', this.外协厂家流水号)
this.$refs[formName].validate((valid) => {
if (valid) {
var param = []
param[0] = ['外协厂家名称', this.form.厂家名称]
param[1] = ['外协厂家简称', this.form.厂家简称]
param[2] = ['地址', this.form.地址]
param[3] = ['联系人', this.form.联系人]
param[4] = ['电话', this.form.电话]
param[5] = ['外协厂家流水号', this.外协厂家流水号]
param[6] = ['备注', 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('编辑失败')
}
})
}
})
},
sortChange(column) {
if (column.prop === '状态') {
this.orderName = 1
}
if (column.order === 'ascending') {
this.order = 1
} else if (column.order === 'descending') { this.order = 2 } else {
this.order = ''
}
this.searchTable()
},
handleSizeChanges(val) {
this.pageCurrent = 1
this.pageSize = val
this.searchTable()
},
handleCurrentChanges(val) {
this.pageCurrent = val
this.searchTable()
}
}
}
</script>