<template>
|
<div class="page-list-container">
|
<!--数据Table-->
|
<yrt-data-list :ref="dataListRef" :editor-ref="editorRef" :data-options="dataOptions" :fields.sync="dataListOptions.fields" :buttons="dataListOptions.buttons" :button-click="buttonClick" :data-list-selections.sync="dataListSelections" :auth-nodes="authNodes">
|
</yrt-data-list>
|
|
<!--数据编辑器Editor-->
|
<yrt-editor :ref="editorRef" :data-list-ref="dataListRef" v-bind="editorOptions" :data-options="dataOptions" :action.sync="editorOptions.action" :top.sync="editorOptions.top" :visible.sync="editorOptions.config.visible" :auth-nodes="authNodes" :on-save-before="onSaveBefore" @on-change="onChange" @on-edit-load-after="onEditLoadAfter" @on-add-load-after="onEditLoadAfter">
|
<div slot="blank-chargeData">
|
<el-card v-if="chargeMode==='按重量'" class="box-card">
|
<div slot="header" class="clearfix">
|
<span>按重量</span>
|
</div>
|
<el-form :model="chargeData.weight" label-width="120px">
|
<el-form-item label="重量单位">
|
<el-radio-group v-model="chargeData.weight.type">
|
<el-radio label="按千克"></el-radio>
|
<el-radio label="按吨"></el-radio>
|
</el-radio-group>
|
</el-form-item>
|
<!-- <el-form-item label="启用阶梯价">
|
<el-checkbox v-model="chargeData.weight.isLevelPrice"></el-checkbox>
|
</el-form-item> -->
|
<el-form-item v-if="!chargeData.weight.isLevelPrice" label="单价">
|
<el-input v-model="chargeData.weight.price" class="w-200"></el-input>
|
</el-form-item>
|
<template v-else>
|
<template v-for="(item, index) in chargeData.weight.levelPriceList">
|
<el-form-item :key="index" label="阶梯单价" class="margin-bottom-10">
|
<span><=</span>
|
<el-input v-model="item.number" placeholder="重量" class="w-80"></el-input>
|
<span v-if="chargeData.weight.type=='按千克'">千克，单价为</span>
|
<span v-else>吨，单价为</span>
|
<el-input v-model="item.price" class="w-80"></el-input>
|
<span>元</span>
|
<el-button v-if="index>0" type="text" @click="delLevelPrice(chargeData.weight.levelPriceList, index)">
|
删除
|
</el-button>
|
</el-form-item>
|
</template>
|
<el-form-item>
|
<el-button type="text" icon="el-icon-plus" @click="addLevelPrice(chargeData.weight.levelPriceList)">添加阶梯</el-button>
|
</el-form-item>
|
</template>
|
</el-form>
|
</el-card>
|
<el-card v-else-if="chargeMode==='按件/箱'" class="box-card">
|
<div slot="header" class="clearfix">
|
<span>按件/箱</span>
|
</div>
|
<el-form :model="chargeData.unit" label-width="120px">
|
<el-form-item label="包装单位">
|
<el-radio-group v-model="chargeData.unit.type">
|
<el-radio label="按小单位"></el-radio>
|
<el-radio label="按中单位"></el-radio>
|
<el-radio label="按大单位"></el-radio>
|
</el-radio-group>
|
</el-form-item>
|
<!-- <el-form-item label="启用阶梯价">
|
<el-checkbox v-model="chargeData.unit.isLevelPrice"></el-checkbox>
|
</el-form-item> -->
|
<el-form-item v-if="!chargeData.unit.isLevelPrice" label="单价">
|
<el-input v-model="chargeData.unit.price" class="w-200"></el-input>
|
</el-form-item>
|
<template v-else>
|
<template v-for="(item, index) in chargeData.unit.levelPriceList">
|
<el-form-item :key="index" label="阶梯单价" class="margin-bottom-10">
|
<span><=</span>
|
<el-input v-model="item.number" placeholder="件数" class="w-80"></el-input>
|
<span>件/箱，单价为</span>
|
<el-input v-model="item.price" class="w-80"></el-input>
|
<span>元</span>
|
<el-button v-if="index>0" type="text" @click="delLevelPrice(chargeData.unit.levelPriceList, index)">
|
删除
|
</el-button>
|
</el-form-item>
|
</template>
|
<el-form-item>
|
<el-button type="text" icon="el-icon-plus" @click="addLevelPrice(chargeData.unit.levelPriceList)">添加阶梯</el-button>
|
</el-form-item>
|
</template>
|
</el-form>
|
</el-card>
|
<el-card v-else-if="chargeMode==='按托盘'" class="box-card">
|
<div slot="header" class="clearfix">
|
<span>按托盘</span>
|
</div>
|
<el-form :model="chargeData.tray" label-width="120px">
|
<!-- <el-form-item label="启用阶梯价">
|
<el-checkbox v-model="chargeData.tray.isLevelPrice"></el-checkbox>
|
</el-form-item> -->
|
<el-form-item v-if="!chargeData.tray.isLevelPrice" label="单价">
|
<el-input v-model="chargeData.tray.price" class="w-200"></el-input>
|
</el-form-item>
|
<template v-else>
|
<template v-for="(item, index) in chargeData.tray.levelPriceList">
|
<el-form-item :key="index" label="阶梯单价" class="margin-bottom-10">
|
<span><=</span>
|
<el-input v-model="item.number" placeholder="托盘数" class="w-80"></el-input>
|
<span>托，单价为</span>
|
<el-input v-model="item.price" class="w-80"></el-input>
|
<span>元</span>
|
<el-button v-if="index>0" type="text" @click="delLevelPrice(chargeData.tray.levelPriceList, index)">
|
删除
|
</el-button>
|
</el-form-item>
|
</template>
|
<el-form-item>
|
<el-button type="text" icon="el-icon-plus" @click="addLevelPrice(chargeData.tray.levelPriceList)">添加阶梯</el-button>
|
</el-form-item>
|
</template>
|
</el-form>
|
</el-card>
|
</div>
|
</yrt-editor>
|
|
</div>
|
</template>
|
|
<script>
|
import baseLayout from "@/components/common/base-layout.vue";
|
|
export default {
|
name: "finance-fee-base-onecharge",
|
components: {},
|
mixins: [baseLayout],
|
data() {
|
return {
|
// 收费模式数据
|
chargeData: {
|
weight: {
|
type: "按千克",
|
isLevelPrice: false, // 按平米启用阶梯价
|
price: 0, // 非阶梯价
|
// 按平米阶梯价
|
levelPriceList: [
|
{
|
number: null,
|
price: null
|
}
|
]
|
},
|
unit: {
|
type: "按小单位",
|
isLevelPrice: false, // 按单位启用阶梯价
|
// 按单位阶梯价
|
levelPriceList: [
|
{
|
number: null,
|
price: null
|
}
|
],
|
price: 0 // 非阶梯价
|
},
|
tray: {
|
isLevelPrice: false, // 按托盘数启用阶梯价
|
price: 0, // 非阶梯价
|
// 按托盘数阶梯价
|
levelPriceList: [
|
{
|
number: null,
|
price: null
|
}
|
]
|
}
|
},
|
// 收费方式
|
chargeMode: "按重量"
|
};
|
},
|
methods: {
|
// 编辑器改变事件
|
onChange(ref, val, field) {
|
const formData = this.editor.formData;
|
this.chargeMode = formData.chargeMode;
|
},
|
// 添加阶梯价
|
addLevelPrice(rows) {
|
rows.push({
|
number: null,
|
price: null
|
});
|
},
|
// 删除阶梯价
|
delLevelPrice(rows, index) {
|
rows.splice(index, 1);
|
},
|
// 保存前事件
|
onSaveBefore() {
|
var chargeData = JSON.stringify(this.chargeData);
|
this.editor.changeValue("chargeData", chargeData);
|
},
|
// 数据加载后
|
onEditLoadAfter(formData) {
|
if (formData.storageName !== null && formData.chargeData) {
|
var chargeData = formData.chargeData;
|
this.chargeData = JSON.parse(chargeData);
|
} else {
|
this.refresh();
|
}
|
},
|
// 刷新数据
|
refresh() {
|
// 收费模式数据
|
this.chargeData = {
|
weight: {
|
type: "按千克",
|
isLevelPrice: false, // 按平米启用阶梯价
|
price: 0, // 非阶梯价
|
// 按平米阶梯价
|
levelPriceList: [
|
{
|
number: null,
|
price: null
|
}
|
]
|
},
|
unit: {
|
type: "按小单位",
|
isLevelPrice: false, // 按单位启用阶梯价
|
// 按单位阶梯价
|
levelPriceList: [
|
{
|
number: null,
|
price: null
|
}
|
],
|
price: 0 // 非阶梯价
|
},
|
tray: {
|
isLevelPrice: false, // 按托盘数启用阶梯价
|
price: 0, // 非阶梯价
|
// 按托盘数阶梯价
|
levelPriceList: [
|
{
|
number: null,
|
price: null
|
}
|
]
|
}
|
};
|
}
|
}
|
};
|
</script>
|
<style lang="scss" scoped>
|
.page-list-container {
|
min-height: calc(100vh - 110px);
|
overflow: hidden;
|
position: relative;
|
}
|
|
@media screen and (max-height: 900px) {
|
.page-list-container {
|
min-height: 600px;
|
}
|
}
|
.box-card {
|
width: 700px;
|
}
|
</style>
|
