vant 列表【增删改查】 和 表单

vant 列表【增删改查】 和 表单

1.列表

<!--  -->
<template>
  <div class="container" style="background-color: #ddd">
    <van-nav-bar title="测试标题"
                 left-text="返回"
                 left-arrow
                 @click-left="onClickLeft"
                 class="title"
                 fixed
                 :placeholder="isFixedHeight"
    />

    <van-pull-refresh v-model="refreshing" @refresh="onRefresh">
      <van-list
          v-model="loading"
          :finished="finished"
          finished-text="没有更多了"
          @load="getList"
      >
        <div v-for="(item,index) in dataList" :key="index"
             style="margin-top: 10px;margin-left: 10px; margin-right: 10px" class=" itemList">


          <van-row

              gutter="10"
          >

            <van-col span="8">
              <van-image
                  width="100px"
                  height="80px"
                  :src="getCoverImage(item.newsBanner)"
              />
            </van-col>

            <van-col span="16">

              <div class="news-right">
                <span class="van-multi-ellipsis--l3">{{ item.newsTitle }}</span>


                <span class="van-ellipsis">{{ item.createTime }}</span>
              </div>

            </van-col>
          </van-row>

          <div class="doItem">

            <van-button type="primary" size="mini" @click.native="handleAdd()">新增</van-button>
            <van-button type="info" size="mini" @click.native="handleUpdate(item.newsId)">修改</van-button>
            <van-button type="warning" size="mini" @click.native="handleDelete(item.newsId,index)">删除</van-button>


          </div>

        </div>

      </van-list>

    </van-pull-refresh>


  </div>
</template>

<script>

import {
  listNews, delNews
} from "@/api/business/news/news.js";
import {Toast} from "vant";

export default {
  name: 'Test',
  data() {

    return {
      isFixedHeight: true,

      refreshing: false,
      loading: false,
      finished: false,
      dataList: [],
      // 查询参数
      queryParams: {
        pageNum: 1,
        pageSize: 10,
        newsTitle: undefined,
        newsType: undefined,
        status: undefined
      },
    };
  },


  methods: {
    getCoverImage(res) {
      return process.env.VUE_APP_BASE_API + res
    },
    onClickLeft() {
      //返回上一页
      this.$router.go(-1)
    },
    getList() {

      listNews(this.queryParams).then(response => {
        if (this.refreshing) {
          this.dataList = [];
          this.refreshing = false;
        }
        // 加载状态结束
        this.loading = false;
        this.dataList = this.dataList.concat(response.rows);//追加数据
        this.finished = !response.hasNext;
        this.queryParams.pageNum += 1;//页数+1
      });
    },
    onRefresh() {
      this.queryParams.pageNum = 1
      // 清空列表数据
      this.dataList = []
      this.finished = false;
      // 重新加载数据
      // 将 loading 设置为 true，表示处于加载状态
      this.loading = true;
      this.getList();
    },


    /** 新增按钮操作 */
    handleAdd() {
      this.$router.push({path: '/form/', query: {id: '0', type: '1'}})
    },

    /** 编辑按钮操作 */
    handleUpdate(id) {
      this.$router.push({path: '/form/', query: {id: id, type: '3'}})
    },

    handleDelete(id, index) {
      this.Dialog.confirm({
        title: '提醒',
        message: '是否删除当前新闻？',
      }).then(() => {
        return delNews(id);
      }).then(() => {
        // this.onRefresh();
        this.dataList.splice(index, 1)
        Toast("删除成功");
      });
    }

  },

  created() {
    // this.getList();
  }

}
</script>
<style scoped>
.container {
  width: 100%;
  height: 100%;
}

.itemList {
  margin: 10px;
  background-color: #ffffff;
  padding: 10px;
  border-radius: 5px;
}

.doItem {
  display: flex;
  flex-direction: row;
  justify-content: space-around;
}

.news-right {
  display: flex;
  flex-direction: column;
  justify-content: space-between;
}
</style>

2.表单

<!--  -->
<template>
  <div class=''>
    <van-nav-bar title="表单提交"
                 left-text="返回"
                 left-arrow
                 @click-left="onClickLeft"
                 class="title"
                 fixed
                 :placeholder="isFixedHeight"

    />


    <van-form>

      <van-field
          v-model="form.newsTitle"
          name="新闻标题"
          label="新闻标题"
          placeholder="请输入新闻标题"
      />
      <van-field
          type="textarea"
          v-model="form.newsDesc"
          name="新闻描述"
          label="新闻描述"
          placeholder="请输入新闻描述"
      />

      <van-field name="switch" label="新闻状态">
        <template #input>
          <van-switch :value="switchChecked" size="20" @input="switchChange"/>
        </template>
      </van-field>


      <van-field
          readonly
          clickable
          name="picker"
          :value="value"
          :formatter="newsTypeFormat"
          label="新闻类型"
          placeholder="点击选择新闻类型"
          @click="showPicker = true"
      />
      <van-popup v-model="showPicker" position="bottom">
        <van-picker
            show-toolbar
            :columns="newsTypeOptions"
            @confirm="onConfirm"
            @cancel="showPicker = false"
        />
      </van-popup>


      <van-field name="uploader" label="新闻标图">
        <template #input>
          <van-uploader v-model="coverFileList" multiple :max-count="1" :after-read="onRead" @delete="handleRemove"/>
        </template>
      </van-field>

      <van-field name="uploader2" label="新闻图集">
        <template #input>
          <van-uploader v-model="fileListShow" multiple :max-count="100" :after-read="onReads" @delete="handleRemoves"/>
        </template>
      </van-field>


      <div style="margin: 16px;">
        <van-button round block type="info" native-type="submit" @click.native="submitForm">提交</van-button>
      </div>

    </van-form>


  </div>
</template>

<script>

import {
  getDicts, uploadCoverImage, addNews, getNews, updateNews
} from "@/api/business/news/news.js";

import {Toast} from "vant";
// import {
//   getNews,
//   addNews,
//   updateNews
// } from "@/api/business/news/news.js";
export default {
  name: 'Form',
  data() {

    return {
      isFixedHeight: true,
      value: '',
      showPicker: false,
      // 新闻类型数据字典
      newsTypeOptions: [],
      newsTypeOptions2: [],
      switchChecked: true,
      coverFileList: [],
      fileListShow: [],
      //页面上存的暂时图片地址List
      fileListPut: [],
      form: {}
    };
  },


  methods: {
    //返回键
    onClickLeft() {
      this.$router.go(-1)
    }
    ,
    getNewsType() {
      getDicts("business_news_type").then(response => {
        this.newsTypeOptions2 = response.data
        this.newsTypeOptions = response.data.map(item => {
          const classCode = item.dictValue;
          const text = item.dictLabel;
          return {
            text,        //必须用text变量表示选择器中的选项，其他的没有要求
            classCode
          };
        });

      });
    }
    ,
    //新闻状态
    switchChange(checked) {
      this.Dialog.confirm({
        title: '提醒',
        message: '是否切换新闻状态？',
      }).then(() => {
        this.switchChecked = checked;
      });
    },

    onConfirm(value) {
      this.value = value.text;
      this.form.newsType = value.classCode
      this.showPicker = false;
      console.log("类型", this.form.newsType)
    }
    ,
    // eslint-disable-next-line no-unused-vars
    // 组件方法 获取 流
    // eslint-disable-next-line no-unused-vars
    onRead(file) {
      let fd = new FormData()
      fd.append('file', file.file)

      uploadCoverImage(fd).then(response => {
        this.form.newsBanner = response.imgUrl
      });
    },
    onReads(file) {
      let fd = new FormData()
      fd.append('file', file.file)

      uploadCoverImage(fd).then(response => {
        //设置图片访问路径
        const imgObjectUrl = process.env.VUE_APP_BASE_API + response.imgUrl;
        // const imgObjectUrl = res.imgUrl;
        //这是每个成功上传图片，以对象的形式保存在一个数组中，进而以JSON格式保存在数据库中某个字段里
        let currentFile = {name: '', url: ''};
        currentFile.name = file.name;
        currentFile.url = imgObjectUrl;
        //往此数组中保存当前图片对象
        this.fileListPut.push(currentFile);

      });
    },
    //删除照片
    handleRemove() {
      this.coverFileList = [];
      this.form.newsBanner = ''
    },
    //删除照片
    handleRemoves(event) {
      //根据传进来删除的file里图片，同时删除保存在fileListPut的相同图片
      if (this.fileListPut.length > 0) {
        // eslint-disable-next-line no-unused-vars
        this.fileListPut = this.fileListPut.filter((item, index) => {
          return item.url !== event.url;
        })
      }
    },
    newsTypeFormat(name) {
      return this.selectDictLabel(this.newsTypeOptions2, name);
    },
    getDetails(id) {
      getNews(id).then(response => {
        this.form = response.data;
        this.value = this.newsTypeFormat(this.form.newsType);

        this.switchChecked = this.form.status === '0';

        if (this.form.newsBanner) {
          this.coverFileList.push({name: 1, url: process.env.VUE_APP_BASE_API + this.form.newsBanner})
        }
        // console.log(this.form.newsFiles)
        //修改图片集合
        if (this.form.newsFiles !== '') {
          this.fileListShow = JSON.parse(this.form.newsFiles)
          this.fileListPut = JSON.parse(this.form.newsFiles);
        }
      });
    },
    submitForm() {
      if (this.switchChecked) {
        this.form.status = '0'
      } else {
        this.form.status = '1'
      }
      this.form.newsFiles = JSON.stringify(this.fileListPut);
      if (this.form.newsId !== undefined) {
        // eslint-disable-next-line no-unused-vars
        updateNews(this.form).then(response => {
          Toast("修改成功");
          this.$router.go(-1)
        });
      } else {
        // eslint-disable-next-line no-unused-vars
        addNews(this.form).then(response => {
          Toast("新增成功");
          this.$router.go(-1)
        });
      }

    }
  }
  ,

  created() {
    const newsId = this.$route.query && this.$route.query.id;
    const type = this.$route.query && this.$route.query.type;
    this.getNewsType()

    if (type === '3') {

      this.getDetails(newsId);

    }

  }

}
</script>
<style scoped>

</style>