Skip to content

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

咨询业务往来 表格宽度调整

parent af29fa40
Hide whitespace changes
Inline Side-by-side
Showing with 277 additions and 46 deletions
dsk-operate-ui/src/utils/generator/custom-design-options.js
View file @ 0a35751c
......@@ -166,6 +166,19 @@ export const defaultComOptions = [
return callback();
}
},
requiredRules: {
trigger: ["blur", "change"],
validator: (rule, value, callback) => {
const phoneReg = /^1[3-9]\d{9}$/;
if (!value && !value?.toString()?.trim()) {
return callback(new Error(`请输入联系电话`));
}
if (!phoneReg.test(value)) {
return callback(new Error(`请输入正确的联系电话`));
}
return callback();
}
},
// 是否必填
required: false,
// 字段名称
......@@ -203,6 +216,18 @@ export const defaultComOptions = [
return callback();
}
},
requiredRules: {
trigger: ["blur", "change"],
validator: (rule, value, callback) => {
if (!value && !value?.toString()?.trim()) {
return callback(new Error(`请输入电子邮箱`));
}
if (!validEmail(value)) {
return callback(new Error(`请输入正确的电子邮箱`));
}
return callback();
}
},
// 是否必填
required: false,
// 字段名称
......@@ -220,4 +245,66 @@ export const defaultComOptions = [
placeholder: "请输入"
}
},
{
// 图片类型
comType: "photo",
// 组件展示图标
comShowIcon: "icon_img@2x.png",
// 验证通过
checkedAllow: false,
// 表单属性
formAttribute: {
// 验证规则
rules: {},
// 是否必填
required: false,
// 字段名称
fieldName: "",
// 展示label
label: "图片",
// 组件宽度
width: 100,
limit: -1,
astrict: false,
fileList: []
},
// 组件属性
componentAttribute: {
// 绑定的值
value: "",
// 输入值为空提示
placeholder: "请选择"
}
},
{
// 图片类型
comType: "file",
// 组件展示图标
comShowIcon: "icon_attachments@2x.png",
// 验证通过
checkedAllow: false,
// 表单属性
formAttribute: {
// 验证规则
rules: {},
// 是否必填
required: false,
// 字段名称
fieldName: "",
// 展示label
label: "附件",
// 组件宽度
width: 100,
limit: -1,
astrict: false,
fileList: []
},
// 组件属性
componentAttribute: {
// 绑定的值
value: "",
// 输入值为空提示
placeholder: "请选择"
}
},
];
\ No newline at end of file
dsk-operate-ui/src/views/consultingOrgManagement/components/CustomForm/components/CustomFormDesign.vue
View file @ 0a35751c
......@@ -29,12 +29,13 @@
draggable=".subfield-module-item-container" handle=".subfield-module-dragg-target-icon" :animation="340" :move="onMove">
<!-- 添加的分栏模块以及chidren模块 -->
<transition-group name="fade" tag="div" class="subfield-module-list">
<vuedraggable v-for="(item,index) of subfieldModuleForm.subfieldModuleList" :key="item.uid" draggable=".subfield-item-container"
<vuedraggable v-for="(item,pindex) 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,index)" :animation="340" :move="onMove" ghostClass="subfield-item-dragClass" :sort="true"
:component-data="createComponentData(item,pindex)" :animation="340" :move="onMove" 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>
:childModuleInfo="child" :childModuleIndex="pindex" :childItemIndex="index" @removeModuleItem="removeModuleItem"
@activeSubfieldItem="activeSubfieldItem"></subfield-item>
</vuedraggable>
</transition-group>
</vuedraggable>
......
dsk-operate-ui/src/views/consultingOrgManagement/components/CustomForm/components/SetFieldOption.vue
View file @ 0a35751c
......@@ -8,15 +8,31 @@
<el-input v-model="comActiveFieldData.formAttribute.fieldName" placeholder="请输入字段名称" clearable></el-input>
</el-form-item>
<!-- 图片和文件展示 -->
<template v-if="limitContain.includes(comActiveFieldData.comType)">
<el-form-item label="数量限制" class="set-field-option-item set-field-option-limit" prop="formAttribute.limit"
:rules="comActiveFieldData.formAttribute.astrict ? setFieldOptionRules.limit : {required: false}" v-if="comActiveFieldData.formAttribute">
<el-radio-group v-model="comActiveFieldData.formAttribute.astrict" @input="astrictChange">
<el-radio :label="false">不限制</el-radio>
<el-radio :label="true">限制</el-radio>
</el-radio-group>
<!-- 限制展示数字框 -->
<el-input-number class="limit-astrict" size="small" v-model.number="comActiveFieldData.formAttribute.limit" :min="1"
v-if="comActiveFieldData.formAttribute.astrict"></el-input-number>
</el-form-item>
</template>
<!-- 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>
<!-- 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>
<template v-if="placeholderContain.includes(comActiveFieldData.comType)">
<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>
</template>
<!-- 默认值 -->
<template v-if="defaultValueContain.includes(comActiveFieldData.comType)">
......@@ -68,7 +84,7 @@
</template>
<!-- 表单样式 -->
<el-form-item label="字段宽度" class="set-field-option-item set-field-option-radio has-top-line" prop="formAttribute.width"
<el-form-item label="字段宽度" class="set-field-option-item set-field-option-radio need-top-line" prop="formAttribute.width"
v-if="comActiveFieldData.formAttribute">
<el-radio-group v-model="comActiveFieldData.formAttribute.width">
<el-radio-button :label="100">100%</el-radio-button>
......@@ -78,15 +94,12 @@
</el-radio-group>
</el-form-item>
<!-- 是否必填 -->
<el-form-item label="字段控制" class="set-field-option-item set-field-option-radio has-top-line" prop="formAttribute.required"
v-if="comActiveFieldData.formAttribute">
<el-form-item label="字段控制" class="set-field-option-item set-field-option-limit need-top-line" v-if="comActiveFieldData.formAttribute">
<el-radio-group v-model="comActiveFieldData.formAttribute.required">
<el-radio :label="false">选填</el-radio>
<el-radio :label="true">必填</el-radio>
</el-radio-group>
</el-form-item>
</el-form>
<!-- 确定编辑 -->
......@@ -157,13 +170,21 @@ export default {
}
callback();
};
const limitValidor = (rule, value, callback) => {
const reg = /(^[1-9]\d*$)/;
if (!reg.test(value)) return callback(new Error("请输入正确的数量"));
callback();
};
return {
// 通过保存更新源数据按钮
comActiveFieldData: cloneDeep(this.activeFieldData),
setFieldOptionRules: {
fieldName: [{ required: true, trigger: ["blur", "change"], validator: fieldNameValidor }]
fieldName: [{ required: true, trigger: ["blur", "change"], validator: fieldNameValidor }],
limit: [{ required: true, type: "number", trigger: ["blur", "change"], validator: limitValidor }]
},
defaultValueContain: ["text", "textarea"]
defaultValueContain: ["text", "textarea"],
placeholderContain: ["text", "textarea", "select", "date", "phone", "email"],
limitContain: ["photo", "file"]
};
},
//可访问data属性
......@@ -209,6 +230,14 @@ export default {
},
removeOption(item, index) {
this.comActiveFieldData.formAttribute.selectOptions.splice(index, 1);
},
astrictChange(value) {
if (value) {
this.$set(this.comActiveFieldData.formAttribute, "limit", 1);
return;
}
this.$refs["customDesignFormRef"].clearValidate("formAttribute.limit");
this.$set(this.comActiveFieldData.formAttribute, "limit", -1);
}
},
}
......@@ -261,7 +290,6 @@ export default {
float: unset;
text-align: left;
margin-bottom: 8px;
padding: 0px;
}
.el-form-item__content {
......@@ -275,13 +303,85 @@ export default {
}
}
&.has-top-line {
padding-top: 20px;
border-top: 1px solid #eeeeee;
box-sizing: border-box;
/* 下拉框样式重置 */
&.set-field-option-limit,
&.set-field-option-select {
.el-form-item__label {
padding-right: 0px;
}
.el-form-item__content {
display: flex;
align-items: center;
.el-radio-group {
display: flex;
align-items: center;
line-height: 22px;
height: 22px;
& > .el-radio:first-of-type {
margin-left: 0px;
}
.el-radio {
display: flex;
align-items: center;
margin-left: 24px;
margin-right: 0px;
.el-radio__input {
width: 14px;
height: 14px;
.el-radio__inner {
&::after {
width: 6px;
height: 6px;
}
&:hover {
border-color: #0081ff;
}
}
}
.el-radio__input.is-checked .el-radio__inner {
background: #0081ff;
border-color: #0081ff;
}
.el-radio__label {
padding-left: 8px;
color: #232323;
}
}
}
.limit-astrict {
width: 115px;
margin-left: 8px;
.el-input-number__decrease,
.el-input-number__increase {
width: 32px;
height: 32px;
display: flex;
align-items: center;
justify-content: center;
&:hover {
color: #0081ff;
}
}
.el-input__inner {
height: 34px;
line-height: 34px;
&:focus {
border-color: #0081ff;
}
}
}
}
}
/* 下拉框样式重置 */
/* radio样式重置 */
&.set-field-option-radio {
.el-form-item__content {
line-height: 22px;
......@@ -319,11 +419,29 @@ export default {
}
.el-radio-button {
width: 70px;
display: flex;
align-items: center;
flex: 1;
.el-radio-button__inner {
flex: 1;
height: 38px;
display: flex;
align-items: center;
justify-content: center;
border-radius: 0px;
padding: 0px 16px;
box-sizing: border-box;
}
}
}
}
}
&.need-top-line {
padding-top: 20px;
border-top: 1px solid #eeeeee;
box-sizing: border-box;
}
}
.set-field-option-select-container {
......
dsk-operate-ui/src/views/consultingOrgManagement/components/CustomForm/components/SubfieldItem.vue
View file @ 0a35751c
......@@ -2,7 +2,7 @@
<div class="subfield-item-container" :class="classCreate(comChildModuleInfo.comType)" :style="styles" @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" :class="{'is-required': comChildModuleInfo.formAttribute.required}"
:label="comChildModuleInfo.formAttribute.label">
:label="comChildModuleInfo.formAttribute.label" :rules="comChildModuleInfo.formAttribute.rules" :prop="propValue">
<!-- 单行文本类型 -->
<el-input v-model="comChildModuleInfo.componentAttribute.value" :placeholder="comChildModuleInfo.componentAttribute.placeholder" clearable
v-if="comChildModuleInfo.comType == 'text'" :disabled="isDisabled"></el-input>
......@@ -23,6 +23,11 @@
<!-- 电话类型 -->
<el-input v-model="comChildModuleInfo.componentAttribute.value" :placeholder="comChildModuleInfo.componentAttribute.placeholder" clearable
v-if="comChildModuleInfo.comType == 'phone'" :disabled="isDisabled"></el-input>
<!-- 电子邮箱类型 -->
<el-input v-model="comChildModuleInfo.componentAttribute.value" :placeholder="comChildModuleInfo.componentAttribute.placeholder" clearable
v-if="comChildModuleInfo.comType == 'email'" :disabled="isDisabled"></el-input>
<!-- 图片类型 -->
</el-form-item>
<img src="@/assets/images/consultingAgencyManagement/customForm/icon_delete@2x.png" alt="" class="remove-subfield-item-icon"
......@@ -36,7 +41,9 @@ export default {
props: {
childModuleInfo: Object,
parentUid: String,
activeUid: String
activeUid: String,
childModuleIndex: Number,
childItemIndex: Number
},
watch: {
childModuleInfo: {
......@@ -63,6 +70,18 @@ export default {
},
// 保证首次触发 判断是否订阅
immediate: true
},
childModuleIndex: {
handler(newValue) {
this.comChildModuleIndex = newValue;
},
immediate: true
},
childItemIndex: {
handler(newValue) {
this.comChildItemIndex = newValue;
},
immediate: true
}
},
data() {
......@@ -70,7 +89,9 @@ export default {
comChildModuleInfo: cloneDeep(this.childModuleInfo),
comChildModuleInfoOriginData: cloneDeep(this.childModuleInfo),
comActiveUid: this.activeUid,
comOldActiveUid: this.activeUid
comOldActiveUid: this.activeUid,
comChildModuleIndex: this.childModuleIndex,
comChildItemIndex: this.childItemIndex,
};
},
//可访问data属性
......@@ -89,6 +110,9 @@ export default {
},
isDisabled() {
return !(this.comActiveUid === this.comChildModuleInfo?.uid);
},
propValue() {
return `subfieldModuleList[${this.childModuleIndex}].children[${this.childItemIndex}].componentAttribute.value`;
}
},
//方法集
......
dsk-operate-ui/src/views/consultingOrgManagement/components/CustomForm/components/SubfieldModule.vue
View file @ 0a35751c
......@@ -43,7 +43,8 @@ export default {
moduleIndex: {
handler(newValue) {
this.comModuleIndex = newValue;
}
},
immediate: true
}
},
data() {
......
dsk-operate-ui/src/views/detail/party-a/consultingTransaction/cooperativeConstructionUnit.vue
View file @ 0a35751c
......@@ -100,14 +100,14 @@ export default {
sort: ""
},
dialogForData: [
{ label: '合作项目/工程名称', prop: 'projectName', width: '182', slot: true, showOverflowTooltip: true },
{ label: '合作时间', prop: 'time', width: '93', sortable: "custom" },
{ label: '咨询机构承担角色', prop: 'agencyBusinessType', width: '122' },
{ label: '项目类型', prop: 'counterpartRole', minWidth: '74' },
{ label: '工程类型', prop: 'projectType', minWidth: '74' },
{ label: '项目/工程金额（万元）', prop: 'amount', width: '164', sortable: "custom", align: "right", },
{ label: '合作项目/工程名称', prop: 'projectName', width: '260', slot: true, showOverflowTooltip: true },
{ label: '合作时间', prop: 'time', width: '140', sortable: "custom" },
{ label: '咨询机构承担角色', prop: 'agencyBusinessType', width: '140' },
{ label: '项目类型', prop: 'counterpartRole', minWidth: '90' },
{ label: '工程类型', prop: 'projectType', minWidth: '90' },
{ label: '项目/工程金额（万元）', prop: 'amount', width: '190', sortable: "custom", align: "right", },
{ label: '项目地区', prop: 'area', width: '245', slot: true },
{ label: '数据来源', prop: 'dataSource', width: '74' },
{ label: '数据来源', prop: 'dataSource', width: '90' },
],
dialogFormData: [
{ type: 4, fieldName: 'businessTypes', value: '', placeholder: '咨询机构业务', options: [], uid: this.getUid() },
......
dsk-operate-ui/src/views/detail/party-a/consultingTransaction/cooperativeGroup.vue
View file @ 0a35751c
......@@ -163,14 +163,14 @@ export default {
// { label: '合作总金额（万元）', prop: 'amount', minWidth: '226', align: "right", sortable: "custom" },
],
dialogForData: [
{ label: '合作项目/工程名称', prop: 'projectName', width: '182', slot: true, showOverflowTooltip: true },
{ label: '合作成员', prop: 'companyName', width: '110', slot: true, showOverflowTooltip: true },
{ label: '合作时间', prop: 'time', width: '93', sortable: "custom" },
{ label: '集团成员身份', prop: 'role', width: '122' },
{ label: '咨询机构承担角色', prop: 'agencyBusinessType', width: '122' },
{ label: '项目类型', prop: 'counterpartRole', minWidth: '74' },
{ label: '工程类型', prop: 'projectType', minWidth: '74' },
{ label: '项目/工程金额（万元）', prop: 'amount', width: '164', sortable: "custom", align: "right", },
{ label: '合作项目/工程名称', prop: 'projectName', width: '350', slot: true, showOverflowTooltip: true },
{ label: '合作成员', prop: 'companyName', width: '350', slot: true, showOverflowTooltip: true },
{ label: '合作时间', prop: 'time', width: '140', sortable: "custom" },
{ label: '集团成员身份', prop: 'role', width: '140' },
{ label: '咨询机构承担角色', prop: 'agencyBusinessType', width: '140' },
{ label: '项目类型', prop: 'counterpartRole', minWidth: '90' },
{ label: '工程类型', prop: 'projectType', minWidth: '90' },
{ label: '项目/工程金额（万元）', prop: 'amount', width: '190', sortable: "custom", align: "right", },
{ label: '项目地区', prop: 'area', width: '245', slot: true },
],
dialogFormData: [
......
dsk-operate-ui/src/views/detail/party-a/consultingTransaction/cooperativeOwnerUnits.vue
View file @ 0a35751c
......@@ -100,14 +100,14 @@ export default {
sort: ""
},
dialogForData: [
{ label: '合作项目/工程名称', prop: 'projectName', width: '182', slot: true, showOverflowTooltip: true },
{ label: '合作时间', prop: 'time', width: '93', sortable: "custom" },
{ label: '咨询机构承担角色', prop: 'agencyBusinessType', width: '122' },
{ label: '项目类型', prop: 'counterpartRole', minWidth: '74' },
{ label: '工程类型', prop: 'projectType', minWidth: '74' },
{ label: '项目/工程金额（万元）', prop: 'amount', width: '164', sortable: "custom", align: "right", },
{ label: '合作项目/工程名称', prop: 'projectName', width: '260', slot: true, showOverflowTooltip: true },
{ label: '合作时间', prop: 'time', width: '140', sortable: "custom" },
{ label: '咨询机构承担角色', prop: 'agencyBusinessType', width: '140' },
{ label: '项目类型', prop: 'counterpartRole', minWidth: '90' },
{ label: '工程类型', prop: 'projectType', minWidth: '90' },
{ label: '项目/工程金额（万元）', prop: 'amount', width: '190', sortable: "custom", align: "right", },
{ label: '项目地区', prop: 'area', width: '245', slot: true },
{ label: '数据来源', prop: 'dataSource', width: '74' },
{ label: '数据来源', prop: 'dataSource', width: '90' },
],
dialogFormData: [
{ type: 4, fieldName: 'businessTypes', value: '', placeholder: '咨询机构业务', options: [], uid: this.getUid() },
......
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