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

<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)"> 编辑 </a>
            <a-divider type="vertical" />

            <a-popconfirm title="确定发布吗？" ok-text="是" cancel-text="否">
              <a href="javascript:void(0);" @click="sendAnn(record.id)" 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>
          </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';
</style>