zhjwxt/admin/src/app/views/xsyj/xsyj.vue

<template>
  <div class="main-container">
    <el-card class="box-card !border-none" shadow="never" v-loading="loading">
      <div class="flex justify-between items-center">
        <span class="text-lg">{{ pageName }}</span>
        <el-button type="primary" @click="addStage"> 新增阶段 </el-button>
      </div>
    </el-card>

    <el-card class="box-card !border-none" shadow="never">
      <div
        class="flex items-center justify-between p-[10px] table-item-border bg"
      >
        <span class="text-base w-[230px]">阶段名称</span>
        <span class="text-base w-[110px] text-center">底薪</span>
      </div>

      <el-collapse v-model="activeNames" accordion>
        <el-collapse-item
          v-for="(stage, index) in stages"
          :key="stage.id"
          :name="stage.id"
        >
          <template #title>
            <div class="collapse-title">
              <span class="title-name">{{ stage.name }}</span>
              <span class="arrow">{{ stage.price }} 元</span>
              <!-- <span class="arrow">&gt;</span> -->
            </div>
          </template>

          <el-form label-width="100px" style="margin-bottom: 10px">
            <el-form-item label="阶段名称">
              <el-input v-model="stage.name" placeholder="请输入阶段名称" />
            </el-form-item>
          </el-form>

          <el-form label-width="100px" style="margin-bottom: 10px">
            <el-form-item label="阶段底薪">
              <el-input v-model="stage.price" placeholder="请输入阶段底薪" />
            </el-form-item>
          </el-form>

          <el-button type="success" size="small" @click="addRule(stage)"
            >新增规则</el-button
          >

          <el-table :data="stage.rules" border style="margin-top: 10px">
            <el-table-column prop="renewal_standard_min" label="续费上限">
              <template #default="{ row }">
                <el-input
                  v-model="row.renewal_standard_min"
                  placeholder="请输入续费上限"
                />
              </template>
            </el-table-column>

            <el-table-column prop="renewal_standard_max" label="续费下限">
              <template #default="{ row }">
                <el-input
                  v-model="row.renewal_standard_max"
                  placeholder="请输入续费下限"
                />
              </template>
            </el-table-column>

            <el-table-column prop="renewal_commission" label="续费提成">
              <template #default="{ row }">
                <el-input v-model="row.renewal_commission" placeholder="%" />
              </template>
            </el-table-column>

            <el-table-column prop="new_count_min" label="新单成交数上限">
              <template #default="{ row }">
                <el-input v-model="row.new_count_min" />
              </template>
            </el-table-column>

            <el-table-column prop="new_count_max" label="新单成交数下限">
              <template #default="{ row }">
                <el-input v-model="row.new_count_max" />
              </template>
            </el-table-column>

            <el-table-column prop="new_move_5" label="新招（5+1）x3">
              <template #default="{ row }">
                <el-input v-model="row.new_move_5" />
              </template>
            </el-table-column>
            <el-table-column prop="new_move_7" label="新招（7+1）x3">
              <template #default="{ row }">
                <el-input v-model="row.new_move_7" />
              </template>
            </el-table-column>
            <el-table-column label="操作" width="100">
              <template #default="{ $index }">
                <el-button
                  type="danger"
                  size="small"
                  @click="removeRule(stage, $index)"
                  >删除</el-button
                >
              </template>
            </el-table-column>
          </el-table>

          <el-button
            type="danger"
            size="small"
            style="margin-top: 10px"
            @click="removeStage(index)"
            >删除该阶段</el-button
          >
        </el-collapse-item>
      </el-collapse>

      <div style="text-align: right; margin-top: 20px">
        <el-button type="primary" @click="onSave">提交保存</el-button>
      </div>
    </el-card>
  </div>
</template>

<script lang="ts" setup>
import { xsyjConfig, getXsyjConfig } from '@/app/api/sys'
import { reactive, ref } from 'vue'
import { ElMessage } from 'element-plus'
import { useRoute } from 'vue-router'
const route = useRoute()
const pageName = route.meta.title

const loading = ref(true)
const stages = ref([])
const activeNames = ref(null)

function addStage() {
  const newStage = {
    name: '默认阶段',
    price: 0,
    rules: [
      {
        renewal_standard_min: '',
        renewal_standard_max: '',
        renewal_commission: '',
        new_count_min: '',
        new_count_max: '',
        new_move_5: '',
        new_move_7: '',
      },
    ],
  }
  stages.value.push(newStage)
  activeNames.value = newStage.name
}

function removeStage(index) {
  stages.value.splice(index, 1)
}

function addRule(stage) {
  stage.rules.push({
    renewal_standard_min: '',
    renewal_standard_max: '',
    renewal_commission: '',
    new_count_min: '',
    new_count_max: '',
    new_move_5: '',
    new_move_7: '',
  })
}

function removeRule(stage, ruleIndex) {
  if (stage.rules.length === 1) {
    ElMessage.warning('至少保留一条规则')
    return
  }
  stage.rules.splice(ruleIndex, 1)
}

const setFormData = async () => {
  const data = await (await getXsyjConfig()).data
  stages.value = data
  loading.value = false
}

setFormData()

const onSave = async () => {
  xsyjConfig(stages.value)
    .then(() => {
      loading.value = true
      setFormData()
    })
    .catch(() => {
      loading.value = false
    })
}
</script>

<style lang="scss" scoped>
.collapse-title {
  display: flex;
  align-items: center;
  justify-content: space-between;
  width: 100%;
  font-size: 14px;
  font-weight: 500;
  padding-right: 10px;
  color: #333;
  padding: 10px;
}

.title-name {
  width: 230px;
}

.title-salary {
  width: 110px;
  text-align: center;
  color: #7438d5;
}

.arrow {
  margin-left: auto;
  color: #999;
  font-size: 14px;
}
</style>