Skip to content

D
dsk-operate-sys-cscec
Commit e97f1916 authored by tianhongyang's avatar tianhongyang
Browse files
Options

自定义表单完善

parent 3b495365
Show whitespace changes
Inline Side-by-side
Showing with 268 additions and 45 deletions
dsk-operate-ui/src/utils/generator/custom-design-options.js
View file @ e97f1916
......@@ -7,9 +7,16 @@ export const subfieldModuleTemplate = {
defaultSubfieldModuleName: "分栏名称",
subfieldModuleName: "",
subfieldModuleNameRules: {
required: true,
message: "请输入分栏名称",
trigger: "change"
trigger: ["blur", "change"],
// required: true,
// message: "请输入分栏名称"
validator: (rule, value, callback) => {
alert(1)
if (!value) {
return callback(new Error("请输入分栏名称"));
}
callback();
}
},
subfieldModulePlaceholder: "请输入分栏标题",
edit: false,
......@@ -32,6 +39,8 @@ export const defaultComOptions = [
fieldName: "",
// 展示label
label: "单行文本",
// 组件宽度
width: 100
},
// 组件属性
componentAttribute: {
......
dsk-operate-ui/src/views/consultingOrgManagement/components/CustomForm/components/CustomFormDesign.vue
View file @ e97f1916
......@@ -7,9 +7,9 @@
<div class="design-main fields-main">
<vuedraggable :list="defaultComOptions" :group="{name: 'customComGroup', pull: 'clone', put: false}" class="design-draggable-fields"
draggable=".draggable-fields-item" ghostClass="subfield-origin-dragClass" :clone="targetComClone" :sort="false"
:disabled="!subfieldModuleList.length">
:disabled="!subfieldModuleForm.subfieldModuleList.length">
<transition-group name="fade" tag="div" class="draggable-fields-list">
<div class="draggable-fields-item" :class="{'has-no-subfield-module' : !subfieldModuleList.length}"
<div class="draggable-fields-item" :class="{'has-no-subfield-module' : !subfieldModuleForm.subfieldModuleList.length}"
v-for="(item,index) of defaultComOptions" :key="index" @click="fieldsItemClick">
<img :src="item.comShowIcon" alt="">
<span>{{item.formAttribute.label}}</span>
......@@ -22,21 +22,20 @@
<div class="custom-form-design-options">
<div class="design-header options-header">表单配置</div>
<div class="design-main options-main">
<el-form class="custom-design-el-form" ref="customDesignFormRef" :model="{}" :rules="{}" @submit.native.prevent>
<el-form class="custom-design-el-form" ref="customDesignFormRef" :model="subfieldModuleForm" @submit.native.prevent :show-message="false">
<!-- 最外层dragg容器 拖动模块module .subfield-module-dragg-target-icon -->
<vuedraggable :list="subfieldModuleList" group="customSubfieldmodule" class="subfield-module-container"
<vuedraggable :list="subfieldModuleForm.subfieldModuleList" group="customSubfieldmodule" class="subfield-module-container"
draggable=".subfield-module-item-container" handle=".subfield-module-dragg-target-icon" :animation="340">
<!-- 添加的分栏模块以及chidren模块 -->
<transition-group name="fade" tag="div" class="subfield-module-list">
<!-- <div class="subfield-module-draggable-list" v-for="(item,index) of subfieldModuleList" :key="item.uid"> -->
<vuedraggable v-for="(item,index) of subfieldModuleList" :key="item.uid" draggable=".subfield-item-container"
<vuedraggable v-for="(item,index) of subfieldModuleForm.subfieldModuleList" :key="item.uid" draggable=".subfield-item-container"
handle=".subfield-module-item-dragg-target-icon" tag="subfield-module" :list="item.children" group="customComGroup"
:component-data="createComponentData(item)" :animation="340" ghostClass="subfield-item-dragClass" :sort="true" @change="dataChange">
:component-data="createComponentData(item,index)" :animation="340" ghostClass="subfield-item-dragClass" :sort="true"
@change="dataChange">
<subfield-item v-for="(child,index) of item.children" :key="child.uid" :activeUid="activeUid" :parentUid="item.uid"
:childModuleInfo="child" @removeModuleItem="removeModuleItem" @activeSubfieldItem="activeSubfieldItem"></subfield-item>
</vuedraggable>
<!-- </div> -->
</transition-group>
</vuedraggable>
<!-- 添加分栏 -->
......@@ -88,8 +87,11 @@ export default {
return {
// 字段组件
defaultComOptions,
// 验证表单
subfieldModuleForm: {
// 中间编辑的模块
subfieldModuleList: [],
},
// 删除分栏提示
removeSubFiledModuleDialog: false,
// 要删除的分栏信息
......@@ -102,6 +104,14 @@ export default {
activeModuleId: ""
};
},
watch: {
subfieldModuleForm: {
handler(newValue) {
console.log(newValue);
},
deep: true
}
},
//可访问data属性
created() {
......@@ -121,7 +131,7 @@ export default {
},
// 字段组件点击事件
fieldsItemClick() {
if (!this.subfieldModuleList?.length) {
if (!this.subfieldModuleForm.subfieldModuleList?.length) {
this.$message.warning("请先添加分栏");
}
},
......@@ -137,37 +147,48 @@ export default {
currentActiveByItemId(current) {
this.activeUid = current.uid;
this.activeItemData = current;
this.activeModuleId = this.subfieldModuleList.find(item => item?.children?.findIndex(child => child.uid == current.uid) > -1).uid;
this.activeModuleId = this.subfieldModuleForm.subfieldModuleList.find(item => item?.children?.findIndex(child => child.uid == current.uid) > -1).uid;
console.log(this.activeModuleId);
},
// 添加分栏
addSubfieldModule() {
const _temp = JSON.parse(JSON.stringify(subfieldModuleTemplate));
_temp.uid = v4();
this.subfieldModuleList.push(_temp);
this.subfieldModuleForm.subfieldModuleList.push(_temp);
},
createComponentData(item) {
// 传递模块事件
createComponentData(item, index) {
return {
props: {
moduleInfo: item,
moduleIndex: index
},
on: {
"removeModule": this.removeModule,
"editOK": this.editOK
"editFinish": this.editFinish
}
};
},
editOK(module) {
// 编辑模块名称
editFinish(module) {
const index = this.subfieldModuleForm.subfieldModuleList.findIndex(item => item.uid == module.uid);
if (index > -1) {
this.subfieldModuleForm.subfieldModuleList.splice(index, 1, module);
}
},
// 命中的模块
activeSubfieldItem(itemModule, parentUid) {
this.activeUid = itemModule.uid;
this.activeModuleId = parentUid;
this.activeItemData = itemModule;
},
// 删除模块表单输入框
removeModuleItem(itemModule, parentUid) {
if (itemModule.uid == this.activeUid) this.activeUid = "";
const parentModule = this.subfieldModuleList.find(item => item.uid == parentUid);
if (itemModule.uid == this.activeUid) {
this.activeUid = "";
this.activeItemData = {};
}
const parentModule = this.subfieldModuleForm.subfieldModuleList.find(item => item.uid == parentUid);
if (parentModule) {
const index = parentModule?.children?.findIndex(item => item.uid == itemModule.uid);
if (index > -1) {
......@@ -193,9 +214,9 @@ export default {
this.activeItemData = {};
}
}
const index = this.subfieldModuleList.findIndex(item => item.uid == this.removeSubfieldModule.uid);
const index = this.subfieldModuleForm.subfieldModuleList.findIndex(item => item.uid == this.removeSubfieldModule.uid);
if (index > -1) {
this.subfieldModuleList.splice(index, 1);
this.subfieldModuleForm.subfieldModuleList.splice(index, 1);
}
this.removeSubFiledModuleDialog = false;
},
......@@ -378,6 +399,10 @@ export default {
.field-options-main {
border-left: none;
}
.field-options-main {
padding: 0px;
}
}
}
......
dsk-operate-ui/src/views/consultingOrgManagement/components/CustomForm/components/SetFieldOption.vue
View file @ e97f1916
<template>
<div class="set-field-option-container">
<el-form class="set-field-option-form" ref="customDesignFormRef" :model="comActiveFieldData">
<!-- 字段名称 -->
<el-form-item label="字段名称" class="set-field-option-item" prop="formAttribute.fieldName" v-if="comActiveFieldData.formAttribute"
:rules="setFieldOptionRules.fieldName">
<el-input v-model="comActiveFieldData.formAttribute.fieldName" placeholder="请输入字段名称" clearable></el-input>
</el-form-item>
<!-- placeholder文字 -->
<el-form-item label="提示文字" class="set-field-option-item" prop="componentAttribute.placeholder" v-if="comActiveFieldData.componentAttribute">
<el-input v-model="comActiveFieldData.componentAttribute.placeholder" placeholder="请输入提示文字" clearable></el-input>
</el-form-item>
<!-- 默认值 -->
<el-form-item label="默认值" class="set-field-option-item" prop="componentAttribute.value" v-if="comActiveFieldData.componentAttribute">
<el-input v-model="comActiveFieldData.componentAttribute.value" placeholder="请输入默认值" clearable></el-input>
</el-form-item>
<!-- label展示名称 -->
<el-form-item label="字段label" class="set-field-option-item" prop="formAttribute.label" v-if="comActiveFieldData.formAttribute">
<el-input v-model="comActiveFieldData.formAttribute.label" placeholder="请输入字段label" clearable></el-input>
</el-form-item>
<!-- 表单样式 -->
<div class="set-field-option-styles-item" v-if="comActiveFieldData.formAttribute">
<span class="set-field-option-label">字段宽度</span>
<div class="set-field-option-block">
<el-radio-group v-model="comActiveFieldData.formAttribute.width">
<el-radio-button :label="100">100%</el-radio-button>
<el-radio-button :label="50">50%</el-radio-button>
<el-radio-button :label="33">33%</el-radio-button>
<el-radio-button :label="25">25%</el-radio-button>
</el-radio-group>
</div>
</div>
<div class="set-field-option-styles-item" v-if="comActiveFieldData.formAttribute">
<span class="set-field-option-label">字段控制</span>
<div class="set-field-option-block">
<el-radio-group v-model="comActiveFieldData.formAttribute.required">
<el-radio :label="false">选填</el-radio>
<el-radio :label="true">必填</el-radio>
</el-radio-group>
</div>
</div>
</el-form>
<!-- 确定编辑 -->
<div class="set-field-option-footer">
</div>
</div>
</template>
<script>
export default {
name: "setFieldOption",
props: {
activeFieldData: Object
// 当前命中的表单组件数据
activeFieldData: {
type: Object,
default: () => ({
formAttribute: {},
componentAttribute: {},
componentOptions: {}
})
}
},
watch: {
activeFieldData: {
handler(newValue) {
// 通过保存更新源数据按钮
this.comActiveFieldData = newValue;
}
},
deep: true
}
},
data() {
return {
comActiveFieldData: this.activeFieldData
// 通过保存更新源数据按钮
comActiveFieldData: this.activeFieldData,
setFieldOptionRules: {
fieldName: [{ required: true, trigger: ["blur", "change"], message: "请输入字段名称" }]
}
};
},
//可访问data属性
......@@ -39,5 +97,102 @@ export default {
.set-field-option-container {
width: 100%;
height: 100%;
.set-field-option-form {
width: 100%;
height: calc(100% - 56px);
padding: 16px;
overflow-y: auto;
overflow-x: hidden;
box-sizing: border-box;
}
.set-field-option-footer {
height: 56px;
display: flex;
justify-content: flex-end;
align-items: center;
border-top: 1px solid #eeeeee;
box-sizing: border-box;
}
::v-deep .set-field-option-item {
display: flex;
flex-direction: column;
margin-bottom: 20px;
.el-form-item__label {
color: rgba(35, 35, 35, 0.8);
font-size: 14px;
font-weight: 400;
line-height: 22px;
float: unset;
text-align: left;
margin-bottom: 8px;
}
.el-form-item__content {
.el-input {
.el-input__inner {
height: 32px;
line-height: 32px;
border-radius: 2px;
color: #232323;
}
}
}
}
::v-deep .set-field-option-styles-item {
display: flex;
flex-direction: column;
border-top: 1px solid #eeeeee;
padding-top: 20px;
box-sizing: border-box;
.set-field-option-label {
font-size: 14px;
font-weight: 400;
color: rgba(35, 35, 35, 0.8);
line-height: 22px;
margin-bottom: 8px;
}
.set-field-option-block {
display: flex;
align-items: center;
.el-radio-group {
display: flex;
align-items: center;
.el-radio-button__orig-radio:checked + .el-radio-button__inner {
background-color: #0081ff;
border-color: #0081ff;
&:hover {
color: #fff;
}
}
.el-radio__input.is-checked .el-radio__inner {
background: #0081ff;
border-color: #0081ff;
}
.el-radio-button__inner {
width: 70px;
height: 38px;
line-height: 38px;
padding: 0px;
display: flex;
justify-content: center;
box-sizing: border-box;
&:hover {
color: #0081ff;
}
}
}
}
}
}
</style>
dsk-operate-ui/src/views/consultingOrgManagement/components/CustomForm/components/SubfieldItem.vue
View file @ e97f1916
......@@ -2,8 +2,9 @@
<div class="subfield-item-container" :class="{'is-active-subfield-item' : activeUid == comChildModuleInfo.uid}" @click="activeSubfieldItem">
<img src="@/assets/images/consultingAgencyManagement/customForm/icon_drag@2x.png" alt="" class="subfield-module-item-dragg-target-icon">
<el-form-item class="subfield-module-form-item" :label="comChildModuleInfo.formAttribute.label">
<component :is="comChildModuleInfo.comType" v-model="comChildModuleInfo.componentAttribute.value"
:placeholder="comChildModuleInfo.componentAttribute.placeholder" clearable></component>
<!-- 输入框类型 -->
<el-input v-model="comChildModuleInfo.componentAttribute.value" :placeholder="comChildModuleInfo.componentAttribute.placeholder" clearable
v-if="comChildModuleInfo.comType == 'el-input'"></el-input>
</el-form-item>
<img src="@/assets/images/consultingAgencyManagement/customForm/icon_delete@2x.png" alt="" class="remove-subfield-item-icon"
@click.stop="removeModuleItem">
......
dsk-operate-ui/src/views/consultingOrgManagement/components/CustomForm/components/SubfieldModule.vue
View file @ e97f1916
......@@ -3,14 +3,15 @@
<div class="subfield-module-header">
<div class="subfield-module-title">
<img src="@/assets/images/consultingAgencyManagement/customForm/icon_drag@2x.png" alt="" class="subfield-module-dragg-target-icon">
<el-form-item v-if="comModuleInfo.edit" class="subfield-module-form-item" :rules="comModuleInfo.subfieldModuleNameRules" prop="">
<el-form-item v-if="comModuleInfo.edit" class="subfield-module-form-item" :rules="comModuleInfo.subfieldModuleNameRules"
:prop="subfieldModuleComName">
<el-input v-model="comModuleInfo.subfieldModuleName" :placeholder="comModuleInfo.subfieldModulePlaceholder" clearable
@keyup.enter.native.stop="editOK"></el-input>
@keyup.enter.native.stop="editOk"></el-input>
</el-form-item>
<span v-else>{{comModuleInfo.defaultSubfieldModuleName}}</span>
</div>
<div class="subfield-module-title-tool" v-if="comModuleInfo.edit">
<img src="@/assets/images/consultingAgencyManagement/customForm/icon_verify@2x.png" alt="" class="title-tool-edit-ok" @click="editOK">
<img src="@/assets/images/consultingAgencyManagement/customForm/icon_verify@2x.png" alt="" class="title-tool-edit-ok" @click.stop="editOk">
<img src="@/assets/images/consultingAgencyManagement/customForm/icon_cancle@2x.png" alt="" class="title-tool-edit-cancel"
@click.stop="editCancel">
</div>
......@@ -26,29 +27,40 @@
export default {
name: "subfieldModule",
props: {
moduleInfo: Object
moduleInfo: Object,
moduleIndex: Number
},
watch: {
moduleInfo: {
handler(newValue, oldValue) {
this.comModuleInfo = newValue;
// 深克隆 避免未保存修改源数据 通过 订阅 editFinish事件处理更改源数据
this.comModuleInfo = JSON.parse(JSON.stringify(newValue));
},
deep: true
},
moduleIndex: {
handler(newValue) {
this.comModuleIndex = newValue;
}
}
},
data() {
return {
oldComModuleName: this.moduleInfo.subfieldModuleName,
comModuleInfo: this.moduleInfo
// 深克隆 避免未保存修改源数据 通过 订阅 editFinish事件处理更改源数据
comModuleInfo: JSON.parse(JSON.stringify(this.moduleInfo)),
comModuleIndex: this.moduleIndex
};
},
//可访问data属性
created() {
console.log(this.subfieldModuleComName);
},
//计算集
computed: {
subfieldModuleComName() {
return `subfieldModuleList[${this.comModuleIndex}].subfieldModuleName`;
}
},
//方法集
methods: {
......@@ -62,11 +74,11 @@ export default {
this.comModuleInfo.edit = false;
this.comModuleInfo.subfieldModuleName = this.oldComModuleName;
},
editOK() {
editOk() {
this.comModuleInfo.edit = false;
this.comModuleInfo.defaultSubfieldModuleName = this.comModuleInfo.subfieldModuleName;
this.oldComModuleName = this.comModuleInfo.subfieldModuleName;
this.$emit("editOk", this.comModuleInfo);
this.$emit("editFinish", this.comModuleInfo);
}
},
}
......
dsk-operate-ui/src/views/consultingOrgManagement/components/EnterpriseList/detail/consultingAgency.vue
View file @ e97f1916
......@@ -6,6 +6,9 @@
<script>
export default {
name: "consultingAgency",
props: {
projectDetailInfo: Object
},
data() {
return {
......
dsk-operate-ui/src/views/consultingOrgManagement/components/ProjectList/index.vue
View file @ e97f1916
......@@ -93,6 +93,24 @@
{{row.advisoryBody.advisoryBodyName}}</div>
<span v-else>-</span>
</template>
<!-- 项目负责人姓名 -->
<template slot="projectLeader" slot-scope="{row}">
<div v-if="row.advisoryBody && row.advisoryBodyProject.projectLeader">
{{row.advisoryBodyProject.projectLeader}}</div>
<span v-else>-</span>
</template>
<!-- 项目负责人专业 -->
<template slot="projectLeaderMajor" slot-scope="{row}">
<div v-if="row.advisoryBody && row.advisoryBodyProject.projectLeaderMajor">
{{row.advisoryBodyProject.projectLeaderMajor}}</div>
<span v-else>-</span>
</template>
<!-- 项目负责人电话 -->
<template slot="projectLeaderPhone" slot-scope="{row}">
<div v-if="row.advisoryBody && row.advisoryBodyProject.projectLeaderPhone">
{{row.advisoryBodyProject.projectLeaderPhone}}</div>
<span v-else>-</span>
</template>
</table-list-com>
</div>
......@@ -154,13 +172,13 @@ export default {
{ label: '省市', prop: 'provinceName', width: "100px", uid: v4() },
{ label: '项目承接类型', prop: 'isinvestproject', width: "100px", uid: v4() },
{ label: '工程基础大类', prop: 'projectType1', minWidth: "100px", uid: v4() },
{ label: '工程类别明细', prop: 'projectType', minWidth: "100px", uid: v4() },
{ label: '项目负责人姓名', prop: 'projectLeader', width: "110px", uid: v4() },
{ label: '项目负责人专业', prop: 'projectLeaderMajor', width: "110px", uid: v4() },
{ label: '项目负责人联系电话', prop: 'projectLeaderPhone', width: "135px", uid: v4() },
{ label: '工程类别明细', prop: 'projectType2', minWidth: "100px", uid: v4() },
{ label: '项目负责人姓名', prop: 'projectLeader', width: "110px", uid: v4(), slot: true },
{ label: '项目负责人专业', prop: 'projectLeaderMajor', width: "110px", uid: v4(), slot: true },
{ label: '项目负责人联系电话', prop: 'projectLeaderPhone', width: "135px", uid: v4(), slot: true },
{ label: '合同金额（元）', prop: 'contractOrigValue', width: "110px", align: "right", uid: v4() },
{ label: '业主单位', prop: 'ownerName', slot: true, uid: v4(), width: "185px", showOverflowTooltip: true },
{ label: '项目承接单位', prop: 'contractOrgName', width: "196px", slot: true, uid: v4() },
// { label: '业主单位', prop: 'ownerName', slot: true, uid: v4(), width: "185px", showOverflowTooltip: true },
// { label: '项目承接单位', prop: 'contractOrgName', width: "196px", slot: true, uid: v4() },
{ label: '咨询机构名称', prop: 'advisoryBodyName', width: "172px", slot: true, uid: v4() },
{ label: '创建时间', prop: 'contractSignDate', width: "172px", uid: v4() },
],
......
Markdown is supported
0% or
You are about to add 0 people to the discussion. Proceed with caution.
Finish editing this message first!
Please register or to comment