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

Merge branch 'wxz_dy_form_config' into dev

dev
wxz 2 years ago
parent
dff67fd673 d7c5309cee
commit
a30d581254
5 changed files with 1395 additions and 2 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. 4
      epmet-oper-web/.env.development
  2. 360
      epmet-oper-web/src/views/modules/dyform/createFormItem.vue
  3. 374
      epmet-oper-web/src/views/modules/dyform/editFormItem.vue
  4. 212
      epmet-oper-web/src/views/modules/dyform/formList.vue
  5. 447
      epmet-oper-web/src/views/modules/dyform/itemList.vue

4
epmet-oper-web/.env.development
View File

@ -3,6 +3,6 @@ NODE_ENV=development
VUE_APP_API_SERVER = http://192.168.1.144/api
# VUE_APP_API_SERVER = http://192.168.51.36:8080/api
# VUE_APP_API_SERVER = https://epmet-dev.elinkservice.cn/api
VUE_APP_NODE_ENV=dev
VUE_APP_NODE_ENV=dev
#项目根路径
VUE_APP_PUBLIC_PATH=epmet-oper
VUE_APP_PUBLIC_PATH=epmet-oper

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

@ -0,0 +1,360 @@
<template>
<el-form :model="formModel" :rules="createRules" ref="createForm">
<el-form-item prop="customerId" label="客户" label-width="150px">
<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="150px">
<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="150px">
<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="父组件" label-width="150px">
<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-item prop="tableName" label="数据库表名称" label-width="150px">
<el-input v-model="formModel.tableName"></el-input>
</el-form-item>
<el-form-item prop="columnName" label="数据库列名称" label-width="150px">
<el-input v-model="formModel.columnName"></el-input>
</el-form-item>
<el-form-item prop="label" label="名称" label-width="150px">
<el-input v-model="formModel.label" style="width: 198px"></el-input>
</el-form-item>
<el-form-item prop="required" label="是否必填" label-width="150px">
<el-checkbox v-model="formModel.required"></el-checkbox>
</el-form-item>
<el-form-item prop="exportFlag" label="是否用于导出" label-width="150px">
<el-checkbox v-model="formModel.exportFlag"></el-checkbox>
</el-form-item>
<el-form-item prop="policyFlag" label="是否用于政策找人" label-width="150px">
<el-checkbox v-model="formModel.policyFlag"></el-checkbox>
</el-form-item>
<el-form-item prop="itemType" label="组件类型" label-width="150px">
<el-select v-model="formModel.itemType" @change="onItemTypeChanged">
<el-option v-for="t in controls" :key="t.type" :value="t.type" :label="t.name"></el-option>
</el-select>
</el-form-item>
<el-form-item prop="itemType" label="选项来源类型" label-width="150px">
<el-select v-model="formModel.optionSourceType" :disabled="optionSourceTypeDisabled">
<el-option v-for="t in optionSources" :key="t.type" :value="t.type" :label="t.name"></el-option>
</el-select>
</el-form-item>
<el-form-item prop="itemType" label="选项来源" label-width="150px">
<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>
<el-button @click="onCancelBtnClick" type="primary">取消</el-button>
</el-form>
</template>
<script>
export default {
data() {
return {
// 表单内容
formModel: {
customerId: null,
formId: null,
itemGroupId: null,
parentItemId: null,
label: null,
tableName: null,
columnName: null,
itemType: null,
required: false,
optionSourceType: null,
optionSourceValue: null,
exportFlag: null,
policyFlag: null
},
customerIdFixed: false,
customerList: [],
formList: [],
optionSourceTypeDisabled: false,
createRules: {
customerId: [
{required: true, message: '客户为必填项'}
],
formId: [
{required: true, message: '表单为必填项'}
],
itemGroupId: [
{required: true, message: '分组为必填项'}
],
label: [
{required: true, message: '名称为必填项'}
],
itemType: [
{required: true, message: '组件类型为必填项'}
],
optionSourceType: [
{required: true, message: '选项来源类型为必填项'}
], exportFlag: [
{required: true, message: '是否可用于导出为必填项'}
], policyFlag: [
{required: true, message: '是否可用于政策找人为必填项'}
],
},
// 分组列表
groupList: [],
parentItemsList: [],
// 组件类型
controls: [
{
type: 'input',
name: '文本输入框',
}, {
type: 'inputNum',
name: '数字输入框',
}, {
type: 'textarea',
name: '多行文本域',
}, {
type: 'select',
name: '下拉框',
}, {
type: 'cascader',
name: '级联选择器',
}, {
type: 'radio',
name: '单选框',
}, {
type: 'checkbox',
name: '复选框',
}, {
type: 'datepicker',
name: '日期选择器',
}, {
type: 'divider',
name: '分割线',
}
],
optionSources: [
{
type: 'local',
name: '直接定义',
}, {
type: 'remote',
name: 'api获取',
}
]
}
},
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')
},
// 加载分组列表
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;
})
},
/**
* 加载客户列表
*/
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: httpdata.msg
})
}
console.log('客户加载完成')
})
},
/**
* 分组选中
*/
onGroupChanged() {
this.listItemsByGroupId();
},
/**
* 加载分组下的item列表
*/
listItemsByGroupId() {
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;
})
},
/**
* 组件类型选项变更
*/
onItemTypeChanged(newValue) {
if (['select', 'cascader', 'radio', 'checkbox'].indexOf(newValue) >= 0) {
// 如果是这些，则需要定义选项来源
this.optionSourceTypeDisabled = false;
this.optionSourceType = "local";
} else {
this.optionSourceTypeDisabled = true;
}
},
/**
* 提交
*/
onSubmitBtnClick() {
this.$refs['createForm'].validate(rst => {
if (!rst) {
return
}
this.$http.post(`/oper/customize/icform/config/createItem`, this.formModel).then(({status:httpStatus, data: httpData}) => {
if (httpData.code === 0) {
this.$message({
type: 'success',
message:"提交成功"
});
this.resetForm()
this.$emit("onClose", { type: 'submit' }) // 关闭窗口
} else {
this.$message({
type: 'error',
message: httpData.msg
});
}
})
})
},
/**
* 取消
*/
onCancelBtnClick() {
this.resetForm()
this.$emit("onClose", { type: 'cancel' })
},
resetForm() {
this.$refs['createForm'].resetFields();
},
/**
* 客户选中事件
*/
onCustomerChanged() {
this.loadFormList()
},
onFormChanged() {
this.loadGroups();
}
}
}
</script>
<style lang="scss">
.test {
width: 100px;
}
</style>

374
epmet-oper-web/src/views/modules/dyform/editFormItem.vue
View File

@ -0,0 +1,374 @@
<template>
<el-form :model="formModel" :rules="createRules" ref="editForm">
<el-form-item prop="customerId" label="客户" label-width="150px">
<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="150px">
<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="150px">
<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="父组件" label-width="150px">
<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-item prop="tableName" label="数据库表名称" label-width="150px">
<el-input v-model="formModel.tableName"></el-input>
</el-form-item>
<el-form-item prop="columnName" label="数据库列名称" label-width="150px">
<el-input v-model="formModel.columnName"></el-input>
</el-form-item>
<el-form-item prop="label" label="名称" label-width="150px">
<el-input v-model="formModel.label" style="width: 198px"></el-input>
</el-form-item>
<el-form-item prop="required" label="是否必填" label-width="150px">
<el-checkbox v-model="formModel.required"></el-checkbox>
</el-form-item>
<el-form-item prop="exportFlag" label="是否用于导出" label-width="150px">
<el-checkbox v-model="formModel.exportFlag"></el-checkbox>
</el-form-item>
<el-form-item prop="policyFlag" label="是否用于政策找人" label-width="150px">
<el-checkbox v-model="formModel.policyFlag"></el-checkbox>
</el-form-item>
<el-form-item prop="itemType" label="组件类型" label-width="150px">
<el-select v-model="formModel.itemType" @change="onItemTypeChanged">
<el-option v-for="t in controls" :key="t.type" :value="t.type" :label="t.name"></el-option>
</el-select>
</el-form-item>
<el-form-item prop="itemType" label="选项来源类型" label-width="150px">
<el-select v-model="formModel.optionSourceType" :disabled="optionSourceTypeDisabled">
<el-option v-for="t in optionSources" :key="t.type" :value="t.type" :label="t.name"></el-option>
</el-select>
</el-form-item>
<el-form-item prop="itemType" label="选项来源" label-width="150px">
<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>
<el-button @click="onCancelBtnClick" type="primary">取消</el-button>
</el-form>
</template>
<script>
export default {
data() {
return {
// 表单内容
formModel: {
id: null,
customerId: null,
formId: null,
itemGroupId: null,
parentItemId: null,
label: null,
tableName: null,
columnName: null,
itemType: null,
required: false,
optionSourceType: null,
optionSourceValue: null,
exportFlag: null,
policyFlag: null
},
customerIdFixed: false,
customerList: [],
formList: [],
optionSourceTypeDisabled: false,
createRules: {
customerId: [
{ required: true, message: '客户为必填项' }
],
formId: [
{ required: true, message: '表单为必填项' }
],
itemGroupId: [
{required: true, message: '分组为必填项'}
],
label: [
{required: true, message: '名称为必填项'}
],
itemType: [
{required: true, message: '组件类型为必填项'}
],
optionSourceType: [
{required: true, message: '选项来源类型为必填项'}
]
, optionSourceValue: [
{required: true, message: '选项来源为必填项'}
], exportFlag: [
{required: true, message: '是否可用于导出为必填项'}
], policyFlag: [
{required: true, message: '是否可用于政策找人为必填项'}
],
},
// 分组列表
groupList: [],
parentItemsList: [],
// 组件类型
controls: [
{
type: 'input',
name: '文本输入框',
}, {
type: 'inputNum',
name: '数字输入框',
}, {
type: 'textarea',
name: '多行文本域',
}, {
type: 'select',
name: '下拉框',
}, {
type: 'cascader',
name: '级联选择器',
}, {
type: 'radio',
name: '单选框',
}, {
type: 'checkbox',
name: '复选框',
}, {
type: 'datepicker',
name: '日期选择器',
}, {
type: 'divider',
name: '分割线',
}
],
optionSources: [
{
type: 'local',
name: '直接定义',
}, {
type: 'remote',
name: 'api获取',
}
]
}
},
activated() {
// this.loadCustomerList()
this.initData({})
},
methods: {
initData(id) {
this.customerIdFixed = true;
this.getItemDetail(id).then(() => {
this.loadCustomerList()
this.loadFormList()
this.loadGroups();
this.listItemsByGroupId()
})
},
/**
* 加载详情
*/
async getItemDetail(id) {
await this.$http.get(`/oper/customize/icform/config/getFormItemDetail?formItemId=${id}`).then(({status: httpStatus, data: result}) => {
if (result.code !== 0) {
this.$message({
type: 'error',
message: result.msg
})
return
}
this.formModel = result.data
})
},
// 加载分组列表
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;
})
},
/**
* 加载客户列表
*/
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',
message: httpdata.msg
})
}
console.log('客户加载完成')
})
},
/**
* 分组选中
*/
onGroupChanged() {
this.listItemsByGroupId();
},
/**
* 加载分组下的item列表
*/
listItemsByGroupId() {
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;
})
},
/**
* 组件类型选项变更
*/
onItemTypeChanged(newValue) {
if (['select', 'cascader', 'radio', 'checkbox'].indexOf(newValue) >= 0) {
// 如果是这些，则需要定义选项来源
this.optionSourceTypeDisabled = false;
this.optionSourceType = "local";
} else {
this.optionSourceTypeDisabled = true;
}
},
/**
* 提交
*/
onSubmitBtnClick() {
this.$refs['editForm'].validate(rst => {
if (!rst) {
return
}
this.$http.post(`/oper/customize/icform/config/updateItem`, this.formModel).then(({status:httpStatus, data: httpData}) => {
if (httpData.code === 0) {
this.$message({
type: 'success',
message:"提交成功"
});
this.resetForm()
this.$emit("onClose", { type: 'submit' }) // 关闭窗口
} else {
this.$message({
type: 'error',
message: httpData.msg
});
}
})
})
},
/**
* 取消
*/
onCancelBtnClick() {
this.resetForm()
this.$emit("onClose", { type: 'cancel' })
},
resetForm() {
this.$refs['editForm'].resetFields();
},
/**
* 客户选中事件
*/
onCustomerChanged() {
this.loadFormList()
},
onFormChanged() {
this.loadGroups();
}
}
}
</script>
<style lang="scss">
.test {
width: 100px;
}
</style>

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

@ -0,0 +1,212 @@
<template>
<div class="registerList">
<el-card shadow="never" class="aui-card--fill">
<div class="mod-demo__demo}">
<el-form :inline="true" ref="queryForm" :model="formQueryParams">
<el-form-item label="选择客户" prop="customerId">
<el-select v-model="formQueryParams.customerId" clearable placeholder="请选择">
<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="formName">
<el-input
placeholder="请输入内容"
v-model="formQueryParams.formName"
clearable>
</el-input>
</el-form-item>
<el-form-item>
<el-button @click="onSearchClicked">搜索</el-button>
</el-form-item>
<el-form-item>
<el-button @click="onResetBtnClicked">重置</el-button>
</el-form-item>
</el-form>
</div>
</el-card>
<el-card>
<el-table
:data="formList"
style="width: 100%;margin-bottom: 20px;"
row-key="id"
border
default-expand-all
:tree-props="{children: 'children', hasChildren: 'hasChildren'}">
<el-table-column
prop="customerName"
label="客户"
sortable
width="180">
</el-table-column>
<el-table-column
prop="formCode"
label="表单编码"
sortable
width="180">
</el-table-column>
<el-table-column
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
background
layout="prev, pager, next"
@current-change="onCurrentPageChanged"
:current-page="this.pageArgs.currentPage"
:page-size="this.pageArgs.pageSize"
:total="this.pageArgs.total">
</el-pagination>
</el-card>
</div>
</template>
<script>
import {mapGetters} from 'vuex';
import {Loading} from 'element-ui'; // 引入Loading服务
let loading; // 加载动画
export default {
data() {
return {
customerList: [],
formQueryParams: {
customerId: '',
formName: ''
},
formList: [],
pageArgs: {
pageSize: 20,
currentPage: 1,
total: 0
}
};
},
components: {},
activated() {
this.$nextTick(() => {
// this.$refs.table.doLayout(); // 解决表格错位
});
},
mounted() {
// eslint-disable-next-line
this.loadCustomerList();
this.searchFormList();
},
computed: {
tableHeight() {
return this.clientHeight - 60 - 80 - 80 - 70;
},
...mapGetters(['clientHeight', 'env'])
},
methods: {
/**
* 加载客户列表
*/
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)
}
})
},
searchFormList() {
this.$http.get(`/oper/customize/icform/config/listForms?customerId=${this.formQueryParams.customerId}&formName=${this.formQueryParams.formName}&pageNo=${this.pageArgs.currentPage}&pageSize=${this.pageArgs.pageSize}`)
.then(({data: httpdata, status: httpStatus}) => {
if (httpdata.code === 0) {
this.formList = httpdata.data.list;
this.pageArgs.total = httpdata.data.total;
} else {
this.$message({
type: 'error',
nessage: res.msg
})
}
console.log(this.pageArgs)
})
},
/**
* 搜索事件
*/
onSearchClicked() {
this.searchFormList();
},
onResetBtnClicked() {
this.$refs['queryForm'].resetFields();
},
onCurrentPageChanged(currPage) {
this.pageArgs.currentPage = currPage;
this.searchFormList();
},
// 开启加载动画
startLoading() {
loading = Loading.service({
lock: true, // 是否锁定
text: '正在加载……', // 加载中需要显示的文字
background: 'rgba(0,0,0,.7)' // 背景颜色
});
},
// 结束加载动画
endLoading() {
// clearTimeout(timer);
if (loading) {
loading.close();
}
},
/**
* 编辑表单项按钮按下
*/
onEditItemsBtnClicked(row) {
this.$router.push({
path: '/dyform-itemList',
query: {
customerIdFixed: 1,
customerId: row.customerId,
formId: row.id
}
})
}
}
};
</script>
<style lang="css">
.aaa {
height: 100px;
}
/* .register .el-table .el-table__header-wrapper {
position: absolute;
top: 0;
left: 0;
}*/
/*
.register .el-table .el-table__fixed-body-wrapper {
height: calc(100% - 44px);
margin-top: 44px;
overflow-y: auto !important;
} */
</style>

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

@ -0,0 +1,447 @@
<template>
<div>
<el-card shadow="never" class="aui-card--fill">
<el-form :inline="true" ref="queryForm" :model="formQueryParams" :rules="formQueryRules">
<el-form-item label="选择客户" prop="customerId">
<!-- @change="onCustomerSelChanged"-->
<el-select v-model="formQueryParams.customerId" clearable placeholder="请选择" :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">
<el-select v-model="formQueryParams.formId" clearable placeholder="请选择" :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>
<el-button @click="onSearchClicked">搜索</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>
<!-- :span-method="mergeCells"-->
<!-- default-expand-all-->
<el-table
:data="formItemList"
:span-method="mergeCells"
style="width: 100%"
row-key="id"
border
:tree-props="{children: 'children'}">
<el-table-column
prop="formCode"
label="表单编码"
width="180">
</el-table-column>
<el-table-column
prop="itemGroupName"
label="所属分组"
width="180">
</el-table-column>
<el-table-column
prop="label"
label="表单项名称"
width="180">
</el-table-column>
<el-table-column
prop="parentItemLabel"
label="上级表单项"
width="180">
</el-table-column>
<el-table-column
prop="optionSourceType"
label="选项来源类型">
<template slot-scope="scope">
{{ 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="选项来源值">
</el-table-column>
<el-table-column
prop="tableName"
label="数据库表名">
</el-table-column>
<el-table-column
prop="columnName"
label="数据库列名">
</el-table-column>
<el-table-column
prop="exportFlag"
label="是否用于导出">
<template v-slot="scope">
{{ scope.row.exportFlag === 1 ? '是' : '否' }}
</template>
</el-table-column>
<el-table-column
prop="policyFlag"
label="是否用于政策找人">
<template v-slot="scope">
{{ scope.row.policyFlag === 1 ? '是' : '否' }}
</template>
</el-table-column>
<el-table-column label="操作">
<template v-slot="scope">
<el-button type="text" @click="onDeleteSinglBtnClicked(scope.row.id)">删除</el-button>
<el-button type="text" @click="onEditBtnClicked(scope.row.id)">编辑</el-button>
</template>
</el-table-column>
</el-table>
</el-card>
<el-dialog ref="createFormItemDlg" title="新增" :visible.sync="createDlgVisible" v-if="createDlgVisible">
<CreateFormItem ref="createFormItemComp" @onClose="onCreateDlgClose"></CreateFormItem>
</el-dialog>
<el-dialog ref="editFormItemDlg" title="编辑" :visible.sync="editDlgVisible" v-if="editDlgVisible">
<EditFormItem ref="editFormItemComp" @onClose="onEditDlgClose"></EditFormItem>
</el-dialog>
</div>
</template>
<script>
import CreateFormItem from './createFormItem'
import EditFormItem from './editFormItem'
let loading; // 加载动画
export default {
components: {
CreateFormItem, EditFormItem
},
data() {
return {
formQueryParams: {
customerId: '',
formId: '',
},
customerList: [],
formList: [],
formQueryRules: {
customerId: [{required: true, message: '请选择客户'}],
formId: [{required: true, message: '请选择表单'}]
},
formItemList: [],
mergeCellMap: {},
createDlgVisible: false,
editDlgVisible: false,
customerIdFixed: false
}
},
// 每次页面进入都会执行
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(() => {
// 自动赋值
if (this.customerIdFixed) {
this.formQueryParams.formId = formId;
this.loadItemList(); // 加载item列表
}
});
},
methods: {
/**
* 加载客户列表
*/
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('客户加载完成')
})
},
/**
* 加载表单列表
*/
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;
} else {
this.$message({
type: 'error',
nessage: res.msg
})
}
console.log('客户加载完成')
})
},
/**
* 加载表单项
*/
loadItemList() {
this.$refs['queryForm'].validate(rst => {
if (!rst) {
return;
}
let url = `/oper/customize/icform/config/listItems?customerId=${this.formQueryParams.customerId}&formId=${this.formQueryParams.formId}`
this.$http.get(url).then(({
status: httpStatus,
data: httpData
}) => {
if (httpData.code !== 0) {
this.$message({
type: 'error',
message: httpData.msg
});
return;
}
this.mergeCellMap = {}
for (let i = httpData.data.length - 1; i >= 0; i--) {
let item = httpData.data[i];
// 合并单元格数
this.setMergeRowQty(httpData.data[i], httpData.data[i + 1], i === 0);
// 设置hasChildren属性
// item.hasChildren = (item.children.length > 0);
}
this.formItemList = httpData.data;
console.log(this.formItemList)
})
})
},
/**
* 合并单元格数
* @param rowData 当前数据行
* @param lastRowData 上一条数据
* @returns {{groupNameMergeRows, formCodeMergeRows}}
*/
setMergeRowQty(rowData, lastRowData, isTheFirstRow) {
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);
// 若合并的分组变了，那么给上一条数据设置上值
if (formCodeGroupChanged) {
lastRowData.formCodeMergeRows = formCodeMergeRowsQty4LastRow;
}
if (groupGroupChanged) {
lastRowData.groupNameMergeRows = groupMergeRowsQty4LastRow;
}
if (isTheFirstRow) {
// 如果是最后一条
rowData.formCodeMergeRows = this.mergeCellMap['formCode']['mergeRowsQty'];
rowData.groupNameMergeRows = this.mergeCellMap['groupName']['mergeRowsQty'];
} else {
rowData.formCodeMergeRows = 0;
rowData.groupNameMergeRows = 0;
}
},
setAndGetMergeRows(columnKey, cellValue) {
let dict4ThisColumn = this.mergeCellMap[columnKey];
if (!dict4ThisColumn) {
dict4ThisColumn = {};
dict4ThisColumn.cellValue = cellValue;
dict4ThisColumn.mergeRowsQty = 0;
this.mergeCellMap[columnKey] = dict4ThisColumn;
}
let groupChanged = false; // 分组是否变化
let mergeRowsQty4LastRow = dict4ThisColumn.mergeRowsQty; // 上个分组最后一条的数值
if (cellValue !== dict4ThisColumn.cellValue) {
// 分组变了
groupChanged = true;
dict4ThisColumn.cellValue = cellValue;
dict4ThisColumn.mergeRowsQty = 0;
} else {
// 分组没变
groupChanged = false;
}
dict4ThisColumn.mergeRowsQty++;
return {
groupChanged: groupChanged,
mergeRowsQty4LastRow: mergeRowsQty4LastRow,
};
},
/**
* 客户下拉框改变
* @param currCustomerId
*/
onCustomerSelChanged(currCustomerId) {
this.formQueryParams.customerId = currCustomerId;
this.loadFormList();
},
/**
* 点击搜索按钮
*/
onSearchClicked() {
this.loadItemList();
},
/**
* 合并单元格回调
* @param row
* @param column
* @param rowIndex
* @param columnIndex
* @returns {(default.methods.mergeCellMap.formCode.mergeRowsQty|number|*|number)[]|number[]}
*/
mergeCells({row, column, rowIndex, columnIndex}) {
let columnKey = column.property;
if (columnKey !== 'formCode' && columnKey !== 'itemGroupName') {
// if (columnKey !== 'formCode') {
return [1, 1];
}
let rst;
if (columnKey === 'formCode') {
rst = [row.formCodeMergeRows, 1];
}
if (columnKey === 'itemGroupName') {
rst = [row.groupNameMergeRows, 1];
}
return rst;
},
/**
* "新增"按钮按下
*/
onAddBtnClicked() {
this.createDlgVisible = true;
this.$nextTick(() => {
this.$refs['createFormItemComp'].initData({
formId: this.formQueryParams.formId,
customerId: this.formQueryParams.customerId
})
})
},
/**
* 编辑按钮按下
*/
onEditBtnClicked(id) {
this.editDlgVisible = true;
this.$nextTick(() => {
this.$refs['editFormItemComp'].initData(id)
})
},
onCreateDlgClose({ type: type }) {
this.createDlgVisible = false;
if (type === 'submit') {
this.loadItemList() // 如果是提交，就重新加载表单
}
},
onEditDlgClose({ type: type }) {
this.editDlgVisible = false;
if (type === 'submit') {
this.loadItemList() // 如果是提交，就重新加载表单
}
},
/**
* 单个删除
*/
onDeleteSinglBtnClicked(id) {
this.$confirm('删除操作不可恢复，确定删除该条数据吗？').then((result) => {
if (result) {
// 删除
this.$http.post('/oper/customize/icform/config/deleteSingleById', { id: id })
.then(({status: httpStatus, data: result}) => {
if (result.code !== 0) {
this.$message({
type: 'error',
message: result.msg
})
return
}
this.$message({
type: 'success',
message:"删除成功"
})
this.loadItemList(); // 重新加载
})
}
})
}
},
watch: {
// 监听对象中的属性
'formQueryParams.customerId': {
handler: function (newVal, oldVal) {
// 要在watch中调用函数，不能使用箭头函数定义回调，必须用function
this.loadFormList();
},
immediate: true
},
}
}
</script>
Write Preview
Loading…
Cancel
Save