'更新'
This commit is contained in:
南思
parent
c873429f9d
commit
5d2fd4741d
|
|
@ -13,8 +13,8 @@
|
|||
</template>
|
||||
</TableHeader>
|
||||
<!-- 组件表格主体 -->
|
||||
<TableData :tableList="tableList" :tableData="tableData" :tableType="tableType" @changeDisabledIf="changeDisabledIf"
|
||||
@changeSingleDisabledIf="changeSingleDisabledIf" @handleSortChange="handleSortChange" ref="TableDataRef">
|
||||
<TableData :tableList="tableList" :tableData="tableData" :treeShow="treeShow" :tableType="tableType" @changeDisabledIf="changeDisabledIf"
|
||||
@changeSingleDisabledIf="changeSingleDisabledIf" @handleSortChange="handleSortChange" @handleTree="handleTree" ref="TableDataRef">
|
||||
<!-- 添加插槽 -->
|
||||
<template v-slot:default="{ currentCol, currentData }">
|
||||
<slot :currentCol="currentCol" :currentData="currentData" :name="currentCol.name" />
|
||||
|
|
@ -51,9 +51,12 @@ const props = defineProps({
|
|||
pagination: {
|
||||
type: Object,
|
||||
},
|
||||
treeShow: {
|
||||
type: Boolean,
|
||||
},
|
||||
});
|
||||
|
||||
const emit = defineEmits(["handleTableHeader", "handleTablePagination", "handleTableSort"]);
|
||||
console.log(props);
|
||||
const emit = defineEmits(["handleTableHeader", "handleTablePagination", "handleTableSort","handleTree"]);
|
||||
|
||||
const TableHeaderRef = ref(); // TableHeaderRef 的 ref
|
||||
const TableDataRef = ref(); // TableData 的 ref
|
||||
|
|
@ -97,7 +100,9 @@ const handlePagination = (current) => {
|
|||
const handleSortChange = (column, prop, order) => {
|
||||
emit("handleTableSort", column, prop, order)
|
||||
}
|
||||
|
||||
const handleTree = (val) =>{
|
||||
emit('handleTree', val)
|
||||
}
|
||||
// 选中的值
|
||||
const selectData = ref([]);
|
||||
onMounted(() => {
|
||||
|
|
|
|||
|
|
@ -1,5 +1,12 @@
|
|||
<template>
|
||||
<div class="table-data">
|
||||
<div class="table-data" style="display: flex; position: relative;">
|
||||
<div class="trees">
|
||||
<el-scrollbar height="80vh">
|
||||
<div v-for="item in 100" :key="item" v-if="treeShow" class="treeData" @click="handleTree(item)">
|
||||
测试数据 测试数据 测试数据
|
||||
</div>
|
||||
</el-scrollbar>
|
||||
</div>
|
||||
<el-table :data="tableData" ref="multipleTableRef" style="width: 100%" :height="tableHeight"
|
||||
v-loading="tableType.tableLoading" :row-class-name="rowClass" :row-key="tableType.tableTree ? 'id' : undefined"
|
||||
:tree-props="{ children: tableType.tableTreeName ? tableType.tableTreeName : 'children' }"
|
||||
|
|
@ -41,9 +48,13 @@ const props = defineProps({
|
|||
type: Array,
|
||||
default: () => []
|
||||
},
|
||||
treeShow: {
|
||||
type: Boolean,
|
||||
default: false
|
||||
}
|
||||
})
|
||||
|
||||
const emit = defineEmits(['changeDisabledIf', 'changeSingleDisabledIf', 'handleSortChange'])
|
||||
const emit = defineEmits(['changeDisabledIf', 'changeSingleDisabledIf', 'handleSortChange','handleTree'])
|
||||
|
||||
// 表格 ref
|
||||
const multipleTableRef = ref()
|
||||
|
|
@ -105,7 +116,9 @@ watch(() => props.tableData, () => {
|
|||
selectData.value = []
|
||||
}
|
||||
})
|
||||
|
||||
const handleTree = (val) =>{
|
||||
emit('handleTree', val)
|
||||
}
|
||||
// 表格排序
|
||||
const handleSortChange = ({ column, prop, order }) => {
|
||||
emit('handleSortChange', column, prop, order)
|
||||
|
|
@ -120,4 +133,23 @@ defineExpose({
|
|||
.el-table :deep(.slecleRowColor) td {
|
||||
background: #ecf5ff !important;
|
||||
}
|
||||
|
||||
.trees {
|
||||
position: relative;
|
||||
top: -2px;
|
||||
.treeData {
|
||||
width: 11.4167vw;
|
||||
margin-right: 1.0417vw;
|
||||
padding: 15px;
|
||||
cursor: pointer;
|
||||
-webkit-user-select: none;
|
||||
-moz-user-select: none;
|
||||
-ms-user-select: none;
|
||||
user-select: none;
|
||||
&:hover {
|
||||
background-color: #086dd9a0;
|
||||
color: white;
|
||||
}
|
||||
}
|
||||
}
|
||||
</style>
|
||||
|
|
|
|||
|
|
@ -5,6 +5,7 @@
|
|||
<template v-for="(item, index) in tableHeader[0].buttons">
|
||||
<el-button v-permission="tableHeader[2]?.create" type="primary" icon="Plus" v-if="item === 'create'"
|
||||
@click="emit('handle', 'create')" :key="index">新增</el-button>
|
||||
|
||||
<el-button type="primary" icon="Edit" :disabled="singleDisabledIf" v-if="item === 'edit'"
|
||||
v-permission="tableHeader[2]?.edit" @click="emit('handle', 'edit')" :key="index">编辑</el-button>
|
||||
<span v-if="item === 'delete'" v-permission="tableHeader[2]?.delete">
|
||||
|
|
@ -14,6 +15,10 @@
|
|||
</template>
|
||||
</el-popconfirm>
|
||||
</span>
|
||||
|
||||
<el-button type="primary" icon="Connection" :disabled="singleDisabledIf" v-if="item === 'detail'"
|
||||
v-permission="tableHeader[2]?.edit" @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"
|
||||
@click="emit('handle', item.name)" v-if="item.type === 'custom'" :key="index">{{ item.title }}</el-button>
|
||||
|
|
|
|||
|
|
@ -36,11 +36,52 @@ const routes = [
|
|||
*/
|
||||
// 项目管理
|
||||
{
|
||||
path: "/project-manage",
|
||||
path: "/dc/project-manage",
|
||||
component: () => import("../views/projectManage/index.vue"),
|
||||
name: "ProjectManage",
|
||||
meta: { title: "项目管理" },
|
||||
},
|
||||
|
||||
// 规则管理
|
||||
{
|
||||
path: "/dc/rule",
|
||||
component: () => import("../views/rule/index.vue"),
|
||||
name: "rule",
|
||||
meta: { title: "规则管理" },
|
||||
},
|
||||
// 元数据管理
|
||||
{
|
||||
path: "/dc/metaData",
|
||||
component: () => import("../views/metaData/index.vue"),
|
||||
name: "metaData",
|
||||
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: "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: "新增服务接口" },
|
||||
},
|
||||
],
|
||||
},
|
||||
{
|
||||
|
|
|
|||
|
|
@ -0,0 +1,358 @@
|
|||
<template>
|
||||
<!-- 使用示例 -->
|
||||
<div class="example">
|
||||
<el-main>
|
||||
<el-form ref="ruleFormRef" :model="form.region" :rules="addpro">
|
||||
<el-row style="margin-bottom: 24px">
|
||||
<el-col :span="24">
|
||||
<el-button type="primary" @click="submitForm(ruleFormRef)"
|
||||
>保存</el-button
|
||||
>
|
||||
<el-button @click="sysDept(ruleFormRef)">重置</el-button>
|
||||
<el-button @click="route.back">返回</el-button>
|
||||
</el-col>
|
||||
</el-row>
|
||||
<el-form-item label="服务名称" prop="name">
|
||||
<el-input v-model="form.region.name" />
|
||||
</el-form-item>
|
||||
<el-row>
|
||||
<el-col :span="11">
|
||||
<el-form-item label="所属部门" prop="deptId">
|
||||
<el-select
|
||||
@change="log"
|
||||
v-model="form.region.deptId"
|
||||
placeholder="请选择部门"
|
||||
>
|
||||
<el-option
|
||||
v-for="(item, index) in play.oplen"
|
||||
:key="index"
|
||||
:label="item.name"
|
||||
:value="item.id"
|
||||
/>
|
||||
</el-select>
|
||||
</el-form-item>
|
||||
</el-col>
|
||||
<el-col :span="2" />
|
||||
<el-col :span="11">
|
||||
<el-form-item label="资源目录" prop="metadataId">
|
||||
<el-select
|
||||
v-model="form.region.metadataId"
|
||||
placeholder="请选择资源目录"
|
||||
>
|
||||
<el-option
|
||||
v-for="(item, index) in play.region"
|
||||
:key="index"
|
||||
:label="item.name"
|
||||
:value="item.id"
|
||||
/>
|
||||
</el-select>
|
||||
</el-form-item>
|
||||
</el-col>
|
||||
</el-row>
|
||||
<el-row>
|
||||
<el-col :span="11">
|
||||
<el-form-item label="是否需要用户认证" prop="isAuth">
|
||||
<el-select v-model="form.region.isAuth" placeholder="请选择">
|
||||
<el-option label="是" :value="1" />
|
||||
<el-option label="否" :value="0" />
|
||||
</el-select>
|
||||
</el-form-item>
|
||||
</el-col>
|
||||
<el-col :span="2" />
|
||||
<el-col :span="11">
|
||||
<el-form-item label="是否外网公开" prop="isPublic">
|
||||
<el-select v-model="form.region.isPublic" placeholder="请选择">
|
||||
<el-option label="是" :value="1" />
|
||||
<el-option label="否" :value="0" />
|
||||
</el-select>
|
||||
</el-form-item>
|
||||
</el-col>
|
||||
</el-row>
|
||||
<el-form-item label="资源描述" prop="intro">
|
||||
<el-input v-model="form.region.intro" type="textarea" />
|
||||
</el-form-item>
|
||||
</el-form>
|
||||
</el-main>
|
||||
<el-footer>
|
||||
<el-row style="margin-bottom: 24px">
|
||||
<el-col :span="2">
|
||||
<el-button type="primary" @click="opneDialogs">新建</el-button>
|
||||
</el-col>
|
||||
</el-row>
|
||||
<el-table
|
||||
:header-cell-style="{ background: '#eef1f6', color: '#606266' }"
|
||||
:data="form.region.interfaceList"
|
||||
>
|
||||
<el-table-column prop="sortNo" label="序号" />
|
||||
<el-table-column prop="name" label="接口名称" />
|
||||
<el-table-column prop="url" label="接口地址" />
|
||||
<el-table-column prop="scope" label="开发范围" />
|
||||
<el-table-column prop="intro" label="接口描述" />
|
||||
<el-table-column prop="操作" label="操作">
|
||||
<template #default="scope">
|
||||
<el-button type="danger" text @click="delet(scope)">删除</el-button
|
||||
><el-button type="primary" text @click="fromVlauesj(scope)"
|
||||
>编辑</el-button
|
||||
>
|
||||
</template>
|
||||
</el-table-column>
|
||||
</el-table>
|
||||
</el-footer>
|
||||
<!-- <yd_diainputXMGL
|
||||
ref="childrenRef"
|
||||
@funFlag="funFlag"
|
||||
@resetForm="resetForm"
|
||||
:inputArray="inputArray"
|
||||
:width="width"
|
||||
:inputArrays="inputArrays"
|
||||
:dialogVisible="moreConditionsXmgl"
|
||||
:control="true"
|
||||
/> -->
|
||||
</div>
|
||||
</template>
|
||||
<script setup>
|
||||
import { ref, reactive, watch, nextTick } from "vue";
|
||||
// import yd_diainputXMGL from "@/components/yd_diang_xmgl.vue";
|
||||
import { ElMessage, ElMessageBox } from "element-plus";
|
||||
import http from "@/utils/request.js";
|
||||
import { useRoute, useRouter } from "vue-router";
|
||||
const route = useRouter();
|
||||
const routes = useRoute();
|
||||
const ruleFormRef = ref();
|
||||
const play = reactive({
|
||||
oplen: [],
|
||||
region: [],
|
||||
index: "",
|
||||
});
|
||||
const form = reactive({
|
||||
region: {
|
||||
deptId: "",
|
||||
deptStr: "",
|
||||
id: "",
|
||||
interfaceList: [],
|
||||
intro: "",
|
||||
isAuth: 0,
|
||||
isPublic: 0,
|
||||
metadataId: "",
|
||||
name: "",
|
||||
},
|
||||
});
|
||||
// 声明组件方法
|
||||
const childrenRef = ref(null);
|
||||
// 关闭弹窗方法
|
||||
const handleChildren1 = () => childrenRef.value.resetForms();
|
||||
const width = ref("40%");
|
||||
const inputArray = reactive([
|
||||
{
|
||||
type: "input",
|
||||
title: "序号",
|
||||
model: "sortNo",
|
||||
row: 24,
|
||||
placeholder: "请输入",
|
||||
optionsValue: "updataOption",
|
||||
SetectPla: "请选择",
|
||||
},
|
||||
{
|
||||
type: "input",
|
||||
title: "接口名称",
|
||||
model: "name",
|
||||
row: 24,
|
||||
placeholder: "请输入",
|
||||
optionsValue: "updataOption",
|
||||
SetectPla: "请选择",
|
||||
},
|
||||
{
|
||||
type: "input",
|
||||
title: "接口地址",
|
||||
model: "url",
|
||||
row: 24,
|
||||
placeholder: "请输入",
|
||||
optionsValue: "updataOption",
|
||||
SetectPla: "请选择",
|
||||
},
|
||||
{
|
||||
type: "input",
|
||||
title: "开发范围",
|
||||
model: "scope",
|
||||
row: 24,
|
||||
placeholder: "请输入",
|
||||
optionsValue: "updataOption",
|
||||
SetectPla: "请选择",
|
||||
},
|
||||
{
|
||||
type: "input",
|
||||
title: "接口描述",
|
||||
model: "intro",
|
||||
row: 24,
|
||||
placeholder: "请输入",
|
||||
optionsValue: "updataOption",
|
||||
SetectPla: "请选择",
|
||||
},
|
||||
]);
|
||||
// 表单验证
|
||||
const inputArrays = reactive({
|
||||
sortNo: [{ required: true, message: "内容不能为空", trigger: "blur" }],
|
||||
name: [{ required: true, message: "内容不能为空", trigger: "blur" }],
|
||||
url: [{ required: true, message: "内容不能为空", trigger: "blur" }],
|
||||
scope: [{ required: true, message: "内容不能为空", trigger: "blur" }],
|
||||
intro: [{ required: true, message: "内容不能为空", trigger: "blur" }],
|
||||
});
|
||||
const addpro = reactive({
|
||||
name: [{ required: true, message: "内容不能为空", trigger: "blur" }],
|
||||
deptId: [{ required: true, message: "内容不能为空", trigger: "blur" }],
|
||||
metadataId: [{ required: true, message: "内容不能为空", trigger: "blur" }],
|
||||
isAuth: [{ required: true, message: "内容不能为空", trigger: "blur" }],
|
||||
isPublic: [{ required: true, message: "内容不能为空", trigger: "blur" }],
|
||||
intro: [{ required: true, message: "内容不能为空", trigger: "blur" }],
|
||||
});
|
||||
/* 更多弹框 */
|
||||
const moreConditionsXmgl = ref(false);
|
||||
|
||||
// 打开弹框
|
||||
const opneDialogs = () => {
|
||||
// 取反 watch监听
|
||||
inputArray.forEach((element, index) => {
|
||||
if (element.model) {
|
||||
element.lable = null;
|
||||
}
|
||||
});
|
||||
moreConditionsXmgl.value = !moreConditionsXmgl.value;
|
||||
};
|
||||
// 编辑赋值
|
||||
const fromVlauesj = (datas) => {
|
||||
play.index = datas.$index;
|
||||
inputArray.forEach((element, index) => {
|
||||
if (element.model) {
|
||||
element.lable = datas.row[element.model];
|
||||
}
|
||||
});
|
||||
// 添加id
|
||||
moreConditionsXmgl.value = !moreConditionsXmgl.value;
|
||||
};
|
||||
// 接受子组件数据
|
||||
const funFlag = (val) => {
|
||||
if (play.index == "") {
|
||||
form.region.interfaceList.push(JSON.parse(JSON.stringify(val)));
|
||||
handleChildren1();
|
||||
} else {
|
||||
form.region.interfaceList[play.index] = JSON.parse(JSON.stringify(val));
|
||||
play.index = "";
|
||||
|
||||
handleChildren1();
|
||||
}
|
||||
};
|
||||
|
||||
const resetForm = (val) => {
|
||||
console.log(val);
|
||||
};
|
||||
const sysDept = (formEl) => {
|
||||
if (!formEl) return;
|
||||
formEl.resetFields();
|
||||
form.region.interfaceList = [];
|
||||
};
|
||||
// 获取部门
|
||||
const metadataProject = () => {
|
||||
http.get("/metadata/sysDept").then((resp) => {
|
||||
if (resp.code == 200) {
|
||||
play.oplen = resp.data;
|
||||
} else {
|
||||
ElMessage.error(resp.message);
|
||||
}
|
||||
});
|
||||
};
|
||||
const deptId = (e) => {
|
||||
http.get(`/metadata/metadata/list/?deptId=${e}`).then((resp) => {
|
||||
if (resp.code == 200) {
|
||||
play.region = resp.data;
|
||||
} else {
|
||||
ElMessage.error(resp.message);
|
||||
}
|
||||
});
|
||||
};
|
||||
const log = (e) => {
|
||||
http
|
||||
.get(`/metadata/metadata/list/?deptId=${form.region.deptId}`)
|
||||
.then((resp) => {
|
||||
form.region.metadataId = "";
|
||||
if (resp.code == 200) {
|
||||
play.region = resp.data;
|
||||
} else {
|
||||
ElMessage.error(resp.message);
|
||||
}
|
||||
});
|
||||
};
|
||||
|
||||
const dataCatalog = async () => {
|
||||
http.post("/metadata/dataCatalog", form.region).then((resp) => {
|
||||
if (resp.code == 200) {
|
||||
ElMessage.success("保存成功");
|
||||
} else {
|
||||
ElMessage.error(resp.message);
|
||||
}
|
||||
});
|
||||
};
|
||||
const submitForm = async (formEl) => {
|
||||
if (!formEl) return;
|
||||
await formEl.validate((valid, fields) => {
|
||||
if (valid) {
|
||||
console.log(form.region.interfaceList.length);
|
||||
if (form.region.interfaceList.length == 0) {
|
||||
ElMessage.error("需创建一条接口数据");
|
||||
} else {
|
||||
dataCatalog();
|
||||
}
|
||||
} else {
|
||||
console.log("error submit!", fields);
|
||||
}
|
||||
});
|
||||
};
|
||||
const delet = (e) => {
|
||||
if (form.region.interfaceList.length <= 1) {
|
||||
ElMessage.error("需保留一条数据");
|
||||
} else {
|
||||
form.region.interfaceList.splice(e.$index, 1);
|
||||
}
|
||||
};
|
||||
metadataProject();
|
||||
</script>
|
||||
<style lang="scss" scoped>
|
||||
.example {
|
||||
.el-header {
|
||||
background-color: rgb(246, 246, 246);
|
||||
}
|
||||
.el-aside {
|
||||
width: 15%;
|
||||
min-width: 200px;
|
||||
background-color: #fff;
|
||||
.el-menu {
|
||||
min-height: calc(100vh - 130px);
|
||||
border: #fff solid;
|
||||
.el-menu-item.is-active {
|
||||
color: #409eff;
|
||||
}
|
||||
}
|
||||
}
|
||||
.el-main {
|
||||
background-color: #fff;
|
||||
.el-scrollbar {
|
||||
padding-right: 15px;
|
||||
}
|
||||
:deep(.set-select) {
|
||||
width: 100%;
|
||||
}
|
||||
:deep(.el-select) {
|
||||
width: 100%;
|
||||
}
|
||||
}
|
||||
.el-footer {
|
||||
padding-top: 15px;
|
||||
margin-top: 16px;
|
||||
min-height: calc(50.3vh);
|
||||
background-color: #fff;
|
||||
}
|
||||
}
|
||||
.el-button {
|
||||
padding: 8px 10px;
|
||||
}
|
||||
</style>
|
||||
|
||||
|
|
@ -0,0 +1,359 @@
|
|||
<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: [
|
||||
"delete",
|
||||
],
|
||||
},
|
||||
{
|
||||
buttons: [
|
||||
"refresh",
|
||||
"filter",
|
||||
{
|
||||
name: "mixInput", // 混合筛选
|
||||
options: [
|
||||
{ label: 1, value: 1 },
|
||||
{ label: 1, value: 1 },
|
||||
],
|
||||
// permission: false, // 权限
|
||||
},
|
||||
{
|
||||
type: "custom", // 自定义按钮（支持 custom 默认按钮、popconfirm 气泡确认 ）,
|
||||
name: "addButton", // 为 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: "fontButton", // 为 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: "fontButton", // 为 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}
|
||||
* @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();
|
||||
},
|
||||
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,
|
||||
},
|
||||
});
|
||||
// 表格头部处理事件
|
||||
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
|
||||
}
|
||||
const form = ref({})
|
||||
</script>
|
||||
<style lang="scss" scoped></style>
|
||||
|
||||
|
|
@ -0,0 +1,296 @@
|
|||
<template>
|
||||
<div class="tc">
|
||||
<div class="at">
|
||||
<div class="dx">
|
||||
<div class="shang"><span>字段选择</span></div>
|
||||
<div :class="data.sjlbs.length > 0 ? 'xia' : 'xia2'">
|
||||
<el-radio-group
|
||||
v-model="values"
|
||||
v-if="data.sjlbs.length > 0"
|
||||
@change="log"
|
||||
>
|
||||
<div
|
||||
class="xz"
|
||||
v-for="(item, index) in data.sjlbs"
|
||||
:key="index"
|
||||
style="padding-right;:10px;display: block;width: 100%;"
|
||||
>
|
||||
<el-radio :label="item.id" size="large">{{ item.name }}</el-radio>
|
||||
</div>
|
||||
</el-radio-group>
|
||||
<div class="wsj" v-if="data.sjlbs.length <= 0">无数据</div>
|
||||
</div>
|
||||
</div>
|
||||
<el-transfer
|
||||
@change="change"
|
||||
:props="{
|
||||
key: 'id',
|
||||
label: 'name',
|
||||
}"
|
||||
:titles="['规则选择', '已选规则']"
|
||||
v-model="value"
|
||||
:data="data.sjlb"
|
||||
/>
|
||||
</div>
|
||||
<el-table
|
||||
:data="data.tableData"
|
||||
style="width: 100%"
|
||||
max-height="268"
|
||||
:header-cell-style="{ background: '#eef1f6', color: '#606266' }"
|
||||
>
|
||||
<el-table-column prop="metadataStr" label="元数据名称" />
|
||||
<el-table-column prop="columnStr" label="字段名称" />
|
||||
<el-table-column prop="ruleStr" label="规则名称" />
|
||||
</el-table>
|
||||
<div class="ats">
|
||||
<div style="padding-right;:10px">
|
||||
<el-button @click="fh">取消</el-button>
|
||||
</div>
|
||||
<div style="padding-left: 10px">
|
||||
<el-button @click="bc" type="primary">确定</el-button>
|
||||
</div>
|
||||
</div>
|
||||
</div>
|
||||
</template>
|
||||
<script setup >
|
||||
import { ref, reactive, watch, nextTick } from "vue";
|
||||
import { ElMessage, ElMessageBox } from "element-plus";
|
||||
import http from "@/utils/request.js";
|
||||
import { useRoute, useRouter } from "vue-router";
|
||||
const route = useRoute();
|
||||
const router = useRouter();
|
||||
const value = ref([]);
|
||||
const values = ref([]);
|
||||
const handleChange = (value, direction, movedKeys) => {
|
||||
console.log(value, direction, movedKeys);
|
||||
};
|
||||
const data = reactive({
|
||||
codeid: "",
|
||||
tableData: [],
|
||||
tableDatas: [],
|
||||
pagination: {
|
||||
pageSize: "99999",
|
||||
page: "1",
|
||||
},
|
||||
sjlb: [],
|
||||
sjlbs: [],
|
||||
param: {
|
||||
metadataColumnRuleList: {},
|
||||
metadataId: route.query.id,
|
||||
},
|
||||
});
|
||||
// 获取数据事件
|
||||
const metadataProject = () => {
|
||||
const params = {
|
||||
size: data.pagination.pageSize,
|
||||
page: data.pagination.current,
|
||||
};
|
||||
http.get(`/metadata/columnRule/`, params).then((resp) => {
|
||||
if (resp.code == 200) {
|
||||
value.value = [];
|
||||
data.sjlb = resp.data.records;
|
||||
data.tableData.forEach((element) => {
|
||||
if (data.codeid == element.columnId) {
|
||||
value.value.push(element.ruleId);
|
||||
}
|
||||
});
|
||||
} else {
|
||||
ElMessage.error(resp.message);
|
||||
}
|
||||
});
|
||||
};
|
||||
const metadata = () => {
|
||||
const params = {
|
||||
metadataId: route.query.id,
|
||||
size: data.pagination.pageSize,
|
||||
page: data.pagination.current,
|
||||
};
|
||||
http.get("/metadata/metadataColumn", params).then((resp) => {
|
||||
if (resp.code == 200) {
|
||||
data.sjlbs = resp.data.records;
|
||||
} else {
|
||||
ElMessage.error(resp.message);
|
||||
}
|
||||
});
|
||||
};
|
||||
const bc = () => {
|
||||
data.param.metadataColumnRuleList = [];
|
||||
let ll = [];
|
||||
let ls = [];
|
||||
|
||||
value.value.forEach((element, indexs) => {
|
||||
ll.push({
|
||||
columnId: values.value,
|
||||
id: "",
|
||||
metadataId: route.query.id,
|
||||
ruleId: element,
|
||||
});
|
||||
});
|
||||
data.tableData.forEach((element, index) => {
|
||||
ll.forEach((elements, indexs) => {
|
||||
if (element.columnId == elements.columnId) {
|
||||
if (element.ruleId == elements.ruleId) {
|
||||
ll[indexs] = {
|
||||
columnId: element.columnId,
|
||||
id: element.id,
|
||||
metadataId: element.metadataId,
|
||||
ruleId: element.ruleId,
|
||||
};
|
||||
}
|
||||
} else {
|
||||
ls.push({
|
||||
columnId: element.columnId,
|
||||
id: element.id,
|
||||
metadataId: element.metadataId,
|
||||
ruleId: element.ruleId,
|
||||
});
|
||||
}
|
||||
});
|
||||
});
|
||||
var newDataList = removalDuplicate(ls, "id");
|
||||
console.log(newDataList);
|
||||
console.log(ll);
|
||||
data.param.metadataColumnRuleList = [...ll, ...newDataList];
|
||||
meta();
|
||||
};
|
||||
function removalDuplicate(dataList, byName) {
|
||||
var result = [];
|
||||
var tem = {};
|
||||
for (var i = 0; i < dataList.length; i++) {
|
||||
if (!tem[dataList[i][byName]]) {
|
||||
result.push(dataList[i]);
|
||||
tem[dataList[i][byName]] = 1;
|
||||
}
|
||||
}
|
||||
return result;
|
||||
}
|
||||
const meta = () => {
|
||||
console.log(data.param);
|
||||
http.post("/metadata/metadata/config", data.param).then((resp) => {
|
||||
if (resp.code == 200) {
|
||||
ElMessage.success("保存成功");
|
||||
metadata();
|
||||
Project();
|
||||
} else {
|
||||
metadata();
|
||||
Project();
|
||||
ElMessage.error(resp.message);
|
||||
}
|
||||
});
|
||||
};
|
||||
watch(
|
||||
values,
|
||||
(newval) => {
|
||||
if (values.value.length !== 0) {
|
||||
metadataProject();
|
||||
} else {
|
||||
data.sjlb = [];
|
||||
value.value = [];
|
||||
}
|
||||
},
|
||||
{ deep: true }
|
||||
);
|
||||
// 获取数据
|
||||
const fh = () => {
|
||||
router.back();
|
||||
};
|
||||
const log = (e) => {
|
||||
data.codeid = e;
|
||||
metadataProject();
|
||||
};
|
||||
const Project = () => {
|
||||
http.get(`/metadata/metadata/config/${route.query.id}`).then((resp) => {
|
||||
if (resp.code == 200) {
|
||||
data.tableData = resp.data;
|
||||
} else {
|
||||
ElMessage.error(resp.message);
|
||||
}
|
||||
});
|
||||
};
|
||||
metadata();
|
||||
Project();
|
||||
</script>
|
||||
<style lang="scss" scoped>
|
||||
.el-transfer {
|
||||
--el-transfer-border-color: var(--el-border-color-lighter);
|
||||
--el-transfer-border-radius: var(--el-border-radius-base);
|
||||
--el-transfer-panel-width: 285px;
|
||||
--el-transfer-panel-header-height: 53px;
|
||||
--el-transfer-panel-header-bg-color: var(--el-fill-color-light);
|
||||
--el-transfer-panel-footer-height: 40px;
|
||||
--el-transfer-panel-body-height: 298px;
|
||||
--el-transfer-item-height: 30px;
|
||||
--el-transfer-filter-height: 32px;
|
||||
}
|
||||
.tc {
|
||||
width: 100%;
|
||||
}
|
||||
.at {
|
||||
text-align: center;
|
||||
margin: 2vw auto;
|
||||
display: flex;
|
||||
justify-content: space-evenly;
|
||||
.dx {
|
||||
width: 285px;
|
||||
border: 1px solid #ebeef5;
|
||||
height: 352px;
|
||||
background-color: #fff;
|
||||
.shang {
|
||||
background-color: var(--el-fill-color-light);
|
||||
border-bottom: 1px solid #ebeef5;
|
||||
text-align: left;
|
||||
line-height: 53px;
|
||||
height: 53px;
|
||||
width: 100%;
|
||||
span {
|
||||
padding-left: 20px;
|
||||
}
|
||||
}
|
||||
.xia {
|
||||
text-align: left;
|
||||
width: 285px;
|
||||
height: 298px;
|
||||
overflow-y: scroll;
|
||||
.wsj {
|
||||
margin: 0;
|
||||
height: var(--el-transfer-item-height);
|
||||
line-height: var(--el-transfer-item-height);
|
||||
padding: 6px 15px 0;
|
||||
color: var(--el-text-color-secondary);
|
||||
text-align: center;
|
||||
}
|
||||
|
||||
.xz {
|
||||
padding-left: 20px;
|
||||
}
|
||||
}
|
||||
}
|
||||
.xia2 {
|
||||
text-align: left;
|
||||
width: 285px;
|
||||
height: 298px;
|
||||
.wsj {
|
||||
margin: 0;
|
||||
height: var(--el-transfer-item-height);
|
||||
line-height: var(--el-transfer-item-height);
|
||||
padding: 6px 15px 0;
|
||||
color: var(--el-text-color-secondary);
|
||||
text-align: center;
|
||||
}
|
||||
|
||||
.xz {
|
||||
padding-left: 20px;
|
||||
}
|
||||
}
|
||||
}
|
||||
.ats {
|
||||
margin-top: 2vw;
|
||||
margin-bottom: 2vw;
|
||||
width: 100%;
|
||||
display: flex;
|
||||
justify-content: center;
|
||||
.el-button {
|
||||
padding: 8px 10px;
|
||||
}
|
||||
}
|
||||
</style>
|
||||
|
|
@ -0,0 +1,359 @@
|
|||
<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 的按钮或者其他搜索等）
|
||||
// 不设置，或设置为 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}
|
||||
* @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();
|
||||
},
|
||||
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,
|
||||
},
|
||||
});
|
||||
// 表格头部处理事件
|
||||
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
|
||||
}
|
||||
const form = ref({})
|
||||
</script>
|
||||
<style lang="scss" scoped></style>
|
||||
|
||||
|
|
@ -64,6 +64,7 @@ const data = reactive({
|
|||
"create",
|
||||
"edit",
|
||||
"delete",
|
||||
"detail",
|
||||
{
|
||||
type: "custom", // // 自定义按钮（支持 custom 默认按钮、popconfirm 气泡确认 ）,
|
||||
name: "customButton", // 为 handleTableHeader 事件的第一个返回值，注意不能重复
|
||||
|
|
|
|||
|
|
@ -0,0 +1,310 @@
|
|||
<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: [
|
||||
"search",
|
||||
"refresh",
|
||||
"filter",
|
||||
],
|
||||
},
|
||||
// 基础操作按钮权限（没有配置 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}
|
||||
* @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();
|
||||
},
|
||||
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,
|
||||
},
|
||||
});
|
||||
// 表格头部处理事件
|
||||
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
|
||||
}
|
||||
const form = ref({})
|
||||
</script>
|
||||
<style lang="scss" scoped></style>
|
||||
|
||||
|
|
@ -0,0 +1,349 @@
|
|||
<template>
|
||||
<div class="example">
|
||||
<TableBody v-bind="data" @handleTableHeader="handleTableHeader" @handleTablePagination="handleTablePagination"
|
||||
@handleTableSort="handleTableSort" @handleTree="handleTree" 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 表格头部
|
||||
*/
|
||||
treeShow: true,
|
||||
tableHeader: [
|
||||
{
|
||||
buttons: [
|
||||
|
||||
],
|
||||
},
|
||||
{
|
||||
buttons: [
|
||||
"search",
|
||||
"search",
|
||||
"search",
|
||||
{
|
||||
type: "custom", // 自定义按钮（支持 custom 默认按钮、popconfirm 气泡确认 ）,
|
||||
name: "customButton", // 为 handleTableHeader 事件的第一个返回值，注意不能重复
|
||||
title: "搜索", // 按钮名称
|
||||
icon: "Message", // 自定义左侧按钮 （ 目前只支持 element 的 icon ）
|
||||
// 以哪种方式禁用按钮，组件自带两种禁用方式 1.只有选择一条时开启按钮 'single'，2. 有选择任意条数时开启按钮 'Arbitrary '
|
||||
// 3.自定义方法 'custom '，4.默认无条件开启，不设置即可
|
||||
isOpen: "custom",
|
||||
// 设置 isOpen 为 custom 时设置生效（切必须填写该字段），Boolean | 变量 | function
|
||||
disabled: false,
|
||||
// permission: false, // 权限
|
||||
},
|
||||
|
||||
{
|
||||
type: "custom", // 自定义按钮（支持 custom 默认按钮、popconfirm 气泡确认 ）,
|
||||
name: "customButton", // 为 handleTableHeader 事件的第一个返回值，注意不能重复
|
||||
title: "重置", // 按钮名称
|
||||
icon: "Message", // 自定义左侧按钮 （ 目前只支持 element 的 icon ）
|
||||
// 以哪种方式禁用按钮，组件自带两种禁用方式 1.只有选择一条时开启按钮 'single'，2. 有选择任意条数时开启按钮 'Arbitrary '
|
||||
// 3.自定义方法 'custom '，4.默认无条件开启，不设置即可
|
||||
isOpen: "custom",
|
||||
// 设置 isOpen 为 custom 时设置生效（切必须填写该字段），Boolean | 变量 | function
|
||||
disabled: false,
|
||||
// permission: false, // 权限
|
||||
},
|
||||
|
||||
{
|
||||
type: "custom", // 自定义按钮（支持 custom 默认按钮、popconfirm 气泡确认 ）,
|
||||
name: "customButton", // 为 handleTableHeader 事件的第一个返回值，注意不能重复
|
||||
title: "新建", // 按钮名称
|
||||
icon: "Message", // 自定义左侧按钮 （ 目前只支持 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}
|
||||
* @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();
|
||||
},
|
||||
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,
|
||||
},
|
||||
});
|
||||
// 表格头部处理事件
|
||||
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
|
||||
};
|
||||
const handleTree = (val) =>{
|
||||
console.log('111111111',val);
|
||||
|
||||
}
|
||||
// 清空混合搜索
|
||||
// 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
|
||||
}
|
||||
const form = ref({})
|
||||
</script>
|
||||
<style lang="scss" scoped></style>
|
||||
|
||||
Loading…
Reference in New Issue