Commit 73859af7b8ce40d099706588161341f38c11b27f

Authored by sqy
1 parent 9f016c09

'fix:[DEFECT-328]:统一转换脚本的删除风格'

... ... @@ -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>
... ...
... ... @@ -112,7 +112,7 @@
112 112 showTableSetting: true,
113 113 bordered: true,
114 114 actionColumn: {
115   - width: 200,
  115 + width: 240,
116 116 title: '操作',
117 117 dataIndex: 'action',
118 118 slots: { customRender: 'action' },
... ...