Skip to content

dev / trimble-admin-pro

Go to a project
Toggle navigation
Toggle navigation pinning
cddc0651 by qingxiao
Options

一步操作

1 parent 94a587a6
Inline Side-by-side
Showing 4 changed files with 386 additions and 1 deletions
...@@ -214,6 +214,24 @@ export const constantRouterMap = [{ ...@@ -214,6 +214,24 @@ export const constantRouterMap = [{
214 icon: '' 214 icon: ''
215 } 215 }
216 }, 216 },
217 {
218 path: '/edu/oneStep',
219 name: 'oneStep',
220 component: () => import('@/views/oneStep/index'),
221 meta: {
222 title: '一步操作',
223 icon: ''
224 }
225 },
226 {
227 path: '/edu/oneStepImage',
228 name: 'oneStepImage',
229 component: () => import('@/views/oneStepImage/index'),
230 meta: {
231 title: '一步操作内容',
232 icon: ''
233 }
234 },
217 ] 235 ]
218 }, 236 },
219 237
......
1 <template>
2 <div class="app-container">
3 <el-header height>
4 <el-button type="primary" @click="openDialog">创建</el-button>
5 </el-header>
6 <el-main>
7 <el-table
8 :data="oneStepList"
9 style="width: 100%"
10 stripe
11 highlight-current-row
12 v-loading="loading"
13 >
14 <el-table-column label="名称" prop="oneStepName"></el-table-column>
15 <el-table-column label="操作">
16 <template slot-scope="scope">
17 <el-link type="primary" @click="deleteOneStep(scope.row.oneStepCode)">删除</el-link>
18 <el-link type="primary" @click="editOneStep(scope.row)">编辑</el-link>
19 <el-link type="primary" v-show="scope.$index!==0" @click="change(scope.row,oneStepList[scope.$index-1])"><i
20 class="el-icon-sort"></i>上移 &nbsp
21 </el-link>
22 <el-link type="primary" v-show="scope.$index!==oneStepList.length-1"
23 @click="change(scope.row,oneStepList[scope.$index+1])"><i class="el-icon-sort"></i>下移 &nbsp
24 </el-link>
25 </template>
26 </el-table-column>
27 </el-table>
28
29 <el-footer>
30 <div style="text-align:right;">
31 <el-pagination
32 @size-change="handleSizeChange"
33 @current-change="handleCurrentChange"
34 :current-page="queryForm.page"
35 :page-size="queryForm.size"
36 layout="total, prev, pager, next"
37 :total="total">
38 </el-pagination>
39 </div>
40 </el-footer>
41 </el-main>
42
43 <el-dialog
44 width="60%"
45 :title="title"
46 :visible.sync="dialogVisible">
47 <el-form :model="oneStepForm" ref="oneStepForm" :rules="oneStepFormRules" label-width="180px">
48 <el-form-item label="名称：" prop="oneStepName">
49 <el-input v-model="oneStepForm.oneStepName" maxlength="100" show-word-limit></el-input>
50 </el-form-item>
51 </el-form>
52 <span slot="footer" class="dialog-footer">
53 <el-button type="primary" @click="submitForm('oneStepForm')">提交</el-button>
54 <el-button @click="cancelCreate">取消</el-button>
55 </span>
56 </el-dialog>
57 </div>
58 </template>
59
60 <script>
61 import {request} from '@/api/fetch-api'
62
63 let urls = {
64 oneStepListUrl: '/tianbao_edu_api/admin/oneStep/list',
65 oneStepSaveUrl: '/tianbao_edu_api/admin/oneStep/save',
66 oneStepDelUrl: '/tianbao_edu_api/admin/oneStep/delete',
67 changeUrl: '/tianbao_edu_api/admin/oneStep/change'
68 }
69
70 export default {
71 data() {
72 return {
73 oneStepList: [],
74 total: 0,
75 loading: false,
76 queryForm: {
77 page: 1,
78 size: 10
79 },
80 dialogVisible: false,
81 oneStepForm: {},
82 oneStepFormRules: {
83 oneStepName: [{required: true, message: '请输入名称', trigger: 'blur'}],
84 },
85 title: ''
86 }
87 },
88 methods: {
89 initOneStep() {
90 this.loading = true
91 request.get(urls.oneStepListUrl, this.queryForm).then(data => {
92 this.loading = false
93 this.oneStepList = data.content.list
94 this.total = data.content.total
95 }).catch(() => {
96
97 })
98 },
99 change(row, row2) {
100 let form = {
101 oneCode: row.oneStepCode,
102 twoCode: row2.oneStepCode
103 }
104 request.post(urls.changeUrl, form).then(response => {
105 this.initOneStep()
106 }).catch(() => {
107
108 })
109 },
110 deleteOneStep(code) {
111 this.$confirm('此操作将永久删除, 是否继续?', '提示', {
112 confirmButtonText: '确定',
113 cancelButtonText: '取消',
114 type: 'warning'
115 }).then(() => {
116 request.post(urls.oneStepDelUrl, {oneStepCode: code}).then(response => {
117 this.initOneStep()
118 this.$message.success("删除成功")
119 }).catch(() => {
120
121 })
122 }).catch(() => {
123 })
124
125 },
126 editOneStep(row) {
127 this.dialogVisible = true
128 this.oneStepForm = JSON.parse(JSON.stringify(row))
129 },
130 openDialog() {
131 this.dialogVisible = true
132 this.oneStepForm = {}
133 },
134 submitForm(formName) {
135 this.$refs[formName].validate((valid) => {
136 if (valid) {
137 request.post(urls.oneStepSaveUrl, this.oneStepForm).then(response => {
138 this.dialogVisible = false
139 this.$message.success("保存成功")
140 this.initOneStep()
141 }).catch(() => {
142
143 })
144 } else {
145 console.log('error submit!!')
146 return false
147 }
148 })
149 },
150 cancelCreate() {
151 this.dialogVisible = false
152 this.oneStepForm = {}
153 }
154 },
155 created() {
156 this.initOneStep()
157 }
158 }
159 </script>
160
161 <style scoped>
162
163 </style>
1 <template>
2 <div class="app-container">
3 <el-header height>
4 <el-button type="primary" @click="openDialog">创建</el-button>
5 </el-header>
6 <el-main>
7 <el-tabs v-model="queryForm.oneStepCode" @tab-click="initOneStepImage">
8 <el-tab-pane v-for="item in oneStepList" :key="item.id" :label="item.oneStepName"
9 :name="item.oneStepCode"></el-tab-pane>
10 </el-tabs>
11
12 <el-table
13 :data="oneStepImageList"
14 style="width: 100%"
15 stripe
16 highlight-current-row
17 v-loading="loading"
18 >
19 <el-table-column label="图片">
20 <template slot-scope="scope">
21 <a :href="scope.row.imageUrl" target="_blank">
22 <div style="width: 100px;">
23 <el-image :src="scope.row.imageUrl"></el-image>
24 </div>
25 </a>
26 </template>
27 </el-table-column>
28 <el-table-column label="操作">
29 <template slot-scope="scope">
30 <el-link type="primary" @click="deleteOneStepImage(scope.row.oneStepCode)">删除</el-link>
31 <el-link type="primary" @click="editOneStepImage(scope.row)">编辑</el-link>
32 <el-link type="primary" v-show="scope.$index!==0"
33 @click="changeImage(scope.row,oneStepImageList[scope.$index-1])"><i
34 class="el-icon-sort"></i>上移 &nbsp
35 </el-link>
36 <el-link type="primary" v-show="scope.$index!==oneStepImageList.length-1"
37 @click="changeImage(scope.row,oneStepImageList[scope.$index+1])"><i class="el-icon-sort"></i>下移
38 &nbsp
39 </el-link>
40 </template>
41 </el-table-column>
42 </el-table>
43
44 </el-main>
45 <el-footer>
46
47 </el-footer>
48
49
50 <el-dialog
51 width="60%"
52 :title="title"
53 :visible.sync="dialogVisible">
54 <el-form :model="oneStepImageForm" ref="oneStepImageForm" :rules="oneStepImageFormRules" label-width="180px">
55 <el-form-item label="图片：" prop="imageUrl">
56 <upload-item
57 v-model="oneStepImageForm.imageUrl"
58 v-on:before-upload="loading=true"
59 v-on:after-upload="loading=false"
60 ></upload-item>
61 </el-form-item>
62 <el-form-item label="一步操作系列：" prop="oneStepCode">
63 <el-select v-model="oneStepImageForm.oneStepCode" placeholder="请选择">
64 <el-option
65 v-for="item in oneStepList"
66 :key="item.oneStepCode"
67 :label="item.oneStepName"
68 :value="item.oneStepCode">
69 </el-option>
70 </el-select>
71 </el-form-item>
72 </el-form>
73 <span slot="footer" class="dialog-footer">
74 <el-button type="primary" @click="submitForm('oneStepImageForm')">提交</el-button>
75 <el-button @click="cancelCreate">取消</el-button>
76 </span>
77 </el-dialog>
78 </div>
79 </template>
80
81 <script>
82 import {request} from '@/api/fetch-api'
83 import UploadItem from '@/components/UploadItem'
84
85 let urls = {
86 oneStepListUrl: '/tianbao_edu_api/admin/oneStep/list',
87 oneStepImageListUrl: '/tianbao_edu_api/admin/oneStepImage/list',
88 changeUrl: '/tianbao_edu_api/admin/oneStepImage/change',
89 oneStepImageSaveUrl: '/tianbao_edu_api/admin/oneStepImage/save'
90 }
91 export default {
92 components: {UploadItem},
93 data() {
94 return {
95 oneStepImageList: [],
96 queryForm: {
97 page: 1,
98 size: 1000,
99 oneStepCode: ''
100 },
101 oneStepList: [],
102 dialogVisible: false,
103 oneStepImageForm: {},
104 oneStepImageFormRules: {
105 imageUrl:[{required: true, message: '请上传图片', trigger: 'blur'}],
106 oneStepCode:[{required: true, message: '请选择', trigger: 'blur'}]
107 },
108 title: "",
109 loading: false
110 }
111 },
112 methods: {
113 handleClick(tab, event) {
114
115 },
116 initOneStep() {
117 request.get(urls.oneStepListUrl, {page: 1, size: 10000}).then(data => {
118 this.oneStepList = data.content.list
119 this.queryForm.oneStepCode = this.oneStepList[0].oneStepCode
120 this.initOneStepImage()
121 }).catch(() => {
122
123 })
124 },
125 initOneStepImage() {
126 this.loading = true
127 request.get(urls.oneStepImageListUrl, this.queryForm).then(data => {
128 this.loading = false
129 this.oneStepImageList = data.content.list
130 }).catch(() => {
131
132 })
133 },
134 openDialog() {
135 this.dialogVisible = true
136 this.oneStepImageForm = {}
137 },
138 submitForm(formName) {
139 this.$refs[formName].validate((valid) => {
140 if (valid) {
141 request.post(urls.oneStepImageSaveUrl, this.oneStepImageForm).then(response => {
142 this.dialogVisible = false
143 this.$message.success("保存成功")
144 this.initOneStep()
145 }).catch(() => {
146
147 })
148 } else {
149 console.log('error submit!!')
150 return false
151 }
152 })
153 },
154 cancelCreate() {
155 this.dialogVisible = false
156 this.oneStepImageForm = {}
157 },
158 deleteOneStepImage(code) {
159 this.$confirm('此操作将永久删除, 是否继续?', '提示', {
160 confirmButtonText: '确定',
161 cancelButtonText: '取消',
162 type: 'warning'
163 }).then(() => {
164 request.post(urls.oneStepDelUrl, {oneStepCode: code}).then(response => {
165 this.initOneStepImage()
166 this.$message.success("删除成功")
167 }).catch(() => {
168
169 })
170 }).catch(() => {
171 })
172 },
173 editOneStepImage(row) {
174 this.dialogVisible = true
175 this.oneStepImageForm = JSON.parse(JSON.stringify(row))
176 },
177 changeImage(row, row2) {
178 let form = {
179 oneCode: row.oneStepImageCode,
180 twoCode: row2.oneStepImageCode
181 }
182 request.post(urls.changeUrl, form).then(response => {
183 this.initOneStep()
184 }).catch(() => {
185
186 })
187 }
188 },
189 created() {
190 this.initOneStep()
191 },
192
193 }
194 </script>
195
196 <style scoped>
197
198 </style>
...@@ -32,6 +32,8 @@ ...@@ -32,6 +32,8 @@
32 </el-table-column> 32 </el-table-column>
33 <el-table-column label="类型" prop="typeName"> 33 <el-table-column label="类型" prop="typeName">
34 </el-table-column> 34 </el-table-column>
35 <el-table-column label="内容" prop="videoContent">
36 </el-table-column>
35 <el-table-column label="操作"> 37 <el-table-column label="操作">
36 <template slot-scope="scope"> 38 <template slot-scope="scope">
37 <el-link type="primary" @click="videoEdit(scope.row)">编辑 &nbsp;</el-link> 39 <el-link type="primary" @click="videoEdit(scope.row)">编辑 &nbsp;</el-link>
...@@ -85,6 +87,9 @@ ...@@ -85,6 +87,9 @@
85 87
86 </el-select> 88 </el-select>
87 </el-form-item> 89 </el-form-item>
90 <el-form-item label="内容描述：" prop="videoContent">
91 <el-input type="textarea" maxlength="100" show-word-limit v-model="videoForm.videoContent"></el-input>
92 </el-form-item>
88 </el-form> 93 </el-form>
89 <span slot="footer" class="dialog-footer"> 94 <span slot="footer" class="dialog-footer">
90 <el-button type="primary" @click="submitForm('videoForm')">提交</el-button> 95 <el-button type="primary" @click="submitForm('videoForm')">提交</el-button>
...@@ -125,7 +130,8 @@ ...@@ -125,7 +130,8 @@
125 videoRules: { 130 videoRules: {
126 videoName: [{required: true, message: '请输入名称', trigger: 'blur'}], 131 videoName: [{required: true, message: '请输入名称', trigger: 'blur'}],
127 videoUrl: [{required: true, message: '上传缩略图', trigger: 'blur'}], 132 videoUrl: [{required: true, message: '上传缩略图', trigger: 'blur'}],
128 videoTypeCode: [{required: true, message: '请选择', trigger: 'blur'}] 133 videoTypeCode: [{required: true, message: '请选择', trigger: 'blur'}],
134 videoContent:[{required: true, message: '请填写', trigger: 'blur'}]
129 }, 135 },
130 videoTypeList: [] 136 videoTypeList: []
131 } 137 }
......