<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="请输入" v-model="costDetailInfo.flowCode">
|
<label class="form-label" for="date">日期</label>
|
<input type="date" id="date" class="form-input" placeholder="yyyy/mm/日" v-model="costDetailInfo.date">
|
</div>
|
|
<!-- 小区名称 + 小区编码（带备注） -->
|
<div class="form-row">
|
<label class="form-label" for="communityName">小区名称</label>
|
<input type="text" id="communityName" class="form-input" placeholder="请输入" v-model="costDetailInfo.communityName">
|
<label class="form-label">小区编码</label>
|
<input type="text" id="communityCode" class="form-input" placeholder="请输入" v-model="costDetailInfo.communityCode">
|
</div>
|
|
<!-- 工程内容 -->
|
<div class="form-row">
|
<label class="form-label" for="projectContent">工程内容</label>
|
<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="请输入" v-model="costDetailInfo.managementAmount">
|
<span>元</span>
|
<label class="form-label">是否盖章</label>
|
<div class="radio-group">
|
<input type="radio" id="mgmtSealYes" name="mgmtSeal" value="1" v-model="costDetailInfo.managementStamped">
|
<label for="mgmtSealYes" style="margin-top: 8px;">是</label>
|
<input type="radio" id="mgmtSealNo" name="mgmtSeal" value="0" v-model="costDetailInfo.managementStamped">
|
<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="请输入" v-model="costDetailInfo.committeeAmount">
|
<span>元</span>
|
<label class="form-label" for="auditAmount">审价金额</label>
|
<input type="text" id="auditAmount" class="form-input" placeholder="请输入" v-model="costDetailInfo.appraisalAmount">
|
<span>元</span>
|
<label class="form-label">是否盖章</label>
|
<div class="radio-group">
|
<input type="radio" id="committeeSealYes" name="committeeSeal" value="1" v-model="costDetailInfo.committeeStamped">
|
<label for="committeeSealYes" style="margin-top: 8px;">是</label>
|
<input type="radio" id="committeeSealNo" name="committeeSeal" value="0" v-model="costDetailInfo.committeeStamped">
|
<label for="committeeSealNo" style="margin-top: 8px;">否</label>
|
</div>
|
<label class="form-label" for="approveDept">签报部门</label>
|
<select id="approveDept" class="form-input" v-model="costDetailInfo.approvalDepartment" 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">分摊范围</label>
|
<div class="radio-group">
|
<input type="radio" id="shareBuilding" name="shareScope" value="1" v-model="costDetailInfo.buildingType">
|
<label for="shareBuilding" style="margin-top: 8px;">幢</label>
|
<input type="radio" id="shareAll" name="shareScope" value="全体" v-model="costDetailInfo.buildingType">
|
<label for="shareAll" style="margin-top: 8px;">全体</label>
|
</div>
|
<label class="form-label" for="repairType">维修类型</label>
|
<input type="text" id="repairType" class="form-input" placeholder="请输入" v-model="costDetailInfo.maintenanceType" style="width: 120px;">
|
</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="costDetailInfo.fundType">
|
<label for="fundRepair" style="margin-top: 8px;">维修资金</label>
|
</div>
|
<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" 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" 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="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" v-on:click="_cancel()">取消</button>
|
<button type="button" class="btn-save" v-on:click="_saveCostDetail()">保存</button>
|
</div>
|
</form>
|
</div>
|
