From 06941e042043eb97c3721074d768c935da92751b Mon Sep 17 00:00:00 2001
From: yujt <work@yujt.net.cn>
Date: Tue, 23 Jun 2020 09:24:45 +0800
Subject: [PATCH] =?UTF-8?q?=E6=96=B0=E9=97=BB=E6=A8=A1=E5=9D=97=E4=BF=AE?=
 =?UTF-8?q?=E6=94=B9=EF=BC=8C=E5=90=84=E5=8A=9F=E8=83=BD=E7=89=88=E5=9D=97?=
 =?UTF-8?q?=E7=8B=AC=E7=AB=8B?=
MIME-Version: 1.0
Content-Type: text/plain; charset=UTF-8
Content-Transfer-Encoding: 8bit

---
 src/views/modules/news/allnews.vue            |   7 +-
 src/views/modules/news/news-add-or-update.vue | 100 +---
 .../modules/news/news-healthy-publish.vue     | 449 ++++++++++++++++++
 src/views/modules/news/news-healthy.vue       | 282 +++++++++++
 src/views/modules/news/news-publish.vue       |  59 +--
 .../modules/news/news-safety-publish.vue      | 447 +++++++++++++++++
 src/views/modules/news/news-safety.vue        | 282 +++++++++++
 src/views/modules/news/news.vue               | 106 +----
 8 files changed, 1474 insertions(+), 258 deletions(-)
 create mode 100644 src/views/modules/news/news-healthy-publish.vue
 create mode 100644 src/views/modules/news/news-healthy.vue
 create mode 100644 src/views/modules/news/news-safety-publish.vue
 create mode 100644 src/views/modules/news/news-safety.vue

diff --git a/src/views/modules/news/allnews.vue b/src/views/modules/news/allnews.vue
index ad751a2..9457561 100644
--- a/src/views/modules/news/allnews.vue
+++ b/src/views/modules/news/allnews.vue
@@ -148,7 +148,8 @@ export default {
         startTime: '',
         endTime: '',
         keyword: '',
-        category: ''
+        category: '',
+        sectionCode: 'home_page_news'
       },
       time: '',
       options: [],
@@ -195,12 +196,11 @@ export default {
       }
     },
     setRegistTime () {
-      console.log(this.time[0])
       this.dataForm.startTime = this.time[0]
       this.dataForm.endTime = this.time[1]
     },
     getListCategory () {
-      this.$http.get(`/news/newscategory/category/`).then(({ data: res }) => {
+      this.$http.get(`/news/newscategory/category/${this.dataForm.sectionCode}`).then(({ data: res }) => {
         if (res.code !== 0) {
           return this.$message.error(res.msg)
         }
@@ -215,7 +215,6 @@ export default {
       }).then(() => {
         this.onLine.id = row.id
         this.onLine.onLineState = '0'
-        console.log(this.onLine)
         this.$http.post(`/news/news/modifyOnLine/`, this.onLine).then(({ data: res }) => {
           if (res.code !== 0) {
             return this.$message.error(res.msg)
diff --git a/src/views/modules/news/news-add-or-update.vue b/src/views/modules/news/news-add-or-update.vue
index f911a74..be38550 100644
--- a/src/views/modules/news/news-add-or-update.vue
+++ b/src/views/modules/news/news-add-or-update.vue
@@ -15,40 +15,6 @@
                      clearable
                      collapse-tags></el-cascader>
       </el-form-item>
-      <!--<el-form-item label="所属街道"
-                    prop="streetId">
-        <el-select v-model="dataForm.streetId"
-                   @change="changeStreet"
-                   placeholder="所属街道">
-          <el-option v-for="item in streetList"
-                     :key="item.id"
-                     :label="item.name"
-                     :value="item.id">
-          </el-option>
-        </el-select>
-      </el-form-item>
-      <el-form-item label="所属社区">
-        <el-select v-model="dataForm.communityId"
-                   @change="changeCommunity"
-                   placeholder="所属社区">
-          <el-option v-for="item in communityList"
-                     :key="item.id"
-                     :label="item.name"
-                     :value="item.id">
-          </el-option>
-        </el-select>
-      </el-form-item>
-      <el-form-item label="所属网格">
-        <el-select v-model="dataForm.gridId"
-                   @change="changeGrid"
-                   placeholder="所属网格">
-          <el-option v-for="item in gridList"
-                     :key="item.id"
-                     :label="item.name"
-                     :value="item.id">
-          </el-option>
-        </el-select>
-      </el-form-item>-->
       <el-form-item label="类别"
                     prop="newsCateroryId">
         <el-select v-model="dataForm.newsCateroryId"
@@ -142,12 +108,6 @@ export default {
       },
       dataForm: {
         id: '',
-        streetId: null,
-        street: null,
-        communityId: null,
-        community: null,
-        gridId: null,
-        grid: null,
         newsCateroryId: '',
         newsProperty: '',
         newsTitle: '',
@@ -155,12 +115,10 @@ export default {
         newsReleaseEndTime: '',
         newsContent: '',
         newsImageUrl: '',
+        sectionCode: '',
         allDeptIdsShow: []
       },
       time: [],
-      streetList: [],
-      communityList: [],
-      gridList: [],
       options: [],
       categorys: [],
       loading: false,
@@ -197,8 +155,6 @@ export default {
         this.options = res.data.options
       })
       .catch(() => { })
-    this.getDeptInfoList('street', localStorage.getItem('street') === null ? '1169154711480528897' : localStorage.getItem('street'))
-    this.getListCategory()
     this.visible = true
     this.$nextTick(() => {
       this.dataForm.communityId = this.dataForm.streetId = this.dataForm.gridId = null
@@ -254,66 +210,18 @@ export default {
           return this.$message.error(res.msg)
         }
         this.dataForm = { ...this.dataForm, ...res.data }
+        this.getListCategory(this.dataForm.sectionCode)
         this.resetRegistTime()
         this.quillEditor.root.innerHTML = res.data.newsContent
-        if (this.dataForm.streetId) {
-          if (this.dataForm.communityId === 0) {
-            this.dataForm.communityId = this.dataForm.gridId = null
-          }
-          this.getDeptInfoList('community', this.dataForm.streetId)
-        }
-        if (this.dataForm.communityId) {
-          if (this.dataForm.gridId === 0) {
-            this.dataForm.gridId = null
-          }
-          this.getDeptInfoList('grid', this.dataForm.communityId)
-        }
-      }).catch(() => { })
-    },
-    // 获取部门列表
-    getDeptInfoList (dataReceiver, faDeptId) {
-      if (!faDeptId) {
-        return
-      }
-      this.$http.get(`/sys/dept/sublist/` + faDeptId).then(({ data: res }) => {
-        if (res.code !== 0) {
-          return this.$message.error(res.msg)
-        }
-        if (dataReceiver === 'street') {
-          let all = [{ id: '1', name: '全部' }]
-          this.streetList = all.concat(res.data)
-        } else if (dataReceiver === 'community') {
-          this.communityList = res.data
-        } else if (dataReceiver === 'grid') {
-          this.gridList = res.data
-        }
       }).catch(() => { })
     },
-    changeStreet (event) {
-      let choosenItem = this.streetList.filter(item => item.id === this.dataForm.streetId)[0]
-      this.dataForm.street = choosenItem.name
-      this.dataForm.communityId = this.dataForm.gridId = this.dataForm.community = this.dataForm.grid = null
-      this.communityList = this.gridList = []
-      this.getDeptInfoList('community', event)
-    },
-    changeCommunity (event) {
-      let choosenItem = this.communityList.filter(item => item.id === this.dataForm.communityId)[0]
-      this.dataForm.community = choosenItem.name
-      this.dataForm.gridId = this.dataForm.grid = null
-      this.gridList = []
-      this.getDeptInfoList('grid', event)
-    },
-    changeGrid (event) {
-      let choosenItem = this.gridList.filter(item => item.id === this.dataForm.gridId)[0]
-      this.dataForm.grid = choosenItem.name
-    },
     changeCaterory () {
       // 给新闻类别变量赋值
       let choosenItem = this.categorys.filter(item => item.id === this.dataForm.newsCateroryId)[0]
       this.dataForm.newsProperty = choosenItem.name
     },
-    getListCategory () {
-      this.$http.get(`/news/newscategory/category`).then(({ data: res }) => {
+    getListCategory (sectionCode) {
+      this.$http.get(`/news/newscategory/category/${sectionCode}`).then(({ data: res }) => {
         if (res.code !== 0) {
           return this.$message.error(res.msg)
         }
diff --git a/src/views/modules/news/news-healthy-publish.vue b/src/views/modules/news/news-healthy-publish.vue
new file mode 100644
index 0000000..b3fe1cf
--- /dev/null
+++ b/src/views/modules/news/news-healthy-publish.vue
@@ -0,0 +1,449 @@
+<template>
+  <el-card shadow="never"
+           class="aui-card--fill">
+    <div class="mod-news__news}">
+      <el-form :inline="true"
+               :model="dataForm"
+               :rules="dataRule"
+               ref="dataForm"
+               :label-width="$i18n.locale === 'en-US' ? '120px' : '80px'">
+        <el-row>
+          <el-form-item label="所属部门">
+            <el-cascader v-model="dataForm.allDeptIdsShow"
+                         :options="options"
+                         :props="{ multiple: true }"
+                         clearable
+                         collapse-tags></el-cascader>
+          </el-form-item>
+        </el-row>
+        <el-row>
+          <el-form-item label="文章类别"
+                        prop="newsCateroryId">
+            <el-select v-model="dataForm.newsCateroryId"
+                       @change="changeCaterory"
+                       placeholder="请选择类别">
+              <el-option v-for="item in categorys"
+                         :key="item.id"
+                         :label="item.name"
+                         :value="item.id">
+              </el-option>
+            </el-select>
+          </el-form-item>
+        </el-row>
+        <el-row>
+          <el-form-item label="文章标题"
+                        prop="newsTitle">
+            <el-input v-model="dataForm.newsTitle"
+                      type="text"
+                      maxlength="50"
+                      show-word-limit
+                      placeholder="请输入标题"
+                      clearable
+                      style="width:500px">
+            </el-input>
+          </el-form-item>
+        </el-row>
+        <el-row>
+          <el-form-item prop="newsContent"
+                        label="正文编辑">
+            <!-- 富文本编辑器, 容器 -->
+            <div id="J_quillEditor" class="ql-editor"></div>
+            <!-- 自定义上传图片功能 (使用element upload组件) -->
+            <el-upload :action="uploadUrl"
+                       :show-file-list="false"
+                       :before-upload="uploadBeforeUploadHandle"
+                       :on-success="uploadSuccessHandle"
+                       style="display: none;">
+              <el-button ref="uploadBtn"
+                         type="primary"
+                         size="small">{{ $t('upload.button') }}</el-button>
+            </el-upload>
+          </el-form-item>
+        </el-row>
+        <el-row>
+          <el-form-item prop="newsImageUrl"
+                        v-loading="loading"
+                        label="文章首图">
+            <el-upload class="avatar-uploader"
+                       :action="uploadUrl"
+                       :show-file-list="false"
+                       :on-success="handleAvatarSuccess"
+                       :on-error="handelError"
+                       :before-upload="beforeAvatarUpload">
+              <img v-if="dataForm.newsImageUrl"
+                   :src="dataForm.newsImageUrl"
+                   class="avatar">
+              <i v-else
+                 class="el-icon-plus avatar-uploader-icon"></i>
+              <div slot="tip"
+                   class="el-upload__tip">只能上传jpg/png文件，且不超过500kb</div>
+            </el-upload>
+          </el-form-item>
+        </el-row>
+        <el-row>
+          <el-form-item prop="newsReleaseStartTime"
+                        label="有效时间">
+            <el-date-picker @change='setRegistTime'
+                            v-model="time"
+                            value-format="yyyy-MM-dd"
+                            type="daterange"
+                            range-separator="至"
+                            start-placeholder="开始日期"
+                            end-placeholder="结束日期">
+            </el-date-picker>
+          </el-form-item>
+        </el-row>
+        <el-row>
+          <el-form-item label-width="500px">
+            <el-button type="primary"
+                       @click="dataFormSubmitHandle()">确认发布</el-button>
+            <el-button type="primary"
+                       @click="draftDataFormSubmitHandle()">存草稿箱</el-button>
+          </el-form-item>
+        </el-row>
+      </el-form>
+    </div>
+  </el-card>
+</template>
+<script>
+import Cookies from 'js-cookie'
+import debounce from 'lodash/debounce'
+import 'quill/dist/quill.snow.css'
+import Quill from 'quill'
+import AddOrUpdate from './news-add-or-update'
+export default {
+  data () {
+    return {
+      dataForm: {
+        id: '',
+        newsCateroryId: '',
+        newsTitle: '',
+        newsReleaseStartTime: '',
+        newsReleaseEndTime: '',
+        newsContent: '',
+        newsImageUrl: '',
+        newsProperty: '',
+        sectionCode: 'healthy_living',
+        allDeptIdsShow: []
+      },
+      time: [],
+      options: [],
+      categorys: [],
+      loading: false,
+      // 富文本
+      quillEditor: null,
+      quillEditorToolbarOptions: [
+        ['bold', 'italic', 'underline', 'strike'],
+        ['blockquote', 'code-block', 'image'],
+        [{ 'header': 1 }, { 'header': 2 }],
+        [{ 'list': 'ordered' }, { 'list': 'bullet' }],
+        [{ 'script': 'sub' }, { 'script': 'super' }],
+        [{ 'indent': '-1' }, { 'indent': '+1' }],
+        [{ 'direction': 'rtl' }],
+        [{ 'size': ['small', false, 'large', 'huge'] }],
+        [{ 'header': [1, 2, 3, 4, 5, 6, false] }],
+        [{ 'color': [] }, { 'background': [] }],
+        [{ 'font': [] }],
+        [{ 'align': [] }],
+        ['clean']
+      ],
+      uploadUrl: '',
+      // 富文本end
+      fileList: []
+    }
+  },
+  activated () {
+    this.getListCategory()
+  },
+  watch: {
+    'dataForm.allDeptIdsShow': function (val) {
+    }
+  },
+  created () {
+    this.$http
+      .get(`/sys/user/deptOptions/getAllByLoginUser`)
+      .then(({ data: res }) => {
+        if (res.code !== 0) {
+          return this.$message.error(res.msg)
+        }
+        this.options = res.data.options
+      })
+      .catch(() => { })
+    this.getListCategory()
+    this.visible = true
+    this.$nextTick(() => {
+      this.dataForm.communityId = this.dataForm.streetId = this.dataForm.gridId = null
+      // 富文本
+      this.hideUpload = false
+      this.uploadUrl = `${window.SITE_CONFIG['apiURL']}/oss/file/upload?token=${Cookies.get('token')}`
+      if (this.quillEditor) {
+        this.quillEditor.deleteText(0, this.quillEditor.getLength())
+      } else {
+        this.quillEditorHandle()
+      }
+      // 富文本end
+    })
+  },
+  computed: {
+    dataRule () {
+      return {
+        streetId: [
+          { required: true, message: this.$t('validate.required'), trigger: 'blur' }
+        ],
+        newsTitle: [
+          { required: true, message: this.$t('validate.required'), trigger: 'blur' }
+        ],
+        newsCateroryId: [
+          { required: true, message: this.$t('validate.required'), trigger: 'blur' }
+        ],
+        newsImageUrl: [
+          { required: true, message: this.$t('validate.required'), trigger: 'blur' }
+        ],
+        newsReleaseStartTime: [
+          { required: true, message: this.$t('validate.required'), trigger: 'blur' }
+        ],
+        newsContent: [
+          { required: true, message: this.$t('validate.required'), trigger: 'blur' }
+        ]
+      }
+    }
+  },
+  methods: {
+    changeCaterory () {
+      // 给新闻类别变量赋值
+      let choosenItem = this.categorys.filter(item => item.id === this.dataForm.newsCateroryId)[0]
+      this.dataForm.newsProperty = choosenItem.name
+    },
+    getListCategory () {
+      this.$http.get(`/news/newscategory/category/${this.dataForm.sectionCode}`).then(({ data: res }) => {
+        if (res.code !== 0) {
+          return this.$message.error(res.msg)
+        }
+        this.categorys = res.data
+      }).catch(() => { })
+    },
+    // 富文本编辑器
+    quillEditorHandle () {
+      this.quillEditor = new Quill('#J_quillEditor', {
+        modules: {
+          toolbar: this.quillEditorToolbarOptions
+        },
+        theme: 'snow'
+      })
+      this.quillEditor.container.style.height = `${300}px`
+      // // 自定义上传图片功能 (使用element upload组件)
+      this.quillEditor.getModule('toolbar').addHandler('image', () => {
+        this.$refs.uploadBtn.$el.click()
+      })
+      // 监听内容变化，动态赋值
+      this.quillEditor.on('text-change', () => {
+        this.dataForm.newsContent = this.quillEditor.root.innerHTML
+        // if ((this.dataForm.newsContent).length > 10000) {
+        //   return this.$message.error('您输入的的内容已超过字数')
+        // }
+      })
+    },
+    // 上传图片之前 (富文本)
+    uploadBeforeUploadHandle (file) {
+      if (file.type !== 'image/jpg' && file.type !== 'image/jpeg' && file.type !== 'image/png' && file.type !== 'image/gif') {
+        this.$message.error(this.$t('upload.tip', { 'format': 'jpg、png、gif' }))
+        return false
+      }
+    },
+    // 上传图片成功 (富文本)
+    uploadSuccessHandle (res, file, fileList) {
+      if (res.code !== 0) {
+        return this.$message.error(res.msg)
+      }
+      this.quillEditor.insertEmbed(this.quillEditor.getSelection().index, 'image', res.data.url)
+    },
+    setRegistTime () {
+      this.dataForm.newsReleaseStartTime = this.time[0]
+      this.dataForm.newsReleaseEndTime = this.time[1]
+    },
+    // 上传图片end
+    // 表单提交
+    dataFormSubmitHandle: debounce(function () {
+      // if ((this.dataForm.newsContent).length > 10000) {
+      //   return this.$message.error('您输入的的内容已超过字数不能提交')
+      // }
+      this.$refs['dataForm'].validate((valid) => {
+        if (!valid) {
+          return false
+        }
+        this.$http['post']('/news/news/publish', this.dataForm).then(({ data: res }) => {
+          if (res.code !== 0) {
+            return this.$message.error(res.msg)
+          }
+          this.$message({
+            message: this.$t('prompt.success'),
+            type: 'success',
+            duration: 500,
+            onClose: () => {
+              this.dataForm.id = ''
+              this.dataForm.streetId = ''
+              this.dataForm.communityId = null
+              this.dataForm.gridId = null
+              this.dataForm.newsCateroryId = ''
+              this.dataForm.newsTitle = ''
+              this.dataForm.newsReleaseStartTime = ''
+              this.dataForm.newsReleaseEndTime = ''
+              this.dataForm.newsContent = ''
+              this.dataForm.newsImageUrl = ''
+              this.dataForm.street = ''
+              this.dataForm.community = null
+              this.dataForm.grid = null
+              this.dataForm.newsProperty = ''
+              this.visible = false
+              this.time = []
+              this.quillEditor.root.innerHTML = ''
+              this.dataForm.communityId = this.dataForm.streetId = this.dataForm.gridId = null
+              this.communityList = this.gridList = []
+            }
+          })
+        }).catch(() => { })
+      })
+    }, 1000, { 'leading': true, 'trailing': false }),
+    // 存草稿
+    draftDataFormSubmitHandle: debounce(function () {
+      // if ((this.dataForm.newsContent).length > 10000) {
+      //   return this.$message.error('您输入的的内容已超过字数不能提交')
+      // }
+      this.$refs['dataForm'].validate((valid) => {
+        if (!valid) {
+          return false
+        }
+        this.$http['post']('/news/news/', this.dataForm).then(({ data: res }) => {
+          if (res.code !== 0) {
+            return this.$message.error(res.msg)
+          }
+          this.$message({
+            message: this.$t('prompt.success'),
+            type: 'success',
+            duration: 500,
+            onClose: () => {
+              this.dataForm.id = ''
+              this.dataForm.streetId = ''
+              this.dataForm.communityId = null
+              this.dataForm.gridId = null
+              this.dataForm.newsCateroryId = ''
+              this.dataForm.newsTitle = ''
+              this.dataForm.newsReleaseStartTime = ''
+              this.dataForm.newsReleaseEndTime = ''
+              this.dataForm.newsContent = ''
+              this.dataForm.newsImageUrl = ''
+              this.dataForm.street = ''
+              this.dataForm.community = null
+              this.dataForm.grid = null
+              this.dataForm.newsProperty = ''
+              this.visible = false
+              this.time = []
+              this.quillEditor.root.innerHTML = ''
+              this.dataForm.communityId = this.dataForm.streetId = this.dataForm.gridId = null
+              this.communityList = this.gridList = []
+            }
+          })
+        }).catch(() => { })
+      })
+    }, 1000, { 'leading': true, 'trailing': false }),
+    handleAvatarSuccess (res, file) {
+      this.loading = false
+      this.dataForm.newsImageUrl = res.data.url
+    },
+    beforeAvatarUpload (file) {
+      this.loading = true
+      var that = this
+      return new Promise((resolve, reject) => {
+        const isJPG = file.type === 'image/jpeg'
+        const isPNG = file.type === 'image/png'
+        const isLt1M = file.size / 1024 / 1024 < 1
+        let bool = false
+        // 判断是否符合格式要求
+        if (isJPG || isPNG) {
+          bool = true
+        } else {
+          that.$message.error('上传文件必须是jpg、png格式!')
+          return false
+        }
+        // 如果格式符合要求，但是size过大，对图片进行处理
+        if (bool && !isLt1M) {
+          let image = new Image()
+          let resultBlob = ''
+          image.src = URL.createObjectURL(file)
+          image.onload = () => {
+            resultBlob = that.compressUpload(image)
+            resolve(resultBlob)
+          }
+        } else if (bool && isLt1M) {
+          resolve(file)
+        }
+      })
+    },
+    compressUpload (image) {
+      // 创建画布元素
+      let canvas = document.createElement('canvas')
+      let ctx = canvas.getContext('2d')
+      let { width } = image
+      let { height } = image
+      canvas.width = width
+      canvas.height = height
+      ctx.fillRect(0, 0, canvas.width, canvas.height)
+      ctx.drawImage(image, 0, 0, width, height)
+      // 等比压缩
+      let compressData = canvas.toDataURL('image/jpeg', 0.8)
+      // base64转Blob
+      let blobImg = this.dataURItoBlob(compressData)
+      return blobImg
+    },
+    dataURItoBlob (data) {
+      let byteString
+      if (data.split(',')[0].indexOf('base64') >= 0) {
+        // 转二进制
+        byteString = atob(data.split(',')[1])
+      } else {
+        byteString = unescape(data.split(',')[1])
+      }
+      let mimeString = data
+        .split(',')[0]
+        .split(':')[1]
+        .split('')[0]
+      let ia = new Uint8Array(byteString.length)
+      for (let i = 0; i < byteString.length; i += 1) {
+        ia[i] = byteString.charCodeAt(i)
+      }
+      return new Blob([ia], { type: mimeString })
+    },
+    handelError () {
+      this.loading = false
+    }
+  },
+  components: {
+    AddOrUpdate
+  }
+}
+</script>
+<style>
+.avatar-uploader .el-upload {
+  border: 1px dashed #d9d9d9;
+  border-radius: 6px;
+  cursor: pointer;
+  position: relative;
+  overflow: hidden;
+}
+.avatar-uploader .el-upload:hover {
+  border-color: #409eff;
+}
+.avatar-uploader-icon {
+  font-size: 28px;
+  color: #8c939d;
+  width: 178px;
+  height: 178px;
+  line-height: 178px;
+  text-align: center;
+}
+.avatar {
+  width: 178px;
+  height: 178px;
+  display: block;
+}
+</style>
diff --git a/src/views/modules/news/news-healthy.vue b/src/views/modules/news/news-healthy.vue
new file mode 100644
index 0000000..7b8b3e6
--- /dev/null
+++ b/src/views/modules/news/news-healthy.vue
@@ -0,0 +1,282 @@
+<template>
+  <el-card shadow="never"
+           class="aui-card--fill">
+    <div class="mod-news__news}">
+      <el-form :inline="true"
+               :model="dataForm"
+               @keyup.enter.native="getDataList()">
+        <el-form-item label="所属机构">
+          <el-cascader v-model="deptIdList"
+                       :options="options"
+                       :props="{ checkStrictly: true }"
+                       clearable></el-cascader>
+        </el-form-item>
+        <br>
+        <span class="demonstration">提交时间</span>&nbsp;&nbsp;
+        <el-date-picker @change='setRegistTime'
+                        v-model="time"
+                        value-format="yyyy-MM-dd"
+                        type="daterange"
+                        range-separator="至"
+                        start-placeholder="开始日期"
+                        end-placeholder="结束日期">
+        </el-date-picker> &nbsp; &nbsp;
+        <el-form-item label="类别">
+          <el-select v-model="dataForm.category"
+                     clearable
+                     placeholder="所属类别">
+            <el-option v-for="item in categorys"
+                       :key="item.id"
+                       :label="item.name"
+                       :value="item.id">
+            </el-option>
+          </el-select>
+        </el-form-item>
+        <el-form-item label="关键字">
+          <el-form-item>
+            <el-input v-model="dataForm.keyword"
+                      placeholder="请输入标题"
+                      clearable></el-input>
+          </el-form-item>
+        </el-form-item>
+        <el-form-item>
+          <el-button @click="getDataList()">{{ $t('query') }}</el-button>
+        </el-form-item>
+        <el-form-item>
+          <el-button v-if="$hasPermission('news:news:save')"
+                     type="primary"
+                     @click="addOrUpdateHandle()">{{ $t('add') }}</el-button>
+        </el-form-item>
+        <el-form-item>
+          <el-button v-if="$hasPermission('news:news:delete')"
+                     type="danger"
+                     @click="deleteHandle()">{{ $t('deleteBatch') }}</el-button>
+        </el-form-item>
+      </el-form>
+      <el-table v-loading="dataListLoading"
+                :data="dataList"
+                border
+                @selection-change="dataListSelectionChangeHandle"
+                style="width: 100%;">
+        <el-table-column label="序号"
+                         width="70px">
+          <template slot-scope="scope">
+            {{scope.$index+1}}
+          </template>
+        </el-table-column>
+        <el-table-column prop="newsTitle"
+                         label="文章标题"
+                         header-align="center"
+                         align="center"></el-table-column>
+        <el-table-column prop="readingAmount"
+                         label="阅读量"
+                         header-align="center"
+                         align="center"></el-table-column>
+        <el-table-column prop="likeNumber"
+                         label="支持数"
+                         header-align="center"
+                         align="center"></el-table-column>
+        <el-table-column prop="unLikeNumber"
+                         label="不支持数"
+                         header-align="center"
+                         align="center"></el-table-column>
+        <el-table-column prop="createdTime"
+                         label="提交时间"
+                         header-align="center"
+                         align="center"></el-table-column>
+        <el-table-column prop="creatorName"
+                         label="提交人"
+                         header-align="center"
+                         align="center"></el-table-column>
+        <el-table-column label="有效时间">
+          <template slot-scope="scope">
+            {{scope.row.newsReleaseStartTime}}<br /> 到 <br /> {{scope.row.newsReleaseEndTime}}
+          </template>
+        </el-table-column>
+        <el-table-column label="发布状态"
+                         :formatter="publishState"
+                         header-align="center"
+                         align="center">
+        </el-table-column>
+        <el-table-column :label="$t('handle')"
+                         fixed="right"
+                         header-align="center"
+                         align="center"
+                         width="200">
+          <template slot-scope="scope">
+            <el-button type="text"
+                       size="small"
+                       @click="addOrUpdateHandle(scope.row.id)">{{ $t('update') }}</el-button>
+            <el-button type="text"
+                       size="small"
+                       @click="deleteHandle(scope.row.id)">{{ $t('delete') }}</el-button>
+            <el-button v-if="scope.row.newsUpDownState === '0' && new Date(scope.row.newsReleaseStartTime.replace('-', '/')) < new Date()
+             && new Date(scope.row.newsReleaseEndTime.replace('-', '/')) > new Date()"
+                       type="text"
+                       size="small"
+                       @click="modifyOnLine(scope.row)">下线</el-button>
+          </template>
+        </el-table-column>
+      </el-table>
+      <el-pagination :current-page="page"
+                     :page-sizes="[10, 20, 50, 100]"
+                     :page-size="limit"
+                     :total="total"
+                     layout="total, sizes, prev, pager, next, jumper"
+                     @size-change="pageSizeChangeHandle"
+                     @current-change="pageCurrentChangeHandle">
+      </el-pagination>
+      <!-- 弹窗, 新增 / 修改 -->
+      <add-or-update v-if="addOrUpdateVisible"
+                     ref="addOrUpdate"
+                     @refreshDataList="getDataList"></add-or-update>
+    </div>
+  </el-card>
+</template>
+<script>
+import mixinViewModule from '@/mixins/view-module'
+import AddOrUpdate from './news-add-or-update'
+export default {
+  mixins: [mixinViewModule],
+  data () {
+    return {
+      mixinViewModuleOptions: {
+        getDataListURL: '/news/news/page',
+        getDataListIsPage: true,
+        deleteURL: '/news/news',
+        deleteIsBatch: true
+      },
+      dataForm: {
+        id: '',
+        deptId: '',
+        startTime: '',
+        endTime: '',
+        keyword: '',
+        sectionCode: 'healthy_living',
+        category: ''
+      },
+      time: '',
+      options: [],
+      deptIdList: [],
+      categorys: [],
+      onLine: {
+        id: '',
+        onLineState: ''
+      }
+    }
+  },
+  created () {
+    this.$http
+      .get(`/sys/user/deptOptions/getByLoginUser`)
+      .then(({ data: res }) => {
+        if (res.code !== 0) {
+          return this.$message.error(res.msg)
+        }
+        this.options = res.data.options
+      })
+      .catch(() => { })
+    this.getListCategory()
+  },
+  methods: {
+    newsUpDownState: function (row) {
+      return row.newsUpDownState === '1' ? '下线' : '上线'
+    },
+    publishState: function (row) {
+      var stdt = new Date(row.newsReleaseStartTime.replace('-', '/'))
+      var eddt = new Date(row.newsReleaseEndTime.replace('-', '/'))
+      var nowdt = new Date()
+      if (row.newsUpDownState === '1') {
+        // 手动下线
+        return '已下线'
+      }
+      if (nowdt > stdt && nowdt < eddt && row.newsUpDownState === '0') {
+        return '已上线'
+      }
+      if (nowdt < stdt) {
+        return '未上线'
+      }
+      if (nowdt > eddt) {
+        return '已下线'
+      }
+    },
+    setRegistTime () {
+      this.dataForm.startTime = this.time[0]
+      this.dataForm.endTime = this.time[1]
+    },
+    getListCategory () {
+      this.$http.get(`/news/newscategory/category/${this.dataForm.sectionCode}`).then(({ data: res }) => {
+        if (res.code !== 0) {
+          return this.$message.error(res.msg)
+        }
+        this.categorys = res.data
+      }).catch(() => { })
+    },
+    modifyOnLine (row) {
+      this.$confirm(this.$t('prompt.info', { 'handle': '下线' }), this.$t('下线'), {
+        confirmButtonText: this.$t('confirm'),
+        cancelButtonText: this.$t('cancel'),
+        type: 'warning'
+      }).then(() => {
+        this.onLine.id = row.id
+        this.onLine.onLineState = '0'
+        this.$http.post(`/news/news/modifyOnLine/`, this.onLine).then(({ data: res }) => {
+          if (res.code !== 0) {
+            return this.$message.error(res.msg)
+          }
+          this.$message({
+            message: this.$t('prompt.success'),
+            type: 'success',
+            duration: 500,
+            onClose: () => {
+            }
+          })
+          this.getDataList()
+        }).catch(() => { })
+      }).catch(() => { })
+    },
+    // 获取数据列表
+    getDataList () {
+      if (this.time === null) {
+        this.dataForm.startTime = ''
+        this.dataForm.endTime = ''
+      }
+      this.dataListLoading = true
+      this.$http.get(
+        this.mixinViewModuleOptions.getDataListURL,
+        {
+          params: {
+            order: this.order,
+            orderField: this.orderField,
+            page: this.mixinViewModuleOptions.getDataListIsPage ? this.page : null,
+            limit: this.mixinViewModuleOptions.getDataListIsPage ? this.limit : null,
+            ...this.dataForm
+          }
+        }
+      ).then(({ data: res }) => {
+        this.dataListLoading = false
+        if (res.code !== 0) {
+          this.dataList = []
+          this.total = 0
+          return this.$message.error(res.msg)
+        }
+        this.dataList = this.mixinViewModuleOptions.getDataListIsPage ? res.data.list : res.data
+        this.total = this.mixinViewModuleOptions.getDataListIsPage ? res.data.total : 0
+      }).catch(() => {
+        this.dataListLoading = false
+      })
+    }
+  },
+  components: {
+    AddOrUpdate
+  },
+  watch: {
+    'deptIdList': function (val) {
+      if (val.length !== 0) {
+        this.dataForm.deptId = val[val.length - 1]
+      } else {
+        this.dataForm.deptId = ''
+      }
+    }
+  }
+}
+</script>
diff --git a/src/views/modules/news/news-publish.vue b/src/views/modules/news/news-publish.vue
index 72143ec..73887f9 100644
--- a/src/views/modules/news/news-publish.vue
+++ b/src/views/modules/news/news-publish.vue
@@ -116,25 +116,17 @@ export default {
     return {
       dataForm: {
         id: '',
-        streetId: '',
-        communityId: null,
-        gridId: null,
         newsCateroryId: '',
         newsTitle: '',
         newsReleaseStartTime: '',
         newsReleaseEndTime: '',
         newsContent: '',
         newsImageUrl: '',
-        street: '',
-        community: null,
-        grid: null,
         newsProperty: '',
+        sectionCode: 'home_page_news',
         allDeptIdsShow: []
       },
       time: [],
-      streetList: [],
-      communityList: [],
-      gridList: [],
       options: [],
       categorys: [],
       loading: false,
@@ -161,12 +153,10 @@ export default {
     }
   },
   activated () {
-    this.getDeptInfoList('street', localStorage.getItem('street') === null ? '1169154711480528897' : localStorage.getItem('street'))
     this.getListCategory()
   },
   watch: {
     'dataForm.allDeptIdsShow': function (val) {
-      console.log(this.dataForm.allDeptIdsShow)
     }
   },
   created () {
@@ -179,7 +169,6 @@ export default {
         this.options = res.data.options
       })
       .catch(() => { })
-    this.getDeptInfoList('street', localStorage.getItem('street') === null ? '1169154711480528897' : localStorage.getItem('street'))
     this.getListCategory()
     this.visible = true
     this.$nextTick(() => {
@@ -220,57 +209,13 @@ export default {
     }
   },
   methods: {
-    // 获取部门列表
-    getDeptInfoList (dataReceiver, faDeptId) {
-      if (!faDeptId) {
-        return
-      }
-      this.$http.get(`/sys/dept/sublist/` + faDeptId).then(({ data: res }) => {
-        if (res.code !== 0) {
-          return this.$message.error(res.msg)
-        }
-        if (dataReceiver === 'street') {
-          let all = [{ id: '1', name: '全部' }]
-          this.streetList = all.concat(res.data)
-        } else if (dataReceiver === 'community') {
-          this.communityList = res.data
-        } else if (dataReceiver === 'grid') {
-          this.gridList = res.data
-        }
-      }).catch(() => { })
-    },
-    changeStreet () {
-      // 给街道变量赋值
-      let choosenItem = this.streetList.filter(item => item.id === this.dataForm.streetId)[0]
-      this.dataForm.street = choosenItem.name
-      // 清空社区与网格的变量值
-      this.dataForm.communityId = this.dataForm.gridId = this.dataForm.community = this.dataForm.grid = null
-      this.communityList = this.gridList = []
-      // 获取街道下属社区
-      this.getDeptInfoList('community', this.dataForm.streetId)
-    },
-    changeCommunity () {
-      // 给社区变量赋值
-      let choosenItem = this.communityList.filter(item => item.id === this.dataForm.communityId)[0]
-      this.dataForm.community = choosenItem.name
-      // 情况网格的变量值
-      this.dataForm.gridId = this.dataForm.grid = null
-      this.gridList = []
-      // 获取社区下属网格
-      this.getDeptInfoList('grid', this.dataForm.communityId)
-    },
-    changeGrid () {
-      // 给网格变量赋值
-      let choosenItem = this.gridList.filter(item => item.id === this.dataForm.gridId)[0]
-      this.dataForm.grid = choosenItem.name
-    },
     changeCaterory () {
       // 给新闻类别变量赋值
       let choosenItem = this.categorys.filter(item => item.id === this.dataForm.newsCateroryId)[0]
       this.dataForm.newsProperty = choosenItem.name
     },
     getListCategory () {
-      this.$http.get(`/news/newscategory/category`).then(({ data: res }) => {
+      this.$http.get(`/news/newscategory/category/${this.dataForm.sectionCode}`).then(({ data: res }) => {
         if (res.code !== 0) {
           return this.$message.error(res.msg)
         }
diff --git a/src/views/modules/news/news-safety-publish.vue b/src/views/modules/news/news-safety-publish.vue
new file mode 100644
index 0000000..0573893
--- /dev/null
+++ b/src/views/modules/news/news-safety-publish.vue
@@ -0,0 +1,447 @@
+<template>
+  <el-card shadow="never"
+           class="aui-card--fill">
+    <div class="mod-news__news}">
+      <el-form :inline="true"
+               :model="dataForm"
+               :rules="dataRule"
+               ref="dataForm"
+               :label-width="$i18n.locale === 'en-US' ? '120px' : '80px'">
+        <el-row>
+          <el-form-item label="所属机构">
+            <el-cascader v-model="dataForm.allDeptIdsShow"
+                         :options="options"
+                         :props="{ multiple: true }"
+                         clearable
+                         collapse-tags></el-cascader>
+          </el-form-item>
+        </el-row>
+        <el-row>
+          <el-form-item label="文章类别"
+                        prop="newsCateroryId">
+            <el-select v-model="dataForm.newsCateroryId"
+                       @change="changeCaterory"
+                       placeholder="请选择类别">
+              <el-option v-for="item in categorys"
+                         :key="item.id"
+                         :label="item.name"
+                         :value="item.id">
+              </el-option>
+            </el-select>
+          </el-form-item>
+        </el-row>
+        <el-row>
+          <el-form-item label="文章标题"
+                        prop="newsTitle">
+            <el-input v-model="dataForm.newsTitle"
+                      type="text"
+                      maxlength="50"
+                      show-word-limit
+                      placeholder="请输入标题"
+                      clearable
+                      style="width:500px">
+            </el-input>
+          </el-form-item>
+        </el-row>
+        <el-row>
+          <el-form-item prop="newsContent"
+                        label="正文编辑">
+            <!-- 富文本编辑器, 容器 -->
+            <div id="J_quillEditor" class="ql-editor"></div>
+            <!-- 自定义上传图片功能 (使用element upload组件) -->
+            <el-upload :action="uploadUrl"
+                       :show-file-list="false"
+                       :before-upload="uploadBeforeUploadHandle"
+                       :on-success="uploadSuccessHandle"
+                       style="display: none;">
+              <el-button ref="uploadBtn"
+                         type="primary"
+                         size="small">{{ $t('upload.button') }}</el-button>
+            </el-upload>
+          </el-form-item>
+        </el-row>
+        <el-row>
+          <el-form-item prop="newsImageUrl"
+                        v-loading="loading"
+                        label="文章首图">
+            <el-upload class="avatar-uploader"
+                       :action="uploadUrl"
+                       :show-file-list="false"
+                       :on-success="handleAvatarSuccess"
+                       :on-error="handelError"
+                       :before-upload="beforeAvatarUpload">
+              <img v-if="dataForm.newsImageUrl"
+                   :src="dataForm.newsImageUrl"
+                   class="avatar">
+              <i v-else
+                 class="el-icon-plus avatar-uploader-icon"></i>
+              <div slot="tip"
+                   class="el-upload__tip">只能上传jpg/png文件，且不超过500kb</div>
+            </el-upload>
+          </el-form-item>
+        </el-row>
+        <el-row>
+          <el-form-item prop="newsReleaseStartTime"
+                        label="有效时间">
+            <el-date-picker @change='setRegistTime'
+                            v-model="time"
+                            value-format="yyyy-MM-dd"
+                            type="daterange"
+                            range-separator="至"
+                            start-placeholder="开始日期"
+                            end-placeholder="结束日期">
+            </el-date-picker>
+          </el-form-item>
+        </el-row>
+        <el-row>
+          <el-form-item label-width="500px">
+            <el-button type="primary"
+                       @click="dataFormSubmitHandle()">确认发布</el-button>
+          </el-form-item>
+        </el-row>
+      </el-form>
+    </div>
+  </el-card>
+</template>
+<script>
+import Cookies from 'js-cookie'
+import debounce from 'lodash/debounce'
+import 'quill/dist/quill.snow.css'
+import Quill from 'quill'
+import AddOrUpdate from './news-add-or-update'
+export default {
+  data () {
+    return {
+      dataForm: {
+        id: '',
+        newsCateroryId: '',
+        newsTitle: '',
+        newsReleaseStartTime: '',
+        newsReleaseEndTime: '',
+        newsContent: '',
+        newsImageUrl: '',
+        newsProperty: '',
+        sectionCode: 'safety_living',
+        allDeptIdsShow: []
+      },
+      time: [],
+      options: [],
+      categorys: [],
+      loading: false,
+      // 富文本
+      quillEditor: null,
+      quillEditorToolbarOptions: [
+        ['bold', 'italic', 'underline', 'strike'],
+        ['blockquote', 'code-block', 'image'],
+        [{ 'header': 1 }, { 'header': 2 }],
+        [{ 'list': 'ordered' }, { 'list': 'bullet' }],
+        [{ 'script': 'sub' }, { 'script': 'super' }],
+        [{ 'indent': '-1' }, { 'indent': '+1' }],
+        [{ 'direction': 'rtl' }],
+        [{ 'size': ['small', false, 'large', 'huge'] }],
+        [{ 'header': [1, 2, 3, 4, 5, 6, false] }],
+        [{ 'color': [] }, { 'background': [] }],
+        [{ 'font': [] }],
+        [{ 'align': [] }],
+        ['clean']
+      ],
+      uploadUrl: '',
+      // 富文本end
+      fileList: []
+    }
+  },
+  activated () {
+    this.getListCategory()
+  },
+  watch: {
+    'dataForm.allDeptIdsShow': function (val) {
+    }
+  },
+  created () {
+    this.$http
+      .get(`/sys/user/deptOptions/getAllByLoginUser`)
+      .then(({ data: res }) => {
+        if (res.code !== 0) {
+          return this.$message.error(res.msg)
+        }
+        this.options = res.data.options
+      })
+      .catch(() => { })
+    this.getListCategory()
+    this.visible = true
+    this.$nextTick(() => {
+      this.dataForm.communityId = this.dataForm.streetId = this.dataForm.gridId = null
+      // 富文本
+      this.hideUpload = false
+      this.uploadUrl = `${window.SITE_CONFIG['apiURL']}/oss/file/upload?token=${Cookies.get('token')}`
+      if (this.quillEditor) {
+        this.quillEditor.deleteText(0, this.quillEditor.getLength())
+      } else {
+        this.quillEditorHandle()
+      }
+      // 富文本end
+    })
+  },
+  computed: {
+    dataRule () {
+      return {
+        streetId: [
+          { required: true, message: this.$t('validate.required'), trigger: 'blur' }
+        ],
+        newsTitle: [
+          { required: true, message: this.$t('validate.required'), trigger: 'blur' }
+        ],
+        newsCateroryId: [
+          { required: true, message: this.$t('validate.required'), trigger: 'blur' }
+        ],
+        newsImageUrl: [
+          { required: true, message: this.$t('validate.required'), trigger: 'blur' }
+        ],
+        newsReleaseStartTime: [
+          { required: true, message: this.$t('validate.required'), trigger: 'blur' }
+        ],
+        newsContent: [
+          { required: true, message: this.$t('validate.required'), trigger: 'blur' }
+        ]
+      }
+    }
+  },
+  methods: {
+    changeCaterory () {
+      // 给新闻类别变量赋值
+      let choosenItem = this.categorys.filter(item => item.id === this.dataForm.newsCateroryId)[0]
+      this.dataForm.newsProperty = choosenItem.name
+    },
+    getListCategory () {
+      this.$http.get(`/news/newscategory/category/${this.dataForm.sectionCode}`).then(({ data: res }) => {
+        if (res.code !== 0) {
+          return this.$message.error(res.msg)
+        }
+        this.categorys = res.data
+      }).catch(() => { })
+    },
+    // 富文本编辑器
+    quillEditorHandle () {
+      this.quillEditor = new Quill('#J_quillEditor', {
+        modules: {
+          toolbar: this.quillEditorToolbarOptions
+        },
+        theme: 'snow'
+      })
+      this.quillEditor.container.style.height = `${300}px`
+      // // 自定义上传图片功能 (使用element upload组件)
+      this.quillEditor.getModule('toolbar').addHandler('image', () => {
+        this.$refs.uploadBtn.$el.click()
+      })
+      // 监听内容变化，动态赋值
+      this.quillEditor.on('text-change', () => {
+        this.dataForm.newsContent = this.quillEditor.root.innerHTML
+        // if ((this.dataForm.newsContent).length > 10000) {
+        //   return this.$message.error('您输入的的内容已超过字数')
+        // }
+      })
+    },
+    // 上传图片之前 (富文本)
+    uploadBeforeUploadHandle (file) {
+      if (file.type !== 'image/jpg' && file.type !== 'image/jpeg' && file.type !== 'image/png' && file.type !== 'image/gif') {
+        this.$message.error(this.$t('upload.tip', { 'format': 'jpg、png、gif' }))
+        return false
+      }
+    },
+    // 上传图片成功 (富文本)
+    uploadSuccessHandle (res, file, fileList) {
+      if (res.code !== 0) {
+        return this.$message.error(res.msg)
+      }
+      this.quillEditor.insertEmbed(this.quillEditor.getSelection().index, 'image', res.data.url)
+    },
+    setRegistTime () {
+      this.dataForm.newsReleaseStartTime = this.time[0]
+      this.dataForm.newsReleaseEndTime = this.time[1]
+    },
+    // 上传图片end
+    // 表单提交
+    dataFormSubmitHandle: debounce(function () {
+      // if ((this.dataForm.newsContent).length > 10000) {
+      //   return this.$message.error('您输入的的内容已超过字数不能提交')
+      // }
+      this.$refs['dataForm'].validate((valid) => {
+        if (!valid) {
+          return false
+        }
+        this.$http['post']('/news/news/publish', this.dataForm).then(({ data: res }) => {
+          if (res.code !== 0) {
+            return this.$message.error(res.msg)
+          }
+          this.$message({
+            message: this.$t('prompt.success'),
+            type: 'success',
+            duration: 500,
+            onClose: () => {
+              this.dataForm.id = ''
+              this.dataForm.streetId = ''
+              this.dataForm.communityId = null
+              this.dataForm.gridId = null
+              this.dataForm.newsCateroryId = ''
+              this.dataForm.newsTitle = ''
+              this.dataForm.newsReleaseStartTime = ''
+              this.dataForm.newsReleaseEndTime = ''
+              this.dataForm.newsContent = ''
+              this.dataForm.newsImageUrl = ''
+              this.dataForm.street = ''
+              this.dataForm.community = null
+              this.dataForm.grid = null
+              this.dataForm.newsProperty = ''
+              this.visible = false
+              this.time = []
+              this.quillEditor.root.innerHTML = ''
+              this.dataForm.communityId = this.dataForm.streetId = this.dataForm.gridId = null
+              this.communityList = this.gridList = []
+            }
+          })
+        }).catch(() => { })
+      })
+    }, 1000, { 'leading': true, 'trailing': false }),
+    // 存草稿
+    draftDataFormSubmitHandle: debounce(function () {
+      // if ((this.dataForm.newsContent).length > 10000) {
+      //   return this.$message.error('您输入的的内容已超过字数不能提交')
+      // }
+      this.$refs['dataForm'].validate((valid) => {
+        if (!valid) {
+          return false
+        }
+        this.$http['post']('/news/news/', this.dataForm).then(({ data: res }) => {
+          if (res.code !== 0) {
+            return this.$message.error(res.msg)
+          }
+          this.$message({
+            message: this.$t('prompt.success'),
+            type: 'success',
+            duration: 500,
+            onClose: () => {
+              this.dataForm.id = ''
+              this.dataForm.streetId = ''
+              this.dataForm.communityId = null
+              this.dataForm.gridId = null
+              this.dataForm.newsCateroryId = ''
+              this.dataForm.newsTitle = ''
+              this.dataForm.newsReleaseStartTime = ''
+              this.dataForm.newsReleaseEndTime = ''
+              this.dataForm.newsContent = ''
+              this.dataForm.newsImageUrl = ''
+              this.dataForm.street = ''
+              this.dataForm.community = null
+              this.dataForm.grid = null
+              this.dataForm.newsProperty = ''
+              this.visible = false
+              this.time = []
+              this.quillEditor.root.innerHTML = ''
+              this.dataForm.communityId = this.dataForm.streetId = this.dataForm.gridId = null
+              this.communityList = this.gridList = []
+            }
+          })
+        }).catch(() => { })
+      })
+    }, 1000, { 'leading': true, 'trailing': false }),
+    handleAvatarSuccess (res, file) {
+      this.loading = false
+      this.dataForm.newsImageUrl = res.data.url
+    },
+    beforeAvatarUpload (file) {
+      this.loading = true
+      var that = this
+      return new Promise((resolve, reject) => {
+        const isJPG = file.type === 'image/jpeg'
+        const isPNG = file.type === 'image/png'
+        const isLt1M = file.size / 1024 / 1024 < 1
+        let bool = false
+        // 判断是否符合格式要求
+        if (isJPG || isPNG) {
+          bool = true
+        } else {
+          that.$message.error('上传文件必须是jpg、png格式!')
+          return false
+        }
+        // 如果格式符合要求，但是size过大，对图片进行处理
+        if (bool && !isLt1M) {
+          let image = new Image()
+          let resultBlob = ''
+          image.src = URL.createObjectURL(file)
+          image.onload = () => {
+            resultBlob = that.compressUpload(image)
+            resolve(resultBlob)
+          }
+        } else if (bool && isLt1M) {
+          resolve(file)
+        }
+      })
+    },
+    compressUpload (image) {
+      // 创建画布元素
+      let canvas = document.createElement('canvas')
+      let ctx = canvas.getContext('2d')
+      let { width } = image
+      let { height } = image
+      canvas.width = width
+      canvas.height = height
+      ctx.fillRect(0, 0, canvas.width, canvas.height)
+      ctx.drawImage(image, 0, 0, width, height)
+      // 等比压缩
+      let compressData = canvas.toDataURL('image/jpeg', 0.8)
+      // base64转Blob
+      let blobImg = this.dataURItoBlob(compressData)
+      return blobImg
+    },
+    dataURItoBlob (data) {
+      let byteString
+      if (data.split(',')[0].indexOf('base64') >= 0) {
+        // 转二进制
+        byteString = atob(data.split(',')[1])
+      } else {
+        byteString = unescape(data.split(',')[1])
+      }
+      let mimeString = data
+        .split(',')[0]
+        .split(':')[1]
+        .split('')[0]
+      let ia = new Uint8Array(byteString.length)
+      for (let i = 0; i < byteString.length; i += 1) {
+        ia[i] = byteString.charCodeAt(i)
+      }
+      return new Blob([ia], { type: mimeString })
+    },
+    handelError () {
+      this.loading = false
+    }
+  },
+  components: {
+    AddOrUpdate
+  }
+}
+</script>
+<style>
+.avatar-uploader .el-upload {
+  border: 1px dashed #d9d9d9;
+  border-radius: 6px;
+  cursor: pointer;
+  position: relative;
+  overflow: hidden;
+}
+.avatar-uploader .el-upload:hover {
+  border-color: #409eff;
+}
+.avatar-uploader-icon {
+  font-size: 28px;
+  color: #8c939d;
+  width: 178px;
+  height: 178px;
+  line-height: 178px;
+  text-align: center;
+}
+.avatar {
+  width: 178px;
+  height: 178px;
+  display: block;
+}
+</style>
diff --git a/src/views/modules/news/news-safety.vue b/src/views/modules/news/news-safety.vue
new file mode 100644
index 0000000..06433ad
--- /dev/null
+++ b/src/views/modules/news/news-safety.vue
@@ -0,0 +1,282 @@
+<template>
+  <el-card shadow="never"
+           class="aui-card--fill">
+    <div class="mod-news__news}">
+      <el-form :inline="true"
+               :model="dataForm"
+               @keyup.enter.native="getDataList()">
+        <el-form-item label="所属机构">
+          <el-cascader v-model="deptIdList"
+                       :options="options"
+                       :props="{ checkStrictly: true }"
+                       clearable></el-cascader>
+        </el-form-item>
+        <br>
+        <span class="demonstration">提交时间</span>&nbsp;&nbsp;
+        <el-date-picker @change='setRegistTime'
+                        v-model="time"
+                        value-format="yyyy-MM-dd"
+                        type="daterange"
+                        range-separator="至"
+                        start-placeholder="开始日期"
+                        end-placeholder="结束日期">
+        </el-date-picker> &nbsp; &nbsp;
+        <el-form-item label="类别">
+          <el-select v-model="dataForm.category"
+                     clearable
+                     placeholder="所属类别">
+            <el-option v-for="item in categorys"
+                       :key="item.id"
+                       :label="item.name"
+                       :value="item.id">
+            </el-option>
+          </el-select>
+        </el-form-item>
+        <el-form-item label="关键字">
+          <el-form-item>
+            <el-input v-model="dataForm.keyword"
+                      placeholder="请输入标题"
+                      clearable></el-input>
+          </el-form-item>
+        </el-form-item>
+        <el-form-item>
+          <el-button @click="getDataList()">{{ $t('query') }}</el-button>
+        </el-form-item>
+        <el-form-item>
+          <el-button v-if="$hasPermission('news:news:save')"
+                     type="primary"
+                     @click="addOrUpdateHandle()">{{ $t('add') }}</el-button>
+        </el-form-item>
+        <el-form-item>
+          <el-button v-if="$hasPermission('news:news:delete')"
+                     type="danger"
+                     @click="deleteHandle()">{{ $t('deleteBatch') }}</el-button>
+        </el-form-item>
+      </el-form>
+      <el-table v-loading="dataListLoading"
+                :data="dataList"
+                border
+                @selection-change="dataListSelectionChangeHandle"
+                style="width: 100%;">
+        <el-table-column label="序号"
+                         width="70px">
+          <template slot-scope="scope">
+            {{scope.$index+1}}
+          </template>
+        </el-table-column>
+        <el-table-column prop="newsTitle"
+                         label="文章标题"
+                         header-align="center"
+                         align="center"></el-table-column>
+        <el-table-column prop="readingAmount"
+                         label="阅读量"
+                         header-align="center"
+                         align="center"></el-table-column>
+        <el-table-column prop="likeNumber"
+                         label="支持数"
+                         header-align="center"
+                         align="center"></el-table-column>
+        <el-table-column prop="unLikeNumber"
+                         label="不支持数"
+                         header-align="center"
+                         align="center"></el-table-column>
+        <el-table-column prop="createdTime"
+                         label="提交时间"
+                         header-align="center"
+                         align="center"></el-table-column>
+        <el-table-column prop="creatorName"
+                         label="提交人"
+                         header-align="center"
+                         align="center"></el-table-column>
+        <el-table-column label="有效时间">
+          <template slot-scope="scope">
+            {{scope.row.newsReleaseStartTime}}<br /> 到 <br /> {{scope.row.newsReleaseEndTime}}
+          </template>
+        </el-table-column>
+        <el-table-column label="发布状态"
+                         :formatter="publishState"
+                         header-align="center"
+                         align="center">
+        </el-table-column>
+        <el-table-column :label="$t('handle')"
+                         fixed="right"
+                         header-align="center"
+                         align="center"
+                         width="200">
+          <template slot-scope="scope">
+            <el-button type="text"
+                       size="small"
+                       @click="addOrUpdateHandle(scope.row.id)">{{ $t('update') }}</el-button>
+            <el-button type="text"
+                       size="small"
+                       @click="deleteHandle(scope.row.id)">{{ $t('delete') }}</el-button>
+            <el-button v-if="scope.row.newsUpDownState === '0' && new Date(scope.row.newsReleaseStartTime.replace('-', '/')) < new Date()
+             && new Date(scope.row.newsReleaseEndTime.replace('-', '/')) > new Date()"
+                       type="text"
+                       size="small"
+                       @click="modifyOnLine(scope.row)">下线</el-button>
+          </template>
+        </el-table-column>
+      </el-table>
+      <el-pagination :current-page="page"
+                     :page-sizes="[10, 20, 50, 100]"
+                     :page-size="limit"
+                     :total="total"
+                     layout="total, sizes, prev, pager, next, jumper"
+                     @size-change="pageSizeChangeHandle"
+                     @current-change="pageCurrentChangeHandle">
+      </el-pagination>
+      <!-- 弹窗, 新增 / 修改 -->
+      <add-or-update v-if="addOrUpdateVisible"
+                     ref="addOrUpdate"
+                     @refreshDataList="getDataList"></add-or-update>
+    </div>
+  </el-card>
+</template>
+<script>
+import mixinViewModule from '@/mixins/view-module'
+import AddOrUpdate from './news-add-or-update'
+export default {
+  mixins: [mixinViewModule],
+  data () {
+    return {
+      mixinViewModuleOptions: {
+        getDataListURL: '/news/news/page',
+        getDataListIsPage: true,
+        deleteURL: '/news/news',
+        deleteIsBatch: true
+      },
+      dataForm: {
+        id: '',
+        deptId: '',
+        startTime: '',
+        endTime: '',
+        keyword: '',
+        sectionCode: 'safety_living',
+        category: ''
+      },
+      time: '',
+      options: [],
+      deptIdList: [],
+      categorys: [],
+      onLine: {
+        id: '',
+        onLineState: ''
+      }
+    }
+  },
+  created () {
+    this.$http
+      .get(`/sys/user/deptOptions/getByLoginUser`)
+      .then(({ data: res }) => {
+        if (res.code !== 0) {
+          return this.$message.error(res.msg)
+        }
+        this.options = res.data.options
+      })
+      .catch(() => { })
+    this.getListCategory()
+  },
+  methods: {
+    newsUpDownState: function (row) {
+      return row.newsUpDownState === '1' ? '下线' : '上线'
+    },
+    publishState: function (row) {
+      var stdt = new Date(row.newsReleaseStartTime.replace('-', '/'))
+      var eddt = new Date(row.newsReleaseEndTime.replace('-', '/'))
+      var nowdt = new Date()
+      if (row.newsUpDownState === '1') {
+        // 手动下线
+        return '已下线'
+      }
+      if (nowdt > stdt && nowdt < eddt && row.newsUpDownState === '0') {
+        return '已上线'
+      }
+      if (nowdt < stdt) {
+        return '未上线'
+      }
+      if (nowdt > eddt) {
+        return '已下线'
+      }
+    },
+    setRegistTime () {
+      this.dataForm.startTime = this.time[0]
+      this.dataForm.endTime = this.time[1]
+    },
+    getListCategory () {
+      this.$http.get(`/news/newscategory/category/${this.dataForm.sectionCode}`).then(({ data: res }) => {
+        if (res.code !== 0) {
+          return this.$message.error(res.msg)
+        }
+        this.categorys = res.data
+      }).catch(() => { })
+    },
+    modifyOnLine (row) {
+      this.$confirm(this.$t('prompt.info', { 'handle': '下线' }), this.$t('下线'), {
+        confirmButtonText: this.$t('confirm'),
+        cancelButtonText: this.$t('cancel'),
+        type: 'warning'
+      }).then(() => {
+        this.onLine.id = row.id
+        this.onLine.onLineState = '0'
+        this.$http.post(`/news/news/modifyOnLine/`, this.onLine).then(({ data: res }) => {
+          if (res.code !== 0) {
+            return this.$message.error(res.msg)
+          }
+          this.$message({
+            message: this.$t('prompt.success'),
+            type: 'success',
+            duration: 500,
+            onClose: () => {
+            }
+          })
+          this.getDataList()
+        }).catch(() => { })
+      }).catch(() => { })
+    },
+    // 获取数据列表
+    getDataList () {
+      if (this.time === null) {
+        this.dataForm.startTime = ''
+        this.dataForm.endTime = ''
+      }
+      this.dataListLoading = true
+      this.$http.get(
+        this.mixinViewModuleOptions.getDataListURL,
+        {
+          params: {
+            order: this.order,
+            orderField: this.orderField,
+            page: this.mixinViewModuleOptions.getDataListIsPage ? this.page : null,
+            limit: this.mixinViewModuleOptions.getDataListIsPage ? this.limit : null,
+            ...this.dataForm
+          }
+        }
+      ).then(({ data: res }) => {
+        this.dataListLoading = false
+        if (res.code !== 0) {
+          this.dataList = []
+          this.total = 0
+          return this.$message.error(res.msg)
+        }
+        this.dataList = this.mixinViewModuleOptions.getDataListIsPage ? res.data.list : res.data
+        this.total = this.mixinViewModuleOptions.getDataListIsPage ? res.data.total : 0
+      }).catch(() => {
+        this.dataListLoading = false
+      })
+    }
+  },
+  components: {
+    AddOrUpdate
+  },
+  watch: {
+    'deptIdList': function (val) {
+      if (val.length !== 0) {
+        this.dataForm.deptId = val[val.length - 1]
+      } else {
+        this.dataForm.deptId = ''
+      }
+    }
+  }
+}
+</script>
diff --git a/src/views/modules/news/news.vue b/src/views/modules/news/news.vue
index a7b07f4..a9ce434 100644
--- a/src/views/modules/news/news.vue
+++ b/src/views/modules/news/news.vue
@@ -11,43 +11,6 @@
                        :props="{ checkStrictly: true }"
                        clearable></el-cascader>
         </el-form-item>
-        <!--<el-form-item label="所属街道"
-                      prop="deptId">
-          <el-select v-model="dataForm.streetId"
-                     @change="changeStreet"
-                     clearable
-                     placeholder="所属街道">
-            <el-option v-for="item in streetList"
-                       :key="item.id"
-                       :label="item.name"
-                       :value="item.id">
-            </el-option>
-          </el-select>
-        </el-form-item>
-        <el-form-item label="所属社区">
-          <el-select v-model="dataForm.communityId"
-                     @change="changeCommunity"
-                     clearable
-                     placeholder="所属社区">
-            <el-option v-for="item in communityList"
-                       :key="item.id"
-                       :label="item.name"
-                       :value="item.id">
-            </el-option>
-          </el-select>
-        </el-form-item>
-        <el-form-item label="所属网格">
-          <el-select v-model="dataForm.gridId"
-                     @change="changeGrid"
-                     clearable
-                     placeholder="所属网格">
-            <el-option v-for="item in gridList"
-                       :key="item.id"
-                       :label="item.name"
-                       :value="item.id">
-            </el-option>
-          </el-select>
-        </el-form-item>-->
         <br>
         <span class="demonstration">提交时间</span>&nbsp;&nbsp;
         <el-date-picker @change='setRegistTime'
@@ -191,20 +154,16 @@ export default {
       },
       dataForm: {
         id: '',
-        streetId: '',
-        communityId: '',
-        gridId: '',
+        deptId: '',
         startTime: '',
         endTime: '',
         keyword: '',
+        sectionCode: 'home_page_news',
         category: ''
       },
       time: '',
       options: [],
       deptIdList: [],
-      streetList: [],
-      communityList: [],
-      gridList: [],
       categorys: [],
       onLine: {
         id: '',
@@ -222,7 +181,6 @@ export default {
         this.options = res.data.options
       })
       .catch(() => { })
-    this.getDeptInfoList('street', localStorage.getItem('street') === null ? '1169154711480528897' : localStorage.getItem('street'))
     this.getListCategory()
   },
   methods: {
@@ -247,65 +205,12 @@ export default {
         return '已下线'
       }
     },
-    // 获取部门列表
-    getDeptInfoList (dataReceiver, faDeptId) {
-      this.$http.get(`/sys/dept/sublist/` + faDeptId).then(({ data: res }) => {
-        if (res.code !== 0) {
-          return this.$message.error(res.msg)
-        }
-        if (dataReceiver === 'street') {
-          this.streetList = res.data
-        } else if (dataReceiver === 'community') {
-          this.communityList = res.data
-        } else if (dataReceiver === 'grid') {
-          this.gridList = res.data
-        }
-      }).catch(() => { })
-    },
-    changeStreet (event) {
-      if (this.dataForm.streetId === '') {
-        this.communityList = []
-        this.gridList = []
-        this.dataForm.communityId = ''
-        this.dataForm.gridId = ''
-        return
-      }
-      this.dataForm.streetId = event
-      let choosenItem = this.streetList.filter(item => item.id === this.dataForm.streetId)[0]
-      this.initDeptIdAndName(choosenItem)
-      this.dataForm.communityId = this.dataForm.gridId = null
-      this.communityList = this.gridList = []
-      this.getDeptInfoList('community', event)
-    },
-    changeCommunity (event) {
-      if (this.dataForm.communityId === '') {
-        this.gridList = []
-        this.dataForm.gridId = ''
-        return
-      }
-      this.communityId = event
-      let choosenItem = this.communityList.filter(item => item.id === this.dataForm.communityId)[0]
-      this.initDeptIdAndName(choosenItem)
-      this.dataForm.gridId = null
-      this.gridList = []
-      this.getDeptInfoList('grid', event)
-    },
-    changeGrid (event) {
-      this.dataForm.gridId = event
-      let choosenItem = this.gridList.filter(item => item.id === this.gridId)[0]
-      this.initDeptIdAndName(choosenItem)
-    },
-    initDeptIdAndName (choosenItem) {
-      this.dataForm.dept = choosenItem.name
-      this.dataForm.deptId = choosenItem.id
-    },
     setRegistTime () {
-      console.log(this.time[0])
       this.dataForm.startTime = this.time[0]
       this.dataForm.endTime = this.time[1]
     },
     getListCategory () {
-      this.$http.get(`/news/newscategory/category/`).then(({ data: res }) => {
+      this.$http.get(`/news/newscategory/category/${this.dataForm.sectionCode}`).then(({ data: res }) => {
         if (res.code !== 0) {
           return this.$message.error(res.msg)
         }
@@ -320,7 +225,6 @@ export default {
       }).then(() => {
         this.onLine.id = row.id
         this.onLine.onLineState = '0'
-        console.log(this.onLine)
         this.$http.post(`/news/news/modifyOnLine/`, this.onLine).then(({ data: res }) => {
           if (res.code !== 0) {
             return this.$message.error(res.msg)
@@ -395,9 +299,9 @@ export default {
   watch: {
     'deptIdList': function (val) {
       if (val.length !== 0) {
-        this.dataForm.gridId = val[val.length - 1]
+        this.dataForm.deptId = val[val.length - 1]
       } else {
-        this.dataForm.gridId = ''
+        this.dataForm.deptId = ''
       }
     }
   }