zh-E-admin/src/views/admin/sign/list.vue

<template>
  <div class="user-list">

      <div class="mb-20 flex-justify-space baC-fff sys-radius-10 box-sizing-border pd-15-10">
        <div class="align-items-center">
            <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>
        <div class="">
          <el-button type="success" icon="el-icon-circle-plus-outline" @click="add()">发起签署</el-button>
        </div>
      </div>

      <div class="mb-30">
        <el-table :data="list" stripe >
            <el-table-column fixed prop="id" label="ID"></el-table-column>
            <el-table-column fixed prop="contract_name" label="合同名称"></el-table-column>
            <el-table-column fixed prop="contract_no" label="合同编号"></el-table-column>
            <el-table-column prop="created_at" label="发起签署时间"></el-table-column>
            <el-table-column prop="status_str" label="是否签署">
              <template slot-scope="scope">
                <el-tag v-if="scope.row.status == 2" type="success">{{scope.row.status_str}}</el-tag>
                <el-tag v-else type="danger">{{scope.row.status_str}}</el-tag>
              </template>
            </el-table-column>

            <el-table-column prop="sign_url" label="签署链接"></el-table-column>

            <el-table-column fixed='right' prop="" label="下载" width="300">
              <template slot-scope="scope">
                <el-button v-if="scope.row.status == 2" type="success" icon="el-icon-circle-plus-outline" @click="download(scope.row)">下载</el-button>
              </template>
            </el-table-column>
        </el-table>
      </div>


      <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>

  </div>
</template>

<script>
  import {signList,signDownload} from '@/api/signContract.js'
  export default {
    data(){
      return{
        list:[],
        fromData:{
          page:1,
          search:'',
        },
        total:0,
        isAJAX:false,
      }
    },
    mounted(){
      this.getList();
    },
    methods:{
      getList(){
        signList(this.fromData).then((res)=>{
          if(res.code == 1){
            this.list = res.data.items;
            this.total = res.data.total
          }
        })
      },
      handleCurrentChange(val){
        this.fromData.page = val;
        this.getList();
      },
      searchFun(){
        this.fromData.page = 1;
        this.getList();
      },

      add(item){
        this.$router.push({path:'/sign/add'})
      },
      download(item){
        if(this.isAJAX){
          return
        }
        this.isAJAX = true;
        signDownload({contract_id:item.id}).then((res)=>{
          this.isAJAX = false;
          if(res.code == 1){
            this.$message.success(res.msg);
            window.open(res.data.files[0].downloadUrl)
          }else{
            this.$message.error(res.msg);
          }
        })
      },
    },
  }
</script>

<style scoped lang="scss">
  .user-list{

  }
</style>