eta_front/src/views/dataEntry_manage/targetList.vue

<template>
	<div class="dataEntry-container2">
		<div class="data-top-container">
			<!-- <el-button type="primary" size="medium" style="marginRight:20px;" @click="insertData(1)">录入数据</el-button>
			<el-button type="primary" size="medium" style="marginRight:20px;" @click="insertData(2)">新增指标</el-button>
			<el-button type="primary" size="medium" style="marginRight:20px;" @click="handleImport">导入数据</el-button>
			<el-button size="medium" @click="handleExport">导出数据</el-button> -->
			<el-button 
				v-permission="permissionBtn.dataSourcePermission.manualData_add"
        type="primary"
				size="medium" 
				@click="insertData(2)"
			><!-- 新增指标 -->{{$t('ManualEdbListPage.add_edb_btn')}}</el-button>
			<!-- <el-button type="primary" size="medium" @click="handleImport">导入新指标</el-button> -->
			<el-input
				:placeholder="$t('ManualEdbListPage.ph_search')"
				v-model="search_txt"
				@input="searchHandle"
				style="maxWidth:260px;float:right">
				<i slot="prefix" class="el-input__icon el-icon-search"></i>
			</el-input>
		</div>
		<div class="data-bot-container">
			<div style="margin-bottom:30px">
				<el-cascader
					:options="fillterClassifyList"
					v-model="classify_id"
					:props="classifyProps"
					@change="classifyChange"
					:placeholder="$t('ManualEdbListPage.ph_classify')"
					:show-all-levels="false"
					style="maxWidth:240px;marginRight:30px;"
					clearable>
				</el-cascader>
				<el-select 
					v-model="frequency" 
					:placeholder="$t('Edb.InputHolderAll.input_fre')" 
					@change="frequencyChange" 
					style="maxWidth:240px;marginRight:30px;" 
					clearable
				>
					<el-option
						v-for="item in frequencyList"
						:key="item.value"
						:label="item.label"
						:value="item.value">
					</el-option>
				</el-select>
				<el-date-picker
					v-model="date"
					type="daterange"
					:range-separator="$t('Common.to')"
					:start-placeholder="$t('ManualEdbListPage.ph_start_time')"
					:end-placeholder="$t('ManualEdbListPage.ph_end_time')"
					@change="dateChange"
					value-format="yyyy-MM-dd">
				</el-date-picker>
			</div>
			<!-- 展示表格 -->
			<el-table 
			:data="tableData" 
			v-loading="isShowloadding"
			:element-loading-text="$t('Table.data_loading')" 
			:default-sort = "{prop: 'date', order: 'descending'}"
			border>
				<!-- 指标表格 -->
				<el-table-column
				prop="CreateDate"
				:label="$t('ManualEdbListPage.table_col_date')"
				sortable
				align="center">
					<template slot-scope="scope"> <span style="position: relative;">{{scope.row.CreateDate|formatTime}}<i v-if="scope.row.CreateDate.substr(0,10)===today" style="width:6px;height:6px;background:#FB5F5F;borderRadius:50%;position:absolute;right:-10px;top:-3px;"></i></span> </template>
				</el-table-column>
				<el-table-column
				prop="TradeCode"
				:label="$t('Edb.Detail.e_id')"
				align="center">
					<template slot-scope="scope"> <span>{{scope.row.TradeCode}}</span> </template>
				</el-table-column>
				<el-table-column
				prop="SecName"
				:label="$t('Edb.Detail.e_name')"
				align="center">
					<template slot-scope="scope"> <span>{{scope.row.SecName}}</span> </template>
				</el-table-column>
				<el-table-column
				prop="Frequency"
				:label="$t('Edb.Detail.e_fre')"
				align="center">
					<template slot-scope="scope"> <span>{{scope.row.Frequency}}</span> </template>
				</el-table-column>
				<el-table-column
				prop="ClassifyName"
				:label="$t('ManualEdbListPage.table_col_classify')"
				align="center">
					<template slot-scope="scope"> <span>{{scope.row.ClassifyName}}</span> </template>
				</el-table-column>
				<el-table-column
				prop="Unit"
				:label="$t('Edb.Detail.e_unit')"
				align="center">
					<template slot-scope="scope"> <span>{{scope.row.Unit}}</span> </template>
				</el-table-column>
				<el-table-column
				:label="$t('ManualEdbListPage.table_col_creator')"
				align="center">
					<template slot-scope="scope"> <span>{{scope.row.UserName}}</span> </template>
				</el-table-column>
				<el-table-column :label="$t('Table.column_operations')" align="center">
					<template slot-scope="scope">
						<div style="color:#4099ef; font-size:24px;">
							<span v-permission="permissionBtn.dataSourcePermission.manualData_add"
                                class="editsty" @click="editHandle(scope.row)" style="marginRight:20px;">{{$t('Table.edit_btn')}}</span>
							<span v-permission="permissionBtn.dataSourcePermission.manualData_del"
                                class="deletesty" @click="delHandle(scope.row)">{{$t('Table.delete_btn')}}</span>
						</div>
					</template>
				</el-table-column>
				<div  slot="empty" style="lineHeight:25px;margin:20px 0;color:#95A9C5;">
					<tableNoData :text="$t('ManualEdbListPage.no_search_msg')" size="mini"/>
				</div>
			</el-table>
			<div class="toolbar">
		  		<el-pagination 
				  layout="total,prev,pager,next,jumper" 
				  background 
				  :current-page="page_no"
				  @current-change="handleCurrentChange"
				  :page-size="pageSize" 
				  @size-change="handleSizeChange" 
				  :total="total" 
				  style="float:right;">
				</el-pagination>
			</div>
		</div>
		<!-- 新增指标弹窗 -->
		<add-target
		ref="Atarget"
		:unitList="unitList"
		:formData="formData"
		:addTargetDefaultClassId="addTargetDefaultClassId"
		:dialogTitle="dialogTitle"
		:typeList="classifyList"
		:isShowdialog="isShowdialog"
		:is_editData="is_editData"
		@cancelHandle="cancelHandle"
		@changeForm="changeForm"
		@addOver="addOver">
		</add-target>
		<edit-target
		:unitList="unitList"
		:tab_act="tab_act"
		:typeList="classifyList"
		:editTitle="editTitle"
		:formData="editFormData"
		:edit_dataId="edit_dataId"
		:isShowedit="isShowedit"
		@cancelEdit="cancelEdit"
		@editDataOver="editDataOver"
		@changeEditForm="changeEditForm">
		</edit-target>
		<!-- 导入数据弹窗 -->
		<insertdata
		:isShowinsert="isShowinsert"
		@cancelHandle="cancelHandle"
		@importSuccess="importSuccess"
		source="targetList">
		</insertdata>
	</div>
</template>

<script>
import addTarget from './components/addTarget';
import insertdata from './components/insertData';
import editTarget from './components/editTarget';
import { dataInterence } from 'api/api.js';
import http from "@/api/http.js";
export default {
	name: "dataList",
	data() {
		return {
			today:http.dateFormatter(new Date(),false),
			dialogTitle:'录入数据',
			tabs:['录入数据','指标管理'],
			tab_act:1,
			isShowloadding:false,//loading
			classifyList:[],//分类列表
			fillterClassifyList:[],//筛选分类列表
			classifyProps:{
				label: "ClassifyName",
				value: "ClassifyId",
				children: "Child"
			},
			frequencyList:[
				{
					value: '日度',
					label: /* '日度'  */this.$t('Edb.FreAll.day'),
				},
				{
					value: '周度',
					label: /* '周度' */this.$t('Edb.FreAll.week'),
				},
				{
					value: '旬度',
					label: /* '旬度' */this.$t('Edb.FreAll.dekad'),
				},
				{
					value: '月度',
					label: /* '月度' */this.$t('Edb.FreAll.month'),
				},
				{
					value: '季度',
					label: /* '季度' */ this.$t('Edb.FreAll.quarter'),
				},
				{
					value: '半年度',
					label: /* '半年度' */ this.$t('Edb.FreAll.month'),
				},
				{
					value: '年度',
					label: /* '年度' */ this.$t('Edb.FreAll.year'),
				}
			],//频度列表
			tableData: [],
			total:1,//总条数
			page_no:1,//当前页
			pageSize:15,//每页条数
			date:'',
			frequency:'',//频度
			classify_id:0,//分类id
			search_txt:'',//关键字搜索
			isShowdialog:false,//显示新增指标
			isShowinsert:false,//导入弹窗
			formData:{
				type:'',
				date:http.dateFormatter(new Date(),false),//日期
				target:'',//指标
				value:'',//值
				frequency:'日度',//频度
				unit:'',//单位
				targetName:'',//指标名称
				trade_code:'',//指标标识
				up_week:'',//更新时间周
				up_time:'',//更新时间
				up_day:'',//更新时间日
			},//指标弹窗数据
			editFormData:{},//修改表单数据
			isShowedit:false,//显示编辑弹窗
			editTitle:'修改录入数据',
			is_editData:false,//是否是编辑数据
			edit_dataId:'',//编辑分类id
			unitList:[],//指标单位数据

			addTargetDefaultClassId:0,//新增指标时默认的分类id
		};
	},
	components: {
		addTarget,
		editTarget,
		insertdata
	},
	methods: {
		// 获取指标单位
		async getTargetUnitList(){
			let res=await dataInterence.getTargetUnitList()
			if(res.Ret===200){
				this.unitList=res.Data&&res.Data.map(item=>{
					return {value:item}
				})
			}
		},

		// 选择指标
		chooseType(e) {
			//console.log(e)
		},
		// 新增指标或录入数据
		insertData(type) {
			this.isShowdialog = true;
			this.dialogTitle = type===1?'录入数据':'新增指标';
		},
		// 隐藏弹框
		cancelHandle(bol) {
			if(bol === 1) {
				this.isShowdialog = false;
				this.$refs.Atarget.$refs.formD.resetFields();
				this.formData = {
					type:this.classifyList[0].Child[0].ClassifyName,
					date:http.dateFormatter(new Date(),false),//日期
					target:'',//指标
					value:'',//值
					frequency:'日度',//频度
					unit:'',//单位
					targetName:'',//指标名称
					trade_code:'',//指标标识
					up_week:'',//更新时间周
					up_time:'',//更新时间
					up_day:'',//更新时间日
				}
			}else {
				this.isShowinsert = false;
			}
		},
		// 重置条件
		init() {
			this.page_no = 1;//当前页
			this.pageSize = 15;//每页条数
			this.date = '';
			this.frequency = '';//频度
			this.classify_id = 0;//分类id
			this.search_txt = '';//关键字搜索
		},
		// 获取数据表格
		getTableData(tab = 1) {
			//取分类id
			let classify_id;
			if (this.classify_id instanceof Array) {
				let arr = JSON.parse(JSON.stringify(this.classify_id));
				classify_id = arr.pop();
			}else {
				classify_id = this.classify_id
			}
			let parmas = {
				CurrentIndex: this.page_no,
			   PageSize: this.pageSize,
				StartDate: this.date ? this.date[0] : '',
				EndDate: this.date ? this.date[1] : '',
				Frequency: this.frequency,
				ClassifyId:classify_id,
				KeyWord: this.search_txt
			}
			// if(tab === 0) {
				//获取数据表格
				// this.isShowloadding = true;
				// dataInterence.getDatalist(parmas).then(res => {
				// 	// console.log(res)
				// 	if(res.Ret === 200 && res.data.list) {
				// 		this.tableData = res.data.list;
				// 		this.total = parseInt(res.data.total_num);
				// 	}
				// 	this.isShowloadding = false;
				// })
			// }else {
				// 获取指标表格
				this.isShowloadding = true;
				dataInterence.targetList(parmas).then(res => {
					if(res.Ret === 200 && res.Data.List) {
						this.tableData = res.Data.List;
						this.total = parseInt(res.Data.Paging.Totals);
					}else {
						this.tableData = []
					}
					this.isShowloadding = false;
				})
			// }
		},
		// 获取分类
		getClassify() {
			dataInterence.getClassify().then(res =>{
				if(res.Ret === 200 && res.Data.List) {
					this.classifyList = res.Data.List;
					// 默认分类第一个
					this.classifyList[0].Child.length&&this.classifyList[0].Child.forEach((item,index) => {
						if(index == 0) {
							this.formData.type = item.ClassifyName;
							let classify_id = item.ClassifyId;
							// sessionStorage.setItem('default_id',classify_id)
							this.addTargetDefaultClassId=classify_id
						}
					})
					//处理没有二级的一级菜单
					let arr = JSON.parse(JSON.stringify(res.Data.List));
					arr && arr.forEach((item,index) => {
						let obj = {}
						obj.ClassifyId = item.ClassifyId; 
						obj.ClassifyName = item.ClassifyName;
						obj.ParentId = item.ParentId; 
						if(item.Child && item.Child.length) {
							obj.Child = item.Child
						}
						this.fillterClassifyList.push(obj)
					});
				}
			})
		},
		// 修改表单指标分类
		changeForm(name) {
			//切换分类清空form
			this.$refs.Atarget.$refs.formD.resetFields();//重置校验
			this.formData = {
				type:name,
				date:http.dateFormatter(new Date(),false),//日期
				target:'',//指标
				value:'',//值
				frequency:'日度',//频度
				unit:'',//单位
				targetName:'',//指标名称
				trade_code:'',//指标标识
				up_week:'',//更新时间周
				up_time:'',//更新时间
				up_day:'',//更新时间日
			}
		},
		// 导入数据
		handleImport() {
			this.isShowinsert = true;
		},
		// 导入数据成功
		importSuccess() {
			this.isShowinsert = false;
			this.getTableData();
		},
		// 页码改变
		handleCurrentChange(page) {
			// console.log(e)
			this.page_no = page;
			// if(this.tab_act === 0) {
			// 	this.getTableData();
			// }else {
				this.getTableData(1);
			// }
		},
		// 页数改变
		handleSizeChange(size) {
			this.pageSize = size;
			// if(this.tab_act === 0) {
			// 	this.getTableData();
			// }else {
				this.getTableData(1);
			// }
		},
		// 日期改变
		dateChange() {
			// if(this.tab_act === 0) {
			// 	this.getTableData();
			// }else {
				this.page_no = 1;//当前页
				this.getTableData(1);
			// }
		},
		// 筛选分类改变
		classifyChange(e) {
			// console.log(this.classify_id,e)
			// if(this.tab_act === 0) {
			// 	this.getTableData();
			// }else {
				this.page_no = 1;//当前页
				this.getTableData(1);
			// }
		},
		// 频度改变
		frequencyChange() {
			// if(this.tab_act === 0) {
			// 	this.getTableData();
			// }else {
				this.page_no = 1;//当前页
				this.getTableData(1);
			// }
		},
		// 关键字搜索
		searchHandle() {
			// if(this.tab_act === 0) {
			// 	this.getTableData();
			// }else {
				this.page_no = 1;//当前页
				this.getTableData(1);
			// }
		},
		// 新增成功
		addOver(type) {
			this.$refs.Atarget.$refs.formD.resetFields();//重置校验
			this.formData = {
				type:type,
				date:http.dateFormatter(new Date(),false),//日期
				target:'',//指标
				value:'',//值
				frequency:'日度',//频度
				unit:'',//单位
				targetName:'',//指标名称
				trade_code:'',//指标标识
				up_week:'',//更新时间周
				up_time:'',//更新时间
				up_day:'',//更新时间日
			}
			this.isShowdialog=false
			this.getTableData();
		},
		// 编辑中修改分类
		changeEditForm(name,id) {
			
			this.$set(this.editFormData,'type',name);
			this.edit_dataId = id;
		},
		// 编辑
		editHandle(item) {
			
			this.isShowedit = true;
			this.edit_dataId = item.ClassifyId;
			let up_week,//更新时间周
				up_time,//更新时间
				up_day;
			// 处理更新时间
			if(item.NoticeTime) {
				if(item.Frequency === '日度' ) {
					up_week = '';
					up_time = item.NoticeTime;
					up_day = '';
				}else if(item.Frequency === '周度') {
					up_week = item.NoticeTime.substr(0,2);
					up_time = item.NoticeTime.substr(3);
					up_day = '';
				}else if(item.Frequency === '月度') {
					up_week = '';
					up_time = item.NoticeTime.substr(4);
					up_day = item.NoticeTime.substr(0,3);
				}else if(item.Frequency==='季度'){
					up_week = '';
					up_time = item.NoticeTime.substr(5);
					up_day = item.NoticeTime.substr(0,4);
				}else if(item.Frequency==='半年度'){
					up_week = '';
					up_time = item.NoticeTime.substr(5);
					up_day = item.NoticeTime.substr(0,4);
				}else if(item.Frequency==='年度'){
					up_week = '';
					up_time = item.NoticeTime.substr(4);
					up_day = item.NoticeTime.substr(0,3);
				}

			}else {
				up_week = '';
				up_time = '';
				up_day = '';
			}
				this.editTitle="编辑指标";
				this.editFormData = {
					type:item.ClassifyName,
					frequency:item.Frequency,
					unit:item.Unit,
					targetName:item.SecName,
					trade_code:item.TradeCode,
					up_week:up_week,//更新时间周
					up_time:up_time,//更新时间
					up_day:up_day,//更新时间日
				}
			// }
		},
		// 编辑数据成功
		editDataOver(tab=1) {
			// this.tab = tab;
			this.isShowedit = false;
			this.getTableData(tab);
		},
		// 取消编辑
		cancelEdit() {
			this.isShowedit = false;
		},
		// 删除指标
		delHandle(item) {
			console.log(item)
			// 删除前检测指标下是否有录入数据
			dataInterence.checkTarget({
				TradeCode:item.TradeCode
			}).then(res => {
				if(res.Data.Status===1){
					this.$message.error("该指标已加入指标库，不可删除")
					return
				}else{
					this.$confirm(
						res.Data.Status===0 ? this.$t('ManualEdbListPage.del_edb_msg') : this.$t('ManualEdbListPage.del_edb_rela_msg'),
						this.$t('Dialog.warn_tit'),{
						type:'warning'
					}).then(() => {
						dataInterence.delTarget({
							TradeCode:item.TradeCode
						}).then(res =>{
								if( res.Ret !== 200 ) return
								this.$message.success(/* '删除成功!' */this.$t('MsgPrompt.delete_msg'));
								this.getTableData();
							});
					}).catch(() => {});
				}
			})
		}
	},
	created() {
		// sessionStorage.removeItem('default_id')
		this.getClassify();
		this.getTargetUnitList()
	},
	mounted() {
		this.getTableData();
	}
};
</script>
<style lang="scss">
.dataEntry-container2 {
	// background: #fff;
	// box-shadow: 0 2px 12px 0 rgba(0,0,0,.1);
	.data-top-container {
		padding:  21px 30px;
		background: #FFFFFF;
		border: 1px solid #ECECEC;
		border-radius: 4px;
		margin-bottom: 30px;
		// .type-list {
		// 	max-width: 100px;
		// }
		// .rigth-cont {
		// 	margin: 0 auto;
		// }
		// .bot-handle {
		// 	margin: 80px auto 0;
		// }
	}
	.data-bot-container {
		padding: 31px 30px;
		background: #FFFFFF;
		border: 1px solid #ECECEC;
		border-radius: 4px;
		.tabs-cont {
			display: flex;
			justify-content: space-around;
			align-items: center;
			margin-bottom: 60px;
			color: #1F2E4D;
			font-size: 16px;
			.tab-item {
				width: 20%;
				text-align: center;
				cursor: pointer;
				padding-bottom:10px;
				transition: all 0.3s;
				border-bottom: 2px solid transparent;
				&.act {
					border-bottom: 2px solid #5882EF;
					color: #5882EF;
				}
			}
		}
	}
}
</style>