From 424304d58e1acbe096fad794605906482c3a2ef7 Mon Sep 17 00:00:00 2001
From: gaoluyang <2820782392@qq.com>
Date: 星期二, 19 八月 2025 16:42:51 +0800
Subject: [PATCH] 1.销售台账联调 2.开票登记开发联调
---
src/pages/cooperativeOffice/collaborativeApproval/detail.vue | 535 +++++++++++++++++++++++++++++++++++++++++++++++++++++++++++
1 files changed, 535 insertions(+), 0 deletions(-)
diff --git a/src/pages/cooperativeOffice/collaborativeApproval/detail.vue b/src/pages/cooperativeOffice/collaborativeApproval/detail.vue
new file mode 100644
index 0000000..362b237
--- /dev/null
+++ b/src/pages/cooperativeOffice/collaborativeApproval/detail.vue
@@ -0,0 +1,535 @@
+<template>
+ <view class="account-detail">
+ <!-- 椤堕儴鏍囬鏍� -->
+ <view class="header">
+ <up-icon name="arrow-left" size="20" color="#333" @click="goBack" />
+ <text class="title">瀹℃壒娴佺▼</text>
+ </view>
+
+ <!-- 琛ㄥ崟鍖哄煙 -->
+ <view class="form-section">
+ <van-form ref="formRef" @submit="submitForm" :rules="rules" input-align="right">
+ <van-cell-group inset style="height:auto">
+ <van-field
+ v-model="taxPrice"
+ name="taxPrice"
+ label="濮撳悕"
+ placeholder="璇疯緭鍏ュ鍚�"
+ :rules="[{ required: true, message: '濮撳悕涓嶈兘涓虹┖' }]"
+ required
+ readonly
+ />
+ <van-field
+ v-model="result"
+ readonly
+ name="picker"
+ label="鐢宠閮ㄩ棬"
+ placeholder="璇烽�夋嫨鐢宠閮ㄩ棬"
+ :rules="[{ required: true, message: '璇烽�夋嫨鐢宠閮ㄩ棬' }]"
+ @click="showPicker = true"
+ required
+ />
+ <van-popup
+ v-model:show="showPicker"
+ destroy-on-close
+ position="bottom"
+ >
+ <van-picker
+ :columns="columns"
+ :model-value="pickerValue"
+ @confirm="onConfirm"
+ @cancel="showPicker = false"
+ />
+ </van-popup>
+ <van-field
+ v-model="message"
+ name="message"
+ rows="1"
+ autosize
+ label="鐢宠浜嬬敱"
+ type="textarea"
+ placeholder="璇疯緭鍏ョ敵璇蜂簨鐢�"
+ height="100"
+ :rules="[{ required: true, message: '鐢宠浜嬬敱涓嶈兘涓虹┖' }]"
+ required
+ />
+ </van-cell-group>
+ </van-form>
+ </view>
+ <!-- 瀹℃牳娴佺▼鍖哄煙 -->
+ <view class="approval-process">
+ <view class="approval-header">
+ <text class="approval-title">瀹℃牳娴佺▼</text>
+ <text class="approval-desc">宸茬敱绠＄悊鍛橀璁句笉鍙慨鏀�</text>
+ </view>
+
+ <view class="approval-steps">
+ <view v-for="(step, stepIndex) in approvalSteps" :key="stepIndex" class="approval-step">
+ <view class="step-title">
+ <text>瀹℃壒浜�</text>
+ </view>
+ <view class="approvers-container">
+ <view v-for="(approver, approverIndex) in step.approvers" :key="approverIndex" class="approver-item">
+ <view class="approver-avatar"></view>
+ <text class="approver-name">{{ approver.name }}</text>
+ <view class="delete-approver-btn" @click="removeApprover(stepIndex, approverIndex)">脳</view>
+ </view>
+ <view class="add-approver-btn" @click="addApprover(stepIndex)">+
+ </view>
+ </view>
+ <view class="step-line" v-if="stepIndex < approvalSteps.length - 1"></view>
+ <view class="delete-step-btn" @click="removeApprovalStep(stepIndex)">鍒犻櫎鑺傜偣</view>
+ </view>
+ </view>
+
+ <view class="add-step-btn" @click="addApprovalStep">
+ <text>鏂板鑺傜偣瀹℃牳浜�</text>
+ </view>
+ </view>
+
+ <!-- 搴曢儴鎸夐挳 -->
+ <view class="footer-btns">
+ <van-button class="cancel-btn" @click="goBack">鍙栨秷</van-button>
+ <van-button class="save-btn" @click="submitForm">淇濆瓨</van-button>
+ </view>
+ </view>
+</template>
+
+<script>
+import { ref, onMounted } from "vue";
+
+export default {
+ setup() {
+ const rules = ref({
+
+ taxPrice: {
+ rules: [{ required: true, errorMessage: '濮撳悕涓嶈兘涓虹┖' }]
+ },
+ result: {
+ rules: [{ required: true, errorMessage: '璇烽�夋嫨鐢宠閮ㄩ棬' }]
+ },
+ message: {
+ rules: [{ required: true, errorMessage: '鐢宠浜嬬敱涓嶈兘涓虹┖' }]
+ },
+});
+ const result = ref("");
+ const pickerValue = ref([]);
+ const showPicker = ref(false);
+ const columns = ref([]);
+ onMounted(async () => {
+ try {
+ // 鏇挎崲涓哄疄闄呮帴鍙ｅ湴鍧�
+ // const response = await axios.get('/api/getDepartments');
+ columns.value = [
+ {
+ text: "鏉窞",
+ value: "Hangzhou",
+ },
+ {
+ text: "瀹佹尝",
+ value: "Ningbo",
+ },
+ {
+ text: "娓╁窞",
+ value: "Wenzhou",
+ },
+ {
+ text: "缁嶅叴",
+ value: "Shaoxing",
+ },
+ {
+ text: "婀栧窞",
+ value: "Huzhou",
+ },
+ ];
+ } catch (error) {
+ console.error("鑾峰彇閮ㄩ棬鏁版嵁澶辫触:", error);
+ }
+ });
+ const onConfirm = ({ selectedValues, selectedOptions }) => {
+ result.value = selectedOptions[0]?.text;
+ pickerValue.value = selectedValues;
+ showPicker.value = false;
+ };
+ const taxPrice = ref("");
+ const contractAmount = ref("");
+ const approvalSteps = ref([
+ { approvers: [{ name: '鍗㈠皬鏁�' }, { name: '鍗㈠皬鏁�' }] },
+ { approvers: [{ name: '鍗㈠皬鏁�' }] },
+ { approvers: [{ name: '鍗㈠皬鏁�' }] },
+ { approvers: [{ name: '鍗㈠皬鏁�' }] }
+ ]);
+
+ const goBack = () => {
+ uni.navigateBack();
+ };
+
+ const formRef = ref(null);
+
+ const submitForm = () => {
+ formRef.value.validate().then(() => {
+ // 琛ㄥ崟鏍￠獙閫氳繃锛屽彲浠ユ彁浜ゆ暟鎹�
+ console.log("琛ㄥ崟鏁版嵁:", {
+ taxPrice: taxPrice.value,
+ department: result.value,
+ message: message.value,
+ approvalSteps: approvalSteps.value
+ });
+
+ uni.showToast({
+ title: "淇濆瓨鎴愬姛",
+ icon: "success",
+ });
+ }).catch((error) => {
+ console.error("琛ㄥ崟鏍￠獙澶辫触:", error);
+ // 鏄剧ず鍏蜂綋鐨勯敊璇俊鎭�
+ if (error.length > 0) {
+ const firstError = error[0];
+ uni.showToast({
+ title: firstError.message || '琛ㄥ崟鏍￠獙澶辫触',
+ icon: 'none'
+ });
+ } else {
+ uni.showToast({
+ title: '琛ㄥ崟鏍￠獙澶辫触锛岃妫�鏌ュ繀濉」',
+ icon: 'none'
+ });
+ }
+ });
+ };
+
+ const message = ref("");
+
+ const addApprover = (stepIndex) => {
+ // 鍦ㄦ寚瀹氬鎵规楠ゆ坊鍔犳柊鐨勫鎵逛汉
+ approvalSteps.value[stepIndex].approvers.push({ name: '鍗㈠皬鏁�' });
+ };
+
+ const addApprovalStep = () => {
+ // 娣诲姞鏂扮殑瀹℃壒姝ラ
+ approvalSteps.value.push({ approvers: [{ name: '鍗㈠皬鏁�' }] });
+ };
+
+ const removeApprover = (stepIndex, approverIndex) => {
+ // 纭繚姣忎釜姝ラ鑷冲皯淇濈暀涓�涓鎵逛汉
+ if (approvalSteps.value[stepIndex].approvers.length > 1) {
+ approvalSteps.value[stepIndex].approvers.splice(approverIndex, 1);
+ } else {
+ uni.showToast({
+ title: '姣忎釜姝ラ鑷冲皯闇�瑕佷竴涓鎵逛汉',
+ icon: 'none'
+ });
+ }
+ };
+
+ const removeApprovalStep = (stepIndex) => {
+ // 纭繚鑷冲皯淇濈暀涓�涓鎵规楠�
+ if (approvalSteps.value.length > 1) {
+ approvalSteps.value.splice(stepIndex, 1);
+ } else {
+ uni.showToast({
+ title: '鑷冲皯闇�瑕佷竴涓鎵规楠�',
+ icon: 'none'
+ });
+ }
+ };
+
+ return {
+ rules,
+ removeApprovalStep,
+ removeApprover,
+ result,
+ pickerValue,
+ columns,
+ onConfirm,
+ showPicker,
+ taxPrice,
+ contractAmount,
+ goBack,
+ submitForm,
+ approvalSteps,
+ addApprover,
+ addApprovalStep,
+ formRef,
+ message
+ };
+ },
+};
+</script>
+
+<style scoped lang="scss">
+.account-detail {
+ min-height: 100vh;
+ background: #f8f9fa;
+ padding-bottom: 80px;
+}
+
+.header {
+ display: flex;
+ align-items: center;
+ background: #fff;
+ padding: 16px 20px;
+ border-bottom: 1px solid #f0f0f0;
+ position: sticky;
+ top: 0;
+ z-index: 100;
+}
+
+.title {
+ flex: 1;
+ text-align: center;
+ font-size: 18px;
+ font-weight: 600;
+ color: #333;
+}
+
+.form-section {
+ margin-top: 16px;
+}
+
+.van-field {
+ height: 56px;
+ line-height: 36px;
+}
+
+.product-section {
+ background: #fff;
+ margin: 16px;
+ border-radius: 16px;
+ padding: 20px 16px 8px 16px;
+ box-shadow: 0 2px 8px rgba(0, 0, 0, 0.04);
+}
+
+.section-header {
+ display: flex;
+ align-items: center;
+ justify-content: space-between;
+ margin-bottom: 12px;
+}
+
+.section-title {
+ font-size: 16px;
+ font-weight: 600;
+ color: #333;
+}
+
+.add-btn {
+ background: #2979ff;
+ color: #fff;
+ border-radius: 8px;
+ padding: 4px 16px;
+ font-size: 14px;
+}
+
+.product-card {
+ background: #f8f9fa;
+ border-radius: 12px;
+ padding: 12px;
+ margin-bottom: 16px;
+ box-shadow: 0 1px 4px rgba(41, 121, 255, 0.06);
+ position: relative;
+}
+
+.product-row {
+ display: flex;
+ align-items: center;
+ margin-bottom: 8px;
+}
+
+.product-label {
+ min-width: 60px;
+ color: #888;
+ font-size: 13px;
+}
+
+.del-row {
+ justify-content: flex-end;
+}
+
+.del-btn {
+ background: #ff4d4f;
+ color: #fff;
+ border-radius: 8px;
+ padding: 4px 16px;
+ font-size: 13px;
+ margin-top: 4px;
+}
+
+.approval-process {
+ background: #fff;
+ margin: 16px;
+ border-radius: 16px;
+ padding: 16px;
+ box-shadow: 0 2px 8px rgba(0, 0, 0, 0.04);
+}
+
+.approval-header {
+ margin-bottom: 16px;
+}
+
+.approval-title {
+ font-size: 16px;
+ font-weight: 600;
+ color: #333;
+ display: block;
+ margin-bottom: 4px;
+}
+
+.approval-desc {
+ font-size: 12px;
+ color: #999;
+}
+
+.approval-steps {
+ padding-left: 16px;
+ position: relative;
+}
+
+.approval-step {
+ position: relative;
+ margin-bottom: 20px;
+}
+
+.step-title {
+ margin-bottom: 12px;
+}
+
+.step-title text {
+ font-size: 14px;
+ color: #666;
+ background: #f0f0f0;
+ padding: 2px 8px;
+ border-radius: 4px;
+}
+
+.approvers-container {
+ display: flex;
+ flex-wrap: wrap;
+ gap: 12px;
+ margin-bottom: 8px;
+}
+
+.approver-item {
+ display: flex;
+ flex-direction: column;
+ align-items: center;
+ width: 60px;
+}
+
+.approver-avatar {
+ width: 40px;
+ height: 40px;
+ background: #e6f7ff;
+ border-radius: 50%;
+ margin-bottom: 4px;
+ display: flex;
+ align-items: center;
+ justify-content: center;
+}
+
+.approver-avatar::after {
+ content: '馃懁';
+ font-size: 20px;
+}
+
+.approver-name {
+ font-size: 12px;
+ color: #333;
+ text-align: center;
+ white-space: nowrap;
+ overflow: hidden;
+ text-overflow: ellipsis;
+ margin-bottom: 2px;
+}
+
+.delete-approver-btn {
+ font-size: 12px;
+ color: #ff4d4f;
+ background: rgba(255, 77, 79, 0.1);
+ width: 16px;
+ height: 16px;
+ border-radius: 50%;
+ display: flex;
+ align-items: center;
+ justify-content: center;
+ margin-top: 2px;
+}
+
+.delete-step-btn {
+ margin-top: 8px;
+ color: #ff4d4f;
+ font-size: 12px;
+ background: rgba(255, 77, 79, 0.1);
+ padding: 2px 8px;
+ border-radius: 4px;
+ display: inline-block;
+ }
+
+.add-approver-btn {
+ width: 40px;
+ height: 40px;
+ border: 1px dashed #ccc;
+ border-radius: 50%;
+ display: flex;
+ align-items: center;
+ justify-content: center;
+ font-size: 20px;
+ color: #999;
+ margin-top: 8px;
+}
+
+.step-line {
+ position: absolute;
+ left: 20px;
+ top: 100%;
+ width: 1px;
+ height: 30px;
+ background: #e0e0e0;
+}
+
+.add-step-btn {
+ display: flex;
+ align-items: center;
+ justify-content: center;
+ margin-top: 16px;
+ color: #006cfb;
+ font-size: 14px;
+ padding: 8px 0;
+ border: 1px dashed #006cfb;
+ border-radius: 8px;
+}
+
+.footer-btns {
+ position: fixed;
+ left: 0;
+ right: 0;
+ bottom: 0;
+ background: #fff;
+ display: flex;
+ justify-content: space-around;
+ align-items: center;
+ padding: 12px 0;
+ box-shadow: 0 -2px 8px rgba(0, 0, 0, 0.05);
+ z-index: 1000;
+}
+
+.cancel-btn {
+ font-weight: 400;
+ font-size: 16px;
+ color: #ffffff;
+ width: 102px;
+ background: #c7c9cc;
+ box-shadow: 0px 4px 10px 0px rgba(3, 88, 185, 0.2);
+ border-radius: 40px 40px 40px 40px;
+}
+
+.save-btn {
+ font-weight: 400;
+ font-size: 16px;
+ color: #ffffff;
+ width: 224px;
+ background: linear-gradient(140deg, #00baff 0%, #006cfb 100%);
+ box-shadow: 0px 4px 10px 0px rgba(3, 88, 185, 0.2);
+ border-radius: 40px 40px 40px 40px;
+}
+</style>
\ No newline at end of file
--
Gitblit v1.9.3