xcx

src/pages/system/caseManager/caseAreaManager/add.vue

             <div style="width:50%">
               <el-input
                 placeholder="请输入区域名"
-                v-model="postData.areaName"
+                v-model="postData.AreaName"
                 clearable>
               </el-input>
             </div>
           <span>案场：</span>
           <div class="flex-item">
             <div style="width:50%">
-              <el-select v-model="postData.case" placeholder="请选择">
+              <el-select v-model="CaseId" placeholder="请选择">
                 <el-option
-                  v-for="item in caseList"
-                  :key="item.value"
-                  :label="item.label"
-                  :value="item.value">
+                  v-for="item in cases"
+                  :key="item.CaseId"
+                  :label="item.CaseName"
+                  :value="item.CaseId">
                 </el-option>
               </el-select>
             </div>
           <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>
+              <el-upload
+                class="avatar-uploader"
+                :action='$api.file.image.url'
+                :show-file-list="false"
+                :on-success="handleAvatarSuccess">
+                <img v-if="postData.AreaIcon" :src="postData.AreaIcon" class="avatar">
+                <i v-else class="el-icon-plus avatar-uploader-icon"></i>
+              </el-upload>
             </div>
           </div>
         </li>
           <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>
+              <el-upload
+                class="avatar-uploader"
+                :action='$api.file.image.url'
+                :show-file-list="false"
+                :on-success="handleAvatarSuccesser">
+                <img v-if="postData.AreaIconWhite" :src="postData.AreaIconWhite" class="avatar">
+                <i v-else class="el-icon-plus avatar-uploader-icon"></i>
+              </el-upload>
             </div>
           </div>
         </li>
 </template>
 
 <script>
+import { mapState } from 'vuex'
+
 export default {
   name: '',
   data () {
     return {
       postData: {
-        areaName: '',
-        case: ''
+        AreaId: '', // 区域id
+        CaseId: '', // 案场id
+        OrgId: '', // 机构id
+        AreaName: '', // 区域名称
+        AreaIcon: '', // 区域图标
+        AreaIconWhite: '', // 区域图标灰白
       },
       caseList: [{
         value: '0',
       }],
     }
   },
+  computed: {
+    ...mapState({
+      cases: x => x.app.cases.list,
+      defaultCaseId: x => x.app.cases.default
+    }),
+    CaseId: {
+      get () {
+        return this.postData.CaseId || this.defaultCaseId
+      },
+      set (val) {
+        this.postData.CaseId = val
+      }
+    }
+  },
   components: {},
   methods: {
-    submit () {
-      console.log(this.postData)
+    handleAvatarSuccesser (res, file) {
+      this.postData.AreaIconWhite = res.result.url
+    },
+    handleAvatarSuccess (res, file) {
+      this.postData.AreaIcon = res.result.url
+    },
+    submit () { // 提交数据
+      if (this.postData.AreaName === '') {
+        this.$message({
+          type: 'error',
+          message: '区域名称不能为空'
+        })
+        return false
+      }
+      if (this.postData.AreaIcon === '') {
+        this.$message({
+          type: 'error',
+          message: '区域图标不能为空'
+        })
+        return false
+      }
+      if (this.postData.AreaIconWhite === '') {
+        this.$message({
+          type: 'error',
+          message: '区域图标灰白不能为空'
+        })
+        return false
+      }
+      this.postData.OrgId = this.OrgId
+      this.$ajax(this.$api.caseManager.addCaseArea.url, {
+        method: this.$api.caseManager.addCaseArea.method,
+        queryData: { ...this.postData, CaseId: this.CaseId }
+      }).then(res => {
+        this.$message({
+          type: 'success',
+          message: '操作成功!'
+        })
+        this.$router.push({name: 'caseAreaManager'})
+      })
     },
     cancel () {
-      this.$router.go(-1)
+      this.$router.push({name: 'caseAreaManager'})
     }
   },
-  mounted () {}
+  mounted () { }
 }
 </script>
 

src/pages/system/caseManager/caseAreaManager/index.vue

         <ul>
           <li>
             <span>选择案场：</span>
-            <el-select v-model="tableSearch.caseId" placeholder="请选择">
+            <el-select v-model="CaseId" placeholder="请选择">
               <el-option
-                v-for="item in caseList"
-                :key="item.value"
-                :label="item.label"
-                :value="item.value">
+                v-for="item in cases"
+                :key="item.CaseId"
+                :label="item.CaseName"
+                :value="item.CaseId">
               </el-option>
             </el-select>
           </li>
         </ul>
-        <tableSearch value="请输入区域名" @exportSearchKey="searchList"></tableSearch>
+        <el-button
+          size="mini"
+          type="primary" @click="search">搜索</el-button>
       </div>
       <div class="moreFilter"></div>
     </div>
     <div class="system-table-box">
       <el-table
-        :data="tableData"
+        :data="currentList"
         stripe
         style="width: 100%">
         <el-table-column
-          prop="areaName"
+          prop="AreaName"
           label="区域名">
         </el-table-column>
         <el-table-column
-          prop="icon"
+          prop="AreaIcon"
           label="图标">
           <template slot-scope="scope">
             <a class="tableImg">
-              <img src="" class="centerLabel contain" alt="">
+              <img :src="scope.row" class="centerLabel contain" alt="">
             </a>
           </template>
         </el-table-column>
         <el-table-column
-          prop="case"
+          prop="CaseName"
           label="案场">
         </el-table-column>
         <el-table-column label="操作">
       </el-table>
     </div>
     <el-pagination
-      @size-change="handleSizeChange"
       @current-change="handleCurrentChange"
-      :current-page.sync="currentPage"
-      :page-size="10"
+      :current-page.sync="postData.page"
+      :page-size="postData.pagesize"
       layout="prev, pager, next, jumper"
-      :total="100">
+      :total="total">
     </el-pagination>
   </div>
 </template>
 
 <script>
-import { createNamespacedHelpers } from 'vuex'
-import tableSearch from '@/components/tableSearch/index'
-
-const { mapState: mapCaseState } = createNamespacedHelpers('case')
+import { mapState } from 'vuex'
 
 export default {
   name: '',
   data () {
     return {
-      currentPage: 0, // 当前页码
-      tableSearch: { // 表格搜索条件
-        key: '', // 搜索关键字
-        caseId: '', // 案场id
+      total: 0,
+      postData: { // 表格搜索条件
+        CaseId: '', // 案场id
+        page: 1, // 当前页码
+        pagesize: 10, // 请求数据量
       },
-      tableData: [{
-        areaName: 'xxx',
-        icon: 'xxx',
-        case: 'xxx'
-      }, {
-        areaName: 'xxx',
-        icon: 'xxx',
-        case: 'xxx'
-      }, {
-        areaName: 'xxx',
-        icon: 'xxx',
-        case: 'xxx'
-      }, {
-        areaName: 'xxx',
-        icon: 'xxx',
-        case: 'xxx'
-      }]
+      currentList: [],
     }
   },
-  computed: {
-    ...mapCaseState({
-      caseList: x => x.caseList,
-    })
+  created () {
+    this.getList()
   },
-  components: {
-    tableSearch,
+  computed: {
+    ...mapState({
+      cases: x => x.app.cases.list,
+      defaultCaseId: x => x.app.cases.default
+    }),
+    CaseId: {
+      get () {
+        return this.postData.CaseId || this.defaultCaseId
+      },
+      set (val) {
+        this.postData.CaseId = val
+      }
+    }
   },
   methods: {
-    handleSizeChange (val) {
-      console.log(`每页 ${val} 条`)
+    search () { // 搜索
+      this.postData.page = 1
+      this.currentList = []
+      this.getList()
+    },
+    getList () { // 获取列表
+      this.$ajax(this.$api.caseManager.getCaseAreaList.url, {
+        method: this.$api.caseManager.getCaseAreaList.method,
+        queryData: { ...this.postData, CaseId: this.CaseId }
+      }).then(res => {
+        for (var n = 0; n < res.list.length; n++) {
+          res.list[n].CaseName = this.cases.filter(x => x.CaseId === res.list[n].CaseId)[0].CaseName
+        }
+        this.currentList = res.list
+        this.postData.page = res.page
+        this.total = res.pagenum
+      })
     },
-    handleCurrentChange (val) {
-      console.log(`当前页: ${val}`)
+    handleCurrentChange (val) { // 跳转到分页
+      this.getList()
     },
     editItem (index, row) { // 编辑
       console.log(index, row)
         })
       })
     },
-    searchList (key) { // 搜索列表
-      console.log(key)
-    },
     addCaseArea () {
       this.$router.push({ name: 'addCaseArea' })
     }

src/util/api.js

       method: 'get',
       url: `${baseUrl}/common/case/key`
     },
+    getCaseAreaList: { // 获取案场区域列表
+      method: 'get',
+      url: `${baseUrl}/common/case/area`
+    },
+    addCaseArea: { // 新增案场区域
+      method: 'post',
+      url: `${baseUrl}/common/case/area`
+    },
   },
   goodsManager: {
     getGoodsSpecList: { // 商品规格列表