第一次提交

src/views/modules/user/user-add-or-update.vue

@@ -0,0 +1,246 @@
+<template>
+  <el-dialog :title="!dataForm.id ? '新增' : '修改'" :close-on-click-modal="false" :visible.sync="visible" @close="handlereset">
+    <el-form :model="dataForm" :rules="dataRule" ref="dataForm" @keyup.enter.native="dataFormSubmit()"
+      label-width="80px">
+      <el-form-item label="姓名" prop="name">
+        <el-input v-model="dataForm.name" placeholder="姓名"></el-input>
+      </el-form-item>
+      <el-form-item label="年龄" prop="age">
+        <el-input v-model="dataForm.age" placeholder="年龄"></el-input>
+      </el-form-item>
+      <el-form-item label="性别" prop="sex">
+        <!-- <el-input v-model="dataForm.sex" placeholder="性别"></el-input> -->
+        <el-radio v-model="dataForm.sex" :label=1>男</el-radio>
+        <el-radio v-model="dataForm.sex" :label=0>女</el-radio>
+      </el-form-item>
+      <el-form-item label="头像" prop="avatar">
+        <!-- <el-input v-model="dataForm.avatar" placeholder="头像"></el-input> -->
+        <el-upload action="http://localhost:9100/pb/oss/fileoss" list-type="picture-card"
+          :on-preview="handlePictureCardPreview" :file-list="fileList" :on-success="handlePicSuccess"
+          :on-remove="handleRemove">
+          <i class="el-icon-plus"></i>
+        </el-upload>
+        <el-dialog :visible.sync="dialogVisible" :append-to-body="true">
+          <img width="100%" :src="dataForm.avatar" alt="">
+        </el-dialog>
+      </el-form-item>
+      <el-form-item label="昵称" prop="nickname">
+        <el-input v-model="dataForm.nickname" placeholder="昵称"></el-input>
+      </el-form-item>
+      <el-form-item label="电话" prop="tel">
+        <el-input v-model="dataForm.tel" placeholder="电话"></el-input>
+      </el-form-item>
+      <el-form-item label="密码" prop="password">
+        <el-input v-model="dataForm.password" placeholder="密码"></el-input>
+      </el-form-item>
+      <el-form-item label="会员类型" prop="vip">
+        <el-input v-model="dataForm.vip" placeholder="0-普通 1-vip"></el-input>
+      </el-form-item>
+      <el-form-item label="vip 有效期" prop="vipValidtime">
+        <el-input v-model="dataForm.vipValidtime" placeholder="vip 有效期"></el-input>
+      </el-form-item>
+      <el-form-item label="花生币" prop="peanutCoin">
+        <el-input v-model="dataForm.peanutCoin" placeholder="花生币"></el-input>
+      </el-form-item>
+      <!-- <el-form-item label="阅读时间" prop="readTime">
+      <el-input v-model="dataForm.readTime" placeholder="阅读时间"></el-input>
+    </el-form-item>
+    <el-form-item label="最后登录时间" prop="lastLoginTime">
+      <el-input v-model="dataForm.lastLoginTime" placeholder="最后登录时间"></el-input>
+    </el-form-item> -->
+      <!-- <el-form-item label="创建时间" prop="createTime">
+      <el-input v-model="dataForm.createTime" placeholder="创建时间"></el-input>
+    </el-form-item>
+    <el-form-item label="更新时间" prop="updateTime">
+      <el-input v-model="dataForm.updateTime" placeholder="更新时间"></el-input>
+    </el-form-item>
+    <el-form-item label="删除标记" prop="delFlag">
+      <el-input v-model="dataForm.delFlag" placeholder="删除标记"></el-input>
+    </el-form-item> -->
+    </el-form>
+    <span slot="footer" class="dialog-footer">
+      <el-button @click="handlereset">取消</el-button>
+      <el-button type="primary" @click="dataFormSubmit()">确定</el-button>
+    </span>
+  </el-dialog>
+</template>
+
+<script>
+export default {
+  data() {
+    return {
+      visible: false,
+      dialogVisible: false,
+      fileList: [],
+      dataForm: {
+        id: 0,
+        name: '',
+        age: '',
+        sex: '',
+        avatar: '',
+        nickname: '',
+        tel: '',
+        password: '',
+        vip: '',
+        vipValidtime: '',
+        peanutCoin: '',
+        readTime: '',
+        lastLoginTime: '',
+        createTime: '',
+        updateTime: '',
+        delFlag: '',
+      },
+      dataRule: {
+        // name: [
+        //   { required: true, message: '姓名不能为空', trigger: 'blur' }
+        // ],
+        // age: [
+        //   { required: true, message: '年龄不能为空', trigger: 'blur' }
+        // ],
+        // sex: [
+        //   { required: true, message: '性别不能为空', trigger: 'blur' }
+        // ],
+        // avatar: [
+        //   { required: true, message: '头像不能为空', trigger: 'blur' }
+        // ],
+        // nickname: [
+        //   { required: true, message: '昵称不能为空', trigger: 'blur' }
+        // ],
+        // tel: [
+        //   { required: true, message: '电话不能为空', trigger: 'blur' }
+        // ],
+        // password: [
+        //   { required: true, message: '密码不能为空', trigger: 'blur' }
+        // ],
+        // vip: [
+        //   { required: true, message: '0-普通 1-vip不能为空', trigger: 'blur' }
+        // ],
+        // vipValidtime: [
+        //   { required: true, message: 'vip 有效期不能为空', trigger: 'blur' }
+        // ],
+        // peanutCoin: [
+        //   { required: true, message: '花生币不能为空', trigger: 'blur' }
+        // ],
+        // readTime: [
+        //   { required: true, message: '阅读时间不能为空', trigger: 'blur' }
+        // ],
+        // lastLoginTime: [
+        //   { required: true, message: '最后登录时间不能为空', trigger: 'blur' }
+        // ],
+        // createTime: [
+        //   { required: true, message: '创建时间不能为空', trigger: 'blur' }
+        // ],
+        // updateTime: [
+        //   { required: true, message: '更新时间不能为空', trigger: 'blur' }
+        // ],
+        // delFlag: [
+        //   { required: true, message: '删除标记不能为空', trigger: 'blur' }
+        // ]
+      }
+    }
+  },
+  methods: {
+    init(id) {
+      this.dataForm.id = id || 0
+      this.visible = true
+      this.$nextTick(() => {
+        this.$refs['dataForm'].resetFields()
+        if (this.dataForm.id) {
+          this.$http({
+            url: this.$http.adornUrl(`/book/user/info/${this.dataForm.id}`),
+            method: 'get',
+            params: this.$http.adornParams()
+          }).then(({ data }) => {
+            if (data && data.code === 0) {
+              this.dataForm.name = data.user.name
+              this.dataForm.age = data.user.age
+              this.dataForm.sex = data.user.sex
+              this.dataForm.avatar = data.user.avatar
+              this.dataForm.nickname = data.user.nickname
+              this.dataForm.tel = data.user.tel
+              this.dataForm.password = data.user.password
+              this.dataForm.vip = data.user.vip
+              this.dataForm.vipValidtime = data.user.vipValidtime
+              this.dataForm.peanutCoin = data.user.peanutCoin
+              this.dataForm.readTime = data.user.readTime
+              this.dataForm.lastLoginTime = data.user.lastLoginTime
+              this.dataForm.createTime = data.user.createTime
+              this.dataForm.updateTime = data.user.updateTime
+              this.dataForm.delFlag = data.user.delFlag
+              if (data.user.avatar != "") {
+                var img = { name: '', url: data.user.avatar }
+                var attr = []
+                attr.push(img)
+                this.fileList = attr
+              }
+
+            }
+          })
+        }
+      })
+    },
+    // 表单提交
+    dataFormSubmit() {
+      this.$refs['dataForm'].validate((valid) => {
+        if (valid) {
+          this.$http({
+            url: this.$http.adornUrl(`/book/user/${!this.dataForm.id ? 'save' : 'update'}`),
+            method: 'post',
+            data: this.$http.adornData({
+              'id': this.dataForm.id || undefined,
+              'name': this.dataForm.name,
+              'age': this.dataForm.age,
+              'sex': this.dataForm.sex,
+              'avatar': this.dataForm.avatar,
+              'nickname': this.dataForm.nickname,
+              'tel': this.dataForm.tel,
+              'password': this.dataForm.password,
+              'vip': this.dataForm.vip,
+              'vipValidtime': this.dataForm.vipValidtime,
+              'peanutCoin': this.dataForm.peanutCoin,
+              'readTime': this.dataForm.readTime,
+              'lastLoginTime': this.dataForm.lastLoginTime,
+              'createTime': this.dataForm.createTime,
+              'updateTime': this.dataForm.updateTime,
+              'delFlag': this.dataForm.delFlag
+            })
+          }).then(({ data }) => {
+            if (data && data.code === 0) {
+              this.$message({
+                message: '操作成功',
+                type: 'success',
+                duration: 1500,
+                onClose: () => {
+                  this.visible = false
+                  this.$emit('refreshDataList')
+                }
+              })
+            } else {
+              this.$message.error(data.msg)
+            }
+          })
+        }
+      })
+    },
+    handlePictureCardPreview(file) {
+      this.dataForm.avatar = file.url;
+      this.dialogVisible = true;
+    }, 
+    handlePicSuccess(res, file) {
+      if (res.msg == "success") {
+        this.dataForm.avatar = res.url;
+        this.$message.success("上传成功");
+      } else {
+        this.$message.error("上传失败");
+      }
+    }, 
+    handleRemove(file) {
+      this.dataForm.avatar = '';
+    },
+    handlereset(){
+      this.fileList = [],
+      this.visible = false
+    },
+  }
+}
+</script>

src/views/modules/user/user.vue

@@ -0,0 +1,258 @@
+<template>
+  <div class="mod-config">
+    <el-form :inline="true" :model="dataForm" @keyup.enter.native="getDataList()">
+      <el-form-item>
+        <el-input v-model="dataForm.key" placeholder="参数名" clearable></el-input>
+      </el-form-item>
+      <el-form-item>
+        <el-button @click="getDataList()">查询</el-button>
+        <el-button v-if="isAuth('book:user:save')" type="primary" @click="addOrUpdateHandle()">新增</el-button>
+        <el-button v-if="isAuth('book:user:delete')" type="danger" @click="deleteHandle()" :disabled="dataListSelections.length <= 0">批量删除</el-button>
+      </el-form-item>
+    </el-form>
+    <el-table
+      :data="dataList"
+      border
+      v-loading="dataListLoading"
+      @selection-change="selectionChangeHandle"
+      style="width: 100%;">
+      <el-table-column
+        type="selection"
+        header-align="center"
+        align="center"
+        width="50">
+      </el-table-column>
+      <el-table-column label="序号" width="70" align="center">
+        <template slot-scope="scope">
+          {{ (pageIndex - 1) * pageSize + scope.$index + 1 }}
+        </template>
+      </el-table-column>
+      <!-- <el-table-column
+        prop="id"
+        header-align="center"
+        align="center"
+        label="">
+      </el-table-column> -->
+      <el-table-column
+        prop="name"
+        header-align="center"
+        align="center"
+        label="姓名">
+      </el-table-column>
+      <el-table-column
+        prop="age"
+        header-align="center"
+        align="center"
+        label="年龄">
+      </el-table-column>
+      <el-table-column
+        prop="sex"
+        header-align="center"
+        align="center"
+        label="性别">
+        <template slot-scope="scope">
+          {{scope.row.sex == 0 ? '女':'男'}}
+        </template>
+      </el-table-column>
+      <el-table-column
+        prop="avatar"
+        header-align="center"
+        align="center"
+        label="头像">
+        <template slot-scope="scope">
+          <img v-if="scope.row.avatar != ''" :src="scope.row.avatar" width="50" height="50" class="tableImg" />
+        </template>
+      </el-table-column>
+      <el-table-column
+        prop="nickname"
+        header-align="center"
+        align="center"
+        label="昵称">
+      </el-table-column>
+      <el-table-column
+        prop="tel"
+        header-align="center"
+        align="center"
+        label="电话">
+      </el-table-column>
+      <!-- <el-table-column
+        prop="password"
+        header-align="center"
+        align="center"
+        label="密码">
+      </el-table-column> -->
+      <el-table-column
+        prop="vip"
+        header-align="center"
+        align="center"
+        label="会员类型">
+      </el-table-column>
+      <!-- <el-table-column
+        prop="vipValidtime"
+        header-align="center"
+        align="center"
+        label="vip 有效期">
+      </el-table-column> -->
+      <el-table-column
+        prop="peanutCoin"
+        header-align="center"
+        align="center"
+        label="花生币">
+      </el-table-column>
+      <!-- <el-table-column
+        prop="readTime"
+        header-align="center"
+        align="center"
+        label="阅读时间">
+      </el-table-column> -->
+      <el-table-column
+        prop="lastLoginTime"
+        header-align="center"
+        align="center"
+        label="最后登录时间">
+      </el-table-column>
+      <el-table-column
+        prop="createTime"
+        header-align="center"
+        align="center"
+        label="创建时间">
+      </el-table-column>
+      <el-table-column
+        prop="updateTime"
+        header-align="center"
+        align="center"
+        label="更新时间">
+      </el-table-column>
+      <!-- <el-table-column
+        prop="delFlag"
+        header-align="center"
+        align="center"
+        label="删除标记">
+      </el-table-column> -->
+      <el-table-column
+        fixed="right"
+        header-align="center"
+        align="center"
+        width="150"
+        label="操作">
+        <template slot-scope="scope">
+          <el-button type="text" size="small" @click="addOrUpdateHandle(scope.row.id)">修改</el-button>
+          <el-button type="text" size="small" @click="deleteHandle(scope.row.id)">删除</el-button>
+        </template>
+      </el-table-column>
+    </el-table>
+    <el-pagination
+      @size-change="sizeChangeHandle"
+      @current-change="currentChangeHandle"
+      :current-page="pageIndex"
+      :page-sizes="[10, 20, 50, 100]"
+      :page-size="pageSize"
+      :total="totalPage"
+      layout="total, sizes, prev, pager, next, jumper">
+    </el-pagination>
+    <!-- 弹窗, 新增 / 修改 -->
+    <add-or-update v-if="addOrUpdateVisible" ref="addOrUpdate" @refreshDataList="getDataList"></add-or-update>
+  </div>
+</template>
+
+<script>
+  import AddOrUpdate from './user-add-or-update'
+  export default {
+    data () {
+      return {
+        dataForm: {
+          key: ''
+        },
+        dataList: [],
+        pageIndex: 1,
+        pageSize: 10,
+        totalPage: 0,
+        dataListLoading: false,
+        dataListSelections: [],
+        addOrUpdateVisible: false
+      }
+    },
+    components: {
+      AddOrUpdate
+    },
+    activated () {
+      this.getDataList()
+    },
+    methods: {
+      // 获取数据列表
+      getDataList () {
+        this.dataListLoading = true
+        this.$http({
+          url: this.$http.adornUrl('/book/user/list'),
+          method: 'get',
+          params: this.$http.adornParams({
+            'page': this.pageIndex,
+            'limit': this.pageSize,
+            'key': this.dataForm.key
+          })
+        }).then(({data}) => {
+          if (data && data.code === 0) {
+            this.dataList = data.page.list
+            this.totalPage = data.page.totalCount
+          } else {
+            this.dataList = []
+            this.totalPage = 0
+          }
+          this.dataListLoading = false
+        })
+      },
+      // 每页数
+      sizeChangeHandle (val) {
+        this.pageSize = val
+        this.pageIndex = 1
+        this.getDataList()
+      },
+      // 当前页
+      currentChangeHandle (val) {
+        this.pageIndex = val
+        this.getDataList()
+      },
+      // 多选
+      selectionChangeHandle (val) {
+        this.dataListSelections = val
+      },
+      // 新增 / 修改
+      addOrUpdateHandle (id) {
+        this.addOrUpdateVisible = true
+        this.$nextTick(() => {
+          this.$refs.addOrUpdate.init(id)
+        })
+      },
+      // 删除
+      deleteHandle (id) {
+        var ids = id ? [id] : this.dataListSelections.map(item => {
+          return item.id
+        })
+        this.$confirm(`确定对[id=${ids.join(',')}]进行[${id ? '删除' : '批量删除'}]操作?`, '提示', {
+          confirmButtonText: '确定',
+          cancelButtonText: '取消',
+          type: 'warning'
+        }).then(() => {
+          this.$http({
+            url: this.$http.adornUrl('/book/user/delete'),
+            method: 'post',
+            data: this.$http.adornData(ids, false)
+          }).then(({data}) => {
+            if (data && data.code === 0) {
+              this.$message({
+                message: '操作成功',
+                type: 'success',
+                duration: 1500,
+                onClose: () => {
+                  this.getDataList()
+                }
+              })
+            } else {
+              this.$message.error(data.msg)
+            }
+          })
+        })
+      }
+    }
+  }
+</script>