需求109 后台-客户-客户详情

src/views/ecw/customer/components/customerConsOrder.vue

+<template>
+  <div>
+    <!-- 搜索工作栏 -->
+    <el-form :model="queryParams" ref="queryForm" size="small" :inline="true" label-width="68px">
+      <el-form-item :label="$t('编号')">
+        <el-input
+          v-model.trim="noParam.value"
+          :placeholder="$t('请输入快递号、包裹号、订单号')"
+          clearable
+          class="w-200"
+          @input="replaceSpace(noParam, 'value')"
+          @keyup.enter.native="handleQuery">
+          <template slot="prepend">
+            <dict-selector :type="DICT_TYPE.ORDER_QUERY_NO_FIELD" defaultable v-model="noParam.key" />
+          </template>
+        </el-input>
+      </el-form-item>
+      <el-form-item label="签收时间" prop="signedTime">
+        <el-date-picker clearable v-model="queryParams.signedTime" type="date" value-format="yyyy-MM-dd" :placeholder="$t('选择签收时间')" />
+      </el-form-item>
+      <el-form-item :label="$t('客户经理')">
+        <user-selector manage v-model="queryParams.salesmanIds" multiple clearable @change="handleQuery" :prepend="{ id: 0, nickname: $t('未分配客户经理') }" class="w-200" />
+      </el-form-item>
+      <el-form-item :label="$t('集运仓')">
+        <el-select v-model="queryParams.wareId" :placeholder="$t('请选择仓库')" filterable>
+          <el-option v-for="warehouse in this.warehouseList" :key="warehouse.id" :label="$l(warehouse,'title')" :value="warehouse.id" v-if="warehouse.isConsService"></el-option>
+        </el-select>
+      </el-form-item>
+      <el-form-item :label="$t('运输方式')" prop="transportId">
+        <dict-selector :type="DICT_TYPE.ECW_TRANSPORT_TYPE" v-model="queryParams.transportId" class="w-200" />
+      </el-form-item>
+      <el-form-item :label="$t('目的国')" prop="consigneeCountryId">
+        <el-select v-model="queryParams.consigneeCountryId"  :label="queryParams.consigneeCountryId" :placeholder="$t('请选择目的国')" clearable @change="handleQuery" class="w-200">
+          <el-option v-for="item in AddressProvince" :key="item.guojia" :label="item.guojiaName" :value="item.guojia"></el-option>
+        </el-select>
+      </el-form-item>
+      <el-form-item :label="$t('目的城市')" prop="consigneeCityId">
+        <el-select v-model="queryParams.consigneeCityId"  :placeholder="$t('请选择目的城市')" style="width: 200px" clearable @change="handleQuery" class="w-200">
+          <el-option v-for="item in AddressCity" :key="item.shi" :label="item.shiName" :value="item.shi"></el-option>
+        </el-select>
+      </el-form-item>
+      <el-form-item :label="$t('出货渠道')" prop="shippingChannelIdList">
+        <el-select v-model="queryParams.shippingChannelIdList" multiple :placeholder="$t('请选择出货渠道')" clearable>
+          <el-option v-for="item in channelList" :label="$l(item, 'name')" :value="item.channelId" :key="item.channelId"></el-option>
+        </el-select>
+      </el-form-item>
+      <el-form-item>
+        <el-button type="primary" icon="el-icon-search" @click="handleQuery">搜索</el-button>
+        <el-button icon="el-icon-refresh" @click="resetQuery">重置</el-button>
+      </el-form-item>
+    </el-form>
+
+    <!-- 合计列 -->
+    <el-row :gutter="10" class="mb8">
+      <el-col :span="15">
+        <!-- 订单列表显示搜索条件对应箱数、仓库实测、收款方数、重量 -->
+        {{ $t("合计：{totalNum}箱，{totalVolume}m³(测) {totalChargeVolume}m³(重) {totalWeight}KG(测), {totalChargeWeight}kg(收费)", statisticsOrder) }}
+      </el-col>
+      <right-toolbar :showSearch.sync="showSearch" @queryTable="getOrderList"></right-toolbar>
+    </el-row>
+
+    <!-- 操作工具栏 -->
+
+    <!-- 表格内容 -->
+    <el-table v-loading="loading" :data="list" border ref="dataTable">
+      <el-table-column :label="$t('快递单号')" align="center" prop="expressNo"></el-table-column>
+      <el-table-column :label="$t('签收时间')" align="center" prop="signedTime">
+        <template slot-scope="scope">
+          <span>{{ parseTime(scope.row.signedTime) }}</span>
+        </template>
+      </el-table-column>
+      <el-table-column :label="$t('运输方式-渠道')+'/'+$t('目的仓')" align="center" prop="code" width="150">
+        <template slot-scope="scope">
+          /{{isChinese?scope.row.destTitleZh:scope.row.destTitleEn}}
+        </template>
+      </el-table-column>
+      <el-table-column :label="$t('包裹状态')" align="center" prop="code">
+        <template slot-scope="scope">
+          <dict-tag :type="DICT_TYPE.CONS_STATUS" :value="scope.row.status" />
+        </template>
+      </el-table-column>
+      <!-- 转运时间取订单创建时间 -->
+      <el-table-column :label="$t('转运时间')" align="center" prop="code">
+        <template slot-scope="scope">
+          <span>{{ parseTime(scope.row.signedTime) }}</span>
+        </template>
+      </el-table-column>
+      <el-table-column :label="$t('转运单号')" align="center" prop="code">
+      </el-table-column>
+      <el-table-column :label="$t('订单状态')" align="center" prop="code">
+        <template slot-scope="scope">
+          <dict-tag :type="DICT_TYPE.ORDER_STATUS" :value="scope.row.orderStatus" />
+        </template>
+      </el-table-column>
+      <el-table-column :label="$t('填单数据')" align="center" prop="code">
+        <template slot-scope="scope">
+          <span v-html="getGoodsName(scope.row.consItemList)"></span>
+        </template>
+      </el-table-column>
+      <el-table-column :label="$t('验货数据')" align="center" prop="code">
+        <template slot-scope="scope">
+          {{getInspectionInfo(scope.row.consItemList)}}
+        </template>
+      </el-table-column>
+      <el-table-column :label="$t('包裹号')" align="center" prop="consNum"></el-table-column>
+    </el-table>
+
+    <!-- 分页组件 -->
+    <pagination v-show="total > 0" :total="total" :page.sync="queryParams.pageNo" :limit.sync="queryParams.pageSize" @pagination="getList"/>
+  </div>
+</template>
+
+<script>
+import { getConsPage } from '@/api/ecw/cons'
+import Template from '@/views/cms/template/index.vue'
+import UserSelector from '@/components/UserSelector/index.vue'
+import { getWarehouseList } from '@/api/ecw/warehouse'
+import { getRegionList } from '@/api/ecw/order'
+
+export default {
+  name: "CustomerConsOrder",
+  components: { UserSelector, Template },
+  /**
+   * 可以单独作为页面，也可以作为组件被被客户详情页调用。
+   * 作为组件时要传入 customerId，用于限制范围和隐藏搜索筛选，可以通过this.customer直接使用
+   */
+  props: {
+    customerId: Number,
+  },
+
+  data(){
+    return{
+      // 遮罩层
+      loading: true,
+      // 表格内容
+      list: [],
+      // 总条数
+      total: 0,
+      dateRangeWatEtime: [],
+      dateRangeWatTime: [],
+      dateRangeSignedTime: [],
+      dateRangeCreateTime: [],
+      // 进口仓库列表
+      warehouseList: [],
+      // 目的国家列表
+      AddressProvince:[],
+      // 目的城市列表
+      AddressCity:[],
+      // 查询参数
+      queryParams: {
+        pageNo: 1,
+        pageSize: 10,
+        customerId: this.customerId, // 通过上一个页面传过来的值，默认只获取当前客户的数据
+        consigneeCountryId: null,
+        consigneeCityId: null,
+        shippingChannelIdList: null,
+        //查询字段...
+      },
+      // 编号查询条件
+      noParam: {
+        key: "numberKey",
+        value: ""
+      },
+
+
+    }
+  },
+
+  // 数据的值有变动时执行
+  computed:{
+    // 判断国际化语言
+    isChinese() {
+      return this.$i18n.locale === "zh_CN";
+    },
+    // 监听查询参数
+    combinedQueryParams(){
+      let queryParams = {...this.queryParams}
+      // 处理编号查询参数
+      if (this.noParam.value) {
+        queryParams[this.noParam.key] = this.noParam.value
+      }
+      return queryParams
+    },
+  },
+  // 第一次进入页面时执行（只执行一次）
+  created() {
+    // 获取表格内容
+    this.getList();
+    // 获取进口类型的仓库列表
+    getWarehouseList({tradeType : 2}).then((r) => {
+      this.warehouseList = r.data;
+    });
+    // 获取国家列表
+    this.getAddressProvince()
+    // 获取城市列表
+    this.getAddressCity()
+  },
+
+  methods:{
+    /**
+     * 获取表格内容
+     */
+    getList() {
+      // 处理查询参数
+      let params = { ...this.combinedQueryParams };
+      // 处理时间查询参数
+      this.addBeginAndEndTime(params, this.dateRangeWatEtime, 'watEtime');
+      this.addBeginAndEndTime(params, this.dateRangeWatTime, 'watTime');
+      this.addBeginAndEndTime(params, this.dateRangeSignedTime, 'signedTime');
+      this.addBeginAndEndTime(params, this.dateRangeCreateTime, 'createTime');
+      // 执行查询
+      getConsPage(params).then(response => {
+        this.list = response.data.list;
+        this.total = response.data.total;
+        this.loading = false;
+      });
+    },
+    /**
+     * 搜索按钮
+     */
+    handleQuery() {
+      this.queryParams.pageNo = 1;
+      this.getList();
+    },
+    /**
+     * 重置按钮
+     */
+    resetQuery() {
+      this.dateRangeWatEtime = [];
+      this.dateRangeWatTime = [];
+      this.dateRangeSignedTime = [];
+      this.dateRangeCreateTime = [];
+      this.noParam.value = ""
+      this.resetForm("queryForm");
+      this.handleQuery();
+    },
+    /**
+     * 获取国家地区列表
+     */
+    getAddressProvince() {
+      getRegionList(1, 1).then(({ data }) => {
+        this.AddressProvince = data
+      })
+    },
+    /**
+     * 获取城市列表
+     */
+    getAddressCity() {
+      getRegionList(4, 4).then(({ data }) => {
+        this.AddressCity = data
+      })
+    },
+    /**
+     * 获取填单数据
+     */
+    getGoodsName(val){
+      return val.map((item, index) => `${index + 1}.${item.prodName}*${item.quantity}`).join('<br>');
+    },
+    /**
+     * 获取验货数据
+     */
+    getInspectionInfo(val){
+      let inspectionNums = 0;
+      let inspectionUnit;
+      let inspectionQuantitys=0;
+      let inspectionVolumes=0;
+      let inspectionWeights=0;
+      val.forEach(item => {
+        inspectionUnit = item.inspectionUnit;
+        inspectionNums += item.inspectionNum;
+        inspectionQuantitys += item.inspectionQuantity;
+        inspectionVolumes += item.inspectionVolume;
+        inspectionWeights += item.inspectionWeight;
+      });
+      return `${inspectionQuantitys}${inspectionUnit} ${inspectionVolumes}m³ ${inspectionWeights}kg ${inspectionNums}件`;
+    },
+    /**
+     * 去除空格
+     */
+    replaceSpace(obj, field) {
+      obj[field] = obj[field].replace(/\s+/g, "")
+    },
+
+  }
+}
+
+
+</script>

src/views/ecw/customer/query.vue

@@ -426,6 +426,10 @@
           <el-tab-pane name="follow" :label="$t('跟进')">
             <log-list-customer-common ref="logListCustomerCommon" :customerService="customer.customerService" :customerNumber="customer.number" v-if="activeName === 'follow'" :customerId="id" />
           </el-tab-pane>
+          <!-- 客户集运订单 -->
+          <el-tab-pane name="consOrder" :label="$t('集运')">
+            <customer-cons-order v-if="activeName === 'consOrder'" ref="CustomerConsOrder" :customerId="id"></customer-cons-order>
+          </el-tab-pane>
           <el-tab-pane name="special" :label="$t('特殊设置')">
             <el-descriptions :column="2">
               <el-descriptions-item :label="$t('是否显示提单价格')">
@@ -723,6 +727,7 @@ import { getNodeList } from "@/api/ecw/node"
 import CustomerFollow from "./components/customerFollow"
 import { parseTime } from "@/utils/ruoyi"
 import CustomerComplaint from "@/views/ecw/customerComplaint"
+import CustomerConsOrder from "@/views/ecw/customer/components/customerConsOrder"
 import { listServiceUser, getUserProfile } from "@/api/system/user"
 import { getCustomerContactsListByCustomer } from "@/api/ecw/customerContacts"
 import { getOrderPage, getRegionList } from "@/api/ecw/order"
@@ -749,7 +754,8 @@ export default {
     Template,
     CustomerFollow,
     CustomerComplaint,
-    customerLog
+    customerLog,
+    CustomerConsOrder,
   },
   created() {
     // 获取币种