yxk-electronic-archives/src/views/archivesManage/managementLibrary/module/collectHeader.vue

<template>
  <div>
    <div :class="[ isTitleType === 6 || isTitleType === 2 ? 'collect-header manage-fixed-style' : 'collect-header']">
      <h4 :class="classType">{{ collectTitle }} <span v-if="isTitleType !== 2 && !(isTitleType === 3 && (selectedCategory.arrangeType === 1 || selectedCategory.arrangeType === 2) )"> > {{ test }}</span></h4>
      <div class="head-search">
        <el-select
          v-if="isTitleType === 3 && selectedCategory.arrangeType !== 3"
          v-model="selectStatus"
          multiple
          collapse-tags
          style="margin-right: 10px;"
          placeholder="请选择"
        >
          <el-option
            v-for="item in options"
            :key="item.value"
            :label="item.label"
            :value="item.value"
          />
        </el-select>
        <!-- 搜索 -->
        <div v-if="isTitleType !== 6">
          <el-input v-model="query.search" clearable size="small" :placeholder="placeholderType" prefix-icon="el-icon-search" style="width: 200px;" class="filter-item" />
          <el-button class="filter-item filter-search" size="mini" type="success" icon="el-icon-search" @click="handleSearch">搜索</el-button>
          <el-button class="filter-item filter-refresh" size="mini" type="warning" icon="el-icon-refresh-left">重置</el-button>
        </div>
      </div>
      <div v-if="!isRecycle" class="collect-menu">
        <el-menu
          :default-active="activeMenuIndex"
          mode="horizontal"
          @select="handleSelect"
        >
          <el-submenu v-if="isTitleType !== 6" index="1">
            <template slot="title">
              <i class="iconfont icon-changgui" />
              <span>常规</span>
            </template>
            <el-menu-item-group class="collect-submenu-group">
              <el-menu-item v-if="isTitleType !== 6" index="1-1" @click="handleForm('edit')">编辑</el-menu-item>
            </el-menu-item-group>
          </el-submenu>
          <el-submenu v-if="selectedCategory.isType === 2 && isTitleType !==4 && isTitleType !== 6" index="2">
            <template slot="title">
              <i class="iconfont icon-zhengli" />
              <span>整理</span>
            </template>
            <el-menu-item-group class="collect-submenu-group">
              <el-menu-item v-if="isTitleType === 3" index="2-1" @click="bindingTag(selections)">标签绑定</el-menu-item>
              <el-menu-item-group v-if="isTitleType === 3" class="collect-submenu-group submenu-tree">
                <template slot="title">档案装盒</template>
                <el-menu-item index="2-2">装盒</el-menu-item>
                <el-menu-item v-if="selectedCategory.arrangeType !== 1" index="2-3">分卷装盒</el-menu-item>
              </el-menu-item-group>
              <el-menu-item-group v-if="selectedCategory.isType === 2" class="collect-submenu-group submenu-tree">
                <template slot="title">档案移交</template>
                <el-menu-item index="2-4">在线移交</el-menu-item>
                <el-menu-item index="2-5">离线移交</el-menu-item>
              </el-menu-item-group>
              <el-menu-item v-if="selectedCategory.isType === 2" index="2-6">导出ZIP包</el-menu-item>
              <el-menu-item v-if="selectedCategory.isType === 2" index="2-7">档案退回</el-menu-item>
              <el-menu-item v-if="isTitleType === 3 " index="2-8">开放鉴定</el-menu-item>
              <el-menu-item v-if="isTitleType === 3 " index="2-9">销毁鉴定</el-menu-item>
            </el-menu-item-group>
          </el-submenu>
          <el-submenu index="3">
            <template slot="title">
              <i class="iconfont icon-gengduo" />
              <span>更多</span>
            </template>
            <el-menu-item-group class="collect-submenu-group">
              <el-menu-item v-if="isTitleType !== 6" index="3-1" @click="handleExport">导出</el-menu-item>
              <el-menu-item v-if="isTitleType === 3" index="3-2" @click="handlePrint">打印</el-menu-item>
              <el-menu-item v-if="isTitleType === 6" index="3-3" @click="handleOriginalDownload">下载</el-menu-item>
            </el-menu-item-group>
          </el-submenu>
        </el-menu>
      </div>

      <div v-if="isRecycle && (isTitleType === 2 || (isTitleType === 3 && selectedCategory.arrangeType !== 3))" class="collect-menu">
        <el-button class="filter-item" size="mini" type="success" @click="toRecover"><i class="iconfont icon-huifu" />恢复</el-button>
        <el-button class="filter-item" size="mini" type="success" @click="toCompletelyDelete"><i class="iconfont icon-shanchu" />彻底删除</el-button>
      </div>

      <!--新增 / 编辑 表单组件-->
      <el-dialog class="preview-dialog" :modal-append-to-body="false" :close-on-click-modal="false" append-to-body :before-close="handleClose" :visible="formVisible" :title="formTitle">
        <span class="dialog-right-top" />
        <span class="dialog-left-bottom" />
        <div class="setting-dialog">
          <!--  @emitTableList="getTableList" -->
          <PreviewForm v-if="formPreviewData.length" ref="previewForm" :is-has-code="true" :is-disabled="false" :form-preview-data.sync="formPreviewData" :selected-category="selectedCategory" :parents-id="parentsId" :arc-id="arcId" :is-des-form-type="isDesFormType" />
          <div slot="footer" class="dialog-footer">
            <el-button type="primary" @click="handlerArchivesSubmit">保存</el-button>
          </div>
        </div>
      </el-dialog>

      <!-- 绑定标签 -->
      <binding-tag-dlg ref="bindingTag" :binding-id="selections[0] && selections[0].id" :binding-type="1" binding-txt="档案" />

      <!--删除对话框组件-->
      <el-dialog class="tip-dialog" title="提示" :close-on-click-modal="false" :modal-append-to-body="false" append-to-body :visible.sync="deleteVisible">
        <div class="setting-dialog">
          <div class="tip-content">
            <p class="tipMsg">此删除将把会所选条目与其子集放入回收站</p>
            <span>你是否还要继续?</span>
          </div>
          <div slot="footer" class="dialog-footer">
            <el-button type="text" @click="deleteVisible = false">取消</el-button>
            <el-button type="primary" @click.native="handleDelConfirm">确定</el-button>
          </div>
        </div>
      </el-dialog>

      <!-- 导出 -->
      <el-dialog class="tip-dialog" title="导出" :close-on-click-modal="false" :modal-append-to-body="false" append-to-body :visible.sync="exportVisible">
        <div class="setting-dialog">
          <div class="tip-content">
            <p class="tipMsg">此操作将导出所选数据</p>
            <span>你是否还要继续?</span>
          </div>
          <div slot="footer" class="dialog-footer">
            <el-button type="text" @click="downloadVisible = false">取消</el-button>
            <el-button type="primary" @click.native="handleExportConfirm">确定</el-button>
          </div>
        </div>
      </el-dialog>

      <!-- 打印 -->
      <Print ref="printRef" />

      <!-- 回收站 - 恢复 -->
      <el-dialog class="tip-dialog" title="提示" :close-on-click-modal="false" :modal-append-to-body="false" append-to-body :visible.sync="recoverVisible">
        <div class="setting-dialog">
          <div class="tip-content">
            <p class="tipMsg">此恢复将会把所选条目及其子集一并恢复</p>
            <span>你是否还要继续?</span>
          </div>
          <div slot="footer" class="dialog-footer">
            <el-button type="text" @click="recoverVisible = false">取消</el-button>
            <el-button type="primary" @click.native="handleRecover">确定</el-button>
          </div>
        </div>
      </el-dialog>

      <!-- 回收站 - 彻底删除 -->
      <el-dialog class="tip-dialog" title="提示" :close-on-click-modal="false" :modal-append-to-body="false" append-to-body :visible.sync="completelyDeleteVisible">
        <div class="setting-dialog">
          <div class="tip-content">
            <p class="tipMsg">此删除将把会所选条目与其子集彻底删除</p>
            <span>你是否还要继续?</span>
          </div>
          <div slot="footer" class="dialog-footer">
            <el-button type="text" @click="completelyDeleteVisible = false">取消</el-button>
            <el-button type="primary" @click.native="handleCompletelyDelete">确定</el-button>
          </div>
        </div>
      </el-dialog>
    </div>
    <!--  v-if="selectedCategory.isType !== 1 && !isRecycle" :class="['archives-top', {'archives-fixed-top': selectedCategory.isType === 2 || selectedCategory.isType === 4 }]" -->
    <div v-if="isTitleType !== 2 && !isRecycle && isTitleType !== 6" class="mangement-fixed-top">
      <el-checkbox v-model="fixedStatusBar" @change="statusBarChecked">隐藏状态栏</el-checkbox>
    </div>
  </div>
</template>

<script>
import { manageLibraryCrud } from '../mixins/index'
import { FetchInitCategoryInputFieldByPid } from '@/api/system/category/category'
import PreviewForm from '@/views/components/category/PreviewForm'
import Print from './print/index'
import BindingTagDlg from '@/views/components/BindingTagDlg'
// import { exportFile } from '@/utils/index'
import { mapGetters } from 'vuex'
export default {
  name: 'CollectHeader',
  components: { PreviewForm, BindingTagDlg, Print },
  mixins: [manageLibraryCrud],
  props: {
    selectedCategory: {
      type: Object,
      default: function() {
        return {}
      }
    },
    isTitleType: {
      type: Number,
      default: 2
    },
    arcId: {
      type: String,
      default: function() {
        return ''
      }
    },
    test: {
      type: String,
      default: function() {
        return ''
      }
    },
    isRecycle: {
      type: Boolean,
      default: false
    },
    selections: {
      type: Array,
      default: function() {
        return []
      }
    }
  },
  data() {
    return {
      options: [
        {
          value: '未装盒',
          label: '未装盒'
        },
        {
          value: '已装盒',
          label: '已装盒'
        },
        {
          value: '未入库',
          label: '未入库'
        },
        {
          value: '已入库',
          label: '已入库'
        },
        {
          value: '无实体',
          label: '无实体'
        },
        {
          value: '有实体',
          label: '有实体'
        },
        {
          value: '实体在库',
          label: '实体在库'
        },
        {
          value: '实体待借',
          label: '实体待借'
        },
        {
          value: '实体已借',
          label: '实体已借'
        }
      ],
      selectStatus: null,
      activeMenuIndex: '1',
      formVisible: false,
      formTitle: '项目',
      formPreviewData: [], // 预览界面data
      deleteVisible: false,
      moveVisible: false,
      exportVisible: false,
      downloadVisible: false,
      recoverVisible: false,
      completelyDeleteVisible: false,
      parentsId: null, // 父id
      isDesFormType: null // 区分是门类得还是档案得
    }
  },
  computed: {
    ...mapGetters([
      'baseApi'
    ]),
    collectTitle() {
      if (this.isTitleType === 2) {
        return '项目'
      } else if (this.isTitleType === 3) {
        if (this.selectedCategory.arrangeType === 1) {
          return '文件'
        } else {
          return '案卷'
          // if (this.activeIndex === 1) {
          //   return '文件'
          // } else {
          //   return '案卷'
          // }
        }
      } else if (this.isTitleType === 4) {
        return '卷内'
      } else if (this.isTitleType === 6) {
        return '原文'
      }
      return ''
    },
    classType() {
      if (this.isTitleType === 2) {
        return ''
      } else if (this.isTitleType === 3) {
        return 'is-anjuan'
      } else if (this.isTitleType === 4) {
        return 'is-juannei'
      } else if (this.isTitleType === 6) {
        return 'is-file'
      }
      return ''
    },
    placeholderType() {
      if (this.isTitleType === 2) {
        return '输入项目名称或项目编号搜索'
      } else if (this.isTitleType === 3 || this.isTitleType === 4) {
        return '输入题名或档号搜索'
      }
      return '输入项目名称或项目编号搜索'
    }
  },
  created() {
  },
  mounted() {
    if (localStorage.getItem('statusBarFixedType') !== 'undefined') {
      this.fixedStatusBar = JSON.parse(localStorage.getItem('statusBarFixedType')) === true
      this.$emit('status-bar-checked-changed', this.fixedStatusBar)
    }
  },
  methods: {
    // 缓存用户对于固定栏操作习惯
    statusBarChecked(val) {
      console.log('statusVal', val)
      this.fixedStatusBar = val
      this.$emit('status-bar-checked-changed', this.fixedStatusBar)
      localStorage.setItem('statusBarFixedType', val)
    },
    handleSelect(key, keyPath) {
      console.log(key, keyPath)
    },
    // 著录界面-form/详情-api
    handleForm(type) {
      if (type === 'add') {
        this.formVisible = true
        this.formTitle = '新增' + this.collectTitle
        // this.arcId = null
      } else if (type === 'edit') {
        console.log(this.selections)
        // this.arcId = this.selections[0].id
        if (this.selections.length === 0) {
          this.$message('您还未勾选需要操作的条目，请先确认！')
          return false
        } else if (this.selections.length > 1) {
          this.$message('编辑操作只可勾选唯一目标条目，请先确认！')
          return false
        }
        this.formVisible = true
        this.formTitle = '编辑' + this.collectTitle
      }
      // this.form.dictionaryConfigId = {}
      // this.formPreviewData = []
      // 档案预编辑获取字段
      this.getFormInfo(type)
    },
    getFormInfo(type) {
      FetchInitCategoryInputFieldByPid({ categoryId: this.selectedCategory.id }).then(data => {
        this.formPreviewData = data
        this.$nextTick(() => {
          if (type === 'edit') {
            this.$refs.previewForm.addOrUpdateForm = data.echo
          } else {
            // if (this.recycleMain.selectedCategory.isType !== 5) {
            // 新增时拿到项目和案卷的相同的字段的值
            // this.formPreviewData.forEach(item => {
            //   if (isAnOrJuan === 1) {
            //     if (this.recycleMain.selectedCategory.isType !== 3) {
            //       if (this.recycleMain.projectSelection[item.fieldName]) {
            //         this.$refs.previewForm.addOrUpdateForm = JSON.parse(JSON.stringify(this.recycleMain.projectSelection))
            //       }
            //     }
            //   } else if (isAnOrJuan === 2) {
            //     if (this.recycleMain.anjuanSelection[item.fieldName]) {
            //       this.$refs.previewForm.addOrUpdateForm = JSON.parse(JSON.stringify(this.recycleMain.anjuanSelection))
            //     }
            //   }
            // })
            // }
          }
          this.isDesFormType = 'arcives'
          this.$refs.previewForm.FetchNoFormatField(this.selectedCategory.id)
        })
      })
    },
    // form - submit
    handlerArchivesSubmit() {
      this.formVisible = false
      this.$refs.previewForm.submitForm('addOrUpdateForm', this.selectedCategory.id)
      this.selections = []
    },
    // 删除 - 关闭
    handleClose(done) {
      this.formVisible = false
      done()
    },
    // 删除
    // toDelete() {
    //   if (this.selections.length === 0) {
    //     this.$message('您还未勾选需要操作的条目，请先确认！')
    //     return false
    //   }
    //   this.deleteVisible = true
    // },
    // 删除 - 确认
    handleDelConfirm() {
      this.deleteVisible = false
    },
    // 绑定标签
    bindingTag(data) {
      if (data[0].tid) {
        this.$refs.bindingTag.isBinding = true
        this.$refs.bindingTag.tidCode = data[0].tid
      }
      this.$refs.bindingTag.bindingVisible = true
    },
    // 导出
    handleExport() {
      this.exportVisible = true
    },
    handleExportConfirm() {
      this.exportVisible = false
    },
    // 打印
    handlePrint() {
      if (this.selections.length === 0) {
        this.$refs.printRef.form.printRange = '当页条目'
      } else {
        this.$refs.printRef.form.printRange = '勾选条目'
      }
      this.$refs.printRef.printVisible = true
    },
    // 原文内的附件下载
    handleOriginalDownload() {
      if (this.selections.length > 1 || this.selections.length === 0) {
        this.$message('下载操作只可勾选唯一目标条目，请先确认！')
        return false
      }
    },
    // 回收站 - 恢复
    toRecover() {
      if (this.selections.length === 0) {
        this.$message('您还未勾选需要操作的条目，请先确认！')
        return false
      }
      this.recoverVisible = true
    },
    handleRecover() {
      this.recoverVisible = false
    },
    // 回收站 - 彻底删除
    toCompletelyDelete() {
      if (this.selections.length === 0) {
        this.$message('您还未勾选需要操作的条目，请先确认！')
        return false
      }
      this.completelyDeleteVisible = true
    },
    handleCompletelyDelete() {
      this.completelyDeleteVisible = false
    }
  }
}
</script>

<style lang='scss' scoped>
.collect-header{
  border-top: none !important;
  padding: 20px 0 0 0 !important;
}
.manage-fixed-style{
  margin-bottom: 30px;
}

</style>