简柏林 / thingskit-front · Commits

Commit 6aca1fc46e0a8e32f86d42d7c5ab371ed2fd0092

Authored by ww
1 parent cc1ffdd9

fix: DEFECT-1310 修复脚本管理无更新脚本状态权限时状态不可见

Inline Side-by-side
Showing 1 changed file with 191 additions and 182 deletions
1   -<template>
2   - <div>
3   - <BasicTable :clickToRowSelect="false" @register="registerTable" :searchInfo="searchInfo">
4   - <template #toolbar>
5   - <Authority :value="PermissionConvertScriptEnum.PERMISSION_POST">
6   - <a-button
7   - type="primary"
8   - @click="handleBusinessModal(BusinessConvertScriptTextEnum.BUSINESS_ADD_TEXT, null)"
9   - >
10   - {{ BusinessConvertScriptTextEnum.BUSINESS_ADD_TEXT }}
11   - </a-button>
12   - </Authority>
13   - <Authority :value="PermissionConvertScriptEnum.PERMISSION_DELETE">
14   - <Popconfirm
15   - title="您确定要批量删除数据"
16   - ok-text="确定"
17   - cancel-text="取消"
18   - @confirm="handleDeleteOrBatchDelete(null)"
19   - >
20   - <a-button type="primary" color="error" :disabled="hasBatchDelete">
21   - {{ BusinessConvertScriptTextEnum.BUSINESS_DELETE_TEXT }}
22   - </a-button>
23   - </Popconfirm>
24   - </Authority>
25   - </template>
26   - <template #convertJs="{ record }">
27   - <a-button
28   - type="text"
29   - @click="handleBusinessModal(BusinessConvertScriptTextEnum.BUSINESS_VIEW_TEXT, record)"
30   - >
31   - <span style="color: #377dff">{{
32   - BusinessConvertScriptTextEnum.BUSINESS_VIEW_TEXT.slice(0, 2)
33   - }}</span>
34   - </a-button>
35   - </template>
36   - <template #action="{ record }">
37   - <TableAction
38   - :actions="[
39   - {
40   - label: BusinessConvertScriptTextEnum.BUSINESS_TEST_TEXT.slice(0, 2),
41   - icon: 'ant-design:font-size-outlined',
42   - auth: PermissionConvertScriptEnum.PERMISSION_TEST,
43   - onClick: handleBusinessModal.bind(
44   - null,
45   - BusinessConvertScriptTextEnum.BUSINESS_TEST_TEXT,
46   - record
47   - ),
48   - },
49   - {
50   - label: BusinessConvertScriptTextEnum.BUSINESS_EDIT_TEXT.slice(0, 2),
51   - icon: 'clarity:note-edit-line',
52   - auth: PermissionConvertScriptEnum.PERMISSION_UPDATE,
53   - onClick: handleBusinessModal.bind(
54   - null,
55   - BusinessConvertScriptTextEnum.BUSINESS_EDIT_TEXT,
56   - record
57   - ),
58   - ifShow: record.status == 0,
59   - },
60   - {
61   - label: BusinessConvertScriptTextEnum.BUSINESS_DELETE_TEXT.slice(-2),
62   - icon: 'ant-design:delete-outlined',
63   - auth: PermissionConvertScriptEnum.PERMISSION_DELETE,
64   - color: 'error',
65   - ifShow: record.status == 0,
66   - popConfirm: {
67   - title: '是否确认删除',
68   - confirm: handleDeleteOrBatchDelete.bind(null, record),
69   - },
70   - },
71   - ]"
72   - />
73   - </template>
74   - <template #status="{ record }">
75   - <Authority :value="PermissionConvertScriptEnum.PERMISSION_UPDATE_STATUS">
76   - <Switch
77   - :checked="record.status === 1"
78   - :loading="record.pendingStatus"
79   - checkedChildren="启用"
80   - unCheckedChildren="禁用"
81   - @change="(checked:boolean)=>statusChange(checked,record)"
82   - />
83   - </Authority>
84   - </template>
85   - </BasicTable>
86   - <ConverScriptModal @register="registerModal" @success="handleSuccess" />
87   - </div>
88   -</template>
89   -
90   -<script lang="ts" setup name="index">
91   - import { reactive, nextTick, unref } from 'vue';
92   - import { BasicTable, useTable, TableAction } from '/@/components/Table';
93   - import { Authority } from '/@/components/Authority';
94   - import { useModal } from '/@/components/Modal';
95   - import { useBatchDelete } from '/@/hooks/web/useBatchDelete';
96   - import { Switch, Popconfirm } from 'ant-design-vue';
97   - import { useMessage } from '/@/hooks/web/useMessage';
98   - import {
99   - ScriptPage,
100   - deleteScriptManage,
101   - scriptPagePutApi,
102   - } from '/@/api/scriptmanage/scriptManager';
103   - import {
104   - PermissionConvertScriptEnum,
105   - searchFormSchema,
106   - defaultTableAttribtes,
107   - BusinessConvertScriptTextEnum,
108   - } from './config';
109   - import { ConverScriptModal } from './components';
110   -
111   - const props = defineProps<{ searchInfo: Recordable }>();
112   -
113   - const searchInfo = reactive<Recordable>({});
114   -
115   - const [registerTable, { reload, setProps, setSelectedRowKeys }] = useTable({
116   - api: ScriptPage,
117   - ...defaultTableAttribtes,
118   - beforeFetch: (params: Recordable) => {
119   - return { ...unref(props.searchInfo), ...params };
120   - },
121   - formConfig: {
122   - labelWidth: 120,
123   - schemas: searchFormSchema,
124   - fieldMapToTime: [['sendTime', ['startTime', 'endTime'], 'x']],
125   - },
126   - });
127   -
128   - const handleSuccess = () => {
129   - reload();
130   - };
131   -
132   - const { hasBatchDelete, handleDeleteOrBatchDelete, selectionOptions, resetSelectedRowKeys } =
133   - useBatchDelete(deleteScriptManage, handleSuccess, setProps) as any;
134   - selectionOptions.rowSelection.getCheckboxProps = (record: Recordable) => {
135   - if (record.status === 1) return { disabled: true };
136   - else return { disabled: false };
137   - };
138   -
139   - nextTick(() => {
140   - setProps(selectionOptions);
141   - });
142   -
143   - const [registerModal, { openModal }] = useModal();
144   -
145   - // 业务弹窗
146   - const handleBusinessModal = (text, record: Recordable | null) => {
147   - const modalParams = {
148   - text,
149   - record,
150   - };
151   - openModal(true, modalParams);
152   - };
153   -
154   - const setPropsLoading = (loading) => {
155   - setProps({
156   - loading,
157   - });
158   - setSelectedRowKeys([]);
159   - resetSelectedRowKeys();
160   - };
161   -
162   - const statusChange = async (checked, record) => {
163   - setPropsLoading(true);
164   - const newStatus = checked ? 1 : 0;
165   - const { createMessage } = useMessage();
166   - try {
167   - await scriptPagePutApi(record.id, newStatus);
168   - if (newStatus)
169   - return createMessage.success(BusinessConvertScriptTextEnum.BUSINESS_ENABLE_SUCCESS);
170   - else return createMessage.success(BusinessConvertScriptTextEnum.BUSINESS_DISABLE_SUCCESS);
171   - } finally {
172   - setPropsLoading(false);
173   - reload();
174   - }
175   - };
176   -
177   - defineExpose({
178   - reload: () => {
179   - reload();
180   - },
181   - });
182   -</script>
  1 +<template>
  2 + <div>
  3 + <BasicTable :clickToRowSelect="false" @register="registerTable" :searchInfo="searchInfo">
  4 + <template #toolbar>
  5 + <Authority :value="PermissionConvertScriptEnum.PERMISSION_POST">
  6 + <a-button
  7 + type="primary"
  8 + @click="handleBusinessModal(BusinessConvertScriptTextEnum.BUSINESS_ADD_TEXT, null)"
  9 + >
  10 + {{ BusinessConvertScriptTextEnum.BUSINESS_ADD_TEXT }}
  11 + </a-button>
  12 + </Authority>
  13 + <Authority :value="PermissionConvertScriptEnum.PERMISSION_DELETE">
  14 + <Popconfirm
  15 + title="您确定要批量删除数据"
  16 + ok-text="确定"
  17 + cancel-text="取消"
  18 + @confirm="handleDeleteOrBatchDelete(null)"
  19 + >
  20 + <a-button type="primary" color="error" :disabled="hasBatchDelete">
  21 + {{ BusinessConvertScriptTextEnum.BUSINESS_DELETE_TEXT }}
  22 + </a-button>
  23 + </Popconfirm>
  24 + </Authority>
  25 + </template>
  26 + <template #convertJs="{ record }">
  27 + <a-button
  28 + type="text"
  29 + @click="handleBusinessModal(BusinessConvertScriptTextEnum.BUSINESS_VIEW_TEXT, record)"
  30 + >
  31 + <span style="color: #377dff">{{
  32 + BusinessConvertScriptTextEnum.BUSINESS_VIEW_TEXT.slice(0, 2)
  33 + }}</span>
  34 + </a-button>
  35 + </template>
  36 + <template #action="{ record }">
  37 + <TableAction
  38 + :actions="[
  39 + {
  40 + label: BusinessConvertScriptTextEnum.BUSINESS_TEST_TEXT.slice(0, 2),
  41 + icon: 'ant-design:font-size-outlined',
  42 + auth: PermissionConvertScriptEnum.PERMISSION_TEST,
  43 + onClick: handleBusinessModal.bind(
  44 + null,
  45 + BusinessConvertScriptTextEnum.BUSINESS_TEST_TEXT,
  46 + record
  47 + ),
  48 + },
  49 + {
  50 + label: BusinessConvertScriptTextEnum.BUSINESS_EDIT_TEXT.slice(0, 2),
  51 + icon: 'clarity:note-edit-line',
  52 + auth: PermissionConvertScriptEnum.PERMISSION_UPDATE,
  53 + onClick: handleBusinessModal.bind(
  54 + null,
  55 + BusinessConvertScriptTextEnum.BUSINESS_EDIT_TEXT,
  56 + record
  57 + ),
  58 + ifShow: record.status == 0,
  59 + },
  60 + {
  61 + label: BusinessConvertScriptTextEnum.BUSINESS_DELETE_TEXT.slice(-2),
  62 + icon: 'ant-design:delete-outlined',
  63 + auth: PermissionConvertScriptEnum.PERMISSION_DELETE,
  64 + color: 'error',
  65 + ifShow: record.status == 0,
  66 + popConfirm: {
  67 + title: '是否确认删除',
  68 + confirm: handleDeleteOrBatchDelete.bind(null, record),
  69 + },
  70 + },
  71 + ]"
  72 + />
  73 + </template>
  74 + <template #status="{ record }">
  75 + <Authority :value="PermissionConvertScriptEnum.PERMISSION_UPDATE_STATUS">
  76 + <Switch
  77 + :checked="record.status === 1"
  78 + :loading="record.pendingStatus"
  79 + checkedChildren="启用"
  80 + unCheckedChildren="禁用"
  81 + @change="(checked:boolean)=>statusChange(checked,record)"
  82 + />
  83 + </Authority>
  84 + <Tag
  85 + v-if="!hasPermission(PermissionConvertScriptEnum.PERMISSION_UPDATE_STATUS)"
  86 + :color="record.status ? 'green' : 'red'"
  87 + >
  88 + {{ record.status ? '启用' : '禁用' }}
  89 + </Tag>
  90 + </template>
  91 + </BasicTable>
  92 + <ConverScriptModal @register="registerModal" @success="handleSuccess" />
  93 + </div>
  94 +</template>
  95 +
  96 +<script lang="ts" setup name="index">
  97 + import { reactive, nextTick, unref } from 'vue';
  98 + import { BasicTable, useTable, TableAction } from '/@/components/Table';
  99 + import { Authority } from '/@/components/Authority';
  100 + import { useModal } from '/@/components/Modal';
  101 + import { useBatchDelete } from '/@/hooks/web/useBatchDelete';
  102 + import { Switch, Popconfirm, Tag } from 'ant-design-vue';
  103 + import { useMessage } from '/@/hooks/web/useMessage';
  104 + import {
  105 + ScriptPage,
  106 + deleteScriptManage,
  107 + scriptPagePutApi,
  108 + } from '/@/api/scriptmanage/scriptManager';
  109 + import {
  110 + PermissionConvertScriptEnum,
  111 + searchFormSchema,
  112 + defaultTableAttribtes,
  113 + BusinessConvertScriptTextEnum,
  114 + } from './config';
  115 + import { ConverScriptModal } from './components';
  116 + import { usePermission } from '/@/hooks/web/usePermission';
  117 +
  118 + const props = defineProps<{ searchInfo: Recordable }>();
  119 +
  120 + const searchInfo = reactive<Recordable>({});
  121 +
  122 + const { hasPermission } = usePermission();
  123 +
  124 + const [registerTable, { reload, setProps, setSelectedRowKeys }] = useTable({
  125 + api: ScriptPage,
  126 + ...defaultTableAttribtes,
  127 + beforeFetch: (params: Recordable) => {
  128 + return { ...unref(props.searchInfo), ...params };
  129 + },
  130 + formConfig: {
  131 + labelWidth: 120,
  132 + schemas: searchFormSchema,
  133 + fieldMapToTime: [['sendTime', ['startTime', 'endTime'], 'x']],
  134 + },
  135 + });
  136 +
  137 + const handleSuccess = () => {
  138 + reload();
  139 + };
  140 +
  141 + const { hasBatchDelete, handleDeleteOrBatchDelete, selectionOptions, resetSelectedRowKeys } =
  142 + useBatchDelete(deleteScriptManage, handleSuccess, setProps) as any;
  143 + selectionOptions.rowSelection.getCheckboxProps = (record: Recordable) => {
  144 + if (record.status === 1) return { disabled: true };
  145 + else return { disabled: false };
  146 + };
  147 +
  148 + nextTick(() => {
  149 + setProps(selectionOptions);
  150 + });
  151 +
  152 + const [registerModal, { openModal }] = useModal();
  153 +
  154 + // 业务弹窗
  155 + const handleBusinessModal = (text, record: Recordable | null) => {
  156 + const modalParams = {
  157 + text,
  158 + record,
  159 + };
  160 + openModal(true, modalParams);
  161 + };
  162 +
  163 + const setPropsLoading = (loading) => {
  164 + setProps({
  165 + loading,
  166 + });
  167 + setSelectedRowKeys([]);
  168 + resetSelectedRowKeys();
  169 + };
  170 +
  171 + const statusChange = async (checked, record) => {
  172 + setPropsLoading(true);
  173 + const newStatus = checked ? 1 : 0;
  174 + const { createMessage } = useMessage();
  175 + try {
  176 + await scriptPagePutApi(record.id, newStatus);
  177 + if (newStatus)
  178 + return createMessage.success(BusinessConvertScriptTextEnum.BUSINESS_ENABLE_SUCCESS);
  179 + else return createMessage.success(BusinessConvertScriptTextEnum.BUSINESS_DISABLE_SUCCESS);
  180 + } finally {
  181 + setPropsLoading(false);
  182 + reload();
  183 + }
  184 + };
  185 +
  186 + defineExpose({
  187 + reload: () => {
  188 + reload();
  189 + },
  190 + });
  191 +</script>
... ...