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="dialog" top="11vh" center width="1200px" 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 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>
				</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:340px"
					@keyup.enter.native="searchHandle" :disabled="haveResult" clearable>
					<i slot="prefix" class="el-input__icon el-icon-search"></i>
				</el-input>
			</div>
			<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>
		</el-dialog>
	</div>
</template>

<script>
import { dataBaseInterface } from '@/api/api.js'
import { fromArr, fromCode } from './util';
export default {
	name: '',
	props: {
		isAddTarget: {
			type: Boolean
		}
	},
	data() {
		return {
			search_txt: '',//搜素关键词 M001625518 M0001427
			fromType: 'wind',
			fromArr,
			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: ''
		};
	},
	methods: {
		init() {
			this.fromType = 'wind'
			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,
						} : {}
						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
						}
						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;
			}
			this.search_txt = '';
			this.search_company_txt = '';
			this.loading && this.loading.close();
		},
		getTargetSource(){
			this.fromArr = []
			dataBaseInterface.getDataSource({IsBase:1}).then(res=>{
				if(res.Ret!==200) return
				if(res.Data){
					this.fromArr = res.Data.map(i=>{
						return i.SourceName
					})
				}
			})
		}
	},
	created() { },
	mounted() {
		this.getTargetSource()
	},
}
</script>
<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);
	}

	.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: 60px 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;
	}
}
</style>