|
@@ -1,237 +1,259 @@
|
|
|
<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>
|
|
|
+ <div class="app-container">
|
|
|
+ <!-- 查询和其他操作 -->
|
|
|
+ <div class="filter-container">
|
|
|
+ <el-date-picker
|
|
|
+ v-model="selectDate"
|
|
|
+ style="margin-right:20px"
|
|
|
+ size="small"
|
|
|
+ type="daterange"
|
|
|
+ range-separator="至"
|
|
|
+ start-placeholder="开始日期"
|
|
|
+ end-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>
|
|
|
+ <!-- 查询结果 -->
|
|
|
+ <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"
|
|
|
- />
|
|
|
+ <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>
|
|
|
+ <!-- 添加或修改对话框 -->
|
|
|
+ <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-date-picker
|
|
|
+ v-model="dataForm.expenditureDate"
|
|
|
+ type="date"
|
|
|
+ class="tkdate"
|
|
|
+ value-format="yyyy-MM-dd"
|
|
|
+ style="width: 100%;"/>
|
|
|
+ <!-- <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 :loading="submiting" type="primary" @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
|
|
|
- })
|
|
|
+import {
|
|
|
+ dayjs
|
|
|
+} from 'base-core-lib'
|
|
|
+import {
|
|
|
+ listExpenditureManage,
|
|
|
+ createExpenditureManage,
|
|
|
+ updateExpenditureManage,
|
|
|
+ deleteExpenditureManage
|
|
|
+} from '@/api/expenditure'
|
|
|
+import Pagination from '@/components/Pagination'
|
|
|
+export default {
|
|
|
+ name: 'ExpenditureManage',
|
|
|
+ components: { Pagination },
|
|
|
+ data() {
|
|
|
+ return {
|
|
|
+ date: {
|
|
|
+ year: dayjs().format('YYYY'),
|
|
|
+ month: dayjs().format('MM')
|
|
|
+ },
|
|
|
+ selectDate: '',
|
|
|
+ list: null,
|
|
|
+ total: 0,
|
|
|
+ listLoading: true,
|
|
|
+ listQuery: {
|
|
|
+ page: 1,
|
|
|
+ limit: 20,
|
|
|
+ type: {
|
|
|
+ startDate: '',
|
|
|
+ endDate: ''
|
|
|
+ }
|
|
|
+ },
|
|
|
+ dataForm: {
|
|
|
+ id: undefined
|
|
|
+ },
|
|
|
+ dialogFormVisible: false,
|
|
|
+ submiting: false,
|
|
|
+ dialogStatus: '',
|
|
|
+ textMap: {
|
|
|
+ update: '编辑',
|
|
|
+ create: '创建'
|
|
|
+ },
|
|
|
+ rules: {
|
|
|
+ }
|
|
|
+ }
|
|
|
+ },
|
|
|
+ created() {
|
|
|
+ this.getList()
|
|
|
+ },
|
|
|
+ methods: {
|
|
|
+ getList() {
|
|
|
+ this.listLoading = true
|
|
|
+ if (this.selectDate.length > 0) {
|
|
|
+ this.listQuery.type.startDate = dayjs(this.selectDate[0]).format('YYYY-MM-DD')
|
|
|
+ this.listQuery.type.endDate = dayjs(this.selectDate[1]).format('YYYY-MM-DD')
|
|
|
+ }
|
|
|
+ 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>
|