cd-work-flow-web/src/views/oa/enterpriseAnnouncement.vue

<template>
  <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.title"></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">2</a>项
        <a style="margin-left: 24px" @click="onClearSelected">清空</a>
      </div>
      <!-- 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>

    <!-- 新增弹框 组件 -->
    <addAnn-modal ref="AddAnnModal" @ok="modalFormOk"></addAnn-modal>
  </a-card>
</template>

<script>
// import { JeecgListMixin } from '@/mixins/JeecgListMixin'
import AddAnnModal from '@views/oa/enter-ann/add/addAnnModal.vue'
export default {
    name: 'EnterpriseAnnouncement', // 企业公告
    // mixins: [JeecgListMixin],
    components: {
        AddAnnModal
    },
    data () {
        return {
            id: '', // 唯一标识 双休绑定后自动生成，删除
            loading: false, // 表格加载
            pagination: {}, // 分页
            queryParam: {}, // 查询条件对象
            // 表头
            columns: [
                {
                    title: '标题',
                    dataIndex: 'title',
                    align: 'center'
                },
                {
                    title: '类型',
                    dataIndex: 'type',
                    align: 'center'
                },
                {
                    title: '创建人',
                    dataIndex: 'createBy',
                    align: 'center'
                },
                {
                    title: '创建日期',
                    dataIndex: 'createTime',
                    align: 'center'
                },
                {
                    title: '发布',
                    dataIndex: 'isRelease',
                    scopedSlots: { customRender: 'isReleaseSlot' },
                    align: 'center'
                },
                {
                    title: '操作',
                    dataIndex: 'operation',
                    scopedSlots: { customRender: 'operationSlot' },
                    align: 'center',
                    width: '20%'
                }
            ],
            // 公共数据
            annDataList: [
                {
                    id: '1',
                    title: '企业文化KPI考核',
                    type: '正常',
                    createBy: 'admin',
                    createTime: '2020/09/09',
                    isRelease: '0'
                },
                {
                    id: '2',
                    title: '周末全体员工聚餐',
                    type: '财务',
                    createBy: 'admin',
                    createTime: '2021/12/19',
                    isRelease: '1'
                }
            ]
        }
    },
    created () {},
    methods: {
    // 新增
        addOpen () {
            console.log('点击了大页面的新增')
            // 拿到子组件的弹框 属性
            this.$refs.AddAnnModal.addModalVisible = true
        },
        // 查询
        searchQuery () {
            // this.loading = true
        },
        // 重置
        reset () {},

        // 批量删除
        batchDel () {},
        // 清空
        onClearSelected () {},
        // ??
        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) => {
                    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 {
  padding: 2px 6px;
  background-color: #95d5b2;
  color: #2d6a4f;
  border: #1b4332;
  border-radius: 4px;
  // font-size: 16px;
}
</style>