Infsea.vue

<template>
  <div class="eibs-tab">
    <!-- ==========顶部-左========= -->
    <c-col :span="11">
      <c-col :span="24">
        <el-form-item label="Address No." prop="seaobjkey">
          <c-input
            v-model="model.seaobjkey"
            maxlength="24"
            placeholder="请输入PTA"
          ></c-input>
        </el-form-item>
      </c-col>
      <c-col :span="24">
        <el-form-item label="Party No." prop="seaptyextkey">
          <c-input
            v-model="model.seaptyextkey"
            maxlength="24"
            placeholder="请输入External Key Used to Uniquely Identify a party"
          ></c-input>
        </el-form-item>
      </c-col>
      <c-col :span="24">
        <c-col :span="12">
          <el-form-item label="ZIP/Location" prop="seazip">
            <c-input
              v-model="model.seazip"
              maxlength="10"
              placeholder="请输入ZIP Code/First Part of S.W.I.F.T. Line 4"
            ></c-input>
          </el-form-item>
        </c-col>

        <c-col :span="12">
          <el-form-item label="" prop="seatxt" label-width="15px">
            <c-input
              v-model="model.seatxt"
              maxlength="25"
              placeholder="请输入Textpart of City"
            ></c-input>
          </el-form-item>
        </c-col>
      </c-col>
    </c-col>
    <!-- ==========顶部-右========= -->
    <c-col :span="11" :offset="1">
      <c-col :span="24">
        <el-form-item label="Name" prop="seanam">
          <c-input
            v-model="model.seanam"
            maxlength="35"
            placeholder="请输入External Visible Name of Address"
          ></c-input>
        </el-form-item>
      </c-col>
      <c-col :span="24">
        <el-form-item label="BIC" prop="seabic">
          <c-input
            v-model="model.seabic"
            maxlength="11"
            placeholder="请输入BIC of Address Optional"
          ></c-input>
        </el-form-item>
      </c-col>
      <c-col :span="24">
        <el-form-item label="Street" prop="seastr">
          <c-input
            v-model="model.seastr"
            maxlength="35"
            placeholder="请输入Street"
          ></c-input>
        </el-form-item>
      </c-col>
    </c-col>

    <!-- ==========单选框=========== -->
    <c-col :span="24">
      <c-col :span="3">
        <el-form-item label="Type"> </el-form-item>
      </c-col>
      <c-col :span="4">
        <el-form-item label="Bank" prop="seatypb">
          <c-checkbox v-model="seatypb"></c-checkbox>
        </el-form-item>
      </c-col>

      <c-col :span="4">
        <el-form-item label="Client" prop="seatypc">
          <c-checkbox v-model="seatypc"></c-checkbox>
        </el-form-item>
      </c-col>

      <c-col :span="4">
        <el-form-item label="Own Address" prop="seatypa">
          <c-checkbox v-model="seatypa"></c-checkbox>
        </el-form-item>
      </c-col>

      <c-col :span="4">
        <el-form-item label="Other" prop="seatypo">
          <c-checkbox v-model="seatypo"></c-checkbox>
        </el-form-item>
      </c-col>

      <c-col :span="4">
        <el-form-item label="海关" prop="seatyph">
          <c-checkbox v-model="seatyph"></c-checkbox>
        </el-form-item>
      </c-col>
    </c-col>

    <!-- =========表格========== -->
    <c-col :span="22" :offset="1">
      <c-istream-table 
        :border="true" 
        :list="tableData" 
        :columns="columns"
        v-on:chooseRowEvent="chooseRowEvent"
        style="width:80%,text-align:center">
        <!-- <el-table-column label="Address No" width="auto"></el-table-column>
        <el-table-column label="Adress Name" width="auto"></el-table-column>
        <el-table-column label="BIC" width="auto"></el-table-column>
        <el-table-column label="ZIP" width="auto"></el-table-column>
        <el-table-column label="Location" width="auto"></el-table-column>
        <el-table-column label="Street" width="auto"></el-table-column> -->
      </c-istream-table>
    </c-col>
  </div>
</template>
<script>
import Api from "~/service/Api";
import commonProcess from "~/mixin/commonProcess";
import CodeTable from "~/config/CodeTable";
import Event from "~/model/Infpta/Event";

export default {
  inject: ["root"],
  props: ["model", "codes"],
  mixins: [commonProcess],
  data() {
    return {
      columns: [
          "2 1 \"Address No\" 140",
          "3 2 \"Adress Name\" 140",
          "4 3 \"BIC\" 80",
          "5 4 \"ZIP\" 80",
          "6 5 \"Location\" 120",
          "7 6 \"Street\" 120"
      ]
    };
  },
	computed: {
    tableData() {
      // "10000449\t2000007350\t2000007350-001\tBEIJING TESTTEST,BEIJING, CHINA\t\t100080\tBEIJING, CHINA\tTEST TEST1 CO.,LTD."
      return this.model.infbut.dspstm.rows;
    },
		seatypb: {
			get: function() {
				return this.model.seatypb === 'X'
			},
			set: function(val) {
        this.clearSeatyp()
				this.model.seatypb = val ? 'X' : ''
			}
		},
		seatypc: {
			get: function() {
				return this.model.seatypc === 'X'
			},
			set: function(val) {
        this.clearSeatyp()
				this.model.seatypc = val ? 'X' : ''
			}
		},
		seatypa: {
			get: function() {
				return this.model.seatypa === 'X'
			},
			set: function(val) {
        this.clearSeatyp()
				this.model.seatypa = val ? 'X' : ''
			}
		},
		seatypo: {
			get: function() {
				return this.model.seatypo === 'X'
			},
			set: function(val) {
        this.clearSeatyp()
				this.model.seatypo = val ? 'X' : ''
			}
		},
		seatyph: {
			get: function() {
				return this.model.seatyph === 'X'
			},
			set: function(val) {
        this.clearSeatyp()
				this.model.seatyph = val ? 'X' : ''
			}
		}
	},
  methods: {
    clearSeatyp() {
      this.model.seatypb = '';
      this.model.seatypc = '';
      this.model.seatypa = '';
      this.model.seatypo = '';
      this.model.seatyph = '';
    },
    chooseRowEvent(row) {
      this.model.infbut.selrow = row.IDX + 1;
    },
    ...Event
  },
  created: function() {},
};
</script>
<style></style>