0
点赞
收藏
分享

微信扫一扫

VUE省市区三级联动组件

RockYoungTalk 2024-09-20 阅读 42

:::color5 核心搜索<font style="background-color:rgb(250, 250, 250);">fullCityCode</font>即可

:::

使用

<a-col :span="12" >
              <a-form-model-item label="省市区" prop="fullCityCodeArr">
                <a-cascader
                  :options="optionsArea"
                  :show-search="{ filterArea }"
                  placeholder="请选择省市区(可搜索)"
                  @change="onChangeArea"
                  v-model="form.fullCityCodeArr"
                />
              </a-form-model-item>
            </a-col>

截图

VUE省市区三级联动组件_bc

完整代码

<template>
  <j-modal
    ref="createModal"
    :maskClosable="formDisabled"
    centered
    :title="formTitle"
    width="60%"
    :visible="open"
    :fullscreen.sync="modal.fullscreen"
    :switchFullscreen="modal.switchFullscreen"
    :okButtonProps="{ class:{'pgz-hidden': formDisabled} }"
    :confirmLoading="submitLoading"
    @ok="submitForm"
    @cancel="cancel"
    cancelText="关闭11">
    <a-spin :spinning="loading">
      <p-form-container :disabled="formDisabled">
        <a-form-model ref="form" :model="form" :rules="rules" slot="detail">
          <a-row :gutter="32">
            <a-col :span="12" >
              <a-form-model-item label="省市区" prop="fullCityCodeArr">
                <a-cascader
                  :options="optionsArea"
                  :show-search="{ filterArea }"
                  placeholder="请选择省市区(可搜索)"
                  @change="onChangeArea"
                  v-model="form.fullCityCodeArr"
                />
              </a-form-model-item>
            </a-col>
            <a-col :span="12" >
              <a-form-model-item label="所属牛场" prop="cattleFarmId" >
                <j-search-select-tag placeholder="请选择" v-model="form.cattleFarmId" dict="bcb_cattle_farm,cattle_farm_name,id,del_flag!=2"/>
              </a-form-model-item>
            </a-col>
            <a-col :span="12" >
              <a-form-model-item label="所属圈舍" prop="farmingPenId" >
                <j-search-select-tag placeholder="请选择" v-model="form.farmingPenId" :dict="'bcb_farming_pen,pen_name,id,del_flag!=2 and cattle_farm_id=\'' + form.cattleFarmId + '\' '"/>
              </a-form-model-item>
            </a-col>
            <!-- <a-col :span="12" >
                <a-form-model-item label="所属批次" prop="batchId" >
                  <j-search-select-tag placeholder="请选择" v-model="form.batchId" :dict="'bcb_batch,batch_name,id,del_flag!=2 and cattle_farm_id=\'' + form.cattleFarmId + '\' '"/>
                </a-form-model-item>
              </a-col>-->
            <a-col :span="12" >
              <a-form-model-item label="种牛编号" prop="cattleNumber" >
                <j-search-select-tag placeholder="请选择" v-model="form.cattleNumber" :dict="'bcb_cattle,ear_tag_number,ear_tag_number,del_flag=0 and status=0 and farming_pen_id=\'' + form.farmingPenId + '\' '"/>
              </a-form-model-item>
            </a-col>
            <a-col :span="12" >
              <a-form-model-item label="选配编号" prop="optionalNumber" >
                <j-search-select-tag placeholder="请选择" v-model="form.optionalNumber" :dict="'bcb_cattle,ear_tag_number,ear_tag_number,del_flag=0 and status=0 and cattle_farm_id=\'' + form.cattleFarmId + '\' '"/>
              </a-form-model-item>
            </a-col>
            <a-col :span="12" >
              <a-form-model-item label="父代编号" prop="fatherNumber" >
                <j-search-select-tag placeholder="请选择" v-model="form.fatherNumber" :dict="'bcb_cattle,ear_tag_number,ear_tag_number,del_flag=0 and status=0 and cattle_farm_id=\'' + form.cattleFarmId + '\' '"/>
              </a-form-model-item>
            </a-col>
            <a-col :span="12" >
              <a-form-model-item label="母代编号" prop="motherNumber" >
                <j-search-select-tag placeholder="请选择" v-model="form.motherNumber" :dict="'bcb_cattle,ear_tag_number,ear_tag_number,del_flag=0 and status=0 and cattle_farm_id=\'' + form.cattleFarmId + '\' '"/>
              </a-form-model-item>
            </a-col>
           <!-- <a-col :span="12" >
              <a-form-model-item label="部门ID" prop="deptId" >
                <a-input v-model="form.deptId" placeholder="请输入部门ID" />
              </a-form-model-item>
            </a-col>
            <a-col :span="12" >
              <a-form-model-item label="用户ID" prop="userId" >
                <a-input v-model="form.userId" placeholder="请输入用户ID" />
              </a-form-model-item>
            </a-col>-->
          </a-row>
        </a-form-model>
      </p-form-container>
    </a-spin>
  </j-modal>
</template>

<script>
import { getDynaCattleBreed, addDynaCattleBreed, updateDynaCattleBreed } from '@/api/breed/dynaCattleBreed'
import cascaderOptions, { DivisionUtil } from '@pansy/china-division'
const divisionUtil = new DivisionUtil(cascaderOptions)

export default {
  name: 'CreateFormPModal',
  props: {
  },
  components: {
  },
  data () {
    return {
      optionsArea: cascaderOptions,
      fullCityCode: null,
      fullCityCodeArr: [],
      loading: false,
      submitLoading: false,
      formDisabled: false,
      modal: {
        fullscreen: false, // 初始时是否全屏
        switchFullscreen: true
      },
      formTitle: '',
      // 表单参数
      form: {
        id: null,
        cattleNumber: null,
        cattleBreeds: null,
        optionalNumber: null,
        cattleFarmId: null,
        farmingPenId: null,
        batchId: null,
        fatherNumber: null,
        motherNumber: null,
        tenantId: null,
        deptId: null,
        userId: null
      },
      // 1增加,2修改
      formType: 1,
      open: false,
      rules: {
        fullCityCodeArr: [{ type: 'array', required: true, message: '省市区不能为空', trigger: 'change' }],
        cattleNumber: [
          { required: true, message: '种牛编号不能为空', trigger: 'blur' },
        ],
        cattleBreeds: [
          { required: true, message: '种牛品种不能为空', trigger: 'blur' },
        ],
        optionalNumber: [
          { required: true, message: '选配编号不能为空', trigger: 'blur' },
        ],
        cattleFarmId: [
          { required: true, message: '所属牛场不能为空', trigger: 'blur' },
        ],
        fatherNumber: [
          { required: true, message: '父代编号不能为空', trigger: 'blur' },
        ],
        motherNumber: [
          { required: true, message: '母代编号不能为空', trigger: 'blur' },
        ],
      }
    }
  },
  filters: {
  },
  created () {
  },
  computed: {
  },
  watch: {
  },
  mounted () {
  },
  methods: {
    onChangeArea(value, selectedOptions) {
      console.log(JSON.stringify(value))
      // 返回指定Code的名称
      for (const val of value) {
        const areaName = divisionUtil.getNameByCode(val)
        console.log('当前省市县名称:', areaName)
      }
      this.form.fullCityCode = value.join(',')
    },
    filterArea(inputValue, path) {
      return path.some((option) => option.label.toLowerCase().indexOf(inputValue.toLowerCase()) > -1)
    },
    onClose () {
      this.open = false
    },
    // 取消按钮
    cancel () {
      this.open = false
      this.reset()
    },
    // 表单重置
    reset () {
      this.formType = 1
      this.form = {
        id: null,
        cattleNumber: null,
        cattleBreeds: null,
        optionalNumber: null,
        cattleFarmId: null,
        farmingPenId: null,
        batchId: null,
        fatherNumber: null,
        motherNumber: null,
        tenantId: null,
        deptId: null,
        userId: null
      }
    },
    /** 新增按钮操作 */
    handleAdd (row) {
      this.reset()
      this.formType = 1
      this.formDisabled = false
      this.open = true
      this.formTitle = '添加'
    },
    /** 修改按钮操作 */
    handleUpdate (row, ids) {
      this.formDisabled = false
      this.reset()
      this.formType = 2
      this.loading = true
      const id = row ? row.id : ids
      getDynaCattleBreed(id).then(response => {
        this.form = response.data
        if (this.form.fullCityCode) {
          const tArr = []
          const arr = this.form.fullCityCode.split(',')
          for (const item of arr) {
            tArr.push(arr)
          }
          this.$set(this.form, 'fullCityCodeArr', tArr)
        }
        this.open = true
        this.formTitle = '修改'
      }).finally(() => {
        this.loading = false
      })
    },
    showDetail (row, ids) {
      this.formDisabled = true
      this.reset()
      this.formType = 2
      this.loading = true
      const id = row ? row.id : ids
      getDynaCattleBreed(id).then(response => {
          this.form = response.data
          this.open = true
          this.formTitle = '详情'
      }).finally(() => {
          this.loading = false
      })
    },
    /** 提交按钮 */
    submitForm: function () {
      this.$refs.form.validate(valid => {
        if (valid) {
          this.submitLoading = true
          if (this.form.id !== undefined && this.form.id !== null) {
            updateDynaCattleBreed(this.form).then(response => {
              this.$message.success(
                '修改成功',
                3
              )
              this.open = false
              this.$emit('ok')
            }).finally(() => {
              this.submitLoading = false
            })
          } else {
            addDynaCattleBreed(this.form).then(response => {
              this.$message.success(
                '新增成功',
                3
              )
              this.open = false
              this.$emit('ok')
            }).finally(() => {
              this.submitLoading = false
            })
          }
        } else {
          this.$nextTick(()=>{
            this.scrollToFirstError()
          })
          return false
        }
      })
    },
    scrollToFirstError() {
      this.$nextTick(() => {
        const isError = document.getElementsByClassName('has-error')
        if (isError[0]) {
          isError[0].scrollIntoView({
            block: 'center',
            behavior: 'smooth',
          })
        }
      })
    },
  }
}
</script>
<style lang='less' scoped>
/deep/ .pgz-hidden{
    display: none
}
</style>

举报

相关推荐

0 条评论