| | |
| | | <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" value="repair" v-model="fundType"> |
| | | <input type="radio" id="fundRepair" name="fundType" value="repair" v-model="costDetailInfo.fundType"> |
| | | <label for="fundRepair" style="margin-top: 8px;">维修资金</label> |
| | | </div> |
| | | <div class="radio-group" style="margin-left: 100px;" v-if="fundType === 'repair'"> |
| | | <div class="radio-group" style="margin-left: 100px;" v-if="costDetailInfo.fundType === 'repair'"> |
| | | <label class="form-label" for="ownerScope">业主大会范围</label> |
| | | <select id="ownerScope" class="form-select"> |
| | | <option value="multi">多选</option> |
| | | </select> |
| | | <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> |
| | | <select id="buildingScope" class="form-select"> |
| | | <option value="multi">多选</option> |
| | | </select> |
| | | <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" value="public" v-model="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="fundType === 'public'"> |
| | | <input type="radio" id="fundSystemOut" name="fundSystemType" value="out" v-model="fundSystemType"> |
| | | <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="fundSystemType"> |
| | | <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> |