283 行
12 KiB
HTML
可执行文件
283 行
12 KiB
HTML
可执行文件
<!--[1.8.45]-->
|
||
<div id="Client" v-cloak>
|
||
<if condition="$authArr['add'] eq true">
|
||
<div style="margin-bottom:10px;">
|
||
<el-button type="primary" size="mini" @click="setLabel">添加背景图</el-button>
|
||
</div>
|
||
</if>
|
||
<el-dialog title="背景图" :append-to-body="true" :visible.sync="showSetLabel">
|
||
<el-form>
|
||
<el-form-item style="text-align: center;">
|
||
|
||
<div class="el-upload el-upload--picture-card el-upload-list--picture-card upload-img-small-auto"
|
||
@click="selectImageLabel">
|
||
<i v-if="!label_img_id" class="el-icon-plus"></i>
|
||
<img v-else class="el-upload-list__item-thumbnail img-auto" :src="label_img">
|
||
</div>
|
||
<div>
|
||
<el-button plain size="mini" @click="selectImageLabel">图库图片
|
||
<el-tooltip class="item" effect="dark" content="点击图片选择本地图片，点击按钮选择图库图片"
|
||
placement="top-start">
|
||
<i class="el-icon-question"></i></el-tooltip>
|
||
</el-button>
|
||
<p class="suggest">建议尺寸：60 x 60，或等比例图片</p>
|
||
</div>
|
||
|
||
</el-form-item>
|
||
<el-form-item style="text-align: center;">
|
||
<el-input v-model="order" placeholder="请输入排序" size="small"
|
||
style="width:250px;"></el-input>
|
||
</el-form-item>
|
||
<if condition="$authArr['add'] eq true">
|
||
<el-form-item style="display: flex;justify-content: center;">
|
||
<el-button type="primary" size="mini" @click="labelAdd"
|
||
style="margin:10px;" id="loadingOne">确定
|
||
</el-button>
|
||
</el-form-item>
|
||
</if>
|
||
</el-form>
|
||
</el-dialog>
|
||
<div style="border: 1px solid #e6e6e6;max-width: calc(100vw - 208px);">
|
||
<el-table :data="BackgroundList" :highlight-current-row="true" border size="mini"
|
||
style="width: calc(100vw - 208px);box-sizing: border-box;">
|
||
<el-table-column type="index" label="序号" align="center"></el-table-column>
|
||
<el-table-column label="背景图" align="center">
|
||
<template slot-scope="scope">
|
||
<a :href="scope.row.img" target="_blank">
|
||
<img style="width:auto;height: 200px;" :src="scope.row.img">
|
||
</a>
|
||
</template>
|
||
</el-table-column>
|
||
<el-table-column label="状态" align="center">
|
||
<template slot-scope="scope">
|
||
<el-switch
|
||
v-model="scope.row.status"
|
||
active-value="1"
|
||
inactive-value="0"
|
||
:active-text="scope.row.status == 1 ? '开启' : '关闭'"
|
||
@change="changeStatus(scope.row.id,scope.row.status)">
|
||
</el-switch>
|
||
</template>
|
||
</el-table-column>
|
||
<el-table-column prop="sort" label="排序" align="center"></el-table-column>
|
||
<el-table-column label="操作" align="center">
|
||
<template slot-scope="scope">
|
||
<if condition="$authArr['add'] eq true">
|
||
<el-button size="mini" type="text" @click="labelEdit(scope.$index,scope.row.sort)">编辑
|
||
</el-button>
|
||
</if>
|
||
<if condition="$authArr['del'] eq true">
|
||
<el-button size="mini" type="text" @click="delLabel(scope.row.id)">删除</el-button>
|
||
</if>
|
||
</template>
|
||
</el-table-column>
|
||
</el-table>
|
||
<el-pagination
|
||
@size-change="handleSizeChange"
|
||
@current-change="handleCurrentChange"
|
||
:current-page="currentPage"
|
||
:page-sizes="[10, 15, 20, 25, 30, 35, 40, 45, 50]"
|
||
:page-size="100"
|
||
layout="total, sizes, prev, pager, next, jumper"
|
||
:total="currentLen">
|
||
</el-pagination>
|
||
</el-pagination>
|
||
</div>
|
||
<!-- 选择图片 -->
|
||
<el-dialog title="选择图片" :append-to-body="true" :visible.sync="label_show_close_image"
|
||
custom-class="select-image-el-dialog" :top="'10px'">
|
||
<template-select-image :can-select-num="1" @selectfile="selectFileLabel"></template-select-image>
|
||
</el-dialog>
|
||
</div>
|
||
|
||
<script type="text/javascript">
|
||
new Vue({
|
||
el: "#Client",
|
||
data: {
|
||
showSetLabel: false,
|
||
label_show_close_image: false,
|
||
BackgroundList: [],
|
||
currentPage: 1,
|
||
currentLimit: 10,
|
||
currentLen: 0,
|
||
editId: '',
|
||
order: '',
|
||
label_img_id: '',
|
||
label_img: '',
|
||
},
|
||
methods: {
|
||
handleCurrentChange: function (val) {
|
||
this.currentPage = val;
|
||
this.getData();
|
||
},
|
||
handleSizeChange(val) {
|
||
this.currentLimit = val;//切换每页数量
|
||
this.currentPage = 1;
|
||
this.getData();
|
||
},
|
||
//添加背景图
|
||
setLabel: function () {
|
||
this.showSetLabel = true;
|
||
this.sort = "";
|
||
this.label_img_id = "";
|
||
this.label_img = "";
|
||
},
|
||
selectImageLabel: function () {
|
||
this.label_show_close_image = true;
|
||
this.label_img_id = "";
|
||
this.label_img = "";
|
||
},
|
||
//选择文件
|
||
selectFileLabel: function (item) {
|
||
console.log(item);
|
||
this.label_show_close_image = false;
|
||
this.label_img_id = item[0].id;
|
||
this.label_img = item[0].path;
|
||
},
|
||
//添加编辑操作
|
||
labelAdd: function () {
|
||
let loading = this.$loading({
|
||
target: "#loadingOne",
|
||
lock: true,
|
||
text: '保存中，请等待',
|
||
spinner: 'el-icon-loading',
|
||
background: 'rgba(255, 255, 255, 0.7)'
|
||
});
|
||
$.ajax({
|
||
url: "{:U('imgAdd')}",
|
||
type: "POST",
|
||
data: {
|
||
order: JSON.stringify(this.order),
|
||
editId: JSON.stringify(this.editId),
|
||
label_img_id: this.label_img_id,
|
||
},
|
||
dataType: 'JSON',
|
||
success: (res) => {
|
||
if (res.status == 1) {
|
||
this.$message({
|
||
message: res.msg,
|
||
type: 'success',
|
||
duration: 1000,
|
||
onClose: () => {
|
||
this.editId = '';
|
||
this.order = "";
|
||
this.label_img_id = "";
|
||
this.label_img = "";
|
||
loading.close();
|
||
this.getData();
|
||
this.showSetLabel = false;
|
||
}
|
||
});
|
||
} else {
|
||
this.$message({
|
||
message: res.msg,
|
||
type: 'error'
|
||
});
|
||
}
|
||
}
|
||
})
|
||
},
|
||
//列表
|
||
getData: function () {
|
||
var that = this;
|
||
$.ajax({
|
||
url: "{:U('imgList')}",
|
||
type: "post",
|
||
data: {
|
||
page: that.currentPage,
|
||
limit: that.currentLimit
|
||
},
|
||
success: function (res) {
|
||
that.BackgroundList = [];
|
||
that.BackgroundList = res.imgList;
|
||
that.$nextTick(function () {
|
||
that.currentLen = parseInt(res.count);
|
||
})
|
||
}
|
||
})
|
||
},
|
||
//开启关闭
|
||
changeStatus: function (id, status) {
|
||
var that = this;
|
||
$.ajax({
|
||
url: "{:U('changeState')}",
|
||
type: "post",
|
||
data: {
|
||
id: id,
|
||
status: status
|
||
},
|
||
success: function (res) {
|
||
if (res.status == 1) {
|
||
that.$message({
|
||
type: "success",
|
||
message: res.msg,
|
||
duration: 1000
|
||
})
|
||
} else {
|
||
that.$message({
|
||
type: "warning",
|
||
message: res.msg,
|
||
duration: 1000
|
||
})
|
||
}
|
||
|
||
}
|
||
})
|
||
},
|
||
labelEdit: function (index, sort) {
|
||
var that = this;
|
||
that.showSetLabel = true;
|
||
var data = that.BackgroundList[index];
|
||
that.$nextTick(function () {
|
||
that.editId = data.id;
|
||
that.order = data.order;
|
||
$("input[name='label_img_id']").val(data.img_id);
|
||
$("#label_url").attr('src', data.img);
|
||
that.order = sort;
|
||
})
|
||
},
|
||
//删除
|
||
delLabel: function (id) {
|
||
var that = this;
|
||
that.$confirm('此操作将删除该图片, 是否继续?', '提示', {
|
||
confirmButtonText: '确定',
|
||
cancelButtonText: '取消',
|
||
type: 'warning'
|
||
}).then(() => {
|
||
$.ajax({
|
||
url: "{:U('delList')}",
|
||
type: "POST",
|
||
data: {
|
||
id: id,
|
||
},
|
||
success: function (res) {
|
||
if (res.status == 1) {
|
||
that.$message({
|
||
message: res.msg,
|
||
type: 'success',
|
||
duration: 1000,
|
||
onClose: function () {
|
||
that.getData();
|
||
}
|
||
});
|
||
} else {
|
||
that.$message({
|
||
message: res.msg,
|
||
type: 'error'
|
||
});
|
||
}
|
||
}
|
||
})
|
||
}).catch(() => {
|
||
that.$message({
|
||
type: 'info',
|
||
message: '已取消删除'
|
||
});
|
||
});
|
||
},
|
||
},
|
||
created: function () {
|
||
this.getData();
|
||
}
|
||
})
|
||
</script> |