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.
327 lines
8.8 KiB
327 lines
8.8 KiB
<!--
|
|
@ 作者: 秦东
|
|
@ 时间: 2024-05-07 11:26:40
|
|
@ 备注: 编辑表单
|
|
-->
|
|
<script lang="ts" setup>
|
|
import { useRoute, useRouter } from "vue-router";
|
|
import { formStruct } from "@/api/DesignForm/types";
|
|
import { customerFormConfig } from "@/api/DesignForm/type";
|
|
import { getProductionMarkForm } from "@/api/DesignForm/requestapi";
|
|
|
|
import PageForm from "@/views/sysworkflow/lowcodepage/appPage/appPageForm/pageForm.vue";
|
|
import PageFlow from "@/views/sysworkflow/lowcodepage/appPage/appPageForm/pageFlow.vue";
|
|
import PageList from "@/views/sysworkflow/lowcodepage/appPage/appPageForm/pageList.vue";
|
|
import PrintSetupPage from "@/views/sysworkflow/lowcodepage/appPage/appPageForm/printSetupPage.vue";
|
|
import AiPage from "@/views/sysworkflow/lowcodepage/appPage/appPageForm/aiPage.vue";
|
|
import DataBpard from "@/views/sysworkflow/lowcodepage/appPage/appPageForm/dataBoard.vue";
|
|
|
|
const props = defineProps({
|
|
appCont: {
|
|
type: Object,
|
|
default() {
|
|
return {};
|
|
},
|
|
},
|
|
isShow: {
|
|
type: Boolean,
|
|
default: false,
|
|
},
|
|
isNew: {
|
|
type: Boolean,
|
|
default: false,
|
|
},
|
|
drawerWith: {
|
|
type: Number,
|
|
default: 0,
|
|
},
|
|
formKey: {
|
|
type: String,
|
|
default: "",
|
|
},
|
|
groupKey: {
|
|
type: String,
|
|
default: "",
|
|
},
|
|
menuId: {
|
|
type: String,
|
|
default: "",
|
|
},
|
|
appPageKey: {
|
|
type: String,
|
|
default: "",
|
|
},
|
|
});
|
|
const emits = defineEmits([
|
|
"update:isShow",
|
|
"update:isNew",
|
|
"update:appPageKey",
|
|
"gainSunAppContent",
|
|
"updateInit",
|
|
]);
|
|
const tabsActive = ref(1);
|
|
const route: any = useRoute().query || {};
|
|
const formConfigCont = reactive<customerFormConfig>({
|
|
formName: "",
|
|
formlogo: "",
|
|
signCode: "",
|
|
});
|
|
const appPageKey = computed({
|
|
get() {
|
|
return props.appPageKey;
|
|
},
|
|
set(val: any) {
|
|
emits("update:appPageKey", val);
|
|
},
|
|
});
|
|
//表单版本ID
|
|
const formVersion = ref<string>("");
|
|
const formPageId = ref<string>("");
|
|
const state = reactive<formStruct>({
|
|
formData: {
|
|
list: [],
|
|
form: {
|
|
size: "default",
|
|
name: "",
|
|
formName: formConfigCont.formName,
|
|
dataTitle: [],
|
|
labelPosition: "left",
|
|
dataSource: "no",
|
|
dataSourceConfig: {
|
|
id: "",
|
|
dataBaseName: "",
|
|
tableName: "",
|
|
tableKey: "",
|
|
dsn: {},
|
|
},
|
|
},
|
|
config: {
|
|
groupKey: props.formKey,
|
|
classify: 4,
|
|
},
|
|
styles: {
|
|
divStyle: {},
|
|
labelStyle: {},
|
|
inputStyle: {},
|
|
},
|
|
purview: [],
|
|
aiConfig: [],
|
|
},
|
|
editor: {},
|
|
loading: false,
|
|
formDataPreview: {},
|
|
previewVisible: false, // 预览窗口
|
|
designType: route.type, // 当前页面设计类型，有效值search
|
|
formDict: {},
|
|
formOtherData: {
|
|
source: route.source || "",
|
|
formName: formConfigCont.formName,
|
|
},
|
|
echatsViews: [],
|
|
});
|
|
const appPageInfo = ref();
|
|
/**
|
|
@ 作者: 秦东
|
|
@ 时间: 2024-05-07 15:11:24
|
|
@ 功能: 关闭页面
|
|
*/
|
|
const closeSavePageForm = () => {
|
|
emits("update:isShow", false);
|
|
emits("gainSunAppContent");
|
|
emits("updateInit");
|
|
emits("update:isNew", false);
|
|
// console.log("appPageInfo.value",appPageInfo.value)
|
|
if (tabsActive.value == 1) {
|
|
appPageInfo.value.gainTableForm();
|
|
}
|
|
};
|
|
|
|
onBeforeMount(() => {
|
|
// console.log("onBeforeMount",props.isNew)
|
|
// console.log("onBeforeMount--->appPageKey",props.appPageKey)
|
|
let send = {
|
|
types: 3,
|
|
};
|
|
if (props.isNew) {
|
|
props.appPageKey = "";
|
|
state.formData.list = [];
|
|
formVersion.value = "";
|
|
appPageKey.value = "";
|
|
getProductionMarkForm(send)
|
|
.then(({ data }) => {
|
|
formConfigCont.formlogo = data.formlogo;
|
|
formConfigCont.formName = data.formname;
|
|
formConfigCont.signCode = data.signCode;
|
|
state.formData.form.name = data.formlogo;
|
|
state.formData.form.formName = data.formname;
|
|
state.formOtherData.formName = data.formname;
|
|
})
|
|
.finally(() => {});
|
|
}
|
|
// console.log("onBeforeMount",props.isNew)
|
|
// console.log("onBeforeMount--2->appPageKey",props.appPageKey)
|
|
if (props.appPageKey == "") {
|
|
getProductionMarkForm(send)
|
|
.then(({ data }) => {
|
|
formConfigCont.formlogo = data.formlogo;
|
|
formConfigCont.formName = data.formname;
|
|
formConfigCont.signCode = data.signCode;
|
|
state.formData.form.name = data.formlogo;
|
|
state.formData.form.formName = data.formname;
|
|
state.formOtherData.formName = data.formname;
|
|
})
|
|
.finally(() => {});
|
|
}
|
|
// console.log("state------------>",state)
|
|
});
|
|
</script>
|
|
<template>
|
|
<el-drawer
|
|
v-model="props.isShow"
|
|
title="设置/编辑自定义表单"
|
|
:with-header="false"
|
|
:close-on-click-modal="false"
|
|
:close-on-press-escape="false"
|
|
:destroy-on-close="true"
|
|
:size="props.drawerWith"
|
|
>
|
|
<div class="common-layout">
|
|
<el-container>
|
|
<el-header class="headerBox">
|
|
<div class="headLeft">
|
|
<el-space wrap>
|
|
<el-avatar shape="square" :size="25" :src="props.appCont.appSvg" />
|
|
<el-tooltip
|
|
class="box-item"
|
|
effect="dark"
|
|
:content="props.appCont.appName"
|
|
placement="bottom"
|
|
>
|
|
<el-text class="w-150px mb-2" truncated>{{
|
|
props.appCont.appName
|
|
}}</el-text>
|
|
</el-tooltip>
|
|
<i class="fa fa-angle-right"></i>
|
|
<el-tooltip
|
|
class="box-item"
|
|
effect="dark"
|
|
:content="state.formData.form.formName"
|
|
placement="bottom"
|
|
>
|
|
<el-text class="w-150px mb-2" truncated>{{
|
|
state.formData.form.formName
|
|
}}</el-text>
|
|
</el-tooltip>
|
|
</el-space>
|
|
</div>
|
|
<div>
|
|
<el-tabs
|
|
v-model="tabsActive"
|
|
@tab-click="handleClick"
|
|
:stretch="true"
|
|
class="tabsMain"
|
|
>
|
|
<el-tab-pane label="① 页面管理" :name="1"> </el-tab-pane>
|
|
<el-tab-pane label="② 流程设计" :name="2"> </el-tab-pane>
|
|
<el-tab-pane label="③ 列表设计" :name="3"> </el-tab-pane>
|
|
<el-tab-pane label="④ 数据看板" :name="4"> </el-tab-pane>
|
|
<el-tab-pane label="⑤ 打印设计" :name="5"> </el-tab-pane>
|
|
</el-tabs>
|
|
</div>
|
|
<div class="headRight">
|
|
<el-button type="danger" size="small" @click="closeSavePageForm"
|
|
>关闭</el-button
|
|
>
|
|
</div>
|
|
</el-header>
|
|
<el-container>
|
|
<PageForm
|
|
ref="appPageInfo"
|
|
v-if="tabsActive == 1"
|
|
:form-Key="props.formKey"
|
|
:app-cont="props.appCont"
|
|
:menu-id="menuId"
|
|
:group-key="props.groupKey"
|
|
v-model:state="state"
|
|
v-model:form-version="formVersion"
|
|
:formconfigcont="formConfigCont"
|
|
v-model:app-page-key="appPageKey"
|
|
/>
|
|
<PageFlow
|
|
v-if="tabsActive == 2"
|
|
v-model:state="state"
|
|
:form-Key="props.formKey"
|
|
:app-cont="props.appCont"
|
|
:menu-id="menuId"
|
|
:group-key="props.groupKey"
|
|
v-model:app-page-key="appPageKey"
|
|
v-model:form-version="formVersion"
|
|
/>
|
|
<PageList
|
|
v-if="tabsActive == 3"
|
|
v-model:state="state"
|
|
:form-Key="props.formKey"
|
|
:app-cont="props.appCont"
|
|
:menu-id="menuId"
|
|
:group-key="props.groupKey"
|
|
v-model:app-page-key="appPageKey"
|
|
v-model:form-version="formVersion"
|
|
/>
|
|
<DataBpard
|
|
v-if="tabsActive == 4"
|
|
v-model:state="state"
|
|
:form-Key="props.formKey"
|
|
:app-cont="props.appCont"
|
|
:menu-id="menuId"
|
|
:group-key="props.groupKey"
|
|
v-model:app-page-key="appPageKey"
|
|
v-model:form-version="formVersion"
|
|
/>
|
|
<PrintSetupPage
|
|
v-if="tabsActive == 5"
|
|
v-model:state="state"
|
|
:form-Key="props.formKey"
|
|
:app-cont="props.appCont"
|
|
:menu-id="menuId"
|
|
:group-key="props.groupKey"
|
|
v-model:app-page-key="appPageKey"
|
|
v-model:form-version="formVersion"
|
|
/>
|
|
</el-container>
|
|
</el-container>
|
|
</div>
|
|
</el-drawer>
|
|
</template>
|
|
<style lang="scss" scoped>
|
|
.headerBox {
|
|
padding: 0px;
|
|
border-bottom: 2px solid #ececec;
|
|
display: flex;
|
|
align-items: center;
|
|
justify-content: space-between;
|
|
.headLeft {
|
|
width: 300px;
|
|
padding-left: 5px;
|
|
span {
|
|
max-width: 100px;
|
|
}
|
|
}
|
|
.headRight {
|
|
width: 300px;
|
|
text-align: right;
|
|
padding-right: 5px;
|
|
}
|
|
.tabsMain {
|
|
::v-deep .el-tabs__header {
|
|
margin: 0px;
|
|
}
|
|
::v-deep .el-tabs__nav-scroll {
|
|
margin: 0 auto !important;
|
|
}
|
|
|
|
::v-deep .el-drawer__body {
|
|
padding: 0;
|
|
}
|
|
}
|
|
}
|
|
</style>
|
|
|