Skip to content

Commit dd3f7e7

Browse files
lisgrouplisgroup
committed
fix(view): 文章编辑的问题
1 parent b5ff567 commit dd3f7e7

File tree

4 files changed

+110
-91
lines changed

4 files changed

+110
-91
lines changed

‎admin/src/views/article/edit.vue

Lines changed: 98 additions & 87 deletions
Original file line numberDiff line numberDiff line change
@@ -1,51 +1,32 @@
11
<template>
22
<div class="app-container">
33
<el-form ref="form" :model="form" :rules="rules" label-width="120px">
4-
<el-form-item label="车次名称" prop="name">
5-
<el-input v-model="form.name"/>
6-
</el-form-item>
7-
<el-form-item label="price" prop="price">
8-
<el-input v-model="form.price"/>
9-
</el-form-item>
10-
<el-form-item label="类型" prop="car_type">
11-
<el-select v-model="form.car_type" placeholder="请选择类型">
12-
<el-option label="大巴" value="大巴"/>
13-
<el-option label="中巴" value="中巴"/>
14-
<el-option label="地铁" value="地铁"/>
4+
<el-form-item label="栏目" prop="category_id">
5+
<el-select v-model="form.category_id" placeholder="请选择栏目" value-key="name">
6+
<el-option v-for="(cate, index) in category" :key="index" :label="cate.name" :value="cate.id">
7+
<span style="float: left; color: #8492a6; font-size: 13px">{{ cate.name }}</span>
8+
</el-option>
159
</el-select>
1610
</el-form-item>
17-
<el-form-item label="发车间隔" prop="depart_time">
18-
<el-input v-model="form.depart_time"/>
19-
</el-form-item>
20-
<el-form-item label="营运时间" prop="open_time">
21-
<el-input v-model="form.open_time"/>
22-
</el-form-item>
23-
<el-form-item label="全程时间" prop="total_time">
24-
<el-input v-model="form.total_time"/>
25-
</el-form-item>
26-
<el-form-item label="途经道路" prop="via_road">
27-
<el-input v-model="form.via_road" type="textarea"/>
28-
</el-form-item>
29-
<el-form-item label="公交公司" prop="company">
30-
<el-input v-model="form.company"/>
11+
<el-form-item label="文章标题" prop="title">
12+
<el-input v-model="form.title"/>
3113
</el-form-item>
32-
<el-form-item label="途经站点(去程)" prop="station">
33-
<el-input :rows="4" v-model="form.station" type="textarea" />
14+
<el-form-item label="作者" prop="author">
15+
<el-input v-model="form.author"/>
3416
</el-form-item>
35-
<el-form-item label="途经站点(返程)" prop="station_back">
36-
<el-input :rows="4" v-model="form.station_back" type="textarea" />
17+
<el-form-item label="关键词" prop="keywords">
18+
<el-input v-model="form.keywords"/>
3719
</el-form-item>
38-
<el-form-item label="编辑原因" prop="reason">
39-
<el-input v-model="form.reason" />
20+
<el-form-item label="标签" prop="tag_ids">
21+
<el-input v-model="form.tag_ids"/>
4022
</el-form-item>
41-
<el-form-item label="最后更新时间" prop="last_update">
42-
<el-date-picker v-model="form.last_update" value-format="yyyy:MM:dd" type="date" placeholder="选择日期" />
23+
<el-form-item label="内容" prop="markdown">
24+
<mavon-editor ref="md" v-model="form.markdown" @imgAdd="imgAdd" @imgDel="imgDel" />
4325
</el-form-item>
44-
<el-form-item label="是否已审核">
45-
<el-radio-group v-model="form.is_show">
46-
<el-radio :label="0">未审核</el-radio>
47-
<el-radio :label="1">通过</el-radio>
48-
<el-radio :label="2">不通过</el-radio>
26+
<el-form-item label="是否置顶">
27+
<el-radio-group v-model="form.is_top">
28+
<el-radio :label="1">是</el-radio>
29+
<el-radio :label="0">否</el-radio>
4930
</el-radio-group>
5031
</el-form-item>
5132
<el-form-item>
@@ -57,88 +38,86 @@
5738
</template>
5839

5940
<script>
60-
import { edit, postEdit } from '@/api/lines'
41+
import { axios, edit, postEdit } from '@/api/article'
42+
import { getList } from '@/api/category'
6143
6244
export default {
6345
data() {
6446
return {
47+
item: '',
48+
category: [],
6549
form: {
66-
name: '',
67-
price: '',
68-
car_type: '大巴',
69-
depart_time: '',
70-
open_time: '',
71-
total_time: '',
72-
via_road: '',
73-
company: '',
74-
station: '',
75-
station_back: '',
76-
reason: '',
77-
last_update: '',
78-
is_show: 0,
50+
title: '',
51+
category_id: '',
52+
author: 'admin',
53+
keywords: '',
54+
tag_ids: '',
55+
markdown: '',
56+
content: '0',
57+
is_top: 0,
7958
loading: false
8059
},
8160
rules: {
82-
name: [
83-
{ required: true, message: '请输入线路名称', trigger: 'blur' }
84-
],
85-
price: [
86-
{ required: true, message: '请输入 price', trigger: 'blur' }
87-
],
88-
car_type: [
89-
{ required: true, message: '请输入 car_type', trigger: 'blur' }
90-
],
91-
station: [
92-
{ required: true, message: '请输入途经站点', trigger: 'blur' }
93-
],
94-
station_back: [
95-
{ required: true, message: '请输入', trigger: 'blur' }
96-
],
97-
depart_time: [
98-
{ required: true, message: '请输入', trigger: 'blur' }
61+
title: [
62+
{ required: true, message: '请输入名称', trigger: 'blur' }
9963
],
100-
via_road: [
101-
{ required: true, message: '请输入', trigger: 'blur' }
64+
category_id: [
65+
{ required: true, message: '请选择栏目', trigger: 'blur' }
10266
],
103-
total_time: [
104-
{ required: true, message: '请输入', trigger: 'blur' }
67+
author: [
68+
{ required: true, message: '请输入作者', trigger: 'blur' }
10569
],
106-
company: [
107-
{ required: true, message: '请输入', trigger: 'blur' }
70+
keywords: [
71+
{ required: true, message: '请输入关键词', trigger: 'blur' }
10872
],
109-
open_time: [
110-
{ required: true, message: '请输入', trigger: 'blur' }
73+
tag_ids: [
74+
{ required: true, message: '请选择一个标签', trigger: 'blur' }
11175
],
112-
reason: [
113-
{ required: true, message: '请输入', trigger: 'blur' }
114-
],
115-
last_update: [
116-
{ required: true, message: '请输入', trigger: 'change' }
76+
markdown: [
77+
{ required: true, message: '请输入内容', trigger: 'blur' }
11778
]
11879
},
119-
redirect: '/list/lines'
80+
redirect: '/article/index'
81+
}
82+
},
83+
watch: {
84+
item(value) {
85+
this.form.category_id = value
86+
this.getItem()
12087
}
12188
},
12289
created() {
90+
this.init()
91+
12392
this.id = this.$route.params.id
124-
this.getTaskData(this.id)
93+
this.getData(this.id)
12594
},
12695
methods: {
127-
getTaskData(id) {
96+
getItem() {
97+
this.$emit('getItem', this.form.category)
98+
},
99+
init() {
100+
getList({ perPage: 20 }).then(response => {
101+
this.category = response.data.data
102+
})
103+
},
104+
getData(id) {
128105
// this.id = this.$route.params.id
129106
edit(id).then(response => {
130107
// console.log(response)
131108
this.loading = false
132109
if (response.code === 200) {
133110
this.form = response.data
134-
this.form.is_task = (response.data.is_task === 1)
111+
this.form.item = response.data.category_id
112+
this.form.category_id = response.data.category_id
113+
this.getItem()
114+
// this.form.is_task = (response.data.is_task === 1)
135115
} else {
136116
this.$message.error(response.reason)
137117
}
138118
})
139119
},
140120
onSubmit(form) {
141-
// console.log(this.form)
142121
this.$refs[form].validate((valid) => {
143122
if (valid) {
144123
this.loading = true
@@ -170,6 +149,38 @@ export default {
170149
},
171150
resetForm(formName) {
172151
this.$refs[formName].resetFields()
152+
},
153+
// 绑定@imgAdd event
154+
imgAdd(pos, $file) {
155+
// 第一步.将图片上传到服务器.
156+
var formdata = new FormData()
157+
formdata.append('image', $file)
158+
axios({
159+
url: 'http://localhost/',
160+
method: 'post',
161+
data: formdata,
162+
headers: { 'Content-Type': 'multipart/form-data' }
163+
}).then((url) => {
164+
// 第二步.将返回的url替换到文本原位置![...](./0) -> ![...](url)
165+
/**
166+
* $vm 指为 mavonEditor 实例，可以通过如下两种方式获取
167+
* 1. 通过引入对象获取: `import {mavonEditor} from ...` 等方式引入后，`$vm`为`mavonEditor`
168+
* 2. 通过$refs获取: html声明ref : `<mavon-editor ref=md ></mavon-editor>，`$vm`为 `this.$refs.md`
169+
*/
170+
console.log(pos)
171+
console.log(url)
172+
this.$refs.md.$img2Url(pos, url.data)
173+
})
174+
},
175+
imgDel(pos) {
176+
// delete this.img_file[pos]
177+
// console.log(pos[0])
178+
// console.log(pos[0].name)
179+
// console.log(pos[1])
180+
// let rs = this.$refs.md.$refs.toolbar_left.$imgDelByFilename(pos[0].name)
181+
// console.log(rs)
182+
// let rs = this.$refs.md.$refs.toolbar_left.$imgDelByFilename('aa18972bd40735faee21b63393510fb30e240862.jpg')
183+
// console.log(rs)
173184
}
174185
}
175186
}

‎admin/src/views/article/index.vue

Lines changed: 1 addition & 1 deletion
Original file line numberDiff line numberDiff line change
@@ -127,7 +127,7 @@ export default {
127127
})
128128
},
129129
handleEdit(index, row) {
130-
this.$router.push({ path: 'article/edit/' + row.id })
130+
this.$router.push({ path: '/article/edit/' + row.id })
131131
// this.$router.push({ name: 'taskEdit', params: { id: row.id }})
132132
// console.log(index, row)
133133
},

‎admin/src/views/category/add.vue

Lines changed: 6 additions & 2 deletions
Original file line numberDiff line numberDiff line change
@@ -11,7 +11,11 @@
1111
<el-input v-model="form.description"/>
1212
</el-form-item>
1313
<el-form-item label="排序" prop="sort">
14-
<el-input v-model="form.sort"/>
14+
<el-col :span="6">
15+
<el-input v-model="form.sort"/>
16+
</el-col>
17+
取值范围 【-128 到 128】 的整数，数值越小越靠前
18+
<el-col :span="18"/>
1519
</el-form-item>
1620
<el-form-item>
1721
<el-button type="primary" @click="onSubmit('form')">提交</el-button>
@@ -31,7 +35,7 @@ export default {
3135
name: '',
3236
keywords: '',
3337
description: '',
34-
sort: '',
38+
sort: '100',
3539
loading: false
3640
},
3741
rules: {

‎admin/src/views/category/edit.vue

Lines changed: 5 additions & 1 deletion
Original file line numberDiff line numberDiff line change
@@ -11,7 +11,11 @@
1111
<el-input v-model="form.description"/>
1212
</el-form-item>
1313
<el-form-item label="排序" prop="sort">
14-
<el-input v-model="form.sort"/>
14+
<el-col :span="6">
15+
<el-input v-model="form.sort"/>
16+
</el-col>
17+
取值范围 【-128 到 128】 的整数，数值越小越靠前
18+
<el-col :span="18"/>
1519
</el-form-item>
1620
<el-form-item>
1721
<el-button type="primary" @click="onSubmit('form')">提交</el-button>

0 commit comments

Comments
 (0)