1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
18
19
20
21
22
23
24
25
26
27
28
29
30
31
32
33
34
35
36
37
38
39
40
41
42
43
44
45
46
47
48
49
50
51
52
53
54
55
56
57
58
59
60
61
62
63
64
65
66
67
68
69
70
71
72
73
74
75
76
77
78
79
80
81
82
83
84
85
86
87
88
89
90
91
92
93
94
95
96
97
98
99
100
101
102
103
104
105
106
107
108
109
110
111
112
113
114
115
116
117
118
119
120
121
122
123
124
125
126
127
128
| import { computed, defineComponent, ref, onMounted, watch } from 'vue'
| import BaseDialog from '@/components/BaseDialog/index.vue'
| import styles from './segment.module.scss'
| import { getSegments } from '../../api/process'
| import DyForm from '@/components/DyForm/DyForm'
| import { _t } from '@/libs/Language/Language'
|
| interface SegmentType {
| segmentId: string
| segmentName: string
| }
| export default defineComponent({
| name: 'OrderManagementDialogSegment',
| props: {
| modelValue: {
| type: Boolean,
| default: false,
| },
| id: {
| type: String,
| default: '',
| },
| },
| emits: ['update:modelValue', 'confirm'],
| setup(props, { emit }) {
| const visible = computed({
| get() {
| return props.modelValue
| },
| set(value) {
| emit('update:modelValue', value)
| },
| })
| const formRef = ref<any>(null)
| const formData = ref<any>({
| segment: [],
| })
| const segmentList = ref<any[]>([])
| const formItemProps = computed(() => [
| {
| prop: 'segment',
| el: 'select',
| options: segmentList,
| label: _t('产线段'),
| width: '350px',
| collapseTags: true,
| multiple: true,
| collapseTagsTooltip: true,
| maxCollapseTags: 5,
| clearable: true,
| noDataText: _t('该工单没有可使用的产线段'),
| rules: [
| {
| required: true,
| message: _t('请选择产线段'),
| trigger: 'change',
| type: 'array',
| },
| ],
| },
| ])
| const init = async () => {
| const res = await getSegments(props.id)
| segmentList.value = res.map((item: SegmentType) => ({
| value: item.segmentId,
| name: item.segmentName,
| }))
| formData.value = {
| segment: res.map((item: SegmentType) => item.segmentId),
| }
| }
|
| const onClose = () => {
| visible.value = false
| }
|
| const onConfirm = async () => {
| try {
| await formRef.value?.validate()
| visible.value = false
| const segment = formData.value?.segment || []
| const data = segmentList.value
| .map((item: any) => {
| if (segment.includes(item.value)) {
| return {
| segmentId: item.value,
| segmentName: item.name,
| }
| }
| return null
| })
| .filter((v) => v)
|
| emit('confirm', {
| segments: data,
| })
| } catch (error) {
| console.error(error)
| }
| }
|
| watch(
| () => props.modelValue,
| (value) => {
| if (value) {
| init()
| }
| }
| )
|
| return () => (
| <BaseDialog
| v-model={visible.value}
| title={_t('产线段配置')}
| onClose={onClose}
| onConfirm={onConfirm}
| >
| <div class={styles.segmentDialog}>
| <DyForm
| ref={formRef}
| v-model:formData={formData.value}
| formItemProps={formItemProps.value}
| ></DyForm>
| </div>
| </BaseDialog>
| )
| },
| })
|
|
