From 1cef3adee31c6934c0da4b4f0b8a6f5ac03b364f Mon Sep 17 00:00:00 2001
From: zhangjiaqing <z1637266029@163.com>
Date: 星期四, 09 四月 2026 16:50:09 +0800
Subject: [PATCH] 小区信息添加页面修复市不显示问题情况，修复采购导入不稳定情况
---
public/pages/property/costDetail/add/add.html | 276 +++++++++++++++++++++++++++++++++++++++++++-----------
1 files changed, 218 insertions(+), 58 deletions(-)
diff --git a/public/pages/property/costDetail/add/add.html b/public/pages/property/costDetail/add/add.html
index 057a93e..2f51942 100644
--- a/public/pages/property/costDetail/add/add.html
+++ b/public/pages/property/costDetail/add/add.html
@@ -1,108 +1,268 @@
-<div class="form-container">
+<div class="cost-detail-container hc-table-div form-container ibox-content" style="padding: 20px;background-color: white;margin: 0px;">
<h2 style="font-weight: 600;">娣诲姞</h2>
<form>
- <!-- 娴佽浆缂栫爜 + 鏃ユ湡 -->
+ <!-- 杈呭姪鍒� + 娴佽浆缂栫爜 + 娴佹按鍙� -->
<div class="form-row">
- <label class="form-label" for="flowCode">娴佽浆缂栫爜</label>
- <input type="text" id="flowCode" class="form-input" placeholder="璇疯緭鍏�">
- <label class="form-label" for="date">鏃ユ湡</label>
- <input type="date" id="date" class="form-input" placeholder="yyyy/mm/鏃�">
+ <label class="form-label" for="auxiliaryColumn">杈呭姪鍒�</label>
+ <input type="text" id="auxiliaryColumn" class="form-input" placeholder="璇疯緭鍏�" v-model="costDetailInfo.auxiliaryColumn">
+ <label class="form-label" for="flowNumber">娴佽浆缂栫爜</label>
+ <input type="text" id="flowNumber" class="form-input" placeholder="璇疯緭鍏�" v-model="costDetailInfo.flowNumber">
+ <label class="form-label" for="serialNumber">娴佹按鍙�</label>
+ <input type="text" id="serialNumber" class="form-input" placeholder="璇疯緭鍏�" v-model="costDetailInfo.serialNumber">
</div>
- <!-- 灏忓尯鍚嶇О + 灏忓尯缂栫爜锛堝甫澶囨敞锛� -->
+ <!-- 椤圭洰缂栫爜 + 椤圭洰鍚嶇О -->
<div class="form-row">
- <label class="form-label" for="communityName">灏忓尯鍚嶇О</label>
- <input type="text" id="communityName" class="form-input" placeholder="璇疯緭鍏�">
- <label class="form-label">灏忓尯缂栫爜</label>
- <input type="text" id="communityCode" class="form-input" placeholder="璇疯緭鍏�">
+ <label class="form-label" for="projectCode">椤圭洰缂栫爜</label>
+ <input type="text" id="projectCode" class="form-input" placeholder="璇疯緭鍏�" v-model="costDetailInfo.projectCode">
+ <label class="form-label" for="projectName">椤圭洰鍚嶇О</label>
+ <input type="text" id="projectName" class="form-input" placeholder="璇疯緭鍏�" v-model="costDetailInfo.projectName">
+ </div>
+
+ <!-- 骞� + 鏈� + 鏃� + 鏃ユ湡 -->
+ <div class="form-row">
+ <label class="form-label" for="year">骞�</label>
+ <input type="text" id="year" class="form-input" placeholder="璇疯緭鍏�" v-model="costDetailInfo.year">
+ <label class="form-label" for="month">鏈�</label>
+ <input type="text" id="month" class="form-input" placeholder="璇疯緭鍏�" v-model="costDetailInfo.month">
+ <label class="form-label" for="day">鏃�</label>
+ <input type="text" id="day" class="form-input" placeholder="璇疯緭鍏�" v-model="costDetailInfo.day">
+ <label class="form-label" for="date">鏃ユ湡</label>
+ <input type="date" id="date" class="form-input" placeholder="yyyy/mm/dd" v-model="costDetailInfo.date">
</div>
<!-- 宸ョ▼鍐呭 -->
<div class="form-row">
<label class="form-label" for="projectContent">宸ョ▼鍐呭</label>
- <input type="text" id="projectContent" class="form-input" placeholder="璇疯緭鍏�" style="width: 555px;">
+ <input type="text" id="projectContent" class="form-input" placeholder="璇疯緭鍏�" style="width: 555px;" v-model="costDetailInfo.projectContent">
</div>
- <!-- 绠＄悊澶勯噾棰� + 鏄惁鐩栫珷 -->
+ <!-- 绠＄悊澶勯噾棰� + 绠＄悊澶勬槸鍚︾洊绔� -->
<div class="form-row">
- <label class="form-label" for="mgmtAmount">绠＄悊澶勯噾棰�</label>
- <input type="text" id="mgmtAmount" class="form-input" placeholder="璇疯緭鍏�">
+ <label class="form-label" for="managementOfficeAmount">绠＄悊澶勯噾棰�</label>
+ <input type="text" id="managementOfficeAmount" class="form-input" placeholder="璇疯緭鍏�" v-model="costDetailInfo.managementOfficeAmount">
<span>鍏�</span>
- <label class="form-label">鏄惁鐩栫珷</label>
+ <label class="form-label">绠＄悊澶勬槸鍚︾洊绔�</label>
<div class="radio-group">
- <input type="radio" id="mgmtSealYes" name="mgmtSeal" checked>
- <label for="mgmtSealYes" style="margin-top: 8px;">鏄�</label>
- <input type="radio" id="mgmtSealNo" name="mgmtSeal">
- <label for="mgmtSealNo" style="margin-top: 8px;">鍚�</label>
+ <input type="radio" id="managementOfficeSealYes" name="managementOfficeSeal" value="1" v-model="costDetailInfo.managementOfficeSeal">
+ <label for="managementOfficeSealYes" style="margin-top: 8px;">鏄�</label>
+ <input type="radio" id="managementOfficeSealNo" name="managementOfficeSeal" value="0" v-model="costDetailInfo.managementOfficeSeal">
+ <label for="managementOfficeSealNo" style="margin-top: 8px;">鍚�</label>
</div>
</div>
- <!-- 涓氬浼氶噾棰� + 瀹′环閲戦 + 鏄惁鐩栫珷 + 绛炬姤閮ㄩ棬 -->
+ <!-- 涓氬浼氶噾棰� + 瀹′环閲戦 + 涓氬浼氭槸鍚︾洊绔� + 绛炬姤閮ㄩ棬 -->
<div class="form-row">
- <label class="form-label" for="committeeAmount">涓氬浼氶噾棰�</label>
- <input type="text" id="committeeAmount" class="form-input" placeholder="璇疯緭鍏�">
+ <label class="form-label" for="ownersCommitteeAmount">涓氬浼氶噾棰�</label>
+ <input type="text" id="ownersCommitteeAmount" class="form-input" placeholder="璇疯緭鍏�" v-model="costDetailInfo.ownersCommitteeAmount">
<span>鍏�</span>
<label class="form-label" for="auditAmount">瀹′环閲戦</label>
- <input type="text" id="auditAmount" class="form-input" placeholder="璇疯緭鍏�">
+ <input type="text" id="auditAmount" class="form-input" placeholder="璇疯緭鍏�" v-model="costDetailInfo.auditAmount">
<span>鍏�</span>
- <label class="form-label">鏄惁鐩栫珷</label>
+ <label class="form-label">涓氬浼氭槸鍚︾洊绔�</label>
<div class="radio-group">
- <input type="radio" id="committeeSealYes" name="committeeSeal" checked>
- <label for="committeeSealYes" style="margin-top: 8px;">鏄�</label>
- <input type="radio" id="committeeSealNo" name="committeeSeal">
- <label for="committeeSealNo" style="margin-top: 8px;">鍚�</label>
+ <input type="radio" id="ownersCommitteeSealYes" name="ownersCommitteeSeal" value="1" v-model="costDetailInfo.ownersCommitteeSeal">
+ <label for="ownersCommitteeSealYes" style="margin-top: 8px;">鏄�</label>
+ <input type="radio" id="ownersCommitteeSealNo" name="ownersCommitteeSeal" value="0" v-model="costDetailInfo.ownersCommitteeSeal">
+ <label for="ownersCommitteeSealNo" style="margin-top: 8px;">鍚�</label>
</div>
- <label class="form-label" for="approveDept">绛炬姤閮ㄩ棬</label>
- <select id="approveDept" class="form-select">
- <option value="1">1</option>
+ <label class="form-label" for="reportDepartment">绛炬姤閮ㄩ棬</label>
+ <select id="reportDepartment" class="form-input" v-model="costDetailInfo.reportDepartment" style="width: 120px;">
+ <option value="">璇烽�夋嫨</option>
+ <option value="鐢垫閮�">鐢垫閮�</option>
+ <option value="宸ョ▼閮�">宸ョ▼閮�</option>
+ <option value="绠＄悊澶�">绠＄悊澶�</option>
+ <option value="涓氬浼�">涓氬浼�</option>
+ <option value="鏅鸿兘鍖�">鏅鸿兘鍖�</option>
+ <option value="鍝佽川閮�">鍝佽川閮�</option>
+ <option value="灏忓尯缁忕悊">灏忓尯缁忕悊</option>
</select>
</div>
- <!-- 鍒嗘憡鑼冨洿 + 缁翠慨绫诲瀷 -->
+ <!-- 鍩洪噾绫诲瀷涓�绾� + 鍩洪噾绫诲瀷浜岀骇 -->
<div class="form-row">
+ <label class="form-label" for="fundTypeLevel1">鍩洪噾绫诲瀷涓�绾�</label>
+ <input type="text" id="fundTypeLevel1" class="form-input" placeholder="璇疯緭鍏�" v-model="costDetailInfo.fundTypeLevel1">
+ <label class="form-label" for="fundTypeLevel2">鍩洪噾绫诲瀷浜岀骇</label>
+ <input type="text" id="fundTypeLevel2" class="form-input" placeholder="璇疯緭鍏�" v-model="costDetailInfo.fundTypeLevel2">
+ </div>
+
+ <!-- 缁翠慨绫诲瀷 + 鍒嗘憡鑼冨洿 -->
+ <div class="form-row">
+ <label class="form-label" for="maintenanceType">缁翠慨绫诲瀷</label>
+ <input type="text" id="maintenanceType" class="form-input" placeholder="璇疯緭鍏�" v-model="costDetailInfo.maintenanceType" style="width: 120px;">
<label class="form-label">鍒嗘憡鑼冨洿</label>
<div class="radio-group">
- <input type="radio" id="shareBuilding" name="shareScope" checked>
- <label for="shareBuilding" style="margin-top: 8px;">骞�</label>
- <input type="radio" id="shareAll" name="shareScope">
- <label for="shareAll" style="margin-top: 8px;">鍏ㄤ綋</label>
+ <input type="radio" id="buildingOrAll1" name="buildingOrAll" value="1" v-model="costDetailInfo.buildingOrAll">
+ <label for="buildingOrAll1" style="margin-top: 8px;">骞�</label>
+ <input type="radio" id="buildingOrAll2" name="buildingOrAll" value="2" v-model="costDetailInfo.buildingOrAll">
+ <label for="buildingOrAll2" style="margin-top: 8px;">鍏ㄤ綋</label>
</div>
- <label class="form-label" for="repairType">缁翠慨绫诲瀷</label>
- <select id="repairType" class="form-select">
- <option value="1">1</option>
- <option value="2">2</option>
- <option value="3">3</option>
- </select>
</div>
- <!-- 鍩洪噾涓庤鏂� + 涓氫富澶т細鑼冨洿 + 闂ㄧ墝骞㈣寖鍥� -->
+ <!-- 涓撻」鍏憡鐘舵�� + 棰濆害 -->
+ <div class="form-row">
+ <label class="form-label" for="specificAnnouncementStatus">涓撻」鍏憡鐘舵��</label>
+ <input type="text" id="specificAnnouncementStatus" class="form-input" placeholder="璇疯緭鍏�" v-model="costDetailInfo.specificAnnouncementStatus">
+ <label class="form-label" for="quota">棰濆害</label>
+ <input type="text" id="quota" class="form-input" placeholder="璇疯緭鍏�" v-model="costDetailInfo.quota">
+ </div>
+
+ <!-- 涓氬浼氬喅璁� + 涓氬浼氬緛璇� -->
+ <div class="form-row">
+ <label class="form-label" for="ownerCommitteeResolution">涓氬浼氬喅璁�</label>
+ <input type="text" id="ownerCommitteeResolution" class="form-input" placeholder="璇疯緭鍏�" v-model="costDetailInfo.ownerCommitteeResolution">
+ <label class="form-label" for="ownerCommitteeConsultation">涓氬浼氬緛璇�</label>
+ <input type="text" id="ownerCommitteeConsultation" class="form-input" placeholder="璇疯緭鍏�" v-model="costDetailInfo.ownerCommitteeConsultation">
+ </div>
+
+ <!-- 鏀彇閬囧埌闂 + 鐭己鎴栨嫋娆� -->
+ <div class="form-row">
+ <label class="form-label" for="withdrawalEncounteredProblem">鏀彇閬囧埌闂</label>
+ <input type="text" id="withdrawalEncounteredProblem" class="form-input" placeholder="璇疯緭鍏�" v-model="costDetailInfo.withdrawalEncounteredProblem">
+ <label class="form-label" for="shortageOrArrears">鐭己鎴栨嫋娆�</label>
+ <input type="text" id="shortageOrArrears" class="form-input" placeholder="璇疯緭鍏�" v-model="costDetailInfo.shortageOrArrears">
+ </div>
+
+ <!-- 璺悕 + 寮� + 鍙� + 瀹� -->
+ <div class="form-row">
+ <label class="form-label" for="roadName">璺悕</label>
+ <input type="text" id="roadName" class="form-input" placeholder="璇疯緭鍏�" v-model="costDetailInfo.roadName">
+ <label class="form-label" for="lane">寮�</label>
+ <input type="text" id="lane" class="form-input" placeholder="璇疯緭鍏�" v-model="costDetailInfo.lane">
+ <label class="form-label" for="door">鍙�</label>
+ <input type="text" id="door" class="form-input" placeholder="璇疯緭鍏�" v-model="costDetailInfo.door">
+ <label class="form-label" for="room">瀹�</label>
+ <input type="text" id="room" class="form-input" placeholder="璇疯緭鍏�" v-model="costDetailInfo.room">
+ </div>
+
+ <!-- 瀹ゅ彿 + 涓氫富鍦板潃 -->
+ <div class="form-row">
+ <label class="form-label" for="doorRoomNumber">瀹ゅ彿</label>
+ <input type="text" id="doorRoomNumber" class="form-input" placeholder="璇疯緭鍏�" v-model="costDetailInfo.doorRoomNumber">
+ <label class="form-label" for="ownerAddress">涓氫富鍦板潃</label>
+ <input type="text" id="ownerAddress" class="form-input" placeholder="璇疯緭鍏�" v-model="costDetailInfo.ownerAddress">
+ </div>
+
+ <!-- 璐ㄤ繚鏈� + 璐ㄤ繚姣斾緥 + 璐ㄤ繚閲戦 -->
+ <div class="form-row">
+ <label class="form-label" for="qualityGuaranteePeriod2">璐ㄤ繚鏈�</label>
+ <input type="text" id="qualityGuaranteePeriod2" class="form-input" placeholder="璇疯緭鍏�" v-model="costDetailInfo.qualityGuaranteePeriod2">
+ <label class="form-label" for="qualityGuaranteeRatio">璐ㄤ繚姣斾緥</label>
+ <input type="text" id="qualityGuaranteeRatio" class="form-input" placeholder="璇疯緭鍏�" v-model="costDetailInfo.qualityGuaranteeRatio">
+ <label class="form-label" for="qualityGuaranteeAmount">璐ㄤ繚閲戦</label>
+ <input type="text" id="qualityGuaranteeAmount" class="form-input" placeholder="璇疯緭鍏�" v-model="costDetailInfo.qualityGuaranteeAmount">
+ <span>鍏�</span>
+ </div>
+
+ <!-- 楠屾敹鏃ユ湡 + 瀹′环鏃ユ湡 + 鍙敮鍙栨棩鏈� -->
+ <div class="form-row">
+ <label class="form-label" for="acceptanceDate">楠屾敹鏃ユ湡</label>
+ <input type="date" id="acceptanceDate" class="form-input" placeholder="璇烽�夋嫨" v-model="costDetailInfo.acceptanceDate">
+ <label class="form-label" for="auditDate">瀹′环鏃ユ湡</label>
+ <input type="date" id="auditDate" class="form-input" placeholder="璇烽�夋嫨" v-model="costDetailInfo.auditDate">
+ <label class="form-label" for="availableWithdrawalDate">鍙敮鍙栨棩鏈�</label>
+ <input type="date" id="availableWithdrawalDate" class="form-input" placeholder="璇烽�夋嫨" v-model="costDetailInfo.availableWithdrawalDate">
+ </div>
+
+ <!-- 绠＄悊璐规瘮渚� -->
+ <div class="form-row">
+ <label class="form-label" for="managementFeeRatio">绠＄悊璐规瘮渚�</label>
+ <input type="text" id="managementFeeRatio" class="form-input" placeholder="璇疯緭鍏�" v-model="costDetailInfo.managementFeeRatio">
+ </div>
+
+ <!-- 鏀舵浜哄鍚� + 韬唤璇佸彿 -->
+ <div class="form-row">
+ <label class="form-label" for="payeeName">鏀舵浜哄鍚�</label>
+ <input type="text" id="payeeName" class="form-input" placeholder="璇疯緭鍏�" v-model="costDetailInfo.payeeName">
+ <label class="form-label" for="idCardNumber">韬唤璇佸彿</label>
+ <input type="text" id="idCardNumber" class="form-input" placeholder="璇疯緭鍏�" v-model="costDetailInfo.idCardNumber">
+ </div>
+
+ <!-- 閾惰鍚嶇О + 閾惰璐﹀彿 -->
+ <div class="form-row">
+ <label class="form-label" for="bankName">閾惰鍚嶇О</label>
+ <input type="text" id="bankName" class="form-input" placeholder="璇疯緭鍏�" v-model="costDetailInfo.bankName">
+ <label class="form-label" for="bankAccount">閾惰璐﹀彿</label>
+ <input type="text" id="bankAccount" class="form-input" placeholder="璇疯緭鍏�" v-model="costDetailInfo.bankAccount">
+ </div>
+
+ <!-- 棰勪粯娆� + 搴斾粯閲戦 -->
+ <div class="form-row">
+ <label class="form-label" for="advancedPayment">棰勪粯娆�</label>
+ <input type="text" id="advancedPayment" class="form-input" placeholder="璇疯緭鍏�" v-model="costDetailInfo.advancedPayment">
+ <span>鍏�</span>
+ <label class="form-label" for="payableAmountD">搴斾粯閲戦</label>
+ <input type="text" id="payableAmountD" class="form-input" placeholder="璇疯緭鍏�" v-model="costDetailInfo.payableAmountD">
+ <span>鍏�</span>
+ </div>
+
+ <!-- 鍩洪噾涓庤鏂斤紙鍘熸湁閫昏緫淇濈暀锛� -->
<div class="form-row">
<label class="form-label">鍩洪噾涓庤鏂�</label>
<div class="radio-group">
- <input type="radio" id="fundRepair" name="fundType" checked>
+ <input type="radio" id="fundRepair" name="fundType" value="repair" v-model="costDetailInfo.fundType">
<label for="fundRepair" style="margin-top: 8px;">缁翠慨璧勯噾</label>
</div>
- <label class="form-label" for="ownerScope">涓氫富澶т細鑼冨洿</label>
- <select id="ownerScope" class="form-select">
- <option value="multi">澶氶��</option>
- </select>
- <label class="form-label" for="buildingScope">闂ㄧ墝骞㈣寖鍥�</label>
- <select id="buildingScope" class="form-select">
- <option value="multi">澶氶��</option>
- </select>
+ <div class="radio-group" style="margin-left: 100px;" v-if="costDetailInfo.fundType === 'repair'">
+ <label class="form-label" for="ownerScope">涓氫富澶т細鑼冨洿</label>
+ <div class="multi-select-wrapper">
+ <div class="multi-select-input" @click="toggleOwnerScopeDropdown" :class="{ 'active': ownerScopeDropdownOpen }">
+ <div class="multi-select-tags">
+ <span v-for="(item, index) in (costDetailInfo.ownerScope || [])" :key="'tag-' + index" class="multi-select-tag">
+ {{ item }}
+ <span class="multi-select-tag-close" @click.stop="removeOwnerScopeItem(index)">脳</span>
+ </span>
+ <span v-if="!costDetailInfo.ownerScope || costDetailInfo.ownerScope.length === 0" class="multi-select-placeholder">璇烽�夋嫨</span>
+ </div>
+ <span class="multi-select-arrow">鈻�</span>
+ </div>
+ <div class="multi-select-dropdown" style="top: -300px" v-show="ownerScopeDropdownOpen">
+ <div class="multi-select-option" v-for="(option, index) in ownerScopeOptions" :key="'option-' + index" @click.stop="toggleOwnerScopeOption(option)">
+ <input type="checkbox" :checked="costDetailInfo.ownerScope && costDetailInfo.ownerScope.indexOf(option) !== -1" @click.stop="toggleOwnerScopeOption(option)">
+ <label>{{ option }}</label>
+ </div>
+ </div>
+ </div>
+ <label class="form-label" for="buildingScope">闂ㄧ墝骞㈣寖鍥�</label>
+ <div class="multi-select-wrapper">
+ <div class="multi-select-input" @click="toggleBuildingScopeDropdown" :class="{ 'active': buildingScopeDropdownOpen }">
+ <div class="multi-select-tags">
+ <span v-for="(item, index) in (costDetailInfo.buildingScope || [])" :key="'building-tag-' + index" class="multi-select-tag">
+ {{ item }}
+ <span class="multi-select-tag-close" @click.stop="removeBuildingScopeItem(index)">脳</span>
+ </span>
+ <span v-if="!costDetailInfo.buildingScope || costDetailInfo.buildingScope.length === 0" class="multi-select-placeholder">璇烽�夋嫨</span>
+ </div>
+ <span class="multi-select-arrow">鈻�</span>
+ </div>
+ <div class="multi-select-dropdown" style="top: -300px" v-show="buildingScopeDropdownOpen">
+ <div class="multi-select-option" v-for="(option, index) in buildingScopeOptions" :key="'building-option-' + index" @click.stop="toggleBuildingScopeOption(option)">
+ <input type="checkbox" :checked="costDetailInfo.buildingScope && costDetailInfo.buildingScope.indexOf(option) !== -1" @click.stop="toggleBuildingScopeOption(option)">
+ <label>{{ option }}</label>
+ </div>
+ </div>
+ </div>
+ </div>
</div>
<div class="form-row">
<div class="radio-group" style="margin-left: 100px;">
- <input type="radio" id="fundPublic" name="fundType">
+ <input type="radio" id="fundPublic" name="fundType" value="public" v-model="costDetailInfo.fundType">
<label for="fundPublic" style="margin-top: 8px;">鍏叡鏀剁泭</label>
+ </div>
+ <div class="radio-group" style="margin-left: 100px;" v-if="costDetailInfo.fundType === 'public'">
+ <input type="radio" id="fundSystemOut" name="fundSystemType" value="out" v-model="costDetailInfo.fundSystemType">
+ <label for="fundSystemOut" style="margin-top: 8px;">绯荤粺澶�</label>
+ <input type="radio" id="fundSystemIn" name="fundSystemType" value="in" v-model="costDetailInfo.fundSystemType">
+ <label for="fundSystemIn" style="margin-top: 8px;">绯荤粺鍐�</label>
</div>
</div>
- <!-- 鎸夐挳缁� -->
- <div class="btn-group">
- <button type="button" class="btn-cancel">鍙栨秷</button>
- <button type="button" class="btn-save">淇濆瓨</button>
+ <!-- 鎸夐挳缁� 鍙充笅瑙掑浐瀹� -->
+ <div class="btn-group" style="position: relative;float: right; right: 30px; bottom: 30px; z-index: 999;">
+ <button type="button" class="btn-cancel" v-on:click="_cancel()">鍙栨秷</button>
+ <button type="button" class="btn-save" v-on:click="_saveCostDetail()">淇濆瓨</button>
</div>
</form>
</div>
\ No newline at end of file
--
Gitblit v1.8.0