页面调整

This commit is contained in:
王帅 2025-04-24 11:20:19 +08:00
parent 60da131c98
commit b8af2f9a46
6 changed files with 152 additions and 57 deletions

View File

@ -41,4 +41,7 @@
#app {
height: 100%;
}
.ant-table-thead > tr > th, .ant-table-tbody > tr > td{
padding: 3px !important;
}
</style>

View File

@ -41,8 +41,8 @@
<div>
<a-table
ref="table"
size="small"
:scroll="{ y: 300, x:true }"
size="middle"
:scroll="{ y: 300, x:'max-content' }"
bordered
rowKey="id"
:columns="columns"
@ -225,12 +225,15 @@
})
},
getByVdNo(vdNo){
this.loading = true;
getAction(this.url.getByVdNo,{vdNo: vdNo}).then(res => {
if (res.success) {
this.dataSource = res.result;
} else {
this.$message.warning(res.message)
}
}).finally(()=>{
this.loading = false;
})
},
loadData(){},

View File

@ -72,15 +72,15 @@
<!-- table区域-begin -->
<div>
<div class="ant-alert ant-alert-info" style="margin-bottom: 16px;">
<!-- <div class="ant-alert ant-alert-info" style="margin-bottom: 16px;">
<i class="anticon anticon-info-circle ant-alert-icon"></i> 已选择 <a style="font-weight: 600">{{ selectedRowKeys.length }}</a>项
<a style="margin-left: 24px" @click="onClearSelected">清空</a>
</div>
</div> -->
<a-table
ref="table"
size="middle"
:scroll="{x:true}"
:scroll="{x:'max-content'}"
bordered
rowKey="id"
:columns="columns"
@ -136,12 +136,16 @@
</div>
<a-row :gutter="24">
<a-col :span="12">
<div class="bordered-container">
<div class="title">用车需求物料明细</div>
<DeliveryDemand ref="deliveryDemand"/>
</div>
</a-col>
<a-col :span="12" style="margin-right: -30px;">
<div class="bordered-container">
<div class="title">用车需求计算</div>
<VehicleDemandCountList ref="vehicleDemandCountList"/>
</div>
</a-col>
</a-row>
<vehicle-demand-modal ref="modalForm" @ok="modalFormOk"></vehicle-demand-modal>
@ -209,11 +213,11 @@
align:"center",
dataIndex: 'totalShips'
},
{
title:'送货区域',
align:"center",
dataIndex: 'deliveryArea'
},
// {
// title:'送货区域',
// align:"center",
// dataIndex: 'deliveryArea'
// },
{
title:'送货地点',
align:"center",
@ -296,7 +300,28 @@
<style scoped>
@import '~@assets/less/common.less';
.title {
font-size: 18px;
padding-left: 10px;
/* font-size: 18px;
padding-left: 10px; */
position: absolute;
top: -10px;
left: 10px;
background: white;
/* padding: 0 10px; */
font-weight: bold;
}
.bordered-container {
border: 1px solid #ddd;
border-radius: 4px;
position: relative;
padding: 8px;
}
::v-deep .ant-table-selection-column {
padding: 3px !important;
}
::v-deep .ant-btn{
height: 30px;
font-size: 12px;
padding: 0 10px;
}
</style>

View File

@ -3,37 +3,37 @@
<j-form-container :disabled="formDisabled">
<a-form-model ref="form" :model="model" :rules="validatorRules" slot="detail">
<a-row>
<a-col :span="24">
<a-col :span="12">
<a-form-model-item label="发货日期" :labelCol="labelCol" :wrapperCol="wrapperCol" prop="shipDate">
<j-date placeholder="请选择发货日期" v-model="model.shipDate" style="width: 100%" />
</a-form-model-item>
</a-col>
<a-col :span="24">
<a-col :span="12">
<a-form-model-item label="发货类型" :labelCol="labelCol" :wrapperCol="wrapperCol" prop="shipType">
<j-dict-select-tag type="list" v-model="model.shipType" dictCode="ship_type" placeholder="请选择发货类型" />
</a-form-model-item>
</a-col>
<a-col :span="24">
<a-col :span="12">
<a-form-model-item label="预计装车总托数" :labelCol="labelCol" :wrapperCol="wrapperCol" prop="totalPallets">
<a-input-number v-model="model.totalPallets" placeholder="请输入预计装车总托数" style="width: 100%" />
</a-form-model-item>
</a-col>
<a-col :span="24">
<a-col :span="12">
<a-form-model-item label="送货区域" :labelCol="labelCol" :wrapperCol="wrapperCol" prop="deliveryArea">
<a-input v-model="model.deliveryArea" placeholder="请输入送货区域" ></a-input>
</a-form-model-item>
</a-col>
<a-col :span="24">
<a-col :span="12">
<a-form-model-item label="送货地点" :labelCol="labelCol" :wrapperCol="wrapperCol" prop="deliveryAddress">
<a-input v-model="model.deliveryAddress" placeholder="请输入送货地点" ></a-input>
</a-form-model-item>
</a-col>
<a-col :span="24">
<a-col :span="12">
<a-form-model-item label="取货仓库" :labelCol="labelCol" :wrapperCol="wrapperCol" prop="pickUpHub">
<j-dict-select-tag type="list" v-model="model.pickUpHub" dictCode="pick_up_hub" placeholder="请选择取货仓库" />
</a-form-model-item>
</a-col>
<a-col :span="24">
<a-col :span="12">
<a-form-model-item label="用车需求编号" :labelCol="labelCol" :wrapperCol="wrapperCol" prop="vdNo">
<a-input v-model="model.vdNo" placeholder="请输入用车需求编号" ></a-input>
</a-form-model-item>
@ -67,7 +67,7 @@
},
labelCol: {
xs: { span: 24 },
sm: { span: 5 },
sm: { span: 7 },
},
wrapperCol: {
xs: { span: 24 },

View File

@ -52,9 +52,10 @@
<!-- 查询区域-END -->
<!-- 操作按钮区域 -->
<!-- <div class="table-operator">
<div class="table-operator">
<a-button @click="handleAdd" type="primary" icon="plus">新增</a-button>
<a-button type="primary" icon="download" @click="handleExportXls('用车需求计算')">导出</a-button>
<div style="display: inline-block;">总费用{{ this.totalPallets }}</div>
<!-- <a-button type="primary" icon="download" @click="handleExportXls('用车需求计算')">导出</a-button>
<a-upload name="file" :showUploadList="false" :multiple="false" :headers="tokenHeader" :action="importExcelUrl" @change="handleImportExcel">
<a-button type="primary" icon="import">导入</a-button>
</a-upload> -->
@ -65,8 +66,8 @@
<a-menu-item key="1" @click="batchDel"><a-icon type="delete"/>删除</a-menu-item>
</a-menu>
<a-button style="margin-left: 8px"> 批量操作 <a-icon type="down" /></a-button>
</a-dropdown>
</div> -->
</a-dropdown> -->
</div>
<!-- table区域-begin -->
<div>
@ -77,8 +78,8 @@
<a-table
ref="table"
size="small"
:scroll="{ y: 300, x:true }"
size="middle"
:scroll="{ y: 300, x:'max-content' }"
bordered
rowKey="id"
:columns="columns"
@ -151,6 +152,7 @@
data () {
return {
description: '用车需求计算管理页面',
totalPallets: 0, // 总费用
// 表头
columns: [
{
@ -205,20 +207,26 @@
dataIndex: 'pickUpHub',
width: 100
},
{
title:'定标价格',
align:"center",
dataIndex: 'tandardPrice',
width: 100
},
{
title:'审核结果',
align:"center",
dataIndex: 'auditResult_dictText',
width: 100
},
// {
// title: '操作',
// dataIndex: 'action',
// align:"center",
{
title: '操作',
dataIndex: 'action',
align:"center",
// fixed:"right",
// width:147,
// scopedSlots: { customRender: 'action' }
// }
width:120,
scopedSlots: { customRender: 'action' }
}
],
url: {
list: "/vehicledemandcount/vehicleDemandCount/list",
@ -243,12 +251,16 @@
},
methods: {
getByVdNo(vdNo){
this.loading = true;
getAction(this.url.getByVdNo,{vdNo: vdNo}).then(res => {
if (res.success) {
this.dataSource = res.result.records||res.result;
this.totalPallets = this.dataSource.reduce((sum, current) => sum + current.tandardPrice, 0);
} else {
this.$message.warning(res.message)
}
}).finally(()=>{
this.loading = false;
})
},
loadData(){},

View File

@ -3,42 +3,45 @@
<j-form-container :disabled="formDisabled">
<a-form-model ref="form" :model="model" :rules="validatorRules" slot="detail">
<a-row>
<a-col :span="24">
<a-col :span="12">
<a-form-model-item label="用车需求编号" :labelCol="labelCol" :wrapperCol="wrapperCol" prop="vdNo">
<a-input v-model="model.vdNo" placeholder="请输入用车需求编号" ></a-input>
<!-- <a-input v-model="model.vdNo" placeholder="请输入用车需求编号" ></a-input> -->
<j-dict-select-tag type="list" v-model="model.vdNo" dictCode="tms_vehicle_demand,vd_no,vd_no" placeholder="请选择用车需求编号" />
</a-form-model-item>
</a-col>
<a-col :span="24">
<a-col :span="12">
<a-form-model-item label="发货类型" :labelCol="labelCol" :wrapperCol="wrapperCol" prop="shipType">
<j-dict-select-tag type="list" v-model="model.shipType" dictCode="ship_type" placeholder="请选择发货类型" />
</a-form-model-item>
</a-col>
<a-col :span="24">
<a-col :span="12">
<a-form-model-item label="车型" :labelCol="labelCol" :wrapperCol="wrapperCol" prop="carType">
<j-dict-select-tag type="list" v-model="model.carType" dictCode="tms_vehicle_pallet,car_type,car_type" placeholder="请选择车型" />
<!-- <j-dict-select-tag type="list" v-model="model.carType" dictCode="tms_vehicle_pallet,car_type,car_type" placeholder="请选择车型" /> -->
<a-auto-complete v-model="model.carType" placeholder="请输入车型" @select="carTypeSelect" @change="carTypeChange" :dataSource="carTypeList"></a-auto-complete>
</a-form-model-item>
</a-col>
<a-col :span="24">
<a-col :span="12">
<a-form-model-item label="车长" :labelCol="labelCol" :wrapperCol="wrapperCol" prop="carLong">
<a-input-number v-model="model.carLong" placeholder="请输入车长" style="width: 100%" />
<a-input-number v-model="model.carLong" placeholder="请输入车长" style="width: 100%" disabled/>
</a-form-model-item>
</a-col>
<a-col :span="24">
<!-- <a-col :span="12">
<a-form-model-item label="送货区域" :labelCol="labelCol" :wrapperCol="wrapperCol" prop="deliveryArea">
<a-input v-model="model.deliveryArea" placeholder="请输入送货区域" ></a-input>
</a-form-model-item>
</a-col>
<a-col :span="24">
<a-form-model-item label="送货地点" :labelCol="labelCol" :wrapperCol="wrapperCol" prop="deliveryAddress">
<j-dict-select-tag type="list" v-model="model.deliveryAddress" dictCode="delivery_address" placeholder="请选择送货地点" />
</a-form-model-item>
</a-col>
<a-col :span="24">
</a-col> -->
<a-col :span="12">
<a-form-model-item label="取货仓库" :labelCol="labelCol" :wrapperCol="wrapperCol" prop="pickUpHub">
<j-dict-select-tag type="list" v-model="model.pickUpHub" dictCode="pick_up_hub" placeholder="请选择取货仓库" />
<!-- <j-dict-select-tag type="list" v-model="model.pickUpHub" dictCode="pick_up_hub" placeholder="请选择取货仓库" /> -->
<a-auto-complete v-model="model.pickUpHub" placeholder="请输入取货仓库" @select="pickUpHubSelect" @change="pickUpHubChange" :dataSource="pickUpHubList"></a-auto-complete>
</a-form-model-item>
</a-col>
<a-col :span="24">
<a-col :span="12">
<a-form-model-item label="送货地点" :labelCol="labelCol" :wrapperCol="wrapperCol" prop="deliveryAddress">
<j-dict-select-tag type="list" v-model="model.deliveryAddress" dictCode="delivery_address" placeholder="请选择送货地点" disabled/>
</a-form-model-item>
</a-col>
<a-col :span="12">
<a-form-model-item label="审核结果" :labelCol="labelCol" :wrapperCol="wrapperCol" prop="auditResult">
<j-dict-select-tag type="list" v-model="model.auditResult" dictCode="audit_result" placeholder="请选择审核结果" />
</a-form-model-item>
@ -68,11 +71,15 @@
},
data () {
return {
carTypeLongList:[],
carTypeList:[],
cityList:[],
pickUpHubList:[],
model:{
},
labelCol: {
xs: { span: 24 },
sm: { span: 5 },
sm: { span: 6 },
},
wrapperCol: {
xs: { span: 24 },
@ -80,11 +87,19 @@
},
confirmLoading: false,
validatorRules: {
vdNo :[{required: true, message: '请选择用车需求编号!'}],
shipType :[{required: true, message: '请选择发货类型!'}],
carType :[{required: true, message: '请选择车型!'}],
carLong :[{required: true, message: '请选择车长!'}],
pickUpHub :[{required: true, message: '请选择取货仓库!'}],
deliveryAddress :[{required: true, message: '请选择送货地点!'}],
},
url: {
add: "/vehicledemandcount/vehicleDemandCount/add",
edit: "/vehicledemandcount/vehicleDemandCount/edit",
queryById: "/vehicledemandcount/vehicleDemandCount/queryById"
queryById: "/vehicledemandcount/vehicleDemandCount/queryById",
getCarTypeLong: "/vehiclepallet/vehiclePallet/getCarTypeLong",
getCity: "/logisticsroute/logisticsRoute/getCity",
}
}
},
@ -96,6 +111,8 @@
created () {
//备份model原始值
this.modelDefault = JSON.parse(JSON.stringify(this.model));
this.getCarTypeLong();
this.getCity();
},
methods: {
add () {
@ -134,6 +151,41 @@
})
},
getCarTypeLong(){
getAction(this.url.getCarTypeLong).then(res => {
if (res.success) {
this.carTypeLongList = res.result;
this.carTypeList = res.result;
}
})
},
carTypeSelect(){
let carType = this.carTypeList.filter(x=>x.includes(this.model.carType))[0].split('&-')[0];
let carLong = this.carTypeList.filter(x=>x.includes(this.model.carType))[0].split('&-')[1];
this.model.carType = carType;
this.model.carLong = carLong;
},
carTypeChange(val){
this.carTypeList = this.carTypeLongList.filter(x => x.includes(val));
},
getCity(){
getAction(this.url.getCity).then(res => {
if (res.success) {
this.cityList = res.result;
this.pickUpHubList = res.result;
}
})
},
pickUpHubSelect(){
let pickUpHub = this.pickUpHubList.filter(x=>x.includes(this.model.pickUpHub))[0].split('&-')[0]
let deliveryAddress = this.pickUpHubList.filter(x=>x.includes(this.model.pickUpHub))[0].split('&-')[1]
this.model.pickUpHub = pickUpHub
this.model.deliveryAddress = deliveryAddress
},
pickUpHubChange(val){
this.pickUpHubList = this.cityList.filter(x => x.includes(val));
},
}
}
</script>