zhangjiaqing
8 天以前 1cef3adee31c6934c0da4b4f0b8a6f5ac03b364f
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>