列表设置
parent
408d0b7deb
commit
2fb35404d5
@ -1,111 +1,111 @@
|
|||||||
import type { App } from 'vue'
|
// import type { App } from 'vue'
|
||||||
import { Icon } from './Icon'
|
// import { Icon } from './Icon'
|
||||||
import { Button } from './Button'
|
// import { Button } from './Button'
|
||||||
import VXETable from 'vxe-table'
|
// import VXETable from 'vxe-table'
|
||||||
import 'vxe-table/lib/style.css'
|
// import 'vxe-table/lib/style.css'
|
||||||
import {
|
// import {
|
||||||
// Need
|
// // Need
|
||||||
Button as AntButton,
|
// Button as AntButton,
|
||||||
Select,
|
// Select,
|
||||||
Alert,
|
// Alert,
|
||||||
Checkbox,
|
// Checkbox,
|
||||||
DatePicker,
|
// DatePicker,
|
||||||
Radio,
|
// Radio,
|
||||||
Switch,
|
// Switch,
|
||||||
Card,
|
// Card,
|
||||||
List,
|
// List,
|
||||||
Tabs,
|
// Tabs,
|
||||||
Descriptions,
|
// Descriptions,
|
||||||
Tree,
|
// Tree,
|
||||||
Table,
|
// Table,
|
||||||
Divider,
|
// Divider,
|
||||||
Modal,
|
// Modal,
|
||||||
Drawer,
|
// Drawer,
|
||||||
TreeSelect,
|
// TreeSelect,
|
||||||
Dropdown,
|
// Dropdown,
|
||||||
Tag,
|
// Tag,
|
||||||
Tooltip,
|
// Tooltip,
|
||||||
Badge,
|
// Badge,
|
||||||
Popover,
|
// Popover,
|
||||||
Upload,
|
// Upload,
|
||||||
Transfer,
|
// Transfer,
|
||||||
Steps,
|
// Steps,
|
||||||
PageHeader,
|
// PageHeader,
|
||||||
Result,
|
// Result,
|
||||||
Empty,
|
// Empty,
|
||||||
Avatar,
|
// Avatar,
|
||||||
Menu,
|
// Menu,
|
||||||
Breadcrumb,
|
// Breadcrumb,
|
||||||
Form,
|
// Form,
|
||||||
Input,
|
// Input,
|
||||||
Row,
|
// Row,
|
||||||
Col,
|
// Col,
|
||||||
Spin,
|
// Spin,
|
||||||
Space,
|
// Space,
|
||||||
Layout,
|
// Layout,
|
||||||
Collapse,
|
// Collapse,
|
||||||
Slider,
|
// Slider,
|
||||||
InputNumber,
|
// InputNumber,
|
||||||
Carousel,
|
// Carousel,
|
||||||
Popconfirm,
|
// Popconfirm,
|
||||||
Skeleton,
|
// Skeleton,
|
||||||
Cascader,
|
// Cascader,
|
||||||
Rate,
|
// Rate,
|
||||||
} from 'ant-design-vue'
|
// } from 'ant-design-vue'
|
||||||
|
|
||||||
const compList = [AntButton.Group, Icon]
|
// const compList = [AntButton.Group, Icon]
|
||||||
export function registerGlobComp(app: App) {
|
// export function registerGlobComp(app: App) {
|
||||||
// app.use(Input).use(Button).use(Layout)
|
// // app.use(Input).use(Button).use(Layout)
|
||||||
compList.forEach((comp) => {
|
// compList.forEach((comp) => {
|
||||||
app.component(comp.name || comp.displayName, comp)
|
// app.component(comp.name || comp.displayName, comp)
|
||||||
})
|
// })
|
||||||
|
|
||||||
app
|
// app
|
||||||
.use(Select)
|
// .use(Select)
|
||||||
.use(Alert)
|
// .use(Alert)
|
||||||
.use(Button)
|
// .use(Button)
|
||||||
.use(Breadcrumb)
|
// .use(Breadcrumb)
|
||||||
.use(Checkbox)
|
// .use(Checkbox)
|
||||||
.use(DatePicker)
|
// .use(DatePicker)
|
||||||
.use(Radio)
|
// .use(Radio)
|
||||||
.use(Switch)
|
// .use(Switch)
|
||||||
.use(Card)
|
// .use(Card)
|
||||||
.use(List)
|
// .use(List)
|
||||||
.use(Descriptions)
|
// .use(Descriptions)
|
||||||
.use(Tree)
|
// .use(Tree)
|
||||||
.use(TreeSelect)
|
// .use(TreeSelect)
|
||||||
.use(Table)
|
// .use(Table)
|
||||||
.use(Divider)
|
// .use(Divider)
|
||||||
.use(Modal)
|
// .use(Modal)
|
||||||
.use(Drawer)
|
// .use(Drawer)
|
||||||
.use(Dropdown)
|
// .use(Dropdown)
|
||||||
.use(Tag)
|
// .use(Tag)
|
||||||
.use(Tooltip)
|
// .use(Tooltip)
|
||||||
.use(Badge)
|
// .use(Badge)
|
||||||
.use(Popover)
|
// .use(Popover)
|
||||||
.use(Upload)
|
// .use(Upload)
|
||||||
.use(Transfer)
|
// .use(Transfer)
|
||||||
.use(Steps)
|
// .use(Steps)
|
||||||
.use(PageHeader)
|
// .use(PageHeader)
|
||||||
.use(Result)
|
// .use(Result)
|
||||||
.use(Empty)
|
// .use(Empty)
|
||||||
.use(Avatar)
|
// .use(Avatar)
|
||||||
.use(Menu)
|
// .use(Menu)
|
||||||
.use(Tabs)
|
// .use(Tabs)
|
||||||
.use(Form)
|
// .use(Form)
|
||||||
.use(Input)
|
// .use(Input)
|
||||||
.use(Row)
|
// .use(Row)
|
||||||
.use(Col)
|
// .use(Col)
|
||||||
.use(Spin)
|
// .use(Spin)
|
||||||
.use(Space)
|
// .use(Space)
|
||||||
.use(Layout)
|
// .use(Layout)
|
||||||
.use(Collapse)
|
// .use(Collapse)
|
||||||
.use(Slider)
|
// .use(Slider)
|
||||||
.use(InputNumber)
|
// .use(InputNumber)
|
||||||
.use(Carousel)
|
// .use(Carousel)
|
||||||
.use(Popconfirm)
|
// .use(Popconfirm)
|
||||||
.use(Skeleton)
|
// .use(Skeleton)
|
||||||
.use(Cascader)
|
// .use(Cascader)
|
||||||
.use(Rate)
|
// .use(Rate)
|
||||||
.use(VXETable)
|
// .use(VXETable)
|
||||||
}
|
// }
|
||||||
|
|||||||
@ -0,0 +1,8 @@
|
|||||||
|
/*
|
||||||
|
* @Description: 兄弟组件传值
|
||||||
|
* @Author: lijj
|
||||||
|
* @Date: 2024-04-18 15:14:02
|
||||||
|
*/
|
||||||
|
import mitt from 'mitt'
|
||||||
|
const emitter = mitt()
|
||||||
|
export default emitter
|
||||||
@ -0,0 +1,98 @@
|
|||||||
|
<!--
|
||||||
|
* @Description: 基础配置 -> 列表设置 -> 列表设置弹窗内容组件 -> 表格列拖动组件
|
||||||
|
* @Author: lijj
|
||||||
|
* @Date: 2024-04-16 10:33:31
|
||||||
|
-->
|
||||||
|
<template>
|
||||||
|
<div class="ds-table-set-content-col-drag">
|
||||||
|
<!-- 列数据表头集合 -->
|
||||||
|
<transition-group tag="div" class="container">
|
||||||
|
<a-button
|
||||||
|
v-for="item in colData"
|
||||||
|
:key="item.value"
|
||||||
|
:type="btnType(item.value)"
|
||||||
|
draggable="true"
|
||||||
|
@click="chooseCol(item)"
|
||||||
|
@dragstart="handleDragStart($event, item)"
|
||||||
|
@dragover.prevent="handleDragOver($event, item)"
|
||||||
|
@dragenter="handleDragEnter($event, item)"
|
||||||
|
@dragend="handleDragEnd($event, item)"
|
||||||
|
>
|
||||||
|
{{ item.title }}
|
||||||
|
</a-button>
|
||||||
|
</transition-group>
|
||||||
|
</div>
|
||||||
|
</template>
|
||||||
|
|
||||||
|
<script setup>
|
||||||
|
import { inject, ref, nextTick, provide } from 'vue'
|
||||||
|
import emitter from '/@/utils/Bus'
|
||||||
|
// 注入选择的表格行数据
|
||||||
|
const content = JSON.parse(inject('colData').value.content)
|
||||||
|
const colData = ref(content.columns)
|
||||||
|
// 当前选中的列value
|
||||||
|
const colName = ref()
|
||||||
|
// 按钮类型
|
||||||
|
const btnType = (v) => {
|
||||||
|
if (v === colName.value) return 'primary'
|
||||||
|
return 'default'
|
||||||
|
}
|
||||||
|
provide('colDataEnd', colData)
|
||||||
|
// 列按钮点击事件
|
||||||
|
const chooseCol = (item) => {
|
||||||
|
if (colName.value && colName.value === item.value) {
|
||||||
|
colName.value = null
|
||||||
|
emitter.emit('chooseCol', {})
|
||||||
|
} else {
|
||||||
|
colName.value = item.value
|
||||||
|
emitter.emit('chooseCol', item)
|
||||||
|
}
|
||||||
|
}
|
||||||
|
// 定义拖动开始的数据容器
|
||||||
|
let dragging = {}
|
||||||
|
// 定义拖动结束的数据容器
|
||||||
|
let ending = {}
|
||||||
|
// 拖动开始回调
|
||||||
|
const handleDragStart = (e, item) => {
|
||||||
|
dragging = item
|
||||||
|
}
|
||||||
|
// 拖动覆盖过程回调
|
||||||
|
const handleDragOver = (e) => {
|
||||||
|
e.dataTransfer.dropEffect = 'move'
|
||||||
|
}
|
||||||
|
// 拖动进入把节点改成可移动节点
|
||||||
|
const handleDragEnter = (e, item) => {
|
||||||
|
e.dataTransfer.effectAllowed = 'move'
|
||||||
|
ending = item
|
||||||
|
}
|
||||||
|
// 拖动结束处理数据
|
||||||
|
const handleDragEnd = () => {
|
||||||
|
if (ending.key === dragging.key) {
|
||||||
|
return
|
||||||
|
}
|
||||||
|
// 新的数组
|
||||||
|
let newItems = [...colData.value]
|
||||||
|
// 拖动开始时候的节点下标
|
||||||
|
const src = newItems.indexOf(dragging)
|
||||||
|
// 拖动结束时候的节点下标
|
||||||
|
const dst = newItems.indexOf(ending)
|
||||||
|
newItems.splice(src, 1, ...newItems.splice(dst, 1, newItems[src]))
|
||||||
|
colData.value = newItems
|
||||||
|
}
|
||||||
|
const getColList = () => {
|
||||||
|
return colData
|
||||||
|
}
|
||||||
|
defineExpose({
|
||||||
|
getColList
|
||||||
|
})
|
||||||
|
</script>
|
||||||
|
|
||||||
|
<style lang="scss">
|
||||||
|
.ds-table-set-content-col-drag {
|
||||||
|
padding: 15px;
|
||||||
|
.ant-btn {
|
||||||
|
margin: 0 10px 10px 0;
|
||||||
|
transition: all linear 0.3s;
|
||||||
|
}
|
||||||
|
}
|
||||||
|
</style>
|
||||||
@ -0,0 +1,57 @@
|
|||||||
|
<!--
|
||||||
|
* @Description: 基础配置 -> 列表设置 -> 列表设置弹窗内容组件
|
||||||
|
* @Author: lijj
|
||||||
|
* @Date: 2024-04-16 10:33:31
|
||||||
|
-->
|
||||||
|
<template>
|
||||||
|
<div class="table-set-content">
|
||||||
|
<div class="flex">
|
||||||
|
<div class="table-box">
|
||||||
|
<!-- 表格列区域组件 -->
|
||||||
|
<TableColDrag ref="TableColDragRef" />
|
||||||
|
</div>
|
||||||
|
<div class="opt-box">
|
||||||
|
<h3>列属性设置</h3>
|
||||||
|
<!-- 表格操作列组件 -->
|
||||||
|
<TableColSet ref="TableColSetRef" />
|
||||||
|
</div>
|
||||||
|
</div>
|
||||||
|
</div>
|
||||||
|
</template>
|
||||||
|
|
||||||
|
<script lang="ts" setup>
|
||||||
|
import { ref, defineExpose } from 'vue'
|
||||||
|
// 引入操作列组件
|
||||||
|
import TableColSet from './tableColSet.vue'
|
||||||
|
// 引入表格列容器组件
|
||||||
|
import TableColDrag from './tableColDrag.vue'
|
||||||
|
const TableColDragRef = ref()
|
||||||
|
const TableColSetRef = ref()
|
||||||
|
const submit = async () => {
|
||||||
|
const flag = await TableColSetRef.value.onSubmit()
|
||||||
|
console.log(flag)
|
||||||
|
return flag
|
||||||
|
}
|
||||||
|
const getColList = () => {
|
||||||
|
return TableColDragRef.value.getColList()
|
||||||
|
}
|
||||||
|
defineExpose({
|
||||||
|
submit,
|
||||||
|
getColList
|
||||||
|
})
|
||||||
|
</script>
|
||||||
|
|
||||||
|
<style lang="scss">
|
||||||
|
.table-set-content {
|
||||||
|
.flex {
|
||||||
|
display: flex;
|
||||||
|
.opt-box {
|
||||||
|
width: 200px;
|
||||||
|
border-left: 1px solid #d9d9d9;
|
||||||
|
}
|
||||||
|
.table-box {
|
||||||
|
flex: 1;
|
||||||
|
}
|
||||||
|
}
|
||||||
|
}
|
||||||
|
</style>
|
||||||
Loading…
Reference in New Issue