Infsea.vue

<template>
	<div class="eibs-tab">
		<c-list-search @form-reset="handleReset" @form-search="handleSearch" v-if = "judgementConditionShow == false">
			<!-- 持续展示区 -->
			<template v-slot="searchSlot">
				<el-form class="m-table-search-form" ref="paramsForm" label-position="right" label-width="110px" size="small" :model="model">
					<el-row>
						<c-col :span="8">
							<el-form-item label="保函编号" style="width: 100%">
								<c-input v-model="model.ownref" maxlength="16" placeholder="请输入保函编号"></c-input>
							</el-form-item>
						</c-col>
						<c-col :span="8">
							<el-form-item label="开立日期" style="width: 100%">
								<c-col :span="11">
									<c-date-picker type="date" v-model="model.stadat" style="width: 100%" placeholder="请选择起始日期" value-format="yyyy-MM-dd"></c-date-picker>
								</c-col>
								<c-col :span="2" style="text-align: center">
									<label style="display: inline-block; width: 100%">-</label>
								</c-col>
								<c-col :span="11">
									<c-date-picker type="date" v-model="model.enddat" style="width: 100%" placeholder="请选择截止日期" value-format="yyyy-MM-dd"></c-date-picker>
								</c-col>
							</el-form-item>
						</c-col>
						<c-col :span="8">
							<el-form-item label="选择机构" style="width: 100%">
								<c-select
									v-model="model.bchkey"
									style="width: 100%"
									placeholder="请选择机构"
								>
									<el-option
										v-for="item in orgList"
										:key="item.value"
										:label="item.label"
										:value="item.value"
									></el-option>
								</c-select>
							</el-form-item>
						</c-col>
					</el-row>
				</el-form>
			</template>
		</c-list-search>

		<el-col :span="24" style="margin-top: 10px">
			<div style="height: 90%">
				<c-col :span="24">
					<el-table
						id='infgidBSTableRef'
						v-loading="load"
						:data="tableData"
						style="width:100%"
						size="small"
						:highlight-current-row="true"
						@selection-change="handleSelectionChange"
					>
						<el-table-column
							type="selection"
							width="55">
						</el-table-column>
						<el-table-column
							v-for="(item,key) in columns"
							:key="key"
							:prop="item.prop"
							:label="item.label"
							sortable
						>
						</el-table-column>
            <el-table-column fixed="right" label="操作" width="340px">
              <template slot-scope="scope">
								<c-button size="small" @click="handleUpdateStatus(scope.row)" :disabled="scope.row.opnsta !='R' && scope.row.opnsta !='A' && scope.row.opnsta !='N' && scope.row.amesta !='N' && scope.row.amesta !='R' && scope.row.cansta !='N' && scope.row.cansta !='R'">海关状态更新</c-button>
                <c-button size="small" @click="handleChangeStatus(scope.row)" :disabled="!isJinB">人工状态变更</c-button>
								<c-button size="small" @click="handleDetailData(scope.row)">变动金额明细</c-button>	
              </template>
            </el-table-column>
					</el-table>
					<el-pagination
						layout="prev, pager, next, jumper"
						:total="pagination.total"
						:page-size="pagination.pageSize"
						:current-page="pagination.pageNum"
						@current-change="currentChange"
					>
					</el-pagination>
					<el-dialog
						v-dialogDrag
						v-if="dialogTableVisible"
						width="80%"
						title="变动金额明细"
						:visible.sync="dialogTableVisible"
						:close-on-click-modal="false"
						:close-on-press-escape="false"
					>
						
						<div  style="width: 100%;height: 100%;">
							<el-table id='tableRef' style="width: 100%;" v-loading="tableLoading" :data="tableList">
								<el-table-column v-for="(item,key) in tableColumn" :key="key" :prop="item.prop" :label="item.label">
								</el-table-column>
							</el-table>
							<el-pagination
								class="eContainer-pagination"
								layout="prev, pager, next, jumper, ->, sizes, total"
								:page-sizes="pageSizes"
								:page-size="pageSize"
								:current-page="currentPage"
								:total="total"
								@size-change="sizeChange"
								@current-change="currentChanges"
							></el-pagination>
						</div>
					</el-dialog>
				</c-col>
			</div>
		</el-col>
	</div>
</template>
<script>
import Api from "~/service/Api";
import CodeTable from "~/config/CodeTable";
import event from "../event";
export default {
  props: ["model", "codes"],
  mixins: [event],
  components: {},
  data() {
    return {
			// 机构列表
			orgList: [],
			load: false,
			dialogTableVisible: false,
			tableLoading: false,
      total: 0,
      currentPage: 1, // 页数
      pageSizes: [5, 10, 20, 30, 40, 50, 100],
      pageSize: 10, // 条数
      tableList: [],
      inputValue: "",
			tableColumn: [
				{
          prop: "limitchangetime",
          label: "变更日期",
          width: 130,
          isShow: true
        },
        {
          prop: "noticetype",
          label: "通知类型",
          width: 100,
          isShow: true
        },
        {
					prop: "traamt",
          label: "变动金额",
          isShow: false,
          width: 150
				},],
      tableColumns: [
        {
          prop: "ownref",
          label: "业务编号",
          width: 130,
          isShow: true
        },
        {
          prop: "bchkey",
          label: "分行行号",
          width: 100,
          isShow: true
        },
        {
					prop: "opnsta",
          label: "开立状态",
          isShow: false,
          width: 150
				},
				{
					prop: "opnstaName",
          label: "开立状态",
          isShow: true,
          width: 150
        },
        {
          prop: "amesta",
          label: "修改状态",
          isShow: false,
          width: 150
				},
				{
          prop: "amestaName",
          label: "修改状态",
          isShow: true,
          width: 150
        },
        {
          prop: "cansta",
          label: "撤销状态",
          isShow: false,
          width: 150
				},
				{
          prop: "canstaName",
          label: "撤销状态",
          isShow: true,
          width: 150
        },
        {
					prop: "errmsg",
          label: "错误信息",
          isShow: true,
          width: 200
				},
				{
					prop: "hbhamt",
          label: "应缴税款",
          isShow: true,
          width: 200
        }
      ],
      tableData: [],
      pagination: {
        pageNum: 1,
        pageSize: 10,
        total: 0
			},
			multipleSelection: []
    };
  },
  mounted() {
		this.queryOrgList()
    this.handleSearch();
	},
	methods:{
		    // 明细方法
		    sizeChange(num){
					this.pagination.pageSize = num;
				  this.dealChangePagenum();
				},
				currentChanges(num) {
					this.pagination.pageNum = num;
				  this.dealChangePagenum();
				},
				// 页面方法
				currentChange(num) {
					this.currentPage = num;
				  this.getTableData();
				},

		async getTableData() {
			let rtnmsg = await Api.post("/business/hitsta/getDataInfo", {
        ...this.model,
        inr: this.$route.query.inr,
				pageNum: this.currentPage,
				pageSize: this.pageSize,
				deptNo: this.$store.state.UserContext.currentOrg.departmentNumber
			});
			if (rtnmsg.respCode == SUCCESS) {
				this.tableData = rtnmsg.data.list || [];
				this.pagination = {
					total: rtnmsg.data.total
				};
			}
		},
	},
  computed: {
    isJinB() {
      let roleName = JSON.parse(window.sessionStorage.curRole).name;
      let headId=JSON.parse(window.sessionStorage.currentOrg).departmentNumber;
      if (roleName.indexOf("经办")>0  && headId!=="1000"){
        return true;
      }
      return false;
    },
    columns() {
      return this.tableColumns.filter(item => item.isShow);
		},
		judgementConditionShow(){
			let judgeFlag = false;
      if (this.$route.query.inr) {
        judgeFlag = true;
      }
      return judgeFlag;
		}
  },
};
</script>
<style scoped>
.eibs-tabs >>> .m-table-search {
  padding: 20px 0px 10px 0px;
}
</style>