This commit is contained in:
commit
6ea47ce850
|
@ -151,4 +151,7 @@ watch(() => props.modelValue, (newValue) => {
|
||||||
:deep(.el-date-editor).el-input {
|
:deep(.el-date-editor).el-input {
|
||||||
width: 100% !important;
|
width: 100% !important;
|
||||||
}
|
}
|
||||||
|
:deep(.el-input-number) {
|
||||||
|
width: 100% !important;
|
||||||
|
}
|
||||||
</style>
|
</style>
|
|
@ -17,7 +17,7 @@
|
||||||
</span>
|
</span>
|
||||||
|
|
||||||
<el-button type="primary" icon="Connection" :disabled="singleDisabledIf" v-if="item === 'detail'"
|
<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]'">
|
<template v-if="Object.prototype.toString.call(item) === '[object Object]'">
|
||||||
<el-button type="primary" :disabled="customDisabled(item)" :icon="item.icon" v-permission="item.permission"
|
<el-button type="primary" :disabled="customDisabled(item)" :icon="item.icon" v-permission="item.permission"
|
||||||
|
|
|
@ -6,6 +6,7 @@ import { createPinia } from "pinia";
|
||||||
|
|
||||||
import ElementPlus from "element-plus"; //引入element-plus库
|
import ElementPlus from "element-plus"; //引入element-plus库
|
||||||
import * as ElementPlusIconsVue from "@element-plus/icons-vue";
|
import * as ElementPlusIconsVue from "@element-plus/icons-vue";
|
||||||
|
import zhCn from 'element-plus/dist/locale/zh-cn.mjs'
|
||||||
import { ElMessage } from "element-plus";
|
import { ElMessage } from "element-plus";
|
||||||
import VForm3 from "vform3-builds"; //引入VForm3库
|
import VForm3 from "vform3-builds"; //引入VForm3库
|
||||||
|
|
||||||
|
@ -89,4 +90,9 @@ for (const [key, component] of Object.entries(ElementPlusIconsVue)) {
|
||||||
|
|
||||||
app.directive("permission", permission);
|
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");
|
||||||
|
|
|
@ -41,7 +41,7 @@ const routes = [
|
||||||
name: "ProjectManage",
|
name: "ProjectManage",
|
||||||
meta: { title: "项目管理" },
|
meta: { title: "项目管理" },
|
||||||
},
|
},
|
||||||
|
|
||||||
// 规则管理
|
// 规则管理
|
||||||
{
|
{
|
||||||
path: "/dc/rule",
|
path: "/dc/rule",
|
||||||
|
@ -49,8 +49,8 @@ const routes = [
|
||||||
name: "rule",
|
name: "rule",
|
||||||
meta: { title: "规则管理" },
|
meta: { title: "规则管理" },
|
||||||
},
|
},
|
||||||
// 元数据管理
|
// 元数据管理
|
||||||
{
|
{
|
||||||
path: "/dc/metaData",
|
path: "/dc/metaData",
|
||||||
component: () => import("../views/metaData/index.vue"),
|
component: () => import("../views/metaData/index.vue"),
|
||||||
name: "metaData",
|
name: "metaData",
|
||||||
|
@ -58,30 +58,36 @@ const routes = [
|
||||||
},
|
},
|
||||||
//清洗任务
|
//清洗任务
|
||||||
{
|
{
|
||||||
path: "/dc/cleaningTask",
|
path: "/dc/cleaningTask",
|
||||||
component: () => import("../views/cleaningTask/index.vue"),
|
component: () => import("../views/cleaningTask/index.vue"),
|
||||||
name: "cleaningTask",
|
name: "cleaningTask",
|
||||||
meta: { title: "清洗任务" },
|
meta: { title: "清洗任务" },
|
||||||
},
|
},
|
||||||
//服务接口
|
//服务接口
|
||||||
{
|
{
|
||||||
path: "/dc/serviceInterface",
|
path: "/dc/serviceInterface",
|
||||||
component: () => import("../views/serviceInterface/index.vue"),
|
component: () => import("../views/serviceInterface/index.vue"),
|
||||||
name: "cleaningTask",
|
name: "serviceInterface",
|
||||||
meta: { title: "服务接口" },
|
meta: { title: "服务接口" },
|
||||||
},
|
},
|
||||||
{
|
{
|
||||||
path: "/dc/configurefields",
|
path: "/dc/configurefields",
|
||||||
component: () => import("../views/configurefields/index.vue"),
|
component: () => import("../views/configurefields/index.vue"),
|
||||||
name: "configurefields",
|
name: "configurefields",
|
||||||
meta: { title: "配置字段" },
|
meta: { title: "配置字段" },
|
||||||
},
|
},
|
||||||
{
|
{
|
||||||
path: "/dc/addprovide",
|
path: "/dc/addprovide",
|
||||||
component: () => import("../views/addprovide/index.vue"),
|
component: () => import("../views/addprovide/index.vue"),
|
||||||
name: "addprovide",
|
name: "addprovide",
|
||||||
meta: { title: "新增服务接口" },
|
meta: { title: "新增服务接口" },
|
||||||
},
|
},
|
||||||
|
{
|
||||||
|
path: "/dc/field",
|
||||||
|
component: () => import("../views/field/index.vue"),
|
||||||
|
name: "field",
|
||||||
|
meta: { title: "字段管理" },
|
||||||
|
},
|
||||||
],
|
],
|
||||||
},
|
},
|
||||||
{
|
{
|
||||||
|
@ -99,10 +105,10 @@ const routes = [
|
||||||
title: "编辑器",
|
title: "编辑器",
|
||||||
},
|
},
|
||||||
component: () => import("../views/codemirror/index.vue"),
|
component: () => import("../views/codemirror/index.vue"),
|
||||||
},
|
},
|
||||||
{
|
{
|
||||||
path: "/data-flow-editor",
|
path: "/data-flow-editor",
|
||||||
name: "data-flow-editor",
|
name: "data-flow-editor",
|
||||||
mete: {
|
mete: {
|
||||||
title: "数据中台",
|
title: "数据中台",
|
||||||
},
|
},
|
||||||
|
|
|
@ -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 的按钮或者其他搜索等)
|
||||||
|
// 不设置,或设置为 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: "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>
|
|
@ -1,359 +1,490 @@
|
||||||
<template>
|
<template>
|
||||||
<div class="example">
|
<div class="example">
|
||||||
<TableBody v-bind="data" @handleTableHeader="handleTableHeader" @handleTablePagination="handleTablePagination"
|
<TableBody v-bind="data" @handleTableHeader="handleTableHeader" @handleTablePagination="handleTablePagination"
|
||||||
@handleTableSort="handleTableSort" ref="TableBodyRef">
|
ref="TableBodyRef">
|
||||||
<!-- 表格插槽使用 -->
|
|
||||||
<template #slotName="{ currentCol, currentData }">
|
<!-- 右侧顶部插槽 -->
|
||||||
<span style="color: #729880">{{ currentData }}</span>
|
<template #TableHeaderRight="{ selectData }">
|
||||||
</template>
|
<el-select v-model="reqParams.deptId" placeholder="请选择部门" @change="init" clearable class="status-select">
|
||||||
</TableBody>
|
<el-option v-for="item in bmOptions" :key="item.value" :label="item.label" :value="item.value" />
|
||||||
|
</el-select>
|
||||||
<FormDialog v-model="formDialog" v-bind="FormDialogData" @handleSubmit="handleSubmit">
|
|
||||||
<template #default>
|
<el-select v-model="reqParams.projectId" placeholder="请选择项目" @change="init" clearable class="status-select">
|
||||||
<el-form :model="form" label-width="120px">
|
<el-option v-for="item in bmOptions" :key="item.value" :label="item.label" :value="item.value" />
|
||||||
<el-form-item label="Activity name">
|
</el-select>
|
||||||
<el-input v-model="form.name" />
|
</template>
|
||||||
</el-form-item>
|
|
||||||
<el-form-item label="Activity zone">
|
<!-- 表格插槽使用 -->
|
||||||
<el-select v-model="form.region" placeholder="please select your zone">
|
<template #state="{ currentCol, currentData }">
|
||||||
<el-option label="Zone one" value="shanghai" />
|
<span>{{ currentData == '0' ? "未配置" : "已配置" }}</span>
|
||||||
<el-option label="Zone two" value="beijing" />
|
</template>
|
||||||
</el-select>
|
</TableBody>
|
||||||
</el-form-item>
|
|
||||||
<el-form-item label="Activity time">
|
<FormDialog v-model="formDialog" v-bind="FormDialogData" @handleSubmit="handleSubmit">
|
||||||
<el-col :span="11">
|
</FormDialog>
|
||||||
<el-date-picker v-model="form.date1" type="date" placeholder="Pick a date" style="width: 100%" />
|
</div>
|
||||||
</el-col>
|
</template>
|
||||||
<el-col :span="2" class="text-center">
|
|
||||||
<span class="text-gray-500">-</span>
|
<script setup>
|
||||||
</el-col>
|
import { ref, reactive, onMounted } from "vue";
|
||||||
<el-col :span="11">
|
import { useRouter } from "vue-router"
|
||||||
<el-time-picker v-model="form.date2" placeholder="Pick a time" style="width: 100%" />
|
import TableBody from "@/components/TableBody/TableBody.vue";
|
||||||
</el-col>
|
import FormDialog from "@/components/FormDialog/FormDialog.vue";
|
||||||
</el-form-item>
|
import http from "@/utils/request.js";
|
||||||
</el-form>
|
import { ElMessage } from "element-plus";
|
||||||
</template>
|
|
||||||
</FormDialog>
|
const router = useRouter()
|
||||||
</div>
|
|
||||||
</template>
|
const bmOptions = ref([])
|
||||||
|
const TableBodyRef = ref();
|
||||||
<script setup>
|
const data = reactive({
|
||||||
import { ref, reactive } from "vue";
|
/**
|
||||||
import TableBody from "@/components/TableBody/TableBody.vue";
|
* @type {Object}
|
||||||
import FormDialog from "@/components/FormDialog/FormDialog.vue";
|
* @description 表格头部
|
||||||
|
*/
|
||||||
const TableBodyRef = ref();
|
tableHeader: [
|
||||||
const data = reactive({
|
{
|
||||||
/**
|
buttons: [
|
||||||
* @type {Object}
|
"create",
|
||||||
* @description 表格头部
|
"edit",
|
||||||
*/
|
"delete",
|
||||||
tableHeader: [
|
"detail",
|
||||||
{
|
],
|
||||||
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 的按钮或者其他搜索等)
|
|
||||||
// 不设置,或设置为 undefined、false 默认显示
|
|
||||||
{
|
|
||||||
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,自动设置根据窗口设置高度)
|
|
||||||
},
|
},
|
||||||
/**
|
{
|
||||||
* @type {Array}
|
buttons: [
|
||||||
* @description 表格配置
|
{
|
||||||
*/
|
type: "custom", // 自定义按钮(支持 custom 默认按钮、popconfirm 气泡确认 ),
|
||||||
tableList: [
|
name: "ruleButton", // 为 handleTableHeader 事件的第一个返回值,注意不能重复
|
||||||
{
|
title: "配置规则", // 按钮名称
|
||||||
type: "slot", // 设置为 slot 即可使用插槽
|
icon: "Switch", // 自定义左侧按钮 ( 目前只支持 element 的 icon )
|
||||||
name: "slotName", // name 是作用域插槽的名字
|
// 以哪种方式禁用按钮,组件自带两种禁用方式 1.只有选择一条时开启按钮 'single',2. 有选择任意条数时开启按钮 'Arbitrary '
|
||||||
label: "插槽",
|
// 3.自定义方法 'custom ',4.默认无条件开启,不设置即可
|
||||||
show: true, // 是否显示
|
isOpen: "single",
|
||||||
sortable: true, // 排序方式 Boolean | 'custom' (设置为 'custom' 可以选中后端排序,组件需要绑定 handleTableSort 事件)
|
// 设置 isOpen 为 custom 时设置生效(切必须填写该字段),Boolean | 变量 | function
|
||||||
// 排序方法,使用示例 (仅当 sortable 设置为 true 时生效)
|
disabled: false,
|
||||||
sortableMethod: (a, b) => {
|
// permission: false, // 权限
|
||||||
console.log(a.date);
|
}, {
|
||||||
// a 和 b 就是表格数据 (a 是第后一条,b 是前一条)
|
type: "custom", // 自定义按钮(支持 custom 默认按钮、popconfirm 气泡确认 ),
|
||||||
// 如果返回值小于 0 那么 a 排在前 b 在之前,等于 0 位置不变, 大于 0 那么 a 排在 b 之后
|
name: "dataButton", // 为 handleTableHeader 事件的第一个返回值,注意不能重复
|
||||||
return new Date(a.date).getTime() - new Date(b.date).getTime();
|
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: "mixInput", // 混合筛选
|
||||||
name: "date",
|
options: [
|
||||||
label: "时间",
|
{ label: '表中文名', value: 'name' },
|
||||||
show: true,
|
{ label: '表英文名', value: 'ename' },
|
||||||
sortable: "custom",
|
],
|
||||||
},
|
// permission: false, // 权限
|
||||||
{
|
},
|
||||||
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,
|
|
||||||
},
|
},
|
||||||
});
|
// 基础操作按钮权限(没有配置 permission 的按钮或者其他搜索等)
|
||||||
// 表格头部处理事件
|
// 不设置,或设置为 undefined、false 默认显示
|
||||||
const handleTableHeader = ({ type, data }) => {
|
{
|
||||||
console.log(type, data);
|
create: undefined,
|
||||||
switch (type) {
|
edit: false,
|
||||||
case "create":
|
delete: false,
|
||||||
handleCreate();
|
search: false,
|
||||||
console.log(type, data);
|
advanced: false,
|
||||||
break;
|
refresh: false,
|
||||||
case "edit":
|
bulkDelete: false,
|
||||||
console.log(type, data);
|
filter: false,
|
||||||
break;
|
},
|
||||||
}
|
],
|
||||||
};
|
/**
|
||||||
// 表格分页事件
|
* @type {Array}
|
||||||
const handleTablePagination = (current) => {
|
* @description 表格参数
|
||||||
console.log(current);
|
*/
|
||||||
};
|
tableType: {
|
||||||
|
selection: true, // Boolean 是否多选
|
||||||
// 表格自定义排序事件
|
tableLoading: false, // Boolean 表格 loading
|
||||||
const handleTableSort = (column, prop, order) => {
|
tableIndex: true, // Boolean 是否序号
|
||||||
console.log(column, prop, order);
|
tableTree: false, // Boolean 是否树形显示 (注意:开启后必须每项有不同的 id 字段,树形显示一般关闭多选)
|
||||||
};
|
tableTreeName: "children", // String 开启树形显示后才成效,子节点字段名称 (默认值为:'children')
|
||||||
|
isExpand: true, // Boolean 是否默认展开(默认为 false)
|
||||||
// 插槽事件
|
isHiddenPagination: false, // Boolean是否隐藏分页 (默认为 false)
|
||||||
const handleSlot = (val) => {
|
changeHeight: false, // String / Number 表格高度( 默认为 false,自动设置根据窗口设置高度)
|
||||||
console.log(val);
|
},
|
||||||
};
|
/**
|
||||||
|
* @type {Array}
|
||||||
// 新增
|
* @description 表格配置
|
||||||
const handleCreate = () => {
|
*/
|
||||||
console.log(12);
|
tableList: [
|
||||||
formDialog.value = true
|
// {
|
||||||
};
|
// type: "slot", // 设置为 slot 即可使用插槽
|
||||||
|
// name: "slotName", // name 是作用域插槽的名字
|
||||||
// 清空混合搜索
|
// label: "插槽",
|
||||||
// TableBodyRef.value.clearMixInput()
|
// show: true, // 是否显示
|
||||||
|
// sortable: true, // 排序方式 Boolean | 'custom' (设置为 'custom' 可以选中后端排序,组件需要绑定 handleTableSort 事件)
|
||||||
// 清空搜索
|
// width: 100,
|
||||||
// TableBodyRef.value.clearSearch()
|
// },
|
||||||
|
{
|
||||||
|
name: "deptId",
|
||||||
/* 表单弹框 */
|
label: "所属部门",
|
||||||
const formDialog = ref(false)
|
show: true,
|
||||||
const FormDialogData = reactive({
|
},
|
||||||
title: '新增', // String | 必填 | 标题
|
{
|
||||||
width: '30%', // String | 默认值 30% | 弹框宽度
|
name: "projectId",
|
||||||
formType: 'slot', // 'slot' 默认为 slot | 'json' (后台接口返回就配置 json)
|
label: "所属项目",
|
||||||
// 注意:以下配置为 json 时才有效
|
show: true,
|
||||||
formJosnRules: {}, // 默认为{},表单校验规则
|
},
|
||||||
formJosnLabelWidth: '120px', // 默认为 120px,表单 label 宽度
|
{
|
||||||
// form 元素
|
name: "name",
|
||||||
formJosnElement: [
|
label: "中文表名",
|
||||||
{
|
show: true,
|
||||||
type: 'input', // 元素类型
|
},
|
||||||
cloSpan: '24', // 栅格布局所占份数 (默认24)
|
{
|
||||||
disabled: false, // 元素是否禁用(默认为false)
|
name: "ename",
|
||||||
label: '姓名', // 元素的 label
|
label: "英文表名",
|
||||||
placeholder: '请填写姓名', // 元素的 placeholder
|
show: true,
|
||||||
model: 'name', // 元素 form 的 key
|
},
|
||||||
|
{
|
||||||
// options: [] // type 为 select 生效 (默认为 [] )
|
name: "intro",
|
||||||
|
label: "简介",
|
||||||
// dateType: [] // type 为 date 生效 (默认为 date )
|
show: true,
|
||||||
// dateValueformat: [] // type 为 date 生效 (默认为 YYYY-MM-DD )
|
},
|
||||||
},
|
{
|
||||||
],
|
type: "slot", // 设置为 slot 即可使用插槽
|
||||||
formJosnDisabled: false, // 表单是否禁用
|
name: "state", // name 是作用域插槽的名字
|
||||||
formJsonData: {}, // 新增或者编辑表单值 (编辑必须传)
|
label: "配置状态",
|
||||||
})
|
show: true, // 是否显示
|
||||||
const handleSubmit = (formJsonValue) => {
|
// sortable: true, // 排序方式 Boolean | 'custom' (设置为 'custom' 可以选中后端排序,组件需要绑定 handleTableSort 事件)
|
||||||
formDialog.value = false
|
// 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>
|
||||||
|
|
Loading…
Reference in New Issue