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
c1a492f790
commit
daf4f0ce00
3 changed files with 235 additions and 16 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. 125
      epmet-oper-web/src/views/modules/dyform/createFormItem.vue
  2. 23
      epmet-oper-web/src/views/modules/dyform/formList.vue
  3. 103
      epmet-oper-web/src/views/modules/dyform/itemList.vue

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

@ -0,0 +1,125 @@
<template>
<el-form v-model="formModel" :rules="createRules">
<el-form-item prop="" label="分组">
<el-select v-model="formModel.itemGroupId" @change="onGroupChanged">
<el-option v-for="group in groupList"
:key="group.groupId"
:label="group.groupLabel"
:value="group.groupId">
</el-option>
</el-select>
</el-form-item>
<el-form-item prop="parentItemId" label="父组件">
<el-select v-model="formModel.parentItemId">
<el-option v-for="pi in parentItemsList"
:key="pi.id"
:label="pi.label"
:value="pi.id">
</el-option>
</el-select>
</el-form-item>
</el-form>
</template>
<script>
export default {
data() {
return {
// 表单内容
formModel: {
customerId: null,
formId: null,
itemGroupId: null,
parentItemId: null,
label: null,
itemType: null,
required: null,
optionSourceType: null,
optionSourceValue: null
},
createRules: {},
formList: [],
// 分组列表
groupList: [],
parentItemsList: []
}
},
activated() {
},
methods: {
initData({formId: formId, customerId: customerId}) {
this.formModel.formId = formId;
this.formModel.customerId = customerId;
this.loadGroups();
},
// 加载分组列表
loadGroups() {
this.$http.get(`/oper/customize/icform/config/listGroups?formId=${this.formModel.formId}&customerId=${this.formModel.customerId}`)
.then((resp) => {
let { data: result } = resp;
if (result.code !== 0) {
this.$message({
type: 'error',
message: result.msg
})
return;
}
this.groupList = result.data;
})
},
// /**
// * 加载表单列表
// */
// 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
// })
// }
// })
// },
/**
* 分组选中
*/
onGroupChanged() {
this.$http.get(`/oper/customize/icform/config/listItems?customerId=${this.formModel.customerId}&formId=${this.formModel.formId}&itemGroupId=${this.formModel.itemGroupId}`)
.then((resp) => {
let result = resp.data
if (result.code !== 0) {
this.$message({
message: result.msg,
type: 'error'
});
return;
}
this.parentItemsList = result.data;
})
},
onFormChanged() {
this.loadGroups();
}
}
}
</script>

23
epmet-oper-web/src/views/modules/dyform/formList.vue
View File

@ -54,6 +54,13 @@
prop="formName"
label="表单名称">
</el-table-column>
<el-table-column>
<template v-slot="scope">
<el-button type="text" @click="onEditItemsBtnClicked(scope.row)">
编辑表单
</el-button>
</template>
</el-table-column>
</el-table>
<el-pagination
@ -92,7 +99,7 @@ export default {
components: {},
activated() {
this.$nextTick(() => {
this.$refs.table.doLayout(); // 解决表格错位
// this.$refs.table.doLayout(); // 解决表格错位
});
},
mounted() {
@ -168,6 +175,20 @@ export default {
if (loading) {
loading.close();
}
},
/**
* 编辑表单项按钮按下
*/
onEditItemsBtnClicked(row) {
this.$router.push({
path: '/dyform-itemList',
query: {
customerIdFixed: 1,
customerId: row.customerId,
formId: row.id
}
})
}
}
};

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

@ -3,7 +3,8 @@
<el-card shadow="never" class="aui-card--fill">
<el-form :inline="true" ref="queryForm" :model="formQueryParams" :rules="formQueryRules">
<el-form-item label="选择客户" prop="customerId">
<el-select v-model="formQueryParams.customerId" clearable placeholder="请选择" @change="onCustomerSelChanged">
<!-- @change="onCustomerSelChanged"-->
<el-select v-model="formQueryParams.customerId" clearable placeholder="请选择" :disabled="customerIdFixed">
<el-option
v-for="item in customerList"
:key="item.customerId"
@ -13,7 +14,7 @@
</el-select>
</el-form-item>
<el-form-item label="选择表单" prop="formId">
<el-select v-model="formQueryParams.formId" clearable placeholder="请选择">
<el-select v-model="formQueryParams.formId" clearable placeholder="请选择" :disabled="customerIdFixed">
<el-option
v-for="item in formList"
:key="item.id"
@ -29,6 +30,11 @@
<!-- <el-button @click="onResetBtnClicked">重置</el-button>-->
</el-form-item>
</el-form>
<!-- 按钮组-->
<el-button-group>
<el-button type="primary" @click="onAddBtnClicked">新增</el-button>
</el-button-group>
</el-card>
<el-card>
@ -62,6 +68,11 @@
{{ scope.row.optionSourceType == 'local' ? '直接定义' : 'api获取' }}
</template>
</el-table-column>
<el-table-column prop="required" label="是否必填" width="80">
<template v-slot="scope">
{{ scope.row.required ? '是' : '否' }}
</template>
</el-table-column>
<el-table-column
prop="optionSourceValue"
label="选项来源值">
@ -76,16 +87,22 @@
</el-table-column>
</el-table>
</el-card>
<el-dialog ref="createFormItemDlg" title="新增" :visible.sync="createDlgVisible">
<CreateFormItem ref="createFormItemComp"></CreateFormItem>
</el-dialog>
</div>
</template>
<script>
import {mapGetters} from 'vuex';
import {Loading} from 'element-ui'; // 引入Loading服务
import CreateFormItem from './createFormItem'
let loading; // 加载动画
export default {
components: {
CreateFormItem
},
data() {
return {
formQueryParams: {
@ -99,33 +116,57 @@ export default {
formId: [{required: true, message: '请选择表单'}]
},
formItemList: [],
mergeCellMap: {}
mergeCellMap: {},
createDlgVisible: false,
customerIdFixed: false
}
},
mounted() {
this.loadCustomerList();
// 每次页面进入都会执行
async activated() {
this.customerIdFixed = this.$route.query.customerIdFixed === '1';
let formId = this.$route.query.formId
let customerId = this.$route.query.customerId;
this.loadCustomerList()
.then(() => {
if (this.customerIdFixed) {
this.formQueryParams.customerId = customerId;
}
})
.then(async () => {
await this.loadFormList();
})
.then(() => {
console.log('自动选中1')
if (this.customerIdFixed) {
this.formQueryParams.formId = formId;
console.log('自动选中1:', this.formQueryParams.formId)
}
});
},
methods: {
/**
* 加载客户列表
*/
loadCustomerList() {
this.$http.get('/oper/crm/customer/getvalidcustomerlist').then(({data: res}) => {
async loadCustomerList() {
await 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.formQueryParams.customerId}&formName=&pageNo=1&pageSize=100`)
async loadFormList() {
await this.$http.get(`/oper/customize/icform/config/listForms?customerId=${this.formQueryParams.customerId}&formName=&pageNo=1&pageSize=100`)
.then(({data: httpdata, status: httpStatus}) => {
if (httpdata.code === 0) {
this.formList = httpdata.data.list;
@ -135,6 +176,8 @@ export default {
nessage: res.msg
})
}
console.log('客户加载完成')
})
},
@ -187,8 +230,14 @@ export default {
let formCode = rowData.formCode;
let itemGroupName = rowData.itemGroupName;
let {groupChanged: formCodeGroupChanged, mergeRowsQty4LastRow: formCodeMergeRowsQty4LastRow} = this.setAndGetMergeRows('formCode', formCode);
let {groupChanged: groupGroupChanged, mergeRowsQty4LastRow: groupMergeRowsQty4LastRow} = this.setAndGetMergeRows('groupName', itemGroupName);
let {
groupChanged: formCodeGroupChanged,
mergeRowsQty4LastRow: formCodeMergeRowsQty4LastRow
} = this.setAndGetMergeRows('formCode', formCode);
let {
groupChanged: groupGroupChanged,
mergeRowsQty4LastRow: groupMergeRowsQty4LastRow
} = this.setAndGetMergeRows('groupName', itemGroupName);
// 若合并的分组变了，那么给上一条数据设置上值
if (formCodeGroupChanged) {
@ -281,11 +330,35 @@ export default {
if (columnKey === 'itemGroupName') {
rst = [row.groupNameMergeRows, 1];
console.log(columnKey, ":", rst)
}
return rst;
},
/**
* "新增"按钮按下
*/
onAddBtnClicked() {
this.createDlgVisible = true;
this.$nextTick(() => {
this.$refs['createFormItemComp'].initData({
formId: this.formQueryParams.formId,
customerId: this.formQueryParams.customerId
})
})
},
},
watch: {
// 监听对象中的属性
'formQueryParams.customerId': {
handler: function (newVal, oldVal) {
// 要在watch中调用函数，不能使用箭头函数定义回调，必须用function
this.loadFormList();
},
immediate: true
},
}
}
}
</script>

Write Preview
Loading…
Cancel
Save