Skip to content

S
so-manage-ui
Commit 6621cf06 authored by 张俊's avatar 张俊
Browse files
Options

[feat](公共table): table按钮组件修改

parent 1fd24a26
Hide whitespace changes
Inline Side-by-side
Showing with 176 additions and 350 deletions
.prettierrc.js
View file @ 6621cf06
......@@ -12,7 +12,7 @@ module.exports = {
htmlWhitespaceSensitivity: "css",
insertPragma: false,
jsxSingleQuote: false,
printWidth: 100, // 如果属性过多需要换行，减少该值
printWidth: 80, // 如果属性过多需要换行，减少该值
proseWrap: "preserve",
quoteProps: "as-needed",
requirePragma: false,
......
src/bg-ui/bg-table-btns2.vue
View file @ 6621cf06
<template>
<div class="bg-table-btns" ref="bgTableBtnsRef">
<div ref="bgTableBtnsRef" class="bg-table-btns">
<slot></slot>
<span
class="bg-table-btn more"
id="more_btn"
v-if="state.children.length > limit"
ref="lastEl"
@mouseenter="showMoreBtns"
@mouseleave="hideMoreBtns">
<bg-icon style="font-size: 12px; color: #2b4695" icon="#bg-ic-s-more" />
<teleport to="body">
<div
class="more-box"
:style="state.style"
v-if="state.showMore"
@mouseenter="showMoreBtns"
@mouseleave="hideMoreBtns">
<span
v-for="(item, index) in state.lastChildren"
:key="'as' + index"
@click="action(item.onClick, item.disabled)"
:class="item.disabled ? 'disabled' : ''"
>{{ item.name }}</span
>
</div>
</teleport>
</span>
<el-popover :popper-style="bgTablePopover" trigger="hover" :hide-after="50">
<div class="more-box" :style="state.style">
<span
v-for="(item, index) in state.lastChildren"
:key="'as' + index"
:class="item.disabled ? 'disabled' : ''"
@click="action(item.onClick, item.disabled)"
>{{ item.name }}</span
>
</div>
<template #reference>
<span v-if="state.children.length - 1 > limit" id="more_btn" ref="lastEl" class="bg-table-btn more">
<bg-icon style="font-size: 12px; color: #2b4695" icon="#bg-ic-s-more" />
</span>
<!-- 解决不需显示时警告问题 -->
<span v-else></span>
</template>
</el-popover>
</div>
</template>
<script setup>
import { reactive, ref, onBeforeMount, onMounted, toRefs, provide, useSlots, h, render, nextTick } from "vue";
import { reactive, ref, onBeforeMount, onMounted, toRefs, provide, useSlots, watch, nextTick } from "vue";
const slots = useSlots();
const props = defineProps({
......@@ -38,6 +31,10 @@ const props = defineProps({
type: Number,
default: 3,
},
tableData: {
type: Array,
default: () => [],
},
});
const bgTableBtnsRef = ref(null);
......@@ -51,60 +48,72 @@ const state = reactive({
showMore: false,
});
watch(
() => props.tableData,
() => {
nextTick(() => {
calcTabs();
dealData();
});
},
{
deep: true,
}
);
const action = (event, disable) => {
if (disable) {
return;
}
event();
state.showMore = false
state.showMore = false;
};
const calcTabs = () => {
let tabSlots = slots.default() || [];
let tempSlots = [];
state.lastChildren = [];
if (tabSlots) {
tabSlots.forEach((e, idx) => {
if (idx + 2 > props.limit && tabSlots.length > props.limit && e.props) {
tabSlots.forEach((e) => {
//注释和v-if忽略
if (Object.prototype.toString.call(e.children) == "[object String]") {
//v-for 再次遍历
} else if (Object.prototype.toString.call(e.children) == "[object Array]") {
let children = e.children || [];
children.forEach((el) => {
//注释和v-if忽略
if (Object.prototype.toString.call(e.children) == "[object String]") {
console.log(el.type);
} else {
tempSlots.push(el);
}
});
//普通节点
} else {
tempSlots.push(e);
}
});
// debugger;
if (tempSlots) {
tempSlots.forEach((e, idx) => {
if (idx + 2 > props.limit && tempSlots.length > props.limit && e.props) {
// console.log(e);
// console.log(e.props);
state.lastChildren.push(e.props);
}
});
}
};
const showMoreBtns = () => {
calcTabs();
dealData();
nextTick(() => {
updateSytle();
if (state.timer) clearTimeout(state.timer);
state.showMore = true;
});
};
const hideMoreBtns = () => {
if (state.timer) clearTimeout(state.timer);
state.timer = setTimeout(() => {
state.showMore = false;
}, 50);
};
const updateSytle = () => {
let { top, right } = lastEl.value.getBoundingClientRect();
let { width } = window.document.body.getBoundingClientRect();
state.style = {
top: `${top + 16}px`,
right: `${width - right - 16}px`,
};
};
const dealData = () => {
let children = bgTableBtnsRef.value.children || [];
state.children = children;
if (children.length > props.limit) {
if (children.length - 1 > props.limit) {
children[props.limit - 1].style.display = "none";
children[props.limit - 1].style.width = "0px";
state.index = props.limit - 2;
state.lastChildren[0].name = children[props.limit - 1].innerText;
}
for (let index = 0; index < children.length; index++) {
for (let index = 0; index < children.length - 1; index++) {
const e = children[index];
if (index + 1 > props.limit && e.tagName == "A" && e.className.indexOf("bg-table-btn") !== -1) {
e.style.display = "none";
......@@ -114,6 +123,14 @@ const dealData = () => {
}
};
const bgTablePopover = {
width: "auto",
maxWidth: "96px",
padding: "4px 0",
minWidth: "60px",
marginTop: "-5px",
};
onMounted(() => {
calcTabs();
dealData();
......@@ -126,35 +143,20 @@ onMounted(() => {
z-index: 200;
}
.more-box {
position: fixed;
padding: 4px 0;
background-color: #ffffff;
box-shadow: 0px 4px 12px 0px rgba(18, 30, 63, 0.1);
border-radius: 4px;
border: solid 1px #e6e9ef;
width: 88px;
z-index: 300;
}
.more-box span {
display: block;
overflow: hidden;
text-overflow: ellipsis;
word-break: break-all;
white-space: nowrap;
display: block;
padding: 0 16px;
margin: 0;
color: #202531;
line-height: 34px;
padding-left: 16px;
font-size: 16px;
padding: 10px 16px;
color: #404a62;
line-height: 1;
font-size: 14px;
cursor: pointer;
}
.more-box span:hover {
background-color: #f2f3f7;
color: #202531;
}
.more-box .disabled {
color: #a9b1c7;
......
src/page/main/auto-maintenance/task-manage/index.vue
View file @ 6621cf06
......@@ -9,20 +9,24 @@
<bg-icon style="font-size: 12px; color: #fff; margin-right: 8px" icon="#bg-ic-add"></bg-icon>
新增
</el-button>
<el-button type="default" @click="deleteAllTips"> 批量删除 </el-button>
<span class="header_info"
>已选择 <span style="color: #202531; font-weight: bold"> {{ state.selected.length }} </span> 项
</span>
<span class="header_info can_click_text" @click="clearSelected">清空</span>
</div>
</template>
<template v-slot:filter_group>
<div class="left-filter filter_list">
<div class="filter_item">
<span class="filter_title">状态</span>
<el-select v-model="filter.state" placeholder="请选择" style="width: 300px">
<el-option
v-for="(item, index) in stateOptions"
:key="'pushOptions' + index"
:label="item.name"
:value="item.value">
</el-option>
</el-select>
<span class="filter_title">创建时间</span>
<el-date-picker
v-model="filter.time"
type="daterange"
value-format="yyyy-MM-DD"
range-separator="至"
start-placeholder="开始日期"
end-placeholder="结束日期" />
</div>
</div>
<div class="right-action apaas_button">
......@@ -31,59 +35,45 @@
</div>
</template>
</bg-filter-group>
<!-- <div class="table_container">
<div class="table bg-scroll">
<bg-table
ref="bgTable"
:headers="headers"
:rows="tableRows"
:isIndex="true"
:stripe="true">
<template v-slot:name="{ row }">
<span class="can_click_text" @click="getChildren(row)" v-if="row.children">
{{ row.name }}
</span>
<span v-else>
{{ row.name }}
</span>
</template>
<template v-slot:updated_time="{ row }">
{{ row.updated_time.split("+")[0].replace("T", " ").replace("Z", " ") }}
</template>
<template v-slot:state="{ row }">
<bg-switch
@click="changeUseRow(row)"
:labels="['否', '是']"
:values="[0, 1]"
v-model="row.state"></bg-switch>
</template>
<template v-slot:action="{ row }">
<bg-table-btns2
:limit="3">
<bg-table-btn @click="edit_row(row)" :disabled="row.state == 1"
>编辑</bg-table-btn
>
<bg-table-btn @click="delete_row(row)" :disabled="row.state == 1"
>删除</bg-table-btn
>
<bg-table-btn @click="moveRow(row, 1)" :disabled="!row.canMoveUp"
>上移</bg-table-btn
>
<bg-table-btn @click="moveRow(row, 2)" :disabled="!row.canMoveDown"
>下移</bg-table-btn
>
</bg-table-btns2>
</template>
</bg-table>
</div>
<bg-pagination
:page="filter.page"
:size="filter.size"
:total="tableTotal"
@change-page="changePage"
@change-size="changeSize">
</bg-pagination>
</div> -->
<div class="table_container">
<div class="table bg-scroll">
<bg-table
ref="dataTable"
:headers="headers"
:rows="tableRows"
@selectAc="selectRows"
:isIndex="true"
:select="true"
:stripe="true">
<template v-slot:name="{ row }">
<span class="can_click_text" @click="getChildren(row)" v-if="row.children">
{{ row.name }}
</span>
<span v-else>
{{ row.name }}
</span>
</template>
<template v-slot:updated_time="{ row }">
{{ row.updated_time.split("+")[0].replace("T", " ").replace("Z", " ") }}
</template>
<template v-slot:action="{ row }">
<bg-table-btns2 :limit="3" :tableData="tableRows">
<bg-table-btn @click="useRow(row)">执行任务</bg-table-btn>
<bg-table-btn @click="editRow(row)">编辑</bg-table-btn>
<bg-table-btn @click="copyRow(row, 1)">复制</bg-table-btn>
<bg-table-btn @click="deleteRow(row, 2)">删除</bg-table-btn>
</bg-table-btns2>
</template>
</bg-table>
</div>
<bg-pagination
:page="filter.page"
:size="filter.size"
:total="tableTotal"
@change-page="changePage"
@change-size="changeSize">
</bg-pagination>
</div>
</div>
<!-- 新增/编辑弹窗 -->
<!-- <el-dialog
......@@ -164,36 +154,38 @@ import axios from "@/request/http.js";
import { Search } from "@element-plus/icons-vue";
import bgBreadcrumb from "@/components/bg-breadcrumb.vue";
const bgForm = ref(null);
const dataTable = ref(null);
const headers = [
{
label: "任务名称",
prop: "name",
},
{
label: "执行次数",
prop: "times",
},
{
label: "描述",
prop: "describe",
minWidth: 360,
},
{
label: "创建人",
prop: "person",
},
{
label: "创建时间",
prop: "updated_time",
width: 220,
},
{
label: "操作",
prop: "action",
width: 200,
fixed: "right",
},
];
const headers = computed(() => {
let _headers = [
{
label: "名称",
prop: "name",
},
{
label: "描述",
prop: "describe",
minWidth: 360,
},
{
label: "更新时间",
prop: "updated_time",
width: 220,
},
{
label: "是否启用",
prop: "state",
},
{
label: "操作",
prop: "action",
width: 176,
fixed: "right",
},
];
return _headers;
});
const state = reactive({
bgForm,
typeList: [], // 分类数据
......@@ -202,9 +194,10 @@ const state = reactive({
nodeId: null, // 当前选中分类的id 用于请求列表
timer: null, // 定时器
tableRows: [], // 表格数据
selected: [], //选择数据
tableTotal: 0, // 表格数据条数
filter: {
state: "",
time: "",
search: "",
page: 1,
limit: 10,
......@@ -244,6 +237,16 @@ const state = reactive({
fatherRow: null,
});
const selectRows = (data) => {
state.selected = data.selection;
};
const clearSelected = () => {
dataTable.value.clearTable();
};
const deleteAllTips = () => {};
const dictLevel = ref(1);
const getChildren = (row) => {
......@@ -252,33 +255,6 @@ const getChildren = (row) => {
state.tableTotal = row.total_children;
state.fatherRow = row;
};
const backDict = () => {
dictLevel.value = 1;
state.fatherRow = null;
changePage(1);
};
const nodeClick = (item) => {
state.nodeId = item.id;
dictLevel.value = 1;
state.fatherRow = null;
state.nodeClassifyId = item.classify_id;
state.filter = {
state: "",
search: "",
page: 1,
limit: 10,
};
changePage(1);
}; // 切换字典分类
const searchType = () => {
if (state.timer) {
clearTimeout(state.timer);
}
state.timer = setTimeout(() => {
getTypeList();
}, 500);
}; // 字典分类筛选
const getTypeList = () => {
let params = {
......@@ -314,7 +290,7 @@ const filterAction = () => {
const filterClear = () => {
state.filter = {
state: "",
time: "",
search: "",
limit: 10,
page: 1,
......@@ -356,18 +332,6 @@ const getTableRows = () => {
});
}; // 获取表格数据
const changeUseRow = (row) => {
axios.put(`/apaas/system/v5/dictionary/state?id=${row.id}&state=${row.state}`).then((res) => {
if (res.data.code == 200) {
ElMessage.success(res.data.msg);
changePage(1);
} else {
ElMessage.error(res.data.data);
row.state = row.state == 0 ? 1 : 0;
}
});
}; // 启用禁用
const changePage = (page) => {
state.filter.page = page;
getTableRows();
......@@ -398,151 +362,11 @@ const register = () => {
state.addDialog = true;
}; // 新增字典按钮
const edit_row = (row) => {
axios
.get(`/apaas/system/v5/dictionary/${row.id}`)
.then((res) => {
if (res.data.code == 200) {
state.actionRow = res.data.data;
state.formData = {
name: state.actionRow.name,
describe: state.actionRow.describe,
state: state.actionRow.state,
p_dict_id: state.actionRow.p_dict_id,
};
} else {
ElMessage.error(res.data.data);
}
})
.catch((err) => {
console.log(err);
});
if (state.bgForm) {
nextTick().then(() => {
state.bgForm.validate((valid) => {
if (!valid) {
state.bgForm.clearValidate();
}
});
});
}
state.addType = 2;
state.addDialog = true;
}; // 编辑按钮
const addConfirm = () => {
state.bgForm.validate((valid) => {
if (valid) {
if (state.addType == 1) {
// 新增
let params = {
classify_id: state.nodeClassifyId,
...state.formData,
};
axios.post(`/apaas/system/v5/dictionary/add`, params).then((res) => {
if (res.data.code == 200) {
ElMessage.success(res.data.msg);
state.addDialog = false;
changePage(1);
} else {
ElMessage.error(res.data.data);
}
});
} else {
// 编辑
let params = {
id: state.actionRow.id,
...state.formData,
};
axios.put(`/apaas/system/v5/dictionary/update`, params).then((res) => {
if (res.data.code == 200) {
ElMessage.success(res.data.msg);
state.addDialog = false;
changePage(1);
} else {
ElMessage.error(res.data.data);
}
});
}
}
});
}; // 确定新增/编辑
const delete_row = (row) => {
state.dialogDelete = true;
state.actionRow = row;
}; // 删除按钮
const deleteData = () => {
axios.delete(`/apaas/system/v5/dictionary/${state.actionRow.id}`).then((res) => {
if (res.data.code == 200) {
ElMessage.success(res.data.msg);
state.dialogDelete = false;
changePage(1);
} else {
ElMessage.error(res.data.data);
}
});
}; // 确定删除
const moveRow = (row, type) => {
let index;
state.tableRows.forEach((e, i) => {
if (e.id == row.id) {
index = i;
}
});
let nextRow;
if (type == 1) {
// 上移
nextRow = state.tableRows[index - 1];
} else {
// 下移
nextRow = state.tableRows[index + 1];
}
let params = [
{
id: row.id,
sort: nextRow.sort,
},
{
id: nextRow.id,
sort: row.sort,
},
];
axios
.put(`/apaas/system/v5/dictionary/sort`, [...params])
.then((res) => {
if (res.data.code == 200) {
ElMessage.success(res.data.msg);
changePage(1);
} else {
ElMessage.error(res.data.data);
}
})
.catch((err) => {
console.log(err);
});
};
onBeforeMount(() => {
getTypeList();
});
const {
typeList,
typeKeyword,
nodeClassifyId,
tableRows,
tableTotal,
filter,
stateOptions,
dialogDelete,
addType,
addDialog,
formData,
rules,
} = toRefs(state);
const { tableRows, tableTotal, filter } = toRefs(state);
</script>
<style lang="scss" scoped>
......
Markdown is supported
0% or
You are about to add 0 people to the discussion. Proceed with caution.
Finish editing this message first!
Please register or to comment