eta_front/src/views/dataEntry_manage/components/setEnNameDia.vue

<template>
  <el-dialog 
    :title="this.$t('Chart.chart_en_btn')" 
    :visible.sync="isOpenDialog" 
    :close-on-click-modal="false" 
    :modal-append-to-body='false'
    @close="cancel" 
    custom-class="set-en-dialog" 
    width="800px" 
    v-dialogDrag
  >
      <el-form v-if="cType=='chart'" style="padding:0 40px" label-width="140px">
        <!-- 截面散点图 -->
        <div class="set-en-name-box" v-if="chartType===10">
          <el-collapse v-model="activeNames" class="sectionScatter-collapse">
            <el-collapse-item :title="$t('Chart.Detail.chart_name')" :name="0" >
              <ul class="section-ul">
                <li v-if="copyFormData.chartInfo.length">
                  <div class="ch-name">{{$t('Chart.Detail.chart_name')}}：{{copyFormData.chartInfo[0].value}}</div>
                  <el-input v-model="copyFormData.chartInfo[1].value" :placeholder="$t('Chart.InputHolderAll.input_en_name')" style="width: 600px;"/>
                </li>
                <li>
                  <div class="ch-name"><!-- X轴名称： -->{{$t('Chart.Detail.x_name')}}：{{updateInfo.XName}}</div>
                  <el-input v-model="updateInfo.XNameEn" :placeholder="$t('Chart.InputHolderAll.input_common',{label:$t('Chart.Detail.x_en_name')})" ></el-input>
                </li>
                <li>
                  <div class="ch-name"><!-- X轴单位 -->{{$t('Chart.Detail.x_unit')}}：{{updateInfo.XUnitName}}</div>
                  <el-input v-model="updateInfo.XUnitNameEn" :placeholder="$t('Chart.InputHolderAll.input_en_unit')" ></el-input>
                </li>
                <li>
                  <div class="ch-name"><!-- Y轴名称： -->{{$t('Chart.Detail.y_name')}}：{{updateInfo.YName}}</div>
                  <el-input v-model="updateInfo.YNameEn" :placeholder="$t('Chart.InputHolderAll.input_common',{label:$t('Chart.Detail.y_en_name')})" ></el-input>
                </li>
                <li>
                  <div class="ch-name"><!-- Y轴单位 -->{{$t('Chart.Detail.y_unit')}}：{{updateInfo.YUnitName}}</div>
                  <el-input v-model="updateInfo.YUnitNameEn" :placeholder="$t('Chart.InputHolderAll.input_en_unit')" ></el-input>
                </li>

              </ul>
            </el-collapse-item>
            
            <!-- 系列标签 -->
            <el-collapse-item :title="$t('EtaChartPage.label_tag_serie')" :name="1" v-if="updateInfo.SeriesList">
              <ul class="section-ul">
                <li v-for="(item,index) in updateInfo.SeriesList" :key="index">
                  <div class="ch-name">{{$t('Chart.Detail.serie_name')}}{{index+1}}：{{item.Name}}</div>
                  <el-input v-model="item.NameEn" :placeholder="$t('Chart.InputHolderAll.input_en_label')" ></el-input>
                </li>
              </ul>  
              <ul class="section-ul">
                <li v-for="(tag,index) in updateInfo.SeriesList[0].EdbInfoList" :key="index">
                  <div class="ch-name">{{$t('Chart.Detail.tag_name')}}{{index+1}}：{{tag.Name}}</div>
                  <el-input v-model="tag.NameEn" :placeholder="$t('Chart.InputHolderAll.input_en_label')" ></el-input>
                </li>
              </ul>
            </el-collapse-item>

            <!-- 指标英文 -->
            <el-collapse-item :title="$t('Edb.Detail.e_name')" :name="2">
              <ul class="section-ul">
                <li v-for="(item,index) in fromEdbList" :key="index">
                  <div class="ch-name text_oneLine">{{item.EdbName}}</div>
                  <el-input v-model="item.EdbNameEn" :placeholder="$t('Chart.InputHolderAll.input_en_label')" ></el-input>
                </li>
              </ul>  
            </el-collapse-item>  
          </el-collapse>
        </div>

        <!-- 普通图 -->
        <div class="set-en-name-box" v-else>
          <el-form-item :label="item.label+'：'" :prop="item.key" v-for="item in copyFormData.chartInfo" :key="item.key">
            <span v-show="item.notEdit">{{item.value}}</span>
            <el-input v-show="!item.notEdit" v-model="item.value" :placeholder="item.placeholder" ></el-input>
          </el-form-item>
          <el-collapse v-model="activeNames" v-if="copyFormData.chartsList.length">
            <el-collapse-item :title="item[0].value" :name="index" v-for="(item,index) in copyFormData.chartsList" :key="index">
              <el-form-item :label="it.label+'：'" :prop="it.key"  v-for="(it,i) in item" :key="it.key">
                <span v-show="it.notEdit">{{it.value}}</span>
                <el-input v-show="!it.notEdit" v-model="it.value" :placeholder="it.placeholder" ></el-input>
              </el-form-item>
            </el-collapse-item>
          </el-collapse>
        </div>
			</el-form>
			<el-form v-else label-width="120px" >
				<el-form-item :label="item.label+'：'" :prop="item.key" v-for="item in copyFormData" :key="item.key">
					<span v-show="item.notEdit">{{item.value}}</span>
          <el-input v-show="!item.notEdit" v-model="item.value" :placeholder="item.placeholder" style="width: 100%;"></el-input>
				</el-form-item>
			</el-form>
      <div class="btn-bottom">
        <el-button type="primary" @click="saveEnName" style="margin-right:20px"><!-- 确定 -->{{$t('Dialog.confirm_btn')}}</el-button>
        <el-button @click="cancel"><!-- 取消 -->{{$t('Dialog.cancel_btn')}}</el-button>
      </div>
		</el-dialog>
</template>
<script>
export default {
  name:"setEnName",
  data() {
    return {
      enNameData:{
        ChartInfoId:'',
        ChartNameEn:'',
        ChartEdbInfoList:[

        ]
      },
      copyFormData:{
        chartInfo:[],
        chartsList:[]
      },
      activeNames: [0],

      fromEdbList: [],
      updateInfo: {}
    }
  },
  props:{
    cType:{
      type:String,
      default:'chart'
    },
    isOpenDialog:{
      type:Boolean,
      required:true,
      default:false
    },
    formData:{
      type:Array,
      required:true,
      default:[]
    },
    chartType: {
      type: Number
    },
    datainfo: {
      default: null
    },
    edblist: {
      default: () => []
    }
  },
  watch:{
    isOpenDialog(newVal){
      // 默认展开第一项
      if(newVal){
        this.activeNames=[0]
        this.copyFormData = _.cloneDeep(this.formData);

        this.fromEdbList = _.cloneDeep(this.edblist);
        this.updateInfo = _.cloneDeep(this.datainfo);
      }
    }
  },
  methods:{
    cancel(){
      this.copyFormData={
        chartInfo:[],
        chartsList:[]
      }
      this.$emit('cancel')
    },

    /* 截面散点图设置英文 */
    setSectionScatterEn(){
      let ChartEdbInfoList = this.fromEdbList.map( _ => ({
        EdbInfoId: _.EdbInfoId,
        EdbNameEn: _.EdbNameEn,
        UnitEn: _.UnitEn
      }))
      this.updateInfo.SeriesList.forEach((item,index) => {
        if(index) {
          item.EdbInfoList.forEach((edb,edb_index) => {
            const {NameEn} = this.updateInfo.SeriesList[0].EdbInfoList[edb_index];
            edb.NameEn= NameEn;
          })
        }
      })
      
      let ExtraConfig = JSON.stringify(this.updateInfo);
      let params = {
        ChartInfoId: this.copyFormData.chartInfo[1].id,
        ChartNameEn: this.copyFormData.chartInfo[1].value.trim(),
        ChartEdbInfoList,
        ExtraConfig
      }
      this.$emit('updateEnName',params)
    },

    /* 跨品种分析参数设置 */
    setCrossVarietyEn() {
      console.log(this.copyFormData)
      const { chartInfo,chartsList }  = this.copyFormData;
      let params = {
        ChartInfoId: chartInfo[1].id,
        ChartNameEn: chartInfo[1].value.trim(),
        TagList: [
          { ChartTagId: chartInfo[3].id,TagNameEn: chartInfo[3].value },
          { ChartTagId: chartInfo[5].id,TagNameEn: chartInfo[5].value }
        ],
        VarietyList: chartsList.map(_ => ({
          ChartVarietyId: _[1].id,
          VarietyNameEn: _[1].value
        }))
      }
      this.$emit('updateEnName',params)
    },

    saveEnName(){
      if(this.cType === 'chart'&&this.chartType === 10) return this.setSectionScatterEn();
      else if(this.cType === 'chart'&&this.copyFormData.chartInfo[0].source === 10) return this.setCrossVarietyEn();

      if(JSON.stringify(this.copyFormData) === JSON.stringify(this.formData)){
        // 没有修改过
        this.$emit('cancel')
        return
      }
      console.log(this.cType);
      if(this.cType == 'chart'){

        // 表格
        this.enNameData.ChartInfoId = this.copyFormData.chartInfo[1].id // 表格ID
        this.enNameData.ChartNameEn = this.copyFormData.chartInfo[1].value.trim() // 表格英文名称
        if(this.copyFormData.chartInfo[3]) {
          if(this.copyFormData.chartInfo[3].key==='FutureGoodNameEn') {
            this.enNameData.FutureGoodNameEn = this.copyFormData.chartInfo[3].value.trim() // 期货英文名称
          }else if(this.copyFormData.chartInfo[3].key==='ProfitNameEn') {
            this.enNameData.ProfitNameEn = this.copyFormData.chartInfo[3].value.trim() // 利润英文名称
          }
        }
        let chartEdbInfoListTem=[]
        this.copyFormData.chartsList.map((item,index)=>{
          let params ={}
          params.EdbInfoId = item[0].id
          item.filter(it => !it.notEdit) .map((it,i)=>{
            params[it.key] = it.value
          })
          chartEdbInfoListTem.push(params)
        })
        this.enNameData.ChartEdbInfoList=chartEdbInfoListTem
        this.$emit('updateEnName',this.enNameData)
      }else{
        // 指标库
        let params={}
        this.copyFormData.filter(it => !it.notEdit).map(item => {
            params[item.key] = item.value.trim()
        })
        // console.log(params);
        this.$emit('updateEnName',params)
      }
    }
  }
}
</script>
<style lang="scss">
.set-en-dialog {
  .el-dialog__body {
    max-height:600px;
    overflow-y:auto;
  }
}
.set-en-name-box{
  .el-collapse-item__header{
    background-color:#DCDFE6;
    padding-left:8px;
    font-size: 16px;
    font-weight: 400;
    color: #333333;
    margin-bottom:0;
    display: flex;
    justify-content: space-between;
    align-items: center;
    // text-overflow: ellipsis;
    // white-space: nowrap;
    overflow: hidden;
    line-height: inherit;
    .el-collapse-item__arrow{
      margin-left: 12px;
    }
  }
  .el-input{
    width: 100%;
  }
  .el-collapse-item__content{
    padding:18px 8px 0 8px;
  }
}


</style>
<style scoped lang="scss">
  .section-ul {
    display: flex;
    justify-content: space-between;
    flex-wrap: wrap;
    li {
      margin-bottom: 20px;
      .ch-name {
        margin-bottom: 10px;
        width: 250px;
      }
      .el-input {  min-width: 240px;}
    }
  }
  .btn-bottom {
    display: flex;
    margin: 40px 0;
    justify-content: center;
  }
</style>