(修改了多门店总后台的财务流水相关代码，包括新增、编辑、删除等操作，并优化了查询和表单功能。)
This commit is contained in:
parent
b172065e4c
commit
69af516b2d
47
README.md
47
README.md
|
|
@ -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
|
||||
```
|
||||
# 多门店总后台
|
||||
|
|
@ -1,7 +1,13 @@
|
|||
<template>
|
||||
<div class="edit-popup">
|
||||
<popup ref="popupRef" :title="popupTitle" :async="true" width="550px" @confirm="handleSubmit"
|
||||
@close="handleClose">
|
||||
<popup
|
||||
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-item label="门店" prop="store_name">
|
||||
<el-input v-model="formData.store_name" readonly />
|
||||
|
|
@ -9,11 +15,22 @@
|
|||
<el-form-item label="应收金额" prop="receivable">
|
||||
<el-input v-model="formData.receivable" readonly />
|
||||
</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-input v-model="formData.remark" readonly />
|
||||
</el-form-item>
|
||||
<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 label="凭证" prop="file">
|
||||
<material-picker v-model="formData.file" :limit="1" />
|
||||
|
|
@ -26,7 +43,11 @@
|
|||
<script lang="ts" setup name="storeCashFinanceFlowEdit">
|
||||
import type { FormInstance } from 'element-plus'
|
||||
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 type { PropType } from 'vue'
|
||||
defineProps({
|
||||
|
|
@ -40,7 +61,6 @@ const formRef = shallowRef<FormInstance>()
|
|||
const popupRef = shallowRef<InstanceType<typeof Popup>>()
|
||||
const mode = ref('add')
|
||||
|
||||
|
||||
// 弹窗标题
|
||||
const popupTitle = computed(() => {
|
||||
return mode.value == 'edit' ? '编辑门店现金流水' : '新增门店现金流水'
|
||||
|
|
@ -48,24 +68,20 @@ const popupTitle = computed(() => {
|
|||
|
||||
// 表单数据
|
||||
const formData = reactive({
|
||||
"id": '',
|
||||
"store_id": '',
|
||||
"cash_price": "",
|
||||
"receivable": "",
|
||||
"receipts": "",
|
||||
"admin_id": '',
|
||||
"file": "",
|
||||
"remark": "",
|
||||
"status": '',
|
||||
"store_name": ""
|
||||
id: '',
|
||||
store_id: '',
|
||||
cash_price: '',
|
||||
receivable: '',
|
||||
receipts: '',
|
||||
admin_id: '',
|
||||
file: '',
|
||||
remark: '',
|
||||
status: '',
|
||||
store_name: ''
|
||||
})
|
||||
|
||||
|
||||
// 表单验证
|
||||
const formRules = reactive<any>({
|
||||
|
||||
})
|
||||
|
||||
const formRules = reactive<any>({})
|
||||
|
||||
// 获取详情
|
||||
const setFormData = async (data: Record<any, any>) => {
|
||||
|
|
@ -75,8 +91,6 @@ const setFormData = async (data: Record<any, any>) => {
|
|||
formData[key] = data[key]
|
||||
}
|
||||
}
|
||||
|
||||
|
||||
}
|
||||
|
||||
const getDetail = async (row: Record<string, any>) => {
|
||||
|
|
@ -86,11 +100,10 @@ const getDetail = async (row: Record<string, any>) => {
|
|||
setFormData(data)
|
||||
}
|
||||
|
||||
|
||||
// 提交按钮
|
||||
const handleSubmit = async () => {
|
||||
await formRef.value?.validate()
|
||||
const data = { ...formData, }
|
||||
const data = { ...formData }
|
||||
mode.value == 'edit'
|
||||
? await apiStoreCashFinanceFlowEdit(data)
|
||||
: await apiStoreCashFinanceFlowAdd(data)
|
||||
|
|
@ -109,8 +122,6 @@ const handleClose = () => {
|
|||
emit('close')
|
||||
}
|
||||
|
||||
|
||||
|
||||
defineExpose({
|
||||
open,
|
||||
setFormData,
|
||||
|
|
|
|||
|
|
@ -1,22 +1,40 @@
|
|||
<template>
|
||||
<div>
|
||||
<el-card class="!border-none mb-4" shadow="never">
|
||||
<el-form
|
||||
class="mb-[-16px]"
|
||||
:model="queryParams"
|
||||
inline
|
||||
>
|
||||
<el-form class="mb-[-16px]" :model="queryParams" inline>
|
||||
<el-form-item label="门店" prop="store_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
|
||||
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
|
||||
v-model="queryParams.store_id"
|
||||
filterable
|
||||
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-form-item>
|
||||
<el-form-item label="时间范围" prop="create_time">
|
||||
<el-date-picker v-model="startEndTime" type="daterange" range-separator="至" start-placeholder="开始日期"
|
||||
end-placeholder="结束日期" unlink-panels :shortcuts="shortcuts" @change="changeStartEndTime" />
|
||||
<el-date-picker
|
||||
v-model="startEndTime"
|
||||
type="daterange"
|
||||
range-separator="至"
|
||||
start-placeholder="开始日期"
|
||||
end-placeholder="结束日期"
|
||||
unlink-panels
|
||||
:shortcuts="shortcuts"
|
||||
@change="changeStartEndTime"
|
||||
/>
|
||||
</el-form-item>
|
||||
<el-form-item>
|
||||
<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="file">
|
||||
<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>
|
||||
</template>
|
||||
</el-table-column>
|
||||
<el-table-column label="备注" prop="remark" />
|
||||
<el-table-column label="备注" prop="remark" />
|
||||
<el-table-column label="状态" prop="status">
|
||||
<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>
|
||||
</template>
|
||||
</el-table-column>
|
||||
<el-table-column label="操作" width="120" fixed="right">
|
||||
<template #default="{ row }">
|
||||
<el-button
|
||||
<el-button
|
||||
v-perms="['store_cash_finance_flow.store_cash_finance_flow/edit']"
|
||||
type="primary"
|
||||
link
|
||||
@click="handleEdit(row)"
|
||||
v-if="row.status == 0"
|
||||
>
|
||||
编辑
|
||||
</el-button>
|
||||
|
|
@ -64,14 +88,23 @@
|
|||
<pagination v-model="pager" @change="getLists" />
|
||||
</div>
|
||||
</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>
|
||||
</template>
|
||||
|
||||
<script lang="ts" setup name="storeCashFinanceFlowLists">
|
||||
import { usePaging } from '@/hooks/usePaging'
|
||||
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 feedback from '@/utils/feedback'
|
||||
import EditPopup from './edit.vue'
|
||||
|
|
@ -86,7 +119,7 @@ const shortcuts = [
|
|||
const start = new Date()
|
||||
start.setDate(start.getDate() - 7)
|
||||
return [start, end]
|
||||
},
|
||||
}
|
||||
},
|
||||
{
|
||||
text: '近一月',
|
||||
|
|
@ -95,7 +128,7 @@ const shortcuts = [
|
|||
const start = new Date()
|
||||
start.setMonth(start.getMonth() - 1)
|
||||
return [start, end]
|
||||
},
|
||||
}
|
||||
},
|
||||
{
|
||||
text: '近三月',
|
||||
|
|
@ -104,32 +137,32 @@ const shortcuts = [
|
|||
const start = new Date()
|
||||
start.setMonth(start.getMonth() - 3)
|
||||
return [start, end]
|
||||
},
|
||||
},
|
||||
}
|
||||
}
|
||||
]
|
||||
|
||||
const editRef = shallowRef<InstanceType<typeof EditPopup>>()
|
||||
// 是否显示编辑框
|
||||
const showEdit = ref(false)
|
||||
|
||||
const startEndTime = ref([new Date(), new Date()]);
|
||||
const startEndTime = ref([new Date(), new Date()])
|
||||
|
||||
// 查询条件
|
||||
const queryParams = reactive({
|
||||
store_id: '',
|
||||
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 = ()=>{
|
||||
if(startEndTime.value[0] && startEndTime.value[1]){
|
||||
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';
|
||||
}else {
|
||||
queryParams.start_time = '';
|
||||
queryParams.end_time = '';
|
||||
const changeStartEndTime = () => {
|
||||
if (startEndTime.value[0] && startEndTime.value[1]) {
|
||||
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'
|
||||
} else {
|
||||
queryParams.start_time = ''
|
||||
queryParams.end_time = ''
|
||||
}
|
||||
getLists();
|
||||
getLists()
|
||||
}
|
||||
|
||||
// 选中数据
|
||||
|
|
@ -173,23 +206,24 @@ const handleDelete = async (id: number | any[]) => {
|
|||
|
||||
getLists()
|
||||
|
||||
const storeloading = ref(false);
|
||||
const storeList = ref([]);
|
||||
const remoteMethod = (e:string='') => {
|
||||
storeloading.value = true;
|
||||
const storeloading = ref(false)
|
||||
const storeList = ref([])
|
||||
const remoteMethod = (e = '') => {
|
||||
storeloading.value = true
|
||||
apiSystemStoreLists({
|
||||
name: e,
|
||||
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>
|
||||
|
||||
|
|
|
|||
|
|
@ -137,8 +137,13 @@
|
|||
@click="handleEdit(row)"
|
||||
>编辑</el-button
|
||||
>
|
||||
<!-- 此处删除无效果 -->
|
||||
<!-- <el-button type="danger" v-perms="['store_branch_product.store_branch_product/delete']" link @click="handleDelete(row.id)">删除</el-button> -->
|
||||
<el-button
|
||||
type="danger"
|
||||
v-perms="['store_branch_product.store_branch_product/delete']"
|
||||
link
|
||||
@click="handleDelete(row.id)"
|
||||
>删除</el-button
|
||||
>
|
||||
</template>
|
||||
</el-table-column>
|
||||
</el-table>
|
||||
|
|
|
|||
Loading…
Reference in New Issue