Merge remote-tracking branch 'origin/master'

zkqy-ui/src/views/asEditor/components/componentscom/index.js

@@ -21,3 +21,4 @@ export { default as investigate } from './investigate'
 export { default as tabBar } from './tabBar'
 export { default as follow } from './follow'
 export { default as suspension } from './suspension'
+export { default as notecard } from './notecard'

zkqy-ui/src/views/asEditor/components/componentscom/notecard/index.vue

@@ -0,0 +1,243 @@
+<template>
+  
+  <div class="notecard">
+    <div
+      class="commoditysearch"
+      :style="{
+        background: datas.backgroundColor,
+        border: `1px solid ${datas.backgroundColor}`,
+      }"
+    >
+    <!-- 搜索框 -->
+    <section
+      class="searchs"
+      :style="{
+        height: datas.heights + 'px',
+        'justify-content': datas.textPosition === 0 ? 'left' : 'center',
+        background: datas.borderColor,
+        'border-radius': datas.borderRadius === 0 ? '0px' : '10px',
+      }"
+    >
+      <div class="search-left">
+        <van-icon name="search" size="16" :style="{ color: datas.textColor }" />
+        <span :style="{ color: datas.textColor }">搜索</span>
+      </div>
+      <!-- 扫一扫 -->
+      <div
+        class="sweep"
+        v-show="datas.sweep"
+        :style="{ color: datas.textColor }"
+      >
+        <span>扫一扫</span>
+      </div>
+    </section>
+    </div>
+    <section
+      :class="[datas.commodityType === 2 ? 'defaultcommodityList2' : '']"
+      class="defaultcommodity"
+    >
+      <div   
+
+        class="defaultcommodityList"
+        :class="[
+          datas.commodityType === 0 ? 'defaultcommodityList0' : '',
+          datas.commodityType === 1 ? 'defaultcommodityList1' : '',
+          datas.commodityType === 2 ? 'defaultcommodityList2' : '',
+        ]"
+        :style="{
+          'border-radius': datas.borderRadius + 'px',
+          border: datas.moditystyle === 2 ? '1px solid rgba(50,50,51,0.1)' : '',
+          'box-shadow':
+            datas.moditystyle === 1 ? '0 2px 8px rgba(93,113,127,0.08)' : '',
+          width:
+            datas.commodityType === 1
+              ? 50 - datas.commodityMargin / 6 + '%'
+              : datas.commodityType === 2
+              ? 33 - datas.commodityMargin / 5 + '%'
+              : datas.commodityType === 4
+              ? 50 - datas.commodityMargin / 5 + '%'
+              : '',
+        }"
+      >
+        <!-- 文字内容 -->
+        <div
+          class="text"
+          :class="[datas.positions === 'top' ? 'positionsTop' : '']"
+          :style="{ background: datas.moditystyle !== 3 ? '#fff' : 'none' }"
+        >
+          <!-- 名称 -->
+          <h5>姓名：张三</h5>
+          <!-- <h5>年龄：11</h5>
+          <h5>年级：一年级</h5>
+          <h5>爱好：唱歌</h5> -->
+        </div>
+      </div>
+    </section>
+
+    <!-- 删除组件 -->
+    <slot name="deles" />
+  </div>
+</template>
+
+<script>
+import { Icon } from 'vant'
+export default {
+  name: 'notecard',
+  props: {
+    datas: Object,
+  },
+  components: {
+    [Icon.name]: Icon
+  },
+  data() {
+    return {
+      active: 0,
+    }
+  },
+
+  created() {},
+
+  methods: {},
+}
+</script>
+
+<style scoped lang="scss">
+.notecard {
+  .commoditysearch {
+    position: relative;
+    /* 搜索框 */
+    .searchs {
+      position: relative;
+      width: 345px;
+      min-height: 28px;
+      margin: 5px auto;
+      display: flex;
+      align-items: center;
+      font-size: 14px;
+      .search-left {
+        display: flex;
+        align-items: center;
+      }
+      .sweep {
+        position: absolute;
+        right: 10px;
+      }
+      i {
+        margin: 0 5px;
+      }
+    }
+  }
+  position: relative;
+  .title {
+    margin: 15px 0;
+    display: flex;
+    justify-content: center;
+    align-items: center;
+    h4 {
+      font-size: 16px;
+      color: #323233;
+      font-weight: 400;
+      text-align: center;
+      width: 270px;
+      overflow: hidden;
+      white-space: nowrap;
+      text-overflow: ellipsis;
+    }
+  }
+  /* 默认 */
+  .defaultcommodity {
+    box-sizing: border-box;
+    margin: 1px;
+    padding: 0 15px;
+    /* 横向滑动 */
+    &.defaultcommodityList2 {
+      overflow: scroll;
+      display: flex;
+      /* 滚动条 */
+      &::-webkit-scrollbar {
+        height: 1px;
+      }
+      &::-webkit-scrollbar-thumb {
+        background-color: #155bd4;
+      }
+      ::v-deep.el-collapse-item__header,
+      ::v-deep.el-collapse-item__wrap {
+        border-bottom: 0 !important;
+      }
+    }
+    /* 卡片列表 */
+    .defaultcommodityList {
+      position: relative;
+      margin-bottom: 15px;
+      overflow: hidden;
+      display: inline-flex;
+      flex-direction: column;
+
+      /* 大图模式 */
+      &.defaultcommodityList0 {
+        width: 100%;
+        /* 文字在图片中 */
+        .positionsTop {
+          position: absolute;
+          display: flex;
+          flex-direction: column-reverse;
+          left: 0;
+          bottom: 0;
+          background: none !important;
+          background-image: linear-gradient(
+            to bottom,
+            transparent,
+            rgba(0, 0, 0, 0.5)
+          ) !important;
+          /* 标题 */
+          h5 {
+            color: #fff;
+            overflow: hidden;
+            white-space: nowrap;
+            text-overflow: ellipsis;
+          }
+          span {
+            color: #fff;
+          }
+        }
+      }
+
+      /* 一行两个 */
+      &.defaultcommodityList1 {
+        width: 48%;
+        &:nth-of-type(even) {
+          margin-left: 4%;
+        }
+      }
+
+      /* 横向滑动 */
+      &.defaultcommodityList2 {
+        width: 150px;
+        flex: none;
+        margin-right: 5%;
+      }
+
+      /* 文字 */
+      .text {
+        padding: 10px 10px;
+        width: 100%;
+        box-sizing: border-box;
+        /* 商品名称 */
+        h5 {
+          font-size: 14px;
+          line-height: 20px;
+          margin: 0 0 10px;
+          font-weight: 400;
+          width: 100%;
+          text-align: left;
+          /* display: -webkit-box;
+          text-overflow: ellipsis;
+          overflow: hidden;
+          -webkit-line-clamp: 2;
+          -webkit-box-orient: vertical; */
+        }
+      }
+    }
+  }
+}
+</style>

zkqy-ui/src/views/asEditor/components/realTimeView/index2.vue

@@ -90,6 +90,7 @@ import {
   tabBar,
   follow,
   suspension,
+  notecard
 } from "../componentscom/index.js";
 //   import captiontext from '../../../components/captiontext/index.vue'
 //   import placementarea from '../../../components/placementarea/index.vue'
@@ -142,7 +143,7 @@ export default {
   },
   activated() {},
   async created() {
-    console.log("creat");
+    // console.log("creat");
   },
   mounted() {
     //   this.initData()
@@ -231,6 +232,7 @@ export default {
     tabBar,
     follow,
     suspension,
+    notecard
   },
 };
 </script>

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

@@ -3,14 +3,14 @@
     <!-- 标题 -->
     <h2>{{ datas.text }}</h2>
 
-    <p style="color: #323233; font-size: 14px">搜索热词</p>
+    <!-- <p style="color: #323233; font-size: 14px">搜索热词</p>
     <p style="font-size: 12px; color: #969799; margin-top: 10px">
       鼠标拖拽调整热词顺序，搜索框默认展示第一个热词，其他搜索词将以标签形式显示在搜索页中
-    </p>
+    </p> -->
 
     <!-- 表单 -->
     <el-form label-width="80px" :model="datas" size="small">
-      <div v-if="datas.hotords[0]">
+<!--       <div v-if="datas.hotords[0]">
         <vuedraggable v-model="datas.hotords" v-bind="dragOptions">
           <transition-group>
             <section
@@ -19,33 +19,76 @@
               :key="item + index"
             >
               <i class="el-icon-circle-close" @click="deleteHotords(index)" />
-              <!-- 标题和链接 -->
+              标题和链接
               <div class="imgText">
                 <el-input v-model="item.text" placeholder="请输入热词" />
               </div>
             </section>
           </transition-group>
         </vuedraggable>
-      </div>
+      </div> -->
 
       <!-- 添加热词 -->
-      <el-button @click="addHotords" class="uploadImg" type="primary" plain
-        ><i class="el-icon-plus" />点击添加热词</el-button
-      >
+      <!-- <el-button @click="addHotords" class="uploadImg" type="primary" plain>
+        <i class="el-icon-plus" />点击添加热词
+      </el-button> -->
+
+
+      <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>
 
       <div style="height: 20px" />
 
-      <!-- 跳转页面 -->
-      <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 label="控件字段">
+        <el-select
+        v-model="datas.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-form-item>
 
       <div style="height: 20px" />
 
       <!-- 显示位置 -->
-      <el-form-item class="lef" label="显示位置">
+      <!-- <el-form-item class="lef" label="显示位置">
         <div class="weiz">
           <span>{{
             datas.position === 0 ? '正常模式' : '滚动至顶部固定'
@@ -69,9 +112,8 @@
             </el-tooltip>
           </div>
         </div>
-      </el-form-item>
+      </el-form-item> -->
 
-      <div style="height: 10px" />
 
       <!-- 框体样式 -->
       <el-form-item class="lef" label="框体样式">
@@ -125,13 +167,14 @@
         </div>
       </el-form-item>
 
+      <div style="height: 10px" />
+
       <!-- 扫一扫 -->
-      <el-form-item class="lef" label="扫一扫">
+      <!-- <el-form-item class="lef" label="扫一扫">
         {{ datas.sweep ? '显示' : '隐藏' }}
         <el-checkbox style="margin-left: 196px" v-model="datas.sweep" />
-      </el-form-item>
+      </el-form-item> -->
 
-      <div style="height: 10px" />
 
       <!-- 框体高度 -->
       <el-form-item label="框体高度" class="lef borrediu">
@@ -191,8 +234,9 @@
 </template>
 
 <script>
+import { mapState } from "vuex";
 import vuedraggable from 'vuedraggable' //拖拽组件
-import { listmobilePageData } from "@/api/asEditor/index.js";
+import { getFormName, getListName } from "@/api/dragform/form.js";
 
 export default {
   name: 'commoditysearchstyle',
@@ -202,8 +246,9 @@ export default {
   components: { vuedraggable },
   data() {
     return {
-      // 移动端数据表格数据
-      dataList: [],
+      // lieData: "",
+      tableList: [],
+      fieldList: [],
       predefineColors: [
         // 颜色选择器预设
         '#ff4500',
@@ -230,17 +275,52 @@ export default {
       },
     }
   },
+  
+  computed: {
+    ...mapState({
+      databaseName: (state) => state.user.dataSource.databaseName,
+      databaseType: (state) => state.user.dataSource.databaseType,
+    }),
+  },
 
   created() {
-    this.getList();
+    this.getAllTable();
+
   },
 
   methods: {
-    getList() {
-      this.loading = true;
-      listmobilePageData(this.queryParams).then(response => {
-        this.dataList = response.rows;
-      });
+    // 列名变化回调
+    changeModel() {
+      console.log("列", this.datas);
+      // this.lieData = this.datas.jsonData[0].fieldName;
+    },
+    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("网络异常,请稍后再试");
+      }
     },
 
     

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

@@ -247,7 +247,7 @@ export default {
       formData: {
         component: "investigate",
         text: "表单模块",
-        type: "2-3",
+        type: "1-1",
         active: true,
         style: "investigatestyle",
         setStyle: {

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

@@ -0,0 +1,391 @@
+<template>
+  <div class="notecardstyle">
+    <!-- 标题 -->
+    <h2>{{ datas.text }}</h2>
+
+    <el-form label-width="80px" :model="datas" size="small">
+      <!-- 选择表单 -->
+      <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>
+
+      <div style="height: 20px" />
+
+      <el-form-item label="控件字段">
+        <el-select
+        v-model="datas.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-form-item>
+
+      <div style="height: 20px" />
+
+       <!-- 框体样式 -->
+       <el-form-item class="lef" label="框体样式">
+        <div class="weiz">
+          <span>{{ datas.borderRadius1 === 0 ? '方形' : '圆形' }}</span>
+          <div>
+            <el-tooltip
+              effect="dark"
+              :content="index - 1 === 0 ? '方形' : '圆形'"
+              placement="bottom"
+              v-for="index in 2"
+              :key="index"
+            >
+              <i
+                class="iconfont"
+                :class="[
+                  index - 1 === 0 ? 'icon-sousuokuang1' : 'icon-sousuokuang',
+                  datas.borderRadius1 === index - 1 ? 'active' : '',
+                ]"
+                @click="datas.borderRadius1 = index - 1"
+              />
+            </el-tooltip>
+          </div>
+        </div>
+      </el-form-item>
+
+      <div style="height: 10px" />
+
+      <!-- 文本位置 -->
+      <el-form-item class="lef" label="文本位置">
+        <div class="weiz">
+          <span>{{ datas.textPosition === 0 ? '居左' : '居中' }}</span>
+          <div>
+            <el-tooltip
+              effect="dark"
+              :content="index - 1 === 0 ? '居左' : '居中'"
+              placement="bottom"
+              v-for="index in 2"
+              :key="index"
+            >
+              <i
+                class="iconfont"
+                :class="[
+                  index - 1 === 0 ? 'icon-horizontal-left' : 'icon-juzhong',
+                  datas.textPosition === index - 1 ? 'active' : '',
+                ]"
+                @click="datas.textPosition = index - 1"
+              />
+            </el-tooltip>
+          </div>
+        </div>
+      </el-form-item>
+
+      <div style="height: 10px" />
+
+      <!-- 标题内容 -->
+      <el-form-item class="lef" label="选择模板">
+        <p style="color: #000">{{ styleText }}</p>
+      </el-form-item>
+
+      <!-- 卡片样式选择 -->
+      <div class="commodityType">
+        <el-tooltip
+          class="item"
+          effect="dark"
+          :content="item.content"
+          placement="bottom"
+          v-for="(item, index) in commodityTypes"
+          :key="index"
+        >
+          <span
+            class="iconfont"
+            style="font-size: 21px"
+            :class="[
+              item.type === datas.commodityType ? 'active' : '',
+              item.icon,
+            ]"
+            @click="datas.commodityType = index"
+          />
+        </el-tooltip>
+      </div>
+
+      <div class="bor" />
+
+      <!-- 卡片样式 -->
+      <el-form-item label="卡片样式" class="lef" />
+      <!-- 卡片样式选择 -->
+      <div class="moditystyle">
+        <span
+          v-for="(item, index) in moditystyles"
+          :key="index"
+          :class="item.type == datas.moditystyle ? 'active' : ''"
+          @click="datas.moditystyle = index"
+        >
+          {{ item.text }}
+        </span>
+      </div>
+
+      <div class="bor" />
+
+      <!-- 图片倒角 -->
+      <el-form-item label="卡片倒角" class="lef borrediu">
+        <el-slider
+          v-model="datas.borderRadius"
+          :max="30"
+          input-size="mini"
+          show-input
+        >
+        </el-slider>
+      </el-form-item>
+
+      <div style="height: 10px" v-if="datas.commodityType === 0" />
+      <div class="bor" />
+
+    </el-form>
+
+    <!-- 上传图片 -->
+  </div>
+</template>
+
+<script>
+import { mapState } from "vuex";
+import vuedraggable from 'vuedraggable' //拖拽组件
+import { getFormName, getListName } from "@/api/dragform/form.js";
+
+export default {
+  name: 'notecardstyle',
+  props: {
+    datas: Object,
+  },
+  components: { vuedraggable, },
+  data() {
+    let kon = (rule, value, callback) => {
+      if (value.length === 0) callback(new Error('请输入有效数字'))
+    }
+    return {
+      tableList: [],
+      fieldList: [],
+      options1: [],
+      moditystyles: [
+        /* 卡片样式 */
+        {
+          text: '无边白底',
+          type: 0,
+        },
+        {
+          text: '卡片投影',
+          type: 1,
+        },
+        {
+          text: '描边白底',
+          type: 2,
+        },
+        {
+          text: '无边透明底',
+          type: 3,
+        },
+      ],
+      commodityTypes: [
+        {
+          icon: 'icon-datumoshi',
+          type: 0,
+          content: '详细模式',
+        },
+        {
+          icon: 'icon-commodity-yihangliangge',
+          type: 1,
+          content: '一行两个',
+        },
+        {
+          icon: 'icon-xuanzemokuai-daohanghengxianghuadong',
+          type: 2,
+          content: '横向滑动',
+        },
+      ],
+    }
+  },
+  created() {
+    this.getAllTable();
+  },
+  methods: {
+     // 列名变化回调
+     changeModel() {
+      console.log("列", this.datas);
+      // this.lieData = this.datas.jsonData[0].fieldName;
+    },
+    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("网络异常,请稍后再试");
+      }
+    },
+  },
+  computed: {
+    ...mapState({
+      databaseName: (state) => state.user.dataSource.databaseName,
+      databaseType: (state) => state.user.dataSource.databaseType,
+    }),
+    styleText() {
+      if (this.datas.commodityType === 0) return '详细列表'
+      if (this.datas.commodityType === 1) return '一行两个'
+      if (this.datas.commodityType === 2) return '横向滑动'
+    },
+  },
+}
+</script>
+
+<style scoped lang="scss">
+.notecardstyle {
+  width: 100%;
+  position: absolute;
+  left: 0;
+  top: 0;
+  padding: 0 10px 20px;
+  box-sizing: border-box;
+
+  /* 标题 */
+  h2 {
+    padding: 24px 16px 24px 0;
+    margin-bottom: 15px;
+    border-bottom: 1px solid #f2f4f6;
+    font-size: 18px;
+    font-weight: 600;
+    color: #323233;
+  }
+   /* 图片样式 */
+   .weiz {
+    display: flex;
+    justify-content: space-between;
+    i {
+      padding: 5px 14px;
+      margin-left: 10px;
+      border-radius: 0;
+      border: 1px solid #ebedf0;
+      font-size: 20px;
+      font-weight: 500;
+      cursor: pointer;
+
+      &:last-child {
+        font-size: 22px;
+      }
+
+      &.active {
+        color: #155bd4;
+        border: 1px solid #155bd4;
+        background: #e0edff;
+      }
+    }
+  }
+
+  .lef {
+    ::v-deep.el-form-item__label {
+      text-align: left;
+    }
+  }
+
+  /* 列表样式 */
+  .commodityType {
+    display: flex;
+    justify-content: space-around;
+    align-items: center;
+    span {
+      display: inline-block;
+      width: 58px;
+      height: 32px;
+      text-align: center;
+      line-height: 32px;
+      background: #fff;
+      border: 1px solid #ebedf0;
+      color: #979797;
+      margin: 0 1px;
+      cursor: pointer;
+      transition: all 0.5s;
+
+      &:hover {
+        border: 1px solid #155bd4;
+        color: #155bd4;
+      }
+
+      &.active {
+        border: 1px solid #155bd4;
+        background-color: #e0edff;
+        color: #155bd4;
+      }
+    }
+  }
+
+  /* 卡片样式 */
+  .moditystyle {
+    font-size: 12px;
+    width: 100%;
+    display: flex;
+    span {
+      width: 86px;
+      height: 32px;
+      display: inline-block;
+      text-align: center;
+      line-height: 32px;
+      cursor: pointer;
+      border: 1px solid #ebedf0;
+      &.active {
+        border: 1px solid #155bd4;
+        background-color: #e0edff;
+        color: #155bd4;
+      }
+    }
+  }
+
+}
+</style>

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

@@ -0,0 +1,769 @@
+<template>
+  <div class="notecardstyle">
+    <!-- 标题 -->
+    <h2>{{ datas.text }}</h2>
+
+    <el-form label-width="80px" :model="datas" size="small">
+      <!-- 选择表单 -->
+      <el-form-item class="lef" label="" prop="tableName">
+        <el-radio-group v-model="listQueryData.isSingleTable">
+          <el-radio :label="0">单表</el-radio>
+          <el-radio :label="1">多表</el-radio>
+        </el-radio-group>
+      </el-form-item>
+      <el-button type="primary" size="mini" @click="editQueryHandler"
+        >编辑查询条件</el-button
+      >
+
+      <div style="height: 20px" />
+    </el-form>
+    <el-dialog
+      title="查询条件"
+      style="top: 0"
+      :visible.sync="editOpen"
+      :fullscreen="true"
+    >
+      <el-form
+        :model="listQueryData.mainForm"
+        ref="form"
+        :rules="rules"
+        label-width="80px"
+        :inline="true"
+        size="normal"
+      >
+        <el-form-item label="主表" prop="mainTableName">
+          <el-select
+            v-model="listQueryData.mainForm.mainTableName"
+            placeholder="请选择表"
+            filterable
+            @change="mainTableChangeHandler"
+          >
+            <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 label="表格主键" prop="tablePrimaryKey">
+          <el-select
+            :disabled="listQueryData.mainForm.mainTableName == ''"
+            v-model="listQueryData.mainForm.tablePrimaryKey"
+            placeholder="请选择主键"
+            clearable
+            filterable
+          >
+            <el-option
+              v-for="item in mainTableFieldOptions"
+              :key="item.fieldName"
+              :label="item.fieldDescription"
+              :value="item.fieldName"
+            >
+              <span class="discribe" style="float: left">{{
+                item.fieldName
+              }}</span>
+              <span style="float: right; color: #8492a6; font-size: 13px">{{
+                item.fieldDescription
+              }}</span>
+            </el-option>
+          </el-select>
+        </el-form-item>
+        <el-form-item
+          label="排序依赖字段"
+          label-width="100px"
+          prop="sortFieldName"
+        >
+          <el-select
+            :disabled="listQueryData.mainForm.mainTableName == ''"
+            v-model="listQueryData.mainForm.sortFieldName"
+            placeholder="请选择排序依赖字段"
+            clearable
+            filterable
+          >
+            <el-option
+              v-for="item in mainTableFieldOptions"
+              :key="item.fieldName"
+              :label="item.fieldDescription"
+              :value="item.fieldName"
+            >
+              <span class="discribe" style="float: left">{{
+                item.fieldName
+              }}</span>
+              <span style="float: right; color: #8492a6; font-size: 13px">{{
+                item.fieldDescription
+              }}</span>
+            </el-option>
+          </el-select>
+        </el-form-item>
+
+        <el-form-item
+          label="排序方式"
+          v-show="listQueryData.mainForm.sortFieldName != ''"
+          prop="sortType"
+        >
+          <el-select
+            v-model="listQueryData.mainForm.sortType"
+            placeholder="请选择排序方式"
+            clearable
+            filterable
+          >
+            <el-option
+              v-for="item in sortOptions"
+              :key="item.value"
+              :label="item.label"
+              :value="item.value"
+            >
+            </el-option>
+          </el-select>
+        </el-form-item>
+      </el-form>
+      <el-table
+        ref="dragTable"
+        :data="mainTableData"
+        row-key="id"
+        border
+        stripe
+      >
+        <el-table-column
+          type="index"
+          class-name="allowDrag"
+          align="center"
+          width="50"
+        />
+        <el-table-column prop="fieldName" align="center" label="字段">
+        </el-table-column>
+        <el-table-column
+          prop="fieldDescription"
+          align="center"
+          label="字段描述"
+        >
+          <template slot-scope="scope">
+            <el-input
+              v-model="scope.row.fieldDescription"
+              placeholder="请输入内容"
+            />
+          </template>
+        </el-table-column>
+        <el-table-column
+          v-for="col in columns"
+          :prop="col.prop"
+          :key="col.prop"
+          :label="col.label"
+          align="center"
+        >
+        </el-table-column>
+        <el-table-column align="center" label="字段配置">
+          <template slot-scope="scope">
+            <el-button
+              type="text"
+              size="small"
+              icon="el-icon-edit"
+              @click="fieldEditHandler(scope.row, scope.$index)"
+            >
+              编辑
+            </el-button>
+          </template>
+        </el-table-column>
+      </el-table>
+      <el-divider content-position="center">查询条件</el-divider>
+      <el-button
+        type="success"
+        size="small"
+        icon="el-icon-plus"
+        @click="addContionHandler"
+        >添加条件</el-button
+      >
+
+      <el-table :data="queryContionTableData" border stripe>
+        <el-table-column type="index" width="50" />
+        <el-table-column prop="fieldName" label="字段">
+          <template slot-scope="scope">
+            <el-select
+              v-model="scope.row.fieldName"
+              placeholder="请选择字段"
+              clearable
+              filterable
+            >
+              <el-option
+                v-for="item in mainTableFieldOptions"
+                :key="item.fieldName"
+                :label="item.fieldDescription"
+                :value="item.fieldName"
+              >
+                <span class="discribe" style="float: left">{{
+                  item.fieldName
+                }}</span>
+                <span style="float: right; color: #8492a6; font-size: 13px">{{
+                  item.fieldDescription
+                }}</span>
+              </el-option>
+            </el-select>
+          </template>
+        </el-table-column>
+        <!-- <el-table-column prop="fieldDescription" label="字段描述">
+        </el-table-column> -->
+        <el-table-column prop="type" label="查询类型">
+          <template slot-scope="scope">
+            <el-select
+              v-model="scope.row.type"
+              value-key=""
+              placeholder=""
+              filterable
+              @change="changeType(scope.row)"
+            >
+              <el-option
+                v-for="item in contionTypes"
+                :key="item.value"
+                :label="item.label"
+                :value="item.value"
+              >
+              </el-option>
+            </el-select>
+          </template>
+        </el-table-column>
+        <el-table-column prop="operator" label="查询条件">
+          <template slot-scope="scope">
+            <el-select
+              v-model="scope.row.operator"
+              value-key=""
+              placeholder=""
+              filterable
+            >
+              <el-option
+                v-for="item in operatorOptions"
+                :key="item.value"
+                :label="item.label"
+                :value="item.value"
+              >
+              </el-option>
+            </el-select>
+          </template>
+        </el-table-column>
+        <el-table-column prop="value" label="参照值">
+          <template slot-scope="scope">
+            <el-input
+              v-model="scope.row.value"
+              :disabled="scope.row.type == '2'"
+              placeholder="请输入参照值"
+              size="normal"
+            ></el-input>
+          </template>
+        </el-table-column>
+      </el-table>
+
+      <template #footer>
+        <span>
+          <el-button @click="editOpen = false">取消</el-button>
+          <el-button type="primary" @click="confirmHandler">确认</el-button>
+        </span>
+      </template>
+    </el-dialog>
+    <el-dialog
+      title="字段配置"
+      style="top: 0"
+      :visible.sync="fieldEditOpen"
+      :fullscreen="false"
+    >
+      <el-form
+        :model="columnAttibute"
+        ref="columnAttibuteForm"
+        :rules="columnAttibuteRules"
+        label-width="100px"
+        :inline="false"
+        size="normal"
+      >
+        <el-form-item label="是否是日期">
+          <el-radio-group v-model="columnAttibute.isDateColumn">
+            <el-radio :label="true"> 是 </el-radio>
+            <el-radio :label="false"> 否 </el-radio>
+          </el-radio-group>
+        </el-form-item>
+        <el-form-item label="日期格式">
+          <el-select
+            v-model="columnAttibute.dateFormat"
+            placeholder="请选择日期格式"
+            filterable
+          >
+            <el-option
+              v-for="val in dict.type.sys_time_format"
+              :key="val.value"
+              :label="val.label"
+              :value="val.value"
+            ></el-option>
+          </el-select>
+        </el-form-item>
+        <el-form-item label="是否显示" prop="isShow">
+          <el-switch
+            v-model="columnAttibute.isShow"
+            active-text="显示"
+            inactive-text="隐藏"
+          >
+          </el-switch>
+        </el-form-item>
+
+        <el-form-item>
+          <el-button type="primary" @click="onSaveAttibute">保存</el-button>
+          <el-button @click="fieldEditOpen = false">取消</el-button>
+        </el-form-item>
+      </el-form>
+    </el-dialog>
+
+    <!-- 上传图片 -->
+  </div>
+</template>
+
+<script>
+import { mapState } from "vuex";
+import vuedraggable from "vuedraggable"; //拖拽组件
+import { getFormName, getListName } from "@/api/dragform/form.js";
+import Sortable from "sortablejs";
+import { camelCase } from "@/utils/index.js";
+import Data from "@/views/system/dict/data.vue";
+
+export default {
+  name: "notecardstyle",
+  dicts: ["sys_time_format"],
+  props: {
+    datas: Object,
+  },
+  components: { vuedraggable },
+  data() {
+    let kon = (rule, value, callback) => {
+      if (value.length === 0) callback(new Error("请输入有效数字"));
+    };
+    return {
+      currentRow: {}, //当前正在编辑的列
+      columnAttibute: {
+        isDateColumn: false,
+        dateFormat: "yyyy-MM-dd",
+        isShow: false,
+      },
+      fieldEditOpen: false, //字段配置弹窗
+      tableList: [], //表格列表
+      editOpen: false, //编辑弹窗
+      listQueryData: {
+        isSingleTable: 0,
+
+        mainForm: {
+          mainTableName: "",
+          table_name_des: "",
+          tablePrimaryKey: "",
+          sortFieldName: "",
+          sortType: "",
+        },
+      },
+      sortOptions: [
+        {
+          value: "asc",
+          label: "升序",
+        },
+        {
+          value: "desc",
+          label: "降序",
+        },
+      ],
+      mainTableFieldOptions: [],
+      mainTableData: [], //表格字段配置数据
+      queryContionTableData: [], //查询条件数据
+      rules: {},
+      columnAttibuteRules: {},
+      contionTypes: [
+        {
+          value: 0,
+          label: "默认值",
+        },
+        // {
+        //   value: 1,
+        //   label: "检索字段",
+        // },
+        {
+          value: 2,
+          label: "系统值",
+        },
+      ],
+      operatorOptions: [
+        {
+          label: "=",
+          value: "=",
+        },
+        {
+          label: "<",
+          value: "<",
+        },
+        {
+          label: ">",
+          value: ">",
+        },
+        {
+          label: "<=",
+          value: "<=",
+        },
+        {
+          label: "=>",
+          value: "=>",
+        },
+      ],
+    };
+  },
+  created() {
+    this.getAllTable();
+  },
+  watch: {
+    mainTableFieldOptions: {
+      handler(val) {
+        if (val.length) {
+          console.log(val);
+          this.mainTableData = val.map((item, index) => {
+            return {
+              sort: parseInt(index) + 1,
+              id:
+                this.listQueryData.mainForm.mainTableName +
+                "-" +
+                item.fieldName,
+              tableName: this.listQueryData.mainForm.mainTableName,
+              fieldName: item.fieldName,
+              fieldDescription: item.fieldDescription,
+              relateTableName: "", //关联表名
+              relateFieldName: "", //关联字段名
+              relateFieldNameOptions: [], //关联字段选项
+              relateType: "", //关联方式
+              isShow: false, //是否显示
+            };
+          });
+          // this.queryContionTableData = val.map((item) => {
+          //   return {
+          //     tableName: this.mainTableName,
+          //     fieldName: item.fieldName,
+          //     fieldDescription: item.fieldDescription,
+          //     value: "",
+          //     operator: "eq",
+          //     type: "0",
+          //   };
+          // });
+        }
+      },
+
+      deep: true,
+      immediate: true,
+    },
+  },
+  methods: {
+    changeType(row) {
+      row.value = "#{userID}";
+    },
+    // 查询条件变化回调
+    // changeContionField(row) {
+    //   row.fieldDescription = this.mainTableFieldOptions.find(
+    //     (item) => item.fieldName == row.fieldName
+    //   )?.fieldDescription;
+    // },
+    // 添加查询条件回调
+    addContionHandler() {
+      if (!this.listQueryData.mainForm.mainTableName) {
+        this.$message.error("请先选择主表");
+        return;
+      }
+      this.queryContionTableData.push({
+        tableName: this.listQueryData.mainForm.mainTableName,
+        fieldName: "",
+        fieldDescription: "",
+        value: "",
+        operator: "=",
+        type: 0,
+      });
+    },
+    // 保存字段配置回调
+    onSaveAttibute() {
+      this.currentRow.columnAttibute = JSON.parse(
+        JSON.stringify(this.columnAttibute)
+      );
+      console.log(this.mainTableData);
+      this.$message.success("保存成功");
+      this.fieldEditOpen = false;
+    },
+    // 字段配置回调
+    fieldEditHandler(row, index) {
+      if (Object.keys(row.columnAttibute || {}).length) {
+        this.columnAttibute = JSON.parse(JSON.stringify(row.columnAttibute));
+      } else {
+        Object.assign(this.columnAttibute, {
+          isDateColumn: false,
+          dateFormat: "yyyy-MM-dd",
+          isShow: false,
+        });
+      }
+      this.currentRow = row;
+      this.fieldEditOpen = true;
+    },
+    //处理表格行拖拽
+    initDragTable() {
+      const el = this.$refs.dragTable.$el.querySelectorAll(
+        ".el-table__body-wrapper > table > tbody"
+      )[0];
+      const sortable = Sortable.create(el, {
+        handle: ".allowDrag",
+        onEnd: (evt) => {
+          const targetRow = this.mainTableData.splice(evt.oldIndex, 1)[0];
+          this.mainTableData.splice(evt.newIndex, 0, targetRow);
+          for (let index in this.mainTableData) {
+            this.mainTableData[index].sort = parseInt(index) + 1;
+          }
+
+          this.$nextTick(() => {
+            this.$refs.dragTable.doLayout();
+          });
+        },
+      });
+    },
+    // 主表格改变回调
+    async mainTableChangeHandler(val) {
+      if (val) {
+        this.mainTableFieldOptions = await this.getFieldOptions(val);
+        this.listQueryData.mainForm.table_name_des = this.tableList.find(
+          (item) => {
+            return item.tableName == val;
+          }
+        );
+      }
+    },
+    // 开始编辑查询条件
+    editQueryHandler() {
+      this.editOpen = true;
+      this.$nextTick(() => {
+        this.initDragTable();
+      });
+    },
+    confirmHandler() {
+      let res = {};
+      let { mainTableName, table_name_des, tablePrimaryKey, sortFieldName } =
+        this.listQueryData.mainForm;
+      res.table_name_des = table_name_des;
+      res.isSingleTable = this.listQueryData.isSingleTable;
+      // 表数据  目前单表
+      res.table_names = [
+        {
+          tableName: mainTableName,
+          asName: mainTableName,
+          isMain: true,
+        },
+      ];
+      // 展示描述
+      res.table_column_name = [];
+      res.table_column_desc = [];
+      this.mainTableData.forEach((item, index) => {
+        let nameItem = {},
+          descItem = {};
+        let { tableName, fieldName, fieldDescription, columnAttibute } = item;
+        nameItem = {
+          tbname: tableName,
+          fieldName: fieldName,
+          fieldAsName: camelCase(tableName + "_" + fieldName),
+          field_des: fieldDescription,
+          column_attribute: {
+            isDateColumn: columnAttibute?.isDateColumn
+              ? columnAttibute?.isDateColumn
+              : false,
+            dateFormat: columnAttibute?.dateFormat
+              ? columnAttibute?.dateFormat
+              : "",
+            isShow: columnAttibute?.isShow ? columnAttibute?.isShow : false,
+          },
+        };
+        descItem = {
+          column: camelCase(tableName + "_" + fieldName),
+          columnDes: fieldDescription,
+          columnSort: index + 1,
+        };
+        res.table_column_name.push(nameItem);
+        res.table_column_desc.push(descItem);
+      });
+      // 查询条件
+      res.table_query_condition = this.queryContionTableData.map((item) => {
+        let { fieldName, tableName, value, operator, type } = item;
+        return {
+          fieldName: tableName + "." + fieldName,
+          value,
+          operator,
+          type,
+        };
+      });
+      // 排序
+      res.tablelistSort = {
+        DataSort:
+          this.listQueryData.mainForm.mainTableName +
+          "." +
+          this.listQueryData.mainForm.sortFieldName,
+        DataSortType: this.listQueryData.mainForm.sortType,
+      };
+      console.log(res);
+      this.datas.jsonData.listData = res;
+      console.log(this.datas);
+      // this.editOpen = false;
+    },
+    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) {
+      let data = {
+        databaseName: this.databaseName,
+        databaseType: this.databaseType,
+        tableName: value,
+      };
+      try {
+        let res = await getListName(data);
+        return res;
+      } catch (error) {
+        this.$message.error("网络异常,请稍后再试");
+      }
+    },
+  },
+  computed: {
+    ...mapState({
+      databaseName: (state) => state.user.dataSource.databaseName,
+      databaseType: (state) => state.user.dataSource.databaseType,
+    }),
+    columns() {
+      if (this.listQueryData.isSingleTable == 0) {
+        //单表
+        return [];
+      } else {
+        //多表
+        return [
+          {
+            prop: "relateTableName",
+            label: "关联表",
+          },
+          {
+            prop: "relateFieldName",
+            label: "关联字段",
+          },
+          {
+            prop: "relateType",
+            label: "关联方式",
+          },
+        ];
+      }
+    },
+  },
+};
+</script>
+
+<style scoped lang="scss">
+::v-deep .el-dialog {
+  top: 0 !important;
+}
+.notecardstyle {
+  width: 100%;
+  position: absolute;
+  left: 0;
+  top: 0;
+  padding: 0 10px 20px;
+  box-sizing: border-box;
+
+  /* 标题 */
+  h2 {
+    padding: 24px 16px 24px 0;
+    margin-bottom: 15px;
+    border-bottom: 1px solid #f2f4f6;
+    font-size: 18px;
+    font-weight: 600;
+    color: #323233;
+  }
+  /* 图片样式 */
+  .weiz {
+    display: flex;
+    justify-content: space-between;
+    i {
+      padding: 5px 14px;
+      margin-left: 10px;
+      border-radius: 0;
+      border: 1px solid #ebedf0;
+      font-size: 20px;
+      font-weight: 500;
+      cursor: pointer;
+
+      &:last-child {
+        font-size: 22px;
+      }
+
+      &.active {
+        color: #155bd4;
+        border: 1px solid #155bd4;
+        background: #e0edff;
+      }
+    }
+  }
+
+  .lef {
+    ::v-deep.el-form-item__label {
+      text-align: left;
+    }
+  }
+
+  /* 列表样式 */
+  .commodityType {
+    display: flex;
+    justify-content: space-around;
+    align-items: center;
+    span {
+      display: inline-block;
+      width: 58px;
+      height: 32px;
+      text-align: center;
+      line-height: 32px;
+      background: #fff;
+      border: 1px solid #ebedf0;
+      color: #979797;
+      margin: 0 1px;
+      cursor: pointer;
+      transition: all 0.5s;
+
+      &:hover {
+        border: 1px solid #155bd4;
+        color: #155bd4;
+      }
+
+      &.active {
+        border: 1px solid #155bd4;
+        background-color: #e0edff;
+        color: #155bd4;
+      }
+    }
+  }
+
+  /* 卡片样式 */
+  .moditystyle {
+    font-size: 12px;
+    width: 100%;
+    display: flex;
+    span {
+      width: 86px;
+      height: 32px;
+      display: inline-block;
+      text-align: center;
+      line-height: 32px;
+      cursor: pointer;
+      border: 1px solid #ebedf0;
+      &.active {
+        border: 1px solid #155bd4;
+        background-color: #e0edff;
+        color: #155bd4;
+      }
+    }
+  }
+}
+</style>

zkqy-ui/src/views/asEditor/components/sliderassembly/index.vue

@@ -16,7 +16,7 @@
           v-for="(item, ind) in items.comList"
           :key="ind"
         >
-          <i class="iconfont" :class="item.icon"  v-if="item.icon" />
+          <i class="iconfont" :class="item.icon" v-if="item.icon" />
           <van-icon :name="item.vanIcon" v-else />
           <p>{{ item.text }}</p>
         </div>
@@ -26,104 +26,128 @@
 </template>
 
 <script>
-import { Icon } from 'vant'
+import { Icon } from "vant";
 export default {
-  name: 'sliderassembly',
+  name: "sliderassembly",
   props: {
     pointer: Object,
   },
   components: {
-    [Icon.name]: Icon
+    [Icon.name]: Icon,
   },
   data() {
     return {
       activeNames: [1, 2, 3] /* 侧边栏组件显示 */,
       datas: [
         {
-          title: '基础组件',
+          title: "基础组件",
           comList: [
             {
-              text: '搜索',
-              type: '1-1',
-              icon: 'icon-shangpinsousuo',
-              name: 'commoditysearch',
+              text: "表单模块",
+              type: "1-1",
+              vanIcon: "orders-o",
+              name: "investigate",
             },
+            // {
+            //   text: '卡片',
+            //   type: '1-2',
+            //   icon: 'icon-dianpubijikapian',
+            //   name: 'notecard',
+            // },
             {
-              text: '标题文本',
-              type: '1-3',
-              icon: 'icon-Component-biaotiwenzi',
-              name: 'captiontext',
+              text: "查询列表",
+              type: "1-17",
+              icon: "icon-dianpubijikapian",
+              name: "notecard",
+            },
+            {
+              text: "搜索",
+              type: "1-3",
+              icon: "icon-shangpinsousuo",
+              name: "commoditysearch",
+            },
+            {
+              text: "标题文本",
+              type: "1-4",
+              icon: "icon-Component-biaotiwenzi",
+              name: "captiontext",
             },
 
             {
-              text: '图片广告',
-              type: '1-3',
-              icon: 'icon-tupianguanggao',
-              name: 'pictureads',
+              text: "图片广告",
+              type: "1-5",
+              icon: "icon-tupianguanggao",
+              name: "pictureads",
             },
             {
-              text: '图文导航',
-              type: '1-4',
-              icon: 'icon-icon_tupiandaohang',
-              name: 'graphicnavigation',
+              text: "图文导航",
+              type: "1-6",
+              icon: "icon-icon_tupiandaohang",
+              name: "graphicnavigation",
             },
             {
-              text: '底部导航',
-              type: '1-5',
-              icon: 'icon-daohang',
-              name: 'tabBar',
+              text: "底部导航",
+              type: "1-7",
+              icon: "icon-daohang",
+              name: "tabBar",
             },
             {
-              text: '魔方',
-              type: '1-6',
-              icon: 'icon-mofang',
-              name: 'magiccube',
+              text: "魔方",
+              type: "1-8",
+              icon: "icon-mofang",
+              name: "magiccube",
             },
             {
-              text: '公告',
-              type: '1-7',
-              icon: 'icon-gonggao',
-              name: 'notice',
+              text: "公告",
+              type: "1-9",
+              icon: "icon-gonggao",
+              name: "notice",
             },
-            
+
             {
-              text: '视频',
-              type: '1-8',
-              icon: 'icon-shipin',
-              name: 'videoss',
+              text: "视频",
+              type: "1-10",
+              icon: "icon-shipin",
+              name: "videoss",
             },
-            /* {
-              text: '富文本',
-              type: '1-10',
-              icon: 'icon-fuwenben',
-              name: 'richtext',
-            }, */
             {
-              text: '辅助分割',
-              type: '1-11',
-              icon: 'icon-Component-fuzhufenge',
-              name: 'auxiliarysegmentation',
+              text: "辅助分割",
+              type: "1-11",
+              icon: "icon-Component-fuzhufenge",
+              name: "auxiliarysegmentation",
             },
 
             {
-              text: '信息介绍',
-              type: '1-12',
-              icon: 'icon-dianpuxinxi',
-              name: 'storeinformation',
+              text: "信息介绍",
+              type: "1-12",
+              icon: "icon-dianpuxinxi",
+              name: "storeinformation",
             },
             {
-              text: '单元格',
-              type: '1-13',
-              icon: 'icon-jinrudianpu',
-              name: 'entertheshop',
-            },  
+              text: "单元格",
+              type: "1-13",
+              icon: "icon-jinrudianpu",
+              name: "entertheshop",
+            },
             {
-              text: '表单模块',
-              type: '2-3',
-              vanIcon: 'orders-o',
-              name: 'investigate',
-            },          
-           /*  {
+              text: "悬浮",
+              type: "1-14",
+              icon: "icon-wangye",
+              name: "suspension",
+            },
+            {
+              text: "自定义模块",
+              type: "demo",
+              icon: "icon-zidingyimokuai",
+              name: "custommodule",
+            },
+            /* {
+              text: '富文本',
+              type: '1-10',
+              icon: 'icon-fuwenben',
+              name: 'richtext',
+            }, */
+            /*  {
               text: '社群涨粉',
               type: '1-14',
               icon: 'icon-kuaisuzhangfen',
@@ -147,18 +171,12 @@ export default {
               icon: 'icon-gongzhonghao',
               name: 'follow',
             }, */
-            {
-              text: '悬浮',
-              type: '1-16',
-              icon: 'icon-wangye',
-              name: 'suspension',
-            },
-            {
-              text: '自定义模块',
-              type: 'demo',
-              icon: 'icon-zidingyimokuai',
-              name: 'custommodule'
-            }, 
+            /* {
+              text: '文章模块',
+              type: '1-2',
+              icon: 'icon-dianpubijikapian',
+              name: 'storenotecard',
+            },      */
           ],
         },
         /* {
@@ -184,9 +202,8 @@ export default {
             }
           ]
         }, */
-
       ],
-    }
+    };
   },
   methods: {
     /**
@@ -196,9 +213,9 @@ export default {
      */
     drag(event) {
       /* 开启穿透 */
-      this.pointer.show = true
+      this.pointer.show = true;
       /* 传递参数 */
-      event.dataTransfer.setData('componentName', event.target.dataset.name)
+      event.dataTransfer.setData("componentName", event.target.dataset.name);
     },
 
     /**
@@ -208,10 +225,10 @@ export default {
      */
     dragends() {
       /* 关闭穿透 */
-      this.pointer.show = false
+      this.pointer.show = false;
     },
   },
-}
+};
 </script>
 
 <style scoped lang="scss">

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

@@ -209,6 +209,7 @@ import notice from "../../components/componentscom/notice/index.vue";
 import noticestyle from "../../components/rightslider/noticestyle/index.vue";
 import videoss from "../../components/componentscom/videoss/index.vue";
 import videostyle from "../../components/rightslider/videostyle/index.vue";
+import queryListStyle from "../../components/rightslider/queryListStyle/index.vue";
 // import richtext from '../../components/componentscom/richtext/index.vue'
 // import richtextstyle from '../../components/rightslider/richtextstyle/index.vue'
 import auxiliarysegmentation from "../../components/componentscom/auxiliarysegmentation/index.vue";
@@ -231,6 +232,8 @@ import storenotecard from "../../components/componentscom/storenotecard/index.vu
 import storenotecardstyle from "../../components/rightslider/storenotecardstyle/index.vue";
 import investigate from "../../components/componentscom/investigate/index.vue";
 import investigatestyle from "../../components/rightslider/investigatestyle/index.vue";
+import notecard from "../../components/componentscom/notecard/index.vue";
+import notecardstyle from "../../components/rightslider/notecardstyle/index.vue";
 
 import Editor from "@tinymce/tinymce-vue";
 
@@ -287,8 +290,11 @@ export default {
     storenotecardstyle,
     investigate,
     investigatestyle,
+    queryListStyle,
     editor: Editor,
     myRealTimeView,
+    notecard,
+    notecardstyle,
   },
 
   inject: {
@@ -338,7 +344,7 @@ export default {
   mounted() {
     this.pageSetup.name = "页面标题";
     this.currentproperties = this.pageSetup;
-    console.log(this.$route.query.id);
+    // console.log(this.$route.query.id);
 
     if (this.$route.query.id) {
       this.isEdit = true;
@@ -835,15 +841,15 @@ export default {
      */
     drop(event) {
       /* 获取数据 */
-      console.log(event.dataTransfer.getData("componentName"));
+      // console.log(event.dataTransfer.getData("componentName"));
       let data = utils.deepClone(
         componentProperties.get(event.dataTransfer.getData("componentName"))
       );
-      console.log(data);
+      // console.log(data);
       // 添加自定义属性
       data.componentKey = uuidv4().slice(0, 8);
       data.setStyle.componentKey = data.componentKey;
-      console.log(data);
+      // console.log(data);
       // 添加自定义属性
       /* 查询是否只能存在一个的组件且在第一个 */
       let someOne = this.pageComponents.some((item, index) => {

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

@@ -3,10 +3,85 @@ const componentProperties = new Map()
 // 数据版本  每次修改组件数据  需要对版本进行修改
 // componentProperties.set('componentPropertiesVersion', 'V1.0.0')
 
+componentProperties.set('investigate', {
+  component: 'investigate',
+  text: '表单模块',
+  type: '1-1',
+  active: true,
+  style: 'investigatestyle',
+  setStyle: {
+    tableName: '',
+    toPage: '',
+    text: '表单模块',
+    title: '表单模块',
+    jsonData: [], //value1为sass显示内容，value2为前端显示内容
+  },
+})
+
+componentProperties.set('notecard', {
+  component: 'notecard',
+  text: '查询列表',
+  type: '1-17',
+  active: true,
+  style: 'queryListStyle',
+  setStyle: {
+    tableName: '',
+    fieldName: '',
+    heights: 28, //搜索栏高度
+    position: 0, //显示位置
+    sweep: false, // 显示扫一扫
+    borderRadius1: 0, //框体样式
+    textPosition: 0, //文本位置
+    backgroundColor: 'rgb(249, 249, 249)', //背景颜色
+    borderColor: 'rgb(255, 255, 255)', //框体颜色
+    textColor: 'rgb(150, 151, 153)', //字体颜色
+    hotords: [], //热词
+    jsonData: [], //value1为sass显示内容，value2为前端显示内容
+
+    text: '查询列表',
+    name: '这里显示卡片名称', //专题名称
+    commodityType: 0, // 选择模板
+    moditystyle: 0, // 卡片样式选择
+    borderRadius: 0, // 图片边角
+    textWeight: 400, // 标题粗细
+    noteLabels: true, // 笔记标签
+    readingNumber: true, // 阅读数
+    praisePoints: true, //点赞数
+    imageList: [],
+    positions: 'bottom', //标题位置
+    linktype: '10',
+    http: {},
+  },
+})
+
+componentProperties.set('commoditysearch', {
+  component: 'commoditysearch',
+  text: '搜索',
+  type: '1-3',
+  active: true,
+  style: 'commoditysearchstyle',
+  setStyle: {
+    tableName: '',
+    fieldName: '',
+    text: '搜索',
+    heights: 28, //搜索栏高度
+    position: 0, //显示位置
+    sweep: false, // 显示扫一扫
+    borderRadius: 0, //框体样式
+    textPosition: 0, //文本位置
+    backgroundColor: 'rgb(249, 249, 249)', //背景颜色
+    borderColor: 'rgb(255, 255, 255)', //框体颜色
+    textColor: 'rgb(150, 151, 153)', //字体颜色
+    hotords: [], //热词
+    jsonData: [], //value1为sass显示内容，value2为前端显示内容
+
+  },
+})
+
 componentProperties.set('captiontext', {
   component: 'captiontext',
   text: '标题文字',
-  type: '1-3',
+  type: '1-4',
   active: true,
   style: 'captiontextsstyle',
   setStyle: {
@@ -34,53 +109,10 @@ componentProperties.set('captiontext', {
   },
 })
 
-componentProperties.set('listswitching', {
-  component: 'listswitching',
-  text: '商品',
-  type: '2-1',
-  active: true,
-  style: 'listswitchingstyle',
-  setStyle: {
-    toPage: '',
-    text: '商品',
-    commodityType: 0,
-    moditystyle: 0,
-    borderRadius: 0,
-    pageMargin: 15,
-    commodityMargin: 10,
-    textWeight: 400,
-    positions: 'left',
-    priceofcommodity: true,
-    purchasebutton: true,
-    commoditycorner: true,
-    purchasebuttonType: 0,
-    commoditycornertype: 0,
-    commodityTagColor: '#07c160',
-    tagPosition: 0,
-    imageList: [],
-    purchase: '马上抢',
-    commoditylisttype: 0,
-    commoditylisttypetab: [
-      {
-        text: '分组',
-        imageList: [],
-      },
-      {
-        text: '分组',
-        imageList: [],
-      },
-    ],
-    tabColor: '#f39800',
-    showMore: false,
-    moreUrl: null,
-    bgImg: '',
-  },
-})
-
 componentProperties.set('pictureads', {
   component: 'pictureads',
   text: '图片广告',
-  type: '1-3',
+  type: '1-5',
   active: true,
   style: 'pictureadsstyle',
   setStyle: {
@@ -99,7 +131,7 @@ componentProperties.set('pictureads', {
 componentProperties.set('graphicnavigation', {
   component: 'graphicnavigation',
   text: '图文导航',
-  type: '1-4',
+  type: '1-6',
   active: true,
   style: 'graphicnavigationstyle',
   setStyle: {
@@ -118,24 +150,30 @@ componentProperties.set('graphicnavigation', {
   },
 })
 
-componentProperties.set('richtext', {
-  component: 'richtext',
-  text: '富文本',
-  type: '1-10',
+componentProperties.set('tabBar', {
+  component: 'tabBar',
+  text: '底部导航',
+  type: '1-7',
   active: true,
-  style: 'richtextstyle',
+  style: 'tabBarStyle',
   setStyle: {
     toPage: '',
-    text: '富文本',
-    myValue: '', //富文本内容
-    backColor: 'rgb(249, 249, 249)', //背景颜色
+    text: '底部导航',
+    activeColor: '#1989fa',
+    inactiveColor: '#7d7e80',
+    isShowBorder: true,
+    iconWidth: '25',
+    iconHeight: '25',
+    fontSize: '14',
+    Highlight: 0,
+    iconList: [],
   },
 })
 
 componentProperties.set('magiccube', {
   component: 'magiccube',
   text: '魔方',
-  type: '1-6',
+  type: '1-8',
   active: true,
   style: 'magiccubestyle',
   setStyle: {
@@ -174,6 +212,37 @@ componentProperties.set('magiccube', {
   },
 })
 
+componentProperties.set('notice', {
+  component: 'notice',
+  text: '公告',
+  type: '1-9',
+  active: true,
+  style: 'noticestyle',
+  setStyle: {
+    toPage: '',
+    toPage: '',
+    text: '公告',
+    noticeText: '请填写内容，如果过长，将会在手机上滚动显示', //内容
+    backColor: 'rgb(255, 248, 233)', //背景颜色
+    textColor: 'rgba(100, 101, 102)', //文字颜色
+  },
+})
+
+componentProperties.set('videoss', {
+  component: 'videoss',
+  text: '视频',
+  type: '1-10',
+  active: true,
+  style: 'videostyle',
+  setStyle: {
+    toPage: '',
+    text: '视频',
+    src: 'http://clips.vorwaerts-gmbh.de/big_buck_bunny.mp4', // 视频地址
+    coverUrl: null, // 封面地址
+    autoplay: false, // 是否自动播放
+  },
+})
+
 componentProperties.set('auxiliarysegmentation', {
   component: 'auxiliarysegmentation',
   text: '辅助分割',
@@ -191,27 +260,6 @@ componentProperties.set('auxiliarysegmentation', {
   },
 })
 
-componentProperties.set('commoditysearch', {
-  component: 'commoditysearch',
-  text: '搜索',
-  type: '1-1',
-  active: true,
-  style: 'commoditysearchstyle',
-  setStyle: {
-    toPage: '',
-    text: '搜索',
-    heights: 28, //搜索栏高度
-    position: 0, //显示位置
-    sweep: false, // 显示扫一扫
-    borderRadius: 0, //框体样式
-    textPosition: 0, //文本位置
-    backgroundColor: 'rgb(249, 249, 249)', //背景颜色
-    borderColor: 'rgb(255, 255, 255)', //框体颜色
-    textColor: 'rgb(150, 151, 153)', //字体颜色
-    hotords: [], //热词
-  },
-})
-
 componentProperties.set('storeinformation', {
   component: 'storeinformation',
   text: '信息',
@@ -246,34 +294,17 @@ componentProperties.set('entertheshop', {
   },
 })
 
-componentProperties.set('notice', {
-  component: 'notice',
-  text: '公告',
-  type: '1-7',
-  active: true,
-  style: 'noticestyle',
-  setStyle: {
-    toPage: '',
-    toPage: '',
-    text: '公告',
-    noticeText: '请填写内容，如果过长，将会在手机上滚动显示', //内容
-    backColor: 'rgb(255, 248, 233)', //背景颜色
-    textColor: 'rgba(100, 101, 102)', //文字颜色
-  },
-})
-
-componentProperties.set('videoss', {
-  component: 'videoss',
-  text: '视频',
-  type: '1-8',
+componentProperties.set('suspension', {
+  component: 'suspension',
+  text: '悬浮按钮',
+  type: '1-14',
   active: true,
-  style: 'videostyle',
+  style: 'suspensionstyle',
   setStyle: {
     toPage: '',
-    text: '视频',
-    src: 'http://clips.vorwaerts-gmbh.de/big_buck_bunny.mp4', // 视频地址
-    coverUrl:null, // 封面地址
-    autoplay: false, // 是否自动播放
+    text: '悬浮按钮',
+    linktype: '10',
+    http: {},
   },
 })
 
@@ -286,8 +317,24 @@ componentProperties.set('custommodule', {
   setStyle: {
     toPage: '',
     text: '自定义模块',
-    demo:'自定义内容',
-    img:'https://img2.baidu.com/it/u=1905875968,4289754134&fm=26&fmt=auto&gp=0.jpg'
+    demo: '自定义内容',
+    img: 'https://img2.baidu.com/it/u=1905875968,4289754134&fm=26&fmt=auto&gp=0.jpg'
+  },
+})
+
+
+
+componentProperties.set('richtext', {
+  component: 'richtext',
+  text: '富文本',
+  type: '1-10',
+  active: true,
+  style: 'richtextstyle',
+  setStyle: {
+    toPage: '',
+    text: '富文本',
+    myValue: '', //富文本内容
+    backColor: 'rgb(249, 249, 249)', //背景颜色
   },
 })
 
@@ -309,32 +356,6 @@ componentProperties.set('communitypowder', {
   },
 })
 
-componentProperties.set('storenotecard', {
-  component: 'storenotecard',
-  text: '文章模块',
-  type: '2-2',
-  active: true,
-  style: 'storenotecardstyle',
-  setStyle: {
-    toPage: '',
-    text: '文章模块',
-    name: '这里显示专题名称', //专题名称
-    commodityType: 0, // 选择模板
-    moditystyle: 0, // 卡片样式选择
-    borderRadius: 0, // 图片边角
-    textWeight: 400, // 标题粗细
-    noteLabels: true, // 笔记标签
-    readingNumber: true, // 阅读数
-    praisePoints: true, //点赞数
-    viewMore1: true, //更多1
-    viewMore2: true, //更多2
-    imageList: [],
-    positions: 'bottom', //标题位置
-    linktype: '10',
-    http: {},
-  },
-})
-
 componentProperties.set('crowdoperation', {
   component: 'crowdoperation',
   text: '人群运营',
@@ -371,41 +392,6 @@ componentProperties.set('onlineservice', {
   },
 })
 
-componentProperties.set('investigate', {
-  component: 'investigate',
-  text: '表单模块',
-  type: '2-3',
-  active: true,
-  style: 'investigatestyle',
-  setStyle: {
-    tableName: '',
-    toPage: '',
-    text: '表单模块',
-    title: '表单模块',
-    jsonData: [], //value1为sass显示内容，value2为前端显示内容
-  },
-})
-
-componentProperties.set('tabBar', {
-  component: 'tabBar',
-  text: '底部导航',
-  type: '1-5',
-  active: true,
-  style: 'tabBarStyle',
-  setStyle: {
-    toPage: '',
-    text: '底部导航',
-    activeColor: '#1989fa',
-    inactiveColor: '#7d7e80',
-    isShowBorder: true,
-    iconWidth: '25',
-    iconHeight: '25',
-    fontSize: '14',
-    Highlight: 0,
-    iconList: [],
-  },
-})
-
 componentProperties.set('follow', {
   component: 'follow',
   text: '关注公众号',
@@ -421,18 +407,73 @@ componentProperties.set('follow', {
   },
 })
 
-componentProperties.set('suspension', {
-  component: 'suspension',
-  text: '悬浮按钮',
-  type: '1-16',
+componentProperties.set('storenotecard', {
+  component: 'storenotecard',
+  text: '文章模块',
+  type: '1-2',
   active: true,
-  style: 'suspensionstyle',
+  style: 'storenotecardstyle',
   setStyle: {
     toPage: '',
-    text: '悬浮按钮',
+    text: '文章模块',
+    name: '这里显示专题名称', //专题名称
+    commodityType: 0, // 选择模板
+    moditystyle: 0, // 卡片样式选择
+    borderRadius: 0, // 图片边角
+    textWeight: 400, // 标题粗细
+    noteLabels: true, // 笔记标签
+    readingNumber: true, // 阅读数
+    praisePoints: true, //点赞数
+    viewMore1: true, //更多1
+    viewMore2: true, //更多2
+    imageList: [],
+    positions: 'bottom', //标题位置
     linktype: '10',
     http: {},
   },
 })
 
+componentProperties.set('listswitching', {
+  component: 'listswitching',
+  text: '商品',
+  type: '2-1',
+  active: true,
+  style: 'listswitchingstyle',
+  setStyle: {
+    toPage: '',
+    text: '商品',
+    commodityType: 0,
+    moditystyle: 0,
+    borderRadius: 0,
+    pageMargin: 15,
+    commodityMargin: 10,
+    textWeight: 400,
+    positions: 'left',
+    priceofcommodity: true,
+    purchasebutton: true,
+    commoditycorner: true,
+    purchasebuttonType: 0,
+    commoditycornertype: 0,
+    commodityTagColor: '#07c160',
+    tagPosition: 0,
+    imageList: [],
+    purchase: '马上抢',
+    commoditylisttype: 0,
+    commoditylisttypetab: [
+      {
+        text: '分组',
+        imageList: [],
+      },
+      {
+        text: '分组',
+        imageList: [],
+      },
+    ],
+    tabColor: '#f39800',
+    showMore: false,
+    moreUrl: null,
+    bgImg: '',
+  },
+})
+
 export default componentProperties

zkqy-ui/src/views/system/excuteBtnMange/index.vue

@@ -1509,6 +1509,7 @@ export default {
         btnSort: 0, //按钮顺序
         btnKey: "",
       };
+      this.conditionData = [];
       this.commonFieldData = [];
       this.btnHidenCondtionData = [];
       this.resetForm("btnGroupFormRef");