v1.2 版本发布,代码同步后端v1.2版本

src/views/tools/email/index.vue

@@ -0,0 +1,35 @@
+<template>
+  <el-tabs v-model="activeName" style="padding-left: 5px;" @tab-click="handleClick">
+    <el-tab-pane label="邮箱配置" name="first">
+      <Config/>
+    </el-tab-pane>
+    <el-tab-pane label="邮件测试" name="second">
+      <Send/>
+    </el-tab-pane>
+    <el-tab-pane label="使用说明" name="third">
+      <Description/>
+    </el-tab-pane>
+  </el-tabs>
+</template>
+
+<script>
+import Config from './module/config'
+import Send from './module/send'
+import Description from './module/description'
+export default {
+  components: { Config, Send, Description },
+  data() {
+    return {
+      activeName: 'first'
+    }
+  },
+  methods: {
+    handleClick(tab, event) {
+      console.log(tab, event)
+    }
+  }
+}
+</script>
+
+<style scoped>
+</style>

src/views/tools/email/module/config.vue

@@ -0,0 +1,89 @@
+<template>
+  <el-form ref="form" :model="form" :rules="rules" style="margin-top: 6px;" size="small" label-width="100px">
+    <el-form-item label="发件人邮箱" prop="fromUser">
+      <el-input v-model="form.fromUser" style="width: 40%"/>
+      <span style="color: #C0C0C0;margin-left: 10px;">Sender mailbox</span>
+    </el-form-item>
+    <el-form-item label="发件用户名" prop="user">
+      <el-input v-model="form.user" style="width: 40%;"/>
+      <span style="color: #C0C0C0;margin-left: 10px;">Sender usernamex</span>
+    </el-form-item>
+    <el-form-item label="邮箱密码" prop="pass">
+      <el-input v-model="form.pass" type="password" style="width: 40%;"/>
+      <span style="color: #C0C0C0;margin-left: 10px;">email Password</span>
+    </el-form-item>
+    <el-form-item label="SMTP地址" prop="host">
+      <el-input v-model="form.host" style="width: 40%;"/>
+      <span style="color: #C0C0C0;margin-left: 10px;">SMTP address</span>
+    </el-form-item>
+    <el-form-item label="SMTP端口" prop="port">
+      <el-input v-model="form.port" style="width: 40%;"/>
+      <span style="color: #C0C0C0;margin-left: 10px;">SMTP port</span>
+    </el-form-item>
+    <el-button :loading="loading" style="margin-left:5%;" size="medium" type="success" @click="doSubmit">保存配置</el-button>
+  </el-form>
+</template>
+
+<script>
+import { get, update } from '@/api/email'
+export default {
+  name: 'Config',
+  data() {
+    return {
+      loading: false, form: { id: 1, fromUser: '', user: '', pass: '', host: '', port: '', sslEnable: '' },
+      rules: {
+        fromUser: [
+          { required: true, message: '请输入发件人邮箱', trigger: 'blur' },
+          { type: 'email', message: '请输入正确的邮箱地址', trigger: 'blur' }
+        ],
+        user: [
+          { required: true, message: '请输入发件用户名', trigger: 'blur' }
+        ],
+        pass: [
+          { required: true, message: '密码不能为空', trigger: 'blur' }
+        ],
+        host: [
+          { required: true, message: 'SMTP地址不能为空', trigger: 'blur' }
+        ],
+        port: [
+          { required: true, message: 'SMTP端口不能为空', trigger: 'blur' }
+        ]
+      }
+    }
+  },
+  created() {
+    this.init()
+  },
+  methods: {
+    init() {
+      get().then(res => {
+        this.form = res
+      })
+    },
+    doSubmit() {
+      this.$refs['form'].validate((valid) => {
+        if (valid) {
+          this.loading = true
+          update(this.form).then(res => {
+            this.$notify({
+              title: '修改成功',
+              type: 'success',
+              duration: 2500
+            })
+            this.loading = false
+          }).catch(err => {
+            this.loading = false
+            console.log(err.response.data.message)
+          })
+        } else {
+          return false
+        }
+      })
+    }
+  }
+}
+</script>
+
+<style scoped>
+
+</style>

src/views/tools/email/module/description.vue

@@ -0,0 +1,40 @@
+<template>
+  <div>
+    <blockquote class="my-blockquote">注意</blockquote>
+    <pre class="my-code">
+邮件服务器必须支持并打开SMTP协议，详细请查看相关帮助说明
+配置文件的样例中提供的是我测试邮件功能注册的sina.com邮箱
+帐号密码公开，供测试使用，存入数据库的密码会加密处理，请文明测试</pre>
+    <blockquote class="my-blockquote"> 邮件服务器配置</blockquote>
+    <pre class="my-code">
+ # 邮件服务器的SMTP地址，可选，默认为smtp
+ # 邮件服务器的SMTP端口，可选，默认465或者25
+ # 发件人（必须正确，否则发送失败）
+ # 用户名，默认为发件人邮箱前缀
+ # 密码（注意，某些邮箱需要为SMTP服务单独设置密码，如QQ和163等等）
+ # 是否开启ssl，默认开启</pre>
+    <blockquote class="my-blockquote">发送邮箱</blockquote>
+    <pre class="my-code">
+ MailAccount account = new MailAccount();
+ account.setHost("smtp.sina.com");
+ account.setPort("465");
+ account.setAuth(true);
+ account.setFrom("auaur@sina.com");
+ account.setUser("eladmin");
+ account.setPass("pass");
+ # 倒数第二个参数：是否为http格式
+ MailUtil.send(account, CollUtil.newArrayList("zhengjie@tom.com"), "测试", "邮件来自eladmin测试", true，file...);</pre>
+    <blockquote class="my-blockquote">更多帮助</blockquote>
+    <pre class="my-code">更多帮助请查看文档：<a style="color:#009688" href="http://hutool.mydoc.io/#text_319499" target="_black">hutool工具包</a></pre>
+  </div>
+</template>
+
+<script>
+import '@/styles/description.scss'
+export default {
+  name: 'Description'
+}
+</script>
+
+<style scoped>
+</style>

src/views/tools/email/module/send.vue

@@ -0,0 +1,131 @@
+<template>
+  <div>
+    <el-form ref="form" :model="form" :rules="rules" style="margin-top: 6px;" size="small" label-width="100px">
+      <el-form-item label="邮件标题" prop="subject">
+        <el-input v-model="form.subject" style="width: 40%"/>
+      </el-form-item>
+      <el-form-item
+        v-for="(domain, index) in tos"
+        :label="'收件邮箱' + (index === 0 ? '': index)"
+        :key="domain.key">
+        <el-input v-model="domain.value" style="width: 31%"/>
+        <el-button icon="el-icon-plus" @click="addDomain" />
+        <el-button style="margin-left:0px;" icon="el-icon-minus" @click.prevent="removeDomain(domain)"/>
+      </el-form-item>
+      <div ref="editor" class="editor"/>
+      <el-button :loading="loading" style="margin-left:2%;" size="medium" type="success" @click="doSubmit">发送邮件</el-button>
+    </el-form>
+  </div>
+</template>
+
+<script>
+import { mapGetters } from 'vuex'
+import { getToken } from '@/utils/auth'
+import { send } from '@/api/email'
+import { validatEmail } from '@/utils/validate'
+import E from 'wangeditor'
+export default {
+  name: 'Index',
+  data() {
+    return {
+      headers: {
+        'Authorization': 'Bearer ' + getToken()
+      },
+      loading: false, form: { subject: '', tos: [], content: '' },
+      tos: [{
+        value: ''
+      }],
+      rules: {
+        subject: [
+          { required: true, message: '标题不能为空', trigger: 'blur' }
+        ]
+      }
+    }
+  },
+  computed: {
+    ...mapGetters([
+      'imagesUploadApi'
+    ])
+  },
+  mounted() {
+    var editor = new E(this.$refs.editor)
+    editor.customConfig.uploadImgShowBase64 = true // 使用 base64 保存图片
+    // 不可修改
+    editor.customConfig.uploadImgHeaders = this.headers
+    // 自定义文件名，不可修改，修改后会上传失败
+    editor.customConfig.uploadFileName = 'file'
+    editor.customConfig.uploadImgServer = this.imagesUploadApi // 上传图片到服务器
+    editor.customConfig.onchange = (html) => {
+      this.form.content = html
+    }
+    editor.create()
+  },
+  methods: {
+    removeDomain(item) {
+      var index = this.tos.indexOf(item)
+      if (index !== -1 && this.tos.length !== 1) {
+        this.tos.splice(index, 1)
+      } else {
+        this.$message({
+          message: '请至少保留一位联系人',
+          type: 'warning'
+        })
+      }
+    },
+    addDomain() {
+      this.tos.push({
+        value: '',
+        key: Date.now()
+      })
+    },
+    doSubmit() {
+      const _this = this
+      this.$refs['form'].validate((valid) => {
+        this.form.tos = []
+        if (valid) {
+          let sub = false
+          this.tos.forEach(function(data, index) {
+            if (data.value === '') {
+              _this.$message({
+                message: '收件邮箱不能为空',
+                type: 'warning'
+              })
+              sub = true
+            } else if (validatEmail(data.value)) {
+              _this.form.tos.push(data.value)
+            } else {
+              _this.$message({
+                message: '收件邮箱格式错误',
+                type: 'warning'
+              })
+              sub = true
+            }
+          })
+          if (sub) { return false }
+          this.loading = true
+          send(this.form).then(res => {
+            this.$notify({
+              title: '发送成功',
+              type: 'success',
+              duration: 2500
+            })
+            this.loading = false
+          }).catch(err => {
+            this.loading = false
+            console.log(err.response.data.message)
+          })
+        } else {
+          return false
+        }
+      })
+    }
+  }
+}
+</script>
+
+<style scoped>
+  .editor{
+    text-align:left;
+    margin: 20px;
+  }
+</style>

src/views/tools/picture/index.vue

@@ -0,0 +1,104 @@
+<template>
+  <div class="app-container">
+    <search :query="query"/>
+    <!--表格渲染-->
+    <el-table v-loading="loading" :data="data" size="small" border style="width: 100%;">
+      <el-table-column prop="filename" label="文件名"/>
+      <el-table-column prop="username" label="上传者"/>
+      <el-table-column :show-overflow-tooltip="true" prop="url" label="链接地址">
+        <template slot-scope="scope">
+          <a :href="scope.row.url" style="color: #42b983" target="_blank">{{ scope.row.url }}</a>
+        </template>
+      </el-table-column>
+      <el-table-column prop="size" label="文件大小"/>
+      <el-table-column prop="height" label="高度"/>
+      <el-table-column prop="width" label="宽度"/>
+      <el-table-column prop="createTime" label="创建日期">
+        <template slot-scope="scope">
+          <span>{{ time(scope.row.createTime) }}</span>
+        </template>
+      </el-table-column>
+      <el-table-column label="操作" width="100px" align="center">
+        <template slot-scope="scope">
+          <el-popover
+            v-if="checkPermission(['ADMIN','PICTURE_ALL','PICTURE_DELETE'])"
+            v-model="scope.row.delPopover"
+            placement="top"
+            width="180">
+            <p>确定删除本条数据吗？</p>
+            <div style="text-align: right; margin: 0">
+              <el-button size="mini" type="text" @click="scope.row.delPopover = false">取消</el-button>
+              <el-button :loading="delLoading" type="primary" size="mini" @click="subDelete(scope.$index, scope.row)">确定</el-button>
+            </div>
+            <el-button slot="reference" type="danger" size="mini" @click="scope.row.delPopover = true">删除</el-button>
+          </el-popover>
+        </template>
+      </el-table-column>
+    </el-table>
+    <!--分页组件-->
+    <el-pagination
+      :total="total"
+      style="margin-top: 8px;"
+      layout="total, prev, pager, next, sizes"
+      @size-change="sizeChange"
+      @current-change="pageChange"/>
+  </div>
+</template>
+
+<script>
+import checkPermission from '@/utils/permission' // 权限判断函数
+import initData from '../../../mixins/initData'
+import { del } from '@/api/picture'
+import { parseTime } from '@/utils/index'
+import search from './module/search'
+export default {
+  components: { search },
+  mixins: [initData],
+  data() {
+    return {
+      delLoading: false, sup_this: this
+    }
+  },
+  created() {
+    this.$nextTick(() => {
+      this.init()
+    })
+  },
+  methods: {
+    checkPermission,
+    beforeInit() {
+      this.url = 'api/pictures'
+      const sort = 'id,desc'
+      const query = this.query
+      const value = query.value
+      this.params = { page: this.page, size: this.size, sort: sort }
+      if (value) { this.params['filename'] = value }
+      return true
+    },
+    subDelete(index, row) {
+      this.delLoading = true
+      del(row.id).then(res => {
+        this.delLoading = false
+        row.delPopover = false
+        this.init()
+        this.$notify({
+          title: '删除成功',
+          type: 'success',
+          duration: 2500
+        })
+      }).catch(err => {
+        this.delLoading = false
+        row.delPopover = false
+        console.log(err.response.data.message)
+      })
+    },
+    time(time) {
+      return parseTime(time)
+    }
+  }
+}
+</script>
+
+<style scoped>
+
+</style>

src/views/tools/picture/module/add.vue

@@ -0,0 +1,92 @@
+<template>
+  <div>
+    <el-button class="filter-item" size="mini" type="primary" icon="el-icon-upload" @click="dialog = true">上传图片</el-button>
+    <el-dialog :visible.sync="dialog" width="600px" @close="doSubmit">
+      <el-upload
+        :on-preview="handlePictureCardPreview"
+        :before-remove="handleBeforeRemove"
+        :on-success="handleSuccess"
+        :on-error="handleError"
+        :headers="headers"
+        :file-list="fileList"
+        :action="imagesUploadApi"
+        list-type="picture-card">
+        <i class="el-icon-plus"/>
+      </el-upload>
+      <el-dialog :visible.sync="dialogVisible">
+        <img :src="dialogImageUrl" width="100%" alt="">
+      </el-dialog>
+      <div slot="footer" class="dialog-footer">
+        <el-button type="primary" @click="doSubmit">确认</el-button>
+      </div>
+    </el-dialog>
+  </div>
+</template>
+<script>
+import { mapGetters } from 'vuex'
+import { del } from '@/api/picture'
+import { getToken } from '@/utils/auth'
+export default {
+  data() {
+    return {
+      headers: {
+        'Authorization': 'Bearer ' + getToken()
+      },
+      dialog: false,
+      dialogImageUrl: '',
+      dialogVisible: false,
+      fileList: [],
+      pictures: []
+    }
+  },
+  computed: {
+    ...mapGetters([
+      'imagesUploadApi'
+    ])
+  },
+  methods: {
+    handleSuccess(response, file, fileList) {
+      const uid = file.uid
+      const id = response.id
+      this.pictures.push({ uid, id })
+    },
+    handleBeforeRemove(file, fileList) {
+      for (var i = 0; i < this.pictures.length; i++) {
+        if (this.pictures[i].uid === file.uid) {
+          del(this.pictures[i].id).then(res => {})
+          return true
+        }
+      }
+    },
+    handlePictureCardPreview(file) {
+      this.dialogImageUrl = file.url
+      this.dialogVisible = true
+    },
+    // 刷新列表数据
+    doSubmit() {
+      this.fileList = []
+      this.dialogVisible = false
+      this.dialogImageUrl = ''
+      this.dialog = false
+      this.$parent.$parent.init()
+    },
+    // 监听上传失败
+    handleError(e, file, fileList) {
+      const msg = JSON.parse(e.message)
+      this.$notify({
+        title: msg.message,
+        type: 'error',
+        duration: 2500
+      })
+    }
+  }
+}
+</script>
+
+<style scoped>
+  div{
+    display: inline-block;
+    margin-left: 5px;
+    margin-right: 5px;
+  }
+</style>

src/views/tools/picture/module/search.vue

@@ -0,0 +1,30 @@
+<template>
+  <div class="head-container">
+    <el-input v-model="query.value" clearable placeholder="输入文件名称搜索" style="width: 200px;" class="filter-item" @keyup.enter.native="toQuery"/>
+    <el-button class="filter-item" size="mini" type="primary" icon="el-icon-search" @click="toQuery">搜索</el-button>
+    <add v-if="checkPermission(['ADMIN','PICTURE_ALL','PICTURE_UPLOAD'])"/>
+  </div>
+</template>
+
+<script>
+import checkPermission from '@/utils/permission' // 权限判断函数
+import add from './add'
+// 查询条件
+export default {
+  components: { add },
+  props: {
+    query: {
+      type: Object,
+      required: true
+    }
+  },
+  methods: {
+    checkPermission,
+    toQuery() {
+      console.log(this.query)
+      this.$parent.page = 0
+      this.$parent.init()
+    }
+  }
+}
+</script>