Showing
6 changed files
with
65 additions
and
32 deletions
... | ... | @@ -31,14 +31,16 @@ enum Api { |
31 | 31 | getTenantRoles = '/admin/tenant/roles/', |
32 | 32 | postAddTenantProfile = '/tenantProfile', |
33 | 33 | getTenantProfile = '/tenantProfiles', |
34 | - deleteTenantProfile = '/tenantProfile/', | |
34 | + deleteTenantProfile = '/tenantProfile', | |
35 | 35 | } |
36 | 36 | |
37 | -export async function deleteTenantProfileApi(params?: DeleteTenantProfilesParam) { | |
37 | +export async function deleteTenantProfileApi(ids: string[]) { | |
38 | 38 | await defHttp.delete( |
39 | 39 | { |
40 | - params: params, | |
41 | 40 | url: Api.deleteTenantProfile, |
41 | + data: { | |
42 | + ids: ids, | |
43 | + }, | |
42 | 44 | }, |
43 | 45 | { |
44 | 46 | joinPrefix: false, | ... | ... |
... | ... | @@ -123,7 +123,7 @@ |
123 | 123 | import { BasicForm, useForm } from '/@/components/Form'; |
124 | 124 | import { modeApiForm, modeKafkaInseretKeyAndValueForm } from '../config'; |
125 | 125 | import { InboxOutlined } from '@ant-design/icons-vue'; |
126 | - import { Alert, Divider, Descriptions, UploadDragger } from 'ant-design-vue'; | |
126 | + import { Alert, Divider, Descriptions, Upload } from 'ant-design-vue'; | |
127 | 127 | |
128 | 128 | export default defineComponent({ |
129 | 129 | components: { |
... | ... | @@ -133,7 +133,7 @@ |
133 | 133 | [Descriptions.name]: Descriptions, |
134 | 134 | [Descriptions.Item.name]: Descriptions.Item, |
135 | 135 | InboxOutlined, |
136 | - UploadDragger, | |
136 | + [Upload.UploadDragger]: Upload.UploadDragger, | |
137 | 137 | }, |
138 | 138 | emits: ['next', 'prev', 'register'], |
139 | 139 | setup(_, { emit }) { | ... | ... |
... | ... | @@ -82,6 +82,11 @@ |
82 | 82 | import { modeKafkaForm, modeKafkaInseretKeyAndValueForm } from '../config'; |
83 | 83 | import { Alert, Divider, Descriptions } from 'ant-design-vue'; |
84 | 84 | |
85 | + interface IKeyAndValue { | |
86 | + key: string; | |
87 | + value: string; | |
88 | + } | |
89 | + | |
85 | 90 | export default defineComponent({ |
86 | 91 | components: { |
87 | 92 | BasicForm, |
... | ... | @@ -92,11 +97,21 @@ |
92 | 97 | }, |
93 | 98 | emits: ['next', 'prev', 'register'], |
94 | 99 | setup(_, { emit }) { |
100 | + const temp = ref({}); | |
101 | + let tempObj = ref({}); | |
95 | 102 | const keyAndValueArr = ref<[]>([]); |
103 | + const keyAndValueArrTemp = ref<[]>([]); | |
104 | + const keyAndValueObj = reactive<IKeyAndValue>({ | |
105 | + key: '', | |
106 | + value: '', | |
107 | + }); | |
96 | 108 | const sonValues = reactive({ |
97 | 109 | configuration: {}, |
98 | 110 | }); |
99 | - const [register, { validateFields, setFieldsValue, resetFields }] = useForm({ | |
111 | + const otherPropertiesValues = reactive({ | |
112 | + otherProperties: {}, | |
113 | + }); | |
114 | + const [register, { validate, setFieldsValue, resetFields }] = useForm({ | |
100 | 115 | labelWidth: 80, |
101 | 116 | schemas: modeKafkaForm, |
102 | 117 | actionColOptions: { |
... | ... | @@ -105,12 +120,10 @@ |
105 | 120 | resetButtonOptions: { |
106 | 121 | text: '上一步', |
107 | 122 | }, |
108 | - | |
109 | 123 | resetFunc: customResetFunc, |
110 | - submitFunc: customSubmitFunc, | |
111 | 124 | }); |
112 | 125 | |
113 | - const [registerKeyAndValue] = useForm({ | |
126 | + const [registerKeyAndValue, { validate: validateKeyAndValue }] = useForm({ | |
114 | 127 | labelWidth: 80, |
115 | 128 | schemas: modeKafkaInseretKeyAndValueForm, |
116 | 129 | actionColOptions: { |
... | ... | @@ -131,36 +144,38 @@ |
131 | 144 | async function customResetFunc() { |
132 | 145 | emit('prev'); |
133 | 146 | } |
134 | - async function customSubmitFunc() { | |
135 | - try { | |
136 | - const values = await validateFields(); | |
137 | - emit('next', values); | |
138 | - } catch (error) { | |
139 | - } finally { | |
140 | - } | |
141 | - } | |
147 | + | |
148 | + const tempGetKeyAndVal = async () => { | |
149 | + temp.value = await validateKeyAndValue(); | |
150 | + }; | |
142 | 151 | const defaultAddKeyAndValueFunc = () => { |
143 | 152 | if (keyAndValueArr.value.length == 0) { |
144 | - keyAndValueArr.value.push({ | |
145 | - key: 1, | |
146 | - value: 1, | |
147 | - }); | |
153 | + keyAndValueArr.value.push(keyAndValueObj as never); | |
148 | 154 | } |
149 | 155 | }; |
150 | 156 | defaultAddKeyAndValueFunc(); |
151 | 157 | |
158 | + const getDefaultValue = () => { | |
159 | + tempGetKeyAndVal(); | |
160 | + keyAndValueArrTemp.value.push(temp.value as never); | |
161 | + }; | |
162 | + | |
152 | 163 | const addKeyAndValueFunc = () => { |
153 | - keyAndValueArr.value.push({ | |
154 | - key: 1, | |
155 | - value: 1, | |
156 | - }); | |
164 | + keyAndValueArr.value.push(keyAndValueObj as never); | |
165 | + tempGetKeyAndVal(); | |
166 | + tempObj.value = temp.value; | |
167 | + keyAndValueArrTemp.value.push(tempObj.value as never); | |
168 | + console.log(keyAndValueArrTemp.value); | |
157 | 169 | }; |
158 | 170 | const removeKeyAndValueFunc = () => { |
159 | 171 | keyAndValueArr.value.splice(0, 1); |
160 | 172 | }; |
161 | 173 | |
162 | 174 | const getSonValueFunc = async () => { |
163 | - sonValues.configuration = await validateFields(); | |
175 | + sonValues.configuration = await validate(); | |
176 | + getDefaultValue(); | |
177 | + console.log(sonValues.configuration); | |
178 | + console.log(otherPropertiesValues.otherProperties); | |
164 | 179 | return sonValues; |
165 | 180 | }; |
166 | 181 | return { | ... | ... |
... | ... | @@ -68,7 +68,7 @@ |
68 | 68 | import { BasicForm, useForm } from '/@/components/Form'; |
69 | 69 | import { modeMqttForm } from '../config'; |
70 | 70 | import { InboxOutlined } from '@ant-design/icons-vue'; |
71 | - import { Alert, Divider, Descriptions, UploadDragger } from 'ant-design-vue'; | |
71 | + import { Alert, Divider, Descriptions, Upload } from 'ant-design-vue'; | |
72 | 72 | |
73 | 73 | export default defineComponent({ |
74 | 74 | components: { |
... | ... | @@ -78,7 +78,7 @@ |
78 | 78 | [Descriptions.name]: Descriptions, |
79 | 79 | [Descriptions.Item.name]: Descriptions.Item, |
80 | 80 | InboxOutlined, |
81 | - UploadDragger, | |
81 | + [Upload.UploadDragger]: Upload.UploadDragger, | |
82 | 82 | }, |
83 | 83 | emits: ['next', 'prev', 'register'], |
84 | 84 | setup(_, { emit }) { | ... | ... |
1 | 1 | <template> |
2 | 2 | <div> |
3 | - <BasicTable @register="registerTable"> | |
3 | + <BasicTable | |
4 | + @selection-change="useSelectionChange" | |
5 | + :rowSelection="{ type: 'checkbox' }" | |
6 | + @register="registerTable" | |
7 | + > | |
4 | 8 | <template #toolbar> |
5 | 9 | <a-button type="primary" @click="handleAdd"> 新增租户配置 </a-button> |
10 | + <a-button color="error" @click="handleMutilteDelete"> 批量删除 </a-button> | |
6 | 11 | </template> |
7 | 12 | <template #action="{ record }"> |
8 | 13 | <TableAction |
... | ... | @@ -46,9 +51,10 @@ |
46 | 51 | components: { BasicTable, TenantSettingDrawer, TableAction }, |
47 | 52 | setup() { |
48 | 53 | let echoEditData = reactive({}); |
54 | + let selectedRowKeys: Array<string> = []; | |
49 | 55 | const [registerDrawer, { openDrawer }] = useDrawer(); |
50 | 56 | const { createMessage } = useMessage(); |
51 | - const [registerTable, { reload }] = useTable({ | |
57 | + const [registerTable, { reload, getSelectRowKeys }] = useTable({ | |
52 | 58 | title: '', |
53 | 59 | clickToRowSelect: false, |
54 | 60 | api: getTableTenantProfileApi, |
... | ... | @@ -84,11 +90,19 @@ |
84 | 90 | echoEditData = record; |
85 | 91 | } |
86 | 92 | async function handleDelete(record: Recordable) { |
87 | - let ids = record.id.id; | |
93 | + let ids = [record.id]; | |
88 | 94 | await deleteTenantProfileApi(ids); |
89 | 95 | createMessage.success('删除成功'); |
90 | 96 | reload(); |
91 | 97 | } |
98 | + const useSelectionChange = () => { | |
99 | + selectedRowKeys = getSelectRowKeys(); | |
100 | + }; | |
101 | + const handleMutilteDelete = async () => { | |
102 | + await deleteTenantProfileApi(selectedRowKeys); | |
103 | + createMessage.success('删除成功'); | |
104 | + reload(); | |
105 | + }; | |
92 | 106 | function handleSuccess() { |
93 | 107 | reload(); |
94 | 108 | } |
... | ... | @@ -99,7 +113,9 @@ |
99 | 113 | handleAdd, |
100 | 114 | handleEdit, |
101 | 115 | handleDelete, |
116 | + handleMutilteDelete, | |
102 | 117 | handleSuccess, |
118 | + useSelectionChange, | |
103 | 119 | }; |
104 | 120 | }, |
105 | 121 | }); | ... | ... |