Skip to content

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

merge

parent b7a480a9
Hide whitespace changes
Inline Side-by-side
Showing with 277 additions and 34 deletions
dsk-operate-ui/src/components/DskCustomItemRender/index.vue 0 → 100644
View file @ c164d7f7
<template>
<div class="dsk-custom-item-render">
<el-form-item class="dsk-custom-form-render-item" :prop="validatorTarget" :rules="validatorRules(comCustomItem)">
<!-- 单行文本类型 -->
<el-input v-model="comCustomItem.componentAttribute.value" :placeholder="comCustomItem.componentAttribute.placeholder" clearable
v-if="comCustomItem.comType == 'text'"></el-input>
<!-- 多行文本类型 -->
<el-input type="textarea" v-model="comCustomItem.componentAttribute.value" :placeholder="comCustomItem.componentAttribute.placeholder"
:show-word-limit="false" clearable v-if="comCustomItem.comType == 'textarea'"></el-input>
<!-- 下拉框类型 -->
<el-select v-model="comCustomItem.componentAttribute.value" :multiple="comCustomItem.formAttribute.isMultiple"
:collapse-tags="comCustomItem.formAttribute.isMultiple" :placeholder="comCustomItem.componentAttribute.placeholder"
v-if="comCustomItem.comType == 'select'">
<el-option v-for="(item,index) in comCustomItem.formAttribute.selectOptions" :key="item.id" :label="item.value" :value="item.value">
</el-option>
</el-select>
<!-- 时间类型 -->
<el-date-picker v-model="comCustomItem.componentAttribute.value" type="datetime" :value-format="'yyyy-MM-dd HH:mm:ss'"
:placeholder="comCustomItem.componentAttribute.placeholder" v-if="comCustomItem.comType == 'date'">
</el-date-picker>
<!-- 电话类型 -->
<el-input v-model="comCustomItem.componentAttribute.value" :placeholder="comCustomItem.componentAttribute.placeholder" clearable
v-if="comCustomItem.comType == 'phone'"></el-input>
<!-- 电子邮箱类型 -->
<dsk-email-input v-model="comCustomItem.componentAttribute.value" :placeholder="comCustomItem.componentAttribute.placeholder" :clearable="true"
v-if="comCustomItem.comType == 'email'"></dsk-email-input>
<!-- 图片类型 -->
<dsk-photo-input v-model="comCustomItem.componentAttribute.value" v-if="comCustomItem.comType == 'photo'"
:limit="comCustomItem.formAttribute.limit"></dsk-photo-input>
<!-- 文件类型 -->
<dsk-file-input v-model="comCustomItem.componentAttribute.value" v-if="comCustomItem.comType == 'file'"
:limit="comCustomItem.formAttribute.limit"></dsk-file-input>
</el-form-item>
</div>
</template>
<script>
import DskEmailInput from "@/components/DskEmailInput";
import DskPhotoInput from "@/components/DskPhotoInput";
import DskFileInput from "@/components/DskFileInput";
export default {
name: "dskCustomItemRender",
components: {
DskEmailInput,
DskPhotoInput,
DskFileInput
},
props: {
customItem: Object,
// 模块下标
customModuleIndex: Number,
// 父级下标
customRowIndex: Number,
// 当前下标
customItemIndex: Number,
// 是否处于修改模式
isModify: Boolean
},
watch: {
customItem: {
handler(newValue) {
this.comCustomItem = newValue;
},
deep: true
},
customRowIndex: {
handler(newValue) {
this.comCustomRowIndex = newValue;
},
immediate: true
},
customItemIndex: {
handler(newValue) {
this.comCustomItemIndex = newValue;
},
immediate: true
},
customModuleIndex: {
handler(newValue) {
this.comCustomModuleIndex = newValue;
},
immediate: true
},
isModify: {
handler(newValue) {
this.comIsModify = newValue;
},
immediate: true
}
},
data() {
return {
comCustomItem: this.customItem,
comCustomModuleIndex: this.customModuleIndex,
comCustomRowIndex: this.customRowIndex,
comCustomItemIndex: this.customItemIndex,
comIsModify: this.isModify
};
},
//可访问data属性
created() {
},
//计算集
computed: {
// prop传递的验证值
validatorTarget() {
return `subfieldModuleList.${this.comCustomModuleIndex}.childrentGroup.${this.comCustomRowIndex}.${this.comCustomItemIndex}.componentAttribute.value`;
}
},
//方法集
methods: {
// 验证规则
validatorRules(item) {
if (!item.formAttribute) return {};
return item.formAttribute.required ? item.formAttribute.requiredRules ? item.formAttribute.requiredRules : { required: true } : item.formAttribute.rules;
}
},
}
</script>
<style lang="scss" scoped>
.dsk-custom-item-render {
width: 100%;
height: 100%;
position: relative;
}
</style>
dsk-operate-ui/src/utils/index.js
View file @ c164d7f7
......@@ -964,3 +964,50 @@ export const jsonStrToObject = (jsonStr) => {
if (typeof jsonStr !== "string") return null;
return eval(`(${jsonStr})`);
};
/**
* 数组元素分组
* @param {Array<any>} arr 分组元素
* @param {*} max 最大值
* @returns
*/
export function groupArray(arr, max = 100, target = "") {
let result = [];
let currentGroup = [];
const len = arr.length;
for (let i = 0; i < len; i++) {
let currentValue = arr[i];
// 如果内部元素是一个对象
if (Object.prototype.toString.call(currentValue) === "[object Object]") {
const _temp = target.split(".");
for (const key of _temp) {
currentValue = currentValue[key];
}
}
const sumResult = currentGroup.reduce((sum, value) => {
let _tempValue = value;
if (Object.prototype.toString.call(_tempValue) === "[object Object]") {
const _temp = target.split(".");
for (const key of _temp) {
_tempValue = _tempValue[key];
}
}
return sum + _tempValue;
}, 0);
if (sumResult + currentValue <= max) {
currentGroup.push(arr[i]);
} else {
result.push(currentGroup);
currentGroup = [arr[i]];
}
}
// 处理剩余的元素，如果有的话
if (currentGroup.length > 0) {
result.push(currentGroup);
}
return result;
}
dsk-operate-ui/src/views/consultingOrgManagement/components/CustomForm/components/CustomFormDesign.vue
View file @ c164d7f7
......@@ -166,7 +166,6 @@ export default {
let finllyRules = {
subfieldModuleList: {
type: "array",
required: true,
defaultField: {
type: "object",
fields: {
......@@ -378,13 +377,15 @@ export default {
},
// 命中变化的表单元素
currentActiveByItemId(current) {
const _temp = cloneDeep(current);
const _temp = current;
_temp.checkedAllow = false;
// 顺序不能变
this.activeModuleId = this.subfieldModuleForm.subfieldModuleList.find(item => item?.children?.findIndex(child => child.uid == current.uid) > -1).uid;
// 关联父级模块uid
_temp.pid = this.activeModuleId;
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");
},
......
dsk-operate-ui/src/views/consultingOrgManagement/components/CustomForm/components/SubfieldItem.vue
View file @ c164d7f7
......@@ -165,7 +165,7 @@ export default {
return classParams;
},
setFieldOption(value) {
console.log("触发：fieldOptionChange");
// console.log("触发：fieldOptionChange");
// value.uid 等同于 comActiveUid （原因 ： 能修改的元素一定是当前comActiveUid命中的元素，取value.uid 为了修改数据的严谨）
// 要修改的uid元素不是当前元素的id 不进行修改
// console.log(`${this.comChildModuleInfo?.uid} 当前组件元素uid`, `${value.uid} 当前需要触发修改数据的uid`);
......
dsk-operate-ui/src/views/consultingOrgManagement/components/EnterpriseList/detail/consultingAgency.vue
View file @ c164d7f7
......@@ -6,12 +6,12 @@
<div class="project-basic-information project-detault-module">
<div class="info-module-title"><span>基础信息</span></div>
<table>
<colgroup>
<!-- <colgroup>
<col>
<col :style="{width : tableKeyWidth}">
<col>
<col :style="{width : tableKeyWidth}">
</colgroup>
</colgroup> -->
<tr>
<td class="table-key">咨询机构名称</td>
<td>
......@@ -44,12 +44,12 @@
<div class="project-contact project-detault-module">
<div class="info-module-title"><span>项目联系人</span></div>
<table>
<colgroup>
<!-- <colgroup>
<col>
<col :style="{width : tableKeyWidth}">
<col>
<col :style="{width : tableKeyWidth}">
</colgroup>
</colgroup> -->
<tr>
<td class="table-key">项目负责人</td>
<td>
......@@ -87,12 +87,12 @@
<div class="project-settlement-information project-detault-module">
<div class="info-module-title"><span>项目结算信息</span></div>
<table>
<colgroup>
<!-- <colgroup>
<col>
<col :style="{width : tableKeyWidth}">
<col>
<col :style="{width : tableKeyWidth}">
</colgroup>
</colgroup> -->
<tr>
<td class="table-key">结算开始时间</td>
<td>
......@@ -135,27 +135,38 @@
</div>
<!-- 自定义表单部分 -->
<div class="custom-design-form-template" v-if="form.subfieldModuleList.length">
<el-form :model="form" class="custom-design-form-template" ref="customDesignFormTemplate" 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 class="custom-module-row" v-for="(row,rowIndex) of item.childrentGroup" :key="rowIndex">
<div class="custom-module-item" v-for="(column,columnIndex) of row" :key="column.uid" :style="itemStyles(column,rowIndex,columnIndex)">
<div class="custom-item-key" :class="{'is-required-key' : column.formAttribute.required}">{{column.formAttribute.label}}</div>
<!-- 组件容器 -->
<div class="custom-item-com-box">
<dsk-custom-item-render :custom-item="column" :custom-module-index="index" :custom-row-index="rowIndex"
:custom-item-index="columnIndex" :isModify="comIsModify"></dsk-custom-item-render>
</div>
</div>
</div>
</div>
</div>
</div>
</el-form>
</el-form>
</div>
</template>
<script>
import { searchConsultingApi, getCustomFormDetailApi, getCustomFormDataByProjectKeyApi } from "@/api/consultingOrgManagement";
import { elementMessageSingleton, jsonStrToObject } from "@/utils";
import { deepClone } from "lodash-es";
import { elementMessageSingleton, jsonStrToObject, groupArray } from "@/utils";
import { cloneDeep } from "lodash-es";
import DskCustomItemRender from "@/components/DskCustomItemRender";
export default {
name: "consultingAgency",
components: {
DskCustomItemRender
},
props: {
projectDetailInfo: Object,
isModify: {
......@@ -230,6 +241,18 @@ export default {
},
//方法集
methods: {
itemStyles(item, index, selfIndex) {
const styles = {
width: `${item.formAttribute.width}%`
};
if (index > 0) {
styles["border-top"] = "unset";
}
if (selfIndex > 0) {
styles["border-left"] = "unset";
}
return styles;
},
setInitData(originData, mergeData, mergeKey) {
if (!mergeData.advisoryBody) mergeData.advisoryBody = {};
if (!mergeData.advisoryBodyProject) mergeData.advisoryBodyProject = {};
......@@ -266,8 +289,8 @@ export default {
const template = jsonStrToObject(formTemplate.jsonData);
if (template) {
console.log(template);
this.createTemplateTable();
this.$set(this.form, "subfieldModuleList", template.subfieldModuleList);
const table = this.createTemplateTable(template.subfieldModuleList);
this.$set(this.form, "subfieldModuleList", table);
}
} catch (error) {
this.$message.error(`解析模板失败,${error.message}`);
......@@ -275,8 +298,20 @@ export default {
}
},
// 创建渲染table展示格式
createTemplateTable() {
createTemplateTable(list) {
/**
* @type {Array<any>}
*/
const tableList = list;
for (const iterator of tableList) {
const len = iterator?.children?.length;
if (len) {
const _childrentGroup = groupArray(iterator?.children, 100, "formAttribute.width");
// 分组过后的值
iterator["childrentGroup"] = cloneDeep(_childrentGroup);
}
}
return tableList;
},
async getCustomFormDataByProjectKey(projectKey) {
try {
......@@ -305,15 +340,17 @@ export default {
/**
* @type {HTMLDivElement}
*/
const inner = this.$el.querySelector(".basic-engineering-information-inner");
if (inner) {
const td = parseInt((inner.offsetWidth - 140 * 2) / 2);
this.tableKeyWidth = `${parseInt(parseFloat(td / inner.offsetWidth) * 100)}%`;
}
// const inner = this.$el.querySelector(".basic-engineering-information-inner");
// if (inner) {
// const td = parseInt((inner.offsetWidth - 140 * 2) / 2);
// this.tableKeyWidth = `${parseInt(parseFloat(td / inner.offsetWidth) * 100)}%`;
// }
this.tableKeyWidth = "180px";
} catch (error) {
}
},
cancelModify() {
this.comProjectDetailInfo = JSON.parse(JSON.stringify(this.oldComProjectDetailInfo));
},
......@@ -551,12 +588,24 @@ export default {
border-color: #0081ff;
}
}
.el-textarea {
.el-textarea__inner {
resize: unset;
border-radius: 0px;
}
}
.el-select {
width: 100%;
}
}
}
table {
width: 100%;
border-spacing: 0;
border-collapse: collapse;
table-layout: fixed;
&,
th,
td {
......@@ -580,13 +629,13 @@ export default {
.table-key {
background: #f0f3fa;
color: rgba(35, 35, 35, 0.8);
width: 140px;
width: 180px;
&.lot {
height: 62px;
}
}
.data-td {
width: calc(100% - 140px);
width: calc(100% - 180px);
}
}
}
......@@ -602,26 +651,46 @@ export default {
margin-top: 24px;
.custom-module-content {
display: table;
display: flex;
flex-direction: column;
width: 100%;
border-spacing: 0;
border-collapse: collapse;
border: 1px solid #e6eaf1;
/* border: 1px solid #e6eaf1; */
box-sizing: border-box;
.custom-module-row {
display: flex;
align-items: center;
}
.custom-module-item {
display: table-cell;
display: flex;
border: 1px solid #e6eaf1;
box-sizing: border-box;
.custom-item-key {
width: 140px;
width: 180px;
min-height: 40px;
font-size: 12px;
background: #f0f3fa;
color: rgba(35, 35, 35, 0.8);
padding: 9px 12px;
border-right: 1px solid #e6eaf1;
box-sizing: border-box;
display: flex;
align-items: center;
&.is-required-key {
&::before {
content: "*";
color: #f56c6c;
margin-right: 4px;
}
}
}
.custom-item-com-box {
width: calc(100% - 180px);
min-height: 40px;
display: flex;
align-items: center;
}
}
}
......
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