cdssHospital/src/components/knowledgeExtra/AddNewRuleContent.vue

<template>
	<div class="contentRuls">
		<p class="content_p">
			<span class="strat_red">*</span>
			<span class="content_ts">推送内容</span>
			<span class="content_err" v-if="isError">静态信息和附加信息必须填写至少一项！</span>
		</p>
		<el-form :model="formData" label-width="120px"  ref="formData" :rules="rules" class="form-address">
			<el-row>
				<el-col :span='10'>
					<el-form-item label="关联静态信息" prop="gljtxx">
						<el-select 
						  v-model.trim="formData.gljtxx" 
						  placeholder="请选择" 
						  multiple 
						  collapse-tags 
                          filterable
                          remote
                          :multiple-limit="50"
                          reserve-keyword
                          :remote-method="getStaicTypes"
						  @visible-change="changeValue1"
                          >
							<el-option v-for="item in opts_type" :key="item.id" :label="item.name" :value="item.id"></el-option>
						</el-select>
					</el-form-item>
				</el-col>
			</el-row>
			<el-row>
				<el-col :span='24'>
					<el-form-item label="附加信息" prop="fjxx">
					    <el-input type="textarea" :rows="2" v-model.trim="formData.fjxx" resize="none" :maxlength='251'></el-input>
					</el-form-item>
				</el-col>
			</el-row>
		</el-form>
	</div>
</template>

<script type="text/javascript">
	import api from "@api/knowledgeLib.js";
	export default {
		name: "AddNewRuleContent",
		props: {
			isContent: {
			  type: Boolean,
			  default:false,
			},
			formEidtCopy:{
				type:Object,
			},
			isError: {
			  type: Boolean,
			  default:false,
			},
		},
		watch:{
			isError:{
				handler(val){
					console.log(val)
				}
			}
		},
		data(){
			return {
				formData:{
					gljtxx:[],//关联静态知识
					fjxx:''  //附加信息			 
				},
				opts_type:[],
				rules:{
					fjxx:{min: 0,max: 250,message: '输入字符长度不能超过250位',trigger: 'change'}
				},
			} 		
		},
		  
		created() {
			console.log('formEidtCopy',this.formEidtCopy)
			//编辑回显
			if(this.isContent){
				//关联静态知识
				this.formEidtCopy.klRuleByIdGroup[0].klRuleStaticSub.forEach((item)=>{
					let obj={}
					obj.id=item.conceptId;
					obj.name=item.name;
					this.opts_type.push(obj)
					this.formData.gljtxx.push(obj.id)
				})
				//附加信息
				this.formData.fjxx=this.formEidtCopy.parMsg
			}
		},
		mounted() {
			this.getStaicTypes()
		},
		methods:{
			//初始化
			clearFormData(){
			    this.formData={
					gljtxx:[],//关联静态知识
					fjxx:''  //附加信息			 
				},
				this.opts_type=[];
				this.isErr=false;
			},
			//获取关联静态知识
			getStaicTypes(query){
				console.log(query)
				let param={
					inputStr: query,
					types: [9]  
				}
				if (query == '') {
				  return;
				}
				if (query){
					api.getStaicTypes(param).then((res) => {
						console.log(res)
					  if (res.data.code == 0) {
					    this.opts_type=res.data.data
					  } else {
					    this.$message({
					      message: res.data.msg,
					      type: "warning",
					    });
					  }
					});
				}
				
				
			},
			changeValue1(query){
				console.log(this.formData.gljtxx)
				if(this.formData.gljtxx.length==0){
					this.opts_type=[]
				}
			},
			 setName(val){
				 if(val&&val.length>6){
					val=val.substring(0,6)
				 }
				 return val
			 }
		},
		watch:{
			formData:{
				handler(newName, oldName) {
					if(newName){
						this.$emit('ruleContent',this.formData)
					}
				},      
				immediate: true,
				deep: true    
			}
		}
	}
</script>

<style  lang="less" scoped>
	.contentRuls{
		background: #fff;
		padding: 20px;
		padding-left: 30px;
		padding-bottom:0px;
		font-size: 14px;
		color: #606266;
		.content_p{
			position: relative;
			padding-bottom: 10px;
			.strat_red{
				color: #F56C6C;
				position: absolute;
				top: 0;
				left: -10px;
			}
			.content_ts{
				color: #333;
				font-size: 16px;
			}
			.content_err{
				color: red;
				font-size: 14px;
				margin-left: 20px;
			}
		}
		.form-address{
			/deep/.el-select{
				width: 100%;
			}
			/deep/.el-select__tags-text {
			    overflow: hidden;
			    text-overflow: ellipsis;
			    max-width: 90px;
			}
		}
		
	}
</style>