shuili_manager/jwtech-h5-page/pages/danger/index.vue

<template>
  <view class="project">
    <view class="cc-header">
      <!-- 搜索框 -->
      <view class="cc-search search-bar">
        <view class="search-box">
          <image src="/static/images/icon/search.png" />
          <input type="text" v-model="queryParams.data.projectName" @confirm="handleSearchProjectList" placeholder="请输入项目名称" />
        </view>
      </view>
      <!-- 行政区划和项目类型下拉框 -->
      <view class="cc-query-dropdowns dropdowns">
        <region-picker @trigge-method="handleRegionParams" />
        <project-type-picker @trigge-method="handleProjectTypeParams" />
      </view>
    </view>

    <!-- 项目列表 -->
    <view class="cc-project-list project-list">
      <view v-for="(project, index) in projects" :key="index" class="cc-card project-card">
        <view class="attr-item project-title">{{ project.projectName }}</view>
        <view class="attr-item">
          <view class="attr-title">项目编号</view>
          <view class="attr-value">{{ project.proCode }}</view>
        </view>
        <view class="attr-item">
          <view class="attr-title">行政区划</view>
          <view class="attr-value">{{ project.adcdName }}</view>
        </view>
        <view class="attr-item">
          <view class="attr-title">项目类型</view>
          <view class="attr-value">{{ project.projectTypeName }}</view>
        </view>
        <view class="operate-buttons">
          <view class="buttons-group">
            <view class="primary-button__text button" @click="handleToDanger(project)">隐患等级</view>
          </view>
        </view>
      </view>
      <no-data-view v-if="projects.length === 0" />
      <uni-load-more v-if="queryParams.pageNum == pages" status="no-more"></uni-load-more>
    </view>
  </view>
</template>

<script>
import { getProjectListApi } from '@/api/system/project'
import { addressList } from '@/uni_modules/piaoyi-cityPicker/components/piaoyi-cityPicker/cityData.js'
import NoDataView from '@/components/no-data-view/no-data-view.vue'
import RegionPicker from '@/components/region-picker/region-picker.vue'
import ProjectTypePicker from '@/components/project-type-picker/project-type-picker.vue'

export default {
  components: {
    NoDataView,
    RegionPicker,
    ProjectTypePicker
  },
  data() {
    return {
      selectedDistrict: 0,  // 行政区划选择的索引
      selectedProjectType: 0,  // 项目类型选择的索引
      districts: ['请选择', '北京市', '上海市', '广州市'],  // 行政区划数据
      projectTypes: ['请选择', '建筑', 'IT', '教育'],  // 项目类型数据
      testArray: [['重大项目', '面上项目', '其他'], ['引调水改成', '枢纽工程'], ['新建水库', '病险']],
      projects: [],
      queryParams: {
        pageNum: 1,
        pageSize: 10,
        params: {orderBy: "create_time", sortBy: "desc"},
        data: {
          projectName: '',
          adcd: ''
        }
      },
      pages: 0,
      // 省市区数据
      addressTreeList: addressList,
      addressList: [],
      // 重大项目字典
      zd_projectTypeOptions: [],
      // 面上项目字典
      ms_projectTypeOptions: [],
    };
  },
  created () {
    this.handleAddressTreeData()
    this.getProjectList()
    this.getDicts("major_project").then((response) => {
      this.zd_projectTypeOptions = response.data
    })
    this.getDicts("general_project").then((response) => {
      this.ms_projectTypeOptions = response.data
    })
  },
  onReachBottom() {
    if (this.queryParams.pageNum < this.pages) {
      this.queryParams.pageNum++ // 页码加1
      this.getProjectList()
    }
  },
  methods: {
    // 检索项目
    handleSearchProjectList() {
      this.queryParams.pageNum = 1
      this.getProjectList('again')
    },

    // 获取项目列表
    getProjectList(mode) {
      uni.showLoading({
        title: '加载中...',
        mask: true
      })
      getProjectListApi(this.queryParams).then(res => {
        if (mode === 'again') {
          this.projects = []
          uni.pageScrollTo({
              scrollTop: 0, // 设置滚动到顶部
              duration: 300 // 滚动动画持续时间，单位为毫秒
          })
        }
        this.projects = [...this.projects, ...res.records]
        this.pages = res.pages
        this.projects.forEach(projectItem => {
          projectItem.adcdName = this.formatAdcd(projectItem)
          projectItem.projectTypeName = this.projectTypeFormat(projectItem)
        })
        uni.hideLoading()
      })
    },

    // 处理区划请求
    handleRegionParams(adcd) {
      this.queryParams.pageNum = 1
      this.queryParams.data.adcd = adcd
      this.getProjectList('again')
    },

    // 处理项目类型
    handleProjectTypeParams(params) {
      this.queryParams.pageNum = 1
      this.queryParams.data.projectType = params.projectType
      this.queryParams.data.isMajor = params.isMajor
      this.getProjectList('again')
    },

    // 将省市区的树状数据分解成列表,并在后面补零
    handleAddressTreeData() {
      let result = []
      function traverse(node) {
        result.push({ code: node.code, name: node.name, dictLabel: node.name, dictValue: node.code}) // 将当前节点添加到结果中
        if (node.children) {
          node.children.forEach(child => traverse(child)) // 递归遍历子节点
        }
      }
      this.addressTreeList.forEach(node => traverse(node)) // 遍历树的每个根节点
      this.addressList = result
      this.addressList.forEach(item => {
        if (item.code.length===2) {
          item.code = item.dictValue = item.code + '0000'
        }
        if (item.code.length===4) {
          item.code = item.dictValue = item.code + '00'
        }
      })
    },

    // 处理省市区显示
    formatAdcd(row) {
      if (row.adcd) {
        let provinceCode = row.adcd.slice(0, 2)+"0000";
        let cityCode = row.adcd.slice(0, 4)+"00";
        let areaCode = row.adcd;
        let s="";
        if (areaCode.length > 2) {
            s=this.areaCodeFormat(provinceCode)
            if (cityCode!=provinceCode){
              s+="-"+this.areaCodeFormat(cityCode)
            }
            if (areaCode!=cityCode){
              s+="-" + this.areaCodeFormat(areaCode)
            }
         }
        return s
      }
    },

    //行政区划字典
    areaCodeFormat(adcd, column) {
      return this.selectDictLabel(
        this.addressList,
        adcd
      );
    },

    // 项目类型字典翻译
    projectTypeFormat(row, column) {
      if (row.isMajor == "zd") {
        return this.selectDictLabel(
          this.zd_projectTypeOptions,
          row.projectType
        );
      } else if (row.isMajor == "ms") {
        return this.selectDictLabel(
          this.ms_projectTypeOptions,
          row.projectType
        );
      }else if (row.isMajor !=null){
        return '其他'
      }
    },

    // 跳转到隐患排查列表页面
    handleToDanger(projectItem) {
      // uni.navigateTo({
      //   url: '/pages/danger/list?id=' + projectItem.id
      // })
      this.$tab.navigateTo(`/pages/danger/list?operateType=add&proNo=${projectItem.proNo}&proCode=${projectItem.proCode}&menuType=${0}&projectName=${projectItem.projectName}`)
    },
  }
};
</script>

<style lang="scss" scoped>
.project {
  .project-list {
    padding: 114px 20px 16px;
  }
}
</style>