0017
/
iot-ui-vue
1
0
Fork 0
Code Issues Pull Requests Packages Projects Releases Wiki Activity

Merge remote-tracking branch 'origin/dev' into dev

This commit is contained in:
xieyonghong 2023-02-28 08:49:03 +08:00
parent a0f9d8d44c 76dfb3a797
commit 940bbfc11f
15 changed files with 611 additions and 156 deletions
Show Stats Download Patch File Download Diff File Expand all files Collapse all files

23
src/api/system/apply.ts
View File

@ -4,17 +4,30 @@ import server from '@/utils/request';
// 获取应用管理列表
export const getApplyList_api = (data: any) => server.post(`/application/_query/`, data)
// 修改应用状态
export const changeApplyStatus_api = (id:string,data: any) => server.put(`/application/${id}`, data)
export const changeApplyStatus_api = (id: string, data: any) => server.put(`/application/${id}`, data)
// 删除应用
export const delApply_api = (id:string) => server.remove(`/application/${id}`)
export const delApply_api = (id: string) => server.remove(`/application/${id}`)
// 获取组织列表
export const getDepartmentList_api = () => server.get(`/organization/_all/tree`);
// 获取组织列表
export const getAppInfo_api = (id:string) => server.get(`/application/${id}`);
export const getAppInfo_api = (id: string) => server.get(`/application/${id}`);
// 新增应用
export const addApp_api = (data:object) => server.post(`/application`, data);
export const addApp_api = (data: object) => server.post(`/application`, data);
// 更新应用
export const updateApp_api = (id:string, data:object) => server.put(`/application/${id}`, data);
export const updateApp_api = (id: string, data: object) => server.put(`/application/${id}`, data);
// ---------集成菜单-----------
// 获取所属系统
export const getOwner_api = (data: object) => server.post(`/menu/owner`, data);
export const getOwnerStandalone_api = (appId: string, data: object) => server.post(`/application/${appId}/_/api/menu/owner`, data);
// 获取对应系统菜单树
export const getOwnerTree_api = (owner: string) => server.post(`/menu/owner/tree/${owner}`, {});
export const getOwnerTreeStandalone_api = (appId: string, owner: string) => server.post(`/application/${appId}/_/api/menu/owner/tree/${owner}`, {});
// 保存集成菜单
export const saveOwnerMenu_api = (owner: string, appId: string, data: object) => server.patch(`/menu/owner/${owner}/${appId}/_all`, data);

49
src/components/CardBox/index.vue
View File

@ -40,11 +40,19 @@
</div>
</div>
</div>
<div class="card-mask" v-if="props.hasMark">
<div class="mask-content">
<slot name="mark" />
</div>
</div>
</div>
<!-- 按钮 -->
<slot name="bottom-tool">
<div v-if="showTool && actions && actions.length" class="card-tools">
<div
v-if="showTool && actions && actions.length"
class="card-tools"
>
<div
v-for="item in actions"
:key="item.key"
@ -53,8 +61,8 @@
delete: item.key === 'delete',
}"
>
<slot name="actions" v-bind="item"></slot>
<!-- <a-popconfirm v-if="item.popConfirm" v-bind="item.popConfirm">
<slot name="actions" v-bind="item"></slot>
<!-- <a-popconfirm v-if="item.popConfirm" v-bind="item.popConfirm">
<a-button :disabled="item.disabled">
<DeleteOutlined v-if="item.key === 'delete'" />
<template v-else>
@ -79,10 +87,14 @@
</template>
<script setup lang="ts">
import { SearchOutlined, CheckOutlined, DeleteOutlined } from '@ant-design/icons-vue';
import {
SearchOutlined,
CheckOutlined,
DeleteOutlined,
} from '@ant-design/icons-vue';
import BadgeStatus from '@/components/BadgeStatus/index.vue';
import { StatusColorEnum } from '@/utils/consts.ts';
import type { ActionsType } from '@/components/Table/index.vue'
import type { ActionsType } from '@/components/Table/index.vue';
import { PropType } from 'vue';
type EmitProps = {
@ -90,14 +102,14 @@ type EmitProps = {
(e: 'click', data: Record<string, any>): void;
};
type TableActionsType = Partial<ActionsType>
type TableActionsType = Partial<ActionsType>;
const emit = defineEmits<EmitProps>();
const props = defineProps({
value: {
type: Object as PropType<Record<string, any>>,
default: () => {}
default: () => {},
},
showStatus: {
type: Boolean,
@ -124,8 +136,12 @@ const props = defineProps({
},
active: {
type: Boolean,
default: false
}
default: false,
},
hasMark: {
type: Boolean,
default: false,
},
});
const handleClick = () => {
@ -167,9 +183,13 @@ const handleClick = () => {
position: relative;
border: 1px solid #e6e6e6;
&.hover {
&:hover {
cursor: pointer;
box-shadow: 0 0 24px rgba(#000, 0.1);
.card-mask {
visibility: visible;
}
}
&.active {
@ -269,12 +289,12 @@ const handleClick = () => {
width: 100%;
height: 100%;
color: #fff;
background-color: rgba(#000, 0);
background-color: rgba(#000, .5);
visibility: hidden;
cursor: pointer;
transition: all 0.3s;
> div {
.mask-content {
display: flex;
align-items: center;
justify-content: center;
@ -282,11 +302,6 @@ const handleClick = () => {
height: 100%;
padding: 0 !important;
}
&.show {
background-color: rgba(#000, 0.5);
visibility: visible;
}
}
}

25
src/views/device/components/Metadata/Base/Edit/ExpandsForm.vue
View File

@ -2,20 +2,33 @@
<a-form-item label="来源" :name="name.concat(['source'])" v-if="type === 'product'" :rules="[
{ required: true, message: '请选择来源' },
]">
<a-select v-model:value="_value.source" :options="PropertySource" size="small" :disabled="metadataStore.model.action === 'edit'"></a-select>
<a-select v-model:value="_value.source" :options="PropertySource" size="small"
:disabled="metadataStore.model.action === 'edit'"></a-select>
</a-form-item>
<virtual-rule-param v-if="_value.source === 'rule'" v-model:value="_value.virtualRule" :name="name.concat(['virtualRule'])" :id="id" :showWindow="_value.source === 'rule'"></virtual-rule-param>
<virtual-rule-param v-if="_value.source === 'rule'" v-model:value="_value.virtualRule"
:name="name.concat(['virtualRule'])" :id="id" :showWindow="_value.source === 'rule'"></virtual-rule-param>
<a-form-item label="读写类型" :name="name.concat(['type'])" :rules="[
{ required: true, message: '请选择读写类型' },
]">
<a-select v-model:value="_value.type" :options="options" mode="multiple" size="small"></a-select>
</a-form-item>
<a-form-item label="其他配置" v-if="config.length > 0">
<a-form-item v-for="(item, index) in config" :key="index">
<config-param v-model:value="_value" :config="item" :name="name"></config-param>
</a-form-item>
</a-form-item>
<a-form-item v-if="type === 'product' && ['int', 'float', 'double', 'long', 'date', 'string', 'boolean'].includes(valueType.type)"
label="指标配置" :name="name.concat(['metrics'])">
<metrics-param v-model:value="_value.metrics" :type="valueType.type" :enum="valueType"></metrics-param>
</a-form-item>
</template>
<script setup lang="ts" name="ExpandsForm">
import { useMetadataStore } from '@/store/metadata';
import { PropertySource } from '@/views/device/data';
import { PropType } from 'vue';
import VirtualRuleParam from '@/components/Metadata/VirtualRuleParam/index.vue';
import ConfigParam from '@/components/Metadata/ConfigParam/index.vue'
import MetricsParam from '@/components/Metadata/MetricsParam/index.vue'
type ValueType = Record<any, any>;
const props = defineProps({
@ -34,6 +47,14 @@ const props = defineProps({
id: {
type: String
},
config: {
type: Array as PropType<ValueType[]>,
default: () => ([])
},
valueType: {
type: Object,
default: () => ({})
}
})
interface Emits {

91
src/views/device/components/Metadata/Base/Edit/PropertyForm.vue
View File

@ -1,54 +1,83 @@
<template>
<a-form ref="addFormRef" :model="form.model" layout="vertical">
<a-form-item label="标识" name="id" :rules="[
{ required: true, message: '请输入标识' },
{ max: 64, message: '最多可输入64个字符' },
{
pattern: /^[a-zA-Z0-9_]+$/,
message: '请输入英文或者数字或者-或者_',
},
]">
<a-input v-model:value="form.model.id" size="small"></a-input>
</a-form-item>
<a-form-item label="名称" name="name" :rules="[
{ required: true, message: '请输入名称' },
{ max: 64, message: '最多可输入64个字符' },
]">
<a-input v-model:value="form.model.name" size="small"></a-input>
</a-form-item>
<value-type-form :name="['valueType']" v-model:value="form.model.valueType" key="property"></value-type-form>
<a-form-item label="标识" name="id" :rules="[
{ required: true, message: '请输入标识' },
{ max: 64, message: '最多可输入64个字符' },
{
pattern: /^[a-zA-Z0-9_\-]+$/,
message: 'ID只能由数字、字母、下划线、中划线组成',
},
]">
<a-input v-model:value="value.id" size="small" @change="asyncOtherConfig"></a-input>
</a-form-item>
<a-form-item label="名称" name="name" :rules="[
{ required: true, message: '请输入名称' },
{ max: 64, message: '最多可输入64个字符' },
]">
<a-input v-model:value="value.name" size="small"></a-input>
</a-form-item>
<value-type-form :name="['valueType']" v-model:value="value.valueType" key="property"
@change-type="changeValueType"></value-type-form>
<expands-form :name="['expands']" v-model:value="form.model.expands" :type="type" :id="form.model.id"></expands-form>
<expands-form :name="['expands']" v-model:value="value.expands" :type="type" :id="value.id" :config="config"
:valueType="value.valueType"></expands-form>
<a-form-item label="说明" name="description" :rules="[
{ max: 200, message: '最多可输入200个字符' },
]">
<a-textarea v-model:value="form.model.description" size="small"></a-textarea>
</a-form-item>
</a-form>
<a-form-item label="说明" name="description" :rules="[
{ max: 200, message: '最多可输入200个字符' },
]">
<a-textarea v-model:value="value.description" size="small"></a-textarea>
</a-form-item>
</template>
<script setup lang="ts" name="PropertyForm">
import { PropType } from 'vue';
import ExpandsForm from './ExpandsForm.vue';
import ValueTypeForm from './ValueTypeForm.vue'
import { useProductStore } from '@/store/product';
import { getMetadataConfig } from '@/api/device/product'
const props = defineProps({
type: {
type: String as PropType<'product' | 'device'>,
required: true,
default: 'product'
},
value: {
type: Object,
default: () => ({})
}
})
const productStore = useProductStore()
const form = reactive({
model: {
valueType: {
expands: {}
const config = ref<Record<any, any>[]>([])
const asyncOtherConfig = async () => {
if (props.type !== 'product') return
const { valueType: { type }, id } = props.value
const productId = productStore.current?.id
if (!productId || !id || !type) return
const resp = await getMetadataConfig({
deviceId: productId,
metadata: {
id,
type: 'property',
dataType: type,
},
expands: {}
} as any,
})
if (resp.status === 200) {
config.value = resp.result
}
}
onMounted(() => {
asyncOtherConfig()
})
const changeValueType = (val: string) => {
if (props.type === 'product' && ['int', 'float', 'double', 'long', 'date', 'string', 'boolean'].includes(val)) {
props.value.expands.metrics = []
} else {
delete props.value.expands?.metrics
}
asyncOtherConfig()
}
</script>
<style scoped lang="less">
:deep(.ant-form-item-label) {

9
src/views/device/components/Metadata/Base/Edit/ValueTypeForm.vue
View File

@ -2,7 +2,7 @@
<a-form-item label="数据类型" :name="name.concat(['type'])" :rules="[
{ required: true, message: '请选择数据类型' },
]">
<a-select v-model:value="value.type" :options="_dataTypeList" size="small"></a-select>
<a-select v-model:value="value.type" :options="_dataTypeList" size="small" @change="changeType"></a-select>
</a-form-item>
<a-form-item label="单位" :name="name.concat(['unit'])" v-if="['int', 'float', 'long', 'double'].includes(value.type)">
<InputSelect v-model:value="value.unit" :options="unit.unitOptions" size="small"></InputSelect>
@ -48,7 +48,7 @@
</template>
<script lang="ts" setup mame="BaseForm">
import { DataTypeList, FileTypeList } from '@/views/device/data';
import { DefaultOptionType } from 'ant-design-vue/es/select';
import { DefaultOptionType, SelectValue } from 'ant-design-vue/es/select';
import { PropType } from 'vue'
import { getUnit } from '@/api/device/instance';
import { Store } from 'jetlinks-store';
@ -79,6 +79,7 @@ const props = defineProps({
interface Emits {
(e: 'update:value', data: ValueType): void;
(e: 'changeType', data: string): void;
}
const emit = defineEmits<Emits>()
@ -107,6 +108,10 @@ const unit = {
unit.getUnit()
const _dataTypeList = computed(() => props.isSub ? DataTypeList.filter(item => item.value !== 'array' && item.value !== 'object') : DataTypeList)
const changeType = (val: SelectValue) => {
emit('changeType', val as string)
}
</script>
<style lang="less" scoped>
:deep(.ant-form-item-label) {

31
src/views/device/components/Metadata/Base/Edit/index.vue
View File

@ -4,19 +4,20 @@
<template #extra>
<a-button :loading="save.loading" type="primary" @click="save.saveMetadata">保存</a-button>
</template>
<PropertyForm v-if="metadataStore.model.type === 'properties'" :type="type"></PropertyForm>
<a-form ref="formRef" :model="form.model" layout="vertical">
<PropertyForm v-if="metadataStore.model.type === 'properties'" :type="type" ref="propertyForm" v-model:value="form.model"></PropertyForm>
</a-form>
</a-drawer>
</template>
<script lang="ts" setup name="Edit">
import { useInstanceStore } from '@/store/instance';
import { useMetadataStore } from '@/store/metadata';
import { useProductStore } from '@/store/product';
import { MetadataItem, ProductItem } from '@/views/device/Product/typings';
import { ProductItem } from '@/views/device/Product/typings';
import { message } from 'ant-design-vue/es';
import type { FormInstance } from 'ant-design-vue/es';
import { updateMetadata, asyncUpdateMetadata } from '../../metadata'
import { Store } from 'jetlinks-store';
import { SystemConst } from '@/utils/consts';
import { detail } from '@/api/device/instance';
import { DeviceInstance } from '@/views/device/Instance/typings';
import PropertyForm from './PropertyForm.vue';
@ -50,7 +51,21 @@ const close = () => {
const title = computed(() => metadataStore.model.action === 'add' ? '新增' : '修改')
const addFormRef = ref<FormInstance>()
const propertyForm = ref()
const form = reactive({
model: {
valueType: {
expands: {}
},
expands: {}
} as any,
})
if (metadataStore.model.action === 'edit') {
form.model = metadataStore.model.item
}
const formRef = ref<FormInstance>()
/**
* 保存按钮
*/
@ -58,7 +73,7 @@ const save = reactive({
loading: false,
saveMetadata: (deploy?: boolean) => {
save.loading = true
addFormRef.value?.validateFields().then(async (formValue) => {
formRef.value?.validateFields().then(async (formValue) => {
const type = metadataStore.model.type
const _detail: ProductItem | DeviceInstance = props.type === 'device' ? instanceStore.detail : productStore.current
const _metadata = JSON.parse(_detail?.metadata || '{}')
@ -90,8 +105,9 @@ const save = reactive({
setTimeout(() => window.close(), 300);
}
} else {
Store.set(SystemConst.REFRESH_METADATA_TABLE, true);
// Store.set(SystemConst.REFRESH_METADATA_TABLE, true);
if (deploy) {
// TODO 是否发布
Store.set('product-deploy', deploy);
} else {
save.resetMetadata();
@ -121,9 +137,6 @@ const save = reactive({
}
})
const form = reactive({
model: {} as Record<string, any>
})
</script>
<style lang="less" scoped>

35
src/views/device/components/Metadata/Base/index.vue
View File

@ -33,22 +33,24 @@
</a-tag>
</template>
<template #action="slotProps">
<PermissionButton :uhas-permission="`${permission}:update`" type="link" key="edit" style="padding: 0"
:udisabled="operateLimits('updata', type)" @click="handleEditClick(slotProps)" :tooltip="{
title: operateLimits('updata', type) ? '当前的存储方式不支持编辑' : '编辑',
}">
<EditOutlined />
</PermissionButton>
<PermissionButton :uhas-permission="`${permission}:delete`" type="link" key="delete" style="padding: 0"
:pop-confirm="{
title: '确认删除？', onConfirm: async () => {
await removeItem(slotProps);
},
}" :tooltip="{
title: '删除',
}">
<DeleteOutlined />
</PermissionButton>
<a-space>
<PermissionButton :uhas-permission="`${permission}:update`" type="link" key="edit" style="padding: 0"
:udisabled="operateLimits('updata', type)" @click="handleEditClick(slotProps)" :tooltip="{
title: operateLimits('updata', type) ? '当前的存储方式不支持编辑' : '编辑',
}">
<EditOutlined />
</PermissionButton>
<PermissionButton :uhas-permission="`${permission}:delete`" type="link" key="delete" style="padding: 0"
:pop-confirm="{
title: '确认删除？', onConfirm: async () => {
await removeItem(slotProps);
},
}" :tooltip="{
title: '删除',
}">
<DeleteOutlined />
</PermissionButton>
</a-space>
</template>
</JTable>
</template>
@ -123,6 +125,7 @@ onMounted(() => {
})
watch([route.params.id, type], () => {
loading.value = true
// const res = target === 'product'
// ? await productDetail(route.params.id as string)
// : await detail(route.params.id as string);

147
src/views/media/Device/Channel/Save.vue Normal file
View File

@ -0,0 +1,147 @@
<!-- Modal 弹窗，用于新增、修改数据 -->
<template>
<a-modal
v-model:visible="_vis"
:title="!!formData.id ? '编辑' : '新增'"
width="650px"
cancelText="取消"
okText="确定"
@ok="handleSubmit"
@cancel="handleCancel"
>
<a-form ref="formRef" :model="formData" layout="vertical">
<a-row :gutter="10">
<a-col :span="12">
<a-form-item name="channelId">
<template #label>
通道ID
<a-tooltip title="若不填写，系统将自动生成唯一ID">
<AIcon
type="QuestionCircleOutlined"
style="margin-left: 2px"
/>
</a-tooltip>
</template>
<a-input v-model:value="formData.channelId" />
</a-form-item>
</a-col>
<a-col :span="12">
<a-form-item
name="name"
label="通道名称"
:rules="{ required: true, message: '请输入通道名称' }"
>
<a-input v-model:value="formData.name" />
</a-form-item>
</a-col>
<a-col :span="24">
<a-form-item
name="media_url"
:rules="{ required: true, message: '请输入视频地址' }"
>
<template #label>
视频地址
<a-tooltip
title="不同厂家的RTSP固定地址规则不同，请按对应厂家的规则填写"
>
<AIcon
type="QuestionCircleOutlined"
style="margin-left: 2px"
/>
</a-tooltip>
</template>
<a-input v-model:value="formData.others.media_url" />
</a-form-item>
</a-col>
<a-col :span="12">
<a-form-item name="media_username" label="用户名">
<a-input
v-model:value="formData.others.media_username"
/>
</a-form-item>
</a-col>
<a-col :span="12">
<a-form-item name="media_password" label="密码">
<a-input-password
v-model:value="formData.others.media_password"
/>
</a-form-item>
</a-col>
<a-col :span="24">
<a-form-item name="address" label="安装地址">
<a-input v-model:value="formData.address" />
</a-form-item>
</a-col>
<a-col :span="24">
<a-form-item name="description" label="说明">
<a-textarea
v-model:value="formData.description"
:rows="4"
:maxlength="200"
showCount
/>
</a-form-item>
</a-col>
</a-row>
</a-form>
</a-modal>
</template>
<script setup lang="ts">
import templateApi from '@/api/notice/template';
import { PropType } from 'vue';
type Emits = {
(e: 'update:visible', data: boolean): void;
(e: 'submit'): void;
};
const emit = defineEmits<Emits>();
const props = defineProps({
visible: { type: Boolean, default: false },
channelData: {
type: Object as PropType<Partial<Record<string, any>>>,
default: () => ({}),
},
});
const _vis = computed({
get: () => props.visible,
set: (val) => emit('update:visible', val),
});
const formRef = ref();
const formData = ref({
id: '',
address: '',
channelId: '',
description: '',
deviceId: '',
name: '',
others: {
media_password: '',
media_url: '',
media_username: '',
},
});
// const formRules = ref({});
/**
* 提交
*/
const handleSubmit = () => {
formRef.value
.validate()
.then(async () => {
emit('submit');
})
.catch((err: any) => {
console.log('err: ', err);
});
};
const handleCancel = () => {
_vis.value = false;
};
</script>
<style lang="less" scoped></style>

10
src/views/media/Device/Channel/index.vue
View File

@ -76,6 +76,12 @@
</a-space>
</template>
</JTable>
<Save
v-model:visible="saveVis"
:channelData="channelData"
@submit="listRef.reload()"
/>
</page-container>
</template>
@ -84,6 +90,7 @@ import ChannelApi from '@/api/media/channel';
import type { ActionsType } from '@/components/Table/index.vue';
import { useMenuStore } from 'store/menu';
import { message } from 'ant-design-vue';
import Save from './Save.vue';
const menuStory = useMenuStore();
const route = useRoute();
@ -163,6 +170,8 @@ const handleAdd = () => {
const listRef = ref();
const playVis = ref(false);
const channelData = ref();
const getActions = (
data: Partial<Record<string, any>>,
type: 'card' | 'table',
@ -178,6 +187,7 @@ const getActions = (
icon: 'EditOutlined',
onClick: () => {
saveVis.value = true;
channelData.value = data;
},
},
{

76
src/views/system/Apply/Save/components/EditForm.vue
View File

@ -710,6 +710,7 @@
<a-select
v-model:value="form.data.apiServer.roleIdList"
:options="form.roleIdList"
mode="multiple"
placeholder="请选中角色"
></a-select>
<PermissionButton
@ -869,7 +870,7 @@
'sso',
'configuration',
'oauth2',
'client_id',
'clientId',
]"
:rules="[
{
@ -1003,7 +1004,6 @@
v-model:file-list="form.fileList"
accept=".jpg,.png,.jfif,.pjp,.pjpeg,.jpeg"
:maxCount="1"
name="avatar"
list-type="picture-card"
:show-upload-list="false"
:headers="{
@ -1022,6 +1022,7 @@
.logoUrl
"
alt="avatar"
width="100%"
/>
<div v-else>
<AIcon
@ -1295,6 +1296,7 @@
<a-form-item label="角色">
<a-select
v-model:value="form.data.sso.roleIdList"
mode="multiple"
:options="form.roleIdList"
placeholder="请选中角色"
></a-select>
@ -1372,7 +1374,10 @@
</a-button>
<div class="dialog">
<MenuDialog ref="dialogRef" />
<MenuDialog
ref="dialogRef"
:mode="routeQuery.id ? 'edit' : 'add'"
/>
</div>
</div>
</template>
@ -1389,7 +1394,7 @@ import {
} from '@/api/system/apply';
import FormLabel from './FormLabel.vue';
import RequestTable from './RequestTable.vue';
import MenuDialog from './MenuDialog.vue';
import MenuDialog from '../../componenets/MenuDialog.vue';
import { getImage } from '@/utils/comm';
import type { formType, dictType, optionsType } from '../typing';
import { getRoleList_api } from '@/api/system/user';
@ -1400,32 +1405,34 @@ import {
UploadFile,
} from 'ant-design-vue';
import { randomString } from '@/utils/utils';
import { cloneDeep } from 'lodash';
import { cloneDeep, difference } from 'lodash';
import { useMenuStore } from '@/store/menu';
const emit = defineEmits(['changeApplyType']);
const routeQuery = useRoute().query;
const menuStory = useMenuStore();
const deptPermission = 'system/Department';
const rolePermission = 'system/Role';
const dialogRef = ref();
// 初始化表单
const initForm: formType = {
name: '',
provider: 'internal-standalone',
integrationModes: [],
config: '',
description: '',
page: {
// 页面集成
baseUrl: '',
routeType: 'hash',
parameters: [{ label: '', value: '' }],
parameters: [],
},
apiClient: {
// API客户端
baseUrl: '',
headers: [{ label: '', value: '' }], // 请求头
parameters: [{ label: '', value: '' }], // 请求参数
headers: [], // 请求头
parameters: [], // 请求参数
authConfig: {
// API客户端
type: 'oauth2', // 类型, 可选值：none, bearer, oauth2, basic, other
@ -1447,13 +1454,12 @@ const initForm: formType = {
},
apiServer: {
// API服务
appId: '',
appId: randomString(16),
secureKey: randomString(), // 密钥
redirectUri: '', // 重定向URL
roleIdList: [], // 角色列表
orgIdList: [], // 部门列表
ipWhiteList: '', // IP白名单
signature: '', // 签名方式, 可选值：MD5，SHA256
enableOAuth2: false, // 是否启用OAuth2
},
sso: {
@ -1497,9 +1503,9 @@ const initForm: formType = {
const formRef = ref<FormInstance>();
const form = reactive({
data: { ...initForm },
integrationModesISO: [] as string[],
roleIdList: [] as optionsType,
orgIdList: [] as dictType,
integrationModesISO: [] as string[], // 接入方式镜像 折叠面板使用
roleIdList: [] as optionsType, // 角色列表
orgIdList: [] as dictType, // 组织列表
errorNumInfo: {
page: new Set(),
@ -1509,7 +1515,6 @@ const form = reactive({
},
fileList: [] as any[],
fileUrlList: [] as string[],
uploadLoading: false,
});
// 接入方式的选项
@ -1591,6 +1596,7 @@ function init() {
() => form.data.provider,
(n) => {
emit('changeApplyType', n);
if (routeQuery.id) return;
if (n === 'wechat-webapp' || n === 'dingtalk-ent-app') {
form.data.integrationModes = ['ssoClient'];
form.integrationModesISO = ['ssoClient'];
@ -1616,6 +1622,7 @@ function getInfo(id: string) {
(item: any) => item.value,
),
} as formType;
form.data.apiServer && (form.data.apiServer.appId = id);
});
}
// 获取角色列表
@ -1651,6 +1658,23 @@ function clickAddItem(data: string[], target: string) {
function clickSave() {
formRef.value?.validate().then(() => {
const params = cloneDeep(form.data);
// 删除多余的参数
const list = ['page', 'apiClient', 'apiServer', 'ssoClient'];
difference(list, params.integrationModes).forEach((item) => {
if (item === 'ssoClient') {
// @ts-ignore
delete params['sso'];
}
delete params[item];
});
clearNullProp(params);
if (
params.provider === 'internal-standalone' &&
params.integrationModes.includes('page')
) {
// @ts-ignore
delete params.page.parameters;
}
if (
params.provider === 'internal-standalone' &&
@ -1674,15 +1698,19 @@ function clickSave() {
const request = routeQuery.id
? updateApp_api(routeQuery.id as string, params)
: addApp_api(params);
request.then((resp) => {
request.then((resp: any) => {
if (resp.status === 200) {
const isPage = params.integrationModes.includes('page');
if (isPage) {
form.data = params;
dialogRef.value && dialogRef.value.openDialog();
dialogRef.value &&
dialogRef.value.openDialog(
routeQuery.id || resp.result.id,
form.data.provider,
);
} else {
message.success('保存成功');
jumpPage('system/Apply');
menuStory.jumpPage('system/Apply');
}
}
});
@ -1722,9 +1750,15 @@ function changeBackUpload(info: UploadChangeParam<UploadFile<any>>) {
function test(...args: any[]) {
console.log('test:', args);
}
function jumpPage(arg0: string) {
throw new Error('Function not implemented.');
function clearNullProp(obj: object) {
if (typeof obj !== 'object') return;
for (const prop in obj) {
if (Object.prototype.hasOwnProperty.call(obj, prop)) {
const val = obj[prop];
if (val === '') delete obj[prop];
else if (typeof val === 'object') clearNullProp(obj[prop]);
}
}
}
</script>

49
src/views/system/Apply/Save/components/MenuDialog.vue
View File

@ -1,49 +0,0 @@
<template>
<a-modal
v-model:visible="dialog.visible"
title="集成菜单"
width="600px"
@ok="dialog.handleOk"
class="edit-dialog-container"
:confirmLoading="dialog.loading"
cancelText="取消"
okText="确定"
>
</a-modal>
</template>
<script setup lang="ts">
const emits = defineEmits(['confirm']);
// 弹窗相关
const dialog = reactive({
visible: false,
loading: false,
handleOk: () => {
emits('confirm');
},
/**
* 设置表单类型
* @param type 弹窗类型
* @param defaultForm 表单回显对象
*/
changeVisible: () => {
dialog.visible = true;
}
});
// 将打开弹窗的操作暴露给父组件
defineExpose({
openDialog: dialog.changeVisible,
});
</script>
<style scoped>
</style>

1
src/views/system/Apply/Save/components/RequestTable.vue
View File

@ -88,6 +88,7 @@ const tableData = computed(() => {
return props.value.slice((current.value - 1) * 10, current.value * 10);
});
if(props.value.length < 1) addRow()
watch(
() => props.value,
(n, o) => {

4
src/views/system/Apply/Save/typing.d.ts vendored
View File

@ -19,7 +19,7 @@ export type formType = {
name: string;
provider: applyType;
integrationModes: string[];
config: string;
config?: string;
description: string;
page: { // 页面集成
baseUrl: string,
@ -54,7 +54,7 @@ export type formType = {
roleIdList: string[], // 角色列表
orgIdList: string[], // 部门列表
ipWhiteList: string, // IP白名单
signature: 'MD5' | 'SHA256' | '', // 签名方式, 可选值：MD5，SHA256
signature?: 'MD5' | 'SHA256' | '', // 签名方式, 可选值：MD5，SHA256
enableOAuth2: boolean, // 是否启用OAuth2
},
sso: { // 统一单点登陆集成

196
src/views/system/Apply/componenets/MenuDialog.vue Normal file
View File

@ -0,0 +1,196 @@
<template>
<a-modal
v-model:visible="dialog.visible"
title="集成菜单"
width="600px"
@ok="dialog.handleOk"
@cancel="dialog.cancel"
class="edit-dialog-container"
:confirmLoading="dialog.loading"
cancelText="取消"
okText="确定"
>
<a-select
v-model:value="form.checkedSystem"
@change="(value) => value && getTree(value as string)"
style="width: 200px"
placeholder="请选择集成系统"
>
<a-select-option
v-for="item in form.systemList"
:value="item.value"
>{{ item.label }}</a-select-option
>
</a-select>
<p style="margin: 20px 0 0 0" v-show="form.menuTree.length > 0">当前集成菜单</p>
<a-tree
v-model:checkedKeys="form.checkedMenu"
v-model:expandedKeys="form.expandedKeys"
checkable
:tree-data="form.menuTree"
:fieldNames="{ key: 'id', title: 'name' }"
@check="treeCheck"
>
<template #title="{ name }">
<span>{{ name }}</span>
</template>
</a-tree>
</a-modal>
</template>
<script setup lang="ts">
import { optionItemType } from '@/views/system/DataSource/typing';
import { applyType } from '../Save/typing';
import {
getOwner_api,
getOwnerStandalone_api,
getOwnerTree_api,
getOwnerTreeStandalone_api,
saveOwnerMenu_api,
} from '@/api/system/apply';
import { CheckInfo } from 'ant-design-vue/lib/vc-tree/props';
import { useMenuStore } from '@/store/menu';
import { message } from 'ant-design-vue';
import { getMenuTree_api } from '@/api/system/menu';
const menuStory = useMenuStore();
const props = defineProps<{
mode: 'add' | 'edit';
}>();
// 弹窗相关
const dialog = reactive({
visible: false,
loading: false,
handleOk: () => {
const items = filterTree(form.menuTree, [
...form.checkedMenu,
...form.half,
]);
if (form.checkedSystem) {
if (items && items.length !== 0) {
saveOwnerMenu_api('iot', form.id, items).then((resp) => {
if (resp.status === 200) {
message.success('操作成功');
dialog.visible = false;
}
});
} else {
message.warning('请勾选配置菜单');
}
} else {
message.warning('请选择所属系统');
}
},
cancel: () => {
if (props.mode === 'add')
menuStory.jumpPage('system/Apply/Save', {}, { id: form.id });
dialog.visible = false;
},
changeVisible: (id: string, provider: applyType) => {
form.id = id;
form.provider = provider;
form.checkedSystem = undefined;
form.checkedMenu = [];
dialog.visible = true;
if (id) {
getSystemList();
getMenus();
}
},
});
// 将打开弹窗的操作暴露给父组件
defineExpose({
openDialog: dialog.changeVisible,
});
const form = reactive({
id: '',
checkedSystem: '' as undefined | string,
checkedMenu: [] as string[],
expandedKeys: [] as string[],
half: [] as string[],
provider: '' as applyType,
systemList: [] as optionItemType[],
menuTree: [] as any[],
});
/**
* 与集成系统关联的菜单
* @param params
*/
function getTree(params: string) {
const api =
form.provider === 'internal-standalone'
? getOwnerTreeStandalone_api(form.id, params)
: getOwnerTree_api(params);
api.then((resp: any) => {
form.menuTree = resp.result;
form.expandedKeys = resp.result.map((item: any) => item.id);
});
}
/**
* 获取当前用户可访问菜单
*/
function getMenus() {
const params = {
terms: [
{
column: 'appId',
value: form.id,
},
],
};
getMenuTree_api(params).then((resp: any) => {
if (resp.status === 200) {
form.menuTree = resp.result;
const keys = resp.result.map((item: any) => item.id) as string[];
form.expandedKeys = keys;
form.checkedMenu = keys;
}
});
}
/**
* 获取集成系统选项
*/
function getSystemList() {
const api =
form.provider === 'internal-standalone'
? getOwnerStandalone_api(form.id, ['iot'])
: getOwner_api(['iot']);
api.then((resp: any) => {
if (resp.status === 200) {
form.systemList = resp.result.map((item: string) => ({
label: item,
value: item,
}));
}
});
}
// 树选中事件
function treeCheck(checkedKeys: any, e: CheckInfo) {
form.checkedMenu = checkedKeys;
form.half = e.halfCheckedKeys as string[];
}
//过滤节点-默认带上父节点
function filterTree(nodes: any[], list: any[]) {
if (!nodes?.length) {
return nodes;
}
return nodes.filter((it) => {
// 不符合条件的直接砍掉
if (list.indexOf(it.id) <= -1) {
return false;
}
// 符合条件的保留，并且需要递归处理其子节点
it.children = filterTree(it.children, list);
return true;
});
}
</script>
<style scoped></style>

21
src/views/system/Apply/index.vue
View File

@ -42,6 +42,7 @@
enabled: 'success',
disabled: 'error',
}"
hasMark
>
<template #img>
<slot name="img">
@ -118,6 +119,14 @@
</PermissionButton>
</a-tooltip>
</template>
<template #mark>
<AIcon
type="EyeOutlined"
style="font-size: 24px"
@click="() => table.toSave(slotProps.id, true)"
/>
</template>
</CardBox>
</template>
@ -151,11 +160,15 @@
</template>
</JTable>
</div>
<div class="dialogs">
<MenuDialog ref="dialogRef" mode="edit" />
</div>
</page-container>
</template>
<script setup lang="ts" name="Apply">
import PermissionButton from '@/components/PermissionButton/index.vue';
import MenuDialog from './componenets/MenuDialog.vue';
import {
getApplyList_api,
changeApplyStatus_api,
@ -251,9 +264,10 @@ const columns = [
},
];
const params = ref({});
const search = (newParams: any) => (params.value = {...newParams});
const search = (newParams: any) => (params.value = { ...newParams });
const tableRef = ref();
const dialogRef = ref();
const table = {
refresh: () => {
tableRef.value.reload();
@ -344,7 +358,10 @@ const table = {
title: '集成菜单',
},
icon: 'MenuUnfoldOutlined',
onClick: () => {},
onClick: () => {
dialogRef.value &&
dialogRef.value.openDialog(data.id, data.provider);
},
});
// 有api操作权限
if (otherServers.includes('apiServer'))