布局项目库变更

2022-10-17 10:59:54 +08:00
parent cc976709a5
commit 2cbfb02ea6
10 changed files with 458 additions and 45 deletions
@@ -1321,4 +1321,6 @@ module.exports = {
  secondaryDirectory:'Secondary directory',
  OnlyPersonsCanBeSelected:'The maximum upper limit is exceeded; Only 100 persons can be selected',
  projectVersion:'Project Version',
+  softwareVersion:'Software version',
+  versionStatistics:'Version statistics',
 }
@@ -1422,4 +1422,6 @@ module.exports = {
  secondaryDirectory:'二级目录',
  OnlyPersonsCanBeSelected:'超出最大上限；最多只能选择100个人员',
  projectVersion:'项目版本',
+  softwareVersion:'软件版本',
+  versionStatistics:'版本统计',
 }
@@ -57,6 +57,12 @@
            <a-icon type="profile"/>
            {{$t('TaskParameterCollection')}}
          </div>
+          <div class="Virtual-detail-left-text"
+               :title="$t('projectStatus')"
+               @click="textClick(5,$t('projectStatus'))">
+            <a-icon type="cluster" />
+            {{$t('projectStatus')}}
+          </div>
          <a-icon @click="textIconClick" type="menu-fold" class="text-icon"/>
        </div>
        <div v-if="!isDisplay" class="Virtual-detail-left-One">
@@ -85,17 +91,24 @@
               @click="textClick(4,$t('TaskParameterCollection'))">
            <a-icon type="profile"/>
          </div>
+          <div class="Virtual-detail-left-text"
+               :title="$t('projectStatus')"
+               @click="textClick(5,$t('projectStatus'))">
+            <a-icon type="cluster" />
+          </div>
          <a-icon @click="textIconClick" type="menu-unfold" class="text-icon-one"/>
        </div>
        <div class="Virtual-detail-right"
             :style="{'width':isDisplay?'calc(100% - 240px)':'calc(100% - 66px)'}">
-          <ProjectDetailsName @TaskListChange="TaskListChange" v-if="textTitle === $t('projectDetails')"/>
+          <ProjectDetailsName v-if="textTitle === $t('projectDetails')"/>
          <listOfRegulations v-else-if="textTitle === $t('listOfRegulations')"
-          :areaOfResponsibilityList="areaOfResponsibilityList"/>
+                             :areaOfResponsibilityList="areaOfResponsibilityList"/>
          <TaskList :isDisplayNum="isDisplayNum" :areaOfResponsibility="areaOfResponsibility"
                    v-else-if="textTitle === $t('taskList')"/>
          <TaskParameterCollection v-else-if="textTitle === $t('TaskParameterCollection')"/>
          <nonConformance v-else-if="textTitle === $t('nonConformance')"/>
+          <projectStatus @TaskListChange="TaskListChange"
+                         v-else-if="textTitle === $t('projectStatus')"/>
        </div>
      </div>
    </div>
@@ -112,6 +125,7 @@
  import ProjectDetailsName from '../components/ProjectDetails'
  import TaskParameterCollection from '../components/TaskParameterCollection'
  import nonConformance from '../components/nonConformance'
+  import projectStatus from '../components/projectStatus'
  import updateLog from '@/components/UpdateLog/index'
  import historicalVersionList from '../components/historicalVersionList'
  import commentList from '../components/commentList'
@@ -128,7 +142,8 @@
      nonConformance,
      updateLog,
      historicalVersionList,
-      commentList
+      commentList,
+      projectStatus
    },
    data() {
      return {
@@ -138,7 +153,7 @@
        isTrue: true,
        loading: false,
        isDisplay: true,
-        areaOfResponsibilityList:{},
+        areaOfResponsibilityList: {},
        url: {
          logList: '/project/projectLawsInventoryLogEO/page',
          historicalVersionUrl: '',
@@ -194,7 +209,6 @@
          textColor[0].classList.remove('Virtual-detail-left-text-color')
        }
        let text = document.getElementsByClassName('Virtual-detail-left-text')
-        console.log(text)
        if (name == 0) {
          text[name].classList.add('Virtual-detail-left-text-color')
          this.textTitle = text[name].title
@@ -289,10 +303,10 @@
        })
      },
      TaskListChange(item) {
-        if (item.isListing && item.isListing == '1'){
+        if (item.isListing && item.isListing == '1') {
          this.areaOfResponsibilityList = item
          this.textTitle = this.$t('listOfRegulations')
-        }else{
+        } else {
          this.areaOfResponsibility = item
          this.textTitle = this.$t('taskList')
        }
@@ -47,6 +47,12 @@
    components: {
      responsibilityList
    },
+    props: {
+      idList: {
+        type: Array,
+        default: []
+      }
+    },
    data() {
      return {
        queryParam:{
@@ -99,7 +105,13 @@
        })
      },
      getoptions(){
-        getAction('project/projectLibraryBase/getProjectDetailsStatisticsCollectManifestLabel', {id:this.$route.query.id}).then((res) => {
+        let id = ''
+        if (this.idList && this.idList.length > 0) {
+          id = this.$route.query.id +','+this.idList.join(',')
+        } else {
+          id = this.$route.query.id
+        }
+        getAction('project/projectLibraryBase/getProjectDetailsStatisticsCollectManifestLabel', {id:id}).then((res) => {
          if (res.success) {
            this.options = res.result
            this.queryParam.ctype = this.options[0].value
@@ -23,13 +23,18 @@
        <span class="text-field-right" :title="queryForm.targetMarket_dictText"
        >{{queryForm.targetMarket_dictText}}</span>
      </div>
+      <div class="text-field">
+        <span class="text-field-left" :title="$t('VersionNumber')">{{$t('VersionNumber')}}</span>
+        <span class="text-field-right" :title="queryForm.VersionNumber"
+        >{{queryForm.VersionNumber}}</span>
+      </div>
+    </div>
+    <div class="content-text">
      <div class="text-field">
        <span class="text-field-left" :title="$t('projectStatus')">{{$t('projectStatus')}}</span>
        <span class="text-field-right" :title="queryForm.projectStatus_dictText"
        >{{queryForm.projectStatus_dictText}}</span>
      </div>
-    </div>
-    <div class="content-text">
      <div class="text-field">
        <span class="text-field-left" :title="$t('DigitalPlatform')">{{$t('DigitalPlatform')}}</span>
        <span class="text-field-right" :title="queryForm.digitalPlatform"
@@ -43,17 +48,10 @@
    </div>
    <div class="content-text">
      <div class="text-field">
-        <span class="text-field-left" :title="$t('StudioEngineer')">{{$t('StudioEngineer')}}</span>
-        <span class="text-field-right" :title="queryForm.studioEngineerName"
-        >{{queryForm.studioEngineerName}}</span>
+        <span class="text-field-left" :title="$t('softwareVersion')">{{$t('softwareVersion')}}</span>
+        <span class="text-field-right" :title="queryForm.softwareVersion"
+        >{{queryForm.softwareVersion}}</span>
      </div>
-      <div class="text-field">
-        <span class="text-field-left" :title="$t('certifiedEngineer')">{{$t('certifiedEngineer')}}</span>
-        <span class="text-field-right" :title="queryForm.certificationEngineerName"
-        >{{queryForm.certificationEngineerName}}</span>
-      </div>
-    </div>
-    <div class="content-text">
      <div class="text-field">
        <span class="text-field-left" :title="$t('IPDInformation')">{{$t('IPDInformation')}}</span>
        <span class="text-field-right text-field-right-color"
@@ -61,6 +59,8 @@
              @click="urlClick(queryForm.ipdInfo)"
        >{{queryForm.ipdInfo}}</span>
      </div>
+    </div>
+    <div class="content-text">
      <div class="text-field">
        <span class="text-field-left" :title="$t('certificationProgram')">{{$t('certificationProgram')}}</span>
        <span class="text-field-right text-field-right-color"
@@ -77,16 +77,38 @@
      </div>
    </div>
    <div class="content-text">
-      <div class="text-field" style="width: 50%">
+      <div class="text-field-content">
+        <span class="text-field-left" :title="$t('explain')">{{$t('explain')}}</span>
+        <span class="text-field-right" :title="queryForm.explain"
+        >{{queryForm.explain}}</span>
+      </div>
+    </div>
+    <div class="content-text">
+      <div class="text-field">
+        <span class="text-field-left" :title="$t('StudioEngineer')">{{$t('StudioEngineer')}}</span>
+        <span class="text-field-right" :title="queryForm.studioEngineerName"
+        >{{queryForm.studioEngineerName}}</span>
+      </div>
+      <div class="text-field">
+        <span class="text-field-left" :title="$t('certifiedEngineer')">{{$t('certifiedEngineer')}}</span>
+        <span class="text-field-right" :title="queryForm.certificationEngineerName"
+        >{{queryForm.certificationEngineerName}}</span>
+      </div>
+      <div class="text-field">
        <span class="text-field-left" :title="$t('ListOfRelevantPersonnel')">{{$t('ListOfRelevantPersonnel')}}</span>
        <span class="text-field-right"
        >
-          <a-button type="primary" v-has="'projectRelatedPersonnel:page'" class="button-text"
+          <a-button type="primary" v-has="'projectRelatedPersonnel:page'"
+                    :title="$t('ListOfRelevantPersonnel')"
+                    class="button-text"
                    @click="ListOfRelevantPersonnelClick">
                  {{$t('ListOfRelevantPersonnel')}}
          </a-button>
        </span>
      </div>
+    </div>
+    <div class="content-text">
+
    </div>
    <div class="box-text">
      <div class="header-text">
@@ -114,21 +136,21 @@
      </div>
      <div class="process-content-right-xian"></div>
    </div>
-    <a-tabs style="margin-top: 20px" v-model="activeKey" class="ant-tabs">
-      <a-tab-pane :key="$t('CurrentStatusOfTheProject')" :tab="$t('CurrentStatusOfTheProject')">
-        <currentStatusOfTheProjectEcharts @currentStatus="currentStatus"
-                                          v-if="activeKey == $t('CurrentStatusOfTheProject')"/>
-      </a-tab-pane>
-      <a-tab-pane :key="$t('DeliverableStatus')" :tab="$t('DeliverableStatus')">
-        <deliverableStatusEchart @currentStatus="currentStatus" v-if="activeKey == $t('DeliverableStatus')"/>
-      </a-tab-pane>
-      <a-tab-pane :key="$t('CertificationProgress')" :tab="$t('CertificationProgress')">
-        <certificationProgressEchart @currentStatus="currentStatus" v-if="activeKey == $t('CertificationProgress')"/>
-      </a-tab-pane>
-      <a-tab-pane :key="$t('Parametercollection')" :tab="$t('Parametercollection')">
-        <ParameterCollectionEchart @currentStatus="currentStatus" v-if="activeKey == $t('Parametercollection')"/>
-      </a-tab-pane>
-    </a-tabs>
+<!--    <a-tabs style="margin-top: 20px" v-model="activeKey" class="ant-tabs">-->
+<!--      <a-tab-pane :key="$t('CurrentStatusOfTheProject')" :tab="$t('CurrentStatusOfTheProject')">-->
+<!--        <currentStatusOfTheProjectEcharts @currentStatus="currentStatus"-->
+<!--                                          v-if="activeKey == $t('CurrentStatusOfTheProject')"/>-->
+<!--      </a-tab-pane>-->
+<!--      <a-tab-pane :key="$t('DeliverableStatus')" :tab="$t('DeliverableStatus')">-->
+<!--        <deliverableStatusEchart @currentStatus="currentStatus" v-if="activeKey == $t('DeliverableStatus')"/>-->
+<!--      </a-tab-pane>-->
+<!--      <a-tab-pane :key="$t('CertificationProgress')" :tab="$t('CertificationProgress')">-->
+<!--        <certificationProgressEchart @currentStatus="currentStatus" v-if="activeKey == $t('CertificationProgress')"/>-->
+<!--      </a-tab-pane>-->
+<!--      <a-tab-pane :key="$t('Parametercollection')" :tab="$t('Parametercollection')">-->
+<!--        <ParameterCollectionEchart @currentStatus="currentStatus" v-if="activeKey == $t('Parametercollection')"/>-->
+<!--      </a-tab-pane>-->
+<!--    </a-tabs>-->
    <listOfRelevantPersonnel ref="listOfRelevantPersonnelRef"/>
    <addModel :url="url" ref="addModelRef" @addModelList="addModelList"/>
    <settingList :url="url" ref="settingListRef" @settingListForm="settingListForm"/>
@@ -189,9 +211,9 @@
          }
        })
      },
-      currentStatus(item) {
-        this.$emit('TaskListChange', item)
-      },
+      // currentStatus(item) {
+      //   this.$emit('TaskListChange', item)
+      // },
      getSetting() {
        getAction(this.url.queryByProjectId, { projectId: this.$route.query.id }).then((res) => {
          if (res.success) {
@@ -273,6 +295,35 @@
        font-weight: 400;
      }
    }
+
+    .text-field-content {
+      width: 100%;
+      margin-bottom: 8px;
+
+      .text-field-left {
+        width: 124px;
+        display: inline-block;
+        font-size: 14px;
+        font-weight: 400;
+        color: #6F7385;
+        text-overflow: ellipsis;
+        white-space: nowrap;
+        overflow: hidden;
+        float: left;
+        margin-right: 24px;
+        margin-top: 3px;
+      }
+
+      .text-field-right {
+        width: calc(100% - 200px);
+        display: inline-block;
+        font-size: 16px;
+        float: left;
+        word-break: break-word;
+        color: #040B29;
+        font-weight: 400;
+      }
+    }
  }

  .process-content {
@@ -354,4 +405,8 @@
    height: 80px;
    line-height: 80px;
  }
+
+  .button-text {
+    padding: 0 13px;
+  }
 </style>
@@ -33,6 +33,12 @@
    components: {
      responsibilityList
    },
+    props: {
+      idList: {
+        type: Array,
+        default: []
+      }
+    },
    data() {
      return {
        loading: false,
@@ -79,7 +85,13 @@
        this.$emit('currentStatus', item)
      },
      getData() {
-        getAction(this.url.getProjectDetailsStatistics, { id: this.$route.query.id }).then((res) => {
+        let id = ''
+        if (this.idList && this.idList.length > 0) {
+          id = this.$route.query.id +','+this.idList.join(',')
+        } else {
+          id = this.$route.query.id
+        }
+        getAction(this.url.getProjectDetailsStatistics, { id: id }).then((res) => {
          if (res.success) {
            if (res.result) {
              let certificationProgressMap = res.result.certificationProgressMap ? res.result.certificationProgressMap.certificationProgressMapList : []
@@ -40,6 +40,12 @@
    components: {
      responsibilityList
    },
+    props: {
+      idList: {
+        type: Array,
+        default: []
+      }
+    },
    data() {
      return {
        loading: false,
@@ -77,7 +83,13 @@
    },
    methods: {
      getData() {
-        getAction(this.url.getProjectDetailsStatistics, { id: this.$route.query.id }).then((res) => {
+        let id = ''
+        if (this.idList && this.idList.length > 0) {
+          id = this.$route.query.id +','+this.idList.join(',')
+        } else {
+          id = this.$route.query.id
+        }
+        getAction(this.url.getProjectDetailsStatistics, { id: id }).then((res) => {
          if (res.success) {
            if (res.result) {
              let dataSource = res.result.currentProjectStatusMap ? res.result.currentProjectStatusMap.currentProjectStatusMapList : []
@@ -36,6 +36,12 @@
    components: {
      responsibilityList
    },
+    props: {
+      idList: {
+        type: Array,
+        default: []
+      }
+    },
    data() {
      return {
        url: {
@@ -52,10 +58,15 @@
    },
    methods: {
      getData() {
-        getAction(this.url.getProjectDetailsStatistics, { id: this.$route.query.id }).then((res) => {
+        let id = ''
+        if (this.idList && this.idList.length > 0) {
+          id = this.$route.query.id +','+this.idList.join(',')
+        } else {
+          id = this.$route.query.id
+        }
+        getAction(this.url.getProjectDetailsStatistics, { id: id }).then((res) => {
          if (res.success) {
            if (res.result) {
-
              let listingToConfirmMap = res.result.listingToConfirmMap ? res.result.listingToConfirmMap.listingToConfirmMapList : []
              let taskToConfirmMap = res.result.taskToConfirmMap ? res.result.taskToConfirmMap.taskToConfirmMapList : []
              let designComplianceMap = res.result.designComplianceMap ? res.result.designComplianceMap.designComplianceMapList : []
@@ -67,7 +78,6 @@
              this.dataEchartsOne(prehomoMap, 2)
              this.dataEchartsOne(verifyComplianceMap, 3)
            }
-
          }
        })
      },
@@ -0,0 +1,83 @@
+<template>
+  <a-card :bordered="false">
+    <div class="table-operator" style="margin-bottom: 10px">
+      <div @click="versionStatisticsClick" class="operator-text">
+        <a-icon type="plus"/>
+        {{$t('versionStatistics')}}
+      </div>
+    </div>
+    <a-tabs v-model="activeKey" class="ant-tabs">
+      <a-tab-pane :key="$t('CurrentStatusOfTheProject')" :tab="$t('CurrentStatusOfTheProject')">
+        <currentStatusOfTheProjectEcharts @currentStatus="currentStatus"
+                                          :idList="idList"
+                                          v-if="activeKey == $t('CurrentStatusOfTheProject')"/>
+      </a-tab-pane>
+      <a-tab-pane :key="$t('DeliverableStatus')" :tab="$t('DeliverableStatus')">
+        <deliverableStatusEchart @currentStatus="currentStatus" :idList="idList"
+                                 v-if="activeKey == $t('DeliverableStatus')"/>
+      </a-tab-pane>
+      <a-tab-pane :key="$t('CertificationProgress')" :tab="$t('CertificationProgress')">
+        <certificationProgressEchart @currentStatus="currentStatus" :idList="idList"
+                                     v-if="activeKey == $t('CertificationProgress')"/>
+      </a-tab-pane>
+      <a-tab-pane :key="$t('Parametercollection')" :tab="$t('Parametercollection')">
+        <ParameterCollectionEchart @currentStatus="currentStatus" :idList="idList"
+                                   v-if="activeKey == $t('Parametercollection')"/>
+      </a-tab-pane>
+    </a-tabs>
+    <versionStatistics ref="versionStatisticsRef" @versionStatisticsForm="versionStatisticsForm"/>
+  </a-card>
+</template>
+
+<script>
+  import currentStatusOfTheProjectEcharts from './currentStatusOfTheProjectEcharts'
+  import deliverableStatusEchart from './deliverableStatusEchart'
+  import ParameterCollectionEchart from './ParameterCollectionEchart'
+  import certificationProgressEchart from './certificationProgressEchart'
+  import versionStatistics from './versionStatistics'
+  import { getAction, postAction } from '@/api/manage'
+
+  export default {
+    name: 'projectStatus',
+    components: {
+      ParameterCollectionEchart,
+      currentStatusOfTheProjectEcharts,
+      deliverableStatusEchart,
+      certificationProgressEchart,
+      versionStatistics
+    },
+    data() {
+      return {
+        activeKey: this.$t('CurrentStatusOfTheProject'),
+        selectedRowKeys: [],
+        idList: []
+      }
+    },
+    methods: {
+      currentStatus(item) {
+        this.$emit('TaskListChange', item)
+      },
+      versionStatisticsClick() {
+        this.$refs.versionStatisticsRef.addModel(JSON.parse(JSON.stringify(this.selectedRowKeys)))
+      },
+      versionStatisticsForm(value) {
+        this.idList = []
+        let activeKey = JSON.parse(JSON.stringify(this.activeKey))
+        this.activeKey = ''
+        if (value && value.length > 0) {
+          value.forEach(res => {
+            this.idList.push(JSON.parse(res).id)
+          })
+        }
+        this.selectedRowKeys = JSON.parse(JSON.stringify(value))
+        this.$nextTick(()=>{
+          this.activeKey = activeKey
+        })
+      }
+    }
+  }
+</script>
+
+<style scoped>
+  @import '~@assets/less/common.less';
+</style>
@@ -0,0 +1,211 @@
+<template>
+  <a-drawer
+    :title="$t('versionStatistics')"
+    :maskClosable="false"
+    :width="1000"
+    placement="right"
+    :closable="true"
+    @close="handleCancel"
+    :visible="visible"
+    style="height: 100%;overflow: auto;padding-bottom: 53px;">
+    <div style="margin-bottom: 60px">
+      <!--      <div class="table-page-search-wrapper">-->
+      <!--        <a-form layout="inline" @keyup.enter.native="searchQuery">-->
+      <!--          <a-row :gutter="24">-->
+      <!--            <a-col :md="12" :sm="8">-->
+      <!--              <div class="box-title-text">-->
+      <!--                <div class="title-text" :title="$t('standard')">-->
+      <!--                  <span>{{$t('standard')}}</span>-->
+      <!--                </div>-->
+      <!--                <a-input class="box-input" :placeholder="$t('PleaseEnter')+$t('standard')"-->
+      <!--                         v-model="queryParam.serial_number"></a-input>-->
+      <!--              </div>-->
+      <!--            </a-col>-->
+      <!--            <span style="float: right;overflow: hidden;" class="table-page-search-submitButtons">-->
+      <!--               <a-col :md="12" :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-table
+        :columns="columns"
+        :rowKey="(record)=>JSON.stringify(record)"
+        :scroll="{x: '100%',y:500}"
+        :data-source="dataList"
+        :pagination="false"
+        :row-selection="{ selectedRowKeys: selectedRowKeys, onChange: onSelectChange }"
+        :loading="loading">
+
+      </a-table>
+      <div class="page" v-if="dataList.length > 0">
+        <a-pagination
+          :show-total="total => $t('total')+` ${total} `+$t('strip')"
+          show-quick-jumper
+          show-size-changer
+          :page-size.sync="pageSize"
+          :total="total"
+          :current="pageNo"
+          @change="onChange"
+          @showSizeChange="SizeChange"
+        />
+      </div>
+    </div>
+
+    <div class="drawer-bootom-button">
+      <a-button @click="handleCancel" style="margin-right: 16px">{{$t('cancel')}}</a-button>
+      <a-button @click="handleSubmit" type="primary" :loading="confirmLoading">{{$t('submit')}}</a-button>
+    </div>
+  </a-drawer>
+</template>
+
+<script>
+  import { getAction, postAction } from '@/api/manage'
+
+  export default {
+    name: 'versionStatistics',
+    data() {
+      return {
+        visible: false,
+        queryParam: {},
+        confirmLoading: false,
+        selectedRowKeys: [],
+        columns: [
+          {
+            title: this.$t('VersionNumber'),
+            dataIndex: 'VersionNumber',
+            align: 'center',
+            ellipsis: true,
+            width: 200
+          },
+          {
+            title: this.$t('describe'),
+            dataIndex: 'describe',
+            align: 'center',
+            ellipsis: true,
+            width: 500
+          }
+        ],
+        dataList: [],
+        loading: false,
+        pageNo: 1,
+        pageSize: 10,
+        total: 0,
+        url: {
+          addModelList: '/project/projectLawsInventoryEO/queryPageDummy'
+        }
+      }
+    },
+    mounted() {
+
+    },
+    methods: {
+      addModel(value) {
+        this.visible = true
+        this.queryParam = {}
+        this.selectedRowKeys = JSON.parse(JSON.stringify(value))
+        this.replacePage()
+      },
+      searchQuery() {
+        this.pageNo = 1
+        this.replacePage()
+      },
+      searchReset() {
+        this.pageNo = 1
+        this.queryParam = {}
+        this.replacePage()
+      },
+      onChange(page, pageSize) {
+        this.pageNo = page
+        this.replacePage()
+      },
+      SizeChange(page, pageSize) {
+        this.pageNo = 1
+        this.pageSize = pageSize
+        this.replacePage()
+      },
+      replacePage() {
+        let query = {
+          pageNo: this.pageNo,
+          pageSize: this.pageSize,
+          ...this.queryParam
+        }
+        this.loading = true
+        postAction(this.url.addModelList, query).then((res) => {
+          if (res.success) {
+            this.dataList = res.result.records || []
+            this.total = res.result.total
+            this.loading = false
+          } else {
+            this.dataList = []
+            this.total = 0
+            this.loading = false
+          }
+        })
+      },
+      onSelectChange(value) {
+        this.selectedRowKeys = value
+      },
+      handleCancel() {
+        this.visible = false
+      },
+      handleSubmit() {
+        this.$emit('versionStatisticsForm', this.selectedRowKeys)
+        this.visible = false
+      }
+    }
+  }
+</script>
+
+<style scoped>
+  .page {
+    text-align: right;
+    margin-top: 20px;
+  }
+
+  .drawer-bootom-button {
+    position: absolute;
+    bottom: 0;
+    width: 100%;
+    z-index: 100;
+    border-top: 1px solid #e8e8e8;
+    padding: 10px 16px;
+    text-align: right;
+    left: 0;
+    background: #fff;
+    border-radius: 0 0 2px 2px;
+  }
+
+  .box-title-text {
+    line-height: 1.4;
+    display: flex;
+    align-items: center;
+    margin-bottom: 10px;
+  }
+
+  .title-text {
+    width: 33px;
+    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: 100%;
+    height: 38px;
+  }
+
+  .box-button {
+    height: 38px;
+  }
+</style>