kd-aiot-frontend/src/views/codeManagement/index2.vue

<template>
  <div class="app-container ele-body">
    <div class="zw-page-table">
      <!-- 条件区 -->
      <el-form label-width="100px" class="zw-criterion">
        <div class="zw-criterion-normal">
          <el-row>
            <el-col :span="4">
              <el-form-item label-width="80px" label="类型编码">
                <el-input placeholder="请输入内容"></el-input>
              </el-form-item>
            </el-col>
            <el-col :span="4">
              <el-form-item label-width="80px" label="类型编码">
                <el-input placeholder="请输入内容"></el-input>
              </el-form-item>
            </el-col>
            <el-col :span="4" style="padding-left: 10px">
              <el-button
                type="primary"
                @click="search"
                icon="el-icon-search"

                >搜索</el-button
              >
              <el-button @click="reset" icon="el-icon-refresh-left"
                >重置</el-button
              >
            </el-col>
          </el-row>
        </div>
      </el-form>
    </div>
    <div class="butn-wrap">
      <el-button
        type="primary"
        @click="add"
        icon="el-icon-search"
        size="small"
        >新增</el-button
      >
    </div>
    <div class="container-main">
      <div class="tree-wrap">
        <tree ref="tree" :data="treeData" @change="treeChange"></tree>
      </div>
      <div class="main-wrap">
        <el-table class="table" :data="tableData">
          <el-table-column prop="s1" label="编码" width="180">
          </el-table-column>
          <el-table-column prop="name" label="名称" width="180">
          </el-table-column>
          <el-table-column prop="address" label="描述"></el-table-column>
          <el-table-column prop="address" label="操作">
            <template slot-scope="{ row }">
              <el-button type="text" @click="junmpEdit(row)" size="small"
                >编辑</el-button
              >
            </template>
          </el-table-column>
        </el-table>

        <div class="pagination-wrap">
          <el-pagination
            background
            layout="total, sizes, prev, pager, next, jumper"
            :total="total"
            :page-size="size"
            :current-page.sync="page"
            @current-change="handleCurrentChange"
            @size-change="handleSizeChange"
          >
          </el-pagination>
        </div>
      </div>
    </div>
    <addDialog ref="addDialog"></addDialog>
  </div>
</template>
<script>
import tree from './components/tree.vue';
import addDialog from './components/addDialog.vue'
export default {
  components: {
    tree,
    addDialog
  },
  data() {
    return {
      treeData: [
        {
          id: 1,
          label: '一级 1',
          children: [
            {
              id: 4,
              label: '二级 1-1',
              children: [
                {
                  id: 9,
                  label: '三级 1-1-1'
                },
                {
                  id: 10,
                  label: '三级 1-1-2'
                }
              ]
            }
          ]
        },
        {
          id: 2,
          label: '一级 2',
          children: [
            {
              id: 5,
              label: '二级 2-1'
            },
            {
              id: 6,
              label: '二级 2-2'
            }
          ]
        },
        {
          id: 3,
          label: '一级 3',
          children: [
            {
              id: 7,
              label: '二级 3-1'
            },
            {
              id: 8,
              label: '二级 3-2'
            }
          ]
        }
      ],
      tableData: [
        {
          s1: '1'
        }
      ],
      total: 0,
      size: 10,
      page: 1
    };
  },
  methods: {
    treeChange(val) {
      console.log(val);
    },
    // 编辑
    junmpEdit(row) {
      // this.$router.push({
      //   path: '/codeManagement/details'
      // });
      this.$refs.addDialog.open('edit')
    },
    search() {},
    reset() {},
    handleCurrentChange() {},
    handleSizeChange() {},
    add(){
      this.$refs.addDialog.open('add')
    }
  }
};
</script>
<style lang="scss" scoped>
.app-container {
  min-height: calc(100vh - 150px);
}
.container-main {
  display: flex;
  height: calc(100vh - 230px);
  .tree-wrap {
    width: 220px;
  }
  .main-wrap {
    flex: 1;
    margin-left: 20px;
  }
}

.btn {
  background: #157a2c;
  color: #ffffff;
}
.zw-page-table {
  background: #ffffff;
  padding-top: 20px;
  margin-bottom: 20px;
}
.pagination-wrap {
  display: flex;
  justify-content: flex-end;
  padding: 10px 0;
}
.tree-wrap {
  background: #ffffff;
}
.butn-wrap{
  margin-bottom: 10px;
}
</style>