:::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>截图
完整代码
<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>