library-management-system/src/views/visualCheck/bookstore/collectionLocation/index.vue

<template>
  <div class="app-container  row-container">
    <div class="head-container">
      <div class="head-search">
        <!-- 搜索 -->
        <el-input v-model="query.collectionName" clearable size="small" placeholder="输入馆藏名称搜索" prefix-icon="el-icon-search" style="width: 200px;" class="filter-item" @keyup.enter.native="crud.toQuery" />
        <rrOperation />
      </div>
      <crudOperation :permission="permission">
        <template v-slot:middle>
          <el-button slot="reference" size="mini" :loading="crud.delAllLoading" :disabled="crud.selections.length === 0" @click="toDelete(crud.selections)">
            <i class="iconfont icon-shanchu" />
            删除
          </el-button>
        </template>
        <template v-slot:right>
          <el-button :loading="crud.downloadLoading" size="mini" :disabled="crud.selections.length === 0" @click="doExport(crud.selections)">
            <i class="iconfont icon-daochu" />
            导出
          </el-button>
        </template>
      </crudOperation>
    </div>
    <div class="container-wrap">
      <span class="right-top-line" />
      <span class="left-bottom-line" />
      <!--表格渲染-->
      <el-table
        ref="table"
        v-loading="crud.loading"
        :data="crud.data"
        style="width: 100%;"
        @selection-change="crud.selectionChangeHandler"
        @row-click="clickRowHandler"
      >
        <el-table-column type="selection" align="center" width="55" />
        <el-table-column prop="collectionName" label="馆藏地名称" />
        <el-table-column prop="collectionFloor" label="楼层" />
        <el-table-column prop="collectionExplain" label="说明">
          <template slot-scope="scope">
            <div>{{ scope.row.collectionExplain ? scope.row.collectionExplain : '-' }}</div>
          </template>
        </el-table-column>
        <el-table-column prop="createTime" label="创建时间" min-width="180">
          <template slot-scope="scope">
            <div>{{ scope.row.createTime | parseTime }}</div>
          </template>
        </el-table-column>
      </el-table>
      <!--分页组件-->
      <pagination v-if="crud.data.length!==0" />
    </div>
    <!-- form -->
    <el-dialog append-to-body :close-on-click-modal="false" :modal-append-to-body="false" :before-close="crud.cancelCU" :visible="crud.status.cu > 0" :title="crud.status.title">
      <span class="dialog-right-top" />
      <span class="dialog-left-bottom" />
      <div class="setting-dialog">
        <el-form ref="form" :rules="rules" :model="form" size="small" label-width="100px">
          <el-form-item label="所在楼层" prop="collectionFloor">
            <el-input v-model="form.collectionFloor" style="width: 580px;" />
          </el-form-item>
          <el-form-item label="馆藏地名称" prop="collectionName">
            <el-input v-model="form.collectionName" placeholder="请输入" style="width: 580px;" />
          </el-form-item>
          <el-form-item label="馆藏地编码" prop="collectionCode">
            <el-input v-model="form.collectionCode" placeholder="请输入" style="width: 580px;" />
          </el-form-item>
          <el-form-item label="说明" prop="collectionExplain">
            <el-input v-model="form.collectionExplain" placeholder="请输入" type="textarea" rows="3" style="width: 580px;" />
          </el-form-item>
        </el-form>
        <div slot="footer" class="dialog-footer">
          <el-button type="text" @click="crud.cancelCU">取消</el-button>
          <el-button :loading="crud.status.cu === 2" type="primary" @click="crud.submitCU">保存</el-button>
        </div>
      </div>
    </el-dialog>
  </div>
</template>

<script>
import crudBookBasice from '@/api/bookBasice/index'
import CRUD, { presenter, header, form, crud } from '@crud/crud'
import crudOperation from '@crud/CRUD.operation'
import rrOperation from '@crud/RR.operation'
import pagination from '@crud/Pagination'
import { parseTime, saveAs, getBlob } from '@/utils/index'
import qs from 'qs'
import { mapGetters } from 'vuex'

const defaultForm = { id: null, fondsId: null, collectionFloor: null, collectionName: null, collectionCode: null, collectionExplain: null }
export default {
  name: 'CollectionLocation',
  components: { crudOperation, rrOperation, pagination },
  cruds() {
    return CRUD({ title: '馆藏地', url: 'api/bookBasice/initCollectionLocationList', crudMethod: { ...crudBookBasice }, sort: [], optShow: {
      add: true,
      edit: true,
      del: false,
      download: false,
      group: false,
      reset: true
    }})
  },
  mixins: [presenter(), header(), form(defaultForm), crud()],
  data() {
    return {
      permission: {
        add: ['admin', 'collectionLocation:add'],
        edit: ['admin', 'collectionLocation:edit'],
        del: ['admin', 'collectionLocation:del']
      },
      rules: {
        collectionFloor: [
          { required: true, message: '所在楼层不可为空', trigger: 'blur' }
        ],
        collectionName: [
          { required: true, message: '馆藏名不可为空', trigger: 'blur' }
        ]
      }
    }
  },
  computed: {
    ...mapGetters([
      'baseApi',
      'user'
    ])
  },
  created() {
  },
  methods: {
    [CRUD.HOOK.beforeRefresh]() {
    },
    // 提交前的验证
    [CRUD.HOOK.afterValidateCU](crud) {
      crud.form.fondsId = this.user.fonds.id
      console.log(crud.form)
      return true
    },
    [CRUD.HOOK.afterAddCancel]() {
    },
    [CRUD.HOOK.afterSubmit]() {
    },
    toDelete(datas) {
      this.$confirm('此操作将删除当前所选馆藏地<span>你是否还要继续？</span>', '提示', {
        confirmButtonText: '继续',
        cancelButtonText: '取消',
        type: 'warning',
        dangerouslyUseHTMLString: true
      }).then(() => {
        this.crud.delAllLoading = true
        const ids = []
        datas.forEach(val => {
          ids.push(val.id)
        })
        console.log(ids)
        crudBookBasice.del(ids).then((res) => {
          this.$message({ message: res, type: 'success', offset: 8 })
          this.crud.delAllLoading = false
          this.crud.refresh()
        }).catch(err => {
          this.crud.delAllLoading = false
          console.log(err)
        })
      }).catch(() => {
        this.crud.delAllLoading = false
      })
    },
    doExport(data) {
      crud.downloadLoading = true
      this.$confirm('此操作将导出所选数据' + '<span>你是否还要继续？</span>', '提示', {
        confirmButtonText: '继续',
        cancelButtonText: '取消',
        type: 'warning',
        dangerouslyUseHTMLString: true
      }).then(() => {
        const ids = []
        data.forEach(val => {
          ids.push(val.id)
        })
        const params = {
          'ids': ids
        }
        const fileName = '馆藏地-' + parseTime(new Date()) + '.xlsx'
        getBlob(this.baseApi + '/api/bookBasice/exportCollectionLocation' + '?' + qs.stringify(params, { indices: false }), function(blob) {
          saveAs(blob, fileName)
        })
      }).catch(() => {
      })
    },
    clickRowHandler(row) {
      this.$refs.table.clearSelection()
      this.$refs.table.toggleRowSelection(row)
    }
  }
}
</script>

<style lang="scss" scoped>
.select-btn{
  display: inline-block;
  padding: 4px 11px 4px 14px;
  font-size: 18px;
  color: #fff;
  background: #0348F3;
  border-radius: 3px;
  margin: 10px 0 0 100px;
  text-align: center;
  cursor: pointer;
}
.send-obj{
  width: 580px;
  height: 180px;
  padding: 0 10px;
  border-radius: 3px 3px 3px 3px;
  border: 1px solid #E6E8ED;
  .el-tag{
    margin-right: 10px;
  }
}

::v-deep .crud-opts-left{
  position: relative;
}
.double-click-btn{
  top: 4px !important;
  right: 0;
  left: -156px !important;
}
</style>