列表设置
parent
408d0b7deb
commit
2fb35404d5
@ -1,111 +1,111 @@
|
||||
import type { App } from 'vue'
|
||||
import { Icon } from './Icon'
|
||||
import { Button } from './Button'
|
||||
import VXETable from 'vxe-table'
|
||||
import 'vxe-table/lib/style.css'
|
||||
import {
|
||||
// Need
|
||||
Button as AntButton,
|
||||
Select,
|
||||
Alert,
|
||||
Checkbox,
|
||||
DatePicker,
|
||||
Radio,
|
||||
Switch,
|
||||
Card,
|
||||
List,
|
||||
Tabs,
|
||||
Descriptions,
|
||||
Tree,
|
||||
Table,
|
||||
Divider,
|
||||
Modal,
|
||||
Drawer,
|
||||
TreeSelect,
|
||||
Dropdown,
|
||||
Tag,
|
||||
Tooltip,
|
||||
Badge,
|
||||
Popover,
|
||||
Upload,
|
||||
Transfer,
|
||||
Steps,
|
||||
PageHeader,
|
||||
Result,
|
||||
Empty,
|
||||
Avatar,
|
||||
Menu,
|
||||
Breadcrumb,
|
||||
Form,
|
||||
Input,
|
||||
Row,
|
||||
Col,
|
||||
Spin,
|
||||
Space,
|
||||
Layout,
|
||||
Collapse,
|
||||
Slider,
|
||||
InputNumber,
|
||||
Carousel,
|
||||
Popconfirm,
|
||||
Skeleton,
|
||||
Cascader,
|
||||
Rate,
|
||||
} from 'ant-design-vue'
|
||||
// import type { App } from 'vue'
|
||||
// import { Icon } from './Icon'
|
||||
// import { Button } from './Button'
|
||||
// import VXETable from 'vxe-table'
|
||||
// import 'vxe-table/lib/style.css'
|
||||
// import {
|
||||
// // Need
|
||||
// Button as AntButton,
|
||||
// Select,
|
||||
// Alert,
|
||||
// Checkbox,
|
||||
// DatePicker,
|
||||
// Radio,
|
||||
// Switch,
|
||||
// Card,
|
||||
// List,
|
||||
// Tabs,
|
||||
// Descriptions,
|
||||
// Tree,
|
||||
// Table,
|
||||
// Divider,
|
||||
// Modal,
|
||||
// Drawer,
|
||||
// TreeSelect,
|
||||
// Dropdown,
|
||||
// Tag,
|
||||
// Tooltip,
|
||||
// Badge,
|
||||
// Popover,
|
||||
// Upload,
|
||||
// Transfer,
|
||||
// Steps,
|
||||
// PageHeader,
|
||||
// Result,
|
||||
// Empty,
|
||||
// Avatar,
|
||||
// Menu,
|
||||
// Breadcrumb,
|
||||
// Form,
|
||||
// Input,
|
||||
// Row,
|
||||
// Col,
|
||||
// Spin,
|
||||
// Space,
|
||||
// Layout,
|
||||
// Collapse,
|
||||
// Slider,
|
||||
// InputNumber,
|
||||
// Carousel,
|
||||
// Popconfirm,
|
||||
// Skeleton,
|
||||
// Cascader,
|
||||
// Rate,
|
||||
// } from 'ant-design-vue'
|
||||
|
||||
const compList = [AntButton.Group, Icon]
|
||||
export function registerGlobComp(app: App) {
|
||||
// app.use(Input).use(Button).use(Layout)
|
||||
compList.forEach((comp) => {
|
||||
app.component(comp.name || comp.displayName, comp)
|
||||
})
|
||||
// const compList = [AntButton.Group, Icon]
|
||||
// export function registerGlobComp(app: App) {
|
||||
// // app.use(Input).use(Button).use(Layout)
|
||||
// compList.forEach((comp) => {
|
||||
// app.component(comp.name || comp.displayName, comp)
|
||||
// })
|
||||
|
||||
app
|
||||
.use(Select)
|
||||
.use(Alert)
|
||||
.use(Button)
|
||||
.use(Breadcrumb)
|
||||
.use(Checkbox)
|
||||
.use(DatePicker)
|
||||
.use(Radio)
|
||||
.use(Switch)
|
||||
.use(Card)
|
||||
.use(List)
|
||||
.use(Descriptions)
|
||||
.use(Tree)
|
||||
.use(TreeSelect)
|
||||
.use(Table)
|
||||
.use(Divider)
|
||||
.use(Modal)
|
||||
.use(Drawer)
|
||||
.use(Dropdown)
|
||||
.use(Tag)
|
||||
.use(Tooltip)
|
||||
.use(Badge)
|
||||
.use(Popover)
|
||||
.use(Upload)
|
||||
.use(Transfer)
|
||||
.use(Steps)
|
||||
.use(PageHeader)
|
||||
.use(Result)
|
||||
.use(Empty)
|
||||
.use(Avatar)
|
||||
.use(Menu)
|
||||
.use(Tabs)
|
||||
.use(Form)
|
||||
.use(Input)
|
||||
.use(Row)
|
||||
.use(Col)
|
||||
.use(Spin)
|
||||
.use(Space)
|
||||
.use(Layout)
|
||||
.use(Collapse)
|
||||
.use(Slider)
|
||||
.use(InputNumber)
|
||||
.use(Carousel)
|
||||
.use(Popconfirm)
|
||||
.use(Skeleton)
|
||||
.use(Cascader)
|
||||
.use(Rate)
|
||||
.use(VXETable)
|
||||
}
|
||||
// app
|
||||
// .use(Select)
|
||||
// .use(Alert)
|
||||
// .use(Button)
|
||||
// .use(Breadcrumb)
|
||||
// .use(Checkbox)
|
||||
// .use(DatePicker)
|
||||
// .use(Radio)
|
||||
// .use(Switch)
|
||||
// .use(Card)
|
||||
// .use(List)
|
||||
// .use(Descriptions)
|
||||
// .use(Tree)
|
||||
// .use(TreeSelect)
|
||||
// .use(Table)
|
||||
// .use(Divider)
|
||||
// .use(Modal)
|
||||
// .use(Drawer)
|
||||
// .use(Dropdown)
|
||||
// .use(Tag)
|
||||
// .use(Tooltip)
|
||||
// .use(Badge)
|
||||
// .use(Popover)
|
||||
// .use(Upload)
|
||||
// .use(Transfer)
|
||||
// .use(Steps)
|
||||
// .use(PageHeader)
|
||||
// .use(Result)
|
||||
// .use(Empty)
|
||||
// .use(Avatar)
|
||||
// .use(Menu)
|
||||
// .use(Tabs)
|
||||
// .use(Form)
|
||||
// .use(Input)
|
||||
// .use(Row)
|
||||
// .use(Col)
|
||||
// .use(Spin)
|
||||
// .use(Space)
|
||||
// .use(Layout)
|
||||
// .use(Collapse)
|
||||
// .use(Slider)
|
||||
// .use(InputNumber)
|
||||
// .use(Carousel)
|
||||
// .use(Popconfirm)
|
||||
// .use(Skeleton)
|
||||
// .use(Cascader)
|
||||
// .use(Rate)
|
||||
// .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