rpa
/
eladmin-web

<template>
  <div class="app-container">
  	<div style="margin-bottom:10px">
  		<el-button type="success" @click="addBtn">新增</el-button>
		<el-button type="success" @click="exportTempBtn">模板下载</el-button>
  	</div>
    <!--搜索-->
    <el-form class="mt_15" ref="searchForm" inline size="small">
  		<el-form-item label="状态">
  			<el-select v-model.trim="searchParm.status" placeholder="请选择">
			    <el-option
			      v-for="item in searchStatusList"
			      :key="item.value"
			      :label="item.label"
			      :value="item.value">
			    </el-option>
			  </el-select>
  		</el-form-item>
  		<el-form-item label="备注">
    		<el-input v-model.trim="searchParm.remarks" clearable></el-input>
  		</el-form-item>
  		<el-form-item>
    		<el-button type="primary" @click="goSearch">搜索</el-button>
    		<el-button type="warning" @click="resetForm">重置</el-button>
  		</el-form-item>
		</el-form>
    <!--表格渲染-->
    <el-table ref="table" border size="small" :data="list" :header-cell-style="{textAlign:'center'}">
      <el-table-column label="序号" type="index" width="50" align="center"/>
      <el-table-column label="路径" prop="path" align="center"/>
      <el-table-column label="状态" prop="status" align="center">
      	<template slot-scope="scope">
      		{{ scope.row.status | getStatus}}
      	</template>
      </el-table-column>
      <el-table-column label="备注" prop="remarks" align="center"/>
      <el-table-column label="创建时间" prop="createdAt" align="center"/>
      <el-table-column label="修改时间" prop="updatedAt" align="center"/>
      <el-table-column label="操作" width="240">
      	<template slot-scope="scope">
			<el-button type="info" @click="getBtnById(scope.row.id)">查看</el-button>
      		<el-button type="warning" @click="editById(scope.row)">修改</el-button>
    		<span v-if="scope.row.errorPath != null" slot="footer">
    			<el-button type="danger" @click="getError(scope.row.errorPath)" style="margin-left:10px">异常下载</el-button>
    		</span>
      	</template>
      </el-table-column>
    </el-table>
    <!--分页-->
    <div class="mt_15">
	    <el-pagination
	      @size-change="handleSizeChange"
	      @current-change="handleCurrentChange"
	      :current-page="searchParm.page"
	      :page-sizes="[10, 20, 30, 40, 50]"
	      :page-size="searchParm.pageSize"
	      layout="total, sizes, prev, pager, next, jumper"
	      :total="total">
	    </el-pagination>
  </div>
  
  <!--新增弹窗-->
  <el-dialog :visible.sync="dialogAddVisible" :title="dialogAddTitle" center width="45%">
  	<div class="dialog-content">
  		 <el-form ref="addParm" size="small" :model="addParm" :rules="rules" label-width="100px">
  		 	<el-input v-model.trim="addParm.path" type="hidden" clearable></el-input>
	  		<el-form-item label="路径" prop="path">
	    		<el-upload
					  class="upload-demo"
					  ref="upload"
					  :data = "updateFileType"
					  :headers="uploadHeaders"
					  :action="uploadFileUrl"
					  :show-file-list = "false"
					  :on-success="uploadSuccess"
					  :before-upload="beforeAvatarUpload">
					  <el-button slot="trigger" size="small" type="primary">选取文件</el-button>
					  <div slot="tip" class="el-upload__tip">只能上传xlsl文件，且不超过10M</div>
					</el-upload>
	  		</el-form-item>
	  		<el-form-item label="备注" prop="remarks">
	    		<el-input v-model.trim="addParm.remarks" clearable></el-input>
	  		</el-form-item>
			</el-form>
  	</div>
  	<span slot="footer">
  		<el-button type="info" @click="sureAddCancle('addParm')">取消</el-button>
      <el-button type="primary" @click="sureAdd('addParm')">确认</el-button>
  	</span>
  </el-dialog>
  
  
  <!--修改弹窗-->
  <el-dialog :visible.sync="dialogEditVisible" :title="dialogEditTitle" center width="45%">
  	<div class="dialog-content">
  		 <el-form ref="form" size="small" label-width="100px">
	  		<el-form-item label="备注" prop="remarks">
	    		<el-input v-model.trim="editParm.remarks" clearable></el-input>
	  		</el-form-item>
			</el-form>
  	</div>
  	<span slot="footer">
  		<el-button type="info" @click="sureEditCancle('editParm')">取消</el-button>
      <el-button type="primary" @click="sureEdit('editParm')">确认</el-button>
  	</span>
  </el-dialog>
  
  <!--详情弹窗-->
  <el-dialog :visible.sync="dialogDetailVisible" :title="dialogDetailTitle" center width="45%">
  	<div class="dialog-content">
  		 <el-form ref="form" size="small" label-width="100px">
	  		<el-form-item label="路径" prop="path" >
	    		<el-input v-model.trim="detailParm.path" :disabled="true"></el-input>
	  		</el-form-item>
	  		<el-form-item label="状态" prop="status" >
	    		<!-- <el-input v-model.trim="detailParm.status" :disabled="true"></el-input> -->
				<el-select v-model.trim="detailParm.status" disabled placeholder="请选择">
					<el-option
			    	  v-for="item in statusList"
			     	 :key="item.value"
			     	 :label="item.label"
			     	 :value="item.value">
			   		 </el-option>
			  </el-select>
	  		</el-form-item>
	  		<el-form-item label="备注" prop="remarks">
	    		<el-input v-model.trim="detailParm.remarks" :disabled="true"></el-input>
	  		</el-form-item>
			</el-form>
  	</div>
  </el-dialog>
  
  </div>
</template>
<script>
	import { add, editById, delById, getList, getById } from '@/api/group/excel'
export default {
	filters: {
	  getStatus: function (value) {
	   if(value == 1) {
	   	return '待导入';
	   } else if (value == 2) {
	   	return '导入成功';
	   } else {
	   	return '导入失败';
	   }
	  }
	},
//	数据
  data() {
    return {
    	searchParm: {
    		page: 1,
    		pageSize: 10,
    		sort:'created_at',
    		order:'desc',
    		status:null,
    		remarks:null
    	},
    	total:0,
      list: [],
	    uploadHeaders:{ Authorization: this.$store.getters.token },
      dialogAddVisible: false,
      dialogAddTitle: '新增',
      dialogDetailVisible: false,
      dialogDetailTitle: '详情',
      dialogEditVisible: false,
      dialogEditTitle: '修改',
      uploadFileUrl: process.env.VUE_APP_BASE_API + '/api/file/uploadFile',
	  	tempUrl:process.env.VUE_APP_BASE_API + '/api/ctExcel/exportTemp',
      updateFileType: {type: 10},
      searchStatusList:[{
	          value: null,
	          label: '全部'
	        },
	        {
	          value: 1,
	          label: '待导入'
	        }, {
	          value: 2,
	          label: '导入成功'
	        }, {
	          value: 3,
	          label: '导入失败'
			}],
	  statusList:[{
				value: 1,
				label: '待导入'
			},
			{
				value: 2,
				label: '导入成功'
			},
			{
				value: 3,
				label: '导入失败'
			}],
      addParm: {
      	id: null,
      	path:'',
    		remarks:''
      },
      detailParm: {
      	id: null,
      	path:'',
    		remarks:'',
    		status: null
      },
      editParm: {
      	id: null,
    		remarks: ''
      },
      rules: {
          path: [
            { required: true, message: '请输入路径', trigger: 'blur' }
          ],
          remarks: [
            { required: true, message: '请输入备注', trigger: 'blur' }
          ]
        }
      
    }
  },
  // 调用
  created() {
		this.goSearch()
  },
	//方法
  methods: {
  	resetForm() {
        this.searchParm.status = null;
        this.searchParm.remarks = '';
        this.goSearch()
    },
	//	查询
	goSearch() {
		this.searchParm.page=1
		this.getDataList()
	},
  beforeAvatarUpload(file) {
    console.log(file);
//  const isXlsl = file.type === 'xlsl';
    const isLt10M = file.size / 1024 / 1024 <10;

//  if (!isXlsl) {
//    this.$message.error('上传头像图片只能是 xlsl 格式!');
//  }
    if (!isLt10M) {s
      this.$message.error('上传头像图片大小不能超过 10MB!');
    }
//  return isXlsl && isLt10M;
    return isLt10M;
  },
  uploadSuccess(res, file) {
    if(res.code==200) {
				this.addParm.path =res.data.list[0].path;
			}
  },
  //excel模板下载
	exportTempBtn(){
		console.log(this.tempUrl);
		window.location.href = this.tempUrl;
	},
	// 新增
	addBtn(){
		this.addParm = {
			  id: null,
      	path:'',
    		remarks:''
      }
		this.dialogAddTitle='新增'
		this.dialogAddVisible = true;
		this.$refs.addParm.clearValidate();
	},
		//	修改
	editById(data){
		getById({id: data.id}).then(res => {
			if(res.code==200) {
				this.editParm.id = res.data.id;
				this.editParm.remarks = res.data.remarks;
				this.dialogEditVisible = true
				this.$refs.addParm.clearValidate();
			}
		}).catch(err => {
			console.log(err)
		})
	},
	// 确认修改
	sureEdit(editParm){
		editById(this.editParm).then(res => {
				if(res.code==200) {
					console.log(res)
					this.dialogEditVisible = false
					this.$message.success('修改成功!')
					this.getDataList()
				}
			}).catch(err => {
				console.log(err)
			})
	},
	sureAddCancle(editParm) {
		this.dialogEditVisible=flase
		this.$refs.editParm.clearValidate();
	},
	// 确认新增
	sureAdd(addParm){
		this.$refs[addParm].validate((valid) => {
		  if (valid) {
		  	this.$refs.addParm.clearValidate();
				add(this.addParm).then(res => {
						if(res.code==200) {
							this.dialogAddVisible = false
							this.$message.success('新增成功!')
							this.getDataList()
						}
				}).catch(err => {
						console.log(err)
				})
		  } else {
				console.log('error submit!!');
				return false;
		  }
		});
	},
	sureAddCancle(addParm) {
		this.dialogAddVisible=flase
		this.$refs.addParm.clearValidate();
	},
	// 查看根据id
	getBtnById(id){
		getById({id}).then(res => {
			if(res.code==200) {
				this.detailParm.id = res.data.id;
				this.detailParm.path = res.data.path;
				this.detailParm.remarks = res.data.remarks;
				this.detailParm.status = res.data.status;
				this.dialogDetailVisible = true
				
			}
		}).catch(err => {
			console.log(err)
		})
	},
	getError(errorPath){
		console.log(errorPath);
		this.$message.success('下载成功!');
		
		if(errorPath != null) {
			window.location.href = errorPath;
		}
	},
	// 分页获取表格数据
	getDataList(){
		getList(this.searchParm).then(res => {
				console.log(res)
				if(res.code==200) {
					console.log(res)
					this.list = res.data.list;
					this.total = res.data.total;
				}
			}).catch(err => {
				console.log(err)
			})
	},
	
	//	分页
		handleSizeChange(val) {
   		console.log(`每页 ${val} 条`);
   		this.searchParm.pageSize = val;
   		this.getDataList();
  	},
  	handleCurrentChange(val) {
    	console.log(`当前页: ${val}`);
    	this.searchParm.page = val;
    	this.getDataList();
  	}
  }
}
</script>

<style rel="stylesheet/scss" lang="scss" scoped>
</style>