[update] 移动端-我的

src/components/lazy_vant.js

@@ -6,10 +6,14 @@ import Vue from 'vue'
 import {
   Picker,
   Popup,
-  Dialog
+  Dialog,
+  Uploader
 } from 'vant'
+
 import 'vant/lib/index.less'
+
 Vue.use(Picker)
 Vue.use(Popup)
+Vue.use(Uploader)
 Vue.prototype.$vantDialog = Dialog
 Vue.prototype.$vantConfirm = Dialog.confirm

src/components/menu/FirstLevelMenu.vue

@@ -74,13 +74,13 @@ export default {
     // 选择菜单
     selectMenu (menu) {
       console.log(menu)
-      // if (menu.path !== '/systemOverview') {
-      //   this.$warning({
-      //     title: '系统建设中',
-      //     onOk: () => {}
-      //   })
-      //   return
-      // }
+      if (menu.path !== '/systemOverview') {
+        this.$warning({
+          title: '系统建设中',
+          onOk: () => {}
+        })
+        return
+      }
       this.selectPath = menu.path
       if (menu.children && menu.children.length > 0) {
         this.$router.push({ path: menu.children[0].path })

src/store/modules/user.js

@@ -2,7 +2,7 @@ import Vue from 'vue'
 import { login, logout, phoneLogin, thirdLogin } from '@/api/login'
 import { ACCESS_TOKEN, USER_NAME, USER_INFO, USER_AUTH, SYS_BUTTON_AUTH, UI_CACHE_DB_DICT_DATA, TENANT_ID, CACHE_INCLUDED_ROUTES } from '@/store/mutation-types'
 import store from '@/store'
-import { welcome } from '@/utils/util'
+import { isMobile, welcome } from '@/utils/util'
 import { queryPermissionsByUser } from '@/api/api'
 import { getAction } from '@/api/manage'
 
@@ -118,7 +118,13 @@ const user = {
     GetPermissionList ({ commit }) {
       return new Promise((resolve, reject) => {
         queryPermissionsByUser().then(response => {
-          const menuData = response.result.menu
+          let menuData = response.result.menu
+          // 移动端只显示移动端页面菜单，PC端不显示移动端页面菜单
+          if (isMobile()) {
+            menuData = [menuData.find(item => item.path === '/mobile')]
+          } else {
+            menuData = menuData.filter(item => item.path !== '/mobile')
+          }
           const authData = response.result.auth
           const allAuthData = response.result.allAuth
           // Vue.ls.set(USER_AUTH,authData);

src/views/mobile/mine/Mine.vue

@@ -1,13 +1,171 @@
 <template>
-  <div>mine</div>
+  <a-spin :spinning="loading">
+    <div>
+      <a-form :form="form" class="custom-vertical-form">
+        <a-form-item style="margin-bottom: 0;">
+          <div class="upload-avatar-box">
+<!--            <j-image-upload v-decorator="['avatar', validatorRules.avatar]"-->
+<!--                            class="upload-avatar"-->
+<!--                            :number="1"-->
+<!--                            uploadLimitHideBtn-->
+<!--                            accept='.png,.PNG,.jpg,.JPG'></j-image-upload>-->
+            <van-uploader class="upload-avatar" v-model="fileList" max-count="1"></van-uploader>
+          </div>
+        </a-form-item>
+        <a-form-item label="用户名称">
+          <a-input placeholder="请输入用户名称" :max-length="50"
+                   @change="event => event.target.value = event.target.value.trim()"
+                   v-decorator="['username', validatorRules.username]"/>
+        </a-form-item>
+        <a-form-item label="用户类别">
+          <dict-picker :triggerChange="true"
+                       dictCode="user_type"
+                       v-decorator="['userType', validatorRules.userType]"
+                       placeholder="请选择用户类别"/>
+        </a-form-item>
+        <a-form-item label="所属单位">
+          <select-picker v-decorator="['selecteddeparts', validatorRules.selecteddeparts]"
+                         allowClear
+                         label-key="departName"
+                         :list="departList"
+                         placeholder="请选择所属单位"/>
+        </a-form-item>
+        <a-form-item label="联系方式">
+          <a-input placeholder="请输入联系方式"
+                   v-decorator="['phone', validatorRules.phone]" />
+        </a-form-item>
+      </a-form>
+    </div>
+  </a-spin>
 </template>
 
 <script>
+import { queryDepartTreeList } from '@api/api'
+import DictPicker from '@comp/vant/DictPicker'
+import SelectPicker from '@comp/vant/SelectPicker'
+import { getAction, getFileAccessHttpUrl } from '@api/manage'
 export default {
-  name: 'Mine'
+  name: 'Mine',
+  components: { SelectPicker, DictPicker },
+  data () {
+    return {
+      loading: false,
+      // 用户表单
+      form: this.$form.createForm(this),
+      // 表单校验
+      validatorRules: {
+        username: { rules: [{ required: true, message: '请输入用户名称' }], validateTrigger: 'blur' },
+        userType: { rules: [{ required: true, message: '请选择用户类别' }], validateTrigger: 'change' },
+        selecteddeparts: { rules: [{ required: true, message: '请选择所属单位' }], validateTrigger: 'change' },
+        phone: { rules: [{ required: true, message: '请输入联系方式' }, { validator: this.validateMobile }], validateTrigger: 'blur' }
+      },
+      // 部门下拉
+      departList: [],
+      fileList: []
+    }
+  },
+  created () {
+    this.loadDepartList()
+  },
+  mounted () {
+    this.model = Object.assign({}, this.$store.getters.userInfo)
+    this.form.setFieldsValue(Object.assign({}, this.model, {
+      selecteddeparts: this.model.departIds
+    }))
+    // 头像
+    if (this.model.avatar) {
+      this.fileList.push({
+        url: getFileAccessHttpUrl(this.model.avatar) + '&fullfilename=' + '头像',
+        isImage: true
+        // url: getFileAccessHttpUrl(this.model.avatar)
+      })
+    }
+    this.getUserDeparts(this.model.id)
+  },
+  methods: {
+    // 获取用户部门
+    getUserDeparts (userid) {
+      const that = this
+      getAction('/sys/user/userDepartList', { userId: userid }).then((res) => {
+        if (res.success) {
+          const departOptions = []
+          const selectDepartKeys = []
+          for (let i = 0; i < res.result.length; i++) {
+            selectDepartKeys.push(res.result[i].key)
+            // 新增负责部门选择下拉框
+            departOptions.push({
+              value: res.result[i].key,
+              label: res.result[i].title
+            })
+          }
+          that.model.selecteddeparts = selectDepartKeys.join(',')
+          this.$nextTick(() => {
+            this.form.setFieldsValue({
+              selecteddeparts: this.model.selecteddeparts
+            })
+          })
+          that.nextDepartOptions = departOptions
+        }
+      })
+    },
+    loadDepartList () {
+      const flattenTree = (tree) => {
+        const result = []
+        function flatten (node) {
+          result.push(node)
+          if (Array.isArray(node.children) && node.children.length) {
+            node.children.forEach(child => flatten(child))
+          }
+        }
+        tree.forEach((node) => flatten(node))
+        return result
+      }
+      return queryDepartTreeList().then(res => {
+        if (res.success) {
+          const tree = res.result || []
+          this.departList = flattenTree(tree)
+        }
+      })
+    }
+  }
 }
 </script>
 
-<style scoped>
+<style lang="less" scoped>
+.upload-avatar-box {
+  margin: 0.32rem auto;
+  position: relative;
+  width: 100%;
+  height: 1.24rem;
+  background: url("~@/assets/images/systemOverview/systemSettings/upload-avatar.png") no-repeat center center;
+  background-size: 1.24rem 1.24rem;
 
+  .upload-avatar {
+    width: 1.24rem;
+    height: 1.24rem;
+    position: absolute;
+    left: 50%;
+    top: 50%;
+    transform: translate(-50%, -50%);
+
+    /deep/ .van-uploader__preview-delete {
+      border-radius: 0 0 0 50%;
+      width: 0.14rem;
+      height: 0.14rem;
+    }
+    /deep/ .van-uploader__preview-image {
+      width: 1.24rem;
+      height: 1.24rem;
+    }
+    /deep/ .van-uploader__upload {
+      width: 1.24rem;
+      height: 1.24rem;
+      opacity: 0;
+    }
+    /deep/ .van-uploader__preview-delete-icon {
+      font-size: 0.16rem;
+      color: #fff;
+    }
+  }
+}
 </style>