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