feat: 对接接口并新增选择页面交互

app/controller/navigator.ts

@@ -30,8 +30,17 @@ export default class NavigatorController extends Controller {
   // 保存导航配置
   public async saveNavigatorConfig(ctx: Context) {
     const pageInfo = ctx.request.body;
-    console.log(pageInfo);
-    // ctx.body = ctx.helper.ok(result);
-    ctx.body = 1;
+    if (!pageInfo.id) {
+      delete pageInfo.id;
+    }
+    try {
+      await ctx.service.navigator.saveOrUpdate(pageInfo);
+      ctx.body = ctx.helper.ok({});
+    } catch (e) {
+      ctx.logger.info(`保存导航配置异常, ${JSON.stringify(e)}`);
+      ctx.body = ctx.helper.fail({
+        message: '保存导航配置失败'
+      });
+    }
   }
 }
\ No newline at end of file

app/model/navigatorConfig.ts

@@ -38,9 +38,29 @@
    })
    author: string;
  
+  @Column({
+    field: 'bgColor',
+    type: DataType.STRING(255)
+  })
+  bgColor: string;
+
+  @Column({
+    field: 'bgImg',
+    type: DataType.STRING(255)
+  })
+  bgImg: string;
+
    @Column({
-     field: 'navigatorData',
-     type: DataType.TEXT
+    field: 'navigatorData',
+    type: DataType.TEXT,
+    get() {
+      const configData = this.getDataValue('navigatorData');
+      return configData ? JSON.parse(configData) : null
+    },
+    set(value) {
+      this.setDataValue('navigatorData', JSON.stringify(value))
+      // return JSON.stringify(value);
+    }
    })
    navigatorData: string;
  

app/service/navigator.ts

@@ -42,4 +42,22 @@ export default class ArticeService extends Service {
     })
     return res;
   }
+  // 保存或编辑
+  async saveOrUpdate(data) {
+    if (data.id) {
+      // 编辑
+      const id = data.id;
+      const saveData = Object.assign({}, data);
+      delete saveData.id;
+      const res = await this.context.model.NavigatorConfig.update(saveData, {
+        where: {
+          id
+        }
+      })
+      return res;
+    }
+    // 保存
+    const res = await this.context.model.NavigatorConfig.create(data);
+    return res;
+  }
 }

app/web/api/navigator.api.ts

@@ -9,5 +9,8 @@ export default {
   },
   deleteNavigator(params) {
     return http.post('http://localhost:7002/navigator/delete', params);
+  },
+  saveNavigator(params) {
+    return http.post('http://localhost:7002/navigator/save', params);
   }
 };
\ No newline at end of file

app/web/config/navigatorCol.config.ts

@@ -15,7 +15,19 @@ export const columns = function(pointer) {
     {
       align: 'center',
       title: '所选页面',
-      key: 'pages'
+      render: (h, params) => {
+        const navigatorData = params.row.navigatorData;
+        let str = '';
+        try {
+          for (let i = 0; i < navigatorData.length; i++) {
+            str += `${i + 1}-${navigatorData[i].pageName}; `;
+          }
+          return h('span', str);
+        } catch (e) {
+          console.log(e);
+        }
+        return h('span', str);
+      }
     },
     {
       align: 'center',
@@ -99,20 +111,26 @@ export const urlTableColumns = function(pointer) {
   return [
     {
       align: 'center',
-      title: 'ID',
+      title: '排序',
       key: 'id',
       width: 80
     },
+    {
+      align: 'center',
+      title: '导航名称',
+      key: 'configName',
+      width: 120
+    },
     {
       align: 'center',
       title: '所选页面',
-      key: 'name',
-      width: 300
+      key: 'pageName',
+      width: 120
     },
     {
       align: 'center',
       title: '跳转链接',
-      key: 'pages'
+      key: 'pageUrl'
     },
   ];
 };
\ No newline at end of file

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

+<template>
+  <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.pageName" class="comWidth" />
+        </Form-item>
+        <Form-item label="描述" prop="pageDescribe">
+            <Input v-model="searchForm.pageDescribe" 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 api from '@api/editor.api'
+import config from '@/config/index';
+export default {
+  data() {
+    return {
+      total: 0,
+      searchForm: {
+        pageName: '',
+        pageDescribe: '',
+        author: '',
+        pageSize: 10,
+        pageNo: 1
+      },
+      columns: [
+        {
+          align: 'center',
+          title: '页面名称',
+          key: 'pageName',
+          width: 150,
+        },
+        {
+          align: 'center',
+          title: '描述',
+          key: 'pageDescribe',
+          width: 150,
+        },
+        {
+          align: 'center',
+          title: '作者',
+          key: 'author',
+          width: 100
+        },
+        {
+          align: 'center',
+          title: '封面',
+          width: 60,
+          render: (h, params) => {
+            return h('div', {
+              style: {
+                padding: '5px 0',
+                display: 'flex',
+                alignItems: 'center',
+                justifyContent: 'center'
+              }
+            }, [
+              h('Img', {
+                style: {
+                  width: '35px'
+                },
+                attrs: {
+                  src: params.row.coverImage
+                }
+              })
+            ])
+          }
+        },
+        {
+          align: 'center',
+          title: '链接',
+          render: (h, params) => {
+            return h('span', `${config.h5Host}/activity/${params.row.uuid}?tenantId=${params.row.tenantId}&vccToken={token}`)
+          }
+        },
+        {
+          align: 'center',
+          title: '操作',
+          width: 80,
+          render: (h, params) => {
+            const row = params.row;
+            return h('div', [
+              h('Button', {
+                props: {
+                  type: 'primary',
+                  size: 'small'
+                },
+                on: {
+                  click: () => {
+                    this.select(row);
+                  }
+                }
+              }, '选择')
+            ]);
+          },
+        }
+      ],
+      tableData: []
+    }
+  },
+  created() {
+    this.query()
+  },
+  methods: {
+    filter() {
+      this.searchForm.pageNo = 1;
+      this.searchForm.pageSize = 10;
+      this.query();
+    },
+    changePageNo(pageNo) {
+      this.searchForm.pageNo = pageNo;
+      this.query();
+    },
+    select(row) {
+      this.$emit('selectActivityPage', {
+        pageType: 2,
+        pageUrl: `${config.h5Host}/activity/${row.uuid}?tenantId=${row.tenantId}&vccToken={token}`,
+        pageName: row.pageName
+      });
+    },
+    async query() {
+      const res = await api.getPageList(this.searchForm);
+      this.total = res.total || 0;
+      this.tableData = res.data || []
+    },
+    reset() {
+      this.searchForm = {
+        pageName: '',
+        pageDescribe: '',
+        author: '',
+        pageSize: 10,
+        pageNo: 1
+      }
+    },
+  }
+}
+</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;
+    }
+}
+</style>
\ No newline at end of file

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

+<template>
+  <div>
+      <Table
+        :columns="columns"
+        :data="tableData"
+        class="tableStyle"
+      />
+  </div>
+</template>
+<script>
+export default {
+  data() {
+    return {
+      columns: [
+        {
+          align: 'center',
+          title: '页面名称',
+          key: 'name',
+          
+        },
+        {
+          align: 'center',
+          title: '操作',
+          render: (h, params) => {
+            const row = params.row;
+            return h('div', [
+              h('Button', {
+                props: {
+                  type: 'primary',
+                  size: 'small'
+                },
+                on: {
+                  click: () => {
+                    this.select(row);
+                  }
+                }
+              }, '选择')
+            ]);
+          },
+        }
+      ],
+      tableData: [
+        {
+          name: '首页tab',
+          url: 'home'
+        },
+        {
+          name: '购物车tab',
+          url: 'shopcart'
+        },
+        {
+          name: '我的tab',
+          url: 'user'
+        }
+      ]
+    }
+  },
+  methods: {
+    select(row) {
+      this.$emit('selectFeaturePage', {
+        pageType: 1,
+        pageUrl: row.url,
+        pageName: row.name
+      });
+    }
+  }
+}
+</script>
\ No newline at end of file

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

+<template>
+  <div></div>
+</template>
\ No newline at end of file

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

@@ -16,30 +16,30 @@
         </FormItem>
       </Form>
     </div>
-      <div class="tableGroupStyle">
-        <div class="toolBarStyle">
-          <h3>查询数据</h3>
-          <div>
-            <Button type="primary" class="btnStyle" @click="add">新增</Button>
-            <slot></slot>
-          </div>
+    <div class="tableGroupStyle">
+      <div class="toolBarStyle">
+        <h3>查询数据</h3>
+        <div>
+          <Button type="primary" class="btnStyle" @click="add">新增</Button>
+          <slot></slot>
         </div>
-        <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-page-size-change="changePageSize"
-        />
+      </div>
+      <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-page-size-change="changePageSize"
+      />
     </div>
     <Modal v-model="showPagesUrl" title="页面地址列表" width="900">
         <Table
@@ -52,7 +52,7 @@
     <addOrEditNavigator
       v-model="showAddOrEdit"
       :navigatorConfig="navigatorConfig"
-      @close="showAddOrEdit = false"
+      @close="closeAddOrEdit"
     />
   </div>
 </template>
@@ -96,6 +96,13 @@ export default {
       this.tableData = res.data || []
 
     },
+    closeAddOrEdit(refresh){
+      this.showAddOrEdit = false;
+      this.navigatorConfig = null;
+      if (refresh) {
+        this.query();
+      }
+    },
     add() {
       this.navigatorConfig = null;
       this.showAddOrEdit = true;
@@ -113,8 +120,18 @@ export default {
     },
     showAddr(row) {
       // 查看地址列表
+      let configs = row.navigatorData || [];
+      let arr = [];
+      for (let i = 0; i < configs.length; i++) {
+        let obj = {};
+        obj.id = i + 1;
+        obj.configName = configs[i].name;
+        obj.pageName = configs[i].pageName;
+        obj.pageUrl = configs[i].pageType == 1 ? '' : configs[i].pageUrl;
+        arr.push(obj)
+      }
+      this.urlTableData = arr;
       this.showPagesUrl = true;
-      console.log(row);
     },
     preview(row) {
       // 预览，默认预览第一个导航页面
@@ -122,7 +139,6 @@ export default {
     },
     edit(row) {
       // 编辑
-      console.log(row);
       this.navigatorConfig = row;
       this.showAddOrEdit = true;
     },