Infsea.vue

<template>
  <div class="eibs-tab">
    <!-- ----------左 ---------->
    <c-col :span="12" class="col-left">
	
	<c-col :span="24">
        <el-form-item label="保函文本用途" prop="atxcod">
            <c-select style="width: 100%"
                v-model="model.atxcod"
               placeholder="请选择保函文本用途"
                :code="getCodesByKey('atxcod')"
            >
            </c-select>
        </el-form-item>
    </c-col>
    </c-col>
  <c-col :span="12" class="col-right">
       <c-col :span="24">
        <el-form-item label="保函文本名" prop="nam">
            <c-input
                v-model="model.nam"
                placeholder="请输入保函文本名"
            >
            </c-input>
        </el-form-item>
    </c-col>

  </c-col>


    <c-col :span="12" v-if="(this.model.atxcod==`1`)" class="col-left">
    <c-col :span="24">
        <el-form-item label="出具目的" prop="gtxpurpos">
            <c-select style="width: 100%"
                v-model="model.gtxpurpos"
               placeholder="请选择出具目的"
                :code="getCodesByKey('gtxpurpos') "
            >
            </c-select>
        </el-form-item>
    </c-col>

    <c-col :span="24">
        <el-form-item label="保函包含类型" prop="gtxgartyp">
            <c-select style="width: 100%"
                v-model="model.gtxgartyp"
               placeholder="请选择保函包含类型"
                :code="getCodesByKey('gtxgartyp')"
            >
            </c-select>
        </el-form-item>
    </c-col>
	
	<c-col :span="24">
        <el-form-item label="保函格式" prop="gtxlegfrm">
             <c-select style="width: 100%"
                v-model="model.sealegfrm"
               placeholder="请选择保函格式"
                :code="getCodesByKey('gtxlegfrm')"
            >
            </c-select>
        </el-form-item>
    </c-col>
</c-col>

<!-- 右 -->
<c-col :span="12" v-if="(this.model.atxcod==`1`)" class="col-right">
	<c-col :span="24">
        <el-form-item label="语言" prop="gtxuil">
            <c-select style="width: 100%"
                v-model="model.gtxuil"
               placeholder="请选择语言"
                :code="getCodesByKey('gtxuil')"
            >
            </c-select>
        </el-form-item>
    </c-col>
	
	 <c-col :span="24">
        <el-form-item label="保函无责任担保标志" prop="gtxexpflg">
            <c-select style="width: 100%"
                v-model="model.gtxexpflg"
               placeholder="请选择保函无责任担保标志"
                :code="getCodesByKey('gtxexpflg')"
            >
            </c-select>
        </el-form-item>
    </c-col>
</c-col>
<c-col :span="12" v-if="(this.model.atxcod==`2`)" class="col-left">
    <c-col :span="24">
       <!--  -->
    </c-col>
</c-col>
<c-col :span="12" v-if="(this.model.atxcod==`2`)" class="col-right">
    <c-col :span="24">
       <!--  -->
    </c-col>
</c-col>

    <!-- 条件输入框下面的按钮 -->
    <c-col :span="24">
      <c-col :span="12" style="text-align: left">
        <el-button type="primary" size="small" @click="atxAdd">新增</el-button>
      </c-col>
      <c-col :span="12" style="text-align: right">
        <el-button size="small" @click="handleReset">重置</el-button>
        <el-button
          type="primary"
          icon="el-icon-search"
          size="small"
          @click="onSearch()"
          >查询
        </el-button>
      </c-col>
    </c-col>

    <!-- 查询结果展示区域 -->
    <c-col :span="24">
      <c-paging-table 
        :data="atxData"
        :columns="atxColumns"
        :pageNumber="model.pageNum"
        :pageSize="model.pageSize"
        :total="model.total"
        v-on:queryFunc="queryFunc"
        :border="true"
      >
        <c-table-column fixed="right" prop="op" label="操作" width="240px">
          <template slot-scope="{ scope }">
            <c-button
              style="margin-left: 0"
              size="small"
              @click="atxInfo(scope.$index, scope.row)"
              >详情</c-button
            >
            <c-button
              style="margin-left: 5px"
              size="small"
              type="primary"
              @click="atxEdit(scope.$index, scope.row)"
              >修改</c-button
            >
            <c-button
              size="small"
              style="margin-left: 5px"
              @click="atxDelete(scope.$index, 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-paging-table>
    </c-col>
  </div>
</template>

<script>
import codes from "~/config/CodeTable";

import { queryByPage } from "~/service/test/atx.js";

export default {
  name: "",
  props: ["model"],
  inject: ["root"],
  data() {
    return {
      atxData: [],
      atxColumns: [
	      { label: '保函文本名', prop: 'nam', width: 'auto' },
	      { label: '保函用途', prop: 'atxcod', width: 'auto' },
	      { label: '语言', prop: 'uil', width: 'auto' },
	      { label: '保函格式', prop: 'gtxlegfrm', width: 'auto' },
	      { label: '保函无责任担保标志', prop: 'gtxexpflg', width: 'auto' },
	      { label: '保函包含类型', prop: 'gtxgartyp', width: 'auto' },
	      { label: '出具目的', prop: 'gtxpurpos', width: 'auto' },
			],
    };
  },
  computed: {
  },
  
  activated() {
    const { update } = this.$route.params
    if (update) {
      this.onInfatxSearch()
    }
  },
  methods: {
    handleReset() {
      this.root.$refs.modelForm.resetFields();
    },
    onSearch() {
      this.model.pageSize = 5;
      this.model.pageNum = 1;
      this.onInfatxSearch();
    },
    onInfatxSearch() {
			queryByPage(this.model).then(res => {
        /**
         * pageNumber: 0
         * pageSize:	0
         * total: 69
         * totalPage: 0
         */
        const list = res.list
        this.atxData = list
        this.model.pageNum = res.pageNumber
        this.model.pageSize = res.pageSize
        this.model.total = res.total
      }) 
		},
    queryFunc(pageNumber, pageSize) {
      this.model.pageNum = pageNumber
      this.model.pageSize = pageSize
      this.onInfatxSearch()
    },
    atxtypeChange(val) {
      this.model.atxtyp = val;
    },
    getCodesByKey(key) {
      return codes[key] ?? [];
    },
   atxAdd() {
			this.$router.push(`/statics/dbaatx`)
		},
    atxInfo(index, row) {
			this.$router.push(`/statics/dbiatx/${row.inr}`)
		},
    atxEdit(index, row) {
			this.$router.push(`/statics/dbeatx/${row.inr}`)
		},
    atxDelete(index, row) {
			this.$router.push(`/statics/dbdatx/${row.inr}`)
		},
  },
};
</script>

<style scoped>
.table-button-item-list {
  padding: 0;
  margin: 0;
}
.table-button-item-list li {
  list-style: none;
  padding: 5px 0;
  text-align: center;
  color: #606266;
  cursor: pointer;
}</style>