ci-plus 1.5.1 → 1.5.2
This diff represents the content of publicly available package versions that have been released to one of the supported registries. The information contained in this diff is provided for informational purposes only and reflects changes between package versions as they appear in their respective public registries.
- package/package.json +1 -1
- package/src/dailog/dialog.vue +4 -0
- package/src/fileRelated/ciupload.vue +7 -1
- package/src/fileRelated/seeFile.vue +7 -3
- package/src/fileRelated/uploadV2.vue +6 -1
- package/src/identificationCard/identificationCard.vue +1 -0
- package/src/queryCondition/src/index.vue +6 -0
- package/src/select/select.vue +5 -0
- package/src/selectSuffix/selectSuffix.vue +15 -1
- package/src/selectTable/src/index.vue +1 -1
- package/src/sortableTable/headerCheckBox.vue +1 -1
- package/src/sortableTable/headerInput.vue +1 -2
- package/src/sortableTable/headerRange.vue +1 -1
- package/src/sortableTable/headerSelectV2.vue +1 -2
- package/src/sortableTable/sortableTable.vue +1 -1
- package/src/sortableTable/sortableTableDialog.vue +1 -0
- package/src/sortableTable/utils/headerPopover.vue +2 -2
- package/src/sortableTable/utils/sortableTableColumnCell.vue +1 -0
- package/src/sortableTable/utils/sortableTableDragItem.vue +1 -0
- package/src/sortableTable/utils/sortableTableColumnCell2.vue +0 -70
- package/src/sortableTable/utils/sortableTableDragItem2.vue +0 -196
package/package.json
CHANGED
package/src/dailog/dialog.vue
CHANGED
|
@@ -4,6 +4,10 @@
|
|
|
4
4
|
defineOptions({ name: 'ci-dialog' })
|
|
5
5
|
import { ref, reactive } from 'vue'
|
|
6
6
|
import { Close, FullScreen } from '@element-plus/icons-vue'
|
|
7
|
+
import {
|
|
8
|
+
ElDialog,
|
|
9
|
+
ElButton,
|
|
10
|
+
} from 'element-plus'
|
|
7
11
|
import './style/index.less'
|
|
8
12
|
// 接收fugure组件传值
|
|
9
13
|
export interface Props {
|
|
@@ -39,7 +39,13 @@
|
|
|
39
39
|
<script setup lang="ts">
|
|
40
40
|
defineOptions({ name: 'ci-upload' })
|
|
41
41
|
import { ref } from 'vue'
|
|
42
|
-
import {
|
|
42
|
+
import {
|
|
43
|
+
ElMessage,
|
|
44
|
+
ElLoading,
|
|
45
|
+
genFileId,
|
|
46
|
+
ElButton,
|
|
47
|
+
ElPopover
|
|
48
|
+
} from 'element-plus'
|
|
43
49
|
import axios from 'axios'
|
|
44
50
|
import type { UploadInstance, UploadProps, UploadRawFile } from 'element-plus'
|
|
45
51
|
const upload = ref<UploadInstance>()
|
|
@@ -31,7 +31,11 @@ defineOptions({ name: 'ci-seeFile' })
|
|
|
31
31
|
import { ref, watch } from 'vue'
|
|
32
32
|
import axios from 'axios'
|
|
33
33
|
import apis from '../utils/baseApi'
|
|
34
|
-
import {
|
|
34
|
+
import {
|
|
35
|
+
ElMessage,
|
|
36
|
+
ElButton,
|
|
37
|
+
ElPopover
|
|
38
|
+
} from 'element-plus'
|
|
35
39
|
|
|
36
40
|
const props = defineProps({
|
|
37
41
|
url: {
|
|
@@ -47,7 +51,7 @@ const props = defineProps({
|
|
|
47
51
|
// 定义一个函数,用于处理字符串
|
|
48
52
|
const setFilePath = (arr: string[], url?: string) => {
|
|
49
53
|
// console.log('重新渲染数据', arr);
|
|
50
|
-
if (arr && arr.length > 0) {
|
|
54
|
+
if (arr && Array.isArray(arr) && arr.length > 0) {
|
|
51
55
|
let newArr: { name: string; oldName: string }[] = []
|
|
52
56
|
arr.forEach((item, i) => {
|
|
53
57
|
let segments = item.split('.')
|
|
@@ -65,7 +69,7 @@ const setFilePath = (arr: string[], url?: string) => {
|
|
|
65
69
|
|
|
66
70
|
// 将路径处理成附件的参数
|
|
67
71
|
const fileArr = (url: string, pathArr: string[]) => {
|
|
68
|
-
if (pathArr && pathArr.length > 0) {
|
|
72
|
+
if (pathArr && Array.isArray(pathArr) && pathArr.length > 0) {
|
|
69
73
|
let objArr: any = []
|
|
70
74
|
if (pathArr.length > 0) {
|
|
71
75
|
pathArr.map((item: any) => {
|
|
@@ -83,7 +83,12 @@ const fileArr = (url: string, pathArr: string[]) => {
|
|
|
83
83
|
}
|
|
84
84
|
|
|
85
85
|
import { ref } from 'vue'
|
|
86
|
-
import {
|
|
86
|
+
import {
|
|
87
|
+
ElMessage,
|
|
88
|
+
ElLoading,
|
|
89
|
+
ElButton,
|
|
90
|
+
ElPopover
|
|
91
|
+
} from 'element-plus'
|
|
87
92
|
import axios from 'axios'
|
|
88
93
|
import type {
|
|
89
94
|
UploadFile,
|
|
@@ -1439,6 +1439,7 @@
|
|
|
1439
1439
|
defineOptions({ name: 'ci-identificationCard' })
|
|
1440
1440
|
import { ref, onMounted, nextTick, watch, computed } from 'vue'
|
|
1441
1441
|
import barCode from './barCode.vue'
|
|
1442
|
+
import { ElButton,ElImage } from 'element-plus'
|
|
1442
1443
|
import CiQrcode from './qrcode'
|
|
1443
1444
|
// 导入 public/C&U.png 图片
|
|
1444
1445
|
// import C_U from '@/assets/C&U.png'
|
|
@@ -144,6 +144,12 @@
|
|
|
144
144
|
defineOptions({ name: 'ci-query-condition' })
|
|
145
145
|
import RenderComp from './renderComp.vue'
|
|
146
146
|
import { computed, ref, watch, useSlots, onMounted, reactive, toRef } from 'vue'
|
|
147
|
+
import {
|
|
148
|
+
ElButton,
|
|
149
|
+
ElForm,
|
|
150
|
+
ElFormItem,
|
|
151
|
+
ElIcon,
|
|
152
|
+
} from 'element-plus'
|
|
147
153
|
const props = defineProps({
|
|
148
154
|
opts: {
|
|
149
155
|
type: Object,
|
package/src/select/select.vue
CHANGED
|
@@ -57,6 +57,11 @@
|
|
|
57
57
|
<script setup lang="ts">
|
|
58
58
|
defineOptions({ name: 'ci-select' })
|
|
59
59
|
import { computed, useSlots } from 'vue'
|
|
60
|
+
import {
|
|
61
|
+
ElPagination,
|
|
62
|
+
ElCheckbox,
|
|
63
|
+
ElOption
|
|
64
|
+
} from 'element-plus'
|
|
60
65
|
const props: any = defineProps({
|
|
61
66
|
modelValue: {
|
|
62
67
|
type: [String, Number, Array]
|
|
@@ -171,7 +171,21 @@
|
|
|
171
171
|
<script setup lang="ts">
|
|
172
172
|
import { reactive, h, ref, onMounted, watch } from 'vue'
|
|
173
173
|
import { Operation, Search } from '@element-plus/icons-vue'
|
|
174
|
-
import {
|
|
174
|
+
import {
|
|
175
|
+
ElMessage,
|
|
176
|
+
ElTable,
|
|
177
|
+
ElTableColumn,
|
|
178
|
+
ElSelectV2,
|
|
179
|
+
ElPagination,
|
|
180
|
+
ElIcon,
|
|
181
|
+
ElDialog,
|
|
182
|
+
ElRow,
|
|
183
|
+
ElCol,
|
|
184
|
+
ElButtonGroup,
|
|
185
|
+
ElTooltip,
|
|
186
|
+
ElButton,
|
|
187
|
+
ElInput
|
|
188
|
+
} from 'element-plus'
|
|
175
189
|
import axios from 'axios'
|
|
176
190
|
import { SelectSuffix, Basic, AnyO } from './types'
|
|
177
191
|
defineOptions({
|
|
@@ -152,7 +152,7 @@ defineOptions({ name: 'ci-select-table' })
|
|
|
152
152
|
import TQueryCondition from '../../queryCondition/src/index.vue'
|
|
153
153
|
import RenderCol from './renderCol.vue'
|
|
154
154
|
import { computed, useAttrs, useSlots, ref, watch, nextTick, reactive, onMounted } from 'vue'
|
|
155
|
-
import { ElMessage } from 'element-plus'
|
|
155
|
+
import { ElMessage,ElInput,ElSelect,ElButton,ElTable,ElTableColumn,ElRadio,ElPagination } from 'element-plus'
|
|
156
156
|
import ClickOutside from '../../utils/directives/click-outside/index'
|
|
157
157
|
const props = defineProps({
|
|
158
158
|
// input输入框的值(modelValue)
|
|
@@ -31,7 +31,7 @@
|
|
|
31
31
|
import { computed, ref } from 'vue'
|
|
32
32
|
import headerPopover from './utils/headerPopover.vue'
|
|
33
33
|
import filterIconVue from './utils/filterIcon.vue'
|
|
34
|
-
import { TooltipTriggerType } from 'element-plus'
|
|
34
|
+
import { TooltipTriggerType,ElCheckboxGroup,ElCheckbox } from 'element-plus'
|
|
35
35
|
const props = defineProps<{
|
|
36
36
|
text?: string
|
|
37
37
|
initValue?: string
|
|
@@ -169,8 +169,7 @@ import SvgIcon from '../svgIcon/svgicon.vue'
|
|
|
169
169
|
import { computed, ref, watch, PropType, onMounted } from 'vue'
|
|
170
170
|
import lodash, { debounce } from 'lodash-es'
|
|
171
171
|
import headerPopover from './utils/headerPopover.vue'
|
|
172
|
-
import
|
|
173
|
-
import { TooltipTriggerType } from 'element-plus'
|
|
172
|
+
import { TooltipTriggerType,ElSelect,ElOption,ElInput,ElSelectV2,ElPagination,ElDatePicker } from 'element-plus'
|
|
174
173
|
|
|
175
174
|
// 定义 props 的类型
|
|
176
175
|
interface SelectConfig {
|
|
@@ -59,7 +59,7 @@
|
|
|
59
59
|
import { computed, ref } from 'vue'
|
|
60
60
|
import headerPopover from './utils/headerPopover.vue'
|
|
61
61
|
import filterIconVue from './utils/filterIcon.vue'
|
|
62
|
-
import { TooltipTriggerType } from 'element-plus'
|
|
62
|
+
import { TooltipTriggerType, ElInput, ElDatePicker } from 'element-plus'
|
|
63
63
|
import { Shortcuts } from './utils/dateShortcuts'
|
|
64
64
|
type InputConfig = {
|
|
65
65
|
placeholder?: string
|
|
@@ -44,9 +44,8 @@
|
|
|
44
44
|
import SvgIcon from '@/components/SvgIcon.vue'
|
|
45
45
|
import { computed, ref } from 'vue'
|
|
46
46
|
import headerPopover from './utils/headerPopover.vue'
|
|
47
|
-
import
|
|
47
|
+
import { TooltipTriggerType, ElSelectV2 } from 'element-plus'
|
|
48
48
|
import { Props } from 'element-plus/es/components/select-v2/src/useProps'
|
|
49
|
-
import { TooltipTriggerType } from 'element-plus'
|
|
50
49
|
import { useWeighingStore } from '@/store/Weighing'
|
|
51
50
|
import { removeParamsFilters } from './utils/removeParamsFilters'
|
|
52
51
|
const store = useWeighingStore()
|
|
@@ -22,7 +22,7 @@
|
|
|
22
22
|
</template>
|
|
23
23
|
<script setup lang="ts">
|
|
24
24
|
defineOptions({ name: 'ci-table' })
|
|
25
|
-
import { CellCls, ElTable
|
|
25
|
+
import { CellCls, ElTable } from 'element-plus'
|
|
26
26
|
import Sortable from 'sortablejs'
|
|
27
27
|
import { VNode, computed, ref } from 'vue'
|
|
28
28
|
import { SortableTableIns, SortColumn } from './utils/interface'
|
|
@@ -52,6 +52,7 @@ import { SortableTableDialog } from './utils/interface'
|
|
|
52
52
|
import sortableTableDragItem from './utils/sortableTableDragItem.vue'
|
|
53
53
|
import { Rank } from '@element-plus/icons-vue'
|
|
54
54
|
import SvgIcon from '../svgIcon/svgicon.vue'
|
|
55
|
+
import { ElDialog,ElButton,ElTooltip,ElIcon,ElPopover } from 'element-plus'
|
|
55
56
|
|
|
56
57
|
const emits = defineEmits(['update:modelValue', 'update:data', 'submit'])
|
|
57
58
|
const state = ref(false)
|
|
@@ -12,7 +12,7 @@
|
|
|
12
12
|
<template #reference>
|
|
13
13
|
<slot name="reference" :open="open" :close="close" :toggle="toggle" />
|
|
14
14
|
</template>
|
|
15
|
-
<div style="display: flex; align-items: center; justify-content: center"
|
|
15
|
+
<div style="display: flex; align-items: center; justify-content: center" >
|
|
16
16
|
<div style="flex-grow: 1">
|
|
17
17
|
<slot :closeF="close" />
|
|
18
18
|
</div>
|
|
@@ -39,7 +39,7 @@
|
|
|
39
39
|
|
|
40
40
|
<script setup lang="ts">
|
|
41
41
|
import { onMounted, ref } from 'vue'
|
|
42
|
-
import { ElPopover, TooltipTriggerType } from 'element-plus'
|
|
42
|
+
import { ElPopover,ElButton, TooltipTriggerType } from 'element-plus'
|
|
43
43
|
const popoverRef = ref<InstanceType<typeof ElPopover>>()
|
|
44
44
|
const props = defineProps<{
|
|
45
45
|
popperStyle: any // el-popover的自定义样式
|
|
@@ -47,6 +47,7 @@
|
|
|
47
47
|
<script setup lang="ts">
|
|
48
48
|
import SvgIcon from '../../svgIcon/index'
|
|
49
49
|
import { computed } from 'vue'
|
|
50
|
+
import { ElInput, ElButton , ElIcon} from 'element-plus'
|
|
50
51
|
// import draggable from 'vuedraggable'
|
|
51
52
|
import { VueDraggable } from 'vue-draggable-plus'
|
|
52
53
|
import { SortColumn, SortableTableIns } from './interface'
|
|
@@ -1,70 +0,0 @@
|
|
|
1
|
-
<!-- /*
|
|
2
|
-
* @module sortableTableColumnCell
|
|
3
|
-
* @author : 杨佳贺&卖女孩的小火柴
|
|
4
|
-
* @description : 表格列单元格
|
|
5
|
-
* @version : 1.0.0
|
|
6
|
-
* @since : 创建时间 2023-12-29 13:40:49
|
|
7
|
-
* @lastTime : 2023-12-29 新增默认居中显示属性
|
|
8
|
-
* @lastTime : 2024-01-03 新增默认超出隐藏悬停显示、拖拽改变列宽
|
|
9
|
-
*/ -->
|
|
10
|
-
|
|
11
|
-
<template>
|
|
12
|
-
<el-table-column v-if="!data.hide && data.children" v-bind="data.col">
|
|
13
|
-
<sortable-table-column-cell v-for="v in data.children || []" :key="v.key" :data="v" />
|
|
14
|
-
</el-table-column>
|
|
15
|
-
<el-table-column
|
|
16
|
-
v-else-if="!data.hide && data.scope"
|
|
17
|
-
v-bind="data.col"
|
|
18
|
-
:align="data.col.align || 'center'"
|
|
19
|
-
:showOverflowTooltip="data.col.showOverflowTooltip || true"
|
|
20
|
-
:resizable="data.col.resizable || true"
|
|
21
|
-
>
|
|
22
|
-
<template #default="scope">
|
|
23
|
-
{{ data.scope(scope) }}
|
|
24
|
-
</template>
|
|
25
|
-
<template #header="header">
|
|
26
|
-
<component :is="headerVue(header)" :header="header"></component>
|
|
27
|
-
</template>
|
|
28
|
-
</el-table-column>
|
|
29
|
-
<el-table-column
|
|
30
|
-
v-else-if="!data.hide && data.component"
|
|
31
|
-
v-bind="data.col"
|
|
32
|
-
:align="data.col.align || 'center'"
|
|
33
|
-
:showOverflowTooltip="data.col.showOverflowTooltip || true"
|
|
34
|
-
:resizable="data.col.resizable || true"
|
|
35
|
-
>
|
|
36
|
-
<template #default="scope">
|
|
37
|
-
<component :is="data.component(h, scope)" :scope="scope"></component>
|
|
38
|
-
</template>
|
|
39
|
-
<template #header="header">
|
|
40
|
-
<component :is="headerVue(header)" :header="header"></component>
|
|
41
|
-
</template>
|
|
42
|
-
</el-table-column>
|
|
43
|
-
<el-table-column
|
|
44
|
-
v-else-if="!data.hide"
|
|
45
|
-
v-bind="data.col"
|
|
46
|
-
:align="data.col.align || 'center'"
|
|
47
|
-
:showOverflowTooltip="data.col.showOverflowTooltip || true"
|
|
48
|
-
:resizable="data.col.resizable || true"
|
|
49
|
-
>
|
|
50
|
-
<template #header="header">
|
|
51
|
-
<component :is="headerVue(header)" :header="header"></component>
|
|
52
|
-
</template>
|
|
53
|
-
</el-table-column>
|
|
54
|
-
</template>
|
|
55
|
-
<script setup lang="ts">
|
|
56
|
-
import { Scope, SortColumn } from './interface'
|
|
57
|
-
import { h } from 'vue'
|
|
58
|
-
defineOptions({ name: 'ci-columncell' })
|
|
59
|
-
|
|
60
|
-
const props = defineProps<{
|
|
61
|
-
data: SortColumn
|
|
62
|
-
}>()
|
|
63
|
-
const headerVue = (header: Pick<Scope<any>, '$index' | 'column'>) => {
|
|
64
|
-
const item = props.data.header?.(h, header)
|
|
65
|
-
if (!item) return h('div', props.data.col.label)
|
|
66
|
-
if (typeof item === 'string') return h('div', item)
|
|
67
|
-
return item
|
|
68
|
-
}
|
|
69
|
-
</script>
|
|
70
|
-
<style scoped></style>
|
|
@@ -1,196 +0,0 @@
|
|
|
1
|
-
<!-- 2023-12-29 新增显示/隐藏按钮 -->
|
|
2
|
-
|
|
3
|
-
<template>
|
|
4
|
-
<!-- <vue-draggable
|
|
5
|
-
class="drag-container"
|
|
6
|
-
:list="modelValue"
|
|
7
|
-
chosen-class="hover"
|
|
8
|
-
handle=".mover"
|
|
9
|
-
draggable=".item"
|
|
10
|
-
itemKey="key"
|
|
11
|
-
> -->
|
|
12
|
-
<vue-draggable
|
|
13
|
-
class="drag-container"
|
|
14
|
-
v-model="modelValue"
|
|
15
|
-
chosen-class="hover"
|
|
16
|
-
handle=".mover"
|
|
17
|
-
draggable=".item"
|
|
18
|
-
itemKey="key"
|
|
19
|
-
>
|
|
20
|
-
<!-- <template #item="{ element, index }: { element: SortColumn; index: number }">
|
|
21
|
-
<div :class="{ item: true, 'item-hide': element.hide }">
|
|
22
|
-
<div class="mover">
|
|
23
|
-
<el-icon :size="16"><Rank /></el-icon>
|
|
24
|
-
</div>
|
|
25
|
-
<div class="title" @click="handleShow(element)">
|
|
26
|
-
{{ element.col.label }}
|
|
27
|
-
</div>
|
|
28
|
-
<div class="pin" v-if="showPin">
|
|
29
|
-
<span
|
|
30
|
-
v-if="element.col.fixed === true || element.col.fixed === 'left'"
|
|
31
|
-
@click="element.col.fixed = void 0"
|
|
32
|
-
>
|
|
33
|
-
<svg-icon name="regular-left" size="20" color="#2C93FF"></svg-icon>
|
|
34
|
-
</span>
|
|
35
|
-
<span v-else @click="element.col.fixed = 'left'">
|
|
36
|
-
<svg-icon name="regular-center" size="20"></svg-icon>
|
|
37
|
-
</span>
|
|
38
|
-
<span v-if="element.col.fixed === 'right'" @click="element.col.fixed = void 0">
|
|
39
|
-
<svg-icon name="regular-right" size="20" color="#2C93FF"></svg-icon>
|
|
40
|
-
</span>
|
|
41
|
-
<span v-else @click="element.col.fixed = 'right'">
|
|
42
|
-
<svg-icon name="regular-center" size="20"></svg-icon>
|
|
43
|
-
</span>
|
|
44
|
-
</div>
|
|
45
|
-
<div class="ifshow">
|
|
46
|
-
<el-button
|
|
47
|
-
:type="element.hide ? 'primary' : ''"
|
|
48
|
-
@click="handleShow(element)"
|
|
49
|
-
size="small"
|
|
50
|
-
>
|
|
51
|
-
{{ element.hide ? '显示' : '隐藏' }}
|
|
52
|
-
</el-button>
|
|
53
|
-
</div>
|
|
54
|
-
<div class="widths">
|
|
55
|
-
宽度:
|
|
56
|
-
<el-input class="w-50 m-2" v-model="element.col.width" size="small" width="50"></el-input>
|
|
57
|
-
</div>
|
|
58
|
-
<sortable-table-drag-item v-if="element.children" v-model="element.children" />
|
|
59
|
-
</div>
|
|
60
|
-
</template> -->
|
|
61
|
-
<div v-for="(element, index) in modelValue" :class="{ item: true, 'item-hide': element.hide }">
|
|
62
|
-
<div class="mover">
|
|
63
|
-
<el-icon :size="16"><Rank /></el-icon>
|
|
64
|
-
</div>
|
|
65
|
-
<div class="title" @click="element.hide = !element.hide">
|
|
66
|
-
{{ element.col.label }}
|
|
67
|
-
</div>
|
|
68
|
-
<div class="pin" v-if="showPin">
|
|
69
|
-
<!-- <span v-if="element.col.fixed === true || element.col.fixed === 'left'" @click="element.col.fixed = void 0">
|
|
70
|
-
<var-icon name="pin-off" :size="16" style="transform: rotate(-30deg); color: cadetblue" />
|
|
71
|
-
</span>
|
|
72
|
-
<span v-else @click="element.col.fixed = 'left'">
|
|
73
|
-
<var-icon name="pin" :size="16" style="transform: rotate(-30deg)" />
|
|
74
|
-
</span>
|
|
75
|
-
<span v-if="element.col.fixed === 'right'" @click="element.col.fixed = void 0">
|
|
76
|
-
<var-icon name="pin-off" :size="16" style="transform: scaleX(-1) rotate(-30deg); color: cadetblue" />
|
|
77
|
-
</span>
|
|
78
|
-
<span v-else @click="element.col.fixed = 'right'">
|
|
79
|
-
<var-icon name="pin" :size="16" style="transform: rotate(30deg)" />
|
|
80
|
-
</span> -->
|
|
81
|
-
<span
|
|
82
|
-
v-if="element.col.fixed === true || element.col.fixed === 'left'"
|
|
83
|
-
@click="element.col.fixed = void 0"
|
|
84
|
-
>
|
|
85
|
-
<svg-icon name="regular-left" size="20" color="#2C93FF"></svg-icon>
|
|
86
|
-
</span>
|
|
87
|
-
<span v-else @click="element.col.fixed = 'left'">
|
|
88
|
-
<svg-icon name="regular-center" size="20"></svg-icon>
|
|
89
|
-
</span>
|
|
90
|
-
<span v-if="element.col.fixed === 'right'" @click="element.col.fixed = void 0">
|
|
91
|
-
<svg-icon name="regular-right" size="20" color="#2C93FF"></svg-icon>
|
|
92
|
-
</span>
|
|
93
|
-
<span v-else @click="element.col.fixed = 'right'">
|
|
94
|
-
<svg-icon name="regular-center" size="20"></svg-icon>
|
|
95
|
-
</span>
|
|
96
|
-
</div>
|
|
97
|
-
<div class="ifshow">
|
|
98
|
-
<el-button :type="element.hide ? 'primary' : ''" @click="handleShow(element)" size="small">
|
|
99
|
-
{{ element.hide ? '显示' : '隐藏' }}
|
|
100
|
-
</el-button>
|
|
101
|
-
</div>
|
|
102
|
-
<div class="widths">
|
|
103
|
-
宽度:
|
|
104
|
-
<el-input class="w-50 m-2" v-model="element.col.width" size="small" width="50"></el-input>
|
|
105
|
-
</div>
|
|
106
|
-
<sortable-table-drag-item v-if="element.children" v-model="element.children" />
|
|
107
|
-
</div>
|
|
108
|
-
</vue-draggable>
|
|
109
|
-
</template>
|
|
110
|
-
<script setup lang="ts">
|
|
111
|
-
import SvgIcon from '../../svgIcon/index'
|
|
112
|
-
import { computed } from 'vue'
|
|
113
|
-
// import draggable from 'vuedraggable'
|
|
114
|
-
import { VueDraggable } from 'vue-draggable-plus'
|
|
115
|
-
import { SortColumn, SortableTableIns } from './interface'
|
|
116
|
-
import { Rank } from '@element-plus/icons-vue'
|
|
117
|
-
const props = defineProps<{
|
|
118
|
-
modelValue: SortableTableIns['modelValue']
|
|
119
|
-
showPin?: boolean
|
|
120
|
-
}>()
|
|
121
|
-
const emits = defineEmits(['update:modelValue', 'update:data'])
|
|
122
|
-
const modelValue = computed({
|
|
123
|
-
get() {
|
|
124
|
-
return props.modelValue
|
|
125
|
-
},
|
|
126
|
-
set(value) {
|
|
127
|
-
emits('update:modelValue', value)
|
|
128
|
-
}
|
|
129
|
-
})
|
|
130
|
-
|
|
131
|
-
// 显示或者隐藏列
|
|
132
|
-
const handleShow = (col: SortColumn) => {
|
|
133
|
-
// console.log('显示或者隐藏列', col)
|
|
134
|
-
col.hide = !col.hide
|
|
135
|
-
}
|
|
136
|
-
</script>
|
|
137
|
-
<style scoped lang="scss">
|
|
138
|
-
$hoverBC: rgba(137, 182, 233, 0.5);
|
|
139
|
-
|
|
140
|
-
.drag-container {
|
|
141
|
-
// display: flex;
|
|
142
|
-
width: 100%;
|
|
143
|
-
flex-direction: column;
|
|
144
|
-
|
|
145
|
-
.item {
|
|
146
|
-
border: 1px solid #f2f2f2;
|
|
147
|
-
display: flex;
|
|
148
|
-
align-items: center;
|
|
149
|
-
white-space: nowrap;
|
|
150
|
-
width: 100%;
|
|
151
|
-
.mover,
|
|
152
|
-
.title {
|
|
153
|
-
padding: 5px;
|
|
154
|
-
cursor: pointer;
|
|
155
|
-
&:hover {
|
|
156
|
-
background: $hoverBC;
|
|
157
|
-
}
|
|
158
|
-
}
|
|
159
|
-
.title {
|
|
160
|
-
width: 150px;
|
|
161
|
-
border-left: 1px solid #f2f2f2;
|
|
162
|
-
border-right: 1px solid #f2f2f2;
|
|
163
|
-
overflow: hidden;
|
|
164
|
-
}
|
|
165
|
-
.pin {
|
|
166
|
-
cursor: pointer;
|
|
167
|
-
> *:hover {
|
|
168
|
-
background: $hoverBC;
|
|
169
|
-
}
|
|
170
|
-
> * {
|
|
171
|
-
padding: 5px;
|
|
172
|
-
}
|
|
173
|
-
}
|
|
174
|
-
.ifshow {
|
|
175
|
-
text-align: center;
|
|
176
|
-
flex: 1;
|
|
177
|
-
line-height: 32px;
|
|
178
|
-
.el-button {
|
|
179
|
-
margin-bottom: 0;
|
|
180
|
-
}
|
|
181
|
-
}
|
|
182
|
-
.widths {
|
|
183
|
-
.el-input {
|
|
184
|
-
width: 50px !important;
|
|
185
|
-
margin-right: 20px;
|
|
186
|
-
}
|
|
187
|
-
}
|
|
188
|
-
}
|
|
189
|
-
.item-hide {
|
|
190
|
-
background: rgba(218, 218, 218, 0.5);
|
|
191
|
-
}
|
|
192
|
-
.hover {
|
|
193
|
-
background: $hoverBC;
|
|
194
|
-
}
|
|
195
|
-
}
|
|
196
|
-
</style>
|