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

多选效果实现v0.3

lwx_v8
liwenxuan 2 years ago
parent
5d6ead2c20
commit
2e79ce20ca
2 changed files with 191 additions and 39 deletions
Whitespace
Show all changes Ignore whitespace when comparing lines Ignore changes in amount of whitespace Ignore changes in whitespace at EOL
Split View
Diff Options
Show Stats Download Patch File Download Diff File
  1. 161
      src/components/DesignForm/public/form/form.vue
  2. 7
      src/views/sysworkflow/lowcodepage/pageDesignes.vue

161
src/components/DesignForm/public/form/form.vue
View File

@ -7,6 +7,7 @@
import '@/assets/scss/element-var.scss'
import '@/assets/scss/index.scss'
import FormGroup from './formGroup.vue'
import { FormData,FormList,FormDataStyle } from '@/api/DesignForm/types'
import { getRequest } from '@/api/DesignForm'
import { useRoute, useRouter } from 'vue-router'
@ -75,12 +76,14 @@ const props = withDefaults(
type:Boolean,
default:true
},
key:1
}
)
const emits = defineEmits<{
(e: 'btnClick', type: string): void
(e: 'change', val: any): void // 表单组件值发生变化时
(e: 'update:issave', type: boolean): void
(e: 'refresh'): void
}>()
const route = useRoute()
const router = useRouter()
@ -170,6 +173,30 @@ const forEachGetFormModel = (list: FormList[], obj: any) => {
})
}
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;
}
interface hideFieldConditionArritem {
toShow:string
conditions: any[]
@ -180,6 +207,9 @@ const recursionToGetFinallyHideFields = (hideFieldArr: any[],radioSelectArr3: st
//以被默认隐藏的每个字段为key,显示该字段的所有条件的数组作为value,来作为该数组的每一项。
const hideFieldConditionArr:hideFieldConditionArritem[] = []
//保存应多选条件造成的应隐藏的字段
let hideFieldsFromCheckbox: string[] = []
for(let i = 0;i < hideFieldArr.length;i++){
hideFieldConditionArr.push({
@ -197,6 +227,22 @@ const recursionToGetFinallyHideFields = (hideFieldArr: any[],radioSelectArr3: st
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]
@ -206,6 +252,7 @@ const recursionToGetFinallyHideFields = (hideFieldArr: any[],radioSelectArr3: st
})
}
}
}
}
}
@ -216,23 +263,34 @@ const recursionToGetFinallyHideFields = (hideFieldArr: any[],radioSelectArr3: st
let x = 0//满足显示条件的次数
let toshow = hideFieldConditionArr[i].toShow
let conditions = hideFieldConditionArr[i].conditions
//console.log(conditions)
for(let j = 0;j<conditions.length;j++){
if(conditions[j].conditionFrom == "radioOrSelect"){//本条件来自于单选或者下拉,其只有一项
let conditionField = conditions[j].condition[0].conditionField
let conditionFieldValue = conditions[j].condition[0].conditionFieldValue
console.log(conditionField)
if(conditionFieldValue.includes(",")){//来自多选
//alert(conditionFieldValue)
let conditionFieldValueArr = conditionFieldValue.split(",")
conditionFieldValueArr = conditionFieldValueArr.slice(0, -1);
console.log(conditionFieldValueArr)
console.log(conditionFieldValue)
nextTick(()=>{
for(let n = 0; n< modelKeyArr.length;n++){
if(modelKeyArr[n]==conditionField){
let count_1 = 0;
let trueValue = model.value[modelKeyArr[n]]
//alert(trueValue)
console.log(trueValue.length)
//console.log(modelKeyArr[n])
//console.log(trueValue)
if(trueValue==conditionFieldValue){
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++){
@ -247,26 +305,71 @@ const recursionToGetFinallyHideFields = (hideFieldArr: any[],radioSelectArr3: st
}
}
}
if(flag==false){
x++
}
//alert(x)
hideFieldsFromCheckbox.push(toshow)
console.log(hideFieldArr)
for(let i = 0;i<hideFieldsFromCheckbox.length;i++){
alert(hideFieldsFromCheckbox[i])
hideFieldArr = hideFieldArr.filter((item: string) => item!=hideFieldsFromCheckbox[i])
//emits('refresh')
}
}
}
}else{//本条件来自于多选,其可能有多项
}
}
})
}else{
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]]
//console.log(modelKeyArr[n])
//console.log(trueValue)
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++
}
}
}
}
}
}
if(x>0){
hideFieldArr = hideFieldArr.filter((item: string) => item!=toshow)
}
}
//将隐藏的字段值重置
for(let i = 0; i< hideFieldArr.length;i++){
//console.log(i+"dsfafdasdfasfsda===="+hideFieldArr[i]+"=====jiuopfdsahokjuhuiofadshuiofadsjbknfdjisahuifhjken wij================"+model.value[hideFieldArr[i]])
@ -432,13 +535,16 @@ provide(constControlChange, ({ key, value, data, tProp, type, attribute }: any)
//将出现在多选配置中的字段放入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]
//alert(fieldKeyStr)
//console.log(fieldKeyStr)
radioSelectArr2.push({
toShowFieldKey:fieldKeyStr,
})
@ -450,6 +556,7 @@ provide(constControlChange, ({ key, value, data, tProp, type, attribute }: any)
}
}
//以showFields的处理过冒号的每个元素为key,其对应的optionValue为value,新建一个数组radioselectArr3 ---用于组装完整显示隐藏条件、
const radioSelectArr3:any[] = []
@ -490,8 +597,46 @@ provide(constControlChange, ({ key, value, data, tProp, type, attribute }: any)
}
}
}
//console.log(radioSelectShowConfigArr2)
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],
})
}
}
}
}
}
}
}
console.log(radioSelectArr3)
//暂时使用的隐藏数组，数据敲定后赋给props.formData.config.hideField

7
src/views/sysworkflow/lowcodepage/pageDesignes.vue
View File

@ -595,7 +595,11 @@ const formNameChanged = (param1: any)=>{
}
//liwenxuan 关联选项设置 修复bug:当字段标识改变时，关联选项设置的字段标识未同步更改 end
let index = ref(0)
function refreshFunc(){
index.value = index.value+1
}
</script>
<template>
@ -651,9 +655,12 @@ const formNameChanged = (param1: any)=>{
<form-design
v-if="state.previewVisible"
ref="previewForm"
:key="index"
:form-data="state.formDataPreview"
:dict="state.formDict"
:type="1"
@refresh="refreshFunc"
/>
<template #footer>
<div class="dialog-footer">

Write Preview
Loading…
Cancel
Save