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

/*我的项目*/
<template>
  <div class="myproject">
    <div class="title">
      <span>我的项目</span>
    </div>
    <div class="btn">
      <el-row>
      <el-button class="btn_color1" @click="dialogVisible = true">新建项目</el-button>
      <el-button class="btn_color1">新建文件夹</el-button>
      <el-button type="warning">导入</el-button>
</el-row>
    </div>
    <div class="scher">
      <span></span>
      <span class="xuanzhogn">1个已选中</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="input" class="text" ></el-input>

      </div>
    </div>
    <!-- 表格 -->
     <template>
    <el-table
      v-loading="loading"
     element-loading-text="拼命加载中"
      :data="tableData"
      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>
  <!-- 、新建文件 -->
<el-dialog
  title="创建新项目"
  :visible.sync="dialogVisible"
  width="30%"
>
       <el-form class="newfile">
        <el-form-item  label="项目名称：" :label-width="formLabelWidth5">
            <!-- <span class="sblock">项目类型</span> -->
                <el-radio  v-model="newobj.isshare" :label="0"
                  >公开</el-radio
                >
          <el-radio v-model="newobj.isshare" :label="1">私有</el-radio>
        </el-form-item>
    <el-form-item label="项目名称：" :label-width="formLabelWidth5">
      <el-input v-model="newobj.name" autocomplete="off"></el-input>
    </el-form-item>
       <el-form-item label="项目描述：" :label-width="formLabelWidth5">
      <el-input v-model="newobj.remark" autocomplete="off"></el-input>
    </el-form-item>
        <!-- <div class="disflex">
          <span class="sblock">项目名称：</span>
          <el-input class="inpwidth" v-model="project.name"></el-input>
        </div>
          <div class="disflex">
          <span class="sblock">项目名称：</span>
          <el-input class="inpwidth" v-model="project.name"></el-input>
        </div> -->
       </el-form>
  <span slot="footer" class="dialog-footer">
    <el-button @click="dialogVisible = false">取 消</el-button>
    <el-button type="primary" @click="dialogVisible = false;newsave()">确 定</el-button>
  </span>
</el-dialog>

  </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: 15,
        sizeList: [10, 15, 30, 50],
        layout: 'total, sizes, prev, pager, next, jumper',
        total: 0,
      },
        options:[{
          value: '0',
          label: '搜索项目'
        }, {
          value: '1',
          label: '搜索标签'
        }
        ],
        newobj:{
          name:'',
          remark:'',
          image:'',
          isshare:0,
          
          },   // 新建项目参数
          
       

        formLabelWidth: '60px',
        formLabelWidth2:'73px',
        formLabelWidth4:'37px',
        formLabelWidth5:'100px',
         formLabelWidth6:'120px',
        value:'0',
        input:'',
             tableData: [
              //  {
          //   date: '2022-05-02',
          //   name: '封顶圆柱壳',
          //   address: '案例1'
          // }, {
          //   date: '2016-05-04',
          //   name: '气缸盖二次接触接头热/结构分析综述  ',
          //   address: '案例2'
          // }, {
          //   date: '2019-11-01',
          //   name: 'RBE3(通用刚体连杆)',
          //   address: '案例3'
          // }
          ],
           dialogVisible: false,
           project:{
             fileType:"公开",
             name:''
           }
    }
  },
  created() {

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

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

    },
    projectlist(){//列表加载
    const loading = this.$loading({
        lock: true,
        text: 'Loading',
        spinner: 'el-icon-loading',
        background: 'rgba(0, 0, 0, 0.7)',
      })
         setTimeout(() => {
    const params = {
          transCode: 'C00001',
        page: this.paginationConfig.page,
        count: this.paginationConfig.size,
        }
        request(params)
          .then((res) => { 
             loading.close()
            this.paginationConfig.total = res.total
           this.tableData=res.rows;
          })
          .catch((err) => {
             loading.close()
          })
          }, 1500)
    },
    rowclinck(row, column, event){
      console.log(row)
      this.$router.push({path:'/index',query:{pid:row.id}});
     //this.$router.push({path:'/index',query:{pid:'fa26eb863f664446a20f7d461dfafd71'}});
    },
    newsave(){     //新建项目
         const params = {
          transCode: 'C00002',
          name:  this.newobj.name,
          remark:  this.newobj.remark,
          isshare:  this.newobj.isshare,
        }
        request(params)
          .then((res) => { 
            this.projectlist();
          })
          .catch((err) => {
          })
    },

  }
}
</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: 30%;
    box-sizing: border-box;
   border:1px solid transparent;
  &:hover{
border: 1px solid #666;
transition: 0.5s linear; 
position:relative;  
-moz-box-sizing: border-box; 
 box-sizing: border-box; 
  }
}
.scher .el-select{
  width: 110px;
}
.input{
  display: flex;
}
.input .text{
  flex:1;
}

//  .el-table, .el-table__expanded-cell{
//   background-color:#333;
//  }
 
</style>
<style >
.scher .el-input__inner{
  border-radius: 0;
  border: none;
}
.pagination{
  margin-top: 50px;
}

</style>