vant2列表与动态表单

3 篇文章 0 订阅
//index.vue
<template>
  <div class="equi_container">
    <div style="text-align: center;background-color: #bdd2ff;min-height: 3.125rem;color: #fff;line-height: 3.125rem;">
      我的待办<span style="font-size: 10px;">{{'('+total+'条)'}}</span>
    </div>
      <van-search
        v-model="queryParams.search"
        show-action
        placeholder="请输入搜索关键词"
        @search="onSearch"
        @cancel="onCancel"
      />
    <van-pull-refresh v-if="gettokenflag" v-model="isLoading" @refresh="onRefresh" >

              <van-list
                style="height: 100%;"
                v-model="loading"
                :finished="finished"
                finished-text="- 没有更多了 -"
                @load="loadMore"
                :offset="130"
              >
              <div v-for="(item,index) in myList" @click="handleLink(item)">
             <van-cell  center :key="index" :title="item.flow_call.flow_call_title" >
               <template #title>
                  <span class="custom-title">{{item.flow_call.flow_call_title}}</span>
               </template>
               <div slot="label">
               <span class="sapncla">流水号:{{item.flow_call.run_serial_num}}</span>
               <span class="sapncla">发起人:{{item.flow_call.initiator}}</span>
               <!-- <span class="sapncla">当前步骤:{{item.current_node.node_name}}</span> -->
               </div>
               <!-- <div slot="extra">创建时间:{{item.create_time}}</div> -->
               </van-cell>
               <van-divider  dashed :style="{ color: '#a3b0fa', borderColor: '#a3b0fa', padding: '0 16px',margin: '0px' }"/>
               </div>
          </van-list>

        </van-pull-refresh>
       <div v-else style="text-align: center;padding: 100px;">
         <van-loading  type="spinner" color="#1989fa" size="30" >努力加载中...</van-loading>
       </div>
           <van-button
             color="rgba(0,0,0,.3)"
             round
             class="backTop"
             size="mini"
             @click="backTop"
             v-show="scrollType"
           >
             <van-icon class="icon-backTop" name="arrow-up" size="15" />
           </van-button>
  </div>
</template>

<script>
  import { getCodeImg, getWXInfo } from "@/api/vadmin/login";
  import {
    FinishhandleList
  } from "@/axios/workflow/handle";
  import { getToken } from "@/utils/auth";
  import store from '@/store'
  import {Notify,Loading,Divider,Search,Button,Icon   } from 'vant';
  export default {
    name: "quManger",
    components: {
      [Notify.name]: Notify,
      [Loading.name]: Loading,
      [Divider.name]: Divider,
      [Search.name]: Search,
      [Button.name]: Button,
      [Icon.name]: Icon
    },
    data() {
      return {
        page: 1,
        code: '',
        total: 0,
        loading: false, // 当loading为true时,转圈圈
        finished: true, // 数据是否请求结束,结束会先显示- 没有更多了 -
        myList:[],
        creatorid: null,
        Jobnumber: null,
        gettokenflag: false,
        scrollType:false,
        timerId: null,
        scrollTop: 0,
        queryParams: {
          page: 1,
          page_size: 20,
          // 流程类型id
          /* flow_call__flow: 22, */
          // 流程分类id(大类)
          flow_call__flow__flow_category: undefined,
          // 已读未读状态
          state: undefined,
          // 待办
          is_handled: false,
          search: undefined
        },
        comment_nums: 0,
        noData: false, // 如果没有数据,显示暂无数据
        isLoading:false, // 下拉的加载图案
        flage: false
      };
    },
    watch: {
    },
    created() {
      this.gettokenflag = false
      const mytoken = getToken()
      if(mytoken){
          /* this.getInfo() */
            FinishhandleList(this.queryParams).then(res=>{
              if(res.data.code===200){
                this.total = res.data.data.count
                this.loading = false;
                this.myList = this.myList.concat(res.data.data.results)
                 if (res.data.data.results.length == 0||res.data==null) {
                   //数据全部加载完成
                    this.finished = true;
                 }else{
                  this.finished = false;
                }
                this.gettokenflag = true
              }else{
                this.finished = true;
                this.gettokenflag = true
              }
            })
      }else{
        this.code = this.getQueryVariable('code')
        if(this.code){
          this.getStaffInfo(this.code)
        }else{
          Notify({ type: 'danger', message: '暂无权限' });
          //跳转失败页面
        }
      }
    },
    mounted() {
       window.addEventListener('scroll', this.handleScoll, true)
    },
    methods: {
      backTop () {
        /* document.body.scrollTop = 0 */
        console.log('this.scrollTop',document.documentElement.scrollTop,document.body.scrollTop)
           this.timerId = setInterval(() => {
              // 给返回增加动画效果
              const upSpeed = Math.floor(-this.scrollTop / 5)
              document.body.scrollTop = this.scrollTop + upSpeed
              document.documentElement.scrollTop = this.scrollTop + upSpeed
              if (this.scrollTop === 0) {
                clearInterval(this.timerId)
              }
            }, 30)
          },
      	handleScoll (ev) {
          console.log(window.pageYOffset)
      	      // 当滚动的距离大于700 时出现该按钮
      	      this.scrollTop = window.pageYOffset
      	      if (window.pageYOffset / 100 > 7) {
      	        this.scrollType = true
      	      } else {
      	        this.scrollType = false
      	      }
      	    },
      resetAction(){
        this.queryParams.page = 1
/*        this.gettokenflag = false */
        this.total = 0
        this.loading = false
        this.finished = true
        this.myList = []
      },
      onSearch(){
        this.resetAction()
        this.getInfo()
      },
      onCancel(){
        this.resetAction()
        this.getInfo()
      },
      loadMore(){
        this.queryParams.page++
        this.getInfo()
      },
      handleLink(row){
        this.$router.push({
          path: "/mobileflowdetail",
          query: {
            rowall: row,
            current_node: row.current_node.node_id,
            flowrow: row.flow_call,
            flow: row.flow_call.flow,
            flow_call: row.flow_call.flow_call_id,
            creatorid: this.$store.getters.userid,
            creatuser: row.flow_call.initiator,
            Jobnumber: this.$store.getters.username,
            nodeid: row.current_node.node_id,
            title: row.flow_call.flow_call_title,
            formtitle: row.flow_call.flow.form.form_name,
            fromWhere: 'daiban'
          }
        });
      },
        getStaffInfo(code){
          getWXInfo(code).then((res)=>{
            this.$store.dispatch('saveTokenWx',res.data.token)
            location.reload()
          })
        },
        getQueryVariable(variable){
       let query = window.location.search.substring(1)

       const vars = query.split('&')
        for (let i=0; i<vars.length; i++){
        const pair = vars[i].split('=')
        if(pair[0] ===variable){
        return pair[1]
         }
        }
       if(vars.length ===1&&vars[0] === ' '){
        return ''
        }
       return vars
       },
        onClick(row){
/*          this.$store.dispatch('saveQuestionIdTi', row.id)
          setTimeout(()=>{
            this.$router.replace({path:'/questionnaire'})
          },1000) */
         /* this.$router.push({path:'/questionnaire',query:{row}}) */
        },
          getInfo () {
            FinishhandleList(this.queryParams).then(res=>{
              if(res.data.code===200){
                this.total = res.data.data.count
                this.loading = false;
                this.myList = this.myList.concat(res.data.data.results)
                 if (res.data.data.results.length == 0||res.data==null) {
                   //数据全部加载完成
                    this.finished = true;
                 }else{
                  this.finished = false;
                }
              }else{
                this.finished = true;
              }
            })
          },
    onRefresh () {
        // 重新初始化这些属性
        this.queryParams.page = 1,
        this.myList = []
        this.finished = false
        this.isLoading = false
        /* this.loading = true */
        this.noData = false
        // 请求信息
        this.getInfo()
    }
    }
  };
</script>

<style lang="less" scoped>
  .equi_container{
    overflow: auto;
    ::v-deep .van-pull-refresh {
      height: calc(100vh - 100px) !important;
      overflow: auto !important;
    }
    ::v-deep .van-list { height: auto !important; }
  }
 .backTop {
    position: fixed;
    bottom: 1.25rem;
    right: 1.875rem;
    z-index: 999;
    border: none;
  }
  .sapncla{
    padding-right: 0.625rem;
  }
</style>

//mobileflowdetail.vue
<template>
  <div class="equi_container">
    <div style="text-align: center;background-color: #bdd2ff;min-height: 3.125rem;color: #fff;line-height: 3.125rem;">
      我的待办<span style="font-size: 10px;">{{'('+total+'条)'}}</span>
    </div>
      <van-search
        v-model="queryParams.search"
        show-action
        placeholder="请输入搜索关键词"
        @search="onSearch"
        @cancel="onCancel"
      />
    <van-pull-refresh v-if="gettokenflag" v-model="isLoading" @refresh="onRefresh" >

              <van-list
                style="height: 100%;"
                v-model="loading"
                :finished="finished"
                finished-text="- 没有更多了 -"
                @load="loadMore"
                :offset="130"
              >
              <div v-for="(item,index) in myList" @click="handleLink(item)">
             <van-cell  center :key="index" :title="item.flow_call.flow_call_title" >
               <template #title>
                  <span class="custom-title">{{item.flow_call.flow_call_title}}</span>
               </template>
               <div slot="label">
               <span class="sapncla">流水号:{{item.flow_call.run_serial_num}}</span>
               <span class="sapncla">发起人:{{item.flow_call.initiator}}</span>
               <!-- <span class="sapncla">当前步骤:{{item.current_node.node_name}}</span> -->
               </div>
               <!-- <div slot="extra">创建时间:{{item.create_time}}</div> -->
               </van-cell>
               <van-divider  dashed :style="{ color: '#a3b0fa', borderColor: '#a3b0fa', padding: '0 16px',margin: '0px' }"/>
               </div>
          </van-list>

        </van-pull-refresh>
       <div v-else style="text-align: center;padding: 100px;">
         <van-loading  type="spinner" color="#1989fa" size="30" >努力加载中...</van-loading>
       </div>
           <van-button
             color="rgba(0,0,0,.3)"
             round
             class="backTop"
             size="mini"
             @click="backTop"
             v-show="scrollType"
           >
             <van-icon class="icon-backTop" name="arrow-up" size="15" />
           </van-button>
  </div>
</template>

<script>
  import { getCodeImg, getWXInfo } from "@/api/vadmin/login";
  import {
    FinishhandleList
  } from "@/axios/workflow/handle";
  import { getToken } from "@/utils/auth";
  import store from '@/store'
  import {Notify,Loading,Divider,Search,Button,Icon   } from 'vant';
  export default {
    name: "quManger",
    components: {
      [Notify.name]: Notify,
      [Loading.name]: Loading,
      [Divider.name]: Divider,
      [Search.name]: Search,
      [Button.name]: Button,
      [Icon.name]: Icon
    },
    data() {
      return {
        page: 1,
        code: '',
        total: 0,
        loading: false, // 当loading为true时,转圈圈
        finished: true, // 数据是否请求结束,结束会先显示- 没有更多了 -
        myList:[],
        creatorid: null,
        Jobnumber: null,
        gettokenflag: false,
        scrollType:false,
        timerId: null,
        scrollTop: 0,
        queryParams: {
          page: 1,
          page_size: 20,
          // 流程类型id
          /* flow_call__flow: 22, */
          // 流程分类id(大类)
          flow_call__flow__flow_category: undefined,
          // 已读未读状态
          state: undefined,
          // 待办
          is_handled: false,
          search: undefined
        },
        comment_nums: 0,
        noData: false, // 如果没有数据,显示暂无数据
        isLoading:false, // 下拉的加载图案
        flage: false
      };
    },
    watch: {
    },
    created() {
      this.gettokenflag = false
      const mytoken = getToken()
      if(mytoken){
          /* this.getInfo() */
            FinishhandleList(this.queryParams).then(res=>{
              if(res.data.code===200){
                this.total = res.data.data.count
                this.loading = false;
                this.myList = this.myList.concat(res.data.data.results)
                 if (res.data.data.results.length == 0||res.data==null) {
                   //数据全部加载完成
                    this.finished = true;
                 }else{
                  this.finished = false;
                }
                this.gettokenflag = true
              }else{
                this.finished = true;
                this.gettokenflag = true
              }
            })
      }else{
        this.code = this.getQueryVariable('code')
        if(this.code){
          this.getStaffInfo(this.code)
        }else{
          Notify({ type: 'danger', message: '暂无权限' });
          //跳转失败页面
        }
      }
    },
    mounted() {
       window.addEventListener('scroll', this.handleScoll, true)
    },
    methods: {
      backTop () {
        /* document.body.scrollTop = 0 */
        console.log('this.scrollTop',document.documentElement.scrollTop,document.body.scrollTop)
           this.timerId = setInterval(() => {
              // 给返回增加动画效果
              const upSpeed = Math.floor(-this.scrollTop / 5)
              document.body.scrollTop = this.scrollTop + upSpeed
              document.documentElement.scrollTop = this.scrollTop + upSpeed
              if (this.scrollTop === 0) {
                clearInterval(this.timerId)
              }
            }, 30)
          },
      	handleScoll (ev) {
          console.log(window.pageYOffset)
      	      // 当滚动的距离大于700 时出现该按钮
      	      this.scrollTop = window.pageYOffset
      	      if (window.pageYOffset / 100 > 7) {
      	        this.scrollType = true
      	      } else {
      	        this.scrollType = false
      	      }
      	    },
      resetAction(){
        this.queryParams.page = 1
/*        this.gettokenflag = false */
        this.total = 0
        this.loading = false
        this.finished = true
        this.myList = []
      },
      onSearch(){
        this.resetAction()
        this.getInfo()
      },
      onCancel(){
        this.resetAction()
        this.getInfo()
      },
      loadMore(){
        this.queryParams.page++
        this.getInfo()
      },
      handleLink(row){
        this.$router.push({
          path: "/mobileflowdetail",
          query: {
            rowall: row,
            current_node: row.current_node.node_id,
            flowrow: row.flow_call,
            flow: row.flow_call.flow,
            flow_call: row.flow_call.flow_call_id,
            creatorid: this.$store.getters.userid,
            creatuser: row.flow_call.initiator,
            Jobnumber: this.$store.getters.username,
            nodeid: row.current_node.node_id,
            title: row.flow_call.flow_call_title,
            formtitle: row.flow_call.flow.form.form_name,
            fromWhere: 'daiban'
          }
        });
      },
        getStaffInfo(code){
          getWXInfo(code).then((res)=>{
            this.$store.dispatch('saveTokenWx',res.data.token)
            location.reload()
          })
        },
        getQueryVariable(variable){
       let query = window.location.search.substring(1)

       const vars = query.split('&')
        for (let i=0; i<vars.length; i++){
        const pair = vars[i].split('=')
        if(pair[0] ===variable){
        return pair[1]
         }
        }
       if(vars.length ===1&&vars[0] === ' '){
        return ''
        }
       return vars
       },
        onClick(row){
/*          this.$store.dispatch('saveQuestionIdTi', row.id)
          setTimeout(()=>{
            this.$router.replace({path:'/questionnaire'})
          },1000) */
         /* this.$router.push({path:'/questionnaire',query:{row}}) */
        },
          getInfo () {
            FinishhandleList(this.queryParams).then(res=>{
              if(res.data.code===200){
                this.total = res.data.data.count
                this.loading = false;
                this.myList = this.myList.concat(res.data.data.results)
                 if (res.data.data.results.length == 0||res.data==null) {
                   //数据全部加载完成
                    this.finished = true;
                 }else{
                  this.finished = false;
                }
              }else{
                this.finished = true;
              }
            })
          },
    onRefresh () {
        // 重新初始化这些属性
        this.queryParams.page = 1,
        this.myList = []
        this.finished = false
        this.isLoading = false
        /* this.loading = true */
        this.noData = false
        // 请求信息
        this.getInfo()
    }
    }
  };
</script>

<style lang="less" scoped>
  .equi_container{
    overflow: auto;
    ::v-deep .van-pull-refresh {
      height: calc(100vh - 100px) !important;
      overflow: auto !important;
    }
    ::v-deep .van-list { height: auto !important; }
  }
 .backTop {
    position: fixed;
    bottom: 1.25rem;
    right: 1.875rem;
    z-index: 999;
    border: none;
  }
  .sapncla{
    padding-right: 0.625rem;
  }
</style>

//TableVant.vue
<template>
  <div class="vant-table">

    <table cellspacing="0"   class="table">
      <tr>
        <th class="th" v-for="(item, index) in optionCom" :key="index">{{ item.label_name }}</th>
      </tr>
      <tr v-if="tableDataCom.length>0" v-for="(item, index) in tableDataCom" :key="index" class="list-tr">
        <td  v-for="(context, i)  in optionCom" :key="i" class="list-td">{{ item[context.labe_code] }}</td>
      </tr>
      <tr v-if="tableDataCom.length>0" class="list-tr">
        <th  v-for="(item, index) in totalData" :key="index" class="list-td">{{item.total}}</th>
      </tr>
    </table>
  </div>
</template>
<script>
export default {
  name:'TableVant',
  props:{
    tableData:{
      type: Object,
      default: ()=>{}
    },
    option:{
      type: Array,
      default: ()=>[]
    },
    issummery:{
      type: Boolean,
      default: false
    }
  },
  data() {
    return {
      tableDataCom: [],
      optionCom: [],
      totalData: []
    }
  },
  created() {
    this.optionCom = this.option
    if(this.tableData){
      this.tableData.tableData.forEach(it=>{
        let boj = {}
        it.data.forEach(its=>{
          if(its.field_label_code.indexOf('_id')!==-1){
             this.$set(boj,its.field_label_code,its.line_sort)
          }else{
             this.$set(boj,its.field_label_code,its.field_content)
          }
        })
        this.tableDataCom.push(boj)
      })
    }
    this.optionCom.forEach(ite=>{
      //只和计数字类型
      if(ite.type==='number'){
       let total = this.tableDataCom.reduce((total, currentValue) => total + parseFloat(currentValue[ite.labe_code]), 0)
        this.totalData.push({
          labe_code: ite.labe_code,
          label_name: ite.label_name,
          total: total
        })
      }else if(ite.type==='_id'){
        ite.label_name = '序号'
        this.totalData.push({
          labe_code: ite.labe_code,
          label_name: ite.label_name,
          total: '合计'
        })
      }else{
        this.totalData.push({
          labe_code: ite.labe_code,
          label_name: ite.label_name,
          total: ''
        })
      }
    })
  }
};
</script>

<style  scoped>

.table {
  border-radius: .185185rem;
}
.th {
  /* border: 0.5px solid #ecebff!important; */
  height: 2.5rem;
  line-height: 1.5rem;
  background-color: #cdceff;
  text-align: center;
  color: #646566;
  font-size: 0.875rem;
  padding: 0.625rem;
}
.list-td{
   border: 0.2px dashed #b8b5ff;
}
.list-tr {
  height: 1.875rem;
  line-height: 1.074074rem;
  font-size: 0.5625rem;
}
.list-tr:nth-child(2n) {
  background-color: #ebedff;
}

td {
  text-align: center;
}
</style>

  • 0
    点赞
  • 3
    收藏
    觉得还不错? 一键收藏
  • 0
    评论
Vue2和Vant2都提供了一些常用的表单验证方法,可以轻松地实现表单提交前的验证。以下是一个简单的示例,展示如何使用Vue2和Vant2来实现表单提交前的验证: 1. 在Vue组件中定义表单数据和验证规则: ``` data() { return { formData: { username: '', password: '' }, rules: { username: [ { required: true, message: '请输入用户名', trigger: 'blur' }, { min: 3, max: 10, message: '用户名长度为3-10个字符', trigger: 'blur' } ], password: [ { required: true, message: '请输入密码', trigger: 'blur' }, { min: 6, max: 20, message: '密码长度为6-20个字符', trigger: 'blur' } ] } } } ``` 2. 在Vue模板中绑定表单数据和验证规则,并使用Vant2组件渲染表单元素: ``` <van-form v-model="formData" :rules="rules" > <van-field v-model="formData.username" name="username" label="用户名" placeholder="请输入用户名" autocomplete="off" clearable /> <van-field v-model="formData.password" name="password" label="密码" placeholder="请输入密码" type="password" autocomplete="off" clearable /> </van-form> ``` 3. 在Vue组件中定义表单提交方法,并在该方法中调用Vant2的`validate`方法进行表单验证: ``` methods: { onSubmit() { this.$refs.form.validate(valid => { if (valid) { // 表单验证通过,执行表单提交操作 // ... } else { // 表单验证不通过,给出提示信息 Toast('请填写正确的信息') } }) } } ``` 以上就是一个简单的Vue2 + Vant2表单提交验证的示例。需要注意的是,Vant2的`<van-form>`组件和`<van-field>`组件都提供了大量的属性和事件,可以根据实际需求进行灵活配置和使用。

“相关推荐”对你有帮助么?

  • 非常没帮助
  • 没帮助
  • 一般
  • 有帮助
  • 非常有帮助
提交
评论
添加红包

请填写红包祝福语或标题

红包个数最小为10个

红包金额最低5元

当前余额3.43前往充值 >
需支付:10.00
成就一亿技术人!
领取后你会自动成为博主和红包主的粉丝 规则
hope_wisdom
发出的红包
实付
使用余额支付
点击重新获取
扫码支付
钱包余额 0

抵扣说明:

1.余额是钱包充值的虚拟货币,按照1:1的比例进行支付金额的抵扣。
2.余额无法直接购买下载,可以购买VIP、付费专栏及课程。

余额充值