Browse Source

完成页面优化

yjf_v3^2
超级管理员 1 year ago
parent
commit
c9f11663f2
  1. 92
      src/components/DesignForm/aceDrawer.vue
  2. 2
      src/components/DesignForm/formControlPropertiNew.vue
  3. 47
      src/components/DesignForm/public/expand/cascader.vue
  4. 20
      src/components/DesignForm/public/form/formItem.vue
  5. 27
      src/views/sysworkflow/lowcodepage/appPage/appPageForm/pageForm.vue

92
src/components/DesignForm/aceDrawer.vue

@ -41,6 +41,7 @@ const visible = ref(false)
const treeSelectAry = reactive<treeStruct[]>([]) //
const editTitleFormRef = ref(ElForm); //
const editTitleInfoRef = ref(ElForm);
let jibuqi = 0 //
const isTopHeader = ref(false) //
const guodu = ref<treeStruct>({}) //使
@ -77,6 +78,7 @@ const dialogConfirm = () => {
const drawerBeforeClose = () => {
emits('update:modelValue', false)
emits('beforeClose')
treeSelectAry=[]
}
onMounted(() => {})
onUnmounted(() => {
@ -164,15 +166,24 @@ const pickIsTrue = () => {
*/
const dialogConfirmTree = () => {
let drawer = ({
visible: false,
type: '',
title: '',
codeType: '',
direction: undefined, //rtl / ltr
callback: ''
})
// let drawer = ({
// visible: false,
// type: '',
// title: '',
// codeType: '',
// direction: undefined, //rtl / ltr
// callback: ''
// })
// let opt = new Array
// treeSelectAry.forEach((item:treeStruct) => {
// opt.push({
// value: item.value,
// label: item.label,
// children: item.children
// })
// })
// emits('confirm', treeSelectAry)
emits('confirmTree', treeSelectAry)
drawerBeforeClose()
}
@ -203,6 +214,46 @@ const delDiGui = (tree: treeStruct[],val:treeStruct) => {
}
}
}
const edisIsShow = ref(false)
const butLoadEdit = ref(false)
/**
@ 作者: 秦东
@ 时间: 2024-09-29 13:29:17
@ 功能: 编辑级联舒体
*/
const pickEdis = (val:treeStruct) => {
guodu.value = val
treeSelectTitle.label = val.label
edisIsShow.value = true
}
/**
@ 作者: 秦东
@ 时间: 2024-09-29 13:33:51
@ 功能: 关闭编辑窗体
*/
const pickEditClose = () => {
guodu.value = {}
treeSelectTitle.label = ""
edisIsShow.value = false
butLoadEdit.value = false
editTitleInfoRef.value.resetFields();
}
/**
@ 作者: 秦东
@ 时间: 2024-09-29 13:36:30
@ 功能: 确定修改
*/
const pickEditIsTrue = () => {
butLoadEdit.value = true
editTitleInfoRef.value.validate((isValid: boolean) => {
if(isValid){
guodu.value.label = treeSelectTitle.label
pickEditClose()
}else{
butLoad.value = false
}
})
}
</script>
<template>
<el-drawer
@ -217,7 +268,7 @@ const delDiGui = (tree: treeStruct[],val:treeStruct) => {
<template #header>
<div v-html="title"></div>
</template>
<div v-if="['cascader', 'treeSelect'].includes(props.data.type)">{{props.data}}
<div v-if="['cascader', 'treeSelect'].includes(props.data.type)">
<el-table
:data="treeSelectAry"
row-key="value"
@ -231,7 +282,7 @@ const delDiGui = (tree: treeStruct[],val:treeStruct) => {
<template #default="scope">
<el-button-group>
<el-button text type="success" @click="pickAdd(scope.row)">添加</el-button>
<el-button text type="warning" @click="pick(scope.row)">修改</el-button>
<el-button text type="warning" @click="pickEdis(scope.row)">修改</el-button>
<el-button text type="danger" @click="pickDel(scope.row)">删除</el-button>
</el-button-group>
</template>
@ -267,6 +318,27 @@ const delDiGui = (tree: treeStruct[],val:treeStruct) => {
</template>
</el-dialog>
<el-dialog
v-model="edisIsShow"
title="编辑"
width="500"
:before-close="pickEditClose"
>
<el-form ref="editTitleInfoRef" :rules="editTitleRules" :model="treeSelectTitle" label-width="auto" style="max-width: 600px">
<el-form-item label="名称:" prop="label">
<el-input v-model="treeSelectTitle.label" />
</el-form-item>
</el-form>
<template #footer>
<div class="dialog-footer">
<el-button @click="pickEditClose">取消</el-button>
<el-button v-loading="butLoadEdit" type="primary" @click="pickEditIsTrue">确定</el-button>
</div>
</template>
</el-dialog>
</el-drawer>
</template>
<style lang='scss' scoped>

2
src/components/DesignForm/formControlPropertiNew.vue

@ -1834,7 +1834,7 @@ const showImagePreview = ref(false)
}
}
// console.log(resDataForGlxxszExceptself1)
if(getAssociatedFormsCurrentFieldTreeData.treeAttrs!=undefined){
if(getAssociatedFormsCurrentFieldTreeData && getAssociatedFormsCurrentFieldTreeData.treeAttrs && getAssociatedFormsCurrentFieldTreeData.treeAttrs!=undefined){
associatedFormsCurrentFormFieldTreeForGlxxszExceptSelf.value = [{
id: 'rootid_'+getAssociatedFormsCurrentFieldTreeData.label,
//label: '',

47
src/components/DesignForm/public/expand/cascader.vue

@ -0,0 +1,47 @@
<!--
@ 作者: 秦东
@ 时间: 2024-09-29 13:46:55
@ 备注: 级联器
-->
<script lang='ts' setup>
const props = withDefaults(
defineProps<{
modelValue?: string
disabled?: boolean
action?: string
name?: string
fileList?: Object
control?: Object
config?: Object
data?: Object
options?: Object
}>(),
{}
)
const emits = defineEmits<{
(e: 'update:modelValue', value: string): void
}>()
const value = computed({
get: () => {
console.log("图片上传处理-112->",props.modelValue)
return props.modelValue
},
set: (newVal: any) => {
emits('update:modelValue', newVal)
return newVal
},
});
const handleChange = () => {
}
</script>
<template>
<el-cascader
v-model="value"
:options="props.options"
@change="handleChange"
/>
</template>
<style lang='scss' scoped>
</style>

20
src/components/DesignForm/public/form/formItem.vue

@ -36,6 +36,7 @@ import UploadPage from '@/components/DesignForm/public/expand/uploadPage.vue'
import UploadPageList from '@/components/DesignForm/public/expand/uploadPageList.vue'
import OrgCitys from '@/components/DesignForm/public/expand/orgCitys.vue'
import DatePickerPage from '@/components/DesignForm/public/expand/datePicker.vue'
import CascaderPage from '@/components/DesignForm/public/expand/cascader.vue'
@ -202,6 +203,9 @@ const currentComponent = computed(() => {
// props.data.control.appendToBody =true
return markRaw(DatePickerPage)
}
if(props.data.type === 'cascader'){
return markRaw(CascaderPage)
}
if (props.data.type === 'switch') {
if(typeof props.data.control.activeValue === "number"){
props.data.control.activeValue=props.data.control.activeValue.toString()
@ -1133,12 +1137,24 @@ const uploadPic = (val:any) => {
:options="options"
v-model="value"
/>
{{data}}
<component
v-if="['cascader', 'treeSelect'].includes(data.type)"
v-if="['cascader'].includes(data.type)"
:is="currentComponent"
v-bind="control"
:data="data"
:control="control"
:config="config"
:disabled="judgeIsDisabled(data.name)"
:options="options"
v-model="value"
/>
<component
v-if="['treeSelect'].includes(data.type)"
:is="currentComponent"
v-bind="control"
:disabled="judgeIsDisabled(data.name)"
:options="options"
v-model="value"

27
src/views/sysworkflow/lowcodepage/appPage/appPageForm/pageForm.vue

@ -105,7 +105,15 @@ const route: any = useRoute().query || {}
const versionCont = ref<customerFormVersionCont[]>([]) //
const tableKey = ref("")
const versionId = ref<string>("") //
const store = useDesignFormStore()
// const store = useDesignFormStore()
const store = useDesignFormStore() as any
const controlData = computed(() => {
// console.log("----------------->",props.formInfo)
// console.log("--------1--------->",store.controlAttr)
// console.log("---------3-------->",controlData.value.customRules)
return store.controlAttr
})
const drawer = reactive<DrawerStruct>({
visible: false,
type: '',
@ -545,7 +553,7 @@ function optionsValue3Get3(data: any,fieldName: string){
}
}
//
// 3174.15 2924.57 3326.15 3119.33
const dialogConfirm = (editVal: string) => {
// jsonstate.formData
console.log("生成脚本预览和导入",editVal)
@ -554,6 +562,7 @@ const dialogConfirm = (editVal: string) => {
try {
if (typeof drawer.callback === 'function') {
console.log("1======2========>",drawer.codeType,stringToObj(editVal))
// callback
const newObj =
drawer.codeType === 'json'? string2json(editVal): stringToObj(editVal)
@ -601,13 +610,15 @@ const dialogConfirm = (editVal: string) => {
@ 功能: 级联选择与树
*/
const dialogConfirmTree = (val:treeStruct[]) => {
console.log("级联选择与树",val)
const newObj =
drawer.codeType === 'json'? string2json(val): stringToObj(val)
drawer.callback(newObj)
console.log("级联选择与树--->",state.value.formData)
// console.log("",val)
// const newObj =
// drawer.codeType === 'json'? string2json(val): stringToObj(val)
// drawer.callback(newObj)
controlData.value.options = val
// console.log("--->",controlData)
}
</script>
<template>
<el-aside class="asideBox leftBox">

Loading…
Cancel
Save