guolong
/
wj_nft_backend_page
0
0
Fork 0
Code Issues Pull Requests Activity
Browse Source

PC公司关于我们

dev
caoyizhong 3 years ago
parent
7ba7d6f0f0
commit
2718e47db2
2 changed files with 330 additions and 92 deletions
Whitespace
Show all changes Ignore whitespace when comparing lines Ignore changes in amount of whitespace Ignore changes in whitespace at EOL
Split View
Diff Options
Show Stats Download Patch File Download Diff File
  1. 50
      src/views/wjnft/brand/index.vue
  2. 372
      src/views/wjnft/us/index.vue

50
src/views/wjnft/brand/index.vue
Unescape View File

@ -446,7 +446,6 @@ export default {
this.$refs["form"].validate(valid => {
if (valid) {
if (this.form.id != null) {
console.log(this.pictureUrl);
let url = "";
if(this.pictureUrl.length > 0){
this.imgList.forEach(item =>{
@ -455,16 +454,36 @@ export default {
}else{
url = url + item.url+',';
}
})
});
if(this.pictureUrl.length > 1 ){
url = url + this.pictureUrl.join(",")
}else{
url = url + this.pictureUrl[0];
}
url = url + this.pictureUrl[0];
this.form.picture = url;
}else {
this.imgList.forEach(item =>{
if(url === ""){
if(this.imgList.length > 0){
url = item.url+',';
}else{
url = item.url;
}
}else{
let c = this.imgList[this.imgList.length-1];
//console.log(c);
if(c.url === item.url){
//console.log(c.url === item.url)
url = url + item.url;
}else{
url = url + item.url+',';
}
}
});
this.form.picture = url;
}
console.log(this.imgList);
console.log(this.form)
console.log(this.form);
updateBrand(this.form).then(response => {
this.$modal.msgSuccess("修改成功");
this.open = false;
@ -531,12 +550,21 @@ export default {
this.pictureUrl.push( res.url);
return this.imgList;
},
//删除图片
handleRemove(file) {
console.log(file);
//this.$refs.upload.clearFiles()
const findex = this.imgList.map(f => f.url).indexOf(file.url);
if(findex > -1) {
this.imgList.splice(findex, 1);
if(file.name !== undefined){
console.log(this.$refs.upload.uploadFiles);
// this.$refs.upload.clearFiles()
let n = this.$refs.upload.uploadFiles;
const finde = n.map(f => f.name).indexOf(file.name);
if(finde > -1) {
n.splice(finde, 1);
}
}else{
const findex = this.imgList.map(f => f.url).indexOf(file.url);
if(findex > -1) {
this.imgList.splice(findex, 1);
}
}
},

372
src/views/wjnft/us/index.vue
Unescape View File

@ -10,39 +10,7 @@
@keyup.enter.native="handleQuery"
/>
</el-form-item>
<el-form-item label="简介" prop="introduce">
<el-input
v-model="queryParams.introduce"
placeholder="请输入简介"
clearable
size="small"
@keyup.enter.native="handleQuery"
/>
</el-form-item>
<el-form-item label="创建时间" prop="createdTime">
<el-date-picker clearable size="small"
v-model="queryParams.createdTime"
type="date"
value-format="yyyy-MM-dd"
placeholder="选择创建时间">
</el-date-picker>
</el-form-item>
<el-form-item label="修改时间" prop="updatedTime">
<el-date-picker clearable size="small"
v-model="queryParams.updatedTime"
type="date"
value-format="yyyy-MM-dd"
placeholder="选择修改时间">
</el-date-picker>
</el-form-item>
<el-form-item label="删除时间" prop="deletedTime">
<el-date-picker clearable size="small"
v-model="queryParams.deletedTime"
type="date"
value-format="yyyy-MM-dd"
placeholder="选择删除时间">
</el-date-picker>
</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>
@ -82,25 +50,51 @@
v-hasPermi="['wjnft:us:remove']"
>删除</el-button>
</el-col>
<el-col :span="1.5">
<el-button
type="warning"
plain
icon="el-icon-download"
size="mini"
@click="handleExport"
v-hasPermi="['wjnft:us:export']"
>导出</el-button>
</el-col>
<!-- <el-col :span="1.5">-->
<!-- <el-button-->
<!-- type="warning"-->
<!-- plain-->
<!-- icon="el-icon-download"-->
<!-- size="mini"-->
<!-- @click="handleExport"-->
<!-- v-hasPermi="['wjnft:us:export']"-->
<!-- >导出</el-button>-->
<!-- </el-col>-->
<right-toolbar :showSearch.sync="showSearch" @queryTable="getList"></right-toolbar>
</el-row>
<el-table v-loading="loading" :data="usList" @selection-change="handleSelectionChange">
<el-table-column type="selection" width="55" align="center" />
<el-table-column label="序号" align="center" type="index" width="50"/>
<el-table-column label="标题" align="center" prop="title" />
<el-table-column label="简介" align="center" prop="introduce" />
<el-table-column label="内容" align="center" prop="content" />
<el-table-column label="图片路径" align="center" prop="pictureUrl" />
<el-table-column label="内容" align="center" prop="content" >
<template slot-scope="scope">
<div class="ql-container ql-snow">
<div class="ql-editor" v-html="scope.row.content" style="height:100px;width:100%;overflow:auto" />
</div>
</template>
</el-table-column>
<el-table-column label="图片" align="center" prop="pictureUrl" >
<template slot-scope="scope">
<div class="demo-image">
<div class="block">
<el-image
style="
width: 50px;
height: 51px;
border-radius: 6px;
z-index: 2;
"
:src="scope.row.pictureUrl"
:preview-src-list="srcList"
>
</el-image>
</div>
</div>
</template>
</el-table-column>
<el-table-column label="创建时间" align="center" prop="createdTime" width="180">
<template slot-scope="scope">
<span>{{ parseTime(scope.row.createdTime, '{y}-{m}-{d}') }}</span>
@ -111,11 +105,7 @@
<span>{{ parseTime(scope.row.updatedTime, '{y}-{m}-{d}') }}</span>
</template>
</el-table-column>
<el-table-column label="删除时间" align="center" prop="deletedTime" width="180">
<template slot-scope="scope">
<span>{{ parseTime(scope.row.deletedTime, '{y}-{m}-{d}') }}</span>
</template>
</el-table-column>
<el-table-column label="操作" align="center" class-name="small-padding fixed-width">
<template slot-scope="scope">
<el-button
@ -135,7 +125,7 @@
</template>
</el-table-column>
</el-table>
<pagination
v-show="total>0"
:total="total"
@ -147,9 +137,6 @@
<!-- 添加或修改关于我们对话框 -->
<el-dialog :title="title" :visible.sync="open" width="500px" append-to-body>
<el-form ref="form" :model="form" :rules="rules" label-width="80px">
<el-form-item label="id" prop="id">
<el-input v-model="form.id" placeholder="请输入id" />
</el-form-item>
<el-form-item label="标题" prop="title">
<el-input v-model="form.title" placeholder="请输入标题" />
</el-form-item>
@ -159,33 +146,61 @@
<el-form-item label="内容">
<editor v-model="form.content" :min-height="192"/>
</el-form-item>
<el-form-item label="图片路径">
<imageUpload v-model="form.pictureUrl"/>
</el-form-item>
<el-form-item label="创建时间" prop="createdTime">
<el-date-picker clearable size="small"
v-model="form.createdTime"
type="date"
value-format="yyyy-MM-dd"
placeholder="选择创建时间">
</el-date-picker>
</el-form-item>
<el-form-item label="修改时间" prop="updatedTime">
<el-date-picker clearable size="small"
v-model="form.updatedTime"
type="date"
value-format="yyyy-MM-dd"
placeholder="选择修改时间">
</el-date-picker>
</el-form-item>
<el-form-item label="删除时间" prop="deletedTime">
<el-date-picker clearable size="small"
v-model="form.deletedTime"
type="date"
value-format="yyyy-MM-dd"
placeholder="选择删除时间">
</el-date-picker>
<el-form-item label="选择图片">
<!-- <imageUpload v-model="form.pictureUrl"/>-->
<div>
<el-upload
ref="upload"
:action="action"
:headers="headers"
:limit="3"
:on-exceed="handleExceed"
list-type="picture-card"
:on-success="handleSuccess"
:auto-upload="true"
:before-upload="beforeUpload"
:file-list="imgList"
>
<i slot="default" class="el-icon-plus"></i>
<div slot="file" slot-scope="{file}">
<img
class="el-upload-list__item-thumbnail"
:src="file.url" alt=""
>
<span class="el-upload-list__item-actions">
<span
class="el-upload-list__item-preview"
@click="handlePictureCardPreview(file)"
>
<i class="el-icon-zoom-in"></i>
</span>
<span
v-if="!disabled"
class="el-upload-list__item-delete"
@click="handleDownload(file)"
>
<i class="el-icon-download"></i>
</span>
<span
v-if="!disabled"
class="el-upload-list__item-delete"
@click="handleRemove(file)"
>
<i class="el-icon-delete"></i>
</span>
</span>
</div>
</el-upload>
</div>
<span> 上传文件只能是<b style="color: #C03639">png，jpeg，jpg</b >格式,大小不能超过<b style="color: #C03639">3M</b> </span>
<el-dialog :visible.sync="dialogVisible">
<img width="100%" :src="dialogImageUrl" alt="">
</el-dialog>
</el-form-item>
</el-form>
<div slot="footer" class="dialog-footer">
<el-button type="primary" @click="submitForm">确 定</el-button>
@ -197,11 +212,42 @@
<script>
import { listUs, getUs, delUs, addUs, updateUs } from "@/api/wjnft/us";
import {getToken} from "@/utils/auth";
const client = 1;
export default {
name: "Us",
props:{
// 大小限制(MB)
fileSize: {
type: Number,
default: 3,
},
// 文件类型, 例如['png', 'jpg', 'jpeg']
fileType: {
type: Array,
default: () => ["png", "jpg", "jpeg"],
},
// 是否显示提示
isShowTip: {
type: Boolean,
default: true
},
},
data() {
return {
pictures:[],
//文件上传
srcList: [],
pictureUrl:[],
dialogImageUrl: '',
dialogVisible: false,
//
disabled: false,
imgList:[],
// 遮罩层
loading: true,
// 选中数组
@ -242,11 +288,49 @@ export default {
created() {
this.getList();
},
computed: {
headers() {
return {
Authorization: "Bearer " + getToken()
}
},
// 是否显示提示
showTip() {
return this.isShowTip && (this.fileType || this.fileSize);
},
action() {
return process.env.VUE_APP_BASE_API + "/wjnft/oss/upload/" + client
}
},
methods: {
/** 查询关于我们列表 */
getList() {
this.loading = true;
listUs(this.queryParams).then(response => {
response.rows.forEach(item =>{
let picture = item.pictureUrl;
if(picture.search(",") != -1){
// console.log(item.pictureUrl)
let e = picture.split(",");
console.log(e)
e.forEach( items => {
console.log(items)
if(items !== undefined || items !== ' '){
item.pictureUrl = items;
this.srcList.push(items);
}
// console.log(this.srcList)
})
}else{
item.pictureUrl = picture;
this.srcList.push(picture);
}
});
this.usList = response.rows;
this.total = response.total;
this.loading = false;
@ -259,6 +343,7 @@ export default {
},
// 表单重置
reset() {
this.imgList = [];
this.form = {
id: null,
title: null,
@ -295,10 +380,27 @@ export default {
},
/** 修改按钮操作 */
handleUpdate(row) {
this.imgList = [];
this.reset();
console.log(row)
const id = row.id || this.ids
getUs(id).then(response => {
this.form = response.data;
let picture = this.form.pictureUrl;
if(picture.search(",") != -1){
let e = picture.split(",");
e.forEach( items => {
let obj = {}
obj.url = items
this.imgList.push(obj)
})
}else{
let t = this.form.pictureUrl
let obj = {}
obj.url = t
this.imgList.push(obj)
}
this.open = true;
this.title = "修改关于我们";
});
@ -308,12 +410,58 @@ export default {
this.$refs["form"].validate(valid => {
if (valid) {
if (this.form.id != null) {
//console.log(this.pictureUrl);
let url = "";
if(this.pictureUrl.length > 0){
this.imgList.forEach(item =>{
if(url === ""){
url = item.url+',';
}else{
url = url + item.url+',';
}
});
if(this.pictureUrl.length > 1 ){
url = url + this.pictureUrl.join(",")
}else{
url = url + this.pictureUrl[0];
}
this.form.pictureUrl = url;
}else {
this.imgList.forEach(item =>{
if(url === ""){
if(this.imgList.length > 0){
url = item.url+',';
}else{
url = item.url;
}
}else{
let c = this.imgList[this.imgList.length-1];
//console.log(c);
if(c.url === item.url){
//console.log(c.url === item.url)
url = url + item.url;
}else{
url = url + item.url+',';
}
}
});
this.form.pictureUrl = url;
}
console.log(this.form);
updateUs(this.form).then(response => {
this.$modal.msgSuccess("修改成功");
this.open = false;
this.getList();
});
} else {
if(this.pictureUrl.length > 1){
this.form.pictureUrl = this.pictureUrl.join(",");
}else{
this.form.pictureUrl = this.pictureUrl[0];
}
//console.log(this.form);
addUs(this.form).then(response => {
this.$modal.msgSuccess("新增成功");
this.open = false;
@ -338,7 +486,69 @@ export default {
this.download('wjnft/us/export', {
...this.queryParams
}, `us_${new Date().getTime()}.xlsx`)
}
},
// 上传文件时触发
beforeUpload(file) {
//console.log(file)
let testmsg = file.name.substring(file.name.lastIndexOf(".") + 1);
const extension = testmsg === "png";
const extension1 = testmsg === "jpg";
const extension2 = testmsg === "jpeg";
const isLt32M = file.size / 1024 / 1024 < 3;
if (!extension && !extension2 && !extension1) {
this.$message.warning('上传文件只能是png,jpeg,jpg格式！');
}
if (!isLt32M) {
this.$message.warning('上传文件大小不能超过3MB！');
}
return (extension || extension2 || extension1) && isLt32M;
},
// 上传的提示
handleExceed(files, fileList) {
this.$message.warning('当前只允许上传三个文件');
},
//上传成功
handleSuccess(res, file) {
console.log( res,file );
//图片路径返回给父组件
// console.log(res);
this.pictureUrl.push( res.url);
//this.imgList.push({name:file.name,url:res.url });
return this.imgList;
},
//删除照片
handleRemove(file) {
if(file.name !== undefined){
console.log(this.$refs.upload.uploadFiles);
// this.$refs.upload.clearFiles()
let n = this.$refs.upload.uploadFiles;
const finde = n.map(f => f.name).indexOf(file.name);
if(finde > -1) {
n.splice(finde, 1);
}
}else{
const findex = this.imgList.map(f => f.url).indexOf(file.url);
if(findex > -1) {
this.imgList.splice(findex, 1);
}
}
//this.$refs.upload.clearFiles()
},
handlePictureCardPreview(file) {
this.dialogImageUrl = file.url;
this.dialogVisible = true;
},
handleDownload(file) {
console.log(file);
},
}
};
</script>

Write Preview
Loading…
Cancel
Save