|
@@ -5,25 +5,15 @@
|
|
|
<div class="page-form-title-box">
|
|
|
<el-form :model="queryParams" class="form-box" ref="queryForm"
|
|
|
:inline="true" style="width:100%;">
|
|
|
- <el-form-item label="" prop="queryData1">
|
|
|
+ <el-form-item label="" prop="searchValue ">
|
|
|
<el-input
|
|
|
maxLength="30"
|
|
|
- v-model="queryParams.queryData1"
|
|
|
+ v-model="queryParams.searchValue "
|
|
|
placeholder="请输入关键词"
|
|
|
clearable
|
|
|
style="width: 200px"
|
|
|
/>
|
|
|
</el-form-item>
|
|
|
- <el-form-item label="" prop="queryData2">
|
|
|
- <el-select v-model="queryParams.queryData2" clearable placeholder="请选择设备类型" style="width: 200px">
|
|
|
- <el-option
|
|
|
- v-for="dict in options"
|
|
|
- :key="dict.value"
|
|
|
- :label="dict.label"
|
|
|
- :value="dict.value"
|
|
|
- />
|
|
|
- </el-select>
|
|
|
- </el-form-item>
|
|
|
<p class="page-inquire-common-style-button" @click="handleQuery">查询</p>
|
|
|
<p class="page-reset-common-style-button" @click="resetQuery">重置</p>
|
|
|
<p class="page-submit-common-style-button"
|
|
@@ -35,27 +25,32 @@
|
|
|
</div>
|
|
|
<div class="page-content-box">
|
|
|
<el-table class="table-box" v-loading="loading" border :data="dataList">
|
|
|
- <el-table-column label="名称" width="80" align="left" prop="data1" />
|
|
|
- <el-table-column label="类型" align="left" prop="data2" show-overflow-tooltip/>
|
|
|
- <el-table-column label="文件地址" align="left" prop="data3" show-overflow-tooltip/>
|
|
|
- <el-table-column label="状态" align="left" prop="data4" show-overflow-tooltip/>
|
|
|
- <el-table-column label="创建时间" align="left" prop="data5" show-overflow-tooltip>
|
|
|
+ <el-table-column label="名称" prop="name" />
|
|
|
+ <el-table-column label="类型" prop="type" width="200" show-overflow-tooltip>
|
|
|
+ <template slot-scope="scope">
|
|
|
+ <span>{{scope.row.type == 1 ? 'jar文件' : (scope.row.type == 2 ? '存放地址' : '')}}</span>
|
|
|
+ </template>
|
|
|
+ </el-table-column>
|
|
|
+ <el-table-column label="文件地址" prop="addr" width="500" show-overflow-tooltip>
|
|
|
<template slot-scope="scope">
|
|
|
- <span>{{ parseTime(scope.row.data5) }}</span>
|
|
|
+ <span class="clickCopy" @click="clickCopy(scope.row.addr)">{{scope.row.addr}}</span>
|
|
|
</template>
|
|
|
</el-table-column>
|
|
|
- <el-table-column label="操作" align="left" class-name="small-padding fixed-width">
|
|
|
+ <!--<el-table-column label="状态" prop="data4" show-overflow-tooltip/>-->
|
|
|
+ <el-table-column label="创建时间" prop="createTime" width="200" show-overflow-tooltip>
|
|
|
+ <template slot-scope="scope">
|
|
|
+ <span>{{ parseTime(scope.row.createTime,"{y}-{m}-{d} {h}:{i}") }}</span>
|
|
|
+ </template>
|
|
|
+ </el-table-column>
|
|
|
+ <el-table-column label="操作" class-name="small-padding fixed-width" width="160">
|
|
|
<template slot-scope="scope">
|
|
|
<div class="table-button-box">
|
|
|
<p class="table-button-null"></p>
|
|
|
<p class="table-button-p"
|
|
|
- @click="tableButton(2,scope.row)"
|
|
|
- >详情</p>
|
|
|
- <p class="table-button-p"
|
|
|
- @click="tableButton(3,scope.row)"
|
|
|
+ @click="tableButton(1,scope.row)"
|
|
|
>编辑</p>
|
|
|
<p class="table-button-p"
|
|
|
- @click="tableButton(4,scope.row)"
|
|
|
+ @click="tableButton(2,scope.row)"
|
|
|
>删除</p>
|
|
|
<p class="table-button-null"></p>
|
|
|
</div>
|
|
@@ -75,6 +70,59 @@
|
|
|
<el-dialog class="protocolManagement-dialog" :title='dialogTitle' width="540px" append-to-body
|
|
|
:visible.sync="dialogType" v-if="dialogType" @close="dialogOff()"
|
|
|
:close-on-click-modal="false" :close-on-press-escape="false">
|
|
|
+ <div class="protocolManagement-dialog-box">
|
|
|
+ <el-form :model="dialogForm" class="dialogForm" ref="dialogForm"
|
|
|
+ :rules="rules" style="width:100%;" label-width="90px">
|
|
|
+ <el-form-item label="名称:" prop="name">
|
|
|
+ <el-input
|
|
|
+ maxLength="30"
|
|
|
+ v-model="dialogForm.name"
|
|
|
+ placeholder="请输入名称"
|
|
|
+ clearable
|
|
|
+ style="width: 360px"
|
|
|
+ />
|
|
|
+ </el-form-item>
|
|
|
+ <el-form-item label="类型:" prop="type">
|
|
|
+ <el-radio-group v-model="dialogForm.type">
|
|
|
+ <el-radio :label="1">jar文件</el-radio>
|
|
|
+ <el-radio :label="2">存放地址</el-radio>
|
|
|
+ </el-radio-group>
|
|
|
+ </el-form-item>
|
|
|
+ <el-form-item label="文件:" prop="addr">
|
|
|
+ <div v-if="dialogForm.type == 1">
|
|
|
+ <el-upload
|
|
|
+ class="certificate-avatar-uploader"
|
|
|
+ :action="uploadImgUrl"
|
|
|
+ :show-file-list="false"
|
|
|
+ :on-success="handleAvatarSuccess"
|
|
|
+ :headers="headers"
|
|
|
+ :before-upload="beforeAvatarUpload">
|
|
|
+ <p class="dialog-up-button-p">{{dialogForm.addr?dialogForm.addr:'上传'}}</p>
|
|
|
+ </el-upload>
|
|
|
+ </div>
|
|
|
+ <div v-if="dialogForm.type == 2">
|
|
|
+ <el-input
|
|
|
+ maxLength="200"
|
|
|
+ v-model="dialogForm.addr"
|
|
|
+ placeholder="请输入存放地址"
|
|
|
+ style="width: 360px"
|
|
|
+ />
|
|
|
+ </div>
|
|
|
+ </el-form-item>
|
|
|
+ <el-form-item label="说明:" prop="remark">
|
|
|
+ <el-input
|
|
|
+ v-model="dialogForm.remark"
|
|
|
+ maxLength="200"
|
|
|
+ placeholder="请输入说明"
|
|
|
+ :show-word-limit="true"
|
|
|
+ style="width:360px;"
|
|
|
+ type="textarea"
|
|
|
+ resize="none"
|
|
|
+ :rows="2"
|
|
|
+ />
|
|
|
+ </el-form-item>
|
|
|
+ </el-form>
|
|
|
+ </div>
|
|
|
<div slot="footer" class="dialog-footer dialog-footer-box">
|
|
|
<p class="dialog-footer-button-null"></p>
|
|
|
<p class="dialog-footer-button-info" @click="dialogOff()">取消</p>
|
|
@@ -86,31 +134,49 @@
|
|
|
</template>
|
|
|
|
|
|
<script>
|
|
|
+ import { getToken } from "@/utils/auth";
|
|
|
+ import { iotProtocolList,iotProtocolAdd,iotProtocolUpdate,iotProtocolDelete } from "@/api/iotDevice/index";
|
|
|
export default {
|
|
|
name: 'index',
|
|
|
data(){
|
|
|
return{
|
|
|
+ uploadImgUrl: this.uploadUrl(), // 上传的图片服务器地址
|
|
|
+ headers: {
|
|
|
+ Authorization:getToken(),
|
|
|
+ },
|
|
|
loading:false,
|
|
|
- options:[{label:'启用',value:true},{label:'停用',value:false}],
|
|
|
+ typeOptionList:[],
|
|
|
queryParams:{
|
|
|
page:1,
|
|
|
pageSize:20,
|
|
|
- queryData1:"",
|
|
|
- jobGroup:null,
|
|
|
- queryData2:null,
|
|
|
+ searchValue:"",
|
|
|
},
|
|
|
dataList:[],
|
|
|
total:0,
|
|
|
dialogTitle:null,
|
|
|
dialogType:false,
|
|
|
dialogForm:{},
|
|
|
+ rules:{
|
|
|
+ name:[
|
|
|
+ { required: true, message: '请输入名称', trigger: 'blur' },
|
|
|
+ { required: true, message: "请输入名称", validator: this.spaceJudgment, trigger: "blur" }
|
|
|
+ ],
|
|
|
+ type:[
|
|
|
+ { required: true, message: '请选择类型', trigger: 'blur' },
|
|
|
+ { required: true, message: "请选择类型", validator: this.spaceJudgment, trigger: "blur" }
|
|
|
+ ],
|
|
|
+ addr:[
|
|
|
+ { required: true, message: '请选择文件或输入文件地址', trigger: 'blur' },
|
|
|
+ { required: true, message: "请选择文件或输入文件地址", validator: this.spaceJudgment, trigger: "blur" }
|
|
|
+ ],
|
|
|
+ },
|
|
|
}
|
|
|
},
|
|
|
created(){
|
|
|
|
|
|
},
|
|
|
mounted(){
|
|
|
-
|
|
|
+ this.handleQuery();
|
|
|
},
|
|
|
methods:{
|
|
|
//弹层关闭
|
|
@@ -125,6 +191,25 @@
|
|
|
},
|
|
|
//弹层确定
|
|
|
dialogSubmit(){
|
|
|
+ // let obj = JSON.parse(JSON.stringify(this.dialogForm))
|
|
|
+ let obj = {
|
|
|
+ name:this.dialogForm.name,
|
|
|
+ type:this.dialogForm.type,
|
|
|
+ addr:this.dialogForm.addr,
|
|
|
+ remark:this.dialogForm.remark,
|
|
|
+ }
|
|
|
+ if(this.dialogForm.id){
|
|
|
+ obj.id = this.dialogForm.id;
|
|
|
+ iotProtocolUpdate(obj).then(response => {
|
|
|
+ this.msgSuccess(response.message);
|
|
|
+ this.getList();
|
|
|
+ });
|
|
|
+ }else{
|
|
|
+ iotProtocolAdd(obj).then(response => {
|
|
|
+ this.msgSuccess(response.message);
|
|
|
+ this.getList();
|
|
|
+ });
|
|
|
+ }
|
|
|
this.$set(this,'dialogType',false);
|
|
|
},
|
|
|
handleQuery(){
|
|
@@ -135,34 +220,63 @@
|
|
|
this.$set(this,'queryParams',{
|
|
|
page:1,
|
|
|
pageSize:20,
|
|
|
- queryData1:"",
|
|
|
- queryData2:null,
|
|
|
+ searchValue:"",
|
|
|
});
|
|
|
this.getList();
|
|
|
},
|
|
|
dialogFormReset(){
|
|
|
this.$set(this,'dialogForm',{
|
|
|
-
|
|
|
+ name:'',
|
|
|
+ type:1,
|
|
|
+ addr:'',
|
|
|
+ remark:'',
|
|
|
});
|
|
|
},
|
|
|
//获取数据列表
|
|
|
getList(){
|
|
|
- // this.$set(this,'loading',true);
|
|
|
- // listJobLog(this.queryParams).then(response => {
|
|
|
- // this.$set(this,'loading',false);
|
|
|
- // this.$set(this,'dataList',response.data.records);
|
|
|
- // this.$set(this,'total',response.data.total);
|
|
|
- // });
|
|
|
+ this.$set(this,'loading',true);
|
|
|
+ iotProtocolList(this.queryParams).then(response => {
|
|
|
+ this.$set(this,'loading',false);
|
|
|
+ this.$set(this,'dataList',response.data.records);
|
|
|
+ this.$set(this,'total',response.data.total);
|
|
|
+ });
|
|
|
},
|
|
|
tableButton(type,row){
|
|
|
- if(type == 2){
|
|
|
-
|
|
|
- }else if(type == 3){
|
|
|
- this.dialogFormReset();
|
|
|
- }else if(type == 4){
|
|
|
-
|
|
|
+ let self = this;
|
|
|
+ if(type == 1){
|
|
|
+ this.$set(this,'dialogTitle','编辑');
|
|
|
+ this.$set(this,'dialogForm',JSON.parse(JSON.stringify(row)));
|
|
|
+ this.$set(this,'dialogType',true);
|
|
|
+ }else if(type == 2){
|
|
|
+ this.$confirm('是否确认删除?', "警告", {
|
|
|
+ confirmButtonText: "确定",
|
|
|
+ cancelButtonText: "取消",
|
|
|
+ type: "warning"
|
|
|
+ }).then(function() {
|
|
|
+ iotProtocolDelete({id:row.id}).then(response => {
|
|
|
+ self.msgSuccess(response.message);
|
|
|
+ self.getList();
|
|
|
+ });
|
|
|
+ }).then(() => {
|
|
|
+ }).catch(() => {});
|
|
|
}
|
|
|
},
|
|
|
+ //上传
|
|
|
+ handleAvatarSuccess(res) {
|
|
|
+ this.$set(this.dialogForm,'addr',res.data.url);
|
|
|
+ this.$forceUpdate()
|
|
|
+ },
|
|
|
+ beforeAvatarUpload(file) {
|
|
|
+ let fileNameList = file.name.split(".");
|
|
|
+ let type = false;
|
|
|
+ if (fileNameList[fileNameList.length-1] == 'jar') {
|
|
|
+ type = true;
|
|
|
+ }else{
|
|
|
+ this.$message.error('只能上传jar文件');
|
|
|
+ type = false;
|
|
|
+ }
|
|
|
+ return type;
|
|
|
+ },
|
|
|
},
|
|
|
}
|
|
|
</script>
|
|
@@ -186,3 +300,22 @@
|
|
|
}
|
|
|
}
|
|
|
</style>
|
|
|
+<style lang="scss">
|
|
|
+ .protocolManagement-dialog{
|
|
|
+ .dialog-up-button-p{
|
|
|
+ padding:0 20px;
|
|
|
+ width:360px;
|
|
|
+ border:1px solid #dedede;
|
|
|
+ text-align: center;
|
|
|
+ line-height:40px;
|
|
|
+ height:40px;
|
|
|
+ border-radius:4px;
|
|
|
+ color:#999;
|
|
|
+ /*单行省略号*/
|
|
|
+ display:block;
|
|
|
+ overflow:hidden;
|
|
|
+ text-overflow:ellipsis;
|
|
|
+ white-space:nowrap;
|
|
|
+ }
|
|
|
+ }
|
|
|
+</style>
|