设备类型维护页面，表单开发中添加设备类型下拉框

2026-04-01 10:44:59 +08:00
parent 213811c84d
commit abba12dd82
16 changed files with 852 additions and 21 deletions
--- a/src/components/LowDesign/src/LowForm/components/ComboBox.vue
+++ b/src/components/LowDesign/src/LowForm/components/ComboBox.vue
@@ -295,8 +295,10 @@ defineExpose({ validate })
    &.control-tree,
    &.control-cascader,
    &.control-regionSelect,
+    &.control-sblxSelect,
    &.control-userSelect,
    &.control-deptSelect,
+    &.control-sblxSelect,
    &.control-dicTableSelect,
    &.control-map,
    &.control-color,
--- a/src/components/LowDesign/src/LowTable/components/InlineSearch.vue
+++ b/src/components/LowDesign/src/LowTable/components/InlineSearch.vue
@@ -116,7 +116,7 @@ const dateType = [
 ]
 const treeType = ['tree', 'cascader']
 const selectType = ['select', 'radio', 'checkbox', 'switch']
-const avueSlotType = ['userSelect', 'deptSelect', 'dicTableSelect']
+const avueSlotType = ['userSelect', 'deptSelect', 'sblxSelect', 'dicTableSelect']

 const changeType = [...timeType, ...dateType, ...treeType, ...selectType, ...avueSlotType]
 const vBind = computed(() => {
--- a/src/components/LowDesign/src/shareControl/AvueSlot.vue
+++ b/src/components/LowDesign/src/shareControl/AvueSlot.vue
@@ -27,6 +27,20 @@
      @set-form-data="setFormData"
    ></DeptSelect>
  </template>
+  <template v-else-if="control.controlType == 'sblxSelect'">
+    <!-- 设备类型选择 -->
+    <SblxSelect
+      ref="slotRef"
+      v-model="model"
+      :column="currColumn"
+      :disabled="disabled"
+      :size="scope.size"
+      :type="currFormType"
+      :prop="control.prop"
+      :scope="scope"
+      @set-form-data="setFormData"
+    ></SblxSelect>
+  </template>
  <template v-else-if="control.controlType == 'dicTableSelect'">
    <!-- 表格选择 -->
    <DicTableSelect
@@ -127,7 +141,11 @@
 </template>

 <script setup lang="ts">
-defineOptions({ name: 'AvueSlot' })
+import UserSelect from './UserSelect.vue'
+import DeptSelect from './DeptSelect.vue'
+import SblxSelect from './SblxSelect.vue'
+
+defineOptions({ name: 'AvueSlot', components: { UserSelect, DeptSelect, SblxSelect } })

 interface Control {
  controlType: string
@@ -159,7 +177,7 @@ const currFormType = computed(() => {
 })

 const currColumn = computed(() => {
-  if (['userSelect', 'deptSelect', 'dicTableSelect'].includes(props.control.controlType)) {
+  if (['userSelect', 'deptSelect', 'sblxSelect', 'dicTableSelect'].includes(props.control.controlType)) {
    if (props.slotType == 'search' && props.control) {
      return Object.assign(props.scope.column, props.control.column || {})
    }
--- a/src/components/LowDesign/src/shareControl/SblxSelect.vue
+++ b/src/components/LowDesign/src/shareControl/SblxSelect.vue
@@ -0,0 +1,529 @@
+<template>
+  <div class="sblx-select-box w-100%">
+    <div
+      class="sblx-input"
+      :class="[
+        { disabled, 'cursor-not-allowed!': disabled && !props.column?.multiple },
+        type,
+        size
+      ]"
+      @click="openSblxSelect"
+    >
+      <template v-if="selectId.length">
+        <div class="sblx-text-list" v-if="props.column?.multiple">
+          <el-tag
+            v-for="id in selectId"
+            :key="id"
+            :closable="!disabled && !column.readonly"
+            type="info"
+            :size="size"
+            @close="tagValueClose(id)"
+          >
+            {{ getCurrText(id) }}
+          </el-tag>
+        </div>
+        <div v-else class="px-11px overflow-hidden text-ellipsis ws-nowrap">
+          {{ getCurrText(selectId[0]) }}
+          <span
+            v-if="
+              ['add', 'edit'].includes(type) &&
+              props.column?.clearable !== false &&
+              !disabled &&
+              !column.readonly
+            "
+            class="sblx-input-clear pos-absolute right-11px top-50% cursor-pointer hidden"
+            style="transform: translateY(-50%)"
+            @click.stop="tagValueClose(selectId[0])"
+          >
+            <Icon :size="14" color="#909399" icon="ep:circle-close"></Icon>
+          </span>
+        </div>
+      </template>
+      <div class="empty-text" v-else>{{ placeholderText }}</div>
+      <div class="sblx-num" v-if="column.multiple && selectId.length >= 2">
+        {{ t('Avue.control.selectPrepend') }}
+        <span>{{ selectId.length }}</span>
+        {{ t('Avue.control.selectAppend') }}
+      </div>
+    </div>
+    <DesignPopup
+      v-if="['add', 'edit'].includes(type)"
+      v-model="dialogData.value"
+      v-model:isFull="dialogData.isFull"
+      v-bind="dialogData.params"
+      :isBodyFull="true"
+    >
+      <template #default>
+        <el-container class="h-100%" v-loading="loading">
+          <el-main class="box-border">
+            <avue-tree
+              ref="sblxRef"
+              class="sblx-tree"
+              :option="treeSblxOption"
+              :data="treeSblxData"
+              @check-change="checkChange"
+              @node-click="nodeClick"
+            >
+              <template #default="{ data }">
+                <span
+                  class="el-tree-node__label"
+                  :class="{
+                    disabled: !column.multiple && data.disabled,
+                    active:
+                      !column.multiple && data[treeSblxOption.props.value] == sblxSelect[0]?.id
+                  }"
+                >
+                  {{ data[treeSblxOption.props.label] }}
+                </span>
+              </template>
+            </avue-tree>
+          </el-main>
+          <el-aside width="200px">
+            <div
+              class="h-100% flex-basis-200px flex-shrink-0"
+              :style="{ borderLeft: 'var(--el-border)' }"
+            >
+              <div
+                class="box-border h-31px pb-5px pt-5px text-center"
+                :style="{ borderBottom: 'var(--el-border)' }"
+              >
+                <span>{{ t('Avue.control.selectPrepend') }}（{{ sblxSelectId.length }}）</span>
+                <el-button
+                  class="mt--3px p-0"
+                  type="primary"
+                  link
+                  v-if="sblxSelectId.length"
+                  @click="deepClear"
+                >
+                  {{ t('Avue.form.emptyBtn') }}
+                </el-button>
+              </div>
+              <div
+                class="box-border flex flex-wrap items-center overflow-x-hidden overflow-y-auto p-10px"
+                :style="{
+                  height: 'calc(100% - 31px)',
+                  columnGap: '6px',
+                  rowGap: '6px',
+                  alignContent: 'start'
+                }"
+              >
+                <el-tag
+                  v-for="id in sblxSelectId"
+                  :key="id"
+                  :closable="true"
+                  type="info"
+                  :size="size"
+                  class="h-auto! py-4px! ws-break-spaces! break-anywhere! line-height-none"
+                  @close="tagTableClose(id)"
+                >
+                  {{ getCurrText(id) }}
+                </el-tag>
+              </div>
+            </div>
+          </el-aside>
+        </el-container>
+      </template>
+    </DesignPopup>
+    <DesignPopup
+      v-else
+      v-model="detailDialog"
+      :width="800"
+      :title="`<span>${column.label}</span><span class='text-14px'>（${t('Avue.control.totalPrepend')} ${selectId.length} ${t('Avue.control.totalAppend')}）</span>`"
+      :dialogParams="{ alignCenter: true }"
+    >
+      <template #default>
+        <div class="h-100% box-border flex p-20px">
+          <div
+            class="box-border flex flex-wrap items-center overflow-x-hidden overflow-y-auto"
+            :style="{
+              height: '100%',
+              columnGap: '6px',
+              rowGap: '6px',
+              alignContent: 'start'
+            }"
+          >
+            <el-tag
+              v-for="id in selectId"
+              :key="id"
+              type="info"
+              :size="size"
+              class="h-auto! py-4px! ws-break-spaces! break-anywhere! line-height-none"
+            >
+              {{ lowStore.dicObj[dicKey]?.[id] || id }}
+            </el-tag>
+          </div>
+        </div>
+      </template>
+    </DesignPopup>
+  </div>
+</template>
+
+<script setup lang="ts">
+import { useLowStoreWithOut } from '@/store/modules/low'
+import { listToTree, forEach } from '@/utils/tree'
+import * as DicApi from '@/api/design/dic/index'
+import { cloneDeep } from 'lodash-es'
+
+defineOptions({ name: 'SblxSelect' })
+
+interface Column {
+  label: string
+  disabledIds: Array<string> //禁止选择的id
+  multiple?: boolean //多选
+  checkStrictly?: boolean //父子不互相关联
+  leafOnly?: boolean //勾选值只保留子节点
+  stopParent?: boolean //禁用父级勾选
+  accordion?: boolean //每次只展开一个同级树节点
+  separator?: string //分隔符
+  readonly?: boolean
+  placeholder?: string
+  textFormatter?: string //回显名称格式化
+  clearable?: boolean
+}
+interface Props {
+  column: Column
+  prop: string
+  type: string
+  size?: 'small' | 'large' | 'default'
+  disabled?: boolean
+  scope?: object
+}
+interface TreeSblx {
+  id: string
+  parentId: string
+  industryName: string
+  disabled?: boolean
+  children?: TreeSblx[]
+}
+const props = defineProps<Props>()
+const model = defineModel<string>()
+const emit = defineEmits(['set-form-data'])
+const { t } = useI18n()
+const lowStore = useLowStoreWithOut()
+const dicKey = 'sblxSelect'
+
+const loading = ref(false)
+const timer = ref<any>(null)
+const sblxSelect = ref<any>([])
+const sblxSelectId = ref<Array<number | string>>([])
+const treeSblxOption = ref({
+  addBtn: false,
+  menu: false,
+  nodeKey: 'id',
+  multiple: props.column.multiple,
+  checkStrictly: props.column.checkStrictly,
+  accordion: props.column.accordion,
+  props: { label: 'industryName', value: 'id', childern: 'children' }
+})
+const treeSblxData = ref<TreeSblx[]>([])
+const dialogData = ref({
+  value: false,
+  isFull: false,
+  params: {
+    width: '600px',
+    title: t('Avue.control.select') + ' ' + (props.column.label || '设备类型'),
+    footerBtn: [
+      {
+        params: {},
+        name: t('Avue.common.cancelBtn'),
+        icon: 'material-symbols:close-rounded',
+        clickFun: () => {
+          dialogData.value.value = false
+        }
+      },
+      {
+        params: { type: 'primary' },
+        name: t('Avue.common.submitBtn'),
+        icon: 'material-symbols:check-rounded',
+        clickFun: () => {
+          model.value = getCurrSblxSelect('confirm').join(',')
+          setTimeout(() => {
+            dialogData.value.value = false
+          }, 30)
+        }
+      }
+    ],
+    dialogParams: {
+      closeOnPressEscape: true
+    }
+  }
+})
+const detailDialog = ref(false)
+
+const sblxRef = ref()
+
+const selectId = computed(() => {
+  if (!model.value) return []
+  if (typeof model.value != 'string') {
+    try {
+      return [(model.value as Number).toString()]
+    } catch (error) {
+      return []
+    }
+  }
+  return model.value.split(',')
+})
+
+const placeholderText = computed(() => {
+  let text = ''
+  if (!props.disabled && !props.column.readonly) {
+    text =
+      props.column.placeholder ||
+      `${t('Avue.tip.select')} ${props.column.label || '设备类型'}`
+  }
+  return text
+})
+
+const getCurrText = (id) => {
+  if (id) id = `${id}`
+  const text = lowStore.dicObj[dicKey]?.[id] || ''
+  const formatter = props.column.textFormatter
+  if (formatter) {
+    return formatter.replace(/{dicCode}/g, id).replace(/{dicText}/g, text)
+  }
+  return text || id
+}
+
+const deepClear = () => {
+  if (props.column.multiple) sblxRef.value.setCheckedKeys([])
+  else {
+    sblxRef.value.setCurrentKey(null)
+    sblxSelect.value = []
+  }
+}
+const checkChange = () => {
+  if (!props.column.multiple) return false
+  if (timer.value) clearTimeout(timer.value)
+  timer.value = setTimeout(() => {
+    sblxSelect.value = sblxRef.value.getCheckedNodes(props.column.leafOnly || false)
+  }, 30)
+}
+const nodeClick = (data) => {
+  if (props.column.multiple || data.disabled) return false
+  if (sblxSelect.value.length && sblxSelect.value[0].id == data.id) deepClear()
+  else sblxSelect.value = [data]
+}
+const openSblxSelect = () => {
+  const index = props.scope?.['index']
+  if (props.column['onClick']) {
+    props.column['onClick']({ value: model.value, column: props.column, index })
+  } else if (props.column['click'])
+    props.column['click']({ value: model.value, column: props.column, index })
+  if (props.disabled || props.column.readonly) {
+    if (selectId.value && selectId.value.length) detailDialog.value = true
+    return
+  }
+  dialogData.value.value = true
+}
+
+const tagValueClose = (id) => {
+  let list = model.value ? model.value.split(',') : []
+  list = list.filter((key) => key != id)
+  model.value = list.join(',')
+}
+const tagTableClose = (id) => {
+  if (props.column.multiple) {
+    sblxRef.value.setChecked(id, false)
+  } else deepClear()
+}
+const getCurrSblxSelect = (type?) => {
+  const dicObj = {}
+  const textList: string[] = []
+  const ids = sblxSelect.value.map((item) => {
+    if (item.id && item.industryName) {
+      dicObj[item.id] = item.industryName
+      textList.push(item.industryName)
+    }
+    return item.id
+  })
+  if (type == 'confirm') {
+    emit('set-form-data', '$' + props.prop, textList.join(props.column.separator || ' | '))
+  }
+  lowStore.setDicObj(dicKey, dicObj)
+  return ids
+}
+
+const getSblxList = (getType) => {
+  const { multiple, disabledIds } = props.column
+  let currData: any = {}
+
+  return new Promise(async (resolve) => {
+    let data = await DicApi.getSblxSelectList()
+    data = data.map((item) => {
+      if (disabledIds && disabledIds.includes(item.id)) item.disabled = true
+      if (getType == 'init' && !multiple && selectId.value.includes(item.id)) currData = item
+      return item
+    })
+    const treeProps = { id: 'id', pid: 'parentId', children: 'children' }
+    let treeData = listToTree(data, treeProps)
+    
+    if (props.column.stopParent) {
+      forEach(
+        treeData,
+        (node) => {
+          if (node[treeProps.children]?.length) node.disabled = true
+        },
+        treeProps.children
+      )
+    }
+    treeSblxData.value = treeData
+    setTimeout(() => {
+      if (multiple) {
+        sblxRef.value.setCheckedKeys(selectId.value)
+        sblxSelect.value = sblxRef.value.getCheckedNodes(props.column.leafOnly || false)
+      } else {
+        if (currData.id) {
+          sblxRef.value.setCurrentKey(currData.id)
+          sblxSelect.value = [currData]
+        }
+      }
+    }, 30)
+    resolve(true)
+  })
+}
+
+watch(
+  () => model.value,
+  (value) => {
+    const selectObj = {}
+    cloneDeep(sblxSelect.value).forEach((item) => {
+      delete item.children
+      selectObj[item[treeSblxOption.value.nodeKey]] = item
+    })
+    const changeObj = {
+      value,
+      column: props.column,
+      selectObj,
+      row: props.scope?.['row'],
+      index: props.scope?.['index']
+    }
+    if (props.column['onChange']) props.column['onChange'](changeObj)
+    else if (props.column['change']) props.column['change'](changeObj)
+  }
+)
+
+watch(
+  () => dialogData.value.value,
+  (val) => {
+    if (!val) {
+      if (sblxRef.value) deepClear()
+      return
+    }
+    getSblxList('init')
+  }
+)
+
+watch(
+  () => sblxSelect.value,
+  (val) => {
+    sblxSelectId.value = getCurrSblxSelect()
+    dialogData.value.params.footerBtn[1].name = `${t('Avue.common.submitBtn')}（${val.length}）`
+  }
+)
+</script>
+
+<style lang="scss" scoped>
+.sblx-tree {
+  .el-tree-node__label {
+    &.active {
+      color: var(--el-color-primary);
+    }
+
+    &.disabled {
+      color: #909399;
+    }
+  }
+}
+
+.sblx-input {
+  display: flex;
+  height: var(--el-component-size);
+  font-size: var(--el-text-base);
+  color: var(--el-input-text-color, var(--el-text-color-regular));
+  cursor: pointer;
+  background-color: var(--el-bg-color);
+  background-image: none;
+  border: var(--el-border);
+  border-radius: var(--el-input-border-radius, var(--el-border-radius-base));
+  box-sizing: border-box;
+  align-items: center;
+
+  .sblx-text-list {
+    display: flex;
+    height: 100%;
+    flex: 1;
+    padding: 0 11px;
+    overflow-x: hidden;
+    align-items: center;
+    flex-wrap: nowrap;
+    column-gap: 6px;
+  }
+
+  .empty-text {
+    margin: 0 10px;
+    overflow: hidden;
+    color: #999;
+    text-align: left;
+    flex: 1;
+    text-wrap: nowrap;
+  }
+
+  .sblx-num {
+    height: 100%;
+    padding-right: 10px;
+    padding-left: 10px;
+    line-height: var(--el-component-size);
+    color: var(--el-text-color-regular);
+    background-color: var(--el-fill-color-light);
+
+    span {
+      display: inline-block;
+      padding: 0 2px;
+      color: var(--el-color-primary);
+    }
+  }
+
+  &.disabled {
+    &.edit,
+    &.add {
+      background-color: var(--el-disabled-bg-color);
+    }
+
+    &.view {
+      border: none;
+
+      .sblx-text-list {
+        padding: 0;
+      }
+
+      .sblx-num {
+        margin-right: -20px;
+      }
+    }
+  }
+
+  &.small {
+    height: var(--el-component-size-small);
+    font-size: var(--el-font-size-extra-small);
+
+    .sblx-num {
+      height: var(--el-component-size-small);
+    }
+  }
+
+  &.large {
+    height: var(--el-component-size-large);
+    font-size: var(--el-font-size-large);
+
+    .sblx-num {
+      height: var(--el-component-size-large);
+    }
+  }
+
+  &:hover {
+    .sblx-input-clear {
+      display: flex;
+    }
+  }
+}
+</style>
--- a/src/components/LowDesign/src/utils/controlOption.ts
+++ b/src/components/LowDesign/src/utils/controlOption.ts
@@ -411,6 +411,21 @@ const regionSelectConfig = [
  }
 ]

+const sblxSelectConfig = [
+  {
+    title: '控件配置',
+    list: [
+      { label: '多选', value: 'multiple', val: false, type: 'switch', dic: dicObj.boolean },
+      { label: '回显名称格式化', value: 'textFormatter', val: '', type: 'select', dic: dicObj.dictTextFormatter, params: { filterable: true, allowCreate: true } },
+      { label: '父子不互相关联', value: 'checkStrictly', val: false, type: 'switch', dic: dicObj.boolean },
+      { label: '勾选值只保留子节点', value: 'leafOnly', val: false, type: 'switch', dic: dicObj.boolean },
+      { label: '禁用父级勾选', value: 'stopParent', val: false, type: 'switch', dic: dicObj.boolean },
+      { label: '每次只展开一个同级树节点', value: 'accordion', val: false, type: 'switch', dic: dicObj.boolean },
+      { label: '分隔符', value: 'separator', val: ' | ' },
+    ]
+  }
+]
+
 // const ueditorConfig=[]

 const customControlConfig = [
@@ -431,5 +446,5 @@ export default {
  selectConfig, radioConfig, checkboxConfig, switchConfig, treeConfig, cascaderConfig,
  dateConfig, timeConfig,
  fileConfig, imageConfig,
-  monacoEditorConfig, markDownConfig, dicTableSelectConfig, userSelectConfig, deptSelectConfig, regionSelectConfig, customControlConfig
-}
+  monacoEditorConfig, markDownConfig, dicTableSelectConfig, userSelectConfig, deptSelectConfig, sblxSelectConfig, regionSelectConfig, customControlConfig
+}
--- a/src/components/LowDesign/src/utils/formUtil.ts
+++ b/src/components/LowDesign/src/utils/formUtil.ts
@@ -236,7 +236,7 @@ const initColumn = (column: object, control, ruleObj, componentData: Object, oth
        verifyControl.isControl = false
      }
    }
-    if (['userSelect', 'deptSelect', 'dicTableSelect'].includes(type) && parentProp.indexOf('layoutTable') === 0) {
+    if (['userSelect', 'deptSelect', 'sblxSelect', 'dicTableSelect'].includes(type) && parentProp.indexOf('layoutTable') === 0) {
      //表格布局详情模式
      if (type == 'dicTableSelect') {
        //表格选择回显
@@ -279,7 +279,7 @@ const initColumn = (column: object, control, ruleObj, componentData: Object, oth
        }
      }
    }
-    if (['userSelect', 'deptSelect', 'markDown', 'comboBox'].includes(type)) {
+    if (['userSelect', 'deptSelect', 'sblxSelect', 'markDown', 'comboBox'].includes(type)) {
      verifyControl.isForm = true
    }
    if (type == 'regionSelect') {
@@ -546,11 +546,11 @@ export const initFormOption: (formOption: any, formType: string, onlyId: string
 }
 //表单数据格式化
 export const formDataFormatting = (formOption, formData, formType) => {
-  const echoObj = { userSelect: [], deptSelect: [] }
+  const echoObj = { userSelect: [], deptSelect: [], sblxSelect: [] }
  const handleValue = (column, data, key, parentType) => {
    const type = column[key]?.type
    if (data[key] === '' || data[key] === null || data[key] === undefined || !type) return
-    if (['userSelect', 'deptSelect', 'dicTableSelect'].includes(type)) {
+    if (['userSelect', 'deptSelect', 'sblxSelect', 'dicTableSelect'].includes(type)) {
      if (data[key] instanceof Array || typeof data[key] == 'number') data[key] = data[key].toString()
      if (type == 'dicTableSelect') {
        const { dictTable, dictCode, dictText } = column[key]
@@ -613,9 +613,10 @@ export const formDataFormatting = (formOption, formData, formType) => {
      if (key.indexOf('&') !== -1 && key.split('&')[1] != 'id') return true
      return /^(\d+)$/.test(str + '');
    })
-    if (['userSelect', 'deptSelect'].includes(key)) {
+    if (['userSelect', 'deptSelect', 'sblxSelect'].includes(key)) {
      if (echoObj[key].length) {
-        dicApiData.push({ [key == 'userSelect' ? 'userIdList' : 'deptIdList']: [...new Set(echoObj[key])] })
+        const keyMap = { userSelect: 'userIdList', deptSelect: 'deptIdList', sblxSelect: 'sblxIdList' }
+        dicApiData.push({ [keyMap[key]]: [...new Set(echoObj[key])] })
      }
    } else if (echoObj[key]?.length) {
      const [dbformId, code, label] = key.split('&')
@@ -628,7 +629,8 @@ export const formDataFormatting = (formOption, formData, formType) => {
    }).then(dicData => {
      const dictData = {
        userList: { dicKey: 'userSelect', label: 'nickname' },
-        deptList: { dicKey: 'deptSelect', label: 'name' }
+        deptList: { dicKey: 'deptSelect', label: 'name' },
+        sblxList: { dicKey: 'sblxSelect', label: 'industryName' }
      }
      for (const key in dicData) {
        const dicObj = {}
--- a/src/components/LowDesign/src/utils/getName.ts
+++ b/src/components/LowDesign/src/utils/getName.ts
@@ -3,9 +3,9 @@ import { encryptAES } from '@/components/LowDesign/src/utils/aes'
 import { getDicTableText } from '@/api/design/dic'


-//设置用户、部门控件数据名称
+//设置用户、部门、设备类型控件数据名称
 export const setUserAndDeptName = (params) => {
-  let { userIdList, deptIdList } = params
+  let { userIdList, deptIdList, sblxIdList } = params
  return new Promise(resolve => {
    const lowStore = useLowStoreWithOut()
    const dictLabel: object[] = []
@@ -19,10 +19,16 @@ export const setUserAndDeptName = (params) => {
      deptIdList = [...new Set(deptIdList)]
      dictLabel.push({ deptIdList })
    }
+    sblxIdList = (sblxIdList || []).filter(id => !lowStore.dicObj?.sblxSelect?.[id])
+    if (sblxIdList?.length) {
+      sblxIdList = [...new Set(sblxIdList)]
+      dictLabel.push({ sblxIdList })
+    }
    if (dictLabel.length) {
      const dictKeyData = {
        userList: { dicKey: 'userSelect', label: 'nickname' },
-        deptList: { dicKey: 'deptSelect', label: 'name' }
+        deptList: { dicKey: 'deptSelect', label: 'name' },
+        sblxList: { dicKey: 'sblxSelect', label: 'industryName' }
      }
      getDicTableText({ lideeYunJi_dictLabel: encryptAES(JSON.stringify(dictLabel)) }).then(
        (dicData) => {
--- a/src/components/LowDesign/src/utils/tableUtil.ts
+++ b/src/components/LowDesign/src/utils/tableUtil.ts
@@ -289,7 +289,7 @@ const initColumn = (data, componentData, columnParams) => {
        column[fieldCode].type = 'input'
      }
    }
-    if (['userSelect', 'deptSelect'].includes(controlType)) {
+    if (['userSelect', 'deptSelect', 'sblxSelect'].includes(controlType)) {
      let configData: any = {
        findType: 'all',
        formatter: (row, value, valueText, column) => {
@@ -392,6 +392,9 @@ const initColumn = (data, componentData, columnParams) => {
    if (controlType == 'deptSelect' && optionData['deptCustomStr']) {
      optionData['deptCustomStr'] = decodeURIComponent(escape(atob(optionData['deptCustomStr'])))
    }
+    if (controlType == 'sblxSelect' && optionData['sblxCustomStr']) {
+      optionData['sblxCustomStr'] = decodeURIComponent(escape(atob(optionData['sblxCustomStr'])))
+    }
    setDeepObject(controlsData, optionData)
    Object.keys(customData).forEach(key => {
      if (customData[key] && controlsData[key] && customData[key] instanceof Object) {
@@ -532,7 +535,7 @@ const initColumn = (data, componentData, columnParams) => {
      if (isList) controlData.slotList.push('list')
      if (isSearch && !column[fieldCode].searchType) {
        controlData.slotList.push('search')
-        if (['userSelect', 'deptSelect', 'dicTableSelect'].includes(controlType) && column[fieldCode].searchMultiple) {
+        if (['userSelect', 'deptSelect', 'sblxSelect', 'dicTableSelect'].includes(controlType) && column[fieldCode].searchMultiple) {
          searchOption['column'].multiple = true
        }
        if (searchOption) controlData = { ...controlData, ...searchOption }
@@ -833,7 +836,7 @@ export const tableFormatting = (data, column, otherData: any = {}) => {
  let currData = isArray ? cloneDeep(data) : cloneDeep([data])
  const dateControl = {}
  const regionControl = {}
-  const userAndDeptControl: any = { props: [], userIds: [], deptIds: [], typeKey: { userSelect: 'user', deptSelect: 'dept' } }
+  const userAndDeptControl: any = { props: [], userIds: [], deptIds: [], sblxIds: [], typeKey: { userSelect: 'user', deptSelect: 'dept', sblxSelect: 'sblx' } }
  const dicTableData = { propObj: {}, keyList: [] as Array<string>, dicStoreKey: {} }
  for (const prop in column) {
    const { type, hide, lazy, dictType, valueFormat } = column[prop]
@@ -912,7 +915,8 @@ export const tableFormatting = (data, column, otherData: any = {}) => {
    dicApiData.lideeYunJi_dictLabel = encryptAES(JSON.stringify(dicApiData.lideeYunJi_dictLabel))
    const dictData = {
      userList: { dicKey: 'userSelect', label: 'nickname', value: 'id' },
-      deptList: { dicKey: 'deptSelect', label: 'name', value: 'id' }
+      deptList: { dicKey: 'deptSelect', label: 'name', value: 'id' },
+      sblxList: { dicKey: 'sblxSelect', label: 'industryName', value: 'id' }
    }
    DicApi.getDicTableText(dicApiData).then(dicData => {
      for (const key in dicData) {
@@ -1016,7 +1020,7 @@ export const getMultipleProp = (column) => {
  const props: Array<string> = []
  for (const prop in column) {
    const { type, multiple } = column[prop]
-    if (['select', 'dicTableSelect', 'userSelect', 'deptSelect'].includes(type) && multiple) props.push(prop)
+    if (['select', 'dicTableSelect', 'userSelect', 'deptSelect', 'sblxSelect'].includes(type) && multiple) props.push(prop)
  }
  return { more_select_field: props.join(',') }
 }
--- a/src/components/LowFormDesign/components/DesignControl/controlConfig.js
+++ b/src/components/LowFormDesign/components/DesignControl/controlConfig.js
@@ -101,6 +101,9 @@ export default [
        type: 'deptSelect', controlType: 'select', label: '部门选择框', icon: 'mingcute:department-line',
        findType: 'all',
      },
+      {
+        type: 'sblxSelect', controlType: 'select', label: '设备类型选择框', icon: 'ep:setting',
+      },
      {
        type: 'regionSelect', controlType: 'select', label: '地区选择框', icon: 'hugeicons:global-editing',
        regionType: 'ssq',
@@ -194,4 +197,4 @@ export default [
      }
    ]
  }
-]
+]
--- a/src/components/LowFormDesign/components/DesignLayout/LayoutItem.vue
+++ b/src/components/LowFormDesign/components/DesignLayout/LayoutItem.vue
@@ -155,6 +155,7 @@ const getComponentName = (type, controlType, component) => {
      'dicTableSelect',
      'userSelect',
      'deptSelect',
+      'sblxSelect',
      'markDown'
    ].includes(type)
  )