上传

src/views/Finance/Commission/Comp/DialogPlan.vue

@@ -27,6 +27,20 @@
           </el-form-item>
         </el-col>
       </el-row>
+
+      <el-card class="mb-18px" shadow="never" :body-style="{ padding: '10px' }">
+        <div v-if="formData.percentageType == 1">
+          <p class="text-red-500">阶梯结算说明：</p>
+          <p>若设置 0档、1000档、2000档</p>
+          <p>金额为1500，则未满1000的部分按照0档结算提成，1000-1500的部分按照1000档结算</p>
+        </div>
+        <div v-else-if="formData.percentageType == 2">
+          <p class="text-red-500">阶梯结算说明：</p>
+          <p>若设置 0档、1000档、2000档</p>
+          <p>金额为1500，则全部按照1000档结算</p>
+        </div>
+      </el-card>
+
       <el-button type="primary" class="mb-10px" plain @click="handleAddRules">
         添加提成档位
       </el-button>
@@ -38,7 +52,12 @@
           v-for="(item, index) in formData.rules"
           :key="index"
         >
-          <el-select v-model="item.ruleParam1" style="width: 100px">
+          <el-select
+            v-model="item.ruleParam1"
+            style="width: 100px"
+            :disabled="index > 0"
+            @change="planChanged('ruleParam1', false)"
+          >
             <el-option
               v-for="it in opts.percentage_param1"
               :key="it.value"
@@ -46,7 +65,13 @@
               :value="it.value"
             />
           </el-select>
-          <el-select class="ml-5px" v-model="item.ruleParam2" style="width: 100px">
+          <el-select
+            class="ml-5px"
+            v-model="item.ruleParam2"
+            style="width: 100px"
+            :disabled="index > 0"
+            @change="planChanged('ruleParam2', false)"
+          >
             <el-option
               v-for="it in opts.percentage_param2"
               :key="it.value"
@@ -85,7 +110,13 @@
           </div>
           <div v-else class="inline-flex items-center">
             <span class="ml-5px">取</span>
-            <el-select class="ml-5px" v-model="item.ruleParam5" style="width: 100px">
+            <el-select
+              class="ml-5px"
+              v-model="item.ruleParam5"
+              style="width: 100px"
+              :disabled="formData.percentageType == 1"
+              @change="planChanged('ruleParam5')"
+            >
               <el-option
                 v-for="it in opts.percentage_param5"
                 :key="it.value"
@@ -202,7 +233,7 @@ const message = useMessage() // 消息弹窗
 const { t } = useI18n() // 国际化
 
 const dialogVisible = ref(false) // 弹窗的是否展示
-const dialogTitle = ref('工资条设置')
+const dialogTitle = ref('提成方案')
 const formLoading = ref(false) // 表单的加载中：1）修改时的数据加载；2）提交的按钮禁用
 
 const formData = ref({})
@@ -244,9 +275,15 @@ defineExpose({ open }) // 提供 open 方法，用于打开弹窗
 
 /** 重置表单 */
 const resetForm = () => {
+  opts.value = {
+    percentage_param1: [],
+    percentage_param2: [],
+    percentage_param4: [],
+    percentage_param5: []
+  }
   formData.value = {
     percentageName: undefined,
-    percentageType: 1,
+    percentageType: 2,
     rules: [
       {
         ruleParam1: '2',
@@ -306,6 +343,24 @@ const submitForm = async () => {
 function handleRemove(index) {
   formData.value.rules.splice(index, 1)
 }
+
+function planChanged(paramName, editble = true) {
+  const defaultRule = formData.value.rules[0]
+  formData.value.rules.forEach((it, index) => {
+    if (formData.value.percentageType == 2) {
+      if (!editble) {
+        it[paramName] = defaultRule[paramName]
+      }
+    } else {
+      if (index > 0) {
+        it[paramName] = defaultRule[paramName]
+      }
+      if (paramName == 'ruleParam2') {
+        it['ruleParam5'] = defaultRule[paramName]
+      }
+    }
+  })
+}
 </script>
 
 <style lang="scss" scoped></style>