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: 'id' }"
                  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 width="160px">
            <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="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 label="单笔" :value="1" />
                <el-option label="月总" :value="2" />
              </el-select>
              <el-select class="ml-5px" v-model="item.ruleParam2" style="width: 100px">
                <el-option label="成交额" :value="1" />
                <el-option label="毛利" :value="2" />
              </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 label="按比例" :value="1" />
                <el-option label="按固定金额" :value="2" />
              </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 label="按成交额" :value="1" />
                  <el-option label="按底价" :value="2" />
                  <el-option label="按毛利" :value="3" />
                </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 open = async (type, id) => {
  dialogVisible.value = true
  dialogTitle.value = type == 'create' ? '新增班型' : '修改班型'
  formType.value = type
  resetForm()
  // 修改时，设置数据
  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>