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.
410 lines
12 KiB
410 lines
12 KiB
<!--
|
|
@ 作者: 秦东
|
|
@ 时间: 2025-02-19 14:16:18
|
|
@ 备注: 接收低代码表单
|
|
-->
|
|
<script lang="ts" setup>
|
|
import { useRoute, useRouter, LocationQuery } from "vue-router";
|
|
import {
|
|
json2string,
|
|
objToStringify,
|
|
string2json,
|
|
stringToObj,
|
|
} from "@/utils/DesignForm/form";
|
|
import {
|
|
judgeSubmitCancel,
|
|
gainAppPageInfo,
|
|
getFieldRecord,
|
|
} from "@/api/DesignForm/requestapi";
|
|
import request from "@/utils/request";
|
|
import { Edit, Picture as IconPicture } from "@element-plus/icons-vue";
|
|
import { appPageDataInit, appWorkFlow } from "@/api/date/type";
|
|
import {
|
|
notAsA_BasisForJudgment,
|
|
asAnApprovalActionControl,
|
|
fixedValueControl,
|
|
timeControl,
|
|
timeEquation,
|
|
submitButton,
|
|
afreshSubmitButton,
|
|
} from "@/utils/workflow/const";
|
|
const route = useRoute();
|
|
const queryData = ref("");
|
|
const activePage = ref(0); //默认选择的页面
|
|
const appInitData = ref<appPageDataInit>("");
|
|
//app表单
|
|
const stateForm = reactive<any>({
|
|
type: 1, // 1新增；2修改；3查看（表单模式） ；4查看； 5设计
|
|
formData: {
|
|
list: [],
|
|
form: {},
|
|
config: {},
|
|
powerstr: {},
|
|
},
|
|
dict: {},
|
|
id: 0,
|
|
formId: "1",
|
|
versionId: 0,
|
|
loading: true,
|
|
});
|
|
//表单列表
|
|
const stateList = reactive({
|
|
tableData: {
|
|
// tableProps: {}, //表格所有参数
|
|
columns: [],
|
|
config: {},
|
|
controlBtn: [],
|
|
operateBtn: [],
|
|
},
|
|
searchData: [],
|
|
loading: false,
|
|
attrObj: {},
|
|
config: {
|
|
pageSize: 10,
|
|
searchIsShow: true,
|
|
searchFormIsShow: true,
|
|
openPageMode: "drawer",
|
|
},
|
|
tagList: {},
|
|
formId: queryData.value.app_id || "",
|
|
formList: [], // 所有可选表单数据源
|
|
name: "",
|
|
treeData: {}, // 左侧树相关
|
|
previewVisible: false,
|
|
tabsName: "second",
|
|
formFieldList: [], // 表单数据源所有可选字段
|
|
formApi: {
|
|
type: "1",
|
|
addApiUrl: "",
|
|
editApiUrl: "",
|
|
delApiUrl: "",
|
|
lookApiUrl: "",
|
|
},
|
|
dict: {},
|
|
refreshTable: true,
|
|
view: {
|
|
list: {
|
|
status: true,
|
|
isClick: false,
|
|
form: {
|
|
sortWord: "",
|
|
sortClass: 1,
|
|
title: [],
|
|
},
|
|
},
|
|
date: {
|
|
status: false,
|
|
isClick: false,
|
|
form: {
|
|
startTime: "",
|
|
endTime: "",
|
|
dayType: 1,
|
|
title: [],
|
|
},
|
|
},
|
|
group: {
|
|
status: false,
|
|
isClick: false,
|
|
form: {
|
|
title: [],
|
|
},
|
|
},
|
|
time: {
|
|
status: false,
|
|
isClick: false,
|
|
form: {
|
|
sortWord: "",
|
|
sort: 1,
|
|
title: [],
|
|
},
|
|
},
|
|
gantt: {
|
|
status: false,
|
|
isClick: false,
|
|
form: {
|
|
startTime: "",
|
|
endTime: "",
|
|
dayType: 2,
|
|
sortWord: "",
|
|
sort: 1,
|
|
title: [],
|
|
},
|
|
},
|
|
map: {
|
|
status: false,
|
|
isClick: false,
|
|
form: {
|
|
mapWord: "",
|
|
sortWord: "",
|
|
sort: 1,
|
|
title: [],
|
|
},
|
|
},
|
|
card: {
|
|
status: false,
|
|
isClick: false,
|
|
form: {
|
|
sort: 1,
|
|
sortWord: "",
|
|
imgWork: "",
|
|
imgWidth: 50,
|
|
imgHeight: 50,
|
|
imgBorderRadius: 5,
|
|
imgPadding: 2,
|
|
titleWork: "",
|
|
describe: "",
|
|
ranks: 3,
|
|
title: [],
|
|
},
|
|
},
|
|
},
|
|
});
|
|
const appFormTitle = ref("");
|
|
const versionTitle = ref<string>(""); //表单名称
|
|
const versionId = ref<string>(""); //表单版本号
|
|
const appFlowInfo = ref<appWorkFlow>(""); //流程
|
|
const isFlow = ref(2);
|
|
const mastesformjson = ref(""); //
|
|
|
|
const pickAppMenu = reactive({
|
|
type: 2,
|
|
id: "",
|
|
});
|
|
/**
|
|
@ 作者: 秦东
|
|
@ 时间: 2024-06-03 09:00:10
|
|
@ 功能: 初始化数据
|
|
*/
|
|
const initLoadData = () => {
|
|
// console.log("initLoadData",props.pickAppMenu.type,props.pickAppMenu.type != 1)
|
|
pickAppMenu.id = queryData.value.table_id;
|
|
gainAppPageInfo({ id: queryData.value.table_id }).then((data) => {
|
|
// console.log("获取初始化表单数据bbbbbbbbbbbbbbbbbbbbbbbbbbbbbbbbbbbb",data)
|
|
appInitData.value = data.data;
|
|
// console.log("获取初始化表单数据---!",appInitData.value)
|
|
mastesformjson.value = data.data.appForm.mastesformjson;
|
|
isFlow.value = data.data.appForm.flowIsOpen;
|
|
if (data.data.page && data.data.pageList && data.data.appFlow) {
|
|
activePage.value = 1;
|
|
} else if (data.data.page && !data.data.pageList && data.data.appFlow) {
|
|
activePage.value = 2;
|
|
} else if (!data.data.page && !data.data.pageList && data.data.appFlow) {
|
|
activePage.value = 3;
|
|
} else if (!data.data.page && data.data.pageList && data.data.appFlow) {
|
|
activePage.value = 1;
|
|
} else if (data.data.page && !data.data.pageList && !data.data.appFlow) {
|
|
activePage.value = 2;
|
|
} else {
|
|
activePage.value = 1;
|
|
}
|
|
versionId.value = data.data.appForm.id.toString();
|
|
versionTitle.value = data.data.appForm.name;
|
|
if (data.data.pageList) {
|
|
let stateData = string2json(data.data.appForm.listjson);
|
|
console.log("接邂逅的数", stateData);
|
|
let holeControlAndConfigStateData = string2json(data.data.appForm.mastesformjson);
|
|
if (stateData.tableData.columns && stateData.tableData.columns.length > 0) {
|
|
for (let i = 0; i < stateData.tableData.columns.length; i++) {
|
|
for (let u = 0; u < holeControlAndConfigStateData.list.length; u++) {
|
|
if (
|
|
stateData.tableData.columns[i].id ==
|
|
holeControlAndConfigStateData.list[u].name
|
|
) {
|
|
stateData.tableData.columns[i].control =
|
|
holeControlAndConfigStateData.list[u].control;
|
|
stateData.tableData.columns[i].config =
|
|
holeControlAndConfigStateData.list[u].config;
|
|
}
|
|
}
|
|
|
|
if (
|
|
stateData.tableData.columns[i].config != undefined &&
|
|
stateData.tableData.columns[i].control != undefined
|
|
) {
|
|
// console.log(stateData.tableData.columns[i])
|
|
let paramx: string =
|
|
"" + stateData.tableData.columns[i].control.optionsValue3Field;
|
|
/*
|
|
在这里请求后台获取字段
|
|
*/
|
|
//console.log("runAppForm-----214",paramx)
|
|
if (paramx && paramx != "" && paramx != null && paramx != "undefined") {
|
|
getFieldRecord(paramx).then(({ data }) => {
|
|
stateData.tableData.columns[i].options = data;
|
|
if (stateData.searchData.length > 0) {
|
|
for (let j = 0; j < stateData.searchData.length; j++) {
|
|
// console.log(stateData.searchData[j])
|
|
if (stateData.searchData[j].id == stateData.tableData.columns[i].id) {
|
|
stateData.searchData[j].options = data;
|
|
}
|
|
}
|
|
}
|
|
});
|
|
}
|
|
if (stateData.searchData && stateData.searchData.length > 0) {
|
|
for (let j = 0; j < stateData.searchData.length; j++) {
|
|
// console.log(stateData.searchData[j])
|
|
if (stateData.searchData[j].id == stateData.tableData.columns[i].id) {
|
|
// console.log(stateData.tableData.columns[i])
|
|
stateData.searchData[j].control =
|
|
stateData.tableData.columns[i].control;
|
|
stateData.searchData[j].config = stateData.tableData.columns[i].config;
|
|
// console.log(stateData.searchData[j])
|
|
}
|
|
}
|
|
}
|
|
}
|
|
}
|
|
}
|
|
stateList.tableData = stateData.tableData;
|
|
stateList.searchData = stateData.searchData;
|
|
if (stateList.searchData == null) {
|
|
stateList.searchData = new Array();
|
|
}
|
|
stateList.loading = stateData.loading;
|
|
stateList.attrObj = stateData.attrObj;
|
|
stateList.config = stateData.config;
|
|
stateList.tagList = stateData.tagList;
|
|
stateList.formList = stateData.formList;
|
|
stateList.name = stateData.name;
|
|
stateList.treeData = stateData.treeData;
|
|
stateList.previewVisible = stateData.previewVisible;
|
|
stateList.formFieldList = stateData.formFieldList;
|
|
stateList.formApi = stateData.formApi;
|
|
stateList.dict = stateData.dict;
|
|
stateList.refreshTable = stateData.refreshTable;
|
|
if (stateData.view) {
|
|
stateList.view = stateData.view;
|
|
}
|
|
}
|
|
if (data.data.page) {
|
|
// console.log("data.data.mastesform", data.data)
|
|
stateForm.id = data.data.appForm.version.toString();
|
|
stateForm.formId = data.data.appForm.cfid.toString();
|
|
stateForm.versionId = data.data.appForm.id.toString();
|
|
stateForm.formData = stringToObj(data.data.appForm.mastesform);
|
|
stateForm.dict = string2json(data.data.appForm.dict);
|
|
stateForm.formData.powerstr = string2json(data.data.appForm.powerstr);
|
|
// console.log("data.data.mastesform", stateForm.formData)
|
|
|
|
judgeSubmitCancel({ name: data.data.appForm.mastesformjson }).then(
|
|
(datajud: any) => {
|
|
if (datajud.code == 0) {
|
|
if (datajud.data == 3 || datajud.data == 4) {
|
|
stateForm.formData.list.push(submitButton);
|
|
}
|
|
}
|
|
}
|
|
);
|
|
}
|
|
if (data.data.appFlow) {
|
|
appFlowInfo.value = data.data.workFlow;
|
|
}
|
|
});
|
|
};
|
|
|
|
//liwenxuan 二维码表格组织人员名称显示 start
|
|
|
|
interface Tree {
|
|
id?: string;
|
|
label: string;
|
|
disabled?: boolean;
|
|
children?: Tree[];
|
|
parentId?: string;
|
|
[key: string]: any;
|
|
}
|
|
const orgAndManTree = ref<Tree[]>();
|
|
function getAssociatedFormsOrgAndManTree() {
|
|
return request({
|
|
url: "/javasys/lowCode/transfer/getOrgAndManTree",
|
|
method: "post",
|
|
});
|
|
}
|
|
getAssociatedFormsOrgAndManTree().then(({ data }) => {
|
|
let resData = ref(data.children);
|
|
orgAndManTree.value = [
|
|
{
|
|
id: data.id,
|
|
//label: data.label,
|
|
label: "组织机构",
|
|
children: [...resData.value],
|
|
},
|
|
];
|
|
});
|
|
//liwenxuan 二维码表格组织人员名称显示 end
|
|
|
|
function optionsValue3Get3(data: any, fieldName: string) {
|
|
console.log("runAppForm", "optionsValue3Get3");
|
|
for (let i = 0; i < stateForm.formData.list.length; i++) {
|
|
if (stateForm.formData.list[i].name == fieldName) {
|
|
stateForm.formData.list[i].options = [];
|
|
for (let j = 0; j < data.length; j++) {
|
|
stateForm.formData.list[i].options.push(data[j]);
|
|
}
|
|
}
|
|
}
|
|
}
|
|
|
|
onMounted(() => {
|
|
const query: LocationQuery = route.query;
|
|
queryData.value = query;
|
|
nextTick(() => {
|
|
initLoadData();
|
|
});
|
|
});
|
|
</script>
|
|
<template>
|
|
<div class="myAppBox">
|
|
<el-scrollbar class="scroBox">
|
|
<el-card style="width: 100%" shadow="always">
|
|
<AppPageList
|
|
v-if="appInitData.pageList"
|
|
:data="stateList.tableData"
|
|
:search-data="stateList.searchData"
|
|
:config="stateList.config"
|
|
:form-id="appInitData.appForm.cfid.toString()"
|
|
:versionid="appInitData.versionId"
|
|
:versiontitle="versionTitle"
|
|
:sign-code="appInitData.signCode"
|
|
:pick-app-menu="pickAppMenu"
|
|
:view-page="stateList.view"
|
|
:form-basic-config="stateForm.formData.form"
|
|
:fields-detail-list="stateForm.formData.list"
|
|
:org-and-man-tree="orgAndManTree"
|
|
/>
|
|
<ak-form
|
|
v-else
|
|
ref="formEl"
|
|
:number="queryData.table_id"
|
|
:is-work-flow="isFlow"
|
|
:form-data="stateForm.formData"
|
|
:type="pickAppMenu"
|
|
:mastesformjson="mastesformjson"
|
|
:flowkey="appInitData.flowkey"
|
|
:groupid="appInitData.groupid"
|
|
:sign-code="appInitData.signCode"
|
|
:version-id="appInitData.versionId"
|
|
add-url="addData"
|
|
@options-value3-get3="optionsValue3Get3"
|
|
/>
|
|
</el-card>
|
|
</el-scrollbar>
|
|
</div>
|
|
</template>
|
|
<style lang="scss" scoped>
|
|
.myAppBox {
|
|
display: flex;
|
|
width: 100%;
|
|
padding: 10px 20px 0 20px;
|
|
:deep .el-card__body {
|
|
padding: 20px 0px 10px 0;
|
|
}
|
|
}
|
|
.scroBox {
|
|
padding: 10 10px;
|
|
height: calc(100vh - 180px);
|
|
.tispMsg {
|
|
margin: 0 auto 15px auto;
|
|
}
|
|
}
|
|
</style>
|
|
|