|
@@ -1,15 +1,6 @@
|
|
<template>
|
|
<template>
|
|
<div class="app-container">
|
|
<div class="app-container">
|
|
<el-form :model="queryParams" ref="queryForm" :inline="true" label-width="68px">
|
|
<el-form :model="queryParams" ref="queryForm" :inline="true" label-width="68px">
|
|
- <el-form-item label="图片地址" prop="imageUrl">
|
|
|
|
- <el-input
|
|
|
|
- v-model="queryParams.imageUrl"
|
|
|
|
- placeholder="请输入图片地址"
|
|
|
|
- clearable
|
|
|
|
- size="small"
|
|
|
|
- @keyup.enter.native="handleQuery"
|
|
|
|
- />
|
|
|
|
- </el-form-item>
|
|
|
|
<el-form-item label="图片标题" prop="imageTitle">
|
|
<el-form-item label="图片标题" prop="imageTitle">
|
|
<el-input
|
|
<el-input
|
|
v-model="queryParams.imageTitle"
|
|
v-model="queryParams.imageTitle"
|
|
@@ -19,40 +10,6 @@
|
|
@keyup.enter.native="handleQuery"
|
|
@keyup.enter.native="handleQuery"
|
|
/>
|
|
/>
|
|
</el-form-item>
|
|
</el-form-item>
|
|
- <el-form-item label="语言" prop="language">
|
|
|
|
- <el-input
|
|
|
|
- v-model="queryParams.language"
|
|
|
|
- placeholder="请输入语言"
|
|
|
|
- clearable
|
|
|
|
- size="small"
|
|
|
|
- @keyup.enter.native="handleQuery"
|
|
|
|
- />
|
|
|
|
- </el-form-item>
|
|
|
|
- <el-form-item label="" prop="gmtCreate">
|
|
|
|
- <el-date-picker clearable size="small" style="width: 200px"
|
|
|
|
- v-model="queryParams.gmtCreate"
|
|
|
|
- type="date"
|
|
|
|
- value-format="yyyy-MM-dd"
|
|
|
|
- placeholder="选择">
|
|
|
|
- </el-date-picker>
|
|
|
|
- </el-form-item>
|
|
|
|
- <el-form-item label="" prop="gmtUpdate">
|
|
|
|
- <el-date-picker clearable size="small" style="width: 200px"
|
|
|
|
- v-model="queryParams.gmtUpdate"
|
|
|
|
- type="date"
|
|
|
|
- value-format="yyyy-MM-dd"
|
|
|
|
- placeholder="选择">
|
|
|
|
- </el-date-picker>
|
|
|
|
- </el-form-item>
|
|
|
|
- <el-form-item label="删除标识" prop="deleteFlag">
|
|
|
|
- <el-input
|
|
|
|
- v-model="queryParams.deleteFlag"
|
|
|
|
- placeholder="请输入删除标识"
|
|
|
|
- clearable
|
|
|
|
- size="small"
|
|
|
|
- @keyup.enter.native="handleQuery"
|
|
|
|
- />
|
|
|
|
- </el-form-item>
|
|
|
|
<el-form-item>
|
|
<el-form-item>
|
|
<el-button type="primary" icon="el-icon-search" size="mini" @click="handleQuery">搜索</el-button>
|
|
<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>
|
|
<el-button icon="el-icon-refresh" size="mini" @click="resetQuery">重置</el-button>
|
|
@@ -89,15 +46,6 @@
|
|
v-permission="['cloud:imageManagement:remove']"
|
|
v-permission="['cloud:imageManagement:remove']"
|
|
>删除</el-button>
|
|
>删除</el-button>
|
|
</el-col>
|
|
</el-col>
|
|
- <el-col :span="1.5">
|
|
|
|
- <el-button
|
|
|
|
- type="warning"
|
|
|
|
- icon="el-icon-download"
|
|
|
|
- size="mini"
|
|
|
|
- @click="handleExport"
|
|
|
|
- v-permission="['cloud:imageManagement:export']"
|
|
|
|
- >导出</el-button>
|
|
|
|
- </el-col>
|
|
|
|
</el-row>
|
|
</el-row>
|
|
|
|
|
|
<el-table v-loading="loading" :data="imageManagementList" @selection-change="handleSelectionChange">
|
|
<el-table v-loading="loading" :data="imageManagementList" @selection-change="handleSelectionChange">
|
|
@@ -106,17 +54,11 @@
|
|
<el-table-column label="图片地址" align="center" prop="imageUrl" />
|
|
<el-table-column label="图片地址" align="center" prop="imageUrl" />
|
|
<el-table-column label="图片标题" align="center" prop="imageTitle" />
|
|
<el-table-column label="图片标题" align="center" prop="imageTitle" />
|
|
<el-table-column label="语言" align="center" prop="language" />
|
|
<el-table-column label="语言" align="center" prop="language" />
|
|
- <el-table-column label="" align="center" prop="gmtCreate" width="180">
|
|
|
|
|
|
+ <el-table-column label="创建时间" align="center" prop="gmtCreate" width="180">
|
|
<template slot-scope="scope">
|
|
<template slot-scope="scope">
|
|
<span>{{ parseTime(scope.row.gmtCreate) }}</span>
|
|
<span>{{ parseTime(scope.row.gmtCreate) }}</span>
|
|
</template>
|
|
</template>
|
|
</el-table-column>
|
|
</el-table-column>
|
|
- <el-table-column label="" align="center" prop="gmtUpdate" width="180">
|
|
|
|
- <template slot-scope="scope">
|
|
|
|
- <span>{{ parseTime(scope.row.gmtUpdate) }}</span>
|
|
|
|
- </template>
|
|
|
|
- </el-table-column>
|
|
|
|
- <el-table-column label="删除标识" align="center" prop="deleteFlag" />
|
|
|
|
<el-table-column label="操作" align="center" class-name="small-padding fixed-width">
|
|
<el-table-column label="操作" align="center" class-name="small-padding fixed-width">
|
|
<template slot-scope="scope">
|
|
<template slot-scope="scope">
|
|
<el-button
|
|
<el-button
|
|
@@ -148,33 +90,27 @@
|
|
<!-- 添加或修改图片管理信息对话框 -->
|
|
<!-- 添加或修改图片管理信息对话框 -->
|
|
<el-dialog :title="title" :visible.sync="open" width="500px">
|
|
<el-dialog :title="title" :visible.sync="open" width="500px">
|
|
<el-form ref="form" :model="form" :rules="rules" label-width="80px">
|
|
<el-form ref="form" :model="form" :rules="rules" label-width="80px">
|
|
- <el-form-item label="图片地址" prop="imageUrl">
|
|
|
|
- <el-input v-model="form.imageUrl" placeholder="请输入图片地址" />
|
|
|
|
|
|
+ <el-form-item label="图片上传" prop="imageUrl">
|
|
|
|
+ <el-upload
|
|
|
|
+ ref="mYupload"
|
|
|
|
+ class="avatar-uploader"
|
|
|
|
+ :headers="headers"
|
|
|
|
+ :action="uploadPath"
|
|
|
|
+ :show-file-list="false"
|
|
|
|
+ :on-success="uploadSuccessHandle"
|
|
|
|
+ :before-upload="onBeforeUpload">
|
|
|
|
+ <img v-if="form.imageUrl" :src="form.imageUrl" class="avatar">
|
|
|
|
+ <i v-else class="el-icon-plus avatar-uploader-icon"></i>
|
|
|
|
+ </el-upload>
|
|
</el-form-item>
|
|
</el-form-item>
|
|
<el-form-item label="图片标题" prop="imageTitle">
|
|
<el-form-item label="图片标题" prop="imageTitle">
|
|
<el-input v-model="form.imageTitle" placeholder="请输入图片标题" />
|
|
<el-input v-model="form.imageTitle" placeholder="请输入图片标题" />
|
|
</el-form-item>
|
|
</el-form-item>
|
|
<el-form-item label="语言" prop="language">
|
|
<el-form-item label="语言" prop="language">
|
|
- <el-input v-model="form.language" placeholder="请输入语言" />
|
|
|
|
- </el-form-item>
|
|
|
|
- <el-form-item label="" prop="gmtCreate">
|
|
|
|
- <el-date-picker clearable size="small" style="width: 200px"
|
|
|
|
- v-model="form.gmtCreate"
|
|
|
|
- type="date"
|
|
|
|
- value-format="yyyy-MM-dd"
|
|
|
|
- placeholder="选择">
|
|
|
|
- </el-date-picker>
|
|
|
|
- </el-form-item>
|
|
|
|
- <el-form-item label="" prop="gmtUpdate">
|
|
|
|
- <el-date-picker clearable size="small" style="width: 200px"
|
|
|
|
- v-model="form.gmtUpdate"
|
|
|
|
- type="date"
|
|
|
|
- value-format="yyyy-MM-dd"
|
|
|
|
- placeholder="选择">
|
|
|
|
- </el-date-picker>
|
|
|
|
- </el-form-item>
|
|
|
|
- <el-form-item label="删除标识" prop="deleteFlag">
|
|
|
|
- <el-input v-model="form.deleteFlag" placeholder="请输入删除标识" />
|
|
|
|
|
|
+ <el-radio-group v-model="form.language">
|
|
|
|
+ <el-radio-button label="中文"></el-radio-button>
|
|
|
|
+ <el-radio-button label="English"></el-radio-button>
|
|
|
|
+ </el-radio-group>
|
|
</el-form-item>
|
|
</el-form-item>
|
|
</el-form>
|
|
</el-form>
|
|
<div slot="footer" class="dialog-footer">
|
|
<div slot="footer" class="dialog-footer">
|
|
@@ -187,10 +123,12 @@
|
|
|
|
|
|
<script>
|
|
<script>
|
|
import { listImageManagement, getImageManagement, delImageManagement, addImageManagement, updateImageManagement, exportImageManagement } from "@/api/cloud/imageManagement";
|
|
import { listImageManagement, getImageManagement, delImageManagement, addImageManagement, updateImageManagement, exportImageManagement } from "@/api/cloud/imageManagement";
|
|
-
|
|
|
|
|
|
+import { uploadPath } from '@/api/storage'
|
|
|
|
+import { getToken } from '@/utils/auth'
|
|
export default {
|
|
export default {
|
|
data() {
|
|
data() {
|
|
return {
|
|
return {
|
|
|
|
+ uploadPath,
|
|
// 遮罩层
|
|
// 遮罩层
|
|
loading: true,
|
|
loading: true,
|
|
// 选中数组
|
|
// 选中数组
|
|
@@ -219,7 +157,7 @@ export default {
|
|
deleteFlag: undefined
|
|
deleteFlag: undefined
|
|
},
|
|
},
|
|
// 表单参数
|
|
// 表单参数
|
|
- form: {},
|
|
|
|
|
|
+ form: {language:'中文'},
|
|
// 表单校验
|
|
// 表单校验
|
|
rules: {
|
|
rules: {
|
|
gmtCreate: [
|
|
gmtCreate: [
|
|
@@ -234,7 +172,32 @@ export default {
|
|
created() {
|
|
created() {
|
|
this.getList();
|
|
this.getList();
|
|
},
|
|
},
|
|
|
|
+ computed: {
|
|
|
|
+ headers() {
|
|
|
|
+ return {
|
|
|
|
+ accessToken: getToken()
|
|
|
|
+ }
|
|
|
|
+ }
|
|
|
|
+ },
|
|
methods: {
|
|
methods: {
|
|
|
|
+ // 上传图片了处理图片
|
|
|
|
+ uploadSuccessHandle(e, file) {
|
|
|
|
+ const that = this
|
|
|
|
+ this.form.imageUrl = e.url
|
|
|
|
+ this.$forceUpdate()
|
|
|
|
+ },
|
|
|
|
+ onBeforeUpload(file) {
|
|
|
|
+ const isIMAGE = file.type === 'image/jpeg' || 'image/gif' || 'image/png' || 'image/jpg'
|
|
|
|
+ const isLt1M = file.size / 1024 / 1024 < 1
|
|
|
|
+
|
|
|
|
+ if (!isIMAGE) {
|
|
|
|
+ this.$message.error('上传文件只能是图片格式!')
|
|
|
|
+ }
|
|
|
|
+ if (!isLt1M) {
|
|
|
|
+ this.$message.error('上传文件大小不能超过 1MB!')
|
|
|
|
+ }
|
|
|
|
+ return isIMAGE && isLt1M
|
|
|
|
+ },
|
|
/** 查询图片管理信息列表 */
|
|
/** 查询图片管理信息列表 */
|
|
getList() {
|
|
getList() {
|
|
this.loading = true;
|
|
this.loading = true;
|
|
@@ -302,6 +265,8 @@ export default {
|
|
updateImageManagement(this.form).then(response => {
|
|
updateImageManagement(this.form).then(response => {
|
|
if (response.data) {
|
|
if (response.data) {
|
|
this.msgSuccess("修改成功");
|
|
this.msgSuccess("修改成功");
|
|
|
|
+ this.form={language:'中文'}
|
|
|
|
+ this.$refs['mYupload'].clearFiles()
|
|
this.open = false;
|
|
this.open = false;
|
|
this.getList();
|
|
this.getList();
|
|
} else {
|
|
} else {
|
|
@@ -312,6 +277,8 @@ export default {
|
|
addImageManagement(this.form).then(response => {
|
|
addImageManagement(this.form).then(response => {
|
|
if (response.data) {
|
|
if (response.data) {
|
|
this.msgSuccess("新增成功");
|
|
this.msgSuccess("新增成功");
|
|
|
|
+ this.form={language:'中文'}
|
|
|
|
+ this.$refs['mYupload'].clearFiles()
|
|
this.open = false;
|
|
this.open = false;
|
|
this.getList();
|
|
this.getList();
|
|
} else {
|
|
} else {
|
|
@@ -351,4 +318,32 @@ export default {
|
|
}
|
|
}
|
|
}
|
|
}
|
|
};
|
|
};
|
|
-</script>
|
|
|
|
|
|
+</script>
|
|
|
|
+<style lang="scss" scoped>
|
|
|
|
+.avatar-uploader{
|
|
|
|
+ /deep/.el-upload {
|
|
|
|
+ border: 1px dashed #ccc;
|
|
|
|
+ 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>
|