You can not select more than 25 topics
Topics must start with a letter or number, can include dashes ('-') and can be up to 35 characters long.
954 lines
27 KiB
954 lines
27 KiB
<!-- eslint-disable vue/no-side-effects-in-computed-properties -->
|
|
<!--
|
|
@ 作者: 秦东
|
|
@ 时间: 2026-01-19 13:21:15
|
|
@ 备注: 编辑状态下的添加
|
|
-->
|
|
<script lang='ts' setup>
|
|
import { conditionInfo, nodeFlow } from "@/api/DesignForm/type";
|
|
import { echoTableFormPage,realTimeUpdateFlow } from "@/api/taskapi/management";
|
|
import { judgeSubmitCancel,startRunFlow,gainAppPageInfo,getFieldRecord } from "@/api/DesignForm/requestapi";
|
|
import { string2json, stringToObj } from "@/utils/DesignForm/form";
|
|
import { appPageDataInit } from "@/api/date/type";
|
|
import {
|
|
notAsA_BasisForJudgment,
|
|
asAnApprovalActionControl,
|
|
fixedValueControl,
|
|
timeControl,
|
|
timeEquation,
|
|
submitButton,
|
|
afreshSubmitButton,
|
|
} from "@/utils/workflow/const";
|
|
import { nodelPeoples, nodePoweInfo } from "@/api/taskapi/types";
|
|
import request from "@/utils/request";
|
|
import SvgIcon from "@/components/SvgIcon/index.vue";
|
|
import FlowStep from "@/views/sysworkflow/lowcodepage/pageFlow/flowStep.vue";
|
|
import AiPage from "@/views/sysworkflow/lowcodepage/pageFlow/aiPage.vue";
|
|
import { constAiEffect } from "@/api/DesignForm/utils";
|
|
|
|
const props = defineProps({
|
|
show:{
|
|
type: Boolean,
|
|
default: true,
|
|
},
|
|
versionid: {
|
|
type: String,
|
|
default: "",
|
|
},
|
|
versiontitle: {
|
|
type: String,
|
|
default: "",
|
|
},
|
|
drawerwith: {
|
|
type: Number,
|
|
default: 0,
|
|
},
|
|
pickAppMenu: {
|
|
type: Object,
|
|
default() {
|
|
return {};
|
|
},
|
|
},
|
|
})
|
|
const formType = ref(1)
|
|
const formBodyRef = ref()
|
|
const drawBodyWidth = ref(props.drawerwith)
|
|
const emits = defineEmits(["update:show", "searchquery"]);
|
|
const nodeKey = ref<string>("");
|
|
const currterNodePower = ref<nodePoweInfo[]>([])
|
|
const flowMap = ref<any[]>(); //工作流
|
|
const flowFactor = reactive<conditionInfo[]>([]); //表单组件
|
|
const pageType = ref<number>(1)
|
|
const aiConfigArea =ref(false)
|
|
const formLoading = ref(false); //loading
|
|
const flowLoading = ref(false); //loading
|
|
const drawLoading = ref(false)
|
|
const isFlowTable = ref(false); //判断是不是流程表单
|
|
const openOrClose = computed({
|
|
get: () => {
|
|
drawBodyWidth.value = props.drawerwith;
|
|
return props.show
|
|
},
|
|
set: (val) => {
|
|
emits("update:show", val);
|
|
drawBodyWidth.value = 0;
|
|
},
|
|
});
|
|
const nextStep = ref<number>(0);
|
|
const currentProgress = ref<number>(1);
|
|
const pageBody = ref("")
|
|
const drawTitle = computed(() => props.versiontitle)
|
|
|
|
|
|
|
|
let qrCodeImgInside = "";
|
|
const appInitData = ref<appPageDataInit>();
|
|
const mastesformjson = ref(""); //
|
|
const versionId = ref<string>(""); //表单版本号
|
|
const versionTitle = ref<string>(""); //表单名称
|
|
const changeFlowPick = ref<string[]>([])
|
|
const purviewAry = ref<any[]>([]);
|
|
const qrCodeInsideDialogFlag = ref(false);
|
|
const nodelUserList = reactive<nodelPeoples[]>([]);
|
|
//获取工作流条件
|
|
const gainFlowChart = reactive<nodeFlow>({
|
|
id: "0",
|
|
conditionList: flowFactor,
|
|
nodelPeople: nodelUserList,
|
|
oldFlow: flowMap.value,
|
|
});
|
|
|
|
const state = reactive<any>({
|
|
type: 1, // 1新增；2修改；3查看（表单模式） ；4查看； 5设计
|
|
formData: {
|
|
list: [],
|
|
form: {},
|
|
config: {},
|
|
powerstr: {},
|
|
aiConfig:[]
|
|
},
|
|
dict: {},
|
|
formId: props.versionid,
|
|
id: 0,
|
|
loading: true,
|
|
});
|
|
//app表单
|
|
const stateForm = reactive<any>({
|
|
type: 1, // 1新增；2修改；3查看（表单模式） ；4查看； 5设计
|
|
formData: {
|
|
list: [],
|
|
form: {},
|
|
config: {},
|
|
powerstr: {},
|
|
aiConfig:[]
|
|
},
|
|
dict: {},
|
|
id: 0,
|
|
formId: "1",
|
|
versionId: 0,
|
|
loading: true,
|
|
});
|
|
let gainAppPageInfoPromise: any[] = [];
|
|
let gainAppPageInfoData: any = {};
|
|
let getFieldRecordPromise: any[] = [];
|
|
let objMastesform: any;
|
|
|
|
/**
|
|
@ 作者: 秦东
|
|
@ 时间: 2026-01-19 15:30:44
|
|
@ 功能: 获取表单数据
|
|
*/
|
|
const getTaskFormData = () => {
|
|
drawLoading.value = true
|
|
echoTableFormPage({ id: props.versionid.toString() })
|
|
.then(({ data }) => {
|
|
// console.log("表单数据",data)
|
|
let extraW=0;
|
|
if (data.tableFormPage.flowIsOpen == 1 && data.tableFormPage.flowkeystr != "0") {
|
|
isFlowTable.value = true;
|
|
// drawbox.value = 800 + 350;
|
|
// console.error("存在流程----》",extraW)
|
|
} else {
|
|
isFlowTable.value = false;
|
|
// drawbox.value = 800;
|
|
// console.error("不存在流程----》",extraW)
|
|
}
|
|
|
|
if(isFlowTable.value){
|
|
extraW = 300
|
|
}
|
|
|
|
|
|
|
|
if(data.tableFormPage.powerAry && Array.isArray(data.tableFormPage.powerAry) && data.tableFormPage.powerAry.length > 0){
|
|
currterNodePower.value = data.tableFormPage.powerAry
|
|
}
|
|
changeFlowPick.value = data.channerUpdate
|
|
nodeKey.value = data.flowPage.nodeKey?data.flowPage.nodeKey:"";
|
|
purviewAry.value = data.tableFormPage.powerAry;
|
|
gainFlowChart.id = data.tableFormPage.flowkeystr;
|
|
// console.log("表单数据--->1", data.flowPage.flowList);
|
|
flowMap.value = data.flowPage.flowList;
|
|
state.id = props.versionid;
|
|
state.formData = stringToObj(data.tableFormPage.mastesform);
|
|
state.formData.config.hideField = []; //暂时的修复方法:接口返回的config中没有hideField属性,手动添加
|
|
state.dict = string2json(data.tableFormPage.dict);
|
|
state.formData.powerstr = string2json(data.tableFormPage.powerstr);
|
|
judgeSubmitCancel({ name: data.tableFormPage.mastesformjson }).then(
|
|
(datajud: any) => {
|
|
// console.error("不存在流程--1-datajud-》",datajud)
|
|
if (datajud.code == 0) {
|
|
if (datajud.data.buttonIsTrue == 3 || datajud.data.buttonIsTrue == 4) {
|
|
state.formData.list.push(submitButton);
|
|
}
|
|
}
|
|
}
|
|
);
|
|
// console.log("表单数据--state.formData->1", state.formData);
|
|
// console.error("不存在流程--1--》",state.formData.aiConfig)
|
|
|
|
if(state.formData&&state.formData.aiConfig&&state.formData.aiConfig.length>0){
|
|
aiConfigArea.value=true
|
|
state.formData.aiConfig?.forEach((item: { library: any; title: any; trigger: any; }) => {
|
|
currentAgent.value.push({
|
|
name: "test",
|
|
model: false,
|
|
rowdex:0,
|
|
uuid: item.library,
|
|
fields: item.title,
|
|
trigger: item.trigger,
|
|
params: {},
|
|
subparams:[]
|
|
});
|
|
});
|
|
}
|
|
|
|
|
|
|
|
if(aiConfigArea.value){
|
|
extraW = extraW + 300
|
|
}
|
|
|
|
// console.error("不存在流程--extraW--》",extraW)
|
|
if (aiConfigArea.value && isFlowTable.value){
|
|
pageType.value = 3
|
|
pageBody.value = "treePage"
|
|
drawBodyWidth.value = drawBodyWidth.value + extraW - 100
|
|
}else if ((!aiConfigArea.value && isFlowTable.value) || (aiConfigArea.value && !isFlowTable.value)){
|
|
pageType.value = 2
|
|
pageBody.value = "twoPage"
|
|
drawBodyWidth.value = drawBodyWidth.value + extraW
|
|
}else{
|
|
pageType.value = 1
|
|
pageBody.value = ""
|
|
drawBodyWidth.value = drawBodyWidth.value
|
|
}
|
|
|
|
if (extraW == 0){
|
|
drawBodyWidth.value = 780
|
|
}
|
|
if (extraW == 300 && drawBodyWidth.value > 1100){
|
|
drawBodyWidth.value = 1100
|
|
}
|
|
if(drawBodyWidth.value > 1400){
|
|
drawBodyWidth.value = 1400
|
|
}
|
|
drawLoading.value = false
|
|
|
|
// console.error("2---------------->",formBodyRef.value?.clientWidth)
|
|
})
|
|
.finally(()=>{})
|
|
}
|
|
/**
|
|
@ 作者: 秦东
|
|
@ 时间: 2026-01-19 15:38:53
|
|
@ 功能: 初始化数据
|
|
*/
|
|
const initData = () => {
|
|
state.formData = {
|
|
list: [],
|
|
form: {},
|
|
config: {},
|
|
};
|
|
state.dict = {};
|
|
state.formId = 0;
|
|
state.id = 0;
|
|
state.loading = true;
|
|
let aryLen = flowFactor.length;
|
|
// console.log("改变表单值--flowMap.value--1- >", flowMap.value);
|
|
flowMap.value = [];
|
|
// console.log("改变表单值--flowMap.value--->", flowMap.value);
|
|
if (aryLen > 0) flowFactor.splice(0, aryLen);
|
|
}
|
|
/**
|
|
@ 作者: 秦东
|
|
@ 时间: 2026-01-19 15:38:13
|
|
@ 功能: 初始化表单
|
|
*/
|
|
const initLoadData = () => {
|
|
console.log("获取初始化表单数据-------------->", props.pickAppMenu);
|
|
if (props.pickAppMenu.type != 1) {
|
|
gainAppPageInfoPromise.push(
|
|
gainAppPageInfo({ id: props.pickAppMenu.id }).then((data:any) => {
|
|
gainAppPageInfoData = data;
|
|
})
|
|
)
|
|
|
|
Promise.all(gainAppPageInfoPromise).then(() => {
|
|
objMastesform = stringToObj(gainAppPageInfoData.data.appForm.mastesform);
|
|
for (const element of objMastesform.list) {
|
|
if (element.type == "table") {
|
|
//console.log(element);
|
|
for (const item of element.list) {
|
|
if (item.options) {
|
|
if (
|
|
item.type == "radio" ||
|
|
item.type == "select" ||
|
|
item.type == "checkbox"
|
|
) {
|
|
console.log(item.config.optionsType);
|
|
if (item.config.optionsType == 3) {
|
|
let paramx: string = "" + item.control.optionsValue3Field;
|
|
getFieldRecordPromise.push(
|
|
getFieldRecord(paramx).then(({ data }) => {
|
|
//console.log(data)
|
|
item.options = data;
|
|
})
|
|
);
|
|
}
|
|
}
|
|
}
|
|
}
|
|
}
|
|
}
|
|
Promise.all(getFieldRecordPromise).then(() => {
|
|
console.log(gainAppPageInfoData);
|
|
let objMastesformStr = JSON.stringify(objMastesform);
|
|
gainAppPageInfoData.data.appForm.mastesform = objMastesform;
|
|
gainAppPageInfoData.data.appForm.mastesformjson = objMastesformStr;
|
|
|
|
appInitData.value = gainAppPageInfoData.data;
|
|
// console.log("获取初始化表单数据---!",appInitData.value)
|
|
mastesformjson.value = gainAppPageInfoData.data.appForm.mastesformjson;
|
|
// isFlow.value = gainAppPageInfoData.data.appForm.flowIsOpen;
|
|
|
|
versionId.value = gainAppPageInfoData.data.appForm.id.toString();
|
|
versionTitle.value = gainAppPageInfoData.data.appForm.name;
|
|
|
|
if (gainAppPageInfoData.data.page) {
|
|
// console.log("data.data.mastesform", data.data)
|
|
stateForm.id = gainAppPageInfoData.data.appForm.version.toString();
|
|
stateForm.formId = gainAppPageInfoData.data.appForm.cfid.toString();
|
|
stateForm.versionId = gainAppPageInfoData.data.appForm.id.toString();
|
|
stateForm.formData = objMastesform;
|
|
stateForm.formData.config.hideField = []; //暂时的修复方法:接口返回的config中没有hideField属性,手动添加
|
|
stateForm.dict = string2json(gainAppPageInfoData.data.appForm.dict);
|
|
stateForm.formData.powerstr = string2json(
|
|
gainAppPageInfoData.data.appForm.powerstr
|
|
);
|
|
console.log("data.data.mastesform", stateForm.formData)
|
|
|
|
judgeSubmitCancel({
|
|
name: gainAppPageInfoData.data.appForm.mastesformjson,
|
|
}).then((datajud: any) => {
|
|
|
|
console.log("datajud---------------->", datajud,datajud.data.buttonIsTrue)
|
|
|
|
if (datajud.code == 0) {
|
|
if (datajud.data.buttonIsTrue == 3 || datajud.data.buttonIsTrue == 4) {
|
|
stateForm.formData.list.push(submitButton);
|
|
}
|
|
}
|
|
|
|
console.log("datajud------stateForm.formData.list---------->", stateForm.formData.list)
|
|
});
|
|
}
|
|
});
|
|
|
|
})
|
|
|
|
}
|
|
|
|
|
|
}
|
|
/**
|
|
@ 作者: 秦东
|
|
@ 时间: 2026-01-19 15:34:26
|
|
@ 功能: 监听开关
|
|
*/
|
|
watch(() => openOrClose,(val) => {
|
|
if(val){
|
|
getTaskFormData()
|
|
// initLoadData()
|
|
}else{
|
|
initData()
|
|
}
|
|
},{
|
|
deep:true
|
|
})
|
|
/**
|
|
@ 作者: 秦东
|
|
@ 时间: 2026-01-19 16:16:16
|
|
@ 功能: 扫码填单
|
|
*/
|
|
const showFillFormQrCode = () => {
|
|
//查看二维码展示弹窗图片,图片带有分组,app,表单名称,和二维码图片
|
|
//在此获取必要的参数并请求后台,获取二维码图片,当图片返回成功时,显示弹窗
|
|
//必要的参数为cfid
|
|
|
|
}
|
|
|
|
/**
|
|
@ 作者: 秦东
|
|
@ 时间: 2024-04-09 16:49:09
|
|
@ 功能: 表单前置数据
|
|
*/
|
|
const beforeSubmit = (params: any) => {
|
|
params.formId = props.versionid;
|
|
params.id = "";
|
|
// emits("update:isopen", false);
|
|
return params;
|
|
};
|
|
/**
|
|
@ 作者: 秦东
|
|
@ 时间: 2024-04-09 16:41:20
|
|
@ 功能: 提交成功回调
|
|
*/
|
|
const afterSubmit = (type: string, val?: any) => {
|
|
console.log("表单提交成功------------------>",type,val)
|
|
console.log("流程------------------>",flowMap)
|
|
if (type === "success") {
|
|
|
|
if (isFlowTable.value) {
|
|
if (val.code == 0) {
|
|
if (val.data) {
|
|
let sendInfo = {
|
|
id: val.data.uuid,
|
|
flowList: flowMap.value,
|
|
state: 3,
|
|
};
|
|
startRunFlow(sendInfo).then((data: any) => {
|
|
console.log("流程提交成功--------1---------->",data)
|
|
emits("searchquery");
|
|
});
|
|
}else{
|
|
emits("searchquery");
|
|
}
|
|
}else{
|
|
emits("searchquery");
|
|
}
|
|
}else{
|
|
emits("searchquery");
|
|
}
|
|
}
|
|
closeAppSubmit();
|
|
};
|
|
/**
|
|
@ 作者: 秦东
|
|
@ 时间: 2024-04-09 16:50:37
|
|
@ 功能: 保存草稿
|
|
*/
|
|
const saveDraftPage = (type: string, val?: any) => {
|
|
if (type === "success") {
|
|
emits("searchquery");
|
|
if (isFlowTable.value) {
|
|
if (val.code == 0) {
|
|
let sendInfo = {
|
|
id: val.data.uuid,
|
|
flowList: flowMap.value,
|
|
state: 1,
|
|
};
|
|
startRunFlow(sendInfo).then((data: any) => {
|
|
// console.log("流程提交成功--------1---------->",data)
|
|
});
|
|
}
|
|
}
|
|
}
|
|
closeAppSubmit();
|
|
};
|
|
/**
|
|
@ 作者: 秦东
|
|
@ 时间: 2024-04-09 16:50:01
|
|
@ 功能: 关闭操作
|
|
*/
|
|
const closeAppSubmit = () => {
|
|
emits("update:show", false);
|
|
flowMap.value = [];
|
|
emits("searchquery");
|
|
|
|
};
|
|
//组件解析
|
|
const changeKeyVal = (key: any, val: any, type: any, attribute: any) => {
|
|
console.log("改变表单值--key--->",key)
|
|
console.log("改变表单值--val--->",val,Array.isArray(val))
|
|
console.log("改变表单值--type--->",type)
|
|
console.log("改变表单值--attribute--->",attribute)
|
|
|
|
let isUpdateFlowChart = false;
|
|
console.log("改变表单值--notAsA_BasisForJudgment--->",notAsA_BasisForJudgment.indexOf(type))
|
|
if (notAsA_BasisForJudgment.indexOf(type) === -1) {
|
|
//不是判断字段,则更新流程图表
|
|
let isWrite = true;
|
|
//遍历表单组件
|
|
flowFactor.forEach((item: any) => {
|
|
if (item.factorid == key) {
|
|
isWrite = false;
|
|
|
|
item.type = 3;
|
|
if (type == "checkbox") {
|
|
item.isCheckbox = true;
|
|
item.answers = val?val.map(String):[];
|
|
} else {
|
|
item.isCheckbox = false;
|
|
item.oneanswer = val?val.toString():"";
|
|
}
|
|
if (notAsA_BasisForJudgment.indexOf(type) === -1) {
|
|
isUpdateFlowChart = true;
|
|
}
|
|
}
|
|
});
|
|
if (isWrite) {
|
|
if (type == "checkbox") {
|
|
flowFactor.push({
|
|
factorid: key,
|
|
type: 3,
|
|
isCheckbox: true,
|
|
answers: val?val.map(String):"",
|
|
});
|
|
} else {
|
|
flowFactor.push({
|
|
factorid: key,
|
|
type: 3,
|
|
isCheckbox: false,
|
|
oneanswer: val?val.toString():"",
|
|
});
|
|
}
|
|
isUpdateFlowChart = true;
|
|
}
|
|
}
|
|
//时间类空间附加判断条件
|
|
if (
|
|
timeControl.indexOf(type) > -1 ||
|
|
fixedValueControl.indexOf(type) > -1 ||
|
|
type == "input"
|
|
) {
|
|
let addNewTime = true; //判断是否新增
|
|
flowFactor.forEach((item: any) => {
|
|
if (item.type == 2) {
|
|
addNewTime = false;
|
|
if (item.customFields && item.customFields.length > 0) {
|
|
let sunNewAdd = true;
|
|
item.customFields.forEach((sunItem: any) => {
|
|
// console.log("改变表单值--flowFactor-4->",sunItem.wordfield , key,sunItem.wordfield == key)
|
|
if (sunItem.wordfield == key) {
|
|
sunNewAdd = false;
|
|
isUpdateFlowChart = true;
|
|
if (timeEquation.indexOf(attribute) === -1) {
|
|
//非区间性时间
|
|
sunItem.leftval = val.toString();
|
|
} else {
|
|
//区间性时间
|
|
if (Array.isArray(val)) {
|
|
if (val.length >= 2) {
|
|
sunItem.leftval = val[0].toString();
|
|
sunItem.rightval = val[val.length - 1].toString();
|
|
}
|
|
}
|
|
}
|
|
}
|
|
});
|
|
if (sunNewAdd) {
|
|
isUpdateFlowChart = true;
|
|
if (timeEquation.indexOf(attribute) === -1) {
|
|
//非区间性时间
|
|
let customFieldInfo = {
|
|
wordfield: key,
|
|
optType: "1",
|
|
leftval: val.toString(),
|
|
};
|
|
item.customFields.push(customFieldInfo);
|
|
} else {
|
|
//区间性时间
|
|
if (Array.isArray(val)) {
|
|
if (val.length >= 2) {
|
|
let customFieldInfo = {
|
|
wordfield: key,
|
|
optType: "6",
|
|
leftval: val[0].toString(),
|
|
leftoptType: "3",
|
|
rightoptType: "3",
|
|
rightval: val[val.length - 1].toString(),
|
|
};
|
|
item.customFields.push(customFieldInfo);
|
|
}
|
|
}
|
|
}
|
|
}
|
|
}
|
|
}
|
|
|
|
});
|
|
if (addNewTime) {
|
|
//新增自定义类数据判断
|
|
isUpdateFlowChart = true;
|
|
if (timeEquation.indexOf(attribute) === -1) {
|
|
//非区间性时间
|
|
let customFieldInfo = {
|
|
wordfield: key,
|
|
optType: "1",
|
|
leftval: val.toString(),
|
|
};
|
|
let condInfo = {
|
|
factorid: "customFields",
|
|
type: 2,
|
|
isCheckbox: false,
|
|
customFields: [customFieldInfo],
|
|
};
|
|
flowFactor.push(condInfo);
|
|
} else {
|
|
//区间性时间
|
|
if (Array.isArray(val)) {
|
|
if (val.length >= 2) {
|
|
let customFieldInfo = {
|
|
wordfield: key,
|
|
optType: "6",
|
|
leftval: val[0].toString(),
|
|
leftoptType: "3",
|
|
rightoptType: "3",
|
|
rightval: val[val.length - 1].toString(),
|
|
};
|
|
let condInfo = {
|
|
factorid: "customFields",
|
|
type: 2,
|
|
isCheckbox: false,
|
|
customFields: [customFieldInfo],
|
|
};
|
|
flowFactor.push(condInfo);
|
|
}
|
|
}
|
|
}
|
|
}
|
|
}
|
|
//操作人
|
|
if (asAnApprovalActionControl.indexOf(type) > -1) {
|
|
isUpdateFlowChart = true;
|
|
let isWriteUs = true;
|
|
nodelUserList.forEach((item: any) => {
|
|
if (item.factorid == key) {
|
|
isWriteUs = false;
|
|
item.userList = val;
|
|
}
|
|
});
|
|
if (isWriteUs) {
|
|
nodelUserList.push({
|
|
factorid: key,
|
|
userList: val,
|
|
});
|
|
}
|
|
}
|
|
let isTrue = false
|
|
|
|
console.log("changeFlowPick--->",changeFlowPick.value)
|
|
|
|
if(changeFlowPick.value && Array.isArray(changeFlowPick.value) && changeFlowPick.value.includes(key)){
|
|
isTrue = true
|
|
}
|
|
console.log("更新工作流图--->",isUpdateFlowChart,isTrue)
|
|
//更新工作流图
|
|
if (isUpdateFlowChart || isTrue) {
|
|
flowLoading.value = true;
|
|
//获取工作流不进图
|
|
gainFlowChart.conditionList = flowFactor;
|
|
gainFlowChart.nodelPeople = nodelUserList;
|
|
gainFlowChart.oldFlow = flowMap;
|
|
console.log("获取工作流不进图--gainFlowChart--->",gainFlowChart)
|
|
realTimeUpdateFlow(gainFlowChart).then((data: any) => {
|
|
// console.log("获取工作流不进图-new-->",data)
|
|
flowMap.value = data.data.flowList;
|
|
nextStep.value = data.data.nextStep;
|
|
currentProgress.value = data.data.Step;
|
|
nodeKey.value = data.data.nodeKey;
|
|
// // console.log("获取工作流不进图-1-->",flowMap.value)
|
|
flowLoading.value = false;
|
|
});
|
|
}
|
|
|
|
}
|
|
|
|
|
|
const appTableForm = ref({
|
|
name:""
|
|
})
|
|
|
|
|
|
//-----------------------AI setting--------------------------
|
|
//当前AI智能体，根据form表单的配置来初始化
|
|
//params 主表字段参数 subparams子表字段参数，子表触发时需要清空 ; rowdex:表示子表的第几条数据，没有的话说明不是子表数据
|
|
const currentAgent = ref<
|
|
{
|
|
model: boolean;
|
|
name: string;
|
|
rowdex:number,
|
|
uuid: string[];
|
|
fields: string[];
|
|
trigger: number;
|
|
params: { [key: string]: any };
|
|
subparams:{[key: string]: any}[];
|
|
}[]
|
|
>([]);
|
|
const aiassistRef = ref();
|
|
//触发AI查询事件
|
|
provide(constAiEffect, ({ key, value, field,rowdex}: any) => {
|
|
//新建ai_envents 是为了解决前端并发问题
|
|
const ai_events: Array<{ uuids: string[]; params: { [key: string]: any } }> = [];
|
|
currentAgent.value.forEach(ag=>{
|
|
if(ag.fields.includes(key)){ //trigger: 1:任一 2：半数 3：全部
|
|
if (rowdex!=null){//子表操作
|
|
ag.rowdex=rowdex //更新智能体的rowdex
|
|
if(rowdex>=ag.subparams.length){
|
|
ag.subparams.push({[field]:value})
|
|
}else{
|
|
ag.subparams[rowdex][field]=value
|
|
}
|
|
}else{ //主表操作, 直接加入params种
|
|
ag.params[field]=value; //这个地方把key换成fieldName
|
|
}
|
|
let mergedObj;
|
|
if(ag.subparams.length>0){
|
|
mergedObj = Object.assign({}, ag.params, ag.subparams[ag.rowdex]); //合并子表和主表
|
|
}else{
|
|
mergedObj = ag.params
|
|
}
|
|
switch(ag.trigger){
|
|
case 2:
|
|
if(Object.keys(mergedObj).length>=ag.fields.length/2){
|
|
ai_events.push({uuids:ag.uuid,params:mergedObj })
|
|
}
|
|
break;
|
|
case 3:
|
|
if(Object.keys(mergedObj).length==ag.fields.length){
|
|
ai_events.push({uuids:ag.uuid,params:mergedObj})
|
|
}
|
|
break;
|
|
default:
|
|
ai_events.push({uuids:ag.uuid,params:mergedObj})
|
|
}
|
|
}
|
|
})
|
|
if(ai_events.length>0){
|
|
aiassistRef.value.onSendParamToAI(ai_events)
|
|
}
|
|
})
|
|
|
|
provide('flowNodePower', currterNodePower)
|
|
provide('currentNodeKey', nodeKey)
|
|
</script>
|
|
<template>
|
|
<div v-if="openOrClose" class="drawerClass">
|
|
<el-drawer
|
|
v-model="openOrClose"
|
|
:close-on-click-modal="false"
|
|
:close-on-press-escape="false"
|
|
:destroy-on-close="true"
|
|
:size="drawBodyWidth"
|
|
:close="closeAppSubmit"
|
|
:with-header="false"
|
|
>
|
|
<template #header>
|
|
<div class="drawHeader">
|
|
<el-text size="large">{{ drawTitle }}</el-text>
|
|
<el-button v-if="stateForm.formData.form.qrCodeFlag == true && stateForm.formData.form.qrCodeInside == true" size="small" @click="showFillFormQrCode">扫码填单</el-button>
|
|
</div>
|
|
</template>
|
|
<div v-loading="drawLoading" :class="aiConfigArea&&isFlowTable?'drawBody treePage':(aiConfigArea&&!isFlowTable)?'drawBody twoPageAi':(!aiConfigArea&&isFlowTable)?'drawBody twoPageFlow':'drawBody'">
|
|
<AiPage
|
|
v-if="state.type != 5 && aiConfigArea"
|
|
ref="aiassistRef"
|
|
:agent="currentAgent"
|
|
/>
|
|
|
|
<AppForm
|
|
ref="formEl"
|
|
:drawTitle="drawTitle"
|
|
:numrun="formType"
|
|
:form-data="state.formData"
|
|
:type="formType"
|
|
:dict="state.dict"
|
|
request-url="getFormContent"
|
|
add-url="saveFormContent"
|
|
edit-url="editFormContent"
|
|
:before-submit="beforeSubmit"
|
|
:after-submit="afterSubmit"
|
|
:close-app-submit="closeAppSubmit"
|
|
:change-key-val="changeKeyVal"
|
|
:save-draft-page="saveDraftPage"
|
|
:node-key="nodeKey"
|
|
:purview="purviewAry"
|
|
/>
|
|
|
|
<FlowStep
|
|
v-if="isFlowTable"
|
|
:loading="flowLoading"
|
|
v-model:flow-map="flowMap"
|
|
:next-step="nextStep"
|
|
:current-progress="currentProgress"
|
|
:node-key="nodeKey"
|
|
/>
|
|
</div>
|
|
</el-drawer>
|
|
</div>
|
|
</template>
|
|
<style lang='scss' scoped>
|
|
.drawerClass{
|
|
:deep .el-drawer__header{
|
|
border-bottom: 1px solid #ECECEC;
|
|
}
|
|
}
|
|
.drawHeader {
|
|
width: 100%;
|
|
display: flex;
|
|
justify-content: space-between;
|
|
align-items: center;
|
|
}
|
|
.drawBody{
|
|
width: 100%;
|
|
height: 100%;
|
|
padding: 10px 10px;
|
|
:deep .el-card{
|
|
border-radius: 15px;
|
|
}
|
|
:deep .el-card__header{
|
|
padding: 15px 15px;
|
|
}
|
|
:deep .el-card__body{
|
|
padding: 0;
|
|
}
|
|
:deep .el-card__footer{
|
|
padding: 10px 10px;
|
|
}
|
|
}
|
|
.twoPageAi{
|
|
display: grid;
|
|
grid-template-columns: minmax(150px, 300px) 1fr; /* 左右最小150px，最大250px，中间自适应 */
|
|
grid-template-rows: auto;
|
|
gap: 10px;
|
|
max-width: 100%;
|
|
margin: 0 auto;
|
|
}
|
|
.twoPageFlow{
|
|
display: grid;
|
|
grid-template-columns: 1fr minmax(150px, 300px); /* 左右最小150px，最大250px，中间自适应 */
|
|
grid-template-rows: auto;
|
|
gap: 10px;
|
|
max-width: 100%;
|
|
margin: 0 auto;
|
|
}
|
|
.treePage{
|
|
display: grid;
|
|
grid-template-columns: minmax(150px, 300px) 1fr minmax(150px, 300px); /* 左右最小150px，最大250px，中间自适应 */
|
|
grid-template-rows: auto;
|
|
gap: 10px;
|
|
max-width: 100%;
|
|
margin: 0 auto;
|
|
}
|
|
.svgBox{
|
|
background: linear-gradient(135deg, #0020C2, #4d6cff);
|
|
color: white;
|
|
width: 40px;
|
|
height: 40px;
|
|
border-radius: 50%;
|
|
display: flex;
|
|
align-items: center;
|
|
justify-content: center;
|
|
font-size: 1.2rem;
|
|
}
|
|
.card-header{
|
|
font-size: 1.4rem;
|
|
font-weight: 700;
|
|
color: #0020C2;
|
|
display: flex;
|
|
align-items: center;
|
|
gap: 10px;
|
|
}
|
|
.scroBox{
|
|
padding: 10px 15px;
|
|
height: calc(100vh - 200px);
|
|
}
|
|
.formBody{
|
|
width: 100%;
|
|
overflow-x: auto;
|
|
}
|
|
.flowBody{
|
|
padding: 10px 15px;
|
|
height: calc(100vh - 260px);
|
|
}
|
|
|
|
.bootemWorkFlow{
|
|
width: 100%;
|
|
text-align: center;
|
|
.bootemWorkFlowBut{
|
|
width: 100%;
|
|
padding: 10px 0;
|
|
text-align: center;
|
|
}
|
|
}
|
|
|
|
.btn {
|
|
padding: 14px 16px;
|
|
border-radius: 10px;
|
|
font-weight: 600;
|
|
font-size: 1rem;
|
|
cursor: pointer;
|
|
transition: all 0.3s;
|
|
border: none;
|
|
}
|
|
.btn:hover {
|
|
transform: translateY(-2px);
|
|
box-shadow: 0 5px 15px rgba(0, 32, 194, 0.15);
|
|
}
|
|
.approve-btn {
|
|
background: linear-gradient(135deg, #00cc66, #33dd88);
|
|
color: white;
|
|
}
|
|
.reject-btn {
|
|
background: linear-gradient(135deg, #ff3366, #ff5588);
|
|
color: white;
|
|
}
|
|
|
|
.bootemAi{
|
|
display: grid;
|
|
grid-template-columns: 1fr 50px; /* 左右最小150px，最大250px，中间自适应 */
|
|
grid-template-rows: auto;
|
|
gap: 10px;
|
|
max-width: 100%;
|
|
margin: 0 auto;
|
|
:deep .el-input__wrapper{
|
|
border-radius: 10px;
|
|
}
|
|
}
|
|
|
|
.ai-send-btn {
|
|
background: linear-gradient(135deg, #0020C2, #4d6cff);
|
|
color: white;
|
|
border: none;
|
|
width: 46px;
|
|
border-radius: 10px;
|
|
cursor: pointer;
|
|
display: flex;
|
|
align-items: center;
|
|
justify-content: center;
|
|
transition: all 0.3s;
|
|
}
|
|
|
|
.ai-send-btn:hover {
|
|
background: linear-gradient(135deg, #0019a0, #3a5aff);
|
|
transform: translateY(-2px);
|
|
}
|
|
.ai-conversation {
|
|
flex: 1;
|
|
display: flex;
|
|
flex-direction: column;
|
|
gap: 15px;
|
|
margin-bottom: 20px;
|
|
}
|
|
.message {
|
|
padding: 12px 16px;
|
|
border-radius: 12px;
|
|
max-width: 90%;
|
|
line-height: 1.5;
|
|
}
|
|
|
|
.user-message {
|
|
background: #eef2ff;
|
|
align-self: flex-end;
|
|
border-top-right-radius: 4px;
|
|
border: 1px solid rgba(0, 32, 194, 0.2);
|
|
}
|
|
|
|
.ai-message {
|
|
background: linear-gradient(to right, #f0f5ff, #ffffff);
|
|
align-self: flex-start;
|
|
border-top-left-radius: 4px;
|
|
border: 1px solid rgba(0, 32, 194, 0.1);
|
|
}
|
|
</style>
|
|
|