Browse Source

关联选项设置下拉单选效果实现

lwx_v8
liwenxuan 2 years ago
parent
commit
4401405741
  1. 51
      src/components/DesignForm/formControlAttr.vue
  2. 177
      src/components/DesignForm/public/form/form.vue
  3. 9
      src/components/DesignForm/public/form/formGroup.vue
  4. 33
      src/views/sysworkflow/lowcodepage/pageDesignes.vue

51
src/components/DesignForm/formControlAttr.vue

@ -56,6 +56,7 @@
(e: 'openDialog', data: any): void
(e: 'update:formOtherData', data: any): void
(e: 'videoMsgChange', data: VideoMsg): void
(e: 'formNameChange', data: any): void
//(e: 'update:formData', data: any): void
//(e: 'update:formConfig', data: any): void
}>()
@ -993,6 +994,7 @@
const fileSignAry = reactive<any>([])
const controlChange = (obj: any, val: any) => {
// console.log("--1--",obj)
// console.log("--2--",obj.eventName)
// console.log("--3--",val)
@ -1088,7 +1090,15 @@
const newVal = obj.isNum ? formatNumber(val) : val //
obj.path && getPropByPath(controlData.value, obj.path, newVal)
}
//liwenxuan bug: start
emits('formNameChange',val);
//liwenxuan bug: end
}
/**
* 获取非负整数随机数
* @param Min 最小整数
@ -2230,9 +2240,7 @@ function handleDetermineGlxxszDialog(){
function handleDetermineGlxxszDialogCheckBox(){
glxxszDialogFlagCheckBox.value = false
}
/* function addShowField(val:string){
alert('addShowField:'+val)
} */
@ -2252,6 +2260,7 @@ watch(()=>controlData.value.options, (changedOptions:any) => {
//option
controlData.value.control.glxxsz.push(
{
conditionField: controlData.value.name,
optionLabel: changedOptions[i].label,
optionValue: changedOptions[i].value,
tableIndex: i,
@ -2275,6 +2284,7 @@ watch(()=>controlData.value.options, (changedOptions:any) => {
function createRowForGlxxsz(){
controlData.value.control.glxxszForCheckBox.push(
{
selectedOptions:[],
showFields:[],
id: uuidv4().replaceAll('-','').toString(),
@ -2286,6 +2296,8 @@ function deleteRowForGlxxsz(row: { id: any }){
controlData.value.control.glxxszForCheckBox = controlData.value.control.glxxszForCheckBox.filter((item: { id: any }) => item.id!=row.id)
}
//bug:
//liwenxuan20240426 end
@ -3756,25 +3768,6 @@ const loadNextPage = () => {
</template>
</el-table-column>
<el-table-column fixed="right" label="显示以下组件" >
<!-- <template #default="fieldScope">
<div style="display:flex;align-items: center;flex-wrap: wrap;">
<el-tag v-for="tag in tags" :key="tag.name" closable style="font-weight: 500; margin-right: 5px;margin-top: 5px;" effect="dark" >
{{ tag.name }}
</el-tag>
<el-icon style="display:inline-block; width:20px;margin-top: 5px;height:20px;border: 1.5px #9C9DA0 solid; border-radius: 3px; font-size: large; cursor: pointer; position:relative" @click="addShowField(fieldScope.row.value)">
<Plus />
<div :class="`treeSelectDiv`+fieldScope.row.value" style="position: absolute;z-index: 999999; display:inline-block;">
<el-tree-select
size=""
v-model="trseChVal" style="width: 290px;" :data="associatedFormsCurrentFormFieldTree"
check-strictly :render-after-expand="false" />
</div>
</el-icon>
</div>
</template> -->
<template #default="fieldScope">
<el-tree-select v-model="controlData.control.glxxsz[fieldScope.$index].showFields" style="width: 100%" :data="associatedFormsCurrentFormFieldTreeForGlxxsz[0].children" multiple />
@ -3784,17 +3777,13 @@ const loadNextPage = () => {
</template>
<template #footer>
<div class="dialog-footer">
<!-- <el-button @click="asfhTextCancelFillRoles">取消</el-button> -->
<el-button type="primary" @click="handleDetermineGlxxszDialog">
确定
</el-button>
</div>
</template>
</el-dialog>
<!--
-->
<el-dialog v-model="glxxszDialogFlagCheckBox" class="glxxsztc" top="150px" :close-on-click-modal="false" title="关联选项设置" :show-close="false" style="margin-top:70px;" width="50%" >
@ -3819,11 +3808,11 @@ const loadNextPage = () => {
</el-table-column>
<el-table-column fixed="right" label="操作" width="130">
<!-- <el-button v-if="controlData.control.carsuselConfigArr.length>1" type="danger" :icon="Delete" circle @click="deleteRow(scope.row)"/>
<el-button v-if="controlData.control.carsuselConfigArr[controlData.control.carsuselConfigArr.length-1].imgId == scope.row.imgId" type="success" :icon="Plus" circle @click="createRow(scope.row)" /> -->
<template #default="operateScope">
<!-- <el-button v-if="controlData.control.glxxsz[controlData.control.glxxsz.length-1].id == operateScope.row.id" type="success" :icon="Plus" circle @click="createRowForGlxxsz(operateScope.row)" /> -->
<el-button type="danger" :icon="Delete" circle @click="deleteRowForGlxxsz(operateScope.row)"/>
</template>
@ -3834,7 +3823,7 @@ const loadNextPage = () => {
</template>
<template #footer>
<div class="dialog-footer">
<!-- <el-button @click="asfhTextCancelFillRoles">取消</el-button> -->
<el-button type="primary" @click="handleDetermineGlxxszDialogCheckBox">
确定
</el-button>

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

@ -239,16 +239,170 @@ provide(constControlChange, ({ key, value, data, tProp, type, attribute }: any)
}
// })
//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)
// 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)
console.log("监听表单--constControlChange-->",key, value, data, tProp,type,attribute)//liwenxuan
//
//props.formData.config.hideField.push("nin2yuan4yi4wei4wo3menda3fen1ma101939")
//radio,checkbox,select
const radioSelectShowConfigArr = []
const checkboxShowConfigArr = []
//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"){
props.formData.config.hideField = [];
}
//console.log(props.formData.list[i].type)
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)
}
}
//
const radioSelectShowConfigArr2 = JSON.parse(JSON.stringify(radioSelectShowConfigArr));
const checkboxShowConfigArr2 = JSON.parse(JSON.stringify(checkboxShowConfigArr));
console.log(radioSelectShowConfigArr2)
console.log(checkboxShowConfigArr2)
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,
})
}
}
}
}
}
}
//showFieldskey,optionValuevalue,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],
})
}
}
}
}
}
}
}
//使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))
nextTick(() => {
console.log(radioSelectArr3)
console.log(model.value)
let modelKeyArr = [];
for(let i= 0;i<props.formData.list.length;i++){
modelKeyArr.push(props.formData.list[i].name+"")
}
console.log("^^^^^^^^^^^^^^^^^^^^^^^^^^^^^^^^^^^^^^^^^^^^^^^^^^^^^^^^^^^^^^"+modelKeyArr)
//
for(let i = 0;i< radioSelectArr3.length;i++){
for(let j = 0; j< modelKeyArr.length;j++){
if(modelKeyArr[j]==radioSelectArr3[i].conditionFieldKey){
//console.log("modelKeyArr[j]========="+modelKeyArr[j]+"modelKeyArr[j]===="+model.value[modelKeyArr[j]])
//console.log("radioSelectArr3[i].conditionFieldKey========="+radioSelectArr3[i].conditionFieldKey+"conditionFieldValue======"+radioSelectArr3[i].conditionFieldValue)
//
if(radioSelectArr3[i].conditionFieldValue == model.value[modelKeyArr[j]]){
console.log("当前的值==="+model.value[modelKeyArr[j]])
console.log("modelKeyArr[j]==="+modelKeyArr[j])
console.log("作为条件的字段的设定条件值radioSelectArr3[i]==="+radioSelectArr3[i].conditionFieldValue)
console.log(radioSelectArr3[i].toShowFieldKey)
//hideFieldArr = hideFieldArr.filter( item => radioSelectArr3[i].toShowFieldKey.find((bItem: any) => item != bItem))
for(let n = 0; n < hideFieldArr.length; n++){
for(let m = 0; m < radioSelectArr3[i].toShowFieldKey.length; m++){
if(hideFieldArr[n] == radioSelectArr3[i].toShowFieldKey[m]){
hideFieldArr.splice(n,1);
}
}
}
}
}
}
}
console.log(hideFieldArr)
props.formData.config.hideField?.push(...hideFieldArr)
});
//props.formData.config?.hideField?.push("nin2yuan4yi4wei4wo3menda3fen1ma101939")
//console.log("--constControlChange-->",key, value, data, tProp,type,attribute)//liwenxuan
if (typeof props.changeKeyVal === 'function') {
props.changeKeyVal(key, value,type,attribute)
@ -275,6 +429,9 @@ provide(constControlChange, ({ key, value, data, tProp, type, attribute }: any)
}
/*
*/
})
const dictForm = computed(() => {
const storage = window.localStorage.getItem('akFormDict')
@ -295,6 +452,7 @@ const formProps = computed(() => {
dict: dictForm.value
}
})
provide(constFormProps, formProps)
// nameformData.list
@ -709,6 +867,11 @@ watch(
}
)
// ------------------------------------------------
//
const resetFields = () => {
ruleForm.value.resetFields()

9
src/components/DesignForm/public/form/formGroup.vue

@ -209,15 +209,24 @@ const getFormItemStyle = (ele: FormList) => {
}
//
const linksShow = (el: FormList, index: number) => {
/*
*/
//
if (!el.config) {
return true
}
const key = el.config.linkKey
//liwenxuan
//console.log("linksShow--------"+index+"--------"+JSON.stringify(el))
//
const value = el.config.linkValue
const linkResult = el.config.linkResult
if (key && value && type.value !== 5) {
const Fn = new Function('$', `return (${value})`)
console.log(Fn)
const pass = Fn(formProps.value.model)
if (linkResult === 'disabled') {
// disabled

33
src/views/sysworkflow/lowcodepage/pageDesignes.vue

@ -75,6 +75,11 @@ const formKeyVal = computed({
}
});
//
provide('formDesignType', state.value.designType)
const vueFileEl = ref()
@ -565,6 +570,33 @@ onMounted(() => {
// watch(() =>versionId.value ,(val:string)=>{
// emits('update:formVersion', val)
// })
//liwenxuan bug: start
const formNameChanged = (param1: any)=>{
for(let i = 0; i < state.value.formData.list.length; i++){
if(state.value.formData.list[i].type=="radio"||state.value.formData.list[i].type=="select"||state.value.formData.list[i].type=="checkbox"){
if(state.value.formData.list[i].control.glxxsz!=undefined&&state.value.formData.list[i].control.glxxsz.length>0){
state.value.formData.list[i].control.glxxsz = []
state.value.formData.list[i].options.push({
label: '',
value: ''
})
state.value.formData.list[i].options.pop();
}
if(state.value.formData.list[i].control.glxxszForCheckBox!=undefined&&state.value.formData.list[i].control.glxxszForCheckBox.length>0){
state.value.formData.list[i].control.glxxszForCheckBox = []
}
}
}
ElMessage({
message: '因字段标识改变,本表单的所有单选、多选、下拉的关联选项设置已重置,请重新设置。',
type: 'warning',
})
}
//liwenxuan bug: end
</script>
<template>
<div class="design_container">
@ -598,6 +630,7 @@ onMounted(() => {
:form-list="state.formData.list"
:form-info="state.formData"
@open-dialog="openAceEditDrawer"
@form-name-change="formNameChanged"
/>
<ace-drawer
v-model="drawer.visible"

Loading…
Cancel
Save