happywork_front/src/views/hlwinvoice/modules/HlwInvoiceManagePaymentModalForm.vue

<template>
  <a-spin :spinning="confirmLoading">
    <a-form :form="form">

      <!-- 查询区域 -->
      <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 class="ant-descriptions-title">付款信息</div>

      <a-row :gutter="24">
        <a-col :lg="12" :md="12" :sm="24">
          <a-form-item label="批次单号" :labelCol="labelCol" :wrapperCol="wrapperCol" >
            {{this.model.paymentCode}}
          </a-form-item>
        </a-col>
        <a-col :lg="12" :md="12" :sm="24">
          <a-form-item label="需求单号" :labelCol="labelCol" :wrapperCol="wrapperCol" >
            {{this.model.requirementCode}}
          </a-form-item>
        </a-col>
      </a-row>

      <a-row :gutter="24">
        <a-col :lg="12" :md="12" :sm="24">
          <a-form-item label="需求名称" :labelCol="labelCol" :wrapperCol="wrapperCol" >
            {{this.model.requirementName}}
          </a-form-item>
        </a-col>
      </a-row>

      <div class="ant-descriptions-title">企业信息</div>

      <a-row :gutter="24">
        <a-col :lg="12" :md="12" :sm="24">
          <a-form-item label="企业名称" :labelCol="labelCol" :wrapperCol="wrapperCol" >
            {{this.model.companyName}}
          </a-form-item>
        </a-col>
      </a-row>

      <div class="ant-descriptions-title">服务商</div>

      <a-row :gutter="24">
        <a-col :lg="12" :md="12" :sm="24">
          <a-form-item label="服务商" :labelCol="labelCol" :wrapperCol="wrapperCol" >
            {{this.model.subcontractorName}}
          </a-form-item>
        </a-col>
        <a-col :lg="12" :md="12" :sm="24">
          <a-form-item label="服务费率" :labelCol="labelCol" :wrapperCol="wrapperCol" >
            {{this.model.serviceRate}}%
          </a-form-item>
        </a-col>
      </a-row>

      <!-- 操作按钮区域 -->
      <div  class="table-operator">
        <div class="ant-descriptions-title">付款名单</div>

      </div>

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


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



        </a-table>
      </div>



    </a-form>
  </a-spin>
</template>

<script>

  import '@/assets/less/TableExpand.less'
  import { mixinDevice } from '@/utils/mixin'
  import { JeecgListMixin } from '@/mixins/JeecgListMixin'
  import { httpAction, getAction,deleteAction } from '@/api/manage'

  export default {
    name: "HlwInvoiceManagePaymentModalForm",
    mixins:[JeecgListMixin, mixinDevice],
    components: {

    },
    data () {
      return {
        form: this.$form.createForm(this),
        validatorRules:{},
        title:"操作",
        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,
        description: 'HlwInvoiceManageModalForm管理',
        // 表头
        columns: [
          {
            title:'姓名',
            align:"center",
            dataIndex: 'userName',
          },
          {
            title:'证件号码',
            align:"center",
            dataIndex: 'idcardNumber',
            customRender:function (text,record) {
              return text.replace(/^(.{6})(?:\d+)(.{4})$/, "$1****$2")
            }
          },
          {
            title:'手机号',
            align:"center",
            dataIndex: 'phone'
          },
          {
            title:'付款状态',
            align:"center",
            dataIndex: 'status_dictText'
          },
          {
            title:'创客佣金',
            align:"center",
            dataIndex: 'netPayment'
          },
          {
            title: '创建人',
            dataIndex: 'createBy',
            align: "center",
          },
          {
            title: '创建时间',
            dataIndex: 'createTime',
            align: "center",
          },
          {
            title: '更新时间',
            dataIndex: 'updateTime',
            align: "center",
          },
          {
            title: '更新人',
            dataIndex: 'updateBy',
            align: "center",
          },
        ],
        url: {
          list: "/wisdom/hlwInvoice/detailList",
        },
        dictOptions:{},
      }
    },
    computed: {
      importExcelUrl: function(){
        return `${window._CONFIG['domianURL']}/${this.url.importExcelUrl}`;
      },
    },
    created () {
      this.model=JSON.parse(this.$route.query.record)
      this.loadData(1)
    },
    methods: {
      initDictConfig(){
      },
      edit (record) {
        this.form.resetFields();
        this.model = Object.assign({}, record);
        this.visible = true;
      },
      loadData(arg) {
        if (!this.url.list) {
          this.$message.error('请设置url.list属性!')
          return
        }
        if(!this.model.paymentId){
          return;
        }
        //加载数据 若传入参数1则加载第一页的内容
        if (arg === 1) {
          this.ipagination.current = 1
        }
        var params = this.getQueryParams();//查询条件
        params.paymentId=this.model.paymentId;
        this.loading = true
        getAction(this.url.list, params).then((res) => {
          if (res.success) {
            this.dataSource = res.result.records
            this.ipagination.total = res.result.total
          }
          this.loading = false
        })
      },

      handleOk () {
        this.$emit('ok');
        this.close()
      },
      handleCancel () {
        this.$emit('ok');
        this.close()
      },
      close() {
        this.visible = false
      },




    }
  }
</script>
<style scoped>
  @import '~@assets/less/common.less';
  .ant-descriptions-title {
    margin-bottom: 20px;
    color: rgba(0,0,0,.85);
    font-weight: 700;
    font-size: 16px;
    line-height: 1.5;
  }
</style>