nxdt-uniapp/pages/violationManagenment/violationList.vue

<template>
  <view>
    <Navbar title="违章列表" @chickIcon="chickIcon" :showRightIcon="true" />
    <div class="content">
      <!-- 搜索 -->
      <div class="search">
        <u-input
          placeholder="请输入工程名称"
          suffixIcon="search"
          suffixIconStyle="color: #909399"
          shape="circle"
          @blur="handleSearch"
        ></u-input>
      </div>
      <!-- 列表 -->
      <div>
        <div v-for="(item, index) in tableList" :key="index" class="list-cont">
          <div class="list-item">违章编号：{{ item.violationCode }}</div>
          <div class="list-item">违章工程：{{ item.proName }}</div>
          <div class="list-item">违章类型：{{ item.violationTypeName }}</div>
          <div class="list-item">处罚单：{{ item.isTicket == '0' ? '未下发' : '已下发' }}</div>
          <div class="list-btn">
            <div><u-button type="primary" size="mini" @click="handleSeeEdit(1, item)">查看</u-button></div>
            <div>
              <u-button v-if="item.isTicket == '0'" type="primary" size="mini" @click="handleSeeEdit(3, item)">
                编辑
              </u-button>
            </div>
            <div>
              <u-button v-if="item.isTicket == '0'" type="primary" size="mini" @click="handleSeeEdit(2, item)">
                下发处罚单
              </u-button>
            </div>
          </div>
        </div>
        <u-empty mode="data" v-if="tableList.length == 0"></u-empty>
      </div>
    </div>
  </view>
</template>

<script>
import { getAppIllegalRecordList } from '@/api/hiddenDangerViolation'

export default {
  data() {
    return {
      searchValue: '',
      tableList: []
    }
  },
  onShow() {
    setTimeout(() => {
      this.getList()
    }, 200)
  },
  methods: {
    // 搜索
    handleSearch(value) {
      console.log('🚀 ~ 搜索 ~ value:', value)
      this.searchValue = value
      this.getList()
    },
    // 点击右侧按钮
    chickIcon() {
      console.log('🚀 ~ 点击右侧按钮')
      const params = { isAdd: true, title: '新增违章' }
      uni.navigateTo({
        url: '/pages/violationManagenment/addViolation?params=' + JSON.stringify(params)
      })
    },
    // 列表
    async getList() {
      console.log('🚀 ~ 获取列表')
      try {
        const params = { proName: this.searchValue }
        console.log('🚀 ~ getList ~ params:', params)
        const res = await getAppIllegalRecordList(params)
        console.log('🚀 ~ getList ~ res:', res)
        this.tableList = res.data
      } catch (error) {
        console.log('🚀 ~ error', error)
      }
    },
    // 查看编辑
    handleSeeEdit(type, item) {
      console.log('🚀 ~ 查看编辑 ~ type:', type)
      console.log('🚀 ~ 查看编辑 ~ item:', item)
      let params = {}
      if (type === 1) {
        params = { isDetail: true, ...item, title: '查看详情' }
        uni.navigateTo({
          url: '/pages/violationManagenment/addViolation?params=' + JSON.stringify(params)
        })
      } else if (type === 2) {
        params = { isApprove: true, ...item, title: '下发处罚单' }
        uni.navigateTo({
          url: '/pages/violationManagenment/penaltyReceipts?params=' + JSON.stringify(params)
        })
      } else if (type === 3) {
        params = { isEdit: true, ...item, title: '编辑违章' }
        uni.navigateTo({
          url: '/pages/violationManagenment/addViolation?params=' + JSON.stringify(params)
        })
      }
    }
  }
}
</script>

<style lang="scss">
.content {
  padding-bottom: 20px;
  word-break: break-all;
  .search {
    margin: 0 20px 10px;
  }
  .list-cont {
    padding: 10px;
    margin: 0 10px 10px;
    background-color: #f5f7fa;
    border-radius: 8px;
    .list-item {
      margin-bottom: 10px;
    }
    .list-btn {
      display: flex;
      justify-content: flex-end;
      div {
        margin-left: 10px;
      }
    }
  }
}
</style>