lcny-admin-mobile-vue/src/pages/crop/town-crop.vue

<template>
  <view>
    <Appbar title="城镇农作物">
      <template #right>
        <view
          v-auth="['endpoint.town_crops.create']"
          class="text-white mr-20px"
          @click="handleCreate"
          >新增</view
        >
      </template>
    </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 class="flex">
                <view class="flex-1">单位：{{ item.unit }}</view>
                <view class="flex-1"
                  >是否是结点：{{ item.is_end ? '是' : '否' }}</view
                >
              </view>
            </view>
          </view>
        </u-swipe-action>
      </view>
    </mescroll-body>

    <!-- 详情 -->
    <BaseTablePopup
      v-model="baseShow"
      :colums="baseTableColums"
      :data="currentData"
      @onEdit="handleEdit"
      @onDel="handleDel"
      :editAuth="['endpoint.town_crops.edit']"
      :delAuth="['endpoint.town_crops.destroy']"
    >
    </BaseTablePopup>
    <!-- 编辑 -->
    <cuPopup
      v-model="formShow"
      :title="currentData ? '编辑农作物' : '新增农作物'"
    >
      <BasicsEdit
        @cancel="formShow = false"
        @confirm="handleEditConfirm"
        :data="currentData"
      ></BasicsEdit>
    </cuPopup>
  </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: 'unit',
  },
  {
    title: '是否是结点',
    dataIndex: 'is_end',
    format: (text) => {
      return text == 1 ? '是' : '否'
    },
  },
  // {
  //   title: '',
  //   dataIndex: 'extends',
  // },
]
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: '请输入名称',
          },
        },
      ],
    }
  },
  computed: {
    options() {
      return [
        {
          text: '编辑',
          opt: 'edit',
          permission: ['endpoint.town_crops.edit'],
          style: {
            backgroundColor: '#007aff',
          },
        },
        {
          text: '删除',
          opt: 'delete',
          permission: ['endpoint.town_crops.destroy'],
          style: {
            backgroundColor: '#dd524d',
          },
        },
      ].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: 'all',
        crop_type: 2,
      })
    },
    async getData(e) {
      try {
        const { data } = await http.get(`/api/crops`, {
          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]
      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/crops/${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>