|
@@ -0,0 +1,237 @@
|
|
|
+<template>
|
|
|
+ <div class="app-container">
|
|
|
+ <!-- 查询和其他操作 -->
|
|
|
+ <div class="filter-container">
|
|
|
+ <el-input
|
|
|
+ v-model="listQuery.expenditureDate"
|
|
|
+ clearable
|
|
|
+ class="filter-item"
|
|
|
+ size="small"
|
|
|
+ style="width: 200px;"
|
|
|
+ placeholder="请输入支出日期"
|
|
|
+ />
|
|
|
+ <el-button v-permission="['expenditure:expenditure:list']" class="filter-item" type="primary" size="mini" icon="el-icon-search" @click="handleFilter">查找</el-button>
|
|
|
+ <el-button v-permission="['expenditure:expenditure:create']" class="filter-item" type="primary" size="mini" icon="el-icon-edit" @click="handleCreate">添加</el-button>
|
|
|
+ </div>
|
|
|
+
|
|
|
+ <!-- 查询结果 -->
|
|
|
+ <el-table
|
|
|
+ v-loading="listLoading"
|
|
|
+ :data="list"
|
|
|
+ size="small"
|
|
|
+ element-loading-text="正在查询中。。。"
|
|
|
+ border
|
|
|
+ fit
|
|
|
+ highlight-current-row
|
|
|
+ >
|
|
|
+ <el-table-column align="center" label="支出日期" prop="expenditureDate" />
|
|
|
+ <el-table-column align="center" label="支出内容" prop="expenditureContent" />
|
|
|
+ <el-table-column align="center" label="支出金额" prop="expenditureAmount" />
|
|
|
+ <el-table-column align="center" label="备注" prop="remark" />
|
|
|
+ <el-table-column align="center" label="操作" class-name="small-padding fixed-width">
|
|
|
+ <template slot-scope="scope">
|
|
|
+ <el-button v-permission="['expenditure:expenditure:edit']" type="primary" size="mini" @click="handleUpdate(scope.row)">编辑</el-button>
|
|
|
+ <el-button v-permission="['expenditure:expenditure:delete']" type="danger" size="mini" @click="handleDelete(scope.row)">删除</el-button>
|
|
|
+ </template>
|
|
|
+ </el-table-column>
|
|
|
+ </el-table>
|
|
|
+
|
|
|
+ <pagination
|
|
|
+ v-show="total>0"
|
|
|
+ :total="total"
|
|
|
+ :page.sync="listQuery.page"
|
|
|
+ :limit.sync="listQuery.limit"
|
|
|
+ @pagination="getList"
|
|
|
+ />
|
|
|
+
|
|
|
+ <!-- 添加或修改对话框 -->
|
|
|
+ <el-dialog :title="textMap[dialogStatus]" :visible.sync="dialogFormVisible">
|
|
|
+ <el-form
|
|
|
+ ref="dataForm"
|
|
|
+ :rules="rules"
|
|
|
+ :model="dataForm"
|
|
|
+ status-icon
|
|
|
+ label-position="left"
|
|
|
+ label-width="100px"
|
|
|
+ style="width: 400px; margin-left:50px;"
|
|
|
+ >
|
|
|
+ <el-form-item label="id" prop="id" hidden>
|
|
|
+ <el-input v-model="dataForm.id" />
|
|
|
+ </el-form-item>
|
|
|
+ <el-form-item label="支出日期" prop="expenditureDate">
|
|
|
+ <el-input v-model="dataForm.expenditureDate" />
|
|
|
+ </el-form-item>
|
|
|
+ <el-form-item label="支出内容" prop="expenditureContent">
|
|
|
+ <el-input v-model="dataForm.expenditureContent" />
|
|
|
+ </el-form-item>
|
|
|
+ <el-form-item label="支出金额" prop="expenditureAmount">
|
|
|
+ <el-input v-model="dataForm.expenditureAmount" />
|
|
|
+ </el-form-item>
|
|
|
+ <el-form-item label="备注" prop="remark">
|
|
|
+ <el-input v-model="dataForm.remark" />
|
|
|
+ </el-form-item>
|
|
|
+ </el-form>
|
|
|
+ <div slot="footer" class="dialog-footer">
|
|
|
+ <el-button @click="dialogFormVisible = false">取消</el-button>
|
|
|
+ <el-button v-if="dialogStatus=='create'" :loading="submiting" type="primary" @click="createData">确定</el-button>
|
|
|
+ <el-button v-else type="primary" :loading="submiting" @click="updateData">确定</el-button>
|
|
|
+ </div>
|
|
|
+ </el-dialog>
|
|
|
+ </div>
|
|
|
+</template>
|
|
|
+
|
|
|
+<script>
|
|
|
+ import {
|
|
|
+ listExpenditureManage,
|
|
|
+ createExpenditureManage,
|
|
|
+ updateExpenditureManage,
|
|
|
+ deleteExpenditureManage
|
|
|
+ } from '@/api/expenditure'
|
|
|
+ import Pagination from '@/components/Pagination'
|
|
|
+ export default {
|
|
|
+ name: 'ExpenditureManage',
|
|
|
+ components: { Pagination },
|
|
|
+ data() {
|
|
|
+ return {
|
|
|
+ list: null,
|
|
|
+ total: 0,
|
|
|
+ listLoading: true,
|
|
|
+ listQuery: {
|
|
|
+ page: 1,
|
|
|
+ limit: 20
|
|
|
+ },
|
|
|
+ dataForm: {
|
|
|
+ id: undefined
|
|
|
+ },
|
|
|
+ dialogFormVisible: false,
|
|
|
+ submiting: false,
|
|
|
+ dialogStatus: '',
|
|
|
+ textMap: {
|
|
|
+ update: '编辑',
|
|
|
+ create: '创建'
|
|
|
+ },
|
|
|
+ rules: {
|
|
|
+ }
|
|
|
+ }
|
|
|
+ },
|
|
|
+ created() {
|
|
|
+ this.getList()
|
|
|
+ },
|
|
|
+ methods: {
|
|
|
+ getList() {
|
|
|
+ this.listLoading = true
|
|
|
+ listExpenditureManage(this.listQuery).then(response => {
|
|
|
+ this.list = response.data.data.items
|
|
|
+ this.total = response.data.data.total
|
|
|
+ this.listLoading = false
|
|
|
+ })
|
|
|
+ .catch(() => {
|
|
|
+ this.list = []
|
|
|
+ this.total = 0
|
|
|
+ this.listLoading = false
|
|
|
+ })
|
|
|
+ },
|
|
|
+ handleFilter() {
|
|
|
+ this.listQuery.page = 1
|
|
|
+ this.getList()
|
|
|
+ },
|
|
|
+ resetForm() {
|
|
|
+ this.dataForm = {
|
|
|
+ id: undefined
|
|
|
+ }
|
|
|
+ },
|
|
|
+ handleCreate() {
|
|
|
+ this.resetForm()
|
|
|
+ this.dialogStatus = 'create'
|
|
|
+ this.dialogFormVisible = true
|
|
|
+ this.$nextTick(() => {
|
|
|
+ this.$refs['dataForm'].clearValidate()
|
|
|
+ })
|
|
|
+ },
|
|
|
+ createData() {
|
|
|
+ this.$refs['dataForm'].validate(valid => {
|
|
|
+ if (valid) {
|
|
|
+ this.submiting = true
|
|
|
+ createExpenditureManage(this.dataForm).then(response => {
|
|
|
+ this.list.unshift(response.data.data)
|
|
|
+ this.dialogFormVisible = false
|
|
|
+ this.$notify.success({
|
|
|
+ title: '成功',
|
|
|
+ message: '添加成功'
|
|
|
+ })
|
|
|
+ this.submiting = false
|
|
|
+ })
|
|
|
+ .catch(response => {
|
|
|
+ this.$notify.error({
|
|
|
+ title: '失败',
|
|
|
+ message: response.data.errmsg
|
|
|
+ })
|
|
|
+ this.submiting = false
|
|
|
+ })
|
|
|
+ }
|
|
|
+ })
|
|
|
+ },
|
|
|
+ handleUpdate(row) {
|
|
|
+ this.dataForm = Object.assign({}, row)
|
|
|
+ this.dialogStatus = 'update'
|
|
|
+ this.dialogFormVisible = true
|
|
|
+ this.$nextTick(() => {
|
|
|
+ this.$refs['dataForm'].clearValidate()
|
|
|
+ })
|
|
|
+ },
|
|
|
+ updateData() {
|
|
|
+ this.$refs['dataForm'].validate(valid => {
|
|
|
+ if (valid) {
|
|
|
+ this.submiting = true
|
|
|
+ updateExpenditureManage(this.dataForm).then(() => {
|
|
|
+ for (const v of this.list) {
|
|
|
+ if (v.id === this.dataForm.id) {
|
|
|
+ const index = this.list.indexOf(v)
|
|
|
+ this.list.splice(index, 1, this.dataForm)
|
|
|
+ break
|
|
|
+ }
|
|
|
+ }
|
|
|
+ this.dialogFormVisible = false
|
|
|
+ this.submiting = false
|
|
|
+ this.$notify.success({
|
|
|
+ title: '成功',
|
|
|
+ message: '更新成功'
|
|
|
+ })
|
|
|
+ })
|
|
|
+ .catch(response => {
|
|
|
+ this.$notify.error({
|
|
|
+ title: '失败',
|
|
|
+ message: response.data.errmsg
|
|
|
+ })
|
|
|
+ this.submiting = false
|
|
|
+ })
|
|
|
+ }
|
|
|
+ })
|
|
|
+ },
|
|
|
+ handleDelete(row) {
|
|
|
+ this.$confirm('此操作将永久删除该记录---' + row.id + '---, 是否继续?', '提示', {
|
|
|
+ confirmButtonText: '确定',
|
|
|
+ cancelButtonText: '取消',
|
|
|
+ type: 'warning'
|
|
|
+ }).then(() => {
|
|
|
+ deleteExpenditureManage(row.id).then(response => {
|
|
|
+ this.$notify.success({
|
|
|
+ title: '成功',
|
|
|
+ message: '删除成功'
|
|
|
+ })
|
|
|
+ const index = this.list.indexOf(row)
|
|
|
+ this.list.splice(index, 1)
|
|
|
+ })
|
|
|
+ .catch(response => {
|
|
|
+ this.$notify.error({
|
|
|
+ title: '失败',
|
|
|
+ message: response.data.errmsg
|
|
|
+ })
|
|
|
+ })
|
|
|
+ }).catch(() => {
|
|
|
+ return false
|
|
|
+ })
|
|
|
+ }
|
|
|
+ }
|
|
|
+ }
|
|
|
+</script>
|