index.vue 27 KB

123456789101112131415161718192021222324252627282930313233343536373839404142434445464748495051525354555657585960616263646566676869707172737475767778798081828384858687888990919293949596979899100101102103104105106107108109110111112113114115116117118119120121122123124125126127128129130131132133134135136137138139140141142143144145146147148149150151152153154155156157158159160161162163164165166167168169170171172173174175176177178179180181182183184185186187188189190191192193194195196197198199200201202203204205206207208209210211212213214215216217218219220221222223224225226227228229230231232233234235236237238239240241242243244245246247248249250251252253254255256257258259260261262263264265266267268269270271272273274275276277278279280281282283284285286287288289290291292293294295296297298299300301302303304305306307308309310311312313314315316317318319320321322323324325326327328329330331332333334335336337338339340341342343344345346347348349350351352353354355356357358359360361362363364365366367368369370371372373374375376377378379380381382383384385386387388389390391392393394395396397398399400401402403404405406407408409410411412413414415416417418419420421422423424425426427428429430431432433434435436437438439440441442443444445446447448449450451452453454455456457458459460461462463464465466467468469470471472473474475476477478479480481482483484485486487488489490491492493494495496497498499500501502503504505506507508509510511512513514515516517518519520521522523524525526527528529530531532533534535536537538539540541542543544545546547548549550551552553554555556557558559560561562563564565566567568569570571572573574575576577578579580581582583584585586587588589590591592593594595596597598599600601602603604605606607608609610611612613614615616617618619620621622623624625626627628629630631632633634635636637638639640641642643644645646647648649650651652653654655656657658659660661662663664665666667668669670671672673674675676677678679680681682683684685686687688689690691692693694695696697698699700701702703704705706707708709710711712713714715716717718719720721722723724725726727728729730731732733734735736737738739740741742743744745746747748749750751752753754755756757758759760761762763764765766767768769770771772773774775776777778779780781782783784785786787788789790791792793794795796797798799800801802803804805806807808809810811812813814815816817
  1. <template>
  2. <div class="app-container apkfile">
  3. <el-form :model="queryParams" ref="queryForm" :inline="true" v-show="showSearch">
  4. <el-form-item label="关键字" prop="subName" label-width="95px">
  5. <el-input
  6. v-model="queryParams.searchValue"
  7. placeholder="实验室名称/设备名称/版本名称"
  8. clearable
  9. size="small"
  10. />
  11. </el-form-item>
  12. <el-form-item label="设备类型" prop="onepcType" label-width="75px">
  13. <el-select v-model="queryParams.onepcType" placeholder="请选择设备类型" clearable size="small">
  14. <el-option label="管控一体机" value="1" />
  15. <el-option label="考试一体机" value="2" />
  16. </el-select>
  17. </el-form-item>
  18. <el-form-item label="状态" prop="logStatus" label-width="45px">
  19. <el-select v-model="queryParams.logStatus" placeholder="请选择状态" clearable size="small">
  20. <el-option label="安装成功" value="1" />
  21. <el-option label="安装失败" value="0" />
  22. <el-option label="安装中" value="2" />
  23. <el-option label="上传成功" value="3" />
  24. </el-select>
  25. </el-form-item>
  26. <el-form-item style="float: right;">
  27. <el-col :span="1.5">
  28. <p class="add-button-one-90"
  29. @click="handleAdd"
  30. v-hasPermi="['laboratory:apkfile:add']"
  31. >批量升级</p>
  32. </el-col>
  33. <el-col :span="1.5">
  34. <p class="add-button-one-90"
  35. style="margin-left:10px;"
  36. @click="upPage"
  37. v-hasPermi="['laboratory:apkfile:add']"
  38. >上传APK</p>
  39. </el-col>
  40. </el-form-item>
  41. <el-form-item>
  42. <p class="inquire-button-one" @click="handleQuery">查询</p>
  43. <p class="reset-button-one" @click="resetQuery">重置</p>
  44. </el-form-item>
  45. </el-form>
  46. <el-table v-loading="loading" :data="logList">
  47. <el-table-column label="所属实验室" align="left" prop="subName" />
  48. <el-table-column label="设备名称" align="left" prop="hardName" />
  49. <el-table-column label="设备类型" align="left" prop="onepcType" >
  50. <template slot-scope="scope">
  51. <p>{{scope.row.onepcType==1?'管控一体机':(scope.row.onepcType==2?'考试一体机':'')}}</p>
  52. </template>
  53. </el-table-column>
  54. <el-table-column label="版本名称" align="left" prop="versionName" />
  55. <el-table-column label="版本编号" align="left" prop="version" />
  56. <el-table-column label="状态" align="left" prop="logStatus" >
  57. <template slot-scope="scope">
  58. <p>{{scope.row.logStatus==0?'安装失败':(scope.row.logStatus==1?'安装成功':(scope.row.logStatus==2?'安装中':(scope.row.logStatus==3?'上传成功':'')))}}</p>
  59. </template>
  60. </el-table-column>
  61. <el-table-column label="创建时间" align="left" prop="createTime" />
  62. <el-table-column label="操作" align="left" class-name="small-padding fixed-width">
  63. <template slot-scope="scope">
  64. <div class="button-box">
  65. <p class="table-button-one-90"
  66. @click="handleUpdate(scope.row)"
  67. v-hasPermi="['laboratory:apkfile:edit']"
  68. ><i class="el-icon-edit-outline"></i>修改</p>
  69. </div>
  70. </template>
  71. </el-table-column>
  72. </el-table>
  73. <pagination :page-sizes="[20, 30, 40, 50]"
  74. v-show="total>0"
  75. :total="total"
  76. layout="total, prev, pager, next, sizes, jumper"
  77. :page.sync="queryParams.pageNum"
  78. :limit.sync="queryParams.pageSize"
  79. @pagination="getList"
  80. />
  81. <!-- 批量升级 -->
  82. <el-dialog :title="title" :visible.sync="open" width="500px" append-to-body>
  83. <el-form ref="form" :model="form" :rules="rules" label-width="80px">
  84. <el-form-item label="院系" prop="deptId" v-if="!form.id">
  85. <el-select v-model="form.deptId" placeholder="请选择院系" @change="handleNodeClick">
  86. <el-option
  87. v-for="dict in deptOptions"
  88. :key="dict.deptId"
  89. :label="dict.deptName"
  90. :value="dict.deptId"
  91. ></el-option>
  92. </el-select>
  93. </el-form-item>
  94. <el-form-item label="实验室" prop="subjectId" v-if="!form.id">
  95. <el-select v-model="form.subjectId" multiple placeholder="请选择实验室">
  96. <el-option
  97. v-for="item in subjectOptions"
  98. :key="item.subjectId"
  99. :label="item.name"
  100. :value="item.subjectId">
  101. </el-option>
  102. </el-select>
  103. </el-form-item>
  104. <el-form-item label="实验室" v-if="form.id" style="width:297px;">
  105. <el-input
  106. v-model="form.subName"
  107. disabled
  108. placeholder=""
  109. clearable
  110. />
  111. </el-form-item>
  112. <el-form-item label="设备类型" prop="onepcType2" style="width:297px;" v-if="!form.id">
  113. <el-select v-model="form.onepcType2" placeholder="请选择设备类型" @change="handleNodeClick2">
  114. <el-option v-for="dict in onepcTypeList" :key="dict.id" :label="dict.name" :value="dict.id" ></el-option>
  115. </el-select>
  116. </el-form-item>
  117. <el-form-item label="设备名称" v-if="form.id" style="width:297px;">
  118. <el-input
  119. v-model="form.hardName"
  120. disabled
  121. placeholder=""
  122. clearable
  123. />
  124. </el-form-item>
  125. <el-form-item label="设备类型" prop="onepcType" v-if="form.id" style="width:297px;">
  126. <el-select v-model="form.onepcType" disabled placeholder="请选择设备类型" @change="handleNodeClick">
  127. <el-option v-for="dict in onepcTypeList" :key="dict.id" :label="dict.name" :value="dict.id" ></el-option>
  128. </el-select>
  129. </el-form-item>
  130. <el-form-item label="安装包" prop="apkId">
  131. <el-select v-model="form.apkId" placeholder="请选择安装包">
  132. <el-option
  133. v-for="item in apkIdOptions"
  134. :key="item.apkId"
  135. :label="item.versionName"
  136. :value="item.apkId">
  137. </el-option>
  138. </el-select>
  139. </el-form-item>
  140. </el-form>
  141. <div slot="footer" class="dialog-footer">
  142. <el-button type="primary" @click="submitForm">确 定</el-button>
  143. <el-button @click="cancel">取 消</el-button>
  144. </div>
  145. </el-dialog>
  146. <!--上传APK-->
  147. <el-dialog title="上传APK" class="dialog-up-data-box" :visible.sync="openUp" v-if="openUp" width="570px" append-to-body>
  148. <div class="dialog-up-data-min-box scrollbar-box">
  149. <el-form v-loading="loading" :rules="apkRules" :model="upForm" ref="upForm" :inline="true" v-show="showSearch">
  150. <el-form-item label="版本名称" prop="versionName" label-width="90px">
  151. <el-input
  152. v-model="upForm.versionName"
  153. maxLength="20"
  154. placeholder="请输入版本名称"
  155. clearable
  156. />
  157. </el-form-item>
  158. <el-form-item label="版本编号" prop="version" label-width="90px">
  159. <el-input
  160. v-model="upForm.version"
  161. maxLength="20"
  162. placeholder="请输入版本编号"
  163. clearable
  164. />
  165. </el-form-item>
  166. <el-form-item label="类型" prop="onepcType" style="display: block" label-width="90px">
  167. <el-radio v-model="upForm.onepcType" label="1">管控一体机</el-radio>
  168. <el-radio v-model="upForm.onepcType" label="2">考试一体机</el-radio>
  169. </el-form-item>
  170. <el-form-item label="安装包" prop="apkFileUpload" label-width="90px">
  171. <uploader
  172. :autoStart="false"
  173. :options="options"
  174. ref="uploader"
  175. :file-list="fileList"
  176. :file-status-text="statusText"
  177. class="uploader-example"
  178. @file-complete="fileComplete"
  179. @complete="complete"
  180. @file-success="fileSuccess"
  181. @files-added="filesAdded">
  182. <uploader-unsupport></uploader-unsupport>
  183. <uploader-drop>
  184. <i class="el-icon-upload"></i>
  185. <div class="el-upload__text">将文件拖到此处,或 <uploader-btn :single="true" :attrs="attrs">点击上传</uploader-btn></div>
  186. </uploader-drop>
  187. <div class="text-box" v-if="fileData.name">
  188. <p>{{fileData.name}}</p>
  189. <p>{{fileData.size}}</p>
  190. <p>{{fileData.text}}</p>
  191. </div>
  192. <!-- <uploader-list></uploader-list> -->
  193. <!--<uploader-files></uploader-files>-->
  194. </uploader>
  195. </el-form-item>
  196. <!-- <el-form-item label="安装包" prop="apkFileUpload" label-width="90px">-->
  197. <!-- <el-upload-->
  198. <!-- style="margin:0 auto;width:120px;"-->
  199. <!-- class="avatar-uploader"-->
  200. <!-- :action="uploadImgUrl"-->
  201. <!-- accept="application/vnd.android.package-archive"-->
  202. <!-- :show-file-list="false"-->
  203. <!-- :on-progress="progressUp"-->
  204. <!-- :on-success="handleAvatarSuccess"-->
  205. <!-- :on-error="errorUp"-->
  206. <!-- :headers="headers"-->
  207. <!-- :before-upload="beforeAvatarUpload">-->
  208. <!-- <img v-if="upForm.apkFileUpload" src="@/assets/ZDimages/icon_apk.png">-->
  209. <!-- <i v-if="!upForm.apkFileUpload" class="el-icon-plus avatar-uploader-icon" style="height:40px;line-height:40px;width:40px;text-align: center"></i>-->
  210. <!-- </el-upload>-->
  211. <!-- </el-form-item>-->
  212. </el-form>
  213. </div>
  214. <div slot="footer" class="dialog-footer">
  215. <el-button type="primary" @click="submitFormUp">确 定</el-button>
  216. <el-button @click="cancelUp">取 消</el-button>
  217. </div>
  218. <!--<div v-loading="loading">-->
  219. <!--<el-table :data="apkLogList">-->
  220. <!--<el-table-column label="版本名称" align="left" prop="versionName" />-->
  221. <!--<el-table-column label="版本编号" align="left" prop="version" />-->
  222. <!--<el-table-column label="上传时间" align="left" prop="createTime" />-->
  223. <!--</el-table>-->
  224. <!--<pagination-->
  225. <!--style="height:50px;"-->
  226. <!--v-show="apkTotal>0"-->
  227. <!--:total="apkTotal"-->
  228. <!--:page.sync="apkQueryParams.pageNum"-->
  229. <!--:limit.sync="apkQueryParams.pageSize"-->
  230. <!--@pagination="apkGetList"-->
  231. <!--/>-->
  232. <!--</div>-->
  233. </el-dialog>
  234. </div>
  235. </template>
  236. <script>
  237. import { listLog, getLog, delLog, addLog, updateLog, getApkUploadList,apkFileAddApkLog,updateApkLog,getApkUploadListByLimit,addApkUpload } from "@/api/laboratory/apkfile";
  238. import { subjectDictList } from "@/api/laboratory/record";
  239. import { listDepartments } from "@/api/system/dept";
  240. import { getToken } from "@/utils/auth";
  241. import axios from "axios";
  242. import SparkMD5 from "spark-md5";
  243. let httpHeader=window.location.href.split('://')[0]+'://'
  244. export default {
  245. name: "Log",
  246. data() {
  247. return {
  248. // 上传相关
  249. uploadImgUrl: this.uploadUrl(), // 上传的图片服务器地址
  250. headers: {
  251. Authorization: "Bearer " + getToken()
  252. },
  253. // 遮罩层
  254. loading: true,
  255. // 选中数组
  256. ids: [],
  257. // 非单个禁用
  258. single: true,
  259. // 非多个禁用
  260. multiple: true,
  261. // 显示搜索条件
  262. showSearch: true,
  263. // 总条数
  264. total: 0,
  265. // apk需要对应升级的日志表格数据
  266. logList: [],
  267. // 弹出层标题
  268. title: "",
  269. // 是否显示弹出层
  270. open: false,
  271. // 查询参数
  272. queryParams: {
  273. pageNum: 1,
  274. pageSize:20,
  275. searchValue: null,
  276. onepcHardwareNum: null,
  277. apkUploadId: null,
  278. logStatus: null,
  279. onepcType: null,
  280. },
  281. // 表单参数
  282. form: {},
  283. // 表单校验
  284. rules: {
  285. deptId: [
  286. { required: true, message: "请选择院系", trigger: "blur" }
  287. ],
  288. apkId: [
  289. { required: true, message: "分类名称不能为空", trigger: "blur" }
  290. ],
  291. onepcType2: [
  292. { required: true, message: "设备类型不能为空", trigger: "blur" }
  293. ],
  294. },
  295. // 院系列表
  296. deptOptions: [],
  297. onepcTypeList:[
  298. {id:1,name:"管控一体机",},
  299. {id:2,name:"考试一体机",}
  300. ],
  301. //实验室列表
  302. subjectOptions: [],
  303. //文件列表
  304. fileList:[],
  305. options: {
  306. target: httpHeader+process.env.VUE_APP_BASE_API+"/base/file/upload/chunk",
  307. // 开启服务端分片校验功能
  308. testChunks: true,
  309. single: true,
  310. fileParameterName: 'file',
  311. headers: {
  312. Authorization: "Bearer " + getToken()
  313. },
  314. parseTimeRemaining: function (timeRemaining, parsedTimeRemaining) {
  315. return parsedTimeRemaining
  316. .replace(/\syears?/, "年")
  317. .replace(/\days?/, "天")
  318. .replace(/\shours?/, "小时")
  319. .replace(/\sminutes?/, "分钟")
  320. .replace(/\sseconds?/, "秒");
  321. },
  322. // // 服务器分片校验函数
  323. checkChunkUploadedByResponse: (chunk, message) => {
  324. const result = JSON.parse(message);
  325. if (result.data.skipUpload) {
  326. this.skip = true;
  327. return true;
  328. }
  329. return (result.data.uploaded || []).indexOf(chunk.offset + 1) >= 0;
  330. },
  331. },
  332. // 上传页面开关
  333. openUp:false,
  334. //apk列表
  335. apkIdOptions:[],
  336. //apk 列表查询参数
  337. apkQueryParams: {
  338. pageNum: 1,
  339. pageSize:20,
  340. },
  341. //上传数据
  342. upForm:{},
  343. // apk上传表单校验
  344. apkRules: {
  345. versionName: [
  346. { required: true, message: "请输入版本名称", trigger: "blur" }
  347. ],
  348. version: [
  349. { required: true, message: "请输入版本编号", trigger: "blur" },
  350. { required: true, message: "只能输入数字", validator: this.isNum, trigger: "blur" },
  351. ],
  352. onepcType: [
  353. { required: true, message: "请选择版本类型", trigger: "blur" }
  354. ],
  355. apkFileUpload: [
  356. { required: true, message: "请上传安装包", trigger: "blur" }
  357. ],
  358. },
  359. attrs: {
  360. accept: [".apk"]
  361. },
  362. statusText: {
  363. success: "上传成功",
  364. error: "上传出错了",
  365. uploading: "上传中...",
  366. paused: "暂停中...",
  367. waiting: "等待中...",
  368. cmd5: "计算文件MD5中...",
  369. },
  370. fileData:{},
  371. };
  372. },
  373. created() {
  374. this.getList();
  375. },
  376. methods: {
  377. //版本管理页面开关
  378. upPage(){
  379. this.apkGetList();
  380. this.$set(this,'upForm',);
  381. this.$set(this,'fileData',);
  382. this.openUp = true;
  383. },
  384. //apk列表获取
  385. apkGetList() {
  386. this.loading = true;
  387. listLog(this.queryParams).then( response => {
  388. this.apkLogList = response.rows;
  389. this.apkTotal = response.total;
  390. this.loading = false;
  391. });
  392. },
  393. //开始上传
  394. progressUp(event, file, fileList){
  395. this.loading = true;
  396. },
  397. //上传成功
  398. handleAvatarSuccess(res, file,index) {
  399. this.upForm.apkFileUpload = res.data.url;
  400. this.loading = false;
  401. this.$forceUpdate()
  402. },
  403. //上传失败
  404. errorUp(err, file, fileList){
  405. this.loading = false;
  406. },
  407. //上传检查
  408. beforeAvatarUpload(file) {
  409. let type = false;
  410. if (file.type == 'application/vnd.android.package-archive') {
  411. type = true;
  412. }else{
  413. this.$message.error('只能上传png/jpeg/gif格式图片');
  414. type = false;
  415. }
  416. console.log('file');
  417. return type;
  418. },
  419. // 新增/编辑节点单击事件
  420. handleNodeClick(data) {
  421. this.form.deptId = data;
  422. this.getSubjectDictList(data);
  423. },
  424. // 新增/编辑节点单击事件
  425. handleNodeClick2(data) {
  426. this.$set(this.form, 'apkId', '')
  427. let params = {};
  428. if(data){
  429. params.onepcType = data;
  430. }
  431. console.log("params",params)
  432. getApkUploadList(params).then(response => {
  433. this.$set(this, 'apkIdOptions', response.data)
  434. });
  435. },
  436. /** 查询院系列表 */
  437. getDeptList() {
  438. listDepartments().then(response => {
  439. this.$set(this, 'deptOptions', response.data)
  440. });
  441. },
  442. /** 查询apk列表 */
  443. getApkUploadList(row) {
  444. let params = {};
  445. if(row){
  446. params.onepcType = row.onepcType;
  447. }
  448. console.log("params",params)
  449. getApkUploadList(params).then(response => {
  450. this.$set(this, 'apkIdOptions', response.data)
  451. });
  452. },
  453. /** 查询实验室字典列表 */
  454. getSubjectDictList (deptId) {
  455. this.subjectOptions = null;
  456. this.loading = true;
  457. let params = {};
  458. params.deptId = deptId;
  459. subjectDictList(params).then(response => {
  460. this.form.subjectId = [];
  461. for(let i=0;i<response.data.length;i++){
  462. response.data[i].subjectId = response.data[i].id;
  463. }
  464. this.subjectOptions = response.data;
  465. this.loading = false;
  466. });
  467. },
  468. /** 查询apk需要对应升级的日志列表 */
  469. getList() {
  470. this.loading = true;
  471. listLog(this.queryParams).then( response => {
  472. this.logList = response.rows;
  473. this.total = response.total;
  474. this.loading = false;
  475. });
  476. },
  477. // 取消按钮
  478. cancel() {
  479. this.open = false;
  480. },
  481. // 取消按钮
  482. cancelUp() {
  483. if (this.loading){
  484. return
  485. }
  486. this.openUp = false;
  487. this.fileList=[];
  488. this.$refs.uploader.files = [];
  489. this.$refs.uploader.fileList = [];
  490. console.log("this.$refs.uploader",this.$refs.uploader);
  491. //this.$refs.uploader.allRemove();
  492. console.log("this.$refs.uploader",this.$refs.uploader);
  493. console.log("this.$refs.files",this.$refs.files);
  494. this.fileData = {};
  495. },
  496. // 表单重置
  497. reset() {
  498. this.form = {
  499. id: null,
  500. onepcHardwareNum: null,
  501. apkUploadId: null,
  502. logStatus: 0,
  503. createBy: null,
  504. createTime: null,
  505. updateBy: null,
  506. updateTime: null,
  507. remark: null
  508. };
  509. this.resetForm("form");
  510. },
  511. /** 搜索按钮操作 */
  512. handleQuery() {
  513. this.queryParams.pageNum = 1;
  514. this.getList();
  515. },
  516. /** 重置按钮操作 */
  517. resetQuery() {
  518. this.queryParams.searchValue='';
  519. this.resetForm("queryForm");
  520. this.handleQuery();
  521. },
  522. /** 新增按钮操作 */
  523. handleAdd() {
  524. this.form = {
  525. deptId:"",
  526. subjectId:[],
  527. apkId:"",
  528. };
  529. this.open = true;
  530. this.getDeptList();
  531. this.getApkUploadList();
  532. this.subjectOptions = [];
  533. this.title = "批量升级";
  534. },
  535. /** 修改按钮操作 */
  536. handleUpdate(row) {
  537. this.getApkUploadList(row);
  538. this.form = row;
  539. this.open = true;
  540. this.title = "修改";
  541. },
  542. //上传apk提交按钮
  543. submitFormUp(){
  544. if(this.loading){
  545. return
  546. }
  547. this.$refs["upForm"].validate(valid => {
  548. if (valid) {
  549. let obj = {
  550. versionName:this.upForm.versionName,
  551. version:this.upForm.version,
  552. onepcType:this.upForm.onepcType,
  553. apkFileUpload:this.upForm.apkFileUpload,
  554. };
  555. addApkUpload(obj).then( response => {
  556. this.msgSuccess("新增成功");
  557. this.openUp = false;
  558. this.upForm = {};
  559. this.fileList=[];
  560. this.$refs.uploader.files = [];
  561. this.$refs.uploader.fileList = [];
  562. this.$refs.uploader.cancel()
  563. this.fileData = {};
  564. });
  565. }
  566. });
  567. },
  568. /** 提交按钮 */
  569. submitForm() {
  570. this.$refs["form"].validate(valid => {
  571. if (valid) {
  572. if (this.form.id != null) {
  573. let obj = {
  574. id:this.form.id,
  575. apkId:this.form.apkId,
  576. };
  577. updateApkLog(obj).then( response => {
  578. this.msgSuccess("修改成功");
  579. this.open = false;
  580. this.getList();
  581. });
  582. } else {
  583. let obj = {
  584. deptId:this.form.deptId,
  585. apkId:this.form.apkId,
  586. onepcType:this.form.onepcType2,
  587. };
  588. if(this.form.subjectId[0]){
  589. obj.subId = this.form.subjectId
  590. }else{
  591. obj.subId = null
  592. }
  593. apkFileAddApkLog(obj).then( response => {
  594. this.msgSuccess("新增成功");
  595. this.open = false;
  596. this.getList();
  597. });
  598. }
  599. }
  600. });
  601. },
  602. /** 删除按钮操作 */
  603. handleDelete(row) {
  604. const ids = row.id || this.ids;
  605. this.$confirm('是否确认删除?', "警告", {
  606. confirmButtonText: "确定",
  607. cancelButtonText: "取消",
  608. type: "warning"
  609. }).then(function() {
  610. return delLog(ids);
  611. }).then(() => {
  612. this.getList();
  613. this.msgSuccess("删除成功");
  614. }).catch(() => {});
  615. },
  616. /** 导出按钮操作 */
  617. handleExport() {
  618. this.download('laboratory/apkfile/export', {
  619. ...this.queryParams
  620. }, `laboratory_log.xlsx`)
  621. },
  622. fileSuccess(rootFile, file, response, chunk) {
  623. const result = JSON.parse(response);
  624. if (result.code == 200 && !this.skip) {
  625. axios.post(httpHeader+process.env.VUE_APP_BASE_API+"/base/file/upload/merge", {
  626. identifier: file.uniqueIdentifier,
  627. filename: file.name,
  628. totalChunks: chunk.offset,
  629. },{
  630. headers: {
  631. Authorization: "Bearer " + getToken()
  632. }
  633. }).then((res) => {
  634. if (res.data.code==200) {
  635. this.upForm.apkFileUpload=res.data.data;
  636. } else {
  637. console.log(res);
  638. }
  639. }).catch(function (error) {
  640. console.log(error);
  641. });
  642. } else {
  643. console.log("上传成功,不需要合并");
  644. }
  645. if (this.skip) {
  646. this.skip = false;
  647. }
  648. },
  649. fileComplete(rootFile) {
  650. // 一个根文件(文件夹)成功上传完成。
  651. this.fileName=rootFile.name;
  652. this.fileSize=rootFile.size;
  653. console.log("rootFile",rootFile)
  654. this.fileData = {
  655. name:rootFile.name,
  656. size:parseInt(rootFile._prevUploadedSize/1024000)+'kb',
  657. text:"上传完成"
  658. }
  659. },
  660. complete(file) {
  661. console.log("complete file:",file)
  662. // 上传完毕。
  663. },
  664. filesAdded(file, fileList, event) {
  665. this.fileData = {
  666. name:file[0].name,
  667. size:"",
  668. text:"上传中..."
  669. }
  670. console.log("file",file)
  671. console.log("fileList",fileList)
  672. console.log("event",event)
  673. this.$refs.uploader.fileList = [];
  674. this.$refs.uploader.files = [];
  675. console.log("this.$refs.files================",this.$refs.files);
  676. console.log("this.$refs.uploader================",this.$refs.uploader);
  677. this.fileList=[];
  678. file.forEach((e) => {
  679. this.fileList.push(e);
  680. this.computeMD5(e);
  681. });
  682. },
  683. computeMD5(file) {
  684. let fileReader = new FileReader();
  685. let time = new Date().getTime();
  686. let blobSlice = File.prototype.slice || File.prototype.mozSlice || File.prototype.webkitSlice;
  687. let currentChunk = 0;
  688. const chunkSize = 1024 * 1024;
  689. let chunks = Math.ceil(file.size / chunkSize);
  690. let spark = new SparkMD5.ArrayBuffer();
  691. // 文件状态设为"计算MD5"
  692. file.cmd5 = true; //文件状态为“计算md5...”
  693. file.pause();
  694. loadNext();
  695. fileReader.onload = (e) => {
  696. spark.append(e.target.result);
  697. if (currentChunk < chunks) {
  698. currentChunk++;
  699. loadNext();
  700. // 实时展示MD5的计算进度
  701. } else {
  702. let md5 = spark.end();
  703. spark.destroy(); //释放缓存
  704. file.uniqueIdentifier = md5; //将文件md5赋值给文件唯一标识
  705. file.cmd5 = false; //取消计算md5状态
  706. file.resume(); //开始上传
  707. }
  708. };
  709. fileReader.onerror = function () {
  710. this.error(`文件${file.name}读取出错,请检查该文件`);
  711. file.cancel();
  712. };
  713. function loadNext() {
  714. let start = currentChunk * chunkSize;
  715. let end = start + chunkSize >= file.size ? file.size : start + chunkSize;
  716. fileReader.readAsArrayBuffer(blobSlice.call(file.file, start, end));
  717. }
  718. },
  719. allStart() {
  720. this.fileList.map((e) => {
  721. if (e.paused) {
  722. e.resume();
  723. }
  724. });
  725. },
  726. allStop() {
  727. this.fileList.map((e) => {
  728. if (!e.paused) {
  729. e.pause();
  730. }
  731. });
  732. },
  733. allRemove() {
  734. this.fileList.map((e) => {
  735. e.cancel();
  736. });
  737. this.fileList = [];
  738. },
  739. }
  740. };
  741. </script>
  742. <style scoped lang="scss">
  743. .apkfile {
  744. display: flex!important;
  745. flex-direction: column;
  746. box-shadow: 0 0 8px 2px rgba(0, 0, 0, 0.1);
  747. padding:20px 20px 20px!important;
  748. .button-box{
  749. width:90px;
  750. display: flex;
  751. margin:0 auto;
  752. }
  753. }
  754. </style>
  755. <style lang="scss">
  756. .dialog-up-data-box{
  757. .text-box{
  758. width:360px;
  759. display: flex;
  760. p:nth-child(1){
  761. width:200px;
  762. display:block;
  763. overflow:hidden;
  764. text-overflow:ellipsis;
  765. white-space:nowrap;
  766. }
  767. p:nth-child(2){
  768. width:100px;
  769. text-align: center;
  770. }
  771. p:nth-child(3){
  772. width:60px;
  773. text-align: right;
  774. }
  775. }
  776. .dialog-up-data-min-box{
  777. height:500px;
  778. }
  779. .uploader-drop{
  780. width:360px;
  781. .el-icon-upload{
  782. color:#0183FA;
  783. display: block;
  784. font-size:78px;
  785. width:78px;
  786. height:78px;
  787. margin:0 auto;
  788. }
  789. .el-upload__text{
  790. width:210px;
  791. margin:0 auto;
  792. }
  793. .uploader-btn{
  794. border:none;
  795. color:#0183FA;
  796. }
  797. }
  798. .uploader-files{
  799. width:360px;
  800. }
  801. }
  802. </style>