新增多图片上传pc端返回code 为null

pull/371/head
wuyibo 3 years ago
parent e1057db216
commit 25562c6475

@ -80,8 +80,8 @@ public class WxBuildingInfo extends BaseEntity
private String defaultPicture;
/** 是否支持在线 */
@Excel(name = "是否支持在线")
private Long isSupportlive;
@Excel(name = "支持在线")
private Boolean isSupportlive;
/** 球馆状态 */
@Excel(name = "球馆状态")
@ -93,7 +93,7 @@ public class WxBuildingInfo extends BaseEntity
/** 是否开放 */
@Excel(name = "是否开放")
private Long isOpen;
private Boolean isOpen;
/** 人均价格 */
@Excel(name = "人均价格")
@ -246,12 +246,12 @@ public class WxBuildingInfo extends BaseEntity
{
return defaultPicture;
}
public void setIsSupportlive(Long isSupportlive)
public void setIsSupportlive(Boolean isSupportlive)
{
this.isSupportlive = isSupportlive;
}
public Long getIsSupportlive()
public Boolean getIsSupportlive()
{
return isSupportlive;
}
@ -273,12 +273,12 @@ public class WxBuildingInfo extends BaseEntity
{
return rejectReason;
}
public void setIsOpen(Long isOpen)
public void setIsOpen(Boolean isOpen)
{
this.isOpen = isOpen;
}
public Long getIsOpen()
public Boolean getIsOpen()
{
return isOpen;
}

@ -52,6 +52,7 @@ PUBLIC "-//mybatis.org//DTD Mapper 3.0//EN"
<if test="cityName != null and cityName != ''"> and CITY_NAME like concat('%', #{cityName}, '%')</if>
<if test="status != null "> and STATUS = #{status}</if>
<if test="isOpen != null "> and IS_OPEN = #{isOpen}</if>
<if test="isSupportlive != null "> and IS_SUPPORTLIVE = #{isSupportlive}</if>
<if test="createdId != null "> and CREATED_ID = #{createdId}</if>
</where>
</select>

@ -39,11 +39,13 @@
"url": "https://gitee.com/y_project/RuoYi-Cloud.git"
},
"dependencies": {
"@amap/amap-jsapi-loader": "^1.0.1",
"@riophae/vue-treeselect": "0.4.0",
"axios": "0.24.0",
"clipboard": "2.0.8",
"core-js": "3.19.1",
"echarts": "4.9.0",
"element-china-area-data": "^5.0.2",
"element-ui": "2.15.8",
"file-saver": "2.0.5",
"fuse.js": "6.4.3",
@ -52,14 +54,17 @@
"js-cookie": "3.0.1",
"jsencrypt": "3.0.0-rc.1",
"nprogress": "0.2.0",
"qqmap": "^1.0.1",
"quill": "1.3.7",
"screenfull": "5.0.2",
"sortablejs": "1.10.2",
"vue": "2.6.12",
"vue-qr": "^2.3.0",
"vue-amap": "^0.5.10",
"vue-baidu-map": "^0.21.22",
"vue-count-to": "1.0.13",
"vue-cropper": "0.5.5",
"vue-meta": "2.4.0",
"vue-qr": "^2.3.0",
"vue-router": "3.4.9",
"vuedraggable": "2.24.3",
"vuex": "3.6.0"

@ -25,7 +25,14 @@ export function addWxBuilding(data) {
data: data
})
}
// 批量上传图片
export function batchUploadFiles(data,url) {
return request({
url: url,
method: 'post',
data: data
})
}
// 修改球场管理
export function updateWxBuilding(data) {
return request({

@ -1,86 +1,109 @@
import Vue from 'vue'
import Cookies from 'js-cookie'
import Element from 'element-ui'
import './assets/styles/element-variables.scss'
import '@/assets/styles/index.scss' // global css
import '@/assets/styles/ruoyi.scss' // ruoyi css
import App from './App'
import store from './store'
import router from './router'
import directive from './directive' // directive
import plugins from './plugins' // plugins
import { download } from '@/utils/request'
import './assets/icons' // icon
import './permission' // permission control
import { getDicts } from "@/api/system/dict/data";
import { getConfigKey } from "@/api/system/config";
import { parseTime, resetForm, addDateRange, selectDictLabel, selectDictLabels, handleTree } from "@/utils/ruoyi";
// 分页组件
import Pagination from "@/components/Pagination";
// 自定义表格工具组件
import RightToolbar from "@/components/RightToolbar"
// 富文本组件
import Editor from "@/components/Editor"
// 文件上传组件
import FileUpload from "@/components/FileUpload"
// 图片上传组件
import ImageUpload from "@/components/ImageUpload"
// 图片预览组件
import ImagePreview from "@/components/ImagePreview"
// 字典标签组件
import DictTag from '@/components/DictTag'
// 头部标签组件
import VueMeta from 'vue-meta'
// 字典数据组件
import DictData from '@/components/DictData'
// 全局方法挂载
Vue.prototype.getDicts = getDicts
Vue.prototype.getConfigKey = getConfigKey
Vue.prototype.parseTime = parseTime
Vue.prototype.resetForm = resetForm
Vue.prototype.addDateRange = addDateRange
Vue.prototype.selectDictLabel = selectDictLabel
Vue.prototype.selectDictLabels = selectDictLabels
Vue.prototype.download = download
Vue.prototype.handleTree = handleTree
// 全局组件挂载
Vue.component('DictTag', DictTag)
Vue.component('Pagination', Pagination)
Vue.component('RightToolbar', RightToolbar)
Vue.component('Editor', Editor)
Vue.component('FileUpload', FileUpload)
Vue.component('ImageUpload', ImageUpload)
Vue.component('ImagePreview', ImagePreview)
Vue.use(directive)
Vue.use(plugins)
Vue.use(VueMeta)
DictData.install()
/**
* If you don't want to use mock-server
* you want to use MockJs for mock api
* you can execute: mockXHR()
*
* Currently MockJs will be used in the production environment,
* please remove it before going online! ! !
*/
Vue.use(Element, {
size: Cookies.get('size') || 'medium' // set element-ui default size
})
Vue.config.productionTip = false
new Vue({
el: '#app',
router,
store,
render: h => h(App)
})
import Vue from 'vue'
import Cookies from 'js-cookie'
import Element from 'element-ui'
import './assets/styles/element-variables.scss'
import '@/assets/styles/index.scss' // global css
import '@/assets/styles/ruoyi.scss' // ruoyi css
import App from './App'
import store from './store'
import router from './router'
import directive from './directive' // directive
import plugins from './plugins' // plugins
import { download } from '@/utils/request'
import './assets/icons' // icon
import './permission' // permission control
import { getDicts } from "@/api/system/dict/data";
import { getConfigKey } from "@/api/system/config";
import { parseTime, resetForm, addDateRange, selectDictLabel, selectDictLabels, handleTree } from "@/utils/ruoyi";
// 分页组件
import Pagination from "@/components/Pagination";
// 自定义表格工具组件
import RightToolbar from "@/components/RightToolbar"
// 富文本组件
import Editor from "@/components/Editor"
// 文件上传组件
import FileUpload from "@/components/FileUpload"
// 图片上传组件
import ImageUpload from "@/components/ImageUpload"
// 图片预览组件
import ImagePreview from "@/components/ImagePreview"
// 字典标签组件
import DictTag from '@/components/DictTag'
// 头部标签组件
import VueMeta from 'vue-meta'
// 字典数据组件
import DictData from '@/components/DictData'
import VueAMap from 'vue-amap';
// 全局方法挂载
Vue.prototype.getDicts = getDicts
Vue.prototype.getConfigKey = getConfigKey
Vue.prototype.parseTime = parseTime
Vue.prototype.resetForm = resetForm
Vue.prototype.addDateRange = addDateRange
Vue.prototype.selectDictLabel = selectDictLabel
Vue.prototype.selectDictLabels = selectDictLabels
Vue.prototype.download = download
Vue.prototype.handleTree = handleTree
// 全局组件挂载
Vue.component('DictTag', DictTag)
Vue.component('Pagination', Pagination)
Vue.component('RightToolbar', RightToolbar)
Vue.component('Editor', Editor)
Vue.component('FileUpload', FileUpload)
Vue.component('ImageUpload', ImageUpload)
Vue.component('ImagePreview', ImagePreview)
Vue.use(VueAMap)
// 初始化地图
VueAMap.initAMapApiLoader({
key: '0ecbb910088383bb6661f414b08b7156',
//这些是引入的插件
plugin: ['AMap.Autocomplete',
'AMap.PlaceSearch',
'AMap.Scale',
'AMap.ToolBar',
'AMap.MapType',
'AMap.Geolocation',
'AMap.Geocoder',
'AMap.AutoComplete ',
'AMap.PlaceSearch',
'AMap.Scale',
'AMap.OverView',
'AMap.PolyEditor',
'AMap.CircleEditor',
],
//版本
v: '1.4.4'
});
Vue.use(directive)
Vue.use(plugins)
Vue.use(VueMeta)
DictData.install()
/**
* If you don't want to use mock-server
* you want to use MockJs for mock api
* you can execute: mockXHR()
*
* Currently MockJs will be used in the production environment,
* please remove it before going online! ! !
*/
Vue.use(Element, {
size: Cookies.get('size') || 'medium' // set element-ui default size
})
Vue.config.productionTip = false
new Vue({
el: '#app',
router,
store,
render: h => h(App)
})

@ -1,158 +1,158 @@
import axios from 'axios'
import { Notification, MessageBox, Message, Loading } from 'element-ui'
import store from '@/store'
import { getToken } from '@/utils/auth'
import errorCode from '@/utils/errorCode'
import { tansParams, blobValidate } from "@/utils/ruoyi";
import cache from '@/plugins/cache'
import { saveAs } from 'file-saver'
let downloadLoadingInstance;
// 是否显示重新登录
export let isRelogin = { show: false };
axios.defaults.headers['Content-Type'] = 'application/json;charset=utf-8'
// 创建axios实例
const service = axios.create({
// axios中请求配置有baseURL选项表示请求URL公共部分
baseURL: process.env.VUE_APP_BASE_API,
// 超时
timeout: 10000
})
// request拦截器
service.interceptors.request.use(config => {
// 是否需要设置 token
const isToken = (config.headers || {}).isToken === false
// 是否需要防止数据重复提交
const isRepeatSubmit = (config.headers || {}).repeatSubmit === false
if (getToken() && !isToken) {
config.headers['Authorization'] = 'Bearer ' + getToken() // 让每个请求携带自定义token 请根据实际情况自行修改
}
// get请求映射params参数
if (config.method === 'get' && config.params) {
let url = config.url + '?' + tansParams(config.params);
url = url.slice(0, -1);
config.params = {};
config.url = url;
}
if (!isRepeatSubmit && (config.method === 'post' || config.method === 'put')) {
const requestObj = {
url: config.url,
data: typeof config.data === 'object' ? JSON.stringify(config.data) : config.data,
time: new Date().getTime()
}
const sessionObj = cache.session.getJSON('sessionObj')
if (sessionObj === undefined || sessionObj === null || sessionObj === '') {
cache.session.setJSON('sessionObj', requestObj)
} else {
const s_url = sessionObj.url; // 请求地址
const s_data = sessionObj.data; // 请求数据
const s_time = sessionObj.time; // 请求时间
const interval = 1000; // 间隔时间(ms),小于此时间视为重复提交
if (s_data === requestObj.data && requestObj.time - s_time < interval && s_url === requestObj.url) {
const message = '数据正在处理,请勿重复提交';
console.warn(`[${s_url}]: ` + message)
return Promise.reject(new Error(message))
} else {
cache.session.setJSON('sessionObj', requestObj)
}
}
}
return config
}, error => {
console.log(error)
Promise.reject(error)
})
// 响应拦截器
service.interceptors.response.use(res => {
// 未设置状态码则默认成功状态
const code = res.data.code || 200;
// 获取错误信息
const msg = errorCode[code] || res.data.msg || errorCode['default']
// 二进制数据则直接返回
if(res.request.responseType === 'blob' || res.request.responseType === 'arraybuffer'){
return res.data
}
if (code === 401) {
if (!isRelogin.show) {
isRelogin.show = true;
MessageBox.confirm('登录状态已过期,您可以继续留在该页面,或者重新登录', '系统提示', {
confirmButtonText: '重新登录',
cancelButtonText: '取消',
type: 'warning'
}
).then(() => {
isRelogin.show = false;
store.dispatch('LogOut').then(() => {
location.href = '/index';
})
}).catch(() => {
isRelogin.show = false;
});
}
return Promise.reject('无效的会话,或者会话已过期,请重新登录。')
} else if (code === 500) {
Message({
message: msg,
type: 'error'
})
return Promise.reject(new Error(msg))
} else if (code !== 200) {
Notification.error({
title: msg
})
return Promise.reject('error')
} else {
return res.data
}
},
error => {
console.log('err' + error)
let { message } = error;
if (message == "Network Error") {
message = "后端接口连接异常";
}
else if (message.includes("timeout")) {
message = "系统接口请求超时";
}
else if (message.includes("Request failed with status code")) {
message = "系统接口" + message.substr(message.length - 3) + "异常";
}
Message({
message: message,
type: 'error',
duration: 5 * 1000
})
return Promise.reject(error)
}
)
// 通用下载方法
export function download(url, params, filename) {
downloadLoadingInstance = Loading.service({ text: "正在下载数据,请稍候", spinner: "el-icon-loading", background: "rgba(0, 0, 0, 0.7)", })
return service.post(url, params, {
transformRequest: [(params) => { return tansParams(params) }],
headers: { 'Content-Type': 'application/x-www-form-urlencoded' },
responseType: 'blob'
}).then(async (data) => {
const isLogin = await blobValidate(data);
if (isLogin) {
const blob = new Blob([data])
saveAs(blob, filename)
} else {
const resText = await data.text();
const rspObj = JSON.parse(resText);
const errMsg = errorCode[rspObj.code] || rspObj.msg || errorCode['default']
Message.error(errMsg);
}
downloadLoadingInstance.close();
}).catch((r) => {
console.error(r)
Message.error('下载文件出现错误,请联系管理员!')
downloadLoadingInstance.close();
})
}
export default service
import axios from 'axios'
import { Notification, MessageBox, Message, Loading } from 'element-ui'
import store from '@/store'
import { getToken } from '@/utils/auth'
import errorCode from '@/utils/errorCode'
import { tansParams, blobValidate } from "@/utils/ruoyi";
import cache from '@/plugins/cache'
import { saveAs } from 'file-saver'
let downloadLoadingInstance;
// 是否显示重新登录
export let isRelogin = { show: false };
axios.defaults.headers['Content-Type'] = 'application/json;charset=utf-8'
// 创建axios实例
const service = axios.create({
// axios中请求配置有baseURL选项表示请求URL公共部分
baseURL: process.env.VUE_APP_BASE_API,
// 超时
timeout: 10000
})
// request拦截器
service.interceptors.request.use(config => {
// 是否需要设置 token
const isToken = (config.headers || {}).isToken === false
// 是否需要防止数据重复提交
const isRepeatSubmit = (config.headers || {}).repeatSubmit === false
if (getToken() && !isToken) {
config.headers['Authorization'] = 'Bearer ' + getToken() // 让每个请求携带自定义token 请根据实际情况自行修改
}
// get请求映射params参数
if (config.method === 'get' && config.params) {
let url = config.url + '?' + tansParams(config.params);
url = url.slice(0, -1);
config.params = {};
config.url = url;
}
if (!isRepeatSubmit && (config.method === 'post' || config.method === 'put')) {
const requestObj = {
url: config.url,
data: typeof config.data === 'object' ? JSON.stringify(config.data) : config.data,
time: new Date().getTime()
}
const sessionObj = cache.session.getJSON('sessionObj')
if (sessionObj === undefined || sessionObj === null || sessionObj === '') {
cache.session.setJSON('sessionObj', requestObj)
} else {
const s_url = sessionObj.url; // 请求地址
const s_data = sessionObj.data; // 请求数据
const s_time = sessionObj.time; // 请求时间
const interval = 1000; // 间隔时间(ms),小于此时间视为重复提交
if (s_data === requestObj.data && requestObj.time - s_time < interval && s_url === requestObj.url) {
const message = '数据正在处理,请勿重复提交';
console.warn(`[${s_url}]: ` + message)
return Promise.reject(new Error(message))
} else {
cache.session.setJSON('sessionObj', requestObj)
}
}
}
return config
}, error => {
console.log(error)
Promise.reject(error)
})
// 响应拦截器
service.interceptors.response.use(res => {
// 未设置状态码则默认成功状态
const code = res.data.code || 200;
// 获取错误信息
const msg = errorCode[code] || res.data.msg || errorCode['default']
// 二进制数据则直接返回
if(res.request.responseType === 'blob' || res.request.responseType === 'arraybuffer'){
return res.data
}
if (code === 401) {
if (!isRelogin.show) {
isRelogin.show = true;
MessageBox.confirm('登录状态已过期,您可以继续留在该页面,或者重新登录', '系统提示', {
confirmButtonText: '重新登录',
cancelButtonText: '取消',
type: 'warning'
}
).then(() => {
isRelogin.show = false;
store.dispatch('LogOut').then(() => {
location.href = '/index';
})
}).catch(() => {
isRelogin.show = false;
});
}
return Promise.reject('无效的会话,或者会话已过期,请重新登录。')
} else if (code === 500) {
Message({
message: msg,
type: 'error'
})
return Promise.reject(new Error(msg))
} else if (code !== 200) {
Notification.error({
title: msg
})
return Promise.reject('error')
} else {
return res.data
}
},
error => {
console.log('err' + error)
let { message } = error;
if (message == "Network Error") {
message = "后端接口连接异常";
}
else if (message.includes("timeout")) {
message = "系统接口请求超时";
}
else if (message.includes("Request failed with status code")) {
message = "系统接口" + message.substr(message.length - 3) + "异常";
}
Message({
message: message,
type: 'error',
duration: 5 * 1000
})
return Promise.reject(error)
}
)
// 通用下载方法
export function download(url, params, filename) {
downloadLoadingInstance = Loading.service({ text: "正在下载数据,请稍候", spinner: "el-icon-loading", background: "rgba(0, 0, 0, 0.7)", })
return service.post(url, params, {
transformRequest: [(params) => { return tansParams(params) }],
headers: { 'Content-Type': 'application/x-www-form-urlencoded' },
responseType: 'blob'
}).then(async (data) => {
const isLogin = await blobValidate(data);
if (isLogin) {
const blob = new Blob([data])
saveAs(blob, filename)
} else {
const resText = await data.text();
const rspObj = JSON.parse(resText);
const errMsg = errorCode[rspObj.code] || rspObj.msg || errorCode['default']
Message.error(errMsg);
}
downloadLoadingInstance.close();
}).catch((r) => {
console.error(r)
Message.error('下载文件出现错误,请联系管理员!')
downloadLoadingInstance.close();
})
}
export default service

@ -1,14 +1,6 @@
<template>
<div class="app-container">
<el-form :model="queryParams" ref="queryForm" size="small" :inline="true" v-show="showSearch" label-width="68px">
<el-form-item label="ID" prop="id">
<el-input
v-model="queryParams.id"
placeholder="请输入ID"
clearable
@keyup.enter.native="handleQuery"
/>
</el-form-item>
<el-form-item label="名称" prop="buildingName">
<el-input
v-model="queryParams.buildingName"
@ -35,14 +27,35 @@
/>
</el-form-item>
<el-form-item label="是否开放" prop="isOpen">
<el-input
v-model="queryParams.isOpen"
placeholder="请输入是否开放"
clearable
@keyup.enter.native="handleQuery"
/>
<el-select v-model="queryParams.isOpen">
<el-option
v-for="item in booleanOptions"
:key="item.value"
:label="item.label"
:value="item.value">
</el-option>
</el-select>
</el-form-item>
<el-form-item label="支持在线" prop="isSupportlive">
<el-select v-model="queryParams.isSupportlive">
<el-option
v-for="item in booleanOptions"
:key="item.value"
:label="item.label"
:value="item.value">
</el-option>
</el-select>
</el-form-item>
<el-form-item label="状态" prop="status">
<el-select v-model="queryParams.status">
<el-option
v-for="item in options"
:key="item.value"
:label="item.label"
:value="item.value">
</el-option>
</el-select>
</el-form-item>
<el-form-item>
<el-button type="primary" icon="el-icon-search" size="mini" @click="handleQuery"></el-button>
<el-button icon="el-icon-refresh" size="mini" @click="resetQuery"></el-button>
@ -97,14 +110,14 @@
<el-table v-loading="loading" :data="WxBuildingList" @selection-change="handleSelectionChange">
<el-table-column type="selection" width="55" align="center" />
<el-table-column label="ID" align="center" prop="id" />
<!-- <el-table-column label="ID" align="center" prop="id" />-->
<el-table-column label="球图片" align="center" prop="contactTel" >
<el-table-column label="球图片" align="center" prop="contactTel" >
<template slot-scope="scope">
<el-image
style="width: 200px; height: 100px"
:src="scope.row.defaultPicture"
:preview-src-list="[scope.row.defaultPicture]"
:src="scope.row.codeImgUrl"
:preview-src-list="[scope.row.codeImgUrl]"
:fit="imgfit"></el-image>
</template>
</el-table-column>
@ -115,13 +128,33 @@
<el-table-column label="市" align="center" prop="cityName" />
<el-table-column label="区县编码" align="center" prop="countyCode" />-->
<el-table-column label="城市" align="center" prop="cityName" />
<el-table-column label="是否支持在线" align="center" prop="isSupportlive" />
<el-table-column label="球馆状态" align="center" prop="status" />
<el-table-column label="支持在线" align="center" prop="isSupportlive" >
<template slot-scope="scope">
<el-switch
disabled
v-model="scope.row.isSupportlive"
></el-switch>
</template>
</el-table-column>
<el-table-column label="球馆状态" align="center" prop="status" >
<template slot-scope="scope">
<el-tag v-if="scope.row.status==1" style="color: #5a5e66"></el-tag >
<el-tag v-if="scope.row.status==2" style="color:green"></el-tag >
<el-tag v-if="scope.row.status==3" style="color:red"></el-tag >
</template>
</el-table-column>
<el-table-column label="地址" align="center" prop="address" show-overflow-tooltip/>
<el-table-column label="备注" align="center" prop="remark" show-overflow-tooltip/>
<el-table-column label="是否开放" align="center" prop="isOpen" />
<el-table-column label="是否开放" align="center" prop="isOpen" >
<template slot-scope="scope">
<el-switch
disabled
v-model="scope.row.isOpen"
></el-switch>
</template>
</el-table-column>
<!-- <el-table-column label="人均价格" align="center" prop="mittelkurs" show-overflow-tooltip/>-->
<el-table-column label="微信管理员二维码" align="center" show-overflow-tooltip>
<el-table-column label="管理员二维码" align="center" show-overflow-tooltip>
<template slot-scope="scope">
<el-image
style="width: 100px; height: 100px"
@ -167,8 +200,8 @@
/>
<!-- 添加或修改球场管理对话框 -->
<el-dialog :title="title" :visible.sync="open" width="500px" append-to-body>
<el-form ref="form" :model="form" :rules="rules" label-width="80px">
<el-dialog :title="title" :visible.sync="open" width="55%" append-to-body>
<el-form ref="form" :model="form" :rules="rules" label-width="120px">
<el-form-item label="名称" prop="buildingName">
<el-input v-model="form.buildingName" placeholder="请输入名称" />
</el-form-item>
@ -190,29 +223,82 @@
<el-form-item label="区县编码" prop="countyCode">
<el-input v-model="form.countyCode" placeholder="请输入区县编码" />
</el-form-item>
<el-form-item label="在线地图" prop="onlineMap">
<el-amap
ref="map"
:vid="'amapDemo'"
:center="center"
:zoom="zoom"
:events="events"
:plugin="plugin"
class="amap-demo"
style="height: 500px;width: 800px"
>
<el-amap-marker v-for="(u,i) in markers" :position="u.position" :key="i">
</el-amap-marker>
</el-amap>
</el-form-item>
<el-form-item label="备注" prop="remark">
<el-input v-model="form.remark" type="textarea" placeholder="请输入内容" />
</el-form-item>
<el-form-item label="城市" prop="cityName">
<el-input v-model="form.cityName" placeholder="请输入城市" />
</el-form-item>
<el-form-item label="默认图片" prop="defaultPicture">
<el-input v-model="form.defaultPicture" type="textarea" placeholder="请输入内容" />
<el-form-item label="球场图片" prop="defaultPicture">
<el-upload
class="upload-demo"
ref="upload"
:action="uploadUrl"
multiple
:limit="5"
:on-exceed = "handleExceed"
:on-preview="handlePictureCardPreview"
:on-remove="handleRemove"
:before-remove="beforeRemove"
:file-list="fileList"
list-type="picture-card"
:auto-upload="false">
<el-button slot="trigger" size="small" type="primary">选取文件</el-button>
<el-button style="margin-left: 10px;margin-top: 105px" size="small" type="success" @click="submitUpload"></el-button>
<div slot="tip" class="el-upload__tip">只能上传jpg/png文件且不超过2M</div>
</el-upload>
</el-form-item>
<el-form-item label="支持在线" prop="isSupportlive">
<el-switch v-model="form.isSupportlive" ></el-switch>
</el-form-item>
<el-form-item label="是否支持在线" prop="isSupportlive">
<el-input v-model="form.isSupportlive" placeholder="请输入是否支持在线" />
<el-form-item label="状态" prop="status">
<el-select v-model="form.status">
<el-option
v-for="item in options"
:key="item.value"
:label="item.label"
:value="item.value">
</el-option>
</el-select>
</el-form-item>
<el-form-item label="拒绝原因" prop="rejectReason">
<el-input v-model="form.rejectReason" placeholder="请输入拒绝原因" />
</el-form-item>
<el-form-item label="是否开放" prop="isOpen">
<el-input v-model="form.isOpen" placeholder="请输入是否开放" />
<el-switch v-model="form.isOpen" ></el-switch>
</el-form-item>
<el-form-item label="人均价格" prop="mittelkurs">
<el-input v-model="form.mittelkurs" placeholder="请输入人均价格" />
</el-form-item>
<el-form-item label="微信管理员二维码路径" prop="chatGroupUrl">
<el-input v-model="form.chatGroupUrl" placeholder="请输入微信管理员二维码路径" />
<el-form-item label="管理员二维码" prop="chatGroupUrl">
<el-upload
class="avatar-uploader"
action="https://adu.shjmall.cn/liguanghui/file/uploadMore"
:show-file-list="false"
name="files"
:on-success="handleAvatarSuccess"
:before-upload="beforeAvatarUpload">
<img v-if="imageUrl" :src="imageUrl" class="avatar">
<i v-else class="el-icon-plus avatar-uploader-icon"></i>
</el-upload>
</el-form-item>
<el-form-item label="描述" prop="desc">
<el-input v-model="form.desc" type="textarea" placeholder="请输入内容" />
@ -223,16 +309,110 @@
<el-button @click="cancel"> </el-button>
</div>
</el-dialog>
<el-dialog title="图片预览" :visible.sync="imgPreviewDialogVisible">
<img width="100%" :src="dialogImageUrl" alt="">
</el-dialog>
</div>
</template>
<script>
import { listWxBuilding, getWxBuilding, delWxBuilding, addWxBuilding, updateWxBuilding } from "@/api/system/WxBuilding";
import { AMapManager } from "vue-amap";
import { listWxBuilding, getWxBuilding,batchUploadFiles, delWxBuilding, addWxBuilding, updateWxBuilding } from "@/api/system/WxBuilding";
let amapManager = new AMapManager();
export default {
amapManager,
name: "WxBuilding",
data() {
var me = this;
me.city = '全国';
return {
geoCoder: null,
//
AutoComplete: null,
center: [104.065861, 30.657401],
zoom: 12,
markers: [
{
position: [104.032651, 30.612437]
},
],
events: {
init(o){
console.log(o.getCenter());
// o
},
zoomchange: (e) => {
console.log(e);
},
zoomend: (e) => {
//zoom
console.log(this.$refs.map.$$getInstance().getZoom());
console.log(e);
},
click: e => {
this.markers[0].position = [e.lnglat.lng, e.lnglat.lat]
this.form.longitude = e.lnglat.lng;
this.form.latitude = e.lnglat.lat;
let lnglat = [this.form.longitude, this.form.latitude];
this.geoCoder.getAddress(lnglat, (status, result) => {
if (status === "complete" && result.regeocode) {
this.form.address = result.regeocode.formattedAddress;
}
});
}
},
//使
plugin: [
{
pName: 'Scale',
events: {
init(instance) {
console.log(instance)
}
}
},
{
pName: 'ToolBar',
events: {
init(instance) {
console.log(instance)
}
}
},
{
pName: "Geocoder",
events: {
init(instance){
me.geoCoder = new AMap.Geocoder({
city: "010", //
radius: 1000, //500
});
//
}
}
}
],
imageUrl:null,
uploadUrl : "https://adu.shjmall.cn/liguanghui/file/uploadMoreFiles",
fileList:[],
booleanOptions:[{
value: true,
label: '是'
},{
value: false,
label: '否'
}],
options: [{
value: 1,
label: '待审核'
}, {
value: 2,
label: '审核通过'
}, {
value: 3,
label: '审核拒绝'
}],
//
loading: true,
//
@ -276,7 +456,9 @@ export default {
form: {},
//
rules: {
}
},
imgPreviewDialogVisible:false,
dialogImageUrl:null,
};
},
created() {
@ -287,7 +469,15 @@ export default {
getList() {
this.loading = true;
listWxBuilding(this.queryParams).then(response => {
this.WxBuildingList = response.rows;
response.rows.forEach((item) => {
let obj = item;
obj.codeImgUrl = item.defaultPicture;
if (item.defaultPicture){
let arr = item.defaultPicture.split(",");
obj.codeImgUrl = arr[0];
}
this.WxBuildingList.push(obj);
});
this.total = response.total;
this.loading = false;
});
@ -352,17 +542,100 @@ export default {
/** 修改按钮操作 */
handleUpdate(row) {
this.reset();
const id = row.id || this.ids
const id = row.id || this.ids;
this.fileList = [];
getWxBuilding(id).then(response => {
this.form = response.data;
this.open = true;
this.imageUrl = this.form.chatGroupUrl;
var defaultPictureKeys = Object.keys(response.data.defaultPicture);
// alert(defaultPictureKeys.length == 0);//true
if(defaultPictureKeys.length > 0){
var array = response.data.defaultPicture.split(",");//
array.forEach((item) => {
let imgItem = {url: item} //
this.fileList.push(imgItem);
});
}
this.title = "修改球场管理";
});
},
//
handleExceed(files, fileList) {
this.$message.warning(
`当前限制选择 5 个文件,本次选择了 ${files.length} 个文件,共选择了 ${
files.length + fileList.length
} 个文件`);
},
//
beforeRemove(file, fileList) {
//
//return this.$confirm(` ${file.name}`);
},
//
handleRemove(file, fileList) {
//elementuifileList
//fileList
console.log(file, fileList);
this.fileList = fileList;
},
//
submitUpload() {
let {uploadFiles, action, data} = this.$refs.upload
let checkFileType = false
let checkFileSize = false
uploadFiles.forEach((item) => {
if(item.raw){
const isJPG = (item.raw.type === 'image/jpeg'||item.raw.type === 'image/png');
const isLt2M = item.raw.size / 1024 / 1024 < 2;
if (!isJPG) {
checkFileType = true;
}
if (!isLt2M) {
checkFileSize = true;
}
}
});
if(checkFileType){
this.$message.error('上传头像图片只能是 JPG/PNG 格式!');
return
}
if(checkFileSize){
this.$message.error('上传头像图片大小不能超过 2MB!');
return;
}
const formData = new FormData()
uploadFiles.map(file => {
formData.append("files",file.raw)
})
batchUploadFiles(formData,action).then(response => {
console.info(response)
response.data.forEach((item) => {
let imgItem = {url: "https://adu.shjmall.cn/liguanghui/image/"+item} //
this.fileList.push(imgItem);
});
this.$modal.msgSuccess("文件上传到服务器成功");
}).catch(err=>{
// this.$message.error(err.message);
console.log(err);
});
},
handlePictureCardPreview(file) {
this.dialogImageUrl = file.url;
this.imgPreviewDialogVisible = true;
},
/** 提交按钮 */
submitForm() {
this.$refs["form"].validate(valid => {
if (valid) {
let imgs = [];
//
this.fileList.forEach((item) => {
imgs.push(item.url);
});
this.form.defaultPicture = imgs.join(',')
if (this.form.id != null) {
updateWxBuilding(this.form).then(response => {
this.$modal.msgSuccess("修改成功");
@ -389,12 +662,55 @@ export default {
this.$modal.msgSuccess("删除成功");
}).catch(() => {});
},
handleAvatarSuccess(res, file) {
this.imageUrl = URL.createObjectURL(file.raw);
let imgUrl = res.data[0];
this.form.chatGroupUrl = "https://adu.shjmall.cn/liguanghui/image/"+imgUrl;
},
beforeAvatarUpload(file) {
console.info(file.type)
const isJPG = (file.type === 'image/jpeg'||file.type === 'image/png');
const isLt2M = file.size / 1024 / 1024 < 2;
if (!isJPG) {
this.$message.error('上传头像图片只能是 JPG/PNG 格式!');
}
if (!isLt2M) {
this.$message.error('上传头像图片大小不能超过 2MB!');
}
return isJPG && isLt2M;
},
/** 导出按钮操作 */
handleExport() {
this.download('system/WxBuilding/export', {
...this.queryParams
}, `WxBuilding_${new Date().getTime()}.xlsx`)
}
},
}
};
</script>
<style>
.avatar-uploader .el-upload {
border: 1px dashed #d9d9d9;
border-radius: 6px;
cursor: pointer;
position: relative;
overflow: hidden;
}
.avatar-uploader .el-upload:hover {
border-color: #409EFF;
}
.avatar-uploader-icon {
font-size: 28px;
color: #8c939d;
width: 178px;
height: 178px;
line-height: 178px;
text-align: center;
}
.avatar {
width: 178px;
height: 178px;
display: block;
}
</style>

@ -530,6 +530,7 @@ export default {
const id = row.id || this.ids
getCompetition(id).then(response => {
this.form = response.data;
this.imageUrl = this.form.competitionBackImg;
this.open = true;
this.title = "修改赛会信息";
});

Loading…
Cancel
Save