import Dialog from '@/components/BaseDialog/index.vue'
|
const BaseDialog: any = Dialog
|
import { computed, defineComponent, inject, ref, SetupContext } from 'vue'
|
import styles from './FlowContextDialog.module.scss'
|
import { useRelationMaterial } from '@/hooks//Dialog'
|
import BaseTable from '@/components/Table/Table'
|
import { columns } from './config'
|
import Search from '@/components/Search/Search'
|
import { _t } from '@/libs/Language/Language'
|
import { ElMessage } from 'element-plus'
|
import { get } from 'lodash'
|
|
export default defineComponent({
|
name: '流程上下文',
|
props: {
|
modelValue: {
|
type: String,
|
default: '',
|
},
|
title: {
|
type: String,
|
default: '',
|
},
|
|
readonly: {
|
type: Boolean,
|
default: false,
|
},
|
type: {
|
type: String,
|
default: 'input',
|
},
|
clearable: {
|
type: Boolean,
|
default: false,
|
},
|
flowType: {
|
type: String,
|
},
|
// 用来定义数据结构
|
dyStruct: {
|
type: Boolean,
|
default: false,
|
},
|
radio: {
|
type: Boolean,
|
default: false,
|
},
|
},
|
emits: ['update:modelValue', 'close', 'confirm'],
|
setup(props: any, ctx: SetupContext) {
|
const modelValue = computed({
|
get() {
|
return props.modelValue
|
},
|
set(v) {
|
ctx.emit('update:modelValue', v)
|
},
|
})
|
const flowType = props.flowType || inject('flowType')
|
const data = ref([])
|
const visible = ref(false)
|
const tableRef = ref()
|
const search = ref('')
|
const selected = ref('')
|
const originData = ref([])
|
const current = ref()
|
const dyModel = computed(() => {
|
if (props.dyStruct) {
|
return modelValue.value
|
}
|
return modelValue
|
})
|
const onSelect = () => {
|
visible.value = true
|
}
|
const onClose = () => {
|
visible.value = false
|
}
|
const onConfirm = () => {
|
visible.value = false
|
if (props.dyStruct) {
|
modelValue.value = {
|
name: current.value?.description,
|
value: selected.value,
|
}
|
} else {
|
modelValue.value = selected.value
|
}
|
}
|
const onSearch = (val: string) => {
|
if (val) {
|
data.value = originData.value.filter((item: any) => {
|
return (
|
item.name.includes(val) ||
|
item.value.includes(val) ||
|
item.description.includes(val)
|
)
|
})
|
} else {
|
data.value = originData.value
|
}
|
}
|
const onCheck = (row: any[]) => {
|
if (row.length > 1) {
|
return ElMessage.warning('仅支持对一条数据进行操作!')
|
}
|
if (row[0]) {
|
selected.value = row[0].value
|
current.value = row[0]
|
}
|
}
|
const onOpen = () => {
|
if (dyModel.value) {
|
tableRef.value?.setSelectRow([dyModel.value?.value])
|
}
|
}
|
|
const onLoad = () => {
|
originData.value = data.value
|
}
|
|
const Input = () => {
|
const readonly =
|
typeof props.readonly?.value === 'boolean'
|
? (props.readonly?.value as boolean)
|
: (props.readonly as boolean)
|
return (
|
<el-input
|
v-model={dyModel.value.value}
|
clearable={props.clearable}
|
class={styles.selectVariable}
|
placeholder={_t('请选择')}
|
readonly={readonly}
|
title={props.title}
|
suffix-icon={
|
<el-button
|
link
|
type="primary"
|
size="small"
|
style="margin-right: 10px;"
|
onClick={onSelect}
|
>
|
{_t('选择')}
|
</el-button>
|
}
|
></el-input>
|
)
|
}
|
return () => {
|
return (
|
<div class={styles.relationDialog}>
|
<Input />
|
<BaseDialog
|
width="1200px"
|
height="536px"
|
v-model={visible.value}
|
title={_t('流程上下文')}
|
onClose={onClose}
|
onConfirm={onConfirm}
|
onOpen={onOpen}
|
destroy-on-close
|
append-to-body
|
>
|
<div class={styles.header}>
|
<label class={styles.key}>{_t('关键字')}</label>
|
<Search
|
v-model={search.value}
|
field="filter"
|
onConfirm={onSearch}
|
placeholder={_t('请输入关键字')}
|
/>
|
</div>
|
<div class={styles.table}>
|
<BaseTable
|
url={`/api/v1/flowmanagement/flowdesign/flowitemkey`}
|
ref={tableRef}
|
params={{
|
flowType: flowType,
|
}}
|
columns={columns}
|
size="mini"
|
v-model:dataSource={data.value}
|
isChecked={true}
|
isVScroll
|
onCheck={onCheck}
|
isStop={true}
|
id="value"
|
isHidePagination={true}
|
onLoad={onLoad}
|
radio={props.radio}
|
/>
|
</div>
|
</BaseDialog>
|
</div>
|
)
|
}
|
},
|
})
|
