eta_front/src/views/dataEntry_manage/databaseComponents/addTargetDiaBase.vue

<template>
	<div class="addTargtDia-box" v-if="isAddTarget">
		<el-dialog :visible.sync="isAddTarget" :close-on-click-modal="false" :modal-append-to-body='false' 
			@close="cancelHandle" custom-class="custom-dialog fit-screen-dialog" top="5vh" center width="85vw" v-dialogDrag>
			<div slot="title" style="display:flex;alignItems:center;">
				<img :src="$icons.add" style="color:#fff;width:16px;height:16px;marginRight:5px;">
				<span style="fontSize:16px;">添加指标</span>
			</div>
			<div v-if="wsdAddStep==1" v-loading="isLoadingData" element-loading-text="加载中······">
				<div class="dialog-top" >
					<div>
						<span>数据来源</span>
						<el-select v-model="fromType" placeholder="请选择来源" style="width:240px;margin-left:10px" @change="changeTrade"
							:disabled="haveResult">
							<el-option v-for="item in fromArr" :key="item" :label="item" :value="item">
							</el-option>
						</el-select>
						<el-select v-model="fromDatabase" placeholder="请选择数据库" style="width:240px;margin-left:10px"
							:disabled="haveResult" v-if="hasDateSequence">
							<el-option v-for="item in databaseType" :key="item.value" :label="item.label" :value="item.value">
							</el-option>
						</el-select>
					</div>

					<!-- 路透增加频度选择 -->
					<el-select v-model="rtrFromFrequency" placeholder="请选择频度" v-if="fromType==='路透'">
						<el-option :label="item" :value="item"
						v-for="item in frequencyArr" :key="item"></el-option>
					</el-select>

					<el-input v-show="isCompanyCode" placeholder="公司ID" v-model="search_company_txt" style="maxWidth:340px;"
						@keyup.enter.native="searchHandle" :disabled="haveResult" clearable>
						<i slot="prefix" class="el-input__icon el-icon-search"></i>
					</el-input>

					<el-input placeholder="指标ID" v-model="search_txt" style="maxWidth:300px" v-if="!(hasDateSequence && fromDatabase=='1')"
						@keyup.enter.native="searchHandle" :disabled="haveResult" clearable>
						<i slot="prefix" class="el-input__icon el-icon-search"></i>
					</el-input>
				</div>
				<div v-if="hasDateSequence && fromDatabase=='1'">
					<div class="wsd-index-box">
						<el-input placeholder="请输入证券代码，每次只查询一个证券代码" v-model.trim="securityCodeText" class="wsd-index-input" 
						@blur="codeInputBlur('security')" style="margin-bottom: 20px;"></el-input>
						<div class="wsd-index-code">
							<el-input placeholder="请输入指标代码，多个指标代码用英文逗号分隔" v-model.trim="indexCodeText" 
							class="wsd-index-input" @blur="codeInputBlur('index')"></el-input>
							<div class="index-code-hint">
								{{ indexCodeHintText }}
							</div>
						</div>
						<el-select v-model="THSIndexCodeType" placeholder="请选择常用指标类型" v-if="fromType=='同花顺'"
						@change="THSIndexCodeTypeChange" style="margin-bottom: 15px;" class="wsd-index-input">
							<el-option :label="item.label" :value="item.value" 
							v-for="item in THSIndexCodeTypeArr" :key="item.value"></el-option>
						</el-select>
						<el-checkbox-group v-model="indexCodeSelected">
							<el-checkbox :label="item.value" v-for="item in indexCodeArr" :key="item.value">{{ item.label }}</el-checkbox>
						</el-checkbox-group>
						<div class="wsd-code-row" style="margin-top: -10px;">
							<div class="wsd-code-item" v-for="item in indexCode" :key="item">
								<div class="wsd-code-item-text">{{ item }}</div>
								<img src="~@/assets/img/icons/close_icon_black.png" @click="deleteCode(item)" />
							</div>
						</div>
					</div>
					<div class="dia-bot">
						<el-button type="primary" @click="wsdNextHandle" :disabled="!isCodeComplete" 
						style="width: 120px;" :loading="isLoadingData" >下一步
						</el-button>
					</div>
				</div>
				<template v-else>
					<div class="warn_txt" v-if="status === 1">
						该数据已存在数据库，名称为：{{have_edbobj.edb_name}}，目录为：{{ have_edbobj.warnTip }}，如需重新添加，请删除原指标
					</div>
					<div class="warn_txt" v-else-if="status === 3">
						该数据已存在数据库，名称为：{{have_edbobj.edb_name}}，目录为：{{ have_edbobj.warnTip }}
					</div>

					<div class="no-auth" v-if="status === 3">
						您当前暂无权限查看该指标，如需查看，请联系管理员
					</div>
					<div class="dialog-main" v-else>
						<el-table ref="Table" :data="tableData" highlight-current-row border
							:style="(status === 1 || !tableData.length) ? 'height:350px' : ''">
							<el-table-column v-for="item in tableColums" :key="item.label" :label="item.label" align="center">
								<template slot-scope="scope">
									<span v-if="item.key == 'StartDate' || item.key == 'EndDate'">{{ scope.row[item.key] |
											formatTime
									}}</span>
									<span v-else>{{ scope.row[item.key] }}</span>
								</template>
							</el-table-column>
							<div slot="empty" style="padding:40px 0 120px;">
								<tableNoData text="未搜索到该指标" size="mini"/>
							</div>
						</el-table>
						<ul class="value-ul" v-show="dataList.length && status === 2">
							<li class="value-item" v-for="(item, index) in dataList" :key="index">
								<span>{{ item.DataTime }}</span>
								<span style="min-width:200px;text-align:center;">{{ item.Value }}</span>
							</li>
						</ul>
					</div>
					<div class="dia-bot">
						<el-button type="primary" v-if="status === 2" @click="addTargtHandler" 
						:disabled="!tableData.length">下一步
						</el-button>
						<el-button type="primary" v-else-if="[1,3].includes(status)" @click="cancelHandle">知道了</el-button>
					</div>
				</template>
			</div>
			<template v-else>
				<div class="edb-table-preview">
          <table width="auto" border="0">
            <thead>
              <tr v-for="(item, index) in edbTableHeadKey" :key="item">
                <td class="sticky" style="left: 0;text-align: center;">
                  {{ edbTableHeadData.get(item) }}
                </td>
                <td v-for="(data, sub_index) in edbIndexDatas" :key="sub_index" :colspan="2" 
								:class="highLightIndex.includes(data.EdbName) && item=='EdbName' ?'exist-highlight':''">
									<template v-if="item === 'ClassifyId'">
										<el-cascader :options="options" v-model="data[item]" placeholder="请选择所属目录"
										size="mini" :disabled="!data.Source"
										:props="{label: 'ClassifyName',
											value: 'ClassifyId',
											children: 'Children',
											checkStrictly: true,
											emitPath:false}">
										</el-cascader>
									</template>
									<template v-else-if="item === 'Unit'">
										<el-autocomplete
										:disabled="!data.Source"
											v-model.trim="data[item]"
											:fetch-suggestions="querySearchUnit"
											placeholder="请输入单位"
											suffix-icon="el-icon-arrow-down"
											size="mini"
										></el-autocomplete>
									</template>
									<template v-else-if="item === 'Frequency'">
										<el-select v-model="data[item]" placeholder="请选择频度" size="mini" :disabled="!data.Source">
											<el-option :label="item" :value="item"
											v-for="item in frequencyArr" :key="item"></el-option>
										</el-select>
									</template>
									<template v-else-if="item === 'EdbName'">
										<el-input v-model.trim="data[item]" placeholder="请输入指标名称" size="mini" :disabled="!data.Source"></el-input>
									</template>
									<template v-else>
										<div style="padding: 0 7px;">{{ data[item] }}</div>
									</template>
                </td>
              </tr>
            </thead>
            <tbody v-if="edbIndexDatas && edbIndexDatas.length>0">
							<tr v-for="(item,index) in edbIndexDatas[0].DataList.length" :key="index">
								<td :rowspan="edbIndexDatas[0].DataList.length" v-if="index==0"
								class="sticky" style="left: 0;text-align: center;">
									数据详情
								</td>
								<template v-for="(item1,index1) in edbIndexDatas.length">
									<td>{{ edbIndexDatas[index1].DataList[index].DataTime }}</td>
									<td>{{ edbIndexDatas[index1].DataList[index].Value }}</td>
								</template>
              </tr>
            </tbody>
          </table>
        </div>
				<div class="dia-bot">
					<el-button @click="wsdPrevHandle" style="width: 120px;">上一步</el-button>
					<el-button type="primary" @click="wsdSaveHandle" style="width: 120px;margin-left: 50px;">保存</el-button>
				</div>
			</template>
		</el-dialog>

		<el-dialog :visible.sync="checkFailShow" :close-on-click-modal="false" :modal-append-to-body='false' 
			width="600px" title="操作提示">
			<div class="check-fail-box">
				<div>
					<div style="margin-bottom: 20px;">指标库中已存在以下指标，请勿重新输入！</div>
					<div v-for="(item,index) in existIndexList" class="exist-index-item" @click="existIndexClick(item)">
						{{ index+1+'、'+item.text }}
					</div>
				</div>
				<div class="check-fail-button">
					<el-button type="primary" @click="checkFailShow=false" style="width: 120px;">知道了</el-button>
				</div>
			</div>
		</el-dialog>
	</div>
</template>

<script>
import { dataBaseInterface,dataInterence } from '@/api/api.js'
import { frequencyArr,windCommonIndexCodeArr,THSCommonIndexStockCodeArr,THSCommonIndexFuturesCodeArr} from './util';
export default {
	name: '',
	props: {
		isAddTarget: {
			type: Boolean
		}
	},
	computed:{
		isCodeComplete(){
			return this.securityCodeText && (this.indexCode.length>0 || this.indexCodeSelected.length>0)
		},
		hasDateSequence(){
			return ["wind","同花顺"].includes(this.fromType)
		},
		// 常用的指标代码
		indexCodeArr(){
			if(this.fromType=='wind'){
				return windCommonIndexCodeArr
			}else if(this.fromType=='同花顺'){
				if(this.THSIndexCodeType==1){
					//期货常用
					return THSCommonIndexFuturesCodeArr
				}else{
					//股票常用
					return THSCommonIndexStockCodeArr
				}
			}
		},
		indexCodeHintText(){
			if(this.fromType=='wind'){
				return 'Wind金融终端输入“CG”会弹出代码生成器，可在代码生成器上获取其他指标的代码'
			}else if(this.fromType=='同花顺'){
				return '可用Excel同花顺插件/日期序列功能，根据所选指标获取指标代码，期货和股票常用代码可在下方勾选'
			}
		}
	},
	data() {
		this.prefixMap=new Map([
			["wind","wsd"],
			["同花顺","thsds"]
		])
		return {
			search_txt: '',//搜素关键词 M001625518 M0001427
			fromType: 'wind',
			fromDatabase:'0',
			fromArr:[],
			indexCodeSelected:[],
			databaseType:[
				{value:'0',label:'经济数据库'},
				{value:'1',label:'日期序列'}
			],
			wsdAddStep:1,
			fromCode:[],
			tableColums: [
				{
					label: '指标ID',
					key: 'EdbCode'
				},
				{
					label: '起始时间',
					key: 'StartDate'
				},
				{
					label: '终止时间',
					key: 'EndDate'
				},
			],
			status: '',//指标状态
			tableData: [],
			dataList: [],
			add_params: {},
			haveResult: false,
			have_edbobj: {
				warnTip: '',//已存在提示文案
				edb_name: '',
			},
			isCompanyCode: false,
			search_company_txt: '',
			securityCodeText:"",
			indexCodeText:'',
			indexCode:[],
			edbIndexDatas:[],
			edbTableHeadKey: [
        "ClassifyId",
        "Unit",
        "Frequency",
        "EdbName",
        "StockCode",
        "EdbCode",
      ],
			edbTableHeadData:new Map([
				["ClassifyId", "所属目录"],
				["Unit", "单位"],
				["Frequency", "频度"],
				["EdbName", "指标名称"],
				["StockCode", "证券代码"],
				["EdbCode", "指标代码"],
			]),
			BatchList:[],
			options:[],
			unitList:[],
			frequencyArr,
			checkFailShow:false,
			existIndexList:[],
			isLoadingData:false,
			highLightIndex:[],
			// 同花顺常用指标类型
			THSIndexCodeType:1,
			THSIndexCodeTypeArr:[
				{value:1,label:"期货常用指标"},
				{value:2,label:"股票常用指标"}
			],

			rtrFromFrequency:frequencyArr[0],//路透频度
		};
	},
	watch:{
		isAddTarget(newVal){
			if(newVal){
				this.getTargetSource()
				this.getMenu()
				this.getTargetUnitList()
			}
		}
	},
	methods: {
		init() {
			this.fromType = 'wind'
			this.fromDatabase='0'
			this.status = ''
			this.tableData = []
			this.dataList = []
			this.add_params = {}
			this.search_txt = '';
			this.haveResult = false;
			this.search_company_txt = '';
			this.wsdAddStep=1
			this.securityCodeText=""
			this.indexCodeText=''
			this.indexCode=[]
			this.indexCodeSelected=[]
			this.THSIndexCodeType=1
			this.isCompanyCode = false;
			this.rtrFromFrequency=frequencyArr[0]
		},
		cancelHandle() {
			this.init();
			this.$emit('cancelHandle')
		},
		/* 搜索指标 */
		searchHandle: _.debounce(function () {
			console.info(this.fromType);
			console.info(this.search_company_txt);
			console.info(this.search_txt);
			if (this.fromType == "彭博财务") {
				if (!this.search_company_txt) {
					this.$message.warning('请输入公司ID')
					return
				}
				if (!this.search_txt) {
					this.$message.warning('请输入指标ID')
					return
				}
			} else {
				if (!this.search_txt) {
					this.$message.warning('请输入指标ID')
					return
				}
			}
			if (this.search_txt) {
				this.status = '';
				this.haveResult = true;
				this.loading = this.$loading({
					lock: true,
					target: '.dialog-main',
					text: '搜索数据中...',
					spinner: 'el-icon-loading',
					background: 'rgba(255, 255, 255, 0.8)'
				});
				dataBaseInterface.getTarget({
					Source: Number(this.fromCode.get(this.fromType)),
					EdbCode: this.search_txt,
					CompanyCode: this.search_company_txt,
					Frequency: this.rtrFromFrequency
				}).then(res => {
					if (res.Ret === 200) {
						this.haveResult = false;
						//隆众指标和手工指标、交易所等将名称 频度 单位带到下一步
						console.log(this.fromCode.get(this.fromType),'this.fromCode.get(this.fromType)');
						// let opther_params = ['9', '10', '11', '15', '16', '17', '18', '19', '20', '21', '26','38','41','57','60','71'].includes(this.fromCode.get(this.fromType)) ? 
						let opther_params={
							edb_name: res.Data.SearchItem.EdbName || '',
							unit: res.Data.SearchItem.Unit || '',
							frequency: frequencyArr.includes(res.Data.SearchItem.Frequency)?res.Data.SearchItem.Frequency:'',
						} 
						// : {}
						// let jy_params = Number(this.fromCode.get(this.fromType))>1000?{
						// 	edb_name:res.Data.SearchItem.EdbName,
						// 	unit:res.Data.SearchItem.Unit,
						// 	frequency:frequencyArr.includes(res.Data.SearchItem.Frequency)?res.Data.SearchItem.Frequency:''
						// }:{}
						this.add_params = {
							EdbCode: res.Data.SearchItem.EdbCode,
							EndDate: res.Data.SearchItem.EndDate,
							StartDate: res.Data.SearchItem.StartDate,
							Source: Number(this.fromCode.get(this.fromType)),
							...opther_params,
							// ...jy_params
						}
						this.status = res.Data.Status;
						let classify_arr = res.Data.ClassifyList || [];
						let str = '';
						classify_arr.length && classify_arr.reverse().map((item) => str += item.ClassifyName + '/');
						//提示文案
						this.have_edbobj =  {
							warnTip: [1,3].includes(res.Data.Status) ? str : '',//已存在提示文案
							edb_name: [1,3].includes(res.Data.Status) ? res.Data.SearchItem.EdbName : '',
						},
						this.tableData =
							res.Data.Status === 1 ? [res.Data.SearchItem]
								: res.Data.Status !== 1 && res.Data.SearchItem.DataList && res.Data.SearchItem.DataList.length
									? [res.Data.SearchItem]
									: [];
						this.dataList = res.Data.SearchItem.DataList || [];
						this.$nextTick(() => {
							this.loading.close();
							this.tableData.length && this.$refs.Table.setCurrentRow(this.tableData[0]);
						})
					} else {
						this.haveResult = false;
						this.loading.close();
						this.status = '';
						this.tableData = [];
						this.dataList = [];
					}
				})
			} else {
				this.$message.warning('请输入指标ID')
			}
		}),
		addTargtHandler() {
			console.log(this.add_params);
			this.$parent.completeTargetHandle(this.add_params);
		},
		changeTrade(e) {
			if (e == "彭博财务") {
				this.isCompanyCode = true;
			} else {
				this.isCompanyCode = false;
			}
			if(this.fromDatabase=='1'){
				this.fromDatabase='0'
				this.securityCodeText=""
				this.indexCodeText=''
				this.indexCode=[]
				this.indexCodeSelected=[]
				this.THSIndexCodeType=1
			}
			this.search_txt = '';
			this.search_company_txt = '';
			this.loading && this.loading.close();
		},
		THSIndexCodeTypeChange(){
			this.indexCodeSelected=[]
		},
		getTargetSource(){
			this.fromArr = []
			this.fromCode = []
			dataBaseInterface.getDataSource({IsBase:1}).then(res=>{
				if(res.Ret!==200) return
				if(res.Data){
					this.fromArr = res.Data.map(i=>{
						return i.SourceName
					})
					this.fromCode = new Map(res.Data.map(i=>{
						return [i.SourceName,i.EdbSourceId]
					}))
				}
			})
		},
		codeInputBlur(type){
			if(type == 'security'){
				this.securityCodeText=this.securityCodeText.replaceAll(' ','')
			}else if(type == 'index'){
				if(!this.indexCodeText) return  
				this.indexCodeText=this.indexCodeText.replaceAll(' ','')
				this.indexCode=Array.from(new Set([...this.indexCode,...this.indexCodeText.split(',')]))

				this.indexCodeText=''
			}

		},
		deleteCode(code){
			this.indexCode = this.indexCode.filter(it => it!=code)
		},
		/* 获取目录结构 */
		getMenu() {
			dataBaseInterface.menuListV3().then(res => {
				if(res.Ret === 200) {
					this.filterNodes(res.Data.AllNodes||[]);
					this.options = res.Data.AllNodes || [];
				}
			})
		},
		// 递归改变目录结构
		filterNodes(arr) {
			arr.length && arr.forEach(item => {
				item.Children.length && this.filterNodes(item.Children)
				if(!item.Children.length) {
					item.Children=null
				}
			})
		},
		// 获取指标单位
		async getTargetUnitList(){
			let res=await dataInterence.getTargetUnitList()
			if(res.Ret===200){
				this.unitList=res.Data&&res.Data.map(item=>{
					return {value:item}
				})
			}
		},
		//搜索单位
		querySearchUnit(queryString, cb){
			let results = queryString ? this.unitList.filter(item=>item.value.indexOf(queryString) === 0) : this.unitList;
			// 调用 callback 返回建议列表的数据
			cb(results);
		},
		wsdNextHandle(){
			this.getMenu()
			setTimeout(()=>{
				if(this.isCodeComplete){
					let params={
						Source:Number(this.fromCode.get(this.fromType)),
						SubSource:this.fromDatabase,
						EdbCode:Array.from(new Set([...this.indexCode,...this.indexCodeSelected])).join(','),
						StockCode:this.securityCodeText
					}
					dataBaseInterface.edbExistCheck(params).then(res=>{
						if(res.Ret == 200){
							// console.log(res,'res');
							// return 
							if(res.Data.IndexExist){
								// 有重复
								this.existIndexList=[]
								let existEdbInfo=res.Data.ExistEdbInfo || []
								let text=''
								existEdbInfo.map(item =>{
									text=`${item.EdbName}（${item.EdbCode}）`
									this.existIndexList.push({text,code:item.UniqueCode,id:item.EdbInfoId,classifyId:item.ClassifyId})
								})
								this.checkFailShow=true
							}else{
								// 没有重复
								this.isLoadingData=true
								dataBaseInterface.getTarget(params).then(res => {
									if(res.Ret == 200){
										let stockList = res.Data.SearchItem.StockList || []
										this.edbIndexDatas=[]
										this.BatchList=[]
										let Source = Number(this.fromCode.get(this.fromType))
										stockList.map((item,index) =>{
											let isCommon = this.indexCodeArr.find(it => it.value == item.EdbCode)
											let params={
												Source,
												ClassifyId:0,
												Unit:'',
												Frequency:'日度',
												EdbName:isCommon?`${item.StockCode}${isCommon.label}`:`${item.StockCode}${item.EdbCode}`,
												EdbCode:item.EdbCode,
												StockCode:item.StockCode
											}
											this.BatchList.push(params)
											let datas = item.DataList || []
											let datasLength = datas.length
											if( datasLength<10){
												for (let i = datasLength; i < 10; i++) {
													datas.push({DataTime:'',Value:''})													
												}
											}
											this.edbIndexDatas.push({...params,DataList:datas})
										})

										let edbIndexDataLength = this.edbIndexDatas.length
										//填充空的列
										for (let i = edbIndexDataLength; i < 6; i++) {
											this.edbIndexDatas.push({
												Source:0,
												ClassifyId:0,
												Unit:'',
												Frequency:'',
												EdbName:'',
												EdbCode:'',
												StockCode:'',
												DataList:new Array(10).fill({DataTime:'',Value:''})
											})
										}
										this.wsdAddStep=2
									}
								}).finally(()=>{
									this.isLoadingData=false
								})
							}
						}
					})
				}
			},50)
		},
		existIndexClick({code,id,classifyId}){
			const { href } = this.$router.resolve({ path: '/database',query:{code,id,classifyId}});
			window.open(href, '_blank');
		},
		wsdPrevHandle(){
			this.wsdAddStep=1
		},
		wsdSaveHandle(){
			 let flag = this.edbIndexDatas.some(it => {
				return (it.StockCode && it.EdbCode) && ((!it.ClassifyId) || (!it.Unit) || (!it.Frequency) || (!it.EdbName))
			})
			if(flag){
				this.$message.warning("指标信息未填写完整")
				return 
			}
			this.BatchList.map((it,ind) => {
				it.ClassifyId = this.edbIndexDatas[ind].ClassifyId
				it.EdbCode = this.edbIndexDatas[ind].EdbCode
				it.EdbName = this.edbIndexDatas[ind].EdbName
				it.Frequency = this.edbIndexDatas[ind].Frequency
				it.StockCode = this.edbIndexDatas[ind].StockCode
				it.Unit = this.edbIndexDatas[ind].Unit
			})
			dataBaseInterface.edbAddBatch({BatchList:this.BatchList}).then(res=>{
				if(res.Ret == 200){
					this.$message.success("添加指标成功")
					this.$emit('addSuccessHandle',{ code:res.Data.UniqueCode,id:res.Data.EdbInfoId,classifyId:res.Data.ClassifyId })	
					this.cancelHandle()	
				}else if(res.Ret == 403){
					this.highLightIndex=res.Data?res.Data.ExistEdbName || []:[]
				}
			})
		}
	},
	created() { },
	mounted() {
		//this.getTargetSource()
	},
}
</script>
<style lang="scss">
.addTargtDia-box {
    .custom-dialog{
        max-width: 1200px !important;
				min-width: 1100px;
				.el-checkbox{
					margin-right: 20px;
					margin-bottom: 16px;
				}
				.edb-table-preview{
					border: 1px solid #dcdfe6;
					.el-cascader{
						width: 100%;
					}
					.el-autocomplete{
						width: 100%;
					}
					.el-select{
						width: 100%;
					}
					.el-input{
						width: 100%;
						input{
							border: none;
							padding-left: 7px;
							font-size: 14px;
						}
					}
				}

    }
}
</style>
<style lang='scss' scoped>
.addTargtDia-box {
	.dialog-top {
		padding: 20px 30px;
		display: flex;
		justify-content: space-between;
		border: 1px solid #ECECEC;
		box-shadow: 0px 3px 6px rgba(0, 0, 0, 0.05);
	}
	.wsd-index-box{
		padding-top: 20px;
		.wsd-index-code{
			display: flex;
			align-items: center;
			margin-bottom: 20px;
			.index-code-hint{
				color: #C0C4CC;
				font-size: 15px;
			}
		}
		.wsd-code-row{
			margin-top: 10px;
			min-height: 60px;
			display: flex;
			align-items: center;
			flex-wrap: wrap;
			.wsd-code-item{
				height: 40px;
				background-color: #EBEFF6;
				display: flex;
				align-items: center;
				margin-right: 10px;
				padding: 10px;
				box-sizing: border-box;
				margin-bottom: 10px;
				.wsd-code-item-text{
					color: #333333;
					margin-right: 10px;
				}
				img{
					height: 16px;
					width: 16px;
					cursor: pointer;
				}
			}
		}
		.wsd-index-input{
			min-width: 400px;
			width:400px;
			margin-right: 10px;
		}
	}
	.warn_txt {
		font-size: 16px;
		color: #FF4E00;
		margin: 30px 0;
		text-align: center;
	}

	.dialog-main {
		margin-top: 20px;

		.value-ul {
			border: 1px solid #ECECEC;
			max-height: 320px;
			overflow-y: scroll;

			.value-item {
				color: #666;
				padding: 12px 0;
				display: flex;
				justify-content: space-around;
			}
		}
	}

	.dia-bot {
		margin: 30px 0;
		display: flex;
		justify-content: center;
	}

	.no-auth {
		width: 50%;
		padding: 40px;
		margin: 70px auto;
		text-align: center;
		background: #ECECEC;
		color: #FF4E00;
		border: 1px dashed #FF4E00;
	}
	// 预览表格
	.sticky {
		position: sticky;
		border-right: 1px solid #dcdfe6;
		z-index: 10;
	}
	.edb-table-preview {
		overflow: auto;
		height: calc(100% - 124px);
		&::-webkit-scrollbar {
			width: 5px !important;
		}
		table {
      border-color: #dcdfe6;
      border-bottom: 1px solid #dcdfe6;
      border-right: 1px solid #dcdfe6;
      border-collapse: separate;
    }
    thead {
      position: sticky;
      z-index: 2;
      top: 0;
    }
    td {
      min-width: 100px;
      max-width: 100px;
      height: 30px;
      // text-align: center;
      color: #333;
      box-sizing: border-box;
      padding: 0 5px;
      background-color: #fff;
      border-top: 1px solid #dcdfe6;
      border-left: 1px solid #dcdfe6;
    }
		.exist-highlight{
			border: red solid 1px;
		}
	}
	.check-fail-box{
		padding: 0 0 15px 40px;	
		color: #333333;
		.exist-index-item{
			cursor: pointer;
			&:hover{
				text-decoration: underline;
			}
		}
		.check-fail-button{
			margin-top: 80px;
			display: flex;
			justify-content: flex-end;
		}
	}
}


</style>