Skip to content

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

merge

parent c2ff94bd
Hide whitespace changes
Inline Side-by-side
Showing with 304 additions and 138 deletions
dsk-operate-ui/src/api/consultingOrgManagement/index.js
View file @ fb923445
......@@ -90,17 +90,27 @@ export const addCustomFormDataApi = (data) => request({
});
/**
* 更新自定义表单
* 获取自定义表单数据
* @param {*} projectKey
* @returns
*/
export const getCustomFormDataByProjectKeyApi = (projectKey) => request({
url: `/advisory/body/getCustomFormDataByProjectKey/${projectKey}`,
method: "get",
params: {}
});
/**
* 新增 更新 自定义表单数据
* @param {*} data
* @returns
*/
export const updateCustomFormDataApi = (data) => request({
url: "/advisory/body/updateAdvisoryBodyCustomForm",
export const updateCustomFormData = (data) => request({
url: "/advisory/body/editCustomFormData",
method: "post",
data
});
/**
* oss文件上传地址
* @param {*} data
......
dsk-operate-ui/src/utils/generator/custom-design-options.js
View file @ fb923445
......@@ -96,9 +96,13 @@ export const defaultComOptions = [
formAttribute: {
// 验证规则
rules: {
required: true,
message: "请输入选项值",
trigger: ["change", "blur"]
validator: (rules, value, callback) => {
const type = Object.prototype.toString.call(value);
if (type == "[object String]" || type == "[object Array]") {
callback();
}
callback(new Error("类型错误"));
}
},
// 是否必填
required: false,
......
dsk-operate-ui/src/utils/index.js
View file @ fb923445
......@@ -954,3 +954,13 @@ export const deserializeFn = (fnStr) => {
return null;
}
};
/**
* json字符串转换为json
* @param {*} jsonStr
* @returns
*/
export const jsonStrToObject = (jsonStr) => {
if (typeof jsonStr !== "string") return null;
return eval(`(${jsonStr})`);
};
dsk-operate-ui/src/views/consultingOrgManagement/components/CustomForm/components/CustomFormDesign.vue
View file @ fb923445
......@@ -83,7 +83,7 @@
import { defaultComOptions, subfieldModuleTemplate } from "@/utils/generator/custom-design-options";
import SubfieldItem from "@/views/consultingOrgManagement/components/CustomForm/components/SubfieldItem";
import SetFieldOption from "@/views/consultingOrgManagement/components/CustomForm/components/SetFieldOption";
import { elementMessageSingleton } from "@/utils";
import { elementMessageSingleton, jsonStrToObject } from "@/utils";
import vuedraggable from "vuedraggable";
import { v4 } from 'uuid';
import { getCustomFormDetailApi, addCustomFormDataApi } from "@/api/consultingOrgManagement";
......@@ -174,7 +174,6 @@ export default {
subfieldModuleName: { type: "string", required: true, message: "分栏名称不能为空" },
children: {
type: "array",
required: true,
defaultField: {
type: "object",
fields: {
......@@ -204,6 +203,10 @@ export default {
const child = children[j];
if (map.has(child.uid)) return this.$message.error(`第${index + 1}个分栏下的，第${j + 1}个表单元素字段名称重复`);
map.set(child.uid, child);
// 不允许默认值
if (!child.formAttribute.allowDefaultValue) {
child.componentAttribute.value instanceof Array ? child.componentAttribute.value = [] : child.componentAttribute.value = "";
}
}
}
}
......@@ -226,6 +229,9 @@ export default {
};
if (this.formTemplate?.templateId) params["templateId"] = this.formTemplate.templateId;
const result = await addCustomFormDataApi(params);
if (result.code == 200) {
this.$message.success(`${this.formTemplate?.templateId ? "更新" : "创建"}模板成功`);
}
} catch (error) {
console.log(error);
}
......@@ -268,7 +274,7 @@ export default {
},
parseTemplate(templateJson) {
try {
const data = eval(`(${templateJson})`);
const data = jsonStrToObject(templateJson);
if (data) {
this.$set(this.subfieldModuleForm, "subfieldModuleList", data.subfieldModuleList);
}
......@@ -283,6 +289,7 @@ export default {
// 有模板数据 进行回显
this.formTemplate = result;
this.parseTemplate(result.jsonData);
this.olduSbfieldModuleList = cloneDeep(this.subfieldModuleForm.subfieldModuleList);
return;
}
// 模块初始化
......@@ -373,9 +380,10 @@ export default {
currentActiveByItemId(current) {
const _temp = cloneDeep(current);
_temp.checkedAllow = false;
this.activeUid = current.uid;
// 顺序不能变
this.activeItemData = _temp;
this.activeItemDataOrigin = _temp;
this.activeUid = current.uid;
this.activeModuleId = this.subfieldModuleForm.subfieldModuleList.find(item => item?.children?.findIndex(child => child.uid == current.uid) > -1).uid;
console.log(this.activeModuleId, "模块uid");
console.log(this.activeUid, "表单元素uid");
......@@ -426,10 +434,10 @@ export default {
if (!flag) return;
const _temp = cloneDeep(itemModule);
_temp.checkedAllow = false;
this.activeUid = _temp.uid;
this.activeModuleId = parentUid;
this.activeItemData = _temp;
this.activeItemDataOrigin = _temp;
this.activeUid = _temp.uid;
this.activeModuleId = parentUid;
},
// 删除模块表单输入框
removeModuleItem(itemModule, parentUid) {
......
dsk-operate-ui/src/views/consultingOrgManagement/components/CustomForm/components/SetFieldOption.vue
View file @ fb923445
......@@ -45,7 +45,7 @@
<template v-if="comActiveFieldData.comType == 'select'">
<el-form-item label="类型" class="set-field-option-item set-field-option-radio" prop="formAttribute.isMultiple"
v-if="comActiveFieldData.formAttribute">
<el-radio-group v-model="comActiveFieldData.formAttribute.isMultiple">
<el-radio-group v-model="comActiveFieldData.formAttribute.isMultiple" @input="modeChange">
<el-radio :label="false">单选</el-radio>
<el-radio :label="true">多选</el-radio>
</el-radio-group>
......@@ -63,7 +63,7 @@
<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"
<el-form-item label="" :prop="`formAttribute.selectOptions.${index}.value`" :rules="setFieldOptionRules.selectOptionsRules"
:show-message="false">
<el-input v-model="comActiveFieldData.formAttribute.selectOptions[index].value" placeholder="请输入" clearable></el-input>
</el-form-item>
......@@ -180,7 +180,12 @@ export default {
comActiveFieldData: cloneDeep(this.activeFieldData),
setFieldOptionRules: {
fieldName: [{ required: true, trigger: ["blur", "change"], validator: fieldNameValidor }],
limit: [{ required: true, type: "number", trigger: ["blur", "change"], validator: limitValidor }]
limit: [{ required: true, type: "number", trigger: ["blur", "change"], validator: limitValidor }],
selectOptionsRules: {
required: true,
message: "请输入选项值",
trigger: ["change", "blur"]
},
},
placeholderContain: ["text", "textarea", "select", "date", "phone", "email"],
limitContain: ["photo", "file"]
......@@ -237,6 +242,13 @@ export default {
}
this.$refs["customDesignFormRef"].clearValidate("formAttribute.limit");
this.$set(this.comActiveFieldData.formAttribute, "limit", -1);
},
modeChange(value) {
if (value) {
this.$set(this.comActiveFieldData.componentAttribute, "value", []);
return;
}
this.$set(this.comActiveFieldData.componentAttribute, "value", "");
}
},
}
......@@ -494,6 +506,19 @@ export default {
.el-form-item {
margin-bottom: 0px;
margin-left: 8px;
&.is-error {
.el-form-item__content {
.el-input {
.el-input__inner {
&:focus {
border-color: #ff4949;
}
}
}
}
}
.el-form-item__content {
line-height: 32px;
......
dsk-operate-ui/src/views/consultingOrgManagement/components/CustomForm/components/SubfieldItem.vue
View file @ fb923445
......@@ -69,7 +69,7 @@ export default {
},
comChildModuleInfo: {
handler(newValue) {
console.log(this.comActiveUid !== this.comChildModuleInfo?.uid, "是否不是更改的当前元素");
// console.log(this.comActiveUid !== this.comChildModuleInfo?.uid, "是否不是更改的当前元素");
if (this.comActiveUid !== this.comChildModuleInfo?.uid) return;
this.checkValidator(newValue);
this.$mitt.emit("subfieldItemChange", newValue);
......@@ -79,9 +79,9 @@ export default {
activeUid: {
handler(newValue, oldValue) {
// 当前命中高亮的元素id 不跟当前元素uid相同 移除事件订阅 否者 添加订阅
this.addSubscription(newValue);
this.comActiveUid = newValue;
this.comOldActiveUid = oldValue;
this.addSubscription(newValue);
},
// 保证首次触发 判断是否订阅
immediate: true
......@@ -111,7 +111,7 @@ export default {
},
//可访问data属性
created() {
this.$mitt.on("fieldOptionChange", this.setFieldOption);
},
beforeDestroy() {
this.$mitt.off("fieldOptionChange");
......@@ -144,13 +144,18 @@ export default {
this.$set(this.comChildModuleInfo.formAttribute, "isError", false);
}
} catch (error) {
const { errors, fields } = error;
console.log(errors, fields);
this.$set(this.comChildModuleInfo.formAttribute, "isError", true);
}
},
// 根据命中的id 来添加发布订阅
addSubscription(newValue) {
if (newValue === this.comChildModuleInfo.uid) return this.$mitt.on("fieldOptionChange", this.setFieldOption);
this.$mitt.off("fieldOptionChange");
// if (newValue === this.comChildModuleInfo.uid) {
// this.$mitt.on("fieldOptionChange", this.setFieldOption);
// return;
// };
// this.$mitt.off("fieldOptionChange");
},
classCreate(comType) {
const classParams = {
......@@ -160,10 +165,10 @@ export default {
return classParams;
},
setFieldOption(value) {
console.log("触发：fieldOptionChange");
// value.uid 等同于 comActiveUid （原因 ： 能修改的元素一定是当前comActiveUid命中的元素，取value.uid 为了修改数据的严谨）
// 要修改的uid元素不是当前元素的id 不进行修改
// console.log(`${this.comChildModuleInfo?.uid} 当前组件元素uid`, `${value.uid} 当前需要触发修改数据的uid`);
if (value.uid !== this.comChildModuleInfo?.uid) return;
this.comChildModuleInfo = value;
},
......
dsk-operate-ui/src/views/consultingOrgManagement/components/EnterpriseList/detail/consultingAgency.vue
View file @ fb923445
......@@ -3,7 +3,7 @@
<el-form :model="comProjectDetailInfo" :rules="rules" :show-message="false" class="basic-engineering-information-inner"
ref="comProjectDetailForm">
<!-- 基础信息 -->
<div class="project-basic-information">
<div class="project-basic-information project-detault-module">
<div class="info-module-title"><span>基础信息</span></div>
<table>
<colgroup>
......@@ -41,7 +41,7 @@
</table>
</div>
<!-- 项目联系人 -->
<div class="project-contact">
<div class="project-contact project-detault-module">
<div class="info-module-title"><span>项目联系人</span></div>
<table>
<colgroup>
......@@ -84,7 +84,7 @@
</table>
</div>
<!-- 项目结算信息 -->
<div class="project-settlement-information">
<div class="project-settlement-information project-detault-module">
<div class="info-module-title"><span>项目结算信息</span></div>
<table>
<colgroup>
......@@ -133,12 +133,27 @@
</tr>
</table>
</div>
<!-- 自定义表单部分 -->
<div class="custom-design-form-template" v-if="form.subfieldModuleList.length">
<div class="custom-design-form-module" v-for="(item,index) of form.subfieldModuleList" :key="item.uid">
<div class="info-module-title"><span>{{item.subfieldModuleName}}</span></div>
<div class="custom-module-content">
<!-- 生成行 -->
<!-- <div class="custom-module-item" v-for="(child,j) of item.children" :key="child.uid" :style="{'width' : `${child.formAttribute.width}%`}">
<div class="custom-item-key">{{child.formAttribute.label}}</div>
</div> -->
</div>
</div>
</div>
</el-form>
</div>
</template>
<script>
import { searchConsultingApi, getCustomFormDetailApi } from "@/api/consultingOrgManagement";
import { elementMessageSingleton } from "@/utils";
import { searchConsultingApi, getCustomFormDetailApi, getCustomFormDataByProjectKeyApi } from "@/api/consultingOrgManagement";
import { elementMessageSingleton, jsonStrToObject } from "@/utils";
import { deepClone } from "lodash-es";
export default {
name: "consultingAgency",
props: {
......@@ -194,7 +209,12 @@ export default {
},
tableKeyWidth: 0,
searchTimer: null,
loading: false
loading: false,
formTemplate: {},
formTemplateData: {},
form: {
subfieldModuleList: []
}
};
},
//可访问data属性
......@@ -202,6 +222,7 @@ export default {
this.setInitData(this.comProjectDetailInfo, JSON.parse(JSON.stringify(this.projectDetailInfo)), "comProjectDetailInfo");
this.setInitData(this.oldComProjectDetailInfo, JSON.parse(JSON.stringify(this.projectDetailInfo)), "oldComProjectDetailInfo");
this.setTableKeyWidth();
this.formTemplateInit();
},
//计算集
computed: {
......@@ -224,6 +245,55 @@ export default {
}
return "";
},
async formTemplateInit() {
try {
const _formTemplate = await this.getCustomFormDetail();
const _formTemplateData = await this.getCustomFormDataByProjectKey(this.projectKey);
await this.customFormRender(_formTemplate, _formTemplateData);
} catch (error) {
}
},
async customFormRender(formTemplate, formData) {
try {
// 缺失模板不渲染
if (!formTemplate || !formTemplate.jsonData) return;
// 有表单数据的情况
if (formData) {
return;
}
// 无表单数据只渲染模板
const template = jsonStrToObject(formTemplate.jsonData);
if (template) {
console.log(template);
this.$set(this.form, "subfieldModuleList", template.subfieldModuleList);
}
} catch (error) {
this.$message.error(`解析模板失败,${error.message}`);
console.log(error);
}
},
async getCustomFormDataByProjectKey(projectKey) {
try {
const result = await getCustomFormDataByProjectKeyApi(projectKey);
if (result.code == 200 && result.data) {
return result.data;
}
return null;
} catch (error) {
}
},
async getCustomFormDetail() {
try {
const result = await getCustomFormDetailApi();
if (result.code == 200) {
return result.data ? result.data : {};
}
} catch (error) {
}
},
async setTableKeyWidth() {
try {
await this.$nextTick();
......@@ -375,142 +445,144 @@ export default {
::v-deep .basic-engineering-information-inner {
width: 100%;
.info-module-title {
line-height: 24px;
color: #232323;
font-weight: bold;
font-size: 16px;
margin-bottom: 16px;
display: flex;
align-items: center;
& > span {
display: inline-block;
position: relative;
padding-left: 8px;
box-sizing: border-box;
&::before {
content: "";
position: absolute;
left: 0px;
top: 50%;
transform: translateY(-50%);
background: rgba(35, 35, 35, 0.8);
width: 2px;
height: 14px;
.project-detault-module,
.custom-design-form-module {
.info-module-title {
line-height: 24px;
color: #232323;
font-weight: bold;
font-size: 16px;
margin-bottom: 16px;
display: flex;
align-items: center;
& > span {
display: inline-block;
position: relative;
padding-left: 8px;
box-sizing: border-box;
&::before {
content: "";
position: absolute;
left: 0px;
top: 50%;
transform: translateY(-50%);
background: rgba(35, 35, 35, 0.8);
width: 2px;
height: 14px;
}
}
}
}
table {
width: 100%;
border-spacing: 0;
border-collapse: collapse;
&,
th,
td {
border: 1px solid #e6eaf1;
box-sizing: border-box;
}
td {
padding: 9px 12px;
line-height: 22px;
color: #232323;
font-size: 12px;
position: relative;
.el-form-item {
position: absolute;
left: 0px;
top: 0px;
width: 100%;
height: 100%;
margin-bottom: 0px;
z-index: 9;
.normal-value {
vertical-align: middle;
line-height: 22px;
&.is-error {
.el-form-item__content {
.el-input {
.el-input__inner {
border-color: #ff4949;
}
}
}
}
.el-form-item {
position: absolute;
left: 0px;
top: 0px;
width: 100%;
.el-form-item__content {
height: 100%;
margin-bottom: 0px;
z-index: 9;
font-size: 12px;
line-height: unset;
&.is-error {
.el-form-item__content {
.el-input {
.el-input__inner {
border-color: #ff4949;
}
}
}
.el-input {
height: 100%;
font-size: 12px;
}
.el-form-item__content {
height: 100%;
.el-input__inner {
height: 40px;
line-height: 40px;
border-radius: unset;
border-color: transparent;
color: #232323;
font-size: 12px;
line-height: unset;
font-weight: 400;
padding-left: 12px;
outline: unset;
box-sizing: border-box;
.el-input {
height: 100%;
font-size: 12px;
&:focus {
border: 1px solid #0081ff;
}
}
.el-input__inner {
height: 40px;
line-height: 40px;
border-radius: unset;
border-color: transparent;
color: #232323;
font-size: 12px;
font-weight: 400;
padding-left: 12px;
outline: unset;
box-sizing: border-box;
.el-date-editor {
width: 100%;
&:focus {
border: 1px solid #0081ff;
}
.el-input__prefix {
display: none;
}
}
.el-date-editor {
width: 100%;
.el-radio-group {
display: flex;
height: 100%;
align-items: center;
padding-left: 12px;
box-sizing: border-box;
.el-input__prefix {
display: none;
}
.el-radio__input.is-checked .el-radio__inner {
border-color: #0081ff;
background: #0081ff;
}
.el-radio-group {
display: flex;
height: 100%;
align-items: center;
padding-left: 12px;
box-sizing: border-box;
.el-radio__input.is-checked .el-radio__inner {
border-color: #0081ff;
background: #0081ff;
}
.el-radio__input.is-checked + .el-radio__label {
color: #0081ff;
}
.el-radio__input.is-checked + .el-radio__label {
color: #0081ff;
}
.el-radio__inner:hover {
border-color: #0081ff;
}
.el-radio__inner:hover {
border-color: #0081ff;
}
}
}
}
table {
width: 100%;
border-spacing: 0;
border-collapse: collapse;
&,
th,
td {
border: 1px solid #e6eaf1;
box-sizing: border-box;
}
.table-key {
background: #f0f3fa;
color: rgba(35, 35, 35, 0.8);
width: 140px;
&.lot {
height: 62px;
td {
padding: 9px 12px;
line-height: 22px;
color: #232323;
font-size: 12px;
position: relative;
.normal-value {
vertical-align: middle;
line-height: 22px;
}
}
.table-key {
background: #f0f3fa;
color: rgba(35, 35, 35, 0.8);
width: 140px;
&.lot {
height: 62px;
}
}
.data-td {
width: calc(100% - 140px);
}
}
.data-td {
width: calc(100% - 140px);
}
}
......@@ -518,6 +590,38 @@ export default {
.project-settlement-information {
margin-top: 24px;
}
.custom-design-form-template {
width: 100%;
.custom-design-form-module {
margin-top: 24px;
.custom-module-content {
display: table;
width: 100%;
border-spacing: 0;
border-collapse: collapse;
border: 1px solid #e6eaf1;
.custom-module-item {
display: table-cell;
border: 1px solid #e6eaf1;
box-sizing: border-box;
.custom-item-key {
width: 140px;
min-height: 40px;
font-size: 12px;
background: #f0f3fa;
color: rgba(35, 35, 35, 0.8);
padding: 9px 12px;
box-sizing: border-box;
display: flex;
align-items: center;
}
}
}
}
}
}
}
</style>
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