ibsp-fg-page 4.0.2

package/src/views/designer/modules/ibsp-config/configComponentLibs/ControlConfig/SelectConfig.vue

@@ -0,0 +1,599 @@
+<script setup>
+import { ref, onMounted, computed } from 'vue';
+import { Close } from '@element-plus/icons-vue'
+import { v4 as getUuid4 } from 'uuid';
+
+import DynamicDataValue from '../DynamicDataValue.vue';
+
+import { getViewDataListApi, getFieldViewDataIdApi, getParamViewDataIdApi, getResultAppendListApi } from '@/api/ibsp-bg-dataview'
+import { getClassList, getDetailList, queryDictByCode } from '@/api/ibsp-bg-app'
+import usePage from '@/hooks/usePage'
+const props = defineProps({
+  config: {
+    type: Object,
+    default: () => ({})
+  },
+  configValue: {
+    type: Object,
+    default: () => ({})
+  },
+  activeComponent: {
+    type: Object,
+    default: () => ({})
+  }
+})
+
+const type = computed(()=>{
+  return props.config.componentProps?.slots?.componentProps?.type || props.configValue.type || 'select'
+})
+const form = ref({
+  type: '1',
+  executionTiming: false,
+  viewId: '',
+  labelKey: '',
+  valueKey: '',
+  default: {
+    key: [],
+    value: false
+  },
+  renderType: false,
+  dictCode: [],
+  options: [],
+  viewParamList: [],
+  treeFiled: {
+    id: '',
+    pid: ''
+  }
+})
+const { page } = usePage()
+const dictData = ref([])
+const changeClass = (dictCode) => {
+  if (!dictCode) {
+    dictData.value = []
+    return
+  }
+  queryDictByCode(dictCode.slice(-1)).then(res => {
+    if (res.code === 20000) {
+      dictData.value = res.data[0].list.map(item => {
+        return {
+          ...item,
+          isDefault: form.value.default.key.includes(item.dictCode)
+        }
+      })
+    }
+  })
+    .catch(err => {
+      console.log('queryDictByCode', err)
+    })
+}
+/**
+ * 静态数据
+ */
+const addStaticData = () => {
+  form.value.options.push({
+    id: getUuid4(),
+    label: '',
+    value: ''
+  })
+}
+const deleteStaticData = (row) =>{
+  if (row.row.isDefault) {
+    const key = form.value.default.key
+    if (key.includes(row.row.value)) {
+      const arr = key.filter(item => item.value !== row.row.value)
+      form.value.default = {
+        key: arr,
+        value: !!arr.length
+      }
+    }
+  }
+  form.value.options.splice(row.$index, 1)
+}
+
+/**
+ * 数据视图
+ */
+const viewDataList = ref([])
+const getViewData = () => {
+  getViewDataListApi().then(res => {
+    if (res.code === 20000) {
+      viewDataList.value = res.data.records
+    }
+  })
+    .catch(err => {
+      console.log('getViewDataListApi', err);
+    })
+}
+const viewFieldList = ref([])
+const viewData = ref([])
+
+const changViewData = (id) => {
+  // 获取数据视图字段
+  getFieldViewDataIdApi(id).then(res => {
+    if (res.code === 20000) {
+      viewFieldList.value = res.data
+    }
+  })
+    .catch(err => {
+      console.log('getFieldViewDataIdApi', err)
+    })
+  const viewParam = form.value.viewParamList.reduce((acc, obj) => {
+    acc[obj.paramCode] = obj.paramValue || ''
+    return acc
+  }, {})
+  // 获取数据视图参数
+  getParamViewDataIdApi(id).then(res => {
+    if (res.code === 20000) {
+      form.value.viewParamList = res.data.map(item => {
+        return {
+          ...item,
+          paramValue: viewParam[item.paramCode]
+        }
+      })
+    }
+  })
+    .catch(err => {
+      console.log('getParamViewDataIdApi', err)
+    })
+}
+const getViewIdData = () => {
+  const params = {
+    viewId: form.value.viewId,
+    pageSize: 1000,
+    queryParamList: form.value.viewParamList.map(item => {
+      return { [item.paramCode]: page.getDynamicValue(item.paramValue) || '' }
+    })
+  }
+  console.log('params', params)
+  getResultAppendListApi(params).then(res => {
+    if (res.code === 20000) {
+      viewData.value = res.data.list.map(item => {
+        return {
+          label: item[form.value.labelKey],
+          value: item[form.value.valueKey],
+          isDefault: form.value.default.key.includes(item[form.value.valueKey])
+        }
+      })
+    }
+  })
+    .catch(err => {
+      console.log('getResultAppendListApi', err)
+    })
+}
+const changSource = (val) => {
+  if (val === '2') {
+    if (form.value.viewId) {
+      changViewData(form.value.viewId)
+    }
+    if (form.value.labelKey || form.value.valueKey) {
+      getViewIdData()
+    }
+  } else if (val === '3') {
+    changeClass(form.value.dictCode)
+  }
+}
+/**
+ * 数据字典
+ */
+const classListData = ref([])
+const getClassListData = () => {
+  getClassList({ pageNo: 1, pageSize: 1000 }).then(res => {
+    if (res.code === 20000) {
+      classListData.value = res.data.list
+    }
+  })
+    .catch(err => {
+      console.log('getClassList', err)
+    })
+}
+const loadDict = (node, resolve) => {
+  if (Object.keys(node.data).length === 0) {
+    resolve([])
+    return
+  }
+  const params = {
+    dictId: node.data.id,
+    pageNo: 1,
+    pageSize: 1000,
+    status: 1,
+    keyword: ''
+  }
+  getDetailList(params)
+    .then(res => {
+      if (res.success) {
+        classListData.value.forEach(item => {
+          if (item.id === node.data.id) {
+            item.children = res.data.list
+          }
+        })
+        resolve(res.data.list)
+      }
+    })
+}
+
+
+/**
+ * 公共方法
+ */
+const setFromDefaultValue = (data, key) => {
+  form.value.default = {
+    key: data.filter(item => item.isDefault).map(item => item[key]),
+    value: '随意'
+  }
+}
+const setDefultData = (data, index, row, key) => {
+  data.forEach((item, i) => {
+    if (i === index) {
+      form.value.default = {
+        key: row.isDefault ? [item[key]] : [],
+        value: row.isDefault
+      }
+    } else {
+      item.isDefault = false
+    }
+  })
+}
+const changeDefaultValue = ({ $index, row }) => {
+  const renderType = form.value.renderType
+  if (form.value.type === '3') {
+    if (renderType) {
+      setFromDefaultValue(dictData.value, 'dictCode')
+    } else {
+      setDefultData(dictData.value, $index, row, 'dictCode')
+    }
+  } else if (form.value.type === '2') {
+    if (renderType) {
+      setFromDefaultValue(viewData.value, 'value')
+    } else {
+      setDefultData(viewData.value, $index, row, 'value')
+    }
+  } else {
+    if (renderType) {
+      setFromDefaultValue(form.value.options, 'value')
+    } else {
+      setDefultData(form.value.options, $index, row, 'value')
+    }
+  }
+}
+const resetDefultData = () => {
+  const type = form.value.type
+  form.value.default = {
+    key: [],
+    value: '随意'
+  }
+  if (type === '3') {
+    dictData.value.forEach(item => {
+      item.isDefault = false
+    })
+  } else if (type === '2') {
+    viewData.value.forEach(item => {
+      item.isDefault = false
+    })
+  } else {
+    form.value.options.forEach(item => {
+      item.isDefault = false
+    })
+  }
+}
+const changeRenderType = (val) => {
+  if (!val) {
+    form.value.default = {
+      key: [],
+      value: false
+    }
+    if (form.value.type === '1') {
+      setDefultData(form.value.options)
+    } else if (form.value.type === '2') {
+      setDefultData(viewData.value)
+    } else if (form.value.type === '3') {
+      setDefultData(dictData.value)
+    }
+  }
+}
+
+const controlConfig = computed(() =>{
+  return props.configValue.controlConfig
+})
+onMounted(() => {
+  getViewData()
+  getClassListData()
+  if (!controlConfig.value || Object.keys(controlConfig.value)?.length === 0) {
+    props.configValue.controlConfig = {}
+  } else {
+    form.value = controlConfig.value
+    changSource(form.value.type)
+  }
+})
+const getConfigData = () => {
+  return form.value
+}
+defineExpose({
+  getConfigData
+})
+</script>
+
+<template>
+
+  <el-form :model="form" label-width="100px">
+    <el-form-item label="数据来源">
+      <el-radio-group v-model="form.type" @change="changSource">
+        <el-radio label="1">静态数据</el-radio>
+        <el-radio label="2">数据视图</el-radio>
+        <el-radio label="3">分类字典</el-radio>
+      </el-radio-group>
+    </el-form-item>
+    <el-form-item label="执行时机">
+      <el-switch
+        v-model="form.executionTiming"
+        active-text="立即执行"
+        size="small"
+        inactive-text="查询执行"/>
+    </el-form-item>
+    <el-form-item label="渲染类型">
+      <el-radio-group v-model="form.renderType" @change="changeRenderType">
+        <el-radio :label="false">单选</el-radio>
+        <el-radio :label="true">多选</el-radio>
+      </el-radio-group>
+    </el-form-item>
+    <template v-if="form.type === '1'">
+      <el-form-item label="选择数据">
+        <div class="flex">
+          <el-button
+            type="primary"
+            @click="addStaticData"
+            size="small">新增选项</el-button>
+          <el-button
+            type="primary"
+            @click="resetDefultData"
+            size="small">一键重置默认选项</el-button>
+        </div>
+      </el-form-item>
+      <el-form-item label=" ">
+        <el-table
+          :data="form.options"
+          height="420"
+          class="table">
+          <el-table-column
+            prop="label"
+            label="名称">
+            <template #default="scope">
+              <el-input v-model="scope.row.label" placeholder="请输入名称" />
+            </template>
+          </el-table-column>
+          <el-table-column
+            prop="value"
+            label="值">
+            <template #default="scope">
+              <el-input v-model="scope.row.value" placeholder="请输入值" />
+            </template>
+          </el-table-column>
+          <el-table-column label="默认值" width="70">
+            <template #default="scope">
+              <el-switch
+                v-model="scope.row.isDefault"
+                @change="changeDefaultValue(scope)"
+                size="small"/>
+            </template>
+          </el-table-column>
+          <el-table-column label="操作" width="55">
+            <template #default="scope">
+              <el-icon style="cursor: pointer;" @click="deleteStaticData(scope)"><Close /></el-icon>
+            </template>
+          </el-table-column>
+        </el-table>
+      </el-form-item>
+    </template>
+    <template v-if="form.type === '2'">
+      <el-form-item label="选择数据">
+        <el-select
+          v-model="form.viewId"
+          placeholder="选择数据视图"
+          clearable
+          filterable
+          @change="changViewData"
+        >
+          <el-option
+            v-for="item in viewDataList"
+            :key="item.id"
+            :label="item.viewCode"
+            :value="item.id"
+          />
+        </el-select>
+      </el-form-item>
+      <el-form-item label=" ">
+        <el-form-item
+          label="参数配置"
+          label-width="100px"
+          style="padding: 5px 0 !important;">
+          <div style="display: grid;grid-gap: 10px;grid-template-columns: 1fr 1fr;">
+            <template v-for="item in form.viewParamList" :key="item.id">
+              <el-input v-model="item.paramValue" size="small">
+                <template #prepend>{{ item.paramName }}</template>
+                <template #append>
+                  <!-- <el-button type="text" @click="paramsValueSet(item)">引用</el-button> -->
+                  <DynamicDataValue
+                    v-model="item.paramValue"
+                    :activeComponent="activeComponent"
+                  />
+                </template>
+              </el-input>
+            </template>
+          </div>
+        </el-form-item>
+        <el-form-item
+          label="字段配置"
+          label-width="100px"
+          style="padding: 5px 0 !important;">
+          <div class="flex">
+            <el-select
+              v-model="form.labelKey"
+              filterable
+              placeholder="选择显示字段"
+              style="flex: 1;"
+              clearable
+              @change="getViewIdData"
+            >
+              <el-option
+                v-for="item in viewFieldList"
+                :key="item.columnCode"
+                :label="item.columnName"
+                :value="item.columnCode"
+              />
+            </el-select>
+            <el-select
+              v-model="form.valueKey"
+              filterable
+              placeholder="选择显示字段值"
+              style="flex: 1;margin-left: 10px;"
+              clearable
+              @change="getViewIdData"
+            >
+              <el-option
+                v-for="item in viewFieldList"
+                :key="item.columnCode"
+                :label="item.columnName"
+                :value="item.columnCode"
+              />
+            </el-select>
+          </div>
+        </el-form-item>
+        <el-form-item
+          v-if="type === 'treeSelect'"
+          label="树形关联字段"
+          label-width="100px"
+          style="padding: 5px 0 !important;">
+          <div class="flex">
+            <el-select
+              v-model="form.treeFiled.id"
+              filterable
+              placeholder="关联ID"
+              style="flex: 1;"
+              clearable
+              @change="getViewIdData"
+            >
+              <el-option
+                v-for="item in viewFieldList"
+                :key="item.columnCode"
+                :label="item.columnName"
+                :value="item.columnCode"
+              />
+            </el-select>
+            <el-select
+              v-model="form.treeFiled.pid"
+              filterable
+              placeholder="关联PID"
+              style="flex: 1;margin-left: 10px;"
+              clearable
+              @change="getViewIdData"
+            >
+              <el-option
+                v-for="item in viewFieldList"
+                :key="item.columnCode"
+                :label="item.columnName"
+                :value="item.columnCode"
+              />
+            </el-select>
+          </div>
+        </el-form-item>
+        <el-form-item  style="padding: 5px 0 !important;">
+          <div class="flex" style="margin-bottom: 10px;">
+            <el-button
+              type="primary"
+              @click="getViewIdData"
+              size="small">获取数据</el-button>
+            <el-button
+              type="primary"
+              @click="resetDefultData"
+              size="small">一键重置默认选项</el-button>
+          </div>
+          <el-table
+            :data="viewData"
+            height="320"
+            class="table">
+            <el-table-column
+              prop="label"
+              label="名称">
+              <template #default="scope">
+                <el-input v-model="scope.row.label" placeholder="请输入名称" />
+              </template>
+            </el-table-column>
+            <el-table-column
+              prop="value"
+              label="值">
+              <template #default="scope">
+                <el-input v-model="scope.row.value" placeholder="请输入值" />
+              </template>
+            </el-table-column>
+            <el-table-column label="默认值" width="70">
+              <template #default="scope">
+                <el-switch
+                  v-model="scope.row.isDefault"
+                  @change="changeDefaultValue(scope)"
+                  size="small"/>
+              </template>
+            </el-table-column>
+          </el-table>
+        </el-form-item>
+      </el-form-item>
+
+    </template>
+    <template v-if="form.type === '3'">
+      <el-form-item label="选择数据">
+        <div class="flex">
+          <el-cascader
+            style="flex: 1;"
+            size="small"
+            v-model="form.dictCode"
+            :options="classListData"
+            collapse-tags
+            collapse-tags-tooltip
+            :props="{checkStrictly: true, value: 'dictCode', label: 'dictName', lazy: true, lazyLoad: loadDict }"
+            clearable
+            @change="changeClass" />
+          <el-button
+            style="width: 125px;margin-left: 12px;"
+            type="primary"
+            size="small"
+            @click="resetDefultData">一键重置默认选项</el-button>
+        </div>
+      </el-form-item>
+      <el-form-item label=" ">
+        <el-table
+          :data="dictData"
+          height="420"
+          class="table">
+          <el-table-column prop="dictName" label="名称"/>
+          <el-table-column prop="dictCode" label="值"/>
+          <el-table-column label="默认值" width="70">
+            <template #default="scope">
+              <el-switch
+                v-model="scope.row.isDefault"
+                @change="changeDefaultValue(scope)"
+                size="small"/>
+            </template>
+          </el-table-column>
+        </el-table>
+      </el-form-item>
+    </template>
+  </el-form>
+</template>
+<style lang="less" scoped>
+:deep(.el-input-group__append,.el-select){
+  padding: 0;
+  margin: 0 !important;
+  .el-button{
+    margin: 0;
+  }
+}
+.flex{
+  display: flex;
+}
+.el-select{
+    width: 200px;
+  }
+.table{
+  border: 1px solid var(--theme-border-color);
+  max-width: 666px;
+
+}
+</style>

package/src/views/designer/modules/ibsp-config/configComponentLibs/ControlConfig/components/table.vue

@@ -0,0 +1,51 @@
+<script setup>
+const props = defineProps({
+  tableData: {
+    type: Array,
+    default: () => ([])
+  },
+  height: {
+    type: Number,
+    default: 420
+  },
+  dataColumns: {
+    type: Array,
+    default: () => ([])
+  },
+  handleColumnsData: {
+    type: Array,
+    default: () => ([])
+  }
+})
+</script>
+
+<template>
+  <el-table
+    :data="tableData"
+    :height="height"
+    class="table">
+    <template v-for="(item, key) in dataColumns" :key="key" >
+      <el-table-column
+        :prop="item.prop"
+        :label="item.label"
+      >
+        <template #default="scope">
+          <el-input v-model="scope.row.label" placeholder="请输入名称" />
+        </template>
+      </el-table-column>
+    </template>
+    <template v-for="(item, key) in handleColumnsData" :key="key" >
+      <el-table-column
+        :prop="item.prop"
+        :label="item.label"
+      />
+    </template>
+  </el-table>
+</template>
+
+<style lang="less" scoped>
+.table{
+  margin-top: 10px;
+  border: 1px solid var(--theme-border-color);
+}
+</style>

package/src/views/designer/modules/ibsp-config/configComponentLibs/ControlConfig/index.vue

@@ -0,0 +1,62 @@
+<script setup>
+import { ref, computed, defineAsyncComponent } from 'vue';
+
+const props = defineProps({
+  config: {
+    type: Object,
+    default: () => ({})
+  },
+  configValue: {
+    type: Object,
+    default: () => ({})
+  },
+  activeComponent: {
+    type: Object,
+    default: () => ({})
+  }
+})
+const componentConfig = {
+  'select': import('./SelectConfig.vue'),
+  'radio': import('./RadioConfig.vue'),
+  regionalSelection: import('./RegionalSelectionConfig.vue')
+}
+
+
+const loadComponent = computed(() => {
+  return defineAsyncComponent(()=>componentConfig[props.configValue.type] || componentConfig[props.config.componentProps?.slot?.componentProps?.type || 'select'])
+})
+
+const controlConfigRef = ref(null)
+const getConfigValue = () => {
+  return controlConfigRef.value?.getConfigData()
+}
+
+defineExpose({
+  getConfigValue
+})
+</script>
+
+<template>
+  <div class="control-config">
+    <component
+      v-if="loadComponent"
+      :is="loadComponent"
+      :config="config"
+      :configValue="configValue"
+      :activeComponent="activeComponent"
+      ref="controlConfigRef"
+    />
+    <div v-else>
+      {{ configValue.type }} 配置完善中
+    </div>
+  </div>
+
+</template>
+
+<style lang="less" scoped>
+::v-deep .control-config{
+  .el-form-item__content{
+    flex: auto !important;
+  }
+}
+</style>