eta_front/src/views/dataEntry_manage/dataEntry/index.vue

<template>
  <div class="dataEntry-page">
    
    <header>
      <div class="left-btn">
        <el-button 
          type="primary" 
          @click="isShowinsert=true" 
          v-permission="permissionBtn.dataSourcePermission.manualDataWrite_import"
        ><!-- 导入数据 -->{{$t('ManualEntryPage.tit_insert_data')}}</el-button>

        <el-button 
          type="primary" 
          @click="$router.push({path: '/batchToBase' })" 
          v-permission="permissionBtn.dataSourcePermission.manualDataWrite_batch_add"
        ><!-- 批量加入指标库 -->{{$t('ManualEntryPage.batch_addbase')}}</el-button>

        <el-button 
          v-permission="permissionBtn.dataSourcePermission.manualDataWrite_online_excel" 
          type="primary" 
          @click="$router.push({path: '/onlineExcelCopy' })"
        ><!-- 在线Excel -->{{$t('ManualEntryPage.online_excel')}}</el-button>

        <el-button
          v-permission="permissionBtn.dataSourcePermission.manualDataWrite_batch_del" 
          type="primary" 
          @click="$router.push({path: '/batchDelList' })"
        ><!-- 批量删除 -->{{$t('ManualEntryPage.batch_del')}}</el-button>
        <el-select
          @change="changeFrequency"
          v-model="frequencySelect"
          :placeholder="$t('Edb.InputHolderAll.select_fre')"
          style="width: 240px;margin-left: 10px"
          clearable
        >
          <el-option
            v-for="item in frequencyArr"
            :key="item.label"
            :label="item.label"
            :value="item.value"
          >
          </el-option>
        </el-select>
      </div>

      <div class="right-wrap">
        <a style="width: 100%" :href="exportUrl" download>
          <el-button
            v-permission="permissionBtn.dataSourcePermission.manualDataWrite_export"
            type="text"
          >
            <!-- 导出Excel -->{{$t('Common.exp_excel')}}
            <el-tooltip placement="top">
              <div slot="content" v-html="exportMsg" style="max-width:350px"></div>
              <i class="el-icon-warning" style="color: #666;"></i>
            </el-tooltip>
          </el-button>
        </a>
        <el-select
					v-model="search_txt"
					v-loadMore="searchLoad"
					ref="searchRef"
					:filterable="!search_txt"
					remote
					clearable
					:placeholder="$t('Edb.InputHolderAll.input_name_orid')"
					style="width: 260px;margin-left:10px;"
					:remote-method="searchHandle"
					@click.native="inputFocusHandle"
				>
					<i slot="prefix" class="el-input__icon el-icon-search"></i>
					<el-option
						v-for="item in searchOptions"
						:key="item.TradeCode"
						:label="item.SecName"
						:value="item.TradeCode"
					/>
				</el-select>
      </div>
    </header>
    <div class="main">

      <div class="main-left" id="left">
        
        <div class="left-main">
            <div class="tree-cont">
              <el-tree
                ref="treeRef"
                class="classify-tree"
                :data="classifyList"
                node-key="UniqueCode"
                :props="defaultProp"
                :current-node-key="select_node"
                :default-expanded-keys="defaultShowNodes"
                :expand-on-click-node="false"
                check-strictly
                empty-text="暂无分类"
                lazy
                :load="getLazyTreeData"
                @current-change="nodeChange"
              >
                <span class="custom-tree-node" slot-scope="{ node, data }">
                  <span
                    class="text_oneLine node_label"
                    :style="`width:${
                      (select_node === data.UniqueCode && node.Nodewidth) || ''
                    }`"
                  >
                    <span>{{ data.ClassifyName  }}</span>
                  </span>
                </span>
              </el-tree>

            </div>
        </div>

      </div>

      <div class="main-right" id="right">
        <!-- 分类 -->
        <template v-if="!selectedEdb">
          <div>
            <h3><!-- 共{{total}}个指标 --> {{$t('EtaBasePage.total_show',{limit:total})}}</h3>
            <el-table
              :data="tableData"
              style="box-shadow: 0px 3px 6px rgba(155, 170, 219, 0.2);margin-top: 20px"
              border
              ref="table"
            >
              <el-table-column
                v-for="item in tableColums"
                :key="item.key"
                :label="item.label"
                :width="item.widthsty"
                :min-width="item.minwidthsty"
                align="center"
              >
                <template slot-scope="{row}">
                  <span v-if="item.key==='SecName'" class="editsty" @click="lookDetailHandle(row)">{{row[item.key]}}</span>
                  <span v-else>{{row[item.key]}}</span>
                </template>
              </el-table-column>

              <el-table-column
                :label="$t('Table.column_operations')"
                align="center"
                min-width="200"
              >
                <template slot-scope="{row}">
                  <div>
                    <span class="editsty" @click="handleEdb({item:row,type:'edit',from:1})"  v-if="permissionBtn.isShowBtn('dataSourcePermission','manualDataWrite_edit')">{{$t('Table.edit_btn')}}</span>

                    <span v-if="row.IsJoinEdb===0&&permissionBtn.isShowBtn('dataSourcePermission','manualDataWrite_add')" class="editsty" @click="handleEdb({item:row,type:'addToBase'})"><!-- 加入指标库 -->{{$t('ManualEntryPage.add_tobase')}}</span>

                    <span class="editsty" @click="handleEdb({item:row,type:'logs'})"><!-- 操作日志 -->{{$t('ManualEntryPage.opera_logs')}}</span>
                    <span v-if="row.IsJoinEdb===0&&permissionBtn.isShowBtn('dataSourcePermission','manualDataWrite_del')" class="deletesty" @click="handleEdb({item:row,type:'del'})">{{$t('Table.delete_btn')}}</span>
                  </div>

                  
                </template>
              </el-table-column>
              <div class="nodata" slot="empty">
                <tableNoData :text="$t('Table.prompt_slogan')" size="mini"/>
              </div>
            </el-table>
            
            <div style="height:35px;margin: 20px 0;">
              <m-page
                :page_no="pageNo"
                :pageSize="pageSize"
                :total="total"
                @handleCurrentChange="pageChange"
              />
            </div>
          </div>
        </template>

        <!-- 指标详情 -->
        <template v-else>
          <edbDetail
            ref="edbDetailRef"
            :id="selectedEdb"
            @handle="handleEdb"
          />
        </template>
      </div>
    </div>


  <!-- 导入数据弹窗 -->
  <insert-data
    :isShowinsert.sync="isShowinsert"
    @importSuccess="importSuccess"
    source="dataEntry"
  />

  
  <!-- 操作日志弹窗 -->
  <operateLogsDia
    :isShow.sync="isShowOperaLogs"
    :edbCode="operteId"
  />

  <!-- 加入指标库弹窗 -->
  <completeTargetDia
    :isOpenDialog="isAddBaseDia"
    @cancel="isAddBaseDia=false"
    :params="addBaseInfo"
    @add="handleAddBaseApi"
  />
  </div>
</template>
<script>
import { dataInterence } from '@/api/api.js';
import mPage from '@/components/mPage.vue';
import edbDetail from './components/edbDetail.vue'
import operateLogsDia from './components/operateLogsDia.vue';
import insertData from '../components/insertData.vue';
import completeTargetDia from '../databaseComponents/completeTargetDia.vue';
import { frequencySelectList } from '@/utils/defaultOptions';
export default {
  components: { 
    mPage,
    edbDetail,
    operateLogsDia,
    insertData,
    completeTargetDia
  },
  computed: {
    tableColums() {
      return [
        {  label: this.$t('Edb.Detail.e_id'),key: 'TradeCode' },
        {  label: this.$t('Edb.Detail.e_name'),key: 'SecName',minwidthsty:'150px' },
        {  label: this.$t('Edb.Detail.e_fre'),key: 'Frequency',widthsty:'100px' },
        {  label: this.$t('Edb.Detail.e_unit'),key: 'Unit', },
        {  label: this.$t('Edb.Detail.e_creator'),key: 'UserName', },
        {  label: this.$t('Edb.Detail.e_update_time'),key: 'ModifyTime', },
      ]
    },

    exportUrl() {
      let exportDataurl = process.env.VUE_APP_API_ROOT + "/entry/export/dataList";

      let str = `${exportDataurl}?ClassifyId=${
        this.selectClassifyId
      }&TradeCode=${
        this.selectedEdb ? this.selectedEdb : ''
      }&StartDate=&EndDate=&Mobile=&${localStorage.getItem("auth")}`;
      return str.replace(/#/g, encodeURIComponent("#")).replace(/;/g, encodeURIComponent(";"));
    },
    frequencyArr(){
        return frequencySelectList(['月度'])
    }
  },
  watch: {
    search_txt(nval) {
      if(!nval) return

      this.selectClassifyId = 0;
			this.selectedEdb = nval;

			this.selectNode = this.searchOptions.find(_ => _.TradeCode===nval).UniqueCode;
    }
  },
  data() {
    return {
      tableSearch:{},
      frequencySelect:'',
      defaultProp: {
        label: 'ClassifyName',
        children: 'Child',
				isLeaf: 'isLeaf'
      },
      defaultShowNodes: [],
      classifyList: [],

      tableData: [],
      pageNo: 1,
      total: 0,
      pageSize: 10,

      search_txt: '',
      searchOptions: [],
      search_page: 1,
      current_search: '',
      search_have_more: false,

      exportMsg: /* `导出当前页面筛选的指标列表` */this.$t('ManualEntryPage.export_msg'),//导出tip

      selectClassifyId: 0,
      selectNode: '',
      selectedEdb: 0,

      /* 操作日志弹窗 */
      isShowOperaLogs: false,
      operteId: '',

      /* 导入弹窗 */
      isShowinsert:false,

      /* 加入弹窗 */
      isAddBaseDia: false,
      addBaseInfo: {}
    }
  },
  mounted(){
    this.getClassify();
    if(sessionStorage.getItem('cacheDataList')){
      this.cacheDataList()
    }else{
      this.getTableData()
    }
  },
  methods:{
    // 缓存列表页面
    cacheDataList(){
      const cacheData=JSON.parse(sessionStorage.getItem('cacheDataList'))
      console.log(cacheData)
      if(cacheData.editType===1){
        // 列表进入编辑
        const dataArr=[
          {key:'ClassifyId',value:'selectClassifyId'},
          {key:'CurrentIndex',value:'pageNo'},
          {key:'PageSize',value:'pageSize'},
          {key:'Frequency',value:'frequencySelect'},
          {key:'total',value:'total'}
        ]
        dataArr.forEach(el=>{
          this[el.value]=cacheData.tableSearch[el.key]
        })
        this.getTableData()
      }else{
        // 详情进入编辑
        this.selectedEdb = cacheData.id;
        this.searchHandle(cacheData.id)
      }
      sessionStorage.removeItem('cacheDataList')
    },
    // 改变频度
    changeFrequency(){
      this.selectedEdb=''
      this.pageNo = 1;
      this.getTableData()
    },
    lookDetailHandle(row) {
      this.selectClassifyId = 0;
			this.selectNode = '';
			this.selectedEdb = row.TradeCode;
    },

    // 获取分类
		getClassify() {
			dataInterence.getClassifyV2().then(res =>{
				if(res.Ret === 200 && res.Data.List) {
					this.classifyList = res.Data.List||[];
				}
			})
		},

    //加载子指标
    async getLazyTreeData(node,resolve,maxLevel=2) {
      if(node.level===0){
				resolve(this.classifyList)
			}else if(node.level>0&&node.level<maxLevel){
				//获取对应层级的Child
				resolve(node.data.Child||[])
			}else{
				let arr=[]
				const res=await dataInterence.getClassifyLoadChild({
          ClassifyId: node.data.ClassifyId
        })
				if (res.Ret === 200) {
					const temarr = res.Data.List || [];
					arr=temarr.map(item=>{
						return {
							...item,
							isLeaf:item.TradeCode?true:false
						}
					})
				}
				resolve(arr)
			}
    },

    async getTableData() {
      this.tableSearch={
        ClassifyId: this.selectClassifyId,
        CurrentIndex: this.pageNo,
        PageSize: this.pageSize,
        Frequency:this.frequencySelect
      }
      const res = await dataInterence.getEdbListV2(this.tableSearch)
      if(res.Ret !==200) return 
      this.tableData = res.Data.List || [];
      this.total = res.Data.Paging.Totals;
    },

    pageChange(page) {
      this.pageNo = page;
      this.getTableData()
    },

    	/* 搜索 */
		searchHandle(query) {
			this.search_page = 1;
			this.current_search = query;
			this.searchApi(this.current_search)
		},

		searchApi(query,page=1) {
			dataInterence.searchEdbV2({
				Keyword:query,
				CurrentIndex: page
			}).then(res => {
				if(res.Ret !== 200) return

				const { List,Paging } = res.Data;
				this.search_have_more = page < Paging.Pages;
				this.searchOptions = page === 1 ? List : this.searchOptions.concat(List);
					
			})
		},

		/* 聚焦获取当前检索 */
		inputFocusHandle(e) {
			this.search_page = 1;
			this.current_search = e.target.value;
			this.searchApi(this.current_search);
		},

		searchLoad() {
			if(!this.search_have_more) return;
			this.searchApi(this.current_search,++this.search_page);
		},

    //选中节点
    nodeChange(data,node) {
      this.selectClassifyId = !data.TradeCode?data.ClassifyId:0;
			this.selectNode = data.UniqueCode;
			this.selectedEdb = data.TradeCode;
      
      if(this.selectClassifyId){
        this.pageNo = 1;
        this.getTableData();
      }
    },

    //导入成功
    importSuccess() {
      this.isShowinsert = false;
      this.getTableList();
    },

    /* 操作 */
    handleEdb({item,type,from}) {
      const typeMap = {
        'edit': this.handleEditEdb,
        'addToBase': this.handleAddToBase,
        'logs': this.handleOperaLogs,
        'del': this.handleDelEdb
      }

      typeMap[type]&&typeMap[type](item,from)
    },

    handleEditEdb(item,from) {
      let cacheData={
        editType:from,  // 1-列表编辑 2-详情编辑
        id:item.TradeCode,
        tableSearch:{...this.tableSearch,total:this.total}
      }
      sessionStorage.setItem('cacheDataList',JSON.stringify(cacheData))
      this.$router.push({
        path: '/dataEdit',
        query: {
          id: item.TradeCode,
        }
      })
    },

    /* 加入指标库 */
    handleAddToBase(item) {
      this.addBaseInfo = {
        edb_name: item.SecName,
        menu: [],
        frequency: item.Frequency,
        unit: item.Unit,
        ...item
      }
      this.isAddBaseDia = true
    },

    handleAddBaseApi(params) {
      dataInterence.addToBaseBatchV2(
          [{
            EdbCode: params.TradeCode,
            EdbName: params.EdbName,
            Frequency: params.Frequency,
            Unit: params.Unit,
            ClassifyId: params.ClassifyId
          }]
      ).then(res=>{
          this.saveLoading = false

          if(res.Ret!==200) return 

          this.$message.success(this.$t('MsgPrompt.add_msg2'))
          this.isAddBaseDia = false;

          if(this.selectedEdb){
            this.$refs.edbDetailRef.edbInfo.Detail.IsJoinEdb=1
          }else {
             this.getTableData()
          }
      })
    },

    // 查看操作日志
    handleOperaLogs(item){
      this.operteId = item.TradeCode;
      this.isShowOperaLogs = true;
    },
    
    /* 删除指标 */
    handleDelEdb(item) {
      // 删除前检测指标下是否有录入数据
			dataInterence.checkTarget({
				TradeCode:item.TradeCode
			}).then(res => {
				if(res.Data.Status===1){
					this.$message.error(/* "该指标已加入指标库，不可删除" */ this.$t('ManualEdbListPage.edb_not_allow_delete'))
					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.getClassify();
                this.getTableData()
							});
					}).catch(() => {});
				}
			})
    }
  },
}
</script>
<style scoped lang='scss'>
.dataEntry-page {
  *{box-sizing: border-box;}
  header,.main-left,.main-right {
    padding: 20px;
    background: #fff;
    border: 1px solid #C8CDD9;
    border-radius: 4px;
  }
  header {
    margin-bottom: 20px;
    display: flex;
    justify-content: space-between;
    align-items: center;
  }
  .main {
    display: flex;

    .main-left {
      width: 300px;
      flex-shrink: 0;
      margin-right: 30px;
      .tree-cont {
        height: calc(100vh - 260px);
        overflow: auto;
      }
      .classify-tree {
        color: #333;
        overflow: hidden; 
        .custom-tree-node {
          display: flex;
          justify-content: space-between;
          align-items: center;
          display: block;
          flex: 1;
        }
      }
    }

    .main-right {
      flex: 1;
      height: calc(100vh - 220px);
      overflow: auto;
    }
  }
}
</style>
<style lang="scss">
 .dataEntry-page {
  .classify-tree {
		.el-tree__drop-indicator {
			height: 3px;
			background-color: #409eff;
		}

		.el-tree-node__content {
			margin-bottom: 14px !important;
		}

		.el-tree-node__children {
			.el-tree-node {
				margin-bottom: 0px !important;
				padding-left: 18px;
			}

			.el-tree-node__content {
				margin-bottom: 5px !important;
				padding-left: 0 !important;
			}
		}

		.expanded.el-icon-caret-right:before {
			content: url('~@/assets/img/set_m/down.png') !important;
		}

		.el-icon-caret-right:before {
			content: url('~@/assets/img/set_m/slide.png') !important;
		}
		.el-tree-node__expand-icon{
			padding-top: 10px;
		}

		.el-tree-node__expand-icon.is-leaf.el-icon-caret-right:before {
			content: '' !important;
		}

		.el-tree-node__expand-icon.expanded {
			-webkit-transform: rotate(0deg);
			transform: rotate(0deg);
		}

		.el-tree-node.is-current>.el-tree-node__content {
			background-color: #f0f4ff !important;
		}

		.el-tree-node__content {
			padding-right: 10px !important;
		}
	}

} 
</style>