Browse Source

开关关联选项设置v0.1

lwx_v9
liwenxuan 2 years ago
parent
commit
0a8a22894b
  1. 14
      src/components/DesignForm/assembly/index.ts
  2. 76
      src/components/DesignForm/formControlAttr.vue
  3. 83
      src/components/DesignForm/public/form/form.vue
  4. 8
      src/types/components.d.ts

14
src/components/DesignForm/assembly/index.ts

@ -164,7 +164,19 @@ const selectOption: any = [
icon: 'switch',
iconFont: 'fa-toggle-on',
control: {
modelValue: false
modelValue: "",
glxxszSwitch:[
{
conditionField:'',
openValue:"",
showFields:[]
},
{
conditionField:'',
offValue:"",
showFields:[]
},
]
},
config: {},
styles:{

76
src/components/DesignForm/formControlAttr.vue

@ -2222,6 +2222,14 @@ function delRole(id:String){
const glxxszDialogFlag = ref(false)
const glxxszDialogFlagCheckBox = ref(false)
const glxxszDialogFlagSwitch = ref(false)
function handelGlxxszDialogSwitch(){
if(controlData.value.control.activeValue==undefined||controlData.value.control.inactiveValue==undefined){
alert("请先设置开关状态打开/关闭时的值")
}else{
glxxszDialogFlagSwitch.value = true
}
}
function handelGlxxszDialog(){
if(controlData.value.options.length===0){
alert("无可配置选项,请先添加。")
@ -2237,9 +2245,27 @@ function handelGlxxszDialogCheckbox(){
function handleDetermineGlxxszDialog(){
glxxszDialogFlag.value = false
}
function handleDetermineGlxxszDialogSwitch(){
glxxszDialogFlagSwitch.value = false
}
function handleDetermineGlxxszDialogCheckBox(){
glxxszDialogFlagCheckBox.value = false
}
//
watch(()=>controlData.value.control,(newVal) => {
if(typeof(newVal)!="undefined"){
if(typeof(newVal.glxxszSwitch)!="undefined"){
if(typeof(controlData.value.control.activeValue)!="undefined"){
controlData.value.control.glxxszSwitch[0].openValue = controlData.value.control.activeValue
controlData.value.control.glxxszSwitch[0].conditionField = controlData.value.name
}
if(typeof(controlData.value.control.inactiveValue)!="undefined"){
controlData.value.control.glxxszSwitch[1].offValue = controlData.value.control.inactiveValue
controlData.value.control.glxxszSwitch[1].conditionField = controlData.value.name
}
}
}
},{ deep: true })
@ -2295,8 +2321,8 @@ function createRowForGlxxsz(){
function deleteRowForGlxxsz(row: { id: any }){
controlData.value.control.glxxszForCheckBox = controlData.value.control.glxxszForCheckBox.filter((item: { id: any }) => item.id!=row.id)
}
/* */
//bug:
//liwenxuan20240426 end
@ -2920,6 +2946,9 @@ const loadNextPage = () => {
</el-form-item>
</div>
</div>
<div v-if="showHide(['switch'],true)">
<el-button @click="handelGlxxszDialogSwitch">关联选项设置</el-button>
</div>
<div v-if="showHide(['radio','select',],true)">
<el-button @click="handelGlxxszDialog">关联选项设置</el-button>
</div>
@ -3831,6 +3860,51 @@ const loadNextPage = () => {
</template>
</el-dialog>
<el-dialog v-model="glxxszDialogFlagSwitch" class="glxxsztc" top="150px" :close-on-click-modal="false" title="关联选项设置" :show-close="false" style="margin-top:70px;" width="50%" >
<template v-if="controlData.type=='switch'">
<div style="border:#13ce66 1px solid">当开关打开时显示:
<el-tree-select v-model="controlData.control.glxxszSwitch[0].showFields" style="width: 100%" :data="associatedFormsCurrentFormFieldTreeForGlxxsz[0].children" multiple />
</div>
<div style="border:red 1px solid">当开关关闭时显示:
<el-tree-select v-model="controlData.control.glxxszSwitch[1].showFields" style="width: 100%" :data="associatedFormsCurrentFormFieldTreeForGlxxsz[0].children" multiple />
</div>
<!-- <el-table
:data="controlData.options" stripe border style="width: 100%;min-height:50px;max-height:500px;overflow-y:auto"
:cell-style="{height: '55px',paddingLeft: '15px'}" :header-cell-style="{background:'#F3F4F7',color:'#555',}"
>
<el-table-column prop="link" label="当开关状态为" width="220">
<template #default="optionScope">
<span style="background-color: #E8EAEE;border-radius: 8px;padding-top: 5px;padding-bottom: 5px;padding-left: 15px;padding-right: 15px;">{{ optionScope.row.label }}</span>
</template>
</el-table-column>
<el-table-column fixed="right" label="显示以下组件" >
<template #default="fieldScope">
<el-tree-select v-model="controlData.control.glxxsz[fieldScope.$index].showFields" style="width: 100%" :data="associatedFormsCurrentFormFieldTreeForGlxxsz[0].children" multiple />
</template>
</el-table-column>
</el-table> -->
</template>
<template #footer>
<div class="dialog-footer">
<el-button type="primary" @click="handleDetermineGlxxszDialogSwitch">
确定
</el-button>
</div>
</template>
</el-dialog>
<!-- 关联选项设置弹窗 liwenxuan 20240426 end -->
</template>

83
src/components/DesignForm/public/form/form.vue

@ -164,7 +164,9 @@ const forEachGetFormModel = (list: FormList[], obj: any) => {
})
} else if (['card', 'div'].includes(item.type)) {
forEachGetFormModel(item.list, obj)
} else {
} /* else if(['switch'].includes(item.type)){
console.log(item)
} */else {
const excludeType = ['title', 'divider', 'txt', 'button']
if (excludeType.indexOf(item.type) === -1) {
obj[item.name] = jsonParseStringify(item.control.modelValue)
@ -219,6 +221,9 @@ const recursionToGetFinallyHideFields = (hideFieldArr: any[],radioSelectArr3: st
/* console.log("modelKeyArr^^^^^^^^^^^^^^^^^^^^^^^^^^^^^^^^^^^^^^^^^^^^^^^^^^^^^^^^^^^^^^")
console.log(modelKeyArr) */
//console.log("-------------------")
//console.log(model.value)
//
@ -295,7 +300,7 @@ const recursionToGetFinallyHideFields = (hideFieldArr: any[],radioSelectArr3: st
console.log(conditionFieldValue) */
for(let n = 0; n< modelKeyArr.length;n++){
if(modelKeyArr[n]==conditionField){
let count_1 = 0;
//let count_1 = 0;
let trueValue = model.value[modelKeyArr[n]]
if(trueValue.length>0&&arrayEqual(trueValue,conditionFieldValueArr)){
//,conditionField.,x.
@ -304,7 +309,7 @@ const recursionToGetFinallyHideFields = (hideFieldArr: any[],radioSelectArr3: st
console.log(toshow) */
let flag = false//.,
//conditionField,x++
for(let a = 0;a<hideFieldConditionArr.length;a++){
/* 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++){
@ -315,7 +320,7 @@ const recursionToGetFinallyHideFields = (hideFieldArr: any[],radioSelectArr3: st
}
}
}
}
} */
if(flag==false){
x++
hideFieldsFromCheckbox.push(toshow)
@ -332,7 +337,7 @@ const recursionToGetFinallyHideFields = (hideFieldArr: any[],radioSelectArr3: st
//console.log(conditionFieldValue)
for(let n = 0; n< modelKeyArr.length;n++){
if(modelKeyArr[n]==conditionField){
let count_1 = 0;
//let count_1 = 0;
let trueValue = model.value[modelKeyArr[n]]
//console.log(modelKeyArr[n])
//console.log(trueValue)
@ -371,6 +376,9 @@ const recursionToGetFinallyHideFields = (hideFieldArr: any[],radioSelectArr3: st
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
}
}
//
@ -492,13 +500,14 @@ provide(constControlChange, ({ key, value, data, tProp, type, attribute }: any)
//radio,checkbox,select
//radio,checkbox,select,switch
const radioSelectShowConfigArr = []
const checkboxShowConfigArr = []
const switchShowConfigArr = []
//showFieldskey,optionValuevalue,radioselectArr2----
const radioSelectArr2:any[] = []
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"){
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 = [];
}
//console.log(props.formData.list[i].type)
@ -508,15 +517,18 @@ provide(constControlChange, ({ key, value, data, tProp, type, attribute }: any)
}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)
}
}
//
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++){
@ -565,7 +577,28 @@ provide(constControlChange, ({ key, value, data, tProp, type, attribute }: any)
}
}
//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)
//showFieldskey,optionValuevalue,radioselectArr3 ---
const radioSelectArr3:any[] = []
@ -645,9 +678,35 @@ provide(constControlChange, ({ key, value, data, tProp, type, attribute }: any)
}
}
}
//console.log(radioSelectArr3)
//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[] = [];

8
src/types/components.d.ts

@ -34,6 +34,7 @@ declare module '@vue/runtime-core' {
ElCard: typeof import('element-plus/es')['ElCard']
ElCarousel: typeof import('element-plus/es')['ElCarousel']
ElCarouselItem: typeof import('element-plus/es')['ElCarouselItem']
ElCascader: typeof import('element-plus/es')['ElCascader']
ElCheckbox: typeof import('element-plus/es')['ElCheckbox']
ElCheckboxGroup: typeof import('element-plus/es')['ElCheckboxGroup']
ElCol: typeof import('element-plus/es')['ElCol']
@ -116,6 +117,13 @@ declare module '@vue/runtime-core' {
IconSelect: typeof import('./../components/IconSelect/index.vue')['default']
IEpCaretBottom: typeof import('~icons/ep/caret-bottom')['default']
IEpClose: typeof import('~icons/ep/close')['default']
IEpDelete: typeof import('~icons/ep/delete')['default']
IEpEdit: typeof import('~icons/ep/edit')['default']
IEpMessageBox: typeof import('~icons/ep/message-box')['default']
IEpOperation: typeof import('~icons/ep/operation')['default']
IEpPlus: typeof import('~icons/ep/plus')['default']
IEpRefresh: typeof import('~icons/ep/refresh')['default']
IEpSearch: typeof import('~icons/ep/search')['default']
IEpSetting: typeof import('~icons/ep/setting')['default']
LangSelect: typeof import('./../components/LangSelect/index.vue')['default']
LayoutPage: typeof import('./../components/DesignForm/layoutPage/index.vue')['default']

Loading…
Cancel
Save