分拣包装修改
This commit is contained in:
parent
42051579f6
commit
ce70fad647
1
sub-operation-service/components.d.ts
vendored
1
sub-operation-service/components.d.ts
vendored
@ -12,6 +12,7 @@ declare module 'vue' {
|
||||
BreadComp: typeof import('./src/components/breadComp.vue')['default']
|
||||
CenterMap: typeof import('./src/components/centerMap.vue')['default']
|
||||
CodeDialog: typeof import('./src/components/code-dialog/index.vue')['default']
|
||||
copy: typeof import('./src/components/custom-scroll-title copy/index.vue')['default']
|
||||
CostomImg: typeof import('./src/components/costomImg.vue')['default']
|
||||
CustomBack: typeof import('./src/components/customBack.vue')['default']
|
||||
CustomCarouselPicture: typeof import('./src/components/custom-carousel-picture/index.vue')['default']
|
||||
|
||||
BIN
sub-operation-service/src/assets/images/slk.png
Normal file
BIN
sub-operation-service/src/assets/images/slk.png
Normal file
Binary file not shown.
|
After Width: | Height: | Size: 2.0 MiB |
@ -1,6 +1,92 @@
|
||||
<template>
|
||||
<Common>
|
||||
<template #main>
|
||||
<el-dialog v-model="dialogVisible" title="预约服务" :close-on-click-modal="false" custom-class="custom-inquiry-dialog" width="600px">
|
||||
<el-form :model="form" label-width="auto" :rules="rules">
|
||||
<el-form-item label="您的称呼" prop="name">
|
||||
<div style="display: flex; justify-content: space-between; align-content: center">
|
||||
<el-input v-model="form.name" style="width: 340px; margin-right: 10px" />
|
||||
<el-radio-group v-model="form.radio">
|
||||
<el-radio value="Value 1">男士</el-radio>
|
||||
<el-radio label="Label 2 & Value 2">女士</el-radio>
|
||||
</el-radio-group>
|
||||
</div>
|
||||
</el-form-item>
|
||||
<el-form-item label="您的电话" prop="phone">
|
||||
<el-input v-model="form.phone" style="width: 600px" />
|
||||
</el-form-item>
|
||||
<!-- <el-form-item label="详细地址" prop="address1">
|
||||
<el-select v-model="form.address1" placeholder="请选择地址" style="width: 44%">
|
||||
<el-option v-for="item in addressOptions" :key="item.value" :label="item.label" :value="item.value" />
|
||||
</el-select>
|
||||
<span style="width: 2%"></span>
|
||||
<el-form-item prop="address2" style="display: inline-block; width: 44%; margin-bottom: 0">
|
||||
<el-input v-model="form.address2" />
|
||||
</el-form-item>
|
||||
</el-form-item> -->
|
||||
<el-form-item label="详细地址" required>
|
||||
<div style="display: flex; gap: 16px">
|
||||
<el-form-item prop="selectedAddress">
|
||||
<el-cascader
|
||||
v-model="form.selectedAddress"
|
||||
:options="addressOptions"
|
||||
:props="cascaderProps"
|
||||
placeholder="请选择地址"
|
||||
:style="{ width: unifiedWidth }"
|
||||
/>
|
||||
</el-form-item>
|
||||
<el-form-item prop="detailAddress">
|
||||
<el-input v-model="form.detailAddress" placeholder="详细地址（如街道、门牌号等）" :style="{ width: unifiedWidth }" />
|
||||
</el-form-item>
|
||||
</div>
|
||||
</el-form-item>
|
||||
<!-- 分拣物品 -->
|
||||
<el-form-item label="分拣物品" prop="goods">
|
||||
<!-- <el-input v-model="form.goods" style="width: 44%" /> -->
|
||||
<el-select v-model="form.goods" placeholder="请选择分拣物品" style="width: 600px">
|
||||
<el-option v-for="item in options" :key="item.value" :label="item.label" :value="item.value" />
|
||||
</el-select>
|
||||
</el-form-item>
|
||||
<!-- 分拣数量 -->
|
||||
<el-form-item label="分拣数量" prop="num">
|
||||
<!-- <el-input v-model="form.num" style="width: 44%" /> -->
|
||||
<el-select v-model="form.num" placeholder="请选择分拣数量" style="width: 600px">
|
||||
<template #prefix> <span style="position: absolute; right: 40px"> | 吨</span> </template
|
||||
><el-option v-for="item in options1" :key="item.value" :label="item.label" :value="item.value" />
|
||||
</el-select>
|
||||
</el-form-item>
|
||||
<!-- 分拣类型 -->
|
||||
<el-form-item label="分拣类型" prop="type">
|
||||
<!-- <el-input v-model="form.type" style="width: 44%" /> -->
|
||||
<el-select v-model="form.type" placeholder="请选择分拣类型" style="width: 600px">
|
||||
<el-option v-for="item in options2" :key="item.value" :label="item.label" :value="item.value" />
|
||||
</el-select>
|
||||
</el-form-item>
|
||||
<!-- 截至日期 -->
|
||||
<el-form-item label="开始日期" prop="date">
|
||||
<el-date-picker v-model="form.date0" type="date" placeholder="选择日期" style="width: 600px" />
|
||||
</el-form-item>
|
||||
<!-- 截至日期 -->
|
||||
<el-form-item label="截至日期" prop="date">
|
||||
<el-date-picker v-model="form.date" type="date" placeholder="选择日期" style="width: 600px" />
|
||||
</el-form-item>
|
||||
<el-form-item label="分拣要求" prop="desc">
|
||||
<el-input v-model="form.desc" type="textarea" style="width: 600px" />
|
||||
</el-form-item>
|
||||
</el-form>
|
||||
<div style="text-align: left; font-size: 22px; margin-bottom: 10px">
|
||||
<span>合计：</span>
|
||||
<span style="color: rgb(37, 191, 130)">...</span>
|
||||
<span style="font-size: 16px; color: rgb(37, 191, 130)">元</span>
|
||||
</div>
|
||||
|
||||
<template #footer>
|
||||
<div class="dialog-footer">
|
||||
<el-button class="cancel-btn" @click="dialogVisible = false">取消</el-button>
|
||||
<el-button class="submit-btn" type="primary" @click="handleSubmit">提交</el-button>
|
||||
</div>
|
||||
</template>
|
||||
</el-dialog>
|
||||
<div class="max-w-7xl mx-auto p-4">
|
||||
<div class="title" @click="toBack(-1)">分拣 > <span style="color: rgba(37, 191, 130, 1)">查看详情</span></div>
|
||||
<!-- <img src="@/assets/images/warehouseLogistics/img24.png" fit="cover" class="storage-image" @click="toLink" /> -->
|
||||
@ -75,19 +161,109 @@
|
||||
<script setup>
|
||||
import Common from './components/common.vue';
|
||||
import { getAssetsFile } from '@/utils';
|
||||
import { ref, reactive, watch } from 'vue';
|
||||
import { onMounted, ref, reactive, watch } from 'vue';
|
||||
import { useRoute, useRouter } from 'vue-router';
|
||||
import { getRegion } from '@/apis/common';
|
||||
import { ElMessage } from 'element-plus';
|
||||
const route = useRoute();
|
||||
const router = useRouter();
|
||||
const dialogVisible = ref(false);
|
||||
const formRef = ref(null);
|
||||
|
||||
const form = reactive({
|
||||
quantity: '',
|
||||
title: '',
|
||||
phone: '',
|
||||
name: '',
|
||||
radio: '',
|
||||
phone: '',
|
||||
address1: '',
|
||||
address2: '',
|
||||
selectedAddress: [], //选中的区域编码数组
|
||||
areaAddress: '', //区域地址
|
||||
detailAddress: '', //详细地址
|
||||
goods: '',
|
||||
num: '',
|
||||
type: '',
|
||||
date0: '',
|
||||
date: '',
|
||||
desc: '',
|
||||
});
|
||||
const rules = reactive({
|
||||
name: [{ required: true, message: '请输入您的称呼', trigger: 'blur' }],
|
||||
phone: [{ required: true, message: '请输入您的电话', trigger: 'blur' }],
|
||||
address1: [{ required: true, message: '请选择地址', trigger: 'change' }],
|
||||
address2: [{ required: true, message: '请输入详细地址', trigger: 'blur' }],
|
||||
goods: [{ required: true, message: '请输入分拣物品', trigger: 'blur' }],
|
||||
num: [{ required: true, message: '请输入分拣数量', trigger: 'blur' }],
|
||||
type: [{ required: true, message: '请输入分拣类型', trigger: 'blur' }],
|
||||
date0: [{ required: true, message: '请选择截至日期', trigger: 'blur' }],
|
||||
date: [{ required: true, message: '请选择截至日期', trigger: 'blur' }],
|
||||
desc: [{ required: true, message: '请输入分拣要求', trigger: 'blur' }],
|
||||
});
|
||||
|
||||
const options = [
|
||||
{
|
||||
value: '1',
|
||||
label: '西红柿',
|
||||
},
|
||||
{
|
||||
value: '2',
|
||||
label: '茄子',
|
||||
},
|
||||
{
|
||||
value: '3',
|
||||
label: '辣椒',
|
||||
},
|
||||
];
|
||||
const options1 = [
|
||||
{
|
||||
value: '1',
|
||||
label: '100',
|
||||
},
|
||||
{
|
||||
value: '2',
|
||||
label: '200',
|
||||
},
|
||||
{
|
||||
value: '3',
|
||||
label: '300',
|
||||
},
|
||||
{
|
||||
value: '3',
|
||||
label: '400',
|
||||
},
|
||||
{
|
||||
value: '3',
|
||||
label: '500',
|
||||
},
|
||||
];
|
||||
const options2 = [
|
||||
{
|
||||
value: '1',
|
||||
label: '人工分拣',
|
||||
},
|
||||
{
|
||||
value: '2',
|
||||
label: '自动化分拣',
|
||||
},
|
||||
];
|
||||
|
||||
// 级联选择器配置
|
||||
const cascaderProps = ref({
|
||||
label: 'areaName', // 选项标签字段名
|
||||
value: 'areaCode', // 选项值字段名
|
||||
children: 'areaChildVOS', // 子选项字段名
|
||||
emitPath: true,
|
||||
expandTrigger: 'hover',
|
||||
});
|
||||
// 省市区数据（示例）
|
||||
const addressOptions = ref([]);
|
||||
const getArea = async () => {
|
||||
const res = await getRegion();
|
||||
if (res.code === 200) {
|
||||
addressOptions.value = res.data;
|
||||
} else {
|
||||
ElMessage.error(res.message);
|
||||
}
|
||||
};
|
||||
|
||||
console.log(route);
|
||||
let data = route.query;
|
||||
@ -100,9 +276,11 @@ const diotext = ref('');
|
||||
const diodescription = ref('');
|
||||
|
||||
const goDei = (data) => {
|
||||
console.log('wery');
|
||||
dialogVisible.value = true;
|
||||
|
||||
// diodescription.value = data.description;
|
||||
// diotext.value = data.title;
|
||||
dialogVisible.value = true;
|
||||
};
|
||||
|
||||
const handleSubmit = () => {
|
||||
@ -113,6 +291,9 @@ const handleSubmit = () => {
|
||||
}
|
||||
});
|
||||
};
|
||||
onMounted(() => {
|
||||
getArea();
|
||||
});
|
||||
</script>
|
||||
|
||||
<style lang="scss" scoped>
|
||||
@ -170,8 +351,8 @@ $border-color: #dcdfe6; // 边框颜色
|
||||
// 输入框样式覆盖
|
||||
:deep(.el-input) {
|
||||
.el-input__inner {
|
||||
height: 40px;
|
||||
line-height: 40px;
|
||||
// height: 40px;
|
||||
// line-height: 40px;
|
||||
border-radius: 4px;
|
||||
&:focus {
|
||||
border-color: $primary-color;
|
||||
|
||||
@ -19,7 +19,7 @@
|
||||
<div class="bac">{{ data.data[1] }}</div>
|
||||
<div class="bac">{{ data.data[2] }}</div>
|
||||
</div> -->
|
||||
<p class="mt-2 text-gray-700">报价：{{ data.price }}元/吨</p>
|
||||
<p class="mt-2 text-gray-700">报价：{{ data.price }}</p>
|
||||
<p class="mt-2 text-gray-700">关键词：{{ data.type }}</p>
|
||||
<p class="mt-2 text-gray-700">所在地：{{ data.address }}</p>
|
||||
<p class="mt-2 text-gray-700">联系人：{{ data.contact }}</p>
|
||||
|
||||
@ -163,11 +163,19 @@ const options1 = [
|
||||
const options2 = [
|
||||
{
|
||||
value: '1',
|
||||
label: '人工分拣',
|
||||
label: '塑料框',
|
||||
},
|
||||
{
|
||||
value: '2',
|
||||
label: '自动化分拣',
|
||||
label: '纸箱',
|
||||
},
|
||||
{
|
||||
value: '3',
|
||||
label: '泡沫箱',
|
||||
},
|
||||
{
|
||||
value: '4',
|
||||
label: '冰瓶',
|
||||
},
|
||||
];
|
||||
|
||||
|
||||
@ -85,7 +85,7 @@
|
||||
:key="index"
|
||||
class="tab_list_li"
|
||||
:class="{ active: currentTab2 === index }"
|
||||
@click.stop="currentTab2 = index"
|
||||
@click.stop="switchTab(item, index)"
|
||||
>
|
||||
{{ item }}
|
||||
</div>
|
||||
@ -96,7 +96,7 @@
|
||||
</div>
|
||||
</el-card>
|
||||
<el-row :gutter="20" style="margin-top: 10px">
|
||||
<el-col v-for="(item, index) in state.data" :key="index" :span="24">
|
||||
<el-col v-for="(item, index) in state.data0" :key="index" :span="24">
|
||||
<el-card class="storage-card" shadow="hover">
|
||||
<div class="storage-content">
|
||||
<div class="storage-content-top" @click="toLink(item)">
|
||||
@ -110,7 +110,7 @@
|
||||
</div>
|
||||
</div>
|
||||
<div v-if="item.rank" class="rank-badge">
|
||||
<p style="text-align: right; font-size: 22px; color: #25bf82">￥{{ item.price }}/个</p>
|
||||
<p style="text-align: right; font-size: 22px; color: #25bf82">￥{{ item.price }}</p>
|
||||
<el-button style="padding: 5px 50px; margin-top: 50px" type="primary" @click="handleClick">购买</el-button>
|
||||
</div>
|
||||
</div>
|
||||
@ -125,7 +125,7 @@
|
||||
</div>
|
||||
</template>
|
||||
<script setup name="page-menu">
|
||||
import { ref, reactive, watch } from 'vue';
|
||||
import { onMounted, ref, reactive, watch } from 'vue';
|
||||
import { getAssetsFile } from '@/utils';
|
||||
import { useRoute, useRouter } from 'vue-router';
|
||||
import warehouseLogisticsRoutes from '@/router/modules/warehouseLogistics';
|
||||
@ -136,57 +136,40 @@ const router = useRouter();
|
||||
|
||||
// const tab0 = reactive(['包装服务', '包装需求']);
|
||||
const tab0 = reactive(['包装服务']);
|
||||
const tab1 = reactive(['全部', '熟料容器', '金属容器', '纸类容器']);
|
||||
const tab2 = reactive(['全部', '塑料框', '纸箱', '泡沫箱', '冰瓶']);
|
||||
// const tab1 = reactive(['全部', '塑料容器', '金属容器', '纸类容器']);
|
||||
const tab2 = reactive(['全部', '塑料筐', '纸箱', '泡沫箱', '冰瓶']);
|
||||
const tab3 = reactive(['水产', '其他类']);
|
||||
const state = reactive({
|
||||
menus: warehouseLogisticsRoutes[0].children,
|
||||
query: {
|
||||
current: 1,
|
||||
},
|
||||
data0: [],
|
||||
data: [
|
||||
{
|
||||
title: '5L堆码桶',
|
||||
description: '5L 7元/个',
|
||||
title: '供应水果塑料筐 蔬菜运输胶筐 食品配送周转箩 加厚透气胶框',
|
||||
description: '中号框 8元/个',
|
||||
introduce:
|
||||
'5L堆码桶是一种专为液体包装设计的塑料容器，容量为5升，具备堆码功能，可节省存储和运输空间。其材质通常采用高密度聚乙烯（HDPE），具有耐酸碱、抗腐蚀、耐冲击、耐高低温等特性，符合食品级和化工级标准，广泛应用于化工、涂料、润滑油、食品、医药等行业。',
|
||||
price: '7.00',
|
||||
'基础材质塑料框：主流采用聚丙烯（PP）或高密度聚乙烯（HDPE）注塑成型，具有高强度、耐腐蚀、抗冲击等特点。五层加强筋结构（如“井字底+侧壁网格”设计）抗压强度提升50%，适合果蔬运输、仓储堆码。针对水果、蔬菜等易损货物，框体四角增加防撞圆角，底部采用加厚防滑纹，承重能力从300kg提升至500kg。侧壁高透气孔设计（开孔率≥40%），确保运输通风，减少腐烂率。',
|
||||
price: '8元/个',
|
||||
//地址
|
||||
address: '临沧市耿马县孟定镇100号',
|
||||
locationUrl: 'images/dz.png',
|
||||
//联系人
|
||||
contact: '刘冬冬',
|
||||
type: '塑料容器',
|
||||
contact: '张爱林',
|
||||
type: '塑料筐',
|
||||
//电话
|
||||
phone: '15678459087',
|
||||
|
||||
rank: '1',
|
||||
imageUrl: 'images/11.jpg',
|
||||
},
|
||||
{
|
||||
title: '二手吨桶,八九成新两百升蓝桶',
|
||||
description: '100 380元/个',
|
||||
introduce:
|
||||
'材质与结构内容器：采用进口高密度聚乙烯（HDPE）或线性低密度聚乙烯（LLDPE），耐酸碱、抗腐蚀，符合食品级标准。外框架：镀锌钢管焊接网格，底盘为四向进叉型全钢托盘，结构稳固，可用铲车直接装卸。工艺：旋转滚塑一次成型，无缝焊接，壁厚≥5mm，强度高，使用寿命长。性能参数容量：标称1000L（实际灌装密度1.5时容积约1060L）。尺寸：外型尺寸约1200×1000×1160mm，净重60±1KG。压力测试：液压试验压力120kPa，渗漏试验压力22kPa，跌落试验高度2m。堆码能力：灌装密度≤1.5时可堆码2层，密度＞1.5时堆码1层，满载静态堆码高度可达4层。',
|
||||
price: '380.00',
|
||||
//地址
|
||||
address: '临沧市耿马县孟定镇100号',
|
||||
locationUrl: 'images/dz.png',
|
||||
//联系人
|
||||
contact: '李伟',
|
||||
type: '塑料容器',
|
||||
//电话
|
||||
phone: '15678459087',
|
||||
|
||||
rank: '1',
|
||||
imageUrl: 'images/22.jpg',
|
||||
imageUrl: 'images/slk.png',
|
||||
},
|
||||
{
|
||||
title: '快递水果纸箱,苹果橙子纸箱定做印刷纸箱',
|
||||
description: '4号箱 1.4元/件',
|
||||
introduce:
|
||||
'基础材质瓦楞纸板：主流采用三层或五层结构，由面纸、瓦楞芯纸和里纸复合而成。五层纸板（如“B楞+C楞”组合）抗压强度提升40%，适合长途运输或堆码存储。环保材料：部分厂家使用再生纸浆或FSC认证纸板，符合欧盟环保标准，可降解率达90%以上。结构优化加强设计：针对苹果、橙子等重果，箱体四角增加L型护角或内置十字隔板，抗压强度从500kg提升至800kg。防潮处理：外层涂布防水膜或使用PE淋膜纸板，防潮性能提升3倍，适应冷链运输环境。',
|
||||
price: '1.40',
|
||||
price: '1.40元/件',
|
||||
//地址
|
||||
address: '临沧市耿马县孟定镇100号',
|
||||
locationUrl: 'images/dz.png',
|
||||
@ -204,7 +187,7 @@ const state = reactive({
|
||||
description: '通货 0.5元/个',
|
||||
introduce:
|
||||
'材质与结构基础材料：以瓦楞纸板为主，分为三层（单瓦楞）、五层（双瓦楞）和七层结构。三层瓦楞：面纸+瓦楞芯纸+里纸，成本低，适用于轻量商品（如日用品、电子产品配件）。五层瓦楞：增加一层芯纸和面纸，抗压强度提升50%-80%，常用于家电、家具等重物包装。七层瓦楞：超强承重设计，适用于工业设备、大型机械等极端承重需求。环保升级：部分采用再生纸浆或FSC认证材料，可降解率达90%以上，符合欧盟ROHS标准。',
|
||||
price: '0.50',
|
||||
price: '0.50/个',
|
||||
//地址
|
||||
address: '临沧市耿马县孟定镇100号',
|
||||
locationUrl: 'images/dz.png',
|
||||
@ -268,6 +251,27 @@ const applicationPackaging = () => {
|
||||
path: '/sub-operation-service/packaging/details2',
|
||||
});
|
||||
};
|
||||
//切换
|
||||
const switchTab = (item, index) => {
|
||||
console.log(item);
|
||||
if (item === '全部') {
|
||||
state.data0 = state.data;
|
||||
} else if (item === '塑料筐') {
|
||||
state.data0 = state.data.filter((item) => item.type === '塑料筐');
|
||||
} else if (item === '纸箱') {
|
||||
state.data0 = state.data.filter((item) => item.type === '纸箱');
|
||||
} else if (item === '泡沫箱') {
|
||||
state.data0 = state.data.filter((item) => item.type === '泡沫箱');
|
||||
} else if (item === '冰瓶') {
|
||||
state.data0 = state.data.filter((item) => item.type === '冰瓶');
|
||||
}
|
||||
|
||||
currentTab2.value = index;
|
||||
};
|
||||
onMounted(() => {
|
||||
console.log('state.data', state.data);
|
||||
state.data0 = state.data;
|
||||
});
|
||||
</script>
|
||||
<style lang="scss" scoped>
|
||||
// 基础颜色配置
|
||||
|
||||
@ -1,44 +1,88 @@
|
||||
<template>
|
||||
<div>
|
||||
<el-dialog v-model="dialogVisible" :close-on-click-modal="false" custom-class="custom-inquiry-dialog" width="450px">
|
||||
<div class="info-section">
|
||||
<div class="info-item">
|
||||
<span class="label">首选商家：</span>
|
||||
<span class="value">{{ diodescription }}</span>
|
||||
</div>
|
||||
<div class="info-item">
|
||||
<span class="label">选择服务：</span>
|
||||
<span class="value">{{ diotext }}</span>
|
||||
</div>
|
||||
</div>
|
||||
|
||||
<el-form ref="formRef" :model="form" label-position="top">
|
||||
<el-form-item label="需求量：" prop="quantity" :rules="[{ required: true, message: '请输入重量' }]">
|
||||
<el-input v-model="form.quantity" placeholder="请输入重量（kg）">
|
||||
<template #suffix>kg</template>
|
||||
</el-input>
|
||||
<el-dialog v-model="dialogVisible" title="预约服务" :close-on-click-modal="false" custom-class="custom-inquiry-dialog" width="600px">
|
||||
<el-form :model="form" label-width="auto" :rules="rules">
|
||||
<el-form-item label="您的称呼" prop="name">
|
||||
<div style="display: flex; justify-content: space-between; align-content: center">
|
||||
<el-input v-model="form.name" style="width: 340px; margin-right: 10px" />
|
||||
<el-radio-group v-model="form.radio">
|
||||
<el-radio value="Value 1">男士</el-radio>
|
||||
<el-radio label="Label 2 & Value 2">女士</el-radio>
|
||||
</el-radio-group>
|
||||
</div>
|
||||
</el-form-item>
|
||||
|
||||
<el-form-item label="您的称呼：" prop="name" :rules="[{ required: true, message: '请输入您的称呼' }]">
|
||||
<el-input v-model="form.name" placeholder="请输入您的称呼" />
|
||||
<el-form-item label="您的电话" prop="phone">
|
||||
<el-input v-model="form.phone" style="width: 600px" />
|
||||
</el-form-item>
|
||||
|
||||
<el-form-item
|
||||
label="您的电话："
|
||||
prop="phone"
|
||||
:rules="[
|
||||
{ required: true, message: '请输入电话' },
|
||||
{ pattern: /^1[3-9]\d{9}$/, message: '手机号格式错误' },
|
||||
]"
|
||||
>
|
||||
<el-input v-model="form.phone" placeholder="请输入电话号码" />
|
||||
<!-- <el-form-item label="详细地址" prop="address1">
|
||||
<el-select v-model="form.address1" placeholder="请选择地址" style="width: 44%">
|
||||
<el-option v-for="item in addressOptions" :key="item.value" :label="item.label" :value="item.value" />
|
||||
</el-select>
|
||||
<span style="width: 2%"></span>
|
||||
<el-form-item prop="address2" style="display: inline-block; width: 44%; margin-bottom: 0">
|
||||
<el-input v-model="form.address2" />
|
||||
</el-form-item>
|
||||
</el-form-item> -->
|
||||
<el-form-item label="详细地址" required>
|
||||
<div style="display: flex; gap: 16px">
|
||||
<el-form-item prop="selectedAddress">
|
||||
<el-cascader
|
||||
v-model="form.selectedAddress"
|
||||
:options="addressOptions"
|
||||
:props="cascaderProps"
|
||||
placeholder="请选择地址"
|
||||
:style="{ width: unifiedWidth }"
|
||||
/>
|
||||
</el-form-item>
|
||||
<el-form-item prop="detailAddress">
|
||||
<el-input v-model="form.detailAddress" placeholder="详细地址（如街道、门牌号等）" :style="{ width: unifiedWidth }" />
|
||||
</el-form-item>
|
||||
</div>
|
||||
</el-form-item>
|
||||
<!-- 分拣物品 -->
|
||||
<el-form-item label="分拣物品" prop="goods">
|
||||
<!-- <el-input v-model="form.goods" style="width: 44%" /> -->
|
||||
<el-select v-model="form.goods" placeholder="请选择分拣物品" style="width: 600px">
|
||||
<el-option v-for="item in options" :key="item.value" :label="item.label" :value="item.value" />
|
||||
</el-select>
|
||||
</el-form-item>
|
||||
<!-- 分拣数量 -->
|
||||
<el-form-item label="分拣数量" prop="num">
|
||||
<!-- <el-input v-model="form.num" style="width: 44%" /> -->
|
||||
<el-select v-model="form.num" placeholder="请选择分拣数量" style="width: 600px">
|
||||
<template #prefix> <span style="position: absolute; right: 40px"> | 吨</span> </template
|
||||
><el-option v-for="item in options1" :key="item.value" :label="item.label" :value="item.value" />
|
||||
</el-select>
|
||||
</el-form-item>
|
||||
<!-- 分拣类型 -->
|
||||
<el-form-item label="分拣类型" prop="type">
|
||||
<!-- <el-input v-model="form.type" style="width: 44%" /> -->
|
||||
<el-select v-model="form.type" placeholder="请选择分拣类型" style="width: 600px">
|
||||
<el-option v-for="item in options2" :key="item.value" :label="item.label" :value="item.value" />
|
||||
</el-select>
|
||||
</el-form-item>
|
||||
<!-- 截至日期 -->
|
||||
<el-form-item label="开始日期" prop="date">
|
||||
<el-date-picker v-model="form.date0" type="date" placeholder="选择日期" style="width: 600px" />
|
||||
</el-form-item>
|
||||
<!-- 截至日期 -->
|
||||
<el-form-item label="截至日期" prop="date">
|
||||
<el-date-picker v-model="form.date" type="date" placeholder="选择日期" style="width: 600px" />
|
||||
</el-form-item>
|
||||
<el-form-item label="分拣要求" prop="desc">
|
||||
<el-input v-model="form.desc" type="textarea" style="width: 600px" />
|
||||
</el-form-item>
|
||||
</el-form>
|
||||
<div style="text-align: left; font-size: 22px; margin-bottom: 10px">
|
||||
<span>合计：</span>
|
||||
<span style="color: rgb(37, 191, 130)">...</span>
|
||||
<span style="font-size: 16px; color: rgb(37, 191, 130)">元</span>
|
||||
</div>
|
||||
|
||||
<template #footer>
|
||||
<div class="dialog-footer">
|
||||
<el-button class="cancel-btn" @click="dialogVisible = false">取消</el-button>
|
||||
<el-button class="submit-btn" type="primary" @click="handleSubmit">发送询价</el-button>
|
||||
<el-button class="submit-btn" type="primary" @click="handleSubmit">提交</el-button>
|
||||
</div>
|
||||
</template>
|
||||
</el-dialog>
|
||||
@ -163,6 +207,8 @@ import { getAssetsFile } from '@/utils';
|
||||
import { useRoute, useRouter } from 'vue-router';
|
||||
import warehouseLogisticsRoutes from '@/router/modules/warehouseLogistics';
|
||||
import Common from './components/common.vue';
|
||||
import { getRegion } from '@/apis/common';
|
||||
import { ElMessage } from 'element-plus';
|
||||
|
||||
const route = useRoute();
|
||||
const router = useRouter();
|
||||
@ -180,7 +226,7 @@ const state = reactive({
|
||||
data0: [],
|
||||
data: [
|
||||
{
|
||||
title: '云南绿源生态农业有限公司',
|
||||
title: '云南农泰数字农业科技有限公司',
|
||||
description: '根茎类 ',
|
||||
location: '临沧市·耿马县',
|
||||
locationUrl: 'images/dz.png',
|
||||
@ -188,7 +234,7 @@ const state = reactive({
|
||||
type: '自动化分拣',
|
||||
//监控方式
|
||||
monitor: '全程实时监控',
|
||||
price: '23',
|
||||
price: '15',
|
||||
rank: '1',
|
||||
imageUrl: 'images/5.png',
|
||||
//联系人
|
||||
@ -199,7 +245,7 @@ const state = reactive({
|
||||
'云南绿源生态农业有限公司专注耿马高原根茎类作物，拥有5000㎡无尘车间，自动滚轴分选线可精准区分大小、糖度；全程冷链+云端监控，客户手机即可查看货位温湿度；3-5元/kg为当季地头价，量大可议价，支持京东冷链直发、边贸自提。',
|
||||
},
|
||||
{
|
||||
title: '云南丰瑞农业发展有限公司',
|
||||
title: '云南农泰数字农业科技有限公司',
|
||||
description: '豆类 ',
|
||||
location: '临沧市·耿马县',
|
||||
locationUrl: 'images/dz.png',
|
||||
@ -207,7 +253,7 @@ const state = reactive({
|
||||
type: '人工分拣',
|
||||
//监控方式
|
||||
monitor: '全程实时监控',
|
||||
price: '15',
|
||||
price: '23',
|
||||
rank: '1',
|
||||
imageUrl: 'images/6.png',
|
||||
//联系人
|
||||
@ -217,42 +263,6 @@ const state = reactive({
|
||||
introduce:
|
||||
'云南丰瑞农业发展主打滇西蚕豆、芸豆，人工手选保证完整无破损，200㎡恒温库+24h摄像监控，价格2.5-4元/kg含简易真空小袋；可提供出口级质检报告，孟定口岸当天装车，适合电商小包及边贸批量。',
|
||||
},
|
||||
{
|
||||
title: '云南田园牧歌农业科技有限公司',
|
||||
description: '菌菇类 ',
|
||||
location: '临沧市·耿马县',
|
||||
locationUrl: 'images/dz.png',
|
||||
//分拣
|
||||
type: '自动化分拣',
|
||||
//监控方式
|
||||
monitor: '全程实时监控',
|
||||
price: '18',
|
||||
rank: '1',
|
||||
imageUrl: 'images/7.png',
|
||||
contact: '王 磊',
|
||||
phone: '15987925518',
|
||||
//介绍
|
||||
introduce:
|
||||
'云南田园牧歌农业科技依托耿马原始松林，年产野生菌鲜货800吨；自动光学分拣机剔除虫蛀、畸形，4-6元/kg为产地批发价，全程-2℃冷藏车直达昆明机场；支持顺丰冷运、泡沫箱+冰袋包装，24小时温湿度云端可查。',
|
||||
},
|
||||
{
|
||||
title: '云南金土地农业有限公司',
|
||||
description: '坚果类 ',
|
||||
location: '临沧市·耿马县',
|
||||
locationUrl: 'images/dz.png',
|
||||
//分拣
|
||||
type: '人工分拣',
|
||||
//监控方式
|
||||
monitor: '全程实时监控',
|
||||
price: '19',
|
||||
rank: '1',
|
||||
imageUrl: 'images/4.png',
|
||||
contact: '陈 刚',
|
||||
phone: '13759347102',
|
||||
//介绍
|
||||
introduce:
|
||||
'云南金土地农业专注澳洲坚果、薄壳核桃，人工色选+比重筛选，碎仁率＜2%；500㎡充氮保鲜库全程可视监控，5-7元/kg含麻袋或礼盒包装；提供有机认证，可代发全国，边贸客户可孟定口岸自提，散称或整柜均可。',
|
||||
},
|
||||
],
|
||||
});
|
||||
|
||||
@ -263,12 +273,101 @@ const currentTab3 = ref(0);
|
||||
const dialogVisible = ref(false);
|
||||
const formRef = ref(null);
|
||||
|
||||
const unifiedWidth = '236px';
|
||||
const form = reactive({
|
||||
quantity: '',
|
||||
title: '',
|
||||
phone: '',
|
||||
name: '',
|
||||
radio: '',
|
||||
phone: '',
|
||||
address1: '',
|
||||
address2: '',
|
||||
selectedAddress: [], //选中的区域编码数组
|
||||
areaAddress: '', //区域地址
|
||||
detailAddress: '', //详细地址
|
||||
goods: '',
|
||||
num: '',
|
||||
type: '',
|
||||
date0: '',
|
||||
date: '',
|
||||
desc: '',
|
||||
});
|
||||
const rules = reactive({
|
||||
name: [{ required: true, message: '请输入您的称呼', trigger: 'blur' }],
|
||||
phone: [{ required: true, message: '请输入您的电话', trigger: 'blur' }],
|
||||
address1: [{ required: true, message: '请选择地址', trigger: 'change' }],
|
||||
address2: [{ required: true, message: '请输入详细地址', trigger: 'blur' }],
|
||||
goods: [{ required: true, message: '请输入分拣物品', trigger: 'blur' }],
|
||||
num: [{ required: true, message: '请输入分拣数量', trigger: 'blur' }],
|
||||
type: [{ required: true, message: '请输入分拣类型', trigger: 'blur' }],
|
||||
date0: [{ required: true, message: '请选择截至日期', trigger: 'blur' }],
|
||||
date: [{ required: true, message: '请选择截至日期', trigger: 'blur' }],
|
||||
desc: [{ required: true, message: '请输入分拣要求', trigger: 'blur' }],
|
||||
});
|
||||
|
||||
const options = [
|
||||
{
|
||||
value: '1',
|
||||
label: '西红柿',
|
||||
},
|
||||
{
|
||||
value: '2',
|
||||
label: '茄子',
|
||||
},
|
||||
{
|
||||
value: '3',
|
||||
label: '辣椒',
|
||||
},
|
||||
];
|
||||
const options1 = [
|
||||
{
|
||||
value: '1',
|
||||
label: '100',
|
||||
},
|
||||
{
|
||||
value: '2',
|
||||
label: '200',
|
||||
},
|
||||
{
|
||||
value: '3',
|
||||
label: '300',
|
||||
},
|
||||
{
|
||||
value: '3',
|
||||
label: '400',
|
||||
},
|
||||
{
|
||||
value: '3',
|
||||
label: '500',
|
||||
},
|
||||
];
|
||||
const options2 = [
|
||||
{
|
||||
value: '1',
|
||||
label: '人工分拣',
|
||||
},
|
||||
{
|
||||
value: '2',
|
||||
label: '自动化分拣',
|
||||
},
|
||||
];
|
||||
|
||||
// 级联选择器配置
|
||||
const cascaderProps = ref({
|
||||
label: 'areaName', // 选项标签字段名
|
||||
value: 'areaCode', // 选项值字段名
|
||||
children: 'areaChildVOS', // 子选项字段名
|
||||
emitPath: true,
|
||||
expandTrigger: 'hover',
|
||||
});
|
||||
// 省市区数据（示例）
|
||||
const addressOptions = ref([]);
|
||||
const getArea = async () => {
|
||||
const res = await getRegion();
|
||||
if (res.code === 200) {
|
||||
addressOptions.value = res.data;
|
||||
} else {
|
||||
ElMessage.error(res.message);
|
||||
}
|
||||
};
|
||||
|
||||
const diotext = ref('');
|
||||
const diodescription = ref('');
|
||||
@ -291,6 +390,7 @@ const goDei = (data) => {
|
||||
// diodescription.value = data.description;
|
||||
// diotext.value = data.title;
|
||||
// dialogVisible.value = true;
|
||||
dialogVisible.value = true;
|
||||
};
|
||||
|
||||
const handleSubmit = () => {
|
||||
@ -319,6 +419,7 @@ const handleApply = () => {
|
||||
});
|
||||
};
|
||||
onMounted(() => {
|
||||
getArea();
|
||||
console.log('state.data', state.data);
|
||||
state.data0 = state.data;
|
||||
});
|
||||
@ -377,8 +478,8 @@ $border-color: #dcdfe6; // 边框颜色
|
||||
// 输入框样式覆盖
|
||||
:deep(.el-input) {
|
||||
.el-input__inner {
|
||||
height: 40px;
|
||||
line-height: 40px;
|
||||
// height: 40px;
|
||||
// line-height: 40px;
|
||||
border-radius: 4px;
|
||||
&:focus {
|
||||
border-color: $primary-color;
|
||||
|
||||
@ -288,32 +288,32 @@ const getUserAddressList = () => {
|
||||
});
|
||||
console.log(res.data.records);
|
||||
data.value = res.data.records;
|
||||
addIsCheckProperty(data);
|
||||
// addIsCheckProperty(data);
|
||||
});
|
||||
};
|
||||
|
||||
function addIsCheckProperty(data) {
|
||||
if (Array.isArray(data)) {
|
||||
data.forEach((item) => {
|
||||
item.ischeck = false; // 为当前层级添加属性
|
||||
if (item.cartDetails) {
|
||||
// 处理子集
|
||||
addIsCheckProperty(item.cartDetails);
|
||||
}
|
||||
if (item.records) {
|
||||
// 处理父级（如存在嵌套结构）
|
||||
addIsCheckProperty(item.records);
|
||||
}
|
||||
});
|
||||
} else if (typeof data === 'object' && data !== null) {
|
||||
data.ischeck = false;
|
||||
for (let key in data) {
|
||||
if (typeof data[key] === 'object') {
|
||||
addIsCheckProperty(data[key]); // 递归处理嵌套对象
|
||||
}
|
||||
}
|
||||
}
|
||||
}
|
||||
// function addIsCheckProperty(data) {
|
||||
// if (Array.isArray(data)) {
|
||||
// data.forEach((item) => {
|
||||
// item.ischeck = false; // 为当前层级添加属性
|
||||
// if (item.cartDetails) {
|
||||
// // 处理子集
|
||||
// addIsCheckProperty(item.cartDetails);
|
||||
// }
|
||||
// if (item.records) {
|
||||
// // 处理父级（如存在嵌套结构）
|
||||
// addIsCheckProperty(item.records);
|
||||
// }
|
||||
// });
|
||||
// } else if (typeof data === 'object' && data !== null) {
|
||||
// data.ischeck = false;
|
||||
// for (let key in data) {
|
||||
// if (typeof data[key] === 'object') {
|
||||
// addIsCheckProperty(data[key]); // 递归处理嵌套对象
|
||||
// }
|
||||
// }
|
||||
// }
|
||||
// }
|
||||
|
||||
const numberChange = (value, index, indexg) => {
|
||||
console.log(value, index, indexg);
|
||||
|
||||
Loading…
x
Reference in New Issue
Block a user