feat:更新账单类别选项框

This commit is contained in:
2026-08-03 19:12:21 +08:00
parent e205d1ddf4
commit 8ecc38befd

View File

@@ -32,13 +32,13 @@
</div> </div>
<el-radio-group v-model="billStore.currentBillRecord.category" class="bill-category-group"> <el-radio-group v-model="billStore.currentBillRecord.category" class="bill-category-group">
<el-radio v-for="(item, index) in billInfo.billCategoryList" <el-radio-button v-for="(item, index) in billInfo.billCategoryList"
:value="item.name" :key="index"> :value="item.name" :key="index">
<template #default> <template #default>
<i :class="item.icon" :style="{color: item.color}"/> <i :class="item.icon"/>
<span style="margin-left: 5px;">{{ item.name }}</span> <span style="margin-left: 5px;">{{ item.name }}</span>
</template> </template>
</el-radio> </el-radio-button>
</el-radio-group> </el-radio-group>
<div class="bill-gap"></div> <div class="bill-gap"></div>
@@ -91,7 +91,7 @@ import { useBillStore } from '@/store/bill.ts'
import { Location, Document } from '@element-plus/icons-vue' import { Location, Document } from '@element-plus/icons-vue'
import { ElMessage, FormRules, UploadUserFile } from 'element-plus' import { ElMessage, FormRules, UploadUserFile } from 'element-plus'
import { billRecordRules } from '@/utils/element/elRules.ts' import { billRecordRules } from '@/utils/element/elRules.ts'
import { nextTick, onMounted, reactive, ref, watch } from 'vue' import { nextTick, reactive, ref, watch } from 'vue'
import { IBillCategory } from '@/types/bill.ts' import { IBillCategory } from '@/types/bill.ts'
import { commonElMessageBox } from 'vue3-common/utils/elUtil' import { commonElMessageBox } from 'vue3-common/utils/elUtil'
import NumberInput from '@/components/NumberInput.vue' import NumberInput from '@/components/NumberInput.vue'
@@ -244,9 +244,14 @@ const deleteClick = () => {
} }
.bill-category-group { .bill-category-group {
display: grid; display: flex;
grid-template-columns: repeat(3, 1fr); gap: 2px;
column-gap: 10px;
.el-radio-button {
.el-radio-button__inner {
border: none;
}
}
} }
.bill-gap { .bill-gap {