powerjob_front/src/views/hlguser/modules/HlgUserSubcontractorContract.vue

<template>
  <a-modal
    :title="title"
    :width="modelStyle.width"
    :visible="visible"
    :bodyStyle="bodyStyle"
    :confirmLoading="confirmLoading"
    @ok="handleOk"
    @cancel="handleCancel"
    :maskClosable="false"
    :footer="null"
    cancelText="关闭">
    <a-spin :spinning="confirmLoading">
      <a-card :bordered="false">
    <!-- 查询区域 -->
    <div class="table-page-search-wrapper">
      <a-form layout="inline" @keyup.enter.native="searchQuery">
        <a-row :gutter="24">
        </a-row>
      </a-form>
    </div>
    <!-- 查询区域-END -->
    <div style="margin-bottom: 10px">{{msg}}</div>
    <!-- 操作按钮区域 -->
    <div class="table-operator">
      <a-button @click="uploadContract()" type="primary" icon="plus" v-has="'userSubcontractor:addContract'">上传合同</a-button>
    </div>

    <!-- table区域-begin -->
    <div>

      <a-table
        ref="table"
        size="middle"
        bordered
        rowKey="id"
        :columns="columns"
        :dataSource="dataSource"
        :pagination="ipagination"
        :loading="loading"
        @change="handleTableChange">



        <span slot="action" slot-scope="text, record">
          <template v-if="record.contractStatus==2">
           --
          </template>
           <template v-else>
          <a @click="uploadContract1(record)" v-has="'userSubcontractor:editContract'">编辑</a>
           </template>
            <a-divider type="vertical" v-has="'userSubcontractor:viewContract'"/>
            <a @click="uploadContract2(record)" v-has="'userSubcontractor:viewContract'">查看合同</a>
        </span>


        <span slot="action1" slot-scope="text, record">
           <template v-if="record.isAutoRenew == 1">
             --
           </template>
          <template v-else>
            <template v-if="record.contractStatus == 1">
                <span style="color: #FF7312">{{text.length > 10 ? text.substring(0,10) : text}}(即将到期)</span>
              </template>
              <template v-else-if="record.contractStatus == 2">
                <span style="color: #F01B1B">{{text.length > 10 ? text.substring(0,10) : text}}(已到期)</span>
              </template>
              <template v-else>
                {{text.length > 10 ? text.substring(0,10) : text}}
              </template>
          </template>
            </span>



      </a-table>
    </div>

      </a-card>
    </a-spin>
<hlg-user-upload-contract-modal ref="uploadContractForm" @ok="modalFormOk"></hlg-user-upload-contract-modal>
    <div class="drawer-bootom-button" >
      <a-button class="ant-btn"  @click="handleCancel">关闭</a-button>
    </div>
  </a-modal>
</template>

<script>

  import '@/assets/less/TableExpand.less'
  import { JeecgListMixin } from '@/mixins/JeecgListMixin'
  import { filterObj } from '@/utils/util'
  import { httpAction ,getAction,putAction,deleteAction} from '@/api/manage'
  import HlgUserUploadContractModal from './HlgUserUploadContractModal'

  export default {
    name: "HlgUserSubcontractorContract",
    mixins:[JeecgListMixin,],
    components: {
      HlgUserUploadContractModal

    },
    data () {
      return {
        msg:'',
        userId:0,
        subcontractorId: 0,
        form: this.$form.createForm(this),
        bodyStyle: {
          padding: '0',
          height: (window.innerHeight * 0.66) + 'px',
          'overflow-y': 'auto'
        },
        modelStyle: {
          width: '76%',
          style: { top: '20px' },
          fullScreen: false
        },
        visible: false,
        model: {},
        labelCol: {
          xs: { span: 24 },
          sm: { span: 5 },
        },
        wrapperCol: {
          xs: { span: 24 },
          sm: { span: 16 },
        },
        confirmLoading: false,
        title: '用户合同',
        description: '用户合同',
        // 表头
        columns: [
          {
            title:'合同开始时间',
            align:"left",
            dataIndex: 'startDate',
            customRender:function (text) {
              return !text?"":(text.length>10?text.substr(0,10):text)
            }
          },
          {
            title:'合同结束时间',
            align:"left",
            dataIndex: 'endDate',
            scopedSlots: { customRender: 'action1' }
          },
          {
            title: '操作',
            dataIndex: 'action',
            align:"left",
            // fixed:"right",
            // width:147,
            scopedSlots: { customRender: 'action' }
          }
        ],
        url: {
          list: "/hlguser/hlgUserSubcontract/userSubcontractorContractList",
        },
        dictOptions:{},
      }
    },
    computed: {
      importExcelUrl: function(){
        return `${window._CONFIG['domianURL']}/${this.url.importExcelUrl}`;
      },
    },
    methods: {
      getQueryParams() {
        var param = Object.assign({}, this.queryParam, this.isorter)
        param.field = this.getQueryField()
        param.pageNo = this.ipagination.current;
        param.pageSize = this.ipagination.pageSize;
        param.subcontractorId=this.subcontractorId
        param.userId=this.userId
        return filterObj(param)
      },
      edit (record) {
        this.model={}
        this.model = Object.assign({}, record);
        this.dataSource=[]
        this.ipagination.total=0
        this.subcontractorId=record.subcontractorId
        this.userId=record.userId
        if(record.isPayment){
          this.msg ="已走款:"+(record.minPaymentTime.length>10?record.minPaymentTime.substr(0,10):record.minPaymentTime)+'~'+(record.maxPaymentTime.length>10?record.maxPaymentTime.substr(0,10):record.maxPaymentTime)
        }else{
          this.msg ="未走款"
        }
        this.visible = true
        this.loadData(1)
      },
      loadData(arg) {
        if (!this.url.list) {
          this.$message.error('请设置url.list属性!')
          return
        }
        //加载数据 若传入参数1则加载第一页的内容
        if (arg === 1) {
          this.ipagination.current = 1;
        }
        var params = this.getQueryParams()//查询条件
        this.loading = true
        getAction(this.url.list, params).then((res) => {
          if (res.success) {
            this.dataSource = res.result.records
            this.ipagination.total = res.result.total;
          }
          if (res.code === 510) {
            this.$message.warning(res.message)
          }
          this.loading = false
        })
      },
      close () {
        this.$emit('ok');
        this.visible = false;
      },
      handleOk () {
        this.$emit('ok');
        this.close()
      },
      handleCancel () {
        this.$emit('ok');
        this.close()
      },
      modalFormOk(){
        this.loadData(1)
      },
      uploadContract(){
        var record1={}
        record1.userId=this.userId
        record1.subcontractorId=this.subcontractorId
        this.$refs.uploadContractForm.edit(record1);
        this.$refs.uploadContractForm.title = this.title;
        this.$refs.uploadContractForm.disableSubmit = false;
      },

      uploadContract1(record){
        var record1={}
        record1.contractId=record.id
        record1.userId=this.userId
        record1.subcontractorId=this.subcontractorId
        record1.workContract=record.workContract
        record1.startDate=record.startDate
        record1.endDate=record.endDate
        record1.isAutoRenew=record.isAutoRenew
        this.$refs.uploadContractForm.edit(record1);
        this.$refs.uploadContractForm.title = this.title;
        this.$refs.uploadContractForm.disableSubmit = false;
      },

      uploadContract2(record){
        var record1={}
        record1.contractId=record.id
        record1.userId=this.userId
        record1.subcontractorId=this.subcontractorId
        record1.workContract=record.workContract
        record1.startDate=record.startDate
        record1.endDate=record.endDate
        record1.isAutoRenew=record.isAutoRenew
        console.log(record1)
        this.$refs.uploadContractForm.edit(record1);
        this.$refs.uploadContractForm.title = this.title;
        this.$refs.uploadContractForm.disableSubmit = true;
      }

    }
  }
</script>
<style scoped>
  @import '~@assets/less/common.less';
</style>