简柏林 / 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>