vue elementUI Plus实现拖拽流程图的详细代码(不引入插件)

<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" />   </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" />   </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" />   </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" />   </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"
                                multiple
                                v-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-input
                                v-show="false"
                                type="textarea"
                                readonly
                                style="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 = newArray
      state.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)
    }
    // 表单 Reset
    const resetForm = (formEl) => {
      if (!formEl) return
      formEl.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 = paramslist
          item.gClientScriptId = item.id
          let _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) > -1
        if (!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.fileSize
        if (!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.fileContent
          item.fileName = res.data.fileName
          item.value = res.data.fileName
          // ruleForm.systemScreenshot = res.data.filePath
          ElMessage({
            showClose: true,
            message: res.message,
            type: 'success'
          })
          break
        case 401:
          Session.clear()
          window.location.reload()
          break
        case 403:
          Session.clear()
          window.location.reload()
          break
        default:
          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, '
').replace(/\n/g, '
').replace(/\s/g, ' ');
      if (remark) {
        return remark.replace(/\n|\r\n/g, '
').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>