emis-frontend/src/views/emis/emisTmsScanRecord/scanRecord.vue

375 lines
12 KiB
Vue
Raw Normal View History

2024-04-22 05:35:19 +00:00
<template>
<div class="app-container">
<el-row :gutter="0">
<el-form ref="form" size="mini" :model="form" :rules="rules" label-width="80px">
<el-col :span="7">
<el-form-item label="扫描单号" prop="billCode" label-width="70px">
<span slot="label">
<span style="color: red">扫描单号</span>
</span>
<el-input v-model="form.billCode" placeholder="单号输入后按回车" @keyup.enter.native="handleScanInput" >
<i slot="suffix" class="iconfont">&#xe656;</i>
</el-input>
</el-form-item>
</el-col>
<el-col :span="4">
<el-form-item label="重量" prop="scanWeight" label-width="60px">
<el-input v-model="form.scanWeight" placeholder="扫描重量" >
<span slot="suffix">KG</span>
</el-input>
</el-form-item>
</el-col>
<el-col :span="5">
<el-form-item :label="$t('取件员')" prop="dispatchOrSendManCode">
<emis-user-picker0 v-model="form.dispatchOrSendManCode" ></emis-user-picker0>
<!-- <xd-combo-grid v-model="form.dispatchOrSendManCode"
placeholder="请选择"
:requestConfig="{url: '/system/user/list', method: 'get'}"
:pagination="true"
:columns="myColumns"
:showIndex="true"
keywordKey="nickName"
:panelStyle="'width:300px'"
:otherParams="{}"
:showSelect="true"
@getSelect="getRowsSelect"
@row-select-event="getRowSelect"
>
</xd-combo-grid> -->
</el-form-item>
</el-col>
</el-form>
</el-row>
<div slot="toolbar">
<el-row :gutter="10" class="mb8">
<el-col :span="1.5">
<el-button
type="primary"
plain
size="mini"
:disabled="multiple"
@click="handleScanUpload"
v-hasPermi="['emis:emisTmsScanRecord:add']"
>上传</el-button>
</el-col>
<el-col :span="1.5">
<el-button
type="danger"
plain
icon="el-icon-delete"
size="mini"
:disabled="multiple"
@click="clearSelectionBatch"
v-hasPermi="['emis:emisTmsScanRecord:remove']"
>删除</el-button>
</el-col>
<el-col :span="1.5">
<el-button
type="primary"
plain
size="mini"
@click="handleBatchScan"
v-hasPermi="['emis:emisTmsScanRecord:add']"
>批量扫描</el-button>
</el-col>
</el-row>
</div>
<el-table ref="multipleTable" v-loading="loading" :data="emisTmsScanRecordList" @selection-change="handleSelectionChange">
<el-table-column type="selection" width="55" align="center" />
<el-table-column :label="$t('扫描单号')" align="center" prop="billCode" min-width="100" />
<el-table-column :label="$t('扫描类型')" align="center" prop="scanType" min-width="100" />
<el-table-column :label="$t('扫描员工')" align="center" prop="scanManCode" min-width="100" />
<el-table-column :label="$t('扫描站点')" align="center" prop="scanSite" min-width="100" />
<el-table-column :label="$t('扫描时间')" align="center" prop="scanDate" min-width="170" />
<el-table-column :label="$t('录入时间')" align="center" prop="createTime" min-width="170" />
<el-table-column :label="$t('取件员')" align="center" prop="dispatchOrSendMan" min-width="100" />
<el-table-column :label="$t('重量')" align="center" prop="scanWeight" min-width="100" />
</el-table>
<!-- <div style="text-align: center;margin-bottom: 10px;">
<el-button type="primary" @click="submitForm">确 定</el-button>
<el-button @click="cancel">取 消</el-button>
</div> -->
<el-dialog :title="titleBatch" :visible.sync="openBatch" width="80%" v-dialogDrag :close-on-click-modal="false" append-to-body>
<el-row :gutter="0">
<el-form ref="formBatch" :model="formBatch" :rules="rulesBatch" size="mini" label-width="80px">
<el-col :span="24">
<el-form-item :label="$t('运单号')" prop="billCode">
<el-input v-model="formBatch.billCode" type="textarea" :rows="8" placeholder="运单号" />
</el-form-item>
</el-col>
</el-form>
</el-row>
<div slot="footer" class="dialog-footer">
<el-button type="primary" @click="submitFormBatch">确 定</el-button>
<el-button @click="cancelBatch">取 消</el-button>
</div>
</el-dialog>
</div>
</template>
<script>
import { listEmisWaybill, getInfoByBillCode,getEmisWaybill } from "@/api/emis/emisWaybill";
import { listEmisTmsScanRecord, getEmisTmsScanRecord, delEmisTmsScanRecord, addEmisTmsScanRecord, updateEmisTmsScanRecord } from "@/api/emis/emisTmsScanRecord";
import EmisUserPicker0 from '@/views/emis/EmisBaseTools/EmisUserPicker.vue';
// import XdComboGrid from '@/components/XdComboGrid/index.vue';
export default {
name: "ScanRecord",
props:{
id:undefined
},
components: { EmisUserPicker0},
dicts: [
],
data() {
return {
myColumns:[{label:'员工编号', key: 'userName'},{label:'员工名称', key: 'nickName'}],
emisTmsScanRecordOptions: [],
// 选中数组
ids: [],
// 非单个禁用
single: true,
// 非多个禁用
multiple: true,
checkedDetail:[],
// 遮罩层
loading: false,
// 表单参数
form: {},
titleBatch: "",
formBatch: {},
openBatch:false,
emisTmsScanRecordList: [],
// 是否显示弹出层
open: false,
// 表单校验
rules: {
// billCode: [
// { required: true, message: "billCode不能为空", trigger: "blur" }
// ],
// id: [
// { required: true, message: "id不能为空", trigger: "blur" }
// ],
},
rulesBatch: {
// id: [
// { required: true, message: "id不能为空", trigger: "blur" }
// ],
}
};
},
watch: {
"id": {
handler (newValue, oldValue) {
this.id = newValue;
this.initData();
},
deep: true
}
},
created() {
// this.initData();
},
methods: {
// initData() {
// this.reset();
// if(this.id !=undefined) {
// this.loading = true;
// getEmisTmsScanRecord(this.id).then(response => {
// this.form = response.data;
// this.loading = false;
// });
// }
// this.getTreeselect();
// },
getRowSelect(row, column, event) {
// dosomething
},
getRowsSelect(arr) {
this.form.ids= arr.map(item=>item.id)
},
handleBatchScan(){
this.formBatch = {
billCode: null,
}
this.titleBatch="批量扫描";
this.openBatch=true;
},
clearSelectionBatch(){
this.$refs.multipleTable.clearSelection();
},
cancelBatch(){
this.openBatch=false;
},
submitFormBatch(){
this.openBatch=false;
},
// 取消按钮
cancel() {
this.reset();
this.$emit("on-cancel");
},
// 表单重置
reset() {
this.form = {
id: null,
billCode: null,
scanType: null,
preOrNextStation: null,
preOrNextStationCode: null,
preOrNextStationPhone: null,
preOrNextManCode: null,
preOrNextManPhone: null,
scanDate: null,
scanManCode: null,
scanManPhone: null,
scanSite: null,
scanSiteCode: null,
scanSitePhone: null,
scanWeight: null,
weight: null,
dispatchOrSendMan: null,
dispatchOrSendManCode: null,
dispatchOrSendManPhone: null,
signDate: null,
signMan: null,
signSite: null,
signSiteCode: null,
recordManCode: null,
recordManPhone: null,
recordSiteCode: null,
truckMan: null,
truckCode: null,
dataFrom: null,
picUrl: null,
status: null,
createSiteCode: null,
modifySiteCode: null,
delFlag: null,
createBy: null,
createTime: null,
updateBy: null,
updateTime: null,
remark: null
};
this.resetForm("form");
},
/** 提交按钮 */
submitForm() {
this.$refs["form"].validate(valid => {
if (valid) {
if (this.form.id != null) {
updateEmisTmsScanRecord(this.form).then(response => {
this.$modal.msgSuccess("修改成功");
this.$emit("on-changed");
});
} else {
addEmisTmsScanRecord(this.form).then(response => {
this.$modal.msgSuccess("修改成功");
this.$emit("on-changed");
});
}
}
});
},
// 多选框选中数据
handleSelectionChange(selection) {
this.ids = selection.map(item => item.billCode)
this.single = selection.length!==1
this.multiple = !selection.length
if (selection.length > 1) {
this.$refs.multipleTable.clearSelection();
this.$refs.multipleTable.toggleRowSelection(selection.pop());
} else {
//将选中行存入缓存中
this.checkedDetail = selection;
}
},
// 扫描上传
handleScanUpload(){
},
handleScanInput(){
if(this.form.billCode==null || this.form.billCode==''){
this.$message.error("输入单号后回车");
return;
}
// let queryParams = {billCode:this.form.billCode};
getInfoByBillCode(this.form.billCode).then(response => {
console.log(response.data);
if(response.data == undefined){
this.$message.error("单号不存在");
return;
}
// let scanRecordItem = {
// billCode: this.form.billCode,
// scanType: null,
// preOrNextStation: null,
// preOrNextStationCode: null,
// preOrNextStationPhone: null,
// preOrNextManCode: null,
// preOrNextManPhone: null,
// scanDate: null,
// scanManCode: null,
// scanManPhone: null,
// scanSite: null,
// scanSiteCode: null,
// scanSitePhone: null,
// scanWeight: null,
// weight: null,
// dispatchOrSendMan: null,
// dispatchOrSendManCode: null,
// dispatchOrSendManPhone: null,
// signDate: null,
// signMan: null,
// signSite: null,
// signSiteCode: null,
// recordManCode: null,
// recordManPhone: null,
// recordSiteCode: null,
// truckMan: null,
// truckCode: null,
// dataFrom: null,
// picUrl: null,
// status: null,
// createSiteCode: null,
// modifySiteCode: null,
// delFlag: null,
// createBy: null,
// createTime: null,
// updateBy: null,
// updateTime: null,
// remark: null
// }
// response.rows.forEach(item =>{
// this.emisTmsScanRecordList.push(item)
// });
});
},
}
};
</script>