|
|
|
|
@ -1,30 +1,94 @@ |
|
|
|
|
<template> |
|
|
|
|
<div> |
|
|
|
|
<div class="station-select"> |
|
|
|
|
<el-form ref="artFrom" :model="page" label-width="80px" label-position="right" class="tabform" |
|
|
|
|
@submit.native.prevent inline> |
|
|
|
|
<el-form-item label="输入搜索"> |
|
|
|
|
<el-input clearable v-model="page.params.siteName" placeholder="请输入油站名称" |
|
|
|
|
class="form_content_width"></el-input> |
|
|
|
|
</el-form-item> |
|
|
|
|
<el-form-item label="油站渠道"> |
|
|
|
|
<el-select v-model="page.params.channel" clearable style="width:100%"> |
|
|
|
|
<el-option |
|
|
|
|
v-for="(item,index) in channelList" |
|
|
|
|
:key="index" |
|
|
|
|
:label="item" |
|
|
|
|
:value="item" |
|
|
|
|
/> |
|
|
|
|
</el-select> |
|
|
|
|
</el-form-item> |
|
|
|
|
<el-form-item label="省市区"> |
|
|
|
|
<el-cascader |
|
|
|
|
v-model="page.params.addrCodes" |
|
|
|
|
placeholder="请选择省市区" |
|
|
|
|
style="width: 100%" |
|
|
|
|
:options="areaTree" |
|
|
|
|
:props="{checkStrictly: true,value:'id', label:'areaName', children:'childList'}" |
|
|
|
|
filterable |
|
|
|
|
clearable |
|
|
|
|
/> |
|
|
|
|
</el-form-item> |
|
|
|
|
<el-form-item label="油站品牌"> |
|
|
|
|
<el-select v-model="page.params.siteBrand" clearable style="width:100%"> |
|
|
|
|
<el-option label="中国石油" :value="1" /> |
|
|
|
|
<el-option label="中国石化" :value="2" /> |
|
|
|
|
<el-option label="壳牌" :value="3" /> |
|
|
|
|
<el-option label="民营" :value="4" /> |
|
|
|
|
<el-option label="中海油" :value="5" /> |
|
|
|
|
<el-option label="京博" :value="6" /> |
|
|
|
|
<el-option label="中化石油" :value="7" /> |
|
|
|
|
<el-option label="山东高速" :value="9" /> |
|
|
|
|
<el-option label="其他" :value="8" /> |
|
|
|
|
</el-select> |
|
|
|
|
</el-form-item> |
|
|
|
|
<el-form-item label="油站账户" prop="siteChannelAccountId"> |
|
|
|
|
<el-select v-model="page.params.siteChannelAccountId" remote filterable clearable placeholder="请选择油站账户" style="width: 100%"> |
|
|
|
|
<el-option v-for="item in restaurants" :key="item.id" :label="item.value + '-' + item.id" :value="item.id"> |
|
|
|
|
{{ item.value }}-<span style="color: #bbbbbb">{{ item.id }}</span> |
|
|
|
|
</el-option> |
|
|
|
|
</el-select> |
|
|
|
|
</el-form-item> |
|
|
|
|
<el-form-item> |
|
|
|
|
<el-button type="primary" @click="userSearchs">查询</el-button> |
|
|
|
|
<el-button type="primary" @click="submit">确定选择</el-button> |
|
|
|
|
</el-form-item> |
|
|
|
|
</el-form> |
|
|
|
|
<el-table max-height="500" @selection-change="selectionChange" v-loading="loading" ref="table" :data="tableList" |
|
|
|
|
:row-key="(row) => row.siteId" highlight-current-row empty-text="暂无数据" class="mt14"> |
|
|
|
|
<el-table-column type="selection" reserve-selection width="55"> |
|
|
|
|
</el-table-column> |
|
|
|
|
<el-table-column label="油站名称" prop="siteName"></el-table-column> |
|
|
|
|
<el-table-column label="渠道" prop="channel"></el-table-column> |
|
|
|
|
</el-table> |
|
|
|
|
<el-pagination @size-change="handleSizeChange" @current-change="handleCurrentChange" |
|
|
|
|
:current-page="page.currentPage" :page-sizes="[10, 15, 20, 30]" :page-size="page.pageSize" |
|
|
|
|
layout="total, sizes, prev, pager, next, jumper" :total="page.totalCount" /> |
|
|
|
|
<el-row :gutter="24" class="table-area"> |
|
|
|
|
<el-col :span="11"> |
|
|
|
|
<h3>待选择</h3> |
|
|
|
|
<el-table :height="tableHeight" v-loading="loading" ref="table" :data="tableList" |
|
|
|
|
:row-key="(row) => row.siteId" highlight-current-row empty-text="暂无数据" class="mt14"> |
|
|
|
|
<el-table-column type="selection" reserve-selection width="55"> |
|
|
|
|
</el-table-column> |
|
|
|
|
<el-table-column label="油站名称" prop="siteName" width="200"></el-table-column> |
|
|
|
|
<el-table-column align="center" label="渠道" prop="channel" width="120"></el-table-column> |
|
|
|
|
<el-table-column header-align="center" label="地址" prop="address"></el-table-column> |
|
|
|
|
</el-table> |
|
|
|
|
<el-pagination @size-change="handleSizeChange" @current-change="handleCurrentChange" |
|
|
|
|
:current-page="page.currentPage" :page-sizes="[10, 15, 20, 30]" :page-size="page.pageSize" |
|
|
|
|
layout="total, sizes, prev, pager, next, jumper" :total="page.totalCount" /> |
|
|
|
|
</el-col> |
|
|
|
|
<el-col :span="2" class="transfer-button"> |
|
|
|
|
<el-button type="primary" @click="delSite" class="el-icon-back"></el-button> |
|
|
|
|
<el-button type="primary" @click="addSite" class="el-icon-right"></el-button> |
|
|
|
|
</el-col> |
|
|
|
|
<el-col :span="11"> |
|
|
|
|
<h3>已选择</h3> |
|
|
|
|
<el-table :height="tableHeight" v-loading="checkedLoading" ref="checkedTable" :data="checkedSites" |
|
|
|
|
:row-key="(row) => row.siteId" highlight-current-row empty-text="暂无数据" class="mt14"> |
|
|
|
|
<el-table-column type="selection" reserve-selection width="55"> |
|
|
|
|
</el-table-column> |
|
|
|
|
<el-table-column label="油站名称" prop="siteName" width="200"></el-table-column> |
|
|
|
|
<el-table-column align="center" label="渠道" prop="channel" width="120"></el-table-column> |
|
|
|
|
<el-table-column header-align="center" label="地址" prop="address"></el-table-column> |
|
|
|
|
</el-table> |
|
|
|
|
</el-col> |
|
|
|
|
</el-row> |
|
|
|
|
<el-button type="primary" @click="submit" class="fr">确定</el-button> |
|
|
|
|
</div> |
|
|
|
|
</template> |
|
|
|
|
<script> |
|
|
|
|
import productApi from '@/api/product/productAttr.js' |
|
|
|
|
import dictAreaApi from '@/api/base/areaCode.js' |
|
|
|
|
import financeApi from '@/api/user/oilTerminalMarket.js' |
|
|
|
|
|
|
|
|
|
export default { |
|
|
|
|
name: 'OilStationSelection', |
|
|
|
|
@ -36,50 +100,87 @@ export default { |
|
|
|
|
selectAttrId: { |
|
|
|
|
type: String, |
|
|
|
|
default: () => '' |
|
|
|
|
} |
|
|
|
|
}, |
|
|
|
|
productId: { |
|
|
|
|
type: String, |
|
|
|
|
default: () => null |
|
|
|
|
}, |
|
|
|
|
}, |
|
|
|
|
data() { |
|
|
|
|
return { |
|
|
|
|
selectionList: [], |
|
|
|
|
tableHeight: document.documentElement.clientHeight - 550, |
|
|
|
|
// selectionList: [], |
|
|
|
|
loading: false, |
|
|
|
|
checkedLoading: false, |
|
|
|
|
tableList: [], |
|
|
|
|
areaTree: [], |
|
|
|
|
restaurants: [], |
|
|
|
|
page: { |
|
|
|
|
'currentPage': 1, |
|
|
|
|
'pageSize': 10, |
|
|
|
|
'totalCount': 0, |
|
|
|
|
'params': { |
|
|
|
|
'siteName': '' |
|
|
|
|
addrCodes:[] |
|
|
|
|
} |
|
|
|
|
} |
|
|
|
|
} |
|
|
|
|
}, |
|
|
|
|
watch: { |
|
|
|
|
OilStationSelectionList: { |
|
|
|
|
handler(n, o) { |
|
|
|
|
this.$refs.table.clearSelection() |
|
|
|
|
n.forEach(element => { |
|
|
|
|
this.$refs.table.toggleRowSelection(element) |
|
|
|
|
}) |
|
|
|
|
}, |
|
|
|
|
deep: true |
|
|
|
|
channelList:[], |
|
|
|
|
checkedSites:[], |
|
|
|
|
} |
|
|
|
|
}, |
|
|
|
|
// watch: { |
|
|
|
|
// OilStationSelectionList: { |
|
|
|
|
// handler(n, o) { |
|
|
|
|
// this.$refs.table.clearSelection() |
|
|
|
|
// n.forEach(element => { |
|
|
|
|
// this.$refs.table.toggleRowSelection(element) |
|
|
|
|
// }) |
|
|
|
|
// }, |
|
|
|
|
// deep: true |
|
|
|
|
// } |
|
|
|
|
// }, |
|
|
|
|
created() { |
|
|
|
|
this.init() |
|
|
|
|
this.getAreaData() |
|
|
|
|
this.getChannlList() |
|
|
|
|
this.getAccountNames() |
|
|
|
|
this.getCheckedSites() |
|
|
|
|
}, |
|
|
|
|
methods: { |
|
|
|
|
submit() { |
|
|
|
|
this.$emit('submit', this.getSelectionList()) |
|
|
|
|
}, |
|
|
|
|
getSelectionList() { |
|
|
|
|
return this.selectionList |
|
|
|
|
}, |
|
|
|
|
selectionChange(e) { |
|
|
|
|
this.selectionList = e |
|
|
|
|
return this.checkedSites |
|
|
|
|
}, |
|
|
|
|
userSearchs() { |
|
|
|
|
this.getByPage() |
|
|
|
|
}, |
|
|
|
|
addSite(){ |
|
|
|
|
console.log(this.$refs.table.selection) |
|
|
|
|
let arr = [...this.$refs.table.selection] |
|
|
|
|
let arrSiteName = [] |
|
|
|
|
arr.forEach(v=>{ |
|
|
|
|
if (this.checkedSites.some(f=>f.siteId===v.siteId)){ |
|
|
|
|
arrSiteName.unshift(v.siteName) |
|
|
|
|
}else { |
|
|
|
|
this.checkedSites.push(v) |
|
|
|
|
} |
|
|
|
|
}) |
|
|
|
|
if (arrSiteName&&arrSiteName.length>0){ |
|
|
|
|
this.$message.warning('部分站点出现重复，已自动为您过滤：【'+arrSiteName.join('、')+'】') |
|
|
|
|
} |
|
|
|
|
this.$refs.table.clearSelection() |
|
|
|
|
}, |
|
|
|
|
delSite(){ |
|
|
|
|
console.log(this.$refs.checkedTable.selection) |
|
|
|
|
// 获取当前选中的行 |
|
|
|
|
const selectedRows = this.$refs.checkedTable.selection; |
|
|
|
|
// 使用filter方法创建一个新数组，不包含已删除的元素 |
|
|
|
|
this.checkedSites = this.checkedSites.filter(site => { |
|
|
|
|
return !selectedRows.some(row => row.siteId === site.siteId); |
|
|
|
|
}); |
|
|
|
|
this.$refs.checkedTable.clearSelection() |
|
|
|
|
}, |
|
|
|
|
isStrictPromise(value) { |
|
|
|
|
return !!value |
|
|
|
|
&& typeof value === 'object' |
|
|
|
|
@ -95,7 +196,30 @@ export default { |
|
|
|
|
} |
|
|
|
|
|
|
|
|
|
}, |
|
|
|
|
getAreaData(){ |
|
|
|
|
dictAreaApi.getTree().then(res => { |
|
|
|
|
this.areaTree = res.data |
|
|
|
|
}) |
|
|
|
|
}, |
|
|
|
|
getByPage() { |
|
|
|
|
if (this.page.params.addrCodes&&this.page.params.addrCodes.length>0){ |
|
|
|
|
this.page.params.provinceCode = this.page.params.addrCodes[0] |
|
|
|
|
if (this.page.params.addrCodes.length>1){ |
|
|
|
|
this.page.params.areaCode = this.page.params.addrCodes[1] |
|
|
|
|
if (this.page.params.addrCodes.length>2){ |
|
|
|
|
this.page.params.cityCode = this.page.params.addrCodes[2] |
|
|
|
|
}else { |
|
|
|
|
this.page.params.cityCode = null |
|
|
|
|
} |
|
|
|
|
}else { |
|
|
|
|
this.page.params.areaCode = null |
|
|
|
|
this.page.params.cityCode = null |
|
|
|
|
} |
|
|
|
|
}else { |
|
|
|
|
this.page.params.provinceCode = null |
|
|
|
|
this.page.params.areaCode = null |
|
|
|
|
this.page.params.cityCode = null |
|
|
|
|
} |
|
|
|
|
this.loadingFn(productApi.getAllSites(this.page).then(res => { |
|
|
|
|
if (res.code === 20000) { |
|
|
|
|
this.tableList = res.data.list |
|
|
|
|
@ -115,6 +239,15 @@ export default { |
|
|
|
|
this.page.pageSize = val |
|
|
|
|
this.getByPage() |
|
|
|
|
}, |
|
|
|
|
// 获取账户名称键值对 |
|
|
|
|
getAccountNames() { |
|
|
|
|
financeApi.getChannelAccountMaps().then(res => { |
|
|
|
|
if (res.code === 20000) { |
|
|
|
|
const arr = [...res.data] |
|
|
|
|
this.restaurants = arr.filter(f => f.accountState === '1') |
|
|
|
|
} |
|
|
|
|
}) |
|
|
|
|
}, |
|
|
|
|
del(e) { |
|
|
|
|
productApi.delete(e).then(res => { |
|
|
|
|
if (res.code == 20000) { |
|
|
|
|
@ -123,6 +256,27 @@ export default { |
|
|
|
|
} |
|
|
|
|
}) |
|
|
|
|
}, |
|
|
|
|
getChannlList(){ |
|
|
|
|
productApi.getChannels().then(res=>{ |
|
|
|
|
if (res.code === 20000) { |
|
|
|
|
this.channelList = res.data |
|
|
|
|
} |
|
|
|
|
}) |
|
|
|
|
}, |
|
|
|
|
getCheckedSites(){ |
|
|
|
|
if (this.productId){ |
|
|
|
|
this.checkedLoading = true |
|
|
|
|
productApi.getCheckedSites(this.productId).then(res=>{ |
|
|
|
|
if (res.code === 20000) { |
|
|
|
|
let checkedData = res.data |
|
|
|
|
this.checkedSites = checkedData.filter(f => { |
|
|
|
|
return this.OilStationSelectionList.find(i => i.siteId === f.siteId); |
|
|
|
|
}); |
|
|
|
|
} |
|
|
|
|
this.checkedLoading = false |
|
|
|
|
}) |
|
|
|
|
} |
|
|
|
|
}, |
|
|
|
|
edit(row) { |
|
|
|
|
let data = Object.assign({}, row, { |
|
|
|
|
name: this.selectAttrId.split('/')[1] || '', |
|
|
|
|
@ -148,4 +302,18 @@ export default { |
|
|
|
|
} |
|
|
|
|
</script> |
|
|
|
|
|
|
|
|
|
<style></style> |
|
|
|
|
<style lang="less" scoped> |
|
|
|
|
.station-select{ |
|
|
|
|
height: calc(100vh - 300px); |
|
|
|
|
.table-area{ |
|
|
|
|
.transfer-button{ |
|
|
|
|
display: grid; |
|
|
|
|
align-items: center; |
|
|
|
|
grid-template-columns: auto auto; |
|
|
|
|
button{ |
|
|
|
|
width: 50px; |
|
|
|
|
} |
|
|
|
|
} |
|
|
|
|
} |
|
|
|
|
} |
|
|
|
|
</style> |
|
|
|
|
|
mrsun
2 years ago