移动端页面设计表单模块绑数据表

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

@@ -13,20 +13,64 @@
       
     </el-from>-->
     <el-form ref="form" :model="datas" label-width="80px">
-      <el-form-item label="名称" label-width="40px">
+      <el-form-item label="表单名称">
         <el-input v-model="datas.title" style="width: 87%"></el-input>
       </el-form-item>
+
+      <el-form-item label="数据库表" prop="tableName">
+        <el-select 
+          v-model="datas.tableName" 
+          placeholder="请选择" 
+          style="width: 87%"
+          @change="
+          (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>
+          </el-option>
+        </el-select>
+      </el-form-item>
+
       <el-form-item
         v-for="(item, index) in datas.jsonData"
         :key="index"
         class="lef"
       >
         <span class="delete" @click="deletetext(index)">x</span>
+        
+        <el-select
+          v-model="item.fieldName"
+          placeholder="请选择控件字段"
+          @change="changeModel"
+        >
+          <el-option
+            v-for="i in fieldList"
+            :key="i.fieldName"
+            :label="i.fieldName"
+            :value="i.fieldName"
+          >
+            <span style="float: left">{{ i.fieldName }}</span>
+            <span style="float: right; color: #8492a6; font-size: 13px">{{ i.fieldDescription }}</span>
+          </el-option>
+        </el-select>
+
         <el-input
           v-model="item.name"
           class="title"
           placeholder="表单模块名称"
         ></el-input>
+
         <el-select
           v-model="item.type"
           placeholder="请选择显示格式"
@@ -39,6 +83,7 @@
             :key="index"
           ></el-option>
         </el-select>
+
         <el-input
           type="textarea"
           v-model="item.value"
@@ -63,6 +108,9 @@
 </template>
 
 <script>
+import { mapState } from "vuex";
+import { getFormName, getListName } from "@/api/dragform/form";
+
 export default {
   name: 'investigatestyle',
   props: {
@@ -71,12 +119,72 @@ export default {
   
   data() {
     return {
+      formData: {
+        component: 'investigate',
+        text: '表单模块',
+        type: '2-3',
+        active: true,
+        style: 'investigatestyle',
+        setStyle: {
+          tableName: '',
+          fieldName: '', // 这就是您想绑定的fieldName
+          toPage: '',
+          text: '表单模块',
+          title: '表单模块',
+          jsonData: [], 
+        },
+      },
       selecttext: ['文本', '下拉框', '单选', '多选'],
+      tableList: [],
+      fieldList: [],
       index1: 0,
     }
   },
   mounted() {},
+
+  computed: {
+    ...mapState({
+      databaseName: (state) => state.user.dataSource.databaseName,
+      databaseType: (state) => state.user.dataSource.databaseType,
+    }),
+  },
+
+  created() {
+    this.getAllTable();
+    // this.getFieldOptions();
+  },
+
   methods: {
+    // 获取所有表格
+    async getAllTable() {
+      let data = {
+        databaseName: this.databaseName,
+        databaseType: this.databaseType,
+      };
+      let res = await getFormName(data);
+      console.log(res.data,123);
+      this.tableList = res.data;
+    },
+    async getFieldOptions(value, tempData) {
+      let data = {
+        databaseName: this.databaseName,
+        databaseType: this.databaseType,
+        tableName: value,
+      };
+      try {
+        let res = await getListName(data);
+        if (tempData) {
+          console.log(res,456);
+          tempData.fieldOptions = res;
+        } else {
+          console.log(res,4567);
+          this.fieldList = res;
+        }
+      } catch (error) {
+        this.$message.error("网络异常,请稍后再试");
+      }
+    },
+
     //添加文本
     addText() {
       console.log(this.datas.jsonData)
@@ -86,6 +194,7 @@ export default {
         value: '',
         value1: [],
         value2: '',
+        fieldName:'',
         showPicker: false,
       }
       this.datas.jsonData.push(text)
@@ -99,6 +208,10 @@ export default {
       this.datas.jsonData[index].value = ''
       this.datas.jsonData[index].value1 = []
     },
+    // 列名变化回调
+    changeModel() {
+      console.log('列',this.datas);
+    },
   },
 }
 </script>
@@ -154,11 +267,13 @@ export default {
       }
       &:nth-child(3) {
         width: 90%;
+        
         /* // flex: 1; */
       }
       &:nth-child(4) {
         width: 100%;
         margin-top: 5px;
+        margin-bottom: 5px;
         /* // flex: 3; */
       }
     }

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

@@ -23,7 +23,7 @@
     </div>
 
     <div style="height: 20px"></div>
-    <p style="color: #323233; font-size: 14px">店铺头像</p>
+    <p style="color: #323233; font-size: 14px">头像</p>
 
     <div style="height: 10px"></div>
     <!-- 店铺头像 -->
@@ -61,29 +61,29 @@
       <div style="height: 30px"></div>
 
       <!-- 店铺名称 -->
-      <el-form-item label="店铺名称" class="lef" prop="name">
+      <el-form-item label="名称" class="lef" prop="name">
         <el-input
           v-model="datas.name"
-          placeholder="请填写店铺名称"
+          placeholder="请填写名称"
           maxlength="20"
         ></el-input>
       </el-form-item>
 
       <!-- 店铺名称 -->
-      <el-form-item label="优惠信息" class="lef">
+      <el-form-item label="信息" class="lef">
         <el-input
           v-model="datas.Discount"
-          placeholder="请填写优惠信息也可不填"
+          placeholder="请填写信息也可不填"
           maxlength="45"
         ></el-input>
       </el-form-item>
 
 
-      <el-form-item label="url">
+      <!-- <el-form-item label="url">
         <el-select v-model="datas.toPage" placeholder="请选择跳转页面">
           <el-option v-for="item in dataList" :key="item.index" :label="item.id" :value="item.id"></el-option>
         </el-select>
-      </el-form-item>
+      </el-form-item> -->
     </el-form>
 
     <!-- 上传图片 -->

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

@@ -243,6 +243,8 @@ export default {
       console.log(row);
       setAsHomePage(row).then((response) => {
         this.isIndex = true;
+        this.$modal.msgSuccess("已设置为首页");
+        this.resetForm("form");
       });
     },
 

zkqy-ui/src/views/asEditor/utils/componentProperties.js

@@ -214,18 +214,18 @@ componentProperties.set('commoditysearch', {
 
 componentProperties.set('storeinformation', {
   component: 'storeinformation',
-  text: '店铺信息',
+  text: '信息',
   type: '1-12',
   active: true,
   style: 'storeinformationstyle',
   setStyle: {
     toPage: '',
-    text: '店铺信息',
+    text: '信息',
     bakcgroundImg: '', //背景图片
-    headPortrait: '', //店铺头像
+    headPortrait: '', //头像
     rubiksCubeType: 0, //类型
-    name: '店铺名称', //店铺名称
-    Discount: '在线支付满150减30，满100减20', //优惠信息
+    name: '名称', //名称
+    Discount: '信息', //信息
   },
 })
 
@@ -378,6 +378,7 @@ componentProperties.set('investigate', {
   active: true,
   style: 'investigatestyle',
   setStyle: {
+    tableName: '',
     toPage: '',
     text: '表单模块',
     title: '表单模块',