1113 lines
26 KiB
Vue
1113 lines
26 KiB
Vue
<template>
|
||
<view class="create-warehouse-container">
|
||
<view class="header">
|
||
<view class="back-btn" @click="goBack">
|
||
<text class="back-icon">←</text>
|
||
</view>
|
||
<text class="title">创建货区</text>
|
||
</view>
|
||
|
||
<!-- 步骤指示器 -->
|
||
<view class="steps">
|
||
<view class="step" :class="{ 'active': currentStep >= 1, 'completed': currentStep > 1 }">
|
||
<view class="step-number">1</view>
|
||
<text class="step-text">一级货区</text>
|
||
</view>
|
||
<view class="step-line" :class="{ 'active': currentStep > 1 }"></view>
|
||
<view class="step" :class="{ 'active': currentStep >= 2, 'completed': currentStep > 2 }">
|
||
<view class="step-number">2</view>
|
||
<text class="step-text">二级货区</text>
|
||
</view>
|
||
<view class="step-line" :class="{ 'active': currentStep > 2 }"></view>
|
||
<view class="step" :class="{ 'active': currentStep >= 3 }">
|
||
<view class="step-number">3</view>
|
||
<text class="step-text">三级货区</text>
|
||
</view>
|
||
</view>
|
||
|
||
<!-- 一级货区表单 -->
|
||
<view v-if="currentStep === 1" class="form-container">
|
||
<view class="form-title">添加一级货区信息</view>
|
||
|
||
<view class="form-item">
|
||
<text class="label required">名称</text>
|
||
<view class="name-unit-container">
|
||
<input class="input with-unit" v-model="firstLevelForm.name" placeholder="请输入名称" />
|
||
<view class="unit-selector" @click="showFirstLevelUnitDropdown = !showFirstLevelUnitDropdown">
|
||
<text class="selected-unit">{{ firstLevelForm.unit || '库' }}</text>
|
||
<text class="dropdown-icon">▼</text>
|
||
</view>
|
||
<view v-if="showFirstLevelUnitDropdown" class="unit-dropdown">
|
||
<view v-for="unit in unitOptions" :key="unit" class="unit-option"
|
||
@click="selectFirstLevelUnit(unit)">
|
||
{{ unit }}
|
||
</view>
|
||
</view>
|
||
</view>
|
||
</view>
|
||
|
||
<view class="form-item">
|
||
<text class="label required">货区数量</text>
|
||
<input class="input" v-model="firstLevelForm.sheQuantityMax" type="number"
|
||
placeholder="输入数量(1-255，不得以0开头)" />
|
||
</view>
|
||
|
||
<view class="form-item">
|
||
<text class="label required">货区编码</text>
|
||
<input class="input" v-model="firstLevelForm.code" placeholder="格式示例: AA/aa/A1/a1/1A/1a,不能以0开头" />
|
||
</view>
|
||
|
||
<view class="form-item">
|
||
<text class="label">货区地址</text>
|
||
<input class="input" v-model="firstLevelForm.address" placeholder="请输入货区地址，例如 贵阳市和平区XXX街XX号" />
|
||
</view>
|
||
|
||
<view class="form-item">
|
||
<text class="label">管理员</text>
|
||
<input class="input" v-model="firstLevelForm.manager" placeholder="请输入管理员,不得超过8位" />
|
||
</view>
|
||
|
||
<view class="form-item">
|
||
<text class="label">备注</text>
|
||
<input class="input" v-model="firstLevelForm.remark" placeholder="请输入备注" />
|
||
</view>
|
||
|
||
<view class="form-item">
|
||
<text class="label required">运费模板</text>
|
||
<view class="name-unit-container">
|
||
<picker class="picker-block" mode="selector" :range="logisticsTemplates" range-key="templateName"
|
||
@change="onTemplatePickerChange">
|
||
<input class="input" :value="selectedTemplateName" placeholder="请选择运费模板" readonly />
|
||
</picker>
|
||
</view>
|
||
</view>
|
||
|
||
<button class="btn next-btn" @click="createFirstLevel">下一步</button>
|
||
</view>
|
||
|
||
<!-- 二级货区表单 -->
|
||
<view v-if="currentStep === 2" class="form-container">
|
||
<view class="form-title">创建二级货区信息</view>
|
||
|
||
<view class="form-item">
|
||
<text class="label">所属一级货区</text>
|
||
<view class="input selected-value">{{ firstLevelForm.name || createdFirstLevel.name }}</view>
|
||
</view>
|
||
|
||
<view class="form-item">
|
||
<text class="label required">名称</text>
|
||
<view class="name-unit-container">
|
||
<input class="input with-unit" v-model="secondLevelForm.name" placeholder="请输入货区名称,不得超过10位" />
|
||
<view class="unit-selector" @click="showSecondLevelUnitDropdown = !showSecondLevelUnitDropdown">
|
||
<text class="selected-unit">{{ secondLevelForm.unit || '区' }}</text>
|
||
<text class="dropdown-icon">▼</text>
|
||
</view>
|
||
<view v-if="showSecondLevelUnitDropdown" class="unit-dropdown">
|
||
<view v-for="unit in unitOptions" :key="unit" class="unit-option"
|
||
@click="selectSecondLevelUnit(unit)">
|
||
{{ unit }}
|
||
</view>
|
||
</view>
|
||
</view>
|
||
</view>
|
||
|
||
<view class="form-item">
|
||
<text class="label required">货区编码</text>
|
||
<input class="input" v-model="secondLevelForm.code" placeholder="格式示例: AA/aa/A1/a1/1A/1a,不能以0开头" />
|
||
</view>
|
||
|
||
<view class="btn-group">
|
||
<button class="btn back-step-btn" @click="goToStep(1)">上一步</button>
|
||
<button class="btn next-btn" @click="createSecondLevel">下一步</button>
|
||
</view>
|
||
</view>
|
||
|
||
<!-- 三级货区表单 -->
|
||
<view v-if="currentStep === 3" class="form-container">
|
||
<view class="form-title">创建三级货区信息</view>
|
||
|
||
<view class="form-item">
|
||
<text class="label">所属二级货区</text>
|
||
<view class="input selected-value">{{ secondLevelForm.name || createdSecondLevel.name }}</view>
|
||
</view>
|
||
|
||
<view class="form-item">
|
||
<text class="label">名称</text>
|
||
<view class="name-unit-container">
|
||
<input class="input with-unit" v-model="thirdLevelForm.name" placeholder="请输入名称" />
|
||
<view class="unit-selector" @click="showThirdLevelUnitDropdown = !showThirdLevelUnitDropdown">
|
||
<text class="selected-unit">{{ thirdLevelForm.unit || '架' }}</text>
|
||
<text class="dropdown-icon">▼</text>
|
||
</view>
|
||
<view v-if="showThirdLevelUnitDropdown" class="unit-dropdown">
|
||
<view v-for="unit in unitOptions" :key="unit" class="unit-option"
|
||
@click="selectThirdLevelUnit(unit)">
|
||
{{ unit }}
|
||
</view>
|
||
</view>
|
||
</view>
|
||
</view>
|
||
|
||
<view class="form-item">
|
||
<text class="label required">货区编码</text>
|
||
<input class="input" v-model="thirdLevelForm.code" placeholder="格式示例: AA/aa/A1/a1/1A/1a,不能以0开头" />
|
||
</view>
|
||
|
||
<view class="btn-group">
|
||
<button class="btn back-step-btn" @click="goToStep(2)">上一步</button>
|
||
<button class="btn complete-btn" @click="createThirdLevel">完成</button>
|
||
</view>
|
||
</view>
|
||
|
||
<!-- 完成页面 -->
|
||
<view v-if="currentStep === 4" class="completion-container">
|
||
<view class="completion-icon">✓</view>
|
||
<text class="completion-title">创建成功</text>
|
||
<text class="completion-message">货区已成功创建</text>
|
||
|
||
<view class="completion-details">
|
||
<view class="completion-item">
|
||
<text class="completion-label">一级货区:</text>
|
||
<text class="completion-value">{{ firstLevelForm.name || createdFirstLevel.name }}</text>
|
||
</view>
|
||
<view class="completion-item">
|
||
<text class="completion-label">二级货区:</text>
|
||
<text class="completion-value">{{ secondLevelForm.name || createdSecondLevel.name }}</text>
|
||
</view>
|
||
<view class="completion-item">
|
||
<text class="completion-label">三级货区:</text>
|
||
<text class="completion-value">{{ thirdLevelForm.name || createdThirdLevel.name }}</text>
|
||
</view>
|
||
</view>
|
||
|
||
<button class="btn home-btn" @click="goToWarehouseList">返回货区列表</button>
|
||
</view>
|
||
</view>
|
||
</template>
|
||
|
||
<script>
|
||
export default {
|
||
data() {
|
||
return {
|
||
currentStep: 1,
|
||
userId: '',
|
||
phoneNumber: '',
|
||
// 单位选项
|
||
unitOptions: ['库', '区', '架', '层', '位'],
|
||
// 下拉框显示状态
|
||
showFirstLevelUnitDropdown: false,
|
||
showSecondLevelUnitDropdown: false,
|
||
showThirdLevelUnitDropdown: false,
|
||
// 新增：模板选择下拉状态与数据
|
||
showTemplateDropdown: false,
|
||
logisticsTemplates: [],
|
||
selectedTemplateId: '',
|
||
selectedTemplateName: '',
|
||
// 一级货区表单
|
||
firstLevelForm: {
|
||
name: '',
|
||
unit: '库',
|
||
sheQuantityMax: '',
|
||
code: '',
|
||
address: '',
|
||
manager: '',
|
||
remark: ''
|
||
},
|
||
// 创建成功后的一级货区信息
|
||
createdFirstLevel: {},
|
||
// 二级货区表单
|
||
secondLevelForm: {
|
||
name: '',
|
||
unit: '区',
|
||
code: ''
|
||
},
|
||
// 创建成功后的二级货区信息
|
||
createdSecondLevel: {},
|
||
// 三级货区表单
|
||
thirdLevelForm: {
|
||
name: '',
|
||
unit: '架',
|
||
code: ''
|
||
},
|
||
// 创建成功后的三级货区信息
|
||
createdThirdLevel: {}
|
||
}
|
||
},
|
||
|
||
onLoad() {
|
||
// 获取用户手机号
|
||
this.phoneNumber = uni.getStorageSync('phoneNumber');
|
||
|
||
if (!this.phoneNumber) {
|
||
uni.showToast({
|
||
title: '登录信息无效，请重新登录',
|
||
icon: 'none'
|
||
});
|
||
|
||
setTimeout(() => {
|
||
uni.redirectTo({
|
||
url: '/pages/login/index'
|
||
});
|
||
}, 1500);
|
||
return;
|
||
}
|
||
// 新增：页面加载后拉取运费模板
|
||
this.fetchLogisticsTemplates();
|
||
},
|
||
|
||
methods: {
|
||
// 返回上一页
|
||
goBack() {
|
||
uni.navigateBack();
|
||
},
|
||
|
||
// 跳转到指定步骤
|
||
goToStep(step) {
|
||
this.currentStep = step;
|
||
},
|
||
|
||
/**
|
||
* 拉取运费模板列表
|
||
* 从后端接口获取当前用户的运费模板，用于创建货区时选择。
|
||
* 如果模板总数为0，提示用户先去创建运费模板。
|
||
*/
|
||
async fetchLogisticsTemplates() {
|
||
try {
|
||
const userId = uni.getStorageSync('userId');
|
||
const [err, res] = await uni.request({
|
||
url: 'https://api.buzhiyushu.cn/zhishu/logistics/xcx/list',
|
||
method: 'GET',
|
||
data: {
|
||
userId
|
||
}
|
||
});
|
||
if (err) {
|
||
console.error('获取运费模板失败:', err);
|
||
uni.showToast({
|
||
title: '获取运费模板失败',
|
||
icon: 'none'
|
||
});
|
||
return;
|
||
}
|
||
const data = res.data || {};
|
||
this.logisticsTemplates = Array.isArray(data.rows) ? data.rows : [];
|
||
if ((data.total || 0) === 0) {
|
||
uni.showToast({
|
||
title: '请先去创建运费模板后再创建货区',
|
||
icon: 'none'
|
||
});
|
||
}
|
||
} catch (e) {
|
||
console.error('获取运费模板异常:', e);
|
||
uni.showToast({
|
||
title: '获取运费模板异常',
|
||
icon: 'none'
|
||
});
|
||
}
|
||
},
|
||
|
||
/**
|
||
* 选择运费模板
|
||
* @param {Object} tpl 运费模板对象
|
||
*/
|
||
selectLogisticsTemplate(tpl) {
|
||
this.selectedTemplateId = tpl.id;
|
||
this.selectedTemplateName = tpl.templateName;
|
||
this.firstLevelForm.templateId = tpl.id;
|
||
this.showTemplateDropdown = false;
|
||
},
|
||
|
||
/**
|
||
* picker选择运费模板事件
|
||
* @param {Object} e 选择事件，e.detail.value为选中索引
|
||
*/
|
||
onTemplatePickerChange(e) {
|
||
const idx = e.detail.value;
|
||
const tpl = this.logisticsTemplates[idx];
|
||
if (!tpl) return;
|
||
this.selectedTemplateId = tpl.id;
|
||
this.selectedTemplateName = tpl.templateName;
|
||
this.firstLevelForm.templateId = tpl.id;
|
||
},
|
||
|
||
// 创建一级货区
|
||
async createFirstLevel() {
|
||
// 表单验证
|
||
if (!this.firstLevelForm.name) {
|
||
uni.showToast({
|
||
title: '请输入货区名称',
|
||
icon: 'none'
|
||
});
|
||
return;
|
||
}
|
||
|
||
// 验证货区数量
|
||
if (!this.firstLevelForm.sheQuantityMax) {
|
||
uni.showToast({
|
||
title: '请输入货区数量',
|
||
icon: 'none'
|
||
});
|
||
return;
|
||
}
|
||
if (!this.firstLevelForm.unit) {
|
||
uni.showToast({
|
||
title: '请输入单位',
|
||
icon: 'none'
|
||
});
|
||
return;
|
||
}
|
||
|
||
// 检查货区数量是否以0开头
|
||
if (this.firstLevelForm.sheQuantityMax.toString().startsWith('0')) {
|
||
uni.showToast({
|
||
title: '货区数量不能以0开头',
|
||
icon: 'none'
|
||
});
|
||
return;
|
||
}
|
||
|
||
// 检查货区数量是否超过255
|
||
if (parseInt(this.firstLevelForm.sheQuantityMax) > 255) {
|
||
uni.showToast({
|
||
title: '货区数量不能超过255',
|
||
icon: 'none'
|
||
});
|
||
return;
|
||
}
|
||
|
||
// 验证货区编码
|
||
if (!this.firstLevelForm.code) {
|
||
uni.showToast({
|
||
title: '请输入货区编码',
|
||
icon: 'none'
|
||
});
|
||
return;
|
||
}
|
||
|
||
// 检查货区编码是否以0开头
|
||
if (this.firstLevelForm.code.startsWith('0')) {
|
||
uni.showToast({
|
||
title: '货区编码不能以0开头',
|
||
icon: 'none'
|
||
});
|
||
return;
|
||
}
|
||
|
||
// 验证货区编码格式
|
||
const codeRegex = /^[A-Za-z0-9]+$/;
|
||
if (!codeRegex.test(this.firstLevelForm.code)) {
|
||
uni.showToast({
|
||
title: '货区编码格式不正确',
|
||
icon: 'none'
|
||
});
|
||
return;
|
||
}
|
||
|
||
// 校验运费模板是否可用并已选择
|
||
if (!this.logisticsTemplates.length) {
|
||
uni.showToast({
|
||
title: '请先去创建运费模板后再创建货区',
|
||
icon: 'none'
|
||
});
|
||
return;
|
||
}
|
||
if (!this.selectedTemplateId) {
|
||
uni.showToast({
|
||
title: '请选择运费模板',
|
||
icon: 'none'
|
||
});
|
||
return;
|
||
}
|
||
|
||
// 显示加载中
|
||
uni.showLoading({
|
||
title: '创建中...'
|
||
});
|
||
|
||
// 发送请求创建一级货区
|
||
try {
|
||
const userId = uni.getStorageSync("userId")
|
||
const [err, response] = await uni.request({
|
||
url: 'https://api.buzhiyushu.cn/depot/depot',
|
||
method: 'POST',
|
||
data: {
|
||
userId: userId,
|
||
phoneNumber: this.phoneNumber,
|
||
unit: this.firstLevelForm.unit,
|
||
name: this.firstLevelForm.name,
|
||
sheQuantityMax: this.firstLevelForm.sheQuantityMax,
|
||
code: this.firstLevelForm.code,
|
||
address: this.firstLevelForm.address,
|
||
manager: this.firstLevelForm.manager,
|
||
remark: this.firstLevelForm.remark,
|
||
templateId: this.selectedTemplateId
|
||
}
|
||
});
|
||
|
||
if (err) {
|
||
uni.hideLoading();
|
||
console.error('创建一级货区失败:', err);
|
||
uni.showToast({
|
||
title: '创建一级货区失败',
|
||
icon: 'none'
|
||
});
|
||
return;
|
||
}
|
||
|
||
if (response.data.code !== 200) {
|
||
uni.hideLoading();
|
||
uni.showToast({
|
||
title: response.data.msg || '创建一级货区失败',
|
||
icon: 'none'
|
||
});
|
||
return;
|
||
}
|
||
|
||
// 创建成功后，调用getDepotId接口获取完整信息
|
||
const [getErr, getResponse] = await uni.request({
|
||
url: 'https://api.buzhiyushu.cn/depot/depot/getDepotId',
|
||
method: 'GET',
|
||
data: {
|
||
userId: userId,
|
||
code: this.firstLevelForm.code
|
||
}
|
||
});
|
||
|
||
uni.hideLoading();
|
||
|
||
if (getErr) {
|
||
console.error('获取一级货区ID失败:', getErr);
|
||
uni.showToast({
|
||
title: '获取一级货区信息失败',
|
||
icon: 'none'
|
||
});
|
||
return;
|
||
}
|
||
|
||
if (getResponse.data.code !== 200 || !getResponse.data.rows || getResponse.data.rows.length ===
|
||
0) {
|
||
console.error('获取一级货区信息失败:', getResponse.data);
|
||
uni.showToast({
|
||
title: '获取一级货区信息失败',
|
||
icon: 'none'
|
||
});
|
||
return;
|
||
}
|
||
|
||
// 保存创建的一级货区信息
|
||
const depotInfo = getResponse.data.rows[0];
|
||
this.createdFirstLevel = {
|
||
id: depotInfo.id,
|
||
name: depotInfo.name
|
||
};
|
||
|
||
console.log('一级货区信息:', this.createdFirstLevel);
|
||
|
||
uni.showToast({
|
||
title: '创建一级货区成功',
|
||
icon: 'success'
|
||
});
|
||
|
||
// 进入下一步
|
||
this.currentStep = 2;
|
||
|
||
} catch (error) {
|
||
uni.hideLoading();
|
||
console.error('创建一级货区异常:', error);
|
||
uni.showToast({
|
||
title: '创建一级货区失败',
|
||
icon: 'none'
|
||
});
|
||
}
|
||
},
|
||
|
||
// 创建二级货区
|
||
async createSecondLevel() {
|
||
// 表单验证
|
||
if (!this.secondLevelForm.name) {
|
||
uni.showToast({
|
||
title: '请输入货区名称',
|
||
icon: 'none'
|
||
});
|
||
return;
|
||
}
|
||
if (!this.secondLevelForm.code) {
|
||
uni.showToast({
|
||
title: '请输入货区编码',
|
||
icon: 'none'
|
||
});
|
||
return;
|
||
}
|
||
|
||
// 检查货区编码是否以0开头
|
||
if (this.secondLevelForm.code.startsWith('0')) {
|
||
uni.showToast({
|
||
title: '货区编码不能以0开头',
|
||
icon: 'none'
|
||
});
|
||
return;
|
||
}
|
||
|
||
// 验证货区编码格式
|
||
const codeRegex = /^[A-Za-z0-9]+$/;
|
||
if (!codeRegex.test(this.secondLevelForm.code)) {
|
||
uni.showToast({
|
||
title: '货区编码格式不正确',
|
||
icon: 'none'
|
||
});
|
||
return;
|
||
}
|
||
|
||
// 显示加载中
|
||
uni.showLoading({
|
||
title: '创建中...'
|
||
});
|
||
|
||
// 发送请求创建二级货区
|
||
try {
|
||
const userId = uni.getStorageSync("userId")
|
||
const [err, response] = await uni.request({
|
||
url: 'https://api.buzhiyushu.cn/shelves/shelves',
|
||
method: 'POST',
|
||
data: {
|
||
userId: userId,
|
||
phoneNumber: this.phoneNumber,
|
||
depotId: this.createdFirstLevel.id, // 关联的一级货区ID
|
||
name: this.secondLevelForm.name,
|
||
code: this.secondLevelForm.code,
|
||
unit: this.secondLevelForm.unit
|
||
}
|
||
});
|
||
|
||
if (err) {
|
||
uni.hideLoading();
|
||
console.error('创建二级货区失败:', err);
|
||
uni.showToast({
|
||
title: '创建二级货区失败',
|
||
icon: 'none'
|
||
});
|
||
return;
|
||
}
|
||
|
||
if (response.data.code !== 200) {
|
||
uni.hideLoading();
|
||
uni.showToast({
|
||
title: response.data.msg || '创建二级货区失败',
|
||
icon: 'none'
|
||
});
|
||
return;
|
||
}
|
||
|
||
// 创建成功后，调用getShelvesId接口获取完整信息
|
||
const [getErr, getResponse] = await uni.request({
|
||
url: 'https://api.buzhiyushu.cn/shelves/shelves/getShelvesId',
|
||
method: 'GET',
|
||
data: {
|
||
depotId: this.createdFirstLevel.id,
|
||
code: this.secondLevelForm.code
|
||
}
|
||
});
|
||
|
||
uni.hideLoading();
|
||
|
||
if (getErr) {
|
||
console.error('获取二级货区ID失败:', getErr);
|
||
uni.showToast({
|
||
title: '获取二级货区信息失败',
|
||
icon: 'none'
|
||
});
|
||
return;
|
||
}
|
||
|
||
if (getResponse.data.code !== 200 || !getResponse.data.rows || getResponse.data.rows.length ===
|
||
0) {
|
||
console.error('获取二级货区信息失败:', getResponse.data);
|
||
uni.showToast({
|
||
title: '获取二级货区信息失败',
|
||
icon: 'none'
|
||
});
|
||
return;
|
||
}
|
||
|
||
// 保存创建的二级货区信息
|
||
const shelvesInfo = getResponse.data.rows[0];
|
||
this.createdSecondLevel = {
|
||
id: shelvesInfo.id,
|
||
name: shelvesInfo.name
|
||
};
|
||
|
||
console.log('二级货区信息:', this.createdSecondLevel);
|
||
|
||
uni.showToast({
|
||
title: '创建二级货区成功',
|
||
icon: 'success'
|
||
});
|
||
|
||
// 进入下一步
|
||
this.currentStep = 3;
|
||
|
||
} catch (error) {
|
||
uni.hideLoading();
|
||
console.error('创建二级货区异常:', error);
|
||
uni.showToast({
|
||
title: '创建二级货区失败',
|
||
icon: 'none'
|
||
});
|
||
}
|
||
},
|
||
|
||
// 创建三级货区
|
||
async createThirdLevel() {
|
||
// 表单验证
|
||
if (!this.thirdLevelForm.code) {
|
||
uni.showToast({
|
||
title: '请输入货区编码',
|
||
icon: 'none'
|
||
});
|
||
return;
|
||
}
|
||
|
||
// 检查货区编码是否以0开头
|
||
if (this.thirdLevelForm.code.startsWith('0')) {
|
||
uni.showToast({
|
||
title: '货区编码不能以0开头',
|
||
icon: 'none'
|
||
});
|
||
return;
|
||
}
|
||
|
||
// 验证货区编码格式
|
||
const codeRegex = /^[A-Za-z0-9]+$/;
|
||
if (!codeRegex.test(this.thirdLevelForm.code)) {
|
||
uni.showToast({
|
||
title: '货区编码格式不正确',
|
||
icon: 'none'
|
||
});
|
||
return;
|
||
}
|
||
|
||
// 显示加载中
|
||
uni.showLoading({
|
||
title: '创建中...'
|
||
});
|
||
|
||
// 发送请求创建三级货区
|
||
try {
|
||
const userId = uni.getStorageSync("userId")
|
||
const [err, response] = await uni.request({
|
||
url: 'https://api.buzhiyushu.cn/zhishu/freight',
|
||
method: 'POST',
|
||
data: {
|
||
userId: userId,
|
||
phoneNumber: this.phoneNumber,
|
||
shelvesId: this.createdSecondLevel.id, // 关联的二级货区ID
|
||
name: this.thirdLevelForm.name,
|
||
unit: this.thirdLevelForm.unit,
|
||
code: this.thirdLevelForm.code
|
||
}
|
||
});
|
||
|
||
uni.hideLoading();
|
||
|
||
if (err) {
|
||
console.log('创建三级货区失败:', err);
|
||
uni.showToast({
|
||
title: '创建三级货区失败,请检查编码是否有误',
|
||
icon: 'none'
|
||
});
|
||
return;
|
||
}
|
||
if (response.data.code !== 200) {
|
||
uni.showToast({
|
||
title: '创建三级货区失败,请检查编码是否有误',
|
||
icon: 'none'
|
||
});
|
||
return;
|
||
}
|
||
|
||
// 保存创建的三级货区信息
|
||
this.createdThirdLevel = {
|
||
id: response.data.data,
|
||
name: this.thirdLevelForm.name || this.thirdLevelForm.code
|
||
};
|
||
|
||
uni.showToast({
|
||
title: '创建三级货区成功',
|
||
icon: 'success'
|
||
});
|
||
|
||
// 进入完成页面
|
||
this.currentStep = 4;
|
||
|
||
} catch (error) {
|
||
uni.hideLoading();
|
||
console.error('创建三级货区异常:', error);
|
||
uni.showToast({
|
||
title: '创建三级货区失败',
|
||
icon: 'none'
|
||
});
|
||
}
|
||
},
|
||
|
||
// 返回货区列表
|
||
goToWarehouseList() {
|
||
uni.navigateTo({
|
||
url: '/pages/warehouse/warehouse-select' // 指定目标页面路径
|
||
});
|
||
},
|
||
|
||
// 选择一级货区单位
|
||
selectFirstLevelUnit(unit) {
|
||
this.firstLevelForm.unit = unit;
|
||
this.showFirstLevelUnitDropdown = false;
|
||
},
|
||
|
||
// 选择二级货区单位
|
||
selectSecondLevelUnit(unit) {
|
||
this.secondLevelForm.unit = unit;
|
||
this.showSecondLevelUnitDropdown = false;
|
||
},
|
||
|
||
// 选择三级货区单位
|
||
selectThirdLevelUnit(unit) {
|
||
this.thirdLevelForm.unit = unit;
|
||
this.showThirdLevelUnitDropdown = false;
|
||
}
|
||
}
|
||
}
|
||
</script>
|
||
|
||
<style>
|
||
.create-warehouse-container {
|
||
padding: 30rpx;
|
||
background-color: #f8f8f8;
|
||
min-height: 100vh;
|
||
}
|
||
|
||
.header {
|
||
display: flex;
|
||
align-items: center;
|
||
margin-bottom: 40rpx;
|
||
}
|
||
|
||
.back-btn {
|
||
width: 60rpx;
|
||
height: 60rpx;
|
||
display: flex;
|
||
align-items: center;
|
||
justify-content: center;
|
||
}
|
||
|
||
.back-icon {
|
||
font-size: 40rpx;
|
||
color: #333;
|
||
}
|
||
|
||
.title {
|
||
font-size: 36rpx;
|
||
font-weight: bold;
|
||
color: #333;
|
||
flex: 1;
|
||
text-align: center;
|
||
margin-right: 60rpx;
|
||
/* 为了平衡返回按钮的宽度 */
|
||
}
|
||
|
||
/* 步骤指示器样式 */
|
||
.steps {
|
||
display: flex;
|
||
align-items: center;
|
||
justify-content: space-between;
|
||
margin-bottom: 40rpx;
|
||
padding: 0 20rpx;
|
||
}
|
||
|
||
.step {
|
||
display: flex;
|
||
flex-direction: column;
|
||
align-items: center;
|
||
position: relative;
|
||
}
|
||
|
||
.step-number {
|
||
width: 50rpx;
|
||
height: 50rpx;
|
||
border-radius: 50%;
|
||
background-color: #ddd;
|
||
display: flex;
|
||
align-items: center;
|
||
justify-content: center;
|
||
color: #fff;
|
||
font-size: 28rpx;
|
||
margin-bottom: 10rpx;
|
||
}
|
||
|
||
.step.active .step-number {
|
||
background-color: #007AFF;
|
||
}
|
||
|
||
.step.completed .step-number {
|
||
background-color: #4cd964;
|
||
}
|
||
|
||
.step-text {
|
||
font-size: 24rpx;
|
||
color: #666;
|
||
}
|
||
|
||
.step.active .step-text {
|
||
color: #007AFF;
|
||
font-weight: bold;
|
||
}
|
||
|
||
.step.completed .step-text {
|
||
color: #4cd964;
|
||
}
|
||
|
||
.step-line {
|
||
height: 2rpx;
|
||
background-color: #ddd;
|
||
flex: 1;
|
||
margin: 0 10rpx;
|
||
margin-bottom: 30rpx;
|
||
}
|
||
|
||
.step-line.active {
|
||
background-color: #4cd964;
|
||
}
|
||
|
||
/* 表单样式 */
|
||
.form-container {
|
||
background-color: #fff;
|
||
border-radius: 12rpx;
|
||
padding: 30rpx;
|
||
margin-bottom: 30rpx;
|
||
box-shadow: 0 2rpx 10rpx rgba(0, 0, 0, 0.05);
|
||
}
|
||
|
||
.form-title {
|
||
font-size: 32rpx;
|
||
font-weight: bold;
|
||
color: #333;
|
||
margin-bottom: 30rpx;
|
||
text-align: center;
|
||
padding-bottom: 20rpx;
|
||
border-bottom: 1px solid #f0f0f0;
|
||
}
|
||
|
||
.form-item {
|
||
margin-bottom: 25rpx;
|
||
}
|
||
|
||
.label {
|
||
font-size: 28rpx;
|
||
color: #333;
|
||
margin-bottom: 10rpx;
|
||
display: block;
|
||
}
|
||
|
||
.required::before {
|
||
content: '* ';
|
||
color: #e74c3c;
|
||
}
|
||
|
||
.input {
|
||
width: 100%;
|
||
height: 80rpx;
|
||
border: 1px solid #ddd;
|
||
border-radius: 8rpx;
|
||
padding: 0 20rpx;
|
||
font-size: 28rpx;
|
||
box-sizing: border-box;
|
||
}
|
||
|
||
.selected-value {
|
||
background-color: #f5f5f5;
|
||
display: flex;
|
||
align-items: center;
|
||
}
|
||
|
||
.btn {
|
||
width: 100%;
|
||
height: 90rpx;
|
||
line-height: 90rpx;
|
||
text-align: center;
|
||
font-size: 30rpx;
|
||
border-radius: 8rpx;
|
||
margin-top: 20rpx;
|
||
}
|
||
|
||
.next-btn {
|
||
background-color: #007AFF;
|
||
color: #fff;
|
||
}
|
||
|
||
.btn-group {
|
||
display: flex;
|
||
justify-content: space-between;
|
||
}
|
||
|
||
.back-step-btn {
|
||
background-color: #f5f5f5;
|
||
color: #666;
|
||
flex: 1;
|
||
margin-right: 20rpx;
|
||
}
|
||
|
||
.complete-btn {
|
||
background-color: #4cd964;
|
||
color: #fff;
|
||
flex: 1;
|
||
}
|
||
|
||
/* 完成页面样式 */
|
||
.completion-container {
|
||
background-color: #fff;
|
||
border-radius: 12rpx;
|
||
padding: 50rpx 30rpx;
|
||
display: flex;
|
||
flex-direction: column;
|
||
align-items: center;
|
||
box-shadow: 0 2rpx 10rpx rgba(0, 0, 0, 0.05);
|
||
}
|
||
|
||
.completion-icon {
|
||
width: 120rpx;
|
||
height: 120rpx;
|
||
background-color: #4cd964;
|
||
color: #fff;
|
||
border-radius: 50%;
|
||
display: flex;
|
||
align-items: center;
|
||
justify-content: center;
|
||
font-size: 60rpx;
|
||
margin-bottom: 30rpx;
|
||
}
|
||
|
||
.completion-title {
|
||
font-size: 36rpx;
|
||
font-weight: bold;
|
||
color: #333;
|
||
margin-bottom: 20rpx;
|
||
}
|
||
|
||
.completion-message {
|
||
font-size: 28rpx;
|
||
color: #666;
|
||
margin-bottom: 40rpx;
|
||
}
|
||
|
||
.completion-details {
|
||
width: 100%;
|
||
background-color: #f8f8f8;
|
||
border-radius: 8rpx;
|
||
padding: 20rpx;
|
||
margin-bottom: 40rpx;
|
||
}
|
||
|
||
.completion-item {
|
||
display: flex;
|
||
margin-bottom: 15rpx;
|
||
}
|
||
|
||
.completion-item:last-child {
|
||
margin-bottom: 0;
|
||
}
|
||
|
||
.completion-label {
|
||
font-size: 28rpx;
|
||
color: #666;
|
||
width: 150rpx;
|
||
}
|
||
|
||
.completion-value {
|
||
font-size: 28rpx;
|
||
color: #333;
|
||
font-weight: bold;
|
||
flex: 1;
|
||
}
|
||
|
||
.home-btn {
|
||
background-color: #007AFF;
|
||
color: #fff;
|
||
}
|
||
|
||
/* 名称和单位容器样式 */
|
||
.name-unit-container {
|
||
display: flex;
|
||
position: relative;
|
||
}
|
||
|
||
/* 让picker占满容器宽度，使内部input与备注输入框同宽 */
|
||
.picker-block {
|
||
display: block;
|
||
width: 100%;
|
||
}
|
||
|
||
/* 带单位选择器的输入框样式 */
|
||
.input.with-unit {
|
||
flex: 1;
|
||
padding-right: 70rpx;
|
||
/* 为单位选择器留出空间 */
|
||
}
|
||
|
||
/* 单位选择器样式 */
|
||
.unit-selector {
|
||
position: absolute;
|
||
right: 0;
|
||
top: 0;
|
||
height: 80rpx;
|
||
padding: 0 20rpx;
|
||
background-color: #f8f8f8;
|
||
border-left: 1rpx solid #ddd;
|
||
display: flex;
|
||
align-items: center;
|
||
min-width: 60rpx;
|
||
cursor: pointer;
|
||
}
|
||
|
||
.selected-unit {
|
||
font-size: 28rpx;
|
||
color: #333;
|
||
margin-right: 6rpx;
|
||
}
|
||
|
||
.dropdown-icon {
|
||
font-size: 24rpx;
|
||
color: #666;
|
||
}
|
||
|
||
/* 下拉选项样式 */
|
||
.unit-dropdown {
|
||
position: absolute;
|
||
right: 0;
|
||
top: 80rpx;
|
||
width: 100rpx;
|
||
background-color: #fff;
|
||
box-shadow: 0 2rpx 8rpx rgba(0, 0, 0, 0.1);
|
||
z-index: 10;
|
||
border: 1rpx solid #eee;
|
||
border-radius: 4rpx;
|
||
}
|
||
|
||
.unit-option {
|
||
height: 70rpx;
|
||
display: flex;
|
||
align-items: center;
|
||
justify-content: center;
|
||
font-size: 28rpx;
|
||
color: #333;
|
||
border-bottom: 1rpx solid #f5f5f5;
|
||
cursor: pointer;
|
||
}
|
||
|
||
.unit-option:active,
|
||
.unit-option-active {
|
||
background-color: #f0f0f0;
|
||
color: #007AFF;
|
||
}
|
||
|
||
.unit-option:last-child {
|
||
border-bottom: none;
|
||
}
|
||
</style> |