|
|
@@ -1,11 +1,336 @@
|
|
|
+<template>
|
|
|
+ <div class="p-4">
|
|
|
+ <div class="mb-6 p-4 bg-white rounded-lg shadow-sm flex flex-wrap items-center gap-4">
|
|
|
+ <el-form :inline="true" :model="searchForm" class="flex-grow flex flex-wrap">
|
|
|
+ <el-form-item>
|
|
|
+ <span slot="label" class="font-size-4.5">企业名称:</span>
|
|
|
+ <el-input
|
|
|
+ v-model="searchForm.enterpriseName"
|
|
|
+ style="width: 240px"
|
|
|
+ size="default"
|
|
|
+ placeholder="请输入企业名称"
|
|
|
+ @clear="handleSearch"
|
|
|
+ />
|
|
|
+ </el-form-item>
|
|
|
+ <el-form-item>
|
|
|
+ <span slot="label" class="font-size-4.5">信用代码:</span>
|
|
|
+ <el-input
|
|
|
+ v-model="searchForm.unifiedSocialCreditCode"
|
|
|
+ style="width: 240px"
|
|
|
+ size="default"
|
|
|
+ placeholder="输入统一社会信用代码"
|
|
|
+ clearable
|
|
|
+ />
|
|
|
+ </el-form-item>
|
|
|
+ <el-form-item>
|
|
|
+ <span slot="label" class="font-size-4.5">户号信息:</span>
|
|
|
+ <el-input
|
|
|
+ v-model="searchForm.accountNumber"
|
|
|
+ style="width: 240px"
|
|
|
+ size="default"
|
|
|
+ placeholder="输入户号信息"
|
|
|
+ clearable
|
|
|
+ />
|
|
|
+ </el-form-item>
|
|
|
+ <el-form-item>
|
|
|
+ <span slot="label" class="font-size-4.5">年度:</span>
|
|
|
+ <el-select v-model="searchForm.year"
|
|
|
+ style="width: 240px"
|
|
|
+ size="default" placeholder="请选择年度">
|
|
|
+ <el-option
|
|
|
+ v-for="item in annualOptions"
|
|
|
+ :key="item.value"
|
|
|
+ :label="item.label"
|
|
|
+ :value="item.value"
|
|
|
+ />
|
|
|
+ </el-select>
|
|
|
+ </el-form-item>
|
|
|
+ <el-form-item>
|
|
|
+ <el-button type="primary" :icon="Search" @click="handleSearch" size="search">查询
|
|
|
+ </el-button>
|
|
|
+ <el-button :icon="Refresh" @click="handleResetSearch" size="search">重置</el-button>
|
|
|
+ </el-form-item>
|
|
|
+ </el-form>
|
|
|
+
|
|
|
+ <div class="flex gap-1" style="justify-content:flex-end">
|
|
|
+ <el-button type="primary" :icon="Plus" @click="handleAdd" size="search">新增</el-button>
|
|
|
+ <el-button
|
|
|
+ type="danger"
|
|
|
+ :icon="Delete"
|
|
|
+ @click="handleBatchDelete"
|
|
|
+ :disabled="selectedIds.length === 0"
|
|
|
+ size="search"
|
|
|
+ >批量删除
|
|
|
+ </el-button
|
|
|
+ >
|
|
|
+ <el-button type="success" :icon="Download" @click="exportExcel" size="search">导出</el-button>
|
|
|
+ <el-upload
|
|
|
+ class="inline-block ml-2"
|
|
|
+ action="/api/eenterpriseGasAnnualStatistics/importData"
|
|
|
+ :show-file-list="false"
|
|
|
+ :on-success="handleUploadSuccess"
|
|
|
+ :on-error="handleUploadError"
|
|
|
+ :before-upload="handleBeforeUpload"
|
|
|
+ :http-request="(options) => importExcel(options.file)"
|
|
|
+ >
|
|
|
+ <el-button type="info" :icon="Upload" size="search">导入</el-button>
|
|
|
+ </el-upload>
|
|
|
+ </div>
|
|
|
+ </div>
|
|
|
+
|
|
|
+ <!-- Table -->
|
|
|
+ <div class="bg-white rounded-lg shadow-sm p-4 overflow-x-auto">
|
|
|
+ <el-table
|
|
|
+ :data="tableData"
|
|
|
+ style="width: 100%"
|
|
|
+ border
|
|
|
+ @selection-change="handleSelectionChange"
|
|
|
+ :cell-style="{ fontSize: '14px' }"
|
|
|
+ :header-cell-style="{ fontSize: '14px' }"
|
|
|
+ :row-style="{ fontSize: '14px' }"
|
|
|
+ >
|
|
|
+ <el-table-column type="selection" width="55" fixed="left"/>
|
|
|
+ <el-table-column prop="enterpriseName" label="企业名称" align="center"/>
|
|
|
+ <el-table-column prop="unifiedSocialCreditCode" label="统一社会信用代码" align="center"/>
|
|
|
+ <el-table-column prop="accountNumber" label="户号信息" align="center"/>
|
|
|
+ <el-table-column prop="year" label="年度" align="center"/>
|
|
|
+ <el-table-column prop="openingDate" label="开户日期" align="center"/>
|
|
|
+
|
|
|
+ <el-table-column label="第一季度" align="center">
|
|
|
+ <el-table-column prop="q1CubicMeter" label="用气量(m³)" align="center"/>
|
|
|
+ <el-table-column prop="q1Cost" label="费用" align="center"/>
|
|
|
+ </el-table-column>
|
|
|
+ <el-table-column label="第二季度" align="center">
|
|
|
+ <el-table-column prop="q2CubicMeter" label="用气量(m³)" align="center"/>
|
|
|
+ <el-table-column prop="q2CubicMeter" label="费用" align="center"/>
|
|
|
+ </el-table-column>
|
|
|
+ <el-table-column label="第三季度" align="center">
|
|
|
+ <el-table-column prop="q3CubicMeter" label="用气量(m³)" align="center"/>
|
|
|
+ <el-table-column prop="q3CubicMeter" label="费用" align="center"/>
|
|
|
+ </el-table-column>
|
|
|
+ <el-table-column label="第四季度" align="center">
|
|
|
+ <el-table-column prop="q4CubicMeter" label="用气量(m³)" align="center"/>
|
|
|
+ <el-table-column prop="q4CubicMeter" label="费用" align="center"/>
|
|
|
+ </el-table-column>
|
|
|
+ <el-table-column label="年度总量" align="center">
|
|
|
+ <el-table-column prop="annualTotalCubicMeter" label="用气量(m³)" align="center"/>
|
|
|
+ <el-table-column prop="annualTotalCost" label="费用" align="center"/>
|
|
|
+ </el-table-column>
|
|
|
+ <el-table-column label="操作" fixed="right" align="center">
|
|
|
+ <template #default="{ row }">
|
|
|
+ <el-button :icon="Edit" size="small" @click="handleEdit(row)">编辑</el-button>
|
|
|
+ <el-button type="danger" :icon="Delete" size="small" @click="handleDelete(row.id)"
|
|
|
+ >删除
|
|
|
+ </el-button
|
|
|
+ >
|
|
|
+ </template>
|
|
|
+ </el-table-column>
|
|
|
+ </el-table>
|
|
|
+
|
|
|
+ <!-- Pagination -->
|
|
|
+ <div class="mt-4 flex justify-end">
|
|
|
+ <el-pagination
|
|
|
+ @size-change="handleSizeChange"
|
|
|
+ @current-change="handleCurrentChange"
|
|
|
+ :current-page="pageNum"
|
|
|
+ :page-sizes="[10, 20, 50, 100]"
|
|
|
+ :page-size="pageSize"
|
|
|
+ layout="total, sizes, prev, pager, next, jumper"
|
|
|
+ :total="total"
|
|
|
+ />
|
|
|
+ </div>
|
|
|
+ </div>
|
|
|
+
|
|
|
+ <!-- Add/Edit Dialog -->
|
|
|
+ <el-dialog
|
|
|
+ v-model="dialogVisible"
|
|
|
+ :title="dialogTitle"
|
|
|
+ width="800px"
|
|
|
+ :close-on-click-modal="false"
|
|
|
+ :close-on-press-escape="false"
|
|
|
+ >
|
|
|
+ <el-form
|
|
|
+ :model="formData"
|
|
|
+ ref="formRef"
|
|
|
+ label-width="120px"
|
|
|
+ class="grid grid-cols-1 md:grid-cols-2 gap-4"
|
|
|
+ >
|
|
|
+ <el-form-item
|
|
|
+ label="企业名称"
|
|
|
+ prop="enterpriseName"
|
|
|
+ :rules="[{ required: true, message: '请输入企业名称', trigger: 'blur' }]"
|
|
|
+ >
|
|
|
+ <el-input v-model="formData.enterpriseName" placeholder="请输入企业名称"/>
|
|
|
+ </el-form-item>
|
|
|
+ <el-form-item
|
|
|
+ label="信用代码"
|
|
|
+ prop="unifiedSocialCreditCode"
|
|
|
+ :rules="[{ required: true, message: '请输入统一社会信用代码', trigger: 'blur' }]"
|
|
|
+ >
|
|
|
+ <el-input
|
|
|
+ v-model="formData.unifiedSocialCreditCode"
|
|
|
+ placeholder="请输入统一社会信用代码"
|
|
|
+ />
|
|
|
+ </el-form-item>
|
|
|
+ <el-form-item
|
|
|
+ label="户号信息"
|
|
|
+ prop="accountNumber"
|
|
|
+ :rules="[{ required: true, message: '请输入户号信息', trigger: 'blur' }]"
|
|
|
+ >
|
|
|
+ <el-input
|
|
|
+ v-model="formData.accountNumber"
|
|
|
+ placeholder="请输入户号信息"
|
|
|
+ />
|
|
|
+ </el-form-item>
|
|
|
+ <el-form-item
|
|
|
+ label="开户日期"
|
|
|
+ prop="openingDate"
|
|
|
+ :rules="[{ required: true, message: '请选择开户日期', trigger: 'change' }]"
|
|
|
+ >
|
|
|
+ <el-date-picker v-model="formData.openingDate" type="date" format="YYYY/MM/DD" value-format="YYYY-MM-DD"/>
|
|
|
+ </el-form-item>
|
|
|
+ <el-form-item
|
|
|
+ label="年度"
|
|
|
+ prop="year"
|
|
|
+ :rules="[{ required: true, message: '请选择年度', trigger: 'change' }]"部门
|
|
|
+ >
|
|
|
+ <el-select v-model="formData.year" placeholder="请选择年度" style="width: 100%">
|
|
|
+ <el-option
|
|
|
+ v-for="item in annualOptions"
|
|
|
+ :key="item.value"
|
|
|
+ :label="item.label"
|
|
|
+ :value="item.value"
|
|
|
+ />
|
|
|
+ </el-select>
|
|
|
+ </el-form-item>
|
|
|
+
|
|
|
+ <el-form-item
|
|
|
+ label="第一季度费用"
|
|
|
+ prop="q1Cost"
|
|
|
+ :rules="[
|
|
|
+ { required: true, message: '请输入第一季度费用', trigger: 'blur' },
|
|
|
+ { type: 'number', message: '请输入数字', trigger: 'blur' },
|
|
|
+ ]"
|
|
|
+ >
|
|
|
+ <el-input v-model.number="formData.q1Cost" placeholder="请输入第一季度费用"/>
|
|
|
+ </el-form-item>
|
|
|
+ <el-form-item
|
|
|
+ label="第一季度用气数"
|
|
|
+ prop="q1CubicMeter"
|
|
|
+ :rules="[
|
|
|
+ { required: true, message: '请输入第一季度用气数', trigger: 'blur' },
|
|
|
+ { type: 'number', message: '请输入数字', trigger: 'blur' },
|
|
|
+ ]"
|
|
|
+ >
|
|
|
+ <el-input v-model.number="formData.q1CubicMeter" placeholder="请输入第一季度用气数"/>
|
|
|
+ </el-form-item>
|
|
|
+
|
|
|
+
|
|
|
+ <el-form-item
|
|
|
+ label="第二季度费用"
|
|
|
+ prop="q2Cost"
|
|
|
+ :rules="[
|
|
|
+ { required: true, message: '请输入第二季度费用', trigger: 'blur' },
|
|
|
+ { type: 'number', message: '请输入数字', trigger: 'blur' },
|
|
|
+ ]"
|
|
|
+ >
|
|
|
+ <el-input v-model.number="formData.q2Cost" placeholder="请输入第二季度费用"/>
|
|
|
+ </el-form-item>
|
|
|
+ <el-form-item
|
|
|
+ label="第二季度用气数"
|
|
|
+ prop="q2CubicMeter"
|
|
|
+ :rules="[
|
|
|
+ { required: true, message: '请输入第二季度用气数', trigger: 'blur' },
|
|
|
+ { type: 'number', message: '请输入数字', trigger: 'blur' },
|
|
|
+ ]"
|
|
|
+ >
|
|
|
+ <el-input v-model.number="formData.q2CubicMeter" placeholder="请输入第二季度用气数"/>
|
|
|
+ </el-form-item>
|
|
|
+
|
|
|
+
|
|
|
+ <el-form-item
|
|
|
+ label="第三季度费用"
|
|
|
+ prop="q3Cost"
|
|
|
+ :rules="[
|
|
|
+ { required: true, message: '请输入第三季度费用', trigger: 'blur' },
|
|
|
+ { type: 'number', message: '请输入数字', trigger: 'blur' },
|
|
|
+ ]"
|
|
|
+ >
|
|
|
+ <el-input v-model.number="formData.q3Cost" placeholder="请输入第三季度费用"/>
|
|
|
+ </el-form-item>
|
|
|
+ <el-form-item
|
|
|
+ label="第三季度用气数"
|
|
|
+ prop="q3CubicMeter"
|
|
|
+ :rules="[
|
|
|
+ { required: true, message: '请输入第三季度用气数', trigger: 'blur' },
|
|
|
+ { type: 'number', message: '请输入数字', trigger: 'blur' },
|
|
|
+ ]"
|
|
|
+ >
|
|
|
+ <el-input v-model.number="formData.q3CubicMeter" placeholder="请输入第三季度用气数"/>
|
|
|
+ </el-form-item>
|
|
|
+
|
|
|
+
|
|
|
+ <el-form-item
|
|
|
+ label="第四季度费用"
|
|
|
+ prop="q4Cost"
|
|
|
+ :rules="[
|
|
|
+ { required: true, message: '请输入第四季度费用', trigger: 'blur' },
|
|
|
+ { type: 'number', message: '请输入数字', trigger: 'blur' },
|
|
|
+ ]"
|
|
|
+ >
|
|
|
+ <el-input v-model.number="formData.q4Cost" placeholder="请输入第四季度费用"/>
|
|
|
+ </el-form-item>
|
|
|
+ <el-form-item
|
|
|
+ label="第四季度用气数"
|
|
|
+ prop="q4CubicMeter"
|
|
|
+ :rules="[
|
|
|
+ { required: true, message: '请输入第四季度用气数', trigger: 'blur' },
|
|
|
+ { type: 'number', message: '请输入数字', trigger: 'blur' },
|
|
|
+ ]"
|
|
|
+ >
|
|
|
+ <el-input v-model.number="formData.q4CubicMeter" placeholder="请输入第四季度用气数"/>
|
|
|
+ </el-form-item>
|
|
|
+
|
|
|
+
|
|
|
+ <el-form-item
|
|
|
+ label="年度总费用"
|
|
|
+ prop="annualTotalCost"
|
|
|
+ :rules="[
|
|
|
+ { required: true, message: '请输入年度总费用', trigger: 'blur' },
|
|
|
+ { type: 'number', message: '请输入数字', trigger: 'blur' },
|
|
|
+ ]"
|
|
|
+ >
|
|
|
+ <el-input v-model.number="formData.annualTotalCost" placeholder="请输入年度总费用"/>
|
|
|
+ </el-form-item>
|
|
|
+ <el-form-item
|
|
|
+ label="年度总度数"
|
|
|
+ prop="annualTotalCubicMeter"
|
|
|
+ :rules="[
|
|
|
+ { required: true, message: '请输入年度总度数', trigger: 'blur' },
|
|
|
+ { type: 'number', message: '请输入数字', trigger: 'blur' },
|
|
|
+ ]"
|
|
|
+ >
|
|
|
+ <el-input v-model.number="formData.annualTotalCubicMeter" placeholder="请输入年度总度数"/>
|
|
|
+ </el-form-item>
|
|
|
+ </el-form>
|
|
|
+ <template #footer>
|
|
|
+ <span class="dialog-footer">
|
|
|
+ <el-button @click="dialogVisible = false">取消</el-button>
|
|
|
+ <el-button type="primary" @click="handleConfirm">确定</el-button>
|
|
|
+ </span>
|
|
|
+ </template>
|
|
|
+ </el-dialog>
|
|
|
+ </div>
|
|
|
+</template>
|
|
|
+
|
|
|
<script setup lang="ts">
|
|
|
-import { onMounted, reactive, ref } from 'vue'
|
|
|
-import { clientDownloadExcel, clientGet, clientPost } from '@/utils/request.ts'
|
|
|
-import type { FormInstance, UploadProps } from 'element-plus'
|
|
|
-import { ElLoading, ElMessage, ElMessageBox } from 'element-plus'
|
|
|
-import { Delete, Download, Edit, Plus, Refresh, Search, Upload } from '@element-plus/icons-vue'
|
|
|
+import {onMounted, reactive, ref} from 'vue'
|
|
|
+import {clientDownloadExcel, clientGet, clientPost} from '@/utils/request.ts'
|
|
|
+import type {FormInstance, UploadProps} from 'element-plus'
|
|
|
+import {ElForm, ElLoading, ElMessage, ElMessageBox} from 'element-plus'
|
|
|
+import {Delete, Download, Edit, Plus, Refresh, Search, Upload} from '@element-plus/icons-vue'
|
|
|
|
|
|
-// 基础类型定义
|
|
|
+// 假设 BaseResponse 和 PageType 在全局或 request.ts 中已定义
|
|
|
interface BaseResponse {
|
|
|
code: number
|
|
|
msg: string
|
|
|
@@ -19,31 +344,28 @@ interface PageType<T> {
|
|
|
pages: number
|
|
|
}
|
|
|
|
|
|
-// 燃气信息相关接口定义
|
|
|
interface Property {
|
|
|
- id: string // 主键id
|
|
|
- company?: string // 企业名称
|
|
|
- uniCode?: string // 统一社会信用代码
|
|
|
- tableName?: string // 事项名称
|
|
|
- tableCode?: string // 事项编码
|
|
|
- userInfo?: string // 燃气用户信息(户名户号)
|
|
|
- paymentDetail?: string // 缴纳燃气费明细
|
|
|
- monthlyConsumption3?: number // 近3个月月均燃气用量
|
|
|
- monthlyConsumption6?: number // 近6个月月均燃气用量
|
|
|
- isInArrears?: string // 当前是否欠费
|
|
|
- entityZtlb?: string // 类别
|
|
|
- openDate?: string // 开户日期 (改为string用于显示)
|
|
|
- userAddress?: string // 用户地址
|
|
|
- advanceAmount?: string // 预交金额
|
|
|
- arrearageAmount?: string // 欠费金额
|
|
|
- onehouseOnemeter?: string // 是否一户一表
|
|
|
- paymentPeriod?: string // 缴费所属期
|
|
|
- statisticalDate?: string // 统计日期
|
|
|
- remark?: string // 备注
|
|
|
- createTime?: string // 创建时间 (改为string用于显示)
|
|
|
- createBy?: string // 创建用户
|
|
|
- updateTime?: string // 更新时间 (改为string用于显示)
|
|
|
- updateBy?: string // 更新用户
|
|
|
+ id: string // 主键ID
|
|
|
+
|
|
|
+ enterpriseName: string // 单位名称
|
|
|
+ unifiedSocialCreditCode: string // 统一社会信用代码
|
|
|
+ year?: string // 年度(可选)
|
|
|
+ accountNumber?: string // 户号信息
|
|
|
+ q1Cost?: string // 第一季度费用
|
|
|
+ q1CubicMeter?: string // 第一季度用气数
|
|
|
+ q2Cost?: string // 第二季度费用
|
|
|
+ q2CubicMeter?: string // 第二季度用气数
|
|
|
+ q3Cost?: string // 第三季度费用
|
|
|
+ q3CubicMeter?: string // 第三季度用气数
|
|
|
+ q4Cost?: string // 第四季度费用
|
|
|
+ q4CubicMeter?: string // 第四季度用气数
|
|
|
+ annualTotalCost?: string // 年度总费用
|
|
|
+ annualTotalCubicMeter?: string // 年度总度数
|
|
|
+ openingDate?: string // 开户日期
|
|
|
+
|
|
|
+ updateTime?: string // 更新时间
|
|
|
+ createTime?: string // 创建时间
|
|
|
+ createBy?: string // 创建人
|
|
|
}
|
|
|
|
|
|
interface PropertyOneResponse extends BaseResponse {
|
|
|
@@ -55,46 +377,40 @@ interface PropertyListResponse extends BaseResponse {
|
|
|
}
|
|
|
|
|
|
interface AddProperty {
|
|
|
- company?: string // 企业名称
|
|
|
- uniCode?: string // 统一社会信用代码
|
|
|
- tableName?: string // 事项名称
|
|
|
- tableCode?: string // 事项编码
|
|
|
- userInfo?: string // 燃气用户信息(户名户号)
|
|
|
- paymentDetail?: string // 缴纳燃气费明细
|
|
|
- monthlyConsumption3?: number // 近3个月月均燃气用量
|
|
|
- monthlyConsumption6?: number // 近6个月月均燃气用量
|
|
|
- isInArrears?: string // 当前是否欠费
|
|
|
- entityZtlb?: string // 类别
|
|
|
- openDate?: string // 开户日期
|
|
|
- userAddress?: string // 用户地址
|
|
|
- advanceAmount?: string // 预交金额
|
|
|
- arrearageAmount?: string // 欠费金额
|
|
|
- onehouseOnemeter?: string // 是否一户一表
|
|
|
- paymentPeriod?: string // 缴费所属期
|
|
|
- statisticalDate?: string // 统计日期
|
|
|
- remark?: string // 备注
|
|
|
+ enterpriseName: string // 单位名称
|
|
|
+ unifiedSocialCreditCode: string // 统一社会信用代码
|
|
|
+ year?: string // 年度(可选)
|
|
|
+ accountNumber?: string // 户号信息
|
|
|
+ q1Cost?: string // 第一季度费用
|
|
|
+ q1CubicMeter?: string // 第一季度用气数
|
|
|
+ q2Cost?: string // 第二季度费用
|
|
|
+ q2CubicMeter?: string // 第二季度用气数
|
|
|
+ q3Cost?: string // 第三季度费用
|
|
|
+ q3CubicMeter?: string // 第三季度用气数
|
|
|
+ q4Cost?: string // 第四季度费用
|
|
|
+ q4CubicMeter?: string // 第四季度用气数
|
|
|
+ annualTotalCost?: string // 年度总费用
|
|
|
+ annualTotalCubicMeter?: string // 年度总度数
|
|
|
+ openingDate?: string // 开户日期
|
|
|
}
|
|
|
|
|
|
interface UpdateProperty {
|
|
|
id?: string
|
|
|
- company?: string // 企业名称
|
|
|
- uniCode?: string // 统一社会信用代码
|
|
|
- tableName?: string // 事项名称
|
|
|
- tableCode?: string // 事项编码
|
|
|
- userInfo?: string // 燃气用户信息(户名户号)
|
|
|
- paymentDetail?: string // 缴纳燃气费明细
|
|
|
- monthlyConsumption3?: number // 近3个月月均燃气用量
|
|
|
- monthlyConsumption6?: number // 近6个月月均燃气用量
|
|
|
- isInArrears?: string // 当前是否欠费
|
|
|
- entityZtlb?: string // 类别
|
|
|
- openDate?: string // 开户日期
|
|
|
- userAddress?: string // 用户地址
|
|
|
- advanceAmount?: string // 预交金额
|
|
|
- arrearageAmount?: string // 欠费金额
|
|
|
- onehouseOnemeter?: string // 是否一户一表
|
|
|
- paymentPeriod?: string // 缴费所属期
|
|
|
- statisticalDate?: string // 统计日期
|
|
|
- remark?: string // 备注
|
|
|
+ enterpriseName: string // 单位名称
|
|
|
+ unifiedSocialCreditCode: string // 统一社会信用代码
|
|
|
+ year?: string // 年度(可选)
|
|
|
+ accountNumber?: string // 户号信息
|
|
|
+ q1Cost?: string // 第一季度费用
|
|
|
+ q1CubicMeter?: string // 第一季度用气数
|
|
|
+ q2Cost?: string // 第二季度费用
|
|
|
+ q2CubicMeter?: string // 第二季度用气数
|
|
|
+ q3Cost?: string // 第三季度费用
|
|
|
+ q3CubicMeter?: string // 第三季度用气数
|
|
|
+ q4Cost?: string // 第四季度费用
|
|
|
+ q4CubicMeter?: string // 第四季度用气数
|
|
|
+ annualTotalCost?: string // 年度总费用
|
|
|
+ annualTotalCubicMeter?: string // 年度总度数
|
|
|
+ openingDate?: string // 开户日期
|
|
|
}
|
|
|
|
|
|
// 响应式状态变量
|
|
|
@@ -104,8 +420,10 @@ const pageSize = ref(10)
|
|
|
const pageNum = ref(1)
|
|
|
|
|
|
const searchForm = reactive({
|
|
|
- userInfo: '',
|
|
|
- company: '',
|
|
|
+ accountNumber: '',
|
|
|
+ enterpriseName: '',
|
|
|
+ unifiedSocialCreditCode: '',
|
|
|
+ year: '',
|
|
|
})
|
|
|
|
|
|
const dialogVisible = ref(false)
|
|
|
@@ -115,31 +433,22 @@ const formData = reactive<Property>({})
|
|
|
const formRef = ref<FormInstance>()
|
|
|
const selectedIds = ref<string[]>([])
|
|
|
|
|
|
-// 欠费状态选项
|
|
|
-const arrearOptions = [
|
|
|
- { label: '是', value: '是' },
|
|
|
- { label: '否', value: '否' },
|
|
|
-]
|
|
|
-
|
|
|
-// 一户一表选项
|
|
|
-const onehouseOptions = [
|
|
|
- { label: '是', value: '是' },
|
|
|
- { label: '否', value: '否' },
|
|
|
+// 欠缴状态选项
|
|
|
+const arrearsOptions = [
|
|
|
+ {label: '是', value: '是'},
|
|
|
+ {label: '否', value: '否'},
|
|
|
]
|
|
|
|
|
|
-// 获取欠费状态标签
|
|
|
-const getArrearLabel = (value: string | undefined) => {
|
|
|
- return arrearOptions.find((option) => option.value === value)?.label || '-'
|
|
|
-}
|
|
|
+// 年度选项(动态生成最近5年)
|
|
|
+const currentYear = new Date().getFullYear()
|
|
|
|
|
|
-// 获取一户一表标签
|
|
|
-const getOnehouseLabel = (value: string | undefined) => {
|
|
|
- return onehouseOptions.find((option) => option.value === value)?.label || '-'
|
|
|
-}
|
|
|
-
|
|
|
-// 接口调用函数
|
|
|
+const annualOptions = Array.from({length: 10}, (_, i) => ({
|
|
|
+ label: `${currentYear - i}年`,
|
|
|
+ value: `${currentYear - i}`,
|
|
|
+}))
|
|
|
+// 新增
|
|
|
const add = async (data: AddProperty) => {
|
|
|
- const res = await clientPost<AddProperty, BaseResponse>('/egas/save', {
|
|
|
+ const res = await clientPost<AddProperty, BaseResponse>('/eenterpriseGasAnnualStatistics/save', {
|
|
|
...data,
|
|
|
})
|
|
|
|
|
|
@@ -152,8 +461,9 @@ const add = async (data: AddProperty) => {
|
|
|
return true
|
|
|
}
|
|
|
|
|
|
+// 根据id获取数据
|
|
|
const getById = async (id: string) => {
|
|
|
- const res = await clientGet<null, PropertyOneResponse>('/egas/getById/' + id)
|
|
|
+ const res = await clientGet<null, PropertyOneResponse>('/eenterpriseGasAnnualStatistics/getById/' + id)
|
|
|
if (res.code !== 200) {
|
|
|
ElMessage.error(res.msg)
|
|
|
return null
|
|
|
@@ -161,41 +471,41 @@ const getById = async (id: string) => {
|
|
|
return res.data
|
|
|
}
|
|
|
|
|
|
+// 分页获取数据
|
|
|
const getList = async () => {
|
|
|
- const loading = ElLoading.service({ text: '加载中...' })
|
|
|
- try {
|
|
|
- const res = await clientGet<
|
|
|
- {
|
|
|
- pageNum: number
|
|
|
- pageSize: number
|
|
|
- userInfo?: string
|
|
|
- company?: string
|
|
|
- },
|
|
|
- PropertyListResponse
|
|
|
- >('/egas/findByPage', {
|
|
|
- params: {
|
|
|
- pageNum: pageNum.value,
|
|
|
- pageSize: pageSize.value,
|
|
|
- userInfo: searchForm.userInfo || undefined,
|
|
|
- company: searchForm.company || undefined,
|
|
|
- },
|
|
|
- })
|
|
|
+ // 构建参数对象,只包含有值的搜索条件
|
|
|
+ const params = {
|
|
|
+ pageNum: pageNum.value,
|
|
|
+ pageSize: pageSize.value,
|
|
|
+ ...(searchForm.accountNumber ? {accountNumber: searchForm.accountNumber} : {}),
|
|
|
+ ...(searchForm.unifiedSocialCreditCode ? {unifiedSocialCreditCode: searchForm.unifiedSocialCreditCode} : {}),
|
|
|
+ ...(searchForm.enterpriseName ? {enterpriseName: searchForm.enterpriseName} : {}),
|
|
|
+ ...(searchForm.year ? {year: searchForm.year} : {}),
|
|
|
+ }
|
|
|
|
|
|
- if (res.code !== 200) {
|
|
|
- ElMessage.error(res.msg)
|
|
|
- return
|
|
|
- }
|
|
|
- tableData.value = res.data.records
|
|
|
- total.value = res.data.total
|
|
|
- } catch (error) {
|
|
|
- ElMessage.error('获取数据失败')
|
|
|
- } finally {
|
|
|
- loading.close()
|
|
|
+ const res = await clientGet<{
|
|
|
+ pageNum: number
|
|
|
+ pageSize: number
|
|
|
+ accountNumber?: string
|
|
|
+ unifiedSocialCreditCode?: string
|
|
|
+ enterpriseName?: string
|
|
|
+ year?: string
|
|
|
+ },
|
|
|
+ PropertyListResponse>('/eenterpriseGasAnnualStatistics/findByPage', {
|
|
|
+ params,
|
|
|
+ })
|
|
|
+
|
|
|
+ if (res.code !== 200) {
|
|
|
+ ElMessage.error(res.msg)
|
|
|
+ return
|
|
|
}
|
|
|
+ tableData.value = res.data.records
|
|
|
+ total.value = res.data.total
|
|
|
}
|
|
|
|
|
|
+// 批量删除
|
|
|
const delBatch = async (ids: string[]) => {
|
|
|
- const res = await clientPost<string, BaseResponse>('/egas/deleteBatch', JSON.stringify(ids))
|
|
|
+ const res = await clientPost<string[], BaseResponse>('/eenterpriseGasAnnualStatistics/deleteBatch', ids)
|
|
|
if (res.code !== 200) {
|
|
|
ElMessage.error(res.msg)
|
|
|
return false
|
|
|
@@ -204,8 +514,9 @@ const delBatch = async (ids: string[]) => {
|
|
|
return true
|
|
|
}
|
|
|
|
|
|
+// 修改
|
|
|
const update = async (data: UpdateProperty) => {
|
|
|
- const res = await clientPost<UpdateProperty, BaseResponse>('/egas/update', {
|
|
|
+ const res = await clientPost<UpdateProperty, BaseResponse>('/eenterpriseGasAnnualStatistics/update', {
|
|
|
...data,
|
|
|
})
|
|
|
if (res.code !== 200) {
|
|
|
@@ -216,6 +527,7 @@ const update = async (data: UpdateProperty) => {
|
|
|
return true
|
|
|
}
|
|
|
|
|
|
+// 导出为excel
|
|
|
const exportExcel = async () => {
|
|
|
const loading = ElLoading.service({
|
|
|
lock: true,
|
|
|
@@ -225,11 +537,16 @@ const exportExcel = async () => {
|
|
|
})
|
|
|
|
|
|
try {
|
|
|
- await clientDownloadExcel('/egas/exportData', {
|
|
|
- params: {
|
|
|
- userInfo: searchForm.userInfo || undefined,
|
|
|
- company: searchForm.company || undefined,
|
|
|
- },
|
|
|
+ // 构建参数对象,只包含有值的搜索条件
|
|
|
+ const params = {
|
|
|
+ ...(searchForm.accountNumber ? {accountNumber: searchForm.accountNumber} : {}),
|
|
|
+ ...(searchForm.unifiedSocialCreditCode ? {unifiedSocialCreditCode: searchForm.unifiedSocialCreditCode} : {}),
|
|
|
+ ...(searchForm.enterpriseName ? {enterpriseName: searchForm.enterpriseName} : {}),
|
|
|
+ ...(searchForm.year ? {year: searchForm.year} : {}),
|
|
|
+ }
|
|
|
+
|
|
|
+ await clientDownloadExcel('/eenterpriseGasAnnualStatistics/exportData', {
|
|
|
+ params,
|
|
|
})
|
|
|
ElMessage.success('导出成功')
|
|
|
} catch (error) {
|
|
|
@@ -240,34 +557,45 @@ const exportExcel = async () => {
|
|
|
}
|
|
|
}
|
|
|
|
|
|
+// excel导入
|
|
|
const importExcel = async (file: File) => {
|
|
|
const formData = new FormData()
|
|
|
formData.append('file', file)
|
|
|
- const res = await clientPost<FormData, BaseResponse>('/egas/importData', formData, {
|
|
|
- headers: {
|
|
|
- 'Content-Type': 'multipart/form-data',
|
|
|
+
|
|
|
+ const res = await clientPost<FormData, BaseResponse>(
|
|
|
+ '/eenterpriseGasAnnualStatistics/importData',
|
|
|
+ formData,
|
|
|
+ {
|
|
|
+ headers: {
|
|
|
+ 'Content-Type': 'multipart/form-data',
|
|
|
+ },
|
|
|
},
|
|
|
- })
|
|
|
+ )
|
|
|
+
|
|
|
if (res.code !== 200) {
|
|
|
ElMessage.error(res.msg)
|
|
|
return false
|
|
|
}
|
|
|
ElMessage.success(res.msg)
|
|
|
+ getList()
|
|
|
return true
|
|
|
}
|
|
|
|
|
|
-// 事件处理函数
|
|
|
+// --- CRUD 操作和处理函数 ---
|
|
|
+
|
|
|
const handleAdd = () => {
|
|
|
isEdit.value = false
|
|
|
- dialogTitle.value = '新增燃气信息'
|
|
|
+ dialogTitle.value = '新增用水信息'
|
|
|
// 重置表单数据
|
|
|
Object.keys(formData).forEach((key) => delete formData[key as keyof Property])
|
|
|
+ // 设置默认值为当前年度
|
|
|
+ formData.openingDate = `${currentYear}`
|
|
|
dialogVisible.value = true
|
|
|
}
|
|
|
|
|
|
const handleEdit = async (row: Property) => {
|
|
|
isEdit.value = true
|
|
|
- dialogTitle.value = '编辑燃气信息'
|
|
|
+ dialogTitle.value = '编辑用水信息'
|
|
|
const data = await getById(row.id)
|
|
|
if (data) {
|
|
|
Object.assign(formData, data)
|
|
|
@@ -314,13 +642,15 @@ const handleBatchDelete = () => {
|
|
|
}
|
|
|
|
|
|
const handleSearch = () => {
|
|
|
- pageNum.value = 1
|
|
|
+ pageNum.value = 1 // 搜索时重置到第一页
|
|
|
getList()
|
|
|
}
|
|
|
|
|
|
const handleResetSearch = () => {
|
|
|
- searchForm.userInfo = ''
|
|
|
- searchForm.company = ''
|
|
|
+ searchForm.accountNumber = ''
|
|
|
+ searchForm.unifiedSocialCreditCode = ''
|
|
|
+ searchForm.enterpriseName = ''
|
|
|
+ searchForm.year = ''
|
|
|
pageNum.value = 1
|
|
|
getList()
|
|
|
}
|
|
|
@@ -330,7 +660,7 @@ const handleConfirm = async () => {
|
|
|
await formRef.value.validate(async (valid) => {
|
|
|
if (valid) {
|
|
|
let success = false
|
|
|
- const dataToSend = { ...formData }
|
|
|
+ const dataToSend = {...formData}
|
|
|
|
|
|
if (isEdit.value) {
|
|
|
success = await update(dataToSend)
|
|
|
@@ -354,7 +684,7 @@ const handleCurrentChange = (val: number) => {
|
|
|
|
|
|
const handleSizeChange = (val: number) => {
|
|
|
pageSize.value = val
|
|
|
- pageNum.value = 1
|
|
|
+ pageNum.value = 1 // 页大小改变时重置到第一页
|
|
|
getList()
|
|
|
}
|
|
|
|
|
|
@@ -362,7 +692,7 @@ const handleSelectionChange = (selection: Property[]) => {
|
|
|
selectedIds.value = selection.map((item) => item.id)
|
|
|
}
|
|
|
|
|
|
-const handleUploadSuccess: UploadProps['onSuccess'] = async (response) => {
|
|
|
+const handleUploadSuccess: UploadProps['onSuccess'] = async (response, uploadFile) => {
|
|
|
if (response && response.code === 200) {
|
|
|
ElMessage.success('文件导入成功')
|
|
|
getList()
|
|
|
@@ -386,227 +716,14 @@ const handleBeforeUpload: UploadProps['beforeUpload'] = (rawFile) => {
|
|
|
return true
|
|
|
}
|
|
|
|
|
|
-// 初始化
|
|
|
const init = () => {
|
|
|
getList()
|
|
|
-}
|
|
|
+};
|
|
|
|
|
|
onMounted(() => {
|
|
|
init()
|
|
|
})
|
|
|
</script>
|
|
|
-
|
|
|
-<template>
|
|
|
- <div class="p-4">
|
|
|
- <h1 class="text-2xl font-bold mb-6">燃气信息管理</h1>
|
|
|
-
|
|
|
- <!-- 搜索和操作栏 -->
|
|
|
- <div class="mb-6 p-4 bg-white rounded-lg shadow-sm flex flex-wrap items-center gap-4">
|
|
|
- <el-form :inline="true" :model="searchForm" class="flex-grow flex flex-wrap gap-x-4">
|
|
|
- <el-form-item label="燃气用户信息">
|
|
|
- <el-input v-model="searchForm.userInfo" placeholder="输入户名或户号" clearable />
|
|
|
- </el-form-item>
|
|
|
- <el-form-item label="企业名称">
|
|
|
- <el-input v-model="searchForm.company" placeholder="输入企业名称" clearable />
|
|
|
- </el-form-item>
|
|
|
- <el-form-item>
|
|
|
- <el-button type="primary" :icon="Search" @click="handleSearch">查询</el-button>
|
|
|
- <el-button :icon="Refresh" @click="handleResetSearch">重置</el-button>
|
|
|
- </el-form-item>
|
|
|
- </el-form>
|
|
|
-
|
|
|
- <div class="flex gap-2">
|
|
|
- <el-button type="primary" :icon="Plus" @click="handleAdd">新增</el-button>
|
|
|
- <el-button
|
|
|
- type="danger"
|
|
|
- :icon="Delete"
|
|
|
- @click="handleBatchDelete"
|
|
|
- :disabled="selectedIds.length === 0"
|
|
|
- >批量删除</el-button
|
|
|
- >
|
|
|
- <el-button type="success" :icon="Download" @click="exportExcel">导出</el-button>
|
|
|
- <el-upload
|
|
|
- class="inline-block"
|
|
|
- action="/api/egas/importData"
|
|
|
- :show-file-list="false"
|
|
|
- :on-success="handleUploadSuccess"
|
|
|
- :on-error="handleUploadError"
|
|
|
- :before-upload="handleBeforeUpload"
|
|
|
- :http-request="(options) => importExcel(options.file)"
|
|
|
- >
|
|
|
- <el-button type="info" :icon="Upload">导入</el-button>
|
|
|
- </el-upload>
|
|
|
- </div>
|
|
|
- </div>
|
|
|
-
|
|
|
- <!-- 表格 -->
|
|
|
- <div class="bg-white rounded-lg shadow-sm p-4 overflow-x-auto">
|
|
|
- <el-table
|
|
|
- :data="tableData"
|
|
|
- style="width: 100%"
|
|
|
- border
|
|
|
- @selection-change="handleSelectionChange"
|
|
|
- >
|
|
|
- <el-table-column type="selection" width="55" fixed="left" />
|
|
|
- <el-table-column prop="company" label="企业名称" width="180" />
|
|
|
- <el-table-column prop="uniCode" label="统一社会信用代码" width="200" />
|
|
|
- <el-table-column prop="userInfo" label="燃气用户信息" width="180" />
|
|
|
- <el-table-column prop="isInArrears" label="是否欠费" width="100">
|
|
|
- <template #default="{ row }">
|
|
|
- <el-tag :type="row.isInArrears === '是' ? 'danger' : 'success'" v-if="row.isInArrears">
|
|
|
- {{ row.isInArrears }}
|
|
|
- </el-tag>
|
|
|
- <el-tag type="info" v-else>未知</el-tag>
|
|
|
- </template>
|
|
|
- </el-table-column>
|
|
|
- <el-table-column prop="arrearageAmount" label="欠费金额" width="120" />
|
|
|
- <el-table-column prop="monthlyConsumption3" label="近3个月月均用量" width="150" />
|
|
|
- <el-table-column prop="monthlyConsumption6" label="近6个月月均用量" width="150" />
|
|
|
- <el-table-column prop="onehouseOnemeter" label="是否一户一表" width="120">
|
|
|
- <template #default="{ row }">
|
|
|
- <el-tag
|
|
|
- :type="row.onehouseOnemeter === '是' ? 'success' : 'info'"
|
|
|
- v-if="row.onehouseOnemeter"
|
|
|
- >
|
|
|
- {{ row.onehouseOnemeter }}
|
|
|
- </el-tag>
|
|
|
- <el-tag type="info" v-else>未知</el-tag>
|
|
|
- </template>
|
|
|
- </el-table-column>
|
|
|
- <el-table-column prop="openDate" label="开户日期" width="150" />
|
|
|
- <el-table-column prop="userAddress" label="用户地址" width="200" />
|
|
|
- <el-table-column label="操作" width="180" fixed="right">
|
|
|
- <template #default="{ row }">
|
|
|
- <el-button :icon="Edit" size="small" @click="handleEdit(row)">编辑</el-button>
|
|
|
- <el-button type="danger" :icon="Delete" size="small" @click="handleDelete(row.id)"
|
|
|
- >删除</el-button
|
|
|
- >
|
|
|
- </template>
|
|
|
- </el-table-column>
|
|
|
- </el-table>
|
|
|
-
|
|
|
- <!-- 分页 -->
|
|
|
- <div class="mt-4 flex justify-end">
|
|
|
- <el-pagination
|
|
|
- @size-change="handleSizeChange"
|
|
|
- @current-change="handleCurrentChange"
|
|
|
- :current-page="pageNum"
|
|
|
- :page-sizes="[10, 20, 50, 100]"
|
|
|
- :page-size="pageSize"
|
|
|
- layout="total, sizes, prev, pager, next, jumper"
|
|
|
- :total="total"
|
|
|
- />
|
|
|
- </div>
|
|
|
- </div>
|
|
|
-
|
|
|
- <!-- 新增/编辑对话框 -->
|
|
|
- <el-dialog
|
|
|
- v-model="dialogVisible"
|
|
|
- :title="dialogTitle"
|
|
|
- width="800px"
|
|
|
- :close-on-click-modal="false"
|
|
|
- :close-on-press-escape="false"
|
|
|
- >
|
|
|
- <el-form
|
|
|
- :model="formData"
|
|
|
- ref="formRef"
|
|
|
- label-width="120px"
|
|
|
- class="grid grid-cols-1 md:grid-cols-2 gap-4"
|
|
|
- >
|
|
|
- <el-form-item
|
|
|
- label="企业名称"
|
|
|
- prop="company"
|
|
|
- :rules="[{ required: true, message: '请输入企业名称', trigger: 'blur' }]"
|
|
|
- >
|
|
|
- <el-input v-model="formData.company" placeholder="请输入企业名称" />
|
|
|
- </el-form-item>
|
|
|
- <el-form-item label="统一社会信用代码" prop="uniCode">
|
|
|
- <el-input v-model="formData.uniCode" placeholder="请输入统一社会信用代码" />
|
|
|
- </el-form-item>
|
|
|
- <el-form-item label="事项名称" prop="tableName">
|
|
|
- <el-input v-model="formData.tableName" placeholder="请输入事项名称" />
|
|
|
- </el-form-item>
|
|
|
- <el-form-item label="事项编码" prop="tableCode">
|
|
|
- <el-input v-model="formData.tableCode" placeholder="请输入事项编码" />
|
|
|
- </el-form-item>
|
|
|
- <el-form-item
|
|
|
- label="燃气用户信息"
|
|
|
- prop="userInfo"
|
|
|
- :rules="[{ required: true, message: '请输入燃气用户信息', trigger: 'blur' }]"
|
|
|
- >
|
|
|
- <el-input v-model="formData.userInfo" placeholder="请输入户名户号" />
|
|
|
- </el-form-item>
|
|
|
- <el-form-item label="缴纳燃气费明细" prop="paymentDetail">
|
|
|
- <el-input v-model="formData.paymentDetail" placeholder="请输入缴纳燃气费明细" />
|
|
|
- </el-form-item>
|
|
|
- <el-form-item label="近3个月月均用量" prop="monthlyConsumption3">
|
|
|
- <el-input
|
|
|
- v-model.number="formData.monthlyConsumption3"
|
|
|
- placeholder="请输入近3个月月均用量"
|
|
|
- />
|
|
|
- </el-form-item>
|
|
|
- <el-form-item label="近6个月月均用量" prop="monthlyConsumption6">
|
|
|
- <el-input
|
|
|
- v-model.number="formData.monthlyConsumption6"
|
|
|
- placeholder="请输入近6个月月均用量"
|
|
|
- />
|
|
|
- </el-form-item>
|
|
|
- <el-form-item label="当前是否欠费" prop="isInArrears">
|
|
|
- <el-radio-group v-model="formData.isInArrears">
|
|
|
- <el-radio :label="'是'">是</el-radio>
|
|
|
- <el-radio :label="'否'">否</el-radio>
|
|
|
- </el-radio-group>
|
|
|
- </el-form-item>
|
|
|
- <el-form-item label="欠费金额" prop="arrearageAmount">
|
|
|
- <el-input v-model="formData.arrearageAmount" placeholder="请输入欠费金额" />
|
|
|
- </el-form-item>
|
|
|
- <el-form-item label="类别" prop="entityZtlb">
|
|
|
- <el-input v-model="formData.entityZtlb" placeholder="请输入类别" />
|
|
|
- </el-form-item>
|
|
|
- <el-form-item label="开户日期" prop="openDate">
|
|
|
- <el-date-picker
|
|
|
- v-model="formData.openDate"
|
|
|
- type="date"
|
|
|
- placeholder="选择开户日期"
|
|
|
- value-format="YYYY-MM-DD"
|
|
|
- style="width: 100%"
|
|
|
- />
|
|
|
- </el-form-item>
|
|
|
- <el-form-item label="用户地址" prop="userAddress">
|
|
|
- <el-input v-model="formData.userAddress" placeholder="请输入用户地址" />
|
|
|
- </el-form-item>
|
|
|
- <el-form-item label="是否一户一表" prop="onehouseOnemeter">
|
|
|
- <el-radio-group v-model="formData.onehouseOnemeter">
|
|
|
- <el-radio :label="'是'">是</el-radio>
|
|
|
- <el-radio :label="'否'">否</el-radio>
|
|
|
- </el-radio-group>
|
|
|
- </el-form-item>
|
|
|
- <el-form-item label="缴费所属期" prop="paymentPeriod">
|
|
|
- <el-input v-model="formData.paymentPeriod" placeholder="请输入缴费所属期" />
|
|
|
- </el-form-item>
|
|
|
- <el-form-item label="统计日期" prop="statisticalDate">
|
|
|
- <el-date-picker
|
|
|
- v-model="formData.statisticalDate"
|
|
|
- type="date"
|
|
|
- placeholder="选择统计日期"
|
|
|
- value-format="YYYY-MM-DD"
|
|
|
- style="width: 100%"
|
|
|
- />
|
|
|
- </el-form-item>
|
|
|
- <el-form-item label="备注" prop="remark">
|
|
|
- <el-input v-model="formData.remark" placeholder="请输入备注" type="textarea" :rows="2" />
|
|
|
- </el-form-item>
|
|
|
- </el-form>
|
|
|
- <template #footer>
|
|
|
- <span class="dialog-footer">
|
|
|
- <el-button @click="dialogVisible = false">取消</el-button>
|
|
|
- <el-button type="primary" @click="handleConfirm">确定</el-button>
|
|
|
- </span>
|
|
|
- </template>
|
|
|
- </el-dialog>
|
|
|
- </div>
|
|
|
-</template>
|
|
|
-
|
|
|
<style scoped>
|
|
|
-/* 如有特定样式需求,可在此添加,否则UnoCSS会处理大部分样式 */
|
|
|
+/* Add any specific styles here if needed, otherwise UnoCSS handles most */
|
|
|
</style>
|