yxk-electronic-archives/src/views/collectReorganizi/collectionLibrary/module/fileSeqAdjustment/index.vue

<template>
  <!-- 卷内顺序调整 -->
  <div>
    <el-dialog class="adjust-dialog" :title="titleAdjustment" :close-on-click-modal="false" :modal-append-to-body="false" append-to-body :visible.sync="adjustmentVisible" @opened="opened">
      <div class="setting-dialog">
        <div v-if="isJuannei" class="base-info">
          <p>案卷档号：{{ selections.length !== 0 && selections[0].archive_no }}</p>
          <p>案卷题名：{{ selections.length !== 0 && selections[0].maintitle }}</p>
        </div>
        <i class="drag-tip">提示：请通过拖动鼠标来调整当前顺序</i>
        <el-table
          ref="table"
          :data="sortTableData"
          :tree-props="{children: 'childrens'}"
          class="category-sort"
          style="width: 100%;"
          row-key="id"
        >
          <el-table-column type="index" label="序号" width="55" align="center" />
          <template v-for="(field, index) in queryFields">
            <el-table-column
              v-if="field !== 'id'"
              :key="index"
              :prop="field"
              :label="queryCnFields[index]"
              :width="field === 'archive_no' ? '250px' : '120px'"
            />
          </template>
        </el-table>
        <div slot="footer" class="dialog-footer">
          <el-button @click="adjustmentVisible = false">取消</el-button>
          <el-button type="primary" @click.native="handleSort">确定</el-button>
        </div>
      </div>
    </el-dialog>
  </div>
</template>

<script>
import { FetchDoArchivesAdjust, FetchArchivesAdjust } from '@/api/collect/collect'
import Sortable from 'sortablejs'
export default {
  name: 'FileSeqAdjustment',
  components: { },
  mixins: [],
  props: {
    selectedCategory: {
      type: Object,
      default: function() {
        return {}
      }
    },
    collectLevel: {
      type: Number,
      default: function() {
        return null
      }
    },
    selections: {
      type: Array,
      default: () => []
    }
  },
  data() {
    return {
      titleAdjustment: '',
      isJuannei: false,
      adjustmentVisible: false,
      categoryB: null,
      sortTableData: [],
      queryCnFields: [],
      queryFields: []
    }
  },
  watch: {
    selectedCategory: function(newValue, oldValue) {
    }
  },
  created() {
  },
  mounted() {
  },
  methods: {
    getDoArchivesAdjust() {
      this.loading = true
      this.sortTableData = []
      const archivesIds = this.selections.map(item => item.id)
      let params
      if (this.isJuannei) {
        params = {
          'categoryId': this.selectedCategory.id,
          'archivesIds': archivesIds,
          'categoryLevel': 3
        }
      } else {
        params = {
          'categoryId': this.selectedCategory.id,
          'archivesIds': archivesIds,
          'categoryLevel': this.collectLevel
        }
      }
      FetchDoArchivesAdjust(params).then((res) => {
        this.categoryB = res.category.id
        this.sortTableData = res.list
        this.queryCnFields = res.queryCnFields
        this.queryFields = res.queryFields
        this.adjustmentVisible = true
      }).catch(err => {
        console.log(err)
      })
    },
    // 行拖拽
    rowDrop(className, targetName) {
      const tbody = document.querySelector('.' + className + ' .el-table__body-wrapper tbody')
      const that = this
      Sortable.create(tbody, {
        draggable: '.el-table__row',
        onEnd({ newIndex, oldIndex }) {
          if (newIndex === oldIndex) return
          that[targetName].splice(newIndex, 0, that[targetName].splice(oldIndex, 1)[0])
        }
      })
    },
    opened() {
      this.rowDrop('category-sort', 'sortTableData')
    },
    handleSort() {
      const archivesIds = []
      const sequences = []
      this.sortTableData.map((value, index) => {
        archivesIds.push(value.id)
        sequences.push(index + 1)
      })
      const params = {
        'categoryId': this.categoryB,
        'archivesIds': archivesIds,
        'sequences': sequences
      }
      FetchArchivesAdjust(params).then((res) => {
        if (res !== 500) {
          this.$message({
            message: '保存成功',
            type: 'success',
            duration: 2500
          })
          this.adjustmentVisible = false
          this.$emit('close-dialog')
        } else {
          this.$message({
            message: '调整顺序失败',
            type: 'error',
            duration: 2500
          })
        }
      })
    }

  }
}
</script>

<style lang='scss' scoped>
.adjust-dialog{
  ::v-deep .el-dialog{
    width: 815px;
    .el-dialog__body{
      padding: 16px 0 30px 0;
    }
  }
}
.base-info{
  display: flex;
  justify-content: space-between;
  color: #0c0e1e;
  padding: 0 20px 30px 20px;
  p{
    flex: 1;
  }
}
</style>