Tk.vue

<template>
  <div class="eibs-tab">

    <c-col :span="15">
        <c-col :span="24">
        <el-form-item label="货物描述" prop="didgrp.blk.lcrgod">
            <c-input type="textarea" :autosize="{ minRows: 6, maxRows: 8}"  v-model="model.didgrp.blk.lcrgod" style="margin-right:20px;" maxlength="1430" show-word-limit placeholder="请输入货物描述" ></c-input>
       </el-form-item>
       </c-col>
                  
       <c-col :span="24">
        <el-form-item label="单据要求" prop="didgrp.blk.lcrdoc">
            <c-input type="textarea" :autosize="{ minRows: 6, maxRows: 8}"  v-model="model.didgrp.blk.lcrdoc" maxlength="1950" style="margin-right:20px;" show-word-limit placeholder="请输入单据要求" ></c-input>
       </el-form-item>
       </c-col>
                                                    
       <c-col :span="24">
        <el-form-item label="附加条款" prop="didgrp.blk.adlcnd">
            <c-input type="textarea" :autosize="{ minRows: 6, maxRows: 8}" v-model="model.didgrp.blk.adlcnd" style="margin-right:20px;" maxlength="1430" show-word-limit placeholder="请输入附加条款" ></c-input>
       </el-form-item>
       </c-col>
                                                    
       <c-col :span="24">
        <el-form-item label="给付款、承兑、议付行的指示" prop="didgrp.blk.insbnk">
            <c-input type="textarea" :autosize="{ minRows: 6, maxRows: 8}" v-model="model.didgrp.blk.insbnk" style="margin-right:20px;" maxlength="325" show-word-limit placeholder="请输入付行的指示" ></c-input>
       </el-form-item>
       </c-col>
    </c-col>          

    <c-col :span="7" :offset="1">
        <c-col :offset="1">
            <el-form-item label="单据模板智能识别：" class="messageLabel">
            </el-form-item>
        </c-col>
        <IntellectIcon :IconList="IconList" :spanVal="spanVal" v-on:deleteIcon="deleteIcon" v-on:insertIcon="insertIcon"></IntellectIcon>
    </c-col>
                  
  </div>
</template>
<script>
import Api from "~/service/Api"
import commonProcess from "~/mixin/commonProcess";
import CodeTable from "~/config/CodeTable"
import Event from "~/model/Ditopn/Event"
import IntellectIcon from "~/components/IntellectIcon"

export default {
    inject: ['root'],
    props:["model","codes"],
    mixins: [commonProcess],
    components: { IntellectIcon },
    data(){
        return {
            TKdialog: false,
            tkData:[
                {
                    id:"invoice",
                    src: require("~/assets/invoice.png"),
                    name:"发票",
                    show:true
                },
                {
                    id:"receipt",
                    src: require("~/assets/receipt.png"),
                    name:"货物收据",
                    show:true
                },
                {
                    id:"oceanShipping",
                    src: require("~/assets/oceanShipping.png"),
                    name:"海运提单",
                    show:true
                },
            ],
            IconList:[
                "invoice","receipt",
            ],
            spanVal:7,
        }
    },
    methods:{
        ...Event,
        deleteIcon(id){
            const arr = []
            for (let i = 0; i < this.IconList.length; i++) {
                const icon = this.IconList[i];
                if (icon != id) {
                    arr.push(icon)
                }
            }
            this.IconList = arr;
        },
        insertIcon(id){
            this.IconList = [...this.IconList, id];
        }
    },
    watch: {
        IconList(){
            sessionStorage.setItem('IconList', JSON.stringify(this.IconList));
        }
    },
    created:function(){
        var IconList = JSON.parse(sessionStorage.getItem("IconList"));
        if(IconList == null){
            sessionStorage.setItem('IconList', JSON.stringify(this.IconList));
        }
    }
}
</script>
<style>
  .bottom {
    margin-top: 6px;
    line-height: 5px;
  }

  .button {
    padding: 0;
    float: right;
  }

  .image {
    width: 100%;
    height: 100%;
    display: block;
  }
  .messageLabel >>> .el-form-item__label{
    /* text-align: left; */
    font-weight:bold;
    font-size: 12px;
}
</style>