全局下拉框添加filterable属性
This commit is contained in:
guanj
@@ -1,147 +1,147 @@
|
||||
<template>
|
||||
<!-- 新增 -->
|
||||
<el-dialog draggable :title="title" v-model="userAdd" width="500px" :before-close="cancel">
|
||||
<el-form :inline="true" ref="formRef" :model="addData" label-width="auto" class="form-one" :rules="rules">
|
||||
<el-form-item label="新能源场站名称:" prop="name">
|
||||
<el-input v-model="addData.name" clearable placeholder="请输入新能源场站名称"></el-input>
|
||||
</el-form-item>
|
||||
|
||||
<el-form-item label="干扰源类型:" prop="stationType">
|
||||
<el-select v-model="addData.stationType" clearable collapse-tags placeholder="请选择干扰源类型">
|
||||
<el-option v-for="item in newEnergy" :key="item.id" :label="item.name" :value="item.id"></el-option>
|
||||
</el-select>
|
||||
</el-form-item>
|
||||
|
||||
<el-form-item label="电压等级:" prop="scale">
|
||||
<el-select v-model="addData.scale" clearable collapse-tags placeholder="请选择电压等级">
|
||||
<el-option v-for="item in scaleList" :key="item.id" :label="item.name" :value="item.id"></el-option>
|
||||
</el-select>
|
||||
</el-form-item>
|
||||
<el-form-item label="额定有功功率(kW):" prop="ratedPower">
|
||||
<el-input-number v-model="addData.ratedPower" :min="0" style="width: 100%" />
|
||||
</el-form-item>
|
||||
<el-form-item label="经度：" prop="longitude">
|
||||
<el-input v-model="addData.longitude" type="text" placeholder="请输入经度" />
|
||||
</el-form-item>
|
||||
<el-form-item label="纬度：" prop="latitude">
|
||||
<el-input v-model="addData.latitude" type="text" placeholder="请输入纬度" />
|
||||
</el-form-item>
|
||||
</el-form>
|
||||
<template #footer>
|
||||
<el-button @click="cancel">取消</el-button>
|
||||
<el-button type="primary" @click="config">确定</el-button>
|
||||
</template>
|
||||
</el-dialog>
|
||||
</template>
|
||||
<script setup lang="ts">
|
||||
import { ref, reactive } from 'vue'
|
||||
import { useDictData } from '@/stores/dictData'
|
||||
import { ElMessage } from 'element-plus'
|
||||
import { editNewStation } from '@/api/device-boot/newEnergy'
|
||||
const dictData = useDictData()
|
||||
const userAdd = ref(false)
|
||||
const title = ref('')
|
||||
const newEnergy = dictData.getBasicData('new_station_type')
|
||||
const scaleList = dictData.getBasicData('Dev_Voltage_Stand')
|
||||
const emit = defineEmits(['onSubmit'])
|
||||
const rules = reactive({
|
||||
stationType: [{ required: true, message: '请选择干扰源类型', trigger: 'change' }],
|
||||
scale: [{ required: true, message: '请选择电压等级', trigger: 'change' }],
|
||||
name: [{ required: true, message: '请输入干扰源用户名称', trigger: 'blur' }],
|
||||
ratedPower: [{ required: true, message: '请输入额定功率', trigger: 'blur' }],
|
||||
longitude: [
|
||||
{
|
||||
required: true,
|
||||
message: '请输入经度',
|
||||
trigger: 'blur'
|
||||
},
|
||||
{
|
||||
validator: (rule, value, callback) => {
|
||||
if (!longitudeReg.test(value)) {
|
||||
callback(new Error('请输入有效的经度'))
|
||||
} else {
|
||||
callback()
|
||||
}
|
||||
},
|
||||
trigger: 'change'
|
||||
}
|
||||
],
|
||||
latitude: [
|
||||
{
|
||||
required: true,
|
||||
message: '请输入纬度',
|
||||
trigger: 'blur'
|
||||
},
|
||||
{
|
||||
validator: (rule, value, callback) => {
|
||||
if (!latitudeReg.test(value)) {
|
||||
callback(new Error('请输入有效的纬度'))
|
||||
} else {
|
||||
callback()
|
||||
}
|
||||
},
|
||||
trigger: 'change'
|
||||
}
|
||||
]
|
||||
})
|
||||
// 经度正则表达式
|
||||
const longitudeReg = /^[-+]?((180(\.0{1,10})?)|(1[0-7][0-9](\.\d{1,10})?)|([1-9]?\d(\.\d{1,10})?)|(0(\.\d{1,10})?))$/
|
||||
// 纬度正则表达式
|
||||
const latitudeReg = /^[-+]?((90(\.0{1,10})?)|([1-8]?\d(\.\d{1,10})?)|(0(\.\d{1,10})?))$/
|
||||
|
||||
const addData = ref({
|
||||
scale: '',
|
||||
stationType: '',
|
||||
name: '',
|
||||
ratedPower: 0,
|
||||
longitude: '',
|
||||
latitude: ''
|
||||
})
|
||||
const formRef = ref()
|
||||
// 新增
|
||||
const config = () => {
|
||||
formRef.value.validate((valid: any) => {
|
||||
if (valid) {
|
||||
editNewStation(addData.value).then((res: any) => {
|
||||
ElMessage.success(title.value + '成功!')
|
||||
emit('onSubmit')
|
||||
cancel()
|
||||
})
|
||||
}
|
||||
})
|
||||
}
|
||||
// 重置
|
||||
const cancel = () => {
|
||||
// formRef.value.resetFields()
|
||||
userAdd.value = false
|
||||
}
|
||||
const open = (row: any) => {
|
||||
addData.value = {
|
||||
scale: '',
|
||||
stationType: '',
|
||||
name: '',
|
||||
ratedPower: 0,
|
||||
longitude: '',
|
||||
latitude: ''
|
||||
}
|
||||
title.value = row.title
|
||||
if (row.title === '修改') {
|
||||
addData.value = {
|
||||
id: row.row.id,
|
||||
scale: row.row.scale,
|
||||
stationType: row.row.stationType,
|
||||
name: row.row.name,
|
||||
ratedPower: row.row.ratedPower - 0,
|
||||
longitude: row.row.longitude,
|
||||
latitude: row.row.latitude
|
||||
}
|
||||
}
|
||||
userAdd.value = true
|
||||
setTimeout(() => {
|
||||
formRef.value.clearValidate()
|
||||
}, 20)
|
||||
}
|
||||
|
||||
defineExpose({ open })
|
||||
</script>
|
||||
<style lang="scss" scoped></style>
|
||||
<template>
|
||||
<!-- 新增 -->
|
||||
<el-dialog draggable :title="title" v-model="userAdd" width="500px" :before-close="cancel">
|
||||
<el-form :inline="true" ref="formRef" :model="addData" label-width="auto" class="form-one" :rules="rules">
|
||||
<el-form-item label="新能源场站名称:" prop="name">
|
||||
<el-input v-model="addData.name" clearable placeholder="请输入新能源场站名称"></el-input>
|
||||
</el-form-item>
|
||||
|
||||
<el-form-item label="干扰源类型:" prop="stationType">
|
||||
<el-select v-model="addData.stationType" clearable collapse-tags placeholder="请选择干扰源类型" filterable>
|
||||
<el-option v-for="item in newEnergy" :key="item.id" :label="item.name" :value="item.id"></el-option>
|
||||
</el-select>
|
||||
</el-form-item>
|
||||
|
||||
<el-form-item label="电压等级:" prop="scale">
|
||||
<el-select v-model="addData.scale" clearable collapse-tags placeholder="请选择电压等级" filterable>
|
||||
<el-option v-for="item in scaleList" :key="item.id" :label="item.name" :value="item.id"></el-option>
|
||||
</el-select>
|
||||
</el-form-item>
|
||||
<el-form-item label="额定有功功率(kW):" prop="ratedPower">
|
||||
<el-input-number v-model="addData.ratedPower" :min="0" style="width: 100%" />
|
||||
</el-form-item>
|
||||
<el-form-item label="经度：" prop="longitude">
|
||||
<el-input v-model="addData.longitude" type="text" placeholder="请输入经度" />
|
||||
</el-form-item>
|
||||
<el-form-item label="纬度：" prop="latitude">
|
||||
<el-input v-model="addData.latitude" type="text" placeholder="请输入纬度" />
|
||||
</el-form-item>
|
||||
</el-form>
|
||||
<template #footer>
|
||||
<el-button @click="cancel">取消</el-button>
|
||||
<el-button type="primary" @click="config">确定</el-button>
|
||||
</template>
|
||||
</el-dialog>
|
||||
</template>
|
||||
<script setup lang="ts">
|
||||
import { ref, reactive } from 'vue'
|
||||
import { useDictData } from '@/stores/dictData'
|
||||
import { ElMessage } from 'element-plus'
|
||||
import { editNewStation } from '@/api/device-boot/newEnergy'
|
||||
const dictData = useDictData()
|
||||
const userAdd = ref(false)
|
||||
const title = ref('')
|
||||
const newEnergy = dictData.getBasicData('new_station_type')
|
||||
const scaleList = dictData.getBasicData('Dev_Voltage_Stand')
|
||||
const emit = defineEmits(['onSubmit'])
|
||||
const rules = reactive({
|
||||
stationType: [{ required: true, message: '请选择干扰源类型', trigger: 'change' }],
|
||||
scale: [{ required: true, message: '请选择电压等级', trigger: 'change' }],
|
||||
name: [{ required: true, message: '请输入干扰源用户名称', trigger: 'blur' }],
|
||||
ratedPower: [{ required: true, message: '请输入额定功率', trigger: 'blur' }],
|
||||
longitude: [
|
||||
{
|
||||
required: true,
|
||||
message: '请输入经度',
|
||||
trigger: 'blur'
|
||||
},
|
||||
{
|
||||
validator: (rule, value, callback) => {
|
||||
if (!longitudeReg.test(value)) {
|
||||
callback(new Error('请输入有效的经度'))
|
||||
} else {
|
||||
callback()
|
||||
}
|
||||
},
|
||||
trigger: 'change'
|
||||
}
|
||||
],
|
||||
latitude: [
|
||||
{
|
||||
required: true,
|
||||
message: '请输入纬度',
|
||||
trigger: 'blur'
|
||||
},
|
||||
{
|
||||
validator: (rule, value, callback) => {
|
||||
if (!latitudeReg.test(value)) {
|
||||
callback(new Error('请输入有效的纬度'))
|
||||
} else {
|
||||
callback()
|
||||
}
|
||||
},
|
||||
trigger: 'change'
|
||||
}
|
||||
]
|
||||
})
|
||||
// 经度正则表达式
|
||||
const longitudeReg = /^[-+]?((180(\.0{1,10})?)|(1[0-7][0-9](\.\d{1,10})?)|([1-9]?\d(\.\d{1,10})?)|(0(\.\d{1,10})?))$/
|
||||
// 纬度正则表达式
|
||||
const latitudeReg = /^[-+]?((90(\.0{1,10})?)|([1-8]?\d(\.\d{1,10})?)|(0(\.\d{1,10})?))$/
|
||||
|
||||
const addData = ref({
|
||||
scale: '',
|
||||
stationType: '',
|
||||
name: '',
|
||||
ratedPower: 0,
|
||||
longitude: '',
|
||||
latitude: ''
|
||||
})
|
||||
const formRef = ref()
|
||||
// 新增
|
||||
const config = () => {
|
||||
formRef.value.validate((valid: any) => {
|
||||
if (valid) {
|
||||
editNewStation(addData.value).then((res: any) => {
|
||||
ElMessage.success(title.value + '成功!')
|
||||
emit('onSubmit')
|
||||
cancel()
|
||||
})
|
||||
}
|
||||
})
|
||||
}
|
||||
// 重置
|
||||
const cancel = () => {
|
||||
// formRef.value.resetFields()
|
||||
userAdd.value = false
|
||||
}
|
||||
const open = (row: any) => {
|
||||
addData.value = {
|
||||
scale: '',
|
||||
stationType: '',
|
||||
name: '',
|
||||
ratedPower: 0,
|
||||
longitude: '',
|
||||
latitude: ''
|
||||
}
|
||||
title.value = row.title
|
||||
if (row.title === '修改') {
|
||||
addData.value = {
|
||||
id: row.row.id,
|
||||
scale: row.row.scale,
|
||||
stationType: row.row.stationType,
|
||||
name: row.row.name,
|
||||
ratedPower: row.row.ratedPower - 0,
|
||||
longitude: row.row.longitude,
|
||||
latitude: row.row.latitude
|
||||
}
|
||||
}
|
||||
userAdd.value = true
|
||||
setTimeout(() => {
|
||||
formRef.value.clearValidate()
|
||||
}, 20)
|
||||
}
|
||||
|
||||
defineExpose({ open })
|
||||
</script>
|
||||
<style lang="scss" scoped></style>
|
||||
|
||||
Reference in New Issue
Block a user