income_payments_client/src/views/contractManagement/revenueContract/modules/SelectWorkingGroupProjectModule.vue

<template>
  <j-modal :title="title"
           :width="width"
           :visible="visible"
           :confirmLoading="confirmLoading"
           switchFullscreen
           @ok="handleOk"
           @cancel="handleCancel"
           cancelText="关闭">
    <div class="table-page-search-wrapper">
      <a-form layout="inline" @keyup.enter.native="searchQuery">
        <a-row>
          <!--          工作组项目查询-->
          <a-col :xl="6" :lg="7" :md="8" :sm="24">
            <a-form-item label="工作组项目" :labelCol="labelCol" :wrapperCol="wrapperCol">
              <a-input placeholder="请输入工作组项目" v-model="queryParam.workingGroupProject" :maxLength='50'></a-input>
            </a-form-item>
          </a-col>
          <a-col :xl="6" :lg="7" :md="8" :sm="24">
            <a-form-item label="运行年份" :labelCol="labelCol" :wrapperCol="wrapperCol">
              <j-year-date style="width:100%" placeholder="请选择运行年份" v-model="queryParam.year" @change="dateChange"></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">重置</a-button>
            </span>
          </a-col>
        </a-row>
      </a-form>
    </div>
    <!--    /查询区域-->

    <!--    操作按钮区域-->
    <div class="table-operator">
      <a-button type="primary" icon="plus" @click="handleAdd" v-has="'workingGroupMember:add'">新增</a-button>
    </div>
    <!--    操作按钮区域-end-->

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

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

        <!--        进度-->
        <template slot="rateOfProgress" slot-scope="text">
          <progress-bar :data="text"></progress-bar>
        </template>

        <template slot="status-pack" slot-scope="text,record">
          <status-slot :statu-obj="record" :status-no="text"></status-slot>
        </template>
      </a-table>
    </div>
    <!--    /表格区域-->

    <!--    工作组项目新增-->
    <working-group-member-unit-module
      ref="workingGroupMemberForm"
      @ok="addOk"
      v-bind="$attrs"
      :disabled-charge-company="true"
      :is-contract-num-disabled="true"
      :flag="1"
      :default-charge-way="2"></working-group-member-unit-module>
  </j-modal>
</template>

<script>

import { JeroListMixin } from '../../../../mixins/JeroListMixin'
import JYearDate from '../../../../components/jero/JYearDate'
import WorkingGroupMemberUnitModule from '../../../projectManagement/modules/WorkingGroupMemberUnitModule'
import { associatedProject } from '../../../../api/incomePaymentsApi'
import ProgressBar from '../../../../components/ProgressBar'

export default {
  name: 'SelectWorkingGroupProjectModule',
  components: { WorkingGroupMemberUnitModule, JYearDate, ProgressBar },
  mixins: [JeroListMixin],
  props: {
    // 打包状态
    pack: {
      type: [Number, String],
      requird: false,
      default: null
    },
    // 收入合同id
    contractId: {
      type: String,
      requird: false,
      default: null
    },
    // 项目类型，1--普通项目；2--工作组项目；3--会议项目；4--会员项目
    projectType: {
      type: Number,
      requird: false,
      default: null
    }
  },
  data() {
    return {
      title: '工作组项目列表',
      width: 1200,
      visible: false,
      confirmLoading: false,
      columns: [
        {
          title: '序号',
          dataIndex: '',
          key: 'rowIndex',
          width: 60,
          align: 'center',
          customRender: function (t, r, index) {
            return parseInt(index) + 1
          }
        }, {
          title: '工作组项目',
          align: 'center',
          dataIndex: 'workingGroupProject',
          scopedSlots: { customRender: 'text' }
        }, {
          title: '负责人A',
          align: 'center',
          dataIndex: 'principalNameA',
          scopedSlots: { customRender: 'text' }
        }, {
          title: '进度',
          align: 'center',
          dataIndex: 'obj',
          width: 250,
          scopedSlots: { customRender: 'rateOfProgress' }
        }
      ],
      labelCol: {
        xs: { span: 24 },
        sm: { span: 5 }
      },
      wrapperCol: {
        xs: { span: 24 },
        sm: { span: 10 }
      },
      disableMixinCreated: true,
      url: {
        list: '/project/payWorkingGroup/queryListByCompany'
      }
    }
  },
  methods: {
    /**
     * 运行年份变化
     */
    dateChange() {
      this.$forceUpdate()
    },
    open() {
      // 运行年份默认为当年
      this.queryParam.year = new Date().getFullYear().toString()
      this.lastQueryParam.year = new Date().getFullYear().toString()
      this.loadData()
      this.visible = true
    },
    close() {
      this.queryParam = {}
      this.selectedRowKeys = []
      this.visible = false
      this.$emit('ok')
    },
    handleOk() {
      if (this.confirmLoading) {
        return
      }
      this.confirmLoading = true
      if (this.selectedRowKeys.length <= 0) {
        this.$message.warn('请选择项目后再提交关联')
        this.confirmLoading = false
        return
      }
      let submitData = []
      let projectItem
      this.selectedRowKeys.forEach(item => {
        projectItem = {
          contractId: this.contractId,
          projectId: item,
          projectType: this.projectType
        }
        submitData.push(projectItem)
      })
      associatedProject(submitData).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()
    },
    /**
     * 打开新增module
     */
    handleAdd() {
      this.$refs.workingGroupMemberForm.add()
      this.$refs.workingGroupMemberForm.title = '新增'
      this.$refs.workingGroupMemberForm.disableSubmit = false
    },
    // 下拉框的搜索
    filterOption(input, option) {
      return (
        option.componentOptions.children[0].text.toLowerCase().indexOf(input.toLowerCase()) >= 0
      )
    },
    /**
     * 新增完成后关闭两个对话框
     */
    addOk() {
      this.close()
      this.$emit('ok')
    },
    /**
     * 重置
     */
    searchReset() {
      this.lastQueryParam = {
        year: new Date().getFullYear().toString()
      }
      this.queryParam = {
        year: new Date().getFullYear().toString()
      }
      this.loadData(1)
    },
  }
}
</script>

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