Skip to content

P
pet-business-web
Commit b7b28324 authored by 陈明豪's avatar 陈明豪
Browse files
Options

修改图片上传后样式

parent c61c0317
Hide whitespace changes
Inline Side-by-side
Showing with 337 additions and 214 deletions
src/assets/styles/btn.scss
View file @ b7b28324
......@@ -218,3 +218,61 @@
font-size: 14px;
border-radius: 4px;
}
.form-detail-button {
//padding: 7px 13px 7px 11px !important;
padding-left: 6px !important;
padding-right: 6px !important;
height: 32px;
background: #5BB647;
border-radius: 4px 4px 4px 4px;
border: 1px solid #5BB647;
opacity: 1;
font-size: 12px;
font-family: Microsoft YaHei-Regular, Microsoft YaHei;
font-weight: 400;
color: #FFFFFF;
i{
width: 8px;
height: 8px;
margin-right: 4px;
}
&:hover {
background: #83C374!important;
color: #FFFFFF!important;
border: 1px solid #83C374!important;
}
&:focus {
background: #55A343!important;
color: #FFFFFF!important;
border: 1px solid #55A343!important;
}
}
.form-edit-button {
//padding: 7px 13px 7px 11px !important;
padding-left: 6px !important;
padding-right: 6px !important;
height: 32px;
background: #3490ce;
border-radius: 4px 4px 4px 4px;
border: 1px solid #3490ce;
opacity: 1;
font-size: 12px;
font-family: Microsoft YaHei-Regular, Microsoft YaHei;
font-weight: 400;
color: #FFFFFF;
i{
width: 8px;
height: 8px;
margin-right: 4px;
}
&:hover {
background: #63a8d6;
color: #FFFFFF!important;
border: 1px solid #63a8d6;
}
&:focus {
background: #3490ce!important;
color: #FFFFFF;
border: 1px solid #3490ce!important;
}
}
src/components/ImageUpload/index.vue
View file @ b7b28324
......@@ -96,7 +96,6 @@ export default {
value: {
handler(val) {
if (val) {
console.log('kkkkkkkkkkkkkkkkkk', this.baseUrl)
// 首先将值转为数组
const list = Array.isArray(val) ? val : this.value.split(',')
// 然后将数组转为对象数组
......@@ -138,13 +137,13 @@ export default {
}
if (!isImg) {
this.$modal.msgError(`文件格式不正确, 请上传${this.fileType.join('/')}图片格式文件!`)
this.$modal.msgError(`文件格式不正确, 请上传${this.fileType.join('/')}图片格式文件`)
return false
}
if (this.fileSize) {
const isLt = file.size / 1024 / 1024 < this.fileSize
if (!isLt) {
this.$modal.msgError(`上传图片大小不能超过 ${this.fileSize} MB!`)
this.$modal.msgError(`上传图片大小不能超过 ${this.fileSize} MB`)
return false
}
}
......@@ -153,7 +152,7 @@ export default {
},
// 文件个数超出
handleExceed() {
this.$modal.msgError(`上传文件数量不能超过 ${this.limit} 个!`)
this.$modal.msgError(`上传文件数量不能超过 ${this.limit} 个`)
},
// 上传成功回调
handleUploadSuccess(res, file) {
......
src/views/banner_management/banner_add.vue
View file @ b7b28324
<template>
<div class="banner-container">
<div class="bannerHeaderTitle">
<span style="color: #666666; font-weight: 600; font-size: 16px;">新增</span>
<!-- 头部标题-->
<div style="padding-top:32px;text-align: center;">
<span class="top-title-style">新增</span>
</div>
<div class="bannerAddMain">
<div style="display: flex;margin: 20px;">
<div style="height: 30px;border-left: 5px solid #5FB54B;" />
<div style="padding-top: 3px;padding-left: 10px;color: #666666; font-weight: 700; font-size: 16px;">轮播信息</div>
<div style="padding: 20px;">
<div style="display: flex">
<!-- 轮播信息 -->
<div class="tip-green" />
<div class="title-font-style">
轮播信息
</div>
</div>
</div>
<div>
<el-form ref="form" :model="form" label-width="133px" :rules="rules">
<el-form-item label="标题：" prop="title">
<el-input v-model.trim="form.title" class="form-input" style="width: 420px" maxlength="12" show-word-limit clearable />
<el-input v-model.trim="form.title" class="form-input" style="width: 420px" maxlength="12" clearable />
</el-form-item>
<el-form-item label="轮播图：" prop="img">
<image-upload v-model="form.img" :limit="1" :is-show-tip="false" file-size="20" />
</el-form-item>
<el-form-item label="跳转地址：" prop="url">
<el-input v-model.trim="form.url" class="form-input" style="width: 420px" maxlength="255" show-word-limit clearable />
<el-input v-model.trim="form.url" class="form-input" style="width: 420px" maxlength="255" clearable />
</el-form-item>
<el-form-item label="权重：" prop="sort">
<el-input-number
......@@ -47,7 +53,7 @@
<span v-else style="height: 2.5rem;line-height: 2.5rem;color: #f5aa6c;margin-left: 5px;">未发布</span>
</el-form-item>
<el-form-item label="备注：" prop="notes">
<el-input v-model.trim="form.notes" class="form-input" style="width: 420px" maxlength="60" show-word-limit clearable />
<el-input v-model.trim="form.notes" type="textarea" rows="3" class="form-input" style="width: 420px" maxlength="60" clearable />
</el-form-item>
<el-form-item>
<el-button :loading="submitLoading" class="queryBtn" icon="el-icon-check" @click="submitForm">提交</el-button>
......@@ -166,7 +172,7 @@ export default {
if (res.code === 200) {
this.submitLoading = false
this.$message({
message: '新增成功！',
message: '新增成功',
type: 'success'
})
this.goBack()
......@@ -211,4 +217,28 @@ export default {
line-height: 40px !important;
font-size: 14px !important;
}
//最上方文字样式
.top-title-style{
font-size: 24px;
font-family: Microsoft YaHei-Bold, Microsoft YaHei;
font-weight: bold;
color: #333333;
}
//模块tip样式--绿色
.tip-green {
margin-right: 13px;
width: 3px;
height: 24px;
background: #5FB54B;
border-radius: 10px 10px 10px 10px;
opacity: 1;
}
//小标题样式
.title-font-style {
font-size: 16px;
font-family: Microsoft YaHei-Bold, Microsoft YaHei;
font-weight: bold;
color: #333333;
line-height: 24px;
}
</style>
src/views/banner_management/banner_detail.vue
View file @ b7b28324
<template>
<div class="banner-container">
<div class="bannerHeaderTitle">
<span style="color: #666666; font-weight: 600; font-size: 16px;">详情</span>
<!-- 头部标题-->
<div style="padding-top:32px;text-align: center;">
<span class="top-title-style">详情</span>
</div>
<div class="bannerAddMain">
<div style="display: flex;margin: 20px;">
<div style="height: 30px;border-left: 5px solid #5FB54B;" />
<div style="padding-top: 3px;padding-left: 10px;color: #666666; font-weight: 700; font-size: 16px;">轮播信息</div>
<div style="padding: 20px;">
<div style="display: flex">
<!-- 轮播信息 -->
<div class="tip-green" />
<div class="title-font-style">
轮播信息
</div>
</div>
</div>
<div>
<el-form ref="form" :model="form" label-width="133px">
......@@ -47,7 +53,7 @@
</span>
</el-form-item>
<el-form-item label="备注：" prop="notes">
<el-input v-model.trim="form.notes" disabled class="form-input" style="width: 420px" maxlength="60" show-word-limit clearable />
<el-input v-model.trim="form.notes" type="textarea" rows="3" show-word-limit disabled class="form-input" style="width: 420px" maxlength="60" clearable />
</el-form-item>
<el-form-item>
<el-button class="resetBtn" icon="el-icon-back" @click="goBack">返回</el-button>
......@@ -147,4 +153,28 @@ export default {
height: 9.25rem;
background-color: #00afff;
}
//最上方文字样式
.top-title-style{
font-size: 24px;
font-family: Microsoft YaHei-Bold, Microsoft YaHei;
font-weight: bold;
color: #333333;
}
//模块tip样式--绿色
.tip-green {
margin-right: 13px;
width: 3px;
height: 24px;
background: #5FB54B;
border-radius: 10px 10px 10px 10px;
opacity: 1;
}
//小标题样式
.title-font-style {
font-size: 16px;
font-family: Microsoft YaHei-Bold, Microsoft YaHei;
font-weight: bold;
color: #333333;
line-height: 24px;
}
</style>
src/views/banner_management/banner_edit.vue
View file @ b7b28324
<template>
<div class="banner-container">
<div class="bannerHeaderTitle">
<span style="color: #666666; font-weight: 600; font-size: 16px;">编辑</span>
<!-- 头部标题-->
<div style="padding-top:32px;text-align: center;">
<span class="top-title-style">编辑</span>
</div>
<div class="bannerAddMain">
<div style="display: flex;margin: 20px;">
<div style="height: 30px;border-left: 5px solid #5FB54B;" />
<div style="padding-top: 3px;padding-left: 10px;color: #666666; font-weight: 700; font-size: 16px;">轮播信息</div>
<div style="padding: 20px;">
<div style="display: flex">
<!-- 轮播信息 -->
<div class="tip-green" />
<div class="title-font-style">
轮播信息
</div>
</div>
</div>
<div>
<el-form ref="form" :model="form" label-width="133px" :rules="rules">
<el-form-item label="标题：" prop="title">
<el-input v-model.trim="form.title" class="form-input" style="width: 420px" maxlength="12" show-word-limit clearable :disabled="form.id === 1" />
<el-input v-model.trim="form.title" class="form-input" style="width: 420px" maxlength="12" clearable :disabled="form.id === 1" />
</el-form-item>
<el-form-item label="轮播图：" prop="img">
<image-upload v-model="form.img" :limit="1" :is-show-tip="false" file-size="20" />
</el-form-item>
<el-form-item label="跳转地址：" prop="url">
<el-input v-model.trim="form.url" class="form-input" style="width: 420px" maxlength="255" show-word-limit clearable :disabled="form.id === 1" />
<el-input v-model.trim="form.url" class="form-input" style="width: 420px" maxlength="255" clearable :disabled="form.id === 1" />
</el-form-item>
<el-form-item label="权重：" prop="sort">
<el-input-number
......@@ -49,7 +55,7 @@
</span>
</el-form-item>
<el-form-item label="备注：" prop="notes">
<el-input v-model.trim="form.notes" :disabled="form.id === 1" class="form-input" style="width: 420px" maxlength="60" show-word-limit clearable />
<el-input v-model.trim="form.notes" type="textarea" rows="3" :disabled="form.id === 1" class="form-input" style="width: 420px" maxlength="60" clearable />
</el-form-item>
<el-form-item>
<el-button :loading="submitLoading" class="queryBtn" icon="el-icon-check" @click="submitForm">提交</el-button>
......@@ -193,7 +199,7 @@ export default {
if (res.code === 200) {
this.submitLoading = false
this.$message({
message: '修改成功！',
message: '修改成功',
type: 'success'
})
this.goBack()
......@@ -239,4 +245,28 @@ export default {
line-height: 40px !important;
font-size: 14px !important;
}
//最上方文字样式
.top-title-style{
font-size: 24px;
font-family: Microsoft YaHei-Bold, Microsoft YaHei;
font-weight: bold;
color: #333333;
}
//模块tip样式--绿色
.tip-green {
margin-right: 13px;
width: 3px;
height: 24px;
background: #5FB54B;
border-radius: 10px 10px 10px 10px;
opacity: 1;
}
//小标题样式
.title-font-style {
font-size: 16px;
font-family: Microsoft YaHei-Bold, Microsoft YaHei;
font-weight: bold;
color: #333333;
line-height: 24px;
}
</style>
src/views/banner_management/banner_management.vue
View file @ b7b28324
<template>
<div style="background-color: #FFFFFF;">
<div class="app-container">
<el-tabs v-model="activeName">
<el-tab-pane label="轮播管理" name="first">
<!--顶部搜索区-->
<el-form v-show="showSearch" ref="queryForm" :inline="true" :model="queryParams" label-width="68px">
<el-form-item prop="title">
<el-input
v-model.trim="queryParams.title"
placeholder="请输入标题"
maxlength="20"
clearable
@keyup.enter.native="handleQuery"
/>
</el-form-item>
<el-form-item prop="imgBoolean">
<el-select v-model.trim="queryParams.imgBoolean" clearable placeholder="轮播图">
<el-option
v-for="item in imgStatus"
:key="item.value"
:label="item.label"
:value="item.value"
/>
</el-select>
</el-form-item>
<el-form-item prop="status">
<el-select v-model.trim="queryParams.status" clearable placeholder="状态">
<el-option
v-for="item in bannerStatus"
:key="item.value"
:label="item.label"
:value="item.value"
/>
</el-select>
</el-form-item>
<el-form-item prop="createTime">
<el-date-picker
v-model.trim="queryParams.createTime"
clearable
placeholder="请选择创建日期"
type="date"
value-format="yyyy-MM-dd"
/>
</el-form-item>
<el-form-item prop="orderWay">
<el-select v-model.trim="queryParams.orderWay" clearable placeholder="请选择排序方式">
<el-option
v-for="item in dict.type.banner_order"
:key="item.value"
:label="item.label"
:value="item.value"
/>
</el-select>
</el-form-item>
<div>
<!--顶部操作按钮-->
<el-form-item>
<!--新增文章-->
<!--顶部搜索区-->
<el-form v-show="showSearch" ref="queryForm" :inline="true" :model="queryParams" label-width="68px">
<el-form-item prop="title">
<el-input
v-model.trim="queryParams.title"
placeholder="请输入标题"
maxlength="20"
clearable
@keyup.enter.native="handleQuery"
/>
</el-form-item>
<el-form-item prop="imgBoolean">
<el-select v-model.trim="queryParams.imgBoolean" clearable placeholder="轮播图">
<el-option
v-for="item in imgStatus"
:key="item.value"
:label="item.label"
:value="item.value"
/>
</el-select>
</el-form-item>
<el-form-item prop="status">
<el-select v-model.trim="queryParams.status" clearable placeholder="状态">
<el-option
v-for="item in bannerStatus"
:key="item.value"
:label="item.label"
:value="item.value"
/>
</el-select>
</el-form-item>
<el-form-item prop="createTime">
<el-date-picker
v-model.trim="queryParams.createTime"
clearable
placeholder="请选择创建日期"
type="date"
value-format="yyyy-MM-dd"
/>
</el-form-item>
<el-form-item prop="orderWay">
<el-select v-model.trim="queryParams.orderWay" clearable placeholder="请选择排序方式">
<el-option
v-for="item in dict.type.banner_order"
:key="item.value"
:label="item.label"
:value="item.value"
/>
</el-select>
</el-form-item>
<div>
<!--顶部操作按钮-->
<el-form-item>
<!--新增文章-->
<el-button
v-hasPermi="['business:article:add']"
class="fourWordsBtn"
icon="el-icon-plus"
size="mini"
@click="handleAdd"
>新增轮播
</el-button>
</el-form-item>
<el-form-item style="position: absolute;right: 0.6%;">
<!--搜索 重置-->
<el-button class="queryBtn" icon="el-icon-search" @click="handleQuery">查询</el-button>
<el-button class="resetBtn" icon="el-icon-refresh" @click="resetQuery">重置</el-button>
</el-form-item>
</div>
</el-form>
<!-- 表格区 -->
<el-table
v-loading="loading"
:data="bannerList"
:header-cell-style="{background:'#E8E9E8'}"
@selection-change="handleSelectionChange"
>
<el-table-column label="序号" min-width="80" show-overflow-tooltip type="index" />
<el-table-column label="标题" prop="title" show-overflow-tooltip />
<el-table-column label="轮播图" prop="img" show-overflow-tooltip width="100px">
<template slot-scope="scope">
{{ scope.row.img ? '已上传':'未上传' }}
</template>
</el-table-column>
<el-table-column label="跳转链接" prop="url" show-overflow-tooltip>
<template slot-scope="scope">
<span>{{ scope.row.url || '-' }}</span>
</template>
</el-table-column>
<el-table-column label="权重" prop="sort" width="80" />
<el-table-column label="创建日期" prop="createTime" width="120" />
<el-table-column label="状态" prop="status" width="100">
<template slot-scope="scope">
<span :style="scope.row.status === '1' ? 'color: #67C23A' : 'color: #f5aa6c'">
{{ scope.row.status === '1' ? '• 已发布':'• 未发布' }}</span>
</template>
</el-table-column>
<el-table-column label="操作" class-name="small-padding fixed-width">
<template slot-scope="scope">
<div style="display: flex;">
<div style="padding-right: 20px;">
<el-button
v-hasPermi="['business:banner:query']"
icon="el-icon-document"
size="mini"
class="form-detail-button"
type="success"
@click="handleDetail(scope.row)"
>详情
</el-button>
</div>
<div style="padding-right: 20px;">
<el-button
v-hasPermi="['business:banner:edit']"
icon="el-icon-edit"
size="mini"
class="form-edit-button"
:disabled="scope.row.status === '1'"
type="primary"
@click="handleUpdate(scope.row)"
>编辑
</el-button>
</div>
<div v-if="scope.row.status==='2'">
<el-button
v-hasPermi="['business:article:add']"
class="fourWordsBtn"
icon="el-icon-plus"
key="1"
v-hasPermi="['business:banner:remove']"
icon="el-icon-delete"
size="mini"
@click="handleAdd"
>新增轮播
style="width: 50px; border-radius: 6px 6px 6px 6px;border: 1px solid rgb(219,71,71);"
type="danger"
@click="handleDelete(scope.row)"
>删除
</el-button>
</el-form-item>
<el-form-item style="position: absolute;right: 0.6%;">
<!--搜索 重置-->
<el-button class="queryBtn" icon="el-icon-search" @click="handleQuery">查询</el-button>
<el-button class="resetBtn" icon="el-icon-refresh" @click="resetQuery">重置</el-button>
</el-form-item>
</div>
<div v-else-if="scope.row.status==='1'">
<el-button
key="2"
v-hasPermi="['business:banner:edit']"
icon="el-icon-video-pause"
plain
size="mini"
style="width: 50px; border-radius: 6px 6px 6px 6px;border: 1px solid rgb(255,157,78);"
type="warning"
:disabled="scope.row.id === 1"
@click="deListBanner(scope.row)"
>禁用
</el-button>
</div>
</div>
</el-form>
</template>
</el-table-column>
</el-table>
<!-- 表格区 -->
<el-table
v-loading="loading"
:data="bannerList"
:header-cell-style="{background:'#E8E9E8'}"
@selection-change="handleSelectionChange"
>
<el-table-column label="序号" min-width="80" show-overflow-tooltip type="index" />
<el-table-column label="标题" prop="title" show-overflow-tooltip />
<el-table-column label="轮播图" prop="img" show-overflow-tooltip width="100px">
<template slot-scope="scope">
{{ scope.row.img ? '已上传':'未上传' }}
</template>
</el-table-column>
<el-table-column label="跳转链接" prop="url" show-overflow-tooltip>
<template slot-scope="scope">
<span>{{ scope.row.url || '-' }}</span>
</template>
</el-table-column>
<el-table-column label="权重" prop="sort" width="80" />
<el-table-column label="创建日期" prop="createTime" width="120" />
<el-table-column label="状态" prop="status" width="100">
<template slot-scope="scope">
<span :style="scope.row.status === '1' ? 'color: #67C23A' : 'color: #f5aa6c'">
{{ scope.row.status === '1' ? '• 已发布':'• 未发布' }}</span>
</template>
</el-table-column>
<el-table-column label="操作" class-name="small-padding fixed-width">
<template slot-scope="scope">
<div style="display: flex;">
<div style="padding-right: 20px;">
<el-button
v-hasPermi="['business:banner:query']"
icon="el-icon-document"
plain
size="mini"
style="width: 50px; border-radius: 6px 6px 6px 6px;border: 1px solid rgb(95,181,75);"
type="success"
@click="handleDetail(scope.row)"
>详情
</el-button>
</div>
<div style="padding-right: 20px;">
<el-button
v-hasPermi="['business:banner:edit']"
icon="el-icon-edit"
plain
size="mini"
style="width: 50px; border-radius: 6px 6px 6px 6px;border: 1px solid rgb(52,144,206);"
type="primary"
@click="handleUpdate(scope.row)"
>编辑
</el-button>
</div>
<div v-if="scope.row.status==='2'">
<el-button
key="1"
v-hasPermi="['business:banner:remove']"
icon="el-icon-delete"
plain
size="mini"
style="width: 50px; border-radius: 6px 6px 6px 6px;border: 1px solid rgb(219,71,71);"
type="danger"
@click="handleDelete(scope.row)"
>删除
</el-button>
</div>
<div v-else-if="scope.row.status==='1'">
<el-button
key="2"
v-hasPermi="['business:banner:edit']"
icon="el-icon-video-pause"
plain
size="mini"
style="width: 50px; border-radius: 6px 6px 6px 6px;border: 1px solid rgb(255,157,78);"
type="warning"
:disabled="scope.row.id === 1"
@click="deListBanner(scope.row)"
>禁用
</el-button>
</div>
</div>
</template>
</el-table-column>
</el-table>
<pagination
v-show="total>0"
:total="total"
:page.sync="queryParams.pageNum"
:limit.sync="queryParams.pageSize"
@pagination="getBannerList"
/>
</el-tab-pane>
</el-tabs>
<pagination
v-show="total>0"
:total="total"
:page.sync="queryParams.pageNum"
:limit.sync="queryParams.pageSize"
@pagination="getBannerList"
/>
</div>
</div>
</template>
<script>
import { listBanner, delBanner, addBanner, updateBanner } from '@/api/business/banner'
import { listBanner, delBanner, updateBanner } from '@/api/business/banner'
export default {
name: 'BannerManagement',
......@@ -311,31 +305,11 @@ export default {
handleDetail(row) {
this.$router.push('/banner-management/banner-detail?id=' + row.id)
},
/** 提交按钮 */
submitForm() {
this.$refs['form'].validate(valid => {
if (valid) {
if (this.form.id != null) {
updateBanner(this.form).then(response => {
this.$modal.msgSuccess('修改成功')
this.open = false
this.getBannerList()
})
} else {
addBanner(this.form).then(response => {
this.$modal.msgSuccess('新增成功')
this.open = false
this.getBannerList()
})
}
}
})
},
/** 删除按钮操作 */
handleDelete(row) {
const ids = row.id || this.ids
this.$confirm('是否确认删除此条数据，删除后不可恢复', '提示', {
this.$confirm('是否确认删除此条数据，删除后不可恢复', '删除', {
confirmButtonText: '确定',
cancelButtonText: '取消',
customClass: 'box-logout',
......@@ -377,7 +351,9 @@ export default {
<style lang="scss" scoped>
.app-container {
padding: 0 1.5rem;
padding-left: 1.5rem;
padding-right: 1.5rem;
padding-top: 1.5rem;
margin-bottom: 0.5em;
}
......
Markdown is supported
0% or
You are about to add 0 people to the discussion. Proceed with caution.
Finish editing this message first!
Please register or to comment