更新

src/main.js

@@ -6,6 +6,7 @@ import { createPinia } from "pinia";
 
 import ElementPlus from "element-plus"; //引入element-plus库
 import * as ElementPlusIconsVue from "@element-plus/icons-vue";
+import zhCn from 'element-plus/dist/locale/zh-cn.mjs'
 import { ElMessage } from "element-plus";
 import VForm3 from "vform3-builds"; //引入VForm3库
 
@@ -89,4 +90,9 @@ for (const [key, component] of Object.entries(ElementPlusIconsVue)) {
 
 app.directive("permission", permission);
 
-app.use(ElementPlus).use(VForm3).use(createPinia()).use(router).mount("#app");
+app
+  .use(ElementPlus, { locale: zhCn })
+  .use(VForm3)
+  .use(createPinia())
+  .use(router)
+  .mount("#app");

src/views/field/index.vue

@@ -3,17 +3,6 @@
     <TableBody v-bind="data" @handleTableHeader="handleTableHeader" @handleTablePagination="handleTablePagination"
       ref="TableBodyRef">
 
-      <!-- 右侧顶部插槽 -->
-      <template #TableHeaderRight="{ selectData }">
-        <el-select v-model="reqParams.deptId" placeholder="请选择部门" @change="init" clearable class="status-select">
-          <el-option v-for="item in bmOptions" :key="item.value" :label="item.label" :value="item.value" />
-        </el-select>
-
-        <el-select v-model="reqParams.projectId" placeholder="请选择项目" @change="init" clearable class="status-select">
-          <el-option v-for="item in bmOptions" :key="item.value" :label="item.label" :value="item.value" />
-        </el-select>
-      </template>
-
       <!-- 表格插槽使用 -->
       <template #state="{ currentCol, currentData }">
         <span>{{ currentData == '0' ? "未配置" : "已配置" }}</span>
@@ -27,11 +16,14 @@
 
 <script setup>
 import { ref, reactive, onMounted } from "vue";
+import { useRouter, useRoute } from "vue-router"
 import TableBody from "@/components/TableBody/TableBody.vue";
 import FormDialog from "@/components/FormDialog/FormDialog.vue";
 import http from "@/utils/request.js";
 import { ElMessage } from "element-plus";
 
+const route = useRoute()
+
 const bmOptions = ref([])
 const TableBodyRef = ref();
 const data = reactive({
@@ -50,49 +42,7 @@ const data = reactive({
     },
     {
       buttons: [
-        {
+        // "search"
-          type: "custom", // 自定义按钮（支持 custom 默认按钮、popconfirm 气泡确认 ）,
-          name: "ruleButton", // 为 handleTableHeader 事件的第一个返回值，注意不能重复
-          title: "配置规则", // 按钮名称
-          icon: "Switch", // 自定义左侧按钮 （ 目前只支持 element 的 icon  ）
-          // 以哪种方式禁用按钮，组件自带两种禁用方式 1.只有选择一条时开启按钮 'single'，2. 有选择任意条数时开启按钮 'Arbitrary '
-          // 3.自定义方法 'custom '，4.默认无条件开启，不设置即可
-          isOpen: "custom",
-          // 设置 isOpen 为 custom 时设置生效（切必须填写该字段），Boolean | 变量 | function
-          disabled: false,
-          // permission: false, // 权限
-        }, {
-          type: "custom", // 自定义按钮（支持 custom 默认按钮、popconfirm 气泡确认 ）,
-          name: "dataButton", // 为 handleTableHeader 事件的第一个返回值，注意不能重复
-          title: "数据", // 按钮名称
-          icon: "Switch", // 自定义左侧按钮 （ 目前只支持 element 的 icon  ）
-          // 以哪种方式禁用按钮，组件自带两种禁用方式 1.只有选择一条时开启按钮 'single'，2. 有选择任意条数时开启按钮 'Arbitrary '
-          // 3.自定义方法 'custom '，4.默认无条件开启，不设置即可
-          isOpen: "custom",
-          // 设置 isOpen 为 custom 时设置生效（切必须填写该字段），Boolean | 变量 | function
-          disabled: false,
-          // permission: false, // 权限
-        }, {
-          type: "custom", // 自定义按钮（支持 custom 默认按钮、popconfirm 气泡确认 ）,
-          name: "Button", // 为 handleTableHeader 事件的第一个返回值，注意不能重复
-          title: "字段管理", // 按钮名称
-          icon: "Switch", // 自定义左侧按钮 （ 目前只支持 element 的 icon  ）
-          // 以哪种方式禁用按钮，组件自带两种禁用方式 1.只有选择一条时开启按钮 'single'，2. 有选择任意条数时开启按钮 'Arbitrary '
-          // 3.自定义方法 'custom '，4.默认无条件开启，不设置即可
-          isOpen: "custom",
-          // 设置 isOpen 为 custom 时设置生效（切必须填写该字段），Boolean | 变量 | function
-          disabled: false,
-          // permission: false, // 权限
-        },
-        
-        {
-          name: "mixInput", // 混合筛选
-          options: [
-            { label: '表中文名', value: 'name' },
-            { label: '表英文名', value: 'ename' },
-          ],
-          // permission: false, // 权限
-        },
       ],
     },
     // 基础操作按钮权限（没有配置 permission 的按钮或者其他搜索等）
@@ -264,12 +214,10 @@ const handleDelete = (data) => {
 
 // 详情
 const handleDetail = (val) => {
-  console.log('val', val);
   formDialogStatus.value = 'detail'
   const id = val[0].id
   FormDialogData.title = '详情'
-  http.get(`/api/system/metadata/${id}`).then(response => {
+  http.get(`/api/metadataColumn`, { id }).then(response => {
-    console.log('response', response);
     FormDialogData.formJsonData = response.data
     formDialog.value = true
     FormDialogData.formJosnDisabled = true
@@ -291,62 +239,45 @@ const FormDialogData = reactive({
   formType: 'json', // 'slot' 默认为 slot  | 'json' （后台接口返回就配置 json）
   // 注意：以下配置为 json 时才有效
   formJosnRules: {
-    deptId: [
-      { required: true, message: '请选择所属部门', trigger: 'blur' },
-    ],
-    projectId: [
-      { required: true, message: '请填写所属项目', trigger: 'blur' },
-    ],
     name: [
-      { required: true, message: '请填写中文表名', trigger: 'blur' },
+      { required: true, message: '请填写中文字段名', trigger: 'blur' },
     ],
     ename: [
-      { required: true, message: '请填写英文表名', trigger: 'blur' },
+      { required: true, message: '请填写英文字段名', trigger: 'blur' },
     ],
     intro: [
       { required: true, message: '请填写简介', trigger: 'blur' },
     ],
-    state: [
+    type: [
-      { required: true, message: '请选择配置状态', trigger: 'blur' },
+      { required: true, message: '请填写字段类型', trigger: 'blur' },
     ],
-    dataNum: [
+    isPk: [
-      { required: true, message: '请填写数据量', trigger: 'blur' },
+      { required: true, message: '请选择是否主键', trigger: 'blur' },
+    ],
+    isRequired: [
+      { required: true, message: '请选择是否必填', trigger: 'blur' },
+    ],
+    sortNo: [
+      { required: true, message: '请填写数排序', trigger: 'blur' },
     ],
   }, // 默认为{}，表单校验规则
   formJosnLabelWidth: 'auto', // 默认为 120px，表单 label 宽度
   // form 元素
   formJosnElement: [
-    {
-      type: 'tree-select', // 元素类型
-      cloSpan: 12, // 栅格布局所占份数 （默认24）
-      disabled: false, // 元素是否禁用（默认为false）
-      label: '所属部门', // 元素的 label
-      placeholder: '请选择所属部门', // 元素的 placeholder
-      model: 'deptId', // 元素 form 的 key
-      options: bmOptions // type 为 select 生效 （默认为 [] ）
-    },
     {
       type: 'input', // 元素类型
       cloSpan: 12, // 栅格布局所占份数 （默认24）
       disabled: false, // 元素是否禁用（默认为false）
-      label: '所属项目', // 元素的 label
+      label: '中文字段名', // 元素的 label
-      placeholder: '请填写所属项目', // 元素的 placeholder
+      placeholder: '请填写中文字段名', // 元素的 placeholder
-      model: 'projectId', // 元素 form 的 key
-    },
-    {
-      type: 'input', // 元素类型
-      cloSpan: 12, // 栅格布局所占份数 （默认24）
-      disabled: false, // 元素是否禁用（默认为false）
-      label: '中文表名', // 元素的 label
-      placeholder: '请填写中文表名', // 元素的 placeholder
       model: 'name', // 元素 form 的 key
     },
     {
       type: 'input', // 元素类型
       cloSpan: 12, // 栅格布局所占份数 （默认24）
       disabled: false, // 元素是否禁用（默认为false）
-      label: '英文表名', // 元素的 label
+      label: '英文字段名', // 元素的 label
-      placeholder: '请填写英文表名', // 元素的 placeholder
+      placeholder: '请填写英文字段名', // 元素的 placeholder
       model: 'ename', // 元素 form 的 key
     },
     {
@@ -357,32 +288,57 @@ const FormDialogData = reactive({
       placeholder: '请填写简介', // 元素的 placeholder
       model: 'intro', // 元素 form 的 key
     },
+    {
+      type: 'input', // 元素类型
+      cloSpan: 12, // 栅格布局所占份数 （默认24）
+      disabled: false, // 元素是否禁用（默认为false）
+      label: '字段类型', // 元素的 label
+      placeholder: '请填写字段类型', // 元素的 placeholder
+      model: 'type', // 元素 form 的 key
+    },
     {
       type: 'select', // 元素类型
       cloSpan: 12, // 栅格布局所占份数 （默认24）
       disabled: false, // 元素是否禁用（默认为false）
-      label: '配置状态', // 元素的 label
+      label: '是否主键', // 元素的 label
-      placeholder: '请选择配置状态', // 元素的 placeholder
+      placeholder: '请选择', // 元素的 placeholder
-      model: 'state', // 元素 form 的 key
+      model: 'isPk', // 元素 form 的 key
       options: [
         {
-          label: '启用',
+          label: '是',
-          value: "1",
+          value: 1,
         },
         {
-          label: '未启用',
+          label: '否',
-          value: "0",
+          value: 0,
+        },
+      ] // type 为 select 生效 （默认为 [] ）
+    },
+    {
+      type: 'select', // 元素类型
+      cloSpan: 12, // 栅格布局所占份数 （默认24）
+      disabled: false, // 元素是否禁用（默认为false）
+      label: '是否必填', // 元素的 label
+      placeholder: '请选择', // 元素的 placeholder
+      model: 'isRequired', // 元素 form 的 key
+      options: [
+        {
+          label: '是',
+          value: 1,
+        },
+        {
+          label: '否',
+          value: 0,
         },
       ] // type 为 select 生效 （默认为 [] ）
     },
-
     {
       type: 'number', // 元素类型
       cloSpan: 12, // 栅格布局所占份数 （默认24）
       disabled: false, // 元素是否禁用（默认为false）
-      label: '数据量', // 元素的 label
+      label: '排序', // 元素的 label
-      placeholder: '请填写数据量', // 元素的 placeholder
+      placeholder: '请填写排序', // 元素的 placeholder
-      model: 'dataNum', // 元素 form 的 key
+      model: 'sortNo', // 元素 form 的 key
     },
   ],
   formJosnDisabled: false, // 表单是否禁用
@@ -392,9 +348,10 @@ const FormDialogData = reactive({
 
 const handleSubmit = (formJsonValue) => {
   console.log(formJsonValue)
+  const metadataId = route.query.id
   switch (formDialogStatus.value) {
     case 'create':
-      http.post(`/api/system/metadata`, formJsonValue).then(response => {
+      http.post(`/api/metadataColumn`, { ...formJsonValue, metadataId }).then(response => {
         if (response.code == 200) {
           ElMessage({
             message: '新增成功',
@@ -406,18 +363,17 @@ const handleSubmit = (formJsonValue) => {
       })
       break;
     case 'edit':
-      formJsonValue.id = formJsonValue.id
+      // http.post(`/api/system/metadata`, formJsonValue).then(response => {
-      http.post(`/api/system/metadata`, formJsonValue).then(response => {
+      //   if (response.code == 200) {
-        if (response.code == 200) {
+      //     ElMessage({
-          ElMessage({
+      //       message: '编辑成功',
-            message: '编辑成功',
+      //       type: 'success',
-            type: 'success',
+      //     })
-          })
+      //     fromId.value = ''
-          fromId.value = ''
+      //     init()
-          init()
+      //     formDialog.value = false
-          formDialog.value = false
+      //   }
-        }
+      // })
-      })
       break;
     default:
       break;
@@ -429,27 +385,13 @@ const handleSubmit = (formJsonValue) => {
 const reqParams = reactive({
   page: data.pagination.current,
   size: data.pagination.pageSize,
-  deptId: undefined,
+  metadataId: route.query.id,
-  projectId: undefined,//	项目id
-  name: undefined,//	表中文名
-  ename: undefined, //表英文名
 })
 
-const handleMixInput = (val) => {
-  reqParams.name = undefined
-  reqParams.ename = undefined
-  if (val.seachMixSelect.value === '' || val.seachMixInput.value === '') {
-    init()
-    return
-  }
-  reqParams[val.seachMixSelect.value] = val.seachMixInput.value
-  init()
-}
-
 // 请求
 const init = () => {
   data.tableType.tableLoading = true
-  http.get(`/api/system/metadata`, reqParams).then(res => {
+  http.get(`/api/metadataColumn`, reqParams).then(res => {
     if (res.code == 200) {
       console.log(res.data)
       data.tableData = res.data.rows

src/views/metaData/index.vue

@@ -27,11 +27,14 @@
 
 <script setup>
 import { ref, reactive, onMounted } from "vue";
+import { useRouter } from "vue-router"
 import TableBody from "@/components/TableBody/TableBody.vue";
 import FormDialog from "@/components/FormDialog/FormDialog.vue";
 import http from "@/utils/request.js";
 import { ElMessage } from "element-plus";
 
+const router = useRouter()
+
 const bmOptions = ref([])
 const TableBodyRef = ref();
 const data = reactive({
@@ -57,7 +60,7 @@ const data = reactive({
           icon: "Switch", // 自定义左侧按钮 （ 目前只支持 element 的 icon  ）
           // 以哪种方式禁用按钮，组件自带两种禁用方式 1.只有选择一条时开启按钮 'single'，2. 有选择任意条数时开启按钮 'Arbitrary '
           // 3.自定义方法 'custom '，4.默认无条件开启，不设置即可
-          isOpen: "custom",
+          isOpen: "single",
           // 设置 isOpen 为 custom 时设置生效（切必须填写该字段），Boolean | 变量 | function
           disabled: false,
           // permission: false, // 权限
@@ -68,18 +71,18 @@ const data = reactive({
           icon: "Switch", // 自定义左侧按钮 （ 目前只支持 element 的 icon  ）
           // 以哪种方式禁用按钮，组件自带两种禁用方式 1.只有选择一条时开启按钮 'single'，2. 有选择任意条数时开启按钮 'Arbitrary '
           // 3.自定义方法 'custom '，4.默认无条件开启，不设置即可
-          isOpen: "custom",
+          isOpen: "single",
           // 设置 isOpen 为 custom 时设置生效（切必须填写该字段），Boolean | 变量 | function
           disabled: false,
           // permission: false, // 权限
         }, {
           type: "custom", // 自定义按钮（支持 custom 默认按钮、popconfirm 气泡确认 ）,
-          name: "Button", // 为 handleTableHeader 事件的第一个返回值，注意不能重复
+          name: "field", // 为 handleTableHeader 事件的第一个返回值，注意不能重复
           title: "字段管理", // 按钮名称
           icon: "Switch", // 自定义左侧按钮 （ 目前只支持 element 的 icon  ）
           // 以哪种方式禁用按钮，组件自带两种禁用方式 1.只有选择一条时开启按钮 'single'，2. 有选择任意条数时开启按钮 'Arbitrary '
           // 3.自定义方法 'custom '，4.默认无条件开启，不设置即可
-          isOpen: "custom",
+          isOpen: "single",
           // 设置 isOpen 为 custom 时设置生效（切必须填写该字段），Boolean | 变量 | function
           disabled: false,
           // permission: false, // 权限
@@ -213,6 +216,9 @@ const handleTableHeader = ({ type, data }) => {
     case "mixInput":
       handleMixInput(data);
       break;
+    case "field":
+      handleField(data);
+      break;
   }
 };
 // 表格分页事件
@@ -276,6 +282,18 @@ const handleDetail = (val) => {
   })
 }
 
+// 字段管理
+const handleField = (val) => {
+  const id = val[0].id
+  router.push({
+    path: '/dc/field',
+    query: {
+      id: id,
+    }
+  })
+
+}
+
 // 清空混合搜索
 // TableBodyRef.value.clearMixInput()