(修改了多门店总后台的财务流水相关代码,包括新增、编辑、删除等操作,并优化了查询和表单功能。)

This commit is contained in:
mkm 2024-07-22 17:14:26 +08:00
parent b172065e4c
commit 69af516b2d
4 changed files with 124 additions and 119 deletions

View File

@ -1,46 +1 @@
# vue-project # 多门店总后台
This template should help get you started developing with Vue 3 in Vite.
## Recommended IDE Setup
[VSCode](https://code.visualstudio.com/) + [Volar](https://marketplace.visualstudio.com/items?itemName=Vue.volar) (and disable Vetur) + [TypeScript Vue Plugin (Volar)](https://marketplace.visualstudio.com/items?itemName=Vue.vscode-typescript-vue-plugin).
## Type Support for `.vue` Imports in TS
TypeScript cannot handle type information for `.vue` imports by default, so we replace the `tsc` CLI with `vue-tsc` for type checking. In editors, we need [TypeScript Vue Plugin (Volar)](https://marketplace.visualstudio.com/items?itemName=Vue.vscode-typescript-vue-plugin) to make the TypeScript language service aware of `.vue` types.
If the standalone TypeScript plugin doesn't feel fast enough to you, Volar has also implemented a [Take Over Mode](https://github.com/johnsoncodehk/volar/discussions/471#discussioncomment-1361669) that is more performant. You can enable it by the following steps:
1. Disable the built-in TypeScript Extension
1) Run `Extensions: Show Built-in Extensions` from VSCode's command palette
2) Find `TypeScript and JavaScript Language Features`, right click and select `Disable (Workspace)`
2. Reload the VSCode window by running `Developer: Reload Window` from the command palette.
## Customize configuration
See [Vite Configuration Reference](https://vitejs.dev/config/).
## Project Setup
```sh
npm install
```
### Compile and Hot-Reload for Development
```sh
npm run dev
```
### Type-Check, Compile and Minify for Production
```sh
npm run build
```
### Lint with [ESLint](https://eslint.org/)
```sh
npm run lint
```

View File

@ -1,7 +1,13 @@
<template> <template>
<div class="edit-popup"> <div class="edit-popup">
<popup ref="popupRef" :title="popupTitle" :async="true" width="550px" @confirm="handleSubmit" <popup
@close="handleClose"> ref="popupRef"
:title="popupTitle"
:async="true"
width="550px"
@confirm="handleSubmit"
@close="handleClose"
>
<el-form ref="formRef" :model="formData" label-width="90px" :rules="formRules"> <el-form ref="formRef" :model="formData" label-width="90px" :rules="formRules">
<el-form-item label="门店" prop="store_name"> <el-form-item label="门店" prop="store_name">
<el-input v-model="formData.store_name" readonly /> <el-input v-model="formData.store_name" readonly />
@ -9,11 +15,22 @@
<el-form-item label="应收金额" prop="receivable"> <el-form-item label="应收金额" prop="receivable">
<el-input v-model="formData.receivable" readonly /> <el-input v-model="formData.receivable" readonly />
</el-form-item> </el-form-item>
<el-form-item label="实收金额" prop="receipts">
<el-input v-model="formData.receipts" />
</el-form-item>
<el-form-item label="备注" prop="remark"> <el-form-item label="备注" prop="remark">
<el-input v-model="formData.remark" readonly /> <el-input v-model="formData.remark" readonly />
</el-form-item> </el-form-item>
<el-form-item label="状态" prop="status"> <el-form-item label="状态" prop="status">
<el-switch v-model="formData.status" active-text="已转账" inactive-text="未转账" :active-value="1" :inactive-value="0" size="large" inline-prompt></el-switch> <el-switch
v-model="formData.status"
active-text="已转账"
inactive-text="未转账"
:active-value="1"
:inactive-value="0"
size="large"
inline-prompt
></el-switch>
</el-form-item> </el-form-item>
<el-form-item label="凭证" prop="file"> <el-form-item label="凭证" prop="file">
<material-picker v-model="formData.file" :limit="1" /> <material-picker v-model="formData.file" :limit="1" />
@ -26,7 +43,11 @@
<script lang="ts" setup name="storeCashFinanceFlowEdit"> <script lang="ts" setup name="storeCashFinanceFlowEdit">
import type { FormInstance } from 'element-plus' import type { FormInstance } from 'element-plus'
import Popup from '@/components/popup/index.vue' import Popup from '@/components/popup/index.vue'
import { apiStoreCashFinanceFlowAdd, apiStoreCashFinanceFlowEdit, apiStoreCashFinanceFlowDetail } from '@/api/store_cash_finance_flow' import {
apiStoreCashFinanceFlowAdd,
apiStoreCashFinanceFlowEdit,
apiStoreCashFinanceFlowDetail
} from '@/api/store_cash_finance_flow'
import { timeFormat } from '@/utils/util' import { timeFormat } from '@/utils/util'
import type { PropType } from 'vue' import type { PropType } from 'vue'
defineProps({ defineProps({
@ -40,7 +61,6 @@ const formRef = shallowRef<FormInstance>()
const popupRef = shallowRef<InstanceType<typeof Popup>>() const popupRef = shallowRef<InstanceType<typeof Popup>>()
const mode = ref('add') const mode = ref('add')
// //
const popupTitle = computed(() => { const popupTitle = computed(() => {
return mode.value == 'edit' ? '编辑门店现金流水' : '新增门店现金流水' return mode.value == 'edit' ? '编辑门店现金流水' : '新增门店现金流水'
@ -48,24 +68,20 @@ const popupTitle = computed(() => {
// //
const formData = reactive({ const formData = reactive({
"id": '', id: '',
"store_id": '', store_id: '',
"cash_price": "", cash_price: '',
"receivable": "", receivable: '',
"receipts": "", receipts: '',
"admin_id": '', admin_id: '',
"file": "", file: '',
"remark": "", remark: '',
"status": '', status: '',
"store_name": "" store_name: ''
}) })
// //
const formRules = reactive<any>({ const formRules = reactive<any>({})
})
// //
const setFormData = async (data: Record<any, any>) => { const setFormData = async (data: Record<any, any>) => {
@ -75,8 +91,6 @@ const setFormData = async (data: Record<any, any>) => {
formData[key] = data[key] formData[key] = data[key]
} }
} }
} }
const getDetail = async (row: Record<string, any>) => { const getDetail = async (row: Record<string, any>) => {
@ -86,11 +100,10 @@ const getDetail = async (row: Record<string, any>) => {
setFormData(data) setFormData(data)
} }
// //
const handleSubmit = async () => { const handleSubmit = async () => {
await formRef.value?.validate() await formRef.value?.validate()
const data = { ...formData, } const data = { ...formData }
mode.value == 'edit' mode.value == 'edit'
? await apiStoreCashFinanceFlowEdit(data) ? await apiStoreCashFinanceFlowEdit(data)
: await apiStoreCashFinanceFlowAdd(data) : await apiStoreCashFinanceFlowAdd(data)
@ -109,8 +122,6 @@ const handleClose = () => {
emit('close') emit('close')
} }
defineExpose({ defineExpose({
open, open,
setFormData, setFormData,

View File

@ -1,22 +1,40 @@
<template> <template>
<div> <div>
<el-card class="!border-none mb-4" shadow="never"> <el-card class="!border-none mb-4" shadow="never">
<el-form <el-form class="mb-[-16px]" :model="queryParams" inline>
class="mb-[-16px]"
:model="queryParams"
inline
>
<el-form-item label="门店" prop="store_id"> <el-form-item label="门店" prop="store_id">
<!-- <el-input class="w-[280px]" v-model="queryParams.store_name" clearable placeholder="请输入门店id" /> --> <!-- <el-input class="w-[280px]" v-model="queryParams.store_name" clearable placeholder="请输入门店id" /> -->
<el-select v-model="queryParams.store_id" filterable remote reserve-keyword <el-select
placeholder="输入门店名称搜索" remote-show-suffix :remote-method="remoteMethod" :loading="storeloading" v-model="queryParams.store_id"
style="width: 240px" @change="resetPage"> filterable
<el-option v-for="item in storeList" :key="item.id" :label="item.name" :value="item.id" /> remote
reserve-keyword
placeholder="输入门店名称搜索"
remote-show-suffix
:remote-method="remoteMethod"
:loading="storeloading"
style="width: 240px"
@change="resetPage"
>
<el-option
v-for="item in storeList"
:key="item.id"
:label="item.name"
:value="item.id"
/>
</el-select> </el-select>
</el-form-item> </el-form-item>
<el-form-item label="时间范围" prop="create_time"> <el-form-item label="时间范围" prop="create_time">
<el-date-picker v-model="startEndTime" type="daterange" range-separator="" start-placeholder="开始日期" <el-date-picker
end-placeholder="结束日期" unlink-panels :shortcuts="shortcuts" @change="changeStartEndTime" /> v-model="startEndTime"
type="daterange"
range-separator="至"
start-placeholder="开始日期"
end-placeholder="结束日期"
unlink-panels
:shortcuts="shortcuts"
@change="changeStartEndTime"
/>
</el-form-item> </el-form-item>
<el-form-item> <el-form-item>
<el-button type="primary" @click="resetPage">查询</el-button> <el-button type="primary" @click="resetPage">查询</el-button>
@ -35,24 +53,30 @@
<el-table-column label="操作人员" prop="admin_id" show-overflow-tooltip /> <el-table-column label="操作人员" prop="admin_id" show-overflow-tooltip />
<el-table-column label="图片" prop="file"> <el-table-column label="图片" prop="file">
<template #default="{ row }"> <template #default="{ row }">
<el-image v-if="row.file&&row.file!=0" style="width:50px;height:50px;" :src="row.file" :preview-teleported="true"/> <el-image
v-if="row.file && row.file != 0"
style="width: 50px; height: 50px"
:src="row.file"
:preview-teleported="true"
/>
<span v-else>待上传</span> <span v-else>待上传</span>
</template> </template>
</el-table-column> </el-table-column>
<el-table-column label="备注" prop="remark" /> <el-table-column label="备注" prop="remark" />
<el-table-column label="状态" prop="status"> <el-table-column label="状态" prop="status">
<template #default="{ row }"> <template #default="{ row }">
<el-tag v-if="row.status==0" type="danger">待处理</el-tag> <el-tag v-if="row.status == 0" type="danger">待处理</el-tag>
<el-tag v-else type="success">已确认</el-tag> <el-tag v-else type="success">已确认</el-tag>
</template> </template>
</el-table-column> </el-table-column>
<el-table-column label="操作" width="120" fixed="right"> <el-table-column label="操作" width="120" fixed="right">
<template #default="{ row }"> <template #default="{ row }">
<el-button <el-button
v-perms="['store_cash_finance_flow.store_cash_finance_flow/edit']" v-perms="['store_cash_finance_flow.store_cash_finance_flow/edit']"
type="primary" type="primary"
link link
@click="handleEdit(row)" @click="handleEdit(row)"
v-if="row.status == 0"
> >
编辑 编辑
</el-button> </el-button>
@ -64,14 +88,23 @@
<pagination v-model="pager" @change="getLists" /> <pagination v-model="pager" @change="getLists" />
</div> </div>
</el-card> </el-card>
<edit-popup v-if="showEdit" ref="editRef" :dict-data="dictData" @success="getLists" @close="showEdit = false" /> <edit-popup
v-if="showEdit"
ref="editRef"
:dict-data="dictData"
@success="getLists"
@close="showEdit = false"
/>
</div> </div>
</template> </template>
<script lang="ts" setup name="storeCashFinanceFlowLists"> <script lang="ts" setup name="storeCashFinanceFlowLists">
import { usePaging } from '@/hooks/usePaging' import { usePaging } from '@/hooks/usePaging'
import { useDictData } from '@/hooks/useDictOptions' import { useDictData } from '@/hooks/useDictOptions'
import { apiStoreCashFinanceFlowLists, apiStoreCashFinanceFlowDelete } from '@/api/store_cash_finance_flow' import {
apiStoreCashFinanceFlowLists,
apiStoreCashFinanceFlowDelete
} from '@/api/store_cash_finance_flow'
import { timeFormat } from '@/utils/util' import { timeFormat } from '@/utils/util'
import feedback from '@/utils/feedback' import feedback from '@/utils/feedback'
import EditPopup from './edit.vue' import EditPopup from './edit.vue'
@ -86,7 +119,7 @@ const shortcuts = [
const start = new Date() const start = new Date()
start.setDate(start.getDate() - 7) start.setDate(start.getDate() - 7)
return [start, end] return [start, end]
}, }
}, },
{ {
text: '近一月', text: '近一月',
@ -95,7 +128,7 @@ const shortcuts = [
const start = new Date() const start = new Date()
start.setMonth(start.getMonth() - 1) start.setMonth(start.getMonth() - 1)
return [start, end] return [start, end]
}, }
}, },
{ {
text: '近三月', text: '近三月',
@ -104,32 +137,32 @@ const shortcuts = [
const start = new Date() const start = new Date()
start.setMonth(start.getMonth() - 3) start.setMonth(start.getMonth() - 3)
return [start, end] return [start, end]
}, }
}, }
] ]
const editRef = shallowRef<InstanceType<typeof EditPopup>>() const editRef = shallowRef<InstanceType<typeof EditPopup>>()
// //
const showEdit = ref(false) const showEdit = ref(false)
const startEndTime = ref([new Date(), new Date()]); const startEndTime = ref([new Date(), new Date()])
// //
const queryParams = reactive({ const queryParams = reactive({
store_id: '', store_id: '',
start_time: moment(startEndTime.value[0]).format('YYYY-MM-DD') + ' 00:00:00', start_time: moment(startEndTime.value[0]).format('YYYY-MM-DD') + ' 00:00:00',
end_time: moment(startEndTime.value[1]).format('YYYY-MM-DD') + ' 23:59:59', end_time: moment(startEndTime.value[1]).format('YYYY-MM-DD') + ' 23:59:59'
}) })
const changeStartEndTime = ()=>{ const changeStartEndTime = () => {
if(startEndTime.value[0] && startEndTime.value[1]){ if (startEndTime.value[0] && startEndTime.value[1]) {
queryParams.start_time = moment(startEndTime.value[0]).format('YYYY-MM-DD') + ' 00:00:00'; queryParams.start_time = moment(startEndTime.value[0]).format('YYYY-MM-DD') + ' 00:00:00'
queryParams.end_time = moment(startEndTime.value[1]).format('YYYY-MM-DD') + ' 23:59:59'; queryParams.end_time = moment(startEndTime.value[1]).format('YYYY-MM-DD') + ' 23:59:59'
}else { } else {
queryParams.start_time = ''; queryParams.start_time = ''
queryParams.end_time = ''; queryParams.end_time = ''
} }
getLists(); getLists()
} }
// //
@ -173,23 +206,24 @@ const handleDelete = async (id: number | any[]) => {
getLists() getLists()
const storeloading = ref(false); const storeloading = ref(false)
const storeList = ref([]); const storeList = ref([])
const remoteMethod = (e:string='') => { const remoteMethod = (e = '') => {
storeloading.value = true; storeloading.value = true
apiSystemStoreLists({ apiSystemStoreLists({
name: e, name: e,
page_size: 50 page_size: 50
}).then(res => {
storeList.value = res.lists;
setTimeout(()=>{
storeloading.value = false;
},300)
}).catch(err => {
setTimeout(()=>{
storeloading.value = false;
},300)
}) })
.then((res) => {
storeList.value = res.lists
setTimeout(() => {
storeloading.value = false
}, 300)
})
.catch((err) => {
setTimeout(() => {
storeloading.value = false
}, 300)
})
} }
</script> </script>

View File

@ -137,8 +137,13 @@
@click="handleEdit(row)" @click="handleEdit(row)"
>编辑</el-button >编辑</el-button
> >
<!-- 此处删除无效果 --> <el-button
<!-- <el-button type="danger" v-perms="['store_branch_product.store_branch_product/delete']" link @click="handleDelete(row.id)">删除</el-button> --> type="danger"
v-perms="['store_branch_product.store_branch_product/delete']"
link
@click="handleDelete(row.id)"
>删除</el-button
>
</template> </template>
</el-table-column> </el-table-column>
</el-table> </el-table>