@tongfun/tf-widget 0.1.28 → 0.1.31

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.
Files changed (81) hide show
  1. package/README.md +282 -2
  2. package/lib/tf-widget.common.js +89118 -19254
  3. package/lib/tf-widget.css +1 -1
  4. package/lib/tf-widget.umd.js +89118 -19254
  5. package/lib/tf-widget.umd.min.js +17 -4
  6. package/package.json +2 -1
  7. package/package/svg-icon/index.js +0 -8
  8. package/package/svg-icon/src/SvgIcon.vue +0 -59
  9. package/package/t-data-list/index.js +0 -6
  10. package/package/t-data-list/main.vue +0 -193
  11. package/package/t-data-list/src/condition-input/basic.vue +0 -31
  12. package/package/t-data-list/src/condition-input/date.vue +0 -106
  13. package/package/t-data-list/src/condition-input/index.vue +0 -100
  14. package/package/t-data-list/src/condition-input/input.vue +0 -31
  15. package/package/t-data-list/src/condition-input/number.vue +0 -115
  16. package/package/t-data-list/src/condition-input/select.vue +0 -86
  17. package/package/t-data-list/src/js/fieldTypeEnum.js +0 -10
  18. package/package/t-data-list/src/js/operatorEnum.js +0 -108
  19. package/package/t-data-list/src/js/qureyParamsEnum.js +0 -4
  20. package/package/t-data-list/src/js/util.js +0 -34
  21. package/package/t-data-list/src/mixins/button-controll-mixin.js +0 -93
  22. package/package/t-data-list/src/pushdown/push-down.vue +0 -158
  23. package/package/t-data-list/src/t-list-search.vue +0 -36
  24. package/package/t-data-list/src/t-plan/condition-always-item.vue +0 -143
  25. package/package/t-data-list/src/t-plan/condition-mult-item.vue +0 -222
  26. package/package/t-data-list/src/t-plan/index.vue +0 -195
  27. package/package/t-data-list/src/t-plan/plan-content.vue +0 -389
  28. package/package/t-data-list/src/t-table/index.vue +0 -129
  29. package/package/t-data-list/src/t-table/table-group-item-edit.vue +0 -238
  30. package/package/t-data-list/src/t-table/table-group-item.vue +0 -87
  31. package/package/t-data-list/src/t-table/table-group.vue +0 -180
  32. package/package/t-data-list/src/t-table/table-records-header-popover.vue +0 -246
  33. package/package/t-data-list/src/t-table/table-records-selected.vue +0 -159
  34. package/package/t-data-list/src/t-table/table-records.vue +0 -336
  35. package/package/t-input/children/address.vue +0 -101
  36. package/package/t-input/children/basic-display.vue +0 -41
  37. package/package/t-input/children/basic.vue +0 -261
  38. package/package/t-input/children/date.vue +0 -84
  39. package/package/t-input/children/group-components/group-dialog.vue +0 -344
  40. package/package/t-input/children/group.vue +0 -126
  41. package/package/t-input/children/input.vue +0 -67
  42. package/package/t-input/children/number.vue +0 -71
  43. package/package/t-input/children/select.vue +0 -86
  44. package/package/t-input/children/tfile/fiile-enclosure.vue +0 -233
  45. package/package/t-input/children/tfile/file-img/comp.png +0 -0
  46. package/package/t-input/children/tfile/file-img/excel.png +0 -0
  47. package/package/t-input/children/tfile/file-img/img.png +0 -0
  48. package/package/t-input/children/tfile/file-img/pdf.png +0 -0
  49. package/package/t-input/children/tfile/file-img/word.png +0 -0
  50. package/package/t-input/index.js +0 -7
  51. package/package/t-input/index.vue +0 -337
  52. package/package/t-input/tInputCache.js +0 -24
  53. package/package/tf-icon-picker/README.md +0 -8
  54. package/package/tf-icon-picker/index.js +0 -8
  55. package/package/tf-icon-picker/src/tf-icon-picker.vue +0 -266
  56. package/package/tf-layout/README.md +0 -115
  57. package/package/tf-layout/index.js +0 -8
  58. package/package/tf-layout/src/components/tf-labelbar.vue +0 -394
  59. package/package/tf-layout/src/components/tf-menu.vue +0 -180
  60. package/package/tf-layout/src/components/tf-right-menu.vue +0 -89
  61. package/package/tf-layout/src/components/tf-rotate-box.vue +0 -50
  62. package/package/tf-layout/src/tf-layout.vue +0 -140
  63. package/package/tf-widget/index.js +0 -8
  64. package/package/tf-widget/src/assets/common-input.less +0 -11
  65. package/package/tf-widget/src/children/basic-data/basic-data.vue +0 -361
  66. package/package/tf-widget/src/children/basic-data/dependcy/basic-data-selector.vue +0 -1087
  67. package/package/tf-widget/src/children/basic-data/dependcy/common-table.vue +0 -750
  68. package/package/tf-widget/src/children/basic-data/dependcy/condition-filter.vue +0 -519
  69. package/package/tf-widget/src/children/basic-data/dependcy/pagination.vue +0 -93
  70. package/package/tf-widget/src/children/basic-data/dependcy/table-control.vue +0 -240
  71. package/package/tf-widget/src/children/basic-data/dependcy/view-picture.vue +0 -108
  72. package/package/tf-widget/src/children/date-time.vue +0 -103
  73. package/package/tf-widget/src/children/date.vue +0 -103
  74. package/package/tf-widget/src/children/decimal.vue +0 -115
  75. package/package/tf-widget/src/children/integer.vue +0 -104
  76. package/package/tf-widget/src/children/property.vue +0 -59
  77. package/package/tf-widget/src/children/single-line-text.vue +0 -82
  78. package/package/tf-widget/src/children/small-pictures.vue +0 -223
  79. package/package/tf-widget/src/children/text-area.vue +0 -74
  80. package/package/tf-widget/src/children/tf-select.vue +0 -113
  81. package/package/tf-widget/src/tf-widget.vue +0 -175
@@ -1,86 +0,0 @@
1
- <template>
2
- <el-select
3
- :value="selectValue"
4
- :popper-append-to-body="false"
5
- size="mini"
6
- filterable
7
- clearable
8
- placeholder=""
9
- :multiple="multi"
10
- collapse-tags
11
- :disabled="disabled"
12
- style="display:block"
13
- @input="selectValue = $event"
14
- >
15
- <el-option v-for="item in options" :key="item.id" :label="item.name" :value="item.enumId" />
16
- </el-select>
17
- </template>
18
- <script>
19
- import { getEnumOptions } from '@/api/tableV3.js'
20
- export default {
21
- props: {
22
- value: {
23
- type: String,
24
- default: ''
25
- },
26
- disabled: {
27
- type: Boolean,
28
- default: false
29
- },
30
- multi: {
31
- type: Boolean,
32
- default: false
33
- },
34
- field: {
35
- type: String,
36
- default: '2'
37
- }
38
- },
39
- inject: ['target', 'enumOptionCache'],
40
- data () {
41
- return {
42
- options: []
43
- }
44
- },
45
- computed: {
46
- selectValue: {
47
- set (value) {
48
- if (this.multi) {
49
- return this.$emit('input', value.join())
50
- }
51
- this.$emit('input', value)
52
- },
53
- get () {
54
- if (this.multi) {
55
- if (this.value === '') {
56
- return []
57
- }
58
- return this.value.split(',')
59
- }
60
- return this.value
61
- }
62
- }
63
-
64
- },
65
- created () {
66
- this.getOptions()
67
- },
68
- methods: {
69
- async getOptions () {
70
- if (this.enumOptionCache[this.field]) {
71
- this.options = this.enumOptionCache[this.field]
72
- return
73
- }
74
- const res = await getEnumOptions(this.target, this.field)
75
- if (res.code !== 0) {
76
- return this.$message.error(res.msg)
77
- }
78
- this.options = res.data
79
- this.enumOptionCache[this.field] = res.data
80
- }
81
- }
82
- }
83
- </script>
84
-
85
- <style lang="less" scoped>
86
- </style>
@@ -1,10 +0,0 @@
1
- const fieldType = {
2
- PARAM_TEXT: 'input',
3
- PARAM_TIME_LONG: 'datetime',
4
- PARAM_TIME_SHORT: 'date',
5
- PARAM_ENUM: 'enum',
6
- PARAM_BASIC: 'basic',
7
- PARAM_NUMBER: 'number'
8
- }
9
-
10
- export default fieldType
@@ -1,108 +0,0 @@
1
- const typeEnum = {
2
- /**
3
- * 文本类型
4
- */
5
- input: [
6
- { label: '等于', value: 'TEXT_EQUAL', strict: true },
7
- { label: '包含', value: 'TEXT_LIKE', isFrezz: true },
8
- { label: '不等于', value: 'TEXT_UNEQUAL' },
9
- { label: '不包含', value: 'TEXT_NOT_LIKE' }
10
- ],
11
-
12
- // 基础资料类型
13
- basic: [
14
- { label: '等于', value: 'BASIC_EQUAL', strict: true },
15
- { label: '包含', value: 'BASIC_LIKE', isFrezz: true },
16
- { label: '不等于', value: 'BASIC_UNEQUAL' },
17
- { label: '不包含', value: 'BASIC_NOT_LIKE' }
18
- ],
19
-
20
- /**
21
- * 时间类型
22
- */
23
- // 短时间
24
- date: [
25
- { label: '大于', value: 'TIME_MORE_SHORT' },
26
- { label: '小于', value: 'TIME_LESS_SHORT' },
27
- { label: '大于等于', value: 'TIME_MORE_EQ_SHORT' },
28
- { label: '小于等于', value: 'TIME_LESS_EQ_SHORT' },
29
- { label: '等于', value: 'TIME_EQUAL_SHORT' },
30
- // { label: '在...中', value: 'TIME_EQUAL_SHORT_BETWEEN', range: true },
31
- // 时间通用
32
- { label: '前天', value: 'TIME_BEFORE_YESTERDAY', over: true },
33
- { label: '昨天', value: 'TIME_YESTERDAY', over: true },
34
- { label: '今天', value: 'TIME_TODAY', over: true },
35
- { label: '明天', value: 'TIME_TOMORROW', over: true },
36
- { label: '后天', value: 'TIME_AFTER_TOMORROW', over: true },
37
- { label: '上周', value: 'TIME_LAST_WEEK', over: true },
38
- { label: '本周', value: 'TIME_WEEK', over: true },
39
- { label: '下周', value: 'TIME_NEXT_WEEK', over: true },
40
- { label: '本月', value: 'TIME_MONTH', over: true },
41
- { label: '上月', value: 'TIME_LAST_MONTH', over: true }
42
- ],
43
- // 长时间
44
- datetime: [
45
- { label: '大于', value: 'TIME_MORE_LONG' },
46
- { label: '大于等于', value: 'TIME_MORE_EQ_LONG' },
47
- { label: '等于', value: 'TIME_EQUAL_LONG' },
48
- { label: '小于等于', value: 'TIME_LESS_EQ_LONG' },
49
- { label: '小于', value: 'TIME_LESS' },
50
- // { label: '在...中', value: 'TIME_EQUAL_BETWEEN', range: true },
51
- // 时间通用
52
- { label: '前天', value: 'TIME_BEFORE_YESTERDAY', over: true },
53
- { label: '昨天', value: 'TIME_YESTERDAY', over: true },
54
- { label: '今天', value: 'TIME_TODAY', over: true },
55
- { label: '明天', value: 'TIME_TOMORROW', over: true },
56
- { label: '后天', value: 'TIME_AFTER_TOMORROW', over: true },
57
- { label: '上周', value: 'TIME_LAST_WEEK', over: true },
58
- { label: '本周', value: 'TIME_WEEK', over: true },
59
- { label: '下周', value: 'TIME_NEXT_WEEK', over: true },
60
- { label: '本月', value: 'TIME_MONTH', over: true },
61
- { label: '上月', value: 'TIME_LAST_MONTH', over: true }
62
- ],
63
-
64
- /**
65
- * 枚举类型
66
- */
67
- enum: [
68
- { label: '等于', value: 'ENUM_EQUAL', strict: true },
69
- { label: '不等于', value: 'ENUM_UNEQUAL', isFrezz: true },
70
- { label: '在...中', value: 'ENUM_IN', multi: true },
71
- { label: '不在...中', value: 'ENUM_NOT_IN', multi: true }
72
- ],
73
-
74
- /**
75
- * 数字类型
76
- */
77
- number: [
78
- { label: '大于', value: 'NUMBER_MORE' },
79
- { label: '大于等于', value: 'NUMBER_MORE_EQUAL' },
80
- { label: '等于', value: 'NUMBER_EQUAL', strict: true },
81
- { label: '不等于', value: 'NUMBER_NOT_EQUAL' },
82
- { label: '小于', value: 'NUMBER_LESS' },
83
- { label: '小于等于', value: 'NUMBER_LESS_EQUAL' },
84
- { label: '在...中', value: 'NUMBER_BETWEEN', range: true }
85
- ]
86
- }
87
-
88
- /**
89
- * 所有的不需要输入值的选项的操作符
90
- * @returns string[]
91
- */
92
- export function getAllOverOperatorList () {
93
- const overOptions = []
94
- for (const key in typeEnum) {
95
- for (const option of typeEnum[key]) {
96
- option.over && !overOptions.find(item => item === option.value) && overOptions.push(option.value)
97
- }
98
- }
99
- return overOptions
100
- }
101
-
102
- export default function getOperatorOption (type) {
103
- // todo: 优化一下判断次数???
104
- if (type === 'decimal' || type === 'integer') {
105
- type = 'number'
106
- }
107
- return typeEnum[type]
108
- }
@@ -1,4 +0,0 @@
1
- export const paramsEnum = {
2
- LIST: 'LIST',
3
- SELECTOR: 'SELECTOR'
4
- }
@@ -1,34 +0,0 @@
1
- import fieldType from './fieldTypeEnum'
2
- import getOperatorOption from './operatorEnum'
3
- /**
4
- * 根据id找到该节点的父节点
5
- */
6
- export function getParentId (tree, id) {
7
- let resId = null
8
- for (const child of tree.children) {
9
- if (child.id === id) {
10
- resId = tree.id
11
- return resId
12
- }
13
- if (child.children) {
14
- resId = getParentId(child, id)
15
- if (resId) {
16
- return resId
17
- }
18
- }
19
- }
20
- return resId
21
- }
22
-
23
- /**
24
- * 参数名称是根据后端的表头中的一个字段来确定
25
- * 此函数,根据componentType找到前端自定义的枚举类型
26
- * 然后根据类型找到其模糊搜索的操作类型
27
- * 用于通用列表混入对象中的,搜索建议拼接高级条件,搜索范围条件限定拼接高级条件
28
- */
29
- export function getOperator (componentValueType, isStrict) {
30
- const type = fieldType[componentValueType]
31
- const operatorList = getOperatorOption(type)
32
- const operator = operatorList.find(item => item[isStrict ? 'strict' : 'isFrezz'])
33
- return operator
34
- }
@@ -1,93 +0,0 @@
1
- /**
2
- * 按钮处理函数混入对象
3
- * 为了避免将来按钮逐渐增多,导致查询页面代码庞大
4
- * 顶部的所有按钮的处理函数都放入当前混入对象中
5
- */
6
- import { del } from '@/api/tableV3.js'
7
-
8
- export default {
9
- methods: {
10
- // 跳转到新增页面
11
- insert () {
12
- if (this.$listeners.insert) {
13
- return this.$emit('insert')
14
- }
15
- const randomStr = Math.random().toString(36).slice(8)
16
- this.$router.replace(`${this.$route.path}/insert/${randomStr}`)
17
- },
18
- // 跳转到修改页面
19
- update () {
20
- if (this.selectedRows.length === 0) {
21
- return this.$message.warning('请选择一条数据')
22
- }
23
- if (this.selectedRows.length > 1) {
24
- return this.$message.warning('只允许选择一条数据')
25
- }
26
- if (this.$listeners.update) {
27
- return this.$emit('update', this.selectedRows[0])
28
- }
29
- const randomStr = Math.random().toString(36).slice(8)
30
- this.$router.replace(`${this.$route.path}/update/${randomStr}/${this.ids[0]}`)
31
- },
32
- // 删除列表数据
33
- del () {
34
- if (this.ids.length === 0) {
35
- this.$message.info('您还未选择数据')
36
- return
37
- }
38
- this.$confirm('是否确定删除?', '提示', {
39
- confirmButtonText: '确定',
40
- cancelButtonText: '取消',
41
- type: 'warning'
42
- }).then(async () => {
43
- const { code, msg } = await del({
44
- target: this.target,
45
- ids: this.ids
46
- })
47
- if (code !== 0) {
48
- return this.$message.error(msg)
49
- }
50
- this.$message.success('删除成功')
51
- this.refresh()
52
- })
53
- },
54
- // 打开下推的弹窗口
55
- showPushDown () {
56
- if (!this.ids.length) {
57
- return this.$message.error('请先选择数据')
58
- }
59
- this.pushdownVisible = true
60
- },
61
- /**
62
- *
63
- * @param {*} clearTableSelect 刷新完毕后是否清空已选 默认不清空
64
- * @param {*} clearCondition 是否清空所有条件进行刷新,默认保留当前条件(目前只有刷新按钮不保留条件)
65
- */
66
- refresh (clearTableSelect = false, clearCondition = false) {
67
- if (!clearTableSelect) {
68
- this.syncData.tableSelectionClear = false
69
- }
70
- if (clearCondition) {
71
- // 清空右上角搜索框的条件
72
- this.$refs.tListSearchRef.reset()
73
- this.searchSuggestCondition = []
74
-
75
- // 清空分组条件
76
- this.query.conditionGroup = null
77
-
78
- // 清空表头条件
79
- // 清空过滤器显示状态,和快捷过滤条件缓存,通过事件方式将操作改为异步提升速度(好像也没有提升多少)
80
- this.query.conditionQuickList = []
81
- this.$refs.TtableRef.$emit('headConditionClear')
82
-
83
- this.query.pageNum = 1
84
- this.query.pageSize = 200
85
-
86
- // 通知方案切换到默认方案 ,然后触发查询
87
- this.$refs.TplanRef.resetToDefaultPlan()
88
- return
89
- }
90
- this.getTableData(false, true)
91
- }
92
- }
93
- }
@@ -1,158 +0,0 @@
1
- <template>
2
- <el-dialog
3
- title="下推"
4
- :visible="visible"
5
- width="35%"
6
- @update:visible="$emit('update:visible',$event)"
7
- @open="handleOpen"
8
- >
9
- <div class="header">
10
- <i class="el-icon-refresh" @click="refreshMethod" />
11
- </div>
12
- <div class="table-info">
13
- <ux-grid
14
- ref="pushDownTable"
15
- v-loading="tableLoading"
16
- column-key
17
- :data="tableData"
18
- beautify-table
19
- border
20
- highlight-current-row
21
- show-header-overflow
22
- show-overflow="tooltip"
23
- class="common-table"
24
- :width-resize="true"
25
- :checkbox-config="{highlight: true ,trigger: 'row'}"
26
- @current-change="currentChange"
27
- @selection-change="selectionChange"
28
- >
29
- <ux-table-column type="checkbox" fixed="left" align="center" width="60" />
30
- <ux-table-column field="value" title="单据名称" align="center" resizable width="" />
31
- <template slot="empty">
32
- <SvgIcon icon-class="table-empty" style="width: 6vw;height: 6vh;margin-top: 3vh" />
33
- <div style="font-size: 1.4vh;margin-bottom: 10.5vh">
34
- 暂无数据
35
- </div>
36
- </template>
37
- </ux-grid>
38
- </div>
39
- <span slot="footer" class="dialog-footer">
40
- <el-button class="common-header-button close" @click="$emit('update:visible',false)">取 消</el-button>
41
- <el-button class="common-header-button" @click="dialogConfirm">确 定</el-button>
42
- </span>
43
- </el-dialog>
44
- </template>
45
- <script>
46
- import { findBillExchangeRouterVO } from '@/api/push-down'
47
- import { pushDownValid } from '@/api/tableV3'
48
- export default {
49
- components: {
50
-
51
- },
52
- props: {
53
- visible: {
54
- type: Boolean,
55
- default: false
56
- },
57
- pushDownTableName: {
58
- type: String,
59
- default: null
60
- },
61
- parentSelectionData: {
62
- type: Array,
63
- default: () => []
64
- },
65
- needAuditFlag: {
66
- type: Boolean,
67
- default: false
68
- }
69
- },
70
- data () {
71
- return {
72
- selectionData: [],
73
- tableData: [],
74
- tableLoading: false,
75
- refreshMethod: null
76
- }
77
- },
78
- created () {
79
- this.refreshMethod = this.utils.debounce(this.getTableData)
80
- },
81
- methods: {
82
- handleOpen () {
83
- this.getTableData()
84
- },
85
- /**
86
- * 获取下推单据列表
87
- */
88
- getTableData () {
89
- if (this.pushDownTableName) {
90
- this.tableData = []
91
- this.tableLoading = true
92
- this.selectionData = []
93
- const data = {
94
- originTableName: this.pushDownTableName
95
- }
96
- findBillExchangeRouterVO(data).then(res => {
97
- if (res.code === 0) {
98
- this.tableData = res.data.filter(item => {
99
- return item.value && item.routerName
100
- })
101
- } else {
102
- this.$message.warning('获取数据失败,请稍后重试!')
103
- }
104
- this.tableLoading = false
105
- }).catch(() => {
106
- this.tableLoading = false
107
- })
108
- }
109
- },
110
- /**
111
- * 表格当前行change事件
112
- * @param row
113
- */
114
- currentChange (row) {
115
- this.$refs.pushDownTable.clearSelection()
116
- this.$refs.pushDownTable.setCurrentRow(row)
117
- },
118
-
119
- /**
120
- * 表格选择项change事件
121
- */
122
- selectionChange (value) {
123
- this.selectionData = value
124
- },
125
-
126
- /**
127
- * 弹框确认事件
128
- */
129
- async dialogConfirm () {
130
- if (!this.selectionData.length) {
131
- return this.$message.error('请选择目标单')
132
- }
133
-
134
- // 校验是否满足下推条件
135
- const name = this.selectionData[0].value
136
- const ids = Array.from(new Set(this.parentSelectionData))
137
- const res = await pushDownValid(name, ids)
138
- if (res.code !== 0) {
139
- return this.$message.error(res.msg)
140
- }
141
-
142
- this.$emit('update:visible', false)
143
- const list = [...new Set(this.parentSelectionData)]
144
- const data = {
145
- pid: list.join(','),
146
- pushDownName: this.selectionData[0].value
147
- }
148
- const randomNum = Math.floor(Math.random() * 1000000)
149
- const routerName = this.selectionData[0].routerName
150
- window.history.pushState({ ...data }, '', routerName + '/' + randomNum)
151
- }
152
- }
153
- }
154
- </script>
155
-
156
- <style scoped>
157
-
158
- </style>
@@ -1,36 +0,0 @@
1
- <template>
2
- <div class="t-list-search-wrapper">
3
- <el-input
4
- v-model="value"
5
- prefix-icon="el-icon-search"
6
- @keydown.enter.native="$emit('search',value)"
7
- />
8
- </div>
9
- </template>
10
- <script>
11
- export default {
12
- data () {
13
- return {
14
- value: ''
15
- }
16
- },
17
- methods: {
18
- reset () {
19
- this.value = ''
20
- }
21
- }
22
-
23
- }
24
- </script>
25
-
26
- <style lang="less" scoped>
27
- .t-list-search-wrapper{
28
- width:200px;
29
- margin-right:12px;
30
- ::v-deep .el-input__inner {
31
- border:none ;
32
- border-radius: 0;
33
- border-bottom: 1px solid #a7a1a1;
34
- }
35
- }
36
- </style>
@@ -1,143 +0,0 @@
1
- <template>
2
- <div class="condition-always-item">
3
- <div class="title">
4
- <span>{{ data.title }}:</span>
5
- </div>
6
-
7
- <div class="values">
8
- <div
9
- v-for="item in conditonOptions"
10
- :key="item.enumId"
11
- :class="['value-item',isActive(item.enumId)? 'active':'']"
12
- @click="handleClick(item)"
13
- >
14
- {{ item.name }}
15
- </div>
16
- </div>
17
-
18
- <div class="swich-button">
19
- <template v-if="singleSelect">
20
- <el-button size="mini" type="primary" @click="switchToMulti">多选</el-button>
21
- </template>
22
- <template v-else>
23
- <el-button size="mini" type="primary" @click="multiSelected">确定</el-button>
24
- <el-button size="mini" type="danger" @click="switchToSingle">取消</el-button>
25
- </template>
26
- </div>
27
- </div>
28
- </template>
29
-
30
- <script>
31
- export default {
32
- props: {
33
- data: {
34
- type: Object,
35
- default: null
36
- },
37
- value: {
38
- type: Array,
39
- default: null
40
- }
41
- },
42
- data () {
43
- return {
44
- multiSelectedCache: [],
45
- singleSelect: true
46
- }
47
- },
48
- computed: {
49
- isActive () {
50
- return function (value) {
51
- if (this.singleSelect) {
52
- return this.value.includes(value)
53
- }
54
- return this.multiSelectedCache.includes(value)
55
- }
56
- },
57
- conditonOptions () {
58
- if (this.singleSelect) {
59
- return this.data.options
60
- }
61
- return this.data.options.filter(option => option.enumId !== '-1')
62
- }
63
- },
64
- methods: {
65
- handleClick (item) {
66
- // 单选模式下
67
- if (this.singleSelect) {
68
- this.selected = [item.enumId]
69
- return this.$emit('input', [item.enumId])
70
- }
71
-
72
- // 多选模式下
73
- if (this.multiSelectedCache.includes(item.enumId)) {
74
- return this.multiSelectedCache.splice(this.multiSelectedCache.indexOf(item.enumId), 1)
75
- }
76
- this.multiSelectedCache.push(item.enumId)
77
- },
78
- // 切换到多选状态
79
- switchToMulti () {
80
- this.singleSelect = false
81
- this.multiSelectedCache = []
82
- this.multiSelectedCache.push(...this.value)
83
- },
84
- // 切换到单选状态
85
- switchToSingle () {
86
- this.singleSelect = true
87
- this.multiSelectedCache = []
88
- },
89
- multiSelected () {
90
- const index = this.multiSelectedCache.indexOf('-1')
91
- index !== -1 && this.multiSelectedCache.splice(index, 1)
92
- this.$emit('input', this.multiSelectedCache)
93
- this.singleSelect = true
94
- }
95
- }
96
-
97
- }
98
- </script>
99
-
100
- <style scoped lang='less'>
101
- // 整体
102
- .condition-always-item {
103
- display:flex;
104
- justify-content: space-between;
105
- border-top:1px solid #dddfe6;
106
- padding-top:5px;
107
- // align-items:center;
108
-
109
- .title {
110
- margin-top:5px;
111
- }
112
-
113
- // 可选值wrapper
114
- .values {
115
- flex:1;
116
- display:flex;
117
- flex-wrap: wrap;
118
-
119
- //可选值 item
120
- .value-item {
121
- cursor: pointer;
122
- user-select: none;
123
- border:1px #d5d5d9 solid;
124
- color:#9999a1;
125
- border-radius:3px;
126
- padding:5px;
127
- margin-left:10px;
128
- margin-bottom:5px;
129
- }
130
- .active {
131
- color:#075699;
132
- border:1px solid #075699;
133
- }
134
- }
135
-
136
- .swich-button {
137
- .el-button {
138
- background-color: #075699;
139
- border:none;
140
- }
141
- }
142
- }
143
- </style>