费用查询工具条

src/widget/Business/index.vue

@@ -125,6 +125,7 @@ export default {
         relflg: "",
         page: 1,
         pageSize: 5,
+        total: 0
       },
     };
   },

src/widget/Fee/index.vue

 <template>
-  <div></div>
+  <div>
+    <el-form
+      :model="model"
+      ref="modelForm"
+      label-width="100px"
+      label-position="right"
+      size="small"
+    >
+      <c-col :span="24">
+        <c-col :span="12" class="col-left">
+          <el-form-item label="费用代码" prop="codfee">
+            <c-input
+                v-model="model.codFee"
+                placeholder="请输入 费用代码"
+                style="width: 100%"
+            >
+            </c-input>
+        </el-form-item>
+        </c-col>
+        <c-col :span="12" class="col-right">
+          <el-form-item label="收费条件类型" prop="feepri">
+            <c-select
+              v-model="model.feepri"
+              style="width: 100%"
+              placeholder="请选择收费类型"
+              :code="getCodesByKey('feepri')"
+            ></c-select>
+          </el-form-item>
+        </c-col>
+      </c-col>
+      <!-- <c-col :span="8" class="col-left col-right">
+        <c-col :span="24">
+          <el-form-item label="账号类型" prop="typ">
+            <c-select
+              v-model="model.typ"
+              placeholder=""
+              style="width: 100%"
+              :code="getCodesByKey('recgrptyp')"
+            ></c-select>
+          </el-form-item>
+        </c-col>
+        <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="8" class="col-right">
+        <c-col :span="24">
+          <el-form-item label="国际银行账户号 " prop="iban">
+            <c-input
+              v-model="model.iban"
+              maxlength="34"
+              placeholder="请输入IBAN"
+            ></c-input>
+          </el-form-item>
+        </c-col>
+
+        <c-col :span="24">
+          <el-form-item label="账号币种" prop="cur">
+            <c-select
+              v-model="model.cur"
+              style="width: 100%"
+              placeholder=""
+              :code="getCodesByKey('infled_Cur')"
+            >
+            </c-select>
+          </el-form-item>
+        </c-col>
+      </c-col> -->
+      <c-col :span="24" style="text-align: right">
+        <el-button size="small" @click="handleReset">重置</el-button>
+        <el-button
+          type="primary"
+          icon="el-icon-search"
+          size="small"
+          @click="doSearch()"
+          >查询
+        </el-button>
+      </c-col>
+    </el-form>
+    <c-col :span="24">
+      <c-paging-table
+        :data="tableData"
+        :columns="tableColumns"
+        :pageNumber="model.pageNum"
+        :pageSize="model.pageSize"
+        :total="model.total"
+        v-on:queryFunc="queryFunc"
+        :border="true"
+      >
+      </c-paging-table>
+    </c-col>
+  </div>
 </template>
 
 <script>
+import codes from "~/config/CodeTable";
+import { queryByPage } from "~/service/test/fec.js";
 
 /**
  * 费用查询
  */
 export default {
-	name: 'FeeQuery'
+	name: 'FeeQuery',
+  data() {
+    return {
+      tableData: [],
+      tableColumns: [
+        { label: '费用代码', prop: 'codFee', width: '120' },
+        { label: 'Description', prop: '', width: '120' },
+				{ label: '收费条件类型', prop: 'feepri', width: '120' },
+				{ label: '最小金额币种', prop: 'maxcur', width: '120' },
+				{ label: '费用最小金额', prop: 'lowamt', width: '120' },
+				{ label: '费用最大金额', prop: 'highamt', width: '120' },
+				{ label: '起始日期', prop: 'begdat', width: '120' },
+				{ label: '终止日期', prop: 'enddat', width: '120' },
+				{ label: '计算规则', prop: 'calrul', width: '120' },
+				{ label: '每份的费用金额', prop: 'untamt', width: '150' },
+				{ label: '计算费率', prop: 'ratcal', width: '120' },
+      ],
+      model: {
+        // fec，查询条件的字段
+        codfee:"",
+        feepri:"!",
+        objtyp:"",
+        // paging
+        pageNum: 1,
+        pageSize: 5,
+        total: 0
+      },
+    };
+  },
+  methods: {
+    handleReset() {
+      this.$refs.modelForm.resetFields();
+    },
+    doSearch() {
+      queryByPage(this.model).then((res) => {
+        const list = res.list;
+        this.tableData = 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.doSearch();
+    },
+    getCodesByKey(key) {
+      return codes[key] ?? [];
+    },
+  },
 }
 </script>