ZW_MultiSelect/wms-vue/src/components/duochaxun/Zhengliqingdan.vue

866 lines
25 KiB
Vue

<template>
<div class="div1" style="height: 100%">
<div class="div2" style="padding-bottom: 10px">
<el-form ref="form" :model="param" label-width="80px">
<el-row :gutter="24">
<el-col :span="4">
<el-form-item label="采购单号:">
<el-input type="text" v-model="param.sourceId" :rows="1"></el-input>
</el-form-item>
</el-col>
<el-col :span="4">
<el-form-item label="收货凭证:" >
<el-input type="textarea" v-model="param.strBill7" :rows="1"></el-input>
</el-form-item>
</el-col>
<el-col :span="4">
<el-form-item label="料号:">
<el-input type="textarea" v-model="param.i_CODE" :rows="1"></el-input>
</el-form-item>
</el-col>
<el-col :span="4">
<el-form-item label="物料描述:">
<el-input type="text" v-model="param.i_name" :rows="1"></el-input>
</el-form-item>
</el-col>
<el-col :span="4">
<el-form-item label="库区:">
<el-select v-model="param.z_name" multiple filterable placeholder="请选择库区" style="width: 100%;">
<el-option
v-for="item in name"
:key="item.ID"
:label="item.name"
:value="item.name"
>
</el-option>
</el-select>
</el-form-item>
</el-col>
<el-col :span="4">
<el-form-item label="库位号:">
<el-input type="textarea" v-model="param.lc_CODE" :rows="1"></el-input>
</el-form-item>
</el-col>
</el-row>
<el-row :gutter="24" v-show="isShow">
<el-col :span="4">
<el-form-item label="批次号:">
<el-input type="text" v-model="param.PROP_C1" :rows="1"></el-input>
</el-form-item>
</el-col>
<el-col :span="4">
<el-form-item label="LOC:">
<el-select v-model="param.PROP_C2" multiple filterable placeholder="请选择LOC" style="width: 100%;">
<el-option
v-for="item in loc"
:key="item.ID"
:label="item.PROP_C2"
:value="item.PROP_C2"
>
</el-option>
</el-select>
</el-form-item>
</el-col>
<el-col :span="4">
<el-form-item label="特殊标记:">
<el-input type="text" v-model="param.PROP_C3"></el-input>
</el-form-item>
</el-col>
<el-col :span="4">
<el-form-item label="工厂:">
<el-select v-model="param.PROP_C9" multiple filterable placeholder="请选择工厂" style="width: 100%;">
<el-option
v-for="item in plant"
:key="item.ID"
:label="item.PROP_C9"
:value="item.PROP_C9"
>
</el-option>
</el-select>
</el-form-item>
</el-col>
<el-col :span="4">
<el-form-item label="整理人:">
<el-input type="textarea" v-model="param.OPERATOR" :rows="1"></el-input>
</el-form-item>
</el-col>
<el-col :span="4">
<el-form-item label="SAP接口:">
<el-input type="text" v-model="param.a_CODE"></el-input>
</el-form-item>
</el-col>
</el-row>
<el-row :gutter="24" v-show="isShow">
<el-col :span="8">
<el-form-item label="整理日期:">
<el-date-picker style="width: 325px"
v-model="param.RECEIVE_DATE"
type="daterange"
align="right"
unlink-panels
range-separator="至"
start-placeholder="开始日期"
end-placeholder="结束日期"
:picker-options="pickerOptions">
</el-date-picker>
</el-form-item>
</el-col>
<el-col :span="8">
<el-form-item label="收货日期:">
<el-date-picker style="width: 325px"
v-model="param.ORDER_DATE"
type="daterange"
align="right"
unlink-panels
range-separator="至"
start-placeholder="开始日期"
end-placeholder="结束日期"
:picker-options="pickerOptions">
</el-date-picker>
</el-form-item>
</el-col>
<el-col :span="4">
<el-form-item label="备注:">
<el-input type="text" v-model="param.description"></el-input>
</el-form-item>
</el-col>
<el-col :span="4">
<el-form-item label="容器码:">
<el-input type="textarea" v-model="param.LP" :rows="1"></el-input>
</el-form-item>
</el-col>
</el-row>
<el-button type="success" @click="find">查找</el-button>
<el-button type="success" @click="rest">重置</el-button>&nbsp;&nbsp;
<el-checkbox v-model="checked" @change="Allquesr">是否显示全部查询条件</el-checkbox>
</el-form>
<!-- <el-input v-model="param.sourceId"-->
<!-- placeholder="请输入姓名"-->
<!-- style="width: 200px;margin-left: 5px"-->
<!-- class="input-with-select"-->
<!-- @keyup.enter.native="queryUser">-->
<!-- <el-button class="el-input-group__prepend" slot="append" icon="el-icon-search" @click="queryUser"></el-button>-->
<!-- </el-input>-->
<!-- <el-button type="success" icon="el-icon-refresh-left" style="margin-left: 5px;" @click="rest">重置</el-button>-->
<!-- <div class="div3" style="">-->
<!-- <el-button type="primary" icon="el-icon-plus" @click="add">新增</el-button>-->
<!-- <el-button type="success" icon="el-icon-edit" @click="mod">编辑</el-button>-->
<!-- <el-button type="danger" icon="el-icon-delete" @click="del">删除</el-button>-->
<!-- <el-button type="warning" icon="el-icon-download" @click="exportExcel">导出</el-button>-->
<!-- </div>-->
</div>
<el-dialog :title="title"
:visible.sync="centerDialogVisible"
width="30%"
:before-close="handleClose"
center>
<el-form ref="form"
:model="form"
:rules="rules"
label-width="80px">
<el-form-item label="id" prop="id">
<el-input v-model="form.id" style="width: 300px;"></el-input>
</el-form-item>
<el-form-item label="sourceId" prop="sourceId">
<el-input v-model="form.sourceId" style="width: 300px;"></el-input>
</el-form-item>
<el-form-item label="strBill7" prop="strBill7">
<el-input v-model.number="form.strBill7" style="width: 300px;" autocomplete="off"></el-input>
</el-form-item>
<el-form-item label="strBill8" prop="age">
<el-input v-model.number="form.strBill8" style="width: 300px;" autocomplete="off"></el-input>
</el-form-item>
<!-- <el-form-item label="性别">-->
<!-- <el-radio-group v-model="form.sex">-->
<!-- <el-radio label='1'>男</el-radio>-->
<!-- <el-radio label='0'>女</el-radio>-->
<!-- </el-radio-group>-->
<!-- </el-form-item>-->
<el-form-item label="电话" prop="phone">
<el-input v-model="form.phone" style="width: 300px;"></el-input>
</el-form-item>
</el-form>
<div slot="footer" class="dialog-footer">
<el-button @click="cancelDialog">取 消</el-button>
<el-button type="primary" @click="addUser">确 定</el-button>
</div>
</el-dialog>
<el-table
v-loading="this.tableloding"
:max-height="MaxHeight"
:header-cell-style="{background:'#000',color:'#fff'}"
:data="tableData"
id="educe-table"
ref="tableData"
@selection-change="handleSelectionChange"
@select="selectionRow"
style="width: 100%;" >
<el-table-column
type="selection"
width="55">
</el-table-column>
<el-table-column
fixed
label="序号"
v-if="false"
width="180">
<template slot-scope="scope">
<span style="margin-left: 10px">{{ scope.row.id }}</span>
</template>
</el-table-column>
<el-table-column
label="ID"
width="180">
<template slot-scope="scope">
<div slot="reference" class="name-wrapper">
<span>{{ scope.row.id}}</span>
</div>
</template>
</el-table-column>
<el-table-column
label="采购单号"
width="180">
<template slot-scope="scope">
<div slot="reference" class="name-wrapper">
<span>{{ scope.row.sourceId }}</span>
</div>
</template>
</el-table-column>
<el-table-column
label="凭证号"
width="180">
<template slot-scope="scope">
<div slot="reference" class="name-wrapper">
<span>{{ scope.row.strBill7 }}</span>
</div>
</template>
</el-table-column>
<el-table-column
label="行号"
width="180">
<template slot-scope="scope">
<div slot="reference" class="name-wrapper">
<span>{{ scope.row.strBill8 }}</span>
</div>
</template>
</el-table-column>
<el-table-column
label="料号"
width="180">
<template slot-scope="scope">
<div slot="reference" class="name-wrapper">
<span>{{ scope.row.i_CODE }}</span>
</div>
</template>
</el-table-column>
<el-table-column
label="描述"
width="180">
<template slot-scope="scope">
<div slot="reference" class="name-wrapper">
<span>{{ scope.row.NAME }}</span>
</div>
</template>
</el-table-column>
<el-table-column
label="单位"
width="180">
<template slot-scope="scope">
<div slot="reference" class="name-wrapper">
<span>{{ scope.row.UNIT }}</span>
</div>
</template>
</el-table-column>
<el-table-column
label="收货日期"
width="180">
<template slot-scope="scope">
<div slot="reference" class="name-wrapper">
<span>{{ scope.row.ORDER_DATE }}</span>
</div>
</template>
</el-table-column>
<el-table-column
label="整理日期"
width="180">
<template slot-scope="scope">
<div slot="reference" class="name-wrapper">
<span>{{ scope.row.RECEIVE_DATE }}</span>
</div>
</template>
</el-table-column>
<el-table-column
label="整理人"
width="180">
<template slot-scope="scope">
<div slot="reference" class="name-wrapper">
<span>{{ scope.row.OPERATOR }}</span>
</div>
</template>
</el-table-column>
<el-table-column
label="上架人"
width="180">
<template slot-scope="scope">
<div slot="reference" class="name-wrapper">
<span>{{ scope.row.w_NAME }}</span>
</div>
</template>
</el-table-column>
<el-table-column
label="容器"
width="180">
<template slot-scope="scope">
<div slot="reference" class="name-wrapper">
<span>{{ scope.row.LP }}</span>
</div>
</template>
</el-table-column>
<el-table-column
label="批号"
width="180">
<template slot-scope="scope">
<div slot="reference" class="name-wrapper">
<span>{{ scope.row.PROP_C1 }}</span>
</div>
</template>
</el-table-column>
<el-table-column
label="LOC"
width="180">
<template slot-scope="scope">
<div slot="reference" class="name-wrapper">
<span>{{ scope.row.PROP_C2 }}</span>
</div>
</template>
</el-table-column>
<el-table-column
label="特殊标记"
width="180">
<template slot-scope="scope">
<div slot="reference" class="name-wrapper">
<span>{{ scope.row.PROP_C3 }}</span>
</div>
</template>
</el-table-column>
<el-table-column
label="供应商编号"
width="180">
<template slot-scope="scope">
<div slot="reference" class="name-wrapper">
<span>{{ scope.row.PROP_C5 }}</span>
</div>
</template>
</el-table-column>
<el-table-column
label="区域"
width="180">
<template slot-scope="scope">
<div slot="reference" class="name-wrapper">
<span>{{ scope.row.PROP_C8 }}</span>
</div>
</template>
</el-table-column>
<el-table-column
label="工厂"
width="180">
<template slot-scope="scope">
<div slot="reference" class="name-wrapper">
<span>{{ scope.row.PROP_C9 }}</span>
</div>
</template>
</el-table-column>
<el-table-column
label="序列号"
width="180">
<template slot-scope="scope">
<div slot="reference" class="name-wrapper">
<span>{{ scope.row.BAR_CODE }}</span>
</div>
</template>
</el-table-column>
<el-table-column
label="是否上架"
width="180">
<template slot-scope="scope">
<div slot="reference" class="name-wrapper">
<span>{{ scope.row.BE_MOVED==1?"上架":"未上架" }}</span>
</div>
</template>
</el-table-column>
<el-table-column
label="备注"
width="180">
<template slot-scope="scope">
<div slot="reference" class="name-wrapper">
<span>{{ scope.row.description }}</span>
</div>
</template>
</el-table-column>
<el-table-column
label="SAP接口"
width="180">
<template slot-scope="scope">
<div slot="reference" class="name-wrapper">
<span>{{ scope.row.a_CODE }}</span>
</div>
</template>
</el-table-column>
<el-table-column
label="库位号"
width="180">
<template slot-scope="scope">
<div slot="reference" class="name-wrapper">
<span>{{ scope.row.lc_CODE }}</span>
</div>
</template>
</el-table-column>
</el-table>
<el-pagination
@size-change="handleSizeChange"
@current-change="handleCurrentChange"
:current-page="pageNum"
:page-sizes="[ 50, 100, 200,500]"
:page-size="pageSize"
layout="total, sizes, prev, pager, next, jumper"
:total="total">
</el-pagination>
</div>
</template>
<script>
// import horizontalScroll from 'el-table-horizontal-scroll'
import {outFile} from "@/util/excel.vue";
export default {
name: "Main",
data() {
//验证账号
let checkuserNo = (rule, value, callback) => {
let id=0;
if(this.form.id>0){
id=this.form.id;
}
this.$axios.get(this.$httpUrl + '/user/queryuserNo?id='+id+'&userNo='+ this.form.userNo).then(res => res.data)
.then(res => {
if (res.code == 200) {
callback(new Error(this.form.userNo + '账号已存在!'));
} else {
callback();
}
})
.catch(function (err) {
console.log(err);
})
};
return {
tableloding:false,
pickerOptions: {
shortcuts: [{
text: '最近一周',
onClick(picker) {
const end = new Date();
const start = new Date();
start.setTime(start.getTime() - 3600 * 1000 * 24 * 7);
picker.$emit('pick', [start, end]);
}
}, {
text: '最近一个月',
onClick(picker) {
const end = new Date();
const start = new Date();
start.setTime(start.getTime() - 3600 * 1000 * 24 * 30);
picker.$emit('pick', [start, end]);
}
}, {
text: '最近三个月',
onClick(picker) {
const end = new Date();
const start = new Date();
start.setTime(start.getTime() - 3600 * 1000 * 24 * 90);
picker.$emit('pick', [start, end]);
}
}]
},
tableData: [],
pageSize: 50,
pageNum: 1,
total: 3,
param: {
//采购单号
sourceId: '',
//收货凭证号
strBill7: '',
//料号
i_CODE: '',
//物料描述
i_name: '',
//库区
z_name: [],
//库位号
lc_CODE: '',
//批次号
PROP_C1: '',
//LOC
PROP_C2: [],
//特殊标记
PROP_C3: '',
//工厂
PROP_C9: [],
//整理人
OPERATOR: '',
//SPA接口号
a_CODE: '',
//整理日期
RECEIVE_DATE: [],
//收货日期
ORDER_DATE: [],
//备注
description: '',
//容器码
LP: ''
},
MaxHeight: '',
plant: [],
loc: [],
name: [],
checked: false,
isShow: false,
form: {
id: '',
userNo: '',
userName: '',
passWord:'123456',
age: '',
sex: '1',
phone: '',
roleId: '2'
},
rules: {
userNo: [
{required: true, message: '请输入账号', trigger: 'blur'},
{ validator: checkuserNo, trigger: 'blur' }
],
userName: [
{required: true, message: '请输入姓名', trigger: 'blur'},
],
age: [
{required: true, message: '年龄不能为空'},
{type: 'number', message: '年龄必须为数字值'}
]
},
multipleSelection:[],
centerDialogVisible: false,
title:''
}
},
mounted() {
this.Plant();
this.Loc();
this.z_Name();
this.$nextTick(() => {
this.MaxHeight = window.innerHeight - 240 +"px";
})
},
methods: {
handleEdit(index, row) {
console.log(index, row);
},
handleDelete(index, row) {
console.log(index, row);
},
handleSizeChange(val) {
console.log(`每页 ${val}`);
this.pageNum = 1;
this.pageSize = val;
this.queryUser();
},
handleCurrentChange(val) {
console.log(`当前页: ${val}`);
this.pageNum = val;
this.queryUser();
},
Plant(){
//下拉数据架子啊
this.$axios.post(this.$httpUrl + '/Zhengliqingdan/ZPlant', {
}).then(res => res.data)
.then(res => {
if (res.code == 200) {
console.log(res.data)
this.plant = res.data
} else {
this.$message.error('获取数据失败');
}
})
.catch(function (err) {
console.log(err);
})
},
Loc(){
//下拉数据架子啊
this.$axios.post(this.$httpUrl + '/Zhengliqingdan/ZLOC', {
}).then(res => res.data)
.then(res => {
if (res.code == 200) {
console.log(res.data)
this.loc = res.data
} else {
this.$message.error('获取数据失败');
}
// eslint-disable-next-line no-unused-vars
},err =>{
this.tableloding=false
})
},
z_Name(){
//下拉数据架子啊
this.$axios.post(this.$httpUrl + '/Zhengliqingdan/ZZONE', {
}).then(res => res.data)
.then(res => {
if (res.code == 200) {
console.log(res.data)
this.name = res.data
} else {
this.$message.error('获取数据失败');
}
// eslint-disable-next-line no-unused-vars
},err =>{
this.tableloding=false
})
},
queryUser() {
this.tableloding=true
//列表数据加载
this.$axios.post(this.$httpUrl + '/Zhengliqingdan/queryWhere', {
pageSize: this.pageSize,
pageNum: this.pageNum,
param: this.param,
}).then(res => res.data)
.then(res => {
this.tableloding=false
if (res.code == 200) {
this.tableData = res.data
this.total = res.total
} else {
this.$message.error('获取数据失败');
}
// eslint-disable-next-line no-unused-vars
},err =>{
this.tableloding=false
})
},
find(){
// if(this.checked){
// this.checked=false;
// this.isShow=false;
// }
this.queryUser();
},
Allquesr(){
//查询按钮
if(this.checked){
this.isShow=true;
}else {
this.isShow=false;
}
},
rest() {
//表单重置
this.param={};
this.isShow=false;
this.checked=false;
},
add() {
//点击新增按弹窗
this.title="新增用户"
this.centerDialogVisible = true;
//重置表单信息
this.$nextTick(() => {
this.resetForm()
})
},
resetForm() {
this.$refs["form"].resetFields();
this.$data.form=JSON.parse(JSON.stringify(this.$options.data().form))
},
handleClose(){
//关闭对话框
this.centerDialogVisible=false;
this.form.sex='1';
},
cancelDialog(){
//取消对话框
this.centerDialogVisible=false;
this.resetForm();
this.form.sex='1';
this.$refs.tableData.clearSelection()
},
addUser() {
//新增用户
this.$refs["form"].validate((valid) => {
if (valid) {
this.$axios.post(this.$httpUrl + '/user/addorupdate', this.form).then(res => res.data)
.then(res => {
if (res.code == 200) {
this.$message({
message: res.msg,
type: 'success'
});
this.centerDialogVisible = false;//退出新增窗体
this.queryUser();//刷新列表
this.resetForm();
} else {
this.$message.error(res.msg);
}
})
.catch(function (err) {
console.log(err);
})
} else {
return false;
}
});
},
editUser(row){
//编辑
this.title="编辑用户"
this.centerDialogVisible = true;
this.$nextTick(() => {
this.form=JSON.parse(JSON.stringify(row));
this.form.sex=row.sex+''
this.$refs.tableData.toggleRowSelection(row, true);//编辑时勾选
})
},
handleSelectionChange(val) {
this.multipleSelection = val;
let planIdList = [];
for (let item of this.multipleSelection) {
planIdList.push(item.id);
}
console.log(planIdList);
},
selectionRow(selection,row){
},
mod(){
//编辑
if(this.$refs.tableData.selection.length==1){
this.title="编辑用户"
this.centerDialogVisible = true;
for (let item of this.multipleSelection) {
this.form=JSON.parse(JSON.stringify(item));
this.form.sex=item.sex+''
}
}else{
this.$message.error('请选中一条记录!');
}
},
del(){
//删除
if(this.$refs.tableData.selection.length==0){
this.$message.error('请至少选中一条记录!');
}else{
this.$confirm('此操作将永久删除, 是否继续?', '提示', {
confirmButtonText: '确定',
cancelButtonText: '取消',
type: 'warning'
}).then(() => {
let ids=[];
for (let item of this.multipleSelection) {
ids.push(item.id)
}
this.$axios.get(this.$httpUrl + '/user/deleteUser?ids='+ids.toString()).then(res => res.data)
.then(res => {
if (res.code == 200) {
this.$message({
message: res.msg,
type: 'success'
});
this.queryUser()//刷新数据
} else {
this.$message.error(res.msg);
}
})
.catch(function (err) {
console.log(err);
})
}).catch(() => {
this.$message({
type: 'info',
message: '已取消删除'
});
});
}
},
exportExcel(){
this.fixs = false
this.$nextTick(() => {
outFile('educe-table', '(用户)')
this.fixs = true
})
}
},
beforeMount() {
this.queryUser();
}
}
</script>
<style lang="scss" scoped>
</style>