ci-plus 1.5.0 → 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 +2 -2
- 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/utils/ajaxBox.ts +45 -1
- package/src/utils/cardPrint.ts +2 -2
- package/src/sortableTable/utils/sortableTableColumnCell2.vue +0 -70
- package/src/sortableTable/utils/sortableTableDragItem2.vue +0 -196
package/package.json
CHANGED
|
@@ -1,6 +1,6 @@
|
|
|
1
1
|
{
|
|
2
2
|
"name": "ci-plus",
|
|
3
|
-
"version": "1.5.
|
|
3
|
+
"version": "1.5.2",
|
|
4
4
|
"description": "ci组件库",
|
|
5
5
|
"main": "./index.ts",
|
|
6
6
|
"scripts": {
|
|
@@ -12,7 +12,7 @@
|
|
|
12
12
|
"vue",
|
|
13
13
|
"element-plus",
|
|
14
14
|
"ui组件库二次封装",
|
|
15
|
-
"
|
|
15
|
+
"标识卡模板中将下道工序改为显示名称"
|
|
16
16
|
],
|
|
17
17
|
"type": "module",
|
|
18
18
|
"author": {
|
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'
|
package/src/utils/ajaxBox.ts
CHANGED
|
@@ -59,13 +59,29 @@ const downFileFn = function (blob: Blob | BlobPart, fileName: string) {
|
|
|
59
59
|
|
|
60
60
|
}
|
|
61
61
|
|
|
62
|
+
type Obj = {
|
|
63
|
+
[key: string]: any
|
|
64
|
+
}
|
|
62
65
|
const ajaxBox = {
|
|
63
66
|
downFile: function (blob: Blob | BlobPart, fileName: string) {
|
|
64
67
|
downFileFn(blob, fileName);
|
|
65
68
|
},
|
|
66
69
|
|
|
67
70
|
// 下载文件
|
|
68
|
-
|
|
71
|
+
/**
|
|
72
|
+
* 下载文件函数
|
|
73
|
+
* @param fillAddress string 表示服务端接口url地址
|
|
74
|
+
* @param fileName string 下载后的文件名
|
|
75
|
+
* @param method string 如果不想写get呢,你就写个null,但是你得写进去
|
|
76
|
+
* @param headers Object 请求头
|
|
77
|
+
* @param params Object 请求参数
|
|
78
|
+
* 将给定的blob对象转换为文件,并提供一个下载链接以供用户下载。
|
|
79
|
+
* 如果blob对象是JSON格式,则尝试解析为JavaScript对象,并显示相应的错误消息。
|
|
80
|
+
* 如果解析失败,则直接以原始格式下载blob对象。
|
|
81
|
+
*/
|
|
82
|
+
|
|
83
|
+
|
|
84
|
+
downFileFetch: function (fillAddress: string, fileName: string, method: string, headers: Obj, params: Obj, cbpercentage: Function) {
|
|
69
85
|
let options = {
|
|
70
86
|
method: method || 'GET',
|
|
71
87
|
}
|
|
@@ -138,6 +154,7 @@ const ajaxBox = {
|
|
|
138
154
|
readBlobInChunks()
|
|
139
155
|
})
|
|
140
156
|
}
|
|
157
|
+
|
|
141
158
|
/*
|
|
142
159
|
sendJSONP: function (url, callbackName, callback) {
|
|
143
160
|
const script = document.createElement('script');
|
|
@@ -162,3 +179,30 @@ const ajaxBox = {
|
|
|
162
179
|
|
|
163
180
|
}
|
|
164
181
|
export default ajaxBox;
|
|
182
|
+
|
|
183
|
+
|
|
184
|
+
/**
|
|
185
|
+
* 使用下载示例
|
|
186
|
+
const exportFile = () => {
|
|
187
|
+
let rowData = InventoryTableRef.value!.getSelectionRows()
|
|
188
|
+
|
|
189
|
+
const url = storageModule + 'storage_standing_book_batch_export_get/'
|
|
190
|
+
const headers = {
|
|
191
|
+
'Content-Type': 'application/x-www-form-urlencoded;charset=UTF-8',
|
|
192
|
+
}
|
|
193
|
+
const params = {
|
|
194
|
+
ids: JSON.stringify(rowData.map((v: { id: any }) => v.id)),
|
|
195
|
+
state: 1,
|
|
196
|
+
org_id: UserData.orgId,
|
|
197
|
+
storage_type: 'CAILIAO',
|
|
198
|
+
}
|
|
199
|
+
|
|
200
|
+
CiPlus.Fn.ajaxBox.downFileFetch(
|
|
201
|
+
url,
|
|
202
|
+
'材料库_库存台账数据.xlsx',
|
|
203
|
+
'GET',
|
|
204
|
+
headers,
|
|
205
|
+
params,
|
|
206
|
+
)
|
|
207
|
+
}
|
|
208
|
+
*/
|
package/src/utils/cardPrint.ts
CHANGED
|
@@ -171,7 +171,7 @@ export const cardPrint = (
|
|
|
171
171
|
r5c4: item.card_code, // 标识卡号
|
|
172
172
|
r6c2: item.center_data[0]?.tail_reason, // 尾料原因
|
|
173
173
|
r7c2: item.process_name, // 本工序
|
|
174
|
-
r7c4: item.
|
|
174
|
+
r7c4: item.next_process_name, // 下工序
|
|
175
175
|
r8c2: item.current_inventory, // 本箱数量
|
|
176
176
|
r8c4: item.opt_user_name, // 操作工/自检员
|
|
177
177
|
r9c2: item.center_data[0]?.inspector, // 检验员
|
|
@@ -632,7 +632,7 @@ export const cardPrint = (
|
|
|
632
632
|
r50c3: '本工序',
|
|
633
633
|
r50c4: item.process_name,
|
|
634
634
|
r51c1: '下工序',
|
|
635
|
-
r51c2: item.
|
|
635
|
+
r51c2: item.next_process_name,
|
|
636
636
|
r51c3: '本箱数量',
|
|
637
637
|
r51c4: item.current_inventory,
|
|
638
638
|
r52c1: '操作员',
|
|
@@ -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>
|