更新

2023-07-12 11:51:21 +08:00 · 2023-07-12 11:51:21 +08:00 · 583646d0a8
parent f137561d6e
commit 583646d0a8
4 changed files with 137 additions and 171 deletions
--- a/src/main.js
+++ b/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");
--- a/src/views/field/index.vue
+++ b/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: [
-        {
-          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, // 权限
-        },
+        // "search"
      ],
    },
    // 基础操作按钮权限（没有配置 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 => {
-    console.log('response', response);
+  http.get(`/api/metadataColumn`, { id }).then(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: [
-      { required: true, message: '请选择配置状态', trigger: 'blur' },
+    type: [
+      { required: true, message: '请填写字段类型', trigger: 'blur' },
    ],
-    dataNum: [
-      { required: true, message: '请填写数据量', trigger: 'blur' },
+    isPk: [
+      { 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
-      placeholder: '请填写所属项目', // 元素的 placeholder
-      model: 'projectId', // 元素 form 的 key
-    },
-    {
-      type: 'input', // 元素类型
-      cloSpan: 12, // 栅格布局所占份数 （默认24）
-      disabled: false, // 元素是否禁用（默认为false）
-      label: '中文表名', // 元素的 label
-      placeholder: '请填写中文表名', // 元素的 placeholder
+      label: '中文字段名', // 元素的 label
+      placeholder: '请填写中文字段名', // 元素的 placeholder
      model: 'name', // 元素 form 的 key
    },
    {
      type: 'input', // 元素类型
      cloSpan: 12, // 栅格布局所占份数 （默认24）
      disabled: false, // 元素是否禁用（默认为false）
-      label: '英文表名', // 元素的 label
-      placeholder: '请填写英文表名', // 元素的 placeholder
+      label: '英文字段名', // 元素的 label
+      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
-      placeholder: '请选择配置状态', // 元素的 placeholder
-      model: 'state', // 元素 form 的 key
+      label: '是否主键', // 元素的 label
+      placeholder: '请选择', // 元素的 placeholder
+      model: 'isPk', // 元素 form 的 key
      options: [
        {
-          label: '启用',
-          value: "1",
+          label: '是',
+          value: 1,
        },
        {
-          label: '未启用',
-          value: "0",
+          label: '否',
+          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
-      placeholder: '请填写数据量', // 元素的 placeholder
-      model: 'dataNum', // 元素 form 的 key
+      label: '排序', // 元素的 label
+      placeholder: '请填写排序', // 元素的 placeholder
+      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 => {
-        if (response.code == 200) {
-          ElMessage({
-            message: '编辑成功',
-            type: 'success',
-          })
-          fromId.value = ''
-          init()
-          formDialog.value = false
-        }
-      })
+      // http.post(`/api/system/metadata`, formJsonValue).then(response => {
+      //   if (response.code == 200) {
+      //     ElMessage({
+      //       message: '编辑成功',
+      //       type: 'success',
+      //     })
+      //     fromId.value = ''
+      //     init()
+      //     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,
-  projectId: undefined,//	项目id
-  name: undefined,//	表中文名
-  ename: undefined, //表英文名
+  metadataId: route.query.id,
 })

-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
--- a/src/views/metaData/index.vue
+++ b/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()