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

修改数据

yjf_v3
超级管理员 2 years ago
parent
5115e1fe41
commit
8bd677beee
2 changed files with 2478 additions and 2476 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. 445
      src/components/DesignForm/formControlAttr.vue
  2. 95
      src/components/DesignForm/layoutPage/index.vue

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

@ -1,32 +1,32 @@
<!--
@ 作者: 秦东
@ 时间: 2023-08-28 08:31:58
@ 备注:
-->
<script lang='ts' setup>
import { reactive, computed, toRefs, ref, watch, inject } from 'vue'
import { getRequest } from '@/api/DesignForm'
import { useDesignFormStore } from '@/store/DesignForm/designForm'
import validate from './validate'
import { ElMessage } from 'element-plus'
import { formatNumber } from '@/api/DesignForm/utils'
import { PublicAtrr } from '@/api/DesignForm/types'
@ 作者: 秦东
@ 时间: 2023-08-28 08:31:58
@ 备注:
-->
<script lang='ts' setup>
import { reactive, computed, toRefs, ref, watch, inject } from 'vue'
import { getRequest } from '@/api/DesignForm'
import { useDesignFormStore } from '@/store/DesignForm/designForm'
import validate from './validate'
import { ElMessage } from 'element-plus'
import { formatNumber } from '@/api/DesignForm/utils'
import { PublicAtrr } from '@/api/DesignForm/types'
import { chineseToPinyin } from '@/api/DesignForm/requestapi'
import { chineseToPinyin } from '@/api/DesignForm/requestapi'
//数学计算公式编辑器
import MathFormula from '@/components/DesignForm/math/mathFormula.vue'
//数学计算公式编辑器
import MathFormula from '@/components/DesignForm/math/mathFormula.vue'
import { uploadUrl } from '@/api/DesignForm'
import { UploadFilled } from '@element-plus/icons-vue'
import { UploadFile, UploadFiles } from 'element-plus/es/components/upload/src/upload';
import { uploadUrl } from '@/api/DesignForm'
import { UploadFilled } from '@element-plus/icons-vue'
import { UploadFile, UploadFiles } from 'element-plus/es/components/upload/src/upload';
//样式布局
import LayoutPage from '@/components/DesignForm/layoutPage/index.vue'
//样式布局
import LayoutPage from '@/components/DesignForm/layoutPage/index.vue'
const props = withDefaults( //接收父级参数
const props = withDefaults( //接收父级参数
defineProps<{
formData: any
formList: any
@ -43,31 +43,31 @@ const props = withDefaults( //接收父级参数
return {}
}
}
)
const mathBoxShow = ref(false)
//注册自定义事件
const emits = defineEmits<{
)
const mathBoxShow = ref(false)
//注册自定义事件
const emits = defineEmits<{
(e: 'openDialog', data: any): void
(e: 'update:formOtherData', data: any): void
(e: 'videoMsgChange', data: VideoMsg): void
//(e: 'update:formData', data: any): void
//(e: 'update:formConfig', data: any): void
}>()
const { formConfig, formData } = toRefs(props)
const store = useDesignFormStore() as any
const controlData = computed(() => {
}>()
const { formConfig, formData } = toRefs(props)
const store = useDesignFormStore() as any
const controlData = computed(() => {
// console.log("注册自定义事件----------------->",store)
// console.log("注册自定义事件--------1--------->",store.controlAttr)
return store.controlAttr
})
//获取组件样式Demo
const controlDataStyls = computed(() => {
})
//获取组件样式Demo
const controlDataStyls = computed(() => {
return store.controlAttr.styles
})
})
const dataSourceOption = ref([])
const designType = inject('formDesignType')
const state = reactive({
const dataSourceOption = ref([])
const designType = inject('formDesignType')
const state = reactive({
dataSourceList: [],
customRulesList: [
...validate,
@ -111,9 +111,9 @@ const state = reactive({
msg:'请输入随机数位数'
}
]
})
})
const formAttr = computed(() => {
const formAttr = computed(() => {
const isSearch = state.isSearch
return [
{
@ -187,8 +187,8 @@ const formAttr = computed(() => {
hide: !isSearch
}*/
]
})
const attrList = computed(() => {
})
const attrList = computed(() => {
// console.log("controlData.value-1-->",controlData.value)
if (Object.keys(controlData.value).length) {
const {
@ -859,9 +859,9 @@ const attrList = computed(() => {
} else {
return []
}
})
})
watch(
watch(
() => store.activeKey,
(val: string) => {
if (val) {
@ -870,10 +870,10 @@ watch(
cssIsShouw(attrList)
}
}
)
)
const fileSignAry = reactive<any>([])
const controlChange = (obj: any, val: any) => {
const fileSignAry = reactive<any>([])
const controlChange = (obj: any, val: any) => {
// console.log("字段编辑--1--》",obj)
// console.log("字段编辑--2--》",obj.eventName)
// console.log("字段编辑--3--》",val)
@ -969,22 +969,22 @@ const controlChange = (obj: any, val: any) => {
const newVal = obj.isNum ? formatNumber(val) : val // 类型为数字时转整数
obj.path && getPropByPath(controlData.value, obj.path, newVal)
}
}
/**
* 获取非负整数随机数
* @param Min 最小整数
* @param Max 最大整数
* @returns 随机数
*/
const Rand = (Min: number, Max: number) => {
}
/**
* 获取非负整数随机数
* @param Min 最小整数
* @param Max 最大整数
* @returns 随机数
*/
const Rand = (Min: number, Max: number) => {
switch (Min) {
case 0: return Math.round(Math.random() * Max);
case 1: return Math.ceil(Math.random() * Max);
default: return Math.round(Math.random() * (Max - Min) + Min);
}
}
// 修改指定路径下的值
const getPropByPath = (obj: any, path: string, val: any) => {
}
// 修改指定路径下的值
const getPropByPath = (obj: any, path: string, val: any) => {
let tempObj = obj
const keyArr = path.split('.')
let i = 0
@ -1011,18 +1011,18 @@ const getPropByPath = (obj: any, path: string, val: any) => {
key: key,
value: value
}
}
// 属性设置相关结束
// 多选固定选项删除
const delSelectOption = (index: number, type?: string) => {
}
// 属性设置相关结束
// 多选固定选项删除
const delSelectOption = (index: number, type?: string) => {
if (type === 'tabs') {
controlData.value.columns.splice(index, 1)
} else {
controlData.value.options.splice(index, 1)
}
}
// 多选固定选项增加
const addSelectOption = (type: any) => {
}
// 多选固定选项增加
const addSelectOption = (type: any) => {
if (controlData.value.type === 'cascader') {
// 级联时打开弹窗口
openAttrDialog('cascader')
@ -1041,9 +1041,9 @@ const addSelectOption = (type: any) => {
})
}
}
}
// 更多属性弹窗
const openAttrDialog = (type?: string, tooltip?: string) => {
}
// 更多属性弹窗
const openAttrDialog = (type?: string, tooltip?: string) => {
let editData = controlData.value.control
if (controlData.value.type === 'button') {
// 按钮组件编辑属性
@ -1094,9 +1094,9 @@ const openAttrDialog = (type?: string, tooltip?: string) => {
}
}
emits('openDialog', emitsParams)
}
// 必填校验
const requiredChange = (val: any) => {
}
// 必填校验
const requiredChange = (val: any) => {
if (!controlData.value.item?.rules) {
controlData.value.item.rules = []
}
@ -1109,9 +1109,9 @@ const requiredChange = (val: any) => {
} else {
controlData.value.item.rules.splice(0, 1)
}
}
// 添加校验规则
const addRules = (tooltip: string) => {
}
// 添加校验规则
const addRules = (tooltip: string) => {
if (!controlData.value.item?.rules) {
controlData.value.item.rules = []
}
@ -1124,9 +1124,9 @@ const addRules = (tooltip: string) => {
}
}
emits('openDialog', params)
}
// 根据不同类型判断是否显示当前属性
const showHide = (type: string[], show?: boolean) => {
}
// 根据不同类型判断是否显示当前属性
const showHide = (type: string[], show?: boolean) => {
// show=true 条件成立显示，false符合条件隐藏
if (
(type && type.length === 0) ||
@ -1136,9 +1136,9 @@ const showHide = (type: string[], show?: boolean) => {
}
const index = type.indexOf(controlData.value.type)
return show ? index !== -1 : index === -1
}
// 子表时添加序号和操作列
const tableColumnAdd = (val: string) => {
}
// 子表时添加序号和操作列
const tableColumnAdd = (val: string) => {
const item = {
name: 'index',
type: 'index',
@ -1153,14 +1153,14 @@ const tableColumnAdd = (val: string) => {
} else {
controlData.value.list.splice(0, 1)
}
}
// 校验规则必填勾选设置，存在校验规则时勾选
const checkboxRequired = computed(() => {
}
// 校验规则必填勾选设置，存在校验规则时勾选
const checkboxRequired = computed(() => {
const val = controlData.value && controlData.value.item?.rules
return val && val.length > 0
})
// 快速添加一条校验规则
const addRulesFast = () => {
})
// 快速添加一条校验规则
const addRulesFast = () => {
if (!controlData.value.customRules) {
controlData.value.customRules = []
}
@ -1169,15 +1169,15 @@ const addRulesFast = () => {
message: '必填项',
trigger: 'blur'
})
}
// 删除一条校验规则
const delAddRules = (index: number) => {
}
// 删除一条校验规则
const delAddRules = (index: number) => {
controlData.value.customRules &&
controlData.value.customRules.splice(index, 1)
}
}
//添加一条编码规则
const addNumRules = () => {
//添加一条编码规则
const addNumRules = () => {
if (!controlData.value.config.customRules) {
controlData.value.config.customRules = []
}
@ -1185,30 +1185,30 @@ const addNumRules = () => {
type:'time',
rule:"YYYYMMDD"
})
}
//删除一条编码规则
const delNumRules = (index: number) => {
}
//删除一条编码规则
const delNumRules = (index: number) => {
controlData.value.config.customRules &&
controlData.value.config.customRules.splice(index, 1)
}
}
// 编辑表单样式
const editFormStyle = (tooltip: string) => {
// 编辑表单样式
const editFormStyle = (tooltip: string) => {
emits('openDialog', {
codeType: 'css',
direction: 'ltr',
type: 'css',
title: tooltip
})
}
const editFormDict = (tooltip: string) => {
}
const editFormDict = (tooltip: string) => {
emits('openDialog', {
type: 'dict',
direction: 'ltr',
codeType: 'json',
title: tooltip
})
}
}
// 根据选定数据源获取表单字段
const getFormFieldBySource = (id?: string) => {
if (state.isSearch) {
@ -1231,8 +1231,8 @@ const editFormDict = (tooltip: string) => {
// console.log(res)
})
}
}
const getDataSource = () => {
}
const getDataSource = () => {
// 获取数据源，表单设计才加载，搜索设置不需要
if (!state.isSearch) {
// getRequest('sourceList').then((res: any) => {
@ -1240,9 +1240,9 @@ const getDataSource = () => {
// //dataSourceOption.value.unshift({ name: '无', id: '' })
// })
}
}
// 表单属性修改
const formAttrChange = (obj: any, val?: any) => {
}
// 表单属性修改
const formAttrChange = (obj: any, val?: any) => {
// console.log("表单属性修改--->",obj,val,{ [obj.key]: obj.value })
if (obj.key === 'source') {
getFormFieldBySource(obj.value) // 改变了数据源了，重新请求数据
@ -1263,9 +1263,9 @@ const formAttrChange = (obj: any, val?: any) => {
} else {
formData.value[obj.key] = obj.value
}
}
// 返回选项配置提示
const getOptionPlaceholder = (type: number) => {
}
// 返回选项配置提示
const getOptionPlaceholder = (type: number) => {
switch (type) {
case 1:
return '数据源接口URL,可带参数'
@ -1273,15 +1273,15 @@ const getOptionPlaceholder = (type: number) => {
return '字典key，默认为字段标识'
}
return ''
}
// 快速添加校验规则改变时，填写默认的校验提示信息
const rulesSelectChange = (item: any, val: string) => {
}
// 快速添加校验规则改变时，填写默认的校验提示信息
const rulesSelectChange = (item: any, val: string) => {
const filter = validate.filter(item => item.type === val)
if (filter && filter.length) {
item.message = filter[0].message
}
}
const rulesSelectNumChange = (item: any, val: string) => {
}
const rulesSelectNumChange = (item: any, val: string) => {
// console.log("快速添加校验规则改变时",item,val)
const filter = state.numberRulesList.filter(item => item.type === val)
if (filter && filter.length) {
@ -1292,30 +1292,30 @@ const rulesSelectNumChange = (item: any, val: string) => {
item.rule = ""
}
}
}
// options动态选项数据源请求时
const optionsEvent = (type: string, tooltip?: string) => {
}
// options动态选项数据源请求时
const optionsEvent = (type: string, tooltip?: string) => {
openAttrDialog(type, tooltip)
}
const eventClick = (type: string, tooltip?: string) => {
}
const eventClick = (type: string, tooltip?: string) => {
emits('openDialog', { type: type, title: tooltip, direction: 'ltr' })
}
getDataSource()
defineExpose({ getFormFieldBySource })
//判断输入框是否可写
const isNotWrite = (val:any) =>{
}
getDataSource()
defineExpose({ getFormFieldBySource })
//判断输入框是否可写
const isNotWrite = (val:any) =>{
// console.log("判断输入框是否可写--->",val)
if(val.key === "name" && props.customerformid != ""){
return true
}
return false
}
}
const unitInfo = ref<any>()
const formListmap = ref<any>()
const subUnit = ref<any>()
//默认值处理
const digitPageSub = (val:any,envt:any) => {
const unitInfo = ref<any>()
const formListmap = ref<any>()
const subUnit = ref<any>()
//默认值处理
const digitPageSub = (val:any,envt:any) => {
// console.log("默认值处理--->",val.value,envt,props.formData)
// console.log("默认值处理-1-->",props.formList)
@ -1331,15 +1331,15 @@ const digitPageSub = (val:any,envt:any) => {
unitInfo.value = attrList.value
mathBoxShow.value = true
}
}
const openMathDialog = (val:any) => {
}
const openMathDialog = (val:any) => {
subUnit.value = val
formListmap.value = props.formList
unitInfo.value = attrList.value
mathBoxShow.value = true
}
//返回值处理
const updataDigit = (key:sring,val:any) => {
}
//返回值处理
const updataDigit = (key:sring,val:any) => {
// console.log("默认值处理-1-->",props.formList)
// console.log("默认值处理-2-->",props.formConfig)
@ -1364,29 +1364,29 @@ const updataDigit = (key:sring,val:any) => {
}
})
// console.log("默认值处理-5-->",props.formConfig)
}
}
//liwenxuan 20240108 vidioupload start
//liwenxuan 20240108 vidioupload start
import { VideoMsg } from '@/api/DesignForm/types'
import { genFileId } from 'element-plus'
import type { UploadInstance, UploadProps, UploadRawFile } from 'element-plus'
import { VideoMsg } from '@/api/DesignForm/types'
import { genFileId } from 'element-plus'
import type { UploadInstance, UploadProps, UploadRawFile } from 'element-plus'
//更改已上传的视频:el-upload中设置 limit 和 on-exceed 可以在选中时自动替换上一个文件。
const upload = ref<UploadInstance>()
//更改已上传的视频:el-upload中设置 limit 和 on-exceed 可以在选中时自动替换上一个文件。
const upload = ref<UploadInstance>()
const handleExceed: UploadProps['onExceed'] = (files) => {
const handleExceed: UploadProps['onExceed'] = (files) => {
upload.value!.clearFiles()
const file = files[0] as UploadRawFile
file.uid = genFileId()
upload.value!.handleStart(file)
}
//每个视频上传控件对应一个videoMsg[videoIndex]
const videoIndex = ref(0);
}
//每个视频上传控件对应一个videoMsg[videoIndex]
const videoIndex = ref(0);
//上传成功钩子
function videoUploadOk(response: any, uploadFile: UploadFile, uploadFiles: UploadFiles) {
//上传成功钩子
function videoUploadOk(response: any, uploadFile: UploadFile, uploadFiles: UploadFiles) {
const { control = {} } : { control: any } = controlData.value
control.videoMsg[videoIndex.value].url = response.data.url;
control.videoMsg[videoIndex.value].videoReady = true;
@ -1400,42 +1400,42 @@ function videoUploadOk(response: any, uploadFile: UploadFile, uploadFiles: Uploa
control.videoMsg[videoIndex.value].size = response.data.size;
control.videoMsg[videoIndex.value].tag = response.data.tag;
control.videoMsg[videoIndex.value].type = response.data.type;
}
}
//删除钩子 禁止删除
function beforeRemove(){
//删除钩子 禁止删除
function beforeRemove(){
return false;
}
}
//上传失败钩子
function videoUploadErr(error: Error, uploadFile: UploadFile, uploadFiles: UploadFiles){
//上传失败钩子
function videoUploadErr(error: Error, uploadFile: UploadFile, uploadFiles: UploadFiles){
alert("上传失败,请重试")
console.log("上传失败"+error);
}
}
//liwenxuan 20240108 vidioupload end
//liwenxuan 20240108 vidioupload end
//liwenxuan 20240111 carousel start
//liwenxuan 20240111 carousel start
import { Delete,Plus } from '@element-plus/icons-vue'
import { CarsuselConfig } from '@/api/DesignForm/types'
import errimg from '@/assets/404_images/untilUploadImg.png'
import { v4 as uuidv4 } from "uuid";
import { Delete,Plus } from '@element-plus/icons-vue'
import { CarsuselConfig } from '@/api/DesignForm/types'
import errimg from '@/assets/404_images/untilUploadImg.png'
import { v4 as uuidv4 } from "uuid";
//轮播图设置弹窗显示控制
const dialogTableVisible = ref(false)
//轮播图设置弹窗显示控制
const dialogTableVisible = ref(false)
//图片展示显示控制
const showImagePreview = ref(false)
//图片展示显示控制
const showImagePreview = ref(false)
//最近点击的上传按钮对应的imgId
let currentUploadImgid = "";
//最近点击的上传按钮对应的imgId
let currentUploadImgid = "";
//刚拖拽视频组件时,初始化imgid监听designForm.activeKey,变化时,如果controlData.value.type=='lowcodeCarsusel',就遍历轮播图数组把imgid=''的都生成uuid
watch(()=>store.activeKey, () => {
//刚拖拽视频组件时,初始化imgid监听designForm.activeKey,变化时,如果controlData.value.type=='lowcodeCarsusel',就遍历轮播图数组把imgid=''的都生成uuid
watch(()=>store.activeKey, () => {
if(controlData.value.type==='lowcodeCarsusel'){
const carsuselConfigData:CarsuselConfig[] = controlData.value.control.carsuselConfigArr
carsuselConfigData.forEach(element => {
@ -1447,9 +1447,9 @@ watch(()=>store.activeKey, () => {
}
});
}
})
//轮播图图片上传成功钩子
function carouselImgUploadSuccess(response: any, uploadFile: UploadFile, uploadFiles: UploadFiles){
})
//轮播图图片上传成功钩子
function carouselImgUploadSuccess(response: any, uploadFile: UploadFile, uploadFiles: UploadFiles){
const carsuselConfigData:CarsuselConfig[] = controlData.value.control.carsuselConfigArr
carsuselConfigData.forEach(element => {
if(element.imgId==currentUploadImgid){
@ -1458,10 +1458,10 @@ function carouselImgUploadSuccess(response: any, uploadFile: UploadFile, uploadF
}
});
}
}
//轮播图所有已上传的图片的url,点击略缩图展示大图用
const carouselImgUrlList = computed(() => {
//轮播图所有已上传的图片的url,点击略缩图展示大图用
const carouselImgUrlList = computed(() => {
const list:string[] = [];
const carsuselConfigData:CarsuselConfig[] = store.controlAttr.control.carsuselConfigArr
carsuselConfigData.forEach(element => {
@ -1470,10 +1470,10 @@ const carouselImgUrlList = computed(() => {
}
});
return list;
})
})
//轮播图设置table
function createRow(clickedRow:any){
//轮播图设置table
function createRow(clickedRow:any){
const newRow:CarsuselConfig = {
uploadFlag:false,
imgId:'',
@ -1486,9 +1486,9 @@ function createRow(clickedRow:any){
const nextSort:number = clickedRow.sort+1;
newRow.imgSort = nextSort;
controlData.value.control.carsuselConfigArr.push(newRow)
}
}
function deleteRow(clickedRow:any){
function deleteRow(clickedRow:any){
//alert('删除一行')
const carsuselConfigData:CarsuselConfig[] = controlData.value.control.carsuselConfigArr
for (var i = 0; i < carsuselConfigData.length; i++) {
@ -1497,57 +1497,57 @@ function deleteRow(clickedRow:any){
i--; // 如果不减，将漏掉一个元素
}
}
}
}
//关闭大图展示
const closePreview = () => {
//关闭大图展示
const closePreview = () => {
showImagePreview.value = false
}
}
//开启大图展示
const handlePreview = (index: number, row: any) => {
//开启大图展示
const handlePreview = (index: number, row: any) => {
showImagePreview.value = true
}
}
const changeCurrentUploadImgid = (clickedRow:any) => {
const changeCurrentUploadImgid = (clickedRow:any) => {
currentUploadImgid = clickedRow.imgId
}
}
const optionsCss = [
const optionsCss = [
{ label: '无样式', value: '' },
{ label: '每行两列', value: 'form-row-2' },
{ label: '每行三列', value: 'form-row-3' },
{ label: '每行四列', value: 'form-row-4' }
]
]
const layouytStyle = reactive<any>(controlData.value.styles)
watch(()=>layouytStyle,(val : any)=>{
const layouytStyle = reactive<any>(controlData.value.styles)
watch(()=>layouytStyle,(val : any)=>{
console.log("监听样式处理",val)
controlData.value.styles = val
// Object.assign(store.controlAttr.styles.divStyle, val)
},
{
},
{
deep: true
});
const setStylefield = ref<string>("divStyle")
//liwenxuan 20240111 carousel end
const activeFormName = ref("0")
/**
@ 作者: 秦东
@ 时间: 2024-03-01 08:16:45
@ 功能: 判断是否是组件
*/
const cssIsShouw = (val:any) => {
});
const setStylefield = ref<string>("divStyle")
//liwenxuan 20240111 carousel end
const activeFormName = ref("0")
/**
@ 作者: 秦东
@ 时间: 2024-03-01 08:16:45
@ 功能: 判断是否是组件
*/
const cssIsShouw = (val:any) => {
if(val.length && val.length > 0){
return true;
}
return false;
}
</script>
<template>
}
</script>
<template>
<div class="sidebar-tools">
<el-tabs v-model="state.tabsName">
<el-tab-pane label="字段配置" name="first">
@ -2032,7 +2032,7 @@ const cssIsShouw = (val:any) => {
</el-tooltip>
</el-button>
</div>
<el-divider content-position="left">组件布局</el-divider>
<el-divider content-position="left">高级属性</el-divider>
<LayoutPage v-if="cssIsShouw(attrList)" v-model:styles-val="controlDataStyls" :place="controlData.type" />
@ -2216,7 +2216,7 @@ const cssIsShouw = (val:any) => {
</el-radio-group>
</el-form-item>
<el-form-item label="是否隐藏星号" class="form_cont">
<el-switch v-model="formData.hideRequiredAsterisk" active-text="显示" inactive-text="隐藏" />
<el-switch v-model="formData.hideRequiredAsterisk" active-text="隐藏" inactive-text="显示" style="--el-switch-on-color: #ff4949; --el-switch-off-color: #13ce66" />
</el-form-item>
<el-form-item label="校验错误信息" class="form_cont">
<el-switch v-model="formData.showMessage" active-text="显示" inactive-text="隐藏" />
@ -2317,22 +2317,23 @@ const cssIsShouw = (val:any) => {
/>
<!-- 轮播图设置弹窗 liwenxuan 20240122 end -->
</template>
<style>
.form_cont{
</template>
<style>
.form_cont{
padding: 0 10px;
}
</style>
<style >
.sidebar-tools .el-tabs__content{
}
</style>
<style >
.sidebar-tools .el-tabs__content{
padding: 0;
}
.el-collapse-item__header {
}
.el-collapse-item__header {
padding-left: 10px;
background-color: rgb(229, 229, 229);
}
.el-collapse-item__header{
}
.el-collapse-item__header{
padding-left: 10px;
background-color: rgb(229, 229, 229);
}
</style>
}
</style>

95
src/components/DesignForm/layoutPage/index.vue
View File

@ -1,18 +1,18 @@
<!--
@ 作者: 秦东
@ 时间: 2024-02-29 14:18:54
@ 备注: 样式布局
-->
<script lang='ts' setup>
import DesignLayout from "@/components/DesignForm/designLayout/designLayoutPage.vue"
import BianXian from "@/components/DesignForm/designLayout/bianXian.vue"
import YuanJiao from "@/components/DesignForm/designLayout/yuanjao.vue"
import UnitBackGround from "@/components/DesignForm/designLayout/unitBackGround.vue"
import PageSize from "@/components/DesignForm/designLayout/pageSize.vue"
import PageSizeSmail from "@/components/DesignForm/designLayout/pageSizeSmail.vue"
import TextPage from "@/components/DesignForm/designLayout/textPage.vue"
@ 作者: 秦东
@ 时间: 2024-02-29 14:18:54
@ 备注: 样式布局
-->
<script lang='ts' setup>
import DesignLayout from "@/components/DesignForm/designLayout/designLayoutPage.vue"
import BianXian from "@/components/DesignForm/designLayout/bianXian.vue"
import YuanJiao from "@/components/DesignForm/designLayout/yuanjao.vue"
import UnitBackGround from "@/components/DesignForm/designLayout/unitBackGround.vue"
import PageSize from "@/components/DesignForm/designLayout/pageSize.vue"
import PageSizeSmail from "@/components/DesignForm/designLayout/pageSizeSmail.vue"
import TextPage from "@/components/DesignForm/designLayout/textPage.vue"
const props = defineProps({
const props = defineProps({
stylesVal:{
type:Object,
default(){
@ -23,15 +23,15 @@ const props = defineProps({
type:String,
default:""
}
});
const buttionShow = ref(false)
const unitIsShow = ref(true)
const labelIsShow = ref(true)
const inputUnitTitle = (val:string) => {
});
const buttionShow = ref(false)
const unitIsShow = ref(true)
const labelIsShow = ref(true)
const inputUnitTitle = (val:string) => {
console.log("inputUnitTitle",val);
switch (val) {
case "radio":
return "Radio布局"
return "输入设置"
break;
case "select":
unitIsShow.value = false;
@ -76,38 +76,38 @@ const inputUnitTitle = (val:string) => {
default:
unitIsShow.value = true;
labelIsShow.value = true;
return "Input布局"
return "输入设置"
break;
}
return "Input布局"
}
// const divStyle = reactive<any>({})
// watch(()=>divStyle,(val : any)=>{
// // console.log("格式布局-----1--->",val)
// props.stylesVal[props.place] = val
// // Object.assign(store.controlAttr.styles.divStyle, val)
// },
// {
// deep: true
// });
return "输入设置"
}
// const divStyle = reactive<any>({})
// watch(()=>divStyle,(val : any)=>{
// // console.log("格式布局-----1--->",val)
// props.stylesVal[props.place] = val
// // Object.assign(store.controlAttr.styles.divStyle, val)
// },
// {
// deep: true
// });
watch(()=>props.place,(val : any)=>{
watch(()=>props.place,(val : any)=>{
console.log("格式布局-----1--->",val)
inputUnitTitle(val);
// props.stylesVal[props.place] = val
// Object.assign(store.controlAttr.styles.divStyle, val)
},
{
},
{
deep: true
});
const activeName = ref('0')
</script>
<template>
});
const activeName = ref('0')
</script>
<template>
<div class="jhk_kjh">
当前组件类别======>{{props.place}}
<!-- 当前组件类别======>{{props.place}} -->
<el-collapse v-model="activeName" accordion>
<el-collapse-item title="边框布局" name="1">
<el-collapse-item title="边框设置" name="1">
<el-divider content-position="left">外框</el-divider>
<DesignLayout v-model:layouyt-style="props.stylesVal.divStyle" />
@ -125,7 +125,7 @@ const activeName = ref('0')
</el-collapse-item>
<el-collapse-item v-if="labelIsShow" title="Lable布局" name="2">
<el-collapse-item v-if="labelIsShow" title="标签设置" name="2">
<el-divider content-position="left">外框</el-divider>
<DesignLayout v-model:layouyt-style="props.stylesVal.labelStyle" />
<el-divider content-position="left">圆角</el-divider>
@ -154,7 +154,7 @@ const activeName = ref('0')
<TextPage v-model:layouyt-style="props.stylesVal.inputStyle" :place="'div'" />
</el-collapse-item>
<el-collapse-item v-if="buttionShow" title="按钮布局" name="2">
<el-collapse-item v-if="buttionShow" title="输入设置" name="2">
<el-divider content-position="left">尺寸</el-divider>
<PageSizeSmail v-model:layouyt-style="props.stylesVal.labelStyle" :place="'div'" />
<el-divider content-position="left">文本</el-divider>
@ -165,10 +165,11 @@ const activeName = ref('0')
</el-collapse>
</div>
</template>
<style >
.jhk_kjh .el-collapse-item__header{
</template>
<style >
.jhk_kjh .el-collapse-item__header{
padding-left: 10px;
background-color: rgb(229, 229, 229);
}
</style>
}
</style>
Write Preview
Loading…
Cancel
Save