236 lines
8.1 KiB
Vue
236 lines
8.1 KiB
Vue
<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>
|