feat: 增加选择导航页面

app/controller/navigator.ts

@@ -14,6 +14,21 @@ export default class NavigatorController extends Controller {
       });
     }
   }
+  // 查询导航配置列表(父子接口，供选择页面使用，且带有分页)
+  public async getNavigatorConfigListWithRelation(ctx: Context) {
+    const { pageNo, pageSize, name, author} = ctx.query;
+    try {
+      const list = await ctx.service.navigator.getList(pageNo, pageSize, name, author);
+      const { data } = list;
+      
+      ctx.body = ctx.helper.ok(list);
+    } catch (e) {
+      ctx.logger.info(`获取导航配置数据异常, ${JSON.stringify(e)}`);
+      ctx.body = ctx.helper.fail({
+        message: '获取数据异常'
+      });
+    }
+  }
   // 删除导航配置
   public async deleteNavigatorConfig(ctx: Context) {
     const { id } = ctx.request.body;

app/router.ts

@@ -23,6 +23,7 @@ export default (application: Application) => {
   // 导航配置相关
   router.post('/navigator/save', controller.navigator.saveNavigatorConfig);
   router.get('/navigator/list', controller.navigator.getNavigatorConfigList)
+  router.get('/navigator/list/relation', controller.navigator.getNavigatorConfigListWithRelation);
   router.post('/navigator/delete', controller.navigator.deleteNavigatorConfig)
 
   router.get('/*', controller.editor.home);

app/service/navigator.ts

-import { Console } from 'console';
 import { Context, Service } from 'egg';
-import { result } from 'lodash';
 
+// 添加或修改url中的参数
+function addOrEditUrlParams (url, paramName, replaceWith) {
+  if (url.indexOf(paramName) > -1) {
+    let re = eval('/(' + paramName + '=)([^&]*)/gi');
+    url = url.replace(re, paramName + '=' + replaceWith);
+  } else {
+    let paraStr = paramName + '=' + replaceWith;
+    let idx = url.indexOf('?');
+    if (idx < 0) {
+      url += '?';
+    } else if (idx >= 0 && idx != url.length - 1) {
+      url += '&';
+    }
+    url = url + paraStr;
+  }
+  return url;
+};
 export default class ArticeService extends Service {
   private context: Context;
   constructor(ctx: Context) {
@@ -48,6 +63,15 @@ export default class ArticeService extends Service {
       // 编辑
       const id = data.id;
       const saveData = Object.assign({}, data);
+      const navigatorData = saveData.navigatorData;
+      for (let i = 0; i < navigatorData.length; i++) {
+        if(navigatorData[i].pageType == 2) {
+          let url = navigatorData[i].pageUrl;
+          url = addOrEditUrlParams(url, 'navId', id);
+          url = addOrEditUrlParams(url, 'index', i);
+          navigatorData[i].pageUrl = url;
+        }
+      }
       delete saveData.id;
       const res = await this.context.model.NavigatorConfig.update(saveData, {
         where: {
@@ -58,6 +82,21 @@ export default class ArticeService extends Service {
     }
     // 保存
     const res = await this.context.model.NavigatorConfig.create(data);
-    return res;
+    const id = res.dataValues.id;
+    const navigatorData = JSON.parse(res.dataValues.navigatorData);
+    // 更新保存数据的链接，pageType为2的要进行更新
+    for (let i = 0; i < navigatorData.length; i++) {
+      if(navigatorData[i].pageType == 2) {
+        navigatorData[i].pageUrl += `&navId=${id}&index=${i}`;
+      }
+    }
+    const result = await this.context.model.NavigatorConfig.update({
+      navigatorData
+    }, {
+      where: {
+        id
+      }
+    })
+    return result;
   }
 }

app/web/api/navigator.api.ts

@@ -5,12 +5,15 @@ import axios from 'axios';
 
 export default {
   getList(params) {
-    return http.get('http://localhost:7002/navigator/list', { params });
+    return http.get('navigator/list', { params });
+  },
+  getListWithRelation(params) {
+    return http.get('navigator/list/relation', { params });
   },
   deleteNavigator(params) {
-    return http.post('http://localhost:7002/navigator/delete', params);
+    return http.post('navigator/delete', params);
   },
   saveNavigator(params) {
-    return http.post('http://localhost:7002/navigator/save', params);
+    return http.post('navigator/save', params);
   }
 };
\ No newline at end of file

app/web/config/dev.config.ts

@@ -3,15 +3,15 @@ const protocol = EASY_ENV_IS_BROWSER ? window.location.protocol : 'http';
 const hostMap = {
   apiHost: `http://localhost:7002/`,
   // apiHost: `http://192.168.28.199:7001/`,
-  // apiHost: 'https://quantum-blocks-bfe.liangkebang.net/',
-  h5Host: 'https://quantum-h5-bfe.liangkebang.net',
+  // apiHost: 'https://quantum-blocks-vcc2.liangkebang.net/',
+  h5Host: 'https://quantum-h5-vcc2.liangkebang.net',
   qiniuHost: `https://appsync.lkbang.net`,
   shenceUrl: `${protocol}//bn.xyqb.com/sa?project=default`,
-  opapiHost: `https://opapi-bfe.liangkebang.net`,
+  opapiHost: `https://opapi-vcc2.liangkebang.net`,
   qiniuUpHost: `${protocol}//up-z0.qiniup.com`,
-  // kdspHost: 'https://kdsp-api-bfe.liangkebang.net',
-  talosHost: 'https://talos-bfe.liangkebang.net',
-  kdspHost: 'https://kdsp-api-bfe.liangkebang.net',
+  // kdspHost: 'https://kdsp-api-vcc2.liangkebang.net',
+  talosHost: 'https://talos-vcc2.liangkebang.net',
+  kdspHost: 'https://kdsp-api-vcc2.liangkebang.net',
   yxmTenantId: 560761,
   appIdMap: {
     560761: 'wxe16bf9293671506c',

app/web/page/editor/view/navigator/components/activityPageTable.vue

@@ -144,7 +144,7 @@ export default {
       this.query();
     },
     select(row) {
-      this.$emit('selectActivityPage', {
+      this.$emit('selectPage', {
         pageType: 2,
         pageUrl: `${config.h5Host}/activity/${row.uuid}?tenantId=${row.tenantId}&vccToken={token}`,
         pageName: row.pageName
@@ -162,7 +162,8 @@ export default {
         author: '',
         pageSize: 10,
         pageNo: 1
-      }
+      };
+      this.query();
     },
   }
 }

app/web/page/editor/view/navigator/components/addOrEditNavigator.vue

 <template>
-    <Modal v-model="show" :title="title" width="500" @on-cancel="close">
+    <Modal v-model="show" :title="title" width="500" :mask-closable="false" @on-cancel="close">
         <div class="navigator-info">
           <div class="navigator-info-name"><i>*</i>名称</div>
           <div class="navigator-info-input">
@@ -100,14 +100,14 @@
           <Tabs :value="pageTabType">
             <TabPane label="功能页面" name="1">
               <featurePageTable
-                @selectFeaturePage="selectFeaturePage"
+                @selectPage="selectPage"
               />
             </TabPane>
             <TabPane label="活动页面" name="2">
-              <activityPageTable @selectActivityPage="selectActivityPage" />
+              <activityPageTable @selectPage="selectPage" />
             </TabPane>
             <TabPane label="导航页面" name="3">
-              <navigatorPageTable @selectNavigatorPage="selectNavigatorPage" />
+              <navigatorPageTable @selectPage="selectPage" />
             </TabPane>
           </Tabs>
           <div slot="footer" />
@@ -204,24 +204,13 @@ export default {
     }
   },
   methods: {
-    selectNavigatorPage(data) {
-      // 选择导航页面
-    },
-    selectActivityPage(data) {
-      // 选择活动页面(量子积木页面)
+    selectPage(data) {
+      // 选择页面
       this.navigatorData[this.selectPageIndex].pageType = data.pageType;
       this.navigatorData[this.selectPageIndex].pageUrl = data.pageUrl;
       this.navigatorData[this.selectPageIndex].pageName = data.pageName;
       this.showSelectPageModal = false;
     },
-    selectFeaturePage(data) {
-      // 选择功能页面
-      console.log('选择功能页面', data)
-      this.navigatorData[this.selectPageIndex].pageType = data.pageType;
-      this.navigatorData[this.selectPageIndex].pageUrl = data.pageUrl; // H5端根据pageUrl进行跳转
-      this.navigatorData[this.selectPageIndex].pageName = data.pageName;
-      this.showSelectPageModal = false;
-    },
     clickSelectPageButton(index) {
       this.selectPageIndex = index;
       this.showSelectPageModal = true; 

app/web/page/editor/view/navigator/components/expandRow.vue

+<template>
+  <div>
+    <div class="expand-row" v-for="(item, idx) in row.navigatorData" :key="idx">
+      <div class="block"></div>
+      <div class="id">
+        <span class="expand-key">次序: </span>
+        <span class="expand-value">{{ idx + 1 }}</span>
+      </div>
+      <div class="name">
+        <span class="expand-key"></span>
+        <span class="expand-value">{{ item.name }}</span>
+      </div>
+      <div class="url">
+        <template v-if="item.pageType == 1">
+          {{item.pageName}}
+        </template>
+        <template v-else>
+          {{item.pageUrl}}
+        </template>
+      </div>
+      <div class="author">
+        <span class="expand-value">{{ row.author }}</span>
+      </div>
+       <div class="time">
+        <span class="expand-value">{{ row.updatedAt }}</span>
+      </div>
+       <div class="operation">
+        <span class="expand-value"><Button :disabled="item.pageType == 1" @click="select(item)" type="primary" size="small">选择</Button></span>
+      </div>
+    </div>
+  </div>
+</template>
+<script>
+export default {
+    props: {
+        row: {
+          type: Object,
+          default: () => {}
+        },
+        index: {
+          type: [String, Number],
+          default: ''
+        }
+    },
+    methods: {
+      select(nav) {
+        const data = {};
+        data.pageType = 3;
+        data.pageName = nav.pageName;
+        data.pageUrl = nav.pageUrl;
+        this.$emit('select', data)
+        return;
+      }
+    }
+};
+</script>
+<style scoped lang="less">
+.expand-row{
+  display: flex;
+  align-items: center;
+  margin: 16px 0;
+  &>div{
+    word-break: break-all;
+  }
+  .block{
+    width: 40px;
+    flex-shrink: 0;
+  }
+  .id{
+    flex-shrink: 0;
+    width: 80px;
+    text-align: center;
+  }
+  .name{
+    flex-shrink: 0;
+    width: 160px;
+    text-align: center;
+  }
+  .url{
+    flex-shrink: 0;
+    width: 250px;
+    text-align: center;
+  }
+  .author{
+    flex-shrink: 0;
+    width: 90px;
+    text-align: center;
+  }
+  .time{
+    flex-shrink: 0;
+    width: 170px;
+    text-align: center;
+  }
+  .operation {
+    flex: 1;
+    text-align: center;
+  }
+}
+</style>
\ No newline at end of file

app/web/page/editor/view/navigator/components/featurePageTable.vue

@@ -57,7 +57,7 @@ export default {
   },
   methods: {
     select(row) {
-      this.$emit('selectFeaturePage', {
+      this.$emit('selectPage', {
         pageType: 1,
         pageUrl: row.url,
         pageName: row.name

app/web/page/editor/view/navigator/components/navigatorPageTable.vue

 <template>
-  <div></div>
+  <div>
+    <div class="search-bar">
+      <Form @submit.native.prevent inline ref="searchForm" :model="searchForm" class="inline">
+         <Form-item label="名称" prop="name">
+            <Input v-model="searchForm.name" class="comWidth" />
+        </Form-item>
+        <Form-item label="作者" prop="author">
+            <Input v-model="searchForm.author" class="comWidth" />
+        </Form-item>
+        <FormItem class="btnGroupStyle">
+          <div>
+            <Button class="btnStyle" @click="reset()">重置</Button>
+            <Button type="primary" class="btnStyle" @click="filter">查询</Button>
+          </div>
+        </FormItem>
+      </Form>
+    </div>
+    <div class="tableGroupStyle">
+      <Table
+        :columns="columns"
+        :data="tableData"
+        class="tableStyle"
+      />
+      <Page
+        :total="total"
+        v-if="total > 0"
+        show-elevator
+        show-sizer
+        class="pageStyle"
+        :current="searchForm.pageNo"
+        :pageSize="searchForm.pageSize"
+        @on-change="changePageNo"
+      />
+      <!-- @on-change="changePageNo"
+        @on-page-size-change="changePageSize" -->
+    </div>
+
+  </div>
 </template>
+<script>
+import navigatorApi from '@api/navigator.api'
+import expandRow from './expandRow.vue';
+import config from '@/config/index';
+export default {
+  components: {
+    expandRow
+  },
+  data() {
+    return {
+      total: 0,
+      searchForm: {
+        name: '',
+        author: '',
+        pageSize: 10,
+        pageNo: 1
+      },
+      tableData: [],
+      columns: [
+        {
+          align: 'center',
+          title: '',
+          width: 40,
+          type: 'expand',
+          render: (h, params) => {
+            return h(expandRow, {
+              props: {
+                row: params.row,
+                index: params.index
+              },
+              on: {
+                select: (data) => {
+                  this.$emit('selectPage', data);
+                }
+              }
+            })
+          }
+        },
+        {
+          align: 'center',
+          title: 'ID',
+          key: 'id',
+          width: 80,
+        },
+        {
+          align: 'center',
+          title: '名称',
+          width: 160,
+          key: 'name'
+        },
+        {
+          align: 'center',
+          title: '页面地址',
+          width: 250
+        },
+        {
+          align: 'center',
+          title: '作者',
+          key: 'author',
+          width: 90
+        },
+        {
+          align: 'center',
+          title: '更新时间',
+          key: 'updatedAt',
+          width: 170
+        },
+        {
+          align: 'center',
+          title: '操作',
+          key: 'operation'
+        }
+      ]
+    }
+  },
+  created() {
+    this.query();
+  },
+  methods: {
+    filter() {
+      this.searchForm.pageNo = 1;
+      this.searchForm.pageSize = 10;
+      this.query();
+    },
+    reset() {
+      this.searchForm = {
+        name: '',
+        author: '',
+        pageSize: 10,
+        pageNo: 1
+      }
+      this.query();
+    },
+    async query() {
+      const res = await navigatorApi.getListWithRelation(this.searchForm);
+      this.total = res.total || 0;
+      if (res.data.length) {
+        for (let i = 0; i < res.data.length; i++) {
+          res.data[i]['_expanded'] = true;
+        }
+      }
+      this.tableData = res.data || []
+    },
+    changePageNo(pageNo) {
+      this.searchForm.pageNo = pageNo;
+      this.query();
+    },
+  }
+}
+</script>
+<style scoped lang="less">
+.comWidth {
+  width: 200px;
+}
+.search-bar{
+  width: 100%;
+  height: 50px;
+  .btnGroupStyle{
+    button{
+      margin-right: 6px;
+    }
+  }
+  /deep/ .ivu-form-item{
+    margin-bottom: 0;
+  }
+  /deep/ .ivu-form-item-label {
+    font-weight: bold;
+    display: inline-block;
+  }
+  /deep/.ivu-form-item-content {
+    display: inline-block;
+  }
+}
+.tableGroupStyle {
+    background: #fff;
+    .toolBarStyle {
+      display: flex;
+      justify-content: space-between;
+      align-items: center;
+    }
+    .pageStyle {
+      margin-top: 20px;
+      width: 100%;
+      text-align: right;
+    }
+}
+/deep/ .ivu-table-expanded-cell{
+  padding: 0;
+}
+</style>
\ No newline at end of file

app/web/page/editor/view/navigator/index.vue

@@ -164,6 +164,9 @@ export default {
       this.searchForm.pageNo = 1;
       this.searchForm.name = '';
       this.searchForm.author = '';
+      this.$nextTick(() => {
+        this.query();
+      })
     },
   }
 }