commit
a67907d5df
@ -0,0 +1,53 @@ |
||||
import request from '@/utils/request' |
||||
|
||||
// 创建栏目管理
|
||||
export function createColumnInfo(data) { |
||||
return request({ |
||||
url: '/cjy/column-info/create', |
||||
method: 'post', |
||||
data: data |
||||
}) |
||||
} |
||||
|
||||
// 更新栏目管理
|
||||
export function updateColumnInfo(data) { |
||||
return request({ |
||||
url: '/cjy/column-info/update', |
||||
method: 'put', |
||||
data: data |
||||
}) |
||||
} |
||||
|
||||
// 删除栏目管理
|
||||
export function deleteColumnInfo(id) { |
||||
return request({ |
||||
url: '/cjy/column-info/delete?id=' + id, |
||||
method: 'delete' |
||||
}) |
||||
} |
||||
|
||||
// 获得栏目管理
|
||||
export function getColumnInfo(id) { |
||||
return request({ |
||||
url: '/cjy/column-info/get?id=' + id, |
||||
method: 'get' |
||||
}) |
||||
} |
||||
|
||||
// 获得栏目管理分页
|
||||
export function getColumnInfoPage(params) { |
||||
return request({ |
||||
url: '/cjy/column-info/page', |
||||
method: 'get', |
||||
params |
||||
}) |
||||
} |
||||
// 导出栏目管理 Excel
|
||||
export function exportColumnInfoExcel(params) { |
||||
return request({ |
||||
url: '/cjy/column-info/export-excel', |
||||
method: 'get', |
||||
params, |
||||
responseType: 'blob' |
||||
}) |
||||
} |
||||
@ -0,0 +1,146 @@ |
||||
<template> |
||||
<div class="app-container"> |
||||
<!-- 对话框(添加 / 修改) --> |
||||
<el-dialog :title="dialogTitle" :visible.sync="dialogVisible" width="45%" v-dialogDrag append-to-body> |
||||
<el-form ref="formRef" :model="formData" :rules="formRules" v-loading="formLoading" label-width="100px"> |
||||
<el-form-item label="模块类型" prop="type"> |
||||
<el-select v-model="formData.type" placeholder="请选择模块类型"> |
||||
<el-option v-for="dict in this.getDictDatas(DICT_TYPE.COLUMN_TYPE)" |
||||
:key="dict.value" :label="dict.label" :value="dict.value" /> |
||||
</el-select> |
||||
</el-form-item> |
||||
<el-form-item label="资讯类型" prop="infoType"> |
||||
<el-select v-model="formData.infoType" placeholder="请选择资讯类型"> |
||||
<el-option v-for="dict in this.getDictDatas(DICT_TYPE.INFO_TYPE)" |
||||
:key="dict.value" :label="dict.label" :value="dict.value" /> |
||||
</el-select> |
||||
</el-form-item> |
||||
<el-form-item label="标题" prop="title"> |
||||
<el-input v-model="formData.title" placeholder="请输入标题" /> |
||||
</el-form-item> |
||||
<el-form-item label="副标题" prop="subtitle"> |
||||
<el-input v-model="formData.subtitle" placeholder="请输入副标题" /> |
||||
</el-form-item> |
||||
<el-form-item label="跳转链接" prop="url"> |
||||
<el-input v-model="formData.url" placeholder="请输入跳转链接" /> |
||||
</el-form-item> |
||||
<el-form-item label="简介"> |
||||
<Editor v-model="formData.introduction" :min-height="192"/> |
||||
</el-form-item> |
||||
<el-form-item label="logo"> |
||||
<ImageUpload v-model="formData.logo"/> |
||||
</el-form-item> |
||||
<el-form-item label="图库"> |
||||
<ImageUpload v-model="formData.image"/> |
||||
</el-form-item> |
||||
<el-form-item label="内容"> |
||||
<Editor v-model="formData.content" :min-height="192"/> |
||||
</el-form-item> |
||||
</el-form> |
||||
<div slot="footer" class="dialog-footer"> |
||||
<el-button type="primary" @click="submitForm" :disabled="formLoading">确 定</el-button> |
||||
<el-button @click="dialogVisible = false">取 消</el-button> |
||||
</div> |
||||
</el-dialog> |
||||
</div> |
||||
</template> |
||||
|
||||
<script> |
||||
import * as ColumnInfoApi from '@/api/cjy/columninfo'; |
||||
import ImageUpload from '@/components/ImageUpload'; |
||||
import Editor from '@/components/Editor'; |
||||
import { DICT_TYPE, getDictDatas } from "@/utils/dict"; |
||||
export default { |
||||
name: "ColumnInfoForm", |
||||
components: { |
||||
ImageUpload, |
||||
Editor, |
||||
}, |
||||
data() { |
||||
return { |
||||
// 弹出层标题 |
||||
dialogTitle: "", |
||||
// 是否显示弹出层 |
||||
dialogVisible: false, |
||||
// 表单的加载中:1)修改时的数据加载;2)提交的按钮禁用 |
||||
formLoading: false, |
||||
// 表单参数 |
||||
formData: { |
||||
id: undefined, |
||||
type: undefined, |
||||
infoType: undefined, |
||||
title: undefined, |
||||
subtitle: undefined, |
||||
url: undefined, |
||||
introduction: undefined, |
||||
logo: undefined, |
||||
image: undefined, |
||||
content: undefined, |
||||
}, |
||||
// 表单校验 |
||||
formRules: { |
||||
type: [{ required: true, message: '模块类型不能为空', trigger: 'change' }], |
||||
}, |
||||
}; |
||||
}, |
||||
methods: { |
||||
/** 打开弹窗 */ |
||||
async open(id) { |
||||
this.dialogVisible = true; |
||||
this.reset(); |
||||
// 修改时,设置数据 |
||||
if (id) { |
||||
this.formLoading = true; |
||||
try { |
||||
const res = await ColumnInfoApi.getColumnInfo(id); |
||||
this.formData = res.data; |
||||
this.title = "修改栏目管理"; |
||||
} finally { |
||||
this.formLoading = false; |
||||
} |
||||
} |
||||
this.title = "新增栏目管理"; |
||||
}, |
||||
/** 提交按钮 */ |
||||
async submitForm() { |
||||
// 校验主表 |
||||
await this.$refs["formRef"].validate(); |
||||
this.formLoading = true; |
||||
try { |
||||
const data = this.formData; |
||||
// 修改的提交 |
||||
if (data.id) { |
||||
await ColumnInfoApi.updateColumnInfo(data); |
||||
this.$modal.msgSuccess("修改成功"); |
||||
this.dialogVisible = false; |
||||
this.$emit('success'); |
||||
return; |
||||
} |
||||
// 添加的提交 |
||||
await ColumnInfoApi.createColumnInfo(data); |
||||
this.$modal.msgSuccess("新增成功"); |
||||
this.dialogVisible = false; |
||||
this.$emit('success'); |
||||
} finally { |
||||
this.formLoading = false; |
||||
} |
||||
}, |
||||
/** 表单重置 */ |
||||
reset() { |
||||
this.formData = { |
||||
id: undefined, |
||||
type: undefined, |
||||
infoType: undefined, |
||||
title: undefined, |
||||
subtitle: undefined, |
||||
url: undefined, |
||||
introduction: undefined, |
||||
logo: undefined, |
||||
image: undefined, |
||||
content: undefined, |
||||
}; |
||||
this.resetForm("formRef"); |
||||
} |
||||
} |
||||
}; |
||||
</script> |
||||
@ -0,0 +1,157 @@ |
||||
<template> |
||||
<div class="app-container"> |
||||
<!-- 搜索工作栏 --> |
||||
<el-form :model="queryParams" ref="queryForm" size="small" :inline="true" v-show="showSearch" label-width="68px"> |
||||
<el-form-item label="模块类型" prop="type"> |
||||
<el-select v-model="queryParams.type" placeholder="请选择模块类型" clearable size="small"> |
||||
<el-option v-for="dict in this.getDictDatas(DICT_TYPE.COLUMN_TYPE)" |
||||
:key="dict.value" :label="dict.label" :value="dict.value"/> |
||||
</el-select> |
||||
</el-form-item> |
||||
<el-form-item label="标题" prop="title"> |
||||
<el-input v-model="queryParams.title" placeholder="请输入标题" clearable @keyup.enter.native="handleQuery"/> |
||||
</el-form-item> |
||||
<el-form-item label="副标题" prop="subtitle"> |
||||
<el-input v-model="queryParams.subtitle" placeholder="请输入副标题" clearable @keyup.enter.native="handleQuery"/> |
||||
</el-form-item> |
||||
<el-form-item> |
||||
<el-button type="primary" icon="el-icon-search" @click="handleQuery">搜索</el-button> |
||||
<el-button icon="el-icon-refresh" @click="resetQuery">重置</el-button> |
||||
</el-form-item> |
||||
</el-form> |
||||
|
||||
<!-- 操作工具栏 --> |
||||
<el-row :gutter="10" class="mb8"> |
||||
<el-col :span="1.5"> |
||||
<el-button type="primary" plain icon="el-icon-plus" size="mini" @click="openForm(undefined)" |
||||
v-hasPermi="['cjy:column-info:create']">新增</el-button> |
||||
</el-col> |
||||
<el-col :span="1.5"> |
||||
<el-button type="warning" plain icon="el-icon-download" size="mini" @click="handleExport" :loading="exportLoading" |
||||
v-hasPermi="['cjy:column-info:export']">导出</el-button> |
||||
</el-col> |
||||
<right-toolbar :showSearch.sync="showSearch" @queryTable="getList"></right-toolbar> |
||||
</el-row> |
||||
|
||||
<el-table v-loading="loading" :data="list" :stripe="true" :show-overflow-tooltip="true"> |
||||
<el-table-column label="主键" align="center" prop="id" /> |
||||
<el-table-column label="模块类型" align="center" prop="type"> |
||||
<template v-slot="scope"> |
||||
<dict-tag :type="DICT_TYPE.COLUMN_TYPE" :value="scope.row.type" /> |
||||
</template> |
||||
</el-table-column> |
||||
<el-table-column label="标题" align="center" prop="title" /> |
||||
<el-table-column label="副标题" align="center" prop="subtitle" /> |
||||
<el-table-column label="跳转链接" align="center" prop="url" /> |
||||
<el-table-column label="创建时间" align="center" prop="createTime" width="180"> |
||||
<template v-slot="scope"> |
||||
<span>{{ parseTime(scope.row.createTime) }}</span> |
||||
</template> |
||||
</el-table-column> |
||||
<el-table-column label="操作" align="center" class-name="small-padding fixed-width"> |
||||
<template v-slot="scope"> |
||||
<el-button size="mini" type="text" icon="el-icon-edit" @click="openForm(scope.row.id)" |
||||
v-hasPermi="['cjy:column-info:update']">修改</el-button> |
||||
<el-button size="mini" type="text" icon="el-icon-delete" @click="handleDelete(scope.row)" |
||||
v-hasPermi="['cjy:column-info:delete']">删除</el-button> |
||||
</template> |
||||
</el-table-column> |
||||
</el-table> |
||||
<!-- 分页组件 --> |
||||
<pagination v-show="total > 0" :total="total" :page.sync="queryParams.pageNo" :limit.sync="queryParams.pageSize" |
||||
@pagination="getList"/> |
||||
<!-- 对话框(添加 / 修改) --> |
||||
<ColumnInfoForm ref="formRef" @success="getList" /> |
||||
</div> |
||||
</template> |
||||
|
||||
<script> |
||||
import * as ColumnInfoApi from '@/api/cjy/columninfo'; |
||||
import ColumnInfoForm from './ColumnInfoForm.vue'; |
||||
export default { |
||||
name: "ColumnInfo", |
||||
components: { |
||||
ColumnInfoForm |
||||
}, |
||||
data() { |
||||
return { |
||||
// 遮罩层 |
||||
loading: true, |
||||
// 导出遮罩层 |
||||
exportLoading: false, |
||||
// 显示搜索条件 |
||||
showSearch: true, |
||||
// 总条数 |
||||
total: 0, |
||||
// 栏目管理列表 |
||||
list: [], |
||||
// 是否展开,默认全部展开 |
||||
isExpandAll: true, |
||||
// 重新渲染表格状态 |
||||
refreshTable: true, |
||||
// 选中行 |
||||
currentRow: {}, |
||||
// 查询参数 |
||||
queryParams: { |
||||
pageNo: 1, |
||||
pageSize: 10, |
||||
type: null, |
||||
title: null, |
||||
subtitle: null, |
||||
}, |
||||
}; |
||||
}, |
||||
created() { |
||||
this.getList(); |
||||
}, |
||||
methods: { |
||||
/** 查询列表 */ |
||||
async getList() { |
||||
try { |
||||
this.loading = true; |
||||
const res = await ColumnInfoApi.getColumnInfoPage(this.queryParams); |
||||
this.list = res.data.list; |
||||
this.total = res.data.total; |
||||
} finally { |
||||
this.loading = false; |
||||
} |
||||
}, |
||||
/** 搜索按钮操作 */ |
||||
handleQuery() { |
||||
this.queryParams.pageNo = 1; |
||||
this.getList(); |
||||
}, |
||||
/** 重置按钮操作 */ |
||||
resetQuery() { |
||||
this.resetForm("queryForm"); |
||||
this.handleQuery(); |
||||
}, |
||||
/** 添加/修改操作 */ |
||||
openForm(id) { |
||||
this.$refs["formRef"].open(id); |
||||
}, |
||||
/** 删除按钮操作 */ |
||||
async handleDelete(row) { |
||||
const id = row.id; |
||||
await this.$modal.confirm('是否确认删除栏目管理编号为"' + id + '"的数据项?') |
||||
try { |
||||
await ColumnInfoApi.deleteColumnInfo(id); |
||||
await this.getList(); |
||||
this.$modal.msgSuccess("删除成功"); |
||||
} catch {} |
||||
}, |
||||
/** 导出按钮操作 */ |
||||
async handleExport() { |
||||
await this.$modal.confirm('是否确认导出所有栏目管理数据项?'); |
||||
try { |
||||
this.exportLoading = true; |
||||
const data = await ColumnInfoApi.exportColumnInfoExcel(this.queryParams); |
||||
this.$download.excel(data, '栏目管理.xls'); |
||||
} catch { |
||||
} finally { |
||||
this.exportLoading = false; |
||||
} |
||||
}, |
||||
} |
||||
}; |
||||
</script> |
||||
Loading…
Reference in new issue