zh-E-admin/src/views/admin/sign/mod/contract.vue

<template>
  <div>
    <el-dialog title="请选择合同模板" :visible.sync="Show" width="80%">
      <div class="align-items-center mb-20">
          <el-input
            class="input-w-200 mr-10"
            placeholder="请输入查询关键词"
            prefix-icon="el-icon-search"
            v-model="fromData.search">
          </el-input>
          <el-button type="primary" icon="el-icon-search" @click="searchFun()">查询</el-button>
      </div>
      <el-table class="mb-20" :data="list" stripe>
        <el-table-column property="id" label="ID" width="150"></el-table-column>
        <el-table-column property="name" label="合同模板名称" width=""></el-table-column>

        <el-table-column property="sign_party" label="合同签署区信息" width="">
          <template slot-scope="scope">
            <div class="fs-16" v-for="(item,i) in scope.row.sign_party" :key="i">{{item}},</div>
          </template>
        </el-table-column>

        <el-table-column property="texts" label="合同可替换信息" width="">
          <template slot-scope="scope">
            <div class="fs-16" v-for="(item,i) in scope.row.texts" :key="i">{{item}},</div>
          </template>
        </el-table-column>

        <el-table-column fixed='right' prop="" label="选择">
          <template slot-scope="scope">
            <el-button type="primary" @click="select(scope.row)">选择</el-button>
          </template>
        </el-table-column>
      </el-table>
      <div class="mb-30 flex-justify-end">
        <el-pagination
          background
          @current-change="handleCurrentChange"
          :current-page.sync="fromData.page"
          :page-size="10"
          layout="prev, pager, next"
          :total="total">
        </el-pagination>
      </div>
    </el-dialog>
  </div>
</template>

<script>
  import {signContract} from '@/api/signContract.js'

  export default {
    name:"Contract-list",
    data(){
      return{
        list:[],
        Show:false,
        fromData:{
          search:'',
          page:1,
        },
        total:0,
      }
    },
    methods:{
      getList(){
        signContract(this.fromData).then((res)=>{
          if(res.code == 1){
            this.Show = true;
            this.list = res.data.items;
          }else{
            this.Show = false;
            this.$message.error(res.msg);
          }
        })
      },
      handleCurrentChange(val){
        this.fromData.page = val;
        this.getList();
      },
      searchFun(){
        this.fromData.page = 1;
        this.getList();
      },

      select(item){
        this.$emit('setInfo',item)
        this.$message.success('选择成功');
        this.Show = false;
      },
    },
  }
</script>

<style scoped lang="scss">

</style>