intc-iot-web/src/views/components/selectPanle/lightPoleSelect.vue

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