代码初始化

src/views/components/selectPanle/lightPoleSelect.vue

@@ -0,0 +1,197 @@
+<template>
+  <el-input v-model="selectName" placeholder="请选择灯杆" readonly>
+    <template #append>
+      <el-button icon="Search" @click="openSelectPanel()">
+        <el-dialog v-model="dialogVisible" @close="close" title="灯杆选择" append-to-body>
+          <el-form :model="queryParams" ref="queryRef" :inline="true">
+            <el-form-item label="层级名称" prop="buildingId">
+              <el-tree-select
+                v-model="queryParams.buildingId"
+                :data="buildingOptions"
+                :props="{ value: 'id', label: 'label', children: 'children' }"
+                value-key="id"
+                placeholder="请选择所属层级"
+                ref="addBuildingTreeRef"
+                @node-click="handleAddNodeClick"
+                check-strictly
+                clearable
+                @change="getList"
+              />
+            </el-form-item>
+            <el-form-item label="灯杆名称" prop="name">
+              <el-input v-model="queryParams.name" placeholder="请输入灯杆名称" clearable @keyup.enter="handleQuery" @change="getList" @clear="clearInput" />
+            </el-form-item>
+            <el-form-item label="灯杆类型" prop="poleTypeId">
+              <el-select placeholder="请选择灯杆类型" v-model="queryParams.poleTypeId" @change="getList" clearable @keyup.enter="handleQuery">
+                <el-option v-for="poleType in poleTypeList" :key="poleType.id" :label="poleType.name" :value="poleType.id" />
+              </el-select>
+            </el-form-item>
+          </el-form>
+          <el-table v-loading="loading" :data="tableData">
+            <el-table-column label="" align="center" width="55">
+              <template #default="scope">
+                <el-checkbox v-model="scope.row.isSelect" @change="selectHandler(scope)"></el-checkbox>
+              </template>
+            </el-table-column>
+            <el-table-column label="灯杆名称" align="center" prop="name" />
+            <el-table-column label="灯杆类型" align="center" prop="poleTypeName" />
+            <el-table-column label="灯杆编号" align="center" prop="code" />
+            <el-table-column label="规格（米）" align="center" prop="specification" />
+            <el-table-column label="层级名称" align="center" prop="buildingName" />
+          </el-table>
+          <el-pagination small background layout="total, prev, pager, next" :total="total" @current-change="handleCurrentChange" />
+          <template #footer>
+            <span class="dialog-footer">
+              <div class="search-btn-con">
+                <el-button @click="close">取消</el-button>
+                <el-button type="primary" @click="selectSubmit">确定 </el-button>
+              </div>
+            </span>
+          </template>
+        </el-dialog>
+      </el-button>
+    </template>
+  </el-input>
+</template>
+<script setup>
+import { listLightPole } from '@/api/light/lightPole'
+import { buildingTree } from '@/api/building/buildingInfo'
+import { listPoleType } from '@/api/light/poleType'
+const props = defineProps({
+  id: {
+    type: String,
+    deafult: ''
+  },
+  name: {
+    type: String,
+    deafult: ''
+  }
+})
+// eslint-disable-next-line no-unused-vars
+const { proxy } = getCurrentInstance()
+const poleTypeList = ref([])
+const emit = defineEmits(['update:id', 'update:name'])
+const queryParams = ref({ buildingId: '', name: '', poleTypeId: '', pageNum: 1, pageSize: 10 })
+const queryPoleTypeParams = ref({ pageNum: 1, pageSize: 1000 })
+const dialogVisible = ref(false)
+const tableData = ref([])
+const total = ref(0)
+const loading = ref(false)
+const selectVal = ref({})
+const selectName = ref('')
+const buildingOptions = ref(undefined)
+
+getBuildingTree()
+
+function handleAddNodeClick(data) {
+  queryParams.value.buildingName = data.label
+}
+
+function getBuildingTree() {
+  buildingTree().then((response) => {
+    buildingOptions.value = response.data
+  })
+}
+watch(
+  () => props.id,
+  (val) => {
+    selectVal.value = {}
+    selectName.value = ''
+    // eslint-disable-next-line array-callback-return
+    tableData.value.map((item) => {
+      if (item.id === val) {
+        selectVal.value = item
+        selectName.value = item.name
+      }
+    })
+  },
+  { immediate: true }
+)
+// 打开弹窗
+const openSelectPanel = () => {
+  dialogVisible.value = true
+  getList()
+}
+const close = () => {
+  dialogVisible.value = false
+}
+// 灯杆名称清除
+const clearInput = (val) => {
+  queryParams.value.name = ''
+  getList()
+}
+// 查询当前灯杆
+const getCurrentList = () => {
+  if (props.name) {
+    queryParams.value.name = props.name
+    getList()
+  }
+}
+// 获取列表
+const getList = () => {
+  loading.value = true
+  queryParams.value.buildingName = queryParams.value.buildingId === '' ? '' : queryParams.value.buildingName
+  listLightPole(queryParams.value).then((res) => {
+    res.rows.forEach((item) => {
+      item.isSelect = false
+      if (item.id === props.id) {
+        selectVal.value = item
+        selectName.value = item.name
+        item.isSelect = true
+      }
+    })
+    tableData.value = res.rows
+    total.value = res.total
+    loading.value = false
+  })
+}
+// 分页
+const handleCurrentChange = (val) => {
+  queryParams.value.pageNum = val
+  getList()
+}
+// 选择
+const selectHandler = (scope) => {
+  if (scope.row.isSelect) {
+    // eslint-disable-next-line array-callback-return
+    tableData.value.map((item) => {
+      if (item.id === scope.row.id) {
+        item.isSelect = true
+      } else {
+        item.isSelect = false
+      }
+    })
+    selectVal.value = scope.row
+  } else {
+    // eslint-disable-next-line array-callback-return
+    tableData.value.map((item) => {
+      item.isSelect = false
+    })
+    selectVal.value = {}
+  }
+}
+// 提交选项
+const selectSubmit = () => {
+  emit('update:id', selectVal.value.id)
+  emit('update:name', selectVal.value.name)
+  selectName.value = selectVal.value.name
+  close()
+}
+/** 查询灯杆类型管理列表 */
+function getPoleTypeList() {
+  listPoleType(queryPoleTypeParams.value).then((response) => {
+    poleTypeList.value = response.rows
+  })
+}
+getPoleTypeList()
+getList()
+getCurrentList()
+defineExpose({
+  resectSelectVal() {
+    selectVal.value = {}
+    selectName.value = ''
+    getList()
+  }
+})
+</script>
+<style></style>