feat: 完成webfirst 数据表管理前端模块

Yi.Furion.Net6/Yi.Framework.Module/WebFirstManager/Impl/FieldService.cs

@@ -1,14 +1,20 @@
 using System;
 using System.Collections.Generic;
 using System.Linq;
+using System.Reflection;
 using System.Text;
 using System.Threading.Tasks;
+using EasyTool;
 using Furion.DependencyInjection;
 using Furion.DynamicApiController;
 using Microsoft.AspNetCore.Mvc;
+using SqlSugar;
+using Yi.Framework.Infrastructure.Ddd.Dtos;
 using Yi.Framework.Infrastructure.Ddd.Services;
+using Yi.Framework.Module.DictionaryManager.Dtos.DictionaryType;
 using Yi.Framework.Module.WebFirstManager.Dtos.Field;
 using Yi.Framework.Module.WebFirstManager.Entities;
+using Yi.Framework.Module.WebFirstManager.Enums;
 
 namespace Yi.Framework.Module.WebFirstManager.Impl
 {
@@ -16,7 +22,31 @@ namespace Yi.Framework.Module.WebFirstManager.Impl
     /// 字段管理
     /// </summary>
     [ApiDescriptionSettings("WebFirstManager")]
-    public class FieldService:CrudAppService<FieldEntity, FieldDto,long, FieldGetListInput> ,IFieldService,ITransient,IDynamicApiController
+    public class FieldService : CrudAppService<FieldEntity, FieldDto, long, FieldGetListInput>, IFieldService, ITransient, IDynamicApiController
     {
+        public async override Task<PagedResultDto<FieldDto>> GetListAsync([FromQuery] FieldGetListInput input)
+        {
+            RefAsync<int> total = 0;
+            var entities = await _DbQueryable.WhereIF(input.TableId is not null, x => x.TableId.Equals(input.TableId!))
+                      .WhereIF(input.Name is not null, x => x.Name!.Contains(input.Name!))
+
+                      .ToPageListAsync(input.PageNum, input.PageSize, total);
+
+            return new PagedResultDto<FieldDto>
+            {
+                Total = total,
+                Items = await MapToGetListOutputDtosAsync(entities)
+            };
+        }
+
+        /// <summary>
+        /// 获取类型枚举
+        /// </summary>
+        /// <returns></returns>
+        [Route("type")]
+        public  object GetFieldTypeEnum()
+        {
+            return typeof(FieldTypeEnum).GetFields(BindingFlags.Static | BindingFlags.Public).Select(x => new { lable = x.Name, value = (int)EnumUtil.GetValueByName<FieldTypeEnum>(x.Name) }).ToList();
+        }
     }
 }

Yi.Furion.Net6/Yi.Framework.Module/Yi.Framework.Module.xml

@@ -523,6 +523,12 @@
             字段管理
             </summary>
         </member>
+        <member name="M:Yi.Framework.Module.WebFirstManager.Impl.FieldService.GetFieldTypeEnum">
+            <summary>
+            获取类型枚举
+            </summary>
+            <returns></returns>
+        </member>
         <member name="M:Yi.Framework.Module.WebFirstManager.Impl.WebFirstService.PostWebBuildCodeAsync">
             <summary>
             Web To Code

Yi.Furion.Net6/Yi.Furion.Web.Core/Startup.cs

@@ -38,6 +38,7 @@ public class Startup : AppStartup
         {
             // 注册作业，并配置作业触发器
             //options.AddJob<TestJob>(Triggers.Period(10000));
+           //options.AddJob<SystemDataJob>(Triggers.Period(10000));
             options.AddJob<SystemDataJob>(Triggers.Cron("0 0 0,12 ? * ?", CronStringFormat.WithSeconds)); // 表示每天凌晨与12点
         });
         services.AddFileLogging("log/application-{0:yyyy}-{0:MM}-{0:dd}.log", options =>

Yi.RuoYi.Vue3/src/api/webfirst/fieldApi.js

@@ -0,0 +1,54 @@
+import request from '@/utils/request'
+
+// 分页查询
+export function listData(query) {
+  return request({
+    url: '/field',
+    method: 'get',
+    params: query
+  })
+}
+
+// type查询
+export function getType(query) {
+  return request({
+    url: '/field/type',
+    method: 'get',
+    params: query
+  })
+}
+
+
+// id查询
+export function getData(id) {
+  return request({
+    url: `/field/${id}`,
+    method: 'get'
+  })
+}
+
+// 新增
+export function addData(data) {
+  return request({
+    url: '/field',
+    method: 'post',
+    data: data
+  })
+}
+
+// 修改
+export function updateData(data) {
+  return request({
+    url: `/field/${data.id}`,
+    method: 'put',
+    data: data
+  })
+}
+
+// 删除
+export function delData(ids) {
+  return request({
+    url: `/field/${ids}`,
+    method: 'delete',
+  })
+}

Yi.RuoYi.Vue3/src/api/webfirst/tableApi.js

@@ -0,0 +1,44 @@
+import request from '@/utils/request'
+
+// 分页查询
+export function listData(query) {
+  return request({
+    url: '/table',
+    method: 'get',
+    params: query
+  })
+}
+
+// id查询
+export function getData(id) {
+  return request({
+    url: `/table/${id}`,
+    method: 'get'
+  })
+}
+
+// 新增
+export function addData(data) {
+  return request({
+    url: '/table',
+    method: 'post',
+    data: data
+  })
+}
+
+// 修改
+export function updateData(data) {
+  return request({
+    url: `/table/${data.id}`,
+    method: 'put',
+    data: data
+  })
+}
+
+// 删除
+export function delData(ids) {
+  return request({
+    url: `/table/${ids}`,
+    method: 'delete',
+  })
+}

Yi.RuoYi.Vue3/src/views/webfirst/table/components/FieldList.vue

@@ -1,190 +1,234 @@
-
 <template>
-   <div class="app-container">
-      <el-form :model="queryParams" ref="queryRef" :inline="true" v-show="showSearch" label-width="68px">
-         <el-form-item label="参数名称" prop="configName">
-            <el-input
-               v-model="queryParams.configName"
-               placeholder="请输入参数名称"
-               clearable
-               style="width: 240px"
-               @keyup.enter="handleQuery"
-            />
-         </el-form-item>
-         <el-form-item label="参数键名" prop="configKey">
-            <el-input
-               v-model="queryParams.configKey"
-               placeholder="请输入参数键名"
-               clearable
-               style="width: 240px"
-               @keyup.enter="handleQuery"
-            />
-         </el-form-item>
-         <el-form-item label="系统内置" prop="configType">
-            <el-select v-model="queryParams.configType" placeholder="系统内置" clearable>
-               <el-option
-                  v-for="dict in sys_yes_no"
-                  :key="dict.value"
-                  :label="dict.label"
-                  :value="dict.value"
-               />
-            </el-select>
-         </el-form-item>
-         <el-form-item label="创建时间" style="width: 308px;">
-            <el-date-picker
-               v-model="dateRange"
-               value-format="YYYY-MM-DD"
-               type="daterange"
-               range-separator="-"
-               start-placeholder="开始日期"
-               end-placeholder="结束日期"
-            ></el-date-picker>
-         </el-form-item>
-         <el-form-item>
-            <el-button type="primary" icon="Search" @click="handleQuery">搜索</el-button>
-            <el-button icon="Refresh" @click="resetQuery">重置</el-button>
-         </el-form-item>
-      </el-form>
+  <div class="app-container">
+    <el-form
+      :model="queryParams"
+      ref="queryRef"
+      :inline="true"
+      v-show="showSearch"
+      label-width="68px"
+    >
 
-      <el-row :gutter="10" class="mb8">
-         <el-col :span="1.5">
-            <el-button
-               type="primary"
-               plain
-               icon="Plus"
-               @click="handleAdd"
-               v-hasPermi="['system:config:add']"
-            >新增</el-button>
-         </el-col>
-         <el-col :span="1.5">
-            <el-button
-               type="success"
-               plain
-               icon="Edit"
-               :disabled="single"
-               @click="handleUpdate"
-               v-hasPermi="['system:config:edit']"
-            >修改</el-button>
-         </el-col>
-         <el-col :span="1.5">
-            <el-button
-               type="danger"
-               plain
-               icon="Delete"
-               :disabled="multiple"
-               @click="handleDelete"
-               v-hasPermi="['system:config:remove']"
-            >删除</el-button>
-         </el-col>
-         <el-col :span="1.5">
-            <el-button
-               type="warning"
-               plain
-               icon="Download"
-               @click="handleExport"
-               v-hasPermi="['system:config:export']"
-            >导出</el-button>
-         </el-col>
-         <el-col :span="1.5">
-            <el-button
-               type="danger"
-               plain
-               icon="Refresh"
-               @click="handleRefreshCache"
-               v-hasPermi="['system:config:remove']"
-            >刷新缓存</el-button>
-         </el-col>
-         <right-toolbar v-model:showSearch="showSearch" @queryTable="getList"></right-toolbar>
-      </el-row>
+       <el-form-item label="当前选择表："  label-width="120px" >
+      
+      <el-input v-if="props.table.name!=null" v-model="props.table.name" disabled />
+     <span  v-else>无</span>
+    </el-form-item>
 
-      <el-table v-loading="loading" :data="configList" @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="configName" :show-overflow-tooltip="true" />
-         <el-table-column label="参数键名" align="center" prop="configKey" :show-overflow-tooltip="true" />
-         <el-table-column label="参数键值" align="center" prop="configValue" />
-         <el-table-column label="系统内置" align="center" prop="configType">
-            <template #default="scope">
-               <dict-tag :options="sys_yes_no" :value="scope.row.configType" />
-            </template>
-         </el-table-column>
-         <el-table-column label="备注" align="center" prop="remark" :show-overflow-tooltip="true" />
-         <el-table-column label="创建时间" align="center" prop="creationTime" width="180">
-            <template #default="scope">
-               <span>{{ parseTime(scope.row.creationTime) }}</span>
-            </template>
-         </el-table-column>
-         <el-table-column label="操作" align="center" width="150" class-name="small-padding fixed-width">
-            <template #default="scope">
-               <el-button
-                  type="text"
-                  icon="Edit"
-                  @click="handleUpdate(scope.row)"
-                  v-hasPermi="['system:config:edit']"
-               >修改</el-button>
-               <el-button
-                  type="text"
-                  icon="Delete"
-                  @click="handleDelete(scope.row)"
-                  v-hasPermi="['system:config:remove']"
-               >删除</el-button>
-            </template>
-         </el-table-column>
-      </el-table>
+      <el-form-item label="字段名称" prop="name">
+        <el-input
+          v-model="queryParams.name"
+          placeholder="请输入字段名称"
+          clearable
+          style="width: 240px"
+          @keyup.enter="handleQuery"
+        />
+      </el-form-item>
+      <el-form-item>
+        <el-button type="primary" icon="Search" @click="handleQuery"
+          >搜索</el-button
+        >
+        <el-button icon="Refresh" @click="resetQuery">重置</el-button>
+      </el-form-item>
+    </el-form>
 
-      <pagination
-         v-show="total > 0"
-         :total="Number(total)"
-         v-model:page="queryParams.pageNum"
-         v-model:limit="queryParams.pageSize"
-         @pagination="getList"
+    <el-row :gutter="10" class="mb8">
+      <el-col :span="1.5">
+        <el-button
+          type="primary"
+          plain
+          icon="Plus"
+          @click="handleAdd"
+          v-hasPermi="['system:config:add']"
+          >新增</el-button
+        >
+      </el-col>
+      <el-col :span="1.5">
+        <el-button
+          type="success"
+          plain
+          icon="Edit"
+          :disabled="single"
+          @click="handleUpdate"
+          v-hasPermi="['system:config:edit']"
+          >修改</el-button
+        >
+      </el-col>
+      <el-col :span="1.5">
+        <el-button
+          type="danger"
+          plain
+          icon="Delete"
+          :disabled="multiple"
+          @click="handleDelete"
+          v-hasPermi="['system:config:remove']"
+          >删除</el-button
+        >
+      </el-col>
+      <el-col :span="1.5">
+        <el-button
+          type="warning"
+          plain
+          icon="Download"
+          @click="handleExport"
+          v-hasPermi="['system:config:export']"
+          >导出</el-button
+        >
+      </el-col>
+
+      <right-toolbar
+        v-model:showSearch="showSearch"
+        @queryTable="getList"
+      ></right-toolbar>
+    </el-row>
+
+    <el-table
+      v-loading="loading"
+      :data="dataList"
+      @selection-change="handleSelectionChange"
+    >
+      <el-table-column type="selection" width="55" align="center" />
+      <el-table-column label="名称" align="center" prop="name" />
+      <el-table-column label="类型" align="center" prop="fieldType" >
+    <template #default="scope">
+  <el-tag>{{getFieldTypeEnum(scope.row.fieldType)}}</el-tag>
+    </template>
+          </el-table-column>
+
+      <el-table-column label="长度" align="center" prop="length" />
+
+      <el-table-column label="是否必填" align="center" prop="isRequired" >
+           <template #default="scope">
+                  <el-switch disabled  v-model="scope.row.isRequired" />
+           </template>
+      </el-table-column>
+
+      <el-table-column label="是否主键" align="center" prop="isKey" >
+            <template #default="scope">
+                  <el-switch disabled  v-model="scope.row.isKey" />
+           </template>
+                 </el-table-column>
+      <el-table-column label="是否自增" align="center" prop="isAutoAdd" >
+          <template #default="scope">
+                  <el-switch disabled  v-model="scope.row.isAutoAdd" />
+           </template>
+                 </el-table-column>
+
+      <el-table-column
+        label="描述"
+        align="center"
+        prop="Description"
+        :show-overflow-tooltip="true"
       />
+      <el-table-column
+        label="操作"
+        align="center"
+        width="150"
+        class-name="small-padding fixed-width"
+      >
+        <template #default="scope">
+          <el-button
+            type="text"
+            icon="Edit"
+            @click="handleUpdate(scope.row)"
+            v-hasPermi="['system:config:edit']"
+            >修改</el-button
+          >
+          <el-button
+            type="text"
+            icon="Delete"
+            @click="handleDelete(scope.row)"
+            v-hasPermi="['system:config:remove']"
+            >删除</el-button
+          >
+        </template>
+      </el-table-column>
+    </el-table>
 
-      <!-- 添加或修改参数配置对话框 -->
-      <el-dialog :title="title" v-model="open" width="500px" append-to-body>
-         <el-form ref="configRef" :model="form" :rules="rules" label-width="80px">
-            <el-form-item label="参数名称" prop="configName">
-               <el-input v-model="form.configName" placeholder="请输入参数名称" />
-            </el-form-item>
-            <el-form-item label="参数键名" prop="configKey">
-               <el-input v-model="form.configKey" placeholder="请输入参数键名" />
-            </el-form-item>
-            <el-form-item label="参数键值" prop="configValue">
-               <el-input v-model="form.configValue" placeholder="请输入参数键值" />
-            </el-form-item>
-            <el-form-item label="系统内置" prop="configType">
-               <el-radio-group v-model="form.configType">
-                  <el-radio
-                     v-for="dict in sys_yes_no"
-                     :key="dict.value"
-                     :label="dict.value"
-                  >{{ dict.label }}</el-radio>
-               </el-radio-group>
-            </el-form-item>
-            <el-form-item label="备注" prop="remark">
-               <el-input v-model="form.remark" type="textarea" placeholder="请输入内容" />
-            </el-form-item>
-         </el-form>
-         <template #footer>
-            <div class="dialog-footer">
-               <el-button type="primary" @click="submitForm">确 定</el-button>
-               <el-button @click="cancel">取 消</el-button>
-            </div>
-         </template>
-      </el-dialog>
-   </div>
+    <pagination
+      v-show="total > 0"
+      :total="Number(total)"
+      v-model:page="queryParams.pageNum"
+      v-model:limit="queryParams.pageSize"
+      @pagination="getList"
+    />
+
+    <!-- 添加或修改字段配置对话框 -->
+    <el-dialog :title="title" v-model="open" width="500px" append-to-body>
+      <el-form ref="dataRef" :model="form" :rules="rules" label-width="80px">
+        <el-form-item label="名称" prop="name">
+          <el-input v-model="form.name" placeholder="请输入字段名称" />
+        </el-form-item>
+        <el-form-item label="类型" prop="fieldType">
+          <el-select
+            v-model="form.fieldType"
+            class="m-2"
+            placeholder="请选择一个类型"
+            size="large"
+          >
+            <el-option
+              v-for="item in fieldList"
+              :key="item.value"
+              :label="item.lable"
+              :value="item.value"
+            />
+          </el-select>
+        </el-form-item>
+        <el-form-item label="长度" prop="length">
+          <el-input v-model="form.length" placeholder="请输入字段长度" />
+        </el-form-item>
+        <el-form-item label="是否必须" prop="isRequired">
+          <el-switch v-model="form.isRequired" />
+        </el-form-item>
+
+        <el-form-item label="是否主键" prop="isKey">
+          <el-switch v-model="form.isKey" />
+        </el-form-item>
+
+        <el-form-item label="是否自增" prop="isAutoAdd">
+          <el-switch v-model="form.isAutoAdd" />
+        </el-form-item>
+
+         <el-form-item label="字段排序" prop="orderNum">
+            <el-input-number v-model="form.orderNum" />
+        </el-form-item>
+
+
+        <el-form-item label="字段描述" prop="description">
+          <el-input
+            v-model="form.description"
+            type="textarea"
+            placeholder="请输入字段描述"
+          />
+        </el-form-item>
+      </el-form>
+      <template #footer>
+        <div class="dialog-footer">
+          <el-button type="primary" @click="submitForm">确 定</el-button>
+          <el-button @click="cancel">取 消</el-button>
+        </div>
+      </template>
+    </el-dialog>
+  </div>
 </template>
 
-<script setup name="Config">
-
-import useField from '../hooks/useField'
-const {field}=useField();
-import { listConfig, getConfig, delConfig, addConfig, updateConfig, refreshCache } from "@/api/system/config";
+<script setup>
+import {
+  listData,
+  getData,
+  addData,
+  updateData,
+  delData,
+  getType
+} from "@/api/webfirst/fieldApi";
+import { computed, onMounted, defineProps, ref } from "vue";
 
 const { proxy } = getCurrentInstance();
 const { sys_yes_no } = proxy.useDict("sys_yes_no");
+const props = defineProps(["table"]);
 
-const configList = ref([]);
+const tableOptions = computed(() => props.table);
+
+const dataList = ref([]);
 const open = ref(false);
 const loading = ref(true);
 const showSearch = ref(true);
@@ -194,30 +238,56 @@ const multiple = ref(true);
 const total = ref(0);
 const title = ref("");
 const dateRange = ref([]);
-
+const fieldList=ref([]);
 const data = reactive({
-  form: {},
+  form: {
+    tableId: props.table.id,
+    orderNum:0
+  },
   queryParams: {
     pageNum: 1,
     pageSize: 10,
-    configName: undefined,
-    configKey: undefined,
-    configType: undefined
+    name: undefined,
+    // props.table.id
   },
   rules: {
-    configName: [{ required: true, message: "参数名称不能为空", trigger: "blur" }],
-    configKey: [{ required: true, message: "参数键名不能为空", trigger: "blur" }],
-    configValue: [{ required: true, message: "参数键值不能为空", trigger: "blur" }]
-  }
+    name: [{ required: true, message: "字段名称不能为空", trigger: "blur" }],
+    fieldType: [
+      { required: true, message: "字段类型不能为空", trigger: "blur" },
+    ],
+    //  configValue: [{ required: true, message: "字段键值不能为空", trigger: "blur" }]
+  },
 });
 
 const { queryParams, form, rules } = toRefs(data);
 
-/** 查询参数列表 */
+const getFieldTypeEnum=(field)=>{
+   return fieldList.value.filter(x=>x.value==field)[0].lable;
+}
+
+watch(
+  () => props,
+  (val) => {
+    getList();
+  },
+  { deep: true }
+);
+
+function getTypeList()
+{
+getType().then((response)=>{
+fieldList.value=response.data;
+});
+}
+
+/** 查询字段列表 */
 function getList() {
   loading.value = true;
-  listConfig(proxy.addDateRange(queryParams.value, dateRange.value)).then(response => {
-    configList.value = response.data.items;
+  listData({
+    ...proxy.addDateRange(queryParams.value, dateRange.value),
+    tableId: props.table.id,
+  }).then((response) => {
+    dataList.value = response.data.items;
     total.value = response.data.total;
     loading.value = false;
   });
@@ -230,15 +300,19 @@ function cancel() {
 /** 表单重置 */
 function reset() {
   form.value = {
-   id: undefined,
-    configName: undefined,
-    configKey: undefined,
-    configValue: undefined,
-    configType: "Y",
-    remark: undefined,
-    state: true
+    id: undefined,
+    name: undefined,
+    description: undefined,
+    orderNum: undefined,
+    length: undefined,
+    fieldType: undefined,
+    isRequired: false,
+    isKey: false,
+    isAutoAdd: false,
+    tableId: props.table.id,
+    orderNum:0
   };
-  proxy.resetForm("configRef");
+  proxy.resetForm("dataRef");
 }
 /** 搜索按钮操作 */
 function handleQuery() {
@@ -253,38 +327,43 @@ function resetQuery() {
 }
 /** 多选框选中数据 */
 function handleSelectionChange(selection) {
-  ids.value = selection.map(item => item.id);
+  ids.value = selection.map((item) => item.id);
   single.value = selection.length != 1;
   multiple.value = !selection.length;
 }
 /** 新增按钮操作 */
 function handleAdd() {
+   if(props.table.id==undefined)
+   {
+      proxy.$modal.msgWarning('请先选择一张表后再添加字段');
+      return;
+   }
   reset();
   open.value = true;
-  title.value = "添加参数";
+  title.value = "添加字段";
 }
 /** 修改按钮操作 */
 function handleUpdate(row) {
   reset();
   const configId = row.id || ids.value;
-  getConfig(configId).then(response => {
+  getData(configId).then((response) => {
     form.value = response.data;
     open.value = true;
-    title.value = "修改参数";
+    title.value = "修改字段";
   });
 }
 /** 提交按钮 */
 function submitForm() {
-  proxy.$refs["configRef"].validate(valid => {
+  proxy.$refs["dataRef"].validate((valid) => {
     if (valid) {
       if (form.value.id != undefined) {
-        updateConfig(form.value).then(response => {
+        updateData(form.value).then((response) => {
           proxy.$modal.msgSuccess("修改成功");
           open.value = false;
           getList();
         });
       } else {
-        addConfig(form.value).then(response => {
+        addData(form.value).then((response) => {
           proxy.$modal.msgSuccess("新增成功");
           open.value = false;
           getList();
@@ -296,18 +375,26 @@ function submitForm() {
 /** 删除按钮操作 */
 function handleDelete(row) {
   const configIds = row.id || ids.value;
-  proxy.$modal.confirm('是否确认删除参数编号为"' + configIds + '"的数据项？').then(function () {
-    return delConfig(configIds);
-  }).then(() => {
-    getList();
-    proxy.$modal.msgSuccess("删除成功");
-  }).catch(() => {});
+  proxy.$modal
+    .confirm('是否确认删除字段编号为"' + configIds + '"的数据项？')
+    .then(function () {
+      return delData(configIds);
+    })
+    .then(() => {
+      getList();
+      proxy.$modal.msgSuccess("删除成功");
+    })
+    .catch(() => {});
 }
 /** 导出按钮操作 */
 function handleExport() {
-  proxy.download("system/config/export", {
-    ...queryParams.value
-  }, `config_${new Date().getTime()}.xlsx`);
+  proxy.download(
+    "system/config/export",
+    {
+      ...queryParams.value,
+    },
+    `config_${new Date().getTime()}.xlsx`
+  );
 }
 /** 刷新缓存按钮操作 */
 function handleRefreshCache() {
@@ -315,6 +402,6 @@ function handleRefreshCache() {
     proxy.$modal.msgSuccess("刷新缓存成功");
   });
 }
-
+getTypeList();
 getList();
 </script>

Yi.RuoYi.Vue3/src/views/webfirst/table/components/TableList.vue

@@ -1,46 +1,32 @@
 <template>
- 
-      <h5 class="mb-2">   {{table}}</h5>
+      <h3 class="title">数据表选择</h3>
       <el-menu
         default-active="2"
         class="el-menu-vertical-demo"
-        @open="handleOpen"
-        @close="handleClose"
       >
-
- <el-menu-item index="1">
+      <el-menu-item  v-for="(item,i) in dataList" :index="'data-'+i" :key="i" @click="menuClick(item)">
           <el-icon><setting /></el-icon>
-          <span>Navigator Four</span>
-        </el-menu-item>
-         <el-menu-item index="2">
-          <el-icon><setting /></el-icon>
-          <span>Navigator Four</span>
-        </el-menu-item>
-         <el-menu-item index="3">
-          <el-icon><setting /></el-icon>
-          <span>Navigator Four</span>
-        </el-menu-item>
-         <el-menu-item index="4">
-          <el-icon><setting /></el-icon>
-          <span>Navigator Four</span>
-        </el-menu-item>
-        <el-menu-item index="5">
-          <el-icon><setting /></el-icon>
-          <span>Navigator Four</span>
-        </el-menu-item>
-      </el-menu>
+          <span>{{item.name}}</span>
+      </el-menu-item>
+  </el-menu>
 </template>
 
 <script lang="ts" setup>
-
-
 import useTable from '../hooks/useTable'
-const {table}=useTable();
+const emit = defineEmits(['selectTable'])
 
-const handleOpen = (key, keyPath) => {
-  console.log(key, keyPath)
-}
-const handleClose = (key, keyPath) => {
-  console.log(key, keyPath)
+function menuClick(item) {
+  emit('selectTable',item)
 }
+const {dataList}=useTable();
 </script>
+<style scoped>
+.el-menu-item{
+  justify-content: center;
+  max-height: 1000px;
+}
+.title
+{
+  text-align: center;
+}
+</style>

Yi.RuoYi.Vue3/src/views/webfirst/table/hooks/useField.js

@@ -1,9 +0,0 @@
-
-const useField=()=>{
-    const field=ref("zd")
-    onMounted(() => {
-        console.log(`the component is now mounted. field`)
-      });
-return {field};
-}
-export default useField;

Yi.RuoYi.Vue3/src/views/webfirst/table/hooks/useTable.js

@@ -1,9 +1,11 @@
+import {listData} from "@/api/webfirst/tableApi.js"
 
 const useTable=()=>{
-    const table=ref("数据表选择")
-    onMounted(() => {
-        console.log(`the component is now mounted. table`)
+    const dataList=ref([]);
+    onMounted( async() => {
+    const response= await listData();
+    dataList.value=response.data.items;
       });
-      return {table};
+    return {dataList};
 }
 export default useTable;

Yi.RuoYi.Vue3/src/views/webfirst/table/index.vue

@@ -1,12 +1,21 @@
 <template>
     <el-row>
-   <el-col  :span="4"> <TableList></TableList></el-col>
-  <el-col  :span="20">   <FieldList class="fileList"></FieldList></el-col>
+    <el-col  :span="4"> <TableList @selectTable="selectTable"></TableList></el-col>
+    <el-col  :span="20">   <FieldList class="fileList" :table="table"></FieldList></el-col>
     </el-row>
 </template>
 <script setup>
+import { ref ,watch} from 'vue'
 import FieldList from './components/FieldList.vue'
 import TableList from './components/TableList.vue'
+const table=ref({});
+const options = ref({})
+const selectTable=(table)=>{
+options.value = table
+}
+watch(() => options.value,val => {
+    table.value = val
+},{deep:true})
 </script>
 <style scoped>
 .fileList{