You can not select more than 25 topics
Topics must start with a letter or number, can include dashes ('-') and can be up to 35 characters long.
306 lines
7.8 KiB
306 lines
7.8 KiB
<template>
|
|
<div class="ele-body">
|
|
<el-card shadow="never">
|
|
<!-- 搜索表单 -->
|
|
<el-form
|
|
:model="where"
|
|
label-width="77px"
|
|
class="ele-form-search"
|
|
@keyup.enter.native="reload"
|
|
@submit.native.prevent>
|
|
<el-row :gutter="15">
|
|
<el-col :md="5" :sm="12">
|
|
<el-form-item label="标志:">
|
|
<el-input
|
|
v-model="where.name"
|
|
placeholder="请输入碎片标志"
|
|
clearable/>
|
|
</el-form-item>
|
|
</el-col>
|
|
<el-col :md="4" :sm="12">
|
|
<el-form-item label="标题:">
|
|
<el-input
|
|
v-model="where.title"
|
|
placeholder="请输入标题"
|
|
clearable/>
|
|
</el-form-item>
|
|
</el-col>
|
|
|
|
<el-col :md="6" :sm="12">
|
|
<div class="ele-form-actions">
|
|
<el-button
|
|
type="primary"
|
|
@click="reload"
|
|
icon="el-icon-search"
|
|
class="ele-btn-icon">查询
|
|
</el-button>
|
|
<el-button @click="reset">重置</el-button>
|
|
</div>
|
|
</el-col>
|
|
</el-row>
|
|
</el-form>
|
|
<!-- 数据表格 -->
|
|
<ele-pro-table
|
|
ref="table"
|
|
:datasource="url"
|
|
:columns="columns"
|
|
:where="where"
|
|
:selection.sync="selection">
|
|
<!-- 表头工具栏 -->
|
|
<template slot="toolbar">
|
|
<el-button
|
|
@click="openEdit(null)"
|
|
type="primary"
|
|
icon="el-icon-plus"
|
|
class="ele-btn-icon"
|
|
size="small">添加
|
|
</el-button>
|
|
<el-button
|
|
@click="removeBatch"
|
|
type="danger"
|
|
icon="el-icon-delete"
|
|
class="ele-btn-icon"
|
|
size="small">删除
|
|
</el-button>
|
|
</template>
|
|
|
|
<template slot="image" slot-scope="{row}">
|
|
<div class="ele-cell">
|
|
<a :href="row.image" target="_blank"><el-avatar shape="square" :size="100" :src="row.image"/></a>
|
|
</div>
|
|
</template>
|
|
|
|
<!-- 状态列 -->
|
|
<template slot="status" slot-scope="{row}">
|
|
<el-switch
|
|
v-model="row.status"
|
|
@change="editStatus(row)"
|
|
:active-value="1"
|
|
:inactive-value="0"/>
|
|
</template>
|
|
|
|
<!-- 操作列 -->
|
|
<template slot="action" slot-scope="{row}">
|
|
<el-link
|
|
@click="openEdit(row)"
|
|
icon="el-icon-edit"
|
|
type="primary"
|
|
:underline="false">修改
|
|
</el-link>
|
|
|
|
<el-popconfirm
|
|
title="确定要删除此碎片吗？"
|
|
@confirm="remove(row)"
|
|
class="ele-action">
|
|
<el-link
|
|
slot="reference"
|
|
icon="el-icon-delete"
|
|
type="danger"
|
|
:underline="false">删除
|
|
</el-link>
|
|
</el-popconfirm>
|
|
</template>
|
|
</ele-pro-table>
|
|
</el-card>
|
|
<!-- 编辑弹窗 -->
|
|
<debris-edit
|
|
:visible.sync="showEdit"
|
|
:data="current"
|
|
@done="reload"/>
|
|
|
|
</div>
|
|
</template>
|
|
|
|
<script>
|
|
import DebrisEdit from './debris-edit';
|
|
|
|
|
|
export default {
|
|
name: 'debris',
|
|
components: {DebrisEdit},
|
|
data() {
|
|
return {
|
|
// 表格数据接口
|
|
url: '/debris/index',
|
|
// 表格列配置
|
|
columns: [
|
|
{
|
|
columnKey: 'selection',
|
|
type: 'selection',
|
|
width: 45,
|
|
align: 'center',
|
|
fixed: 'left'
|
|
},
|
|
{
|
|
columnKey: 'index',
|
|
type: 'index',
|
|
width: 45,
|
|
align: 'center',
|
|
fixed: 'left',
|
|
showOverflowTooltip: true
|
|
},
|
|
{
|
|
prop: 'name',
|
|
label: '标志',
|
|
sortable: false,
|
|
showOverflowTooltip: true,
|
|
minWidth: 80
|
|
},
|
|
{
|
|
prop: 'title',
|
|
label: '标题',
|
|
sortable: false,
|
|
showOverflowTooltip: true,
|
|
minWidth: 80
|
|
},
|
|
{
|
|
prop: 'url',
|
|
label: '地址',
|
|
sortable: false,
|
|
showOverflowTooltip: true,
|
|
minWidth: 60
|
|
},
|
|
{
|
|
prop: 'image',
|
|
label: '图片',
|
|
sortable: false,
|
|
showOverflowTooltip: true,
|
|
minWidth: 100,
|
|
slot: "image"
|
|
},
|
|
{
|
|
prop: 'sort',
|
|
label: '排序',
|
|
sortable: 'custom',
|
|
align: 'center',
|
|
showOverflowTooltip: true,
|
|
minWidth: 50
|
|
},
|
|
{
|
|
prop: 'create_time',
|
|
label: '创建时间',
|
|
sortable: 'custom',
|
|
showOverflowTooltip: true,
|
|
minWidth: 100,
|
|
formatter: (row, column, cellValue) => {
|
|
return this.$util.toDateString(cellValue);
|
|
}
|
|
},
|
|
{
|
|
prop: 'status',
|
|
label: '状态',
|
|
align: 'center',
|
|
sortable: 'custom',
|
|
width: 80,
|
|
resizable: false,
|
|
slot: 'status'
|
|
},
|
|
{
|
|
columnKey: 'action',
|
|
label: '操作',
|
|
width: 150,
|
|
align: 'center',
|
|
resizable: false,
|
|
slot: 'action'
|
|
}
|
|
],
|
|
// 表格搜索条件
|
|
where: {},
|
|
// 表格选中数据
|
|
selection: [],
|
|
// 当前编辑数据
|
|
current: null,
|
|
// 是否显示编辑弹窗
|
|
showEdit: false,
|
|
// 是否显示导入弹窗
|
|
showImport: false
|
|
}
|
|
},
|
|
methods: {
|
|
/* 刷新表格 */
|
|
reload() {
|
|
this.$refs.table.reload({page: 1});
|
|
},
|
|
/* 重置搜索 */
|
|
reset() {
|
|
this.where = {};
|
|
this.$nextTick(() => {
|
|
this.reload();
|
|
});
|
|
},
|
|
/* 显示编辑 */
|
|
openEdit(row) {
|
|
this.current = row;
|
|
this.showEdit = true;
|
|
},
|
|
/* 删除 */
|
|
remove(row) {
|
|
const loading = this.$loading({lock: true});
|
|
let formData = new FormData();
|
|
formData.append('id', row.id);
|
|
this.$http.post('/debris/delete/', formData).then(res => {
|
|
loading.close();
|
|
if (res.data.code === 0) {
|
|
this.$message({type: 'success', message: res.data.msg});
|
|
this.reload();
|
|
} else {
|
|
this.$message.error(res.data.msg);
|
|
}
|
|
}).catch(e => {
|
|
loading.close();
|
|
this.$message.error(e.message);
|
|
});
|
|
},
|
|
/* 批量删除 */
|
|
removeBatch() {
|
|
if (!this.selection.length) {
|
|
this.$message.error('请至少选择一条数据')
|
|
return;
|
|
}
|
|
this.$confirm('确定要删除选中的碎片吗?', '提示', {
|
|
type: 'warning'
|
|
}).then(() => {
|
|
const loading = this.$loading({lock: true});
|
|
let formData = new FormData();
|
|
formData.append('id', this.selection.map(d => d.id));
|
|
this.$http.post('/debris/delete/', formData).then(res => {
|
|
loading.close();
|
|
if (res.data.code === 0) {
|
|
this.$message({type: 'success', message: res.data.msg});
|
|
this.reload();
|
|
} else {
|
|
this.$message.error(res.data.msg);
|
|
}
|
|
}).catch(e => {
|
|
loading.close();
|
|
this.$message.error(e.message);
|
|
});
|
|
}).catch(() => {
|
|
});
|
|
},
|
|
|
|
/* 更改状态 */
|
|
editStatus(row) {
|
|
const loading = this.$loading({lock: true});
|
|
let params = new FormData();
|
|
params.append('status', row.status);
|
|
params.append('id', row.id);
|
|
this.$http.post('/debris/status', params).then(res => {
|
|
loading.close();
|
|
if (res.data.code === 0) {
|
|
this.$message({type: 'success', message: res.data.msg});
|
|
} else {
|
|
row.status = !row.status ? 1 : 0;
|
|
this.$message.error(res.data.msg);
|
|
}
|
|
}).catch(e => {
|
|
loading.close();
|
|
this.$message.error(e.message);
|
|
});
|
|
}
|
|
}
|
|
}
|
|
</script>
|
|
|
|
<style scoped>
|
|
</style>
|
|
|