This commit is contained in:
南思
parent
f60690c4c9
commit
f137561d6e
|
|
@ -82,6 +82,12 @@ const routes = [
|
|||
name: "addprovide",
|
||||
meta: { title: "新增服务接口" },
|
||||
},
|
||||
{
|
||||
path: "/dc/field",
|
||||
component: () => import("../views/field/index.vue"),
|
||||
name: "field",
|
||||
meta: { title: "字段管理" },
|
||||
},
|
||||
],
|
||||
},
|
||||
{
|
||||
|
|
|
|||
|
|
@ -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>
|
||||
Loading…
Reference in New Issue