xiangshan
/
dhjk
22
0
Fork 0
Code Issues Pull Requests Packages Projects Releases Wiki Activity

更新

This commit is contained in:
dengweisheng 2023-07-12 11:51:21 +08:00
parent f137561d6e
commit 583646d0a8
4 changed files with 137 additions and 171 deletions
Show Stats Download Patch File Download Diff File Expand all files Collapse all files

8
src/main.js
View File

@ -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");

64
src/router/index.js
View File

@ -49,8 +49,8 @@ const routes = [
name: "rule",
meta: { title: "规则管理" },
},
// 元数据管理
{
// 元数据管理
{
path: "/dc/metaData",
component: () => import("../views/metaData/index.vue"),
name: "metaData",
@ -58,36 +58,36 @@ const routes = [
},
//清洗任务
{
path: "/dc/cleaningTask",
component: () => import("../views/cleaningTask/index.vue"),
name: "cleaningTask",
meta: { title: "清洗任务" },
},
//服务接口
{
path: "/dc/serviceInterface",
component: () => import("../views/serviceInterface/index.vue"),
name: "serviceInterface",
meta: { title: "服务接口" },
},
{
path: "/dc/configurefields",
component: () => import("../views/configurefields/index.vue"),
name: "configurefields",
meta: { title: "配置字段" },
},
{
path: "/dc/addprovide",
component: () => import("../views/addprovide/index.vue"),
name: "addprovide",
meta: { title: "新增服务接口" },
},
{
path: "/dc/field",
component: () => import("../views/field/index.vue"),
name: "field",
meta: { title: "字段管理" },
},
path: "/dc/cleaningTask",
component: () => import("../views/cleaningTask/index.vue"),
name: "cleaningTask",
meta: { title: "清洗任务" },
},
//服务接口
{
path: "/dc/serviceInterface",
component: () => import("../views/serviceInterface/index.vue"),
name: "serviceInterface",
meta: { title: "服务接口" },
},
{
path: "/dc/configurefields",
component: () => import("../views/configurefields/index.vue"),
name: "configurefields",
meta: { title: "配置字段" },
},
{
path: "/dc/addprovide",
component: () => import("../views/addprovide/index.vue"),
name: "addprovide",
meta: { title: "新增服务接口" },
},
{
path: "/dc/field",
component: () => import("../views/field/index.vue"),
name: "field",
meta: { title: "字段管理" },
},
],
},
{

202
src/views/field/index.vue
View File

@ -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

26
src/views/metaData/index.vue
View File

@ -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()