分润更新

src/views/chargeManager/share-model.vue

@@ -0,0 +1,310 @@
+<template>
+    <div>
+        <el-form :model="form" :rules="rules" ref="ruleForm">
+            <el-form-item label="所属分部" prop="organId" :label-width="formLabelWidth">
+                <el-select v-model.trim="form.organId" :disabled="formActionTitle === 'update'" placeholder="请选择所属分部">
+                    <el-option
+                    v-for="item in branchList"
+                    :key="item.value"
+                    :label="item.label"
+                    :value="item.value"
+                    ></el-option>
+                </el-select>
+            </el-form-item>
+            <el-row :gutter="10" v-for="(service, index) in form.serviceList" :key="index + 1000">
+                <el-col :span="9">
+                    <el-form-item :label-width="formLabelWidth" :label="`服务收入${index + 1}`" :prop="'serviceList.' + index + '.feeType'" :rules="[{ required: true, message: '请选择收费方式', trigger: 'change' }]">
+                    <el-select
+                        v-model.trim="service.feeType"
+                        placeholder="请选择收费方式"
+                        style="width: 100% !important;"
+                        disabled
+                    >
+                        <el-option value="SERVICE" label="服务收入"></el-option>
+                        <el-option value="SELL" label="销售收入"></el-option>
+                    </el-select>
+                    </el-form-item>
+                </el-col>
+                <el-col :span="5">
+                    <el-form-item :prop="'serviceList.' + index + '.organId'" :rules="[
+                    { required: true, message: '请选择分润分部', trigger: 'change' },
+                    ]">
+                    <el-select
+                        v-model.trim="service.organId"
+                        placeholder="分润分部"
+                        clearable
+                    >
+                        <el-option
+                        v-for="(item, index) in calcBranchList"
+                        :key="index"
+                        :label="item.label"
+                        :value="item.value"
+                        :disabled="item.disabled"
+                        ></el-option>
+                    </el-select>
+                    </el-form-item>
+                </el-col>
+                <el-col :span="5">
+                    <el-form-item :prop="'serviceList.' + index + '.scale'" :rules="[
+                        { required: true, validator: validSale, trigger: 'blur, change' },
+                        { required: true, message: '比例必须为数字值', trigger: 'blur, change' }
+                    ]">
+                        <el-input
+                            type="number"
+                            min="0"
+                            max="100"
+                            placeholder="分润比例"
+                            @mousewheel.native.prevent
+                            v-model.number="service.scale"
+                        >
+                            <i slot="suffix">%</i>
+                        </el-input>
+                    </el-form-item>
+                </el-col>
+                <el-col :span="5">
+                    <el-button icon="el-icon-plus" @click="onAddDomain('SERVICE')" circle></el-button>
+                    <el-button icon="el-icon-minus" :disabled="form.serviceList.length <= 1" @click="onRemoveDomain('SERVICE', service)" circle type="danger"></el-button>
+                </el-col>
+            </el-row>
+            <el-divider></el-divider>
+            <el-row :gutter="10" v-for="(domain, index) in form.sellList" :key="index">
+                <el-col :span="9">
+                    <el-form-item :label-width="formLabelWidth" :label="`销售收入${index + 1}`" :prop="'sellList.' + index + '.feeType'" :rules="[
+                    { required: true, message: '请选择收费方式', trigger: 'change' },
+                    ]">
+                    <el-select
+                        v-model.trim="domain.feeType"
+                        placeholder="请选择收费方式"
+                        style="width: 100% !important;"
+                        disabled
+                    >
+                        <el-option value="SERVICE" label="服务收入"></el-option>
+                        <el-option value="SELL" label="销售收入"></el-option>
+                    </el-select>
+                    </el-form-item>
+                </el-col>
+                <el-col :span="5">
+                    <el-form-item :prop="'sellList.' + index + '.organId'" :rules="[
+                    { required: true, message: '请选择分润分部', trigger: 'change' },
+                    ]">
+                    <el-select
+                        v-model.trim="domain.organId"
+                        placeholder="分润分部"
+                        clearable
+                    >
+                        <el-option
+                        v-for="(item, index) in calcBranchList"
+                        :key="index"
+                        :label="item.label"
+                        :value="item.value"
+                        :disabled="item.disabled"
+                        ></el-option>
+                    </el-select>
+                    </el-form-item>
+                </el-col>
+                <el-col :span="5">
+                    <el-form-item :prop="'sellList.' + index + '.scale'" :rules="[
+                        { required: true, validator: validSale, trigger: 'blur, change' },
+                        { required: true, message: '比例必须为数字值', trigger: 'blur, change' }
+                    ]">
+                        <el-input
+                            type="number"
+                            v-number
+                            min="0"
+                            max="100"
+                            placeholder="分润比例"
+                            @mousewheel.native.prevent
+                            v-model.number="domain.scale"
+                        >
+                            <i slot="suffix">%</i>
+                        </el-input>
+                    </el-form-item>
+                </el-col>
+                <el-col :span="5">
+                    <el-button icon="el-icon-plus" @click="onAddDomain('SELL')" circle></el-button>
+                    <el-button icon="el-icon-minus" :disabled="form.sellList.length <= 1" @click="onRemoveDomain('SELL', domain)" circle type="danger"></el-button>
+                </el-col>
+            </el-row>
+        </el-form>
+
+        <span slot="footer" class="dialog-footer">
+            <el-button @click="close">取 消</el-button>
+            <el-button @click="onChargeSubmit('ruleForm')" type="primary">确 定</el-button>
+        </span>
+    </div>
+</template>
+
+<script>
+import { getPaymentConfigs, addTypeRoute, updateTypeRoute } from "./api";
+import cleanDeep from 'clean-deep'
+const validSale = (rule, value, callback) => {
+  if (value != 0 && typeof value === 'string') {
+    callback(new Error("请输入分润比例"));
+  } else if (value < 0) {
+    callback(new Error("分润比例不能小于0"));
+  } else if (value > 101) {
+    callback(new Error("分润比例不能大于100"));
+  } else {
+    callback();
+  }
+};
+export default {
+    props:['detail', 'branchList', 'close', 'getList', 'formActionTitle'],
+    data() {
+        return {
+            formLabelWidth: "100px",
+            form: {
+                id: null,
+                organId: null,
+                serviceList: [{
+                    feeType: 'SERVICE',
+                    organId: null,
+                    scale: null,
+                }],
+                sellList: [{
+                    feeType: 'SELL',
+                    organId: null,
+                    scale: null
+                }]
+            },
+            validSale: validSale,
+            rules: {
+                organId: [
+                    { required: true, message: "请选择所属分部", trigger: "change" }
+                ]
+            },
+            calcBranchList: [], // 可选比例分部
+        }
+    },
+    mounted() {
+        this.getPaymentBranchList()
+        let detail = this.detail
+        if(detail && this.formActionTitle == 'update') {
+            this.form = {
+                id: detail.id,
+                organId: detail.organId,
+                serviceList: [],
+                sellList: []
+            }
+            const routeScale = detail.typeRouteScale ? detail.typeRouteScale : []
+            routeScale.forEach(item => {
+                if(item.feeType === 'SERVICE') {
+                    this.form.serviceList.push({
+                        feeType: 'SERVICE',
+                        organId: item.organId,
+                        scale: item.scale,
+                    })
+                } else if(item.feeType === 'SELL') {
+                    this.form.sellList.push({
+                        feeType: 'SELL',
+                        organId: item.organId,
+                        scale: item.scale,
+                    })
+                }
+            })
+        }
+    },
+    methods: {
+        onChargeSubmit(formName) {
+            this.$refs[formName].validate(valid => {
+                const form = this.form
+                let serviceCount = 0
+                form.serviceList.forEach(item => {
+                    serviceCount += item.scale
+                })
+                if(Number(serviceCount.toFixed(5)) !== 100) {
+                    this.$message.error('服务收入分润比例总和必须为100')
+                    return
+                }
+                let sellCount = 0
+                form.sellList.forEach(item => {
+                    sellCount += item.scale
+                })
+                if(Number(sellCount.toFixed(5)) !== 100) {
+                    this.$message.error('销售收入分润比例总和必须为100')
+                    return
+                }
+                if (valid) {
+                    const params = {
+                        id: form.id,
+                        organId: form.organId,
+                        typeRouteScale: JSON.stringify((form.serviceList).concat(form.sellList))
+                    }
+                    console.log(params)
+                    if (this.formActionTitle == "create") {
+                        addTypeRoute(cleanDeep(params)).then(res => {
+                            this.messageTips("添加", res);
+                        });
+                    } else if (this.formActionTitle == "update") {
+                        updateTypeRoute(cleanDeep(params)).then(res => {
+                            this.messageTips("修改", res);
+                        });
+                    }
+                } else {
+                    return;
+                }
+            });
+        },
+        messageTips(title, res) {
+            if (res.code == 200) {
+                this.$message.success(title + "成功");
+                this.chargeStatus = false;
+                this.close()
+                this.getList();
+            } else {
+                this.$message.error(res.msg);
+            }
+        },
+        async getPaymentBranchList() {
+            await getPaymentConfigs(cleanDeep({ payType: 'ADAPAY' })).then(res => {
+                if (res.code == 200 && res.data) {
+                    res.data.forEach(item => {
+                        this.calcBranchList.push({
+                            label: item.organName,
+                            value: item.organId,
+                            payType: item.payType
+                        });
+                    });
+                }
+            });
+        },
+        onAddDomain(type) { // 添加
+            const tempObj = {
+                organId: null,
+                scale: null
+            }
+            if(type === 'SERVICE') {
+                tempObj['feeType'] = 'SERVICE'
+                this.form.serviceList.push(tempObj)
+            } else if(type === 'SELL') {
+                tempObj['feeType'] = 'SELL'
+                this.form.sellList.push(tempObj)
+            }
+            console.log(tempObj)
+
+        },
+        onRemoveDomain(type, item) { // 删除
+            let form = this.form
+            if(type === 'SERVICE') {
+                const index = form.serviceList.indexOf(item)
+                if (index !== -1) {
+                    form.serviceList.splice(index, 1)
+                }
+            } else if(type === 'SELL') {
+                const index = form.sellList.indexOf(item)
+                if (index !== -1) {
+                    form.sellList.splice(index, 1)
+                }
+            }
+        }
+    }
+}
+</script>
+
+<style lang="less" scoped>
+.dialog-footer{
+    display: block;
+    text-align: right;
+    margin-top: 20px;
+  }
+</style>

src/views/chargeManager/three.vue

@@ -44,61 +44,14 @@
     <el-dialog
       :title="formTitle[formActionTitle]"
       :visible.sync="chargeStatus"
-      @close="onFormClose('ruleForm')"
+      v-if="chargeStatus"
       width="700px"
     >
-      <el-form :model="form" :rules="rules" ref="ruleForm">
-        <el-form-item label="所属分部" prop="id" :label-width="formLabelWidth">
-          <el-select @change="onChange" v-model.trim="form.id" :disabled="formActionTitle === 'update'" placeholder="请选择所属分部">
-            <el-option
-              v-for="(item, index) in calcBranchList"
-              :key="index"
-              :label="item.label"
-              :value="item.value"
-            ></el-option>
-          </el-select>
-        </el-form-item>
-        <el-row :gutter="10" v-for="(domain, index) in form.typeRouteScale" :key="index">
-          <el-col :span="12">
-            <el-form-item :label-width="formLabelWidth" label="收费方式" :prop="'typeRouteScale.' + index + '.feeType'" :rules="[
-              { required: true, message: '请选择收费方式', trigger: 'change' },
-            ]">
-              <el-select
-                v-model.trim="domain.feeType"
-                placeholder="请选择收费方式"
-                style="width: 100% !important;"
-                disabled
-              >
-                <el-option value="SERVICE" label="服务收入"></el-option>
-                <el-option value="SELL" label="销售收入"></el-option>
-              </el-select>
-            </el-form-item>
-          </el-col>
-          <el-col :span="12">
-            <el-form-item :prop="'typeRouteScale.' + index + '.organId'" :rules="[
-              { required: true, message: '请选择分润分部', trigger: 'change' },
-            ]">
-              <el-select
-                v-model.trim="domain.organId"
-                placeholder="请选择分润分部"
-                clearable
-              >
-                <el-option
-                  v-for="(item, index) in branchList"
-                  :key="index"
-                  :label="item.label"
-                  :value="item.value"
-                  :disabled="item.disabled"
-                ></el-option>
-              </el-select>
-            </el-form-item>
-          </el-col>
-        </el-row>
-      </el-form>
-      <span slot="footer" class="dialog-footer">
-        <el-button @click="chargeStatus = false">取 消</el-button>
-        <el-button @click="onChargeSubmit('ruleForm')" type="primary">确 定</el-button>
-      </span>
+      <share-model :detail.sync="rowDetail"
+              :branchList="branchList"
+              :formActionTitle="formActionTitle"
+              :close="onFormClose"
+              :getList="getList" />
     </el-dialog>
   </div>
 </template>
@@ -107,12 +60,12 @@ import pagination from "@/components/Pagination/index";
 import {
   paymentConfigQueryPage
 } from "@/api/systemManage";
-import { getPaymentConfigs, addTypeRoute, updateTypeRoute, delTypeRoute } from "./api";
+import { delTypeRoute } from "./api";
 import { branchQueryPage } from "@/api/specialSetting";
-import cleanDeep from 'clean-deep'
+import ShareModel from './share-model'
 export default {
   name: "chargeProfitManager",
-  components: { pagination },
+  components: { pagination, ShareModel },
   data() {
     return {
       tableList: [],
@@ -125,28 +78,12 @@ export default {
       },
       chargeStatus: false,
       branchList: [], // 分部列表
-      calcBranchList: [], // 可选比例分部
       formActionTitle: "create",
-      formLabelWidth: "100px",
       formTitle: {
         create: "添加分润",
         update: "修改分润"
       },
-      form: {
-        id: null,
-        typeRouteScale: [{
-          feeType: 'SERVICE',
-          organId: null
-        }, {
-          feeType: 'SELL',
-          organId: null
-        }]
-      },
-      rules: {
-        id: [
-          { required: true, message: "请选择所属分部", trigger: "change" }
-        ]
-      },
+      rowDetail: {}
     };
   },
   mounted() {
@@ -154,28 +91,9 @@ export default {
     this.getRoleList()
   },
   methods: {
-    onChargeSubmit(formName) {
-      this.$refs[formName].validate(valid => {
-        let params = JSON.parse(JSON.stringify(this.form));
-        if (valid) {
-          params.typeRouteScale = JSON.stringify(params.typeRouteScale)
-          if (this.formActionTitle == "create") {
-            addTypeRoute(params).then(res => {
-              this.messageTips("添加", res);
-            });
-          } else if (this.formActionTitle == "update") {
-            updateTypeRoute(params).then(res => {
-              this.messageTips("修改", res);
-            });
-          }
-        } else {
-          return;
-        }
-      });
-    },
     getOrganToStr(id) {
       let name = null
-      this.calcBranchList.forEach(item => {
+      this.branchList.forEach(item => {
         if(item.value == id) {
           name = item.label
         }
@@ -189,29 +107,6 @@ export default {
       }
       return template[type]
     },
-    messageTips(title, res) {
-      if (res.code == 200) {
-        this.$message.success(title + "成功");
-        this.chargeStatus = false;
-        this.getList();
-      } else {
-        this.$message.error(res.msg);
-      }
-    },
-    onChange() {
-      let form = this.form
-      let tempInfo = {}
-      this.calcBranchList.forEach(item => {
-        if(item.value == form.id) {
-          tempInfo = item
-        }
-      })
-
-      if(!tempInfo.value) {
-        return
-      }
-      this.getRoleList(tempInfo.payType)
-    },
     getList() {
       let params = {
         hasTypeRoute: 1
@@ -231,27 +126,17 @@ export default {
       });
     },
     async getRoleList(val) {
-      await getPaymentConfigs(cleanDeep({ payType: val })).then(res => {
-        if (res.code == 200 && res.data) {
-          if(val) {
-            this.branchList = []
-          } else {
-            this.calcBranchList = []
-          }
-          res.data.forEach(item => {
-            if(val) {
-               this.branchList.push({
-                label: item.organName,
-                value: item.id,
-                payType: item.payType
-              });
-            } else {
-              this.calcBranchList.push({
-                label: item.organName,
-                value: item.id,
-                payType: item.payType
-              });
-            }
+      await branchQueryPage({
+        // 获取分部
+        delFlag: 0,
+        rows: 9999
+      }).then(res => {
+        if (res.code == 200 && res.data && res.data.rows) {
+          res.data.rows.forEach(item => {
+            this.branchList.push({
+              label: item.name,
+              value: item.id
+            });
           });
         }
       });
@@ -261,13 +146,7 @@ export default {
       this.chargeStatus = true;
       // 修改的时候
       if (type == "update") {
-        this.getRoleList(data.payType)
-        this.$nextTick(() => {
-          this.form = {
-            id: data.id,
-            typeRouteScale: data.typeRouteScale ? JSON.parse(JSON.stringify(data.typeRouteScale)) : []
-          }
-        })
+        this.rowDetail = data
       }
     },
     chargeDel(row) {
@@ -286,8 +165,8 @@ export default {
         .catch();
     },
     onFormClose(formName) {
-      this.branchList = []
-      this.$refs[formName].resetFields();
+      this.chargeStatus = false
+      // this.$refs[formName].resetFields();
     }
   }
 };
@@ -325,33 +204,4 @@ export default {
     margin-top: -21px;
   }
 }
-
-.moreRuleIn {
-  .el-form-item {
-    display: inline-block;
-    &:first-child {
-      /deep/.el-form-item__content {
-        margin-left: 100px !important;
-      }
-    }
-    /deep/.el-form-item__content {
-      margin-left: 0 !important;
-    }
-  }
-
-  .setWidth {
-    /deep/.el-form-item__content {
-      width: 250px;
-    }
-  }
-  /deep/.el-input-group__append {
-    padding: 0 8px;
-  }
-}
-.min,
-.max {
-  display: inline-block;
-  width: 250px;
-  text-align: center;
-}
 </style>