【企业公告】轮播完成、详情换成单独的弹框组件

src/views/dashboard/MyToDo.vue

@@ -83,27 +83,11 @@
                 <a href="javascript:void(0);" @click="openEnterAnn">更多</a>
               </template>
 
-              <ul class="clearfix">
-                <li v-for="item in annList" :key="item.id">
-                  <!-- 显示已发布的公告  需轮播 -->
-                  <div>
-                    <a href="javascript:void(0);" class="clearfix">
-                      <span class="department fl" v-if="item.type == '项目'" style="color:#006d77;">
-                        [ {{ item.type }} ]
-                      </span>
-                      <span class="department fl" v-if="item.type == '人事'" style="color:#98c1d9;">
-                        [ {{ item.type }} ]
-                      </span>
-                      <span class="department fl" v-if="item.type == '财务'" style="color:orange;">
-                        [ {{ item.type }} ]
-                      </span>
-                      <span class="title fl" @click="showAnnModal(item)">{{ item.title }}</span>
-                      <span class="createTime fr">{{ item.createTime }}</span>
-                      <span class="createBy fr">{{ item.createBy }}</span>
-                    </a>
-                  </div>
-                </li>
-              </ul>
+              <!-- DataV -->
+              <div class="dataV">
+                <dv-scroll-board :config="config" style="width:100%;height:300px;" @click="getMethod" />
+              </div>
+              <!-- DataV -->
             </a-card>
           </a-col>
           <!-- 我的计划 -->
@@ -243,29 +227,13 @@
       </component>
     </a-modal>
 
-    <!-- 公告详情 弹框 -->
-    <a-modal v-model="annVisible" title="企业公告详情" @ok="handleOk" width="40%">
-      <p>
-        标题： <span class="annDet">{{ annDetail.title }}</span>
-      </p>
-      <p>
-        发布部门： <span class="annDet">{{ annDetail.type }}</span>
-      </p>
-      <p>
-        创建人： <span class="annDet"> {{ annDetail.createBy }}</span>
-      </p>
-      <p>
-        创建日期： <span class="annDet">{{ annDetail.createTime }}</span>
-      </p>
-      <p>详情：</p>
-
-      <!-- 文本框 -->
-      <span v-html="myValue" class="valueBox"></span>
-    </a-modal>
+    <!-- 公告详情 弹框  组件 -->
+    <detAnn-modal ref="DetAnnModal" @ok="modalFormOk" :fatherGetList="getAnnList"></detAnn-modal>
   </div>
 </template>
 
 <script>
+import DetAnnModal from '@views/oa/enter-ann/add/detAnnModal.vue'
 import { mapGetters } from 'vuex'
 import { getAction } from '@/api/manage'
 import FullCalendar from '@fullcalendar/vue'
@@ -278,18 +246,22 @@ import { scheduleGetListByTime, scheduleQueryById } from '@api/oa/cd-schedule'
 import { enterpriseEList } from '@api/oa/cd-enterprise-announcement'
 import '@fullcalendar/daygrid/main.css'
 import JEditor from '../../components/jeecg/JEditor.vue'
+import '@/assets/less/dataVTable.less' // 修改首页 DataV 轮播图样式
 export default {
   name: 'Home',
   components: {
-    FullCalendar,
-    JEditor
+    FullCalendar, //日历
+    JEditor, //富文本
+    DetAnnModal //公告详情弹框
   },
   data() {
     return {
-      annVisible: false, //公告详情关闭
-      annDetail: [], //公告详情
-      myValue: '', //富文本内容
-      // smallText: '', // 富文本内容
+      config: {
+        waitTime: 2000, //轮播时间间隔
+        columnWidth: [2],
+        data: [] //全局变量轮播图数据
+      },
+
       //日历组件 参数
       calendarOptions: {
         // 日程数组
@@ -361,7 +333,6 @@ export default {
       activeKeyAll: [],
       msg1Count: '0',
       msg2Count: '0',
-      annList: [], //企业公告列表
       url: {
         listCementByUser: '/sys/annountCement/listByUser'
       },
@@ -376,6 +347,7 @@ export default {
       //
       data: [], // 表单数据
       total: 0, // 表单数据总数
+
       ipagination: {
         current: 1,
         pageSize: 3,
@@ -420,20 +392,22 @@ export default {
   },
   mounted() {
     this.loadData()
+    this.getAnnList()
   },
   methods: {
+    //点击轮播图
+    getMethod(value) {
+      console.log(value)
+    },
+
     //公告详情
     showAnnModal(item) {
-      this.annVisible = true
-      this.annDetail = item //传值给回显数组
+      this.$refs.DetAnnModal.annVisible = true
+      this.$refs.DetAnnModal.annDetail = item //传值给回显数组
       console.log('点击公告的详情', this.annDetail)
-      this.myValue = this.annDetail.content
-    },
-    //公告详情 弹框按钮
-    handleOk(e) {
-      console.log(e)
-      this.annVisible = false
+      this.$refs.DetAnnModal.myValue = this.$refs.DetAnnModal.annDetail.content
     },
+
     //查询日程数据
     getScheduleData() {
       this.$nextTick(() => {
@@ -472,9 +446,9 @@ export default {
         this.loading = false
         if (res.success) {
           this.todoList = res.result || []
-          console.log('首页 我的待办数字：', this.todoList.length)
+          // console.log('首页 我的待办数字：', this.todoList.length)
           this.total = this.data.leading
-          console.log('系统消息:', this.data)
+          // console.log('系统消息:', this.data)
         }
       })
     },
@@ -494,12 +468,21 @@ export default {
       })
     },
 
-    // 公告数据
-    getAnnList() {
-      enterpriseEList({isRelease:'1',pageSize:1000}).then(res => {
+    // 公告数据 （查询条件：已发布、数据条数）
+    async getAnnList() {
+      await enterpriseEList({ isRelease: '1', pageSize: 1000 }).then(res => {
         if (res.success) {
-          this.annList = res.result.records || []
-          console.log('首页公告----->', this.annList)
+          this.annList = res.result.records
+          console.log('轮播公告-->', this.annList)
+          let scrollData = [] //轮播表数据
+          // 拿到返回的数据进行遍历并渲染
+          this.annList.map(item => {
+            // console.log('mpa方法的item', item)
+            let list = [item.type, item.title, item.createBy, item.createTime]
+            scrollData.push(list)
+            // console.log('>>>', scrollData)
+          })
+          this.config = { data: scrollData } //双向绑定(轮播表数据绑定到配置的data数据中)
         }
       })
     },
@@ -606,23 +589,12 @@ export default {
     prev() {
       this.calendarApi.prev()
       console.log(this.calendarApi.prev)
-    }
+    },
+    modalFormOk() {}
   }
 }
 </script>
 <style lang="less" scoped>
-//富文本内容
-.valueBox {
-  font-weight: 700;
-  display: block;
-  border: 1px solid #ccc;
-  padding: 10px;
-}
-// 整个详情弹框内容
-.annDet {
-  // color: #ccc;
-  font-weight: 700;
-}
 ul li {
   list-style: none;
 }

src/views/oa/enter-ann/add/detAnnModal.vue

@@ -0,0 +1,80 @@
+<template>
+  <!-- 公告详情 弹框 -->
+  <a-modal v-model="annVisible" title="企业公告详情" @ok="handleOk" width="90%">
+    <a-row :gutter="24">
+      <a-col :span="12">
+        <p>
+          标题： <span class="annDet">{{ annDetail.title }}</span>
+        </p>
+      </a-col>
+      <a-col :span="12">
+        <p>
+          发布部门： <span class="annDet">{{ annDetail.type }}</span>
+        </p>
+      </a-col>
+    </a-row>
+
+    <a-row :gutter="24">
+      <a-col :span="12">
+        <p>
+          创建人： <span class="annDet"> {{ annDetail.createBy }}</span>
+        </p>
+      </a-col>
+      <a-col :span="12">
+        <p>
+          创建日期： <span class="annDet">{{ annDetail.createTime }}</span>
+        </p>
+      </a-col>
+    </a-row>
+
+    <a-row :gutter="24">
+      <a-col :span="24">
+        <p>详情：</p>
+        <!-- 文本框 -->
+        <span v-html="myValue" class="valueBox"></span>
+      </a-col>
+    </a-row>
+  </a-modal>
+</template>
+
+<script>
+export default {
+    data () {
+        return {
+            myValue: '', // 富文本内容
+            annDetail: [], // 公告详情
+            annVisible: false, // 公告详情关闭
+            // 接收父组件查询公告的方法
+            props: {
+                fatherGetList: {
+                    type: Function,
+                    default: null
+                }
+            }
+        }
+    },
+    methods: {
+        // 公告详情 弹框按钮
+        handleOk (e) {
+            console.log(e)
+            this.annVisible = false
+        }
+    }
+}
+</script>
+
+<style lang="less" scoped>
+//富文本内容
+.valueBox {
+  width: 100%;
+  font-weight: 700;
+  display: block;
+  border: 1px solid #ccc;
+  padding: 10px;
+}
+// 整个详情弹框内容
+.annDet {
+  // color: #ccc;
+  font-weight: 700;
+}
+</style>

src/views/oa/my-links/add/addLinksModal.vue

@@ -13,10 +13,10 @@
         <!-- 标题 类型 -->
         <a-row :gutter="24">
           <a-col :span="12">
-            <a-form-item label="公司名称">
+            <a-form-item label="名称">
               <a-input
-                v-decorator="['name', { rules: [{ required: true, message: '请输入公司名称' }] }]"
-                placeholder="请输入公司名称"
+                v-decorator="['name', { rules: [{ required: true, message: '请输入产品名称' }] }]"
+                placeholder="请输入产品名称"
               />
             </a-form-item>
           </a-col>
@@ -37,8 +37,16 @@
               <a-input
                 disabled
                 v-decorator="['createBy', { rules: [{ required: false, message: '请输入创建人' }] }]"
-                placeholder="系统回显"
-              />
+                placeholder="此处应可以回显创建人，不可编辑状态"/>
+            </a-form-item>
+          </a-col>
+
+          <a-col :span="12">
+            <a-form-item label="创建时间">
+              <a-input
+                disabled
+                v-decorator="['createTime', { rules: [{ required: false, message: '请输入创建时间' }] }]"
+                placeholder="此处应可以回显创建时间，不可编辑状态"/>
             </a-form-item>
           </a-col>
         </a-row>
@@ -46,10 +54,10 @@
         <!-- 内容 -->
         <a-row :gutter="24">
           <a-col :span="12">
-            <a-form-item label="公司简介:" style="marginBottom:0;"></a-form-item>
+            <a-form-item label="简介:" style="marginBottom:0;"></a-form-item>
           </a-col>
           <a-col :span="22">
-            <a-textarea v-model="memo" placeholder="请输入公司简介" style="marginLeft:120px;"/>
+            <a-textarea v-model="memo" placeholder="请输入简介" style="marginLeft:128px;"/>
           </a-col>
         </a-row>
       </a-form>

src/views/oa/myLinks.vue

@@ -55,22 +55,46 @@
         >
           <!-- 发布 -->
           <span slot="isReleaseSlot" slot-scope="text, record">
-            <a-badge v-if="record.isRelease == '0'" status="default" text="未发布" />
-            <a-badge v-else status="success" text="已发布" style="color:red;" />
+            <a-tag color="orange" v-if="record.isRelease == '0'">
+              未发布
+            </a-tag>
+            <a-tag color="green" v-else>
+              已发布
+            </a-tag>
           </span>
 
           <!-- 操作 -->
           <span slot="operationSlot" slot-scope="text, record">
-            <a href="javascript:void(0);" @click="editAnn(record)"> 编辑 </a>
-            <a-divider type="vertical" />
+            <a href="javascript:void(0);" @click="editLinks(record)"> 编辑 </a>
+
+            <a-divider type="vertical" v-if="record.isRelease == '0'" />
 
-            <a-popconfirm title="确定发布吗？" ok-text="是" cancel-text="否">
-              <a href="javascript:void(0);" @click="sendAnn(record.id)" class="sendGr"> 发布 </a>
+            <!-- 判断是否发布 -->
+            <a-popconfirm
+              v-if="record.isRelease == '0'"
+              title="确定发布吗？"
+              @confirm="sendLinks(record.id)"
+              ok-text="是"
+              cancel-text="否"
+            >
+              <a href="javascript:void(0);" class="sendGr"> 发布 </a>
+            </a-popconfirm>
+            <!-- --------------------------------------------------- -->
+            <a-divider type="vertical" v-if="record.isRelease == '1'" />
+            <a-popconfirm
+              v-if="record.isRelease == '1'"
+              title="确定取消发布吗？"
+              @confirm="saveLinks(record.id)"
+              ok-text="是"
+              cancel-text="否"
+            >
+              <a href="javascript:void(0);" class="sendGr"> 取消发布 </a>
             </a-popconfirm>
+
             <a-divider type="vertical" />
 
-            <a-popconfirm title="确定删除吗？" ok-text="是" cancel-text="否">
-              <a href="javascript:void(0);" @click="delAnn(record.id)" class="delRed"> 删除 </a>
+            <a-popconfirm title="确定删除吗？" ok-text="是" cancel-text="否" @confirm="delLinks(record)">
+              <a href="javascript:void(0);" class="delRed"> 删除 </a>
             </a-popconfirm>
           </span>
         </a-table>
@@ -178,7 +202,7 @@ export default {
             this.$refs.AddLinksModal.title = '新增友情链接'
         },
         // 编辑
-        editAnn (obj) {
+        editLinks (obj) {
             console.log('点击了编辑，该项公共的ID是：', obj)
             this.$refs.AddLinksModal.addLinksModVis = true
             this.$refs.AddLinksModal.title = '编辑友情链接'
@@ -202,15 +226,18 @@ export default {
         },
 
         // 发布
-        sendAnn (id) {
+        sendLinks (id) {
             console.log('点击了发布')
+        },
+        saveLinks () {
+
         },
         // 撤销
-        backAnn (id) {
+        backLinks (id) {
             console.log('点击了撤销')
         },
         // 操作  删除
-        delAnn () {
+        delLinks () {
             console.log('点击了删除，需要发请求、确定提示、重新渲染')
         }
     },