md
This commit is contained in:
linfso
parent
70c559c7e2
commit
5db418e1ae
336
src/components/XdSteps/index.vue
Normal file
336
src/components/XdSteps/index.vue
Normal file
@ -0,0 +1,336 @@
|
|||||||
|
<template>
|
||||||
|
<div class="m-steps-area" :style="`width: ${totalWidth}px;`">
|
||||||
|
<div class="m-steps">
|
||||||
|
<div :class="['m-steps-item',
|
||||||
|
{
|
||||||
|
'finished': current > n,
|
||||||
|
'process': current === n && n !== totalSteps,
|
||||||
|
'last-process': current === totalSteps && n === totalSteps,
|
||||||
|
'middle-wait': current < n && n !== totalSteps,
|
||||||
|
'last-wait': current < n && n === totalSteps
|
||||||
|
}
|
||||||
|
]"
|
||||||
|
v-for="n in totalSteps"
|
||||||
|
:key="n">
|
||||||
|
<div class="m-info-wrap" @click="onChange(n)">
|
||||||
|
<div class="m-steps-icon">
|
||||||
|
<span class="u-icon" v-if="current<=n">{{ n }}</span>
|
||||||
|
<svg class="u-icon" v-else viewBox="64 64 896 896" data-icon="check" aria-hidden="true" focusable="false"><path d="M912 190h-69.9c-9.8 0-19.1 4.5-25.1 12.2L404.7 724.5 207 474a32 32 0 0 0-25.1-12.2H112c-6.7 0-10.4 7.7-6.3 12.9l273.9 347c12.8 16.2 37.4 16.2 50.3 0l488.4-618.9c4.1-5.1.4-12.8-6.3-12.8z"></path></svg>
|
||||||
|
</div>
|
||||||
|
<div class="m-steps-content">
|
||||||
|
<div class="u-steps-title">{{ stepsLabel[n-1] }}</div>
|
||||||
|
<div class="u-steps-description" v-show="stepsDesc[n-1]" :style="`max-width: ${descMaxWidth}px;`">{{ stepsDesc[n-1] }}</div>
|
||||||
|
</div>
|
||||||
|
</div>
|
||||||
|
</div>
|
||||||
|
</div>
|
||||||
|
</div>
|
||||||
|
</template>
|
||||||
|
<script>
|
||||||
|
export default {
|
||||||
|
name: 'Steps',
|
||||||
|
props: {
|
||||||
|
stepsLabel: { // 步骤标题数组
|
||||||
|
type: Array,
|
||||||
|
default: () => {
|
||||||
|
return []
|
||||||
|
}
|
||||||
|
},
|
||||||
|
stepsDesc: { // 步骤描述数组
|
||||||
|
type: Array,
|
||||||
|
default: () => {
|
||||||
|
return []
|
||||||
|
}
|
||||||
|
},
|
||||||
|
totalSteps: { // 步骤总数
|
||||||
|
type: Number,
|
||||||
|
default: 3
|
||||||
|
},
|
||||||
|
currentStep: { // 当前选中的步骤
|
||||||
|
type: Number,
|
||||||
|
default: 1
|
||||||
|
},
|
||||||
|
totalWidth: { // 步骤条总宽度
|
||||||
|
type: Number,
|
||||||
|
default: 900
|
||||||
|
},
|
||||||
|
descMaxWidth: { // 描述文本最大宽度
|
||||||
|
type: Number,
|
||||||
|
default: 140
|
||||||
|
}
|
||||||
|
},
|
||||||
|
data () {
|
||||||
|
return {
|
||||||
|
// 若当前选中步骤超过总步骤数，则默认选择步骤1
|
||||||
|
current: this.currentStep > this.totalSteps ? 1 : this.currentStep
|
||||||
|
}
|
||||||
|
},
|
||||||
|
methods: {
|
||||||
|
onChange (index) { // 点击切换选择步骤
|
||||||
|
// e.stopPropagation()
|
||||||
|
console.log('index:', index)
|
||||||
|
if (this.current !== index) {
|
||||||
|
this.current = index
|
||||||
|
this.$emit('change', index)
|
||||||
|
}
|
||||||
|
}
|
||||||
|
}
|
||||||
|
}
|
||||||
|
</script>
|
||||||
|
<!-- // #1890FF: #1890FF; -->
|
||||||
|
<style lang="scss" scoped>
|
||||||
|
.m-steps-area {
|
||||||
|
margin: 0px auto;
|
||||||
|
}
|
||||||
|
|
||||||
|
.m-steps-area .m-steps {
|
||||||
|
padding: 30px 0;
|
||||||
|
display: flex;
|
||||||
|
}
|
||||||
|
|
||||||
|
.m-steps-area .m-steps .m-steps-item {
|
||||||
|
display: inline-block;
|
||||||
|
overflow: hidden;
|
||||||
|
font-size: 16px;
|
||||||
|
line-height: 32px;
|
||||||
|
}
|
||||||
|
|
||||||
|
.m-steps-area .m-steps .m-steps-item:not(:last-child) {
|
||||||
|
margin-right: 16px;
|
||||||
|
flex: 1;
|
||||||
|
}
|
||||||
|
|
||||||
|
.m-steps-area .m-steps .m-steps-item .m-info-wrap {
|
||||||
|
display: inline-block;
|
||||||
|
cursor: pointer;
|
||||||
|
}
|
||||||
|
|
||||||
|
.m-steps-area .m-steps .m-steps-item .m-info-wrap .m-steps-icon {
|
||||||
|
display: inline-block;
|
||||||
|
margin-right: 8px;
|
||||||
|
width: 32px;
|
||||||
|
height: 32px;
|
||||||
|
border-radius: 50%;
|
||||||
|
text-align: center;
|
||||||
|
}
|
||||||
|
|
||||||
|
.m-steps-area .m-steps .m-steps-item .m-info-wrap .m-steps-content {
|
||||||
|
display: inline-block;
|
||||||
|
vertical-align: top;
|
||||||
|
}
|
||||||
|
|
||||||
|
.m-steps-area .m-steps .m-steps-item .m-info-wrap .m-steps-content .u-steps-title {
|
||||||
|
position: relative;
|
||||||
|
display: inline-block;
|
||||||
|
padding-right: 16px;
|
||||||
|
}
|
||||||
|
|
||||||
|
.m-steps-area .m-steps .m-steps-item .m-info-wrap .m-steps-content .u-steps-description {
|
||||||
|
font-size: 14px;
|
||||||
|
word-wrap: break-word;
|
||||||
|
}
|
||||||
|
|
||||||
|
.m-steps-area .m-steps .u-tail {
|
||||||
|
background: #e8e8e8;
|
||||||
|
position: absolute;
|
||||||
|
top: 16px;
|
||||||
|
left: 100%;
|
||||||
|
display: block;
|
||||||
|
width: 3000px;
|
||||||
|
height: 1px;
|
||||||
|
content: "";
|
||||||
|
}
|
||||||
|
|
||||||
|
.m-steps-area .m-steps .finished:hover .m-steps-content .u-steps-title {
|
||||||
|
color: #1890FF;
|
||||||
|
}
|
||||||
|
|
||||||
|
.m-steps-area .m-steps .finished:hover .m-steps-content .u-steps-description {
|
||||||
|
color: #1890FF;
|
||||||
|
}
|
||||||
|
|
||||||
|
.m-steps-area .m-steps .finished .m-steps-icon {
|
||||||
|
background: #fff;
|
||||||
|
border: 1px solid rgba(0, 0, 0, 0.25);
|
||||||
|
border-color: #1890FF;
|
||||||
|
}
|
||||||
|
|
||||||
|
.m-steps-area .m-steps .finished .m-steps-icon .u-icon {
|
||||||
|
fill: #1890FF;
|
||||||
|
width: 16px;
|
||||||
|
height: 16px;
|
||||||
|
vertical-align: top;
|
||||||
|
margin-top: 8px;
|
||||||
|
}
|
||||||
|
|
||||||
|
.m-steps-area .m-steps .finished .m-steps-content {
|
||||||
|
color: rgba(0, 0, 0, 0.65);
|
||||||
|
}
|
||||||
|
|
||||||
|
.m-steps-area .m-steps .finished .m-steps-content .u-steps-title {
|
||||||
|
color: rgba(0, 0, 0, 0.65);
|
||||||
|
}
|
||||||
|
|
||||||
|
.m-steps-area .m-steps .finished .m-steps-content .u-steps-title:after {
|
||||||
|
background: #e8e8e8;
|
||||||
|
position: absolute;
|
||||||
|
top: 16px;
|
||||||
|
left: 100%;
|
||||||
|
display: block;
|
||||||
|
width: 3000px;
|
||||||
|
height: 1px;
|
||||||
|
content: "";
|
||||||
|
background: #1890FF;
|
||||||
|
}
|
||||||
|
|
||||||
|
.m-steps-area .m-steps .finished .m-steps-content .u-steps-description {
|
||||||
|
color: rgba(0, 0, 0, 0.45);
|
||||||
|
}
|
||||||
|
|
||||||
|
.m-steps-area .m-steps .process .m-steps-icon {
|
||||||
|
background: #1890FF;
|
||||||
|
border: 1px solid rgba(0, 0, 0, 0.25);
|
||||||
|
border-color: #1890FF;
|
||||||
|
}
|
||||||
|
|
||||||
|
.m-steps-area .m-steps .process .m-steps-icon .u-icon {
|
||||||
|
color: #fff;
|
||||||
|
}
|
||||||
|
|
||||||
|
.m-steps-area .m-steps .process .m-steps-content {
|
||||||
|
color: rgba(0, 0, 0, 0.65);
|
||||||
|
}
|
||||||
|
|
||||||
|
.m-steps-area .m-steps .process .m-steps-content .u-steps-title {
|
||||||
|
font-weight: 600;
|
||||||
|
color: rgba(0, 0, 0, 0.85);
|
||||||
|
}
|
||||||
|
|
||||||
|
.m-steps-area .m-steps .process .m-steps-content .u-steps-title:after {
|
||||||
|
background: #e8e8e8;
|
||||||
|
position: absolute;
|
||||||
|
top: 16px;
|
||||||
|
left: 100%;
|
||||||
|
display: block;
|
||||||
|
width: 3000px;
|
||||||
|
height: 1px;
|
||||||
|
content: "";
|
||||||
|
}
|
||||||
|
|
||||||
|
.m-steps-area .m-steps .process .m-steps-content .u-steps-description {
|
||||||
|
color: rgba(0, 0, 0, 0.65);
|
||||||
|
}
|
||||||
|
|
||||||
|
.m-steps-area .m-steps .last-process .m-steps-icon {
|
||||||
|
background: #1890FF;
|
||||||
|
border: 1px solid rgba(0, 0, 0, 0.25);
|
||||||
|
border-color: #1890FF;
|
||||||
|
}
|
||||||
|
|
||||||
|
.m-steps-area .m-steps .last-process .m-steps-icon .u-icon {
|
||||||
|
color: #fff;
|
||||||
|
}
|
||||||
|
|
||||||
|
.m-steps-area .m-steps .last-process .m-steps-content {
|
||||||
|
color: rgba(0, 0, 0, 0.65);
|
||||||
|
}
|
||||||
|
|
||||||
|
.m-steps-area .m-steps .last-process .m-steps-content .u-steps-title {
|
||||||
|
font-weight: 600;
|
||||||
|
color: rgba(0, 0, 0, 0.85);
|
||||||
|
}
|
||||||
|
|
||||||
|
.m-steps-area .m-steps .last-process .m-steps-content .u-steps-description {
|
||||||
|
color: rgba(0, 0, 0, 0.65);
|
||||||
|
}
|
||||||
|
|
||||||
|
.m-steps-area .m-steps .middle-wait:hover .m-steps-icon {
|
||||||
|
border: 1px solid #1890FF;
|
||||||
|
}
|
||||||
|
|
||||||
|
.m-steps-area .m-steps .middle-wait:hover .m-steps-icon .u-icon {
|
||||||
|
color: #1890FF;
|
||||||
|
}
|
||||||
|
|
||||||
|
.m-steps-area .m-steps .middle-wait:hover .m-steps-content .u-steps-title {
|
||||||
|
color: #1890FF;
|
||||||
|
}
|
||||||
|
|
||||||
|
.m-steps-area .m-steps .middle-wait:hover .m-steps-content .u-steps-description {
|
||||||
|
color: #1890FF;
|
||||||
|
}
|
||||||
|
|
||||||
|
.m-steps-area .m-steps .middle-wait .m-steps-icon {
|
||||||
|
background: #fff;
|
||||||
|
border: 1px solid rgba(0, 0, 0, 0.25);
|
||||||
|
}
|
||||||
|
|
||||||
|
.m-steps-area .m-steps .middle-wait .m-steps-icon .u-icon {
|
||||||
|
color: rgba(0, 0, 0, 0.25);
|
||||||
|
}
|
||||||
|
|
||||||
|
.m-steps-area .m-steps .middle-wait .m-steps-content {
|
||||||
|
color: rgba(0, 0, 0, 0.65);
|
||||||
|
}
|
||||||
|
|
||||||
|
.m-steps-area .m-steps .middle-wait .m-steps-content .u-steps-title {
|
||||||
|
color: rgba(0, 0, 0, 0.45);
|
||||||
|
}
|
||||||
|
|
||||||
|
.m-steps-area .m-steps .middle-wait .m-steps-content .u-steps-title:after {
|
||||||
|
background: #e8e8e8;
|
||||||
|
position: absolute;
|
||||||
|
top: 16px;
|
||||||
|
left: 100%;
|
||||||
|
display: block;
|
||||||
|
width: 3000px;
|
||||||
|
height: 1px;
|
||||||
|
content: "";
|
||||||
|
}
|
||||||
|
|
||||||
|
.m-steps-area .m-steps .middle-wait .m-steps-content .u-steps-description {
|
||||||
|
color: rgba(0, 0, 0, 0.45);
|
||||||
|
}
|
||||||
|
|
||||||
|
.m-steps-area .m-steps .last-wait {
|
||||||
|
margin-right: 0;
|
||||||
|
}
|
||||||
|
|
||||||
|
.m-steps-area .m-steps .last-wait:hover .m-steps-icon {
|
||||||
|
border: 1px solid #1890FF;
|
||||||
|
}
|
||||||
|
|
||||||
|
.m-steps-area .m-steps .last-wait:hover .m-steps-icon .u-icon {
|
||||||
|
color: #1890FF;
|
||||||
|
}
|
||||||
|
|
||||||
|
.m-steps-area .m-steps .last-wait:hover .m-steps-content .u-steps-title {
|
||||||
|
color: #1890FF;
|
||||||
|
}
|
||||||
|
|
||||||
|
.m-steps-area .m-steps .last-wait:hover .m-steps-content .u-steps-description {
|
||||||
|
color: #1890FF;
|
||||||
|
}
|
||||||
|
|
||||||
|
.m-steps-area .m-steps .last-wait .m-steps-icon {
|
||||||
|
background: #fff;
|
||||||
|
border: 1px solid rgba(0, 0, 0, 0.25);
|
||||||
|
}
|
||||||
|
|
||||||
|
.m-steps-area .m-steps .last-wait .m-steps-icon .u-icon {
|
||||||
|
color: rgba(0, 0, 0, 0.25);
|
||||||
|
}
|
||||||
|
|
||||||
|
.m-steps-area .m-steps .last-wait .m-steps-content {
|
||||||
|
color: rgba(0, 0, 0, 0.65);
|
||||||
|
}
|
||||||
|
|
||||||
|
.m-steps-area .m-steps .last-wait .m-steps-content .u-steps-title {
|
||||||
|
color: rgba(0, 0, 0, 0.45);
|
||||||
|
}
|
||||||
|
|
||||||
|
.m-steps-area .m-steps .last-wait .m-steps-content .u-steps-description {
|
||||||
|
color: rgba(0, 0, 0, 0.45);
|
||||||
|
}
|
||||||
|
|
||||||
|
</style>
|
||||||
426
src/views/emis/emisTmsTransPlan/planDtlPanel.vue
Normal file
426
src/views/emis/emisTmsTransPlan/planDtlPanel.vue
Normal file
@ -0,0 +1,426 @@
|
|||||||
|
<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 stripe @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>
|
||||||
|
|
||||||
|
<!-- @click="handleDelete(scope.row)" -->
|
||||||
|
<!-- 添加或修改费用计算表达式对话框 -->
|
||||||
|
<el-dialog :title="title" :visible.sync="open" width="50%" :close-on-click-modal="false" 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 :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';
|
||||||
|
|
||||||
|
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 {
|
||||||
|
// 遮罩层
|
||||||
|
loading: false,
|
||||||
|
// 选中数组
|
||||||
|
ids: [],
|
||||||
|
// 非单个禁用
|
||||||
|
single: true,
|
||||||
|
// 非多个禁用
|
||||||
|
multiple: true,
|
||||||
|
// 显示搜索条件
|
||||||
|
// 总条数
|
||||||
|
total: 0,
|
||||||
|
// 费用计算表达式表格数据
|
||||||
|
emisTmsTransPlanDtlList: [],
|
||||||
|
|
||||||
|
isAddSite:false,
|
||||||
|
titleSiteSelectTreeForm:'',
|
||||||
|
openSiteSelectTreeForm:false,
|
||||||
|
// 弹出层标题
|
||||||
|
title: "",
|
||||||
|
// 是否显示弹出层
|
||||||
|
open: false,
|
||||||
|
currentRow:{},
|
||||||
|
// 表单参数
|
||||||
|
form: {},
|
||||||
|
// 表单校验
|
||||||
|
rules: {
|
||||||
|
|
||||||
|
}
|
||||||
|
};
|
||||||
|
},
|
||||||
|
created() {
|
||||||
|
this.initData();
|
||||||
|
},
|
||||||
|
methods: {
|
||||||
|
initData() {
|
||||||
|
this.reset();
|
||||||
|
if(this.planId!=null){
|
||||||
|
this.getList();
|
||||||
|
}else{
|
||||||
|
this.emisTmsTransPlanDtlList=[];
|
||||||
|
}
|
||||||
|
},
|
||||||
|
// 选择网点
|
||||||
|
handleSelectSite(){
|
||||||
|
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,
|
||||||
|
}
|
||||||
|
console.log("======>");
|
||||||
|
console.log(queryParams);
|
||||||
|
|
||||||
|
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.ids = selection.map(item => item.id)
|
||||||
|
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;
|
||||||
|
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;
|
||||||
|
}
|
||||||
|
|
||||||
|
},
|
||||||
|
handleCopy(row){
|
||||||
|
this.reset();
|
||||||
|
this.open = true;
|
||||||
|
this.title = "复制节点";
|
||||||
|
console.log(row)
|
||||||
|
const orderNum=this.emisTmsTransPlanDtlList.length+1;
|
||||||
|
if(orderNum>1){
|
||||||
|
// 获取上一条数据
|
||||||
|
let newData =Object.assign({}, row);
|
||||||
|
console.log(newData)
|
||||||
|
this.form=newData;
|
||||||
|
this.form.orderNum=orderNum;
|
||||||
|
// this.form.startWeight=newData.endWeight;
|
||||||
|
// this.form.endWeight='';
|
||||||
|
// this.form.initialWeight=0;
|
||||||
|
// this.form.additionalWeight=0;
|
||||||
|
// this.form.calculateExpression=newData.calculateExpression;
|
||||||
|
}
|
||||||
|
|
||||||
|
},
|
||||||
|
/** 修改按钮操作 */
|
||||||
|
handleUpdate(row) {
|
||||||
|
this.reset();
|
||||||
|
|
||||||
|
if(this.quoteId != null && !this.isCopy){
|
||||||
|
this.handleUpdateByQuoteId(row);
|
||||||
|
}else{
|
||||||
|
this.currentRow = row;
|
||||||
|
this.form = row;
|
||||||
|
}
|
||||||
|
|
||||||
|
this.open = true;
|
||||||
|
this.title = "修改节点";
|
||||||
|
},
|
||||||
|
handleUpdateByQuoteId(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.reset();
|
||||||
|
this.open = false;
|
||||||
|
}
|
||||||
|
});
|
||||||
|
},
|
||||||
|
submitFormByPlanId(){
|
||||||
|
if (this.form.id != null) {
|
||||||
|
console.log("=======1");
|
||||||
|
console.log(this.form);
|
||||||
|
|
||||||
|
updateEmisTmsTransPlanDtl(this.form).then(response => {
|
||||||
|
// this.$modal.msgSuccess("修改成功");
|
||||||
|
// this.$emit("on-changed");
|
||||||
|
this.getList();
|
||||||
|
});
|
||||||
|
} else {
|
||||||
|
console.log("=======2");
|
||||||
|
console.log(this.form);
|
||||||
|
|
||||||
|
addEmisTmsTransPlanDtl(this.form).then(response => {
|
||||||
|
// this.$modal.msgSuccess("添加成功");
|
||||||
|
// this.$emit("on-changed");
|
||||||
|
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.quoteId != null && !this.isCopy){
|
||||||
|
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){
|
||||||
|
list.splice(index, 1);
|
||||||
|
}
|
||||||
|
|
||||||
|
}
|
||||||
|
};
|
||||||
|
</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>
|
||||||
Loading…
Reference in New Issue
Block a user