rpa
/
eladmin-web
5
0
Fork 0
Code Issues 0 Pull-Requests 0 Releases 0 Wiki Aktivität
Rap 原分销系统代码Web
Du kannst nicht mehr als 25 Themen auswählen Themen müssen entweder mit einem Buchstaben oder einer Ziffer beginnen. Sie können Bindestriche („-“) enthalten und bis zu 35 Zeichen lang sein.
2 Commits
2 Branches
3.1MB
Struktur: 4319823210
Branches Tags
${ item.name }
Erstelle Branch ${ searchTerm }
von „4319823210“
${ noResults }
eladmin-web/.svn/pristine/3b/3bfab67c70adf6041da73dff887...

383 Zeilen
10KB
Originalformat Blame Verlauf 

  1. <template>

  2.   <div class="app-container">

  3.   	<div style="margin-bottom:10px">

  4.   		<el-button type="success" @click="addBtn">新增</el-button>

  5. 		<el-button type="success" @click="exportTempBtn">模板下载</el-button>

  6.   	</div>

  7.     <!--搜索-->

  8.     <el-form class="mt_15" ref="searchForm" inline size="small">

  9.   		<el-form-item label="状态">

  10.   			<el-select v-model.trim="searchParm.status" placeholder="请选择">

  11. 			    <el-option

  12. 			      v-for="item in searchStatusList"

  13. 			      :key="item.value"

  14. 			      :label="item.label"

  15. 			      :value="item.value">

  16. 			    </el-option>

  17. 			  </el-select>

  18.   		</el-form-item>

  19.   		<el-form-item label="备注">

  20.     		<el-input v-model.trim="searchParm.remarks" clearable></el-input>

  21.   		</el-form-item>

  22.   		<el-form-item>

  23.     		<el-button type="primary" @click="goSearch">搜索</el-button>

  24.     		<el-button type="warning" @click="resetForm">重置</el-button>

  25.   		</el-form-item>

  26. 		</el-form>

  27.     <!--表格渲染-->

  28.     <el-table ref="table" border size="small" :data="list" :header-cell-style="{textAlign:'center'}">

  29.       <el-table-column label="序号" type="index" width="50" align="center"/>

  30.       <el-table-column label="路径" prop="path" align="center"/>

  31.       <el-table-column label="状态" prop="status" align="center">

  32.       	<template slot-scope="scope">

  33.       		{{ scope.row.status | getStatus}}

  34.       	</template>

  35.       </el-table-column>

  36.       <el-table-column label="备注" prop="remarks" align="center"/>

  37.       <el-table-column label="创建时间" prop="createdAt" align="center"/>

  38.       <el-table-column label="修改时间" prop="updatedAt" align="center"/>

  39.       <el-table-column label="操作" width="240">

  40.       	<template slot-scope="scope">

  41. 			<el-button type="info" @click="getBtnById(scope.row.id)">查看</el-button>

  42.       		<el-button type="warning" @click="editById(scope.row)">修改</el-button>

  43.     		<span v-if="scope.row.errorPath != null" slot="footer">

  44.     			<el-button type="danger" @click="getError(scope.row.errorPath)" style="margin-left:10px">异常下载</el-button>

  45.     		</span>

  46.       	</template>

  47.       </el-table-column>

  48.     </el-table>

  49.     <!--分页-->

  50.     <div class="mt_15">

  51. 	    <el-pagination

  52. 	      @size-change="handleSizeChange"

  53. 	      @current-change="handleCurrentChange"

  54. 	      :current-page="searchParm.page"

  55. 	      :page-sizes="[10, 20, 30, 40, 50]"

  56. 	      :page-size="searchParm.pageSize"

  57. 	      layout="total, sizes, prev, pager, next, jumper"

  58. 	      :total="total">

  59. 	    </el-pagination>

  60.   </div>

  61.   

  62.   <!--新增弹窗-->

  63.   <el-dialog :visible.sync="dialogAddVisible" :title="dialogAddTitle" center width="45%">

  64.   	<div class="dialog-content">

  65.   		 <el-form ref="addParm" size="small" :model="addParm" :rules="rules" label-width="100px">

  66.   		 	<el-input v-model.trim="addParm.path" type="hidden" clearable></el-input>

  67. 	  		<el-form-item label="路径" prop="path">

  68. 	    		<el-upload

  69. 					  class="upload-demo"

  70. 					  ref="upload"

  71. 					  :data = "updateFileType"

  72. 					  :headers="uploadHeaders"

  73. 					  :action="uploadFileUrl"

  74. 					  :show-file-list = "false"

  75. 					  :on-success="uploadSuccess"

  76. 					  :before-upload="beforeAvatarUpload">

  77. 					  <el-button slot="trigger" size="small" type="primary">选取文件</el-button>

  78. 					  <div slot="tip" class="el-upload__tip">只能上传xlsl文件，且不超过10M</div>

  79. 					</el-upload>

  80. 	  		</el-form-item>

  81. 	  		<el-form-item label="备注" prop="remarks">

  82. 	    		<el-input v-model.trim="addParm.remarks" clearable></el-input>

  83. 	  		</el-form-item>

  84. 			</el-form>

  85.   	</div>

  86.   	<span slot="footer">

  87.   		<el-button type="info" @click="sureAddCancle('addParm')">取消</el-button>

  88.       <el-button type="primary" @click="sureAdd('addParm')">确认</el-button>

  89.   	</span>

  90.   </el-dialog>

  91.   

  92.   

  93.   <!--修改弹窗-->

  94.   <el-dialog :visible.sync="dialogEditVisible" :title="dialogEditTitle" center width="45%">

  95.   	<div class="dialog-content">

  96.   		 <el-form ref="form" size="small" label-width="100px">

  97. 	  		<el-form-item label="备注" prop="remarks">

  98. 	    		<el-input v-model.trim="editParm.remarks" clearable></el-input>

  99. 	  		</el-form-item>

  100. 			</el-form>

  101.   	</div>

  102.   	<span slot="footer">

  103.   		<el-button type="info" @click="sureEditCancle('editParm')">取消</el-button>

  104.       <el-button type="primary" @click="sureEdit('editParm')">确认</el-button>

  105.   	</span>

  106.   </el-dialog>

  107.   

  108.   <!--详情弹窗-->

  109.   <el-dialog :visible.sync="dialogDetailVisible" :title="dialogDetailTitle" center width="45%">

  110.   	<div class="dialog-content">

  111.   		 <el-form ref="form" size="small" label-width="100px">

  112. 	  		<el-form-item label="路径" prop="path" >

  113. 	    		<el-input v-model.trim="detailParm.path" :disabled="true"></el-input>

  114. 	  		</el-form-item>

  115. 	  		<el-form-item label="状态" prop="status" >

  116. 	    		<!-- <el-input v-model.trim="detailParm.status" :disabled="true"></el-input> -->

  117. 				<el-select v-model.trim="detailParm.status" disabled placeholder="请选择">

  118. 					<el-option

  119. 			    	  v-for="item in statusList"

  120. 			     	 :key="item.value"

  121. 			     	 :label="item.label"

  122. 			     	 :value="item.value">

  123. 			   		 </el-option>

  124. 			  </el-select>

  125. 	  		</el-form-item>

  126. 	  		<el-form-item label="备注" prop="remarks">

  127. 	    		<el-input v-model.trim="detailParm.remarks" :disabled="true"></el-input>

  128. 	  		</el-form-item>

  129. 			</el-form>

  130.   	</div>

  131.   </el-dialog>

  132.   

  133.   </div>

  134. </template>

  135. <script>

  136. 	import { add, editById, delById, getList, getById } from '@/api/group/excel'

  137. export default {

  138. 	filters: {

  139. 	  getStatus: function (value) {

  140. 	   if(value == 1) {

  141. 	   	return '待导入';

  142. 	   } else if (value == 2) {

  143. 	   	return '导入成功';

  144. 	   } else {

  145. 	   	return '导入失败';

  146. 	   }

  147. 	  }

  148. 	},

  149. //	数据

  150.   data() {

  151.     return {

  152.     	searchParm: {

  153.     		page: 1,

  154.     		pageSize: 10,

  155.     		sort:'created_at',

  156.     		order:'desc',

  157.     		status:null,

  158.     		remarks:null

  159.     	},

  160.     	total:0,

  161.       list: [],

  162. 	    uploadHeaders:{ Authorization: this.$store.getters.token },

  163.       dialogAddVisible: false,

  164.       dialogAddTitle: '新增',

  165.       dialogDetailVisible: false,

  166.       dialogDetailTitle: '详情',

  167.       dialogEditVisible: false,

  168.       dialogEditTitle: '修改',

  169.       uploadFileUrl: process.env.VUE_APP_BASE_API + '/api/file/uploadFile',

  170. 	  	tempUrl:process.env.VUE_APP_BASE_API + '/api/ctExcel/exportTemp',

  171.       updateFileType: {type: 10},

  172.       searchStatusList:[{

  173. 	          value: null,

  174. 	          label: '全部'

  175. 	        },

  176. 	        {

  177. 	          value: 1,

  178. 	          label: '待导入'

  179. 	        }, {

  180. 	          value: 2,

  181. 	          label: '导入成功'

  182. 	        }, {

  183. 	          value: 3,

  184. 	          label: '导入失败'

  185. 			}],

  186. 	  statusList:[{

  187. 				value: 1,

  188. 				label: '待导入'

  189. 			},

  190. 			{

  191. 				value: 2,

  192. 				label: '导入成功'

  193. 			},

  194. 			{

  195. 				value: 3,

  196. 				label: '导入失败'

  197. 			}],

  198.       addParm: {

  199.       	id: null,

  200.       	path:'',

  201.     		remarks:''

  202.       },

  203.       detailParm: {

  204.       	id: null,

  205.       	path:'',

  206.     		remarks:'',

  207.     		status: null

  208.       },

  209.       editParm: {

  210.       	id: null,

  211.     		remarks: ''

  212.       },

  213.       rules: {

  214.           path: [

  215.             { required: true, message: '请输入路径', trigger: 'blur' }

  216.           ],

  217.           remarks: [

  218.             { required: true, message: '请输入备注', trigger: 'blur' }

  219.           ]

  220.         }

  221.       

  222.     }

  223.   },

  224.   // 调用

  225.   created() {

  226. 		this.goSearch()

  227.   },

  228. 	//方法

  229.   methods: {

  230.   	resetForm() {

  231.         this.searchParm.status = null;

  232.         this.searchParm.remarks = '';

  233.         this.goSearch()

  234.     },

  235. 	//	查询

  236. 	goSearch() {

  237. 		this.searchParm.page=1

  238. 		this.getDataList()

  239. 	},

  240.   beforeAvatarUpload(file) {

  241.     console.log(file);

  242. //  const isXlsl = file.type === 'xlsl';

  243.     const isLt10M = file.size / 1024 / 1024 <10;

  244. 

  245. //  if (!isXlsl) {

  246. //    this.$message.error('上传头像图片只能是 xlsl 格式!');

  247. //  }

  248.     if (!isLt10M) {s

  249.       this.$message.error('上传头像图片大小不能超过 10MB!');

  250.     }

  251. //  return isXlsl && isLt10M;

  252.     return isLt10M;

  253.   },

  254.   uploadSuccess(res, file) {

  255.     if(res.code==200) {

  256. 				this.addParm.path =res.data.list[0].path;

  257. 			}

  258.   },

  259.   //excel模板下载

  260. 	exportTempBtn(){

  261. 		console.log(this.tempUrl);

  262. 		window.location.href = this.tempUrl;

  263. 	},

  264. 	// 新增

  265. 	addBtn(){

  266. 		this.addParm = {

  267. 			  id: null,

  268.       	path:'',

  269.     		remarks:''

  270.       }

  271. 		this.dialogAddTitle='新增'

  272. 		this.dialogAddVisible = true;

  273. 		this.$refs.addParm.clearValidate();

  274. 	},

  275. 		//	修改

  276. 	editById(data){

  277. 		getById({id: data.id}).then(res => {

  278. 			if(res.code==200) {

  279. 				this.editParm.id = res.data.id;

  280. 				this.editParm.remarks = res.data.remarks;

  281. 				this.dialogEditVisible = true

  282. 				this.$refs.addParm.clearValidate();

  283. 			}

  284. 		}).catch(err => {

  285. 			console.log(err)

  286. 		})

  287. 	},

  288. 	// 确认修改

  289. 	sureEdit(editParm){

  290. 		editById(this.editParm).then(res => {

  291. 				if(res.code==200) {

  292. 					console.log(res)

  293. 					this.dialogEditVisible = false

  294. 					this.$message.success('修改成功!')

  295. 					this.getDataList()

  296. 				}

  297. 			}).catch(err => {

  298. 				console.log(err)

  299. 			})

  300. 	},

  301. 	sureAddCancle(editParm) {

  302. 		this.dialogEditVisible=flase

  303. 		this.$refs.editParm.clearValidate();

  304. 	},

  305. 	// 确认新增

  306. 	sureAdd(addParm){

  307. 		this.$refs[addParm].validate((valid) => {

  308. 		  if (valid) {

  309. 		  	this.$refs.addParm.clearValidate();

  310. 				add(this.addParm).then(res => {

  311. 						if(res.code==200) {

  312. 							this.dialogAddVisible = false

  313. 							this.$message.success('新增成功!')

  314. 							this.getDataList()

  315. 						}

  316. 				}).catch(err => {

  317. 						console.log(err)

  318. 				})

  319. 		  } else {

  320. 				console.log('error submit!!');

  321. 				return false;

  322. 		  }

  323. 		});

  324. 	},

  325. 	sureAddCancle(addParm) {

  326. 		this.dialogAddVisible=flase

  327. 		this.$refs.addParm.clearValidate();

  328. 	},

  329. 	// 查看根据id

  330. 	getBtnById(id){

  331. 		getById({id}).then(res => {

  332. 			if(res.code==200) {

  333. 				this.detailParm.id = res.data.id;

  334. 				this.detailParm.path = res.data.path;

  335. 				this.detailParm.remarks = res.data.remarks;

  336. 				this.detailParm.status = res.data.status;

  337. 				this.dialogDetailVisible = true

  338. 				

  339. 			}

  340. 		}).catch(err => {

  341. 			console.log(err)

  342. 		})

  343. 	},

  344. 	getError(errorPath){

  345. 		console.log(errorPath);

  346. 		this.$message.success('下载成功!');

  347. 		

  348. 		if(errorPath != null) {

  349. 			window.location.href = errorPath;

  350. 		}

  351. 	},

  352. 	// 分页获取表格数据

  353. 	getDataList(){

  354. 		getList(this.searchParm).then(res => {

  355. 				console.log(res)

  356. 				if(res.code==200) {

  357. 					console.log(res)

  358. 					this.list = res.data.list;

  359. 					this.total = res.data.total;

  360. 				}

  361. 			}).catch(err => {

  362. 				console.log(err)

  363. 			})

  364. 	},

  365. 	

  366. 	//	分页

  367. 		handleSizeChange(val) {

  368.    		console.log(`每页 ${val} 条`);

  369.    		this.searchParm.pageSize = val;

  370.    		this.getDataList();

  371.   	},

  372.   	handleCurrentChange(val) {

  373.     	console.log(`当前页: ${val}`);

  374.     	this.searchParm.page = val;

  375.     	this.getDataList();

  376.   	}

  377.   }

  378. }

  379. </script>

  380. 

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

  382. </style>