Commit d4825a8abd2e4b06f807c032ad84fb0add2c2f4a
Merge branch 'sqy_dev' into 'main'
'feat:统一为table组件添加批量删除,fix:找回之前覆盖代码,style:修改一些样式待完成' See merge request huang/yun-teng-iot-front!111
Showing
24 changed files
with
394 additions
and
283 deletions
... | ... | @@ -34,7 +34,7 @@ export const useBatchDelete = ( |
34 | 34 | if (record) { |
35 | 35 | try { |
36 | 36 | await deleteFn([record.id]); |
37 | - createMessage.success('删除联系人成功'); | |
37 | + createMessage.success('删除成功'); | |
38 | 38 | handleSuccess(); |
39 | 39 | } catch (e) { |
40 | 40 | createMessage.error('删除失败'); |
... | ... | @@ -42,11 +42,12 @@ export const useBatchDelete = ( |
42 | 42 | } else { |
43 | 43 | try { |
44 | 44 | await deleteFn(selectedRowIds.value); |
45 | - createMessage.success('批量删除联系人成功'); | |
45 | + createMessage.success('批量删除成功'); | |
46 | 46 | selectedRowIds.value = []; |
47 | 47 | handleSuccess(); |
48 | 48 | } catch (e) { |
49 | - createMessage.info('删除失败'); | |
49 | + createMessage.error('删除失败'); | |
50 | + selectedRowIds.value = []; | |
50 | 51 | } |
51 | 52 | } |
52 | 53 | }; | ... | ... |
... | ... | @@ -23,6 +23,7 @@ |
23 | 23 | import { getDeviceAlarm } from '/@/api/device/deviceManager'; |
24 | 24 | import { useDrawer } from '/@/components/Drawer'; |
25 | 25 | import AlarmDetailDrawer from './cpns/AlarmDetailDrawer.vue'; |
26 | + | |
26 | 27 | export default defineComponent({ |
27 | 28 | name: 'AlarmCenter', |
28 | 29 | components: { | ... | ... |
... | ... | @@ -3,27 +3,30 @@ import { FormSchema } from '/@/components/Form'; |
3 | 3 | import { BasicColumn } from '/@/components/Table'; |
4 | 4 | import { DeviceTypeEnum } from '/@/api/device/model/deviceModel'; |
5 | 5 | import { getCustomerList } from '/@/api/device/deviceManager'; |
6 | -import dayjs from 'moment'; | |
7 | -export const columns: BasicColumn[] = [ | |
6 | +import { DescItem } from '/@/components/Description/index'; | |
7 | +import moment from 'moment'; | |
8 | +// 设备详情的描述 | |
9 | +export const descSchema: DescItem[] = [ | |
8 | 10 | { |
9 | - title: '设备名称', | |
10 | - dataIndex: 'name', | |
11 | - width: 120, | |
11 | + field: 'createTime', | |
12 | + label: '创建时间', | |
12 | 13 | }, |
13 | 14 | { |
14 | - title: '设备标签', | |
15 | - dataIndex: 'label', | |
16 | - width: 100, | |
15 | + field: 'name', | |
16 | + label: '设备名称', | |
17 | 17 | }, |
18 | 18 | { |
19 | - title: '设备配置', | |
20 | - dataIndex: 'deviceProfile.name', | |
21 | - width: 160, | |
19 | + field: 'label', | |
20 | + label: '设备标签', | |
21 | + }, | |
22 | + { | |
23 | + field: 'deviceProfile.name', | |
24 | + label: '设备配置', | |
22 | 25 | }, |
23 | 26 | { |
24 | - title: '设备类型', | |
25 | - dataIndex: 'deviceType', | |
26 | - customRender({ text }) { | |
27 | + field: 'deviceType', | |
28 | + label: '设备类型', | |
29 | + render: (text) => { | |
27 | 30 | return text === DeviceTypeEnum.GATEWAY |
28 | 31 | ? '网关设备' |
29 | 32 | : text == DeviceTypeEnum.DIRECT_CONNECTION |
... | ... | @@ -32,11 +35,11 @@ export const columns: BasicColumn[] = [ |
32 | 35 | }, |
33 | 36 | }, |
34 | 37 | { |
35 | - title: '描述', | |
36 | - dataIndex: 'description', | |
37 | - width: 180, | |
38 | + field: 'description', | |
39 | + label: '描述', | |
38 | 40 | }, |
39 | 41 | ]; |
42 | + | |
40 | 43 | // 实时数据表格 |
41 | 44 | export const realTimeDataColumns: BasicColumn[] = [ |
42 | 45 | { |
... | ... | @@ -100,7 +103,7 @@ export const alarmSearchSchemas: FormSchema[] = [ |
100 | 103 | component: 'DatePicker', |
101 | 104 | componentProps: { |
102 | 105 | valueFormat: 'x', |
103 | - showTime: { defaultValue: dayjs('23:59:59', 'HH:mm:ss') }, | |
106 | + showTime: { defaultValue: moment('23:59:59', 'HH:mm:ss') }, | |
104 | 107 | }, |
105 | 108 | colProps: { span: 6 }, |
106 | 109 | }, |
... | ... | @@ -212,20 +215,25 @@ export const alarmSchemasForm: FormSchema[] = [ |
212 | 215 | }, |
213 | 216 | }, |
214 | 217 | ]; |
215 | - | |
216 | 218 | // 子设备 |
217 | 219 | export const childDeviceSchemas: FormSchema[] = [ |
218 | 220 | { |
219 | - field: 'icon', | |
220 | - label: '设备配置', | |
221 | - component: 'Select', | |
221 | + field: 'deviceState', | |
222 | + label: '设备状态', | |
222 | 223 | colProps: { span: 6 }, |
224 | + component: 'Select', | |
223 | 225 | componentProps: { |
226 | + size: 'small', | |
224 | 227 | maxLength: 255, |
228 | + options: [ | |
229 | + { label: '待激活', value: 'INACTIVE' }, | |
230 | + { label: '在线', value: 'ONLINE' }, | |
231 | + { label: '离线', value: 'OFFLINE' }, | |
232 | + ], | |
225 | 233 | }, |
226 | 234 | }, |
227 | 235 | { |
228 | - field: 'icon', | |
236 | + field: 'name', | |
229 | 237 | label: '设备名称', |
230 | 238 | component: 'Input', |
231 | 239 | colProps: { span: 6 }, |
... | ... | @@ -238,32 +246,30 @@ export const childDeviceSchemas: FormSchema[] = [ |
238 | 246 | export const childDeviceColumns: BasicColumn[] = [ |
239 | 247 | { |
240 | 248 | title: '名称', |
241 | - dataIndex: 'name', | |
249 | + dataIndex: 'tbDeviceName', | |
242 | 250 | width: 120, |
243 | 251 | }, |
244 | 252 | { |
245 | - title: '设备配置', | |
246 | - dataIndex: 'label', | |
247 | - width: 100, | |
248 | - }, | |
249 | - { | |
250 | 253 | title: '标签', |
251 | - dataIndex: 'aaa', | |
254 | + dataIndex: 'label', | |
252 | 255 | width: 160, |
253 | 256 | }, |
254 | 257 | { |
255 | 258 | title: '状态', |
256 | - dataIndex: 'bbb', | |
259 | + dataIndex: 'deviceState', | |
260 | + slots: { customRender: 'deviceState' }, | |
257 | 261 | width: 160, |
258 | 262 | }, |
259 | 263 | { |
260 | 264 | title: '最后连接时间', |
261 | - dataIndex: 'ccc', | |
265 | + dataIndex: 'lastOnlineTime', | |
266 | + format: (text) => formatToDateTime(text, 'YYYY-MM-DD HH:mm:ss'), | |
262 | 267 | width: 160, |
263 | 268 | }, |
264 | 269 | { |
265 | - title: '创建时间', | |
266 | - dataIndex: 'ddd', | |
270 | + title: '更新时间', | |
271 | + dataIndex: 'createdTime', | |
272 | + format: (text) => formatToDateTime(text, 'YYYY-MM-DD HH:mm:ss'), | |
267 | 273 | width: 160, |
268 | 274 | }, |
269 | 275 | ]; | ... | ... |
... | ... | @@ -3,22 +3,22 @@ |
3 | 3 | v-bind="$attrs" |
4 | 4 | isDetail |
5 | 5 | @register="register" |
6 | - :destroyOnClose="true" | |
6 | + destroyOnClose | |
7 | 7 | @close="closeDrawer" |
8 | 8 | :title="deviceDetail.name" |
9 | - width="70%" | |
9 | + width="80%" | |
10 | 10 | > |
11 | - <Tabs v-model:activeKey="activeKey" :size="size" type="card"> | |
12 | - <TabPane key="1" tab="详情" | |
13 | - ><Detail ref="deviceDetailRef" :deviceDetail="deviceDetail" | |
14 | - /></TabPane> | |
15 | - <TabPane key="2" tab="实时数据" v-if="deviceDetail?.deviceType !== 'GATEWAY'" | |
16 | - ><RealTimeData :deviceDetail="deviceDetail" | |
17 | - /></TabPane> | |
11 | + <Tabs v-model:activeKey="activeKey" :size="size"> | |
12 | + <TabPane key="1" tab="详情"> | |
13 | + <Detail ref="deviceDetailRef" :deviceDetail="deviceDetail" /> | |
14 | + </TabPane> | |
15 | + <TabPane key="2" tab="实时数据" v-if="deviceDetail?.deviceType !== 'GATEWAY'"> | |
16 | + <RealTimeData :deviceDetail="deviceDetail" /> | |
17 | + </TabPane> | |
18 | 18 | <TabPane key="3" tab="告警"><Alarm :id="deviceDetail.id" /></TabPane> |
19 | - <TabPane key="4" tab="子设备" v-if="deviceDetail?.deviceType === 'GATEWAY'" | |
20 | - ><ChildDevice | |
21 | - /></TabPane> | |
19 | + <TabPane key="4" tab="子设备" v-if="deviceDetail?.deviceType === 'GATEWAY'"> | |
20 | + <ChildDevice :fromId="deviceDetail?.tbDeviceId" /> | |
21 | + </TabPane> | |
22 | 22 | </Tabs> |
23 | 23 | </BasicDrawer> |
24 | 24 | </template> | ... | ... |
... | ... | @@ -10,9 +10,9 @@ |
10 | 10 | centered |
11 | 11 | > |
12 | 12 | <div class="step-form-form"> |
13 | - <Steps :current="current"> | |
14 | - <Step title="填写设备信息" v-if="!isUpdate" /> | |
15 | - <Step title="添加设备凭证" v-if="!isUpdate" /> | |
13 | + <Steps :current="current" v-if="!isUpdate"> | |
14 | + <Step title="填写设备信息" /> | |
15 | + <Step title="添加设备凭证" /> | |
16 | 16 | </Steps> |
17 | 17 | </div> |
18 | 18 | <div class="mt-5"> | ... | ... |
1 | 1 | <template> |
2 | - <div> | |
2 | + <div style="background-color: #f0f2f5"> | |
3 | 3 | <BasicTable @register="registerTable"> |
4 | 4 | <template #action="{ record }"> |
5 | 5 | <TableAction |
... | ... | @@ -40,13 +40,12 @@ |
40 | 40 | const [registerTable, { reload }] = useTable({ |
41 | 41 | api: getDeviceAlarm, |
42 | 42 | columns: alarmColumns, |
43 | + useSearchForm: true, | |
43 | 44 | formConfig: { |
44 | 45 | labelWidth: 120, |
45 | 46 | schemas: alarmSearchSchemas, |
46 | 47 | }, |
47 | 48 | showTableSetting: true, |
48 | - | |
49 | - useSearchForm: true, | |
50 | 49 | bordered: true, |
51 | 50 | showIndexColumn: false, |
52 | 51 | beforeFetch: (data) => { | ... | ... |
1 | 1 | <template> |
2 | - <BasicTable @register="registerTable" /> | |
2 | + <div style="background-color: #f0f2f5"> | |
3 | + <BasicTable @register="registerTable"> | |
4 | + <template #deviceState="{ record }"> | |
5 | + <Tag | |
6 | + :color=" | |
7 | + record.deviceState == DeviceState.INACTIVE | |
8 | + ? 'warning' | |
9 | + : record.deviceState == DeviceState.ONLINE | |
10 | + ? 'success' | |
11 | + : 'error' | |
12 | + " | |
13 | + class="ml-2" | |
14 | + > | |
15 | + {{ | |
16 | + record.deviceState == DeviceState.INACTIVE | |
17 | + ? '待激活' | |
18 | + : record.deviceState == DeviceState.ONLINE | |
19 | + ? '在线' | |
20 | + : '离线' | |
21 | + }} | |
22 | + </Tag> | |
23 | + </template> | |
24 | + </BasicTable> | |
25 | + </div> | |
3 | 26 | </template> |
4 | 27 | <script lang="ts"> |
5 | - import { defineComponent } from 'vue'; | |
28 | + import { defineComponent, onMounted } from 'vue'; | |
29 | + import { Tag } from 'ant-design-vue'; | |
30 | + import { DeviceState } from '/@/api/device/model/deviceModel'; | |
6 | 31 | import { BasicTable, useTable } from '/@/components/Table'; |
7 | 32 | import { childDeviceColumns, childDeviceSchemas } from '../../config/detail.config'; |
8 | - | |
33 | + import { getChildDevicePage } from '/@/api/device/deviceManager.ts'; | |
9 | 34 | export default defineComponent({ |
10 | 35 | name: 'DeviceManagement', |
11 | 36 | components: { |
12 | 37 | BasicTable, |
38 | + Tag, | |
39 | + }, | |
40 | + props: { | |
41 | + fromId: { | |
42 | + type: String, | |
43 | + required: true, | |
44 | + }, | |
13 | 45 | }, |
14 | - setup(_) { | |
46 | + setup(props) { | |
47 | + console.log(123); | |
48 | + onMounted(() => { | |
49 | + console.log(props.fromId); | |
50 | + }); | |
15 | 51 | const [registerTable] = useTable({ |
52 | + api: getChildDevicePage, | |
16 | 53 | columns: childDeviceColumns, |
17 | 54 | formConfig: { |
18 | 55 | labelWidth: 120, |
19 | 56 | schemas: childDeviceSchemas, |
20 | 57 | }, |
58 | + beforeFetch: (data) => { | |
59 | + console.log(props.fromId); | |
60 | + Reflect.set(data, 'fromId', props.fromId); | |
61 | + }, | |
21 | 62 | useSearchForm: true, |
22 | 63 | showTableSetting: true, |
23 | 64 | bordered: true, |
... | ... | @@ -26,6 +67,7 @@ |
26 | 67 | |
27 | 68 | return { |
28 | 69 | registerTable, |
70 | + DeviceState, | |
29 | 71 | }; |
30 | 72 | }, |
31 | 73 | }); | ... | ... |
... | ... | @@ -6,14 +6,7 @@ |
6 | 6 | </div> |
7 | 7 | <div> |
8 | 8 | <p>设备信息</p> |
9 | - <Table | |
10 | - bordered | |
11 | - :columns="columns" | |
12 | - :data-source="[deviceDetail]" | |
13 | - :rowKey="(_, index) => index" | |
14 | - :pagination="false" | |
15 | - style="width: 800px" | |
16 | - /> | |
9 | + <Description @register="register" class="mt-4" :data="deviceDetail" /> | |
17 | 10 | </div> |
18 | 11 | <div class="mt-4"> |
19 | 12 | <a-button type="primary" class="mr-4" @click="copyTbDeviceId">复制设备ID</a-button> |
... | ... | @@ -23,14 +16,14 @@ |
23 | 16 | </div> |
24 | 17 | <div v-if="deviceDetail?.deviceInfo?.address" class="mt-4"> |
25 | 18 | <p>设备位置</p> |
26 | - <div ref="wrapRef" style="height: 400px; width: 100%"></div> | |
19 | + <div ref="wrapRef" style="height: 550px; width: 100%"></div> | |
27 | 20 | </div> |
28 | 21 | </div> |
29 | 22 | </template> |
30 | 23 | <script lang="ts"> |
31 | 24 | import { defineComponent, ref, unref, nextTick } from 'vue'; |
32 | - import { Image, Table } from 'ant-design-vue'; | |
33 | - import { columns } from '../../config/detail.config'; | |
25 | + import { Image } from 'ant-design-vue'; | |
26 | + import { descSchema } from '../../config/detail.config'; | |
34 | 27 | import { useScript } from '/@/hooks/web/useScript'; |
35 | 28 | import { useCopyToClipboard } from '/@/hooks/web/useCopyToClipboard'; |
36 | 29 | import { useMessage } from '/@/hooks/web/useMessage'; |
... | ... | @@ -38,10 +31,13 @@ |
38 | 31 | import { useModal } from '/@/components/Modal'; |
39 | 32 | import ManageDeviceTokenModal from '../modal/ManageDeviceTokenModal.vue'; |
40 | 33 | import { getDeviceToken } from '/@/api/device/deviceManager'; |
34 | + import { Description, useDescription } from '/@/components/Description'; | |
35 | + import wz from '/@/assets/images/wz.png'; | |
36 | + | |
41 | 37 | export default defineComponent({ |
42 | 38 | components: { |
43 | 39 | Image, |
44 | - Table, | |
40 | + Description, | |
45 | 41 | ManageDeviceTokenModal, |
46 | 42 | }, |
47 | 43 | props: { |
... | ... | @@ -51,6 +47,13 @@ |
51 | 47 | }, |
52 | 48 | }, |
53 | 49 | setup(props) { |
50 | + console.log(props.deviceDetail); | |
51 | + const [register] = useDescription({ | |
52 | + layout: 'vertical', | |
53 | + schema: descSchema, | |
54 | + column: 2, | |
55 | + }); | |
56 | + | |
54 | 57 | // 地图 |
55 | 58 | const wrapRef = ref<HTMLDivElement | null>(null); |
56 | 59 | const { toPromise } = useScript({ src: BAI_DU_MAP_URL }); |
... | ... | @@ -62,7 +65,7 @@ |
62 | 65 | const BMap = (window as any).BMap; |
63 | 66 | if (!wrapEl) return; |
64 | 67 | const map = new BMap.Map(wrapEl); |
65 | - let myIcon = new BMap.Icon('/src/assets/images/wz.png', new BMap.Size(20, 30)); | |
68 | + let myIcon = new BMap.Icon(wz, new BMap.Size(20, 30)); | |
66 | 69 | |
67 | 70 | const point = new BMap.Point(Number(longitude), Number(latitude)); |
68 | 71 | var content = `我在 ${address}`; |
... | ... | @@ -107,13 +110,13 @@ |
107 | 110 | }; |
108 | 111 | |
109 | 112 | return { |
110 | - columns, | |
111 | 113 | wrapRef, |
112 | 114 | copyTbDeviceId, |
113 | 115 | copyDeviceToken, |
114 | 116 | initMap, |
115 | 117 | manageDeviceToken, |
116 | 118 | registerModal, |
119 | + register, | |
117 | 120 | }; |
118 | 121 | }, |
119 | 122 | }); | ... | ... |
1 | 1 | <template> |
2 | - <BasicTable @register="registerTable" /> | |
2 | + <div style="background-color: #f0f2f5"> | |
3 | + <BasicTable @register="registerTable" /> | |
4 | + </div> | |
3 | 5 | </template> |
4 | 6 | <script lang="ts"> |
5 | 7 | import { defineComponent, reactive } from 'vue'; |
... | ... | @@ -52,6 +54,21 @@ |
52 | 54 | bordered: true, |
53 | 55 | showIndexColumn: false, |
54 | 56 | dataSource: state.recordList, |
57 | + useSearchForm: true, | |
58 | + formConfig: { | |
59 | + labelWidth: 120, | |
60 | + schemas: [ | |
61 | + { | |
62 | + field: 'icon', | |
63 | + label: '设备配置', | |
64 | + component: 'Select', | |
65 | + colProps: { span: 6 }, | |
66 | + componentProps: { | |
67 | + maxLength: 255, | |
68 | + }, | |
69 | + }, | |
70 | + ], | |
71 | + }, | |
55 | 72 | }); |
56 | 73 | |
57 | 74 | const { send, close } = useWebSocket(state.server, { | ... | ... |
... | ... | @@ -9,6 +9,14 @@ |
9 | 9 | <BasicTable @register="registerTable" class="w-5/6 xl:w-4/5"> |
10 | 10 | <template #toolbar> |
11 | 11 | <a-button type="primary" @click="handleCreate" v-if="authBtn(role)"> 新增设备 </a-button> |
12 | + <a-button | |
13 | + color="error" | |
14 | + v-if="authBtn(role)" | |
15 | + @click="handleDeleteOrBatchDelete(null)" | |
16 | + :disabled="hasBatchDelete" | |
17 | + > | |
18 | + 批量删除 | |
19 | + </a-button> | |
12 | 20 | </template> |
13 | 21 | <template #deviceProfile="{ record }"> |
14 | 22 | <a-button type="link" class="ml-2" @click="goDeviceProfile(record.deviceProfile.name)"> |
... | ... | @@ -85,7 +93,7 @@ |
85 | 93 | color: 'error', |
86 | 94 | popConfirm: { |
87 | 95 | title: '是否确认删除', |
88 | - confirm: handleDelete.bind(null, record), | |
96 | + confirm: handleDeleteOrBatchDelete.bind(null, record), | |
89 | 97 | }, |
90 | 98 | }, |
91 | 99 | ]" |
... | ... | @@ -104,7 +112,6 @@ |
104 | 112 | import { BasicTable, useTable, TableAction } from '/@/components/Table'; |
105 | 113 | import { columns, searchFormSchema } from './config/device.data'; |
106 | 114 | import { Tag } from 'ant-design-vue'; |
107 | - import { useMessage } from '/@/hooks/web/useMessage'; | |
108 | 115 | import { |
109 | 116 | deleteDevice, |
110 | 117 | devicePage, |
... | ... | @@ -125,6 +132,8 @@ |
125 | 132 | import { USER_INFO_KEY } from '/@/enums/cacheEnum'; |
126 | 133 | import { getAuthCache } from '/@/utils/auth'; |
127 | 134 | import { authBtn } from '/@/enums/roleEnum'; |
135 | + import { useBatchDelete } from '/@/hooks/web/useBatchDelete'; | |
136 | + | |
128 | 137 | export default defineComponent({ |
129 | 138 | name: 'DeviceManagement', |
130 | 139 | components: { |
... | ... | @@ -138,9 +147,11 @@ |
138 | 147 | CustomerModal, |
139 | 148 | }, |
140 | 149 | setup(_) { |
141 | - const { createMessage } = useMessage(); | |
142 | 150 | const go = useGo(); |
143 | - | |
151 | + const { hasBatchDelete, handleDeleteOrBatchDelete, selectionOptions } = useBatchDelete( | |
152 | + deleteDevice, | |
153 | + handleSuccess | |
154 | + ); | |
144 | 155 | const searchInfo = reactive<Recordable>({}); |
145 | 156 | const { organizationIdTreeRef, resetFn } = useResetOrganizationTree(searchInfo); |
146 | 157 | const [registerModal, { openModal }] = useModal(); |
... | ... | @@ -166,6 +177,7 @@ |
166 | 177 | slots: { customRender: 'action' }, |
167 | 178 | fixed: 'right', |
168 | 179 | }, |
180 | + ...selectionOptions, | |
169 | 181 | }); |
170 | 182 | |
171 | 183 | const userInfo: any = getAuthCache(USER_INFO_KEY); |
... | ... | @@ -206,14 +218,6 @@ |
206 | 218 | }); |
207 | 219 | } |
208 | 220 | |
209 | - function handleDelete(record: Recordable) { | |
210 | - let ids = [record.id]; | |
211 | - deleteDevice(ids).then(() => { | |
212 | - createMessage.success('删除设备成功'); | |
213 | - handleSuccess(); | |
214 | - }); | |
215 | - } | |
216 | - | |
217 | 221 | function handleSuccess() { |
218 | 222 | reload(); |
219 | 223 | } |
... | ... | @@ -230,7 +234,6 @@ |
230 | 234 | handleCreate, |
231 | 235 | handleDetail, |
232 | 236 | handleEdit, |
233 | - handleDelete, | |
234 | 237 | handleSuccess, |
235 | 238 | goDeviceProfile, |
236 | 239 | handleSelect, |
... | ... | @@ -245,6 +248,8 @@ |
245 | 248 | registerCustomerModal, |
246 | 249 | authBtn, |
247 | 250 | role, |
251 | + handleDeleteOrBatchDelete, | |
252 | + hasBatchDelete, | |
248 | 253 | }; |
249 | 254 | }, |
250 | 255 | }); | ... | ... |
... | ... | @@ -3,6 +3,9 @@ |
3 | 3 | <BasicTable @register="registerTable"> |
4 | 4 | <template #toolbar> |
5 | 5 | <a-button type="primary" @click="handleCreate"> 新增消息配置 </a-button> |
6 | + <a-button color="error" @click="handleDeleteOrBatchDelete(null)" :disabled="hasBatchDelete"> | |
7 | + 批量删除 | |
8 | + </a-button> | |
6 | 9 | </template> |
7 | 10 | <template #config="{ record }"> |
8 | 11 | <a-button type="link" class="ml-2" @click="showData(record)"> 查看配置 </a-button> |
... | ... | @@ -21,7 +24,7 @@ |
21 | 24 | color: 'error', |
22 | 25 | popConfirm: { |
23 | 26 | title: '是否确认删除', |
24 | - confirm: handleDelete.bind(null, record), | |
27 | + confirm: handleDeleteOrBatchDelete.bind(null, record), | |
25 | 28 | }, |
26 | 29 | ifShow: record.status == 0, |
27 | 30 | }, |
... | ... | @@ -42,13 +45,16 @@ |
42 | 45 | import { columns, searchFormSchema } from './config.data'; |
43 | 46 | import { Modal } from 'ant-design-vue'; |
44 | 47 | import { JsonPreview } from '/@/components/CodeEditor'; |
45 | - import { useMessage } from '/@/hooks/web/useMessage'; | |
48 | + import { useBatchDelete } from '/@/hooks/web/useBatchDelete'; | |
46 | 49 | export default defineComponent({ |
47 | 50 | name: 'MessageConfigManagement', |
48 | 51 | components: { BasicTable, ConfigDrawer, TableAction }, |
49 | 52 | setup() { |
50 | 53 | const [registerDrawer, { openDrawer }] = useDrawer(); |
51 | - const { createMessage } = useMessage(); | |
54 | + const { hasBatchDelete, handleDeleteOrBatchDelete, selectionOptions } = useBatchDelete( | |
55 | + deleteMessageConfig, | |
56 | + handleSuccess | |
57 | + ); | |
52 | 58 | const [registerTable, { reload }] = useTable({ |
53 | 59 | title: '消息配置列表', |
54 | 60 | api: messageConfigPage, |
... | ... | @@ -68,6 +74,7 @@ |
68 | 74 | slots: { customRender: 'action' }, |
69 | 75 | fixed: 'right', |
70 | 76 | }, |
77 | + ...selectionOptions, | |
71 | 78 | }); |
72 | 79 | |
73 | 80 | function handleCreate() { |
... | ... | @@ -83,14 +90,6 @@ |
83 | 90 | }); |
84 | 91 | } |
85 | 92 | |
86 | - function handleDelete(record: Recordable) { | |
87 | - let ids = [record.id]; | |
88 | - deleteMessageConfig(ids).then((result) => { | |
89 | - createMessage.success(result.message); | |
90 | - handleSuccess(); | |
91 | - }); | |
92 | - } | |
93 | - | |
94 | 93 | function handleSuccess() { |
95 | 94 | reload(); |
96 | 95 | } |
... | ... | @@ -107,8 +106,9 @@ |
107 | 106 | showData, |
108 | 107 | handleCreate, |
109 | 108 | handleEdit, |
110 | - handleDelete, | |
111 | 109 | handleSuccess, |
110 | + hasBatchDelete, | |
111 | + handleDeleteOrBatchDelete, | |
112 | 112 | }; |
113 | 113 | }, |
114 | 114 | }); | ... | ... |
... | ... | @@ -3,6 +3,9 @@ |
3 | 3 | <BasicTable @register="registerTable"> |
4 | 4 | <template #toolbar> |
5 | 5 | <a-button type="primary" @click="handleCreate"> 新增消息模板 </a-button> |
6 | + <a-button color="error" @click="handleDeleteOrBatchDelete(null)" :disabled="hasBatchDelete"> | |
7 | + 批量删除 | |
8 | + </a-button> | |
6 | 9 | </template> |
7 | 10 | <template #config="{ record }"> |
8 | 11 | <a-button type="link" class="ml-2" @click="goConfig"> |
... | ... | @@ -28,7 +31,7 @@ |
28 | 31 | color: 'error', |
29 | 32 | popConfirm: { |
30 | 33 | title: '是否确认删除', |
31 | - confirm: handleDelete.bind(null, record), | |
34 | + confirm: handleDeleteOrBatchDelete.bind(null, record), | |
32 | 35 | }, |
33 | 36 | }, |
34 | 37 | ]" |
... | ... | @@ -47,7 +50,6 @@ |
47 | 50 | import { useDrawer } from '/@/components/Drawer'; |
48 | 51 | import TemplateDrawer from './TemplateDrawer.vue'; |
49 | 52 | import { columns, searchFormSchema } from './template.data'; |
50 | - import { useMessage } from '/@/hooks/web/useMessage'; | |
51 | 53 | import { deleteMessageTemplate, messageTemplatePage } from '/@/api/message/template'; |
52 | 54 | import { useGo } from '/@/hooks/web/usePage'; |
53 | 55 | import { PageEnum } from '/@/enums/pageEnum'; |
... | ... | @@ -55,6 +57,7 @@ |
55 | 57 | import SendSms from '/@/views/message/template/SendSms.vue'; |
56 | 58 | import { MessageEnum } from '/@/enums/messageEnum'; |
57 | 59 | import SendEmail from '/@/views/message/template/SendEmail.vue'; |
60 | + import { useBatchDelete } from '/@/hooks/web/useBatchDelete'; | |
58 | 61 | |
59 | 62 | export default defineComponent({ |
60 | 63 | name: 'MessageTemplateManagement', |
... | ... | @@ -64,7 +67,10 @@ |
64 | 67 | const [registerMailModal, { openModal: openMailModal }] = useModal(); |
65 | 68 | const go = useGo(); |
66 | 69 | const [registerDrawer, { openDrawer }] = useDrawer(); |
67 | - const { createMessage } = useMessage(); | |
70 | + const { hasBatchDelete, handleDeleteOrBatchDelete, selectionOptions } = useBatchDelete( | |
71 | + deleteMessageTemplate, | |
72 | + handleSuccess | |
73 | + ); | |
68 | 74 | const [registerTable, { reload }] = useTable({ |
69 | 75 | title: '消息模板列表', |
70 | 76 | api: messageTemplatePage, |
... | ... | @@ -84,6 +90,7 @@ |
84 | 90 | slots: { customRender: 'action' }, |
85 | 91 | fixed: 'right', |
86 | 92 | }, |
93 | + ...selectionOptions, | |
87 | 94 | }); |
88 | 95 | |
89 | 96 | function handleCreate() { |
... | ... | @@ -119,15 +126,6 @@ |
119 | 126 | }); |
120 | 127 | } |
121 | 128 | } |
122 | - | |
123 | - function handleDelete(record: Recordable) { | |
124 | - let ids = [record.id]; | |
125 | - deleteMessageTemplate(ids).then((result) => { | |
126 | - createMessage.success(result.message); | |
127 | - handleSuccess(); | |
128 | - }); | |
129 | - } | |
130 | - | |
131 | 129 | function handleSuccess() { |
132 | 130 | reload(); |
133 | 131 | } |
... | ... | @@ -141,10 +139,11 @@ |
141 | 139 | registerMailModal, |
142 | 140 | handleCreate, |
143 | 141 | handleEdit, |
144 | - handleDelete, | |
145 | 142 | handleSuccess, |
146 | 143 | handleModal, |
147 | 144 | goConfig, |
145 | + hasBatchDelete, | |
146 | + handleDeleteOrBatchDelete, | |
148 | 147 | }; |
149 | 148 | }, |
150 | 149 | }); | ... | ... |
... | ... | @@ -7,12 +7,8 @@ |
7 | 7 | > |
8 | 8 | <template #toolbar> |
9 | 9 | <a-button type="primary" @click="handleAdd"> 新增场景联动 </a-button> |
10 | - <a-button | |
11 | - style="background-color: rgba(237, 111, 111, 1)" | |
12 | - type="default" | |
13 | - @click="handleToolbarDel" | |
14 | - > | |
15 | - <span style="color: white">删除</span> | |
10 | + <a-button color="error" @click="handleDeleteOrBatchDelete(null)" :disabled="hasBatchDelete"> | |
11 | + 批量删除 | |
16 | 12 | </a-button> |
17 | 13 | </template> |
18 | 14 | <template #action="{ record }"> |
... | ... | @@ -29,7 +25,7 @@ |
29 | 25 | color: 'error', |
30 | 26 | popConfirm: { |
31 | 27 | title: '是否确认删除', |
32 | - confirm: handleDelete.bind(null, record), | |
28 | + confirm: handleDeleteOrBatchDelete.bind(null, record), | |
33 | 29 | }, |
34 | 30 | }, |
35 | 31 | ]" |
... | ... | @@ -52,6 +48,7 @@ |
52 | 48 | import { columns, searchFormSchema } from './config'; |
53 | 49 | import { useMessage } from '/@/hooks/web/useMessage'; |
54 | 50 | import { screenLinkPageGetApi, screenLinkPageDeleteApi } from '/@/api/ruleengine/ruleengineApi'; |
51 | + import { useBatchDelete } from '/@/hooks/web/useBatchDelete'; | |
55 | 52 | |
56 | 53 | export default defineComponent({ |
57 | 54 | name: 'Index', |
... | ... | @@ -60,20 +57,22 @@ |
60 | 57 | setup() { |
61 | 58 | const { proxy } = getCurrentInstance(); |
62 | 59 | const sceneLinkAgeDrawerRef: any = ref(null); |
60 | + const { hasBatchDelete, handleDeleteOrBatchDelete, selectionOptions } = useBatchDelete( | |
61 | + screenLinkPageDeleteApi, | |
62 | + handleSuccess | |
63 | + ); | |
63 | 64 | let selectedRowKeys: Array<string> = []; |
64 | 65 | let echoEditData = reactive({}); |
65 | 66 | const [registerDrawer, { openDrawer }] = useDrawer(); |
66 | 67 | const { createMessage } = useMessage(); |
67 | 68 | const [registerTable, { reload, getSelectRowKeys }] = useTable({ |
68 | 69 | title: '场景联动列表', |
69 | - clickToRowSelect: false, | |
70 | 70 | api: screenLinkPageGetApi, |
71 | 71 | columns, |
72 | 72 | formConfig: { |
73 | 73 | labelWidth: 120, |
74 | 74 | schemas: searchFormSchema, |
75 | 75 | }, |
76 | - rowKey: 'id', | |
77 | 76 | useSearchForm: true, |
78 | 77 | showTableSetting: true, |
79 | 78 | bordered: true, |
... | ... | @@ -85,6 +84,7 @@ |
85 | 84 | slots: { customRender: 'action' }, |
86 | 85 | fixed: 'right', |
87 | 86 | }, |
87 | + ...selectionOptions, | |
88 | 88 | }); |
89 | 89 | |
90 | 90 | function handleAdd() { |
... | ... | @@ -146,6 +146,8 @@ |
146 | 146 | handleEdit, |
147 | 147 | handleDelete, |
148 | 148 | handleSuccess, |
149 | + hasBatchDelete, | |
150 | + handleDeleteOrBatchDelete, | |
149 | 151 | }; |
150 | 152 | }, |
151 | 153 | }); | ... | ... |
... | ... | @@ -3,7 +3,7 @@ |
3 | 3 | <BasicTable @register="registerTable"> |
4 | 4 | <template #toolbar> |
5 | 5 | <a-button type="primary" @click="handleAdd">新增通知</a-button> |
6 | - <a-button color="error" @click="handleToolbarDel" :disabled="hasBatchDelete"> | |
6 | + <a-button color="error" @click="handleDeleteOrBatchDelete(null)" :disabled="hasBatchDelete"> | |
7 | 7 | 批量删除 |
8 | 8 | </a-button> |
9 | 9 | </template> |
... | ... | @@ -32,7 +32,7 @@ |
32 | 32 | color: 'error', |
33 | 33 | popConfirm: { |
34 | 34 | title: '是否确认删除', |
35 | - confirm: handleDelete.bind(null, record), | |
35 | + confirm: handleDeleteOrBatchDelete.bind(null, record), | |
36 | 36 | }, |
37 | 37 | }, |
38 | 38 | ]" |
... | ... | @@ -44,14 +44,14 @@ |
44 | 44 | </div> |
45 | 45 | </template> |
46 | 46 | <script lang="ts"> |
47 | - import { defineComponent, computed, unref, ref } from 'vue'; | |
47 | + import { defineComponent } from 'vue'; | |
48 | 48 | import { BasicTable, useTable, TableAction } from '/@/components/Table'; |
49 | 49 | import { useDrawer } from '/@/components/Drawer'; |
50 | 50 | import NotifyManagerDrawer from './useDrawer.vue'; |
51 | 51 | import tableViewChild from './viewDetailDrawer.vue'; |
52 | 52 | import { columns, searchFormSchema } from './config.d'; |
53 | - import { useMessage } from '/@/hooks/web/useMessage'; | |
54 | 53 | import { notifyGetTableApi, notifyDeleteApi } from '/@/api/stationnotification/stationnotifyApi'; |
54 | + import { useBatchDelete } from '/@/hooks/web/useBatchDelete'; | |
55 | 55 | |
56 | 56 | export default defineComponent({ |
57 | 57 | name: 'Notificationmannager', |
... | ... | @@ -59,34 +59,19 @@ |
59 | 59 | setup() { |
60 | 60 | const [registerDrawer, { openDrawer }] = useDrawer(); |
61 | 61 | const [registerAdd, { openDrawer: openDrawerAdd }] = useDrawer(); |
62 | - const { createMessage } = useMessage(); | |
63 | - // 批量删除 | |
64 | - const selectedRowIds = ref<string[]>([]); | |
65 | - const hasBatchDelete = computed(() => unref(selectedRowIds).length <= 0); | |
66 | - const onSelectRowChange = (selectedRowKeys: string[]) => { | |
67 | - selectedRowIds.value = selectedRowKeys; | |
68 | - console.log(selectedRowKeys); | |
69 | - }; | |
70 | - async function handleToolbarDel() { | |
71 | - await notifyDeleteApi(selectedRowIds.value); | |
72 | - createMessage.success('批量删除成功'); | |
73 | - selectedRowIds.value = []; | |
74 | - reload(); | |
75 | - } | |
76 | 62 | |
63 | + // 批量删除 | |
64 | + const { hasBatchDelete, handleDeleteOrBatchDelete, selectionOptions } = useBatchDelete( | |
65 | + notifyDeleteApi, | |
66 | + handleSuccess | |
67 | + ); | |
77 | 68 | const [registerTable, { reload }] = useTable({ |
78 | - clickToRowSelect: false, | |
79 | 69 | api: notifyGetTableApi, |
80 | 70 | columns, |
81 | 71 | formConfig: { |
82 | 72 | labelWidth: 120, |
83 | 73 | schemas: searchFormSchema, |
84 | 74 | }, |
85 | - rowSelection: { | |
86 | - onChange: onSelectRowChange, | |
87 | - type: 'checkbox', | |
88 | - }, | |
89 | - rowKey: 'id', | |
90 | 75 | useSearchForm: true, |
91 | 76 | showTableSetting: true, |
92 | 77 | bordered: true, |
... | ... | @@ -98,6 +83,7 @@ |
98 | 83 | slots: { customRender: 'action' }, |
99 | 84 | fixed: 'right', |
100 | 85 | }, |
86 | + ...selectionOptions, | |
101 | 87 | }); |
102 | 88 | |
103 | 89 | function handleAdd() { |
... | ... | @@ -117,12 +103,6 @@ |
117 | 103 | isUpdate: true, |
118 | 104 | }); |
119 | 105 | } |
120 | - async function handleDelete(record: Recordable) { | |
121 | - let ids = [record.id]; | |
122 | - await notifyDeleteApi(ids); | |
123 | - createMessage.success('删除成功'); | |
124 | - reload(); | |
125 | - } | |
126 | 106 | function handleSuccess() { |
127 | 107 | reload(); |
128 | 108 | } |
... | ... | @@ -133,11 +113,9 @@ |
133 | 113 | registerTable, |
134 | 114 | registerDrawer, |
135 | 115 | handleAdd, |
136 | - handleToolbarDel, | |
137 | 116 | handleEdit, |
138 | - handleDelete, | |
139 | 117 | handleSuccess, |
140 | - onSelectRowChange, | |
118 | + handleDeleteOrBatchDelete, | |
141 | 119 | }; |
142 | 120 | }, |
143 | 121 | }); | ... | ... |
... | ... | @@ -3,27 +3,21 @@ |
3 | 3 | <BasicDrawer |
4 | 4 | v-bind="$attrs" |
5 | 5 | @register="registerDrawer" |
6 | - :showFooter="false" | |
7 | 6 | :title="getTitle" |
8 | 7 | width="800px" |
8 | + showFooter | |
9 | 9 | > |
10 | - <BasicForm :showResetButton="false" :showSubmitButton="false" @register="registerForm"> | |
11 | - <template #add> | |
12 | - <Button style="margin-left: 30px; margin-top: 80px" type="primary" @click="handleCancel" | |
13 | - >取消</Button | |
14 | - > | |
15 | - <Button style="margin-left: 30px" type="primary" @click="handleSaveDraft" | |
16 | - >保存草稿</Button | |
17 | - > | |
18 | - <Button style="margin-left: 30px" type="primary" @click="handleSend">发布通知</Button> | |
19 | - </template> | |
20 | - </BasicForm> | |
10 | + <BasicForm @register="registerForm" /> | |
11 | + <template #footer> | |
12 | + <a-button @click="handleCancel">取消</a-button> | |
13 | + <a-button @click="handleSaveDraft">保存草稿</a-button> | |
14 | + <a-button type="primary" @click="handleSend">发布通知</a-button> | |
15 | + </template> | |
21 | 16 | </BasicDrawer> |
22 | 17 | </div> |
23 | 18 | </template> |
24 | 19 | <script lang="ts"> |
25 | 20 | import { defineComponent, computed, unref, ref } from 'vue'; |
26 | - import { Button } from '/@/components/Button'; | |
27 | 21 | import { BasicForm, useForm } from '/@/components/Form'; |
28 | 22 | import { formSchema } from './config.d'; |
29 | 23 | import { BasicDrawer, useDrawerInner } from '/@/components/Drawer'; |
... | ... | @@ -34,7 +28,7 @@ |
34 | 28 | import { useMessage } from '/@/hooks/web/useMessage'; |
35 | 29 | export default defineComponent({ |
36 | 30 | name: 'ConfigDrawer', |
37 | - components: { BasicDrawer, BasicForm, Button }, | |
31 | + components: { BasicDrawer, BasicForm }, | |
38 | 32 | emits: ['success', 'register'], |
39 | 33 | setup(_, { emit }) { |
40 | 34 | const { createMessage } = useMessage(); |
... | ... | @@ -54,6 +48,7 @@ |
54 | 48 | noticeId.value = data.record.id; |
55 | 49 | Reflect.set(data.record, 'receiverType', data.record.receiverType === '全部' ? '0' : '1'); |
56 | 50 | if (data.record.receiverType === '1') { |
51 | + if (!data.record.pointId.length) return; | |
57 | 52 | const organizationId = data.record.pointId.split(','); |
58 | 53 | Reflect.set(data.record, 'organizationId', organizationId); |
59 | 54 | } |
... | ... | @@ -108,7 +103,7 @@ |
108 | 103 | createMessage.success('保存草稿成功'); |
109 | 104 | }; |
110 | 105 | const handleCancel = () => { |
111 | - resetFields(); | |
106 | + // resetFields(); | |
112 | 107 | closeDrawer(); |
113 | 108 | }; |
114 | 109 | return { | ... | ... |
... | ... | @@ -9,6 +9,13 @@ |
9 | 9 | <BasicTable @register="registerTable" class="w-3/4 xl:w-4/5"> |
10 | 10 | <template #toolbar> |
11 | 11 | <a-button type="primary" @click="handleCreate">新增账号</a-button> |
12 | + <a-button | |
13 | + color="error" | |
14 | + @click="handleDeleteOrBatchDelete(null)" | |
15 | + :disabled="hasBatchDelete" | |
16 | + > | |
17 | + 批量删除 | |
18 | + </a-button> | |
12 | 19 | </template> |
13 | 20 | <template #status="{ record }"> |
14 | 21 | <Tag |
... | ... | @@ -54,7 +61,7 @@ |
54 | 61 | ifShow: record.level != 0, |
55 | 62 | popConfirm: { |
56 | 63 | title: '是否确认删除', |
57 | - confirm: handleDelete.bind(null, record), | |
64 | + confirm: handleDeleteOrBatchDelete.bind(null, record), | |
58 | 65 | }, |
59 | 66 | }, |
60 | 67 | ]" |
... | ... | @@ -74,18 +81,19 @@ |
74 | 81 | import { Tag } from 'ant-design-vue'; |
75 | 82 | import { useModal } from '/@/components/Modal'; |
76 | 83 | import AccountModal from './AccountModal.vue'; |
77 | - | |
78 | 84 | import { columns, searchFormSchema } from './account.data'; |
79 | 85 | import { useGo } from '/@/hooks/web/usePage'; |
80 | - import { useMessage } from '/@/hooks/web/useMessage'; | |
81 | - | |
86 | + import { useBatchDelete } from '/@/hooks/web/useBatchDelete'; | |
82 | 87 | export default defineComponent({ |
83 | 88 | name: 'AccountManagement', |
84 | 89 | components: { BasicTable, PageWrapper, OrganizationIdTree, AccountModal, TableAction, Tag }, |
85 | 90 | setup() { |
86 | 91 | const go = useGo(); |
92 | + const { hasBatchDelete, handleDeleteOrBatchDelete, selectionOptions } = useBatchDelete( | |
93 | + deleteUser, | |
94 | + handleSuccess | |
95 | + ); | |
87 | 96 | const [registerModal, { openModal }] = useModal(); |
88 | - const { createMessage } = useMessage(); | |
89 | 97 | let searchInfo = reactive<Recordable>({}); |
90 | 98 | const { organizationIdTreeRef, resetFn } = useResetOrganizationTree(searchInfo); |
91 | 99 | const [registerTable, { reload }] = useTable({ |
... | ... | @@ -109,6 +117,7 @@ |
109 | 117 | dataIndex: 'action', |
110 | 118 | slots: { customRender: 'action' }, |
111 | 119 | }, |
120 | + ...selectionOptions, | |
112 | 121 | }); |
113 | 122 | |
114 | 123 | function handleCreate() { |
... | ... | @@ -122,15 +131,6 @@ |
122 | 131 | isUpdate: true, |
123 | 132 | }); |
124 | 133 | } |
125 | - | |
126 | - function handleDelete(record: Recordable) { | |
127 | - let ids = [record.id]; | |
128 | - deleteUser(ids).then(() => { | |
129 | - createMessage.success('删除成功'); | |
130 | - reload(); | |
131 | - }); | |
132 | - } | |
133 | - | |
134 | 134 | function handleSuccess() { |
135 | 135 | reload(); |
136 | 136 | } |
... | ... | @@ -149,11 +149,12 @@ |
149 | 149 | registerModal, |
150 | 150 | handleCreate, |
151 | 151 | handleEdit, |
152 | - handleDelete, | |
153 | 152 | handleSuccess, |
154 | 153 | handleSelect, |
155 | 154 | handleView, |
156 | 155 | organizationIdTreeRef, |
156 | + hasBatchDelete, | |
157 | + handleDeleteOrBatchDelete, | |
157 | 158 | }; |
158 | 159 | }, |
159 | 160 | }); | ... | ... |
... | ... | @@ -3,6 +3,9 @@ |
3 | 3 | <BasicTable @register="registerTable"> |
4 | 4 | <template #toolbar> |
5 | 5 | <a-button type="primary" @click="handleCreate"> 新增字典 </a-button> |
6 | + <a-button color="error" @click="handleDeleteOrBatchDelete(null)" :disabled="hasBatchDelete"> | |
7 | + 批量删除 | |
8 | + </a-button> | |
6 | 9 | </template> |
7 | 10 | <template #action="{ record }"> |
8 | 11 | <TableAction |
... | ... | @@ -23,7 +26,7 @@ |
23 | 26 | color: 'error', |
24 | 27 | popConfirm: { |
25 | 28 | title: '是否确认删除', |
26 | - confirm: handleDelete.bind(null, record), | |
29 | + confirm: handleDeleteOrBatchDelete.bind(null, record), | |
27 | 30 | }, |
28 | 31 | }, |
29 | 32 | ]" |
... | ... | @@ -51,15 +54,19 @@ |
51 | 54 | |
52 | 55 | import { columns, searchFormSchema } from './dict.data'; |
53 | 56 | import { Tag } from 'ant-design-vue'; |
54 | - import { useMessage } from '/@/hooks/web/useMessage'; | |
57 | + | |
58 | + import { useBatchDelete } from '/@/hooks/web/useBatchDelete'; | |
55 | 59 | |
56 | 60 | export default defineComponent({ |
57 | 61 | name: 'DictManagement', |
58 | 62 | components: { BasicTable, DictDrawer, ItemIndex, TableAction, Tag }, |
59 | 63 | setup() { |
60 | - const { createMessage } = useMessage(); | |
61 | 64 | const [registerDrawer, { openDrawer: openDrawer }] = useDrawer(); |
62 | 65 | const [registerItemDrawer, { openDrawer: openItemDrawer }] = useDrawer(); |
66 | + const { hasBatchDelete, handleDeleteOrBatchDelete, selectionOptions } = useBatchDelete( | |
67 | + deleteDict, | |
68 | + handleSuccess | |
69 | + ); | |
63 | 70 | const [registerTable, { reload }] = useTable({ |
64 | 71 | title: '字典配置列表', |
65 | 72 | api: sysDictPage, |
... | ... | @@ -79,6 +86,7 @@ |
79 | 86 | slots: { customRender: 'action' }, |
80 | 87 | fixed: 'right', |
81 | 88 | }, |
89 | + ...selectionOptions, | |
82 | 90 | }); |
83 | 91 | |
84 | 92 | function handleCreate() { |
... | ... | @@ -100,14 +108,6 @@ |
100 | 108 | }); |
101 | 109 | } |
102 | 110 | |
103 | - function handleDelete(record: Recordable) { | |
104 | - let ids = [record.id]; | |
105 | - deleteDict(ids).then((result) => { | |
106 | - createMessage.success(result.message); | |
107 | - handleSuccess(); | |
108 | - }); | |
109 | - } | |
110 | - | |
111 | 111 | function handleSuccess() { |
112 | 112 | reload(); |
113 | 113 | } |
... | ... | @@ -119,8 +119,10 @@ |
119 | 119 | handleCreate, |
120 | 120 | handleEdit, |
121 | 121 | handleItem, |
122 | - handleDelete, | |
122 | + | |
123 | 123 | handleSuccess, |
124 | + hasBatchDelete, | |
125 | + handleDeleteOrBatchDelete, | |
124 | 126 | }; |
125 | 127 | }, |
126 | 128 | }); | ... | ... |
... | ... | @@ -5,6 +5,9 @@ |
5 | 5 | <a-button type="primary" @click="handleCreate"> |
6 | 6 | {{ getI18nCreateMenu }} |
7 | 7 | </a-button> |
8 | + <a-button color="error" @click="handleDeleteOrBatchDelete(null)" :disabled="hasBatchDelete"> | |
9 | + 批量删除 | |
10 | + </a-button> | |
8 | 11 | </template> |
9 | 12 | <template #action="{ record }"> |
10 | 13 | <TableAction |
... | ... | @@ -53,6 +56,7 @@ |
53 | 56 | import { columns } from './menu.data'; |
54 | 57 | import { useI18n } from '/@/hooks/web/useI18n'; |
55 | 58 | import { notification } from 'ant-design-vue'; |
59 | + import { useBatchDelete } from '/@/hooks/web/useBatchDelete'; | |
56 | 60 | |
57 | 61 | // 自定义表格组件和属性 |
58 | 62 | export default defineComponent({ |
... | ... | @@ -63,18 +67,17 @@ |
63 | 67 | const { t } = useI18n(); //加载国际化 |
64 | 68 | // 新增菜单 |
65 | 69 | const getI18nCreateMenu = computed(() => t('routes.common.system.pageSystemTitleCreateMenu')); |
70 | + const { hasBatchDelete, handleDeleteOrBatchDelete, selectionOptions } = useBatchDelete( | |
71 | + delMenu, | |
72 | + handleSuccess | |
73 | + ); | |
66 | 74 | const [registerTable, { reload, expandAll }] = useTable({ |
67 | 75 | title: t('routes.common.system.pageSystemTitleMenuList'), //'菜单列表' |
68 | 76 | api: getMenuList, //加载数据 |
69 | 77 | columns, //加载列 |
70 | - // formConfig: { | |
71 | - // labelWidth: 120, | |
72 | - // schemas: searchFormSchema, | |
73 | - // }, | |
74 | 78 | isTreeTable: true, |
75 | 79 | pagination: false, |
76 | 80 | striped: false, |
77 | - // useSearchForm: true, | |
78 | 81 | showTableSetting: true, |
79 | 82 | bordered: true, |
80 | 83 | showIndexColumn: false, |
... | ... | @@ -86,6 +89,7 @@ |
86 | 89 | slots: { customRender: 'action' }, |
87 | 90 | fixed: 'right', |
88 | 91 | }, |
92 | + ...selectionOptions, | |
89 | 93 | }); |
90 | 94 | |
91 | 95 | /** |
... | ... | @@ -157,6 +161,8 @@ |
157 | 161 | handleDelete, |
158 | 162 | handleSuccess, |
159 | 163 | onFetchSuccess, |
164 | + hasBatchDelete, | |
165 | + handleDeleteOrBatchDelete, | |
160 | 166 | }; |
161 | 167 | }, |
162 | 168 | }); | ... | ... |
... | ... | @@ -5,6 +5,9 @@ |
5 | 5 | <a-button type="primary" @click="handleCreate"> |
6 | 6 | {{ getI18n }} |
7 | 7 | </a-button> |
8 | + <a-button color="error" @click="handleDeleteOrBatchDelete(null)" :disabled="hasBatchDelete"> | |
9 | + 批量删除 | |
10 | + </a-button> | |
8 | 11 | </template> |
9 | 12 | <template #action="{ record }"> |
10 | 13 | <TableAction |
... | ... | @@ -20,7 +23,7 @@ |
20 | 23 | color: 'error', |
21 | 24 | popConfirm: { |
22 | 25 | title: getDeleteTitle(), //是否确认删除//getDeleteTitle() |
23 | - confirm: handleDelete.bind(null, record), | |
26 | + confirm: handleDeleteOrBatchDelete.bind(null, record), | |
24 | 27 | }, |
25 | 28 | }, |
26 | 29 | ]" |
... | ... | @@ -32,18 +35,14 @@ |
32 | 35 | </template> |
33 | 36 | <script lang="ts"> |
34 | 37 | import { computed, defineComponent, nextTick } from 'vue'; |
35 | - | |
36 | 38 | import { BasicTable, useTable, TableAction } from '/@/components/Table'; |
37 | - | |
38 | 39 | // 加载自定义侧边弹出框 组件 |
39 | - | |
40 | 40 | import { useDrawer } from '/@/components/Drawer'; |
41 | 41 | import DeptDrawer from './OrganizationDrawer.vue'; |
42 | 42 | import { columns } from './organization.data'; |
43 | 43 | import { useI18n } from '/@/hooks/web/useI18n'; |
44 | 44 | import { delOrganization, getOrganizationList } from '/@/api/system/system'; |
45 | - import { useMessage } from '/@/hooks/web/useMessage'; | |
46 | - | |
45 | + import { useBatchDelete } from '/@/hooks/web/useBatchDelete'; | |
47 | 46 | export default defineComponent({ |
48 | 47 | name: 'DeptManagement', |
49 | 48 | components: { BasicTable, DeptDrawer, TableAction }, |
... | ... | @@ -51,7 +50,10 @@ |
51 | 50 | const [registerModal, { openDrawer }] = useDrawer(); |
52 | 51 | const { t } = useI18n(); //加载国际化 |
53 | 52 | const getI18n = computed(() => t('routes.common.organization.toolCreateOrganization')); |
54 | - const { createMessage } = useMessage(); | |
53 | + const { hasBatchDelete, handleDeleteOrBatchDelete, selectionOptions } = useBatchDelete( | |
54 | + delOrganization, | |
55 | + handleSuccess | |
56 | + ); | |
55 | 57 | const [registerTable, { reload, expandAll }] = useTable({ |
56 | 58 | title: t('routes.common.organization.toolOrganizationList'), |
57 | 59 | api: getOrganizationList, |
... | ... | @@ -71,6 +73,7 @@ |
71 | 73 | slots: { customRender: 'action' }, |
72 | 74 | fixed: 'right', |
73 | 75 | }, |
76 | + ...selectionOptions, | |
74 | 77 | }); |
75 | 78 | /** |
76 | 79 | * 获得删除提示框的文字 |
... | ... | @@ -93,17 +96,6 @@ |
93 | 96 | }); |
94 | 97 | } |
95 | 98 | |
96 | - async function handleDelete(record: Recordable) { | |
97 | - try { | |
98 | - let ids = [record.id]; | |
99 | - await delOrganization(ids); | |
100 | - createMessage.success('删除组织成功'); | |
101 | - handleSuccess(); | |
102 | - } catch (e) { | |
103 | - return e; | |
104 | - } | |
105 | - } | |
106 | - | |
107 | 99 | function handleSuccess() { |
108 | 100 | reload(); |
109 | 101 | } |
... | ... | @@ -120,9 +112,10 @@ |
120 | 112 | getDeleteTitle, |
121 | 113 | handleCreate, |
122 | 114 | handleEdit, |
123 | - handleDelete, | |
124 | 115 | handleSuccess, |
125 | 116 | onFetchSuccess, |
117 | + hasBatchDelete, | |
118 | + handleDeleteOrBatchDelete, | |
126 | 119 | }; |
127 | 120 | }, |
128 | 121 | }); | ... | ... |
... | ... | @@ -3,6 +3,9 @@ |
3 | 3 | <BasicTable @register="registerTable"> |
4 | 4 | <template #toolbar> |
5 | 5 | <a-button type="primary" @click="handleCreate">新增角色</a-button> |
6 | + <a-button color="error" @click="handleDeleteOrBatchDelete(null)" :disabled="hasBatchDelete"> | |
7 | + 批量删除 | |
8 | + </a-button> | |
6 | 9 | </template> |
7 | 10 | <template #action="{ record }"> |
8 | 11 | <TableAction |
... | ... | @@ -19,7 +22,7 @@ |
19 | 22 | ifShow: record.roleType != RoleEnum.SYS_ADMIN, |
20 | 23 | popConfirm: { |
21 | 24 | title: '是否确认删除', |
22 | - confirm: handleDelete.bind(null, record), | |
25 | + confirm: handleDeleteOrBatchDelete.bind(null, record), | |
23 | 26 | }, |
24 | 27 | }, |
25 | 28 | ]" |
... | ... | @@ -39,12 +42,16 @@ |
39 | 42 | import RoleDrawer from './RoleDrawer.vue'; |
40 | 43 | import { columns, searchFormSchema } from './role.data'; |
41 | 44 | import { RoleEnum } from '/@/enums/roleEnum'; |
42 | - | |
45 | + import { useBatchDelete } from '/@/hooks/web/useBatchDelete'; | |
43 | 46 | export default defineComponent({ |
44 | 47 | name: 'RoleManagement', |
45 | 48 | components: { BasicTable, RoleDrawer, TableAction }, |
46 | 49 | setup() { |
47 | 50 | const [registerDrawer, { openDrawer }] = useDrawer(); |
51 | + const { hasBatchDelete, handleDeleteOrBatchDelete, selectionOptions } = useBatchDelete( | |
52 | + delRole, | |
53 | + handleSuccess | |
54 | + ); | |
48 | 55 | const [registerTable, { reload }] = useTable({ |
49 | 56 | title: '角色列表', |
50 | 57 | api: getRoleListByPage, |
... | ... | @@ -64,6 +71,7 @@ |
64 | 71 | slots: { customRender: 'action' }, |
65 | 72 | fixed: 'right', |
66 | 73 | }, |
74 | + ...selectionOptions, | |
67 | 75 | }); |
68 | 76 | |
69 | 77 | function handleCreate() { |
... | ... | @@ -78,13 +86,6 @@ |
78 | 86 | isUpdate: true, |
79 | 87 | }); |
80 | 88 | } |
81 | - | |
82 | - async function handleDelete(record: Recordable) { | |
83 | - const roleIds = [record.id]; | |
84 | - delRole(roleIds).then(() => { | |
85 | - reload(); | |
86 | - }); | |
87 | - } | |
88 | 89 | function handleSuccess() { |
89 | 90 | reload(); |
90 | 91 | } |
... | ... | @@ -94,9 +95,10 @@ |
94 | 95 | registerDrawer, |
95 | 96 | handleCreate, |
96 | 97 | handleEdit, |
97 | - handleDelete, | |
98 | 98 | handleSuccess, |
99 | 99 | RoleEnum, |
100 | + hasBatchDelete, | |
101 | + handleDeleteOrBatchDelete, | |
100 | 102 | }; |
101 | 103 | }, |
102 | 104 | }); | ... | ... |
... | ... | @@ -14,6 +14,19 @@ export const schemas: FormSchema[] = [ |
14 | 14 | maxLength: 100, |
15 | 15 | placeholder: '请输入公司名称', |
16 | 16 | }, |
17 | + dynamicRules: () => { | |
18 | + return [ | |
19 | + { | |
20 | + required: false, | |
21 | + validator: (_, value) => { | |
22 | + if (String(value).length > 100) { | |
23 | + return Promise.reject('字数不超过100个字'); | |
24 | + } | |
25 | + return Promise.resolve(); | |
26 | + }, | |
27 | + }, | |
28 | + ]; | |
29 | + }, | |
17 | 30 | }, |
18 | 31 | { |
19 | 32 | field: 'abbreviation', |
... | ... | @@ -26,6 +39,19 @@ export const schemas: FormSchema[] = [ |
26 | 39 | maxLength: 100, |
27 | 40 | placeholder: '请输入公司简称', |
28 | 41 | }, |
42 | + dynamicRules: () => { | |
43 | + return [ | |
44 | + { | |
45 | + required: false, | |
46 | + validator: (_, value) => { | |
47 | + if (String(value).length > 100) { | |
48 | + return Promise.reject('字数不超过100个字'); | |
49 | + } | |
50 | + return Promise.resolve(); | |
51 | + }, | |
52 | + }, | |
53 | + ]; | |
54 | + }, | |
29 | 55 | }, |
30 | 56 | { |
31 | 57 | field: 'officialWebsite', |
... | ... | @@ -38,6 +64,19 @@ export const schemas: FormSchema[] = [ |
38 | 64 | maxLength: 255, |
39 | 65 | placeholder: '请输入公司官网', |
40 | 66 | }, |
67 | + dynamicRules: () => { | |
68 | + return [ | |
69 | + { | |
70 | + required: false, | |
71 | + validator: (_, value) => { | |
72 | + if (String(value).length > 255) { | |
73 | + return Promise.reject('字数不超过255个字'); | |
74 | + } | |
75 | + return Promise.resolve(); | |
76 | + }, | |
77 | + }, | |
78 | + ]; | |
79 | + }, | |
41 | 80 | }, |
42 | 81 | { |
43 | 82 | field: 'email', |
... | ... | @@ -63,6 +102,20 @@ export const schemas: FormSchema[] = [ |
63 | 102 | maxLength: 500, |
64 | 103 | placeholder: '请输入公司简介', |
65 | 104 | autoSize: { minRows: 8, maxRows: 12 }, |
105 | + showCount: true, | |
106 | + }, | |
107 | + dynamicRules: () => { | |
108 | + return [ | |
109 | + { | |
110 | + required: false, | |
111 | + validator: (_, value) => { | |
112 | + if (String(value).length > 500) { | |
113 | + return Promise.reject('字数不超过500个字'); | |
114 | + } | |
115 | + return Promise.resolve(); | |
116 | + }, | |
117 | + }, | |
118 | + ]; | |
66 | 119 | }, |
67 | 120 | }, |
68 | 121 | { |
... | ... | @@ -77,7 +130,7 @@ export const schemas: FormSchema[] = [ |
77 | 130 | params: { parentId: 0 }, |
78 | 131 | labelField: 'name', |
79 | 132 | valueField: 'code', |
80 | - placeholder: '请选择国家/地区', | |
133 | + placeholder: '国家/地区', | |
81 | 134 | }, |
82 | 135 | }, |
83 | 136 | { |
... | ... | @@ -105,18 +158,21 @@ export const schemas: FormSchema[] = [ |
105 | 158 | field: 'nameCity', |
106 | 159 | componentProps: { |
107 | 160 | options: [], |
161 | + placeholder: '城市', | |
108 | 162 | }, |
109 | 163 | }, |
110 | 164 | { |
111 | 165 | field: 'nameCoun', |
112 | 166 | componentProps: { |
113 | 167 | options: [], |
168 | + placeholder: '区/县', | |
114 | 169 | }, |
115 | 170 | }, |
116 | 171 | { |
117 | 172 | field: 'nameTown', |
118 | 173 | componentProps: { |
119 | 174 | options: [], |
175 | + placeholder: '城镇/街道', | |
120 | 176 | }, |
121 | 177 | }, |
122 | 178 | ]); |
... | ... | @@ -204,11 +260,12 @@ export const schemas: FormSchema[] = [ |
204 | 260 | field: 'nameCity', |
205 | 261 | component: 'Select', |
206 | 262 | label: '', |
207 | - componentProps: { | |
208 | - placeholder: '城市', | |
209 | - }, | |
263 | + labelWidth: 0, | |
210 | 264 | colProps: { |
211 | 265 | span: 5, |
266 | + style: { | |
267 | + marginLeft: '-5rem', | |
268 | + }, | |
212 | 269 | }, |
213 | 270 | }, |
214 | 271 | { |
... | ... | @@ -216,7 +273,10 @@ export const schemas: FormSchema[] = [ |
216 | 273 | component: 'Select', |
217 | 274 | label: '', |
218 | 275 | colProps: { |
219 | - span: 3, | |
276 | + span: 5, | |
277 | + style: { | |
278 | + marginLeft: '-10rem', | |
279 | + }, | |
220 | 280 | }, |
221 | 281 | componentProps: { |
222 | 282 | placeholder: '区/县', |
... | ... | @@ -228,6 +288,9 @@ export const schemas: FormSchema[] = [ |
228 | 288 | label: '', |
229 | 289 | colProps: { |
230 | 290 | span: 6, |
291 | + style: { | |
292 | + marginLeft: '-10rem', | |
293 | + }, | |
231 | 294 | }, |
232 | 295 | componentProps: { |
233 | 296 | placeholder: '城镇/街道', | ... | ... |
... | ... | @@ -137,21 +137,18 @@ |
137 | 137 | |
138 | 138 | // 地区显示回显和数据联动 |
139 | 139 | async function updateCityData( |
140 | - provs: CityItem[], | |
141 | 140 | cities: CityItem[], |
142 | 141 | couns: CityItem[], |
143 | 142 | towns: CityItem[], |
144 | 143 | code: Code |
145 | 144 | ) { |
146 | 145 | // 加工后端返回字段 |
147 | - provs.forEach((item) => { | |
148 | - item.label = item.name; | |
149 | - item.value = item.code; | |
150 | - }); | |
146 | + | |
151 | 147 | cities.forEach((item) => { |
152 | 148 | item.label = item.name; |
153 | 149 | item.value = item.code; |
154 | 150 | }); |
151 | + | |
155 | 152 | couns.forEach((item) => { |
156 | 153 | item.label = item.name; |
157 | 154 | item.value = item.code; |
... | ... | @@ -161,13 +158,6 @@ |
161 | 158 | item.value = item.code; |
162 | 159 | }); |
163 | 160 | const { codeCountry, codeProv, codeCity, codeCoun, codeTown } = code; |
164 | - setFieldsValue({ | |
165 | - nameCountry: codeCountry, | |
166 | - nameProv: codeProv, | |
167 | - nameCity: codeCity, | |
168 | - nameCoun: codeCoun, | |
169 | - nameTown: codeTown, | |
170 | - }); | |
171 | 161 | updateSchema([ |
172 | 162 | { |
173 | 163 | field: 'nameCity', |
... | ... | @@ -175,17 +165,25 @@ |
175 | 165 | return { |
176 | 166 | options: cities, |
177 | 167 | async onChange(value) { |
178 | - let couns: CityItem[] = await getAreaList({ parentId: value }); | |
179 | 168 | if (value === undefined) { |
180 | 169 | formModel.nameCoun = undefined; // reset city value |
181 | 170 | formModel.nameTown = undefined; |
182 | - updateSchema({ | |
183 | - field: 'nameTown', | |
184 | - componentProps: { | |
185 | - options: [], | |
171 | + updateSchema([ | |
172 | + { | |
173 | + field: 'nameCoun', | |
174 | + componentProps: { | |
175 | + options: [], | |
176 | + }, | |
186 | 177 | }, |
187 | - }); | |
178 | + { | |
179 | + field: 'nameTown', | |
180 | + componentProps: { | |
181 | + options: [], | |
182 | + }, | |
183 | + }, | |
184 | + ]); | |
188 | 185 | } else { |
186 | + let couns: CityItem[] = await getAreaList({ parentId: value }); | |
189 | 187 | couns.forEach((item) => { |
190 | 188 | item.label = item.name; |
191 | 189 | item.value = item.code; |
... | ... | @@ -198,23 +196,23 @@ |
198 | 196 | // 请选择区 |
199 | 197 | options: couns, |
200 | 198 | async onChange(value) { |
201 | - let towns: CityItem[] = await getAreaList({ parentId: value }); | |
202 | 199 | if (value === undefined) { |
203 | 200 | formModel.nameTown = undefined; |
201 | + } else { | |
202 | + let towns: CityItem[] = await getAreaList({ parentId: value }); | |
203 | + towns.forEach((item) => { | |
204 | + item.label = item.name; | |
205 | + item.value = item.code; | |
206 | + }); | |
207 | + formModel.nameTown = undefined; | |
208 | + updateSchema({ | |
209 | + field: 'nameTown', | |
210 | + componentProps: { | |
211 | + placeholder: '城镇/街道', | |
212 | + options: towns, | |
213 | + }, | |
214 | + }); | |
204 | 215 | } |
205 | - towns.forEach((item) => { | |
206 | - item.label = item.name; | |
207 | - item.value = item.code; | |
208 | - }); | |
209 | - | |
210 | - formModel.nameTown = undefined; | |
211 | - updateSchema({ | |
212 | - field: 'nameTown', | |
213 | - componentProps: { | |
214 | - placeholder: '请选择街道/城镇', | |
215 | - options: towns, | |
216 | - }, | |
217 | - }); | |
218 | 216 | }, |
219 | 217 | }, |
220 | 218 | }); |
... | ... | @@ -235,6 +233,7 @@ |
235 | 233 | updateSchema({ |
236 | 234 | field: 'nameTown', |
237 | 235 | componentProps: { |
236 | + placeholder: '城镇/街道', | |
238 | 237 | options: [], |
239 | 238 | }, |
240 | 239 | }); |
... | ... | @@ -250,7 +249,7 @@ |
250 | 249 | updateSchema({ |
251 | 250 | field: 'nameTown', |
252 | 251 | componentProps: { |
253 | - placeholder: '请选择街道/城镇', | |
252 | + placeholder: '城镇/街道', | |
254 | 253 | options: towns, |
255 | 254 | }, |
256 | 255 | }); |
... | ... | @@ -265,22 +264,20 @@ |
265 | 264 | }, |
266 | 265 | }, |
267 | 266 | ]); |
267 | + setFieldsValue({ | |
268 | + nameCountry: codeCountry, | |
269 | + nameProv: codeProv, | |
270 | + nameCity: codeCity, | |
271 | + nameCoun: codeCoun, | |
272 | + nameTown: codeTown, | |
273 | + }); | |
268 | 274 | } |
269 | 275 | |
270 | 276 | onMounted(async () => { |
271 | 277 | const res = await getEnterPriseDetail(); |
272 | 278 | if (res.sysTown) { |
273 | - const { | |
274 | - provs, | |
275 | - cities, | |
276 | - couns, | |
277 | - towns, | |
278 | - codeCountry, | |
279 | - codeProv, | |
280 | - codeCity, | |
281 | - codeCoun, | |
282 | - codeTown, | |
283 | - } = res.sysTown; | |
279 | + const { cities, couns, towns, codeCountry, codeProv, codeCity, codeCoun, codeTown } = | |
280 | + res.sysTown; | |
284 | 281 | const code = { |
285 | 282 | codeCountry, |
286 | 283 | codeProv, |
... | ... | @@ -288,7 +285,7 @@ |
288 | 285 | codeCoun, |
289 | 286 | codeTown, |
290 | 287 | }; |
291 | - updateCityData(provs, cities, couns, towns, code); | |
288 | + updateCityData(cities, couns, towns, code); | |
292 | 289 | setFieldsValue(res); |
293 | 290 | qrcodePic.value = res.qrCode; |
294 | 291 | } else { |
... | ... | @@ -308,5 +305,3 @@ |
308 | 305 | }, |
309 | 306 | }); |
310 | 307 | </script> |
311 | - | |
312 | -<style lang="less" scoped></style> | ... | ... |