图书馆综合管理系统
You can not select more than 25 topics Topics must start with a letter or number, can include dashes ('-') and can be up to 35 characters long.
 
 
 
 

179 lines
6.9 KiB

<template>
<div class="app-container venue-container">
<div class="venue-left">
<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">
<i class="iconfont icon-paixu" />
排序
</el-button>
</template>
</crudOperation>
</div>
<el-table
ref="table"
v-loading="crud.loading"
:data="crud.data"
style="width: 100%;"
height="590"
@selection-change="crud.selectionChangeHandler"
>
<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>
<div class="venue-right">
<div class="container-right tab-content">
<span class="right-top-line" />
<span class="left-bottom-line" />
<ul class="tab-nav">
<li class="active-tab-nav">楼层预览<i /></li>
<!-- 最右侧装饰img -->
<span class="tab-right-img" />
</ul>
<div class="venue-preview">
<img src="~@/assets/images/system/default-img.jpg" alt="">
</div>
</div>
</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="collectionExplain">
<el-input v-model="form.collectionExplain" placeholder="请输入" type="textarea" rows="3" style="width: 580px;" />
</el-form-item>
<div>
<el-form-item class="book-cover-upload" label="楼层地图" prop="cover">
<el-input v-model="form.cover" placeholder="请上传" :readonly="true" />
<!-- <p :class="['input-style', form.cover === null ? 'error-box' :'']">{{ form.cover }}</p> -->
<!-- <span v-if="form.cover === null" class="error-tip">请上传图书封面</span> -->
<div class="upload-btn">
<input id="upFile" type="file" name="upFile" @change="changeFile($event)">
<el-button size="small" type="primary"><i class="iconfont icon-shangchuan" />上传</el-button>
</div>
</el-form-item>
</div>
</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'
const defaultForm = { id: null, fondsId: null, collectionFloor: null, collectionName: null, collectionCode: null, collectionExplain: null }
export default {
name: 'Floor',
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', 'floor:add'],
edit: ['admin', 'floor:edit'],
del: ['admin', 'floor:del']
},
rules: {
collectionFloor: [
{ required: true, message: '所在楼层不可为空', trigger: 'blur' }
],
collectionName: [
{ required: true, message: '馆藏名不可为空', trigger: 'blur' }
]
}
}
},
method: {
[CRUD.HOOK.beforeRefresh]() {
},
// 提交前的验证
[CRUD.HOOK.afterValidateCU](crud) {
crud.form.fondsId = this.user.fonds.id
console.log(crud.form)
return true
},
clickRowHandler(row) {
this.$refs.table.clearSelection()
this.$refs.table.toggleRowSelection(row)
},
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(() => {
this.$message({ message: '删除成功', 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
})
}
}
}
</script>
<style scoped>
</style>