cd-work-flow-web/src/views/oa/myLinks.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.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>
      <!-- 批量操作-->
      <a-dropdown v-if="selectedRowKeys.length > 0">
        <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> 已选择
        <a style="font-weight: 600">{{ selectedRowKeys.length }}</a
        >项
        <a style="margin-left: 24px" @click="onClearSelected">清空</a>
      </div>

      <!-- 友情链接表 -->
      <a-row>
        <a-table
          bordered
          :columns="columns"
          :dataSource="linksData"
          :loading="loading"
          :pagination="pagination"
          :row-key="record => record.id"
          :rowSelection="{ selectedRowKeys: selectedRowKeys, onChange: onSelectChange }"
          @change="handleTableChange"
        >
          <!-- 发布 -->
          <span slot="isReleaseSlot" slot-scope="text, record">
            <a-tag color="#f50" v-if="record.isRelease == '0'">
              未发布
            </a-tag>
            <a-tag color="#87d068" v-else>
              已发布
            </a-tag>
          </span>

          <!-- 操作 -->
          <span slot="operationSlot" slot-scope="text, record">
            <a href="javascript:void(0);" @click="editLinks(record)"> 编辑 </a>

            <a-divider type="vertical" v-if="record.isRelease == '0'" />

            <!-- 判断是否发布 -->
            <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="否" @confirm="delLinks(record)">
              <a href="javascript:void(0);" class="delRed"> 删除 </a>
            </a-popconfirm>
          </span>
        </a-table>
      </a-row>
    </div>

    <!-- 新增弹框 组件 -->
    <addLinks-modal ref="AddLinksModal" :fatherGetList="getLinksList" @ok="modalFormOk"></addLinks-modal>
  </a-card>
</template>

<script>
import AddLinksModal from '@views/oa/my-links/add/addLinksModal.vue'
import { linksList, linksQueryById, linksDelete, linksReleseUpdate } from '@api/oa/cd_links'
export default {
    name: 'MyLinks',
    components: {
        AddLinksModal
    },
    data () {
        return {
            selectedRowKeys: [],
            id: '', // 唯一标识 双休绑定后自动生成，删除
            loading: false, // 表格加载
            pagination: {
                total: 0,
                current: 0,
                pageSize: 0
            },
            queryParam: {
                pageNo: '1',
                name: '' // 名称
                // isRelease: '' // 是否发布
            },
            // 表头
            columns: [
                {
                    title: '名称',
                    dataIndex: 'name',
                    align: 'center'
                },
                {
                    title: '地址',
                    dataIndex: 'link',
                    align: 'center'
                },
                {
                    title: '简要介绍',
                    dataIndex: 'briefIntroduction',
                    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%'
                }
            ],
            // 链接数据
            linksData: []
        }
    },
    created () {
        this.getLinksList() // 友情链接
    },
    methods: {
    // 友情链接 查询
        getLinksList () {
            this.$nextTick(() => {
                linksList(this.queryParam).then(res => {
                    // console.log('>>>>', this.queryParam)
                    if (res.success) {
                        this.linksData = res.result.records
                        console.log('链接公告==', this.linksData)
                        this.pagination = {
                            total: res.result.total,
                            current: res.result.current,
                            pageSize: res.result.size
                        }
                    }
                })
            })
        },

        // 查询
        searchQuery () {
            this.getLinksList()
        },

        // 新增
        addOpen () {
            console.log('点击新增，负责打开弹框，剩下功能在子组件的保存按钮')
            // 拿到子组件的弹框 属性
            this.$refs.AddLinksModal.addLinksModVis = true
            this.$refs.AddLinksModal.title = '新增友情链接'
        },
        // 编辑
        editLinks (obj) {
            console.log('点击编辑，该链接是:', obj)
            this.$refs.AddLinksModal.addLinksModVis = true
            this.$refs.AddLinksModal.title = '编辑友情链接'
            // 根据 ID 查询对应友情链接 params:{id:''}
            linksQueryById({ id: obj.id }).then(res => {
                if (res.success) {
                    console.log('根据id查询res:', res)
                    this.$refs.AddLinksModal.linkInfo = res.result
                    console.log('this.$refs.AddLinksModal.linkInfo:', this.$refs.AddLinksModal.linkInfo)
                    this.$refs.AddLinksModal.getLinkInfo()
                }
            })
        },

        // 勾选
        onSelectChange (keys, rows) {
            this.selectedRowKeys = keys
            this.selectedRows = rows
        },
        // 批量删除
        batchDel () {},
        // 清空
        onClearSelected () {},
        // ??
        modalFormOk () {},
        // 分页、排序、筛选变化时触发
        handleTableChange (pagination, filters, sorter) {
            console.log('当前页信息>>>>', pagination)
            this.queryParam.pageNo = pagination.current
            this.getLinksList()
        },

        // 发布
        sendLinks (id) {
            console.log('发布')
            linksReleseUpdate({ id: id, isRelease: '1' }).then(res => {
                if (res.success) {
                    this.getLinksList()
                    this.$message.success('发布成功')
                }
            })
        },
        // 取消发布
        saveLinks (id) {
            console.log('取消发布')
            linksReleseUpdate({ id: id, isRelease: '0' }).then(res => {
                if (res.success) {
                    this.$message.success('取消发布')
                    this.getLinksList()
                }
            })
        },
        // 撤销
        backLinks (id) {
            console.log('点击了撤销')
        },
        // 操作  删除
        delLinks (record) {
            // console.log('点击了删除，需要发请求、确定提示、重新渲染')
            linksDelete({ id: record.id }).then(res => {
                if (res.success) {
                    console.log('res', res)
                    this.getLinksList()
                    this.$message.success('删除成功')
                }
            })
        }
    },
    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>