Merge branch 'table_head' of shuzhihua/pms-iot-vue into master

src/views/pms/device/index.vue

@@ -192,10 +192,15 @@
                 style="display: inline-block"
                 class="text-[#ad9399] w-[70px] text-[12px] cursor-pointer z-[999] justify-center flex items-center"
               >
-                <el-popover placement="bottom" :width="250" trigger="hover">
+                <el-popover placement="bottom" :width="250" trigger="click">
                   <template #reference>
-                    <div class="flex items-center">
-                      <span> 油服编码 </span> <Icon icon="ep:arrow-down" />
+                    <div class="flex items-center" @click.stop>
+                      <span> 油服编码 </span>
+                      <Icon
+                        icon="ep:arrow-down"
+                        class="ml-1 cursor-pointer text-[#ad9399]"
+                        @click.stop
+                      />
                     </div>
                   </template>
                   <div class="flex items-center gap-2">
@@ -225,9 +230,9 @@
                 style="display: inline-block"
                 class="text-[#ad9399] w-[70px] text-[12px] cursor-pointer z-[999] justify-center flex items-center"
               >
-                <el-popover placement="bottom" :width="250" trigger="hover">
+                <el-popover placement="bottom" :width="250" trigger="click">
                   <template #reference>
-                    <div class="flex items-center">
+                    <div class="flex items-center" @click.stop>
                       <span> 历史编码 </span> <Icon icon="ep:arrow-down" />
                     </div>
                   </template>
@@ -258,9 +263,9 @@
                 style="display: inline-block"
                 class="text-[#ad9399] w-[70px] text-[12px] cursor-pointer z-[999] justify-center flex items-center"
               >
-                <el-popover placement="bottom" :width="250" trigger="hover">
+                <el-popover placement="bottom" :width="250" trigger="click">
                   <template #reference>
-                    <div class="flex items-center">
+                    <div class="flex items-center" @click.stop>
                       <span> 设备名称 </span> <Icon icon="ep:arrow-down" />
                     </div>
                   </template>
@@ -284,13 +289,67 @@
               </el-link>
             </template>
           </el-table-column>
-          <el-table-column label="设备号" sortable align="center" prop="deviceNo" width="120" />
+          <el-table-column label="设备号" sortable align="center" prop="deviceNo" width="120">
+            <template #header>
+              <span
+                style="display: inline-block"
+                class="text-[#ad9399] w-[70px] text-[12px] cursor-pointer z-[999] justify-center flex items-center"
+              >
+                <el-popover placement="bottom" :width="250" trigger="click">
+                  <template #reference>
+                    <div class="flex items-center" @click.stop>
+                      <span> 设备号 </span> <Icon icon="ep:arrow-down" />
+                    </div>
+                  </template>
+                  <div class="flex items-center gap-2">
+                    <el-input
+                      v-model="queryParams.deviceNo"
+                      placeholder="请输入设备号"
+                      style="width: 180px"
+                      clearable
+                      @keyup.enter="handleQuery"
+                    />
+                    <el-button type="primary" :icon="Search" @click="handleQuery">搜索</el-button>
+                  </div>
+                </el-popover>
+              </span>
+            </template>
+          </el-table-column>
           <el-table-column
             :label="t('iotDevice.dept')"
             align="center"
             prop="deptName"
             min-width="150"
-          />
+          >
+            <template #header>
+              <span
+                style="display: inline-block"
+                class="text-[#ad9399] w-[70px] text-[12px] cursor-pointer z-[999] justify-center flex items-center"
+              >
+                <el-popover placement="bottom" :width="250" trigger="click">
+                  <template #reference>
+                    <div class="flex items-center" @click.stop>
+                      <span> {{ t('iotDevice.dept') }} </span> <Icon icon="ep:arrow-down" />
+                    </div>
+                  </template>
+                  <div class="flex items-center gap-2">
+                    <el-tree-select
+                      :teleported="false"
+                      v-model="queryParams.deptId"
+                      :data="deptList"
+                      :props="defaultProps"
+                      check-strictly
+                      node-key="id"
+                      filterable
+                      placeholder="请选择所在部门"
+                      @change="handleQuery"
+                      style="width: 200px"
+                    />
+                  </div>
+                </el-popover>
+              </span>
+            </template>
+          </el-table-column>
           <el-table-column
             :label="t('iotDevice.status')"
             align="center"
@@ -354,47 +413,222 @@
             align="center"
             prop="assetClassName"
             min-width="170"
-          />
+          >
+            <template #header>
+              <span
+                style="display: inline-block"
+                class="text-[#ad9399] w-[70px] text-[12px] cursor-pointer z-[999] justify-center flex items-center"
+              >
+                <el-popover placement="bottom" :width="250" trigger="click">
+                  <template #reference>
+                    <div class="flex items-center" @click.stop>
+                      <span> {{ t('iotDevice.assetClass') }} </span> <Icon icon="ep:arrow-down" />
+                    </div>
+                  </template>
+                  <div class="flex items-center gap-2">
+                    <el-input
+                      v-model="queryParams.assetClassName"
+                      placeholder="请输入资产类别"
+                      style="width: 180px"
+                      clearable
+                    />
+                    <el-button type="primary" :icon="Search" @click="handleQuery">搜索</el-button>
+                  </div>
+                </el-popover>
+              </span>
+            </template>
+          </el-table-column>
 
-          <el-table-column label="车牌号" align="center" prop="carNo" min-width="170" />
+          <el-table-column label="车牌号" align="center" prop="carNo" min-width="170">
+            <template #header>
+              <el-popover placement="bottom" :width="250" trigger="click">
+                <template #reference>
+                  <div class="flex items-center" @click.stop>
+                    <span> 车牌号 </span> <Icon icon="ep:arrow-down" />
+                  </div>
+                </template>
+                <div class="flex items-center gap-2">
+                  <el-input
+                    v-model="queryParams.carNo"
+                    placeholder="请输入车牌号"
+                    style="width: 180px"
+                    clearable
+                  />
+                  <el-button type="primary" :icon="Search" @click="handleQuery">搜索</el-button>
+                </div>
+              </el-popover>
+            </template>
+          </el-table-column>
 
-          <el-table-column
-            :label="t('deviceForm.mfg')"
-            align="center"
-            prop="manufacturer"
-            min-width="200"
-          />
+          <el-table-column align="center" prop="manufacturer" min-width="200">
+            <template #header>
+              <el-popover placement="bottom" :width="250" trigger="click">
+                <template #reference>
+                  <div class="flex items-center" @click.stop>
+                    <span>
+                      {{ t('deviceForm.mfg') }}
+                    </span>
+                    <Icon icon="ep:arrow-down" />
+                  </div>
+                </template>
+                <div class="flex items-center gap-2">
+                  <el-input
+                    v-model="queryParams.manufacturer"
+                    placeholder="请输入制造商"
+                    style="width: 180px"
+                    clearable
+                  />
+                  <el-button type="primary" :icon="Search" @click="handleQuery">搜索</el-button>
+                </div>
+              </el-popover>
+            </template>
+          </el-table-column>
           <el-table-column
             :label="t('deviceForm.brand')"
             align="center"
             prop="brandName"
             min-width="150"
-          />
+          >
+            <template #header>
+              <el-popover placement="bottom" :width="250" trigger="click">
+                <template #reference>
+                  <div class="flex items-center" @click.stop>
+                    <span> {{ t('deviceForm.brand') }} </span> <Icon icon="ep:arrow-down" />
+                  </div>
+                </template>
+                <div class="flex items-center gap-2">
+                  <el-input
+                    v-model="queryParams.brandName"
+                    placeholder="请输入品牌"
+                    style="width: 180px"
+                    clearable
+                  />
+                  <el-button type="primary" :icon="Search" @click="handleQuery">搜索</el-button>
+                </div>
+              </el-popover>
+            </template>
+          </el-table-column>
           <el-table-column
             :label="t('deviceForm.model')"
             align="center"
             prop="model"
             min-width="170"
-          />
+          >
+            <template #header>
+              <el-popover placement="bottom" :width="250" trigger="click">
+                <template #reference>
+                  <div class="flex items-center" @click.stop>
+                    <span> {{ t('deviceForm.model') }} </span> <Icon icon="ep:arrow-down" />
+                  </div>
+                </template>
+                <div class="flex items-center gap-2">
+                  <el-input
+                    v-model="queryParams.model"
+                    placeholder="请输入规格型号"
+                    style="width: 180px"
+                    clearable
+                  />
+                  <el-button type="primary" :icon="Search" @click="handleQuery">搜索</el-button>
+                </div>
+              </el-popover>
+            </template>
+          </el-table-column>
           <el-table-column
             :label="t('devicePerson.rp')"
             align="center"
             prop="chargeName"
             min-width="170"
-          />
+          >
+            <template #header>
+              <el-popover placement="bottom" :width="250" trigger="click">
+                <template #reference>
+                  <div class="flex items-center" @click.stop>
+                    <span> {{ t('devicePerson.rp') }} </span> <Icon icon="ep:arrow-down" />
+                  </div>
+                </template>
+                <div class="flex items-center gap-2">
+                  <el-input
+                    v-model="queryParams.chargeName"
+                    placeholder="请输入责任人"
+                    style="width: 180px"
+                    clearable
+                  />
+                  <el-button type="primary" :icon="Search" @click="handleQuery">搜索</el-button>
+                </div>
+              </el-popover>
+            </template>
+          </el-table-column>
           <el-table-column
             :label="t('deviceForm.useProject')"
             align="center"
             prop="useProject"
             min-width="170"
-          />
+          >
+            <template #header>
+              <el-popover placement="bottom" :width="250" trigger="click">
+                <template #reference>
+                  <div class="flex items-center">
+                    <span> {{ t('deviceForm.useProject') }} </span> <Icon icon="ep:arrow-down" />
+                  </div>
+                </template>
+                <div class="flex items-center gap-2">
+                  <el-input
+                    v-model="queryParams.useProject"
+                    placeholder="请输入使用项目"
+                    style="width: 180px"
+                    clearable
+                  />
+                  <el-button type="primary" :icon="Search" @click="handleQuery">搜索</el-button>
+                </div>
+              </el-popover>
+            </template>
+          </el-table-column>
           <el-table-column
             :label="t('deviceForm.assetOwner')"
             align="center"
             prop="assetOwnership"
             min-width="170"
-          />
-          <el-table-column label="所在地点" align="center" prop="address" min-width="170" />
+          >
+            <template #header>
+              <el-popover placement="bottom" :width="250" trigger="click">
+                <template #reference>
+                  <div class="flex items-center">
+                    <span> {{ t('deviceForm.assetOwner') }} </span> <Icon icon="ep:arrow-down" />
+                  </div>
+                </template>
+                <div class="flex items-center gap-2">
+                  <el-input
+                    v-model="queryParams.assetOwnership"
+                    placeholder="请输入资产归属"
+                    style="width: 180px"
+                    clearable
+                  />
+                  <el-button type="primary" :icon="Search" @click="handleQuery">搜索</el-button>
+                </div>
+              </el-popover>
+            </template>
+          </el-table-column>
+          <el-table-column label="所在地点" align="center" prop="address" min-width="170">
+            <template #header>
+              <el-popover placement="bottom" :width="250" trigger="click">
+                <template #reference>
+                  <div class="table-header-flex">
+                    <span>所在地点</span>
+                    <Icon icon="ep:arrow-down" @click.stop />
+                  </div>
+                </template>
+                <div class="flex items-center gap-2">
+                  <el-input
+                    v-model="queryParams.address"
+                    placeholder="请输入所在地点"
+                    style="width: 180px"
+                    clearable
+                  />
+                  <el-button type="primary" :icon="Search" @click="handleQuery">搜索</el-button>
+                </div>
+              </el-popover>
+            </template>
+          </el-table-column>
           <el-table-column
             :label="t('operationFill.operation')"
             align="center"
@@ -449,6 +683,7 @@ import { defaultProps, handleTree } from '@/utils/tree'
 import * as ProductClassifyApi from '@/api/pms/productclassify'
 import { useRefreshStore } from '@/store/modules/pms/refreshStore'
 import { Search } from '@element-plus/icons-vue'
+import * as DeptApi from '@/api/system/dept'
 
 /** 设备台账 列表 */
 defineOptions({ name: 'IotDevicePms' })
@@ -456,6 +691,7 @@ defineOptions({ name: 'IotDevicePms' })
 const message = useMessage() // 消息弹窗
 const { t } = useI18n() // 国际化
 const { push } = useRouter() // 路由跳转
+const deptList = ref<Tree[]>([]) // 树形结构
 
 const refreshStore = useRefreshStore()
 const loading = ref(true) // 列表的加载中
@@ -467,6 +703,9 @@ const total = ref(0) // 列表的总页数
 const queryParams = reactive({
   pageNo: 1,
   pageSize: 10,
+  useProject: undefined,
+  assetOwnership: undefined,
+  address: undefined,
   deviceCode: undefined,
   deviceName: undefined,
   brand: undefined,
@@ -501,7 +740,9 @@ const queryParams = reactive({
   yfDeviceCode: undefined,
   carNo: undefined,
   deviceNo: undefined,
-  assetClassName: undefined
+  assetClassName: undefined,
+  manufacturer: undefined,
+  chargeName: undefined
 })
 const queryFormRef = ref() // 搜索的表单
 const exportLoading = ref(false) // 导出的加载中
@@ -561,6 +802,12 @@ const moreQuery = (show) => {
 }
 /** 重置按钮操作 */
 const resetQuery = () => {
+  queryParams.chargeName = undefined
+  queryParams.address = undefined
+  queryParams.manufacturer = undefined
+  queryParams.useProject = undefined
+  queryParams.model = undefined
+  queryParams.assetOwnership = undefined
   queryFormRef.value.resetFields()
   handleQuery()
 }
@@ -629,6 +876,8 @@ onMounted(async () => {
   queryParams.sortingFields.push(sort)
   await getList()
   refreshStore.registerCallback('devicerouter', getList)
+
+  deptList.value = handleTree(await DeptApi.getSimpleDeptList())
 })
 </script>
 <style scoped scss>
@@ -643,4 +892,61 @@ onMounted(async () => {
   border: none !important;
   outline: none !important;
 }
+
+::v-deep .el-table__header-wrapper {
+  position: sticky !important;
+  width: 100%;
+  top: 0px;
+  z-index: 2000;
+}
+
+::v-deep .el-tooltip__trigger {
+  border: none !important;
+  outline: none !important;
+}
+
+/* 表头对齐样式 */
+.table-header-flex {
+  display: flex !important;
+  align-items: center !important;
+  justify-content: center !important;
+  height: 100% !important;
+  width: 100% !important;
+  padding: 0 !important;
+}
+
+.table-header-text {
+  flex: 1;
+  text-align: center;
+  font-size: 12px;
+  color: #606266;
+}
+
+.header-arrow-icon {
+  margin-left: 4px;
+  cursor: pointer;
+  color: #ad9399;
+  font-size: 12px;
+}
+
+.popover-content-flex {
+  display: flex;
+  align-items: center;
+  gap: 8px;
+}
+
+/* 修复单元格对齐 */
+::v-deep .el-table th,
+::v-deep .el-table td {
+  padding: 6px 0 !important;
+}
+
+::v-deep .el-table th .cell,
+::v-deep .el-table td .cell {
+  display: flex;
+  align-items: center;
+  justify-content: center;
+  height: 100%;
+  padding: 0 8px;
+}
 </style>