store_confs.vue

<template>
  <div class="contentBox">
	  <div class="content">
		  <div style="padding:8px 20px;">
			  <span class="inputBox">
				  <el-input v-model="storename" placeholder="请输入存储配置名称"></el-input>
			  </span>
			  <el-button type="primary" style="position: relative;top: -2px;" @click="query">查询</el-button>
			  <span style="float: right;">
					<el-button type="info" icon="el-icon-search" @click="add">添加</el-button>
			  </span>
		  </div>
		  <div  style="padding: 0 15px 20px 23px;">
			  <el-table
				:height="tableHeight"
			      :data="tableData"
				  stripe
			      border
			      style="width: 100%">
			      <el-table-column
				  align="center"
			        prop="name"
			        label="名称">
			      </el-table-column>
			      <el-table-column
			        prop="create_dt"
					align="center"
			        label="上传时间">
			      </el-table-column>
			      <el-table-column
					  align="center"
			        prop="task_list"
			        label="应用任务">
					<template slot-scope="scope">
						<el-tooltip :content="scope.row.ellipsis" placement="bottom" effect="light" :visible-arrow=false>
							<span class="ellipsis">{{scope.row.ellipsis}}</span>
						</el-tooltip>
					  </template>
			      </el-table-column>
				  <el-table-column
					  align="center"
					  width="300"
				    prop="operation"
				    label="操作">
					<template slot-scope="scope">
						<el-tooltip content="详情" placement="bottom" effect="light" :visible-arrow=false>
							<span class="iconfont icon-xiugai editIcon"   @click="detail(scope.$index, scope.row)"></span>
						</el-tooltip>
						<span class="tableSpanBorder"></span>
						<el-tooltip content="删除" placement="bottom" effect="light" :visible-arrow=false>
							<span class="iconfont icon-detail  delIcon"   @click="delFun(scope.$index, scope.row)"></span>
						</el-tooltip>
					</template>
				  </el-table-column>
			    </el-table>
				<div style="margin-top: 28px;">
					<el-pagination
					style="float: right;"
					  background
					  prev-text="上一页"
					  next-text="下一页"
					   :page-sizes="[30, 50, 100, 200]"
					  layout="prev, pager, next,sizes"
					  :current-page="page"
					  @size-change="handleSizeChange"
					  @current-change="handleCurrentChange"
					  :total="total">
					</el-pagination>
					<div style="clear: both;"></div>
				</div>
				
		  </div>
	  </div>
		
		<el-dialog
			title="添加"
			:visible.sync="addVisible"
			width="450px">
			<div>
				<el-form label-position="left" label-width="120px">
					<el-form-item label="配置名称">
						<el-input v-model="names"></el-input>
					</el-form-item>
					<el-form-item label="添加文件">
					<el-upload
						ref="upload"
						action="uploadUrl"
						:http-request="httpRequest"
						multiple
						name="file"
						:auto-upload="false">
						<el-button slot="trigger" size="small" type="primary">选取文件</el-button>
						<!-- <div slot="tip" class="el-upload__tip">只能上传视频文件</div> -->
					</el-upload>
					</el-form-item>
				</el-form>
			</div>
			<span slot="footer" class="dialog-footer">
				<el-button @click="addVisible=false">取 消</el-button>
				<el-button type="primary" @click="save">上 传</el-button>
			</span>
		</el-dialog>
		
	  <el-dialog title="详情" :visible.sync="detailVisible" width="30%">
		  <div class="title">任务列表</div>
		  <div class="maxHeight">
			  <el-tree
			    :props="props"
			    :load="loadNode"
			    lazy>
			  </el-tree>
		  </div>
	  </el-dialog>
  </div>
</template>
<script>
	export default {
		data(){
			return{
				addVisible:false,
				uploadUrl: '',
				names:'',
				file:[],
				 props: {
				  label: 'name',
				  children: 'child',
				  isLeaf: 'leaf'
				},
				detailData:[],
				dev_unid: sessionStorage.getItem('dev_unid'),
				resource:{
					picture_busy: 0,
					picture_free: 0,
					video_busy: 0,
					video_free: 0,
				},
				total:0,
				page:1,
				pageSize:30,
				tableData: [],
				devsList:[],
				selectDevs:'',
				detailVisible:false,
				storename:'',
				curentSubList:[],
				tableHeight:window.opsTableHeight
			}
		},
		components:{
		},
		mounted(){
			this.query();
		},
		methods:{
			// 自定义的上传函数
			httpRequest(param) {
				this.file=[];
			// 一般情况下是在这里创建FormData对象，但我们需要上传多个文件，为避免发送多次请求，因此在这里只进行文件的获取，param可以拿到文件上传的所有信息
				this.file.push(param.file)
			},
			save(){
				this.$refs.upload.submit(); // 这里是执行文件上传的函数，其实也就是获取我们要上传的文件
				// 最重要的就是这段代码
					var upData = new FormData() // 首先创建FormData对象
						this.file.forEach((file)=>{
							upData.append('file', file); // 因为要上传多个文件，所以需要遍历一下才行
							upData.append('name', this.names);
							upData.append("is_temp", 0);
						})
				this.$api.resource.uploadStore(upData).then(res=>{
										this.query();
					})
				
			},
			 loadNode(node, resolve) {
			        if (node.level === 0) {
			          return resolve(this.curentSubList);
			        }
			        if (node.level > 1) return resolve([]);
					
					this.$api.resource.getSubTask({},node.data.unid).then(res=>{
						if(res.list_data==null){
							res.list_data=[];
						}
						res.list_data.forEach(item=>{
							item.name=item.subtask_name;
							item['leaf']=true;
						})
						resolve(res.list_data)
					})
			      },
			query(){
				this.tableData=[];
				let offset = (this.page - 1) * this.pageSize;
				this.$api.resource.getStoreConList({
					limit: this.pageSize,
					offset: offset,
					name__like: this.storename,
				},this.dev_unid).then((res)=>{
					this.total=res.total_num;
					if(res.list_data==null){
						this.tableData=[]
					}else{
						this.tableData=res.list_data;
					}
					this.tableData.forEach(list=>{
						let ellipsisText='';
						list.task_list.forEach(item=>{
							ellipsisText+=item.name+','
						})
						ellipsisText=ellipsisText.substring(0,ellipsisText.length-1);
						list['ellipsis']=ellipsisText;
						//树状图有子节点
						list['leaf']=false;
					})
					console.log(this.tableData)
				}).catch((error)=>{
					
				})
			},
			add(){
				this.addVisible=true;
			},
			taskFormatter(row, column, cellValue, index){
				let columnText='';
				row.task_list.forEach(item=>{
					columnText+=item.name+','
				})
				columnText=columnText.substring(0,columnText.length-1);
				return columnText
			},
			handleSizeChange(val) {
				this.pageSize=val;
				this.query();
			},
			handleCurrentChange(val) {
				this.page=val;
				this.query();
			  },
			detail(index,row){
				this.detailVisible=true;
				this.curentSubList=[];
				this.curentSubList=row.task_list;
			},
			delFun(index,row){
				this.$confirm('此操作将永久删除该选项, 是否继续?', '提示', {
				  confirmButtonText: '确定',
				  cancelButtonText: '取消',
				  type: 'warning'
				}).then(() => {
					this.$api.resource.delStore({},row.unid).then(res=>{
						if(res.ecode==200){
							this.$message({
								type: 'success',
								message: '删除成功!'
							});
							this.query();
						}
					})
				 
				}).catch(() => {
				  this.$message({
					type: 'info',
					message: '已取消删除'
				  });          
				});
			}
		},
	}
</script>
<style lang="scss" scoped>
	.topCon{
		background: $white-back-color;
		margin-bottom: 12px;
		height: 100px;
		.left{
			display: inline-block;
			margin: {
				top: 22px;
				left: 30px;
			};
			img{
				width:65px ;
				height: 55px;
				margin-right: 11px;
			}
			.topText{
				font-size:24px;
				font-family:MicrosoftYaHeiUI-Bold,MicrosoftYaHeiUI;
				font-weight:bold;
				margin-bottom: 4px;
			}
			.bottomText{
				font-size:14px;
				font-family:MicrosoftYaHeiUI;
			}
		}
		.right{
			float: right;
			.topText{
				font-size:28px;
				font-family:MicrosoftYaHeiUI-Bold,MicrosoftYaHeiUI;
				font-weight:bold;
			}
			.bottomText{
				position: relative;
				    top: -1px;
				font-size:14px;
				font-family:MicrosoftYaHeiUI;
			}
		}
		.textCon{
			display: inline-block;
			vertical-align: top;
		}
		.border{
			display: inline-block;
			height: 40px;
			border: {
				left: 2px solid $border-color;
			};
		}
		.rightBox{
			margin-top: 14px;
			display: inline-block;
			img{
				margin:{
					top:15px;
					right: 22px;
				}
			}
		}
		.rightBox:nth-of-type(1){
			img{
				width: 34px;
				height: 34px;
			}
			.textCon{
				margin-right:114px ;
			}
		}
		.rightBox:nth-of-type(2){
			    position: relative;
			    top: 4px;
			img{
				width: 40px;
				height: 40px;
				margin-left: 102px;
			}
			.textCon{
				margin-right:101px ;
			}
		}
		.rightBox:nth-of-type(3){
			img{
				width: 34px;
				height: 35px;
				margin-left: 104px;
			}
			.textCon{
				margin-right:184px ;
			}
		}
	}
	.title{
		font-size: 18px;
		margin-bottom: 6px;
	}
	.maxHeight{
		max-height: 400px;
		overflow-y: auto;
	}
	.ellipsis{
		display: inline-block;
		width: 200px;
		overflow: hidden;
		text-overflow:ellipsis;
		white-space: nowrap;
	}
	.resourceDiv{
		display: inline-block;
		margin-left: 10%;
		span{
			margin-right: 5%;
		}
	}
	.content{
		background: #FFFFFF;
	}
	.inputBox{
		margin-right: 20px;
	}
	.selectBox{
		margin-right: 20px;
	}
	.editIcon{
		cursor: pointer;
		color:#0069ff;
		font-size:16px;
	}
	.editIcon2{
		cursor: pointer;
		color:#87d14b;
		font-size:16px;
	}
	.playIcon{
		cursor: pointer;
		color:#34b3a2;
		font-size:16px;
	}
	.pauseIcon{
		cursor: pointer;
		color:#ffc62e;
		font-size:14px;
	}
	.delIcon{
		cursor: pointer;
		color:#f2365a;
		font-size:16px;
	}
</style>