BJ_ZTEITS-Developers / parking-cloud-yudao

Commit 519b08f251a2460e193f07ba7d0f75248c5eb934

Authored by xingyu4j
1 parent 3dd22038

refactor: datasource vxe

Inline Side-by-side
Showing 4 changed files with 153 additions and 178 deletions
yudao-ui-admin-vue3/src/api/infra/config/index.ts
  View file @519b08f
... ... @@ -11,6 +11,7 @@ export type ConfigVO = {
11 11 remark: string
12 12 createTime: string
13 13 }
  14 +
14 15 export interface ConfigPageReqVO extends PageParam {
15 16 name?: string
16 17 type?: number
... ...
yudao-ui-admin-vue3/src/api/infra/dataSourceConfig/index.ts
  View file @519b08f
1 1 import request from '@/config/axios'
2   -import type { DataSourceConfigVO } from './types'
  2 +
  3 +export type DataSourceConfigVO = {
  4 + id: number
  5 + name: string
  6 + url: string
  7 + username: string
  8 + password: string
  9 + createTime: string
  10 +}
3 11  
4 12 // 查询数据源配置列表
5 13 export const getDataSourceConfigListApi = () => {
... ...
yudao-ui-admin-vue3/src/views/infra/dataSourceConfig/dataSourceConfig.data.ts
  View file @519b08f
1 1 import { reactive } from 'vue'
2 2 import { required } from '@/utils/formRules'
3 3 import { useI18n } from '@/hooks/web/useI18n'
4   -import { CrudSchema, useCrudSchemas } from '@/hooks/web/useCrudSchemas'
  4 +import { VxeCrudSchema, useVxeCrudSchemas } from '@/hooks/web/useVxeCrudSchemas'
5 5 // 国际化
6 6 const { t } = useI18n()
7 7 // 表单校验
... ... @@ -12,73 +12,44 @@ export const rules = reactive({
12 12 password: [required]
13 13 })
14 14 // 新增 + 修改
15   -const crudSchemas = reactive<CrudSchema[]>([
16   - {
17   - label: t('common.index'),
18   - field: 'id',
19   - type: 'index',
20   - form: {
21   - show: false
  15 +const crudSchemas = reactive<VxeCrudSchema>({
  16 + primaryKey: 'id',
  17 + primaryType: 'seq',
  18 + action: true,
  19 + columns: [
  20 + {
  21 + title: '数据源名称',
  22 + field: 'name'
22 23 },
23   - detail: {
24   - show: false
25   - }
26   - },
27   - {
28   - label: '数据源名称',
29   - field: 'name'
30   - },
31   - {
32   - label: '数据源连接',
33   - field: 'url',
34   - form: {
35   - component: 'Input',
36   - componentProps: {
37   - type: 'textarea',
38   - rows: 4
39   - },
40   - colProps: {
41   - span: 24
  24 + {
  25 + title: '数据源连接',
  26 + field: 'url',
  27 + form: {
  28 + component: 'Input',
  29 + componentProps: {
  30 + type: 'textarea',
  31 + rows: 4
  32 + },
  33 + colProps: {
  34 + span: 24
  35 + }
42 36 }
43   - }
44   - },
45   - {
46   - label: '用户名',
47   - field: 'username'
48   - },
49   - {
50   - label: '密码',
51   - field: 'password',
52   - table: {
53   - show: false
54   - }
55   - },
56   - {
57   - label: t('common.createTime'),
58   - field: 'createTime',
59   - form: {
60   - show: false
61 37 },
62   - search: {
63   - show: true,
64   - component: 'DatePicker',
65   - componentProps: {
66   - type: 'datetimerange',
67   - valueFormat: 'YYYY-MM-DD HH:mm:ss',
68   - defaultTime: [new Date(2000, 1, 1, 0, 0, 0), new Date(2000, 2, 1, 23, 59, 59)]
69   - }
70   - }
71   - },
72   - {
73   - field: 'action',
74   - width: '240px',
75   - label: t('table.action'),
76   - form: {
77   - show: false
  38 + {
  39 + title: '用户名',
  40 + field: 'username'
  41 + },
  42 + {
  43 + title: '密码',
  44 + field: 'password',
  45 + isTable: false
78 46 },
79   - detail: {
80   - show: false
  47 + {
  48 + title: t('common.createTime'),
  49 + field: 'createTime',
  50 + formatter: 'formatDate',
  51 + isForm: false
81 52 }
82   - }
83   -])
84   -export const { allSchemas } = useCrudSchemas(crudSchemas)
  53 + ]
  54 +})
  55 +export const { allSchemas } = useVxeCrudSchemas(crudSchemas)
... ...
yudao-ui-admin-vue3/src/views/infra/dataSourceConfig/index.vue
  View file @519b08f
  1 +<template>
  2 + <ContentWrap>
  3 + <!-- 列表 -->
  4 + <vxe-grid ref="xGrid" v-bind="gridOptions" class="xtable-scrollbar">
  5 + <template #toolbar_buttons>
  6 + <XButton
  7 + type="primary"
  8 + preIcon="ep:zoom-in"
  9 + :title="t('action.add')"
  10 + v-hasPermi="['infra:data-source-config:create']"
  11 + @click="handleCreate()"
  12 + />
  13 + </template>
  14 + <template #actionbtns_default="{ row }">
  15 + <!-- 操作：修改 -->
  16 + <XTextButton
  17 + preIcon="ep:edit"
  18 + :title="t('action.edit')"
  19 + v-hasPermi="['infra:data-source-config:update']"
  20 + @click="handleUpdate(row.id)"
  21 + />
  22 + <!-- 操作：详情 -->
  23 + <XTextButton
  24 + preIcon="ep:view"
  25 + :title="t('action.detail')"
  26 + v-hasPermi="['infra:data-source-config:query']"
  27 + @click="handleDetail(row.id)"
  28 + />
  29 + <!-- 操作：删除 -->
  30 + <XTextButton
  31 + preIcon="ep:delete"
  32 + :title="t('action.del')"
  33 + v-hasPermi="['infra:data-source-config:delete']"
  34 + @click="handleDelete(row.id)"
  35 + />
  36 + </template>
  37 + </vxe-grid>
  38 + </ContentWrap>
  39 + <XModal v-model="dialogVisible" :title="dialogTitle">
  40 + <!-- 对话框(添加 / 修改) -->
  41 + <Form
  42 + v-if="['create', 'update'].includes(actionType)"
  43 + :schema="allSchemas.formSchema"
  44 + :rules="rules"
  45 + ref="formRef"
  46 + />
  47 + <!-- 对话框(详情) -->
  48 + <Descriptions
  49 + v-if="actionType === 'detail'"
  50 + :schema="allSchemas.detailSchema"
  51 + :data="detailData"
  52 + />
  53 + <!-- 操作按钮 -->
  54 + <template #footer>
  55 + <!-- 按钮：保存 -->
  56 + <XButton
  57 + v-if="['create', 'update'].includes(actionType)"
  58 + type="primary"
  59 + :title="t('action.save')"
  60 + :loading="loading"
  61 + @click="submitForm()"
  62 + />
  63 + <!-- 按钮：关闭 -->
  64 + <XButton :loading="loading" :title="t('dialog.close')" @click="dialogVisible = false" />
  65 + </template>
  66 + </XModal>
  67 +</template>
1 68 <script setup lang="ts">
2   -import { onMounted, ref, unref } from 'vue'
3   -import dayjs from 'dayjs'
4   -import { ElMessage } from 'element-plus'
  69 +// 全局相关的 import
  70 +import { ref, unref } from 'vue'
  71 +import { useI18n } from '@/hooks/web/useI18n'
  72 +import { useMessage } from '@/hooks/web/useMessage'
  73 +import { useVxeGrid } from '@/hooks/web/useVxeGrid'
  74 +import { VxeGridInstance } from 'vxe-table'
5 75 import { FormExpose } from '@/components/Form'
6   -import { rules, allSchemas } from './dataSourceConfig.data'
7   -import type { DataSourceConfigVO } from '@/api/infra/dataSourceConfig/types'
  76 +// 业务相关的 import
8 77 import * as DataSourceConfiggApi from '@/api/infra/dataSourceConfig'
9   -import { useI18n } from '@/hooks/web/useI18n'
  78 +import { rules, allSchemas } from './dataSourceConfig.data'
  79 +
10 80 const { t } = useI18n() // 国际化
11   -const tableData = ref()
12   -const getList = async () => {
13   - const res = await DataSourceConfiggApi.getDataSourceConfigListApi()
14   - tableData.value = res
15   -}
  81 +const message = useMessage() // 消息弹窗
  82 +// 列表相关的变量
  83 +const xGrid = ref<VxeGridInstance>() // 列表 Grid Ref
  84 +const { gridOptions, getList, deleteData } = useVxeGrid<DataSourceConfiggApi.DataSourceConfigVO>({
  85 + allSchemas: allSchemas,
  86 + isList: true,
  87 + getListApi: DataSourceConfiggApi.getDataSourceConfigListApi,
  88 + deleteApi: DataSourceConfiggApi.deleteDataSourceConfigApi
  89 +})
16 90 // ========== CRUD 相关 ==========
17 91 const loading = ref(false) // 遮罩层
18 92 const actionType = ref('') // 操作按钮的类型
19 93 const dialogVisible = ref(false) // 是否显示弹出层
20 94 const dialogTitle = ref('edit') // 弹出层标题
21 95 const formRef = ref<FormExpose>() // 表单 Ref
  96 +const detailData = ref() // 详情 Ref
22 97  
23 98 // 设置标题
24 99 const setDialogTile = (type: string) => {
... ... @@ -33,13 +108,26 @@ const handleCreate = () =&gt; {
33 108 }
34 109  
35 110 // 修改操作
36   -const handleUpdate = async (row: DataSourceConfigVO) => {
  111 +const handleUpdate = async (rowId: number) => {
37 112 setDialogTile('update')
38 113 // 设置数据
39   - const res = await DataSourceConfiggApi.getDataSourceConfigApi(row.id)
  114 + const res = await DataSourceConfiggApi.getDataSourceConfigApi(rowId)
40 115 unref(formRef)?.setValues(res)
41 116 }
42 117  
  118 +// 详情操作
  119 +const handleDetail = async (rowId: number) => {
  120 + // 设置数据
  121 + const res = await DataSourceConfiggApi.getDataSourceConfigApi(rowId)
  122 + detailData.value = res
  123 + setDialogTile('detail')
  124 +}
  125 +
  126 +// 删除操作
  127 +const handleDelete = async (rowId: number) => {
  128 + await deleteData(xGrid, rowId)
  129 +}
  130 +
43 131 // 提交按钮
44 132 const submitForm = async () => {
45 133 const elForm = unref(formRef)?.getElFormRef()
... ... @@ -49,114 +137,21 @@ const submitForm = async () =&gt; {
49 137 loading.value = true
50 138 // 提交请求
51 139 try {
52   - const data = unref(formRef)?.formModel as DataSourceConfigVO
  140 + const data = unref(formRef)?.formModel as DataSourceConfiggApi.DataSourceConfigVO
53 141 if (actionType.value === 'create') {
54 142 await DataSourceConfiggApi.createDataSourceConfigApi(data)
55   - ElMessage.success(t('common.createSuccess'))
  143 + message.success(t('common.createSuccess'))
56 144 } else {
57 145 await DataSourceConfiggApi.updateDataSourceConfigApi(data)
58   - ElMessage.success(t('common.updateSuccess'))
  146 + message.success(t('common.updateSuccess'))
59 147 }
60   - // 操作成功，重新加载列表
61 148 dialogVisible.value = false
62   - await getList()
63 149 } finally {
64 150 loading.value = false
  151 + // 刷新列表
  152 + await getList(xGrid)
65 153 }
66 154 }
67 155 })
68 156 }
69   -
70   -// 删除操作
71   -const handleDelete = async (row: DataSourceConfigVO) => {
72   - await DataSourceConfiggApi.deleteDataSourceConfigApi(row.id)
73   - ElMessage.success(t('common.delSuccess'))
74   -}
75   -
76   -// ========== 详情相关 ==========
77   -const detailRef = ref() // 详情 Ref
78   -
79   -// 详情操作
80   -const handleDetail = async (row: DataSourceConfigVO) => {
81   - // 设置数据
82   - detailRef.value = row
83   - setDialogTile('detail')
84   -}
85   -onMounted(async () => {
86   - await getList()
87   -})
88 157 </script>
89   -
90   -<template>
91   - <ContentWrap>
92   - <!-- 操作工具栏 -->
93   - <div class="mb-10px">
94   - <el-button
95   - v-hasPermi="['infra:data-source-config:create']"
96   - type="primary"
97   - @click="handleCreate"
98   - >
99   - <Icon icon="ep:zoom-in" class="mr-5px" /> {{ t('action.add') }}
100   - </el-button>
101   - </div>
102   - <Table :columns="allSchemas.tableColumns" :data="tableData">
103   - <template #createTime="{ row }">
104   - <span>{{ row.createTime ? dayjs(row.createTime).format('YYYY-MM-DD HH:mm:ss') : '' }}</span>
105   - </template>
106   - <template #action="{ row }">
107   - <el-button
108   - link
109   - type="primary"
110   - v-hasPermi="['infra:data-source-config:update']"
111   - @click="handleUpdate(row)"
112   - >
113   - <Icon icon="ep:edit" class="mr-1px" /> {{ t('action.edit') }}
114   - </el-button>
115   - <el-button
116   - link
117   - type="primary"
118   - v-hasPermi="['infra:data-source-config:update']"
119   - @click="handleDetail(row)"
120   - >
121   - <Icon icon="ep:view" class="mr-1px" /> {{ t('action.detail') }}
122   - </el-button>
123   - <el-button
124   - link
125   - type="primary"
126   - v-hasPermi="['infra:data-source-config:delete']"
127   - @click="handleDelete(row)"
128   - >
129   - <Icon icon="ep:delete" class="mr-1px" /> {{ t('action.del') }}
130   - </el-button>
131   - </template>
132   - </Table>
133   - </ContentWrap>
134   - <XModal v-model="dialogVisible" :title="dialogTitle">
135   - <!-- 对话框(添加 / 修改) -->
136   - <Form
137   - v-if="['create', 'update'].includes(actionType)"
138   - :schema="allSchemas.formSchema"
139   - :rules="rules"
140   - ref="formRef"
141   - />
142   - <!-- 对话框(详情) -->
143   - <Descriptions
144   - v-if="actionType === 'detail'"
145   - :schema="allSchemas.detailSchema"
146   - :data="detailRef"
147   - />
148   - <!-- 操作按钮 -->
149   - <template #footer>
150   - <!-- 按钮：保存 -->
151   - <XButton
152   - v-if="['create', 'update'].includes(actionType)"
153   - type="primary"
154   - :title="t('action.save')"
155   - :loading="loading"
156   - @click="submitForm()"
157   - />
158   - <!-- 按钮：关闭 -->
159   - <XButton :loading="loading" :title="t('dialog.close')" @click="dialogVisible = false" />
160   - </template>
161   - </XModal>
162   -</template>
... ...