vue elementUI Plus实现拖拽流程图，不引入插件，纯手写实现。

1.设计思路：

左侧button列表是要拖拽的组件。中间是拖拽后的流程图。右侧是拖拽后的数据列表。

我们拖动左侧组件放入中间的流程图中，并把button携带的数据信息带过来。

2.设计细节

左侧button组件列表可拖动并携带信息,当拖动到中间流程图上方时，流程图网格变色。当鼠标释放后，数据传递，流程图变化。

拖拽事件流程和参数
‌dragstart‌：当元素开始被拖拽时触发。
‌drag‌：元素正在被拖拽时持续触发（某些浏览器支持）。
‌dragend‌：当拖拽结束时触发。
‌dragenter‌：当拖拽的元素进入目标元素时触发。
‌dragover‌：当拖拽的元素在目标元素上移动时持续触发。
‌dragleave‌：当拖拽的元素离开目标元素时触发。
‌drop‌：当拖拽的元素在目标元素上释放时触发。

3.详细代码实现

<template><div class="scriptDraweAdd"><drawer-Box:drawerVisible="drawer.visible":drawerFooter="drawer.drawerFooter":direction="drawer.direction":drawerSize="drawer.drawerSize":drawerTitle="drawer.drawerTitle"@handleDrawerOpened="handleDrawerOpened"@handleDrawerClose="handleDrawerClose"@handleDrawerSubmit="handleDrawerSubmit"><div class="main h100"><el-form ref="addFormRef" :model="editFrom" size="small" status-icon class="h100" label-width="auto"><el-row :gutter="0"><el-col><el-row :gutter="10"><el-col :span="4" class="mb20 setting-title"><span>General settings</span></el-col><el-col :span="10" class="mb20"><el-form-item prop="projectName" :rules="rules.projectName"><template v-slot:label><span>Project Name </span><el-tooltip effect="dark" content="Project Name" placement="top"><i><svg-icon icon-class="icon_ notes_info" class-name="iconfont font14" /></i></el-tooltip></template><el-input v-model="editFrom.projectName" placeholder="Project Name" clearable></el-input></el-form-item></el-col><el-col :span="10" class="mb20"><el-form-item prop="version" :rules="rules.version"><template v-slot:label><span>Version </span><el-tooltip effect="dark" content="Software Version" placement="top"><i><svg-icon icon-class="icon_ notes_info" class-name="iconfont font14" /></i></el-tooltip></template><el-input v-model="editFrom.version" placeholder="Software Version" clearable></el-input></el-form-item></el-col></el-row></el-col><el-col><el-row :gutter="10"><el-col :span="4" class="mb20"><span></span></el-col><!-- <el-col :span="10" class="mb20"><el-form-item prop="softwareName" :rules="rules.softwareName"><template v-slot:label><span>Software Name </span><el-tooltip effect="dark" content="Software Name" placement="top"><i><svg-icon icon-class="icon_ notes_info" class-name="iconfont font14" /></i></el-tooltip></template><el-input v-model="editFrom.softwareName" placeholder="Software Name" clearable></el-input></el-form-item></el-col> --><el-col :span="10" class="mb20"><el-form-item prop="function" :rules="rules.function"><template v-slot:label><span>Function </span><el-tooltip effect="dark" content="Function of the script" placement="top"><i><svg-icon icon-class="icon_ notes_info" class-name="iconfont font14" /></i></el-tooltip></template><el-select v-model="editFrom.function" placeholder="Function"><el-option v-for="item in functionOptions" :key="item.value" :label="item.label" :value="item.value" /></el-select></el-form-item></el-col></el-row></el-col><el-col><el-row :gutter="10"><el-col :span="4" class="mb20 setting-title"><span>Advanced settings</span></el-col><el-col :span="10" class="mb20"><el-form-item label="" prop="maxRunTime" :rules="rules.maxRunTime"><template v-slot:label><span>Max Run Time </span><el-tooltip effect="dark" content="The max run time of the script" placement="top"><i><svg-icon icon-class="icon_ notes_info" class-name="iconfont font14" /></i></el-tooltip></template><el-input-number type="number" v-model="editFrom.maxRunTime" :min="0" :max="1000" placeholder="Max Run Time" style="width: 100%" /></el-form-item></el-col><el-col :span="10" class="mb20"><el-form-item prop="startStopService" :rules="rules.startStopService"><template v-slot:label><span>Start Stop Service </span><el-tooltip effect="dark" content="Service(s) needed to be pause during software installation, separate with commas." placement="top"><i><svg-icon icon-class="icon_ notes_info" class-name="iconfont font14" /></i></el-tooltip></template><el-input v-model="editFrom.startStopService" placeholder="Start Stop Service" clearable></el-input></el-form-item></el-col></el-row></el-col><el-col><el-row :gutter="10"><el-col :span="4" class="mb20"><span></span></el-col><el-col :span="10" class="mb20"><el-form-item prop="debugEnable" :rules="rules.debugEnable"><template v-slot:label><span>Debug Enable </span><el-tooltip effect="dark" content="Used to enable logging." placement="top"><i><svg-icon icon-class="icon_ notes_info" class-name="iconfont font14" /></i></el-tooltip></template><el-switch v-model="editFrom.debugEnable" :active-value="true" :inactive-value="false" /></el-form-item></el-col><el-col :span="10" class="mb20"><el-form-item prop="defaultMsicLine" :rules="rules.defaultMsicLine"><template v-slot:label><span>Default MSIC Line </span><el-tooltip effect="dark" content="Default MSI commands, used for each MSI installer." placement="top"><i><svg-icon icon-class="icon_ notes_info" class-name="iconfont font14" /></i></el-tooltip></template><el-input v-model="editFrom.defaultMsicLine" placeholder="Default MSIC Line" clearable></el-input></el-form-item></el-col></el-row></el-col><el-col><el-row :gutter="10"><el-col :span="4" class="mb20"><span></span></el-col><el-col :span="10" class="mb20"><el-form-item prop="uDriveMap" :rules="rules.uDriveMap"><template v-slot:label><span>U-Drive Map </span><el-tooltip effect="dark" content="If the software stored on U-Drive." placement="top"><i><svg-icon icon-class="icon_ notes_info" class-name="iconfont font14" /></i></el-tooltip></template><el-switch v-model="editFrom.uDriveMap" :active-value="true" :inactive-value="false" /></el-form-item></el-col><el-col :span="10" class="mb20"><el-form-item label="IFS Script" prop="ifsScript" :rules="rules.ifsScript"><template v-slot:label><span>IFS Script </span><el-tooltip effect="dark" content="If you need to run the script on your local computer." placement="top"><i><svg-icon icon-class="icon_ notes_info" class-name="iconfont font14" /></i></el-tooltip></template><el-switch v-model="editFrom.ifsScript" :active-value="true" :inactive-value="false" /></el-form-item></el-col></el-row></el-col><el-col><el-row :gutter="10"><el-col :span="4" class="mb20"><span></span></el-col><!-- <el-col :span="10" class="mb20"><el-form-item prop="patchCommands"><template v-slot:label><span>Patch Commands </span><el-tooltip effect="dark" content="Used if need to install software to alternate folder." placement="top"><i><svg-icon icon-class="icon_ notes_info" class-name="iconfont font14" /></i></el-tooltip></template><el-input v-model="editFrom.patchCommands" placeholder="Patch Commands" disabled></el-input></el-form-item></el-col> --><el-col :span="10" class="mb20"><el-form-item label="Remarks" prop="remarks" :rules="rules.remarks"><el-input v-model="editFrom.remarks" clearable placeholder="Remarks" :rows="2" type="textarea" /></el-form-item></el-col></el-row></el-col><el-col><el-row :gutter="10" class="custom-row-height"><el-col :span="8" class="mb20"><div class="searchdiv"><div style="display: flex"><el-input style="margin-right: 10px" v-model="searchScriptName" placeholder="Script Name" @keyup.enter="getScriptList()" clearable></el-input><el-button @click="getScriptList()" type="primary"><i> <svg-icon icon-class="icon_screen" class-name="iconfont font14" /> </i></el-button></div><div class="paramslabel"><el-tooltip v-for="(item, index) in scriptList" :key="index" placement="top" raw-content :content="remarkHTML(item.remarks)"><el-button draggable="true" @dragstart="dragstart($event, item)" @dragend="dragend($event, item)" class="buttondiv" :title="item.scriptName" type="primary">{{item.scriptName}}</el-button></el-tooltip></div></div></el-col><el-col :span="9" class="mb20"><div class="flowdiv"><div class="flowlabel"><div><el-button class="buttondiv" type="primary">Start</el-button><div :class="['add-contain-div', overFlag.over0 ? 'add-contain-div-active' : '']" @dragover="dragOver($event, 'over0')" @drop="drop($event, 0)"><svg-icon icon-class="downward_vertical_line" class="addline" /><svg-icon icon-class="icon_add" class="addicon" /></div></div><div v-for="(item, index) in editFrom.scriptList" :key="index" style="padding-left: 60px"><!-- <el-button v-show="true" class="buttondiv2" type="primary">{{ item.gClientScriptId }}</el-button> --><el-input style="width: 180px" v-show="false" v-model="item.gClientScriptId" placeholder="gClientScriptId" readonly></el-input><el-tooltip placement="top" raw-content :content="remarkHTML(item.remarks)"><el-button class="buttondiv" type="primary">{{ item.scriptName }}</el-button></el-tooltip><el-button type="text" @click="deleteMethod(index)" class="deletebutton"><svg-icon icon-class="icon_delete2" class="deleteline" /></el-button><div style="padding-right: 60px" @dragover="dragOver($event, 'over' + (index + 1))" @drop="drop($event, index + 1)"><div :class="['add-contain-div', overFlag['over' + (index + 1)] ? 'add-contain-div-active' : '']"><svg-icon icon-class="downward_vertical_line" class="addline" /><svg-icon icon-class="icon_add" class="addicon" /></div></div></div><el-button class="buttondiv" type="primary">End</el-button></div></div></el-col><el-col :span="7" class="mb20" style="min-width:350px"><div v-for="(item2, index2) in editFrom.scriptList" :key="index2 + 'params'"><div class="paramsdiv"><div class="params-title-parent"><el-form-item><span style="margin-left: 10px; font-weight: bold">{{ item2.scriptName }}</span></el-form-item></div><div class="paramsdiv-content"><el-form-item label-width="auto" label="Order No."> <el-input style="width: 100%" v-model="item2.orderNum" placeholder="Order No." readonly></el-input></el-form-item><el-form-item label="CmdRCOpt" label-width="auto" :prop="`scriptList[${index2}].cmdRcopt`" :rules="[{ required: true, message: `Please input  CmdRCOpt`, trigger: 'change' }]"><el-select v-model="item2.cmdRcopt" placeholder="CmdRCOpt" disabled style="width: 100%"><el-option v-for="item3 in cmdRCOptOptions" :key="item3.value" :label="item3.label" :value="item3.value" /></el-select></el-form-item><div v-for="(item, index) in item2.paramslist" :key="index2 + '_' + index"><el-form-item v-show="false" label="Order No." label-width="140px"><el-input style="width: 100%" v-model="item.index" placeholder="Order No." readonly></el-input></el-form-item><div v-if="item.dataType === 'String'" class="paramsdiv-params"><el-form-item:prop="`scriptList[${index2}].paramslist[${index}].value`":rules="[{ required: true, message: `Please input  ${item.name}`, trigger: 'blur' }]"label-width="auto"><template v-slot:label><span>{{ item.name }}</span><el-tooltip effect="dark" :content="item.remarks" placement="top"><i> <svg-icon icon-class="icon_ notes_info" class-name="iconfont font14" />&nbsp;&nbsp; </i></el-tooltip><el-tag style="margin-right: 0px !important; margin-top: 3px !important" type="primary" class="mr12" effect="light" round>{{ item.dataType }}</el-tag></template><el-input style="width: 100%" v-model="item.value" :placeholder="item.name"></el-input></el-form-item></div><div v-if="item.dataType === 'Int'" class="paramsdiv-params"><el-form-item:prop="`scriptList[${index2}].paramslist[${index}].value`":rules="[{ required: true, message: `Please input  ${item.name}`, trigger: 'change' }]"label-width="auto"><template v-slot:label><span>{{ item.name }}</span><el-tooltip effect="dark" :content="item.remarks" placement="top"><i> <svg-icon icon-class="icon_ notes_info" class-name="iconfont font14" />&nbsp;&nbsp; </i></el-tooltip><el-tag style="margin-right: 0px !important; margin-top: 3px !important" type="primary" class="mr12" effect="light" round>{{ item.dataType }}</el-tag></template><!-- <el-input style="width: 100%" v-model="item.value" :placeholder="item.name"></el-input> --><el-input-number type="number" v-model="item.value" :placeholder="item.name" style="width: 100%" /></el-form-item></div><div v-if="item.dataType === 'Boolean'" class="paramsdiv-params"><el-form-item:prop="`scriptList[${index2}].paramslist[${index}].value`":rules="[{ required: true, message: `Please input  ${item.name}`, trigger: 'change' }]"label-width="auto"><template v-slot:label><span>{{ item.name }}</span><el-tooltip effect="dark" :content="item.remarks" placement="top"><i> <svg-icon icon-class="icon_ notes_info" class-name="iconfont font14" />&nbsp;&nbsp; </i></el-tooltip><el-tag style="margin-right: 0px !important; margin-top: 3px !important" type="primary" class="mr12" effect="light" round>{{ item.dataType }}</el-tag></template><el-switch v-model="item.value" :active-value="true" :inactive-value="false" :value="false" :disabled="index === 0" /></el-form-item></div><div v-if="item.dataType === 'File'" class="paramsdiv-params"><el-form-item:label="item.name":placeholder="item.name":prop="`scriptList[${index2}].paramslist[${index}].fileList`":rules="[{ required: true, message: `Please upload file`, validator: validator, trigger: 'change' }]"label-width="auto"><template v-slot:label><span>{{ item.name }}</span><el-tooltip effect="dark" :content="item.remarks" placement="top"><i> <svg-icon icon-class="icon_ notes_info" class-name="iconfont font14" />&nbsp;&nbsp; </i></el-tooltip><el-tag style="margin-right: 0px !important; margin-top: 3px !important" type="primary" class="mr12" effect="light" round>{{ item.dataType }}</el-tag></template><el-upload:disabled="item.isOriginalFile === 1":action="upload.action":headers="upload.headers":limit="upload.limit"multiplev-model:file-list="item.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 :disabled="item.fileList && item.fileList.length > 0" type="primary">Click to upload</el-button><template #tip><div class="el-upload__tip">.ps1, .txt files with a size less than 2M</div></template></el-upload></el-form-item><el-form-item v-show="false" label="File Name" label-width="140px"><el-input style="width: 80%" v-model="item.fileName" placeholder="File Name" readonly></el-input></el-form-item><el-form-item :prop="`scriptList[${index2}].paramslist[${index}].fileContent`" label-width="140px" style="margin-top: -20px"><el-inputv-show="false"type="textarea"readonlystyle="width: 100%"v-model="item.fileContent"placeholder="File 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('length>0'))}}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 lang="scss">
.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>