supervise/supervise-crm-ui/src/views/projectStaff/index.vue

<template>
    <div class="app-container">

        <button-bar ref="btnbar" view-title="项目人员" :btndisabled="btndisabled" @btnhandle="btnHandle" />
        <div class="main-content">
          <div class="searchcon">
            <el-button size="small" class="searchbtn" @click="clicksearchShow">
              {{ searchxianshitit }}
            </el-button>
            <div v-show="isSearchShow" class="search">
              <el-form :inline="true" class="tab-header">
                <el-form-item label="项目人员">
                  <el-input v-model="queryParams.params.typeName" placeholder="" clearable />
                </el-form-item>
              </el-form>
              <div class="btn" style="text-align: center;">
                <el-button type="primary" size="small" icon="el-icon-search" @click="dosearch">查询</el-button>
                <el-button type="primary" size="small" icon="el-icon-refresh" @click="resetQuery">重置</el-button>
              </div>
            </div>
          </div>
          <div class="left">
           <div class="listtop" style="width: 500px">
             <div class="tit" >项目列表</div>
           </div>
             <el-table :data="dataList" border max-height="380px" style="width: 500px" highlight-current-row
             @row-click="singleElection">
             <el-table-column align="center" width="55" label="选择">
               <template slot-scope="scope">
                 <!-- 可以手动的修改label的值，从而控制选择哪一项 -->
                 <el-radio class="radio" v-model="templateSelection" :label="scope.row.id" style="margin-left:10px"
                   >{{''}}</el-radio
                 >
               </template>
             </el-table-column>
               <el-table-column prop="typeName" label="项目名称" align="center" />
               <el-table-column prop="remarks" label="贷款银行" align="center" />
            </el-table>
          </div>
          <div class="rigth">
             <div class="listtop" style="width: 700px">
               <div class="tit" > 项目名称：{{projectList.remarks }} {{"\xa0\xa0\xa0"}}{{"\xa0\xa0\xa0"}}{{"\xa0\xa0\xa0"}}{{"\xa0\xa0\xa0"}} 贷款银行：{{projectList.id }}</div>
             </div>
             <div style="float: left;">
                <el-table v-loading="tableLoading" :data="dataList" border max-height="380px" style="width: 350px"
                 @selection-change="handleSelectionChange">
                 <el-table-column type="selection" width="55" align="center"/>
                 <el-table-column prop="typeName" label="监管人员" align="center" />
               </el-table>
             </div>
             <div style="float: left;">
                <el-table v-loading="tableLoading" :data="dataList" border max-height="380px" style="width: 350px"
                 @selection-change="handleSelectionChange">
                 <el-table-column type="selection" width="55" align="center"/>
                 <el-table-column prop="remarks" label="银行人员" align="center" />
               </el-table>
             </div>
          </div>
          <el-button type="primary" style="width: 8%;margin-left: 85%;margin-top: 40px;" size="small"  @click="getPurchaseList">保存</el-button>
        </div>
    </div>
  </template>
  
  <script>
    import req from '@/api/dataDict/datadict'
    import ButtonBar from '@/components/ButtonBar'
    import Pagination from '@/components/pagination'
    import pageye from '@/components/pagination/pageye'
    export default {
      name: 'SupplierBankInfoIndex',
      components: {
        ButtonBar,
        Pagination,
        pageye
      },
      data() {
        return {
          btndisabled: false,
          viewState: 1, // 1、列表 2、添加 3、修改 4、查看
          isSearchShow: false,
          searchxianshitit: '显示查询条件',
          tableLoading: false,
          dataList: [
            {remarks:'fff',id:15},
            {remarks:'kfdjakdfjdkajfkafjka',id:52},
            {remarks:'fff',id:11}
        ],
          btnList: [
            {
              type: 'info',
              size: 'small',
              icon: 'cross',
              btnKey: 'doClose',
              btnLabel: '关闭'
            }
          ],
          queryParams: {
            current: 1,
            size: 10,
            total: 0,
            params: {
              typeName: '',
            }
          },
          sids: [],
          templateSelection: "",
          //   当前选择的行的数据
          checkList: [],
          projectList:{
            remarks:'',
            id:'',
          }
        }
      },
      mounted() {
        this.$refs['btnbar'].setButtonList(this.btnList)
      },
      created() {
        this.loadList()
      },
      methods: {
        // 搜索条件效果
        clicksearchShow() {
          this.isSearchShow = !this.isSearchShow
          if (this.isSearchShow) {
            this.searchxianshitit = '隐藏查询条件'
          } else {
            this.searchxianshitit = '显示查询条件'
          }
        },
        btnHandle(btnKey) {
          switch (btnKey) {
            case 'doClose':
              this.doClose()
              break
            default:
              break
          }
        },
        loadList() {

        },
        singleElection(row) {
            this.templateSelection = row.id
            this.checkList = this.dataList.filter((item) => item.id === row.id)
            console.log(`该行的编号为${row.id}`)
            console.log(this.checkList[0].id)
            this.projectList.remarks=this.checkList[0].remarks
            this.projectList.id=this.checkList[0].id
        },
        // 序号
        indexMethod(index) {
          var pagestart = (this.queryParams.current - 1) * this.queryParams.size
          var pageindex = index + 1 + pagestart
          return pageindex
        },
        dosearch() {
          this.queryParams.current = 1
          this.loadList()
        },
        resetQuery() {
          this.queryParams = {
            current: 1,
            size: 10,
            total: 0,
            params: {
              typeName: '',
            }
          }
          this.loadList()
        },
        resetState() {
          this.viewState = 1
        },
        getPurchaseList(){

        },
        handleSelectionChange(){

        }
      }
    }
  </script>
  <style scoped lang="scss">
  .main-content{
    max-height: 540px;
    // overflow-y: hidden;
    .left{
        float: left;
    }
    .rigth{
        float: right;
    }
  }
  </style>