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

update: 优化场景联动过滤条件

This commit is contained in:
xieyonghong 2023-03-16 16:52:42 +08:00
parent 2eeaddb08d
commit eb91910a5e
11 changed files with 171 additions and 120 deletions
Show Stats Download Patch File Download Diff File Expand all files Collapse all files

2
src/components/Layout/BasicLayoutPage.vue
View File

@ -14,7 +14,7 @@
>
{{ slotProps.route.breadcrumbName }}
</a>
<span v-else >{{ slotProps.route.breadcrumbName }}</span>
<span v-else style='cursor: pointer' >{{ slotProps.route.breadcrumbName }}</span>
</template>
<template #rightContentRender>
<div class="right-content">

2
src/store/scene.ts
View File

@ -1,5 +1,5 @@
import { defineStore } from 'pinia'
import type { BranchesType, FormModelType, SceneItem } from '@/views/rule-engine/Scene/typings'
import type { FormModelType, SceneItem } from '@/views/rule-engine/Scene/typings'
import { detail } from '@/api/rule-engine/scene'
import { cloneDeep, isArray } from 'lodash-es'
import { randomString } from '@/utils/utils'

58
src/views/rule-engine/Scene/Save/action/ListItem/FilterCondition.vue
View File

@ -39,21 +39,27 @@
v-if='showDouble'
icon='icon-canshu'
placeholder='参数值'
value-name='id'
label-name='name'
:options='valueOptions'
:metricOptions='metricOption'
:metricOptions='columnOptions'
:tabsOptions='tabsOptions'
v-model:value='paramsValue.value.value'
v-model:source='paramsValue.value.source'
@select='valueSelect'
/>
<ParamsDropdown
v-else
icon='icon-canshu'
placeholder='参数值'
value-name='id'
label-name='name'
:options='valueOptions'
:metricOptions='metricOption'
:metricOptions='columnOptions'
:tabsOptions='tabsOptions'
v-model:value='paramsValue.value.value'
v-model:source='paramsValue.value.source'
@select='valueSelect'
/>
<j-popconfirm title='确认删除？' @confirm='onDelete'>
<div v-show='showDelete' class='button-delete'> <AIcon type='CloseOutlined' /></div>
@ -74,7 +80,6 @@ import DropdownButton from '../../components/DropdownButton'
import { getOption } from '../../components/DropdownButton/util'
import ParamsDropdown, { DoubleParamsDropdown } from '../../components/ParamsDropdown'
import { inject } from 'vue'
import { ContextKey } from '../../components/Terms/util'
import { useSceneStore } from 'store/scene'
import { storeToRefs } from 'pinia';
@ -112,7 +117,7 @@ const props = defineProps({
type: Number,
default: 0
},
branchName: {
actionName: {
type: Number,
default: 0
},
@ -120,6 +125,10 @@ const props = defineProps({
type: Number,
default: 0
},
branchName: {
type: Number,
default: 0
},
value: {
type: Object as PropType<TermsType>,
default: () => ({
@ -147,24 +156,19 @@ const showDelete = ref(false)
const columnOptions: any = inject('filter-params') //
const termTypeOptions = ref<Array<{ id: string, name: string}>>([]) // 条件值
const valueOptions = ref<any[]>([]) // 默认手动输入下拉
const metricOption = ref<any[]>([]) //
const tabsOptions = ref<Array<TabsOption>>([{ label: '内置参数', key: 'upper', component: 'tree' }])
// { label: '手动输入', key: 'fixed', component: 'string' },
const arrayParamsKey = ['nbtw', 'btw', 'in', 'nin']
const tabsOptions = ref<Array<TabsOption>>(
[
{ label: '手动输入', key: 'fixed', component: 'string' },
{ label: '内置参数', key: 'upper', component: 'tree' }
]
)
const handOptionByColumn = (option: any) => {
if (option) {
termTypeOptions.value = option.termTypes || []
metricOption.value = option.metrics || []
tabsOptions.value.length = 1
tabsOptions.value[0].component = option.dataType
if (option.metrics && option.metrics.length) {
tabsOptions.value.push(
{ label: '指标值', key: 'metric', component: 'select' }
)
}
if (option.dataType === 'boolean') {
valueOptions.value = [
{ label: '是', value: true },
@ -177,24 +181,17 @@ const handOptionByColumn = (option: any) => {
}
} else {
termTypeOptions.value = []
metricOption.value = []
valueOptions.value = []
}
}
watchEffect(() => {
const option = getOption(columnOptions.value, paramsValue.column, 'id')
console.log(option)
handOptionByColumn(option)
})
const showDouble = computed(() => {
const isRange = paramsValue.termType ? ['nbtw', 'btw', 'in', 'nin'].includes(paramsValue.termType) : false
if (metricOption.value.length) {
metricOption.value = metricOption.value.filter(item => isRange ? item.range : !item.range)
} else {
metricOption.value = []
}
const isRange = paramsValue.termType ? arrayParamsKey.includes(paramsValue.termType) : false
return isRange
})
@ -219,14 +216,19 @@ const columnSelect = () => {
emit('update:value', { ...paramsValue })
}
const termsTypeSelect = () => {
const termsTypeSelect = (e: { key: string }) => {
const value = arrayParamsKey.includes(e.key) ? [ undefined, undefined ] : undefined
paramsValue.value = {
source: tabsOptions.value[0].key,
value: undefined
value: value
}
emit('update:value', { ...paramsValue })
}
const valueSelect = () => {
emit('update:value', { ...paramsValue })
}
const termAdd = () => {
const terms = {
column: undefined,
@ -238,11 +240,11 @@ const termAdd = () => {
type: 'and',
key: `params_${new Date().getTime()}`
}
formModel.value.branches?.[props.branchName]?.then?.[props.thenName]?.actions?.[props.name].terms?.push(terms)
formModel.value.branches?.[props.branchName]?.then?.[props.thenName]?.actions?.[props.actionName].terms?.[props.termsName].terms?.push(terms)
}
const onDelete = () => {
formModel.value.branches?.[props.branchName]?.then?.[props.thenName]?.actions?.[props.name].terms?.splice(props.name, 1)
formModel.value.branches?.[props.branchName]?.then?.[props.thenName]?.actions?.[props.actionName].terms?.[props.termsName].terms?.splice(props.name, 1)
}
nextTick(() => {

94
src/views/rule-engine/Scene/Save/action/ListItem/FilterGroup.vue
View File

@ -42,7 +42,7 @@
/>
</j-form-item>
</div>
<div v-if='isLast' class='terms-group-add'>
<div v-if='isLast' class='terms-group-add' @click='addTerms'>
<div class='terms-content'>
<AIcon type='PlusOutlined' style='font-size: 12px;padding-right: 4px;' />
<span>分组</span>
@ -53,22 +53,20 @@
</template>
<script setup lang='ts' name='FilterGroup'>
import { storeToRefs } from 'pinia';
import { storeToRefs } from 'pinia'
import { useSceneStore } from 'store/scene'
import DropdownButton from '../../components/DropdownButton'
import FilterItem from './FilterCondition.vue'
import { isArray } from 'lodash-es'
import { queryBuiltInParams } from '@/api/rule-engine/scene'
import { provide } from 'vue'
import { randomString } from '@/utils/utils'
import { useParams } from '@/views/rule-engine/Scene/Save/util'
const sceneStore = useSceneStore()
const { data: formModel } = storeToRefs(sceneStore)
const columnOptions = ref<any>([])
provide('filter-params', columnOptions)
const props = defineProps({
isFirst: {
type: Boolean,
@ -100,6 +98,16 @@ const props = defineProps({
}
})
const { columnOptions } = useParams({
branch: props.branchName,
branchGroup: props.thenName,
action: props.actionName
}, [
formModel.value.branches![props.branchName].then[props.thenName].actions[props.actionName]
])
provide('filter-params', columnOptions)
const termsOptions = computed(() => {
return formModel.value.branches![props.branchName].then[props.thenName].actions[props.actionName].terms?.[props.name].terms
})
@ -114,66 +122,80 @@ const mouseout = () => {
showDelete.value = false
}
const onDelete = () => {
const addTerms = () => {
const item: any = {
type: 'and',
key: randomString(),
terms: [
{
column: undefined,
value: {
type: 'fixed',
value: undefined
},
termType: undefined,
type: 'and',
key: randomString()
}
]
}
formModel.value
.branches![props.branchName]
.then[props.thenName]
.actions[props.actionName]
.terms?.push(item)
}
const getParams = () => {
const params = {
branch: props.branchName,
branchGroup: props.thenName,
action: props.actionName
}
const data = formModel.value.branches!.filter(item => !!item)
queryBuiltInParams({
...formModel.value,
branches: data,
}, params).then(res => {
if (res.success) {
columnOptions.value = res.result
}
})
const onDelete = () => {
formModel.value
.branches![props.branchName]
.then[props.thenName]
.actions[props.actionName]
.terms?.splice(props.name, 1)
}
const rules = [
{
validator(_: any, v?: Record<string, any>) {
// console.log('-----v',v)
console.log('-----v',v)
if (v !== undefined) {
if (!Object.keys(v).length) {
return Promise.reject(new Error('该数据已发生变更，请重新配置'));
return Promise.reject(new Error('该数据已发生变更，请重新配置'))
}
if (!v.column) {
return Promise.reject(new Error('请选择参数'));
return Promise.reject(new Error('请选择参数'))
}
if (!v.termType) {
return Promise.reject(new Error('请选择操作符'));
return Promise.reject(new Error('请选择操作符'))
}
if (v.value === undefined) {
return Promise.reject(new Error('请选择或输入参数值'));
return Promise.reject(new Error('请选择或输入参数值'))
} else {
if (
isArray(v.value.value) &&
v.value.value.some((_v: any) => _v === undefined)
) {
return Promise.reject(new Error('请选择或输入参数值'));
return Promise.reject(new Error('请选择或输入参数值'))
} else if (v.value.value === undefined) {
return Promise.reject(new Error('请选择或输入参数值'));
return Promise.reject(new Error('请选择或输入参数值'))
}
}
} else {
return Promise.reject(new Error('请选择参数'));
return Promise.reject(new Error('请选择参数'))
}
return Promise.resolve();
},
},
return Promise.resolve()
}
}
]
nextTick(() => {
getParams()
})
// watchEffect(() => {
// if (formModel.value.branches![props.branchName].then[props.thenName].actions[props.actionName]) {
// getParams()
// }
// })
</script>

26
src/views/rule-engine/Scene/Save/action/ListItem/Item.vue
View File

@ -630,32 +630,6 @@ watch(() => props.data, () => {
align-items: baseline;
}
//.terms-params-content {
// position: relative;
// display: flex;
// background-color: #fafafa;
// border: unset;
// row-gap: 16px;
//
// &.no-border {
// border: none;
// }
//
// .terms-params-item {
// display: flex;
// align-items: center;
// }
//
// .ant-form-item {
// margin-bottom: 8px;
// &:not(:first-child) {
// .ant-form-item-explain-error {
// padding-left: 80px !important;
// }
// }
// }
//}
.term-type-warp {
// display: inline-block;
width: 50px;

4
src/views/rule-engine/Scene/Save/components/ParamsDropdown/Double.vue
View File

@ -2,6 +2,8 @@
<ParamsDropdown
v-model:value='myValue[0]'
v-model:source='mySource'
:valueName='valueName'
:labelName='labelName'
:options='options'
:icon='icon'
:placeholder='placeholder'
@ -12,6 +14,8 @@
<ParamsDropdown
v-model:value='myValue[1]'
v-model:source='mySource'
:valueName='valueName'
:labelName='labelName'
:icon='icon'
:placeholder='placeholder'
:tabs-options='tabsOptions'

22
src/views/rule-engine/Scene/Save/components/ParamsDropdown/index.vue
View File

@ -81,7 +81,7 @@ import ValueItem from '@/components/ValueItem/index.vue'
import type { ValueType } from './typings'
import { defaultSetting } from './typings'
import { DropdownMenus, DropdownTimePicker} from '../DropdownButton'
import { getComponent, getOption } from '../DropdownButton/util'
import { getOption } from '../DropdownButton/util'
type Emit = {
(e: 'update:value', data: ValueType): void
@ -109,29 +109,26 @@ nextTick(() => {
const tabsChange = (e: string) => {
mySource.value = e
myValue.value = undefined
}
const updateValue = () => {
emit('update:source', mySource.value)
emit('update:value', myValue.value)
emit('update:value', undefined)
emit('select', {})
}
const treeSelect = (e: any) => {
const treeSelect = (v: any, option: any) => {
const node = option.node
visible.value = false
label.value = e.fullname || e.name
emit('update:value', e[props.valueName])
emit('select', e)
label.value = node.fullname || node.name
emit('update:value', node[props.valueName])
emit('select', node)
}
const valueItemChange = (e: string) => {
console.log('valueItemSelect', e)
label.value = e
emit('update:value', e)
emit('select', e)
}
const onSelect = (e: string, option: any) => {
console.log(e, option)
visible.value = false
label.value = option.label
emit('update:value', e)
@ -150,7 +147,8 @@ const visibleChange = (v: boolean) => {
}
watchEffect(() => {
const option = getOption(props.options, props.value as string, props.valueName) // 回显label值
const _options = props.source === 'upper' ? props.metricOptions : props.options
const option = getOption(_options, props.value as string, props.valueName) // 回显label值
myValue.value = props.value
mySource.value = props.source
if (option) {

8
src/views/rule-engine/Scene/Save/components/Terms/ParamsItem.vue
View File

@ -149,6 +149,7 @@ const termTypeOptions = ref<Array<{ id: string, name: string}>>([]) // 条件值
const valueOptions = ref<any[]>([]) // 默认手动输入下拉
const metricOption = ref<any[]>([]) // 根据termType获取对应指标值
const tabsOptions = ref<Array<TabsOption>>([{ label: '手动输入', key: 'manual', component: 'string' }])
const arrayParamsKey = ['nbtw', 'btw', 'in', 'nin']
let metricsCacheOption: any[] = [] // 缓存指标值
const handOptionByColumn = (option: any) => {
@ -187,7 +188,7 @@ watchEffect(() => {
})
const showDouble = computed(() => {
const isRange = paramsValue.termType ? ['nbtw', 'btw', 'in', 'nin'].includes(paramsValue.termType) : false
const isRange = paramsValue.termType ? arrayParamsKey.includes(paramsValue.termType) : false
if (metricsCacheOption.length) {
metricOption.value = metricsCacheOption.filter(item => isRange ? item.range : !item.range)
} else {
@ -217,10 +218,11 @@ const columnSelect = () => {
emit('update:value', { ...paramsValue })
}
const termsTypeSelect = () => {
const termsTypeSelect = (e: { key: string }) => {
const value = arrayParamsKey.includes(e.key) ? [ undefined, undefined ] : undefined
paramsValue.value = {
source: tabsOptions.value[0].key,
value: undefined
value: value
}
emit('update:value', { ...paramsValue })
}

13
src/views/rule-engine/Scene/Save/components/Terms/Terms.vue
View File

@ -47,7 +47,7 @@ import { storeToRefs } from 'pinia';
import { useSceneStore } from 'store/scene'
import { cloneDeep } from 'lodash-es'
import { provide } from 'vue'
import { ContextKey } from './util'
import { ContextKey, handleParamsData } from './util'
import { getParseTerm } from '@/api/rule-engine/scene'
import type { FormModelType } from '@/views/rule-engine/Scene/typings'
import Branches from './Branchs.vue'
@ -65,17 +65,6 @@ const change = (e: boolean) => {
open.value = e
}
const handleParamsData = (data: any[]): any[] => {
return data?.map(item => {
return {
...item,
key: item.column,
disabled: !!item.children,
children: handleParamsData(item.children)
}
}) || []
}
const queryColumn = (dataModel: FormModelType) => {
const cloneDevice = cloneDeep(dataModel)
cloneDevice.branches = cloneDevice.branches?.filter(item => !!item)

13
src/views/rule-engine/Scene/Save/components/Terms/util.ts
View File

@ -1 +1,12 @@
export const ContextKey = 'columnOptions'
export const ContextKey = 'columnOptions'
export const handleParamsData = (data: any[], key: string = 'column'): any[] => {
return data?.map(item => {
return {
...item,
key: item[key],
disabled: !!item.children,
children: handleParamsData(item.children, key)
}
}) || []
}

49
src/views/rule-engine/Scene/Save/util.ts Normal file
View File

@ -0,0 +1,49 @@
import { queryBuiltInParams } from '@/api/rule-engine/scene'
import { handleParamsData } from './components/Terms/util'
import { useSceneStore } from 'store/scene'
import { storeToRefs } from 'pinia'
import type { FormModelType } from '@/views/rule-engine/Scene/typings'
interface Params {
branch: number
branchGroup: number
action: number
}
export const getParams = (params: Params, sceneModel: FormModelType): Promise<any[]> => {
return new Promise(res => {
const data = sceneModel.branches!.filter(item => !!item)
queryBuiltInParams({
...sceneModel,
branches: data
}, params).then(resp => {
if (resp.success) {
res(resp.result as any[])
}
})
})
}
/**
* @param params
*/
export const useParams = (params: Params, effect: any[] = []) => {
const sceneStore = useSceneStore()
const { data: formModel } = storeToRefs(sceneStore)
const columnOptions = ref<any[]>([])
const handleParams = async () => {
const _data = await getParams(params, formModel.value)
columnOptions.value = handleParamsData(_data, 'id')
}
watchEffect(() => {
if (effect[0]) {
handleParams()
}
})
return {
columnOptions
}
}