laws_weilai/jero-web/src/views/toDoCenter/regulatoryAssessmentTasks/index.vue

<template>
  <a-card :bordered="false">
    <div class="table-page-search-wrapper">
      <a-form layout="inline" @keyup.enter.native="searchQuery">
        <a-row :gutter="24">
          <a-col :md="6" :sm="8">
            <div class="box-title-text">
              <div class="title-text" :title="$t('standardInformation')">
                <span>{{$t('standardInformation')}}</span>
              </div>
              <a-input class="box-input" :placeholder="$t('PleaseEnter')+$t('standardInformation')"
                       v-model="queryParam.standardInfo"></a-input>
            </div>
          </a-col>
          <a-col :md="6" :sm="8">
            <div class="box-title-text tree-select">
              <div class="title-text" :title="$t('taskType')">
                <span>{{$t('taskType')}}</span>
              </div>
              <a-select :placeholder="$t('PleaseSelect')+$t('taskType')"
                        class="box-input"
                        :getPopupContainer="triggerNode=> triggerNode.parentNode"
                        allowClear
                        v-model="queryParam.flowType">
                <a-select-option v-for="(item, key) in taskTypeList"
                                 :key="key"
                                 :value="item.value">
                     <span style="display: inline-block;width: 100%" :title=" item.name">
                           {{ item.name }}
                     </span>
                </a-select-option>
              </a-select>
            </div>
          </a-col>
          <span style="float: right;overflow: hidden;margin-right: 11px" class="table-page-search-submitButtons">
               <a-col :md="6" :sm="24">
                  <a-button class="box-button" type="primary" @click="searchQuery">{{$t('query')}}</a-button>
                  <a-button class="box-button" style="margin-left: 8px" @click="searchReset">{{$t('reset')}}</a-button>
               </a-col>
          </span>
        </a-row>
      </a-form>
    </div>
    <a-tabs v-model="tabActive" @change="callback">
      <a-tab-pane :key="$t('toDoProcess')" :tab="$t('toDoProcess')">
        <dealtWith v-if="tabActive == $t('toDoProcess')" ref="dealtWithRef"/>
      </a-tab-pane>
      <a-tab-pane :key="$t('processDone')" :tab="$t('processDone')">
        <doneList v-if="tabActive == $t('processDone')" ref="doneListRef"/>
      </a-tab-pane>
      <a-tab-pane :key="$t('sentProcess')" :tab="$t('sentProcess')">
        <SentList v-if="tabActive == $t('sentProcess')" ref="SentListRef"/>
      </a-tab-pane>
    </a-tabs>
  </a-card>
</template>

<script>
  import { getAction, postAction, deleteAction } from '@/api/manage'
  import dealtWith from './components/dealtWith'
  import doneList from './components/doneList'
  import SentList from './components/SentList'

  export default {
    name: 'index',
    components: {
      dealtWith,
      doneList,
      SentList
    },
    data() {
      return {
        queryParam: {},
        taskTypeList: [
          {
            name: this.$t('collectionOfRegulatoryOpinions'),
            value: '5'
          },
          {
            name: this.$t('regulatoryTechnicalAssessment'),
            value: '6'
          }
        ],
        tabActive: this.$t('toDoProcess')
      }
    },
    methods: {
      callback(value) {
        this.tabActive = value
      },
      searchQuery() {
        if (this.tabActive == this.$t('toDoProcess')) {
          this.$refs.dealtWithRef.searchQuery(this.queryParam )
        } else if (this.tabActive == this.$t('processDone')) {
          this.$refs.doneListRef.searchQuery(this.queryParam )
        } else if (this.tabActive == this.$t('sentProcess')) {
          this.$refs.SentListRef.searchQuery(this.queryParam )
        }
      },
      searchReset() {
        this.queryParam = {}
        if (this.tabActive == this.$t('toDoProcess')) {
          this.$refs.dealtWithRef.searchReset()
        } else if (this.tabActive == this.$t('processDone')) {
          this.$refs.doneListRef.searchReset()
        } else if (this.tabActive == this.$t('sentProcess')) {
          this.$refs.SentListRef.searchReset()
        }
      },
    }
  }
</script>

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

  .box-title-text {
    line-height: 1.4;
    display: flex;
    align-items: center;
    margin-bottom: 10px;
  }

  .title-text {
    width: 20%;
    min-width: 110px;
    color: #000F16;
    display: inline-block;
    font-weight: 500;
    font-size: 14px;
    margin-right: 16px;
    margin-top: 3px;
    text-align: right;
    white-space: nowrap;
    overflow: hidden;
    text-overflow: ellipsis;
  }

  .box-input {
    display: inline-block;
    width: 70%;
    height: 38px;
    margin-top: 2px;
  }

  .box-button {
    height: 38px;
    /*margin-top: 2px;*/
  }

  .text-operation {
    margin-right: 8px;
  }

  .itemModel {
    width: calc(100% - 130px);
    display: inline-block;
    margin-top: 2px;
  }

  .Required {
    color: red;
    margin-right: 4px;
  }

  ::v-deep .ant-table-row:first-child {
    background: #fff !important;
    opacity: 0.9;
  }

  ::v-deep .ant-table-body {
    background: transparent !important;
  }
</style>