adi_cae_web/src/views/home/openproject/index.vue

/*我的项目*/
<template>
  <div class="myproject">
    <div class="title">
      <span>公开项目</span>
    </div>
    <div class="btn">
    </div>
    <div class="scher">
      <!-- <span></span>
      <span class="xuanzhogn">搜索</span><span style="padding: 0 5px;">|</span> -->
      <div class="input ">
      <!-- <el-select v-model="value" placeholder="请选择">
        <el-option
          v-for="item in options"
          :key="item.value"
          :label="item.label"
          :value="item.value">
        </el-option>
      </el-select> -->
      <el-input v-model="searchtag" placeholder="请输入项目名称" class="text" ></el-input>
    <el-button @click="search()" type="primary" icon="el-icon-search" style="border-radius:0;">搜索</el-button>
      </div>
    </div>
    <!-- 表格 -->
     <template>
    <el-table
      v-loading="loading"
     element-loading-text="拼命加载中"
      :data="tableData"
       height="600"
      class="lbg_color2"
      @row-click="rowclinck"
      style="width: 100%">
      <el-table-column
        label="名称"
        prop="name"
        >
      </el-table-column>
      <el-table-column
      prop="updateTime"
        label="最近编辑时间"
        >
       
      </el-table-column>
      <el-table-column
         prop="remark"
        label="描述">
       
      </el-table-column>
         <el-table-column
         prop="isshare"
        label="是否公开">
       <template slot-scope="scope">
         <span  slot="content">{{
            scope.row.isshare == '0'?"公有":"私有"
            
          }}</span>
       </template>


      </el-table-column>
    </el-table>
        <div class="pagination">
      <Pagination
        :pagination-config="paginationConfig"
        @putPagination="getPagination"
      ></Pagination>
    </div>
  </template>

  </div>
</template>

<script>
import Pagination from '@/components/Pagination'
import { request, getImage } from '@/utils/request'
export default {
  name: 'Project',
    components: {
         Pagination
         },
  data() {
    return {
       loading: false, // 是显示加载
        paginationConfig: {
        hideSinglePage: false,
        page: 1,
        size: 10,
        sizeList: [10, 15, 30, 50],
        layout: 'total, sizes, prev, pager, next, jumper',
        total: 0,
      },
      searchtag:'',
      isshare:"",
        formLabelWidth: '60px',
        formLabelWidth2:'73px',
        formLabelWidth4:'37px',
        formLabelWidth5:'100px',
         formLabelWidth6:'120px',
        value:'0',
        input:'',
             tableData: [ ],
           dialogVisible: false,
       
    }
  },
  created() {

  },
  mounted(){
this.init();
  },
  methods: {
    init(){
      this.projectlist('');

    },
      // 分页查询
        getPagination(data) {
      this.paginationConfig = data;
      this.projectlist("");

    },
    // 项目查询
    search(){
      this.projectlist(this.searchtag);
    },
    projectlist(searchtag){//列表加载
    const loading = this.$loading({
        lock: true,
        text: 'Loading',
        spinner: 'el-icon-loading',
        background: 'rgba(0, 0, 0, 0.7)',
      })
         setTimeout(() => {
    const params = {
          transCode: 'C000011',
        page: this.paginationConfig.page,
        count: this.paginationConfig.size,
        searchtag:searchtag,
        }
        request(params)
          .then((res) => { 
             loading.close()
            this.paginationConfig.total = res.total
           this.tableData=res.rows;
          })
          .catch((err) => {
             loading.close()
          })
          }, 1500)
    },
    rowclinck(row, column, event){
    },


  }
}
</script>

<style lang="scss" scoped>
@import '@/styles/variables.scss';
@import '@/styles/mixin.scss';

.myproject{
  padding: 15px;

}

.myproject .title span{
  font-size: 26px;
  display: inline-block;
     color: #b6b6b6;

}
/deep/.el-dialog__title{
  color: #fff;
}
/deep/ .el-pagination__editor {
    width: 50px;
    border: none;
}

.btn{
  padding: 10px;
  display: flex;
  justify-content: flex-end;
}
.scher{
  display: flex;
  padding-bottom: 15px;
}
.scher span{
  font-size: 16px;
  height: 40px;
  line-height: 40px;
  display: inline-block;
  
}
 /deep/.newfile .el-form-item__label{
    line-height: 40px;
}
.newfile .el-form-item__label {
    text-align: right;
    vertical-align: middle;
    float: left;
    font-size: 14px;
    color: #606266;
    line-height: 1px;
    padding: 12px 12px 0 0;
    -webkit-box-sizing: border-box;
    box-sizing: border-box;
}
.xuanzhogn{
  font-size: 16px;
     color: #b6b6b6;
}
.scher .input{
  width: 25%;
  min-width: 200px;
    box-sizing: border-box;
transition: 0.5s linear; 
position:relative;  
-moz-box-sizing: border-box; 
 box-sizing: border-box; 
 overflow: hidden;
 color: #fff;
  .search{
    padding: 0 10px;
  }
}
.scher .el-select{
  width: 110px;
}
.input{
  display: flex;
}
.input .text{
  flex:1;
}
</style>
<style >
.scher .el-input__inner{
  border-radius: 0;
  border: none;
}
.pagination{
  margin-top: 50px;
}
</style>