eta_front/src/views/dataEntry_manage/thirdBase/highFrequencyData.vue

<template>
    <div class="hight-frequency-data-container">
        <div class="top-box">
            <div class="select-box">
                <span>{{$t('SystemManage.DataRefresh.select_source')}}</span>
                <el-select :placeholder="$t('SystemManage.DataRefresh.select_source_pld')" v-model="Source" @change="handleSourceChange">
                    <el-option v-for="item in SourceList" :key="item.Source" 
                    :label="$i18nt.locale==='zh'?item.SourceName:item.SourceNameEn||item.SourceName" :value="item.Source"/>
                </el-select>
                <el-select v-model="Sequence" @change="handleSequenceChange">
                    <el-option v-for="item in SequenceList" :key="item.Sequence" 
                    :label="$i18nt.locale==='zh'?item.SequenceName:item.SequenceNameEn||item.SequenceName" :value="item.Sequence"/>
                </el-select>
                <!-- 添加高频数据 -->
                <el-button type="primary" @click="addHighFrequencyDiaShow" v-permission="permissionBtn.dataSourcePermission.highFrequency_adds"
                >{{$t('HighFrequencyData.add_high_frequency_data')}}</el-button>
            </div>
        </div>
        <div class="table-box">
          <div class="table-select">
            <div class="select-list">
              <el-cascader :placeholder="$t('HighFrequencyData.select_classify_prompt')"
                v-model="classifyArr" @change="searchListDelay" :options="classifyListTree" 
                style="max-width: 160px;"
                key="isAssociativeSub"
                v-if="searchParams.isAssociativeSub"
                :show-all-levels="false" collapse-tags
                :props="classifyProps" 
                clearable/>
              <el-cascader :placeholder="$t('HighFrequencyData.select_classify_prompt')"
                v-model="classifyArr" @change="searchListDelay" :options="classifyListTree" 
                style="max-width: 160px;" v-else key="noIsAssociativeSub"
                :show-all-levels="false" collapse-tags
                :props="classifyProps" 
                clearable/>
              <div class="associative-box">
                <span>{{$t('HighFrequencyData.associative_sub_classify')}}</span>
                <el-switch v-model="searchParams.isAssociativeSub" @change="changeAssociativeSub"></el-switch>
                <span class="span-button" @click="setClassify" 
                v-permission="[permissionBtn.dataSourcePermission.highFrequency_classify_move,permissionBtn.dataSourcePermission.highFrequency_classify_delete,
                  permissionBtn.dataSourcePermission.highFrequency_classify_editAdd,'or']"
                >{{$t('HighFrequencyData.classify_setting')}}</span>
              </div>
              <el-select :placeholder="$t('Edb.InputHolderAll.input_fre')" v-model="frequencyArr" @change="searchListDelay" multiple collapse-tags clearable>
                <el-option v-for="i in frequencyList" :key="i.value"
                    :label="i.label" :value="i.value"
                />
              </el-select>
              <el-cascader
                :placeholder="$t('Edb.InputHolderAll.select_creator')" v-model="userArr" @change="searchListDelay"
                :props="{
                    value: 'ItemId',
                    label: 'ItemName',
                    children: 'Children',
                    emitPath: false,
                    multiple:true,
                }"
                :options="userList"
                collapse-tags
                :show-all-levels="false"
                clearable
                filterable 
              />
              <el-input :placeholder="$t('Edb.InputHolderAll.input_name_orid')" prefix-icon="el-icon-search" clearable
              v-model="searchParams.keyWord" @input="searchList"></el-input>
            </div>
            <div class="select-other">
              <el-checkbox :indeterminate="isIndeterminate" v-model="isCheckAll" @change="listCheckAllChange">{{$t('SystemManage.DataRefresh.all_list')}}</el-checkbox>
              <!-- 批量添加到指标库 -->
              <el-button type="primary" @click="batchAddToDatabaseOpen"
                :disabled="!selectedTotal>0" :loading="batchLoading"
                v-permission="permissionBtn.dataSourcePermission.highFrequency_addTo_database"
              >{{$t('HighFrequencyData.add_to_eta_indicators')}}</el-button>
              <!-- 批量操作 -->
              <el-button type="primary" @click="openBatchOperationDia"
                :disabled="!selectedTotal>0" :loading="batchLoading"
                v-permission="permissionBtn.dataSourcePermission.highFrequency_operations"
              >{{$t('HighFrequencyData.batch_operation')}}</el-button>
            </div>
          </div>
          <el-table :data="tableData" border ref="edbDataRef"
            @selection-change="selectionChange"
            @select="selectHandle" 
            @select-all="selectAllHandle"
            @sort-change="handleSortChange"
          >
            <!-- 多选 -->
            <el-table-column
                align="center"
                type="selection"
                width="55">
            </el-table-column>
            <!-- 指标ID -->
            <el-table-column prop="IndexCode" :label="$t('Edb.Detail.e_id')" align="center" show-overflow-tooltip>
              <template slot-scope="{row}">
                <span>{{row.IndexCode}}</span>
              </template>
            </el-table-column>
            <!-- 指标名称 -->
            <el-table-column prop="IndexName" :label="$t('Edb.Detail.e_name')" align="center" show-overflow-tooltip>
              <template slot-scope="{row}">
                <span>{{row.IndexName}}</span>
              </template>
            </el-table-column>
            <!-- 频度 -->
            <el-table-column prop="Frequency" :label="$t('Edb.Detail.e_fre')" align="center">
              <template slot-scope="{row}">
                <span>{{row.Frequency}}</span>
              </template>
            </el-table-column>
            <!-- 单位 -->
            <el-table-column prop="Unit" :label="$t('Edb.Detail.e_unit')" align="center">
              <template slot-scope="{row}">
                <span>{{row.Unit}}</span>
              </template>
            </el-table-column>
            <!-- 指标开始时间 -->
            <el-table-column prop="StartDate" :label="$t('Edb.Detail.e_start_time_whole')" align="center" sortable="custom">
              <template slot-scope="{row}">
                <span>{{row.StartDate}}</span>
              </template>
            </el-table-column>
            <!-- 指标最新时间 -->
            <el-table-column prop="EndDate" :label="$t('Edb.Detail.e_latest_time_whole')" align="center" sortable="custom">
              <template slot-scope="{row}">
                <span>{{row.EndDate}}</span>
              </template>
            </el-table-column>
            <!-- 更新时间 -->
            <el-table-column prop="ModifyTime" :label="$t('Edb.Detail.e_update_time')" align="center" sortable="custom">
              <template slot-scope="{row}">
                <span>{{row.ModifyTime}}</span>
              </template>
            </el-table-column>
            <!-- 最新值 -->
            <el-table-column prop="LatestValue" :label="$t('Edb.Detail.e_latest_value')" align="center" sortable="custom">
              <template slot-scope="{row}">
                <span>{{row.LatestValue}}</span>
              </template>
            </el-table-column>
            <!-- 数据源分类 -->
            <el-table-column prop="ClassifyPath" :label="$t('HighFrequencyData.data_source_classify')" align="center" show-overflow-tooltip>
              <template slot-scope="{row}">
                <span>{{row.ClassifyPath}}</span>
              </template>
            </el-table-column>
            <el-table-column prop="Operation" :label="$t('Table.column_operations')" align="center">
              <template slot-scope="{row}">
                <span class="table-operation-item" @click="detailIndexHandle(row)" 
                v-permission="permissionBtn.dataSourcePermission.highFrequency_operation_detail">{{ $t('Table.detail_btn') }}</span>
                <span class="table-operation-item" @click="refreshIndexHandle(row)"
                v-permission="permissionBtn.dataSourcePermission.highFrequency_operation_refresh">{{ $t('Table.refresh_btn') }}</span>
                <span class="table-operation-item del-item" @click="deleteIndexHandle(row)"
                v-permission="permissionBtn.dataSourcePermission.highFrequency_operation_delete">{{ $t('Table.delete_btn') }}</span>
              </template>
            </el-table-column>
          </el-table>
          <el-pagination 
            :current-page="searchParams.currentPage"
            :page-size="searchParams.pageSize"
            :total="total"
            @current-change="handleCurrentChange"
          />
        </div>
        <!-- 数据详情 -->
        <el-dialog custom-class="custom-dialog"
          :title="$t('Edb.data_detail_tab')"
          :visible.sync="detailDiaShow"
          :close-on-click-modal="false"
          :modal-append-to-body="false"
          @close="detailDiaShow=false"
          width="980px"
          top="5vh"
          v-dialogDrag
          center
        >
          <div class="dialog-container">
            <div class="detail-date-select-zone">
              <span>{{ $t('HighFrequencyData.data_date') }}</span>
              <el-date-picker v-model="detailRequestParams.DataDate" type="date" :clearable="false" @change="getIndexDetailFun"
                :placeholder="$t('EtaBasePage.input_date_msg')" style="max-width:240px" value-format="yyyy-MM-dd"></el-date-picker>
            </div>
            <div class="detail-data-zone">
              <div class="detail-data-zone-header">
                <table border class="header-table">
                    <tr>
                      <td>{{ $t('Edb.Detail.e_name') }}</td>
                      <td>
                        <el-input v-model.trim="indexDetail.IndexName" :placeholder="$t('Edb.InputHolderAll.input_name')" size="mini"></el-input>
                      </td>
                    </tr>
                    <tr>
                      <td>{{ $t('Edb.Detail.e_stock_code') }}</td>
                      <td>{{ indexDetail.ZqCode }}</td>
                    </tr>
                    <tr>
                      <td>{{ $t('Edb.Detail.e_indicator_code') }}</td>
                      <td>{{ indexDetail.ZbCode }}</td>
                    </tr>
                </table>
                <table border class="header-table">
                    <tr>
                      <td>{{ $t('HighFrequencyData.belong_to_classify') }}</td>
                      <td>
                        <el-cascader :options="classifyListTree" v-model="indexDetail.ClassifyId" 
                        size="mini"
                        :props="{label: 'ClassifyName',
                          value: 'ClassifyId',
                          children: 'Children',
                          checkStrictly: true,
                          emitPath:false}">
                        </el-cascader>
                      </td>
                    </tr>
                    <tr>
                      <td>{{ $t('Edb.Detail.e_unit') }}</td>
                      <td>
                        <el-autocomplete
                          v-model.trim="indexDetail.Unit"
                          :fetch-suggestions="querySearchUnit"
                          :placeholder="$t('Edb.InputHolderAll.input_unit')"
                          suffix-icon="el-icon-arrow-down"
                          size="mini"
                        ></el-autocomplete>
                      </td>
                    </tr>
                    <tr>
                      <td>{{ $t('Edb.Detail.e_fre') }}</td>
                      <td>{{indexDetail.Frequency}}</td>
                    </tr>
                </table>
              </div>
              <div class="detail-data-list" ref="detailDataListRef">
                <table class="body-table" >
                  <template v-if="indexDetail.DataList && indexDetail.DataList.length>0">
                    <tr v-for="(item,index) in indexDetail.DataList" :key="index">
                      <td>{{ item.DataTime }}</td>
                      <td>{{ item.Value }}</td>
                    </tr>
                  </template>
                  <tableNoData v-else></tableNoData>
                </table>
              </div>
            </div>
          </div>
          <!-- 弹窗按钮 -->
          <div class="dialog-btn">
            <el-button type="primary" plain @click="detailDiaShow=false">{{$t('Dialog.cancel_btn')}}</el-button>
            <el-button type="primary" @click="editDataHandle">{{$t('Dialog.confirm_btn')}}</el-button>
          </div>
        </el-dialog>
        <!-- 批量操作 -->
        <el-dialog custom-class="custom-dialog"
          :title="$t('HighFrequencyData.batch_operation')"
          :visible.sync="batchOperationDialogShow"
          :close-on-click-modal="false"
          :modal-append-to-body="false"
          @close="batchOperationClose"
          width="600px"
          top="5vh"
          v-dialogDrag
        >
          <div class="dialog-container">
            <div class="batch-option-row">
              <el-radio v-model="batchOperationData.type" :label="1">{{ $t('HighFrequencyData.move_to_new_classify') }}</el-radio>
              <el-cascader :options="classifyListTree" v-model="batchOperationData.newClassify" 
              style="width: 160px;"
              :placeholder="$t('HighFrequencyData.select_classify_prompt')"
              :props="{label: 'ClassifyName',
              value: 'ClassifyId',
              children: 'Children',
              checkStrictly: true,
              emitPath:false}">
              </el-cascader>
            </div>
            <div class="batch-option-row">
              <el-radio v-model="batchOperationData.type" :label="2" style="margin-right: 10px;">{{ $t('Edb.detail_del_btn') }}</el-radio>
            </div>
            <div class="batch-option-row">
              <el-radio v-model="batchOperationData.type" :label="3">{{ $t('Edb.detail_refresh_btn') }}</el-radio>
              <div class="radio-box" v-show="batchOperationData.type==3">
                <el-radio v-model="batchOperationData.refreshType" :label="1">{{ $t('HighFrequencyData.last_six_hours') }}</el-radio>
                <el-radio v-model="batchOperationData.refreshType" :label="2">{{ $t('HighFrequencyData.refresh_all') }}</el-radio>
              </div>
            </div>
          </div>
          <!-- 弹窗按钮 -->
          <div class="dialog-btn">
            <el-button type="primary" plain @click="batchOperationDialogShow=false">{{$t('Dialog.cancel_btn')}}</el-button>
            <el-button type="primary" @click="batchOpeartion">{{$t('Dialog.confirm_btn')}}</el-button>
          </div>
        </el-dialog>
        <!-- 分类设置 -->
        <classifySetting :showIt.sync="classifySettingShow" @closeHandle="classifyCloseHandle" />
        <!-- 添加高频数据 -->
        <addHighFrequencyData :isAddShow.sync="addHighFrequencyShow" :unitList="unitList" :classifyList="classifyListTree"  @addSuccessHandle="addHighFrequencySuccess" />
        <!-- 批量添加到到指标库 -->
        <addToIndexDatabaseBatch :isAddShow.sync="batchAddToDatabaseShow" :IndexIds="choiceIdList"/>
    </div>
</template>

<script>
import {dataRefreshInterface,dataAuthInterface} from '@/api/modules/dataApi.js';
import { dataInterence,highFrequencyDataInterface } from '@/api/api.js'
import classifySetting from './components/highFrequency/classifySetting.vue';
import addHighFrequencyData from './components/highFrequency/addHighFrequencyData.vue'
import addToIndexDatabaseBatch from './components/highFrequency/addToIndexDatabaseBatch.vue';

  export default {
    name:'highFrequencyData',
    components:{classifySetting,addHighFrequencyData,addToIndexDatabaseBatch},
    data() {
        return {
            Source:'',
            SourceList:[],
            Sequence:'',
            SequenceList:[],

            classifyListTree:[],
            userList:[],
            unitList:[],
            searchParams:{
              classify:'',//分类
              isAssociativeSub:true,//是否关联子分类
              frequency:'',//频度
              user:'',//创建人
              keyWord:'',//关键字
              sortType:'',//升序降序
              sortParam:'',//排序字段
              pageSize:10,
              currentPage:1,
            },
            classifyArr:[],
            frequencyArr:[],
            userArr:[],
            tableData: [],
            tableDataIds:[],
            total:0,

            //全部全选
            isIndeterminate:false,
            isCheckAll:false,
            isSelectAll:false,//为true时，selectList是剔除的指标，为false时selectList是已选择的指标
            //已选择/已剔除的指标id
            selectList:[],//监听table的select-all select
            choiceIdList:[], //后端返回的选中的列表

            detailDiaShow:false,
            indexDetail:{},
            detailRequestParams:{
              IndexId:0,
              DataDate:''
            },

            classifySettingShow:false,

            addHighFrequencyShow:false,

            batchOperationDialogShow:false,
            batchOperationData:{
              type:1,
              newClassify:0,
              refreshType:1
            },

            batchAddToDatabaseShow:false,
            batchLoading:false
        };
    },
    computed:{
      selectedTotal(){
        if(this.isSelectAll){
          return this.total - (this.selectList ? this.selectList.length : 0)
        }else{
          return this.selectList ? this.selectList.length : 0
        }
      },
      frequencyList() {
        return [
          {value: "1m",label: "1m"},
          {value: "3m",label: '3m'},
          {value: "5m",label: "5m"},
          {value: "10m",label: "10m"},
          {value: "15m",label: "15m"},
          {value: "30m",label: "30m"},
          {value: "60m",label: "60m"}
        ];
      },
      classifyProps(){
        return {
          checkStrictly:(!this.searchParams.isAssociativeSub),
          value:'ClassifyId',
          label:'ClassifyName',
          children:'Children',
          emitPath:this.searchParams.isAssociativeSub,
          multiple:true
        }
      }
    },
    watch:{
      classifyArr(value){
        if(value && value.length>0){
          const classifyIds = [...new Set(value.join(',').split(','))]
          this.searchParams.classify=classifyIds.join(',')
        }else{
          this.searchParams.classify=''
        }
      },
      frequencyArr(value){
        if(value && value.length>0){
          this.searchParams.frequency=value.join(',')
        }else{
          this.searchParams.frequency=''
        }
      },
      userArr(value){
        if(value && value.length>0){
          this.searchParams.user=value.join(',')
        }else{
          this.searchParams.user=''
        }
      },
    },
    methods: {
        //添加高频数据
        addHighFrequencyDiaShow(){
          this.addHighFrequencyShow=true
        },
        addHighFrequencySuccess(){
          this.searchParams.currentPage = 1
          this.getTableData()
        },
        //获取数据源列表
        getSourceList(){
          this.SourceList=[{Source: 1,SourceName: "同花顺",SourceNameEn: "同花顺"}]
          this.Source = this.SourceList[0].Source
        },
        getSequenceList(){
          this.SequenceList=[{Sequence: 1,SequenceName: "高频序列",SequenceNameEn: "高频序列"}]
          this.Sequence = this.SequenceList[0].Sequence
        },
        //数据源改变
        handleSourceChange(){
        },
        // 序列改变
        handleSequenceChange(){
        },
        //获取分类列表
        async getClassifyList(){
          const res = await highFrequencyDataInterface.classifyListTree()
          if(res.Ret!==200) return 
          this.classifyListTree = res.Data||[]
        },
        //获取用户列表
        getUserList() {
          dataAuthInterface.userSearch({
              KeyWord: ''
          }).then(res => {
              if(res.Ret !== 200) return 
              this.userList = res.Data||[]
          })
        },
        // 获取指标单位
        async getUnitList(){
          let res=await dataInterence.getTargetUnitList()
          if(res.Ret===200){
            this.unitList=res.Data&&res.Data.map(item=>{
              return {value:item}
            })
          }
        },
        //搜索单位
        querySearchUnit(queryString, cb){
          let results = queryString ? this.unitList.filter(item=>item.value.indexOf(queryString) === 0) : this.unitList;
          // 调用 callback 返回建议列表的数据
          cb(results);
        },
        changeAssociativeSub(value){
          // 清空
          this.classifyArr=[]
          this.searchListDelay()
        },
        searchListDelay(){
          setTimeout(()=>{
            this.searchList()
          },0)
        },
        //表格筛选项改变时触发
        searchList(){
          this.searchParams.currentPage = 1
          this.getTableData('search')
        },
        handleCurrentChange(page){
            this.searchParams.currentPage = page
            this.getTableData()
        },
        async getTableData(type){
          const {frequency,user,classify,keyWord,sortParam,sortType,currentPage,pageSize,isAssociativeSub} = this.searchParams
          let params={
            ClassifyId:classify,
            IncludeChild:isAssociativeSub,
            SysAdminId:user,
            Frequency:frequency,
            Keywords:keyWord,
            SortField:sortParam,
            SortType:sortType,
            PageSize:Number(pageSize) || 10,
            CurrentIndex:Number(currentPage)||1
          }
          // console.log(params,'params');
          const res = await highFrequencyDataInterface.getTableDataApi(params)
          if(res.Ret!==200) return 
          const {Paging,List} = res.Data||{}
          this.tableData = List||[]
          if(this.tableData.length === 0 && this.searchParams.currentPage>1 && Paging.Pages){
            // 最后一页的最后一个被删除了 当前页码没数据 去最后一页 非要改
            this.searchParams.currentPage > Paging.Pages ?
            (this.searchParams.currentPage =  Paging.Pages || 1) :
            (this.searchParams.currentPage--)
            this.getTableData(type)
            return 
          }
          this.total = Paging.Totals||0
          if(this.tableData.length>0){
            this.tableDataIds = this.tableData.map(it => it.IndexId)
          }else{
            this.tableDataIds = []
          }
          if(type==='search'){
              //如果是表格筛选项改变导致重新请求数据
              //清除所选
              this.selectList = []
              this.listCheckAllChange(false)
          }else{
              //若不是，数据获取完成后，查询列表全选的值
              //若当页有数据在selectList内，则勾选/剔除
              this.adjustSelection()
          }
        },
        //勾选/取消勾选表格项
        adjustSelection(){
            if(!this.isSelectAll){
              this.tableData.map(it =>{
                    let row = this.selectList.includes(it.IndexId)?it:''
                    if(row){
                        this.$nextTick(()=>{
                          this.$refs.edbDataRef.toggleRowSelection(row,true)
                        })
                    }
                })
            }else{
              this.tableData.map(it =>{
                let row = this.selectList.includes(it.IndexId)?'':it
                if(row){
                  this.$nextTick(()=>{
                    this.$refs.edbDataRef.toggleRowSelection(row,true)
                  })
                }
              })
            }
        },
        //列表全选改变
        listCheckAllChange(value){
            this.selectList = []
            this.isSelectAll = value
            this.$refs.edbDataRef && this.$refs.edbDataRef.clearSelection()
            if(value){
                this.$refs.edbDataRef && this.$refs.edbDataRef.toggleAllSelection()
            }
        },
        selectionChange(selection){
            // selectAllHandle的触发在selectionChange后面，将selectionChange的逻辑延迟一下
            setTimeout(()=>{
                // 去重
                let duplicateArr = Array.from(new Set(this.selectList))
                //isSelectAll为true时，selectList表示需要剔除的项
                //isSelectAll为false时，selectList表示需要勾选的项
                //全选
                if((duplicateArr.length == this.total && (!this.isSelectAll))|| (duplicateArr.length == 0 && this.isSelectAll)){
                    this.isCheckAll = true
                    this.isIndeterminate=false
                //全不选
                }else if((duplicateArr.length == 0 && (!this.isSelectAll))|| (duplicateArr.length == this.total && this.isSelectAll)){
                    this.isCheckAll = false
                    this.isIndeterminate=false
                //半选
                }else{
                    this.isCheckAll = false
                    this.isIndeterminate=true
                }
            },1)
        },
        selectHandle(selection,row){
            let check = false; 
            if(selection.some(it => it.IndexId == row.IndexId)){
                // 勾选
                if(this.isSelectAll){
                    check=false
                }else{
                    check=true
                }
            }else{
                // 取消勾选
                if(this.isSelectAll){
                    check=true
                }else{
                    check=false
                }
            }
            if(check){
              this.selectList.push(row.IndexId)
            }else{
              this.selectList=this.selectList.filter(it => it!=row.IndexId)
            }
        },
        selectAllHandle(selection){
          let check = false; 
          if(selection && selection.length>0){
              // 全选
              if(this.isSelectAll){
                  check=false
              }else{
                  check=true
              }
          }else{
              // 全不选
              if(this.isSelectAll){
                  check=true
              }else{
                  check=false
              }
          }
          if(check){
              this.selectList =  [...this.selectList,...this.tableDataIds]
          }else{
              this.selectList = this.selectList.filter(it => !this.tableDataIds.includes(it))
          }
        },
        handleSortChange({prop,order}){
          let propMap = new Map([
            ["StartDate",1],
            ["EndDate",2],
            ["ModifyTime",3],
            ["LatestValue",4]
          ])
          if(order){
            this.searchParams.sortParam = propMap.get(prop)
            this.searchParams.sortType = order==='ascending'?1:2
          }else{
            this.searchParams.sortParam = ''
            this.searchParams.sortType = ''
          }
          this.searchList()
        },
        // 详情
        async detailIndexHandle(row){
          this.detailRequestParams.IndexId = row.IndexId
          this.detailRequestParams.DataDate = ''
          await this.getIndexDetailFun()
          this.detailDiaShow=true
          this.$nextTick(()=>{
            this.$refs.detailDataListRef && (this.$refs.detailDataListRef.scrollTop=0)
          })
        },
        async getIndexDetailFun(){
          await highFrequencyDataInterface.highFreDataDetail(this.detailRequestParams).then(res=>{
            if(res.Ret == 200){
              let resData = res.Data||{}
              let indexData = resData.Index || {}
              this.detailRequestParams.DataDate = resData.DataDate
              this.indexDetail={
                IndexId:indexData.IndexId,
                IndexName:indexData.IndexName,
                ZqCode:indexData.StockCode,
                ZbCode:indexData.Indicator,
                ClassifyId:indexData.ClassifyId,
                Unit:indexData.Unit,
                Frequency:indexData.Frequency,
                DataList:resData.DataList||[]
              }
            }
          })
        },
        editDataHandle(){
          if(!(this.indexDetail.IndexName && this.indexDetail.ClassifyId && this.indexDetail.Unit)){
            return this.$message.warning(this.$t('MsgPrompt.please_complete'))
          }
          let params={
            IndexId:this.indexDetail.IndexId,
            IndexName:this.indexDetail.IndexName,
            ClassifyId:this.indexDetail.ClassifyId,
            Unit:this.indexDetail.Unit,
          }
          highFrequencyDataInterface.highFreDataEdit(params).then(res=>{
            if(res.Ret == 200){
              this.$message.success(this.$t('MsgPrompt.operate_success_msg'))
              this.detailDiaShow=false
              this.getTableData()
            }
          })
        },
        // 刷新
        refreshIndexHandle(row){
          highFrequencyDataInterface.highFreDataRefresh({
            IndexId:row.IndexId
          }).then(res=>{
            if(res.Ret!==200) return
            this.$message.success(/* "刷新成功"  */this.$t('MsgPrompt.refresh_success_msg'))
            this.getTableData()
          })
        },
        // 删除
        deleteIndexHandle(row){
          this.$confirm(this.$t('Edb.MsgPrompt.del_edb_confirm'),this.$t('Dialog.warn_tit'),{
            confirmButtonText:/* "确定" */this.$t('Dialog.confirm_btn'),
            cancelButtonText:/* "取消" */this.$t('Dialog.cancel_btn'),
            type:"warning"
          }).then(()=>{
            highFrequencyDataInterface.highFreDataDelete({
              IndexId:row.IndexId
            }).then(res=>{
              if(res.Ret!==200) return
              this.$message.success(/* "删除成功"  */this.$t('MsgPrompt.delete_msg'))
              this.selectList=this.selectList.filter(it => it!=row.IndexId)
              this.getTableData()
            })
          }).catch(()=>{})
        },
        setClassify(){
          this.classifySettingShow=true
        },
        classifyCloseHandle({requestClassifyList,requestDataList}){
          if(requestDataList) this.getTableData('search')
          if(requestClassifyList) this.getClassifyList()
          this.classifySettingShow=false
        },
        async openBatchOperationDia(){
          if(this.selectedTotal>500){
            return this.$message.warning(this.$t('HighFrequencyData.batch_operation_limit'))
          }
          this.batchLoading = true
          let flag = await this.getHighFreDataChoiceList()
          this.batchLoading = false
          this.batchOperationDialogShow=!!flag
        },
        async getHighFreDataChoiceList(){
          let params={
            ClassifyId:this.searchParams.classify,
            IncludeChild:this.searchParams.isAssociativeSub,
            Frequency:this.searchParams.frequency,
            SysAdminId:this.searchParams.user,
            Keywords:this.searchParams.keyWord,
            ListIds:this.selectList.join(','),
            SelectAll:this.isSelectAll,
          }
          return await highFrequencyDataInterface.highFreDataChoice(params).then(res=>{
            if(res.Ret == 200){
              const choiceList = res.Data || []
              this.choiceIdList=choiceList.map(cl=> cl.IndexId)
              return true 
            }else{
              return false
            }
          })
        },
        batchOperationClose(){
          this.batchOperationDialogShow=false
          this.batchOperationData={
            type:1,
            newClassify:0,
            refreshType:1
          }
        },
        batchOpeartion(){
          if(this.batchOperationData.type==1 && !this.batchOperationData.newClassify) return this.$message.warning(this.$t('HighFrequencyData.select_classify_prompt'))
          let params={
            IndexIds:this.choiceIdList,
            OptType:this.batchOperationData.type,
            MoveClassifyId:this.batchOperationData.newClassify,
            RefreshType:this.batchOperationData.refreshType
          }
          highFrequencyDataInterface.highFreDataBatchOperation(params).then(res=>{
            if(res.Ret == 200){
              if(this.batchOperationData.type==2){
                // 批量删除
                let deleteFails=res.Data.Fail || []
                let deleteSuccess=res.Data.Success || []
                if(deleteSuccess.length) this.$message.success(this.$t('MsgPrompt.operate_success_msg'))

                if(deleteFails){
                  let message = '';
                  deleteFails.forEach(item => {
                    message+=`${item.IndexName}:${this.$t('HighFrequencyData.indicator_been_referenced_prompt')}</br>`
                  })
                  // 和成功提示错开
                  this.$nextTick(()=>{
                    this.$message({
                      dangerouslyUseHTMLString: true,
                      message,
                      type: 'error'
                    })
                  })
                }
                // 删除之后 调整选中
                this.listCheckAllChange(false)
              }else{
                this.$message.success(this.$t('MsgPrompt.operate_success_msg'))
              }
              this.getTableData()
              this.batchOperationDialogShow=false
            }
          })
        },
        async batchAddToDatabaseOpen(){
          if(this.selectedTotal>500){
            return this.$message.warning(this.$t('HighFrequencyData.batch_operation_limit'))
          }
          this.batchLoading = true
          let flag = await this.getHighFreDataChoiceList()
          this.batchLoading = false
          this.batchAddToDatabaseShow=!!flag
        }
    },
    mounted(){
        this.getSourceList()
        this.getSequenceList()
        this.getClassifyList()
        this.getUserList()
        this.getUnitList()
        this.getTableData()
    }
  }
</script>

<style scoped lang="scss">
.hight-frequency-data-container{
    min-height: calc(100vh - 120px);
    display: flex;
    flex-direction: column;
    .top-box{
        box-sizing: border-box;
        margin-bottom: 16px;
        display: flex;
        .select-box{
          span{
            margin-right:10px;
          }
          .el-select{
            margin-right:10px;
            width:160px;
          }
        }
    }
    .table-box{
      flex:1;
      .el-select{
          min-width:180px;
      }
      .table-select{
          display: flex;
          justify-content: space-between;
          .select-list{
            flex:1;
            display: flex;
            flex-wrap: wrap;
            gap:10px;
            .el-select,.el-cascader,.el-input{
              max-width: 210px;
            }
            .associative-box{
              display: flex;
              align-items: center;
              gap: 10px;
              color: #333333;
              .span-button{
                color:#0052D9 ;
                cursor: pointer;
              }
            }
          }
          .select-other{
            margin-left: 10px;
            .el-button{
                margin-left:10px;
            }
          }
      }
      .el-table{
          margin:20px 0;
      }
      .el-pagination{
        text-align: right;
        background-color: white;
        padding: 10px 0;
      }
      .table-operation-item{
        padding: 0 3px;
        cursor: pointer;
        color: #0052D9;
        white-space: nowrap;
      }
      .del-item{
        color: #D54941;
      }
    }
    .custom-dialog{
      .dialog-container{
        overflow: hidden;
        padding: 0 35px;
        .detail-date-select-zone{
          display:flex;
          margin-bottom: 30px;
          align-items:center;
          span{
            margin-right: 20px;
          }
          .el-input{
            width: 240px;
          }
        }
        .detail-data-zone{
          display: flex;
          flex-direction: column;
          justify-content: center;
          .detail-data-zone-header{
            display: flex;
            align-items: center;
            justify-content: space-between;
            .header-table{
              font-size: 14px;
              border:solid 1px #C8CDD9;
              box-sizing: border-box;
              tr{
                box-sizing: border-box;
                td{
                  padding: 10px;
                  width: 270px;
                  color: #666666;
                  box-sizing: border-box;
                  &:first-child{
                      width: 150px;
                      text-align: center;
                      font-weight: bold;
                      color: #333333;
                  }
                }
              }
            }
          }
          .detail-data-list{
            height: 260px;
            overflow: auto;
            margin: 40px auto 30px auto;
            .body-table{
              border-left: solid 1px #C8CDD9;
              border-right: solid 1px #C8CDD9;
              tr{
                box-sizing: border-box;
                td{
                  min-width: 150px;
                  text-align: center;
                  padding: 8px 10px;
                  color: #666666;
                  box-sizing: border-box;
                  &:first-child{
                    width: 260px;
                    border-right:solid 1px #C8CDD9;
                  }
                }
              }
            }
          }
        }
        // 批量操作
        .batch-option-row{
          margin-bottom: 20px;
          .radio-box{
            margin-top: 20px;
            padding-left: 50px;
            .el-radio{
              margin-right: 20px;
            }
          }
        }
      }
      .dialog-btn{
        text-align: center;
        padding: 40px 0 25px;
        .el-button{
          min-width: 120px;
        }
      }
    }
}
</style>
<style lang="scss">
.custom-dialog{
  .el-input{
    width: 100%!important;
  }
}

.detail-data-zone-header{
  .el-cascader{
    width: 100%;
  }
  .el-autocomplete{
    width: 100%;
  }
  .el-select{
    width: 100%;
  }
  .el-input{
    width: 100%;
    input{
      border: none;
      padding: 0;
      font-size: 14px;
    }
  }
}
</style>