内容提交

whychdw

2024-11-27 393eceedc6ed2382fe60901294f978b73f709fa4

 src/views/device/lock/index.vue

@@ -1,12 +1,16 @@
<script lang="ts">
import { defineComponent } from 'vue';
import HdwCard from '@/components/HdwCard/index.vue';
import const_theme from '@/utils/const/const_theme';
import store from '@/store';

export default defineComponent({
  name: 'LockManage',
  components: { HdwCard },
  data() {
    return {
      theme: store.settings().theme,
      themes: const_theme,
      tableData: [
        {
          type: '蓝牙',
@@ -15,6 +19,11 @@
          installState: '未安装'
        }
      ],
      filter: {
        name: '',
        state: 0,
        type: 0
      },
      page: {
        currentPage: 1,
        pageSize: 20,
@@ -23,7 +32,13 @@
    };
  },
  methods: {

    handleChangeTheme(val) {
      console.log(val);
      store.settings().changeSetting({
        key: 'theme',
        value: val
      });
    }
  }
});
</script>
@@ -37,29 +52,76 @@
</script>

<template>
  <div class="lock-wrapper">
    <div class="lock-header">
  <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="lock-content">
    <div class="page-content">
      <hdw-card is-full>
        <div class="lock-content-wrapper">
          <div class="lock-content-tools">
            <el-button type="primary" size="small" :icon="Search">查询</el-button>
            <el-button type="success" size="small" :icon="Plus">添加</el-button>
            <el-button type="success" size="small" :icon="Plus">批量添加</el-button>
        <div class="page-content-wrapper">
          <div class="page-content-tools">
            <el-button type="primary" size="small" :icon="Plus">添加</el-button>
            <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"></div>
                <div class="filter-label">锁具名称：</div>
                <div class="filter-content">
                  <el-input v-model="filter.name" size="small"></el-input>
                </div>
              </div>
              <div class="tools-filter-item">
                <div class="filter-label">锁具状态：</div>
                <div class="filter-content">
                  <el-select
                      v-model="filter.state"
                      placeholder="请选择"
                      size="small"
                      style="width: 180px"
                  >
                    <el-option label="--请选择--" :value="0"/>
                    <el-option label="未安装" :value="1"/>
                    <el-option label="已安装" :value="2"/>
                  </el-select>
                </div>
              </div>
              <div class="tools-filter-item">
                <div class="filter-label">锁具类型：</div>
                <div class="filter-content">
                  <el-select
                      v-model="filter.type"
                      placeholder="请选择"
                      size="small"
                      style="width: 180px">
                    <el-option label="--请选择--" :value="0"/>
                    <el-option label="无源" :value="1"/>
                    <el-option label="蓝牙" :value="2"/>
                  </el-select>
                </div>
              </div>
              <div class="tools-filter-item">
                <div class="filter-label">主题：</div>
                <div class="filter-content">
                  <el-select
                      v-model="theme"
                      placeholder="请选择"
                      size="small"
                      @change="handleChangeTheme"
                      style="width: 180px">
                    <el-option
                        v-for="item in themes" :key="item.label"
                        :label="item.label" :value="item.value"/>
                  </el-select>
                </div>
              </div>
            </div>
            <el-button type="primary" size="small" :icon="Search">查询</el-button>
          </div>
          <div class="lock-content-table">
          <div class="page-content-table">
            <div class="pos-rel">
              <div class="pos-abs">
                <el-table :data="tableData" border style="width: 100%; height: 100%">
@@ -80,7 +142,7 @@
              </div>
            </div>
          </div>
          <div class="lock-content-page">
          <div class="page-content-page">
            <div class="page-tool"></div>
            <div class="el-page-container">
              <el-pagination
@@ -101,34 +163,34 @@
        </div>
      </hdw-card>
    </div>
    <div class="lock-footer"></div>
    <div class="page-footer"></div>
  </div>
</template>

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

.lock-content-wrapper {
.page-content-wrapper {
  display: flex;
  flex-direction: column;
  height: 100%;
  .lock-content-tools {
  .page-content-tools {
    padding-bottom: 8px;
  }
  .lock-content-table {
  .page-content-table {
    flex: 1;
    margin-left: -8px;
    margin-right: -8px;
  }
  .lock-content-page {
  .page-content-page {
    padding: 8px 8px 0 8px;
    text-align: center;
    .el-page-container {
@@ -142,7 +204,7 @@
}

.hdw-card-container {
  width: 320px;
  width: 240px;
  padding-right: 8px;
  height: 100%;
}
@@ -160,4 +222,18 @@
    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>