<script lang="ts" setup>
|
import type { BasicColumn } from '@jnpf/ui/vxeTable';
|
|
import { computed, nextTick, reactive, ref, unref, watch } from 'vue';
|
|
import { ModalClose } from '@jnpf/ui/modal';
|
import { BasicVxeTable, useVxeTable } from '@jnpf/ui/vxeTable';
|
|
import { useUserStore } from '@vben/stores';
|
|
import { Modal as AModal, Form } from 'ant-design-vue';
|
import { pick } from 'lodash-es';
|
|
import { getFlowTaskInfo } from '#/api/workFlow/task';
|
import { getFlowSelector } from '#/api/workFlow/template';
|
import FlowProcessMain from '#/components/FlowProcess/src/Main.vue';
|
import { $t } from '#/locales';
|
|
interface State {
|
flowInfo: any;
|
nodeList: any[];
|
opType: string;
|
taskId: string;
|
key: number;
|
isRevokeTask: boolean;
|
}
|
|
defineOptions({ inheritAttrs: false });
|
const props = defineProps({
|
value: { default: '' },
|
title: { type: String, default: '' },
|
placeholder: { type: String, default: '请选择' },
|
disabled: { type: Boolean, default: false },
|
allowClear: { type: Boolean, default: true },
|
size: { type: String, default: 'default' },
|
isCheckSubFlow: { type: Number, default: 0 },
|
isSystemFrom: { type: Number, default: 0 }, // 任务流程 获取数据使用
|
});
|
const emit = defineEmits(['update:value', 'change']);
|
const userStore = useUserStore();
|
const getUserInfo: any = computed(() => userStore.getUserInfo || {});
|
const state = reactive<State>({
|
flowInfo: {},
|
nodeList: [],
|
opType: '-1',
|
taskId: '',
|
key: Date.now(),
|
isRevokeTask: false,
|
});
|
|
const formItemContext = Form.useInjectFormItemContext();
|
const innerValue = ref(undefined);
|
const visible = ref(false);
|
const flowVisible = ref(false);
|
const loading = ref(false);
|
const options = ref<any[]>([]);
|
const columns: BasicColumn[] = [
|
{ title: '流程名称', dataIndex: 'fullName' },
|
{ title: '流程编码', dataIndex: 'enCode' },
|
];
|
const [registerTable, { getForm, getSelectRows, setSelectedRowKeys, getSelectRowKeys }] = useVxeTable({
|
api: getFlowSelector,
|
columns,
|
immediate: false,
|
searchInfo: { isAuthority: 0, systemId: unref(getUserInfo)?.systemId, isSystemFrom: props.isSystemFrom },
|
useSearchForm: true,
|
formConfig: {
|
baseColProps: { span: 8 },
|
schemas: [
|
{
|
field: 'keyword',
|
label: $t('common.keyword'),
|
component: 'Input',
|
componentProps: {
|
placeholder: $t('common.enterKeyword'),
|
submitOnPressEnter: true,
|
},
|
},
|
],
|
},
|
tableSetting: { size: false, setting: false },
|
rowSelection: { type: 'radio' },
|
radioConfig: { checkMethod: (record) => !record.row.isQuote },
|
afterFetch: () => {
|
setTimeout(() => {
|
setSelectedRowKeys(innerValue.value ? [innerValue.value] : []);
|
}, 200);
|
},
|
});
|
|
const getSelectBindValue = computed(() => {
|
return {
|
...pick(props, ['disabled', 'size', 'allowClear', 'placeholder']),
|
fieldNames: { label: 'fullName', value: 'id' },
|
open: false,
|
showSearch: false,
|
showArrow: true,
|
};
|
});
|
|
watch(
|
() => props.value,
|
(val) => {
|
setValue(val);
|
},
|
{ immediate: true },
|
);
|
|
function setValue(value) {
|
innerValue.value = value || undefined;
|
options.value = [{ id: innerValue.value, fullName: props.title }];
|
}
|
function onChange() {
|
options.value = [];
|
emit('change', '', {});
|
}
|
async function openSelectModal() {
|
if (props.disabled) return;
|
visible.value = true;
|
nextTick(() => {
|
getForm().resetFields();
|
});
|
}
|
// 打开流程图
|
function handleOpenFlowInfo() {
|
loading.value = true;
|
flowVisible.value = true;
|
const query = {
|
flowId: innerValue.value,
|
};
|
getFlowTaskInfo(0, query)
|
.then((res) => {
|
const data = res.data;
|
loading.value = false;
|
state.flowInfo = data.flowInfo;
|
state.nodeList = data.nodeList;
|
state.opType = '0';
|
state.key = Date.now();
|
})
|
.catch(() => {
|
loading.value = false;
|
});
|
}
|
function handleCancel() {
|
visible.value = false;
|
flowVisible.value = false;
|
}
|
function handleSubmit() {
|
if (!getSelectRowKeys().length && !getSelectRows().length) return;
|
if (!getSelectRows().length) {
|
emit('update:value', innerValue.value);
|
emit('change', innerValue.value, options.value[0]);
|
formItemContext.onFieldChange();
|
handleCancel();
|
return;
|
}
|
const selectRow: any = getSelectRows()[0];
|
options.value = getSelectRows();
|
innerValue.value = selectRow.id;
|
emit('update:value', selectRow.id);
|
emit('change', selectRow.id, selectRow);
|
formItemContext.onFieldChange();
|
handleCancel();
|
}
|
</script>
|
|
<template>
|
<div class="common-container">
|
<a-input-group compact v-if="isCheckSubFlow && innerValue">
|
<a-select
|
style="width: calc(100% - 90px)"
|
v-model:value="innerValue"
|
v-bind="getSelectBindValue"
|
:options="options"
|
@change="onChange"
|
@click="openSelectModal" />
|
<a-button @click="handleOpenFlowInfo">查看流程</a-button>
|
</a-input-group>
|
<a-select v-else v-model:value="innerValue" v-bind="getSelectBindValue" :options="options" @change="onChange" @click="openSelectModal" />
|
<AModal
|
v-model:open="visible"
|
title="选择流程"
|
:width="800"
|
class="common-container-modal"
|
@cancel="handleCancel"
|
@ok="handleSubmit"
|
destroy-on-close
|
:mask-closable="false">
|
<template #closeIcon>
|
<ModalClose :can-fullscreen="false" @cancel="handleCancel" />
|
</template>
|
<div class="jnpf-content-wrapper">
|
<div class="jnpf-content-wrapper-center">
|
<div class="jnpf-content-wrapper-content">
|
<BasicVxeTable @register="registerTable" class="jnpf-sub-table" />
|
</div>
|
</div>
|
</div>
|
</AModal>
|
<AModal v-model:open="flowVisible" title="流程图" width="80%" class="common-container-modal" @cancel="handleCancel" :footer="null" :mask-closable="false">
|
<template #closeIcon>
|
<ModalClose :can-fullscreen="false" @cancel="handleCancel" />
|
</template>
|
<div class="jnpf-content-wrapper" v-loading="loading">
|
<div class="jnpf-content-wrapper-center">
|
<div class="jnpf-content-wrapper-content">
|
<FlowProcessMain
|
class="p-[10px]"
|
:flow-info="state.flowInfo"
|
:node-list="state.nodeList"
|
:is-preview="true"
|
:open-preview="true"
|
handle-open-flow-info
|
:key="state.key" />
|
</div>
|
</div>
|
</div>
|
</AModal>
|
</div>
|
</template>
|
