<template>
|
<div class="rightContent">
|
<div class="top">
|
<SearchCommonView :show-add="false" :placeholder="'请输入业务类型'"
|
:amount-view="false" :showSreen="false" :searchTaskMap="SelectClick"
|
:screenArray="screenArray"
|
@switchKeywords="switchKeywordsList"
|
@delSelectClick="delSelectClick" @searchClick="getList" />
|
</div>
|
<div class="content">
|
<div class="list-view">
|
<div
|
class="overview-box"
|
v-for="item in tableList"
|
:key="item.id"
|
:class="{
|
overview_active: item.baseOperationType === 1,
|
overview_done: item.baseOperationType === 2,
|
overview_todo: item.baseOperationType === 3,
|
}"
|
@click="labelClick(item)"
|
>
|
<div class="top">
|
<div class="label">
|
<span style="cursor: pointer">{{ item.name }}</span>
|
</div>
|
<el-dropdown class="set" placement="bottom" trigger="click" @command="handleCommand">
|
<div @click.stop="moreClick()">...</div>
|
<el-dropdown-menu slot="dropdown">
|
<el-dropdown-item :command="{ command: 0, item }">全部</el-dropdown-item>
|
<el-dropdown-item :command="{ command: 3, item }">就绪</el-dropdown-item>
|
<el-dropdown-item :command="{ command: 4, item }">完成</el-dropdown-item>
|
</el-dropdown-menu>
|
</el-dropdown>
|
</div>
|
<div class="bottom">
|
<div class="left">
|
<div class="left_view" @click.stop="statusClick(item, 3)">
|
<span>{{ item.readyCount }}</span>
|
<span style="margin-left: 5px">就绪</span>
|
</div>
|
</div>
|
<div class="right">
|
<div class="right_status" @click.stop="statusClick(item, 4)">
|
<span style="cursor: pointer">{{ item.finishCount + ' 完成' }}</span>
|
</div>
|
<!-- <div class="right_status" style="margin-top: 5px">
|
<span style="cursor: pointer">4 延期</span>
|
</div> -->
|
</div>
|
<div class="right">
|
<div class="right_status" @click.stop="statusClick(item, 5)">
|
<span style="cursor: pointer">{{ item.cancelCount + ' 已取消' }}</span>
|
</div>
|
</div>
|
</div>
|
</div>
|
</div>
|
<div class="btn-pager">
|
<PagerView class="page" :page-sizes="pageSizes" :pager-options="pagerOptions" v-on="pagerEvents" />
|
</div>
|
</div>
|
</div>
|
</template>
|
|
<script>
|
import pageMixin from '@/components/makepager/pager/mixin/pageMixin'
|
import { getOperationType } from '@/api/overview/overview'
|
import { getWarehouseList } from '@/api/warehouseManage/warehouse.js'
|
import Cookies from 'js-cookie'
|
export default {
|
name: 'OverView',
|
mixins: [pageMixin],
|
props: {},
|
components: {},
|
computed: {},
|
data() {
|
return {
|
tableList: [],
|
editConfig: {
|
visible: false,
|
title: '新建',
|
infomation: {},
|
keyword: '',
|
},
|
screenArray: [],
|
SelectClick: [],
|
pageSizes: [30, 45],
|
}
|
},
|
created() {
|
this.pagerOptions.pageSize = 30
|
this.queryWareHouse()
|
const username = Cookies.get('username')
|
this.SelectClick = JSON.parse(localStorage.getItem(username) || '[]')
|
this.getData()
|
},
|
methods: {
|
getList(val) {
|
console.log(val)
|
this.keyword = val
|
this.getData()
|
},
|
labelClick(item, status) {
|
console.log(item)
|
this.$router.push({
|
name: 'overviewList',
|
query: { name: item.name, warehouseId:item.warehouseId,workType: item.baseOperationType + '', id: item.id + '', status: status, code: item.warehouse.code },
|
})
|
},
|
async getData() {
|
//筛选id数组
|
let $arr = [];
|
this.SelectClick.forEach((e) => {
|
$arr.push(e.id)
|
});
|
await getOperationType({
|
keyword: this.keyword,
|
page: this.pagerOptions.currPage,
|
pageSize: this.pagerOptions.pageSize,
|
warehouseIds:$arr.join(',')
|
}).then((res) => {
|
if (res.code === 200) {
|
const list = res.data.map((item) => {
|
return {
|
...item,
|
}
|
})
|
this.tableList = list || []
|
this.pagerOptions.totalCount = res.total
|
}
|
})
|
},
|
async queryWareHouse() {
|
const { code, data } = await getWarehouseList({ page: 0, pageSize: 0, keyword: '' })
|
this.screenArray = []
|
if (code === 200) {
|
data.forEach((e) => {
|
this.screenArray.push({
|
id: e.id,
|
title: e.name,
|
})
|
})
|
}
|
},
|
handleCommand(val) {
|
if (val.command === '全部') {
|
this.labelClick(val.item, '')
|
} else {
|
this.labelClick(val.item, val.command)
|
}
|
},
|
// 更多
|
moreClick() {},
|
// 状态
|
statusClick(item, status) {
|
this.labelClick(item, status)
|
},
|
//筛选
|
switchKeywordsList(item) {
|
this.SelectClick = item
|
const username = Cookies.get('username')
|
localStorage.setItem(username, JSON.stringify(item))
|
this.getData()
|
},
|
//删除筛选
|
delSelectClick(item) {
|
this.SelectClick.forEach((e, i) => {
|
if (e.id == item.id) {
|
this.SelectClick.splice(i, 1)
|
}
|
})
|
const username = Cookies.get('username')
|
if (this.SelectClick.length > 0) {
|
localStorage.setItem(username, JSON.stringify(this.SelectClick))
|
} else {
|
localStorage.removeItem(username)
|
}
|
this.getData()
|
},
|
},
|
}
|
</script>
|
|
<!-- Add "scoped" attribute to limit CSS to this component only -->
|
<style lang="scss" scoped>
|
.content {
|
height: calc(100% - 112px);
|
background: #fff;
|
border-radius: 12px;
|
.list-view {
|
padding: 20px 0 0px 20px;
|
height: calc(100% - 70px);
|
overflow: auto;
|
display: flex;
|
flex-wrap: wrap;
|
justify-content: flex-start;
|
align-content: flex-start;
|
.overview-box {
|
min-width: 308px;
|
height: 140px;
|
margin-bottom: 10px;
|
margin-right: 20px;
|
border: 1px solid #dee2e6;
|
box-shadow: inset 0 0 2px #dee2e6;
|
-moz-box-shadow: inset 0 0 2px #dee2e6;
|
-webkit-box-shadow: inset 0 0 2px #dee2e6;
|
cursor: pointer;
|
.top {
|
height: 35px;
|
line-height: 35px;
|
display: flex;
|
.label {
|
margin-left: 20px;
|
}
|
.set {
|
margin-left: auto;
|
margin-right: 20px;
|
font-size: 20px;
|
// cursor: no-drop;
|
color: #000;
|
transform: rotate(-90deg);
|
-moz-transform: rotate(-90deg);
|
-webkit-transform: rotate(-90deg);
|
}
|
}
|
.bottom {
|
display: flex;
|
font-size: 13px;
|
margin-top: 30px;
|
.left {
|
width: 50%;
|
// background: #1d80e2;
|
.left_view {
|
margin-left: 20px;
|
height: 30px;
|
line-height: 30px;
|
padding: 0 5px;
|
width: 70px;
|
text-align: center;
|
color: #fff;
|
background: #081e44;
|
border-radius: 4px;
|
cursor: pointer;
|
}
|
}
|
.right {
|
width: 25%;
|
.right_status {
|
margin-top: 5px;
|
}
|
}
|
}
|
}
|
.overview_active {
|
border-left: 4px solid #1d80e2;
|
}
|
.overview_done {
|
border-left: 4px solid #1de27f;
|
}
|
.overview_todo {
|
border-left: 4px solid #e2441d;
|
}
|
}
|
}
|
|
.btn-pager {
|
margin-top: 0;
|
}
|
</style>
|
