|
|
@@ -1,90 +1,112 @@
|
|
|
<template>
|
|
|
<div class="app-container">
|
|
|
- <el-form :model="queryParams" ref="queryForm" :inline="true" label-width="68px">
|
|
|
- <el-form-item label="图片标题" prop="imageTitle">
|
|
|
- <el-input
|
|
|
- v-model="queryParams.imageTitle"
|
|
|
- placeholder="请输入图片标题"
|
|
|
- clearable
|
|
|
- size="small"
|
|
|
- @keyup.enter.native="handleQuery"
|
|
|
- />
|
|
|
- </el-form-item>
|
|
|
- <el-form-item label="语言" prop="classification">
|
|
|
- <el-select v-model="queryParams.language" placeholder="请选择语言" clearable size="small">
|
|
|
- <el-option label="中文" value="中文" />
|
|
|
- <el-option label="English" value="English" />
|
|
|
- </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>
|
|
|
- </el-form-item>
|
|
|
- </el-form>
|
|
|
-
|
|
|
- <el-row :gutter="10" class="mb8">
|
|
|
- <el-col :span="1.5">
|
|
|
+ <el-row class="mb8">
|
|
|
+ <el-col :span="4">
|
|
|
<el-button
|
|
|
type="primary"
|
|
|
icon="el-icon-plus"
|
|
|
size="mini"
|
|
|
- @click="handleAdd"
|
|
|
- v-permission="['cloud:imageManagement:add']"
|
|
|
- >新增</el-button>
|
|
|
- </el-col>
|
|
|
- <el-col :span="1.5">
|
|
|
- <el-button
|
|
|
- type="success"
|
|
|
- icon="el-icon-edit"
|
|
|
- size="mini"
|
|
|
- :disabled="single"
|
|
|
- @click="handleUpdate"
|
|
|
- v-permission="['cloud:imageManagement:edit']"
|
|
|
- >修改</el-button>
|
|
|
+ @click="handleAddDictOpen"
|
|
|
+ >新增图片分类</el-button>
|
|
|
</el-col>
|
|
|
- <el-col :span="1.5">
|
|
|
+
|
|
|
+ <el-col style="text-align:right;" :span="20">
|
|
|
<el-button
|
|
|
- type="danger"
|
|
|
- icon="el-icon-delete"
|
|
|
- size="mini"
|
|
|
- :disabled="multiple"
|
|
|
- @click="handleDelete"
|
|
|
- v-permission="['cloud:imageManagement:remove']"
|
|
|
- >删除</el-button>
|
|
|
+ type="primary"
|
|
|
+ icon="el-icon-plus"
|
|
|
+ size="mini"
|
|
|
+ @click="handleAdd"
|
|
|
+ v-permission="['cloud:imageManagement:add']"
|
|
|
+ >新增图片</el-button>
|
|
|
</el-col>
|
|
|
</el-row>
|
|
|
-
|
|
|
- <el-table v-loading="loading" :data="imageManagementList" @selection-change="handleSelectionChange">
|
|
|
- <!-- <el-table-column type="selection" width="55" align="center" /> -->
|
|
|
- <!-- <el-table-column label="" align="center" prop="id" />role -->
|
|
|
- <el-table-column label="图片地址" align="center" prop="imageUrl" />
|
|
|
- <el-table-column label="图片标题" align="center" prop="imageTitle" />
|
|
|
- <el-table-column label="语言" align="center" prop="language" />
|
|
|
- <el-table-column label="创建时间" align="center" prop="gmtCreate" width="180">
|
|
|
- <template slot-scope="scope">
|
|
|
- <span>{{ parseTime(scope.row.gmtCreate) }}</span>
|
|
|
- </template>
|
|
|
- </el-table-column>
|
|
|
- <el-table-column label="操作" align="center" class-name="small-padding fixed-width">
|
|
|
- <template slot-scope="scope">
|
|
|
- <el-button
|
|
|
- size="mini"
|
|
|
- type="text"
|
|
|
- icon="el-icon-edit"
|
|
|
- @click="handleUpdate(scope.row)"
|
|
|
- v-permission="['cloud:imageManagement:edit']"
|
|
|
- >修改</el-button>
|
|
|
- <el-button
|
|
|
- size="mini"
|
|
|
- type="text"
|
|
|
- icon="el-icon-delete"
|
|
|
- @click="handleDelete(scope.row)"
|
|
|
- v-permission="['cloud:imageManagement:remove']"
|
|
|
- >删除</el-button>
|
|
|
- </template>
|
|
|
- </el-table-column>
|
|
|
- </el-table>
|
|
|
+ <el-row style="margin-top:20px;display: flex;overflow-x: auto;">
|
|
|
+ <el-col :span="4">
|
|
|
+ <el-tree :default-expanded-keys="[-1]" node-key="id" :data="data" :props="defaultProps" @node-click="handleNodeClick">
|
|
|
+ <span class="custom-tree-node" slot-scope="{ node, data }">
|
|
|
+ <span>{{ node.label }}</span>
|
|
|
+ <span v-if="node.label!='全部分类'&&node.label!='未分类'">
|
|
|
+ <el-button
|
|
|
+ type="text"
|
|
|
+ size="mini"
|
|
|
+ @click="() => append(data)">
|
|
|
+ 编辑
|
|
|
+ </el-button>
|
|
|
+ <el-button
|
|
|
+ type="text"
|
|
|
+ size="mini"
|
|
|
+ @click="() => remove(node, data)">
|
|
|
+ 删除
|
|
|
+ </el-button>
|
|
|
+ </span>
|
|
|
+ </span>
|
|
|
+ </el-tree>
|
|
|
+ </el-col>
|
|
|
+ <el-col :span="20">
|
|
|
+ <el-form :model="queryParams" ref="queryForm" :inline="true" label-width="68px">
|
|
|
+ <!-- <el-form-item label="图片标题" prop="imageTitle">
|
|
|
+ <el-input
|
|
|
+ v-model="queryParams.imageTitle"
|
|
|
+ placeholder="请输入图片标题"
|
|
|
+ clearable
|
|
|
+ size="small"
|
|
|
+ @keyup.enter.native="handleQuery"
|
|
|
+ />
|
|
|
+ </el-form-item> -->
|
|
|
+ <el-form-item label="语言" prop="language">
|
|
|
+ <el-select v-model="queryParams.language" placeholder="请选择语言" clearable size="small">
|
|
|
+ <el-option label="中文" value="中文" />
|
|
|
+ <el-option label="English" value="English" />
|
|
|
+ </el-select>
|
|
|
+ </el-form-item>
|
|
|
+ <el-form-item label="分类" prop="classify">
|
|
|
+ <el-select v-model="queryParams.classify" placeholder="请选择分类" clearable size="small">
|
|
|
+ <el-option :label="item.classifyName" :value="item.classifyName" v-for="(item,index) in typeList"/>
|
|
|
+ </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>
|
|
|
+ </el-form-item>
|
|
|
+ </el-form>
|
|
|
+ <el-table v-loading="loading" :data="imageManagementList" @selection-change="handleSelectionChange">
|
|
|
+ <!-- <el-table-column type="selection" width="55" align="center" /> -->
|
|
|
+ <!-- <el-table-column label="" align="center" prop="id" />role -->
|
|
|
+ <el-table-column label="图片地址" align="center" prop="imageUrl" />
|
|
|
+ <el-table-column label="图片" align="center" width="180">
|
|
|
+ <template slot-scope="scope">
|
|
|
+ <img :src="scope.row.imageUrl" alt="" style="width:100px;height:50px">
|
|
|
+ </template>
|
|
|
+ </el-table-column>
|
|
|
+ <el-table-column label="图片分类" align="center" prop="classify" />
|
|
|
+ <el-table-column label="语言" align="center" prop="language" />
|
|
|
+ <el-table-column label="创建时间" align="center" prop="gmtCreate" width="180">
|
|
|
+ <template slot-scope="scope">
|
|
|
+ <span>{{ parseTime(scope.row.gmtCreate) }}</span>
|
|
|
+ </template>
|
|
|
+ </el-table-column>
|
|
|
+ <el-table-column label="操作" align="center" class-name="small-padding fixed-width">
|
|
|
+ <template slot-scope="scope">
|
|
|
+ <el-button
|
|
|
+ size="mini"
|
|
|
+ type="text"
|
|
|
+ icon="el-icon-edit"
|
|
|
+ @click="handleUpdate(scope.row)"
|
|
|
+ v-permission="['cloud:imageManagement:edit']"
|
|
|
+ >修改</el-button>
|
|
|
+ <el-button
|
|
|
+ size="mini"
|
|
|
+ type="text"
|
|
|
+ icon="el-icon-delete"
|
|
|
+ @click="handleDelete(scope.row)"
|
|
|
+ v-permission="['cloud:imageManagement:remove']"
|
|
|
+ >删除</el-button>
|
|
|
+ </template>
|
|
|
+ </el-table-column>
|
|
|
+ </el-table>
|
|
|
+ </el-col>
|
|
|
|
|
|
+ </el-row>
|
|
|
<pagination
|
|
|
v-show="total>0"
|
|
|
:total="total"
|
|
|
@@ -92,10 +114,26 @@
|
|
|
:limit.sync="queryParams.limit"
|
|
|
@pagination="getList"
|
|
|
/>
|
|
|
+ <el-dialog :title="title1" :visible.sync="opendict" width="500px">
|
|
|
+ <el-form ref="form" label-width="80px">
|
|
|
+ <el-form-item label="分类名称">
|
|
|
+ <el-input v-model="dict.classifyName" placeholder="请输入分类名称" />
|
|
|
+ </el-form-item>
|
|
|
+ </el-form>
|
|
|
+ <div slot="footer" class="dialog-footer">
|
|
|
+ <el-button type="primary" @click="handleAddDict">确 定</el-button>
|
|
|
+ <el-button @click="opendict = false">取 消</el-button>
|
|
|
+ </div>
|
|
|
+ </el-dialog>
|
|
|
|
|
|
<!-- 添加或修改图片管理信息对话框 -->
|
|
|
<el-dialog :title="title" :visible.sync="open" width="500px">
|
|
|
<el-form ref="form" :model="form" :rules="rules" label-width="80px">
|
|
|
+ <el-form-item label="选择分类">
|
|
|
+ <el-select v-model="form.classify" placeholder="选择分类" clearable size="small">
|
|
|
+ <el-option :label="item.classifyName" :value="item.classifyName" v-for="(item,index) in typeList"/>
|
|
|
+ </el-select>
|
|
|
+ </el-form-item>
|
|
|
<el-form-item label="图片上传" prop="imageUrl">
|
|
|
<el-upload
|
|
|
ref="mYupload"
|
|
|
@@ -128,12 +166,30 @@
|
|
|
</template>
|
|
|
|
|
|
<script>
|
|
|
+import { listDict, addDict, editDict, delDict, } from "@/api/cloud/articleManagement";
|
|
|
import { listImageManagement, getImageManagement, delImageManagement, addImageManagement, updateImageManagement, exportImageManagement } from "@/api/cloud/imageManagement";
|
|
|
import { uploadPath } from '@/api/storage'
|
|
|
import { getToken } from '@/utils/auth'
|
|
|
export default {
|
|
|
data() {
|
|
|
return {
|
|
|
+ typeList:[],
|
|
|
+
|
|
|
+ dict:{
|
|
|
+ classifyType:'imgs_type',
|
|
|
+ language:'中文'
|
|
|
+ },
|
|
|
+ title1:'',
|
|
|
+ opendict:false,
|
|
|
+ data: [{
|
|
|
+ label: '全部分类',
|
|
|
+ id:-1,
|
|
|
+ children: [{label: '未分类',id:0},]
|
|
|
+ }],
|
|
|
+ defaultProps: {
|
|
|
+ children: 'children',
|
|
|
+ label: 'label'
|
|
|
+ },
|
|
|
uploadPath,
|
|
|
// 遮罩层
|
|
|
loading: true,
|
|
|
@@ -147,6 +203,7 @@ export default {
|
|
|
total: 0,
|
|
|
// 图片管理信息表格数据
|
|
|
imageManagementList: [],
|
|
|
+ title1:'新增分类',
|
|
|
// 弹出层标题
|
|
|
title: "",
|
|
|
// 是否显示弹出层
|
|
|
@@ -160,7 +217,8 @@ export default {
|
|
|
language: undefined,
|
|
|
gmtCreate: undefined,
|
|
|
gmtUpdate: undefined,
|
|
|
- deleteFlag: undefined
|
|
|
+ deleteFlag: undefined,
|
|
|
+ classify:undefined
|
|
|
},
|
|
|
// 表单参数
|
|
|
form: {language:'中文'},
|
|
|
@@ -186,6 +244,65 @@ export default {
|
|
|
}
|
|
|
},
|
|
|
methods: {
|
|
|
+ // 编辑分类
|
|
|
+ append(data) {
|
|
|
+ this.dict=data
|
|
|
+ this.title='编辑分类'
|
|
|
+ this.opendict=true
|
|
|
+
|
|
|
+ },
|
|
|
+ // 删除分类
|
|
|
+ remove(node, data) {
|
|
|
+ this.$confirm('是否确认删除产品管理分类"' + data.label + '"的数据项?', "警告", {
|
|
|
+ confirmButtonText: "确定",
|
|
|
+ cancelButtonText: "取消",
|
|
|
+ type: "warning"
|
|
|
+ }).then(() => {
|
|
|
+ delDict(data.id).then(response => {
|
|
|
+ if (response.data) {
|
|
|
+ this.msgSuccess("删除分类成功");
|
|
|
+ this.getList()
|
|
|
+ } else {
|
|
|
+ this.msgError(response.msg);
|
|
|
+ }
|
|
|
+ });
|
|
|
+ }).catch(function() {});
|
|
|
+
|
|
|
+ // const parent = node.parent;
|
|
|
+ // const children = parent.data.children || parent.data;
|
|
|
+ // const index = children.findIndex(d => d.id === data.id);
|
|
|
+ // children.splice(index, 1);
|
|
|
+ },
|
|
|
+ handleAddDictOpen() {
|
|
|
+ this.title='新增分类'
|
|
|
+ this.opendict=true
|
|
|
+ },
|
|
|
+ handleAddDict() {
|
|
|
+ if(this.title=='新增分类'){
|
|
|
+ addDict(this.dict).then(response => {
|
|
|
+ if (response.data) {
|
|
|
+ this.msgSuccess("新增分类成功");
|
|
|
+ this.dict={classifyType:'imgs_type',language:'中文'}
|
|
|
+ this.opendict=false
|
|
|
+ this.getList()
|
|
|
+ } else {
|
|
|
+ this.msgError(response.msg);
|
|
|
+ }
|
|
|
+ });
|
|
|
+ }else{
|
|
|
+ editDict(this.dict).then(response => {
|
|
|
+ if (response.data) {
|
|
|
+ this.msgSuccess("编辑分类成功");
|
|
|
+ this.dict={classifyType:'imgs_type',language:'中文'}
|
|
|
+ this.opendict=false
|
|
|
+ this.getList()
|
|
|
+ } else {
|
|
|
+ this.msgError(response.msg);
|
|
|
+ }
|
|
|
+ });
|
|
|
+ }
|
|
|
+
|
|
|
+ },
|
|
|
// 上传图片了处理图片
|
|
|
uploadSuccessHandle(e, file) {
|
|
|
const that = this
|
|
|
@@ -207,6 +324,17 @@ export default {
|
|
|
/** 查询图片管理信息列表 */
|
|
|
getList() {
|
|
|
this.loading = true;
|
|
|
+ listDict({classifyType:'imgs_type',}).then(response => {
|
|
|
+ this.typeList = response.data.data.items
|
|
|
+ var data=response.data.data.items
|
|
|
+ this.data[0].children=[{label: '未分类'},]
|
|
|
+ for (let i = 0; i < data.length; i++) {
|
|
|
+ data[i].label=data[i].classifyName
|
|
|
+ this.data[0].children.push(data[i])
|
|
|
+
|
|
|
+ }
|
|
|
+ console.log(this.data,111111)
|
|
|
+ });
|
|
|
listImageManagement(this.queryParams).then(response => {
|
|
|
this.imageManagementList = response.data.data.items
|
|
|
this.total = response.data.data.count
|
|
|
@@ -227,7 +355,8 @@ export default {
|
|
|
language: undefined,
|
|
|
gmtCreate: undefined,
|
|
|
gmtUpdate: undefined,
|
|
|
- deleteFlag: undefined
|
|
|
+ deleteFlag: undefined,
|
|
|
+ classify:undefined
|
|
|
};
|
|
|
this.resetForm("form");
|
|
|
},
|
