<template>
|
<view class="account-detail">
|
<!-- 使用通用页面头部组件 -->
|
<PageHeader title="台账详情" @back="goBack" />
|
|
<!-- 表单区域 -->
|
<van-form @submit="onSubmit" label-width="110px" input-align="right" style="margin-top: 10px" error-message-align="right" scroll-to-error scroll-to-error-position="center">
|
<van-field label="销售合同号" name="salesContractNo" borderBottom="true" v-model="form.salesContractNo" placeholder="自动生成" disabled>
|
</van-field>
|
<van-field
|
v-model="form.salesman"
|
is-link
|
readonly
|
name="salesman"
|
label="业务员"
|
required
|
placeholder="点击选择业务员"
|
:rules="[{ required: true, message: '请选择业务员' }]"
|
@click="showPicker = true"
|
/>
|
<van-field label="客户合同号" name="customerContractNo" borderBottom="true"
|
v-model="form.customerContractNo" required
|
placeholder="请输入客户合同号" :rules="[{ required: true, message: '客户合同号不能为空' }]">
|
</van-field>
|
<van-field
|
v-model="form.customerName"
|
is-link
|
readonly
|
required
|
name="customerName"
|
label="客户名称"
|
placeholder="点击选择客户"
|
:rules="[{ required: true, message: '请选择客户' }]"
|
@click="showCustomerPicker = true"
|
/>
|
<van-field label="项目名称" name="projectName" borderBottom="true" v-model="form.projectName" placeholder="请输入项目名称" :rules="[{ required: true, message: '项目名称不能为空' }]" required>
|
</van-field>
|
<van-field
|
v-model="form.executionDate"
|
is-link
|
readonly
|
required
|
name="executionDate"
|
label="签订日期"
|
placeholder="点击选择时间"
|
:rules="[{ required: true, message: '签订日期不能为空' }]"
|
@click="showDatePicker = true"
|
/>
|
<van-popup v-model:show="showDatePicker" destroy-on-close position="bottom">
|
<van-date-picker
|
v-model="pickerDateValue"
|
@confirm="onDateConfirm"
|
@cancel="showDatePicker = false"
|
/>
|
</van-popup>
|
<van-field label="付款方式" name="paymentMethod" borderBottom="true" v-model="form.paymentMethod" placeholder="请输入付款方式">
|
</van-field>
|
<van-field label="录入人" name="entryPersonName" borderBottom="true" v-model="form.entryPersonName" placeholder="请输入" disabled>
|
</van-field>
|
<van-field label="录入日期" name="entryDate" borderBottom="true" v-model="form.entryDate" placeholder="请输入" disabled>
|
</van-field>
|
<van-popup v-model:show="showPicker" destroy-on-close position="bottom">
|
<van-picker
|
:columns="userList"
|
v-model="pickerValue"
|
@confirm="onConfirm"
|
@cancel="showPicker = false"
|
/>
|
</van-popup>
|
<van-popup v-model:show="showCustomerPicker" destroy-on-close position="bottom">
|
<van-picker
|
:columns="customerOption"
|
v-model="pickerCustomerValue"
|
@confirm="onCustomerConfirm"
|
@cancel="showCustomerPicker = false"
|
/>
|
</van-popup>
|
|
<!-- 产品大类选择器 -->
|
<van-popup v-model:show="showCategoryPicker" destroy-on-close position="bottom">
|
<!-- 头部按钮区域 -->
|
<view class="popup-header">
|
<view @click="showCategoryPicker = false" class="cancelButton">取消</view>
|
<view @click="confirmCategorySelection" class="confirmButton">确定</view>
|
</view>
|
<up-tree
|
:data="productOptions"
|
:props="defaultProps"
|
show-checkbox
|
default-expand-all
|
check-strictly
|
@check-change="onCategoryConfirm"
|
/>
|
</van-popup>
|
|
<!-- 规格型号选择器 -->
|
<van-popup v-model:show="showSpecificationPicker" destroy-on-close position="bottom">
|
<van-picker
|
:columns="modelOptions"
|
v-model="pickerSpecificationValue"
|
@confirm="onSpecificationConfirm"
|
@cancel="showSpecificationPicker = false"
|
/>
|
</van-popup>
|
|
<!-- 税率选择器 -->
|
<van-popup v-model:show="showTaxRatePicker" destroy-on-close position="bottom">
|
<van-picker
|
:columns="taxRateOptions"
|
v-model="pickerTaxRateValue"
|
@confirm="onTaxRateConfirm"
|
@cancel="showTaxRatePicker = false"
|
/>
|
</van-popup>
|
|
<!-- 发票类型选择器 -->
|
<van-popup v-model:show="showInvoiceTypePicker" destroy-on-close position="bottom">
|
<van-picker
|
:columns="invoiceTypeOptions"
|
v-model="pickerInvoiceTypeValue"
|
@confirm="onInvoiceTypeConfirm"
|
@cancel="showInvoiceTypePicker = false"
|
/>
|
</van-popup>
|
<!-- 产品信息 -->
|
<view class="product-section">
|
<view class="section-header">
|
<text class="section-title">产品信息</text>
|
<van-button type="primary" size="small" @click="addProduct" class="add-btn" icon="plus" v-if="operationType !== 'view'">新增</van-button>
|
</view>
|
<view class="product-card" v-for="(product, idx) in productData" :key="idx">
|
<!-- 产品类 -->
|
<view class="product-header">
|
<view class="product-title">
|
<van-icon name="description" color="#2979ff" size="15" />
|
<text class="product-productCategory">产品 {{ idx + 1 }}</text>
|
</view>
|
<!-- 操作按钮 -->
|
<view class="product-actions" v-if="operationType !== 'view'">
|
<van-button type="danger" size="mini" @click="removeProduct(idx)" class="del-btn" icon="delete">删除</van-button>
|
</view>
|
</view>
|
|
<!-- 产品信息表单 -->
|
<view class="product-form">
|
<!-- 产品大类 -->
|
<van-field
|
v-model="product.productCategory"
|
is-link
|
readonly
|
name="productCategory"
|
label="产品大类"
|
required
|
placeholder="请选择"
|
:rules="[{ required: true, message: '请选择' }]"
|
@click="openCategoryPicker(idx)"
|
/>
|
|
<!-- 规格型号 -->
|
<van-field
|
v-model="product.specificationModel"
|
is-link
|
readonly
|
name="specificationModel"
|
label="规格型号"
|
required
|
:rules="[{ required: true, message: '请选择' }]"
|
placeholder="请选择"
|
@click="openSpecificationPicker(idx)"
|
/>
|
|
<!-- 单位 -->
|
<van-field
|
v-model="product.unit"
|
name="unit"
|
label="单位"
|
required
|
:rules="[{ required: true, message: '请输入' }]"
|
placeholder="请输入"
|
/>
|
|
<!-- 税率 -->
|
<van-field
|
v-model="product.taxRate"
|
is-link
|
readonly
|
name="taxRate"
|
label="税率(%)"
|
required
|
:rules="[{ required: true, message: '请选择' }]"
|
placeholder="请选择"
|
@click="openTaxRatePicker(idx)"
|
/>
|
|
<!-- 含税单价 -->
|
<van-field
|
v-model="product.taxInclusiveUnitPrice"
|
name="taxInclusiveUnitPrice"
|
label="含税单价(元)"
|
type="number"
|
required
|
:rules="[{ required: true, message: '请输入' }]"
|
placeholder="请输入"
|
@blur="formatTaxPrice(idx)"
|
/>
|
|
<!-- 数量 -->
|
<van-field
|
v-model="product.quantity"
|
name="quantity"
|
label="数量"
|
type="number"
|
:rules="[{ required: true, message: '请输入' }]"
|
required
|
placeholder="请输入"
|
@blur="formatAmount(idx)"
|
/>
|
|
<!-- 含税总价 -->
|
<van-field
|
v-model="product.taxInclusiveTotalPrice"
|
name="taxInclusiveTotalPrice"
|
label="含税总价(元)"
|
type="number"
|
:rules="[{ required: true, message: '请输入' }]"
|
required
|
placeholder="请输入"
|
@blur="formatTaxTotal(idx)"
|
/>
|
|
<!-- 不含税总价 -->
|
<van-field
|
v-model="product.taxExclusiveTotalPrice"
|
name="taxExclusiveTotalPrice"
|
label="不含税总价(元)"
|
type="number"
|
required
|
:rules="[{ required: true, message: '请输入' }]"
|
placeholder="请输入"
|
@blur="formatNoTaxTotal(idx)"
|
/>
|
|
<!-- 发票类型 -->
|
<van-field
|
v-model="product.invoiceType"
|
is-link
|
readonly
|
name="invoiceType"
|
label="发票类型"
|
:rules="[{ required: true, message: '请选择' }]"
|
required
|
placeholder="请选择"
|
@click="openInvoiceTypePicker(idx)"
|
/>
|
</view>
|
</view>
|
</view>
|
<view class="footer-btns" v-if="operationType !== 'view'">
|
<van-button class="cancel-btn" @click="goBack">取消</van-button>
|
<van-button class="save-btn" native-type="submit" form-type="submit">保存</van-button>
|
</view>
|
</van-form>
|
</view>
|
</template>
|
|
<script setup>
|
import {onMounted, ref} from 'vue';
|
import {userListNoPage} from "@/api/system/user";
|
import {
|
addOrUpdateSalesLedger,
|
addOrUpdateSalesLedgerProduct,
|
customerList,
|
getSalesLedgerWithProducts,
|
modelList,
|
productTreeList
|
} from "@/api/salesManagement/salesLedger";
|
import useUserStore from "@/store/modules/user";
|
import {calculateTaxExclusiveTotalPrice} from "@/utils/summarizeTable";
|
|
// 获取页面参数
|
const operationType = ref('');
|
const editData = ref(null);
|
|
const userStore = useUserStore()
|
const form = ref({
|
id: '',
|
salesContractNo: '',
|
customerContractNo: '',
|
customerId: '',
|
customerName: '',
|
projectName: '',
|
executionDate: '',
|
paymentMethod: '',
|
entryPerson: '',
|
entryPersonName: '',
|
entryDate: '',
|
});
|
const pickerValue = ref(['']);
|
const pickerDateValue = ref([]);
|
const showPicker = ref(false);
|
const showDatePicker = ref(false);
|
const pickerCustomerValue = ref(['']);
|
const showCustomerPicker = ref(false);
|
const userList = ref([]);
|
const customerOption = ref([]);
|
const productData = ref([]);
|
|
// 选择器相关变量
|
const showCategoryPicker = ref(false);
|
const showSpecificationPicker = ref(false);
|
const showTaxRatePicker = ref(false);
|
const showInvoiceTypePicker = ref(false);
|
const pickerCategoryValue = ref(['']);
|
const pickerSpecificationValue = ref(['']);
|
const pickerTaxRateValue = ref(['']);
|
const pickerInvoiceTypeValue = ref(['']);
|
const currentProductIndex = ref(0);
|
|
// 选项数据
|
const productOptions = ref([]);
|
const selectedCategoryNode = ref(null);
|
const defaultProps = ref({
|
children: 'children',
|
label: 'label',
|
nodeKey: 'id'
|
});
|
|
const modelOptions = ref([]);
|
// 防止循环计算的标志
|
// const isCalculating = ref(false);
|
const taxRateOptions = ref([
|
{ text: '1', value: '1' },
|
{ text: '6', value: '6' },
|
{ text: '13', value: '13' },
|
]);
|
|
const invoiceTypeOptions = ref([
|
{ text: '增普票', value: '增普票' },
|
{ text: '增专票', value: '增专票' },
|
]);
|
|
const addProduct = () => {
|
if (productData.value === null) {
|
productData.value = []
|
}
|
productData.value.push({
|
productCategory: '',
|
specificationModel: '',
|
productModelId: '',
|
unit: '',
|
taxRate: '',
|
taxInclusiveUnitPrice: '',
|
quantity: '',
|
taxInclusiveTotalPrice: '',
|
taxExclusiveTotalPrice: '',
|
invoiceType: ''
|
});
|
};
|
const onConfirm = ({ selectedValues, selectedOptions }) => {
|
form.value.salesman = selectedOptions[0]?.text;
|
pickerValue.value = [selectedValues[0]];
|
showPicker.value = false;
|
};
|
const onCustomerConfirm = ({ selectedValues, selectedOptions }) => {
|
form.value.customerName = selectedOptions[0]?.text;
|
form.value.customerId = selectedOptions[0]?.value;
|
pickerCustomerValue.value = [selectedValues[0]];
|
showCustomerPicker.value = false;
|
};
|
const onDateConfirm = ({ selectedValues }) => {
|
form.value.executionDate = selectedValues.join('-');
|
pickerDateValue.value = selectedValues;
|
showDatePicker.value = false;
|
};
|
const removeProduct = (idx) => {
|
productData.value.splice(idx, 1);
|
};
|
|
// 显示选择器
|
const openCategoryPicker = (idx) => {
|
currentProductIndex.value = idx;
|
showCategoryPicker.value = true;
|
};
|
|
const openSpecificationPicker = (idx) => {
|
currentProductIndex.value = idx;
|
showSpecificationPicker.value = true;
|
};
|
|
const openTaxRatePicker = (idx) => {
|
currentProductIndex.value = idx;
|
showTaxRatePicker.value = true;
|
};
|
|
const openInvoiceTypePicker = (idx) => {
|
currentProductIndex.value = idx;
|
showInvoiceTypePicker.value = true;
|
};
|
|
// 选择器确认事件
|
const onCategoryConfirm = (node) => {
|
// 获取选中的节点信息
|
console.log('selected node---', node);
|
// 存储选中的节点，用于确认时获取数据
|
selectedCategoryNode.value = node;
|
};
|
|
// 确认产品大类选择
|
const confirmCategorySelection = () => {
|
if (selectedCategoryNode.value) {
|
// 设置选中的产品大类
|
productData.value[currentProductIndex.value].productCategory = selectedCategoryNode.value.label;
|
const id = selectedCategoryNode.value.id
|
// 重置选中的节点
|
selectedCategoryNode.value = null;
|
productData.value[currentProductIndex.value].specificationModel = ''
|
productData.value[currentProductIndex.value].productModelId = ''
|
productData.value[currentProductIndex.value].pickerSpecificationValue = ['']
|
getModels(id)
|
}
|
showCategoryPicker.value = false;
|
};
|
// 获取规格型号
|
const getModels = (value) => {
|
modelList({ id: value }).then((res) => {
|
modelOptions.value = res.map(user => ({
|
text: user.model,
|
value: user.id
|
}));
|
});
|
};
|
// 选择规格型号
|
const onSpecificationConfirm = ({ selectedValues, selectedOptions }) => {
|
productData.value[currentProductIndex.value].specificationModel = selectedOptions[0]?.text;
|
productData.value[currentProductIndex.value].productModelId = selectedOptions[0]?.value;
|
productData.value[currentProductIndex.value].unit = selectedOptions[0]?.unit;
|
pickerSpecificationValue.value = [selectedValues[0]];
|
showSpecificationPicker.value = false;
|
};
|
// 选择税率
|
const onTaxRateConfirm = ({ selectedValues, selectedOptions }) => {
|
productData.value[currentProductIndex.value].taxRate = selectedOptions[0]?.value;
|
pickerTaxRateValue.value = [selectedValues[0]];
|
showTaxRatePicker.value = false;
|
// if (isCalculating.value) return;
|
const inclusiveTotalPrice = parseFloat(productData.value[currentProductIndex.value].taxInclusiveTotalPrice);
|
const taxRate = parseFloat(productData.value[currentProductIndex.value].taxRate);
|
if (!inclusiveTotalPrice || !taxRate) {
|
return;
|
}
|
// isCalculating.value = true;
|
// 计算不含税总价
|
productData.value[currentProductIndex.value].taxExclusiveTotalPrice =
|
calculateTaxExclusiveTotalPrice(
|
inclusiveTotalPrice,
|
taxRate
|
);
|
// isCalculating.value = false;
|
};
|
|
const onInvoiceTypeConfirm = ({ selectedValues, selectedOptions }) => {
|
productData.value[currentProductIndex.value].invoiceType = selectedOptions[0]?.text;
|
pickerInvoiceTypeValue.value = [selectedValues[0]];
|
showInvoiceTypePicker.value = false;
|
};
|
|
// 格式化函数 - 固定两位小数
|
const formatTaxPrice = (idx) => {
|
if (productData.value[idx].taxInclusiveUnitPrice) {
|
const value = parseFloat(productData.value[idx].taxInclusiveUnitPrice);
|
if (!isNaN(value)) {
|
productData.value[idx].taxInclusiveUnitPrice = value.toFixed(2);
|
}
|
}
|
if (!productData.value[currentProductIndex.value].taxRate) {
|
uni.showToast({
|
title: '请先选择税率',
|
icon: 'none'
|
});
|
return;
|
}
|
const quantity = parseFloat(productData.value[currentProductIndex.value].quantity);
|
const unitPrice = parseFloat(productData.value[currentProductIndex.value].taxInclusiveUnitPrice);
|
|
if (!quantity || quantity <= 0 || !unitPrice) {
|
return;
|
}
|
// 计算含税总价
|
productData.value[currentProductIndex.value].taxInclusiveTotalPrice = (unitPrice * quantity).toFixed(2);
|
|
// 如果有税率，计算不含税总价
|
if (productData.value[currentProductIndex.value].taxRate) {
|
productData.value[currentProductIndex.value].taxExclusiveTotalPrice =
|
calculateTaxExclusiveTotalPrice(
|
productData.value[currentProductIndex.value].taxInclusiveTotalPrice,
|
productData.value[currentProductIndex.value].taxRate
|
);
|
}
|
};
|
// 数量输入框失焦
|
const formatAmount = (idx) => {
|
if (productData.value[idx].quantity) {
|
const value = parseFloat(productData.value[idx].quantity);
|
if (!isNaN(value)) {
|
productData.value[idx].quantity = value.toFixed(2);
|
}
|
}
|
if (!productData.value[currentProductIndex.value].taxRate) {
|
uni.showToast({
|
title: '请先选择税率',
|
icon: 'none'
|
});
|
return;
|
}
|
const quantity = parseFloat(productData.value[currentProductIndex.value].quantity);
|
const unitPrice = parseFloat(productData.value[currentProductIndex.value].taxInclusiveUnitPrice);
|
|
if (!quantity || quantity <= 0 || !unitPrice) {
|
return;
|
}
|
// 计算含税总价
|
productData.value[currentProductIndex.value].taxInclusiveTotalPrice = (unitPrice * quantity).toFixed(2);
|
// 如果有税率，计算不含税总价
|
if (productData.value[currentProductIndex.value].taxRate) {
|
productData.value[currentProductIndex.value].taxExclusiveTotalPrice =
|
calculateTaxExclusiveTotalPrice(
|
productData.value[currentProductIndex.value].taxInclusiveTotalPrice,
|
productData.value[currentProductIndex.value].taxRate
|
);
|
}
|
};
|
// 含税总价失焦，根据含税总价计算含税单价和数量
|
const formatTaxTotal = (idx) => {
|
if (productData.value[idx].taxInclusiveTotalPrice) {
|
const value = parseFloat(productData.value[idx].taxInclusiveTotalPrice);
|
if (!isNaN(value)) {
|
productData.value[idx].taxInclusiveTotalPrice = value.toFixed(2);
|
}
|
}
|
const totalPrice = parseFloat(productData.value[currentProductIndex.value].taxInclusiveTotalPrice);
|
const quantity = parseFloat(productData.value[currentProductIndex.value].quantity);
|
|
if (!totalPrice || !quantity || quantity <= 0) {
|
return;
|
}
|
// 计算含税单价 = 含税总价 / 数量
|
productData.value[currentProductIndex.value].taxInclusiveUnitPrice = (totalPrice / quantity).toFixed(2);
|
// 如果有税率，计算不含税总价
|
if (productData.value[currentProductIndex.value].taxRate) {
|
productData.value[currentProductIndex.value].taxExclusiveTotalPrice =
|
calculateTaxExclusiveTotalPrice(
|
totalPrice,
|
productData.value[currentProductIndex.value].taxRate
|
);
|
}
|
};
|
// 不含税总价失焦, 根据不含税总价计算含税单价和数量
|
const formatNoTaxTotal = (idx) => {
|
if (productData.value[idx].taxExclusiveTotalPrice) {
|
const value = parseFloat(productData.value[idx].taxExclusiveTotalPrice);
|
if (!isNaN(value)) {
|
productData.value[idx].taxExclusiveTotalPrice = value.toFixed(2);
|
}
|
}
|
if (!productData.value[currentProductIndex.value].taxRate) {
|
uni.showToast({
|
title: '请先选择税率',
|
icon: 'none'
|
});
|
return;
|
}
|
const exclusiveTotalPrice = parseFloat(productData.value[currentProductIndex.value].taxExclusiveTotalPrice);
|
const quantity = parseFloat(productData.value[currentProductIndex.value].quantity);
|
const taxRate = parseFloat(productData.value[currentProductIndex.value].taxRate);
|
if (!exclusiveTotalPrice || !quantity || quantity <= 0 || !taxRate) {
|
return;
|
}
|
// 先计算含税总价 = 不含税总价 / (1 - 税率/100)
|
const taxRateDecimal = taxRate / 100;
|
const inclusiveTotalPrice = exclusiveTotalPrice / (1 - taxRateDecimal);
|
productData.value[currentProductIndex.value].taxInclusiveTotalPrice = inclusiveTotalPrice.toFixed(2);
|
// 计算含税单价 = 含税总价 / 数量
|
productData.value[currentProductIndex.value].taxInclusiveUnitPrice = (inclusiveTotalPrice / quantity).toFixed(2);
|
};
|
const goBack = () => {
|
// 清理本地存储的数据
|
uni.removeStorageSync('operationType');
|
uni.removeStorageSync('editData');
|
uni.navigateBack();
|
};
|
const onSubmit = () => {
|
if (productData.value !== null && productData.value.length > 0) {
|
form.value.productData = JSON.parse(JSON.stringify(productData.value));
|
} else {
|
uni.showToast({
|
title: '请添加产品信息',
|
icon: 'none'
|
});
|
return
|
}
|
form.value.type = 1;
|
addOrUpdateSalesLedger(form.value).then((res) => {
|
uni.showToast({
|
title: '提交成功',
|
icon: 'success',
|
});
|
goBack();
|
});
|
};
|
const setUserInfo = () => {
|
form.value.entryPerson = userStore.id;
|
form.value.entryPersonName = userStore.nickName;
|
// 设置当天日期
|
const today = new Date()
|
const year = today.getFullYear()
|
const month = String(today.getMonth() + 1).padStart(2, '0')
|
const day = String(today.getDate()).padStart(2, '0')
|
form.value.entryDate = `${year}-${month}-${day}`
|
pickerDateValue.value = [year.toString(), month.toString(), day.toString()]
|
}
|
// 填充表单数据（编辑模式）
|
const fillFormData = () => {
|
if (!editData.value) return;
|
getSalesLedgerWithProducts({ id: editData.value.id, type: 1 }).then((res) => {
|
productData.value = res.productData;
|
});
|
console.log(editData.value)
|
// 填充基本信息
|
form.value.salesContractNo = editData.value.salesContractNo || '';
|
form.value.customerContractNo = editData.value.customerContractNo || '';
|
form.value.customerName = editData.value.customerName || '';
|
form.value.projectName = editData.value.projectName || '';
|
form.value.executionDate = editData.value.executionDate || '';
|
form.value.paymentMethod = editData.value.paymentMethod || '';
|
form.value.salesman = editData.value.salesman || '';
|
form.value.entryPerson = editData.value.entryPerson || '';
|
form.value.entryPersonName = editData.value.entryPersonName || '';
|
form.value.entryDate = editData.value.entryDate || '';
|
form.value.id = editData.value.id || '';
|
form.value.customerId = editData.value.customerId || '';
|
|
// 设置业务员选择器的值
|
if (editData.value.salesman) {
|
const salesmanIndex = userList.value.findIndex(user => user.text === editData.value.salesman);
|
if (salesmanIndex !== -1) {
|
pickerValue.value = [userList.value[salesmanIndex].value];
|
}
|
}
|
|
// 设置客户选择器的值
|
if (editData.value.customerName) {
|
const customerIndex = customerOption.value.findIndex(customer => customer.text === editData.value.customerName);
|
if (customerIndex !== -1) {
|
pickerCustomerValue.value = [customerOption.value[customerIndex].value]
|
}
|
}
|
|
// 设置日期选择器的值
|
if (editData.value.executionDate) {
|
pickerDateValue.value = editData.value.executionDate.split('-').map(num => parseInt(num, 10))
|
console.log(pickerDateValue.value)
|
}
|
};
|
const getUserList = () => {
|
userListNoPage().then((res) => {
|
// 将用户数据组装成 picker 需要的格式
|
userList.value = res.data.map(user => ({
|
text: user.nickName,
|
value: user.nickName
|
}));
|
})
|
}
|
const getCustomerList = () => {
|
customerList().then((res) => {
|
// 将用户数据组装成 picker 需要的格式
|
customerOption.value = res.map(item => ({
|
text: item.customerName,
|
value: item.id
|
}));
|
})
|
}
|
const convertIdToValue = (data) => {
|
// 如果传入的不是数组，则返回空数组
|
if (!Array.isArray(data)) {
|
return [];
|
}
|
// 递归映射函数
|
return data.map(item => {
|
// 创建新对象，映射字段
|
const mappedItem = {
|
label: item.label, // 关键：将 label 映射为 text
|
id: item.id, // 保留 id
|
};
|
// 如果存在 children 数组，则递归处理
|
if (item.children && Array.isArray(item.children) && item.children.length > 0) {
|
mappedItem.children = convertIdToValue(item.children);
|
}
|
return mappedItem;
|
});
|
};
|
// 获取产品大类tree数据
|
const getProductOptions = () => {
|
productTreeList().then((res) => {
|
productOptions.value = convertIdToValue(res);
|
});
|
};
|
onMounted(() => {
|
// 获取页面参数
|
operationType.value = uni.getStorageSync('operationType') || '';
|
|
// 获取人员列表
|
getUserList()
|
// 获取客户列表
|
getCustomerList()
|
// 获取产品大类tree数据
|
getProductOptions()
|
// 赋值默认信息
|
if (operationType.value === 'add') {
|
setUserInfo()
|
}
|
|
// 获取编辑数据并填充表单
|
const editDataStr = uni.getStorageSync('editData');
|
if (editDataStr) {
|
try {
|
editData.value = JSON.parse(editDataStr);
|
// 如果是编辑模式，等待数据加载完成后填充表单数据
|
if (operationType.value !== 'add' && editData.value) {
|
// 使用 nextTick 确保数据加载完成后再填充
|
setTimeout(() => {
|
fillFormData();
|
}, 100);
|
}
|
} catch (error) {
|
console.error('解析编辑数据失败:', error);
|
}
|
}
|
});
|
</script>
|
|
<style scoped lang="scss">
|
.account-detail {
|
min-height: 100vh;
|
background: #f8f9fa;
|
padding-bottom: 5rem;
|
}
|
.header {
|
display: flex;
|
align-items: center;
|
background: #fff;
|
padding: 1rem 1.25rem;
|
border-bottom: 0.0625rem solid #f0f0f0;
|
position: sticky;
|
top: 0;
|
z-index: 100;
|
/* 兼容 iOS 刘海/灵动岛安全区 */
|
padding-top: env(safe-area-inset-top);
|
}
|
.title {
|
flex: 1;
|
text-align: center;
|
font-size: 1.125rem;
|
font-weight: 600;
|
color: #333;
|
}
|
.form-section {
|
margin-top: 1rem;
|
}
|
.van-field {
|
height: 3.4rem;
|
}
|
.van-cell {
|
align-items: center;
|
}
|
.product-section {
|
background: #fff;
|
margin-top: 1rem;
|
padding: 1rem;
|
box-shadow: 0 0.125rem 0.5rem rgba(0,0,0,0.04);
|
}
|
.section-header {
|
display: flex;
|
align-items: center;
|
justify-content: space-between;
|
margin-bottom: 1rem;
|
}
|
.section-title {
|
font-size: 1rem;
|
font-weight: 600;
|
color: #333;
|
}
|
.product-card {
|
background: #FFFFFF;
|
box-shadow: 0 0 1.25rem 0 rgba(0,57,117,0.08);
|
border-radius: 0.5rem 0.5rem 0.5rem 0.5rem;
|
padding: 1rem 0.5rem 0 0.5rem;
|
position: relative;
|
}
|
.product-header {
|
display: flex;
|
align-items: center;
|
justify-content: space-between;
|
padding: 0 0.5rem 0.75rem 0.5rem;
|
border-bottom: 0.0625rem solid #e8e8e8;
|
}
|
.product-productCategory {
|
margin-left: 0.5rem;
|
font-size: 0.875rem;
|
font-weight: 500;
|
color: #333;
|
}
|
.info-grid {
|
display: grid;
|
grid-template-columns: 1fr 1fr;
|
gap: 0.75rem;
|
margin-bottom: 1rem;
|
}
|
.info-item {
|
display: flex;
|
flex-direction: column;
|
gap: 0.25rem;
|
}
|
.info-label {
|
font-size: 0.75rem;
|
color: #666;
|
font-weight: 400;
|
}
|
.info-value {
|
font-size: 0.875rem;
|
color: #333;
|
font-weight: 500;
|
}
|
.info-value.highlight {
|
color: #2979ff;
|
font-weight: 600;
|
}
|
.product-form {
|
margin-bottom: 1rem;
|
}
|
.footer-btns {
|
position: fixed;
|
left: 0;
|
right: 0;
|
bottom: 0;
|
background: #fff;
|
display: flex;
|
justify-content: space-around;
|
align-items: center;
|
padding: 0.75rem 0;
|
box-shadow: 0 -0.125rem 0.5rem rgba(0,0,0,0.05);
|
z-index: 1000;
|
}
|
.cancel-btn {
|
font-weight: 400;
|
font-size: 1rem;
|
color: #FFFFFF;
|
width: 6.375rem;
|
background: #C7C9CC;
|
box-shadow: 0 0.25rem 0.625rem 0 rgba(3,88,185,0.2);
|
border-radius: 2.5rem 2.5rem 2.5rem 2.5rem;
|
}
|
.save-btn {
|
font-weight: 400;
|
font-size: 1rem;
|
color: #FFFFFF;
|
width: 14rem;
|
background: linear-gradient( 140deg, #00BAFF 0%, #006CFB 100%);
|
box-shadow: 0 0.25rem 0.625rem 0 rgba(3,88,185,0.2);
|
border-radius: 2.5rem 2.5rem 2.5rem 2.5rem;
|
}
|
|
.popup-header {
|
display: flex;
|
justify-content: space-between;
|
align-items: center;
|
padding: 1rem;
|
background: #fff;
|
position: sticky;
|
top: 0;
|
z-index: 10;
|
}
|
.cancelButton {
|
color: #969799
|
}
|
.confirmButton {
|
color: #1989FA
|
}
|
.u-tree {
|
height: 13rem;
|
}
|
</style>
|
