5A

src/pages/system/cmsManager/bannerManager/index.vue

@@ -64,7 +64,7 @@ export default {
   data () {
     return {
       postData: {
-        currentPage: 0, // 当前页码
+        currentPage: 1, // 当前页码
         pageSize: 10,
         total: 0,
       },

src/pages/system/courseManager/fiveA/add.vue

@@ -2,27 +2,13 @@
   <div class="subPage">
     <form class="mainForm">
       <ul>
-        <li class="flex-h">
-          <span>上级课程类型：</span>
-          <div class="flex-item">
-            <div style="width:50%">
-              <el-input
-                placeholder="请输入内容"
-                v-model="postData.label"
-                @focus="showTree"
-                readonly
-                clearable>
-              </el-input>
-            </div>
-          </div>
-        </li>
         <li class="flex-h">
           <span>名称：</span>
           <div class="flex-item">
             <div style="width:50%">
               <el-input
                 placeholder="请输入名称"
-                v-model="postData.name"
+                v-model="postData.LocationName"
                 clearable>
               </el-input>
             </div>
@@ -34,7 +20,7 @@
             <div style="width:50%">
               <el-input
                 placeholder="请输入标题"
-                v-model="postData.title"
+                v-model="postData.Title"
                 clearable>
               </el-input>
             </div>
@@ -46,7 +32,7 @@
             <div style="width:50%">
               <el-input
                 placeholder="请输入咨询分类"
-                v-model="postData.class"
+                v-model="postData.Consult"
                 clearable>
               </el-input>
             </div>
@@ -58,19 +44,7 @@
             <div style="width:50%">
               <el-input
                 placeholder="请输入编码"
-                v-model="postData.coding"
-                clearable>
-              </el-input>
-            </div>
-          </div>
-        </li>
-        <li class="flex-h">
-          <span>序号：</span>
-          <div class="flex-item">
-            <div style="width:50%">
-              <el-input
-                placeholder="请输入序号"
-                v-model="postData.number"
+                v-model="postData.LocationCode"
                 clearable>
               </el-input>
             </div>
@@ -79,13 +53,19 @@
         <li class="flex-h">
           <span>课程图片：</span>
           <div class="flex-item">
-            <div>
-              <a class="formImg">
-                <img src="" class="centerLabel contain" alt="">
-                <i class="iconfont icon-quxiao"></i>
-              </a>
-              <el-button type="success" size="mini">上传图片</el-button>
-            </div>
+            <el-upload
+              :action="$api.file.image.url"
+              :limit='limit'
+              list-type="picture-card"
+              :file-list='imgsArr'
+              :on-success="handlePictureCardPreview"
+              :on-remove="handleRemove"
+              :on-exceed="exceed">
+              <i class="el-icon-plus"></i>
+            </el-upload>
+            <el-dialog :visible.sync="dialogVisible">
+              <img width="100%" :src="imgs" alt="">
+            </el-dialog>
           </div>
         </li>
         <li style="text-align:center">
@@ -94,83 +74,87 @@
         </li>
       </ul>
     </form>
-    <el-dialog title="请选择机构" :visible.sync="dialogTableVisible">
-      <el-tree
-        class="flxe-h"
-        :data="treeData"
-        :default-expand-all="true"
-        :expand-on-click-node="false"
-        @node-click="handleNodeClick"></el-tree>
-    </el-dialog>
   </div>
 </template>
 
 <script>
 
+import { mapState, mapActions } from 'vuex'
 export default {
   name: '',
   data () {
     return {
       postData: {
-        label: '', // 父页面带入的上级类型
-        name: '', // 名称
-        title: '', // 标题
-        class: '', // 咨询分类
-        coding: '', // 编码
+        LocationName: '', // 名称
+        Title: '', // 标题
+        Consult: '', // 咨询分类
+        LocationCode: '', // 编码
         number: '', // 序号
+        OrgId: '',
+        CaseId: '',
+        TypeImg: ''
       },
-      dialogTableVisible: false,
-      treeData: [{
-        label: '根目录',
-        rank: '0',
-        img: '',
-        children: [{
-          label: '共享课程&书吧',
-          rank: '0',
-          img: '',
-          children: [{
-            label: '健身',
-            rank: '0',
-            img: 'http://jingcheng-resourceplat.oss-cn-shanghai.aliyuncs.com/upload/163306109741.png',
-          }, {
-            label: '健康',
-            rank: '0',
-            img: 'http://jingcheng-resourceplat.oss-cn-shanghai.aliyuncs.com/upload/163325263583.png',
-          }, {
-            label: '艺术',
-            rank: '0',
-            img: 'http://jingcheng-resourceplat.oss-cn-shanghai.aliyuncs.com/upload/104118813781.png',
-          }, {
-            label: '社交',
-            rank: '0',
-            img: 'http://jingcheng-resourceplat.oss-cn-shanghai.aliyuncs.com/upload/163339496588.png',
-          }, {
-            label: '教育',
-            rank: '0',
-            img: 'http://jingcheng-resourceplat.oss-cn-shanghai.aliyuncs.com/upload/163351586373.png',
-          }]
-        }]
-      }]
+      dialogVisible: false,
+      imgs: '',
+      imgsArr: [],
+      limit: 1
     }
   },
   components: {},
+  created () {
+    this.updateSystemInfo().then(() => {
+      this.postData.CaseId = this.defaultCaseId
+    })
+  },
+  computed: {
+    ...mapState({
+      OrgId: x => x.app.user.OrgId,
+      defaultCaseId: x => x.app.cases.default
+    })
+  },
   methods: {
-    showTree () {
-      this.dialogTableVisible = true
-    },
-    handleNodeClick (node) {
-      this.postData.label = node.label
-      this.dialogTableVisible = false
-    },
+    ...mapActions(['updateSystemInfo']),
     submit () {
+      this.postData.OrgId = this.OrgId
+      this.postData.TypeImg = ''
+      for (let i = 0; i < this.imgsArr.length; i++) {
+        this.postData.TypeImg += this.imgsArr[i].response.result.url + ','
+      }
+      if (this.postData.TypeImg) {
+        this.postData.TypeImg = this.postData.TypeImg.substr(0, this.postData.TypeImg.length - 1)
+      }
       console.log(this.postData)
+      this.$ajax(this.$api.cms.addLocation.url, {
+        method: this.$api.cms.addLocation.method,
+        data: this.postData
+      }).then(res => {
+        this.$message({
+          type: 'success',
+          message: '新增成功'
+        })
+        this.$router.push({ name: 'fiveA' })
+      }).catch(msg => {
+
+      })
     },
     cancel () {
       this.$router.go(-1)
+    },
+    handlePictureCardPreview (res, file, fileList) {
+      this.imgs = res.result.url
+      this.dialogVisible = true
+      this.imgsArr = fileList
+    },
+    handleRemove (file, fileList) {
+      this.imgsArr = fileList
+    },
+    exceed () {
+      this.$message({
+        message: '超过可传的图片上限',
+        type: 'info',
+        duration: 1000
+      })
     }
-  },
-  mounted () {
-    this.postData.label = this.$route.query.label
   }
 }
 </script>

src/pages/system/courseManager/fiveA/edit.vue

@@ -2,27 +2,13 @@
   <div class="subPage">
     <form class="mainForm">
       <ul>
-        <li class="flex-h">
-          <span>上级课程类型：</span>
-          <div class="flex-item">
-            <div style="width:50%">
-              <el-input
-                placeholder="请输入内容"
-                v-model="postData.label"
-                @focus="showTree"
-                readonly
-                clearable>
-              </el-input>
-            </div>
-          </div>
-        </li>
         <li class="flex-h">
           <span>名称：</span>
           <div class="flex-item">
             <div style="width:50%">
               <el-input
                 placeholder="请输入名称"
-                v-model="postData.name"
+                v-model="postData.LocationName"
                 clearable>
               </el-input>
             </div>
@@ -34,7 +20,7 @@
             <div style="width:50%">
               <el-input
                 placeholder="请输入标题"
-                v-model="postData.title"
+                v-model="postData.Title"
                 clearable>
               </el-input>
             </div>
@@ -46,7 +32,7 @@
             <div style="width:50%">
               <el-input
                 placeholder="请输入咨询分类"
-                v-model="postData.class"
+                v-model="postData.Consult"
                 clearable>
               </el-input>
             </div>
@@ -58,19 +44,7 @@
             <div style="width:50%">
               <el-input
                 placeholder="请输入编码"
-                v-model="postData.coding"
-                clearable>
-              </el-input>
-            </div>
-          </div>
-        </li>
-        <li class="flex-h">
-          <span>序号：</span>
-          <div class="flex-item">
-            <div style="width:50%">
-              <el-input
-                placeholder="请输入序号"
-                v-model="postData.number"
+                v-model="postData.LocationCode"
                 clearable>
               </el-input>
             </div>
@@ -79,13 +53,19 @@
         <li class="flex-h">
           <span>课程图片：</span>
           <div class="flex-item">
-            <div>
-              <a class="formImg">
-                <img src="" class="centerLabel contain" alt="">
-                <i class="iconfont icon-quxiao"></i>
-              </a>
-              <el-button type="success" size="mini">上传图片</el-button>
-            </div>
+            <el-upload
+              :action="$api.file.image.url"
+              :limit='limit'
+              list-type="picture-card"
+              :file-list='imgsArr'
+              :on-success="handlePictureCardPreview"
+              :on-remove="handleRemove"
+              :on-exceed="exceed">
+              <i class="el-icon-plus"></i>
+            </el-upload>
+            <el-dialog :visible.sync="dialogVisible">
+              <img width="100%" :src="imgs" alt="">
+            </el-dialog>
           </div>
         </li>
         <li style="text-align:center">
@@ -94,87 +74,114 @@
         </li>
       </ul>
     </form>
-    <el-dialog title="请选择机构" :visible.sync="dialogTableVisible">
-      <el-tree
-        class="flxe-h"
-        :data="treeData"
-        :default-expand-all="true"
-        :expand-on-click-node="false"
-        @node-click="handleNodeClick"></el-tree>
-    </el-dialog>
   </div>
 </template>
 
 <script>
 
+import { mapState, mapActions } from 'vuex'
 export default {
   name: '',
   data () {
     return {
       postData: {
-        label: '', // 父页面带入的上级类型
-        name: '', // 名称
-        title: '', // 标题
-        class: '', // 咨询分类
-        coding: '', // 编码
+        LocationName: '', // 名称
+        Title: '', // 标题
+        Consult: '', // 咨询分类
+        LocationCode: '', // 编码
         number: '', // 序号
+        OrgId: '',
+        CaseId: '',
+        TypeImg: ''
       },
-      dialogTableVisible: false,
-      treeData: [{
-        label: '根目录',
-        rank: '0',
-        img: '',
-        children: [{
-          label: '共享课程&书吧',
-          rank: '0',
-          img: '',
-          children: [{
-            label: '健身',
-            rank: '0',
-            img: 'http://jingcheng-resourceplat.oss-cn-shanghai.aliyuncs.com/upload/163306109741.png',
-          }, {
-            label: '健康',
-            rank: '0',
-            img: 'http://jingcheng-resourceplat.oss-cn-shanghai.aliyuncs.com/upload/163325263583.png',
-          }, {
-            label: '艺术',
-            rank: '0',
-            img: 'http://jingcheng-resourceplat.oss-cn-shanghai.aliyuncs.com/upload/104118813781.png',
-          }, {
-            label: '社交',
-            rank: '0',
-            img: 'http://jingcheng-resourceplat.oss-cn-shanghai.aliyuncs.com/upload/163339496588.png',
-          }, {
-            label: '教育',
-            rank: '0',
-            img: 'http://jingcheng-resourceplat.oss-cn-shanghai.aliyuncs.com/upload/163351586373.png',
-          }]
-        }]
-      }]
+      dialogVisible: false,
+      imgs: '',
+      imgsArr: [],
+      limit: 1
     }
   },
   components: {},
+  created () {
+    this.updateSystemInfo().then(() => {
+      this.postData.CaseId = this.defaultCaseId
+    })
+    this.getDetail()
+  },
+  computed: {
+    ...mapState({
+      OrgId: x => x.app.user.OrgId,
+      defaultCaseId: x => x.app.cases.default
+    })
+  },
   methods: {
-    showTree () {
-      this.dialogTableVisible = true
-    },
-    handleNodeClick (node) {
-      this.postData.label = node.label
-      this.dialogTableVisible = false
-    },
-    init () {
-      console.log('请求初始化数据')
-    },
+    ...mapActions(['updateSystemInfo']),
     submit () {
-      console.log(this.postData)
+      this.postData.OrgId = this.OrgId
+      this.postData.TypeImg = ''
+      for (let i = 0; i < this.imgsArr.length; i++) {
+        this.postData.TypeImg += this.imgsArr[i].response.result.url + ','
+      }
+      if (this.postData.TypeImg) {
+        this.postData.TypeImg = this.postData.TypeImg.substr(0, this.postData.TypeImg.length - 1)
+      }
+      this.$ajax(this.$api.cms.editLocation.url, {
+        method: this.$api.cms.editLocation.method,
+        urlData: {
+          id: this.$route.query.id
+        },
+        data: this.postData
+      }).then(res => {
+        this.$message({
+          type: 'success',
+          message: '编辑成功'
+        })
+        this.$router.push({ name: 'fiveA' })
+      }).catch(msg => {
+
+      })
     },
     cancel () {
       this.$router.go(-1)
+    },
+    getDetail () {
+      this.$ajax(this.$api.cms.locationDetail.url, {
+        method: this.$api.cms.locationDetail.method,
+        urlData: {
+          id: this.$route.query.id
+        }
+      }).then(res => {
+        console.log(res)
+        let imgsArr = []
+        let item = {
+          url: res.ImageUrl,
+          response: {
+            result: {
+              url: res.ImageUrl
+            }
+          }
+        }
+        imgsArr.push(item)
+        this.imgsArr = imgsArr
+        this.postData = res
+      }).catch(msg => {
+
+      })
+    },
+    handlePictureCardPreview (res, file, fileList) {
+      this.imgs = res.result.url
+      this.dialogVisible = true
+      this.imgsArr = fileList
+    },
+    handleRemove (file, fileList) {
+      this.imgsArr = fileList
+    },
+    exceed () {
+      this.$message({
+        message: '超过可传的图片上限',
+        type: 'info',
+        duration: 1000
+      })
     }
-  },
-  mounted () {
-    this.postData.label = this.$route.query.label
-    this.init()
   }
 }
 </script>

src/pages/system/courseManager/fiveA/index.vue

@@ -2,153 +2,190 @@
   <div class="subPage">
     <div class="system-table-search">
       <div class="flex-h">
+        <div class="flex-item flex-h">
+          <el-button size="mini" type="success" @click="addFiveA">新增五A</el-button>
+        </div>
+        <!-- <tableSearch @exportSearchKey="searchList"></tableSearch> -->
       </div>
       <div class="moreFilter"></div>
     </div>
     <div class="system-table-box">
-      <div class="flex-h table-title">
-        <span style="width:20px"></span>
-        <div class="flex-item">标题</div>
-        <div class="flex-item">排序</div>
-        <div class="flex-item">类型图片</div>
-        <div class="flex-item">操作</div>
-      </div>
-      <el-tree
-      class="flxe-h"
-      :data="data"
-      :default-expand-all="true"
-      :expand-on-click-node="false"
-      :render-content="renderContent"
-      :indent="0"></el-tree>
+      <el-table
+        :data="tableData"
+        stripe
+        style="width: 100%">
+        <el-table-column
+          prop="LocationName"
+          label="标题">
+        </el-table-column>
+        <el-table-column
+          prop="OrderNo"
+          label="排序">
+        </el-table-column>
+        <el-table-column
+          prop="TypeImg"
+          label="类型图片">
+          <template slot-scope="scope">
+            <a class="tableImg">
+              <img :src="scope.row.TypeImg" class="centerLabel contain" alt="">
+            </a>
+          </template>
+        </el-table-column>
+        <el-table-column label="操作">
+          <template slot-scope="scope">
+            <el-button
+              size="mini"
+              type="warning"
+              @click="handleEdit(scope.$index, scope.row)">编辑</el-button>
+            <el-button
+              size="mini"
+              type="danger"
+              @click="handleDelete(scope.$index, scope.row)">删除</el-button>
+              <el-button
+              size="mini"
+              type="primary"
+              v-if="scope.row.OrderNo !== 1 && tableData.length > 1"
+              @click="orderChange(scope.$index, scope.row, 'up')">上移</el-button>
+              <el-button
+              size="mini"
+              type="success"
+              v-if="scope.row.OrderNo !== tableData.length && tableData.length > 1"
+              @click="orderChange(scope.$index, scope.row, 'down')">下移</el-button>
+          </template>
+        </el-table-column>
+      </el-table>
     </div>
+    <el-pagination
+      @current-change="handleCurrentChange"
+      :current-page.sync="postData.currentPage"
+      :page-size="postData.pageSize"
+      layout="prev, pager, next, jumper"
+      :total="postData.total">
+    </el-pagination>
   </div>
 </template>
 
 <script>
 import tableSearch from '@/components/tableSearch/index'
-import { createNamespacedHelpers } from 'vuex'
-
-const { mapState: mapCaseState } = createNamespacedHelpers('case')
-
+import { mapState, createNamespacedHelpers, mapActions } from 'vuex'
+const { mapActions: mapCmsActions } = createNamespacedHelpers('cms')
 export default {
   name: '',
   data () {
     return {
-      data: [{
-        label: '根目录',
-        rank: '0',
-        img: '',
-        deleteCancel: true,
-        children: [{
-          label: '共享课程&书吧',
-          rank: '1',
-          deleteCancel: true,
-          img: '',
-          children: [{
-            label: '健身',
-            rank: '2',
-            img: 'http://jingcheng-resourceplat.oss-cn-shanghai.aliyuncs.com/upload/163306109741.png',
-          }, {
-            label: '健康',
-            rank: '3',
-            img: 'http://jingcheng-resourceplat.oss-cn-shanghai.aliyuncs.com/upload/163325263583.png',
-          }, {
-            label: '艺术',
-            rank: '4',
-            img: 'http://jingcheng-resourceplat.oss-cn-shanghai.aliyuncs.com/upload/104118813781.png',
-          }, {
-            label: '社交',
-            rank: '5',
-            img: 'http://jingcheng-resourceplat.oss-cn-shanghai.aliyuncs.com/upload/163339496588.png',
-          }, {
-            label: '教育',
-            rank: '6',
-            img: 'http://jingcheng-resourceplat.oss-cn-shanghai.aliyuncs.com/upload/163351586373.png',
-          }]
-        }]
-      }]
+      postData: {
+        currentPage: 1, // 当前页码
+        pageSize: 10,
+        total: 0,
+      },
+      tableData: []
     }
   },
   computed: {
-    ...mapCaseState({
-      caseList: x => x.caseList,
+    ...mapState({
+      positionList: x => x.cms.location
     })
   },
   components: {
     tableSearch,
   },
+  created () {
+    this.updateSystemInfo().then(() => {
+      this.getList()
+    })
+    this.updateLocationInfo()
+  },
   methods: {
-    handleNodeClick (node, data) { // 添加下级课程类型
-      console.log(node, data)
-      this.$router.push({ name: 'addFiveA', query: { label: data.label } })
+    ...mapCmsActions(['updateLocationInfo']),
+    ...mapActions(['updateSystemInfo']),
+    handleCurrentChange (val) {
+      this.postData.currentPage = val
+      this.getList()
     },
-    handleEdit (node, data) { // 编辑
-      console.log(node, data)
-      this.$router.push({ name: 'editFiveA', query: { label: data.label } })
+    handleEdit (index, row) { // 编辑
+      this.$router.push({ name: 'editFiveA', query: { id: row.LocationId } })
     },
-    handleDelete (node, data) { // 删除
-      console.log(node, data)
-      this.$confirm('确认删除此数据?', '提示', {
+    handleDelete (index, row) { // 删除
+      this.$confirm('确认删除此消息?', '提示', {
         confirmButtonText: '确定',
         cancelButtonText: '取消',
         type: 'warning'
-      }).then(() => {
-        this.$message({
-          type: 'success',
-          message: '删除成功!'
-        })
-      }).catch(() => {
+      }).then((res) => {
+        this.deleteLocation(row.LocationId)
+      }).catch((res) => {
         this.$message({
           type: 'info',
           message: '已取消删除'
         })
       })
     },
-    renderContent (h, { node, data, store }) {
-      // console.log(node)
-      return (
-        <span class="custom-tree-node">
-          <div class='tree-node-item'>{node.label}</div>
-          <div class='tree-node-item'>{node.data.rank}</div>
-          <div class='tree-node-item'>
-            <div class='tableImg'>
-              <img src={node.data.img}></img>
-            </div>
-          </div>
-          <div class='tree-node-item'>
-            <el-button size="mini" type="primary" on-click={() => this.handleNodeClick(node, data)}>添加下级课程类型</el-button>
-            <el-button size="mini" type="warning" on-click={() => this.handleEdit(node, data)}>编辑</el-button>
-            {node.data.deleteCancel ? (<div></div>) : (<el-button size="mini" type="danger" on-click={() => this.handleDelete(node, data)}>删除</el-button>)}
-          </div>
-        </span>)
+    addFiveA () {
+      this.$router.push({ name: 'addFiveA' })
+    },
+    getList () {
+      this.tableData = []
+      this.$ajax(this.$api.cms.location.url, {
+        method: this.$api.cms.location.method,
+        queryData: {
+          page: this.postData.currentPage,
+          pagesize: this.postData.pageSize,
+          issys: 0
+        }
+      }).then(res => {
+        console.log(res)
+        this.tableData = res
+      }).catch(msg => {
+
+      })
+    },
+    deleteLocation (id) {
+      this.$ajax(this.$api.cms.deleteLocation.url, {
+        method: this.$api.cms.deleteLocation.method,
+        urlData: {
+          id: id
+        }
+      }).then(res => {
+        console.log(res)
+        this.$message({
+          type: 'success',
+          message: '删除成功!'
+        })
+        this.getList()
+      }).catch(msg => {
+
+      })
+    },
+    orderChange (index, row, direction) {
+      let data
+      if (direction === 'up') {
+        let down = this.tableData[index - 1].LocationId
+        data = {
+          locations: row.LocationId + ':' + index + ',' + down + ':' + (index + 1)
+        }
+      } else {
+        let down = this.tableData[index + 1].LocationId
+        data = {
+          locations: row.LocationId + ':' + (index + 2) + ',' + down + ':' + (index + 1)
+        }
+      }
+      console.log(data)
+      this.$ajax(this.$api.cms.orderChange.url, {
+        method: this.$api.cms.orderChange.method,
+        urlData: {
+          id: row.LocationId
+        },
+        data: data
+      }).then(res => {
+        console.log(res)
+        this.getList()
+      }).catch(msg => {
+
+      })
     }
   }
 }
 </script>
 
-<style lang="scss">
-.custom-tree-node {
-  flex: 1;
-  display: flex;
-  align-items: center;
-  justify-content: space-around;
-  font-size: 14px;
-  padding-right: 8px;
-  .tree-node-item {
-    width: 20%;
-    text-align: center;
-  }
-  .tree-node-item:nth-of-type(4) {
-    min-width: 22rem;
-  }
-}
-.el-tree-node__content {
-  height: auto;
-}
-.table-title {
-  div {
-    padding: 1rem;
-    text-align: center;
-  }
-}
+<!-- Add "scoped" attribute to limit CSS to this component only -->
+<style lang="scss" scoped>
 </style>

src/util/api.js

@@ -204,10 +204,30 @@ const $api = {
     },
   },
   cms: {
-    location: { // 图片位置
+    location: { // 图片位置(5A)
       method: 'get',
       url: `${baseUrl}${common}/cms/location`
     },
+    locationDetail: { // 5A详情
+      method: 'get',
+      url: `${baseUrl}${common}/cms/location/:id`
+    },
+    addLocation: { // 添加5A
+      method: 'post',
+      url: `${baseUrl}${common}/cms/location`
+    },
+    editLocation: { // 编辑5A
+      method: 'put',
+      url: `${baseUrl}${common}/cms/location/:id`
+    },
+    deleteLocation: { // 删除5A
+      method: 'delete',
+      url: `${baseUrl}${common}/cms/location/:id`
+    },
+    orderChange: {
+      method: 'put',
+      url: `${baseUrl}${common}/cms/location/:id/sort`
+    },
     imageList: { // 轮播图列表
       method: 'get',
       url: `${baseUrl}${common}/cms/image`