移动端页面列表数据配置接口数据收集

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,115 +26,121 @@
 </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',
-              vanIcon: 'orders-o',
-              name: 'investigate',
-            },    
+              text: "表单模块",
+              type: "1-1",
+              vanIcon: "orders-o",
+              name: "investigate",
+            },
+            // {
+            //   text: '卡片',
+            //   type: '1-2',
+            //   icon: 'icon-dianpubijikapian',
+            //   name: 'notecard',
+            // },
             {
-              text: '卡片',
-              type: '1-2',
-              icon: 'icon-dianpubijikapian',
-              name: 'notecard',
-            },       
+              text: "查询列表",
+              type: "1-17",
+              icon: "icon-dianpubijikapian",
+              name: "notecard",
+            },
             {
-              text: '搜索',
-              type: '1-3',
-              icon: 'icon-shangpinsousuo',
-              name: 'commoditysearch',
+              text: "搜索",
+              type: "1-3",
+              icon: "icon-shangpinsousuo",
+              name: "commoditysearch",
             },
             {
-              text: '标题文本',
-              type: '1-4',
-              icon: 'icon-Component-biaotiwenzi',
-              name: 'captiontext',
+              text: "标题文本",
+              type: "1-4",
+              icon: "icon-Component-biaotiwenzi",
+              name: "captiontext",
             },
 
             {
-              text: '图片广告',
-              type: '1-5',
-              icon: 'icon-tupianguanggao',
-              name: 'pictureads',
+              text: "图片广告",
+              type: "1-5",
+              icon: "icon-tupianguanggao",
+              name: "pictureads",
             },
             {
-              text: '图文导航',
-              type: '1-6',
-              icon: 'icon-icon_tupiandaohang',
-              name: 'graphicnavigation',
+              text: "图文导航",
+              type: "1-6",
+              icon: "icon-icon_tupiandaohang",
+              name: "graphicnavigation",
             },
             {
-              text: '底部导航',
-              type: '1-7',
-              icon: 'icon-daohang',
-              name: 'tabBar',
+              text: "底部导航",
+              type: "1-7",
+              icon: "icon-daohang",
+              name: "tabBar",
             },
             {
-              text: '魔方',
-              type: '1-8',
-              icon: 'icon-mofang',
-              name: 'magiccube',
+              text: "魔方",
+              type: "1-8",
+              icon: "icon-mofang",
+              name: "magiccube",
             },
             {
-              text: '公告',
-              type: '1-9',
-              icon: 'icon-gonggao',
-              name: 'notice',
+              text: "公告",
+              type: "1-9",
+              icon: "icon-gonggao",
+              name: "notice",
             },
-            
+
             {
-              text: '视频',
-              type: '1-10',
-              icon: 'icon-shipin',
-              name: 'videoss',
+              text: "视频",
+              type: "1-10",
+              icon: "icon-shipin",
+              name: "videoss",
             },
             {
-              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: '1-14',
-              icon: 'icon-wangye',
-              name: 'suspension',
+              text: "悬浮",
+              type: "1-14",
+              icon: "icon-wangye",
+              name: "suspension",
             },
             {
-              text: '自定义模块',
-              type: 'demo',
-              icon: 'icon-zidingyimokuai',
-              name: 'custommodule'
-            }, 
+              text: "自定义模块",
+              type: "demo",
+              icon: "icon-zidingyimokuai",
+              name: "custommodule",
+            },
             /* {
               text: '富文本',
               type: '1-10',
@@ -170,7 +176,7 @@ export default {
               type: '1-2',
               icon: 'icon-dianpubijikapian',
               name: 'storenotecard',
-            },      */ 
+            },      */
           ],
         },
         /* {
@@ -196,9 +202,8 @@ export default {
             }
           ]
         }, */
-
       ],
-    }
+    };
   },
   methods: {
     /**
@@ -208,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);
     },
 
     /**
@@ -220,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";
@@ -289,10 +290,11 @@ export default {
     storenotecardstyle,
     investigate,
     investigatestyle,
+    queryListStyle,
     editor: Editor,
     myRealTimeView,
     notecard,
-    notecardstyle
+    notecardstyle,
   },
 
   inject: {

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

@@ -20,10 +20,10 @@ componentProperties.set('investigate', {
 
 componentProperties.set('notecard', {
   component: 'notecard',
-  text: '卡片',
-  type: '1-2',
+  text: '查询列表',
+  type: '1-17',
   active: true,
-  style: 'notecardstyle',
+  style: 'queryListStyle',
   setStyle: {
     tableName: '',
     fieldName: '',
@@ -38,7 +38,7 @@ componentProperties.set('notecard', {
     hotords: [], //热词
     jsonData: [], //value1为sass显示内容，value2为前端显示内容
 
-    text: '卡片模块',
+    text: '查询列表',
     name: '这里显示卡片名称', //专题名称
     commodityType: 0, // 选择模板
     moditystyle: 0, // 卡片样式选择
@@ -238,7 +238,7 @@ componentProperties.set('videoss', {
     toPage: '',
     text: '视频',
     src: 'http://clips.vorwaerts-gmbh.de/big_buck_bunny.mp4', // 视频地址
-    coverUrl:null, // 封面地址
+    coverUrl: null, // 封面地址
     autoplay: false, // 是否自动播放
   },
 })
@@ -317,8 +317,8 @@ 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'
   },
 })