简柏林 / thingskit-front · Commits

Commit 1756ab8d4273ec7045b8cf5cc5f7803165bbcc90

Authored by xp.Huang
2 parents 02b6e9cc 775670ce

Merge branch 'fix/DEFECT-1310' into 'main_dev' 

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

See merge request yunteng/thingskit-front!625
Inline Side-by-side
Showing 2 changed files with 375 additions and 372 deletions
1   -import { BasicColumn, BasicTableProps, FormSchema } from '/@/components/Table';
2   -import moment from 'moment';
3   -import { h } from 'vue';
4   -
5   -//业务权限配置
6   -export enum PermissionConvertScriptEnum {
7   - PERMISSION_POST = 'api:yt:js:post',
8   - PERMISSION_DELETE = 'api:yt:js:delete',
9   - PERMISSION_TEST = 'api:yt:js:test',
10   - PERMISSION_UPDATE = 'api:yt:js:update',
11   - PERMISSION_UPDATE_STATUS = 'api:yt:js:update:status',
12   -}
13   -
14   -//业务文字描述配置
15   -export enum BusinessConvertScriptTextEnum {
16   - BUSINESS_ENABLE_SUCCESS = '启用成功',
17   - BUSINESS_DISABLE_SUCCESS = '禁用成功',
18   - BUSINESS_ADD_TEXT = '新增转换脚本',
19   - BUSINESS_DELETE_TEXT = '批量删除',
20   - BUSINESS_VIEW_TEXT = '查看转换脚本',
21   - BUSINESS_TEST_TEXT = '测试转换脚本',
22   - BUSINESS_EDIT_TEXT = '编辑转换脚本',
23   - BUSINESS_SUBMIT_TEXT = '确定',
24   -}
25   -
26   -//业务脚本类型枚举
27   -export enum ScriptTypeEnum {
28   - //上行脚本
29   - TRANSPORT_TCP_UP = 'TRANSPORT_TCP_UP',
30   - //设备鉴权
31   - TRANSPORT_TCP_AUTH = 'TRANSPORT_TCP_AUTH',
32   -}
33   -
34   -//Ace编辑器通用配置
35   -export const aceEditorAttribtes = {
36   - maxLines: 16, // 最大行数，超过会自动出现滚动条
37   - minLines: 12, // 最小行数，还未到最大行数时，编辑器会自动伸缩大小
38   - fontSize: 14, // 编辑器内字体大小
39   - theme: 'ace/theme/chrome', // 默认设置的主题
40   - mode: 'ace/mode/javascript', // 默认设置的语言模式
41   - tabSize: 2, // 制表符设置为 4 个空格大小
42   -};
43   -
44   -export const aceEditorOptions = {
45   - enableBasicAutocompletion: true,
46   - enableLiveAutocompletion: true,
47   - enableSnippets: true,
48   - enableEmmet: true,
49   -};
50   -
51   -// 表格配置
52   -export const columns: BasicColumn[] = [
53   - {
54   - title: '脚本名称',
55   - dataIndex: 'name',
56   - width: 80,
57   - },
58   - {
59   - title: '脚本状态',
60   - dataIndex: 'status',
61   - width: 120,
62   - slots: { customRender: 'status' },
63   - },
64   - {
65   - title: '脚本内容',
66   - dataIndex: 'convertJs',
67   - width: 120,
68   - slots: { customRender: 'convertJs' },
69   - },
70   - {
71   - title: '备注',
72   - dataIndex: 'description',
73   - width: 120,
74   - },
75   - {
76   - title: '创建时间',
77   - dataIndex: 'createTime',
78   - width: 180,
79   - },
80   -];
81   -
82   -//表格通用属性配置
83   -export const defaultTableAttribtes: BasicTableProps = {
84   - columns,
85   - title: '转换脚本列表',
86   - showIndexColumn: false,
87   - clickToRowSelect: false,
88   - useSearchForm: true,
89   - showTableSetting: true,
90   - bordered: true,
91   - rowKey: 'id',
92   - actionColumn: {
93   - width: 200,
94   - title: '操作',
95   - dataIndex: 'action',
96   - slots: { customRender: 'action' },
97   - fixed: 'right',
98   - },
99   -};
100   -
101   -// 表格查询配置
102   -export const searchFormSchema: FormSchema[] = [
103   - {
104   - field: 'name',
105   - label: '脚本名称',
106   - component: 'Input',
107   - colProps: { span: 6 },
108   - componentProps: {
109   - maxLength: 36,
110   - placeholder: '请输入配置名称',
111   - },
112   - },
113   - {
114   - field: 'sendTime',
115   - label: '创建时间',
116   - component: 'RangePicker',
117   - componentProps: {
118   - showTime: {
119   - defaultValue: [moment('00:00:00', 'HH:mm:ss'), moment('23:59:59', 'HH:mm:ss')],
120   - },
121   - },
122   - colProps: { span: 6 },
123   - },
124   -];
125   -
126   -//示例配置
127   -export const defaultAuthTitle = h('div', { style: 'background:#404040' }, [
128   - h('h3', { style: 'color:white' }, '设备鉴权示例'),
129   - h('h3', { style: 'color:white' }, '输入参数：为16进制字符串'),
130   - h('h3', { style: 'color:white' }, '输出参数：{"password":"","success":""}'),
131   - h('h3', { style: 'color:white' }, 'password为设备鉴权信息，success为鉴权成功后响应给设备的内容'),
132   -]);
133   -
134   -export const defaultUpTitle = h('div', { style: 'background:#404040' }, [
135   - h('h3', { style: 'color:white' }, '上行数据解析示例'),
136   - h('h3', { style: 'color:white' }, '输入参数:为字符串'),
137   - h(
138   - 'h3',
139   - { style: 'color:white' },
140   - `输出参数:{"datas":{"source":""},"telemetry":true,"ackMsg":"","deviceName":"","ts":1681701034289}`
141   - ),
142   - h(
143   - 'h3',
144   - { style: 'color:white' },
145   - `datas：json对象，属性名为遥测指标或子设备名称
146   - telemetry: datas内容是否为遥测数据
147   - ackMsg: 响应给设备的确认消息
148   - deviceName: 设备名称
149   - ts: 数据采集时间`
150   - ),
151   -]);
152   -
153   -//用例配置
154   -export const defaultScriptTypeContent = {
155   - TRANSPORT_TCP_UP: `/*网关上行脚本*/
156   -var teleData = {};
157   -/*物模型数据(可选)：原始数据*/
158   -teleData.source = params;
159   -/*网关设备：slaveDevice是网关子设备的“设备标识”*/
160   -slaveDevice = params.substr(0, 2);
161   -teleData[slaveDevice] = params;
162   -out.datas = teleData;
163   -out.telemetry = true;
164   -/*必填：true表示设备上报的遥测数据，false表示命令下发的响应数据*/
165   - `,
166   - TRANSPORT_TCP_AUTH: `/*必填：设备的访问令牌*/
167   -out.password = params;
168   -/*选填：设备鉴权成功后响应给设备的信息*/
169   -out.success = params;
170   - `,
171   -};
172   -
173   -export const defaultTestUpExample = defaultScriptTypeContent['TRANSPORT_TCP_UP'];
174   -
175   -export const defaultTestAuthExample = defaultScriptTypeContent['TRANSPORT_TCP_AUTH'];
176   -
177   -export const defaultTestSubGatewayUpExample = `/*params为TCP上报的标准ModBus数据,实际使用或测试时请删除*/
178   -var params = "010304026C00883BF0"
179   -var teleData = {};
180   -/*物模型数据(可选)：原始数据*/
181   -teleData.source = params;
182   -/*直连设备：tempVal是产品物模型中所定义属性的标识符*/
183   -tempVal = params;
184   -/*物模型温度标识符*/
185   -teleData.temperature = (parseInt('0x'+tempVal.substr(10, 4))*0.1).toFixed(2);
186   -/*物模型湿度标识符*/
187   -teleData.humidity = (parseInt('0x'+tempVal.substr(6, 4))*0.1).toFixed(2);
188   -out.datas = teleData;
189   -/*必填：true表示设备上报的遥测数据，false表示命令下发的响应数据*/
190   -out.telemetry = true;`;
  1 +import { BasicColumn, BasicTableProps, FormSchema } from '/@/components/Table';
  2 +import moment from 'moment';
  3 +import { h } from 'vue';
  4 +
  5 +//业务权限配置
  6 +export enum PermissionConvertScriptEnum {
  7 + PERMISSION_POST = 'api:yt:js:post',
  8 + PERMISSION_DELETE = 'api:yt:js:delete',
  9 + PERMISSION_TEST = 'api:yt:js:test',
  10 + PERMISSION_UPDATE = 'api:yt:js:update',
  11 + PERMISSION_UPDATE_STATUS = 'api:yt:js:update:status',
  12 +}
  13 +
  14 +//业务文字描述配置
  15 +export enum BusinessConvertScriptTextEnum {
  16 + BUSINESS_ENABLE_SUCCESS = '启用成功',
  17 + BUSINESS_DISABLE_SUCCESS = '禁用成功',
  18 + BUSINESS_ADD_TEXT = '新增转换脚本',
  19 + BUSINESS_DELETE_TEXT = '批量删除',
  20 + BUSINESS_VIEW_TEXT = '查看转换脚本',
  21 + BUSINESS_TEST_TEXT = '测试转换脚本',
  22 + BUSINESS_EDIT_TEXT = '编辑转换脚本',
  23 + BUSINESS_SUBMIT_TEXT = '确定',
  24 +}
  25 +
  26 +//业务脚本类型枚举
  27 +export enum ScriptTypeEnum {
  28 + //上行脚本
  29 + TRANSPORT_TCP_UP = 'TRANSPORT_TCP_UP',
  30 + //设备鉴权
  31 + TRANSPORT_TCP_AUTH = 'TRANSPORT_TCP_AUTH',
  32 +}
  33 +
  34 +//Ace编辑器通用配置
  35 +export const aceEditorAttribtes = {
  36 + maxLines: 16, // 最大行数，超过会自动出现滚动条
  37 + minLines: 12, // 最小行数，还未到最大行数时，编辑器会自动伸缩大小
  38 + fontSize: 14, // 编辑器内字体大小
  39 + theme: 'ace/theme/chrome', // 默认设置的主题
  40 + mode: 'ace/mode/javascript', // 默认设置的语言模式
  41 + tabSize: 2, // 制表符设置为 4 个空格大小
  42 +};
  43 +
  44 +export const aceEditorOptions = {
  45 + enableBasicAutocompletion: true,
  46 + enableLiveAutocompletion: true,
  47 + enableSnippets: true,
  48 + enableEmmet: true,
  49 +};
  50 +
  51 +// 表格配置
  52 +export const columns: BasicColumn[] = [
  53 + {
  54 + title: '脚本名称',
  55 + dataIndex: 'name',
  56 + width: 80,
  57 + },
  58 + {
  59 + title: '脚本状态',
  60 + dataIndex: 'status',
  61 + width: 120,
  62 + slots: { customRender: 'status' },
  63 + },
  64 + {
  65 + title: '脚本内容',
  66 + dataIndex: 'convertJs',
  67 + width: 120,
  68 + slots: { customRender: 'convertJs' },
  69 + },
  70 + {
  71 + title: '备注',
  72 + dataIndex: 'description',
  73 + width: 120,
  74 + },
  75 + {
  76 + title: '创建时间',
  77 + dataIndex: 'createTime',
  78 + width: 180,
  79 + },
  80 +];
  81 +
  82 +//表格通用属性配置
  83 +export const defaultTableAttribtes: BasicTableProps = {
  84 + columns,
  85 + title: '转换脚本列表',
  86 + showIndexColumn: false,
  87 + clickToRowSelect: false,
  88 + // useSearchForm: true,
  89 + showTableSetting: true,
  90 + bordered: true,
  91 + rowKey: 'id',
  92 + actionColumn: {
  93 + width: 200,
  94 + title: '操作',
  95 + dataIndex: 'action',
  96 + slots: { customRender: 'action' },
  97 + fixed: 'right',
  98 + },
  99 +};
  100 +
  101 +// 表格查询配置
  102 +export const searchFormSchema: FormSchema[] = [
  103 + {
  104 + field: 'name',
  105 + label: '脚本名称',
  106 + component: 'Input',
  107 + colProps: { span: 6 },
  108 + componentProps: {
  109 + maxLength: 36,
  110 + placeholder: '请输入配置名称',
  111 + },
  112 + },
  113 + {
  114 + field: 'sendTime',
  115 + label: '创建时间',
  116 + component: 'RangePicker',
  117 + componentProps: {
  118 + showTime: {
  119 + defaultValue: [moment('00:00:00', 'HH:mm:ss'), moment('23:59:59', 'HH:mm:ss')],
  120 + },
  121 + },
  122 + colProps: { span: 6 },
  123 + },
  124 +];
  125 +
  126 +//示例配置
  127 +export const defaultAuthTitle = h('div', { style: 'background:#404040' }, [
  128 + h('h3', { style: 'color:white' }, '设备鉴权示例'),
  129 + h('h3', { style: 'color:white' }, '输入参数：为16进制字符串'),
  130 + h('h3', { style: 'color:white' }, '输出参数：{"password":"","success":""}'),
  131 + h('h3', { style: 'color:white' }, 'password为设备鉴权信息，success为鉴权成功后响应给设备的内容'),
  132 +]);
  133 +
  134 +export const defaultUpTitle = h('div', { style: 'background:#404040' }, [
  135 + h('h3', { style: 'color:white' }, '上行数据解析示例'),
  136 + h('h3', { style: 'color:white' }, '输入参数:为字符串'),
  137 + h(
  138 + 'h3',
  139 + { style: 'color:white' },
  140 + `输出参数:{"datas":{"source":""},"telemetry":true,"ackMsg":"","deviceName":"","ts":1681701034289}`
  141 + ),
  142 + h(
  143 + 'h3',
  144 + { style: 'color:white' },
  145 + `datas：json对象，属性名为遥测指标或子设备名称
  146 + telemetry: datas内容是否为遥测数据
  147 + ackMsg: 响应给设备的确认消息
  148 + deviceName: 设备名称
  149 + ts: 数据采集时间`
  150 + ),
  151 +]);
  152 +
  153 +//用例配置
  154 +export const defaultScriptTypeContent = {
  155 + TRANSPORT_TCP_UP: `/*网关上行脚本*/
  156 +var teleData = {};
  157 +/*物模型数据(可选)：原始数据*/
  158 +teleData.source = params;
  159 +/*网关设备：slaveDevice是网关子设备的“设备标识”*/
  160 +slaveDevice = params.substr(0, 2);
  161 +teleData[slaveDevice] = params;
  162 +out.datas = teleData;
  163 +out.telemetry = true;
  164 +/*必填：true表示设备上报的遥测数据，false表示命令下发的响应数据*/
  165 + `,
  166 + TRANSPORT_TCP_AUTH: `/*必填：设备的访问令牌*/
  167 +out.password = params;
  168 +/*选填：设备鉴权成功后响应给设备的信息*/
  169 +out.success = params;
  170 + `,
  171 +};
  172 +
  173 +export const defaultTestUpExample = defaultScriptTypeContent['TRANSPORT_TCP_UP'];
  174 +
  175 +export const defaultTestAuthExample = defaultScriptTypeContent['TRANSPORT_TCP_AUTH'];
  176 +
  177 +export const defaultTestSubGatewayUpExample = `/*params为TCP上报的标准ModBus数据,实际使用或测试时请删除*/
  178 +var params = "010304026C00883BF0"
  179 +var teleData = {};
  180 +/*物模型数据(可选)：原始数据*/
  181 +teleData.source = params;
  182 +/*直连设备：tempVal是产品物模型中所定义属性的标识符*/
  183 +tempVal = params;
  184 +/*物模型温度标识符*/
  185 +teleData.temperature = (parseInt('0x'+tempVal.substr(10, 4))*0.1).toFixed(2);
  186 +/*物模型湿度标识符*/
  187 +teleData.humidity = (parseInt('0x'+tempVal.substr(6, 4))*0.1).toFixed(2);
  188 +out.datas = teleData;
  189 +/*必填：true表示设备上报的遥测数据，false表示命令下发的响应数据*/
  190 +out.telemetry = true;`;
... ...
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 + defaultTableAttribtes,
  112 + BusinessConvertScriptTextEnum,
  113 + } from './config';
  114 + import { ConverScriptModal } from './components';
  115 + import { usePermission } from '/@/hooks/web/usePermission';
  116 +
  117 + const props = defineProps<{ searchInfo: Recordable }>();
  118 +
  119 + const searchInfo = reactive<Recordable>({});
  120 +
  121 + const { hasPermission } = usePermission();
  122 +
  123 + const [registerTable, { reload, setProps, setSelectedRowKeys }] = useTable({
  124 + api: ScriptPage,
  125 + ...defaultTableAttribtes,
  126 + beforeFetch: (params: Recordable) => {
  127 + return { ...unref(props.searchInfo), ...params };
  128 + },
  129 + });
  130 +
  131 + const handleSuccess = () => {
  132 + reload();
  133 + };
  134 +
  135 + const { hasBatchDelete, handleDeleteOrBatchDelete, selectionOptions, resetSelectedRowKeys } =
  136 + useBatchDelete(deleteScriptManage, handleSuccess, setProps) as any;
  137 + selectionOptions.rowSelection.getCheckboxProps = (record: Recordable) => {
  138 + if (record.status === 1) return { disabled: true };
  139 + else return { disabled: false };
  140 + };
  141 +
  142 + nextTick(() => {
  143 + setProps(selectionOptions);
  144 + });
  145 +
  146 + const [registerModal, { openModal }] = useModal();
  147 +
  148 + // 业务弹窗
  149 + const handleBusinessModal = (text, record: Recordable | null) => {
  150 + const modalParams = {
  151 + text,
  152 + record,
  153 + };
  154 + openModal(true, modalParams);
  155 + };
  156 +
  157 + const setPropsLoading = (loading) => {
  158 + setProps({
  159 + loading,
  160 + });
  161 + setSelectedRowKeys([]);
  162 + resetSelectedRowKeys();
  163 + };
  164 +
  165 + const statusChange = async (checked, record) => {
  166 + setPropsLoading(true);
  167 + const newStatus = checked ? 1 : 0;
  168 + const { createMessage } = useMessage();
  169 + try {
  170 + await scriptPagePutApi(record.id, newStatus);
  171 + if (newStatus)
  172 + return createMessage.success(BusinessConvertScriptTextEnum.BUSINESS_ENABLE_SUCCESS);
  173 + else return createMessage.success(BusinessConvertScriptTextEnum.BUSINESS_DISABLE_SUCCESS);
  174 + } finally {
  175 + setPropsLoading(false);
  176 + reload();
  177 + }
  178 + };
  179 +
  180 + defineExpose({
  181 + reload: () => {
  182 + reload();
  183 + },
  184 + });
  185 +</script>
... ...