浏览代码

新建组件, 调用组件

loki 3 年之前
父节点
当前提交
e3e91a982c

+ 4 - 2
README.md

@@ -92,8 +92,10 @@ Copyright (c) 2017-present PanJiaChen
 - 后台后端列表需要 sort 排序 [x]
 - 数据字典组件 [x]
 - 暂时停止批量编辑 [x]
-- 上传位置 幼儿园活动组件
+- 上传位置 幼儿园活动组件 [x]
+- 活动管理需要场景组件 [x]
 - 上传照片管理
-- 活动管理需要场景组件
 - 图片上传地址
 - 后台前端富文本需要 px 转换 rem
+- 是否裂变[后端判断照片商品管理] 上传照片管理追加字段
+- 积分配置

+ 3 - 1
src/api/activity/index.js

@@ -1,7 +1,9 @@
 import api from '@/utils/request';
 
-export const getList = params =>
+export const getPage = params =>
 	api.post(`/yxl-back-end/admin/activity/page`, params);
+export const getList = params =>
+	api.post(`/yxl-back-end/admin/activity/list`, params);
 export const getItem = ({ id, ...params }) =>
 	api.get(`/yxl-back-end/admin/activity/${id}`, params);
 export const saveItem = ({ id, ...params }) => {

+ 2 - 0
src/api/scene/index.js

@@ -2,6 +2,8 @@ import api from '@/utils/request';
 
 export const getPage = params =>
 	api.post(`/yxl-back-end/admin/kindergarten/page`, params);
+export const getList = params =>
+	api.post(`/yxl-back-end/admin/kindergarten/list`, params);
 export const getItem = ({ id, ...params }) =>
 	api.get(`/yxl-back-end/admin/kindergarten/${id}`, params);
 export const saveItem = ({ id, ...params }) => {

+ 5 - 6
src/components/Upload.vue

@@ -6,7 +6,7 @@
       :headers="myHeaders"
       list-type="picture-card"
       :multiple="false"
-      :limit="1"
+      :limit="limit"
       :file-list="imgList"
       :on-success="handleAvatarSuccess"
       :disabled="limit <= value.length"
@@ -112,9 +112,6 @@ export default {
   },
 
   methods: {
-    beforeAvatarUpload(file) {
-      console.log();
-    },
     handleAvatarSuccess(res, file, fileList) {
       if (file.response.code !== 200) {
         this.$refs.upload.clearFiles();
@@ -125,10 +122,12 @@ export default {
       const result =
         fileList.length > 0
           ? fileList.map(x => ({
-              name: x.name,
-              url: process.env.VUE_APP_BASE_IMG + x.response.data.fullPath
+              name: x.response ? x.response.data.filename : x.name,
+              url: x.response ? x.response.data.fullPath : x.url,
+              size: x.response ? x.response.data.size : x.size
             }))
           : [];
+
       this.$emit('input', result);
     },
     // handleChange(file, fileList) {

+ 87 - 0
src/containers/ActivitySelect/ActivitySelect.vue

@@ -0,0 +1,87 @@
+<template>
+  <el-select
+    v-model="vModel"
+    placeholder="请选择"
+    filterable
+    clearable
+    v-bind="$attrs"
+    @change="onChange"
+  >
+    <el-option
+      v-for="item in options"
+      :key="item.value"
+      :label="item.label"
+      :value="item.value"
+    >
+    </el-option>
+  </el-select>
+</template>
+
+<script>
+import { getList } from '@/api/activity';
+
+export default {
+  name: 'ActivitySelect',
+
+  props: {
+    value: {
+      type: String,
+      default: ''
+    },
+    kindergartenId: {
+      type: String,
+      default: ''
+    },
+    firstLoad: {
+      type: Boolean,
+      default: true
+    }
+  },
+
+  data() {
+    return {
+      vModel: this.value,
+      options: []
+    };
+  },
+
+  watch: {
+    value: {
+      handler(val) {
+        this.vModel = val;
+      },
+      immediate: true
+    },
+    kindergartenId: {
+      handler(val) {
+        val && this.loadData();
+      },
+      immediate: true
+    }
+  },
+
+  mounted() {
+    this.firstLoad && this.loadData();
+  },
+
+  methods: {
+    onChange(value) {
+      this.$emit('input', value || null);
+    },
+
+    async loadData() {
+      const { success, data, msg } = await getList({
+        kindergartenId: this.kindergartenId
+      });
+      if (success) {
+        this.options = data.map(x => ({
+          value: x.id,
+          label: x.name
+        }));
+      }
+    }
+  }
+};
+</script>
+
+<style lang="scss" scoped></style>

+ 10 - 0
src/containers/ToolbarContainer.vue

@@ -78,6 +78,10 @@
               v-model="form[field.name]"
               :props="{ checkStrictly: true }"
             ></IssueTypeSelect>
+            <SceneSelect
+              v-if="field.type === 'SceneSelect'"
+              v-model="form[field.name]"
+            ></SceneSelect>
             <DataSelect
               v-if="field.type === 'DataSelect'"
               v-model="form[field.name]"
@@ -85,6 +89,12 @@
               :props="field.props"
               :clearable="true"
             ></DataSelect>
+            <ActivitySelect
+              v-if="field.type === 'ActivitySelect'"
+              v-model="form[field.name]"
+              :params="field.params"
+              :clearable="true"
+            ></ActivitySelect>
           </el-form-item>
         </el-col>
       </el-row>

+ 4 - 0
src/containers/index.js

@@ -1,6 +1,10 @@
 import Vue from 'vue';
+import ActivitySelect from './ActivitySelect/ActivitySelect.vue';
 import IssueTypeSelect from './issueType/IssueTypeSelect.vue';
+import SceneSelect from './sceneSelect/SceneSelect.vue';
 import ToolbarContainer from './ToolbarContainer.vue';
 
+Vue.component('ActivitySelect', ActivitySelect);
 Vue.component('IssueTypeSelect', IssueTypeSelect);
+Vue.component('SceneSelect', SceneSelect);
 Vue.component('ToolbarContainer', ToolbarContainer);

+ 71 - 0
src/containers/sceneSelect/SceneSelect.vue

@@ -0,0 +1,71 @@
+<template>
+  <el-select
+    v-model="vModel"
+    placeholder="请选择"
+    filterable
+    clearable
+    @change="onChange"
+  >
+    <el-option
+      v-for="item in options"
+      :key="item.value"
+      :label="item.label"
+      :value="item.value"
+    >
+    </el-option>
+  </el-select>
+</template>
+
+<script>
+import { getList } from '@/api/scene';
+
+export default {
+  name: 'SceneSelect',
+
+  props: {
+    value: {
+      type: String,
+      default: ''
+    }
+  },
+
+  data() {
+    return {
+      vModel: this.value,
+      options: []
+    };
+  },
+
+  watch: {
+    value: {
+      handler(val) {
+        this.vModel = val;
+      },
+      immediate: true
+    }
+  },
+
+  mounted() {
+    this.loadData();
+  },
+
+  methods: {
+    onChange(value) {
+      console.log(value);
+      this.$emit('input', value || null);
+    },
+
+    async loadData() {
+      const { success, data, msg } = await getList();
+      if (success) {
+        this.options = data.map(x => ({
+          value: x.id,
+          label: x.name
+        }));
+      }
+    }
+  }
+};
+</script>
+
+<style lang="scss" scoped></style>

+ 8 - 0
src/utils/dialog-helper.js

@@ -14,6 +14,7 @@ import PhotoerVerifyItem from 'views/photographerManagement/photographerVerify/m
 import ActivityItem from 'views/photoManagement/eventsList/modal/ItemModal.vue';
 import PhotoVerifyItem from 'views/photoManagement/photoVerifyManagement/modal/ItemModal.vue';
 import ImageGoodsItem from 'views/photoManagement/imageGoodsManagement/modal/ItemModal.vue';
+import PhotoUpload from 'views/photographerManagement/photoVerify/modal/ItemModal.vue';
 
 const modal = (Component, props) => {
   let _component = null;
@@ -133,3 +134,10 @@ let ImageGoodsItemModal = data => {
 Vue.prototype.$ImageGoodsItemModal = params => {
   ImageGoodsItemModal(params);
 };
+
+let PhotoUploadModal = data => {
+  modal(PhotoUpload, data);
+};
+Vue.prototype.$PhotoUploadModal = params => {
+  PhotoUploadModal(params);
+};

+ 2 - 2
src/utils/request.js

@@ -49,7 +49,7 @@ axios.interceptors.response.use(
     const res = response.data;
     if (res.code === 401) {
       setToken();
-      location.replace(`http://wxhd.lifespaceprobiotics.cn/code/admin/#/login`);
+      // location.replace(`http://wxhd.lifespaceprobiotics.cn/code/admin/#/login`);
 
       Message({
         message: 'Token失效,请重新登陆',
@@ -186,7 +186,7 @@ const handleNetworkError = error => {
     } else if (error.response && error.response.status === 401) {
       store.dispatch('user/resetToken');
       setToken();
-      location.replace(`http://wxhd.lifespaceprobiotics.cn/code/admin/#/login`);
+      // location.replace(`http://wxhd.lifespaceprobiotics.cn/code/admin/#/login`);
     }
     if (error.message.includes('timeout')) {
       return {

+ 2 - 2
src/views/photoManagement/eventsList/index.vue

@@ -19,7 +19,7 @@
 <script>
 import toolbar from './toolbar';
 import mxFilterList from '@/mixins/filterList';
-import { getList, delItem } from '@/api/activity';
+import { getPage, delItem } from '@/api/activity';
 
 export default {
   name: 'EventsList',
@@ -28,7 +28,7 @@ export default {
 
   mixins: [
     mxFilterList({
-      fetchList: getList // 在下方data再声明一个 fetchList: iGetList 同等效果
+      fetchList: getPage // 在下方data再声明一个 fetchList: iGetList 同等效果
     })
   ],
 

+ 3 - 21
src/views/photoManagement/eventsList/modal/ItemModal.vue

@@ -24,19 +24,7 @@
       </el-form-item>
 
       <el-form-item label="场景" prop="type">
-        <el-select
-          v-model="form.type"
-          :clearable="true"
-          placeholder="请选择所属位置"
-        >
-          <el-option
-            v-for="item in typeOptions"
-            :key="item.value"
-            :label="item.label"
-            :value="item.value"
-          >
-          </el-option>
-        </el-select>
+        <SceneSelect v-model="form.kindergartenId" />
       </el-form-item>
       <el-form-item label="活动时间" prop="eventTimeArr">
         <el-date-picker
@@ -104,13 +92,9 @@ export default {
 
       form: {
         name: '',
-        cover: [
-          {
-            url: 'abc'
-          }
-        ],
+        cover: [],
         brief: '',
-        kindergartenId: '123',
+        kindergartenId: '',
         eventTimeArr: [new Date(), new Date()],
         isShow: false,
         sort: 1
@@ -133,8 +117,6 @@ export default {
         eventTimeArr: [{ validator: validateTimer, trigger: 'blur' }]
       },
 
-      typeOptions: [],
-
       pickerOptions: {
         disabledDate
       }

+ 1 - 1
src/views/photoManagement/eventsList/toolbar.vue

@@ -18,7 +18,7 @@ export default {
         },
         {
           // TODO 场景选择框
-          type: 'text',
+          type: 'SceneSelect',
           name: 'status',
           label: '所属场景'
         },

+ 2 - 2
src/views/photoManagement/imageGoodsManagement/index.vue

@@ -143,11 +143,11 @@ export default {
   },
 
   created() {
-    this.$g_on('photot_reload', this.reload);
+    this.$g_on('photo_reload', this.reload);
   },
 
   beforeDestroy() {
-    this.$g_off('photot_reload', this.reload);
+    this.$g_off('photo_reload', this.reload);
   }
 };
 </script>

+ 1 - 1
src/views/photoManagement/imageGoodsManagement/modal/ItemModal.vue

@@ -153,7 +153,7 @@ export default {
           if (success) {
             this.$success('保存成功!');
             this.modal = false;
-            this.$g_emit('photot_reload');
+            this.$g_emit('photo_reload');
           }
         }
       });

+ 2 - 2
src/views/photoManagement/imageGoodsManagement/toolbar.vue

@@ -11,9 +11,9 @@ export default {
   data() {
     return {
       fields: [
-        // TODO 上传者+
+        // TODO 上传者
         {
-          type: 'select',
+          type: 'ActivitySelect',
           name: 'title',
           label: '上传位置'
         },

+ 4 - 4
src/views/photoManagement/photoVerifyManagement/index.vue

@@ -42,12 +42,12 @@ export default {
                 height: '90px'
               },
               attrs: {
-                src: row.listPreview
+                src: row.listPreview || row.originPhoto
               },
               on: {
                 click: () =>
                   this.$AdvanceViewImageModal({
-                    items: [{ src: row.listPreview }]
+                    items: [{ src: row.listPreview || row.originPhoto }]
                   })
               }
             })
@@ -128,11 +128,11 @@ export default {
   },
 
   created() {
-    this.$g_on('photot_reload', this.reload);
+    this.$g_on('photo_reload', this.reload);
   },
 
   beforeDestroy() {
-    this.$g_off('photot_reload', this.reload);
+    this.$g_off('photo_reload', this.reload);
   }
 };
 </script>

+ 1 - 1
src/views/photoManagement/photoVerifyManagement/modal/ItemModal.vue

@@ -134,7 +134,7 @@ export default {
           if (success) {
             this.$success('保存成功!');
             this.modal = false;
-            this.$g_emit('photot_reload');
+            this.$g_emit('photo_reload');
           }
         }
       });

+ 2 - 2
src/views/photoManagement/photoVerifyManagement/toolbar.vue

@@ -11,9 +11,9 @@ export default {
   data() {
     return {
       fields: [
-        // TODO 上传者+
+        // TODO 上传者
         {
-          type: 'select',
+          type: 'ActivitySelect',
           name: 'title',
           label: '上传位置'
         },

+ 16 - 12
src/views/photographerManagement/photoVerify/index.vue

@@ -2,13 +2,17 @@
   <div class="">
     <toolbar @on-filter="filterData" @on-reset="filterData" />
 
-    <base-table
-      class="m-10 bg-w p-20 br-10"
-      :columns="columns"
-      :items="items"
-      :pagination="pagination"
-      :page-change="pageChange"
-    />
+    <div class="m-10 bg-w p-20 br-10">
+      <el-button type="primary" icon="el-icon-plus" @click="$PhotoUploadModal()"
+        >新增</el-button
+      >
+      <base-table
+        :columns="columns"
+        :items="items"
+        :pagination="pagination"
+        :page-change="pageChange"
+      />
+    </div>
   </div>
 </template>
 
@@ -42,12 +46,12 @@ export default {
                 height: '90px'
               },
               attrs: {
-                src: row.listPreview
+                src: row.listPreview || row.originPhoto
               },
               on: {
                 click: () =>
                   this.$AdvanceViewImageModal({
-                    items: [{ src: row.listPreview }]
+                    items: [{ src: row.listPreview || row.originPhoto }]
                   })
               }
             })
@@ -127,11 +131,11 @@ export default {
   },
 
   created() {
-    this.$g_on('photot_reload', this.reload);
+    this.$g_on('photo_reload', this.reload);
   },
 
   beforeDestroy() {
-    this.$g_off('photot_reload', this.reload);
+    this.$g_off('photo_reload', this.reload);
   },
 
   methods: {
@@ -141,7 +145,7 @@ export default {
       });
       if (success) {
         this.$success('删除成功!');
-        this.$g_emit('photot_reload');
+        this.$g_emit('photo_reload');
       }
     }
   }

+ 44 - 12
src/views/photographerManagement/photoVerify/modal/ItemModal.vue

@@ -11,8 +11,19 @@
     "
   >
     <el-form ref="form" :model="form" :rules="rules" label-width="100px">
-      <el-form-item label="图片" prop="imgUrl">
-        <upload v-model="form.imgUrl" params="prefix=/banner" />
+      <el-form-item label="图片" prop="urls">
+        <upload v-model="form.urls" :limit="10" params="prefix=/banner" />
+      </el-form-item>
+      <el-form-item label="关联场景" prop="kindergartenId">
+        <SceneSelect v-model="form.kindergartenId" />
+      </el-form-item>
+      <el-form-item label="关联活动" prop="activityId">
+        <ActivitySelect
+          v-model="form.activityId"
+          :kindergartenId="form.kindergartenId"
+          :firstLoad="false"
+          :disabled="form.kindergartenId === null"
+        />
       </el-form-item>
     </el-form>
     <span slot="footer" class="dialog-footer">
@@ -26,23 +37,40 @@
 import { saveItem } from '@/api/photoWarehouse';
 
 export default {
-  name: 'PhotoUploadItemModal',
+  name: 'PhotoUploadModal',
 
   data() {
     return {
-      title: '上传图片'
+      title: '上传图片',
       modal: true,
 
       form: {
+        urls: [],
+        kindergartenId: '',
+        activityId: ''
       },
       rules: {
-
-      },
-
-      typeOptions: []
+        urls: [{ required: true, message: '请上传图片', trigger: 'change' }],
+        kindergartenId: [
+          { required: true, message: '请选择关联场景', trigger: 'blur' }
+        ],
+        activityId: [
+          { required: true, message: '请选择关联活动', trigger: 'blur' }
+        ]
+      }
     };
   },
 
+  watch: {
+    'form.kindergartenId': {
+      handler(val) {
+        if (!val) {
+          this.form.activityId = '';
+        }
+      },
+      immediate: true
+    }
+  },
 
   mounted() {},
 
@@ -50,14 +78,18 @@ export default {
     handleConfirm() {
       this.$refs.form.validate(async valid => {
         if (valid) {
-          let params = Object.assign({}, this.form);
-          params.imgUrl = this.form.imgUrl[0].url;
-          if (this.id) params.id = this.id;
+          let params = this.form.urls.map(x => ({
+            activityId: this.form.activityId,
+            kindergartenId: this.form.kindergartenId,
+            originPhoto: x.url,
+            size: x.size,
+            originFilename: x.name
+          }));
           const { success, msg } = await saveItem(params);
           if (success) {
             this.$success('保存成功!');
             this.modal = false;
-            this.$g_emit('banner_reload');
+            this.$g_emit('photo_reload');
           }
         }
       });

+ 2 - 3
src/views/photographerManagement/photoVerify/toolbar.vue

@@ -11,10 +11,9 @@ export default {
   data() {
     return {
       fields: [
-        // TODO
         {
-          type: 'select',
-          name: 'title',
+          type: 'ActivitySelect',
+          name: 'ActivityId',
           label: '上传位置'
         },
         {