ibsp-fg-page 4.0.2

package/src/views/designer/modules/data-model/src/components/filter-data/components/MoreConfig.vue

@@ -0,0 +1,121 @@
+<script setup lang='ts'>
+import { computed } from 'vue';
+
+const props = defineProps(['dataRecast', 'fields'])
+const options = computed(()=>{
+  const selectFields = props.dataRecast.selectFields;
+  if (selectFields.length === 0) {
+    return props.fields;
+  }
+  return selectFields.map((item:any)=>{
+    return {
+      key: item.key,
+      label: item.label
+    }
+  })
+})
+
+const onChangeIsTreeSwitch = (val:boolean)=>{
+  if (val) {
+    props.dataRecast.commonFields.isToTree = false;
+  }
+
+}
+const onChangeIsToTreeSwitch = (val:boolean)=>{
+  if (val) {
+    props.dataRecast.commonFields.isTree = false;
+  }
+}
+</script>
+
+<template>
+  <div class="model-more-config">
+    <el-alert title="下面用于部分组件配置如:选择器/单选框/级联选择/补全框/树形等"
+              type="info"
+              center
+              show-icon />
+    <div class="model-more-config-item-config">
+      <label>通用名称展示字段</label>
+      <el-select v-model="dataRecast.commonFields.labelField"
+                 placeholder="请选择"
+                 filterable
+                 style="width: 100%;">
+        <el-option v-for="item in options"
+                   :key="item.key"
+                   :label="item.label"
+                   :value="item.key" />
+      </el-select>
+
+
+    </div>
+    <div class="model-more-config-item-config">
+      <label>通用值字段</label>
+      <el-select v-model="dataRecast.commonFields.valueField"
+                 placeholder="请选择"
+                 filterable
+                 style="width: 100%;">
+        <el-option v-for="item in options"
+                   :key="item.key"
+                   :label="item.label"
+                   :value="item.key" />
+      </el-select>
+
+
+    </div>
+    <div class="model-more-config-item-config">
+      <label>树形数据</label>
+      <el-switch v-model="dataRecast.commonFields.isTree" @change="onChangeIsTreeSwitch" />
+    </div>
+    <div class="model-more-config-item-config">
+      <label>转成树形数据</label>
+      <el-switch v-model="dataRecast.commonFields.isToTree" @change="onChangeIsToTreeSwitch" />
+    </div>
+    <template v-if="dataRecast.commonFields.isTree || dataRecast.commonFields.isToTree">
+      <div class="model-more-config-item-config">
+        <label>关联父字段</label>
+        <el-select v-model="dataRecast.commonFields.parentField"
+                   placeholder="请选择"
+                   filterable
+                   style="width: 100%;">
+          <el-option v-for="item in options"
+                     :key="item.key"
+                     :label="item.label"
+                     :value="item.key" />
+        </el-select>
+      </div>
+      <div class="model-more-config-item-config" >
+        <label>关联孩子字段</label>
+        <el-select v-model="dataRecast.commonFields.childrenField"
+                   placeholder="请选择"
+                   filterable
+                   style="width: 100%;">
+          <el-option v-for="item in options"
+                     :key="item.key"
+                     :label="item.label"
+                     :value="item.key" />
+        </el-select>
+      </div>
+    </template>
+  </div>
+
+</template>
+
+<style lang="less" scoped>
+.model-more-config{
+    width: 100%;
+    height: 100%;
+    padding: 10px;
+  .model-more-config-item-config{
+    display: flex;
+    margin-top: 10px;
+    label{
+      width: 150px;
+      text-align: right;
+      margin-right: 10px;
+      flex-shrink: 0;
+      user-select: none;
+    }
+  }
+}
+
+</style>

package/src/views/designer/modules/data-model/src/components/filter-data/components/select-field/index.vue

@@ -0,0 +1,337 @@
+<script setup lang='ts'>
+import { nextTick, ref, computed } from 'vue'
+import type { ElInput } from 'element-plus'
+import { ArrowRight, Edit } from '@element-plus/icons-vue'
+
+import { useSelectField, type Field } from './useSelectField'
+import {ElMessage} from 'element-plus'
+const props = defineProps<{
+    dataRecast:LeaveParams['dataRecast'],
+    fields: Field[],
+}>()
+
+const selectFields = defineModel<Field[]>({
+  default: ()=>[]
+})
+const addInputRef = ref<typeof ElInput>()
+const editInputRef = ref<typeof ElInput>({})
+
+const {
+  leftFields,
+  rightFields,
+  state,
+  onChangeCheckAll,
+  onChangeCheck
+} = useSelectField(props, selectFields)
+
+
+const leftChecked = computed(()=>{
+  return leftFields.value.filter(item=>item.checked)
+})
+
+const rightChecked = computed(()=>{
+  return rightFields.value.filter(item=>item.checked)
+})
+
+const onClickAddRight = ()=>{
+  const _rightFieldsMap = rightFields.value.reduce(item=>{
+    item[item.key] = item
+    return item
+  }, {}as any)
+  leftChecked.value.forEach((item)=>{
+    item.checked = false
+    if (!_rightFieldsMap[item.key]) {
+      rightFields.value.push({ ...item })
+    }
+  })
+  const rightKeys = rightFields.value.map(item=>item.key)
+  leftFields.value = leftFields.value.filter(item=>!rightKeys.includes(item.key))
+  selectFields.value = rightFields.value.map(item=>({
+    key: item.key,
+    label: item.label,
+    isCustom: item.isCustom
+  }))
+  state.leftCheckAll = false
+}
+
+const onClickAddField = ()=>{
+  state.addShow = true
+  nextTick(()=>{
+    addInputRef.value?.focus?.()
+  })
+}
+
+const onChangeInput = (val:string)=>{
+  let keys = val.split(/[\s,，]+/);
+  const exitMap = selectFields.value.reduce((acc, item)=>{
+    acc[item.key] = item
+    return acc
+  }, {} as any)
+  keys = Array.from(new Set(keys.filter(Boolean))).filter(key=>!exitMap[key])
+  keys.forEach((key:string)=>{
+    rightFields.value.push({
+      key,
+      label: key,
+      checked: false,
+      isCustom: true
+    })
+  })
+  selectFields.value = rightFields.value.map(item=>({
+    key: item.key,
+    label: item.label,
+    isCustom: item.isCustom
+  }))
+  state.addShow = false
+  state.addValue = ''
+}
+
+const onClickDelField = ()=>{
+  const leftFieldsMap = leftChecked.value.reduce((acc, item)=>{
+    acc[item.key] = item
+    return acc
+  }, {} as any)
+  const keys:string[] = rightChecked.value.map(item=>item.key)
+  rightChecked.value.forEach((item:Field)=>{
+    item.checked = false
+    if (!leftFieldsMap[item.key] && !item.isCustom) {
+      leftFields.value.push({ ...item })
+    }
+  })
+  rightFields.value = rightFields.value.filter((item:Field)=>!keys.includes(item.key))
+  selectFields.value = rightFields.value.map(item=>({
+    key: item.key,
+    label: item.label,
+    isCustom: item.isCustom
+  }))
+  state.rightCheckAll = false
+}
+
+const onClickEdit = (item:Field)=>{
+  item.isEdit = true
+  nextTick(()=>{
+    editInputRef.value[item.key]?.focus?.()
+  })
+}
+
+const onEditLabel = (item:Field)=>{
+  const name = item.label?.trim?.()
+  if (!name) {
+    item.label = item.key
+    ElMessage.warning('字段名不能为空')
+    item.isEdit = false
+    return
+  }
+  item.label = name
+  item.isEdit = false
+  const currentItem = selectFields.value.find(_item=>_item.key === item.key)
+  if (currentItem) {
+    currentItem.label = name
+  }
+}
+
+</script>
+
+<template>
+  <div class="ibsp-transfer-field-select">
+    <div class="left-select">
+      <header>
+        <el-checkbox @change="(val:boolean)=>onChangeCheckAll('left',val)"
+                     v-model="state.leftCheckAll"
+                     label="数据字段" />
+      </header>
+      <main>
+        <div class="field-list">
+          <div class="field-item"
+               v-for="item in leftFields"
+               :key="item.key">
+            <el-checkbox v-model="item.checked"
+                         :key="item.key"
+                         @change="onChangeCheck('left',item)"
+                         :label="item.label" />
+          </div>
+        </div>
+      </main>
+    </div>
+    <div class="btn">
+      <el-button type="primary"
+                 size="small"
+                 @click="onClickAddRight">
+        <el-icon><ArrowRight /></el-icon>
+      </el-button>
+    </div>
+    <div class="right-select">
+      <header>
+        <el-checkbox @change="(val:boolean)=>onChangeCheckAll('right',val)"
+                     v-model="state.rightCheckAll"
+                     label="已添加字段" />
+      </header>
+      <main>
+        <div class="field-list">
+          <div class="field-item right-select-item"
+               v-for="item in rightFields"
+               :key="item.key">
+            <el-checkbox v-model="item.checked"
+                         :key="item.key"
+                         v-show="!item.isEdit"
+                         @change="onChangeCheck('right',item)"
+                         :label="item.label" >
+              {{ item.key === item.label? item.label : item.label+'('+item.key+')' }}
+            </el-checkbox>
+            <form @submit.prevent="onEditLabel(item)">
+              <el-input
+                v-if="item.isEdit"
+                v-model="item.label"
+                @blur="onEditLabel(item)"
+                size="mini"
+                :ref="(el:any)=>{
+                  editInputRef[item.key] =el
+                }"
+              ></el-input>
+            </form>
+
+            <el-icon v-show="!item.isEdit"
+                     @click="onClickEdit(item)"><Edit /></el-icon>
+          </div>
+        </div>
+      </main>
+      <footer>
+        <el-button class="transfer-footer"
+                   type="primary"
+                   size="small"
+                   v-show="!state.addShow"
+                   @click="onClickAddField"
+                   plain >新增字段</el-button>
+        <el-input ref="addInputRef"
+                  v-model="state.addValue"
+                  @change="onChangeInput"
+                  placeholder="多个字段以逗号/空格分隔"
+                  clearable
+                  v-if="state.addShow" ></el-input>
+        <el-button class="transfer-footer"
+                   type="danger"
+                   @click="onClickDelField"
+                   v-show="rightChecked.length>0"
+                   size="small"
+                   plain >删除</el-button>
+      </footer>
+    </div>
+
+  </div>
+</template>
+
+<style scoped lang="less">
+.el-transfer{
+  --el-color-primary:var(--theme-gl-bg);
+}
+.ibsp-transfer-field-select{
+  height: 100%;
+  display: flex;
+  flex-wrap: wrap;
+  width: 100%;
+  margin-bottom: 20px;
+  border-radius: 4px;
+  .left-select{
+    width: 260px;
+    main{
+      height:  calc(100% - 40px);
+      overflow: auto;
+    }
+  }
+  .left-select,.right-select{
+
+    header{
+      display: flex;
+      align-items: center;
+      border-bottom: 1px solid var(--theme-border-color);
+      height: 40px;
+      line-height: 40px;
+      padding: 0 10px;
+      span{
+        margin-left: 10px;
+      }
+    }
+    main{
+      padding: 0 10px;
+      .field-list{
+        display: flex;
+        flex-wrap: wrap;
+        .right-select-item{
+          display: flex;
+          align-items: center;
+          .el-checkbox{
+      :deep(.el-checkbox__label){
+        max-width: 285px;
+    overflow: hidden;
+    text-overflow: ellipsis;
+    white-space: nowrap;
+      }
+
+    }
+          form{
+            flex: 1;
+            width:100%;
+            .el-button{
+              width:100%;
+            }
+          }
+          .el-icon{
+            margin: 0 5px;
+            border-radius: 4px;
+            cursor: pointer;
+            &:hover{
+              background-color: var(--theme-border-color);
+              color:var(--theme-gl-bg);
+
+            }
+          }
+        }
+        .field-item{
+          width:100%;
+          .el-checkbox{
+            width: 100%;
+          }
+
+        }
+      }
+    }
+    footer{
+      height: 48px;
+      padding: 4px 10px;
+
+
+    }
+  }
+  .btn{
+    width: 50px;
+    display: flex;
+    flex-direction: column;
+    align-items: center;
+    justify-content: center;
+    border: 1px solid var(--theme-border-color);
+    .el-button{
+      width: 100%;
+      height: 30px;
+    }
+  }
+  .right-select{
+    flex: 1;
+
+
+    main{
+      height:  calc(100% - 88px);
+      overflow: auto;
+    }
+    footer{
+      display: flex;
+      justify-content: space-between;
+      align-items: center;
+      border-top:1px solid var(--theme-border-color);
+
+
+    }
+  }
+  >div{
+    height: 100%;
+  }
+}
+</style>

package/src/views/designer/modules/data-model/src/components/filter-data/components/select-field/useSelectField.ts

@@ -0,0 +1,104 @@
+import { reactive, ref, type Ref, watch } from 'vue'
+
+export type Field = {
+    key: string,
+    label: string,
+    checked?: boolean,
+    isCustom?: boolean,
+    isEdit?: boolean
+  }
+export const useSelectField = (
+  props:{
+    dataRecast:LeaveParams['dataRecast'],
+    fields: Field[],
+},
+  modelValue:Ref<Field[]>
+)=>{
+
+  const rightFields = ref<Field[]>((props.dataRecast?.selectFields || []).map((item:any)=>{
+    if (typeof item === 'string') {
+      return {
+        key: item,
+        label: item
+      }
+    }
+    return {
+      ...item,
+      isEdit: false
+    }
+  }))
+  const leftFields = ref<Field[]>([])
+
+  const state = reactive({
+    leftCheckAll: false,
+    rightCheckAll: false,
+    addValue: '',
+    addShow: false
+  })
+
+  watch(()=>props.fields, (field:Field[])=>{
+    if (field.length === 0) return
+    const selectFields = JSON.parse(JSON.stringify(rightFields.value)) as any[]
+    const _leftFieldsMap = field.reduce((acc, item)=>{
+      acc[item.key] = item
+      return acc
+    }, {} as any)
+    rightFields.value = rightFields.value.filter(item=>{
+      if (item.isCustom) return true
+      if (!(_leftFieldsMap[item.key]) && !item.isCustom) {
+        return false
+      }
+      return true
+    })
+    modelValue.value = rightFields.value.map(item=>({
+      key: item.key,
+      label: item.label,
+      isCustom: item.isCustom
+    }))
+
+    const selectFieldsMap = selectFields.reduce?.((acc, item)=>{
+      acc[item.key] = acc
+      return acc
+    }, {} as any) || {}
+    leftFields.value = field.map(item=>{
+      if (selectFieldsMap[item.key]) {
+        return null
+      }
+      return { ...item, checked: false }
+    }).filter(Boolean) as Field[]
+  }, {
+    immediate: true
+  })
+
+
+  const onChangeCheckAll = (f:'left' | 'right', state:boolean)=>{
+    if (f === 'left') {
+      leftFields.value.forEach(item=>{
+        item.checked = state
+      })
+    } else {
+      rightFields.value.forEach(item=>{
+        item.checked = state
+      })
+    }
+
+  }
+
+  const onChangeCheck = (f:'left' | 'right', field:Field)=>{
+    if (f === 'left') {
+      state.leftCheckAll = leftFields.value.every(item=>item.checked)
+    } else {
+      state.rightCheckAll = rightFields.value.every(item=>item.checked)
+    }
+
+  }
+
+  return {
+    rightFields,
+    leftFields,
+    state,
+    onChangeCheckAll,
+    onChangeCheck
+  }
+
+}

package/src/views/designer/modules/data-model/src/components/filter-data/index.vue

@@ -0,0 +1,140 @@
+<script setup lang='ts'>
+import { ref, watch } from 'vue'
+import { isPlainObject } from 'lodash-es';
+
+import SelectField from './components/select-field/index.vue'
+import MoreConfig from './components/MoreConfig.vue'
+
+const props = defineProps<{
+  data:any[],
+  dataRecast:LeaveParams['dataRecast'],
+  dataViewFields:any
+}>()
+
+const fields = ref<any[]>([])
+
+const addFields = (keys:any)=>{
+  const exitsKeys = fields.value.map((item)=>item.key)
+  keys.forEach((item:any)=>{
+    if ((!exitsKeys.includes(item.key)) && item.isCustom) {
+      fields.value.push({
+        key: item.key,
+        label: item.label,
+        isCustom: true
+      })
+    }
+  })
+}
+
+defineExpose({
+  setFields(_fields:any[]) {
+    if (_fields?.length) {
+      fields.value = _fields;
+    } else if (Array.isArray(props.data)) {
+      const item:any = props.data[0]
+      if (isPlainObject(item) && !Array.isArray(item)) {
+        fields.value = Object.keys(item).map((key)=>{
+          return {
+            key,
+            label: key
+          }
+        })
+        return
+      }
+    }
+    const selectFields = props.dataRecast!.selectFields as any
+    if (selectFields) {
+      addFields(selectFields)
+    }
+  }
+})
+
+
+</script>
+
+<template>
+  <div class="ibsp-model-data-filter">
+    <el-tabs type="border-card">
+      <el-tab-pane label="字段选择">
+        <SelectField :fields="fields"
+                     :dataRecast="dataRecast"
+                     v-model="dataRecast!.selectFields"  />
+      </el-tab-pane>
+      <el-tab-pane label="通用字段">
+        <MoreConfig
+          :fields="fields"
+          :dataRecast="dataRecast"
+        />
+      </el-tab-pane>
+      <el-tab-pane label="条件过滤">
+        未开发...
+      </el-tab-pane>
+      <el-tab-pane label="字段关联">
+        未开发...
+      </el-tab-pane>
+      <el-tab-pane label="数据排序">
+        未开发...
+      </el-tab-pane>
+
+    </el-tabs>
+  </div>
+
+</template>
+
+<style lang="less" scoped>
+.ibsp-model-data-filter{
+    width: 100%;
+    height: 400px;
+
+    :deep(.el-tabs--border-card>.el-tabs__content){
+        padding: 0;
+        >div{
+          height: 100%;
+        }
+    }
+    .el-tabs{
+        width: 100%;
+        height: 100%;
+        --el-color-primary:var(--theme-gl-bg);
+        :deep(.el-tabs__content){
+            height: calc(100% - 40px);
+        }
+        .el-transfer{
+            display: flex;
+    :deep(.el-transfer-panel__footer){
+        padding: 0 10px;
+    }
+    :deep(.el-transfer-panel){
+        &:first-child{
+            .el-transfer-panel__body{
+                height: 100%;
+            }
+        }
+    }
+    :deep(.el-transfer-panel__list){
+        height: var(--el-transfer-panel-body-height);
+    }
+            :deep(.el-transfer__buttons){
+              display: flex;
+              align-items: center;
+                padding: 0;
+                .el-button:first-child{
+                    display: none ;
+                }
+                .el-button{
+                    margin: 0;
+                }
+            }
+            :deep(.el-transfer-panel__filter){
+                padding: 0;
+            }
+            :deep(.el-transfer-panel){
+                &:last-child{
+                    flex: 1;
+                }
+            }
+        }
+    }
+}
+
+</style>