lcny-admin-mobile-vue/src/pages/basics/profile.vue

<template>
  <view>
    <Appbar :show="showAppbar" title="基地数据"> </Appbar>
    <u-sticky>
      <view class="bg-white">
        <SearchForm
          :schemas="searchFormSchema"
          @submit="handleSubmit"
        ></SearchForm>
      </view>
    </u-sticky>
    <mescroll-body
      @init="mescrollInit"
      @up="upCallback"
      :up="upOption"
      :down="downOption"
    >
      <view>
        <u-swipe-action
          v-for="(item, i) in dataList"
          :show="item.show"
          :index="i"
          :key="item.id"
          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.industry_label }}</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>
      </view>
    </mescroll-body>
  </view>
</template>
<script>
import Appbar from '@/components/Appbar'
import SearchForm from '@/components/search-form'
import { http } from '@/api/index.js'
import MescrollMixin from '@/uni_modules/mescroll-uni/components/mescroll-uni/mescroll-mixins.js'
import cuPopup from '@/components/cu-popup/index.vue'
import BaseTablePopup from '@/components/base-table/popup.vue'
import BasicsEdit from './components/basics-edit.vue'
import checkPermission from '@/utils/permission.js'
const baseTableColums = [
  {
    title: '基地名称',
    dataIndex: 'name',
  },
  {
    title: '农业类型',
    dataIndex: 'industry_label',
  },
  {
    title: '是否外部链接',
    dataIndex: 'is_blank',
    format: (text) => {
      return text ? '是' : '否'
    },
  },
  {
    title: '排序',
    dataIndex: 'sort',
  },
  {
    title: '基地负责人',
    dataIndex: 'person',
  },
  {
    title: '基地农作物',
    dataIndex: 'crops',
    format: (arr) => {
      return arr?.map((e) => e.name).join(',') ?? ''
    },
  },
  {
    title: '基地经度',
    dataIndex: 'address_lng',
  },
  {
    title: '基地纬度',
    dataIndex: 'address_lat',
  },
  {
    title: '基地地址',
    dataIndex: 'address',
  },
  {
    title: '基地面积',
    dataIndex: 'areas',
  },
  {
    title: '种养殖面积',
    dataIndex: 'cultivated',
  },
  {
    title: '基地就业人数',
    dataIndex: 'workforce',
  },
  {
    title: '基地描述',
    dataIndex: 'description',
  },
]
export default {
  mixins: [MescrollMixin],
  components: {
    SearchForm,
    Appbar,
    cuPopup,
    BaseTablePopup,
    BasicsEdit,
  },
  data() {
    return {
      baseTableColums,
      currentData: null,
      filterParmas: {},
      downOption: {
        use: false,
      },
      upOption: {
        auto: false,
        page: {
          size: 20,
        },
      },
      dataList: [],

      formShow: false,
      baseShow: false,
      searchFormSchema: [
        {
          field: 'name',
          label: '名称',
          component: 'Input',
          componentProps: {
            placeholder: '请输入名称',
          },
        },
        {
          field: 'type',
          label: '农业类型',
          component: 'ApiSelect',
          componentProps: ({ formActionType }) => {
            return {
              api: async (e) => {
                const { data } = await http.get('/api/keywords-industry', {
                  params: e,
                })
                return data.data
              },
              labelField: 'name',
              valueField: 'id',
            }
          },
        },
      ],
    }
  },
  computed: {
    options() {
      return [
        
      ].filter((e) => checkPermission(e.permission))
    },
  },
  methods: {
    handleSubmit(e) {
      this.filterParmas = e
      this.mescroll.resetUpScroll()
    },
    upCallback({ num, size }) {
      this.getData({
        ...this.filterParmas,
        page: num,
        per_page: size,
        type: 1,
      })
    },
    async getData(e) {
      try {
        const { data } = await http.get(`/api/agricultural-basic`, {
          params: e,
        })
        if (e.page == 1) this.dataList = []
        const { data: list, meta } = data
        this.dataList = this.dataList.concat(
          list.map((e) => Object.assign({ show: false }, e))
        )
        this.mescroll.endByPage(list.length, meta.total)
      } catch (error) {
        this.mescroll.endErr()
      }
    },
    handleClick(index1, index) {
      const { opt } = this.options[index]
      const item = this.dataList[index1]
      this.currentData = item
      if (opt == 'edit') {
        this.handleEdit(item)
      } else if (opt == 'delete') {
        this.handleDel(item)
      }
    },
    handleContentClick(e) {
      this.currentData = this.dataList[e]
      uni.navigateTo({
        url: `/pages/basics/profile-detail?id=${this.currentData.id}`,
      })
      // this.baseShow = true
    },
    handleEdit(item) {
      this.currentData = item
      this.formShow = true
      this.baseShow = false
    },
    async handleDel(item) {
      uni.showModal({
        title: '提示',
        content: '是否确定删除？',
        success: async (res) => {
          if (res.confirm) {
            try {
              await this.$http.delete(`/api/agricultural-basic/${item.id}`)
              this.mescroll.resetUpScroll()
              this.baseShow = false
            } catch ({ data }) {
              this.$u.toast(data.message)
            }
          }
        },
      })
    },
    async handleCreate() {
      this.currentData = null
      this.formShow = true
      this.baseShow = false
    },
    handleEditConfirm() {
      this.mescroll.resetUpScroll()
      this.formShow = false
    },
  },
}
</script>