Ant desgin-08 状态和推荐按钮的传输

最新推荐文章于 2022-11-17 15:22:28 发布

V_zcm

最新推荐文章于 2022-11-17 15:22:28 发布

阅读量591

点赞数

分类专栏： Ant desgin 文章标签： elementui vue.js wpf

本文链接：https://blog.csdn.net/m0_59214979/article/details/122254807

版权

Ant desgin 专栏收录该内容

13 篇文章 0 订阅

订阅专栏

本节：

1.表格

         <!-- false和true -->
          <span slot="isRecommend" slot-scope="text, record">
            <div>
              <a-switch @change="switchTuiJian(record)" :checked="text" />
            </div>
          </span>
          <span slot="status" slot-scope="text, record">
            <!-- 禁用和启用 -->
            <a-switch :v-model="stateChangebuttom" @change="stateChange(record)" :checked="text === '启用' ? true : false" />
          </span>

2.按钮的点击变化设置

 // 推荐的变化
    switchTuiJian(record) {
      record.isRecommend = !record.isRecommend;
      this.upData = record;
      this.upDataok();
    },

    // 状态的变化
    stateChange(record) {
      if (record.status == '禁用') {
        record.status = '启用';
      console.log( record.status);

      } else {
        record.status = '禁用';
      console.log( record.status);

      }
      this.upData = record;
      this.upDataok();
    },

3.功能接口的编写

    // 显示修改模态框
    updataModel(record) {
      this.upData = record;
      this.upData_see = true;
      this.upDataok();
    },

 
    // 修改数据
    async upDataok() {
      let reqData = this.upData;
      let updateUrl = `/section/update`;
      let result = await this.axios.post(updateUrl, reqData);
      this.loadList();
      console.log(result);
    },

   // 完成数据修改，模态框隐藏
    upDatahandleOk() {
      this.upDataok();
      this.upData_see = false;
    },

    // 取消修改
    upDatacancel() {
      this.upData_see = false;
    },

全部代码：

<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; align-items: center">
          <div>所属栏目：</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 + 'lm'" :value="col.id"> {{ col.title }} </a-select-option>
            </a-select>
          </div>
        </div>
        {{ upData.isRecommend }}
        {{ upData.status }}

        <div style="display: flex; margin-left: 30px; align-items: center">
          <div>栏目名称：</div>
          <div><a-input placeholder=" 请输入" v-model="suoText" /></div>
        </div>
        <div style="display: flex; margin-left: 30px; align-items: center">
          <div>创建时间：</div>
          <div><a-range-picker :ranges="{ Today: [moment(), moment()], 'This Month': [moment(), moment().endOf('month')] }" show-time format="YYYY/MM/DD HH:mm:ss" @change="onChange" /></div>
          <div></div>
        </div>
        <div style="margin-left: 30px" @click="suos()"><a-button type="primary" style="width: 50px" icon="search" /></div>
      </div>
    </div>
    <div class="bottom">
      <div><a-button type="primary" @click="showModal"> 新增 </a-button></div>
      <!-- 表格内容 -->
      <div style="margin-top: 30px; width: 80vw">
        <a-table :columns="columns" :data-source="data" :key="ii + 1" @change="handleTableChange" :pagination="pagination" :row-key="(record) => record.id">
          <a slot="name" slot-scope="text">{{ text }}</a>
          <span slot="action" slot-scope="text, record">
            <div style="display: flex">
              <div style="color: #2e71fe" @click="updataModel(record)">编辑</div>
              <div style="color: #2e71fe; margin-left: 20px" @click="del(record)">删除</div>
            </div>
          </span>
          <!-- false和true -->
          <span slot="isRecommend" slot-scope="text, record">
            <div>
              <a-switch @change="switchTuiJian(record)" :checked="text" />
            </div>
          </span>
          <span slot="status" slot-scope="text, record">
            <!-- 禁用和启用 -->
            <a-switch :v-model="stateChangebuttom" @change="stateChange(record)" :checked="text === '启用' ? true : false" />
          </span>
        </a-table>
      </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 v-model="addData.parentId" placeholder="请选择" style="width: 200px" @submit="suos" @submit.native.prevent>
            <a-select-option v-for="(col, index) in columnsAllList" :key="index + '1'" :value="col.id"> {{ col.title }} </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" v-model="addData.status">
              <a-radio value="启动"> 是 </a-radio>
              <a-radio value="禁用"> 否 </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" v-model="addData.isRecommend">
              <a-radio value="true"> 启用 </a-radio>
              <a-radio value="false"> 禁用 </a-radio>
            </a-radio-group>
          </template>
        </div>
      </div>
    </a-modal>
    <!-- 编辑 -->
    <a-modal :model="upData" v-model="upData_see" title="编辑栏目" @ok="upDatahandleOk" @cancel="upDatacancel">
      <div style="display: flex; padding-left: 50px">
        <div style="color: red">*</div>
        <div>栏目名称：</div>
        <div><a-input placeholder=" 请输入栏目名称" v-model="upData.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 v-model="upData.parentId" placeholder="请选择" style="width: 200px" @submit="suos" @submit.native.prevent>
            <a-select-option v-for="(col, index) in columnsAllList" :key="index + '1'" :value="col.id"> {{ col.title }} </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" v-model="upData.status" v-decorator="['status', { rules: [{ required: true, message: '请输选择!' }] }]">
              <a-radio value="启用"> 是 </a-radio>
              <a-radio value="禁用"> 否 </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" v-model="upData.isRecommend" v-decorator="['isRecommend', { rules: [{ required: true, message: '请输选择!' }] }]">
              <a-radio value="true"> 启用 </a-radio>
              <a-radio value="false"> 禁用 </a-radio>
            </a-radio-group>
          </template>
        </div>
      </div>
    </a-modal>
  </div>
</template>

<script>
const columns = [
  {
    title: '序号',
    dataIndex: 'id',
    key: 'id',
    scopedSlots: { customRender: '序号' },
  },
  {
    title: '所属栏目',
    dataIndex: 'name',
    key: 'name',
  },
  {
    title: '栏目名称',
    dataIndex: 'title',
    key: 'title 1',
    ellipsis: true,
  },
  {
    title: '是否推荐',
    dataIndex: 'isRecommend',
    key: 'isRecommend 2',
    ellipsis: true,
    scopedSlots: { customRender: 'isRecommend' },
  },
  {
    title: '状态',
    dataIndex: 'status',
    key: 'status 3',
    ellipsis: true,
    scopedSlots: { customRender: 'status' },
  },
  {
    title: '创建时间',
    dataIndex: 'created',
    key: 'created 4',
    ellipsis: true,
  },
  {
    title: '操作',
    dataIndex: 'action',
    key: 'action 5',
    scopedSlots: { customRender: 'action' },

    ellipsis: true,
  },
];
import moment from 'moment';
export default {
  data() {
    return {
      upData: { isRecommend: true, created: '2021-08-08', STATUS_OFF: '', 
      id: 0, title: '', parentId: '', STATUS_ON: '', status: '' },

      upData_see: false,
      index: '',
      i: '',
      suoText: '',
      suosParentsId: '',
      stateChangebuttom: '',
      ii: '',
      dateFormat: 'YYYY/MM/DD',
      monthFormat: 'YYYY/MM',
      //   data,
      columns,
      data: [],
      columnsAllList: [],
      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.columnsAll2();
  },
  methods: {
    moment,
    // 获得所有栏目
    async columnsAll2() {
      let reqData = {};
      let getListUrl = `/section/list`;
      let result = await this.axios.get(getListUrl, reqData);
      this.columnsAllList = result.data.data;
      console.log(result);
    },
    // 搜索内容
    async suos() {
      let reqData = { sectionParentsId: this.suosParentsId, startTime: '2021-08-08', endTime: '2022-08-08', title: this.suoText };
      let reqParam = { pageNumber: '0', pageSize: '0' };
      let searchUrl = `/section/search/${reqParam.pageNumber}/${reqParam.pageSize}`;
      let result = await this.axios.post(searchUrl, reqData);
      this.data = result.data.data;
      console.log(result);
      this.qk();
    },
    onChange(dates, dateStrings) {
      console.log('From: ', dates[0], ', to: ', dates[1]);
      console.log('From: ', dateStrings[0], ', to: ', dateStrings[1]);
    },

    // 推荐的变化
    switchTuiJian(record) {
      record.isRecommend = !record.isRecommend;
      this.upData = record;
      this.upDataok();
    },

    // 状态的变化
    stateChange(record) {
      if (record.status == '禁用') {
        record.status = '启用';
      console.log( record.status);

      } else {
        record.status = '禁用';
      console.log( record.status);

      }
      this.upData = record;
      this.upDataok();
    },

    /**分页 */
    handleTableChange(pagination, filters, sorter) {
      this.pagination = pagination; //保存分页信息
      this.loadList(); //重新读取文章列表
    },
    //
    async newAdd() {
      let reqData = this.addData;
      let saveUrl = `/section/save`;
      let result = await this.axios.post(saveUrl, reqData);
      console.log(result);
      alert('添加成功');
    },

    // 获取表单所有信息
    async loadList() {
      let reqData = { sectionParentsId: '', startTime: '2021-08-08', endTime: '2022-08-08', title: '' };
      let reqParam = { pageNumber: '0', pageSize: '0' };
      let searchUrl = `/section/search/${reqParam.pageNumber}/${reqParam.pageSize}`;
      let result = await this.axios.post(searchUrl, reqData);
      this.data = result.data.data;

      console.log(result);
    },

    // 删除
    async del(i) {
      let reqData = {};
      let reqParam = { id: i.id };
      let deleteUrl = `/section/delete/${reqParam.id}`;
      let result = await this.axios.delete(deleteUrl, reqData);
      console.log(result);
      alert('恭喜你，删除成功！');
      this.loadList();
    },
    switchStatus() {},
    showModal() {
      this.addnew = true;
    },
    handleOk(e) {
      console.log(e);
      this.newAdd();
      this.addnew = false;
      this.loadList();
    },

    // 显示修改模态框
    updataModel(record) {
      this.upData = record;
      this.upData_see = true;
      this.upDataok();
    },

 
    // 修改数据
    async upDataok() {
      let reqData = this.upData;
      let updateUrl = `/section/update`;
      let result = await this.axios.post(updateUrl, reqData);
      this.loadList();
      console.log(result);
    },

   // 完成数据修改，模态框隐藏
    upDatahandleOk() {
      this.upDataok();
      this.upData_see = false;
    },

    // 取消修改
    upDatacancel() {
      this.upData_see = false;
    },
    // 清空
    qk() {
      this.suoText = '';
      this.suosParentsId = '';
    },
  },
};
</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>

V_zcm

关注

0
点赞
踩
0

收藏

觉得还不错? 一键收藏
0
评论
Ant desgin-08 状态和推荐按钮的传输

本节：1.表格  <span slot="isRecommend" slot-scope="text, record"> <div> <a-switch @change="switchTuiJian(record)" :checked="text" /> </div>
复制链接

扫一扫