设备类型管理页面搜索框样式调整

src/api/design/dic/index.ts

@@ -29,3 +29,8 @@ export const getUserSelectDeptList = (type) => {
 export const getUserSelectRoleList = () => {
   return request.get({ url: `/lideeyunji/adapter/role/list` })
 }
+
+//获取设备类型选择器列表
+export const getSblxSelectList = () => {
+  return request.get({ url: `/system/sblx/simple-list` })
+}

src/api/system/sblx/index.ts

@@ -0,0 +1,40 @@
+import request from '@/config/axios'
+
+export interface SblxVO {
+  id?: number
+  industryName: string
+  industryCode: string
+  parentId: number
+  sort: number
+  createTime: Date
+}
+
+// 查询设备类型（精简)列表
+export const getSimpleSblxList = async (): Promise<SblxVO[]> => {
+  return await request.get({ url: '/system/sblx/simple-list' })
+}
+
+// 查询设备类型列表
+export const getSblxPage = async (params: PageParam) => {
+  return await request.get({ url: '/system/sblx/list', params })
+}
+
+// 查询设备类型详情
+export const getSblx = async (id: number) => {
+  return await request.get({ url: '/system/sblx/get?id=' + id })
+}
+
+// 新增设备类型
+export const createSblx = async (data: SblxVO) => {
+  return await request.post({ url: '/system/sblx/create', data: data })
+}
+
+// 修改设备类型
+export const updateSblx = async (params: SblxVO) => {
+  return await request.put({ url: '/system/sblx/update', data: params })
+}
+
+// 删除设备类型
+export const deleteSblx = async (id: number) => {
+  return await request.delete({ url: '/system/sblx/delete?id=' + id })
+}

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,

src/components/LowDesign/src/LowReport/index.vue

@@ -99,7 +99,7 @@
         ></InputTimeRange>
       </template>
       <template #header v-if="Object.keys(dimensionFields)?.length">
-        <div  style="display:flex;align-items:center;border-top:1px solid #eee;margin-bottom:10px;padding-top:10px;">
+        <div  style="display:flex;padding-top:10px;margin-bottom:10px;border-top:1px solid #eee;align-items:center;">
         <span style="margin-right:10px;">维度：</span>
          <el-checkbox-group
 @change="searchDimension" v-model="tableSearch['Group by']"
@@ -190,7 +190,7 @@ const hideCols=ref<any>([])
 const dictFieldList=ref<any>([])
 const textAlignFiels=ref<any>({})
 const permissions =
-  wsCache.get(CACHE_KEY.USER).lideeYunjipermissions?.[route.meta.menuDataId as string] || false
+  wsCache.get(CACHE_KEY.USER).lideeYunJipermissions?.[route.meta.menuDataId as string] || false
 const selectIds = computed(() => {
   return tableSelect.value.map((item) => item['id'])
 })
@@ -905,12 +905,15 @@ defineExpose({
   :deep(.el-form-item--default){
     margin-bottom: 10px;
   }
+
   :deep(.avue-crud__pagination){
    padding-bottom: 0;
   }
+
   :deep(.avue-crud__tip){
     display: none;
   }
+
   .amountBox{
     &::after{
       content:'、'
@@ -922,30 +925,35 @@ defineExpose({
   }
 
   :deep(.el-table){
+      --el-table-border-color: #000;
+
      .is-group th.el-table__cell,th.el-table__cell{
       background-color: #C6EFFE;
       }
+
       .el-table__body tr.hover-row>td.el-table__cell{
         background-color: #FFFFD2;
        
       }
+
       &.el-table--enable-row-hover .el-table__body tr:hover>td.el-table__cell{
         background-color: #FFFFD2;
       }
+
       td.el-table__cell,th.el-table__cell{
-        border-bottom: 1px solid #000 !important;
-      
         border-right: 1px solid #000 !important;
+        border-bottom: 1px solid #000 !important;
 
       }
+
        td.textAlignCell .cell{
           span{
-            text-align: left;
-            width: 100%;
             display: inline-block;
+            width: 100%;
+            text-align: left;
           }
         }
-      --el-table-border-color: #000;
+
       tfoot .el-table__cell{
         border-top: 1px solid #000 !important;
       }

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(() => {

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 || {})
     }

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>

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
+}

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 = {}

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) => {

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 }
@@ -552,7 +555,7 @@ const initButton = (data, context) => {
   const { wsCache } = useCache()
   const currentRoute = router.currentRoute.value
   const currPath = currentRoute.meta?.menuDataId as string
-  const permissions = wsCache.get(CACHE_KEY.USER).lideeYunjipermissions?.[currPath] || false
+  const permissions = wsCache.get(CACHE_KEY.USER).lideeYunJipermissions?.[currPath] || false
   const { model, defaultTip, tableId, getPermiKey, webConfigRoleButtonVoList, isSub } = context
   const defPermiObj = {
     addBtn: 'create', addChild: 'create',
@@ -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(',') }
 }

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 [
       }
     ]
   }
-]
+]

src/components/LowFormDesign/components/DesignLayout/LayoutItem.vue

@@ -155,6 +155,7 @@ const getComponentName = (type, controlType, component) => {
       'dicTableSelect',
       'userSelect',
       'deptSelect',
+      'sblxSelect',
       'markDown'
     ].includes(type)
   )

src/store/modules/user.ts

@@ -33,7 +33,7 @@ interface DeptVO {
 
 interface UserInfoVO {
   permissions: object
-  lideeYunjipermissions: object
+  lideeYunJipermissions: object
   roles: string[]
   isSetUser: boolean
   user: UserVO
@@ -43,7 +43,7 @@ interface UserInfoVO {
 export const useUserStore = defineStore('admin-user', {
   state: (): UserInfoVO => ({
     permissions: {},
-    lideeYunjipermissions: {},
+    lideeYunJipermissions: {},
     roles: [],
     isSetUser: false,
     user: {
@@ -58,8 +58,8 @@ export const useUserStore = defineStore('admin-user', {
     getPermissions(): object {
       return this.permissions
     },
-    getLideeYunjipermissions(): object {
-      return this.lideeYunjipermissions
+    getLideeYunJipermissions(): object {
+      return this.lideeYunJipermissions
     },
     getRoles(): string[] {
       return this.roles
@@ -82,7 +82,7 @@ export const useUserStore = defineStore('admin-user', {
         userInfo = await getInfo()
       }
       this.permissions = userInfo.permissions
-      this.lideeYunjipermissions = userInfo.lideeYunjipermissions
+      this.lideeYunJipermissions = userInfo.lideeYunJipermissions
       this.roles = userInfo.roles
       this.user = userInfo.user
       this.deptInfo = userInfo.deptInfoList
@@ -112,7 +112,7 @@ export const useUserStore = defineStore('admin-user', {
     },
     resetState() {
       this.permissions = {}
-      this.lideeYunjipermissions = {}
+      this.lideeYunJipermissions = {}
       this.roles = []
       this.isSetUser = false
       this.user = {

src/styles/avueForm.scss

@@ -149,6 +149,7 @@
   .control-cascader,
   .control-switch,
   .control-regionSelect,
+  .control-sblxSelect,
   .control-dicTableSelect,
   .control-map,
   .control-color,

src/views/lowdesign/tableDesign/designData.ts

@@ -147,6 +147,7 @@ export const dicObj = {
     { label: '表格选择框', value: 'dicTableSelect' },
     { label: '用户选择框', value: 'userSelect' },
     { label: '部门选择框', value: 'deptSelect' },
+    { label: '设备类型选择框', value: 'sblxSelect' },
     { label: '地区选择框', value: 'regionSelect' },
     { label: '代码编辑器', value: 'monacoEditor' },
     { label: '富文本', value: 'ueditor' },

src/views/system/sblx/index.vue

@@ -0,0 +1,205 @@
+<template>
+  <ContentWrap>
+    <avue-crud
+      ref="crudRef"
+      v-model="tableForm"
+      v-model:search="tableSearch"
+      :table-loading="loading"
+      :data="tableData"
+      :option="tableOption"
+      :permission="permission"
+      :before-open="beforeOpen"
+      @search-change="searchChange"
+      @search-reset="resetChange"
+      @row-save="rowSave"
+      @row-update="rowUpdate"
+      @row-del="rowDel"
+      @refresh-change="getTableData"
+    >
+      <!-- 表单 -->
+      <template #parentId-form>
+        <el-tree-select
+          v-model="tableForm.parentId"
+          :data="sblxTree"
+          :props="{ children: 'children', label: 'industryName', value: 'id' }"
+          check-strictly
+          default-expand-all
+          placeholder="请选择上级设备类型"
+          value-key="id"
+          style="width: 366px"
+        />
+      </template>
+      <!-- 自定义按钮 -->
+      <template #menu-left="{ size }">
+        <el-button
+          plain
+          :size="size"
+          @click="defaultExpandAllShow = !defaultExpandAllShow"
+          type="danger"
+          icon="el-icon-sort"
+          >展开/折叠</el-button
+        >
+      </template>
+    </avue-crud>
+  </ContentWrap>
+</template>
+<script lang="ts" setup>
+import { defaultProps, handleTree } from '@/utils/tree'
+import * as SblxApi from '@/api/system/sblx'
+
+defineOptions({ name: 'SystemSblx' })
+
+const crudRef = ref()
+useCrudHeight(crudRef)
+
+const message = useMessage() // 消息弹窗
+const { t } = useI18n() // 国际化
+const { getCurrPermi } = useCrudPermi()
+
+const loading = ref(true) // 列表的加载中
+const defaultExpandAllShow = ref(true) // 默认展开所有表项
+const tableOption = reactive({
+  align: 'center',
+  headerAlign: 'center',
+  searchMenuSpan: 6,
+  searchMenuPosition: 'left',
+  labelSuffix: ' ',
+  span: 24,
+  rowKey: 'id',
+  rowParentKey: 'parentId',
+  defaultExpandAll: defaultExpandAllShow,
+  dialogWidth: '50%',
+  column: {
+    parentId: {
+      label: '上级设备类型',
+      hide: true,
+      minWidth: 100,
+      rules: [{ required: true, message: '上级设备类型不能为空', trigger: 'blur' }]
+    },
+    industryName: {
+      label: '设备类型名称',
+      align: 'left',
+      headerAlign: 'left',
+      search: true,
+      minWidth: 100,
+      rules: [{ required: true, message: '设备类型名称不能为空', trigger: 'blur' }]
+    },
+    industryCode: {
+      label: '设备类型编码',
+      minWidth: 100,
+      rules: [{ required: true, message: '设备类型编码不能为空', trigger: 'blur' }]
+    },
+    sort: {
+      label: '显示顺序',
+      width: 80,
+      span: 12,
+      type: 'number',
+      rules: [{ required: true, message: '显示顺序不能为空', trigger: 'blur' }]
+    }
+  }
+}) //表格配置
+const tableForm = ref<any>({})
+const tableData = ref()
+const tableSearch = ref({})
+const sblxTree = ref() // 上级设备类型
+const permission = getCurrPermi(['system:sblx'])
+
+/** 查询列表 */
+const getTableData = async () => {
+  loading.value = true
+  let searchObj = {
+    ...tableSearch.value
+  }
+  for (let key in searchObj) if (searchObj[key] === '') delete searchObj[key]
+  try {
+    const data = await SblxApi.getSblxPage(searchObj)
+
+    tableData.value = handleTree(data)
+  } finally {
+    loading.value = false
+  }
+}
+
+/** 搜索按钮操作 */
+const searchChange = (params, done) => {
+  getTableData().finally(() => {
+    done()
+  })
+}
+
+/** 清空按钮操作 */
+const resetChange = () => {
+  searchChange({}, () => {})
+}
+
+/** 表单打开前 */
+const beforeOpen = async (done, type) => {
+  await getTree()
+  const id = tableForm.value.id
+  if (['edit', 'view'].includes(type) && id) {
+    tableForm.value = await SblxApi.getSblx(id)
+  }
+  done()
+}
+
+/** 新增操作 */
+const rowSave = async (form, done, loading) => {
+  let bool = await SblxApi.createSblx(form).catch(() => false)
+  if (bool) {
+    message.success(t('common.createSuccess'))
+    resetChange()
+    done()
+  } else loading()
+}
+
+/** 编辑操作 */
+const rowUpdate = async (form, index, done, loading) => {
+  let bool = await SblxApi.updateSblx(form).catch(() => false)
+  if (bool) {
+    message.success(t('common.updateSuccess'))
+    getTableData()
+    done()
+  } else loading()
+}
+
+/** 删除按钮操作 */
+const rowDel = async (form, index) => {
+  try {
+    // 删除的二次确认
+    await message.delConfirm()
+    // 发起删除
+    await SblxApi.deleteSblx(form.id)
+    message.success(t('common.delSuccess'))
+    // 刷新列表
+    await getTableData()
+  } catch {}
+}
+
+/** 获得设备类型树 */
+const getTree = async () => {
+  sblxTree.value = []
+  const data = await SblxApi.getSimpleSblxList()
+  let sblx: SblxTree = { id: 0, industryName: '顶级设备类型', children: [] }
+  sblx.children = handleTree(data, 'id', 'parentId')
+  sblxTree.value.push(sblx)
+}
+
+watch(
+  () => defaultExpandAllShow.value,
+  () => {
+    crudRef.value?.refreshTable()
+  }
+)
+
+/** 初始化 **/
+onMounted(async () => {
+  await getTableData()
+})
+</script>
+
+<style lang="scss" scoped>
+:deep(.el-form-item__label) {
+  width: 100px !important;
+  white-space: nowrap;
+}
+</style>

types/global.d.ts

@@ -50,4 +50,10 @@ declare global {
     name: string
     children?: Tree[] | any[]
   }
+
+  interface SblxTree {
+    id: number
+    industryName: string
+    children?: Tree[] | any[]
+  }
 }