lcny-admin-mobile-vue/src/pages/basics/town-base.vue

<template>
  <view>
    <view class="bg-white p-30rpx">
      <view class="flex justify-between items-center">
        <view class="text-32rpx">全市数据统计</view>
        <u-button size="mini" v-auth="['endpoint.town_street.base_statistics_edit']" @click="cityEditShow = true">编辑</u-button>
      </view>
      <view class="grid grid-cols-2 mt-20rpx" v-auth="['endpoint.town_street.base_statistics']">
        <CountItem
          v-for="(item, i) in showCityList"
          :key="i"
          :data="item"
        ></CountItem>
      </view>
    </view>
    <view class="w-full h-20rpx"></view>
    <u-sticky :h5NavHeight="h5NavHeightP">
      <view class="bg-white">
        <view class="flex items-center p-20rpx">
          <u-input
            v-model="filter.name"
            placeholder="请输入名称"
            class="w-full"
          ></u-input>
          <u-button size="medium" @click="onFilterSubmit">查询</u-button>
        </view>
      </view>
    </u-sticky>

    <mescroll-body
      @init="mescrollInit"
      @up="upCallback"
      :up="upOption"
      :down="downOption"
    >
      <u-swipe-action
        v-for="(item, i) in dataList"
        :show="item.show"
        :index="i"
        :key="i"
        class="my-20rpx mx-30rpx rounded-md overflow-hidden"
        :options="options"
        @click="handleClick"
        @content-click="handleContentClick"
      >
        <view>
          <view class="bg-white p-20rpx">
            <view> 街镇名称：{{ item.name }} </view>
            <view>街镇地址：{{ item.address }}</view>
            <view class="my-12rpx">
              <u-line></u-line>
            </view>

            <view class="grid grid-cols-3">
              <view class="text-center">街镇面积</view>
              <view class="text-center">耕地面积</view>
              <view class="text-center">街镇人数</view>
            </view>
            <view class="grid grid-cols-3">
              <view class="text-center">{{ item.areas }}</view>
              <view class="text-center">{{ item.cultivated }}</view>
              <view class="text-center">{{ item.workforce }}</view>
            </view>
          </view>
        </view>
      </u-swipe-action>
    </mescroll-body>

    <!-- 全市数据统计编辑 -->
    <cuPopup v-model="cityEditShow" title="编辑统计">
      <CountEdit
        :data="cityList"
        @cancel="cityEditShow = false"
        @confirm="handleCityEditConfirm"
      ></CountEdit>
    </cuPopup>

    <cuPopup v-model="cityItemShow" title="编辑街镇">
      <CityEdit
        :data="currentData"
        @cancel="cityItemShow = false"
        @confirm="handleCityConfirm"
      ></CityEdit>
    </cuPopup>

    <BaseTablePopup
      v-model="baseTablePopupShow"
      @onEdit="handleEdit"
      :colums="baseTableColums"
      :data="currentData"
    >
    </BaseTablePopup>
  </view>
</template>
<script>
import CountItem from './components/town-count-item.vue'
import cuPopup from '@/components/cu-popup/index.vue'
import CountEdit from './components/town-count-edit.vue'
import BaseTablePopup from '@/components/base-table/popup.vue'
import CityEdit from './components/town-city-edit'
const filterCityCount = [
  'city_data_chart_nongye',
  'city_data_chart_yuye',
  'city_data_chart_xumuye',
  'city_data_chart_lingye',
  'city_data_chart_activity',
]
const baseTableColums = [
  {
    title: '街镇名称',
    dataIndex: 'name',
  },
  {
    title: '街镇地址',
    dataIndex: 'address',
  },
  {
    title: '街镇面积',
    dataIndex: 'areas',
  },
  {
    title: '耕地面积',
    dataIndex: 'cultivated',
  },
  {
    title: '街镇人数',
    dataIndex: 'workforce',
  },
  {
    title: '街镇描述',
    dataIndex: 'description',
  },
]
import MescrollMixin from '@/uni_modules/mescroll-uni/components/mescroll-uni/mescroll-mixins.js'
export default {
  mixins: [MescrollMixin],
  components: {
    CountItem,
    cuPopup,
    CountEdit,
    BaseTablePopup,
    CityEdit,
  },
  computed: {
    showCityList() {
      return this.cityList.filter(
        (item) => !filterCityCount.includes(item.slug)
      )
    },
  },
  data() {
    return {
      baseTablePopupShow: false,
      baseTableColums,
      cityItemShow: false,
      options: [
        {
          text: '编辑',
          style: {
            backgroundColor: '#007aff',
          },
        },
      ],
      cityList: [],
      cityEditShow: false,
      dataList: [],
      downOption: {
        use: false,
      },
      upOption: {
        auto: true,
        page: {
          size: 20,
        },
      },
      filter: {
        name: '',
        type: 2,
      },
      currentData: null,
    }
  },
  onLoad() {
    this.getCityData()
  },
  methods: {
    handleEdit(e) {
      this.currentData = e
      this.baseTablePopupShow = false
      this.cityItemShow = true
    },

    onFilterSubmit() {
      this.mescroll.resetUpScroll()
    },
    handleClick(index1, index) {
      this.currentData = this.dataList[index1]
      this.cityItemShow = true
    },

    handleContentClick(e) {
      this.currentData = this.dataList[e]
      this.baseTablePopupShow = true
    },

    upCallback({ num, size }) {
      this.getData({
        ...this.filter,
        page: num,
        per_page: size,
      })
    },

    async getData(params) {
      try {
        const { data } = await this.$http.get(`/api/agricultural-basic`, {
          params,
        })
        if (params.page == 1) this.dataList = []
        const { data: list, meta } = data
        this.dataList = this.dataList.concat(list)
        this.mescroll.endByPage(list.length, meta.total)
      } catch (error) {
        this.mescroll.endErr()
      }
    },

    //全市统计数据
    async getCityData() {
      try {
        const { data } = await this.$http.get('/api/citydata-statistics')
        const { data: resData } = data
        this.cityList = resData
      } catch (error) {}
    },
    handleCityEditConfirm() {
      this.cityEditShow = false
      this.getCityData()
    },
    handleCityConfirm() {
      this.cityItemShow = false
      this.mescroll.resetUpScroll()
    },

    // /api/agricultural-basic?type=2&page=1&per_page=20
  },
}
</script>