暂存

src/routes/modules/dataRoutes.js

@@ -201,6 +201,13 @@ export default [
           keepAlive: false,
         },
       },
+      {
+        path: "ysTarget",
+        component: () =>
+          import("@/views/dataEntry_manage/thirdBase/ysTargetBase.vue"),
+        name: "有色原始数据库",
+        hidden: false,
+      },
     ],
   },
 ];

src/views/dataEntry_manage/thirdBase/ysTargetBase.vue

@@ -0,0 +1,391 @@
+<template>
+  <div id="YS-data-container">
+    <div class="search-zone">
+      <div class="search-row">
+        <el-cascader @change="searchList" :options="classifyList" v-model="searchParams.classifyId" clearable
+          placeholder="请选择分类" class="search-item"
+          :props="{
+            value:'id',
+            label:'label',
+            children:'children',
+            emitPath:false
+          }"></el-cascader>
+        <el-select v-model="searchParams.frequency" class="search-item" placeholder="请选择频度" clearable @change="searchList">
+          <el-option :label="item" :value="item" v-for="item in frequencyList" :key="item"></el-option>  
+        </el-select>
+        <el-select v-model="searchParams.dataStatus" class="search-item" placeholder="请选择指标数据状态" clearable @change="searchList">
+          <el-option :label="item.label" :value="item.id" v-for="item in dataStatusList" :key="item.id"></el-option>  
+        </el-select>
+        <el-select v-model="edbCheckList" multiple filterable remote clearable collapse-tags class="search-item edb-filter"
+          reserve-keyword placeholder="指标ID/指标名称" :remote-method="remoteMethod" :loading="edbDataLoading"
+          @clear="searchList" @remove-tag="removeEdbFilterTag" ref="edbFilterRef" >
+          <el-option v-for="item in edbFilterDataList" :key="item.id"
+            :label="item.label" :value="item.id">
+          </el-option>
+        </el-select>
+        <el-checkbox label="列表全选" v-model="isCheckAll" :indeterminate="isCheckIndeterminate" style="margin: 0 30px 10px 0;"
+        @change="listCheckAllChange"></el-checkbox>
+      </div>
+      <el-button type="primary" style="margin: 0 0 10px 0;" @click="addToEdbBase">添加到指标库</el-button>
+    </div>
+    <div class="table-zone">
+      <el-table :data="tableData" border @sort-change="sortChange"  @selection-change="selectionChange"
+      ref="edbDataRef" @select="selectHandle" @select-all="selectAllHandle">
+        <el-table-column type="selection" min-width="50" align="center"></el-table-column>
+        <el-table-column label="指标ID" align="center" prop="edbId">
+          <template slot-scope="{row}">
+            {{row.edbId}}
+          </template>
+        </el-table-column>
+        <el-table-column label="指标名称" align="center" show-overflow-tooltip prop="edbName">
+          <template slot-scope="{row}">
+            {{row.edbName}}
+          </template>
+        </el-table-column>
+        <el-table-column label="频度" align="center" prop="frequency" width="80">
+          <template slot-scope="{row}">
+            {{row.frequency}}
+          </template>
+        </el-table-column>
+        <el-table-column label="单位" align="center" prop="unit" show-overflow-tooltip >
+          <template slot-scope="{row}">
+            {{row.unit}}
+          </template>
+        </el-table-column>
+        <el-table-column label="指标开始时间" align="center" prop="edbStartDate" show-overflow-tooltip
+        sortable="custom">
+          <template slot-scope="{row}">
+            {{row.edbStartDate}}
+          </template>
+        </el-table-column>
+        <el-table-column label="指标最新时间" align="center" prop="ebdNewestDate" show-overflow-tooltip
+        sortable="custom" >
+          <template slot-scope="{row}">
+            {{row.ebdNewestDate}}
+          </template>
+        </el-table-column>
+        <el-table-column label="更新时间" align="center" prop="updateDate" sortable="custom"
+        show-overflow-tooltip>
+          <template slot-scope="{row}">
+            {{row.updateDate}}
+          </template>
+        </el-table-column>
+        <el-table-column label="预计发布时间" align="center" prop="publishTimePre" sortable="custom"
+        show-overflow-tooltip >
+          <template slot-scope="{row}">
+            {{row.publishTimePre}}
+          </template>
+        </el-table-column>
+        <el-table-column label="数据来源" align="center" prop="source" >
+          <template slot-scope="{row}">
+            {{row.source}}
+          </template>
+        </el-table-column>
+        <el-table-column label="指标数据状态" align="center" prop="dataStatus"
+        show-overflow-tooltip >
+          <template slot-scope="{row}">
+            {{row.dataStatus}}
+          </template>
+        </el-table-column>
+        <el-table-column label="分类" align="center" prop="classify" show-overflow-tooltip >
+          <template slot-scope="{row}">
+            {{row.classify}}
+          </template>
+        </el-table-column>
+      </el-table>
+    </div>
+    <m-page class="table-page" v-show="total"
+    :total="total" :pageSize="searchParams.PageSize"
+    :page_no="searchParams.CurrentIndex"
+    @handleCurrentChange="pageNumberChange"/>
+  </div>
+</template>
+
+<script>
+import mPage from '@/components/mPage.vue'
+import { dataInterence } from "@/api/api.js";
+
+  export default {
+    name:'ysTargetBase',
+    components:{mPage},
+    data() {
+      this.flowToData=[{id:'M',label:'Import'},{id:'X',label:'Export'}]
+      return {
+        searchParams:{
+          classifyId:'',
+          frequency:'',
+          dataStatus:'',
+          edbMessage:'',
+          CurrentIndex:1,
+          PageSize:5,
+          SortParam:'',
+          SortType:'',
+          checkAll:0
+        },
+        isCheckAll:false,
+        isCheckIndeterminate:false,
+        // 标志列表当前是全选状态还是不是全选状态和 isCheckAll不一样
+        checkAllStatus:false,
+        classifyList:[],
+        frequencyList: [],
+        dataStatusList:[],
+        edbFilterDataList:[],
+        // 选择的指标名称筛选项
+        edbCheckList:[],
+        edbDataLoading:false,
+        // edb的过滤选项是否有变化，用于失焦是判断是否需要请求
+        hasEdbFilterChange:false,
+        isSortList:false,
+        constData:[
+          {id:'4',edbId:'a10123431',edbName:'中国金属硅分省份月度开工率：河南',frequency:'日度',unit:'%',edbStartDate:'2008-01-01',ebdNewestDate:'2023-12-06',
+          updateDate:'2023-12-06 16:17:09',publishTimePre:'16:17:09',source:'有色',dataStatus:'正常更新',classify:'宏观/房地产/国内'},
+          {id:'41',edbId:'a10123431',edbName:'中国金属硅分省份月度开工率：河南',frequency:'日度',unit:'%',edbStartDate:'2008-01-01',ebdNewestDate:'2023-12-06',
+          updateDate:'2023-12-06 16:17:09',publishTimePre:'16:17:09',source:'有色',dataStatus:'正常更新',classify:'宏观/房地产/国内'},
+          {id:'42',edbId:'a10123431',edbName:'中国金属硅分省份月度开工率：河南',frequency:'日度',unit:'%',edbStartDate:'2008-01-01',ebdNewestDate:'2023-12-06',
+          updateDate:'2023-12-06 16:17:09',publishTimePre:'16:17:09',source:'有色',dataStatus:'正常更新',classify:'宏观/房地产/国内'},
+          {id:'45',edbId:'a10123431',edbName:'中国金属硅分省份月度开工率：河南',frequency:'日度',unit:'%',edbStartDate:'2008-01-01',ebdNewestDate:'2023-12-06',
+          updateDate:'2023-12-06 16:17:09',publishTimePre:'16:17:09',source:'有色',dataStatus:'正常更新',classify:'宏观/房地产/国内'},
+          {id:'47',edbId:'a10123431',edbName:'中国金属硅分省份月度开工率：河南',frequency:'日度',unit:'%',edbStartDate:'2008-01-01',ebdNewestDate:'2023-12-06',
+          updateDate:'2023-12-06 16:17:09',publishTimePre:'16:17:09',source:'有色',dataStatus:'正常更新',classify:'宏观/房地产/国内'},
+          {id:'49',edbId:'a10123431',edbName:'中国金属硅分省份月度开工率：河南',frequency:'日度',unit:'%',edbStartDate:'2008-01-01',ebdNewestDate:'2023-12-06',
+          updateDate:'2023-12-06 16:17:09',publishTimePre:'16:17:09',source:'有色',dataStatus:'正常更新',classify:'宏观/房地产/国内'},
+          {id:'46',edbId:'a10123431',edbName:'中国金属硅分省份月度开工率：河南',frequency:'日度',unit:'%',edbStartDate:'2008-01-01',ebdNewestDate:'2023-12-06',
+          updateDate:'2023-12-06 16:17:09',publishTimePre:'16:17:09',source:'有色',dataStatus:'正常更新',classify:'宏观/房地产/国内'},
+          {id:'488',edbId:'a10123431',edbName:'中国金属硅分省份月度开工率：河南',frequency:'日度',unit:'%',edbStartDate:'2008-01-01',ebdNewestDate:'2023-12-06',
+          updateDate:'2023-12-06 16:17:09',publishTimePre:'16:17:09',source:'有色',dataStatus:'正常更新',classify:'宏观/房地产/国内'},
+          {id:'477',edbId:'a10123431',edbName:'中国金属硅分省份月度开工率：河南',frequency:'日度',unit:'%',edbStartDate:'2008-01-01',ebdNewestDate:'2023-12-06',
+          updateDate:'2023-12-06 16:17:09',publishTimePre:'16:17:09',source:'有色',dataStatus:'正常更新',classify:'宏观/房地产/国内'},
+          {id:'444',edbId:'a10123431',edbName:'中国金属硅分省份月度开工率：河南',frequency:'日度',unit:'%',edbStartDate:'2008-01-01',ebdNewestDate:'2023-12-06',
+          updateDate:'2023-12-06 16:17:09',publishTimePre:'16:17:09',source:'有色',dataStatus:'正常更新',classify:'宏观/房地产/国内'}
+        ],
+        tableData:[],
+        tableDataIds:[],
+        total:10,
+        dataLoading:false,
+        tableDataCheckedList:[]
+      }
+    },
+    computed:{
+    },
+    watch:{
+      edbCheckList(value){
+        console.log(value);
+        if(value){
+          this.searchParams.edbMessage = value.join(',')
+        }else{
+          this.searchParams.edbMessage = ''
+        }
+        this.hasEdbFilterChange=true
+      },
+    },
+    created() {
+      this.getList()
+      this.getYsClassifyList()
+      this.getYsDataStatusList()
+      this.getYsFrequencyList()
+    },
+    mounted(){
+      // el-select 的@blur绑定事件不生效代替方法
+      this.$refs.edbFilterRef.$refs.input.blur=()=>{
+        if(this.hasEdbFilterChange){
+          console.log('失焦');
+          this.searchList()
+          this.hasEdbFilterChange=false
+        }
+      }
+    },
+    methods: {
+      //获取有色数据库数据列表
+      getList(){
+        console.log(this.searchParams);
+        // TODO: 列表接口对接
+        if(this.isSortList){
+          this.isSortList=false
+        }else {
+          if(this.searchParams.classifyId || this.searchParams.frequency || this.searchParams.dataStatus || this.searchParams.edbMessage){
+            this.isCheckAll=true
+            this.checkAllStatus=true
+            this.isCheckIndeterminate=false
+          }else{
+            this.isCheckAll=false
+            this.checkAllStatus=false
+            this.isCheckIndeterminate=false
+          }
+          this.listCheckAllChange(this.isCheckAll)
+        }
+        this.tableData = this.constData.slice((this.searchParams.CurrentIndex-1)*5,this.searchParams.CurrentIndex*5)
+        this.tableDataIds = this.constData.map(it => it.id)
+      },
+      // 获取有色数据库分类列表
+      getYsClassifyList(){
+        //TODO: 获取分类列表
+        this.classifyList=[{id:1,label:'宏观',children:[{id:11,label:'房地产',children:[{id:111,label:'国内'},{id:112,label:'国外'}]}]}]
+      },
+      // 获取有色数据库数据状态列表
+      getYsDataStatusList(){
+        //TODO: 获取状态列表
+        this.dataStatusList=[{id:1,label:'正常更新'},{id:2,label:'已停更'},{id:3,label:'不定期延迟'}]
+      },
+      getYsFrequencyList(){
+        //TODO: 获取频度列表
+        this.frequencyList=["日度", "周度", "旬度", "月度", "季度", "半年度", "年度"]
+      },
+      // 指标名称的远程搜索方法
+      remoteMethod(text){
+        let query = text.trim()
+        if(query){
+          // TODO: 指标搜索接口
+          this.edbDataLoading=true
+          setTimeout(()=>{
+            this.edbFilterDataList=[{id:1,label:'中国制造业PMI'},{id:11,label:'中国制造业宏观'},{id:111,label:'中国制造业111'},{id:1111,label:'中国制造业222'},{id:11111,label:'中国制造业333'}]
+            this.edbDataLoading=false
+          },1000)
+        }else{
+          this.edbFilterDataList = [];
+        }
+      },
+	    removeEdbFilterTag: _.throttle(function() {
+        console.log('删除标签');
+        this.searchList()
+		  },1000),
+      searchList(){
+        this.searchParams.CurrentIndex=1
+        this.getList()
+      },
+      pageNumberChange(page_no){
+        this.searchParams.CurrentIndex=page_no
+        this.getList('adjustSelection')
+      },
+      sortChange({prop,order}){
+        this.searchParams.SortType = order==='ascending'?'asc':'desc'
+        this.searchParams.SortParam = prop
+        this.isSortList=true
+        this.searchList()
+      },
+      selectionChange(val){
+        // selectAllHandle的触发在selectionChange后面，将selectionChange的逻辑延迟一下
+        setTimeout(()=>{
+          // 去重
+          let duplicateArr = Array.from(new Set(this.tableDataCheckedList))
+          
+          console.log(val,'selectionChange',this.tableDataCheckedList);
+          console.log(duplicateArr.length,this.total,this.checkAllStatus);
+          if((duplicateArr.length == this.total && (!this.checkAllStatus))
+          || (duplicateArr.length == 0 && this.checkAllStatus)){
+            this.isCheckAll = true
+            this.isCheckIndeterminate=false
+          }else if((duplicateArr.length == 0 && (!this.checkAllStatus))
+          || (duplicateArr.length == this.total && this.checkAllStatus)){
+            this.isCheckAll = false
+            this.isCheckIndeterminate=false
+          }else{
+            this.isCheckAll = false
+            this.isCheckIndeterminate=true
+          }
+        },1)
+
+      },
+      selectHandle(selection,row){
+        console.log(selection,row,'row,selectHandle');
+        let check = false; // 从tableDataCheckedList 添加还是删除
+        if(selection.some(it => it.id == row.id)){
+          // 勾选
+          if(this.checkAllStatus){
+            check=false
+          }else{
+            check=true
+          }
+        }else{
+          // 取消勾选
+          if(this.checkAllStatus){
+            check=true
+          }else{
+            check=false
+          }
+        }
+        if(check){
+          this.tableDataCheckedList.push(row.id)
+        }else{
+          this.tableDataCheckedList=this.tableDataCheckedList.filter(it => it!=row.id)
+        }
+      },
+      selectAllHandle(selection){
+        console.log(selection,'selectAllHandle');
+        let check = false; // 从tableDataCheckedList 添加还是删除
+        if(selection && selection.length>0){
+          // 全选
+          if(this.checkAllStatus){
+            check=false
+          }else{
+            check=true
+          }
+        }else{
+          // 全不选
+          if(this.checkAllStatus){
+            check=true
+          }else{
+            check=false
+          }
+        }
+        // console.log(this.tableDataIds,'ids',this.tableDataCheckedList);
+        if(check){
+          this.tableDataCheckedList =  [...this.tableDataCheckedList,...this.tableDataIds]
+        }else{
+          this.tableDataCheckedList = this.tableDataCheckedList.filter(it => !this.tableDataIds.includes(it))
+        }
+      },
+      listCheckAllChange(value){
+        this.tableDataCheckedList=[]
+        this.checkAllStatus=value
+        if(value){
+          // 全选
+          this.$refs.edbDataRef && this.$refs.edbDataRef.clearSelection()
+          this.$refs.edbDataRef && this.$refs.edbDataRef.toggleAllSelection()
+        }else{
+          //全不选
+          this.$refs.edbDataRef && this.$refs.edbDataRef.clearSelection()
+        }
+      },
+      // 添加指标库
+      addToEdbBase(){
+        console.log(this.searchParams,this.checkAllStatus,this.tableDataCheckedList,'请求参数');
+      }
+    },
+
+  }
+</script>
+
+<style lang="scss" scoped>
+  #YS-data-container{
+    // min-width: 1360px;
+    background-color: white;
+    min-height: calc(100vh - 120px);
+    position: relative;
+    padding-bottom: 50px;
+    box-sizing: border-box;
+    .search-zone{
+      display: flex;
+      align-items: flex-start;
+      justify-content: space-between;
+      padding: 20px 20px 10px;
+      .search-row{
+        display: flex;
+        align-items: center;
+        flex-wrap: wrap;
+        .search-item{
+          width: 240px;
+          margin: 0 30px 10px 0;
+        }
+      }
+
+    }
+    .table-zone{
+      padding: 20px;
+    }
+    .table-page{
+      position: absolute;
+      bottom: 20px;
+      right: 20px;
+    }
+  }
+</style>