elink-star
/
epmet-oper-pc-chengyang
12
0
Fork 0
Code Issues Pull Requests Projects Releases Wiki Activity
Browse Source

动态表单配置

preview
wxz 2 years ago
parent
1b6f0e073e
commit
0e256d0ac5
2 changed files with 129 additions and 41 deletions
Whitespace
Show all changes Ignore whitespace when comparing lines Ignore changes in amount of whitespace Ignore changes in whitespace at EOL
Split View
Diff Options
Show Stats Download Patch File Download Diff File
  1. 146
      epmet-oper-web/src/views/modules/dyform/createFormItem.vue
  2. 12
      epmet-oper-web/src/views/modules/dyform/itemList.vue

146
epmet-oper-web/src/views/modules/dyform/createFormItem.vue
View File

@ -1,5 +1,25 @@
<template>
<el-form :model="formModel" :rules="createRules" ref="createForm">
<el-form-item prop="customerId" label="客户" label-width="100px">
<el-select v-model="formModel.customerId" @change="onCustomerChanged" :disabled="customerIdFixed">
<el-option
v-for="item in customerList"
:key="item.customerId"
:label="item.customerName"
:value="item.customerId">
</el-option>
</el-select>
</el-form-item>
<el-form-item label="选择表单" prop="formId" label-width="100px">
<el-select v-model="formModel.formId" clearable placeholder="请选择" @change="onFormChanged" :disabled="customerIdFixed">
<el-option
v-for="item in formList"
:key="item.id"
:label="item.formName"
:value="item.id">
</el-option>
</el-select>
</el-form-item>
<el-form-item prop="itemGroupId" label="分组" label-width="100px">
<el-select v-model="formModel.itemGroupId" @change="onGroupChanged">
<el-option v-for="group in groupList"
@ -18,7 +38,12 @@
</el-option>
</el-select>
</el-form-item>
<el-form-item prop="tableName" label="数据库表名称" label-width="100px">
<el-input v-model="formModel.tableName"></el-input>
</el-form-item>
<el-form-item prop="columnName" label="数据库列名称" label-width="100px">
<el-input v-model="formModel.columnName"></el-input>
</el-form-item>
<el-form-item prop="label" label="名称" label-width="100px">
<el-input v-model="formModel.label" style="width: 198px"></el-input>
</el-form-item>
@ -40,7 +65,8 @@
</el-form-item>
<el-form-item prop="itemType" label="选项来源" label-width="100px">
<el-input v-model="formModel.optionSourceValueStr" :disabled="optionSourceTypeDisabled" placeholder="如果是为直接定义，格式请保持为: value1:label1,vaalue2:label2。如果是调用api则定义api地址（全为半角符号）"></el-input>
<el-input v-model="formModel.optionSourceValue" :disabled="optionSourceTypeDisabled"
placeholder="如果是为直接定义，格式请保持为: value1:label1,vaalue2:label2。如果是调用api则定义api地址（全为半角符号）"></el-input>
</el-form-item>
<el-button @click="onSubmitBtnClick" type="primary">提交</el-button>
@ -59,28 +85,33 @@ export default {
itemGroupId: null,
parentItemId: null,
label: null,
tableName: null,
columnName: null,
itemType: null,
required: null,
optionSourceType: null,
optionSourceValue: null
},
customerIdFixed: false,
customerList: [],
formList: [],
optionSourceTypeDisabled: false,
createRules: {
customerId: [
{ required: true, message: '客户为必填项' }
],
formId: [
{ required: true, message: '表单为必填项' }
],
itemGroupId: [
{required: true, message: '分组为必填项'}
],
parentItemId: [
{ required:true, message:'父组件为必填项' }
],
label: [
{required: true, message: '名称为必填项'}
],
itemType: [
{required: true, message: '组件类型为必填项'}
],
required: [
{ required:true, message:'是否必填为必填项' }
],
optionSourceType: [
{required: true, message: '选项来源类型为必填项'}
]
@ -89,7 +120,6 @@ export default {
],
},
formList: [],
// 分组列表
groupList: [],
@ -140,13 +170,29 @@ export default {
},
activated() {
// this.loadCustomerList()
this.initData({})
},
methods: {
initData({formId: formId, customerId: customerId}) {
this.formModel.formId = formId;
this.formModel.customerId = customerId;
if (formId && customerId) {
this.customerIdFixed = true;
} else {
this.customerIdFixed = false;
}
this.loadCustomerList()
this.loadFormList()
this.loadGroups();
// console.log('执行了initData')
},
// 加载分组列表
@ -166,23 +212,39 @@ export default {
})
},
// /**
// * 加载表单列表
// */
// loadFormList() {
// debugger
// this.$http.get(`/oper/customize/icform/config/listForms?customerId=${this.formModel.customerId}&formName=&pageNo=1&pageSize=100`)
// .then(({data: httpdata, status: httpStatus}) => {
// if (httpdata.code === 0) {
// this.formList = httpdata.data.list;
// } else {
// this.$message({
// type: 'error',
// nessage: res.msg
// })
// }
// })
// },
/**
* 加载客户列表
*/
loadCustomerList() {
this.$http.get('/oper/crm/customer/getvalidcustomerlist').then(({data: res}) => {
if (res.code === 0) {
this.customerList = res.data;
this.customerList.unshift({"customerId": "default", "customerName": "模板"})
} else {
this.$message.error(res.msg)
}
console.log('客户加载完成')
})
},
/**
* 加载表单列表
*/
loadFormList() {
this.$http.get(`/oper/customize/icform/config/listForms?customerId=${this.formModel.customerId}&formName=&pageNo=1&pageSize=100`)
.then(({data: httpdata, status: httpStatus}) => {
if (httpdata.code === 0) {
this.formList = httpdata.data.list;
} else {
this.$message({
type: 'error',
nessage: res.msg
})
}
console.log('客户加载完成')
})
},
/**
* 分组选中
@ -225,10 +287,23 @@ export default {
return
}
this.$http.post()
})
this.$http.post(`/oper/customize/icform/config/createItem`, this.formModel).then(({status:httpStatus, data: httpData}) => {
if (httpData.code === 0) {
this.$message({
type: 'success',
message:"新增成功"
});
console.log(this.formModel)
this.resetForm()
this.$emit("onClose") // 关闭窗口
} else {
this.$message({
type: 'error',
message: httpData.msg
});
}
})
})
},
@ -236,8 +311,19 @@ export default {
* 取消
*/
onCancelBtnClick() {
this.resetForm()
this.$emit("onClose")
},
resetForm() {
this.$refs['createForm'].resetFields();
this.$emit("onCancel")
},
/**
* 客户选中事件
*/
onCustomerChanged() {
this.loadFormList()
},
onFormChanged() {

12
epmet-oper-web/src/views/modules/dyform/itemList.vue
View File

@ -88,8 +88,8 @@
</el-table>
</el-card>
<el-dialog ref="createFormItemDlg" title="新增" :visible.sync="createDlgVisible">
<CreateFormItem ref="createFormItemComp" @onCancel="onCancel"></CreateFormItem>
<el-dialog ref="createFormItemDlg" title="新增" :visible.sync="createDlgVisible" v-if="createDlgVisible">
<CreateFormItem ref="createFormItemComp" @onClose="onClose"></CreateFormItem>
</el-dialog>
</div>
</template>
@ -130,6 +130,7 @@ export default {
this.loadCustomerList()
.then(() => {
// 自动赋值
if (this.customerIdFixed) {
this.formQueryParams.customerId = customerId;
}
@ -138,10 +139,10 @@ export default {
await this.loadFormList();
})
.then(() => {
console.log('自动选中1')
// 自动赋值
if (this.customerIdFixed) {
this.formQueryParams.formId = formId;
console.log('自动选中1:', this.formQueryParams.formId)
this.loadItemList(); // 加载item列表
}
});
},
@ -348,8 +349,9 @@ export default {
})
},
onCancel() {
onClose() {
this.createDlgVisible = false;
}
},

Write Preview
Loading…
Cancel
Save