成品发货
This commit is contained in:
162
src/views/delivery/deliveryLog/components/addOrUpdate.vue
Normal file
162
src/views/delivery/deliveryLog/components/addOrUpdate.vue
Normal file
@@ -0,0 +1,162 @@
|
||||
<template>
|
||||
<el-form ref="addOrUpdate" :rules="rules" label-width="130px" :model="form">
|
||||
<el-row>
|
||||
<el-col :span='12'>
|
||||
<el-form-item label="订单名" prop="orderId">
|
||||
<el-select v-model="form.orderId" placeholder="请选择" style="width: 100%;">
|
||||
<el-option
|
||||
v-for="item in orderList"
|
||||
:key="item.id"
|
||||
:label="item.name"
|
||||
:value="item.id">
|
||||
</el-option>
|
||||
</el-select>
|
||||
</el-form-item>
|
||||
</el-col>
|
||||
<el-col :span='12'>
|
||||
<el-form-item label="发货单名称" prop="name">
|
||||
<el-input v-model="form.name"></el-input>
|
||||
</el-form-item>
|
||||
</el-col>
|
||||
</el-row>
|
||||
<el-row>
|
||||
<el-col :span='12'>
|
||||
<el-form-item label="发货时间" prop="deliveryTime">
|
||||
<el-date-picker
|
||||
v-model="form.deliveryTime"
|
||||
type="datetime"
|
||||
format='yyyy-MM-dd HH:mm:ss'
|
||||
value-format="timestamp"
|
||||
style="width: 100%;"
|
||||
placeholder="选择日期">
|
||||
</el-date-picker>
|
||||
</el-form-item>
|
||||
</el-col>
|
||||
<el-col :span='12'>
|
||||
<el-form-item label="发货单号" prop="code">
|
||||
<el-input v-model="form.code"></el-input>
|
||||
</el-form-item>
|
||||
</el-col>
|
||||
</el-row>
|
||||
<el-row>
|
||||
<el-col :span='12'>
|
||||
<el-form-item label="发货负责人" prop="deliveryPersonId">
|
||||
<el-select v-model="form.deliveryPersonId" placeholder="请选择" style="width: 100%;">
|
||||
<el-option
|
||||
v-for="item in personList"
|
||||
:key="item.id"
|
||||
:label="item.name"
|
||||
:value="item.id">
|
||||
</el-option>
|
||||
</el-select>
|
||||
</el-form-item>
|
||||
</el-col>
|
||||
<el-col :span='12'>
|
||||
<el-form-item label="运输负责人" prop="principal">
|
||||
<el-input v-model="form.principal"></el-input>
|
||||
</el-form-item>
|
||||
</el-col>
|
||||
</el-row>
|
||||
<el-row>
|
||||
<el-col :span='12'>
|
||||
<el-form-item label="运输联系方式" prop="principalCall">
|
||||
<el-input v-model="form.principalCall"></el-input>
|
||||
</el-form-item>
|
||||
</el-col>
|
||||
<el-col :span='12'>
|
||||
<el-form-item label="运输费用" prop="principalCost">
|
||||
<el-input-number v-model="form.principalCost" :min="0" :max='9999999999' :precision='2'></el-input-number>
|
||||
</el-form-item>
|
||||
</el-col>
|
||||
</el-row>
|
||||
<el-row>
|
||||
<el-col :span='24'>
|
||||
<el-form-item label="备注" prop="remark">
|
||||
<el-input v-model="form.remark"></el-input>
|
||||
</el-form-item>
|
||||
</el-col>
|
||||
</el-row>
|
||||
</el-form>
|
||||
</template>
|
||||
<script>
|
||||
import { orderList } from '@/api/base/orderManage'
|
||||
import { getWorkerList } from '@/api/base/worker'
|
||||
import { deliveryLogCreate, deliveryLogUpdate, getDeliveryLog } from '@/api/base/delivery'
|
||||
export default {
|
||||
name: 'AddOrUpdate',
|
||||
data() {
|
||||
return {
|
||||
form: {
|
||||
id: '',
|
||||
orderId: '',
|
||||
name: '',
|
||||
code: '',
|
||||
deliveryTime: null,
|
||||
deliveryPersonId: '',
|
||||
principal: '',
|
||||
principalCall: '',
|
||||
principalCost: 0.00,
|
||||
remark: ''
|
||||
},
|
||||
isEdit: false,
|
||||
rules: {
|
||||
orderId: [{ required: true, message: "订单名不能为空", trigger: "change" }],
|
||||
name: [{ required: true, message: "发货单名称不能为空", trigger: "blur" }],
|
||||
code: [{ required: true, message: "发货单号不能为空", trigger: "blur" }]
|
||||
},
|
||||
orderList: [],
|
||||
personList: []
|
||||
}
|
||||
},
|
||||
methods: {
|
||||
init(id) {
|
||||
this.getSelectList()
|
||||
if (id) {
|
||||
this.form.id = id
|
||||
this.isEdit = true
|
||||
getDeliveryLog({id}).then(res => {
|
||||
this.form = res.data || {}
|
||||
})
|
||||
}
|
||||
},
|
||||
getSelectList() {
|
||||
orderList().then(res => {
|
||||
this.orderList = res.data || []
|
||||
})
|
||||
getWorkerList().then(res => {
|
||||
this.personList = res.data || []
|
||||
})
|
||||
},
|
||||
submitForm() {
|
||||
this.$refs['addOrUpdate'].validate((valid) => {
|
||||
if (valid) {
|
||||
console.log(this.form)
|
||||
if (this.isEdit) {
|
||||
//编辑
|
||||
deliveryLogUpdate({ ...this.form }).then((res) => {
|
||||
if (res.code === 0) {
|
||||
this.$modal.msgSuccess("操作成功");
|
||||
this.$emit('successSubmit')
|
||||
}
|
||||
})
|
||||
} else {
|
||||
deliveryLogCreate({ ...this.form }).then((res) => {
|
||||
if (res.code === 0) {
|
||||
this.$modal.msgSuccess("操作成功");
|
||||
this.$emit('successSubmit')
|
||||
}
|
||||
})
|
||||
}
|
||||
} else {
|
||||
return false
|
||||
}
|
||||
})
|
||||
},
|
||||
formClear() {
|
||||
this.$refs.addOrUpdate.resetFields()
|
||||
this.form.principalCost = 0.00
|
||||
this.isEdit = false
|
||||
}
|
||||
}
|
||||
}
|
||||
</script>
|
||||
170
src/views/delivery/deliveryLog/components/deliveryLogDetail.vue
Normal file
170
src/views/delivery/deliveryLog/components/deliveryLogDetail.vue
Normal file
@@ -0,0 +1,170 @@
|
||||
<template>
|
||||
<el-drawer
|
||||
title="发货清单详情"
|
||||
size="60%"
|
||||
:append-to-body="true"
|
||||
:visible.sync="centervisible"
|
||||
@close='close'>
|
||||
<div class="box1">
|
||||
<el-row>
|
||||
<el-col :span='12'>
|
||||
<span class="title">订单名：</span>
|
||||
<span class="text">{{orderName ? orderName : '-'}}</span>
|
||||
</el-col>
|
||||
<el-col :span='12'>
|
||||
<span class="title">发货单号：</span>
|
||||
<span class="text">{{code ? code : '-'}}</span>
|
||||
</el-col>
|
||||
</el-row>
|
||||
</div>
|
||||
<div class="box2">
|
||||
<div class="boxTitle">
|
||||
<span class="blueTitle"></span>
|
||||
<span>详情</span>
|
||||
</div>
|
||||
<base-table
|
||||
:page="queryParams.pageNo"
|
||||
:limit="queryParams.pageSize"
|
||||
:table-props="tableProps"
|
||||
:table-data="tableData"
|
||||
:max-height="tableH"
|
||||
/>
|
||||
<pagination
|
||||
:page.sync="queryParams.pageNo"
|
||||
:limit.sync="queryParams.pageSize"
|
||||
:total="total"
|
||||
@pagination="getList"
|
||||
/>
|
||||
</div>
|
||||
</el-drawer>
|
||||
</template>
|
||||
<script>
|
||||
import { parseTime } from '@/utils/ruoyi'
|
||||
import { deliveryLogDetPage } from '@/api/base/delivery'
|
||||
const tableProps = [
|
||||
{
|
||||
prop: 'createTime',
|
||||
label: '添加时间',
|
||||
filter: parseTime,
|
||||
minWidth: 150
|
||||
},
|
||||
{
|
||||
prop: 'deliveryCarCode',
|
||||
label: '装车单号',
|
||||
showOverflowtooltip: true
|
||||
},
|
||||
{
|
||||
prop: 'loadTime',
|
||||
label: '装车时间',
|
||||
filter: parseTime,
|
||||
minWidth: 150
|
||||
},
|
||||
{
|
||||
prop: 'productName',
|
||||
label: '装车产品'
|
||||
},
|
||||
{
|
||||
prop: 'packagingSize',
|
||||
label: '装箱规格(片/箱)',
|
||||
width: 120
|
||||
},
|
||||
{
|
||||
prop: 'packagingNum',
|
||||
label: '箱数'
|
||||
},
|
||||
{
|
||||
prop: 'quantity',
|
||||
label: '装车总量'
|
||||
},
|
||||
{
|
||||
prop: 'productDate',
|
||||
label: '产品批次',
|
||||
minWidth: 150,
|
||||
showOverflowtooltip: true
|
||||
}
|
||||
]
|
||||
export default {
|
||||
name: 'DeliveryLogDetail',
|
||||
data() {
|
||||
return {
|
||||
centervisible: false,
|
||||
queryParams: {
|
||||
pageNo: 1,
|
||||
pageSize: 20,
|
||||
logId: ''
|
||||
},
|
||||
total: 0,
|
||||
tableProps,
|
||||
tableData: [],
|
||||
tableH: this.tableHeight(275),
|
||||
orderName: '',
|
||||
code: ''
|
||||
}
|
||||
},
|
||||
mounted() {
|
||||
window.addEventListener('resize', () => {
|
||||
this.tableH = this.tableHeight(275)
|
||||
})
|
||||
},
|
||||
methods: {
|
||||
init(param) {
|
||||
this.orderName = param.orderName
|
||||
this.code = param.code
|
||||
this.queryParams.logId = param.id
|
||||
this.centervisible = true
|
||||
this.getList()
|
||||
},
|
||||
getList() {
|
||||
deliveryLogDetPage({...this.queryParams}).then(res => {
|
||||
this.tableData = res.data.list || []
|
||||
this.total = res.data.total || 0
|
||||
})
|
||||
},
|
||||
close() {
|
||||
this.orderName = ''
|
||||
this.code = ''
|
||||
this.queryParams.pageNo = 1
|
||||
this.queryParams.pageSize = 20
|
||||
this.queryParams.logId = ''
|
||||
this.tableData = []
|
||||
this.total = 0
|
||||
}
|
||||
}
|
||||
}
|
||||
</script>
|
||||
<style scoped lang='scss'>
|
||||
.boxTitle {
|
||||
display: inline-block;
|
||||
font-size: 16px;
|
||||
font-weight: 400;
|
||||
color: #000000;
|
||||
margin:0 10px 10px 0;
|
||||
}
|
||||
.blueTitle {
|
||||
content: '';
|
||||
display: inline-block;
|
||||
width: 4px;
|
||||
height: 18px;
|
||||
background-color: #0B58FF;
|
||||
border-radius: 1px;
|
||||
margin-right: 8px;
|
||||
vertical-align: bottom;
|
||||
}
|
||||
.box1 {
|
||||
padding: 8px 8px 8px 40px;
|
||||
.title {
|
||||
height: 16px;
|
||||
font-weight: 600;
|
||||
color: rgba(0,0,0,0.85);
|
||||
}
|
||||
.text {
|
||||
height: 16px;
|
||||
font-weight: 400;
|
||||
color: rgba(102,102,102,0.75);
|
||||
}
|
||||
}
|
||||
.box2 {
|
||||
padding:32px 32px 30px 30px;
|
||||
height: calc(100vh - 125px);
|
||||
}
|
||||
</style>
|
||||
141
src/views/delivery/deliveryLog/components/loadedPage.vue
Normal file
141
src/views/delivery/deliveryLog/components/loadedPage.vue
Normal file
@@ -0,0 +1,141 @@
|
||||
<template>
|
||||
<el-form ref="addOrUpdate" :rules="rules" label-width="130px" :model="form">
|
||||
<el-row>
|
||||
<el-col :span='12'>
|
||||
<el-form-item label="发货单号">
|
||||
<el-input v-model="code" disabled></el-input>
|
||||
</el-form-item>
|
||||
</el-col>
|
||||
<el-col :span='12'>
|
||||
<el-form-item label="装车单号" prop="deliveryCarCode">
|
||||
<el-input v-model="form.deliveryCarCode"></el-input>
|
||||
</el-form-item>
|
||||
</el-col>
|
||||
</el-row>
|
||||
<el-row>
|
||||
<el-col :span='12'>
|
||||
<el-form-item label="装车时间" prop="loadTime">
|
||||
<el-date-picker
|
||||
v-model="form.loadTime"
|
||||
type="datetime"
|
||||
format='yyyy-MM-dd HH:mm:ss'
|
||||
value-format="timestamp"
|
||||
style="width: 100%;"
|
||||
placeholder="选择日期">
|
||||
</el-date-picker>
|
||||
</el-form-item>
|
||||
</el-col>
|
||||
<el-col :span='12'>
|
||||
<el-form-item label="车辆联系人" prop="contactPerson">
|
||||
<el-input v-model="form.contactPerson"></el-input>
|
||||
</el-form-item>
|
||||
</el-col>
|
||||
</el-row>
|
||||
<el-row>
|
||||
<el-col :span='12'>
|
||||
<el-form-item label="联系方式" prop="contactPersonCall">
|
||||
<el-input v-model="form.contactPersonCall"></el-input>
|
||||
</el-form-item>
|
||||
</el-col>
|
||||
<el-col :span='12'>
|
||||
<el-form-item label="装车产品" prop="productId">
|
||||
<el-select v-model="form.productId" placeholder="请选择" style="width: 100%;">
|
||||
<el-option
|
||||
v-for="item in productList"
|
||||
:key="item.id"
|
||||
:label="item.name"
|
||||
:value="item.id">
|
||||
</el-option>
|
||||
</el-select>
|
||||
</el-form-item>
|
||||
</el-col>
|
||||
</el-row>
|
||||
<el-row>
|
||||
<el-col :span='12'>
|
||||
<el-form-item label="装箱规格(片/箱)" prop="packagingSize">
|
||||
<el-input-number v-model="form.packagingSize" :min="0" :max='9999999999' style="width:100%"></el-input-number>
|
||||
</el-form-item>
|
||||
</el-col>
|
||||
<el-col :span='12'>
|
||||
<el-form-item label="产品批次" prop="productDate">
|
||||
<el-input v-model="form.productDate" placeholder="多个批次用','隔开"></el-input>
|
||||
</el-form-item>
|
||||
</el-col>
|
||||
</el-row>
|
||||
<el-row>
|
||||
<el-col :span='12'>
|
||||
<el-form-item label="箱/托数" prop="packagingNum">
|
||||
<el-input-number v-model="form.packagingNum" :min="0" :max='9999999999' style="width:100%"></el-input-number>
|
||||
</el-form-item>
|
||||
</el-col>
|
||||
<el-col :span='12'>
|
||||
<el-form-item label="装车总量" prop="quantity">
|
||||
<el-input-number v-model="form.quantity" :min="0" :max='9999999999' style="width:100%"></el-input-number>
|
||||
</el-form-item>
|
||||
</el-col>
|
||||
</el-row>
|
||||
</el-form>
|
||||
</template>
|
||||
<script>
|
||||
import { getProductAll } from '@/api/base/product'
|
||||
import { deliveryLogDetCreate } from '@/api/base/delivery'
|
||||
export default {
|
||||
name: 'LoadedPage',
|
||||
data() {
|
||||
return {
|
||||
form: {
|
||||
logId: '',
|
||||
deliveryCarCode: '',
|
||||
loadTime: null,
|
||||
contactPerson: '',
|
||||
contactPersonCall: '',
|
||||
productId: '',
|
||||
packagingSize: null,
|
||||
productDate: '',
|
||||
packagingNum: null,
|
||||
quantity: null
|
||||
},
|
||||
code: '',
|
||||
rules: {
|
||||
deliveryCarCode: [{ required: true, message: "装车单号不能为空", trigger: "blur" }],
|
||||
productId: [{ required: true, message: "装车产品不能为空", trigger: "change" }],
|
||||
packagingSize: [{ required: true, message: "装箱规格不能为空", trigger: "blur" }],
|
||||
packagingNum: [{ required: true, message: "箱/托数不能为空", trigger: "blur" }],
|
||||
quantity: [{ required: true, message: "装车总量不能为空", trigger: "blur" }]
|
||||
},
|
||||
productList: []
|
||||
}
|
||||
},
|
||||
methods: {
|
||||
init(id, code) {
|
||||
this.getSelectList()
|
||||
this.form.logId = id
|
||||
this.code = code
|
||||
},
|
||||
getSelectList() {
|
||||
getProductAll().then(res => {
|
||||
this.productList = res.data || []
|
||||
})
|
||||
},
|
||||
submitForm() {
|
||||
this.$refs['addOrUpdate'].validate((valid) => {
|
||||
if (valid) {
|
||||
console.log(this.form)
|
||||
deliveryLogDetCreate({ ...this.form }).then((res) => {
|
||||
if (res.code === 0) {
|
||||
this.$modal.msgSuccess("操作成功");
|
||||
this.$emit('successSubmit')
|
||||
}
|
||||
})
|
||||
} else {
|
||||
return false
|
||||
}
|
||||
})
|
||||
},
|
||||
formClear() {
|
||||
this.$refs.addOrUpdate.resetFields()
|
||||
this.code = ''
|
||||
}
|
||||
}
|
||||
}
|
||||
</script>
|
||||
285
src/views/delivery/deliveryLog/index.vue
Normal file
285
src/views/delivery/deliveryLog/index.vue
Normal file
@@ -0,0 +1,285 @@
|
||||
<template>
|
||||
<div class="app-container">
|
||||
<!-- 搜索工作栏 -->
|
||||
<search-bar
|
||||
:formConfigs="formConfig"
|
||||
ref="searchBarForm"
|
||||
@headBtnClick="buttonClick"
|
||||
/>
|
||||
<!-- 列表 -->
|
||||
<base-table
|
||||
:page="queryParams.pageNo"
|
||||
:limit="queryParams.pageSize"
|
||||
:table-props="tableProps"
|
||||
:table-data="list"
|
||||
:max-height="tableH"
|
||||
>
|
||||
<method-btn
|
||||
v-if="tableBtn.length"
|
||||
slot="handleBtn"
|
||||
:width="160"
|
||||
label="操作"
|
||||
:method-list="tableBtn"
|
||||
@clickBtn="handleClick"
|
||||
/>
|
||||
</base-table>
|
||||
<pagination
|
||||
:page.sync="queryParams.pageNo"
|
||||
:limit.sync="queryParams.pageSize"
|
||||
:total="total"
|
||||
@pagination="getList"
|
||||
/>
|
||||
<!-- 新增 -->
|
||||
<base-dialog
|
||||
:dialogTitle="addOrEditTitle"
|
||||
:dialogVisible="centervisible"
|
||||
@cancel="handleCancel"
|
||||
@confirm="handleConfirm"
|
||||
:before-close="handleCancel"
|
||||
width="50%"
|
||||
>
|
||||
<add-or-update ref="addOrUpdate" @successSubmit="successSubmit" />
|
||||
</base-dialog>
|
||||
<!-- 装车 -->
|
||||
<base-dialog
|
||||
dialogTitle="装车"
|
||||
:dialogVisible="centervisible2"
|
||||
@cancel="handleCancel2"
|
||||
@confirm="handleConfirm2"
|
||||
:before-close="handleCancel2"
|
||||
width="50%"
|
||||
>
|
||||
<loaded-page ref="loadedPage" @successSubmit="successSubmit2" />
|
||||
</base-dialog>
|
||||
<!-- 发货详情 -->
|
||||
<delivery-log-detail ref='deliveryLogDetail' v-if='showDetail' />
|
||||
</div>
|
||||
</template>
|
||||
<script>
|
||||
import { parseTime } from '@/utils/ruoyi'
|
||||
import { deliveryLogPage, deliveryLogDelete } from '@/api/base/delivery'
|
||||
import AddOrUpdate from './components/addOrUpdate'
|
||||
import LoadedPage from './components/loadedPage'
|
||||
import DeliveryLogDetail from './components/deliveryLogDetail.vue'
|
||||
const tableProps = [
|
||||
{
|
||||
prop: 'orderName',
|
||||
label: '订单名',
|
||||
minWidth: 100,
|
||||
showOverflowtooltip: true
|
||||
},
|
||||
{
|
||||
prop: 'name',
|
||||
label: '发货单名称',
|
||||
minWidth: 100,
|
||||
showOverflowtooltip: true
|
||||
},
|
||||
{
|
||||
prop: 'deliveryTime',
|
||||
label: '发货时间',
|
||||
filter: parseTime,
|
||||
minWidth: 150
|
||||
},
|
||||
{
|
||||
prop: 'code',
|
||||
label: '发货单号',
|
||||
showOverflowtooltip: true
|
||||
},
|
||||
{
|
||||
prop: 'deliverPerName',
|
||||
label: '发货负责人',
|
||||
minWidth: 100
|
||||
},
|
||||
{
|
||||
prop: 'principal',
|
||||
label: '运输负责人',
|
||||
minWidth: 100
|
||||
},
|
||||
{
|
||||
prop: 'principalCall',
|
||||
label: '运输联系方式',
|
||||
minWidth: 110,
|
||||
showOverflowtooltip: true
|
||||
},
|
||||
{
|
||||
prop: 'principalCost',
|
||||
label: '运输费用'
|
||||
},
|
||||
{
|
||||
prop: 'remark',
|
||||
label: '备注',
|
||||
showOverflowtooltip: true
|
||||
}
|
||||
]
|
||||
export default {
|
||||
name: "DeliveryLog",
|
||||
data() {
|
||||
return {
|
||||
formConfig: [
|
||||
{
|
||||
type: 'input',
|
||||
label: '订单名',
|
||||
param: 'orderName'
|
||||
},
|
||||
{
|
||||
type: 'input',
|
||||
label: '发货单名称',
|
||||
param: 'name'
|
||||
},
|
||||
{
|
||||
type: 'input',
|
||||
label: '发货单号',
|
||||
param: 'code'
|
||||
},
|
||||
{
|
||||
type: 'button',
|
||||
btnName: '查询',
|
||||
name: 'search',
|
||||
color: 'primary'
|
||||
},
|
||||
{
|
||||
type: 'separate'
|
||||
},
|
||||
{
|
||||
type: 'button',
|
||||
btnName: '新增',
|
||||
name: 'add',
|
||||
color: 'success',
|
||||
plain: true
|
||||
}
|
||||
],
|
||||
// 查询参数
|
||||
queryParams: {
|
||||
pageNo: 1,
|
||||
pageSize: 20,
|
||||
orderName: '',
|
||||
code: '',
|
||||
name: ''
|
||||
},
|
||||
tableProps,
|
||||
list: [],
|
||||
tableH: this.tableHeight(260),
|
||||
total: 0,
|
||||
tableBtn: [
|
||||
this.$auth.hasPermi('base:group-team:update')
|
||||
? {
|
||||
type: 'loaded',
|
||||
btnName: '装车'
|
||||
}
|
||||
: undefined,
|
||||
this.$auth.hasPermi('base:group-team:update')
|
||||
? {
|
||||
type: 'detail',
|
||||
btnName: '详情'
|
||||
}
|
||||
: undefined,
|
||||
this.$auth.hasPermi('base:group-team:update')
|
||||
? {
|
||||
type: 'edit',
|
||||
btnName: '编辑'
|
||||
}
|
||||
: undefined,
|
||||
this.$auth.hasPermi('base:group-team:delete')
|
||||
? {
|
||||
type: 'delete',
|
||||
btnName: '删除'
|
||||
}
|
||||
: undefined
|
||||
].filter((v) => v),
|
||||
addOrEditTitle: '',
|
||||
centervisible: false,
|
||||
centervisible2: false,
|
||||
showDetail: false
|
||||
}
|
||||
},
|
||||
created() {
|
||||
window.addEventListener('resize', () => {
|
||||
this.tableH = this.tableHeight(260)
|
||||
})
|
||||
this.getList();
|
||||
},
|
||||
components: { AddOrUpdate, LoadedPage, DeliveryLogDetail },
|
||||
methods: {
|
||||
getList() {
|
||||
deliveryLogPage({...this.queryParams}).then(res => {
|
||||
this.list = res.data.list || []
|
||||
this.total = res.data.total || 0
|
||||
})
|
||||
},
|
||||
buttonClick(val) {
|
||||
if (val.btnName === 'search') {
|
||||
this.queryParams.name = val.name
|
||||
this.queryParams.orderName = val.orderName
|
||||
this.queryParams.code = val.code
|
||||
this.getList()
|
||||
} else {
|
||||
this.addOrEditTitle = '新增'
|
||||
this.centervisible = true
|
||||
this.$nextTick(() => {
|
||||
this.$refs.addOrUpdate.init()
|
||||
})
|
||||
}
|
||||
},
|
||||
handleClick(val) {
|
||||
console.log(val)
|
||||
switch (val.type) {
|
||||
case 'edit':
|
||||
this.addOrEditTitle = '编辑'
|
||||
this.centervisible = true
|
||||
this.$nextTick(() => {
|
||||
this.$refs.addOrUpdate.init(val.data.id)
|
||||
})
|
||||
break
|
||||
case 'delete':
|
||||
this.handleDelete(val.data)
|
||||
break
|
||||
case 'loaded':
|
||||
this.centervisible2 = true
|
||||
this.$nextTick(() => {
|
||||
this.$refs.loadedPage.init(val.data.id, val.data.code)
|
||||
})
|
||||
break
|
||||
default:
|
||||
this.showDetail = true
|
||||
this.$nextTick(() => {
|
||||
this.$refs.deliveryLogDetail.init(val.data)
|
||||
})
|
||||
}
|
||||
},
|
||||
// 新增
|
||||
handleCancel() {
|
||||
this.$refs.addOrUpdate.formClear()
|
||||
this.centervisible = false
|
||||
this.addOrEditTitle = ''
|
||||
},
|
||||
handleConfirm() {
|
||||
this.$refs.addOrUpdate.submitForm()
|
||||
},
|
||||
successSubmit() {
|
||||
this.handleCancel()
|
||||
this.getList()
|
||||
},
|
||||
// 删除
|
||||
handleDelete(val) {
|
||||
this.$modal.confirm('是否确认删除发货单名为"' + val.name + '"的数据项?').then(function() {
|
||||
return deliveryLogDelete({ id: val.id })
|
||||
}).then(() => {
|
||||
this.getList();
|
||||
this.$modal.msgSuccess("操作成功");
|
||||
}).catch(() => {});
|
||||
},
|
||||
// 装车
|
||||
handleCancel2() {
|
||||
this.$refs.loadedPage.formClear()
|
||||
this.centervisible2 = false
|
||||
},
|
||||
handleConfirm2() {
|
||||
this.$refs.loadedPage.submitForm()
|
||||
},
|
||||
successSubmit2() {
|
||||
this.handleCancel2()
|
||||
this.getList()
|
||||
},
|
||||
}
|
||||
}
|
||||
</script>
|
||||
@@ -0,0 +1,365 @@
|
||||
<template>
|
||||
<el-drawer
|
||||
title="发货进度"
|
||||
:visible.sync="centervisible"
|
||||
size="80%"
|
||||
class="deliveryLogDetail"
|
||||
@close='closeA'>
|
||||
<div class="box1">
|
||||
<div class="box_col">
|
||||
<div class="blodTip">订单名</div>
|
||||
<div class="lightTip">{{orderMsg.orderName ? orderMsg.orderName : '-'}}</div>
|
||||
</div>
|
||||
<div class="box_col">
|
||||
<div class="blodTip">订单数量</div>
|
||||
<div class="lightTip">{{orderMsg.orderNum ? orderMsg.orderNum : '-'}}</div>
|
||||
</div>
|
||||
<div class="box_col">
|
||||
<div class="blodTip">装货数量</div>
|
||||
<div class="lightTip">{{orderMsg.num ? orderMsg.num : '-'}}</div>
|
||||
</div>
|
||||
<div class="box_col">
|
||||
<div class="blodTip">累积占比(%)</div>
|
||||
<div class="lightTip">{{orderMsg.rate ? orderMsg.rate : '-'}}</div>
|
||||
</div>
|
||||
<div class="box_col">
|
||||
<div class="blodTip">累积运输费用</div>
|
||||
<div class="lightTip">{{orderMsg.cost ? orderMsg.cost : '-'}}</div>
|
||||
</div>
|
||||
</div>
|
||||
<div class="box2">
|
||||
<div class="boxTitle">
|
||||
<span class="blueTitle"></span>
|
||||
<span>发货清单</span>
|
||||
</div>
|
||||
<el-tabs v-model="activeName" @tab-click="toggleTab">
|
||||
<el-tab-pane label="数据列表" name="dataList">
|
||||
<!-- 列表 -->
|
||||
<base-table
|
||||
:page="queryParams.pageNo"
|
||||
:limit="queryParams.pageSize"
|
||||
:table-props="tableProps"
|
||||
:table-data="tableData"
|
||||
:max-height="tableH"
|
||||
>
|
||||
<method-btn
|
||||
v-if="tableBtn.length"
|
||||
slot="handleBtn"
|
||||
:width="150"
|
||||
label="操作"
|
||||
:method-list="tableBtn"
|
||||
@clickBtn="viewDetDetail"
|
||||
/>
|
||||
</base-table>
|
||||
<pagination
|
||||
:page.sync="queryParams.pageNo"
|
||||
:limit.sync="queryParams.pageSize"
|
||||
:total="total"
|
||||
@pagination="getList"
|
||||
/>
|
||||
</el-tab-pane>
|
||||
<el-tab-pane label="环形图" name="barChart">
|
||||
<div
|
||||
id="logDetPieBar"
|
||||
style="width: 182px; height: 180px;"
|
||||
></div>
|
||||
</el-tab-pane>
|
||||
</el-tabs>
|
||||
</div>
|
||||
<!-- 详情抽屉 -->
|
||||
<el-drawer
|
||||
title="发货详情"
|
||||
size="60%"
|
||||
:append-to-body="true"
|
||||
:visible.sync="innerDrawer"
|
||||
@close='closeB'>
|
||||
<div class="box3">
|
||||
<el-row>
|
||||
<el-col :span='12'>
|
||||
<span class="title">订单名：</span>
|
||||
<span class="text">{{orderMsg.orderName ? orderMsg.orderName : '-'}}</span>
|
||||
</el-col>
|
||||
<el-col :span='12'>
|
||||
<span class="title">发货单号：</span>
|
||||
<span class="text">{{logCode ? logCode : '-'}}</span>
|
||||
</el-col>
|
||||
</el-row>
|
||||
</div>
|
||||
<div class="box4">
|
||||
<div class="boxTitle">
|
||||
<span class="blueTitle"></span>
|
||||
<span>详情</span>
|
||||
</div>
|
||||
<base-table
|
||||
:page="queryParams2.pageNo"
|
||||
:limit="queryParams2.pageSize"
|
||||
:table-props="tableProps2"
|
||||
:table-data="tableData2"
|
||||
:max-height="tableH2"
|
||||
/>
|
||||
<pagination
|
||||
:page.sync="queryParams2.pageNo"
|
||||
:limit.sync="queryParams2.pageSize"
|
||||
:total="total2"
|
||||
@pagination="getList2"
|
||||
/>
|
||||
</div>
|
||||
</el-drawer>
|
||||
</el-drawer>
|
||||
</template>
|
||||
<script>
|
||||
import { deliveryLogPage, deliveryLogDetPage } from '@/api/base/delivery'
|
||||
import { parseTime } from '@/utils/ruoyi'
|
||||
const tableProps = [
|
||||
{
|
||||
prop: 'deliveryTime',
|
||||
label: '发货时间',
|
||||
filter: parseTime,
|
||||
minWidth: 150
|
||||
},
|
||||
{
|
||||
prop: 'code',
|
||||
label: '发货单号',
|
||||
showOverflowtooltip: true
|
||||
},
|
||||
{
|
||||
prop: 'orderNum',
|
||||
label: '订单数量'
|
||||
},
|
||||
{
|
||||
prop: 'num',
|
||||
label: '发货数量'
|
||||
},
|
||||
{
|
||||
prop: 'rate',
|
||||
label: '发货比列(%)'
|
||||
},
|
||||
{
|
||||
prop: 'principalCost',
|
||||
label: '运输费用'
|
||||
}
|
||||
]
|
||||
const tableProps2 = [
|
||||
{
|
||||
prop: 'createTime',
|
||||
label: '添加时间',
|
||||
filter: parseTime,
|
||||
minWidth: 150
|
||||
},
|
||||
{
|
||||
prop: 'deliveryCarCode',
|
||||
label: '装车单号',
|
||||
showOverflowtooltip: true
|
||||
},
|
||||
{
|
||||
prop: 'loadTime',
|
||||
label: '装车时间',
|
||||
filter: parseTime,
|
||||
minWidth: 150
|
||||
},
|
||||
{
|
||||
prop: 'productName',
|
||||
label: '装车产品',
|
||||
showOverflowtooltip: true
|
||||
},
|
||||
{
|
||||
prop: 'packagingSize',
|
||||
label: '装箱规格（片/箱）'
|
||||
},
|
||||
{
|
||||
prop: 'packagingNum',
|
||||
label: '箱数'
|
||||
},
|
||||
{
|
||||
prop: 'quantity',
|
||||
label: '装车总量'
|
||||
},
|
||||
{
|
||||
prop: 'productDate',
|
||||
label: '产品批次',
|
||||
showOverflowtooltip: true
|
||||
}
|
||||
]
|
||||
export default {
|
||||
name: 'DeliveryLogDetDetail',
|
||||
data() {
|
||||
return {
|
||||
centervisible: false,
|
||||
activeName: 'dataList',
|
||||
// 查询参数
|
||||
queryParams: {
|
||||
pageNo: 1,
|
||||
pageSize: 100,
|
||||
orderId: ''
|
||||
},
|
||||
orderMsg: {},
|
||||
tableProps,
|
||||
tableData: [],
|
||||
tableH: this.tableHeight(350),
|
||||
tableBtn: [
|
||||
this.$auth.hasPermi('base:group-team:update')
|
||||
? {
|
||||
type: 'detDetail',
|
||||
btnName: '查看发货详情'
|
||||
}
|
||||
: undefined
|
||||
].filter((v) => v),
|
||||
innerDrawer: false,
|
||||
// 详情
|
||||
queryParams2: {
|
||||
pageNo: 1,
|
||||
pageSize: 20,
|
||||
logId: ''
|
||||
},
|
||||
tableProps2,
|
||||
tableData2: [],
|
||||
tableH2: this.tableHeight(275),
|
||||
total2: 0,
|
||||
logCode: ''
|
||||
}
|
||||
},
|
||||
mounted() {
|
||||
window.addEventListener('resize', () => {
|
||||
this.tableH = this.tableHeight(350)
|
||||
})
|
||||
window.addEventListener('resize', () => {
|
||||
this.tableH2 = this.tableHeight(275)
|
||||
})
|
||||
},
|
||||
methods: {
|
||||
init(params) {
|
||||
this.queryParams.orderId = params.orderId
|
||||
this.orderMsg = params
|
||||
this.centervisible = true
|
||||
this.getList()
|
||||
},
|
||||
getList() {
|
||||
deliveryLogPage({...this.queryParams}).then(res => {
|
||||
this.tableData = res.data.list || []
|
||||
})
|
||||
},
|
||||
toggleTab() {
|
||||
|
||||
},
|
||||
getBar() {
|
||||
|
||||
},
|
||||
viewDetDetail(val) {
|
||||
this.logCode = val.data.code
|
||||
this.innerDrawer = true
|
||||
this.queryParams2.logId = val.data.id
|
||||
this.getList2()
|
||||
},
|
||||
closeA() {
|
||||
// 清空数据
|
||||
this.activeName = 'dataList'
|
||||
this.queryParams.orderId = ''
|
||||
this.tableData = []
|
||||
this.orderMsg = {}
|
||||
this.innerDrawer = false
|
||||
},
|
||||
getList2() {
|
||||
deliveryLogDetPage({...this.queryParams2}).then(res => {
|
||||
this.tableData2 = res.data.list || []
|
||||
this.total2 = res.data.total || 0
|
||||
})
|
||||
},
|
||||
closeB() {
|
||||
this.logCode = ''
|
||||
this.queryParams2.pageNo = 1
|
||||
this.queryParams2.pageSize = 20
|
||||
this.queryParams2.logId = ''
|
||||
this.tableData2 = []
|
||||
this.total2 = 0
|
||||
}
|
||||
}
|
||||
}
|
||||
</script>
|
||||
<style scoped lang='scss'>
|
||||
.box1 {
|
||||
height: 56px;
|
||||
.box_col {
|
||||
display: inline-block;
|
||||
width: 20%;
|
||||
padding: 8px 8px 8px 40px;
|
||||
.blodTip {
|
||||
height: 16px;
|
||||
font-weight: 600;
|
||||
color: rgba(0,0,0,0.85);
|
||||
margin-bottom: 8px;
|
||||
}
|
||||
.lightTip {
|
||||
height: 16px;
|
||||
font-weight: 400;
|
||||
color: rgba(102,102,102,0.75);
|
||||
}
|
||||
}
|
||||
}
|
||||
.box2 {
|
||||
padding:32px 32px 30px 30px;
|
||||
height: calc(100vh - 150px);
|
||||
}
|
||||
.boxTitle {
|
||||
display: inline-block;
|
||||
font-size: 16px;
|
||||
font-weight: 400;
|
||||
color: #000000;
|
||||
margin:0 10px 10px 0;
|
||||
}
|
||||
.blueTitle {
|
||||
content: '';
|
||||
display: inline-block;
|
||||
width: 4px;
|
||||
height: 18px;
|
||||
background-color: #0B58FF;
|
||||
border-radius: 1px;
|
||||
margin-right: 8px;
|
||||
vertical-align: bottom;
|
||||
}
|
||||
.box3 {
|
||||
padding: 8px 8px 8px 40px;
|
||||
.title {
|
||||
height: 16px;
|
||||
font-weight: 600;
|
||||
color: rgba(0,0,0,0.85);
|
||||
}
|
||||
.text {
|
||||
height: 16px;
|
||||
font-weight: 400;
|
||||
color: rgba(102,102,102,0.75);
|
||||
}
|
||||
}
|
||||
.box4 {
|
||||
padding:32px 32px 30px 30px;
|
||||
height: calc(100vh - 125px);
|
||||
}
|
||||
</style>
|
||||
<style lang='scss'>
|
||||
.deliveryLogDetail {
|
||||
.el-tabs__nav::after {
|
||||
content: "";
|
||||
position: absolute;
|
||||
left: 0;
|
||||
bottom: 0;
|
||||
width: 100%;
|
||||
height: 2px;
|
||||
background-color: #e4e7ed;
|
||||
/* z-index: 1; */
|
||||
}
|
||||
.el-tabs__nav-wrap::after {
|
||||
width: 0;
|
||||
}
|
||||
.el-tabs__item {
|
||||
padding: 0 10px;
|
||||
}
|
||||
.el-tabs__item:hover {
|
||||
color: rgba(0, 0, 0, 0.85);
|
||||
}
|
||||
.el-tabs__item.is-active {
|
||||
color: rgba(0, 0, 0, 0.85);
|
||||
}
|
||||
.el-tabs__item {
|
||||
color: rgba(0, 0, 0, 0.45);
|
||||
}
|
||||
}
|
||||
</style>
|
||||
130
src/views/delivery/deliveryLogDet/index.vue
Normal file
130
src/views/delivery/deliveryLogDet/index.vue
Normal file
@@ -0,0 +1,130 @@
|
||||
<template>
|
||||
<div class="app-container">
|
||||
<!-- 搜索工作栏 -->
|
||||
<search-bar
|
||||
:formConfigs="formConfig"
|
||||
ref="searchBarForm"
|
||||
@headBtnClick="buttonClick"
|
||||
/>
|
||||
<!-- 列表 -->
|
||||
<base-table
|
||||
:page="queryParams.pageNo"
|
||||
:limit="queryParams.pageSize"
|
||||
:table-props="tableProps"
|
||||
:table-data="list"
|
||||
:max-height="tableH"
|
||||
>
|
||||
<method-btn
|
||||
v-if="tableBtn.length"
|
||||
slot="handleBtn"
|
||||
:width="80"
|
||||
label="操作"
|
||||
:method-list="tableBtn"
|
||||
@clickBtn="handleClick"
|
||||
/>
|
||||
</base-table>
|
||||
<pagination
|
||||
:page.sync="queryParams.pageNo"
|
||||
:limit.sync="queryParams.pageSize"
|
||||
:total="total"
|
||||
@pagination="getList"
|
||||
/>
|
||||
<!-- 详情抽屉 -->
|
||||
<delivery-log-det-detail ref='deliveryLogDetail'/>
|
||||
</div>
|
||||
</template>
|
||||
<script>
|
||||
import { deliveryProgressPage } from '@/api/base/delivery'
|
||||
import DeliveryLogDetDetail from './components/deliveryLogDetDetail.vue'
|
||||
const tableProps = [
|
||||
{
|
||||
prop: 'orderName',
|
||||
label: '订单名',
|
||||
showOverflowtooltip: true
|
||||
},
|
||||
{
|
||||
prop: 'customerName',
|
||||
label: '客户名称',
|
||||
showOverflowtooltip: true
|
||||
},
|
||||
{
|
||||
prop: 'unit',
|
||||
label: '单位'
|
||||
},
|
||||
{
|
||||
prop: 'orderNum',
|
||||
label: '订单数量'
|
||||
},
|
||||
{
|
||||
prop: 'num',
|
||||
label: '发货数量'
|
||||
},
|
||||
{
|
||||
prop: 'rate',
|
||||
label: '累积发货比例（%）'
|
||||
}
|
||||
]
|
||||
export default {
|
||||
name: "DeliveryLogDet",
|
||||
data() {
|
||||
return {
|
||||
formConfig: [
|
||||
{
|
||||
type: 'input',
|
||||
label: '订单名',
|
||||
param: 'orderName'
|
||||
},
|
||||
{
|
||||
type: 'button',
|
||||
btnName: '查询',
|
||||
name: 'search',
|
||||
color: 'primary'
|
||||
}
|
||||
],
|
||||
// 查询参数
|
||||
queryParams: {
|
||||
pageNo: 1,
|
||||
pageSize: 20,
|
||||
orderName: ''
|
||||
},
|
||||
tableProps,
|
||||
list: [],
|
||||
tableH: this.tableHeight(260),
|
||||
total: 0,
|
||||
tableBtn: [
|
||||
this.$auth.hasPermi('base:group-team:update')
|
||||
? {
|
||||
type: 'detail',
|
||||
btnName: '详情'
|
||||
}
|
||||
: undefined
|
||||
].filter((v) => v)
|
||||
}
|
||||
},
|
||||
components: { DeliveryLogDetDetail },
|
||||
created() {
|
||||
window.addEventListener('resize', () => {
|
||||
this.tableH = this.tableHeight(260)
|
||||
})
|
||||
this.getList();
|
||||
},
|
||||
methods: {
|
||||
getList() {
|
||||
deliveryProgressPage({...this.queryParams}).then(res => {
|
||||
this.list = res.data.list || []
|
||||
this.total = res.data.total || 0
|
||||
})
|
||||
},
|
||||
buttonClick(val) {
|
||||
this.queryParams.orderName = val.orderName
|
||||
this.getList()
|
||||
},
|
||||
handleClick(val) {
|
||||
console.log(val)
|
||||
this.$nextTick(() => {
|
||||
this.$refs.deliveryLogDetail.init(val.data)
|
||||
})
|
||||
}
|
||||
}
|
||||
}
|
||||
</script>
|
||||
Reference in New Issue
Block a user