Commit 6a564166 by hanjixin

模板列表, 标签列表

parent 56658a22
......@@ -2,7 +2,8 @@
ENV = 'development'
# base api
VUE_APP_BASE_API = '/dev-api'
VUE_APP_BASE_API = 'http://47.95.238.195:8092'
VUE_APP_BASE_API_MOCK = '/dev-api'
# vue-cli uses the VUE_CLI_BABEL_TRANSPILE_MODULES environment variable,
# to control whether the babel-plugin-dynamic-import-node plugin is enabled.
......
......@@ -6,7 +6,7 @@ import request from '@/utils/request'
* @param {*} typeMenuOrder
* 新增类型
*/
export function typeAdd(typeMenuName: '', typeMenuOrder: 0) {
export function typeAdd(typeMenuName = '', typeMenuOrder = 0) {
return request({
url: '/type/add/info',
method: 'post',
......@@ -22,7 +22,7 @@ export function typeAdd(typeMenuName: '', typeMenuOrder: 0) {
* @param {*} typeId
* 新增标签
*/
export function typeAddTag(tagName: '', typeId: '') {
export function typeAddTag(tagName = '', typeId = '') {
return request({
url: '/type/add/tag/info',
method: 'post',
......@@ -39,9 +39,8 @@ export function typeAddTag(tagName: '', typeId: '') {
*/
export function typeDelTag(tagId) {
return request({
url: '/type/del/tag',
method: 'get',
params: { tagId }
url: '/type/del/tag/' + tagId,
method: 'get'
})
}
/**
......@@ -51,9 +50,8 @@ export function typeDelTag(tagId) {
*/
export function typeDel(typeId) {
return request({
url: '/type/del',
method: 'get',
params: { typeId }
url: '/type/del/' + typeId,
method: 'get'
})
}
/**
......@@ -63,9 +61,8 @@ export function typeDel(typeId) {
*/
export function getTypeDetail(typeId) {
return request({
url: '/type/get/details/info',
method: 'get',
params: { typeId }
url: '/type/get/details/info/' + typeId,
method: 'get'
})
}
/**
......@@ -74,7 +71,7 @@ export function getTypeDetail(typeId) {
* @param {*} c
* 获取模板类型列表信息(分页)
*/
export function getTypeList(p: 1, c: 20) {
export function getTypeList(p = 1, c = 20) {
return request({
url: '/type/get/list',
method: 'get',
......@@ -88,7 +85,7 @@ export function getTypeList(p: 1, c: 20) {
* @param {*} c
* 获取当前类型下标签列表信息(分页)
*/
export function getTypeTagList(typeId: '', p : 1, c:20) {
export function getTypeTagList(typeId = '', p = 1, c = 20) {
return request({
url: '/type/get/tag/list',
method: 'post',
......
import request from '@/utils/request'
import request from '@/utils/requestMock.js'
export function fetchList(query) {
return request({
......
import request from '@/utils/request'
import request from '@/utils/requestMock.js'
export function searchUser(name) {
return request({
......
import request from '@/utils/request'
import request from '@/utils/requestMock'
export function getRoutes() {
return request({
......
import request from '@/utils/request'
import request from '@/utils/requestMock.js'
export function login(data) {
return request({
......
......@@ -19,6 +19,13 @@ const templatesRouter = {
meta: { title: '模板类型' }
},
{
path: 'type/detail',
component: () => import('@/views/template/template-type-detail'),
name: 'TemplateTypeDeatil',
hidden: true,
meta: { title: '模板类型详情', hidden: true }
},
{
path: 'list',
component: () => import('@/views/template/template-list'),
name: 'TemplateList',
......
......@@ -44,9 +44,9 @@ service.interceptors.response.use(
*/
response => {
const res = response.data
console.log(res.code, res.code !== 'undefined', String(res.code))
// if the custom code is not 20000, it is judged as an error.
if (res.code !== 20000) {
if (res.code !== '0' && res.code) {
Message({
message: res.message || ' response Error',
type: 'error',
......@@ -68,6 +68,7 @@ service.interceptors.response.use(
}
return Promise.reject(new Error(res.message || 'Error'))
} else {
console.log('succ')
return res
}
},
......
import axios from 'axios'
import { MessageBox, Message } from 'element-ui'
import store from '@/store'
import { getToken } from '@/utils/auth'
// create an axios instance
const service = axios.create({
baseURL: process.env.VUE_APP_BASE_API_MOCK, // url = base url + request url
// withCredentials: true, // send cookies when cross-domain requests
timeout: 10000 // request timeout
})
// request interceptor
service.interceptors.request.use(
config => {
// do something before request is sent
if (store.getters.token) {
// let each request carry token
// ['X-Token'] is a custom headers key
// please modify it according to the actual situation
config.headers['X-Token'] = getToken()
}
return config
},
error => {
// do something with request error
console.log(error) // for debug
return Promise.reject(error)
}
)
// response interceptor
service.interceptors.response.use(
/**
* If you want to get http information such as headers or status
* Please return response => response
*/
/**
* Determine the request status by custom code
* Here is just an example
* You can also judge the status by HTTP Status Code
*/
response => {
const res = response.data
// if the custom code is not 20000, it is judged as an error.
if (res.code !== 20000) {
Message({
message: res.message || ' response Error',
type: 'error',
duration: 5 * 1000
})
// 50008: Illegal token; 50012: Other clients logged in; 50014: Token expired;
if (res.code === 50008 || res.code === 50012 || res.code === 50014) {
// to re-login
MessageBox.confirm('You have been logged out, you can cancel to stay on this page, or log in again', 'Confirm logout', {
confirmButtonText: 'Re-Login',
cancelButtonText: 'Cancel',
type: 'warning'
}).then(() => {
store.dispatch('user/resetToken').then(() => {
location.reload()
})
})
}
return Promise.reject(new Error(res.message || 'Error'))
} else {
return res
}
},
error => {
console.log('err' + error) // for debug
Message({
message: error.message,
type: 'error',
duration: 5 * 1000
})
return Promise.reject(error)
}
)
export default service
......@@ -101,7 +101,7 @@
<pagination v-show="total>0" :total="total" :page.sync="listQuery.page" :limit.sync="listQuery.limit" @pagination="getList" />
<el-dialog :title="textMap[dialogStatus]" :visible.sync="dialogFormVisible">
<el-form ref="dataForm" :rules="rules" :model="temp" label-position="left" label-width="70px" style="width: 400px; margin-left:50px;">
<el-form ref="dataForm" :rules="rules" :model="temp" label-position="left" label-width="100px" style="width: 400px; margin-left:50px;">
<el-form-item label="模板类型" prop="type">
<el-select v-model="temp.type" class="filter-item" placeholder="Please select">
<el-option v-for="item in calendarTypeOptions" :key="item.key" :label="item.display_name" :value="item.key" />
......
......@@ -27,25 +27,25 @@
<el-table-column
label="序号"
prop="id"
sortable="custom"
type="index"
align="center"
width="80"
:class-name="getSortClass('id')"
>
<template slot-scope="scope">
<span>{{ scope.row.id }}</span>
</template>
<!-- <template slot-scope="scope">
<span>{{ scope.index }}</span>
</template> -->
</el-table-column>
<el-table-column
label="模板类型名称"
width="150px"
width="auto"
align="center"
>
<template slot-scope="scope">
<span>{{ scope.row.timestamp | parseTime('{y}-{m}-{d} {h}:{i}') }}</span>
<span>{{ scope.row.typeName }}</span>
</template>
</el-table-column>
<el-table-column
<!-- <el-table-column
label="标签数量"
min-width="150px"
>
......@@ -56,7 +56,7 @@
>{{ row.title }}</span>
<el-tag>{{ row.type | typeFilter }}</el-tag>
</template>
</el-table-column>
</el-table-column> -->
<el-table-column
label="状态"
class-name="status-col"
......@@ -64,14 +64,14 @@
>
<template slot-scope="{row}">
<el-tag :type="row.status | statusFilter">
{{ row.status }}
{{ row.typeMenuType }}
</el-tag>
</template>
</el-table-column>
<el-table-column
label="操作"
align="center"
width="230"
width="auto"
class-name="small-padding fixed-width"
>
<template slot-scope="{row}">
......@@ -123,16 +123,16 @@
style="width: 400px; margin-left:50px;"
>
<el-form-item
label="序号"
prop="type"
label="排序序号"
prop="typeMenuOrder"
>
<el-input v-model="temp.type" />
<el-input v-model="temp.typeMenuOrder" />
</el-form-item>
<el-form-item
label="名称"
prop="title"
prop="typeMenuName"
>
<el-input v-model="temp.title" />
<el-input v-model="temp.typeMenuName" />
</el-form-item>
</el-form>
<div
......@@ -185,12 +185,8 @@
</template>
<script>
import {
fetchList,
fetchPv,
createArticle,
updateArticle
} from '@/api/article'
import { fetchPv, updateArticle } from '@/api/article'
import { getTypeList, typeAdd, typeDel } from '@/api/menu'
import waves from '@/directive/waves' // waves directive
import Pagination from '@/components/Pagination' // secondary package based on el-pagination
......@@ -238,34 +234,27 @@ export default {
type: undefined,
sort: '+id'
},
importanceOptions: [1, 2, 3],
calendarTypeOptions,
sortOptions: [
{ label: 'ID Ascending', key: '+id' },
{ label: 'ID Descending', key: '-id' }
],
statusOptions: ['published', 'draft', 'deleted'],
showReviewer: false,
temp: {
id: undefined,
importance: 1,
remark: '',
timestamp: new Date(),
title: '',
type: '',
status: 'published'
typeMenuOrde: 0,
typeMenuName: ''
},
dialogFormVisible: false,
dialogStatus: '',
textMap: {
update: 'Edit',
update: '编辑',
create: '创建'
},
dialogPvVisible: false,
pvData: [],
rules: {
type: [
{ required: true, message: 'type is required', trigger: 'change' }
typeMenuName: [
{
required: true,
message: 'typeMenuName is required',
trigger: 'change'
}
],
timestamp: [
{
......@@ -275,11 +264,14 @@ export default {
trigger: 'change'
}
],
title: [
{ required: true, message: 'title is required', trigger: 'blur' }
typeMenuOrder: [
{
required: true,
message: 'typeMenuOrder is required',
trigger: 'blur'
}
]
},
downloadLoading: false
}
}
},
created() {
......@@ -288,15 +280,20 @@ export default {
methods: {
getList() {
this.listLoading = true
fetchList(this.listQuery).then(response => {
this.list = response.data.items
this.total = response.data.total
getTypeList(this.listQuery.page, this.listQuery.limit)
.then(response => {
this.list = response.list
this.total = response.count
// Just to simulate the time of the request
setTimeout(() => {
// Just to simulate the time of the request
setTimeout(() => {
this.listLoading = false
}, 1.5 * 1000)
})
.catch(() => {
console.log('cathch')
this.listLoading = false
}, 1.5 * 1000)
})
})
},
handleFilter() {
this.listQuery.page = 1
......@@ -325,13 +322,8 @@ export default {
},
resetTemp() {
this.temp = {
id: undefined,
importance: 1,
remark: '',
timestamp: new Date(),
title: '',
status: 'published',
type: ''
typeMenuName: '',
typeMenuOrder: 0
}
},
handleCreate() {
......@@ -345,10 +337,8 @@ export default {
createData() {
this.$refs['dataForm'].validate(valid => {
if (valid) {
this.temp.id = parseInt(Math.random() * 100) + 1024 // mock a id
this.temp.author = 'vue-element-admin'
createArticle(this.temp).then(() => {
this.list.unshift(this.temp)
typeAdd(this.temp.typeMenuName, this.temp.typeMenuOrder).then(() => {
this.getList()
this.dialogFormVisible = false
this.$notify({
title: 'Success',
......@@ -361,12 +351,11 @@ export default {
})
},
handleUpdate(row) {
this.temp = Object.assign({}, row) // copy obj
this.temp.timestamp = new Date(this.temp.timestamp)
this.dialogStatus = 'update'
this.dialogFormVisible = true
this.$nextTick(() => {
this.$refs['dataForm'].clearValidate()
this.$router.push({
name: 'TemplateTypeDeatil',
query: {
typeId: row.typeId
}
})
},
handleProhibit(row) {
......@@ -383,8 +372,7 @@ export default {
message: '已禁用!'
})
})
.catch(() => {
})
.catch(() => {})
},
updateData() {
this.$refs['dataForm'].validate(valid => {
......@@ -417,11 +405,12 @@ export default {
type: 'warning'
})
.then(() => {
const index = this.list.indexOf(row)
this.list.splice(index, 1)
this.$message({
type: 'success',
message: '删除成功!'
typeDel(row.typeId).then(() => {
this.$message({
type: 'success',
message: '删除成功!'
})
this.getList()
})
})
.catch(() => {
......
......@@ -39,11 +39,11 @@ module.exports = {
proxy: {
// change xxx-api/login => mock/login
// detail: https://cli.vuejs.org/config/#devserver-proxy
[process.env.VUE_APP_BASE_API]: {
[process.env.VUE_APP_BASE_API_MOCK]: {
target: `http://127.0.0.1:${port}/mock`,
changeOrigin: true,
pathRewrite: {
['^' + process.env.VUE_APP_BASE_API]: ''
['^' + process.env.VUE_APP_BASE_API_MOCK]: ''
}
}
},
......
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 sign in to comment