tall4-pc/src/views/device-list.vue

<template>
  <SearchBar />

  <template v-if="devicesAll && devicesAll.data">
    <el-table :data="devicesAll.data" style="width: 100%" :style="{ 'max-height': contentHeight + 'px' }">
      <el-table-column type="expand">
        <template #default="props">
          <el-row :gutter="20" class="px-6 text-gray-400">
            <el-col :span="9">链路地址：{{ props.row.linkAddress }}</el-col>
            <el-col :span="9">探头编号：{{ props.row.probNo }}</el-col>
            <el-col :span="9">设备朝向：{{ props.row.deviceDirection }}</el-col>
            <el-col :span="9">试样：{{ props.row.simple }}</el-col>
            <el-col :span="9">安装位置：{{ props.row.installLocation }}</el-col>
            <el-col :span="9">sim1：{{ props.row.sim1 }}</el-col>
            <el-col :span="18">与主站后台联调情况：{{ props.row.joint }}</el-col>
            <el-col :span="18">备注：{{ props.row.remark }}</el-col>
          </el-row>
        </template>
      </el-table-column>
      <el-table-column label="ID" prop="deviceId" width="100" />
      <el-table-column label="完整ID" prop="deviceFullId" width="150" />
      <el-table-column label="地点" prop="address" width="150" />
      <el-table-column label="地区" prop="area" width="120" />
      <el-table-column label="联系人" prop="contact" width="100" />
      <el-table-column label="联系电话" prop="phone" width="150" />
      <el-table-column label="安装时间" prop="installTime" width="200" />
      <el-table-column label="正式运行时间" prop="runTime" width="200" />
      <el-table-column fixed="right" label="操作" width="148">
        <template #default="props">
          <el-popconfirm title="确定要删除此设备吗?" @confirm="handleDelete">
            <template #reference>
              <el-button type="danger" plain size="mini">删除</el-button>
            </template>
          </el-popconfirm>

          <el-button type="primary" plain size="mini" @click="handleEdit(props.row)">编辑</el-button>
        </template>
      </el-table-column>
    </el-table>

    <el-pagination
      background
      :current-page="devicesAll.page.page"
      :page-size="devicesAll.page.size"
      :default-page-size="10"
      :page-count="devicesAll.page.total"
      class="my-3 float-right"
      @size-change="onSizeChange"
      @current-change="onCurrentPageChange"
      @prev-click="onPrev"
      @next-click="onNext"
    ></el-pagination>
  </template>

  <!-- 编辑设备信息 -->
  <DeviceEdit :show="editting" @toggle-mdoal="editting = false" />
</template>

<script setup>
import { computed, onMounted, ref } from 'vue';
import { useStore } from 'vuex';
import SearchBar from 'components/search-bar.vue';
import DeviceEdit from 'components/device-edit.vue';

let timer = null;
const store = useStore();
const token = computed(() => store.getters['user/token']);
const devicesAll = computed(() => store.state.device.devicesAll);
let contentHeight = 600;
const editting = ref(false);

// 获取设备完整信息列表
const getDevicesAllData = () => {
  if (token) {
    store.dispatch('device/getDevicesAll');
    timer && clearTimeout(timer);
    timer = null;
  } else {
    timer = setTimeout(() => {
      getDevicesAllData();
    });
  }
};

getDevicesAllData();

// 设置表格高度
onMounted(() => {
  const winHeight = document.documentElement.clientHeight;
  contentHeight = winHeight - 150;
});

// 当前页码变化
const onCurrentPageChange = e => {
  console.log(e);
};

// 每页条数变化
const onSizeChange = e => {
  console.log(e);
};

// 下一页
const onNext = e => {
  console.log(e);
};

// 上一页
const onPrev = e => {
  console.log(e);
};

// 删除设备
const handleDelete = () => {
  console.log('delete');
};

// 编辑设备信息
const handleEdit = item => {
  store.commit('device/setCurrentDeviceId', item.deviceId);
  editting.value = true;
};
</script>