|
@@ -0,0 +1,508 @@
|
|
|
+<template>
|
|
|
+ <div id="device-management">
|
|
|
+ <div class="device-management-body" v-loading.fullscreen.lock="fullscreenLoading">
|
|
|
+ <div v-if="addVisible" class="order-management-body" style="margin-top:0">
|
|
|
+ <!-- 全部 -->
|
|
|
+ <div class="device-management_bottom" style="margin-top:0;padding:60px 20px;">
|
|
|
+ <el-form :model="ruleForm" :rules="rules" ref="ruleForm" label-width="100px">
|
|
|
+ <el-form-item label="上传服务器" prop='fileServerType'>
|
|
|
+ <el-select v-model="ruleForm.fileServerType" placeholder="请选择">
|
|
|
+ <el-option label="阿里云" value="oss">阿里云</el-option>
|
|
|
+ <el-option label="亚马逊" value="s3">亚马逊</el-option>
|
|
|
+ </el-select>
|
|
|
+ </el-form-item>
|
|
|
+ <el-form-item label="代理商标识" prop='agent'>
|
|
|
+ <el-autocomplete
|
|
|
+ class="inline-input"
|
|
|
+ v-model="ruleForm.agent"
|
|
|
+ :fetch-suggestions="querySearch"
|
|
|
+ placeholder="请输入内容"
|
|
|
+ @select="handleSelect"
|
|
|
+ ></el-autocomplete>
|
|
|
+ </el-form-item>
|
|
|
+ <el-form-item label="APP类型" prop='appType'>
|
|
|
+ <el-select v-model="ruleForm.appType" placeholder="请选择" @change="appTypeChange">
|
|
|
+ <el-option label="IOS" value="IOS">IOS</el-option>
|
|
|
+ <el-option label="Android" value="Android">Android</el-option>
|
|
|
+ </el-select>
|
|
|
+ </el-form-item>
|
|
|
+ <el-form-item label="APP包" prop="fileList">
|
|
|
+ <!-- uploadUrl token:sessionStorage.getItem('token') :on-change="uploadSectionFile"-->
|
|
|
+ <el-upload style="width:340px" class="upload-demo"
|
|
|
+ :limit='1' :on-exceed="handleExceed"
|
|
|
+ action=''
|
|
|
+ :on-change="()=>{this.$refs.ruleForm.validateField('fileList')}"
|
|
|
+ :http-request="uploadSectionFile"
|
|
|
+ :file-list="ruleForm.fileList"
|
|
|
+ :on-remove="fileRemove"
|
|
|
+ drag :accept="accept" :multiple="false">
|
|
|
+ <i class="el-icon-upload"></i>
|
|
|
+ <div class="el-upload__text">将文件拖到此处,或<em>点击上传</em></div>
|
|
|
+ <div class="el-upload__tip" slot="tip">
|
|
|
+ <p>1、支持 .ipa、.apk文件,大小不超过1G</p>
|
|
|
+ <p>2、文件格式以4DKanKan+_版本号组成</p>
|
|
|
+ </div>
|
|
|
+ </el-upload>
|
|
|
+ <el-progress v-if="completeshow" style="width: 340px;margin-top: 8px" :percentage="complete" />
|
|
|
+ </el-form-item>
|
|
|
+ <el-form-item label="MD5" prop="md5">
|
|
|
+ <el-input v-model="ruleForm.md5" :disabled="!md5"></el-input>
|
|
|
+ </el-form-item>
|
|
|
+ <el-form-item label="版本信息" prop="jsonFile">
|
|
|
+ <el-upload style="width:340px" class="upload-demo"
|
|
|
+ accept='.json' :limit='1'
|
|
|
+ :headers="{
|
|
|
+ token:token
|
|
|
+ }"
|
|
|
+ :action="uploadUrl"
|
|
|
+ :on-change="()=>{this.$refs.ruleForm.validateField('jsonFile')}"
|
|
|
+ :before-upload="handleChange"
|
|
|
+ :file-list="ruleForm.jsonFile">
|
|
|
+ <el-button size="small" type="primary">点击上传</el-button>
|
|
|
+ <div slot="tip" class="el-upload__tip">仅能上传version.josn文件,且不超过10 M</div>
|
|
|
+ </el-upload>
|
|
|
+ <!-- <el-progress v-if="completeshow" style="width: 340px;margin-top: 8px" :percentage="complete" /> -->
|
|
|
+ </el-form-item>
|
|
|
+ </el-form>
|
|
|
+ <div slot="footer" class="dialog-footer">
|
|
|
+ <el-button @click="cancel">取 消</el-button>
|
|
|
+ <el-button type="primary" @click="submit">确 定</el-button>
|
|
|
+ </div>
|
|
|
+ </div>
|
|
|
+ </div>
|
|
|
+ <div v-else class="order-management-body">
|
|
|
+ <div class="order-management-inner">
|
|
|
+ <div class="base-info">
|
|
|
+ <span>关键词:</span>
|
|
|
+ <el-input style="width:220px;" @keyup.enter.native="currentPage=1&&_getCameraData()" v-model="searchKey" placeholder="关键词"></el-input>
|
|
|
+ <el-button type="primary" @click="currentPage=1&&_getCameraData()" color='red'>搜索</el-button>
|
|
|
+ <el-button icon="el-icon-plus" type="primary" style="float: right;" @click="showadd" color='red'>新增</el-button>
|
|
|
+ </div>
|
|
|
+ </div>
|
|
|
+ <!-- 全部 -->
|
|
|
+ <div class="device-management_bottom">
|
|
|
+ <div class="order-management-table">
|
|
|
+ <el-table ref="order_table" class='e-table' :data="cameras" style="width: 100%">
|
|
|
+ <el-table-column label="序号" type="index" width="50" align="center">
|
|
|
+ <template scope="scope">
|
|
|
+ <span>{{(currentPage - 1) * pagesize + scope.$index + 1}}</span>
|
|
|
+ </template>
|
|
|
+ </el-table-column>
|
|
|
+ <el-table-column prop="fileServerType" label="上传服务器">
|
|
|
+ </el-table-column>
|
|
|
+ <el-table-column prop="agent" label="代理商标识">
|
|
|
+ </el-table-column>
|
|
|
+ <el-table-column prop="appType" label="APP类型">
|
|
|
+ </el-table-column>
|
|
|
+ <el-table-column prop="name" label="APP包">
|
|
|
+ </el-table-column>
|
|
|
+ <el-table-column prop="md5" label="MD5">
|
|
|
+ </el-table-column>
|
|
|
+ <el-table-column width="300" prop="createTime" label="上传时间">
|
|
|
+ </el-table-column>
|
|
|
+ <!-- <el-table-column width="300" label="上传时间">
|
|
|
+ <template slot-scope="scope">
|
|
|
+ <div>{{scope.row.createTime}}</div>
|
|
|
+ </template>
|
|
|
+ </el-table-column> -->
|
|
|
+
|
|
|
+ <el-table-column label="操作">
|
|
|
+ <template slot-scope="scope">
|
|
|
+ <!-- <el-button type="text" @click="showDialog(scope.row)" class="edit_btn">编辑</el-button> -->
|
|
|
+ <el-button type="text" @click="del(scope.row.id)" class="delete_btn">删除</el-button>
|
|
|
+ </template>
|
|
|
+ </el-table-column>
|
|
|
+ </el-table>
|
|
|
+ </div>
|
|
|
+ <div class="order-management-pagination">
|
|
|
+ <el-pagination @current-change="handleCurrentChange" :current-page.sync="currentPage" :page-size="pagesize" layout="total, prev, pager, next, jumper" :total="total">
|
|
|
+ </el-pagination>
|
|
|
+ </div>
|
|
|
+ </div>
|
|
|
+ </div>
|
|
|
+
|
|
|
+ </div>
|
|
|
+ </div>
|
|
|
+</template>
|
|
|
+<script>
|
|
|
+let tempForm = {
|
|
|
+ fileServerType:'',
|
|
|
+ agent:'',
|
|
|
+ appType:'',
|
|
|
+ md5:'',
|
|
|
+ name:'',
|
|
|
+ fileList:[],
|
|
|
+ jsonFile:[]
|
|
|
+}
|
|
|
+export default {
|
|
|
+ data () {
|
|
|
+ var validateMD5 = (rule, value, callback) => {
|
|
|
+ if (value === '') {
|
|
|
+ callback(new Error('请输入MD5'));
|
|
|
+ } else {
|
|
|
+ this.chenkMd5(value,callback)
|
|
|
+ }
|
|
|
+ }
|
|
|
+ let validateFileUrl =(rule, value, callback)=>{
|
|
|
+ console.log('fileList',value,this.ruleForm)
|
|
|
+ if(!value){
|
|
|
+ return callback(new Error("请上传文件"))
|
|
|
+ }
|
|
|
+ if (this.ruleForm.fileList.length < 1) {//我控制了FileList 长度代表文件个数
|
|
|
+ callback(new Error("请上传文件"))
|
|
|
+ } else {
|
|
|
+ callback()
|
|
|
+ }
|
|
|
+ }
|
|
|
+ let validateJsonFile = (rule, value, callback) => {
|
|
|
+ console.log('fileList',value,this.ruleForm)
|
|
|
+ if(!value){
|
|
|
+ return callback(new Error("请上传文件"))
|
|
|
+ }
|
|
|
+ if (this.ruleForm.jsonFile.length < 1) {//我控制了FileList 长度代表文件个数
|
|
|
+ callback(new Error("请上传文件"))
|
|
|
+ } else {
|
|
|
+ callback()
|
|
|
+ }
|
|
|
+ }
|
|
|
+ return {
|
|
|
+ expands: [],
|
|
|
+ accept:'.ipa, .apk',
|
|
|
+ md5:null,
|
|
|
+ complete:0,
|
|
|
+ completeshow:false,
|
|
|
+ expandedArr: [],
|
|
|
+ cameras: [],
|
|
|
+ currentPage: 1,
|
|
|
+ key_input: '',
|
|
|
+ fullscreenLoading: false,
|
|
|
+ searchKey: '',
|
|
|
+ total: 0,
|
|
|
+ uploadUrl: this.$server + '/manager/app/upload',
|
|
|
+ token: sessionStorage.getItem('token'),
|
|
|
+ // expressNum_input: "",
|
|
|
+ searchDate: [],
|
|
|
+ searchOrderNumber: '',
|
|
|
+ searchPhone: '',
|
|
|
+ searchExpressNum: '',
|
|
|
+ hasClickSearch: false,
|
|
|
+ tabIndex: 0,
|
|
|
+ addVisible: false,
|
|
|
+ ruleForm: tempForm,
|
|
|
+ currentImgType: '',
|
|
|
+ rules: {
|
|
|
+ fileList:[{
|
|
|
+ required: true, validator: validateFileUrl, trigger: 'change'
|
|
|
+ }],
|
|
|
+ jsonFile:[{
|
|
|
+ required: true, validator: validateJsonFile, trigger: 'change'
|
|
|
+ }],
|
|
|
+ appType:[
|
|
|
+ { required: true, message: '请选择APP类型', trigger: 'change' }
|
|
|
+ ],
|
|
|
+ agent:[
|
|
|
+ { required: true, message: '请选择或输入代理商', trigger: 'blur' }
|
|
|
+ ],
|
|
|
+ fileServerType:[
|
|
|
+ { required: true, message: '请选择上传服务器', trigger: 'change' }
|
|
|
+ ],
|
|
|
+ companyName: [
|
|
|
+ { required: true, message: '请输入客户名称', trigger: 'blur' }
|
|
|
+ ],
|
|
|
+ md5:[
|
|
|
+ { required: true, message: '请输入MD5', trigger: 'blur' },
|
|
|
+ { validator: validateMD5, trigger: 'blur' }
|
|
|
+ ]
|
|
|
+ },
|
|
|
+ cameraInfo: {
|
|
|
+ wifi: '',
|
|
|
+ type: '',
|
|
|
+ address: '',
|
|
|
+ initPoint: '',
|
|
|
+ orderNum: ''
|
|
|
+ },
|
|
|
+
|
|
|
+ formLabelWidth: '30%',
|
|
|
+ value2: true,
|
|
|
+ currentChildName: '',
|
|
|
+ currentDeviceId: '',
|
|
|
+ currentBalance: '',
|
|
|
+ pagesize: 10,
|
|
|
+ clients: [],
|
|
|
+ restaurants:[]
|
|
|
+ }
|
|
|
+ },
|
|
|
+ watch: {
|
|
|
+ currentPage () {
|
|
|
+ this._getCameraData()
|
|
|
+ }
|
|
|
+ },
|
|
|
+ methods: {
|
|
|
+ appTypeChange(val){
|
|
|
+ const list = {
|
|
|
+ 'Android':'.apk',
|
|
|
+ 'IOS':'.ipa',
|
|
|
+ }
|
|
|
+ this.accept = list[val] || '.ipa, .apk'
|
|
|
+ },
|
|
|
+ async getAgenetList(){
|
|
|
+ let res = await this.$http.post('/manager/app/agenetList',{})
|
|
|
+ let restaurants = []
|
|
|
+ if (res.code === 0) {
|
|
|
+ restaurants = res.data.map(ele => {
|
|
|
+ return {value:ele}
|
|
|
+ })
|
|
|
+ }
|
|
|
+ this.restaurants = restaurants
|
|
|
+ },
|
|
|
+ del (id) {
|
|
|
+ this.$confirm('此操作将删除该条数据, 是否继续?', '提示', {
|
|
|
+ confirmButtonText: '确定',
|
|
|
+ cancelButtonText: '取消',
|
|
|
+ type: 'warning'
|
|
|
+ })
|
|
|
+ .then(async () => {
|
|
|
+ this.fullscreenLoading = true
|
|
|
+ let res = await this.$http.post('/manager/app/delete', {
|
|
|
+ id: id
|
|
|
+ })
|
|
|
+ if (res.code === 0) {
|
|
|
+ this.$message({
|
|
|
+ type: 'success',
|
|
|
+ message: '删除成功!'
|
|
|
+ })
|
|
|
+ } else {
|
|
|
+ this.$message({
|
|
|
+ type: 'error',
|
|
|
+ message: res.msg
|
|
|
+ })
|
|
|
+ }
|
|
|
+ this._getCameraData()
|
|
|
+ this.fullscreenLoading = false
|
|
|
+ })
|
|
|
+ .catch(() => {
|
|
|
+ this.$message({
|
|
|
+ type: 'info',
|
|
|
+ message: '已取消删除'
|
|
|
+ })
|
|
|
+ this.fullscreenLoading = false
|
|
|
+ })
|
|
|
+ },
|
|
|
+ async _getCameraData () {
|
|
|
+ this.fullscreenLoading = true
|
|
|
+ if (!Number(this.currentPage)) this.currentPage = 1
|
|
|
+ let res = await this.$http.post('/manager/app/list', {
|
|
|
+ pageNum: this.currentPage,
|
|
|
+ pageSize: this.pagesize,
|
|
|
+ keyword: this.searchKey
|
|
|
+ })
|
|
|
+ this.fullscreenLoading = false
|
|
|
+ if (res.code === 0) {
|
|
|
+ let temp = res.data.list
|
|
|
+ for (var i = 0; i < temp.length; i++) {
|
|
|
+ temp[i]['userName'] = temp[i]['userName']
|
|
|
+ ? temp[i]['userName']
|
|
|
+ : '未绑定'
|
|
|
+ temp[i]['activatedTime'] = temp[i]['activatedTime']
|
|
|
+ ? new Date(temp[i]['activatedTime']).format('yyyy-MM-dd hh:mm:ss')
|
|
|
+ : '/'
|
|
|
+ }
|
|
|
+ this.cameras = temp
|
|
|
+ this.total = res.data.total ? res.data.total : this.total
|
|
|
+ }
|
|
|
+ },
|
|
|
+ async chenkMd5 (value,callback) {
|
|
|
+ console.log('value',value == 123456)
|
|
|
+ if(value == this.md5){
|
|
|
+ callback();
|
|
|
+ }else{
|
|
|
+ callback(new Error('MD5错误!请重新输入'));
|
|
|
+ }
|
|
|
+ return true
|
|
|
+ },
|
|
|
+ uploadFile(file, fileList){
|
|
|
+ // this.ruleForm.fileList = fileList
|
|
|
+ console.log('file, fileList)',file, fileList);
|
|
|
+ },
|
|
|
+ handleExceed(files, fileList) {
|
|
|
+ this.$message.warning(`只能选择一个文件上传`);
|
|
|
+ },
|
|
|
+ handleCurrentChange (val) {
|
|
|
+ this.currentPage = val
|
|
|
+ },
|
|
|
+ handleAvatarSuccess (res, file) {
|
|
|
+ this.ruleForm[this.currentImgType] = res.data
|
|
|
+ },
|
|
|
+ beforeAvatarUpload (file) {
|
|
|
+ const isLt2M = file.size / 1024 / 1024 < 5
|
|
|
+
|
|
|
+ if (!isLt2M) {
|
|
|
+ this.$message.error('上传头像图片大小不能超过 5MB!')
|
|
|
+ }
|
|
|
+ return isLt2M
|
|
|
+ },
|
|
|
+ removeDomain () {
|
|
|
+ console.log();
|
|
|
+ this.$refs['ruleForm'].validate('md5')
|
|
|
+ },
|
|
|
+
|
|
|
+ submit () {
|
|
|
+ console.log('submit',this.$refs['ruleForm']);
|
|
|
+ this.$refs['ruleForm'].validate((valid) => {
|
|
|
+ if (valid) {
|
|
|
+ // this.addVisible = true
|
|
|
+ this._editCompany()
|
|
|
+ } else {
|
|
|
+ return false
|
|
|
+ }
|
|
|
+ })
|
|
|
+ },
|
|
|
+ cancel(){
|
|
|
+ this.ruleForm = tempForm
|
|
|
+ this.$refs['ruleForm'].resetFields()
|
|
|
+ this.md5 = null
|
|
|
+ this.addVisible = false
|
|
|
+ },
|
|
|
+ async _editCompany () {
|
|
|
+ let {
|
|
|
+ fileServerType,
|
|
|
+ agent,
|
|
|
+ appType,
|
|
|
+ md5,
|
|
|
+ name,
|
|
|
+ } = this.ruleForm
|
|
|
+
|
|
|
+ this.fullscreenLoading = true
|
|
|
+ let res = await this.$http.post('/manager/app/save', {
|
|
|
+ fileServerType,
|
|
|
+ agent,
|
|
|
+ appType,
|
|
|
+ md5,
|
|
|
+ name,
|
|
|
+ })
|
|
|
+ this.fullscreenLoading = false
|
|
|
+ if (res.code === 0) {
|
|
|
+ this.$alert('上传成功', '添加成功', {
|
|
|
+ confirmButtonText: '确定'
|
|
|
+ })
|
|
|
+ this.getAgenetList()
|
|
|
+ this._getCameraData()
|
|
|
+ this.cancel()
|
|
|
+ } else {
|
|
|
+ this.$alert(res.msg, '操作失败', {
|
|
|
+ confirmButtonText: '确定'
|
|
|
+ })
|
|
|
+ }
|
|
|
+ },
|
|
|
+ handleSelect (row) {
|
|
|
+ this.$refs.ruleForm.validateField('agent')
|
|
|
+ },
|
|
|
+ querySearch(queryString, cb) {
|
|
|
+ var restaurants = this.restaurants;
|
|
|
+ var results = queryString ? restaurants.filter(this.createFilter(queryString)) : restaurants;
|
|
|
+ // 调用 callback 返回建议列表的数据
|
|
|
+ cb(results);
|
|
|
+ },
|
|
|
+ createFilter(queryString) {
|
|
|
+ return (restaurant) => {
|
|
|
+ return (restaurant.value.toLowerCase().indexOf(queryString.toLowerCase()) === 0);
|
|
|
+ };
|
|
|
+ },
|
|
|
+ showadd(){
|
|
|
+ this.addVisible = true
|
|
|
+ },
|
|
|
+ fileRemove(){
|
|
|
+ this.ruleForm.fileList = []
|
|
|
+ this.ruleForm.md5 = ''
|
|
|
+ this.md5 = null
|
|
|
+ },
|
|
|
+ handleChange(file){
|
|
|
+ let fileType = file.type,
|
|
|
+ isLt10M = file.size / 1024/1024 < 10;
|
|
|
+ if (!isLt10M) {
|
|
|
+ this.$message.error("上传文件不能超过10M,请重新上传");
|
|
|
+ return false;
|
|
|
+ }
|
|
|
+ if (file.name !== 'version.json') {
|
|
|
+ this.$message.error("请上传文件名称为version.json");
|
|
|
+ return false;
|
|
|
+ }
|
|
|
+ this.ruleForm.jsonFile = [file]
|
|
|
+
|
|
|
+ },
|
|
|
+ async uploadSectionFile(params) {
|
|
|
+ const file = params.file,
|
|
|
+ fileType = file.type,
|
|
|
+ isImage = fileType.indexOf("image") != -1,
|
|
|
+ isLt1G = file.size / 1024/1024/1024 < 1;
|
|
|
+ console.log('isLt1G',fileType,params);
|
|
|
+ // 这里常规检验,看项目需求而定
|
|
|
+ // if (!isImage) {
|
|
|
+ // this.$message.error("只能上传图片格式png、jpg、gif!");
|
|
|
+ // return;
|
|
|
+ // }
|
|
|
+ if (!isLt1G) {
|
|
|
+ this.fileRemove()
|
|
|
+ this.$message.error("上传文件过大,请重新上传");
|
|
|
+ return;
|
|
|
+ }
|
|
|
+ // 根据后台需求数据格式
|
|
|
+ const form = new FormData();
|
|
|
+ // 文件对象
|
|
|
+ form.append("file", file);
|
|
|
+ // 本例子主要要在请求时添加特定属性,所以要用自己方法覆盖默认的action
|
|
|
+ // form.append("clientType", 'xxx');
|
|
|
+ // 项目封装的请求方法,下面做简单介绍
|
|
|
+ console.log('isLt1G',form,file);
|
|
|
+ this.completeshow = true
|
|
|
+ let res = await this.$http({
|
|
|
+ url: '/manager/app/upload',
|
|
|
+ method: 'post',
|
|
|
+ data: form,
|
|
|
+ processData: false,
|
|
|
+ contentType: false,
|
|
|
+ onUploadProgress: (progressEvent) => {
|
|
|
+ this.complete = ((progressEvent.loaded / progressEvent.total) * 100) | 0
|
|
|
+ console.log('上传 ' + this.complete)
|
|
|
+ },
|
|
|
+ })
|
|
|
+ this.completeshow = false
|
|
|
+
|
|
|
+ this.complete = 0
|
|
|
+ if (res.code === 0) {
|
|
|
+ this.ruleForm.fileList = [file]
|
|
|
+ this.ruleForm.name = file.name
|
|
|
+ this.md5 = res.data || '0'
|
|
|
+ }
|
|
|
+ }
|
|
|
+ },
|
|
|
+ created () {
|
|
|
+ this._getCameraData()
|
|
|
+ this.getAgenetList()
|
|
|
+ }
|
|
|
+}
|
|
|
+</script>
|
|
|
+<style lang="css" scoped>
|
|
|
+@import "./style.css";
|
|
|
+</style>
|
|
|
+<style type="text/css">
|
|
|
+.inline-input{
|
|
|
+ width:340px;
|
|
|
+}
|
|
|
+.device-management_bottom{
|
|
|
+
|
|
|
+}
|
|
|
+.el-table__expand-icon > i {
|
|
|
+ display: none !important;
|
|
|
+}
|
|
|
+.dialog-footer{
|
|
|
+ text-align: center;
|
|
|
+}
|
|
|
+.edit_btn span {
|
|
|
+ color: #09e1c0;
|
|
|
+}
|
|
|
+
|
|
|
+.delete_btn span {
|
|
|
+ color: #f56c6c;
|
|
|
+}
|
|
|
+</style>
|