自编号报表UI

src/views/ecw/financial/selfNoReport.vue

+<template>
+  <div class="app-container">
+    <!-- 搜索 -->
+    <el-card>
+      <el-form
+        :model="queryParams"
+        ref="queryForm"
+        size="small"
+        inline
+        class="card"
+      >
+          <el-form-item :label="$t('自编号')">
+            <el-input v-model="queryParams.selfNo" clearable></el-input>
+          </el-form-item>
+          <el-form-item :label="$t('始发仓')">
+            <el-select v-model="queryParams.warehouseId" placeholder="请选择" clearable>
+              <el-option
+                v-for="item in warehouseList"
+                :key="item.id"
+                :label="$l(item, 'title')"
+                :value="item.id"
+              />
+            </el-select>
+          </el-form-item>
+          <el-form-item :label="$t('目的国')">
+            <el-select v-model="queryParams.countryId" placeholder="请选择" clearable>
+              <el-option
+                v-for="item in countryList"
+                :key="item.id"
+                :label="item.name"
+                :value="item.id"
+              />
+            </el-select>
+          </el-form-item>
+          <el-form-item :label="$t('目的仓')">
+            <el-select v-model="queryParams.destinationWarehouseId" placeholder="请选择" clearable>
+              <el-option
+                v-for="item in warehouseList"
+                :key="item.id"
+                :label="$l(item, 'title')"
+                :value="item.id"
+              />
+            </el-select>
+          </el-form-item>
+          <el-form-item :label="$t('自编号状态')">
+            <el-select v-model="queryParams.status" placeholder="请选择" clearable>
+              <el-option
+                v-for="item in DICT_TYPE.SELF_NO_STATUS"
+                :key="item.value"
+                :label="item.label"
+                :value="item.value"
+              />
+            </el-select>
+          </el-form-item>
+          <el-form-item :label="$t('结算时间')" >
+            <el-date-picker
+              clearable
+              v-model="queryParams.settlementTime"
+              type="daterange"
+              range-separator="至"
+              start-placeholder="开始日期"
+              end-placeholder="结束日期"
+              align="right"
+              value-format="yyyy-MM-dd"
+              :picker-options="pickerOptions"
+            />
+          </el-form-item>
+          <el-form-item :label="$t('是否结算')">
+            <el-select v-model="queryParams.isSettlement" placeholder="请选择" clearable>
+              <el-option
+                v-for="item in DICT_TYPE.YES_NO"
+                :key="item.value"
+                :label="item.label"
+                :value="item.value"
+              />
+            </el-select>
+          </el-form-item>
+          <el-form-item>
+            <el-button
+              type="primary"
+              icon="el-icon-search"
+              @click="handleQuery"
+            >{{$t('查询')}}</el-button>
+            <el-button type="primary" icon="el-icon-plus" @click="handleExport">{{$t('导出搜索')}}</el-button>
+          </el-form-item>
+      </el-form>
+    </el-card>
+    <el-table v-loading="loadings" :data="list" border class="card">
+      <el-table-column :label="$t('是否结算')" align="center" prop="" />
+      <el-table-column :label="$t('No.柜号')" align="center" prop="" />
+      <el-table-column :label="$t('应收款(Accounts receivable)')" align="center" prop=""></el-table-column>
+      <el-table-column :label="$t('received in + 目的国国家(目的地实收)')" align="center" prop="">
+        <el-table-column :label="$t('运费')"></el-table-column>
+        <el-table-column :label="$t('清关费')"></el-table-column>
+        <el-table-column :label="$t('额外费用')"></el-table-column>
+      </el-table-column>
+      <el-table-column :label="$t('received in China(中国实收)')" align="center" prop="" >
+        <el-table-column :label="$t('运费')"></el-table-column>
+        <el-table-column :label="$t('清关费')"></el-table-column>
+        <el-table-column :label="$t('额外费用')"></el-table-column>
+      </el-table-column>
+      <el-table-column :label="$t('Discounts 折扣')" align="center" prop="">
+        <el-table-column :label="$t('运费')"></el-table-column>
+        <el-table-column :label="$t('清关费')"></el-table-column>
+        <el-table-column :label="$t('额外费用')"></el-table-column>
+      </el-table-column>
+    </el-table>
+    <!-- 分页组件 -->
+    <pagination
+      :total="total"
+      :page.sync="queryParams.page"
+      :limit.sync="queryParams.rows"
+      @pagination="getList"
+    />
+  </div>
+</template>
+
+<script>
+import { getTradeCityList } from "@/api/ecw/region";
+import { getCurrencyPage } from "@/api/ecw/currency";
+import {getWarehouseList} from '@/api/ecw/warehouse'
+
+export default {
+  data() {
+    return {
+      list: [],
+      total: 0,
+      queryParams: {
+        page: 1,
+        rows: 20,
+      },
+      tradeCityList: [],
+      currencyList:[],
+      warehouseList:[],
+      countryList: [],
+    };
+  },
+  activated(){
+    this.getList();
+  },
+  created() {
+    getCurrencyPage(this.params).then(res => this.currencyList = res.data.list)
+    getTradeCityList().then((res) => (this.tradeCityList = res.data));
+    this.getList();
+    getWarehouseList().then(res => this.warehouseList = res.data)
+  },
+  computed: {
+    exportCityList() {
+      return this.tradeCityList.filter((item) => item.type === 2);
+    },
+    importCityList() {
+      return this.tradeCityList.filter((item) => item.type === 1);
+    },
+    exportWarehouseList(){
+      /* tradeType 1 进口，2出口，3进出口 */
+      return this.warehouseList.filter(item => item.tradeType === 2 || item.tradeType === 3)
+    },
+    importWarehouseList(){
+      return this.warehouseList.filter(item => item.tradeType === 1 || item.tradeType === 3)
+    },
+  },
+  methods: {
+    getCurrencyLabel(id){
+      const item = this.currencyList.find(item => item.id === id);
+      if(!item)return ''
+      return this.$l(item, 'title')
+    },
+    /** 查询列表 */
+    getList() {
+      this.loading = true;
+      let params = {...this.queryParams}
+      this.addBeginAndEndTime(params, this.dateType, "createTime");
+      // 执行查询
+      /* TODO getListApi(params).then((response) => {
+        this.list = response.data.list;
+        this.total = response.data.total;
+        this.loading = false;
+      });*/
+    },
+    /** 搜索按钮操作 */
+    handleQuery() {
+      this.$refs['queryForm'].resetFields()
+      this.queryParams.page = 1;
+      // TODO 重置结算时间
+      this.getList();
+    },
+    // 导出搜索
+    handleExport(){
+      // TODO 导出搜索
+    }
+  },
+};
+</script>
+
+<style scoped>
+.card {
+  margin-top: 20px;
+}
+.dialog-footer {
+  padding: 40px;
+}
+.card-title {
+  font-size: 18px;
+  font-weight: bold;
+  display: inline-block;
+}
+</style>