clientManageSystem/src/views/parameterConfig/index.vue

<template>
    <div class="main_container">
        <div class="page_item end_item">
            <!-- 顶部公海设置 -->
            <div class="page_search">
                <div class="search_content">
                    <div class="content_left">
                        <div class="grade_title">公海设置</div>
                    </div>
                </div>
            </div>

            <!-- 公海设置的具体表单内容 -->
            <div class="high_seas_config">
                <div class="config_item">
                    <span class="label_text">客户持有上限：</span>
                    <el-input type="number" value="100"  />
                    <span>个</span>
                </div>
                <div class="config_item">
                    <span class="label_text">每日手动退回公海上限：</span>
                    <el-input type="number" value="15"  />
                    <span>个</span>
                </div>
                <div class="config_item">
                    <span class="label_text">无跟进自动退回公海天数：</span>
                    <el-input type="number" value="15" />
                    <span>天</span>
                </div>
            </div>


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

            <!-- 字段设置区域 -->
            <div class="field_settings_area">
                <SettingCard cardTitle="地区管理" :cardItems="region_list"
                    :middleColumnItm="{name:'province',label:'省份'}"
                    :defaultTableData="region_list"/>
                <SettingCard cardTitle="学段管理" :cardItems="stage_list"
                    :middleColumnItm="{name:'phaseOfStudyingName',label:'学段名称'}"
                    :defaultTableData="stage_list"/>
                <SettingCard cardTitle="产品管理" :cardItems="product_list"
                    :middleColumnItm="{name:'productName',label:'产品名称'}"
                    :defaultTableData="product_list"/>
                <SettingCard cardTitle="跟进状态" :cardItems="status_list" 
                    :middleColumnItm="{name:'followUpStatus',label:'跟进状态'}"
                    :defaultTableData="status_list"/>
                <SettingCard cardTitle="职务管理" :cardItems="job_list"
                    :middleColumnItm="{name:'positionName',label:'职务名称'}"
                    :defaultTableData="job_list"/>
            </div>
        </div>
    </div>
</template>


<script setup lang="ts">
import { ref } from 'vue';
import SettingCard from '@/components/settingCard/SettingCard.vue';

// 模拟图片中的数据
const region_list = ref([
    { province: '北京市',id:1 },
    { province: '上海市',id:2 },
    { province: '天津市',id:3 },
    { province: '广东', id:4 },
    { province: '辽宁', id:5 },
    { province: '河南', id:6 },
    { province: '河北', id:7 },
    { province: '湖南', id:8 },
    { province: '湖北', id:9 },
    { province: '云南', id:10 },
    { province: '福建', id:11 },
    { province: '海南', id:12 },
    { province: '四川', id:13 },
    { province: '初中', id:14 },
    { province: '初中', id:15 },
    { province: '初中', id:16 },
    { province: '初中', id:17 }
]);
const stage_list = ref([
    { phaseOfStudyingName: '幼儿园', id:1 },
    { phaseOfStudyingName: '小学', id:2 },
    { phaseOfStudyingName: '初中', id:3 },
    { phaseOfStudyingName: '高中', id:4 },
    { phaseOfStudyingName: '完中', id:5 },
    { phaseOfStudyingName: '九年一贯', id:6 },
    { phaseOfStudyingName: '十二年一贯', id:7 },
    { phaseOfStudyingName: '职高', id:8 },
    { phaseOfStudyingName: '大学', id:9 },
    { phaseOfStudyingName: '初中', id:10 }
]);
const product_list = ref([
    { productName: '大数据精准教学诊断平台', id:1 },
    { productName: '选择题智能判分', id:2 },
    { productName: '教学材料采集', id:3 },
    { productName: '教师校本研修', id:4},
    { productName: '学生校本课程学习', id:5 },
    { productName: '智能校本选课', id:6 },
    { productName: '教师专业发展', id:7 },
    { productName: '协同教研备课', id:8 },
    { productName: '校园信息发布', id:9 },
    { productName: '智能评教评学', id:10 },
    { productName: '智能考场编排', id:11 },
    { productName: '智能听课评课', id:12 },
    { productName: '基础数据管理', id:13 }
]);
const status_list = ref([
    { followUpStatus: '线索建立', id:1 },
    { followUpStatus: '需求调研', id:2 },
    { followUpStatus: '方案演示', id:3 },
    { followUpStatus: '试用测试', id:4 },
    { followUpStatus: '项目搁置', id:5 },
    { followUpStatus: '输单', id:6 },
    { followUpStatus: '赢单', id: 7}
]);

const job_list = ref([
    { positionName: '校长', id:1 },
    { positionName: '副校长', id:2 },
    { positionName: '执行校长', id:3 },
    { positionName: '教学主任', id:4 },
    { positionName: '教务主任', id:5 },
    { positionName: '信息主任', id:6 }
]);
</script>


<style lang="scss" scoped>
.grade_title{
    margin-bottom: 16px;
}
/* 公海配置行 */
.high_seas_config {
    display: flex;
    flex-wrap: wrap;
    gap:20px 100px;

    margin-bottom: 48px;
    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>