jeecg-boot 表单选择一条数据保存
HTML(新增form)
<a-col :span="24">
<a-form-item label="专题学习表名称" :labelCol="labelCol" :wrapperCol="wrapperCol">
<!-- <a-input v-decorator="['studyName', validatorRules.studyName]" placeholder="请输入专题学习表名称"></a-input> -->
<share-basic-info-select-list placeholder="请选择专题学习表" v-decorator="['studyName', validatorRules.studyName]" @select="selectContentOK" ref="modalForm" />
</a-form-item>
</a-col>
引用
import ShareBasicInfoSelectList from "./ShareBasicInfoSelectList.vue"
components: {
ShareBasicInfoSelectList,
},
submitForm中要添加(实体有studyId,studyName字段)
if(this.model.studyName != null){
formData.studyId = this.studyId
}else{
alert("专题学习为空!");
that.confirmLoading = false;
return null;
}
方法
// 专题学习信息
selectContentOK(row) {
let studyId = null;
let studyName = null;
if (row.length > 0){
for (let i = 0, len = row.length; i < len; i++) {
studyId = row[i]['id'];
studyName = row[i]['name'];
}
this.$nextTick(() => {
this.form.setFieldsValue({
'studyId': studyId,
'studyName': studyName,
});
})
this.studyId = studyId
}else{
this.form.setFieldsValue({
'studyId': studyId,
'studyName': studyName,
});
this.studyId = studyId
}
},
ShareBasicInfoSelectList页面
<template>
<j-select-biz-component
:value="value"
name="专题学习"
displayKey="name"
:returnKeys="returnKeys"
:listUrl="url.list"
:columns="columns"
queryParamText="专题学习名称"
queryParamCode="name"
:multiple="multiple"
v-on="$listeners"
v-bind="$attrs"
:width="1200"
:ellipsisLength="20"
/>
</template>
<script>
import JSelectBizComponent from '@/components/jeecgbiz/JSelectBizComponent'
export default {
name: 'ShareBasicInfoSelectList',
components: { JSelectBizComponent },
props: ['value'],
data() {
return {
multiple:false,
returnKeys: ['id','id'],
url: { list: '/xxx/xxxStudyInfo/list' },
columns: [
{ title: '专题学习名称', dataIndex: 'name', align: 'center', width: '50%' },
{ title: '教育资源类型', dataIndex: 'type_dictText', align: 'center', width: '50%' }
],
}
}
}
</script>
<style lang="less" scoped></style>
url放后端你想要的列表接口即可