更多
恢复
2018年03月13日 10点14分 miloshu 入门

项目需求:  点击多选框选中某个或多个用户id,再点击批量定制按钮将选中好的用户id发送给后台服务器, 发送成功则显示右边的已成功定制按钮图标; 不做其他要求.

遇到的问题:我现在是功能已实现,但刷新页面或者点击下一页,或切换页面后图标就丢失了  之前考虑用localstorage应该是逻辑没做好, 然后直接通过更改后台数据怎么实现呢   图标是一个布尔值来控制显示隐藏的 , 后台接口格式参照图片, 可以通过传递一个flag参数到后台去控制图标是否显示但我下面的数据结构不知道怎么实现

html模板所有代码:


<template >
  <div id="userlist">
    <!--<el-input placeholder="请输入内容" v-model="keyword" style="padding-bottom:10px; width:25%">-->
      <!--<el-button slot="append" icon="el-icon-search" v-on:click="search"></el-button>-->
    <!--</el-input>-->
    <ele-table :tableData="filtertableData" v-on:listenToChildEvent="showMsgFromChild"  :tableconfig="tableconfig" :pagechange="pageChange" :totalnum="filtertotalnum" :pagesize="pagesize" :page-size="pagesize" :currentpage="currentpage" :loading="loading" :formatter="formatter">
      <el-table-column
       label="操作" class-name="operation" fixed="right">
      <template slot-scope="scope">
        <el-button @click="handleClick(scope.$index, scope.row)" type="text" size="small" >
          <el-tooltip class="item" effect="dark" content="编辑" placement="top">
            <i class="iconfont icon-shuxie"></i>
          </el-tooltip>
        </el-button>
        <el-button type="text" size="small" class="wenjuan active" v-if="scope.row.isShowCustomizationButton">
          <el-tooltip class="item" effect="dark" content="已定制问卷" placement="top">
            <i class="iconfont icon-wenjuandiaoyan"></i>
          </el-tooltip>
        </el-button>
        <!--<el-button type="danger" size="small" @click="handleDel(scope.$index, scope.row)">删除</el-button>-->
      </template>
      </el-table-column>
    </ele-table>
    <el-button class="batchMade" type="primary" @click="batchMade" :disabled="this.pidList.length===0"><i class="iconfont icon-wenjuandiaoyan"></i>&nbsp;{{msg}}</el-button>
  </div>
</template>


其中控制图标显示隐藏的代码
<el-button type="text" size="small" class="wenjuan active" v-if="scope.row.isShowCustomizationButton">
          <el-tooltip class="item" effect="dark" content="已定制问卷" placement="top">
            <i class="iconfont icon-wenjuandiaoyan"></i>
          </el-tooltip>
</el-button>
批量定制按钮代码
<el-button class="batchMade" type="primary" @click="batchMade" :disabled="this.pidList.length===0"><iclass="iconfont icon-wenjuandiaoyan"></i>&nbsp;批量定制</el-button>
js代码:


<script>
  import {mapState,mapGetters,mapMutations} from 'vuex'
  import {getuserlist, questionnaire} from '@services'
  import  C from '@consts'
  import {Coachlist_Userlist} from '@mixin'
  export default {
    mixins: [Coachlist_Userlist],
    data() {
      return {
        msg: '批量定制',
        keyword: '',
        idx: -1,
        pidList: [],
        userlist: [],
        clearSel: {},
        tableconfig:[
          {prop:'id',label:'ID',width:this.percent},
          {prop:'name',label:'姓名',width:this.percent},
          {prop:'phoneNum',label:'手机号',width:this.percent},
          {prop:'registerTime',label:'注册时间',width:this.percent},
          {prop:'updateTime',label:'活跃时间',width:this.percent}
        ],
        loading:true
      }
    },
    computed: {
      ...mapState({
        filterkey:state=>state.filterkey,
        currentpage:state=>state.module_userlist.currentpage
      }),
    },
    methods: {
      startInit(){
        this.getAllUsersInfo()
      },
      pageChange(currentPage){
        if(this.filterkey) return
        this.getAllUsersInfo(currentPage)
        this[C.USERLIST_PAGE_CHANGE_COMMIT](currentPage)
      },
      async getAllUsersInfo(pagenum=this.currentpage){ // 用户列表查询接口
        const res = await getuserlist({params:{currentPage:pagenum},loading:[this,'loading']})
        if(!res) return
        this.tableData=res.resultSet
        this.totalnum=res.count
        this.pagesize=res.pageSize
        console.log(res.resultSet)
      },
      showMsgFromChild(data){ //通过子组件传递过来是数据
        this.pidList = data[0]
        this.userlist = data[1]
        this.clearSel = data[2]
      },
      batchMade () {
          let ids = this.pidList.map(item => item).toString()
          // let flags = this.userlist.map(item => (item.isShowCustomizationButton)
          this.$confirm('确认定制选中记录吗?', '提示', {
            type: 'info'
          }).then(() => {
            this.loading = true;
            let para = {body: {personIds: ids}}
            questionnaire(para).then((res) => {
              setTimeout(() => {
                this.loading = false
              }, 100)
              if(res && res == 'Success') {
                this.$notify({
                  message: '定制问卷成功',
                  type: 'success',
                  duration: 4500,
                  position: 'bottom-right'
                })
              }
              for(let item of this.userlist) {
                item.isShowCustomizationButton = true  // 为true后图标显示
              }
              this.clearSel.clearSelection()
            })
          }).catch((err) => {
            this.$notify.error(err.toString())
          })
      },
      //搜索
      // search: function(){
      //   this.getAllUsersInfo(this.keyword, this.currentpage, this.pagesize);
      // },
      ...mapMutations([C.USERLIST_PAGE_CHANGE_COMMIT])
    },
  }
</script>



用户列表查询接口返回的数据如下:

修改

编程开发语言 操作系统 工具软件 VisualStudio vue elementUI axios 修改

应答 (下拉快捷留言)

知道“一起帮”的协助流程么?不要搞错哟:应答握手再远程……

(´・・)ノ(._.`)
还没有内容呢!等待求助被解决(酬谢/撤销)后,求助人或好心人总结……

2018年03月14日 20点59分 --- 第 7 楼 ---

--- 回复: ---

找 feifei 远程试试?
2018年03月14日 20点59分 --- 第 6 楼 ---

--- 回复: ---

那个接口有个boolean类型的可选参数flag: 默认true 说是传一个布尔值过去true显示false不显示

但是我这里不知道怎么搞

2018年03月14日 20点54分 --- 第 5 楼 ---

--- 回复: ---

没有搞定啊
2018年03月14日 18点07分 --- 第 4 楼 ---

1 、localStorage不靠谱

2、 让后台给你加一个字段来表示该条记录是否处理过(处理过显示图片,没处理不显示)

2018年03月14日 14点49分 --- 第 3 楼 ---
搞定了么?让凳子灬远程帮你看看啊……
2018年03月13日 13点13分 --- 第 2 楼 ---
那这watch里面该怎么写呢? 我之前页面的数组数据也是这样写的
2018年03月13日 12点37分 --- 第 1 楼 ---

你watch里面的操作有问题, 我感觉你里面会把之前保存好的数据清掉


你保存的时候, 应该把之前保存的数据也留着


关键字



反馈