feat: 图库相关修改

dev-theme
wx-jincw 3 weeks ago
parent 681fb3fdb0
commit d771d97d33

Binary file not shown.

Before

Width:  |  Height:  |  Size: 5.5 KiB

After

Width:  |  Height:  |  Size: 69 KiB

Binary file not shown.

Before

Width:  |  Height:  |  Size: 509 KiB

After

Width:  |  Height:  |  Size: 3.4 MiB

Binary file not shown.

Before

Width:  |  Height:  |  Size: 48 KiB

After

Width:  |  Height:  |  Size: 69 KiB

@ -1,6 +1,6 @@
<template>
<div>
<svg-icon icon-class="question" @click="goto" />
<!-- <svg-icon icon-class="question" @click="goto" /> -->
</div>
</template>

@ -0,0 +1,18 @@
<template>
<GalleryList isPerson></GalleryList>
</template>
<script>
import GalleryList from '@/views/gallery/list/index.vue';
export default {
name: 'List',
components: {
GalleryList
}
}
</script>
<style>
</style>

@ -0,0 +1,18 @@
<template>
<GalleryList isPerson></GalleryList>
</template>
<script>
import GalleryList from '@/views/gallery/query/index.vue';
export default {
name: 'Query',
components: {
GalleryList
}
}
</script>
<style>
</style>

@ -0,0 +1,203 @@
<template>
<div class="app-container" v-loading="tableLoading">
<div>
<div :span="24">
<el-form ref="seachForm" :inline="true" class="demo-form-inline">
<el-form-item label="空间名称">
<el-input
v-model="query.taskTitle"
placeholder="请输入"
maxlength="32"
clearable
/>
</el-form-item>
<el-form-item>
<el-button
type="primary"
icon="el-icon-search"
@click="queryTable"
>
查询
</el-button>
<el-button
type="reset"
icon="el-icon-refresh"
@click="resetQueryTable"
>
重置
</el-button>
</el-form-item>
</el-form>
</div>
</div>
<!-- 表格主体 -->
<!-- <el-table
ref="multipleTable"
tooltip-effect="dark"
:data="tableData"
class="w100p"
@selection-change="handleSelectionChange"
border
@sort-change="sortChange"
:default-sort="tableSort"
header-cell-class-name="duojibiaotou"
>
<el-table-column type="selection" width="50" fixed />
<el-table-column
align="center"
label="标签名称"
show-overflow-tooltip
min-width="160"
prop="taskTitle"
/>
<el-table-column label="备注" align="center" prop="taskType" sortable='custom' min-width="100">
</el-table-column>
<el-table-column width="120px" align="center" label="操作" fixed="right">
<template slot-scope="scope">
<el-button
size="mini"
type="text"
icon="el-icon-edit"
@click="toEdit(scope.row)"
>修改</el-button>
<el-button
size="mini"
type="text"
icon="el-icon-delete"
@click="toDelete(scope.row)"
>删除</el-button>
</template>
</el-table-column>
</el-table> -->
<el-row :gutter="10" class="mb8">
<el-col :span="1.5">
<el-button
type="primary"
plain
icon="el-icon-plus"
size="mini"
@click="toEdit"
>新增
</el-button>
</el-col>
</el-row>
<el-card>
<el-row :gutter="20">
<el-col :span="8" :lg="6" v-for="i in 3" :key="i"><el-card>
<div class="space" @click="goList">
<el-progress type="circle" :percentage="10 * i" status="primary" :show-text="false"></el-progress>
<div class="space-content">
<div>{{ '备份空间' + i }}</div>
<div class="space-use">{{ '使用' + i * 10 + '%' }}</div>
<el-link class="space-tool" type="primary" @click.stop="toEdit">修改</el-link>
</div>
</div>
</el-card></el-col>
</el-row>
</el-card>
<!-- 表格页脚 -->
<pagination
v-show="total > 0"
:total="total"
:page.sync="page.pageNum"
:limit.sync="page.pageSize"
@pagination="getTableList"
/>
<el-dialog title="备份空间修改" :visible.sync="openLoad" width="600px" append-to-body>
<el-form ref="form" :model="form" :rules="rules" label-width="80px">
<el-row :gutter="20">
<el-col :span="12">
<el-form-item label="空间名称" prop="name">
<el-input v-model="form.name" placeholder="请输入空间名称" />
</el-form-item>
</el-col>
<el-col :span="12">
<el-form-item label="分配大小" prop="size">
<el-input v-model="form.size" placeholder="请输入分配大小" />
</el-form-item>
</el-col>
</el-row>
</el-form>
<div slot="footer" class="dialog-footer">
<el-button type="primary" @click="submitForm"> </el-button>
<el-button @click="cancel"> </el-button>
</div>
</el-dialog>
</div>
</template>
<script>
import TableMixin from "@/mixins/table-mixin";
export default {
name: "Label",
components: {
},
mixins: [TableMixin],
pageInfo: {
title: "",
//exportUrl: "/task/info/export",
pageListApi: null,
// deleteApi: delOther,
defaultQuery: {
},
},
data() {
return {
openLoad: false,
form: {},
rules: {}
};
},
methods: {
goList() {
this.$router.push({ path: "/gallery/list" });
},
toEdit() {
this.openLoad = true;
},
submitForm() {
this.openLoad = false;
},
cancel() {
this.openLoad = false;
}
},
};
</script>
<style scoped>
.space {
/* height: 100px; */
display: flex;
justify-content: center;
align-items: center;
padding: 10px;
position: relative;
}
.space-content {
position: absolute;
top: 0;
bottom: 0;
left: 0;
right: 0;
display: flex;
flex-direction: column;
justify-content: center;
align-items: center;
}
.space-use {
font-size: 14px;
color: #666666;
}
.space-tool {
position: absolute;
right: 0px;
bottom: 0px;
}
</style>

@ -0,0 +1,109 @@
<template>
<div v-loading="tableLoading">
<div>
<div :span="24">
<el-form ref="seachForm" :inline="true" class="demo-form-inline">
<el-form-item label="标签名称">
<el-input
v-model="query.taskTitle"
placeholder="请输入"
maxlength="32"
clearable
/>
</el-form-item>
<el-form-item>
<el-button
type="primary"
icon="el-icon-search"
@click="queryTable"
>
查询
</el-button>
<el-button
type="reset"
icon="el-icon-refresh"
@click="resetQueryTable"
>
重置
</el-button>
</el-form-item>
</el-form>
</div>
</div>
<!-- 表格主体 -->
<el-table
ref="multipleTable"
tooltip-effect="dark"
:data="tableData"
class="w100p"
@selection-change="handleSelectionChange"
border
@sort-change="sortChange"
:default-sort="tableSort"
header-cell-class-name="duojibiaotou"
>
<el-table-column type="selection" width="50" fixed /> <!-- 添加选择列 -->
<el-table-column
align="center"
label="标签名称"
show-overflow-tooltip
min-width="160"
prop="taskTitle"
/>
<el-table-column label="备注" align="center" prop="taskType" sortable='custom' min-width="100">
</el-table-column>
<el-table-column width="120px" align="center" label="操作" fixed="right">
<template slot-scope="scope">
<el-button
size="mini"
type="text"
icon="el-icon-edit"
@click="toEdit(scope.row)"
>修改</el-button>
<el-button
size="mini"
type="text"
icon="el-icon-delete"
@click="toDelete(scope.row)"
>删除</el-button>
</template>
</el-table-column>
</el-table>
<!-- 表格页脚 -->
<pagination
v-show="total > 0"
:total="total"
:page.sync="page.pageNum"
:limit.sync="page.pageSize"
@pagination="getTableList"
/>
</div>
</template>
<script>
import TableMixin from "@/mixins/table-mixin";
export default {
name: "Label",
components: {
},
mixins: [TableMixin],
pageInfo: {
title: "",
//exportUrl: "/task/info/export",
pageListApi: null,
// deleteApi: delOther,
defaultQuery: {
},
},
data() {
return {
};
},
methods: {
},
};
</script>

@ -6,7 +6,7 @@
<div class="info-title">{{ item.imageTitle }}</div>
<div class="info-date">{{ item.uploadTime }}</div>
<div class="info-tag">
<el-tag size="small" >公开</el-tag>
<el-tag size="small" >{{item.isOpen == 1 ? '公开':'私有'}}</el-tag>
<el-tag size="small" v-if="item.keyWords" style="margin-left: 3px;">{{ item.keyWords }}</el-tag>
</div>
</div>
@ -20,7 +20,7 @@ export default {
item: {
type: Object,
default: () => ({})
}
},
},
computed: {
imageUrl() {

@ -131,6 +131,12 @@ export default {
exportUrl: '',
pageListApi: pageListImages,
},
props: {
isPerson: {
type: Boolean,
default: false
}
},
data() {
return {
cates: [],
@ -143,7 +149,7 @@ export default {
imageTitle: null,
photoTime: null,// ,
uploadTime: formatDateStr(),
isOpen: 1,
isOpen: this.isPerson ? 0:1,
keyWords: '日常',
cataId: null,
},
@ -180,9 +186,24 @@ export default {
listCata().then(res => {
const list = res.data || [];
this.cates = list;
})
});
},
methods: {
MXCreated() {
this.query.isOpen = this.isPerson ? '0':'';
},
resetQueryTable() {
this.$refs.multipleTable?.clearSort();
this.tableSort = {};
this.page = {
...this.MXDefaultPage()
};
this.query = { ...this.MXPageInfo().defaultQuery };
this.query.isOpen = this.isPerson ? '0':'';
this.getTableList();
},
imageEditChange() {
this.getTableList();
},
@ -205,7 +226,7 @@ export default {
imageTitle: null,
photoTime: null,// ,
uploadTime: formatDateStr(),
isOpen: 1,
isOpen: this.isPerson ? 0:1,
keyWords: '日常',
cataId: null,
};

@ -0,0 +1,346 @@
<template>
<div class="app-container" >
<div class="left-content">
<div style="margin-bottom: 20px;">图片目录</div>
<el-tree :data="cates" :props="defaultProps" @node-click="handleNodeClick"></el-tree>
</div>
<div class="right-content" v-loading="tableLoading">
<el-form :model="query" ref="queryForm" size="small" :inline="true" v-show="showSearch" label-width="68px">
<el-form-item label="图片标题" prop="imageTitle">
<el-input
v-model="query.imageTitle"
placeholder="请输入图片标题"
clearable
@keyup.enter.native="handleQuery"
/>
</el-form-item>
<el-form-item label="拍摄时间" prop="photoTime">
<el-date-picker
v-model="form.photoTime"
value-format="yyyy-MM-dd"
type="date"
placeholder="选择日期"
></el-date-picker>
</el-form-item>
<el-form-item label="上传人员" prop="userId">
<el-input
v-model="query.userId"
placeholder="请输入上传人员"
clearable
@keyup.enter.native="handleQuery"
/>
</el-form-item>
<el-form-item label="标签" prop="label">
<el-input
v-model="query.label"
placeholder="请输入标签"
clearable
@keyup.enter.native="handleQuery"
/>
</el-form-item>
<el-form-item>
<el-button type="primary" icon="el-icon-search" size="mini" @click="queryTable"></el-button>
<el-button icon="el-icon-refresh" size="mini" @click="resetQueryTable"></el-button>
<el-button
type="reset"
icon="el-icon-download"
@click="handleExport"
>导出
</el-button>
</el-form-item>
</el-form>
<el-row :gutter="10" class="mb8">
<el-col :span="1.5">
<el-switch
v-model="switchType"
active-text="方格模式"
inactive-text="列表模式">
</el-switch>
</el-col>
<!-- <el-col :span="1.5">
<el-button
type="warning"
plain
icon="el-icon-upload"
size="mini"
@click="handleUpload"
>上传</el-button>
</el-col> -->
<right-toolbar :showSearch.sync="showSearch" @queryTable="getTableList"></right-toolbar>
</el-row>
<div class="image-list" v-if="switchType">
<ImageItem v-for="(item, index) in tableData" :key="index" :item="item" class="image-item" @goDetail="showImageViewer($event, index)"></ImageItem>
</div>
<el-table
v-else
ref="multipleTable"
tooltip-effect="dark"
:data="tableData"
class="w100p"
border
header-cell-class-name="duojibiaotou"
>
<el-table-column
align="center"
label="图片"
show-overflow-tooltip
min-width="160"
prop="taskTitle"
>
<template slot-scope="scope">
<img style="width: 160px;height: 100px;" :src="getImageUrl(scope.row)" />
<div class="image-name">{{ imageName(scope.row) }}</div>
</template>
</el-table-column>
<el-table-column label="图片标题" align="center" prop="imageTitle" min-width="100">
</el-table-column>
<el-table-column label="拍摄时间" align="center" prop="uploadTime" min-width="100">
</el-table-column>
</el-table>
<!-- 表格页脚 -->
<pagination
v-show="total > 0"
:total="total"
:page.sync="page.pageNum"
:limit.sync="page.pageSize"
@pagination="getTableList"
/>
</div>
<MyImageViewer ref="previewImage" :z-index="2000"
:files="images" @change="imageEditChange"></MyImageViewer>
</div>
</template>
<script>
import ImageItem from '../list/components/ImageItem.vue';
import tableMixin from '../../../mixins/table-mixin';
import { listCata } from "@/api/gallery/cata";
import { pageListImages } from "@/api/gallery/images";
import { getToken } from "@/utils/auth";
import { formatDateStr } from "@/utils";
export default {
name: 'List',
components: {
ImageItem
},
mixins: [tableMixin],
pageInfo: {
title: '图片列表',
exportUrl: '',
pageListApi: pageListImages,
},
props: {
isPerson: {
type: Boolean,
default: false
}
},
data() {
return {
cates: [],
defaultProps: {
children: 'children',
label: 'cataName'
},
openLoad: false,
form: {
imageTitle: null,
photoTime: null,// ,
uploadTime: formatDateStr(),
isOpen: this.isPerson ? 0:1,
keyWords: '日常',
cataId: null,
},
rules: {
imageTitle: [{ required: true, message: '请输入图片标题', trigger: 'blur' }],
photoTime: [{ required: true, message: '请输入图片拍摄时间', trigger: 'change' }],
cataId: [{ required: true, message: '请选择图片目录', trigger: 'change' }]
},
imageUrl: '',
uploadFileUrl: process.env.VUE_APP_BASE_API + "/gallery/images/upload", //
headers: {
Authorization: "Bearer " + getToken(),
},
uploading: false,
switchType: false,
};
},
computed: {
uploadData() {
const params = {};
Object.keys(this.form).forEach(key => {
if (this.form[key] !== null) {
params[key] = this.form[key];
}
});
return params;
},
images() {
return this.tableData.map(item => {
return item.file?.[0] || {};
});
}
},
created() {
listCata().then(res => {
const list = res.data || [];
this.cates = list;
})
},
methods: {
MXCreated() {
this.query.isOpen = this.isPerson ? '0':'';
},
resetQueryTable() {
this.$refs.multipleTable?.clearSort();
this.tableSort = {};
this.page = {
...this.MXDefaultPage()
};
this.query = { ...this.MXPageInfo().defaultQuery };
this.query.isOpen = this.isPerson ? '0':'';
this.getTableList();
},
imageName(item) {
if (item.file?.length > 0) {
return item.file[0].oldName || item.imageName;
}
return item.imageName;
},
getImageUrl(item) {
let url = item.imagePath;
if (item.file?.length > 0) {
url = item.file[0].attachFileUrl || item.imagePath;
}
if (url.indexOf("http") === 0) {
return url;
}
return process.env.VUE_APP_BASE_API + url;
},
imageEditChange() {
this.getTableList();
},
showImageViewer(event, index) {
console.log('showImageViewer');
this.$refs.previewImage.open(index);
},
handleNodeClick(data) {
console.log(data);
if (this.query.cataId === data.id) {
this.query.cataId = null;
} else {
this.query.cataId = data.id;
}
this.getTableList();
},
handleUpload() {
this.form = {
imageTitle: null,
photoTime: null,// ,
uploadTime: formatDateStr(),
isOpen: this.isPerson ? 0:1,
keyWords: '日常',
cataId: null,
};
this.imageUrl = '';
this.openLoad = true;
},
cancel() {
this.openLoad = false;
this.uploading = false;
},
submitForm() {
if (!this.imageUrl) {
this.$message.error('请选择图片');
return;
}
this.$refs['form'].validate((valid) => {
if (valid) {
this.uploading = true;
this.$refs.upload.submit();
}
});
},
handleFileChange(file) {
this.imageUrl = URL.createObjectURL(file.raw);
},
handleFileSuccess(res, file) {
this.$message.success('上传成功');
this.openLoad = false;
this.uploading = false;
this.getTableList();
},
handleFileError() {
this.$message.error('上传失败');
this.uploading = false;
},
beforeAvatarUpload(file) {
const isImg = file.type.indexOf('image/') !== -1;
if (!isImg) {
this.$message.error('只能上传图片!');
}
return isImg;
}
}
}
</script>
<style lang="scss" scoped>
.app-container {
display: flex;
}
.left-content {
width: 300px;
padding: 15px;
border: #EEEEEE 1px solid;
border-radius: 8px;
}
.right-content {
width: 0;
flex: 1;
margin-left: 10px;
}
.image-list {
display: flex;
flex-wrap: wrap;
.image-item {
width: 300px;
margin: 0 15px 15px 0;
}
}
.avatar-uploader ::v-deep .el-upload {
border: 1px dashed #d9d9d9;
border-radius: 6px;
cursor: pointer;
position: relative;
overflow: hidden;
}
.avatar-uploader ::v-deep .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>

@ -0,0 +1,94 @@
<template>
<div :class="className" :style="{height:height,width:width}" />
</template>
<script>
import * as echarts from 'echarts';
require('echarts/theme/macarons') // echarts theme
import resize from '../../dashboard/mixins/resize'
const animationDuration = 1000
export default {
mixins: [resize],
props: {
className: {
type: String,
default: 'chart'
},
width: {
type: String,
default: '100%'
},
height: {
type: String,
default: '300px'
}
},
data() {
return {
chart: null
}
},
mounted() {
this.$nextTick(() => {
this.initChart()
})
},
beforeDestroy() {
if (!this.chart) {
return
}
this.chart.dispose()
this.chart = null
},
methods: {
initChart() {
this.chart = echarts.init(this.$el, 'macarons')
this.chart.setOption({
title: {
text: '',
x: 0,
padding: 0,
subtext: '单位MB',
},
tooltip: {
trigger: 'axis',
axisPointer: { //
type: 'shadow' // 线'line' | 'shadow'
}
},
grid: {
top: 50,
left: '2%',
right: '2%',
bottom: '3%',
containLabel: true
},
xAxis: [{
type: 'category',
data: ['营销', '工作', '培训', '活动', '任务', ],
axisTick: {
alignWithLabel: true
}
}],
yAxis: [{
type: 'value',
axisTick: {
show: false
}
}],
series: [{
name: '空间使用量',
type: 'bar',
stack: 'vistors',
barWidth: '60%',
data: [79, 52, 200, 330, 220].sort(() => Math.random() - 0.5),
animationDuration
}, ]
})
}
}
}
</script>

@ -0,0 +1,93 @@
<template>
<div class="app-container">
<div>
<div :span="24">
<el-form ref="seachForm" :inline="true" class="demo-form-inline">
<el-form-item label="目录名称">
<el-input
v-model="query.folderName"
placeholder="请输入"
maxlength="32"
clearable
/>
</el-form-item>
<el-form-item>
<el-button
type="primary"
icon="el-icon-search"
@click="queryTable"
>
查询
</el-button>
<el-button
type="reset"
icon="el-icon-refresh"
@click="resetQueryTable"
>
重置
</el-button>
</el-form-item>
</el-form>
</div>
</div>
<el-card>
<div v-if="cates.length === 0" class="foldname"></div>
<el-card v-for="i in cates" :key="i.id" style="margin-top: 10px;">
<div class="foldname">{{ i.cataName }}</div>
<BarChart />
</el-card>
</el-card>
</div>
</template>
<script>
import TableMixin from "@/mixins/table-mixin";
import { listCata } from "@/api/gallery/cata";
import BarChart from "./BarChart.vue";
export default {
name: "Label",
components: {
BarChart
},
mixins: [TableMixin],
pageInfo: {
title: "",
//exportUrl: "/task/info/export",
pageListApi: null,
// deleteApi: delOther,
defaultQuery: {
},
},
data() {
return {
cates: [],
};
},
created() {
// listCata().then(res => {
// const list = res.data || [];
// this.cates = list;
// })
},
methods: {
getTableList() {
listCata().then(res => {
const list = res.data || [];
this.cates = list;
})
}
},
};
</script>
<style scoped>
.foldname {
text-align: center;
font-weight: 500;
color: #409EFF;
}
</style>

@ -56,7 +56,7 @@
</el-form>
<!-- 底部 -->
<div class="el-login-footer">
<span>Copyright © 2018-2023 bs.vip All Rights Reserved.</span>
<span>Copyright © 2024-2025 中国烟草 All Rights Reserved.</span>
</div>
</div>
</template>

@ -61,7 +61,7 @@
</el-form>
<!-- 底部 -->
<div class="el-register-footer">
<span>Copyright © 2018-2023 bs.vip All Rights Reserved.</span>
<span>Copyright © 2024-2025 中国烟草 All Rights Reserved.</span>
</div>
</div>
</template>

@ -1,14 +1,14 @@
<template>
<div>
<GalleryList></GalleryList>
<mylabel></mylabel>
</div>
</template>
<script>
import GalleryList from '@/views/gallery/list/index.vue';
import mylabel from '@/views/gallery/backup/index.vue'
export default {
components: {
GalleryList
mylabel
}
}
</script>

Loading…
Cancel
Save