income_payments_client/src/views/packManagement/modules/PackProjectSelectProjectModule.vue

<template>
  <j-modal
    :title="title"
    :width="width"
    :visible="visible"
    :confirmLoading="confirmLoading"
    switchFullscreen
    @ok="handleOk"
    @cancel="handleCancel"
    cancelText="关闭">
    <a-spin :spinning="confirmLoading">
      <!--    查询区域-start -->
      <div class="table-page-search-wrapper">
        <a-form layout="inline" @keyup.enter.native="searchQuery">
          <a-row>
            <a-col :xl="8" :lg="9" :md="10" :sm="24">
              <a-form-item label="项目名称" :labelCol="labelCol" :wrapperCol="wrapperCol">
                <a-input placeholder="请输入项目名称" v-model="queryParam.projectName" :maxLength='50'></a-input>
              </a-form-item>
            </a-col>
            <a-col :xl="8" :lg="9" :md="10" :sm="24">
              <a-form-item label="运行年份" :labelCol="labelCol" :wrapperCol="wrapperCol">
                <j-year-date style="width:100%" placeholder="请选择运行年份" v-model="queryParam.year"></j-year-date>
              </a-form-item>
            </a-col>
            <a-col :xl="6" :lg="7" :md="8" :sm="24">
            <span class="table-page-search-submitButtons">
              <a-button type="primary" icon="search" @click="searchQuery">查询</a-button>
              <a-button icon="reload" @click="searchReset" class="reset-button">重置</a-button>
            </span>
            </a-col>
          </a-row>
        </a-form>
      </div>
      <!--      /查询区域-->

      <!--      表格区域-->
      <div>
        <a-table
          ref="table"
          size="middle"
          bordered
          rowKey="id"
          :columns="columns"
          :scroll="{x: 1000}"
          :dataSource="dataSource"
          :pagination="ipagination"
          :loading="loading"
          :rowSelection="{selectedRowKeys: selectedRowKeys, onChange: onSelectChange}"
          @change="handleTableChange"
          class="j-table-force-nowrap">

          <!--        项目名称-->
          <template slot="projectName" slot-scope="text, record">
            <j-ellipsis :value="text" :length="18" class="primary-color" @click="openDetailModal(record)"></j-ellipsis>
          </template>


          <template slot="text" slot-scope="text">
            <j-ellipsis :value="text" :length="18"></j-ellipsis>
          </template>

          <!--        打包、需要发票、到账、开票、邮寄状态-->
          <template slot="status" slot-scope="text,record">
            <status-slot :statu-obj="record" :status-no="text" :status-type="true"></status-slot>
          </template>

          <template slot="status-pack" slot-scope="text,record">
            <status-slot :statu-obj="record" :status-no="text"></status-slot>
          </template>
        </a-table>
      </div>
    </a-spin>
  </j-modal>
</template>

<script>
import { JeroListMixin } from '../../../mixins/JeroListMixin'
import JYearDate from '../../../components/jero/JYearDate'
import StatusSlot from '../../../components/tools/StatusSlot'
import { addPackProject } from '../../../api/incomePaymentsApi'

export default {
  name: 'PackProjectSelectProjectModule',
  components: { JYearDate, StatusSlot },
  mixins: [JeroListMixin],
  props: {
    // 打包id
    packId: {
      type: String,
      required: false,
      default: null
    },
    visible: {
      type: Boolean,
      required: false,
      default: false
    }
  },
  watch:{
    visible(value) {
      if (value) {
        this.open()
      }
    }
  },
  data() {
    return {
      title: '添加打包项目',
      width: 1200,
      confirmLoading: false,
      labelCol: {
        xs: { span: 24 },
        sm: { span: 5 }
      },
      wrapperCol: {
        xs: { span: 24 },
        sm: { span: 10 }
      },
      url:{
        list: '/pack/payPackCompanyProject/queryNotPackListAll'
      },
      columns: [
        {
          title: '序号',
          dataIndex: '',
          key: 'rowIndex',
          width: 60,
          align: 'center',
          customRender: function (t, r, index) {
            return parseInt(index) + 1
          }
        }, {
          title: '项目名称',
          align: 'center',
          width: 280,
          dataIndex: 'chargeProject',
          scopedSlots: { customRender: 'projectName' }
        }, {
          title: '来款用途',
          align: 'center',
          width: 180,
          dataIndex: 'chargeUse_dictText',
          scopedSlots: { customRender: 'text' }
        }, {
          title: '项目负责人',
          align: 'center',
          width: 280,
          dataIndex: 'principalName',
          scopedSlots: { customRender: 'text' }
        },{
          title: '企业联系人',
          align: 'center',
          width: 280,
          dataIndex: 'contactsTemporaryName',
          scopedSlots: { customRender: 'text' }
        },  {
          title: '应收金额',
          align: 'center',
          width: 120,
          dataIndex: 'receivableAmount'
        }, {
          title: '实收金额',
          align: 'center',
          width: 120,
          dataIndex: 'paidAmount'
        }, {
          title: '需要发票',
          align: 'center',
          width: 80,
          dataIndex: 'needInvoice',
          scopedSlots: { customRender: 'status-pack' }
        }, {
          title: '到账',
          align: 'center',
          width: 80,
          dataIndex: 'inAccount',
          scopedSlots: { customRender: 'status' }
        }, {
          title: '开票',
          align: 'center',
          width: 80,
          dataIndex: 'makeInvoice',
          scopedSlots: { customRender: 'status' }
        }, {
          title: '邮寄',
          align: 'center',
          width: 80,
          dataIndex: 'mail',
          scopedSlots: { customRender: 'status' }
        }
      ],
      disableMixinCreated: true,
      filters: {
        packId: this.packId
      }
    }
  },
  methods: {
    handleOk() {
      if (this.confirmLoading) {
        return
      }
      this.confirmLoading = true
      if (this.selectedRowKeys.length === 0) {
        this.$message.warn('请至少选择一个项目')
        this.confirmLoading = false
        return
      }
      let projectIds = this.selectedRowKeys.join(',')
      let params = {
        projectIds: projectIds,
        packId: this.packId
      }
      addPackProject(params).then(res => {
        if (res.success) {
          this.$message.success(res.message)
          this.close()
          this.$emit('ok')
        } else {
          this.$message.warn(res.message)
        }
      }).finally(() => {
        setTimeout(() => {
          this.confirmLoading = false
        }, 1000)
      })
    },
    handleCancel() {
      this.close()
    },
    open() {
      this.filters.packId = this.packId
      console.log(this.filters)
      this.loadData()
    },
    close() {
      this.selectedRowKeys = []
      this.$emit('update:visible', false)
    }
  }
}
</script>

<style scoped lang="less">
@import '~@assets/less/common.less';
</style>