网站备案是否收费标准,中国建设银行下载官方网站,网站制作建设案例,发布做网站需求qq群vue elementUI Plus实现拖拽流程图#xff0c;不引入插件#xff0c;纯手写实现。 1.设计思路#xff1a;2.设计细节3.详细代码实现 1.设计思路#xff1a;
左侧button列表是要拖拽的组件。中间是拖拽后的流程图。右侧是拖拽后的数据列表。
我们拖动左侧组件放入中间的流… vue elementUI Plus实现拖拽流程图不引入插件纯手写实现。 1.设计思路2.设计细节3.详细代码实现 1.设计思路
左侧button列表是要拖拽的组件。中间是拖拽后的流程图。右侧是拖拽后的数据列表。
我们拖动左侧组件放入中间的流程图中并把button携带的数据信息带过来。 2.设计细节
左侧button组件列表可拖动并携带信息,当拖动到中间流程图上方时流程图网格变色。当鼠标释放后数据传递流程图变化。
拖拽事件流程和参数 dragstart当元素开始被拖拽时触发。 drag元素正在被拖拽时持续触发某些浏览器支持。 dragend当拖拽结束时触发。 dragenter当拖拽的元素进入目标元素时触发。 dragover当拖拽的元素在目标元素上移动时持续触发。 dragleave当拖拽的元素离开目标元素时触发。 drop当拖拽的元素在目标元素上释放时触发。 3.详细代码实现
templatediv classscriptDraweAdddrawer-Box:drawerVisibledrawer.visible:drawerFooterdrawer.drawerFooter:directiondrawer.direction:drawerSizedrawer.drawerSize:drawerTitledrawer.drawerTitlehandleDrawerOpenedhandleDrawerOpenedhandleDrawerClosehandleDrawerClosehandleDrawerSubmithandleDrawerSubmitdiv classmain h100el-form refaddFormRef :modeleditFrom sizesmall status-icon classh100 label-widthautoel-row :gutter0el-colel-row :gutter10el-col :span4 classmb20 setting-titlespanGeneral settings/span/el-colel-col :span10 classmb20el-form-item propprojectName :rulesrules.projectNametemplate v-slot:labelspanProject Name /spanel-tooltip effectdark contentProject Name placementtopisvg-icon icon-classicon_ notes_info class-nameiconfont font14 //i/el-tooltip/templateel-input v-modeleditFrom.projectName placeholderProject Name clearable/el-input/el-form-item/el-colel-col :span10 classmb20el-form-item propversion :rulesrules.versiontemplate v-slot:labelspanVersion /spanel-tooltip effectdark contentSoftware Version placementtopisvg-icon icon-classicon_ notes_info class-nameiconfont font14 //i/el-tooltip/templateel-input v-modeleditFrom.version placeholderSoftware Version clearable/el-input/el-form-item/el-col/el-row/el-colel-colel-row :gutter10el-col :span4 classmb20span/span/el-col!-- el-col :span10 classmb20el-form-item propsoftwareName :rulesrules.softwareNametemplate v-slot:labelspanSoftware Name /spanel-tooltip effectdark contentSoftware Name placementtopisvg-icon icon-classicon_ notes_info class-nameiconfont font14 //i/el-tooltip/templateel-input v-modeleditFrom.softwareName placeholderSoftware Name clearable/el-input/el-form-item/el-col --el-col :span10 classmb20el-form-item propfunction :rulesrules.functiontemplate v-slot:labelspanFunction /spanel-tooltip effectdark contentFunction of the script placementtopisvg-icon icon-classicon_ notes_info class-nameiconfont font14 //i/el-tooltip/templateel-select v-modeleditFrom.function placeholderFunctionel-option v-foritem in functionOptions :keyitem.value :labelitem.label :valueitem.value //el-select/el-form-item/el-col/el-row/el-colel-colel-row :gutter10el-col :span4 classmb20 setting-titlespanAdvanced settings/span/el-colel-col :span10 classmb20el-form-item label propmaxRunTime :rulesrules.maxRunTimetemplate v-slot:labelspanMax Run Time /spanel-tooltip effectdark contentThe max run time of the script placementtopisvg-icon icon-classicon_ notes_info class-nameiconfont font14 //i/el-tooltip/templateel-input-number typenumber v-modeleditFrom.maxRunTime :min0 :max1000 placeholderMax Run Time stylewidth: 100% //el-form-item/el-colel-col :span10 classmb20el-form-item propstartStopService :rulesrules.startStopServicetemplate v-slot:labelspanStart Stop Service /spanel-tooltip effectdark contentService(s) needed to be pause during software installation, separate with commas. placementtopisvg-icon icon-classicon_ notes_info class-nameiconfont font14 //i/el-tooltip/templateel-input v-modeleditFrom.startStopService placeholderStart Stop Service clearable/el-input/el-form-item/el-col/el-row/el-colel-colel-row :gutter10el-col :span4 classmb20span/span/el-colel-col :span10 classmb20el-form-item propdebugEnable :rulesrules.debugEnabletemplate v-slot:labelspanDebug Enable /spanel-tooltip effectdark contentUsed to enable logging. placementtopisvg-icon icon-classicon_ notes_info class-nameiconfont font14 //i/el-tooltip/templateel-switch v-modeleditFrom.debugEnable :active-valuetrue :inactive-valuefalse //el-form-item/el-colel-col :span10 classmb20el-form-item propdefaultMsicLine :rulesrules.defaultMsicLinetemplate v-slot:labelspanDefault MSIC Line /spanel-tooltip effectdark contentDefault MSI commands, used for each MSI installer. placementtopisvg-icon icon-classicon_ notes_info class-nameiconfont font14 //i/el-tooltip/templateel-input v-modeleditFrom.defaultMsicLine placeholderDefault MSIC Line clearable/el-input/el-form-item/el-col/el-row/el-colel-colel-row :gutter10el-col :span4 classmb20span/span/el-colel-col :span10 classmb20el-form-item propuDriveMap :rulesrules.uDriveMaptemplate v-slot:labelspanU-Drive Map /spanel-tooltip effectdark contentIf the software stored on U-Drive. placementtopisvg-icon icon-classicon_ notes_info class-nameiconfont font14 //i/el-tooltip/templateel-switch v-modeleditFrom.uDriveMap :active-valuetrue :inactive-valuefalse //el-form-item/el-colel-col :span10 classmb20el-form-item labelIFS Script propifsScript :rulesrules.ifsScripttemplate v-slot:labelspanIFS Script /spanel-tooltip effectdark contentIf you need to run the script on your local computer. placementtopisvg-icon icon-classicon_ notes_info class-nameiconfont font14 //i/el-tooltip/templateel-switch v-modeleditFrom.ifsScript :active-valuetrue :inactive-valuefalse //el-form-item/el-col/el-row/el-colel-colel-row :gutter10el-col :span4 classmb20span/span/el-col!-- el-col :span10 classmb20el-form-item proppatchCommandstemplate v-slot:labelspanPatch Commands /spanel-tooltip effectdark contentUsed if need to install software to alternate folder. placementtopisvg-icon icon-classicon_ notes_info class-nameiconfont font14 //i/el-tooltip/templateel-input v-modeleditFrom.patchCommands placeholderPatch Commands disabled/el-input/el-form-item/el-col --el-col :span10 classmb20el-form-item labelRemarks propremarks :rulesrules.remarksel-input v-modeleditFrom.remarks clearable placeholderRemarks :rows2 typetextarea //el-form-item/el-col/el-row/el-colel-colel-row :gutter10 classcustom-row-heightel-col :span8 classmb20div classsearchdivdiv styledisplay: flexel-input stylemargin-right: 10px v-modelsearchScriptName placeholderScript Name keyup.entergetScriptList() clearable/el-inputel-button clickgetScriptList() typeprimaryi svg-icon icon-classicon_screen class-nameiconfont font14 / /i/el-button/divdiv classparamslabelel-tooltip v-for(item, index) in scriptList :keyindex placementtop raw-content :contentremarkHTML(item.remarks)el-button draggabletrue dragstartdragstart($event, item) dragenddragend($event, item) classbuttondiv :titleitem.scriptName typeprimary{{item.scriptName}}/el-button/el-tooltip/div/div/el-colel-col :span9 classmb20div classflowdivdiv classflowlabeldivel-button classbuttondiv typeprimaryStart/el-buttondiv :class[add-contain-div, overFlag.over0 ? add-contain-div-active : ] dragoverdragOver($event, over0) dropdrop($event, 0)svg-icon icon-classdownward_vertical_line classaddline /svg-icon icon-classicon_add classaddicon //div/divdiv v-for(item, index) in editFrom.scriptList :keyindex stylepadding-left: 60px!-- el-button v-showtrue classbuttondiv2 typeprimary{{ item.gClientScriptId }}/el-button --el-input stylewidth: 180px v-showfalse v-modelitem.gClientScriptId placeholdergClientScriptId readonly/el-inputel-tooltip placementtop raw-content :contentremarkHTML(item.remarks)el-button classbuttondiv typeprimary{{ item.scriptName }}/el-button/el-tooltipel-button typetext clickdeleteMethod(index) classdeletebuttonsvg-icon icon-classicon_delete2 classdeleteline //el-buttondiv stylepadding-right: 60px dragoverdragOver($event, over (index 1)) dropdrop($event, index 1)div :class[add-contain-div, overFlag[over (index 1)] ? add-contain-div-active : ]svg-icon icon-classdownward_vertical_line classaddline /svg-icon icon-classicon_add classaddicon //div/div/divel-button classbuttondiv typeprimaryEnd/el-button/div/div/el-colel-col :span7 classmb20 stylemin-width:350pxdiv v-for(item2, index2) in editFrom.scriptList :keyindex2 paramsdiv classparamsdivdiv classparams-title-parentel-form-itemspan stylemargin-left: 10px; font-weight: bold{{ item2.scriptName }}/span/el-form-item/divdiv classparamsdiv-contentel-form-item label-widthauto labelOrder No. el-input stylewidth: 100% v-modelitem2.orderNum placeholderOrder No. readonly/el-input/el-form-itemel-form-item labelCmdRCOpt label-widthauto :propscriptList[${index2}].cmdRcopt :rules[{ required: true, message: Please input CmdRCOpt, trigger: change }]el-select v-modelitem2.cmdRcopt placeholderCmdRCOpt disabled stylewidth: 100%el-option v-foritem3 in cmdRCOptOptions :keyitem3.value :labelitem3.label :valueitem3.value //el-select/el-form-itemdiv v-for(item, index) in item2.paramslist :keyindex2 _ indexel-form-item v-showfalse labelOrder No. label-width140pxel-input stylewidth: 100% v-modelitem.index placeholderOrder No. readonly/el-input/el-form-itemdiv v-ifitem.dataType String classparamsdiv-paramsel-form-item:propscriptList[${index2}].paramslist[${index}].value:rules[{ required: true, message: Please input ${item.name}, trigger: blur }]label-widthautotemplate v-slot:labelspan{{ item.name }}/spanel-tooltip effectdark :contentitem.remarks placementtopi svg-icon icon-classicon_ notes_info class-nameiconfont font14 /nbsp;nbsp; /i/el-tooltipel-tag stylemargin-right: 0px !important; margin-top: 3px !important typeprimary classmr12 effectlight round{{ item.dataType }}/el-tag/templateel-input stylewidth: 100% v-modelitem.value :placeholderitem.name/el-input/el-form-item/divdiv v-ifitem.dataType Int classparamsdiv-paramsel-form-item:propscriptList[${index2}].paramslist[${index}].value:rules[{ required: true, message: Please input ${item.name}, trigger: change }]label-widthautotemplate v-slot:labelspan{{ item.name }}/spanel-tooltip effectdark :contentitem.remarks placementtopi svg-icon icon-classicon_ notes_info class-nameiconfont font14 /nbsp;nbsp; /i/el-tooltipel-tag stylemargin-right: 0px !important; margin-top: 3px !important typeprimary classmr12 effectlight round{{ item.dataType }}/el-tag/template!-- el-input stylewidth: 100% v-modelitem.value :placeholderitem.name/el-input --el-input-number typenumber v-modelitem.value :placeholderitem.name stylewidth: 100% //el-form-item/divdiv v-ifitem.dataType Boolean classparamsdiv-paramsel-form-item:propscriptList[${index2}].paramslist[${index}].value:rules[{ required: true, message: Please input ${item.name}, trigger: change }]label-widthautotemplate v-slot:labelspan{{ item.name }}/spanel-tooltip effectdark :contentitem.remarks placementtopi svg-icon icon-classicon_ notes_info class-nameiconfont font14 /nbsp;nbsp; /i/el-tooltipel-tag stylemargin-right: 0px !important; margin-top: 3px !important typeprimary classmr12 effectlight round{{ item.dataType }}/el-tag/templateel-switch v-modelitem.value :active-valuetrue :inactive-valuefalse :valuefalse :disabledindex 0 //el-form-item/divdiv v-ifitem.dataType File classparamsdiv-paramsel-form-item:labelitem.name:placeholderitem.name:propscriptList[${index2}].paramslist[${index}].fileList:rules[{ required: true, message: Please upload file, validator: validator, trigger: change }]label-widthautotemplate v-slot:labelspan{{ item.name }}/spanel-tooltip effectdark :contentitem.remarks placementtopi svg-icon icon-classicon_ notes_info class-nameiconfont font14 /nbsp;nbsp; /i/el-tooltipel-tag stylemargin-right: 0px !important; margin-top: 3px !important typeprimary classmr12 effectlight round{{ item.dataType }}/el-tag/templateel-upload:disableditem.isOriginalFile 1:actionupload.action:headersupload.headers:limitupload.limitmultiplev-model:file-listitem.fileList:on-success(res) handleUploadSuccess(res, item, index):on-remove(uploadFile, uploadFiles) handleRemove(uploadFile, uploadFiles, item, index):before-upload(file) beforeAvatarUpload(file, item, index):on-exceed(uploadFile, uploadFiles) handleExceed(uploadFile, uploadFiles, item, index):on-preview(uploadFile) handlePreview(uploadFile, item, index)el-button :disableditem.fileList item.fileList.length 0 typeprimaryClick to upload/el-buttontemplate #tipdiv classel-upload__tip.ps1, .txt files with a size less than 2M/div/template/el-upload/el-form-itemel-form-item v-showfalse labelFile Name label-width140pxel-input stylewidth: 80% v-modelitem.fileName placeholderFile Name readonly/el-input/el-form-itemel-form-item :propscriptList[${index2}].paramslist[${index}].fileContent label-width140px stylemargin-top: -20pxel-inputv-showfalsetypetextareareadonlystylewidth: 100%v-modelitem.fileContentplaceholderFile Content:autosize{ minRows: 3, maxRows: 10000 }/el-input/el-form-item/div/div/div/div/div/el-col/el-row/el-col/el-row/el-form/div/drawer-Box/div
/template
script
import { toRefs, reactive, onMounted, ref } from vue
import { ElMessage } from element-plus
import DrawerBox from ../drawer/index
import gClientApi from /api/gClientApi
import gClientManagementApi from /api/gClientManagementApi
import { removeProperty } from /utils/validate
import { Session } from /utils/storage
export default {name: GclientScriptMenagement,emits: [handleSearch, handleClose, downScriptFile],components: {DrawerBox// vxeTable},props: {drawer: {type: Object,default: () {return {}}},GclientScriptMenagement: {type: Object,default: () {return {}}}},setup(props, ctx) {// 列表数组 接口返回的数据const vxeData reactive({tableList: []})const addFormRef ref(null)// 复选框数组const vxeList reactive({checkList: []})const useTableHeader reactive({})const state reactive({upload: {action: process.env.VUE_APP_API_URL /portal/v1/GClientScript/scriptUpload,headers: {Authorization: Session.get(token)},accept: .ps1, .txt,fileSize: 2,limit: 1},functionOptions: [{ lable: Install, value: Install },{ lable: Uninstall, value: Uninstall }],typeOptions: [{ label: String, value: String },{ label: Int, value: Int },{ label: Boolean, value: Boolean },{ label: File, value: File }],cmdRCOptOptions: [{ label: Continue running, value: 0 },{ label: Command failed,stop running, value: 1 },{ label: Command failed,continue running, value: 2 }],editFrom: {softwareName: ,version: ,projectName: ,// applicationName: ,patchCommands: ,maxRunTime: 90,startStopService: ,debugEnable: true,defaultMsicLine: ,uDriveMap: false,function: Install,ifsScript: false,remarks: ,scriptList: []},editFrom2: {softwareName: ,version: ,projectName: ,// applicationName: ,patchCommands: ,maxRunTime: 90,startStopService: ,debugEnable: true,defaultMsicLine: ,uDriveMap: false,function: Install,ifsScript: false,remarks: ,scriptList: []},scriptList: [],rules: {softwareName: [{ required: true, message: Please input Software Name, trigger: blur }],version: [{ required: true, message: Please input Version, trigger: blur }],projectName: [{ required: true, message: Please input Project Name, trigger: blur }],// applicationName: [{ required: true, message: Please input Application Name, trigger: blur }],patchCommands: [{ required: true, message: Please input Patch Commands, trigger: blur }],maxRunTime: [{ required: true, message: Please input Max Run Time, trigger: blur }],startStopService: [{ required: true, message: Please input Start Stop Service, trigger: blur }],debugEnable: [{ required: true, message: Please input Debug Enable, trigger: blur }],defaultMsicLine: [{ required: true, message: Please input Default MSIC Line, trigger: blur }],uDriveMap: [{ required: true, message: Please input U-Drive Map, trigger: blur }],function: [{ required: true, message: Please input Function, trigger: blur }],ifsScript: [{ required: true, message: Please input IFS Script, trigger: blur }]},paramsIndex: 1,searchScriptName: ,overFlag: {}})const getParamsName (index) {return Param Name ${index 1}}const getParamsRules (name) {let msg Please input ${name}let tips [{ required: true, message: msg, trigger: blur }]return tips}const validator (rule, value, callback) {if (value value.length 0) {callback() // 表示验证通过} else {callback(new Error(length0))}}const deleteMethod (index) {const newArray state.editFrom.scriptList.filter((element, index2) index2 ! index)state.editFrom.scriptList newArraystate.editFrom.scriptList.forEach((val, index) {val.orderNum index 1})}const SubmitList (checkData) {vxeList.checkList checkData}// 数据提交const handleDrawerSubmit async () {addFormRef.value.validate(async (valid) {if (valid) {const data { ...state.editFrom }console.log(data)const res await gClientManagementApi.add(data)if (res.code 200) {resetForm(addFormRef.value)handleDrawerClose()ctx.emit(handleSearch)ElMessage({showClose: true,message: res.message,type: success})} else {ElMessage({showClose: true,message: res.message,type: error})}} else {console.log(error submit!)return false}})}// Drawer 打开时触发const handleDrawerOpened () {getScriptList()}// Drawer 关闭const handleDrawerClose () {state.editFrom JSON.parse(JSON.stringify(state.editFrom2))ctx.emit(handleClose, Add)}const dragstart (event, item) {// console.log(event, item)// 使用 dataTransfer 对象传递JSON数据作为文本event.dataTransfer.setData(text/plain, JSON.stringify(item))}const dragend (event, item) {state.overFlag {}}const dragOver (event, name) {// 阻止浏览器默认操作允许drop事件发生event.preventDefault()state.overFlag {}state.overFlag[name] true// console.log(state.overFlag)}const drop (event, index) {// 阻止浏览器默认操作event.preventDefault()// 获取传递的JSON数据const jsonData event.dataTransfer.getData(text/plain)// 解析JSON数据const data JSON.parse(jsonData)state.overFlag {}state.editFrom.scriptList.splice(index, 0, data)state.editFrom.scriptList JSON.parse(JSON.stringify(state.editFrom.scriptList))state.editFrom.scriptList.forEach((val, index) {val.orderNum index 1})console.log(get, state.editFrom.scriptList)}// 表单 Resetconst resetForm (formEl) {if (!formEl) returnformEl.resetFields()state.editFrom JSON.parse(JSON.stringify(state.editFrom2))}const handleBlur () {// console.log(1111, state.editFrom.scriptList)}const getScriptList async () {// console.log(columns.value)// console.log(exportColumns.value)// 条件检索const query removeProperty(JSON.parse(JSON.stringify({ scriptName: state.searchScriptName })))console.log(query)const res await gClientApi.getDownLoadData({ ...query })if (res.code 200) {const _arr res.data.map((item) {let paramslist []if (item.paramsNameList item.paramsNameList.length 0) {item.paramsNameList.map((element) {if (null ! element.value undefined ! element.value ! element.value) {paramslist.push({ ...element })} else {paramslist.push({ ...element, value: , fileList: [], fileName: , fileContent: })}})}item.paramslist paramslistitem.gClientScriptId item.idlet _item { ...item }return _item})state.scriptList JSON.parse(JSON.stringify(_arr))// ElMessage({// message: res.message,// type: success// })} else {ElMessage({message: res.message,type: error})}}// 上传图片验证const beforeAvatarUpload (file, item, index) {// 校检文件类型if (state.upload.accept) {// 文件后缀名let fileExtension if (file.name.lastIndexOf(.) -1) {fileExtension file.name.slice(file.name.lastIndexOf(.) 1)}const isTypeOk state.upload.accept.indexOf(fileExtension) -1if (!isTypeOk) {ElMessage({showClose: true,message: The file format is incorrect. Please upload the file in ${state.upload.accept} format!,type: error})return false}}// 校检文件大小if (state.upload.fileSize) {const isLt file.size / 1024 / 1024 state.upload.fileSizeif (!isLt) {ElMessage({showClose: true,message: The uploaded file size cannot exceed ${state.upload.fileSize} MB!,type: error})return false}}return true}// 文件个数超出const handleExceed (files, uploadFiles, item, index) {ElMessage({showClose: true,message: The number of uploaded files cannot exceed ${state.upload.limit} !,type: error})}// 文件上传成功时的钩子const handleUploadSuccess (res, item, index) {switch (res.code) {case 200:item.fileContent res.data.fileContentitem.fileName res.data.fileNameitem.value res.data.fileName// ruleForm.systemScreenshot res.data.filePathElMessage({showClose: true,message: res.message,type: success})breakcase 401:Session.clear()window.location.reload()breakcase 403:Session.clear()window.location.reload()breakdefault:ElMessage({showClose: true,message: res.message,type: error})}}// 文件列表移除文件时的钩子const handleRemove (uploadFile, uploadFiles, item, index) {item.fileList []item.fileContent item.fileName item.value }// 点击文件列表中已上传的文件时的钩子const handlePreview (uploadFile, item, index) {// ctx.emit(downScriptFile, item)}const handleChange (value, item) {console.log(value, item)}const fileChange (name, item) {addFormRef.value.validateField(name, (val) {if (!val) {return true} else {return false}})}const remarkHTML (remark) {// return remark.replace(/\r\n/g, br/).replace(/\n/g, br/).replace(/\s/g, );if (remark) {return remark.replace(/\n|\r\n/g, br/).replace(/ /g, )}return }onMounted(() {})return {...toRefs(state),...toRefs(vxeData),...toRefs(vxeList),...toRefs(useTableHeader),addFormRef,handleDrawerOpened,handleDrawerClose,handleDrawerSubmit,SubmitList,getParamsName,getParamsRules,deleteMethod,resetForm,getScriptList,dragstart,dragOver,drop,dragend,handleBlur,validator,beforeAvatarUpload,handleExceed,handleUploadSuccess,handleRemove,handleChange,handlePreview,fileChange,remarkHTML}}
}
/script
style langscss
.scriptDraweAdd {// .setting-title {// font-size: var(--el-form-label-font-size);// color: var(--el-text-color-regular);// height: 32px;// line-height: 32px;// padding: 0 12px 0 0;// box-sizing: border-box;// font-weight: bold;// }.drawer_title {font-weight: bold;margin-bottom: 16px;}.name-parent {display: flex;.title {font-weight: bold;width: 5px;height: 30px;margin-right: 5px;background-color: var(--color-primary) !important;}.blank {font-weight: bold;width: 5px;height: 30px;margin-right: 5px;}.label {flex: 1;}}.title {font-weight: bold;width: 5px;height: 30px;margin-right: 5px;background-color: var(--color-primary) !important;}.no-label .el-form-item__label {display: none;}.custom-row-height {/* 使用calc()函数从100vh中减去100px */// height: calc(100vh - 600px);min-height: 400px;.searchdiv {flex: 1;height: 100%;padding: 5px;border-radius: 4px;border: 1px solid #cccccc;box-sizing: border-box;.paramslabel {margin-top: 10px;display: flex; /* 启用Flexbox布局 */flex-direction: column; /* 子元素纵向排列 */justify-content: center; /* 子元素在父容器内水平居中纵向上的居中 */align-items: center; /* 子元素在父容器内水平居中横向上的居中 */.buttondiv {width: 60%;// min-width: 290px;max-width: 300px;height: 30px;margin: 7px;color: var(--color-primary) !important;background-color: #fff;border: 2px solid var(--color-primary);}}}.flowdiv {min-width: 500px;flex: 1;height: 100%;padding: 5px;border-radius: 4px;border: 1px solid #cccccc;box-sizing: border-box;.deletebutton {width: 48px;height: 32px;color: #606266 !important;.deleteline {width: 40px;height: 32px;color: #606266 !important;}}.flowlabel {margin-top: 10px;display: flex; /* 启用Flexbox布局 */flex-direction: column; /* 子元素纵向排列 */justify-content: center; /* 子元素在父容器内水平居中纵向上的居中 */align-items: center; /* 子元素在父容器内水平居中横向上的居中 */.add-contain-div {margin: -5px 5px -5px 5px;height: 60px;// background-color: var(--color-primary) !important;position: relative;.addline {position: absolute;width: 100%;height: 100%;color: #606266;}.addicon {position: absolute;width: 40%;height: 40%;color: #606266;margin-left: 130px;margin-top: 17px;}}.add-contain-div-active {border: 1px dashed var(--color-primary);}.buttondiv {width: 300px;height: 30px;margin: 5px;color: var(--color-primary) !important;background-color: #fff;border: 2px solid var(--color-primary);}.buttondiv2 {width: 250px;height: 30px;margin: 5px;color: var(--color-primary) !important;background-color: #fff;border: 2px solid var(--color-primary);:hover {border: 2px solid var(--el-color-primary);background-color: var(--el-color-primary) !important;color: #fff !important;}:active,:focus {background-color: var(--color-primary) !important;color: #fff !important;}}// .deletediv{// float:right;// right:0px;// width:auto;// }}}}.paramsdiv {min-width: 500px;flex: 1 1 0%;height: 100%;border-radius: 2px;border: 1px solid #cccccc;box-sizing: border-box;margin-left: 0px;padding-bottom: 25px;margin-bottom: 20px;margin-right: 0px;.paramsdiv-content {padding: 5px;.paramsdiv-params {margin-bottom: 30px;}}.params-title-parent {padding: 5px 5px 5px 5px;display: flex;justify-content: space-between;/* 如果需要可以添加以下样式以确保父 div 占据整个宽度 */width: 100%;border-bottom: 1px solid rgb(230, 230, 230);background-color: #fbfbfb;margin-bottom: 20px;.child {/* 你可以根据需要添加子 div 的样式 */}.left {/* 你可以在这里添加左边子 div 的特定样式 */}.right {/* 你可以在这里添加右边子 div 的特定样式 */}}}
}
/style
