新增和修改移动端页面中下拉框数据

zkqy-ui/src/views/asEditor/components/formDesign/selectEdit.vue

@@ -1,41 +1,5 @@
 <template>
   <div class="option-edit-wrap">
-    <!--       <el-button
-        type="info"
-        size="small"
-        icon="el-icon-edit"
-        @click="editHandler(0)"
-        v-if="selectItem.type == 'select'"
-      >
-      </el-button>
-      <div class="btn-list" v-else>
-        <el-button
-          type="primary"
-          size="small"
-          icon="el-icon-plus"
-          @click="addHandler"
-          circle
-        >
-        </el-button>
-        <el-button
-          v-for="(btnData, index) in btnList"
-          :key="index"
-          type="info"
-          size="small"
-          icon="el-icon-edit"
-          @click="editHandler(index)"
-          >第{{ index + 1 }}级选项
-        </el-button>
-        <el-button
-          circle
-          type="danger"
-          size="small"
-          icon="el-icon-minus"
-          @click="minusHandler"
-        >
-        </el-button>
-      </div> -->
-    <!-- 按钮 -->
     <el-dialog
       title="设置下拉选项数据"
       :visible.sync="zisShow"
@@ -49,15 +13,6 @@
         label-width="140px"
       >
         <el-row type="flex" style="flex-wrap: wrap">
-          <!-- <el-col :span="12">
-              <el-form-item label="选项数据名" prop="dynamicName">
-                <el-input
-                  v-model="formData.dynamicName"
-                  placeholder="请输入动态数据名"
-                  size="normal"
-                ></el-input>
-              </el-form-item>
-            </el-col> -->
           <el-col :span="12">
             <el-form-item label="表名" prop="tableName">
               <el-select
@@ -142,32 +97,6 @@
               <el-table :data="filterTableData" style="width: 100%">
                 <el-table-column label="序号" type="index" width="50">
                 </el-table-column>
-                <!-- <el-table-column prop="tableName" label="表名" width="150">
-                    <template slot-scope="scope">
-                      <el-select
-                        v-model="scope.row.tableName"
-                        @change="
-                          (value) => {
-                            getFieldOptions(value, scope.row);
-                          }
-                        "
-                        placeholder="请选择"
-                      >
-                        <el-option
-                          v-for="item in tableList"
-                          :key="item.tableName"
-                          :label="item.tableComment"
-                          :value="item.tableName"
-                        >
-                          <span style="float: left">{{ item.tableComment }}</span>
-                          <span
-                            style="float: right; color: #8492a6; font-size: 13px"
-                            >{{ item.tableName }}</span
-                          >
-                        </el-option>
-                      </el-select>
-                    </template>
-                  </el-table-column> -->
                 <el-table-column prop="fieldName" label="字段名" width="150">
                   <template slot-scope="scope">
                     <el-select
@@ -193,15 +122,46 @@
                     </el-select>
                   </template>
                 </el-table-column>
-                <el-table-column prop="flagValue" label="参照值" width="100">
+                <el-table-column prop="refType" label="参照方式" width="100">
                   <template slot-scope="scope">
-                    <el-button
-                      type="info"
-                      size="small"
-                      icon="el-icon-edit"
-                      @click="editFlagHandler(scope.row, scope.$index)"
+                    <el-select
+                      v-model="scope.row.refType"
+                      placeholder="请选择参照类型"
+                      filterable
                     >
-                    </el-button>
+                      <el-option
+                        v-for="item in flagTypeList"
+                        :key="item.value"
+                        :label="item.label"
+                        :value="item.value"
+                      >
+                      </el-option>
+                    </el-select>
+                  </template>
+                </el-table-column>
+                <el-table-column label="参照值" prop="refValue">
+                  <template slot-scope="scope">
+                    <el-input
+                      v-if="scope.row.refType == 0"
+                      v-model="scope.row.refValue"
+                      size="mini"
+                      placeholder="请输入"
+                      clearable
+                    />
+                    <el-select
+                      v-if="scope.row.refType == 2"
+                      v-model="scope.row.refValue"
+                      placeholder="请选择固定值"
+                      filterable
+                    >
+                      <el-option
+                        v-for="item in constFlagList"
+                        :key="item.value"
+                        :label="item.label"
+                        :value="item.value"
+                      >
+                      </el-option>
+                    </el-select>
                   </template>
                 </el-table-column>
                 <el-table-column label="操作">
@@ -355,10 +315,12 @@ import { mapState } from "vuex";
 import getOptionsSqlString from "@/utils/sqlString";
 export default {
   name: "selectEdit",
-  props: ["options", "selectItem", "dynamicKey","selectDataKey"],
+  props: ["options", "selectItem", "dynamicKey", "selectDataKey"],
   components: {},
   data() {
     return {
+      currentFieldIndex: 0,
+      currentFieldItem: {},
       zisShow: false,
       relateOptionShow: false,
       isShow: false,
@@ -373,6 +335,8 @@ export default {
       filterTableData: [
         {
           fieldName: "",
+          refType: "",
+          refValue: "",
           flagValue: "",
           fieldOptions: [],
           flagFormData: {
@@ -444,9 +408,7 @@ export default {
       editIndex: "", //当前编辑层级
     };
   },
-  mounted() {
-    
-  },
+  mounted() {},
   watch: {
     myDynamicKey: {
       handler(nval) {
@@ -475,7 +437,7 @@ export default {
     myOptions: {
       handler(nval) {
         console.log("options", nval);
-       /*    this.btnList = [];
+        /*    this.btnList = [];
           this.reset();
           if (nval.sqlData && nval.sqlData.dynamicName == nval?.dynamicKey) {
             this.btnList = nval.sqlData.echoDatas.map((item) => {
@@ -515,11 +477,22 @@ export default {
     },
   },
   methods: {
-    dialogShow(val) {
+    dialogShow(item, index) {
+      this.currentFieldItem = item;
+      this.currentFieldIndex = index;
+      if (item.optionConditions.length) {
+        //回显数据
+        this.formData.tableName = item.optionConditions[0].tableName;
+        this.getFieldOptions(this.formData.tableName);
+        this.formData.optLabelData = item.optionConditions[0].label;
+        this.formData.optValueData = item.optionConditions[0].value;
+        this.filterTableData = item.optionConditions[0].queryCondition;
+        console.log(this.filterTableData);
+        this.getAllTable();
+      } else {
+        this.getAllTable();
+      }
       this.zisShow = true;
-
-      this.getAllTable();
-
     },
     open() {
       this.$emit("open-dialog"); // 触发自定义事件
@@ -603,16 +576,28 @@ export default {
     },
     // 弹窗确认回调
     conformHandler() {
+      let queryCondition = this.filterTableData.map((item) => {
+        let { fieldName, refType, refValue } = item;
+        return {
+          fieldName,
+          refType,
+          refValue,
+        };
+      });
       let selectQualifiedField = [
         {
           tableName: this.formData.tableName,
           label: this.formData.optLabelData,
           value: this.formData.optValueData,
-          selectDataKey: this.selectDataKey
-        }
-      ]
+          selectDataKey: this.currentFieldItem.fieldKey,
+          queryCondition: queryCondition,
+        },
+      ];
       console.log(selectQualifiedField);
-      this.$emit('select-confirmed', selectQualifiedField);
+      this.$emit("select-confirmed", {
+        selectQualifiedField,
+        index: this.currentFieldIndex,
+      });
       this.zisShow = false;
     },
     // 获取所有表格
@@ -668,6 +653,8 @@ export default {
     },
     // 编辑参照回调
     editFlagHandler(row, index) {
+      this.currentItem = row;
+      this.currentIndex = index;
       this.flagEditIndex = index;
       this.flagFormData = JSON.parse(JSON.stringify(row.flagFormData));
       this.flagShow = true;

zkqy-ui/src/views/asEditor/components/rightslider/investigatestyle/index.vue

@@ -18,26 +18,28 @@
       </el-form-item>
 
       <el-form-item label="数据库表" prop="tableName">
-        <el-select 
-          v-model="datas.tableName" 
-          placeholder="请选择" 
+        <el-select
+          v-model="datas.tableName"
+          placeholder="请选择"
           style="width: 87%"
           @change="
-          (value) => {
-            getFieldOptions(value);
-          }
-        ">
-          <el-option  
+            (value) => {
+              getFieldOptions(value);
+            }
+          "
+        >
+          <el-option
             v-for="item in tableList"
             :key="item.tableName"
             :label="item.tableComment"
-            :value="item.tableName">
-              <span class="discribe" style="float: left">{{
-                item.tableComment
-              }}</span>
-              <span style="float: right; color: #8492a6; font-size: 13px">{{
-                item.tableName
-              }}</span>
+            :value="item.tableName"
+          >
+            <span class="discribe" style="float: left">{{
+              item.tableComment
+            }}</span>
+            <span style="float: right; color: #8492a6; font-size: 13px">{{
+              item.tableName
+            }}</span>
           </el-option>
         </el-select>
       </el-form-item>
@@ -48,7 +50,7 @@
         class="lef"
       >
         <span class="delete" @click="deletetext(index)">x</span>
-        
+
         <el-select
           v-model="item.fieldName"
           placeholder="请选择控件字段"
@@ -61,7 +63,9 @@
             :value="i.fieldName"
           >
             <span style="float: left">{{ i.fieldName }}</span>
-            <span style="float: right; color: #8492a6; font-size: 13px">{{ i.fieldDescription }}</span>
+            <span style="float: right; color: #8492a6; font-size: 13px">{{
+              i.fieldDescription
+            }}</span>
           </el-option>
         </el-select>
 
@@ -85,59 +89,92 @@
         </el-select>
 
         <!-- 动态显示按钮 -->
-        <div v-if="showButtons">
-          <el-button @click="onClickStatic">静态数据</el-button>
-          <el-button @click="onClickDynamic">动态数据</el-button>
+        <div v-if="item.type == 1">
+          <!-- <el-button @click="onClickStatic">静态数据</el-button>
+          <el-button @click="onClickDynamic">动态数据</el-button> -->
+          <!-- <el-radio v-model="" label="" @change=""></el-radio> -->
+          <el-radio-group v-model="item.optionType" @change="onClickStatic">
+            <el-radio :label="false">静态数据</el-radio>
+            <el-radio :label="true">动态数据</el-radio>
+          </el-radio-group>
         </div>
 
         <!-- 静态数据输入框 -->
-        <div v-if="showStaticInput">
-          <el-form :model="dynamicValidateForm" ref="dynamicValidateForm" label-width="100px" class="demo-dynamic">
+        <div v-if="!item.optionType && item.type == 1">
+          <el-form
+            :model="item.options"
+            ref="dynamicValidateForm"
+            label-width="100px"
+            class="demo-dynamic"
+          >
             <el-form-item
-              v-for="(domain, index) in dynamicValidateForm.domains"
-              :key="domain.key"              
+              v-for="(domain, index2) in item.options.static"
+              :key="domain.key"
               :rules="[
                 {
                   validator: (rule, value, callback) => {
-                    const { label, value: domainValue } = this.dynamicValidateForm.domains[index];
+                    const { label, value: domainValue } =
+                      item.options.static[index2];
                     if (!label || !domainValue) {
                       callback(new Error('域名标签和值都不能为空'));
                     } else {
                       callback();
                     }
                   },
-                  trigger: 'blur'
-                }
+                  trigger: 'blur',
+                },
               ]"
             >
-              <el-input v-model="domain.lable" style="width: 100px; height: 30px; margin-top: 10px;margin-right: 10px;"></el-input>
-              <el-input v-model="domain.value" style="width: 100px; height: 30px;"></el-input>
-              <el-button type="danger" size="mini" icon="el-icon-delete" @click.prevent="removeDomain(domain)">删除</el-button>
+              <el-input
+                v-model="domain.lable"
+                @input="inputUpdate"
+                style="
+                  width: 100px;
+                  height: 30px;
+                  margin-top: 10px;
+                  margin-right: 10px;
+                "
+              ></el-input>
+              <el-input
+                v-model="domain.value"
+                @input="inputUpdate"
+                style="width: 100px; height: 30px"
+              ></el-input>
+              <el-button
+                type="danger"
+                size="mini"
+                class="ml5"
+                icon="el-icon-delete"
+                @click.prevent="removeDomain(item.options.static, index2)"
+                >删除</el-button
+              >
             </el-form-item>
             <el-form-item>
-              <el-button type="primary" size="small" @click="addDomain">新增</el-button>
+              <el-button type="primary" size="small" @click="addDomain(item)"
+                >新增</el-button
+              >
             </el-form-item>
           </el-form>
         </div>
 
         <!-- 动态数据输入框 -->
-        <div v-if="showDynamicInput">
-          <el-input
+        <div v-if="item.optionType && item.type == 1">
+          <!-- <el-input
             type="textarea"
             v-model="item.value"
-            placeholder="动态数据变量名"          
-            style="margin-top: 10px; margin-bottom: 10px;"
-        ></el-input>
+            placeholder="动态数据变量名"
+            style="margin-top: 10px; margin-bottom: 10px"
+          ></el-input> -->
         </div>
-        <div v-if="item.value.length && showDynamicInput===true">
-          <el-button 
-            type="primary" 
-            icon="el-icon-edit" 
-            circle 
-            @click="zisShowClick"
+        <div v-if="item.fieldKey && item.optionType && item.type == 1">
+          <el-button
+            type="primary"
+            icon="el-icon-edit"
+            circle
+            @click="zisShowClick(item, index)"
           ></el-button>
         </div>
-        
+
         <el-input
           type="textarea"
           v-model="item.value"
@@ -149,7 +186,12 @@
           v-model="item.value"
           @input="item.value1 = item.value.split('#')"
           placeholder="多项之间用‘#’逗号隔开"
-          v-if="item.type !== 0 && showButtons === false && showStaticInput === false && showDynamicInput === false"
+          v-if="
+            item.type !== 0 &&
+            showButtons === false &&
+            showStaticInput === false &&
+            showDynamicInput === false
+          "
         ></el-input>
       </el-form-item>
       <el-form-item>
@@ -158,11 +200,11 @@
         </el-button>
       </el-form-item>
     </el-form>
-    <selectEdit 
-      ref="selectEditRef" 
+    <selectEdit
+      ref="selectEditRef"
       :selectDataKey="lieData"
       @select-confirmed="handleSelectConfirmed"
-      ></selectEdit>
+    ></selectEdit>
   </div>
 </template>
 
@@ -170,32 +212,34 @@
 import { mapState } from "vuex";
 import { getFormName, getListName } from "@/api/dragform/form.js";
 import getOptionsSqlString from "@/utils/sqlString";
-import selectEdit from '@/views/asEditor/components/formDesign/selectEdit.vue'
+import selectEdit from "@/views/asEditor/components/formDesign/selectEdit.vue";
+import uuid from "@/utils/bpmn/uuid";
 export default {
-  name: 'investigatestyle',
+  name: "investigatestyle",
   props: {
     datas: Object,
-   
   },
   components: {
-    selectEdit
+    selectEdit,
   },
   data() {
     return {
-      lieData:'',
+      lieData: "",
       zisShow: false,
       isShow: false,
       flagShow: false,
-      formSelect:{
-        tName: '',
-        tLabel: '',
-        tvalue:'',
+      formSelect: {
+        tName: "",
+        tLabel: "",
+        tvalue: "",
       },
       dynamicValidateForm: {
-        domains: [{
-          lable: ``,
-          value: ''
-        }],
+        domains: [
+          {
+            lable: ``,
+            value: "",
+          },
+        ],
       },
       selectFormData: {
         dynamicName: "", //英文字符串
@@ -203,39 +247,38 @@ export default {
         optLabelData: "",
         optValueData: "",
       },
-      formData: {       
-        component: 'investigate',
-        text: '表单模块',
-        type: '2-3',
+      formData: {
+        component: "investigate",
+        text: "表单模块",
+        type: "2-3",
         active: true,
-        style: 'investigatestyle',
+        style: "investigatestyle",
         setStyle: {
-          tableName: '',
-          fieldName: '', // 这就是您想绑定的fieldName
-          toPage: '',
-          text: '表单模块',
-          title: '表单模块',
-          jsonData: [], 
+          tableName: "",
+          fieldName: "", // 这就是您想绑定的fieldName
+          toPage: "",
+          text: "表单模块",
+          title: "表单模块",
+          jsonData: [],
         },
       },
-      selecttext: ['文本', '下拉框', '单选', '多选'],
+      selecttext: ["文本", "下拉框", "单选", "多选"],
       showButtons: false, // 控制按钮是否显示
       showStaticInput: false, // 控制静态数据输入框显示
       showDynamicInput: false, // 控制动态数据输入框显示
       shouldShowButton: false, // 控制按钮是否显示
       tableList: [],
       fieldList: [],
-      index1: 0,  
-    }
+      index1: 0,
+    };
   },
   mounted() {},
-  watch: { },
+  watch: {},
   computed: {
     ...mapState({
       databaseName: (state) => state.user.dataSource.databaseName,
       databaseType: (state) => state.user.dataSource.databaseType,
     }),
-   
   },
 
   created() {
@@ -244,16 +287,22 @@ export default {
   },
 
   methods: {
+    inputUpdate() {
+      this.$forceUpdate();
+    },
     handleSelectConfirmed(selectedData) {
-      console.log('从子组件接收到的数据:', selectedData);
-      this.$emit('data-from-child', {
-        selectQualifiedField: selectedData, 
-        selectMapValue: this.dynamicValidateForm.domains
-      });      // 在这里处理接收到的数据，比如更新父组件的状态等
+      console.log("从子组件接收到的数据:", selectedData);
+      let { index, selectQualifiedField } = selectedData;
+      this.datas.jsonData[index].optionConditions = selectQualifiedField;
+      // this.$emit("data-from-child", {
+      //   selectQualifiedField: selectedData,
+      //   selectMapValue: this.dynamicValidateForm.domains,
+      // }); // 在这里处理接收到的数据，比如更新父组件的状态等
     },
-    zisShowClick(){
+    zisShowClick(item, index) {
       // this.zisShow = !this.zisShow
-      this.$refs.selectEditRef.dialogShow(1111)
+      console.log(item, index);
+      this.$refs.selectEditRef.dialogShow(item, index);
     },
     // 添加一级回调
     addHandler() {
@@ -287,97 +336,79 @@ export default {
     deleteFilterItem(index) {
       this.filterTableData.splice(index, 1);
     },
-    // 新增一条筛选条件
-    addFilterHandler() {
-      this.filterTableData.push({
-        // tableName: "",
-        fieldName: "",
-        flagValue: "",
-        fieldOptions: [],
-        flagFormData: {
-          flagType: 0,
-          tableField: {
-            tableName: "",
-            fieldName: "",
-            fieldOptions: [],
-          },
-          flagValue: "",
-        },
-      });
-    },
-    // 编辑参照回调
-    editFlagHandler(row, index) {
-      this.flagEditIndex = index;
-      this.flagFormData = JSON.parse(JSON.stringify(row.flagFormData));
-      this.flagShow = true;
-    },
-    // 确认参照回调
-    flagConfirm() {
-      this.filterTableData[this.flagEditIndex].flagFormData = JSON.parse(
-        JSON.stringify(this.flagFormData)
-      );
-      this.flagShow = false;
-    },
+
     // 开始编辑回调
-   
+
     // 弹窗取消回调
     cancleHandler() {
       this.reset();
       this.isShow = false;
     },
-   
+
     handleClose(done) {
-      this.$confirm('确认关闭？')
-        .then(_ => {
+      this.$confirm("确认关闭？")
+        .then((_) => {
           done();
         })
-        .catch(_ => {});
+        .catch((_) => {});
     },
-    removeDomain(item) {
-      var index = this.dynamicValidateForm.domains.indexOf(item)
+    removeDomain(item, index) {
+      // var index = this.dynamicValidateForm.domains.indexOf(item);
       if (index !== -1) {
-        this.dynamicValidateForm.domains.splice(index, 1)
+        item.splice(index, 1);
+        this.$forceUpdate();
       }
     },
-    addDomain() {
-      this.dynamicValidateForm.domains.push({
-        label: '',
-        value: '',
-        // key: Date.now()
-      });
+    addDomain(item) {
+      if (!item.options.static) {
+        item.options = {};
+        item.options.static = [];
+      }
+      item.options.static.push({ label: "", value: "" });
+      this.$forceUpdate();
+      // this.dynamicValidateForm.domains.push({
+      //   label: "",
+      //   value: "",
+      //   // key: Date.now()
+      // });
     },
     onInputChange() {
       // 当输入框内容变化时，根据输入内容的长度决定是否显示按钮
       this.shouldShowButton = event.target.value.trim().length > 0;
     },
     conChange(index) {
-      this.showButtons = this.selecttext[index] === '下拉框';
-      console.log(this.selecttext[index],888);
-      console.log(this.showButtons,999);
+      this.showButtons = this.selecttext[index] === "下拉框";
+      console.log(this.selecttext[index], 888);
+      console.log(this.showButtons, 999);
       // 当切换选项时重置输入框显示状态
       this.showStaticInput = false;
       this.showDynamicInput = false;
-      console.log(this.datas.jsonData[index],0);
-      if (this.datas && Array.isArray(this.datas.jsonData) && this.datas.jsonData.length > index) {
+      console.log(this.datas.jsonData[index], 0);
+      if (
+        this.datas &&
+        Array.isArray(this.datas.jsonData) &&
+        this.datas.jsonData.length > index
+      ) {
         // 确保jsonData存在且index是有效的
-        this.datas.jsonData[index].value = '';
+        this.datas.jsonData[index].value = "";
         this.datas.jsonData[index].value1 = [];
       } else {
-        console.warn(`Index ${index} is out of bounds or jsonData not properly initialized.`);
+        console.warn(
+          `Index ${index} is out of bounds or jsonData not properly initialized.`
+        );
       }
     },
-    
+
     onClickStatic() {
       this.showStaticInput = true;
       this.showDynamicInput = false;
     },
-    
+
     onClickDynamic() {
       this.showStaticInput = false;
       this.showDynamicInput = true;
     },
 
-
     // 获取所有表格
     async getAllTable() {
       let data = {
@@ -385,7 +416,7 @@ export default {
         databaseType: this.databaseType,
       };
       let res = await getFormName(data);
-      console.log(res.data,123);
+      console.log(res.data, 123);
       this.tableList = res.data;
     },
     async getFieldOptions(value, tempData) {
@@ -397,10 +428,10 @@ export default {
       try {
         let res = await getListName(data);
         if (tempData) {
-          console.log(res,456);
+          console.log(res, 456);
           tempData.fieldOptions = res;
         } else {
-          console.log(res,4567);
+          console.log(res, 4567);
           this.fieldList = res;
         }
       } catch (error) {
@@ -410,21 +441,32 @@ export default {
 
     //添加文本
     addText() {
-      console.log(this.datas.jsonData)
+      console.log(this.datas);
+      if (!this.datas.tableName) {
+        this.$message.error("请先选择数据库表");
+        return;
+      }
       var text = {
-        name: '',
-        type: '',
-        value: '',
+        componentKey: this.datas.componentKey,
+        tableName: this.datas.tableName,
+        fieldKey: uuid(8),
+        name: "",
+        type: "",
+        value: "",
         value1: [],
-        value2: '',
-        fieldName:'',
+        value2: "",
+        fieldName: "",
         showPicker: false,
-      }
-      this.datas.jsonData.push(text)
+        optionType: false, //false 自定义数据  true  动态数据
+        optionConditions: "", //动态数据
+        options: { static: [] }, //静态数据
+      };
+      console.log(text);
+      this.datas.jsonData.push(text);
     },
     //删除文本
     deletetext(index) {
-      this.datas.jsonData.splice(index, 1)
+      this.datas.jsonData.splice(index, 1);
     },
     //下拉内容改变发生发生事件
     /* conChange(index) {
@@ -433,11 +475,11 @@ export default {
     }, */
     // 列名变化回调
     changeModel() {
-      console.log('列',this.datas);
-      this.lieData = this.datas.jsonData[0].fieldName
+      console.log("列", this.datas);
+      this.lieData = this.datas.jsonData[0].fieldName;
     },
   },
-}
+};
 </script>
 
 <style scoped lang="scss">

zkqy-ui/src/views/asEditor/layout/home/pageDesign.vue

@@ -49,7 +49,7 @@
       </div>
     </section>
 
-    <!-- 装修操作 -->
+    <!-- 操作 -->
     <section class="operation">
       <!-- 组件 -->
       <sliderassembly :pointer="pointer" />
@@ -235,6 +235,7 @@ import investigatestyle from "../../components/rightslider/investigatestyle/inde
 import Editor from "@tinymce/tinymce-vue";
 
 import utils from "../../utils/index"; // 方法类
+import { v4 as uuidv4 } from "uuid";
 import componentProperties from "../../utils/componentProperties"; // 组件数据
 import html2canvas from "html2canvas"; // 生成图片
 import FileSaver from "file-saver"; // 导出JSON
@@ -295,14 +296,14 @@ export default {
   },
   data() {
     return {
-      selectFormData:{
-        name: '',
-        pageJson: '',
-        fromMapDb:[],
-        selectQualifiedField:[],
-        selectMapValue:{
-          selectDataKey: [{ label: '', value: '' }]
-        }
+      selectFormData: {
+        name: "",
+        pageJson: "",
+        fromMapDb: [],
+        selectQualifiedField: [],
+        selectMapValue: {
+          selectDataKey: [{ label: "", value: "" }],
+        },
       },
       clickTimer: null,
       isSingleClick: false, // 是否是单击
@@ -346,19 +347,26 @@ export default {
   },
 
   methods: {
-    handleDataFromChild({selectQualifiedField, selectMapValue}) {
-      let a= new Map();
-      console.log('从孙组件接收到的数据1:', '1:',selectQualifiedField,'2:',selectMapValue);
+    handleDataFromChild({ selectQualifiedField, selectMapValue }) {
+      let a = new Map();
+      console.log(
+        "从孙组件接收到的数据1:",
+        "1:",
+        selectQualifiedField,
+        "2:",
+        selectMapValue
+      );
       // 在这里处理接收到的数据，比如更新状态等
-      this.selectFormData.selectQualifiedField = JSON.stringify(selectQualifiedField);
+      this.selectFormData.selectQualifiedField =
+        JSON.stringify(selectQualifiedField);
       // this.selectFormData.selectMapValue = JSON.stringify(selectMapValue);
       let selectDataKeyValue = selectQualifiedField[0].selectDataKey;
-      console.log(selectDataKeyValue,"1111111");
+      console.log(selectDataKeyValue, "1111111");
       console.log(selectDataKeyValue);
-      a.set(selectDataKeyValue,selectMapValue)
-  
-      a.selectDataKeyValue 
-      this.selectFormData.selectMapValue = a
+      a.set(selectDataKeyValue, selectMapValue);
+
+      a.selectDataKeyValue;
+      this.selectFormData.selectMapValue = a;
       // this.selectFormData.selectMapValue.selectDataKey = selectQualifiedField[0].selectDataKey;
       // this.selectFormData.selectMapValue.selectDataKey.push(selectMapValue);
     },
@@ -382,9 +390,113 @@ export default {
         }
       });
     },
+    // 获取保存的数据
+    getFromMapDb(pageJson) {
+      let pageData = JSON.parse(pageJson);
+      let compList = pageData.pageComponents.filter(
+        (item) => item.component == "investigate"
+      );
+      let formCom = compList.map((item) => item.setStyle.jsonData);
+      let tempFormCom = [];
+      formCom.reduce((pre, cur) => {
+        return pre.push(...cur);
+      }, tempFormCom);
+      // let resultArr = tempFormCom.filter((item) => {
+      //   return item.type == 1 && item.optionType;
+      // });
+      let res = tempFormCom.map((item) => {
+        return {
+          tableName: item.tableName,
+          fieldName: item.fieldName,
+          componentKey: item.componentKey, //加到字段里
+        };
+      });
+      return JSON.stringify(res);
+    },
+    getSelectQualifiedField(pageJson) {
+      let pageData = JSON.parse(pageJson);
+      let compList = pageData.pageComponents.filter(
+        (item) => item.component == "investigate"
+      );
+      let formCom = compList.map((item) => item.setStyle.jsonData);
+      let tempFormCom = [];
+      formCom.reduce((pre, cur) => {
+        return pre.push(...cur);
+      }, tempFormCom);
+      // 获取所有下拉框  并且为动态数据的字段
+      let resultArr = tempFormCom.filter((item) => {
+        return item.type == 1 && item.optionType;
+      });
+      let res = resultArr.map((item) => {
+        let { tableName, fieldName, optionConditions } = item;
+        console.log(optionConditions);
+        let queryCondition = optionConditions[0].queryCondition.map((i) => {
+          let r = {};
+          r[i.fieldName] = i.refValue;
+          return r;
+        });
+        return {
+          tableName,
+          fieldName,
+          label: optionConditions.label,
+          value: optionConditions.value,
+          queryCondition,
+        };
+      });
+      return JSON.stringify(res);
+    },
+    getSelectMapValue(pageJson) {
+      let pageData = JSON.parse(pageJson);
+      let compList = pageData.pageComponents.filter(
+        (item) => item.component == "investigate"
+      );
+      let formCom = compList.map((item) => item.setStyle.jsonData);
+      let tempFormCom = [];
+      formCom.reduce((pre, cur) => {
+        return pre.push(...cur);
+      }, tempFormCom);
+      // 获取所有下拉框  并且为静态数据的字段
+      let resultArr = tempFormCom.filter((item) => {
+        return item.type == 1 && !item.optionType;
+      });
+      let res = resultArr.map((item) => {
+        let r = {};
+        r[item.fieldKey] = item.options;
+        return r;
+      });
+      return JSON.stringify(res);
+    },
 
     // 提交页面数据
-    submitJsonData() {
+    async submitJsonData() {
+      let JSONData = this.getJSONData();
+      console.log(JSONData);
+      let payload = {};
+      let { pageJson, name } = JSONData;
+      payload.name = name;
+      payload.pageJson = pageJson;
+      payload.fromMapDb = this.getFromMapDb(pageJson);
+      payload.selectQualifiedField = this.getSelectQualifiedField(pageJson);
+      payload.selectMapValue = this.getSelectMapValue(pageJson);
+      try {
+        if (this.isEdit) {
+          payload.id = this.$route.query.id;
+        }
+        let reqApi = this.isEdit ? updatemobilePageData : addmobilePageData;
+        let res = await reqApi(payload);
+        if (res.code == 200) {
+          this.$message.success("保存成功");
+          this.$tab.closePage();
+          this.$router.push({
+            path: "/ydyq/h5Editor",
+          });
+        } else {
+          this.$message.error(res.msg);
+        }
+      } catch (error) {
+        this.$message.error(error);
+      }
+      return;
       if (this.isEdit) {
         // console.log(this.isEdit);
         // 修改
@@ -398,17 +510,17 @@ export default {
     // 添加JSON数据
     addJSONData() {
       let JSONData = this.getJSONData();
-      // console.log(JSONData,898989);
-      this.selectFormData.name = JSONData.name; 
-      this.selectFormData.pageJson = JSONData.pageJson; 
+      console.log(JSONData, 898989);
+      this.selectFormData.name = JSONData.name;
+      this.selectFormData.pageJson = JSONData.pageJson;
       let fromMapDbData = {
         tableName: this.pageComponents[0].setStyle.tableName,
         filderName: this.pageComponents[0].setStyle.jsonData[0].fieldName,
-        componentKey: this.pageComponents[0].component
+        componentKey: this.pageComponents[0].component,
       };
       let jsonString = JSON.stringify(fromMapDbData);
-      this.selectFormData.fromMapDb = jsonString
-      console.log(this.selectFormData,666666666666666666);
+      this.selectFormData.fromMapDb = jsonString;
+      console.log(this.selectFormData, 666666666666666666);
       addmobilePageData(this.selectFormData).then((response) => {
         if (response.code == 200) {
           //成功
@@ -702,10 +814,16 @@ export default {
      */
     drop(event) {
       /* 获取数据 */
+      console.log(event.dataTransfer.getData("componentName"));
       let data = utils.deepClone(
         componentProperties.get(event.dataTransfer.getData("componentName"))
       );
-
+      console.log(data);
+      // 添加自定义属性
+      data.componentKey = uuidv4().slice(0, 8);
+      data.setStyle.componentKey = data.componentKey;
+      console.log(data);
+      // 添加自定义属性
       /* 查询是否只能存在一个的组件且在第一个 */
       let someOne = this.pageComponents.some((item, index) => {
         return (
@@ -750,7 +868,8 @@ export default {
       /* 丢样式 */
       this.currentproperties = data.setStyle;
 
-      console.log(5555,
+      console.log(
+        5555,
         data,
         this.rightcom,
         this.currentproperties,