saber/src/views/manager/projectinfo/ledger.vue

<template>
    <basic-container class="list">
      <div class="flex">
     
          <el-select
            v-model="searchForm.projectId"
            filterable
            style="width: 300px"
            placeholder="请选择项目"
            clearable
            @change="listpage"
          >
            <el-option
              v-for="item in options"
              :key="item.id"
              :label="item.projectName"
              :value="item.id"
            >
            </el-option>
          </el-select>
          <el-select 

            v-model="searchForm.range"
            filterable
            style="width: 200px;margin-left: 10px;margin-right: 10px"

            placeholder="同步范围"
            clearable
            @change="listpage"
          >
          <el-option
              v-for="item in rangeOptions"
              :key="item.id"
              :label="item.dictValue"
              :value="item.dictKey"
            ></el-option>
          </el-select>
          <el-select 
                
                  v-model="searchForm.type"
                filterable
                style="width: 200px;margin-right: 10px"

                placeholder="同步类型"
                clearable
                @change="listpage"
            >
            <el-option
                v-for="item in typeOptions"
                :key="item.id"
                 :label="item.dictValue"
                :value="item.dictKey"
                >
                </el-option>
            </el-select>
           
          
            <el-button type="info" class="el-icon-close" @click="reSearchClick"
              >重置</el-button
            >

  
    
      </div>
  
      <el-table
        class="martop20 tableList"
        :data="tableData"
        header-color="red"
        style="width: 100%"
      >
        <el-table-column type="index" label="序号" width="180"> </el-table-column>
        <el-table-column prop="projectName" label="项目">
        </el-table-column>
        <el-table-column prop="rangeName" label="同步范围">
        </el-table-column>
        <el-table-column prop="templateName" label="同步源">
        </el-table-column>
        <el-table-column prop="typeName" label="同步类型">
        </el-table-column>
        <el-table-column prop="nodeName" label="同步节点">
        </el-table-column>
        <el-table-column prop="createUser" label="同步人">
        </el-table-column>
        <el-table-column prop="createTime" label="同步时间">
        </el-table-column>
      </el-table>
      <el-pagination
      style="float:right"
      background
      class="martop10 marbottom10"
      layout="total, prev, pager, next"
      :total="total"
      @size-change="handleSizeChange"
      @current-change="handleCurrentChange"
      :current-page.sync="pageindex"
      :page-size="pagesize"
        :page-sizes="[10, 20, 30, 40]"
    >
    </el-pagination>
    </basic-container>
  </template>
  
  <script>
 import { getDictionary } from "@/api/system/dict";
 import { getProjectList } from "@/api/manager/projectinfo";
 import { page } from "@/api/manager/ledger";
  export default {
    data() {
      return {
       searchForm: {
          projectId: "",
          range: "",
          type: "",
        },
        options: [],

        rangeOptions: [],
        typeOptions: [],
        tableData: [],
        total: 0,
        pageindex: 1,
        pagesize: 20,
      
      };
    },
    methods: {
     getRangeOptions(){
      getDictionary({
        code: "wbs_snyc_range",
      }).then((res) => {
        this.rangeOptions = res.data.data;
      });
     },
     getTypeOptions(){
      getDictionary({
        code: "wbs_sync_type",
      }).then((res) => {
        this.typeOptions = res.data.data;
      });
     },
      handleSizeChange(val) {
        this.pagesize = val;
        this.listpage();
      },
      handleCurrentChange(val) {
        this.pageindex = val;
        this.listpage();
      },
      typeChange() {
        this.listpage();
      },
  
      projectChange() {
        
        this.listpage();
      },
 

      async queryProjectList() {
        //获取所有项目
        const { data: res } = await getProjectList();
        if (res.code == 200) {
          this.options = res.data.records;
         

        }
      },
      async listpage() {
        //分页获取证书列表数据
        const { data: res } = await page({
          current: this.pageindex,
          size: this.pagesize,
          ...this.searchForm,
        });
  
        if (res.code == 200) {
          this.tableData = res.data.records;
          this.total = res.data.total;
        }
      },

      reSearchClick() {
        this.searchForm = {
          projectId: "",
          range: "",
          type: "",
        };

        this.listpage();
      },
      //#endregion
    },
    created() {
      this.queryProjectList();
      this.getRangeOptions();
      this.getTypeOptions()
      this.listpage();
    },
  };
  </script>
  
  <style lang="scss" scoped>
  .tableList {
    ::v-deep th.el-table__cell {
      font-size: 16px !important;
    }
  }
  .header-box-center {
    margin-left: 40px;
  }
  </style>