support menu meta object value

aspnet-core/modules/platform/LINGYUN.Platform.Domain.Shared/LINGYUN/Platform/Datas/ValueType.cs

@@ -7,7 +7,7 @@
         Boolean = 2,
         Date = 3,
         DateTime = 4,
-        Array = 5
+        Array = 5,
-        
+        Object = 6
     }
 }

aspnet-core/modules/platform/LINGYUN.Platform.Domain/LINGYUN/Platform/Datas/DataItem.cs

@@ -78,6 +78,9 @@ namespace LINGYUN.Platform.Datas
                 case ValueType.Numeic:
                     DefaultValue = "0";
                     break;
+                case ValueType.Object:
+                    DefaultValue = "{}";
+                    break;
                 default:
                 case ValueType.String:
                     DefaultValue = "";

aspnet-core/modules/platform/LINGYUN.Platform.Domain/LINGYUN/Platform/Datas/DataItemMappingOptions.cs

@@ -1,4 +1,5 @@
-using Newtonsoft.Json.Linq;
+using Newtonsoft.Json;
+using Newtonsoft.Json.Linq;
 using System;
 using System.Collections.Generic;
 using Volo.Abp;
@@ -90,6 +91,15 @@ namespace LINGYUN.Platform.Datas
                 }
                 return value.ToString();
             });
+            SetMapping(ValueType.Object, value =>
+            {
+                if (value == null)
+                {
+                    return "{}";
+                }
+
+                return JsonConvert.SerializeObject(value);
+            });
         }
 
         public void SetMapping(ValueType valueType, Func<object, string> func)

aspnet-core/modules/platform/LINGYUN.Platform.EntityFrameworkCore/LINGYUN/Platform/EntityFrameworkCore/PlatformEfCoreQueryableExtensions.cs

@@ -19,6 +19,16 @@ namespace LINGYUN.Platform.EntityFrameworkCore
             return queryable;
         }
 
+        public static IQueryable<Menu> IncludeDetails(this IQueryable<Menu> queryable, bool include = true)
+        {
+            if (!include)
+            {
+                return queryable;
+            }
+
+            return queryable;
+        }
+
         public static IQueryable<Data> IncludeDetails(this IQueryable<Data> queryable, bool include = true)
         {
             if (!include)

aspnet-core/modules/platform/LINGYUN.Platform.EntityFrameworkCore/LINGYUN/Platform/Menus/EfCoreMenuRepository.cs

@@ -234,5 +234,10 @@ namespace LINGYUN.Platform.Menus
 
             DbContext.Set<UserMenu>().RemoveRange(membersQuery);
         }
+
+        public override IQueryable<Menu> WithDetails()
+        {
+            return GetQueryable().IncludeDetails();
+        }
     }
 }

vueJs/src/api/data-dictionary.ts

@@ -59,7 +59,8 @@ export enum ValueType {
   Boolean = 2,
   Date = 3,
   DateTime = 4,
-  Array = 5
+  Array = 5,
+  Object = 6
 }
 
 export class DataItem {

vueJs/src/components/InputObject/index.vue

@@ -0,0 +1,102 @@
+<template>
+  <div>
+    <el-row
+      v-for="(key, index) in Object.keys(objectValue)"
+      :key="index"
+      style="margin-bottom: 10px;"
+    >
+      <el-col :span="10">
+        <span style="width: 30%;">名称</span>
+        <el-input
+          :value="key"
+          style="width: 80%;margin-left: 10px;"
+        />
+      </el-col>
+      <el-col :span="10">
+        <span style="width: 30%;">值</span>
+        <el-input
+          :value="value[key]"
+          style="width: 87%;margin-left: 10px;"
+        />
+      </el-col>
+      <el-col :span="4">
+        <el-button
+          type="danger"
+          icon="el-icon-delete"
+          style="width: 100%;"
+          @click="onItemDeleted(key)"
+        >
+          删除项目
+        </el-button>
+      </el-col>
+    </el-row>
+    <el-row style="margin-top: 10px;">
+      <el-col :span="10">
+        <span style="width: 30%;">名称</span>
+        <el-input
+          v-model="newItemName"
+          style="width: 80%;margin-left: 10px;"
+        />
+      </el-col>
+      <el-col :span="10">
+        <span style="width: 30%;">值</span>
+        <el-input
+          v-model="newItemValue"
+          style="width: 87%;margin-left: 10px;"
+        />
+      </el-col>
+      <el-col :span="4">
+        <el-button
+          type="success"
+          style="width: 100%;"
+          @click="onItemAdded(newItemName, newItemValue)"
+        >
+          <i class="ivu-icon ivu-icon-md-add" />
+          添加项目
+        </el-button>
+      </el-col>
+    </el-row>
+  </div>
+</template>
+
+<script lang="ts">
+import { Component, Vue, Prop } from 'vue-property-decorator'
+
+@Component({
+  name: 'InputObject'
+})
+export default class extends Vue {
+  @Prop({ default: () => { return {} } })
+  private value!: object
+
+  private newItemName = ''
+  private newItemValue = ''
+
+  get objectValue() {
+    if (this.value) {
+      return this.value
+    }
+    return {}
+  }
+
+  onItemAdded(key: string, value: any) {
+    if (key && value) {
+      let added: {[key: string]: any} = {}
+      added = Object.assign(this.objectValue, added)
+      added[key] = value
+      console.log(added)
+      this.$emit('input', added)
+      this.newItemName = ''
+      this.newItemValue = ''
+    }
+  }
+
+  onItemDeleted(key: string) {
+    let changed: {[key: string]: any} = {}
+    changed = Object.assign(this.objectValue, changed)
+    delete changed[key]
+    this.$emit('input', changed)
+    this.$forceUpdate()
+  }
+}
+</script>

vueJs/src/views/admin/data-dictionary/components/CreateOrUpdateDataItemDialog.vue

@@ -26,6 +26,7 @@
       >
         <el-input
           v-model="dataItem.name"
+          :disabled="isEdit"
         />
       </el-form-item>
       <el-form-item
@@ -85,6 +86,11 @@
             label="Array"
             :value="5"
           />
+          <el-option
+            key="Object"
+            label="Object"
+            :value="6"
+          />
         </el-select>
       </el-form-item>
       <el-form-item

vueJs/src/views/admin/data-dictionary/components/DataDictionaryTree.vue

@@ -10,7 +10,7 @@
           style="float: right;"
           type="primary"
           icon="ivu-icon ivu-icon-md-add"
-          @click="handleEditData"
+          @click="handleEditData('')"
         >
           {{ $t('AppPlatform.Data:AddNew') }}
         </el-button>
@@ -99,7 +99,7 @@ export default class DataDictionaryTree extends Vue {
           icon: 'el-icon-edit',
           disabled: !checkPermission(['Platform.DataDictionary.Update']),
           onClick: () => {
-            this.handleEditData(data)
+            this.handleEditData(data.id)
           }
         },
         {
@@ -107,7 +107,7 @@ export default class DataDictionaryTree extends Vue {
           icon: 'ivu-icon ivu-icon-md-add',
           disabled: !checkPermission(['Platform.DataDictionary.Create']),
           onClick: () => {
-            this.handleEditData()
+            this.handleEditData('')
           }
         },
         {
@@ -152,11 +152,11 @@ export default class DataDictionaryTree extends Vue {
     }
   }
 
-  private handleEditData(data?: Data) {
+  private handleEditData(dataId: string) {
     this.editDataTitle = this.l('AppPlatform.Data:AddNew')
     this.isEditData = false
-    if (data) {
+    if (dataId) {
-      this.editDataId = data.id
+      this.editDataId = dataId
       this.isEditData = true
       this.editDataTitle = this.l('AppPlatform.Data:Edit')
     } else {

vueJs/src/views/admin/data-dictionary/components/DataItemTable.vue

@@ -141,6 +141,8 @@ import CreateOrUpdateDataItemDialog from './CreateOrUpdateDataItemDialog.vue'
           return 'DateTime'
         case ValueType.Array:
           return 'Array'
+        case ValueType.Object:
+          return 'Object'
         default:
         case ValueType.String:
           return 'String'

vueJs/src/views/container/menus/components/CreateOrUpdateMenuDialog.vue

@@ -126,7 +126,7 @@
           :label="$t(('AppPlatform.DisplayName:Meta'))"
         >
           <el-form-item
-            v-for="(dataItem) in bindData.items"
+            v-for="(dataItem) in dataItems"
             :key="dataItem.id"
             :label="dataItem.displayName"
             :prop="'meta.' + dataItem.name"
@@ -136,16 +136,16 @@
               trigger: 'blur'
             }"
           >
-            <el-popover
+            <!-- <el-popover
               :ref="dataItem.name"
               trigger="hover"
               :title="dataItem.displayName"
-              :content="dataItem.description"
+              :content="dataItem.description || dataItem.displayName"
             />
             <span
               slot="label"
               v-popover="dataItem.name"
-            >{{ dataItem.displayName }}</span>
+            >{{ dataItem.displayName }}</span> -->
             <menu-meta-input
               v-model="menu.meta[dataItem.name]"
               :prop-name="'meta.' + dataItem.name"
@@ -186,7 +186,7 @@ import MenuService, {
   MenuUpdate,
   MenuCreateOrUpdate
 } from '@/api/menu'
-import DataService, { Data } from '@/api/data-dictionary'
+import DataService, { Data, DataItem } from '@/api/data-dictionary'
 import LayoutService, { Layout, GetLayoutByPaged } from '@/api/layout'
 import { abpPagerFormat } from '@/utils/index'
 
@@ -222,6 +222,13 @@ export default class CreateOrUpdateMenuDialog extends Vue {
     return this.$t('AppPlatform.Menu:AddNew')
   }
 
+  get dataItems() {
+    const items = this.bindData.items.sort((pre: DataItem, next: DataItem) => {
+      return pre.valueType < next.valueType ? -1 : 0
+    })
+    return items
+  }
+
   private activedTab = 'basic'
   private menu = new Menu()
   private bindData = new Data()
@@ -282,6 +289,9 @@ export default class CreateOrUpdateMenuDialog extends Vue {
   private onLayoutChanged() {
     const layout = this.layouts.find(x => x.id === this.layoutId)
     if (layout) {
+      if (!this.isEdit) {
+        this.menu.meta = {}
+      }
       if (!this.parentId) {
         // 对于根菜单,自动设置组件路径为布局路径
         this.menu.component = layout.path

vueJs/src/views/container/menus/components/MenuMetaInput.vue

@@ -32,6 +32,11 @@
       :value="inputArrayValue(value)"
       @input="onInputMetaChanged"
     />
+    <input-object
+      v-else-if="dataItem.valueType===6"
+      :value="inputObjectValue"
+      @input="onInputMetaChanged"
+    />
   </div>
 </template>
 
@@ -40,12 +45,14 @@ import { Component, Vue, Prop } from 'vue-property-decorator'
 import { DataItem } from '@/api/data-dictionary'
 import { isBoolean } from 'lodash'
 import ElInputTag from '@/components/InputTag/index.vue'
+import InputObject from '@/components/InputObject/index.vue'
 import { isArray } from '@/utils/validate'
 
 @Component({
   name: 'MenuMetaInput',
   components: {
-    ElInputTag
+    ElInputTag,
+    InputObject
   }
 })
 export default class MenuMetaInput extends Vue {
@@ -87,6 +94,16 @@ export default class MenuMetaInput extends Vue {
     this.value = String(value).split(',')
   }
 
+  get inputObjectValue() {
+    if (typeof this.value === 'object') {
+      return this.value
+    }
+    if (typeof this.value === 'string') {
+      return JSON.parse(this.value)
+    }
+    return JSON.parse(String(this.value))
+  }
+
   onInputMetaChanged(value: any) {
     this.$emit('input', value)
   }