功能变化: 新增多对多value值展示组件

web/src/components/index.js

@@ -4,6 +4,7 @@ import d2Container from './d2-container'
 import tableProgress from './table-progress/lib/table-progress.vue'
 import cardSelect from '@/components/card-select/index'
 import selectorTable from '@/components/selector-table/index'
+import m2mValuesPopover from '@/components/m2m-values-popover/index'
 // 注意 有些组件使用异步加载会有影响
 Vue.component('d2-container', d2Container)
 Vue.component('d2-icon', () => import('./d2-icon'))
@@ -17,3 +18,4 @@ Vue.component('dvaHtml2pdf', () => import('./dvaHtml2pdf/index.vue'))
 Vue.component('table-progress', tableProgress)
 Vue.use(selectorTable)
 Vue.use(cardSelect)
+Vue.use(m2mValuesPopover)

web/src/components/m2m-values-popover/group.js

@@ -0,0 +1,10 @@
+export default {
+  // 字段类型配置，注册之后即可在crud.js中使用了
+  'values-popover': {
+    // 行组件配置
+    component: { name: 'values-popover' },
+    // 行展示时居中
+    align: 'center'
+    // 您还可以写更多默认配置
+  }
+}

web/src/components/m2m-values-popover/index.js

@@ -0,0 +1,14 @@
+import { d2CrudPlus } from 'd2-crud-plus'
+import group from './group'
+
+function install (Vue, options) {
+  Vue.component('m2m-values-popover', () => import('./m2m-values-popover'))
+  if (d2CrudPlus != null) {
+    // 注册字段类型`demo-extend`
+    d2CrudPlus.util.columnResolve.addTypes(group)
+  }
+}
+// 导出install
+export default {
+  install
+}

web/src/components/m2m-values-popover/m2m-values-popover.vue

@@ -0,0 +1,105 @@
+<!-- 多对多value值展示组件 -->
+<template>
+  <div>
+    <el-popover
+      placement="right"
+      width="400"
+      trigger="hover"
+      v-if="value.length > 0"
+      @show="showEvents">
+      <el-descriptions class="margin-top" :column="1" size="mini" border>
+<!--        <template slot="extra">-->
+<!--          <el-button type="primary" size="mini" disabled>上一页</el-button>-->
+<!--          <el-button type="primary" size="mini" disabled>下一页</el-button>-->
+<!--        </template>-->
+        <el-descriptions-item v-for="(item,index) in data" :key="index">
+          <template slot="label">
+            <i class="el-icon-user"></i>
+            {{ elProps.label }}
+          </template>
+          {{ item[dict.label] }}
+        </el-descriptions-item>
+      </el-descriptions>
+      <el-button type="primary" plain size="mini" slot="reference"><span> {{ value.length }} {{elProps.unit}}</span>
+      </el-button>
+    </el-popover>
+    <el-button v-else type="primary" plain size="mini" slot="reference"><span> {{ value.length }} {{elProps.unit}}</span>
+      </el-button>
+  </div>
+</template>
+
+<script>
+import { d2CrudPlus } from 'd2-crud-plus'
+import { request } from '@/api/service'
+
+export default {
+  name: 'm2m-values-popover',
+  model: {
+    prop: 'value',
+    event: ['change', 'input']
+  },
+  mixins: [d2CrudPlus.input, d2CrudPlus.inputDict],
+  props: {
+    // 值
+    value: {
+      type: [String, Number, Array],
+      required: false,
+      default: ''
+    },
+    // 数据字典配置
+    dict: {
+      type: Object,
+      require: true
+    },
+    // 其他配置
+    elProps: {
+      type: Object,
+      require: false,
+      default () {
+        return {
+          type: 'text', // test/tree
+          rowKey: 'users',
+          label: '标题',
+          unit: '个'
+        }
+      }
+    }
+  },
+  data () {
+    return {
+      data: []
+    }
+  },
+  value: {
+    handler (value, oldVal) {
+      this.showEvents()
+    },
+    deep: true
+  },
+  computed: {
+    _elProps () {
+      return this.elProps
+    }
+  },
+  mounted () {
+  },
+  methods: {
+    showEvents () {
+      if (!this.data[0]) {
+        this.getData()
+      }
+    },
+    getData () {
+      const params = {}
+      params[this.dict.value] = this.value
+      params.query = `{${this.dict.value},${this.dict.label}}`
+      request({ url: this.dict.url, params: params }).then(ret => {
+        this.data = ret.data.data || ret.data
+      })
+    }
+  }
+}
+</script>
+<style scoped>
+
+</style>