hz_crm_web/src/views/custom_manage/customList/addCustom.vue

<template>
	<div class="addCustom_container">
		<el-form 
		@submit.native.prevent 
		inline 
		:model="dataForm" 
		:rules="formRule"
		hide-required-asterisk
		ref="dataForm" 
		label-width="100px"
		class="demo-ruleForm">
			<el-form-item label="所属区域" prop="cuStatus" style="marginRight:120px;">
				<i style="color:#f00;fontSize:20px;position:absolute;left:-90px;top:10%;">*</i>
				<el-radio-group v-model="dataForm.area" size="medium" style="width:400px;">
					<el-radio border label="国内"  style="width:184px;"></el-radio>
					<el-radio border label="海外" style="width:184px;marginLeft:0;"></el-radio>
				</el-radio-group>
			</el-form-item>
			<el-form-item label="客户全称" prop="custom_name">
				<i style="color:#f00;fontSize:20px;position:absolute;left:-90px;top:10%;">*</i>
				<!-- <el-autocomplete
				v-model="dataForm.custom_name"
				:fetch-suggestions="callbackHandle"
				placeholder="请输入公司全称"
				@input="getCompany(dataForm.custom_name)"
				@blur="checkCompany(dataForm.custom_name,'')"
				style="width:400px"
				clearable></el-autocomplete> -->
				  <autocomplete
						ref="auto"
						v-model="dataForm.custom_name"
						:fetch-suggestions="callbackHandle"
						placeholder="请输入公司全称"
						@blur="checkCompany"
						@select="customNameSelect"
						@focus="checkCompanyfocus"
						:disabled='inquireSuccess'
						clearable
						value-key="value"
						style="width:400px"
						:popper-class="isCheck?'el-autocomplete-none':'el-autocomplete-suggestion-data-entry'"
						class="autocomplete-input"
						>
					<span v-if="dataForm.custom_name.length > 3" style="color:#409EFF;cursor: pointer;" slot="suffix"  @click="$refs.auto.search(dataForm.custom_name)"> 查询</span>
						<template slot-scope="scope">
						<div  v-if="scope.item.KeyNo" >
							{{scope.item.Name}}
						</div>
						<div v-else style="text-align:center">暂无数据</div>		 
						</template>
				</autocomplete>
			</el-form-item>
			<el-form-item label="社会信用码" prop="code" style="marginRight:120px;">
				<i style="color:#f00;fontSize:20px;position:absolute;left:-106px;top:10%;">*</i>
				<el-input 
				v-model="dataForm.code"
				placeholder="请输入社会信用码"
				@blur="checkCompany"
				@focus="checkCompanyfocus"
				style="width:400px"
				disabled
				clearable></el-input>
			</el-form-item>
			<el-form-item v-if="dataForm.area==='海外'" label="所属国家" prop="Nation"
				:rules="[{required:true,message: '所属国家不能为空', trigger: 'change' }]">
				<i style="color:#f00;fontSize:20px;position:absolute;left:-90px;top:10%;">*</i>
				<el-select v-model="dataForm.Nation" placeholder="请选择" filterable style="width: 400px;">
					<el-option :label="item.cnName" :value="item.cnName" v-for="item in countryData" :key="item.code" >
					<div style="display: flex;justify-content: space-between;">
						<span>{{ item.cnName }}</span>
						<span style="color: #8492a6; font-size: 13px">{{ item.code }}</span>
					</div>
					</el-option>
				</el-select>
			</el-form-item>
			<el-form-item v-else label="客户地址" prop="city"  :rules="[{
					required:true,
					message: '客户地址不能为空', 
					trigger: 'change' }]">
				<i style="color:#f00;fontSize:20px;position:absolute;left:-90px;top:10%;">*</i>
				<search-dist-picker @selected="selectRegion"/>
			</el-form-item>
			<el-form-item label="客户状态" prop="cuStatus" style="marginRight:120px;">
				<i style="color:#f00;fontSize:20px;position:absolute;left:-90px;top:10%;">*</i>
				<el-radio-group v-model="dataForm.cuStatus" size="medium" style="width:400px;">
					<el-radio border label="试用"  style="width:184px;">试用（{{typeArr.includes('权益') ? 1 : 2}}个月）</el-radio>
					<el-radio border label="永续" style="width:184px;marginLeft:0;" v-if="Role=='admin'">永续</el-radio>
				</el-radio-group>
			</el-form-item>
			<el-form-item label="客户来源" prop="from">
				<i style="color:#f00;fontSize:20px;position:absolute;left:-90px;top:10%;">*</i>
				<el-select v-model="dataForm.from" placeholder="请选择客户来源" style="width:400px;" filterable>
					<el-option
					v-for="item in fromArr"
					:key="item.SourceId"
					:label="item.SourceName"
					:value="item.SourceName">
					</el-option>
				</el-select>
			</el-form-item>
			<el-form-item label="客户类型" prop="custype" style="marginRight:120px;">
				<i style="color:#f00;fontSize:20px;position:absolute;left:-90px;top:10%;">*</i>
				<el-select v-model="dataForm.custype" placeholder="请选择客户类型" style="width:400px;">
					<template>
						<el-option
							v-for="item in typeArr"
							:key="item"
							:label="item"
							:value="item">
						</el-option>
					</template>
				</el-select>
			</el-form-item>
			<el-form-item label="行业" prop="trade">
				<i style="color:#f00;fontSize:20px;position:absolute;left:-58px;top:10%;">*</i>
				<el-select v-model="dataForm.trade" placeholder="请选择行业" style="width:400px;" @focus="slideTrade">
					<el-option
					v-for="item in tradeArr"
					:key="item"
					:label="item.IndustryName"
					:value="item.IndustryId">
					</el-option>
				</el-select>
			</el-form-item>
			<el-form-item label="所属销售" prop="sales" style="marginRight:120px;">
				
				<i style="color:#f00;fontSize:20px;position:absolute;left:-90px;top:10%;">*</i>
				<el-select v-model="dataForm.sales" placeholder="请选择销售" style="width:400px;" filterable :disabled="Role=='rai_seller'||Role=='ficc_seller'||Role=='ficc_sell_director'">
					<el-option
					v-for="item in salesArr"
					:key="item.AdminId"
					:label="item.RealName"
					:value="item.AdminId">
					</el-option>
				
				</el-select>
			</el-form-item>
			<!-- <el-form-item prop="addreason" label="备注" >
				<i style="color:#f00;fontSize:20px;position:absolute;left:-58px;top:10%;">*</i>
				<el-input 
				v-model="dataForm.addreason"
				placeholder="请输入备注"
				style="width:400px"
				clearable></el-input>
			</el-form-item> -->
			<el-form-item prop="money" style="disply:block" label="管理规模" v-if="dataForm.custype=='权益'" >
				<el-select 	style="width:400px" v-model="dataForm.money" clearable placeholder="请选择管理规模（选填）">
					<el-option
					v-for="item in optionsMoney"
					:key="item.value"
					:label="item.label"
					:value="item.value">
					</el-option>
				</el-select>
			</el-form-item>
			<el-form-item class="textarea_item" style="width:90%;paddingLeft:26px;">
				<label style="display:block;marginBottom:20px;fontSize:16px;position:relative;">
					<i style="color:#f00;fontSize:20px;position:absolute;left:-15px;top:10%;">*</i>
					权限设置
				</label>
				<ul class="menu_lists">
					<li v-for="item in authList" :key="item.ClassifyName" class="menu_item">
						<el-checkbox :indeterminate="item.isIndeterminate" v-model="item.checkAll" :disabled="setSelectPerDisabled(item)" @change="handleCheckAll(item)" style="marginRight:30px;fontWeight:bold;minWidth:90px;">{{item.ClassifyName+':'}}</el-checkbox>
						<el-checkbox-group  v-model="item.CheckList" @change="handleChecked(item)">
							<el-checkbox v-for="list in item.Items" :label="list.ChartPermissionId" :key="list.ChartPermissionId" class="list_item" :disabled="list.IsPublic==1">{{list.PermissionName}}</el-checkbox>
						</el-checkbox-group>
					</li>
				</ul>
			</el-form-item>
			<!-- <el-form-item class="textarea_item" style="width:90%;paddingLeft:26px;" v-if="dataForm.custype=='权益'">
				<label style="display:block;marginBottom:20px;fontSize:16px;position:relative;">
					<i style="color:#f00;fontSize:20px;position:absolute;left:-15px;top:10%;">*</i>
					权限设置
				</label>
				<jurisdiction-check type="新增" :citiesEquity="citiesEquity" :citiesListEquity="citiesListEquity" ref="childrenCheck" />
				<ul class="menu_lists">
					<li v-for="item in authList" :key="item.ClassifyName" class="menu_item">
						<el-checkbox :indeterminate="item.isIndeterminate" v-model="item.checkAll" :disabled="item.ClassifyName === '宏观经济'" @change="handleCheckAll(item)" style="marginRight:30px;fontWeight:bold;minWidth:90px;">{{item.ClassifyName+':'}}</el-checkbox>
						<el-checkbox-group  v-model="item.CheckList" @change="handleChecked(item)">
							<el-checkbox v-for="list in item.Items" :label="list.ChartPermissionId" :key="list.ChartPermissionId" class="list_item" :disabled="list.ChartPermissionId==1">{{list.PermissionName}}</el-checkbox>
						</el-checkbox-group>
					</li>
				</ul>
			</el-form-item> -->
		</el-form>
		<div style="display:flex;justify-content:center;margin:80px 0 0;">
			<el-button type="primary" style="width:80px;marginRight:24px;" @click="saveHandle">保存</el-button>
			<el-button type="primary" plain style="width:80px;" @click="$router.go(-1)">取消</el-button>
		</div>
		<!-- 添加联系人弹窗 -->
		<Contactdia
		:id="companyId"
		:title="'新增联系人'"
		:userForm="diaform"
		:custom_name="dataForm.custom_name"
		:isShowclose="isShowclose"
		:isAddContact="isAddContact"
		:regionType="regionType"
		:isAddUser="true"
		:needCard="true"
		@cancel="canceldialog">
		</Contactdia>
		<!-- 检查客户弹窗 -->
		<el-dialog
		:visible.sync="isCheck"
		:close-on-click-modal="false"
		:modal-append-to-body='false'
		:show-close="false"
		center
		width="560px">
			<div slot="title" style="display:flex;alignItems:center;">
				<span style="fontSize:16px;">提示</span>
			</div>
			<div style="textAlign:center;fontSize:16px;">
				<span v-if="codeRepeat==1">该客户属于{{repeatName}}客户，是否领取？</span>
				<span v-else>该客户已存在，请前往【客户检索】页面核实</span>
			</div>	
			<div style="display:flex;justify-content:center;margin:75px 0 50px;">
				<el-button type="primary" style="width:80px;marginRight:24px;" @click="goPickHandle">{{codeRepeat==1 ?'去领取':'去核实'}}</el-button>
				<el-button  type="primary" plain style="width:80px;" @click="closeDia">取消</el-button>
			</div>
		</el-dialog>
	</div>
</template>

<script>
import { customInterence } from '@/api/api.js'
import country from "@/utils/countryData"
//import{province_sorce,city_sorce} from '@/utils/distpicker';
import Contactdia from '../compontents/Contactdialog'
// import JurisdictionCheck from '../compontents/jurisdictionCheck.vue';
import autocomplete from "@/components/autocomplete.vue";
import searchDistPicker from '@/components/searchDistPicker.vue';

export default {
	name:'',
	components: {Contactdia,autocomplete,searchDistPicker},
	computed:{
		Role() {
			let role = localStorage.getItem('Role') || '';
			
			return role;
		},
		typeArr() {
			let type = localStorage.getItem('RoleType') || '';
			if(type == 'ficc') {
				return ['ficc']
			}else if(type == '权益') {
				return ['权益']
			}else {
				return ['ficc','权益']
			}
		}
	},
	data () {
/*     this.province_sorce=province_sorce
    this.city_sorce=city_sorce */
		this.countryData = country
		return {
			codeDisable:false,//是否可编辑社会信用码国内可
			companyList:[],
			dataForm:{
				area:'国内',
				custom_name:'',
				code:'',
				province:'',
				city:'',
				cuStatus:'试用',
				custype:'',
				trade:'',
				from:'',
				sales:'',
				addreason:'',
				money:''
			},
			optionsMoney:[{value:'1',label:'50亿以下'},{value:'2',label:'50~100亿'},{value:'3',label:'100亿以上'}],
			regionType:'',
			formRule:{
				/* 客户名称 */
				custom_name:[
					{ required: true, message: '公司全称不能为空', trigger: 'change' },
				],
				/* 社会信用码 */
				code:[
					{ required: true, message: '社会信用码不能为空', trigger: 'blur' },
				],
				/* 客户状态 */
				cuStatus:[
					{ required: true, message: '客户状态不能为空', trigger: 'blur' },
				],
				/* 客户类型 */
				custype:[
					{ required: true, message: '客户类型不能为空', trigger: 'blur' },
				],
				/* 行业 */
				trade:[
					{ required: true, message: '行业不能为空', trigger: 'blur' },
				],
				/* 客户来源 */
				from:[
					{ required: true, message: '客户来源不能为空', trigger: 'blur' },
				],
				/* 销售 */
				sales:[
					{ required: true, message: '所属销售不能为空', trigger: 'blur' },
				],
				/* 备注 */
				// addreason:[
				// 	{ required: true, message: '备注不能为空', trigger: 'blur' },
				// ],
			},
			tradeArr:[],//行业分类
			fromArr:[],//客户来源
			salesArr:[],//销售列表
			authList:[],//权限列表
			diaform:{
				name:'',
				sex:1,
				telCode:'86',
				tel1:'',
				tel2:'',
				mail:'',
				post:'',
				desiger:'',
				depart:'',
				carte:'',
				mailQY:'',
				telQY:'',
				Source:'add_custom',
			},
			companyId:'',//新增成功生成的公司id
			isAddContact:false,//添加联系人
			isShowclose:false,//是否可取消
			isCheck:false,//检查客户弹窗
			repeatId:'',//重复公司id
			repeatName:'',//重复公司类型

			nameRepeat:false,
			codeRepeat:false,
			// equityCheckData:[], //权益复选框
			// citiesEquity:[], //
			// citiesListEquity:[], //
			isCheckCompanyInfo:false, //
			checkCompanyfocusIs:false, //
			inquireSuccess:false,
		};
	},
	watch: {
		'dataForm.area': {
			handler(newval) {
				if(newval == '海外') {
					this.codeDisable = true;
					this.dataForm.code = 'HZ' + new Date().getTime();
					this.dataForm.province='海外'
					setTimeout(()=>{
						this.dataForm.city='其它市'
					},0)
				}else {
					this.codeDisable = false;
					this.dataForm.code = '';
					this.dataForm.province=''
					this.dataForm.city=''
				}
			}
		},
		'dataForm.custype': {
			handler() {
				// this.dataForm.trade = '';
				this.getIndustry();
				this.getAuthBasic();
			}
		},
	},
	methods: {
		/* 获取客户来源数据 */
		getCustomerSourceList(){
			customInterence.customerSourceList({}).then(res=>{
				if(res.Ret===200){
					this.fromArr=res.Data.List
				}
			})
		},

		/* 获取客户名称 */
		getCompany(query) {
			if(query) {
				customInterence.companySearch({
					KeyWord:query
				}).then(res =>{
					if(res.Ret === 200) {
						let arr = [];
						if(res.Data.List) {
							res.Data.List.forEach(item => {
								let obj = {
									...item,
									value:item.CompanyName
								}
								arr.push(obj)
							})
						}
						this.companyList = arr;
					}
				})
			}else {
				this.companyList = []
			}
		},
		checkCompanyfocus(){
			this.checkCompanyfocusIs =true;
			setTimeout(() => {
			this.checkCompanyfocusIs =false;
			},500)
		},
		/* 客户名称/信用码失焦时校验客户名称是否存在 存在就提示 */
		checkCompany() {	
			setTimeout(()=>{
			if(this.checkCompanyfocusIs) return
			if((!this.dataForm.custom_name && !this.dataForm.code) || (this.isCheckCompanyInfo && this.dataForm.custom_name)) return
				customInterence.checkCompanyInfo({
				CompanyName:this.dataForm.custom_name,
				CreditCode:this.dataForm.code
			}).then(res =>{
				if(res.Ret === 200){
					if(res.Data.RepeatStatus > 0) {
						this.repeatId = res.Data.CompanyId;
				 		this.repeatName = res.Data.ProductName;
						this.nameRepeat = res.Data.RepeatStatus
						this.codeRepeat = res.Data.Status
						this.isCheck = true;
					}else {
						this.nameRepeat = 0
						this.isCheck = false;
					}
				}
			})
			},500)
		},
		/* 去领取 */
		goPickHandle() {
			this.$router.push({
				path:'/customSearch',
				query:{
					name: this.nameRepeat == 2 ? this.dataForm.custom_name :'',
					code: this.nameRepeat == 1 ?  this.dataForm.code : '' 
				}
			})
		},
		/* 关闭检查弹窗 */
		closeDia() {
			this.repeatId = '';
			this.repeatName = '';
			this.isCheck = false;
		},
	async callbackHandle(data,cb) {
		 if (data) {
			this.isCheckCompanyInfo =true
			cb([]);
			let res = await customInterence.companyQccSearch({ KeyWord: data});
			if (res.Ret === 200) {
				this.isCheckCompanyInfo =false;
				if (res.Data && res.Data.length > 0) {
					let arr = res.Data.map((item) => {
					return { value:item.Name, ...item };
					});
					cb(arr);
				}else{
					cb([{}]);
					this.checkCompany()
				}	
			}	
		}
		},
		//选中后增加社会信用码
		customNameSelect(value) {
			this.dataForm.code = value.CreditCode
			this.inquireSuccess = true;
			setTimeout(async()=>{
				 this.checkCompany()
			},10)
		},
		/* 获取基本权限信息 */
		getAuthBasic() {
			customInterence.authList({
				CompanyType:this.dataForm.custype,
				NoUpgrade:true
			}).then(res => {
				if(res.Ret === 200) {
					let newArr = [];
					res.Data.List.length&&res.Data.List.forEach(item => {
						item.Items=item.Items||[]
						const temarr=item.Items?item.Items.filter(_e=>_e.IsPublic==1):[]
						let obj = {
							...item,

							// checkAll:false,
							// isIndeterminate:item.ClassifyName === '宏观经济'?true:false,
							// 修改为通过公有私有判断
							checkAll:item.Items.length>0?temarr.length==item.Items.length:false,
							isIndeterminate:item.Items.length>0?temarr.length==item.Items.length?false:item.Items.some(_e=>_e.IsPublic==1):false,
							CheckList:item.CheckList||[],
							
						}
						newArr.push(obj)
					})
					this.authList = newArr;
					console.log(this.authList);
					// if(this.dataForm.custype == '权益') {
					// 	this.citiesEquity = res.Data.ListType ? res.Data.ListType[0].Items : [];
        			// 	this.citiesListEquity  = res.Data.List ? res.Data.List[0].Items : [];
					// }else {
					// 	let newArr = [];
					// 	res.Data.List.length&&res.Data.List.forEach(item => {
					// 		let obj = {
					// 			checkAll:false,
					// 			isIndeterminate:item.ClassifyName === '宏观经济'?true:false,
					// 			...item,
					// 		}
					// 		newArr.push(obj)
					// 	})
					// 	this.authList = newArr;
					// }
				}
			})
		},
		//控制权限设置是否禁用编辑
		setSelectPerDisabled(data){
			const arr=data.Items?data.Items.filter(_e=>_e.IsPublic==1):[]
			return arr.length==data.Items.length
		},
		/* 获取销售 */
		getSale() {
			customInterence.saleslist().then(res => {
				if(res.Ret === 200) {
					this.salesArr = res.Data.List;
				}
			})
		},
		/* 根据类型获取行业 */
		getIndustry() {
			customInterence.getindustry({
				Classify:this.dataForm.custype
			}).then(res => {
				if(res.Ret === 200) {
					this.tradeArr = res.Data.List || [];
				}
			})
		},
		/* 保存 */
		saveHandle() {
			this.$refs.dataForm.validate((valid) => {
				if (valid) {
					let checkArr = []
						checkArr = this.authList.map(item =>{
						if(item.CheckList.length) {
							return item.CheckList
						}
					})
					let [flatArr] = checkArr


					if(this.nameRepeat){
						this.$message.warning('客户已存在，请重新填写！')
						return
					}
					if(this.codeRepeat){
						this.$message.warning('社会信用码已存在！')
						return
					}

					this.regionType=this.dataForm.area
					this.isAddContact = true;
				}
		}
		)},
		/* 选择行业先校验是否选择了客户类型提示  */
		slideTrade(e) {
			if(!this.dataForm.custype) {
				this.$message.warning('请先选择客户类型！')
			}
		},
		canceldialog(type,id) {
			this.isAddContact = false;
			if(type == 1) {
				/* 新增联系人之后在新增客户 */
				let checkArr = [];
				this.authList.forEach(item => {
					if(item.CheckList.length) {
						checkArr.push(item.CheckList)
					}
				})
				let PermissionIds = checkArr.flat(2).join(',');
				// if(this.dataForm.custype==='权益'){
				// 	PermissionIds = this.equityCheckData.join(',')
				// }else {
				// 	PermissionIds = checkArr.flat(2).join(',');
				// }
				let params = {
					RegionType:this.dataForm.area,
					CompanyName:this.dataForm.custom_name,
					CreditCode:this.dataForm.code,
					Province:this.dataForm.province,
					City:this.dataForm.city,
					Status:this.dataForm.cuStatus,
					CompanyType:this.dataForm.custype,
					IndustryId:this.dataForm.trade,
					Source:this.dataForm.from,
					SellsId:this.dataForm.sales,
					Reasons:this.dataForm.addreason,
					PermissionIds,
					Scale:this.dataForm.money,
					UserId:Number(id),
					Nation:this.dataForm.area==='海外'?this.dataForm.Nation:''
				}
				customInterence.customAdd(params).then(res => {
					if(res.Ret === 200) {
						this.companyId = res.Data.CompanyId;
						// this.$message.success('新增客户成功,请添加联系人');
						this.$router.replace({
							path:'/customDetail',
							query:{
								id:this.companyId
							}	
						})
					}
				})
			}else {
				this.$message.warning('新增失败')
			}
		},
		/* 地区选择 */
		selectRegion(data) {
			this.dataForm.province = data.province.value;
			this.dataForm.city = data.city.value =='市'?'':data.city.value;
		},
		//选地地区时 选则的省份改变重置city为空
		provinceChange(){
			this.dataForm.city=''
		},
		/* 选择全选或取消全选 */
		handleCheckAll(item) {
			// 取到所有的子菜单id

			//获取公有的id合集
			let publicIds=[]

			
			let ids = item.Items.map(item =>{
				if(item.IsPublic==1){
					publicIds.push(item.ChartPermissionId)
				}
				return item.ChartPermissionId
			})
			item.CheckList = item.checkAll ? ids : publicIds;	
        	item.isIndeterminate = publicIds.length>0&&!item.checkAll?true:false;
		},
		/* 复选框組选中时 */
		handleChecked(item) {
			let len = item.CheckList.length;
			item.checkAll = len === item.Items.length;
			item.isIndeterminate = len > 0 && len < item.Items.length;
		},
	},
	created() {
		this.getCustomerSourceList()
	},
	mounted() {
		/* 默认类型和默认销售 */
		this.dataForm.custype = this.typeArr[0];
		this.dataForm.sales = Number(localStorage.getItem('AdminId')) || '';
		this.getSale();
		
	}
}
</script>
<style lang='scss'>
.addCustom_container {
	min-height: calc(100vh - 160px);
	padding:30px 40px 60px 60px;
	background: #fff;
	position: relative;
	border: 1px solid #ECECEC;
	border-radius: 4px;
	box-shadow: 0 3px 6px rgba(0, 0, 0, 0.05);
	font-size: 16px;
	color: #666;
	/* reset */
	.el-form-item {
		margin-bottom: 30px;
		&:last-child {
			margin-bottom: 0;
		}
	}
	.select-dist-picker{
		width:400px;
	}
	.textarea_item .el-form-item__content {
		width: 100%;
	}
	.el-checkbox-group {
		height: 40px;
	}
	.distpicker-address-wrapper select {
		width: 198px;
	}
	/*  */
	.menu_lists {
		padding: 40px 18px;
		border: 1px dashed #AAB4CC;
		border-radius: 4px;
		.menu_item {
			display: flex;
			// align-items: center;
			margin-bottom: 40px;
			&:last-child {
				margin-bottom: 0;
			}
			.list_item {
				margin-right: 30px;
				&:last-child {
					margin-right: 0;
				}
			}
		}
	}
}
.el-autocomplete-suggestion-data-entry {
	width:auto !important;
	min-width: 400px;
}
.el-autocomplete-none {
	display: none !important;
}
.autocomplete-input {
.el-input__inner {
	padding-right:65px ;
	}
	input {
	overflow: hidden; // 溢出隐藏
 	text-overflow: ellipsis; // 显示省略号
 	white-space: nowrap; // 不换行
	}	
}
</style>