eta_front/src/components/lzTable.vue

<template>
	<table width="auto" border="0">
		<template v-if="tableType === 'header'">
			<tr
				v-for="(item, index) in headerArr"
				:key="index"
				align="center"
				class="header"
			>
				<th>{{ labelArr.get(item) }}</th>
				<td v-for="(data, sub_index) in tableOption" :key="sub_index"  
					:style="{color:item=='IsStop' && data.IsStop?'#F56C6C':'#333333'}">
					<template v-if="source!=='baiinfo'">
						<template v-if="item=='IsStop'">
							{{ refreshStatusMap.get(data[item]) }}
						</template>
						<template v-else>
							{{
								(['FrequencyName','Frequency'].includes(item)) 
								? (source === 'lz')
									? frequencyType.get(data[item])
									: frequencyMap.get(data[item])
								: data[item] 
							}}
							<span v-if="item==='Opt'&&$route.path==='/steelChemical'&&data['IndexCode'] ">
								<el-button type="text" @click.stop="$emit('addToLib',data)"
									v-if="!data.EdbInfoId&&permissionBtn.isShowBtn('dataSourcePermission','mysteelData_addEdb')"
								>{{$t('ManualEdbListPage.add_tobase_btn')}}</el-button>
							</span>
						</template>
					</template>
					<!-- 百川盈孚数据源 频度和单位需要可编辑 -->
					<template v-else>
						<span>
							{{ item==='Frequency'?frequencyMap.get(data[item]):data[item] }}
							<span v-if="data['IndexCode']&&(item==='Frequency'||item==='Unit')">
								<img
									v-permission="permissionBtn.dataSourcePermission.bcyfData_edit"
									src="~@/assets/img/set_m/edit.png"
									alt="edit"
									style="width: 14px; height: 14px; margin-left: 5px;cursor:pointer;"
									@click.stop="editTarget(data)"
								/>
							</span>
						</span>
					</template>
				</td>
			</tr>
		</template>
		<template v-else>
			<tr
				v-for="(date,index) in dateArr"
				:key="index"
				align="center"
			>
				<th>{{date}}</th>
				<td v-for="(data, sub_index) in tableOption" :key="sub_index">
					{{data.DataList && data.DataList.find(item => date === item.DataTime) ? 
					data.DataList.find(item => date === item.DataTime)[dynamic_key]
					: ''}}
				</td>
			</tr>
		</template>
	</table>
</template>

<script>
export default {
	name: '',
	props: {
		tableOption: {
			type: Array,
		},
		tableType: {
			type: String
		},
		dateArr: {
			type: Array,
		},
		source: {
			type: String,
			defalut:'lz'
		}
	},
	computed: {
		headerArr(){
			let arr=['QuotaName','LzCode','Frequency','UnitName','ModifyTime']

			let sourceTypeOne = ['smm','coal','baiinfo','yyzx','icpi','coalWord','ccf']

			if(this.source==='gl'){
				arr=['IndexName','IndexCode','FrequencyName','UnitName','UpdateTime']
			}else if(this.source === 'glhg'){
				arr=['IndexName','IndexCode','FrequencyName','UnitName','UpdateTime','IsStop']
				if(this.$route.path==='/steelChemical'){
					arr.push('Opt')
				}
			}else if(sourceTypeOne.includes(this.source)){
				arr=['IndexName','IndexCode','Frequency','Unit','ModifyTime']
			}

			return arr
		},
		labelArr(){
			let temMap=new Map([
				['QuotaName', /* '指标名称' */this.$t('Edb.Detail.e_name')],
				['LzCode', /* '指标ID' */this.$t('Edb.Detail.e_id')],
				['Frequency', /* '频度' */this.$t('Edb.Detail.e_fre')],
				['UnitName', /* '单位' */this.$t('Edb.Detail.e_unit')],
				['ModifyTime', /* '更新时间' */this.$t('Edb.Detail.e_update_time')],
			])
			let sourceTypeOne = ['smm','coal','baiinfo','yyzx','icpi','coalWord','ccf']

			if(this.source==='gl'){
				temMap=new Map([
					['IndexName', this.$t('Edb.Detail.e_name')],
					['IndexCode', this.$t('Edb.Detail.e_id')],
					['FrequencyName', this.$t('Edb.Detail.e_fre')],
					['UnitName', this.$t('Edb.Detail.e_unit')],
					['UpdateTime', this.$t('Edb.Detail.e_update_time')]
				])
			}else if(this.source === 'glhg'){
				temMap=new Map([
					['IndexName', this.$t('Edb.Detail.e_name')],
					['IndexCode', this.$t('Edb.Detail.e_id')],
					['FrequencyName', this.$t('Edb.Detail.e_fre')],
					['UnitName', this.$t('Edb.Detail.e_unit')],
					['UpdateTime', this.$t('Edb.Detail.e_update_time')],
					['IsStop',this.$t('Edb.Detail.e_status')],
					['Opt',this.$t('Table.column_operations')],
				])
			}else if(sourceTypeOne.includes(this.source)){
				temMap=new Map([
					['IndexName', this.$t('Edb.Detail.e_name')],
					['IndexCode', this.$t('Edb.Detail.e_id')],
					['Frequency', this.$t('Edb.Detail.e_fre')],
					['Unit', this.$t('Edb.Detail.e_unit')],
					['ModifyTime', this.$t('Edb.Detail.e_update_time')],
				])
			}

			return temMap
		},
		dynamic_key(){
			let key='InputValue'
			if(['smm','baiinfo','coal','yyzx','icpi','ccf'].includes(this.source)){
				key='Value'
			}else if(this.source=='coalWord'){
				key='DealValue'
			}

			return key
		},
		//隆众原始数据库,返回频度不是string是number,分开写
		frequencyType(){
			return new Map([
				[1, /* 日度 */ this.$t('Edb.FreAll.day')],
				[2, /*周度*/ this.$t('Edb.FreAll.week')],
				[3, /*月度*/ this.$t('Edb.FreAll.month')],
				[4, /*季度*/ this.$t('Edb.FreAll.quarter')],
				[5, /*年度*/ this.$t('Edb.FreAll.year')],
				[99, /*无固定频率*/ this.$t('Edb.FreAll.unfixed')],
			])
		},
		//其他数据源
		frequencyMap(){
			return new Map([
				['日度',this.$t('Edb.FreAll.day')],
				['周度',this.$t('Edb.FreAll.week')],
				['月度',this.$t('Edb.FreAll.month')],
				['旬度',this.$t('Edb.FreAll.dekad')],
				['季度',this.$t('Edb.FreAll.quarter')],
				['半年度',this.$t('Edb.FreAll.half_year')],
				['年度',this.$t('Edb.FreAll.year')]
			])
		},
		//刷新状态
		refreshStatusMap(){
			return new Map([
				[0,this.$t('SystemManage.DataRefresh.enabled')],
				[1,this.$t('SystemManage.DataRefresh.disabled')]
			])
		}
	},
	data() {
		return {
			// dynamic_key: (this.source === 'smm'||this.source ==='baiinfo')? 'Value' 
			// :this.source==='coal'?'Value': 'InputValue',
	// 		headerArr: this.source === 'gl' 
	// 		? ['IndexName','IndexCode','FrequencyName','UnitName','UpdateTime']
	// 		: this.source === 'smm' 
	// 		? ['IndexName','IndexCode','Frequency','Unit','ModifyTime']
	// 		: this.source==='coal'
	// 		? ['IndexName','IndexCode','Frequency','Unit','ModifyTime']
    //   : this.source==='baiinfo'
    //   ? ['IndexName','IndexCode','Frequency','Unit','ModifyTime']
	// 		:['QuotaName','LzCode','Frequency','UnitName','ModifyTime'],
			/* frequencyType:new Map([
				[1,'日度'],
				[2,'周度'],
				[3,'月度'],
				[4,'季度'],
				[5,'年度'],
				[99,'无固定频率'],
			]), */
			// labelArr: this.source === 'gl' ? new Map([
			// 	['IndexName', '指标名称'],
			// 	['IndexCode', '指标ID'],
			// 	['FrequencyName', '频度'],
			// 	['UnitName', '单位'],
			// 	['UpdateTime', '更新时间'],
			// ]): this.source === 'smm' ? new Map([
			// 	['IndexName', '指标名称'],
			// 	['IndexCode', '指标ID'],
			// 	['Frequency', '频度'],
			// 	['Unit', '单位'],
			// 	['ModifyTime', '更新时间'],
			// ]) :this.source === 'coal' ? new Map([
			// 	['IndexName', '指标名称'],
			// 	['IndexCode', '指标ID'],
			// 	['Frequency', '频度'],
			// 	['Unit', '单位'],
			// 	['ModifyTime', '更新时间'],
			// ]) :this.source==='baiinfo'?new Map([
        	// 	['IndexName', '指标名称'],
			// 	['IndexCode', '指标ID'],
			// 	['Frequency', '频度'],
			// 	['Unit', '单位'],
			// 	['ModifyTime', '更新时间'],
      		// ]):new Map([
			// 	['QuotaName', '指标名称'],
			// 	['LzCode', '指标ID'],
			// 	['Frequency', '频度'],
			// 	['UnitName', '单位'],
			// 	['ModifyTime', '更新时间'],
			// ]),
		};
	},
	methods: {
		initCss() {
			if( this.source !== 'lz') {
				$('table').find('td').css({
						minWidth: '299px',
						maxWidth: '300px'
				})
			}
		},
    editTarget(data){
      this.$emit('editTarget',data)
    }
	},
	created() {},
	updated() {
		this.initCss()
	},
	mounted() {
	},
};
</script>
<style lang="scss" scoped>
table {
	font-size: 14px;
	color: #666;
	td,
	th {
		min-width: 179px;
		max-width: 180px;
		word-break: break-all;
		border: 1px solid #dcdfe6;
		height: 40px;
		background-color: #fff;
	}
	td  {
		&:first-child {
			border-left: none;
		}
	}
	th {
		position: sticky;
		border-right: none;
		left: 0;
		&:before {
			content: " ";
			width: 1px;
			height: 100%;
			position: absolute;
			right: 0;
			top: 0;
			border-right: 1px solid #dcdfe6;
		}
	}
	.header {
		th,td {
			background-color: #F0F2F5;
		}
		&:last-child {
			th,td {
				border-bottom: none;
			}
		}
	}
}
</style>