<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.area" label-width="120px">
|
<el-form-item label="面积类型">
|
<el-radio-group v-model="chargeData.area.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.area.isLevelPrice"></el-checkbox>
|
</el-form-item>
|
<el-form-item v-if="!chargeData.area.isLevelPrice" label="单价">
|
<el-input v-model="chargeData.area.price" class="w-200"></el-input>
|
<span>元/平/月</span>
|
</el-form-item>
|
<template v-else>
|
<template v-for="(item, index) in chargeData.area.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.area.levelPriceList, index)">
|
删除
|
</el-button>
|
</el-form-item>
|
</template>
|
<el-form-item>
|
<el-button type="text" icon="el-icon-plus" @click="addLevelPrice(chargeData.area.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>
|
<span>元/箱/天</span>
|
</el-form-item>
|
<template v-else>
|
<el-form-item label="计算方式">
|
<el-radio v-model="chargeData.unit.numberType" label="件/箱">件/箱</el-radio>
|
<el-radio v-model="chargeData.unit.numberType" label="存放天数">存放天数</el-radio>
|
</el-form-item>
|
<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="chargeData.unit.numberType" class="w-100"></el-input>
|
<span>{{ chargeData.unit.numberType }}，单价为</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>
|
<span>元/托/天</span>
|
</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>
|
<el-card v-else-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>
|
<span>元/{{ chargeData.weight.type }}/天</span>
|
</el-form-item>
|
<template v-else>
|
<el-form-item label="计算方式">
|
<el-radio v-model="chargeData.weight.numberType" label="重量">重量</el-radio>
|
<el-radio v-model="chargeData.weight.numberType" label="存放天数">存放天数</el-radio>
|
</el-form-item>
|
<template v-for="(item, index) in chargeData.weight.levelPriceList">
|
<el-form-item :key="index" label="阶梯单价" class="margin-bottom-10">
|
<span><=</span>
|
<template v-if="chargeData.weight.numberType==='重量'">
|
<el-input v-model="item.number" :placeholder="chargeData.weight.type" class="w-80"></el-input>
|
<span>{{ chargeData.weight.type }}，单价为</span>
|
</template>
|
<template v-else>
|
<el-input v-model="item.number" :placeholder="chargeData.weight.type" class="w-80"></el-input>
|
<span>存放天数，单价为</span>
|
</template>
|
<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.days" label-width="120px">
|
<el-form-item label="启用阶梯价">
|
<el-checkbox v-model="chargeData.days.isLevelPrice"></el-checkbox>
|
</el-form-item>
|
<el-form-item v-if="!chargeData.days.isLevelPrice" label="单价">
|
<el-input v-model="chargeData.days.price" class="w-200"></el-input>
|
</el-form-item>
|
<template v-else>
|
<template v-for="(item, index) in chargeData.days.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.days.levelPriceList, index)">
|
删除
|
</el-button>
|
</el-form-item>
|
</template>
|
<el-form-item>
|
<el-button type="text" icon="el-icon-plus" @click="addLevelPrice(chargeData.days.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-storagefee",
|
components: {},
|
mixins: [baseLayout],
|
data() {
|
return {
|
// 收费模式数据
|
chargeData: {
|
area: {
|
type: "公摊面积", // 面积类型
|
isLevelPrice: false, // 按平米启用阶梯价
|
price: 0, // 非阶梯价
|
// 按平米阶梯价
|
levelPriceList: [
|
{
|
number: null,
|
price: null
|
}
|
]
|
},
|
unit: {
|
isLevelPrice: false, // 按单位启用阶梯价
|
// 按单位阶梯价
|
levelPriceList: [
|
{
|
number: null,
|
price: null
|
}
|
],
|
price: 0, // 非阶梯价
|
type: "按小单位", // 包装单位
|
numberType: "件/箱" // 阶梯数量类型
|
},
|
tray: {
|
isLevelPrice: false, // 按托盘数启用阶梯价
|
price: 0, // 非阶梯价
|
// 按托盘数阶梯价
|
levelPriceList: [
|
{
|
number: null,
|
price: null
|
}
|
]
|
},
|
weight: {
|
isLevelPrice: false, // 按重量启用阶梯价
|
price: 0, // 非阶梯价
|
levelPriceList: [
|
{
|
number: null,
|
price: null
|
}
|
],
|
type: "千克", // 单位
|
numberType: "重量" // 阶梯数量类型
|
},
|
days: {
|
isLevelPrice: false, // 按重量启用阶梯价
|
price: 0, // 非阶梯价
|
levelPriceList: [
|
{
|
number: null,
|
price: null
|
}
|
]
|
}
|
},
|
// 收费方式
|
chargeMode: "按平米"
|
};
|
},
|
methods: {
|
// 编辑器改变事件
|
onChange(ref, val, field) {
|
const formData = this.editor.formData;
|
this.chargeMode = formData.chargeMode;
|
if (formData.periodType === "周期倍数") {
|
formData.inLibSettlement = "不支持";
|
} else if (formData.inLibSettlement === "支持") {
|
if (formData.periodType === "周期倍数") {
|
this.$message.error("周期规则为周期倍数时，支持库存结算只能选择不支持");
|
formData.inLibSettlement = "不支持";
|
}
|
}
|
},
|
// 添加阶梯价
|
addLevelPrice(rows) {
|
rows.push({
|
area: 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) {
|
var chargeData = formData.chargeData;
|
this.chargeData = JSON.parse(chargeData);
|
this.chargeMode = formData.chargeMode;
|
} else {
|
this.refresh();
|
}
|
},
|
// 刷新数据
|
refresh() {
|
// 收费模式数据
|
this.chargeData = {
|
area: {
|
type: "公摊面积", // 面积类型
|
isLevelPrice: false, // 按平米启用阶梯价
|
price: 0, // 非阶梯价
|
// 按平米阶梯价
|
levelPriceList: [
|
{
|
number: null,
|
price: null
|
}
|
]
|
},
|
unit: {
|
isLevelPrice: false, // 按单位启用阶梯价
|
// 按单位阶梯价
|
levelPriceList: [
|
{
|
number: null,
|
price: null
|
}
|
],
|
price: 0, // 非阶梯价
|
type: "按小单位" // 包装单位
|
},
|
tray: {
|
isLevelPrice: false, // 按托盘数启用阶梯价
|
price: 0, // 非阶梯价
|
// 按托盘数阶梯价
|
levelPriceList: [
|
{
|
number: null,
|
price: null
|
}
|
]
|
},
|
weight: {
|
isLevelPrice: false, // 按重量启用阶梯价
|
price: 0, // 非阶梯价
|
levelPriceList: [
|
{
|
number: null,
|
price: null
|
}
|
]
|
},
|
days: {
|
isLevelPrice: false, // 按重量启用阶梯价
|
price: 0, // 非阶梯价
|
levelPriceList: [
|
{
|
number: null,
|
price: null
|
}
|
]
|
}
|
};
|
// 收费方式
|
this.chargeMode = "按平米";
|
}
|
}
|
};
|
</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>
|
