Ver código fonte

代码提交

zyz 1 ano atrás
pai
commit
c607761bd8

+ 10 - 0
zkqy-ui/src/api/asEditor/index.js

@@ -55,4 +55,14 @@ export function setAsHomePage(data) {
     data: data,
     baseURL: process.env.VUE_APP_BASE_API3,
   })
+}
+
+// 上传图片
+export function sendImg(data) {
+  return request({
+    url: '/common/uploads',
+    method: 'post',
+    data: data,
+    baseURL: process.env.VUE_APP_BASE_API5,
+  })
 }

+ 18 - 0
zkqy-ui/src/views/asEditor/components/componentscom/graphicnavigation/index.vue

@@ -3,6 +3,24 @@
     class="graphicnavigation"
     :style="{ backgroundImage: 'url(' + datas.bgImg + ')' }"
   >
+    <!-- 标题 -->
+    <h2
+      :style="{
+        'font-size': datas.wordSize + 'px',
+        'font-weight': datas.wordWeight,
+        color: datas.wordColor,
+        'text-align': datas.positions,
+        height: datas.wordHeight + 'px',
+        'line-height': datas.wordHeight + 'px',
+        'padding-right': !(datas.positions !== 'center')
+          ? '0'
+          : '60px',
+      }"
+      v-if="datas.name"
+    >
+      {{ datas.name }}
+    </h2>
+
     <!-- 默认导航 -->
     <section
       class="defaultNavigation"

+ 53 - 2
zkqy-ui/src/views/asEditor/components/rightslider/graphicnavigationstyle/index.vue

@@ -8,6 +8,17 @@
       拖动选中的导航可对其排序
     </p>
 
+     <!-- 标题内容 -->
+     <div label="标题内容">
+      <el-input
+        v-model="datas.name"
+        placeholder="请输入标题"
+        show-word-limit
+      />
+  </div>
+
+    <div style="height: 10px" />
+
     <!-- 图片广告 -->
     <div v-if="datas.imageList[0]">
       <vuedraggable v-model="datas.imageList" v-bind="dragOptions">
@@ -55,6 +66,25 @@
                 >
                 </el-input>
               </div>
+              <div class="select-topage">
+                <p>跳转页面</p>
+                <el-select v-model="item.pageId"  placeholder="请选择跳转页面">
+                  <el-option 
+                    v-for="item in dataList" 
+                    :key="item.index" 
+                    :label="`${item.id} - ${item.name}`" 
+                    :value="`${item.id} - ${item.name}`"
+                    
+                  >
+                  <span class="discribe" style="float: left">{{
+                    item.id
+                  }}</span>
+                  <span style="float: right; color: #8492a6; font-size: 13px">{{
+                    item.name
+                  }}</span>
+                  </el-option>
+                </el-select>
+              </div>
             </div>
           </section>
         </transition-group>
@@ -225,7 +255,7 @@
 <script>
 import uploadimg from '../../uploadImg' //图片上传
 import vuedraggable from 'vuedraggable' //拖拽组件
-
+import { listmobilePageData } from "@/api/asEditor/index.js";
 export default {
   name: 'graphicnavigationstyle',
   props: {
@@ -233,6 +263,8 @@ export default {
   },
   data() {
     return {
+      // 移动端数据表格数据
+      dataList: [],
       dragOptions: {
         //拖拽配置
         animation: 200,
@@ -272,8 +304,19 @@ export default {
     }
   },
   created() {
+    this.getList();
   },
   methods: {
+    // getPageData(data) {
+    //   console.log(data);
+    // },
+    getList() {
+      this.loading = true;
+      listmobilePageData(this.queryParams).then(response => {
+        this.dataList = response.rows;
+        console.log(this.dataList);
+      });
+    },
     showUpload(type) {
       this.uploadImgDataType = type
       this.$refs.upload.showUpload()
@@ -282,8 +325,8 @@ export default {
     uploadInformation(res) {
       if (this.uploadImgDataType === '0') {
         this.datas.imageList.push({
-          src: res,
           text: '',
+          src: res,
           http: {},
         })
       } else if (this.uploadImgDataType === '1') {
@@ -402,6 +445,14 @@ export default {
           }
         }
       }
+      .select-topage {
+        display: flex;
+        p {
+          padding-top: 8px;
+          padding-right: 15px;
+          padding-left: 2px;
+        }
+      }
     }
   }
 

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

@@ -493,7 +493,7 @@ export default {
     mainTableFieldOptions: {
       handler(val) {
         if (val.length) {
-          console.log(val);
+          // console.log(val);
           this.mainTableData = val.map((item, index) => {
             return {
               sort: parseInt(index) + 1,
@@ -581,14 +581,14 @@ export default {
       this.currentRow.column_attribute = JSON.parse(
         JSON.stringify(this.column_attribute)
       );
-      console.log(this.mainTableData);
+      // console.log(this.mainTableData);
       this.$message.success("保存成功");
       this.fieldEditOpen = false;
-      console.log(this.queryContionTableData);
+      // console.log(this.queryContionTableData);
     },
     // 字段配置回调
     fieldEditHandler(row, index) {
-      console.log(row);
+      // console.log(row);
       if (Object.keys(row.column_attribute || {}).length) {
         this.column_attribute = JSON.parse(
           JSON.stringify(row.column_attribute)
@@ -645,7 +645,7 @@ export default {
         let echoMessage = this.echoMessage;
         // 主表
         this.nameItem = JSON.parse(echoMessage.tableColumnName);
-        console.log(this.nameItem);
+        // console.log(this.nameItem);
         this.listQueryData.mainForm.mainTableName = this.nameItem[0].tbname;
         // 表格主键
         let tablelistSort = JSON.parse(echoMessage.tablelistSort);
@@ -696,10 +696,10 @@ export default {
       // 展示描述
       res.tableColumnName = [];
       res.tableColumnDesc = [];
-      console.log("this.mainTableData", this.mainTableData);
+      // console.log("this.mainTableData", this.mainTableData);
       this.mainTableData.forEach((item, index) => {
         // console.log('item', item);
-        let { tbname, fieldName, fieldDescription, column_attribute } = item;
+        let { tableName, fieldName, fieldDescription, column_attribute, tbname = tableName} = item;
         const columnAttributeString = JSON.stringify({
           isDateColumn: column_attribute?.isDateColumn
             ? column_attribute?.isDateColumn
@@ -739,9 +739,12 @@ export default {
       // this.tableQueryConditions.push(queryData)
       // console.log(this.tableQueryConditions);
       let queryDataArray = this.queryContionTableData.map((item) => {
+        
+        // console.log(item);
         let { fieldName, tableName, value, operator, type } = item;
+        const fieldNameValue = tableName ? `${tableName}.${fieldName}` : fieldName;
         return {
-          fieldName: fieldName,
+          fieldName: fieldNameValue,
           value: value,
           operator: operator,
           type: String(type),
@@ -767,10 +770,10 @@ export default {
       res.listMapValue = {};
       const key = this.datas.componentKey;
       res.listMapValue[key] = this.listQueryData.mainForm.mainTableName;
-      console.log(res);
+      // console.log(res);
       this.datas.jsonData.listData = res;
       this.$emit("data-list", this.datas.jsonData.listData);
-      console.log(this.datas);
+      // console.log(this.datas);
       this.editOpen = false;
     },
     async getAllTable() {

+ 39 - 6
zkqy-ui/src/views/asEditor/components/uploadImg/index.vue

@@ -18,8 +18,8 @@
         name="file"
         :action="baseupload"
         list-type="picture-card"
-        :limit="1"
-        :on-preview="preview"
+        :limit="1"  
+        :headers="headers"   
         :on-success="onSuccess"
         :with-credentials="true"
         :on-error="uploadError"
@@ -54,6 +54,9 @@
 
 <script>
 import { uploadCOS } from '../../utils/upload'
+import axios from 'axios';
+import { getToken } from "@/utils/auth";
+import { sendImg } from "@/api/asEditor/index.js";
 export default {
   name: 'uploadImg',
   data() {
@@ -62,6 +65,9 @@ export default {
       dialogVisibles: false, // 放大的图片
       dialogImageUrl: '', // 上传的图片
       uploadShow: false, //是否显示上传图片
+      headers: {
+        Authorization: "Bearer " + getToken(),
+      },
     }
   },
   created() {},
@@ -133,15 +139,42 @@ export default {
      * 如果要用api接口上传去除el-upload的 http-request属性即可
      */
     upload(data) {
-      uploadCOS(data.file).then((res) => {
-        this.dialogImageUrl = res
-      })
+      console.log(data);
+      // uploadCOS(data.file).then((res) => {
+      //   console.log(res);
+      //   this.dialogImageUrl = res
+      // })
+      const file = data.file;
+      const formData = new FormData();
+      formData.append('file', file);
+
+      axios.post('http://192.168.110.83:8066/common/upload', formData, {
+        headers: {
+          Authorization: "Bearer " + getToken(),
+        },
+        onUploadProgress: (progressEvent) => {
+          // 处理上传进度
+          const percentCompleted = Math.round((progressEvent.loaded * 100) / progressEvent.total);
+          console.log(`Upload progress: ${percentCompleted}%`);
+        }
+      }).then((response) => {
+        console.log(response);
+        if (response.data.code === 200) {
+          this.dialogImageUrl = response.data.url;
+        } else {
+          this.$message.error('上传图片失败,请重新上传');
+        }
+      }).catch((error) => {
+        console.error('There was an error!', error);
+        this.$message.error('上传过程中发生错误');
+      });
     },
   },
   computed: {
     // baseurl
     baseupload() {
-      return `${process.env.VUE_APP_AS_EDITOR}upload/miniShop`
+      // return `${process.env.VUE_APP_AS_EDITOR}upload/miniShop`
+      return `http://${process.env.VUE_APP_BASE_API5}common/uploads`
     },
 
     // 提交按钮是否可以点击

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

@@ -149,9 +149,11 @@
           <component
             :is="rightcom"
             :datas="currentproperties"
+            :datas2="currentproperties2"
             @componenmanagement="componenmanagement"
             @data-from-child="handleDataFromChild"
             @data-list="handleListData"
+            @datamethod="aa"
             :echoMessage="echoMessage"
           />
         </transition>
@@ -304,10 +306,13 @@ export default {
   },
   data() {
     return {
+      navigationData: {},// 图文导航数据
+      pageType:[],
       echoMessage: null,
-      extensions: [],
+      extensions: [], // 回显数据
       isExistsList: false, // 是否有查询列表
       mobilePageTableList: '', // listData数据
+      mobilePageTableSameList: [], // 另存listData数据
       selectFormData: {
         name: "",
         pageJson: "",
@@ -330,6 +335,8 @@ export default {
       index: "", //当前选中的index
       rightcom: "decorate", //右侧组件切换
       currentproperties: {}, //当前属性
+      currentproperties2: {}, //当前属性
+
       pageSetup: {
         // 页面设置属性
         name: "页面标题", //页面名称
@@ -359,13 +366,20 @@ export default {
     }
   },
   methods: {
+    aa(a1, a2) {
+      console.log(a1, a2);
+    },
     handleListData(data){
       console.log("从queryList组件接收到的数据:", data);
       data.tableColumnDesc = JSON.stringify(data.tableColumnDesc);
       data.tableColumnName = JSON.stringify(data.tableColumnName);
       data.listMapValue = JSON.stringify(data.listMapValue);
       this.mobilePageTableList = data
+      // 更新另存数据
+      this.mobilePageTableSameList = data
+      console.log("mobilePageTableSameList", this.mobilePageTableSameList);
       this.isExistsList = true
+      // 回显数据
       this.extensions = {
         tablelistSort: data.tablelistSort,
         listMapValue: data.listMapValue,
@@ -435,7 +449,10 @@ export default {
           if (response.data.mobilePageTableList) {
             let echoMessage = JSON.parse(response.data.mobilePageTableList.extensions);
             // console.log(echoMessage, 666666);
+            // 另存数据
             this.echoMessage = echoMessage;
+            this.mobilePageTableSameList = response.data.mobilePageTableList
+            console.log("另存数据",this.mobilePageTableSameList);
           }
         } else {
           this.$message.error("获取数据失败");
@@ -526,17 +543,62 @@ export default {
     async submitJsonData() {
       let JSONData = this.getJSONData();
       console.log(JSONData);
+      console.log(JSONData.name);
       let payload = {};
       let { pageJson, name } = JSONData;
-      payload.name = name;
-      payload.pageJson = pageJson;
+      console.log(JSON.parse(pageJson));
+      console.log(JSON.parse(pageJson).pageSetup.name);
+      payload.name = JSON.parse(pageJson).pageSetup.name
+      let jsonList = JSON.parse(pageJson);
+      let componentsList = jsonList.pageComponents;
+      // 图文导航
+      componentsList.forEach((item) => {
+        console.log(item, 999999999);
+        if (item.component === 'graphicnavigation') {
+        this.navigationData = {
+          isNavigationPageData: [
+            {
+              parentMenuName: item.setStyle.name,
+              role:["admin","xiaoshou","boos"],
+              childMenus: item.setStyle.imageList.map(i=> {
+                const str = i.pageId;
+                const parts = str.split(' - ');
+                const pageId = parseInt(parts[0], 10); // 提取并转换为整数
+                const pageName = parts[1]; // 直接获取第二部分作为名称
+                console.log(`pageId: ${pageId}, pageName: ${pageName}`);
+                return {
+                  childName: i.text,
+                  imgsrc: i.src,
+                  role:["角色1","角色2","角色3"],
+                  linkType: i.linktype,
+                  pageId: pageId,
+                  pageName: pageName,
+                  linkHttp: '',
+                }
+              })
+            }
+          ]
+        }
+        this.pageType = [
+          "isNavigationPage", 
+          "listPage", 
+          "fromPage"
+        ]
+        console.log(666, this.navigationData);
+        }
+        this.$set(item, 'data', this.navigationData);
+        this.$set(item, 'pageType', this.pageType);
+      });
+      console.log(jsonList);
+      payload.pageJson = JSON.stringify(jsonList);
       payload.fromMapDb = this.getFromMapDb(pageJson);
       payload.selectQualifiedField = this.getSelectQualifiedField(pageJson);
       payload.isExistsList = this.isExistsList;
       if(this.mobilePageTableList) {
-        payload.mobilePageTableList = this.mobilePageTableList;
+        payload.mobilePageTableList = this.mobilePageTableSameList;
         payload.mobilePageTableList.extensions = JSON.stringify(this.extensions)
       }
+      console.log(JSON.parse(payload.pageJson));
       try {
         let temp='保存'
         if (this.isEdit) {
@@ -931,6 +993,7 @@ export default {
       this.rightcom = data.style;
       /* 丢样式 */
       this.currentproperties = data.setStyle;
+      this.currentproperties2 = data;
 
       console.log(
         5555,
@@ -996,7 +1059,7 @@ export default {
       let toPageData = this.getJSONData();
       let toPageJSON = JSON.parse(toPageData.pageJson);
       console.log(toPageJSON, 2222);
-      let toPageID = toPageJSON.pageComponents[index].setStyle.toPage;
+      let toPageID = toPageJSON.pageComponents[index].setStyle.pageId;
       console.log(toPageID, 333);
       getmobilePageData(toPageID).then((response) => {
         if (response.code == 200) {

+ 7 - 1
zkqy-ui/src/views/asEditor/utils/componentProperties.js

@@ -135,8 +135,14 @@ componentProperties.set('graphicnavigation', {
   active: true,
   style: 'graphicnavigationstyle',
   setStyle: {
-    toPage: '',
+    pageId: '',
     text: '图文导航',
+    name: '导航',//标题内容
+    wordSize: 16,//标题大小
+    wordWeight: 400,//标题粗细
+    wordColor: 'rgba(50, 50, 51, 10)',//标题颜色
+    wordHeight: 24,//框体高度
+    positions: 'left', //显示位置  可选left/center
     imageList: [], // 图片导航列表
     navigationType: 0, //图片导航类型
     imgStyle: 0, //图片样式