|
|
@@ -13,61 +13,86 @@
|
|
|
<el-form-item label="手机号">
|
|
|
<el-input v-model="form.employeePhone" disabled></el-input>
|
|
|
</el-form-item>
|
|
|
+ <el-form-item label="报销类型" prop="expenseTypeId">
|
|
|
+ <el-select v-model="form.expenseTypeId" placeholder="请选择" style="width: 100%;">
|
|
|
+ <el-option v-for="item in posOptions" :key="item.value" :label="item.label"
|
|
|
+ :value="item.value">
|
|
|
+ </el-option>
|
|
|
+ </el-select>
|
|
|
+ </el-form-item>
|
|
|
+ <el-form-item label="费用所属期间" prop="expenseMonth">
|
|
|
+ <el-date-picker value-format="yyyy-MM" v-model="form.expenseMonth" type="month" placeholder="选择日期"
|
|
|
+ style="width: 100%;">
|
|
|
+ </el-date-picker>
|
|
|
+ </el-form-item>
|
|
|
<el-button style="margin-bottom: 10px;" type="success" size="small" @click="addRow">新增</el-button>
|
|
|
+ <!--表格里面嵌套表单-->
|
|
|
<el-table border :header-cell-style="{ 'text-align': 'center' }" :cell-style="{ 'text-align': 'center' }"
|
|
|
- :data="form.oaReceiveObjs" ref="table" style="width: 100%">
|
|
|
+ :data="form.oaExpenseObj" ref="table" style="width: 100%">
|
|
|
+
|
|
|
+
|
|
|
|
|
|
- <el-table-column label="采购物资名称">
|
|
|
+ <el-table-column label="费用项目" width="300">
|
|
|
<template slot-scope="scope">
|
|
|
- <!--表格里面嵌套表单-->
|
|
|
- <el-form-item :prop="'oaReceiveObjs.' + scope.$index + '.name'"
|
|
|
- :rules="{ required: true, message: '采购物资名称不能为空', trigger: 'blur' }">
|
|
|
- <el-input maxlength="20" v-model="form.oaReceiveObjs[scope.$index].name" autocomplete="off" size="small"
|
|
|
- placeholder="采购物资名称"></el-input>
|
|
|
+ <el-form-item :prop="'oaExpenseObj.' + scope.$index + '.expenseItemId'"
|
|
|
+ :rules="{ required: true, message: '费用项目不能为空', trigger: 'blur' }">
|
|
|
+ <el-select v-model="form.oaExpenseObj[scope.$index].expenseItemId" placeholder="请选择费用项目" style="width: 100%;" size="small">
|
|
|
+ <el-option v-for="item in posOptions" :key="item.value" :label="item.label"
|
|
|
+ :value="item.value">
|
|
|
+ </el-option>
|
|
|
+ </el-select>
|
|
|
</el-form-item>
|
|
|
</template>
|
|
|
</el-table-column>
|
|
|
-
|
|
|
- <el-table-column label="采购数量" width="150">
|
|
|
+ <el-table-column label="金额(元)" width="200">
|
|
|
<template slot-scope="scope">
|
|
|
- <el-form-item :prop="'oaReceiveObjs.' + scope.$index + '.amount'"
|
|
|
- :rules="{ required: true, message: '采购数量不能为空', trigger: 'blur' }">
|
|
|
- <el-input v-model="form.oaReceiveObjs[scope.$index].amount" autocomplete="off" size="small" type='number'
|
|
|
- placeholder="采购数量"></el-input>
|
|
|
+ <el-form-item :prop="'oaExpenseObj.' + scope.$index + '.money'"
|
|
|
+ :rules="{ required: true, message: '金额不能为空', trigger: 'blur' }">
|
|
|
+ <el-input v-model="form.oaExpenseObj[scope.$index].money" autocomplete="off" size="small"
|
|
|
+ placeholder="金额" oninput="value=value.match(/\d+\.?\d{0,2}/,'')" @input="changeMoney(scope.$index)"></el-input>
|
|
|
</el-form-item>
|
|
|
</template>
|
|
|
</el-table-column>
|
|
|
-
|
|
|
- <el-table-column label="预算金额(元)">
|
|
|
+ <el-table-column label="开始日期" width="200">
|
|
|
<template slot-scope="scope">
|
|
|
- <el-form-item :prop="'oaReceiveObjs.' + scope.$index + '.money'"
|
|
|
- :rules="{ required: true, message: '预算金额不能为空', trigger: 'blur' }">
|
|
|
- <el-input v-model="form.oaReceiveObjs[scope.$index].money" autocomplete="off" size="small"
|
|
|
- placeholder="预算金额" oninput="value=value.match(/\d+\.?\d{0,2}/,'')" @input="changeMoney(scope.$index)"></el-input>
|
|
|
+ <el-form-item :prop="'oaExpenseObj.' + scope.$index + '.startDate'"
|
|
|
+ :rules="{ required: true, message: '开始日期不能为空', trigger: 'blur' }">
|
|
|
+ <el-date-picker value-format="yyyy-MM-dd" v-model="form.oaExpenseObj[scope.$index].startDate" type="date" placeholder="选择日期"
|
|
|
+ style="width: 100%;">
|
|
|
+ </el-date-picker>
|
|
|
+ </el-form-item>
|
|
|
+ </template>
|
|
|
+ </el-table-column>
|
|
|
+ <el-table-column label="结束日期" width="200">
|
|
|
+ <template slot-scope="scope">
|
|
|
+ <el-form-item :prop="'oaExpenseObj.' + scope.$index + '.endDate'"
|
|
|
+ :rules="{ required: true, message: '结束日期不能为空', trigger: 'blur' }">
|
|
|
+ <el-date-picker value-format="yyyy-MM-dd" v-model="form.oaExpenseObj[scope.$index].endDate" type="date" placeholder="选择日期"
|
|
|
+ style="width: 100%;">
|
|
|
+ </el-date-picker>
|
|
|
+ </el-form-item>
|
|
|
+ </template>
|
|
|
+ </el-table-column>
|
|
|
+ <el-table-column label="说明" width="500">
|
|
|
+ <template slot-scope="scope">
|
|
|
+ <el-form-item :prop="'oaExpenseObj.' + scope.$index + '.remarks'"
|
|
|
+ :rules="{ required: true, message: '说明不能为空', trigger: 'blur' }">
|
|
|
+ <el-input maxlength="20" v-model="form.oaExpenseObj[scope.$index].remarks" autocomplete="off" size="small"
|
|
|
+ placeholder="说明名称"></el-input>
|
|
|
</el-form-item>
|
|
|
</template>
|
|
|
</el-table-column>
|
|
|
-
|
|
|
<el-table-column fixed="right" label="操作" width="80">
|
|
|
<template slot-scope="scope">
|
|
|
- <el-button style="margin-bottom: 22px;" @click="handleDeleteRow(form.oaReceiveObjs[scope.$index])"
|
|
|
+ <el-button :disabled="form.oaExpenseObj.length > 1 ? false : true" style="margin-bottom: 22px;" @click="handleDeleteRow(scope.$index)"
|
|
|
type="text" size="small">删除</el-button>
|
|
|
</template>
|
|
|
</el-table-column>
|
|
|
|
|
|
</el-table>
|
|
|
- <el-form-item label="总预算金额(元)" prop="sunMoney">
|
|
|
- <el-input type="number" v-model="form.sunMoney" placeholder='总预算金额' disabled></el-input>
|
|
|
- </el-form-item>
|
|
|
- <el-form-item label="预期供应商" prop="supplier">
|
|
|
- <el-input maxlength="50" show-word-limit type="textarea" v-model="form.supplier"
|
|
|
- placeholder='请输入预期供应商'></el-input>
|
|
|
+ <el-form-item label="报销总金额(元)" prop="totalMoney">
|
|
|
+ <el-input type="number" v-model="form.totalMoney" placeholder='报销总金额' disabled></el-input>
|
|
|
</el-form-item>
|
|
|
- <el-form-item label="采购事由" prop="reason">
|
|
|
- <el-input maxlength="100" rows="3" show-word-limit type="textarea" v-model="form.reason"
|
|
|
- placeholder='请输入采购事由'></el-input>
|
|
|
- </el-form-item>
|
|
|
-
|
|
|
<el-form-item label="附件">
|
|
|
<el-upload :action="fileUrl" :headers="headers" :file-list="files" :on-success="handleFileSuccessCite"
|
|
|
:before-upload="beforeUploadFile" :on-remove="handleRemove">
|
|
|
@@ -137,7 +162,7 @@
|
|
|
</template>
|
|
|
|
|
|
<script>
|
|
|
-import { getDetail, create, reCommit, save, deleteById, closeById } from "@/api/oa/receive"
|
|
|
+import { getDetail, create, reCommit, save, deleteById, closeById } from "@/api/oa/expense"
|
|
|
import { getDate } from "@/utils/dateUtils";
|
|
|
import { getUserProfile } from "@/api/system/user";
|
|
|
import { listDept } from "@/api/system/dept";
|
|
|
@@ -181,17 +206,23 @@ export default {
|
|
|
deptName: undefined,
|
|
|
position: undefined,
|
|
|
employeePhone: undefined,
|
|
|
- oaReceiveObjs: [],
|
|
|
- sunMoney: undefined,
|
|
|
- supplier:undefined,
|
|
|
- reason: undefined,
|
|
|
+ expenseTypeId: undefined,
|
|
|
+ expenseMonth: undefined,
|
|
|
+ oaExpenseObj: [],
|
|
|
+ totalMoney: undefined,
|
|
|
fileIdList: undefined,
|
|
|
remarks: undefined,
|
|
|
peopleList: '',
|
|
|
},
|
|
|
rules: {
|
|
|
- reason: [
|
|
|
- { required: true, message: '请输入详细描述', trigger: 'blur' }
|
|
|
+ expenseTypeId: [
|
|
|
+ { required: true, message: '请选择报销类型', trigger: 'change' }
|
|
|
+ ],
|
|
|
+ expenseMonth: [
|
|
|
+ { required: true, message: '请选择费用所属期间', trigger: 'change' }
|
|
|
+ ],
|
|
|
+ totalMoney: [
|
|
|
+ { required: true, message: '请输入报销总金额', trigger: 'blur' }
|
|
|
],
|
|
|
peopleList: [
|
|
|
{ required: true, message: '请选择审批人', }
|
|
|
@@ -227,11 +258,11 @@ export default {
|
|
|
},
|
|
|
methods: {
|
|
|
changeMoney(index){
|
|
|
- if(this.form.oaReceiveObjs[index].money){
|
|
|
- let money = this.form.oaReceiveObjs[index].money;
|
|
|
- this.form.oaReceiveObjs[index].money = money;
|
|
|
- let arr = this.form.oaReceiveObjs;
|
|
|
- this.form.sunMoney = this.sum(arr);
|
|
|
+ if(this.form.oaExpenseObj[index].money){
|
|
|
+ let money = this.form.oaExpenseObj[index].money;
|
|
|
+ this.form.oaExpenseObj[index].money = money;
|
|
|
+ let arr = this.form.oaExpenseObj;
|
|
|
+ this.form.totalMoney = this.sum(arr);
|
|
|
}
|
|
|
},
|
|
|
//求和
|
|
|
@@ -244,12 +275,12 @@ export default {
|
|
|
* 新增行
|
|
|
*/
|
|
|
addRow() {
|
|
|
- let index = this.form.oaReceiveObjs.length;
|
|
|
- this.form.oaReceiveObjs.push({
|
|
|
- key: index,
|
|
|
- name: '',
|
|
|
- amount: '',
|
|
|
+ this.form.oaExpenseObj.push({
|
|
|
+ expenseItemId: '',
|
|
|
money: '',
|
|
|
+ startDate: '',
|
|
|
+ endDate: '',
|
|
|
+ remarks: '',
|
|
|
});
|
|
|
},
|
|
|
|
|
|
@@ -257,15 +288,10 @@ export default {
|
|
|
* 删除行
|
|
|
* @param row
|
|
|
*/
|
|
|
- handleDeleteRow(row) {
|
|
|
- let datas = this.form.oaReceiveObjs;
|
|
|
- for (var i = 0; i < datas.length; i++) {
|
|
|
- if (datas[i].key == row.key) {
|
|
|
- datas.splice(i, 1);
|
|
|
- }
|
|
|
- }
|
|
|
- let arr = this.form.oaReceiveObjs;
|
|
|
- this.form.sunMoney = this.sum(arr);
|
|
|
+ handleDeleteRow(index) {
|
|
|
+ this.form.oaExpenseObj.splice(index, 1);
|
|
|
+ let arr = this.form.oaExpenseObj;
|
|
|
+ this.form.totalMoney = this.sum(arr);
|
|
|
},
|
|
|
getDateStar(ms) {
|
|
|
return getDate(ms);
|