对接户外媒体数据

src/api/mediaLibrary.js

@@ -135,3 +135,12 @@ export function mediaByMap(query) {
     params: query
   })
 }
+
+// 获取户外媒介媒体分页列表
+export function outMediaPageList(query) {
+  return request({
+    url: '/media/outdoors/pageList',
+    method: 'get',
+    params: query
+  })
+}

src/views/mediaMap/index.vue

@@ -5,8 +5,6 @@
                 <el-col :span="12">
                     <el-form :model="queryParams" ref="queryRef" :inline="true" class="searchInputForm">
                         <el-form-item label="" prop="templateName">
-                            <!-- <el-input v-model="queryParams.keyword" placeholder="请输入媒体名称/媒体编号/关键字" :prefix-icon="Search"
-                                style="width: 400px;" /> -->
                             <el-select class="filterSelect" v-model="queryParams.keyword" filterable remote
                                 reserve-keyword :remote-method="getLocaleListList" :loading="selectLoading"
                                 @change="currentSelect" placeholder="请输入关键字" remote-show-suffix clearable
@@ -338,11 +336,8 @@ const loadMap = () => {
 
             mapInstance.value = new AMap.Map("mapContainer", {
                 resizeEnable: true,
-                // center: [116.397428, 39.90923], // 默认中心点
                 pitch: initialPitch, // 倾斜角度决定2D/3D模式
                 rotation: initialRotation, // 旋转角度
-                // buildingAnimation: true,
-                // expandZoomRange: true,
                 zoom: 16,
                 zooms: [3, 16],
                 viewMode: mapMode.value // 启用3D视图

src/views/outdoorMedia/index.vue

@@ -5,21 +5,21 @@
                 <div class="search-where-container">
                     <el-form :model="queryParams" ref="queryRef" :inline="true" class="searchPanelForm">
                         <el-form-item label="媒体类型:">
-                            <el-select v-model="queryParams.mediaTypeOne" placeholder="请选择" @change="getMediaTypeTwo"
+                            <el-select v-model="queryParams.mediaType" placeholder="请选择" @change="getMediaTypeTwo"
                                 clearable style="min-width: 30px">
                                 <el-option v-for="item in mediaTypeOne" :key="item.id" :label="item.name"
                                     :value="item.id" />
                             </el-select>
                         </el-form-item>
                         <el-form-item label="媒体大类:">
-                            <el-select v-model="queryParams.mediaTypeTwo" placeholder="请选择" @change="getMediaTypeThree"
+                            <el-select v-model="queryParams.mediaCategory" placeholder="请选择" @change="getMediaTypeThree"
                                 clearable style="min-width: 30px">
                                 <el-option v-for="item in mediaTypeTwo" :key="item.id" :label="item.name"
                                     :value="item.id" />
                             </el-select>
                         </el-form-item>
                         <el-form-item label="展示形式:">
-                            <el-select v-model="queryParams.mediaTypeThree" placeholder="请选择" clearable
+                            <el-select v-model="queryParams.displayForm" placeholder="请选择" clearable
                                 style="min-width: 30px">
                                 <el-option v-for="item in mediaTypeThree" :key="item.id" :label="item.name"
                                     :value="item.id" />
@@ -40,33 +40,34 @@
         <div class="searchSmallPanel" v-show="unfoldFlag">
             <el-form :model="queryParams" ref="queryRef" :inline="true" class="searchSmallPanelForm">
                 <el-form-item label="城市:">
-                    <el-select v-model="queryParams.provinceId" placeholder="请选择" @change="getCityList" clearable
+                    <el-select v-model="queryParams.provinceCode" placeholder="请选择" @change="getCityList" clearable
                         style="min-width: 30px">
                         <el-option v-for="item in province" :key="item.id" :label="item.name" :value="item.id" />
                     </el-select>
                 </el-form-item>
                 <el-form-item label="">
-                    <el-select v-model="queryParams.cityId" placeholder="请选择" @change="getCountyList" clearable
+                    <el-select v-model="queryParams.cityCode" placeholder="请选择" @change="getCountyList" clearable
                         style="min-width: 30px">
                         <el-option v-for="item in city" :key="item.id" :label="item.name" :value="item.id" />
                     </el-select>
                 </el-form-item>
                 <el-form-item label="">
-                    <el-select v-model="queryParams.countyId" placeholder="请选择" @change="getTownList" clearable
+                    <el-select v-model="queryParams.areaCode" placeholder="请选择" @change="getTownList" clearable
                         style="min-width: 30px">
                         <el-option v-for="item in county" :key="item.id" :label="item.name" :value="item.id" />
                     </el-select>
                 </el-form-item>
                 <el-form-item label="">
-                    <el-select v-model="queryParams.townId" placeholder="请选择" clearable style="min-width: 30px">
+                    <el-select v-model="queryParams.townCode" placeholder="请选择" @change="getbusinessAreaList" clearable
+                        style="min-width: 30px">
                         <el-option v-for="item in town" :key="item.id" :label="item.name" :value="item.id" />
                     </el-select>
                 </el-form-item>
                 <el-form-item label="商圈:">
-                    <el-select v-model="queryParams.approval_document_status" placeholder="请选择" clearable
+                    <el-select v-model="queryParams.businessDistrictId" placeholder="请选择" clearable
                         style="min-width: 30px;">
-                        <el-option v-for="dict in approval_document_status" :key="dict.value" :label="dict.label"
+                        <el-option v-for="item in businessAreaList" :key="item.id" :label="item.name"
-                            :value="dict.value" />
+                            :value="item.id" />
                     </el-select>
                 </el-form-item>
             </el-form>
@@ -90,7 +91,7 @@
                 <el-col :span="8">
                     <el-form :model="queryParams" ref="queryRef" :inline="true" class="searchInputForm">
                         <el-form-item label="">
-                            <el-input v-model="queryParams.postCode" placeholder="请输入媒体名称/媒体编号" :prefix-icon="Search"
+                            <el-input v-model="queryParams.keyword" placeholder="请输入媒体名称/媒体编号" :prefix-icon="Search"
                                 style="width: 400px;" />
                         </el-form-item>
                     </el-form>
@@ -99,7 +100,7 @@
                     <el-button type="primary" class="primaryBtn" @click="handleQuery">查询</el-button>
                     <el-button type="primary" class="primaryBtn" @click="resetQuery">重置</el-button>
                     <el-button type="primary" class="primaryBtn">PPT批量导出</el-button>
-                    <el-button type="primary" class="primaryBtn">清空所选媒体</el-button>
+                    <el-button type="primary" class="primaryBtn" @click="handleClearChoseMedia">清空所选媒体</el-button>
                 </el-col>
             </el-row>
             <el-row :gutter="10" class="my_row" style="margin-bottom: 0;">
@@ -107,15 +108,17 @@
                     <el-table v-loading="loading" :data="outdoorMediaList" @selection-change="handleSelectionChange"
                         :height="unfoldFlag ? 'calc(100vh - 372px)' : 'calc(100vh - 338px)'">
                         <el-table-column type="selection" width="55" align="center" />
-                        <el-table-column label="实景图片" align="left" prop="mediaName" width="170">
+                        <el-table-column label="实景图片" align="left" prop="mediaFileList" width="170">
                             <template #default="scope">
-                                <img :src="otherbg" fit="fill" style="width: 138px;height: 78px; border-radius: 4px" />
+                                <img v-if="scope.row.mediaFileList.length > 0"
+                                    :src="baseUrl + scope.row.mediaFileList[0].fileName" fit="fill"
+                                    style="width: 138px;height: 78px; border-radius: 4px" />
                             </template>
                         </el-table-column>
                         <el-table-column label="媒体名称" align="left" prop="mediaName" width="150" />
-                        <el-table-column label="商圈" align="left" prop="postCode" width="150" />
+                        <el-table-column label="商圈" align="left" prop="businessDistrictName" width="150" />
-                        <el-table-column label="媒体大类" align="left" prop="postCode" width="150" />
+                        <el-table-column label="媒体大类" align="left" prop="mediaCategoryStr" width="150" />
-                        <el-table-column label="展示形式" align="left" prop="postCode" width="150" />
+                        <el-table-column label="展示形式" align="left" prop="displayFormStr" width="150" />
                         <el-table-column label="操作" width="58" align="center" fixed="right">
                             <template #default="scope">
                                 <el-popover popper-class="my_popover" placement="left-start">
@@ -135,7 +138,7 @@
                     </el-table>
 
                     <pagination :total="total" v-model:page="queryParams.pageNum" v-model:limit="queryParams.pageSize"
-                        @pagination="getList" />
+                        @pagination="getOutMediaPageList" />
                 </el-col>
                 <el-col :span="12">
                     <div id="mapContainer" class="mapContainer"></div>
@@ -149,6 +152,8 @@ import { onMounted, onUnmounted, ref } from 'vue';
 import { Search } from '@element-plus/icons-vue'
 import { sysRegionListByPid } from "@/api/system/administrativeRegion"
 import { sysMediaTypeListByPid } from "@/api/system/mediaType"
+import { busTradingAreaPage } from "@/api/system/businessArea"
+import { outMediaPageList } from "@/api/mediaLibrary"
 import AMapLoader from "@amap/amap-jsapi-loader";  // 引入地图服务
 import optionIcon from '@/assets/images/optionIcon.png'
 import optionIconHover from '@/assets/images/optionIconHover.png'
@@ -157,84 +162,55 @@ import otherbg from '@/assets/images/otherbg.png'
 
 const bgStore = useBackgroundStore()
 const { proxy } = getCurrentInstance()
-const { approval_document_status } = proxy.useDict("approval_document_status")
+const baseUrl = import.meta.env.VITE_APP_BASE_API
 const { apiKey, secretKey } = window._CONFIG
+// 操作图标
+const defaultImageSrc = ref(optionIcon);
+const hoverImageSrc = ref(optionIconHover);
 // 省、市、县、镇数据
 const province = ref([])
 const city = ref([])
 const county = ref([])
 const town = ref([])
+// 商圈信息列表
+const businessAreaList = ref([])
 // 媒体类型数据
 const mediaTypeOne = ref([])
 const mediaTypeTwo = ref([])
 const mediaTypeThree = ref([])
-// 归属选项
+// 媒体多选数据
-const supplierList = ref([])
-// 多选数据
 const multipleChoseArr = ref([])
+// 户外媒体数据
+const outdoorMediaList = ref([])
+// 是否折叠
+const unfoldFlag = ref(false)
 const loading = ref(true)
 const total = ref(0)
 const data = reactive({
     queryParams: {
         pageNum: 1,
         pageSize: 10,
+        keyword: undefined,
+        mediaType: undefined,
+        mediaCategory: undefined,
+        displayForm: undefined,
+        provinceCode: undefined,
+        cityCode: undefined,
+        areaCode: undefined,
+        townCode: undefined,
+        businessDistrictId: undefined
     }
 })
 const { queryParams } = toRefs(data)
-// 操作图标
+// map实例
-const defaultImageSrc = ref(optionIcon);
+const mapInstance = ref(null)
-const hoverImageSrc = ref(optionIconHover);
+const massMarks = ref(null)
-
+// 当前地图模式（2D/3D）
-// 户外媒体数据
+const mapMode = ref('2D')
-const outdoorMediaList = ref([
+// 是否全屏状态
-    { id: 1, mediaName: '遵义市海风井铁路桥', currentImageSrc: defaultImageSrc.value },
+const isFullscreen = ref(false)
-    { id: 2, mediaName: '遵义市海风井铁路桥', currentImageSrc: defaultImageSrc.value },
+// 地图数据点
-    { id: 3, mediaName: '遵义市海风井铁路桥', currentImageSrc: defaultImageSrc.value },
+const points = ref([])
-    { id: 4, mediaName: '遵义市海风井铁路桥', currentImageSrc: defaultImageSrc.value },
-    { id: 5, mediaName: '遵义市海风井铁路桥', currentImageSrc: defaultImageSrc.value },
-    { id: 6, mediaName: '遵义市海风井铁路桥', currentImageSrc: defaultImageSrc.value },
-    { id: 7, mediaName: '遵义市海风井铁路桥', currentImageSrc: defaultImageSrc.value },
-    { id: 8, mediaName: '遵义市海风井铁路桥', currentImageSrc: defaultImageSrc.value },
-    { id: 9, mediaName: '遵义市海风井铁路桥', currentImageSrc: defaultImageSrc.value },
-    { id: 10, mediaName: '遵义市海风井铁路桥', currentImageSrc: defaultImageSrc.value }
-])
-
-// 折叠展开
-const unfoldFlag = ref(false)
-const handleFlod = () => {
-    unfoldFlag.value = !unfoldFlag.value
-}
-
-/** 搜索按钮操作 */
-const handleQuery = () => {
-    queryParams.value.pageNum = 1
-    getList()
-}
-
-/** 重置按钮操作 */
-const resetQuery = () => {
-    proxy.resetForm("queryRef")
-    handleQuery()
-}
-
-// 多选事件
-const handleSelectionChange = (selection) => {
-    multipleChoseArr.value = selection
-}
-// 移除选择项
-const handleCloseTag = (tag) => {
-
-}
-
-// 获取户外媒介列表数据
-const getList = () => {
-    loading.value = false
-    // listPost(proxy.addDateRange(queryParams.value, dateRange.value)).then(response => {
-    //     postList.value = response.rows
-    //     total.value = response.total
-    //     loading.value = false
-    // })
-}
 
 // 获取一级媒体类型
 const getMediaTypeOne = () => {
@@ -271,6 +247,7 @@ const getCityList = (value) => {
         queryParams.value.townId = undefined
         city.value = res.data
     })
+    getbusinessAreaList()
 }
 // 获取区/县数据
 const getCountyList = (value) => {
@@ -279,6 +256,7 @@ const getCountyList = (value) => {
         queryParams.value.townId = undefined
         county.value = res.data
     })
+    getbusinessAreaList()
 }
 // 获取镇数据
 const getTownList = (value) => {
@@ -286,14 +264,79 @@ const getTownList = (value) => {
         queryParams.value.townId = undefined
         town.value = res.data
     })
+    getbusinessAreaList()
 }
-// map实例
+// 依据省市县镇查询商圈
-const mapInstance = ref(null)
+const getbusinessAreaList = (val) => {
-const massMarks = ref(null)
+    const _params = {
-// 当前地图模式（2D/3D）
+        pageIndex: 1,
-const mapMode = ref('2D')
+        pageSize: 200,
-// 是否全屏状态
+        provinceId: queryParams.value.provinceCode,
-const isFullscreen = ref(false)
+        cityId: queryParams.value.cityCode,
+        countyId: queryParams.value.areaCode,
+        townId: queryParams.value.townCode,
+    }
+    busTradingAreaPage(_params).then(res => {
+        if (res.code == 200) {
+            businessAreaList.value = res.data.list
+        }
+    })
+}
+// 折叠展开
+const handleFlod = () => {
+    unfoldFlag.value = !unfoldFlag.value
+}
+// 获取户外媒介列表数据
+const getOutMediaPageList = () => {
+    loading.value = true
+    outMediaPageList(queryParams.value).then(res => {
+        res.data.rows.forEach(element => {
+            element.currentImageSrc = defaultImageSrc.value;
+        });
+        outdoorMediaList.value = res.data.rows
+        total.value = res.data.total
+        loading.value = false
+    })
+}
+/** 搜索按钮操作 */
+const handleQuery = () => {
+    queryParams.value.pageNum = 1
+    getOutMediaPageList()
+}
+/** 重置按钮操作 */
+const resetQuery = () => {
+    queryParams.value = {
+        pageNum: 1,
+        pageSize: 10,
+        keyword: undefined,
+        mediaType: undefined,
+        mediaCategory: undefined,
+        displayForm: undefined,
+        provinceCode: undefined,
+        cityCode: undefined,
+        areaCode: undefined,
+        townCode: undefined,
+        businessDistrictId: undefined
+    }
+    handleQuery()
+}
+// 选择媒体事件
+const handleSelectionChange = (selection) => {
+    multipleChoseArr.value = selection
+}
+// 移除选择项
+const handleCloseTag = (tag) => {
+    const rowIndex = multipleChoseArr.value.findIndex(item => item.id == tag.id)
+    multipleChoseArr.value.splice(rowIndex, 1)
+}
+// 清空已选媒体
+const handleClearChoseMedia = () => {
+    multipleChoseArr.value = []
+}
+
+
+
+
 // 初始化地图 
 const loadMap = () => {
     return new Promise((resolve, reject) => {
@@ -304,7 +347,7 @@ const loadMap = () => {
 
         AMapLoader.load({
             key: apiKey,
-            plugins: [],
+            plugins: ["AMap.PlaceSearch"],
             AMapUI: {
                 plugins: []
             }
@@ -315,18 +358,15 @@ const loadMap = () => {
 
             mapInstance.value = new AMap.Map("mapContainer", {
                 resizeEnable: true,
-                zoom: 14,
-                center: [116.397428, 39.90923],
                 pitch: initialPitch, // 倾斜角度决定2D/3D模式
                 rotation: initialRotation, // 旋转角度
-                buildingAnimation: true,
+                zoom: 16,
-                expandZoomRange: true,
+                zooms: [3, 16],
-                zooms: [3, 20],
                 viewMode: mapMode.value // 启用3D视图
             });
 
-            // 先添加基本控件 
+            // // 先添加基本控件 
-            mapInstance.value.setZoom(14);
+            mapInstance.value.setZoom(16);
 
             // 添加自定义控件容器
             addCustomControls(AMap);
@@ -339,17 +379,29 @@ const loadMap = () => {
             // 监听地图渲染完成事件
             mapInstance.value.on('render', hideAmapLogo);
 
+            // 添加缩放变化监听
+            mapInstance.value.on('zoomchange', handleZoomChange);
+
             // 在地图完全加载后执行点数据处理
             renderMassMarks();
 
             resolve();
-
         }).catch(e => {
             console.log(e, "高德地图加载失败");
             reject(e);
         });
     });
 }
+
+// 处理地图缩放事件
+const handleZoomChange = () => {
+    const currentZoomLevel = mapInstance.value.getZoom();
+    // 如果缩放级别超过16，自动调整回16
+    if (currentZoomLevel > 16) {
+        mapInstance.value.setZoom(16);
+        return;
+    }
+}
 // 添加自定义控件
 const addCustomControls = (AMap) => {
     // 创建控件容器
@@ -372,7 +424,6 @@ const addCustomControls = (AMap) => {
     // 添加到地图容器
     document.getElementById('mapContainer').appendChild(controlContainer);
 }
-
 // 切换2D/3D模式
 const toggle2D3DMode = () => {
     if (!mapInstance.value) return;
@@ -392,8 +443,8 @@ const toggle2D3DMode = () => {
         mapMode.value = '2D';
         loadMap()
     }
-}
 
+}
 // 切换全屏模式
 const toggleFullscreen = () => {
     const mapContainer = document.getElementById('mapContainer');
@@ -420,14 +471,12 @@ const toggleFullscreen = () => {
         }
     }
 }
-
 // 监听全屏变化事件
 document.addEventListener('fullscreenchange', () => {
     if (!document.fullscreenElement) {
         isFullscreen.value = false;
     }
 });
-
 // 创建自定义点样式
 const createPointStyle = (color, size, styleType) => {
     const canvas = document.createElement('canvas');
@@ -504,53 +553,16 @@ const renderMassMarks = () => {
             anchor: new AMap.Pixel(18, 18),
             size: new AMap.Size(18, 18)
         },
-        // {
-        //     url: createPointStyle('#FFA200', 18, 'circle').toDataURL(),
-        //     anchor: new AMap.Pixel(18, 18),
-        //     size: new AMap.Size(18, 18)
-        // },
-        // {
-        //     url: createPointStyle('#00C272', 18, 'circle').toDataURL(),
-        //     anchor: new AMap.Pixel(18, 18),
-        //     size: new AMap.Size(18, 18)
-        // }
     ];
-
+    // 调用接口，获取数据点
-    // 测试数据
+    points.value = []
-    const points = [
+    // outdoorMediaList.value.forEach(itemPoint => {
-        { "lnglat": [116.258446, 37.686622], "name": "景县", "style": 1 },
+    //     if (itemPoint.businessType == 1) points.value.push({ "lnglat": [itemPoint.x, itemPoint.y], "name": itemPoint.mediaId, "style": 0 })
-        { "lnglat": [113.559954, 22.124049], "name": "圣方济各堂区", "style": 1 },
+    //     if (itemPoint.businessType == 2) points.value.push({ "lnglat": [itemPoint.x, itemPoint.y], "name": itemPoint.mediaId, "style": 1 })
-        { "lnglat": [116.366794, 39.915309], "name": "西城区", "style": 1 },
+    // });
-        { "lnglat": [116.486409, 39.921489], "name": "朝阳区", "style": 1 },
+    console.log('points', points.value)
-        { "lnglat": [116.286968, 39.863642], "name": "丰台区", "style": 1 },
-        { "lnglat": [116.195445, 39.914601], "name": "石景山区", "style": 1 },
-        { "lnglat": [116.310316, 39.956074], "name": "海淀区", "style": 1 },
-        { "lnglat": [116.105381, 39.937183], "name": "门头沟区", "style": 0 },
-        { "lnglat": [116.139157, 39.735535], "name": "房山区", "style": 0 },
-        { "lnglat": [116.658603, 39.902486], "name": "通州区", "style": 0 },
-        { "lnglat": [116.653525, 40.128936], "name": "顺义区", "style": 0 },
-        { "lnglat": [116.235906, 40.218085], "name": "昌平区", "style": 0 },
-        { "lnglat": [116.338033, 39.728908], "name": "大兴区", "style": 0 },
-        { "lnglat": [116.637122, 40.324272], "name": "怀柔区", "style": 0 },
-        { "lnglat": [117.112335, 40.144783], "name": "平谷区", "style": 0 },
-        { "lnglat": [116.843352, 40.377362], "name": "密云区", "style": 0 },
-        { "lnglat": [115.985006, 40.465325], "name": "延庆区", "style": 1 },
-        { "lnglat": [113.56925, 22.136546], "name": "路凼填海区", "style": 1 },
-        { "lnglat": [117.195907, 39.118327], "name": "和平区", "style": 1 },
-        { "lnglat": [117.226568, 39.122125], "name": "河东区", "style": 1 },
-        { "lnglat": [117.217536, 39.101897], "name": "河西区", "style": 1 },
-        { "lnglat": [117.164143, 39.120474], "name": "南开区", "style": 1 },
-        { "lnglat": [117.201569, 39.156632], "name": "河北区", "style": 0 },
-        { "lnglat": [117.163301, 39.175066], "name": "红桥区", "style": 1 },
-        { "lnglat": [117.313967, 39.087764], "name": "东丽区", "style": 0 },
-        { "lnglat": [117.012247, 39.139446], "name": "西青区", "style": 0 },
-        { "lnglat": [117.382549, 38.989577], "name": "津南区", "style": 0 },
-        { "lnglat": [117.13482, 39.225555], "name": "北辰区", "style": 0 },
-        { "lnglat": [117.057959, 39.376925], "name": "武清区", "style": 0 },
-        { "lnglat": [116.405285, 39.904989], "name": "北京市", "style": 0 }
-    ]
     // 创建MassMarks对象
-    massMarks.value = new AMap.MassMarks(points, {
+    massMarks.value = new AMap.MassMarks(points.value, {
         opacity: 1,
         zIndex: 111,
         cursor: 'pointer',
@@ -565,7 +577,6 @@ const renderMassMarks = () => {
         console.log('点击了节点', e.data)
     });
 }
-
 // 隐藏Logo的函数
 const hideAmapLogo = () => {
     const logos = document.querySelectorAll('.amap-logo, .amap-copyright');
@@ -577,12 +588,14 @@ const hideAmapLogo = () => {
 }
 
 onUnmounted(() => {
-  mapInstance.value?.destroy()
+    if (mapInstance.value) {
+        mapInstance.value.destroy();
+    }
 })
 // 初始化
 onMounted(() => {
     bgStore.setBgImage(otherbg)
-    getList()
+    getOutMediaPageList()
     getMediaTypeOne()
     getProvinceList()
     loadMap()

src/views/system/dept/index.vue

@@ -86,7 +86,12 @@
                </el-col>
                <el-col :span="12">
                   <el-form-item label="负责人" prop="leaderId">
-                     <!-- <el-input v-model="form.leader" placeholder="请输入负责人" maxlength="20" /> -->
+                     <el-select class="filterSelect" v-model="form.leaderId" @change="handleChoseLeader" filterable
+                        remote reserve-keyword :remote-method="getLeaderList" :loading="selectLoading"
+                        placeholder="请输入负责人" remote-show-suffix clearable style="min-width: 70px;">
+                        <el-option v-for="item in leaderList" :key="item.userId" :label="item.realName"
+                           :value="item.userId" />
+                     </el-select>
                   </el-form-item>
                </el-col>
                <el-col :span="12">
@@ -131,6 +136,7 @@
 import { onMounted, ref } from 'vue';
 import { Search } from '@element-plus/icons-vue'
 import { listDept, getDept, delDept, addDept, updateDept, listDeptExcludeChild } from "@/api/system/dept"
+import { listUser, getUser } from "@/api/system/user"
 import { useBackgroundStore } from '@/store/modules/background'
 import otherbg from '@/assets/images/otherbg.png'
 const bgStore = useBackgroundStore()
@@ -138,6 +144,8 @@ const bgStore = useBackgroundStore()
 const { proxy } = getCurrentInstance()
 const { sys_normal_disable } = proxy.useDict("sys_normal_disable")
 
+const leaderList = ref([])
+const selectLoading = ref(false)
 const deptList = ref([])
 const open = ref(false)
 const loading = ref(true)
@@ -173,6 +181,27 @@ function getList() {
    })
 }
 
+// 查询负责人
+const getLeaderList = (queryText) => {
+   if (queryText) {
+      selectLoading.value = true
+      listUser({ realName: queryText }).then(res => {
+         leaderList.value = res.rows
+         selectLoading.value = false
+      })
+   } else {
+      selectLoading.value = false
+      leaderList.value = []
+   }
+}
+const handleChoseLeader = (val) => {
+   const choseUser = leaderList.value.filter(item => item.userId == val)[0]
+   form.value.leaderId = choseUser?.userId
+   form.value.leader = choseUser?.realName
+   form.value.phone = choseUser?.phonenumber
+   form.value.email = choseUser?.email
+}
+
 /** 取消按钮 */
 function cancel() {
    open.value = false
@@ -230,7 +259,13 @@ function toggleExpandAll() {
       refreshTable.value = true
    })
 }
-
+const getUserInfo = () => {
+   getUser(form.value.leaderId).then(res => { 
+      leaderList.value = [
+         { userId: res.data.userId, realName: res.data.realName }
+      ]
+   })
+}
 /** 修改按钮操作 */
 function handleUpdate(row) {
    reset()
@@ -239,6 +274,7 @@ function handleUpdate(row) {
    })
    getDept(row.deptId).then(response => {
       form.value = response.data
+      if (form.value.leaderId) getUserInfo()
       open.value = true
       title.value = "修改部门"
    })