完善用户权限的页面交互

src/baseComponents/Dialog.vue

@@ -87,6 +87,7 @@ const handleConfirm = ()=>{
 
 
 .page_dialog{
+  flex-grow: 0 !important;
   :deep(.el-dialog){
     .el-dialog__body{
       min-height: calc(120px);

src/baseComponents/FormDialog.vue

@@ -1146,6 +1146,7 @@ const HandleFilePreview = (params)=>{
 }
 
 .page_dialog{
+  flex-grow: 0 !important;
   :deep(.el-dialog) {
     // margin: calc(min(50px,5vh)) auto calc(min(50px,5vh));
     margin:0 !important;

src/baseComponents/formTableEdit/index.vue

@@ -72,6 +72,7 @@
 
      <!-- 删除弹窗 -->
     <Dialog 
+        style="flex-grow: 0;"
         v-if="dialogVisible"
         :submitLoading="dialogSubmitLoading"
         :visible="dialogVisible"
@@ -351,6 +352,7 @@ watch(()=>props.defaultTableData,(val)=>{
 }
 
 .parameter_setting_form_dialog{
+    flex-grow: 0 !important;
     :deep(.el-dialog__body){
         min-height: 500px !important;
         max-height: 500px !important;

src/views/userPrivilegeManagement/groupManage/index.vue

@@ -41,7 +41,7 @@
                             >
                             <div v-if="isConfigMode" class="teacher_tag">
                                 <span :title="row?.[column.name].name">{{ row?.[column.name].name }}</span>
-                                <el-icon class="delete_icon" @click.stop="HandleRemoveUser(row, column.name, idx,'administrative')"><Close /></el-icon>
+                                <el-icon class="delete_icon" @click.stop="OpenDeleteDialog(row, column,)"><Close /></el-icon>
                             </div>
                             <div v-else class="disabled_teacher">
                                 <span :title="row?.[column.name].name">{{ row?.[column.name].name}}</span>
@@ -58,7 +58,9 @@
         </div>
     </div>
 
+    <!-- 分组管理弹窗 -->
     <FormTableEdit 
+        style="flex-grow: 0;"
         addOperationName="增加分组" 
         :startDragIndex="startDragIndex" 
         :endDragIndex="endDragIndex" 
@@ -80,6 +82,19 @@
             <span v-else>{{ row.groupName }}</span>
         </template>
     </FormTableEdit>
+
+
+     <!-- 地区 组内用户 删除弹窗 -->
+    <Dialog 
+        style="flex-grow: 0;"
+        v-if="dialogVisible"
+        :submitLoading="dialogSubmitLoading"
+        :visible="dialogVisible"
+        @confirm="HandleDialogConfirm"
+        @close="HandleDialogClose">
+        请确认是否确认删除{{ currentDeleteColumn.label }}  {{currentDeleteRow[currentDeleteColumn.name].name}}   {{provinceTablist.find(item=>item.key == defaultProvince)?.label}}{{currentDeleteRow.region}}  的权限？
+    </Dialog>
+
 </template>
 
 
@@ -91,10 +106,15 @@ import Table from '@/baseComponents/Table.vue';
 import TabSearch from '@/baseComponents/TabSearch.vue';
 import FormTableEdit from '@/baseComponents/formTableEdit/index.vue'
 
+import Dialog from '@/baseComponents/Dialog.vue';
+
 import {tableColumns,userTableColumns} from './table'
 import {provinceTablist} from './tabSearch'
 
 
+/**
+ * 1. 左侧 员工相关信息及操作
+ */
 // 员工账号信息
 const userAccountData = ref([
     {
@@ -108,14 +128,35 @@ const userAccountData = ref([
         id:'2',
     },
 ])
+// 当前选中的用户
+const selectedUser = ref()
+// 设置表行选中 样式
+const tableRowClassName = ({row,rowIndex})=>{
+  if(row.id == selectedUser.value?.id){
+    return 'active_row'
+  }
+}
+// 行选中 选择员工
+const HandleSelectUser = (user) => {
+  selectedUser.value = {
+    id:user.id,
+    name:user.name,
+    account:user.account,
+  };
+};
+
+
 
+/**
+ * 2. 右侧分组展示信息 及操作
+ */
 // 分组信息
 const isConfigMode = ref(false)
 const defaultProvince = ref('beijing')
 const groupPeopleTableData = ref([
      {
         id:'1',
-        region:'xxx',
+        region:'东城区',
         project1:{id:'1',name:'xxx'},
         project2:{id:'1',name:'xxx'},
         project3:{id:'1',name:'xxx'},
@@ -126,7 +167,7 @@ const groupPeopleTableData = ref([
     },
     {
         id:'2',
-        region:'xxx',
+        region:'西城区',
         project1:{id:'1',name:'xxx'},
         project2:{id:'1',name:'xxx'},
         project3:{id:'1',name:'xxx'},
@@ -137,23 +178,6 @@ const groupPeopleTableData = ref([
     },
 ])
 
-const selectedUser = ref()
-
-// 设置表行选中 样式
-const tableRowClassName = ({row,rowIndex})=>{
-  if(row.id == selectedUser.value?.id){
-    return 'active_row'
-  }
-}
-// 行选中 选择员工
-const HandleSelectUser = (user) => {
-  selectedUser.value = {
-    id:user.id,
-    name:user.name,
-    account:user.account,
-  };
-};
-
 // 添加员工
 const HandleAddUser = async (row, cell) => {
     if (!isConfigMode.value) return;
@@ -171,70 +195,68 @@ const HandleAddUser = async (row, cell) => {
     }
     row[cell] = teacherMsg;
 
-    // let res = await saveTeachingRelationshipApi({
-    //     ...teacherMsg,
-    //     evaluationId:route.query.id,
-    //     evaluationGradeId:searchParmams.value.gradeId,
-    //     evaluationSubjectId:cell,
-    //     evaluationClassId:row.className.evaluationClassId,
-    //     classType:searchParmams.value.classType == 'teach' ? 1 : 0  //班级类型，0-行政班，1-教学班
-    // })
-    // if(res?.code == 200){
-        // ElMessage.success(res?.msg)
-        // row[cell].push({...teacherMsg,id:res?.data});
-    // }
 };
 
 
+/**
+ * 3. 删除员工的弹窗 及操作
+ */
+const dialogVisible = ref(false)
+const dialogSubmitLoading = ref(false)
+const currentDeleteCell = ref()  //当前准备删除的（员工）单元格数据
+const currentDeleteRow = ref()  //当前准备删除的（员工）所在行数据
+const currentDeleteColumn = ref()  //当前准备删除的（员工）所在列信息
 // 移除员工
-const HandleRemoveUser = async (row, cell, index,type) => {
-    if (!isConfigMode.value) return;
+const HandleDialogConfirm = ()=>{
     let id = null
     let res = undefined
-    row[cell] = '';
-
-    // id = row[cell][index].id
-    // res = await deleteTeachingRelationshipApi(id)
-    // if(res?.code == 200){
-    //     ElMessage.success(res?.msg)
-    //     row[cell].splice(index, 1);
-    // }
-};
+    currentDeleteRow.value[currentDeleteColumn.value.name] = ''
+    // id = currentDeleteCell.value.id
+    HandleDialogClose()
+}
 
+const HandleDialogClose = ()=>{
+    currentDeleteCell.value = null
+    currentDeleteRow.value = null
+    currentDeleteColumn.value = null
+    dialogVisible.value = false
+}
+const OpenDeleteDialog = (row, cellObj)=>{
+    if (!isConfigMode.value) return;
+    dialogVisible.value = true
+    currentDeleteCell.value = row[cellObj.name]
+    currentDeleteRow.value = row
+    currentDeleteColumn.value = cellObj
+}
 
 
-// 分组管理相关配置
+/**
+ * 4. 分组管理 弹窗相关配置
+ */
 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
@@ -247,6 +269,9 @@ const HandleConfirmEntiretyGroup = ()=>{
         formDialogConfirmFlag.value = 'fail'
     },1000)
 }
+
+
+
 </script>
 
 

src/views/userPrivilegeManagement/userManage/index.vue

@@ -16,7 +16,7 @@
         <Table :tableColumns="tableColumns" :tableData="userTableData" 
             :pageNum = "pageNum" :pageSize = "pageSize" :totalNum = "totalNum">
             <template #num="{row,currentIndex}">
-                {{ (currentIndex - 1 ) * pageSize + pageNum }}
+                {{ (pageNum - 1 ) * pageSize + currentIndex }}
             </template>
 
             <template #gender="{row}">
@@ -46,8 +46,8 @@
                 <div class="table_row_option">
                     <span class="option_button_editor" @click="OpenUserFormDialog(row)">编辑</span>
                     <span class="option_button_editor" @click="OpenresetPasswordFormDialog(row)">重置密码</span>
-                    <span class="option_button_editor">禁用</span>
-                    <span class="el_button_delete">删除</span>
+                    <span class="option_button_editor" @click="OpenForbiddenDialog(row,'forbidden')">禁用</span>
+                    <span class="el_button_delete" @click="OpenForbiddenDialog(row,'delete')">删除</span>
                 </div>
             </template>
         </Table>
@@ -56,9 +56,10 @@
     <!-- 新增用户 弹窗 -->
     <FormDialog  
         class="user_form_dialog"
-        style="flex-grow: 0;" width="482px"
+        width="482px"
         v-if="userFormDialogVisible"
-        :formItemList="userFormItemList" :defaultFormData="defaultUserFormData" 
+        :formItemList="userFormItemList" 
+        :defaultFormData="defaultUserFormData" 
         :title="userFormDialogTitle" 
         :submitLoading="userFormDialogSubmiting" 
         :visible="userFormDialogVisible"
@@ -69,7 +70,7 @@
     <!-- 重置密码弹窗 -->
     <FormDialog  
         class="reset_password_form_dialog"
-        style="flex-grow: 0;" width="500px"
+         width="500px"
         v-if="resetPasswordFormDialogVisible"
         :formItemList="resetPasswordFormItemList" :defaultFormData="defaultResetPasswordFormData" 
         title="重置密码" 
@@ -79,6 +80,16 @@
         @confirm="HandleresetPasswordFormDialogConfirm">
     </FormDialog>
 
+    <!-- 禁用/删除 弹窗 -->
+    <Dialog 
+        :visible="forbiddenDialogVisible" 
+        :submitLoading="forbiddenDialogLoading" 
+        @close="HandleForbiddenDialogClose"
+        @confirm="HandleForbiddenDialogConfirm">
+        请确认是否{{currentOperationType == 'delete' ? '删除' : '禁用'}} 【{{currentEditRow?.name}}】 {{ currentEditRow?.account }}
+    </Dialog>
+
+
 </template>
 
 
@@ -93,6 +104,7 @@ import TabSearch from '@/baseComponents/TabSearch.vue';
 import {tabList} from './tabSearch'
 import FormDialog from '@/baseComponents/FormDialog.vue';
 import {userFormItemList, resetPasswordFormItemList} from './formDialog'
+import Dialog from '@/baseComponents/Dialog.vue';
 
 /**
  * 1. 表格 有关数据
@@ -104,8 +116,8 @@ const totalNum = ref(0)
 const userTableData = ref([
     {
         id:'1',
-        account:'xxx',
-        name:'xxx',
+        account:'43434',
+        name:'xx1',
         gender:'1',
         phone:'xxx',
         status:0,
@@ -118,15 +130,14 @@ const userTableData = ref([
     },
     {
         id:'2',
-        account:'xxx',
-        name:'xxx',
+        account:'545',
+        name:'xx2',
         gender:'0',
         phone:'xxx',
         status:1,
         publicSeaFollowRecord:false,
         historyFollowRecord:true,
 
-
         customerHoldLimit:50,
         dailyManualReturnLimit:20,
         noFollowAutoReturnDays:30,
@@ -155,6 +166,8 @@ const userFormDialogVisible = ref(false)
 const userFormDialogSubmiting = ref(false)
 const userFormDialogTitle = ref('')
 const defaultUserFormData = ref({
+    publicSeaFollowRecord:true,
+    historyFollowRecord:true,
     customerHoldLimit:100,
     dailyManualReturnLimit:15,
     noFollowAutoReturnDays:15,
@@ -174,6 +187,8 @@ const OpenUserFormDialog = (row?:any)=>{
 const CloseUserFormDialog = ()=>{
     userFormDialogVisible.value = false
     defaultUserFormData.value = {
+        publicSeaFollowRecord:true,
+        historyFollowRecord:true,
         customerHoldLimit:100,
         dailyManualReturnLimit:15,
         noFollowAutoReturnDays:15,
@@ -205,6 +220,28 @@ const HandleresetPasswordFormDialogConfirm = ()=>{
     CloseResetPasswordFormDialog()
 }
 
+/**
+ * 4. 禁用/删除 弹窗有关数据
+ */
+const forbiddenDialogVisible = ref(false)
+const forbiddenDialogLoading = ref(false)
+const currentEditRow = ref()
+const currentOperationType = ref('')
+const HandleForbiddenDialogClose = ()=>{
+    currentEditRow.value = undefined
+    forbiddenDialogVisible.value = false
+}
+const HandleForbiddenDialogConfirm = ()=>{
+    // 区分 禁用和删除
+    // currentOperationType.value
+    HandleForbiddenDialogClose()
+}
+// type: delete | forbidden
+const OpenForbiddenDialog = (row,type)=>{
+    currentOperationType.value = type
+    currentEditRow.value = row
+    forbiddenDialogVisible.value = true
+}
 
 </script>