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