From f137561d6e221374efeabe5f32590255d72050f8 Mon Sep 17 00:00:00 2001
From: =?UTF-8?q?=E5=8D=97=E6=80=9D?= <965386816@qq.com>
Date: Wed, 12 Jul 2023 10:36:35 +0800
Subject: [PATCH] =?UTF-8?q?=E6=9B=B4=E6=96=B0?=
MIME-Version: 1.0
Content-Type: text/plain; charset=UTF-8
Content-Transfer-Encoding: 8bit

---
 src/router/index.js       |   6 +
 src/views/field/index.vue | 472 ++++++++++++++++++++++++++++++++++++++
 2 files changed, 478 insertions(+)
 create mode 100644 src/views/field/index.vue

diff --git a/src/router/index.js b/src/router/index.js
index 0950b29..af371a2 100644
--- a/src/router/index.js
+++ b/src/router/index.js
@@ -82,6 +82,12 @@ const routes = [
     name: "addprovide",
     meta: { title: "新增服务接口" },
   },
+  {
+   path: "/dc/field",
+   component: () => import("../views/field/index.vue"),
+   name: "field",
+   meta: { title: "字段管理" },
+ },
     ],
   },
   {
diff --git a/src/views/field/index.vue b/src/views/field/index.vue
new file mode 100644
index 0000000..c54f40d
--- /dev/null
+++ b/src/views/field/index.vue
@@ -0,0 +1,472 @@
+<template>
+  <div class="example">
+    <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>
+      </template>
+    </TableBody>
+
+    <FormDialog v-model="formDialog" v-bind="FormDialogData" @handleSubmit="handleSubmit">
+    </FormDialog>
+  </div>
+</template>
+
+<script setup>
+import { ref, reactive, onMounted } from "vue";
+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 bmOptions = ref([])
+const TableBodyRef = ref();
+const data = reactive({
+  /**
+   * @type {Object}
+   * @description 表格头部
+   */
+  tableHeader: [
+    {
+      buttons: [
+        "create",
+        "edit",
+        "delete",
+        "detail",
+      ],
+    },
+    {
+      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, // 权限
+        },
+      ],
+    },
+    // 基础操作按钮权限（没有配置 permission 的按钮或者其他搜索等）
+    // 不设置，或设置为 undefined、false 默认显示
+    {
+      create: undefined,
+      edit: false,
+      delete: false,
+      search: false,
+      advanced: false,
+      refresh: false,
+      bulkDelete: false,
+      filter: false,
+    },
+  ],
+  /**
+   * @type {Array}
+   * @description 表格参数
+   */
+  tableType: {
+    selection: true, // Boolean 是否多选
+    tableLoading: false, // Boolean 表格 loading
+    tableIndex: true, // Boolean 是否序号
+    tableTree: false, // Boolean 是否树形显示 （注意：开启后必须每项有不同的 id 字段，树形显示一般关闭多选）
+    tableTreeName: "children", // String 开启树形显示后才成效，子节点字段名称 （默认值为：'children'）
+    isExpand: true, // Boolean 是否默认展开（默认为 false）
+    isHiddenPagination: false, // Boolean是否隐藏分页 （默认为 false）
+    changeHeight: false, // String / Number 表格高度（ 默认为 false，自动设置根据窗口设置高度）
+  },
+  /**
+   * @type {Array}
+   * @description 表格配置
+   */
+  tableList: [
+    // {
+    //   type: "slot", // 设置为 slot 即可使用插槽
+    //   name: "slotName", // name 是作用域插槽的名字
+    //   label: "插槽",
+    //   show: true, // 是否显示
+    //   sortable: true, // 排序方式 Boolean | 'custom' (设置为 'custom' 可以选中后端排序，组件需要绑定 handleTableSort 事件)
+    //   width: 100,
+    // },
+    {
+      name: "deptId",
+      label: "所属部门",
+      show: true,
+    },
+    {
+      name: "projectId",
+      label: "所属项目",
+      show: true,
+    },
+    {
+      name: "name",
+      label: "中文表名",
+      show: true,
+    },
+    {
+      name: "ename",
+      label: "英文表名",
+      show: true,
+    },
+    {
+      name: "intro",
+      label: "简介",
+      show: true,
+    },
+    {
+      type: "slot", // 设置为 slot 即可使用插槽
+      name: "state", // name 是作用域插槽的名字
+      label: "配置状态",
+      show: true, // 是否显示
+      // sortable: true, // 排序方式 Boolean | 'custom' (设置为 'custom' 可以选中后端排序，组件需要绑定 handleTableSort 事件)
+      // width: 100,
+    },
+
+    {
+      name: "dataNum",
+      label: "数据量（只读）",
+      show: true,
+    },
+  ],
+
+  /**
+   * @type {Array}
+   * @description 表格数据(模拟数据)
+   */
+  tableData: [],
+  /**
+   * @type {Object}
+   * @description 分页数据
+   */
+  pagination: {
+    pageSize: 15,
+    current: 1,
+    total: 0,
+  },
+});
+// 表格头部处理事件
+const handleTableHeader = ({ type, data }) => {
+  console.log(type, '111111111111', data);
+  switch (type) {
+    case "create":
+      handleCreate();
+      break;
+    case "edit":
+      handleEdit(data);
+      break;
+    case "search":
+      handleSearch(data);
+      break;
+    case "delete":
+      handleDelete(data)
+      break;
+    case "detail":
+      handleDetail(data);
+      break;
+    case "mixInput":
+      handleMixInput(data);
+      break;
+  }
+};
+// 表格分页事件
+const handleTablePagination = (current) => {
+  console.log(current);
+};
+
+// 搜索
+const handleSearch = (val) => {
+  reqParams.name = val.value;
+  init();
+};
+
+// 新增
+const handleCreate = () => {
+  formDialogStatus.value = 'create'
+  FormDialogData.title = '新增'
+  FormDialogData.formJsonData = {}
+  formDialog.value = true
+};
+const fromId = ref('')
+// 编辑
+const handleEdit = (val) => {
+  console.log('val', val);
+  formDialogStatus.value = 'edit'
+  const id = val[0].id
+  FormDialogData.title = '编辑'
+  http.get(`/api/system/metadata/${id}`).then(response => {
+    FormDialogData.formJsonData = response.data
+    formDialog.value = true
+  })
+};
+
+// 删除
+const handleDelete = (data) => {
+  const ids = data.map(item => {
+    return item.id
+  })
+  // http.post(`/api/config/removeBatch`, { ids }).then(res => {
+  //   if (res.code == 200) {
+  //     ElMessage({
+  //       message: '删除成功',
+  //       type: 'success',
+  //     })
+  //     init()
+  //   }
+  // })
+}
+
+// 详情
+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);
+    FormDialogData.formJsonData = response.data
+    formDialog.value = true
+    FormDialogData.formJosnDisabled = true
+  })
+}
+
+// 清空混合搜索
+// TableBodyRef.value.clearMixInput()
+
+// 清空搜索
+// TableBodyRef.value.clearSearch()
+
+/* 表单弹框 */
+const formDialog = ref(false)
+const formDialogStatus = ref('')
+const FormDialogData = reactive({
+  title: '新增', // String | 必填 | 标题
+  width: '50%', // String | 默认值 30% | 弹框宽度
+  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' },
+    ],
+    ename: [
+      { required: true, message: '请填写英文表名', trigger: 'blur' },
+    ],
+    intro: [
+      { required: true, message: '请填写简介', trigger: 'blur' },
+    ],
+    state: [
+      { required: true, message: '请选择配置状态', trigger: 'blur' },
+    ],
+    dataNum: [
+      { 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
+      model: 'name', // 元素 form 的 key
+    },
+    {
+      type: 'input', // 元素类型
+      cloSpan: 12, // 栅格布局所占份数 （默认24）
+      disabled: false, // 元素是否禁用（默认为false）
+      label: '英文表名', // 元素的 label
+      placeholder: '请填写英文表名', // 元素的 placeholder
+      model: 'ename', // 元素 form 的 key
+    },
+    {
+      type: 'input', // 元素类型
+      cloSpan: 12, // 栅格布局所占份数 （默认24）
+      disabled: false, // 元素是否禁用（默认为false）
+      label: '简介', // 元素的 label
+      placeholder: '请填写简介', // 元素的 placeholder
+      model: 'intro', // 元素 form 的 key
+    },
+    {
+      type: 'select', // 元素类型
+      cloSpan: 12, // 栅格布局所占份数 （默认24）
+      disabled: false, // 元素是否禁用（默认为false）
+      label: '配置状态', // 元素的 label
+      placeholder: '请选择配置状态', // 元素的 placeholder
+      model: 'state', // 元素 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
+    },
+  ],
+  formJosnDisabled: false, // 表单是否禁用
+  formJsonData: {}, // 新增或者编辑表单值 （编辑必须传）
+})
+
+
+const handleSubmit = (formJsonValue) => {
+  console.log(formJsonValue)
+  switch (formDialogStatus.value) {
+    case 'create':
+      http.post(`/api/system/metadata`, formJsonValue).then(response => {
+        if (response.code == 200) {
+          ElMessage({
+            message: '新增成功',
+            type: 'success',
+          })
+          init()
+          formDialog.value = false
+        }
+      })
+      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
+        }
+      })
+      break;
+    default:
+      break;
+  }
+}
+
+
+/* 请求参数 */
+const reqParams = reactive({
+  page: data.pagination.current,
+  size: data.pagination.pageSize,
+  deptId: undefined,
+  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 => {
+    if (res.code == 200) {
+      console.log(res.data)
+      data.tableData = res.data.rows
+      data.tableType.tableLoading = false
+      data.pagination.total = res.data.count
+    }
+  }).catch(() => {
+    data.tableType.tableLoading = false
+  })
+}
+
+onMounted(() => {
+  init()
+})
+</script>
+<style lang="scss" scoped>
+.status-select {
+  width: 200px;
+}
+</style>