<template> 
 | 
    <GlobalWindow 
 | 
        :title="title" 
 | 
        :withFooter="false" 
 | 
        :visible.sync="visible" 
 | 
        width="100%"> 
 | 
        <div class="main"> 
 | 
            <div class="title">账单信息</div> 
 | 
            <div class="list"> 
 | 
                <el-tag type="info" size="medium" effect="plain" style="margin-right: 10px; cursor: pointer;" @click="copy(item.title)" v-for="(item, index) in billTempList" :key="index">{{item.title}}</el-tag> 
 | 
            </div> 
 | 
            <div class="title">合同信息</div> 
 | 
            <div class="list"> 
 | 
                <el-tag type="info" size="medium" effect="plain" style="margin-right: 10px; cursor: pointer;" @click="copy(item.title)" v-for="(item, index) in contractTempList" :key="index">{{item.title}}</el-tag> 
 | 
            </div> 
 | 
            <div class="title">其他信息</div> 
 | 
            <div class="list"> 
 | 
                <el-tag type="info" size="medium" effect="plain" style="margin-right: 10px; cursor: pointer;" @click="copy(item.title)" v-for="(item, index) in otherTempList" :key="index">{{item.title}}</el-tag> 
 | 
            </div> 
 | 
        </div> 
 | 
    </GlobalWindow> 
 | 
</template> 
 | 
  
 | 
<script> 
 | 
  import GlobalWindow from '@/components/common/GlobalWindow' 
 | 
  import BaseOpera from '@/components/base/BaseOpera' 
 | 
  import { getCallTemp } from '@/api/ywTempConfig' 
 | 
  export default { 
 | 
    name: "templateKeywords", 
 | 
    components: { GlobalWindow }, 
 | 
    extends: BaseOpera, 
 | 
    data() { 
 | 
      return { 
 | 
        billTempList: [], 
 | 
        contractTempList: [], 
 | 
        otherTempList: [] 
 | 
      } 
 | 
    }, 
 | 
    created () { 
 | 
      this.getCallTempVal() 
 | 
    }, 
 | 
    methods: { 
 | 
      open (title) { 
 | 
        this.title = title 
 | 
        this.visible = true 
 | 
      }, 
 | 
      getCallTempVal() { 
 | 
        getCallTemp({}) 
 | 
          .then(res => { 
 | 
            this.billTempList = res.billTempList 
 | 
            this.contractTempList = res.contractTempList 
 | 
            this.otherTempList = res.otherTempList 
 | 
          }) 
 | 
      }, 
 | 
      copy(val) { 
 | 
        this.$copyText(val).then( 
 | 
          (e) => { 
 | 
            this.$message.success('复制成功!') 
 | 
          }, 
 | 
          (err) => { 
 | 
            this.$message.error('复制成功!') 
 | 
          } 
 | 
        ); 
 | 
      } 
 | 
    } 
 | 
  } 
 | 
</script> 
 | 
  
 | 
<style lang="scss" scoped> 
 | 
    @import '@/assets/style/variables.scss'; 
 | 
    .main { 
 | 
        padding-top: 20px; 
 | 
        box-sizing: border-box; 
 | 
        .title { 
 | 
            font-weight: 500; 
 | 
            font-size: 18px; 
 | 
            color: $primary-color; 
 | 
            margin-bottom: 15px; 
 | 
        } 
 | 
         
 | 
        .list { 
 | 
            display: flex; 
 | 
            flex-wrap: wrap; 
 | 
            border-radius: 2px; 
 | 
            margin-bottom: 30px; 
 | 
        } 
 | 
    } 
 | 
</style> 
 |