From b1d33fd41ee85b3100859764f7630fee3c205fab Mon Sep 17 00:00:00 2001
From: 潘志宝 <979469083@qq.com>
Date: 星期六, 02 十一月 2024 15:43:17 +0800
Subject: [PATCH] 计划数据
---
src/views/data/plan/category/CategoryForm.vue | 141 +++++++
src/api/data/plan/data/index.ts | 40 ++
src/api/data/plan/item/index.ts | 55 +++
src/views/data/plan/item/ItemForm.vue | 167 +++++++++
src/views/data/plan/category/index.vue | 159 ++++++++
src/views/data/plan/data/index.vue | 158 ++++++++
src/views/data/plan/item/index.vue | 159 ++++++++
src/api/data/plan/category/index.ts | 42 ++
src/views/data/plan/data/DataSetForm.vue | 129 +++++++
9 files changed, 1,050 insertions(+), 0 deletions(-)
diff --git a/src/api/data/plan/category/index.ts b/src/api/data/plan/category/index.ts
new file mode 100644
index 0000000..fc2a7b6
--- /dev/null
+++ b/src/api/data/plan/category/index.ts
@@ -0,0 +1,42 @@
+import request from '@/config/axios'
+
+export interface IndItemCategoryVO {
+ id: string
+ label: string
+ pid: string
+ sort: number
+}
+
+export interface IndItemCategoryReqVO {
+ label?: string
+}
+
+// 查询列表
+export const getCategoryList = (params) => {
+ return request.get({ url: '/data/plan/category/list', params})
+}
+
+// 查询列表
+export const getCategoryListAllSimple = () => {
+ return request.get({ url: '/data/plan/category/list-all-simple'})
+}
+
+// 查询详情
+export const getCategory = (id: number) => {
+ return request.get({ url: '/data/plan/category/get?id=' + id})
+}
+
+// 新增
+export const createCategory = (data: ScheduleModelVO) => {
+ return request.post({ url: '/data/plan/category/create', data })
+}
+
+// 修改
+export const updateCategory = (data: ScheduleModelVO) => {
+ return request.put({ url: '/data/plan/category/update', data })
+}
+
+// 删除
+export const deleteCategory = (id: number) => {
+ return request.delete({ url: '/data/plan/category/delete?id=' + id })
+}
diff --git a/src/api/data/plan/data/index.ts b/src/api/data/plan/data/index.ts
new file mode 100644
index 0000000..f04478a
--- /dev/null
+++ b/src/api/data/plan/data/index.ts
@@ -0,0 +1,40 @@
+import request from '@/config/axios'
+
+export type DataSetVO = {
+ id: number | undefined
+ name: string
+ dataSource: string
+ querySql: string
+ remark: string
+ sort: number
+}
+
+// 查询列表
+export const getDataSetList = () => {
+ return request.get({ url: '/data/plan/data-set/list-all-simple' })
+}
+
+// 查询列表
+export const getDataSetPage = (params: PageParam) => {
+ return request.get({ url: '/data/plan/data-set/page', params })
+}
+
+// 查询详情
+export const getDataSet = (id: number) => {
+ return request.get({ url: '/data/plan/data-set/get?id=' + id })
+}
+
+// 新增
+export const createDataSet = (data: DataSetVO) => {
+ return request.post({ url: '/data/plan/data-set/create', data })
+}
+
+// 修改
+export const updateDataSet = (data: DataSetVO) => {
+ return request.put({ url: '/data/plan/data-set/update', data })
+}
+
+// 删除
+export const deleteDataSet = (id: number) => {
+ return request.delete({ url: '/data/plan/data-set/delete?id=' + id })
+}
diff --git a/src/api/data/plan/item/index.ts b/src/api/data/plan/item/index.ts
new file mode 100644
index 0000000..897a453
--- /dev/null
+++ b/src/api/data/plan/item/index.ts
@@ -0,0 +1,55 @@
+import request from '@/config/axios'
+
+export type ItemVO = {
+ id: string | undefined
+ itemNo: string
+ itemName: string
+ itemCategory: string
+ timeGranularity: string
+ dataSource: string
+ remark: string
+ status: string
+}
+
+export type PageParam = {
+ itemNo: string
+ itemName: string
+ itemCategory: string
+}
+
+// 查询列表
+export const getItemPage = (params: PageParam) => {
+ return request.get({ url: '/data/plan-item/page', params })
+}
+
+// 查询详情
+export const getItem = (id: string) => {
+ return request.get({ url: '/data/plan-item/get?id=' + id })
+}
+
+// 新增
+export const createItem = (data: ItemVO) => {
+ return request.post({ url: '/data/plan-item/create', data })
+}
+
+// 修改
+export const updateItem = (data: ItemVO) => {
+ return request.put({ url: '/data/plan-item/update', data })
+}
+
+// 删除
+export const deleteItem = (id: number) => {
+ return request.delete({ url: '/data/plan-item/delete?id=' + id })
+}
+
+//获取下拉集合
+export const getItemList = (params: PageParam) => {
+ return request.get({ url: '/data/plan-item/getList', params})
+}
+
+export const validateAsNumber = (rule, value, callback) => {
+ const regex = /^(\-|\+)?\d+(\.\d+)?$/;
+ if (!regex.test(value)) {
+ callback(new Error('请输入数字！'));
+ }
+}
diff --git a/src/views/data/plan/category/CategoryForm.vue b/src/views/data/plan/category/CategoryForm.vue
new file mode 100644
index 0000000..5bbbaad
--- /dev/null
+++ b/src/views/data/plan/category/CategoryForm.vue
@@ -0,0 +1,141 @@
+<template>
+ <Dialog v-model="dialogVisible" :title="dialogTitle">
+ <el-form
+ ref="formRef"
+ v-loading="formLoading"
+ :model="formData"
+ :rules="formRules"
+ label-width="100px"
+ >
+ <el-form-item label="上级菜单">
+ <el-tree-select
+ v-model="formData.pid"
+ :data="categoryTree"
+ :default-expanded-keys="[0]"
+ :props="categoryTreeProps"
+ check-strictly
+ node-key="id"
+ />
+ </el-form-item>
+ <el-form-item label="分类名称" prop="label">
+ <el-input v-model="formData.label" clearable placeholder="请输入分类名称" />
+ </el-form-item>
+ <el-form-item label="显示排序" prop="sort">
+ <el-input-number v-model="formData.sort" :min="0" clearable controls-position="right" />
+ </el-form-item>
+ </el-form>
+ <template #footer>
+ <el-button :disabled="formLoading" type="primary" @click="submitForm">确 定</el-button>
+ <el-button @click="dialogVisible = false">取 消</el-button>
+ </template>
+ </Dialog>
+</template>
+<script lang="ts" setup>
+import { DICT_TYPE, getIntDictOptions } from '@/utils/dict'
+import * as CategoryApi from '@/api/data/plan/category'
+import { CACHE_KEY, useCache } from '@/hooks/web/useCache'
+import { CommonStatusEnum, SystemMenuTypeEnum } from '@/utils/constants'
+import { defaultProps, handleTree } from '@/utils/tree'
+
+defineOptions({ name: 'PlanItemCategoryForm' })
+
+const { wsCache } = useCache()
+const { t } = useI18n() // 国际化
+const message = useMessage() // 消息弹窗
+
+const categoryTreeProps = ref({
+ children: 'children',
+ label: 'label',
+ value: 'id',
+ isLeaf: 'leaf',
+ emitPath: false
+})
+
+const dialogVisible = ref(false) // 弹窗的是否展示
+const dialogTitle = ref('') // 弹窗的标题
+const formLoading = ref(false) // 表单的加载中：1）修改时的数据加载；2）提交的按钮禁用
+const formType = ref('') // 表单的类型：create - 新增；update - 修改
+const formData = ref({
+ id: undefined,
+ label: '',
+ pid: '0',
+ sort: Number(undefined)
+})
+const formRules = reactive({
+ label: [{ required: true, message: '分类名称不能为空', trigger: 'blur' }],
+ sort: [{ required: true, message: '分类顺序不能为空', trigger: 'blur' }]
+})
+const formRef = ref() // 表单 Ref
+
+/** 打开弹窗 */
+const open = async (type: string, id?: number, parentId?: number) => {
+ dialogVisible.value = true
+ dialogTitle.value = t('action.' + type)
+ formType.value = type
+ resetForm()
+ if (parentId) {
+ formData.value.parentId = parentId
+ }
+ // 修改时，设置数据
+ if (id) {
+ formLoading.value = true
+ try {
+ formData.value = await CategoryApi.getCategory(id)
+ } finally {
+ formLoading.value = false
+ }
+ }
+ // 获得菜单列表
+ await getTree()
+}
+defineExpose({ open }) // 提供 open 方法，用于打开弹窗
+
+/** 提交表单 */
+const emit = defineEmits(['success']) // 定义 success 事件，用于操作成功后的回调
+const submitForm = async () => {
+ // 校验表单
+ if (!formRef) return
+ const valid = await formRef.value.validate()
+ if (!valid) return
+ // 提交请求
+ formLoading.value = true
+ try {
+ const data = formData.value as unknown as CategoryApi.PlanItemCategoryVO
+ if (formType.value === 'create') {
+ await CategoryApi.createCategory(data)
+ message.success(t('common.createSuccess'))
+ } else {
+ await CategoryApi.updateCategory(data)
+ message.success(t('common.updateSuccess'))
+ }
+ dialogVisible.value = false
+ // 发送操作成功的事件
+ emit('success')
+ } finally {
+ formLoading.value = false
+ // 清空，从而触发刷新
+ wsCache.delete(CACHE_KEY.ROLE_ROUTERS)
+ }
+}
+
+/** 获取下拉框[上级菜单]的数据 */
+const categoryTree = ref<Tree[]>([]) // 树形结构
+const getTree = async () => {
+ categoryTree.value = []
+ const res = await CategoryApi.getCategoryListAllSimple()
+ let menu: Tree = { id: '0', label: '主类目', children: [] }
+ menu.children = handleTree(res, 'id', 'pid')
+ categoryTree.value.push(menu)
+}
+
+/** 重置表单 */
+const resetForm = () => {
+ formData.value = {
+ id: undefined,
+ label: '',
+ pid: '0',
+ sort: Number(undefined)
+ }
+ formRef.value?.resetFields()
+}
+</script>
diff --git a/src/views/data/plan/category/index.vue b/src/views/data/plan/category/index.vue
new file mode 100644
index 0000000..4dace49
--- /dev/null
+++ b/src/views/data/plan/category/index.vue
@@ -0,0 +1,159 @@
+<template>
+ <!-- 搜索工作栏 -->
+ <ContentWrap>
+ <el-form
+ ref="queryFormRef"
+ :inline="true"
+ :model="queryParams"
+ class="-mb-15px"
+ label-width="68px"
+ >
+ <el-form-item label="分类名称" prop="name">
+ <el-input
+ v-model="queryParams.label"
+ class="!w-240px"
+ clearable
+ placeholder="请输入分类名称"
+ @keyup.enter="handleQuery"
+ />
+ </el-form-item>
+ <el-form-item>
+ <el-button @click="handleQuery">
+ <Icon class="mr-5px" icon="ep:search" />
+ 搜索
+ </el-button>
+ <el-button @click="resetQuery">
+ <Icon class="mr-5px" icon="ep:refresh" />
+ 重置
+ </el-button>
+ <el-button
+ v-hasPermi="['data:plan-item-category:create']"
+ plain
+ type="primary"
+ @click="openForm('create')"
+ >
+ <Icon class="mr-5px" icon="ep:plus" />
+ 新增
+ </el-button>
+ <el-button plain type="danger" @click="toggleExpandAll">
+ <Icon class="mr-5px" icon="ep:sort" />
+ 展开/折叠
+ </el-button>
+ </el-form-item>
+ </el-form>
+ </ContentWrap>
+
+ <!-- 列表 -->
+ <ContentWrap>
+ <el-table
+ v-if="refreshTable"
+ v-loading="loading"
+ :data="list"
+ :default-expand-all="isExpandAll"
+ row-key="id"
+ >
+ <el-table-column :show-overflow-tooltip="true" label="分类名称" prop="label" width="300" />
+ <el-table-column label="排序" prop="sort" width="60" />
+ <el-table-column align="center" label="操作">
+ <template #default="scope">
+ <el-button
+ v-hasPermi="['data:plan-item-category:update']"
+ link
+ type="primary"
+ @click="openForm('update', scope.row.id)"
+ >
+ 修改
+ </el-button>
+ <el-button
+ v-hasPermi="['data:plan-item-category:delete']"
+ link
+ type="danger"
+ @click="handleDelete(scope.row.id)"
+ >
+ 删除
+ </el-button>
+ </template>
+ </el-table-column>
+ </el-table>
+ </ContentWrap>
+
+ <!-- 表单弹窗：添加/修改 -->
+ <CategoryForm ref="formRef" @success="getList" />
+</template>
+<script lang="ts" setup>
+import { DICT_TYPE, getIntDictOptions } from '@/utils/dict'
+import { handleTree } from '@/utils/tree'
+import * as CategoryApi from '@/api/data/plan/category'
+import CategoryForm from './CategoryForm.vue'
+import { CACHE_KEY, useCache } from '@/hooks/web/useCache'
+
+defineOptions({ name: 'PlanItemCategory' })
+
+const { wsCache } = useCache()
+const { t } = useI18n() // 国际化
+const message = useMessage() // 消息弹窗
+
+const loading = ref(true) // 列表的加载中
+const list = ref<any>([]) // 列表的数据
+const queryParams = reactive({
+ label: undefined
+})
+const queryFormRef = ref() // 搜索的表单
+const isExpandAll = ref(false) // 是否展开，默认全部折叠
+const refreshTable = ref(true) // 重新渲染表格状态
+
+/** 查询列表 */
+const getList = async () => {
+ loading.value = true
+ try {
+ const data = await CategoryApi.getCategoryList(queryParams)
+ list.value = handleTree(data, 'id', 'pid')
+ } finally {
+ loading.value = false
+ }
+}
+
+/** 搜索按钮操作 */
+const handleQuery = () => {
+ getList()
+}
+
+/** 重置按钮操作 */
+const resetQuery = () => {
+ queryFormRef.value.resetFields()
+ handleQuery()
+}
+
+/** 添加/修改操作 */
+const formRef = ref()
+const openForm = (type: string, id?: number, parentId?: number) => {
+ formRef.value.open(type, id, parentId)
+}
+
+/** 展开/折叠操作 */
+const toggleExpandAll = () => {
+ refreshTable.value = false
+ isExpandAll.value = !isExpandAll.value
+ nextTick(() => {
+ refreshTable.value = true
+ })
+}
+
+/** 删除按钮操作 */
+const handleDelete = async (id: number) => {
+ try {
+ // 删除的二次确认
+ await message.delConfirm()
+ // 发起删除
+ await CategoryApi.deleteCategory(id)
+ message.success(t('common.delSuccess'))
+ // 刷新列表
+ await getList()
+ } catch {}
+}
+
+/** 初始化 **/
+onMounted(() => {
+ getList()
+})
+</script>
diff --git a/src/views/data/plan/data/DataSetForm.vue b/src/views/data/plan/data/DataSetForm.vue
new file mode 100644
index 0000000..5c02606
--- /dev/null
+++ b/src/views/data/plan/data/DataSetForm.vue
@@ -0,0 +1,129 @@
+<template>
+ <Dialog v-model="dialogVisible" :title="dialogTitle">
+ <el-form
+ ref="formRef"
+ v-loading="formLoading"
+ :model="formData"
+ :rules="formRules"
+ label-width="80px"
+ >
+ <el-form-item label="名称" prop="name">
+ <el-input v-model="formData.name" placeholder="请输入名称" />
+ </el-form-item>
+ <el-form-item label="数据源" prop="dataSource">
+ <el-select v-model="formData.dataSource" clearable placeholder="请选择数据源">
+ <el-option
+ v-for="item in dataSourceList"
+ :key="item.id"
+ :label="item.name"
+ :value="item.id + ''"
+ />
+ </el-select>
+ </el-form-item>
+ <el-form-item label="查询语句" prop="querySql">
+ <el-input v-model="formData.querySql" placeholder="请输入内容" type="textarea" maxlength="300"
+ show-word-limit :rows="6" spellcheck="false"/>
+ </el-form-item>
+ <el-form-item label="备注" prop="remark">
+ <el-input v-model="formData.remark" placeholder="请输入内容" type="textarea" maxlength="100"
+ show-word-limit/>
+ </el-form-item>
+ </el-form>
+ <template #footer>
+ <el-button :disabled="formLoading" type="primary" @click="submitForm">确 定</el-button>
+ <el-button @click="dialogVisible = false">取 消</el-button>
+ </template>
+ </Dialog>
+</template>
+<script lang="ts" setup>
+import { DICT_TYPE, getIntDictOptions } from '@/utils/dict'
+import * as DataSetApi from '@/api/data/plan/data'
+import { CommonStatusEnum } from '@/utils/constants'
+import * as DataSourceConfigApi from "@/api/infra/dataSourceConfig";
+
+defineOptions({ name: 'PlanDataSetForm' })
+
+const { t } = useI18n() // 国际化
+const message = useMessage() // 消息弹窗
+
+const dialogVisible = ref(false) // 弹窗的是否展示
+const dialogTitle = ref('') // 弹窗的标题
+const formLoading = ref(false) // 表单的加载中：1）修改时的数据加载；2）提交的按钮禁用
+const formType = ref('') // 表单的类型：create - 新增；update - 修改
+const formData = ref({
+ id: undefined,
+ name: '',
+ dataSource: '',
+ querySql: '',
+ remark: ''
+})
+const formRules = reactive({
+ name: [{ required: true, message: '名称不能为空', trigger: 'blur' }],
+ dataSource: [{ required: true, message: '数据源不能为空', trigger: 'blur' }],
+ querySql: [{ required: true, message: '查询语句不能为空', trigger: 'change' }]
+})
+const formRef = ref() // 表单 Ref
+const dataSourceList = ref([] as DataSourceConfigApi.DataSourceConfigVO[])
+
+/** 打开弹窗 */
+const open = async (type: string, id?: number) => {
+ dialogVisible.value = true
+ dialogTitle.value = t('action.' + type)
+ formType.value = type
+ resetForm()
+
+ // 加载数据源列表
+ dataSourceList.value = await DataSourceConfigApi.getDataSourceConfigList()
+
+ // 修改时，设置数据
+ if (id) {
+ formLoading.value = true
+ try {
+ formData.value = await DataSetApi.getDataSet(id)
+ } finally {
+ formLoading.value = false
+ }
+ }
+
+
+}
+defineExpose({ open }) // 提供 open 方法，用于打开弹窗
+
+/** 提交表单 */
+const emit = defineEmits(['success']) // 定义 success 事件，用于操作成功后的回调
+const submitForm = async () => {
+ // 校验表单
+ if (!formRef) return
+ const valid = await formRef.value.validate()
+ if (!valid) return
+ // 提交请求
+ formLoading.value = true
+ try {
+ const data = formData.value as DataSetApi.DataSetVO
+ if (formType.value === 'create') {
+ await DataSetApi.createDataSet(data)
+ message.success(t('common.createSuccess'))
+ } else {
+ await DataSetApi.updateDataSet(data)
+ message.success(t('common.updateSuccess'))
+ }
+ dialogVisible.value = false
+ // 发送操作成功的事件
+ emit('success')
+ } finally {
+ formLoading.value = false
+ }
+}
+
+/** 重置表单 */
+const resetForm = () => {
+ formData.value = {
+ id: undefined,
+ name: '',
+ dataSource: '',
+ querySql: '',
+ remark: ''
+ }
+ formRef.value?.resetFields()
+}
+</script>
diff --git a/src/views/data/plan/data/index.vue b/src/views/data/plan/data/index.vue
new file mode 100644
index 0000000..94c58d5
--- /dev/null
+++ b/src/views/data/plan/data/index.vue
@@ -0,0 +1,158 @@
+<template>
+ <!-- 搜索工作栏 -->
+ <ContentWrap>
+ <el-form
+ ref="queryFormRef"
+ :inline="true"
+ :model="queryParams"
+ class="-mb-15px"
+ label-width="68px"
+ >
+ <el-form-item label="名称" prop="name">
+ <el-input
+ v-model="queryParams.name"
+ class="!w-240px"
+ clearable
+ placeholder="请输入名称"
+ @keyup.enter="handleQuery"
+ />
+ </el-form-item>
+ <el-form-item>
+ <el-button @click="handleQuery">
+ <Icon class="mr-5px" icon="ep:search" />
+ 搜索
+ </el-button>
+ <el-button @click="resetQuery">
+ <Icon class="mr-5px" icon="ep:refresh" />
+ 重置
+ </el-button>
+ <el-button
+ v-hasPermi="['data:plan-data-set:create']"
+ plain
+ type="primary"
+ @click="openForm('create')"
+ >
+ <Icon class="mr-5px" icon="ep:plus" />
+ 新增
+ </el-button>
+ </el-form-item>
+ </el-form>
+ </ContentWrap>
+
+ <!-- 列表 -->
+ <ContentWrap>
+ <el-table v-loading="loading" :data="list">
+ <el-table-column align="center" label="名称" prop="name" show-overflow-tooltip />
+ <el-table-column align="center" label="备注" prop="remark" />
+ <el-table-column
+ :formatter="dateFormatter"
+ align="center"
+ label="创建时间"
+ prop="createTime"
+ width="180"
+ />
+ <el-table-column align="center" label="操作">
+ <template #default="scope">
+ <el-button
+ v-hasPermi="['data:plan-data-set:update']"
+ link
+ type="primary"
+ @click="openForm('update', scope.row.id)"
+ >
+ 修改
+ </el-button>
+ <el-button
+ v-hasPermi="['data:plan-data-set:delete']"
+ link
+ type="danger"
+ @click="handleDelete(scope.row.id)"
+ >
+ 删除
+ </el-button>
+ </template>
+ </el-table-column>
+ </el-table>
+ <!-- 分页 -->
+ <Pagination
+ v-model:limit="queryParams.pageSize"
+ v-model:page="queryParams.pageNo"
+ :total="total"
+ @pagination="getList"
+ />
+ </ContentWrap>
+
+ <!-- 表单弹窗：添加/修改 -->
+ <DataSetForm ref="formRef" @success="getList" />
+</template>
+
+<script lang="ts" setup>
+import { DICT_TYPE, getIntDictOptions } from '@/utils/dict'
+import { dateFormatter } from '@/utils/formatTime'
+import * as DataSetApi from '@/api/data/plan/data'
+import DataSetForm from './DataSetForm.vue'
+import download from '@/utils/download'
+
+defineOptions({ name: 'PlanDataSet' })
+
+const message = useMessage() // 消息弹窗
+const { t } = useI18n() // 国际化
+
+const loading = ref(true) // 列表的加载中
+const total = ref(0) // 列表的总页数
+const list = ref([]) // 字典表格数据
+const queryParams = reactive({
+ pageNo: 1,
+ pageSize: 10,
+ name: ''
+})
+const queryFormRef = ref() // 搜索的表单
+const exportLoading = ref(false) // 导出的加载中
+
+/** 查询字典类型列表 */
+const getList = async () => {
+ loading.value = true
+ try {
+ const data = await DataSetApi.getDataSetPage(queryParams)
+ list.value = data.list
+ total.value = data.total
+ } finally {
+ loading.value = false
+ }
+}
+
+/** 搜索按钮操作 */
+const handleQuery = () => {
+ queryParams.pageNo = 1
+ getList()
+}
+
+/** 重置按钮操作 */
+const resetQuery = () => {
+ queryFormRef.value.resetFields()
+ handleQuery()
+}
+
+/** 添加/修改操作 */
+const formRef = ref()
+const openForm = (type: string, id?: number) => {
+ formRef.value.open(type, id)
+}
+
+/** 删除按钮操作 */
+const handleDelete = async (id: number) => {
+ try {
+ // 删除的二次确认
+ await message.delConfirm()
+ // 发起删除
+ await DataSetApi.deleteDataSet(id)
+ message.success(t('common.delSuccess'))
+ // 刷新列表
+ await getList()
+ } catch {}
+}
+
+/** 初始化 **/
+onMounted(() => {
+ getList()
+})
+</script>
diff --git a/src/views/data/plan/item/ItemForm.vue b/src/views/data/plan/item/ItemForm.vue
new file mode 100644
index 0000000..0fdf58b
--- /dev/null
+++ b/src/views/data/plan/item/ItemForm.vue
@@ -0,0 +1,167 @@
+<template>
+ <Dialog v-model="dialogVisible" :title="dialogTitle">
+ <el-form
+ ref="formRef"
+ v-loading="formLoading"
+ :model="formData"
+ :rules="formRules"
+ label-width="80px"
+ >
+ <el-row>
+ <el-col :span="12">
+ <el-form-item label="指标编码" prop="itemNo">
+ <el-input v-model="formData.itemNo" disabled/>
+ </el-form-item>
+ </el-col>
+ <el-col :span="12">
+ <el-form-item label="指标名称" prop="itemName">
+ <el-input v-model="formData.itemName" placeholder="请输入指标名称"/>
+ </el-form-item>
+ </el-col>
+ </el-row>
+ <el-row>
+ <el-col :span="12">
+ <el-form-item label="计划分类" prop="itemCategory">
+ <el-select v-model="formData.itemCategory" clearable placeholder="请选择计划分类">
+ <el-option
+ v-for="item in dataCategoryList"
+ :key="item.id"
+ :label="item.label"
+ :value="item.id + ''"
+ />
+ </el-select>
+ </el-form-item>
+ </el-col>
+ <el-col :span="12">
+ <el-form-item label="时间粒度" prop="timeGranularity">
+ <el-select v-model="formData.timeGranularity" placeholder="请选择">
+ <el-option
+ v-for="dict in getStrDictOptions(DICT_TYPE.TIME_GRANULARITY)"
+ :key="dict.value"
+ :label="dict.label"
+ :value="dict.value"
+ />
+ </el-select>
+ </el-form-item>
+ </el-col>
+ </el-row>
+ <el-row>
+ <el-col :span="6">
+ <el-form-item label="数据集" prop="dataSet">
+ <el-select v-model="formData.dataSet" clearable placeholder="请选择数据集" @change="handleDataSetChange($event)">
+ <el-option
+ v-for="item in dataSetList"
+ :key="item.id"
+ :label="item.name"
+ :value="item.id + ''"
+ />
+ </el-select>
+ </el-form-item>
+ </el-col>
+ </el-row>
+ <el-form-item label="备注" prop="remark">
+ <el-input v-model="formData.remark" placeholder="请输入内容" type="textarea" maxlength="100"
+ show-word-limit/>
+ </el-form-item>
+ </el-form>
+ <template #footer>
+ <el-button :disabled="formLoading" type="primary" @click="submitForm">确 定</el-button>
+ <el-button @click="dialogVisible = false">取 消</el-button>
+ </template>
+ </Dialog>
+</template>
+<script lang="ts" setup>
+import {DICT_TYPE, getIntDictOptions, getStrDictOptions} from '@/utils/dict'
+import * as ItemApi from '@/api/data/plan/item'
+import { CommonStatusEnum } from '@/utils/constants'
+import * as DataSetApi from "@/api/data/plan/data";
+import * as CategoryApi from "@/api/data/plan/category";
+
+defineOptions({ name: 'PlanItemForm' })
+
+const { t } = useI18n() // 国际化
+const message = useMessage() // 消息弹窗
+
+const dialogVisible = ref(false) // 弹窗的是否展示
+const dialogTitle = ref('') // 弹窗的标题
+const formLoading = ref(false) // 表单的加载中：1）修改时的数据加载；2）提交的按钮禁用
+const formType = ref('') // 表单的类型：create - 新增；update - 修改
+const formData = ref({
+ id: undefined,
+ itemNo: '',
+ itemName: '',
+ itemCategory: '',
+ timeGranularity: '',
+ dataSet: '',
+ remark: '',
+ status: undefined,
+})
+const formRules = reactive({
+ itemName: [{ required: true, message: '名称不能为空', trigger: 'blur' }],
+ itemCategory: [{ required: true, message: '分类不能为空', trigger: 'blur' }],
+ dataSet: [{ required: true, message: '数据集不能为空', trigger: 'change' }]
+})
+const formRef = ref() // 表单 Ref
+const dataSetList = ref([] as DataSetApi.DataSetVO[])
+const dataCategoryList = ref([])
+
+/** 打开弹窗 */
+const open = async (type: string, id?: number) => {
+ dialogVisible.value = true
+ dialogTitle.value = t('action.' + type)
+ formType.value = type
+ resetForm()
+ // 加载数据源列表
+ dataSetList.value = await DataSetApi.getDataSetList()
+ dataCategoryList.value = await CategoryApi.getCategoryListAllSimple()
+
+ // 修改时，设置数据
+ if (id) {
+ formLoading.value = true
+ try {
+ formData.value = await ItemApi.getItem(id)
+ } finally {
+ formLoading.value = false
+ }
+ }
+}
+defineExpose({ open }) // 提供 open 方法，用于打开弹窗
+
+/** 提交表单 */
+const emit = defineEmits(['success']) // 定义 success 事件，用于操作成功后的回调
+const submitForm = async () => {
+ // 校验表单
+ if (!formRef) return
+ const valid = await formRef.value.validate()
+ if (!valid) return
+ // 提交请求
+ formLoading.value = true
+ try {
+ const data = formData.value as ItemApi.ItemVO
+ if (formType.value === 'create') {
+ await ItemApi.createItem(data)
+ message.success(t('common.createSuccess'))
+ } else {
+ await ItemApi.updateItem(data)
+ message.success(t('common.updateSuccess'))
+ }
+ dialogVisible.value = false
+ // 发送操作成功的事件
+ emit('success')
+ } finally {
+ formLoading.value = false
+ }
+}
+
+/** 重置表单 */
+const resetForm = () => {
+ formData.value = {
+ id: undefined,
+ name: '',
+ dataSource: '',
+ querySql: '',
+ remark: ''
+ }
+ formRef.value?.resetFields()
+}
+</script>
diff --git a/src/views/data/plan/item/index.vue b/src/views/data/plan/item/index.vue
new file mode 100644
index 0000000..5359924
--- /dev/null
+++ b/src/views/data/plan/item/index.vue
@@ -0,0 +1,159 @@
+<template>
+ <!-- 搜索工作栏 -->
+ <ContentWrap>
+ <el-form ref="queryFormRef" :inline="true" :model="queryParams" class="-mb-15px"
+ label-width="68px">
+ <el-form-item label="计划编码" prop="itemNo">
+ <el-input v-model="queryParams.itemNo" class="!w-200px" clearable placeholder="请输入计划编码"
+ @keyup.enter="handleQuery"/>
+ </el-form-item>
+ <el-form-item label="计划名称" prop="itemName">
+ <el-input v-model="queryParams.itemName" class="!w-200px" clearable placeholder="请输入计划名称"
+ @keyup.enter="handleQuery"/>
+ </el-form-item>
+ <el-form-item>
+ <el-button @click="handleQuery">
+ <Icon class="mr-5px" icon="ep:search"/>
+ 搜索
+ </el-button>
+ <el-button @click="resetQuery">
+ <Icon class="mr-5px" icon="ep:refresh"/>
+ 重置
+ </el-button>
+ <el-button
+ v-hasPermi="['data:ind-item:create']"
+ plain
+ type="primary"
+ @click="openForm('create')"
+ >
+ <Icon class="mr-5px" icon="ep:plus"/>
+ 新增
+ </el-button>
+ </el-form-item>
+ </el-form>
+ </ContentWrap>
+
+ <!-- 列表 -->
+ <ContentWrap>
+ <el-table v-loading="loading" :data="list">
+ <el-table-column prop="itemNo" label="计划编码" header-align="center" align="center" min-width="80"/>
+ <el-table-column prop="itemName" label="计划名称" header-align="center" align="center" min-width="120"/>
+ <el-table-column prop="itemCategoryName" label="计划分类" header-align="center" align="center" min-width="100"/>
+ <el-table-column prop="timeGranularity" label="时间粒度" header-align="center" align="center" min-width="40">
+ <template #default="scope">
+ <dict-tag :type="DICT_TYPE.TIME_GRANULARITY" :value="scope.row.timeGranularity" />
+ </template>
+ </el-table-column>
+ <el-table-column
+ :formatter="dateFormatter"
+ align="center"
+ label="创建时间"
+ prop="createTime"
+ width="180"/>
+ <el-table-column align="center" label="操作">
+ <template #default="scope">
+ <el-button
+ v-hasPermi="['data:ind-item:update']"
+ link
+ type="primary"
+ @click="openForm('update', scope.row)">
+ 修改
+ </el-button>
+ <el-button
+ v-hasPermi="['data:ind-item:delete']"
+ link
+ type="danger"
+ @click="handleDelete(scope.row.id)">
+ 删除
+ </el-button>
+ </template>
+ </el-table-column>
+ </el-table>
+ <!-- 分页 -->
+ <Pagination
+ v-model:limit="queryParams.pageSize"
+ v-model:page="queryParams.pageNo"
+ :total="total"
+ @pagination="getList"
+ />
+ </ContentWrap>
+
+ <!-- 表单弹窗：添加/修改 -->
+ <ItemForm ref="formRef" @success="getList" />
+</template>
+
+<script lang="ts" setup>
+import { DICT_TYPE, getIntDictOptions, getStrDictOptions } from '@/utils/dict'
+import { dateFormatter } from '@/utils/formatTime'
+import ItemForm from './ItemForm.vue'
+import download from '@/utils/download'
+import * as ItemApi from '@/api/data/plan/item'
+import * as CategoryApi from "@/api/data/plan/category";
+
+defineOptions({ name: 'PlanItem' })
+
+const message = useMessage() // 消息弹窗
+const { t } = useI18n() // 国际化
+const dataCategoryList = ref([] as CategoryApi.IndItemCategoryVO[])
+const loading = ref(true) // 列表的加载中
+const total = ref(0) // 列表的总页数
+const list = ref([]) // 字典表格数据
+const queryParams = reactive({
+ pageNo: 1,
+ pageSize: 10,
+ itemNo: '',
+ itemName: '',
+ itemCategory: ''
+})
+const queryFormRef = ref() // 搜索的表单
+const exportLoading = ref(false) // 导出的加载中
+
+/** 查询字典类型列表 */
+const getList = async () => {
+ loading.value = true
+ try {
+ const data = await ItemApi.getItemPage(queryParams)
+ list.value = data.list
+ total.value = data.total
+ dataCategoryList.value = await CategoryApi.getCategoryListAllSimple()
+ } finally {
+ loading.value = false
+ }
+}
+
+/** 搜索按钮操作 */
+const handleQuery = () => {
+ queryParams.pageNo = 1
+ getList()
+}
+
+/** 重置按钮操作 */
+const resetQuery = () => {
+ queryFormRef.value.resetFields()
+ handleQuery()
+}
+
+/** 添加/修改操作 */
+const formRef = ref()
+const openForm = (type: string, id?: number) => {
+ formRef.value.open(type, id)
+}
+
+/** 删除按钮操作 */
+const handleDelete = async (id: number) => {
+ try {
+ // 删除的二次确认
+ await message.delConfirm()
+ // 发起删除
+ await ItemApi.deleteItem(id)
+ message.success(t('common.delSuccess'))
+ // 刷新列表
+ await getList()
+ } catch {}
+}
+
+/** 初始化 **/
+onMounted(() => {
+ getList()
+})
+</script>
--
Gitblit v1.9.3