完成角色页面绘制和接口对接

src/api/system/rolePage/index.ts

@@ -3,9 +3,16 @@ import request from '@/config/axios'
 export interface rolePageSaveReqVO{
   id:number,
   roleId:number,
-  pageType?:string
+  roleName:string,
+  pageType?:number
+}
+export interface pageUiComponentSaveReqVO{
+  id:number,
+  pageId:number,
+  componentId:number,
+  componentRow?:string,
+  componentColumn?:string,
 }
-
 
 // 查询角色页面数据列表
 export const getRolePagePage=async(params:PageParam)=>{
@@ -33,3 +40,32 @@ export const updateRolePage =async(data:rolePageSaveReqVO)=>{
 export const deleteRolePageList=async(ids:[])=>{
   return await request.delete({url:'/sys/role-page/deleteRolePageList?ids='+ids})
 }
+
+
+
+//驾驶舱页面和组件关联
+// 获得分页数据
+export const getPageUiComponentPage=async(params:PageParam)=>{
+  return await request.get({url:'/sys/page-ui-component/getPageUiComponentPage',params})
+}
+
+//获得详情数据
+export const selectPageUiComponentById=async(id:number)=>{
+  return await request.get({url:'/sys/page-ui-component/selectPageUiComponentById',params:{id:id}})
+}
+
+
+//创建页面和组件关联
+export const insertPageUiComponent=async(data:pageUiComponentSaveReqVO)=>{
+  return await request.post({url:'/sys/page-ui-component/insertPageUiComponent',data})
+}
+
+//修改页面和组件关联
+export const updatePageUiComponent=async(data:pageUiComponentSaveReqVO)=>{
+  return await request.put({url:'/sys/page-ui-component/updatePageUiComponent',data})
+}
+
+//批量删除
+export const deletePageUiComponentList=async(ids:[])=>{
+  return await request.delete({url:'sys/page-ui-component/deletePageUiComponentList?ids='+ids})
+}

src/router/modules/remaining.ts

@@ -131,7 +131,7 @@ const remainingRouter: AppRouteRecordRaw[] = [
         component: () => import('@/views/system/rolePage/createForm.vue'),
         name: 'createForm',
         meta: {
-          title: '角色页面新增',
+          title: '角色操作页面',
           noCache: false,
           hidden: true,
           canTo: true,
@@ -139,19 +139,19 @@ const remainingRouter: AppRouteRecordRaw[] = [
           activeMenu: '/rolePage/RP/createForm'
         }
       },
-      {
-        path: 'RP/update',
-        component: () => import('@/views/system/rolePage/updateForm.vue'),
-        name: 'updateForm',
-        meta: {
-          title: '角色页面修改',
-          noCache: false,
-          hidden: true,
-          canTo: true,
-          icon: 'ep:view',
-          activeMenu: '/rolePage/RP/updateForm'
-        }
-      },
+      // {
+      //   path: 'RP/update',
+      //   component: () => import('@/views/system/rolePage/updateForm.vue'),
+      //   name: 'updateForm',
+      //   meta: {
+      //     title: '角色页面修改',
+      //     noCache: false,
+      //     hidden: true,
+      //     canTo: true,
+      //     icon: 'ep:view',
+      //     activeMenu: '/rolePage/RP/updateForm'
+      //   }
+      // },
     ]
   },
   {

src/utils/dict.ts

@@ -312,6 +312,7 @@ export enum DICT_TYPE {
   ADVANCE_NOTICE_RULES = 'advance_notice_rules',
   NOTICE_TIME_TYPE = 'notice_time_type',
   TODO_FINISHED_QUERY_TYPE ='todo_finished_query_type',
-COCKPIT_COMPONENT_TYPE='cockpit_component_type'
+  COCKPIT_COMPONENT_TYPE='cockpit_component_type',
+  COCKPIT_PAGE_TYPE='cockpit_page_type'
 
 }

src/views/system/rolePage/TableView.vue

@@ -4,7 +4,8 @@
     <div class="button-group">
       <el-button
         type="primary"
-
+        @click="openForm('create')"
+        v-hasPermi="['iscs:map:create']"
       >
         <el-icon>
           <Plus />
@@ -13,12 +14,14 @@
       </el-button>
       <el-button
         type="danger"
-
+        :disabled="multiple"
+        @click="handleDelete"
+        v-hasPermi="['iscs:map:delete']"
       >
         <el-icon>
           <Delete />
         </el-icon>
-        删除
+        批量删除
       </el-button>
     </div>
     <!-- 表格区域 -->
@@ -33,38 +36,100 @@
       >
         <el-table-column type="selection" width="55" align="center" />
         <el-table-column label="编号" align="center" prop="id" />
-        <el-table-column label="组件" align="center" prop="roleName" />
+        <el-table-column label="组件" align="center" prop="componentName" />
         <el-table-column label="行" align="center" prop="componentRow" />
         <el-table-column label="列" align="center" prop="componentColumn" />
+        <el-table-column label="操作" align="center">
+          <template #default="scope">
+            <el-button
+              link
+              type="primary"
+              @click="openForm('update', scope.row.id)"
+              v-hasPermi="['iscs:map:update']"
+            >
+              编辑
+            </el-button>
+            <el-button
+              link
+              type="danger"
+              @click="handleDelete(scope.row.id)"
+              v-hasPermi="['iscs:map:delete']"
+            >
+              删除
+            </el-button>
+          </template>
+        </el-table-column>
       </el-table>
-      <!-- 分页 -->
-<!--      <Pagination-->
-<!--        :total="total"-->
-<!--        v-model:page="queryParams.pageNo"-->
-<!--        v-model:limit="queryParams.pageSize"-->
-<!--        @pagination="getList"-->
-<!--      />-->
+
     </div>
+    <!-- 表单弹窗：添加/修改 -->
+    <tableViewForm ref="formRef" :page-id="pageId" @success="getList"/>
     </div>
+
 </template>
 
 <script setup lang="ts">
-
-import {Delete, DocumentAdd, Plus} from "@element-plus/icons-vue";
+import * as rolePageApi from '@/api/system/rolePage/index'
+import {Delete, Plus} from "@element-plus/icons-vue";
 import {ref} from "vue";
+import tableViewForm from "./tableViewForm.vue";
 
 
-
-// const route = useRoute()
-// const router = useRouter()
+const route = useRoute()
+const { t } = useI18n() // 国际化
+const message = useMessage() // 消息弹窗
+const formRef = ref()
+const multiple = ref(true) // 非多个禁用
+const ids = ref() // 选中的数据
 // 响应式数据
 const tableData = ref([])
+const props = defineProps({
+  pageId: {
+    type: [String, Number],
+    default: null
+  }
+})
+
+onMounted(()=>{
+  getList()
+})
 
-const handleSelectionChange=()=>{
-  console.log("handleSelectionChange")
+// 获取数据
+const getList=async()=>{
+  const data=await rolePageApi.selectRolePageById(props.pageId||route.query.id);
+  tableData.value=data.pageUiComponentDOList
+  console.log(data,tableData.value,'getPageUiComponentPage')
+}
+
+// 表格数据选择，选中
+const handleSelectionChange=(selection:any[])=>{
+  ids.value=selection.map((item)=>item.id)
+  multiple.value=!selection.length
+}
+// 新增/修改
+const openForm = (type: string, id?: number) => {
+  formRef.value?.open(type, id)
+}
+
+const handleDelete=async(id?:number)=>{
+  try{
+    await message.delConfirm()
+    // 类型守卫处理
+    const realId = id instanceof PointerEvent
+      ? ids.value
+      : id || ids.value;
+    await rolePageApi.deletePageUiComponentList(realId)
+    message.success(t('common.delSuccess'))
+    await getList()
+  }catch(error){
+    console.error('删除失败:', error)
+    message.error(t('common.delFailed'))
+  }
 }
 </script>
 
 <style scoped lang="scss">
-
+.button-group{
+  margin-bottom: 10px;
+}
 </style>

src/views/system/rolePage/createForm.vue

@@ -2,15 +2,32 @@
   <ContentWrap>
     <!--      顶部新增表单-->
     <el-form ref="formRef" v-loading="formLoading" :model="formData" label-width="100px">
-      <el-form-item label="角色" prop="roleName">
-        <el-input style="width: 300px" v-model="formData.roleName" placeholder="请输入角色" />
+      <el-form-item label="角色">
+        <el-select v-model="formData.roleId" placeholder="请选择角色" style="width: 300px">
+          <el-option v-for="item in roleList" :key="item.id" :label="item.name" :value="item.id" />
+        </el-select>
       </el-form-item>
       <el-form-item label="页面" prop="pageType">
-        <el-input style="width: 300px" v-model="formData.pageType" placeholder="请输入页面" />
+        <el-select v-model="formData.pageType" placeholder="请选择页面" style="width: 300px">
+          <el-option
+            v-for="dict in getIntDictOptions(DICT_TYPE.COCKPIT_PAGE_TYPE)"
+            :key="dict.value"
+            :value="dict.value"
+            :label="dict.label"
+          />
+        </el-select>
       </el-form-item>
-      <el-button type="primary" style="margin-left: 500px" @click="submitForm"
+      <el-button
+        type="primary"
+        style="margin-left: 500px"
+        @click="submitForm"
+        v-if="!isUpdate"
+        :disabled="isSuccess"
         >保 存
       </el-button>
+      <el-button type="primary" style="margin-left: 500px" @click="submitForm" v-else
+        >修改
+      </el-button>
       <el-button @click="goBack">取 消</el-button>
     </el-form>
   </ContentWrap>
@@ -21,12 +38,8 @@
       <el-radio-button label="second">预览视图</el-radio-button>
     </el-radio-group>
     <ContentWrap>
-      <TableView
-        v-if="tabPosition == 'first'"
-        :enableStepTable="enableStepTable"
-        :modeId="formData.id"
-      />
-      <LookView v-else :enableStepTable="enableStepTable" :modeId="formData.id" />
+      <TableView v-if="tabPosition == 'first'" :page-id="formData.id" />
+      <LookView v-else :page-id="formData.id" />
     </ContentWrap>
   </ContentWrap>
 </template>
@@ -34,97 +47,102 @@
 import TableView from './TableView.vue'
 import LookView from './LookView.vue'
 import * as rolePageApi from '@/api/system/rolePage/index'
-
+import * as RoleApi from '@/api/system/role'
+import { getIntDictOptions, DICT_TYPE } from '@/utils/dict'
+import { useTagsViewStoreWithOut } from '@/store/modules/tagsView'
 
 const { t } = useI18n() // 国际化
 const message = useMessage() // 消息弹窗
 const router = useRouter()
+const route = useRoute()
+const roleList = ref([] as RoleApi.RoleVO[]) // 角色的列表
 const formLoading = ref(false) // 表单的加载中
 const tabPosition = ref('first')
-const enableStepTable = ref(false) //新增控制表格新增 模板导入 删除不能点击或者出现
-const formData = ref({
+
+const formData = reactive({
+  id: undefined,
   roleId: undefined,
-  roleName: undefined,
   pageType: undefined
 })
-const showTable=ref(false);
-
+const showTable = ref(false) //是否展示底部表格区
+const isUpdate = route.query.id
+const isSuccess = ref(false) // 新增成功后禁用按钮
 // 监听数据变化，设置未保存标记
-const hasUnsavedChanges = ref(false) // 标记是否有未保存的更改
+watch(
+  () => ({
+    roleId: formData.roleId
+  }),
+  { deep: true }
+)
+
+onMounted(() => {
+  getRoleData() //角色下拉数据
+  if (isUpdate) {
+    editData()
+    showTable.value = true
+  }
+})
+
+// 角色下拉数据
+const getRoleData = async () => {
+  const data = await RoleApi.getSimpleRoleList()
+  roleList.value = data
+  console.log(data, '数据格式')
+}
+
 // 方法定义
 const handleTabChange = (newTab: string) => {
   tabPosition.value = newTab
 }
 
+// 编辑时数据渲染
+const editData = async () => {
+  const data = await rolePageApi.selectRolePageById(route.query.id)
+  formData.id = data.id
+  formData.roleId = data.roleId
+  formData.pageType = data.pageType
+  console.log(data, 'hnudhiahauihasihi')
+}
+// 提交表单
 const submitForm = async () => {
   try {
     let data
     let successMessage
-
-    if (formData.value.id) {
+    if (isUpdate) {
       // 有 id，调用修改接口
-      data = await rolePageApi.updateRolePage(formData.value)
+      data = await rolePageApi.updateRolePage(formData)
       successMessage = t('common.updateSuccess')
     } else {
       // 没有 id，调用新增接口
-      data = await rolePageApi.insertRolePage(formData.value)
+      console.log(formData, '数据格式')
+      data = await rolePageApi.insertRolePage(formData)
       successMessage = t('common.createSuccess')
-      enableStepTable.value = true
+      showTable.value = true //新增成功后显示下发列表
+      isSuccess.value = true //新增成功后保存按钮不显示
       // 新增成功后，将返回的 id 保存到 formData 中
       if (data) {
-        formData.value.id = data
+        formData.id = data
       }
     }
-
     if (data) {
       message.success(successMessage)
-      // 保存成功后重置未保存标记
-      hasUnsavedChanges.value = false
     }
   } catch (error) {
     console.error('保存失败:', error)
     message.error('保存失败，请稍后重试')
   }
 }
-// 监听数据变化，设置未保存标记
-watch(
-  () => ({
-    roleName: formData.value.roleName
-  }),
-  () => {
-    hasUnsavedChanges.value = true
-  },
-  { deep: true }
-)
-// 路由离开守卫
-onBeforeRouteLeave((to, from, next) => {
-  if (hasUnsavedChanges.value) {
-    ElMessageBox.confirm('当前页面有未保存的更改，是否继续离开？', '提示', {
-      confirmButtonText: '继续离开',
-      cancelButtonText: '取消',
-      type: 'warning'
-    })
-      .then(() => {
-        next()
-      })
-      .catch(() => {
-        next(false)
-      })
-  } else {
-    next()
-  }
-})
 
+//退出页面
 const goBack = () => {
   // 获取 tagsView store
-  // const tagsViewStore = useTagsViewStoreWithOut()
-
+  const tagsViewStore = useTagsViewStoreWithOut()
   // 获取当前路由对象
   const currentRoute = router.currentRoute.value
-
   // 方法1：精确删除当前标签（推荐）
-  // tagsViewStore.delVisitedView(currentRoute)
-  router.push('/system/rolePage')
+  tagsViewStore.delVisitedView(currentRoute)
+  router.push('/system/rolePage');
+  (formData.id = undefined), (formData.roleId = undefined), (formData.pageType = undefined)
 }
 </script>
 

src/views/system/rolePage/index.vue

@@ -53,8 +53,12 @@
     <el-table v-loading="loading" :data="tableList" @selection-change="handleSelectionChange">
       <el-table-column type="selection" width="55" align="center" />
       <el-table-column label="编号" align="center" prop="id" />
-      <el-table-column label="名称" align="center" prop="roleName" />
-      <el-table-column label="页面" align="center" prop="pageType" />
+      <el-table-column label="角色" align="center" prop="roleName" />
+      <el-table-column label="页面" align="center" prop="pageType">
+        <template #default="scope">
+          <dict-tag :type="DICT_TYPE.COCKPIT_PAGE_TYPE" :value="scope.row.pageType" />
+        </template>
+      </el-table-column>
       <el-table-column label="操作" align="center">
         <template #default="scope">
           <el-button
@@ -87,6 +91,7 @@
 </template>
 <script setup lang="ts">
 import * as rolePageApi from '@/api/system/rolePage/index'
+import {DICT_TYPE} from "@/utils/dict";
 
 
 const router = useRouter()
@@ -147,11 +152,10 @@ const openForm=(type:string,id?:number)=>{
     })
   }else if(type=='update'){
     router.push({
-      name:'updateForm',
+      name:'createForm',
       query:{id:id,type:'update'}
     })
   }
-  console.log(formRef.value)
 }
 
 // 删除
@@ -169,7 +173,6 @@ const handleDelete=async(id?:number)=>{
     console.error('删除失败:', error)
     message.error(t('common.delFailed'))
   }
-  console.log(formRef.value)
 }
 </script>
 

src/views/system/rolePage/tableViewForm.vue

@@ -0,0 +1,144 @@
+<template>
+  <Dialog v-model="dialogVisible" :title="dialogTitle" width="800">
+    <el-form
+      ref="formRef"
+      v-loading="formLoading"
+      :model="formData"
+      :rules="formRules"
+      label-width="110px"
+    >
+      <el-form-item label="组件" prop="componentId">
+        <el-select v-model="formData.componentId" style="width: 300px">
+          <el-option
+            v-for="item in componentList"
+            :key="item.id"
+            :label="item.componentName"
+            :value="item.id"
+          />
+        </el-select>
+      </el-form-item>
+      <el-form-item label="行" prop="componentRow">
+        <el-input v-model="formData.componentRow" placeholder="请输入行" style="width: 300px" />
+      </el-form-item>
+      <el-form-item label="列" prop="componentColumn">
+        <el-input v-model="formData.componentColumn" placeholder="请输入列" style="width: 300px" />
+      </el-form-item>
+    </el-form>
+    <template #footer>
+      <el-button :disabled="formLoading" type="primary" @click="submitForm">确 定</el-button>
+      <el-button @click="dialogVisible = false">取 消</el-button>
+    </template>
+  </Dialog>
+</template>
+
+<script setup lang="ts">
+import * as cockpitApi from '@/api/system/cockpitComponent/index'
+import * as rolePageApi from '@/api/system/rolePage/index'
+
+const { t } = useI18n() // 国际化
+const message = useMessage() // 消息弹窗
+const dialogVisible = ref(false) // 弹窗的是否展示
+const dialogTitle = ref('') // 弹窗的标题
+const formLoading = ref(false) // 表单的加载中
+const formType = ref('') // 表单的类型：create - 新增；update - 修改
+const props = defineProps({
+  pageId: {
+    type: [String, Number],
+    default: null
+  }
+})
+const formData = ref({
+  id: undefined,
+  pageId: props.pageId,  // 👈 初始赋值
+  componentId: undefined,
+  componentRow: '',
+  componentColumn: ''
+})
+const formRules = reactive({
+  componentId: [{ required: true, message: '组件不能为空', trigger: 'blur' }],
+  componentRow: [{ required: true, message: '行不能为空', trigger: 'blur' }],
+  componentColumn: [{ required: true, message: '列不能为空', trigger: 'blur' }]
+})
+const formRef = ref() // 表单 Ref
+const queryParams = reactive({
+  pageNo: 1,
+  pageSize: -1,
+  componentName: '',
+  componentFilePath: ''
+})
+const componentList = ref([])
+
+watch(() => props.pageId, (newVal) => {
+  formData.value.pageId = newVal
+})
+
+onMounted(() => {
+  getComponentData()
+})
+
+// 组件下拉列表数据
+const getComponentData = async () => {
+  const data = await cockpitApi.getUiComponentPage(queryParams)
+  componentList.value = data.list
+}
+
+// 打开弹框
+const open = async (type: string, id?: number) => {
+  dialogVisible.value = true
+  dialogTitle.value = t('action.' + type)
+  formType.value = type
+  resetForm()
+  // 修改时，设置数据
+  if (id) {
+    formLoading.value = true
+    try {
+      formData.value = await rolePageApi.selectPageUiComponentById(id)
+    } finally {
+      formLoading.value = false
+    }
+  }
+}
+defineExpose({ open }) // 提供 open 方法，用于打开弹窗
+
+/** 提交表单 */
+const emit = defineEmits(['success']) // 定义 success 事件，用于操作成功后的回调
+
+// 提交表单
+const submitForm = async () => {
+  //   校验表单
+  if (!formRef) return
+  const valid = await formRef.value.validate()
+  if (!valid) return
+  //   提交请求
+  formLoading.value = true
+  try {
+    const data = formData.value
+    if (formType.value == 'create') {
+      await rolePageApi.insertPageUiComponent(data)
+      message.success(t('common.createSuccess'))
+    } else {
+      await rolePageApi.updatePageUiComponent(data)
+      message.success(t('common.updateSuccess'))
+    }
+    dialogVisible.value = false
+    // 发送操作成功的事件
+    emit('success')
+  } finally {
+    formLoading.value = false
+  }
+}
+
+/** 重置表单 */
+const resetForm = () => {
+  formData.value = {
+    id: undefined,
+    pageId: props.pageId,
+    componentId: undefined,
+    componentRow: '',
+    componentColumn: ''
+  }
+  formRef.value?.resetFields()
+}
+</script>
+
+<style scoped lang="scss"></style>

src/views/system/rolePage/updateForm.vue

@@ -1,12 +0,0 @@
-<template>
-<div>修改角色页面</div>
-</template>
-<script setup lang="ts">
-
-</script>
-
-
-
-<style scoped lang="scss">
-
-</style>