管理系统PC前端
You can not select more than 25 topics Topics must start with a letter or number, can include dashes ('-') and can be up to 35 characters long.
 
 
 
 
dm-manage-web/src/views/finance/expense/DialogAdd.vue

82 lines
2.6 KiB

<template>
<el-dialog v-if="show" title="新增报销" :visible.sync="show" width="500px">
<el-form ref="form" :model="form" :rules="rules" label-width="100px">
<el-form-item label="成交学员" prop="stuName">
<el-input v-model="form.stuName" placeholder="请输入" />
</el-form-item>
<el-form-item label="报名点" prop="spotName">
<el-input v-model="form.spotName" placeholder="请输入" />
</el-form-item>
<el-form-item label="报销款项" prop="expenseType">
<el-radio-group v-model="form.expenseType">
<el-radio v-for="(item, index) in expenseTypeOptions" :key="index" :label="item.key">
{{ item.value }}
</el-radio>
</el-radio-group>
</el-form-item>
<el-form-item label="报销金额" prop="expenseTotal">
<el-input v-model="form.expenseTotal" placeholder="请输入" />
</el-form-item>
<el-form-item label="报销说明" prop="applyRemark">
<el-input v-model="form.applyRemark" type="textarea" placeholder="请输入" />
</el-form-item>
</el-form>
<el-table v-if="form.type == 2" :data="tableList" border stripe>
<el-table-column prop="expenseType" label="报销款项" />
<el-table-column prop="expenseTotal" label="报销金额" />
<el-table-column prop="applyUser" label="申请人" />
<el-table-column prop="applyTime" label="申请时间" />
</el-table>
<span slot="footer">
<el-button @click="show = false">取消</el-button>
<el-button type="primary" @click="handleSure">确定</el-button>
</span>
</el-dialog>
</template>
<script>
export default {
data() {
return {
show: false,
showColumns: [],
form: {
stuName: undefined,
spotName: undefined,
expenseTotal: undefined,
expenseType: undefined,
applyRemark: undefined
},
expenseTypeOptions: [],
rules: {
stuName: { required: true, message: '请输入', trigger: 'blur' },
spotName: { required: true, message: '请输入', trigger: 'blur' },
expenseTotal: { required: true, message: '请输入', trigger: 'blur' },
applyRemark: { required: true, message: '请输入', trigger: 'blur' }
}
};
},
methods: {
init(data) {
this.show = true;
this.form.type = data.type;
if (!this.expenseTypeOptions.length) {
// 获取款项类型下拉
this.expenseTypeOptions = [];
}
},
handleSure() {
this.$refs.form.validate(async valid => {
if (valid) {
// 提交申请
}
});
}
}
};
</script>
<style lang="scss" scoped></style>