lcny-admin-mobile-vue/src/pages/basics/components/basics-edit.vue

<template>
  <view class="p-20rpx h-full overflow-hidden flex flex-col">
    <view class="flex-1 relative">
      <view class="absolute top-0 left-0 w-full h-full">
        <scroll-view scroll-y="true" class="h-full">
          <u-form ref="uForm" :model="form" class="cu-form" label-width="200">
            <u-form-item label="ID" v-if="form.id">
              <u-input disabled v-model="form.id"></u-input>
            </u-form-item>
            <u-form-item label="外部链接">
              <u-switch v-model="form.is_blank"></u-switch>
            </u-form-item>
            <u-form-item label="外部链接" v-if="form.is_blank">
              <u-input v-model="form.blank_url" placeholder="请输入"></u-input>
            </u-form-item>
            <u-form-item label="农业类型">
              <ApiSelect
                v-model="form.industry_key"
                v-bind="industrySelectOption"
              ></ApiSelect>
            </u-form-item>
            <u-form-item label="基地名称">
              <u-input v-model="form.name" placeholder="请输入"></u-input>
            </u-form-item>
            <u-form-item label="排序">
              <u-input v-model="form.sort" placeholder="请输入"></u-input>
            </u-form-item>
            <u-form-item label="基地负责人">
              <u-input v-model="form.person" placeholder="请输入"></u-input>
            </u-form-item>
            <u-form-item label="基地面积">
              <u-input v-model="form.areas" placeholder="请输入"></u-input>
            </u-form-item>
            <u-form-item label="种养殖面积">
              <u-input v-model="form.cultivated" placeholder="请输入"></u-input>
            </u-form-item>
            <u-form-item label="基地人数">
              <u-input v-model="form.workforce" placeholder="请输入"></u-input>
            </u-form-item>
            <u-form-item label="城镇">
              <ApiSelect
                v-model="form.parent_id"
                v-bind="parentSelectOption"
              ></ApiSelect>
            </u-form-item>
            <u-form-item label="基地农作物">
              <ApiCheckbox
                v-model="form.crops_ids"
                v-bind="cropsSelectOption"
              ></ApiCheckbox>
            </u-form-item>
            <u-form-item label="基地地址">
              <u-input v-model="form.address"></u-input>
            </u-form-item>
            <u-form-item label="基地介绍">
              <u-input type="textarea" v-model="form.description"></u-input>
            </u-form-item>
            <u-form-item label="基地经度">
              <u-input v-model="form.address_lng"></u-input>
            </u-form-item>
            <u-form-item label="基地纬度">
              <u-input v-model="form.address_lat"></u-input>
            </u-form-item>
          </u-form>
        </scroll-view>
      </view>
    </view>
    <view class="grid grid-cols-2 gap-x-20rpx">
      <u-button class="mt-20rpx" round @click="handleCancel"> 取消 </u-button>
      <u-button class="mt-20rpx" type="primary" round @click="handleSubmit">
        保存
      </u-button>
    </view>
  </view>
</template>
<script>
import { http } from '@/api/index.js'
import ApiSelect from '@/components/search-form/components/ApiSelect1.vue'
import ApiCheckbox from '@/components/search-form/components/ApiCheckbox.vue'
const industrySelectOption = {
  api: async (e) => {
    const { data } = await http.get('/api/keywords-industry', {
      params: e,
    })
    return data.data
  },
  labelField: 'name',
  valueField: 'key',
}
const parentSelectOption = {
  api: async (e) => {
    const { data } = await http.get('/api/agricultural-basic', {
      params: {
        type: 2,
      },
    })
    console.log(data)
    return data.data
  },
  labelField: 'name',
  valueField: 'id',
}
const cropsSelectOption = {
  api: async (e) => {
    const { data } = await http.get('/api/crops', {
      params: { type: 'all', crop_type: 1 },
    })
    console.log(data)
    return data.data.map((e) => {
      return {
        ...e,
        disabled: e.is_end === 0,
      }
    })
  },
  labelField: 'name',
  valueField: 'id',
}

export default {
  props: {
    data: {
      type: Object,
      default: () => {},
    },
  },
  components: {
    ApiSelect,
    ApiCheckbox,
  },
  computed: {
    isEdit() {
      return !!this.data
    },
  },
  data() {
    return {
      industrySelectOption,
      parentSelectOption,
      cropsSelectOption,
      form: {
        id: '',
        is_blank: false,
        blank_url: '',
        industry_key: '',
        name: '',
        sort: 0,
        person: '',
        areas: '',
        cultivated: '',
        workforce: '',
        parent_id: '',
        crops_ids: [],
        address: '',
        description: '',
        address_lng: '',
        address_lat: '',
      },
    }
  },
  methods: {
    handleCancel() {
      this.$emit('cancel')
    },
    async handleSubmit() {
      const params = { ...this.form, type: 1 }

      if (this.isEdit) {
        await this.onUpdate(params)
      } else {
        await this.onCreate(params)
      }
      this.$emit('confirm')
    },

    async onUpdate(params) {
      try {
        await this.$http.put(`/api/agricultural-basic/${params.id}`, params)
        this.$u.toast('操作成功')
      } catch ({ data }) {
        data && this.$u.toast(data?.message)
      }
    },

    async onCreate(params) {
      try {
        await this.$http.post('/api/agricultural-basic', params)
        this.$u.toast('操作成功')
      } catch ({ data }) {
        data && this.$u.toast(data?.message)
      }
    },

    setDefaultForm(data) {
      Object.keys(data).forEach((key) => {
        const value = data[key]
        if (key == 'blank_url') {
          this.form.is_blank = data[key] ? true : false
        } else if (key == 'crops') {
          this.form.crops_ids = value.map((e) => e.id)
        }
        if (this.form[key] !== undefined) this.form[key] = value
      })
    },
  },
  watch: {
    data: {
      handler(val) {
        if (val) {
          this.setDefaultForm(val)
        }
      },
      immediate: true,
      deep: true,
    },
  },
}
</script>