| ¶Ô±ÈÐÂÎļþ |
| | |
| | | <template> |
| | | <GlobalWindow |
| | | :title="title" |
| | | :visible.sync="visible" |
| | | width="60%" |
| | | > |
| | | <el-tabs v-model="activeTab"> |
| | | <el-tab-pane label="å°±å°å¯å" name="local"> |
| | | <div class="price-tip">æ ¹æ®è¡æå°ºå¯¸ä»¥ååæ¾å¤©æ°æ¶è´¹ï¼ä¸è¶³ä¸å¤©æä¸å¤©è®¡ä»·ï¼</div> |
| | | <div class="price-items"> |
| | | <div class="price-item" v-for="(item, index) in jiudiTableData" :key="index"> |
| | | <span class="price-label">å
¶ä¸{{item.categoryName}}æ¯å¤©æ¶è´¹</span> |
| | | <el-input style="width: 200px;" v-model="item.unitPrice" type="number" placeholder="请è¾å
¥"></el-input> |
| | | <span class="price-unit">å
</span> |
| | | </div> |
| | | </div> |
| | | </el-tab-pane> |
| | | <el-tab-pane label="å¼å°å¯å" name="remote"> |
| | | <div class="remote-config-title">å¼å°å¯éé
ç½®</div> |
| | | <div class="remote-header"> |
| | | <span class="remote-tip">æ ¹æ®è¡æå°ºå¯¸ãé
ééç¨åé
éä»·æ ¼æ¶åè´¹ç¨ï¼ä¸è¶³1å
¬éæ1å
¬é计价ï¼</span> |
| | | </div> |
| | | <el-table :data="remoteTableData" border stripe> |
| | | <el-table-column prop="categoryName" label="è¡æå°ºå¯¸"></el-table-column> |
| | | <el-table-column label="èµ·ééç¨(å
Ž)"> |
| | | <template slot-scope="{row}"> |
| | | <el-input v-model="row.startDistance" type="number" placeholder="请è¾å
¥"></el-input> |
| | | </template> |
| | | </el-table-column> |
| | | <el-table-column label="èµ·éä»·æ ¼(å
)"> |
| | | <template slot-scope="{row}"> |
| | | <el-input v-model="row.startPrice" type="number" placeholder="请è¾å
¥"></el-input> |
| | | </template> |
| | | </el-table-column> |
| | | <el-table-column label="ç»ééç¨(å
Ž)"> |
| | | <template slot-scope="{row}"> |
| | | <el-input v-model="row.extraDistance" type="number" placeholder="请è¾å
¥"></el-input> |
| | | </template> |
| | | </el-table-column> |
| | | <el-table-column label="ç»éä»·æ ¼(å
)"> |
| | | <template slot-scope="{row}"> |
| | | <el-input v-model="row.extraPrice" type="number" placeholder="请è¾å
¥"></el-input> |
| | | </template> |
| | | </el-table-column> |
| | | </el-table> |
| | | </el-tab-pane> |
| | | <el-tab-pane label="é¢è®¡æ¶æ" name="time"> |
| | | <div class="remote-config-title">é¢è®¡æ¶æè§å</div> |
| | | <div class="remote-header"> |
| | | <span class="remote-tip">æ ¹æ®é
ééç¨é¢è®¡é
éæ¶é¿å¹¶å±ç¤ºå¨å°ç¨åºä¸å页é¢</span> |
| | | </div> |
| | | <el-table :data="timeTableData" border stripe> |
| | | <el-table-column label="èµ·ééç¨(å
Ž)"> |
| | | <template slot-scope="{row}"> |
| | | <el-input v-model="row.startDistance" type="number" placeholder="请è¾å
¥"></el-input> |
| | | </template> |
| | | </el-table-column> |
| | | <el-table-column label="èµ·éæ¶é¿(å°æ¶)"> |
| | | <template slot-scope="{row}"> |
| | | <el-input v-model="row.startTime" type="number" placeholder="请è¾å
¥"></el-input> |
| | | </template> |
| | | </el-table-column> |
| | | <el-table-column label="ç»ééç¨(å
Ž)"> |
| | | <template slot-scope="{row}"> |
| | | <el-input v-model="row.continueDistance" type="number" placeholder="请è¾å
¥"></el-input> |
| | | </template> |
| | | </el-table-column> |
| | | <el-table-column label="ç»éæ¶é¿(å°æ¶)"> |
| | | <template slot-scope="{row}"> |
| | | <el-input v-model="row.continueTime" type="number" placeholder="请è¾å
¥"></el-input> |
| | | </template> |
| | | </el-table-column> |
| | | </el-table> |
| | | </el-tab-pane> |
| | | <el-tab-pane label="é¨åºæ³¨åæ¼é" name="deposit"> |
| | | <div class="price-tip">æ ¹æ®æå¨åå¸ä»¥å注åç±»åä¸åï¼å¹³å°æ¶åä¸åæ°é¢æ¼éãæ¼éä¼å¨é¨åºéç½å线ä¸åé¢éè¿ï¼é¨åºçº¿ä¸å¾®ä¿¡æ¯ä»çæ¼éå å¾®ä¿¡å®æ¹è¦æ±å
·ææ¶ææ§ï¼</div> |
| | | <div class="price-items"> |
| | | <div class="price-item" v-for="(item, index) in storeDepositData" :key="index"> |
| | | <span class="price-label">å
¶ä¸{{item.fieldTypeName}}æ¶åæ¼é</span> |
| | | <el-input style="width: 200px;" v-model="item.depositAmount" type="number" placeholder="请è¾å
¥"></el-input> |
| | | <span class="price-unit">å
</span> |
| | | </div> |
| | | </div> |
| | | </el-tab-pane> |
| | | <el-tab-pane label="åææ¯ä¾" name="share"> |
| | | <div class="price-tip">æ ¹æ®è®¢åä¸ä¸åè¿è¥è§è²èç¬ç«é
ç½®ä¸ååææ¯ä¾</div> |
| | | <div class="price-items"> |
| | | <div class="price-item" v-for="(item, index) in shareTableData" :key="index"> |
| | | <span class="price-label">{{item.fieldType === 4 ? 'å¨è®¢åä¸ä½ä¸ºé
éåæ¶ï¼' : 'å
¶ä¸é¨åºç±»å为'}}{{item.fieldTypeName}}åææ¯ä¾ä¸º</span> |
| | | <el-input style="width: 100px;" v-model="item.ratio" type="number" placeholder="请è¾å
¥"></el-input> |
| | | <span class="price-unit">%</span> |
| | | </div> |
| | | </div> |
| | | </el-tab-pane> |
| | | </el-tabs> |
| | | <div slot="footer" class="dialog-footer"> |
| | | <el-button @click="visible = false">åæ¶</el-button> |
| | | <el-button type="primary" @click="confirm" :loading="isWorking">ç¡®å®</el-button> |
| | | </div> |
| | | </GlobalWindow> |
| | | </template> |
| | | |
| | | <script> |
| | | import BaseOpera from '@/components/base/BaseOpera' |
| | | import GlobalWindow from '@/components/common/GlobalWindow' |
| | | import { |
| | | localStorage, |
| | | remoteDelivery, |
| | | estimatedDelivery, |
| | | storeDeposit, |
| | | revenueShare, |
| | | batchSave, |
| | | batchSaveRemoteDelivery, |
| | | batchSaveEstimatedDelivery, |
| | | batchSaveStoreDeposit, |
| | | batchSaveRevenueShare |
| | | } from '@/api/business/pricingRule' |
| | | export default { |
| | | name: 'OperaCityPriceRuleWindow', |
| | | extends: BaseOpera, |
| | | components: { GlobalWindow }, |
| | | data () { |
| | | return { |
| | | activeTab: 'local', |
| | | |
| | | jiudiTableData: [], |
| | | remoteTableData: [], |
| | | timeTableData: [], |
| | | storeDepositData: [], |
| | | shareTableData: [], |
| | | |
| | | form: { |
| | | cityId: null |
| | | } |
| | | } |
| | | }, |
| | | created () { |
| | | this.config({ |
| | | api: '/business/pricingRule', |
| | | 'field.id': 'id' |
| | | }) |
| | | }, |
| | | methods: { |
| | | open (title, target) { |
| | | this.title = title |
| | | this.visible = true |
| | | this.activeTab = 'local' |
| | | this.jiudiTableData = [] |
| | | this.remoteTableData = [] |
| | | this.timeTableData = [] |
| | | this.storeDepositData = [] |
| | | this.shareTableData = [] |
| | | this.form = { |
| | | cityId: target |
| | | } |
| | | this.fetchPriceRule() |
| | | this.fetchRemoteDelivery() |
| | | this.fetchEstimatedDelivery() |
| | | this.fetchStoreDeposit() |
| | | this.fetchRevenueShare() |
| | | }, |
| | | // æ¥è¯¢å°±å°ååè§åå表 |
| | | fetchPriceRule () { |
| | | localStorage(this.form.cityId) |
| | | .then(data => { |
| | | this.jiudiTableData = data |
| | | }) |
| | | .catch(e => { |
| | | this.$tip.apiFailed(e) |
| | | }) |
| | | }, |
| | | // æ¥è¯¢å¼å°å¯éè§åå表 |
| | | fetchRemoteDelivery () { |
| | | remoteDelivery(this.form.cityId) |
| | | .then(data => { |
| | | this.remoteTableData = data |
| | | }) |
| | | .catch(e => { |
| | | this.$tip.apiFailed(e) |
| | | }) |
| | | }, |
| | | // æ¥è¯¢å¼å°å¯éè§åå表 |
| | | fetchEstimatedDelivery () { |
| | | estimatedDelivery(this.form.cityId) |
| | | .then(data => { |
| | | this.timeTableData = [ |
| | | data |
| | | ] |
| | | }) |
| | | .catch(e => { |
| | | this.$tip.apiFailed(e) |
| | | }) |
| | | }, |
| | | // æ¥è¯¢é¨åºæ³¨åæ¼éè§åå表 |
| | | fetchStoreDeposit () { |
| | | storeDeposit(this.form.cityId) |
| | | .then(data => { |
| | | this.storeDepositData = data |
| | | }) |
| | | .catch(e => { |
| | | this.$tip.apiFailed(e) |
| | | }) |
| | | }, |
| | | // æ¥è¯¢åææ¯ä¾è§åå表 |
| | | fetchRevenueShare () { |
| | | revenueShare(this.form.cityId) |
| | | .then(data => { |
| | | this.shareTableData = data |
| | | }) |
| | | .catch(e => { |
| | | this.$tip.apiFailed(e) |
| | | }) |
| | | }, |
| | | // ä¿åææè§å |
| | | confirm () { |
| | | if (!this.validateLocalStorage()) return |
| | | if (!this.validateRemoteDelivery()) return |
| | | if (!this.validateEstimatedDelivery()) return |
| | | if (!this.validateStoreDeposit()) return |
| | | if (!this.validateRevenueShare()) return |
| | | |
| | | this.isWorking = true |
| | | Promise.all([ |
| | | batchSave({ cityId: this.form.cityId, items: this.jiudiTableData }), |
| | | batchSaveRemoteDelivery({ cityId: this.form.cityId, items: this.remoteTableData }), |
| | | batchSaveEstimatedDelivery({ cityId: this.form.cityId, ...this.timeTableData[0] }), |
| | | batchSaveStoreDeposit({ cityId: this.form.cityId, items: this.storeDepositData }), |
| | | batchSaveRevenueShare({ cityId: this.form.cityId, items: this.shareTableData }) |
| | | ]) |
| | | .then(() => { |
| | | this.visible = false |
| | | this.$tip.apiSuccess('ä¿åæå') |
| | | this.$emit('success') |
| | | }) |
| | | .catch(e => { |
| | | this.$tip.apiFailed(e) |
| | | }) |
| | | .finally(() => { |
| | | this.isWorking = false |
| | | }) |
| | | }, |
| | | // æ ¡éªå°±å°å¯å |
| | | validateLocalStorage () { |
| | | for (const item of this.jiudiTableData) { |
| | | if (item.unitPrice === null || item.unitPrice === undefined || item.unitPrice === '') { |
| | | this.$message.error('è¯·å¡«åææå°±å°å¯åçæ¶è´¹éé¢') |
| | | return false |
| | | } |
| | | } |
| | | return true |
| | | }, |
| | | // æ ¡éªå¼å°å¯å |
| | | validateRemoteDelivery () { |
| | | for (const item of this.remoteTableData) { |
| | | if (item.startDistance === null || item.startDistance === undefined || item.startDistance === '' || |
| | | item.startPrice === null || item.startPrice === undefined || item.startPrice === '' || |
| | | item.extraDistance === null || item.extraDistance === undefined || item.extraDistance === '' || |
| | | item.extraPrice === null || item.extraPrice === undefined || item.extraPrice === '') { |
| | | this.$message.error('è¯·å¡«åææå¼å°å¯éçé
置信æ¯') |
| | | return false |
| | | } |
| | | } |
| | | return true |
| | | }, |
| | | // æ ¡éªé¢è®¡æ¶æ |
| | | validateEstimatedDelivery () { |
| | | const item = this.timeTableData[0] |
| | | if (!item || item.startDistance === null || item.startDistance === undefined || item.startDistance === '' || |
| | | item.startTime === null || item.startTime === undefined || item.startTime === '' || |
| | | item.continueDistance === null || item.continueDistance === undefined || item.continueDistance === '' || |
| | | item.continueTime === null || item.continueTime === undefined || item.continueTime === '') { |
| | | this.$message.error('请填åé¢è®¡æ¶æçææé
置信æ¯') |
| | | return false |
| | | } |
| | | return true |
| | | }, |
| | | // æ ¡éªé¨åºæ³¨åæ¼é |
| | | validateStoreDeposit () { |
| | | for (const item of this.storeDepositData) { |
| | | if (item.depositAmount === null || item.depositAmount === undefined || item.depositAmount === '') { |
| | | this.$message.error('è¯·å¡«åææé¨åºæ³¨åæ¼éçéé¢') |
| | | return false |
| | | } |
| | | } |
| | | return true |
| | | }, |
| | | // æ ¡éªåææ¯ä¾ |
| | | validateRevenueShare () { |
| | | for (const item of this.shareTableData) { |
| | | if (item.ratio === null || item.ratio === undefined || item.ratio === '') { |
| | | this.$message.error('è¯·å¡«åææåææ¯ä¾') |
| | | return false |
| | | } |
| | | } |
| | | return true |
| | | } |
| | | } |
| | | } |
| | | </script> |
| | | |
| | | <style scoped> |
| | | .price-tip { |
| | | margin-bottom: 20px; |
| | | color: #666; |
| | | font-size: 14px; |
| | | } |
| | | .price-items { |
| | | display: flex; |
| | | flex-direction: column; |
| | | gap: 16px; |
| | | } |
| | | .price-item { |
| | | display: flex; |
| | | align-items: center; |
| | | gap: 10px; |
| | | } |
| | | .price-label { |
| | | flex-shrink: 0; |
| | | font-weight: 500; |
| | | } |
| | | .price-unit { |
| | | color: #666; |
| | | white-space: nowrap; |
| | | } |
| | | .dialog-footer { |
| | | text-align: right; |
| | | padding: 0 20px; |
| | | box-sizing: border-box; |
| | | border-top: 1px solid #eee; |
| | | } |
| | | .remote-config-title { |
| | | font-weight: bold; |
| | | margin-bottom: 15px; |
| | | } |
| | | .remote-header { |
| | | display: flex; |
| | | align-items: center; |
| | | gap: 15px; |
| | | margin-bottom: 15px; |
| | | } |
| | | .remote-tip { |
| | | color: #666; |
| | | font-size: 14px; |
| | | } |
| | | .remote-pagination { |
| | | margin-top: 15px; |
| | | text-align: right; |
| | | } |
| | | </style> |