qiushanhe
/
dm-manage-web
1
0
Fork 1
Code Issues Pull Requests Packages Projects Releases Wiki Activity
Labels Milestones
New Pull Request

报销 #8

Merged
qiushanhe merged 1 commits from dev-qsh into master 2 years ago
Conversation 0 Commits 1 Files Changed 8
8 changed files with 401 additions and 6 deletions
Show all changes Ignore whitespace when comparing lines Ignore changes in amount of whitespace Ignore changes in whitespace at EOL
Show Stats Download Patch File Download Diff File
  1. 82
      src/views/finance/expense/DialogAdd.vue
  2. 72
      src/views/finance/expense/DialogAudit.vue
  3. 49
      src/views/finance/expense/DialogDetail.vue
  4. 97
      src/views/finance/expense/RightPane.vue
  5. 40
      src/views/finance/expense/SearchForm.vue
  6. 24
      src/views/finance/expense/columns.js
  7. 29
      src/views/finance/expense/index.vue
  8. 14
      vue.config.js

82
src/views/finance/expense/DialogAdd.vue
Unescape View File

@ -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>

72
src/views/finance/expense/DialogAudit.vue
Unescape View File

@ -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>

49
src/views/finance/expense/DialogDetail.vue
Unescape View File

@ -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>

97
src/views/finance/expense/RightPane.vue
Unescape View File

@ -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>

40
src/views/finance/expense/SearchForm.vue
Unescape View File

@ -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>

24
src/views/finance/expense/columns.js
Unescape View File

@ -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 }
]
};

29
src/views/finance/expense/index.vue
Unescape View File

@ -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>

14
vue.config.js
Unescape View File

@ -35,8 +35,8 @@ module.exports = {
proxy: {
// detail: https://cli.vuejs.org/config/#devserver-proxy
[process.env.VUE_APP_BASE_API]: {
// target: `http://118.31.23.45/duima/`,
target: `http://localhost:8086`,
target: `http://118.31.23.45/duima/`,
// target: `http://localhost:8086`,
changeOrigin: true,
pathRewrite: {
['^' + process.env.VUE_APP_BASE_API]: ''
@ -97,10 +97,12 @@ module.exports = {
config
.plugin('ScriptExtHtmlWebpackPlugin')
.after('html')
.use('script-ext-html-webpack-plugin', [{
// `runtime` must same as runtimeChunk name. default is `runtime`
inline: /runtime\..*\.js$/
}])
.use('script-ext-html-webpack-plugin', [
{
// `runtime` must same as runtimeChunk name. default is `runtime`
inline: /runtime\..*\.js$/
}
])
.end();
config.optimization.splitChunks({
chunks: 'all',

Write Preview
Loading…
Cancel
Save