功能变化: 添加一对多组件

web/src/components/foreign-key-crud-form/foreign-key-crud-form.vue

@@ -0,0 +1,200 @@
+<template>
+  <div>
+    <el-row>
+      <el-col :span="elProps.index.span" v-if="elProps.index">
+        <div style="text-align: center">{{ elProps.index.name }}</div>
+      </el-col>
+      <el-col :span="elProps.fields[key].span" v-for="(_, key) in elProps.fields" :key="key">
+        <div style="text-align: center">{{ elProps.fields[key].name }}</div>
+      </el-col>
+      <el-col :span="2">
+        <div style="text-align: center">操作</div>
+      </el-col>
+    </el-row>
+    <el-form :model="currentForm" ref="currentFormRef" label-width="0px" size="mini" type="flex">
+      <el-row style="margin-bottom: 0px" :gutter="5" v-for="(field, index) in currentForm.data" :key="index">
+        <el-col :span="elProps.index.span" v-if="elProps.index">
+          <div style="text-align: center">
+            {{index+1}}
+          </div>
+        </el-col>
+        <el-col :span="elProps.fields[key].span" v-for="(_,key) in elProps.fields" :key="key">
+          <el-form-item
+            :prop="'data.' + index + '.' + key"
+            :rules="[
+                { required: elProps.fields[key].required, message: '不能为空', trigger: 'blur' },
+              ]"
+          >
+            <el-select v-model="field[key]" v-if="elProps.fields[key].type === 'select'" placeholder="请选择">
+              <el-option
+                v-for="item in elProps.fields[key].option"
+                :key="item.value"
+                :label="item.label"
+                :value="item.value">
+              </el-option>
+            </el-select>
+            <el-input-number style="width: 100%" v-else-if="elProps.fields[key].type === 'number'" controls-position="right" v-model="field[key]"></el-input-number>
+            <el-input v-model="field[key]" v-else placeholder="请输入"></el-input>
+          </el-form-item>
+        </el-col>
+        <el-col :span="4">
+          <el-form-item>
+          <el-button @click.prevent="topDomain(index)" :disabled="index === 0" type="primary" circle icon="el-icon-top"></el-button>
+          <el-button @click.prevent="bottomDomain(index)" :disabled="index === currentForm.data.length - 1" type="primary" circle icon="el-icon-bottom"></el-button>
+          <el-button @click.prevent="removeDomain(index)" type="danger" circle icon="el-icon-delete"></el-button>
+          </el-form-item>
+        </el-col>
+      </el-row>
+      <el-form-item>
+        <el-col :span="12">
+          <el-button type="primary" @click="addDomain">新增</el-button>
+        </el-col>
+      </el-form-item>
+    </el-form>
+  </div>
+</template>
+<script>
+export default {
+  name: 'foreignKeyCrudForm',
+  model: {
+    prop: 'value',
+    event: ['change', 'input']
+  },
+  props: {
+    elProps: {
+      type: Object,
+      default () {
+        return {
+          index: {
+            name: '序号',
+            span: 2
+          },
+          fields: {
+            description: {
+              name: '内容描述',
+              type: 'input',
+              span: 10,
+              default: null,
+              required: true
+            },
+            content: {
+              name: '类型',
+              type: 'select',
+              span: 4,
+              default: 0,
+              required: true,
+              options: [{
+                value: '0',
+                label: '单选项'
+              }, {
+                value: '1',
+                label: '多选项'
+              }, {
+                value: '2',
+                label: '单行填空'
+              }, {
+                value: '3',
+                label: '多行填空'
+              }]
+            },
+            score: {
+              name: '分数',
+              type: 'number',
+              span: 4,
+              default: 0,
+              required: true,
+              min: 0,
+              max: null
+            }
+          }
+        }
+      }
+    },
+    value: {
+      type: Array,
+      required: false
+    }
+  },
+  data () {
+    return {
+    }
+  },
+  computed: {
+    // eslint-disable-next-line vue/return-in-computed-property
+    submitForm () {
+      let res = ''
+      this.$refs.currentFormRef.validate((valid) => {
+        if (valid) {
+          const { data } = this.currentForm
+          res = data
+        } else {
+          console.log('error submit!!')
+          return false
+        }
+      })
+      return res
+    },
+    currentForm () {
+      console.log(1212, this.value)
+      if (!this.value || !this.value[0]) {
+        const fields = {
+          _id: this.value?.length || 0
+        }
+        for (const key in this.elProps.fields) {
+          fields[key] = this.elProps.fields[key].default || null
+        }
+        this.$emit('change', [fields])
+        this.$emit('input', [fields])
+        return {
+          data: [fields]
+        }
+      }
+      return {
+        data: this.value
+      }
+    }
+  },
+  created () {
+  },
+  methods: {
+    // 数组元素互换位置，并且替换顺序
+    swapArray (arr, index1, index2) {
+      arr[index1] = arr.splice(index2, 1, arr[index1])[0]
+      arr[index2].sort = index2 + 1
+      arr[index1].sort = index1 + 1
+      return arr
+    },
+    // 删除
+    removeDomain (index) {
+      this.currentForm.data.splice(index, 1)
+      this.$emit('change', this.currentForm.data)
+      this.$emit('input', this.currentForm.data)
+    },
+    // 上移
+    topDomain (index) {
+      this.swapArray(this.currentForm.data, index - 1, index)
+      this.$emit('change', this.currentForm.data)
+      this.$emit('input', this.currentForm.data)
+    },
+    // 下移
+    bottomDomain (index) {
+      this.swapArray(this.currentForm.data, index, index + 1)
+      this.$emit('change', this.currentForm.data)
+      this.$emit('input', this.currentForm.data)
+    },
+    // 新增
+    addDomain () {
+      const fields = {
+        _id: this.value.length
+      }
+      for (const key in this.elProps.fields) {
+        fields[key] = this.elProps.fields[key].default || null
+      }
+      console.log(12121212, this.currentForm.data, fields)
+      this.currentForm.data.push(fields)
+      this.$emit('change', this.currentForm.data)
+      this.$emit('input', this.currentForm.data)
+    }
+  }
+}
+</script>

web/src/components/foreign-key-crud-form/group.js

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

web/src/components/foreign-key-crud-form/index.js

@@ -0,0 +1,15 @@
+import { d2CrudPlus } from 'd2-crud-plus'
+import group from './group'
+
+function install (Vue, options) {
+  Vue.component('foreign-key-crud-form', () => import('./foreign-key-crud-form'))
+  if (d2CrudPlus != null) {
+    // 注册字段类型`demo-extend`
+    d2CrudPlus.util.columnResolve.addTypes(group)
+  }
+}
+
+// 导出install， 通过`vue.use(D2pDemoExtend)`安装后 ，`demo-extend` 就可以在`crud.js`中使用了
+export default {
+  install
+}

web/src/components/index.js

@@ -5,6 +5,7 @@ import tableProgress from './table-progress/lib/table-progress.vue'
 import cardSelect from '@/components/card-select/index'
 import selectorTable from '@/components/selector-table/index'
 import valuesPopover from '@/components/values-popover/index'
+import foreignKeyCrudForm from '@/components/foreign-key-crud-form/index'
 // 注意 有些组件使用异步加载会有影响
 Vue.component('d2-container', d2Container)
 Vue.component('d2-icon', () => import('./d2-icon'))
@@ -19,3 +20,4 @@ Vue.component('table-progress', tableProgress)
 Vue.use(selectorTable)
 Vue.use(cardSelect)
 Vue.use(valuesPopover)
+Vue.use(foreignKeyCrudForm)

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

@@ -112,8 +112,17 @@ export default {
     },
     getListData () {
       const params = {}
-      params[this.dict.value] = this.value
+      if (this.value.constructor === Array) {
+        const ids = []
+        this.value.map(res => {
+          ids.push(res[this.dict.value])
+        })
+        params[this.dict.value] = ids
+      } else {
+        params[this.dict.value] = this.value
+      }
       params.query = `{${this.dict.value},${this.dict.label}}`
+      console.log(12, params)
       request({ url: this.dict.url, params: params }).then(ret => {
         this.data = ret.data.data || ret.data
       })