ss-crm-manage-web/src/views/SchoolManagement/Class/Comp/DialogClass.vue

<template>
  <Dialog :title="dialogTitle" v-model="dialogVisible" width="1000px">
    <el-tabs v-model="currentTab">
      <el-tab-pane label="基础信息" name="base">
        <el-form
          ref="formRef"
          v-loading="formLoading"
          :model="formData"
          :rules="formRules"
          label-width="90px"
        >
          <el-row :gutter="20">
            <el-col :span="12" :offset="0">
              <el-form-item label="驾校/场地" prop="schPlace">
                <el-cascader
                  :options="props.schoolOption"
                  v-model="formData.schPlace"
                  filterable
                  :props="{ value: 'value' }"
                  show-all-levels
                  style="width: 100%"
                />
              </el-form-item>
            </el-col>
            <el-col :span="12" :offset="0">
              <el-form-item label="班型名称" prop="typeName">
                <el-input v-model="formData.typeName" placeholder="请输入班型" />
              </el-form-item>
            </el-col>
          </el-row>
          <el-row :gutter="20">
            <el-col :span="12" :offset="0">
              <el-form-item label="驾照类型" prop="licenseType">
                <el-select v-model="formData.licenseType" placeholder="选择驾照类型">
                  <el-option
                    v-for="item in getDictOptions(DICT_TYPE.LINCENSE_TYPE)"
                    :key="item.value"
                    :label="item.label"
                    :value="item.value"
                  />
                </el-select>
              </el-form-item>
            </el-col>
            <el-col :span="12" :offset="0">
              <el-form-item label="状态" prop="currentPrice">
                <el-radio-group v-model="formData.status">
                  <el-radio :label="0">启用</el-radio>
                  <el-radio :label="1">停用</el-radio>
                </el-radio-group>
              </el-form-item>
            </el-col>
          </el-row>
          <el-row :gutter="20">
            <el-form-item label="备注" prop="remark">
              <Editor v-model:modelValue="formData.remark" />
            </el-form-item>
          </el-row>
        </el-form>
      </el-tab-pane>
      <el-tab-pane label="报价信息" name="price">
        <el-button type="primary" @click="handleAddPrice" class="mb-10px">新增报价</el-button>
        <el-table :data="formData.quotations">
          <el-table-column>
            <template #header> <Tooltip message="市场价，给客户的报价" />指导价 </template>
            <template #default="{ row }">
              <el-input v-if="row.edit" v-model="row.guidingPrice" type="number" :min="0" />
              <span v-else>{{ row.guidingPrice }}</span>
            </template>
          </el-table-column>
          <!-- <el-table-column width="160px">
            <template #header> <Tooltip message="员工底价，用于核算毛利及提成" />底价 </template>
            <template #default="{ row }">
              <el-input v-if="row.edit" v-model="row.minPrice" type="number" :min="0" />
              <span v-else>{{ row.minPrice }}</span>
            </template>
          </el-table-column>
          <el-table-column width="160px">
            <template #header> <Tooltip message="公司采购价，用于计算公司利润" />成本价 </template>
            <template #default="{ row }">
              <el-input v-if="row.edit" v-model="row.costPrice" type="number" :min="0" />
              <span v-else>{{ row.costPrice }}</span>
            </template>
          </el-table-column> -->
          <el-table-column label="生效日期">
            <template #default="{ row }">
              <el-date-picker
                v-if="row.edit"
                v-model="row.validTime"
                type="date"
                format="YYYY-MM-DD"
                value-format="YYYY-MM-DD"
                placeholder="选择日期时间"
              />
              <span v-else>{{ row.validTime }}</span>
            </template>
          </el-table-column>
          <el-table-column label="报价日期" width="180px" prop="quotationTime" />
          <el-table-column label="操作" width="80px">
            <template #default="{ row, $index }">
              <el-button
                type="danger"
                text
                style="padding: 0"
                @click="handleDeletePrice(row, $index)"
                >删除</el-button
              >
            </template>
          </el-table-column>
        </el-table>
      </el-tab-pane>
      <el-tab-pane label="公司利润" name="profitCompany">
        <el-form
          :model="profitCompanyForm"
          ref="profitCompanyRef"
          :rules="profitCompanyRules"
          label-width="90px"
        >
          <el-form-item label="利润模式：">
            <el-radio-group v-model="profitCompanyForm.profitType">
              <el-radio :label="1">比例模式</el-radio>
              <el-radio :label="2">固定模式</el-radio>
            </el-radio-group>
          </el-form-item>
          <el-form-item label="计算规则：">
            <div class="flex items-center" v-if="profitCompanyForm.profitType == 1">
              <span>公司利润 = （ 成交价 </span>
              <el-select
                v-model="profitCompanyForm.isPlus"
                size="small"
                placeholder="加/减"
                class="ml-10px mr-10px"
                style="width: 70px"
              >
                <el-option label="+" :value="1" />
                <el-option label="-" :value="2" />
              </el-select>
              <el-input-number
                v-model="profitCompanyForm.bianliang"
                size="small"
                placeholder="金额"
                :min="0"
                style="width: 80px"
                :controls="false"
              />
              <span class="ml-10px mr-10px"> ） 乘以 </span>
              <el-input-number
                v-model="profitCompanyForm.bili"
                size="small"
                placeholder="比例"
                :min="0"
                :max="1"
                :controls="false"
              />
            </div>
            <div v-else-if="profitCompanyForm.profitType == 2">
              <el-button
                type="primary"
                size="small"
                @click="profitCompanyForm.dangwei.push({ dangweizhi: undefined, lirun: undefined })"
                >添加利润档位</el-button
              >
              <div
                class="flex items-center"
                v-for="(item, index) in profitCompanyForm.dangwei"
                :key="index"
              >
                <span>成交额满</span>
                <el-input-number
                  v-model="item.dangweizhi"
                  size="small"
                  placeholder="金额"
                  :min="0"
                  class="ml-10px mr-10px"
                  style="width: 80px"
                  :controls="false"
                />
                <span>，公司利润为</span>
                <el-input-number
                  v-model="item.lirun"
                  size="small"
                  placeholder="金额"
                  :min="0"
                  class="ml-10px"
                  style="width: 80px"
                  :controls="false"
                />
              </div>
            </div>
          </el-form-item>
        </el-form>
      </el-tab-pane>
      <el-tab-pane label="员工利润" name="profitEmployee">
        <el-form
          :model="profitEmployeeForm"
          ref="profitEmployeeRef"
          :rules="profitEmployeeRules"
          label-width="90px"
        >
          <el-form-item label="利润模式：">
            <el-radio-group v-model="profitEmployeeForm.profitType">
              <el-radio :label="1">比例模式</el-radio>
              <el-radio :label="2">固定模式</el-radio>
            </el-radio-group>
          </el-form-item>
          <el-form-item label="计算规则：">
            <div class="flex items-center" v-if="profitEmployeeForm.profitType == 1">
              <span>公司利润 = （ 成交价 </span>
              <el-select
                v-model="profitEmployeeForm.isPlus"
                size="small"
                placeholder="加/减"
                class="ml-10px mr-10px"
                style="width: 70px"
              >
                <el-option label="+" :value="1" />
                <el-option label="-" :value="2" />
              </el-select>
              <el-input-number
                v-model="profitEmployeeForm.bianliang"
                size="small"
                placeholder="金额"
                :min="0"
                style="width: 80px"
                :controls="false"
              />
              <span class="ml-10px mr-10px"> ） 乘以 </span>
              <el-input-number
                v-model="profitEmployeeForm.bili"
                size="small"
                placeholder="比例"
                :min="0"
                :max="1"
                :controls="false"
              />
            </div>
            <div v-else-if="profitEmployeeForm.profitType == 2">
              <el-button
                type="primary"
                size="small"
                @click="
                  profitEmployeeForm.dangwei.push({ dangweizhi: undefined, lirun: undefined })
                "
                >添加利润档位</el-button
              >
              <div
                class="flex items-center"
                v-for="(item, index) in profitEmployeeForm.dangwei"
                :key="index"
              >
                <span>成交额满</span>
                <el-input-number
                  v-model="item.dangweizhi"
                  size="small"
                  placeholder="金额"
                  :min="0"
                  class="ml-10px mr-10px"
                  style="width: 80px"
                  :controls="false"
                />
                <span>，公司利润为</span>
                <el-input-number
                  v-model="item.lirun"
                  size="small"
                  placeholder="金额"
                  :min="0"
                  class="ml-10px"
                  style="width: 80px"
                  :controls="false"
                />
              </div>
            </div>
          </el-form-item>
        </el-form>
      </el-tab-pane>
      <el-tab-pane v-if="false" label="提成结算" name="comission">
        <el-button v-if="!comissionShow" type="primary" @click="handleAddComission">
          新增提成结算规则
        </el-button>
        <el-form
          v-if="comissionShow"
          :model="comissionForm"
          ref="FormComission"
          class="mt-10px"
          label-width="80px"
          inline
        >
          <el-row :gutter="20">
            <el-col :span="12" :offset="0">
              <el-form-item label="生效日期" prop="validTime">
                <el-date-picker
                  v-model="comissionForm.validTime"
                  type="date"
                  format="YYYY-MM-DD"
                  value-format="YYYY-MM-DD"
                  placeholder="选择日期时间"
                />
              </el-form-item>
            </el-col>
            <el-col :span="12" :offset="0">
              <el-form-item label="结算方式">
                <el-radio-group v-model="comissionForm.percentageType">
                  <el-radio :label="1">
                    <Tooltip message="可配置多级，命中某档位后，按照档位分级结算" />阶梯结算
                  </el-radio>
                  <el-radio :label="2">
                    <Tooltip message="可配置多级，命中某档位后所有金额全部按照该档位结算" />常规结算
                  </el-radio>
                </el-radio-group>
              </el-form-item>
            </el-col>
          </el-row>
          <el-button type="primary" class="mb-10px" plain @click="handleAddRules"
            >添加提成档位</el-button
          >
          <el-row :gutter="20" class="mb-10px">
            <el-col
              :span="24"
              :offset="0"
              class="flex"
              v-for="(item, index) in comissionForm.rules"
              :key="index"
            >
              <el-select v-model="item.ruleParam1" style="width: 100px">
                <el-option
                  v-for="it in opts.percentage_param1"
                  :key="Number(it.value)"
                  :label="it.label"
                  :value="Number(it.value)"
                />
              </el-select>
              <el-select class="ml-5px" v-model="item.ruleParam2" style="width: 100px">
                <el-option
                  v-for="it in opts.percentage_param2"
                  :key="Number(it.value)"
                  :label="it.label"
                  :value="Number(it.value)"
                />
              </el-select>
              <span class="ml-5px">满</span>
              <el-input
                class="ml-5px"
                v-model="item.ruleParam3"
                placeholder="金额"
                type="number"
                :min="0"
                style="width: 100px"
              />
              <span class="ml-5px">元，</span>
              <el-select class="ml-5px" v-model="item.ruleParam4" style="width: 120px">
                <el-option
                  v-for="it in opts.percentage_param4"
                  :key="Number(it.value)"
                  :label="it.label"
                  :value="Number(it.value)"
                />
              </el-select>
              <div v-if="item.ruleParam4 == 2" class="inline-flex items-center">
                <el-input
                  class="ml-5px"
                  v-model="item.ruleParam7"
                  placeholder="金额"
                  type="number"
                  :min="0"
                  style="width: 100px"
                />
                <span class="ml-5px">元结算</span>
              </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-option
                    v-for="it in opts.percentage_param5"
                    :key="Number(it.value)"
                    :label="it.label"
                    :value="Number(it.value)"
                  />
                </el-select>
                <span class="ml-5px">结算</span>
                <el-input
                  class="ml-5px"
                  v-model="item.ruleParam6"
                  placeholder="比例"
                  type="number"
                  :min="1"
                  style="width: 100px"
                >
                  <template #suffix> % </template>
                </el-input>
              </div>
            </el-col>
          </el-row>
          <el-row :gutter="20" class="mb-10px">
            <el-col :span="24" :offset="0">
              <el-button @click="comissionShow = false">取消新增</el-button>
            </el-col>
          </el-row>
        </el-form>
        <el-divider>历史结算规则</el-divider>
        <el-table :data="formData.percentages" border>
          <el-table-column prop="validTime" label="生效时间" width="200px" />
          <el-table-column prop="percentageType" label="结算方式" width="120px" />
          <el-table-column label="结算规则">
            <template #default="{ row }">
              <div v-dompurify-html="row.ruleParam"></div>
            </template>
          </el-table-column>
        </el-table>
      </el-tab-pane>
    </el-tabs>
    <template #footer>
      <el-button :disabled="formLoading" type="primary" @click="submitForm">确 定</el-button>
      <el-button @click="dialogVisible = false">取 消</el-button>
    </template>
  </Dialog>
</template>
<script name="DialogClass" setup>
import * as ClassApi from '@/api/school/class'
import { formatDate } from '@/utils/formatTime'
import { DICT_TYPE, getDictOptions } from '@/utils/dict'

const { t } = useI18n() // 国际化
const message = useMessage() // 消息弹窗

const props = defineProps({
  schoolOption: {
    type: Array,
    default: () => []
  }
})

const dialogVisible = ref(false) // 弹窗的是否展示
const dialogTitle = ref('') // 弹窗的标题
const formLoading = ref(false) // 表单的加载中：1）修改时的数据加载；2）提交的按钮禁用
const formType = ref('') // 表单的类型：create - 新增；update - 修改
const formData = ref({
  schPlace: [],
  typeName: '',
  licenseType: '',
  status: 1,
  remark: '',
  quotations: [],
  percentages: []
})

const formRules = reactive({
  schPlace: { required: true, type: Array, message: '驾校场地不能为空', trigger: 'change' },
  typeName: { required: true, message: '班型名称不能为空', trigger: 'blur' },
  licenseType: { required: true, message: '驾照类型不能为空', trigger: 'change' }
})
const formRef = ref() // 表单 Ref
const currentTab = ref('base')

const profitCompanyForm = ref({
  profitType: 1,
  dangwei: []
})
const profitCompanyRules = {}
const profitCompanyRef = ref()

const profitEmployeeForm = ref({
  profitType: 1,
  dangwei: []
})
const profitEmployeeRules = {}
const profitEmployeeRef = ref()

const opts = ref({
  percentage_param1: [],
  percentage_param2: [],
  percentage_param4: [],
  percentage_param5: []
})

/** 打开弹窗 */
const open = async (type, id) => {
  dialogVisible.value = true
  dialogTitle.value = type == 'create' ? '新增班型' : '修改班型'
  formType.value = type
  resetForm()
  if (!opts.value.length) {
    const arr = await ClassApi.getCommissionParams()
    arr.map((item) => {
      opts.value[item.dictType].push(item)
    })
  }
  // 修改时，设置数据
  if (id) {
    formLoading.value = true
    try {
      formData.value = await ClassApi.getClassType(id)
      formData.value.schPlace = [formData.value.schoolId, formData.value.placeId]
    } finally {
      formLoading.value = false
    }
  }
}
defineExpose({ open }) // 提供 open 方法，用于打开弹窗

/** 提交表单 */
const emit = defineEmits(['success']) // 定义 success 事件，用于操作成功后的回调

/** 重置表单 */
const resetForm = () => {
  formData.value = {
    schPlace: [],
    typeName: '',
    licenseType: '',
    status: 0,
    remark: '',
    quotations: [],
    percentages: []
  }
  formRef.value?.resetFields()
}

function handleAddPrice() {
  formData.value.quotations.push({
    edit: true,
    guidingPrice: undefined,
    // minPrice: undefined,
    // costPrice: undefined,
    validTime: undefined,
    quotationTime: formatDate(new Date(), 'YYYY-MM-DD')
  })
}

function handleDeletePrice(row, index) {
  if (row.edit) {
    formData.value.quotations.splice(index, 1)
  }
  message.success('删除成功')
}

const comissionForm = ref({
  rules: []
})
const comissionShow = ref(false)

function handleAddComission() {
  comissionShow.value = true
  comissionForm.value = {
    validTime: formatDate(new Date(), 'YYYY-MM-DD'),
    percentageType: 1,
    rules: [
      {
        ruleParam1: 1,
        ruleParam2: 1,
        ruleParam3: 0,
        ruleParam4: 1,
        ruleParam5: 1,
        ruleParam6: 10
      }
    ]
  }
}

function handleAddRules() {
  comissionForm.value.rules.push({
    ruleParam1: 1,
    ruleParam2: 1,
    ruleParam3: 0,
    ruleParam4: 1,
    ruleParam5: 1,
    ruleParam6: 1
  })
}

async function submitForm() {
  // 校验表单
  if (!formRef.value) return
  const valid = await formRef.value.validate()
  if (!valid) return
  // 提交请求
  formLoading.value = true
  try {
    const data = { ...formData.value }
    data.schoolId = data.schPlace[0]
    data.placeId = data.schPlace[1]
    delete data.schPlace
    delete data.percentages
    data.percentages = { ...comissionForm.value }
    if (formType.value === 'create') {
      await ClassApi.createClassType(data)
      message.success(t('common.createSuccess'))
    } else {
      await ClassApi.updateClassType(data)
      message.success(t('common.updateSuccess'))
    }
    dialogVisible.value = false
    // 发送操作成功的事件
    emit('success')
  } finally {
    formLoading.value = false
    comissionShow.value = false
  }
}
</script>