文件
mashangyoujiu/Application/Super/View/App/applist.html

728 行
29 KiB
HTML
可执行文件

<!--[1.8.20]-->
<style>
.card-top {
display: flex;
align-items: center;
}
.card-top img {
width: 27%;
height: 27%;
border-radius: 5px;
}
.version-name {
font-size: 30px;
overflow: hidden;
text-overflow: ellipsis;
white-space: nowrap;
width: 290px;
color: #333;
}
.version-number {
font-size: 14px;
overflow: hidden;
text-overflow: ellipsis;
white-space: nowrap;
width: 290px;
color: #666;
}
.card-bottom {
display: flex;
justify-content: flex-end;
}
.demo-image_height {
height: 550px;
}
.el-notification {
z-index: 20000001 !important;
}
.el-col-6 {
width: 420px;
}
#softwareForm .el-input {
width: 240px;
}
#softwareForm > .el-scrollbar__wrap {
overflow-x: hidden;
}
</style>
<div id="softApp" v-cloak style="width: 100%">
<el-tabs type="border-card" v-model="tabs" @tab-click="clickTabs">
<el-tab-pane label="软件管理" name="software">
<if condition="$authArr['uploadSoftware'] eq true">
<el-button type="primary" size="small" @click="clickUploadSoftware">上传软件</el-button>
</if>
<hr/>
<template v-if="software_list.length <= 0">
<div style="width: 100%;height: 500px;text-align: center">
<div style="margin-top: 20px;color: #cbc9cc;">暂无上传软件</div>
</div>
</template>
<div v-else style="display: flex;align-items: center;flex-wrap: wrap;">
<div v-for="(item, index) in software_list" :key="index" style="width: 31%;margin: 20px 2% 0 0;">
<el-card>
<div class="card-top">
<img :src="item.logo_url" class="image">
<div style="padding: 12px;">
<div class="version-name">{{ item.name }}</div>
<div class="version-number">版本: {{ item.version }}</div>
<div class="version-number">分类: {{ item.plug_name }}</div>
<div class="version-number">服务端: {{ item.type_name }}</div>
<div class="version-number">更新日期: {{ item.changetime }}</div>
</div>
</div>
<div class="card-bottom">
<if condition="$authArr['deleteSoftware'] eq true">
<el-button size="mini" @click="deleteSoftware(item.id)">删除</el-button>
</if>
<if condition="$authArr['uploadSoftware'] eq true">
<el-button type="success" size="mini" @click="clickUpdateSoftware(item)">更新</el-button>
</if>
<el-button v-if="item.type == 2 || item.type == 6" type="primary" size="mini"
@click="experiencePreview(item.experience_url)">二维码
</el-button>
<el-button type="primary" size="mini" @click="clickPreviewImage(item.id)">预览图</el-button>
</div>
</el-card>
</div>
</div>
</el-tab-pane>
<el-tab-pane label="分类管理" name="class">
<if condition="$authArr['addToClass'] eq true">
<template>
<el-button type="primary" size="small" @click="add_class_visible = true">添加分类</el-button>
</template>
</if>
<hr/>
<template>
<el-table :data="class_list" border stripe style="width: 60%">
<el-table-column type="index" label="排序" width="60"></el-table-column>
<el-table-column prop="uitname" label="分类" show-overflow-toolti="true"></el-table-column>
<el-table-column prop="addtime" label="时间" show-overflow-toolti="true"></el-table-column>
<el-table-column label="操作" width="180">
<template slot-scope="scope">
<if condition="$authArr['addToClass'] eq true">
<el-button type="primary" size="mini" @click="updateToClass(scope.row)">编辑</el-button>
</if>
<el-button size="mini" @click="deleteClass(scope.row.id)">删除</el-button>
</template>
</el-table-column>
</el-table>
</template>
</el-tab-pane>
</el-tabs>
<!-- 上传软件 -->
<el-dialog :title="softwareForm.id?'更新软件':'上传软件'" :append-to-body="true"
:visible.sync="upload_software_visible"
width="600px" :top="'10vh'"
:close-on-click-modal="false"
@close="closeUploadSoftware">
<el-scrollbar style="height: calc(90vh - 230px)">
<el-form :model="softwareForm" ref="softwareForm" id="softwareForm"
:rules="rules" label-width="150px"
label-suffix=":"
size="mini">
<el-form-item label="名称" prop="name">
<el-input v-model="softwareForm.name" placeholder="请输入软件名称"></el-input>
</el-form-item>
<el-form-item label="版本号" prop="version">
<el-input v-model="softwareForm.version" placeholder="请输入软件版本号"
onkeyup="value=value.replace(/[^A-Z|a-z|\d|.|-]/g,'')"></el-input>
</el-form-item>
<el-form-item label="分类" prop="plug_type">
<el-select :disabled="softwareForm.id?true:false"
v-model="softwareForm.plug_type"
placeholder="请选择分类">
<el-option v-for="(item,index) in class_list"
:label="item.uitname"
:value="item.id"
:key="index"></el-option>
</el-select>
</el-form-item>
<el-form-item label="服务端" prop="type">
<el-select :disabled="softwareForm.id?true:false"
v-model="softwareForm.type"
placeholder="请选择服务端"
@change="changeType">
<el-option label="PC收银" value="1"></el-option>
<el-option label="线上商城" value="2"></el-option>
<el-option label="安卓收银" value="4"></el-option>
<el-option label="安卓助手" value="5"></el-option>
<el-option label="小程序助手" value="6"></el-option>
</el-select>
</el-form-item>
<el-form-item label="版本介绍" prop="information">
<el-input type="textarea"
v-model="softwareForm.information"
class="text_area"
:autosize="{minRows: 4}"></el-input>
</el-form-item>
<el-form-item label="logo" prop="logo_url">
<choose-one-file :file-url.sync="softwareForm.logo_url" @change="changeLogo"></choose-one-file>
</el-form-item>
<el-form-item label="小程序预览码" prop="experience_url" v-if="softwareForm.type==2||softwareForm.type==6">
<choose-one-file :file-url.sync="softwareForm.experience_url"
@change="changeExperience"></choose-one-file>
</el-form-item>
<el-form-item label="下载链接" prop="down_url"
v-if="softwareForm.type==1||softwareForm.type==4||softwareForm.type==5">
<el-input v-model="softwareForm.down_url" style="width: 100%" placeholder="请输入下载链接"></el-input>
</el-form-item>
</el-form>
</el-scrollbar>
<span slot="footer" class="dialog-footer">
<el-button size="small" @click="closeUploadSoftware">放 弃</el-button>
<el-button type="primary" size="small" @click="uploadSoftware">提 交</el-button>
</span>
</el-dialog>
<!-- 二维码预览 -->
<el-dialog title="二维码预览" :append-to-body="true" :visible.sync="preview_visible" :close-on-click-modal="false"
width="580px" @close="closeExperiencePreview">
<div style="width: 100%;height: 100%;text-align: center;margin: 10px">
<el-image :src="experience_url"></el-image>
</div>
</el-dialog>
<!-- 预览图 -->
<el-dialog title="预览图" :append-to-body="true" :visible.sync="preview_image_visible" :close-on-click-modal="false"
width="1000px" @close="closePreviewImage">
<if condition="$authArr['uploadPreviewImage']">
<el-upload
class="upload-demo"
name="preview_image"
ref="upload_preview_image"
action="{:U('uploadPreviewImage')}"
:data="{id:software_id}"
:limit="5"
:auto-upload="false"
:on-error="uploadError"
:multiple="true"
:on-success="uploadSuccess">
<el-button slot="trigger" size="small" type="primary">选取图片</el-button>
<el-button style="margin-left: 10px;" size="small" type="success" @click="submitUpload">上传图片</el-button>
<div slot="tip" class="el-upload__tip">只能上传jpg/png格式,单次最多上传5张图片,且每张不超过1M</div>
</el-upload>
</if>
<div class="demo-image__lazy demo-image_height">
<div v-if="preview_image.length <= 0" style="text-align: center">
<div style="margin-top: 20px;color: #cbc9cc;">暂无预览图</div>
</div>
<div v-else style="margin: 20px 50px;">
<el-carousel trigger="click" height="500px" :autoplay="automatic">
<el-carousel-item v-for="(item,index) in preview_image" :key="index">
<el-image style="width: 100%;height: 100%;" :src="item.imgurl"></el-image>
<if condition="$authArr['uploadPreviewImage'] eq true">
<i class="el-icon-circle-close"
style="position: absolute;right: 10px;top: 10px;color: #ddd;font-size: 30px;cursor:pointer;"
@click="deletePreviewImage(item.id)"></i>
</if>
</el-carousel-item>
</el-carousel>
</div>
</div>
</el-dialog>
<!-- 添加分类 -->
<el-dialog :title="class_title" :append-to-body="true" :visible.sync="add_class_visible" width="580px"
:close-on-click-modal="false"
@close="closeAddClass">
<el-form class="demo-ruleForm" label-width="100px">
<el-form-item label="分类名称:">
<el-input v-model="class_name" placeholder="请输入分类名称" prefix-icon="el-icon-edit" size="small"></el-input>
</el-form-item>
</el-form>
<span slot="footer" class="dialog-footer">
<el-button size="small" @click="closeAddClass">取 消</el-button>
<el-button type="primary" size="small" @click="addToClass">提 交</el-button>
</span>
</el-dialog>
</div>
<script>
var softApp = new Vue({
el: '#softApp',
data() {
let _t = this;
return {
tabs: 'software', // 'software':软件 'class':分类
software_list: [], // 软件数据
class_list: [], // 分类数据
upload_software_visible: false, // 上传软件
softwareForm: {
id: '',
name: '', // 名称
version: '', // 版本
plug_type: '', // 分类
type: '', // 类型
information: '', // 版本说明
logo_url: '', // logo
experience_url: '', // 小程序预览码
down_url: '', // 下载链接
},
rules: {
name: [{message: '请输入名称', required: true, trigger: 'change'}],
version: [{message: '请输入版本号', required: true, trigger: 'change'}],
plug_type: [{message: '请选择分类', required: true, trigger: 'change'}],
type: [{message: '请选择类型', required: true, trigger: 'change'}],
information: [{message: '请输入版本说明', required: true, trigger: 'change'}],
logo_url: [{message: '请选择logo', required: true, trigger: 'change'}],
experience_url: [{message: '请选择小程序预览码', required: true, trigger: 'blur'}, {
validator: function (rule, value, callback) {
if ([2, 6].indexOf(_t.softwareForm.type) != -1 && !value) {
callback(new Error("请选择小程序预览码"));
} else {
callback();
}
}, trigger: 'change'
}],
down_url: [{message: '请填写下载链接', required: true, trigger: 'blur'}, {
validator: function (rule, value, callback) {
if ([1, 4, 5].indexOf(_t.softwareForm.type) != -1 && !value) {
callback(new Error("请填写下载链接"));
} else {
callback();
}
}, trigger: 'change'
}],
},
preview_visible: false, // 二维码预览
experience_url: '', // 二维码url
preview_image_visible: false, // 预览图
software_id: '', // 软件id
preview_image: [], // 预览图
automatic: true, // 预览图自动切换
add_class_visible: false, // 添加分类
class_title: '添加分类', // 弹出层标题
class_info: [], // 分类id
class_name: '', // 分类名称
};
},
methods: {
/**
* 获取软件
*/
getSoftware() {
var vm = this;
$.ajax({
url: "{:U('getSoftware')}",
type: 'post',
success: function (res) {
if (res.status == 1) {
vm.software_list = res.software_list;
} else {
vm.$message({
showClose: true,
message: res.msg,
type: 'error'
});
}
}
});
},
/**
* 获取分类
*/
getClass() {
var vm = this;
$.ajax({
url: "{:U('getClass')}",
type: 'post',
success: function (res) {
if (res.status == 1) {
vm.class_list = res.class_list;
} else {
vm.$message({
showClose: true,
message: res.msg,
type: 'error'
});
}
}
});
},
/**
* 切换tabs
*/
clickTabs() {
// 判断
switch (this.tabs) {
case 'software':
this.getSoftware();
break;
case 'class':
this.getClass();
break;
default:
this.getSoftware();
}
},
/**
* 点击上传软件
*/
clickUploadSoftware() {
this.getClass();
this.softwareForm = {
id: '',
name: '',
version: '',
plug_type: '',
type: '',
information: '',
logo_url: '',
experience_url: '',
down_url: '',
}
this.upload_software_visible = true
this.$nextTick(() => {
this.$refs.softwareForm.resetFields()
})
},
//logo发生变化
changeLogo() {
this.$refs.softwareForm.validateField('logo_url');
},
//预览图发生变化
changeExperience() {
this.$refs.softwareForm.validateField('experience_url');
},
//服务端发生变化
changeType() {
this.changeLogo();
this.changExperience();
},
/**
* 上传 更新软件
*/
uploadSoftware() {
this.$refs.softwareForm.validate((valid) => {
console.log(valid);
if (!valid) {
return this.$message.warning('请检查必填项')
}
this.sendRequest("{:U('uploadSoftware')}", {
data: this.softwareForm,
success: (res) => {
if (res.status == 1) {
this.$message.success(res.message);
this.closeUploadSoftware();
this.getSoftware();
} else {
this.$message.error(res.message);
}
}
})
})
},
/**
* 点击更新软件
*/
clickUpdateSoftware(info) {
this.softwareForm = {
id: info.id,
name: info.name,
version: info.version,
plug_type: info.plug_type,
type: info.type,
information: info.information,
logo_url: info.logo_url,
experience_url: info.experience_url,
down_url: info.down_url,
}
this.upload_software_visible = true
},
/**
* 关闭上传软件
*/
closeUploadSoftware() {
this.upload_software_visible = false;
},
/**
* 删除软件
*/
deleteSoftware(id) {
var vm = this;
vm.$confirm('此操作将永久删除该软件, 是否继续?', '提示', {
confirmButtonText: '确定',
cancelButtonText: '取消',
type: 'warning'
}).then(() => {
$.ajax({
url: "{:U('deleteSoftware')}",
type: "post",
data: {id: id},
success: function (res) {
if (res.status == 1) {
vm.$message({
showClose: true,
message: res.msg,
type: 'success'
});
vm.getSoftware();
} else {
vm.$message({
showClose: true,
message: res.msg,
type: 'error'
});
}
}
});
});
},
/**
* 二维码预览
*/
experiencePreview(url) {
this.experience_url = url;
this.preview_visible = true;
},
/**
* 关闭二维码预览
*/
closeExperiencePreview() {
this.experience_url = '';
this.preview_visible = false;
},
/**
* 点击预览图
*/
clickPreviewImage(id) {
this.software_id = id;
this.getPreviewImage();
this.preview_image_visible = true;
},
/**
* 获取预览图
*/
getPreviewImage() {
let vm = this;
$.ajax({
url: "{:U('getPreviewImage')}",
type: "post",
data: {id: vm.software_id},
success: function (res) {
if (res.status == 1) {
vm.preview_image = res.preview_image;
} else {
vm.preview_image = [];
}
}
});
},
/**
* 预览图,提交上传
*/
submitUpload() {
this.$refs.upload_preview_image.submit();
},
/**
* 预览图上传成功的钩子
*/
uploadSuccess(response, file, fileList) {
let index = -1;
for (var i = 0; i < fileList.length; i++) {
if (fileList[i].uid == file.uid) {
index = i;
if (fileList[i].response.status == 0) {
this.$notify.error({
title: '错误',
message: file.name + '上传失败,请重新上传',
duration: 2000
});
}
}
}
if (index != -1) {
fileList.splice(index, 1);
}
this.getPreviewImage();
},
/**
* 预览图上传失败的钩子
*/
uploadError() {
this.$message({
showClose: true,
message: '系统异常,请刷新后重试',
type: 'error'
});
},
/**
* 删除预览图
*/
deletePreviewImage(id) {
var vm = this;
vm.automatic = false;
vm.$confirm('此操作将永久删除该张图片, 是否继续?', '提示', {
confirmButtonText: '确定',
cancelButtonText: '取消',
type: 'warning'
}).then(() => {
$.ajax({
url: "{:U('deletePreviewImage')}",
type: "post",
data: {id: id},
success: function (res) {
vm.automatic = true;
if (res.status == 1) {
vm.$message({
showClose: true,
message: res.msg,
type: 'success'
});
vm.getPreviewImage();
} else {
vm.$message({
showClose: true,
message: res.msg,
type: 'error'
});
}
}
});
}).catch(() => {
vm.automatic = true;
});
},
/**
* 关闭预览图
*/
closePreviewImage() {
this.software_id = '';
this.preview_image = [];
this.automatic = true;
this.preview_image_visible = false;
},
/**
* 添加[编辑]分类
*/
addToClass() {
var vm = this;
// 判断
if (!vm.class_name || vm.class_name == '') {
vm.$message({
showClose: true,
message: '请输入分类名称',
type: 'error'
});
return false;
}
if (vm.class_info.length > 0) {
if (vm.class_info.uitname == vm.class_name) {
vm.$message({
showClose: true,
message: '请先编辑再提交',
type: 'error'
});
return false;
}
}
$.ajax({
url: "{:U('addToClass')}",
type: "post",
data: {class_info: vm.class_info, class_name: vm.class_name},
success: function (res) {
if (res.status == 1) {
vm.$message({
showClose: true,
message: res.msg,
type: 'success'
});
vm.getClass();
vm.closeAddClass();
} else {
vm.$message({
showClose: true,
message: res.msg,
type: 'error'
});
}
}
});
},
/**
* 编辑分类
*/
updateToClass(class_info) {
this.add_class_visible = true;
this.class_info = class_info;
this.class_name = class_info.uitname;
this.class_title = '编辑分类';
},
/**
* 关闭添加分类
*/
closeAddClass() {
this.add_class_visible = false;
this.class_info = [];
this.class_name = '';
this.class_title = '添加分类';
},
/**
* 删除分类
*/
deleteClass(class_id) {
var vm = this;
vm.$confirm('此操作将永久删除该条数据, 是否继续?', '提示', {
confirmButtonText: '确定',
cancelButtonText: '取消',
type: 'warning'
}).then(() => {
$.ajax({
url: "{:U('deleteClass')}",
type: "post",
data: {id: class_id},
success: function (res) {
if (res.status == 1) {
vm.$message({
showClose: true,
message: res.msg,
type: 'success'
});
vm.getClass();
} else {
vm.$message({
showClose: true,
message: res.msg,
type: 'error'
});
}
}
});
});
},
},
created() {
this.getSoftware();
},
})
</script>