Skip to content

J
jiedao-app-operator-master
Commit 453ae2ff authored by huhaiiqng's avatar huhaiiqng
Browse files
Options

海运出货操作页面以及出货详情页面开发

parent 45b268ff
Hide whitespace changes
Inline Side-by-side
Showing with 470 additions and 3 deletions
src/router/index.js
View file @ 453ae2ff
......@@ -282,7 +282,29 @@ export const constantRoutes = [
meta: {title: '优惠申请', icon: '', activeMenu: '/offer/index'}
},
]
}
},
{
path: '/box',
component: Layout,
hidden: true,
redirect: 'noredirect',
children: [
{
path: 'query/:boxId(\\d+)',
component: (resolve) => import('@/views/ecw/box/query'),
props: true,
name: 'boxQuery',
meta: {title: '出货详情', icon: '', activeMenu: '/shipment/box'}
},
{
path: 'shippingSea/:boxId(\\d+)',
component: (resolve) => import('@/views/ecw/box/shipping/shippingSea'),
props: true,
name: 'shippingSea',
meta: {title: '海运出货操作', icon: '', activeMenu: '/shipment/box'}
}
]
},
]
// 防止连续点击多次路由报错
......
src/views/ecw/box/index.vue
View file @ 453ae2ff
......@@ -114,10 +114,26 @@
</el-table-column>
<el-table-column label="操作" align="center" class-name="small-padding fixed-width">
<template slot-scope="scope">
<!-- <el-button size="mini" type="text" icon="el-icon-view" @click="handleView(scope.row)"
v-hasPermi="['shipment:box:query']">查看</el-button>
<el-button size="mini" type="text" icon="el-icon-edit" @click="handleUpdate(scope.row)"
v-hasPermi="['shipment:box:update']">修改</el-button>
<el-button size="mini" type="text" icon="el-icon-delete" @click="handleDelete(scope.row)"
v-hasPermi="['shipment:box:delete']">删除</el-button>
v-hasPermi="['shipment:box:delete']">删除</el-button> -->
<el-dropdown trigger="click" @command="(command)=>handleCommand(scope.row, command)">
<el-button type="primary">
操作<i class="el-icon-arrow-down el-icon--right"></i>
</el-button>
<el-dropdown-menu slot="dropdown">
<el-dropdown-item command="edit">编辑</el-dropdown-item>
<el-dropdown-item command="sea">操作-海运</el-dropdown-item>
<el-dropdown-item command="air">操作-空运</el-dropdown-item>
<el-dropdown-item command="seaAir">操作-海空联运</el-dropdown-item>
<el-dropdown-item command="error">异常登记</el-dropdown-item>
<el-dropdown-item command="cost">费用登记</el-dropdown-item>
<el-dropdown-item command="delete">删除</el-dropdown-item>
</el-dropdown-menu>
</el-dropdown>
</template>
</el-table-column>
</el-table>
......@@ -406,7 +422,16 @@
this.exportLoading = false;
}).catch(() => {
});
}
},
/** 查看按钮操作 */
handleCommand(row, command) {
console.log(row, command)
switch (command) {
case 'sea':
this.$router.push('/box/shippingSea/' + row.id)
break;
}
},
}
};
</script>
src/views/ecw/box/query.vue 0 → 100644
View file @ 453ae2ff
<template>
<div>
<el-row type="flex" style="margin-top: 15px; margin-bottom: 15px" justify="center">
<el-col :xs="24" :sm="24" :md="24" :lg="20" :xl="16">
<div style="display: flex; justify-content: space-between;align-items: flex-end;">
<h2>出货详情</h2>
<div>
<el-button size="small">编辑</el-button>
<el-button size="small">操作</el-button>
<el-button type="primary" size="small">异常登记</el-button>
<el-button type="primary" size="small">费用登记</el-button>
<el-button type="danger" size="small">删除</el-button>
</div>
</div>
<el-card style="margin-top: 15px">
<el-descriptions :column="4" border>
<el-descriptions-item label="自编号"></el-descriptions-item>
<el-descriptions-item label="运输方式"></el-descriptions-item>
<el-descriptions-item label="出货渠道"></el-descriptions-item>
<!-- <el-descriptions-item label="柜型"></el-descriptions-item> -->
<el-descriptions-item label="状态"></el-descriptions-item>
<el-descriptions-item label="总计"></el-descriptions-item>
<el-descriptions-item label="始发地"></el-descriptions-item>
<el-descriptions-item label="目的地"></el-descriptions-item>
<el-descriptions-item label="SO.NO"></el-descriptions-item>
</el-descriptions>
</el-card>
<el-tabs style="margin-top: 15px" type="border-card">
<el-tab-pane label="明细">
<div class="detail-pane">
<p>当前部分：</p>
<el-select v-model="value" placeholder="请选择">
<el-option v-for="item in options" :key="item.value" :label="item.label" :value="item.value">
</el-option>
</el-select>
<p class="box-weight">9箱子xxx</p>
<p class="document-status">单证状态：我司全代</p>
</div>
<el-table :data="[]" style="width: 100%">
<el-table-column prop="" label="序号"> </el-table-column>
<el-table-column prop="" label="订单号"> </el-table-column>
<el-table-column prop="" label="货物信息"> </el-table-column>
<el-table-column prop="" label="计划箱数"> </el-table-column>
<el-table-column prop="" label="实装箱数"> </el-table-column>
<el-table-column prop="" label="卸柜箱数"> </el-table-column>
<el-table-column prop="" label="提货点"> </el-table-column>
<el-table-column prop="" label="体积"> </el-table-column>
<el-table-column prop="" label="重量"> </el-table-column>
<el-table-column prop="" label="货值"> </el-table-column>
<el-table-column prop="" label="报关方式"> </el-table-column>
<el-table-column prop="" label="报关费用"> </el-table-column>
</el-table>
</el-tab-pane>
<el-tab-pane label="状态"></el-tab-pane>
<el-tab-pane label="费用">
<el-table :data="[]" style="width: 100%">
<el-table-column prop="" label="序号"> </el-table-column>
<el-table-column prop="" label="费用类型"> </el-table-column>
<el-table-column prop="" label="供应商"> </el-table-column>
<el-table-column prop="" label="金额"> </el-table-column>
<el-table-column prop="" label="实付金额"> </el-table-column>
<el-table-column prop="" label="实付日期"> </el-table-column>
<el-table-column prop="" label="操作"> </el-table-column>
</el-table>
</el-tab-pane>
<el-tab-pane label="异常">
<el-table :data="[]" style="width: 100%">
<el-table-column prop="" label="序号"> </el-table-column>
<el-table-column prop="" label="操作步骤"> </el-table-column>
<el-table-column prop="" label="异常"> </el-table-column>
<el-table-column prop="" label="异常详情"> </el-table-column>
<el-table-column prop="" label="异常时间"> </el-table-column>
</el-table>
</el-tab-pane>
<el-tab-pane label="表单">
<el-table :data="[]" style="width: 50%">
<el-table-column prop="" label="文件类型"> </el-table-column>
<el-table-column prop="" label="下载链接"> </el-table-column>
</el-table>
</el-tab-pane>
</el-tabs>
</el-col>
</el-row>
</div>
</template>
<script>
import { getCustomer, getCustomerSelect } from "@/api/ecw/customer";
import { DICT_TYPE, getDictDataLabel } from "@/utils/dict";
import { getProductTypeList } from "@/api/ecw/productType";
import { getNodeList } from "@/api/ecw/node";
import CustomerFollow from "@/components/CustomerFollow";
import { parseTime } from "@/utils/ruoyi";
import CustomerComplaint from "@/views/ecw/customerComplaint";
import { listServiceUser } from "@/api/system/user";
import { getCustomerContactsListByCustomer } from "@/api/ecw/customerContacts";
export default {
name: "boxQuery",
props: {
customerId: String,
},
components: {
CustomerFollow,
CustomerComplaint,
},
created() {
getNodeList().then((r) => {
this.nodeList = r.data;
});
getCustomer(this.id).then((response) => {
this.customer = { ...this.customer, ...response.data };
getCustomerContactsListByCustomer({ customerId: this.id }).then((r) => {
this.customerContacts = r.data;
});
});
getProductTypeList().then((r) => {
this.productTypeList = r.data;
});
getCustomerSelect().then((r) => {
this.customerSelect = r.data;
});
listServiceUser().then((r) => {
this.serviceUserList = r.data;
});
},
data() {
return {
DICT_TYPE,
getDictDataLabel,
parseTime,
nodeList: [],
productTypeList: [],
customerSelect: [],
serviceUserList: [],
customerContacts: [],
customer: {
id: undefined,
number: undefined,
name: undefined,
level: undefined,
country: undefined,
type: undefined,
agentId: undefined,
company: undefined,
address: undefined,
productType: undefined,
productId: undefined,
pickupPoint: undefined,
memberId: undefined,
birthday: undefined,
balance: undefined,
source: undefined,
picture: undefined,
customerService: undefined,
customerLines: [],
promoter: undefined,
status: undefined,
founder: undefined,
department: undefined,
invoiceTitle: undefined,
licenseNumber: undefined,
bank: undefined,
bankNumber: undefined,
project: undefined,
billingAddress: undefined,
billingTell: undefined,
taxRate: undefined,
remarks: undefined,
arrivalConfirm: undefined,
weightUnit: undefined,
createTime: undefined,
},
};
},
computed: {
productType() {
const productType = this.productTypeList.find(
(p) => p.id === parseInt(this.customer.productType)
);
return productType ? productType.titleZh : "";
},
pickupPoint() {
const pickupPoint = this.nodeList.find(
(p) => p.id === parseInt(this.customer.pickupPoint)
);
return pickupPoint ? pickupPoint.titleZh : "";
},
promoter() {
return (
this.customerSelect.find((e) => e.id === this.customer.promoter)
?.name || ""
);
},
customerService() {
return (
this.serviceUserList.find((e) => e.id === this.customer.customerService)
?.nickname || ""
);
},
id() {
return this.customerId ? parseInt(this.customerId) : undefined;
},
},
};
</script>
<style lang="scss" scoped>
.detail-pane {
display: flex;
.box-weight {
margin-left: 10px;
}
.document-status {
flex: 1;
text-align: right;
}
}
</style>
src/views/ecw/box/shipping/flowChart.vue 0 → 100644
View file @ 453ae2ff
<template>
<el-scrollbar :vertical="true">
<section class="shipping-chart">
<div v-for="(nodes,index) in chartData['sea']" :key="index" class="chart-nodes">
<div>
<div v-for="node in nodes" :key="node.title" @click="nodeClick(node)" class="node-div">
<img :src="node.imgSrc" alt="">
<p>{{node.title}}</p>
</div>
</div>
<div class="chart-arrow" v-if="index !== (chartData['sea'].length-1)">
<p>箭头</p>
</div>
</div>
</section>
</el-scrollbar>
</template>
<script>
export default {
name: "flowChart",
props: {
shippingType: String,
},
data() {
return {
chartData: {
sea: [
[
{
title: "订舱",
imgSrc: require("@/assets/images/shipping/dc-start.png"),
type: "booking",
},
],
[
{
title: "预装",
imgSrc: require("@/assets/images/shipping/yz-start.png"),
type: "preinstalled",
},
{
title: "拖车",
imgSrc: require("@/assets/images/shipping/tc-start.png"),
type: "trailer",
},
],
[
{
title: "装柜",
imgSrc: require("@/assets/images/shipping/zg-start.png"),
type: "cabinet",
},
],
[
{
title: "报关",
imgSrc: require("@/assets/images/shipping/bg-start.png"),
type: "customsDeclaration",
},
{
title: "配船",
imgSrc: require("@/assets/images/shipping/pc-start.png"),
type: "ship",
},
{
title: "提单材料",
imgSrc: require("@/assets/images/shipping/tdcl-start.png"),
type: "subMaterial",
},
],
[
{
title: "驳船",
imgSrc: require("@/assets/images/shipping/bc-start.png"),
type: "barge",
},
],
[
{
title: "起运",
imgSrc: require("@/assets/images/shipping/qy-start.png"),
type: "departure",
},
],
[
{
title: "清关文件",
imgSrc: require("@/assets/images/shipping/qg-start.png"),
type: "clearanceDocument",
},
],
[
{
title: "到港",
imgSrc: require("@/assets/images/shipping/dg-start.png"),
type: "arrival",
},
],
[
{
title: "清关",
imgSrc: require("@/assets/images/shipping/qg-start.png"),
type: "customsClearance",
},
],
[
{
title: "卸柜",
imgSrc: require("@/assets/images/shipping/xg-start.png"),
type: "unloading",
},
],
[
{
title: "结算",
imgSrc: require("@/assets/images/shipping/js-start.png"),
type: "settlement",
isEnd: true,
},
],
],
},
};
},
methods: {
nodeClick(node) {
console.log(node);
},
},
};
</script>
<style lang="scss" scoped>
.shipping-chart {
display: flex;
justify-content: center;
.chart-nodes {
p {
margin: 0;
text-align: center;
}
display: flex;
align-items: center;
justify-content: center;
.node-div {
cursor: pointer;
}
}
.chart-arrow {
margin: 0 10px;
}
}
</style>
src/views/ecw/box/shipping/shippingSea.vue 0 → 100644
View file @ 453ae2ff
<template>
<div>
<el-row type="flex" style="margin-top: 15px; margin-bottom: 15px" justify="center">
<el-col :xs="24" :sm="24" :md="24" :lg="20" :xl="20">
<div style="display: flex; justify-content: space-between;align-items: flex-end;">
<h2>海运出货操作</h2>
</div>
<el-card style="margin-top: 15px">
<el-descriptions :column="5" border>
<el-descriptions-item label="自编号"></el-descriptions-item>
<el-descriptions-item label="运输方式"></el-descriptions-item>
<el-descriptions-item label="始发地"></el-descriptions-item>
<el-descriptions-item label="目的地"></el-descriptions-item>
<el-descriptions-item label="状态"></el-descriptions-item>
</el-descriptions>
</el-card>
<div class="shipping-flow">
<flowChart />
</div>
</el-col>
</el-row>
</div>
</template>
<script>
import flowChart from "./flowChart";
export default {
name: "shippingSea",
components: {
flowChart,
},
props: {
boxId: String,
},
};
</script>
<style lang="scss" scoped>
.shipping-flow {
margin-top: 15px;
}
</style>
Markdown is supported
0% or
You are about to add 0 people to the discussion. Proceed with caution.
Finish editing this message first!
Please register or to comment