pull/8/head
qsh
1 year ago
parent
7d026fd682
commit
d03f08dcd4
@ -0,0 +1,82 @@ |
||||
<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> |
||||
@ -0,0 +1,72 @@ |
||||
<template> |
||||
<el-dialog v-if="show" title="报销审批" :visible.sync="show" width="800px"> |
||||
<el-descriptions :column="2" border> |
||||
<el-descriptions-item v-for="(item, index) in showColumns" :key="index" :label="item.label"> |
||||
{{ info[item.prop] }} |
||||
</el-descriptions-item> |
||||
</el-descriptions> |
||||
<el-form ref="form" class="mt20" :model="form" :rules="rules" label-width="100px"> |
||||
<el-form-item label="是否通过" prop="auditStatus"> |
||||
<el-radio-group v-model="form.auditStatus"> |
||||
<el-radio :label="1">通过</el-radio> |
||||
<el-radio :label="0">驳回</el-radio> |
||||
</el-radio-group> |
||||
</el-form-item> |
||||
<el-form-item label="审批说明" prop="auditRemark"> |
||||
<el-input v-model="form.auditRemark" type="textarea" placeholder="请输入" /> |
||||
</el-form-item> |
||||
</el-form> |
||||
|
||||
<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: [], |
||||
info: {}, |
||||
form: { |
||||
auditStatus: 1, |
||||
auditRemark: undefined |
||||
}, |
||||
rules: { |
||||
auditRemark: { required: true, message: '请输入', trigger: 'blur' } |
||||
} |
||||
}; |
||||
}, |
||||
methods: { |
||||
init(data) { |
||||
this.show = true; |
||||
this.info = { ...data, type: '1' }; |
||||
const commonColumns = [ |
||||
{ prop: 'applyUser', label: `申请人` }, |
||||
{ prop: 'applyDate', label: `申请时间` }, |
||||
{ prop: 'applyRemark', label: `申请备注` }, |
||||
{ prop: 'expenseType', label: `报销款项` }, |
||||
{ prop: 'expenseTotal', label: `报销金额` } |
||||
]; |
||||
const otherColumns = { |
||||
1: [{ prop: 'spotName', label: `报名点` }], |
||||
2: [{ prop: 'stuName', label: `成交学员` }] |
||||
}; |
||||
this.showColumns = otherColumns[this.info.type].concat(commonColumns); |
||||
}, |
||||
handleSure() { |
||||
this.$refs.form.validate(async valid => { |
||||
if (valid) { |
||||
// 提交审批结果 |
||||
} |
||||
}); |
||||
} |
||||
} |
||||
}; |
||||
</script> |
||||
|
||||
<style lang="scss" scoped></style> |
||||
@ -0,0 +1,49 @@ |
||||
<template> |
||||
<el-dialog v-if="show" :title="`报销详情【${info.statusName}】`" :visible.sync="show" width="800px"> |
||||
<el-descriptions :column="2" border> |
||||
<el-descriptions-item v-for="(item, index) in showColumns" :key="index" :label="item.label"> |
||||
{{ info[item.prop] }} |
||||
</el-descriptions-item> |
||||
</el-descriptions> |
||||
<span slot="footer"> |
||||
<el-button @click="show = false">取消</el-button> |
||||
</span> |
||||
</el-dialog> |
||||
|
||||
</template> |
||||
|
||||
<script> |
||||
export default { |
||||
data() { |
||||
return { |
||||
show: false, |
||||
showColumns: [], |
||||
info: {} |
||||
}; |
||||
}, |
||||
methods: { |
||||
init(data) { |
||||
this.show = true; |
||||
this.info = { ...data, statusName: '待审核', type: '1' }; |
||||
const commonColumns = [ |
||||
{ prop: 'applyUser', label: `申请人` }, |
||||
{ prop: 'applyDate', label: `申请时间` }, |
||||
{ prop: 'applyRemark', label: `申请备注` }, |
||||
{ prop: 'expenseType', label: `报销款项` }, |
||||
{ prop: 'expenseTotal', label: `报销金额` }, |
||||
{ prop: 'auditStatus', label: `审批状态` }, |
||||
{ prop: 'auditUser', label: `审批人` }, |
||||
{ prop: 'auditDate', label: `审批时间` }, |
||||
{ prop: 'auditRemark', label: `审批备注` } |
||||
]; |
||||
const otherColumns = { |
||||
1: [{ prop: 'spotName', label: `报名点` }], |
||||
2: [{ prop: 'stuName', label: `成交学员` }] |
||||
}; |
||||
this.showColumns = otherColumns[this.info.type].concat(commonColumns); |
||||
} |
||||
} |
||||
}; |
||||
</script> |
||||
|
||||
<style lang="scss" scoped></style> |
||||
@ -0,0 +1,97 @@ |
||||
<template> |
||||
<div> |
||||
<SearchForm v-show="showSearch" :value.sync="searchForm" /> |
||||
<el-row :gutter="10" class="mb8"> |
||||
<el-col :span="1.5"> |
||||
<el-button type="primary" plain icon="el-icon-plus" @click="handleAdd">新增</el-button> |
||||
<el-button type="warning" icon="el-icon-download" @click="handleExport">导出</el-button> |
||||
</el-col> |
||||
<right-toolbar :show-search.sync="showSearch" :columns="columns" @queryTable="_getTableList" /> |
||||
</el-row> |
||||
<el-table :data="tableList"> |
||||
<el-table-column type="selection" width="50" align="center" /> |
||||
<template v-for="item in columns"> |
||||
<el-table-column v-if="item.visible" :key="item.prop" :label="item.label" align="center" min-width="100" :prop="item.prop" /> |
||||
</template> |
||||
<el-table-column label="操作" fixed="right" align="center" width="160"> |
||||
<template slot-scope="scope"> |
||||
<el-button type="text" @click="handleDetail(scope.row)">详情</el-button> |
||||
<el-button type="text" @click="handleCheck(scope.row)">审核</el-button> |
||||
</template> |
||||
</el-table-column> |
||||
</el-table> |
||||
|
||||
<pagination :total="total" :page.sync="searchForm.pageNum" :limit.sync="searchForm.pageSize" @pagination="_getTableList" /> |
||||
|
||||
<DialogDetail ref="DialogDetail" /> |
||||
<DialogAudit ref="DialogAudit" /> |
||||
<DialogAdd ref="DialogAdd" /> |
||||
</div> |
||||
</template> |
||||
|
||||
<script> |
||||
import DialogDetail from './DialogDetail.vue'; |
||||
import DialogAudit from './DialogAudit.vue'; |
||||
import DialogAdd from './DialogAdd.vue'; |
||||
import SearchForm from './SearchForm.vue'; |
||||
import { defaultColumns } from './columns.js'; |
||||
export default { |
||||
components: { |
||||
SearchForm, DialogDetail, DialogAudit, DialogAdd |
||||
}, |
||||
props: { |
||||
type: { |
||||
type: String, |
||||
default: '1' |
||||
} |
||||
}, |
||||
data() { |
||||
return { |
||||
searchForm: { |
||||
expenseUser: undefined, |
||||
expenseDate: [], |
||||
pageNum: 1, |
||||
pageSize: 20 |
||||
}, |
||||
showSearch: true, |
||||
tableList: [], |
||||
total: 0, |
||||
columns: [] |
||||
}; |
||||
}, |
||||
watch: { |
||||
type: { |
||||
handler() { |
||||
const str = localStorage.getItem(`${this.$route.name}-${this.type}-table-columns`); |
||||
this.columns = str ? JSON.parse(str) : defaultColumns[this.type]; |
||||
this._getTableList(); |
||||
}, |
||||
immediate: true |
||||
} |
||||
}, |
||||
methods: { |
||||
async _getTableList() { |
||||
const params = { ...this.searchForm }; |
||||
// api.list(params) |
||||
this.tableList = []; |
||||
for (let i = 0; i < 20; i++) { |
||||
this.tableList.push({ applyUser: `数据${i + 1}` }); |
||||
} |
||||
}, |
||||
handleDetail(row) { |
||||
this.$refs.DialogDetail && this.$refs.DialogDetail.init({ ...row, type: this.type }); |
||||
}, |
||||
handleCheck(row) { |
||||
this.$refs.DialogAudit && this.$refs.DialogAudit.init({ ...row, type: this.type }); |
||||
}, |
||||
handleExport() { |
||||
|
||||
}, |
||||
handleAdd() { |
||||
this.$refs.DialogAdd && this.$refs.DialogAdd.init({ type: this.type }); |
||||
} |
||||
} |
||||
}; |
||||
</script> |
||||
|
||||
<style lang="scss" scoped></style> |
||||
@ -0,0 +1,40 @@ |
||||
<template> |
||||
<el-form ref="searchForm" :model="searchForm" inline label-width="100px"> |
||||
<el-form-item label="报销人：" label-width="90px"> |
||||
<el-input v-model="searchForm.expenseUser" placeholder="请输入" clearable @change="$emit('update:value', searchForm)" /> |
||||
</el-form-item> |
||||
<el-form-item label="报销时间："> |
||||
<el-date-picker v-model="searchForm.expenseDate" value-format="yyyy-MM-dd" type="daterange" range-separator="-" start-placeholder="开始日期" end-placeholder="结束日期" @change="$emit('update:value', searchForm)" /> |
||||
</el-form-item> |
||||
<el-form-item label-width="0"> |
||||
<el-button type="primary" icon="el-icon-search" @click="$emit('search')">搜索</el-button> |
||||
</el-form-item> |
||||
</el-form> |
||||
</template> |
||||
|
||||
<script> |
||||
export default { |
||||
props: { |
||||
value: { |
||||
type: Object, |
||||
default: () => ({}) |
||||
} |
||||
}, |
||||
data() { |
||||
return { |
||||
searchForm: {} |
||||
}; |
||||
}, |
||||
watch: { |
||||
value: { |
||||
handler(val) { |
||||
this.searchForm = this.deepClone(val); |
||||
}, |
||||
deep: true, |
||||
immediate: true |
||||
} |
||||
} |
||||
}; |
||||
</script> |
||||
|
||||
<style lang="scss" scoped></style> |
||||
@ -0,0 +1,24 @@ |
||||
export const defaultColumns = { |
||||
1: [ |
||||
{ key: 0, prop: 'spotName', label: `报名点`, visible: true }, |
||||
{ key: 1, prop: 'expenseType', label: `报销款项`, visible: true }, |
||||
{ key: 2, prop: 'expenseTotal', label: `报销金额`, visible: true }, |
||||
{ key: 3, prop: 'applyUser', label: `申请人`, visible: true }, |
||||
{ key: 4, prop: 'applyDate', label: `申请时间`, visible: true }, |
||||
{ key: 5, prop: 'applyRemark', label: `申请备注`, visible: true }, |
||||
{ key: 6, prop: 'auditStatus', label: `审批状态`, visible: true }, |
||||
{ key: 7, prop: 'auditUser', label: `审批人`, visible: true }, |
||||
{ key: 8, prop: 'auditDate', label: `审批时间`, visible: true } |
||||
], |
||||
2: [ |
||||
{ key: 0, prop: 'stuName', label: `成交学员`, visible: true }, |
||||
{ key: 1, prop: 'expenseType', label: `报销款项`, visible: true }, |
||||
{ key: 2, prop: 'expenseTotal', label: `报销金额`, visible: true }, |
||||
{ key: 3, prop: 'applyUser', label: `申请人`, visible: true }, |
||||
{ key: 4, prop: 'applyDate', label: `申请时间`, visible: true }, |
||||
{ key: 5, prop: 'applyRemark', label: `申请备注`, visible: true }, |
||||
{ key: 6, prop: 'auditStatus', label: `审批状态`, visible: true }, |
||||
{ key: 7, prop: 'auditUser', label: `审批人`, visible: true }, |
||||
{ key: 8, prop: 'auditDate', label: `审批时间`, visible: true } |
||||
] |
||||
}; |
||||
@ -0,0 +1,29 @@ |
||||
<template> |
||||
<div class="p20"> |
||||
<el-tabs v-model="expenseType" tab-position="left"> |
||||
<el-tab-pane label="报名点报销" name="1"> |
||||
<RightPane :type="expenseType" /> |
||||
</el-tab-pane> |
||||
<el-tab-pane label="学员成交报销" name="2"> |
||||
<RightPane :type="expenseType" /> |
||||
</el-tab-pane> |
||||
</el-tabs> |
||||
|
||||
</div> |
||||
</template> |
||||
|
||||
<script> |
||||
import RightPane from './RightPane'; |
||||
export default { |
||||
components: { |
||||
RightPane |
||||
}, |
||||
data() { |
||||
return { |
||||
expenseType: '1' |
||||
}; |
||||
} |
||||
}; |
||||
</script> |
||||
|
||||
<style lang="scss" scoped></style> |
||||
Loading…
Reference in new issue