clientManageSystem/src/views/parameterConfig/index.vue

<template>
    <div class="main_container">
        <div class="page_item public_seas_top">
            <!-- 顶部公海设置 -->
            <div class="page_search public_seas">
                <div class="search_content">
                    <div class="content_left">
                        <div class="grade_title">公海设置</div>
                    </div>
                    <div class="content_right">
                        <el-button v-if="!isCurrentEdit" class="button_border" @click="HandleEditOrSave('edit')">
                            <img :src="editIcon" alt="">编辑
                        </el-button>
                        <template v-else>
                            <el-button  class="button_refresh" @click="HandleEditOrSave('cancel')">
                                <img :src="closeIcon" alt=""> 取消
                            </el-button>
                            <el-button class="button_background" @click="HandleEditOrSave('save')">
                                <img :src="saveIcon" alt=""> 保存
                            </el-button>
                        </template>
                    </div>
                </div>
            </div>
        </div>

        <div class="page_item public_seas_bottom">
            <!-- 公海设置的具体表单内容 -->
            <div class="high_seas_config">
                <div class="config_item">
                    <span class="label_text">客户持有上限：</span>
                    <el-input :disabled="!isCurrentEdit" type="number" v-model="publicSeasConfig.holdLimit"  />
                    <span>个</span>
                </div>
                <div class="config_item">
                    <span class="label_text">每日手动退回公海上限：</span>
                    <el-input  :disabled="!isCurrentEdit" type="number"  v-model="publicSeasConfig.dayBackLimit"  />
                    <span>个</span>
                </div>
                <div class="config_item">
                    <span class="label_text">无跟进自动退回公海天数：</span>
                    <el-input :disabled="!isCurrentEdit" type="number" v-model="publicSeasConfig.autoBackLimitDay"  />
                    <span>天</span>
                </div>
            </div>
        </div>

        <div class="page_jg_20" style="flex-shrink: 0 !important;"></div>

        <div class="page_item end_item">
            <div class="page_search field_setting" >
                <div class="search_content">
                    <div class="content_left">
                        <div class="grade_title">字段设置</div>
                    </div>
                </div>
            </div>

            <!-- 字段设置区域 -->
            <div class="field_settings_area">
                <SettingCard cardTitle="地区管理" :cardItems="regionList"
                    :middleColumnItm="{name:'name',label:'省份'}"
                    :customSelectList="regionSelectList"
                    :defaultTableData="regionList" 
                    @openDialog="HandleRegionDialogOpen"
                    @deleteSuccess="GetPublicSeasConfig"
                    @addOrUpdateSuccess="GetPublicSeasConfig"/>
                <SettingCard cardTitle="学段管理" :cardItems="stageList"
                    :middleColumnItm="{name:'title',label:'学段名称'}"
                    :defaultTableData="stageList"
                    @deleteSuccess="GetPublicSeasConfig"
                    @addOrUpdateSuccess="GetPublicSeasConfig"/>
                <SettingCard cardTitle="产品管理" :cardItems="productList"
                    :middleColumnItm="{name:'title',label:'产品名称'}"
                    :defaultTableData="productList"
                    @deleteSuccess="GetPublicSeasConfig"
                    @addOrUpdateSuccess="GetPublicSeasConfig"/>
                <SettingCard cardTitle="跟进状态" :cardItems="statusList" 
                    :middleColumnItm="{name:'title',label:'跟进状态'}"
                    :defaultTableData="statusList"
                    @deleteSuccess="GetPublicSeasConfig"
                    @addOrUpdateSuccess="GetPublicSeasConfig"/>
                <SettingCard cardTitle="职务管理" :cardItems="jobList"
                    :middleColumnItm="{name:'title',label:'职务名称'}"
                    :defaultTableData="jobList"
                    @deleteSuccess="GetPublicSeasConfig"
                    @addOrUpdateSuccess="GetPublicSeasConfig"/>
            </div>
        </div>
    </div>
</template>


<script setup lang="ts">
import { ElMessage } from 'element-plus';
import { onMounted, reactive, ref } from 'vue';
import SettingCard from '@/components/settingCard/SettingCard.vue';

import {
    getParameterConfigApi,
    updatePublicSeasConfigApi,
    getFieldListExcludeAreaApi,
    getProvinceConfigListApi,
    getUnusedProvinceListApi,
} from '@/api/parameterConfig'

import editIcon from '@/assets/icon/edit_light.png'
import closeIcon from '@/assets/icon/delete.svg'
import saveIcon from '@/assets/icon/save_icon.png'

/** 1.  参数配置列表整体数据  */
// 获取公海设置
const GetPublicSeasConfig = async ()=>{
    let res = await getParameterConfigApi()
    if(res?.code == 200){
        const {
            stageData, productData, 
            positionData, followStatusData, regionData,
            holdTopCount, dayBackTopCount, backPublicDayCount, id
        } = res.data

        // 公海配置
        publicSeasConfig.holdLimit = holdTopCount
        publicSeasConfig.dayBackLimit = dayBackTopCount
        publicSeasConfig.autoBackLimitDay = backPublicDayCount
        publicSeasConfig.id = id

        stageList.value = stageData
        productList.value = productData
        statusList.value = followStatusData
        jobList.value = positionData
        regionList.value = regionData
    }
}



/** 2. 公海设置 */
const publicSeasConfig = reactive({
    holdLimit:0,    //客户持有上限
    dayBackLimit:0,  //每日退回上限
    autoBackLimitDay:0,  //无跟进自动退回天数
    id:'', //唯一id
})
const isCurrentEdit = ref(false) //公海设置当前的编辑状态
// 公海设置 编辑/保存 状态切换
const HandleEditOrSave = async (type)=>{
    switch(type){
        case 'edit':
            isCurrentEdit.value = true
            break
        case 'save':{
            let params = {
                holdTopCount: publicSeasConfig.holdLimit,
                dayBackTopCount: publicSeasConfig.dayBackLimit,
                backPublicDayCount: publicSeasConfig.autoBackLimitDay,
                id:publicSeasConfig.id
            }
            let res = await updatePublicSeasConfigApi(params)
            if(res?.code == 200){
                ElMessage.success(res?.msg)
                isCurrentEdit.value = false
                await GetPublicSeasConfig()
            }
            break
        }
        case 'cancel':
            isCurrentEdit.value = false
            break
    }
}


/** 3. 地区管理 */
const regionList = ref([]);
// 省份下拉配置
const regionSelectList = ref([])
// 获取省份下拉列表
const GetProvinceSelectList = async ()=>{
    let res = await getUnusedProvinceListApi()
    if(res.code == 200){
        regionSelectList.value = res.data.map(item=>{
            return {
                label:item.name,
                value:item.id
            }
        })
    }
}
// 执行地区弹窗打开后的操作
const HandleRegionDialogOpen = async ()=>{
    await GetProvinceSelectList()
}




// 字段设置

const stageList = ref([]);
const productList = ref([]);
const statusList = ref([]);
const jobList = ref([]);




// 获取地区管理列表配置
const GetProvinceConfigList = async ()=>{
    let res = await getProvinceConfigListApi()
}

// 获取 学段管理 配置列表
const GetPhaseOfStudyingList = async ()=>{
    let res = await getFieldListExcludeAreaApi(0)
}

// 获取 产品管理 配置列表 
const GetProductManageConfigList = async ()=>{
    let res = await getFieldListExcludeAreaApi(1)
}

// 获取 跟进状态 配置列表 
const GetFollowStatusList = async ()=>{
    let res = await getFieldListExcludeAreaApi(3)
}

// 获取 职务管理 配置列表
const GetPositionManageList = async ()=>{
    let res = await getFieldListExcludeAreaApi(2)
}



onMounted( async()=>{
    GetPublicSeasConfig()

})
</script>


<style lang="scss" scoped>
.public_seas_top{
    padding:12px 20px;
    border-bottom: solid #E9E9E9 1px;
    border-radius: 10px 10px 0 0;
    .content_right{
        .el-button{
            min-width: 72px !important ;
        }
    }
}
.public_seas_bottom{
    border-radius:  0 0 10px 10px;
}
.page_search{
    &.field_setting{
        margin-bottom: 16px;
    }
}


/* 公海配置行 */
.high_seas_config {
    display: flex;
    flex-wrap: wrap;
    gap:20px 100px;

    font-size: 14px;
    color: #333;

    .config_item {
        display: flex;
        align-items: center;
        gap:10px;
        .label_text {
            flex-shrink: 0;
        }
        .el-input{
            width: 80px;
        }
    }
}

// 字段设置区域
.field_settings_area {
    display: flex;
    flex-direction: column;
    gap:16px;
}
</style>