Ant design-10 单个上传和批量上传

本节：如果想要上架和批量上架都使用同一个接口，那么接口的传参要一致。

1.div

批量上传点击事件：

点击单个上传的事件：

   :row-key="(record) => record.id"

          :row-selection="{ selectedRowKeys: selectedRowKeys, onChange: onSelectChange }"

2.定义用来存放获取当前id所有信息的数组

 3.定义接口功能，定义单个点击上传，批量上传的功能

所有代码：

<template>
  <div>
    <div>
      <template>
        <a-breadcrumb separator="">
          <a-breadcrumb-item>位置</a-breadcrumb-item>
          <a-breadcrumb-separator>:</a-breadcrumb-separator>
          <a-breadcrumb-item href=""> 一级页面 </a-breadcrumb-item>
          <a-breadcrumb-separator />
          <a-breadcrumb-item href=""> 二级页面 </a-breadcrumb-item>
        </a-breadcrumb>
      </template>
    </div>

    <div class="top">
      <div style="display: flex; margin-left: 30px; align-items: center">
        <div style="display: flex; margin-left: 30px; align-items: center">
          <div>新闻标题：</div>
          <div><a-input placeholder=" 请输入" v-model="suosTitle" /></div>
        </div>
        <div style="display: flex; align-items: center; margin-left: 30px">
          <div>状态:</div>
          <a-select v-model="suosStauts" placeholder="请选择" :key="index + '1'" style="width: 200px" @submit="suos" @submit.native.prevent>
            <a-select-option value="上架"> 上架</a-select-option>
            <!-- 有冒号是变量，可以循环，没冒号就是当前文本 -->
            <a-select-option value="未上架"> 未上架</a-select-option>
            <a-select-option value="下架"> 下架</a-select-option>
          </a-select>
        </div>
        <div style="display: flex; align-items: center; margin-left: 30px">
          <div>所属栏目:</div>
          <a-select v-model="suosParentsId" placeholder="请选择" style="width: 200px" @submit="suos" @submit.native.prevent>
            <a-select-option v-for="(col, index) in columnsAllList" :key="index" :value="col.id"> {{ col.title }} </a-select-option>
          </a-select>
        </div>

        <div style="margin-left: 30px" @click="suos()"><a-button type="primary" style="width: 50px" icon="search" /></div>
      </div>
    </div>
    <div class="bottom">
      <div style="display: flex">
        <div><a-button type="primary" @click="addNews"> 新增 </a-button></div>
        <div style="margin-left: 30px"><a-button type="primary" @click="upNews"> 批量上架 </a-button></div>
        <div style="margin-left: 30px"><a-button type="primary" @click="downNews"> 批量下架 </a-button></div>
        <div style="margin-left: 30px"><a-button type="primary" @click="delNews"> 批量删除 </a-button></div>
      </div>
      <!-- 表格内容 -->
      <div style="margin-top: 30px">
        <!-- <div style="width: 1250px"> -->
        <a-table
          :indentSize="2"
          :columnWidth="1"
          :columns="columns"
          :data-source="data"
          :key="ii + 1"
          @change="handleTableChange"
          :pagination="pagination"
          :row-key="(record) => record.id"
          :row-selection="{ selectedRowKeys: selectedRowKeys, onChange: onSelectChange }"
        >
          <a slot="name" slot-scope="text">{{ text }}</a>
          <div slot="cover" slot-scope="text"><img :src="cdn + text" alt="" srcset="" style="width: 50px" /></div>
          <span slot="action" slot-scope="text, record">
            <div style="display: flex">
              <div style="color: #2e71fe">编辑</div>
              <div style="color: #2e71fe; margin-left: 20px">查看</div>
              <div style="color: #2e71fe; margin-left: 20px" @click="upshelf(record)">上架</div>
              <div style="color: #2e71fe; margin-left: 20px" @click="downshelf(record)">下架</div>
              <div style="color: #2e71fe; margin-left: 20px" @click="del(record)">删除</div>
            </div>
          </span>
        </a-table>
        <!-- </div> -->
      </div>
    </div>
    <div></div>
    <a-modal :model="addData" v-model="addnew" title="新增/修改栏目" @ok="handleOk">
      <div style="display: flex; padding-left: 50px">
        <div style="color: red">*</div>
        <div>栏目名称：</div>
        <div><a-input placeholder=" 请输入栏目名称" v-model="addData.title" style="width: 280px" /></div>
      </div>
      <div style="display: flex; padding-left: 50px; margin-top: 40px">
        <div style="padding-right: 5px">所属栏目：</div>
        <div>
          <a-select style="width: 280px" placeholder="请选择">
            <a-select-option value="shanghai" v-model="addData.parentId">1 </a-select-option>
            <a-select-option value="beijing " v-model="addData.parentId"> 2 </a-select-option>
          </a-select>
        </div>
      </div>
      <div style="display: flex; padding-left: 50px; margin-top: 30px">
        <div style="color: red">*</div>
        <div>是否推荐：</div>
        <div>
          <template>
            <a-radio-group name="radioGroup" :default-value="1">
              <a-radio :value="1" v-model="addData.status"> 是 </a-radio>
              <a-radio :value="2" v-model="addData.status"> 否 </a-radio>
            </a-radio-group>
          </template>
        </div>
      </div>
      <div style="display: flex; padding-left: 50px; margin-top: 30px">
        <div style="color: red; padding-left: 25px">*</div>
        <div>状态：</div>
        <div>
          <template>
            <a-radio-group name="radioGroup" :default-value="1">
              <a-radio :value="1" v-model="addData.STATUS_ON"> 启用 </a-radio>
              <a-radio :value="2" v-model="addData.STATUS_OFF"> 禁用 </a-radio>
            </a-radio-group>
          </template>
        </div>
      </div>
    </a-modal>
  </div>
</template>

<script>
const columns = [
  {
    title: '序号',
    dataIndex: 'id',
    key: 'id',
    scopedSlots: { customRender: '序号' },
    width: 150,
  },
  {
    title: '新闻标题',
    dataIndex: 'title',
    key: 'title',
    width: 150,
  },
  {
    title: '所属栏目',
    dataIndex: 'sectionId',
    key: 'sectionId 1',
    ellipsis: true,
    width: 100,
  },
  {
    title: '更新时间',
    dataIndex: 'updated',
    key: 'updated 2',
    ellipsis: true,
    width: 100,
  },
  {
    title: '上架时间',
    dataIndex: 'publishDate',
    key: 'publishDate 3',
    ellipsis: true,
    width: 150,
  },
  {
    title: '下架时间',
    dataIndex: 'unPublishDate',
    key: 'unPublishDate 4',
    ellipsis: true,
    width: 150,
  },
  {
    title: '状态',
    dataIndex: 'status',
    key: 'status 5',
    scopedSlots: { customRender: 'status' },
    width: 150,

    ellipsis: true,
  },
  {
    title: '照片',
    dataIndex: 'cover',
    key: 'cover 5',
    scopedSlots: { customRender: 'cover' },
    width: 50,

    ellipsis: true,
  },
  {
    title: '操作',
    dataIndex: 'action',
    key: 'action 5',
    scopedSlots: { customRender: 'action' },
    width: 200,

    ellipsis: true,
  },
];
import moment from 'moment';
const data = [];
for (let i = 0; i < 46; i++) {
  data.push({
    key: i,
    name: `Edward King ${i}`,
    age: 32,
    address: `London, Park Lane no. ${i}`,
  });
}
export default {
  data() {
    return {
      newIds: [], //编辑id
      selectedRowKeys: [],
      index: '',
      columnsAllList: [],
      suosStauts: '',
      suosParentsId: '',
      suosTitle: '',
      ii: '',
      dateFormat: 'YYYY/MM/DD',
      monthFormat: 'YYYY/MM',
      //   data,
      columns,
      data: [],
      addnew: false,
      pagination: { pageSize: 5, total: 100, current: 1, showSizeChanger: true },
      addData: { id: '', title: '', parentId: '', created: '', status: '', STATUS_ON: '', isRecommend: '', STATUS_OFF: '' },
    };
  },
  created() {
    this.loadList();
    this.alllm();
  },
  computed: {
    hasSelected() {
      return this.selectedRowKeys.length > 0;
    },
  },
  methods: {
    // 下架
    async downshelfs() {
      let reqData = {};
      let reqParam = { newIds: this.newIds };
      let urlParam = `?newIds=${reqParam.newIds.join('&newIds=')}`;
      let unShelveUrl = `/news/unShelve${urlParam}`;
      let result = await this.axios.get(unShelveUrl, reqData);
      this.loadList();
      alert('下架成功！');
      console.log(result);
    },
    // 上架接口
    async upshelfs() {
      let reqData = {};
      let reqParam = { newIds: this.newIds };
      let urlParam = `?newIds=${reqParam.newIds.join('&newIds=')}`;
      let shelveUrl = `/news/shelve${urlParam}`;
      let result = await this.axios.get(shelveUrl, reqData);
      this.loadList();
      alert('上架成功！');
      console.log(result);
    },
    // 搜索功能
    async suos() {
      let reqData = {
        cover: '',
        accessoryList: [{ path: '', resourceId: 0, fileName: '', id: 0 }],
        link: '',
        id: '',
        sectionId: this.suosParentsId,
        title: this.suosTitle,
        content: '',
        status: this.suosStauts,
      };
      let reqParam = { pageNumber: '0', pageSize: '0' };
      let searchUrl = `/news/search/${reqParam.pageNumber}/${reqParam.pageSize}`;
      let result = await this.axios.post(searchUrl, reqData);
      this.data = result.data.data;
      console.log(result);
      this.qk();
    },

    // 多选
    start() {
      this.loading = true;
      // ajax request after empty completing
      setTimeout(() => {
        this.loading = false;
        this.selectedRowKeys = [];
      }, 1000);
    },
    onSelectChange(selectedRowKeys) {
      console.log('selectedRowKeys changed: ', selectedRowKeys);
      this.selectedRowKeys = selectedRowKeys;
      console.log(this.selectedRowKeys);
    },

    // 获取所有一级栏目
    async alllm() {
      let reqData = {};
      let getAllUrl = `/section/getAll`;
      let result = await this.axios.get(getAllUrl, reqData);
      this.columnsAllList = result.data.data;
      console.log(this.columnsAllList);

      console.log(result);
    },
    qk() {
      this.suosStauts = '';
      this.suosTitle = '';
      this.suosParentsId;
    },
    moment,
    //点击单个上架
    upshelf(record) {
      this.newIds = [record.id];
      console.log(this.newIds);
      this.upshelfs();
    },
    // 点击批量上架
    upNews() {
      this.newIds = this.selectedRowKeys;
      this.upshelfs();
      console.log('批量上架成功！');
    },

    // 点击下架
    downshelf(record) {
      this.newIds = [record.id];
      this.downshelfs();
    },

    // 点击批量下架
    downNews() {
      this.newIds = this.selectedRowKeys;
      this.downshelfs();
      console.log('批量下架成功！');
    },

    // 批量删除
    delNews() {
      this.newIds = this.selectedRowKeys;
      this.dels();
    },

    onChange(dates, dateStrings) {
      console.log('From: ', dates[0], ', to: ', dates[1]);
      console.log('From: ', dateStrings[0], ', to: ', dateStrings[1]);
    },
    switchTuiJian() {
      console.log(`a-switch to `);
    },
    /**分页 */
    handleTableChange(pagination, filters, sorter) {
      this.pagination = pagination; //保存分页信息
      this.loadList(); //重新读取文章列表
    },
    async newAdd() {
      //   let reqData = { isRecommend: true, created: '2021-08-08', STATUS_OFF: '', id: this.id, title: this.title, parentId: this.parentId, STATUS_ON: '', status: '启用' };
      let reqData = this.addData;
      let saveUrl = `/section/save`;
      let result = await this.axios.post(saveUrl, reqData);
      console.log(result);
      alert('添加成功');
    },

    // 获取所有
    async loadList() {
      let reqData = { cover: '', accessoryList: [{ path: '', resourceId: 0, fileName: '', id: 0 }], link: '', id: '', sectionId: '', title: '', content: '', status: '' };
      let reqParam = { pageNumber: '0', pageSize: '0' };
      let searchUrl = `/news/search/${reqParam.pageNumber}/${reqParam.pageSize}`;
      let result = await this.axios.post(searchUrl, reqData);
      this.data = result.data.data;
      this.pagination.total = result.data.total;

      console.log(result);
    },
    // 点击删除
    del(record) {
      this.newIds = [record.id];
      this.dels();
    },
    // 删除接口
    async dels() {
      let reqData = {};
      // let reqParam = { newIds: ['1', '2', '3'] };
      let reqParam = { newIds: this.newIds };
      let urlParam = `?newIds=${reqParam.newIds.join('&newIds=')}`;
      let deleteUrl = `/news/delete${urlParam}`;
      let result = await this.axios.delete(deleteUrl, reqData);
      console.log(result);
      this.loadList();
      alert('恭喜你，删除成功！');
    },
    switchStatus() {},
    addNews(obj) {
      //跳转至修改界面
      this.$router.push({
        name: 'addNews',
        params: {
          id: obj.id, //携带文章编号
        },
      });
    },
    handleOk(e) {
      console.log(e);
      this.newAdd();
      this.addnew = false;
      this.loadList();
    },
  },
};
</script>

<style>
.top {
  background-color: #fff;
  width: 85vw;
  height: 80px;
  margin-top: 20px;
  display: flex;
  align-items: center;
  border-radius: 5px;
}
.bottom {
  background-color: #fff;
  width: 85vw;
  height: 680px;
  margin-top: 30px;
  border-radius: 5px;
  padding-left: 30px;
  padding-top: 30px;
}
</style>