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