初始化项目
This commit is contained in:
@@ -0,0 +1,246 @@
|
||||
<template>
|
||||
<a-card :bordered="false">
|
||||
<div class="card-title">{{ $route.meta.title }}</div>
|
||||
<div class="table-operator">
|
||||
<!-- 搜索板块 -->
|
||||
<a-row class="row-item-search">
|
||||
<a-form class="search-form" :form="searchForm" layout="inline" @submit="handleSearch">
|
||||
<a-form-item label="文章标题">
|
||||
<a-input v-decorator="['title']" placeholder="请输入文章标题" />
|
||||
</a-form-item>
|
||||
<a-form-item label="文章分类">
|
||||
<a-select v-decorator="['categoryId', { initialValue: -1 }]">
|
||||
<a-select-option :value="-1">全部</a-select-option>
|
||||
<a-select-option
|
||||
v-for="(item, index) in categoryList"
|
||||
:key="index"
|
||||
:value="item.category_id"
|
||||
>{{ item.name }}</a-select-option>
|
||||
</a-select>
|
||||
</a-form-item>
|
||||
<a-form-item label="状态">
|
||||
<a-select v-decorator="['status', { initialValue: -1 }]">
|
||||
<a-select-option :value="-1">全部</a-select-option>
|
||||
<a-select-option :value="1">显示</a-select-option>
|
||||
<a-select-option :value="0">隐藏</a-select-option>
|
||||
</a-select>
|
||||
</a-form-item>
|
||||
<a-form-item class="search-btn">
|
||||
<a-button type="primary" icon="search" html-type="submit">搜索</a-button>
|
||||
</a-form-item>
|
||||
</a-form>
|
||||
</a-row>
|
||||
<!-- 操作板块 -->
|
||||
<div class="row-item-tab clearfix">
|
||||
<a-button v-action:add type="primary" icon="plus" @click="handleAdd">新增</a-button>
|
||||
</div>
|
||||
</div>
|
||||
<s-table
|
||||
ref="table"
|
||||
rowKey="article_id"
|
||||
:loading="isLoading"
|
||||
:columns="columns"
|
||||
:data="loadData"
|
||||
:pageSize="15"
|
||||
:scroll="{ x: 1450 }"
|
||||
>
|
||||
<!-- 文章封面图 -->
|
||||
<span slot="image_url" slot-scope="text">
|
||||
<a title="点击查看原图" :href="text" target="_blank">
|
||||
<img height="50" :src="text" alt="封面图" />
|
||||
</a>
|
||||
</span>
|
||||
<!-- 文章标题 -->
|
||||
<span slot="stitle" slot-scope="text">
|
||||
<p class="twoline-hide" style="width: 270px;">{{ text }}</p>
|
||||
</span>
|
||||
<!-- 所属分类 -->
|
||||
<span slot="category" slot-scope="text">{{ text.name }}</span>
|
||||
<!-- 状态 -->
|
||||
<span slot="status" slot-scope="text">
|
||||
<a-tag :color="text ? 'green' : ''">{{ text ? '显示' : '隐藏' }}</a-tag>
|
||||
</span>
|
||||
<!-- 操作项 -->
|
||||
<span slot="action" slot-scope="text, item">
|
||||
<a v-action:edit style="margin-right: 8px;" @click="handleEdit(item)">编辑</a>
|
||||
<a v-action:delete @click="handleDelete(item)">删除</a>
|
||||
</span>
|
||||
</s-table>
|
||||
<AddForm ref="AddForm" :categoryList="categoryList" @handleSubmit="handleRefresh" />
|
||||
<EditForm ref="EditForm" :categoryList="categoryList" @handleSubmit="handleRefresh" />
|
||||
</a-card>
|
||||
</template>
|
||||
|
||||
<script>
|
||||
import * as ArticleApi from '@/api/content/article'
|
||||
import * as CategoryApi from '@/api/content/article/category'
|
||||
import { ContentHeader, STable } from '@/components'
|
||||
import EditForm from './modules/EditForm'
|
||||
import AddForm from './modules/AddForm'
|
||||
|
||||
// 表格表头
|
||||
const columns = [
|
||||
{
|
||||
title: 'ID',
|
||||
dataIndex: 'article_id'
|
||||
},
|
||||
{
|
||||
title: '封面图',
|
||||
dataIndex: 'image_url',
|
||||
scopedSlots: { customRender: 'image_url' }
|
||||
},
|
||||
{
|
||||
title: '文章标题',
|
||||
dataIndex: 'title',
|
||||
width: '320px',
|
||||
scopedSlots: { customRender: 'stitle' }
|
||||
},
|
||||
{
|
||||
title: '所属分类',
|
||||
dataIndex: 'category',
|
||||
scopedSlots: { customRender: 'category' }
|
||||
},
|
||||
{
|
||||
title: '状态',
|
||||
dataIndex: 'status',
|
||||
scopedSlots: { customRender: 'status' }
|
||||
},
|
||||
{
|
||||
title: '排序',
|
||||
dataIndex: 'sort'
|
||||
},
|
||||
{
|
||||
title: '创建时间',
|
||||
width: '180px',
|
||||
dataIndex: 'create_time'
|
||||
},
|
||||
{
|
||||
title: '更新时间',
|
||||
width: '180px',
|
||||
dataIndex: 'update_time'
|
||||
},
|
||||
{
|
||||
title: '操作',
|
||||
dataIndex: 'action',
|
||||
width: '150px',
|
||||
fixed: 'right',
|
||||
scopedSlots: { customRender: 'action' }
|
||||
}
|
||||
]
|
||||
|
||||
export default {
|
||||
name: 'Index',
|
||||
components: {
|
||||
ContentHeader,
|
||||
STable,
|
||||
AddForm,
|
||||
EditForm
|
||||
},
|
||||
data () {
|
||||
return {
|
||||
expand: false,
|
||||
// 当前表单元素
|
||||
searchForm: this.$form.createForm(this),
|
||||
// 分类列表
|
||||
categoryList: [],
|
||||
// 查询参数
|
||||
queryParam: {},
|
||||
// 正在加载
|
||||
isLoading: false,
|
||||
// 表头
|
||||
columns,
|
||||
// 加载数据方法 必须为 Promise 对象
|
||||
loadData: param => {
|
||||
return ArticleApi.list({ ...param, ...this.queryParam })
|
||||
.then(response => {
|
||||
return response.data.list
|
||||
})
|
||||
}
|
||||
}
|
||||
},
|
||||
created () {
|
||||
// 获取分类列表
|
||||
this.getCategoryList()
|
||||
},
|
||||
methods: {
|
||||
|
||||
/**
|
||||
* 获取分类列表
|
||||
*/
|
||||
getCategoryList () {
|
||||
this.isLoading = true
|
||||
CategoryApi.list()
|
||||
.then(result => {
|
||||
this.categoryList = result.data.list
|
||||
})
|
||||
.finally(result => {
|
||||
this.isLoading = false
|
||||
})
|
||||
},
|
||||
|
||||
// 确认搜索
|
||||
handleSearch (e) {
|
||||
e.preventDefault()
|
||||
this.searchForm.validateFields((error, values) => {
|
||||
if (!error) {
|
||||
this.queryParam = { ...this.queryParam, ...values }
|
||||
this.handleRefresh(true)
|
||||
}
|
||||
})
|
||||
},
|
||||
|
||||
/**
|
||||
* 删除记录
|
||||
*/
|
||||
handleDelete (item) {
|
||||
const app = this
|
||||
const modal = this.$confirm({
|
||||
title: '您确定要删除该记录吗?',
|
||||
content: '删除后不可恢复',
|
||||
onOk () {
|
||||
return ArticleApi.deleted({ articleId: item.article_id })
|
||||
.then(result => {
|
||||
app.$message.success(result.message, 1.5)
|
||||
app.handleRefresh()
|
||||
})
|
||||
.finally(result => {
|
||||
modal.destroy()
|
||||
})
|
||||
}
|
||||
})
|
||||
},
|
||||
|
||||
/**
|
||||
* 新增记录
|
||||
*/
|
||||
handleAdd () {
|
||||
this.$refs.AddForm.add()
|
||||
},
|
||||
|
||||
/**
|
||||
* 编辑记录
|
||||
*/
|
||||
handleEdit (item) {
|
||||
this.$refs.EditForm.edit(item.article_id)
|
||||
},
|
||||
|
||||
/**
|
||||
* 刷新列表
|
||||
* @param Boolean bool 强制刷新到第一页
|
||||
*/
|
||||
handleRefresh (bool = false) {
|
||||
this.$refs.table.refresh(bool)
|
||||
}
|
||||
|
||||
}
|
||||
}
|
||||
</script>
|
||||
<style lang="less" scoped>
|
||||
.ant-card-body {
|
||||
padding: 22px 29px 25px;
|
||||
}
|
||||
// 筛选tab
|
||||
.tab-list {
|
||||
margin-right: 20px;
|
||||
}
|
||||
</style>
|
||||
@@ -0,0 +1,150 @@
|
||||
<template>
|
||||
<a-card :bordered="false">
|
||||
<div class="card-title">{{ $route.meta.title }}</div>
|
||||
<div class="table-operator">
|
||||
<a-button v-action:add type="primary" icon="plus" @click="handleAdd">新增</a-button>
|
||||
</div>
|
||||
<a-table
|
||||
v-if="!isLoading"
|
||||
rowKey="category_id"
|
||||
:columns="columns"
|
||||
:dataSource="categoryList"
|
||||
:defaultExpandAllRows="true"
|
||||
:expandIconColumnIndex="1"
|
||||
:pagination="false"
|
||||
:loading="isLoading"
|
||||
>
|
||||
<!-- 状态 -->
|
||||
<span slot="status" slot-scope="text">
|
||||
<a-tag :color="text ? 'green' : ''">{{ text ? '显示' : '隐藏' }}</a-tag>
|
||||
</span>
|
||||
<span slot="action" slot-scope="text, item">
|
||||
<a v-action:edit style="margin-right: 8px;" @click="handleEdit(item)">编辑</a>
|
||||
<a v-action:delete @click="handleDelete(item)">删除</a>
|
||||
</span>
|
||||
</a-table>
|
||||
<AddForm ref="AddForm" @handleSubmit="handleRefresh" />
|
||||
<EditForm ref="EditForm" @handleSubmit="handleRefresh" />
|
||||
</a-card>
|
||||
</template>
|
||||
|
||||
<script>
|
||||
import * as Api from '@/api/content/article/category'
|
||||
import { STable } from '@/components'
|
||||
import AddForm from './modules/AddForm'
|
||||
import EditForm from './modules/EditForm'
|
||||
|
||||
export default {
|
||||
name: 'Index',
|
||||
components: {
|
||||
STable,
|
||||
AddForm,
|
||||
EditForm
|
||||
},
|
||||
data () {
|
||||
return {
|
||||
// 分类列表
|
||||
categoryList: [],
|
||||
// 查询参数
|
||||
queryParam: {},
|
||||
// 正在加载
|
||||
isLoading: false,
|
||||
// 表头
|
||||
columns: [
|
||||
{
|
||||
title: '分类ID',
|
||||
dataIndex: 'category_id'
|
||||
},
|
||||
{
|
||||
title: '分类名称',
|
||||
dataIndex: 'name'
|
||||
},
|
||||
{
|
||||
title: '状态',
|
||||
dataIndex: 'status',
|
||||
scopedSlots: { customRender: 'status' }
|
||||
},
|
||||
{
|
||||
title: '排序',
|
||||
dataIndex: 'sort'
|
||||
},
|
||||
{
|
||||
title: '添加时间',
|
||||
dataIndex: 'create_time'
|
||||
},
|
||||
{
|
||||
title: '操作',
|
||||
dataIndex: 'action',
|
||||
width: '180px',
|
||||
scopedSlots: { customRender: 'action' }
|
||||
}
|
||||
]
|
||||
}
|
||||
},
|
||||
created () {
|
||||
// 获取分类列表
|
||||
this.getCategoryList(true)
|
||||
},
|
||||
methods: {
|
||||
|
||||
/**
|
||||
* 获取分类列表
|
||||
*/
|
||||
getCategoryList (bool) {
|
||||
bool && (this.isLoading = true)
|
||||
Api.list()
|
||||
.then(result => {
|
||||
this.categoryList = result.data.list
|
||||
})
|
||||
.finally(result => {
|
||||
this.isLoading = false
|
||||
})
|
||||
},
|
||||
|
||||
/**
|
||||
* 新增记录
|
||||
*/
|
||||
handleAdd () {
|
||||
this.$refs.AddForm.add()
|
||||
},
|
||||
|
||||
/**
|
||||
* 编辑记录
|
||||
*/
|
||||
handleEdit (item) {
|
||||
this.$refs.EditForm.edit(item)
|
||||
},
|
||||
|
||||
/**
|
||||
* 删除记录
|
||||
*/
|
||||
handleDelete (item) {
|
||||
const self = this
|
||||
const modal = this.$confirm({
|
||||
title: '您确定要删除该记录吗?',
|
||||
content: '删除后不可恢复',
|
||||
onOk () {
|
||||
return Api.deleted({ categoryId: item['category_id'] })
|
||||
.then((result) => {
|
||||
self.$message.success(result.message, 1.5)
|
||||
self.handleRefresh()
|
||||
})
|
||||
.finally(result => {
|
||||
modal.destroy()
|
||||
})
|
||||
}
|
||||
})
|
||||
},
|
||||
|
||||
/**
|
||||
* 刷新列表
|
||||
* @param Boolean bool 强制刷新到第一页
|
||||
*/
|
||||
handleRefresh () {
|
||||
// 获取分类列表
|
||||
this.getCategoryList()
|
||||
}
|
||||
|
||||
}
|
||||
}
|
||||
</script>
|
||||
@@ -0,0 +1,113 @@
|
||||
<template>
|
||||
<a-modal
|
||||
title="编辑商品分类"
|
||||
:width="720"
|
||||
:visible="visible"
|
||||
:confirmLoading="confirmLoading"
|
||||
:maskClosable="false"
|
||||
@ok="handleSubmit"
|
||||
@cancel="handleCancel"
|
||||
>
|
||||
<a-spin :spinning="confirmLoading">
|
||||
<a-form :form="form">
|
||||
<a-form-item label="分类名称" :labelCol="labelCol" :wrapperCol="wrapperCol">
|
||||
<a-input
|
||||
v-decorator="['name', {rules: [{required: true, min: 2, message: '请输入至少2个字符'}]}]"
|
||||
/>
|
||||
</a-form-item>
|
||||
<a-form-item label="状态" :labelCol="labelCol" :wrapperCol="wrapperCol" extra="用户端是否展示">
|
||||
<a-radio-group v-decorator="['status', {initialValue: 1, rules: [{required: true}]}]">
|
||||
<a-radio :value="1">显示</a-radio>
|
||||
<a-radio :value="0">隐藏</a-radio>
|
||||
</a-radio-group>
|
||||
</a-form-item>
|
||||
<a-form-item label="排序" :labelCol="labelCol" :wrapperCol="wrapperCol" extra="数字越小越靠前">
|
||||
<a-input-number
|
||||
:min="0"
|
||||
v-decorator="['sort', {initialValue: 100, rules: [{required: true, message: '请输入至少1个数字'}]}]"
|
||||
/>
|
||||
</a-form-item>
|
||||
</a-form>
|
||||
</a-spin>
|
||||
</a-modal>
|
||||
</template>
|
||||
|
||||
<script>
|
||||
import * as Api from '@/api/content/article/category'
|
||||
|
||||
export default {
|
||||
data () {
|
||||
return {
|
||||
// 对话框标题
|
||||
title: '',
|
||||
// 标签布局属性
|
||||
labelCol: {
|
||||
span: 7
|
||||
},
|
||||
// 输入框布局属性
|
||||
wrapperCol: {
|
||||
span: 13
|
||||
},
|
||||
// modal(对话框)是否可见
|
||||
visible: false,
|
||||
// modal(对话框)确定按钮 loading
|
||||
confirmLoading: false,
|
||||
// 当前表单元素
|
||||
form: this.$form.createForm(this),
|
||||
}
|
||||
},
|
||||
methods: {
|
||||
|
||||
/**
|
||||
* 显示对话框
|
||||
*/
|
||||
add () {
|
||||
// 显示窗口
|
||||
this.visible = true
|
||||
},
|
||||
|
||||
/**
|
||||
* 确认按钮
|
||||
*/
|
||||
handleSubmit (e) {
|
||||
e.preventDefault()
|
||||
// 表单验证
|
||||
const { form: { validateFields } } = this
|
||||
validateFields((errors, values) => {
|
||||
// 提交到后端api
|
||||
if (!errors) {
|
||||
this.onFormSubmit(values)
|
||||
}
|
||||
})
|
||||
},
|
||||
|
||||
/**
|
||||
* 关闭对话框事件
|
||||
*/
|
||||
handleCancel () {
|
||||
this.visible = false
|
||||
this.form.resetFields()
|
||||
},
|
||||
|
||||
/**
|
||||
* 提交到后端api
|
||||
*/
|
||||
onFormSubmit (values) {
|
||||
this.confirmLoading = true
|
||||
Api.add({ form: values })
|
||||
.then((result) => {
|
||||
// 显示成功
|
||||
this.$message.success(result.message, 1.5)
|
||||
// 关闭对话框事件
|
||||
this.handleCancel()
|
||||
// 通知父端组件提交完成了
|
||||
this.$emit('handleSubmit', values)
|
||||
})
|
||||
.finally((result) => {
|
||||
this.confirmLoading = false
|
||||
})
|
||||
}
|
||||
|
||||
}
|
||||
}
|
||||
</script>
|
||||
@@ -0,0 +1,130 @@
|
||||
<template>
|
||||
<a-modal
|
||||
title="编辑商品分类"
|
||||
:width="720"
|
||||
:visible="visible"
|
||||
:confirmLoading="confirmLoading"
|
||||
:maskClosable="false"
|
||||
:destroyOnClose="true"
|
||||
@ok="handleSubmit"
|
||||
@cancel="handleCancel"
|
||||
>
|
||||
<a-spin :spinning="confirmLoading">
|
||||
<a-form :form="form">
|
||||
<a-form-item label="分类名称" :labelCol="labelCol" :wrapperCol="wrapperCol">
|
||||
<a-input
|
||||
v-decorator="['name', {rules: [{required: true, min: 2, message: '请输入至少2个字符'}]}]"
|
||||
/>
|
||||
</a-form-item>
|
||||
<a-form-item label="状态" :labelCol="labelCol" :wrapperCol="wrapperCol" extra="用户端是否展示">
|
||||
<a-radio-group v-decorator="['status', {initialValue: 1, rules: [{required: true}]}]">
|
||||
<a-radio :value="1">显示</a-radio>
|
||||
<a-radio :value="0">隐藏</a-radio>
|
||||
</a-radio-group>
|
||||
</a-form-item>
|
||||
<a-form-item label="排序" :labelCol="labelCol" :wrapperCol="wrapperCol" extra="数字越小越靠前">
|
||||
<a-input-number
|
||||
:min="0"
|
||||
v-decorator="['sort', {initialValue: 100, rules: [{required: true, message: '请输入至少1个数字'}]}]"
|
||||
/>
|
||||
</a-form-item>
|
||||
</a-form>
|
||||
</a-spin>
|
||||
</a-modal>
|
||||
</template>
|
||||
|
||||
<script>
|
||||
import pick from 'lodash.pick'
|
||||
import * as Api from '@/api/content/article/category'
|
||||
|
||||
export default {
|
||||
data () {
|
||||
return {
|
||||
// 对话框标题
|
||||
title: '',
|
||||
// 标签布局属性
|
||||
labelCol: {
|
||||
span: 7
|
||||
},
|
||||
// 输入框布局属性
|
||||
wrapperCol: {
|
||||
span: 13
|
||||
},
|
||||
// modal(对话框)是否可见
|
||||
visible: false,
|
||||
// modal(对话框)确定按钮 loading
|
||||
confirmLoading: false,
|
||||
// 当前表单元素
|
||||
form: this.$form.createForm(this),
|
||||
// 当前记录
|
||||
record: {}
|
||||
}
|
||||
},
|
||||
methods: {
|
||||
|
||||
/**
|
||||
* 显示对话框
|
||||
*/
|
||||
edit (record) {
|
||||
// 显示窗口
|
||||
this.visible = true
|
||||
// 当前分类记录
|
||||
this.record = record
|
||||
// 设置默认值
|
||||
this.setFieldsValue()
|
||||
},
|
||||
|
||||
/**
|
||||
* 设置默认值
|
||||
*/
|
||||
setFieldsValue () {
|
||||
const { $nextTick, form: { setFieldsValue } } = this
|
||||
$nextTick(() => {
|
||||
setFieldsValue(pick(this.record, ['name', 'status', 'sort']))
|
||||
})
|
||||
},
|
||||
|
||||
/**
|
||||
* 确认按钮
|
||||
*/
|
||||
handleSubmit (e) {
|
||||
e.preventDefault()
|
||||
// 表单验证
|
||||
const { form: { validateFields } } = this
|
||||
validateFields((errors, values) => {
|
||||
// 提交到后端api
|
||||
if (!errors) {
|
||||
this.onFormSubmit(values)
|
||||
}
|
||||
})
|
||||
},
|
||||
|
||||
/**
|
||||
* 关闭对话框事件
|
||||
*/
|
||||
handleCancel () {
|
||||
this.visible = false
|
||||
this.form.resetFields()
|
||||
},
|
||||
|
||||
/**
|
||||
* 提交到后端api
|
||||
*/
|
||||
onFormSubmit (values) {
|
||||
this.confirmLoading = true
|
||||
Api.edit({ categoryId: this.record['category_id'], form: values })
|
||||
.then((result) => {
|
||||
// 显示成功
|
||||
this.$message.success(result.message, 1.5)
|
||||
// 关闭对话框事件
|
||||
this.handleCancel()
|
||||
// 通知父端组件提交完成了
|
||||
this.$emit('handleSubmit', values)
|
||||
})
|
||||
.finally((result) => {
|
||||
this.confirmLoading = false
|
||||
})
|
||||
}
|
||||
}
|
||||
}
|
||||
</script>
|
||||
@@ -0,0 +1,162 @@
|
||||
<template>
|
||||
<a-modal
|
||||
:title="title"
|
||||
:width="780"
|
||||
:visible="visible"
|
||||
:confirmLoading="confirmLoading"
|
||||
:maskClosable="false"
|
||||
:destroyOnClose="true"
|
||||
@ok="handleSubmit"
|
||||
@cancel="handleCancel"
|
||||
>
|
||||
<a-spin :spinning="confirmLoading">
|
||||
<a-form :form="form">
|
||||
<a-form-item label="文章标题" :labelCol="labelCol" :wrapperCol="wrapperCol">
|
||||
<a-input
|
||||
v-decorator="['title', {rules: [{required: true, min: 2, message: '请输入至少2个字符'}]}]"
|
||||
/>
|
||||
</a-form-item>
|
||||
<a-form-item label="文章分类" :labelCol="labelCol" :wrapperCol="wrapperCol">
|
||||
<a-select
|
||||
v-decorator="['category_id', {rules: [{required: true, message: '请选择1个文章分类'}]}]"
|
||||
>
|
||||
<a-select-option
|
||||
v-for="(item, index) in categoryList"
|
||||
:key="index"
|
||||
:value="item.category_id"
|
||||
>{{ item.name }}</a-select-option>
|
||||
</a-select>
|
||||
</a-form-item>
|
||||
<a-form-item label="列表显示方式" :labelCol="labelCol" :wrapperCol="wrapperCol">
|
||||
<a-radio-group v-decorator="['show_type', {initialValue: 10, rules: [{required: true}]}]">
|
||||
<a-radio :value="10">小图模式</a-radio>
|
||||
<a-radio :value="20">大图模式</a-radio>
|
||||
</a-radio-group>
|
||||
<div class="form-item-help">
|
||||
<p class="extra">小图模式建议封面图尺寸：300 * 188</p>
|
||||
<p class="extra">大图模式建议封面图尺寸：750 * 455</p>
|
||||
</div>
|
||||
</a-form-item>
|
||||
<a-form-item label="封面图" :labelCol="labelCol" :wrapperCol="wrapperCol">
|
||||
<SelectImage
|
||||
v-decorator="['image_id', {rules: [{required: true, message: '请选择1个封面图'}]}]"
|
||||
/>
|
||||
</a-form-item>
|
||||
<a-form-item label="文章内容" :labelCol="labelCol" :wrapperCol="wrapperCol">
|
||||
<Ueditor v-decorator="['content', {rules: [{required: true, message: '文章内容不能为空'}]}]" />
|
||||
</a-form-item>
|
||||
<a-form-item
|
||||
label="虚拟阅读量"
|
||||
:labelCol="labelCol"
|
||||
:wrapperCol="wrapperCol"
|
||||
extra="用户看到的阅读量 = 实际阅读量 + 虚拟阅读量"
|
||||
>
|
||||
<a-input-number :min="0" v-decorator="['virtual_views', {initialValue: 100}]" />
|
||||
</a-form-item>
|
||||
<a-form-item label="状态" :labelCol="labelCol" :wrapperCol="wrapperCol" extra="用户端是否展示">
|
||||
<a-radio-group v-decorator="['status', {initialValue: 1, rules: [{required: true}]}]">
|
||||
<a-radio :value="1">显示</a-radio>
|
||||
<a-radio :value="0">隐藏</a-radio>
|
||||
</a-radio-group>
|
||||
</a-form-item>
|
||||
<a-form-item label="排序" :labelCol="labelCol" :wrapperCol="wrapperCol" extra="数字越小越靠前">
|
||||
<a-input-number
|
||||
:min="0"
|
||||
v-decorator="['sort', {initialValue: 100, rules: [{required: true, message: '请输入至少1个数字'}]}]"
|
||||
/>
|
||||
</a-form-item>
|
||||
</a-form>
|
||||
</a-spin>
|
||||
</a-modal>
|
||||
</template>
|
||||
|
||||
<script>
|
||||
import pick from 'lodash.pick'
|
||||
import * as Api from '@/api/content/article'
|
||||
import { SelectImage, Ueditor } from '@/components'
|
||||
|
||||
export default {
|
||||
components: {
|
||||
SelectImage,
|
||||
Ueditor
|
||||
},
|
||||
props: {
|
||||
// 分类列表
|
||||
categoryList: {
|
||||
type: Array,
|
||||
required: true
|
||||
}
|
||||
},
|
||||
data () {
|
||||
return {
|
||||
// 对话框标题
|
||||
title: '新增文章',
|
||||
// 标签布局属性
|
||||
labelCol: {
|
||||
span: 7
|
||||
},
|
||||
// 输入框布局属性
|
||||
wrapperCol: {
|
||||
span: 13
|
||||
},
|
||||
// modal(对话框)是否可见
|
||||
visible: false,
|
||||
// modal(对话框)确定按钮 loading
|
||||
confirmLoading: false,
|
||||
// 当前表单元素
|
||||
form: this.$form.createForm(this)
|
||||
}
|
||||
},
|
||||
methods: {
|
||||
|
||||
/**
|
||||
* 显示对话框
|
||||
*/
|
||||
add () {
|
||||
// 显示窗口
|
||||
this.visible = true
|
||||
},
|
||||
|
||||
/**
|
||||
* 确认按钮
|
||||
*/
|
||||
handleSubmit (e) {
|
||||
e.preventDefault()
|
||||
// 表单验证
|
||||
const { form: { validateFields } } = this
|
||||
validateFields((errors, values) => {
|
||||
// 提交到后端api
|
||||
!errors && this.onFormSubmit(values)
|
||||
})
|
||||
},
|
||||
|
||||
/**
|
||||
* 关闭对话框事件
|
||||
*/
|
||||
handleCancel () {
|
||||
this.visible = false
|
||||
this.form.resetFields()
|
||||
},
|
||||
|
||||
/**
|
||||
* 提交到后端api
|
||||
*/
|
||||
onFormSubmit (values) {
|
||||
this.confirmLoading = true
|
||||
Api.add({ form: values })
|
||||
.then((result) => {
|
||||
// 显示成功
|
||||
this.$message.success(result.message, 1.5)
|
||||
// 关闭对话框事件
|
||||
this.handleCancel()
|
||||
// 通知父端组件提交完成了
|
||||
this.$emit('handleSubmit', values)
|
||||
})
|
||||
.finally((result) => {
|
||||
this.confirmLoading = false
|
||||
})
|
||||
}
|
||||
|
||||
}
|
||||
}
|
||||
</script>
|
||||
@@ -0,0 +1,200 @@
|
||||
<template>
|
||||
<a-modal
|
||||
:title="title"
|
||||
:width="780"
|
||||
:visible="visible"
|
||||
:confirmLoading="confirmLoading"
|
||||
:maskClosable="false"
|
||||
:destroyOnClose="true"
|
||||
@ok="handleSubmit"
|
||||
@cancel="handleCancel"
|
||||
>
|
||||
<a-spin :spinning="confirmLoading">
|
||||
<a-form :form="form">
|
||||
<a-form-item label="文章标题" :labelCol="labelCol" :wrapperCol="wrapperCol">
|
||||
<a-input
|
||||
v-decorator="['title', {rules: [{required: true, min: 2, message: '请输入至少2个字符'}]}]"
|
||||
/>
|
||||
</a-form-item>
|
||||
<a-form-item label="文章分类" :labelCol="labelCol" :wrapperCol="wrapperCol">
|
||||
<a-select
|
||||
v-decorator="['category_id', {rules: [{required: true, message: '请选择1个文章分类'}]}]"
|
||||
>
|
||||
<a-select-option
|
||||
v-for="(item, index) in categoryList"
|
||||
:key="index"
|
||||
:value="item.category_id"
|
||||
>{{ item.name }}</a-select-option>
|
||||
</a-select>
|
||||
</a-form-item>
|
||||
<a-form-item label="列表显示方式" :labelCol="labelCol" :wrapperCol="wrapperCol">
|
||||
<a-radio-group v-decorator="['show_type', {initialValue: 10, rules: [{required: true}]}]">
|
||||
<a-radio :value="10">小图模式</a-radio>
|
||||
<a-radio :value="20">大图模式</a-radio>
|
||||
</a-radio-group>
|
||||
<div class="form-item-help">
|
||||
<p class="extra">小图模式建议封面图尺寸：300 * 188</p>
|
||||
<p class="extra">大图模式建议封面图尺寸：750 * 455</p>
|
||||
</div>
|
||||
</a-form-item>
|
||||
<a-form-item label="封面图" :labelCol="labelCol" :wrapperCol="wrapperCol">
|
||||
<SelectImage
|
||||
:defaultList="record.image ? [record.image] : []"
|
||||
v-decorator="['image_id', { rules: [{ required: true, message: '请选择1个封面图' }] }]"
|
||||
/>
|
||||
</a-form-item>
|
||||
<a-form-item label="文章内容" :labelCol="labelCol" :wrapperCol="wrapperCol">
|
||||
<Ueditor v-decorator="['content', { rules: [{ required: true, message: '文章内容不能为空' }] }]" />
|
||||
</a-form-item>
|
||||
<a-form-item
|
||||
label="虚拟阅读量"
|
||||
:labelCol="labelCol"
|
||||
:wrapperCol="wrapperCol"
|
||||
extra="用户看到的阅读量 = 实际阅读量 + 虚拟阅读量"
|
||||
>
|
||||
<a-input-number :min="0" v-decorator="['virtual_views', {initialValue: 100}]" />
|
||||
</a-form-item>
|
||||
<a-form-item label="状态" :labelCol="labelCol" :wrapperCol="wrapperCol" extra="用户端是否展示">
|
||||
<a-radio-group v-decorator="['status', {initialValue: 1, rules: [{required: true}]}]">
|
||||
<a-radio :value="1">显示</a-radio>
|
||||
<a-radio :value="0">隐藏</a-radio>
|
||||
</a-radio-group>
|
||||
</a-form-item>
|
||||
<a-form-item label="排序" :labelCol="labelCol" :wrapperCol="wrapperCol" extra="数字越小越靠前">
|
||||
<a-input-number
|
||||
:min="0"
|
||||
v-decorator="['sort', {initialValue: 100, rules: [{required: true, message: '请输入至少1个数字'}]}]"
|
||||
/>
|
||||
</a-form-item>
|
||||
</a-form>
|
||||
</a-spin>
|
||||
</a-modal>
|
||||
</template>
|
||||
|
||||
<script>
|
||||
import pick from 'lodash.pick'
|
||||
import * as Api from '@/api/content/article'
|
||||
import { SelectImage, Ueditor } from '@/components'
|
||||
|
||||
export default {
|
||||
components: {
|
||||
SelectImage,
|
||||
Ueditor
|
||||
},
|
||||
props: {
|
||||
// 分类列表
|
||||
categoryList: {
|
||||
type: Array,
|
||||
required: true
|
||||
}
|
||||
},
|
||||
data () {
|
||||
return {
|
||||
// 对话框标题
|
||||
title: '编辑文章',
|
||||
// 标签布局属性
|
||||
labelCol: {
|
||||
span: 7
|
||||
},
|
||||
// 输入框布局属性
|
||||
wrapperCol: {
|
||||
span: 13
|
||||
},
|
||||
// modal(对话框)是否可见
|
||||
visible: false,
|
||||
// modal(对话框)确定按钮 loading
|
||||
confirmLoading: false,
|
||||
// 当前表单元素
|
||||
form: this.$form.createForm(this),
|
||||
|
||||
// 当前记录ID
|
||||
articleId: null,
|
||||
// 当前记录详情
|
||||
record: {}
|
||||
}
|
||||
},
|
||||
methods: {
|
||||
|
||||
/**
|
||||
* 显示对话框
|
||||
*/
|
||||
edit (articleId) {
|
||||
// 显示窗口
|
||||
this.visible = true
|
||||
// 当前记录ID
|
||||
this.articleId = articleId
|
||||
// 获取当前详情记录
|
||||
this.getDetail()
|
||||
},
|
||||
|
||||
// 获取当前详情记录
|
||||
getDetail () {
|
||||
this.confirmLoading = true
|
||||
Api.detail({ articleId: this.articleId })
|
||||
.then(result => {
|
||||
// 当前记录
|
||||
this.record = result.data.detail
|
||||
// 设置默认值
|
||||
this.setFieldsValue()
|
||||
})
|
||||
.finally((result) => {
|
||||
this.confirmLoading = false
|
||||
})
|
||||
},
|
||||
|
||||
/**
|
||||
* 设置默认值
|
||||
*/
|
||||
setFieldsValue () {
|
||||
const { form: { setFieldsValue } } = this
|
||||
this.$nextTick(() => {
|
||||
setFieldsValue(pick(this.record, [
|
||||
'title', 'show_type', 'category_id', 'image_id', 'content', 'sort', 'status', 'virtual_views'
|
||||
]))
|
||||
})
|
||||
},
|
||||
|
||||
/**
|
||||
* 确认按钮
|
||||
*/
|
||||
handleSubmit (e) {
|
||||
e.preventDefault()
|
||||
// 表单验证
|
||||
const { form: { validateFields } } = this
|
||||
validateFields((errors, values) => {
|
||||
// 提交到后端api
|
||||
!errors && this.onFormSubmit(values)
|
||||
})
|
||||
},
|
||||
|
||||
/**
|
||||
* 关闭对话框事件
|
||||
*/
|
||||
handleCancel () {
|
||||
this.visible = false
|
||||
this.record = {}
|
||||
this.form.resetFields()
|
||||
},
|
||||
|
||||
/**
|
||||
* 提交到后端api
|
||||
*/
|
||||
onFormSubmit (values) {
|
||||
this.confirmLoading = true
|
||||
Api.edit({ articleId: this.articleId, form: values })
|
||||
.then((result) => {
|
||||
// 显示成功
|
||||
this.$message.success(result.message, 1.5)
|
||||
// 关闭对话框事件
|
||||
this.handleCancel()
|
||||
// 通知父端组件提交完成了
|
||||
this.$emit('handleSubmit', values)
|
||||
})
|
||||
.finally((result) => {
|
||||
this.confirmLoading = false
|
||||
})
|
||||
}
|
||||
|
||||
}
|
||||
}
|
||||
</script>
|
||||
@@ -0,0 +1,366 @@
|
||||
<template>
|
||||
<a-card :bordered="false">
|
||||
<div class="card-title">{{ $route.meta.title }}</div>
|
||||
<div class="table-operator">
|
||||
<!-- 搜索板块 -->
|
||||
<a-row class="row-item-search">
|
||||
<a-form class="search-form" :form="searchForm" layout="inline" @submit="handleSearch">
|
||||
<a-form-item label="文件名称">
|
||||
<a-input v-decorator="['fileName']" placeholder="请输入文件名称" />
|
||||
</a-form-item>
|
||||
<a-form-item label="文件分组">
|
||||
<a-tree-select
|
||||
treeDefaultExpandAll
|
||||
allowClear
|
||||
:treeData="groupListTreeSelect"
|
||||
:dropdownStyle="{ maxHeight: '500px', overflow: 'auto' }"
|
||||
v-decorator="['groupId', { initialValue: -1 }]"
|
||||
></a-tree-select>
|
||||
</a-form-item>
|
||||
<a-form-item label="存储方式">
|
||||
<a-select v-decorator="['storage', { initialValue: '' }]">
|
||||
<a-select-option :value="''">全部</a-select-option>
|
||||
<a-select-option
|
||||
v-for="(item, index) in StorageEnum.data"
|
||||
:key="index"
|
||||
:value="item.value"
|
||||
>{{ item.name }}</a-select-option>
|
||||
</a-select>
|
||||
</a-form-item>
|
||||
<a-form-item label="上传来源">
|
||||
<a-select v-decorator="['channel', { initialValue: -1 }]">
|
||||
<a-select-option :value="-1">全部</a-select-option>
|
||||
<a-select-option
|
||||
v-for="(item, index) in ChannelEnum.data"
|
||||
:key="index"
|
||||
:value="item.value"
|
||||
>{{ item.name }}</a-select-option>
|
||||
</a-select>
|
||||
</a-form-item>
|
||||
<a-form-item class="search-btn">
|
||||
<a-button type="primary" icon="search" html-type="submit">搜索</a-button>
|
||||
</a-form-item>
|
||||
<a-form-item class="search-btn">
|
||||
<a-button @click="handleReset">重置</a-button>
|
||||
</a-form-item>
|
||||
</a-form>
|
||||
</a-row>
|
||||
<!-- 操作板块 -->
|
||||
<div class="row-item-tab clearfix">
|
||||
<div class="tab-list fl-l">
|
||||
<a-radio-group :defaultValue="queryParam.fileType" @change="handleTabs">
|
||||
<a-radio-button :value="-1">全部</a-radio-button>
|
||||
<a-radio-button
|
||||
v-for="(item, index) in FileTypeEnum.data"
|
||||
:key="index"
|
||||
:value="item.value"
|
||||
>{{ item.name }}</a-radio-button>
|
||||
</a-radio-group>
|
||||
</div>
|
||||
<div v-if="selectedRowKeys.length" class="button-group">
|
||||
<a-button-group>
|
||||
<a-button icon="swap" @click="handleBatchMove">移动</a-button>
|
||||
<a-button icon="delete" @click="handleBatchDelete">删除</a-button>
|
||||
</a-button-group>
|
||||
</div>
|
||||
</div>
|
||||
</div>
|
||||
<!-- 列表内容 -->
|
||||
<s-table
|
||||
ref="table"
|
||||
rowKey="file_id"
|
||||
:loading="isLoading"
|
||||
:columns="columns"
|
||||
:data="loadData"
|
||||
:rowSelection="rowSelection"
|
||||
:pageSize="15"
|
||||
:scroll="{ x: 1450 }"
|
||||
>
|
||||
<!-- 文件预览 -->
|
||||
<span slot="preview_url" slot-scope="text, item">
|
||||
<div class="preview-box">
|
||||
<a :href="item.external_url" target="_blank">
|
||||
<img :src="text" />
|
||||
</a>
|
||||
</div>
|
||||
</span>
|
||||
<!-- 存储方式 -->
|
||||
<span slot="storage" slot-scope="text">
|
||||
<a-tag>{{ StorageEnum[text].name }}</a-tag>
|
||||
</span>
|
||||
<!-- 文件类型 -->
|
||||
<span slot="file_type" slot-scope="text">
|
||||
<a-tag>{{ FileTypeEnum[text].name }}</a-tag>
|
||||
</span>
|
||||
<!-- 操作 -->
|
||||
<span slot="action" slot-scope="text, item">
|
||||
<a v-action:edit style="margin-right: 8px;" @click="handleEdit(item)">编辑</a>
|
||||
<a v-action:delete @click="handleDelete(item)">删除</a>
|
||||
</span>
|
||||
</s-table>
|
||||
<!-- 移动分组 -->
|
||||
<MoveGroupForm ref="MoveGroupForm" :groupList="groupListTree" @handleSubmit="handleRefresh" />
|
||||
<!-- 编辑记录 -->
|
||||
<EditForm ref="EditForm" :groupList="groupListTree" @handleSubmit="handleRefresh" />
|
||||
</a-card>
|
||||
</template>
|
||||
|
||||
<script>
|
||||
import * as Api from '@/api/files'
|
||||
import * as GroupApi from '@/api/files/group'
|
||||
import { STable } from '@/components'
|
||||
import MoveGroupForm from './modules/MoveGroupForm'
|
||||
import EditForm from './modules/EditForm'
|
||||
import FileTypeEnum from '@/common/enum/file/FileType'
|
||||
import StorageEnum from '@/common/enum/file/Storage'
|
||||
import ChannelEnum from '@/common/enum/file/Channel'
|
||||
|
||||
export default {
|
||||
name: 'Index',
|
||||
components: {
|
||||
STable,
|
||||
MoveGroupForm,
|
||||
EditForm
|
||||
},
|
||||
data () {
|
||||
return {
|
||||
// 枚举数据
|
||||
FileTypeEnum,
|
||||
StorageEnum,
|
||||
ChannelEnum,
|
||||
// 当前表单元素
|
||||
searchForm: this.$form.createForm(this),
|
||||
// 查询参数
|
||||
queryParam: { fileType: -1 },
|
||||
// 正在加载
|
||||
isLoading: false,
|
||||
// 表头
|
||||
columns: [
|
||||
{
|
||||
title: '文件ID',
|
||||
dataIndex: 'file_id'
|
||||
},
|
||||
{
|
||||
title: '文件预览',
|
||||
dataIndex: 'preview_url',
|
||||
scopedSlots: { customRender: 'preview_url' }
|
||||
},
|
||||
{
|
||||
title: '文件名称',
|
||||
width: '302px',
|
||||
dataIndex: 'file_name'
|
||||
},
|
||||
{
|
||||
title: '存储方式',
|
||||
dataIndex: 'storage',
|
||||
scopedSlots: { customRender: 'storage' }
|
||||
},
|
||||
{
|
||||
title: '文件类型',
|
||||
dataIndex: 'file_type',
|
||||
scopedSlots: { customRender: 'file_type' }
|
||||
},
|
||||
{
|
||||
title: '文件大小(字节)',
|
||||
dataIndex: 'file_size'
|
||||
},
|
||||
{
|
||||
title: '文件后缀',
|
||||
dataIndex: 'file_ext'
|
||||
},
|
||||
{
|
||||
title: '上传时间',
|
||||
width: '180px',
|
||||
dataIndex: 'create_time'
|
||||
},
|
||||
{
|
||||
title: '操作',
|
||||
dataIndex: 'action',
|
||||
width: '150px',
|
||||
fixed: 'right',
|
||||
scopedSlots: { customRender: 'action' }
|
||||
}
|
||||
],
|
||||
selectedRowKeys: [],
|
||||
// 加载数据方法 必须为 Promise 对象
|
||||
loadData: param => {
|
||||
return Api.list({ ...param, ...this.queryParam })
|
||||
.then(response => {
|
||||
return response.data.list
|
||||
})
|
||||
},
|
||||
// 文件分组列表(树状结构)
|
||||
groupListTree: [],
|
||||
// 文件分组列表(用于筛选组件)
|
||||
groupListTreeSelect: []
|
||||
}
|
||||
},
|
||||
created () {
|
||||
// 获取分组列表
|
||||
this.getGroupList()
|
||||
},
|
||||
computed: {
|
||||
rowSelection () {
|
||||
return {
|
||||
selectedRowKeys: this.selectedRowKeys,
|
||||
onChange: this.onSelectChange
|
||||
}
|
||||
}
|
||||
},
|
||||
methods: {
|
||||
|
||||
/**
|
||||
* 选中项发生变化时的回调
|
||||
*/
|
||||
onSelectChange (selectedRowKeys) {
|
||||
this.selectedRowKeys = selectedRowKeys
|
||||
},
|
||||
|
||||
// 切换tab
|
||||
handleTabs (e) {
|
||||
this.queryParam.fileType = e.target.value
|
||||
this.handleRefresh()
|
||||
},
|
||||
|
||||
// 确认搜索
|
||||
handleSearch (e) {
|
||||
e.preventDefault()
|
||||
this.searchForm.validateFields((error, values) => {
|
||||
if (!error) {
|
||||
this.queryParam = { ...this.queryParam, ...values }
|
||||
this.handleRefresh()
|
||||
}
|
||||
})
|
||||
},
|
||||
|
||||
// 重置搜索表单
|
||||
handleReset () {
|
||||
this.selectedRowKeys = []
|
||||
this.searchForm.resetFields()
|
||||
},
|
||||
|
||||
/**
|
||||
* 获取分组列表
|
||||
*/
|
||||
getGroupList () {
|
||||
this.isLoading = true
|
||||
GroupApi.list().then(result => {
|
||||
const { list } = result.data
|
||||
// 格式化分组列表
|
||||
const groupListTree = this.formatTreeData(list)
|
||||
// 记录到data
|
||||
this.groupListTree = groupListTree
|
||||
this.groupListTreeSelect = [{
|
||||
title: '全部',
|
||||
key: -1,
|
||||
value: -1
|
||||
}, {
|
||||
title: '未分组',
|
||||
key: 0,
|
||||
value: 0
|
||||
}].concat(groupListTree)
|
||||
})
|
||||
.finally(result => {
|
||||
this.isLoading = false
|
||||
})
|
||||
},
|
||||
|
||||
/**
|
||||
* 格式化分组列表
|
||||
*/
|
||||
formatTreeData (list) {
|
||||
const data = []
|
||||
list.forEach(item => {
|
||||
// 新的元素
|
||||
const netItem = {
|
||||
title: item.name,
|
||||
key: item.group_id,
|
||||
value: item.group_id
|
||||
}
|
||||
// 递归整理子集
|
||||
if (item.children && item.children.length) {
|
||||
netItem['children'] = this.formatTreeData(item['children'])
|
||||
}
|
||||
data.push(netItem)
|
||||
})
|
||||
return data
|
||||
},
|
||||
|
||||
/**
|
||||
* 编辑记录
|
||||
*/
|
||||
handleEdit (item) {
|
||||
this.$refs.EditForm.edit(item)
|
||||
},
|
||||
|
||||
/**
|
||||
* 删除记录
|
||||
*/
|
||||
handleDelete (item) {
|
||||
this.onDelete([item['file_id']])
|
||||
},
|
||||
|
||||
// 批量删除
|
||||
handleBatchDelete () {
|
||||
this.onDelete(this.selectedRowKeys)
|
||||
},
|
||||
|
||||
/**
|
||||
* 执行删除
|
||||
*/
|
||||
onDelete (fileIds) {
|
||||
const that = this
|
||||
const modal = this.$confirm({
|
||||
title: '您确定要删除该文件吗?',
|
||||
content: '删除后不可恢复，请谨慎操作',
|
||||
onOk () {
|
||||
return Api.deleted({ fileIds })
|
||||
.then(result => {
|
||||
that.$message.success(result.message, 1.5)
|
||||
that.handleRefresh()
|
||||
})
|
||||
.catch(() => true)
|
||||
.finally(result => modal.destroy())
|
||||
}
|
||||
})
|
||||
},
|
||||
|
||||
/**
|
||||
* 批量移动文件
|
||||
*/
|
||||
handleBatchMove () {
|
||||
this.$refs.MoveGroupForm.show(this.selectedRowKeys)
|
||||
},
|
||||
|
||||
/**
|
||||
* 刷新列表
|
||||
* @param Boolean bool 强制刷新到第一页
|
||||
*/
|
||||
handleRefresh (bool = true) {
|
||||
this.selectedRowKeys = []
|
||||
this.$refs.table.refresh(bool)
|
||||
}
|
||||
|
||||
}
|
||||
}
|
||||
</script>
|
||||
<style lang="less" scoped>
|
||||
.ant-card-body {
|
||||
padding: 22px 29px 25px;
|
||||
}
|
||||
// 筛选tab
|
||||
.tab-list {
|
||||
margin-right: 20px;
|
||||
}
|
||||
// 预览图
|
||||
.preview-box {
|
||||
width: 120px;
|
||||
height: 80px;
|
||||
line-height: 80px;
|
||||
img {
|
||||
display: block;
|
||||
max-width: 100%;
|
||||
max-height: 100%;
|
||||
}
|
||||
}
|
||||
</style>
|
||||
@@ -0,0 +1,141 @@
|
||||
<template>
|
||||
<a-card :bordered="false">
|
||||
<div class="card-title">{{ $route.meta.title }}</div>
|
||||
<div class="table-operator">
|
||||
<a-button v-action:add type="primary" icon="plus" @click="handleAdd">新增</a-button>
|
||||
</div>
|
||||
<a-table
|
||||
v-if="!isLoading"
|
||||
rowKey="group_id"
|
||||
:columns="columns"
|
||||
:dataSource="groupList"
|
||||
:defaultExpandAllRows="true"
|
||||
:expandIconColumnIndex="1"
|
||||
:pagination="false"
|
||||
:loading="isLoading"
|
||||
>
|
||||
<span slot="action" slot-scope="text, item">
|
||||
<a v-action:edit style="margin-right: 8px;" @click="handleEdit(item)">编辑</a>
|
||||
<a v-action:delete @click="handleDelete(item)">删除</a>
|
||||
</span>
|
||||
</a-table>
|
||||
<AddForm ref="AddForm" :groupList="groupList" @handleSubmit="handleRefresh" />
|
||||
<EditForm ref="EditForm" :groupList="groupList" @handleSubmit="handleRefresh" />
|
||||
</a-card>
|
||||
</template>
|
||||
|
||||
<script>
|
||||
import * as Api from '@/api/files/group'
|
||||
import { STable } from '@/components'
|
||||
import AddForm from './modules/AddForm'
|
||||
import EditForm from './modules/EditForm'
|
||||
|
||||
export default {
|
||||
name: 'Index',
|
||||
components: {
|
||||
STable,
|
||||
AddForm,
|
||||
EditForm
|
||||
},
|
||||
data () {
|
||||
return {
|
||||
// 分组列表
|
||||
groupList: [],
|
||||
// 查询参数
|
||||
queryParam: {},
|
||||
// 正在加载
|
||||
isLoading: false,
|
||||
// 表头
|
||||
columns: [
|
||||
{
|
||||
title: '分组ID',
|
||||
dataIndex: 'group_id'
|
||||
},
|
||||
{
|
||||
title: '分组名称',
|
||||
dataIndex: 'name'
|
||||
},
|
||||
{
|
||||
title: '排序',
|
||||
dataIndex: 'sort'
|
||||
},
|
||||
{
|
||||
title: '添加时间',
|
||||
dataIndex: 'create_time'
|
||||
},
|
||||
{
|
||||
title: '操作',
|
||||
dataIndex: 'action',
|
||||
width: '180px',
|
||||
scopedSlots: { customRender: 'action' }
|
||||
}
|
||||
]
|
||||
}
|
||||
},
|
||||
created () {
|
||||
// 获取分组列表
|
||||
this.getGroupList()
|
||||
},
|
||||
methods: {
|
||||
|
||||
/**
|
||||
* 获取分组列表
|
||||
*/
|
||||
getGroupList () {
|
||||
this.isLoading = true
|
||||
Api.list()
|
||||
.then(result => {
|
||||
this.groupList = result.data.list
|
||||
})
|
||||
.finally(result => {
|
||||
this.isLoading = false
|
||||
})
|
||||
},
|
||||
|
||||
/**
|
||||
* 新增记录
|
||||
*/
|
||||
handleAdd () {
|
||||
this.$refs.AddForm.add()
|
||||
},
|
||||
|
||||
/**
|
||||
* 编辑记录
|
||||
*/
|
||||
handleEdit (item) {
|
||||
this.$refs.EditForm.edit(item)
|
||||
},
|
||||
|
||||
/**
|
||||
* 删除记录
|
||||
*/
|
||||
handleDelete (item) {
|
||||
const self = this
|
||||
const modal = this.$confirm({
|
||||
title: '您确定要删除该记录吗?',
|
||||
content: '删除后不可恢复',
|
||||
onOk () {
|
||||
return Api.deleted({ groupId: item['group_id'] })
|
||||
.then((result) => {
|
||||
self.$message.success(result.message, 1.5)
|
||||
self.handleRefresh()
|
||||
})
|
||||
.finally(result => {
|
||||
modal.destroy()
|
||||
})
|
||||
}
|
||||
})
|
||||
},
|
||||
|
||||
/**
|
||||
* 刷新列表
|
||||
* @param Boolean bool 强制刷新到第一页
|
||||
*/
|
||||
handleRefresh () {
|
||||
// 获取分组列表
|
||||
this.getGroupList()
|
||||
}
|
||||
|
||||
}
|
||||
}
|
||||
</script>
|
||||
@@ -0,0 +1,161 @@
|
||||
<template>
|
||||
<a-modal
|
||||
title="新增文件分组"
|
||||
:width="720"
|
||||
:visible="visible"
|
||||
:confirmLoading="confirmLoading"
|
||||
:maskClosable="false"
|
||||
@ok="handleSubmit"
|
||||
@cancel="handleCancel"
|
||||
>
|
||||
<a-spin :spinning="confirmLoading">
|
||||
<a-form :form="form">
|
||||
<a-form-item label="分组名称" :labelCol="labelCol" :wrapperCol="wrapperCol">
|
||||
<a-input
|
||||
v-decorator="['name', {rules: [{required: true, min: 2, message: '请输入至少2个字符'}]}]"
|
||||
/>
|
||||
</a-form-item>
|
||||
<a-form-item label="上级分组" :labelCol="labelCol" :wrapperCol="wrapperCol">
|
||||
<a-tree-select
|
||||
:treeData="groupListTree"
|
||||
:dropdownStyle="{ maxHeight: '400px', overflow: 'auto' }"
|
||||
allowClear
|
||||
v-decorator="['parent_id', {initialValue: 0}]"
|
||||
></a-tree-select>
|
||||
</a-form-item>
|
||||
<a-form-item label="排序" :labelCol="labelCol" :wrapperCol="wrapperCol" extra="数字越小越靠前">
|
||||
<a-input-number
|
||||
:min="0"
|
||||
v-decorator="['sort', {initialValue: 100, rules: [{required: true, message: '请输入至少1个数字'}]}]"
|
||||
/>
|
||||
</a-form-item>
|
||||
</a-form>
|
||||
</a-spin>
|
||||
</a-modal>
|
||||
</template>
|
||||
|
||||
<script>
|
||||
import * as Api from '@/api/files/group'
|
||||
|
||||
export default {
|
||||
props: {
|
||||
// 分组列表
|
||||
groupList: {
|
||||
type: Array,
|
||||
required: true
|
||||
}
|
||||
},
|
||||
data () {
|
||||
return {
|
||||
// 对话框标题
|
||||
title: '',
|
||||
// 标签布局属性
|
||||
labelCol: {
|
||||
span: 7
|
||||
},
|
||||
// 输入框布局属性
|
||||
wrapperCol: {
|
||||
span: 13
|
||||
},
|
||||
// modal(对话框)是否可见
|
||||
visible: false,
|
||||
// modal(对话框)确定按钮 loading
|
||||
confirmLoading: false,
|
||||
// 当前表单元素
|
||||
form: this.$form.createForm(this),
|
||||
|
||||
// 上级分组列表
|
||||
groupListTree: []
|
||||
}
|
||||
},
|
||||
methods: {
|
||||
|
||||
/**
|
||||
* 显示对话框
|
||||
*/
|
||||
add () {
|
||||
// 显示窗口
|
||||
this.visible = true
|
||||
// 获取分组列表
|
||||
this.getGroupList()
|
||||
},
|
||||
|
||||
/**
|
||||
* 获取分组列表
|
||||
*/
|
||||
getGroupList () {
|
||||
const { groupList } = this
|
||||
// 格式化分组列表
|
||||
this.groupListTree = [{
|
||||
title: '顶级分组',
|
||||
key: 0,
|
||||
value: 0
|
||||
}].concat(this.formatTreeData(groupList))
|
||||
},
|
||||
|
||||
/**
|
||||
* 格式化分组列表
|
||||
*/
|
||||
formatTreeData (list, disabled = false) {
|
||||
const data = []
|
||||
list.forEach(item => {
|
||||
// 新的元素
|
||||
const netItem = {
|
||||
title: item.name,
|
||||
key: item.group_id,
|
||||
value: item.group_id
|
||||
}
|
||||
// 递归整理子集
|
||||
if (item.children && item.children.length) {
|
||||
netItem['children'] = this.formatTreeData(item['children'], netItem.disabled)
|
||||
}
|
||||
data.push(netItem)
|
||||
})
|
||||
return data
|
||||
},
|
||||
|
||||
/**
|
||||
* 确认按钮
|
||||
*/
|
||||
handleSubmit (e) {
|
||||
e.preventDefault()
|
||||
// 表单验证
|
||||
const { form: { validateFields } } = this
|
||||
validateFields((errors, values) => {
|
||||
// 提交到后端api
|
||||
if (!errors) {
|
||||
this.onFormSubmit(values)
|
||||
}
|
||||
})
|
||||
},
|
||||
|
||||
/**
|
||||
* 关闭对话框事件
|
||||
*/
|
||||
handleCancel () {
|
||||
this.visible = false
|
||||
this.form.resetFields()
|
||||
},
|
||||
|
||||
/**
|
||||
* 提交到后端api
|
||||
*/
|
||||
onFormSubmit (values) {
|
||||
this.confirmLoading = true
|
||||
Api.add({ form: values })
|
||||
.then((result) => {
|
||||
// 显示成功
|
||||
this.$message.success(result.message, 1.5)
|
||||
// 关闭对话框事件
|
||||
this.handleCancel()
|
||||
// 通知父端组件提交完成了
|
||||
this.$emit('handleSubmit', values)
|
||||
})
|
||||
.finally((result) => {
|
||||
this.confirmLoading = false
|
||||
})
|
||||
}
|
||||
|
||||
}
|
||||
}
|
||||
</script>
|
||||
@@ -0,0 +1,188 @@
|
||||
<template>
|
||||
<a-modal
|
||||
title="编辑文件分组"
|
||||
:width="720"
|
||||
:visible="visible"
|
||||
:confirmLoading="confirmLoading"
|
||||
:maskClosable="false"
|
||||
@ok="handleSubmit"
|
||||
@cancel="handleCancel"
|
||||
>
|
||||
<a-spin :spinning="confirmLoading">
|
||||
<a-form :form="form">
|
||||
<a-form-item label="分组名称" :labelCol="labelCol" :wrapperCol="wrapperCol">
|
||||
<a-input
|
||||
v-decorator="['name', {rules: [{required: true, min: 2, message: '请输入至少2个字符'}]}]"
|
||||
/>
|
||||
</a-form-item>
|
||||
<a-form-item label="上级分组" :labelCol="labelCol" :wrapperCol="wrapperCol">
|
||||
<a-tree-select
|
||||
:treeData="groupListTree"
|
||||
:dropdownStyle="{ maxHeight: '400px', overflow: 'auto' }"
|
||||
allowClear
|
||||
v-decorator="['parent_id']"
|
||||
></a-tree-select>
|
||||
</a-form-item>
|
||||
<a-form-item label="排序" :labelCol="labelCol" :wrapperCol="wrapperCol" extra="数字越小越靠前">
|
||||
<a-input-number
|
||||
:min="0"
|
||||
v-decorator="['sort', {initialValue: 100, rules: [{required: true, message: '请输入至少1个数字'}]}]"
|
||||
/>
|
||||
</a-form-item>
|
||||
</a-form>
|
||||
</a-spin>
|
||||
</a-modal>
|
||||
</template>
|
||||
|
||||
<script>
|
||||
import * as Api from '@/api/files/group'
|
||||
import _ from 'lodash'
|
||||
|
||||
export default {
|
||||
props: {
|
||||
// 分组列表
|
||||
groupList: {
|
||||
type: Array,
|
||||
required: true
|
||||
}
|
||||
},
|
||||
data () {
|
||||
return {
|
||||
// 对话框标题
|
||||
title: '',
|
||||
// 标签布局属性
|
||||
labelCol: {
|
||||
span: 7
|
||||
},
|
||||
// 输入框布局属性
|
||||
wrapperCol: {
|
||||
span: 13
|
||||
},
|
||||
// modal(对话框)是否可见
|
||||
visible: false,
|
||||
// modal(对话框)确定按钮 loading
|
||||
confirmLoading: false,
|
||||
// 当前表单元素
|
||||
form: this.$form.createForm(this),
|
||||
|
||||
// 当前记录
|
||||
record: {},
|
||||
// 上级分组列表
|
||||
groupListTree: []
|
||||
}
|
||||
},
|
||||
methods: {
|
||||
|
||||
/**
|
||||
* 显示对话框
|
||||
*/
|
||||
edit (record) {
|
||||
// 显示窗口
|
||||
this.visible = true
|
||||
// 当前分组记录
|
||||
this.record = record
|
||||
// 获取分组列表
|
||||
this.getGroupList()
|
||||
// 设置默认值
|
||||
this.setFieldsValue()
|
||||
},
|
||||
|
||||
/**
|
||||
* 设置默认值
|
||||
*/
|
||||
setFieldsValue () {
|
||||
const { $nextTick, form: { setFieldsValue } } = this
|
||||
$nextTick(() => {
|
||||
setFieldsValue(_.pick(this.record, ['name', 'parent_id', 'sort']))
|
||||
})
|
||||
},
|
||||
|
||||
/**
|
||||
* 获取分组列表
|
||||
*/
|
||||
getGroupList () {
|
||||
const { groupList } = this
|
||||
// 格式化分组列表
|
||||
const selectList = this.formatTreeData(groupList)
|
||||
// 顶级分组
|
||||
selectList.unshift({
|
||||
title: '顶级分组',
|
||||
key: 0,
|
||||
value: 0
|
||||
})
|
||||
this.groupListTree = selectList
|
||||
},
|
||||
|
||||
/**
|
||||
* 格式化分组列表
|
||||
*/
|
||||
formatTreeData (list, disabled = false) {
|
||||
const data = []
|
||||
list.forEach(item => {
|
||||
// 新的元素
|
||||
const netItem = {
|
||||
title: item.name,
|
||||
key: item.group_id,
|
||||
value: item.group_id
|
||||
}
|
||||
// 禁用的分组
|
||||
if (
|
||||
[item.group_id, item.parent_id].includes(this.record.group_id) ||
|
||||
disabled === true
|
||||
) {
|
||||
netItem.disabled = true
|
||||
}
|
||||
// 递归整理子集
|
||||
if (item.children && item.children.length) {
|
||||
netItem['children'] = this.formatTreeData(item['children'], netItem.disabled)
|
||||
}
|
||||
data.push(netItem)
|
||||
})
|
||||
return data
|
||||
},
|
||||
|
||||
/**
|
||||
* 确认按钮
|
||||
*/
|
||||
handleSubmit (e) {
|
||||
e.preventDefault()
|
||||
// 表单验证
|
||||
const { form: { validateFields } } = this
|
||||
validateFields((errors, values) => {
|
||||
// 提交到后端api
|
||||
if (!errors) {
|
||||
this.onFormSubmit(values)
|
||||
}
|
||||
})
|
||||
},
|
||||
|
||||
/**
|
||||
* 关闭对话框事件
|
||||
*/
|
||||
handleCancel () {
|
||||
this.visible = false
|
||||
this.form.resetFields()
|
||||
},
|
||||
|
||||
/**
|
||||
* 提交到后端api
|
||||
*/
|
||||
onFormSubmit (values) {
|
||||
this.confirmLoading = true
|
||||
Api.edit({ groupId: this.record['group_id'], form: values })
|
||||
.then((result) => {
|
||||
// 显示成功
|
||||
this.$message.success(result.message, 1.5)
|
||||
// 关闭对话框事件
|
||||
this.handleCancel()
|
||||
// 通知父端组件提交完成了
|
||||
this.$emit('handleSubmit', values)
|
||||
})
|
||||
.finally((result) => {
|
||||
this.confirmLoading = false
|
||||
})
|
||||
}
|
||||
|
||||
}
|
||||
}
|
||||
</script>
|
||||
@@ -0,0 +1,152 @@
|
||||
<template>
|
||||
<a-modal
|
||||
title="编辑文件"
|
||||
:width="720"
|
||||
:visible="visible"
|
||||
:confirmLoading="confirmLoading"
|
||||
:maskClosable="false"
|
||||
@ok="handleSubmit"
|
||||
@cancel="handleCancel"
|
||||
>
|
||||
<a-spin :spinning="confirmLoading">
|
||||
<a-form :form="form">
|
||||
<a-form-item label="文件名称" :labelCol="labelCol" :wrapperCol="wrapperCol">
|
||||
<a-input
|
||||
v-decorator="['file_name', {rules: [{required: true, min: 2, message: '请输入至少2个字符'}]}]"
|
||||
/>
|
||||
</a-form-item>
|
||||
<a-form-item label="上级分组" :labelCol="labelCol" :wrapperCol="wrapperCol">
|
||||
<a-tree-select
|
||||
:treeData="groupTreeData"
|
||||
:dropdownStyle="{ maxHeight: '400px', overflow: 'auto' }"
|
||||
allowClear
|
||||
v-decorator="['group_id']"
|
||||
></a-tree-select>
|
||||
</a-form-item>
|
||||
</a-form>
|
||||
</a-spin>
|
||||
</a-modal>
|
||||
</template>
|
||||
|
||||
<script>
|
||||
import * as Api from '@/api/files'
|
||||
import _ from 'lodash'
|
||||
|
||||
export default {
|
||||
props: {
|
||||
// 分组列表
|
||||
groupList: {
|
||||
type: Array,
|
||||
required: true
|
||||
}
|
||||
},
|
||||
data () {
|
||||
return {
|
||||
// 对话框标题
|
||||
title: '',
|
||||
// 标签布局属性
|
||||
labelCol: {
|
||||
span: 7
|
||||
},
|
||||
// 输入框布局属性
|
||||
wrapperCol: {
|
||||
span: 13
|
||||
},
|
||||
// modal(对话框)是否可见
|
||||
visible: false,
|
||||
// modal(对话框)确定按钮 loading
|
||||
confirmLoading: false,
|
||||
// 当前表单元素
|
||||
form: this.$form.createForm(this),
|
||||
|
||||
// 当前记录
|
||||
record: {},
|
||||
// 分组列表 树状结构
|
||||
groupTreeData: []
|
||||
}
|
||||
},
|
||||
methods: {
|
||||
|
||||
/**
|
||||
* 显示对话框
|
||||
*/
|
||||
edit (record) {
|
||||
// 显示窗口
|
||||
this.visible = true
|
||||
// 当前分组记录
|
||||
this.record = record
|
||||
// 获取分组列表
|
||||
this.getGroupList()
|
||||
// 设置默认值
|
||||
this.setFieldsValue()
|
||||
},
|
||||
|
||||
/**
|
||||
* 设置默认值
|
||||
*/
|
||||
setFieldsValue () {
|
||||
const { $nextTick, form: { setFieldsValue } } = this
|
||||
$nextTick(() => {
|
||||
setFieldsValue(_.pick(this.record, ['file_name', 'group_id']))
|
||||
})
|
||||
},
|
||||
|
||||
/**
|
||||
* 获取分组列表
|
||||
*/
|
||||
getGroupList () {
|
||||
if (this.groupTreeData.length <= 0) {
|
||||
this.groupTreeData = [{
|
||||
title: '未分组',
|
||||
key: 0,
|
||||
value: 0
|
||||
}].concat(this.groupList)
|
||||
}
|
||||
},
|
||||
|
||||
/**
|
||||
* 确认按钮
|
||||
*/
|
||||
handleSubmit (e) {
|
||||
e.preventDefault()
|
||||
// 表单验证
|
||||
const { form: { validateFields } } = this
|
||||
validateFields((errors, values) => {
|
||||
// 提交到后端api
|
||||
if (!errors) {
|
||||
values.status = values.status ? 1 : 0
|
||||
this.onFormSubmit(values)
|
||||
}
|
||||
})
|
||||
},
|
||||
|
||||
/**
|
||||
* 关闭对话框事件
|
||||
*/
|
||||
handleCancel () {
|
||||
this.visible = false
|
||||
this.form.resetFields()
|
||||
},
|
||||
|
||||
/**
|
||||
* 提交到后端api
|
||||
*/
|
||||
onFormSubmit (values) {
|
||||
this.confirmLoading = true
|
||||
Api.edit({ fileId: this.record['file_id'], form: values })
|
||||
.then((result) => {
|
||||
// 显示成功
|
||||
this.$message.success(result.message, 1.5)
|
||||
// 关闭对话框事件
|
||||
this.handleCancel()
|
||||
// 通知父端组件提交完成了
|
||||
this.$emit('handleSubmit', values)
|
||||
})
|
||||
.finally((result) => {
|
||||
this.confirmLoading = false
|
||||
})
|
||||
}
|
||||
|
||||
}
|
||||
}
|
||||
</script>
|
||||
@@ -0,0 +1,136 @@
|
||||
<template>
|
||||
<a-modal
|
||||
:title="title"
|
||||
:width="420"
|
||||
:visible="visible"
|
||||
:confirmLoading="confirmLoading"
|
||||
:maskClosable="false"
|
||||
@ok="handleSubmit"
|
||||
@cancel="handleCancel"
|
||||
>
|
||||
<a-spin :spinning="confirmLoading">
|
||||
<a-tree
|
||||
v-if="groupTreeData.length"
|
||||
:selectable="true"
|
||||
:blockNode="true"
|
||||
:treeData="groupTreeData"
|
||||
:autoExpandParent="true"
|
||||
@select="onSelect"
|
||||
/>
|
||||
</a-spin>
|
||||
</a-modal>
|
||||
</template>
|
||||
|
||||
<script>
|
||||
import * as Api from '@/api/files'
|
||||
|
||||
export default {
|
||||
props: {
|
||||
// 分组列表
|
||||
groupList: {
|
||||
type: Array,
|
||||
required: true
|
||||
}
|
||||
},
|
||||
data () {
|
||||
return {
|
||||
// 对话框标题
|
||||
title: '移动到分组',
|
||||
// 标签布局属性
|
||||
labelCol: {
|
||||
xs: { span: 24 },
|
||||
sm: { span: 7 }
|
||||
},
|
||||
// 输入框布局属性
|
||||
wrapperCol: {
|
||||
xs: { span: 24 },
|
||||
sm: { span: 13 }
|
||||
},
|
||||
// modal(对话框)是否可见
|
||||
visible: false,
|
||||
// modal(对话框)确定按钮 loading
|
||||
confirmLoading: false,
|
||||
// 当前表单
|
||||
form: this.$form.createForm(this),
|
||||
|
||||
// 文件ID集
|
||||
filesIds: {},
|
||||
// 分组列表 树状结构
|
||||
groupTreeData: [],
|
||||
// 选中的分组
|
||||
selectedKeys: []
|
||||
}
|
||||
},
|
||||
|
||||
methods: {
|
||||
|
||||
/**
|
||||
* 新增操作权限
|
||||
*/
|
||||
show (filesIds) {
|
||||
// 显示窗口
|
||||
this.visible = true
|
||||
this.filesIds = filesIds
|
||||
// 获取分组列表
|
||||
this.getList()
|
||||
},
|
||||
|
||||
// 获取分组列表
|
||||
getList () {
|
||||
if (this.groupTreeData.length <= 0) {
|
||||
this.groupTreeData = [{
|
||||
title: '未分组',
|
||||
key: 0,
|
||||
value: 0
|
||||
}].concat(this.groupList)
|
||||
}
|
||||
},
|
||||
|
||||
// 记录选中项
|
||||
onSelect (selectedKeys) {
|
||||
this.selectedKeys = selectedKeys
|
||||
},
|
||||
|
||||
// 确认按钮
|
||||
handleSubmit (e) {
|
||||
e.preventDefault()
|
||||
if (this.selectedKeys.length) {
|
||||
// 提交到后端api
|
||||
this.onFormSubmit()
|
||||
} else {
|
||||
// 关闭对话框
|
||||
this.handleCancel()
|
||||
}
|
||||
},
|
||||
|
||||
/**
|
||||
* 取消按钮
|
||||
*/
|
||||
handleCancel () {
|
||||
this.visible = false
|
||||
this.form.resetFields()
|
||||
},
|
||||
|
||||
/**
|
||||
* 提交到后端api
|
||||
*/
|
||||
onFormSubmit () {
|
||||
this.confirmLoading = true
|
||||
// 数据提交
|
||||
Api.moveGroup({ groupId: this.selectedKeys[0], fileIds: this.filesIds })
|
||||
.then(result => {
|
||||
// 显示成功
|
||||
this.$message.success(result.message)
|
||||
// 关闭对话框
|
||||
this.handleCancel()
|
||||
// 通知父端组件提交完成了
|
||||
this.$emit('handleSubmit')
|
||||
})
|
||||
.finally(() => {
|
||||
this.confirmLoading = false
|
||||
})
|
||||
}
|
||||
|
||||
}
|
||||
}
|
||||
</script>
|
||||
@@ -0,0 +1,144 @@
|
||||
<template>
|
||||
<a-card :bordered="false">
|
||||
<div class="card-title">{{ $route.meta.title }}</div>
|
||||
<div class="table-operator">
|
||||
<a-button v-action:add type="primary" icon="plus" @click="handleAdd">新增</a-button>
|
||||
</div>
|
||||
<s-table
|
||||
ref="table"
|
||||
rowKey="help_id"
|
||||
:loading="isLoading"
|
||||
:columns="columns"
|
||||
:data="loadData"
|
||||
:pageSize="15"
|
||||
>
|
||||
<!-- 内容 -->
|
||||
<span slot="content" slot-scope="text">
|
||||
<p class="twoline-hide" style="width: 420px;">{{ text }}</p>
|
||||
</span>
|
||||
<!-- 操作 -->
|
||||
<span slot="action" slot-scope="text, item">
|
||||
<a v-action:edit style="margin-right: 8px;" @click="handleEdit(item)">编辑</a>
|
||||
<a v-action:delete @click="handleDelete(item)">删除</a>
|
||||
</span>
|
||||
</s-table>
|
||||
<AddForm ref="AddForm" @handleSubmit="handleRefresh" />
|
||||
<EditForm ref="EditForm" @handleSubmit="handleRefresh" />
|
||||
</a-card>
|
||||
</template>
|
||||
|
||||
<script>
|
||||
import * as Api from '@/api/content/help'
|
||||
import { STable } from '@/components'
|
||||
import { AddForm, EditForm } from './modules'
|
||||
|
||||
export default {
|
||||
name: 'Index',
|
||||
components: {
|
||||
STable,
|
||||
AddForm,
|
||||
EditForm
|
||||
},
|
||||
data () {
|
||||
return {
|
||||
// 查询参数
|
||||
queryParam: {},
|
||||
// 正在加载
|
||||
isLoading: false,
|
||||
// 表头
|
||||
columns: [
|
||||
{
|
||||
title: '帮助ID',
|
||||
dataIndex: 'help_id'
|
||||
},
|
||||
{
|
||||
title: '标题',
|
||||
dataIndex: 'title'
|
||||
},
|
||||
{
|
||||
title: '内容',
|
||||
dataIndex: 'content',
|
||||
scopedSlots: { customRender: 'content' }
|
||||
},
|
||||
{
|
||||
title: '排序',
|
||||
dataIndex: 'sort'
|
||||
},
|
||||
{
|
||||
title: '更新时间',
|
||||
dataIndex: 'update_time'
|
||||
},
|
||||
{
|
||||
title: '操作',
|
||||
dataIndex: 'action',
|
||||
width: '180px',
|
||||
scopedSlots: { customRender: 'action' }
|
||||
}
|
||||
],
|
||||
// 加载数据方法 必须为 Promise 对象
|
||||
loadData: param => {
|
||||
return Api.list({ ...param, ...this.queryParam })
|
||||
.then(response => {
|
||||
return response.data.list
|
||||
})
|
||||
}
|
||||
}
|
||||
},
|
||||
created () {
|
||||
|
||||
},
|
||||
methods: {
|
||||
|
||||
/**
|
||||
* 新增记录
|
||||
*/
|
||||
handleAdd () {
|
||||
this.$refs.AddForm.add()
|
||||
},
|
||||
|
||||
/**
|
||||
* 编辑记录
|
||||
*/
|
||||
handleEdit (item) {
|
||||
this.$refs.EditForm.edit(item)
|
||||
},
|
||||
|
||||
/**
|
||||
* 删除记录
|
||||
*/
|
||||
handleDelete (item) {
|
||||
const app = this
|
||||
const modal = this.$confirm({
|
||||
title: '您确定要删除该记录吗?',
|
||||
content: '删除后不可恢复',
|
||||
onOk () {
|
||||
return Api.deleted({ helpId: item.help_id })
|
||||
.then((result) => {
|
||||
app.$message.success(result.message, 1.5)
|
||||
app.handleRefresh()
|
||||
})
|
||||
.finally(result => {
|
||||
modal.destroy()
|
||||
})
|
||||
}
|
||||
})
|
||||
},
|
||||
|
||||
/**
|
||||
* 刷新列表
|
||||
* @param Boolean bool 强制刷新到第一页
|
||||
*/
|
||||
handleRefresh (bool = false) {
|
||||
this.$refs.table.refresh(bool)
|
||||
},
|
||||
|
||||
/**
|
||||
* 检索查询
|
||||
*/
|
||||
onSearch () {
|
||||
this.handleRefresh(true)
|
||||
}
|
||||
|
||||
}
|
||||
}
|
||||
</script>
|
||||
@@ -0,0 +1,110 @@
|
||||
<template>
|
||||
<a-modal
|
||||
:title="title"
|
||||
:width="720"
|
||||
:visible="visible"
|
||||
:confirmLoading="confirmLoading"
|
||||
:maskClosable="false"
|
||||
@ok="handleSubmit"
|
||||
@cancel="handleCancel"
|
||||
>
|
||||
<a-spin :spinning="confirmLoading">
|
||||
<a-form :form="form">
|
||||
<a-form-item label="帮助标题" :labelCol="labelCol" :wrapperCol="wrapperCol">
|
||||
<a-input v-decorator="['title', { rules: [{ required: true, message: '请输入联系人姓名' }] }]" />
|
||||
</a-form-item>
|
||||
<a-form-item label="帮助内容" :labelCol="labelCol" :wrapperCol="wrapperCol">
|
||||
<a-textarea
|
||||
:autoSize="{ minRows: 4 }"
|
||||
v-decorator="['content', { rules: [{ required: true, message: '请输入帮助内容' }] }]"
|
||||
/>
|
||||
</a-form-item>
|
||||
<a-form-item label="排序" :labelCol="labelCol" :wrapperCol="wrapperCol" extra="数字越小越靠前">
|
||||
<a-input-number
|
||||
:min="0"
|
||||
v-decorator="['sort', { initialValue: 100, rules: [{ required: true, message: '请输入排序值' }] }]"
|
||||
/>
|
||||
</a-form-item>
|
||||
</a-form>
|
||||
</a-spin>
|
||||
</a-modal>
|
||||
</template>
|
||||
|
||||
<script>
|
||||
import pick from 'lodash.pick'
|
||||
import * as Api from '@/api/content/help'
|
||||
import { SelectRegion } from '@/components'
|
||||
|
||||
export default {
|
||||
components: {
|
||||
SelectRegion
|
||||
},
|
||||
data () {
|
||||
return {
|
||||
// 对话框标题
|
||||
title: '编辑帮助',
|
||||
// 标签布局属性
|
||||
labelCol: { span: 7 },
|
||||
// 输入框布局属性
|
||||
wrapperCol: { span: 13 },
|
||||
// modal(对话框)是否可见
|
||||
visible: false,
|
||||
// modal(对话框)确定按钮 loading
|
||||
confirmLoading: false,
|
||||
// 当前表单元素
|
||||
form: this.$form.createForm(this)
|
||||
}
|
||||
},
|
||||
methods: {
|
||||
|
||||
/**
|
||||
* 显示对话框
|
||||
*/
|
||||
add () {
|
||||
// 显示窗口
|
||||
this.visible = true
|
||||
},
|
||||
|
||||
/**
|
||||
* 确认按钮
|
||||
*/
|
||||
handleSubmit (e) {
|
||||
e.preventDefault()
|
||||
// 表单验证
|
||||
const { form: { validateFields } } = this
|
||||
validateFields((errors, values) => {
|
||||
// 提交到后端api
|
||||
!errors && this.onFormSubmit(values)
|
||||
})
|
||||
},
|
||||
|
||||
/**
|
||||
* 关闭对话框事件
|
||||
*/
|
||||
handleCancel () {
|
||||
this.visible = false
|
||||
this.form.resetFields()
|
||||
},
|
||||
|
||||
/**
|
||||
* 提交到后端api
|
||||
*/
|
||||
onFormSubmit (values) {
|
||||
this.confirmLoading = true
|
||||
Api.add({ form: values })
|
||||
.then((result) => {
|
||||
// 显示成功
|
||||
this.$message.success(result.message, 1.5)
|
||||
// 关闭对话框事件
|
||||
this.handleCancel()
|
||||
// 通知父端组件提交完成了
|
||||
this.$emit('handleSubmit', values)
|
||||
})
|
||||
.finally(() => {
|
||||
this.confirmLoading = false
|
||||
})
|
||||
}
|
||||
|
||||
}
|
||||
}
|
||||
</script>
|
||||
@@ -0,0 +1,126 @@
|
||||
<template>
|
||||
<a-modal
|
||||
:title="title"
|
||||
:width="720"
|
||||
:visible="visible"
|
||||
:confirmLoading="confirmLoading"
|
||||
:maskClosable="false"
|
||||
@ok="handleSubmit"
|
||||
@cancel="handleCancel"
|
||||
>
|
||||
<a-spin :spinning="confirmLoading">
|
||||
<a-form :form="form">
|
||||
<a-form-item label="帮助标题" :labelCol="labelCol" :wrapperCol="wrapperCol">
|
||||
<a-input v-decorator="['title', { rules: [{ required: true, message: '请输入联系人姓名' }] }]" />
|
||||
</a-form-item>
|
||||
<a-form-item label="帮助内容" :labelCol="labelCol" :wrapperCol="wrapperCol">
|
||||
<a-textarea
|
||||
:autoSize="{ minRows: 4 }"
|
||||
v-decorator="['content', { rules: [{ required: true, message: '请输入帮助内容' }] }]"
|
||||
/>
|
||||
</a-form-item>
|
||||
<a-form-item label="排序" :labelCol="labelCol" :wrapperCol="wrapperCol" extra="数字越小越靠前">
|
||||
<a-input-number
|
||||
:min="0"
|
||||
v-decorator="['sort', { initialValue: 100, rules: [{ required: true, message: '请输入排序值' }] }]"
|
||||
/>
|
||||
</a-form-item>
|
||||
</a-form>
|
||||
</a-spin>
|
||||
</a-modal>
|
||||
</template>
|
||||
|
||||
<script>
|
||||
import pick from 'lodash.pick'
|
||||
import * as Api from '@/api/content/help'
|
||||
import { SelectRegion } from '@/components'
|
||||
|
||||
export default {
|
||||
components: {
|
||||
SelectRegion
|
||||
},
|
||||
data () {
|
||||
return {
|
||||
// 对话框标题
|
||||
title: '编辑帮助',
|
||||
// 标签布局属性
|
||||
labelCol: { span: 7 },
|
||||
// 输入框布局属性
|
||||
wrapperCol: { span: 13 },
|
||||
// modal(对话框)是否可见
|
||||
visible: false,
|
||||
// modal(对话框)确定按钮 loading
|
||||
confirmLoading: false,
|
||||
// 当前表单元素
|
||||
form: this.$form.createForm(this),
|
||||
// 当前记录
|
||||
record: {}
|
||||
}
|
||||
},
|
||||
methods: {
|
||||
|
||||
/**
|
||||
* 显示对话框
|
||||
*/
|
||||
edit (record) {
|
||||
// 显示窗口
|
||||
this.visible = true
|
||||
// 当前记录
|
||||
this.record = record
|
||||
// 设置默认值
|
||||
this.setFieldsValue()
|
||||
},
|
||||
|
||||
/**
|
||||
* 设置默认值
|
||||
*/
|
||||
setFieldsValue () {
|
||||
const { record, form: { setFieldsValue } } = this
|
||||
this.$nextTick(() => {
|
||||
setFieldsValue(pick(record, ['title', 'content', 'sort']))
|
||||
})
|
||||
},
|
||||
|
||||
/**
|
||||
* 确认按钮
|
||||
*/
|
||||
handleSubmit (e) {
|
||||
e.preventDefault()
|
||||
// 表单验证
|
||||
const { form: { validateFields } } = this
|
||||
validateFields((errors, values) => {
|
||||
// 提交到后端api
|
||||
!errors && this.onFormSubmit(values)
|
||||
})
|
||||
},
|
||||
|
||||
/**
|
||||
* 关闭对话框事件
|
||||
*/
|
||||
handleCancel () {
|
||||
this.visible = false
|
||||
this.form.resetFields()
|
||||
},
|
||||
|
||||
/**
|
||||
* 提交到后端api
|
||||
*/
|
||||
onFormSubmit (values) {
|
||||
this.confirmLoading = true
|
||||
Api.edit({ helpId: this.record.help_id, form: values })
|
||||
.then((result) => {
|
||||
// 显示成功
|
||||
this.$message.success(result.message, 1.5)
|
||||
// 关闭对话框事件
|
||||
this.handleCancel()
|
||||
// 通知父端组件提交完成了
|
||||
this.$emit('handleSubmit', values)
|
||||
})
|
||||
.finally(() => {
|
||||
this.confirmLoading = false
|
||||
})
|
||||
}
|
||||
|
||||
}
|
||||
}
|
||||
</script>
|
||||
@@ -0,0 +1,4 @@
|
||||
import AddForm from './AddForm'
|
||||
import EditForm from './EditForm'
|
||||
|
||||
export { AddForm, EditForm }
|
||||
Reference in New Issue
Block a user