自编号报表详情UI

src/views/ecw/financial/selfNoReport.vue

@@ -87,7 +87,12 @@
     </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('No.柜号')" align="center" prop="">
+        <template slot-scope="scope">
+          <el-button v-if="permissions.indexOf('selfno:report:detail') > -1" type="text" @click="$router.push('./selfno_report_detail?id=' + scope.row.id)">{{scope.row.no}}</el-button>
+          <span v-else>{{scope.row.no}}</span>
+        </template>
+      </el-table-column>
       <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>
@@ -104,6 +109,11 @@
         <el-table-column :label="$t('清关费')"></el-table-column>
         <el-table-column :label="$t('额外费用')"></el-table-column>
       </el-table-column>
+      <el-table-column :label="$t('操作')" v-if="permissions.indexOf('selfno:report:detail') > -1">
+        <template slot-scope="scope">
+          <el-button type="text" @click="$router.push('./selfno_report_detail?id=' + scope.row.id)">{{$t('查看')}}</el-button>
+        </template>
+      </el-table-column>
     </el-table>
     <!-- 分页组件 -->
     <pagination
@@ -119,8 +129,11 @@
 import { getTradeCityList } from "@/api/ecw/region";
 import { getCurrencyPage } from "@/api/ecw/currency";
 import {getWarehouseList} from '@/api/ecw/warehouse'
+import Template from "@/views/cms/template/index.vue";
+import store from "@/store";
 
 export default {
+  components: {Template},
   data() {
     return {
       list: [],
@@ -145,6 +158,9 @@ export default {
     getWarehouseList().then(res => this.warehouseList = res.data)
   },
   computed: {
+    permissions(){
+      return store.getters.permissions
+    },
     exportCityList() {
       return this.tradeCityList.filter((item) => item.type === 2);
     },

src/views/ecw/financial/selfNoReportDetail.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 placeholder="订单号、唛头、提单号"></el-input>
+          </el-form-item>
+          <el-form-item :label="$t('发货人')">
+            <el-input v-model="queryParams.fhr" placeholder="发货人名称、手机号"></el-input>
+          </el-form-item>
+          <el-form-item :label="$t('收货人')">
+            <el-input v-model="queryParams.fhr" placeholder="收货人名称、手机号"></el-input>
+          </el-form-item>
+
+          <el-form-item>
+            <dict-selector :type="DICT_TYPE.ECW_BEGINTIME_TYPE_ENDTIME" :filter="(item) => item.value != 'PickTime'" v-model="dateFilterType" defaultable style="width: 150px; margin-right: 5px" />
+            <el-date-picker v-model="dateFilter" type="datetimerange"  range-separator="-"
+                :start-placeholder="$t('开始日期')"
+                :end-placeholder="$t('结束日期')"
+                value-format="yyyy-MM-dd HH:mm:ss"
+                @change="handleQuery"
+            >
+            </el-date-picker>
+          </el-form-item>
+          <el-form-item :label="$t('运输方式')" prop="transportId" v-if="!transportId">
+            <dict-selector :type="DICT_TYPE.ECW_TRANSPORT_TYPE" v-model.number="queryParams.transportId" clearable @change="handleQuery"/>
+          </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.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('客户经理')" >
+            <user-selector manage v-model="queryParams.salesmanId" clearable @change="handleQuery"/>
+          </el-form-item>
+          <el-form-item :label="$t('订单状态')" prop="status">
+            <dict-selector :type="DICT_TYPE.ORDER_STATUS" v-model="queryParams.status"
+                           @keyup.enter.native="handleQuery" clearable />
+          </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="loading" :data="list" border class="card">
+      <el-table-column :label="$t('序号')" width="50">
+        <template slot-scope="{row, index}">
+          {{index + 1}}
+        </template>
+      </el-table-column>
+      <el-table-column :label="$t('订单号')" width="150" prop="orderNo" />
+      <el-table-column :label="$t('唛头')" width="150" prop="mark" />
+      <el-table-column :label="$t('始发仓')" width="150" prop="warehouseName" />
+      <el-table-column :label="$t('运输方式/目的地')" width="150">
+        <template slot-scope="{row}">
+          <div>{{row.transportName}}/{{row.destinationCountryName}}</div>
+        </template>
+      </el-table-column>
+      <el-table-column :label="$t('仓库实测')" width="150">
+        <template slot-scope="{row}">
+          <div>{{row.warehouseMeasure}}</div>
+        </template>
+      </el-table-column>
+      <el-table-column :label="$t('是否重泡货')" width="150">
+        <template slot-scope="{row}">
+          <div>{{row.isHeavyBubble | dict(DICT_TYPE.YES_NO)}}</div>
+        </template>
+      </el-table-column>
+      <el-table-column :label="$t('收费数据')" width="150">
+        <template slot-scope="{row}">
+          <div>{{row.chargeData}}</div>
+        </template>
+      </el-table-column>
+      <el-table-column :label="$t('订单状态')" width="150">
+        <template slot-scope="{row}">
+          <div>{{row.status | dict(DICT_TYPE.ORDER_STATUS)}}</div>
+        </template>
+      </el-table-column>
+      <el-table-column :label="$t('应收总金额')" width="150">
+        <template slot-scope="{row}">
+          <div>{{row.totalAmount}}</div>
+        </template>
+      </el-table-column>
+      <el-table-column :label="$t('订单优惠金额')" width="150">
+        <template slot-scope="{row}">
+          <div>{{row.orderDiscountAmount}}</div>
+        </template>
+      </el-table-column>
+      <el-table-column :label="$t('实收总金额')" width="150">
+        <template slot-scope="{row}">
+          <div>{{row.actualTotalAmount}}</div>
+        </template>
+      </el-table-column>
+      <el-table-column :label="$t('已收总金额')" width="150">
+        <template slot-scope="{row}">
+          <div>{{row.receivedTotalAmount}}</div>
+        </template>
+      </el-table-column>
+      <el-table-column :label="$t('应收运费')" width="150">
+        <template slot-scope="{row}">
+          <div>{{row.freightAmount}}</div>
+        </template>
+      </el-table-column>
+      <el-table-column :label="$t('运费优惠金额')" width="150">
+        <template slot-scope="{row}">
+          <div>{{row.freightDiscountAmount}}</div>
+        </template>
+      </el-table-column>
+      <el-table-column :label="$t('实收运费')" width="150">
+        <template slot-scope="{row}">
+          <div>{{row.actualFreightAmount}}</div>
+        </template>
+      </el-table-column>
+      <el-table-column :label="$t('已收运费')" width="150">
+        <template slot-scope="{row}">
+          <div>{{row.receivedFreightAmount}}</div>
+        </template>
+      </el-table-column>
+      <el-table-column :label="$t('应收清关费')" width="150">
+        <template slot-scope="{row}">
+          <div>{{row.customsClearanceAmount}}</div>
+        </template>
+      </el-table-column>
+      <el-table-column :label="$t('实收清关费')" width="150">
+        <template slot-scope="{row}">
+          <div>{{row.actualCustomsClearanceAmount}}</div>
+        </template>
+      </el-table-column>
+      <el-table-column :label="$t('清关费优惠金额')" width="150">
+        <template slot-scope="{row}">
+          <div>{{row.customsClearanceDiscountAmount}}</div>
+        </template>
+      </el-table-column>
+      <el-table-column :label="$t('已收清关费')" width="150">
+        <template slot-scope="{row}">
+          <div>{{row.receivedCustomsClearanceAmount}}</div>
+        </template>
+      </el-table-column>
+      <el-table-column :label="$t('应收额外费用')" width="150">
+        <template slot-scope="{row}">
+          <div>{{row.storageAmount}}</div>
+        </template>
+      </el-table-column>
+      <el-table-column :label="$t('实收额外费用')" width="150">
+        <template slot-scope="{row}">
+          <div>{{row.actualStorageAmount}}</div>
+        </template>
+      </el-table-column>
+      <el-table-column :label="$t('额外费用优惠金额')" width="150">
+        <template slot-scope="{row}">
+          <div>{{row.storageDiscountAmount}}</div>
+        </template>
+      </el-table-column>
+      <el-table-column :label="$t('已收额外费用')" width="150">
+        <template slot-scope="{row}">
+          <div>{{row.receivedStorageAmount}}</div>
+        </template>
+      </el-table-column>
+      <el-table-column :label="$t('是否全部核销')" width="150">
+        <template slot-scope="{row}">
+          <div>{{row.otherAmount}}</div>
+        </template>
+      </el-table-column>
+      <el-table-column :label="$t('客户经理')" prop="name"></el-table-column>
+      <el-table-column :label="$t('订单入仓时间')" width="150">
+        <template slot-scope="{row}">
+          <div>{{row.otherAmount}}</div>
+        </template>
+      </el-table-column>
+      <el-table-column :label="$t('订单装柜时间')" width="150">
+        <template slot-scope="{row}">
+          <div>{{row.otherAmount}}</div>
+        </template>
+      </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'
+import Template from "@/views/cms/template/index.vue";
+import store from "@/store";
+import UserSelector from "@/components/UserSelector/index.vue";
+
+export default {
+  components: {UserSelector, Template},
+  data() {
+    return {
+      loading: false, // 加载中
+      dateFilterType: '', //日期筛选类别
+      dateFilter: [], //筛选日期
+      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: {
+    permissions(){
+      return store.getters.permissions
+    },
+    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() {
+      return false
+      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>