功能变化: 添加一对多组件
李强
parent
227e1393a4
commit
2dfb4c80a9
Binary file not shown.
|
After Width: | Height: | Size: 127 KiB |
|
|
@ -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>
|
||||
|
|
@ -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'
|
||||
// 您还可以写更多默认配置
|
||||
}
|
||||
}
|
||||
|
|
@ -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
|
||||
}
|
||||
|
|
@ -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)
|
||||
|
|
|
|||
|
|
@ -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
|
||||
})
|
||||
|
|
|
|||
Loading…
Reference in New Issue