From 0677faf2ae8940aaafae3d394a8ea1100e070947 Mon Sep 17 00:00:00 2001
From: liubp <1535785116@qq.com>
Date: 星期一, 22 十二月 2025 19:22:21 +0800
Subject: [PATCH] 1.新增：费用明细-编辑页面，费用明细-添加页面，费用明细-更多页面
---
public/components/frame/privilegeTree/privilegeTree.js | 43 +
public/pages/frame/role/role-a/role-a.js | 298 ++++++++++++
public/pages/property/costDetail/detail/detail.html | 0
public/pages/property/costDetail/more/more.html | 452 ++++++++++++++++++
public/pages/property/costDetail/add/add.html | 108 ++++
public/pages/property/costDetail/costDetail.html | 2
public/pages/property/costDetail/edit/edit.html | 108 ++++
public/pages/property/costDetail/add/add.js | 0
public/pages/property/costDetail/edit/edit.js | 0
public/pages/property/costDetail/more/more.js | 294 ++++++++++++
public/pages/frame/role/role-a/role-a.html | 24 +
public/css/vc.css | 62 ++
public/pages/property/costDetail/detail/detail.js | 0
13 files changed, 1,389 insertions(+), 2 deletions(-)
diff --git a/public/components/frame/privilegeTree/privilegeTree.js b/public/components/frame/privilegeTree/privilegeTree.js
index 4846aa9..793a511 100644
--- a/public/components/frame/privilegeTree/privilegeTree.js
+++ b/public/components/frame/privilegeTree/privilegeTree.js
@@ -125,6 +125,49 @@
$that.deletePrivilege(_selectPrivileges);
}
});
+ // 鍦ㄦ爲鍔犺浇瀹屾垚鍚庯紝涓虹涓夌骇鑺傜偣娣诲姞"鏉冮檺"鎸夐挳
+ $('#jstree_privilege').on("ready.jstree", function (e, data) {
+ $that._addPermissionButtons();
+ });
+ // 褰撴爲鑺傜偣灞曞紑鏃讹紝涓哄睍寮�鐨勭涓夌骇鑺傜偣娣诲姞鎸夐挳
+ $('#jstree_privilege').on("open_node.jstree", function (e, data) {
+ setTimeout(function () {
+ $that._addPermissionButtons();
+ }, 100);
+ });
+ // 褰撴爲鍒锋柊鏃讹紝閲嶆柊娣诲姞鎸夐挳
+ $('#jstree_privilege').on("refresh.jstree", function (e, data) {
+ setTimeout(function () {
+ $that._addPermissionButtons();
+ }, 100);
+ });
+ },
+ _addPermissionButtons: function () {
+ // 鑾峰彇鎵�鏈夌涓夌骇鑺傜偣锛坕d浠_寮�澶达級
+ $('#jstree_privilege').find('li[id^="p_"]').each(function () {
+ let $node = $(this);
+ let $anchor = $node.find('> a.jstree-anchor');
+ // 妫�鏌ユ槸鍚﹀凡缁忔坊鍔犺繃鎸夐挳
+ if ($anchor.next('.permission-btn').length === 0) {
+ // 鍒涘缓鏉冮檺鎸夐挳
+ let $btn = $('<button class="permission-btn" style="margin-left: 10px; padding: 2px 8px; font-size: 12px; border: 1px solid #ccc; border-radius: 3px; background: #fff; cursor: pointer; color: #333;">鏉冮檺</button>');
+ // 鑾峰彇鏉冮檺ID
+ let nodeId = $node.attr('id');
+ let pId = nodeId.substring(2); // 鍘绘帀"p_"鍓嶇紑
+ // 缁戝畾鐐瑰嚮浜嬩欢
+ $btn.on('click', function (e) {
+ e.stopPropagation(); // 闃绘浜嬩欢鍐掓场锛岄伩鍏嶈Е鍙戞爲鑺傜偣鐨勯�夋嫨
+ // 鑾峰彇褰撳墠椤甸潰鐨勫弬鏁�
+ let pgId = vc.component.privilegeTreeInfo._currentPgId;
+ let communityId = vc.getCurrentCommunity().communityId;
+ // 璺宠浆鍒皉ole-a椤甸潰锛屼紶閫掓墍鏈夊弬鏁�
+ let params = 'pId=' + pId + '&pgId=' + pgId + '&communityId=' + communityId + '&type=all';
+ vc.jumpToPage('/#/pages/frame/role/role-a?' + params);
+ });
+ // 灏嗘寜閽彃鍏ュ埌鑺傜偣鍚庨潰
+ $anchor.after($btn);
+ }
+ });
},
_doJsTreeData: function (_privileges) {
let _mGroupTree = [];
diff --git a/public/css/vc.css b/public/css/vc.css
index d756004..c48029f 100644
--- a/public/css/vc.css
+++ b/public/css/vc.css
@@ -1289,6 +1289,8 @@
}
.cost-detail-container .search-bar label {
+ position: relative;
+ top: 4px;
font-size: 14px;
color: #333;
white-space: nowrap;
@@ -1297,13 +1299,14 @@
.cost-detail-container .search-bar input,
.cost-detail-container .search-bar select {
- padding: 6px 12px;
+ padding: 0 12px;
border: 1px solid #d9d9d9;
border-radius: 4px;
font-size: 14px;
height: 32px;
min-width: 150px;
background: #fff;
+ line-height: 32px;
}
.cost-detail-container .search-bar .queryDate {
@@ -1547,4 +1550,61 @@
#costDetailTableHead th{
background-color: rgb(233, 243, 255);
+}
+
+.form-container {
+ margin: 20px;
+ font-family: "寰蒋闆呴粦", Arial, sans-serif;
+}
+.form-row {
+ display: flex;
+ align-items: center;
+ margin-bottom: 18px;
+ gap: 15px;
+}
+.form-label {
+ width: 85px;
+ text-align: right;
+ padding-top: 8px;
+}
+.form-input {
+ padding: 6px;
+ width: 220px;
+ border: 1px solid #ddd;
+ border-radius: 4px;
+}
+.form-note {
+ color: red;
+ font-size: 12px;
+}
+.form-container .radio-group {
+ display: flex;
+ gap: 12px;
+}
+.form-container select {
+ padding: 6px;
+ width: 100px;
+ border: 1px solid #ddd;
+ border-radius: 4px;
+}
+.form-container .btn-group {
+ margin-left: 95px;
+ margin-top: 25px;
+}
+.form-container .btn-cancel {
+ background-color: #0d6efd;
+ color: white;
+ border: none;
+ padding: 8px 18px;
+ border-radius: 4px;
+ cursor: pointer;
+ margin-right: 12px;
+}
+.form-container .btn-save {
+ background-color: #0d6efd;
+ color: white;
+ border: none;
+ padding: 8px 18px;
+ border-radius: 4px;
+ cursor: pointer;
}
\ No newline at end of file
diff --git a/public/pages/frame/role/role-a/role-a.html b/public/pages/frame/role/role-a/role-a.html
new file mode 100644
index 0000000..464dc07
--- /dev/null
+++ b/public/pages/frame/role/role-a/role-a.html
@@ -0,0 +1,24 @@
+<h1 style="font-weight: 600;">椤甸潰鏉冮檺閰嶇疆</h1>
+<div class="role-a-container">
+ <h3>鍏ㄩ儴</h3>
+ <div class="role-a-checkbox">
+ <label>鍏ㄩ儴</label>
+ <input type="checkbox" name="all" id="all">
+ </div>
+ <h3>鎸夐挳</h3>
+ <div class="role-a-checkbox" style="gap: 10px; display: flex; align-items: center;">
+ <label>鍏ㄩ儴</label>
+ <input type="checkbox" id="button-all">
+ </div>
+ <div id="button-container"></div>
+ <h3>琛ㄥご</h3>
+ <div class="role-a-checkbox" style="gap: 10px; display: flex; align-items: center;">
+ <label>鍏ㄩ儴</label>
+ <input type="checkbox" id="data-all">
+ </div>
+ <div id="data-container"></div>
+ <div class="role-a-buttons">
+ <button type="button" class="btn btn-primary" id="save">淇濆瓨</button>
+ <button type="button" class="btn btn-primary" id="cancel" v-on:click="goBack">杩斿洖</button>
+ </div>
+</div>
diff --git a/public/pages/frame/role/role-a/role-a.js b/public/pages/frame/role/role-a/role-a.js
new file mode 100644
index 0000000..5ae417a
--- /dev/null
+++ b/public/pages/frame/role/role-a/role-a.js
@@ -0,0 +1,298 @@
+(function (vc) {
+ vc.extends({
+ data: {
+ roleAInfo: {
+ all: false,
+ button: false,
+ header: false
+ },
+ pgId: '', // 淇濆瓨瑙掕壊缂栫爜
+ privilegeData: [] // 淇濆瓨鏉冮檺鏁版嵁
+ },
+ _initMethod: function () {
+ // 鑾峰彇URL鍙傛暟
+ let pId = '';
+ let pgId = '';
+ let communityId = '';
+ let type = '';
+
+ // 浼樺厛浠� hash 涓幏鍙栧弬鏁帮紙鍗曢〉搴旂敤浣跨敤 hash 璺敱锛�
+ const hash = location.hash;
+ const search = location.search;
+
+ // 鍏堝皾璇曚粠 hash 涓幏鍙�
+ if (hash && hash.indexOf('?') !== -1) {
+ const hashParams = hash.substring(hash.indexOf('?') + 1);
+ const params = hashParams.split('&');
+ for (let i = 0; i < params.length; i++) {
+ const param = params[i].split('=');
+ const key = param[0];
+ const value = decodeURIComponent(param[1] || '');
+ if (key === 'pId') {
+ pId = value;
+ } else if (key === 'pgId') {
+ pgId = value;
+ } else if (key === 'communityId') {
+ communityId = value;
+ } else if (key === 'type') {
+ type = value;
+ }
+ }
+ }
+
+ // 濡傛灉 hash 涓病鏈夛紝灏濊瘯浠� search 涓幏鍙�
+ if (!pId) {
+ pId = vc.getParam('pId') || '';
+ }
+ if (!pgId) {
+ pgId = vc.getParam('pgId') || '';
+ }
+ if (!communityId) {
+ communityId = vc.getParam('communityId') || '';
+ }
+ if (!type) {
+ type = vc.getParam('type') || '';
+ }
+
+ // 濡傛灉缂哄皯蹇呰鍙傛暟锛屼娇鐢ㄩ粯璁ゅ�兼垨浠庡綋鍓嶇ぞ鍖鸿幏鍙�
+ if (!communityId) {
+ communityId = vc.getCurrentCommunity().communityId;
+ }
+
+ // 淇濆瓨 pgId 鍒� data 涓�
+ vc.component.pgId = pgId;
+
+ // 璋冪敤鎺ュ彛
+ if (pgId && communityId) {
+ let param = {
+ params: {
+ pgId: pgId,
+ communityId: communityId,
+ pId: pId,
+ type: 'all'
+ }
+ };
+
+ vc.http.apiGet('/query.privilegeGroup.noAddPrivilege',
+ param,
+ function (json) {
+ // 鎺ュ彛璋冪敤鎴愬姛澶勭悊
+ try {
+ // 鍒ゆ柇 json 鐨勭被鍨嬶紝濡傛灉宸茬粡鏄璞″垯鐩存帴浣跨敤锛屽惁鍒欒繘琛岃В鏋�
+ let data = typeof json === 'string' ? JSON.parse(json) : json;
+ vc.component.privilegeData = data;
+ vc.component.renderPrivileges(data);
+ vc.component.initCheckboxEvents();
+ } catch (e) {
+ console.error('瑙ｆ瀽鏁版嵁澶辫触:', e);
+ console.error('鍘熷鏁版嵁:', json);
+ console.error('鏁版嵁绫诲瀷:', typeof json);
+ vc.toast('鏁版嵁瑙ｆ瀽澶辫触');
+ }
+ },
+ function () {
+ console.log('璇锋眰澶辫触澶勭悊');
+ vc.toast('鍔犺浇鏁版嵁澶辫触');
+ }
+ );
+ } else {
+ console.warn('缂哄皯蹇呰鍙傛暟锛屾棤娉曡皟鐢ㄦ帴鍙�');
+ }
+ },
+ methods: {
+ goBack: function () {
+ vc.goBack();
+ },
+ // 娓叉煋鏉冮檺澶嶉�夋
+ renderPrivileges: function (data) {
+ const buttonContainer = document.getElementById('button-container');
+ const dataContainer = document.getElementById('data-container');
+
+ // 娓呯┖瀹瑰櫒
+ if (buttonContainer) buttonContainer.innerHTML = '';
+ if (dataContainer) dataContainer.innerHTML = '';
+
+ // 閬嶅巻鏁版嵁锛屾牴鎹� type 鍒涘缓瀵瑰簲鐨勫閫夋
+ data.forEach(function (item) {
+ const checkboxDiv = document.createElement('div');
+ checkboxDiv.className = 'role-a-checkbox';
+ checkboxDiv.style.gap = '10px';
+
+ const label = document.createElement('label');
+ label.textContent = item.pName;
+
+ const checkbox = document.createElement('input');
+ checkbox.type = 'checkbox';
+ checkbox.name = 'privilege';
+ checkbox.value = item.pId;
+ checkbox.setAttribute('data-pid', item.pId);
+ checkbox.setAttribute('data-type', item.type);
+
+ checkboxDiv.appendChild(label);
+ checkboxDiv.appendChild(checkbox);
+
+ // 鏍规嵁 type 娣诲姞鍒板搴斿鍣�
+ if (item.type === '鎸夐挳') {
+ if (buttonContainer) {
+ buttonContainer.appendChild(checkboxDiv);
+ }
+ } else if (item.type === '鏁版嵁') {
+ if (dataContainer) {
+ dataContainer.appendChild(checkboxDiv);
+ }
+ }
+ });
+ },
+ // 鍒濆鍖栧閫夋浜嬩欢
+ initCheckboxEvents: function () {
+ const self = this;
+
+ // 鍏ㄩ儴澶嶉�夋
+ const allCheckbox = document.getElementById('all');
+ if (allCheckbox) {
+ allCheckbox.addEventListener('change', function () {
+ const isChecked = this.checked;
+ // 閫変腑鎵�鏈夊閫夋
+ const allCheckboxes = document.querySelectorAll('input[type="checkbox"][name="privilege"]');
+ allCheckboxes.forEach(function (cb) {
+ cb.checked = isChecked;
+ });
+ // 鍚屾椂鏇存柊鎸夐挳鍜屾暟鎹尯鍩熺殑"鍏ㄩ儴"澶嶉�夋
+ const buttonAll = document.getElementById('button-all');
+ const dataAll = document.getElementById('data-all');
+ if (buttonAll) buttonAll.checked = isChecked;
+ if (dataAll) dataAll.checked = isChecked;
+ });
+ }
+
+ // 鎸夐挳鍖哄煙鍏ㄩ儴澶嶉�夋
+ const buttonAllCheckbox = document.getElementById('button-all');
+ if (buttonAllCheckbox) {
+ buttonAllCheckbox.addEventListener('change', function () {
+ const isChecked = this.checked;
+ // 閫変腑鎸夐挳鍖哄煙鎵�鏈夊閫夋
+ const buttonCheckboxes = document.querySelectorAll('#button-container input[type="checkbox"][name="privilege"]');
+ buttonCheckboxes.forEach(function (cb) {
+ cb.checked = isChecked;
+ });
+ // 妫�鏌ユ槸鍚﹂渶瑕佹洿鏂�"鍏ㄩ儴"澶嶉�夋
+ self.updateAllCheckbox();
+ });
+ }
+
+ // 鏁版嵁鍖哄煙鍏ㄩ儴澶嶉�夋
+ const dataAllCheckbox = document.getElementById('data-all');
+ if (dataAllCheckbox) {
+ dataAllCheckbox.addEventListener('change', function () {
+ const isChecked = this.checked;
+ // 閫変腑鏁版嵁鍖哄煙鎵�鏈夊閫夋
+ const dataCheckboxes = document.querySelectorAll('#data-container input[type="checkbox"][name="privilege"]');
+ dataCheckboxes.forEach(function (cb) {
+ cb.checked = isChecked;
+ });
+ // 妫�鏌ユ槸鍚﹂渶瑕佹洿鏂�"鍏ㄩ儴"澶嶉�夋
+ self.updateAllCheckbox();
+ });
+ }
+
+ // 鐩戝惉鎵�鏈夋潈闄愬閫夋鐨勫彉鍖栵紝鏇存柊"鍏ㄩ儴"澶嶉�夋鐘舵��
+ const privilegeCheckboxes = document.querySelectorAll('input[type="checkbox"][name="privilege"]');
+ privilegeCheckboxes.forEach(function (checkbox) {
+ checkbox.addEventListener('change', function () {
+ self.updateAllCheckbox();
+ self.updateSectionAllCheckbox();
+ });
+ });
+
+ // 淇濆瓨鎸夐挳浜嬩欢
+ const saveButton = document.getElementById('save');
+ if (saveButton) {
+ saveButton.addEventListener('click', function () {
+ self.savePrivileges();
+ });
+ }
+ },
+ // 鏇存柊"鍏ㄩ儴"澶嶉�夋鐘舵��
+ updateAllCheckbox: function () {
+ const allCheckboxes = document.querySelectorAll('input[type="checkbox"][name="privilege"]');
+ const allChecked = Array.from(allCheckboxes).every(function (cb) {
+ return cb.checked;
+ });
+ const allCheckbox = document.getElementById('all');
+ if (allCheckbox) {
+ allCheckbox.checked = allChecked;
+ }
+ },
+ // 鏇存柊鍖哄煙"鍏ㄩ儴"澶嶉�夋鐘舵��
+ updateSectionAllCheckbox: function () {
+ // 鏇存柊鎸夐挳鍖哄煙
+ const buttonCheckboxes = document.querySelectorAll('#button-container input[type="checkbox"][name="privilege"]');
+ const buttonAllChecked = buttonCheckboxes.length > 0 && Array.from(buttonCheckboxes).every(function (cb) {
+ return cb.checked;
+ });
+ const buttonAll = document.getElementById('button-all');
+ if (buttonAll) {
+ buttonAll.checked = buttonAllChecked;
+ }
+
+ // 鏇存柊鏁版嵁鍖哄煙
+ const dataCheckboxes = document.querySelectorAll('#data-container input[type="checkbox"][name="privilege"]');
+ const dataAllChecked = dataCheckboxes.length > 0 && Array.from(dataCheckboxes).every(function (cb) {
+ return cb.checked;
+ });
+ const dataAll = document.getElementById('data-all');
+ if (dataAll) {
+ dataAll.checked = dataAllChecked;
+ }
+ },
+ // 淇濆瓨鏉冮檺
+ savePrivileges: function () {
+ const self = this;
+ // 鑾峰彇鎵�鏈夐�変腑鐨勫閫夋
+ const checkedCheckboxes = document.querySelectorAll('input[type="checkbox"][name="privilege"]:checked');
+
+ // 鏋勫缓璇锋眰鏁版嵁
+ const pIds = [];
+ checkedCheckboxes.forEach(function (checkbox) {
+ pIds.push({
+ pId: checkbox.value
+ });
+ });
+
+ const requestData = {
+ pgId: vc.component.pgId,
+ pIds: pIds
+ };
+
+ // 璋冪敤淇濆瓨鎺ュ彛
+ vc.http.apiPost('/add.privilege.PrivilegeGroup',
+ requestData,
+ {},
+ function (json) {
+ try {
+ // 鍒ゆ柇 json 鐨勭被鍨嬶紝濡傛灉宸茬粡鏄璞″垯鐩存帴浣跨敤锛屽惁鍒欒繘琛岃В鏋�
+ let result = typeof json === 'string' ? JSON.parse(json) : json;
+ vc.toast('淇濆瓨鎴愬姛');
+ console.log('淇濆瓨鎴愬姛:', result);
+ // 淇濆瓨鎴愬姛鍚庤繑鍥炰笂涓�椤�
+ setTimeout(function () {
+ vc.goBack();
+ }, 1000);
+ } catch (e) {
+ console.error('瑙ｆ瀽鍝嶅簲澶辫触:', e);
+ vc.toast('淇濆瓨鎴愬姛');
+ // 淇濆瓨鎴愬姛鍚庤繑鍥炰笂涓�椤�
+ setTimeout(function () {
+ vc.goBack();
+ }, 1000);
+ }
+ },
+ function (error) {
+ console.error('淇濆瓨澶辫触:', error);
+ vc.toast('淇濆瓨澶辫触');
+ }
+ );
+ }
+ }
+ });
+})(window.vc);
\ No newline at end of file
diff --git a/public/pages/property/costDetail/add/add.html b/public/pages/property/costDetail/add/add.html
new file mode 100644
index 0000000..057a93e
--- /dev/null
+++ b/public/pages/property/costDetail/add/add.html
@@ -0,0 +1,108 @@
+<div class="form-container">
+ <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/鏃�">
+ </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="璇疯緭鍏�">
+ </div>
+
+ <!-- 宸ョ▼鍐呭 -->
+ <div class="form-row">
+ <label class="form-label" for="projectContent">宸ョ▼鍐呭</label>
+ <input type="text" id="projectContent" class="form-input" placeholder="璇疯緭鍏�" style="width: 555px;">
+ </div>
+
+ <!-- 绠＄悊澶勯噾棰� + 鏄惁鐩栫珷 -->
+ <div class="form-row">
+ <label class="form-label" for="mgmtAmount">绠＄悊澶勯噾棰�</label>
+ <input type="text" id="mgmtAmount" class="form-input" placeholder="璇疯緭鍏�">
+ <span>鍏�</span>
+ <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>
+ </div>
+ </div>
+
+ <!-- 涓氬浼氶噾棰� + 瀹′环閲戦 + 鏄惁鐩栫珷 + 绛炬姤閮ㄩ棬 -->
+ <div class="form-row">
+ <label class="form-label" for="committeeAmount">涓氬浼氶噾棰�</label>
+ <input type="text" id="committeeAmount" class="form-input" placeholder="璇疯緭鍏�">
+ <span>鍏�</span>
+ <label class="form-label" for="auditAmount">瀹′环閲戦</label>
+ <input type="text" id="auditAmount" class="form-input" placeholder="璇疯緭鍏�">
+ <span>鍏�</span>
+ <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>
+ </div>
+ <label class="form-label" for="approveDept">绛炬姤閮ㄩ棬</label>
+ <select id="approveDept" class="form-select">
+ <option value="1">1</option>
+ </select>
+ </div>
+
+ <!-- 鍒嗘憡鑼冨洿 + 缁翠慨绫诲瀷 -->
+ <div class="form-row">
+ <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>
+ </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">鍩洪噾涓庤鏂�</label>
+ <div class="radio-group">
+ <input type="radio" id="fundRepair" name="fundType" checked>
+ <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>
+
+ <div class="form-row">
+ <div class="radio-group" style="margin-left: 100px;">
+ <input type="radio" id="fundPublic" name="fundType">
+ <label for="fundPublic" 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>
+ </form>
+</div>
\ No newline at end of file
diff --git a/public/pages/property/costDetail/add/add.js b/public/pages/property/costDetail/add/add.js
new file mode 100644
index 0000000..e69de29
--- /dev/null
+++ b/public/pages/property/costDetail/add/add.js
diff --git a/public/pages/property/costDetail/costDetail.html b/public/pages/property/costDetail/costDetail.html
index ae94c64..c8153a4 100644
--- a/public/pages/property/costDetail/costDetail.html
+++ b/public/pages/property/costDetail/costDetail.html
@@ -9,7 +9,7 @@
</div>
<div>
<label>灏忓尯锛�</label>
- <select class="form-control" v-model="costDetailInfo.conditions.communityName" style="text-align: center;line-height: 0px;">
+ <select class="form-control" v-model="costDetailInfo.conditions.communityName">
<option value="">璇烽�夋嫨</option>
<option value="楸煎鑺卞洯A鍖�">楸煎鑺卞洯A鍖�</option>
</select>
diff --git a/public/pages/property/costDetail/detail/detail.html b/public/pages/property/costDetail/detail/detail.html
new file mode 100644
index 0000000..e69de29
--- /dev/null
+++ b/public/pages/property/costDetail/detail/detail.html
diff --git a/public/pages/property/costDetail/detail/detail.js b/public/pages/property/costDetail/detail/detail.js
new file mode 100644
index 0000000..e69de29
--- /dev/null
+++ b/public/pages/property/costDetail/detail/detail.js
diff --git a/public/pages/property/costDetail/edit/edit.html b/public/pages/property/costDetail/edit/edit.html
new file mode 100644
index 0000000..e62b096
--- /dev/null
+++ b/public/pages/property/costDetail/edit/edit.html
@@ -0,0 +1,108 @@
+<div class="form-container">
+ <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/鏃�">
+ </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="璇疯緭鍏�">
+ </div>
+
+ <!-- 宸ョ▼鍐呭 -->
+ <div class="form-row">
+ <label class="form-label" for="projectContent">宸ョ▼鍐呭</label>
+ <input type="text" id="projectContent" class="form-input" placeholder="璇疯緭鍏�" style="width: 555px;">
+ </div>
+
+ <!-- 绠＄悊澶勯噾棰� + 鏄惁鐩栫珷 -->
+ <div class="form-row">
+ <label class="form-label" for="mgmtAmount">绠＄悊澶勯噾棰�</label>
+ <input type="text" id="mgmtAmount" class="form-input" placeholder="璇疯緭鍏�">
+ <span>鍏�</span>
+ <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>
+ </div>
+ </div>
+
+ <!-- 涓氬浼氶噾棰� + 瀹′环閲戦 + 鏄惁鐩栫珷 + 绛炬姤閮ㄩ棬 -->
+ <div class="form-row">
+ <label class="form-label" for="committeeAmount">涓氬浼氶噾棰�</label>
+ <input type="text" id="committeeAmount" class="form-input" placeholder="璇疯緭鍏�">
+ <span>鍏�</span>
+ <label class="form-label" for="auditAmount">瀹′环閲戦</label>
+ <input type="text" id="auditAmount" class="form-input" placeholder="璇疯緭鍏�">
+ <span>鍏�</span>
+ <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>
+ </div>
+ <label class="form-label" for="approveDept">绛炬姤閮ㄩ棬</label>
+ <select id="approveDept" class="form-select">
+ <option value="1">1</option>
+ </select>
+ </div>
+
+ <!-- 鍒嗘憡鑼冨洿 + 缁翠慨绫诲瀷 -->
+ <div class="form-row">
+ <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>
+ </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">鍩洪噾涓庤鏂�</label>
+ <div class="radio-group">
+ <input type="radio" id="fundRepair" name="fundType" checked>
+ <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>
+
+ <div class="form-row">
+ <div class="radio-group" style="margin-left: 100px;">
+ <input type="radio" id="fundPublic" name="fundType">
+ <label for="fundPublic" 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>
+ </form>
+</div>
\ No newline at end of file
diff --git a/public/pages/property/costDetail/edit/edit.js b/public/pages/property/costDetail/edit/edit.js
new file mode 100644
index 0000000..e69de29
--- /dev/null
+++ b/public/pages/property/costDetail/edit/edit.js
diff --git a/public/pages/property/costDetail/more/more.html b/public/pages/property/costDetail/more/more.html
new file mode 100644
index 0000000..e0dd21f
--- /dev/null
+++ b/public/pages/property/costDetail/more/more.html
@@ -0,0 +1,452 @@
+<div class="cost-detail-container">
+ <!-- 椤堕儴锛氭棩鏈熻寖鍥� + 鎿嶄綔鎸夐挳 -->
+ <div class="search-bar">
+ <div>
+ <label>缁熻鏃堕棿锛�</label>
+ <input type="date" class="form-control startDate" placeholder="璇烽�夋嫨寮�濮嬫棩鏈�" v-model="moreInfo.conditions.startDate" />
+ <span style="margin: 0 5px;">鑷�</span>
+ <input type="date" class="form-control endDate" placeholder="璇烽�夋嫨缁撴潫鏃ユ湡" v-model="moreInfo.conditions.endDate" />
+ </div>
+ <div class="action-buttons">
+ <button type="button" class="download-btn" v-on:click="_downloadTemplate()" style="line-height: 0px;">涓嬭浇妯℃澘</button>
+ <button type="button" class="add-btn" v-on:click="_add()" style="line-height: 0px;">娣诲姞</button>
+ <button type="button" class="import-btn" v-on:click="_export()" style="line-height: 0px;">瀵煎嚭</button>
+ </div>
+ </div>
+
+ <!-- 瀵艰埅鏍囩椤� -->
+ <div class="vc-line-primary margin-top"></div>
+ <div class="margin-top-sm">
+ <ul class="nav nav-tabs">
+ <li class="nav-item">
+ <a class="nav-link" v-bind:class="{active:moreInfo.currentTab == 'publicIncome'}" v-on:click="changeTab('publicIncome')">
+ 鍏叡鏀剁泭閲�
+ </a>
+ </li>
+ <li class="nav-item">
+ <a class="nav-link" v-bind:class="{active:moreInfo.currentTab == 'convention'}" v-on:click="changeTab('convention')">
+ 涓氬浼氬叕绾�
+ </a>
+ </li>
+ <li class="nav-item">
+ <a class="nav-link" v-bind:class="{active:moreInfo.currentTab == 'withdrawalIssues'}" v-on:click="changeTab('withdrawalIssues')">
+ 鏀彇瀛樺湪闂
+ </a>
+ </li>
+ <li class="nav-item">
+ <a class="nav-link" v-bind:class="{active:moreInfo.currentTab == 'warranty'}" v-on:click="changeTab('warranty')">
+ 璐ㄤ繚閲�/楠屾敹瀹℃牳
+ </a>
+ </li>
+ <li class="nav-item">
+ <a class="nav-link" v-bind:class="{active:moreInfo.currentTab == 'printDetail'}" v-on:click="changeTab('printDetail')">
+ 鎵撳嵃鏄庣粏
+ </a>
+ </li>
+ <li class="nav-item">
+ <a class="nav-link" v-bind:class="{active:moreInfo.currentTab == 'printSummary'}" v-on:click="changeTab('printSummary')">
+ 鎵撳嵃姹囨��
+ </a>
+ </li>
+ <li class="nav-item">
+ <a class="nav-link" v-bind:class="{active:moreInfo.currentTab == 'payablePaid'}" v-on:click="changeTab('payablePaid')">
+ 搴斾粯/瀹炰粯
+ </a>
+ </li>
+ <li class="nav-item">
+ <a class="nav-link" v-bind:class="{active:moreInfo.currentTab == 'payablePaidSummary'}" v-on:click="changeTab('payablePaidSummary')">
+ 搴斾粯瀹炰粯姹囨��
+ </a>
+ </li>
+ <li class="nav-item">
+ <a class="nav-link" v-bind:class="{active:moreInfo.currentTab == 'remarks'}" v-on:click="changeTab('remarks')">
+ 澶囨敞
+ </a>
+ </li>
+ </ul>
+ </div>
+
+ <!-- 鏁版嵁琛ㄦ牸 - 鍏叡鏀剁泭閲� -->
+ <table v-if="moreInfo.currentTab == 'publicIncome'">
+ <thead>
+ <tr>
+ <th style="background-color: rgb(233, 243, 255);">鎷熷叕甯�-璧峰(骞存湀)</th>
+ <th style="background-color: rgb(233, 243, 255);">鎷熷叕甯�-姝�(骞存湀)</th>
+ <th style="background-color: rgb(233, 243, 255);">宸插叕甯�-璧峰(骞存湀)</th>
+ <th style="background-color: rgb(233, 243, 255);">宸插叕甯�-姝�(骞存湀)</th>
+ <th style="background-color: rgb(233, 243, 255);">鎿嶄綔</th>
+ </tr>
+ </thead>
+ <tbody>
+ <tr v-for="(item, index) in moreInfo.dataList">
+ <td>{{item.proposedStartDate || '-'}}</td>
+ <td>{{item.proposedEndDate || '-'}}</td>
+ <td>{{item.publishedStartDate || '-'}}</td>
+ <td>{{item.publishedEndDate || '-'}}</td>
+ <td>
+ <a href="javascript:void(0)" v-on:click="_viewDetail(item)">璇︽儏</a>
+ <a href="javascript:void(0)" v-on:click="_edit(item)">缂栬緫</a>
+ <a href="javascript:void(0)" v-on:click="_delete(item)">鍒犻櫎</a>
+ </td>
+ </tr>
+ <tr v-if="moreInfo.dataList.length == 0">
+ <td colspan="5" style="text-align: center; color: #999;">鏆傛棤鏁版嵁</td>
+ </tr>
+ </tbody>
+ </table>
+
+ <!-- 鏁版嵁琛ㄦ牸 - 涓氬浼氬叕绾� -->
+ <table v-if="moreInfo.currentTab == 'convention'">
+ <thead>
+ <tr>
+ <th style="background-color: rgb(233, 243, 255);">搴忓彿</th>
+ <th style="background-color: rgb(233, 243, 255);">棰濆害</th>
+ <th style="background-color: rgb(233, 243, 255);">涓氬浼氬ぇ浼氬喅璁� (鏄�/鍚�)</th>
+ <th style="background-color: rgb(233, 243, 255);">涓氬浼氬緛璇㈣〃 (鏄惁)</th>
+ <th style="background-color: rgb(233, 243, 255);">鎿嶄綔</th>
+ </tr>
+ </thead>
+ <tbody>
+ <tr v-for="(item, index) in moreInfo.dataList">
+ <td>{{(moreInfo.paginationInfo.currentPage - 1) * moreInfo.paginationInfo.rows + index + 1}}</td>
+ <td>{{item.amount || '-'}}</td>
+ <td>{{item.meetingResolution == '1' ? '鏄�' : '鍚�'}}</td>
+ <td>{{item.consultationForm == '1' ? '鏄�' : '鍚�'}}</td>
+ <td>
+ <a href="javascript:void(0)" v-on:click="_viewDetail(item)">璇︽儏</a>
+ <a href="javascript:void(0)" v-on:click="_edit(item)">缂栬緫</a>
+ <a href="javascript:void(0)" v-on:click="_delete(item)">鍒犻櫎</a>
+ </td>
+ </tr>
+ <tr v-if="moreInfo.dataList.length == 0">
+ <td colspan="5" style="text-align: center; color: #999;">鏆傛棤鏁版嵁</td>
+ </tr>
+ </tbody>
+ </table>
+
+ <!-- 鏁版嵁琛ㄦ牸 - 鏀彇瀛樺湪闂 -->
+ <table v-if="moreInfo.currentTab == 'withdrawalIssues'">
+ <thead>
+ <tr>
+ <th style="background-color: rgb(233, 243, 255);">鏀彇閬囧埌鐨勯棶棰�</th>
+ <th style="background-color: rgb(233, 243, 255);">缂烘敮/娆犳(鍏�)</th>
+ <th style="background-color: rgb(233, 243, 255);">璺悕</th>
+ <th style="background-color: rgb(233, 243, 255);">寮�</th>
+ <th style="background-color: rgb(233, 243, 255);">闂�</th>
+ <th style="background-color: rgb(233, 243, 255);">瀹�</th>
+ <th style="background-color: rgb(233, 243, 255);">闂ㄥ鍙�</th>
+ <th style="background-color: rgb(233, 243, 255);">涓氫富鍦板潃</th>
+ <th style="background-color: rgb(233, 243, 255);">鎿嶄綔</th>
+ </tr>
+ </thead>
+ <tbody>
+ <tr v-for="(item, index) in moreInfo.dataList">
+ <td>{{item.issue || '-'}}</td>
+ <td>{{item.shortageAmount || '-'}}</td>
+ <td>{{item.roadName || '-'}}</td>
+ <td>{{item.lane || '-'}}</td>
+ <td>{{item.door || '-'}}</td>
+ <td>{{item.room || '-'}}</td>
+ <td>{{item.doorRoomNumber || '-'}}</td>
+ <td>{{item.ownerAddress || '-'}}</td>
+ <td>
+ <a href="javascript:void(0)" v-on:click="_viewDetail(item)">璇︽儏</a>
+ <a href="javascript:void(0)" v-on:click="_edit(item)">缂栬緫</a>
+ <a href="javascript:void(0)" v-on:click="_delete(item)">鍒犻櫎</a>
+ </td>
+ </tr>
+ <tr v-if="moreInfo.dataList.length == 0">
+ <td colspan="9" style="text-align: center; color: #999;">鏆傛棤鏁版嵁</td>
+ </tr>
+ </tbody>
+ </table>
+
+ <!-- 鏁版嵁琛ㄦ牸 - 璐ㄤ繚閲�/楠屾敹瀹℃牳 -->
+ <table v-if="moreInfo.currentTab == 'warranty'">
+ <thead>
+ <tr>
+ <th style="background-color: rgb(233, 243, 255);">鍙惎鍔ㄦ敮鍙栨棩鏈�</th>
+ <th style="background-color: rgb(233, 243, 255);">璐ㄤ繚鏈熷紑濮�</th>
+ <th style="background-color: rgb(233, 243, 255);">璐ㄤ繚鏈熺粨鏉�</th>
+ <th style="background-color: rgb(233, 243, 255);">璐ㄤ繚閲戝崰姣�</th>
+ <th style="background-color: rgb(233, 243, 255);">璐ㄤ繚閲戦噾棰�</th>
+ <th style="background-color: rgb(233, 243, 255);"></th>
+ <th style="background-color: rgb(233, 243, 255);">鎿嶄綔</th>
+ </tr>
+ </thead>
+ <tbody>
+ <tr v-for="(item, index) in moreInfo.dataList">
+ <td>{{item.withdrawalDate || '-'}}</td>
+ <td>{{item.warrantyStartDate || '-'}}</td>
+ <td>{{item.warrantyEndDate || '-'}}</td>
+ <td>{{item.warrantyRatio || '-'}}</td>
+ <td>{{item.warrantyAmount || '-'}}</td>
+ <td></td>
+ <td>
+ <a href="javascript:void(0)" v-on:click="_viewDetail(item)">璇︽儏</a>
+ <a href="javascript:void(0)" v-on:click="_edit(item)">缂栬緫</a>
+ <a href="javascript:void(0)" v-on:click="_delete(item)">鍒犻櫎</a>
+ </td>
+ </tr>
+ <tr v-if="moreInfo.dataList.length == 0">
+ <td colspan="7" style="text-align: center; color: #999;">鏆傛棤鏁版嵁</td>
+ </tr>
+ </tbody>
+ </table>
+
+ <!-- 鏁版嵁琛ㄦ牸 - 鎵撳嵃鏄庣粏 -->
+ <table v-if="moreInfo.currentTab == 'printDetail'">
+ <thead>
+ <tr>
+ <th style="background-color: rgb(233, 243, 255);">搴忓彿</th>
+ <th style="background-color: rgb(233, 243, 255);">绗嚑娆℃墦鍗�</th>
+ <th style="background-color: rgb(233, 243, 255);">鎵撳嵃鏃ユ湡</th>
+ <th style="background-color: rgb(233, 243, 255);">鍐宠缂栧彿</th>
+ <th style="background-color: rgb(233, 243, 255);">鎵撳嵃閲戦</th>
+ <th style="background-color: rgb(233, 243, 255);">鍒拌处鏃ユ湡</th>
+ <th style="background-color: rgb(233, 243, 255);">鍒拌处閲戦</th>
+ <th style="background-color: rgb(233, 243, 255);">鏀彇浜�</th>
+ <th style="background-color: rgb(233, 243, 255);">缂烘敮/娆犳 (鍏�)</th>
+ <th style="background-color: rgb(233, 243, 255);">璺悕</th>
+ <th style="background-color: rgb(233, 243, 255);">寮�</th>
+ <th style="background-color: rgb(233, 243, 255);">闂�</th>
+ <th style="background-color: rgb(233, 243, 255);">瀹�</th>
+ <th style="background-color: rgb(233, 243, 255);">涓氫富鍦板潃</th>
+ <th style="background-color: rgb(233, 243, 255);">鍒拌处鍑瘉</th>
+ <th style="background-color: rgb(233, 243, 255);">鎿嶄綔</th>
+ </tr>
+ </thead>
+ <tbody>
+ <tr v-for="(item, index) in moreInfo.dataList">
+ <td>{{(moreInfo.paginationInfo.currentPage - 1) * moreInfo.paginationInfo.rows + index + 1}}</td>
+ <td>{{item.printTimes || '-'}}</td>
+ <td>{{item.printDate || '-'}}</td>
+ <td>{{item.resolutionNumber || '-'}}</td>
+ <td>{{item.printAmount || '-'}}</td>
+ <td>{{item.arrivalDate || '-'}}</td>
+ <td>{{item.arrivalAmount || '-'}}</td>
+ <td>{{item.payer || '-'}}</td>
+ <td>{{item.shortageAmount || '-'}}</td>
+ <td>{{item.roadName || '-'}}</td>
+ <td>{{item.lane || '-'}}</td>
+ <td>{{item.door || '-'}}</td>
+ <td>{{item.room || '-'}}</td>
+ <td>{{item.ownerAddress || '-'}}</td>
+ <td>{{item.arrivalVoucher || '-'}}</td>
+ <td>
+ <a href="javascript:void(0)" v-on:click="_viewDetail(item)">璇︽儏</a>
+ <a href="javascript:void(0)" v-on:click="_edit(item)">缂栬緫</a>
+ <a href="javascript:void(0)" v-on:click="_delete(item)">鍒犻櫎</a>
+ </td>
+ </tr>
+ <tr v-if="moreInfo.dataList.length == 0">
+ <td colspan="16" style="text-align: center; color: #999;">鏆傛棤鏁版嵁</td>
+ </tr>
+ </tbody>
+ </table>
+
+ <!-- 鏁版嵁琛ㄦ牸 - 鎵撳嵃姹囨�� -->
+ <table v-if="moreInfo.currentTab == 'printSummary'">
+ <thead>
+ <tr>
+ <th style="background-color: rgb(233, 243, 255);">搴忓彿</th>
+ <th style="background-color: rgb(233, 243, 255);">鎵撳嵃鍚堣</th>
+ <th style="background-color: rgb(233, 243, 255);">鍒拌处鍚堣</th>
+ <th style="background-color: rgb(233, 243, 255);">鍒拌处鐜� <span title="缁翠慨鍩洪噾鎴栧叕鍏辨敹鐩婇噾鍒拌处鐜�" style="cursor: pointer;">鈶�</span></th>
+ <th style="background-color: rgb(233, 243, 255);">灏氱己閲戦 <span title="缁翠慨鍩洪噾鎴栧叕鍏辨敹鐩婇噾灏氱己閲戦" style="cursor: pointer;">鈶�</span></th>
+ <th style="background-color: rgb(233, 243, 255);">绠＄悊璐瑰崰姣� <span title="鎸夌収鏂藉伐鍗曚綅鎵胯鍑�,浜哄伐杈撳叆鍊�" style="cursor: pointer;">鈶�</span></th>
+ <th style="background-color: rgb(233, 243, 255);">绠＄悊璐� <span title="鎸夌収鏂藉伐鍗曚綅鎵胯鍑�,浜哄伐杈撳叆鍊�" style="cursor: pointer;">鈶�</span></th>
+ <th style="background-color: rgb(233, 243, 255);">搴斾粯閲戦A <span title="绛炬姤涓氬浼氶噾棰濃�旂鐞嗚垂" style="cursor: pointer;">鈶�</span></th>
+ <th style="background-color: rgb(233, 243, 255);">搴斾粯閲戦B <span title="绛炬姤涓氬浼氶噾棰濃�旇川淇濋噾閲戦鈥旂鐞�" style="cursor: pointer;">鈶�</span></th>
+ <th style="background-color: rgb(233, 243, 255);">搴斾粯閲戦C <span title="鎸夊埌璐﹀簲浠樷�斿悓姣旂鐞嗚垂,鍒拌处閲戦涓嶅寘鍚川淇濋噾" style="cursor: pointer;">鈶�</span></th>
+ <th style="background-color: rgb(233, 243, 255);">鏀粯鍏徃鎴栦釜浜哄悕绉�</th>
+ <th style="background-color: rgb(233, 243, 255);">韬唤璇佸彿</th>
+ <th style="background-color: rgb(233, 243, 255);">寮�鎴烽摱琛�</th>
+ <th style="background-color: rgb(233, 243, 255);">寮�鎴疯处鍙�</th>
+ <th style="background-color: rgb(233, 243, 255);">鎿嶄綔</th>
+ </tr>
+ </thead>
+ <tbody>
+ <tr v-for="(item, index) in moreInfo.dataList">
+ <td>{{(moreInfo.paginationInfo.currentPage - 1) * moreInfo.paginationInfo.rows + index + 1}}</td>
+ <td>{{item.printTotal || '-'}}</td>
+ <td>{{item.arrivalTotal || '-'}}</td>
+ <td>{{item.arrivalRate || '-'}}</td>
+ <td>{{item.shortageAmount || '-'}}</td>
+ <td>{{item.managementFeeRatio || '-'}}</td>
+ <td>{{item.managementFee || '-'}}</td>
+ <td>{{item.payableAmountA || '-'}}</td>
+ <td>{{item.payableAmountB || '-'}}</td>
+ <td>{{item.payableAmountC || '-'}}</td>
+ <td>{{item.payeeName || '-'}}</td>
+ <td>{{item.idNumber || '-'}}</td>
+ <td>{{item.bankName || '-'}}</td>
+ <td>{{item.accountNumber || '-'}}</td>
+ <td>
+ <a href="javascript:void(0)" v-on:click="_viewDetail(item)">璇︽儏</a>
+ <a href="javascript:void(0)" v-on:click="_edit(item)">缂栬緫</a>
+ <a href="javascript:void(0)" v-on:click="_delete(item)">鍒犻櫎</a>
+ </td>
+ </tr>
+ <tr v-if="moreInfo.dataList.length == 0">
+ <td colspan="15" style="text-align: center; color: #999;">鏆傛棤鏁版嵁</td>
+ </tr>
+ </tbody>
+ </table>
+ <!-- 鎵撳嵃姹囨�诲娉ㄨ鏄� -->
+ <!-- <div v-if="moreInfo.currentTab == 'printSummary'" style="margin-top: 20px; padding: 10px; background-color: #f5f5f5; border-radius: 4px;">
+ <div style="font-weight: bold; margin-bottom: 10px;">澶囨敞:鍏夋爣娴湪鈶犱笂鏃�,鏈夎В閲婃彁绀�,鍐呭濡備笅:</div>
+ <div style="margin-left: 20px;">
+ <div><strong>鍒拌处鐜�:</strong> 缁翠慨鍩洪噾鎴栧叕鍏辨敹鐩婇噾鍒拌处鐜�</div>
+ <div><strong>灏氱己閲戦:</strong> 缁翠慨鍩洪噾鎴栧叕鍏辨敹鐩婇噾灏氱己閲戦</div>
+ <div><strong>绠＄悊璐瑰崰姣�:</strong> 鎸夌収鏂藉伐鍗曚綅鎵胯鍑�,浜哄伐杈撳叆鍊�</div>
+ <div><strong>搴斾粯閲戦A:</strong> 绛炬姤涓氬浼氶噾棰濃�旂鐞嗚垂</div>
+ <div><strong>搴斾粯閲戦B:</strong> 绛炬姤涓氬浼氶噾棰濃�旇川淇濋噾閲戦鈥旂鐞�</div>
+ <div><strong>搴斾粯閲戦C:</strong> 鎸夊埌璐﹀簲浠樷�斿悓姣旂鐞嗚垂,鍒拌处閲戦涓嶅寘鍚川淇濋噾</div>
+ </div>
+ </div> -->
+
+ <!-- 鏁版嵁琛ㄦ牸 - 搴斾粯/瀹炰粯 -->
+ <table v-if="moreInfo.currentTab == 'payablePaid'">
+ <thead>
+ <tr>
+ <th style="background-color: rgb(233, 243, 255);">搴忓彿</th>
+ <th style="background-color: rgb(233, 243, 255);">鎷熶粯閲戦</th>
+ <th style="background-color: rgb(233, 243, 255);">娆℃暟</th>
+ <th style="background-color: rgb(233, 243, 255);">鎷熶粯鏃ユ湡</th>
+ <th style="background-color: rgb(233, 243, 255);">绫诲埆</th>
+ <th style="background-color: rgb(233, 243, 255);">鎶ラ攢浜�</th>
+ <th style="background-color: rgb(233, 243, 255);">瀹炰粯閲戦</th>
+ <th style="background-color: rgb(233, 243, 255);">瀹炰粯鏃ユ湡</th>
+ <th style="background-color: rgb(233, 243, 255);">鎿嶄綔</th>
+ </tr>
+ </thead>
+ <tbody>
+ <tr v-for="(item, index) in moreInfo.dataList">
+ <td>{{(moreInfo.paginationInfo.currentPage - 1) * moreInfo.paginationInfo.rows + index + 1}}</td>
+ <td>{{item.proposedAmount || '-'}}</td>
+ <td>{{item.times || '-'}}</td>
+ <td>{{item.proposedDate || '-'}}</td>
+ <td>{{item.category || '-'}}</td>
+ <td>{{item.reimburser || '-'}}</td>
+ <td>{{item.actualAmount || '-'}}</td>
+ <td>{{item.actualDate || '-'}}</td>
+ <td>
+ <a href="javascript:void(0)" v-on:click="_viewDetail(item)">璇︽儏</a>
+ <a href="javascript:void(0)" v-on:click="_edit(item)">缂栬緫</a>
+ <a href="javascript:void(0)" v-on:click="_delete(item)">鍒犻櫎</a>
+ </td>
+ </tr>
+ <tr v-if="moreInfo.dataList.length == 0">
+ <td colspan="9" style="text-align: center; color: #999;">鏆傛棤鏁版嵁</td>
+ </tr>
+ </tbody>
+ </table>
+
+ <!-- 鏁版嵁琛ㄦ牸 - 搴斾粯瀹炰粯姹囨�� -->
+ <table v-if="moreInfo.currentTab == 'payablePaidSummary'">
+ <thead>
+ <tr>
+ <th style="background-color: rgb(233, 243, 255);">鎷熶粯鍚堣</th>
+ <th style="background-color: rgb(233, 243, 255);">瀹炰粯鍚堣</th>
+ <th style="background-color: rgb(233, 243, 255);">鏈粯鍚堣</th>
+ <th style="background-color: rgb(233, 243, 255);">鍨粯閲戦</th>
+ <th style="background-color: rgb(233, 243, 255);">鏈粯鍚堣-鍒板笎鍙ｅ緞</th>
+ <th style="background-color: rgb(233, 243, 255);">寰呬粯閲戦A <span title="绛炬姤涓氬浼氶噾棰濃�旂鐞嗚垂" style="cursor: pointer;">鈶�</span></th>
+ <th style="background-color: rgb(233, 243, 255);">寰呬粯閲戦B <span title="绛炬姤涓氬浼氶噾棰濃�旇川淇濋噾閲戦鈥旂鐞�" style="cursor: pointer;">鈶�</span></th>
+ <th style="background-color: rgb(233, 243, 255);">寰呬粯閲戦C <span title="鎸夊埌璐﹀簲浠樷�斿悓姣旂鐞嗚垂,鍒拌处閲戦涓嶅寘鍚川淇濋噾" style="cursor: pointer;">鈶�</span></th>
+ <th style="background-color: rgb(233, 243, 255);">鎿嶄綔</th>
+ </tr>
+ </thead>
+ <tbody>
+ <tr v-for="(item, index) in moreInfo.dataList">
+ <td>{{item.proposedTotal || '-'}}</td>
+ <td>{{item.actualTotal || '-'}}</td>
+ <td>{{item.unpaidTotal || '-'}}</td>
+ <td>{{item.advanceAmount || '-'}}</td>
+ <td>{{item.unpaidTotalAccounted || '-'}}</td>
+ <td>{{item.pendingAmountA || '-'}}</td>
+ <td>{{item.pendingAmountB || '-'}}</td>
+ <td>{{item.pendingAmountC || '-'}}</td>
+ <td>
+ <a href="javascript:void(0)" v-on:click="_viewDetail(item)">璇︽儏</a>
+ <a href="javascript:void(0)" v-on:click="_edit(item)">缂栬緫</a>
+ <a href="javascript:void(0)" v-on:click="_delete(item)">鍒犻櫎</a>
+ </td>
+ </tr>
+ <tr v-if="moreInfo.dataList.length == 0">
+ <td colspan="9" style="text-align: center; color: #999;">鏆傛棤鏁版嵁</td>
+ </tr>
+ </tbody>
+ </table>
+ <!-- 搴斾粯瀹炰粯姹囨�诲娉ㄨ鏄� -->
+ <!-- <div v-if="moreInfo.currentTab == 'payablePaidSummary'" style="margin-top: 20px; padding: 10px; background-color: #f5f5f5; border-radius: 4px;">
+ <div style="font-weight: bold; margin-bottom: 10px;">澶囨敞:鍏夋爣娴湪鈶犱笂鏃�,鏈夎В閲婃彁绀�,鍐呭濡備笅:</div>
+ <div style="margin-left: 20px;">
+ <div><strong>寰呬粯閲戦A:</strong> 绛炬姤涓氬浼氶噾棰濃�旂鐞嗚垂</div>
+ <div><strong>寰呬粯閲戦B:</strong> 绛炬姤涓氬浼氶噾棰濃�旇川淇濋噾閲戦鈥旂鐞�</div>
+ <div><strong>寰呬粯閲戦C:</strong> 鎸夊埌璐﹀簲浠樷�斿悓姣旂鐞嗚垂,鍒拌处閲戦涓嶅寘鍚川淇濋噾</div>
+ </div>
+ </div> -->
+
+ <!-- 鏁版嵁琛ㄦ牸 - 澶囨敞 -->
+ <table v-if="moreInfo.currentTab == 'remarks'">
+ <thead>
+ <tr>
+ <th style="background-color: rgb(233, 243, 255);">搴忓彿</th>
+ <th style="background-color: rgb(233, 243, 255);">鏃堕棿</th>
+ <th style="background-color: rgb(233, 243, 255);">澶囨敞浜�</th>
+ <th style="background-color: rgb(233, 243, 255);">澶囨敞鍐呭</th>
+ <th style="background-color: rgb(233, 243, 255);">鎿嶄綔</th>
+ </tr>
+ </thead>
+ <tbody>
+ <tr v-for="(item, index) in moreInfo.dataList">
+ <td>{{(moreInfo.paginationInfo.currentPage - 1) * moreInfo.paginationInfo.rows + index + 1}}</td>
+ <td>{{item.time || '-'}}</td>
+ <td>{{item.remarker || '-'}}</td>
+ <td>{{item.remarkContent || '-'}}</td>
+ <td>
+ <a href="javascript:void(0)" v-on:click="_viewDetail(item)">璇︽儏</a>
+ <a href="javascript:void(0)" v-on:click="_edit(item)">缂栬緫</a>
+ <a href="javascript:void(0)" v-on:click="_delete(item)">鍒犻櫎</a>
+ </td>
+ </tr>
+ <tr v-if="moreInfo.dataList.length == 0">
+ <td colspan="5" style="text-align: center; color: #999;">鏆傛棤鏁版嵁</td>
+ </tr>
+ </tbody>
+ </table>
+
+ <!-- 鍒嗛〉鏍� -->
+ <div class="pagination">
+ <span class="pagination-info">鍏眥{moreInfo.paginationInfo.dataCount || 0}}鏉¤褰�</span>
+ <div class="pagination-controls">
+ <select class="page-size-select" v-model="moreInfo.paginationInfo.rows" v-on:change="_changePageSize()">
+ <option value="15">15</option>
+ <option value="30">30</option>
+ <option value="50">50</option>
+ <option value="100">100</option>
+ </select>
+ <span class="page-size-label">/椤�</span>
+ <button class="page-btn" v-on:click="_goToPage(moreInfo.paginationInfo.currentPage - 1)"
+ :disabled="moreInfo.paginationInfo.currentPage == 1">鈥�</button>
+ <button class="page-btn" v-for="page in moreInfo.paginationInfo.pageList"
+ :class="{active: page.currentPage}"
+ v-on:click="_goToPage(page.page)"
+ v-if="page.pageView != '...'">
+ {{page.pageView}}
+ </button>
+ <span v-for="page in moreInfo.paginationInfo.pageList"
+ v-if="page.pageView == '...'"
+ class="page-ellipsis">...</span>
+ <button class="page-btn" v-on:click="_goToPage(moreInfo.paginationInfo.currentPage + 1)"
+ :disabled="moreInfo.paginationInfo.currentPage == moreInfo.paginationInfo.total">鈥�</button>
+ <span class="jump-label">璺宠浆鑷�</span>
+ <input type="number" class="jump-input" v-model="moreInfo.jumpPage" min="1" :max="moreInfo.paginationInfo.total" />
+ <span class="page-label">椤�</span>
+ <button class="page-btn" v-on:click="_jumpToPage()">纭畾</button>
+ </div>
+ </div>
+</div>
+
diff --git a/public/pages/property/costDetail/more/more.js b/public/pages/property/costDetail/more/more.js
new file mode 100644
index 0000000..9d03b81
--- /dev/null
+++ b/public/pages/property/costDetail/more/more.js
@@ -0,0 +1,294 @@
+/**
+ 涓氬浼氬叕绾︾鐞�
+ **/
+(function (vc) {
+ var DEFAULT_PAGE = 1;
+ var DEFAULT_ROWS = 15;
+ var $that = {};
+ vc.extends({
+ data: {
+ moreInfo: {
+ dataList: [],
+ paginationInfo: {
+ currentPage: 1,
+ rows: DEFAULT_ROWS,
+ total: 1,
+ dataCount: 0,
+ pageList: []
+ },
+ jumpPage: 1,
+ currentTab: 'convention',
+ conditions: {
+ startDate: '',
+ endDate: ''
+ }
+ }
+ },
+ _initMethod: function () {
+ $that = vc.component;
+ $that._injectStyles();
+ $that._initDate();
+ $that._listData(DEFAULT_PAGE, DEFAULT_ROWS);
+ },
+ _initEvent: function () {
+ },
+ methods: {
+ _initDate: function () {
+ // 鍒濆鍖栨棩鏈熼�夋嫨鍣�
+ $(".startDate").datetimepicker({
+ minView: "month",
+ language: 'zh-CN',
+ fontAwesome: 'fa',
+ format: 'yyyy-mm-dd',
+ initTime: true,
+ initialDate: new Date(),
+ autoClose: 1,
+ todayBtn: true,
+ clearBtn: true
+ });
+ $(".endDate").datetimepicker({
+ minView: "month",
+ language: 'zh-CN',
+ fontAwesome: 'fa',
+ format: 'yyyy-mm-dd',
+ initTime: true,
+ initialDate: new Date(),
+ autoClose: 1,
+ todayBtn: true,
+ clearBtn: true
+ });
+
+ // 璁剧疆榛樿鏃ユ湡涓哄綋鍓嶆湀浠�
+ var now = new Date();
+ var year = now.getFullYear();
+ var month = now.getMonth() + 1;
+ var startDateStr = year + '-' + (month < 10 ? '0' + month : month) + '-01';
+ var endDate = new Date(year, month, 0); // 鑾峰彇褰撴湀鏈�鍚庝竴澶�
+ var endDateStr = year + '-' + (month < 10 ? '0' + month : month) + '-' + endDate.getDate();
+
+ $that.moreInfo.conditions.startDate = startDateStr;
+ $that.moreInfo.conditions.endDate = endDateStr;
+ $(".startDate").val(startDateStr);
+ $(".endDate").val(endDateStr);
+
+ $('.startDate').datetimepicker()
+ .on('changeDate', function (ev) {
+ var value = $(".startDate").val();
+ $that.moreInfo.conditions.startDate = value;
+ });
+ $('.endDate').datetimepicker()
+ .on('changeDate', function (ev) {
+ var value = $(".endDate").val();
+ var start = Date.parse(new Date($that.moreInfo.conditions.startDate))
+ var end = Date.parse(new Date(value))
+ if (start - end >= 0) {
+ vc.toast("缁撴潫鏃堕棿蹇呴』澶т簬寮�濮嬫椂闂�")
+ $that.moreInfo.conditions.endDate = '';
+ $(".endDate").val('');
+ } else {
+ $that.moreInfo.conditions.endDate = value;
+ }
+ });
+
+ // 闃叉澶氭鐐瑰嚮鏃堕棿鎻掍欢澶卞幓鐒︾偣
+ var startDateElements = document.getElementsByClassName('form-control startDate');
+ if (startDateElements.length > 0) {
+ startDateElements[0].addEventListener('click', function(e) {
+ e.currentTarget.blur();
+ });
+ }
+ var endDateElements = document.getElementsByClassName('form-control endDate');
+ if (endDateElements.length > 0) {
+ endDateElements[0].addEventListener('click', function(e) {
+ e.currentTarget.blur();
+ });
+ }
+ },
+ changeTab: function (_tab) {
+ $that.moreInfo.currentTab = _tab;
+ // 鏍规嵁鏍囩椤靛姞杞戒笉鍚屾暟鎹�
+ $that._listData(DEFAULT_PAGE, $that.moreInfo.paginationInfo.rows);
+ },
+ _listData: function (_page, _rows) {
+ $that.moreInfo.conditions.page = _page;
+ $that.moreInfo.conditions.row = _rows;
+ $that.moreInfo.conditions.tab = $that.moreInfo.currentTab;
+ $that.moreInfo.conditions.communityId = vc.getCurrentCommunity().communityId;
+ var param = {
+ params: $that.moreInfo.conditions
+ };
+ // 鍙戦�乬et璇锋眰 - 杩欓噷闇�瑕佹牴鎹疄闄匒PI璋冩暣
+ vc.http.apiGet('/costDetail/queryMore',
+ param,
+ function (json, res) {
+ var _json = JSON.parse(json);
+ $that.moreInfo.paginationInfo.dataCount = _json.total || 0;
+ $that.moreInfo.paginationInfo.total = _json.records || 1;
+ $that.moreInfo.dataList = _json.data || [];
+ $that.moreInfo.paginationInfo.currentPage = _page;
+ $that._freshPageList();
+ },
+ function (errInfo, error) {
+ console.log('璇锋眰澶辫触澶勭悊');
+ // 妯℃嫙鏁版嵁鐢ㄤ簬婕旂ず
+ $that.moreInfo.dataList = [
+ {
+ amount: '寮犱笁涓�',
+ meetingResolution: '1',
+ consultationForm: '0'
+ }
+ ];
+ $that.moreInfo.paginationInfo.dataCount = 100;
+ $that.moreInfo.paginationInfo.total = 7;
+ $that.moreInfo.paginationInfo.currentPage = _page;
+ $that._freshPageList();
+ }
+ );
+ },
+ _freshPageList: function () {
+ var currentPage = $that.moreInfo.paginationInfo.currentPage;
+ var total = $that.moreInfo.paginationInfo.total;
+ var pageList = [];
+
+ if (total <= 7) {
+ // 鎬婚〉鏁板皬浜庣瓑浜�7锛屾樉绀烘墍鏈夐〉鐮�
+ for (var i = 1; i <= total; i++) {
+ pageList.push({
+ page: i,
+ pageView: i,
+ currentPage: i == currentPage
+ });
+ }
+ } else {
+ // 鎬婚〉鏁板ぇ浜�7锛屾樉绀洪儴鍒嗛〉鐮�
+ if (currentPage <= 4) {
+ // 褰撳墠椤靛湪鍓�4椤�
+ for (var i = 1; i <= 5; i++) {
+ pageList.push({
+ page: i,
+ pageView: i,
+ currentPage: i == currentPage
+ });
+ }
+ pageList.push({
+ page: 0,
+ pageView: '...',
+ currentPage: false
+ });
+ pageList.push({
+ page: total,
+ pageView: total,
+ currentPage: false
+ });
+ } else if (currentPage >= total - 3) {
+ // 褰撳墠椤靛湪鍚�4椤�
+ pageList.push({
+ page: 1,
+ pageView: 1,
+ currentPage: false
+ });
+ pageList.push({
+ page: 0,
+ pageView: '...',
+ currentPage: false
+ });
+ for (var i = total - 4; i <= total; i++) {
+ pageList.push({
+ page: i,
+ pageView: i,
+ currentPage: i == currentPage
+ });
+ }
+ } else {
+ // 褰撳墠椤靛湪涓棿
+ pageList.push({
+ page: 1,
+ pageView: 1,
+ currentPage: false
+ });
+ pageList.push({
+ page: 0,
+ pageView: '...',
+ currentPage: false
+ });
+ for (var i = currentPage - 1; i <= currentPage + 1; i++) {
+ pageList.push({
+ page: i,
+ pageView: i,
+ currentPage: i == currentPage
+ });
+ }
+ pageList.push({
+ page: 0,
+ pageView: '...',
+ currentPage: false
+ });
+ pageList.push({
+ page: total,
+ pageView: total,
+ currentPage: false
+ });
+ }
+ }
+
+ $that.moreInfo.paginationInfo.pageList = pageList;
+ },
+ _changePageSize: function () {
+ $that._listData(DEFAULT_PAGE, $that.moreInfo.paginationInfo.rows);
+ },
+ _goToPage: function (_page) {
+ if (!_page || _page < 1 || _page > $that.moreInfo.paginationInfo.total) {
+ return;
+ }
+ $that._listData(_page, $that.moreInfo.paginationInfo.rows);
+ },
+ _jumpToPage: function () {
+ var page = parseInt($that.moreInfo.jumpPage);
+ if (isNaN(page) || page < 1) {
+ page = 1;
+ }
+ if (page > $that.moreInfo.paginationInfo.total) {
+ page = $that.moreInfo.paginationInfo.total;
+ }
+ $that._listData(page, $that.moreInfo.paginationInfo.rows);
+ },
+ _add: function () {
+ // 娣诲姞鍔熻兘
+ vc.toast('娣诲姞鍔熻兘');
+ },
+ _export: function () {
+ // 瀵煎嚭鍔熻兘
+ vc.toast('瀵煎嚭鍔熻兘');
+ },
+ _viewDetail: function (_item) {
+ // 鏌ョ湅璇︽儏
+ vc.toast('鏌ョ湅璇︽儏鍔熻兘');
+ },
+ _edit: function (_item) {
+ // 缂栬緫
+ vc.toast('缂栬緫鍔熻兘');
+ },
+ _delete: function (_item) {
+ vc.confirm('纭畾瑕佸垹闄よ繖鏉¤褰曞悧锛�', function () {
+ var param = {
+ params: {
+ id: _item.id
+ }
+ };
+ // 杩欓噷闇�瑕佹牴鎹疄闄匒PI璋冩暣
+ vc.http.apiPost('/costDetail/deleteMore',
+ param,
+ function (json, res) {
+ vc.toast('鍒犻櫎鎴愬姛');
+ $that._listData($that.moreInfo.paginationInfo.currentPage, $that.moreInfo.paginationInfo.rows);
+ },
+ function (errInfo, error) {
+ vc.message(errInfo);
+ }
+ );
+ });
+ }
+ }
+ });
+})(window.vc);
+
--
Gitblit v1.8.0