22

schangxiang@126.com

2025-05-21 05c47e0a832bbd2b8bafb732fc55c1ef8e9b97e0

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
129
130
131
132
133
import Dialog from '@/components/BaseDialog/index.vue'
const BaseDialog: any = Dialog
import { defineComponent, SetupContext } from 'vue'
import styles from './RelationFlowDialog.module.scss'
import { useRelationFlow } from '@/hooks//Dialog'
import { _t, LanguageScopeKey } from './app'
import BaseTable from '@/components/Table/Table'
import { relationFlowColumns } from './enum'
import Search from '@/components/Search/Search'
import Tag from '@/components/Tag/Tag'
import Text from '@/components/Text/Text'
 
export default defineComponent({
  name: '关联流程',
  props: {
    modelValue: {
      type: Array,
      default: [],
    },
    visible: {
      type: Boolean,
      default: null,
    },
    title: {
      type: String,
      default: '',
    },
    // 表格数据
    dataSource: {
      type: Array,
      default: () => [],
    },
    // 当前起始坐标
    index: {
      type: Number,
      default: 0,
    },
  },
  emits: ['update:modelValue', 'close', 'confirm'],
  setup(props, ctx: SetupContext) {
    const {
      visible,
      data,
      modelValue,
      search,
      tableRef,
      isDisabled,
      onClose,
      onConfirm,
      onCheck,
      onShowDialog,
    } = useRelationFlow(props, ctx)
    return () => {
      return (
        <div class={styles.relationDialog}>
          <div onClick={onShowDialog} class={styles.flows}>
            {!modelValue.value.length ? (
              <span class={styles.flowTag}>{_t('请选择关联流程')}</span>
            ) : (
              <Tag
                v-model:data={modelValue.value}
                showClose={true}
                className={styles.tagContent}
              />
            )}
          </div>
          <BaseDialog
            width="1160px"
            height="536px"
            v-model={visible.value}
            title={_t('关联流程')}
            append-to-body={true}
            destroy-on-close
            submitDisabled={isDisabled.value}
            onClose={onClose}
            onConfirm={onConfirm}
          >
            <div class={styles.header}>
              <label class={styles.key}>{_t('流程名称')}</label>
              <Search
                v-model={search.value}
                tableRef={tableRef}
                placeholder={_t('请输入')}
              />
            </div>
            <div class={styles.table}>
              <BaseTable
                ref={tableRef}
                url="/api/v1/messuite/query/flowdefinition"
                columns={relationFlowColumns.value}
                size="mini"
                v-model:dataSource={data.value}
                isChecked
                isVScroll
                id="type"
                onCheck={onCheck}
                LanguageScopeKey={LanguageScopeKey}
                v-slots={{
                  abilitys: ({ row }: any) => {
                    const v = row.abilitys
                      ?.map((v: any) => v.description)
                      .join(',')
                    return (
                      <div style="width:200px">
                        {v.length ? (
                          <Text truncated={true} tag="p" tip={v}>
                            {v}
                          </Text>
                        ) : (
                          '-'
                        )}
                      </div>
                    )
                  },
                  type: ({ row }: any) => {
                    return row.businessType?.description || '-'
                  },
                  associationObjects: ({ row }: any) => {
                    return row.associationObjects ? (
                      <Tag data={row.associationObjects} />
                    ) : (
                      '-'
                    )
                  },
                }}
              />
            </div>
          </BaseDialog>
        </div>
      )
    }
  },
})