Merge branch 'dev' of github.com:jetlinks/jetlinks-ui-vue into dev
This commit is contained in:
JiangQiming
commit
84278cd232
|
|
@ -18,3 +18,16 @@ export const getAppInfo_api = (id:string) => server.get(`/application/${id}`);
|
|||
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 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);
|
||||
|
|
|
|||
|
|
@ -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"
|
||||
|
|
@ -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;
|
||||
}
|
||||
}
|
||||
}
|
||||
|
||||
|
|
|
|||
|
|
@ -0,0 +1,82 @@
|
|||
<template>
|
||||
<a-row :gutter='[24]'>
|
||||
<a-col :span='10'>
|
||||
<a-form-item
|
||||
name='readProperties'
|
||||
:rules="[{ required: true, message: '请选择属性' }]"
|
||||
>
|
||||
<a-select
|
||||
show-search
|
||||
mode='multiple'
|
||||
max-tag-count='responsive'
|
||||
placeholder='请选择属性'
|
||||
style='width: 100%'
|
||||
v-model:value='readProperties'
|
||||
:options='properties'
|
||||
:filter-option='filterSelectNode'
|
||||
@change='change'
|
||||
/>
|
||||
</a-form-item>
|
||||
</a-col>
|
||||
<a-col :span='14'>
|
||||
<a-form-item>定时读取所选属性值</a-form-item>
|
||||
</a-col>
|
||||
</a-row>
|
||||
</template>
|
||||
|
||||
<script setup lang='ts' name='ReadProperties'>
|
||||
import { filterSelectNode } from '@/utils/comm'
|
||||
import type { PropType } from 'vue'
|
||||
|
||||
type Emit = {
|
||||
(e: 'update:value', data: Array<string>): void
|
||||
(e: 'update:action', data: string): void
|
||||
}
|
||||
|
||||
const props = defineProps({
|
||||
value: {
|
||||
type: Array as PropType<Array<string>>,
|
||||
default: () => []
|
||||
},
|
||||
action: {
|
||||
type: String,
|
||||
default: ''
|
||||
},
|
||||
properties: {
|
||||
type: Array,
|
||||
default: () => []
|
||||
}
|
||||
})
|
||||
|
||||
const emit = defineEmits<Emit>()
|
||||
|
||||
const readProperties = ref<string[]>(props.value)
|
||||
|
||||
const change = (values: string[], optionItems: any[]) => {
|
||||
console.log(values, optionItems)
|
||||
const names = optionItems.map((item) => item.name);
|
||||
let extraStr = '';
|
||||
let isLimit = false;
|
||||
let indexOf = 0;
|
||||
extraStr = names.reduce((_prev, next, index) => {
|
||||
if (_prev.length <= 30) {
|
||||
indexOf = index;
|
||||
return index === 0 ? next : _prev + '、' + next;
|
||||
} else {
|
||||
isLimit = true;
|
||||
}
|
||||
return _prev;
|
||||
}, '');
|
||||
|
||||
if (isLimit && names.length - 1 > indexOf) {
|
||||
extraStr += `等${optionItems.length}个属性`;
|
||||
}
|
||||
emit('update:value', values)
|
||||
emit('update:action', `读取 ${extraStr}`)
|
||||
}
|
||||
|
||||
</script>
|
||||
|
||||
<style scoped>
|
||||
|
||||
</style>
|
||||
|
|
@ -0,0 +1,66 @@
|
|||
<template>
|
||||
<a-row :futter='[24]'>
|
||||
<a-col :span='10'>
|
||||
<a-select
|
||||
showSearch
|
||||
max-tag-count='responsive'
|
||||
style='width: 100%'
|
||||
placeholder='placeholder'
|
||||
v-model:value='reportKey'
|
||||
:options='properties'
|
||||
:filter-option='filterSelectNode'
|
||||
/>
|
||||
</a-col>
|
||||
<a-col :span='14'>定时调用所选属性</a-col>
|
||||
<a-col :span='24' v-if='showTable'>
|
||||
|
||||
</a-col>
|
||||
</a-row>
|
||||
</template>
|
||||
|
||||
<script setup lang='ts' name='ReportEvent'>
|
||||
import { filterSelectNode } from '@/utils/comm'
|
||||
import type { PropType } from 'vue'
|
||||
|
||||
type Emit = {
|
||||
(e: 'update:value', data: Array<string>): void
|
||||
(e: 'update:action', data: string): void
|
||||
}
|
||||
|
||||
const props = defineProps({
|
||||
value: {
|
||||
type: Array as PropType<Array<string>>,
|
||||
default: () => []
|
||||
},
|
||||
action: {
|
||||
type: String,
|
||||
default: ''
|
||||
},
|
||||
properties: {
|
||||
type: Array,
|
||||
default: () => []
|
||||
}
|
||||
})
|
||||
|
||||
const emit = defineEmits<Emit>()
|
||||
|
||||
const reportKey = ref<Array<string>>([])
|
||||
const callData = ref<Array<{}>>()
|
||||
|
||||
const showTable = computed(() => {
|
||||
return !!reportKey.value
|
||||
})
|
||||
|
||||
watch([props.value, props.properties], () => {
|
||||
if (props.value && props.properties?.length) {
|
||||
|
||||
} else {
|
||||
|
||||
}
|
||||
}, { immediate: true })
|
||||
|
||||
</script>
|
||||
|
||||
<style scoped>
|
||||
|
||||
</style>
|
||||
|
|
@ -7,23 +7,33 @@
|
|||
>
|
||||
<TopCard
|
||||
:label-bottom='true'
|
||||
:options='options'
|
||||
:options='topOptions'
|
||||
v-model:value='formModel.operator'
|
||||
/>
|
||||
</a-form-item>
|
||||
<Timer v-if='showTimer' />
|
||||
<Timer v-if='showTimer' v-model:value='formModel.timer' />
|
||||
<ReadProperties v-if='showReadProperty' v-model:value='formModel.readProperties' v-model:action='optionCache.action' :properties='readProperties' />
|
||||
<a-form-item
|
||||
v-if='showWriteProperty'
|
||||
name='writeProperties'
|
||||
:rules="[{ required: true, message: '请输入修改值' }]"
|
||||
>
|
||||
<WriteProperty v-model:value='formModel.writeProperties' v-model:action='optionCache.action' :properties='writeProperties' />
|
||||
</a-form-item>
|
||||
</a-form>
|
||||
</div>
|
||||
</template>
|
||||
|
||||
<script setup lang='ts'>
|
||||
|
||||
import TopCard from '@/views/rule-engine/Scene/Save/components/TopCard.vue'
|
||||
import { TopCard, Timer } from '@/views/rule-engine/Scene/Save/components'
|
||||
import { getImage } from '@/utils/comm'
|
||||
import { metadataType } from '@/views/rule-engine/Scene/typings'
|
||||
import type { PropType } from 'vue'
|
||||
import { TypeEnum } from '@/views/rule-engine/Scene/Save/Device/util'
|
||||
import Timer from '../components/Timer.vue'
|
||||
import ReadProperties from './ReadProperties.vue'
|
||||
import ReportEvent from './ReportEvent.vue'
|
||||
import WriteProperty from './WriteProperty.vue'
|
||||
|
||||
const props = defineProps({
|
||||
metadata: {
|
||||
|
|
@ -34,12 +44,19 @@ const props = defineProps({
|
|||
|
||||
const formModel = reactive({
|
||||
operator: 'online',
|
||||
timer: {},
|
||||
readProperties: [],
|
||||
writeProperties: {}
|
||||
})
|
||||
|
||||
const optionCache = reactive({
|
||||
action: ''
|
||||
})
|
||||
|
||||
const readProperties = ref<any[]>([])
|
||||
const writeProperties = ref<any[]>([])
|
||||
|
||||
const options = computed(() => {
|
||||
const topOptions = computed(() => {
|
||||
const baseOptions = [
|
||||
{
|
||||
label: '设备上线',
|
||||
|
|
@ -59,9 +76,9 @@ const options = computed(() => {
|
|||
|
||||
if (props.metadata.properties?.length) {
|
||||
const _properties = props.metadata.properties
|
||||
readProperties.value = _properties.filter((item: any) => item.expands.type?.includes('read'))
|
||||
writeProperties.value = _properties.filter((item: any) => item.expands.type?.includes('write'))
|
||||
const reportProperties = _properties.filter((item: any) => item.expands.type?.includes('report'))
|
||||
readProperties.value = _properties.filter((item: any) => item.expands.type?.includes('read')).map(item => ({...item, label: item.name, value: item.id }))
|
||||
writeProperties.value = _properties.filter((item: any) => item.expands.type?.includes('write')).map(item => ({...item, label: item.name, value: item.id }))
|
||||
const reportProperties = _properties.filter((item: any) => item.expands.type?.includes('report')).map(item => ({...item, label: item.name, value: item.id }))
|
||||
|
||||
if (readProperties.value.length) {
|
||||
baseOptions.push(TypeEnum.readProperty)
|
||||
|
|
@ -84,8 +101,28 @@ const options = computed(() => {
|
|||
return baseOptions
|
||||
})
|
||||
|
||||
const showReadProperty = computed(() => {
|
||||
return formModel.operator === TypeEnum.readProperty.value
|
||||
})
|
||||
|
||||
const showWriteProperty = computed(() => {
|
||||
return formModel.operator === TypeEnum.writeProperty.value
|
||||
})
|
||||
|
||||
const showReportEvent = computed(() => {
|
||||
return formModel.operator === TypeEnum.reportEvent.value
|
||||
})
|
||||
|
||||
const showInvokeFunction = computed(() => {
|
||||
return formModel.operator === TypeEnum.invokeFunction.value
|
||||
})
|
||||
|
||||
const showTimer = computed(() => {
|
||||
return ['readProperty', 'writeProperty', 'invokeFunction'].includes(formModel.operator)
|
||||
return [
|
||||
TypeEnum.readProperty.value,
|
||||
TypeEnum.writeProperty.value,
|
||||
TypeEnum.invokeFunction.value
|
||||
].includes(formModel.operator)
|
||||
})
|
||||
|
||||
</script>
|
||||
|
|
|
|||
|
|
@ -0,0 +1,99 @@
|
|||
<template>
|
||||
<a-row :futter='[24, 24]'>
|
||||
<a-col :span='10'>
|
||||
<a-select
|
||||
showSearch
|
||||
style='width: 100%'
|
||||
placeholder='请选择属性'
|
||||
v-model:value='reportKey'
|
||||
:options='properties'
|
||||
:filter-option='filterSelectNode'
|
||||
@change='change'
|
||||
/>
|
||||
</a-col>
|
||||
<a-col :span='14'>
|
||||
<span style='line-height: 32px;padding-left: 24px'>
|
||||
定时调用所选属性
|
||||
</span>
|
||||
</a-col>
|
||||
<a-col :span='24' v-if='showTable'>
|
||||
|
||||
</a-col>
|
||||
</a-row>
|
||||
</template>
|
||||
|
||||
<script setup lang='ts' name='WriteProperties'>
|
||||
import { filterSelectNode } from '@/utils/comm'
|
||||
import type { PropType } from 'vue'
|
||||
|
||||
type Emit = {
|
||||
(e: 'update:value', data: Record<string, any>): void
|
||||
(e: 'update:action', data: string): void
|
||||
}
|
||||
|
||||
const props = defineProps({
|
||||
value: {
|
||||
type: Object as PropType<Record<string, any>>,
|
||||
default: () => []
|
||||
},
|
||||
action: {
|
||||
type: String,
|
||||
default: ''
|
||||
},
|
||||
properties: {
|
||||
type: Array,
|
||||
default: () => []
|
||||
}
|
||||
})
|
||||
|
||||
const emit = defineEmits<Emit>()
|
||||
|
||||
const reportKey = ref<string>()
|
||||
const callData = ref<Array<Record<string, any>>>()
|
||||
|
||||
const callDataOptions = computed(() => {
|
||||
const _valueKeys = Object.keys(props.value)
|
||||
if (_valueKeys.length) {
|
||||
return _valueKeys.map(key => {
|
||||
const item: any = props.properties.find((p: any) => p.id === key)
|
||||
if (item) {
|
||||
return {
|
||||
id: item.id,
|
||||
name: item.name,
|
||||
type: item.valueType ? item.valueType.type : '-',
|
||||
format: item.valueType ? item.valueType.format : undefined,
|
||||
options: item.valueType ? item.valueType.element : undefined,
|
||||
value: props.value[key]
|
||||
}
|
||||
}
|
||||
return {
|
||||
id: key,
|
||||
name: key,
|
||||
type: '',
|
||||
format: undefined,
|
||||
options: undefined,
|
||||
value: props.value[key]
|
||||
}
|
||||
})
|
||||
}
|
||||
return []
|
||||
})
|
||||
|
||||
const showTable = computed(() => {
|
||||
return !!reportKey.value
|
||||
})
|
||||
|
||||
const change = (v: string, option: any) => {
|
||||
console.log(v, option)
|
||||
const _data = {
|
||||
[v]: undefined
|
||||
}
|
||||
callData.value = [_data]
|
||||
emit('update:value', _data)
|
||||
}
|
||||
|
||||
</script>
|
||||
|
||||
<style scoped>
|
||||
|
||||
</style>
|
||||
|
|
@ -0,0 +1,38 @@
|
|||
<template>
|
||||
<a-table
|
||||
:data-source='dataSource'
|
||||
:columns='columns'
|
||||
>
|
||||
<template #bodyCell="{ column, record, index }">
|
||||
<template v-if='column.key'>
|
||||
|
||||
</template>
|
||||
</template>
|
||||
</a-table>
|
||||
</template>
|
||||
|
||||
<script setup lang='ts' name='FunctionCall'>
|
||||
|
||||
const dataSource = []
|
||||
|
||||
const columns = [
|
||||
{
|
||||
title: '参数名称',
|
||||
dataIndex: 'name'
|
||||
},
|
||||
{
|
||||
title: '参数名称',
|
||||
dataIndex: 'name'
|
||||
},
|
||||
{
|
||||
title: '值',
|
||||
dataIndex: 'value',
|
||||
align: 'center',
|
||||
width: 260
|
||||
},
|
||||
]
|
||||
</script>
|
||||
|
||||
<style scoped>
|
||||
|
||||
</style>
|
||||
|
|
@ -0,0 +1,98 @@
|
|||
<template>
|
||||
<div class='timer-when-warp'>
|
||||
<div :class='["when-item-option", allActive ? "active" : ""]' @click='() => change(0)'>每天</div>
|
||||
<div
|
||||
v-for='item in timeOptions'
|
||||
:class='["when-item-option", rowKeys.includes(item.value) ? "active" : ""]'
|
||||
@click='() => change(item.value)'
|
||||
>
|
||||
{{ item.label }}
|
||||
</div>
|
||||
</div>
|
||||
</template>
|
||||
|
||||
<script setup lang='ts' name='WhenOption'>
|
||||
import type { PropType } from 'vue'
|
||||
import { numberToString } from './util'
|
||||
|
||||
type Emit = {
|
||||
(e: 'update:value', data: Array<number>):void
|
||||
}
|
||||
|
||||
const props = defineProps({
|
||||
value: {
|
||||
type: Array as PropType<Array<number>>,
|
||||
default: []
|
||||
},
|
||||
type: {
|
||||
type: String,
|
||||
default: ''
|
||||
}
|
||||
})
|
||||
|
||||
const emit = defineEmits<Emit>()
|
||||
|
||||
const timeOptions = ref<Array<{ label: string, value: number}>>([])
|
||||
const rowKeys = ref<Array<number>>(props.value)
|
||||
|
||||
const change = (number: number) => {
|
||||
const _keys = new Set(rowKeys.value)
|
||||
if (number === 0) { // 全选
|
||||
_keys.clear()
|
||||
} else {
|
||||
if (_keys.has(number)) {
|
||||
_keys.delete(number)
|
||||
} else {
|
||||
_keys.add(number)
|
||||
}
|
||||
}
|
||||
rowKeys.value = [..._keys.values()]
|
||||
emit('update:value', rowKeys.value)
|
||||
}
|
||||
|
||||
const allActive = computed(() => {
|
||||
return !rowKeys.value.length
|
||||
})
|
||||
|
||||
watch(() => props.type, () => {
|
||||
const isMonth = props.type === 'month'
|
||||
const day = isMonth ? 31 : 7
|
||||
change(0)
|
||||
timeOptions.value = new Array(day)
|
||||
.fill(1)
|
||||
.map((_, index) => {
|
||||
const _value = index + 1
|
||||
return {
|
||||
label: isMonth ? `${_value}号` : numberToString[_value],
|
||||
value: _value
|
||||
}
|
||||
})
|
||||
}, { immediate: true })
|
||||
|
||||
</script>
|
||||
|
||||
<style scoped lang='less'>
|
||||
.timer-when-warp {
|
||||
display: flex;
|
||||
flex-wrap: wrap;
|
||||
gap: 8px 16px;
|
||||
padding: 16px;
|
||||
background: #fafafa;
|
||||
|
||||
.when-item-option {
|
||||
width: 76px;
|
||||
padding: 6px 0;
|
||||
text-align: center;
|
||||
background: #fff;
|
||||
border: 1px solid #e6e6e6;
|
||||
border-radius: 2px;
|
||||
cursor: pointer;
|
||||
}
|
||||
|
||||
.active {
|
||||
color: #233dd7;
|
||||
border-color: #233dd7;
|
||||
}
|
||||
|
||||
}
|
||||
</style>
|
||||
|
|
@ -0,0 +1,3 @@
|
|||
import Timer from './index.vue'
|
||||
|
||||
export default Timer
|
||||
|
|
@ -17,12 +17,26 @@
|
|||
button-style='solid'
|
||||
/>
|
||||
</a-form-item>
|
||||
<a-form-item v-if='showCron' name='cron'>
|
||||
<a-input placeholder='corn表达式' v-model='formModel.cron' />
|
||||
<a-form-item v-if='showCron' name='cron' :rules="[
|
||||
{ max: 64, message: '最多可输入64个字符' },
|
||||
{
|
||||
validator: async (_, v) => {
|
||||
if (v) {
|
||||
if (!isCron(v)) {
|
||||
return Promise.reject(new Error('请输入正确的cron表达式'));
|
||||
}
|
||||
} else {
|
||||
return Promise.reject(new Error('请输入cron表达式'));
|
||||
}
|
||||
return Promise.resolve();
|
||||
}
|
||||
}
|
||||
]">
|
||||
<a-input placeholder='corn表达式' v-model:value='formModel.cron' />
|
||||
</a-form-item>
|
||||
<template v-else>
|
||||
<a-form-item name='when'>
|
||||
|
||||
<WhenOption v-model:value='formModel.when' :type='formModel.trigger' />
|
||||
</a-form-item>
|
||||
<a-form-item name='mod'>
|
||||
<a-radio-group
|
||||
|
|
@ -38,7 +52,8 @@
|
|||
</template>
|
||||
<a-space v-if='showOnce' style='display: flex;gap: 24px'>
|
||||
<a-form-item :name="['once', 'time']">
|
||||
<a-time-picker valueFormat='HH:mm:ss' v-model:value='formModel.once.time' style='width: 100%' format='HH:mm:ss' />
|
||||
<a-time-picker valueFormat='HH:mm:ss' v-model:value='formModel.once.time' style='width: 100%'
|
||||
format='HH:mm:ss' />
|
||||
</a-form-item>
|
||||
<a-form-item> 执行一次</a-form-item>
|
||||
</a-space>
|
||||
|
|
@ -89,9 +104,17 @@
|
|||
<script setup lang='ts' name='Timer'>
|
||||
import type { PropType } from 'vue'
|
||||
import moment from 'moment'
|
||||
import WhenOption from './WhenOption.vue'
|
||||
import { cloneDeep } from 'lodash-es'
|
||||
import type { OperationTimer } from '../../../typings'
|
||||
import { isCron } from '@/utils/regular'
|
||||
|
||||
type NameType = string[] | string
|
||||
|
||||
type Emit = {
|
||||
(e: 'update:value', data: OperationTimer): void
|
||||
}
|
||||
|
||||
const props = defineProps({
|
||||
name: {
|
||||
type: [String, Array] as PropType<NameType>,
|
||||
|
|
@ -103,13 +126,15 @@ const props = defineProps({
|
|||
}
|
||||
})
|
||||
|
||||
const formModel = reactive({
|
||||
const emit = defineEmits<Emit>()
|
||||
|
||||
const formModel = reactive<OperationTimer>({
|
||||
trigger: 'week',
|
||||
when: [],
|
||||
mod: 'period',
|
||||
cron: undefined,
|
||||
once: {
|
||||
time: ''
|
||||
time: moment(new Date()).format('HH:mm:ss')
|
||||
},
|
||||
period: {
|
||||
from: moment(new Date()).startOf('day').format('HH:mm:ss'),
|
||||
|
|
@ -119,6 +144,8 @@ const formModel = reactive({
|
|||
}
|
||||
})
|
||||
|
||||
Object.assign(formModel, props.value)
|
||||
|
||||
const showCron = computed(() => {
|
||||
return formModel.trigger === 'cron'
|
||||
})
|
||||
|
|
@ -131,6 +158,22 @@ const showPeriod = computed(() => {
|
|||
return formModel.trigger !== 'cron' && formModel.mod === 'period'
|
||||
})
|
||||
|
||||
watch(() => formModel, () => {
|
||||
const cloneValue = cloneDeep(formModel)
|
||||
if (cloneValue.trigger === 'cron') {
|
||||
delete cloneValue.when
|
||||
} else {
|
||||
delete cloneValue.cron
|
||||
}
|
||||
|
||||
if (cloneValue.mod === 'period') {
|
||||
delete cloneValue.once
|
||||
} else {
|
||||
delete cloneValue.period
|
||||
}
|
||||
emit('update:value', cloneValue)
|
||||
}, { deep: true })
|
||||
|
||||
</script>
|
||||
|
||||
<style scoped lang='less'>
|
||||
|
|
@ -0,0 +1,9 @@
|
|||
export const numberToString = {
|
||||
1: '星期一',
|
||||
2: '星期二',
|
||||
3: '星期三',
|
||||
4: '星期四',
|
||||
5: '星期五',
|
||||
6: '星期六',
|
||||
7: '星期日',
|
||||
};
|
||||
|
|
@ -0,0 +1,3 @@
|
|||
export { default as Timer } from './Timer'
|
||||
export { default as TopCard } from './TopCard.vue'
|
||||
export { default as TriggerWay } from './TriggerWay.vue'
|
||||
|
|
@ -93,7 +93,7 @@ export enum ActionAlarmMode {
|
|||
export interface OperationTimerPeriod {
|
||||
from: string;
|
||||
to: string;
|
||||
every: string[];
|
||||
every: number;
|
||||
unit: keyof typeof TimeUnit;
|
||||
}
|
||||
|
||||
|
|
|
|||
|
|
@ -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>
|
||||
|
||||
|
|
|
|||
|
|
@ -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>
|
||||
|
|
@ -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) => {
|
||||
|
|
|
|||
|
|
@ -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: { // 统一单点登陆集成
|
||||
|
|
|
|||
|
|
@ -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>
|
||||
|
|
@ -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,
|
||||
|
|
@ -254,6 +267,7 @@ const params = ref({});
|
|||
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'))
|
||||
|
|
|
|||
Loading…
Reference in New Issue