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>
			<template v-if="wsdAddStep==1">
				<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" @change="changeDatabase"
							:disabled="haveResult" v-if="fromType=='wind'">
							<el-option v-for="item in databaseType" :key="item.value" :label="item.label" :value="item.value">
							</el-option>
						</el-select>
					</div>
					<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="!(this.fromType=='wind' && this.fromDatabase=='1')"
						@keyup.enter.native="searchHandle" :disabled="haveResult" clearable>
						<i slot="prefix" class="el-input__icon el-icon-search"></i>
					</el-input>
				</div>
				<template v-if="this.fromType=='wind' && this.fromDatabase=='1'">
					<div class="wsd-index-box">
						<el-input placeholder="请输入证券代码" v-model.trim="securityCodeText" class="wsd-index-input" @blur="codeInputBlur('security')"></el-input>
						<div class="wsd-code-row">
							<div class="wsd-code-item" v-for="item in securityCode" :key="item">
								<div class="wsd-code-item-text">{{ item }}</div>
								<img src="~@/assets/img/icons/close_icon_black.png" @click="deleteCode('security',item)" />
							</div>
						</div>
						<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">Wind金融终端输入“CG”会弹出代码生成器，可在代码生成器上获取其他指标的代码</div>
						</div>
						<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('index',item)" />
							</div>
						</div>
					</div>
					<div class="dia-bot">
						<el-button type="primary" @click="wsdNextHandle" :disabled="!isCodeComplete" style="width: 120px;">下一步
						</el-button>
					</div>
				</template>
				<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>
			</template>
			<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">
									<template v-if="item === 'Catalogue'">
										<el-cascader :options="options" v-model="data[item]" placeholder="请选择所属目录"
										size="mini" :props="{label: 'ClassifyName',
											value: 'ClassifyId',
											children: 'Children',
											checkStrictly: true}">
										</el-cascader>
									</template>
									<template v-else-if="item === 'Unit'">
										<el-autocomplete
											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">
											<el-option :label="item" :value="item"
											v-for="item in frequencyArr" :key="item"></el-option>
										</el-select>
									</template>
									<template v-else-if="item === 'SecName'">
										<el-input v-model.trim="data[item]" placeholder="请输入指标名称" size="mini"></el-input>
									</template>
									<template v-else>
										<div style="padding: 0 7px;">{{ data[item] }}</div>
									</template>
                </td>
              </tr>
            </thead>
            <tbody>
							<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].Dt }}</td>
									<td>{{ edbIndexDatas[index1].DataList[index].Close }}</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">
						{{ index+1+'、'+item }}
					</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 { fromArr, fromCode ,frequencyArr} from './util';
export default {
	name: '',
	props: {
		isAddTarget: {
			type: Boolean
		}
	},
	computed:{
		isCodeComplete(){
			return this.securityCode.length>0 && (this.indexCode.length>0 || this.indexCodeSelected.length>0)
		}
	},
	data() {
		return {
			search_txt: '',//搜素关键词 M001625518 M0001427
			fromType: 'wind',
			fromDatabase:'1',
			fromArr,
			indexCodeSelected:[],
			indexCodeArr:[
				{value:1,label:"前收盘价"},
				{value:'open',label:"开盘价"},
				{value:3,label:"最高价"},
				{value:4,label:"最低价"},
				{value:'close',label:"收盘价"},
				{value:6,label:"结算价"},
				{value:7,label:"成交量"},
				{value:8,label:"成交额"},
				{value:9,label:"涨跌幅"},
				{value:10,label:"振幅"},
				{value:11,label:"换手率"},
				{value:12,label:"持仓量"},
				{value:13,label:"持仓额"},
			], // 常用的指标代码
			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:"",
			securityCode:[],
			indexCodeText:'',
			indexCode:[],
			edbIndexDatas:[
				{Catalogue:'',Unit:"",Frequency:'日度',SecName:'CU2403收盘价',SecurityCode:'CU2403.SHF',IndexCode:'close',
				DataList:[{Close: "632107.0000",Dt: "2023-09-07"},{Close: "632107.0000",Dt: "2023-09-07"},{Close: "632107.0000",Dt: "2023-09-07"},
				{Close: "632107.0000",Dt: "2023-09-07"},{Close: "632107.0000",Dt: "2023-09-07"},{Close: "632107.0000",Dt: "2023-09-07"},{Close: "632107.0000",Dt: "2023-09-07"},
				{Close: "632107.0000",Dt: "2023-09-07"},{Close: "632107.0000",Dt: "2023-09-07"},{Close: "632107.0000",Dt: "2023-09-07"}]},
				{Catalogue:'',Unit:"",Frequency:'日度',SecName:'CU2403收盘价',SecurityCode:'CU2403.SHF',IndexCode:'close',
				DataList:[{Close: "632107.0000",Dt: "2023-09-07"},{Close: "632107.0000",Dt: "2023-09-07"},{Close: "632107.0000",Dt: "2023-09-07"},
				{Close: "632107.0000",Dt: "2023-09-07"},{Close: "632107.0000",Dt: "2023-09-07"},{Close: "632107.0000",Dt: "2023-09-07"},{Close: "632107.0000",Dt: "2023-09-07"},
				{Close: "632107.0000",Dt: "2023-09-07"},{Close: "632107.0000",Dt: "2023-09-07"},{Close: "632107.0000",Dt: "2023-09-07"}]},
				{Catalogue:'',Unit:"",Frequency:'日度',SecName:'CU2403收盘价',SecurityCode:'CU2403.SHF',IndexCode:'close',
				DataList:[{Close: "632107.0000",Dt: "2023-09-07"},{Close: "632107.0000",Dt: "2023-09-07"},{Close: "632107.0000",Dt: "2023-09-07"},
				{Close: "632107.0000",Dt: "2023-09-07"},{Close: "632107.0000",Dt: "2023-09-07"},{Close: "632107.0000",Dt: "2023-09-07"},{Close: "632107.0000",Dt: "2023-09-07"},
				{Close: "632107.0000",Dt: "2023-09-07"},{Close: "632107.0000",Dt: "2023-09-07"},{Close: "632107.0000",Dt: "2023-09-07"}]},
				{Catalogue:'',Unit:"",Frequency:'日度',SecName:'CU2403收盘价',SecurityCode:'CU2403.SHF',IndexCode:'close',
				DataList:[{Close: "632107.0000",Dt: "2023-09-07"},{Close: "632107.0000",Dt: "2023-09-07"},{Close: "632107.0000",Dt: "2023-09-07"},
				{Close: "632107.0000",Dt: "2023-09-07"},{Close: "632107.0000",Dt: "2023-09-07"},{Close: "632107.0000",Dt: "2023-09-07"},{Close: "632107.0000",Dt: "2023-09-07"},
				{Close: "632107.0000",Dt: "2023-09-07"},{Close: "632107.0000",Dt: "2023-09-07"},{Close: "632107.0000",Dt: "2023-09-07"}]},
				{Catalogue:'',Unit:"",Frequency:'日度',SecName:'CU2403收盘价',SecurityCode:'CU2403.SHF',IndexCode:'close',
				DataList:[{Close: "632107.0000",Dt: "2023-09-07"},{Close: "632107.0000",Dt: "2023-09-07"},{Close: "632107.0000",Dt: "2023-09-07"},
				{Close: "632107.0000",Dt: "2023-09-07"},{Close: "632107.0000",Dt: "2023-09-07"},{Close: "632107.0000",Dt: "2023-09-07"},{Close: "632107.0000",Dt: "2023-09-07"},
				{Close: "632107.0000",Dt: "2023-09-07"},{Close: "632107.0000",Dt: "2023-09-07"},{Close: "632107.0000",Dt: "2023-09-07"}]},
				{Catalogue:'',Unit:"",Frequency:'日度',SecName:'CU2403收盘价',SecurityCode:'CU2403.SHF',IndexCode:'close',
				DataList:[{Close: "632107.0000",Dt: "2023-09-07"},{Close: "632107.0000",Dt: "2023-09-07"},{Close: "632107.0000",Dt: "2023-09-07"},
				{Close: "632107.0000",Dt: "2023-09-07"},{Close: "632107.0000",Dt: "2023-09-07"},{Close: "632107.0000",Dt: "2023-09-07"},{Close: "632107.0000",Dt: "2023-09-07"},
				{Close: "632107.0000",Dt: "2023-09-07"},{Close: "632107.0000",Dt: "2023-09-07"},{Close: "632107.0000",Dt: "2023-09-07"}]}
			],
			edbTableHeadKey: [
        "Catalogue",
        "Unit",
        "Frequency",
        "SecName",
        "SecurityCode",
        "IndexCode",
      ],
			edbTableHeadData:new Map([
				["Catalogue", "所属目录"],
				["Unit", "单位"],
				["Frequency", "频度"],
				["SecName", "指标名称"],
				["SecurityCode", "证券代码"],
				["IndexCode", "指标代码"],
			]),
			options:[],
			unitList:[],
			frequencyArr,
			checkFailShow:false,
			existIndexList:[]
		};
	},
	watch:{
		isAddTarget(newVal){
			if(newVal){
				this.getTargetSource()
				this.getMenu()
				this.getTargetUnitList()
			}
		}
	},
	methods: {
		init() {
			this.fromType = 'wind'
			this.fromDatabase='0'
			this.wsdAddStep=1
			this.status = ''
			this.tableData = []
			this.dataList = []
			this.add_params = {}
			this.search_txt = '';
			this.haveResult = false;
			this.search_company_txt = '';
			this.isCompanyCode = false;
		},
		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
				}).then(res => {
					if (res.Ret === 200) {
						this.haveResult = false;
						//隆众指标和手工指标、交易所等将名称 频度 单位带到下一步
						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)) ? {
							edb_name: res.Data.SearchItem.EdbName,
							unit: res.Data.SearchItem.Unit,
							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.changeDatabase('0')
			}
			this.search_txt = '';
			this.search_company_txt = '';
			this.loading && this.loading.close();
		},
		changeDatabase(e){
			this.fromDatabase=e
			this.securityCodeText=""
			this.securityCode=[]
			this.indexCodeText=''
			this.indexCode=[]
			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'){
				if(!this.securityCodeText) return  
				if(!(this.securityCode.length<5)){
					this.$message.warning('证券代码一次最多输入5个')
					this.securityCodeText=''
					return
				}
				this.securityCode=Array.from(new Set([...this.securityCode,...this.securityCodeText.split(',')])).filter(Boolean)
				if(this.securityCode.length>5){
					this.securityCode = this.securityCode.slice(0,5)
					this.$message.warning('证券代码一次最多输入5个')
				}
				this.securityCodeText=''
			}else if(type == 'index'){
				if(!this.indexCodeText) return  
				this.indexCode=Array.from(new Set([...this.indexCode,...this.indexCodeText.split(',')]))

				this.indexCodeText=''
			}

		},
		deleteCode(type,code){
			if(type == 'security'){
				this.securityCode = this.securityCode.filter(it => it!=code)
			}else if(type == 'index'){
				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(()=>{
				console.log(this.securityCode,this.indexCode,this.indexCodeSelected,'wsdNextHandle',
				[...this.securityCode,...this.indexCodeSelected].join(','));
				// return
				if(this.isCodeComplete){
					let params={
						Source:Number(this.fromCode.get(this.fromType)),
						SubSource:this.fromDatabase,
						EdbCode:this.indexCode.join(','),
						StockCode:this.securityCode.join(',')
					}
					console.log(params,'params');
					dataBaseInterface.edbExistCheck(params).then(res=>{
						console.log(res);
						if(res.Ret == 200){
							if(res.Data.IndexExist){
								console.log('重复');
								this.existIndexList=[]
								let ExistEdbCodeArr=['close','open']
								let ExistStockCodeArr=['CU2403.SHF','FD78ES.FF']
								let text=''
								ExistStockCodeArr.map(item =>{
									ExistEdbCodeArr.map(item1 =>{
										let isCommon = this.indexCodeArr.find(it => it.value == item1)
										if(isCommon){
											text=`${item}${isCommon.label}（wsd${item}${isCommon.value}）`
										}else{
											text=`${item}${item1}（wsd${item}${item1}）`
										}
										this.existIndexList.push(text)
									})
								})
								this.checkFailShow=true
							}else{
								// this.wsdAddStep=2
								console.log('没有重复');
							}
						}
					})
				}
			},50)
		},
		wsdPrevHandle(){
			this.wsdAddStep=1
		},
		wsdSaveHandle(){
			 let flag = this.edbIndexDatas.some(it => {
				console.log(it,'ittititti');
				return (!it.Catalogue) || (!it.Unit) || (!it.Frequency) || (!it.SecName)
			})
			if(flag){
				this.$message.warning("指标信息未填写完整")
				return 
			}
			// TODO: 保存接口对接
			this.$message.success("添加指标成功")
			// { code:res.Data.UniqueCode,id:res.Data.EdbInfoId,classifyId:params.ClassifyId }
			this.$emit('addSuccessHandle')	
			this.$emit('cancelHandle')	
		}
	},
	created() { },
	mounted() {
		//this.getTargetSource()
	},
}
</script>
<style lang="scss">
.addTargtDia-box {
    .custom-dialog{
        max-width: 1200px !important;
				min-width: 1000px;
				.el-checkbox{
					margin-right: 20px;
					margin-bottom: 16px;
				}
				.edb-table-preview{
					border-right: 1px solid #dcdfe6;
					border-bottom: 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: 15px;
			.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{
			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;
    }
	}
	.check-fail-box{
		padding: 0 0 15px 40px;	
		color: #333333;
		.check-fail-button{
			margin-top: 80px;
			display: flex;
			justify-content: flex-end;
		}
	}
}


</style>