Skip to content

D
dsk-operate-sys-cscec
Commit 44e9eac6 authored by tyn's avatar tyn
Browse files
Options

fix

parent c929e68f
Hide whitespace changes
Inline Side-by-side
Showing with 283 additions and 5 deletions
dsk-operate-ui/src/utils/generator/custom-design-options.js
View file @ 44e9eac6
// 默认自定义表单组件
import { validEmail } from "@/utils/validate";
/**
* 模块模板
......@@ -90,7 +91,11 @@ export const defaultComOptions = [
// 表单属性
formAttribute: {
// 验证规则
rules: {},
rules: {
required: true,
message: "请输入选项值",
trigger: ["change", "blur"]
},
// 是否必填
required: false,
// 字段名称
......@@ -111,4 +116,108 @@ export const defaultComOptions = [
placeholder: "请选择"
}
},
// 日期时间
{
// 组件类型
comType: "date",
// 组件展示图标
comShowIcon: "icon_data_time@2x.png",
// 验证通过
checkedAllow: false,
// 表单属性
formAttribute: {
// 验证规则
rules: {},
// 是否必填
required: false,
// 字段名称
fieldName: "",
// 展示label
label: "日期/时间",
// 组件宽度
width: 100
},
// 组件属性
componentAttribute: {
// 绑定的值
value: "",
// 输入值为空提示
placeholder: "请选择"
}
},
// 电话
{
// 组件类型
comType: "phone",
// 组件展示图标
comShowIcon: "icon_phone@2x.png",
// 验证通过
checkedAllow: false,
// 表单属性
formAttribute: {
// 验证规则
rules: {
trigger: ["blur", "change"],
validator: (rule, value, callback) => {
const phoneReg = /^1[3-9]\d{9}$/;
if (value && !phoneReg.test(value)) {
return callback(new Error(`请输入正确的联系电话`));
}
return callback();
}
},
// 是否必填
required: false,
// 字段名称
fieldName: "",
// 展示label
label: "电话",
// 组件宽度
width: 100
},
// 组件属性
componentAttribute: {
// 绑定的值
value: "",
// 输入值为空提示
placeholder: "请输入"
}
},
// 电子邮箱
{
// 组件类型
comType: "email",
// 组件展示图标
comShowIcon: "icon_email@2x.png",
// 验证通过
checkedAllow: false,
// 表单属性
formAttribute: {
// 验证规则
rules: {
trigger: ["blur", "change"],
validator: (rule, value, callback) => {
if (value && !validEmail(value)) {
return callback(new Error(`请输入正确的电子邮箱`));
}
return callback();
}
},
// 是否必填
required: false,
// 字段名称
fieldName: "",
// 展示label
label: "电子邮箱",
// 组件宽度
width: 100
},
// 组件属性
componentAttribute: {
// 绑定的值
value: "",
// 输入值为空提示
placeholder: "请输入"
}
},
];
\ No newline at end of file
dsk-operate-ui/src/views/consultingOrgManagement/components/CustomForm/components/SetFieldOption.vue
View file @ 44e9eac6
......@@ -36,6 +36,37 @@
</el-form-item>
</template>
<!-- 选项内容 -->
<template v-if="comActiveFieldData.comType == 'select'">
<div class="set-field-option-select-container" v-if="comActiveFieldData.formAttribute">
<div class="option-select-title">选项内容</div>
<!-- 选项容器可以拖动区域 -->
<div class="option-select-content">
<vuedraggable :list="comActiveFieldData.formAttribute.selectOptions" group="optionSelectContent" draggable=".select-option-list-item"
ghostClass="subfield-origin-dragClass" :sort="true" handle=".select-option-list-item-drag-icon" :animation="340">
<transition-group name="fade" tag="div" class="select-option-list">
<div class="select-option-list-item" v-for="(item,index) of comActiveFieldData.formAttribute.selectOptions" :key="item.id">
<img src="@/assets/images/consultingAgencyManagement/customForm/icon_drag@2x.png" alt="" class="select-option-list-item-drag-icon">
<el-form-item label="" :prop="`formAttribute.selectOptions.${index}.value`" :rules="comActiveFieldData.formAttribute.rules"
:show-message="false">
<el-input v-model="comActiveFieldData.formAttribute.selectOptions[index].value" placeholder="请输入" clearable></el-input>
</el-form-item>
<img src="@/assets/images/consultingAgencyManagement/customForm/icon_delete@2x.png" alt=""
class="select-option-list-item-remove-icon" @click="removeOption(item,index)">
</div>
</transition-group>
</vuedraggable>
</div>
<!-- 添加选项容器 -->
<div class="add-option-select-btn">
<div class="add-option-select-btn-item" @click="addOption">
<img src="@/assets/images/consultingAgencyManagement/customForm/icon_add@2x.png" alt="">
<span>添加选项</span>
</div>
</div>
</div>
</template>
<!-- 表单样式 -->
<el-form-item label="字段宽度" class="set-field-option-item set-field-option-radio has-top-line" prop="formAttribute.width"
v-if="comActiveFieldData.formAttribute">
......@@ -70,8 +101,13 @@
</template>
<script>
import { cloneDeep } from "lodash-es";
import { v4 } from 'uuid';
import vuedraggable from "vuedraggable";
export default {
name: "setFieldOption",
components: {
vuedraggable
},
props: {
// 当前命中的表单组件数据
activeFieldData: {
......@@ -145,7 +181,7 @@ export default {
methods: {
setOptions(value) {
// 不是当前命中的id 不进行修改 (避免极端情况，正常不会触发 一次仅能修改一个元素)
console.log(this.activeUid, value.uid);
// console.log(this.activeUid, value.uid);
// 不是更改的当前命中元素
if (this.activeUid !== value.uid) {
return;
......@@ -164,6 +200,15 @@ export default {
} catch (error) {
console.log(error);
}
},
addOption() {
this.comActiveFieldData.formAttribute.selectOptions.push({
value: "",
id: v4()
});
},
removeOption(item, index) {
this.comActiveFieldData.formAttribute.selectOptions.splice(index, 1);
}
},
}
......@@ -280,5 +325,110 @@ export default {
}
}
}
.set-field-option-select-container {
width: 100%;
background: #f5f5f5;
border: 1px solid #dcdfe6;
border-radius: 4px;
padding: 12px;
box-sizing: border-box;
margin-bottom: 20px;
.option-select-title {
color: rgba(35, 35, 35, 0.8);
font-size: 12px;
font-weight: 400;
margin-bottom: 8px;
}
.option-select-content {
.select-option-list {
display: flex;
flex-direction: column;
::v-deep .select-option-list-item {
display: flex;
align-items: center;
margin-bottom: 8px;
height: 32px;
width: 100%;
.select-option-list-item-drag-icon {
width: 14px;
height: 14px;
min-width: 14px;
cursor: pointer;
}
.select-option-list-item-remove-icon {
width: 16px;
height: 16px;
min-width: 16px;
cursor: pointer;
margin-left: 8px;
}
.el-form-item {
margin-bottom: 0px;
margin-left: 8px;
.el-form-item__content {
line-height: 32px;
.el-input {
.el-input__inner {
height: 32px;
line-height: 32px;
border-radius: 2px;
&:focus {
border-color: #0081ff;
}
}
.el-input__suffix {
display: flex;
align-items: center;
.el-input__icon {
line-height: 32px;
}
}
}
}
}
}
}
}
.add-option-select-btn {
width: 100%;
display: flex;
align-items: center;
justify-content: center;
.add-option-select-btn-item {
width: 191px;
height: 32px;
border-radius: 4px;
color: #0081ff;
border: 1px solid #0081ff;
cursor: pointer;
display: flex;
justify-content: center;
align-items: center;
& > img {
width: 16px;
height: 16px;
}
& > span {
font-size: 14px;
font-weight: 400;
margin-left: 4px;
}
}
}
}
}
</style>
dsk-operate-ui/src/views/consultingOrgManagement/components/CustomForm/components/SubfieldItem.vue
View file @ 44e9eac6
......@@ -13,10 +13,18 @@
<el-select v-model="comChildModuleInfo.componentAttribute.value" :multiple="comChildModuleInfo.formAttribute.isMultiple"
:collapse-tags="comChildModuleInfo.formAttribute.isMultiple" :placeholder="comChildModuleInfo.componentAttribute.placeholder"
v-if="comChildModuleInfo.comType == 'select'" :disabled="isDisabled">
<el-option v-for="(item,index) in comChildModuleInfo.formAttribute.selectOptions" :key="item.value" :label="item.value" :value="index">
<el-option v-for="(item,index) in comChildModuleInfo.formAttribute.selectOptions" :key="item.id" :label="item.value" :value="item.value">
</el-option>
</el-select>
<!-- 时间类型 -->
<el-date-picker v-model="comChildModuleInfo.componentAttribute.value" type="datetime" :value-format="'yyyy-MM-dd HH:mm:ss'"
:placeholder="comChildModuleInfo.componentAttribute.placeholder" :disabled="isDisabled" v-if="comChildModuleInfo.comType == 'date'">
</el-date-picker>
<!-- 电话类型 -->
<el-input v-model="comChildModuleInfo.componentAttribute.value" :placeholder="comChildModuleInfo.componentAttribute.placeholder" clearable
v-if="comChildModuleInfo.comType == 'phone'" :disabled="isDisabled"></el-input>
</el-form-item>
<img src="@/assets/images/consultingAgencyManagement/customForm/icon_delete@2x.png" alt="" class="remove-subfield-item-icon"
@click.stop="removeModuleItem">
</div>
......@@ -199,5 +207,16 @@ export default {
}
}
}
// 时间选择样式
&.custom-subfielditem-date {
::v-deep .el-form-item {
.el-date-editor {
.el-input__prefix {
display: none;
}
}
}
}
}
</style>
dsk-operate-ui/src/views/consultingOrgManagement/components/CustomForm/components/SubfieldModule.vue
View file @ 44e9eac6
......@@ -34,7 +34,7 @@ export default {
watch: {
moduleInfo: {
handler(newValue, oldValue) {
console.log(this.comModuleInfo,"subfieldModule");
// console.log(this.comModuleInfo, "subfieldModule");
// 深克隆 避免未保存修改源数据 通过 订阅 editFinish事件处理更改源数据
this.comModuleInfo = cloneDeep(newValue);
},
......@@ -150,7 +150,7 @@ export default {
.el-form-item__content {
line-height: 32px;
}
.el-input {
width: 100%;
.el-input__inner {
......
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