2021/12/27——2022/1/9
监控系统模块
开发联调进度95%
难点1
params处理
部分代码：
html部分：
<!--新增表单区域start-->
<el-dialog :close-on-click-modal="false" :visible.sync="showAddTaskView" title="监控配置详情" width="70%" size="small">
......
......
<el-form-item prop="ctype" label="任务类型:" v-if="taskDataInfo.scriptType !=1 && taskDataInfo.scriptType !=2 && taskDataInfo.scriptType != null">
<el-select @change="findParamForOp" v-model="taskDataInfo.ctype" placeholder="请选择任务类型" style="width: 100%"
size="small" :filterable="true">
<el-option
v-for="item in monitorConfig"
:key="item.scriptType"
:label="item.name"
:value="item.scriptType">
</el-option>
</el-select>
<span style="color: #F9AA40;" v-html="typeDesc"></span>
</el-form-item>
<!-- 对应选项动态局部页面获取 -->
<div v-for="(item,index) in taskDataInfo.extParams" :key="index"
v-if="taskDataInfo.scriptType !=1 && taskDataInfo.scriptType !=2">
<div v-if="item.type=='0'">
<el-input type="hidden" v-model="item.key" size="small"></el-input>
<el-form-item v-bind:label="item.key">
<el-input prefix-icon="el-icon-edit" v-model.trim="item.value" size="small"
v-bind:placeholder="item.placeholder"></el-input>
<span style="color: #F9AA40;" v-html="item.desc"></span>
</el-form-item>
</div>
<div v-else-if="item.type=='1'">
<el-form-item v-bind:label="item.key">
<el-upload
class="upload-demo"
:action="baseURL + 'common/upload'"
:headers="header"
:on-remove="(file, fileList) => handleRemove(file, fileList,item.key)"
:before-remove="beforeRemove"
:limit="1"
:on-exceed="handleExceed"
:on-progress="handleProgress"
:on-success="(response, file, fileList) =>handleSuccess(response, file, fileList,item.key)">
<el-button size="small" type="primary">点击上传</el-button>
</el-upload>
<span style="color: #F9AA40;" v-html="item.desc"></span>
</el-form-item>
</div>
<!--下拉框-->
<div v-else-if="item.type=='2'">
<el-form-item v-bind:label="item.key">
<el-select v-model="item.value" style="width: 100%" size="small" :filterable="true">
<el-option
v-for="config in item.valueConfig"
:key="config.value"
:label="config.name"
:value="config.value">
</el-option>
</el-select>
<span style="color: #F9AA40;" v-html="item.desc"></span>
</el-form-item>
</div>
<!--多选框-->
<div v-else-if="item.type=='3'">
<el-form-item v-bind:label="item.key">
<el-select v-model="item.values" multiple placeholder="请选择" style="width: 100%" size="small"
:filterable="true">
<el-option
v-for="config in item.valueConfig"
:key="config.value"
:label="config.name"
:value="config.value">
</el-option>
</el-select>
<span style="color: #F9AA40;" v-html="item.desc"></span>
</el-form-item>
</div>
</div>
</el-form>
<span slot="footer" class="dialog-footer">
<el-button type="primary" @click="addTaskInfo('showAddTaskForm')"
:loading="submitLoading">提交</el-button>
<el-button @click.native="showAddTaskView = false">取 消</el-button>
</span>
</el-dialog>
<!--新增表单区域end-->
Js部分：
//异步任务
handleSuccess(response, file, fileList, key) {
this.submitLoading = false
//置空
this.removeKey(key)
if (response.retcode == '0000') {
//构造参数集合
let data = {key: key, value: response.url}
this.taskDataInfo.extParams.push(data);
file.url = response.url;
this.fileList = fileList;
this.$message.success('上传成功');
} else {
this.$message.error('上传失败！');
fileList.some((item, i) => {
if (item.name == file.name) {
fileList.splice(i, 1)
//在数组的some方法中，如果return true，就会立即终止这个数组的后续循环
return true
}
})
}
},
removeKey(key) {
let param = this.taskDataInfo.extParams
param.forEach(function (item, index) {
if (item.key == key) {
item.value = '';
}
})
},
removeAllValue() {
let param = this.taskDataInfo.extParams
param.forEach(function (item, index) {
item.value = ''
})
},
handleRemove(file, fileList, key) {
this.submitLoading = false
this.removeKey(key);
this.fileList = fileList;
},
beforeRemove(file) {
return this.$confirm(`确定移除 ${file.name}？`);
},
handleExceed(files, fileList) {
this.$message.warning(`当前限制选择 1 个文件`);
},
handleProgress(file, fileList) {
this.submitLoading = true
},
//动态配置添加表单参数
findParamForOp(e) {
this.taskDataInfo.extParams = this.taskParamConfigMap.get(this.taskDataInfo.ctype);
this.typeDesc = this.taskTypeDescMap.get(this.taskDataInfo.ctype);
this.monitorConfig.find((pid) => this.monitorConfig.pid === this.taskDataInfo.pid)
},
//初始化任务类型
initSyncTaskType() {
let param = {px: 1, ps: 1000}
q_monitor_plugin(param).then(resp => {
let data = resp.data;
this.monitorConfig = data
if (data.length > 0) {
data.forEach((item, index) => {
this.taskParamConfigMap.set(item.scriptType, item.params);
this.taskTypeDescMap.set(item.scriptType, item.desc);
});
}
});
},
showAddTaskDialog() {
this.clearTaskInfo();
this.showAddTaskView = true;
this.typeDesc = this.taskTypeDescMap.get(this.taskDataInfo.ctype);
},
/*新增*/
addTaskInfo(formName) {
this.$refs[formName].validate((valid) => {
if (valid) {
this.submitLoading = true;
let param =Object.assign({}, this.taskDataInfo)
console.log(this.monitorConfig[0].pid)
console.log(this.taskDataInfo.mid)
param['mid'] = this.taskDataInfo.mid
param['pluginId'] = this.monitorConfig[0].pid
//发送新增任务请求
a_monitor_config(param).then(resp => {
this.submitLoading = false
this.$message.success('新增任务成功')
this.showAddTaskView = false
this.loadData();
//清空动态表单数据
this.removeAllValue();
}).catch(resp => {
this.submitLoading = false
});
} else {
return false;
}
});
},
/*新增前失败后清除数据*/
clearTaskInfo() {
var data = {
name: '',
extParams: [],
scriptType: null,
ctype:''
}
this.taskDataInfo = data;
this.fileList = [];
}
新增知识点1
表格单元格内容支持html样式
参考代码：
<el-table-column
align="center"
width="200"
label="插件描述">
<template slot-scope="scope">
<p v-html='scope.row.desc'></p>
</template>
</el-table-column>
新增知识点2
Tooltip 文字提示
参考代码：
<el-table-column
align="center"
label="参数"
width="150">
<template slot-scope="scope">
<span v-if="scope.row.params">
<el-tooltip class="item" effect="light" placement="top-end">
<div slot="content" style="max-width: 600px;height: auto">
{{scope.row.params}}
</div>
<a style="cursor: pointer;">参数详情</a>
</el-tooltip>
</span>
<span v-else style="color: red">--</span>
</template>
</el-table-column>
难点开发耗费较多时间，攻克后相关技术已有了部分了解，初步版本完善后有助于后续部分功能进一步提升开发。。。
被折叠的 条评论
为什么被折叠?
到【灌水乐园】发言
