Skip to content

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

fix

parent 01faa0f2
Show whitespace changes
Inline Side-by-side
Showing with 284 additions and 52 deletions
dsk-operate-ui/package.json
View file @ f78a4bce
......@@ -47,10 +47,12 @@
"js-md5": "^0.7.3",
"jsencrypt": "3.0.0-rc.1",
"json-editor-vue": "^0.11.1",
"lodash-es": "^4.17.21",
"mitt": "^3.0.1",
"nprogress": "0.2.0",
"quill": "1.3.7",
"screenfull": "5.0.2",
"serialize-javascript": "^6.0.2",
"sortablejs": "^1.15.0",
"uuid": "^9.0.1",
"vue": "2.6.12",
......
dsk-operate-ui/src/utils/generator/custom-design-options.js
View file @ f78a4bce
......@@ -9,8 +9,7 @@ export const subfieldModuleTemplate = {
subfieldModuleNameRules: {
trigger: ["blur", "change"],
validator: (rule, value, callback) => {
alert(1);
if (!value) {
if (!value && !value?.toString()?.trim()) {
return callback(new Error("请输入分栏名称"));
}
callback();
......@@ -22,11 +21,12 @@ export const subfieldModuleTemplate = {
};
export const defaultComOptions = [
// 单行文本
{
// 组件类型
comType: "el-input",
comType: "text",
// 组件展示图标
comShowIcon: require("@/assets/images/consultingAgencyManagement/customForm/icon_single_line_text@2x.png"),
comShowIcon: "icon_single_line_text@2x.png",
// 验证通过
checkedAllow: false,
// 表单属性
......@@ -49,5 +49,66 @@ export const defaultComOptions = [
// 输入值为空提示
placeholder: "请输入"
}
},
// 多行文本
{
// 组件类型
comType: "textarea",
// 组件展示图标
comShowIcon: "icon_multiline_text@2x.png",
// 验证通过
checkedAllow: false,
// 表单属性
formAttribute: {
// 验证规则
rules: {},
// 是否必填
required: false,
// 字段名称
fieldName: "",
// 展示label
label: "多行文本",
// 组件宽度
width: 100
},
// 组件属性
componentAttribute: {
// 绑定的值
value: "",
// 输入值为空提示
placeholder: "请输入"
}
},
// 下拉选项
{
// 组件类型
comType: "select",
// 组件展示图标
comShowIcon: "icon_drop_down@2x.png",
// 验证通过
checkedAllow: false,
// 表单属性
formAttribute: {
// 验证规则
rules: {},
// 是否必填
required: false,
// 字段名称
fieldName: "",
// 展示label
label: "下拉选项",
// 组件宽度
width: 100,
selectOptions: [],
// 是否多选
isMultiple: false
},
// 组件属性
componentAttribute: {
// 绑定的值
value: "",
// 输入值为空提示
placeholder: "请选择"
}
},
];
\ No newline at end of file
dsk-operate-ui/src/utils/index.js
View file @ f78a4bce
......@@ -930,5 +930,27 @@ export const detailSideBar = new Map([
export const tableContainerFixed = (scrollBarContainer = "",) => {
}
};
/**
* 序列化 function
* @param {Function} fn
* @returns
*/
export const serializationFn = (fn) => {
const type = Object.prototype.toString.call(fn);
if (type != "[object AsyncFunction]" && type != "[object Function]") return;
return fn.toString();
};
/**
* 反序列化 function
* @param {string} fnStr
*/
export const deserializeFn = (fnStr) => {
try {
return new Function('return ' + fnStr)();
} catch (error) {
return null;
}
};
dsk-operate-ui/src/views/consultingOrgManagement/components/CustomForm/components/CustomFormDesign.vue
View file @ f78a4bce
......@@ -11,7 +11,7 @@
<transition-group name="fade" tag="div" class="draggable-fields-list">
<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="">
<img :src="require(`@/assets/images/consultingAgencyManagement/customForm/${item.comShowIcon}`)" alt="">
<span>{{item.formAttribute.label}}</span>
</div>
</transition-group>
......@@ -84,6 +84,9 @@ import SetFieldOption from "@/views/consultingOrgManagement/components/CustomFor
import { elementMessageSingleton } from "@/utils";
import vuedraggable from "vuedraggable";
import { v4 } from 'uuid';
import { getCustomFormDetailApi, addCustomFormDataApi } from "@/api/consultingOrgManagement";
import { cloneDeep } from "lodash-es";
import serialize from "serialize-javascript";
export default {
name: "customFormDesign",
components: {
......@@ -147,17 +150,37 @@ export default {
const randomIndex = Math.floor(Math.random() * alphabet.length);
return alphabet[randomIndex];
},
initModule() {
async getCustomFormDetail() {
try {
const result = await getCustomFormDetailApi();
if (result.code == 200 && result.data?.length) {
return result.data;
}
return [];
} catch (error) {
}
},
async initModule() {
try {
const result = await this.getCustomFormDetail();
if (result.length) {
// 有模板数据 进行回显
return;
}
// 模块初始化
this.addSubfieldModule();
const component = JSON.parse(JSON.stringify(defaultComOptions[0]));
const component = cloneDeep(defaultComOptions[0]);
component.uid = v4();
component.formAttribute.fieldName = this.generateRandomLowerCaseLetter() + component.uid.split("-").join("");
this.activeItemData = component;
this.activeItemDataOrigin = JSON.parse(JSON.stringify(this.activeItemData));
this.activeItemDataOrigin = cloneDeep(this.activeItemData);
this.activeModuleId = this.subfieldModuleForm.subfieldModuleList[0].uid;
this.activeUid = component.uid;
this.subfieldModuleForm.subfieldModuleList[0].children.push(component);
} catch (error) {
}
},
onMove(e, originalEvent) {
try {
......@@ -179,7 +202,7 @@ export default {
// 克隆目标组件
targetComClone(v) {
console.log("clone", v);
const cloneTarget = JSON.parse(JSON.stringify(v));
const cloneTarget = cloneDeep(v);
cloneTarget.uid = v4();
cloneTarget.formAttribute.fieldName = this.generateRandomLowerCaseLetter() + cloneTarget.uid.split("-").join("");
return cloneTarget;
......@@ -201,11 +224,11 @@ export default {
},
// 取消当前焦点设置
cancelSetOptions() {
this.activeItemData = JSON.parse(JSON.stringify(this.activeItemDataOrigin));
this.activeItemData = cloneDeep(this.activeItemDataOrigin);
},
// 设置表单完成
setOptionsFinish(current, parentUid) {
const _temp = JSON.parse(JSON.stringify(current));
const _temp = cloneDeep(current);
_temp.checkedAllow = true;
const index = this.subfieldModuleForm.subfieldModuleList.findIndex(item => item.uid == parentUid);
if (index > -1) {
......@@ -218,7 +241,7 @@ export default {
},
// 命中变化的表单元素
currentActiveByItemId(current) {
const _temp = JSON.parse(JSON.stringify(current));
const _temp = cloneDeep(current);
_temp.checkedAllow = false;
this.activeUid = current.uid;
this.activeItemData = _temp;
......@@ -229,7 +252,7 @@ export default {
},
// 添加分栏
addSubfieldModule() {
const _temp = JSON.parse(JSON.stringify(subfieldModuleTemplate));
const _temp = cloneDeep(subfieldModuleTemplate);
_temp.uid = v4();
this.moduleCount += 1;
_temp.defaultSubfieldModuleName = `分栏${this.moduleCount}`;
......@@ -251,7 +274,7 @@ export default {
},
// 编辑模块 更新title
editModule(module) {
const _temp = JSON.parse(JSON.stringify(module));
const _temp = cloneDeep(module);
const flag = this.onMove();
if (!flag) return;
const index = this.subfieldModuleForm.subfieldModuleList.findIndex(item => item.uid == _temp.uid);
......@@ -271,7 +294,7 @@ export default {
activeSubfieldItem(itemModule, parentUid) {
const flag = this.onMove();
if (!flag) return;
const _temp = JSON.parse(JSON.stringify(itemModule));
const _temp = cloneDeep(itemModule);
_temp.checkedAllow = false;
this.activeUid = _temp.uid;
this.activeModuleId = parentUid;
......
dsk-operate-ui/src/views/consultingOrgManagement/components/CustomForm/components/SetFieldOption.vue
View file @ f78a4bce
......@@ -15,9 +15,21 @@
<el-input v-model="comActiveFieldData.componentAttribute.placeholder" placeholder="请输入提示文字" clearable></el-input>
</el-form-item>
<!-- 默认值 -->
<template v-if="defaultValueContain.includes(comActiveFieldData.comType)">
<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>
</template>
<!-- 下拉框配置 -->
<template v-if="comActiveFieldData.comType == 'select'">
<el-form-item label="类型" class="set-field-option-item set-field-option-select" prop="formAttribute.isMultiple"
v-if="comActiveFieldData.formAttribute">
<el-radio-group v-model="comActiveFieldData.formAttribute.isMultiple">
<el-radio :label="false">单选</el-radio>
<el-radio :label="true">多选</el-radio>
</el-radio-group>
</el-form-item>
</template>
<!-- 表单样式 -->
<div class="set-field-option-styles-item" v-if="comActiveFieldData.formAttribute">
......@@ -51,6 +63,7 @@
</div>
</template>
<script>
import { cloneDeep } from "lodash-es";
export default {
name: "setFieldOption",
props: {
......@@ -75,7 +88,7 @@ export default {
activeFieldData: {
handler(newValue) {
// 通过保存更新源数据按钮
this.comActiveFieldData = JSON.parse(JSON.stringify(newValue));
this.comActiveFieldData = cloneDeep(newValue);
},
deep: true
},
......@@ -104,10 +117,11 @@ export default {
};
return {
// 通过保存更新源数据按钮
comActiveFieldData: JSON.parse(JSON.stringify(this.activeFieldData)),
comActiveFieldData: cloneDeep(this.activeFieldData),
setFieldOptionRules: {
fieldName: [{ required: true, trigger: ["blur", "change"], validator: fieldNameValidor }]
}
},
defaultValueContain: ["text", "textarea"]
};
},
//可访问data属性
......@@ -202,6 +216,46 @@ export default {
}
}
}
/* 下拉框样式重置 */
&.set-field-option-select {
.el-form-item__content {
line-height: 22px;
.el-radio-group {
display: flex;
align-items: center;
.el-radio {
display: flex;
align-items: center;
.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;
padding-right: 0px;
}
}
}
}
}
}
::v-deep .set-field-option-styles-item {
......@@ -224,20 +278,42 @@ export default {
.el-radio-group {
display: flex;
align-items: center;
.el-radio {
display: flex;
align-items: center;
.el-radio-button__orig-radio:checked + .el-radio-button__inner {
background-color: #0081ff;
border-color: #0081ff;
.el-radio__input {
width: 14px;
height: 14px;
.el-radio__inner {
&::after {
width: 6px;
height: 6px;
}
&:hover {
color: #fff;
border-color: #0081ff;
}
}
}
.el-radio__input.is-checked .el-radio__inner {
background: #0081ff;
border-color: #0081ff;
}
.el-radio__label {
padding-left: 8px;
color: #232323;
}
}
.el-radio-button__orig-radio:checked + .el-radio-button__inner {
background-color: #0081ff;
border-color: #0081ff;
&:hover {
color: #fff;
}
}
.el-radio-button__inner {
width: 70px;
......
dsk-operate-ui/src/views/consultingOrgManagement/components/CustomForm/components/SubfieldItem.vue
View file @ f78a4bce
<template>
<div class="subfield-item-container" :class="{'is-active-subfield-item' : activeUid == comChildModuleInfo.uid}" :style="styles"
@click="activeSubfieldItem">
<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}"
<el-form-item class="subfield-module-form-item" :class="{'is-required': comChildModuleInfo.formAttribute.required}"
:label="comChildModuleInfo.formAttribute.label">
<!-- 输入框类型 -->
<!-- 单行文本类型 -->
<el-input v-model="comChildModuleInfo.componentAttribute.value" :placeholder="comChildModuleInfo.componentAttribute.placeholder" clearable
v-if="comChildModuleInfo.comType == 'el-input'"></el-input>
v-if="comChildModuleInfo.comType == 'text'"></el-input>
<!-- 多行文本类型 -->
<el-input type="textarea" v-model="comChildModuleInfo.componentAttribute.value" :placeholder="comChildModuleInfo.componentAttribute.placeholder"
:show-word-limit="false" clearable v-if="comChildModuleInfo.comType == 'textarea'"></el-input>
<!-- 下拉框类型 -->
<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'">
<el-option v-for="(item,index) in comChildModuleInfo.formAttribute.selectOptions" :key="item.value" :label="item.value" :value="index">
</el-option>
</el-select>
</el-form-item>
<img src="@/assets/images/consultingAgencyManagement/customForm/icon_delete@2x.png" alt="" class="remove-subfield-item-icon"
@click.stop="removeModuleItem">
</div>
</template>
<script>
import { cloneDeep } from "lodash-es";
export default {
name: "subfieldItem",
props: {
......@@ -23,7 +33,7 @@ export default {
watch: {
childModuleInfo: {
handler(newValue) {
this.comChildModuleInfo = JSON.parse(JSON.stringify(newValue));
this.comChildModuleInfo = cloneDeep(newValue);
},
deep: true
},
......@@ -36,7 +46,7 @@ export default {
},
data() {
return {
comChildModuleInfo: JSON.parse(JSON.stringify(this.childModuleInfo)),
comChildModuleInfo: cloneDeep(this.childModuleInfo),
};
},
//可访问data属性
......@@ -56,6 +66,13 @@ export default {
},
//方法集
methods: {
classCreate(comType) {
const classParams = {
'is-active-subfield-item': this.activeUid == this.comChildModuleInfo.uid,
[`custom-subfielditem-${comType}`]: true
};
return classParams;
},
setFieldOption(value) {
this.comChildModuleInfo = value;
},
......@@ -73,7 +90,7 @@ export default {
.subfield-item-container {
width: 100%;
min-height: 56px;
padding: 0px 16px 0px 32px;
padding: 12px 16px 12px 32px;
box-sizing: border-box;
display: flex;
align-items: center;
......@@ -112,5 +129,40 @@ export default {
margin-left: 12px;
cursor: pointer;
}
/* 多行文本样式 */
&.custom-subfielditem-textarea {
.subfield-module-item-dragg-target-icon {
align-self: flex-start;
margin-top: 4px;
}
.remove-subfield-item-icon {
align-self: flex-start;
margin-top: 4px;
}
::v-deep .subfield-module-form-item {
.el-form-item__label {
line-height: 22px;
}
.el-textarea {
.el-textarea__inner {
resize: unset;
min-height: 76px !important;
}
}
}
}
/* 下拉选择框 */
&.custom-subfielditem-select {
::v-deep .el-form-item {
.el-select {
width: 100%;
.el-input__inner {
border-radius: 2px;
}
}
}
}
}
</style>
dsk-operate-ui/src/views/consultingOrgManagement/components/CustomForm/components/SubfieldModule.vue
View file @ f78a4bce
......@@ -24,6 +24,7 @@
</div>
</template>
<script>
import { cloneDeep } from "lodash-es";
export default {
name: "subfieldModule",
props: {
......@@ -33,8 +34,9 @@ export default {
watch: {
moduleInfo: {
handler(newValue, oldValue) {
console.log(this.comModuleInfo);
// 深克隆 避免未保存修改源数据 通过 订阅 editFinish事件处理更改源数据
this.comModuleInfo = JSON.parse(JSON.stringify(newValue));
this.comModuleInfo = cloneDeep(newValue);
},
deep: true
},
......@@ -48,7 +50,7 @@ export default {
return {
oldComModuleName: this.moduleInfo.subfieldModuleName,
// 深克隆 避免未保存修改源数据 通过 订阅 editFinish事件处理更改源数据
comModuleInfo: JSON.parse(JSON.stringify(this.moduleInfo)),
comModuleInfo: cloneDeep(this.moduleInfo),
comModuleIndex: this.moduleIndex
};
},
......
dsk-operate-ui/src/views/consultingOrgManagement/components/EnterpriseList/detail/basicEngineeringInformation.vue
View file @ f78a4bce
......@@ -47,12 +47,6 @@
<td class="table-key">项目承接类型</td>
<td>{{"-"}}</td>
</tr>
<tr>
<td class="table-key">投资来源</td>
<td>{{"-"}}</td>
<td class="table-key">项目承接类型</td>
<td>{{"-"}}</td>
</tr>
<tr>
<td class="table-key">合同签订日期</td>
<td>{{"-"}}</td>
......
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