|
|
@@ -0,0 +1,196 @@
|
|
|
+<template>
|
|
|
+ <div class="">
|
|
|
+ <LayoutItem
|
|
|
+ v-for="(item, index) of layoutJson.list"
|
|
|
+ :key="index"
|
|
|
+ :record="item"
|
|
|
+ ref="layoutItemRef"
|
|
|
+ ></LayoutItem>
|
|
|
+ </div>
|
|
|
+</template>
|
|
|
+
|
|
|
+<script>
|
|
|
+import { camelCase, toUnderline } from "@/utils";
|
|
|
+import LayoutItem from "./LayoutItem.vue";
|
|
|
+export default {
|
|
|
+ name: "LayoutIndex",
|
|
|
+ props: ["layoutData"],
|
|
|
+ components: { LayoutItem },
|
|
|
+ data() {
|
|
|
+ return {
|
|
|
+ FormNameList: [],
|
|
|
+ formList: [],
|
|
|
+ layoutJson: {},
|
|
|
+ };
|
|
|
+ },
|
|
|
+ watch: {
|
|
|
+ myLayoutData: {
|
|
|
+ handler(newVal, oldVal) {
|
|
|
+ if (newVal) {
|
|
|
+ this.initLayoutData(newVal);
|
|
|
+ }
|
|
|
+ },
|
|
|
+ deep: true,
|
|
|
+ immediate: true,
|
|
|
+ },
|
|
|
+ },
|
|
|
+ computed: {
|
|
|
+ myLayoutData() {
|
|
|
+ return this.layoutData;
|
|
|
+ },
|
|
|
+ },
|
|
|
+ methods: {
|
|
|
+ initLayoutData(formData) {
|
|
|
+ let { layoutJson, mainForm, subFormList } = formData;
|
|
|
+ this.layoutJson = JSON.parse(layoutJson);
|
|
|
+ console.log(formData);
|
|
|
+ this.transformDataFormat(formData);
|
|
|
+ this.formArray = this.disableHandler(this.formList);
|
|
|
+ this.setFormInfo(this.layoutJson.list);
|
|
|
+ console.log("this.formArray", this.formArray);
|
|
|
+ console.log("this.layoutJson", this.layoutJson);
|
|
|
+ console.log("this.FormNameList", this.FormNameList);
|
|
|
+ console.log("this.formList", this.formList);
|
|
|
+ },
|
|
|
+ // 格式化表单数据
|
|
|
+ transformDataFormat(data) {
|
|
|
+ this.FormNameList = [];
|
|
|
+ let { mainForm, subFormList } = data;
|
|
|
+ this.formList = [];
|
|
|
+ let showValue = null;
|
|
|
+ if (mainForm.showValue) {
|
|
|
+ showValue = mainForm.showValue[0]?.resultMap;
|
|
|
+ }
|
|
|
+
|
|
|
+ if (showValue) {
|
|
|
+ for (const key of Object.keys(showValue)) {
|
|
|
+ if (key != "remark") {
|
|
|
+ showValue[toUnderline(key)] = showValue[key];
|
|
|
+ delete showValue[key];
|
|
|
+ }
|
|
|
+ }
|
|
|
+ mainForm.showTemplate.resultMap = [showValue];
|
|
|
+ }
|
|
|
+
|
|
|
+ this.formList.push({
|
|
|
+ template: mainForm.showTemplate,
|
|
|
+ tableName: mainForm.mainFormTable,
|
|
|
+ formKey: mainForm.formKey,
|
|
|
+ });
|
|
|
+ this.FormNameList.push({
|
|
|
+ formKey: mainForm.formKey,
|
|
|
+ tableName: mainForm.mainFormTable,
|
|
|
+ formItem: mainForm.mainFormItem,
|
|
|
+ relateFormItem: null,
|
|
|
+ formType: mainForm.showTemplate.spare == "2" ? "batch" : "normal",
|
|
|
+ defaultValue: mainForm.showValue ? mainForm.showValue[0].resultMap : {},
|
|
|
+ });
|
|
|
+ if (subFormList && subFormList.length > 0) {
|
|
|
+ subFormList.forEach((item) => {
|
|
|
+ let showValue = null;
|
|
|
+ if (item.showValue) {
|
|
|
+ showValue = item.showValue[0];
|
|
|
+ }
|
|
|
+ let defaultValue = {};
|
|
|
+ if (showValue) {
|
|
|
+ if (item.showTemplate.spare == "2") {
|
|
|
+ //动态表格表单
|
|
|
+ let batch = {},
|
|
|
+ tableName = item.formItem?.split(".")?.[0];
|
|
|
+ batch[tableName] = item.showValue.map((item) => item.resultMap);
|
|
|
+ defaultValue = JSON.parse(JSON.stringify(batch));
|
|
|
+ console.log(JSON.parse(JSON.stringify(batch)));
|
|
|
+ // 所有字段驼峰转下划线
|
|
|
+ batch[tableName].forEach((i) => {
|
|
|
+ for (const key of Object.keys(i)) {
|
|
|
+ i[toUnderline(key)] = i[key];
|
|
|
+ if (toUnderline(key) != key) {
|
|
|
+ delete i[key];
|
|
|
+ }
|
|
|
+ }
|
|
|
+ });
|
|
|
+ item.showTemplate.resultMap = [
|
|
|
+ {
|
|
|
+ batch,
|
|
|
+ },
|
|
|
+ ];
|
|
|
+ } else {
|
|
|
+ for (const key of Object.keys(item.showValue[0].resultMap)) {
|
|
|
+ item.showValue[0].resultMap[toUnderline(key)] =
|
|
|
+ item.showValue[0].resultMap[key];
|
|
|
+ delete item.showValue[0].resultMap[key];
|
|
|
+ }
|
|
|
+
|
|
|
+ item.showTemplate.resultMap = [item.showValue[0].resultMap];
|
|
|
+ }
|
|
|
+ }
|
|
|
+ this.formList.push({
|
|
|
+ template: item.showTemplate,
|
|
|
+ tableName: item.formItem?.split(".")?.[0],
|
|
|
+ formKey: item.formKey,
|
|
|
+ });
|
|
|
+ this.FormNameList.push({
|
|
|
+ formKey: item.formKey,
|
|
|
+ tableName: item.formItem?.split(".")?.[0],
|
|
|
+ formItem: item.formItem,
|
|
|
+ relateFormItem: item.relateMainItem,
|
|
|
+ formType: item.showTemplate.spare == "2" ? "batch" : "normal",
|
|
|
+ defaultValue,
|
|
|
+ insertMap: item.insertMap,
|
|
|
+ });
|
|
|
+ });
|
|
|
+ }
|
|
|
+ },
|
|
|
+ // 调整数据格式
|
|
|
+ disableHandler(formList) {
|
|
|
+ if (formList.length == 0) return [];
|
|
|
+ formList.forEach((item) => {
|
|
|
+ item.template.dfFormSql =
|
|
|
+ typeof item.template.dfFormSql == "object"
|
|
|
+ ? item.template.dfFormSql
|
|
|
+ : JSON.parse(item.template.dfFormSql);
|
|
|
+ item.template.dfVueTemplate =
|
|
|
+ typeof item.template.dfVueTemplate == "object"
|
|
|
+ ? item.template.dfVueTemplate
|
|
|
+ : JSON.parse(item.template.dfVueTemplate);
|
|
|
+
|
|
|
+ if (item.template.resultMap) {
|
|
|
+ item.template.defaultValue = item.template.resultMap[0]
|
|
|
+ ? item.template.resultMap[0]
|
|
|
+ : {};
|
|
|
+ }
|
|
|
+ });
|
|
|
+ return formList;
|
|
|
+ },
|
|
|
+ // 递归设置表单数据
|
|
|
+ setFormInfo(list) {
|
|
|
+ list.forEach((item) => {
|
|
|
+ if (["tabs", "grid"].includes(item.type)) {
|
|
|
+ item.columns.forEach((i) => {
|
|
|
+ this.setFormInfo(i.list);
|
|
|
+ });
|
|
|
+ }
|
|
|
+ if (item.type == "form") {
|
|
|
+ let targeForm = this.formArray.find((i) => i.formKey == item.formKey);
|
|
|
+ item.dfVueTemplate = targeForm.template.dfVueTemplate;
|
|
|
+ item.defaultValue = targeForm.template.defaultValue
|
|
|
+ ? targeForm.template.defaultValue
|
|
|
+ : {};
|
|
|
+ item.dynamicData = targeForm.template.dfFormSql
|
|
|
+ ? targeForm.template.dfFormSql
|
|
|
+ : {};
|
|
|
+ item.tableName = targeForm.tableName;
|
|
|
+ }
|
|
|
+ });
|
|
|
+ },
|
|
|
+ // 获取所有表单数据
|
|
|
+ getFormData() {
|
|
|
+ this.$refs["layoutItemRef"].forEach((element) => {
|
|
|
+ console.log(element.getFormData());
|
|
|
+ });
|
|
|
+ },
|
|
|
+ },
|
|
|
+};
|
|
|
+</script>
|
|
|
+
|
|
|
+<style scoped lang="scss"></style>
|
lph