<template>
|
<view class="account-detail">
|
<PageHeader :title="pageTitle" @back="goBack" />
|
|
<view class="form-container">
|
<up-form
|
ref="formRef"
|
:model="form"
|
:rules="rules"
|
label-width="110"
|
input-align="right"
|
error-message-align="right"
|
>
|
<u-cell-group title="客户信息" class="form-section">
|
<up-form-item label="客户名称" prop="customerName" required>
|
<up-input
|
v-model="form.customerName"
|
placeholder="请输入客户名称"
|
clearable
|
/>
|
</up-form-item>
|
<up-form-item label="客户分类" prop="customerType" required>
|
<up-input
|
v-model="customerTypeText"
|
placeholder="请选择客户分类"
|
readonly
|
@click="showCustomerTypeSheet = true"
|
/>
|
<template #right>
|
<up-icon name="arrow-right" @click="showCustomerTypeSheet = true"></up-icon>
|
</template>
|
</up-form-item>
|
<up-form-item
|
label="纳税人识别号"
|
prop="taxpayerIdentificationNumber"
|
>
|
<up-input
|
v-model="form.taxpayerIdentificationNumber"
|
placeholder="请输入纳税人识别号"
|
clearable
|
/>
|
</up-form-item>
|
<up-form-item label="公司地址" prop="companyAddress">
|
<up-input
|
v-model="form.companyAddress"
|
placeholder="请输入公司地址"
|
clearable
|
/>
|
</up-form-item>
|
<up-form-item label="公司电话" prop="companyPhone">
|
<up-input
|
v-model="form.companyPhone"
|
placeholder="请输入公司电话"
|
clearable
|
/>
|
</up-form-item>
|
<up-form-item label="法人" prop="corporation">
|
<up-input
|
v-model="form.corporation"
|
placeholder="请输入法人"
|
clearable
|
/>
|
</up-form-item>
|
<up-form-item label="代理人" prop="agent">
|
<up-input
|
v-model="form.agent"
|
placeholder="请输入代理人"
|
clearable
|
/>
|
</up-form-item>
|
<up-form-item label="传真" prop="fax">
|
<up-input
|
v-model="form.fax"
|
placeholder="请输入传真"
|
clearable
|
/>
|
</up-form-item>
|
</u-cell-group>
|
|
<u-cell-group title="联系信息" class="form-section">
|
<up-form-item label="联系人" prop="contactPerson">
|
<up-input
|
v-model="form.contactPerson"
|
placeholder="请输入联系人"
|
clearable
|
/>
|
</up-form-item>
|
<up-form-item label="联系电话" prop="contactPhone">
|
<up-input
|
v-model="form.contactPhone"
|
placeholder="请输入联系电话"
|
clearable
|
/>
|
</up-form-item>
|
</u-cell-group>
|
|
<u-cell-group title="银行信息" class="form-section">
|
<up-form-item label="银行基本户" prop="basicBankAccount">
|
<up-input
|
v-model="form.basicBankAccount"
|
placeholder="请输入银行基本户"
|
clearable
|
/>
|
</up-form-item>
|
<up-form-item label="银行账号" prop="bankAccount">
|
<up-input
|
v-model="form.bankAccount"
|
placeholder="请输入银行账号"
|
clearable
|
/>
|
</up-form-item>
|
<up-form-item label="开户银行" prop="bankName">
|
<up-input
|
v-model="form.bankName"
|
placeholder="请输入开户银行"
|
clearable
|
/>
|
</up-form-item>
|
<up-form-item label="开户行号" prop="bankCode">
|
<up-input
|
v-model="form.bankCode"
|
placeholder="请输入开户行号"
|
clearable
|
/>
|
</up-form-item>
|
</u-cell-group>
|
|
<u-cell-group title="维护信息" class="form-section">
|
<up-form-item label="维护人" prop="maintainer">
|
<up-input
|
v-model="form.maintainer"
|
disabled
|
placeholder="自动填充"
|
/>
|
</up-form-item>
|
<up-form-item label="维护时间" prop="maintenanceTime">
|
<up-input
|
v-model="form.maintenanceTime"
|
disabled
|
placeholder="自动填充"
|
/>
|
</up-form-item>
|
</u-cell-group>
|
</up-form>
|
</view>
|
|
<FooterButtons
|
:loading="loading"
|
confirmText="保存"
|
@cancel="goBack"
|
@confirm="handleSubmit"
|
/>
|
|
<up-action-sheet
|
:show="showCustomerTypeSheet"
|
title="选择客户分类"
|
:actions="customerTypeActions"
|
@select="onSelectCustomerType"
|
@close="showCustomerTypeSheet = false"
|
/>
|
</view>
|
</template>
|
|
<script setup>
|
import { computed, onMounted, ref } from "vue";
|
import { onLoad } from "@dcloudio/uni-app";
|
import FooterButtons from "@/components/FooterButtons.vue";
|
import useUserStore from "@/store/modules/user";
|
import { formatDateToYMD } from "@/utils/ruoyi";
|
import { addCustomer, getCustomer, updateCustomer } from "@/api/basicData/customerFile";
|
|
const userStore = useUserStore();
|
const formRef = ref();
|
const loading = ref(false);
|
const customerId = ref("");
|
const showCustomerTypeSheet = ref(false);
|
|
const form = ref({
|
customerName: "",
|
customerType: "",
|
taxpayerIdentificationNumber: "",
|
companyAddress: "",
|
companyPhone: "",
|
corporation: "",
|
agent: "",
|
fax: "",
|
contactPerson: "",
|
contactPhone: "",
|
basicBankAccount: "",
|
bankAccount: "",
|
bankName: "",
|
bankCode: "",
|
maintainer: "",
|
maintenanceTime: "",
|
});
|
|
const rules = {
|
customerName: [{ required: true, message: "请输入客户名称", trigger: "blur" }],
|
customerType: [{ required: true, message: "请选择客户分类", trigger: "change" }],
|
};
|
|
const customerTypeActions = [
|
{ name: "零售客户", value: "零售客户" },
|
{ name: "经销商客户", value: "经销商客户" },
|
];
|
|
const pageTitle = computed(() =>
|
customerId.value ? "编辑客户" : "新增客户"
|
);
|
const customerTypeText = computed(() => form.value.customerType || "");
|
|
const goBack = () => {
|
uni.navigateBack();
|
};
|
|
const initForAdd = () => {
|
form.value.maintainer = userStore.nickName || "";
|
form.value.maintenanceTime = formatDateToYMD(Date.now());
|
};
|
|
const loadDetail = () => {
|
if (!customerId.value) return;
|
uni.showLoading({ title: "加载中...", mask: true });
|
getCustomer(customerId.value)
|
.then(res => {
|
form.value = { ...form.value, ...(res.data || {}) };
|
})
|
.catch(() => {
|
uni.showToast({ title: "获取详情失败", icon: "error" });
|
})
|
.finally(() => {
|
uni.hideLoading();
|
});
|
};
|
|
const onSelectCustomerType = action => {
|
form.value.customerType = action.value;
|
showCustomerTypeSheet.value = false;
|
};
|
|
const handleSubmit = async () => {
|
const valid = await formRef.value.validate().catch(() => false);
|
if (!valid) return;
|
|
loading.value = true;
|
const action = customerId.value ? updateCustomer : addCustomer;
|
action({ ...form.value, id: customerId.value || undefined })
|
.then(() => {
|
uni.showToast({ title: "保存成功", icon: "success" });
|
setTimeout(() => {
|
uni.navigateBack();
|
}, 300);
|
})
|
.catch(() => {
|
uni.showToast({ title: "保存失败", icon: "error" });
|
})
|
.finally(() => {
|
loading.value = false;
|
});
|
};
|
|
onMounted(async () => {
|
if (!userStore.nickName) {
|
await userStore.getInfo().catch(() => null);
|
}
|
if (!customerId.value) {
|
initForAdd();
|
}
|
});
|
|
onLoad(options => {
|
if (options?.id) {
|
customerId.value = options.id;
|
loadDetail();
|
}
|
});
|
</script>
|
|
<style scoped lang="scss">
|
@import "@/static/scss/form-common.scss";
|
|
.account-detail {
|
min-height: 100vh;
|
background: #f8f9fa;
|
padding-bottom: 100px;
|
}
|
|
.form-container {
|
padding: 12px 12px 0;
|
}
|
|
.hero-card {
|
margin-bottom: 12px;
|
padding: 18px 18px 16px;
|
border-radius: 16px;
|
background: linear-gradient(135deg, #f4f8ff 0%, #ffffff 100%);
|
box-shadow: 0 6px 18px rgba(41, 121, 255, 0.08);
|
}
|
|
.hero-title {
|
display: block;
|
font-size: 18px;
|
font-weight: 600;
|
color: #1f2d3d;
|
margin-bottom: 6px;
|
}
|
|
.hero-desc {
|
display: block;
|
font-size: 13px;
|
line-height: 1.6;
|
color: #7a8599;
|
}
|
|
.form-section {
|
margin-bottom: 12px;
|
border-radius: 12px;
|
overflow: hidden;
|
box-shadow: 0 2px 10px rgba(15, 35, 95, 0.05);
|
}
|
|
:deep(.u-cell-group__title) {
|
padding: 14px 18px 10px !important;
|
font-size: 15px !important;
|
font-weight: 600 !important;
|
color: #22324d !important;
|
background: #f8fbff !important;
|
}
|
|
:deep(.u-form-item__content__slot) {
|
flex: 1;
|
}
|
|
:deep(.u-input__content) {
|
justify-content: flex-end;
|
}
|
|
:deep(.u-input__content__field-wrapper__field),
|
:deep(.u-input__input) {
|
text-align: right !important;
|
}
|
</style>
|
