feat: 支持 json m2m field

src/components/FormFields/JSONManyToManySelect.vue

@@ -0,0 +1,77 @@
+<template>
+  <div>
+    <el-radio-group v-model="iValue.type">
+      <el-radio v-for="tp of types" :key="tp.name" :label="tp.name">
+        {{ tp.label }}
+      </el-radio>
+    </el-radio-group>
+    <Select2 v-if="iValue.type === 'ids'" v-model="ids" v-bind="select2" />
+    <div>
+      <DataTable v-model="iAttrs" :config="tableConfig" class="attr-list" />
+      <div class="actions">
+        <el-button size="mini" type="primary">
+          {{ $t('common.Add') }}
+        </el-button>
+        <el-button size="mini" type="success">
+          {{ $t('common.TemplateAdd') }}
+        </el-button>
+      </div>
+    </div>
+  </div>
+</template>
+
+<script>
+import Select2 from './Select2.vue'
+import DataTable from '@/components/DataTable/index.vue'
+
+export default {
+  name: 'JSONManyToManySelect',
+  components: { DataTable, Select2 },
+  props: {
+    value: {
+      type: Object,
+      default: () => {
+        return {
+          type: 'all'
+        }
+      }
+    },
+    select2: {
+      type: Object,
+      required: true
+    },
+    attrs: {
+      type: Array,
+      default: () => {
+        return []
+      }
+    }
+  },
+  data() {
+    return {
+      iValue: Object.assign({ type: 'all' }, this.value),
+      ids: [],
+      iAttrs: [],
+      types: [
+        { name: 'all', label: '全部' },
+        { name: 'ids', label: '指定' },
+        { name: 'attrs', label: '属性选择' }
+      ],
+      tableConfig: {
+        columns: [
+          { prop: 'name', label: '属性名' },
+          { prop: 'match', label: '匹配' },
+          { prop: 'value', label: '属性值' }
+        ],
+        hasPagination: false
+      }
+    }
+  }
+}
+</script>
+
+<style lang="scss" scoped>
+.attr-list {
+  width: 80%;
+}
+</style>

src/components/FormFields/index.js

@@ -15,6 +15,7 @@ import UploadSecret from './UploadSecret'
 import WeekCronSelect from './WeekCronSelect'
 import NestedObjectSelect2 from './NestedObjectSelect2'
 import DatetimeRangePicker from './DatetimeRangePicker'
+import JSONManyToManySelect from './JSONManyToManySelect'
 
 export default {
   Text,
@@ -33,7 +34,8 @@ export default {
   UploadSecret,
   WeekCronSelect,
   NestedObjectSelect2,
-  DatetimeRangePicker
+  DatetimeRangePicker,
+  JSONManyToManySelect
 }
 
 export {
@@ -53,5 +55,6 @@ export {
   UploadSecret,
   WeekCronSelect,
   NestedObjectSelect2,
-  DatetimeRangePicker
+  DatetimeRangePicker,
+  JSONManyToManySelect
 }

src/views/acl/CommandAcl/CommandFilterAcl/CommandFilterAclCreateUpdate.vue

@@ -1,8 +1,8 @@
 <template>
   <GenericCreateUpdatePage
     :fields="fields"
-    :initial="initial"
     :fields-meta="fieldsMeta"
+    :initial="initial"
     :url="url"
     v-bind="$data"
   />
@@ -10,10 +10,9 @@
 
 <script>
 import { GenericCreateUpdatePage } from '@/layout/components'
+import { JSONManyToManySelect } from '@/components/FormFields'
 import rules from '@/components/DataForm/rules'
-import {
-  cleanFormValueForHandleUserAssetAccount
-} from '../../common'
+import { cleanFormValueForHandleUserAssetAccount } from '../../common'
 
 export default {
   name: 'CommandFilterAclCreateUpdate',
@@ -38,7 +37,28 @@ export default {
       createSuccessNextRoute: { name: 'CommandFilterAclList' },
       fieldsMeta: {
         users: {
-          fields: ['username_group']
+          component: JSONManyToManySelect,
+          el: {
+            value: [],
+            select2: {
+              ajax: {
+                url: '/api/v1/users/users/?fields_size=mini',
+                transformOption: (item) => {
+                  return { label: item.name + '(' + item.username + ')', value: item.id }
+                }
+              }
+            },
+            attrs: [
+              {
+                name: 'name',
+                label: this.$t('common.Name')
+              },
+              {
+                username: 'username',
+                label: this.$t('common.Username')
+              }
+            ]
+          }
         },
         assets: {
           fields: ['name_group', 'address_group']

src/views/assets/Asset/AssetCreateUpdate/components/AssetAccounts.vue

@@ -4,26 +4,25 @@
       {{ $t('assets.InAssetDetail') }}
     </el-link>
     <div v-else class="accounts">
-      <el-table :data="accounts" style="width: 100%">
-        <el-table-column :label="$tc('assets.Name')" prop="name" />
-        <el-table-column :label="$tc('assets.Username')" prop="username" />
-        <el-table-column :label="$tc('assets.Privileged')" prop="privileged">
-          <template v-slot="scope">
-            <i :class="scope.row['privileged'] ? 'fa-check' : ''" class="fa text-primary" />
-          </template>
-        </el-table-column>
-        <el-table-column :label="$tc('common.TemplateAdd')" prop="template">
-          <template v-slot="scope">
-            <i :class="scope.row['template'] ? 'fa-check' : ''" class="fa text-primary" />
-          </template>
-        </el-table-column>
-        <el-table-column :label="$tc('common.Actions')" align="right" class-name="buttons" fixed="right" width="135">
-          <template v-slot="scope">
-            <el-button icon="el-icon-minus" size="mini" type="danger" @click="removeAccount(scope.row)" />
-            <el-button :disabled="scope.row.template" icon="el-icon-edit" size="mini" type="primary" @click="onEditClick(scope.row)" />
-          </template>
-        </el-table-column>
-      </el-table>
+      <DataTable :config="iTableConfig" />
+      <!--      <el-table :data="accounts" style="width: 100%">-->
+      <!--        <el-table-column :label="$tc('assets.Privileged')" prop="privileged">-->
+      <!--          <template v-slot="scope">-->
+      <!--            <i :class="scope.row['privileged'] ? 'fa-check' : ''" class="fa text-primary" />-->
+      <!--          </template>-->
+      <!--        </el-table-column>-->
+      <!--        <el-table-column :label="$tc('common.TemplateAdd')" prop="template">-->
+      <!--          <template v-slot="scope">-->
+      <!--            <i :class="scope.row['template'] ? 'fa-check' : ''" class="fa text-primary" />-->
+      <!--          </template>-->
+      <!--        </el-table-column>-->
+      <!--        <el-table-column :label="$tc('common.Actions')" align="right" class-name="buttons" fixed="right" width="135">-->
+      <!--          <template v-slot="scope">-->
+      <!--            <el-button icon="el-icon-minus" size="mini" type="danger" @click="removeAccount(scope.row)" />-->
+      <!--            <el-button :disabled="scope.row.template" icon="el-icon-edit" size="mini" type="primary" @click="onEditClick(scope.row)" />-->
+      <!--          </template>-->
+      <!--        </el-table-column>-->
+      <!--      </el-table>-->
       <div class="actions">
         <el-button size="mini" type="primary" @click="onAddClick">
           {{ $t('common.Add') }}
@@ -50,12 +49,14 @@
 <script>
 import AccountTemplateDialog from './AccountTemplateDialog'
 import AddAccountDialog from './AddAccountDialog'
+import DataTable from '@/components/DataTable/index.vue'
 
 export default {
   name: 'AssetAccounts',
   components: {
     AccountTemplateDialog,
-    AddAccountDialog
+    AddAccountDialog,
+    DataTable
   },
   props: {
     platform: {
@@ -79,7 +80,27 @@ export default {
       account: {},
       initial: false,
       addAccountDialogVisible: false,
-      templateDialogVisible: false
+      templateDialogVisible: false,
+      iTableConfig: {
+        columns: [
+          {
+            prop: 'name',
+            label: this.$tc('assets.Name')
+          },
+          {
+            prop: 'username',
+            label: this.$tc('assets.Username')
+          },
+          {
+            prop: 'privileged',
+            label: this.$tc('assets.Privileged'),
+            formatter: (row) => {
+              return row.privileged ? this.$tc('common.Yes') : this.$tc('common.No')
+            }
+          }
+        ],
+        hasPagination: false
+      }
     }
   },
   watch: {