4 changed files with 521 additions and 19 deletions
-
1src/views/deviceManage/map3d/map.vue
-
50src/views/deviceManage/shelfManage/shelf3dPosition.vue
-
488src/views/visualCheck/bookstore/book/index2.vue
-
1src/views/visualCheck/checkManage/dataScreening/shelfList.vue
@ -0,0 +1,488 @@ |
|||
<template> |
|||
<div class="app-container row-container" style="height: calc(100vh - 140px);"> |
|||
<!-- <div v-if="!isResult" class="search-main"> |
|||
<span class="bg_icon1" /> |
|||
<span class="bg_icon2" /> |
|||
<span class="bg_icon3" /> |
|||
<span class="bg_icon4" /> |
|||
<div class="search-content"> |
|||
<h2>图书检索</h2> |
|||
<div class="common-search"> |
|||
<div class="search-input"> |
|||
<el-input v-model="search" placeholder="请输入检索关键字" class="input-with-select" @keyup.enter.native="handleSearch" /> |
|||
<el-button slot="append" @click="handleSearch"><i class="iconfont icon-sousuo" />搜索</el-button> |
|||
</div> |
|||
<div style="margin: 20px 0; text-align: center; color: #1c1c1c;">书库内图书数量：<span style="display: inline-block; padding: 0 4px 0 0; font-weight: bold;">{{ totalBookCount }}</span>/ 册</div> |
|||
</div> |
|||
</div> |
|||
</div> --> |
|||
<!-- <div v-else> --> |
|||
<!--工具栏--> |
|||
<div class="head-container"> |
|||
<div class="head-search"> |
|||
<el-input |
|||
v-model="keyWord" |
|||
size="small" |
|||
clearable |
|||
placeholder="请输入检索关键字" |
|||
style="width: 320px;" |
|||
class="input-prepend filter-item" |
|||
@clear="crud.toQuery" |
|||
@keyup.enter.native="crud.toQuery" |
|||
> |
|||
<el-select slot="prepend" v-model="optionVal" style="width: 120px" @change="searchChange"> |
|||
<el-option |
|||
v-for="item in options" |
|||
:key="item.value" |
|||
:label="item.label" |
|||
:value="item.value" |
|||
/> |
|||
</el-select> |
|||
</el-input> |
|||
|
|||
<!-- <el-select v-model="status" clearable size="small" placeholder="状态" class="filter-item" style="width: 100px" @change="crud.toQuery"> |
|||
<i slot="prefix" class="iconfont icon-zhuangtai" /> |
|||
<el-option v-for="item in enabledTypeOptions" :key="item.key" :label="item.display_name" :value="item.key" /> |
|||
</el-select> --> |
|||
<el-button class="filter-item filter-search" size="mini" type="success" icon="el-icon-search" @click="crud.toQuery">搜索</el-button> |
|||
<el-button class="filter-item filter-refresh" size="mini" type="warning" icon="el-icon-search">高级搜索</el-button> |
|||
<!-- <el-button class="filter-item filter-refresh" size="mini" type="warning" icon="el-icon-refresh-left" @click="resetQuery()">重置</el-button> --> |
|||
</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> |
|||
</crudOperation> |
|||
</div> |
|||
<!--表单渲染--> |
|||
<el-dialog class="auto-dialog" append-to-body :close-on-click-modal="false" :before-close="crud.cancelCU" :visible.sync="crud.status.cu > 0" :title="crud.status.title"> |
|||
<div class="setting-dialog"> |
|||
<el-form ref="form" :inline="true" :model="form" :rules="rules" size="small" label-width="90px"> |
|||
<div style="width: 696px;"> |
|||
<el-form-item label="题名" prop="title"> |
|||
<el-input v-model="form.title" placeholder="请输入" /> |
|||
</el-form-item> |
|||
<el-form-item label="著者" prop="author"> |
|||
<el-input v-model="form.author" placeholder="请输入" /> |
|||
</el-form-item> |
|||
<el-form-item label="ISBN" prop="isbn"> |
|||
<el-input v-model="form.isbn" placeholder="请输入" /> |
|||
</el-form-item> |
|||
<el-form-item label="分类号" prop="classNo"> |
|||
<el-input v-model="form.classNo" placeholder="请输入" /> |
|||
</el-form-item> |
|||
<div> |
|||
<el-form-item label="出版社" prop="publisher"> |
|||
<el-input v-model="form.publisher" placeholder="请输入" style="width: 586px;" /> |
|||
</el-form-item> |
|||
</div> |
|||
<UploadCover :label-name="labelName" :form="form" upload-type="book" @childCover="handleCover" /> |
|||
</div> |
|||
<div v-if="form.bookCover" class="preview-cover"> |
|||
<p>封面预览</p> |
|||
<img :src="bookCover" alt=""> |
|||
</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 class="search-new"> |
|||
<div>搜索词：<span style="color: rgb(237, 74, 65); font-weight: bold; padding: 0px 4px;">中国</span>，搜索到<span style="font-weight: bold; color: #0c0e1e; padding: 0px 4px;">1,000,100</span>条结果，耗时：0.786 秒</div> |
|||
<div class="search-classify"> |
|||
<div class="search-classify-title"> |
|||
<p>分类导航</p> |
|||
<span /> |
|||
</div> |
|||
<ul class="search-classify-list"> |
|||
<li v-for="(item,index) in 15" :key="index">I 文学（48000）</li> |
|||
</ul> |
|||
</div> |
|||
</div> |
|||
<!--表格渲染--> |
|||
<div class="container-wrap" style=" min-height: calc(100vh - 362px);"> |
|||
<span class="right-top-line" /> |
|||
<span class="left-bottom-line" /> |
|||
<el-table |
|||
ref="table" |
|||
v-loading="crud.loading" |
|||
height="calc(100vh - 480px)" |
|||
:data="crud.data" |
|||
@selection-change="crud.selectionChangeHandler" |
|||
@row-click="clickRowHandler" |
|||
> |
|||
<el-table-column type="selection" align="center" width="55" /> |
|||
<el-table-column prop="icon" label="封面" align="center"> |
|||
<template slot-scope="scope"> |
|||
<img v-if="scope.row.bookCover === '' || scope.row.bookCover === null" src="~@/assets/images/cover-bg.png" alt="" style="display:block; height: 60px;"> |
|||
<img v-else :src="baseApi + '/api/fileRelevant/getImg?imgType=2&imgId=' + scope.row.bookCover + '.jpg'" alt="" style="display:block; height: 60px;"> |
|||
<!-- <img style="height: 60px;" :src="scope.row.bookCover? baseApi + '/api/fileRelevant/getImg?imgType=2&imgId=' + scope.row.bookCover + '.jpg' : '~@/assets/images/cover-bg.png'" alt=""> --> |
|||
</template> |
|||
</el-table-column> |
|||
<el-table-column label="题名" prop="title" width="300px" :show-overflow-tooltip="true" /> |
|||
<el-table-column label="著者" prop="author" /> |
|||
<el-table-column label="出版社" prop="publisher" /> |
|||
<el-table-column label="ISBN" prop="isbn" /> |
|||
<el-table-column label="分类号" prop="classNo" /> |
|||
<el-table-column label="馆藏量" prop="detailsCount" /> |
|||
</el-table> |
|||
<!--分页组件--> |
|||
<pagination v-if="crud.data.length!==0" /> |
|||
</div> |
|||
<!-- </div> --> |
|||
</div> |
|||
</template> |
|||
|
|||
<script> |
|||
import crudBook from '@/api/book/index' |
|||
import '@riophae/vue-treeselect/dist/vue-treeselect.css' |
|||
import CRUD, { presenter, header, form, crud } from '@crud/crud' |
|||
import crudOperation from '@crud/CRUD.operation' |
|||
import pagination from '@crud/Pagination' |
|||
import UploadCover from '@/views/components/upload.vue' |
|||
import { mapGetters } from 'vuex' |
|||
|
|||
// queryOnPresenterCreated: false |
|||
const defaultForm = { id: null, title: null, author: null, isbn: null, classNo: null, publisher: null, bookCover: null, bookRecNo: null } |
|||
export default { |
|||
name: 'Book', |
|||
components: { crudOperation, pagination, UploadCover }, |
|||
cruds() { |
|||
return CRUD({ title: '图书', idField: 'id || bookRecNo', url: 'api/bookBasice/initBookBasiceList', crudMethod: { ...crudBook }, |
|||
optShow: { |
|||
add: true, |
|||
edit: true, |
|||
del: false, |
|||
download: false, |
|||
group: false, |
|||
reset: true |
|||
} |
|||
}) |
|||
}, |
|||
mixins: [presenter(), header(), form(defaultForm), crud()], |
|||
data() { |
|||
return { |
|||
status: null, |
|||
labelName: '图书封面', |
|||
keyWord: null, |
|||
optionVal: 'search', |
|||
options: [ |
|||
{ value: 'search', label: '任意词' }, |
|||
{ value: 'title', label: '题名' }, |
|||
{ value: 'search2', label: '正题名' }, |
|||
{ value: 'isbn', label: 'ISBN/ISNN' }, |
|||
{ value: 'author', label: '著者' }, |
|||
{ value: 'search3', label: '主题词' }, |
|||
{ value: 'classNo', label: '分类号' }, |
|||
{ value: 'search4', label: '控制号' }, |
|||
{ value: 'search5', label: '订购号' }, |
|||
{ value: 'publisher', label: '出版社' }, |
|||
{ value: 'classNo2', label: '索书号' } |
|||
], |
|||
permission: { |
|||
add: ['admin', 'book:add'], |
|||
edit: ['admin', 'book:edit'], |
|||
del: ['admin', 'book:del'] |
|||
}, |
|||
enabledTypeOptions: [ |
|||
{ key: null, display_name: '全部' }, |
|||
{ key: 1, display_name: '馆藏数量不为0' } |
|||
], |
|||
bookCover: null, |
|||
rules: { |
|||
title: [ |
|||
{ required: true, message: '题名不可为空', trigger: 'blur' } |
|||
], |
|||
author: [ |
|||
{ required: true, message: '著者不可为空', trigger: 'blur' } |
|||
], |
|||
isbn: [ |
|||
{ required: true, message: 'ISBN不可为空', trigger: 'blur' } |
|||
], |
|||
classNo: [ |
|||
{ required: true, message: '分类号不可为空', trigger: 'blur' } |
|||
], |
|||
publisher: [ |
|||
{ required: true, message: '出版社不可为空', trigger: 'blur' } |
|||
] |
|||
}, |
|||
totalBookCount: 0, |
|||
isResult: false, |
|||
search: '' |
|||
} |
|||
}, |
|||
computed: { |
|||
...mapGetters([ |
|||
'baseApi' |
|||
]) |
|||
}, |
|||
created() { |
|||
// crudBook.FetchInitBookBasiceCount().then(res => { |
|||
// this.totalBookCount = res |
|||
// }).catch(err => { |
|||
// console.log(err) |
|||
// }) |
|||
}, |
|||
methods: { |
|||
[CRUD.HOOK.beforeRefresh]() { |
|||
if (this.status === null) { |
|||
this.crud.query.status = null |
|||
} else { |
|||
this.crud.query.status = this.status |
|||
} |
|||
this.crud.query[this.optionVal] = this.keyWord |
|||
}, |
|||
// 新增与编辑前做的操作 |
|||
[CRUD.HOOK.afterToCU](crud, form) { |
|||
}, |
|||
// 新增前 |
|||
[CRUD.HOOK.beforeToAdd]() { |
|||
}, |
|||
// 初始化编辑时候 |
|||
[CRUD.HOOK.beforeToEdit](crud, form) { |
|||
if (this.crud.form.bookCover) { |
|||
this.bookCover = this.baseApi + '/api/fileRelevant/getImg?imgType=2&imgId=' + this.crud.form.bookCover + '.jpg' |
|||
} else { |
|||
this.bookCover = require('@/assets/images/cover-bg.png') |
|||
} |
|||
}, |
|||
// 提交前做的操作 |
|||
[CRUD.HOOK.afterValidateCU](crud) { |
|||
console.log(crud.form) |
|||
return true |
|||
}, |
|||
handleSearch() { |
|||
if (this.search) { |
|||
this.isResult = true |
|||
this.keyWord = this.search |
|||
this.crud.toQuery() |
|||
} else { |
|||
this.$message({ message: '请输入检索关键字段', type: 'error', offset: 8 }) |
|||
} |
|||
}, |
|||
toSearch() { |
|||
if (this.keyWord) { |
|||
this.search = '' |
|||
this.isResult = true |
|||
this.crud.toQuery() |
|||
} else { |
|||
this.$message({ message: '请输入检索关键字段', type: 'error', offset: 8 }) |
|||
} |
|||
}, |
|||
searchChange(val) { |
|||
if (val) { |
|||
this.keyWord = '' |
|||
this.options.forEach(option => { |
|||
if (option.value !== val) { |
|||
this.crud.query[option.value] = null |
|||
} |
|||
}) |
|||
} |
|||
}, |
|||
resetQuery() { |
|||
this.search = '' |
|||
this.keyWord = '' |
|||
this.crud.query[this.optionVal] = this.keyWord |
|||
this.status = null |
|||
this.crud.data = [] |
|||
// this.crud.toQuery() |
|||
}, |
|||
handleCover(value) { |
|||
console.log(value) |
|||
if (value) { |
|||
this.form.bookCover = value |
|||
this.bookCover = this.baseApi + '/api/fileRelevant/getImg?imgType=2&imgId=' + value + '.jpg' |
|||
} else { |
|||
this.form.bookCover = null |
|||
this.bookCover = null |
|||
} |
|||
}, |
|||
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 |
|||
// bookRecNos |
|||
const ids = [] |
|||
datas.forEach(val => { |
|||
ids.push(val.bookRecNo) |
|||
}) |
|||
console.log(ids) |
|||
crudBook.del(ids).then(res => { |
|||
console.log(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 |
|||
}) |
|||
} |
|||
} |
|||
} |
|||
</script> |
|||
|
|||
<style lang="scss" scoped> |
|||
::v-deep .input-prepend .el-input__inner{ |
|||
padding-left: 150px; |
|||
} |
|||
|
|||
.auto-dialog{ |
|||
::v-deep .el-dialog{ |
|||
width: initial; |
|||
} |
|||
} |
|||
|
|||
.el-form{ |
|||
display: flex; |
|||
justify-content: flex-start; |
|||
} |
|||
|
|||
.preview-cover{ |
|||
flex: 1; |
|||
padding-left: 10px; |
|||
p{ |
|||
font-weight: bold; |
|||
color: #0c0e1e; |
|||
margin: -14px 0 10px 0; |
|||
} |
|||
img{ |
|||
display: block; |
|||
height: 180px; |
|||
} |
|||
} |
|||
|
|||
.search-main{ |
|||
position: relative; |
|||
width: 100%; |
|||
height: calc(100vh - 182px); |
|||
background: url('~@/assets/images/archives/bg.png') no-repeat; |
|||
background-size: 100% 100%; |
|||
& span{ |
|||
display: block; |
|||
} |
|||
.bg_icon1{ |
|||
position: absolute; |
|||
left: 110px; |
|||
top: 400px; |
|||
width: 236px; |
|||
height: 116px; |
|||
background: url('~@/assets/images/archives/ys1.png') no-repeat; |
|||
background-size: 100% 100%; |
|||
} |
|||
.bg_icon2{ |
|||
position: absolute; |
|||
left: 50%; |
|||
bottom: 60px; |
|||
width: 472px; |
|||
height: 377px; |
|||
margin-left: -236px; |
|||
background: url('~@/assets/images/archives/ys2.png') no-repeat; |
|||
background-size: 100% 100%; |
|||
} |
|||
.bg_icon3{ |
|||
position: absolute; |
|||
right: 240px; |
|||
bottom: 40px; |
|||
width: 136px; |
|||
height: 152px; |
|||
background: url('~@/assets/images/archives/ys3.png') no-repeat; |
|||
background-size: 100% 100%; |
|||
} |
|||
.bg_icon4{ |
|||
position: absolute; |
|||
right: 110px; |
|||
top: 50%; |
|||
width: 170px; |
|||
height: 136px; |
|||
margin-top: -58px; |
|||
background: url('~@/assets/images/archives/ys4.png') no-repeat; |
|||
background-size: 100% 100%; |
|||
} |
|||
} |
|||
.search-content{ |
|||
padding-top: 120px; |
|||
h2{ |
|||
font-size: 40px; |
|||
text-align: center; |
|||
color: #1C1C1C; |
|||
margin-bottom: 40px; |
|||
} |
|||
} |
|||
|
|||
.common-search{ |
|||
width: 800px; |
|||
margin: 0 auto; |
|||
.search-input{ |
|||
position: relative; |
|||
display: flex; |
|||
justify-content: space-between; |
|||
width: 800px; |
|||
height: 54px; |
|||
background-color: #fff; |
|||
border-radius: 3px; |
|||
.input-with-select{ |
|||
::v-deep .el-input__inner{ |
|||
width: 664px; |
|||
height: 54px !important; |
|||
font-size: 14px; |
|||
padding: 0 20px; |
|||
border: none; |
|||
} |
|||
} |
|||
.el-button{ |
|||
width: 136px; |
|||
background-color: #0348F3; |
|||
font-size: 16px; |
|||
color: #fff; |
|||
border-radius: 0 3px 3px 0; |
|||
} |
|||
} |
|||
} |
|||
|
|||
.search-new{ |
|||
border: 1px solid #e3e7ee; |
|||
margin: 10px 0; |
|||
padding: 10px; |
|||
font-size: 12px; |
|||
.search-classify-title{ |
|||
font-weight: bold; |
|||
display: flex; |
|||
justify-content: flex-start; |
|||
align-items: center; |
|||
padding: 10px 0 5px 0; |
|||
span{ |
|||
display: block; |
|||
flex: 1; |
|||
margin-left: 10px; |
|||
border-bottom: 1px solid #e3e7ee; |
|||
} |
|||
} |
|||
.search-classify-list{ |
|||
display: flex; |
|||
justify-content: flex-start; |
|||
align-items: center; |
|||
flex-wrap: wrap; |
|||
width: 100%; |
|||
li{ |
|||
width: 20%; |
|||
line-height: 24px; |
|||
} |
|||
} |
|||
} |
|||
</style> |
|||
Write
Preview
Loading…
Cancel
Save
Reference in new issue