获取验证码功能

yaolonglong

3 天以前 b5f084460e9e639358fbf91056a86be8d0a5c4b2

 policy/translate/translate.vue

@@ -1,262 +1,261 @@
<template>
  <view class="page-box">
    <view class="list">
      <view class="select-box" @click="setIsSelect(index)" v-for="(item,index) in list" :key="index"
        :class="{start: isJudege}">
        <view class="select-image" v-if="isJudege">
          <image src="/static/policy/checkbox.png" mode="widthFix" v-show="item.isSelect"></image>
          <image src="/static/policy/none-checkbox.png" mode="widthFix" v-show="!item.isSelect"></image>
        </view>
        <view class="list-item">
          <view class="top-title">
            <text>{{item.enforceReason}}</text>
            <text class="status">待审批</text>
          </view>
          <view class="user-info">
            <text>{{item.applyUser}}</text>
            <!--    <view class="driver"></view>
                  <text>{{item.checkDeptName}}</text> -->
          </view>
          <view class="user-info">
            <!-- <text>{{item.applyUser}}</text>
                  <view class="driver"></view> -->
            <text>{{item.checkDeptName}}</text>
          </view>
          <view class="set-line">
            <text>执法对象：</text>{{item.companyName}}
          </view>

          <view class="line"></view>
          <view class="set-flex set-start set-flex-content-between">
            <view style="width: 75%;">
              <view class="set-line1">
                <text>执法时间：</text>{{item.planTime}}
              </view>
              <view class="set-line1">
                <text>申请时间：</text>{{item.applyTime}}
              </view>
              <view class="look" v-if="item.show">
                <view class="set-line">
                  <text>执法主题：</text>{{item.enforceReason}}
                </view>
                <view class="set-line">
                  <text>检查方式：</text>{{handlerType(item.enforceType)}}
                </view>
                <view class="set-line set-line-flex">
                  <text>执法内容：</text>
                  <view>{{item.enforceContent}}</view>
                </view>
              </view>

            </view>
            <view class="button" v-if="!isJudege" @click.self="goStartJudeg([item.orderId])">
              审批
            </view>
          </view>
          <view @click="showItem(item)" class="icon"
            style="text-align: center;display: flex;justify-content: center;align-items: center;">
            <u-icon name="arrow-down" color="#bfbfbf" size="20" v-if="!item.show"></u-icon>
            <u-icon name="arrow-up" color="#bfbfbf" size="20" v-else></u-icon>
          </view>
        </view>
      </view>
      <u-empty v-if="!list.length" style="margin-top: 200rpx;"></u-empty>
    </view>
    <view class="down" v-if="!isJudege">
      <view class="button" @click="goRecord">审批记录</view>
      <view class="button more-options" @click="moreJudeg">批量审批</view>
    </view>
    <view class="down judge" v-else>
      <view class="select-image" @click="allSelect()">
        <image src="/static/policy/checkbox.png" mode="widthFix" v-show="isAllSelect"></image>
        <image src="/static/policy/none-checkbox.png" mode="widthFix" v-show="!isAllSelect"></image>
        <view class="show-check">全选</view>
      </view>
      <view class="button more-options start-option" @click="moreStart">立即审批</view>
    </view>
    <popupCom ref="popup" @entery="entery" @cancel="cancelSelect"></popupCom>
  </view>
</template>

<script>
  import popupCom from '@/policy/components/popup.vue'
  import {
    checkLogList,
    checkUpd
  } from '@/api/policy.js'
  import {
    getDicts
  } from '@/api/data.js'
  export default {
    components: {
      popupCom
    },
    data() {
      return {
        isJudege: false,
        list: [

        ],
        total: 1,
        queryms: {
          pageNum: 1,
          pageSize: 10,
          orderStatus: 1,
          isAsc: "desc",
          orderByColumn: "apply_time"
        },
        recordList: [],
        typeList: []
      }
    },
    computed: {
      isAllSelect() {
        if (this.list.length) {
          const value = this.list.every(item => item.isSelect)
          return value
        } else {
          return false
        }
      }
    },
    onLoad() {

      this.getDicts()
    },
    onReachBottom() {
      if (this.total == this.list.length) {
        return
      }
      this.queryms.pageNum++
      this.checkLogList()
    },
    methods: {
      showItem(item) {
        item.show = !item.show
      },
      handlerType(type) {
        const value = this.typeList.find(item => item.dictCode == type)
        if (value) {
          return value.dictLabel
        } else {
          return ''
        }
      },
      getDicts(type) {
        getDicts('enforce_type').then(val => {
          this.typeList = val.data.data
          this.checkLogList()
        })
      },
      goRecord() {
        uni.navigateTo({
          url: `/policy/translateRecord/translateRecord`
        })
      },
      click() {

      },
      goStartJudeg(id) {
        this.recordList = id
        this.$refs.popup.open()
      },
      // 批量审批
      moreJudeg() {
        if (!this.list.length) {
          return
        }
        this.isJudege = true
      },
      setIsSelect(index) {
        if (!this.isJudege) {
          return
        }
        this.list[index].isSelect = !this.list[index].isSelect
      },
      allSelect() {
        const value = this.isAllSelect
        this.list.map(item => item.isSelect = !value)
      },
      moreStart() {
        const value = this.list.some(item => item.isSelect)
        if (value) {
          const valueData = this.list.filter(item => item.isSelect).map(item => item.orderId)
          // console.log(valueData)
          this.goStartJudeg(valueData)
        } else {
          uni.showToast({
            title: '请选择审批',
            icon: 'none'
          })
        }
      },
      entery(form) {
        // 1企业审批，2执法单审批
        checkUpd({
          ...form,
          ids: this.recordList,
          checkType: 2
        }).then(val => {
          if (val.data.code == 200) {
            uni.showToast({
              title: '审批成功',
              icon: 'none'
            })
          }
          this.list = []
          this.queryms.pageNum = 1
          this.checkLogList()
          this.$refs.popup.close()
          this.isJudege = false
        })

      },
      cancelSelect() {
        this.isJudege = false
        this.list.map(item => item.isSelect = false)
      },
      checkLogList() {
        checkLogList(this.queryms).then(val => {
          val.data.rows.map(item => {
            item.isSelect = false
            item.show = false
          })
          this.list = [...this.list, ...val.data.rows]
          this.total = val.data.total
        })
      }
    }
  }
</script>
<style>
  page {
    background-color: #F4F4F4;
  }
</style>
<style lang="scss" scoped>
  @import "./translate.scss";

  ::v-deep .u-radio {
    margin-right: 84rpx !important;
  }

  ::v-deep .u-textarea {
    background-color: #F4F4F4 !important;
    border: none;
  }

  .set-line-flex {
    display: flex;
    justify-content: flex-start;
    align-items: flex-start;

    text {
      width: 28%;
      display: inline-block;
    }

    &>view {
      width: 70%;
    }
  }
<template>

  <view class="page-box">

    <view class="list">

      <view class="select-box" @click="setIsSelect(index)" v-for="(item,index) in list" :key="index"

        :class="{start: isJudege}">

        <view class="select-image" v-if="isJudege">

          <image src="/static/policy/checkbox.png" mode="widthFix" v-show="item.isSelect"></image>

          <image src="/static/policy/none-checkbox.png" mode="widthFix" v-show="!item.isSelect"></image>

        </view>

        <view class="list-item">

          <view class="top-title">

            <text>{{item.enforceReason}}</text>

            <text class="status">待审批</text>

          </view>

          <view class="user-info">

            <text>{{item.applyUser}}</text>

            <!--    <view class="driver"></view>

                  <text>{{item.checkDeptName}}</text> -->

          </view>

          <view class="user-info">

            <!-- <text>{{item.applyUser}}</text>

                  <view class="driver"></view> -->

            <text>{{item.checkDeptName}}</text>

          </view>

          <view class="set-line">

            <text>执法对象：</text>{{item.companyName}}

          </view>



          <view class="line"></view>

          <view class="set-flex set-start set-flex-content-between">

            <view style="width: 75%;">

              <view class="set-line1">

                <text>执法时间：</text>{{item.planTime}}

              </view>

              <view class="set-line1">

                <text>申请时间：</text>{{item.applyTime}}

              </view>

              <view class="look" v-if="item.show">

                <view class="set-line">

                  <text>执法主题：</text>{{item.enforceReason}}

                </view>

                <view class="set-line">

                  <text>检查方式：</text>{{handlerType(item.enforceType)}}

                </view>

                <view class="set-line set-line-flex">

                  <text>执法内容：</text>

                  <view>{{item.enforceContent}}</view>

                </view>

              </view>



            </view>

            <view class="button" v-if="!isJudege" @click.self="goStartJudeg([item.orderId])">

              审批

            </view>

          </view>

          <view @click="showItem(item)" class="icon"

            style="text-align: center;display: flex;justify-content: center;align-items: center;">

            <u-icon name="arrow-down" color="#bfbfbf" size="20" v-if="!item.show"></u-icon>

            <u-icon name="arrow-up" color="#bfbfbf" size="20" v-else></u-icon>

          </view>

        </view>

      </view>

      <u-empty v-if="!list.length" style="margin-top: 200rpx;"></u-empty>

    </view>

    <view class="down" v-if="!isJudege">

      <view class="button" @click="goRecord">审批记录</view>

      <view class="button more-options" @click="moreJudeg">批量审批</view>

    </view>

    <view class="down judge" v-else>

      <view class="select-image" @click="allSelect()">

        <image src="/static/policy/checkbox.png" mode="widthFix" v-show="isAllSelect"></image>

        <image src="/static/policy/none-checkbox.png" mode="widthFix" v-show="!isAllSelect"></image>

        <view class="show-check">全选</view>

      </view>

      <view class="button more-options start-option" @click="moreStart">立即审批</view>

    </view>

    <popupCom ref="popup" @entery="entery" @cancel="cancelSelect"></popupCom>

  </view>

</template>



<script>

  import popupCom from '@/policy/components/popup.vue'

  import {

    checkLogList,

    checkUpd

  } from '@/api/policy.js'

  import {

    getDicts

  } from '@/api/data.js'

  export default {

    components: {

      popupCom

    },

    data() {

      return {

        isJudege: false,

        list: [



        ],

        total: 1,

        queryms: {

          pageNum: 1,

          pageSize: 10,

          orderStatus: 1,

          isAsc: "desc",

          orderByColumn: "apply_time"

        },

        recordList: [],

        typeList: []

      }

    },

    computed: {

      isAllSelect() {

        if (this.list.length) {

          const value = this.list.every(item => item.isSelect)

          return value

        } else {

          return false

        }

      }

    },

    onLoad() {

      this.getDicts()

    },

    onReachBottom() {

      if (this.total <= this.list.length) {

        return

      }

      this.queryms.pageNum++

      this.checkLogList()

    },

    methods: {

      showItem(item) {

        item.show = !item.show

      },

      handlerType(type) {

        const value = this.typeList.find(item => item.dictCode == type)

        if (value) {

          return value.dictLabel

        } else {

          return ''

        }

      },

      getDicts(type) {

        getDicts('enforce_type').then(val => {

          this.typeList = val.data.data

          this.checkLogList()

        })

      },

      goRecord() {

        uni.navigateTo({

          url: `/policy/translateRecord/translateRecord`

        })

      },

      click() {



      },

      goStartJudeg(id) {

        this.recordList = id

        this.$refs.popup.open()

      },

      // 批量审批

      moreJudeg() {

        if (!this.list.length) {

          return

        }

        this.isJudege = true

      },

      setIsSelect(index) {

        if (!this.isJudege) {

          return

        }

        this.list[index].isSelect = !this.list[index].isSelect

      },

      allSelect() {

        const value = this.isAllSelect

        this.list.map(item => item.isSelect = !value)

      },

      moreStart() {

        const value = this.list.some(item => item.isSelect)

        if (value) {

          const valueData = this.list.filter(item => item.isSelect).map(item => item.orderId)

          // console.log(valueData)

          this.goStartJudeg(valueData)

        } else {

          uni.showToast({

            title: '请选择审批',

            icon: 'none'

          })

        }

      },

      entery(form) {

        // 1企业审批，2执法单审批

        checkUpd({

          ...form,

          ids: this.recordList,

          checkType: 2

        }).then(val => {

          if (val.data.code == 200) {

            uni.showToast({

              title: '审批成功',

              icon: 'none'

            })

          }

          this.list = []

          this.queryms.pageNum = 1

          this.checkLogList()

          this.$refs.popup.close()

          this.isJudege = false

        })



      },

      cancelSelect() {

        this.isJudege = false

        this.list.map(item => item.isSelect = false)

      },

      checkLogList() {

        checkLogList(this.queryms).then(val => {

          val.data.rows.map(item => {

            item.isSelect = false

            item.show = false

          })

          this.list = [...this.list, ...val.data.rows]

          this.total = val.data.total

        })

      }

    }

  }

</script>

<style>

  page {

    background-color: #F4F4F4;

  }

</style>

<style lang="scss" scoped>

  @import "./translate.scss";



  ::v-deep .u-radio {

    margin-right: 84rpx !important;

  }



  ::v-deep .u-textarea {

    background-color: #F4F4F4 !important;

    border: none;

  }



  .set-line-flex {

    display: flex;

    justify-content: flex-start;

    align-items: flex-start;



    text {

      width: 28%;

      display: inline-block;

    }



    &>view {

      width: 70%;

    }

  }

</style>