You can not select more than 25 topics
Topics must start with a letter or number, can include dashes ('-') and can be up to 35 characters long.
630 lines
22 KiB
630 lines
22 KiB
<template> |
|
<div style="margin-left:30px"> |
|
<el-row> |
|
<el-form :model="oilSitePriceAdjustTask" label-width="100px" :size="$store.getters.size"> |
|
<el-row> |
|
|
|
<el-row> |
|
<el-col :span="14"> |
|
|
|
<el-row> |
|
<el-col :span="10"> |
|
<el-form-item label="任务名称" prop="adjustTaskName"> |
|
<el-input v-model="oilSitePriceAdjustTask.adjustTaskName" :disabled="true" clearable /> |
|
</el-form-item> |
|
</el-col> |
|
</el-row> |
|
<el-row> |
|
<el-col :span="10"> |
|
<el-form-item |
|
label="油站渠道" |
|
prop="siteChannel" |
|
> |
|
<el-select v-model="oilSitePriceAdjustTask.channelCode" disabled clearable @change="getSiteNum()"> |
|
<el-option |
|
v-for="item in siteChannelArray" |
|
:key="item.value" |
|
:label="item.label" |
|
:value="item.value" |
|
/> |
|
</el-select></el-form-item> |
|
</el-col> |
|
</el-row> |
|
|
|
<el-row> |
|
<el-col :span="10"> |
|
<el-form-item |
|
label="油品类型" |
|
prop="oilProductCode" |
|
> |
|
<el-select v-model="oilSitePriceAdjustTask.oilProductCode" disabled @change="getSiteNum()"> |
|
<el-option |
|
v-for="item in oilTypeArry" |
|
:key="item.value" |
|
:label="item.label" |
|
:value="item.value" |
|
/> |
|
</el-select> |
|
</el-form-item> |
|
</el-col> |
|
</el-row> |
|
|
|
<el-row> |
|
<el-col /> |
|
</el-row> |
|
|
|
</el-col> |
|
|
|
<el-col :span="10">B</el-col> |
|
</el-row> |
|
<el-row> |
|
<div> |
|
<div slot="table"> |
|
<!--这里放表格和分页--> |
|
<!-- 列表开始 --> |
|
<el-table |
|
:max-height="tableHeight" |
|
:data="dataPage.list" |
|
fit |
|
style="width: 100%" |
|
:size="$store.getters.size" |
|
@row-click="openSiteInfo" |
|
@sort-change="sortHandler" |
|
@selection-change="handleSelectionChange" |
|
> |
|
<!-- <el-table-column |
|
type="selection" |
|
width="75" |
|
/> --> |
|
<!-- <el-table-column |
|
label="序号" |
|
type="index" |
|
:index="indexMethod" |
|
/> --> |
|
<template v-for="(item, index) in tableColumns" @change="$forceUpdate()"> |
|
<el-table-column |
|
v-if="item.show" |
|
:key="index" |
|
:fixed="item.fixed" |
|
:align="item.align" |
|
:show-overflow-tooltip="true" |
|
:min-width="item.minWidth" |
|
:width="item.width" |
|
:prop="item.prop" |
|
:sortable="item.sortable" |
|
:label="item.label" |
|
:formatter="item.render" |
|
@change="$forceUpdate()" |
|
/> |
|
</template> |
|
<!-- fixed="right" --> |
|
|
|
</el-table> |
|
</div> |
|
</div> |
|
</el-row> |
|
<hr style="margin-top:40px"> |
|
<label> 油站详细信息</label> |
|
<div v-show="querySiteInfo" style="border-color:#FAFAFA;border-style:solid;margin-top:15px"> |
|
|
|
<el-row style="margin-top:25px"> |
|
<el-col :span="7" style="margin-left:10px"> |
|
<label>油站名称:</label>{{ oilSite.siteName }} |
|
|
|
</el-col> |
|
<el-col :span="7"> |
|
<label>油站编号:</label>{{ oilSite.siteCode }} |
|
|
|
</el-col> |
|
<el-col :span="7"> |
|
<label>油站地址:</label>{{ oilSite.address }} |
|
|
|
</el-col> |
|
</el-row> |
|
<el-row style="margin-top:25px"> |
|
<el-col :span="7" style="margin-left:10px"> |
|
<label>渠 道:</label>{{ oilSite.siteChannelName }} |
|
|
|
</el-col> |
|
<el-col :span="7"> |
|
<label>油 品:</label>{{ oilSite.oilProductCode }} |
|
|
|
</el-col> |
|
<el-col :span="7" /> |
|
</el-row> |
|
<el-row style="margin-top:25px"> |
|
<el-col :span="7" style="margin-left:10px"> |
|
<label>联 系 人:</label>{{ oilSite.siteContacts }} |
|
|
|
</el-col> |
|
<el-col :span="7"> |
|
<label>联系电话:</label>{{ oilSite.siteContactPhone }} |
|
|
|
</el-col> |
|
<el-col :span="7" /> |
|
</el-row> |
|
</div> |
|
<hr style="margin-top:40px"> |
|
|
|
<div style="border-color:#FAFAFA;border-style:solid;margin-top:15px"> |
|
<el-row style="margin-top:25px"> |
|
|
|
<el-col> |
|
<el-form-item label="生效方式"> |
|
<el-radio-group style="width: 100%;display: flex;align-items: center;box-shadow: none !important;" v-model="effectiveMode" @change="dateChange"> |
|
<el-col> |
|
<el-radio label="0">立刻生效</el-radio> |
|
</el-col> |
|
<el-col> |
|
<el-radio label="1">预约时间 |
|
<el-date-picker |
|
v-model="subEntryTime" |
|
:disabled="effectiveMode === '0'" |
|
type="datetime" |
|
format="yyyy-MM-dd HH:mm:ss" |
|
value-format="yyyy-MM-dd HH:mm:ss" |
|
placeholder="选择日期时间" |
|
/></el-radio> |
|
</el-col> |
|
</el-radio-group> |
|
</el-form-item> |
|
</el-col> |
|
|
|
</el-row> |
|
|
|
</div> |
|
|
|
<el-col :span="24" style="text-align: center"> |
|
<el-button |
|
type="success" |
|
@click="submit" |
|
>审核通过</el-button> |
|
<el-button |
|
type="info" |
|
@click="submitLinShi" |
|
>审核不通过</el-button> |
|
<el-button |
|
type="warning" |
|
@click="cancel" |
|
>取消执行</el-button> |
|
<el-button @click="close">取消</el-button> |
|
|
|
</el-col> |
|
</el-row></el-form> |
|
</el-row> |
|
</div> |
|
</template> |
|
<script> |
|
import oilSitePriceAdjustTaskApi from '@/api/user/oilSitePriceAdjustTask' |
|
import oilSiteInfoApi from '@/api/user/oilSiteInfo' |
|
export default { |
|
props: { |
|
oilSitePriceAdjustTask: { |
|
type: Object, |
|
default() { |
|
|
|
} |
|
} |
|
}, |
|
data() { |
|
return { |
|
newenterprisePrice: '', |
|
newpersonalPrice: '', |
|
newsitePrice: '', |
|
newmarketPrice: '', |
|
newsettlementPrice: '', |
|
tableHeight: null, |
|
loading: false, |
|
channelIds: [], |
|
querySiteInfo: false, |
|
timeUse: false, |
|
newValue: [], |
|
oilSite: {}, |
|
effectiveMode: '0', |
|
subEntryTime: '', |
|
oilSiteChannelVo: {}, |
|
multipleSelection: [], // 选择表格数据集合 |
|
multipleSelectionChannel: [], // 选中列的渠道Id |
|
options: [ |
|
|
|
], |
|
siteChannelArray: [ |
|
{ value: 'XOIL', label: '星油' }, |
|
{ value: 'WJY', label: '万金油' }, |
|
{ value: 'LV', label: '老吕（找油网）' }, |
|
{ value: 'TY', label: '团油' }, |
|
{ value: 'YDJY', label: '一点加油（壳牌）' } |
|
|
|
], |
|
options11: [{ value: 'IMSITE', label: '综合' }, |
|
{ value: 'XOIL', label: '星油' }, |
|
{ value: 'WJY', label: '万金油' }, |
|
{ value: 'LV', label: '老吕（找油网）' }, |
|
{ value: 'TY', label: '团油' }, |
|
{ value: 'YDJY', label: '一点加油（壳牌）' } |
|
|
|
], |
|
|
|
oilTypeArry: [ |
|
{ value: '90#', label: '90#' }, |
|
{ value: '95#', label: '95#' } |
|
|
|
], |
|
value: [], |
|
gridNum: { |
|
row: { |
|
gutter: 2 |
|
}, |
|
cols: { |
|
xs: 24, |
|
sm: 24, |
|
md: 12, |
|
lg: 12, |
|
xl: 6 |
|
} |
|
}, |
|
dataPage: { // 分页显示page |
|
pageSize: 10, // 每页显示条数 |
|
currentPage: 1, // 默认页 |
|
params: { // 查询参数 |
|
}, |
|
sorted: {}, |
|
list: [] |
|
|
|
}, |
|
commitList: [], |
|
tableColumns: [ |
|
{ prop: 'siteName', label: '油站名称', show: true, render: (row, column, cell) => { |
|
return cell |
|
} }, |
|
{ prop: 'marketPrice', label: '发改委价格（元/L）', show: true, render: (row, column, cell) => { |
|
let className = '' |
|
if (row.marketPrice < row.newmarketPrice){ |
|
className = "el-icon-top font-red" |
|
}else if (row.marketPrice > row.newmarketPrice){ |
|
className = "el-icon-bottom font-green" |
|
} |
|
return <div> |
|
<div style='margin-left:10px'>{cell}</div> |
|
<el-row> |
|
<el-col> |
|
<el-input style='width:80px;height:40px;margin-left:-9px' disabled v-model={row.newmarketPrice} ></el-input> |
|
<span class="pl-5"> <i class={className}></i></span> |
|
</el-col> |
|
</el-row> |
|
|
|
</div> |
|
} }, |
|
{ prop: 'sitePrice', label: '油站价格（元/L）', show: true, render: (row, column, cell) => { |
|
let className = '' |
|
if (row.sitePrice < row.newsitePrice){ |
|
className = "el-icon-top font-red" |
|
}else if (row.sitePrice > row.newsitePrice){ |
|
className = "el-icon-bottom font-green" |
|
} |
|
return <div> |
|
<div style='margin-left:10px'>{cell}</div> |
|
<el-row> |
|
<el-col> |
|
<el-input style='width:80px;height:40px;margin-left:-9px' disabled v-model={row.newsitePrice} ></el-input> |
|
<span class="pl-5"> <i class={className}></i></span> |
|
</el-col> |
|
</el-row> |
|
|
|
</div> |
|
} }, |
|
{ prop: 'otherPrice', label: '三方渠道价格（元/L）', show: true, render: (row, column, cell) => { |
|
let className = '' |
|
if (row.otherPrice < row.newOtherPrice){ |
|
className = "el-icon-top font-red" |
|
}else if (row.otherPrice > row.newOtherPrice){ |
|
className = "el-icon-bottom font-green" |
|
} |
|
return <div> |
|
<div style='margin-left:10px'>{cell}</div> |
|
<el-row> |
|
<el-col> |
|
<el-input style='width:80px;height:40px;margin-left:-9px' disabled v-model={row.newOtherPrice} ></el-input> |
|
<span class="pl-5"> <i class={className}></i></span> |
|
</el-col> |
|
</el-row> |
|
</div> |
|
} }, |
|
{ prop: 'enterprisePrice', label: '企业价格（元/L）', show: true, render: (row, column, cell) => { |
|
let className = '' |
|
if (row.enterprisePrice < row.newenterprisePrice){ |
|
className = "el-icon-top font-red" |
|
}else if (row.enterprisePrice > row.newenterprisePrice){ |
|
className = "el-icon-bottom font-green" |
|
} |
|
return <div> |
|
<div style='margin-left:10px'>{cell}</div> |
|
<el-row> |
|
<el-col> |
|
<el-input style='width:80px;height:40px;margin-left:-9px' disabled v-model={row.newenterprisePrice} ></el-input> |
|
<span class="pl-5"> <i class={className}></i></span> |
|
</el-col> |
|
</el-row> |
|
|
|
</div> |
|
} }, |
|
|
|
{ prop: 'personalPrice', label: '个人价格（元/L）', show: true, render: (row, column, cell) => { |
|
let className = '' |
|
if (row.personalPrice < row.newpersonalPrice){ |
|
className = "el-icon-top font-red" |
|
}else if (row.personalPrice > row.newpersonalPrice){ |
|
className = "el-icon-bottom font-green" |
|
} |
|
return <div> |
|
<div style='margin-left:10px'>{cell}</div> |
|
<el-row> |
|
<el-col > |
|
<el-input style='width:80px;height:40px;margin-left:-10px' disabled v-model={row.newpersonalPrice} ></el-input> |
|
<span class="pl-5"> <i class={className}></i></span> |
|
</el-col> |
|
</el-row> |
|
</div> |
|
} }, |
|
{ prop: 'settlementPrice', label: '结算价格（元/L）', show: true, render: (row, column, cell) => { |
|
let className = '' |
|
if (row.settlementPrice < row.newsettlementPrice){ |
|
className = "el-icon-top font-red" |
|
}else if (row.settlementPrice > row.newsettlementPrice){ |
|
className = "el-icon-bottom font-green" |
|
} |
|
return <div> |
|
<div style='margin-left:10px'>{cell}</div> |
|
<el-row> |
|
<el-col> |
|
<el-input style='width:80px;height:40px;margin-left:-9px' disabled v-model={row.newsettlementPrice} ></el-input> |
|
<span class="pl-5"> <i class={className}></i></span> |
|
</el-col> |
|
</el-row> |
|
|
|
</div> |
|
} }, |
|
{ prop: 'floorPrice', label: '底价（元/L）', show: true, render: (row, column, cell) => { |
|
let className = '' |
|
if(!cell){ |
|
cell=0 |
|
} |
|
if (row.floorPrice < row.newfloorPrice){ |
|
className = "el-icon-top font-red" |
|
}else if (row.floorPrice > row.newfloorPrice){ |
|
className = "el-icon-bottom font-green" |
|
} |
|
return <div> |
|
<div style='margin-left:10px'>{cell}</div> |
|
<el-row> |
|
<el-col> |
|
<el-input style='width:80px;height:40px;margin-left:-9px' disabled v-model={row.newfloorPrice} ></el-input> |
|
<span class="pl-5"> <i class={className}></i></span> |
|
</el-col> |
|
</el-row> |
|
</div> |
|
} }, |
|
{ prop: 'floorRemark', label: '底价说明', show: true, render: (row, column, cell) => { |
|
let className = '' |
|
|
|
return <div> |
|
|
|
<el-row> |
|
<el-col> |
|
<el-input type="textarea" style='width:130px;height:60px;margin-left:-9px' disabled v-model={row.floorRemark} ></el-input> |
|
<span class="pl-5"> <i class={className}></i></span> |
|
</el-col> |
|
</el-row> |
|
</div> |
|
} }, |
|
|
|
|
|
|
|
|
|
|
|
], |
|
siteNumber: 0 |
|
} |
|
}, |
|
created() { |
|
this.channelIds = [] |
|
this.effectiveMode = this.oilSitePriceAdjustTask.effectiveMode + '' |
|
this.subEntryTime = this.oilSitePriceAdjustTask.subEntryTime |
|
this.dataPage.list = this.oilSitePriceAdjustTask.details |
|
for (let i = 0; i < this.dataPage.list.length; i++) { |
|
this.channelIds.push(this.dataPage.list[i].channelId) |
|
} |
|
|
|
this.oilSiteChannelVo.oilProductType = this.oilSitePriceAdjustTask.oilProductCode |
|
this.oilSiteChannelVo.channelCode = this.oilSitePriceAdjustTask.channelCode |
|
oilSitePriceAdjustTaskApi.getSiteByChannelAndOilCodeCount(this.oilSiteChannelVo).then(res => { |
|
if (res.data) { |
|
this.siteNumber = res.data.count |
|
} |
|
}) |
|
}, |
|
methods: { |
|
submit() { |
|
this.oilSitePriceAdjustTask.taskStatus = 1 |
|
this.verify(this.oilSitePriceAdjustTask) |
|
}, |
|
submitLinShi() { |
|
this.oilSitePriceAdjustTask.taskStatus = 2 |
|
this.verify(this.oilSitePriceAdjustTask) |
|
}, |
|
verify() { |
|
oilSitePriceAdjustTaskApi.verify(this.oilSitePriceAdjustTask).then(res => { |
|
this.$message.success(res.msg) |
|
this.$emit('closeDialog') |
|
this.$emit('getByPage') |
|
}) |
|
}, |
|
cancel() { |
|
oilSitePriceAdjustTaskApi.cancel(this.oilSitePriceAdjustTask.id).then(res => { |
|
this.$message.success(res.msg) |
|
this.$emit('closeDialog') |
|
this.$emit('getByPage') |
|
}) |
|
}, |
|
getSiteNum() { |
|
this.oilSiteChannelVo.oilProductType = this.oilSitePriceAdjustTask.oilProductCode |
|
this.oilSiteChannelVo.channelCode = this.oilSitePriceAdjustTask.channelCode |
|
if (this.oilSiteChannelVo.oilProductType && this.oilSiteChannelVo.channelCode) { |
|
oilSitePriceAdjustTaskApi.getSiteByChannelAndOilCodeCount(this.oilSiteChannelVo).then(res => { |
|
if (res.data) { |
|
this.siteNumber = res.data.count |
|
} |
|
}) |
|
} |
|
}, |
|
getChannelPrice() { |
|
this.oilSiteChannelVo.ids = this.channelIds |
|
this.oilSiteChannelVo.oilProductCode = this.oilSitePriceAdjustTask.oilProductCode |
|
|
|
this.querySiteInfo = false |
|
if (this.oilSiteChannelVo.ids.length < 1) { |
|
this.dataPage.list = [] |
|
this.querySiteInfo = false |
|
return |
|
} |
|
|
|
if (this.oilSiteChannelVo.oilProductType && this.oilSiteChannelVo.channelCode && |
|
(this.oilSiteChannelVo.ids && this.oilSiteChannelVo.ids.length > 0)) { |
|
oilSitePriceAdjustTaskApi.getChannelPriceByChannelIds(this.oilSiteChannelVo).then(res => { |
|
this.dataPage.list = res.data |
|
}) |
|
} |
|
}, |
|
sortHandler(column) { |
|
// 排序查询 |
|
const key = column.prop |
|
const value = column.order |
|
this.page.sorted = {} |
|
this.page.sorted[key] = value |
|
this.getByPage() |
|
}, |
|
handleSelectionChange(val) { // 选择表格数据 |
|
this.multipleSelectionChannel = [] |
|
this.multipleSelection = val |
|
for (let i = 0; i < this.multipleSelection.length; i++) { |
|
this.multipleSelectionChannel.push(this.multipleSelection[i].channelId) |
|
} |
|
}, |
|
indexMethod(index) { |
|
return (index + 1) * 1 |
|
}, |
|
openSiteInfo(row) { |
|
if (row) { |
|
oilSiteInfoApi.get(row.siteId).then(res => { |
|
this.oilSite = res.data |
|
this.oilSite.oilProductCode = row.oilProductCode |
|
this.oilSite.siteChannelName = this.channelName(this.oilSite.siteChannel) |
|
this.querySiteInfo = true |
|
}) |
|
} |
|
}, |
|
channelName(channelCode) { |
|
for (let u = 0; u < this.options11.length; u++) { |
|
if (this.options11[u].value === channelCode) { |
|
return this.options11[u].label |
|
} |
|
} |
|
}, |
|
removeItem(row) { |
|
this.querySiteInfo = false |
|
for (let u = 0; u < this.channelIds.length; u++) { |
|
if (this.channelIds[u] === row.channelId) { |
|
this.channelIds.splice(u, 1) |
|
u = u - 1 |
|
} |
|
} |
|
for (let u = 0; u < this.dataPage.list.length; u++) { |
|
if (row.channelId === this.dataPage.list[u].channelId) { |
|
this.dataPage.list.splice(u, 1) |
|
u = u - 1 |
|
} |
|
} |
|
this.querySiteInfo = false |
|
return |
|
}, |
|
reset(row) { |
|
row.siteName = row.siteName + ' ' |
|
row.newpersonalPrice = '' |
|
row.newenterprisePrice = '' |
|
row.newsitePrice = '' |
|
row.newmarketPrice = '' |
|
row.newsettlementPrice = '' |
|
}, |
|
remoteMethod(query) { |
|
if (query !== '') { |
|
this.options = [] |
|
this.loading = true |
|
this.oilSiteChannelVo.oilProductType = this.oilSitePriceAdjustTask.oilProductCode |
|
this.oilSiteChannelVo.channelCode = this.oilSitePriceAdjustTask.channelCode |
|
this.oilSiteChannelVo.siteName = query |
|
if (this.oilSiteChannelVo.oilProductType && this.oilSiteChannelVo.channelCode) { |
|
oilSitePriceAdjustTaskApi.getSiteByChannelAndOilCode(this.oilSiteChannelVo).then(res => { |
|
this.options = res.data |
|
}) |
|
} |
|
} else { |
|
this.options = [] |
|
} |
|
this.loading = false |
|
}, |
|
addChanmelItem() { |
|
if (!this.oilSitePriceAdjustTask.channelId) { |
|
return |
|
} |
|
for (let i = 0; i < this.channelIds.length; i++) { |
|
if (this.channelIds[i] === this.oilSitePriceAdjustTask.channelId) { |
|
this.$message.warning('该油站已添加至调价列表') |
|
return |
|
} |
|
} |
|
this.channelIds.push(this.oilSitePriceAdjustTask.channelId) |
|
// this.getChannelPrice() |
|
this.oilSiteChannelVo.ids = [] |
|
this.oilSiteChannelVo.ids[0] = this.oilSitePriceAdjustTask.channelId |
|
oilSitePriceAdjustTaskApi.getChannelPriceByChannelIds(this.oilSiteChannelVo).then(res => { |
|
var obj = res.data[0] |
|
this.dataPage.list.push(obj) |
|
}) |
|
}, |
|
checkItem() { |
|
if (this.oilSitePriceAdjustTask.effectiveMode === '1') { |
|
this.timeUse = false |
|
} else { |
|
this.oilSitePriceAdjustTask.subEntryTime = '' |
|
this.timeUse = true |
|
} |
|
}, |
|
batchModify() { |
|
if (this.multipleSelectionChannel.length < 1) { |
|
this.$message.warning('未选择调价渠道') |
|
return |
|
} |
|
for (let j = 0; j < this.multipleSelectionChannel.length; j++) { |
|
for (let i = 0; i < this.dataPage.list.length; i++) { |
|
if (this.multipleSelectionChannel[j] === this.dataPage.list[i].channelId) { |
|
this.$set(this.dataPage.list[i], 'newpersonalPrice', this.newpersonalPrice) |
|
this.$set(this.dataPage.list[i], 'newenterprisePrice', this.newenterprisePrice) |
|
this.$set(this.dataPage.list[i], 'newsitePrice', this.newsitePrice) |
|
this.$set(this.dataPage.list[i], 'newmarketPrice', this.newmarketPrice) |
|
this.$set(this.dataPage.list[i], 'newsettlementPrice', this.newsettlementPrice) |
|
} |
|
} |
|
} |
|
}, |
|
dateChange() { |
|
if (this.effectiveMode === '0') { |
|
this.subEntryTime = '' |
|
} |
|
}, |
|
|
|
close() { |
|
this.$emit('closeDialog') |
|
} |
|
} |
|
} |
|
</script>
|
|
|