Tk.vue

<template>
  <div class="eibs-tab">
    <!--                          
	<c-col :span="24">
	    <span  v-text="model.ditp.hwfwms"   data-path=".ditp.hwfwms" > </span>
	</c-col>
    -->
    <c-col :span="16">
        <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="请输入Description of Goods" ></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">
        <IntellectIcon :IconList="IconList" :spanVal="spanVal" v-on:deleteIcon="deleteIcon" v-on:insertIcon="insertIcon"></IntellectIcon>
    </c-col>
    <!-- <c-col :span="8">
        <el-row>
            <el-col :span="4" v-for="(item, idx) in tkData" :key="idx" :offset="1">
                <div v-if="item.show">
                    <el-card :body-style="{ padding: '0px' }" style="height:100%">
                    <img :src="item.src" class="image">
                    <div style="padding: 5px;">
                        <span style="text-align:center;font-size:5px">{{item.name}}</span>
                        <el-button type="text" class="button" icon="el-icon-delete" @click="DeleteTK(idx)"></el-button>
                    </div>
                    </el-card>
                </div>
            </el-col>
            <el-col :span="4" :offset="1">
                <el-card :body-style="{ padding: '0px' }">
                    <img src="../../../assets/add.png" class="image" @click="AddTK">
                </el-card>
            </el-col>
        </el-row>
        <el-dialog :visible.sync="TKdialog" :title="'单据列表'">
            <div style="height:200px">
                <el-col :span="2" v-for="(item, idx) in tkData" :key="idx" :offset="1">
                    <div v-if="item.show == false">
                        <el-card :body-style="{ padding: '0px' }" style="height:100%">
                        <img :src="item.src" class="image">
                        <div style="padding: 5px;">
                            <span style="text-align:center;font-size:5px">{{item.name}}</span>
                            <el-button type="text" class="button" icon="el-icon-plus" @click="InsertTK(idx)"></el-button>
                        </div>
                        </el-card>
                    </div>
                </el-col>
            </div>
        </el-dialog>
    </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
                },
                // {
                //     id:"add",
                //     src: require("~/assets/add.png"),
                //     name:"添加",
                //     show:true
                // },
            ],
            IconList:[
                "invoice","receipt",
            ],
            spanVal:6,
        }
    },
    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;
  }

  .clearfix:before,
  .clearfix:after {
      display: table;
      content: "";
  }
  
  .clearfix:after {
      clear: both
  }
</style>