22 changed files with 1933 additions and 449 deletions
-
37src/api/stockTask/index.js
-
14src/assets/iconfonts/light/iconfont.css
-
2src/assets/iconfonts/light/iconfont.js
-
14src/assets/iconfonts/light/iconfont.json
-
BINsrc/assets/iconfonts/light/iconfont.ttf
-
BINsrc/assets/iconfonts/light/iconfont.woff
-
BINsrc/assets/iconfonts/light/iconfont.woff2
-
BINsrc/assets/images/shelf01.png
-
BINsrc/assets/images/shelf02.png
-
BINsrc/assets/images/shelf03.png
-
BINsrc/assets/images/shelf04.png
-
36src/assets/styles/manage.scss
-
8src/utils/index.js
-
10src/views/visualCheck/checkManage/bookshelfSearch/index.vue
-
244src/views/visualCheck/checkManage/checkPlan/index.vue
-
852src/views/visualCheck/checkManage/dataScreening/girdList.vue
-
1src/views/visualCheck/checkManage/dataScreening/index.vue
-
3src/views/visualCheck/checkManage/dataScreening/regionsList.vue
-
686src/views/visualCheck/checkManage/dataScreening/shelfList copy.vue
-
316src/views/visualCheck/checkManage/dataScreening/shelfList.vue
-
149src/views/visualCheck/checkManage/upDownLog/index.vue
-
10src/views/visualCheck/venueDevice/bookshelfPosition/index.vue
@ -0,0 +1,37 @@ |
|||||
|
import request from '@/utils/request' |
||||
|
// import qs from 'qs'
|
||||
|
|
||||
|
export function add(data) { |
||||
|
return request({ |
||||
|
url: 'api/stocktask-task/editStockTask', |
||||
|
method: 'post', |
||||
|
data |
||||
|
}) |
||||
|
} |
||||
|
|
||||
|
export function edit(data) { |
||||
|
return request({ |
||||
|
url: 'api/stocktask-task/editStockTask', |
||||
|
method: 'post', |
||||
|
data |
||||
|
}) |
||||
|
} |
||||
|
|
||||
|
export function del(ids) { |
||||
|
return request({ |
||||
|
url: '', |
||||
|
method: 'post', |
||||
|
data: ids |
||||
|
}) |
||||
|
} |
||||
|
|
||||
|
// 修改盘点任务状态
|
||||
|
export function FetchUpdateStockTaskStatus(data) { |
||||
|
return request({ |
||||
|
url: 'api/stocktask-task/updateStockTaskStatus', |
||||
|
method: 'post', |
||||
|
data |
||||
|
}) |
||||
|
} |
||||
|
|
||||
|
export default { add, edit, del, FetchUpdateStockTaskStatus } |
||||
2
src/assets/iconfonts/light/iconfont.js
File diff suppressed because it is too large
View File
File diff suppressed because it is too large
View File
|
After Width: 32 | Height: 441 | Size: 1.4 KiB |
|
After Width: 368 | Height: 441 | Size: 62 KiB |
|
After Width: 48 | Height: 192 | Size: 2.1 KiB |
|
After Width: 256 | Height: 256 | Size: 3.0 KiB |
@ -0,0 +1,686 @@ |
|||||
|
<template> |
||||
|
<div class="app-container"> |
||||
|
<div class="venue-header"> |
||||
|
<h4 @click="handleToGrids"><i class="iconfont icon-shuju" />书架总览</h4> |
||||
|
<span class="bookshelf-area">{{ floorName }} - {{ regionName }}</span> |
||||
|
<p><i class="iconfont icon-gongsi" />{{ user.fonds.fondsName }}</p> |
||||
|
</div> |
||||
|
<div class="venue-content"> |
||||
|
<crudOperation :permission="permission"> |
||||
|
<template v-slot:middle> |
||||
|
<el-select v-model="layerVal" clearable size="small" placeholder="楼层" class="filter-item" style="width: 100px; margin-right: 20px;"> |
||||
|
<el-option v-for="item in layerOptions" :key="item.id" :label="item.name" :value="item.id" /> |
||||
|
</el-select> |
||||
|
<el-button v-permission="permission.add" size="mini" @click="crud.toAdd"> |
||||
|
<i class="iconfont icon-shengchengpandiandan" /> |
||||
|
书架盘点 |
||||
|
</el-button> |
||||
|
</template> |
||||
|
<template v-slot:right> |
||||
|
<el-button :loading="crud.downloadLoading" size="mini" @click="doExport(crud.selections)"> |
||||
|
<i class="iconfont icon-daochu" /> |
||||
|
导出 |
||||
|
</el-button> |
||||
|
</template> |
||||
|
</crudOperation> |
||||
|
<div class="venue-left"> |
||||
|
<div class="container-right tab-content"> |
||||
|
<span class="right-top-line" /> |
||||
|
<span class="left-bottom-line" /> |
||||
|
|
||||
|
<!-- <div style="display: flex;justify-content: flex-start; align-items: center;"> --> |
||||
|
<swiper |
||||
|
ref="swiperTitle" |
||||
|
class="swiper-title" |
||||
|
:options="swiperOptionTitle" |
||||
|
:auto-update="true" |
||||
|
:auto-destroy="true" |
||||
|
:delete-instance-on-destroy="true" |
||||
|
:cleanup-styles-on-destroy="true" |
||||
|
> |
||||
|
<swiper-slide |
||||
|
v-for="(item, index) of tabListData" |
||||
|
ref="swiperSlideItem" |
||||
|
:key="'name' + index" |
||||
|
:iname="item.name" |
||||
|
class="swiper-slide-title" |
||||
|
> |
||||
|
<div |
||||
|
class="tab-name" |
||||
|
:class="{ active: index === swiperActiveIndex }" |
||||
|
@click="handleSlidClickFun(index)" |
||||
|
> |
||||
|
{{ item.name }} |
||||
|
</div> |
||||
|
</swiper-slide> |
||||
|
</swiper> |
||||
|
<div class="tag-info"> |
||||
|
<p>错序：1</p> |
||||
|
<p>错架：1</p> |
||||
|
<p>在架：20</p> |
||||
|
</div> |
||||
|
<!-- </div> --> |
||||
|
<swiper |
||||
|
ref="swiperContent" |
||||
|
class="swiper-content" |
||||
|
:options="swiperOptionContent" |
||||
|
:auto-update="true" |
||||
|
:auto-destroy="true" |
||||
|
:delete-instance-on-destroy="true" |
||||
|
:cleanup-styles-on-destroy="true" |
||||
|
> |
||||
|
<swiper-slide |
||||
|
v-for="(item, index) of tabListData" |
||||
|
:key="'content' + index" |
||||
|
class="swiper-slide-content" |
||||
|
> |
||||
|
|
||||
|
<ul class="cabinet-row"> |
||||
|
<li |
||||
|
v-for="(cell,i) in booShelfGrid" |
||||
|
:key="i" |
||||
|
class="cabinet-cell" |
||||
|
:style="cellStyle" |
||||
|
:class="{ active: i === cellIndex }" |
||||
|
@click="handleCellCurrent(cell,i)" |
||||
|
@mouseenter="showPopover(i)" |
||||
|
@mouseleave="hidePopover" |
||||
|
> |
||||
|
<span class="cell-name">{{ removeAreaPrefix(cell.gridName) }}</span> |
||||
|
<!-- v-if="popoverIndex === i" --> |
||||
|
<el-popover |
||||
|
v-if="popoverIndex === i" |
||||
|
ref="popover" |
||||
|
:visible="popoverVisible[i]" |
||||
|
width="400" |
||||
|
:style="popoverStyles[i]" |
||||
|
trigger="manual" |
||||
|
> |
||||
|
<div slot="reference" class="popover-content"> |
||||
|
<div class="tooltip-top"> |
||||
|
<h4>层位概况</h4> |
||||
|
<i class="update-time">2024-11-28 09:46</i> |
||||
|
</div> |
||||
|
<ul> |
||||
|
<li><p>层位</p><em class="percentage"><i style="color: #fff;">{{ removeAreaPrefix(cell.gridName) }}</i></em></li> |
||||
|
<li><p>在架</p><em><i>15000</i>册</em></li> |
||||
|
<li><p>错架</p><em><i>300</i>层</em> <em class="percentage">（2.00%）</em></li> |
||||
|
<li><p>错序</p><em><i>0</i>层</em><em class="percentage">（0.00%）</em></li> |
||||
|
</ul> |
||||
|
</div> |
||||
|
</el-popover> |
||||
|
</li> |
||||
|
</ul> |
||||
|
</swiper-slide> |
||||
|
</swiper> |
||||
|
</div> |
||||
|
</div> |
||||
|
<div class="venue-right"> |
||||
|
<div class="lib-right-item lib-info"> |
||||
|
<h4>本架概况</h4> |
||||
|
<ul class="data-right-list"> |
||||
|
<li><p>书架</p><span><i>001排</i></span></li> |
||||
|
<li><p>规则</p><span><i>双面 6 x 5</i></span></li> |
||||
|
</ul> |
||||
|
</div> |
||||
|
<div class="lib-right-item"> |
||||
|
<h4>本架盘点概况</h4> |
||||
|
<div class="refresh-date">2024-11-28 09:46</div> |
||||
|
<ul class="data-right-list"> |
||||
|
<li><p>在架</p><span><i>15000</i>册</span></li> |
||||
|
<li><p>错架</p><span><i>300</i>层</span> <span class="percentage">（2.00%）</span></li> |
||||
|
<li><p>错序</p><span><i>0</i>层</span><span class="percentage">（0.00%）</span></li> |
||||
|
</ul> |
||||
|
</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" :inline="true" :model="form" :rules="rules" size="small" label-width="80px"> |
||||
|
<el-form-item label="盘点单号" prop="taskName"> |
||||
|
<el-input v-model="form.taskName" /> |
||||
|
</el-form-item> |
||||
|
<el-form-item label="盘点类型" prop="taskType"> |
||||
|
<el-input v-model="form.taskType" /> |
||||
|
</el-form-item> |
||||
|
<el-form-item label="目标位置" prop="location"> |
||||
|
<el-input v-model="form.location" /> |
||||
|
</el-form-item> |
||||
|
<el-form-item label="目标数量" prop="number"> |
||||
|
<el-input v-model="form.number" /> |
||||
|
</el-form-item> |
||||
|
<el-row> |
||||
|
<el-form-item label="备注" prop="remark"> |
||||
|
<el-input v-model="form.remark" type="textarea" style="width: 572px;" :rows="4" /> |
||||
|
</el-form-item> |
||||
|
</el-row> |
||||
|
</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 { FetchInitShelfGridByShelfId, FetchBookShelfDetails } from '@/api/shelf/index' |
||||
|
import crudRegion from '@/api/area/index' |
||||
|
import CRUD, { presenter, header, form, crud } from '@crud/crud' |
||||
|
import crudOperation from '@crud/CRUD.operation' |
||||
|
import { mapGetters } from 'vuex' |
||||
|
import { swiper, swiperSlide } from 'vue-awesome-swiper' |
||||
|
import 'swiper/dist/css/swiper.css' |
||||
|
|
||||
|
const defaultForm = { id: null, taskType: null, taskName: null, location: null, number: null, remark: null } |
||||
|
export default { |
||||
|
name: 'DataScreening', |
||||
|
components: { swiper, swiperSlide, crudOperation }, |
||||
|
cruds() { |
||||
|
return CRUD({ title: '架位总览', url: 'api/libraryRegion/initLibraryRegionList', crudMethod: { ...crudRegion }, sort: [], optShow: { |
||||
|
add: false, |
||||
|
edit: false, |
||||
|
del: false, |
||||
|
download: false, |
||||
|
group: false, |
||||
|
reset: false |
||||
|
}, |
||||
|
queryOnPresenterCreated: false |
||||
|
}) |
||||
|
}, |
||||
|
mixins: [presenter(), header(), form(defaultForm), crud()], |
||||
|
data() { |
||||
|
const _this = this |
||||
|
return { |
||||
|
floorName: null, |
||||
|
regionName: null, |
||||
|
bookShelfDetails: null, |
||||
|
booShelfGrid: null, |
||||
|
cellInfo: { |
||||
|
gridName: null, |
||||
|
startSortmark: null, |
||||
|
endSortmark: null, |
||||
|
cameraId: null |
||||
|
}, |
||||
|
callNumVisible: false, |
||||
|
layerNum: 0, |
||||
|
rackNum: 0, |
||||
|
swiperActiveIndex: 0, |
||||
|
cellIndex: null, |
||||
|
swiperOptionContent: { |
||||
|
slidesPerView: 'auto', |
||||
|
on: { |
||||
|
slideChangeTransitionStart: function() { |
||||
|
_this.cellIndex = null |
||||
|
_this.swiperActiveIndex = this.activeIndex |
||||
|
console.log('activeIndexffff', this.swiperActiveIndex) |
||||
|
_this.swiperTitle.slideTo(this.activeIndex, 500, false) |
||||
|
} |
||||
|
} |
||||
|
}, |
||||
|
swiperOptionTitle: { |
||||
|
slidesPerView: 'auto', |
||||
|
freeMode: true |
||||
|
}, |
||||
|
layerVal: '001排', |
||||
|
layerOptions: [{ id: 1, name: '001排' }], |
||||
|
tabListData: [], |
||||
|
permission: { |
||||
|
add: ['admin', 'floor:add'], |
||||
|
edit: ['admin', 'floor:edit'], |
||||
|
del: ['admin', 'floor:del'] |
||||
|
}, |
||||
|
rules: { |
||||
|
taskName: [ |
||||
|
{ required: true, message: '请输入盘点单号', trigger: 'blur' } |
||||
|
], |
||||
|
taskType: [ |
||||
|
{ required: true, message: '请输入盘点类型', trigger: 'blur' } |
||||
|
], |
||||
|
location: [ |
||||
|
{ required: true, message: '请输入目标位置', trigger: 'blur' } |
||||
|
], |
||||
|
number: [ |
||||
|
{ required: true, message: '请输入目标数量', trigger: 'blur' } |
||||
|
] |
||||
|
}, |
||||
|
popoverIndex: 1, |
||||
|
popoverVisible: [], |
||||
|
popoverStyles: [] |
||||
|
} |
||||
|
}, |
||||
|
computed: { |
||||
|
...mapGetters([ |
||||
|
'user', |
||||
|
'baseApi' |
||||
|
]), |
||||
|
swiperContent() { |
||||
|
return this.$refs.swiperContent.$el.swiper |
||||
|
}, |
||||
|
swiperTitle() { |
||||
|
return this.$refs.swiperTitle.$el.swiper |
||||
|
}, |
||||
|
cellStyle: function() { |
||||
|
// const h = '100%/' + this.layerNum |
||||
|
// const w = '100%/' + this.rackNum |
||||
|
const h = '70px' |
||||
|
const w = '100%/' + this.rackNum |
||||
|
return { width: `calc(${w} - 4px )`, height: `calc(${h} - 2px)` } |
||||
|
} |
||||
|
}, |
||||
|
async created() { |
||||
|
if (localStorage.getItem('dataScreenRegion')) { |
||||
|
const dataScreenRegion = JSON.parse(localStorage.getItem('dataScreenRegion')) |
||||
|
this.floorName = dataScreenRegion.floorName |
||||
|
this.regionName = dataScreenRegion.regionName |
||||
|
// 单面/双面 |
||||
|
this.tabListData = dataScreenRegion.rowType === 1 |
||||
|
? dataScreenRegion.toward === 1 |
||||
|
? [{ name: 'A面' }] |
||||
|
: [{ name: 'B面' }] |
||||
|
: [{ name: 'A面' }, { name: 'B面' }] |
||||
|
|
||||
|
FetchBookShelfDetails({ 'shelfId': dataScreenRegion.id }).then(res => { |
||||
|
this.layerNum = res.shelfFloor |
||||
|
this.rackNum = res.shelfShelf |
||||
|
this.bookShelfDetails = res |
||||
|
this.getInitShelfGridByShelfId(this.bookShelfDetails.toward) |
||||
|
}).catch(() => { |
||||
|
}) |
||||
|
} |
||||
|
}, |
||||
|
methods: { |
||||
|
handleToGrids() { |
||||
|
this.$router.push({ path: '/dataScreening/gird', query: { }}) |
||||
|
}, |
||||
|
[CRUD.HOOK.beforeRefresh]() { |
||||
|
}, |
||||
|
[CRUD.HOOK.afterRefresh](crud) { |
||||
|
}, |
||||
|
// 提交前的验证 |
||||
|
[CRUD.HOOK.afterValidateCU](crud) { |
||||
|
return true |
||||
|
}, |
||||
|
removeAreaPrefix(gridNames) { |
||||
|
const index = gridNames.indexOf('区') |
||||
|
if (index !== -1) { |
||||
|
return gridNames.substring(index + 1) |
||||
|
} |
||||
|
return gridNames |
||||
|
}, |
||||
|
getInitShelfGridByShelfId(toward) { |
||||
|
// rowType 1 单 2 双 |
||||
|
// toward 1 A面 2 B面 |
||||
|
// shelfType 1 '始终最左边为第1架（S型排架）' |
||||
|
// shelfType 2 'A面最左为第1架（B面最左为最后1架）' |
||||
|
// shelfType 3 'B面最左为第1架（A面最左为最后1架）' |
||||
|
// floorType 1 '最顶层为第一层（从上至下）' |
||||
|
// floorType 2 '最底层为第一层（从下至上）' |
||||
|
FetchInitShelfGridByShelfId({ 'shelfId': this.bookShelfDetails.id, 'toward': toward }).then(res => { |
||||
|
const sortFunction = toward === 1 ? { |
||||
|
1: { 1: 'sortBookshelvesLeftTop', 2: 'sortBookshelvesLeftBottom' }, |
||||
|
2: { 1: 'sortBookshelvesLeftTop', 2: 'sortBookshelvesLeftBottom' }, |
||||
|
3: { 1: 'sortBookshelvesRightTop', 2: 'sortBookshelvesRightBottom' } |
||||
|
} : { |
||||
|
1: { 1: 'sortBookshelvesLeftTop', 2: 'sortBookshelvesLeftBottom' }, |
||||
|
2: { 1: 'sortBookshelvesRightTop', 2: 'sortBookshelvesRightBottom' }, |
||||
|
3: { 1: 'sortBookshelvesLeftTop', 2: 'sortBookshelvesLeftBottom' } |
||||
|
} |
||||
|
const shelfType = this.bookShelfDetails.shelfType |
||||
|
const floorType = this.bookShelfDetails.floorType |
||||
|
const sortMethod = sortFunction[shelfType][floorType] |
||||
|
this.booShelfGrid = this[sortMethod](res) |
||||
|
|
||||
|
this.popoverVisible = Array(this.booShelfGrid.length).fill(false) |
||||
|
// this.popoverStyles = new Array(this.booShelfGrid.length).fill({ position: 'absolute', left: '20%', top: '48px' }) |
||||
|
}).catch(() => { |
||||
|
}) |
||||
|
}, |
||||
|
// 最左为第一架, 最顶层为第一层 从上往下 |
||||
|
sortBookshelvesLeftTop(data) { |
||||
|
const sortedData = [] |
||||
|
const maxFloor = Math.max(...data.map(item => parseInt(item.gridFloor))) |
||||
|
const maxShelf = Math.max(...data.map(item => parseInt(item.gridShelf.slice(-1)))) |
||||
|
|
||||
|
for (let i = 1; i <= maxFloor; i++) { |
||||
|
for (let j = 1; j <= maxShelf; j++) { |
||||
|
const currentShelf = data.find(item => parseInt(item.gridFloor) === i && parseInt(item.gridShelf.slice(-1)) === j) |
||||
|
if (currentShelf) { |
||||
|
sortedData.push(currentShelf) |
||||
|
} |
||||
|
} |
||||
|
} |
||||
|
return sortedData |
||||
|
}, |
||||
|
// 最右为第一架,最左为最后一架, 最顶层为第一层 从上往下 |
||||
|
sortBookshelvesRightTop(data) { |
||||
|
const sortedData = [] |
||||
|
// 获取最大的楼层数 |
||||
|
const maxFloor = Math.max(...data.map(item => parseInt(item.gridFloor))) |
||||
|
const maxShelf = Math.max(...data.map(item => parseInt(item.gridShelf.match(/\d+$/)[0]))) |
||||
|
for (let i = 1; i <= maxFloor; i++) { |
||||
|
// 从最大的书架层数开始，向下排序 |
||||
|
for (let j = maxShelf; j >= 1; j--) { |
||||
|
const currentShelf = data.find(item => parseInt(item.gridFloor) === i && parseInt(item.gridShelf.match(/\d+$/)[0]) === j) |
||||
|
if (currentShelf) { |
||||
|
sortedData.push(currentShelf) |
||||
|
} |
||||
|
} |
||||
|
} |
||||
|
return sortedData |
||||
|
}, |
||||
|
// 最左为第一架, 最底层为第一层 从下往上 |
||||
|
sortBookshelvesLeftBottom(data) { |
||||
|
const sortedData = [] |
||||
|
// 获取最大的楼层数 |
||||
|
const maxFloor = Math.max(...data.map(item => parseInt(item.gridFloor))) |
||||
|
// 获取最大的书架层数 |
||||
|
const maxShelf = Math.max(...data.map(item => parseInt(item.gridShelf.slice(-1)))) |
||||
|
for (let i = maxFloor; i >= 1; i--) { |
||||
|
for (let j = 1; j <= maxShelf; j++) { |
||||
|
const currentShelf = data.find(item => parseInt(item.gridFloor) === i && parseInt(item.gridShelf.slice(-1)) === j) |
||||
|
if (currentShelf) { |
||||
|
sortedData.push(currentShelf) |
||||
|
} |
||||
|
} |
||||
|
} |
||||
|
return sortedData |
||||
|
}, |
||||
|
// 最左为最后一架, 最底层为第一层 从下往上 |
||||
|
sortBookshelvesRightBottom(data) { |
||||
|
const sortedData = [] |
||||
|
// 获取最大的楼层数 |
||||
|
const maxFloor = Math.max(...data.map(item => parseInt(item.gridFloor))) |
||||
|
const maxShelfPerFloor = data.map(item => parseInt(item.gridShelf.match(/\d+$/)[0])) |
||||
|
.reduce((acc, curr, index, arr) => { |
||||
|
const floor = parseInt(data[index].gridFloor) |
||||
|
if (!acc[floor]) acc[floor] = 1 |
||||
|
if (acc[floor] < curr) acc[floor] = curr |
||||
|
return acc |
||||
|
}, {}) |
||||
|
// 从最大的楼层开始向下遍历 |
||||
|
for (let i = maxFloor; i >= 1; i--) { |
||||
|
// 从最大的书架编号开始向左遍历 |
||||
|
for (let j = maxShelfPerFloor[i] || 1; j >= 1; j--) { |
||||
|
const currentShelf = data.find(item => parseInt(item.gridFloor) === i && parseInt(item.gridShelf.match(/\d+$/)[0]) === j) |
||||
|
if (currentShelf) { |
||||
|
sortedData.push(currentShelf) |
||||
|
} |
||||
|
} |
||||
|
} |
||||
|
return sortedData |
||||
|
}, |
||||
|
handleSlidClickFun(index) { |
||||
|
this.cellIndex = null |
||||
|
this.handleSlideToFun(index) |
||||
|
if (localStorage.getItem('bookShelfDetails')) { |
||||
|
this.getInitShelfGridByShelfId(index + 1) |
||||
|
} |
||||
|
}, |
||||
|
handleSlideToFun(index) { |
||||
|
this.swiperActiveIndex = index |
||||
|
this.swiperContent.slideTo(index, 500, false) |
||||
|
this.swiperTitle.slideTo(index, 500, false) |
||||
|
}, |
||||
|
handleCellCurrent(item, index) { |
||||
|
console.log('index', index) |
||||
|
this.cellIndex = index |
||||
|
this.cellInfo = { |
||||
|
id: item.id, |
||||
|
gridName: item.gridName, |
||||
|
startSortmark: item.startSortmark, |
||||
|
endSortmark: item.endSortmark, |
||||
|
cameraId: item.cameraId, |
||||
|
check: item.isCheck, |
||||
|
order: item.isOrder |
||||
|
} |
||||
|
}, |
||||
|
showPopover(index) { |
||||
|
this.popoverIndex = index |
||||
|
// 显示对应的 popover |
||||
|
if (!this.popoverVisible[index]) { |
||||
|
this.$set(this.popoverVisible, index, true) |
||||
|
} |
||||
|
|
||||
|
const lastColumnIndexes = [] |
||||
|
const secondLastColumnIndexes = [] |
||||
|
|
||||
|
for (let i = 0; i < this.booShelfGrid.length; i++) { |
||||
|
// 计算当前数据项的列索引 |
||||
|
const columnIndex = i % this.rackNum |
||||
|
// 如果是最后一列（第5列） |
||||
|
if (columnIndex === this.rackNum - 1) { |
||||
|
lastColumnIndexes.push(i) |
||||
|
// 更新最后一列的样式 |
||||
|
this.$set(this.popoverStyles, i, { position: 'absolute', left: '-140px', top: '48px' }) |
||||
|
} |
||||
|
// 如果是倒数第二列（第4列） |
||||
|
if (columnIndex === this.rackNum - 2) { |
||||
|
secondLastColumnIndexes.push(i) |
||||
|
// 更新倒数第二列的样式 |
||||
|
this.$set(this.popoverStyles, i, { position: 'absolute', left: '-20px', top: '48px' }) |
||||
|
} |
||||
|
} |
||||
|
}, |
||||
|
hidePopover() { |
||||
|
this.popoverIndex = null |
||||
|
// 隐藏所有的popover |
||||
|
this.popoverVisible.forEach((isVisible, index) => { |
||||
|
if (isVisible) { |
||||
|
this.$set(this.popoverVisible, index, false) |
||||
|
} |
||||
|
}) |
||||
|
} |
||||
|
} |
||||
|
} |
||||
|
</script> |
||||
|
|
||||
|
<style lang="scss" scoped> |
||||
|
.container-right{ |
||||
|
min-height: calc(100vh - 232px) !important; |
||||
|
} |
||||
|
.venue-content{ |
||||
|
position: relative; |
||||
|
} |
||||
|
|
||||
|
.crud-opts{ |
||||
|
position: absolute; |
||||
|
right: 20px; |
||||
|
top: 10px; |
||||
|
} |
||||
|
.venue-left{ |
||||
|
flex: 1; |
||||
|
margin-right: 0 !important; |
||||
|
.venue-preview{ |
||||
|
height: 633px !important; |
||||
|
} |
||||
|
} |
||||
|
.venue-right{ |
||||
|
display: flex; |
||||
|
flex-direction: column; |
||||
|
width: 400px; |
||||
|
padding: 50px 10px 20px 10px !important; |
||||
|
.lib-right-item{ |
||||
|
position: relative; |
||||
|
padding-bottom: 10px; |
||||
|
margin-bottom: 10px; |
||||
|
border: 1px solid #E8F2FF; |
||||
|
border-radius: 4px; |
||||
|
h4{ |
||||
|
padding: 6px 10px; |
||||
|
background-color: #E8F2FF; |
||||
|
color: #000; |
||||
|
line-height: 30px; |
||||
|
border-bottom: 1px solid #edeff3; |
||||
|
} |
||||
|
.refresh-date{ |
||||
|
position: absolute; |
||||
|
right: 14px; |
||||
|
top: 10px; |
||||
|
font-size: 12px; |
||||
|
line-height: 30px; |
||||
|
} |
||||
|
} |
||||
|
} |
||||
|
|
||||
|
.data-right-list { |
||||
|
padding-top: 10px; |
||||
|
li{ |
||||
|
display: flex; |
||||
|
justify-content: flex-start; |
||||
|
align-items: center; |
||||
|
line-height: 36px; |
||||
|
|
||||
|
p{ |
||||
|
width: 80px; |
||||
|
font-weight: bold; |
||||
|
text-align: right; |
||||
|
} |
||||
|
span{ |
||||
|
width: 140px; |
||||
|
display: block; |
||||
|
text-align: right; |
||||
|
i{ |
||||
|
font-style: normal; |
||||
|
font-weight: bold; |
||||
|
padding: 0 10px; |
||||
|
color: #0348f3; |
||||
|
} |
||||
|
&.percentage{ |
||||
|
width: auto; |
||||
|
} |
||||
|
} |
||||
|
} |
||||
|
} |
||||
|
.swiper-title{ |
||||
|
::v-deep .swiper-wrapper{ |
||||
|
margin: 10px 0; |
||||
|
border-bottom: 1px solid #EDEFF3; |
||||
|
} |
||||
|
} |
||||
|
.swiper-slide-title { |
||||
|
width: auto !important; |
||||
|
margin-right: 20px; |
||||
|
cursor: pointer; |
||||
|
.tab-name { |
||||
|
padding: 10px; |
||||
|
&.active { |
||||
|
color: #0348F3; |
||||
|
border-bottom: 3px solid #0348F3; |
||||
|
} |
||||
|
} |
||||
|
} |
||||
|
|
||||
|
.swiper-content{ |
||||
|
height: 610px; |
||||
|
} |
||||
|
.tag-info{ |
||||
|
position: absolute; |
||||
|
right: 20px; |
||||
|
top: 34px; |
||||
|
display: flex; |
||||
|
justify-content: flex-start; |
||||
|
padding-left: 100px; |
||||
|
p{ |
||||
|
margin-left: 20px; |
||||
|
margin-top: -4px; |
||||
|
font-size: 14px; |
||||
|
} |
||||
|
} |
||||
|
.cabinet-row .cabinet-cell{ |
||||
|
background: url('~@/assets/images/shelf02.png') repeat-x left top; |
||||
|
background-size: 100% 100%; |
||||
|
border: none; |
||||
|
overflow: inherit; |
||||
|
cursor: pointer; |
||||
|
&::before{ |
||||
|
content: ""; |
||||
|
position: absolute; |
||||
|
left: 0; |
||||
|
top: 0; |
||||
|
width: 6px; |
||||
|
height: 68px; |
||||
|
background: url('~@/assets/images/shelf01.png') no-repeat left top; |
||||
|
background-size: 100% 100%; |
||||
|
} |
||||
|
&::after{ |
||||
|
content: ""; |
||||
|
position: absolute; |
||||
|
right: -4px; |
||||
|
top: 0; |
||||
|
width: 6px; |
||||
|
height: 68px; |
||||
|
background: url('~@/assets/images/shelf01.png') no-repeat left top; |
||||
|
background-size: 100% 100%; |
||||
|
} |
||||
|
span.cell-name{ |
||||
|
position: initial !important; |
||||
|
transform: none; |
||||
|
line-height: 68px; |
||||
|
} |
||||
|
} |
||||
|
::v-deep .cabinet-row .cabinet-cell span.el-popover__reference-wrapper{ |
||||
|
position: absolute !important; |
||||
|
left: 50% !important; |
||||
|
top: 20px !important; |
||||
|
transform: none; |
||||
|
width: 300px; |
||||
|
height: 210px; |
||||
|
background:rgba(0,0,0,.8); |
||||
|
color: #fff; |
||||
|
border-radius: 6px; |
||||
|
z-index: 99999999; |
||||
|
|
||||
|
.popover-content{ |
||||
|
.tooltip-top{ |
||||
|
display: flex; |
||||
|
justify-content: space-between; |
||||
|
align-items: center; |
||||
|
height: 40px; |
||||
|
line-height: 40px; |
||||
|
padding: 0 10px; |
||||
|
border-bottom: 1px solid #fff; |
||||
|
} |
||||
|
.tooltip-top i{ |
||||
|
font-style: normal; |
||||
|
font-size: 12px; |
||||
|
} |
||||
|
ul{ |
||||
|
padding: 10px; |
||||
|
} |
||||
|
ul li{ |
||||
|
display: flex; |
||||
|
justify-content: flex-start; |
||||
|
align-items: center; |
||||
|
line-height: 36px; |
||||
|
font-style: normal; |
||||
|
} |
||||
|
|
||||
|
ul li p{ |
||||
|
width: 80px; |
||||
|
font-weight: bold; |
||||
|
text-align: right; |
||||
|
} |
||||
|
ul li em{ |
||||
|
width: 100px; |
||||
|
display: block; |
||||
|
text-align: right; |
||||
|
font-style: normal; |
||||
|
} |
||||
|
ul li i{ |
||||
|
font-style: normal; |
||||
|
font-weight: bold; |
||||
|
padding: 0 10px; |
||||
|
color: #0348f3; |
||||
|
} |
||||
|
ul li em.percentage{ |
||||
|
width: auto; |
||||
|
} |
||||
|
} |
||||
|
} |
||||
|
</style> |
||||
@ -1,16 +1,159 @@ |
|||||
<template> |
<template> |
||||
<div class="app-container"> |
|
||||
上架/下架日志 |
|
||||
|
<div class="app-container row-container"> |
||||
|
<div class="head-container"> |
||||
|
<div class="head-search"> |
||||
|
<!-- 搜索 --> |
||||
|
<el-select v-model="query.type" clearable size="small" placeholder="类型" class="filter-item" style="width: 120px" @change="crud.toQuery"> |
||||
|
<i slot="prefix" class="iconfont icon-zhuangtai" /> |
||||
|
<el-option v-for="item in typeOptions" :key="item.key" :label="item.display_name" :value="item.key" /> |
||||
|
</el-select> |
||||
|
<el-select v-model="query.other" clearable size="small" placeholder="方式" class="filter-item" style="width: 120px" @change="crud.toQuery"> |
||||
|
<i slot="prefix" class="iconfont icon-zhuangtai" /> |
||||
|
<el-option v-for="item in otherOptions" :key="item.key" :label="item.display_name" :value="item.key" /> |
||||
|
</el-select> |
||||
|
<el-input v-model="query.search" clearable size="small" placeholder="输入关键字搜索" prefix-icon="el-icon-search" style="width: 220px;" class="filter-item" @clear="crud.toQuery" @keyup.enter.native="crud.toQuery" /> |
||||
|
<rrOperation /> |
||||
|
</div> |
||||
|
<crudOperation :permission="permission"> |
||||
|
<template v-slot:right> |
||||
|
<el-button :loading="crud.downloadLoading" size="mini" @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" |
||||
|
class="archives-table" |
||||
|
:data="crud.data" |
||||
|
style="width: 100%;" |
||||
|
height="590" |
||||
|
@selection-change="crud.selectionChangeHandler" |
||||
|
@row-click="clickRowHandler" |
||||
|
@row-dblclick="handleDbClick" |
||||
|
> |
||||
|
<el-table-column prop="regionName" label="类型" /> |
||||
|
<el-table-column prop="regionCode" label="方式" /> |
||||
|
<el-table-column prop="floorName" label="题名" /> |
||||
|
<el-table-column prop="booksheflCount" label="索书号" /> |
||||
|
<el-table-column prop="booksheflCount" label="条码" /> |
||||
|
<el-table-column prop="booksheflCount" label="目标层位" /> |
||||
|
<el-table-column prop="booksheflCount" label="盘点单号" /> |
||||
|
<el-table-column prop="booksheflCount" label="操作者" /> |
||||
|
<el-table-column prop="createTime" label="操作时间"> |
||||
|
<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> |
</div> |
||||
</template> |
</template> |
||||
|
|
||||
<script> |
<script> |
||||
|
import crudRegion from '@/api/area/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 { mapGetters } from 'vuex' |
||||
|
// import { exportFile } from '@/utils/index' |
||||
|
// import qs from 'qs' |
||||
|
|
||||
|
const defaultForm = { id: null, taskType: null, taskName: null, location: null, number: null, remark: null } |
||||
export default { |
export default { |
||||
name: 'UpDownLog', |
name: 'UpDownLog', |
||||
|
components: { crudOperation, rrOperation, pagination }, |
||||
|
cruds() { |
||||
|
return CRUD({ title: '上架/下架日志', url: 'api/libraryRegion/initLibraryRegionList', crudMethod: { ...crudRegion }, sort: [], optShow: { |
||||
|
add: false, |
||||
|
edit: false, |
||||
|
del: false, |
||||
|
download: false, |
||||
|
group: false, |
||||
|
reset: false |
||||
|
}}) |
||||
|
}, |
||||
|
mixins: [presenter(), header(), form(defaultForm), crud()], |
||||
data() { |
data() { |
||||
return { |
return { |
||||
|
otherOptions: [ |
||||
|
{ key: '1', display_name: '自动' }, |
||||
|
{ key: '2', display_name: '手动' } |
||||
|
], |
||||
|
typeOptions: [ |
||||
|
{ key: '1', display_name: '上架' }, |
||||
|
{ key: '2', display_name: '下架' } |
||||
|
], |
||||
|
permission: { |
||||
|
add: ['admin', 'checkLog:add'], |
||||
|
edit: ['admin', 'checkLog:edit'], |
||||
|
del: ['admin', 'checkLog:del'] |
||||
|
} |
||||
|
} |
||||
|
}, |
||||
|
computed: { |
||||
|
...mapGetters([ |
||||
|
'user', |
||||
|
'baseApi' |
||||
|
]) |
||||
|
}, |
||||
|
methods: { |
||||
|
[CRUD.HOOK.beforeRefresh]() { |
||||
|
}, |
||||
|
[CRUD.HOOK.afterRefresh](crud) { |
||||
|
}, |
||||
|
// 新增前将多选的值设置为空 |
||||
|
[CRUD.HOOK.beforeToAdd]() { |
||||
|
}, // 初始化编辑时候的角色与岗位 |
||||
|
[CRUD.HOOK.beforeToEdit](crud, form) { |
||||
|
}, |
||||
|
[CRUD.HOOK.beforeValidateCU](crud, form) { |
||||
|
}, |
||||
|
// 提交前做的操作 |
||||
|
[CRUD.HOOK.afterValidateCU](crud) { |
||||
|
return false |
||||
|
}, |
||||
|
clickRowHandler(row) { |
||||
|
this.$refs.table.clearSelection() |
||||
|
this.$refs.table.toggleRowSelection(row) |
||||
|
}, |
||||
|
doExport(data) { |
||||
|
console.log(data) |
||||
|
this.crud.downloadLoading = true |
||||
|
this.$confirm('此操作将导出所选数据' + '<span>你是否还要继续？</span>', '提示', { |
||||
|
confirmButtonText: '继续', |
||||
|
cancelButtonText: '取消', |
||||
|
type: 'warning', |
||||
|
dangerouslyUseHTMLString: true |
||||
|
}).then(() => { |
||||
|
const ids = [] |
||||
|
data.forEach(val => { |
||||
|
ids.push(val.deptsId) |
||||
|
}) |
||||
|
const params = { |
||||
|
'deptsIds': ids |
||||
|
} |
||||
|
console.log(params) |
||||
|
// exportFile(this.baseApi + '/api/depts/download?' + qs.stringify(params, { indices: false })) |
||||
|
// this.crud.downloadLoading = false |
||||
|
}).catch(() => { |
||||
|
}) |
||||
|
}, |
||||
|
handleCloseDialog() { |
||||
|
|
||||
} |
} |
||||
} |
} |
||||
} |
} |
||||
</script> |
</script> |
||||
<style scoped> |
|
||||
|
|
||||
|
<style lang="scss" scoped> |
||||
</style> |
</style> |
||||
Write
Preview
Loading…
Cancel
Save
Reference in new issue