index.vue

<template>
  <div class="app-container">
    <el-form
      :model="queryParams"
      ref="queryForm"
      size="small"
      :inline="true"
      v-show="showSearch"
      label-width="100px"
    >
      <el-form-item label="订单编号" prop="name">
        <el-select
          v-model="queryParams.SearchType1"
          clearable
          style="width: 100px"
        >
          <el-option
            v-for="dict in SearchType"
            :key="dict.value"
            :label="dict.label"
            :value="dict.value"
          />
        </el-select>
        <el-input
          style="width: 200px"
          v-model="queryParams.orderNo"
          placeholder="请输入订单编号"
          clearable
          @keyup.enter.native="handleQuery"
        />
      </el-form-item>
      <el-form-item label="提单号" prop="tidanNo">
        <el-select
          v-model="queryParams.SearchType2"
          clearable
          style="width: 100px"
        >
          <el-option
            v-for="dict in SearchType"
            :key="dict.value"
            :label="dict.label"
            :value="dict.value"
          />
        </el-select>
        <el-input
          style="width: 200px"
          v-model="queryParams.tidanNo"
          placeholder="请输入提单号"
          clearable
          @keyup.enter.native="handleQuery"
        />
      </el-form-item>
      <el-form-item label="发货人编号">
        <el-select
          v-model="queryParams.SearchType3"
          clearable
          style="width: 100px"
        >
          <el-option
            v-for="dict in SearchType"
            :key="dict.value"
            :label="dict.label"
            :value="dict.value"
          />
        </el-select>
        <el-input
          style="width: 200px"
          v-model="queryParams.fhNumber"
          placeholder="请输入发货人编号"
          clearable
        />
      </el-form-item>
      <el-form-item label="收货人编号" prop="shNumber">
        <el-select
          v-model="queryParams.SearchType4"
          clearable
          style="width: 100px"
        >
          <el-option
            v-for="dict in SearchType"
            :key="dict.value"
            :label="dict.label"
            :value="dict.value"
          />
        </el-select>
        <el-input
          style="width: 200px"
          v-model="queryParams.shNumber"
          placeholder="请输入收货人编号"
          clearable
        />
      </el-form-item>
      <el-form-item label="唛头" prop="remark">
        <el-select
          v-model="queryParams.SearchType5"
          clearable
          style="width: 100px"
        >
          <el-option
            v-for="dict in SearchType"
            :key="dict.value"
            :label="dict.label"
            :value="dict.value"
          />
        </el-select>
        <el-input
          v-model="queryParams.marks"
          placeholder="请输入唛头"
          style="width: 200px"
          clearable
        />
      </el-form-item>
      <el-form-item label="客户经理" prop="salesmanId">
        <user-selector
          manage
          v-model="queryParams.salesmanId"
          clearable
          @change="handleQuery"
          :prepend="{ id: 0, nickname: $t('未分配客户经理') }"
        />
      </el-form-item>
      <el-form-item label="部门" prop="remark">
        <treeselect
          v-model="queryParams.deptid"
          :options="deptOptions"
          :show-count="true"
          :placeholder="$t('请选择部门')"
          :normalizer="normalizer"
        />
      </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 :label="$t('运输方式')" prop="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('始发仓')" prop="startWarehouseId">
        <el-select
          v-model="queryParams.startWarehouseId"
          :placeholder="$t('请选择始发仓')"
          clearable
          @change="handleQuery"
        >
          <el-option
            v-for="item in exportWarehouseList"
            :label="$l(item, 'title')"
            :value="item.id"
            :key="item.id"
          ></el-option>
        </el-select>
      </el-form-item>

      <el-form-item label="目的国" prop="muDiGuo">
        <el-select
          clearable
          v-model="queryParams.muDiGuo"
          :placeholder="$t('请选择国家')"
        >
          <el-option
            v-for="dict in countryList"
            :key="dict.id"
            :label="isChinese ? dict.nameZh : dict.nameEn"
            :value="parseInt(dict.id)"
          />
        </el-select>
      </el-form-item>
      <el-form-item label="目的城市" prop="muDiShi">
        <el-input
          v-model="queryParams.muDiShi"
          placeholder="选择目的城市"
          clearable
          @keyup.enter.native="handleQuery"
        />
      </el-form-item>
      <el-form-item :label="$t('目的仓')" prop="destWarehouseId">
        <el-select
          v-model="queryParams.destWarehouseId"
          :placeholder="$t('请选择目的仓')"
          clearable
          @change="handleQuery"
        >
          <el-option
            v-for="item in importWarehouseList"
            :label="$l(item, 'title')"
            :value="item.id"
            :key="item.id"
          ></el-option>
        </el-select>
      </el-form-item>
      <el-form-item :label="$t('是否控货')" prop="isCargoControl">
        <el-select v-model="queryParams.isCargoControl" clearable>
          <el-option label="是" value="1"></el-option>
          <el-option label="否" value="0"></el-option>
        </el-select>
      </el-form-item>
      <el-form-item label="重泡类型" prop="remark">
        <el-select v-model="queryParams.zpType" clearable>
          <el-option label="重货" value="2"></el-option>
          <el-option label="泡货" value="3"></el-option>
          <el-option label="普货" value="1"></el-option>
        </el-select>
      </el-form-item>
      <el-form-item label="付款方" prop="remark">
        <el-select v-model="queryParams.drawee" clearable>
          <el-option label="发货方" value="1"></el-option>
          <el-option label="收货方" value="2"></el-option>
          <el-option label="自定义" value="3"></el-option>
        </el-select>
      </el-form-item>
      <el-form-item label="渠道" prop="remark">
        <el-select v-model="queryParams.shippingChannelId" clearable>
          <el-option
            v-for="item in channelList"
            :key="item.id"
            :label="$l(item, 'name')"
            :value="item.channelId"
          />
        </el-select>
      </el-form-item>
      <el-form-item label="资源类型" prop="ResourceType">
        <el-select v-model="queryParams.ResourceType" clearable>
          <el-option label="开发客户" value="1"></el-option>
          <el-option label="公司客户" value="2"></el-option>
        </el-select>
      </el-form-item>
      <el-form-item label="业绩类型" prop="YeJiType">
        <el-select v-model="queryParams.YeJiType" clearable>
          <el-option label="新客户" value="1"></el-option>
          <el-option label="老客户" value="2"></el-option>
        </el-select>
      </el-form-item>
      <el-form-item label="数据筛选" prop="remark">
        <el-select
          v-model="queryParams.dataSearch1"
          clearable
          style="width: 150px"
        >
          <el-option label="入仓箱数" value="1"></el-option>
          <el-option label="入仓体积" value="2"></el-option>
          <el-option label="入仓重量" value="3"></el-option>
          <el-option label="重/泡标准" value="3"></el-option>
          <el-option label="提货率" value="4"></el-option>
        </el-select>
        <el-select
          v-model="queryParams.dataSearch2"
          clearable
          style="width: 150px"
        >
          <el-option label="大于等于" value="1"></el-option>
          <el-option label="等于" value="2"></el-option>
          <el-option label="小于等于" value="3"></el-option>
        </el-select>
        <el-input
          style="width: 100px"
          v-model="queryParams.dataSearch3"
          placeholder="请输入数值"
          clearable
          @keyup.enter.native="handleQuery"
        />
      </el-form-item>
      <el-form-item label="时间筛选" prop="dateSearch">
        <el-select v-model="queryParams.dateSearch1" clearable>
          <el-option label="订单创建时间" value="1"></el-option>
          <el-option label="业绩创建时间" value="2"></el-option>
          <el-option label="首次入仓时间" value="3"></el-option>
        </el-select>
        <el-date-picker
          v-model="queryParams.sdate1"
          type="date"
          value-format="yyyy-MM-dd"
          clearable
          placeholder="请输入起始日期"
        />
        <el-date-picker
          v-model="queryParams.edate1"
          type="date"
          value-format="yyyy-MM-dd"
          clearable
          placeholder="请输截止日期"
        />
      </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-button
          type="warning"
          plain
          icon="el-icon-download"
          size="mini"
          @click="handleExport"
          :loading="exportLoading"
          v-show="objEcwReportPermission.exportdataq == 1"
          >导出</el-button
        >
      </el-form-item>
    </el-form>
    <el-row>
      <el-col :span="24" class="card-box">
        <el-card>
          <div class="el-table el-table--enable-row-hover el-table--medium">
            <table cellspacing="0" style="width: 100%">
              <tbody>
                <tr>
                  <td><div class="cell"></div></td>
                  <td>
                    <div class="cell">
                      总箱数：{{ StatisticalSummary.sumBox }}
                    </div>
                  </td>
                  <td>
                    <div class="cell">
                      总方数：{{ StatisticalSummary.sumM3 }}
                    </div>
                  </td>
                  <td>
                    <div class="cell">
                      总重量：{{ StatisticalSummary.sumKG }}
                    </div>
                  </td>
                  <td>
                    <div class="cell">总V值：{{ StatisticalSummary.sumV }}</div>
                  </td>
                </tr>
                <tr>
                  <td><div class="cell">新客户</div></td>
                  <td>
                    <div class="cell">
                      总箱数：{{ StatisticalSummary.sumBoxNew }}
                    </div>
                  </td>
                  <td>
                    <div class="cell">
                      总方数：{{ StatisticalSummary.sumM3New }}
                    </div>
                  </td>
                  <td>
                    <div class="cell">
                      总重量：{{ StatisticalSummary.sumKGNew }}
                    </div>
                  </td>
                  <td>
                    <div class="cell">
                      总V值：{{ StatisticalSummary.sumVNew }}
                    </div>
                  </td>
                </tr>
                <tr>
                  <td><div class="cell">旧客户</div></td>
                  <td>
                    <div class="cell">
                      总箱数：{{ StatisticalSummary.sumBoxOld }}
                    </div>
                  </td>
                  <td>
                    <div class="cell">
                      总方数：{{ StatisticalSummary.sumM3Old }}
                    </div>
                  </td>
                  <td>
                    <div class="cell">
                      总重量：{{ StatisticalSummary.sumKGOld }}
                    </div>
                  </td>
                  <td>
                    <div class="cell">
                      总V值：{{ StatisticalSummary.sumVOld }}
                    </div>
                  </td>
                </tr>
              </tbody>
            </table>
          </div>
        </el-card>
      </el-col>
    </el-row>
    <!-- 列表 -->
    <el-table v-loading="loading" :data="list">
      <el-table-column label="排名" align="center" prop="px" />
      <el-table-column label="订单编号" align="center" prop="orderNo">
        <template slot-scope="scope">
          <router-link
            :to="{
              path: '/order/detail',
              query: { orderId: scope.row.orderId },
            }"
            class="link-type"
          >
            <span>{{ scope.row.orderNo }}</span>
          </router-link>
        </template>
      </el-table-column>
      <el-table-column label="提单号" align="center" prop="tidanNo">
        <template slot-scope="scope">
          <router-link
            :to="{
              path: '/order/detail',
              query: { orderId: scope.row.orderId },
            }"
            class="link-type"
          >
            <span>{{ scope.row.tidanNo }}</span>
          </router-link>
        </template>
      </el-table-column>
      <el-table-column label="发货人编号" align="center" prop="fhNumber">
        <template slot-scope="{ row }">
          <el-link
            type="primary"
            @click.native="$router.push('/customer/query/' + row.cfCustomerId)"
            >{{ row.fhNumber }}</el-link
          >
        </template>
      </el-table-column>
      <el-table-column label="收货人编号" align="center" prop="shNumber">
        <template slot-scope="{ row }">
          <el-link
            type="primary"
            @click.native="$router.push('/customer/query/' + row.shCustomerId)"
            >{{ row.shNumber }}</el-link
          >
        </template>
      </el-table-column>
      <el-table-column label="客户经理" align="center" prop="salesmanidName">
      </el-table-column>
      <el-table-column label="订单状态" align="center" prop="statusName" />
      <el-table-column label="运输方式" align="center" prop="transportIdName" />
      <el-table-column
        label="始发仓"
        align="center"
        prop="startwarehousename"
      />
      <el-table-column label="目的国" align="center" prop="muDiGuo" />
      <el-table-column label="目的城市" align="center" prop="muDiShi" />
      <el-table-column label="目的仓" align="center" prop="dstwarehousename" />
      <el-table-column label="渠道" align="center" prop="channelidName" />
      <el-table-column label="创建时间" align="center" prop="createtime" />
      <el-table-column
        label="业绩创建时间"
        align="center"
        prop="businesstime"
      />
      <el-table-column
        label="资源类型"
        align="center"
        prop="showResourceType"
      />
      <el-table-column label="业绩类型" align="center" prop="showYeJiType" />
      <el-table-column label="唛头" align="center" prop="marks" />
      <el-table-column label="入仓箱数" align="center" prop="sumquantity" />
      <el-table-column label="体积" align="center" prop="sumvolume" />
      <el-table-column label="重量" align="center" prop="sumweight" />
      <el-table-column label="是否控货" align="center" prop="iscargocontrol" />
      <el-table-column label="重货/泡货" align="center" prop="ordertypeShow" />
      <el-table-column label="重货/泡货标准" align="center" prop="zpUnitShow" />
      <el-table-column label="付款方" align="center" prop="draweeName" />
      <el-table-column label="首次入仓时间" align="center" prop="firstInTime" />
      <el-table-column label="提货率" align="center" prop="showThl">
      </el-table-column>
      <el-table-column label="入仓记录" align="center" prop="orderId">
        <template slot-scope="{ row }">
          <el-link type="primary" @click.native="showWarehouseLogs(row, 1)">
            入仓记录
          </el-link>
        </template>
      </el-table-column>
    </el-table>
    <!-- 分页组件 -->
    <pagination
      v-show="total > 0"
      :total="total"
      :page.sync="queryParams.pageNo"
      :limit.sync="queryParams.pageSize"
      @pagination="getList"
    />

    <warehouse-detail
      :order="order"
      :orderItemId="showWarehouseInItemId"
      :type="type"
      @openPackHistory="openPackHistory"
      v-if="showWarehouseInItemId"
      @close="showWarehouseInItemId = null"
    />
  </div>
</template>
  
  <script>
import UserSelector from "@/components/UserSelector";
import { getCountryListAll } from "@/api/ecw/country";
import Treeselect from "@riophae/vue-treeselect";
import "@/assets/styles/vue-treeselect.css";
import { getWarehouseList } from "@/api/ecw/warehouse";
import {
  getListPage,
  exportExcel,
  getStatisticalSummary,
} from "@/api/report/salesanalysis";
import { getCurUserPermission } from "@/api/report/EcwReportPermission";
import { getAllChannelList, getChannelList } from "@/api/ecw/channel";
import { listSimpleDepts } from "@/api/system/dept";
import { getOrder } from "@/api/ecw/order";
//入仓记录页面
import WarehouseDetail from "@/views/report/WarehouseInDetail/index.vue";

//2024-05-01合并
export default {
  name: "ReportSales_analysisIndex",
  components: {
    UserSelector,
    Treeselect,
    WarehouseDetail,
  },
  data() {
    return {
      // 遮罩层
      loading: true,
      // 导出遮罩层
      exportLoading: false,
      // 显示搜索条件
      showSearch: true,
      // 总条数
      total: 0,
      // 测试列表
      list: [],
      // 弹出层标题
      title: "",
      // 是否显示弹出层
      open: false,
      showDetail: false,
      deptOptions: undefined,
      dateRangeCreateTime: [],
      SearchType: [
        { value: "in", label: "包含" },
        { value: "notin", label: "不包含" },
        { value: "eq", label: "等于" },
        { value: "noeq", label: "不等于" },
      ],
      // 查询参数
      queryParams: {
        pageNo: 1,
        pageSize: 10,
        SearchType3: "eq",
        fhNumber: undefined, //发货客户编号
        SearchType4: "eq",
        shNumber: undefined, //收货客户编号
        startWarehouseId: undefined, //始发仓
        muDiGuo: undefined, //目的国
        muDiShi: undefined, //目的城市
        dstwarehousename: undefined, //目的仓
        transportId: undefined, //运输方式
        SearchType1: "eq", //订单编号查询类型
        orderNo: undefined, //订单编号
        SearchType2: "eq", //提单号的查询类别
        tidanNo: undefined, //提单号
        SearchType5: "in",
        marks: undefined, //唛头
        status: undefined, //订单状态
        salesmanId: undefined, //客户经理
        isCargoControl: undefined, //是否控货
        deptid: undefined, //部门
        drawee: undefined, //付款方
        zpType: undefined, //货物类型，1普货，2重货，3泡货
        YeJiType: undefined, //业绩类型 新客户，老客户
        dateSearch1: undefined, //时间筛选类型
        sdate1: undefined, //开始时间
        edate2: undefined, //结束时间
        dataSearch1: undefined, //数据类型筛选
        dataSearch2: undefined, //比较符号设置
        dataSearch3: undefined, //数据值
      },
      channelList: [],
      countryList: [],
      // 表单参数
      form: {},
      // 表单校验
      rules: {},
      warehouseList: [],
      //报表权限信息
      objEcwReportPermission: {},
      DeptEx: { id: undefined, name: undefined, parentId: undefined },
      showWarehouseInItemId: undefined,
      order: null,
      type: 1,
      StatisticalSummary: {
        sumBox: 0,
        sumM3: 0,
        sumKG: 0,
        sumV: 0,
        sumBoxNew: 0,
        sumM3New: 0,
        sumKGNew: 0,
        sumVNew: 0,
        sumBoxOld: 0,
        sumM3Old: 0,
        sumKGOld: 0,
        sumVOld: 0,
      },
    };
  },
  created() {
    //获取国家列表
    getCountryListAll().then((r) => {
      this.countryList = r.data;
    });
    getAllChannelList().then((res) => (this.channelList = res.data));
    getWarehouseList().then((res) => (this.warehouseList = res.data));
    this.loading = false;
    //获取当前用户报表权限
    getCurUserPermission().then((response) => {
      //复制对象
      Object.assign(this.objEcwReportPermission, response.data);
      if (this.objEcwReportPermission.permissionFw == 1) {
        //只能看自己的，不能选择部门和客户经理
        // this.showCustomsManage = false;
        // this.showDept = false;
      }
      this.getTreeselect();
      this.getList();
    });
  },
  computed: {
    exportWarehouseList() {
      //始发仓列表
      return this.warehouseList.filter(
        (item) => item.tradeType == 2 || item.tradeType == 3
      );
    },
    importWarehouseList() {
      //目的仓列表
      return this.warehouseList.filter(
        (item) => item.tradeType == 1 || item.tradeType == 3
      );
    },
  },
  methods: {
    /** 查询列表 */
    getList() {
      this.loading = true;
      // 处理查询参数
      let params = { ...this.queryParams };
      // 执行查询
      getListPage(params).then((response) => {
        this.list = response.data.list;
        this.total = response.data.total;
        this.loading = false;
      });

      //获取统计数据
      getStatisticalSummary(params).then((response) => {
        this.StatisticalSummary = response.data;
      });
    },

    /** 表单重置 */
    reset() {
      this.form = {
        id: undefined,
        name: undefined,
        empGender: undefined,
        age: undefined,
        email: undefined,
      };
      this.resetForm("form");
    },
    isChinese() {
      //基础函数，判断系统显示语言是中文还是英文
      return this.$i18n.locale === "zh_CN";
    },
    /** 搜索按钮操作 */
    handleQuery() {
      this.queryParams.pageNo = 1;
      this.getList();
    },
    /** 重置按钮操作 */
    resetQuery() {
      this.dateRangeCreateTime = [];
      this.resetForm("queryForm");
      this.handleQuery();
    },
    /** 导出按钮操作 */
    handleExport() {
      // 处理查询参数
      let params = { ...this.queryParams };
      params.pageNo = undefined;
      params.pageSize = undefined;
      // 执行导出
      this.$modal
        .confirm("是否确认导出所有数据?")
        .then(() => {
          this.exportLoading = true;
          return exportExcel(params);
        })
        .then((response) => {
          //this.$download.excel(response, "销售分析数据报表.xls");
          this.exportLoading = false;
          this.$message.success(
            this.$t("已加入导出队列，请稍后在下载日志中下载")
          );
        })
        .catch(() => {});
    },
    // 显示入仓记录
    showWarehouseLogs(row, type) {
      getOrder(row.orderId).then((response) => {
        this.order = response.data;//组件中只用到了此参数
        this.type = 2;
        this.showWarehouseInItemId = 1;
      });
    },
    openPackHistory(id) {
      //查询打包历史
      //this.shopPackId = id
    },
    /** 查询部门下拉树结构 + 岗位下拉 */
    getTreeselect() {
      if (this.objEcwReportPermission.permissionFw == 3) {
        listSimpleDepts().then((response) => {
          // 处理 deptOptions 参数
          this.deptOptions = [];
          this.deptOptions.push(...this.handleTree(response.data, "id"));
        });
      } else if (this.objEcwReportPermission.permissionFw == 2) {
        this.DeptEx.id = this.objEcwReportPermission.deptId;
        getDeptChild(this.DeptEx).then((response) => {
          this.deptOptions = [];
          this.deptOptions.push(...this.handleTree(response.data, "id"));
        });
      }
    },
    normalizer(node) {
      //格式化部门的下拉框
      return {
        id: node.id,
        label: node.name,
        children: node.children,
      };
    },
  },
};
</script>

<style lang="scss" scoped>
.dashboard-editor-container {
  padding: 32px;
  background-color: rgb(240, 242, 245);
  position: relative;

  .chart-wrapper {
    background: #fff;
    padding: 32px 32px 0;
    margin-bottom: 32px;
    margin-left: 32px;
  }
}

@media (max-width: 1024px) {
  .chart-wrapper {
    padding: 8px;
  }
}
/* .my-process-designer {
  height: calc(100vh - 200px);
} */

.box-card {
  width: 100%;
  margin-bottom: 20px;
}
</style>