分组管理添加分组管理弹窗

src/baseComponents/formTableEdit/index.vue

@@ -18,7 +18,6 @@
                     :tableData="tableData"
                     :hidePagination="true">
                     <template #moveable="{row,currentIndex}">
-                        <slot></slot>
                         <TableRowDragUpDown  
                             :startIndex="startDragIndex()"
                             :endIndex="endDragIndex(tableData)"
@@ -30,8 +29,10 @@
                     <template #num="{row,currentIndex}">
                         {{ currentIndex }}
                     </template>
-                    <template v-slot:[middleColumnItm?.name]="{row}">
-                        <slot :name="[middleColumnItm?.name]" :row="row">
+                    <template v-slot:[middleColumnItm?.name]="{row,currentIndex}">
+                        <slot :name="[middleColumnItm?.name]" :row="row" :currentIndex="currentIndex">
+                            <el-input v-model="row[middleColumnItm.name]" v-if="row.tmpId" placeholder="请输入内容" />
+                            <span v-else>{{ row?.[middleColumnItm?.name] }}</span>
                         </slot>
                     </template>
 
@@ -61,7 +62,7 @@
                 </Table>
                 <div class="add_option" @click="HandleAddConfig"> 
                     <el-icon><CloseBold /></el-icon>
-                    <span>增加选项配置</span>
+                    <span>{{ addOperationName }}</span>
                 </div>
             </div>
         </template>
@@ -108,6 +109,7 @@ const props = defineProps({
     },
     width:{  //弹窗宽度
         type:String,
+        default:'680px'
     },
     formTitle:{  //弹窗标题
         type:String,
@@ -125,9 +127,17 @@ const props = defineProps({
     disabledEditRowScene:{  // 禁止编辑行 的条件 ：true 禁止   false 允许
         type:Function
     },
+    addOperationName:{
+        type:String,
+        default:'增加'
+    }
 })
 
-const emit = defineEmits(['editConfirm','addConfirm','deleteConfirm','entiretyConfirm'])
+const emit = defineEmits([
+    'editConfirm',  // 执行到最后要添加 row.editFlag = ''
+    'addConfirm',  // 执行到最后要添加 row.tmpId = ''
+    'deleteConfirm',
+    'entiretyConfirm'])
 
 /**
  * 1. 参数配置： 表单弹窗信息

src/components/settingCard/SettingCard.vue

@@ -113,7 +113,6 @@ const disabledDeleteRowScene = (row,currentIndex,newTableData)=>{
 const HandleEditConfirm = (row,params)=>{
     console.log('')
     // row?.[props?.middleColumnItm?.name] =  editRes?.data?.[props?.middleColumnItm?.name]
-    row.tmpId = ''
     row.editFlag = ''
 }
 // 表格行 新增确认
@@ -123,7 +122,6 @@ const HandleAddConfirm = (row,params)=>{
     // row.id = res?.data?.id
     // row?.[props?.middleColumnItm?.name] =  editRes?.data?.[props?.middleColumnItm?.name]
     row.tmpId = ''
-    row.editFlag = ''
 }
 // 表格行 删除确认
 const HandleDeleteConfirm = (row)=>{

src/views/userPrivilegeManagement/groupManage/index.vue

@@ -26,12 +26,12 @@
                         <el-switch v-model="isConfigMode" 
                             style="--el-switch-on-color: #2E64FA"
                             active-text="选中用户配置任课关系" />
-                        <el-button class="button_border">分组管理</el-button>
+                        <el-button class="button_border" @click="HandleOpenGroup">分组管理</el-button>
                     </div>
                 </div>
             </div>
             <div class="page_jg_20" />
-            <Table :tableColumns="tableColumns" :tableData="groupTableData">
+            <Table :tableColumns="tableColumns" :tableData="groupPeopleTableData">
                  <template v-for="column in tableColumns.slice(1)" :key="column.name"   v-slot:[column.name]="{row}"> 
                     <div class="cell_container" @click="HandleAddUser(row, column.name)">
                         <template v-if="row?.[column.name]">
@@ -58,6 +58,29 @@
             </Table>
         </div>
     </div>
+
+    <FormTableEdit 
+        addOperationName="增加分组" 
+        :startDragIndex="startDragIndex" 
+        :endDragIndex="endDragIndex" 
+        formTitle="分组管理" 
+        :middleColumnItm="{name:'groupName',label:'分组名称'}"
+        :disabledDeleteRowScene="()=>{return false}"
+        :disabledEditRowScene="()=>{return false}"
+        :defaultTableData="gorupTableData"
+        v-model:formVisible="formVisible"
+        v-model:deleteFlag="deleteFlag"
+        v-model:formDialogConfirmFlag="formDialogConfirmFlag"
+        @editConfirm = 'HandleEditGroup'
+        @addConfirm = 'HandleAddGroup'
+        @deleteConfirm = 'HandleDeleteGroup'
+        @entiretyConfirm = 'HandleConfirmEntiretyGroup'
+        >
+        <template #groupName="{row,currentIndex}">
+            <el-input v-model="row.groupName" v-if="row.tmpId" placeholder="请输fdff入内容" />
+            <span v-else>{{ row.groupName }}</span>
+        </template>
+    </FormTableEdit>
 </template>
 
 
@@ -67,6 +90,7 @@ import FormSearchGroup from '@/baseComponents/FormSearchGroup.vue';
 import {accountFormSearhList} from './formSearch'
 import Table from '@/baseComponents/Table.vue';
 import TabSearch from '@/baseComponents/TabSearch.vue';
+import FormTableEdit from '@/baseComponents/formTableEdit/index.vue'
 
 import {tableColumns,userTableColumns} from './table'
 import {provinceTablist} from './tabSearch'
@@ -89,8 +113,8 @@ const userAccountData = ref([
 // 分组信息
 const isConfigMode = ref(false)
 const defaultProvince = ref('beijing')
-const groupTableData = ref([
-    {
+const groupPeopleTableData = ref([
+     {
         id:'1',
         region:'xxx',
         project1:{id:'1',name:'xxx'},
@@ -180,6 +204,50 @@ const HandleRemoveUser = async (row, cell, index,type) => {
 
 
 
+// 分组管理相关配置
+const formVisible = ref(false)
+
+const formDialogConfirmFlag = ref('')
+const deleteFlag = ref('')
+
+const gorupTableData = ref([
+    {
+        id:'xxx',
+        groupName:'xxxx'
+    }
+])
+
+const HandleOpenGroup = ()=>{
+    formVisible.value = true
+
+}
+
+const startDragIndex = ()=>{
+    return 0
+}
+const endDragIndex = (tableData)=>{
+    return tableData.length
+}
+
+const HandleEditGroup = (row,params)=>{
+    row.editFlag = ''
+}
+const HandleAddGroup = (row,params)=>{
+    row.tmpId = ''
+}
+
+const HandleDeleteGroup = (row)=>{
+    gorupTableData.value = gorupTableData.value.filter(item=>{
+        return item.id !== row.id
+    })
+    // 删除执行内容
+    deleteFlag.value = 'success'
+}
+const HandleConfirmEntiretyGroup = ()=>{
+    setTimeout(()=>{
+        formDialogConfirmFlag.value = 'fail'
+    },1000)
+}
 </script>