需求
用户点击编辑图标会到编辑页面,带过去的内容有 手机号和姓名 以及标签(这里标签是个id)
联系人和电话我知道如何回显 但是标签不会了,会的大哥帮忙看看了,谢谢
一下是主要代码`<template>
<view class="addLiaison-box">
<view class="addLiaison-content">
<view class="content-box">
<u-form :model="form" ref="uForm">
<u-form-item label="联系人" label-width="auto" prop="name">
<u-input v-model="form.name" placeholder="请填写联系人姓名" />
</u-form-item>
<u-form-item label="联系电话" label-width="auto" prop="telPhone">
<u-input v-model="form.telPhone" placeholder="请填写联系电话" />
</u-form-item>
</u-form>
<view class="content-tag">
设置标签
</view>
<view class="content-text">
<u-tag class="tags-text" :text="item.dictName" v-for='(item,dictValue) in dataType' :key='dictValue'
:type="item.type" mode="plain" show="true" @click="tagClick(item)" />
</view>
</view>
</view>
<view class="addLiaison-button">
<u-modal v-model="show"
show-cancel-button="isCancel"
cancel-text="取消"
:content="content"
:show-title=isTitle
@confirm="confirm"
@cancel="cancel"
></u-modal>
<u-button @click="conserve" size="medium" type="primary" shape="circle" >保存并使用</u-button>
<u-button @click="delLiaison" size="medium" type="error" shape="circle" >删除</u-button></view>
</view>
</template>
<script>
import { mapActions } from 'vuex';export default {
data() {
return {
form: {
name: '',
telPhone: '',
},
show:false,
isTitle:false,
isCancel:true,
content:'确定要删除联系人吗',
dataType: [],
// 联系信息
liaisonData:{},
// 选中的联系人标签
drugRelation:'',
rules:{
name:[
{required: true,message: '请输入联系人姓名',trigger: ['change','blur']},
],
telPhone:[
{required: true,message: '请输入联系人电话',trigger: ['change','blur']},
{validator: (rule, value, callback) => {
return this.$u.test.mobile(value);
},
message: '联系人电�安徽�',
trigger: ['change','blur'],
}
]
}
}
},onLoad (option) {
// 接收到用户选中的数据
console.log('items',option)
this.liaisonData = option
this.form = {...option}
this.drugRelation = option.drugRelation
// if(option.drugRelation )
// this.dataType = option
// this.dataType.find(item=>item===option.drugRelation)
// this.dataType.forEach(item=>{
// console.log("111111",item)
// item.type = 'primary'
// if(item.drugRelation===option.drugRelation){
// item.type = 'primary'
// }
// })
},
onReady() {
this.$refs.uForm.setRules(this.rules);
},
methods:{
...mapActions(['ActLiaisonTag','ActUpdateMemberUser','ActDeleteMemberUser']),
tagClick(item){
// 用户点击的时候通过改变type的值来显示
this.dataType.forEach(element => {
element.type = 'info'
});
item.type = 'primary'
this.drugRelation = item.dictValue
},
// 保存
conserve(){
this.$refs.uForm.validate(async(valid) => {
if(!valid){
return
}else{
if(!this.drugRelation){
this.$refs.uToast.show({
title: '请选择标签',
})
}else{
const formData = {
name:this.form.name,
telPhone:this.form.telPhone,
drugRelation:this.drugRelation,
id:this.liaisonData.id
}
this.ActUpdateMemberUser(formData)
this.$u.route({
url:'pages/person/liaison',
type:'redirect'
})
}
}
})
},
delLiaison(){
this.show = true
},
cancel(){
this.show = false
},
confirm(){
this.ActDeleteMemberUser({id:this.liaisonData.id})
this.$u.route({
url:'pages/person/liaison',
type:'redirect'
})
},
async getTag(){
const {code,data} = await this.ActLiaisonTag()
if(code === 200 ){
this.dataType = data.map(item=>{
this.$set(item,'type','info')
return item
})
}
},
},
mounted () {
this.getTag()
}}
</script>
<style lang="scss" scoped>
page {
height: 100%;
background-color: #f6f6f6;}
.addLiaison-box{
margin: 0 24rpx;
.addLiaison-content{
padding: 0 24rpx;
border-radius: 16rpx;
background-color:#FFF;
margin-top: 24rpx;
.content-box{
u-form-item{
color: #333333;
font-size: 28rpx;
font-weight: 500;
}
.content-tag{
padding-top: 28rpx;
color: #333333;
font-size: 28rpx;
font-weight: 500;
}
.content-text{
padding: 32rpx 0 32rpx;
.tags-text{
margin: 12rpx;
}
}
}}
.addLiaison-button{
padding-top: 48rpx;
u-button{
margin: 0 24rpx;
}}
}
</style>~~~~`
:class=['传递过来的tagid'==item.id?'active':'' ]
这里的active 作为一个凸显tag的css
相关文章
精彩导读
热门资讯