Infsea.vue

<template>
  <div class="eibs-tab">
    <!-- ==========顶部-左========= -->
     <c-content>
    <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="11 "
              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="8">
      <c-checkbox v-model="seatyph">海关</c-checkbox>
        </c-col> 
      <c-col :span="8">
            <c-checkbox v-model="seatypo">Other</c-checkbox>
          </c-col> 
      <c-col :span="8">
            <c-checkbox v-model="seatypa">Own Address</c-checkbox>
          </c-col> 
      <c-col :span="8">
            <c-checkbox v-model="seatypb">Bank</c-checkbox>
          </c-col> 
       <c-col :span="8">
            <c-checkbox v-model="seatypc">Client</c-checkbox>
          </c-col>  -->
          
 <el-form-item label="Type">
                <c-col :span="2">
          <c-checkbox v-model="seatyph">海关</c-checkbox>
        </c-col> 
      <c-col :span="4">
            <c-checkbox v-model="seatypo">Other</c-checkbox>
          </c-col> 
      <c-col :span="4">
            <c-checkbox v-model="seatypa">Own Address</c-checkbox>
          </c-col> 
     <c-col :span="4">
            <c-checkbox v-model="seatypb">Bank</c-checkbox>
          </c-col> 
      <c-col :span="4">
            <c-checkbox v-model="seatypc">Client</c-checkbox>
          </c-col> 
        </el-form-item>
    </c-col>
       <c-col :span="20" style="text-align: right; height: 36.8px">
        <el-button size="small" @click="handleReset">重置</el-button>
        <el-button
          type="primary"
          icon="el-icon-search"
          size="small"
          @click="onInfbutSearow"
          >查询
        </el-button>
      </c-col>

    <!-- =========表格========== -->
    <c-col :span="20">
      <c-istream-table 
        :border="true" 
        :list="tableData" 
        :columns="columns"
        v-on:chooseRowEvent="chooseRowEvent">
         <c-table-column fixed="right" prop="op" label="操作" width="165px">
            
            <template slot-scope="{ scope }">
              <c-button
                style="margin-left: 0"
                size="small"
                @click="onInfbutDsp(scope.$index, scope.row)"
              >
                详情
              </c-button>
              <c-button
                style="margin-left: 0"
                size="small"
                type="primary"
                @click="continueEdit(scope.row)"
              >
                处理
              </c-button>
              <el-popover placement="top-start" width="50" trigger="click">
                <ul class="table-button-item-list">
                  <li>
                    <c-button size="small" style="margin-left: 0"
                      >指派</c-button
                    >
                  </li>
                  <li>
                    <c-button size="small" style="margin-left: 0"
                      >删除</c-button
                    >
                  </li>
                </ul>
                <a
                  slot="reference"
                  href="javascript:void(0)"
                  style="margin-left: 5px"
                  ><i class="el-icon-more"></i
                ></a>
              </el-popover>
            </template>
          </c-table-column>
      </c-istream-table>
    </c-col>
   </c-content>
  </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() {
      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>