添加参数配置的模拟数据交互

src/baseComponents/Table.vue

@@ -4,6 +4,7 @@
           <!-- border -->
         <el-table 
           class="el-table--border"
+          ref="tableRef"
           :show-header="showHeader"
           :data="props.tableData" stripe v-loading="props.loading" element-loading-text="拼命加载中……" 
           element-loading-spinner="el-icon-loading" element-loading-background="#ffffff"
@@ -113,6 +114,9 @@ const props = defineProps({
 })
 const emit = defineEmits(['paginationChange','rowClick'])
 
+const tableRef = defineModel('tableRef')
+
+
 /*  
 //demo
 const HandleSpanMethod = ({row,column,rowIndex,columnIndex}) => {

src/baseComponents/TableRowDragUpDown.vue

@@ -28,6 +28,14 @@ const props = defineProps({
     rowHeight:{
         type:number,
         default:52
+    },
+    startIndex:{
+        type:Number,
+        required:true,
+    },
+    endIndex:{
+        type:number,
+        required:true
     }
 })
 
@@ -52,7 +60,7 @@ const HandleDragEnd = (e,row,currentIndex)=>{
         let maxLength = tableData.value.length
         if(moveNum > 0){
             tableData.value.splice(currentIndex,1)
-            tableData.value.splice(Math.min(currentIndex + moveNum - 1,maxLength),0,row)
+            tableData.value.splice(Math.min(currentIndex + moveNum - 1,props.endIndex),0,row)
             emit('moveChange',tableData.value)
         }
     }else{
@@ -61,7 +69,7 @@ const HandleDragEnd = (e,row,currentIndex)=>{
         // 替换当前表格的内容
         if(moveNum > 0){
             tableData.value.splice(currentIndex,1)
-            tableData.value.splice(Math.max(currentIndex - moveNum,0),0,row)
+            tableData.value.splice(Math.max(currentIndex - moveNum,props.startIndex),0,row)
             emit('moveChange',tableData.value)
         }
     }

src/components/settingCard/SettingCard.vue

@@ -12,6 +12,7 @@
 
     <!-- 参数配置弹窗 -->
     <FormDialog
+        width="680px"
         class="parameter_setting_form_dialog"
         v-if="formVisible"
         :defaultFormData="{}" 
@@ -22,13 +23,22 @@
     >
         <template #form_pre>
             <div class="dictionary_box">
-                <!-- v-model:tableRef="dictionaryTableDom" -->
                 <Table
+                    v-model:tableRef="configTableDom"
                     :tableColumns="finalTableColumns" 
                     :tableData="tableData"
                     :hidePagination="true">
                     <template #moveable="{row,currentIndex}">
-                        <TableRowDragUpDown :currentIndex="currentIndex" :tableRow="row" :defaultTableData="tableData" @moveChange="HandleRowMove"/>
+
+                        <TableRowDragUpDown  
+                            :startIndex="middleColumnItm?.label == '跟进状态' ? 1 : 0"
+                            :endIndex="middleColumnItm?.label == '跟进状态' ? tableData.length - 4 : tableData.length - 1"
+                            v-if="!(middleColumnItm?.label == '跟进状态'  
+                                &&([1,tableData.length, tableData.length-1, tableData.length-2].includes(currentIndex) ))"
+                            
+                            :currentIndex="currentIndex" 
+                            :tableRow="row" :defaultTableData="tableData" 
+                            @moveChange="HandleRowMove"/>
                     </template>
 
                     <template #num="{row,currentIndex}">
@@ -36,56 +46,75 @@
                     </template>
 
                     <template v-slot:[middleColumnItm?.name]="{row}">
-                        {{ row?.[middleColumnItm?.name] }}
-                    </template>
-
-                    
-                    <template #dictName="{row}">
-                        <el-input v-model="row.dictName" v-if="row.tmpId" placeholder="请输入选项内容"></el-input>
-                        <span v-else>{{  row.dictName }}</span>
+                        <!-- 地区管理的下拉为省份 -->
+                         <template v-if="middleColumnItm?.label == '省份'">
+                             <el-select v-model="row[middleColumnItm.name]" v-if="row.tmpId">
+                                <el-option
+                                    label="输入框"
+                                    :value="1"
+                                />
+                                <el-option
+                                    label="单选"
+                                    :value="2"
+                                />
+                            </el-select>
+                            <span v-else>{{ row?.[middleColumnItm?.name] }}</span>
+                         </template>
+                        <template v-else>
+                            <el-input v-model="row[middleColumnItm.name]" v-if="row.tmpId" placeholder="请输入内容" />
+                            <span v-else>{{ row?.[middleColumnItm?.name] }}</span>
+                        </template>
                     </template>
-                    
-                    <template #dictType="{row}">
-                        <el-select v-model="row.dictType" v-if="row.tmpId" @change="(val)=>HandleRowTypeChange(row,val)">
-                            <el-option
-                                label="输入框"
-                                :value="1"
-                            />
-                            <el-option
-                                label="单选"
-                                :value="2"
-                            />
-                        </el-select>
-                        <span v-else>{{  DictTypeNumToName(row.dictType) }}</span>
-                    </template>
-
 
-                    <template #operation="{row}">
+                    <template #operation="{row,currentIndex}">
                         <div class="table_row_option">
-                            <span :class="row.defaultStatus ? 'el_button_editor' : 'editor_disable'" @click="row.defaultStatus ? HandleDictionaryEditOrSave(row) : ''">{{row.tmpId ? '保存' : '编辑'}}</span>
-                            <span v-if="row.tmpId" class="el_button_editor" @click="HandleDictionaryCancel(row)">取消</span>
-                            <span v-else :class="row.defaultStatus ? 'el_button_delete' : 'editor_disable'" @click="row.defaultStatus ? HandleDictionaryDelete(row) : ''">删除</span>
+                            <!-- row.defaultStatus ?  -->
+                            <span :class="'el_button_editor'" @click="HandleConfigEditOrSave(row)">{{row.tmpId ? '保存' : '编辑'}}</span>
+                            <span v-if="row.tmpId" class="el_button_editor" @click="HandleConfigCancel(row)">取消</span>
+                            <!-- row.defaultStatus  -->
+                            <!-- editor_disable -->
+                            <span v-else :class="middleColumnItm?.label == '跟进状态'&& [1,tableData.length, tableData.length-1, tableData.length-2].includes(currentIndex)  ? 'editor_disable' : 'el_button_delete'" 
+                                    @click="middleColumnItm?.label == '跟进状态'&& [1,tableData.length, tableData.length-1, tableData.length-2].includes(currentIndex)  ? '' : HandleConfigDelete(row)"
+                            >删除</span>
                         </div>
                     </template>
                 </Table>
-                <div class="add_option" @click="HandleAddDictionary"> 
+                <div class="add_option" @click="HandleAddConfig"> 
                     <el-icon><CloseBold /></el-icon>
                     <span>增加选项配置</span>
                 </div>
             </div>
         </template>
     </FormDialog>
+
+
+
+     <!-- 删除弹窗 -->
+    <Dialog 
+        v-if="dialogVisible"
+        :submitLoading="dialogSubmitLoading"
+        :visible="dialogVisible"
+        @confirm="HandleDialogConfirm"
+        @close="HandleDialogClose">
+        是否确认删除？
+    </Dialog>
 </template>
 
 
 <script setup lang="ts">
-import { ref,watch } from 'vue';
+import { ref,watch, nextTick } from 'vue';
+import {ElMessage} from 'element-plus'
 import FormDialog from '@/baseComponents/FormDialog.vue';
+import Dialog from '@/baseComponents/Dialog.vue';
 import Table from '@/baseComponents/Table.vue';
 import TableRowDragUpDown from '@/baseComponents/TableRowDragUpDown.vue';
 
 import {tableColumns} from './table'
 
+interface MiddleColumnItm {
+    name:string,
+    label:string
+}
 const props = defineProps({
     cardItems:{
         type:Array,
@@ -96,7 +125,7 @@ const props = defineProps({
         default:''
     },
     middleColumnItm:{
-        type:Object
+        type:Object as ()=>MiddleColumnItm
     },
     defaultTableData:{
         type:Array,
@@ -104,18 +133,149 @@ const props = defineProps({
     },
 })
 
+const emit = defineEmits([''])
+
+/**
+ * 1. 参数配置： 表单弹窗信息
+ */
 const formVisible = defineModel('formVisible')
 const formSubmitLoading = ref(false)
 const finalTableColumns = ref([...tableColumns.value])  //最终渲染的表头
-const tableData = ref([])  //表数据
-
-
+const tableData = ref<any[]>([])  //表数据
+const configTableDom = ref()
 
 // 处理表行的上下移动
 const HandleRowMove = (val)=>{
     tableData.value = val
 }
 
+// 处理参数配置的增删改查
+// 配置项添加 
+const HandleAddConfig = async ()=>{
+    if(props.middleColumnItm?.label === '跟进状态'){
+        tableData.value.splice(tableData.value.length - 3,0,{
+            // 临时id _ 待完善
+            id:`tmp_${new Date().getTime()}_${tableData.value.length + 1}`,
+            tmpId:(Number(tableData.value[tableData.value.length - 1]?.tmpId) || 0) + 1,   //新增时候的临时id
+            [props.middleColumnItm?.name]:'',
+            defaultStatus:1,   // defaultStatus：  0默认项  1非默认项 ,后续可能会用
+        })
+    }else{
+        tableData.value.push({
+            // 临时id _ 待完善
+            id:`tmp_${new Date().getTime()}_${tableData.value.length + 1}`,
+            tmpId:(Number(tableData.value[tableData.value.length - 1]?.tmpId) || 0) + 1,   //新增时候的临时id
+            [props.middleColumnItm?.name]:'',
+            defaultStatus:1,   // defaultStatus：  0默认项  1非默认项 ,后续可能会用
+        })
+    }
+    await nextTick()
+    // 新增元素后滚动到表格最底层
+    configTableDom.value.setScrollTop(configTableDom.value.layout.table.refs.bodyWrapper.firstElementChild.firstElementChild.scrollHeight)
+}
+
+// dictContent
+// dictName —— 后续待替换  待完善
+// 配置项保存 /编辑 
+const HandleConfigEditOrSave = async (row)=>{
+    // 初次新增确认 或者 准备变成编辑状态
+    if(!row.editFlag){
+        if(row.tmpId){
+            // 初次新增确认
+            // 调用新增接口
+            // 接口调用
+            if(!(row?.[props?.middleColumnItm?.name]) ){
+                ElMessage.warning('请填写内容')
+                return
+            }
+            let params = {
+                dictName: row.dictName,
+                dictContent: row.dictContent,
+            }
+            let res = await addDictionaryApi(params)
+
+            if(res.code == 200){
+                ElMessage.success(res.msg)
+                row.id = res?.data?.id
+                row.dictContent = res?.data?.dictContent
+                row.tmpId = ''
+                row.editFlag = ''
+            }
+        }else{
+            // 准备变成编辑状态
+            row.editFlag = 'edit'
+            row.tmpId = row.id
+        }
+    }else{
+        // 准备保存修改
+        // 调用修改接口
+        // 接口调用
+        if(!row.dictContent){
+            ElMessage.warning('请填写类别内容')
+            return
+        }
+        let params = {
+            id:row.id,
+            dictName: row.dictName,
+            dictContent: row.dictContent,
+        }
+        let editRes = await editDictionaryApi(params)
+        if(editRes.code == 200){
+            ElMessage.success(editRes.msg)
+            row.dictContent = editRes?.data?.dictContent
+            HandleConfigCancel(row)
+        }
+    }
+}
+// 取消配置项操作
+const HandleConfigCancel = (row)=>{
+    if(!row.editFlag){
+        // 不是已有的数据，要删除
+        tableData.value = tableData.value.filter(item=>{
+            return item.id !== row.id
+        })
+    }else{
+        row.tmpId = ''
+        row.editFlag = ''
+    }
+}
+
+// 字典删除
+const HandleConfigDelete = async (row)=>{
+    dialogVisible.value = true
+    currentEditRow.value = row
+}
+
+/**
+ * 2. 参数配置： 删除弹窗 信息
+*/
+const dialogVisible = ref(false)
+const dialogSubmitLoading = ref(false)
+const currentEditRow = ref()
+const HandleDialogClose = ()=>{
+    dialogVisible.value = false
+    currentEditRow.value = null
+}
+const HandleDialogConfirm = async ()=>{
+    dialogSubmitLoading.value = true
+    let row  = currentEditRow.value
+    let res = undefined
+    try{
+        res = await deleteDictionaryApi(row.id)
+    }catch{}
+
+    if(res?.code == 200){
+        ElMessage.success(res.msg)
+        tableData.value = tableData.value.filter(item=>{
+            return item.id !== row.id
+        })
+        HandleDialogClose()
+    }
+    dialogSubmitLoading.value = false
+}
+
+
+
 // 动态变更最终表列
 watch(()=>props.middleColumnItm,(newVal)=>{
     if(newVal){
@@ -125,9 +285,9 @@ watch(()=>props.middleColumnItm,(newVal)=>{
                 {
                     name:props.middleColumnItm?.name,
                     label:props.middleColumnItm?.label,
-                    width:'100',
+                    width:'350',
                     fixed:'',
-                    align:'center',
+                    align:'left',
                     minWdth:'',
                     custom:true,
                 },
@@ -142,7 +302,7 @@ watch(()=>props.middleColumnItm,(newVal)=>{
 
 // 动态变更表数据
 watch(()=>props.defaultTableData,(val)=>{
-    tableData.value = val || []
+    tableData.value = JSON.parse(JSON.stringify(val)) || []
 },{immediate:true,deep:true})
 </script>
 
@@ -210,6 +370,7 @@ watch(()=>props.defaultTableData,(val)=>{
         padding:4px auto;
         text-align: center;
         border-radius: 6px;
+        cursor: pointer;
 
         :deep(.el-icon){
             transform: rotate(45deg);
@@ -228,6 +389,7 @@ watch(()=>props.defaultTableData,(val)=>{
     :deep(.el-dialog__body){
         min-height: 500px !important;
         max-height: 500px !important;
+        padding:20px !important
     }
 }
 

src/views/parameterConfig/index.vue

@@ -67,68 +67,68 @@ import SettingCard from '@/components/settingCard/SettingCard.vue';
 
 // 模拟图片中的数据
 const region_list = ref([
-    { province: '北京市' },
-    { province: '上海市' },
-    { province: '天津市' },
-    { province: '广东' },
-    { province: '辽宁' },
-    { province: '河南' },
-    { province: '河北' },
-    { province: '湖南' },
-    { province: '湖北' },
-    { province: '云南' },
-    { province: '福建' },
-    { province: '海南' },
-    { province: '四川' },
-    { province: '初中' },
-    { province: '初中' },
-    { province: '初中' },
-    { province: '初中' }
+    { 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: '幼儿园' },
-    { phaseOfStudyingName: '小学' },
-    { phaseOfStudyingName: '初中' },
-    { phaseOfStudyingName: '高中' },
-    { phaseOfStudyingName: '完中' },
-    { phaseOfStudyingName: '九年一贯' },
-    { phaseOfStudyingName: '十二年一贯' },
-    { phaseOfStudyingName: '职高' },
-    { phaseOfStudyingName: '大学' },
-    { phaseOfStudyingName: '初中' }
+    { 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: '大数据精准教学诊断平台' },
-    { productName: '选择题智能判分' },
-    { productName: '教学材料采集' },
-    { productName: '教师校本研修' },
-    { productName: '学生校本课程学习' },
-    { productName: '智能校本选课' },
-    { productName: '教师专业发展' },
-    { productName: '协同教研备课' },
-    { productName: '校园信息发布' },
-    { productName: '智能评教评学' },
-    { productName: '智能考场编排' },
-    { productName: '智能听课评课' },
-    { productName: '基础数据管理' }
+    { 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: '线索建立' },
-    { followUpStatus: '需求调研' },
-    { followUpStatus: '方案演示' },
-    { followUpStatus: '试用测试' },
-    { followUpStatus: '项目搁置' },
-    { followUpStatus: '输单' },
-    { followUpStatus: '赢单' }
+    { 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: '校长' },
-    { positionName: '副校长' },
-    { positionName: '执行校长' },
-    { positionName: '教学主任' },
-    { positionName: '教务主任' },
-    { positionName: '信息主任' }
+    { positionName: '校长', id:1 },
+    { positionName: '副校长', id:2 },
+    { positionName: '执行校长', id:3 },
+    { positionName: '教学主任', id:4 },
+    { positionName: '教务主任', id:5 },
+    { positionName: '信息主任', id:6 }
 ]);
 </script>