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