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">
          <template v-if="source!=='baiinfo'">
            {{ (item === 'Frequency' && source === 'lz') ? frequencyType.get(data[item]) : data[item] }}
          </template>
					<!-- 百川盈孚数据源 频度和单位需要可编辑 -->
					<template v-else>
            <span>
              {{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']

			if(this.source==='gl'){
				arr=['IndexName','IndexCode','FrequencyName','UnitName','UpdateTime']
			}
			if(this.source==='smm'){
				arr=['IndexName','IndexCode','Frequency','Unit','ModifyTime']
			}
			if(this.source==='coal'){
				arr=['IndexName','IndexCode','Frequency','Unit','ModifyTime']
			}
			if(this.source==='baiinfo'){
				arr=['IndexName','IndexCode','Frequency','Unit','ModifyTime']
			}
			if(this.source==='yyzx'){
				arr=['IndexName','IndexCode','Frequency','Unit','ModifyTime']
			}

			return arr
		},
		labelArr(){
			let temMap=new Map([
				['QuotaName', '指标名称'],
				['LzCode', '指标ID'],
				['Frequency', '频度'],
				['UnitName', '单位'],
				['ModifyTime', '更新时间'],
			])

			if(this.source==='gl'){
				temMap=new Map([
					['IndexName', '指标名称'],
					['IndexCode', '指标ID'],
					['FrequencyName', '频度'],
					['UnitName', '单位'],
					['UpdateTime', '更新时间'],
				])
			}
			if(this.source==='smm'){
				temMap=new Map([
					['IndexName', '指标名称'],
					['IndexCode', '指标ID'],
					['Frequency', '频度'],
					['Unit', '单位'],
					['ModifyTime', '更新时间'],
				])
			}
			if(this.source==='coal'){
				temMap=new Map([
					['IndexName', '指标名称'],
					['IndexCode', '指标ID'],
					['Frequency', '频度'],
					['Unit', '单位'],
					['ModifyTime', '更新时间'],
				])
			}
			if(this.source==='baiinfo'){
				temMap=new Map([
					['IndexName', '指标名称'],
					['IndexCode', '指标ID'],
					['Frequency', '频度'],
					['Unit', '单位'],
					['ModifyTime', '更新时间'],
				])
			}
			if(this.source==='yyzx'){
				temMap=new Map([
					['IndexName', '指标名称'],
					['IndexCode', '指标ID'],
					['Frequency', '频度'],
					['Unit', '单位'],
					['ModifyTime', '更新时间'],
				])
			}

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

			return key
		}
	},
	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>