From e997020dcf6072ff75948261d7a7f78c0d0edff3 Mon Sep 17 00:00:00 2001
From: binbin_pan <max_163email@163.com>
Date: Wed, 8 Jan 2025 10:17:06 +0800
Subject: [PATCH] =?UTF-8?q?=E6=96=B0=E5=BB=BA=E9=80=80=E6=96=99-=E7=89=A9?=
 =?UTF-8?q?=E5=93=81=E7=B1=BB=E5=9E=8B=E6=90=9C=E7=B4=A2=E4=BC=98=E5=8C=96?=
MIME-Version: 1.0
Content-Type: text/plain; charset=UTF-8
Content-Transfer-Encoding: 8bit

---
 .../material/back/component/addReturn.vue     | 1052 +++++++++++------
 1 file changed, 688 insertions(+), 364 deletions(-)

diff --git a/src/views/material/back/component/addReturn.vue b/src/views/material/back/component/addReturn.vue
index d8a54a55..d2034e88 100644
--- a/src/views/material/back/component/addReturn.vue
+++ b/src/views/material/back/component/addReturn.vue
@@ -12,12 +12,19 @@
             <el-row>
                 <el-form-item label="退料单位" prop="unitId">
                     <treeselect
-                        v-model="queryParams.unitId" :disabled="backId!=''"
-                        :options="unitList" :normalizer="normalizer"
-                        :show-count="true" style="width: 240px" :disable-branch-nodes="true"
-                        noChildrenText="没有数据了" noOptionsText="没有数据" noResultsText="没有搜索结果"
-                        placeholder="请选择退料单位" @select="unitChange"
-                    /> 
+                        v-model="queryParams.unitId"
+                        :disabled="backId != ''"
+                        :options="unitList"
+                        :normalizer="normalizer"
+                        :show-count="true"
+                        style="width: 240px"
+                        :disable-branch-nodes="true"
+                        noChildrenText="没有数据了"
+                        noOptionsText="没有数据"
+                        noResultsText="没有搜索结果"
+                        placeholder="请选择退料单位"
+                        @select="unitChange"
+                    />
                     <!-- <el-cascader v-model="unitId"
                         :show-all-levels="false"
                         :options="unitList"
@@ -31,11 +38,18 @@
                 </el-form-item>
                 <el-form-item label="退料工程" prop="proId">
                     <treeselect
-                        v-model="queryParams.proId" :disabled="backId!=''"
-                        :options="proList" :normalizer="normalizer"
-                        :show-count="true" style="width: 240px" :disable-branch-nodes="true"
-                        noChildrenText="没有数据了" noOptionsText="没有数据" noResultsText="没有搜索结果"
-                        placeholder="请选择退料工程" @select="proChange"
+                        v-model="queryParams.proId"
+                        :disabled="backId != ''"
+                        :options="proList"
+                        :normalizer="normalizer"
+                        :show-count="true"
+                        style="width: 240px"
+                        :disable-branch-nodes="true"
+                        noChildrenText="没有数据了"
+                        noOptionsText="没有数据"
+                        noResultsText="没有搜索结果"
+                        placeholder="请选择退料工程"
+                        @select="proChange"
                     />
                     <!-- <el-cascader v-model="projectId"
                         :show-all-levels="false"
@@ -54,12 +68,12 @@
                         style="width: 240px"
                     ></el-input>
                 </el-form-item> -->
-              
+
                 <el-form-item label="退料人" prop="backPerson">
                     <el-input
                         v-model="queryParams.backPerson"
                         placeholder="请输入退料人"
-                        clearable 
+                        clearable
                         style="width: 240px"
                     />
                 </el-form-item>
@@ -73,7 +87,58 @@
                     />
                 </el-form-item>
                 <el-form-item label="物品类型" prop="deviceType">
-                    <el-cascader
+                    <el-row :gutter="10">
+                        <el-col :span="15">
+                            <el-select
+                                ref="typeSelect"
+                                v-model="tempDeviceType"
+                                multiple
+                                filterable
+                                placeholder="请输入物品类型"
+                                style="width: 500px"
+                                @change="handleTypeChange"
+                                clearable
+                                collapse-tags
+                                :filter-method="handleSearchImpl"
+                                :popper-class="'type-select-dropdown'"
+                                :popper-append-to-body="false"
+                                @visible-change="handleVisibleChange"
+                            >
+                                <el-option
+                                    v-for="item in filteredOptions"
+                                    :key="item.typeId"
+                                    :label="item.fullPath"
+                                    :value="item.typeId"
+                                    :data-key="item.typeId"
+                                >
+                                    <span v-html="highlightText(item.fullPath, searchKeyword)"></span>
+                                    <span style="float: right; color: #8492a6; font-size: 13px">
+                                        库存:{{ item.storageNum }}
+                                    </span>
+                                </el-option>
+                            </el-select>
+                        </el-col>
+                        <el-col :span="6">
+                            <el-input
+                                ref="searchInput"
+                                v-model="searchKeyword"
+                                placeholder="输入物品类型高亮搜索"
+                                prefix-icon="el-icon-search"
+                                clearable
+                                style="width: 300px"
+                                @input="handleHighlightSearch"
+                                @focus="handleSearchFocus"
+                                @click.native="handleSearchClick"
+                            >
+                                <template slot="append">
+                                    <span v-if="matchedOptions.length" style="margin: 0 5px">
+                                        {{ currentMatchIndex + 1 }}/{{ matchedOptions.length }}
+                                    </span>
+                                </template>
+                            </el-input>
+                        </el-col>
+                    </el-row>
+                    <!-- <el-cascader
                         :key="propsKey"
                         v-model="deviceType"
                         :show-all-levels="false"
@@ -86,11 +151,9 @@
                         ref="deviceTypeCascader"
                         popper-class="popper-select"
                         @change="deviceTypeChange"
-                    ></el-cascader>
-                 
+                    ></el-cascader> -->
                 </el-form-item>
-                 
-               
+
                 <el-form-item label="备注" prop="roleName">
                     <el-input
                         v-model="queryParams.remark"
@@ -98,11 +161,11 @@
                         clearable
                         rows="1"
                         type="textarea"
-                        style="width: 240px" 
+                        style="width: 240px"
                     />
                 </el-form-item>
             </el-row>
-            <el-row> </el-row>
+            <el-row></el-row>
         </el-form>
 
         <el-row :gutter="10" class="mb8">
@@ -117,14 +180,7 @@
                 >
             </el-col> -->
             <el-col :span="1.5">
-                <el-button
-                    type="primary"
-                    plain
-                    icon="el-icon-plus"
-                    size="mini"
-                    @click="handleAdd"
-                    >保存</el-button
-                >
+                <el-button type="primary" plain icon="el-icon-plus" size="mini" @click="handleAdd">保存</el-button>
             </el-col>
 
             <el-col :span="1.5">
@@ -138,61 +194,31 @@
           >导出</el-button> -->
             </el-col>
         </el-row>
-        <el-table
-            v-loading="loading"
-            :data="equipmentList" 
-            @selection-change="handleSelectionChange"
-        >
-            <el-table-column
-                type="selection"
-                min-width="55"
-                align="center"
-                :selectable="selectable"
-            />
+        <el-table v-loading="loading" :data="equipmentList" @selection-change="handleSelectionChange">
+            <el-table-column type="selection" min-width="55" align="center" :selectable="selectable" />
             <el-table-column label="序号" type="index" align="center" min-width="80" />
-            <el-table-column
-                label="类型名称"
-                align="center"
-                prop="typeName" 
-                :show-overflow-tooltip="true"
-            />
-            <el-table-column
-                label="规格型号"
-                align="center"
-                prop="typeModel" 
-                :show-overflow-tooltip="true"
-            />
-            <el-table-column
-                label="计量单位"
-                align="center"
-                prop="unitName" 
-            />
-            <el-table-column
-                label="当前在用量"
-                align="center"
-                prop="num" 
-            >
-            </el-table-column>
-            <el-table-column
-                label="管理模式"
-                align="center"
-                prop="manageType">
+            <el-table-column label="类型名称" align="center" prop="typeName" :show-overflow-tooltip="true" />
+            <el-table-column label="规格型号" align="center" prop="typeModel" :show-overflow-tooltip="true" />
+            <el-table-column label="计量单位" align="center" prop="unitName" />
+            <el-table-column label="当前在用量" align="center" prop="num"></el-table-column>
+            <el-table-column label="管理模式" align="center" prop="manageType">
                 <template slot-scope="scope">
                     <!-- 0编码1数量 -->
-                     <div v-if="scope.row.manageType==0">编码管理</div>
-                     <div v-if="scope.row.manageType==1">数量管理</div>
+                    <div v-if="scope.row.manageType == 0">编码管理</div>
+                    <div v-if="scope.row.manageType == 1">数量管理</div>
                 </template>
             </el-table-column>
-            <el-table-column
-                label="退料数量"
-                align="center"
-                prop="preNum" 
-                 min-width="100"
-            >
+            <el-table-column label="退料数量" align="center" prop="preNum" min-width="100">
                 <template slot-scope="scope">
-                    <div style="color: rgb(2, 167, 240);" @click="openAddCode(scope.row)" v-if="scope.row.manageType==0">添加编码</div>
+                    <div
+                        style="color: rgb(2, 167, 240)"
+                        @click="openAddCode(scope.row)"
+                        v-if="scope.row.manageType == 0"
+                    >
+                        添加编码
+                    </div>
                     <el-input
-                        v-if="scope.row.manageType==1"
+                        v-if="scope.row.manageType == 1"
                         v-model.number="scope.row.preNum"
                         placeholder="退料数量"
                         type="number"
@@ -203,72 +229,65 @@
                     />
                 </template>
             </el-table-column>
-            <el-table-column
-                label="外观判定"
-                align="center"
-                prop="apDetection"
-                min-width="120"
-            >
+            <el-table-column label="外观判定" align="center" prop="apDetection" min-width="120">
                 <template slot-scope="scope">
                     <el-input
                         v-model.number="scope.row.apDetection"
                         placeholder="外观判定"
-                        type="text" 
-                        clearable  maxlength="20"
+                        type="text"
+                        clearable
+                        maxlength="20"
                         style="width: 100%"
                     />
                 </template>
             </el-table-column>
 
-            <el-table-column
-                label="备注"
-                align="center"
-                prop="remark"
-                min-width="120"
-            >
+            <el-table-column label="备注" align="center" prop="remark" min-width="120">
                 <template slot-scope="scope">
                     <el-input
                         v-model="scope.row.remark"
                         placeholder="备注"
-                        clearable  maxlength="100"
-                        style="width: 100%" 
+                        clearable
+                        maxlength="100"
+                        style="width: 100%"
                     />
                 </template>
             </el-table-column>
-            <el-table-column
-                label="附件"
-                align="center"
-                prop="file"
-            >
+            <el-table-column label="附件" align="center" prop="file">
                 <template slot-scope="scope">
-                    <div style="display: flex;align-items: center;justify-content: center;">
-                        <el-upload ref="upload" :limit="3" :headers="upload.headers"
-                        :action="upload.url" :show-file-list="false" accept=".png, .jpg, .jpeg, .pdf, .doc, .docx"
-                        :on-success="handleFileSuccess"   :auto-upload="true">
-                        <el-button size="mini" type="text" @click="beforeFileUpload(scope.row)">
-                                上传
-                        </el-button>
+                    <div style="display: flex; align-items: center; justify-content: center">
+                        <el-upload
+                            ref="upload"
+                            :limit="3"
+                            :headers="upload.headers"
+                            :action="upload.url"
+                            :show-file-list="false"
+                            accept=".png, .jpg, .jpeg, .pdf, .doc, .docx"
+                            :on-success="handleFileSuccess"
+                            :auto-upload="true"
+                        >
+                            <el-button size="mini" type="text" @click="beforeFileUpload(scope.row)">上传</el-button>
                         </el-upload>
-                        <el-button size="mini" type="text" @click="picturePreview(scope.row)" v-if="scope.row.bmFileInfos&&scope.row.bmFileInfos.length>0">
+                        <el-button
+                            size="mini"
+                            type="text"
+                            @click="picturePreview(scope.row)"
+                            v-if="scope.row.bmFileInfos && scope.row.bmFileInfos.length > 0"
+                        >
                             查看
                         </el-button>
                     </div>
                 </template>
             </el-table-column>
 
-            <el-table-column
-                label="操作"
-                align="center"
-                width="100px"
-            >
+            <el-table-column label="操作" align="center" width="100px">
                 <template slot-scope="scope">
-                    <el-button size="mini" type="danger" 
-                        @click="handleDelete(scope.row,scope.$index)">删除</el-button>
+                    <el-button size="mini" type="danger" @click="handleDelete(scope.row, scope.$index)">删除</el-button>
                 </template>
             </el-table-column>
         </el-table>
 
-        <el-dialog title="编码退料" :visible.sync="open" width="1200px" append-to-body> 
+        <el-dialog title="编码退料" :visible.sync="open" width="1200px" append-to-body>
             <!-- <el-row :gutter="10" class="mb8">
                 <el-col :span="6">
                     <div style="width: 100%;height: 100%;display: flex;align-items: center;">
@@ -286,41 +305,78 @@
                     <el-button type="primary" size="mini" @click="handleAddCode">添加编码</el-button>
                 </el-col>
             </el-row> -->
-            <el-table :data="machineList" width="100%" ref="codeTableList" height="450px"  row-key="maId"  @selection-change="codeSelectionChange">
+            <el-table
+                :data="machineList"
+                width="100%"
+                ref="codeTableList"
+                height="450px"
+                row-key="maId"
+                @selection-change="codeSelectionChange"
+            >
                 <el-table-column type="selection" width="55" align="center" />
-                <el-table-column label="序号" type="index" width="55" align="center"/>
-                <el-table-column label="类型名称" prop="typeName" align="center" :show-overflow-tooltip="true">
-                </el-table-column>
-                <el-table-column label="规格型号" prop="materialName" align="center" :show-overflow-tooltip="true">
-                </el-table-column> 
-                <el-table-column label="设备编码" prop="maCode" align="center" :show-overflow-tooltip="true">
-                </el-table-column>
+                <el-table-column label="序号" type="index" width="55" align="center" />
+                <el-table-column
+                    label="类型名称"
+                    prop="typeName"
+                    align="center"
+                    :show-overflow-tooltip="true"
+                ></el-table-column>
+                <el-table-column
+                    label="规格型号"
+                    prop="materialName"
+                    align="center"
+                    :show-overflow-tooltip="true"
+                ></el-table-column>
+                <el-table-column
+                    label="设备编码"
+                    prop="maCode"
+                    align="center"
+                    :show-overflow-tooltip="true"
+                ></el-table-column>
                 <el-table-column label="设备状态" prop="maStatus" align="center" :show-overflow-tooltip="true">
                     <template slot-scope="scope">
-                        <dict-tag :options="dict.type.ma_machine_status" :value="scope.row.maStatus"/>
+                        <dict-tag :options="dict.type.ma_machine_status" :value="scope.row.maStatus" />
                     </template>
                 </el-table-column>
-                <el-table-column label="外观判定" prop="apDetection" align="center" width="150" :show-overflow-tooltip="true">
+                <el-table-column
+                    label="外观判定"
+                    prop="apDetection"
+                    align="center"
+                    width="150"
+                    :show-overflow-tooltip="true"
+                >
                     <template slot-scope="scope">
-                    <el-input
-                        v-model.number="scope.row.apDetection"
-                        placeholder="外观判定" maxlength="20"
-                        type="text"  clearable 
-                        style="width: 100%"
-                    />
-                </template>
+                        <el-input
+                            v-model.number="scope.row.apDetection"
+                            placeholder="外观判定"
+                            maxlength="20"
+                            type="text"
+                            clearable
+                            style="width: 100%"
+                        />
+                    </template>
                 </el-table-column>
                 <el-table-column label="附件" align="center" width="100">
                     <template slot-scope="scope">
-                        <div style="display: flex;align-items: center;justify-content: center;">
-                            <el-upload ref="upload" :limit="3" :headers="upload.headers"
-                            :action="upload.url" :show-file-list="false" accept=".png, .jpg, .jpeg, .pdf, .doc, .docx"
-                            :on-success="handleFileSuccess2"   :auto-upload="true">
-                            <el-button size="mini" type="text" @click="beforeFileUpload(scope.row)">
-                                    上传
-                            </el-button>
+                        <div style="display: flex; align-items: center; justify-content: center">
+                            <el-upload
+                                ref="upload"
+                                :limit="3"
+                                :headers="upload.headers"
+                                :action="upload.url"
+                                :show-file-list="false"
+                                accept=".png, .jpg, .jpeg, .pdf, .doc, .docx"
+                                :on-success="handleFileSuccess2"
+                                :auto-upload="true"
+                            >
+                                <el-button size="mini" type="text" @click="beforeFileUpload(scope.row)">上传</el-button>
                             </el-upload>
-                            <el-button size="mini" type="text" @click="picturePreview(scope.row)" v-if="scope.row.bmFileInfos&&scope.row.bmFileInfos.length>0">
+                            <el-button
+                                size="mini"
+                                type="text"
+                                @click="picturePreview(scope.row)"
+                                v-if="scope.row.bmFileInfos && scope.row.bmFileInfos.length > 0"
+                            >
                                 查看
                             </el-button>
                         </div>
@@ -333,21 +389,20 @@
                     </template>
                 </el-table-column> -->
             </el-table>
-            <div style="width: 100%;height: 50px;display: flex;justify-content: flex-end;align-items: center;">
+            <div style="width: 100%; height: 50px; display: flex; justify-content: flex-end; align-items: center">
                 <el-button type="primary" size="mini" @click="saveDevCode">保存</el-button>
-                <el-button type="normal" size="mini" @click="open=false">取消</el-button>
+                <el-button type="normal" size="mini" @click="open = false">取消</el-button>
             </div>
         </el-dialog>
 
         <!-- 图片查看弹窗 -->
-        <el-dialog :visible.sync="dialogVisible" width="500px" height="500px" >
-            <img width="100%" height="500px" :src="dialogImageUrl"  />
+        <el-dialog :visible.sync="dialogVisible" width="500px" height="500px">
+            <img width="100%" height="500px" :src="dialogImageUrl" />
         </el-dialog>
-
     </div>
 </template>
 
-<script> 
+<script>
 import {
     getProjectList,
     getUnitList,
@@ -357,25 +412,25 @@ import {
     getBackApplyInfo,
     editBackApply,
     getMachineById
-} from '@/api/back/index.js' 
+} from '@/api/back/index.js'
 import { mapState } from 'vuex'
 import { getInfo, h } from '@/api/login'
 import { getToken } from '@/utils/auth'
-import Treeselect from "@riophae/vue-treeselect";
-import "@riophae/vue-treeselect/dist/vue-treeselect.css";
+import Treeselect from '@riophae/vue-treeselect'
+import '@riophae/vue-treeselect/dist/vue-treeselect.css'
 export default {
     components: { Treeselect },
     name: 'ReturnApplyAdd',
     dicts: ['ma_machine_status'],
     props: {
         backId: {
-            type: [String, Number],
+            type: [String, Number]
         },
         agreementId: {
-            type: [String, Number],
+            type: [String, Number]
         }
     },
-    data() { 
+    data() {
         return {
             // 遮罩层
             loading: false,
@@ -388,20 +443,20 @@ export default {
             // 显示搜索条件
             showSearch: true,
             // 总条数
-            total: 0, 
+            total: 0,
             // 弹出层标题
             title: '',
             // 是否显示弹出层
             open: false,
-            rowData:{},
-            maId:"",
-            maData:{},
-            maCodeList: [],//编码表格
+            rowData: {},
+            maId: '',
+            maData: {},
+            maCodeList: [], //编码表格
             machineList: [], // 编码下拉选 集合
             //图片查看弹窗
             dialogImageUrl: '',
             dialogVisible: false,
-            fileData:{},
+            fileData: {},
             //上传
             upload: {
                 // 设置上传的请求头部
@@ -413,7 +468,7 @@ export default {
                 children: 'children',
                 label: 'name',
                 // multiple: false,
-                value: 'id',
+                value: 'id'
                 // multiple: true,
             },
             unitList: [], //单位 集合
@@ -429,14 +484,14 @@ export default {
                 agreementId: null, //协议id
                 agreementCode: null, //协议code
                 // companyId: '', //登录信息中取
-                // createBy: '', //用户名 
+                // createBy: '', //用户名
                 // backTime: '', //申请时间
                 //退料人信息
                 backPerson: '',
                 phone: '',
                 remark: '',
                 //退料详情集合
-                equipmentList: [],
+                equipmentList: []
             },
             equipmentList: [],
             //退料详情单条模板
@@ -450,7 +505,7 @@ export default {
                 unitName: '', //显示的设备 单位
                 useNum: '', //当前在用量
                 remark: '', //单条备注
-                preNum: 1, //预领数量
+                preNum: 1 //预领数量
             },
             //
             queryRules: {
@@ -458,22 +513,22 @@ export default {
                     {
                         required: true,
                         message: '请选择退料单位',
-                        trigger: 'change', 
-                    },
+                        trigger: 'change'
+                    }
                 ],
                 proId: [
                     {
                         required: true,
                         message: '请选择退料工程',
-                        trigger: 'change', 
-                    },
+                        trigger: 'change'
+                    }
                 ],
                 backPerson: [
                     {
                         required: true,
                         message: '请输入退料人',
-                        trigger: 'blur',
-                    },
+                        trigger: 'blur'
+                    }
                 ],
                 // backTime: [
                 //     {
@@ -486,17 +541,16 @@ export default {
                     {
                         required: true,
                         trigger: 'blur',
-                        message: '请输入退料人的手机号',
+                        message: '请输入退料人的手机号'
                     },
                     {
                         pattern: /^1[3456789]\d{9}$/,
                         message: '请输入正确的手机号码',
-                        trigger: 'blur',
-                    },
-                ],
+                        trigger: 'blur'
+                    }
+                ]
             },
- 
-           
+
             deviceTypeTree: [], // 设备 树结构数据
             // 设备 树显示 配置
             deviceTypeTreeProps: {
@@ -504,27 +558,46 @@ export default {
                 label: 'typeName',
                 // multiple: false,
                 value: 'typeId',
-                multiple: true,
+                multiple: true
             },
             // 选中的设备类型
-            deviceType: null, 
+            deviceType: [],
             // defaultProps: {
             //   children: "children",
             //   label: "label"
-            // },  
+            // },
             // companyId: '',
             createBy: '',
             rowId: '',
             propsKey: 1000,
+            flattenOptions: [], // 扁平化后的选项数据
+            typePopoverVisible: false,
+            typeOptions: [], // 类型选项
+            typeLoading: false, // 搜索加载状态
+            allTypeList: [], // 所有类型数据
+            flattenTypeOptions: [], // 扁平化后的选项数据（缓存所有选项）
+            typeGroups: [], // 分组后的类型选项
+            typeGroupsBackup: [], // 备份原始分组数据，用于搜索
+            typeMap: new Map(), // 用于快速查找类型数据
+            tempDeviceType: [], // 临时选中值
+            filteredOptions: [], // 过滤后的选项（用于显示）
+            maxShowOptions: 100, // 最大显示选项数
+            searchTimer: null, // 用于自定义防抖
+            searchKeyword: '', // 高亮搜索关键字
+            currentMatchIndex: -1, // 当前匹配项索引
+            matchedOptions: [], // 匹配的选项
+            keepSelectOpen: false, // 控制下拉框是否保持打开
+            isSearching: false // 添加搜索状态标记
         }
     },
     mounted() {
         this.GetUnitData()
-        this.GetProData() 
-         
-        if (this.backId) {//编辑
-            console.log(this.backId) 
-            this.rowId = this.backId;
+        this.GetProData()
+
+        if (this.backId) {
+            //编辑
+            console.log(this.backId)
+            this.rowId = this.backId
             this.GetViewByApply()
         }
         // getInfo().then((res) => {
@@ -533,80 +606,161 @@ export default {
         // })
     },
     computed: {
-        ...mapState(['user']),
+        ...mapState(['user'])
     },
     methods: {
-         /** 转换菜单数据结构 */
-         normalizer(node) {
+        /** 转换菜单数据结构 */
+        normalizer(node) {
             if (node.children && !node.children.length) {
-                delete node.children;
+                delete node.children
             }
             return {
                 id: node.id,
                 label: node.name,
-                children: node.children,
-            };
-        }, 
+                children: node.children
+            }
+        },
         // 获取 来往单位 列表数据
         async GetUnitData() {
-                const params = {
-                    // projectId: this.queryParams.proId /*  */,
-                }
-                const res = await getUnitList(params)
-                this.unitList = res.data
-                this.GetAgreementInfoById() 
+            const params = {
+                // projectId: this.queryParams.proId /*  */,
+            }
+            const res = await getUnitList(params)
+            this.unitList = res.data
+            this.GetAgreementInfoById()
         },
-        unitChange(val){ 
-            // if(val&&val.length>0){  
+        unitChange(val) {
+            // if(val&&val.length>0){
             //     this.queryParams.unitId=this.unitId[this.unitId.length - 1]
             // }else if(val&&val.length==0){
             //     this.queryParams.unitId=""
             // }
-            // this.GetProData() 
-            setTimeout(()=>{
+            // this.GetProData()
+            setTimeout(() => {
                 this.GetProData()
-            },500)  
+            }, 500)
         },
         // 获取 工程名称 列表数据
         async GetProData() {
-                const params = {
-                    unitId: this.queryParams.unitId,
-                }
-                const res = await getProjectList(params)
-                this.proList = res.data
-                this.queryParams.proId=null
-                this.GetAgreementInfoById() 
-                
+            const params = {
+                unitId: this.queryParams.unitId
+            }
+            const res = await getProjectList(params)
+            this.proList = res.data
+            this.queryParams.proId = null
+            this.GetAgreementInfoById()
         },
-        proChange(val){ 
+        proChange(val) {
             // if(val&&val.length>0){
             //     this.queryParams.proId=this.projectId[this.projectId.length - 1]
             // }else if(val&&val.length==0){
             //     this.queryParams.proId=""
             // }
             // this.GetUnitData()
-            setTimeout(()=>{
+            setTimeout(() => {
                 this.GetUnitData()
-            },500) 
+            }, 500)
         },
         // 获取 设备树结构数据
         async GetDeviceTypeTreeFn(agreementId) {
             const params = {
-                agreementId: agreementId,
+                agreementId: agreementId
             }
             const res = await getDeviceTreeByAgreementId(params)
             console.log('resgetUseTypeTreee==========', res)
-            this.deviceTypeTree = res.data;
-            
+            this.deviceTypeTree = res.data
+
+            // 处理并扁平化所有类型数据
+            this.flattenTypeOptions = this.processTypeData(res.data)
+            console.log('🚀 ~ GetDeviceTypeTreeFn ~ this.flattenTypeOptions:', this.flattenTypeOptions)
+            // 初始显示所有选项
+            this.filteredOptions = [...this.flattenTypeOptions]
+
             //反显
             let selectList = []
-            this.equipmentList.forEach((e) => {
-                selectList.push(
-                    this.getParentsById(this.deviceTypeTree, e.typeId),
-                )
+            this.equipmentList.forEach(e => {
+                selectList.push(this.getParentsById(this.deviceTypeTree, e.typeId))
             })
             this.deviceType = selectList
-            this.$forceUpdate() 
+            this.$forceUpdate()
+        },
+        // 处理类型数据
+        processTypeData(data) {
+            const result = []
+
+            const traverse = (node, parents = []) => {
+                const path = [...parents, node.typeName]
+
+                if (!node.children || node.children.length === 0) {
+                    result.push({
+                        typeId: node.typeId,
+                        typeName: node.typeName,
+                        fullPath: path.join(' / '),
+                        searchKey: path.join('').toLowerCase(),
+                        storageNum: node.storageNum || 0,
+                        maTypeName: parents[parents.length - 1] || '',
+                        specificationType: node.typeName,
+                        unitName: node.unitName,
+                        unitValue: node.unitValue
+                    })
+                }
+
+                if (node.children) {
+                    node.children.forEach(child => traverse(child, path))
+                }
+            }
+
+            data.forEach(node => traverse(node))
+            return result
+        },
+        // 搜索处理函数
+        handleSearchImpl(query) {
+            if (!query) {
+                this.filteredOptions = [...this.flattenTypeOptions]
+                return
+            }
+
+            const lowercaseQuery = query.toLowerCase()
+            this.filteredOptions = this.flattenTypeOptions.filter(
+                item => item.searchKey.includes(lowercaseQuery) || item.fullPath.toLowerCase().includes(lowercaseQuery)
+            )
+        },
+        // 选择变化处理
+        handleTypeChange(val) {
+            if (!val || val.length === 0) return
+
+            // 获取新选中的项
+            const lastSelected = val[val.length - 1]
+            const typeData = this.flattenTypeOptions.find(item => item.typeId === lastSelected)
+
+            if (typeData) {
+                if (this.equipmentList.some(item => item.typeId === lastSelected)) {
+                    this.$message({
+                        message: `${typeData.typeName} 已添加到列表中`,
+                        type: 'warning'
+                    })
+                    this.tempDeviceType = this.tempDeviceType.filter(id => id !== lastSelected)
+                } else if (typeData.storageNum <= 0) {
+                    this.$message.error('所选物资规格类型暂时无库存，无法申请！')
+                    this.tempDeviceType = this.tempDeviceType.filter(id => id !== lastSelected)
+                } else {
+                    // 将新项添加到数组开头，实现倒序
+                    this.equipmentList.unshift({
+                        ...typeData,
+                        preNum: 0
+                    })
+                    this.deviceType.push(lastSelected)
+                    this.$message({
+                        message: `已添加 ${typeData.typeName}`,
+                        type: 'success'
+                    })
+                }
+            }
+
+            // 清空临时选中值
+            this.$nextTick(() => {
+                this.tempDeviceType = []
+            })
         },
         //树结构数据获取父
         getParentsById(list, id) {
@@ -630,7 +784,7 @@ export default {
             if (this.queryParams.unitId && this.queryParams.proId) {
                 const params = {
                     unitId: this.queryParams.unitId,
-                    projectId: this.queryParams.proId,
+                    projectId: this.queryParams.proId
                 }
                 const res = await getAgreementInfoById(params)
                 console.log(res)
@@ -649,28 +803,27 @@ export default {
                 }
             }
         },
-        
+
         // 获取 任务详情数据
         async GetViewByApply(params) {
             const res = await getBackApplyInfo(this.rowId)
-            console.log(res) 
+            console.log(res)
             const data = res.data
-            this.queryParams.unitId = data.backApplyInfo.unitId; 
-            // this.unitId = this.treeParentsById(this.unitList, this.queryParams.unitId) 
+            this.queryParams.unitId = data.backApplyInfo.unitId
+            // this.unitId = this.treeParentsById(this.unitList, this.queryParams.unitId)
             this.GetProData()
             setTimeout(() => {
                 this.queryParams.proId = data.backApplyInfo.proId
-            }, 500);
-            // this.projectId = this.treeParentsById(this.proList, this.queryParams.proId)  
-           
+            }, 500)
+            // this.projectId = this.treeParentsById(this.proList, this.queryParams.proId)
+
             this.queryParams.phone = data.backApplyInfo.phone
             this.queryParams.backPerson = data.backApplyInfo.backPerson
             this.queryParams.agreementId = data.backApplyInfo.agreementId
-            this.queryParams.remark = data.backApplyInfo.remark 
+            this.queryParams.remark = data.backApplyInfo.remark
             this.equipmentList = data.backApplyDetailsList
             this.GetDeviceTypeTreeFn(data.backApplyInfo.agreementId)
-            
-        }, 
+        },
         //单位，工程树结构数据获取父
         treeParentsById(list, id) {
             for (let i in list) {
@@ -700,11 +853,11 @@ export default {
         // 多选框选中数据
         handleSelectionChange(selection) {
             this.queryParams.equipmentList = selection
-        }, 
+        },
 
         /** 保存按钮操作 */
         handleAdd() {
-            this.$refs.queryForm.validate(async (valid) => {
+            this.$refs.queryForm.validate(async valid => {
                 if (!valid) {
                     return false
                 } else {
@@ -721,7 +874,7 @@ export default {
                     //   (item) => item.remark == '' || item.remark == undefined
                     // );
                     const isNum = this.queryParams.equipmentList.some(
-                        (item) => item.preNum == '' || item.preNum == undefined,
+                        item => item.preNum == '' || item.preNum == undefined
                     )
                     if (isNum) {
                         this.$message.error('退料数量不能为空！')
@@ -730,11 +883,11 @@ export default {
                     // this.queryParams.createBy = this.user.name
                     // this.queryParams.companyId = this.companyId
                     this.queryParams.backApplyInfo = {
-                        id:this.rowId,
+                        id: this.rowId,
                         backPerson: this.queryParams.backPerson,
                         phone: this.queryParams.phone,
                         remark: this.queryParams.remark,
-                        agreementId: this.queryParams.agreementId,
+                        agreementId: this.queryParams.agreementId
                         // backTime: this.queryParams.backTime,
                         // createBy: this.queryParams.createBy,
                         // companyId: this.queryParams.companyId,
@@ -742,8 +895,7 @@ export default {
                     if (this.rowId != '') {
                         let params = {
                             backApplyInfo: this.queryParams.backApplyInfo,
-                            backApplyDetailsList:
-                                this.queryParams.equipmentList,
+                            backApplyDetailsList: this.queryParams.equipmentList
                         }
                         const res = await editBackApply(params)
                         if (res.code == 200) {
@@ -755,8 +907,7 @@ export default {
                     } else {
                         let params = {
                             backApplyInfo: this.queryParams.backApplyInfo,
-                            backApplyDetailsList:
-                                this.queryParams.equipmentList,
+                            backApplyDetailsList: this.queryParams.equipmentList
                         }
                         const res = await addBackApply(params)
                         if (res.code == 200) {
@@ -768,59 +919,60 @@ export default {
                     }
                 }
             })
-        }, 
-  
+        },
+
         /** 删除按钮操作 */
-        handleDelete(row,index) {
-            this.$modal.confirm('是否确认删除所选择的数据项？').then(() => {
-                    this.deviceType.forEach((e, i) => {
-                        if (e[3] === row.typeId) {
-                            this.deviceType.splice(i, 1)
-                            this.propsKey++
-                        }
-                    })
-                    console.log(index)
-                    // let index = this.equipmentList.findIndex(item=>item.typeId==row.typeId) 
-                    this.equipmentList.splice(index, 1)
-                }).catch(() => {})
-                
+        handleDelete(row, index) {
+            this.$modal
+                .confirm('是否确认删除所选择的数据项？')
+                .then(() => {
+                    // this.deviceType.forEach((e, index) => {
+                    //     if (e[3] === row.typeId) {
+                    //         this.deviceType.splice(index, 1)
+                    //         this.propsKey++
+                    //     }
+                    // })
+                    // this.equipmentList.splice(index+1, 1)
+                    this.equipmentList = this.equipmentList.filter(item => item.typeId !== row.typeId)
+                    // 更新实际存储的选中值
+                    this.deviceType = this.equipmentList.map(item => item.typeId)
+                })
+                .catch(() => {})
             // this.equipmentList.splice(row.index, 1)
         },
-        
+
         /** 导出按钮操作 */
         handleExport() {
             this.download(
                 'system/role/export',
                 {
-                    ...this.queryParams,
+                    ...this.queryParams
                 },
-                `role_${new Date().getTime()}.xlsx`,
+                `role_${new Date().getTime()}.xlsx`
             )
         },
         checkNum(row) {
-            console.log(row) 
+            console.log(row)
             let maxNum = row.num
-            if(row.unitValue==1){
-                row.preNum=Number(String(row.preNum).replace(/[^\d.]/g,''))
-            }else{
-                row.preNum=Number(String(row.preNum).replace(/[^\d]/g,''))
-            } 
+            if (row.unitValue == 1) {
+                row.preNum = Number(String(row.preNum).replace(/[^\d.]/g, ''))
+            } else {
+                row.preNum = Number(String(row.preNum).replace(/[^\d]/g, ''))
+            }
             if (row.preNum <= 0) {
-                row.preNum = 0;
+                row.preNum = 0
             }
             if (row.preNum > maxNum) {
-                row.preNum = maxNum;
+                row.preNum = maxNum
             }
         },
         /////// 设备类型树  切换
         async deviceTypeChange(val) {
-            
-            const deviceTypeList =
-                this.$refs.deviceTypeCascader.getCheckedNodes()
+            const deviceTypeList = this.$refs.deviceTypeCascader.getCheckedNodes()
             console.log(deviceTypeList)
             let tempList = []
             if (val.length > 0) {
-                const items = val.map((e) => {
+                const items = val.map(e => {
                     return e[3]
                 })
                 for (let i of items) {
@@ -833,8 +985,8 @@ export default {
                             obj.preNum = 0
                             obj.apDetection = ''
                             obj.remark = ''
-                            obj.maCodeList=[]
-                            obj.bmFileInfos=[]
+                            obj.maCodeList = []
+                            obj.bmFileInfos = []
                             tempList.push(obj)
                             break
                         }
@@ -849,8 +1001,8 @@ export default {
                 }
                 const newArray = [...map.values()]
                 let newArray_array = []
-                items.forEach((e) => {
-                    newArray.forEach((j) => {
+                items.forEach(e => {
+                    newArray.forEach(j => {
                         if (e == j.typeId) {
                             newArray_array.push(j)
                         }
@@ -863,9 +1015,7 @@ export default {
         },
         //// 将数据处理成 表格中需要的数据
         handelTableItemData(node) {
-            const template = JSON.parse(
-                JSON.stringify(this.leaseApplyDetailsItem),
-            )
+            const template = JSON.parse(JSON.stringify(this.leaseApplyDetailsItem))
             template.createBy = this.createBy
             template.typeId = node.data.typeId
             // template.companyId = node.data.companyId
@@ -878,91 +1028,93 @@ export default {
             template.useNum = node.data.useNum
             return template
         },
-      
+
         // changeMachine(val){
         //     console.log(val)
         //     this.maData = this.machineList.find(option => option.maId == val);
         //     //  = this.machineList[index]
         // },
-         //编码数据
-        async getMachineById(typeId){
+        //编码数据
+        async getMachineById(typeId) {
             let param = {
-                unitId:this.queryParams.unitId,
-                proId:this.queryParams.proId,
-                typeId:typeId
+                unitId: this.queryParams.unitId,
+                proId: this.queryParams.proId,
+                typeId: typeId
             }
-            await getMachineById(param).then((res) => {
-                this.machineList=res.data
-                this.machineList.forEach((item)=>{
-                    item.bmFileInfos=[];
-                    item.apDetection=""
+            await getMachineById(param).then(res => {
+                this.machineList = res.data
+                this.machineList.forEach(item => {
+                    item.bmFileInfos = []
+                    item.apDetection = ''
                 })
             })
         },
         //编码类型-弹窗
-        async openAddCode(row){
-            this.rowData=row; 
+        async openAddCode(row) {
+            this.rowData = row
             await this.getMachineById(row.typeId)
-            // this.maId="" 
-                if(this.rowData.maCodeList&&this.rowData.maCodeList.length>0){
-                    this.maCodeList = this.rowData.maCodeList;
-                    // console.log(this.maCodeList)
-                    // console.log(this.machineList)
-                    if (this.rowId != '') {//编辑插入已选数据后再回显勾选 
-                        this.maCodeList.forEach((item)=>{
-                            this.machineList.unshift(item)//插入
-                            this.$nextTick(() => {
-                                this.$refs.codeTableList.toggleRowSelection(item,true);
-                            })
-                        }) 
-                    }else{//新增回显勾选
-                        // console.log("新增")
-                        this.machineList.forEach((item)=>{
-                            this.maCodeList.forEach((sub)=>{
-                                if(sub.maId==item.maId){
-                                    this.$nextTick(() => {
-                                        setTimeout(()=>{
-                                            this.$refs.codeTableList.toggleRowSelection(item,true);
-                                        },500)
-                                    }) 
-                                }
-                            }) 
-                        }) 
-                    }
-                }else{
-                    this.maCodeList=[]
+            // this.maId=""
+            if (this.rowData.maCodeList && this.rowData.maCodeList.length > 0) {
+                this.maCodeList = this.rowData.maCodeList
+                // console.log(this.maCodeList)
+                // console.log(this.machineList)
+                if (this.rowId != '') {
+                    //编辑插入已选数据后再回显勾选
+                    this.maCodeList.forEach(item => {
+                        this.machineList.unshift(item) //插入
+                        this.$nextTick(() => {
+                            this.$refs.codeTableList.toggleRowSelection(item, true)
+                        })
+                    })
+                } else {
+                    //新增回显勾选
+                    // console.log("新增")
+                    this.machineList.forEach(item => {
+                        this.maCodeList.forEach(sub => {
+                            if (sub.maId == item.maId) {
+                                this.$nextTick(() => {
+                                    setTimeout(() => {
+                                        this.$refs.codeTableList.toggleRowSelection(item, true)
+                                    }, 500)
+                                })
+                            }
+                        })
+                    })
                 }
-            this.open=true;
+            } else {
+                this.maCodeList = []
+            }
+            this.open = true
         },
         codeSelectionChange(selection) {
-                this.maCodeList=selection
+            this.maCodeList = selection
             // console.log(selection)
-           
+
             // this.queryParams.equipmentList = selection
         },
         //查询添加
-        handleAddCode(){
+        handleAddCode() {
             // console.log(this.rowData)
             // console.log(this.maCodeList)
             // console.log(this.maId)
             // console.log(this.maData)
             // if(this.maId!=""){
-                // let obj = {
-                //     materialName:this.maData.materialName,
-                //     typeId:this.maData.typeId,
-                //     typeName:this.maData.typeName,
-                //     maId:this.maData.maId,
-                //     maCode:this.maData.maCode,
-                //     maStatus:this.maData.maStatus,
-                //     bmFileInfos:[],
-                //     apDetection:"",
-                // }
-                // let index = this.maCodeList.findIndex(v=>v.maId==this.maId)
-                // if(index>-1){
-                //     this.$message.error('设备编码已存在！')
-                // }else{
-                //     this.maCodeList.push(obj)
-                // }
+            // let obj = {
+            //     materialName:this.maData.materialName,
+            //     typeId:this.maData.typeId,
+            //     typeName:this.maData.typeName,
+            //     maId:this.maData.maId,
+            //     maCode:this.maData.maCode,
+            //     maStatus:this.maData.maStatus,
+            //     bmFileInfos:[],
+            //     apDetection:"",
+            // }
+            // let index = this.maCodeList.findIndex(v=>v.maId==this.maId)
+            // if(index>-1){
+            //     this.$message.error('设备编码已存在！')
+            // }else{
+            //     this.maCodeList.push(obj)
+            // }
             // }else{
             //     this.$message.error('请先填写设备编码！')
             // }
@@ -972,39 +1124,39 @@ export default {
         //     this.maCodeList.splice(row.index, 1)
         // },
         // 弹窗保存
-        saveDevCode(){
+        saveDevCode() {
             console.log(this.rowData)
             console.log(this.maCodeList)
-            this.rowData.maCodeList = this.maCodeList;
-            this.rowData.preNum = this.maCodeList.length;
-            this.open=false
+            this.rowData.maCodeList = this.maCodeList
+            this.rowData.preNum = this.maCodeList.length
+            this.open = false
             console.log(this.equipmentList)
         },
         //文件上传前
-        beforeFileUpload(row){ 
-            this.fileData = row 
+        beforeFileUpload(row) {
+            this.fileData = row
         },
-         // 文件上传成功处理-退料列表上传
-         handleFileSuccess(response, file, fileList) { 
-            if(response.code==200){
+        // 文件上传成功处理-退料列表上传
+        handleFileSuccess(response, file, fileList) {
+            if (response.code == 200) {
                 let obj = {
-                    "name": response.data.name,
-                    "url": response.data.url,
+                    name: response.data.name,
+                    url: response.data.url
                 }
-                let index = this.equipmentList.findIndex(v=>v.typeId==this.fileData.typeId)
-                this.equipmentList[index].bmFileInfos=[obj]
+                let index = this.equipmentList.findIndex(v => v.typeId == this.fileData.typeId)
+                this.equipmentList[index].bmFileInfos = [obj]
             }
         },
         // 文件上传成功处理-编码弹窗上传
-        handleFileSuccess2(response, file, fileList) { 
+        handleFileSuccess2(response, file, fileList) {
             console.log(1111)
-            if(response.code==200){
+            if (response.code == 200) {
                 let obj = {
-                    "name": response.data.name,
-                    "url": response.data.url,
+                    name: response.data.name,
+                    url: response.data.url
                 }
-                let index = this.machineList.findIndex(v=>v.maCode==this.fileData.maCode)
-                this.machineList[index].bmFileInfos=[obj]
+                let index = this.machineList.findIndex(v => v.maCode == this.fileData.maCode)
+                this.machineList[index].bmFileInfos = [obj]
                 console.log(this.machineList)
             }
         },
@@ -1012,23 +1164,124 @@ export default {
         picturePreview(row) {
             console.log(row)
             console.log(row.bmFileInfos)
-            if(row.bmFileInfos.length>0){
+            if (row.bmFileInfos.length > 0) {
                 let file = row.bmFileInfos[0]
-                this.dialogImageUrl = file.url;
-                const parts = file.name.split('.');
-                const extension = parts.pop();
-                if(extension === 'doc'||extension === 'docx'||extension === 'pdf'){
-                const windowName = file.name;
-                    window.open(file.url,windowName)
-                }else{
+                this.dialogImageUrl = file.url
+                const parts = file.name.split('.')
+                const extension = parts.pop()
+                if (extension === 'doc' || extension === 'docx' || extension === 'pdf') {
+                    const windowName = file.name
+                    window.open(file.url, windowName)
+                } else {
                     this.dialogVisible = true
                 }
             }
         },
+        // 高亮文本
+        highlightText(text, keyword) {
+            if (!keyword) return text
+            const reg = new RegExp(keyword, 'gi')
+            return text.replace(reg, match => `<span class="highlight-text">${match}</span>`)
+        },
+
+        // 处理下拉框可见性变化
+        handleVisibleChange(visible) {
+            if (!visible && this.keepSelectOpen && !this.isSearching) {
+                // 只有在非搜索状态下才重新打开下拉框
+                this.$nextTick(() => {
+                    this.$refs.typeSelect.focus()
+                })
+            }
+        },
+
+        // 处理搜索框点击
+        handleSearchClick() {
+            this.isSearching = true
+            this.keepSelectOpen = true
+            // 确保下拉框打开
+            this.$refs.typeSelect.focus()
+            // 立即将焦点返回给搜索框
+            this.$nextTick(() => {
+                this.$refs.searchInput.focus()
+            })
+        },
+
+        // 处理搜索框获得焦点
+        handleSearchFocus() {
+            this.isSearching = true
+            if (!this.$refs.typeSelect.visible) {
+                this.$refs.typeSelect.focus()
+                this.$nextTick(() => {
+                    this.$refs.searchInput.focus()
+                })
+            }
+        },
+
+        // 高亮搜索处理
+        handleHighlightSearch() {
+            this.isSearching = true
+            this.keepSelectOpen = true
+
+            if (!this.searchKeyword) {
+                this.currentMatchIndex = -1
+                this.matchedOptions = []
+                return
+            }
+
+            // 找到所有匹配项
+            this.matchedOptions = this.filteredOptions.filter(item =>
+                item.fullPath.toLowerCase().includes(this.searchKeyword.toLowerCase())
+            )
+
+            if (this.matchedOptions.length > 0) {
+                this.currentMatchIndex = 0
+                this.$nextTick(() => {
+                    this.scrollToMatch()
+                })
+            }
+        },
+
+        // 滚动到匹配项
+        scrollToMatch() {
+            if (this.currentMatchIndex === -1 || !this.matchedOptions.length) return
+
+            const option = this.matchedOptions[this.currentMatchIndex]
+            const selectDom = this.$el.querySelector('.el-select-dropdown__wrap')
+            const optionDom = selectDom?.querySelector(`[data-key="${option.typeId}"]`)
+
+            if (optionDom) {
+                optionDom.scrollIntoView({ block: 'center', behavior: 'smooth' })
+            }
+        },
+
+        // 上一个匹配项
+        handlePrevMatch() {
+            if (this.matchedOptions.length === 0) return
+
+            this.currentMatchIndex =
+                this.currentMatchIndex <= 0 ? this.matchedOptions.length - 1 : this.currentMatchIndex - 1
+
+            this.scrollToMatch()
+        },
+
+        // 下一个匹配项
+        handleNextMatch() {
+            if (this.matchedOptions.length === 0) return
+
+            this.currentMatchIndex =
+                this.currentMatchIndex >= this.matchedOptions.length - 1 ? 0 : this.currentMatchIndex + 1
+
+            this.scrollToMatch()
+        }
     },
+    // 添加组件销毁时的清理
+    beforeDestroy() {
+        this.keepSelectOpen = false
+        this.isSearching = false
+    }
 }
 </script>
-<style lang="scss"> 
+<style lang="scss">
 .form-select {
     .el-cascader-panel .el-scrollbar .el-checkbox {
         display: none;
@@ -1045,4 +1298,75 @@ export default {
         display: block !important;
     }
 }
-</style>
\ No newline at end of file
+
+.custom-tree-node {
+    flex: 1;
+    display: flex;
+    align-items: center;
+    justify-content: space-between;
+    font-size: 14px;
+    padding-right: 8px;
+}
+
+.el-icon-arrow-down.is-reverse {
+    transform: rotateZ(180deg);
+}
+
+.el-tree {
+    max-height: 300px;
+    overflow-y: auto;
+}
+
+.highlight-text {
+    background-color: #ffd04b;
+    color: #000;
+}
+
+::v-deep .el-input-group__append {
+    padding: 0;
+    .el-button {
+        padding: 0 10px;
+        border: none;
+        height: 100%;
+        &:first-child {
+            border-right: 1px solid #dcdfe6;
+        }
+        &[disabled] {
+            color: #c0c4cc;
+        }
+    }
+}
+
+.type-select-dropdown {
+    .el-select-dropdown__wrap {
+        max-height: 400px !important;
+    }
+
+    .el-select-dropdown__item {
+        height: auto;
+        padding: 8px 20px;
+        white-space: normal;
+        word-break: break-all;
+    }
+}
+
+.highlight-text {
+    background-color: #ffd04b;
+    color: #000;
+}
+
+.el-input-group__append {
+    padding: 0;
+    .el-button {
+        padding: 0 10px;
+        border: none;
+        height: 100%;
+        &:first-child {
+            border-right: 1px solid #dcdfe6;
+        }
+        &[disabled] {
+            color: #c0c4cc;
+        }
+    }
+}
+</style>