trfficcodes.vue 2.78 KB
<template>
  <div class="contentBox">
    <div class="content">
      <div>
        <span class="selectBox">
          <el-select
            v-model="selectDevs"
            placeholder="请选择"
            @change="cateChange"
            :popper-append-to-body="false"
          >
            <el-option
              v-for="item in catesData"
              :key="item"
              :value="item.cate_unid"
              :label="item.name"
            ></el-option>
          </el-select>
        </span>
        <span class="addbox">
          <el-button type="primary">添加code</el-button>
        </span>
      </div>
      <div class="mt10">
        <el-table
          height="574"
          :data="tableData"
          stripe
          border
          style="width: 100%"
        >
          <el-table-column type="index" align="center" label="#" width="40"></el-table-column>
          <el-table-column align="center" prop="code_unid" label="code_unid">
          </el-table-column>
          <el-table-column prop="code" align="center" label="code">
          </el-table-column>
          <el-table-column align="center" prop="name" label="名称">
          </el-table-column>
        </el-table>
        <div style="margin-top: 28px;">
          <el-pagination
            style="float: right;"
            background
            prev-text="上一页"
            next-text="下一页"
            :page-sizes="[20, 30, 50, 100, 200]"
            layout="prev, pager, next,sizes"
            :current-page="page"
            @size-change="handleSizeChange"
            @current-change="handleCurrentChange"
            :total="total"
          >
          </el-pagination>
          <div style="clear: both;"></div>
        </div>
      </div>
    </div>
    <el-dialog title="详情" :visible.sync="detailVisible" width="20%">
    </el-dialog>
  </div>
</template>
<script>
export default {
  data() {
    return {
      detailData: [],
      total: 0,
      page: 1,
      pageSize: 20,
      tableData: [],
      catesData: [],
      selectDevs: "",
      detailVisible: false
    };
  },
  components: {},
  created() {
    this.getCates();
  },
  methods: {
    cateChange(cateunid) {
      let offset = (this.page - 1) * this.pageSize;
      let obj = {
        limit: this.pageSize,
        offset: offset
      }
      this.$api.codes
        .codes(obj, cateunid)
        .then(res => {
          this.tableData = res.list_data;
        })
        .catch(err => {});
    },
    getCates() {
      this.$api.codes.cates().then(res => {
        this.catesData = res.list_data;
      });
    },
    handleSizeChange(val) {
      this.pageSize = val;
    },
    handleCurrentChange(val) {
      this.page = val;
    }
  }
};
</script>
<style lang="scss" scoped>
.addbox{
  float: right;
  margin-right: 10px;
}
</style>