1.html
<el-form ref="expenseApplyForm" :model="expenseApplyData" :rules="expenseApplyRules" label-width="160px"> <el-form-item label="单号" prop=""> <el-input v-model="expenseApplyData.orderId" :disabled="true" placeholder="系统自动生成"></el-input> </el-form-item> <el-form-item label="项目号" prop="projectId"> <el-input v-model="expenseApplyData.projectId" placeholder="请填入项目号"></el-input> </el-form-item> <el-form-item label="报销人" prop="expenseAccount"> <el-input v-model="expenseApplyData.expenseAccount" placeholder="请选择报销人"></el-input> </el-form-item> <div v-for="(item,index) in expenseApplyData.expenseDetailList " > <el-tag type="info" style="margin-left: 160px;margin-bottom: 2px">报销明细{{index+1}}</el-tag> <el-link type="primary" v-if="expenseApplyData.expenseDetailList.length > 1" style="float: right;margin-right:19%;" @click="deleteExpenseDetail(index)">删除</el-link> <el-form-item label="费用事由" > <el-select v-model="item.costsDetails" placeholder="请选择" :class="prefix + '-select'"> <el-option label="交通费" value="交通费"></el-option> <el-option label="差旅费" value="差旅费"></el-option> <el-option label="招待费" value="招待费"></el-option> <el-option label="住宿费" value="住宿费"></el-option> <el-option label="团建费" value="团建费"></el-option> <el-option label="通讯费" value="通讯费"></el-option> <el-option label="活动经费" value="活动经费"></el-option> <el-option label="培训费" value="培训费"></el-option> <el-option label="办公耗材采购费" value="办公耗材采购费"></el-option> <el-option label="维修服务费" value="维修服务费"></el-option> <el-option label="其他" value="其他"></el-option> </el-select> </el-form-item><!--@change="countTotalMoney(index)"--> <el-form-item label="报销金额" :prop="`expenseDetailList[${index}].expenseMoney`" :rules="expenseApplyRules.expenseMoney" > <el-input v-model="item.expenseMoney" placeholder="请填入报销金额"></el-input> </el-form-item> <el-form-item label="费用说明" prop=""> <el-input v-model="item.costsAxplain" placeholder="请填入费用说明"></el-input> </el-form-item> <el-form-item label="费用归属" prop=""> <el-input v-model="item.costOfBelonging" placeholder="请选择费用归属"></el-input> </el-form-item> <el-form-item label="附件上传" prop="" style="width:30%;"> <el-upload class="" action="#" :before-upload="beforeLogoUpload" :http-request="uploadFile" :on-remove="handleRemove" :file-list="item.fileList" > <el-button size="small" type="primary">点击上传</el-button> </el-upload> </el-form-item> <el-divider v-if="index != expenseApplyData.expenseDetailList.length -1"></el-divider> </div> <el-form-item label="" prop=""> <el-button type="primary" @click="addExpenseDetail()" style="width: 100%;">添加报销明细</el-button> </el-form-item> <el-form-item label="总报销金额" prop="totalMoney"> <el-input v-model="expenseApplyData.totalMoney" :readonly="true"></el-input> </el-form-item> </el-form>
2.script
export default { data() { let checkExpenseMoney = (rule, value, callback) => { debugger; if (!value) { return callback(new Error('报销金额不能为空!')); } setTimeout(() => { if (!/^[0-9]+(.[0-9]{1,2})?$/.test(value) || !(value-0)>0) { return callback(new Error('报销金额必须大于0且最多两位小数!')); } callback(); }, 500); }; return { prefix:'workflowApply', dialogFormVisible:false, workflowApplyData:{ programId:'' }, expenseApplyData:{ orderId:'', projectId:'', expenseAccount:'', expenseDetailList:[ { costsDetails:'', expenseMoney:'', costsAxplain:'', costOfBelonging:'', fileList: []//{name: '', url: ''} } ], // costsDetails:'', // expenseMoney:'', // costsAxplain:'', // costOfBelonging:'', // fileList: []//{name: '', url: ''} totalMoney:'' }, programList:[], expenseApplyRules:{ projectId: [ { required: true, message: "项目号不能为空", trigger: "blur" } ], expenseAccount: [ { required: true, message: "报销人不能为空", trigger: "blur" } ], costsDetails: [ { required: true, message: "费用事由不能为空", trigger: "blur" } ], expenseMoney: [ { required: true,validator: checkExpenseMoney, trigger: "blur" } ], totalMoney: [ { required: true, message: "报销总金额不能为空", trigger: "blur" } ] }, status:{ loading:false } }; },