Merge branch 'dev' into 'master'

Dev

See merge request motive-power/yxl/yxl-web-admin-frontend!11

package.json

@@ -14,6 +14,7 @@
     "test:ci": "npm run lint && npm run test:unit"
   },
   "dependencies": {
+    "ali-oss": "^6.16.0",
     "axios": "0.18.1",
     "core-js": "3.6.5",
     "element-ui": "2.13.2",

src/router/index.js

@@ -60,12 +60,12 @@ export const constantRoutes = [
     ]
   },
 
-  // 404 page must be placed at the end !!!
-  {
-    path: '*',
-    redirect: '/404',
-    hidden: true
-  }
+  // // 404 page must be placed at the end !!!
+  // {
+  //   path: '*',
+  //   redirect: '/404',
+  //   hidden: true
+  // }
 ];
 
 // TODO 上方菜单搬运下方，在meta追加roles

src/store/modules/permission.js

@@ -52,7 +52,7 @@ const actions = {
     return new Promise(resolve => {
       // let accessedRoutes = asyncRoutes;
       let accessedRoutes = filterAsyncRoutes(asyncRoutes, roles);
-
+      accessedRoutes.push({ path: '*', redirect: '/404', hidden: true })
       // commit('SET_ROUTES', []);
       commit('SET_ROUTES', accessedRoutes);
       resolve(accessedRoutes);

src/utils/ali-oss.js

@@ -0,0 +1,28 @@
+// 引入ali-oss
+let OSS = require('ali-oss')
+/**
+ *  [accessKeyId] {String}：通过阿里云控制台创建的AccessKey。
+ *  [accessKeySecret] {String}：通过阿里云控制台创建的AccessSecret。
+ *  [bucket] {String}：通过控制台或PutBucket创建的bucket。
+ *  [region] {String}：bucket所在的区域， 默认oss-cn-hangzhou。
+ */
+export function client(data) { // data后端提供数据
+  return new OSS({
+    region: data.region,
+    accessKeyId: data.accessKeyId,
+    accessKeySecret:  data.accessKeySecret,
+    bucket: data.bucket
+  })
+}
+
+/**
+ * 生成随机文件名称
+ * 规则八位随机字符，加下划线连接时间戳
+ */
+export const getFileNameUUID = () => {
+  function rx() {
+    return (((1 + Math.random()) * 0x10000) | 0).toString(16).substring(1)
+  }
+
+  return `${+new Date()}_${rx()}${rx()}`
+}

src/utils/dialog-helper.js

@@ -17,6 +17,7 @@ import PhotoVerifyMultItem from 'views/photoManagement/photoVerifyManagement/mod
 import ImageGoodsItem from 'views/photoManagement/imageGoodsManagement/modal/ItemModal.vue';
 import PhotoUpload from 'views/photographerManagement/photoVerify/modal/ItemModal.vue';
 import PhotoMultUpload from 'views/photographerManagement/photoVerify/modal/MultItemModal.vue';
+import AliOssMulti from 'views/photographerManagement/photoVerify/modal/ali-oss-multi.vue';
 
 const modal = (Component, props) => {
   let _component = null;
@@ -39,6 +40,14 @@ const modal = (Component, props) => {
   document.body.appendChild(_component.$el);
 };
 
+let AliOssMultiModal = data => {
+  modal(AliOssMulti, data);
+};
+Vue.prototype.$AliOssMultiModal = params => {
+  AliOssMultiModal(params);
+};
+
+
 let PhotoVerifyMultItemModal = data => {
   modal(PhotoVerifyMultItem, data);
 };

src/views/photoManagement/imageGoodsManagement/index.vue

@@ -53,7 +53,7 @@ export default {
         },
         {
           key: 'listPreview',
-          name: '列表缩略图',
+          name: '列表预览图',
           minWidth: this.$col.b,
           render: (h, { row }) => {
             if (!row.listPreview) {
@@ -78,32 +78,6 @@ export default {
           }
         },
         {
-          key: 'detailPreview',
-          name: '详情缩略图',
-          minWidth: this.$col.b,
-          render: (h, { row }) => {
-            if (!row.detailPreview) {
-              return h('span', '图片正在处理中请稍等...');
-            }
-            return h('img', {
-              style: {
-                width: '160px',
-                height: '90px'
-              },
-              class: 'pre-img',
-              attrs: {
-                src: row.detailPreview
-              },
-              on: {
-                click: () =>
-                  this.$AdvanceViewImageModal({
-                    items: [{ src: row.detailPreview }]
-                  })
-              }
-            });
-          }
-        },
-        {
           key: 'createAt',
           name: '上传时间',
           minWidth: this.$col.b

src/views/photoManagement/imageGoodsManagement/modal/ItemModal.vue

@@ -11,7 +11,7 @@
     "
   >
     <el-form ref="form" :model="form" :rules="rules" label-width="160px">
-      <el-form-item label="列表预览图图片">
+      <el-form-item label="列表预览图">
         <img
           :src="form.listPreview"
           class="pre-img"
@@ -23,7 +23,7 @@
           "
         />
       </el-form-item>
-      <el-form-item label="详情页面预览图图片">
+      <el-form-item label="详情预览图">
         <img
           :src="form.detailPreview"
           class="pre-img"
@@ -35,42 +35,42 @@
           "
         />
       </el-form-item>
-      <el-form-item label="高清图">
-        <img
-          :src="form.hdLogoPhoto"
-          class="pre-img"
-          @click="
-            () =>
-              this.$AdvanceViewImageModal({
-                items: [{ src: form.hdLogoPhoto }]
-              })
-          "
-        />
-      </el-form-item>
-      <el-form-item label="原图">
-        <img
-        :src="form.originPhoto"
-        class="pre-img"
-        @click="
-            () =>
-              this.$AdvanceViewImageModal({
-                items: [{ src: form.originPhoto }]
-              })
-          "
-        />
-      </el-form-item>
+<!--      <el-form-item label="高清图">-->
+<!--        <img-->
+<!--          :src="form.hdLogoPhoto"-->
+<!--          class="pre-img"-->
+<!--          @click="-->
+<!--            () =>-->
+<!--              this.$AdvanceViewImageModal({-->
+<!--                items: [{ src: form.hdLogoPhoto }]-->
+<!--              })-->
+<!--          "-->
+<!--        />-->
+<!--      </el-form-item>-->
+<!--      <el-form-item label="原图">-->
+<!--        <img-->
+<!--        :src="form.originPhoto"-->
+<!--        class="pre-img"-->
+<!--        @click="-->
+<!--            () =>-->
+<!--              this.$AdvanceViewImageModal({-->
+<!--                items: [{ src: form.originPhoto }]-->
+<!--              })-->
+<!--          "-->
+<!--        />-->
+<!--      </el-form-item>-->
 
       <el-form-item label="是否精选">
         <el-radio-group v-model="form.isBeautiful" prop="isShow">
-          <el-radio :label="true">是</el-radio>
           <el-radio :label="false">否</el-radio>
+          <el-radio :label="true">是</el-radio>
         </el-radio-group>
       </el-form-item>
 
       <el-form-item label="状态">
         <el-radio-group v-model="form.isShow" prop="isShow">
-          <el-radio :label="true">上架</el-radio>
           <el-radio :label="false">下架</el-radio>
+          <el-radio :label="true">上架</el-radio>
         </el-radio-group>
       </el-form-item>
     </el-form>

src/views/photoManagement/photoVerifyManagement/index.vue

@@ -108,7 +108,7 @@ export default {
 
         {
           key: 'listPreview',
-          name: '列表缩略图',
+          name: '列表预览图',
           minWidth: this.$col.b,
           render: (h, { row }) => {
             if (!row.listPreview) {
@@ -133,32 +133,6 @@ export default {
           }
         },
         {
-          key: 'detailPreview',
-          name: '详情缩略图',
-          minWidth: this.$col.b,
-          render: (h, { row }) => {
-            if (!row.detailPreview) {
-              return h('span', '图片正在处理中请稍等...');
-            }
-            return h('img', {
-              style: {
-                width: '160px',
-                height: '90px'
-              },
-              class: 'pre-img',
-              attrs: {
-                src: row.detailPreview
-              },
-              on: {
-                click: () =>
-                  this.$AdvanceViewImageModal({
-                    items: [{ src: row.detailPreview }]
-                  })
-              }
-            });
-          }
-        },
-        {
           key: 'createAt',
           name: '上传时间',
           minWidth: this.$col.b

src/views/photographerManagement/photoVerify/index.vue

@@ -9,10 +9,12 @@
       <el-button
         type="primary"
         icon="el-icon-plus"
-        @click="$PhotoMultUploadModal()"
+        @click="$AliOssMultiModal()"
         >批量上传照片</el-button
       >
 
+      <ali-oss-multi></ali-oss-multi>
+
       <base-table
         :columns="columns"
         :items="items"
@@ -24,6 +26,7 @@
 </template>
 
 <script>
+// import aliOssMulti from './modal/ali-oss-multi';
 import toolbar from './toolbar';
 import mxFilterList from '@/mixins/filterList';
 import { getPage, delItem } from '@/api/photoWarehouse';
@@ -62,7 +65,7 @@ export default {
 
         {
           key: 'listPreview',
-          name: '列表缩略图',
+          name: '列表预览图',
           minWidth: this.$col.b,
           render: (h, { row }) => {
             if (!row.listPreview) {
@@ -87,32 +90,6 @@ export default {
           }
         },
         {
-          key: 'detailPreview',
-          name: '详情缩略图',
-          minWidth: this.$col.b,
-          render: (h, { row }) => {
-            if (!row.detailPreview) {
-              return h('span', '图片正在处理中请稍等...');
-            }
-            return h('img', {
-              style: {
-                width: '160px',
-                height: '90px'
-              },
-              class: 'pre-img',
-              attrs: {
-                src: row.detailPreview
-              },
-              on: {
-                click: () =>
-                  this.$AdvanceViewImageModal({
-                    items: [{ src: row.detailPreview }]
-                  })
-              }
-            });
-          }
-        },
-        {
           key: 'createAt',
           name: '上传时间',
           minWidth: this.$col.b

src/views/photographerManagement/photoVerify/modal/ali-oss-multi.vue

@@ -0,0 +1,209 @@
+<template>
+  <el-dialog
+    :title="title"
+    :visible.sync="modal"
+    :close-on-click-modal="false"
+    width="960px"
+    @close="
+      res => {
+        $emit('cancel');
+      }
+    "
+  >
+    <el-form ref="form" :model="form" :rules="rules" label-width="100px">
+      <el-form-item label="关联场景" prop="kindergartenId" required>
+        <SceneSelect v-model="form.kindergartenId" :clearable="false" />
+      </el-form-item>
+      <el-form-item label="关联活动">
+        <ActivitySelect
+          v-model="form.activityId"
+          :kindergartenId="form.kindergartenId"
+          :firstLoad="false"
+          :disabled="form.kindergartenId === null"
+        />
+      </el-form-item>
+
+      <el-form-item label="图片" prop="urls" required>
+        <el-upload
+          action
+          :http-request="upload"
+          :before-upload="beforeAvatarUpload"
+          :on-preview="handlePreview"
+          :before-remove="beforeRemove"
+          :on-remove="handleRemove"
+          :on-success="handleSuccess"
+          :on-exceed="handleExceed"
+          drag
+          multiple
+          :limit="limit"
+          :file-list="fileList"
+        >
+          <i class="el-icon-upload"></i>
+          <div class="el-upload__text">
+            将文件拖到此处，或
+            <em>点击上传</em>
+          </div>
+          <div slot="tip" class="el-upload__tip">上传文件大小不能超过 1G</div>
+        </el-upload>
+
+        <el-progress
+          v-show="showProgress"
+          :text-inside="true"
+          :stroke-width="15"
+          :percentage="progress"
+        ></el-progress>
+      </el-form-item>
+    </el-form>
+  </el-dialog>
+</template>
+
+<script>
+import { client, getFileNameUUID } from '@/utils/ali-oss'; // 前面的ali-js文件内的两个封装函数
+import { saveItem } from '@/api/photoWarehouse';
+
+export default {
+  name: 'Upload',
+  props: {
+    limit: {
+      type: Number,
+      default: 50
+    }
+  },
+  data() {
+    return {
+      title: '批量上传照片',
+      modal: true,
+
+      form: {
+        kindergartenId: null,
+        activityId: '',
+        urls: []
+      },
+      rules: {
+        kindergartenId: [
+          { required: true, message: '请选择关联场景', trigger: 'blur' }
+        ],
+        urls: [{ required: true, message: '请上传图片', trigger: 'change' }]
+      },
+
+      fileList: [], // 文件列
+      showProgress: false, // 进度条的显示
+      dataObj: {
+        region: 'oss-cn-guangzhou',
+        accessKeyId: 'LTAI5t8FMLXGzU4pTi9GXWb6',
+        accessKeySecret: 'Hz6WOXIVNfpdMphYtf3laHbVoasGlT',
+        bucket: 'yxl-kindergarten'
+      }, // 存签名信息 todo
+      progress: 0 // 进度条数据
+    };
+  },
+  methods: {
+    // 文件超出个数限制时的钩子
+    handleExceed(files, fileList) {
+      this.$message.warning(`每次只能上传 ${this.limit} 个文件`);
+    },
+    // 点击文件列表中已上传的文件时的钩子
+    handlePreview(file) {},
+    // 删除文件之前的钩子
+    beforeRemove(file, fileList) {
+      if (file && file.status==="success") {
+        return this.$confirm(`确定移除 ${file.name}？`);
+      }
+    },
+    // 文件列表移除文件时的钩子
+    handleRemove(file, fileList) {
+      if (file && file.status==="success") {}
+    },
+    // 文件上传成功时的钩子
+    handleSuccess(response, file, fileList) {
+      this.fileList = fileList;
+      // if (response.name) {
+      //   this.saveData(response.name);
+      // }
+    },
+    // 文件上传前的校验
+    beforeAvatarUpload(file) {
+      // if (["video/mp4"].indexOf(file.type) == -1) {
+      //   this.$message.error("请上传正确的视频格式");
+      //   return false;
+      // }
+      const isLt100M = file.size / 1024 / 1024 > 5 && file.size / 1024 / 1024 < 1024;
+      if (!isLt100M) {
+        this.$message.error("上传照片大小要在5MB ~ 1GB之间哦!");
+        return false;
+      }
+      const isLt30 = file.name.length < 30;
+      if (!isLt30) {
+        this.$message.error('上传视频文件名称长度必须要小于30个文字哦!');
+        return false;
+      }
+      if (!this.form.kindergartenId) {
+        this.$error('请先选择幼儿园');
+        return false;
+      }
+    },
+    // http-request属性来覆盖默认的上传行为（即action="url"），自定义上传的实现
+    upload(file) {
+      const _that = this;
+      async function multipartUpload() {
+        let temporary = file.file.name.lastIndexOf('.');
+        let fileNameLength = file.file.name.length;
+        let fileFormat = file.file.name.substring(
+          temporary + 1,
+          fileNameLength
+        );
+        let fileName = getFileNameUUID() + '.' + fileFormat;
+
+        client(_that.dataObj)
+          .multipartUpload(`tmp/${fileName}`, file.file, {
+            progress: function(p) {
+              // todo 每个文件一个进度条？？？如何限定关联的业务参数（幼儿园id、活动id）
+              // p进度条的值
+              console.log(p);
+              _that.showProgress = true;
+              _that.progress = Math.floor(p * 100);
+            }
+          })
+          .then(result => {
+            //上传成功返回值，可针对项目需求写其他逻辑
+            // todo 这里每完成一个文件，会回调一次。这里请求服务端保存业务。照片信息 + 幼儿园 + 活动...
+            console.log(result);
+            _that.saveData(result);
+          })
+          .catch(err => {
+            console.log('err:', err);
+          });
+      }
+
+      multipartUpload();
+    },
+    async saveData(obj) {
+      console.log(obj);
+      const params = {
+        kindergartenId: this.form.kindergartenId,
+        activityId: this.form.activityId,
+        fileRequest: {
+          // todo 补充字段
+          originalFilename: 'abc',
+          size: 100,
+          path: obj.name
+        }
+      };
+      const { success, msg } = await saveItem(params);
+      if (success) {
+      }
+    }
+  }
+};
+</script>
+
+<style lang="scss" scoped></style>
+
+<style>
+  .el-upload {
+    width: 100%;
+  }
+  .el-upload-dragger {
+    width: 100%;
+  }
+</style>

src/views/statistics/withdrawalRecord/modal/ItemModal.vue

@@ -14,6 +14,7 @@
       <el-form-item label="提现用户"> {{ form.accountName }} </el-form-item>
       <el-form-item label="提现手机号"> {{ form.phonenumber }} </el-form-item>
       <el-form-item label="提现金额"> ￥{{ form.value }} </el-form-item>
+      <el-form-item label="当前余额"> ￥{{ form.value }} //TODO 缺少字段 </el-form-item>
       <el-form-item label="提现时间"> {{ form.createAt }} </el-form-item>
 
       <el-form-item label="审核状态" prop="auditStatus">