添加比例

src/main/vue-admin/src/views/SaleBatchEdit.vue

@@ -40,20 +40,8 @@
                 </el-time-picker>
             </el-form-item>
             <div class="form-divider"></div>
-            <el-form-item label="上涨比例" prop="riseRate">
-                <el-input-number v-model="formData.riseRate" placeholder="上涨比例"></el-input-number>
-            </el-form-item>
-            <el-form-item label="手续费" prop="serviceCharge">
-                <el-input-number v-model="formData.serviceCharge" placeholder="手续费"></el-input-number>
-            </el-form-item>
-            <el-form-item label="佣金" prop="commissionRate">
-                <el-input-number v-model="formData.commissionRate" placeholder="佣金"></el-input-number>
-            </el-form-item>
-            <el-form-item label="最高价格" prop="maxPrice">
-                <el-input-number v-model="formData.maxPrice" placeholder="最高价格"></el-input-number>
-            </el-form-item>
-            <el-form-item label="积分倍率" prop="creditFactor">
-                <el-input-number v-model="formData.creditFactor" placeholder="积分倍率"></el-input-number>
+            <el-form-item label="" prop="riseRate">
+                <el-button type="primary" size="mini" @click="dialogVisible = true">查看比例</el-button>
             </el-form-item>
             <div class="form-divider"></div>
             <el-form-item label="延迟上架" prop="delayDelegate">
@@ -79,9 +67,83 @@
                 <el-button @click="$router.go(-1)">取消</el-button>
             </el-form-item>
         </el-form>
+        <el-dialog v-model="dialogVisible" title="添加比例" width="1000px">
+            <!-- <el-form :model="extension" ref="form" label-width="80px" :inline="true" size="mini">
+                <el-form-item label="上涨比例" prop="riseRate">
+                    <el-input-number v-model="extension.riseRate" placeholder="上涨比例"></el-input-number>
+                </el-form-item>
+                <el-form-item label="手续费" prop="serviceCharge">
+                    <el-input-number v-model="extension.serviceCharge" placeholder="手续费"></el-input-number>
+                </el-form-item>
+                <el-form-item label="佣金" prop="commissionRate">
+                    <el-input-number v-model="extension.commissionRate" placeholder="佣金"></el-input-number>
+                </el-form-item>
+                <el-form-item label="积分倍率" prop="creditFactor">
+                    <el-input-number v-model="extension.creditFactor" placeholder="积分倍率"></el-input-number>
+                </el-form-item>
+                <el-form-item label="最低价格" prop="minPrice">
+                    <el-input-number v-model="extension.minPrice" placeholder="最低价格"></el-input-number>
+                </el-form-item>
+                <el-form-item label="最高价格" prop="maxPrice">
+                    <el-input-number v-model="extension.maxPrice" placeholder="最高价格"></el-input-number>
+                </el-form-item>
+            </el-form> -->
+
+            <div class="pay-config-item-list">
+                <div class="pay-config-item head">
+                    <div class="key">上涨比例</div>
+                    <div class="minPrice">手续费</div>
+                    <div class="maxPrice">佣金</div>
+                    <div class="minPrice">积分倍率</div>
+                    <div class="minPrice">最低价格</div>
+                    <div class="maxPrice">最高价格</div>
+                    <div class="del"></div>
+                </div>
+                <div class="pay-config-item" v-for="(item, index) in extensions" :key="index">
+                    <div class="key">
+                        <el-input-number v-model="item.riseRate" size="mini" placeholder="上涨比例"></el-input-number>
+                    </div>
+                    <div class="minPrice">
+                        <el-input-number
+                            v-model="item.serviceCharge"
+                            size="mini"
+                            placeholder="手续费"
+                        ></el-input-number>
+                    </div>
+                    <div class="maxPrice">
+                        <el-input-number v-model="item.commissionRate" placeholder="佣金" size="mini"></el-input-number>
+                    </div>
+                    <div class="minPrice">
+                        <el-input-number
+                            v-model="item.creditFactor"
+                            placeholder="积分倍率"
+                            size="mini"
+                        ></el-input-number>
+                    </div>
+                    <div class="maxPrice">
+                        <el-input-number v-model="item.minPrice" placeholder="最低价格" size="mini"></el-input-number>
+                    </div>
+                    <div class="minPrice">
+                        <el-input-number v-model="item.maxPrice" placeholder="最高价格" size="mini"></el-input-number>
+                    </div>
+                    <div class="del">
+                        <el-button type="danger" :icon="Delete" circle @click="delExtensions(index)"></el-button>
+                    </div>
+                </div>
+                <el-button @click="addExtensions" size="mini">添加 </el-button>
+            </div>
+
+            <template #footer>
+                <span class="dialog-footer">
+                    <el-button @click="dialogVisible = false">取消</el-button>
+                    <el-button type="primary" @click="saveExtension"> 保存 </el-button>
+                </span>
+            </template>
+        </el-dialog>
     </div>
 </template>
 <script>
+import { Delete } from '@element-plus/icons-vue'
 export default {
     name: 'SaleBatchEdit',
     created() {
@@ -89,16 +151,17 @@ export default {
             this.$http
                 .get('saleBatch/get/' + this.$route.query.id)
                 .then(res => {
-                    if (res.saleStart && res.saleEnd) {
-                        res.sell = [res.saleStart, res.saleEnd]
+                    if (res.saleBatch.saleStart && res.saleBatch.saleEnd) {
+                        res.saleBatch.sell = [res.saleBatch.saleStart, res.saleBatch.saleEnd]
                     }
-                    if (res.delegateStart && res.delegateEnd) {
-                        res.delegate = [res.delegateStart, res.delegateEnd]
+                    if (res.saleBatch.delegateStart && res.saleBatch.delegateEnd) {
+                        res.saleBatch.delegate = [res.saleBatch.delegateStart, res.saleBatch.delegateEnd]
                     }
-                    if (res.delayDuration) {
-                        res.delayDuration = res.delayDuration / 1000
+                    if (res.saleBatch.delayDuration) {
+                        res.saleBatch.delayDuration = res.saleBatch.delayDuration / 1000
                     }
-                    this.formData = res
+                    this.formData = res.saleBatch
+                    this.extensions = res.extensions
                 })
                 .catch(e => {
                     console.log(e)
@@ -106,6 +169,9 @@ export default {
                 })
         }
     },
+    setup() {
+        return { Delete }
+    },
     data() {
         return {
             saving: false,
@@ -175,10 +241,24 @@ export default {
                 maxPrice: [{ required: true, message: '请输入最高价格', trigger: 'blur' }],
                 dailyLimit: [{ required: true, message: '请输入日购上限', trigger: 'blur' }],
                 creditFactor: [{ required: true, message: '请输入积分倍率', trigger: 'blur' }]
-            }
+            },
+            dialogVisible: false,
+            extensions: [],
+            extension: {}
         }
     },
     methods: {
+        addExtensions() {
+            this.extensions.push({
+                batchId: this.formData.id,
+                riseRate: '',
+                serviceCharge: '',
+                commissionRate: '',
+                creditFactor: '',
+                minPrice: '',
+                maxPrice: ''
+            })
+        },
         onSave() {
             this.$refs.form.validate(valid => {
                 if (valid) {
@@ -188,18 +268,62 @@ export default {
                 }
             })
         },
+        saveExtension() {
+            let extensions = [...this.extensions]
+            let flag = extensions.find(item => {
+                return (
+                    item.riseRate &&
+                    (!this.checkNull(item.serviceCharge) ||
+                        !this.checkNull(item.commissionRate) ||
+                        !this.checkNull(item.creditFactor) ||
+                        !this.checkNull(item.minPrice) ||
+                        !this.checkNull(item.maxPrice))
+                )
+            })
+
+            if (flag) {
+                this.$alert('存在未填写完成的比例', '警告', { type: 'error' })
+                return
+            }
+
+            this.extensions = extensions.filter(item => {
+                return item.riseRate
+            })
+            this.dialogVisible = false
+        },
+        checkNull(val) {
+            if (val === 0) {
+                return true
+            } else {
+                return !!val
+            }
+        },
+        delExtensions(index) {
+            this.$confirm('确认要删除这个比例吗?', '提示', {
+                confirmButtonText: '确定',
+                cancelButtonText: '取消'
+            }).then(() => {
+                let extensions = [...this.extensions]
+                extensions.splice(index, 1)
+                this.extensions = extensions
+            })
+        },
         submit() {
-            let data = {
+            let formData = {
                 ...this.formData,
                 saleStart: this.formData.sell[0],
                 saleEnd: this.formData.sell[1],
                 delegateStart: this.formData.delegate[0],
                 delegateEnd: this.formData.delegate[1]
             }
-            if (data.delayDuration) {
-                data.delayDuration = data.delayDuration * 1000
+            if (formData.delayDuration) {
+                formData.delayDuration = formData.delayDuration * 1000
             }
 
+            let data = {
+                saleBatch: formData,
+                extensions: [...this.extensions]
+            }
             this.saving = true
             this.$http
                 .post('/saleBatch/save', data, { body: 'json' })
@@ -233,4 +357,22 @@ export default {
     }
 }
 </script>
-<style lang="less" scoped></style>
+<style lang="less" scoped>
+.pay-config-item-list {
+    .pay-config-item {
+        display: flex;
+        margin-bottom: 8px;
+        & > div {
+            width: 150px;
+            flex-shrink: 0;
+        }
+        &.head {
+            margin-bottom: 10px;
+        }
+    }
+
+    .el-input-number {
+        width: 140px;
+    }
+}
+</style>