|
|
@@ -0,0 +1,994 @@
|
|
|
+<template>
|
|
|
+ <div style="width: 100%;padding-top: 1%;display: flex;" :style="{'height':heightAll+'px'}">
|
|
|
+ <div style="width: 98%;margin-left: 1%;">
|
|
|
+ <div style="display: flex;width: 100%;align-items: center;margin-left: 0%;">
|
|
|
+ <div>
|
|
|
+ 组名称
|
|
|
+ </div>
|
|
|
+ <el-select
|
|
|
+ v-model="serzu"
|
|
|
+ class="noBorSel"
|
|
|
+ placeholder=""
|
|
|
+ style="width: 10%;margin-left: 1%;"
|
|
|
+ >
|
|
|
+ <el-option
|
|
|
+ v-for="item in optionsShuLei"
|
|
|
+ :key="item.value"
|
|
|
+ :label="item.label"
|
|
|
+ :value="item.value"
|
|
|
+ />
|
|
|
+ </el-select>
|
|
|
+ <div style="margin-left: 2%;">
|
|
|
+ 任务名称
|
|
|
+ </div>
|
|
|
+ <el-input size="mini" v-model="formTree.itemNo" style="width: 10%;margin-left: 1%;" placeholder="" />
|
|
|
+ <div style="margin-left: 2%;">
|
|
|
+ 执行器名称
|
|
|
+ </div>
|
|
|
+ <el-input size="mini" v-model="formTree.itemNo" style="width: 10%;margin-left: 1%;" placeholder="" />
|
|
|
+ <div style="margin-left: 2%;">
|
|
|
+ 状态
|
|
|
+ </div>
|
|
|
+ <el-select
|
|
|
+ v-model="serzu"
|
|
|
+ class="noBorSel"
|
|
|
+ placeholder=""
|
|
|
+ style="width: 10%;margin-left: 1%;"
|
|
|
+ >
|
|
|
+ <el-option
|
|
|
+ v-for="item in optionsShuLei"
|
|
|
+ :key="item.value"
|
|
|
+ :label="item.label"
|
|
|
+ :value="item.value"
|
|
|
+ />
|
|
|
+ </el-select>
|
|
|
+ <div style="margin-left: 2%;">
|
|
|
+ 负责人
|
|
|
+ </div>
|
|
|
+ <el-input size="mini" v-model="formTree.itemNo" style="width: 10%;margin-left: 1%;" placeholder="" />
|
|
|
+ <el-button type="" @click="showAdd" size="mini" style="margin-left:auto;" :icon="RefreshRight">重置 </el-button>
|
|
|
+ <el-button type="primary" @click="showAdd" size="mini" style="margin-left:1%;" :icon="Search">搜索 </el-button>
|
|
|
+ </div>
|
|
|
+ <el-divider/>
|
|
|
+ <div style="width: 98%;margin-left: 1%;">
|
|
|
+ <div style="display: flex;justify-content: space-between;width: 100%;align-items: center;">
|
|
|
+ <div style="font-weight: bold;">
|
|
|
+ 定时任务列表
|
|
|
+ </div>
|
|
|
+ <div style="display: flex;width: 50%;">
|
|
|
+ <el-button plain type="primary" @click="showAdd" size="mini" style="margin-left:auto;" :icon="Plus">新增 </el-button>
|
|
|
+ <el-button plain type="primary" size="mini" style="margin-left:1%;" :icon="Upload">导入</el-button>
|
|
|
+ <el-button plain type="primary" size="mini" style="margin-left:1%;" :icon="Download">导出</el-button>
|
|
|
+ <el-button type="danger" plain size="mini" style="margin-left:1%;" :icon="Delete">批量删除</el-button>
|
|
|
+ <el-button plain type="" size="mini" style="margin-left:1%;" :icon="RefreshRight">刷新</el-button>
|
|
|
+ <el-dropdown trigger="click" v-model="dropdownVisible" @visible-change="handleVisibleChange" style="margin-left:1%;">
|
|
|
+ <el-button type="primary" plain size="mini" style="margin-left:1%;" :icon="Setting">列设置</el-button>
|
|
|
+ <template #dropdown>
|
|
|
+ <el-dropdown-menu style="width: 150px;">
|
|
|
+ <el-dropdown-item style="display: flex;text-align: center;" @click="add1Level" @click.stop="handleCheckboxClick">
|
|
|
+ <el-checkbox v-model="showTablepane.rw" label="任务名称" size="small" @click.stop.native/>
|
|
|
+ </el-dropdown-item>
|
|
|
+ <el-dropdown-item style="display: flex;text-align: center;" @click="add1Level" @click.stop="handleCheckboxClick">
|
|
|
+ <el-checkbox v-model="showTablepane.zm" label="组名称" size="small" @click.stop.native/>
|
|
|
+ </el-dropdown-item>
|
|
|
+ <el-dropdown-item style="display: flex;text-align: center;" @click="add1Level" @click.stop="handleCheckboxClick">
|
|
|
+ <el-checkbox v-model="showTablepane.zx" label="执行器名称" size="small" @click.stop.native/>
|
|
|
+ </el-dropdown-item>
|
|
|
+ <el-dropdown-item style="display: flex;text-align: center;" @click="add1Level" @click.stop="handleCheckboxClick">
|
|
|
+ <el-checkbox v-model="showTablepane.fz" label="负责人" size="small" @click.stop.native/>
|
|
|
+ </el-dropdown-item>
|
|
|
+ <el-dropdown-item style="display: flex;text-align: center;" @click="add1Level" @click.stop="handleCheckboxClick">
|
|
|
+ <el-checkbox v-model="showTablepane.bq" label="标签" size="small" @click.stop.native/>
|
|
|
+ </el-dropdown-item>
|
|
|
+ <el-dropdown-item style="display: flex;text-align: center;" @click="add1Level" @click.stop="handleCheckboxClick">
|
|
|
+ <el-checkbox v-model="showTablepane.cf" label="触发时间" size="small" @click.stop.native/>
|
|
|
+ </el-dropdown-item>
|
|
|
+ <el-dropdown-item style="display: flex;text-align: center;" @click="add1Level" @click.stop="handleCheckboxClick">
|
|
|
+ <el-checkbox v-model="showTablepane.zt" label="状态" size="small" @click.stop.native/>
|
|
|
+ </el-dropdown-item>
|
|
|
+ <el-dropdown-item style="display: flex;text-align: center;" @click="add1Level" @click.stop="handleCheckboxClick">
|
|
|
+ <el-checkbox v-model="showTablepane.rwl" label="任务类型" size="small" @click.stop.native/>
|
|
|
+ </el-dropdown-item>
|
|
|
+ <el-dropdown-item style="display: flex;text-align: center;" @click="add1Level" @click.stop="handleCheckboxClick">
|
|
|
+ <el-checkbox v-model="showTablepane.cfl" label="触发类型" size="small" @click.stop.native/>
|
|
|
+ </el-dropdown-item>
|
|
|
+ <el-dropdown-item style="display: flex;text-align: center;" @click="add1Level" @click.stop="handleCheckboxClick">
|
|
|
+ <el-checkbox v-model="showTablepane.jg" label="间隔时长" size="small" @click.stop.native/>
|
|
|
+ </el-dropdown-item>
|
|
|
+ <el-dropdown-item style="display: flex;text-align: center;" @click="add1Level" @click.stop="handleCheckboxClick">
|
|
|
+ <el-checkbox v-model="showTablepane.zs" label="阻塞策略" size="small" @click.stop.native/>
|
|
|
+ </el-dropdown-item>
|
|
|
+ <el-dropdown-item style="display: flex;text-align: center;" @click="add1Level" @click.stop="handleCheckboxClick">
|
|
|
+ <el-checkbox v-model="showTablepane.cs" label="超时时间(秒)" size="small" @click.stop.native/>
|
|
|
+ </el-dropdown-item>
|
|
|
+ <el-dropdown-item style="display: flex;text-align: center;" @click="add1Level" @click.stop="handleCheckboxClick">
|
|
|
+ <el-checkbox v-model="showTablepane.gx" label="更新时间" size="small" @click.stop.native/>
|
|
|
+ </el-dropdown-item>
|
|
|
+ </el-dropdown-menu>
|
|
|
+ </template>
|
|
|
+ </el-dropdown>
|
|
|
+ </div>
|
|
|
+ </div>
|
|
|
+ </div>
|
|
|
+ <el-table
|
|
|
+ :data="tableData"
|
|
|
+ style="width: 100%;margin-left: 0%;margin-top:1%;"
|
|
|
+ :cell-style="{ paddingTop:'3px',paddingBottom:'3px' }"
|
|
|
+ :header-cell-style="{height: heightAll*0.01+'px',}"
|
|
|
+ :row-style="{ fontSize: '16px',textAlign:'center'}"
|
|
|
+ border
|
|
|
+ :height="tableheight">
|
|
|
+ <el-table-column type="selection" width="55" />
|
|
|
+ <el-table-column type="index" label="序号" width="80"></el-table-column>
|
|
|
+ <el-table-column prop="jobName" label="任务名称" width="160" v-if="showTablepane.rw">
|
|
|
+ <template #default="scope">
|
|
|
+ <el-button type="primary" @click="showDe(scope.row)" size="mini" text style="margin-left: 1%;">{{scope.row.jobName}}</el-button>
|
|
|
+ </template>
|
|
|
+ </el-table-column>
|
|
|
+ <el-table-column prop="groupName" label="组名称" width="160" v-if="showTablepane.zm"/>
|
|
|
+ <el-table-column prop="executorInfo" label="执行器名称" width="160" v-if="showTablepane.zx"/>
|
|
|
+ <el-table-column prop="ownerName" label="负责人" width="160" v-if="showTablepane.fz"/>
|
|
|
+ <el-table-column prop="labels" label="标签" width="140" v-if="showTablepane.bq">
|
|
|
+ <template #default="scope">
|
|
|
+ <el-tag>测试</el-tag>
|
|
|
+ <div v-for="item in scope.row.labels">
|
|
|
+ <el-tag></el-tag>
|
|
|
+ </div>
|
|
|
+ </template>
|
|
|
+ </el-table-column>
|
|
|
+ <el-table-column prop="nextTriggerAt" label="触发时间" width="140" v-if="showTablepane.cf">
|
|
|
+ </el-table-column>
|
|
|
+ <el-table-column prop="jobStatus" label="状态" width="170" v-if="showTablepane.zt">
|
|
|
+ <template #default="scope">
|
|
|
+ <el-switch v-model="scope.row.jobStatus"/>
|
|
|
+ </template>
|
|
|
+ </el-table-column>
|
|
|
+ <el-table-column prop="itemNotes" label="任务类型" width="170" v-if="showTablepane.rwl">
|
|
|
+ <template #default="scope">
|
|
|
+ <el-tag>测试</el-tag>
|
|
|
+ </template>
|
|
|
+ </el-table-column>
|
|
|
+ <el-table-column prop="itemNotes" label="触发类型" width="170" v-if="showTablepane.cfl">
|
|
|
+ <template #default="scope">
|
|
|
+ <el-tag>测试</el-tag>
|
|
|
+ </template>
|
|
|
+ </el-table-column>
|
|
|
+ <el-table-column prop="itemNotes" label="间隔时长" width="170" v-if="showTablepane.jg"/>
|
|
|
+ <el-table-column prop="itemNotes" label="阻塞策略" width="170" v-if="showTablepane.zs">
|
|
|
+ <template #default="scope">
|
|
|
+ <el-tag>测试</el-tag>
|
|
|
+ </template>
|
|
|
+ </el-table-column>
|
|
|
+ <el-table-column prop="itemNotes" label="超时时间(秒)" width="170" v-if="showTablepane.cs"/>
|
|
|
+ <el-table-column prop="itemNotes" label="更新时间" width="170" v-if="showTablepane.gx"/>
|
|
|
+ <el-table-column prop="address" label="操作" width="222" fixed="right">
|
|
|
+ <template #default="scope">
|
|
|
+ <div style="display: flex;justify-content: space-between;width: 100%;">
|
|
|
+ <el-button type="primary" @click="showEdit(scope.row)" size="mini" text style="margin-left: 1%;">编辑</el-button>
|
|
|
+ <el-button @click="showDe(scope.row)" type="primary" text size="mini" style="margin-left: 1%;">执行</el-button>
|
|
|
+ <el-button @click="delRow(scope.row)" type="danger" text size="mini" style="margin-left: 1%;">更多</el-button>
|
|
|
+ </div>
|
|
|
+ </template>
|
|
|
+ </el-table-column>
|
|
|
+ </el-table>
|
|
|
+ <!-- <div style="float: right;margin-top: 1%;margin-right: 1%;">
|
|
|
+ <el-pagination
|
|
|
+ small
|
|
|
+ v-model='currentPage'
|
|
|
+ @current-change="changePage"
|
|
|
+ background
|
|
|
+ layout="prev, pager, next"
|
|
|
+ :total="total"
|
|
|
+ class="mt-4"
|
|
|
+ />
|
|
|
+ </div> -->
|
|
|
+ </div>
|
|
|
+ </div>
|
|
|
+ <el-dialog :title="title" @close="clearForm" v-model="dialogVisible" title="" width="60%" destroy-on-close :key="tableKey">
|
|
|
+ <el-form size="mini" style="margin-top: 0%;width: 98%;" :model="formJi" label-position="right" ref="formRefJi" label-width="120px" :rules="rulesJi">
|
|
|
+ <el-row :gutter="24">
|
|
|
+ <el-col :span="8">
|
|
|
+ <el-form-item label="任务名称:" prop="jobName" style="">
|
|
|
+ <div style="display: flex;width: 100%;justify-content: space-between;">
|
|
|
+ <el-input v-model="formJi.jobName" style="width: 100%;"/>
|
|
|
+ </div>
|
|
|
+ </el-form-item>
|
|
|
+ </el-col>
|
|
|
+ <el-col :span="8">
|
|
|
+ <el-form-item label="组名称:" prop="groupName" style="">
|
|
|
+ <div style="display: flex;width: 100%;justify-content: space-between;">
|
|
|
+ <el-input v-model="formJi.groupName" style="width: 100%;"/>
|
|
|
+ </div>
|
|
|
+ </el-form-item>
|
|
|
+ </el-col>
|
|
|
+ <el-col :span="8">
|
|
|
+ <el-form-item label="负责人:" prop="" style="">
|
|
|
+ <div style="display: flex;width: 100%;justify-content: space-between;">
|
|
|
+ <el-input v-model="formJi.ownerName" style="width: 100%;"/>
|
|
|
+ </div>
|
|
|
+ </el-form-item>
|
|
|
+ </el-col>
|
|
|
+ </el-row>
|
|
|
+ <el-row :gutter="48">
|
|
|
+ <el-col :span="15">
|
|
|
+ <el-form-item label="标签:" prop="" style="">
|
|
|
+ <div
|
|
|
+ v-if="parTag.length==0"
|
|
|
+ @click='addTag'
|
|
|
+ style="
|
|
|
+ cursor: pointer;
|
|
|
+ display: flex;
|
|
|
+ justify-content: center;
|
|
|
+ align-items: center;
|
|
|
+ width: 200px;
|
|
|
+ height: 30px;
|
|
|
+ border: 0.5px dashed #c8c9cc;
|
|
|
+ border-radius: 8px;
|
|
|
+ position: relative;
|
|
|
+ "
|
|
|
+ >
|
|
|
+ + 添加
|
|
|
+ </div>
|
|
|
+ <div v-if="parTag.length!=0" v-for="(item,index) in parTag">
|
|
|
+ <div style="display: flex;align-items: center;margin-top: 3%;" :class="{ 'no-margin-top': index === 0 }">
|
|
|
+ <el-input v-model="item.key" style="width: 50%;" resize="none" placeholder="key"/>
|
|
|
+ <div style="margin-left: 1%;">:</div>
|
|
|
+ <el-input v-model="item.value" style="width: 50%;margin-left: 1%;" resize="none" placeholder="value"/>
|
|
|
+ <el-icon @click="delTag(index)" style="margin-left: 3%;color: red;cursor: pointer;"><Minus /></el-icon>
|
|
|
+ <el-icon @click="addTag" style="margin-left: 3%;color: #337ecc;cursor: pointer;"><Plus /></el-icon>
|
|
|
+ </div>
|
|
|
+ </div>
|
|
|
+ </el-form-item>
|
|
|
+ </el-col>
|
|
|
+ </el-row>
|
|
|
+ <el-row :gutter="48">
|
|
|
+ <el-col :span="8">
|
|
|
+ <el-form-item label="状态:">
|
|
|
+ <el-radio-group v-model="formJi.jobStatus" class="custom-radio-group" style="width: 100%;margin-top: -1%;">
|
|
|
+ <el-radio :label=0 size="large">启用</el-radio>
|
|
|
+ <el-radio :label=1 size="large">禁用</el-radio>
|
|
|
+ </el-radio-group>
|
|
|
+ </el-form-item>
|
|
|
+ </el-col>
|
|
|
+
|
|
|
+ </el-row>
|
|
|
+ <el-row :gutter="48">
|
|
|
+ <el-col :span="8">
|
|
|
+ <el-form-item label="任务类型:">
|
|
|
+ <el-select
|
|
|
+ v-model="formJi.taskType"
|
|
|
+ class="noBorSel"
|
|
|
+ placeholder=""
|
|
|
+ style="width: 100%;margin-left: 0%;"
|
|
|
+ >
|
|
|
+ <el-option
|
|
|
+ v-for="item in optionsTaskType"
|
|
|
+ :key="item.value"
|
|
|
+ :label="item.label"
|
|
|
+ :value="item.value"
|
|
|
+ />
|
|
|
+ </el-select>
|
|
|
+ </el-form-item>
|
|
|
+ </el-col>
|
|
|
+ </el-row>
|
|
|
+ <el-form-item label="执行器名称:">
|
|
|
+ <div style="display: flex;width: 50%;align-items: center;">
|
|
|
+ <el-radio-group @change="showCode" v-model="formJi.executorInfo" class="custom-radio-group" style="width: 100%;margin-top: -0.5%;">
|
|
|
+ <el-radio label="自定义执行器" size="large">自定义执行器</el-radio>
|
|
|
+ <el-radio label="内置执行器" size="large">内置执行器</el-radio>
|
|
|
+ </el-radio-group>
|
|
|
+ <el-select
|
|
|
+ v-if="formJi.executorInfo=='内置执行器'"
|
|
|
+ v-model="serzu"
|
|
|
+ class="noBorSel"
|
|
|
+ placeholder=""
|
|
|
+ style="width: 70%;margin-left: 1%;"
|
|
|
+ >
|
|
|
+ <el-option
|
|
|
+ v-for="item in optionsShuLei"
|
|
|
+ :key="item.value"
|
|
|
+ :label="item.label"
|
|
|
+ :value="item.value"
|
|
|
+ />
|
|
|
+ </el-select>
|
|
|
+ <el-input v-if="formJi.executorInfo=='自定义执行器'" v-model="formZu.dcNote" style="width: 75%;" placeholder="请输入自定义执行器名称"/>
|
|
|
+ </div>
|
|
|
+ </el-form-item>
|
|
|
+ <div v-if="formJi.executorInfo=='自定义执行器'" style="margin-top: 4%;">
|
|
|
+ <el-form-item label="方法参数:" >
|
|
|
+ <el-input v-model="formZu.dcNote" style="width: 75%;" placeholder="" type="textarea" :row="2" resize="none"/>
|
|
|
+ </el-form-item>
|
|
|
+ <el-row :gutter="48">
|
|
|
+ <el-col :span="8">
|
|
|
+ <el-form-item label="路由策略:">
|
|
|
+ <el-select
|
|
|
+ v-model="serzu"
|
|
|
+ class="noBorSel"
|
|
|
+ placeholder=""
|
|
|
+ style="width: 100%;margin-left: 0%;"
|
|
|
+ >
|
|
|
+ <el-option
|
|
|
+ v-for="item in optionsShuLei"
|
|
|
+ :key="item.value"
|
|
|
+ :label="item.label"
|
|
|
+ :value="item.value"
|
|
|
+ />
|
|
|
+ </el-select>
|
|
|
+ </el-form-item>
|
|
|
+ </el-col>
|
|
|
+ <el-col :span="8">
|
|
|
+ <el-form-item label="阻塞策略:">
|
|
|
+ <el-select
|
|
|
+ v-model="serzu"
|
|
|
+ class="noBorSel"
|
|
|
+ placeholder=""
|
|
|
+ style="width: 100%;margin-left: 0%;"
|
|
|
+ >
|
|
|
+ <el-option
|
|
|
+ v-for="item in optionsShuLei"
|
|
|
+ :key="item.value"
|
|
|
+ :label="item.label"
|
|
|
+ :value="item.value"
|
|
|
+ />
|
|
|
+ </el-select>
|
|
|
+ </el-form-item>
|
|
|
+ </el-col>
|
|
|
+ </el-row>
|
|
|
+ <el-row :gutter="48">
|
|
|
+ <el-col :span="8">
|
|
|
+ <el-form-item label="触发类型:">
|
|
|
+ <el-select
|
|
|
+ v-model="serzu"
|
|
|
+ class="noBorSel"
|
|
|
+ placeholder=""
|
|
|
+ style="width: 100%;margin-left: 0%;"
|
|
|
+ >
|
|
|
+ <el-option
|
|
|
+ v-for="item in optionsShuLei"
|
|
|
+ :key="item.value"
|
|
|
+ :label="item.label"
|
|
|
+ :value="item.value"
|
|
|
+ />
|
|
|
+ </el-select>
|
|
|
+ </el-form-item>
|
|
|
+ </el-col>
|
|
|
+ <el-col :span="8">
|
|
|
+ <el-form-item label="间隔时长:">
|
|
|
+ <el-input-number
|
|
|
+ v-model="num"
|
|
|
+ style="width: 100%;"
|
|
|
+ class="mx-4"
|
|
|
+ :min="1"
|
|
|
+ :max="10"
|
|
|
+ controls-position="right"
|
|
|
+ @change="handleChange"
|
|
|
+ />
|
|
|
+ </el-form-item>
|
|
|
+ </el-col>
|
|
|
+ </el-row>
|
|
|
+ <el-row :gutter="48">
|
|
|
+ <el-col :span="8">
|
|
|
+ <el-form-item label="超时时间(秒):">
|
|
|
+ <el-input-number
|
|
|
+ v-model="num"
|
|
|
+ style="width: 100%;"
|
|
|
+ class="mx-4"
|
|
|
+ :min="1"
|
|
|
+ :max="10"
|
|
|
+ controls-position="right"
|
|
|
+ @change="handleChange"
|
|
|
+ />
|
|
|
+ </el-form-item>
|
|
|
+ </el-col>
|
|
|
+ <el-col :span="8">
|
|
|
+ <el-form-item label="最大重试次数:">
|
|
|
+ <el-input-number
|
|
|
+ v-model="num"
|
|
|
+ style="width: 100%;"
|
|
|
+ class="mx-4"
|
|
|
+ :min="1"
|
|
|
+ :max="10"
|
|
|
+ controls-position="right"
|
|
|
+ @change="handleChange"
|
|
|
+ />
|
|
|
+ </el-form-item>
|
|
|
+ </el-col>
|
|
|
+ </el-row>
|
|
|
+ <el-row :gutter="48">
|
|
|
+ <el-col :span="8">
|
|
|
+ <el-form-item label="重试间隔:">
|
|
|
+ <el-input-number
|
|
|
+ v-model="num"
|
|
|
+ style="width: 100%;"
|
|
|
+ class="mx-4"
|
|
|
+ :min="1"
|
|
|
+ :max="10"
|
|
|
+ controls-position="right"
|
|
|
+ @change="handleChange"
|
|
|
+ />
|
|
|
+ </el-form-item>
|
|
|
+ </el-col>
|
|
|
+ <el-col :span="8">
|
|
|
+ <el-form-item label="告警通知:">
|
|
|
+ <el-select
|
|
|
+ v-model="serzu"
|
|
|
+ class="noBorSel"
|
|
|
+ placeholder=""
|
|
|
+ style="width: 100%;margin-left: 0%;"
|
|
|
+ >
|
|
|
+ <el-option
|
|
|
+ v-for="item in optionsShuLei"
|
|
|
+ :key="item.value"
|
|
|
+ :label="item.label"
|
|
|
+ :value="item.value"
|
|
|
+ />
|
|
|
+ </el-select>
|
|
|
+ </el-form-item>
|
|
|
+ </el-col>
|
|
|
+ </el-row>
|
|
|
+ <el-form-item label="描述:" >
|
|
|
+ <el-input v-model="formZu.dcNote" style="width: 75%;" placeholder="" type="textarea" :row="2" resize="none"/>
|
|
|
+ </el-form-item>
|
|
|
+ </div>
|
|
|
+ <div v-if="formJi.executorInfo=='内置执行器'" style="margin-top: 4%;">
|
|
|
+ <el-form-item label="请求参数:" >
|
|
|
+ <el-input
|
|
|
+ style="width: 75%"
|
|
|
+ v-model="input3"
|
|
|
+ placeholder="Please input"
|
|
|
+ class="input-with-select"
|
|
|
+ >
|
|
|
+ <template #prepend>
|
|
|
+ <el-select v-model="select" placeholder="Select" style="width: 115px">
|
|
|
+ <el-option label="POST" value="1" />
|
|
|
+ <el-option label="GET" value="2" />
|
|
|
+ <el-option label="PUT" value="3" />
|
|
|
+ <el-option label="DELETE" value="3" />
|
|
|
+ </el-select>
|
|
|
+ </template>
|
|
|
+ </el-input>
|
|
|
+ </el-form-item>
|
|
|
+ <el-row :gutter="48">
|
|
|
+ <el-col :span="24">
|
|
|
+ <el-form-item label="Media Type:">
|
|
|
+ <el-input v-model="formZu.dcNote" style="width: 75%;" placeholder="" resize="none"/>
|
|
|
+ </el-form-item>
|
|
|
+ </el-col>
|
|
|
+ </el-row>
|
|
|
+ <el-form-item label="Header 参数:" style="width: 50%;">
|
|
|
+ <div
|
|
|
+ v-if="parTag.length==0"
|
|
|
+ @click='addTag'
|
|
|
+ style="
|
|
|
+ cursor: pointer;
|
|
|
+ display: flex;
|
|
|
+ justify-content: center;
|
|
|
+ align-items: center;
|
|
|
+ width: 200px;
|
|
|
+ height: 30px;
|
|
|
+ border: 0.5px dashed #c8c9cc;
|
|
|
+ border-radius: 8px;
|
|
|
+ position: relative;
|
|
|
+ "
|
|
|
+ >
|
|
|
+ + 添加
|
|
|
+ </div>
|
|
|
+ <div v-if="parTag.length!=0" v-for="(item,index) in parTag">
|
|
|
+ <div style="display: flex;align-items: center;margin-top: 3%;" :class="{ 'no-margin-top': index === 0 }">
|
|
|
+ <el-input v-model="item.key" style="width: 50%;" resize="none" placeholder="key"/>
|
|
|
+ <div style="margin-left: 1%;">:</div>
|
|
|
+ <el-input v-model="item.value" style="width: 50%;margin-left: 1%;" resize="none" placeholder="value"/>
|
|
|
+ <el-icon @click="delTag(index)" style="margin-left: 3%;color: red;cursor: pointer;"><Minus /></el-icon>
|
|
|
+ <el-icon @click="addTag" style="margin-left: 3%;color: #337ecc;cursor: pointer;"><Plus /></el-icon>
|
|
|
+ </div>
|
|
|
+ </div>
|
|
|
+ </el-form-item>
|
|
|
+ <el-form-item label="Body 参数">
|
|
|
+ <el-input v-model="formZu.dcNote" style="width: 75%;" placeholder="" type="textarea" :row='2' resize="none"/>
|
|
|
+ </el-form-item>
|
|
|
+ <el-form-item label="接口超时时间">
|
|
|
+ <el-input-number
|
|
|
+ v-model="num"
|
|
|
+ style="width: 75%;"
|
|
|
+ class="mx-4"
|
|
|
+ :min="1"
|
|
|
+ :max="10"
|
|
|
+ controls-position="right"
|
|
|
+ @change="handleChange"
|
|
|
+ />
|
|
|
+ </el-form-item>
|
|
|
+ <el-row :gutter="48">
|
|
|
+ <el-col :span="8">
|
|
|
+ <el-form-item label="路由策略:">
|
|
|
+ <el-select
|
|
|
+ v-model="serzu"
|
|
|
+ class="noBorSel"
|
|
|
+ placeholder=""
|
|
|
+ style="width: 100%;margin-left: 0%;"
|
|
|
+ >
|
|
|
+ <el-option
|
|
|
+ v-for="item in optionsShuLei"
|
|
|
+ :key="item.value"
|
|
|
+ :label="item.label"
|
|
|
+ :value="item.value"
|
|
|
+ />
|
|
|
+ </el-select>
|
|
|
+ </el-form-item>
|
|
|
+ </el-col>
|
|
|
+ <el-col :span="8">
|
|
|
+ <el-form-item label="阻塞策略:">
|
|
|
+ <el-select
|
|
|
+ v-model="serzu"
|
|
|
+ class="noBorSel"
|
|
|
+ placeholder=""
|
|
|
+ style="width: 100%;margin-left: 0%;"
|
|
|
+ >
|
|
|
+ <el-option
|
|
|
+ v-for="item in optionsShuLei"
|
|
|
+ :key="item.value"
|
|
|
+ :label="item.label"
|
|
|
+ :value="item.value"
|
|
|
+ />
|
|
|
+ </el-select>
|
|
|
+ </el-form-item>
|
|
|
+ </el-col>
|
|
|
+ </el-row>
|
|
|
+ <el-row :gutter="48">
|
|
|
+ <el-col :span="8">
|
|
|
+ <el-form-item label="触发类型:">
|
|
|
+ <el-select
|
|
|
+ v-model="serzu"
|
|
|
+ class="noBorSel"
|
|
|
+ placeholder=""
|
|
|
+ style="width: 100%;margin-left: 0%;"
|
|
|
+ >
|
|
|
+ <el-option
|
|
|
+ v-for="item in optionsShuLei"
|
|
|
+ :key="item.value"
|
|
|
+ :label="item.label"
|
|
|
+ :value="item.value"
|
|
|
+ />
|
|
|
+ </el-select>
|
|
|
+ </el-form-item>
|
|
|
+ </el-col>
|
|
|
+ <el-col :span="8">
|
|
|
+ <el-form-item label="间隔时长:">
|
|
|
+ <el-input-number
|
|
|
+ v-model="num"
|
|
|
+ style="width: 100%;"
|
|
|
+ class="mx-4"
|
|
|
+ :min="1"
|
|
|
+ :max="10"
|
|
|
+ controls-position="right"
|
|
|
+ @change="handleChange"
|
|
|
+ />
|
|
|
+ </el-form-item>
|
|
|
+ </el-col>
|
|
|
+ </el-row>
|
|
|
+ <el-row :gutter="48">
|
|
|
+ <el-col :span="8">
|
|
|
+ <el-form-item label="超时时间(秒):">
|
|
|
+ <el-input-number
|
|
|
+ v-model="num"
|
|
|
+ style="width: 100%;"
|
|
|
+ class="mx-4"
|
|
|
+ :min="1"
|
|
|
+ :max="10"
|
|
|
+ controls-position="right"
|
|
|
+ @change="handleChange"
|
|
|
+ />
|
|
|
+ </el-form-item>
|
|
|
+ </el-col>
|
|
|
+ <el-col :span="8">
|
|
|
+ <el-form-item label="最大重试次数:">
|
|
|
+ <el-input-number
|
|
|
+ v-model="num"
|
|
|
+ style="width: 100%;"
|
|
|
+ class="mx-4"
|
|
|
+ :min="1"
|
|
|
+ :max="10"
|
|
|
+ controls-position="right"
|
|
|
+ @change="handleChange"
|
|
|
+ />
|
|
|
+ </el-form-item>
|
|
|
+ </el-col>
|
|
|
+ </el-row>
|
|
|
+ <el-row :gutter="48">
|
|
|
+ <el-col :span="8">
|
|
|
+ <el-form-item label="重试间隔:">
|
|
|
+ <el-input-number
|
|
|
+ v-model="num"
|
|
|
+ style="width: 100%;"
|
|
|
+ class="mx-4"
|
|
|
+ :min="1"
|
|
|
+ :max="10"
|
|
|
+ controls-position="right"
|
|
|
+ @change="handleChange"
|
|
|
+ />
|
|
|
+ </el-form-item>
|
|
|
+ </el-col>
|
|
|
+ <el-col :span="8">
|
|
|
+ <el-form-item label="告警通知:">
|
|
|
+ <el-select
|
|
|
+ v-model="serzu"
|
|
|
+ class="noBorSel"
|
|
|
+ placeholder=""
|
|
|
+ style="width: 100%;margin-left: 0%;"
|
|
|
+ >
|
|
|
+ <el-option
|
|
|
+ v-for="item in optionsShuLei"
|
|
|
+ :key="item.value"
|
|
|
+ :label="item.label"
|
|
|
+ :value="item.value"
|
|
|
+ />
|
|
|
+ </el-select>
|
|
|
+ </el-form-item>
|
|
|
+ </el-col>
|
|
|
+ </el-row>
|
|
|
+ <el-form-item label="描述:" >
|
|
|
+ <el-input v-model="formZu.dcNote" style="width: 75%;" placeholder="" type="textarea" :row="2" resize="none"/>
|
|
|
+ </el-form-item>
|
|
|
+ </div>
|
|
|
+ </el-form>
|
|
|
+ <template #footer>
|
|
|
+ <span class="dialog-footer">
|
|
|
+ <el-button size="mini" @click="dialogVisible = false">取消</el-button>
|
|
|
+ <el-button v-if="isAddTa" type="primary" @click="addTa" size="mini">
|
|
|
+ 提交
|
|
|
+ </el-button>
|
|
|
+ <el-button v-if="!isAddTa" type="primary" @click="saveEditTa" size="mini">
|
|
|
+ 提交
|
|
|
+ </el-button>
|
|
|
+ </span>
|
|
|
+ </template>
|
|
|
+ </el-dialog>
|
|
|
+ <el-dialog @close="clearFromTree" :title="titleTree" v-model="dialogVisibleTree" title="" width="30%" destroy-on-close :key="tableKey">
|
|
|
+ <el-form style="margin-left: 5%;margin-top: 2%;" :model="formTree" class="demo-form-inline" ref="formRefTree" :rules="rulesTree">
|
|
|
+ <el-form-item label="名称:" prop="itemName" style="margin-left: -2%;">
|
|
|
+ <el-input v-model="formTree.itemName" style="width: 75%;" placeholder=""/>
|
|
|
+ </el-form-item>
|
|
|
+ <el-form-item label="父节点id:" prop="catePid" style="margin-left: -2%;">
|
|
|
+ <el-input v-model="formTree.catePid" style="width: 75%;" placeholder="" resize="none"/>
|
|
|
+ </el-form-item>
|
|
|
+ <el-form-item label="排序:" prop="itemNo" style="margin-left: -2%;">
|
|
|
+ <el-input v-model="formTree.itemNo" style="width: 75%;" placeholder="" resize="none"/>
|
|
|
+ </el-form-item>
|
|
|
+ <el-form-item label="备注:" prop="itemNotes" style=" ">
|
|
|
+ <el-input v-model="formTree.itemNotes" style="width: 75%;" placeholder="" resize="none"/>
|
|
|
+ </el-form-item>
|
|
|
+ </el-form>
|
|
|
+ <template #footer>
|
|
|
+ <span class="dialog-footer">
|
|
|
+ <el-button size="mini" @click="dialogVisible = false">取消</el-button>
|
|
|
+ <el-button v-if="isAdd" type="primary" @click="addTree" size="mini">
|
|
|
+ 提交
|
|
|
+ </el-button>
|
|
|
+ <el-button v-if="!isAdd" type="primary" @click="saveEditTree" size="mini">
|
|
|
+ 提交
|
|
|
+ </el-button>
|
|
|
+ </span>
|
|
|
+ </template>
|
|
|
+ </el-dialog>
|
|
|
+</template>
|
|
|
+<script setup>
|
|
|
+import { Search,RefreshRight,Plus,Download,Upload,Delete,Setting,Minus} from '@element-plus/icons-vue'
|
|
|
+import { reactive } from 'vue'
|
|
|
+import Codemirror from 'codemirror-editor-vue3';
|
|
|
+import { addDataCate,getCateTree,getCateDe,editCate,delCate,addDataItem,getItem,getItemDe,editItem,delItem} from "@/api/service/cate";
|
|
|
+import { ref, onMounted, onUnmounted, nextTick } from 'vue';
|
|
|
+const { proxy } = getCurrentInstance();
|
|
|
+const data = ref([])
|
|
|
+const title = ref([])
|
|
|
+const titleTree = ref([])
|
|
|
+const code = ref(null)
|
|
|
+const currentPage = ref(1)
|
|
|
+const total = ref(1)
|
|
|
+const tableData = ref([])
|
|
|
+const tableheight = window.innerHeight*0.7
|
|
|
+const heightAll = window.innerHeight
|
|
|
+const dialogVisible = ref(false)
|
|
|
+const dialogVisibleTree = ref(false)
|
|
|
+const isAdd = ref(false)
|
|
|
+const isAddTa = ref(false)
|
|
|
+const treeId = ref('');
|
|
|
+const parTag = ref([])
|
|
|
+const optionsTaskType = ref([
|
|
|
+ {
|
|
|
+ label:'集群',
|
|
|
+ value:1
|
|
|
+ },
|
|
|
+ {
|
|
|
+ label:'广播',
|
|
|
+ value:2
|
|
|
+ },
|
|
|
+ {
|
|
|
+ label:'Sharding',
|
|
|
+ value:3
|
|
|
+ },
|
|
|
+ {
|
|
|
+ label:'Map',
|
|
|
+ value:4
|
|
|
+ },
|
|
|
+ {
|
|
|
+ label:'MapReduce',
|
|
|
+ value:5
|
|
|
+ },
|
|
|
+])
|
|
|
+const cmOptions = {
|
|
|
+ mode: 'x-sql',
|
|
|
+ hintOptions: {
|
|
|
+ completeSingle: false,
|
|
|
+ tables: {
|
|
|
+ users: ['id', 'name', 'email'], // 自定义表字段提示
|
|
|
+ products: ['id', 'price', 'stock']
|
|
|
+ }
|
|
|
+ }
|
|
|
+};
|
|
|
+const cmRef = ref(null)
|
|
|
+const showTablepane = ref({
|
|
|
+ rw:true,
|
|
|
+ zm:true,
|
|
|
+ zx:true,
|
|
|
+ fz:true,
|
|
|
+ bq:true,
|
|
|
+ cf:true,
|
|
|
+ zt:true,
|
|
|
+ rwl:true,
|
|
|
+ cfl:true,
|
|
|
+ jg:true,
|
|
|
+ zs:true,
|
|
|
+ cs:true,
|
|
|
+ gx:true,
|
|
|
+})
|
|
|
+const formJi = ref({
|
|
|
+ name:'',
|
|
|
+ version:'',
|
|
|
+ enname:'',
|
|
|
+ devlang:'',
|
|
|
+ intro:'',
|
|
|
+ type:'',
|
|
|
+ mdContact:'',
|
|
|
+ mdUnit:'',
|
|
|
+ devUnit:'',
|
|
|
+ devContact:'',
|
|
|
+ deployDir:'',
|
|
|
+ deployIp:'',
|
|
|
+ deployPort:'',
|
|
|
+ mirrorImageUrl:'',
|
|
|
+ mdRunCmd:'',
|
|
|
+ envOs:'',
|
|
|
+ envDisk:'',
|
|
|
+ envGpuMem:'11',
|
|
|
+ evnArmX86:'',
|
|
|
+ envCpuNum:'',
|
|
|
+ envGpuType:'',
|
|
|
+ envGpuNum:'2',
|
|
|
+ envMem:'',
|
|
|
+ mdInNote:'',
|
|
|
+ mdOutNote:''
|
|
|
+});
|
|
|
+const activeTabKey = ref(0)
|
|
|
+const rulesJi = reactive({
|
|
|
+ name: [{ required: true, message: '必填', trigger: 'blur' }],
|
|
|
+ enname: [{ required: true, message: '必填', trigger: 'blur' }],
|
|
|
+});
|
|
|
+const formRefJi = ref();
|
|
|
+const formZu = ref({
|
|
|
+ itemName:'',
|
|
|
+ itemTp:'',
|
|
|
+ itemEn:'',
|
|
|
+ itemTp:'',
|
|
|
+ itemDataTp:'',
|
|
|
+ itemDefaultVal:'',
|
|
|
+ itemUnit:'',
|
|
|
+ itemNotes:'',
|
|
|
+});
|
|
|
+const rulesZu = reactive({
|
|
|
+ itemName: [{ required: true, message: '必填', trigger: 'blur' }],
|
|
|
+ itemEn: [{ required: true, message: '必填', trigger: 'blur' }],
|
|
|
+ itemTp: [{ required: true, message: '必填', trigger: 'blur' }],
|
|
|
+ itemDataTp: [{ required: true, message: '必填', trigger: 'blur' }],
|
|
|
+ itemDefaultVal: [{ required: true, message: '必填', trigger: 'blur' }],
|
|
|
+});
|
|
|
+const formRefZu = ref();
|
|
|
+
|
|
|
+const formTree = ref({
|
|
|
+ itemName:'',
|
|
|
+ catePid:'',
|
|
|
+ itemNo:'',
|
|
|
+ itemNotes:''
|
|
|
+});
|
|
|
+const rulesTree = reactive({
|
|
|
+ itemNo: [{ required: true, message: '必填', trigger: 'blur' }],
|
|
|
+ catePid: [{ required: true, message: '必填', trigger: 'blur' }],
|
|
|
+ itemName: [{ required: true, message: '必填', trigger: 'blur' }],
|
|
|
+});
|
|
|
+const formRefTree = ref();
|
|
|
+
|
|
|
+const dropdownVisible = ref(false);
|
|
|
+
|
|
|
+function showCode(){
|
|
|
+ nextTick(() => {
|
|
|
+ cmRef.value?.refresh(); // 关键调用
|
|
|
+ });
|
|
|
+}
|
|
|
+const handleCheckboxClick = () => {
|
|
|
+ // 1. 执行 checkbox 的切换逻辑（v-model 自动处理）
|
|
|
+ // 2. 手动保持下拉菜单展开
|
|
|
+ dropdownVisible.value = true;
|
|
|
+};
|
|
|
+function addTag(){
|
|
|
+ parTag.value.push({value:'',key:''})
|
|
|
+}
|
|
|
+function delTag(index){
|
|
|
+ parTag.value.splice(index,1)
|
|
|
+}
|
|
|
+function clearForm(){
|
|
|
+ formZu.value = {
|
|
|
+ itemName:'',
|
|
|
+ itemTp:'',
|
|
|
+ itemEn:'',
|
|
|
+ itemTp:'',
|
|
|
+ itemDataTp:'',
|
|
|
+ itemDefaultVal:'',
|
|
|
+ itemUnit:'',
|
|
|
+ itemNotes:'',
|
|
|
+ }
|
|
|
+}
|
|
|
+function getTable(){
|
|
|
+ var par = {
|
|
|
+ pageNum:currentPage.value,
|
|
|
+ pageSize:15,
|
|
|
+ cateId:''
|
|
|
+ }
|
|
|
+ getItem(par).then(res=>{
|
|
|
+ tableData.value = res.rows
|
|
|
+ total.value = res.total
|
|
|
+ })
|
|
|
+}
|
|
|
+function showAdd(){
|
|
|
+ isAddTa.value = true
|
|
|
+ title.value = '新增'
|
|
|
+ dialogVisible.value = true
|
|
|
+}
|
|
|
+function showEdit(row){
|
|
|
+ isAddTa.value = false
|
|
|
+ title.value = '编辑'
|
|
|
+ dialogVisible.value = true
|
|
|
+ getItemDe(row.dataId).then(res=>{
|
|
|
+ formZu.value = res.data
|
|
|
+ })
|
|
|
+}
|
|
|
+function showAddTree(){
|
|
|
+ isAdd.value = true
|
|
|
+ titleTree.value = '新增节点'
|
|
|
+ dialogVisibleTree.value = true
|
|
|
+}
|
|
|
+function clearFromTree(){
|
|
|
+ formTree.value = {
|
|
|
+ itemName:'',
|
|
|
+ catePid:'',
|
|
|
+ itemNo:'',
|
|
|
+ itemNotes:''
|
|
|
+ }
|
|
|
+}
|
|
|
+function getTree(){
|
|
|
+ getCateTree().then(res=>{
|
|
|
+ data.value = res.data
|
|
|
+ })
|
|
|
+}
|
|
|
+function addTa(){
|
|
|
+ formRefZu.value.validate(async (valid) => {
|
|
|
+ await addDataItem(formZu.value).then(res=>{
|
|
|
+ if(res.code===200){
|
|
|
+ proxy.$modal.msgSuccess("新增成功");
|
|
|
+ getTable()
|
|
|
+ dialogVisible.value = false
|
|
|
+ }
|
|
|
+ })
|
|
|
+ });
|
|
|
+}
|
|
|
+function saveEditTa(){
|
|
|
+ editItem(formZu.value).then(res=>{
|
|
|
+ if(res.code===200){
|
|
|
+ proxy.$modal.msgSuccess("修改成功");
|
|
|
+ dialogVisible.value = false
|
|
|
+ getTable()
|
|
|
+ }
|
|
|
+ })
|
|
|
+}
|
|
|
+function delRow(row) {
|
|
|
+ proxy.$modal.confirm('是否确认删除？').then(function () {
|
|
|
+ return delItem(row.dataId);
|
|
|
+ }).then(() => {
|
|
|
+ getTable();
|
|
|
+ proxy.$modal.msgSuccess("删除成功");
|
|
|
+ }).catch(() => {});
|
|
|
+};
|
|
|
+async function addTree(){
|
|
|
+ formRefTree.value.validate(async (valid) => {
|
|
|
+ await addDataCate(formTree.value).then(res=>{
|
|
|
+ if(res.code===200){
|
|
|
+ proxy.$modal.msgSuccess("新增成功");
|
|
|
+ getTree()
|
|
|
+ dialogVisibleTree.value = false
|
|
|
+ }
|
|
|
+ })
|
|
|
+ });
|
|
|
+}
|
|
|
+function saveEditTree(){
|
|
|
+ editCate(formTree.value).then(res=>{
|
|
|
+ if(res.code===200){
|
|
|
+ proxy.$modal.msgSuccess("修改成功");
|
|
|
+ dialogVisibleTree.value = false
|
|
|
+ getTree()
|
|
|
+ }
|
|
|
+ })
|
|
|
+}
|
|
|
+function handleNodeClick(node, data){
|
|
|
+ treeId.value = data.id
|
|
|
+ getTable()
|
|
|
+}
|
|
|
+function delTree(node, data) {
|
|
|
+ proxy.$modal.confirm('是否确认删除？').then(function () {
|
|
|
+ return delCate(data.id);
|
|
|
+ }).then(() => {
|
|
|
+ getTree();
|
|
|
+ proxy.$modal.msgSuccess("删除成功");
|
|
|
+ }).catch(() => {});
|
|
|
+};
|
|
|
+function editTree(node, data){
|
|
|
+ console.log(data)
|
|
|
+ titleTree.value = '编辑'
|
|
|
+ isAdd.value = false
|
|
|
+ dialogVisibleTree.value = true
|
|
|
+ getCateDe(data.id).then(res=>{
|
|
|
+ formTree.value = res.data
|
|
|
+ })
|
|
|
+ console.log(node, data)
|
|
|
+}
|
|
|
+onMounted(() => {
|
|
|
+ getTree()
|
|
|
+ getTable()
|
|
|
+});
|
|
|
+
|
|
|
+</script>
|
|
|
+<style scoped>
|
|
|
+.no-margin-top {
|
|
|
+ margin-top: 0 !important;
|
|
|
+}
|
|
|
+.drag-handle {
|
|
|
+ cursor: move;
|
|
|
+}
|
|
|
+
|
|
|
+.ghost {
|
|
|
+ opacity: 0.5;
|
|
|
+ background: #c8ebfb;
|
|
|
+}
|
|
|
+
|
|
|
+/* 防止文字选中 */
|
|
|
+:deep(.el-table__row) {
|
|
|
+ user-select: none;
|
|
|
+ -webkit-user-select: none;
|
|
|
+}
|
|
|
+</style>
|
|
|
+<style scoped lang="scss">
|
|
|
+
|
|
|
+
|
|
|
+.el-table .el-table__row td {
|
|
|
+ height: 60px !important; /* 行高 */
|
|
|
+}
|
|
|
+.custom-tree-node {
|
|
|
+ display: flex; /* 启用 Flex 布局 */
|
|
|
+ align-items: center; /* 垂直居中 */
|
|
|
+ gap: 8px; /* 图标与文字间距 */
|
|
|
+}
|
|
|
+.custom-tree-node {
|
|
|
+ flex: 1;
|
|
|
+ display: flex;
|
|
|
+ align-items: center;
|
|
|
+ justify-content: space-between;
|
|
|
+ font-size: 14px;
|
|
|
+ padding-right: 8px;
|
|
|
+}
|
|
|
+</style>
|
