Rap 原分销系统代码Web
Вы не можете выбрать более 25 тем Темы должны начинаться с буквы или цифры, могут содержать дефисы(-) и должны содержать не более 35 символов.

383 строки
10KB

  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. <el-dialog :visible.sync="dialogAddVisible" :title="dialogAddTitle" center width="45%">
  63. <div class="dialog-content">
  64. <el-form ref="addParm" size="small" :model="addParm" :rules="rules" label-width="100px">
  65. <el-input v-model.trim="addParm.path" type="hidden" clearable></el-input>
  66. <el-form-item label="路径" prop="path">
  67. <el-upload
  68. class="upload-demo"
  69. ref="upload"
  70. :data = "updateFileType"
  71. :headers="uploadHeaders"
  72. :action="uploadFileUrl"
  73. :show-file-list = "false"
  74. :on-success="uploadSuccess"
  75. :before-upload="beforeAvatarUpload">
  76. <el-button slot="trigger" size="small" type="primary">选取文件</el-button>
  77. <div slot="tip" class="el-upload__tip">只能上传xlsl文件,且不超过10M</div>
  78. </el-upload>
  79. </el-form-item>
  80. <el-form-item label="备注" prop="remarks">
  81. <el-input v-model.trim="addParm.remarks" clearable></el-input>
  82. </el-form-item>
  83. </el-form>
  84. </div>
  85. <span slot="footer">
  86. <el-button type="info" @click="sureAddCancle('addParm')">取消</el-button>
  87. <el-button type="primary" @click="sureAdd('addParm')">确认</el-button>
  88. </span>
  89. </el-dialog>
  90. <!--修改弹窗-->
  91. <el-dialog :visible.sync="dialogEditVisible" :title="dialogEditTitle" center width="45%">
  92. <div class="dialog-content">
  93. <el-form ref="form" size="small" label-width="100px">
  94. <el-form-item label="备注" prop="remarks">
  95. <el-input v-model.trim="editParm.remarks" clearable></el-input>
  96. </el-form-item>
  97. </el-form>
  98. </div>
  99. <span slot="footer">
  100. <el-button type="info" @click="sureEditCancle('editParm')">取消</el-button>
  101. <el-button type="primary" @click="sureEdit('editParm')">确认</el-button>
  102. </span>
  103. </el-dialog>
  104. <!--详情弹窗-->
  105. <el-dialog :visible.sync="dialogDetailVisible" :title="dialogDetailTitle" center width="45%">
  106. <div class="dialog-content">
  107. <el-form ref="form" size="small" label-width="100px">
  108. <el-form-item label="路径" prop="path" >
  109. <el-input v-model.trim="detailParm.path" :disabled="true"></el-input>
  110. </el-form-item>
  111. <el-form-item label="状态" prop="status" >
  112. <!-- <el-input v-model.trim="detailParm.status" :disabled="true"></el-input> -->
  113. <el-select v-model.trim="detailParm.status" disabled placeholder="请选择">
  114. <el-option
  115. v-for="item in statusList"
  116. :key="item.value"
  117. :label="item.label"
  118. :value="item.value">
  119. </el-option>
  120. </el-select>
  121. </el-form-item>
  122. <el-form-item label="备注" prop="remarks">
  123. <el-input v-model.trim="detailParm.remarks" :disabled="true"></el-input>
  124. </el-form-item>
  125. </el-form>
  126. </div>
  127. </el-dialog>
  128. </div>
  129. </template>
  130. <script>
  131. import { add, editById, delById, getList, getById } from '@/api/group/excel'
  132. export default {
  133. filters: {
  134. getStatus: function (value) {
  135. if(value == 1) {
  136. return '待导入';
  137. } else if (value == 2) {
  138. return '导入成功';
  139. } else {
  140. return '导入失败';
  141. }
  142. }
  143. },
  144. // 数据
  145. data() {
  146. return {
  147. searchParm: {
  148. page: 1,
  149. pageSize: 10,
  150. sort:'created_at',
  151. order:'desc',
  152. status:null,
  153. remarks:null
  154. },
  155. total:0,
  156. list: [],
  157. uploadHeaders:{ Authorization: this.$store.getters.token },
  158. dialogAddVisible: false,
  159. dialogAddTitle: '新增',
  160. dialogDetailVisible: false,
  161. dialogDetailTitle: '详情',
  162. dialogEditVisible: false,
  163. dialogEditTitle: '修改',
  164. uploadFileUrl: process.env.VUE_APP_BASE_API + '/api/file/uploadFile',
  165. tempUrl:process.env.VUE_APP_BASE_API + '/api/ctExcel/exportTemp',
  166. updateFileType: {type: 10},
  167. searchStatusList:[{
  168. value: null,
  169. label: '全部'
  170. },
  171. {
  172. value: 1,
  173. label: '待导入'
  174. }, {
  175. value: 2,
  176. label: '导入成功'
  177. }, {
  178. value: 3,
  179. label: '导入失败'
  180. }],
  181. statusList:[{
  182. value: 1,
  183. label: '待导入'
  184. },
  185. {
  186. value: 2,
  187. label: '导入成功'
  188. },
  189. {
  190. value: 3,
  191. label: '导入失败'
  192. }],
  193. addParm: {
  194. id: null,
  195. path:'',
  196. remarks:''
  197. },
  198. detailParm: {
  199. id: null,
  200. path:'',
  201. remarks:'',
  202. status: null
  203. },
  204. editParm: {
  205. id: null,
  206. remarks: ''
  207. },
  208. rules: {
  209. path: [
  210. { required: true, message: '请输入路径', trigger: 'blur' }
  211. ],
  212. remarks: [
  213. { required: true, message: '请输入备注', trigger: 'blur' }
  214. ]
  215. }
  216. }
  217. },
  218. // 调用
  219. created() {
  220. this.goSearch()
  221. },
  222. //方法
  223. methods: {
  224. resetForm() {
  225. this.searchParm.status = null;
  226. this.searchParm.remarks = '';
  227. this.goSearch()
  228. },
  229. // 查询
  230. goSearch() {
  231. this.searchParm.page=1
  232. this.getDataList()
  233. },
  234. beforeAvatarUpload(file) {
  235. console.log(file);
  236. // const isXlsl = file.type === 'xlsl';
  237. const isLt10M = file.size / 1024 / 1024 <10;
  238. // if (!isXlsl) {
  239. // this.$message.error('上传头像图片只能是 xlsl 格式!');
  240. // }
  241. if (!isLt10M) {s
  242. this.$message.error('上传头像图片大小不能超过 10MB!');
  243. }
  244. // return isXlsl && isLt10M;
  245. return isLt10M;
  246. },
  247. uploadSuccess(res, file) {
  248. if(res.code==200) {
  249. this.addParm.path =res.data.list[0].path;
  250. }
  251. },
  252. //excel模板下载
  253. exportTempBtn(){
  254. console.log(this.tempUrl);
  255. window.location.href = this.tempUrl;
  256. },
  257. // 新增
  258. addBtn(){
  259. this.addParm = {
  260. id: null,
  261. path:'',
  262. remarks:''
  263. }
  264. this.dialogAddTitle='新增'
  265. this.dialogAddVisible = true;
  266. this.$refs.addParm.clearValidate();
  267. },
  268. // 修改
  269. editById(data){
  270. getById({id: data.id}).then(res => {
  271. if(res.code==200) {
  272. this.editParm.id = res.data.id;
  273. this.editParm.remarks = res.data.remarks;
  274. this.dialogEditVisible = true
  275. this.$refs.addParm.clearValidate();
  276. }
  277. }).catch(err => {
  278. console.log(err)
  279. })
  280. },
  281. // 确认修改
  282. sureEdit(editParm){
  283. editById(this.editParm).then(res => {
  284. if(res.code==200) {
  285. console.log(res)
  286. this.dialogEditVisible = false
  287. this.$message.success('修改成功!')
  288. this.getDataList()
  289. }
  290. }).catch(err => {
  291. console.log(err)
  292. })
  293. },
  294. sureAddCancle(editParm) {
  295. this.dialogEditVisible=flase
  296. this.$refs.editParm.clearValidate();
  297. },
  298. // 确认新增
  299. sureAdd(addParm){
  300. this.$refs[addParm].validate((valid) => {
  301. if (valid) {
  302. this.$refs.addParm.clearValidate();
  303. add(this.addParm).then(res => {
  304. if(res.code==200) {
  305. this.dialogAddVisible = false
  306. this.$message.success('新增成功!')
  307. this.getDataList()
  308. }
  309. }).catch(err => {
  310. console.log(err)
  311. })
  312. } else {
  313. console.log('error submit!!');
  314. return false;
  315. }
  316. });
  317. },
  318. sureAddCancle(addParm) {
  319. this.dialogAddVisible=flase
  320. this.$refs.addParm.clearValidate();
  321. },
  322. // 查看根据id
  323. getBtnById(id){
  324. getById({id}).then(res => {
  325. if(res.code==200) {
  326. this.detailParm.id = res.data.id;
  327. this.detailParm.path = res.data.path;
  328. this.detailParm.remarks = res.data.remarks;
  329. this.detailParm.status = res.data.status;
  330. this.dialogDetailVisible = true
  331. }
  332. }).catch(err => {
  333. console.log(err)
  334. })
  335. },
  336. getError(errorPath){
  337. console.log(errorPath);
  338. this.$message.success('下载成功!');
  339. if(errorPath != null) {
  340. window.location.href = errorPath;
  341. }
  342. },
  343. // 分页获取表格数据
  344. getDataList(){
  345. getList(this.searchParm).then(res => {
  346. console.log(res)
  347. if(res.code==200) {
  348. console.log(res)
  349. this.list = res.data.list;
  350. this.total = res.data.total;
  351. }
  352. }).catch(err => {
  353. console.log(err)
  354. })
  355. },
  356. // 分页
  357. handleSizeChange(val) {
  358. console.log(`每页 ${val} 条`);
  359. this.searchParm.pageSize = val;
  360. this.getDataList();
  361. },
  362. handleCurrentChange(val) {
  363. console.log(`当前页: ${val}`);
  364. this.searchParm.page = val;
  365. this.getDataList();
  366. }
  367. }
  368. }
  369. </script>
  370. <style rel="stylesheet/scss" lang="scss" scoped>
  371. </style>