herenshan112
/
appFormLowcode
1
0
Fork 0
Code Issues Pull Requests Projects Releases Wiki Activity
Browse Source

关联选项设置显示隐藏效果 

Signed-off-by: liwenxuan <1298531568@qq.com>
lwx_v4
liwenxuan 12 months ago
parent
80f2bfb612
commit
83ef023520
2 changed files with 1476 additions and 625 deletions
Whitespace
Show all changes Ignore whitespace when comparing lines Ignore changes in amount of whitespace Ignore changes in whitespace at EOL
Unified View
Diff Options
Show Stats Download Patch File Download Diff File
  1. 30
      src/components/formTable/formItemGroup.vue
  2. 847
      src/components/formTable/index.vue

30
src/components/formTable/formItemGroup.vue
View File

@ -94,11 +94,38 @@ const clickBtn = (control: any) => {
injectBtnEvent && injectBtnEvent(control) injectBtnEvent && injectBtnEvent(control)
} }
} }
// 根据表单设置不显示指定字段
const linksIf = (obj: FormList) => {
const { type } = formProps.value;
const { config: { disabledAdd, disabledEdit, disabledDetail } = {} } = obj;
if (type === 1) {
if (disabledAdd) {
// 编辑页 || 新增页
return false; // 不显示
}
} else if (type === 2) {
// 编辑
if (disabledEdit) {
return false;
}
} else if (type === 4 || type === 3) {
// 查看
if (disabledDetail) {
return false;
}
}
// 如果当前字段的name值存在于表单数据的vIf中，则不显示
const vIf: string | string[] = formProps.value.hideField;
if (vIf?.length > 0 && obj.name) {
return vIf.indexOf(obj.name) === -1; // 存在时返回false隐藏
}
return true;
};
</script> </script>
<template> <template>
<div v-for="(element,index) in dataList" :key="index" :style="getFormItemDivStyle(element)"> <div v-for="(element,index) in dataList" :key="index" :style="getFormItemDivStyle(element)">
<div v-if="linksIf(element)">
<template v-if="element.type === 'tabs'"> <template v-if="element.type === 'tabs'">
<!--选项卡--> <!--选项卡-->
<el-tabs <el-tabs
@ -233,6 +260,7 @@ const clickBtn = (control: any) => {
</template> </template>
<FormItem v-else :data="element" /> <FormItem v-else :data="element" />
</div> </div>
</div>
</template> </template>
<style lang='scss' scoped> <style lang='scss' scoped>

847
src/components/formTable/index.vue
View File

@ -7,7 +7,7 @@
import { useRoute, useRouter, onBeforeRouteLeave } from 'vue-router' import { useRoute, useRouter, onBeforeRouteLeave } from 'vue-router'
import { FormData } from '@/api/lowCode/form/type'; import { FormData } from '@/api/lowCode/form/type';
import { jsonParseStringify } from '@/utils/lowCode/item/index' import { jsonParseStringify } from '@/utils/lowCode/item/index'
import request from '@/utils/axios/index'
import { appendOrRemoveStyle, constControlChange, constFormBtnEvent, constFormProps, constGetControlByName, constSetFormOptions } from '@/api/lowCode/utils' import { appendOrRemoveStyle, constControlChange, constFormBtnEvent, constFormProps, constGetControlByName, constSetFormOptions } from '@/api/lowCode/utils'
import { currencyFormApiSubmit, createAppTask, saveDraftAgain } from '@/api/lowCode/taskapi/management' import { currencyFormApiSubmit, createAppTask, saveDraftAgain } from '@/api/lowCode/taskapi/management'
@ -152,6 +152,7 @@ const forEachGetFormModel = (list: FormList[], obj: any) => {
} }
} }
}) })
showOrHide("onMounted");
} }
const dictForm = computed(() => { const dictForm = computed(() => {
const storage = window.localStorage.getItem('akFormDict') const storage = window.localStorage.getItem('akFormDict')
@ -322,6 +323,7 @@ const setValue = (obj: { [key: string]: any }, filter?: boolean) => {
}); });
} }
showOrHide(data);
if (typeof props.changeKeyVal === "function") { if (typeof props.changeKeyVal === "function") {
props.changeKeyVal(key, value, type, attribute); props.changeKeyVal(key, value, type, attribute);
@ -1018,6 +1020,835 @@ const submitEditButton = (params = {}) => {
}) })
} }
//liwenxuan 241209 关联选项设置 显示隐藏效果 start
let mustBeHidden: any = [];
let newModelKeyArr: string[] = [];
function showOrHide(data: any) {
//console.log(data)
/*
企管部有当前用户,
当前用户是什么权限角色.
某表单某字段值大于等于小于不等于某个值
所需接口
接口1:当前用户是不是指定的权限角色
接口2:当前用户是否在指定的机构下或机构的祖先机构下
接口3:本表单(关联关联表单的表单)的某字段的当前值大于等于小于不等于指定的值???也许不需要接口呢?
*/
//关联表单隐藏条件判定 start
for (let i = 0; i < props.formData.list.length; i++) {
if (props.formData.list[i].type == "associatedForms" && formProps.value.type != 5) {
//console.log(props.formData.list[i].name)
let asfHideCondition = props.formData.list[i].control.hideGongShi.mathsFormula;
const leftOperatorsAndRight = splitString(asfHideCondition);
if (leftOperatorsAndRight) {
let leftArr = leftOperatorsAndRight.left.split(":");
//console.log(leftArr)
if (data == "onMounted" || (leftArr[0] == "formField" && leftArr.length == 3)) {
if (data == "onMounted" || (data != "kong" && data.name == leftArr[2])) {
//关联表单隐藏相关的值发生了变化
if (leftOperatorsAndRight.operator == "包含") {
if (leftOperatorsAndRight.right == "当前用户") {
if (leftOperatorsAndRight.left.startsWith("orgOrPerson")) {
//接口2
queryIfOrgOrPerson(leftOperatorsAndRight).then(({ data }) => {
if (data == true) {
props.formData.config.hideField = addStringIfNotExists(
props.formData.config.hideField,
props.formData.list[i].name
);
mustBeHidden.push(props.formData.list[i].name);
}
});
} else if (leftOperatorsAndRight.left.startsWith("roleid")) {
//接口1
queryHideRoleCondition(leftOperatorsAndRight).then(({ data }) => {
if (data == true) {
//alert(data)
props.formData.config.hideField = addStringIfNotExists(
props.formData.config.hideField,
props.formData.list[i].name
);
mustBeHidden.push(props.formData.list[i].name);
}
});
}
}
} else if (leftOperatorsAndRight.operator == "不包含") {
if (leftOperatorsAndRight.right == "当前用户") {
if (leftOperatorsAndRight.left.startsWith("orgOrPerson")) {
//接口2
queryIfOrgOrPerson(leftOperatorsAndRight).then(({ data }) => {
if (data == false) {
props.formData.config.hideField = addStringIfNotExists(
props.formData.config.hideField,
props.formData.list[i].name
);
mustBeHidden.push(props.formData.list[i].name);
}
});
} else if (leftOperatorsAndRight.left.startsWith("roleid")) {
//接口1
queryHideRoleCondition(leftOperatorsAndRight).then(({ data }) => {
if (data == false) {
//alert(data)
props.formData.config.hideField = addStringIfNotExists(
props.formData.config.hideField,
props.formData.list[i].name
);
mustBeHidden.push(props.formData.list[i].name);
}
});
}
}
} else {
//console.log(leftOperatorsAndRight)
if (leftOperatorsAndRight.right == "当前用户") {
if (leftOperatorsAndRight.operator == "==") {
//接口2
queryIfOrgOrPerson(leftOperatorsAndRight).then(({ data }) => {
if (data == true) {
props.formData.config.hideField = addStringIfNotExists(
props.formData.config.hideField,
props.formData.list[i].name
);
mustBeHidden.push(props.formData.list[i].name);
}
});
} else if (leftOperatorsAndRight.operator == "!=") {
//接口2
queryIfOrgOrPerson(leftOperatorsAndRight).then(({ data }) => {
if (data == true) {
props.formData.config.hideField = addStringIfNotExists(
props.formData.config.hideField,
props.formData.list[i].name
);
mustBeHidden.push(props.formData.list[i].name);
}
});
}
} else {
//接口3
//console.log(leftOperatorsAndRight)
//console.log(data)
if (data.name == leftArr[2]) {
console.log("ghasdhasdfhhsadhasd");
console.log(props.formData.list[i].name);
nextTick(() => {
console.log(model.value[leftArr[2]]);
if (leftOperatorsAndRight.operator == "==") {
if (model.value[leftArr[2]] == leftOperatorsAndRight.right) {
props.formData.config.hideField = addStringIfNotExists(
props.formData.config.hideField,
props.formData.list[i].name
);
} else {
props.formData.config.hideField = removeStringIfExists(
props.formData.config.hideField,
props.formData.list[i].name
);
}
} else if (leftOperatorsAndRight.operator == "!=") {
if (model.value[leftArr[2]] != leftOperatorsAndRight.right) {
props.formData.config.hideField = addStringIfNotExists(
props.formData.config.hideField,
props.formData.list[i].name
);
} else {
props.formData.config.hideField = removeStringIfExists(
props.formData.config.hideField,
props.formData.list[i].name
);
}
} else if (leftOperatorsAndRight.operator == ">=") {
if (model.value[leftArr[2]] >= leftOperatorsAndRight.right) {
props.formData.config.hideField = addStringIfNotExists(
props.formData.config.hideField,
props.formData.list[i].name
);
} else {
props.formData.config.hideField = removeStringIfExists(
props.formData.config.hideField,
props.formData.list[i].name
);
}
} else if (leftOperatorsAndRight.operator == ">") {
if (model.value[leftArr[2]] > leftOperatorsAndRight.right) {
props.formData.config.hideField = addStringIfNotExists(
props.formData.config.hideField,
props.formData.list[i].name
);
} else {
props.formData.config.hideField = removeStringIfExists(
props.formData.config.hideField,
props.formData.list[i].name
);
}
} else if (leftOperatorsAndRight.operator == "<") {
if (model.value[leftArr[2]] < leftOperatorsAndRight.right) {
props.formData.config.hideField = addStringIfNotExists(
props.formData.config.hideField,
props.formData.list[i].name
);
} else {
props.formData.config.hideField = removeStringIfExists(
props.formData.config.hideField,
props.formData.list[i].name
);
}
} else if (leftOperatorsAndRight.operator == "<=") {
if (model.value[leftArr[2]] <= leftOperatorsAndRight.right) {
props.formData.config.hideField = addStringIfNotExists(
props.formData.config.hideField,
props.formData.list[i].name
);
} else {
props.formData.config.hideField = removeStringIfExists(
props.formData.config.hideField,
props.formData.list[i].name
);
}
}
});
}
}
}
}
}
}
}
}
//关联表单隐藏条件判定 end
//liwenxuan 关联选项设置效果实现 start
/* console.log("监听表单-1-constControlChange-->",props.formData)
console.log("监听表单-2-constControlChange-->",key)
console.log("监听表单-3-constControlChange-->", value)
console.log("监听表单-4-constControlChange-->",data)
console.log("监听表单-5-constControlChange-->",type)
console.log("监听表单-6-constControlChange-->",attribute) */
//得到当前表单各选项的值
//props.formData.config.hideField.push("nin2yuan4yi4wei4wo3menda3fen1ma101939")
//得到所有配置对象，包括radio,checkbox,select,switch
const radioSelectShowConfigArr = [];
const checkboxShowConfigArr = [];
const switchShowConfigArr = [];
//以showFields的处理过冒号的每个元素为key,其对应的optionValue为value,新建一个数组radioselectArr2。----用于获取所有出现在配置中的字段。
const radioSelectArr2: any[] = [];
//20240815 关联选项设置的隐藏效果嵌套在内时不生效的问题修复 liwenxuan start
//console.log(props.formData.list) newModelKeyArr
for (let i = 0; i < props.formData.list.length; i++) {
if (
props.formData.list[i].type == "radio" ||
props.formData.list[i].type == "select" ||
props.formData.list[i].type == "checkbox" ||
props.formData.list[i].type == "switch"
) {
props.formData.config.hideField = [];
if (
props.formData.list[i].type == "radio" ||
props.formData.list[i].type == "select"
) {
radioSelectShowConfigArr.push(props.formData.list[i].control.glxxsz);
} else if (props.formData.list[i].type == "checkbox") {
checkboxShowConfigArr.push(props.formData.list[i].control.glxxszForCheckBox);
} else if (props.formData.list[i].type == "switch") {
switchShowConfigArr.push(props.formData.list[i].control.glxxszSwitch);
}
} else if (
props.formData.list[i].type == "card" ||
props.formData.list[i].type == "flex" ||
props.formData.list[i].type == "div" ||
props.formData.list[i].type == "table"
) {
props.formData.config.hideField = [];
let a = JSON.parse(JSON.stringify(props.formData.list[i].list));
for (let w = 0; w < a.length; w++) {
if (a[w].type == "radio" || a[w].type == "select") {
//console.log(a[w])
radioSelectShowConfigArr.push(a[w].control.glxxsz);
} else if (a[w].type == "checkbox") {
checkboxShowConfigArr.push(a[w].control.glxxszForCheckBox);
} else if (a[w].type == "switch") {
switchShowConfigArr.push(a[w].control.glxxszSwitch);
}
newModelKeyArr.push(a[w].name);
}
} else if (props.formData.list[i].type == "grid") {
props.formData.config.hideField = [];
let columns = JSON.parse(JSON.stringify(props.formData.list[i].columns));
if (columns.length > 0) {
for (let z = 0; z < columns.length; z++) {
for (let x = 0; x < columns[z].list.length; x++) {
let a = JSON.parse(JSON.stringify(columns[z].list[x]));
if (a.type == "radio" || a.type == "select") {
radioSelectShowConfigArr.push(a.control.glxxsz);
} else if (a.type == "checkbox") {
checkboxShowConfigArr.push(a.control.glxxszForCheckBox);
} else if (a.type == "switch") {
switchShowConfigArr.push(a.control.glxxszSwitch);
}
newModelKeyArr.push(a.name);
}
}
}
} else if (props.formData.list[i].type == "tabs") {
//tabs标签页有可能再嵌套一层flex或者table
props.formData.config.hideField = [];
let columns = JSON.parse(JSON.stringify(props.formData.list[i].columns));
if (columns.length > 0) {
for (let z = 0; z < columns.length; z++) {
for (let x = 0; x < columns[z].list.length; x++) {
let a = JSON.parse(JSON.stringify(columns[z].list[x]));
if (a.type == "radio" || a.type == "select") {
radioSelectShowConfigArr.push(a.control.glxxsz);
} else if (a.type == "checkbox") {
checkboxShowConfigArr.push(a.control.glxxszForCheckBox);
} else if (a.type == "switch") {
switchShowConfigArr.push(a.control.glxxszSwitch);
} else if (a.type == "flex" || a.type == "table") {
if (a.list.length > 0) {
for (let m = 0; m < a.list.length; m++) {
let q = JSON.parse(JSON.stringify(a.list[m]));
//console.log(q)
if (q.type == "radio" || q.type == "select") {
radioSelectShowConfigArr.push(q.control.glxxsz);
} else if (q.type == "checkbox") {
checkboxShowConfigArr.push(q.control.glxxszForCheckBox);
} else if (q.type == "switch") {
switchShowConfigArr.push(q.control.glxxszSwitch);
}
newModelKeyArr.push(q.name);
}
}
}
newModelKeyArr.push(a.name);
}
}
}
}
newModelKeyArr.push(props.formData.list[i].name);
}
newModelKeyArr = Array.from(new Set(newModelKeyArr));
//20240815 关联选项设置的隐藏效果嵌套在内时不生效的问题修复 liwenxuan end
//console.log(radioSelectShowConfigArr)
//数组深拷贝
const radioSelectShowConfigArr2 = JSON.parse(JSON.stringify(radioSelectShowConfigArr));
const checkboxShowConfigArr2 = JSON.parse(JSON.stringify(checkboxShowConfigArr));
const switchShowConfigArr2 = JSON.parse(JSON.stringify(switchShowConfigArr));
/* console.log(radioSelectShowConfigArr2)
console.log(checkboxShowConfigArr2) */
//console.log("fodijafkjlsdhoidnfoidshojhfeknsidjfoiewhofnosdifhjeonoidufeinkdsaofhe")
//console.log(switchShowConfigArr2)
if (radioSelectShowConfigArr2.length > 0) {
for (let i = 0; i < radioSelectShowConfigArr2.length; i++) {
if (radioSelectShowConfigArr2[i].length > 0) {
for (let j = 0; j < radioSelectShowConfigArr2[i].length; j++) {
//数组深拷贝
const jArr = JSON.parse(JSON.stringify(radioSelectShowConfigArr2[i][j]));
const optionValueJArr = jArr.optionValue;
if (jArr.showFields != undefined && jArr.showFields.length > 0) {
for (let n = 0; n < jArr.showFields.length; n++) {
let fieldKeyArr = jArr.showFields[n].split(":");
let fieldKeyStr = fieldKeyArr[fieldKeyArr.length - 1];
radioSelectArr2.push({
//conditionFieldKey:jArr.conditionField,
//conditionFieldValue:optionValueJArr,
toShowFieldKey: fieldKeyStr,
});
}
}
}
}
}
}
//将出现在多选配置中的字段放入radioSelectArr2,radioSelectArr2是未去重的所有可能被隐藏的字段
if (checkboxShowConfigArr2.length > 0) {
for (let i = 0; i < checkboxShowConfigArr2.length; i++) {
//console.log(i)
if (checkboxShowConfigArr2[i].length > 0) {
for (let j = 0; j < checkboxShowConfigArr2[i].length; j++) {
//console.log(j)
//console.log(checkboxShowConfigArr2[i][j].showFields)
if (checkboxShowConfigArr2[i][j].showFields.length > 0) {
for (let n = 0; n < checkboxShowConfigArr2[i][j].showFields.length; n++) {
let fieldKeyArr = checkboxShowConfigArr2[i][j].showFields[n].split(":");
let fieldKeyStr = fieldKeyArr[fieldKeyArr.length - 1];
//console.log(fieldKeyStr)
radioSelectArr2.push({
toShowFieldKey: fieldKeyStr,
});
}
}
}
}
}
}
//将出现在开关配置中的字段放入radioSelectArr2,radioSelectArr2是未去重的所有可能被隐藏的字段
if (switchShowConfigArr2.length > 0) {
for (let i = 0; i < switchShowConfigArr2.length; i++) {
if (switchShowConfigArr2[i].length > 0) {
for (let j = 0; j < switchShowConfigArr2[i].length; j++) {
if (switchShowConfigArr2[i][j].showFields.length > 0) {
for (let n = 0; n < switchShowConfigArr2[i][j].showFields.length; n++) {
//console.log("99999999999999999999------"+switchShowConfigArr2[i][j].showFields[n])
let fieldKeyArr = switchShowConfigArr2[i][j].showFields[n].split(":");
let fieldKeyStr = fieldKeyArr[fieldKeyArr.length - 1];
//console.log(fieldKeyStr)
radioSelectArr2.push({
toShowFieldKey: fieldKeyStr,
});
}
}
}
}
}
}
//console.log("radioSelectArr2radioSelectArr2radioSelectArr2radioSelectArr2radioSelectArr2=======")
//console.log(radioSelectArr2)
//以showFields的处理过冒号的每个元素为key,其对应的optionValue为value,新建一个数组radioselectArr3 ---用于组装完整显示隐藏条件、
const radioSelectArr3: any[] = [];
if (radioSelectShowConfigArr2.length > 0) {
for (let i = 0; i < radioSelectShowConfigArr2.length; i++) {
if (radioSelectShowConfigArr2[i].length > 0) {
for (let j = 0; j < radioSelectShowConfigArr2[i].length; j++) {
//数组深拷贝
const jArr = JSON.parse(JSON.stringify(radioSelectShowConfigArr2[i][j]));
const optionValueJArr = jArr.optionValue;
if (jArr.showFields != undefined && jArr.showFields.length > 0) {
if (jArr.showFields.length > 1) {
let arr1 = [];
for (let n = 0; n < jArr.showFields.length; n++) {
let fieldKeyArr = jArr.showFields[n].split(":");
let fieldKeyStr = fieldKeyArr[fieldKeyArr.length - 1];
arr1.push(fieldKeyStr);
}
radioSelectArr3.push({
conditionFieldKey: jArr.conditionField,
conditionFieldValue: optionValueJArr,
toShowFieldKey: arr1,
});
} else {
//等于1
for (let n = 0; n < jArr.showFields.length; n++) {
let fieldKeyArr = jArr.showFields[n].split(":");
let fieldKeyStr = fieldKeyArr[fieldKeyArr.length - 1];
radioSelectArr3.push({
conditionFieldKey: jArr.conditionField,
conditionFieldValue: optionValueJArr,
toShowFieldKey: [fieldKeyStr],
});
}
}
}
}
}
}
}
//console.log(radioSelectArr3)
//将多选配置也放入radioSelectArr3
if (checkboxShowConfigArr2.length > 0) {
for (let i = 0; i < checkboxShowConfigArr2.length; i++) {
if (checkboxShowConfigArr2[i].length > 0) {
for (let j = 0; j < checkboxShowConfigArr2[i].length; j++) {
//数组深拷贝
const jArr = JSON.parse(JSON.stringify(checkboxShowConfigArr2[i][j]));
const optionValueJArr = jArr.selectedOptions;
if (jArr.showFields != undefined && jArr.showFields.length > 0) {
if (jArr.showFields.length > 1) {
let arr1 = [];
for (let n = 0; n < jArr.showFields.length; n++) {
let fieldKeyArr = jArr.showFields[n].split(":");
let fieldKeyStr = fieldKeyArr[fieldKeyArr.length - 1];
arr1.push(fieldKeyStr);
}
radioSelectArr3.push({
conditionFieldKey: jArr.conditionField,
conditionFieldValue: optionValueJArr,
toShowFieldKey: arr1,
});
} else {
//等于1
for (let n = 0; n < jArr.showFields.length; n++) {
let fieldKeyArr = jArr.showFields[n].split(":");
let fieldKeyStr = fieldKeyArr[fieldKeyArr.length - 1];
radioSelectArr3.push({
conditionFieldKey: jArr.conditionField,
conditionFieldValue: optionValueJArr,
toShowFieldKey: [fieldKeyStr],
});
}
}
}
}
}
}
}
//将开关配置也放入radioSelectArr3
if (switchShowConfigArr2.length > 0) {
for (let i = 0; i < switchShowConfigArr2.length; i++) {
if (switchShowConfigArr2[i].length > 0) {
for (let j = 0; j < switchShowConfigArr2[i].length; j++) {
//数组深拷贝
const jArr = JSON.parse(JSON.stringify(switchShowConfigArr2[i][j]));
//console.log("111111111111111111111-----------"+JSON.stringify(switchShowConfigArr2[i][j]))
if (jArr.showFields != undefined && jArr.showFields.length > 0) {
const optionValueJArr =
typeof jArr.openValue == "undefined" ? jArr.offValue : jArr.openValue;
let arr1 = [];
for (let n = 0; n < jArr.showFields.length; n++) {
let fieldKeyArr = jArr.showFields[n].split(":");
let fieldKeyStr = fieldKeyArr[fieldKeyArr.length - 1];
//console.log(fieldKeyStr)
arr1.push(fieldKeyStr);
}
radioSelectArr3.push({
conditionFieldKey: jArr.conditionField,
conditionFieldValue: optionValueJArr,
toShowFieldKey: arr1,
});
}
}
}
}
}
//console.log(radioSelectArr3)
//暂时使用的隐藏数组，数据敲定后赋给props.formData.config.hideField
let hideFieldArr: any[] = [];
//但凡配置条件的字段先放入隐藏数组中
for (let i = 0; i < radioSelectArr2.length; i++) {
hideFieldArr.push(radioSelectArr2[i].toShowFieldKey);
}
hideFieldArr = Array.from(new Set(hideFieldArr));
const defaultHideFields: any[] = JSON.parse(JSON.stringify(hideFieldArr));
for (let i = 0; i < defaultHideFields.length; i++) {
hideFieldArr = recursionToGetFinallyHideFields(
hideFieldArr,
radioSelectArr3,
defaultHideFields
);
}
hideFieldArr = recursionToGetFinallyHideFields(
hideFieldArr,
radioSelectArr3,
defaultHideFields
);
props.formData.config.hideField?.push(...mustBeHidden);
//console.log(props.formData.config.hideField)
//props.formData.config?.hideField?.push("nin2yuan4yi4wei4wo3menda3fen1ma101939")
//console.log("监听表单--constControlChange-->",key, value, data, tProp,type,attribute)//liwenxuan
}
interface hideFieldConditionArritem {
toShow: string;
conditions: any[];
}
const recursionToGetFinallyHideFields = (
hideFieldArr: any[],
radioSelectArr3: string | any[],
defaultHideFields: any[]
) => {
nextTick(() => {
//console.log(model.value)
/* console.log("以showFields的处理过冒号的每个元素为key,其对应的optionValue为value,新建的数组radioselectArr3 --- 内容为完整显示隐藏条件")
console.log(radioSelectArr3)
console.log("当前表单的值-------------------")
console.log(model.value)
console.log("默认隐藏的字段-----------------")
console.log(defaultHideFields) */
let modelKeyArr = []; //所有字段
for (let i = 0; i < props.formData.list.length; i++) {
modelKeyArr.push(props.formData.list[i].name + "");
}
modelKeyArr = newModelKeyArr;
//console.log(modelKeyArr)
/* console.log("所有字段modelKeyArr^^^^^^^^^^^^^^^^^^^^^^^^^^^^^^^^^^^^^^^^^^^^^^^^^^^^^^^^^^^^^^")
console.log(modelKeyArr) */
//console.log("当前表单的值-------------------")
//console.log(model.value)
//当前处于显示状态的默认隐藏的字段
let nowShowingDefaultHideFieldArr = defaultHideFields.filter(
(a) => !hideFieldArr.includes(a)
);
//当前所有处于显示状态的字段
let nowShowingFieldArr = modelKeyArr.filter((a) => !hideFieldArr.includes(a));
//以被默认隐藏的每个字段为key,显示该字段的所有条件的数组作为value,来作为该数组的每一项。
const hideFieldConditionArr: hideFieldConditionArritem[] = [];
//保存应多选条件造成的应隐藏的字段
let hideFieldsFromCheckbox: string[] = [];
for (let i = 0; i < hideFieldArr.length; i++) {
hideFieldConditionArr.push({
toShow: hideFieldArr[i],
conditions: [],
});
}
//console.log(hideFieldConditionArr)
//遍历所有配置条件数组radioSelectArr3，当radioSelectArr3 [ i ] . toshowFieldKey 【i】==hideFieldArr【i】时
for (let i = 0; i < radioSelectArr3.length; i++) {
for (let j = 0; j < radioSelectArr3[i].toShowFieldKey.length; j++) {
for (let n = 0; n < hideFieldConditionArr.length; n++) {
/* console.log(i)
console.log(j)
console.log(n) */
if (radioSelectArr3[i].toShowFieldKey[j] == hideFieldConditionArr[n].toShow) {
if (Array.isArray(radioSelectArr3[i].conditionFieldValue)) {
let valStr = "";
for (let x = 0; x < radioSelectArr3[i].conditionFieldValue.length; x++) {
valStr = valStr + radioSelectArr3[i].conditionFieldValue[x] + ",";
}
hideFieldConditionArr[n].conditions.push({
conditionFrom: "radioOrSelect", //本条件来自于单选或者下拉
condition: [
{
//条件详细信息//当表单字段conditionField的值为conditionFieldValue时,显示hideFieldConditionArr[n]
conditionField: radioSelectArr3[i].conditionFieldKey,
conditionFieldValue: valStr,
},
],
});
} else {
hideFieldConditionArr[n].conditions.push({
conditionFrom: "radioOrSelect", //本条件来自于单选或者下拉
condition: [
{
//条件详细信息//当表单字段conditionField的值为conditionFieldValue时,显示hideFieldConditionArr[n]
conditionField: radioSelectArr3[i].conditionFieldKey,
conditionFieldValue: radioSelectArr3[i].conditionFieldValue, //
},
],
});
}
}
}
}
}
//console.log(hideFieldConditionArr);
//要显示的和其满足显示条件的个数.
//let showfieldsCountX = [];
for (let i = 0; i < hideFieldConditionArr.length; i++) {
let x = 0; //满足显示条件的次数
let toshow = hideFieldConditionArr[i].toShow;
let conditions = hideFieldConditionArr[i].conditions;
//console.log(conditions)
for (let j = 0; j < conditions.length; j++) {
let conditionField = conditions[j].condition[0].conditionField;
let conditionFieldValue = conditions[j].condition[0].conditionFieldValue;
//console.log(conditionField)
if (conditionFieldValue.includes(",")) {
//来自多选
let conditionFieldValueArr = conditionFieldValue.split(",");
conditionFieldValueArr = conditionFieldValueArr.slice(0, -1);
/* console.log(conditionFieldValueArr)
console.log(conditionFieldValue) */
for (let n = 0; n < modelKeyArr.length; n++) {
if (modelKeyArr[n] == conditionField) {
//let count_1 = 0;
let trueValue = model.value[modelKeyArr[n]];
if (trueValue.length > 0 && arrayEqual(trueValue, conditionFieldValueArr)) {
//此时满足了条件,但是必须看一下conditionField有没有被隐藏.如果被隐藏了,则x不能增加.
//alert("多选条件成功触发")
/* console.log(conditionField)
console.log(toshow) */
let flag = false; //其依赖的选项的父字段是否被隐藏.默认没被隐藏,
//如果此时的conditionField有可能被隐藏且已被隐藏,x不能++
/* for(let a = 0;a<hideFieldConditionArr.length;a++){
if(hideFieldConditionArr[a].toShow==conditionField){//当conditions.length>1说明时多选,=1说明是单选.
for(let b = 0;b<hideFieldConditionArr[a].conditions.length;b++){
for(let c = 0;c<hideFieldConditionArr[a].conditions[b].condition.length;c++){
if(hideFieldConditionArr[a].conditions[b].condition[c]==conditionField){
//暂时写到这里,先去组装多选条件数组.
//console.log(1)
}
}
}
}
} */
if (flag == false) {
x++;
hideFieldsFromCheckbox.push(toshow);
//console.log(hideFieldArr)
/* for(let i = 0;i<hideFieldsFromCheckbox.length;i++){
hideFieldArr = hideFieldArr.filter((item: string) => item!=hideFieldsFromCheckbox[i])
//emits('refresh')
} */
}
}
}
}
} else {
//来自单选下拉
//console.log(modelKeyArr)
for (let n = 0; n < modelKeyArr.length; n++) {
if (modelKeyArr[n] == conditionField) {
//let count_1 = 0;
let trueValue = model.value[modelKeyArr[n]];
//console.log(modelKeyArr[n])
/* console.log("conditionField====="+conditionField)
console.log("trueValue====="+trueValue)
console.log("conditionFieldValue-----"+conditionFieldValue) */
if (trueValue == conditionFieldValue) {
//此时满足了条件,但是必须看一下conditionField有没有被隐藏.如果被隐藏了,则x不能增加.
let flag = false; //其依赖的选项的父字段是否被隐藏.默认没被隐藏,
//如果此时的conditionField有可能被隐藏且已被隐藏,x不能++
/* for(let a = 0;a<hideFieldConditionArr.length;a++){
if(hideFieldConditionArr[a].toShow==conditionField){//当conditions.length>1说明时多选,=1说明是单选.
for(let b = 0;b<hideFieldConditionArr[a].conditions.length;b++){
for(let c = 0;c<hideFieldConditionArr[a].conditions[b].condition.length;c++){
if(hideFieldConditionArr[a].conditions[b].condition[c]==conditionField){
//暂时写到这里,先去组装多选条件数组.
console.log(1)
}
}
}
}
} */
if (flag == false) {
x++;
}
}
}
}
}
}
//console.log(x,hideFieldArr,toshow)
if (x > 0) {
hideFieldArr = hideFieldArr.filter((item: string) => item != toshow);
}
//console.log(x,hideFieldArr)
}
//将隐藏的字段值重置
for (let i = 0; i < hideFieldArr.length; i++) {
//console.log(i+"dsfafdasdfasfsda===="+hideFieldArr[i]+"=====jiuopfdsahokjuhuiofadshuiofadsjbknfdjisahuifhjken wij================"+model.value[hideFieldArr[i]])
if (
typeof model.value[hideFieldArr[i]] === "string" ||
typeof model.value[hideFieldArr[i]] === "number"
) {
model.value[hideFieldArr[i]] = "";
} else if (model.value[hideFieldArr[i]] instanceof Array) {
model.value[hideFieldArr[i]] = [];
} else if (typeof model.value[hideFieldArr[i]] == "boolean") {
model.value[hideFieldArr[i]] = false;
}
}
//默认隐藏的字段中目前被显示出来的
nowShowingDefaultHideFieldArr = defaultHideFields.filter(
(a) => !hideFieldArr.includes(a)
);
/* console.log("(((((((((((((((((((((((((((((((((((((((((((((((((((((((((((((((((())))))))))))))))))))))))))))))))))))))))))))))))))))))))))))))))))")
console.log(nowShowingDefaultHideFieldArr) */
/* for(let i = 0;i< nowShowingDefaultHideFieldArr.length; i++){
//当被显示出来的字段涉及到的conditionfield已经被隐藏了时,其x应-1,如果x-1后造成该field被隐藏,应递归重新敲定hideFieldArr
if()
} */
//console.log("条件筛选过后最终要隐藏的字段-----"+hideFieldArr)
//编辑表单页不隐藏任何字段。
if (formProps.value.type != 5) {
//console.log(hideFieldArr)
props.formData.config.hideField?.push(...hideFieldArr); //实际造成隐藏效果
}
});
return hideFieldArr;
};
function addStringIfNotExists(arr: string[], str: string) {
if (!arr.includes(str)) {
arr.push(str);
}
return arr;
}
function removeStringIfExists(arr: string[], str: string) {
let newArr = [];
for (let item of arr) {
if (item !== str) {
newArr.push(item);
}
}
return newArr;
}
function queryIfOrgOrPerson(obj: { left: string; operator: string; right: string }) {
return request({
url: "/javasys/lowCode/AssociatedForms/queryIfOrgOrPerson",
method: "post",
data: obj,
});
}
function queryHideRoleCondition(obj: { left: string; operator: string; right: string }) {
return request({
url: "/javasys/lowCode/AssociatedForms/queryHideRoleCondition",
method: "post",
data: obj,
});
}
function splitString(str: string) {
const operators = ["==", ">", ">=", "<", "<=", "!=", "不包含", "包含"];
for (let operator of operators) {
if (str.includes(operator)) {
let index = str.indexOf(operator);
let left = str.slice(0, index).trim();
let right = str.slice(index + operator.length).trim();
return { left, operator, right };
}
}
}
function arrayEqual(a: string[], b: any[]) {
//alert("开始比较")
//先将数组排序
let a_ = JSON.parse(JSON.stringify(a));
for (let i = 0; i < a_.length; i++) {
a_[i] = a_[i] + "";
}
//console.log(a_)
//console.log(b)
a_ = a_.sort();
b = b.sort();
//判断数组长度是否相等，若不相等返回false
if (a_.length != b.length) return false;
//逐个比较数组元素
for (var i = 0; i < a_.length; ++i) {
if (a_[i] !== b[i]) return false;
}
return true;
}
//liwenxuan 241209 关联选项设置 显示隐藏效果 end
defineExpose({ defineExpose({
@ -1039,22 +1870,14 @@ defineExpose({
<template> <template>
<div v-loading="loading"> <div v-loading="loading">
<el-form <el-form v-bind="formData.form" ref="ruleForm" :model="model as any" :disabled="type === 3" class="add-form"
v-bind="formData.form"
ref="ruleForm"
:model="model as any"
:disabled="type === 3"
class="add-form"
:class="{ :class="{
'design-form': type === 5, 'design-form': type === 5,
'detail-form': type === 3 'detail-form': type === 3
}" }">
>
<FormItemGroup :tableinfo="formData.form" :data="formData.list" :alldata="formData" /> <FormItemGroup :tableinfo="formData.form" :data="formData.list" :alldata="formData" />
<slot></slot> <slot></slot>
</el-form> </el-form>
</div> </div>
</template> </template>
<style lang='scss' scoped> <style lang='scss' scoped></style>
</style>
Write Preview
Loading…
Cancel
Save