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

单选下拉多选关联系统表单字段

lwx_v11
liwenxuan 1 year ago
parent
f803693575
commit
0d8492dbc5
9 changed files with 205 additions and 85 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. 2
      src/components/DesignForm/assembly/index.ts
  2. 99
      src/components/DesignForm/formControlAttr.vue
  3. 87
      src/components/DesignForm/formControlPropertiNew.vue
  4. 7
      src/components/DesignForm/public/form/form.vue
  5. 6
      src/components/DesignForm/public/form/formGroup.vue
  6. 53
      src/components/DesignForm/public/form/formItem.vue
  7. 4
      src/types/components.d.ts
  8. 16
      src/views/sysworkflow/lowcodepage/appPage/appPageForm/pageForm.vue
  9. 16
      src/views/sysworkflow/lowcodepage/pageDesignes.vue

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

@ -14,7 +14,7 @@ const selectOption: any = [
}*/
]
const config: { optionsType: number } = {
optionsType: 0 // 0固定 1数据源 2 接口字典
optionsType: 0 // 0固定 1数据源 2 接口字典 3系统表单字段
}
export default [
{

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

@ -1147,7 +1147,7 @@
//liwenxuan 20240508 checkbox 删除选项时提醒 start
let delflag = true
let breakFlag = 0
if(controlData.value.type === 'checkbox'){
if(controlData.value.type === 'checkbox'&& controlData.value.config.optionsType==0){
for(var i = 0;i < controlData.value.control.glxxszForCheckBox.length;i ++){
if(breakFlag>0){
break
@ -2413,54 +2413,64 @@ watch(()=>controlData.value.control,(newVal) => {
//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(
{
conditionField: controlData.value.name,
optionLabel: changedOptions[i].label,
optionValue: changedOptions[i].value,
tableIndex: i,
id: uuidv4().replaceAll('-','').toString(),
}
)
if(controlData.value.type === "radio" || controlData.value.type === "select"){
if(controlData.value.config.optionsType==0){
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{
//修改了某个option
controlData.value.control.glxxsz[i].optionLabel = changedOptions[i].label
controlData.value.control.glxxsz[i].optionValue = changedOptions[i].value
for(var i = 0; i < changedOptions.length; i++){
if(controlData.value.control.glxxsz[i]===undefined){
//新增了某个option
controlData.value.control.glxxsz.push(
{
conditionField: controlData.value.name,
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
}
}
}
}
}
}else if(controlData.value.type === "checkbox"){
}
}else if(controlData.value.type === "checkbox"){
}
},{ deep: true })
function createRowForGlxxsz(){
controlData.value.control.glxxszForCheckBox.push(
{
conditionField: controlData.value.name,
selectedOptions:[],
showFields:[],
id: uuidv4().replaceAll('-','').toString(),
}
)
if(controlData.value.config.optionsType==0){
controlData.value.control.glxxszForCheckBox.push(
{
conditionField: controlData.value.name,
selectedOptions:[],
showFields:[],
id: uuidv4().replaceAll('-','').toString(),
}
)
}
}
function deleteRowForGlxxsz(row: { id: any }){
controlData.value.control.glxxszForCheckBox = controlData.value.control.glxxszForCheckBox.filter((item: { id: any }) => item.id!=row.id)
if(controlData.value.config.optionsType==0){
controlData.value.control.glxxszForCheckBox = controlData.value.control.glxxszForCheckBox.filter((item: { id: any }) => item.id!=row.id)
}
}
/* */
@ -2475,6 +2485,11 @@ function handleDetermineoptionsValue3(){
//liwenxuan20240426 单选多选下拉 关联选项设置 end
function optionsTypeChanged(){
controlData.value.config.optionsFun = ''
controlData.value.options = []
}
@ -3086,13 +3101,13 @@ const loadNextPage = () => {
</el-form-item>
</div>
</div>
<div v-if="showHide(['switch'],true)">
<el-button @click="handelGlxxszDialogSwitch">关联选项设置</el-button>
<div v-if="showHide(['switch'],true)&&controlData.config.optionsType==0">
<el-button @click="handelGlxxszDialogSwitch">关联选项设置</el-button>
</div>
<div v-if="showHide(['radio','select',],true)">
<div v-if="showHide(['radio','select',],true)&&controlData.config.optionsType==0">
<el-button @click="handelGlxxszDialog">关联选项设置</el-button>
</div>
<div v-if="showHide(['checkbox',],true)">
<div v-if="showHide(['checkbox',],true)&&controlData.config.optionsType==0">
<el-button @click="handelGlxxszDialogCheckbox">关联选项设置</el-button>
</div>
<div
@ -3121,7 +3136,7 @@ const loadNextPage = () => {
<el-form-item label="选项数据源" class="form_cont">
<el-select
v-model="controlData.config.optionsType"
@change="controlData.config.optionsFun = ''"
@change="optionsTypeChanged"
>
<el-option :value="0" label="固定选项" />
<el-option :value="3" label="系统表单字段"/>

87
src/components/DesignForm/formControlPropertiNew.vue
View File

@ -1191,7 +1191,7 @@ const delSelectOption = (index: number, type?: string) => {
//liwenxuan 20240508 checkbox 删除选项时提醒 start
let delflag = true
let breakFlag = 0
if(controlData.value.type === 'checkbox'){
if(controlData.value.type === 'checkbox'&& controlData.value.config.optionsType==0){
for(var i = 0;i < controlData.value.control.glxxszForCheckBox.length;i ++){
if(breakFlag>0){
break
@ -2452,30 +2452,32 @@ watch(()=>controlData.value.control,(newVal) => {
//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))
if(controlData.value.config.optionsType==0){
if(changedOptions.length===0){
//删没了option
controlData.value.control.glxxsz = []
}else{
for(var i = 0; i < changedOptions.length; i++){
if(controlData.value.control.glxxsz[i]===undefined){
//新增了某个option
controlData.value.control.glxxsz.push(
{
conditionField: controlData.value.name,
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
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(
{
conditionField: controlData.value.name,
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
}
}
}
}
@ -2487,18 +2489,22 @@ watch(()=>controlData.value.options, (changedOptions:any) => {
function createRowForGlxxsz(){
controlData.value.control.glxxszForCheckBox.push(
{
conditionField: controlData.value.name,
selectedOptions:[],
showFields:[],
id: uuidv4().replaceAll('-','').toString(),
}
)
if(controlData.value.config.optionsType==0){
controlData.value.control.glxxszForCheckBox.push(
{
conditionField: controlData.value.name,
selectedOptions:[],
showFields:[],
id: uuidv4().replaceAll('-','').toString(),
}
)
}
}
function deleteRowForGlxxsz(row: { id: any }){
controlData.value.control.glxxszForCheckBox = controlData.value.control.glxxszForCheckBox.filter((item: { id: any }) => item.id!=row.id)
if(controlData.value.config.optionsType==0){
controlData.value.control.glxxszForCheckBox = controlData.value.control.glxxszForCheckBox.filter((item: { id: any }) => item.id!=row.id)
}
}
/* */
@ -2515,6 +2521,13 @@ function handleDetermineoptionsValue3(){
//liwenxuan20240426 单选多选下拉 关联选项设置 end
function optionsTypeChanged(){
controlData.value.config.optionsFun = ''
controlData.value.options = []
}
const optionsCss = [
@ -3122,13 +3135,13 @@ const loadNextPage = () => {
</el-form-item>
</div>
</div>
<div v-if="showHide(['switch'],true)">
<div v-if="showHide(['switch'],true)&&controlData.config.optionsType==0">
<el-button @click="handelGlxxszDialogSwitch">关联选项设置</el-button>
</div>
<div v-if="showHide(['radio','select',],true)">
<div v-if="showHide(['radio','select',],true)&&controlData.config.optionsType==0">
<el-button @click="handelGlxxszDialog">关联选项设置</el-button>
</div>
<div v-if="showHide(['checkbox',],true)">
<div v-if="showHide(['checkbox',],true)&&controlData.config.optionsType==0">
<el-button @click="handelGlxxszDialogCheckbox">关联选项设置</el-button>
</div>
<div
@ -3157,7 +3170,7 @@ const loadNextPage = () => {
<el-form-item label="选项数据源" class="form_cont">
<el-select
v-model="controlData.config.optionsType"
@change="controlData.config.optionsFun = ''"
@change="optionsTypeChanged"
>
<el-option :value="0" label="固定选项" />
<el-option :value="3" label="系统表单字段"/>

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

@ -84,6 +84,7 @@ const emits = defineEmits<{
(e: 'change', val: any): void // 表单组件值发生变化时
(e: 'update:issave', type: boolean): void
(e: 'refresh'): void
(e: 'optionsValue3Get3', val: any,fieldName: string): void
}>()
const route = useRoute()
const router = useRouter()
@ -1587,6 +1588,10 @@ const submitEdit = (type: string, res: any) => {
}
}
function optionsValue3Get2(data: any,fieldName: string){
emits('optionsValue3Get3',data,fieldName)
}
defineExpose({
setOptions,
setValue,
@ -1616,7 +1621,7 @@ defineExpose({
}"
>
<FormGroup :tableinfo="formData.form" :numrun="numrun" :data="formData.list" />
<FormGroup :tableinfo="formData.form" :numrun="numrun" :data="formData.list" @optionsValue3Get2="optionsValue3Get2"/>
<slot></slot>
</el-form>

6
src/components/DesignForm/public/form/formGroup.vue
View File

@ -35,6 +35,7 @@ const props = withDefaults(
}
)
let emits = defineEmits(['optionsValue3Get2']);
const store = useDesignFormStore() as any //自定义表单存储器
const formProps = inject(constFormProps, {}) as any
@ -307,6 +308,9 @@ const getFormItemLableStyle = (ele: any) => {
return AnalysisCss(ele?.labelStyle)
}
}
function optionsValue3Get1(data: any,fieldName: string){
emits('optionsValue3Get2',data,fieldName)
}
</script>
<template>
<draggable
@ -503,7 +507,7 @@ const getFormItemLableStyle = (ele: any) => {
<UrlLink v-else-if="element.type === 'urllink'" :data="element" />
<SerialNumber v-else-if="element.type === 'serialNumber'" :data="element" :tablekey="props.tableinfo.name" :numrun="props.numrun" />
<!--其他组件-->
<FormItem v-else :data="element" />
<FormItem v-else :data="element" @optionsValue3Get1="optionsValue3Get1"/>
<!--组件设计外功能框架-->
<template v-if="type === 5">

53
src/components/DesignForm/public/form/formItem.vue
View File

@ -37,6 +37,8 @@ import TextImg from "@/assets/image/tinymce.png"
import { AnalysisCss,AnalysisInputCss } from '@/components/DesignForm/public/form/calculate/cssInfo.ts'
import request from '@/utils/request';
const props = withDefaults(
defineProps<{
data: FormList
@ -47,6 +49,7 @@ const props = withDefaults(
)
const emits = defineEmits<{
(e: 'update:modelValue', val: any): void
(e: 'optionsValue3Get1', val: any,fieldName: string): void
}>()
const route = useRoute()
const formProps = inject(constFormProps, {}) as any
@ -68,7 +71,7 @@ const control = computed(() => {
return props.data.control
// return props.data
})
const options = ref(props.data.options)
const options = ref(props.data.options)
//console.log("FormItem*********************************************************"+JSON.stringify(props.data))
const changeEvent = inject(constControlChange, '') as any
const updateModel = (val: any) => {
@ -187,6 +190,7 @@ const itemRules = computed(() => {
})
// data 根据条件搜索，select远程搜索里data有值
const getAxiosOptions = debounce((data?: any) => {
//console.log(props.data)
const {
optionsType,
optionsFun,
@ -277,14 +281,57 @@ const getAxiosOptions = debounce((data?: any) => {
// console.log(res)
// })
}
}
}else if(optionsType === 3){//liwenxuan 20240611 系统表单字段效果实现
/*
在这里请求后台获取字段
*/
getFieldRecord(props.data.control.optionsValue3Field).then(({ data }) => {
//console.log(data)
//console.log(props.data.name)
let fieldName = props.data.name
//console.log(options.value)
//options.value = data
/*
*/
emits('optionsValue3Get1',data,fieldName)
//console.log(options.value)
//console.log()
})
}
setFormDict(formProps.value.dict) // 表格里新增时行时需要重新设一次
}
})
watch(
() => props.data.control.optionsValue3Field,
() => {
getAxiosOptions()
}
)
watch(
() => props.data.config.optionsType,
() => {
getAxiosOptions()
}
)
function getFieldRecord(param1: any) {
return request({
url: '/javasys/lowCode/AssociatedForms/getFieldRecord',
method: 'post',
data: {
optionsValue3Field:param1
},
});
}
watch(
() => formProps.value.model[sourceFunKey.value],
() => {
getAxiosOptions()
getAxiosOptions()
}
)
// 处理自定义校验规则，将customRules转换后追加到rules里

4
src/types/components.d.ts
View File

@ -35,6 +35,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']
@ -119,8 +120,11 @@ 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']

16
src/views/sysworkflow/lowcodepage/appPage/appPageForm/pageForm.vue
View File

@ -526,6 +526,21 @@ const formNameChanged = (param1: any)=>{
}
//liwenxuan 关联选项设置 修复bug:当字段标识改变时，关联选项设置的字段标识未同步更改 end
function optionsValue3Get3(data: any,fieldName: string){
console.log(state.value.formData.list)
console.log(data)
console.log(fieldName)
for(let i = 0; i < state.value.formData.list.length; i++){
if(state.value.formData.list[i].name==fieldName){
state.value.formData.list[i].options = []
for(let j = 0;j<data.length;j++){
state.value.formData.list[i].options.push(data[j])
}
}
}
}
</script>
<template>
@ -555,6 +570,7 @@ const formNameChanged = (param1: any)=>{
:type="5"
:form-data="state.formData"
:dict="state.formDict"
@optionsValue3Get3="optionsValue3Get3"
/>
</div>
</el-main>

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

@ -623,6 +623,21 @@ function refreshFunc(){
index.value = index.value+1
}
function optionsValue3Get3(data: any,fieldName: string){
/* console.log(state.value.formData.list)
console.log(data)
console.log(fieldName) */
for(let i = 0; i < state.value.formData.list.length; i++){
if(state.value.formData.list[i].name==fieldName){
state.value.formData.list[i].options = []
for(let j = 0;j<data.length;j++){
state.value.formData.list[i].options.push(data[j])
}
}
}
}
</script>
<template>
@ -649,6 +664,7 @@ function refreshFunc(){
:type="5"
:form-data="state.formData"
:dict="state.formDict"
@optionsValue3Get3="optionsValue3Get3"
/>
</div>
</div>

Write Preview
Loading…
Cancel
Save