(修改了多门店总后台的财务流水相关代码,包括新增、编辑、删除等操作,并优化了查询和表单功能。)
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>
|
<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,
|
||||||
|
|
|
@ -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>
|
||||||
|
|
||||||
|
|
|
@ -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>
|
||||||
|
|
Loading…
Reference in New Issue