hreenshan112
9 months ago
11 changed files with 681 additions and 185 deletions
@ -0,0 +1,404 @@ |
|||||
|
<!-- |
||||
|
@ 作者: 秦东 |
||||
|
@ 时间: 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: {}, |
||||
|
formId: "1", |
||||
|
id: 0, |
||||
|
formId: 0, |
||||
|
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: [], |
||||
|
}, |
||||
|
}, |
||||
|
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" |
||||
|
:pickAppMenu="pickAppMenu" |
||||
|
:viewPage="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" |
||||
|
:isWorkFlow="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" |
||||
|
@optionsValue3Get3="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> |
||||
Loading…
Reference in new issue