第一次发布

src/views/system/auth/sysUser/SysCustomerInfoUpdate.vue

@@ -0,0 +1,180 @@
+<template>
+  <div>
+    <el-row>
+      <el-form ref="form" :rules="rules" :model="sysCustomerInfo" label-width="100px" :size="$store.getters.size">
+        <el-row :gutter="gridNum.row.gutter">
+          <el-col :span="12">
+            <el-form-item label="手机号码" prop="phone">
+              <el-input v-model="sysCustomerInfo.phone" clearable />
+            </el-form-item>
+          </el-col>
+          <el-col :span="12">
+            <el-form-item label="用户名称" prop="userName">
+              <el-input v-model="sysCustomerInfo.userName" clearable />
+            </el-form-item>
+          </el-col>
+        </el-row>
+        <el-row :gutter="gridNum.row.gutter">
+          <el-col :span="12">
+            <el-form-item label="用户昵称" prop="nickName">
+              <el-input v-model="sysCustomerInfo.nickName" clearable />
+            </el-form-item>
+          </el-col>
+          <el-col :span="12">
+            <el-form-item label="生日" prop="birthday">
+              <el-date-picker
+                v-model="sysCustomerInfo.birthday"
+                format="yyyy 年 MM 月 dd 日"
+                value-format="yyyy-MM-dd"
+                type="date"
+                placeholder="选择日期"
+              />
+            </el-form-item>
+          </el-col>
+        </el-row>
+        <el-row :gutter="gridNum.row.gutter">
+          <el-col :span="12">
+            <el-form-item label="头像" prop="headPhoto">
+              <el-upload
+                :action="updateFileUrl"
+                :data="{'ossKey':'xingyou','pathKey':'head','encrypt':'PUBLIC'}"
+                :before-upload="imgCompress"
+                list-type="picture-card"
+                :on-preview="headPhotoPreview"
+                :on-remove="headPhotoRemove"
+                :on-success="headPhotoSuccess"
+                :headers="headers"
+                :limit="1"
+                :file-list="fileList"
+              >
+                <i class="el-icon-plus" />
+              </el-upload>
+              <el-dialog :visible.sync="showHeadImage" :modal="false">
+                <img width="100%" :src="headImage" alt="">
+              </el-dialog>
+            </el-form-item>
+          </el-col>
+        </el-row>
+        <el-col :span="24" style="text-align: right">
+          <el-button @click="close">取消</el-button>
+          <el-button
+            type="primary"
+            @click="submit"
+          >提交</el-button>
+        </el-col>
+      </el-form>
+    </el-row>
+  </div>
+</template>
+<script>
+import sysCustomerInfoApi from '@/api/user/sysCustomerInfo'
+import { getToken } from '@/utils/auth'
+import { imgCompress } from '@/utils'
+import utils from '@/utils/encode'
+const JSESSIONID = utils.uuid()
+export default {
+  props: {
+    sysCustomerInfo: {
+      type: Object,
+      default() {
+
+      }
+    }
+  },
+  data() {
+    const chekPhone = (rule, value, callback) => { // 检查手机号是否存在
+      if (value.length === 11) {
+        sysCustomerInfoApi.getByPhone(value).then(res => {
+          if (res.data && res.data.id !== this.sysCustomerInfo.id) {
+            return callback(new Error('手机号码已经存在'))
+          } else {
+            return callback()
+          }
+        })
+      } else {
+        return callback()
+      }
+    }
+    return {
+      headers: {
+        'dataSources': 'WEB',
+        'Authorization': getToken(),
+        'JSESSIONID': JSESSIONID,
+        'token': utils.bcrypt(JSESSIONID)
+      },
+      fileList: [],
+      imgCompress,
+      updateSysCustomerInfo: {
+        phone: undefined,
+        password: undefined,
+        nickName: undefined,
+        birthday: undefined,
+        headPhoto: undefined,
+        updateSource: 'XO_OMS'
+      },
+      updateFileUrl: process.env.VUE_APP_UPLOAD_URL,
+      showHeadImage: false,
+      headImage: '',
+      gridNum: {
+        row: {
+          gutter: 2
+        },
+        cols: {
+          xs: 24,
+          sm: 24,
+          md: 12,
+          lg: 12,
+          xl: 6
+        }
+      },
+      rules: {
+        phone: [
+          { required: true, message: '请输入手机号', trigger: 'blur' },
+          { pattern: /^1[3456789]\d{9}$/, message: '目前只支持中国大陆的手机号码' },
+          { validator: chekPhone, trigger: 'blur', message: '手机号码已经存在' }
+
+        ]
+
+      }
+    }
+  },
+  created() {
+    this.updateSysCustomerInfo = { ...this.sysCustomerInfo }
+    if (this.sysCustomerInfo.headPhoto) {
+      this.fileList.push({ name: '头像', url: this.sysCustomerInfo.headPhoto })
+      this.updateSysCustomerInfo.headPhoto = undefined
+    }
+  },
+  methods: {
+    headPhotoRemove(file, fileList) { // 头像删除
+      this.sysCustomerInfo.headPhoto = undefined
+      this.headImage = undefined
+    },
+    headPhotoPreview(file) { // 预览头像
+      this.showHeadImage = true
+    },
+    headPhotoSuccess(res) { // 头像上传成功
+      this.headImage = res.data.publicUrl
+      this.sysCustomerInfo.headPhoto = res.data.publicUrl
+    },
+    submit() {
+      this.$refs['form'].validate((valid) => {
+        if (valid) {
+          this.update(this.sysCustomerInfo)
+        }
+      })
+    },
+    update() {
+      // 更新
+      sysCustomerInfoApi.update(this.sysCustomerInfo).then(res => {
+        this.$message.success(res.msg)
+        this.$emit('closeDialog')
+        this.$emit('getByPage')
+      })
+    },
+    close() {
+      this.$emit('closeDialog')
+    }
+  }
+}
+</script>