From 6728105539e3dd44e4f24e18851b5c076151462c Mon Sep 17 00:00:00 2001 From: easy <1358086367@qq.com> Date: Thu, 12 Jan 2023 17:39:02 +0800 Subject: [PATCH 1/7] =?UTF-8?q?update:=20api=E9=85=8D=E7=BD=AE?= MIME-Version: 1.0 Content-Type: text/plain; charset=UTF-8 Content-Transfer-Encoding: 8bit --- components.d.ts | 7 +- src/components/Table/index.vue | 2 +- .../system/apiPage/components/ApiDoes.vue | 203 ++++++++++++++++-- .../system/apiPage/components/ApiTest.vue | 11 +- .../system/apiPage/components/ChooseApi.vue | 6 +- .../system/apiPage/components/LeftTree.vue | 3 +- src/views/system/apiPage/index.d.ts | 5 +- src/views/system/apiPage/index.vue | 13 +- 8 files changed, 224 insertions(+), 26 deletions(-) diff --git a/components.d.ts b/components.d.ts index f0d011ba..3e729ed1 100644 --- a/components.d.ts +++ b/components.d.ts @@ -10,11 +10,10 @@ declare module '@vue/runtime-core' { AAlert: typeof import('ant-design-vue/es')['Alert'] ABadge: typeof import('ant-design-vue/es')['Badge'] AButton: typeof import('ant-design-vue/es')['Button'] + ACard: typeof import('ant-design-vue/es')['Card'] ACheckbox: typeof import('ant-design-vue/es')['Checkbox'] ACheckboxGroup: typeof import('ant-design-vue/es')['CheckboxGroup'] ACol: typeof import('ant-design-vue/es')['Col'] - ACollapse: typeof import('ant-design-vue/es')['Collapse'] - ACollapsePanel: typeof import('ant-design-vue/es')['CollapsePanel'] ADatePicker: typeof import('ant-design-vue/es')['DatePicker'] ADivider: typeof import('ant-design-vue/es')['Divider'] AEmpty: typeof import('ant-design-vue/es')['Empty'] @@ -29,12 +28,14 @@ declare module '@vue/runtime-core' { ARadioGroup: typeof import('ant-design-vue/es')['RadioGroup'] ARow: typeof import('ant-design-vue/es')['Row'] ASelect: typeof import('ant-design-vue/es')['Select'] - ASelectOption: typeof import('ant-design-vue/es')['SelectOption'] ASpin: typeof import('ant-design-vue/es')['Spin'] ASwitch: typeof import('ant-design-vue/es')['Switch'] ATable: typeof import('ant-design-vue/es')['Table'] + ATabPane: typeof import('ant-design-vue/es')['TabPane'] + ATabs: typeof import('ant-design-vue/es')['Tabs'] ATimePicker: typeof import('ant-design-vue/es')['TimePicker'] ATooltip: typeof import('ant-design-vue/es')['Tooltip'] + ATree: typeof import('ant-design-vue/es')['Tree'] ATreeSelect: typeof import('ant-design-vue/es')['TreeSelect'] AUpload: typeof import('ant-design-vue/es')['Upload'] BadgeStatus: typeof import('./src/components/BadgeStatus/index.vue')['default'] diff --git a/src/components/Table/index.vue b/src/components/Table/index.vue index d352dcc4..6ac325ad 100644 --- a/src/components/Table/index.vue +++ b/src/components/Table/index.vue @@ -15,7 +15,7 @@
-
+
@@ -49,11 +82,21 @@ const props = defineProps({ type: Object as PropType, required: true, }, + schemas: { + type: Object, + required: true, + }, }); const { selectApi } = toRefs(props); -const columns = { - request: [ +type tableCardType = { + columns: object[]; + tableData: object[]; + activeKey?: any; + getData?: any; +}; +const requestCard = reactive({ + columns: [ { title: '参数名', dataIndex: 'name', @@ -82,13 +125,138 @@ const columns = { scopedSlots: true, }, ], -}; + tableData: [], + getData: () => { + requestCard.tableData = props.selectApi.parameters; + }, +}); +const responseStatusCard = reactive({ + activeKey: '', + columns: [ + { + title: '状态码', + dataIndex: 'code', + key: 'code', + }, + { + title: '说明', + dataIndex: 'desc', + key: 'desc', + }, + { + title: 'schema', + dataIndex: 'schema', + key: 'schema', + }, + ], + tableData: [], + getData: () => { + if (!Object.keys(props.selectApi.responses).length) + return (responseStatusCard.tableData = []); + + const tableData = []; + Object.entries(props.selectApi.responses || {}).forEach((item: any) => { + const desc = item[1].description; + const schema = item[1].content['*/*'].schema.$ref?.split('/') || ''; + + tableData.push({ + code: item[0], + desc, + schema: schema && schema.pop(), + }); + }); + responseStatusCard.activeKey = tableData[0]?.code; + responseStatusCard.tableData = tableData; + }, +}); +const tabs = computed(() => + responseStatusCard.tableData + .map((item: any) => item.code + '') + .filter((code: string) => code !== '400'), +); +const respParamsCard = reactive({ + columns: [ + { + title: '参数名称', + dataIndex: 'name', + }, + { + title: '参数说明', + dataIndex: 'desc', + }, + { + title: '类型', + dataIndex: 'type', + }, + ], + tableData: [], + getData: (code: string) => { + type schemaObjType = { + paramsName: string; + paramsType: string; + desc: string; + children?: schemaObjType[]; + }; + + const schemaName = responseStatusCard.tableData.find( + (item: any) => item.code === code, + ).schema; + console.log(1212, schemaName); + const schemas = toRaw(props.schemas); + function findData(schemaName: string) { + if (!schemaName || schemas[schemaName]) { + console.log(schemaName, schemas); + return []; + } + const result: schemaObjType[] = []; + const schema = schemas[schemaName]; + const basicType = ['string', 'integer', 'boolean']; + Object.entries(schema.properties).forEach((item: [string, any]) => { + const paramsType = + item[1].type || + (item[1].$ref && item[1].$ref.split('/').pop()) || + (item[1].items && item[1].items.$ref.split('/').pop()) || + ''; + const schemaObj: schemaObjType = { + paramsName: item[0], + paramsType, + desc: item[1].description || '', + }; + if (!basicType.includes(paramsType)) + schemaObj.children = findData(paramsType); + result.push(schemaObj); + }); + console.log(result); + + return result; + } + + respParamsCard.tableData = findData(schemaName); + // console.log(respParamsCard.tableData); + }, +}); -console.log(selectApi.value); const getContent = (data: any) => { - if (!data) return ''; - return Object.keys(data.content)[0]; + if (data && data.content) { + return Object.keys(data.content || {})[0]; + } + return ''; }; +onMounted(() => { + requestCard.getData(); + responseStatusCard.getData(); +}); +watch( + () => props.selectApi, + () => { + requestCard.getData(); + responseStatusCard.getData(); + }, +); + +watch([() => responseStatusCard.activeKey, () => props.selectApi], (n) => { + n[0] && respParamsCard.getData(n[0]); +}); \ No newline at end of file + diff --git a/src/views/system/apiPage/components/ChooseApi.vue b/src/views/system/apiPage/components/ChooseApi.vue index 24362336..bb6e5548 100644 --- a/src/views/system/apiPage/components/ChooseApi.vue +++ b/src/views/system/apiPage/components/ChooseApi.vue @@ -43,9 +43,9 @@ const columns = [ }, ]; const rowSelection: TableProps['rowSelection'] = { - // onChange: (selectedRowKeys, selectedRows) => { - // console.log(`selectedRowKeys: ${selectedRowKeys}`, 'selectedRows: ', selectedRows); - // }, + onChange: (selectedRowKeys, selectedRows) => { + console.log(`selectedRowKeys: ${selectedRowKeys}`, 'selectedRows: ', selectedRows); + }, }; const jump = (row:object) => { diff --git a/src/views/system/apiPage/components/LeftTree.vue b/src/views/system/apiPage/components/LeftTree.vue index cbae4bea..e933c925 100644 --- a/src/views/system/apiPage/components/LeftTree.vue +++ b/src/views/system/apiPage/components/LeftTree.vue @@ -32,13 +32,14 @@ const getTreeData = () => { Promise.all(allPromise).then((values) => { values.forEach((item: any, i) => { tree[i].children = combData(item?.paths); + tree[i].schemas = item.components.schemas }); treeData.value = tree; }); }); }; const clickSelectItem: TreeProps['onSelect'] = (key, node: any) => { - emits('select', node.node.dataRef); + emits('select', node.node.dataRef, node.node?.parent.node.schemas); }; onMounted(() => { diff --git a/src/views/system/apiPage/index.d.ts b/src/views/system/apiPage/index.d.ts index e206edd0..7937398b 100644 --- a/src/views/system/apiPage/index.d.ts +++ b/src/views/system/apiPage/index.d.ts @@ -1,9 +1,11 @@ export type treeNodeTpye = { name: string; key: string; + schemas?:object; link?: string; apiList?: object[]; children?: treeNodeTpye[]; + }; export type methodType = { [key: string]: object @@ -17,6 +19,7 @@ export type apiDetailsType = { url: string; method: string; summary: string; - parameters: []; + parameters: any[]; requestBody?: any; + responses:object; } \ No newline at end of file diff --git a/src/views/system/apiPage/index.vue b/src/views/system/apiPage/index.vue index cb82abca..397806a5 100644 --- a/src/views/system/apiPage/index.vue +++ b/src/views/system/apiPage/index.vue @@ -15,12 +15,12 @@ class="api-details" v-show="selectedApi.url && tableData.length > 0" > - 返回 - + @@ -40,7 +40,8 @@ import ApiDoes from './components/ApiDoes.vue'; import ApiTest from './components/ApiTest.vue'; const tableData = ref([]); -const treeSelect = (node: treeNodeTpye) => { +const treeSelect = (node: treeNodeTpye, nodeSchemas:object = {}) => { + schemas.value = nodeSchemas if (!node.apiList) return; const apiList: apiObjType[] = node.apiList as apiObjType[]; const table: any = []; @@ -61,10 +62,14 @@ const treeSelect = (node: treeNodeTpye) => { }; const activeKey = ref('does'); -const initSelectedApi = { +const schemas = ref({}); +const initSelectedApi:apiDetailsType = { url: '', method: '', summary: '', + parameters: [], + responses: {}, + requestBody: {} }; const selectedApi = ref(initSelectedApi); From 20061fb4993a505d15a4255a7cb05d826c39ee12 Mon Sep 17 00:00:00 2001 From: 100011797 <2642441182@qq.com> Date: Thu, 12 Jan 2023 18:23:53 +0800 Subject: [PATCH 2/7] fix: table actions --- src/components/CardBox/index.vue | 43 ++++----- src/components/Table/index.tsx | 75 ++++++++++++--- src/views/demo/table/index.vue | 160 ++++++++++++++++++------------- 3 files changed, 174 insertions(+), 104 deletions(-) diff --git a/src/components/CardBox/index.vue b/src/components/CardBox/index.vue index 1cc26f6e..4da3e72c 100644 --- a/src/components/CardBox/index.vue +++ b/src/components/CardBox/index.vue @@ -54,31 +54,24 @@ delete: item.key === 'delete', }" > + - - +
@@ -291,10 +284,10 @@ const handleClick = () => { display: flex; flex-grow: 1; - > span, - & button { - width: 100%; - border-radius: 0; + & > span, + button { + width: 100% !important; + border-radius: 0 !important; } button { @@ -372,9 +365,9 @@ const handleClick = () => { } } - :deep(.ant-tooltip-disabled-compatible-wrapper) { - width: 100%; - } + // :deep(.ant-tooltip-disabled-compatible-wrapper) { + // width: 100%; + // } } } } diff --git a/src/components/Table/index.tsx b/src/components/Table/index.tsx index 38e2e6af..915657c7 100644 --- a/src/components/Table/index.tsx +++ b/src/components/Table/index.tsx @@ -50,11 +50,20 @@ export interface JTableProps extends TableProps{ pageIndex: number; }; model?: keyof typeof ModelEnum | undefined; // 显示table还是card - actions?: ActionsType[]; + // actions?: ActionsType[]; noPagination?: boolean; rowSelection?: TableProps['rowSelection']; cardProps?: Record; dataSource?: Record[]; + gridColumn: number; + /** + * 用于不同分辨率 + * gridColumns[0] 1366 ~ 1440 分辨率； + * gridColumns[1] 1440 ~ 1600 分辨率； + * gridColumns[2] > 1600 分辨率； + */ + gridColumns?: number[]; + alertRender?: boolean; } const JTable = defineComponent({ @@ -87,10 +96,10 @@ const JTable = defineComponent({ type: [String, undefined], default: undefined }, - actions: { - type: Array as PropType, - default: () => [] - }, + // actions: { + // type: Array as PropType, + // default: () => [] + // }, noPagination: { type: Boolean, default: false @@ -106,12 +115,24 @@ const JTable = defineComponent({ dataSource: { type: Array, default: () => [] + }, + gridColumns: { + type: Array as PropType, + default: [2, 3, 4] + }, + gridColumn: { + type: Number, + default: 4 + }, + alertRender: { + type: Boolean, + default: true } } as any, setup(props: JTableProps ,{ slots, emit }){ const simpleImage = Empty.PRESENTED_IMAGE_SIMPLE const _model = ref(props.model ? props.model : ModelEnum.CARD); // 模式切换 - const column = ref(4); + const column = ref(props.gridColumn || 4); const _dataSource = ref[]>([]) const pageIndex = ref(0) const pageSize = ref(6) @@ -119,9 +140,20 @@ const JTable = defineComponent({ const _columns = ref(props?.columns || []) const loading = ref(true) - // alert关闭，取消选择 - const handleAlertClose = () => { - emit('cancelSelect') + /** + * 监听宽度，计算显示卡片个数 + */ + const windowChange = () => { + if (window.innerWidth <= 1440) { + const _column = props.gridColumn && props.gridColumn < 2 ? props.gridColumn : 2; + column.value = props.gridColumns ? props.gridColumns[0] : _column + } else if (window.innerWidth > 1440 && window.innerWidth <= 1600) { + const _column = props.gridColumn && props.gridColumn < 3 ? props.gridColumn : 3; + column.value = props.gridColumns ? props.gridColumns[1] : _column + } else if (window.innerWidth > 1600) { + const _column = props.gridColumn && props.gridColumn < 4 ? props.gridColumn : 4; + column.value = props.gridColumns ? props.gridColumns[2] : _column + } } /** @@ -153,13 +185,22 @@ const JTable = defineComponent({ } else { _dataSource.value = props?.dataSource || [] } - loading.value = false } watchEffect(() => { handleSearch(props.params) }) + + onMounted(() => { + window.onresize = () => { + windowChange() + } + }) + + onUnmounted(() => { + window.onresize = null + }) return () =>
@@ -184,12 +225,14 @@ const JTable = defineComponent({ {/* content */}
{ - props?.rowSelection && props?.rowSelection?.selectedRowKeys && props.rowSelection.selectedRowKeys?.length ? + props.alertRender && props?.rowSelection && props?.rowSelection?.selectedRowKeys && props.rowSelection.selectedRowKeys?.length ?
{ + emit('cancelSelect') + }} closeText={取消选择} />
: null @@ -205,8 +248,10 @@ const JTable = defineComponent({ > { _dataSource.value.map(item => slots.card ? -
{slots.card({row: item, actions: props?.actions || []})}
- : null) +
+ {slots.card(item)} +
: null + ) }
:
@@ -225,7 +270,7 @@ const JTable = defineComponent({ const {column, record} = dt; if((column?.key || column?.dataIndex) && column?.scopedSlots && (slots?.[column?.dataIndex] || slots?.[column?.key])) { const _key = column?.key || column?.dataIndex - return slots?.[_key]!({row: record, actions: props.actions}) + return slots?.[_key]!(record) } else { return record?.[column?.dataIndex] || '' } diff --git a/src/views/demo/table/index.vue b/src/views/demo/table/index.vue index 77d79fe3..5d305010 100644 --- a/src/views/demo/table/index.vue +++ b/src/views/demo/table/index.vue @@ -1,32 +1,7 @@ @@ -35,6 +39,7 @@ import { QuestionCircleOutlined } from '@ant-design/icons-vue'; import { message } from 'ant-design-vue'; import AccessMethodDialog from './dialogs/AccessMethodDialog.vue'; +import FuncTestDialog from './dialogs/FuncTestDialog.vue'; import { recommendList } from '../index'; diff --git a/src/views/home/components/dialogs/FuncTestDialog.vue b/src/views/home/components/dialogs/FuncTestDialog.vue index dc7f1b62..9f285087 100644 --- a/src/views/home/components/dialogs/FuncTestDialog.vue +++ b/src/views/home/components/dialogs/FuncTestDialog.vue @@ -3,7 +3,7 @@ - + - + 搜索 - + 重置
- - - + @@ -65,10 +62,10 @@ const handleOk = () => { watch( () => props.openNumber, () => { + visible.value = true; clickReset(); getOptions(); clickSearch(); - visible.value = true; }, ); @@ -122,4 +119,11 @@ const selectItem: deviceInfo | {} = {}; const getList = () => {}; - + diff --git a/src/views/home/index.vue b/src/views/home/index.vue index b0229d95..7129a745 100644 --- a/src/views/home/index.vue +++ b/src/views/home/index.vue @@ -6,8 +6,7 @@ - - +
@@ -17,7 +16,6 @@ import InitHome from './components/InitHome/index.vue'; import DeviceHome from './components/DeviceHome/index.vue'; import DevOpsHome from './components/DevOpsHome/index.vue'; import ComprehensiveHome from './components/ComprehensiveHome/index.vue'; -import ApiPage from '@/views/system/apiPage/index.vue' diff --git a/src/views/system/apiPage/components/ApiDoes.vue b/src/views/system/apiPage/components/ApiDoes.vue index 6935dd3b..85dfc5e0 100644 --- a/src/views/system/apiPage/components/ApiDoes.vue +++ b/src/views/system/apiPage/components/ApiDoes.vue @@ -28,7 +28,7 @@ model="TABLE" > @@ -570,7 +637,7 @@ @@ -597,9 +664,23 @@ + > + {{ + item.label + }} + @@ -640,6 +721,7 @@ type="primary" class="btn-style" @click="submitData" + :loading="isSucessBasic || isSucessInit || isSucessRole" >确定 @@ -654,19 +736,38 @@ import { ExclamationCircleOutlined, LoadingOutlined, } from '@ant-design/icons-vue'; -import { ROLEKEYS, RoleData } from './data/RoleData'; +import RoleMenuData, { ROLEKEYS, RoleData } from './data/RoleData'; import type { Rule } from 'ant-design-vue/es/form'; import type { FormInstance, UploadChangeParam, UploadProps, + Form, } from 'ant-design-vue'; import { modalState, formState, logoState } from './data/interface'; import BaseMenu from './data/baseMenu'; -import { getSystemPermission, save } from '@/api/initHome'; +import { + getSystemPermission, + save, + addRole, + getRoleMenu, + updateRoleMenu, + getResourcesCurrent, + saveNetwork, + saveProtocol, + getProtocol, + saveAccessConfig, + saveProduct, + saveDevice, + changeDeploy, + deployDevice, +} from '@/api/initHome'; +import { BASE_API_PATH, TOKEN_KEY } from '@/utils/variable'; +import { LocalStore } from '@/utils/comm'; +import { message } from 'ant-design-vue'; const formRef = ref(); const menuRef = ref(); -const formBasicRef = ref(); +const formBasicRef = ref(); /** * 表单数据 */ @@ -710,7 +811,7 @@ const validateUrl = async (_rule: Rule, value: string) => { return Promise.reject('请输入公网地址'); } else { var reg = new RegExp( - /^(((?!(127\\.0\\.0\\.1)|(localhost)|(10\\.\\d{1,3}\\.\\d{1,3}\\.\\d{1,3})|(172\\.((1[6-9])|(2\\d)|(3[01]))\\.\\d{1,3}\\.\\d{1,3})|(192\\.168\\.\\d{1,3}\\.\\d{1,3})).)*)(?:(?:\\d|[1-9]\\d|1\\d\\d|2[0-4]\\d|25[0-5])\\.){3}(?:\\d|[1-9]\\d|1\\d\\d|2[0-4]\\d|25[0-5])$/, + /^(25[0-5]|2[0-4]\d|[0-1]?\d?\d)(\.(25[0-5]|2[0-4]\d|[0-1]?\d?\d)){3}$/, ); if (!reg.test(value)) { return Promise.reject('请输入正确的公网地址'); @@ -731,44 +832,44 @@ const validateNumber = async (_rule: Rule, value: string) => { return Promise.resolve(); } }; + /** * 初始化弹窗表单数据 */ -const ModalForm = reactive({ +const modalForm = reactive({ host: '0.0.0.0', port: '', publicHost: '', publicPort: null, - rules: { - host: [ - { - required: true, - message: '请选择本地地址', - }, - ], - port: [ - { - required: true, - message: '请选择本地端口', - }, - ], - publicHost: [ - { - required: true, - validator: validateUrl, - trigger: 'change', - }, - ], - publicPort: [ - { - required: true, - validator: validateNumber, - trigger: 'change', - }, - ], - }, }); -const { rules } = toRefs(ModalForm); +const rulesModle = ref({ + host: [ + { + required: true, + message: '请选择本地地址', + }, + ], + port: [ + { + required: true, + message: '请选择本地端口', + }, + ], + publicHost: [ + { + required: true, + validator: validateUrl, + trigger: 'change', + }, + ], + publicPort: [ + { + required: true, + validator: validateNumber, + trigger: 'change', + }, + ], +}); /** * 默认打开第一个初始菜单 @@ -777,6 +878,8 @@ const activeKey = ref('1'); const spinning = ref(false); const visible = ref(false); const flag = ref(false); +const action = ref(`${BASE_API_PATH}/file/static`); +const headers = ref({ [TOKEN_KEY]: LocalStore.get(TOKEN_KEY) }); /** * 角色勾选数据 */ @@ -797,13 +900,6 @@ const showModal = () => { } }; -/** - * 提交初始数据表单 - */ -const handleOk = async () => { - const valid = await formRef.value.validate(); -}; - /** * 表单取消事件 */ @@ -817,13 +913,34 @@ const cancel = () => { const logoData = reactive({ logoValue: '/public/logo.png', logoLoading: false, + backLoading: false, + iconLoading: false, inLogo: false, inIcon: false, inBackground: false, + backSize: 4, + logoSize: 1, iconValue: '/public/favicon.ico', backValue: '/public/images/login.png', + imageTypes: ['image/jpeg', 'image/png'], + iconTypes: ['image/x-icon'], /** - * 图片上传改变事件 + * logo格式校验 + */ + beforeLogoUpload: (file) => { + const isType = logoData.imageTypes.includes(file.type); + if (!isType) { + message.error(`请上传.jpg.png.jfif.pjp.pjpeg.jpeg格式的图片`); + return false; + } + const isSize = file.size / 1024 / 1024 < 4; + if (!isSize) { + message.error(`图片大小必须小于${4}M`); + } + return isType && isSize; + }, + /* + * logo上传改变事件 */ handleChangeLogo: (info) => { if (info.file.status === 'uploading') { @@ -838,33 +955,216 @@ const logoData = reactive({ /** * 背景图片上传之前 */ - beforeBackUpload: (file) => {}, + beforeBackUpload: (file) => { + const isType = logoData.imageTypes.includes(file.type); + if (!isType) { + message.error(`请上传.jpg.png.jfif.pjp.pjpeg.jpeg格式的图片`); + return false; + } + const isSize = file.size / 1024 / 1024 < 4; + if (!isSize) { + message.error(`图片大小必须小于${4}M`); + } + return isType && isSize; + }, /** * 背景图片发生改变 */ - changeBackUpload: (info) => {}, + changeBackUpload: (info) => { + if (info.file.status === 'uploading') { + logoData.backLoading = true; + } + if (info.file.status === 'done') { + info.file.url = info.file.response?.result; + logoData.backLoading = false; + logoData.backValue = info.file.response?.result; + } + }, + /** + * 上传之前 + */ + beforeIconUpload: (file) => { + const isType = logoData.iconTypes.includes(file.type); + if (!isType) { + message.error(`请上传ico格式的图片`); + return false; + } + const isSize = file.size / 1024 / 1024 < 1; + if (!isSize) { + message.error(`图片大小必须小于${1}M`); + } + return isType && isSize; + }, + /** + * 图标发生改变 + */ + changeIconUpload: (info) => { + if (info.file.status === 'uploading') { + logoData.iconLoading = true; + } + if (info.file.status === 'done') { + info.file.url = info.file.response?.result; + logoData.iconLoading = true; + logoData.iconValue = info.file.response?.result; + } + }, }); const { logoValue, logoLoading, + iconLoading, + backLoading, inLogo, iconValue, inIcon, inBackground, backValue, handleChangeLogo, + beforeBackUpload, + changeBackUpload, + beforeLogoUpload, + beforeIconUpload, + changeIconUpload, + imageTypes, + iconTypes, } = toRefs(logoData); /** * 提交基础表单 */ const basicData = reactive({ + isSucessBasic: false, /** * 提交基础表单数据 */ - saveBasicInfo: async () => {}, + saveBasicInfo: async () => { + // return new Promise(async (resolve) => { + const vaild = await formBasicRef.value.validate(); + console.log(vaild, 'vaild '); + if (vaild) { + const item = [ + { + scope: 'front', + properties: { + ...form, + apikey: '', + 'base-path': '', + }, + }, + { + scope: 'amap', + properties: { + api: form.apikey, + }, + }, + { + scope: 'paths', + properties: { + 'base-path': form.basePath, + }, + }, + ]; + const res = await save(item); + if (res.status === 200) { + const ico: any = document.querySelector('link[rel="icon"]'); + if (ico !== null) { + ico.href = form.icon; + } + } else { + basicData.isSucessBasic = true; + } + } else { + basicData.isSucessBasic = true; + } + // }); + }, }); +/** + * 提交角色数据 + */ +const roleData = reactive({ + isSucessRole: false, + /** + * 根据菜单找角色 + */ + findMenuByRole: (menu: any[], code: string): any => { + let _item = null; + menu.some((item) => { + if (item.code === code) { + _item = item; + return true; + } + + if (item.children) { + const childrenItem = roleData.findMenuByRole( + item.children, + code, + ); + if (childrenItem) { + _item = childrenItem; + return true; + } + return false; + } + + return null; + }); + return _item; + }, + /** + * 保存角色 + */ + addRoleData: async () => { + return new Promise((resolve) => { + if (!keys.value.length) { + return resolve(true); + } + let Count = 0; + keys.value.forEach(async (item, index) => { + const _itemData = RoleData[item]; + // 添加该角色 + const res = await addRole(_itemData); + if (res.status === 200) { + const menuTree = await getRoleMenu(res.result.id); + if (menuTree.status === 200) { + const _roleData = (RoleMenuData[item] as []).filter( + (roleItem: any) => { + const _menu = roleData.findMenuByRole( + menuTree.result, + roleItem.code, + ); + if (_menu) { + roleItem.id = _menu.id; + roleItem.parentId = _menu.parentId; + roleItem.createTime = _menu.createTime; + return true; + } + return false; + }, + ); + //更新权限 + const roleRes = await updateRoleMenu(res.result.id, { + menus: _roleData, + }); + if (roleRes.status === 200) { + Count += 1; + } + if (index === keys.value.length - 1) { + resolve(Count === keys.value.length); + } + } else if (index === keys.value.length - 1) { + resolve(Count === keys.value.length); + } + } else if (index === keys.value.length - 1) { + resolve(Count === keys.value.length); + roleData.isSucessRole = true; + } + }); + }); + }, +}); +const { isSucessRole } = toRefs(roleData); /** * 获取菜单数据 */ @@ -882,7 +1182,6 @@ const menuDatas = reactive({ ); const _count = menuDatas.menuCount(newTree); menuDatas.count = _count; - console.log(menuDatas.count, 'menuDatas.count'); } }, /** @@ -918,16 +1217,118 @@ const menuDatas = reactive({ }, 0); }, }); - const { count } = toRefs(menuDatas); +/** + * 提交初始化数据 + */ +const initialization = reactive({ + isSucessInit: false, + optionPorts: [], + /** + * 查询端口数据 + */ + getCurrentPort: async () => { + const resp = await getResourcesCurrent(); + const current = resp?.result; + const _host = + current.find((item: any) => item.host === '0.0.0.0')?.ports[ + 'TCP' + ] || []; + initialization.optionPorts = _host?.map((p: any) => ({ + label: p, + value: p, + })); + }, + /** + * 提交初始数据表单 + */ + + saveCurrentData: async () => { + // return new Promise(async (resolve) => { + const valid = await formRef.value.validate(); + console.log(valid, 'valid'); + // if (valid) { + // try { + // // 新增网络组件 + // const network = await saveNetwork({ + // type: 'MQTT_SERVER', + // shareCluster: true, + // name: 'MQTT网络组件', + // configuration: { + // host: '0.0.0.0', + // secure: false, + // port: modalForm.port, + // publicHost: modalForm.publicHost, + // publicPort: modalForm.publicPort, + // }, + // }); + // // 保存协议 + // const protocol = await saveProtocol(); + // let protocolItem: any = undefined; + // if (protocol.status === 200) { + // const proid = await getProtocol(); + // if (proid.status === 200) { + // protocolItem = (proid?.result || []).find( + // (it: any) => it.name === 'JetLinks官方协议', + // ); + // } + // } + // // 新增设备接入网关 + // const accessConfig = await saveAccessConfig({ + // name: 'MQTT类型设备接入网关', + // provider: 'mqtt-server-gateway', + // protocol: protocolItem?.id, + // transport: 'MQTT', + // channel: 'network', + // channelId: network?.result?.id, + // }); + // // 新增产品 + // const product = await saveProduct({ + // name: 'MQTT产品', + // messageProtocol: protocolItem?.id, + // protocolName: protocolItem?.name, + // transportProtocol: 'MQTT', + // deviceType: 'device', + // accessId: accessConfig.result?.id, + // accessName: accessConfig.result?.name, + // accessProvider: 'mqtt-server-gateway', + // }); + // // 新增设备 + // const device = await saveDevice({ + // name: 'MQTT设备', + // productId: product?.result?.id, + // productName: product?.result?.name, + // }); + // if (device.status === 200) { + // changeDeploy(product.result.id); + // deployDevice(device.result.id); + // } + + // flag.value = true; + // visible.value = false; + // } catch (e) { + // initialization.isSucessInit = true; + // // resolve(false); + // } + // } + initialization.isSucessInit = true; + }, +}); +const { optionPorts, saveCurrentData, isSucessInit } = toRefs(initialization); + /** * 初始化 */ menuDatas.getSystemPermissionData(); +initialization.getCurrentPort(); /** * 提交所有数据 */ -const submit = () => {}; +const submitData = () => { + initialization.saveCurrentData(); + roleData.addRoleData(); + basicData.saveBasicInfo(); +};