角色页面

src/views/system/rolePage/TableView.vue

@@ -1,11 +1,70 @@
-<script setup lang="ts">
+<template>
+  <div class="workflow-page">
+    <!-- 顶部按钮区域 -->
+    <div class="button-group">
+      <el-button
+        type="primary"
 
-</script>
+      >
+        <el-icon>
+          <Plus />
+        </el-icon>
+        添加
+      </el-button>
+      <el-button
+        type="danger"
 
-<template>
-<div>就会解饿黑i二黑hi就</div>
+      >
+        <el-icon>
+          <Delete />
+        </el-icon>
+        删除
+      </el-button>
+    </div>
+    <!-- 表格区域 -->
+    <div class="table-container">
+      <el-table
+        ref="tableRef"
+        :data="tableData"
+        @selection-change="handleSelectionChange"
+        border
+        stripe
+        row-key="id"
+      >
+        <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="componentRow" />
+        <el-table-column label="列" align="center" prop="componentColumn" />
+      </el-table>
+      <!-- 分页 -->
+<!--      <Pagination-->
+<!--        :total="total"-->
+<!--        v-model:page="queryParams.pageNo"-->
+<!--        v-model:limit="queryParams.pageSize"-->
+<!--        @pagination="getList"-->
+<!--      />-->
+    </div>
+    </div>
 </template>
 
+<script setup lang="ts">
+
+import {Delete, DocumentAdd, Plus} from "@element-plus/icons-vue";
+import {ref} from "vue";
+
+
+
+// const route = useRoute()
+// const router = useRouter()
+// 响应式数据
+const tableData = ref([])
+
+const handleSelectionChange=()=>{
+  console.log("handleSelectionChange")
+}
+</script>
+
 <style scoped lang="scss">
 
 </style>

src/views/system/rolePage/createForm.vue

@@ -1,38 +1,40 @@
 <template>
-  <div>
-    <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>
-        <el-form-item label="页面" prop="pageType">
-          <el-input style="width: 300px" v-model="formData.pageType" placeholder="请输入页面" />
-        </el-form-item>
-        <el-button type="primary" style="margin-left: 500px" @click="SaveWorkflowMode"
+  <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>
+      <el-form-item label="页面" prop="pageType">
+        <el-input style="width: 300px" v-model="formData.pageType" placeholder="请输入页面" />
+      </el-form-item>
+      <el-button type="primary" style="margin-left: 500px" @click="submitForm"
         >保 存
-        </el-button>
-        <el-button @click="goBack">取 消</el-button>
-      </el-form>
-      <el-radio-group v-model="tabPosition" class="mb-15px" @change="handleTabChange">
-        <el-radio-button label="first">表格视图</el-radio-button>
-        <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" />
-      </ContentWrap>
+      </el-button>
+      <el-button @click="goBack">取 消</el-button>
+    </el-form>
+  </ContentWrap>
+  <ContentWrap v-if="showTable">
+    <!--      底部数据表格和预览-->
+    <el-radio-group v-model="tabPosition" class="mb-15px" @change="handleTabChange">
+      <el-radio-button label="first">表格视图</el-radio-button>
+      <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" />
     </ContentWrap>
-  </div>
+  </ContentWrap>
 </template>
 <script setup lang="ts">
-import TableView from "./TableView.vue";
-import LookView from "./LookView.vue";
+import TableView from './TableView.vue'
+import LookView from './LookView.vue'
 import * as rolePageApi from '@/api/system/rolePage/index'
-import {insertRolePage, updateRolePage} from "@/api/system/rolePage/index";
+
 
 const { t } = useI18n() // 国际化
 const message = useMessage() // 消息弹窗
@@ -41,11 +43,11 @@ const formLoading = ref(false) // 表单的加载中
 const tabPosition = ref('first')
 const enableStepTable = ref(false) //新增控制表格新增 模板导入 删除不能点击或者出现
 const formData = ref({
-  roleId:undefined,
+  roleId: undefined,
   roleName: undefined,
-  pageType: undefined,
+  pageType: undefined
 })
-
+const showTable=ref(false);
 
 // 监听数据变化，设置未保存标记
 const hasUnsavedChanges = ref(false) // 标记是否有未保存的更改
@@ -54,7 +56,7 @@ const handleTabChange = (newTab: string) => {
   tabPosition.value = newTab
 }
 
-const SaveWorkflowMode = async () => {
+const submitForm = async () => {
   try {
     let data
     let successMessage
@@ -87,7 +89,7 @@ const SaveWorkflowMode = async () => {
 // 监听数据变化，设置未保存标记
 watch(
   () => ({
-    roleName: formData.value.roleName,
+    roleName: formData.value.roleName
   }),
   () => {
     hasUnsavedChanges.value = true
@@ -124,11 +126,6 @@ const goBack = () => {
   // tagsViewStore.delVisitedView(currentRoute)
   router.push('/system/rolePage')
 }
-
 </script>
 
-
-
-<style scoped lang="scss">
-
-</style>
+<style scoped lang="scss"></style>