简柏林 / thingskit-front · Commits

Commit f51908424ed7c1bc285d87c15087893112379e9b

Authored by ww
1 parent 26254e83

perf: 优化模版组态页面,使用卡片列表组件

Inline Side-by-side
Showing 5 changed files with 166 additions and 716 deletions
@@ -2,15 +2,46 @@ import { BasicPageParams } from '/@/api/model/baseModel'; @@ -2,15 +2,46 @@ import { BasicPageParams } from '/@/api/model/baseModel';
2 2
3 export interface ConfigurationCenterItemsModal { 3 export interface ConfigurationCenterItemsModal {
4 id: string; 4 id: string;
5 - name: string;  
6 - createTime: string;  
7 creator: string; 5 creator: string;
8 - remark: string;  
9 - publicId?: string;  
10 - organizationId?: string;  
11 - platform?: string;  
12 - productIds?: string; 6 + createTime: string;
  7 + updater: string;
  8 + updateTime: string;
  9 + name: string;
  10 + enabled: boolean;
  11 + tenantId: string;
  12 + publicId: string;
  13 + viewType: string;
  14 + accessCredentials: string;
  15 + organizationId: string;
  16 + platform: string;
  17 + thumbnail: string;
  18 + organizationDTO: OrganizationDto;
  19 + templateId: string;
  20 + productAndDevice: ProductAndDevice[];
  21 + remark?: string;
  22 +}
  23 +
  24 +export interface OrganizationDto {
  25 + name: string;
  26 + enabled: boolean;
  27 + sort: number;
  28 + children: any[];
13 } 29 }
  30 +
  31 +export interface ProductAndDevice {
  32 + profileId: string;
  33 + name: string;
  34 + transportType: string;
  35 + deviceType: string;
  36 + deviceList: DeviceList[];
  37 +}
  38 +
  39 +export interface DeviceList {
  40 + deviceId: string;
  41 + name: string;
  42 + codeType: any;
  43 +}
  44 +
14 export type queryPageParams = BasicPageParams & { 45 export type queryPageParams = BasicPageParams & {
15 name?: Nullable<string>; 46 name?: Nullable<string>;
16 organizationId?: Nullable<number>; 47 organizationId?: Nullable<number>;
1 -<template>  
2 - <div>  
3 - <PageWrapper dense contentFullHeight contentClass="flex">  
4 - <OrganizationIdTree @select="handleSelect" ref="organizationIdTreeRef" />  
5 - <BasicTable  
6 - style="flex: auto"  
7 - :clickToRowSelect="false"  
8 - @register="registerTable"  
9 - :searchInfo="searchInfo"  
10 - class="w-3/4 xl:w-4/5"  
11 - >  
12 - <template #platform="{ record }">  
13 - <Tag :color="record.platform === Platform.PHONE ? 'cyan' : 'blue'">  
14 - {{ record.platform === Platform.PHONE ? '移动端' : 'PC端' }}  
15 - </Tag>  
16 - </template>  
17 - <template #toolbar>  
18 - <Authority value="api:yt:configuration:center:post">  
19 - <a-button type="primary" @click="handleCreateOrEdit(null)"> 新增组态 </a-button>  
20 - </Authority>  
21 - <Authority value="api:yt:configuration:center:delete">  
22 - <Popconfirm  
23 - title="您确定要批量删除数据"  
24 - ok-text="确定"  
25 - cancel-text="取消"  
26 - @confirm="handleDeleteOrBatchDelete(null)"  
27 - >  
28 - <a-button type="primary" color="error" :disabled="hasBatchDelete">  
29 - 批量删除  
30 - </a-button>  
31 - </Popconfirm>  
32 - </Authority>  
33 - </template>  
34 - <template #action="{ record }">  
35 - <TableAction  
36 - :actions="[  
37 - {  
38 - label: '设计',  
39 - auth: 'api:yt:configuration:center:get_configuration_info:get',  
40 - icon: 'clarity:note-edit-line',  
41 - onClick: handleDesign.bind(null, record),  
42 - },  
43 - {  
44 - label: '预览',  
45 - auth: 'api:yt:configuration:center:get_configuration_info:get',  
46 - icon: 'ant-design:eye-outlined',  
47 - onClick: handlePreview.bind(null, record),  
48 - },  
49 - {  
50 - label: '编辑',  
51 - auth: 'api:yt:configuration:center:update',  
52 - icon: 'clarity:note-edit-line',  
53 - onClick: handleCreateOrEdit.bind(null, record),  
54 - },  
55 - {  
56 - label: '删除',  
57 - auth: 'api:yt:configuration:center:delete',  
58 - icon: 'ant-design:delete-outlined',  
59 - color: 'error',  
60 - popConfirm: {  
61 - title: '是否确认删除',  
62 - confirm: handleDeleteOrBatchDelete.bind(null, record),  
63 - },  
64 - },  
65 - ]"  
66 - />  
67 - </template>  
68 - </BasicTable>  
69 - </PageWrapper>  
70 - <ContactDrawer @register="registerDrawer" @success="handleSuccess" />  
71 - </div>  
72 -</template>  
73 -  
74 -<script lang="ts">  
75 - import { defineComponent, reactive, nextTick } from 'vue';  
76 - import { BasicTable, useTable, TableAction } from '/@/components/Table';  
77 - import { PageWrapper } from '/@/components/Page';  
78 - import { useDrawer } from '/@/components/Drawer';  
79 - import ContactDrawer from './ConfigurationCenterDrawer.vue';  
80 - import { useResetOrganizationTree, OrganizationIdTree } from '/@/views/common/organizationIdTree';  
81 - import { searchFormSchema, columns, Platform } from './center.data';  
82 - import {  
83 - getPage,  
84 - deleteConfigurationCenter,  
85 - } from '/@/api/configuration/center/configurationCenter';  
86 - import { useBatchDelete } from '/@/hooks/web/useBatchDelete';  
87 - import { isDevMode } from '/@/utils/env';  
88 - import { Authority } from '/@/components/Authority';  
89 - import { Popconfirm } from 'ant-design-vue';  
90 - import { Tag } from 'ant-design-vue';  
91 - import { useGlobSetting } from '/@/hooks/setting';  
92 - export default defineComponent({  
93 - components: {  
94 - PageWrapper,  
95 - OrganizationIdTree,  
96 - BasicTable,  
97 - TableAction,  
98 - ContactDrawer,  
99 - Authority,  
100 - Popconfirm,  
101 - Tag,  
102 - },  
103 - setup() {  
104 - const { configurationPrefix } = useGlobSetting();  
105 - const isDev = isDevMode();  
106 - const searchInfo = reactive<Recordable>({});  
107 - const { organizationIdTreeRef, resetFn } = useResetOrganizationTree(searchInfo);  
108 - // 表格hooks  
109 - const [registerTable, { reload, setProps }] = useTable({  
110 - title: '组态中心列表',  
111 - api: getPage,  
112 - columns,  
113 - clickToRowSelect: false,  
114 - formConfig: {  
115 - labelWidth: 120,  
116 - schemas: searchFormSchema,  
117 - resetFunc: resetFn,  
118 - },  
119 - showIndexColumn: false,  
120 - useSearchForm: true,  
121 - showTableSetting: true,  
122 - bordered: true,  
123 - rowKey: 'id',  
124 - actionColumn: {  
125 - width: 200,  
126 - title: '操作',  
127 - dataIndex: 'action',  
128 - slots: { customRender: 'action' },  
129 - fixed: 'right',  
130 - },  
131 - });  
132 - const { hasBatchDelete, handleDeleteOrBatchDelete, selectionOptions } = useBatchDelete(  
133 - deleteConfigurationCenter,  
134 - handleSuccess,  
135 - setProps  
136 - );  
137 - nextTick(() => {  
138 - setProps(selectionOptions);  
139 - });  
140 -  
141 - // 弹框  
142 - const [registerDrawer, { openDrawer }] = useDrawer();  
143 -  
144 - // 刷新  
145 - function handleSuccess() {  
146 - reload();  
147 - }  
148 - // 新增或编辑  
149 - const handleCreateOrEdit = (record: Recordable | null) => {  
150 - if (record) {  
151 - openDrawer(true, {  
152 - isUpdate: true,  
153 - record,  
154 - });  
155 - } else {  
156 - openDrawer(true, {  
157 - isUpdate: false,  
158 - });  
159 - }  
160 - };  
161 - // 树形选择器  
162 - const handleSelect = (organizationId: string) => {  
163 - searchInfo.organizationId = organizationId;  
164 - handleSuccess();  
165 - };  
166 -  
167 - const handlePreview = (record: Recordable | null) => {  
168 - window.open(  
169 - `${configurationPrefix}/${isDev ? '?dev=1&' : '?'}configurationId=${  
170 - record!.id  
171 - }&lightbox=1`  
172 - );  
173 - };  
174 - const handleDesign = (record: Recordable | null) => {  
175 - window.open(  
176 - `${configurationPrefix}/${isDev ? '?dev=1&' : '?'}configurationId=${record!.id}`  
177 - );  
178 - };  
179 -  
180 - return {  
181 - Platform,  
182 - searchInfo,  
183 - hasBatchDelete,  
184 - handleCreateOrEdit,  
185 - handleDeleteOrBatchDelete,  
186 - handleSelect,  
187 - handleSuccess,  
188 - handlePreview,  
189 - handleDesign,  
190 - registerTable,  
191 - registerDrawer,  
192 - organizationIdTreeRef,  
193 - };  
194 - },  
195 - });  
196 -</script>  
1 -<template>  
2 - <div>  
3 - <PageWrapper dense contentFullHeight contentClass="flex">  
4 - <OrganizationIdTree @select="handleSelect" ref="organizationIdTreeRef" />  
5 - <BasicTable  
6 - style="flex: auto"  
7 - :clickToRowSelect="false"  
8 - @register="registerTable"  
9 - :searchInfo="searchInfo"  
10 - class="w-3/4 xl:w-4/5"  
11 - >  
12 - <template #platform="{ record }">  
13 - <Tag :color="record.platform === Platform.PHONE ? 'cyan' : 'blue'">  
14 - {{ record.platform === Platform.PHONE ? '移动端' : 'PC端' }}  
15 - </Tag>  
16 - </template>  
17 - <template #toolbar>  
18 - <Authority value="api:yt:configuration:center:post">  
19 - <a-button type="primary" @click="handleCreateOrEdit(null)"> 新增组态 </a-button>  
20 - </Authority>  
21 - <Authority value="api:yt:configuration:center:delete">  
22 - <Popconfirm  
23 - title="您确定要批量删除数据"  
24 - ok-text="确定"  
25 - cancel-text="取消"  
26 - @confirm="handleDeleteOrBatchDelete(null)"  
27 - >  
28 - <a-button type="primary" color="error" :disabled="hasBatchDelete">  
29 - 批量删除  
30 - </a-button>  
31 - </Popconfirm>  
32 - </Authority>  
33 - </template>  
34 - <template #action="{ record }">  
35 - <TableAction  
36 - :actions="[  
37 - {  
38 - label: '设计',  
39 - auth: 'api:yt:configuration:center:get_configuration_info:get',  
40 - icon: 'clarity:note-edit-line',  
41 - onClick: handleDesign.bind(null, record),  
42 - },  
43 - {  
44 - label: '预览',  
45 - auth: 'api:yt:configuration:center:get_configuration_info:get',  
46 - icon: 'ant-design:eye-outlined',  
47 - onClick: handlePreview.bind(null, record),  
48 - },  
49 - {  
50 - label: '编辑',  
51 - auth: 'api:yt:configuration:center:update',  
52 - icon: 'clarity:note-edit-line',  
53 - onClick: handleCreateOrEdit.bind(null, record),  
54 - },  
55 - {  
56 - label: '删除',  
57 - auth: 'api:yt:configuration:center:delete',  
58 - icon: 'ant-design:delete-outlined',  
59 - color: 'error',  
60 - popConfirm: {  
61 - title: '是否确认删除',  
62 - confirm: handleDeleteOrBatchDelete.bind(null, record),  
63 - },  
64 - },  
65 - ]"  
66 - />  
67 - </template>  
68 - </BasicTable>  
69 - </PageWrapper>  
70 - <ContactDrawer @register="registerDrawer" @success="handleSuccess" />  
71 - </div>  
72 -</template>  
73 -  
74 -<script lang="ts">  
75 - import { defineComponent, reactive, nextTick } from 'vue';  
76 - import { BasicTable, useTable, TableAction } from '/@/components/Table';  
77 - import { PageWrapper } from '/@/components/Page';  
78 - import { useDrawer } from '/@/components/Drawer';  
79 - import ContactDrawer from './ConfigurationCenterDrawer.vue';  
80 - import { useResetOrganizationTree, OrganizationIdTree } from '/@/views/common/organizationIdTree';  
81 - import { searchFormSchema, columns } from './center.data';  
82 - import { Platform } from '../center/center.data';  
83 - import {  
84 - getPage,  
85 - deleteConfigurationCenter,  
86 - } from '/@/api/configuration/center/configurationCenter';  
87 - import { useBatchDelete } from '/@/hooks/web/useBatchDelete';  
88 - import { isDevMode } from '/@/utils/env';  
89 - import { Authority } from '/@/components/Authority';  
90 - import { Popconfirm } from 'ant-design-vue';  
91 - import { Tag } from 'ant-design-vue';  
92 - import { useGlobSetting } from '/@/hooks/setting';  
93 - export default defineComponent({  
94 - components: {  
95 - PageWrapper,  
96 - OrganizationIdTree,  
97 - BasicTable,  
98 - TableAction,  
99 - ContactDrawer,  
100 - Authority,  
101 - Popconfirm,  
102 - Tag,  
103 - },  
104 - setup() {  
105 - const { configurationPrefix } = useGlobSetting();  
106 - const isDev = isDevMode();  
107 - const searchInfo = reactive<Recordable>({});  
108 - const { organizationIdTreeRef, resetFn } = useResetOrganizationTree(searchInfo);  
109 - // 表格hooks  
110 - const [registerTable, { reload, setProps }] = useTable({  
111 - title: '组态中心列表',  
112 - api: getPage,  
113 - columns,  
114 - clickToRowSelect: false,  
115 - formConfig: {  
116 - labelWidth: 120,  
117 - schemas: searchFormSchema,  
118 - resetFunc: resetFn,  
119 - },  
120 - showIndexColumn: false,  
121 - useSearchForm: true,  
122 - showTableSetting: true,  
123 - bordered: true,  
124 - rowKey: 'id',  
125 - actionColumn: {  
126 - width: 200,  
127 - title: '操作',  
128 - dataIndex: 'action',  
129 - slots: { customRender: 'action' },  
130 - fixed: 'right',  
131 - },  
132 - });  
133 - const { hasBatchDelete, handleDeleteOrBatchDelete, selectionOptions } = useBatchDelete(  
134 - deleteConfigurationCenter,  
135 - handleSuccess,  
136 - setProps  
137 - );  
138 - nextTick(() => {  
139 - setProps(selectionOptions);  
140 - });  
141 -  
142 - // 弹框  
143 - const [registerDrawer, { openDrawer }] = useDrawer();  
144 -  
145 - // 刷新  
146 - function handleSuccess() {  
147 - reload();  
148 - }  
149 - // 新增或编辑  
150 - const handleCreateOrEdit = (record: Recordable | null) => {  
151 - if (record) {  
152 - openDrawer(true, {  
153 - isUpdate: true,  
154 - record,  
155 - });  
156 - } else {  
157 - openDrawer(true, {  
158 - isUpdate: false,  
159 - });  
160 - }  
161 - };  
162 - // 树形选择器  
163 - const handleSelect = (organizationId: string) => {  
164 - searchInfo.organizationId = organizationId;  
165 - handleSuccess();  
166 - };  
167 -  
168 - const handlePreview = (record: Recordable | null) => {  
169 - window.open(  
170 - `${configurationPrefix}/${isDev ? '?dev=1&' : '?'}configurationId=${  
171 - record!.id  
172 - }&lightbox=1`  
173 - );  
174 - };  
175 - const handleDesign = (record: Recordable | null) => {  
176 - window.open(  
177 - `${configurationPrefix}/${isDev ? '?dev=1&' : '?'}configurationId=${record!.id}`  
178 - );  
179 - };  
180 -  
181 - return {  
182 - Platform,  
183 - searchInfo,  
184 - hasBatchDelete,  
185 - handleCreateOrEdit,  
186 - handleDeleteOrBatchDelete,  
187 - handleSelect,  
188 - handleSuccess,  
189 - handlePreview,  
190 - handleDesign,  
191 - registerTable,  
192 - registerDrawer,  
193 - organizationIdTreeRef,  
194 - };  
195 - },  
196 - });  
197 -</script>  
1 -import { Platform } from './center.data';  
2 -import { ConfigurationCenterItemsModal } from '/@/api/configuration/center/model/configurationCenterModal';  
3 -import { useGlobSetting } from '/@/hooks/setting';  
4 -  
5 -export enum ScadaModeEnum {  
6 - LIGHTBOX = 'lightbox',  
7 - DESIGN = 'design',  
8 - SHARE = 'share',  
9 -}  
10 -  
11 -interface ScadaLinkParamsType {  
12 - configurationId: string;  
13 - organizationId: string;  
14 - mode: ScadaModeEnum;  
15 - platform: Platform;  
16 - publicId?: string;  
17 -}  
18 -  
19 -const getRandomString = () => Number(Math.random().toString().substring(2)).toString(36);  
20 -  
21 -export const encode = (record: Recordable) => {  
22 - let hash = JSON.stringify(record);  
23 - const mixinString = getRandomString()  
24 - .slice(0, 10)  
25 - .padEnd(10, getRandomString())  
26 - .split('')  
27 - .map((item) => (Math.random() > 0.5 ? item.toUpperCase() : item))  
28 - .join('');  
29 - hash = window.btoa(hash);  
30 - hash = hash.substring(0, 6) + mixinString + hash.substring(6);  
31 - hash = window.btoa(hash);  
32 - return hash;  
33 -};  
34 -  
35 -export const createScadaPageLink = (  
36 - record: ConfigurationCenterItemsModal,  
37 - mode: ScadaModeEnum = ScadaModeEnum.DESIGN,  
38 - open = true  
39 -) => {  
40 - const { configurationPrefix } = useGlobSetting();  
41 - const params: ScadaLinkParamsType = {  
42 - configurationId: record.id,  
43 - organizationId: record.organizationId!,  
44 - mode: mode,  
45 - platform: record.platform as Platform,  
46 - };  
47 -  
48 - if (mode === ScadaModeEnum.SHARE) {  
49 - params.publicId = record.publicId;  
50 - }  
51 -  
52 - const href = new URL(location.origin);  
53 - href.pathname = configurationPrefix;  
54 - href.hash = encode(params);  
55 - open && window.open(href.href);  
56 - return href.href;  
57 -};  
1 <script setup lang="ts"> 1 <script setup lang="ts">
2 - import { List, Card, Button, PaginationProps, Tooltip } from 'ant-design-vue';  
3 - import { ReloadOutlined } from '@ant-design/icons-vue';  
4 - import { computed, onMounted, reactive, ref, unref } from 'vue';  
5 - import { OrganizationIdTree, useResetOrganizationTree } from '../../common/organizationIdTree'; 2 + import { BasicCardList, useCardList } from '/@/components/CardList';
6 import { 3 import {
7 deleteConfigurationCenter, 4 deleteConfigurationCenter,
8 getPage, 5 getPage,
9 } from '/@/api/configuration/center/configurationCenter'; 6 } from '/@/api/configuration/center/configurationCenter';
10 - import { ConfigurationCenterItemsModal } from '/@/api/configuration/center/model/configurationCenterModal';  
11 - import { PageWrapper } from '/@/components/Page';  
12 - import { BasicForm, useForm } from '/@/components/Form';  
13 import { searchFormSchema, ConfigurationTemplatePermission } from './center.data'; 7 import { searchFormSchema, ConfigurationTemplatePermission } from './center.data';
14 - import { useMessage } from '/@/hooks/web/useMessage'; 8 + import { ConfigurationCenterItemsModal } from '/@/api/configuration/center/model/configurationCenterModal';
15 import { Authority } from '/@/components/Authority'; 9 import { Authority } from '/@/components/Authority';
16 - import ConfigurationCenterDrawer from './ConfigurationCenterDrawer.vue';  
17 - import { useDrawer } from '/@/components/Drawer';  
18 - import { getBoundingClientRect } from '/@/utils/domUtils'; 10 + import { Button, Card, Tooltip } from 'ant-design-vue';
  11 + import { useRole } from '/@/hooks/business/useRole';
19 import configurationSrc from '/@/assets/icons/configuration.svg'; 12 import configurationSrc from '/@/assets/icons/configuration.svg';
20 - import { cloneDeep } from 'lodash'; 13 + import { Platform } from '../center/center.data';
  14 + import { computed, unref } from 'vue';
  15 + import { createScadaPageLink, ScadaModeEnum } from '../center/help';
  16 + import { useDrawer } from '/@/components/Drawer';
21 import { usePermission } from '/@/hooks/web/usePermission'; 17 import { usePermission } from '/@/hooks/web/usePermission';
22 - import { AuthIcon, CardLayoutButton } from '/@/components/Widget';  
23 - import AuthDropDown from '/@/components/Widget/AuthDropDown.vue';  
24 - import { useRole } from '/@/hooks/business/useRole'; 18 + import { useMessage } from '/@/hooks/web/useMessage';
25 import { Icon } from '/@/components/Icon'; 19 import { Icon } from '/@/components/Icon';
26 - import { createScadaPageLink, ScadaModeEnum } from './help';  
27 - import { Platform } from '../center/center.data';  
28 -  
29 - const listColumn = ref(5);  
30 -  
31 - const { createMessage } = useMessage();  
32 -  
33 - const { isCustomerUser } = useRole();  
34 -  
35 - const organizationId = ref<Nullable<number>>(null); 20 + import { AuthIcon, AuthDropDown } from '/@/components/Widget';
  21 + import { cloneDeep } from 'lodash-es';
  22 + import { OrganizationIdTree, useOrganizationTree } from '../../common/organizationIdTree';
  23 + import ConfigurationCenterDrawer from './ConfigurationCenterDrawer.vue';
36 24
37 - const pagination = reactive<PaginationProps>({  
38 - size: 'small',  
39 - showTotal: (total: number) => `共 ${total} 条数据`,  
40 - current: 1,  
41 - pageSize: unref(listColumn) * 2,  
42 - onChange: (page: number) => {  
43 - pagination.current = page;  
44 - getListData(); 25 + const [register, { reload }] = useCardList({
  26 + api: getPage,
  27 + useSearchForm: true,
  28 + formConfig: {
  29 + schemas: searchFormSchema,
  30 + labelWidth: 80,
  31 + resetFunc: async () => {
  32 + clearSelected();
  33 + },
  34 + },
  35 + beforeFetch: async (params: Recordable) => {
  36 + return { ...params, organizationId: getSelectKey(), isTemplate: 1 };
45 }, 37 },
46 }); 38 });
47 39
48 - const loading = ref(false);  
49 -  
50 - const dataSource = ref<ConfigurationCenterItemsModal[]>([]);  
51 -  
52 - const [registerForm, { getFieldsValue }] = useForm({  
53 - schemas: searchFormSchema,  
54 - showAdvancedButton: true,  
55 - labelWidth: 100,  
56 - compact: true,  
57 - resetFunc: () => {  
58 - resetFn();  
59 - organizationId.value = null;  
60 - return getListData();  
61 - },  
62 - submitFunc: async () => {  
63 - const value = getFieldsValue();  
64 - getListData(value); 40 + const [registerOrgTree, { getSelectKey, clearSelected }] = useOrganizationTree({
  41 + onSelect: () => {
  42 + reload();
65 }, 43 },
66 }); 44 });
67 45
68 - async function getListData(value: Recordable = {}) {  
69 - try {  
70 - loading.value = true;  
71 - const pageSize = unref(listColumn) * 2;  
72 - const { items, total } = await getPage({  
73 - organizationId: unref(organizationId),  
74 - ...value,  
75 - page: pagination.current!,  
76 - pageSize,  
77 - isTemplate: 1,  
78 - });  
79 -  
80 - dataSource.value = items;  
81 - Object.assign(pagination, { total, pageSize });  
82 - } catch (error) {  
83 - } finally {  
84 - loading.value = false;  
85 - }  
86 - }  
87 -  
88 - onMounted(() => {  
89 - getListData();  
90 - }); 46 + const [registerDrawer, { openDrawer }] = useDrawer();
91 47
92 - const searchInfo = reactive<Recordable>({});  
93 - const { organizationIdTreeRef, resetFn } = useResetOrganizationTree(searchInfo);  
94 - const handleSelect = (orgId: number) => {  
95 - organizationId.value = orgId;  
96 - getListData();  
97 - }; 48 + const { createMessage } = useMessage();
98 49
99 - const [registerDrawer, { openDrawer }] = useDrawer(); 50 + const { isCustomerUser } = useRole();
100 51
101 const { hasPermission } = usePermission(); 52 const { hasPermission } = usePermission();
102 53
@@ -136,191 +87,109 @@ @@ -136,191 +87,109 @@
136 try { 87 try {
137 await deleteConfigurationCenter([record.id]); 88 await deleteConfigurationCenter([record.id]);
138 createMessage.success('删除成功'); 89 createMessage.success('删除成功');
139 - await getListData(); 90 + await reload();
140 } catch (error) {} 91 } catch (error) {}
141 }; 92 };
142 -  
143 - const handleCardLayoutChange = () => {  
144 - pagination.current = 1;  
145 - getListData();  
146 - };  
147 -  
148 - const listEl = ref<Nullable<ComponentElRef>>(null);  
149 -  
150 - onMounted(() => {  
151 - const clientHeight = document.documentElement.clientHeight;  
152 - const rect = getBoundingClientRect(unref(listEl)!.$el! as HTMLElement) as DOMRect;  
153 - // margin-top 24 height 24  
154 - const paginationHeight = 24 + 24 + 8;  
155 - // list pading top 8 maring-top 8 extra slot 56  
156 - const listContainerMarginBottom = 8 + 8 + 56;  
157 - const listContainerHeight =  
158 - clientHeight - rect.top - paginationHeight - listContainerMarginBottom;  
159 - const listContainerEl = (unref(listEl)!.$el as HTMLElement).querySelector(  
160 - '.ant-spin-container'  
161 - ) as HTMLElement;  
162 - listContainerEl &&  
163 - (listContainerEl.style.height = listContainerHeight + 'px') &&  
164 - (listContainerEl.style.overflowY = 'auto') &&  
165 - (listContainerEl.style.overflowX = 'hidden');  
166 - });  
167 </script> 93 </script>
168 94
169 <template> 95 <template>
170 - <PageWrapper dense contentFullHeight contentClass="flex">  
171 - <OrganizationIdTree @select="handleSelect" ref="organizationIdTreeRef" />  
172 - <section class="flex-auto p-4 w-3/4 xl:w-4/5 w-full configuration-list">  
173 - <div class="flex-auto w-full bg-light-50 dark:bg-dark-900 p-4">  
174 - <BasicForm @register="registerForm" />  
175 - </div>  
176 - <List  
177 - ref="listEl"  
178 - :loading="loading"  
179 - class="flex-auto bg-light-50 dark:bg-dark-900 !p-2 !mt-4"  
180 - position="bottom"  
181 - :pagination="pagination"  
182 - :data-source="dataSource"  
183 - :grid="{ gutter: 4, column: listColumn }"  
184 - >  
185 - <template #header>  
186 - <div class="flex gap-3 justify-end">  
187 - <Authority v-if="!isCustomerUser" :value="ConfigurationTemplatePermission.CREATE">  
188 - <Button type="primary" @click="handleCreateOrUpdate()">新增模板</Button>  
189 - </Authority>  
190 - <CardLayoutButton v-model:value="listColumn" @change="handleCardLayoutChange" />  
191 - <Tooltip title="刷新">  
192 - <Button type="primary" @click="getListData">  
193 - <ReloadOutlined />  
194 - </Button>  
195 - </Tooltip>  
196 - </div>  
197 - </template>  
198 - <template #renderItem="{ item }">  
199 - <List.Item>  
200 - <Card  
201 - :style="{  
202 - '--viewType': '#1890ff',  
203 - }"  
204 - hoverable  
205 - class="card-container" 96 + <section class="flex w-full h-full">
  97 + <OrganizationIdTree @register="registerOrgTree" />
  98 + <BasicCardList class="flex-auto p-4 w-3/4 xl:w-4/5 w-full" @register="register">
  99 + <template #toolbar>
  100 + <div class="flex gap-3 justify-end">
  101 + <Authority v-if="!isCustomerUser" :value="ConfigurationTemplatePermission.CREATE">
  102 + <Button type="primary" @click="handleCreateOrUpdate()">新增模版</Button>
  103 + </Authority>
  104 + </div>
  105 + </template>
  106 + <template #renderItem="{ item }: CardListRenderItem<ConfigurationCenterItemsModal>">
  107 + <Card
  108 + :style="{
  109 + '--viewType': '#1890ff',
  110 + }"
  111 + hoverable
  112 + class="card-container"
  113 + >
  114 + <template #cover>
  115 + <div
  116 + class="img-container h-full w-full !flex justify-center items-center text-center p-1 relative"
206 > 117 >
207 - <template #cover>  
208 - <div  
209 - class="img-container h-full w-full !flex justify-center items-center text-center p-1 relative"  
210 - >  
211 - <img  
212 - class="w-full h-36"  
213 - alt="example"  
214 - :src="item.thumbnail || configurationSrc"  
215 - @click="handlePreview(item)" 118 + <img
  119 + class="w-full h-36"
  120 + alt="example"
  121 + :src="item.thumbnail || configurationSrc"
  122 + @click="handlePreview(item)"
  123 + />
  124 + <span class="absolute top-0 left-0 text-light-50 transform -rotate-45 translate-y-1">
  125 + 母版
  126 + </span>
  127 + </div>
  128 + </template>
  129 + <template class="ant-card-actions" #actions>
  130 + <Tooltip title="预览">
  131 + <AuthIcon
  132 + :auth="ConfigurationTemplatePermission.PREVIEW"
  133 + class="!text-lg"
  134 + icon="ant-design:eye-outlined"
  135 + @click="handlePreview(item)"
  136 + />
  137 + </Tooltip>
  138 + <Tooltip v-if="!isCustomerUser" title="设计">
  139 + <AuthIcon
  140 + :auth="ConfigurationTemplatePermission.DESIGN"
  141 + class="!text-lg"
  142 + icon="ant-design:edit-outlined"
  143 + @click="handleDesign(item)"
  144 + />
  145 + </Tooltip>
  146 + <AuthDropDown
  147 + v-if="!isCustomerUser"
  148 + :dropMenuList="[
  149 + {
  150 + text: '编辑',
  151 + auth: ConfigurationTemplatePermission.UPDATE,
  152 + icon: 'clarity:note-edit-line',
  153 + event: '',
  154 + onClick: handleCreateOrUpdate.bind(null, item),
  155 + },
  156 + {
  157 + text: '删除',
  158 + auth: ConfigurationTemplatePermission.DELETE,
  159 + icon: 'ant-design:delete-outlined',
  160 + event: '',
  161 + popconfirm: {
  162 + title: '是否确认删除操作?',
  163 + onConfirm: handleDelete.bind(null, item),
  164 + },
  165 + },
  166 + ]"
  167 + :trigger="['hover']"
  168 + />
  169 + </template>
  170 + <Card.Meta>
  171 + <template #title>
  172 + <span class="truncate">{{ item.name }}</span>
  173 + </template>
  174 + <template #description>
  175 + <div class="truncate h-11">
  176 + <div class="truncate flex justify-between items-center">
  177 + <div>{{ item.organizationDTO?.name }}</div>
  178 + <Icon
  179 + :icon="
  180 + item.platform === Platform.PC
  181 + ? 'ri:computer-line'
  182 + : 'clarity:mobile-phone-solid'
  183 + "
216 /> 184 />
217 - <span  
218 - class="absolute top-0 left-0 text-light-50 transform -rotate-45 translate-y-1"  
219 - >  
220 - 母版  
221 - </span>  
222 </div> 185 </div>
223 - </template>  
224 - <template class="ant-card-actions" #actions>  
225 - <Tooltip title="预览">  
226 - <AuthIcon  
227 - :auth="ConfigurationTemplatePermission.PREVIEW"  
228 - class="!text-lg"  
229 - icon="ant-design:eye-outlined"  
230 - @click="handlePreview(item)"  
231 - />  
232 - </Tooltip>  
233 - <Tooltip v-if="!isCustomerUser" title="设计">  
234 - <AuthIcon  
235 - :auth="ConfigurationTemplatePermission.DESIGN"  
236 - class="!text-lg"  
237 - icon="ant-design:edit-outlined"  
238 - @click="handleDesign(item)"  
239 - />  
240 - </Tooltip>  
241 - <AuthDropDown  
242 - v-if="!isCustomerUser"  
243 - :dropMenuList="[  
244 - {  
245 - text: '编辑',  
246 - auth: ConfigurationTemplatePermission.UPDATE,  
247 - icon: 'clarity:note-edit-line',  
248 - event: '',  
249 - onClick: handleCreateOrUpdate.bind(null, item),  
250 - },  
251 - {  
252 - text: '删除',  
253 - auth: ConfigurationTemplatePermission.DELETE,  
254 - icon: 'ant-design:delete-outlined',  
255 - event: '',  
256 - popconfirm: {  
257 - title: '是否确认删除操作?',  
258 - onConfirm: handleDelete.bind(null, item),  
259 - },  
260 - },  
261 - ]"  
262 - :trigger="['hover']"  
263 - />  
264 - </template>  
265 - <Card.Meta>  
266 - <template #title>  
267 - <span class="truncate">{{ item.name }}</span>  
268 - </template>  
269 - <template #description>  
270 - <div class="truncate h-11">  
271 - <div class="truncate flex justify-between items-center">  
272 - <div>{{ item.organizationDTO?.name }}</div>  
273 - <Icon  
274 - :icon="  
275 - item.platform === Platform.PC  
276 - ? 'ri:computer-line'  
277 - : 'clarity:mobile-phone-solid'  
278 - "  
279 - />  
280 - </div>  
281 - <div class="truncate">{{ item.remark || '' }} </div>  
282 - </div>  
283 - </template>  
284 - </Card.Meta>  
285 - </Card>  
286 - </List.Item>  
287 - </template>  
288 - </List>  
289 - </section>  
290 - <ConfigurationCenterDrawer @register="registerDrawer" @success="getListData" />  
291 - </PageWrapper> 186 + <div class="truncate">{{ item.remark || '' }} </div>
  187 + </div>
  188 + </template>
  189 + </Card.Meta>
  190 + </Card>
  191 + </template>
  192 + </BasicCardList>
  193 + <ConfigurationCenterDrawer @register="registerDrawer" @success="reload()" />
  194 + </section>
292 </template> 195 </template>
293 -  
294 -<style lang="less" scoped>  
295 - .configuration-list:deep(.ant-list-header) {  
296 - border-bottom: none !important;  
297 - }  
298 -  
299 - .configuration-list:deep(.ant-list-pagination) {  
300 - height: 24px;  
301 - }  
302 -  
303 - .configuration-list:deep(.ant-card-body) {  
304 - padding: 16px !important;  
305 - }  
306 -  
307 - .configuration-list:deep(.ant-list-empty-text) {  
308 - @apply w-full h-full flex justify-center items-center;  
309 - }  
310 -  
311 - .card-container {  
312 - // background-color: red;  
313 - .img-container {  
314 - border-top-left-radius: 80px;  
315 - background-color: #fff;  
316 -  
317 - img {  
318 - border-top-left-radius: 80px;  
319 - }  
320 - }  
321 - }  
322 -  
323 - .card-container:deep(.ant-card-cover) {  
324 - background-color: var(--viewType);  
325 - }  
326 -</style>