Showing
4 changed files
with
128 additions
and
173 deletions
... | ... | @@ -48,8 +48,7 @@ |
48 | 48 | <SceneLinkAgeDrawer @register="registerDrawer" @success="handleSuccess" /> |
49 | 49 | </div> |
50 | 50 | </template> |
51 | -<script lang="ts"> | |
52 | - import { defineComponent } from 'vue'; | |
51 | +<script lang="ts" setup> | |
53 | 52 | import { BasicTable, useTable, TableAction } from '/@/components/Table'; |
54 | 53 | import { useDrawer } from '/@/components/Drawer'; |
55 | 54 | import { |
... | ... | @@ -62,110 +61,88 @@ |
62 | 61 | import { columns, searchFormSchema } from './config/config.data.ts'; |
63 | 62 | import { USER_INFO_KEY } from '/@/enums/cacheEnum'; |
64 | 63 | import { getAuthCache } from '/@/utils/auth'; |
65 | - import { authBtn } from '/@/enums/roleEnum'; | |
66 | 64 | import SceneLinkAgeDrawer from './SceneLinkAgeDrawer.vue'; |
67 | 65 | import { useMessage } from '/@/hooks/web/useMessage'; |
68 | 66 | |
69 | - export default defineComponent({ | |
70 | - name: 'LinkEdge', | |
71 | - components: { BasicTable, SceneLinkAgeDrawer, TableAction, Switch }, | |
72 | - setup() { | |
73 | - const { hasBatchDelete, handleDeleteOrBatchDelete, selectionOptions, resetSelectedRowKeys } = | |
74 | - useBatchDelete(screenLinkPageDeleteApi, handleSuccess); | |
75 | - selectionOptions.rowSelection.getCheckboxProps = (record: Recordable) => { | |
76 | - // Demo:status为1的选择框禁用 | |
77 | - if (record.status === 1) { | |
78 | - return { disabled: true }; | |
79 | - } else { | |
80 | - return { disabled: false }; | |
81 | - } | |
82 | - }; | |
67 | + const { hasBatchDelete, handleDeleteOrBatchDelete, selectionOptions, resetSelectedRowKeys } = | |
68 | + useBatchDelete(screenLinkPageDeleteApi, handleSuccess); | |
69 | + selectionOptions.rowSelection.getCheckboxProps = (record: Recordable) => { | |
70 | + // Demo:status为1的选择框禁用 | |
71 | + if (record.status === 1) { | |
72 | + return { disabled: true }; | |
73 | + } else { | |
74 | + return { disabled: false }; | |
75 | + } | |
76 | + }; | |
83 | 77 | |
84 | - const userInfo: any = getAuthCache(USER_INFO_KEY); | |
85 | - const userId = userInfo.userId; | |
86 | - const role: string = userInfo.roles[0]; | |
87 | - const [registerDrawer, { openDrawer }] = useDrawer(); | |
88 | - const [registerTable, { reload, setProps, setSelectedRowKeys }] = useTable({ | |
89 | - title: '场景联动列表', | |
90 | - api: screenLinkPageGetApi, | |
91 | - columns, | |
92 | - formConfig: { | |
93 | - labelWidth: 120, | |
94 | - schemas: searchFormSchema, | |
95 | - }, | |
96 | - useSearchForm: true, | |
97 | - showTableSetting: true, | |
98 | - bordered: true, | |
99 | - showIndexColumn: false, | |
100 | - actionColumn: { | |
101 | - width: 200, | |
102 | - title: '操作', | |
103 | - dataIndex: 'action', | |
104 | - slots: { customRender: 'action' }, | |
105 | - fixed: 'right', | |
106 | - }, | |
107 | - ...selectionOptions, | |
108 | - }); | |
109 | - | |
110 | - function handleAdd() { | |
111 | - openDrawer(true, { | |
112 | - isUpdate: false, | |
113 | - }); | |
114 | - } | |
115 | - | |
116 | - function handleEdit(record: Recordable) { | |
117 | - openDrawer(true, { | |
118 | - record, | |
119 | - isUpdate: true, | |
120 | - }); | |
121 | - } | |
122 | - function handleView(record: Recordable) { | |
123 | - openDrawer(true, { | |
124 | - record, | |
125 | - isUpdate: 3, | |
126 | - }); | |
127 | - } | |
128 | - function handleSuccess() { | |
129 | - reload(); | |
130 | - } | |
78 | + const userInfo: any = getAuthCache(USER_INFO_KEY); | |
79 | + const userId = userInfo.userId; | |
131 | 80 | |
132 | - const statusChange = async (checked, record) => { | |
133 | - // record.pendingStatus = true; | |
134 | - setProps({ | |
135 | - loading: true, | |
136 | - }); | |
137 | - setSelectedRowKeys([]); | |
138 | - resetSelectedRowKeys(); | |
139 | - const newStatus = checked ? 1 : 0; | |
140 | - const { createMessage } = useMessage(); | |
141 | - try { | |
142 | - await screenLinkPagePutApi({ id: record.id, status: newStatus }); | |
143 | - if (newStatus) { | |
144 | - createMessage.success(`启用成功`); | |
145 | - } else { | |
146 | - createMessage.success('禁用成功'); | |
147 | - } | |
148 | - } finally { | |
149 | - setProps({ | |
150 | - loading: false, | |
151 | - }); | |
152 | - reload(); | |
153 | - } | |
154 | - }; | |
155 | - return { | |
156 | - registerTable, | |
157 | - registerDrawer, | |
158 | - handleAdd, | |
159 | - handleEdit, | |
160 | - handleSuccess, | |
161 | - hasBatchDelete, | |
162 | - handleDeleteOrBatchDelete, | |
163 | - handleView, | |
164 | - authBtn, | |
165 | - role, | |
166 | - userId, | |
167 | - statusChange, | |
168 | - }; | |
81 | + const [registerDrawer, { openDrawer }] = useDrawer(); | |
82 | + const [registerTable, { reload, setProps, setSelectedRowKeys }] = useTable({ | |
83 | + title: '场景联动列表', | |
84 | + api: screenLinkPageGetApi, | |
85 | + columns, | |
86 | + formConfig: { | |
87 | + labelWidth: 120, | |
88 | + schemas: searchFormSchema, | |
169 | 89 | }, |
90 | + useSearchForm: true, | |
91 | + showTableSetting: true, | |
92 | + bordered: true, | |
93 | + showIndexColumn: false, | |
94 | + actionColumn: { | |
95 | + width: 200, | |
96 | + title: '操作', | |
97 | + dataIndex: 'action', | |
98 | + slots: { customRender: 'action' }, | |
99 | + fixed: 'right', | |
100 | + }, | |
101 | + ...selectionOptions, | |
170 | 102 | }); |
103 | + | |
104 | + function handleAdd() { | |
105 | + openDrawer(true, { | |
106 | + isUpdate: false, | |
107 | + }); | |
108 | + } | |
109 | + | |
110 | + function handleEdit(record: Recordable) { | |
111 | + openDrawer(true, { | |
112 | + record, | |
113 | + isUpdate: true, | |
114 | + }); | |
115 | + } | |
116 | + function handleView(record: Recordable) { | |
117 | + openDrawer(true, { | |
118 | + record, | |
119 | + isUpdate: 3, | |
120 | + }); | |
121 | + } | |
122 | + function handleSuccess() { | |
123 | + reload(); | |
124 | + } | |
125 | + | |
126 | + const statusChange = async (checked, record) => { | |
127 | + setProps({ | |
128 | + loading: true, | |
129 | + }); | |
130 | + setSelectedRowKeys([]); | |
131 | + resetSelectedRowKeys(); | |
132 | + const newStatus = checked ? 1 : 0; | |
133 | + const { createMessage } = useMessage(); | |
134 | + try { | |
135 | + await screenLinkPagePutApi({ id: record.id, status: newStatus }); | |
136 | + if (newStatus) { | |
137 | + createMessage.success(`启用成功`); | |
138 | + } else { | |
139 | + createMessage.success('禁用成功'); | |
140 | + } | |
141 | + } finally { | |
142 | + setProps({ | |
143 | + loading: false, | |
144 | + }); | |
145 | + reload(); | |
146 | + } | |
147 | + }; | |
171 | 148 | </script> | ... | ... |
1 | 1 | import { BasicColumn, FormSchema } from '/@/components/Table'; |
2 | 2 | import { h } from 'vue'; |
3 | -import { Tag, Switch } from 'ant-design-vue'; | |
4 | -import { useMessage } from '/@/hooks/web/useMessage'; | |
5 | -import { updateTransformScriptStatusApi } from '/@/api/device/TransformScriptApi'; | |
3 | +import { Tag } from 'ant-design-vue'; | |
6 | 4 | export const columns: BasicColumn[] = [ |
7 | 5 | { |
8 | 6 | title: '名称', |
... | ... | @@ -19,30 +17,7 @@ export const columns: BasicColumn[] = [ |
19 | 17 | title: '状态', |
20 | 18 | dataIndex: 'status', |
21 | 19 | width: 120, |
22 | - customRender: ({ record }) => { | |
23 | - if (!Reflect.has(record, 'pendingStatus')) { | |
24 | - record.pendingStatus = false; | |
25 | - } | |
26 | - return h(Switch, { | |
27 | - checked: record.status === 1, | |
28 | - checkedChildren: '已启用', | |
29 | - unCheckedChildren: '已禁用', | |
30 | - loading: record.pendingStatus, | |
31 | - onChange(checked: boolean) { | |
32 | - record.pendingStatus = true; | |
33 | - const newStatus = checked ? 1 : 0; | |
34 | - const { createMessage } = useMessage(); | |
35 | - updateTransformScriptStatusApi(newStatus, record.id) | |
36 | - .then(() => { | |
37 | - record.status = newStatus; | |
38 | - createMessage.success(`${record.status ? '启用' : '禁用'}成功`); | |
39 | - }) | |
40 | - .finally(() => { | |
41 | - record.pendingStatus = false; | |
42 | - }); | |
43 | - }, | |
44 | - }); | |
45 | - }, | |
20 | + slots: { customRender: 'status' }, | |
46 | 21 | }, |
47 | 22 | { |
48 | 23 | title: '创建时间', | ... | ... |
1 | 1 | <template> |
2 | 2 | <div> |
3 | - <BasicTable | |
4 | - @selection-change="useSelectionChange" | |
5 | - :rowSelection="{ type: 'checkbox' }" | |
6 | - @register="registerTable" | |
7 | - v-show="isStatus === 0" | |
8 | - :clickToRowSelect="false" | |
9 | - > | |
3 | + <BasicTable @register="registerTable" v-show="isStatus === 0"> | |
10 | 4 | <template #toolbar> |
11 | 5 | <a-button type="primary" @click="handleCreate"> 新增转换脚本 </a-button> |
12 | - <a-button color="error" @click="handleDeleteOrBatchDelete(null)" :disabled="disabled"> | |
6 | + <a-button color="error" @click="handleDeleteOrBatchDelete(null)" :disabled="hasBatchDelete"> | |
13 | 7 | 批量删除 |
14 | 8 | </a-button> |
15 | 9 | </template> |
10 | + <template #status="{ record }"> | |
11 | + <Switch | |
12 | + :checked="record.status === 1" | |
13 | + :loading="record.pendingStatus" | |
14 | + checkedChildren="启用" | |
15 | + unCheckedChildren="禁用" | |
16 | + @change="(checked:boolean)=>statusChange(checked,record)" | |
17 | + /> | |
18 | + </template> | |
16 | 19 | <template #action="{ record }"> |
17 | 20 | <TableAction |
18 | 21 | :actions="[ |
... | ... | @@ -48,6 +51,7 @@ |
48 | 51 | |
49 | 52 | <script lang="ts" setup> |
50 | 53 | import { ref } from 'vue'; |
54 | + import { Switch } from 'ant-design-vue'; | |
51 | 55 | import { BasicTable, useTable, TableAction } from '/@/components/Table'; |
52 | 56 | import { columns, searchFormSchema } from './config/config.data'; |
53 | 57 | import { getConvertApi, deleteTransformApi } from '/@/api/device/TransformScriptApi'; |
... | ... | @@ -55,14 +59,24 @@ |
55 | 59 | import ScriptDrawer from './cpns/ScriptDrawer.vue'; |
56 | 60 | import TestScript from './cpns/TestScript.vue'; |
57 | 61 | import { useMessage } from '/@/hooks/web/useMessage'; |
62 | + import { updateTransformScriptStatusApi } from '/@/api/device/TransformScriptApi'; | |
63 | + import { useBatchDelete } from '/@/hooks/web/useBatchDelete'; | |
58 | 64 | |
59 | 65 | const handleSuccess = () => { |
60 | 66 | reload(); |
61 | 67 | }; |
62 | - const { createMessage } = useMessage(); | |
63 | - let selectedRowKeys: any = []; | |
64 | - const disabled = ref(true); | |
65 | - const [registerTable, { reload, getSelectRowKeys, getSelectRows }] = useTable({ | |
68 | + | |
69 | + const { hasBatchDelete, handleDeleteOrBatchDelete, selectionOptions, resetSelectedRowKeys } = | |
70 | + useBatchDelete(deleteTransformApi, handleSuccess); | |
71 | + selectionOptions.rowSelection.getCheckboxProps = (record: Recordable) => { | |
72 | + // Demo:status为1的选择框禁用 | |
73 | + if (record.status === 1) { | |
74 | + return { disabled: true }; | |
75 | + } else { | |
76 | + return { disabled: false }; | |
77 | + } | |
78 | + }; | |
79 | + const [registerTable, { reload, setProps, setSelectedRowKeys }] = useTable({ | |
66 | 80 | api: getConvertApi, |
67 | 81 | title: '转换脚本列表', |
68 | 82 | columns, |
... | ... | @@ -74,6 +88,7 @@ |
74 | 88 | labelWidth: 100, |
75 | 89 | schemas: searchFormSchema, |
76 | 90 | }, |
91 | + clickToRowSelect: 'false', | |
77 | 92 | rowKey: 'id', |
78 | 93 | actionColumn: { |
79 | 94 | width: 180, |
... | ... | @@ -82,6 +97,7 @@ |
82 | 97 | slots: { customRender: 'action' }, |
83 | 98 | fixed: 'right', |
84 | 99 | }, |
100 | + ...selectionOptions, | |
85 | 101 | }); |
86 | 102 | const [registerDrawer, { openDrawer }] = useDrawer(); |
87 | 103 | |
... | ... | @@ -108,39 +124,26 @@ |
108 | 124 | const handleEdit = (record: Recordable) => { |
109 | 125 | openDrawer(true, { isUpdate: true, record }); |
110 | 126 | }; |
111 | - const useSelectionChange = () => { | |
112 | - selectedRowKeys = getSelectRowKeys(); | |
113 | - if (selectedRowKeys.length > 0) { | |
114 | - disabled.value = false; | |
115 | - } | |
116 | - let getRows = getSelectRows(); | |
117 | - const isJudge = getRows.map((m) => m.status); | |
118 | - if (isJudge.length === 0) { | |
119 | - disabled.value = true; | |
120 | - } | |
121 | - if (isJudge.includes(1)) { | |
122 | - disabled.value = true; | |
123 | - } | |
124 | - }; | |
125 | - // 删除或批量删除 | |
126 | - const handleDeleteOrBatchDelete = async (record: Recordable | null) => { | |
127 | - if (record) { | |
128 | - try { | |
129 | - await deleteTransformApi([record.id]); | |
130 | - createMessage.success('删除成功'); | |
131 | - handleSuccess(); | |
132 | - } catch (e: any) {} | |
133 | - } else { | |
134 | - try { | |
135 | - await deleteTransformApi(selectedRowKeys); | |
136 | - createMessage.success('批量删除成功'); | |
137 | - handleSuccess(); | |
138 | - selectedRowKeys.length = 0; | |
139 | - } catch (e: any) { | |
140 | - selectedRowKeys.length = 0; | |
141 | - } finally { | |
142 | - selectedRowKeys.length = 0; | |
127 | + const statusChange = async (checked, record) => { | |
128 | + setProps({ | |
129 | + loading: true, | |
130 | + }); | |
131 | + setSelectedRowKeys([]); | |
132 | + resetSelectedRowKeys(); | |
133 | + const newStatus = checked ? 1 : 0; | |
134 | + const { createMessage } = useMessage(); | |
135 | + try { | |
136 | + await updateTransformScriptStatusApi(newStatus, record.id); | |
137 | + if (newStatus) { | |
138 | + createMessage.success(`启用成功`); | |
139 | + } else { | |
140 | + createMessage.success('禁用成功'); | |
143 | 141 | } |
142 | + } finally { | |
143 | + setProps({ | |
144 | + loading: false, | |
145 | + }); | |
146 | + reload(); | |
144 | 147 | } |
145 | 148 | }; |
146 | 149 | </script> | ... | ... |