简柏林 / thingskit-front · Commits

Commit b3da587aecd67e68d25b60b380418d6a76760d61

Authored by xp.Huang
2 parents bf330c42 18f260ce

Merge branch 'ft' into 'main' 

fix:修复批量删除问题

See merge request huang/yun-teng-iot-front!194
Inline Side-by-side
Showing 8 changed files with 173 additions and 256 deletions
@@ -3,10 +3,6 @@ import { getOrganizationList } from '/@/api/system/system'; @@ -3,10 +3,6 @@ import { getOrganizationList } from '/@/api/system/system';
3 import { copyTransFun } from '/@/utils/fnUtils'; 3 import { copyTransFun } from '/@/utils/fnUtils';
4 import { findDictItemByCode } from '/@/api/system/dict'; 4 import { findDictItemByCode } from '/@/api/system/dict';
5 import { alarmContactGetPage } from '/@/api/device/deviceConfigApi'; 5 import { alarmContactGetPage } from '/@/api/device/deviceConfigApi';
6 -import { Switch } from 'ant-design-vue';  
7 -import { h } from 'vue';  
8 -import { putAlarmConfigStatus } from '/@/api/alarm/config/alarmConfig';  
9 -import { useMessage } from '/@/hooks/web/useMessage';  
10 6
11 // 表格列数据 7 // 表格列数据
12 export const columns: BasicColumn[] = [ 8 export const columns: BasicColumn[] = [
@@ -36,34 +32,7 @@ export const columns: BasicColumn[] = [ @@ -36,34 +32,7 @@ export const columns: BasicColumn[] = [
36 title: '状态', 32 title: '状态',
37 dataIndex: 'status', 33 dataIndex: 'status',
38 width: 120, 34 width: 120,
39 - customRender: ({ record }) => {  
40 - if (!Reflect.has(record, 'pendingStatus')) {  
41 - record.pendingStatus = false;  
42 - }  
43 - return h(Switch, {  
44 - checked: record.status === 1,  
45 - checkedChildren: '启用',  
46 - unCheckedChildren: '未启用',  
47 - loading: record.pendingStatus,  
48 - onChange(checked: boolean) {  
49 - record.pendingStatus = true;  
50 - const newStatus = checked ? 1 : 0;  
51 - const { createMessage } = useMessage();  
52 - putAlarmConfigStatus(newStatus, record.id)  
53 - .then(() => {  
54 - record.status = newStatus;  
55 - if (record.status == 1) {  
56 - createMessage.success(`启用`);  
57 - } else {  
58 - createMessage.success('未启用');  
59 - }  
60 - })  
61 - .finally(() => {  
62 - record.pendingStatus = false;  
63 - });  
64 - },  
65 - });  
66 - }, 35 + slots: { customRender: 'status' },
67 }, 36 },
68 { 37 {
69 title: '备注', 38 title: '备注',
@@ -9,8 +9,6 @@ @@ -9,8 +9,6 @@
9 <BasicTable 9 <BasicTable
10 @register="registerTable" 10 @register="registerTable"
11 :searchInfo="searchInfo" 11 :searchInfo="searchInfo"
12 - @selection-change="useSelectionChange"  
13 - :rowSelection="{ type: 'checkbox' }"  
14 class="w-3/4 xl:w-4/5" 12 class="w-3/4 xl:w-4/5"
15 :clickToRowSelect="false" 13 :clickToRowSelect="false"
16 > 14 >
@@ -35,6 +33,15 @@ @@ -35,6 +33,15 @@
35 查看联系方式 33 查看联系方式
36 </a-button> 34 </a-button>
37 </template> 35 </template>
  36 + <template #status="{ record }">
  37 + <Switch
  38 + :checked="record.status === 1"
  39 + :loading="record.pendingStatus"
  40 + checkedChildren="启用"
  41 + unCheckedChildren="禁用"
  42 + @change="(checked:boolean)=>statusChange(checked,record)"
  43 + />
  44 + </template>
38 <template #action="{ record }"> 45 <template #action="{ record }">
39 <TableAction 46 <TableAction
40 :actions="[ 47 :actions="[
@@ -68,10 +75,9 @@ @@ -68,10 +75,9 @@
68 </template> 75 </template>
69 76
70 <script lang="ts"> 77 <script lang="ts">
71 - import { defineComponent, reactive, ref, h } from 'vue'; 78 + import { defineComponent, reactive, h } from 'vue';
72 import { BasicTable, useTable, TableAction } from '/@/components/Table'; 79 import { BasicTable, useTable, TableAction } from '/@/components/Table';
73 import { PageWrapper } from '/@/components/Page'; 80 import { PageWrapper } from '/@/components/Page';
74 - import { useMessage } from '/@/hooks/web/useMessage';  
75 import { useDrawer } from '/@/components/Drawer'; 81 import { useDrawer } from '/@/components/Drawer';
76 import ContactDrawer from './ContactDrawer.vue'; 82 import ContactDrawer from './ContactDrawer.vue';
77 import { useResetOrganizationTree, OrganizationIdTree } from '/@/views/common/organizationIdTree'; 83 import { useResetOrganizationTree, OrganizationIdTree } from '/@/views/common/organizationIdTree';
@@ -81,6 +87,10 @@ @@ -81,6 +87,10 @@
81 import { JsonPreview } from '/@/components/CodeEditor'; 87 import { JsonPreview } from '/@/components/CodeEditor';
82 import { findDictItemByCode } from '/@/api/system/dict'; 88 import { findDictItemByCode } from '/@/api/system/dict';
83 import { alarmContactGetPage } from '/@/api/device/deviceConfigApi'; 89 import { alarmContactGetPage } from '/@/api/device/deviceConfigApi';
  90 + import { useBatchDelete } from '/@/hooks/web/useBatchDelete';
  91 + import { Switch } from 'ant-design-vue';
  92 + import { putAlarmConfigStatus } from '/@/api/alarm/config/alarmConfig';
  93 + import { useMessage } from '/@/hooks/web/useMessage';
84 94
85 export default defineComponent({ 95 export default defineComponent({
86 components: { 96 components: {
@@ -89,18 +99,30 @@ @@ -89,18 +99,30 @@
89 BasicTable, 99 BasicTable,
90 TableAction, 100 TableAction,
91 ContactDrawer, 101 ContactDrawer,
  102 + Switch,
92 }, 103 },
93 setup() { 104 setup() {
94 - let selectArray: any = [];  
95 - const hasBatchDelete = ref(true);  
96 const searchInfo = reactive<Recordable>({}); 105 const searchInfo = reactive<Recordable>({});
97 const { organizationIdTreeRef, resetFn } = useResetOrganizationTree(searchInfo); 106 const { organizationIdTreeRef, resetFn } = useResetOrganizationTree(searchInfo);
  107 + // 刷新
  108 + const handleSuccess = () => {
  109 + reload();
  110 + };
  111 + const { hasBatchDelete, handleDeleteOrBatchDelete, selectionOptions, resetSelectedRowKeys } =
  112 + useBatchDelete(deleteAlarmConfig, handleSuccess);
  113 + selectionOptions.rowSelection.getCheckboxProps = (record: Recordable) => {
  114 + // Demo:status为1的选择框禁用
  115 + if (record.status === 1) {
  116 + return { disabled: true };
  117 + } else {
  118 + return { disabled: false };
  119 + }
  120 + };
98 // 表格hooks 121 // 表格hooks
99 - const [registerTable, { reload, getSelectRows, getSelectRowKeys }] = useTable({ 122 + const [registerTable, { reload, setProps, setSelectedRowKeys }] = useTable({
100 title: '告警配置列表', 123 title: '告警配置列表',
101 api: queryAlarmConfig, 124 api: queryAlarmConfig,
102 columns, 125 columns,
103 - clickToRowSelect: false,  
104 showIndexColumn: false, 126 showIndexColumn: false,
105 formConfig: { 127 formConfig: {
106 labelWidth: 120, 128 labelWidth: 120,
@@ -110,7 +132,6 @@ @@ -110,7 +132,6 @@
110 useSearchForm: true, 132 useSearchForm: true,
111 showTableSetting: true, 133 showTableSetting: true,
112 bordered: true, 134 bordered: true,
113 - rowKey: 'id',  
114 actionColumn: { 135 actionColumn: {
115 width: 200, 136 width: 200,
116 title: '操作', 137 title: '操作',
@@ -118,15 +139,11 @@ @@ -118,15 +139,11 @@
118 slots: { customRender: 'action' }, 139 slots: { customRender: 'action' },
119 fixed: 'right', 140 fixed: 'right',
120 }, 141 },
  142 + ...selectionOptions,
121 }); 143 });
122 // 弹框 144 // 弹框
123 const [registerDrawer, { openDrawer }] = useDrawer(); 145 const [registerDrawer, { openDrawer }] = useDrawer();
124 - const { createMessage } = useMessage();  
125 146
126 - // 刷新  
127 - const handleSuccess = () => {  
128 - reload();  
129 - };  
130 // 新增或编辑 147 // 新增或编辑
131 const handleCreateOrEdit = (record: Recordable | null) => { 148 const handleCreateOrEdit = (record: Recordable | null) => {
132 if (record) { 149 if (record) {
@@ -140,45 +157,6 @@ @@ -140,45 +157,6 @@
140 }); 157 });
141 } 158 }
142 }; 159 };
143 - const useSelectionChange = () => {  
144 - selectArray = getSelectRowKeys();  
145 - if (selectArray.length > 0) {  
146 - hasBatchDelete.value = false;  
147 - }  
148 - let getRows = getSelectRows();  
149 - const isJudge = getRows.map((m) => m.status);  
150 - if (isJudge.length === 0) {  
151 - hasBatchDelete.value = true;  
152 - }  
153 - if (isJudge.includes(1) && isJudge.includes(0)) {  
154 - hasBatchDelete.value = true;  
155 - } else if (isJudge.includes(1) && !isJudge.includes(0)) {  
156 - hasBatchDelete.value = true;  
157 - } else if (!isJudge.includes(1) && isJudge.includes(0)) {  
158 - hasBatchDelete.value = false;  
159 - }  
160 - };  
161 - // 删除或批量删除  
162 - const handleDeleteOrBatchDelete = async (record: Recordable | null) => {  
163 - if (record) {  
164 - try {  
165 - await deleteAlarmConfig([record.id]);  
166 - createMessage.success('删除成功');  
167 - handleSuccess();  
168 - } catch (e: any) {}  
169 - } else {  
170 - try {  
171 - await deleteAlarmConfig(selectArray);  
172 - createMessage.success('批量删除成功');  
173 - handleSuccess();  
174 - selectArray.length = 0;  
175 - } catch (e: any) {  
176 - selectArray.length = 0;  
177 - } finally {  
178 - selectArray.length = 0;  
179 - }  
180 - }  
181 - };  
182 160
183 // 树形选择器 161 // 树形选择器
184 const handleSelect = (organizationId: string) => { 162 const handleSelect = (organizationId: string) => {
@@ -226,8 +204,29 @@ @@ -226,8 +204,29 @@
226 content: h(JsonPreview, { data: JSON.parse(JSON.stringify(arr4)) }), 204 content: h(JsonPreview, { data: JSON.parse(JSON.stringify(arr4)) }),
227 }); 205 });
228 }; 206 };
  207 + const statusChange = async (checked, record) => {
  208 + setProps({
  209 + loading: true,
  210 + });
  211 + setSelectedRowKeys([]);
  212 + resetSelectedRowKeys();
  213 + const newStatus = checked ? 1 : 0;
  214 + const { createMessage } = useMessage();
  215 + try {
  216 + await putAlarmConfigStatus(newStatus, record.id);
  217 + if (newStatus) {
  218 + createMessage.success(`启用成功`);
  219 + } else {
  220 + createMessage.success('禁用成功');
  221 + }
  222 + } finally {
  223 + setProps({
  224 + loading: false,
  225 + });
  226 + reload();
  227 + }
  228 + };
229 return { 229 return {
230 - useSelectionChange,  
231 searchInfo, 230 searchInfo,
232 hasBatchDelete, 231 hasBatchDelete,
233 handleCreateOrEdit, 232 handleCreateOrEdit,
@@ -239,6 +238,7 @@ @@ -239,6 +238,7 @@
239 organizationIdTreeRef, 238 organizationIdTreeRef,
240 showAlarmContact, 239 showAlarmContact,
241 showMessageMode, 240 showMessageMode,
  241 + statusChange,
242 }; 242 };
243 }, 243 },
244 }); 244 });
@@ -312,6 +312,7 @@ @@ -312,6 +312,7 @@
312 if (!data) return createMessage.error('设置该设备配置为默认失败'); 312 if (!data) return createMessage.error('设置该设备配置为默认失败');
313 createMessage.success('设置该设备配置为默认成功'); 313 createMessage.success('设置该设备配置为默认成功');
314 reload(); 314 reload();
  315 + disabled.value = true;
315 }; 316 };
316 return { 317 return {
317 handleSetDefault, 318 handleSetDefault,
1 import { BasicColumn } from '/@/components/Table'; 1 import { BasicColumn } from '/@/components/Table';
2 import { FormSchema } from '/@/components/Table'; 2 import { FormSchema } from '/@/components/Table';
3 -import { h } from 'vue';  
4 -import { Switch } from 'ant-design-vue';  
5 -import { setMessageConfigStatus } from '/@/api/message/config';  
6 -import { useMessage } from '/@/hooks/web/useMessage';  
7 import { findDictItemByCode } from '/@/api/system/dict'; 3 import { findDictItemByCode } from '/@/api/system/dict';
8 import { MessageEnum } from '/@/enums/messageEnum'; 4 import { MessageEnum } from '/@/enums/messageEnum';
9 export const columns: BasicColumn[] = [ 5 export const columns: BasicColumn[] = [
@@ -32,30 +28,7 @@ export const columns: BasicColumn[] = [ @@ -32,30 +28,7 @@ export const columns: BasicColumn[] = [
32 title: '状态', 28 title: '状态',
33 dataIndex: 'status', 29 dataIndex: 'status',
34 width: 120, 30 width: 120,
35 - customRender: ({ record }) => {  
36 - if (!Reflect.has(record, 'pendingStatus')) {  
37 - record.pendingStatus = false;  
38 - }  
39 - return h(Switch, {  
40 - checked: record.status === 1,  
41 - checkedChildren: '已启用',  
42 - unCheckedChildren: '已禁用',  
43 - loading: record.pendingStatus,  
44 - onChange(checked: boolean) {  
45 - record.pendingStatus = true;  
46 - const newStatus = checked ? 1 : 0;  
47 - const { createMessage } = useMessage();  
48 - setMessageConfigStatus(record.id, record.messageType, newStatus, record.tenantId)  
49 - .then(() => {  
50 - record.status = newStatus;  
51 - createMessage.success(`修改成功`);  
52 - })  
53 - .finally(() => {  
54 - record.pendingStatus = false;  
55 - });  
56 - },  
57 - });  
58 - }, 31 + slots: { customRender: 'status' },
59 }, 32 },
60 { 33 {
61 title: '创建时间', 34 title: '创建时间',
1 <template> 1 <template>
2 <div> 2 <div>
3 - <BasicTable  
4 - @selection-change="useSelectionChange"  
5 - :rowSelection="{ type: 'checkbox' }"  
6 - @register="registerTable"  
7 - :clickToRowSelect="false"  
8 - > 3 + <BasicTable @register="registerTable" :clickToRowSelect="false">
9 <template #toolbar> 4 <template #toolbar>
10 <a-button type="primary" @click="handleCreate"> 新增消息配置 </a-button> 5 <a-button type="primary" @click="handleCreate"> 新增消息配置 </a-button>
11 - <a-button color="error" @click="handleDeleteOrBatchDelete(null)" :disabled="disabled"> 6 + <a-button color="error" @click="handleDeleteOrBatchDelete(null)" :disabled="hasBatchDelete">
12 批量删除 7 批量删除
13 </a-button> 8 </a-button>
14 </template> 9 </template>
15 <template #config="{ record }"> 10 <template #config="{ record }">
16 <a-button type="link" class="ml-2" @click="showData(record)"> 查看配置 </a-button> 11 <a-button type="link" class="ml-2" @click="showData(record)"> 查看配置 </a-button>
17 </template> 12 </template>
  13 + <template #status="{ record }">
  14 + <Switch
  15 + :checked="record.status === 1"
  16 + :loading="record.pendingStatus"
  17 + checkedChildren="启用"
  18 + unCheckedChildren="禁用"
  19 + @change="(checked:boolean)=>statusChange(checked,record)"
  20 + />
  21 + </template>
18 <template #action="{ record }"> 22 <template #action="{ record }">
19 <TableAction 23 <TableAction
20 :actions="[ 24 :actions="[
@@ -41,7 +45,7 @@ @@ -41,7 +45,7 @@
41 </div> 45 </div>
42 </template> 46 </template>
43 <script lang="ts"> 47 <script lang="ts">
44 - import { defineComponent, h, ref } from 'vue'; 48 + import { defineComponent, h } from 'vue';
45 import { BasicTable, useTable, TableAction } from '/@/components/Table'; 49 import { BasicTable, useTable, TableAction } from '/@/components/Table';
46 import { messageConfigPage, deleteMessageConfig } from '/@/api/message/config'; 50 import { messageConfigPage, deleteMessageConfig } from '/@/api/message/config';
47 import { useDrawer } from '/@/components/Drawer'; 51 import { useDrawer } from '/@/components/Drawer';
@@ -50,17 +54,29 @@ @@ -50,17 +54,29 @@
50 import { Modal } from 'ant-design-vue'; 54 import { Modal } from 'ant-design-vue';
51 import { JsonPreview } from '/@/components/CodeEditor'; 55 import { JsonPreview } from '/@/components/CodeEditor';
52 import { useMessage } from '/@/hooks/web/useMessage'; 56 import { useMessage } from '/@/hooks/web/useMessage';
  57 + import { useBatchDelete } from '/@/hooks/web/useBatchDelete';
  58 + import { Switch } from 'ant-design-vue';
  59 + import { setMessageConfigStatus } from '/@/api/message/config';
53 60
54 export default defineComponent({ 61 export default defineComponent({
55 name: 'MessageConfigManagement', 62 name: 'MessageConfigManagement',
56 - components: { BasicTable, ConfigDrawer, TableAction }, 63 + components: { BasicTable, ConfigDrawer, TableAction, Switch },
57 setup() { 64 setup() {
58 - let selectedRowKeys: any = [];  
59 - const disabled = ref(true);  
60 - const { createMessage } = useMessage();  
61 -  
62 const [registerDrawer, { openDrawer }] = useDrawer(); 65 const [registerDrawer, { openDrawer }] = useDrawer();
63 - const [registerTable, { reload, getSelectRows, getSelectRowKeys }] = useTable({ 66 + function handleSuccess() {
  67 + reload();
  68 + }
  69 + const { hasBatchDelete, handleDeleteOrBatchDelete, selectionOptions, resetSelectedRowKeys } =
  70 + useBatchDelete(deleteMessageConfig, 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({
64 title: '消息配置列表', 80 title: '消息配置列表',
65 api: messageConfigPage, 81 api: messageConfigPage,
66 columns, 82 columns,
@@ -69,7 +85,6 @@ @@ -69,7 +85,6 @@
69 schemas: searchFormSchema, 85 schemas: searchFormSchema,
70 }, 86 },
71 useSearchForm: true, 87 useSearchForm: true,
72 - rowKey: 'id',  
73 showTableSetting: true, 88 showTableSetting: true,
74 bordered: true, 89 bordered: true,
75 showIndexColumn: false, 90 showIndexColumn: false,
@@ -80,6 +95,7 @@ @@ -80,6 +95,7 @@
80 slots: { customRender: 'action' }, 95 slots: { customRender: 'action' },
81 fixed: 'right', 96 fixed: 'right',
82 }, 97 },
  98 + ...selectionOptions,
83 }); 99 });
84 100
85 function handleCreate() { 101 function handleCreate() {
@@ -95,9 +111,6 @@ @@ -95,9 +111,6 @@
95 }); 111 });
96 } 112 }
97 113
98 - function handleSuccess() {  
99 - reload();  
100 - }  
101 function showData(record: Recordable) { 114 function showData(record: Recordable) {
102 Modal.info({ 115 Modal.info({
103 title: '当前配置', 116 title: '当前配置',
@@ -107,43 +120,29 @@ @@ -107,43 +120,29 @@
107 content: h(JsonPreview, { data: JSON.parse(JSON.stringify(record.config)) }), 120 content: h(JsonPreview, { data: JSON.parse(JSON.stringify(record.config)) }),
108 }); 121 });
109 } 122 }
110 -  
111 - const useSelectionChange = () => {  
112 - selectedRowKeys = getSelectRowKeys();  
113 - if (selectedRowKeys.length > 0) {  
114 - disabled.value = false;  
115 - }  
116 - const isJudge = getSelectRows().map((m) => m.status);  
117 - if (isJudge.includes(1)) {  
118 - disabled.value = true;  
119 - } else {  
120 - disabled.value = false;  
121 - }  
122 - if (isJudge.length === 0) {  
123 - disabled.value = true;  
124 - }  
125 - };  
126 - // 删除或批量删除  
127 - const handleDeleteOrBatchDelete = async (record: Recordable | null) => {  
128 - if (record) {  
129 - try {  
130 - await deleteMessageConfig([record.id]);  
131 - createMessage.success('删除成功');  
132 - handleSuccess();  
133 - } catch (e: any) {}  
134 - } else {  
135 - try {  
136 - await deleteMessageConfig(selectedRowKeys);  
137 - createMessage.success('批量删除成功');  
138 - handleSuccess();  
139 - selectedRowKeys.length = 0;  
140 - } catch (e: any) {  
141 - selectedRowKeys.length = 0;  
142 - } finally {  
143 - selectedRowKeys.length = 0; 123 + const statusChange = async (checked, record) => {
  124 + setProps({
  125 + loading: true,
  126 + });
  127 + setSelectedRowKeys([]);
  128 + resetSelectedRowKeys();
  129 + const newStatus = checked ? 1 : 0;
  130 + const { createMessage } = useMessage();
  131 + try {
  132 + await setMessageConfigStatus(record.id, record.messageType, newStatus, record.tenantId);
  133 + if (newStatus) {
  134 + createMessage.success(`启用成功`);
  135 + } else {
  136 + createMessage.success('禁用成功');
144 } 137 }
  138 + } finally {
  139 + setProps({
  140 + loading: false,
  141 + });
  142 + reload();
145 } 143 }
146 }; 144 };
  145 +
147 return { 146 return {
148 registerTable, 147 registerTable,
149 registerDrawer, 148 registerDrawer,
@@ -151,9 +150,9 @@ @@ -151,9 +150,9 @@
151 handleCreate, 150 handleCreate,
152 handleEdit, 151 handleEdit,
153 handleSuccess, 152 handleSuccess,
154 - disabled,  
155 handleDeleteOrBatchDelete, 153 handleDeleteOrBatchDelete,
156 - useSelectionChange, 154 + hasBatchDelete,
  155 + statusChange,
157 }; 156 };
158 }, 157 },
159 }); 158 });
1 <template> 1 <template>
2 <div> 2 <div>
3 - <BasicTable  
4 - @selection-change="useSelectionChange"  
5 - :rowSelection="{ type: 'checkbox' }"  
6 - @register="registerTable"  
7 - :clickToRowSelect="false"  
8 - > 3 + <BasicTable @register="registerTable" :clickToRowSelect="false">
9 <template #toolbar> 4 <template #toolbar>
10 <a-button type="primary" @click="handleCreate"> 新增消息模板 </a-button> 5 <a-button type="primary" @click="handleCreate"> 新增消息模板 </a-button>
11 - <a-button color="error" @click="handleDeleteOrBatchDelete(null)" :disabled="disabled"> 6 + <a-button color="error" @click="handleDeleteOrBatchDelete(null)" :disabled="hasBatchDelete">
12 批量删除 7 批量删除
13 </a-button> 8 </a-button>
14 </template> 9 </template>
@@ -17,6 +12,15 @@ @@ -17,6 +12,15 @@
17 {{ record.messageConfig?.configName }} 12 {{ record.messageConfig?.configName }}
18 </a-button> 13 </a-button>
19 </template> 14 </template>
  15 + <template #status="{ record }">
  16 + <Switch
  17 + :checked="record.status === 1"
  18 + :loading="record.pendingStatus"
  19 + checkedChildren="启用"
  20 + unCheckedChildren="禁用"
  21 + @change="(checked:boolean)=>statusChange(checked,record)"
  22 + />
  23 + </template>
20 <template #action="{ record }"> 24 <template #action="{ record }">
21 <TableAction 25 <TableAction
22 :actions="[ 26 :actions="[
@@ -49,7 +53,7 @@ @@ -49,7 +53,7 @@
49 </div> 53 </div>
50 </template> 54 </template>
51 <script lang="ts"> 55 <script lang="ts">
52 - import { defineComponent, ref } from 'vue'; 56 + import { defineComponent } from 'vue';
53 import { BasicTable, TableAction, useTable } from '/@/components/Table'; 57 import { BasicTable, TableAction, useTable } from '/@/components/Table';
54 import { useDrawer } from '/@/components/Drawer'; 58 import { useDrawer } from '/@/components/Drawer';
55 import TemplateDrawer from './TemplateDrawer.vue'; 59 import TemplateDrawer from './TemplateDrawer.vue';
@@ -62,20 +66,32 @@ @@ -62,20 +66,32 @@
62 import { MessageEnum } from '/@/enums/messageEnum'; 66 import { MessageEnum } from '/@/enums/messageEnum';
63 import SendEmail from '/@/views/message/template/SendEmail.vue'; 67 import SendEmail from '/@/views/message/template/SendEmail.vue';
64 import { useMessage } from '/@/hooks/web/useMessage'; 68 import { useMessage } from '/@/hooks/web/useMessage';
  69 + import { useBatchDelete } from '/@/hooks/web/useBatchDelete';
  70 + import { Switch } from 'ant-design-vue';
  71 + import { setMessageTemplateStatus } from '/@/api/message/template';
65 72
66 export default defineComponent({ 73 export default defineComponent({
67 name: 'MessageTemplateManagement', 74 name: 'MessageTemplateManagement',
68 - components: { SendSms, SendEmail, BasicTable, TemplateDrawer, TableAction }, 75 + components: { SendSms, SendEmail, BasicTable, TemplateDrawer, TableAction, Switch },
69 setup() { 76 setup() {
70 - let selectedRowKeys: any = [];  
71 - const disabled = ref(true);  
72 - const { createMessage } = useMessage();  
73 const [registerModal, { openModal: openModal }] = useModal(); 77 const [registerModal, { openModal: openModal }] = useModal();
74 const [registerMailModal, { openModal: openMailModal }] = useModal(); 78 const [registerMailModal, { openModal: openMailModal }] = useModal();
75 const go = useGo(); 79 const go = useGo();
  80 + function handleSuccess() {
  81 + reload();
  82 + }
76 const [registerDrawer, { openDrawer }] = useDrawer(); 83 const [registerDrawer, { openDrawer }] = useDrawer();
77 -  
78 - const [registerTable, { reload, getSelectRows, getSelectRowKeys }] = useTable({ 84 + const { hasBatchDelete, handleDeleteOrBatchDelete, selectionOptions, resetSelectedRowKeys } =
  85 + useBatchDelete(deleteMessageTemplate, handleSuccess);
  86 + selectionOptions.rowSelection.getCheckboxProps = (record: Recordable) => {
  87 + // Demo:status为1的选择框禁用
  88 + if (record.status === 1) {
  89 + return { disabled: true };
  90 + } else {
  91 + return { disabled: false };
  92 + }
  93 + };
  94 + const [registerTable, { reload, setProps, setSelectedRowKeys }] = useTable({
79 title: '消息模板列表', 95 title: '消息模板列表',
80 api: messageTemplatePage, 96 api: messageTemplatePage,
81 columns, 97 columns,
@@ -83,7 +99,6 @@ @@ -83,7 +99,6 @@
83 labelWidth: 120, 99 labelWidth: 120,
84 schemas: searchFormSchema, 100 schemas: searchFormSchema,
85 }, 101 },
86 - rowKey: 'id',  
87 useSearchForm: true, 102 useSearchForm: true,
88 showTableSetting: true, 103 showTableSetting: true,
89 bordered: true, 104 bordered: true,
@@ -95,6 +110,7 @@ @@ -95,6 +110,7 @@
95 slots: { customRender: 'action' }, 110 slots: { customRender: 'action' },
96 fixed: 'right', 111 fixed: 'right',
97 }, 112 },
  113 + ...selectionOptions,
98 }); 114 });
99 115
100 function handleCreate() { 116 function handleCreate() {
@@ -130,46 +146,37 @@ @@ -130,46 +146,37 @@
130 }); 146 });
131 } 147 }
132 } 148 }
133 - function handleSuccess() {  
134 - reload();  
135 - } 149 +
136 function goConfig() { 150 function goConfig() {
137 go(PageEnum.MESSAGE_CONFIG); 151 go(PageEnum.MESSAGE_CONFIG);
138 } 152 }
139 - const useSelectionChange = () => {  
140 - selectedRowKeys = getSelectRowKeys();  
141 - if (selectedRowKeys.length > 0) {  
142 - disabled.value = false;  
143 - }  
144 - const isJudge = getSelectRows().map((m) => m.status);  
145 - if (isJudge.includes(1)) {  
146 - disabled.value = true;  
147 - } else {  
148 - disabled.value = false;  
149 - }  
150 - if (isJudge.length === 0) {  
151 - disabled.value = true;  
152 - }  
153 - };  
154 - // 删除或批量删除  
155 - const handleDeleteOrBatchDelete = async (record: Recordable | null) => {  
156 - if (record) {  
157 - try {  
158 - await deleteMessageTemplate([record.id]);  
159 - createMessage.success('删除成功');  
160 - handleSuccess();  
161 - } catch (e: any) {}  
162 - } else {  
163 - try {  
164 - await deleteMessageTemplate(selectedRowKeys);  
165 - createMessage.success('批量删除成功');  
166 - handleSuccess();  
167 - selectedRowKeys.length = 0;  
168 - } catch (e: any) {  
169 - selectedRowKeys.length = 0;  
170 - } finally {  
171 - selectedRowKeys.length = 0; 153 + const statusChange = async (checked, record) => {
  154 + setProps({
  155 + loading: true,
  156 + });
  157 + setSelectedRowKeys([]);
  158 + resetSelectedRowKeys();
  159 + const newStatus = checked ? 1 : 0;
  160 + const { createMessage } = useMessage();
  161 + try {
  162 + const { id, templatePurpose, messageType, tenantId } = record;
  163 + await setMessageTemplateStatus({
  164 + id,
  165 + templatePurpose,
  166 + messageType,
  167 + tenantId,
  168 + status: newStatus,
  169 + });
  170 + if (newStatus) {
  171 + createMessage.success(`启用成功`);
  172 + } else {
  173 + createMessage.success('禁用成功');
172 } 174 }
  175 + } finally {
  176 + setProps({
  177 + loading: false,
  178 + });
  179 + reload();
173 } 180 }
174 }; 181 };
175 return { 182 return {
@@ -182,9 +189,9 @@ @@ -182,9 +189,9 @@
182 handleSuccess, 189 handleSuccess,
183 handleModal, 190 handleModal,
184 goConfig, 191 goConfig,
185 - useSelectionChange,  
186 - disabled,  
187 handleDeleteOrBatchDelete, 192 handleDeleteOrBatchDelete,
  193 + statusChange,
  194 + hasBatchDelete,
188 }; 195 };
189 }, 196 },
190 }); 197 });
@@ -3,10 +3,6 @@ import { FormSchema } from '/@/components/Table'; @@ -3,10 +3,6 @@ import { FormSchema } from '/@/components/Table';
3 import { findDictItemByCode } from '/@/api/system/dict'; 3 import { findDictItemByCode } from '/@/api/system/dict';
4 import { findMessageConfig } from '/@/api/message/config'; 4 import { findMessageConfig } from '/@/api/message/config';
5 import { isMessage } from '/@/views/message/config/config.data'; 5 import { isMessage } from '/@/views/message/config/config.data';
6 -import { h } from 'vue';  
7 -import { Switch } from 'ant-design-vue';  
8 -import { useMessage } from '/@/hooks/web/useMessage';  
9 -import { setMessageTemplateStatus } from '/@/api/message/template';  
10 6
11 export const columns: BasicColumn[] = [ 7 export const columns: BasicColumn[] = [
12 { 8 {
@@ -44,37 +40,7 @@ export const columns: BasicColumn[] = [ @@ -44,37 +40,7 @@ export const columns: BasicColumn[] = [
44 title: '状态', 40 title: '状态',
45 dataIndex: 'status', 41 dataIndex: 'status',
46 width: 100, 42 width: 100,
47 - customRender: ({ record }) => {  
48 - if (!Reflect.has(record, 'pendingStatus')) {  
49 - record.pendingStatus = false;  
50 - }  
51 - return h(Switch, {  
52 - checked: record.status === 1,  
53 - checkedChildren: '已启用',  
54 - unCheckedChildren: '已禁用',  
55 - loading: record.pendingStatus,  
56 - onChange(checked: boolean) {  
57 - const { id, templatePurpose, messageType, tenantId } = record;  
58 - record.pendingStatus = true;  
59 - const newStatus = checked ? 1 : 0;  
60 - const { createMessage } = useMessage();  
61 - setMessageTemplateStatus({  
62 - id,  
63 - templatePurpose,  
64 - messageType,  
65 - tenantId,  
66 - status: newStatus,  
67 - })  
68 - .then(() => {  
69 - record.status = newStatus;  
70 - createMessage.success(`修改成功`);  
71 - })  
72 - .finally(() => {  
73 - record.pendingStatus = false;  
74 - });  
75 - },  
76 - });  
77 - }, 43 + slots: { customRender: 'status' },
78 }, 44 },
79 { 45 {
80 title: '模板用途', 46 title: '模板用途',
@@ -178,6 +178,7 @@ @@ -178,6 +178,7 @@
178 createMessage.success('流转配置启用成功'); 178 createMessage.success('流转配置启用成功');
179 setLoading(false); 179 setLoading(false);
180 reload(); 180 reload();
  181 + disabledStatus1.value = true;
181 } else { 182 } else {
182 createMessage.error('流转配置启用失败'); 183 createMessage.error('流转配置启用失败');
183 } 184 }
@@ -316,6 +317,7 @@ @@ -316,6 +317,7 @@
316 createMessage.success('流转配置多项启用成功'); 317 createMessage.success('流转配置多项启用成功');
317 setLoading(false); 318 setLoading(false);
318 reload(); 319 reload();
  320 + disabledStatus1.value = true;
319 } else { 321 } else {
320 createMessage.error('流转配置多项启用失败'); 322 createMessage.error('流转配置多项启用失败');
321 } 323 }