页面优化

src/router/router-map.js

@@ -0,0 +1,104 @@
+// 审核管理
+const audit = [
+  {
+    id: 1,
+    name: '审核管理',
+    children: [
+      { id: 1, name: '机构认证审核' },
+      { id: 2, name: '机构认证审核详情' },
+      { id: 3, name: '设备审核列表' },
+      { id: 4, name: '设备审核详情' },
+      { id: 5, name: '医师审核列表' },
+      { id: 6, name: '医师审核详情' },
+      { id: 7, name: '文章审核列表' },
+      { id: 8, name: '审核文章' },
+      { id: 9, name: '图片审核列表' },
+      { id: 10, name: '审核图片' },
+      { id: 11, name: '视频审核列表' },
+      { id: 12, name: '文件审核列表' }
+    ]
+  }
+]
+// 机构认证
+const club = [
+  {
+    id: 2,
+    name: '机构认证',
+    children: [
+      { id: 1, name: '机构列表' },
+      { id: 2, name: '添加机构' },
+      { id: 3, name: '修改机构' },
+      { id: 4, name: '登录用户' },
+      { id: 5, name: '设备列表' },
+      { id: 6, name: '添加设备' },
+      { id: 7, name: '修改设备' }
+    ]
+  }
+]
+// 医师认证
+const doctor = [
+  {
+    id: 3,
+    name: '医师认证',
+    children: [
+      { id: 1, name: '医师列表' },
+      { id: 2, name: '添加医师' },
+      { id: 3, name: '修改医师资料' }
+    ]
+  }
+]
+// 用户反馈
+const feedback = [
+  {
+    id: 4,
+    name: '用户反馈',
+    children: [
+      { id: 1, name: '反馈列表' },
+      { id: 2, name: '反馈处理' }
+    ]
+  }
+]
+// 新手帮助
+const helper = [
+  {
+    id: 5,
+    name: '新手帮助',
+    children: [
+      { id: 1, name: '视频教程' },
+      { id: 2, name: '文档教程' }
+    ]
+  }
+]
+// 资料库
+const material = [
+  {
+    id: 6,
+    name: '资料库',
+    children: [
+      { id: 1, name: '文章列表' },
+      { id: 2, name: '编辑文章' },
+      { id: 3, name: '图片列表' },
+      { id: 4, name: '编辑图片' },
+      { id: 5, name: '视频列表' },
+      { id: 6, name: '文件列表' }
+    ]
+  }
+]
+// 账号管理
+const supplier = [
+  {
+    id: 7,
+    name: '账号管理',
+    children: [
+      { id: 1, name: '供应商账号' },
+      { id: 2, name: '添加供应商' },
+      { id: 3, name: '修改供应商' },
+      { id: 4, name: '查看认证机构' },
+      { id: 5, name: '认证机构详情' },
+      { id: 6, name: '查看设备认证' },
+      { id: 7, name: '设备认证详情' }
+    ]
+  }
+]
+
+export default [...audit, ...club, ...doctor, ...feedback, ...helper, ...material, ...supplier]

src/store/modules/tagsView.js

@@ -69,6 +69,11 @@ const mutations = {
         break
       }
     }
+  },
+  // 清空全部页面
+  CLEAR_ALL_VIEW: (state) => {
+    state.visitedViews = []
+    state.cachedViews = []
   }
 }
 

src/utils/formatRoutesToModule.js

@@ -1,38 +1,54 @@
 import { constantRoutes, asyncRoutes } from '@/router/index'
 import store from '@/store'
+import routerMap from '@/router/router-map'
 
 let routesTree = []
 let routes = []
+let routeMap = []
 
+// 获取全部路由信息
 function getRoutes() {
-  const roles = store.getters.roles
   routes = [...constantRoutes, ...asyncRoutes].filter(item => item.meta)
-  if (!roles.includes('admin')) {
+  if (!store.getters.roles.includes('admin')) {
     routes = routes.filter(route => !route.meta.roles || route.meta.roles.includes('normal'))
   }
   return routes
 }
 
+// 从路由map中获取id
+function getRouteKeyFromMap(name, flag = false) {
+  if (flag) {
+    return routerMap.reduce((prev, item) => {
+      prev.push(...item.children)
+      return prev
+    }, []).find(item => item.name === name)?.id
+  } else {
+    return routerMap.find(item => item.name === name)?.id
+  }
+}
+
 function formatRoutesToModule() {
   routes = getRoutes()
   routesTree = []
+  routeMap = []
   routes.forEach(first => {
     const obj = {
       label: first.meta.title,
-      value: first.meta.id
+      value: getRouteKeyFromMap(first.meta.title, false)
     }
+    // 提取当前登录用户可以看到的路由
+    routeMap.push(routerMap.find(item => item.name === first.meta.title))
     if (first.children) {
       obj.children = []
       first.children.forEach(second => {
         obj.children.push({
           label: second.meta.title,
-          value: second.meta.id
+          value: getRouteKeyFromMap(second.meta.title, true)
         })
       })
     }
     routesTree.push(obj)
   })
-
   return routesTree
 }
 
@@ -43,10 +59,10 @@ export function getToutesTree() {
 // 根据id获取栏目
 export function getModuleType(ids) {
   ids = ids.split('-')
-  const parent = routes.find(item => item.meta.id === parseInt(ids[0]))
-  const children = parent && parent.children.find(item => item.meta.id === parseInt(ids[1]))
+  const parent = routeMap.find(item => item.id === parseInt(ids[0]))
+  const children = parent && parent.children.find(item => item.id === parseInt(ids[1]))
   if (!parent || !children) {
-    return ''
+    return store.getters.roles.includes('admin') ? '未知模块' : ''
   }
-  return `${parent.meta.title}/${children.meta.title}`
+  return `${parent.name}/${children.name}`
 }

src/views/admin/supplier/club/detail.vue

@@ -2,83 +2,48 @@
   <div class="club-edit">
     <el-form ref="submitForm" class="club-edit-form" label-width="120px" :model="formData" :rules="rules">
       <el-form-item label="机构名称:" prop="name">
-        <el-input v-model="formData.name" placeholder="请输入机构名称" disabled />
+        <span>{{ formData.name }}</span>
       </el-form-item>
       <el-form-item label="所在地区:" prop="address">
-        <el-cascader
-          ref="cascader"
-          v-model="formData.address"
-          disabled
-          :class="{ display: cascaderDisplay }"
-          clearable
-          :props="cascaderProps"
-          style="width: 100%"
-          :placeholder="cascaderPlaceholder"
-          @change="handleChange"
-        />
+        <span>{{ cascaderPlaceholder }}</span>
       </el-form-item>
       <el-form-item label="详细地址:" prop="fullAddress">
-        <el-input v-model="formData.fullAddress" placeholder="请输入详细地址" disabled />
+        <span>{{ formData.fullAddress }}</span>
       </el-form-item>
       <el-form-item label="经纬度:" prop="point">
-        <el-input v-model="formData.point" placeholder="请输入经纬度 （格式：纬度,经度，可通过右侧地图小按钮获取）" disabled>
-          <el-button slot="append" icon="el-icon-map-location" />
-        </el-input>
+        <span>{{ formData.point }}</span>
       </el-form-item>
       <el-form-item label="联系方式:" prop="mobile">
-        <el-input v-model="formData.mobile" placeholder="请输入联系方式" disabled />
+        <span>{{ formData.mobile }}</span>
       </el-form-item>
       <el-form-item label="机构logo:" prop="logoImage">
-        <el-input v-show="false" v-model="formData.logoImage" disabled />
-        <upload-image
-          tip="建议尺寸：242px * 242px"
-          :image-list="logoList"
-          :before-upload="beforeLogoUpload"
-          @success="uploadLogoSuccess"
-          @remove="handleLogoRemove"
-        />
+        <el-image :src="formData.logoImage" fit="cover" style="width:120px;height:120px;" />
       </el-form-item>
       <el-form-item label="轮播图:" prop="banner">
-        <el-input v-show="false" v-model="formData.banner" disabled />
-        <upload-image
-          tip="至少上传一张，最多6张；建议尺寸：542px * 542px"
-          :image-list="bannerList"
-          :before-upload="beforeBannerUpload"
-          :limit="1"
-          @success="uploadBannerSuccess"
-          @remove="handleBannerRemove"
-        />
+        <template v-for="(image, index) in bannerList">
+          <el-image :key="index" :src="image" fit="cover" :preview-src-list="bannerList" class="thumbnail" />
+        </template>
       </el-form-item>
     </el-form>
   </div>
 </template>
 
 <script>
-// import Location from '@/components/location'
-import AMapUI from '@/components/AMapUI'
-import UploadImage from '@/components/UploadImage'
 import { mapGetters } from 'vuex'
 import { saveBrandAuth, getAuthFormData } from '@/api/auth'
-import { getAddress } from '@/api/common'
 import { isPoint } from '@/utils/validate'
 
 export default {
-  components: {
-    // Location
-    [AMapUI.name]: AMapUI,
-    UploadImage
-  },
   data() {
     var validatePoint = (rule, value, callback) => {
       if (value === '') {
         callback(new Error('经纬度坐标不能为空'))
       } else {
         if (isPoint(value)) {
-          this.$refs.ruleForm.validateField('point')
+          callback()
         } else {
-          callback('经纬度坐标格式不正确，(例如：114.095294,22.536004)')
+          callback(new Error('经纬度坐标格式不正确，(例如：114.095294,22.536004)'))
         }
-        callback()
       }
     }
 
@@ -120,18 +85,6 @@ export default {
   },
   computed: {
     ...mapGetters(['authUserId', 'proxyInfo']),
-    // 级联选择器
-    cascaderProps() {
-      return {
-        lazy: true,
-        lazyLoad: async(node, resolve) => {
-          const { level, value = 0 } = node
-          const result = await getAddress({ parentId: value, type: level })
-          const nodes = result.data.map(item => ({ value: item.id, label: item.name, leaf: level >= 2 }))
-          resolve(nodes)
-        }
-      }
-    },
     cascaderDisplay() {
       return this.formData.address.length > 0
     },
@@ -148,14 +101,6 @@ export default {
     this.initFormData()
   },
   methods: {
-    // 获取地址
-    initAddress() {
-      return getAddress({
-        parentId: 19,
-        type: 1
-      })
-    },
-
     // 地图标记变化
     markerChange(point) {
       this.formData.point = `${point.lng},${point.lat}`
@@ -172,10 +117,7 @@ export default {
         this.formData.mobile = res.data.mobile
         this.formData.logoImage = res.data.logo
         this.formData.banner = res.data.bannerList.length || ''
-
-        this.logoList = [{ name: '', url: res.data.logo }]
-        this.bannerList = res.data.bannerList.map(item => ({ name: '', url: item }))
-
+        this.bannerList = res.data.bannerList
         this.formData.address = [res.data.provinceId, res.data.cityId, res.data.townId]
         // this.formData.address = '广东省/深圳市/福田区'
         this.area = res.data.area
@@ -276,9 +218,10 @@ export default {
 </script>
 
 <style lang="scss" scoped>
-#allmap {
-  width: 100%;
-  height: 600px;
+.thumbnail{
+  width:160px;
+  height:160px;
+  margin-right: 16px;
 }
 
 .club-edit {
@@ -286,7 +229,7 @@ export default {
 }
 
 .club-edit-form {
-  width: 600px;
+  width: 660px;
   margin: 0 auto;
   margin-top: 80px;
 }

src/views/admin/supplier/club/device/detail.vue

@@ -2,11 +2,11 @@
   <div v-loading="isLoading" class="addProduct">
     <el-form ref="addFormRef" label-width="120px" class="addForm" :model="formData" :rules="rules">
       <el-form-item label="设备名称:" prop="productName">
-        <el-input v-model="formData.productName" placeholder="请输入设备名称" disabled />
+        <span>{{ formData.productName }}</span>
       </el-form-item>
 
       <el-form-item label="设备SN码:" prop="snCode">
-        <el-input v-model="formData.snCode" placeholder="请输入设备SN码" disabled />
+        <span>{{ formData.snCode }}</span>
       </el-form-item>
 
       <el-form-item v-if="shopType === 2" label="所属品牌:" prop="brandId">
@@ -16,46 +16,26 @@
       </el-form-item>
 
       <el-form-item label="设备图片:" prop="productImage">
-        <upload-image ref="uploadImageRef2" :file-list="fileList1" disabled @success="imageUploadSuccess1" />
-        <el-input v-model="formData.productImage" class="hiddenInput" />
+        <el-image :src="formData.productImage" fit="cover" class="thumbnail" />
       </el-form-item>
       <el-form-item label="授权牌:" prop="certificateImage">
-        <upload-image ref="uploadImageRef2" :file-list="fileList2" disabled @success="imageUploadSuccess2" />
-        <el-input v-model="formData.certificateImage" class="hiddenInput" />
+        <el-image :src="formData.certificateImage" fit="cover" class="thumbnail" />
       </el-form-item>
-      <el-form-item label="相关参数:" prop="paramList">
+      <el-form-item label="相关参数:">
         <div v-for="(item, index) in paramList" :key="index" class="form-group paramsItem">
-          <el-input v-model="item.paramName" class="param-title" placeholder="参数名称" maxlength="10" disabled />
-          <el-input v-model="item.paramContent" class="param-info" placeholder="请输入参数信息" maxlength="50" disabled />
-          <span v-if="paramsCount > 4" class="closed el-icon-close" @click="handleRemoveParam(index)" />
+          <el-input v-model="item.paramName" class="param-title" placeholder="参数名称" maxlength="10" />
+          <el-input v-model="item.paramContent" class="param-info" placeholder="请输入参数信息" maxlength="50" />
         </div>
-        <!-- <el-button type="primary" size="mini" @click="handleAddParam">添加参数</el-button> -->
       </el-form-item>
-      <!-- <el-form-item label="上线状态:">
-        <el-select
-          v-model="formData.status"
-          placeholder="上架状态"
-          style="width: 100%"
-        >
-          <el-option label="上线" :value="1" />
-          <el-option label="下线" :value="0" />
-        </el-select>
-      </el-form-item>-->
     </el-form>
-    <!-- <div class="submit-btn">
-      <el-button type="primary" @click="submit">保存</el-button>
-      <el-button type="warning" @click="$_back()">返回</el-button>
-    </div> -->
   </div>
 </template>
 
 <script>
-import UploadImage from '@/views/components/uploadImage.vue'
 import { saveProduct, getProductById } from '@/api/product'
 import { fetchBrandList } from '@/api/brand'
 import { mapGetters } from 'vuex'
 export default {
-  components: { UploadImage },
   data() {
     return {
       isLoading: false,
@@ -92,14 +72,6 @@ export default {
   computed: {
     ...mapGetters(['authUserId', 'proxyInfo', 'shopType', 'brandId'])
   },
-  watch: {
-    paramList: {
-      deep: true,
-      handler: function() {
-        this.formData.paramList = this.setParamToFormData()
-      }
-    }
-  },
   created() {
     this.formData.productId = parseInt(this.$route.query.id)
     this.formData.authUserId = this.proxyInfo?.authUserId || this.authUserId
@@ -113,15 +85,6 @@ export default {
     }
   },
   methods: {
-    // 提交
-    submit() {
-      this.formData.paramList = this.setParamToFormData()
-      this.$refs.addFormRef.validate(valide => {
-        if (valide) {
-          this.save()
-        }
-      })
-    },
     // 初始化表单数据
     initFormData() {
       this.isLoading = true
@@ -137,11 +100,6 @@ export default {
         }
         // 初始化参数
         this.paramList = res.data.paramList
-        this.paramsCount = this.paramList.length
-        if (this.paramsCount < 4) {
-          this.initParamList(4 - this.paramsCount)
-        }
-        this.initImageList()
         this.isLoading = false
       })
     },
@@ -152,19 +110,6 @@ export default {
         this.brandList = res.data
       })
     },
-    // 初始化上传图片列表
-    initImageList() {
-      setTimeout(() => {
-        const productImage = this.formData.productImage
-        const certificateImage = this.formData.certificateImage
-        if (productImage) {
-          this.fileList1.push({ name: 'productImage', url: productImage })
-        }
-        if (certificateImage) {
-          this.fileList2.push({ name: 'certificateImage', url: certificateImage })
-        }
-      }, 200)
-    },
     // 保存表单数据
     save() {
       this.isLoading = true
@@ -185,43 +130,6 @@ export default {
         .finally(() => {
           this.isLoading = false
         })
-    },
-    // 保存参数到formdata
-    setParamToFormData() {
-      return this.paramList.filter(item => item.paramContent !== '' && item.paramName !== '')
-    },
-    // 添加一栏参数
-    handleAddParam() {
-      this.paramsCount += 1
-      this.paramList.push({
-        paramContent: '',
-        paramName: ''
-      })
-    },
-    // 删除一栏参数
-    handleRemoveParam(index) {
-      this.paramsCount -= 1
-      this.paramList.splice(index, 1)
-    },
-    // 图片上传成功 产品图片
-    imageUploadSuccess1(data) {
-      this.formData.productImage = data.data
-    },
-    // 图片上传成功 授权牌照
-    imageUploadSuccess2(data) {
-      this.formData.certificateImage = data.data
-    },
-    setParamList(data) {
-      this.paramList = data.paramList
-    },
-    // 初始化参数列表
-    initParamList(count) {
-      for (let i = 0; i < count; i++) {
-        this.paramList.push({
-          paramContent: '',
-          paramName: ''
-        })
-      }
     }
   }
 }
@@ -270,4 +178,9 @@ export default {
   height: 0;
   display: none;
 }
+
+.thumbnail{
+  width:160px;
+  height:160px;
+}
 </style>

src/views/admin/supplier/club/index.vue

@@ -32,9 +32,9 @@
         <el-option label="未上线" :value="0" />
       </el-select>
       <el-button icon="el-icon-search" type="primary" @click="getList">查询</el-button>
-      <el-button icon="el-icon-upload" type="primary" @click="improtDialogVisible = true">导入</el-button>
+      <!-- <el-button icon="el-icon-upload" type="primary" @click="improtDialogVisible = true">导入</el-button> -->
       <el-button icon="el-icon-document" type="primary" @click="handleExportExcel">导出</el-button>
-      <el-button icon="el-icon-document-copy" type="primary" @click="downLoadExportExcel">获取导入模板</el-button>
+      <!-- <el-button icon="el-icon-document-copy" type="primary" @click="downLoadExportExcel">获取导入模板</el-button> -->
     </div>
     <!-- 表格区域 -->
     <el-table

src/views/common/helper/video/index.vue

@@ -147,6 +147,13 @@ export default {
   },
 
   data() {
+    var validateFileModule = (rule, value, callback) => {
+      if (value.length === 0) {
+        callback(new Error('请选择所属模块'))
+      } else {
+        callback()
+      }
+    }
     return {
       listLoading: false,
       dialogVisible: false,
@@ -164,20 +171,9 @@ export default {
       uploadFileList: [],
       dialogFormData: {},
       rules: {
-        fileTitle: [{
-          required: true,
-          message: '请输入标题', trigger: ['change', 'blur']
-        }],
-        fileUrl: [
-          {
-            required: true,
-            message: '请选择文件', trigger: 'change'
-          }
-        ],
-        fileModule: [{
-          required: true,
-          message: '请选择所属模块', trigger: 'change'
-        }]
+        fileTitle: [{ required: true, message: '请输入标题', trigger: ['change', 'blur'] }],
+        fileUrl: [{ required: true, message: '请选择文件', trigger: 'change' }],
+        fileModule: [{ required: true, validator: validateFileModule, message: '请选择所属模块', trigger: 'change' }]
       }
     }
   },

src/views/login/index.vue

@@ -125,6 +125,7 @@ export default {
         if (!valid) return
         this.loading = true
         this.$store.dispatch('user/login', this.loginForm).then(res => {
+          this.$store.commit('tagsView/CLEAR_ALL_VIEW')
           this.$router.replace(initGoPage())
         })
       })