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

<template>
  <a-card :bordered="false">
    <!-- 查询 -->
    <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>

          <a-col :md="6" :sm="8">
            <a-form-item label="发布状态">
              <a-select v-model="queryParam.isRelease" placeholder="请选择发布状态">
                <a-select-option value="">请选择</a-select-option>
                <a-select-option value="0">未发布</a-select-option>
                <a-select-option value="1">已发布</a-select-option>
              </a-select>
            </a-form-item>
          </a-col>
          <a-col :md="6" :sm="8">
            <span style="float: left;overflow: hidden;">
              <a-button type="primary" style="left: 10px" @click="searchQuery" icon="search">查询</a-button>
              <a-button type="primary" @click="searchReset" icon="reload" style="margin-left: 20px">重置</a-button>
            </span>
          </a-col>
        </a-row>
      </a-form>
    </div>

    <!-- 新增 批量删除 -->
    <div class="table-add">
      <a-button @click="addAnn" 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="annList"
          :loading="loading"
          :pagination="pagination"
          :row-key="record => record.id"
          :rowSelection="rowSelection"
          @change="handleTableChange"
        >
          <!-- 发布 -->
          <span slot="isReleaseSlot" slot-scope="text, record">
            <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" v-if="record.isRelease == '0'" />

            <!-- 判断是否发布 -->
            <a-popconfirm
              v-if="record.isRelease == '0'"
              title="确定发布吗？"
              @confirm="sendAnn(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="saveAnn(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="否" @confirm="delAnn(record)">
              <a href="javascript:void(0);" class="delRed"> 删除 </a>
            </a-popconfirm>
          </span>
        </a-table>
      </a-row>
    </div>

    <addAnn-modal ref="AddAnnModal" @ok="modalFormOk" :fatherGetList="getAnnList"></addAnn-modal>
  </a-card>
</template>

<script>
import AddAnnModal from '@views/oa/enter-ann/add/addAnnModal.vue'
import {
    enterpriseEList,
    enterpriseEQueryById,
    enterpriseEReleseUpdate,
    enterpriseEDelete
} from '@api/oa/cd-enterprise-announcement'
export default {
    name: 'EnterpriseAnnouncement', // 企业公告

    components: {
        AddAnnModal
    },
    data () {
        return {
            id: '', // 唯一标识 双休绑定后自动生成，删除
            loading: false, // 表格加载
            // 表头
            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%'
                }
            ],
            annList: [], // 公告数据
            // 分页参数
            pagination: {
                total: 0,
                current: 0,
                pageSize: 0
            },
            showInfo: {}, // 编辑时回显的公告数据
            // 查询条件
            queryParam: {
                pageNo: '1', // 页码
                title: '', // 标题
                isRelease: '' // 是否发布
            }
        }
    },
    created () {
        this.getAnnList() // 渲染公告
    },
    methods: {
    // 查询日程计划列表(根据参数不同，传递对应的数据)
        getAnnList () {
            enterpriseEList(this.queryParam).then(res => {
                // console.log('>>>>', this.queryParam)
                if (res.success) {
                    this.annList = res.result.records
                    console.log('列表公告=====', this.annList)

                    this.pagination = {
                        total: res.result.total,
                        current: res.result.current,
                        pageSize: res.result.size
                    }
                }
            })
        },
        // 查询按钮
        searchQuery () {
            this.getAnnList() // 渲染公告
        },
        searchReset () {
            // console.log('>>>>重置')
            this.queryParam.title = ''
            this.queryParam.isRelease = ''
            this.getAnnList()
        },

        // 新增 按钮
        addAnn () {
            console.log('点击新增，负责打开弹框，剩下功能在子组件的保存按钮')
            this.$refs.AddAnnModal.addModalVisible = true
            this.$refs.AddAnnModal.title = '新增企业公告'
        },
        // 点击编辑  回显
        editAnn (obj) {
            console.log('打开编辑弹框，剩下功能在子组件的保存按钮')
            this.$refs.AddAnnModal.addModalVisible = true
            this.$refs.AddAnnModal.title = '编辑企业公告'
            // 根据id查询公告
            enterpriseEQueryById({ id: obj.id }).then(res => {
                if (res.success) {
                    console.log(res)
                    this.$refs.AddAnnModal.annInfo = res.result
                    this.$refs.AddAnnModal.getAnnFormInfo()
                }
            })
        },

        // 发布
        sendAnn (id) {
            enterpriseEReleseUpdate({ id: id, isRelease: '1' }).then(res => {
                console.log(res)
                this.$message.success('发布成功')
                this.getAnnList()
            })
        },
        // 删除公告
        delAnn (record) {
            console.log('点击公告对象', record)
            enterpriseEDelete({ id: record.id }).then(res => {
                if (res.success) {
                    console.log(res)
                    this.$message.success('删除成功')
                    this.getAnnList()
                }
            })
        },
        // 取消发布
        saveAnn (id) {
            console.log('点击了取消发布')
            enterpriseEReleseUpdate({ id: id, isRelease: '0' }).then(res => {
                console.log(res)
                this.$message.success('取消发布')
                this.getAnnList() // 渲染公告
            })
        },

        // 批量删除
        batchDel () {},
        // 清空
        onClearSelected () {},
        // ??
        modalFormOk () {},
        // 分页、排序、筛选变化时触发
        handleTableChange (pagination, filters, sorter) {
            // console.log('当前页信息>>>>',pagination)
            this.queryParam.pageNo = pagination.current
            this.getAnnList()
        }
    },
    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';
</style>