feat: 新增导航配置

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

+<template>
+    <Modal v-model="show" :title="title" width="500" @on-cancel="close">
+        <div class="navigator-info">
+          <div class="navigator-info-name">名称</div>
+          <div class="navigator-info-input">
+            <Input v-model="name" placeholder="仅用于内部运营人员识别使用" style="width: 300px" />
+          </div>
+        </div>
+        <div class="navigator-list">
+          <div
+            class="navigator-list-item"
+            v-for="(item, index) in navigatorData"
+            :key="index"
+          >
+            <div class="navigator-list-item_title">
+              <span>一级导航</span>
+              <Icon type="close-round" @click="deleteNavigatorConfigItem(index)"></Icon>
+            </div>
+            <div class="navigator-list-item_content">
+              <span>导航名称</span>
+              <Input v-model="item.name" placeholder="请输入导航名称"  />
+            </div>
+             <div class="navigator-list-item_content">
+              <span>类型</span>
+              <div class="navigator-list-item_content_list">
+                <RadioGroup v-model="item.type">
+                    <Radio :label="1">
+                        <span>图文形式</span>
+                    </Radio>
+                    <Radio :label="2">
+                        <span>纯图形式</span>
+                    </Radio>
+                </RadioGroup>
+              </div>
+            </div>
+            <div class="navigator-list-item_content">
+              <span />
+              <div class="navigator-list-item_content_settings">
+                <div class="item">
+                  <div class="label">选中图标</div>
+                  <div class="setting">
+                    <uploader v-model="item.selectIcon" class="uploader" />
+                  </div>
+                </div>
+                <div class="item">
+                  <div class="label">未选中图标</div>
+                  <div class="setting">
+                    <uploader v-model="item.icon" class="uploader" />
+                  </div>
+                </div>
+                <div class="item" v-if="item.type == 1">
+                  <div class="label">选中文案颜色</div>
+                  <div class="setting">
+                    <Input class="color-input" v-model="item.selectColor"/>
+                    <ColorPicker v-model="item.selectColor" />
+                  </div>
+                </div>
+                <div class="item" v-if="item.type == 1">
+                  <div class="label">未选中文案颜色</div>
+                  <div class="setting">
+                    <Input class="color-input" v-model="item.color"/>
+                    <ColorPicker v-model="item.color" />
+                  </div>
+                </div>
+              </div>
+            </div>
+          </div>
+        </div>
+        <div class="navigator-add">
+          <Button type="primary" icon="plus-round" long @click="addNavigatorConfig">新增一级导航</Button>
+        </div>
+        <div class="modal-footer" slot="footer">
+          <Button type="ghost" @click="close">取消</Button>
+          <Button type="primary" @click="confirm">保存</Button>
+        </div>
+    </Modal>
+</template>
+<script>
+import uploader from '../../../component/DynamicForm/component/Upload/index.vue'
+export default {
+  components: {
+    uploader
+  },
+  props: {
+    value: {
+      type: Boolean,
+      default: false
+    },
+    navigatorConfig: {
+      type: [Object, null],
+      default: null
+    }
+  },
+  watch: {
+    navigatorConfig: {
+      handler(val) {
+        this.title = val ? '编辑' : '新增'
+        if (val) {
+          const obj = Object.assign({}, val);
+          this.name = val.name;
+          this.id = val.id;
+          this.navigatorData = obj.navigatorData;
+        }
+      },
+      immediate: true
+    }
+  },
+  computed: {
+    show: {
+      get() {
+        return this.value ? true : false;
+      },
+      set(v) {}
+    }
+  },
+  created() {
+    let author = '';
+    try {
+      author = JSON.parse(localStorage.getItem('user')).name;
+    } catch (e) {
+      author = '';
+    }
+    this.author = author;
+  },
+  data() {
+    return {
+      title: '', // 弹窗标题
+      name: '', // 导航名称
+      navigatorData: [], // 导航配置
+      id: '',
+      author: '',
+      standardEditDataModel: { // 新增、编辑时会用到的标准导航数据模型
+        name: '',
+        type: 1,
+        color: '',
+        selectColor: '',
+        icon: '',
+        selectIcon: '',
+        page: {
+          pageType: '',
+          pageUrl: ''
+        }
+      }
+    }
+  },
+  methods: {
+    close() {
+      // 关闭事件
+      this.$emit('close')
+      this.resetData();
+    },
+    resetData() {
+      // 关闭前重置数据
+      this.name = '';
+      this.navigatorData = [];
+      this.id = '';
+      this.author = '';
+    },
+    addNavigatorConfig() {
+      // 添加导航配置
+      this.navigatorData.push(Object.assign({}, this.standardEditDataModel));
+    },
+    deleteNavigatorConfigItem(index) {
+      // 删除导航配置
+      this.navigatorData.splice(index, 1);
+    },
+    validate() {
+      // 校验值
+      if (!this.name) {
+        this.$toast('请填写名称');
+        return false;
+      }
+      if (!this.navigatorData) {
+        this.$toast('请配置导航');
+        return false;
+      }
+      const arr = JSON.parse(JSON.stringify(this.navigatorData));
+      let navigatorNameExist = true; // 导航名称是否创建
+      let typeExist = true; // 导航类型是否选择(目前默认选择了图文形式)
+      for (let i = 0; i < arr.length; i++ ) {
+        if (!arr[i].name) {
+          navigatorNameExist = false;
+        }
+        if (!arr[i].type) {
+          typeExist = false;
+        }
+        if (
+          arr[i].type == 1 
+          &&
+          (!arr[i].color || !arr[i].selectColor || !arr[i].icon || !arr[i].selectIcon)
+        ) {
+          this.$toast('图文形式配置缺失，请填写后重试');
+          return false;  
+        }
+        if (
+          arr[i].type == 2
+          &&
+          (!arr[i].icon || !arr[i].selectIcon)
+        ) {
+          this.$toast('纯图形式配置缺失，请填写后重试');
+          return false;  
+        }
+      }
+      if (!navigatorNameExist) {
+        this.$toast('导航名称缺失，请填写后重试');
+        return false;
+      }
+      if (!typeExist) {
+        this.$toast('导航类型缺失，请选择后重试');
+        return false;
+      }
+      return true;
+    },
+    confirm() {
+      // 提交
+      // 首先要进行校验
+      if (!this.validate()) return;
+      console.log(this.navigatorData)
+
+    }
+  },
+}
+</script>
+<style scoped lang="less">
+/deep/ .ivu-modal-body{
+  max-height: 70vh;
+  overflow-y: auto;
+}
+.navigator-info{
+  width: 100%;
+  height: 40px;
+  display: flex;
+  align-items: center;
+  justify-content: center;
+  &-name{
+    margin-right: 10px;
+  }
+}
+.navigator-list{
+  &-item{
+    border: 1px solid #dddee1;
+    border-radius: 5px;
+    margin-top: 20px;
+    padding: 10px;
+    &_title{
+      display: flex;
+      align-items: center;
+      justify-content: space-between;
+      /deep/ .ivu-icon{
+        cursor: pointer;
+      }
+    }
+    &_content{
+      margin-top: 10px;
+      display: flex;
+      align-items: center;
+      span{
+        display: inline-block;
+        width: 60px;
+        flex-shrink: 0;
+        margin-right: 10px;
+      }
+      &_list{
+        display: flex;
+        align-items: center;
+      }
+      &_settings{
+        border-radius: 5px;
+        flex: 1;
+        padding: 10px;
+        border: 1px solid #dddee1;
+        .item{
+          margin-bottom: 10px;
+          min-height: 40px;
+          display: flex;
+          align-items: center;
+          justify-content: space-between;
+          &:last-child{
+            margin-bottom: 0;
+          }
+          .label{
+            width: 100px;
+            flex-shrink: 0;
+          }
+          .setting{
+            display: flex;
+            align-items: center;
+            height: 100%;
+            flex: 1;
+            /deep/ .uploader{
+              width: 100%;
+            }
+            /deep/ .color-input{
+              width: 150px;
+              margin-right: 10px;
+            }
+          }
+        }
+      }
+    }
+  }
+}
+.navigator-add{
+  margin-top: 20px;
+}
+</style>
\ No newline at end of file

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

@@ -20,7 +20,7 @@
         <div class="toolBarStyle">
           <h3>查询数据</h3>
           <div>
-            <Button type="primary" class="btnStyle" @click="add()">新增</Button>
+            <Button type="primary" class="btnStyle" @click="add">新增</Button>
             <slot></slot>
           </div>
         </div>
@@ -49,13 +49,21 @@
         />
         <span slot="footer"></span>
     </Modal>
+    <addOrEditNavigator
+      v-model="showAddOrEdit"
+      :navigatorConfig="navigatorConfig"
+      @close="showAddOrEdit = false"
+    />
   </div>
 </template>
 <script>
 import { columns, urlTableColumns } from '@/config/navigatorCol.config'
 import navigatorApi from '@api/navigator.api'
-
+import addOrEditNavigator from './components/addOrEditNavigator'
 export default {
+  components: {
+    addOrEditNavigator
+  },
   data() {
     return {
       showPagesUrl: false,
@@ -69,7 +77,9 @@ export default {
       urlTableData: [],
       columns: [],
       urlTableColumns: [],
-      total: 0
+      total: 0,
+      navigatorConfig: null, // 新增、编辑的配置
+      showAddOrEdit: false
     }
   },
   created() {
@@ -87,7 +97,8 @@ export default {
 
     },
     add() {
-      console.log(2);
+      this.navigatorConfig = null;
+      this.showAddOrEdit = true;
     },
     changePageSize(size) {
       // 变更每页条数
@@ -112,6 +123,8 @@ export default {
     edit(row) {
       // 编辑
       console.log(row);
+      this.navigatorConfig = row;
+      this.showAddOrEdit = true;
     },
     delete(row) {
       // 删除