今晚合并

CODE/smart-community/property-api/src/main/java/com/community/huiju/service/impl/TpActivityServiceImpl.java

 import org.springframework.beans.BeanUtils;
 import org.springframework.beans.factory.annotation.Autowired;
 import org.springframework.stereotype.Service;
+import org.springframework.transaction.annotation.Transactional;
 
 import java.time.LocalDateTime;
 import java.util.List;
     }
 
     @Override
+    @Transactional(rollbackFor = Exception.class)
     public ResponseBean addActivity(String parameter, UserElement userElement) {
 
         ResponseBean responseBean = new ResponseBean();
         JSONArray jsonArray = jsonObject.getJSONArray("contentImg");
         String [] contentImgArray = jsonArray.toArray(new String[]{});
         TpActivity tpActivity = jsonObject.toJavaObject(TpActivity.class);
+
+        if (contentImgArray.length <= 0 && (null == tpActivity.getActivityContent() || "".equals(tpActivity.getActivityContent())) {
+            responseBean.addError("活动内容描述 和 活动配图至少要存在一个!");
+            return responseBean;
+        }
+
         tpActivity.setCommunityId(userElement.getCommunityId());
         tpActivity.setUpdateDate(LocalDateTime.now());
         tpActivity.setUpdateUser(userElement.getId());
     }
 
     @Override
+    @Transactional(rollbackFor = Exception.class)
     public ResponseBean updateActivity(String parameter, UserElement userElement) {
         ResponseBean responseBean = new ResponseBean();
         JSONObject jsonObject = JSONObject.parseObject(parameter);
+        TpActivity tpActivity = jsonObject.toJavaObject(TpActivity.class);
 
         // 活动配图
-        String [] contentImgArray = (String[]) jsonObject.get("contentImg");
-        TpActivity tpActivity = jsonObject.toJavaObject(TpActivity.class);
+        JSONArray jsonArray = jsonObject.getJSONArray("contentImg");
+        String [] contentImgArray = jsonArray.toArray(new String[]{});
 
         TpActivity selectTpActivity = tpActivityMapper.selectById(tpActivity.getId());
         if (null == selectTpActivity) {
         queryWrapper.eq("type", "activity");
         List<TdImages> imagesList = tdImagesMapper.selectList(queryWrapper);
 
+        // 转换, 只保留 imageUrl 字段
+        List<String> stringList = imagesList.stream().map(e->new String(e.getImageUrl())).collect(Collectors.toList());
+
         Map<String, Object> map = Maps.newHashMap();
         map.put("info", tpActivity);
-        map.put("contentImg", imagesList);
+        map.put("contentImg", stringList);
 
         responseBean.addSuccess(map);
 
     }
 
     @Override
+    @Transactional(rollbackFor = Exception.class)
     public ResponseBean updateStatusInvalid(List<Integer> ids, UserElement userElement) {
 
         ResponseBean responseBean = new ResponseBean();

VUECODE/smart-property-manage/src/views/social/activity/add/index.vue

     submitForm(formName) {
       this.$refs[formName].validate((valid) => {
         if (valid) {
-          if (this.ruleForm.activityContent.length <= 0 && this.ruleForm.contentImg.length <= 0) {
-            this.$message.error('活动内容描述 和 活动配图至少要存在一个!')
-            return false
-          }
-          this.ruleForm.status = 1 // 发布状态
-          this.$store.dispatch('AddAnnouncement', this.ruleForm).then((res) => {
-            if (res.code === '0') {
-              this.$message({
-                message: res.message,
-                type: 'success'
-              })
-              this.$router.push({ name: 'activity-index' })
-              loading.close()
-              return
-            }
-            this.$message.error(res.message)
-          }).catch(() => {
-            console.log('error AddActivity')
-          })
           this.addActivity(1)
         } else {
           console.log('error submit!!')

VUECODE/smart-property-manage/src/views/social/activity/edi/index.vue

           :on-preview="handlePictureCardPreview"
           :on-remove="handleRemove"
           :on-success="handleSuccessContentImg"
+          :file-list="activityContentList"
           name="uploadFiles"
           action="http://localhost:8086/property-api/uploadimage"
           list-type="picture-card">
         </div>
       </el-form-item>
       <el-form-item style="display: flex; justify-content: center;">
-        <el-button @click="resetForm('ruleForm')">存为草稿</el-button>
         <el-button type="primary" @click="submitForm('ruleForm')">发布</el-button>
       </el-form-item>
     </el-form>
 </template>
 
 <script>
+
 export default {
   name: 'Index',
   data() {
     return {
       ruleForm: {
+        id: '',
         activityTitle: '',
         activityCarouselImg: '', // 轮播图
         activityContent: '', // 活动内容详细
         sort: 1, // 权重
         status: '' // 状态 0 是已作废 1 是已发布   2 是草稿 3 是已修改
       },
+      activityContentList: [], // 活动配图预览列表
       imageUrl: '', // 轮播图预览
       dialogVisible: false, // 活动配图, 默认不显示 (以单张为单位)
       dialogImageUrl: '', // 活动配图, 图片链接 (以单张为单位)
       }
     }
   },
+  mounted() {
+    this.getById(this.$route.params.id)
+  },
   methods: {
     submitForm(formName) {
       // 加载框
             return false
           }
           this.ruleForm.status = 1 // 发布状态
-          this.$store.dispatch('AddActivity', this.ruleForm).then((res) => {
+          this.$store.dispatch('UpdateActivity', this.ruleForm).then((res) => {
             if (res.code === '0') {
               this.$message({
                 message: res.message,
       // 关闭加载框
       loading.close()
     },
-    resetForm(formName) {
-      this.$refs[formName].resetFields()
-    },
     handleAvatarSuccess(res, file) { // 轮播图上传回调
       this.ruleForm.activityCarouselImg = res.data[0]
       this.imageUrl = URL.createObjectURL(file.raw)
     sortHandleChange(value) { // 权重值
       this.ruleForm.sort = value
       console.log(value)
+    },
+    getById(id) { // 根据ID获取活动信息
+      this.$store.dispatch('ActivityById', id).then((res) => {
+        const resData = res.data
+        this.imageUrl = resData.info.activityCarouselImg
+        this.ruleForm = resData.info
+
+        const imgArr = resData.contentImg
+        this.ruleForm.contentImg = imgArr
+        for (let i = 0; i < imgArr.length; i++) {
+          this.activityContentList.push({ url: imgArr[i] })
+        }
+      })
     }
+
   }
 }
 </script>

VUECODE/smart-property-manage/src/views/social/activity/index.vue

       <el-table-column
         prop="activityTitle"
         label="标题"
-        align="center"/>
+        align="center">
+        <template slot-scope="scope">
+          <span style="color: #409EFF;cursor: pointer" @click="infoActivity(scope.row.id)" >{{ scope.row.activityTitle }}</span>
+        </template>
+      </el-table-column>
       <el-table-column
         prop="viewCount"
         label="阅读量"
       },
       total: 0, // 数据总数
       list: [],
+      deleteIds: [], // 选择的id集合
       listLoading: true // 表格加载框
     }
   },
       this.listQuery.activityTitle = ''
       this.activityList()
     },
-    handleSelectionChange(val) { // 表格选择
+    handleSelectionChange(data) { // 表格选择
+      // 设置为 空
+      this.deleteIds = []
+      for (let i = 0; i < data.length; i++) {
+        this.deleteIds.push(data[i].id)
+      }
     },
     handleSizeChange(val) {
       console.log(`每页 ${val} 条`)
       this.$router.push({ name: 'activity-add' })
     },
     ediActivity() { // 修改活动
-      this.$router.push({ name: 'activity-edi' })
+      const ids = this.deleteIds
+      if (ids.length > 1) {
+        this.$message.error('只能选择一行数据进行修改!')
+        return
+      }
+      if (ids < 1) {
+        this.$message.error('请选择一行数据进行修改!')
+        return
+      }
+      this.$router.push({ name: 'activity-edi', params: { id: ids[0] }})
     },
-    infoActivity() { // 查看活动
-      this.$router.push({ name: 'activity-info' })
+    infoActivity(id) { // 查看活动
+      this.$router.push({ name: 'activity-info', params: { id: id }})
     }
   }
 }

VUECODE/smart-property-manage/src/views/social/activity/info/index.vue

 <template>
-  <div>查看</div>
+  <div id="root">
+    <span class="activityTile">活动标题</span>
+    <img src="http://jingcheng-h5temp.oss-cn-shanghai.aliyuncs.com/1543484412841.png" width="700" height="500">
+    <div class="activityContext">
+      尊敬的业主/住户：
+      为丰富小区入住业主/住户的社区文化活动，增进各业主/住户间的联系，现物业服务中心特协调银城旗下分公司南京锦城佳业营销策划有限公司举办为期两个月的暑期露天电影节活动！详情请关注通知及各幢大堂的公告通知，下周六11月24日晚将进行第一场活动！更多细节敬请期待！
+    </div>
+    <div class="activityContextImg">
+      <img src="http://jingcheng-h5temp.oss-cn-shanghai.aliyuncs.com/1543484412841.png" width="700" height="500">
+      <img src="http://jingcheng-h5temp.oss-cn-shanghai.aliyuncs.com/1543484412841.png" width="700" height="500">
+    </div>
+    <div class="progress">
+      <div class="text-progress">
+        <span class="people-number">已报名人数100</span>
+        <div class="outer-layer"/>
+        <div class="inner-layer"/>
+      </div>
+      <div class="circular"/>
+      <div class="people-limit">限制100人</div>
+      <el-button type="primary" style="float: left;">查看报名名单</el-button>
+    </div>
+  </div>
 </template>
 
 <script>
 </script>
 
 <style scoped>
-
+#root {
+  display: flex;
+  flex-flow: column;
+  width: 700px;
+  margin-top: 50px;
+  margin-left: auto;
+  margin-right: auto;
+}
+.activityTile{
+  text-align: center;
+  font-size: 30px;
+  margin-bottom: 10px;
+}
+.activityContext{
+  margin-top: 20px;
+  margin-bottom: 20px;
+  font-size: 20px;
+  justify-items: center;
+}
+.progress {
+  display: flex;
+  justify-content: space-between;
+  margin-top: 20px;
+  margin-bottom: 20px;
+}
+.text-progress {
+  width: 500px;
+  float: left;
+  align-content: center;
+  position: absolute;
+  margin-top: 12px;
+}
+.people-number {
+  position: relative;
+  margin-left: 180px;
+}
+.outer-layer {
+  background-color: gainsboro;
+  height: 3px;
+  width: 450px;
+  margin-top: -10px;
+  position: relative;
+}
+.inner-layer {
+  background-color: aquamarine;
+  height: 6px;
+  width: 100px;
+  position: relative;
+  margin-top: -4px;
+}
+.circular {
+  border: 1px #001528 solid;
+  border-radius: 10px;
+  /*background-color: chartreuse;*/
+  width: 20px;
+  height: 20px;
+  position: relative;
+  margin-left: 452px;
+  margin-top: 11px;
+  float: left;
+}
+.people-limit {
+  margin-top: 13px;
+}
 </style>