pms-iot-vue/src/views/pms/device/BomInfo.vue

<template>
  <div class="container-tree" ref="container">
    <el-row>
      <div class="left-tree" :style="{ width: leftWidth + 'px' }">
        <ContentWrapNoBottom>
          <BomTree @node-click="handleFileNodeClick" @success="successList" :deviceId="id" />
        </ContentWrapNoBottom>
      </div>
      <div class="divider-tree" @mousedown="startDrag"></div>
      <div class="right-tree" :style="{ width: rightWidth + 'px' }">
        <ContentWrap>
          <el-form
            class="-mb-15px"
            :model="queryParams"
            ref="queryFormRef"
            :inline="true"
            label-width="68px"
          >
            <el-form-item label="物料名称" prop="name">
              <el-input
                v-model="queryParams.name"
                placeholder="请输入物料名称"
                clearable
                @keyup.enter="handleQuery"
                class="!w-240px"
              />
            </el-form-item>
            <el-form-item>
              <el-button @click="handleQuery"><Icon icon="ep:search" />搜索</el-button>
              <el-button @click="resetQuery"><Icon icon="ep:refresh" />重置</el-button>
            </el-form-item>
          </el-form>
        </ContentWrap>
        <ContentWrap>
          <el-table
            v-loading="formLoading"
            :data="list"
            :stripe="true"
            :show-overflow-tooltip="true"
          >
            <el-table-column label="物料编码" align="center" prop="code" />
            <el-table-column label="物料名称" align="center" prop="name" />
            <el-table-column label="规格型号" align="center" prop="model" />
            <el-table-column label="单位" align="center" prop="unit" />
            <el-table-column label="备注" align="center" prop="remark" />
            <el-table-column
              label="创建时间"
              align="center"
              prop="createTime"
              :formatter="dateFormatter"
              width="180px"
            />
          </el-table>
          <Pagination
            :total="total"
            v-model:page="queryParams.pageNo"
            v-model:limit="queryParams.pageSize"
            @pagination="getList"
          />
        </ContentWrap> </div
    ></el-row>
  </div>
  <IotInfoForm
    ref="formRef"
    @success="getList"
    :deviceId="deviceId"
    :classId="queryParams.classId"
  />
</template>
<script lang="ts" setup>
import { IotDeviceVO } from '@/api/pms/device'
import { dateFormatter } from '@/utils/formatTime'
import IotInfoForm from '@/views/pms/iotinfo/IotInfoForm.vue'
import { onMounted, ref } from 'vue'
import BomTree from '@/views/pms/device/BomTree.vue'
import * as PmsMaterialApi from '@/api/pms/material'

defineOptions({ name: 'DeviceUpload' })
const queryFormRef = ref() // 搜索的表单
const { t } = useI18n() // 国际化
const message = useMessage() // 消息弹窗
const loading = ref(true) // 列表的加载中
const { params } = useRoute() // 查询参数
const formLoading = ref(false) // 表单的加载中：1）修改时的数据加载；2）提交的按钮禁用
const list = ref<IotDeviceVO[]>([]) // 列表的数据
const total = ref(0) // 列表的总页数
const id = params.id as unknown as number
const container = ref(null)
const leftWidth = ref(350) // 初始左侧宽度
const rightWidth = ref(window.innerWidth * 0.69)
let isDragging = false
const startDrag = (e) => {
  isDragging = true
  document.addEventListener('mousemove', onDrag)
  document.addEventListener('mouseup', stopDrag)
}

const onDrag = (e) => {
  if (!isDragging) return

  const containerRect = container.value.getBoundingClientRect()
  const newWidth = e.clientX - containerRect.left

  // 设置最小和最大宽度限制
  if (newWidth > 300 && newWidth < containerRect.width - 100) {
    leftWidth.value = newWidth
  }
}

const stopDrag = () => {
  isDragging = false
  document.removeEventListener('mousemove', onDrag)
  document.removeEventListener('mouseup', stopDrag)
}

const queryParams = reactive({
  pageNo: 1,
  pageSize: 10,
  createTime: [],
  deviceId: null,
  bomId: null,
  name: null
})
const formRef = ref()
const deviceId = ref('')
const handleFileNodeClick = async (row) => {
  queryParams.bomId = row.id
  await getList()
}
/** 查询列表 */
const getList = async () => {
  formLoading.value = true
  try {
    // queryParams.deviceId = deviceId.value
    const data = await PmsMaterialApi.listByBomId(queryParams)
    list.value = data.list
    total.value = data.total
  } finally {
    formLoading.value = false
  }
}
const successList = async (id) => {
  queryParams.bomId = id
  await getList()
}
/** 搜索按钮操作 */
const handleQuery = () => {
  queryParams.pageNo = 1
  getList()
}

/** 重置按钮操作 */
const resetQuery = () => {
  queryFormRef.value?.resetFields()
  handleQuery()
}
/** 初始化 */
onMounted(async () => {
  // await getDetail()
  // await getList()
  deviceId.value = params.id as unknown as number
})
</script>
<style scoped>
.container-tree {
  display: flex;
  height: 100%;
  user-select: none; /* 防止拖动时选中文本 */
}

.left-tree {
  background: #f0f0f0;
  height: 100%;
  overflow: auto;
}

.right-tree {
  flex: 1;
  background: #fff;
  height: 100%;
  overflow: auto;
  margin-left: 5px;
}

.divider-tree {
  width: 2px;
  background: #ccc;
  cursor: col-resize;
  position: relative;
}

.divider-tree:hover {
  background: #666;
}
</style>