feat:重构模块
This commit is contained in:
235
src/components/Bill/BillDialog.vue
Normal file
235
src/components/Bill/BillDialog.vue
Normal file
@@ -0,0 +1,235 @@
|
||||
<template>
|
||||
<el-dialog v-model="billStore.billDialog.visible"
|
||||
title="账单内容" center class="bill-dialog"
|
||||
@open="openDialogEvent">
|
||||
<el-form ref="formRef" :model="billStore.billDialog.data"
|
||||
:rules="rules" label-width="80px">
|
||||
<el-row :gutter="20">
|
||||
<el-col :span="12">
|
||||
<el-form-item label="账本类型" prop="bookName">
|
||||
<el-radio-group v-model="billStore.billDialog.data.bookName"
|
||||
@change="changeBillBookNameEvent">
|
||||
<el-radio v-for="(item, index) in billStore.billBookList"
|
||||
:value="item.name" :key="index">
|
||||
<template #default>
|
||||
<i :class="item.icon" :style="{color: item.color}"/>
|
||||
<span style="margin-left: 5px;">{{ item.name }}</span>
|
||||
</template>
|
||||
</el-radio>
|
||||
</el-radio-group>
|
||||
</el-form-item>
|
||||
|
||||
<el-form-item label="账单类别" prop="type">
|
||||
<el-radio-group v-model="billStore.billDialog.data.type"
|
||||
@change="changeBillCategoryEvent">
|
||||
<el-radio v-for="(item, index) in billInfo.billTypeList"
|
||||
:value="item" :key="index">
|
||||
{{ getBillTypeName(item) }}
|
||||
</el-radio>
|
||||
</el-radio-group>
|
||||
</el-form-item>
|
||||
|
||||
<el-form-item label="账单分类" prop="category">
|
||||
<el-radio-group v-model="billStore.billDialog.data.category">
|
||||
<el-radio v-for="(item, index) in billInfo.billCategoryList"
|
||||
:value="item.name" :key="index">
|
||||
<template #default>
|
||||
<i :class="item.icon" :style="{color: item.color}"/>
|
||||
<span style="margin-left: 5px;">{{ item.name }}</span>
|
||||
</template>
|
||||
</el-radio>
|
||||
</el-radio-group>
|
||||
</el-form-item>
|
||||
|
||||
<el-form-item label="账单时间" prop="date">
|
||||
<el-date-picker
|
||||
v-model="billStore.billDialog.data.date"
|
||||
type="date" :editable="false" placeholder="请选择账单时间"
|
||||
value-format="YYYY-MM-DD"/>
|
||||
</el-form-item>
|
||||
|
||||
<el-form-item label="账单地点" prop="location">
|
||||
<el-input v-model="billStore.billDialog.data.location" autocomplete="off"
|
||||
placeholder="请输入账单地点" clearable
|
||||
show-word-limit maxlength="10">
|
||||
<template #prefix>
|
||||
<el-icon class="el-input__icon"><location/></el-icon>
|
||||
</template>
|
||||
</el-input>
|
||||
</el-form-item>
|
||||
|
||||
<el-form-item label="账单账户" prop="payAccount">
|
||||
<el-radio-group v-model="billStore.billDialog.data.payAccount">
|
||||
<el-radio v-for="(item, index) in billStore.billPayList"
|
||||
:value="item.name" :key="index">
|
||||
<template #default>
|
||||
<i :class="item.icon" :style="{color: item.color}"/>
|
||||
<span style="margin-left: 5px;">{{ item.name }}</span>
|
||||
</template>
|
||||
</el-radio>
|
||||
</el-radio-group>
|
||||
</el-form-item>
|
||||
|
||||
<el-form-item label="账单金额" prop="amount">
|
||||
<amount-input v-model="billStore.billDialog.data.amount"/>
|
||||
</el-form-item>
|
||||
|
||||
<el-form-item label="账单内容" prop="content">
|
||||
<el-input v-model="billStore.billDialog.data.content" autocomplete="off"
|
||||
placeholder="请输入账单内容" clearable
|
||||
show-word-limit maxlength="10">
|
||||
<template #prefix>
|
||||
<el-icon class="el-input__icon"><document/></el-icon>
|
||||
</template>
|
||||
</el-input>
|
||||
</el-form-item>
|
||||
</el-col>
|
||||
<el-col :span="12">
|
||||
<el-form-item label="账单备注">
|
||||
<el-input v-model="billStore.billDialog.data.remark" type="textarea"
|
||||
placeholder="请输入账单备注" clearable
|
||||
:rows="5" show-word-limit maxlength="200">
|
||||
</el-input>
|
||||
</el-form-item>
|
||||
<el-form-item label="账单图片">
|
||||
<upload-image v-model="billStore.billDialog.data.imageList"
|
||||
:service-url="fileServiceUrl"
|
||||
:service-file-root-path="serviceFileRootPath"
|
||||
:image-path="billStore.billImagePath"/>
|
||||
</el-form-item>
|
||||
</el-col>
|
||||
</el-row>
|
||||
</el-form>
|
||||
|
||||
<template #footer>
|
||||
<div class="dialog-footer">
|
||||
<el-button @click="cancelClick">取消</el-button>
|
||||
<el-button type="primary" @click="confirmClick">
|
||||
{{ billStore.billApiType === 'UPDATE' ? '编辑' : '新增' }}
|
||||
</el-button>
|
||||
<el-button v-if="billStore.billApiType === 'UPDATE'"
|
||||
type="danger" @click="deleteClick">
|
||||
删除
|
||||
</el-button>
|
||||
</div>
|
||||
</template>
|
||||
</el-dialog>
|
||||
</template>
|
||||
|
||||
<script lang="ts" setup>
|
||||
import { UploadImage, AmountInput } from 'vue3-common'
|
||||
import { useBillStore } from '@/store/bill.ts'
|
||||
import { Location, Document } from '@element-plus/icons-vue'
|
||||
import { FormRules } from 'element-plus'
|
||||
import { billRecordRules } from '@/utils/element/elRules.ts'
|
||||
import { nextTick, reactive, ref } from 'vue'
|
||||
import { IBillCategory } from '@/types/bill.ts'
|
||||
import { commonElMessageBox } from 'vue3-common/utils/elUtil'
|
||||
import { fileServiceUrl, serviceFileRootPath } from '@/utils'
|
||||
|
||||
const formRef = ref()
|
||||
const rules = reactive<FormRules>(billRecordRules)
|
||||
const billStore = useBillStore()
|
||||
|
||||
const billInfo = reactive({
|
||||
billTypeList: [] as string[],
|
||||
billCategoryList: [] as IBillCategory[]
|
||||
})
|
||||
|
||||
/**
|
||||
* 打开对话框事件
|
||||
*/
|
||||
const openDialogEvent = async () => {
|
||||
// 如果是新增账单 默认选择第一个账本
|
||||
if (billStore.billApiType !== 'UPDATE') {
|
||||
billStore.billDialog.data.bookName = billStore.billBookList[0].name
|
||||
}
|
||||
getBillTypeByBookName(billStore.billDialog.data.bookName)
|
||||
|
||||
// 如果是新增账单 默认选择一个类别
|
||||
if (billStore.billApiType !== 'UPDATE') {
|
||||
billStore.billDialog.data.type = billInfo.billTypeList[0]
|
||||
}
|
||||
getBillCategory()
|
||||
|
||||
// 如果是新增账单 默认选择一个分类
|
||||
if (billStore.billApiType !== 'UPDATE') {
|
||||
billStore.billDialog.data.category = billInfo.billCategoryList[0].name
|
||||
billStore.billDialog.data.payAccount = billStore.billPayList[0].name
|
||||
}
|
||||
|
||||
await nextTick(() => {
|
||||
formRef.value.clearValidate()
|
||||
})
|
||||
}
|
||||
|
||||
/**
|
||||
* 获取账单类型名称
|
||||
* @param type 账单类型
|
||||
*/
|
||||
const getBillTypeName = (type: string) => {
|
||||
return type === 'expensive' ? '支出' : '收入'
|
||||
}
|
||||
|
||||
/**
|
||||
* 选择账本事件
|
||||
* @param value 账本名称
|
||||
*/
|
||||
const changeBillBookNameEvent = (value: string) => {
|
||||
getBillTypeByBookName(value)
|
||||
billStore.billDialog.data.type = billInfo.billTypeList[0]
|
||||
getBillCategory()
|
||||
billStore.billDialog.data.category = billInfo.billCategoryList[0].name
|
||||
}
|
||||
|
||||
/**
|
||||
* 选择账单类别事件
|
||||
*/
|
||||
const changeBillCategoryEvent = () => {
|
||||
getBillCategory()
|
||||
billStore.billDialog.data.category = billInfo.billCategoryList[0].name
|
||||
}
|
||||
|
||||
/**
|
||||
* 通过账本获取账单类型
|
||||
* @param bookName 账本
|
||||
*/
|
||||
const getBillTypeByBookName = (bookName: string) => {
|
||||
billInfo.billTypeList = []
|
||||
billStore.billCategoryList.forEach((item) => {
|
||||
if (item.bookName === bookName && !billInfo.billTypeList.includes(item.type)) {
|
||||
billInfo.billTypeList.push(item.type)
|
||||
}
|
||||
})
|
||||
}
|
||||
|
||||
/**
|
||||
* 获取账单类别
|
||||
*/
|
||||
const getBillCategory = () => {
|
||||
billInfo.billCategoryList = billStore.billCategoryList.filter((value) => {
|
||||
return value.bookName === billStore.billDialog.data.bookName
|
||||
&& value.type === billStore.billDialog.data.type
|
||||
})
|
||||
}
|
||||
|
||||
/**
|
||||
* 点击确认按钮
|
||||
*/
|
||||
const confirmClick = () => {
|
||||
formRef.value.validate().then(() => {
|
||||
billStore.handleBillApi(billStore.billDialog.data)
|
||||
})
|
||||
}
|
||||
|
||||
const cancelClick = () => {
|
||||
billStore.billDialog.visible = false
|
||||
}
|
||||
|
||||
const deleteClick = () => {
|
||||
commonElMessageBox('是否确认删除该账单内容?').then(() => {
|
||||
billStore.billApiType = 'DELETE'
|
||||
billStore.handleBillApi(billStore.billDialog.data)
|
||||
})
|
||||
}
|
||||
</script>
|
||||
Reference in New Issue
Block a user