income_payments_client/src/views/projectManagement/WorkingGroupProjectManagement.vue

<template>
  <div>
    <page-header-title :img-for-icon="IconWorkingGruop"></page-header-title>
    <a-card :bordered="false">
      <!--    查询区域-start -->
      <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"></a-input>
              </a-form-item>
            </a-col>
            <a-col :xl="6" :lg="7" :md="8" :sm="24">
              <a-form-item label="负责人A" :labelCol="labelCol" :wrapperCol="wrapperCol">
                <select-principal placeholder="请选择负责人" v-model="queryParam.principalIdA"></select-principal>
              </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"></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>
      <!--    /查询区域-end-->

      <!--    操作按钮区域-->
      <div class="table-operator">
        <a-button type="primary" icon="plus" @click="handleAdd">新增</a-button>
        <a-button type="danger" icon="delete" @click="batchDel">批量删除</a-button>

        <!--      进度条tooltip-->
        <div class="tooltip">
          <div class="tooltip-item">
            <div class="tooltip-color tooltip-pay-in-full"></div>
            <span>已付全款</span>
          </div>
          <div class="tooltip-item">
            <div class="tooltip-color tooltip-partial-payment"></div>
            <span>部分付款</span>
          </div>
          <div class="tooltip-item">
            <div class="tooltip-color tooltip-non-payment"></div>
            <span>未付款</span>
          </div>
        </div>
        <!--      /进度条tooltip-->
      </div>
      <!--    /操作按钮区域-end-->

      <!--    table表格区域-->
      <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">
            <div class="primary-color" @click="goMemberUnitMaintenance(record)">{{ text }}</div>
          </template>

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

          <template slot="text" slot-scope="text,record">
            <j-ellipsis :value="text" :length="20"></j-ellipsis>
          </template>

          <span slot="action" class="action-span-cell" slot-scope="text, record">
          <a @click="goConferenceMaintenance(record)">会议维护</a>
          <a @click="handleEdit(record)">编辑</a>
          <a @click="handleDelete(record.id)">删除</a>
        </span>
        </a-table>
      </div>
      <!--    /table表格区域-->
      <working-group-project-module ref="modalForm" @ok="modalFormOk"></working-group-project-module>
    </a-card>
  </div>
</template>

<script>
import { JeroListMixin } from '@/mixins/JeroListMixin'
import JYearDate from '@comp/jero/JYearDate'
import WorkingGroupProjectModule from '@views/projectManagement/modules/WorkingGroupProjectModule'
import SelectPrincipal from '@comp/company/SelectPrincipal'
import ProgressBar from '@comp/ProgressBar'
import PageHeaderTitle from '@comp/layouts/PageHeaderTitle'
import IconWorkingGruop from '@/assets/imgs/icon/icon_working_group.png'

export default {
  name: 'WorkingGroupProjectManagement',
  components: { JYearDate, WorkingGroupProjectModule, SelectPrincipal, ProgressBar, PageHeaderTitle },
  mixins: [JeroListMixin],
  data() {
    return {
      IconWorkingGruop,
      labelCol: {
        xs: { span: 24 },
        sm: { span: 5 }
      },
      wrapperCol: {
        xs: { span: 24 },
        sm: { span: 10 }
      },
      url: {
        list: '/project/payWorkingGroup/list',
        delete: '/project/payWorkingGroup/delete',
        deleteBatch: '/project/payWorkingGroup/deleteBatch'
      },
      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: 'projectName' }
        }, {
          title: '负责人A',
          align: 'center',
          dataIndex: 'principalNameA'
        }, {
          title: '进度',
          align: 'center',
          dataIndex: 'obj',
          width: 250,
          scopedSlots: { customRender: 'rateOfProgress' }
        }, {
          title: '操作',
          dataIndex: 'action',
          align: 'center',
          fixed: 'right',
          width: 180,
          scopedSlots: { customRender: 'action' }
        }
      ]
    }
  },
  methods: {
    /**
     * 会议维护
     * @param record
     */
    goConferenceMaintenance(record) {
      this.$router.push({
        path: '/projectManagement/ConferenceMaintenance',
        query: {
          workingGroupProject: record.workingGroupProject,
          workingGroupProjectId: record.id
        }
      })
    },
    goMemberUnitMaintenance(record) {
      this.$router.push({
        path: '/projectManagement/WorkingGroupMemberUnitMaintenance',
        query: {
          workingGroupProject: record.workingGroupProject,
          workingGroupProjectId: record.id
        }
      })
    }
  }
}
</script>

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

.tooltip {
  float: right;
  width: auto;
  display: flex;
  justify-content: flex-end;
  align-items: flex-end;
  height: 40px;

  &-item {
    margin-right: 10px;
    display: flex;
    align-items: center;
  }

  &-color {
    width: 13px;
    height: 13px;
    margin-right: 5px;
    border-radius: 2px;
  }

  &-pay-in-full {
    background: linear-gradient(0deg, #069f99 0%, #07b0a9 100%);
  }

  &-partial-payment {
    background: linear-gradient(0deg,#0075a9 0%, #0096d8 100%);
  }

  &-non-payment {
    background: #e8e8e8;
  }
}
</style>