456 lines
14 KiB
Vue
456 lines
14 KiB
Vue
<template>
|
|
<div >
|
|
<el-row :gutter="5" class="mb8">
|
|
<el-col :span="1.5">
|
|
<el-button
|
|
type="primary"
|
|
icon="el-icon-plus"
|
|
plain
|
|
size="mini"
|
|
@click="handleAdd"
|
|
>新增节点</el-button>
|
|
</el-col>
|
|
<el-col :span="1.5">
|
|
<el-button
|
|
type="danger"
|
|
plain
|
|
icon="el-icon-delete"
|
|
size="mini"
|
|
:disabled="multiple"
|
|
@click="handleDelete"
|
|
>删除</el-button>
|
|
</el-col>
|
|
</el-row>
|
|
|
|
<el-table size="mini" v-loading="loading" :data="emisTmsTransPlanDtlList" border @selection-change="handleSelectionChange">
|
|
<el-table-column type="selection" width="55" align="center" />
|
|
<el-table-column label="序号" align="center" prop="orderNum" width="60" />
|
|
<el-table-column :label="$t('节点名称')" align="center" prop="stepName" width="100" >
|
|
<template slot-scope="scope">
|
|
<div class="link-type" @click="handleUpdate(scope.row)">{{scope.row.stepName}}</div>
|
|
</template>
|
|
</el-table-column>
|
|
|
|
<!-- <el-table-column label="起始网点" align="center" prop="startSite" min-width="100" /> -->
|
|
<el-table-column label="起始网点" align="center" prop="startSiteName" min-width="100" :show-overflow-tooltip="true" />
|
|
|
|
<!-- <el-table-column label="目的网点" align="center" prop="destSite" min-width="100" /> -->
|
|
<el-table-column label="目的网点" align="center" prop="destSiteName" width="100" />
|
|
<el-table-column label="运输方式" align="center" prop="transType" width="80" >
|
|
<template slot-scope="scope">
|
|
<dict-tag :options="dict.type.emis_biz_shipping_method" :value="scope.row.transType"/>
|
|
</template>
|
|
</el-table-column>
|
|
<el-table-column label="运输时效(天)" align="center" prop="estCostDay" width="80" />
|
|
<el-table-column label="操作" align="center" class-name="small-padding fixed-width">
|
|
<template slot-scope="scope">
|
|
<el-button
|
|
size="mini"
|
|
type="text"
|
|
@click="handleUpdate(scope.row)"
|
|
>编辑</el-button>
|
|
<!-- <el-button
|
|
size="mini"
|
|
type="text"
|
|
@click="handleCopy(scope.row)"
|
|
>复制</el-button> -->
|
|
<el-button
|
|
size="mini"
|
|
type="text"
|
|
@click.native.prevent="handleDelete(scope.row,scope.$index, emisTmsTransPlanDtlList)"
|
|
>删除</el-button>
|
|
</template>
|
|
</el-table-column>
|
|
</el-table>
|
|
|
|
<!-- @click="handleDelete(scope.row)" -->
|
|
<!-- 添加或修改费用计算表达式对话框 -->
|
|
<el-dialog :title="title" :visible.sync="open" width="50%" :close-on-click-modal="false" :destroy-on-close="true" v-dialogDrag append-to-body>
|
|
<el-row :gutter="0">
|
|
<el-form ref="form" size="mini" :model="form" :rules="rules" label-width="80px">
|
|
<el-col :span="24">
|
|
<el-form-item label="节点名称" prop="stepName">
|
|
<el-input v-model="form.stepName" placeholder="请输入节点名称" />
|
|
</el-form-item>
|
|
</el-col>
|
|
<el-col :span="24">
|
|
<el-form-item label="起始网点" prop="startSite">
|
|
<el-button type="primary" @click="handleSelectSite">选择网点</el-button>
|
|
<el-button
|
|
plain
|
|
type="primary"
|
|
size="mini"
|
|
@click="handleAddSite"
|
|
>追加网点</el-button>
|
|
<el-input v-model="form.startSiteName" type="textarea" rows="5" disabled placeholder="站点列表" />
|
|
</el-form-item>
|
|
</el-col>
|
|
<el-col :span="24">
|
|
<el-form-item label="目的网点" prop="destSite">
|
|
<EmisSiteSimplePicker1 v-model="form.destSite" :placeholder="$t('目的网点')" isInitiated="true" @onChange="onDestSiteChange"></EmisSiteSimplePicker1>
|
|
</el-form-item>
|
|
</el-col>
|
|
|
|
<el-col :span="12">
|
|
<el-form-item label="运输方式" prop="transType">
|
|
<el-select v-model="form.transType" placeholder="运输方式" clearable filterable>
|
|
<el-option
|
|
v-for="item in dict.type.emis_biz_shipping_method"
|
|
v-bind:key="item.value"
|
|
v-bind:label="item.label"
|
|
v-bind:value="item.value"
|
|
/>
|
|
</el-select>
|
|
</el-form-item>
|
|
</el-col>
|
|
<el-col :span="12">
|
|
<el-form-item label="预估时效" prop="estCostDay" label-width="110px">
|
|
<el-input v-model="form.estCostDay" placeholder="" >
|
|
<span slot="suffix">(天)</span>
|
|
</el-input>
|
|
</el-form-item>
|
|
</el-col>
|
|
|
|
<el-col :span="24">
|
|
<el-form-item label="顺序号" prop="orderNum">
|
|
<el-input v-model="form.orderNum" placeholder="请输入顺序号" />
|
|
</el-form-item>
|
|
</el-col>
|
|
<!-- <el-col :span="8">
|
|
<el-form-item label="状态" prop="status">
|
|
<el-input v-model="form.status" placeholder="请输入状态" />
|
|
</el-form-item>
|
|
</el-col> -->
|
|
</el-form>
|
|
</el-row>
|
|
<div slot="footer" class="dialog-footer" style="text-align: center;margin-bottom: 10px;">
|
|
<el-button type="primary" @click="submitForm">确 定</el-button>
|
|
<el-button @click="cancel">取 消</el-button>
|
|
</div>
|
|
</el-dialog>
|
|
|
|
<el-dialog :title="titleSiteSelectTreeForm" :visible.sync="openSiteSelectTreeForm" width="40%" :destroy-on-close="true" v-dialogDrag append-to-body>
|
|
<EmisSiteSelectTreePicker :key="resetRefreshId" :isAddSite="isAddSite" :selectSiteCode="form.startSite" :selectSiteName="form.startSiteName" @on-changed="onSelectSiteTreeCheckChange" @on-cancel="onCancelSelectSiteTreeForm"></EmisSiteSelectTreePicker>
|
|
</el-dialog>
|
|
|
|
</div>
|
|
</template>
|
|
|
|
<script>
|
|
import { listEmisTmsTransPlanDtl, getEmisTmsTransPlanDtl, delEmisTmsTransPlanDtl, addEmisTmsTransPlanDtl, updateEmisTmsTransPlanDtl } from "@/api/emis/emisTmsTransPlanDtl";
|
|
import EmisSiteSimplePicker0 from '@/views/emis/EmisBaseTools/EmisSiteSimplePicker.vue';
|
|
import EmisSiteSimplePicker1 from '@/views/emis/EmisBaseTools/EmisSiteSimplePicker.vue';
|
|
import EmisSiteSelectTreePicker from '@/views/emis/EmisBaseTools/EmisSiteSelectTreePicker.vue';
|
|
import { parseTime,genJsSeqNo,getUUID } from "@/utils/custom";
|
|
|
|
export default {
|
|
name: "PlanDtlPanel",
|
|
components: {
|
|
EmisSiteSimplePicker0,
|
|
EmisSiteSimplePicker1,
|
|
EmisSiteSelectTreePicker
|
|
},
|
|
dicts: ['emis_biz_shipping_method'],
|
|
props:{
|
|
value:{
|
|
type:Array,
|
|
},
|
|
planId:{
|
|
type:Number
|
|
},
|
|
isCopy:{
|
|
type:Boolean
|
|
}
|
|
},
|
|
watch: {
|
|
value(newVal) {
|
|
},
|
|
planId(){
|
|
this.initData();
|
|
}
|
|
},
|
|
data() {
|
|
return {
|
|
resetRefreshId:null,
|
|
// 遮罩层
|
|
loading: false,
|
|
// 选中数组
|
|
ids: [],
|
|
// 非单个禁用
|
|
single: true,
|
|
// 非多个禁用
|
|
multiple: true,
|
|
// 显示搜索条件
|
|
// 总条数
|
|
total: 0,
|
|
// 费用计算表达式表格数据
|
|
emisTmsTransPlanDtlList: [],
|
|
currentSelection:[],
|
|
isAddSite:false,
|
|
titleSiteSelectTreeForm:'',
|
|
openSiteSelectTreeForm:false,
|
|
// 弹出层标题
|
|
title: "",
|
|
// 是否显示弹出层
|
|
open: false,
|
|
currentRow:{},
|
|
// 表单参数
|
|
form: {},
|
|
// 表单校验
|
|
rules: {
|
|
stepName: [
|
|
{ required: true, message: "节点名称不能为空", trigger: "blur" }
|
|
],
|
|
startSite: [
|
|
{ required: true, message: "起始网点不能为空", trigger: ["blur",'change'] }
|
|
],
|
|
destSite: [
|
|
{ required: true, message: "目的网点不能为空", trigger: ["blur",'change'] }
|
|
],
|
|
transType: [
|
|
{ required: true, message: "运输方式不能为空", trigger: ["blur",'change'] }
|
|
],
|
|
estCostDay: [
|
|
{ required: true, message: "预估运输时间不能为空", trigger: "blur" }
|
|
],
|
|
orderNum: [
|
|
{ required: true, message: "顺序号不能为空", trigger: "blur" }
|
|
],
|
|
}
|
|
};
|
|
},
|
|
created() {
|
|
this.initData();
|
|
},
|
|
methods: {
|
|
initData() {
|
|
|
|
this.reset();
|
|
if(this.planId!=null){
|
|
this.getList();
|
|
}else{
|
|
this.emisTmsTransPlanDtlList=[];
|
|
}
|
|
},
|
|
// 选择网点
|
|
handleSelectSite(){
|
|
this.resetRefreshId='siteTree-'+getUUID();
|
|
this.isAddSite=false;
|
|
// console.log(this.useSiteCode)
|
|
this.titleSiteSelectTreeForm='选择网点';
|
|
this.openSiteSelectTreeForm=true;
|
|
},
|
|
// 追加网点
|
|
handleAddSite(){
|
|
this.isAddSite=true;
|
|
this.titleSiteSelectTreeForm='追加网点';
|
|
this.openSiteSelectTreeForm=true;
|
|
},
|
|
onSelectSiteTreeCheckChange(item){
|
|
this.openSiteSelectTreeForm=false;
|
|
this.form.startSiteName=item.selectSiteNameStr;
|
|
this.form.startSite=item.selectSiteCodeStr;
|
|
console.log(item)
|
|
},
|
|
onCancelSelectSiteTreeForm(){
|
|
this.openSiteSelectTreeForm=false;
|
|
},
|
|
onDestSiteChange(item){
|
|
this.form.destSiteName=item.siteName;
|
|
},
|
|
getList() {
|
|
let queryParams={
|
|
planId:this.planId,
|
|
}
|
|
|
|
listEmisTmsTransPlanDtl(queryParams).then(response => {
|
|
this.emisTmsTransPlanDtlList = response.rows;
|
|
this.total = response.total;
|
|
this.loading = false;
|
|
this.onChage();
|
|
});
|
|
},
|
|
onChage(){
|
|
this.$emit("input", this.emisTmsTransPlanDtlList);
|
|
this.$emit("onChange",this.emisTmsTransPlanDtlList);
|
|
},
|
|
// 取消按钮
|
|
cancel() {
|
|
this.open = false;
|
|
this.reset();
|
|
},
|
|
// 表单重置
|
|
reset() {
|
|
this.form = {
|
|
id: null,
|
|
planId: this.planId,
|
|
stepName: null,
|
|
startSite: null,
|
|
startSiteName: null,
|
|
destSite: null,
|
|
destSiteName: null,
|
|
transType: null,
|
|
estCostDay: null,
|
|
orderNum: null,
|
|
status: null,
|
|
remark: null
|
|
};
|
|
this.resetForm("form");
|
|
},
|
|
|
|
/** 重置按钮操作 */
|
|
resetQuery() {
|
|
this.resetForm("queryForm");
|
|
this.handleQuery();
|
|
},
|
|
// 多选框选中数据
|
|
handleSelectionChange(selection) {
|
|
this.currentSelection = selection;
|
|
this.ids = selection.map(item => item.id)
|
|
this.orderNums = selection.map(item => item.orderNum)
|
|
this.single = selection.length!==1
|
|
this.multiple = !selection.length
|
|
this.currentRow = selection[0];
|
|
|
|
},
|
|
/** 新增按钮操作 */
|
|
handleAdd(row) {
|
|
this.reset();
|
|
this.open = true;
|
|
this.title = "新增节点";
|
|
const orderNum=this.emisTmsTransPlanDtlList.length+1;
|
|
this.form.orderNum=orderNum;
|
|
this.form.destSiteCode=null;
|
|
// if(orderNum>1){
|
|
// 获取上一条数据
|
|
// const [lastData]= this.emisTmsTransPlanDtlList.slice(-1);
|
|
// console.log(lastData);
|
|
// this.form.startSiteCode=lastData.destSiteCode;
|
|
// this.form.destSiteCode=null;
|
|
// this.form.transType=lastData.transType;
|
|
// this.form.estCostDay=1;
|
|
// }
|
|
|
|
},
|
|
|
|
/** 修改按钮操作 */
|
|
handleUpdate(row) {
|
|
this.reset();
|
|
|
|
if(this.planId != null){
|
|
this.handleUpdateByPlanId(row);
|
|
}else{
|
|
this.currentRow = row;
|
|
this.form = row;
|
|
}
|
|
|
|
this.open = true;
|
|
this.title = "修改节点";
|
|
},
|
|
handleUpdateByPlanId(row){
|
|
this.loading = true;
|
|
getEmisTmsTransPlanDtl(row.id).then(response => {
|
|
this.form = response.data;
|
|
this.loading = false;
|
|
});
|
|
},
|
|
/** 提交按钮 */
|
|
submitForm() {
|
|
this.$refs["form"].validate(valid => {
|
|
if (valid) {
|
|
// && !this.isCopy
|
|
if(this.planId != null ){
|
|
this.submitFormByPlanId()
|
|
}else{
|
|
this.submitFormByNew();
|
|
}
|
|
this.open = false;
|
|
}
|
|
});
|
|
},
|
|
submitFormByPlanId(){
|
|
if (this.form.id != null) {
|
|
updateEmisTmsTransPlanDtl(this.form).then(response => {
|
|
this.getList();
|
|
});
|
|
} else {
|
|
addEmisTmsTransPlanDtl(this.form).then(response => {
|
|
this.getList();
|
|
});
|
|
}
|
|
},
|
|
submitFormByNew(){
|
|
// 新增的需要带回数据
|
|
if (this.form.id == null) {
|
|
let newItem = Object.assign({}, this.form);
|
|
newItem.id=-1;
|
|
this.emisTmsTransPlanDtlList.push(newItem);
|
|
}
|
|
this.onChage();
|
|
},
|
|
/** 删除按钮操作 */
|
|
handleDelete(row,index,list) {
|
|
if(this.planId != null ){
|
|
this.handleDeletePlanId(row);
|
|
}else{
|
|
this.handleDeleteByNew(row,index,list);
|
|
}
|
|
},
|
|
// 从数据库中删除
|
|
handleDeletePlanId(row) {
|
|
const ids = row.id || this.ids;
|
|
this.$modal.confirm('是否确认删除').then(function() {
|
|
return delEmisTmsTransPlanDtl(ids);
|
|
}).then(() => {
|
|
this.getList();
|
|
// this.$modal.msgSuccess("删除成功");
|
|
}).catch(() => {});
|
|
},
|
|
handleDeleteByNew(row,index,list){
|
|
|
|
if(list){
|
|
list.splice(index, 1);
|
|
}else{
|
|
let orderNumMap = new Map();
|
|
this.currentSelection.forEach(item=>{
|
|
orderNumMap[item.orderNum]=1;
|
|
});
|
|
if(this.emisTmsTransPlanDtlList){
|
|
let newList=[];
|
|
let orderNumArr = this.currentSelection.map(item=>item.orderNum);
|
|
for(let i=0;i<this.emisTmsTransPlanDtlList.length;i++){
|
|
let obj=this.emisTmsTransPlanDtlList[i];
|
|
if(!(obj.orderNum in orderNumMap)){
|
|
newList.push(obj);
|
|
}
|
|
}
|
|
this.emisTmsTransPlanDtlList=newList;
|
|
}
|
|
}
|
|
|
|
}
|
|
|
|
}
|
|
};
|
|
</script>
|
|
|
|
<style scoped>
|
|
.el-divider{
|
|
margin-top: 0px;
|
|
background: 0 0;
|
|
border-top: 1px solid #E6EBF5;
|
|
}
|
|
.el-divider__text {
|
|
color: #0955ee;
|
|
cursor: pointer;
|
|
}
|
|
|
|
.el-alert__title {
|
|
color: black!important;;
|
|
}
|
|
|
|
.el-alert__description {
|
|
color: black!important;;
|
|
}
|
|
</style>
|