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

关联选项设置配置-单选下拉

lwx_v8
liwenxuan 2 years ago
parent
c37de4e81d
commit
e834f35278
2 changed files with 186 additions and 4 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. 9
      src/components/DesignForm/assembly/index.ts
  2. 179
      src/components/DesignForm/formControlAttr.vue

9
src/components/DesignForm/assembly/index.ts
View File

@ -80,7 +80,8 @@ const selectOption: any = [
icon: 'radio',
iconFont: 'fa-dot-circle-o',
control: {
modelValue: ''
modelValue: '',
glxxsz:[],
},
options: selectOption, // 下拉选项数据集合
config: config,
@ -96,7 +97,8 @@ const selectOption: any = [
icon: 'checkbox',
iconFont: 'fa-check-square-o',
control: {
modelValue: []
modelValue: [],
glxxsz:[],
},
options: selectOption,
config: config,
@ -113,7 +115,8 @@ const selectOption: any = [
iconFont: 'fa-toggle-down',
control: {
modelValue: '',
appendToBody: true
appendToBody: true,
glxxsz:[],
},
options: selectOption,
config: config,

179
src/components/DesignForm/formControlAttr.vue
View File

@ -1850,6 +1850,7 @@ function formidChanged(){
}
const associatedFormsCurrentFormFieldTree = ref<Tree[]>()
const associatedFormsCurrentFormFieldTreeForGlxxsz = ref<Tree[]>()
getAssociatedFormsCurrentFieldTree().then(({ data }) => {
if(data.id==="cfid为空"){
@ -1864,6 +1865,17 @@ getAssociatedFormsCurrentFieldTree().then(({ data }) => {
children: [...resData.value],
treeAttrs: data.treeAttrs,
}]
let resDataForGlxxsz = ref(data.children.slice(8))
associatedFormsCurrentFormFieldTreeForGlxxsz.value = [{
id: 'rootid_'+data.label,
//label: '当前表单',
label: '当前表单-'+data.treeAttrs.show,
children: [...resDataForGlxxsz.value],
treeAttrs: data.treeAttrs,
}]
}
});
@ -2153,6 +2165,69 @@ function delRole(id:String){
//liwenxuan20240403 associatedForms end
//liwenxuan20240426 单选多选下拉 关联选项设置 start
const glxxszDialogFlag = ref(false)
const glxxszDialogFlagCheckBox = ref(false)
function handelGlxxszDialog(){
if(controlData.value.options.length===0){
alert("无可配置选项，请先添加。")
}else{
glxxszDialogFlag.value = true
}
}
function handelGlxxszDialogCheckbox(){
glxxszDialogFlagCheckBox.value = true
}
function handleDetermineGlxxszDialog(){
glxxszDialogFlag.value = false
}
function handleDetermineGlxxszDialogCheckBox(){
glxxszDialogFlagCheckBox.value = false
}
/* function addShowField(val:string){
alert('addShowField:'+val)
} */
//radio,select添加选项时同步配置选项
watch(()=>controlData.value.options, (changedOptions:any) => {
if(controlData.value.type === "radio" || controlData.value.type === "select"){
if(changedOptions.length===0){
//删没了option
controlData.value.control.glxxsz = []
}else{
if(changedOptions.length < controlData.value.control.glxxsz.length){
//删除了某个option
controlData.value.control.glxxsz = controlData.value.control.glxxsz.filter((item: { optionValue: any }) => changedOptions.find((bItem: { value: any }) => item.optionValue == bItem.value))
}else{
for(var i = 0; i < changedOptions.length; i++){
if(controlData.value.control.glxxsz[i]===undefined){
//新增了某个option
controlData.value.control.glxxsz.push(
{
optionLabel: changedOptions[i].label,
optionValue: changedOptions[i].value,
tableIndex: i,
id: uuidv4().replaceAll('-','').toString(),
}
)
}else{
//修改了某个option
controlData.value.control.glxxsz[i].optionLabel = changedOptions[i].label
controlData.value.control.glxxsz[i].optionValue = changedOptions[i].value
}
}
}
}
}
},{ deep: true })
//liwenxuan20240426 单选多选下拉 关联选项设置 end
@ -2774,6 +2849,12 @@ const loadNextPage = () => {
</el-form-item>
</div>
</div>
<div v-if="showHide(['radio','select',],true)">
<el-button @click="handelGlxxszDialog">关联选项设置</el-button>
</div>
<div v-if="showHide(['checkbox',],true)">
<el-button @click="handelGlxxszDialogCheckbox">关联选项设置</el-button>
</div>
<div
v-if="
showHide(
@ -3595,6 +3676,103 @@ const loadNextPage = () => {
<!-- 关联表单设置弹窗 liwenxuan 20240402 end -->
<!-- 关联选项设置弹窗 liwenxuan 20240426 start -->
<el-dialog v-model="glxxszDialogFlag" class="glxxsztc" top="150px" :close-on-click-modal="false" title="关联选项设置" :show-close="false" style="margin-top:70px;" width="50%" >
<template v-if="controlData.type=='radio'||controlData.type=='select'">
<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">
<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 />
</template>
</el-table-column>
</el-table>
</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%" >
<template v-if="controlData.type=='checkbox'">
<el-table
:data="controlData.control.glxxsz" 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">
<el-tree-select v-model="controlData.control.glxxsz[optionScope.$index].showFields" style="width: 100%" :data="associatedFormsCurrentFormFieldTreeForGlxxsz[0].children" multiple />
</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 @click="asfhTextCancelFillRoles">取消</el-button> -->
<el-button type="primary" @click="handleDetermineGlxxszDialogCheckBox">
确定
</el-button>
</div>
</template>
</el-dialog>
<!-- 关联选项设置弹窗 liwenxuan 20240426 end -->
</template>
<style lang='scss' scoped>
@ -3659,5 +3837,6 @@ const loadNextPage = () => {
.el-main{
--el-main-padding: 5px
}
</style>

Write Preview
Loading…
Cancel
Save