【企业、友情】页面样式完成、【首页】调转企业、友情页面完成

src/views/dashboard/MyToDo.vue

@@ -79,6 +79,7 @@
           <!-- 企业公告 -->
           <a-col :xs="24" :sm="24" :md="24" :lg="24" :xl="10" :style="{ marginBottom: '10px' }">
             <a-card title="企业公告" :bordered="false" class="notice newsColItem">
+              <template #extra><a href="javascript:void(0);" @click="openEnterAnn" class="openPage">详情</a></template>
               <ul class="clearfix">
                 <li>
                   <a href="https://m.thepaper.cn/baijiahao_14855630" class="clearfix">
@@ -141,28 +142,20 @@
                   <span>本月他人计划<strong>2</strong>份</span>
                 </div>
               </div>
-              <!-- 小链接跳转 -->
-              <!-- <div class="tabsLinks">
-                <a href="">我的计划</a>
-                <a-divider type="vertical" />
-                <a href="">计划管理</a>
-                <a-divider type="vertical" />
-                <a href="">计划模块</a>
-              </div> -->
             </a-card>
           </a-col>
-          <!-- 友情链接 -->
           <a-col :xs="24" :sm="10" :md="12" :lg="12" :xl="7">
             <a-card title="友情链接" :bordered="false" class="link newsColItem">
+              <template #extra><a href="javascript:void(0);" @click="openMyLinks" class="openPage">详情</a></template>
+
               <div class="linkBtn">
-                <button><a href="https://www.yonyou.com/">用友</a></button>
-                <button><a href="https://hc.yonyou.com/product.php?id=5">U8</a></button>
-                <button><a href="http://www.dakabg.com/">哒咔办公</a></button>
+                <button><a href="https://www.yonyou.com/" target="_blank">用友</a></button>
+                <button><a href="http://www.dakabg.com/" target="_blank">哒咔办公</a></button>
                 <button>
-                  <a href="https://www.dingtalk.com/?lwfrom=2017120202091367000000111&source=1001">钉钉</a>
+                  <a href="https://www.dingtalk.com/" target="_blank">钉钉</a>
                 </button>
-                <button><a href="https://www.11467.com/qiye/38026153.htm">品医</a></button>
-                <button><a href="https://www.antgroup.com/">蚂蚁集团</a></button>
+                <button><a href="https://www.11467.com" target="_blank">品医</a></button>
+                <button><a href="https://www.antgroup.com/" target="_blank">蚂蚁集团</a></button>
               </div>
             </a-card>
           </a-col>
@@ -408,9 +401,7 @@ export default {
       if ($antTable[0]) {
         width = $antTable[0].clientWidth
       }
-      // console.log('$antTable', $antTable)
       return {
-        // x:'max-content',
         x: 1160,
         y: window.innerHeight / 2
       }
@@ -476,7 +467,14 @@ export default {
       // }
       this.$router.push('/oa/my-plan/schedulePlan')
     },
-
+    //点击企业公告 详情
+    openEnterAnn() {
+      this.$router.push('/oa/enterpriseAnnouncement')
+    },
+    //点击友情 详情
+    openMyLinks() {
+      this.$router.push('/oa/myLinks')
+    },
     // 系统消息
     loadData() {
       try {
@@ -660,7 +658,7 @@ a {
   }
   /deep/ .fc .fc-toolbar-title {
     color: #333;
-    font-size:16px;
+    font-size: 16px;
   }
 }
 #home {
@@ -745,6 +743,16 @@ a {
   }
   // 公告
   .news {
+    .openPage {
+      border: 1px solid rgba(99, 158, 246, 0.8);
+      padding: 6px 16px;
+      border-radius: 4px;
+      color: rgb(99, 158, 246);
+    }
+    .openPage:hover {
+      background-color: rgba(99, 158, 246, 0.8);
+      color:white;
+    }
     .newsColItem {
       height: 300px;
     }

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

@@ -39,7 +39,7 @@
           <a-col :span="12">
             <a-form-item label="创建人">
               <a-input
-                v-decorator="['createBy', { rules: [{ required: true, message: '请输入创建人' }] }]"
+                v-decorator="['createBy', { rules: [{ required: false, message: '请输入创建人' }] }]"
                 placeholder="请输入创建人"
               />
             </a-form-item>
@@ -60,14 +60,17 @@
 
         <!-- 内容 -->
         <a-row :gutter="24">
-          <a-col :span="24">
+          <a-col :span="12">
             <a-form-item label="内容">
               <div v-decorator="['details', { rules: [{ required: true, message: '请输入公告内容' }] }]">
-                <!-- 引入富文本 组件 -->
-                <RichText ref="RichText" :modelValue="smallText"></RichText>
+
               </div>
             </a-form-item>
           </a-col>
+          <a-col :span="24">
+            <!-- 引入富文本 组件 -->
+            <RichText ref="RichText" :modelValue="smallText"></RichText>
+          </a-col>
         </a-row>
       </a-form>
     </a-spin>
@@ -93,9 +96,6 @@ export default {
     },
     created () {},
     methods: {
-    // 新增
-    // 修改 (回显)
-
         // 弹框保存
         handleOk () {
             // 触发表单验证

src/views/oa/enterpriseAnnouncement.vue

@@ -1,5 +1,4 @@
 <template>
-  <!-- :bordered="false" -->
   <a-card>
     <!-- 查询 -->
     <div class="table-page-search-wrapper">
@@ -7,16 +6,13 @@
         <a-row :gutter="24">
           <a-col :md="6" :sm="8">
             <a-form-item label="标题">
-              <a-input placeholder="请输入搜索关键词"></a-input>
+              <a-input placeholder="请输入标题查询" v-model="queryParam.title"></a-input>
             </a-form-item>
           </a-col>
 
-          <span style="float: left;overflow: hidden;" class="table-page-search-submitButtons">
+          <span>
             <a-col :md="6" :sm="12">
               <a-button type="primary" style="left: 10px" @click="searchQuery" icon="search">查询</a-button>
-              <a-button type="primary" @click="reset" icon="reload" style="margin-left: 8px;left: 10px">
-                重置
-              </a-button>
             </a-col>
           </span>
         </a-row>
@@ -25,36 +21,60 @@
 
     <!-- 新增 批量删除 -->
     <div class="table-add">
-      <a-button @click="addOpen" type="primary" icon="plus">新增</a-button>
+      <a-button @click="addOpen" type="primary">新增</a-button>
       <!-- 批量操作-----------------------------------
-                   v-if="selectedRowKeys.length > 0"
+        v-if="selectedRowKeys.length > 0"
       ------------------------------------------------>
       <a-dropdown>
         <a-menu slot="overlay">
           <a-menu-item key="1" @click="batchDel"><a-icon type="delete" />删除</a-menu-item>
         </a-menu>
-        <a-button style="margin-left: 8px"> 批量操作 <a-icon type="down"/></a-button>
+        <a-button style="margin-left:24px"> 批量操作 <a-icon type="down"/></a-button>
       </a-dropdown>
     </div>
 
     <div>
       <!-- 已选择 清空 -->
-      <div class="ant-alert ant-alert-info" style="margin: 16px 0;background:#e6f7ff;">
+      <div class="ant-alert ant-alert-info" style="margin: 20px 0;background:#e6f7ff;">
         <i class="anticon anticon-info-circle ant-alert-icon"></i> 已选择
         <!-- {{ selectedRowKeys.length }} -->
         <a style="font-weight: 600">2</a>项
         <a style="margin-left: 24px" @click="onClearSelected">清空</a>
       </div>
-      <!-- table ----------------------------------------------------------------->
-      <a-table
-        ref="table"
-        size="middle"
-        bordered
-        :rowSelection="rowSelection"
-        :columns="columns"
-        :dataSource="data">
-        <a slot="name" slot-scope="text">{{ text }}</a>
-      </a-table>
+      <!-- table -->
+      <a-row>
+        <a-table
+          bordered
+          :columns="columns"
+          :dataSource="annDataList"
+          :loading="loading"
+          :pagination="pagination"
+          :row-key="record => record.id"
+          :rowSelection="rowSelection"
+          @change="handleTableChange"
+        >
+          <!-- 发布 -->
+          <span slot="isReleaseSlot" slot-scope="text, record">
+            <a-badge v-if="record.isRelease == '0'" status="warning" text="未发布" />
+            <a-badge v-else status="success" text="已发布" style="color:red;" />
+          </span>
+
+          <!-- 操作 -->
+          <span slot="operationSlot" slot-scope="text, record">
+            <a href="javascript:void(0);" @click="editAnn(record.id)" style="color:#014f86;"> 编辑 </a>
+            <a-divider type="vertical" />
+            <a-popconfirm title="确定发布吗？" ok-text="是" cancel-text="否">
+              <button @click="sendAnn(record.id)" class="sendAnn">发布</button>
+            </a-popconfirm>
+
+            <a-divider type="vertical" />
+
+            <a-popconfirm title="确定删除吗？" ok-text="是" cancel-text="否">
+              <a href="javascript:void(0);" @click="delAnn(record.id)" style="color:#ff6b6b;"> 删除 </a>
+            </a-popconfirm>
+          </span>
+        </a-table>
+      </a-row>
     </div>
 
     <!-- 新增弹框 组件 -->
@@ -66,85 +86,86 @@
 // import { JeecgListMixin } from '@/mixins/JeecgListMixin'
 import AddAnnModal from '@views/oa/enter-ann/add/addAnnModal.vue'
 export default {
-    name: 'EnterpriseAnnouncement',
+    name: 'EnterpriseAnnouncement', // 企业公告
     // mixins: [JeecgListMixin],
     components: {
         AddAnnModal
     },
     data () {
         return {
+            id: '', // 唯一标识 双休绑定后自动生成，删除
+            loading: false, // 表格加载
+            pagination: {}, // 分页
+            queryParam: {}, // 查询条件对象
             // 表头
             columns: [
-                {
-                    title: '序号',
-                    dataIndex: '',
-                    align: 'center',
-                    width: 60,
-                    customRender: function (index) {
-                        return parseInt(index) + 1
-                    }
-                },
                 {
                     title: '标题',
                     dataIndex: 'title',
-                    align: 'center',
-                    // width: 10,
-                    scopedSlots: { customRender: 'title' }
+                    align: 'center'
                 },
                 {
                     title: '类型',
                     dataIndex: 'type',
                     align: 'center'
-                    // width: 60
                 },
                 {
                     title: '创建人',
-                    dataIndex: 'createBy;',
+                    dataIndex: 'createBy',
                     align: 'center'
-                    // width: 60
                 },
                 {
                     title: '创建日期',
                     dataIndex: 'createTime',
                     align: 'center'
-                    // width: 60
                 },
                 {
                     title: '发布',
                     dataIndex: 'isRelease',
+                    scopedSlots: { customRender: 'isReleaseSlot' },
                     align: 'center'
                 },
                 {
                     title: '操作',
                     dataIndex: 'operation',
+                    scopedSlots: { customRender: 'operationSlot' },
                     align: 'center',
-                    width: 200
+                    width: '20%'
                 }
             ],
-            // 表数据 要改
-            data: [
+            // 公共数据
+            annDataList: [
+                {
+                    id: '1',
+                    title: '企业文化KPI考核',
+                    type: '正常',
+                    createBy: 'admin',
+                    createTime: '2020/09/09',
+                    isRelease: '0'
+                },
                 {
-                    key: '1',
-                    title: '关于放假通知',
-                    type: '紧急',
-                    createBy: 'cc',
-                    createTime: '2021/09/09',
-                    isRelease: ['button', 'button'],
-                    operation: ['button', 'button', 'button']
+                    id: '2',
+                    title: '周末全体员工聚餐',
+                    type: '财务',
+                    createBy: 'admin',
+                    createTime: '2021/12/19',
+                    isRelease: '1'
                 }
             ]
         }
     },
     created () {},
     methods: {
-        // 新增
+    // 新增
         addOpen () {
             console.log('点击了大页面的新增')
             // 拿到子组件的弹框 属性
             this.$refs.AddAnnModal.addModalVisible = true
         },
         // 查询
-        searchQuery () {},
+        searchQuery () {
+            // this.loading = true
+        },
         // 重置
         reset () {},
 
@@ -153,10 +174,35 @@ export default {
         // 清空
         onClearSelected () {},
         // ??
-        modalFormOk () {}
+        modalFormOk () {},
+        // 分页、排序、筛选变化时触发
+        handleTableChange (pagination, filters, sorter) {
+            // if (Object.keys(sorter).length > 0) {
+            //     this.isorter.column = sorter.field
+            //     this.isorter.order = sorter.order == 'ascend' ? 'asc' : 'desc'
+            // }
+            // this.ipagination = pagination
+            // this.loadData();
+        },
+        // 编辑
+        editAnn (id) {
+            console.log('点击了编辑，该项公共的ID是：', id)
+        },
+        // 发布
+        sendAnn (id) {
+            console.log('点击了发布')
+        },
+        // 撤销
+        backAnn (id) {
+            console.log('点击了撤销')
+        },
+        // 操作  删除
+        delAnn () {
+            console.log('点击了删除，需要发请求、确定提示、重新渲染')
+        }
     },
     computed: {
-    // 勾选框
+    // 选中项
         rowSelection () {
             return {
                 onChange: (selectedRowKeys, selectedRows) => {
@@ -164,21 +210,25 @@ export default {
                 },
                 getCheckboxProps: record => ({
                     props: {
-                        disabled: record.name === 'Disabled User', // Column configuration not to be checked
-                        name: record.name
+                        disabled: record.title === 'Disabled User',
+                        // Column configuration not to be checked
+                        title: record.title
                     }
                 })
             }
         }
     },
     mounted () {}
-
 }
 </script>
 <style lang="less" scoped>
 @import '~@assets/less/common.less';
-.container {
-  background-color: white;
-  height: 300px;
+.sendAnn {
+  padding: 2px 6px;
+  background-color: #95d5b2;
+  color: #2d6a4f;
+  border: #1b4332;
+  border-radius: 4px;
+  // font-size: 16px;
 }
 </style>

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

@@ -0,0 +1,113 @@
+<template>
+  <a-modal
+    title="新增友情链接"
+    v-model="addLinksModVis"
+    :confirmLoading="confirmLoading"
+    @ok="handleOk"
+    @cancel="handleCancel"
+    width="80%"
+  >
+    <!-- tabel 加载 -->
+    <a-spin :spinning="confirmLoading">
+      <a-form :form="addLinkform" :label-col="{ span: 4 }" :wrapper-col="{ span: 18 }">
+        <!-- 标题 类型 -->
+        <a-row :gutter="24">
+          <a-col :span="12">
+            <a-form-item label="公司名称">
+              <a-input
+                v-decorator="['name', { rules: [{ required: true, message: '请输入公司名称' }] }]"
+                placeholder="请输入公司名称"
+              />
+            </a-form-item>
+          </a-col>
+          <a-col :span="12">
+            <a-form-item label="地址">
+              <a-input
+                v-decorator="['address', { rules: [{ required: true, message: '请输入地址' }] }]"
+                placeholder="请输入地址"
+              />
+            </a-form-item>
+          </a-col>
+        </a-row>
+
+        <!-- 创建人  -->
+        <a-row :gutter="24">
+          <a-col :span="12">
+            <a-form-item label="创建人">
+              <a-input
+                v-decorator="['createBy', { rules: [{ required: false, message: '请输入创建人' }] }]"
+                placeholder="请输入创建人"
+              />
+            </a-form-item>
+          </a-col>
+
+          <a-col :span="12">
+          </a-col>
+        </a-row>
+
+        <!-- 内容 -->
+        <a-row :gutter="24">
+          <a-col :span="12">
+            <a-form-item label="简介">
+              <div v-decorator="['details', { rules: [{ required: true, message: '请输入友情链接简介' }] }]"></div>
+            </a-form-item>
+          </a-col>
+          <a-col :span="24">
+            <!-- 文本域 -->
+            <a-col :span="24">
+              <a-form-item label="简介">
+                <a-textarea v-model="memo" placeholder="公司简介" />
+              </a-form-item>
+            </a-col>
+          </a-col>
+        </a-row>
+      </a-form>
+    </a-spin>
+  </a-modal>
+</template>
+
+<script>
+// import { Moment } from 'moment'
+// import { defineComponent } from 'vue'
+import RichText from '@views/jeecg/RichText.vue'
+export default {
+    name: 'AddLinksModal',
+    components: {
+        RichText
+    },
+    data () {
+        return {
+            addLinkform: this.$form.createForm(this),
+            confirmLoading: false,
+            addLinksModVis: false,
+            smallText: '' // 文本域内容
+        }
+    },
+    created () {},
+    methods: {
+        // 弹框保存
+        handleOk () {
+            // 触发表单验证
+            console.log('弹框点击了保存')
+        },
+        close () {
+            this.$emit('close')
+            this.visible = false
+        },
+        handleCancel () {
+            this.close()
+        },
+        createTimeChange (value, dateString) {
+            // value:Moment[],dateString:string[]
+            console.log('Selected Time:', value)
+            console.log('Formatted Selected Time:', dateString)
+        },
+        createTimeOk (value) {
+            console.log('createTimeOk:', value)
+        }
+    }
+}
+</script>
+<style lang="less" scoped>
+@import '~@assets/less/common.less';
+</style>

src/views/oa/my-plan/add/savePlan.vue

@@ -1,10 +1,11 @@
 <template>
   <div>
     <a-modal v-model="savePlanModalVisible" title="新增日程计划" @ok="handleOk" @cancel="handleCancel" width="52%">
-      
       <div>
         <a-divider orientation="left">基本信息</a-divider>
         <a-form :form="addForm" :label-col="{ span: 5 }" :wrapper-col="{ span: 17 }">
+
+          <!-- 日程标题 类型 -->
           <a-row :gutter="24">
             <!-- 日程标题 -->
             <a-col :span="12">
@@ -30,9 +31,43 @@
             </a-col>
           </a-row>
 
+          <!-- 紧急程度 日程时间 -->
           <a-row :gutter="24">
-            <!-- 提醒类型 -->
             <a-col :span="12">
+              <a-form-item label="紧急程度">
+                <a-select
+                  v-decorator="['degreeOfUrgency', { rules: [{ required: false, message: '请选择紧急程度' }] }]"
+                  placeholder="请选择紧急程度"
+                >
+                  <a-select-option value="一般">一般</a-select-option>
+                  <a-select-option value="重要">重要</a-select-option>
+                  <a-select-option value="紧机">紧机</a-select-option>
+                </a-select>
+              </a-form-item>
+            </a-col>
+            <a-col :span="12">
+              <a-form-item label="日程时间">
+                <!-- 有时分秒 -->
+                <a-range-picker
+                  v-if="isDate == true"
+                  showTime
+                  format="YYYY-MM-DD HH:mm"
+                  @change="continueTimeChange"
+                  v-decorator="['continue', { rules: [{ required: true, message: '请选择日程时间' }] }]"
+                >
+                </a-range-picker>
+                <!-- 无时分秒 -->
+                <a-range-picker
+                  v-if="isDate == false"
+                  format="YYYY-MM-DD"
+                  @change="continueTimeChange"
+                  v-decorator="['continue', { rules: [{ required: true, message: '请选择日程日期' }] }]"
+                >
+                </a-range-picker>
+              </a-form-item>
+            </a-col>
+            <!-- 提醒类型 -->
+            <!-- <a-col :span="12">
               <a-form-item label="提醒类型">
                 <a-select
                   v-decorator="['how', { rules: [{ required: false, message: '请选择提醒类型' }] }]"
@@ -43,26 +78,24 @@
                   <a-select-option value="系统消息">系统消息</a-select-option>
                 </a-select>
               </a-form-item>
-            </a-col>
+            </a-col> -->
 
             <!-- 紧急程度 -->
-            <a-col :span="12">
-              <a-form-item label="紧急程度">
-                <a-select
-                  v-decorator="['degreeOfUrgency', { rules: [{ required: false, message: '请选择紧急程度' }] }]"
-                  placeholder="请选择紧急程度"
-                >
-                  <a-select-option value="一般">一般</a-select-option>
-                  <a-select-option value="重要">重要</a-select-option>
-                  <a-select-option value="紧机">紧机</a-select-option>
-                </a-select>
+
+            <!-- 日程时间 -->
+            <a-row :gutter="24">
+              <!-- 是否全天 -->
+              <!-- <a-col :span="12">
+              <a-form-item label="是否全天">
+                <a-checkbox v-model="checked" checked="checked"></a-checkbox>
               </a-form-item>
-            </a-col>
+            </a-col> -->
+            </a-row>
           </a-row>
 
           <a-row :gutter="24">
             <!-- 提醒时间 -->
-            <a-col :span="12">
+            <!-- <a-col :span="12">
               <a-form-item label="提醒时间">
                 <a-select
                   v-decorator="['when', { rules: [{ required: false, message: '请选择提醒时间' }] }]"
@@ -75,10 +108,10 @@
                   <a-select-option value="提前15分钟">提前15分钟</a-select-option>
                 </a-select>
               </a-form-item>
-            </a-col>
+            </a-col> -->
 
             <!-- 重复提醒 -->
-            <a-col :span="12">
+            <!-- <a-col :span="12">
               <a-form-item label="重复提醒">
                 <a-select
                   v-decorator="['repeat', { rules: [{ required: false, message: '请选择重复提醒' }] }]"
@@ -91,38 +124,7 @@
                   <a-select-option value="每年">每年(当日)</a-select-option>
                 </a-select>
               </a-form-item>
-            </a-col>
-          </a-row>
-
-          <!-- 日程时间、全天 -->
-          <a-row :gutter="24">
-            <a-col :span="12">
-              <a-form-item label="日程时间">
-                <!-- 有时分秒 -->
-                <a-range-picker
-                  v-if="isDate == true"
-                  showTime
-                  format="YYYY-MM-DD HH:mm"
-                  @change="continueTimeChange"
-                  v-decorator="['continue', { rules: [{ required: true, message: '请选择日程时间' }] }]"
-                >
-                </a-range-picker>
-                <!-- 无时分秒 -->
-                <a-range-picker
-                  v-if="isDate == false"
-                  format="YYYY-MM-DD"
-                  @change="continueTimeChange"
-                  v-decorator="['continue', { rules: [{ required: true, message: '请选择日程日期' }] }]"
-                >
-                </a-range-picker>
-              </a-form-item>
-            </a-col>
-            <!-- 是否全天 -->
-            <a-col :span="12">
-              <a-form-item label="是否全天">
-                <a-checkbox v-model="checked" checked="checked"></a-checkbox>
-              </a-form-item>
-            </a-col>
+            </a-col> -->
           </a-row>
 
           <a-divider orientation="left">其他信息</a-divider>
@@ -150,11 +152,8 @@
 
           <!-- 文字编辑器 -->
           <a-row :gutter="24">
-            <a-col :span="24">
-              <a-form-item label="备注">
-                <a-textarea v-model="memo" placeholder="备注" />
-              </a-form-item>
-            </a-col>
+            <!-- 引入富文本 组件 -->
+            <RichText ref="RichText" :modelValue="smallText"></RichText>
           </a-row>
         </a-form>
       </div>
@@ -172,9 +171,12 @@ import 'moment/locale/zh-cn'
 import { scheduleAdd, scheduleUpdate } from '@api/oa/cd-schedule'
 // import { extend } from 'dayjs'
 // import { defineComponent, ref } from 'vue'
-
+import RichText from '@views/jeecg/RichText.vue'
 export default {
     name: 'SavePlan',
+    components: {
+        RichText
+    },
     data () {
         return {
             savePlanModalVisible: false,

src/views/oa/myLinks.vue

@@ -0,0 +1,240 @@
+<template>
+  <!-- :bordered="false" -->
+  <a-card>
+    <!-- 查询 -->
+    <div class="table-page-search-wrapper">
+      <a-form layout="inline" @keyup.enter.native="searchQuery">
+        <a-row :gutter="24">
+          <a-col :md="6" :sm="8">
+            <a-form-item label="名称">
+              <a-input placeholder="请输入标题查询" v-model="queryParam.name"></a-input>
+            </a-form-item>
+          </a-col>
+
+          <span>
+            <a-col :md="6" :sm="12">
+              <a-button type="primary" style="left: 10px" @click="searchQuery" icon="search">查询</a-button>
+            </a-col>
+          </span>
+        </a-row>
+      </a-form>
+    </div>
+
+    <!-- 新增 批量删除 -->
+    <div class="table-add">
+      <a-button @click="addOpen" type="primary">新增</a-button>
+      <!-- 批量操作-----------------------------------
+        v-if="selectedRowKeys.length > 0"
+      ------------------------------------------------>
+      <a-dropdown>
+        <a-menu slot="overlay">
+          <a-menu-item key="1" @click="batchDel"><a-icon type="delete" />删除</a-menu-item>
+        </a-menu>
+        <a-button style="margin-left:24px"> 批量操作 <a-icon type="down"/></a-button>
+      </a-dropdown>
+    </div>
+
+    <div>
+      <!-- 已选择 清空 -->
+      <div class="ant-alert ant-alert-info" style="margin: 20px 0;background:#e6f7ff;">
+        <i class="anticon anticon-info-circle ant-alert-icon"></i> 已选择
+        <!-- {{ selectedRowKeys.length }} -->
+        <a style="font-weight: 600">4</a>项
+        <a style="margin-left: 24px" @click="onClearSelected">清空</a>
+      </div>
+      <a-row>
+        <a-table
+          bordered
+          :columns="columns"
+          :dataSource="annDataList"
+          :loading="loading"
+          :pagination="pagination"
+          :row-key="record => record.id"
+          :rowSelection="rowSelection"
+          @change="handleTableChange"
+        >
+          <!-- 发布 -->
+          <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;" />
+          </span>
+
+          <!-- 操作 -->
+          <span slot="operationSlot" slot-scope="text, record">
+            <a href="javascript:void(0);" @click="editAnn(record.id)" style="color:#219ebc;"> 编辑 </a>
+            <a-divider type="vertical" />
+
+            <a-popconfirm title="确定发布吗？" ok-text="是" cancel-text="否">
+              <button @click="sendAnn(record.id)" class="sendAnn">发布</button>
+            </a-popconfirm>
+            <a-divider type="vertical" />
+
+            <a-popconfirm title="确定删除吗？" ok-text="是" cancel-text="否">
+              <a href="javascript:void(0);" @click="delAnn(record.id)" style="color:#ff6b6b;"> 删除 </a>
+            </a-popconfirm>
+          </span>
+        </a-table>
+      </a-row>
+    </div>
+
+    <!-- 新增弹框 组件 -->
+    <addLinks-modal ref="AddLinksModal" @ok="modalFormOk"></addLinks-modal>
+  </a-card>
+</template>
+
+<script>
+// import { JeecgListMixin } from '@/mixins/JeecgListMixin'
+import AddLinksModal from '@views/oa/my-links/add/addLinksModal.vue'
+export default {
+    name: 'MyLinks',
+    // mixins: [JeecgListMixin],
+    components: {
+        AddLinksModal
+    },
+    data () {
+        return {
+            id: '', // 唯一标识 双休绑定后自动生成，删除
+            loading: false, // 表格加载
+            pagination: {}, // 分页
+            queryParam: {}, // 查询条件对象
+            // 表头
+            columns: [
+                {
+                    title: '名称',
+                    dataIndex: 'name',
+                    align: 'center'
+                },
+                {
+                    title: '地址',
+                    dataIndex: 'address',
+                    align: 'center'
+                },
+                {
+                    title: '创建人',
+                    dataIndex: 'createBy',
+                    align: 'center'
+                },
+                {
+                    title: '发布',
+                    dataIndex: 'isRelease',
+                    scopedSlots: { customRender: 'isReleaseSlot' },
+                    align: 'center'
+                },
+                {
+                    title: '操作',
+                    dataIndex: 'operation',
+                    scopedSlots: { customRender: 'operationSlot' },
+                    align: 'center',
+                    width: '20%'
+                }
+            ],
+            // 公共数据
+            annDataList: [
+                {
+                    id: '1',
+                    name: '用友',
+                    address: 'https://www.yonyou.com/',
+                    createBy: 'admin',
+                    isRelease: '1'
+                },
+                {
+                    id: '2',
+                    name: '哒哒办公',
+                    address: 'http://www.dakabg.com/',
+                    createBy: 'admin',
+                    isRelease: '1'
+                },
+                {
+                    id: '3',
+                    name: '钉钉',
+                    address: 'https://www.dingtalk.com/',
+                    createBy: 'admin',
+                    isRelease: '1'
+                },
+                {
+                    id: '4',
+                    name: '品医',
+                    address: 'https://www.11467.com/',
+                    createBy: 'admin',
+                    isRelease: '1'
+                },
+                {
+                    id: '5',
+                    name: '蚂蚁集团',
+                    address: 'https://www.antgroup.com/',
+                    createBy: 'admin',
+                    isRelease: '1'
+                }
+            ]
+        }
+    },
+    created () {},
+    methods: {
+    // 新增
+        addOpen () {
+            console.log('点击了大页面的新增')
+            // 拿到子组件的弹框 属性
+            this.$refs.AddLinksModal.addLinksModVis = true
+        },
+        // 查询
+        searchQuery () {
+            // this.loading = true
+        },
+        // 重置
+        reset () {},
+
+        // 批量删除
+        batchDel () {},
+        // 清空
+        onClearSelected () {},
+        // ??
+        modalFormOk () {},
+        // 分页、排序、筛选变化时触发
+        handleTableChange (pagination, filters, sorter) {
+        },
+        // 编辑
+        editAnn (id) {
+            console.log('点击了编辑，该项公共的ID是：', id)
+        },
+        // 发布
+        sendAnn (id) {
+            console.log('点击了发布')
+        },
+        // 撤销
+        backAnn (id) {
+            console.log('点击了撤销')
+        },
+        // 操作  删除
+        delAnn () {
+            console.log('点击了删除，需要发请求、确定提示、重新渲染')
+        }
+    },
+    computed: {
+    // 选中项
+        rowSelection () {
+            return {
+                onChange: (selectedRowKeys, selectedRows) => {
+                    console.log(`selectedRowKeys: ${selectedRowKeys}`, 'selectedRows: ', selectedRows)
+                },
+                getCheckboxProps: record => ({
+                    props: {
+                        disabled: record.title === 'Disabled User',
+                        // Column configuration not to be checked
+                        title: record.title
+                    }
+                })
+            }
+        }
+    },
+    mounted () {}
+}
+</script>
+<style lang="less" scoped>
+@import '~@assets/less/common.less';
+.sendAnn {
+  background-color: #95d5b2;
+  color: #2d6a4f;
+  border: #1b4332;
+  border-radius: 4px;
+}
+</style>