diff --git a/sub-operation-service/src/assets/images/warehouseLogistics/car-icon.png b/sub-operation-service/src/assets/images/warehouseLogistics/car-icon.png new file mode 100644 index 0000000..11ba0f4 Binary files /dev/null and b/sub-operation-service/src/assets/images/warehouseLogistics/car-icon.png differ diff --git a/sub-operation-service/src/assets/images/warehouseLogistics/company-vehicles1.png b/sub-operation-service/src/assets/images/warehouseLogistics/company-vehicles1.png new file mode 100644 index 0000000..033b809 Binary files /dev/null and b/sub-operation-service/src/assets/images/warehouseLogistics/company-vehicles1.png differ diff --git a/sub-operation-service/src/assets/images/warehouseLogistics/company-vehicles2.png b/sub-operation-service/src/assets/images/warehouseLogistics/company-vehicles2.png new file mode 100644 index 0000000..08a7e1e Binary files /dev/null and b/sub-operation-service/src/assets/images/warehouseLogistics/company-vehicles2.png differ diff --git a/sub-operation-service/src/assets/images/warehouseLogistics/company-vehicles3.png b/sub-operation-service/src/assets/images/warehouseLogistics/company-vehicles3.png new file mode 100644 index 0000000..ab72510 Binary files /dev/null and b/sub-operation-service/src/assets/images/warehouseLogistics/company-vehicles3.png differ diff --git a/sub-operation-service/src/assets/images/warehouseLogistics/consignee.png b/sub-operation-service/src/assets/images/warehouseLogistics/consignee.png new file mode 100644 index 0000000..5731ba9 Binary files /dev/null and b/sub-operation-service/src/assets/images/warehouseLogistics/consignee.png differ diff --git a/sub-operation-service/src/assets/images/warehouseLogistics/goods.png b/sub-operation-service/src/assets/images/warehouseLogistics/goods.png new file mode 100644 index 0000000..c67c870 Binary files /dev/null and b/sub-operation-service/src/assets/images/warehouseLogistics/goods.png differ diff --git a/sub-operation-service/src/assets/images/warehouseLogistics/shipper.png b/sub-operation-service/src/assets/images/warehouseLogistics/shipper.png new file mode 100644 index 0000000..4c83219 Binary files /dev/null and b/sub-operation-service/src/assets/images/warehouseLogistics/shipper.png differ diff --git a/sub-operation-service/src/views/shoppingCarts/components/leftMenu.vue b/sub-operation-service/src/views/shoppingCarts/components/leftMenu.vue index 3e655c1..cab4b07 100644 --- a/sub-operation-service/src/views/shoppingCarts/components/leftMenu.vue +++ b/sub-operation-service/src/views/shoppingCarts/components/leftMenu.vue @@ -2,7 +2,7 @@
- +
- +
@@ -75,15 +138,44 @@ import { logisticDetail } from '@/apis/warehouseLogistics.js'; const route = useRoute(); const router = useRouter(); +import img1 from './images/big-xiangshi.png'; const state = reactive({ query: {}, - data: {}, + data: { + imageUrl: img1, + typeId: 1, + typeName: '普通仓储', + title: '长途大车', + operationUnit: '昌盛伟业运输有限公司 ', + pricingUnit: '元/㎡·月', + storageArea: '8,600㎡', + usableArea: '2,300㎡', + location: '孟定镇中缅大道8号', + price: '￥12元/㎡/月', + contacts: '张强', + contactNumber: '13356846589', + serviceTimes: '206次', + }, + carInfor: { + title: '长途大车', + licensePlate: '云AL6AB7', + conductor: '15m', + vehicleNature: '物流公司', + vehicleModel: '厢式', + maximumPayload: '1000吨', + freeTime: '2025.05.05', + price: '￥20元/吨/公里', + }, }); +const dialogVisible = ref(false); +const reservation = () => { + dialogVisible.value = true; +}; + const toBack = (level) => { router.go(level); }; - const queryDetail = () => { logisticDetail(state.query.id).then((res) => { if (res.code === 200) { @@ -97,10 +189,15 @@ const queryDetail = () => { onMounted(() => { state.query.id = route.query.id; - queryDetail(); + // queryDetail(); }); diff --git a/sub-operation-service/src/views/warehouseLogistics/logistics/images/big-xiangshi.png b/sub-operation-service/src/views/warehouseLogistics/logistics/images/big-xiangshi.png new file mode 100644 index 0000000..06f7afc Binary files /dev/null and b/sub-operation-service/src/views/warehouseLogistics/logistics/images/big-xiangshi.png differ diff --git a/sub-operation-service/src/views/warehouseLogistics/logistics/images/car1.png b/sub-operation-service/src/views/warehouseLogistics/logistics/images/car1.png new file mode 100644 index 0000000..1019223 Binary files /dev/null and b/sub-operation-service/src/views/warehouseLogistics/logistics/images/car1.png differ diff --git a/sub-operation-service/src/views/warehouseLogistics/logistics/images/car2.png b/sub-operation-service/src/views/warehouseLogistics/logistics/images/car2.png new file mode 100644 index 0000000..5c65181 Binary files /dev/null and b/sub-operation-service/src/views/warehouseLogistics/logistics/images/car2.png differ diff --git a/sub-operation-service/src/views/warehouseLogistics/logistics/images/car3.png b/sub-operation-service/src/views/warehouseLogistics/logistics/images/car3.png new file mode 100644 index 0000000..351f577 Binary files /dev/null and b/sub-operation-service/src/views/warehouseLogistics/logistics/images/car3.png differ diff --git a/sub-operation-service/src/views/warehouseLogistics/logistics/images/gaolan.png b/sub-operation-service/src/views/warehouseLogistics/logistics/images/gaolan.png new file mode 100644 index 0000000..4fd34c2 Binary files /dev/null and b/sub-operation-service/src/views/warehouseLogistics/logistics/images/gaolan.png differ diff --git a/sub-operation-service/src/views/warehouseLogistics/logistics/images/xiangshi.png b/sub-operation-service/src/views/warehouseLogistics/logistics/images/xiangshi.png new file mode 100644 index 0000000..7ad276c Binary files /dev/null and b/sub-operation-service/src/views/warehouseLogistics/logistics/images/xiangshi.png differ diff --git a/sub-operation-service/src/views/warehouseLogistics/logistics/index.vue b/sub-operation-service/src/views/warehouseLogistics/logistics/index.vue index 97c8cc4..1e97f4a 100644 --- a/sub-operation-service/src/views/warehouseLogistics/logistics/index.vue +++ b/sub-operation-service/src/views/warehouseLogistics/logistics/index.vue @@ -3,12 +3,7 @@
@@ -120,74 +95,48 @@ import Common from '../components/common.vue'; import { useGetCommonData } from '@/store/modules/common.js'; import { storeToRefs } from 'pinia'; import { ElMessage } from 'element-plus'; +import { getRegion } from '@/apis/common'; const store = useGetCommonData(); const { data } = storeToRefs(store); - const route = useRoute(); const router = useRouter(); -const tab0 = reactive(['物流服务', '物流需求']); -const tab1 = reactive(['全部', '物流公司', '个人']); -const tab2 = reactive(['全部', '11米7', '13米', '13米7', '15米']); -const tab3 = reactive(['全部', '厢式', '平板', '高栏', '飞翼', '开顶']); +const tab0 = reactive(['选择位置']); const currentTab0 = ref(0); -const currentTab1 = ref(0); -const currentTab2 = ref(0); -const currentTab3 = ref(0); +const formSize = 'large'; + +import img1 from './images/xiangshi.png'; +import img2 from './images/gaolan.png'; const state = reactive({ menus: warehouseLogisticsRoutes[0].children, query: { current: {}, + selectedAddress: [], + detailAddress: '', }, data: [ { - imageUrl: '/storage1.jpg', - title: '果蔬保鲜仓储', - description: '绿鲜蔬选果蔬仓储中心 ', - location: '临沧市-耿马县', - price: '600.0', - rank: '1', + imageUrl: img1, + title: '长途大车', + licensePlate: '云AL6AB7', + conductor: '15m', + vehicleNature: '物流公司', + vehicleModel: '厢式', + maximumPayload: '1000吨', + freeTime: '2025.05.05', + price: '￥20元/吨/公里', }, { - imageUrl: '/storage2.jpg', - title: '果蔬保鲜仓储', - description: '绿鲜蔬选果蔬仓储中心', - location: '临沧市-耿马县', - price: '600.0', - rank: '2', - }, - { - imageUrl: '/storage3.jpg', - title: '果蔬保鲜仓储', - description: '绿鲜蔬选果蔬仓储中心 ', - location: '临沧市-耿马县', - price: '600.0', - rank: '3', - }, - { - imageUrl: '/storage3.jpg', - title: '果蔬保鲜仓储', - description: '绿鲜蔬选果蔬仓储中心 ', - location: '临沧市-耿马县', - price: '600.0', - rank: '', - }, - { - imageUrl: '/storage3.jpg', - title: '果蔬保鲜仓储', - description: '绿鲜蔬选果蔬仓储中心 ', - location: '临沧市-耿马县', - price: '600.0', - rank: '', - }, - { - imageUrl: '/storage3.jpg', - title: '果蔬保鲜仓储', - description: '绿鲜蔬选果蔬仓储中心 ', - location: '临沧市-耿马县', - price: '600.0', - rank: '', + imageUrl: img2, + title: '长途大车', + licensePlate: '云AL5B15', + conductor: '13m', + vehicleNature: '个人', + vehicleModel: '高栏', + maximumPayload: '800吨', + freeTime: '2025.05.08', + price: '￥20元/吨/公里', }, ], }); @@ -200,13 +149,7 @@ const paginations = reactive({ const dialogFormVisible = ref(false); const formLabelWidth = ref('120px'); - -onMounted(() => { - getWarehouseList('1'); -}); - const currentTab = ref(0); - const currentChange = (current) => { paginations.page = current; getWarehouseList(currentTab.value + 1); @@ -279,6 +222,30 @@ const priceConfirm = () => { } }); }; + +// 级联选择器配置 +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); + } +}; + +onMounted(() => { + // getWarehouseList('1'); + getArea(); +}); diff --git a/sub-operation-service/src/views/warehouseLogistics/logistics/shipping.vue b/sub-operation-service/src/views/warehouseLogistics/logistics/shipping.vue index 0b8f2d2..dcef41a 100644 --- a/sub-operation-service/src/views/warehouseLogistics/logistics/shipping.vue +++ b/sub-operation-service/src/views/warehouseLogistics/logistics/shipping.vue @@ -2,72 +2,155 @@
@@ -78,6 +161,8 @@ import { getAssetsFile } from '@/utils'; import { useRoute, useRouter } from 'vue-router'; import Common from '../components/common.vue'; import { logisticDetail } from '@/apis/warehouseLogistics.js'; +import { ElMessage } from 'element-plus'; +import { getRegion } from '@/apis/common'; const route = useRoute(); const router = useRouter(); @@ -87,7 +172,226 @@ const state = reactive({ data: {}, }); -const application = () => { +const unifiedWidth = '300px'; +const formSize = 'large'; +const formRef = ref(null); +const formInline = reactive({ + shipperName: '', //发货人 + shipperPhone: '', //联系电话 + selectedAddress: [], //选中的区域（编码数组） + detailAddress: '', //详细地址 + + consigneeName: '', //收货人姓名 + consigneePhone: '', //收货人电话 + consigneeArea: '', //收货人区域（编码数组） + consigneeAddress: '', //收货人详细地址 + + goodsName: '', //货物名称 + goodsType: '', //货物类型 + goodsWeight: '', //货物重量 + goodsVolume: '', //货物体积 + goodsQuantity: '', //货物数量 + goodsHeight: '', //货物高度 + goodsLength: '', //货物长度 +}); +const dialogRules = reactive({ + // 发货人信息 + shipperName: [ + { required: true, message: '请输入发货人姓名', trigger: 'blur' }, + { min: 2, max: 20, message: '姓名长度在2到20个字符', trigger: 'blur' }, + ], + shipperPhone: [ + { required: true, message: '请输入发货人电话', trigger: 'blur' }, + { + pattern: /^1[3-9]\d{9}$|^0\d{2,3}-?\d{7,8}$/, + message: '请输入正确的手机号或固话（如010-12345678）', + trigger: 'blur', + }, + ], + + // 发货地址（级联选择器+详细地址） + selectedAddress: [ + { + required: true, + validator: (_, value, callback) => { + if (!value || value.length !== 3) { + callback(new Error('请选择完整的省市区')); + } else { + callback(); + } + }, + trigger: 'change', + }, + ], + detailAddress: [ + { required: true, message: '请输入详细地址', trigger: 'blur' }, + { min: 3, max: 100, message: '地址长度在3到100个字符', trigger: 'blur' }, + ], + + // 收货人信息 + consigneeName: [ + { required: true, message: '请输入收货人姓名', trigger: 'blur' }, + { min: 2, max: 20, message: '姓名长度在2到20个字符', trigger: 'blur' }, + ], + consigneePhone: [ + { required: true, message: '请输入收货人电话', trigger: 'blur' }, + { + pattern: /^1[3-9]\d{9}$|^0\d{2,3}-?\d{7,8}$/, + message: '请输入正确的手机号或固话（如010-12345678）', + trigger: 'blur', + }, + ], + + // 收货地址（级联选择器+详细地址） + consigneeArea: [ + { + required: true, + validator: (_, value, callback) => { + if (!value || value.length !== 3) { + callback(new Error('请选择完整的省市区')); + } else { + callback(); + } + }, + trigger: 'change', + }, + ], + consigneeAddress: [ + { required: true, message: '请输入详细地址', trigger: 'blur' }, + { min: 3, max: 100, message: '地址长度在3到100个字符', trigger: 'blur' }, + ], + + // 货物信息 + goodsName: [ + { required: true, message: '请输入货物名称', trigger: 'blur' }, + { min: 2, max: 50, message: '名称长度在2到50个字符', trigger: 'blur' }, + ], + goodsType: [{ required: true, message: '请选择货物类型', trigger: 'change' }], + goodsWeight: [ + { + required: true, + validator: (_, value, callback) => { + if (!value) { + callback(new Error('请输入货物重量')); + } else if (!/^\d+(\.\d{1,2})?$/.test(value)) { + callback(new Error('请输入有效数字（最多两位小数）')); + } else if (Number(value) <= 0) { + callback(new Error('重量必须大于0')); + } else { + callback(); + } + }, + trigger: 'blur', + }, + ], + goodsVolume: [ + { + required: true, + validator: (_, value, callback) => { + if (!value) { + callback(new Error('请输入货物体积')); + } else if (value && !/^\d+(\.\d{1,2})?$/.test(value)) { + callback(new Error('请输入有效数字（最多两位小数）')); + } else { + callback(); + } + }, + trigger: 'blur', + }, + ], + goodsQuantity: [ + { + required: true, + validator: (_, value, callback) => { + if (!value) { + callback(new Error('请输入货物数量')); + } else if (!/^\d+$/.test(value)) { + callback(new Error('请输入正整数')); + } else if (Number(value) <= 0) { + callback(new Error('数量必须大于0')); + } else { + callback(); + } + }, + trigger: 'blur', + }, + ], + goodsHeight: [ + { + required: true, + validator: (_, value, callback) => { + if (!value) { + callback(new Error('请输入货物高度')); + } else if (value && !/^\d+(\.\d{1,2})?$/.test(value)) { + callback(new Error('请输入有效数字（最多两位小数）')); + } else if (value && Number(value) <= 0) { + callback(new Error('高度必须大于0')); + } else { + callback(); + } + }, + trigger: 'blur', + }, + ], + goodsLength: [ + { + required: true, + validator: (_, value, callback) => { + if (!value) { + callback(new Error('请输入货物长度')); + } else if (value && !/^\d+(\.\d{1,2})?$/.test(value)) { + callback(new Error('请输入有效数字（最多两位小数）')); + } else if (value && Number(value) <= 0) { + callback(new Error('长度必须大于0')); + } else { + callback(); + } + }, + trigger: 'blur', + }, + ], +}); +const resetForm = ref({ ...formInline }); +// 级联选择器配置 +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 goodsList = ref([ + { + id: 1, + name: '普通货物', + }, + { + id: 2, + name: '特殊货物', + }, + { + id: 3, + name: '冷藏货物', + }, +]); + +const application = async () => { + // await formRef.value.validate(); + // ElMessage.success('提交成功'); + // console.log(formInline); + // 发起请求 + + // 请求返回成功后跳转（资源分配）页面 router.push({ name: 'logistics-match', }); @@ -111,9 +415,15 @@ const queryDetail = () => { onMounted(() => { state.query.id = route.query.id; // queryDetail(); + getArea(); }); diff --git a/sub-operation-service/src/views/warehouseLogistics/warehouse/allocation.vue b/sub-operation-service/src/views/warehouseLogistics/warehouse/allocation.vue index 1f440a8..bf0dcdb 100644 --- a/sub-operation-service/src/views/warehouseLogistics/warehouse/allocation.vue +++ b/sub-operation-service/src/views/warehouseLogistics/warehouse/allocation.vue @@ -2,74 +2,86 @@
@@ -84,28 +96,105 @@ import { warehouseDetail } from '@/apis/warehouseLogistics.js'; const route = useRoute(); const router = useRouter(); -const state = reactive({ - query: {}, - data: {}, -}); +const tab1 = reactive(['全部', '距离最近', '价格最便宜']); +const currentTab1 = ref(0); +const handleTab1Click = (item, index) => { + currentTab1.value = index; +}; + +import img1 from './../images/普通仓储/1.jpg'; +import img2 from './../images/普通仓储/2.jpg'; +import img3 from './../images/恒温仓储/1.jpg'; +import img4 from './../images/冷库/4.jpg'; +import img5 from './../images/气调仓储/1.jpg'; +const allData = ref([ + { + imageUrl: img1, + typeId: 1, + typeName: '普通仓储', + title: '孟定边贸仓储中心', + operationUnit: '耿马宏泰物流有限公司，耿马宏泰物流有限公司 ', + pricingUnit: '元/㎡·月', + storageArea: '8,600㎡', + usableArea: '2,300㎡', + location: '孟定镇中缅大道8号', + price: '￥12元/㎡/月', + rank: '1', + }, + { + imageUrl: img2, + typeId: 2, + typeName: '普通仓储', + title: '绿色食品园区集散仓', + operationUnit: '耿马县供销集团', + pricingUnit: '元/吨·天', + storageArea: '12,000㎡', + usableArea: '4,500㎡', + location: '绿色食品园区二期', + price: '￥1.5元/吨/月', + rank: '2', + }, + { + imageUrl: img3, + typeId: 3, + typeName: '恒温仓储', + title: '蔗糖储备恒温库', + operationUnit: '耿马糖业有限公司', + pricingUnit: '元/托·月', + storageArea: '3,200㎡', + usableArea: '800㎡', + location: '耿马糖厂东侧', + price: '￥28元/托/月', + rank: '3', + }, + { + imageUrl: img4, + typeId: 4, + typeName: '冷库', + title: '孟定果蔬冷链中心', + operationUnit: '临沧边境合作区管委会 ', + pricingUnit: '元/板·天', + storageArea: '5,000㎡', + usableArea: '1,200㎡', + location: '孟定海关监管区旁', + price: '￥2.8元/板/月', + rank: '4', + }, + { + imageUrl: img5, + typeId: 5, + typeName: '气调仓储', + title: '高原蔬菜气调保鲜库', + operationUnit: '耿马高原农业合作社 ', + pricingUnit: '元/吨·月', + storageArea: '1,800㎡', + usableArea: '300㎡', + location: '勐撒镇蔬菜基地', + price: '￥45元/吨/月', + rank: '5', + }, +]); const toBack = (level) => { router.go(level); }; +const param = ref({ + id: '100', +}); const queryDetail = () => { - warehouseDetail(state.query.id).then((res) => { + warehouseDetail(param).then((res) => { if (res.code === 200) { - state.data = res.data; - for (let i in state.data) { - state.data[i].tag = state.data[i].tags.split(','); + allData.value = res.data; + for (let i in allData.value) { + allData.value[i].tag = allData.value[i].tags.split(','); } } }); }; onMounted(() => { - state.query.id = route.query.id; + param.value.id = route.query.id ?? '100'; // queryDetail(); }); @@ -116,238 +205,135 @@ onMounted(() => { font-weight: bold; cursor: pointer; } -/* 根据需要添加样式，这里仅提供基础样式 */ -// 基础颜色配置 -$primary-color: #25bf82; // 主色调 -$text-dark: #25bf82; // 深色文字 -$text-regular: #606266; // 常规文字 -$border-color: #dcdfe6; // 边框颜色 -// 弹窗整体样式 -:deep(.custom-inquiry-dialog) { - border-radius: 8px; - box-shadow: 0 4px 12px rgba(0, 0, 0, 0.15); - - .el-dialog__header { - padding: 20px; - border-bottom: 1px solid #f2f6fc; - .el-dialog__title { - font-size: 18px; - color: $text-dark; - font-weight: 600; - } - } - - .el-dialog__body { - padding: 20px 28px; - } - - .el-form-item__label { - color: $text-regular; - font-size: 14px; - padding-bottom: 6px; - } -} - -.info-section { - padding: 0px 50px; - margin-bottom: 24px; - .info-item { - margin-bottom: 12px; - .label { - color: $text-regular; - margin-right: 8px; - font-size: 20px; - } - .value { - color: $text-dark; - font-weight: 500; - font-size: 20px; - } - } -} - -// 输入框样式覆盖 -:deep(.el-input) { - .el-input__inner { - height: 40px; - line-height: 40px; - border-radius: 4px; - &:focus { - border-color: $primary-color; - } - } - .el-input__suffix { - color: $text-regular; - right: 12px; - } -} - -// 下拉菜单样式 -:deep(.custom-select-dropdown) { - .el-select-dropdown__item { - color: $text-regular; - &.selected { - color: $primary-color; - } - } -} - -// 按钮组样式 -.dialog-footer { - text-align: right; - .el-button { - padding: 10px 24px; - border-radius: 4px; - font-size: 14px; - } - .cancel-btn { - color: $text-regular; - &:hover { - color: $primary-color; - border-color: $primary-color; - } - } - .submit-btn { - color: #fff; - background: $primary-color; - &:hover { - background: mix($primary-color, #fff, 85%); - } - } -} -.bac { - background: rgba(37, 191, 130, 0.1); - border: 1px solid rgba(37, 191, 130, 0.5); - border-radius: 8px; - padding: 2px 5px; -} - -.image-box { - width: 300px; - height: 300px; -} - -.text-gray-500 { - height: 300px; - display: flex; - flex-direction: column; - justify-content: space-between; - align-items: start !important; - font-size: 20px !important; - color: #000000 !important; - padding-top: 30px; -} - -.text-gray-600 { - font-size: 20px; - color: #000000 !important; -} - -.flex-1 { - width: 40%; - height: 300px; - flex-direction: column; - display: flex; - align-items: flex-start; - justify-content: space-evenly; -} - -.max-w-7xl { - max-width: 80rem; +.storage-content { + padding: 20px 20px 0 20px; + margin-top: 20px; + border-radius: 14px; background-color: #fff; - border-radius: 10px; - .storage-image { - width: 100%; +} +.content-custom-title { + font-size: 20px; + font-weight: bold; + text-align: left; + margin-bottom: 10px; +} + +.tabs { + //height: 160px; + line-height: 50px; + display: flex; + flex-direction: column; + font-size: 18px; + align-items: flex-start; + justify-content: space-between; + margin-bottom: 10px; +} +.tabs0 { + padding: 0; +} +.tab { + // height: 100px; + width: 850px; + display: flex; + align-items: center; + justify-content: flex-start; + overflow-x: auto; + overflow: auto; /* 启用滚动 */ + white-space: nowrap; /* 强制单行显示 */ + -ms-overflow-style: none; /* IE/Edge 兼容 */ + scrollbar-width: none; /* 隐藏滚动条 */ + .tab_list { + color: #999999; + font-size: 20px; + font-weight: 400; + } + .tab_list_li { + margin-left: 40px; + color: #666; + font-size: 18px; + font-weight: 400; + transition: color 0.3s ease; + } + .tab_list_li:first-child { + margin-left: 0px; + } + .tab_list_li.active { + color: #25bf82; + font-weight: bold; } } - -.mx-auto { - margin-left: auto; - margin-right: auto; +.cursor { + cursor: pointer; } - -.p-4 { - padding: 1rem; - padding-bottom: 0; -} - -.flex { - display: flex; -} - -.items-center { - align-items: center; -} - -.mb-4 { - margin-bottom: 1rem; -} - -.mr-4 { - margin-right: 1rem; -} - -.text-green-500 { +.active { color: #25bf82; + font-weight: bold; } -.text-lg { - font-size: 1.125rem; +.resource-item { + width: 100%; + min-height: 300px; + display: flex; + flex-direction: column; + margin-bottom: 20px; text-align: left; -} - -.font-bold { - font-weight: 700; -} - -.rounded-lg { - border-radius: 0.5rem; - background-color: #f5f5f5; -} - -.shadow { - box-shadow: - 0 4px 6px -1px rgba(0, 0, 0, 0.1), - 0 2px 4px -1px rgba(0, 0, 0, 0.06); -} - -.text-xl { - font-size: 24px; -} - -.text-gray-600 { - color: #757575; -} - -.text-gray-700 { - color: #000000; - font-size: 18px; -} - -.text-sm { - font-size: 0.875rem; -} - -.space-x-2 { - gap: 0.5rem; -} - -.bg-green-500 { - background-color: #4caf50; -} - -.py-2 { - padding-top: 0.5rem; - padding-bottom: 0.5rem; -} - -.px-4 { - padding-left: 1rem; - padding-right: 1rem; -} - -.mt-4 { - margin-top: 1rem; + .resource-item-img { + width: 100%; + height: 250px; + border-radius: 14px; + position: relative; + overflow: hidden; + img { + position: absolute; + top: 50%; + left: 50%; + transform: translate(-50%, -50%); + min-width: 100%; + min-height: 100%; + object-fit: cover; + } + } + .center-title { + color: #666; + font-size: 18px; + font-weight: bold; + text-align: left; + margin-top: 10px; + margin-bottom: 10px; + .highlight { + color: #25bf82; + } + } + .resource-custom-tag { + display: inline-block; + margin-right: 10px; + margin-bottom: 10px; + padding: 4px 6px; + background: rgba(37, 191, 130, 0.1); + border: 1px solid rgba(37, 191, 130, 0.5); + border-radius: 8px; + font-size: 16px; + font-weight: bold; + color: #25bf82; + } + .center-text { + font-size: 16px; + display: flex; + margin-bottom: 10px; + .center-text-lable { + color: #666; + width: 86px; + line-height: 20px; + } + .flex-1 { + flex: 1; + line-height: 20px; + text-align: left; + overflow: hidden; + white-space: nowrap; + text-overflow: ellipsis; + } + } } diff --git a/sub-operation-service/src/views/warehouseLogistics/warehouse/application.vue b/sub-operation-service/src/views/warehouseLogistics/warehouse/application.vue index 123db85..948d0fb 100644 --- a/sub-operation-service/src/views/warehouseLogistics/warehouse/application.vue +++ b/sub-operation-service/src/views/warehouseLogistics/warehouse/application.vue @@ -120,6 +120,119 @@ :style="{ width: unifiedWidth }" > + +
分拣包装需要
+ + + 需要 + 不需要 + + +
+ + + + + + + + + + + + + + + + + + + + + + + + + + + + +
+ +
附加服务
+ + + + + + + + + + + + +
企业信息
+ + + + + + + + + + + +
提交 @@ -146,7 +259,6 @@ const state = reactive({ data: {}, }); -const dialogVisible = ref(false); const unifiedWidth = '300px'; const formSize = 'large'; const formRef = ref(null); @@ -164,6 +276,22 @@ const formInline = reactive({ goodsWeight: '', //货物重量 temperature: '', //温度要求 detailedDescription: '', //详情描述 + + sortingService: 2, //分拣包装服务 + sortingType: '', //分拣类型 + sortingStandards: '', //分拣标准 + packagingType: '', //包装类型 + packagingSpecifications: '', //包装规格 + dailySortingVolume: '', //日分拣量 + otherRequirements: '', //其他需求 + + additionalServicesList: [], //附加服务 + otherServices: '', //其他服务 + + enterpriseName: '', //企业名称 + contacts: '', //联系人 + contactNumber: '', //联系电话 + email: '', //电子邮箱 }); const resetForm = ref({ ...formInline }); const dialogRules = reactive({ @@ -251,6 +379,117 @@ const dialogRules = reactive({ { pattern: /^\d+(\.\d{1,2})?$/, message: '请输入有效数字（最多两位小数）', trigger: 'blur' }, ], detailedDescription: [{ required: true, message: '请输入详情描述', trigger: 'blur' }], + sortingType: [ + { + required: true, + validator: (rule, value, callback) => { + if (formInline.sortingService === 1 && !value) { + callback(new Error('请选择分拣类型')); + } else { + callback(); + } + }, + trigger: 'change', + }, + ], + + sortingStandards: [ + { + required: true, + validator: (rule, value, callback) => { + if (formInline.sortingService === 1 && !value) { + callback(new Error('请选择分拣标准')); + } else { + callback(); + } + }, + trigger: 'change', + }, + ], + + packagingType: [ + { + required: true, + validator: (rule, value, callback) => { + if (formInline.sortingService === 1 && !value) { + callback(new Error('请选择包装类型')); + } else { + callback(); + } + }, + trigger: 'change', + }, + ], + + packagingSpecifications: [ + { + required: true, + validator: (rule, value, callback) => { + if (formInline.sortingService === 1 && !value) { + callback(new Error('请输入包装规格')); + } else if (formInline.sortingService === 1 && !/^\d+(\.\d{1,2})?$/.test(value)) { + callback(new Error('请输入有效数字（最多两位小数）')); + } else { + callback(); + } + }, + trigger: 'blur', + }, + ], + + dailySortingVolume: [ + { + required: true, + validator: (rule, value, callback) => { + if (formInline.sortingService === 1 && !value) { + callback(new Error('请输入日分拣量')); + } else if (formInline.sortingService === 1 && !/^\d+(\.\d{1,2})?$/.test(value)) { + callback(new Error('请输入有效数字（最多两位小数）')); + } else { + callback(); + } + }, + trigger: 'blur', + }, + ], + // 其他需求 + otherRequirements: [ + { + required: true, + validator: (rule, value, callback) => { + if (formInline.sortingService === 1 && !value) { + callback(new Error('请输入其他需求')); + } else { + callback(); + } + }, + trigger: 'blur', + }, + ], + + // 附加服务部分 + otherServices: [{ required: false, message: '请输入其他服务', trigger: 'blur' }], + + // 联系信息部分 + enterpriseName: [ + { required: true, message: '请输入企业名称', trigger: 'blur' }, + { min: 2, max: 50, message: '长度在2到50个字符', trigger: 'blur' }, + ], + + contacts: [ + { required: true, message: '请输入联系人', trigger: 'blur' }, + { min: 2, max: 20, message: '长度在2到20个字符', trigger: 'blur' }, + ], + + contactNumber: [ + { required: true, message: '请输入联系电话', trigger: 'blur' }, + { pattern: /^1[3-9]\d{9}$/, message: '请输入正确的手机号码', trigger: 'blur' }, + ], + + email: [ + { required: true, message: '请输入电子邮箱', trigger: 'blur' }, + { type: 'email', message: '请输入有效的邮箱地址', trigger: ['blur', 'change'] }, + ], }); // 禁用开始日期的逻辑（不能晚于已选的结束日期） const disableStartDate = (time) => { @@ -323,6 +562,28 @@ const goodsList = ref([ name: '冷藏货物', }, ]); +const sortingTypeList = ref([ + { id: 1, name: '分拣类型一' }, + { id: 2, name: '分拣类型二' }, +]); +const sortingStandardList = ref([ + { id: 1, name: '分拣标准一' }, + { id: 2, name: '分拣标准二' }, +]); +const packagingTypesList = ref([ + { id: 1, name: '包装类型一' }, + { id: 2, name: '包装类型二' }, +]); +const sortingServiceChange = (val) => { + if (val === 2) { + formInline.sortingType = ''; + formInline.sortingStandards = ''; + formInline.packagingType = ''; + formInline.packagingSpecifications = ''; + formInline.dailySortingVolume = ''; + formInline.otherRequirements = ''; + } +}; // 级联选择器配置 const cascaderProps = ref({ @@ -342,22 +603,28 @@ const getArea = async () => { ElMessage.error(res.message); } }; -const reservation = () => { - dialogVisible.value = true; - Object.assign(formInline, resetForm.value); -}; -const onSubmit = async () => { - await formRef.value.validate(); - ElMessage.success('提交成功'); - console.log(formInline); - dialogVisible.value = false; -}; const toBack = (level) => { router.go(level); }; -const application = () => { +const application = async () => { + // await formRef.value.validate(); + // ElMessage.success('提交成功'); + // console.log(formInline); + // if (formInline.sortingService === 2) { + // formInline.sortingType = ''; + // formInline.sortingStandards = ''; + // formInline.packagingType = ''; + // formInline.packagingSpecifications = ''; + // formInline.dailySortingVolume = ''; + // formInline.otherRequirements = ''; + // } + // 发起请求 + + // 请求返回成功后重置表单 + Object.assign(formInline, resetForm.value); + // 请求返回成功后跳转（资源分配）页面 router.push({ name: 'warehouse-allocation', });