yiliangyiyun-pc/src/views/system/systemFile/systemOperation.vue

<!-- 体系操作页面 -->
<template>
  <TableView class="product"
             @body-height-change="bodyHeightChange">
    <template slot="body">
      <div class="cont-main system-operation">
        <!--     <el-radio-group v-model="reportTabs" size="small" @change="changeStatus">-->
        <!--       <el-radio-button v-hasPermission="'ismManager.SystemOperation.systemOperationFile.systemOperationPending'" label="pendingTodo">{{ $t('system.fileManagement.reportTabs.pendingTodo') }}</el-radio-button>-->
        <!--       <el-radio-button v-hasPermission="'ismManager.SystemOperation.systemOperationFile.systemOperationTracking'" label="following">{{ $t('system.fileManagement.reportTabs.following') }}</el-radio-button>-->
        <!--       <el-radio-button v-hasPermission="'ismManager.SystemOperation.systemOperationFile.systemOperationAll'" label="all">{{ $t('system.fileManagement.reportTabs.all') }}</el-radio-button>-->
        <!--    &lt;!&ndash;   <el-radio-button v-hasPermission="'ismManager.SystemOperation.systemOperationFile.systemOperationMyReport'" label="myReports">{{ $t('system.fileManagement.reportTabs.myReports') }}</el-radio-button>&ndash;&gt;-->
        <!--     </el-radio-group>-->
        <div class="selectBtn mb10">
          <!-- 筛选输入框 -->
          <!-- 过滤 -->
          <div class="searchTwo">
            <ws-button type="text"
                       @click="dialogFormVisible = true"
                       class="guolv">
              <i class="iconfont iconfilter" />
              <!-- <svg-icon icon-class="guolv" /> -->
              <span>{{ $t('zs.common.sizer') }}</span>
            </ws-button>
          </div>
          <!-- 共0条结果 -->
          <span class="filter-total">{{ $t('zs.common.thereAre') }}{{ tableData.total
            }}{{ $t('cg.queryresults') }}</span>
          <!-- <ws-input v-model.trim="page.searchKeyword"
                    class="selectInput"
                    :placeholder="$t('system.fileManagement.tips.operationTips')"
                    @clear="resetSearch"
                    @keyup.enter.native="handleFilter('title')" />
          //<svg-icon icon-class="searchIcon"
                    class="searchIcon"
                    @click="handleFilter('title')" /> -->
          <BaseInputSearch v-model="page.searchKeyword"
                           :placeholder="$t('system.fileManagement.tips.operationTips')"
                           @search="handleFilter('title')" />
        </div>
        <ws-status-radio @changeStatus="changeStatus"
                         class="fr mt10"></ws-status-radio>
        <!--      <ws-radio-group-->
        <!--        v-model="reportTabs"-->
        <!--        class="status-list fr"-->
        <!--        style="line-height: 43px"-->
        <!--        @change="changeStatus"-->
        <!--      >-->
        <!--        <el-radio label="1">{{ $t('common.processed') }}</el-radio>-->
        <!--        <el-radio label="2">{{ $t('common.track') }}</el-radio>-->
        <!--        <el-radio label="all">{{ $t('common.all') }}</el-radio>-->
        <!--      </ws-radio-group>-->
        <div>
          <ws-normal-table :data="tableData.records"
                           @cell-mouse-enter="msgRow"
                           highlight-current-row
                           :row-class-name="tableRowClassName"
                           style="width: 100%"
                           :height="tableViewBodyHeight - 50">
            <ws-table-column prop="operateFlag"
                             min-width="50">
              <template slot-scope="scope">
                <span class="el-dropdown-link"
                      v-if="
                    scope.row.operateFlag * 1 === 2 ||
                      scope.row.operateFlag * 1 === 3
                  ">
                  <img src="@/assets/update.png"
                       alt />
                </span>
              </template>
            </ws-table-column>
            <ws-table-column type="index"
                             width="50"
                             align="center"
                             :label="$t('common.num')">
              <template slot-scope="scope">{{
                scope.$index + 1 + (page.currentPage - 1) * page.pageSize
              }}</template>
            </ws-table-column>
            <ws-table-column prop="vesselDepartmentName"
                             min-width="150"
                             :label="$t('system.fileManagement.reportTable.ShipDepartment')"></ws-table-column>
            <ws-table-column prop="fileName"
                             min-width="200"
                             show-overflow-tooltip
                             :label="$t('system.fileManagement.reportTable.fileName')">
              <template slot-scope="scope">
                <div style="display: flex;align-items: center">
                  <span>
                    <i class="iconfont iconpdfy"
                       v-if="scope.row.fileType === 'pdf'"
                       style="font-size: 20px;color: #FF4867" />
                    <!--                  <img-->
                    <!--                    v-if="scope.row.fileType === 'pdf'"-->
                    <!--                    src="@/assets/pdf.png"-->
                    <!--                    style="width: 20px;height: 28px;padding-top: 8px;"-->
                    <!--                  />-->
                    <i class="iconfont iconword"
                       v-if="
                        scope.row.fileType === 'doc' ||
                          scope.row.fileType === 'docx'
                      "
                       style="font-size: 20px;color: #4A8DFF" />
                    <!--                  <img-->
                    <!--                    v-if="-->
                    <!--                      scope.row.fileType === 'doc' ||-->
                    <!--                        scope.row.fileType === 'docx'-->
                    <!--                    "-->
                    <!--                    src="@/assets/word.png"-->
                    <!--                    style="width: 20px;height: 28px;padding-top: 8px;"-->
                    <!--                  />-->
                    <i class="iconfont iconexcely"
                       v-if="
                        scope.row.fileType === 'xls' ||
                          scope.row.fileType === 'xlsx'
                      "
                       style="font-size: 20px;color: #00C090" />
                    <!--                  <img-->
                    <!--                    v-if="-->
                    <!--                      scope.row.fileType === 'xls' ||-->
                    <!--                        scope.row.fileType === 'xlsx'-->
                    <!--                    "-->
                    <!--                    src="@/assets/excel.png"-->
                    <!--                    style="width: 20px;height: 28px;padding-top: 8px;"-->
                    <!--                  />-->
                  </span>
                  <a class="clickabled"
                     v-if="
                      scope.row.statusFlag === '1001' ||
                        scope.row.statusFlag === '1003'
                    "
                     :href="url + scope.row.filePathId + '&showSaveFlag=1'"
                     target="_blank">{{ scope.row.fileName }}</a>
                  <a class="clickabled"
                     v-else-if="scope.row.statusFlag === '1010'"
                     :href="
                      url +
                        scope.row.filePathId +
                        '&showSaveFlag=' +
                        scope.row.reviewerEdit
                    "
                     target="_blank">{{ scope.row.fileName }}</a>
                  <a class="clickabled"
                     v-else-if="scope.row.statusFlag === '1005'"
                     :href="url + scope.row.filePathId"
                     target="_blank">{{ scope.row.fileName }}</a>
                  <a class="clickabled"
                     v-else
                     :href="url + scope.row.filePathId"
                     target="_blank">{{ scope.row.fileName }}</a>
                </div>
              </template>
            </ws-table-column>
            <!--  <ws-table-column prop="version" min-width="150" :label="$t('system.fileManagement.reportTable.versionNum')"></ws-table-column>-->
            <ws-table-column prop="creater"
                             min-width="150"
                             :label="$t('system.fileManagement.reportTable.initiator')"></ws-table-column>
            <ws-table-column prop="fileReportTypeName"
                             min-width="150"
                             :label="$t('system.fileManagement.setting.fileType')">
              <template slot-scope="scope">{{
                scope.row.fileReportTypeName == '操作文档' ? '是' : '否'
              }}</template>
            </ws-table-column>
            <ws-table-column prop="uploadDate"
                             min-width="150"
                             :label="$t('system.fileManagement.reportTable.createTime')"></ws-table-column>
            <ws-table-column prop="lastReportDate"
                             min-width="150"
                             :label="$t('system.fileManagement.reportTable.lastFilledInTime')"></ws-table-column>
            <ws-table-column prop="status"
                             min-width="150"
                             :label="$t('system.fileManagement.reportTable.status')"></ws-table-column>
            <ws-table-column prop="operationHisResponseList"
                             min-width="150"
                             :label="$t('system.fileManagement.reportTable.historyRecord')">
              <template slot-scope="scope">
                <ws-dropdown placement="bottom-start">
                  <span class="el-dropdown-link">
                    <i class="iconfont iconchangehistoryy" />
                    <!--                  <img src="@/assets/changeHistory.png" alt />-->
                  </span>
                  <ws-dropdown-menu slot="dropdown">
                    <ws-dropdown-item>
                      <ws-normal-table :data="scope.row.operationHisResponseList"
                                       highlight-current-row>
                        <ws-table-column prop="operateUserName"
                                         width="150"
                                         :label="
                            $t(
                              'system.fileManagement.reportTable.operatePerson'
                            )
                          "></ws-table-column>
                        <ws-table-column prop="operateDate"
                                         width="150"
                                         :label="
                            $t('system.fileManagement.reportTable.operateDate')
                          ">
                          <template slot-scope="scope">{{
                            scope.row.operateDate
                          }}</template>
                        </ws-table-column>
                        <ws-table-column prop="operateHis"
                                         width="150"
                                         :label="
                            $t(
                              'system.fileManagement.reportTable.operateHistory'
                            )
                          "></ws-table-column>
                        <ws-table-column prop="dealMsg"
                                         width="150"
                                         :label="
                            $t(
                              'system.fileManagement.reportTable.reviewReturnComments'
                            )
                          "></ws-table-column>
                      </ws-normal-table>
                    </ws-dropdown-item>
                  </ws-dropdown-menu>
                </ws-dropdown>
              </template>
            </ws-table-column>
            <ws-table-column prop="certificateName"
                             min-width="150"
                             :label="$t('system.fileManagement.reportTable.attachment')">
              <template slot-scope="scope">
                <span @click="getAttach(scope)">
                  <i class="iconfont iconfujiany" />
                  <!--                <img src="@/assets/fujian.png" alt />-->
                  {{ scope.row.appendixSize }}
                </span>
              </template>
            </ws-table-column>
            <ws-table-column v-if="reportTabs === '1'"
                             prop="statusFlag"
                             :label="$t('common.operate')"
                             align="center"
                             width="80">
              <template slot-scope="scope">
                <yh-operaction :lable="lable"
                               :status-flag="scope.row.statusFlag"
                               @skip="skipPage" />
              </template>
            </ws-table-column>
          </ws-normal-table>
        </div>
      </div>
    </template>
    <template slot="footer">
      <pagination v-if="tableData.total > 0"
                  :total="tableData.total"
                  :page.sync="page.currentPage"
                  :limit.sync="page.pageSize"
                  @pagination="getFollowList" />
    </template>
    <!-- <ws-common-loading v-if="loading"></ws-common-loading> -->
    <!-- 过滤dialog -->
    <div class="myDialogDiv">
      <ws-dialog :title="$t('button.filtration')"
                 :visible.sync="dialogFormVisible"
                 width="350px"
                 :modal="false"
                 class="dialogListquery"
                 style="margin-left: 56%"
                 :close-on-click-modal="false">
        <ws-form ref="spclearsplistqueryForm"
                 :model="page"
                 label-width="105px"
                 label-position="left">
          <!-- 适用船舶 -->
          <ws-form-item :label="$t('system.fileManagement.applicableShip')"
                        v-if="vesselBankFlag === 'B'">
            <ws-select filterable clearable
                       v-model="page.vesselId"
                       style="width:100%"
                       :placeholder="$t('common.selected')">
              <ws-option :label="$t('common.selected')"
                         value=""></ws-option>
              <ws-option v-for="item in shipOptions"
                         :key="item.vesselId"
                         :label="item.vesselName"
                         :value="item.vesselId"></ws-option>
            </ws-select>
          </ws-form-item>
          <!-- 适用部门 -->
          <ws-form-item :label="$t('system.fileManagement.applicableDepartments')"
                        v-if="vesselBankFlag === 'B'">
            <ws-select v-model="page.deptId"
                       style="width:100%"
                       :placeholder="$t('common.selected')">
              <ws-option :label="$t('common.selected')"
                         value=""></ws-option>
              <ws-option v-for="item in deptOptions"
                         :key="item.deptId"
                         :label="item.deptName"
                         :value="item.deptId"></ws-option>
            </ws-select>
          </ws-form-item>
          <!-- 创建时间 -->
          <ws-form-item :label="$t('system.fileManagement.reportTable.createDate')">
            <ws-date-picker v-model="createDate"
                            :placeholder="$t('common.selected')"
                            type="daterange"
                            value-format="yyyy-MM-dd"></ws-date-picker>
          </ws-form-item>
          <!-- 任务类型 -->
          <ws-form-item :label="$t('system.fileManagement.taskType')">
            <ws-select v-model="page.fileTemplateType"
                       style="width:100%"
                       :placeholder="$t('common.selected')">
              <ws-option :label="$t('common.selected')"
                         value=""></ws-option>
              <ws-option :label="$t('system.fileManagement.updateFile')"
                         value="1"></ws-option>
              <ws-option :label="$t('system.fileManagement.fillFile')"
                         value="2"></ws-option>
            </ws-select>
          </ws-form-item>
          <!-- 状态 -->
          <ws-form-item :label="$t('system.fileManagement.button.status')">
            <ws-select v-model="page.statusFlag"
                       style="width:100%"
                       :placeholder="$t('common.selected')">
              <ws-option :label="$t('common.selected')"
                         value=""></ws-option>
              <ws-option v-for="item in statusOptions"
                         :key="item.id"
                         :label="item.valueZh"
                         :value="item.id"></ws-option>
            </ws-select>
          </ws-form-item>
        </ws-form>
        <div slot="footer"
             class="dialog-footer">
          <ws-button @click="clearfiltQuery">{{
            $t('button.reset')
          }}</ws-button>
          <ws-button type="primary"
                     @click="handleFilter()">{{
            $t('button.filtration')
          }}</ws-button>
        </div>
      </ws-dialog>
    </div>

    <!-- 查看附件 -->
    <WinseaContentModal :title="$t('system.fileManagement.viewAttachment')"
                        v-model="checkDialogFlag">
      <!-- <ws-common-dialog ref="checkDialog"
                      :title="$t('system.fileManagement.viewAttachment')"
                      :type="type"
                      :normalFooter="false">
      <div slot="body"> -->
      <ws-upload :editable="isUpload"
                 ref="upload"
                 table-name="ism_file_operation_info"
                 oss-key="systemOperation"
                 :comp-id="compId"
                 :appendix-ids="appendixIds"
                 @onChange="uploadSuccess" />
      <!-- </div> -->
      <div slot="footer">
        <ws-button v-if="isUpload"
                   type="primary"
                   @click="commitAttach">{{
          $t('button.confirm')
        }}</ws-button>
        <ws-button v-if="isUpload"
                   @click="cancelCommitAttach">{{
          $t('button.cancel')
        }}</ws-button>
      </div>
      <!-- </ws-common-dialog> -->
    </WinseaContentModal>
    <!--审核流，审核盒子-->
    <WinseaContentModal :title="approveTitle"
                        v-model="auditDialogFlag"
                        @on-cancel="setBlank"
                        @on-done="goSubmitReview">
      <!-- <ws-common-dialog ref="auditDialog"
                        :title="approveTitle"
                        :type="type"
                        @clickSure="goSubmitReview"
                        @clickCancel="setBlank">
        <div slot="body"> -->
      <ws-form ref="handle"
               :rules="handles"
               label-width="auto"
               :model="handle">
        <ws-form-item :label="$t('cw.annualBudget.auditOpinion') + $t('common.colon')"
                      v-if="approveTitle === this.$t('button.approve')">
          <ws-input v-model="handle.auditMind"
                    maxlength="200"
                    type="textarea"
                    style="width:80%" />
        </ws-form-item>
        <ws-form-item :label="$t('common.returnReason') + $t('common.colon')"
                      prop="auditMind"
                      v-else-if="approveTitle === this.$t('button.noapprove')">
          <ws-input v-model="handle.auditMind"
                    maxlength="200"
                    type="textarea"
                    style="width:80%" />
        </ws-form-item>
      </ws-form>
      <!-- </div>
      </ws-common-dialog> -->
    </WinseaContentModal>
  </TableView>
</template>

<script>
import Pagination from '@/components/Pagination'
import WsUpload from '@/components/WsUpload'
import TableView from '@/layout/TableView'
import TableViewMix from '@/layout/mixin/TableViewMix'

// 体系操作
import {
  getFileOperationInfoWaitDealWithByPage,
  getFileOperationInfoTrackByPage,
  getAllFileOperationInfoByPage,
  discard,
  toSubmitReview,
  receive,
  archive,
  operationSendShip,
  reviewPass,
  reviewNotPass,
  getAppShips,
  getDeptListByCompId,
  uploadAttachFile,
  getFileOperationStatusList
} from '@/model/system'
import yhOperaction from '@/components/WinseaCom/operaction.vue'
import { handle } from '@/model/workflow'
import WsStatusRadio from '@/components/RadioGroup/index'
import WsShipDropdown from '@/components/ShipDown/index'
import { throttle } from 'lodash'
import { EventBus } from 'base-core-lib'

export default {
  name: 'systemOperation',
  mixins: [TableViewMix],
  components: {
    WsStatusRadio,
    WsShipDropdown,
    Pagination,
    WsUpload,
    yhOperaction,
    TableView
  },
  data () {
    return {
      auditDialogFlag: false,
      checkDialogFlag: false,
      type: 'twoForm',
      fileType: '',
      fileTemplateTypeId: '',
      url: process.env.VUE_APP_BASE_API + '/office/file?fileId=', //config.onlineUrl,
      newFilePath: `saas/${sessionStorage.getItem(
        'ws-pf_compId'
      )}/system/systemOperation/${this.nowFormatDate('YYYYMMDD')}/appendix/`,
      // config.getUploadPath(
      //   'systemOperation',
      //   sessionStorage.getItem('ws-pf_compId')
      // ),
      vesselBankFlag: '',
      shipOptions: [],
      statusOptions: [],
      deptOptions: [],
      payLoading: false,
      approveTitle: '', // 审核盒子title
      dialogApprove: false, // 审核弹框
      handles: {
        auditMind: [{ required: true, trigger: 'blur' }]
      },
      handle: {
        taskId: '',
        approved: true,
        auditMind: '',
        needReapply: true
      },
      lable: [
        {
          lab: this.$t('button.discard'),
          click: 'discard',
          hp: true,
          code: '1001,1002,1003'
        },
        {
          lab: this.$t('button.submitReview'),
          click: 'submitReview',
          hp: true,
          code: '1001,1002,1003'
        },
        {
          lab: this.$t('button.approve'),
          click: 'approve',
          hp: true,
          code: '1010'
        },
        {
          lab: this.$t('button.noapprove'),
          click: 'noapprove',
          hp: true,
          code: '1010'
        },
        {
          lab: this.$t('button.send'),
          click: 'send',
          hp: true,
          code: '1004'
        },
        {
          lab: this.$t('button.Receive'),
          click: 'Receive',
          hp: true,
          code: '1005'
        },
        {
          lab: this.$t('button.archive'),
          click: 'archive',
          hp: true,
          code: '1007'
        }
      ],
      temId: '',
      filePathId: '',
      temName: '',
      dialogSortVisible: false,
      isUpload: false,
      compId: sessionStorage.getItem('ws-pf_compId'),
      appendixIds: '',
      editAppendixIds: '',
      attachId: '',
      reportTabs: '1',
      tableData: {
        records: [{}],
        total: 0
      },
      loading: false,
      page: {
        vesselId: '',
        deptId: '',
        statusFlag: '',
        createStartDate: '',
        createEndDate: '',
        fileTemplateType: '',
        currentPage: 1,
        pageSize: 10,
        searchKeyword: ''
      },
      createDate: [],
      dialogFormVisible: false,
      reportRow: {}
    }
  },
  created () {
    this.vesselBankFlag = sessionStorage.getItem('ws-pf_vesselBankFlag')
    this.getShips()
    this.getFollowList()
    this.getDeptListByCompId()
  },
  methods: {
    changeStatus (key) {
      this.reportTabs = key
      this.page.currentPage = 1
      this.getFollowList()
    },
    // 查看附件
    getAttach (scope) {
      this.appendixIds =
        scope.row.appendixId && scope.row.appendixId.length > 0
          ? scope.row.appendixId.split(';').join(',')
          : ''
      this.attachId = scope.row.id
      if (scope.row.statusFlag === '1001' || scope.row.statusFlag === '1003') {
        this.isUpload = true
      } else {
        this.isUpload = false
      }
      // this.dialogSortVisible = true
      this.checkDialogFlag = true
      // this.appendixIds = this._.map(scope.row.operationHisResponseList, 'appendixId').join(',')
    },
    tableRowClassName ({ row, rowIndex }) {
      if (row.statusFlag === '1001') {
        return 'error-row'
      } else {
        return ''
      }
    },
    // 船舶列表
    getShips () {
      getAppShips({ compId: sessionStorage.getItem('ws-pf_compId') }).toPromise().then(data => {
        this.shipOptions = data
      })
    },
    // 状态列表
    getStatusList () {
      // TODO: 先写死3 不确定全部是啥
      getFileOperationStatusList({ code: this.reportTabs || 3 }).toPromise().then(data => {
        this.statusOptions = data
      })
    },
    // 部门列表
    getDeptListByCompId () {
      getDeptListByCompId({ compId: sessionStorage.getItem('ws-pf_compId') }).toPromise().then(data => {
        this.deptOptions = data
      })
    },
    // 退回按钮
    setBlank () {
      this.auditDialog = false
      this.$refs.handle.resetFields()
    },
    // 审核通过
    goSubmitReview: throttle(
      function () {
        if (this.reportRow.operateFlag === '2') {
          // this.elLoading()
          this.loading = true
            ; (this.handle.taskId = this.reportRow.taskId),
              (this.handle.approved =
                this.approveTitle === this.$t('button.approve'))
          handle({ baseUrl: process.env.VUE_APP_API_ISM, ...this.handle }).toPromise().then(res => {
            if (res.message === 'Success') {
              EventBus.$emit('success', this.$t('message.message1'))
              this.auditDialog = false
              this.getFollowList()
            }
          })
        } else {
          // this.elLoading()
          this.loading = true
          if (this.approveTitle === this.$t('button.approve')) {
            this.handle.approved = true
            reviewPass(
              this.$qs.stringify({
                id: this.reportRow.id,
                message: this.handle.auditMind
              })
            ).toPromise().then(res => {
              // if (res.message === 'Success') {
              this.auditDialog = false
              EventBus.$emit('success', this.$t('message.message1'))
              this.getFollowList()
              // }
            })
          } else {
            this.$refs.handle.validate(valid => {
              if (valid) {
                this.handle.approved = false
                reviewNotPass(
                  this.$qs.stringify({
                    id: this.reportRow.id,
                    message: this.handle.auditMind
                  })
                ).toPromise().then(res => {
                  // if (res.message === 'Success') {
                  this.auditDialog = false
                  EventBus.$emit('success', this.$t('message.message1'))
                  this.getFollowList()
                  // }
                })
              } else {
                EventBus.$emit('warning', this.$t('cw.cost.message07'))
                return false
              }
            })
          }
        }
      },
      5000,
      { trailing: false }
    ),
    // 操作 鼠标进入事件
    msgRow (row, column, cell, event) {
      this.reportRow = row
    },
    skipPage: throttle(
      function (msg) {
        if (msg === 'discard') {
          this.$confirm(
            this.$t('system.fileManagement.message.toDiscarded'),
            this.$t('showMessage.hint'),
            {
              confirmButtonText: this.$t('showMessage.confirm'),
              cancelButtonText: this.$t('showMessage.cancel'),
              type: 'warning'
            }
          )
            .then(() => {
              // this.elLoading()
              this.loading = true
              discard(this.$qs.stringify({ id: this.reportRow.id })).toPromise().then(
                res => {
                  // if (res.message === 'Success') {
                  EventBus.$emit('success', this.$t('message.message1'))
                  this.getFollowList()
                  //}
                }
              )
            })
            .catch(() => { })
        } else if (msg === 'submitReview') {
          this.$confirm(
            this.$t('system.fileManagement.message.toSubmitForReview'),
            this.$t('showMessage.hint'),
            {
              confirmButtonText: this.$t('showMessage.confirm'),
              cancelButtonText: this.$t('showMessage.cancel'),
              type: 'warning'
            }
          ).then(() => {
            // this.elLoading()
            this.loading = true
            toSubmitReview(this.$qs.stringify({ id: this.reportRow.id })).toPromise().then(
              res => {
                // if (res.message === 'Success') {
                EventBus.$emit('success', this.$t('message.message1'))
                this.getFollowList()
                //}
              }
            )
          })
        } else if (msg === 'Receive') {
          this.$confirm(
            this.$t('system.fileManagement.message.toReceive'),
            this.$t('showMessage.hint'),
            {
              confirmButtonText: this.$t('showMessage.confirm'),
              cancelButtonText: this.$t('showMessage.cancel'),
              type: 'warning'
            }
          )
            .then(() => {
              // this.elLoading()
              this.loading = true
              receive(this.$qs.stringify({ id: this.reportRow.id })).toPromise().then(
                res => {
                  // if (res.message === 'Success') {
                  EventBus.$emit('success', this.$t('message.message1'))
                  this.getFollowList()
                  // }
                }
              )
            })
            .catch(() => {
              this.loading = false
              // this.elLoading('end')
            })
        } else if (msg === 'send') {
          this.$confirm(
            this.$t('system.fileManagement.message.toSend'),
            this.$t('showMessage.hint'),
            {
              confirmButtonText: this.$t('showMessage.confirm'),
              cancelButtonText: this.$t('showMessage.cancel'),
              type: 'warning'
            }
          )
            .then(() => {
              // this.elLoading()
              this.loading = true
              operationSendShip(
                this.$qs.stringify({
                  id: this.reportRow.templateId,
                  opid: this.reportRow.id
                })
              ).toPromise().then(res => {
                // if (res.message === 'Success') {
                EventBus.$emit('success', this.$t('message.message1'))
                this.getFollowList()
                // }
              })
            })
            .catch(() => {
              this.loading = false
              // this.elLoading('end')
            })
        } else if (msg === 'approve') {
          this.approveTitle = this.$t('button.approve')
          this.auditDialog = true
        } else if (msg === 'noapprove') {
          this.approveTitle = this.$t('button.noapprove')
          this.auditDialog = true
        } else if (msg === 'archive') {
          this.$confirm(
            this.$t('system.fileManagement.message.toArchive'),
            this.$t('showMessage.hint'),
            {
              confirmButtonText: this.$t('showMessage.confirm'),
              cancelButtonText: this.$t('showMessage.cancel'),
              type: 'warning'
            }
          )
            .then(() => {
              // this.elLoading()
              this.loading = true
              archive(this.$qs.stringify({ id: this.reportRow.id })).toPromise().then(
                res => {
                  this.loading = false
                  // if (res.message === 'Success') {
                  EventBus.$emit('success', this.$t('message.message1'))
                  this.getFollowList()
                  // }
                }
              )
            })
            .catch(() => {
              this.loading = false
              // this.elLoading('end')
            })
        }
      },
      5000,
      { trailing: false }
    ),
    // 文件上传 - 我的报表
    uploadSuccess () {
      this.$refs.upload.handleSaveBill().then(response => {
        // this.appendixIds = this._.replace(response, ',', ';')
        this.appendixIds = response
      })
    },
    cancelCommitAttach () {
      this.checkDialogFlag = false
    },
    // 文件上传 - 待处理
    commitAttach: throttle(
      function () {
        uploadAttachFile(
          this.$qs.stringify({
            id: this.attachId,
            appendixId: this.appendixIds
          })
        ).toPromise().then(res => {
          // this.dialogSortVisible = false
          this.checkDialogFlag = false
        })
      },
      5000,
      { trailing: false }
    ),
    // 跟踪列表
    getFollowList () {
      this.tableData = {}
      if (!this.loading) {
        // this.elLoading()
        this.loading = true
      }
      let api = ''
      switch (this.reportTabs) {
        case '1':
          api = getFileOperationInfoWaitDealWithByPage
          break
        case '2':
          api = getFileOperationInfoTrackByPage
          break
        default:
          api = getAllFileOperationInfoByPage
          break
      }
      api(this.page).toPromise().then(data => {
        this.tableData = data
        if (this.reportTabs === '1') {
          this.$store.commit('app/SET_OPERATION_NUM', data.total)
        }
        this.loading = false
        this.getStatusList()
      })
    },
    resetSearch () {
      this.page.searchKeyword = null
    },
    // 过滤
    handleFilter () {
      if (this.createDate && this.createDate.length > 0) {
        this.page.createStartDate = this.createDate[0]
        this.page.createEndDate = this.createDate[1]
      } else {
        this.page.createStartDate = ''
        this.page.createEndDate = ''
      }
      this.dialogFormVisible = false
      this.getFollowList()
    },
    // 过滤重置/过滤关闭X
    clearfiltQuery () {
      this.page = {
        vesselId: '',
        statusFlag: '',
        deptId: '',
        createStartDate: '',
        createEndDate: '',
        fileTemplateType: '',
        currentPage: 1,
        pageSize: 10
      }
      this.createDate = []
      this.dialogFormVisible = false
      this.getFollowList()
    }
  }
}
</script>

<style scoped lang="scss">
.system-operation {
  // height: calc(100vh - 112px);
  .report-title {
    display: flex;
    .report-line {
      width: 4px;
      height: 16px;
      background: #1a61d5;
    }
    .report-word {
      font-weight: 700;
      font-size: 16px;
      margin-left: 5px;
      margin-bottom: 20px;
    }
  }
  .selectBtn {
    float: right;
    display: flex;
    position: relative;
  }
  .selectInput {
    width: 280px;
  }
  .filter-total {
    font-size: 14px;
    margin-top: 8px;
    margin-right: 15px;
    min-width: 81px;
  }
  .guolv {
    margin: 0 10px;
    span {
      color: #000;
    }
    span:hover {
      color: #1d6ced;
    }
    .svg-icon {
      color: #bfbfbf;
    }
  }
  .searchIcon {
    font-size: 32px;
    position: absolute;
    right: 0;
  }
  /deep/ .myDialogDiv {
    .el-dialog {
      position: fixed;
      top: 42px;
      left: 29%;
      overflow: auto;
      margin: 0;
      width: 27em !important;
    }
  }

  /deep/ .error-row {
    color: #e74c3c !important;
  }
}
</style>