管理后台-用户中心：注册用户

htmldev/manage/src/views/ums/customer/details.vue

@@ -0,0 +1,124 @@
+<template>
+  <div>
+    <el-dialog :title="exData.id ? '编辑': '新增'"
+               :visible.sync="dialog"
+               width="50%"
+               :close-on-click-modal="false"
+               top="50px">
+      <el-form ref="form"
+               :model="form"
+               :rules="formRules"
+               label-width="160px">
+        <el-form-item prop="user_name"
+                      label="昵称：">
+          <el-col :span="16">
+            <el-input v-model="form.user_name"
+                      placeholder=""
+                      disabled
+                      clearable></el-input>
+          </el-col>
+        </el-form-item>
+        <el-form-item prop="user_phone"
+                      label="手机号：">
+          <el-col :span="16">
+            <el-input v-model="form.user_phone"
+                      placeholder=""
+                      disabled
+                      clearable></el-input>
+          </el-col>
+        </el-form-item>
+        <el-form-item prop="user_type"
+                      :rules="formRules.required"
+                      label="用户类型：">
+          <el-radio v-model="form.user_type" label="0">用户</el-radio>
+          <el-radio v-model="form.user_type" label="1">艺人</el-radio>
+          <el-radio v-model="form.user_type" label="2">吧台</el-radio>
+          <el-radio v-model="form.user_type" label="3">老板</el-radio>
+        </el-form-item>
+      </el-form>
+      <div slot="footer" class="dialog-footer text-center">
+        <el-button @click="dialog = false">取 消</el-button>
+        <el-button type="primary"
+                   :disabled="booLock"
+                   @click="handleSubmit">保 存
+        </el-button>
+      </div>
+    </el-dialog>
+  </div>
+</template>
+
+<script>
+export default {
+  components: {},
+  props: {
+    value: {
+      type: Boolean,
+      default: true
+    },
+    exData: {
+      type: Object,
+      default: function () {
+        return {}
+      }
+    }
+  },
+  data () {
+    return {
+      dialog: !!this.value,
+      form: {
+        user_type: '0'
+      },
+      booLock: false
+    }
+  },
+  methods: {
+    handleSubmit () {
+      const url = '/v1/user/member/setType'
+      this.$refs.form.validate(async valid => {
+        if (valid) {
+          this.booLock = true
+          const data = await this.$fetch(url, {
+            ...this.form
+          })
+          this.booLock = false
+          if (data.code === 200) {
+            this.$message.success('提交成功')
+            this.$emit('success')
+            this.dialog = false
+          }
+        }
+      })
+    }
+  },
+  mounted () {
+    if (this.exData.id) {
+      this.$set(this.form, 'id', this.exData.id)
+      this.$set(this.form, 'user_name', this.exData.user_name)
+      this.$set(this.form, 'user_phone', this.exData.user_phone)
+      for (const key in this.exData) {
+        if (this.form.hasOwnProperty(key)) {
+          let value = this.exData[key]
+          if ((Array.isArray(value) && value.length >= 1) || (Object.prototype.toString.call(value) === '[object Object]') || (typeof value === 'string' && value) || typeof value === 'number') {
+            if (key === 'user_type') {
+              value = value.toString()
+            }
+            this.$set(this.form, key, value)
+          }
+        }
+      }
+    }
+  },
+  watch: {
+    dialog (val) {
+      if (!val) this.$emit('input', val)
+    }
+  }
+}
+</script>
+
+<style lang="scss" scoped>
+.top-tip {
+  margin-top: -20px;
+  margin-bottom: 20px;
+}
+</style>

htmldev/manage/src/views/ums/customer/index.vue

@@ -47,8 +47,10 @@
       <el-table-column label="性别" prop="user_sex"></el-table-column>
       <el-table-column label="注册时间" prop="created_at" width="160"></el-table-column>
       <el-table-column label="最近一次登录时间" prop="user_login_at" width="160"></el-table-column>
-      <el-table-column label="操作">
+      <el-table-column label="操作" fixed="right" width="140">
         <template slot-scope="scope">
+          <!--todo 设置权限-->
+          <el-button type="text" @click="edit(scope.row)">编辑</el-button>
           <el-button type="text" v-permission="'ums_customer_check'"
                      @click="$router.push({name: 'FmsCheck', query: {user_id: scope.row.id }})">消费记录
           </el-button>
@@ -66,16 +68,28 @@
       background
       layout="total, sizes, prev, pager, next, jumper"
       :total="totalCount"/>
+    <detail v-if="detailsDialog.show"
+            v-model="detailsDialog.show"
+            :exData="detailsDialog.exData"
+            @success="init"></detail>
   </div>
 </template>
 
 <script>
 import page from '@/mixin/page'
+import detail from './details'
 
 export default {
   mixins: [page],
+  components: {
+    detail,
+  },
   data () {
     return {
+      detailsDialog: {
+        show: false,
+        exData: {}
+      },
       time: [],
       searchForm: {
         user_type: '0' // 用户类型(0用户1艺人2吧台3老板)
@@ -84,6 +98,12 @@ export default {
       tableUrl: '/v1/user/member/List'
     }
   },
+  methods: {
+    edit (row) {
+      this.detailsDialog.exData = row
+      this.detailsDialog.show = true
+    }
+  },
   mounted () {
     this.init()
   }