Skip to content

Navigation Menu

Sign in
Appearance settings

Search code, repositories, users, issues, pull requests...

Provide feedback

We read every piece of feedback, and take your input very seriously.

Saved searches

Use saved searches to filter your results more quickly
Sign up
Appearance settings

Commit ccf326f

Browse files
专栏和问题页面的基本搭建
1 parent 70cb38d commit ccf326f

File tree

6 files changed

+491
-29
lines changed

6 files changed

+491
-29
lines changed
Lines changed: 4 additions & 4 deletions
Original file line numberDiff line numberDiff line change
@@ -1,13 +1,13 @@
11
<template>
2-
<div />
2+
<div>
3+
1
4+
</div>
35
</template>
46

57
<script>
68
export default {
7-
89
}
910
</script>
1011

11-
<style scoped>
12-
12+
<style lang="scss" scoped>
1313
</style>
Lines changed: 4 additions & 4 deletions
Original file line numberDiff line numberDiff line change
@@ -1,13 +1,13 @@
11
<template>
2-
<div />
2+
<div>
3+
1
4+
</div>
35
</template>
46

57
<script>
68
export default {
7-
89
}
910
</script>
1011

11-
<style scoped>
12-
12+
<style lang="scss" scoped>
1313
</style>

‎src/views/opsCenter/blogMan/index.vue‎

Lines changed: 0 additions & 13 deletions
This file was deleted.
Lines changed: 240 additions & 0 deletions
Original file line numberDiff line numberDiff line change
@@ -0,0 +1,240 @@
1+
<template>
2+
<div class="app-container">
3+
<!-- 条件栏 -->
4+
<page-filter
5+
:query.sync="filterInfo.query"
6+
:filter-list="filterInfo.list"
7+
:list-type-info="listTypeInfo"
8+
@handleClick="handleClick"
9+
@handleEvent="handleEvent"
10+
/>
11+
<!-- 表格 -->
12+
<page-table
13+
:refresh="tableInfo.refresh"
14+
:init-curpage="tableInfo.initCurpage"
15+
:data.sync="tableInfo.data"
16+
:api="getListApi"
17+
:query="filterInfo.query"
18+
:field-list="tableInfo.fieldList"
19+
:list-type-info="listTypeInfo"
20+
:handle="tableInfo.handle"
21+
@handleClick="handleClick"
22+
@handleEvent="handleEvent"
23+
>
24+
<!-- 自定义插槽显示标题-->
25+
<template v-slot:col-title="scope">
26+
<el-tooltip class="item" effect="dark" content="查看文章详细信息" placement="left">
27+
<a style="color: red; padding: 0 20px;" @click="handleClick('view', scope.row)">{{ scope.row.title }}</a>
28+
</el-tooltip>
29+
</template>
30+
</page-table>
31+
<!-- 弹窗 -->
32+
<page-dialog
33+
:title="dialogInfo.title[dialogInfo.type]"
34+
:visible.sync="dialogInfo.visible"
35+
:width="dialogInfo.width"
36+
:bt-loading="dialogInfo.btLoading"
37+
:bt-list="dialogInfo.type === 'view' ? undefined : dialogInfo.btList"
38+
@handleClick="handleClick"
39+
@handleEvent="handleEvent"
40+
/>
41+
</div>
42+
</template>
43+
44+
<script>
45+
import { mapGetters } from 'vuex'
46+
import { getListApi, getRowApi, createApi, updateApi, deleteApi } from '@/api/opsCenter/columnMan'
47+
import PageFilter from '@/components/PageFilter'
48+
import PageTable from '@/components/PageTable'
49+
import PageDialog from '@/components/PageDialog'
50+
51+
export default {
52+
components: {
53+
PageFilter,
54+
PageTable,
55+
PageDialog
56+
},
57+
data () {
58+
return {
59+
getListApi,
60+
createApi,
61+
updateApi,
62+
deleteApi,
63+
// 相关列表
64+
listTypeInfo: {
65+
flagList: [
66+
{ key: '草稿', value: 1 },
67+
{ key: '审核中', value: 2 },
68+
{ key: '已发布', value: 3 },
69+
{ key: '审核失败', value: 4 },
70+
{ key: '封禁', value: 5 }
71+
],
72+
typeList: [
73+
{ key: '原创', value: 1 },
74+
{ key: '转载', value: 2 },
75+
{ key: '翻译', value: 3 }
76+
],
77+
statusList: [
78+
{ key: '启用', value: 1 },
79+
{ key: '停用', value: 0 }
80+
]
81+
},
82+
// 过滤相关配置
83+
filterInfo: {
84+
query: {
85+
title: '',
86+
type: '',
87+
flag: ''
88+
},
89+
list: [
90+
{ type: 'input', label: '专栏名称', value: 'name' },
91+
{ type: 'select', label: '状态', value: 'flag', list: 'flagList' },
92+
{ type: 'button', label: '搜索', btType: 'primary', icon: 'el-icon-search', event: 'search', show: true }
93+
]
94+
},
95+
// 表格相关
96+
tableInfo: {
97+
refresh: 1,
98+
initCurpage: 1,
99+
data: [],
100+
fieldList: [
101+
{ label: '专栏名称', value: 'name', minWidth: 180 },
102+
{ label: '专栏地址', value: 'url', minWidth: 180 },
103+
{ label: '状态', value: 'flag', width: 90, type: 'select', list: 'flagList' },
104+
{ label: '创建人', value: 'create_user_name' },
105+
{ label: '创建时间', value: 'create_time', width: 180 }
106+
// {label: '更新人', value: 'update_user_name'},
107+
// {label: '更新时间', value: 'update_time', minWidth: 180}
108+
],
109+
handle: {
110+
fixed: 'right',
111+
label: '操作',
112+
width: '100',
113+
btList: [
114+
// { label: '查看', type: 'primary', icon: 'el-icon-browse', event: 'view', show: true },
115+
{ label: '删除', type: 'danger', icon: 'el-icon-delete', event: 'delete', show: false, ifRender (row) {
116+
return row.flag === 1
117+
}
118+
}
119+
]
120+
}
121+
},
122+
// 文章相关
123+
articleInfo: {},
124+
// 弹窗相关
125+
dialogInfo: {
126+
width: '80%',
127+
title: {
128+
create: '添加',
129+
update: '编辑'
130+
},
131+
visible: false,
132+
type: '',
133+
btLoading: false,
134+
btList: [
135+
{ label: '关闭', type: '', icon: '', event: 'close', show: true },
136+
{ label: '保存', type: 'primary', icon: '', event: 'save', saveLoading: false, show: true }
137+
]
138+
}
139+
}
140+
},
141+
computed: {
142+
...mapGetters([
143+
'userInfo',
144+
'dataPerms'
145+
])
146+
},
147+
watch: {
148+
},
149+
mounted () {
150+
this.initList()
151+
this.initDataPerms()
152+
this.getList()
153+
},
154+
methods: {
155+
// 初始化数据权限
156+
initDataPerms () {
157+
const btList = this.tableInfo.handle.btList
158+
const btList1 = this.filterInfo.list
159+
this.$initDataPerms('articleMan', btList)
160+
this.$initDataPerms('articleMan', btList1)
161+
},
162+
initList () {
163+
},
164+
// 获取列表
165+
getList () {
166+
this.tableInfo.refresh = Math.random()
167+
},
168+
// 按钮点击
169+
handleClick (event, data) {
170+
const tableInfo = this.tableInfo
171+
const dialogInfo = this.dialogInfo
172+
switch (event) {
173+
// 搜索
174+
case 'search':
175+
// 重置分页
176+
tableInfo.initCurpage = Math.random()
177+
tableInfo.refresh = Math.random()
178+
break
179+
// 创建
180+
case 'create':
181+
dialogInfo.type = event
182+
dialogInfo.visible = true
183+
break
184+
// 查看和编辑
185+
case 'view':
186+
// falls through 告诉ESlint不检查这一行
187+
case 'update':
188+
dialogInfo.type = event
189+
dialogInfo.visible = true
190+
this.articleInfo = JSON.parse(JSON.stringify(data))
191+
getRowApi(data.id).then(res => {
192+
if (res.success) {
193+
this.articleInfo = res.content[0]
194+
}
195+
})
196+
break
197+
// 删除
198+
case 'delete':
199+
this.$handleAPI(event, deleteApi, data.id).then(res => {
200+
if (res.success) {
201+
tableInfo.refresh = Math.random()
202+
}
203+
})
204+
break
205+
// 弹窗点击关闭
206+
case 'close':
207+
dialogInfo.visible = false
208+
break
209+
}
210+
},
211+
// 触发事件
212+
handleEvent (event, data) {
213+
switch (event) {
214+
// 对表格获取到的数据做处理
215+
case 'list':
216+
if (!data) return
217+
data.forEach(item => {
218+
this.$set(item, 'statusLoading', false)
219+
item.create_time = this.$fn.switchTime(item.create_time, 'YYYY-MM-DD hh:mm:ss')
220+
item.update_time = this.$fn.switchTime(item.update_time, 'YYYY-MM-DD hh:mm:ss')
221+
})
222+
break
223+
}
224+
}
225+
}
226+
}
227+
</script>
228+
229+
<style lang="scss" scoped>
230+
a{
231+
cursor: pointer;
232+
}
233+
.title{
234+
text-align: center;
235+
font-size: 30px;
236+
font-weight: bold;
237+
margin-bottom: 40px;
238+
color: black;
239+
}
240+
</style>
Lines changed: 4 additions & 4 deletions
Original file line numberDiff line numberDiff line change
@@ -1,13 +1,13 @@
11
<template>
2-
<div />
2+
<div>
3+
1
4+
</div>
35
</template>
46

57
<script>
68
export default {
7-
89
}
910
</script>
1011

11-
<style scoped>
12-
12+
<style lang="scss" scoped>
1313
</style>

0 commit comments

Comments
(0)

AltStyle によって変換されたページ (->オリジナル) /