内容提交

whychdw

2024-10-14 9a3d84b683030eb05537078661025e2fb3288b40

 src/views/device/key/index.vue

@@ -1,15 +1,191 @@
<script lang="ts">
import { defineComponent } from 'vue';
import HdwCard from '@/components/HdwCard/index.vue';

export default defineComponent({
  name: 'KeyManage'
  name: 'KeyManage',
  components: { HdwCard },
  data() {
    return {
      tableData: [
        {
          type: '蓝牙',
          keyName: '测试1',
          keyNumber: '--369078',
          userName: '源畅科技',
          bluetoothAddr: '',
          createTime: '2024-08-14 17:01:56'
        }
      ],
      filter: {
        keyName: '',
        userName: ''
      },
      page: {
        currentPage: 1,
        pageSize: 20,
        total: 0
      }
    };
  },
  methods: {

  }
});
</script>

<script lang="ts" setup>
import {
  Search,
  Plus
} from '@element-plus/icons-vue';
import HdwTree from '@/components/HdwTree/index.vue';
</script>

<template>
  <div>钥匙管理</div>
  <div class="page-wrapper">
    <div class="page-header">
      <div class="hdw-card-container">
        <hdw-card title="区域列表" is-full>
          <hdw-tree></hdw-tree>
        </hdw-card>
      </div>
    </div>
    <div class="page-content">
      <hdw-card is-full>
        <div class="page-content-wrapper">
          <div class="page-content-tools">
            <el-button type="primary" size="small" :icon="Plus">添加钥匙</el-button>
            |
            <div class="tools-filter">
              <div class="tools-filter-item">
                <div class="filter-label">钥匙名称：</div>
                <div class="filter-content">
                  <el-input v-model="filter.keyName" size="small"></el-input>
                </div>
              </div>
              <div class="tools-filter-item">
                <div class="filter-label">员工名称：</div>
                <div class="filter-content">
                  <el-input v-model="filter.userName" size="small"></el-input>
                </div>
              </div>
            </div>
            <el-button type="primary" size="small" :icon="Search">查询</el-button>
          </div>
          <div class="page-content-table">
            <div class="pos-rel">
              <div class="pos-abs">
                <el-table :data="tableData" border style="width: 100%; height: 100%">
                  <el-table-column type="index" width="50" />
                  <el-table-column prop="type" align="center" label="钥匙类型" width="120" />
                  <el-table-column prop="keyName" align="center" label="钥匙名称" width="180" />
                  <el-table-column prop="keyNumber" align="center" label="钥匙编号" width="180" />
                  <el-table-column prop="userName" align="center" label="员工名称" width="180" />
                  <el-table-column prop="bluetoothAddr" label="蓝牙地址" />
                  <el-table-column prop="createTime" label="创建时间" width="180" />
                  <el-table-column align="center" fixed="right" label="操作" width="180">
                    <template #default>
                      <el-button type="primary" size="small">编辑</el-button>
                      <el-button type="danger" size="small">删除</el-button>
                    </template>
                  </el-table-column>
                </el-table>
              </div>
            </div>
          </div>
          <div class="page-content-page">
            <div class="page-tool"></div>
            <div class="el-page-container">
              <el-pagination
                  v-model:current-page="page.currentPage"
                  v-model:page-size="page.pageSize"
                  :page-sizes="[20, 40, 60, 80, 100, 200, 300, 400]"
                  size="small"
                  :disabled="disabled"
                  :background="background"
                  layout="total, sizes, prev, pager, next, jumper"
                  :total="page.total"
                  @size-change="handleSizeChange"
                  @current-change="handleCurrentChange"
              />
            </div>
            <div class="page-tool"></div>
          </div>
        </div>
      </hdw-card>
    </div>
    <div class="page-footer"></div>
  </div>
</template>

<style scoped lang="scss">
.page-wrapper {
  display: flex;
  flex-direction: row;
  padding: 8px;
  height: 100%;
  .page-content {
    flex: 1;
  }
}

.page-content-wrapper {
  display: flex;
  flex-direction: column;
  height: 100%;
  .page-content-tools {
    padding-bottom: 8px;
  }
  .page-content-table {
    flex: 1;
    margin-left: -8px;
    margin-right: -8px;
  }
  .page-content-page {
    padding: 8px 8px 0 8px;
    text-align: center;
    .el-page-container {
      display: inline-block;
      padding: 0 16px;
    }
    .page-tool {
      display: inline-block;
    }
  }
}

.hdw-card-container {
  width: 240px;
  padding-right: 8px;
  height: 100%;
}
.pos-rel {
  position: relative;
  width: 100%;
  height: 100%;
  .pos-abs {
    position: absolute;
    top: 0;
    bottom: 0;
    left: 0;
    right: 0;
    width: 100%;
    height: 100%;
  }
}
.tools-filter {
  display: inline-block;
  font-size: 14px;
  .tools-filter-item {
    display: inline-block;
    margin-right: 8px;
    .filter-label {
      display: inline-block;
    }
    .filter-content {
      display: inline-block;
    }
  }
}
</style>