@ -15,25 +15,16 @@
< / template >
< template # ryLxdh >
< div class = "phone-input-container" >
< div class = "inputGroup" v-for = "(item,index) in listQuery.ryLxdh" :key="index" >
< div class = "inputGroup" v-for = "(item, index) in listQuery.ryLxdh" :key="index" >
< el -input v-model = "listQuery.ryLxdh[index]" class="group" placeholder="请输入电话号码" / >
< div class = "flex align-center but" >
< el-button type = "primary" :icon = "Plus" circle @click ="addPhone" title = "添加电话号码" v-if = " listQuery.ryLxdh.length-1 ==index" />
< div class = "flex align-center but" v-if = "showBut" >
< el -button type = "primary" :icon = "Plus" circle @click ="addPhone" title = "添加电话号码"
v-if = "listQuery.ryLxdh.length - 1 == index" / >
< el-button type = "success" :icon = "Minus" circle @click ="removePhone(index)" title = "删除电话号码" / >
< / div >
< / div >
< / div >
< / template >
<!-- < template # tags >
< div style = "display: flex; align-items: center;" >
< el-button type = "primary" :disabled = "disabled" @click ="chooseMarksVisible = true" >
选择标签
< / el -button >
< div v-if = "roleIds.length > 0" style="margin-left: 10px; color: #606266;" >
已选择 {{ roleIds.length }} 个标签
< / div >
< / div >
< / template > - - >
< / FormMessage >
< / div >
@ -44,14 +35,14 @@
< script setup >
import * as rule from "@/utils/rules.js" ;
import * as MOSTY from "@/components/MyComponents/index" ;
import { Plus , Minus } from "@element-plus/icons-vue" ;
import { Plus , Minus } from "@element-plus/icons-vue" ;
import FormMessage from "@/components/aboutTable/FormMessage.vue" ;
import ChooseMarks from "@/components/ChooseList/ChooseMarks/index.vue" ;
import { ref , reactive , onMounted , getCurrentInstance , watch } from "vue" ;
import { tbGsxtZdryUpdate } from "@/api/zdr.js" ;
const { proxy } = getCurrentInstance ( ) ;
const { D _BZ _XB , D _BZ _ZZMM , D _BZ _HYZK , D _BZ _MZ , D _BZ _XZQHDM , D _ZDRY _RYLX , D _BZ _RCBKZT , D _GS _ZDR _RYJB , D _GS _ZDR _YJDJ , D _GS _BK _SSJZ , D _GS _ZDR _CZZT , D _BZ _WHCD , D _ZDRY _ZYLB } =
proxy . $dict ( 'D_BZ_XB' , 'D_BZ_ZZMM' , 'D_BZ_HYZK' , 'D_BZ_MZ' , "D_ZDRY_RYLX" , 'D_BZ_XZQHDM' , 'D_BZ_RCBKZT' , 'D_GS_ZDR_RYJB' , 'D_GS_ZDR_YJDJ' , 'D_GS_BK_SSJZ' , 'D_GS_ZDR_CZZT' , 'D_BZ_WHCD' , 'D_ZDRY_ZYLB' )
const { D _BZ _XB , D _BZ _ZZMM , D _BZ _HYZK , D _BZ _MZ , D _BZ _XZQHDM , D _ZDRY _RYLX , D _BZ _RCBKZT , D _GS _ZDR _RYJB , D _GS _ZDR _YJDJ , D _GS _BK _SSJZ , D _GS _ZDR _CZZT , D _BZ _WHCD , D _ZDRY _ZYLB } =
proxy . $dict ( 'D_BZ_XB' , 'D_BZ_ZZMM' , 'D_BZ_HYZK' , 'D_BZ_MZ' , "D_ZDRY_RYLX" , 'D_BZ_XZQHDM' , 'D_BZ_RCBKZT' , 'D_GS_ZDR_RYJB' , 'D_GS_ZDR_YJDJ' , 'D_GS_BK_SSJZ' , 'D_GS_ZDR_CZZT' , 'D_BZ_WHCD' , 'D_ZDRY_ZYLB' )
const props = defineProps ( {
dataList : {
type : Object ,
@ -80,7 +71,7 @@ const rules = reactive({
zdrYjdj : [ { required : true , message : "请选择预警等级" , trigger : "change" } ] ,
rylx : [ { required : true , message : "请选择人员类型" , trigger : "change" } ]
} ) ;
const listQuery = ref ( { ryLxdh : [ "" ] } ) ; //表单
const listQuery = ref ( { ryLxdh : [ "" ] } ) ; //表单
const chooseMarksVisible = ref ( false ) ; // 控制标签选择弹窗显示
const roleIds = ref ( [ ] ) ; // 已选择的标签ID
const formData = ref ( [
@ -149,7 +140,7 @@ watch(() => props.dataList, (val) => {
listQuery . value = deepClone ( val ) ;
// 处理照片数据
listQuery . value . ryzp = val . ryzp == null || val . ryzp == '' ? [ ] : [ val . ryzp ] ;
listQuery . value . zdrSjjz = val . zdrSjjz == null || val . zdrSjjz == '' ? [ ] : JSON . parse ( val . zdrSjjz ) ;
listQuery . value . zdrSjjz = val . zdrSjjz == null || val . zdrSjjz == '' ? [ ] : JSON . parse ( val . zdrSjjz ) ;
// 处理标签ID数据, 确保数据回显
if ( val . tagIds && Array . isArray ( val . tagIds ) && val . tagIds . length > 0 ) {
roleIds . value = [ ... val . tagIds ] ;
@ -163,18 +154,23 @@ watch(() => props.dataList, (val) => {
// 提交
const submit = ( ) => {
loading . value = true
gettbGsxtZdryUpdate ( )
gettbGsxtZdryUpdate ( )
} ;
//
const gettbGsxtZdryUpdate = ( ) => {
const promes = {
... listQuery . value ,
ryzp : listQuery . value . ryzp . length > 0 ? listQuery . value . ryzp . toString ( ) : "" ,
ryLxdh : listQuery . value . ryLxdh ,
zdrSjjz : JSON . stringify ( listQuery . value . zdrSjjz ) ,
zdrSjjz : JSON . stringify ( listQuery . value . zdrSjjz ) ,
}
tbGsxtZdryUpdate ( promes ) . then ( ( res ) => {
elform . value . submit ( ( data ) => {
tbGsxtZdryUpdate ( promes ) . then ( ( res ) => {
listQuery . value . ryzp = [ ]
proxy . $message ( {
message : '更新成功' ,
@ -185,6 +181,10 @@ const gettbGsxtZdryUpdate = () => {
} ) . finally ( ( ) => {
loading . value = false
} ) ;
} )
}
// 添加电话号码
const addPhone = ( ) => {
@ -198,8 +198,8 @@ const addPhone = () => {
// 删除电话号码
const removePhone = ( index ) => {
if ( listQuery . value . ryLxdh . length > 1 ) {
listQuery . value . ryLxdh . splice ( index , 1 ) ;
if ( listQuery . value . ryLxdh . length > 1 ) {
listQuery . value . ryLxdh . splice ( index , 1 ) ;
} else {
// 清空输入但保留输入框
listQuery . value . ryLxdh [ 0 ] = '' ;
@ -210,37 +210,39 @@ const removePhone = (index) => {
const throwData = ( ) => {
return new Promise ( ( resolve , reject ) => {
if ( elform . value && elform . value . validate ) {
elform . value . validate ( ( valid ) => {
if ( valid ) {
// 过滤掉空的电话号码
const validPhones = listQuery . value . ryLxdh . filter ( phone => phone && phone . trim ( ) ) ;
if ( validPhones . length === 0 ) {
reject ( new Error ( '请至少输入一个有效的联系电话' ) ) ;
return ;
}
resolve ( {
... listQuery . value ,
ryzp : listQuery . value . ryzp && listQuery . value . ryzp . length > 0 ? listQuery . value . ryzp . toString ( ) : '' ,
ryLxdh : validPhones ,
zdrSjjz : JSON . stringify ( listQuery . value . zdrSjjz ) ,
} ) ;
} else {
reject ( new Error ( '表单验证失败,请检查输入信息' ) ) ;
elform . value . submit ( ( data ) => {
// 过滤掉空的电话号码
const validPhones = listQuery . value . ryLxdh . filter ( phone => phone && phone . trim ( ) ) ;
if ( validPhones . length === 0 ) {
proxy . $message . warning ( '请至少输入一个有效的联系电话' ) ;
reject ( new Error ( '请至少输入一个有效的联系电话' ) ) ;
return ;
}
} ) ;
resolve ( {
... listQuery . value ,
ryzp : listQuery . value . ryzp && listQuery . value . ryzp . length > 0 ? listQuery . value . ryzp . toString ( ) : '' ,
ryLxdh : validPhones ,
zdrSjjz : JSON . stringify ( listQuery . value . zdrSjjz ) ,
} ) ;
} )
} else {
// 如果没有验证方法,直接返回数据
const validPhones = listQuery . value . ryLxdh . filter ( phone => phone && phone . trim ( ) ) ;
if ( validPhones . length === 0 ) {
reject ( new Error ( '请至少输入一个有效的联系电话' ) ) ;
return ;
}
resolve ( {
... listQuery . value ,
ryzp : listQuery . value . ryzp && listQuery . value . ryzp . length > 0 ? listQuery . value . ryzp . toString ( ) : '' ,
ryLxdh : validPhones ,
zdrSjjz : JSON . stringify ( listQuery . value . zdrSjjz ) ,
} ) ;
elform . value . submit ( ( data ) => {
// 如果没有验证方法,直接返回数据
const validPhones = listQuery . value . ryLxdh . filter ( phone => phone && phone . trim ( ) ) ;
if ( validPhones . length === 0 ) {
proxy . $message . warning ( '请至少输入一个有效的联系电话' ) ;
reject ( new Error ( '请至少输入一个有效的联系电话' ) ) ;
return ;
}
resolve ( {
... listQuery . value ,
ryzp : listQuery . value . ryzp && listQuery . value . ryzp . length > 0 ? listQuery . value . ryzp . toString ( ) : '' ,
ryLxdh : validPhones ,
zdrSjjz : JSON . stringify ( listQuery . value . zdrSjjz ) ,
} ) ;
} )
}
} ) ;
} ;
@ -313,23 +315,25 @@ h3 {
padding : 0 ;
}
. inputGroup {
margin - left : 10 px ;
width : 100 % ;
max - width : 400 px ;
display : flex ;
align - items : center ;
margin - bottom : 10 px ;
. group {
width : 250 px ;
margin - right : 1 0px ;
}
. but {
display : flex ;
gap : 5 px ;
}
. inputGroup {
margin - left : 10 px ;
width : 100 % ;
max - width : 400 px ;
display : flex ;
align - items : center ;
margin - bottom : 10 px ;
. group {
width : 25 0px ;
margin - right : 10 px ;
}
. but {
display : flex ;
gap : 5 px ;
}
}
: : v - deep . el - button -- primary {
background - color : # 409 eff ! important ;
border - color : # 409 eff ! important ;
@ -339,5 +343,4 @@ h3 {
background - color : # 67 c23a ! important ;
border - color : # 67 c23a ! important ;
}
< / style >