This commit is contained in:
吴先生 2023-07-13 11:57:04 +08:00
commit 6ea47ce850
6 changed files with 949 additions and 385 deletions

View File

@ -151,4 +151,7 @@ watch(() => props.modelValue, (newValue) => {
:deep(.el-date-editor).el-input {
width: 100% !important;
}
:deep(.el-input-number) {
width: 100% !important;
}
</style>

View File

@ -17,7 +17,7 @@
</span>
<el-button type="primary" icon="Connection" :disabled="singleDisabledIf" v-if="item === 'detail'"
v-permission="tableHeader[2]?.detail" @click="emit('handle', 'detail ')" :key="index">详情</el-button>
v-permission="tableHeader[2]?.detail" @click="emit('handle', 'detail')" :key="index">详情</el-button>
<template v-if="Object.prototype.toString.call(item) === '[object Object]'">
<el-button type="primary" :disabled="customDisabled(item)" :icon="item.icon" v-permission="item.permission"

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

View File

@ -41,7 +41,7 @@ const routes = [
name: "ProjectManage",
meta: { title: "项目管理" },
},
// 规则管理
{
path: "/dc/rule",
@ -49,8 +49,8 @@ const routes = [
name: "rule",
meta: { title: "规则管理" },
},
// 元数据管理
{
// 元数据管理
{
path: "/dc/metaData",
component: () => import("../views/metaData/index.vue"),
name: "metaData",
@ -58,30 +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: "cleaningTask",
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/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: "字段管理" },
},
],
},
{
@ -99,10 +105,10 @@ const routes = [
title: "编辑器",
},
component: () => import("../views/codemirror/index.vue"),
},
},
{
path: "/data-flow-editor",
name: "data-flow-editor",
name: "data-flow-editor",
mete: {
title: "数据中台",
},

418
src/views/field/index.vue Normal file
View File

@ -0,0 +1,418 @@
<template>
<div class="example">
<TableBody v-bind="data" @handleTableHeader="handleTableHeader" @handleTablePagination="handleTablePagination"
ref="TableBodyRef">
<!-- 表格插槽使用 -->
<template #isRequired="{ currentCol, currentData }">
<span>{{ currentData == '0' ? "否" : "是" }}</span>
</template>
<template #isPk="{ 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 { 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({
/**
* @type {Object}
* @description 表格头部
*/
tableHeader: [
{
buttons: [
"create",
"edit",
"delete",
"detail",
],
},
{
buttons: [
// "search"
],
},
// permission
// undefinedfalse
{
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: "sortNo",
label: "排序",
show: true,
sortable: true,
},
{
name: "name",
label: "中文字段名",
show: true,
},
{
name: "ename",
label: "英文字段名",
show: true,
},
{
name: "intro",
label: "简介",
show: true,
},
{
name: "type",
label: "字段类型",
show: true,
},
{
type: "slot", // slot 使
name: "isPk", // name
label: "是否主键",
show: true, //
},
{
type: "slot",
name: "isRequired",
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/metadataColumn/${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) => {
formDialogStatus.value = 'detail'
const id = val[0].id
FormDialogData.title = '详情'
http.get(`/api/metadataColumn/${id}`).then(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: {
name: [
{ required: true, message: '请填写中文字段名', trigger: 'blur' },
],
ename: [
{ required: true, message: '请填写英文字段名', trigger: 'blur' },
],
intro: [
{ required: true, message: '请填写简介', trigger: 'blur' },
],
type: [
{ 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: '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: '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: 'isPk', // form key
options: [
{
label: '是',
value: 1,
},
{
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: 'sortNo', // form key
},
],
formJosnDisabled: false, //
formJsonData: {}, //
})
const handleSubmit = (formJsonValue) => {
console.log(formJsonValue)
const metadataId = route.query.id
switch (formDialogStatus.value) {
case 'create':
http.post(`/api/metadataColumn`, { ...formJsonValue, metadataId }).then(response => {
if (response.code == 200) {
ElMessage({
message: '新增成功',
type: 'success',
})
init()
formDialog.value = false
}
})
break;
case 'edit':
// 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,
metadataId: route.query.id,
})
//
const init = () => {
data.tableType.tableLoading = true
http.get(`/api/metadataColumn`, 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>

View File

@ -1,359 +1,490 @@
<template>
<div class="example">
<TableBody v-bind="data" @handleTableHeader="handleTableHeader" @handleTablePagination="handleTablePagination"
@handleTableSort="handleTableSort" ref="TableBodyRef">
<!-- 表格插槽使用 -->
<template #slotName="{ currentCol, currentData }">
<span style="color: #729880">{{ currentData }}</span>
</template>
</TableBody>
<FormDialog v-model="formDialog" v-bind="FormDialogData" @handleSubmit="handleSubmit">
<template #default>
<el-form :model="form" label-width="120px">
<el-form-item label="Activity name">
<el-input v-model="form.name" />
</el-form-item>
<el-form-item label="Activity zone">
<el-select v-model="form.region" placeholder="please select your zone">
<el-option label="Zone one" value="shanghai" />
<el-option label="Zone two" value="beijing" />
</el-select>
</el-form-item>
<el-form-item label="Activity time">
<el-col :span="11">
<el-date-picker v-model="form.date1" type="date" placeholder="Pick a date" style="width: 100%" />
</el-col>
<el-col :span="2" class="text-center">
<span class="text-gray-500">-</span>
</el-col>
<el-col :span="11">
<el-time-picker v-model="form.date2" placeholder="Pick a time" style="width: 100%" />
</el-col>
</el-form-item>
</el-form>
</template>
</FormDialog>
</div>
</template>
<script setup>
import { ref, reactive } from "vue";
import TableBody from "@/components/TableBody/TableBody.vue";
import FormDialog from "@/components/FormDialog/FormDialog.vue";
const TableBodyRef = ref();
const data = reactive({
/**
* @type {Object}
* @description 表格头部
*/
tableHeader: [
{
buttons: [
"create",
"edit",
"delete",
"detail",
],
},
{
buttons: [
"refresh",
"filter",
{
name: "mixInput", //
options: [
{ label: 1, value: 1 },
{ label: 1, value: 1 },
],
// permission: false, //
},
{
name: "sort", //
options: [
{ label: "按企业名称", value: 1 },
{ label: "按姓名", value: 2 },
],
// permission: false, //
},
{
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, //
},
],
},
// permission
// undefinedfalse
{
create: undefined,
edit: false,
delete: false,
search: false,
advanced: false,
refresh: false,
bulkDelete: false,
filter: false,
},
],
/**
* @type {Array}
* @description 表格参数
*/
tableType: {
selection: false, // Boolean
tableLoading: false, // Boolean loading
tableIndex: true, // Boolean
tableTree: true, // Boolean id
tableTreeName: "children", // String 'children'
isExpand: true, // Boolean false
isHiddenPagination: false, // Boolean false
changeHeight: false, // String / Number false
<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 { 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({
/**
* @type {Object}
* @description 表格头部
*/
tableHeader: [
{
buttons: [
"create",
"edit",
"delete",
"detail",
],
},
/**
* @type {Array}
* @description 表格配置
*/
tableList: [
{
type: "slot", // slot 使
name: "slotName", // name
label: "插槽",
show: true, //
sortable: true, // Boolean | 'custom' ( 'custom' handleTableSort )
// 使 sortable true
sortableMethod: (a, b) => {
console.log(a.date);
// a b (a b )
// 0 a b 0 0 a b
return new Date(a.date).getTime() - new Date(b.date).getTime();
{
buttons: [
{
type: "custom", // custom popconfirm ,
name: "ruleButton", // handleTableHeader
title: "配置规则", //
icon: "Switch", // element icon
// 1. 'single'2. 'Arbitrary '
// 3. 'custom '4.
isOpen: "single",
// 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: "single",
// isOpen custom Boolean | | function
disabled: false,
// permission: false, //
}, {
type: "custom", // custom popconfirm ,
name: "field", // handleTableHeader
title: "字段管理", //
icon: "Switch", // element icon
// 1. 'single'2. 'Arbitrary '
// 3. 'custom '4.
isOpen: "single",
// isOpen custom Boolean | | function
disabled: false,
// permission: false, //
},
width: 100,
},
{
name: "date",
label: "时间",
show: true,
sortable: "custom",
},
{
name: "name",
label: "姓名",
show: true,
},
{
name: "state",
label: "状态",
show: true,
},
{
name: "city",
label: "城市",
show: true,
},
{
name: "address",
label: "地址",
show: true,
},
{
name: "zip",
label: "邮编",
show: true,
},
],
/**
* @type {Array}
* @description 表格数据(模拟数据)
*/
tableData: [
{
id: 1,
date: "2016-05-01",
name: "Tom",
state: "California",
city: "Los Angeles",
address: "No. 189, Grove St, Los Angeles",
zip: "CA 90036",
slotName: "插槽",
children: [
{
id: 2,
date: "2016-05-01",
name: "Tom",
state: "California",
city: "Los Angeles",
address: "No. 189, Grove St, Los Angeles",
zip: "CA 90036",
slotName: "插槽",
},
{
id: 3,
date: "2016-05-01",
name: "Tom",
state: "California",
city: "Los Angeles",
address: "No. 189, Grove St, Los Angeles",
zip: "CA 90036",
slotName: "插槽",
},
],
},
{
id: 4,
date: "2016-05-02",
name: "Tom",
state: "California",
city: "Los Angeles",
address: "No. 189, Grove St, Los Angeles",
zip: "CA 90036",
slotName: "插槽",
},
{
id: 5,
date: "2016-05-03",
name: "Tom",
state: "California",
city: "Los Angeles",
address: "No. 189, Grove St, Los Angeles",
zip: "CA 90036",
slotName: "插槽",
},
{
id: 6,
date: "2016-05-04",
name: "Tom",
state: "California",
city: "Los Angeles",
address: "No. 189, Grove St, Los Angeles",
zip: "CA 90036",
slotName: "插槽",
},
{
id: 7,
date: "2016-05-05",
name: "Tom",
state: "California",
city: "Los Angeles",
address: "No. 189, Grove St, Los Angeles",
zip: "CA 90036",
slotName: "插槽",
},
],
/**
* @type {Object}
* @description 分页数据
*/
pagination: {
pageSize: 10,
current: 1,
total: 0,
{
name: "mixInput", //
options: [
{ label: '表中文名', value: 'name' },
{ label: '表英文名', value: 'ename' },
],
// permission: false, //
},
],
},
});
//
const handleTableHeader = ({ type, data }) => {
console.log(type, data);
switch (type) {
case "create":
handleCreate();
console.log(type, data);
break;
case "edit":
console.log(type, data);
break;
}
};
//
const handleTablePagination = (current) => {
console.log(current);
};
//
const handleTableSort = (column, prop, order) => {
console.log(column, prop, order);
};
//
const handleSlot = (val) => {
console.log(val);
};
//
const handleCreate = () => {
console.log(12);
formDialog.value = true
};
//
// TableBodyRef.value.clearMixInput()
//
// TableBodyRef.value.clearSearch()
/* 表单弹框 */
const formDialog = ref(false)
const FormDialogData = reactive({
title: '新增', // String | |
width: '30%', // String | 30% |
formType: 'slot', // 'slot' slot | 'json' json
// json
formJosnRules: {}, // {}
formJosnLabelWidth: '120px', // 120px label
// form
formJosnElement: [
{
type: 'input', //
cloSpan: '24', // 24
disabled: false, // false
label: '姓名', // label
placeholder: '请填写姓名', // placeholder
model: 'name', // form key
// options: [] // type select []
// dateType: [] // type date date
// dateValueformat: [] // type date YYYY-MM-DD
},
],
formJosnDisabled: false, //
formJsonData: {}, //
})
const handleSubmit = (formJsonValue) => {
formDialog.value = false
// permission
// undefinedfalse
{
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;
case "field":
handleField(data);
break;
}
const form = ref({})
</script>
<style lang="scss" scoped></style>
};
//
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
})
}
//
const handleField = (val) => {
const id = val[0].id
router.push({
path: '/dc/field',
query: {
id: id,
}
})
}
//
// 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>