From 2f8a04943bb267a4503361a60867450ac6a66d5d Mon Sep 17 00:00:00 2001
From: 44673626 <44673626@qq.com>
Date: Fri, 15 Apr 2022 11:27:57 +0800
Subject: [PATCH] =?UTF-8?q?=E6=92=A4=E9=94=80=E5=87=BA=E5=BA=93=E7=95=8C?=
 =?UTF-8?q?=E9=9D=A2=E5=92=8C=E8=87=AA=E5=AE=9A=E4=B9=89=E5=8F=91=E8=B4=A7?=
 =?UTF-8?q?=E7=95=8C=E9=9D=A2?=
MIME-Version: 1.0
Content-Type: text/plain; charset=UTF-8
Content-Transfer-Encoding: 8bit

---
 .../components/ImportExcel-custom/index.vue   | 817 ++++++++++++++++++
 vue/src/router/modules/vw_out_order.js        |  12 +-
 vue/src/router/modules/wms_out_order.js       |  20 +-
 .../WMSOutputDetailCancelDiff/index.vue       | 808 +++++++++++++++++
 .../billManage/WMSOutputSumReport/index.vue   |   4 +-
 .../ux/billManage/wmsCusomerKanban/detail.vue | 734 ++++++++++++++++
 .../ux/billManage/wmsCusomerKanban/index.vue  | 430 +++++++++
 vue/src/views/ux/vw/dataInput/hq_h/index.vue  |   2 +-
 .../views/ux/vw/dataInput/hq_open/index.vue   |   4 +-
 vue/src/views/ux/vw/dataInput/hq_y/index.vue  |   4 +-
 vue/static/tableFieldForSearch.json           |  38 +-
 11 files changed, 2854 insertions(+), 19 deletions(-)
 create mode 100644 vue/src/components/ImportExcel-custom/index.vue
 create mode 100644 vue/src/views/ux/billManage/WMSOutputDetailCancelDiff/index.vue
 create mode 100644 vue/src/views/ux/billManage/wmsCusomerKanban/detail.vue
 create mode 100644 vue/src/views/ux/billManage/wmsCusomerKanban/index.vue

diff --git a/vue/src/components/ImportExcel-custom/index.vue b/vue/src/components/ImportExcel-custom/index.vue
new file mode 100644
index 00000000..f17d38a1
--- /dev/null
+++ b/vue/src/components/ImportExcel-custom/index.vue
@@ -0,0 +1,817 @@
+<template>
+  <el-dialog
+    :visible="show"
+    :title="'导入' + crmTypeName"
+    :append-to-body="true"
+    :close-on-click-modal="false"
+    width="600px"
+    @close="closeView"
+  >
+    <el-tabs
+      v-model="activeName"
+      :class="stepsActive == 1 ? '' : 'el-tabs__active-go'"
+      @tab-click="handleClick"
+    >
+      <el-tab-pane
+        label="①文件上传"
+        name="first"
+        :disabled="stepsActive == 2 ? true : false"
+      >
+        <div class="dialog-body">
+          <div v-if="stepsActive == 1" class="step-section">
+            <div class="sections">
+              <div class="sections__title" v-loading="loading">
+                一、导入说明：
+                <span class="download" @click="downloadTemplate"
+                  >点击下载导入模板</span
+                >
+                <div class="sections__tips">
+                  1、提供的导入模板需要.xlsx文件格式！不支持“.xls”文件，即不支持Excel97-2003!
+                </div>
+                <div class="sections__tips">
+                  2、模板名称可以进行修改，但不要删除模板中设置的字段！
+                </div>
+                <div class="sections__tips">
+                  3、导入文件大小请勿超过100MB！且目前只支持单个Sheet页签！
+                </div>
+              </div>
+            </div>
+            <div class="sections">
+              <div class="sections__title">
+                二、导入条件设置（没有则不用设置）
+              </div>
+              <div class="sections__tips">
+                <span class="demonstration">选择版本：</span>
+                <el-select
+                  v-model="versionValue"
+                  clearable
+                  :disabled="isEditFactory"
+                  style="width: 188px"
+                  placeholder="请选择"
+                >
+                  <el-option
+                    v-for="item in factoryList"
+                    :key="item.value"
+                    :label="item.label"
+                    :value="item.value"
+                  ></el-option>
+                </el-select>
+                <span class="demonstration">客户编码：</span>
+                <el-input v-model="customCode" size="small" style="width:150px" placeholder="编码必填" />
+              </div>
+            </div>
+            <div class="sections">
+              <div class="sections__title">三、请选择需要导入的文件</div>
+              <div class="content">
+                <flexbox class="file-select">
+                  <el-upload
+                    ref="upload"
+                    class="avatar-uploader"
+                    drag
+                    action="#"
+                    :http-request="httpRequestfiles"
+                    :headers="httpHeader"
+                    :file-list="fileuploadList"
+                    :before-upload="beforeAvatarUpload"
+                    :before-remove="beforeRemove"
+                    :on-remove="handleRemove"
+                    multiple
+                    :limit="10"
+                  >
+                    <i class="el-icon-upload"></i>
+                    <div class="el-upload__text">
+                      将文件拖到此处，或
+                      <em>点击上传</em>
+                    </div>
+                  </el-upload>
+                </flexbox>
+              </div>
+            </div>
+          </div>
+        </div>
+      </el-tab-pane>
+      <el-tab-pane
+        label="②导入数据"
+        name="second"
+        :disabled="stepsActive == 2 ? false : true"
+      >
+        <div
+          v-loading="loading"
+          v-if="stepsActive == 2"
+          element-loading-text="导入中"
+          element-loading-spinner="el-icon-loading"
+          class="step-section"
+        />
+        <div
+          v-loading="loading"
+          v-else-if="stepsActive == 3"
+          class="step-section"
+        >
+          <div class="result-info">
+            <el-card style="height: 300px; margin-top: -20px" shadow="always">
+              <i class="el-icon-error" />
+              <p class="result-info__detail">
+                <span class="result-info__detail--all"
+                  >{{ this.resultData.successMessage }}
+                </span>
+                <el-button
+                  v-if="this.resultData && this.resultData.errSize > 0"
+                  class="result-info__btn--err"
+                  type="text"
+                  @click="downloadErrData"
+                  >下载错误数据</el-button
+                >
+              </p>
+            </el-card>
+          </div>
+        </div>
+
+        <div v-loading="loading" v-if="stepsActive == 4" class="step-section">
+          <div class="result-info">
+            <el-card style="height: 300px" shadow="always">
+              <i class="el-icon-success" />
+              <p class="result-info__detail">
+                <span class="result-info__detail--all"
+                  >{{ this.resultData.successMessage }}
+                </span>
+              </p>
+              <!-- <p class="result-info__des">数据导入结果：</p>
+            <p class="result-info__detail">
+              导入成功数据
+              <span class="result-info__detail--all"
+                >{{ this.resultData.totalSize }} </span
+              >条有效数据！
+            </p> -->
+            </el-card>
+          </div>
+        </div>
+      </el-tab-pane>
+    </el-tabs>
+    <span slot="footer" class="dialog-footer">
+      <el-popover
+        v-model="historyPopoverShow"
+        placement="top"
+        width="800"
+        popper-class="no-padding-popover"
+        trigger="click"
+      >
+      </el-popover>
+
+      <!-- <el-button  @click="closeView">取消</el-button> -->
+      <el-button :class="{ 'is-hidden': !showCancel }" @click="closeView"
+        >取消</el-button
+      >
+      <el-button v-if="sureTitle" type="primary" @click="sureClick">{{
+        sureTitle
+      }}</el-button>
+    </span>
+  </el-dialog>
+</template>
+
+<script>
+import { downloadFile } from "@/utils/crmindex.js";
+import { getToken } from "@/utils/auth"; // get token from cookie
+
+export default {
+  name: "CRMImport", // 文件导入
+  props: {
+    show: {
+      type: Boolean,
+      default: false,
+    },
+    // CRM类型
+    crmType: {
+      type: String,
+      default: "",
+    },
+  },
+  data() {
+    return {
+      options: [
+        {
+          value: "3",
+          label: "新增",
+        },
+        {
+          value: "0",
+          label: "修改",
+        },
+      ],
+      loading: false,
+      fieldList: [],
+      factoryList: [], //工厂列表
+      YearMonthValue: "", //年度期间选择项
+      yearMonthList: [], //年度期间
+      versionValue: "",
+      customCode: "",
+      stateValue: "",
+      config: 1, // 	1 覆盖，2跳过
+      /** 编辑控制 */
+      isEditFactory: false, // 是否是编辑中
+      isEditYearMont: false, // 是否是编辑中
+      isState: true, // 是否是编辑中
+      //file: { name: "" },
+      stepsActive: 1,
+      stepList: [
+        {
+          icon: "wk wk-upload",
+          title: "上传文件",
+          status: "wait",
+        },
+        {
+          icon: "wk wk-data-import",
+          title: "导入数据",
+          status: "wait",
+        },
+        {
+          icon: "wk wk-success",
+          title: "导入完成",
+          status: "wait",
+        },
+      ],
+      //resultData: null,
+      resultData: {
+        totalSize: 0,
+        errSize: 0,
+        errTemplate: "",
+        errMessage: "",
+        successMessage: "",
+      },
+      processData: {
+        count: 0,
+        status: "",
+      },
+      messageId: null,
+      intervalTimer: null,
+      fileuploadList: [],
+      isLt2M: "",
+      isFileType: "",
+      historyPopoverShow: false,
+      yeareVale: "",
+      monthVale: "",
+      page: 1,
+      listQuery: {
+        Filters: [
+          {
+            logic: 0,
+            column: "project",
+            action: 0,
+            value: "factory",
+          }, //默认查询可用的
+        ],
+        SkipCount: 0,
+        MaxResultCount: 1000,
+      },
+      listQueryCustom: {
+        Filters: [
+          {
+            logic: 0,
+            column: "customerCode",
+            action: 0,
+            value: "U22000",
+          }, //默认查询可用的
+        ],
+        SkipCount: 0,
+        MaxResultCount: 1000,
+      },
+      activeName: "first",
+    };
+  },
+  computed: {
+    sureTitle() {
+      return {
+        1: "立即导入",
+        // 2: "导入中...",
+        // 3: "确定",
+        // 4: "确定",
+      }[this.stepsActive];
+    },
+    showCancel() {
+      return this.stepsActive == 1;
+    },
+    getMoudleDisable() {
+      if (
+        this.crmType == "priceList" ||
+        this.crmType == "spareparts" ||
+        this.crmType == "wmsOutputSum"
+      ) {
+        //只状态可用
+        this.isEditYearMont = true;
+        this.isEditFactory = true;
+        this.isState = false;
+      } else {
+        this.isEditYearMont = false;
+        this.isEditFactory = false;
+      }
+    },
+    crmTypeName() {
+      return (
+        {
+          wmsCusomerKanban: "自定义发货出库",
+        }[this.crmType] || ""
+      );
+    },
+    getWebApi() {
+      return (
+        {
+          wmsCusomerKanban:
+            "/api/settleaccount/WMSCusomerKanbanoutput/ExcelImport", //大众通用看板导入
+        }[this.crmType] || ""
+      );
+    },
+    getImportTemplate() {
+      //模板名称
+      return (
+        {
+          // invoice: "大众发票汇总导入.xlsx",
+          // bomdatabase: "产品结构Bom导入模板.xlsx",
+          // secondaryPriceRatio: "二配价格比例导入模板.xlsx",
+          // factory: "工厂设置模板.xlsx",
+          // materialRelation: "零件匹配关系.xlsx",
+          // carMaterialConfig: "车型代码与零件匹配.xlsx",
+          // materialRelationSupplier: "供应商零件设置表.xlsx",
+          // material: "物料主数据.xlsx",
+          // inventorydetail: "库存明细信息.xlsx",
+          // codeSetting: "通用代码设置数据.xlsx",
+          // estimatedSum: "应付暂估汇总.xlsx",
+          // estimatedInventoryDetail: "应付暂估收货明细.xlsx",
+          // customerStorageLocation: "客户存储地点.xlsx",
+          // secondaryAdjustment: "二配调整输入.xlsx",
+        }[this.crmType] || ""
+      );
+    },
+    httpHeader() {
+      //文件上传时，带token认证信息，提高安全性
+      return {
+        Authorization: "Bearer " + getToken(),
+      };
+    },
+  },
+  watch: {
+    show: function (val) {
+      this.stepsActive = 1;
+      this.getAllYearMonth(); //加载版本
+      this.getMoudleDisable(); //判断设置条件是否可用
+      if (val) {
+        this.stepsActive = 1;
+      } else {
+        if (this.stepsActive == 3) {
+          //以下是重置数据
+          this.stepsActive = 1;
+          this.stepList = [
+            {
+              icon: "wk wk-upload",
+              title: "上传文件",
+              status: "wait",
+            },
+            {
+              icon: "wk wk-data-import",
+              title: "导入数据",
+              status: "wait",
+            },
+            {
+              icon: "wk wk-success",
+              title: "导入完成",
+              status: "wait",
+            },
+          ];
+          this.resultData = null;
+        }
+      }
+    },
+
+    stepsActive() {
+      this.$emit(
+        "status",
+        {
+          1: "wait",
+          2: "process",
+          3: "finish",
+        }[this.stepsActive]
+      );
+    },
+  },
+  mounted() {},
+  methods: {
+    // 下载模板操作
+    downloadTemplate() {
+      this.$axios
+        .posts("/api/settleaccount/getblobfile/saveCustomExcelTemplate")
+        .then((res) => {
+          let downfilename = res;
+          console.log("模板名称" + JSON.stringify(res));
+          this.$axios
+            .BolbGets("/api/settleaccount/getblobfile/download/" + downfilename)
+            .then((response) => {
+              downloadFile(response, downfilename);
+              this.$notify({
+                title: "成功",
+                message: "模板下载成功！",
+                type: "success",
+                duration: 2000,
+              });
+            });
+        })
+        .catch(() => {});
+    },
+    getAllYearMonth() {
+      this.$axios
+        .posts("/api/settleaccount/CentralizedControl/openlist")
+        .then((response) => {
+          this.factoryList = [];
+          response.forEach((element) => {
+            let options = {};
+            options.value = element.version;
+            options.label = element.version;
+            this.factoryList.push(options);
+          });
+        })
+        .catch(() => {
+          this.listLoading = false;
+        });
+    },
+    handleImportExcelClick() {
+      //父组件中，初始化此子组件时调用
+      this.fileuploadList = [];
+      //this.$refs.upload.clearFiles();
+    },
+    httpRequestfiles(data) {
+      let _this = this;
+      let rd = new FileReader(); // 创建文件读取对象
+      let file = data.file;
+      this.fileuploadList.push(file);
+      rd.readAsDataURL(file); // 文件读取装换为base64类型
+    },
+    beforeAvatarUpload(file) {
+      var FileExt = file.name.replace(/.+\./, "");
+      if (["xlsx"].indexOf(FileExt.toLowerCase()) === -1) {
+        this.$message({
+          type: "warning",
+          message: "只支持xlsx类型文件！",
+        });
+        this.isFileType = "0";
+        return false;
+      } else {
+        this.isFileType = "1";
+      }
+      this.isLt2M = file.size / 1024 / 1024 < 100 ? "1" : "0";
+      if (this.isLt2M === "0") {
+        this.$message.error("上传文件大小不能超过 100MB!");
+      }
+      return this.isLt2M === "1" ? true : false;
+    },
+    beforeRemove(file, fileList) {
+      if (this.isLt2M === "1" && this.isFileType === "1") {
+        return this.$confirm(`确定移除 ${file.name}？`);
+      }
+    },
+    handleRemove(file, fileList) {
+      //附件列表删除操作
+      const index = this.fileuploadList.indexOf(file.originFileObj);
+      const newFileList = this.fileuploadList.slice();
+      newFileList.splice(index, 1);
+      this.fileuploadList = newFileList;
+    },
+    //执行按钮
+    sureClick() {
+      if (this.crmType != "priceList" && this.crmType != "spareparts") {
+        if (this.versionValue == "") {
+          this.$message.error("必须选择版本！");
+          return false;
+        }
+      }
+      if (this.customCode == "") {
+        this.$message.error("必须填写客户编码！");
+        return false;
+      }
+      console.log("导入传的条件：" + this.versionValue + this.customCode);
+      if (
+        this.fileuploadList === [] ||
+        JSON.stringify(this.fileuploadList) === "[]"
+      ) {
+        this.$message.error("请选择导入文件");
+        return false;
+      }
+      if (this.stepsActive == 1) {
+        if (this.stepList[0].status == "wait") {
+          this.stepsActive = 2;
+          this.saveTemplateData();
+          this.activeName = "second";
+          console.log(this.crmTypeName);
+          if (this.stepList[1].status == "finish") {
+          }
+        } else {
+          if (this.fileuploadList === "[]") {
+            this.$message.error("请选择导入文件");
+          }
+        }
+      } else {
+        this.closeView();
+      }
+    },
+
+    saveTemplateData() {
+      this.loading = true;
+      //保存项目、合同管理、客户等信息的共用方法
+      //--上传附件，批量或拖拽
+      if (JSON.stringify(this.fileuploadList) != "[]") {
+        let fd = new FormData();
+        const { fileuploadList } = this;
+        fileuploadList.forEach((file) => {
+          fd.append("files", file); // 添加文件
+        });
+        fd.append("branchId", "3FA85F64-5717-4562-B3FC-2C963F66AFA6");
+        fd.append("year", "9999");
+        fd.append("period", "00");
+        fd.append("customerCode", this.customCode);
+        fd.append("factory", this.YearMonthValue);
+        if (this.crmType == "priceList" || this.crmType == "spareparts") {
+          fd.append("version", "202110");
+        } else {
+          fd.append("version", this.versionValue);
+        }
+        const webapi = this.getWebApi;
+        this.$axios
+          .posts(webapi, fd)
+          .then(async (res) => {
+            console.log("大众导入条件：" + JSON.stringify(res));
+            if (res === "Success") {
+              if (this.isLt2M === "1" && this.isFileType === "1") {
+                this.$notify({
+                  title: "成功",
+                  message: "数据导入成功！",
+                  type: "success",
+                  duration: 2000,
+                });
+                this.stepList[1].status = "finish";
+                this.resultData.successMessage = "数据导入成功！";
+                this.stepsActive = 4;
+              }
+            } else {
+              this.stepList[0].status = "wait";
+              this.resultData.errTemplate = res; //指定错误模板名称，作为参数，用于错误模板下载
+              this.resultData.errSize = 1; //保持大于0，用于控制错误数据下载按钮的可不可见
+              this.resultData.successMessage = "数据导入失败！";
+              this.stepsActive = 3;
+            }
+            console.log(this.stepsActive);
+            this.$emit("status", "finish");
+            // this.$nextTick(() => {
+            //   this.loading = false;
+            // });
+            this.loading = false;
+          })
+          .catch(() => {
+            this.stepList[1].status = "finish";
+            this.resultData.errSize = 0;
+            this.resultData.successMessage = "导入模板有错误，请检查！";
+            this.stepsActive = 3;
+            this.loading = false;
+          });
+      } else {
+        this.loading = false;
+        this.$message({
+          message: "未上传任何附件，请查检！",
+          type: "warning",
+        });
+      }
+    },
+
+    /**
+     * 下载错误模板
+     */
+    downloadErrData() {
+      let fileNameOfProject = this.resultData.errTemplate;
+      this.$axios
+        .BolbGets(
+          "/api/settleaccount/getblobfile/download/" + fileNameOfProject
+        )
+        .then((response) => {
+          if (fileNameOfProject.indexOf("_") != -1) {
+            let downName =
+              fileNameOfProject.slice(0, fileNameOfProject.lastIndexOf("_")) +
+              fileNameOfProject.slice(fileNameOfProject.lastIndexOf("."));
+            downloadFile(response, downName);
+            this.$notify({
+              title: "成功",
+              message: "错误数据-导出成功！",
+              type: "success",
+              duration: 2000,
+            });
+          } else {
+            downloadFile(response, fileNameOfProject);
+            this.$notify({
+              title: "成功",
+              message: "错误数据-导出成功！",
+              type: "success",
+              duration: 2000,
+            });
+          }
+          this.listLoading = false;
+        })
+        .catch((error) => {
+          this.listLoading = false;
+        });
+    },
+    // 关闭操作
+    closeView() {
+      this.$emit("update:show", false);
+      this.$emit("close", this.stepsActive == 3 ? "finish" : "");
+      this.activeName = "first";
+    },
+    handleClick(tab) {
+      // console.log(tab.index)
+      // console.log(tab.name)
+      if (tab.name == "first") {
+        //  console.log(tab.name)
+        this.fileuploadList = [];
+        this.stepsActive = 1;
+      }
+    },
+  },
+};
+</script>
+<style scoped lang="scss">
+@import "@/styles/xr-theme.scss";
+/deep/.el-dialog {
+  margin-top: 9vh !important;
+}
+/deep/.el-dialog__body {
+  padding: 20px 20px;
+}
+//Tabs标签Flex布局
+/deep/.el-tabs__nav {
+  width: 100%;
+  display: flex;
+  align-items: center;
+  justify-content: space-around;
+}
+//去掉el-tab-pane底部灰色线条
+/deep/.el-tabs__nav-wrap::after {
+  height: 0 !important;
+}
+//Tabs标签el-tab-pane蓝色下划线
+/deep/.el-tabs__active-bar {
+  left: 90px;
+  width: 90px !important;
+}
+//Tabs标签el-tab-pane蓝色下划线点击录入后样式
+/deep/ .el-tabs__active-go {
+  .el-tabs__active-bar {
+    transform: translateX(297px) !important;
+  }
+}
+
+/deep/.el-tabs__item {
+  padding: 0 20px;
+}
+.el-steps {
+  margin-bottom: 15px;
+
+  /deep/ .el-step__title {
+    font-size: 14px;
+  }
+
+  /deep/ .el-step.is-simple .el-step__arrow::before,
+  /deep/ .el-step.is-simple .el-step__arrow::after {
+    height: 10px;
+    width: 2px;
+  }
+
+  /deep/ .el-step.is-simple .el-step__arrow::after {
+    transform: rotate(45deg) translateY(3px);
+  }
+  /deep/ .el-step.is-simple .el-step__arrow::before {
+    transform: rotate(-45deg) translateY(-2px);
+  }
+}
+
+.step-section {
+  min-height: 250px;
+
+  /deep/ .el-loading-spinner {
+    top: 45%;
+    .el-icon-loading {
+      font-size: 40px;
+      color: #999;
+    }
+
+    .el-loading-text {
+      color: #333;
+    }
+  }
+}
+
+.sections {
+  font-size: 14px;
+  color: #333;
+
+  &__title {
+    font-weight: 600;
+  }
+
+  &__tips {
+    padding-left: 30px;
+    margin: 8px 0 15px;
+    color: #999;
+    font-size: 12px;
+    line-height: 1.4;
+  }
+
+  .download {
+    cursor: pointer;
+    color: #2362fb;
+  }
+}
+
+.sections__tips + .content {
+  padding-top: 0;
+}
+
+.content {
+  padding: 10px 10px 10px 30px;
+  .el-select {
+    width: 400px;
+  }
+  .user-cell {
+    width: 400px;
+  }
+}
+
+#importInputFile {
+  display: none;
+}
+
+.file-select {
+  .el-input {
+    width: 400px;
+  }
+  button {
+    margin-left: 20px;
+  }
+}
+
+.is-hidden {
+  visibility: hidden;
+}
+
+.history-btn {
+  float: left;
+  margin-left: 15px;
+}
+
+// 结果信息
+.result-info {
+  text-align: center;
+  .el-card {
+    border: none;
+    height: 250px !important;
+  }
+  /deep/.el-card__body {
+    padding: 60px 20px 20px 20px;
+  }
+  i {
+    font-size: 60px;
+  }
+  // 错误结果icon
+  .el-icon-error {
+    color: red;
+  }
+  //正确结果icon
+  .el-icon-success {
+    color: chartreuse;
+  }
+
+  &__des {
+    margin-top: -15px;
+    color: #333;
+    font-size: 30px;
+  }
+
+  &__detail {
+    margin-top: 25px;
+    font-size: 20px;
+    color: #666;
+    &--all {
+      color: #333;
+      font-weight: 600;
+    }
+
+    &--suc {
+      color: $xr-color-primary;
+      font-weight: 600;
+    }
+
+    &--err {
+      margin-top: 25px;
+      color: #f94e4e;
+      font-weight: 600;
+    }
+  }
+
+  &__btn--err {
+    margin-top: 10px;
+    font-size: 20px;
+  }
+}
+</style>
\ No newline at end of file
diff --git a/vue/src/router/modules/vw_out_order.js b/vue/src/router/modules/vw_out_order.js
index c451ee38..a703553c 100644
--- a/vue/src/router/modules/vw_out_order.js
+++ b/vue/src/router/modules/vw_out_order.js
@@ -13,7 +13,7 @@ const vwOutOrderDataRouter = {
     index: 0,
     type: 'crm',
     icon: '单据导入',
-    roles: ['SettleAccount.WMSJIT'],
+    roles: ['SettleAccount.WMSJIT','SettleAccount.WMSHQ'],
     keepAlive: false,
   },
   children: [
@@ -67,6 +67,16 @@ const vwOutOrderDataRouter = {
         icon: '文件'
       }
     },
+    {
+      path: 'wms-customer-order',
+      component: () => import('@/views/ux/billManage/wmsCusomerKanban/index'),
+      name: 'WMSCusomerKanban',//命名路由
+      meta: {
+        title: '自定义发货出库单',
+        roles: ['SettleAccount.WMSHQ'],//控制页面角色（可以设置多个角色）
+        icon: '批量'
+      }
+    },
 
 
 
diff --git a/vue/src/router/modules/wms_out_order.js b/vue/src/router/modules/wms_out_order.js
index dc9a3158..a892b0f0 100644
--- a/vue/src/router/modules/wms_out_order.js
+++ b/vue/src/router/modules/wms_out_order.js
@@ -80,16 +80,16 @@ const vwsOutOrderDataRouter = {
       }
     },
 
-    // {
-    //   path: '/wms-unSettledSum',
-    //   component: () => import('@/views/ux/billManage/UnSettledSum'),
-    //   name: 'UnSettledSum',//命名路由
-    //   meta: {
-    //     title: '撤销出库清单',
-    //     roles: ['SettleAccount.WMSJIT'],//控制页面角色（可以设置多个角色） 
-    //     icon: '零件'
-    //   }
-    // },
+    {
+      path: '/wms-cancediff',
+      component: () => import('@/views/ux/billManage/WMSOutputDetailCancelDiff'),
+      name: 'WMSOutputDetailCancelDiff',//命名路由
+      meta: {
+        title: '撤销出库清单',
+        roles: ['SettleAccount.WMSJIT'],//控制页面角色（可以设置多个角色） 
+        icon: '零件'
+      }
+    },
 
 
 
diff --git a/vue/src/views/ux/billManage/WMSOutputDetailCancelDiff/index.vue b/vue/src/views/ux/billManage/WMSOutputDetailCancelDiff/index.vue
new file mode 100644
index 00000000..a38f3200
--- /dev/null
+++ b/vue/src/views/ux/billManage/WMSOutputDetailCancelDiff/index.vue
@@ -0,0 +1,808 @@
+<!--撤销出库单-->
+<template>
+  <div class="cr-body-content">
+    <flexbox class="content-header">
+      <JobSelectVerson
+        :options="JobVersionList"
+        style="width: 150px; margin-left: -10px"
+        class="search-container"
+        @value-change="JobVersionValue"
+      ></JobSelectVerson>
+
+      <el-button
+        class="filter-item"
+        size="mini"
+        type="warning"
+        icon="el-icon-plus"
+        @click="handleCreate"
+        >生成数据
+      </el-button>
+      <el-button
+        class="filter-item"
+        size="mini"
+        type="primary"
+        icon="el-icon-download"
+        @click="handleDownload()"
+        >导出Excel
+      </el-button>
+
+      <el-select
+        v-model="selectClient"
+        clearable
+        @change="SelectClient"
+        placeholder="客户"
+        style="width: 100px; margin-left: 8px"
+      >
+        <el-option label="大众" value="大众"></el-option>
+        <el-option label="红旗" value="红旗"></el-option>
+        <!-- <el-option label="红旗" value="红旗"></el-option> -->
+      </el-select>
+
+      <el-select
+        v-model="selectType"
+        clearable
+        @change="SelectType"
+        placeholder="请选择"
+        style="width: 200px; margin-left: 8px"
+      >
+        <el-option label="大众准时化出库" value="大众准时化出库"></el-option>
+        <el-option label="大众看板出库" value="大众看板出库"></el-option>
+        <el-option
+          label="大众备件条码出库"
+          value="大众备件条码出库"
+        ></el-option>
+        <el-option label="红旗看板出库" value="红旗看板出库"></el-option>
+        <el-option label="大众无看板出库" value="大众无看板出库"></el-option>
+        <el-option
+          label="大众备件汇总出库"
+          value="大众备件汇总出库"
+        ></el-option>
+        <el-option
+          label="红旗一轿手工出库"
+          value="红旗一轿手工出库"
+        ></el-option>
+        <el-option
+          label="红旗一轿手工出库(备件)"
+          value="红旗一轿手工出库(备件)"
+        ></el-option>
+      </el-select>
+
+      <el-input
+        v-model="searchContent"
+        clearable
+        size="small"
+        placeholder="按照结算单号搜索..."
+        style="width: 200px"
+        class="search-container"
+        @keyup.enter.native="handleFilter"
+      />
+      <el-button
+        size="mini"
+        type="success"
+        icon="el-icon-search"
+        @click="handleFilter"
+        >搜索
+      </el-button>
+      <el-button
+        class="filter-item"
+        size="mini"
+        type="warning"
+        icon="el-icon-upload2"
+        v-loading="formLoading1"
+        @click="handleContinueIssue()"
+        >继续撤销
+      </el-button>
+      <!--表格头组件，filter查询-->
+      <c-r-m-table-head
+        ref="crmTableHead"
+        :crm-type="crmType"
+        @handle="handleHandle"
+        @filter="handleFilters"
+      >
+      </c-r-m-table-head>
+    </flexbox>
+    <!--表格渲染-->
+    <el-table
+      ref="multipleTable"
+      v-loading.fullscreen.lock="listLoading"
+      element-loading-text="拼命加载中..."
+      element-loading-spinner="el-icon-loading"
+      class="cr-table"
+      :data="list"
+      :height="tableHeight"
+      :cell-style="cellStyle"
+      :header-cell-style="headerRowStyle"
+      size="small"
+      stripe
+      border
+      highlight-current-row
+      style="width: 100%"
+      @sort-change="sortChange"
+      @selection-change="handleSelectionChange"
+      @row-click="handleRowClick"
+    >
+      <el-table-column type="selection" width="44px"></el-table-column>
+      <el-table-column
+        label="版本"
+        prop="version"
+        sortable="custom"
+        align="center"
+        width="100px"
+        fixed
+      >
+        <template slot-scope="scope">
+          <el-tooltip :content="scope.row.version" placement="top">
+            <span class="link-type">{{ scope.row.version }}</span>
+          </el-tooltip>
+        </template>
+      </el-table-column>
+      <el-table-column
+        v-for="(item, index) in getDefaultField"
+        :key="index"
+        :prop="item.prop"
+        :label="item.label"
+        :min-width="item.width"
+        :formatter="fieldFormatter"
+        sortable="custom"
+        show-overflow-tooltip
+        :gutter="0"
+      >
+        <template slot="header" slot-scope="scope">
+          {{ scope.column.label }}
+        </template>
+      </el-table-column>
+    </el-table>
+    <div class="table-footer">
+      <!-- 分页控件 style="margin-top: -25px;margin-bottom:-25px;float:right;"-->
+      <pagination
+        v-show="totalCount > 0"
+        :total="totalCount"
+        :page.sync="page"
+        :limit.sync="listQuery.MaxResultCount"
+        @pagination="getList"
+      />
+      <!-- 导入Excel组件 -->
+      <importExcel
+        ref="importexcel"
+        :show="showExcelImport"
+        :crmType="crmType"
+        @close="importExcelData"
+      />
+    </div>
+
+    <!--生成任务单渲染-->
+    <el-dialog
+      :visible.sync="dialogFormVisible"
+      :close-on-click-modal="false"
+      :title="formTitle"
+      append-to-body
+      width="680px"
+    >
+      <el-form
+        ref="formCount"
+        :inline="true"
+        :rules="rules"
+        :model="formCount"
+        size="mini"
+      >
+        <el-row>
+          <el-col :md="4" :xs="24">
+            <el-form-item label="选择版本" required />
+          </el-col>
+          <el-col :md="20" :xs="24">
+            <el-form-item prop="versionValue">
+              <el-select
+                v-model="versionValue"
+                size="medium"
+                clearable
+                style="width: 188px; margin-right: 15px"
+                placeholder="请选择"
+              >
+                <el-option
+                  v-for="item in versionList"
+                  :key="item.value"
+                  :label="item.label"
+                  :value="item.value"
+                ></el-option>
+              </el-select>
+            </el-form-item>
+          </el-col>
+        </el-row>
+      </el-form>
+      <div slot="footer" class="dialog-footer">
+        <el-button type="text" @click="dialogFormVisible = false"
+          >取消</el-button
+        >
+        <!-- <el-button @click="resetForm('formCount')">重置</el-button> -->
+        <el-button v-loading="formLoading" type="primary" @click="save"
+          >确认</el-button
+        >
+      </div>
+    </el-dialog>
+  </div>
+</template>
+
+<script>
+import Pagination from "@/components/Pagination"; // secondary package based on el-pagination
+import permission from "@/directive/permission/index.js";
+import importExcel from "@/components/ImportExcel-base";
+import CRMTableHead from "../../components/CRMTableHead";
+import moment from "moment";
+import Lockr from "lockr";
+import { downloadFile } from "@/utils/crmindex.js";
+import JobSelectVerson from "@/components/CreateCom/Job-Select.vue";
+
+export default {
+  name: "WMSOutputDetailCancelDiff",
+  components: { Pagination, CRMTableHead, importExcel, JobSelectVerson },
+  directives: { permission },
+  filters: {
+    IsCustomerSignFilter(status) {
+      //翻译是否签字
+      const statusMap = {
+        true: "是",
+        false: "否",
+      };
+      return statusMap[status];
+    },
+  },
+  props: {
+    customerInfos: {
+      type: Array,
+      default: () => {
+        return [];
+      },
+    },
+  },
+  data() {
+    return {
+      crmType: "wmsOutputCancelDiffReport",
+      versionValue: "",
+      dataValue: "",
+      versionList: [], //版本列表
+      selectClient: "",
+      JobVersionList: [],
+      rules: {
+        //前端定义的规则，后端也有验证
+        erpMaterialCode: [
+          { required: true, message: "必须输入！", trigger: "blur" },
+        ],
+      },
+      searchContent: "", // 输入内容
+      customerInfo: {
+        settleAccountId: "",
+      },
+      form: {
+        dicDetailID: "",
+        customerId: "",
+        projectId: "",
+      },
+      JobversionValue: "",
+      JobversionValueVerson: "",
+      list: null,
+      totalCount: 0,
+      listLoading: true,
+      formLoading: false,
+      formLoading1: false,
+      formCount: {
+        version: undefined,
+        accountDate: undefined,
+      },
+      // 高级搜索
+      filterObj: {
+        type: Object,
+        default: () => {
+          return {};
+        },
+      },
+      listVersionQuery: {
+        SkipCount: 0,
+        MaxResultCount: 15,
+      },
+      listQuery: {
+        Filters: [
+          {
+            logic: 0,
+            column: "Enabled",
+            action: 0,
+            value: "true",
+          }, //默认查询可用的
+        ],
+        //OrgID:"",
+        SkipCount: 0,
+        MaxResultCount: 15,
+        version: "",
+        state: undefined,
+      },
+      listExportQuery: {
+        Filters: [
+          {
+            logic: 0,
+            column: "Enabled",
+            action: 0,
+            value: "true",
+          }, //默认查询可用的
+        ],
+        //OrgID:"",
+        SkipCount: 0,
+        MaxResultCount: 15,
+        version: "",
+        fileType: 0,
+        userId: "",
+        accountDate: undefined,
+      },
+      page: 1,
+      dialogFormVisible: false,
+      dialogAccounDateVisible: false,
+      multipleSelection: [],
+      formTitle: "",
+      drawer: false,
+      showExcelImport: false,
+      tableHeight: document.documentElement.clientHeight - 220,
+      isEdit: false,
+    };
+  },
+  mounted() {
+    var self = this;
+    window.onresize = function () {
+      var offsetHei = document.documentElement.clientHeight;
+      self.tableHeight = offsetHei - 260;
+    };
+  },
+  created() {
+    //生成出库单时选择版本，从期间管理获得
+    this.getAllVersionList();
+    this.getJobVersionInfo();
+    if (this.versionList == []) {
+      this.getList();
+    }
+  },
+  computed: {
+    /** 列表字段 */
+
+    getDefaultField() {
+      var tempsTabs = [];
+      tempsTabs.push({
+        label: "客户",
+        prop: "client",
+        width: 110,
+      });
+      tempsTabs.push({
+        label: "出库类型",
+        prop: "type",
+        width: 150,
+      });
+      tempsTabs.push({ label: "结算单", prop: "billNum", width: 180 });
+      tempsTabs.push({ label: "交货编码", prop: "switchCode", width: 180 });
+
+      tempsTabs.push({ label: "结算数量", prop: "qty", width: 120 });
+      tempsTabs.push({ label: "实际出库数量", prop: "outputQty", width: 150 });
+      tempsTabs.push({ label: "差异数量", prop: "diffQty", width: 120 });
+
+      tempsTabs.push({
+        label: "物料号",
+        prop: "materialCode",
+        width: 140,
+      });
+      tempsTabs.push({
+        label: "物料组编码",
+        prop: "materialGroupCode",
+        width: 150,
+      });
+      tempsTabs.push({
+        label: "物料组(车型)",
+        prop: "materialGroup",
+        width: 200,
+      });
+      tempsTabs.push({ label: "物料组描述", prop: "materialDesc", width: 380 });
+      tempsTabs.push({ label: "备注", prop: "remark1", width: 220 });
+
+      return tempsTabs;
+    },
+  },
+  methods: {
+    //版本下拉列表选择项
+    JobVersionValue(params) {
+      //版本下拉选择
+      this.JobversionValue = params.value;
+      this.getList();
+    },
+    SelectType(params) {
+      this.listQuery.type = params;
+      this.getList();
+    },
+    SelectClient(params) {
+      this.listQuery.client = params;
+      this.getList();
+    },
+    //从期间管理中获取版本数据，生成结算出库用
+    getAllVersionList() {
+      this.$axios
+        .posts("/api/settleaccount/CentralizedControl/openlist")
+        .then((response) => {
+          this.versionList = [];
+          response.forEach((element) => {
+            let options = {};
+            options.value = element.version;
+            options.label = element.version;
+            this.versionList.push(options);
+          });
+        })
+        .catch(() => {
+          this.listLoading = false;
+        });
+    },
+    //取业务版本列表信息
+    getJobVersionInfo() {
+      //this.listLoading = true;
+      this.listQuery.SkipCount = (this.page - 1) * 1000;
+      this.$axios
+        .posts("/api/settleaccount/Job/versionlist", this.listQuery)
+        .then((response) => {
+          let res = response.reverse(); //降序排列
+          this.JobVersionList = [];
+          res.forEach((element, index) => {
+            let options = {};
+            options.value = element;
+            options.label = element;
+            this.JobVersionList.push(options);
+          });
+          if (JSON.stringify(this.JobVersionList) != "[]") {
+            //因版本下拉有默认值，所以详表要自动绑定子表数据
+            this.JobversionValue = this.JobVersionList[0].value;
+            this.JobversionValueVerson = this.JobVersionList[0].label;
+            this.getList();
+          }
+        })
+        .catch(() => {
+          //this.listLoading = false;
+        });
+    },
+    handleCreate() {
+      // this.$nextTick(() => {
+      //   this.$refs["formCount"].resetFields();
+      // });
+      this.JobversionValue = "";
+      this.formTitle = "生成结算出库数据";
+      this.isEdit = false;
+      this.form = {};
+      this.dialogFormVisible = true;
+    },
+    //财务撤销出库
+    handleContinueIssue() {
+      this.formLoading1 = true;
+      var params = [];
+      let alert = "";
+      if (this.multipleSelection.length === 0) {
+        this.$message({
+          message: "至少选择一项！",
+          type: "warning",
+        });
+        return;
+      }
+      this.multipleSelection.forEach((element) => {
+        let id = element.id;
+        params.push(id);
+      });
+      alert = "选中项";
+
+      this.$confirm("是否确认撤销出库" + alert + "?", "提示", {
+        confirmButtonText: "确定",
+        cancelButtonText: "取消",
+        type: "warning",
+      })
+        .then(() => {
+          this.$axios
+            .posts(
+              "/api/settleaccount/WMSOutputDetailCancelDiffReport/ModifyTaskState",
+              params
+            )
+            .then((res) => {
+              if (res == true) {
+                this.$notify({
+                  title: "成功",
+                  message: "出库成功",
+                  type: "success",
+                  duration: 2000,
+                });
+              } else {
+                this.$message({
+                  type: "warning",
+                  message: "执行失败！",
+                });
+              }
+              this.formLoading1 = false;
+              this.getList();
+            });
+        })
+        .catch(() => {
+          this.formLoading1 = false;
+          this.$message({
+            type: "info",
+            message: "已取消操作",
+          });
+        });
+    },
+    //生成出库单数据
+    save() {
+      this.$refs.formCount.validate((valid) => {
+        if (valid) {
+          this.formLoading = true;
+          if (this.versionValue === "") {
+            this.$message.error("必需选择版本！");
+            this.formLoading = false;
+            return;
+          }
+          this.listExportQuery.version = this.versionValue; //版本
+          //this.listExportQuery.accountDate = this.dataValue; //过账日期
+          console.log(
+            "生成出库数据-保存条件：" + JSON.stringify(this.listExportQuery)
+          );
+          this.$axios
+            .gets(
+              "/api/settleaccount/WMSOutputDetailCancelDiffReport/Make",
+              this.listExportQuery
+            )
+            .then((res) => {
+              if (res == "Success") {
+                this.$notify({
+                  title: "成功",
+                  message: "数据生成成功！",
+                  type: "success",
+                  duration: 2000,
+                });
+                this.getList();
+              } else {
+                this.$message({
+                  message: "数据生成失败！",
+                  type: "warning",
+                });
+              }
+              this.formLoading = false;
+              this.dialogFormVisible = false;
+            })
+            .catch(() => {
+              this.formLoading = false;
+              this.dialogFormVisible = false;
+            });
+        }
+      });
+    },
+
+    //导出功能
+    async handleDownload() {
+      this.listLoading = true;
+      // if (this.versionValue === "") {
+      //   this.$message.error("必需选择版本！");
+      //   this.listLoading = false;
+      //   return;
+      // }
+      // if (this.versionValue != "") {
+      //   this.listQuery.version = this.versionValue;
+      // }
+      console.log("撤销出库导出：" + JSON.stringify(this.listQuery));
+      this.$axios
+        .posts(
+          "/api/settleaccount/WMSOutputDetailCancelDiffReport/Export",
+          this.listQuery
+        )
+        .then((res) => {
+          let fileNameOfProject = res;
+          this.$axios
+            .BolbGets(
+              "/api/settleaccount/getblobfile/download/" + fileNameOfProject
+            )
+            .then((response) => {
+              if (fileNameOfProject.indexOf("_") != -1) {
+                let downName =
+                  fileNameOfProject.slice(
+                    0,
+                    fileNameOfProject.lastIndexOf("_")
+                  ) +
+                  fileNameOfProject.slice(fileNameOfProject.lastIndexOf("."));
+                downloadFile(response, downName);
+                this.$notify({
+                  title: "成功",
+                  message: "数据-导出成功！",
+                  type: "success",
+                  duration: 2000,
+                });
+              } else {
+                downloadFile(response, fileNameOfProject);
+                this.$notify({
+                  title: "成功",
+                  message: "数据-导出成功！",
+                  type: "success",
+                  duration: 2000,
+                });
+              }
+              this.listLoading = false;
+            });
+        })
+        .catch(() => {
+          this.listLoading = false;
+        });
+    },
+    selectOptionsChange(item) {
+      this.getList();
+    },
+
+    // handleImportExcel() {
+    //   //导入
+    //   this.showExcelImport = true;
+    //   this.$refs.importexcel.handleImportExcelClick();
+    // },
+    /** 刷新列表 */
+    handleHandle(data) {
+      if (data.type !== "edit") {
+        this.getList();
+      }
+    },
+    /** 格式化字段 */
+    fieldFormatter(row, column) {
+      if (column.property === "state") {
+        return { 0: "新建", 1: "已申请", 2: "成功", 3: "失败" }[
+          row[column.property]
+        ];
+      }
+      if (
+        column.property == "settleInputDate" ||
+        column.property == "settleDate"
+      ) {
+        var date = row[column.property];
+        if (date == undefined) {
+          return "";
+        }
+        return moment(date).format("YYYY-MM-DD HH:mm:ss");
+      }
+      return row[column.property] || "--";
+    },
+    importExcelData() {
+      //this.getVersionInfo();
+      this.listLoading = false;
+      //关闭导入窗体时调用
+      this.showExcelImport = false;
+    },
+
+    getList(data) {
+      this.listLoading = true;
+      //this.listQuery.SkipCount = (this.page - 1) * 10;
+      if (data != undefined) {
+        this.listQuery.SkipCount = (this.page - 1) * data.limit;
+      } else {
+        this.listQuery.SkipCount = (this.page - 1) * 15;
+      }
+      if (this.JobversionValue != "") {
+        this.listQuery.version = this.JobversionValue;
+      }
+      console.log("列表查询条件：" + JSON.stringify(this.listQuery));
+      this.$axios
+        .posts(
+          "/api/settleaccount/WMSOutputDetailCancelDiffReport/WmsDetailReport",
+          this.listQuery
+        )
+        .then((response) => {
+          this.list = response.items;
+          this.totalCount = response.totalCount;
+          setTimeout(() => {
+            //大数据量加载时
+            this.listLoading = false;
+          }, 500);
+        })
+        .catch(() => {
+          this.listLoading = false;
+        });
+    },
+    /** 筛选操作 */
+    handleFilter() {
+      this.page = 1;
+      this.getList();
+      this.listQuery.Filters = [];
+      if (this.searchContent != "") {
+        var column = "billNum";
+        let filter = {
+          logic: 0,
+          column: column,
+          action: 0,
+          value: this.searchContent,
+        };
+        this.listQuery.Filters.push(filter);
+      }
+      this.getList();
+    },
+    /** 多项筛选操作 */
+    /** 筛选操作 */
+    handleFilters(data) {
+      if (data === null) {
+        this.listQuery.Filters = [];
+        this.getList(); //查询所有
+      } else {
+        this.filterObj = data;
+        console.log("筛选" + JSON.stringify(data));
+        var offsetHei = document.documentElement.clientHeight;
+        var removeHeight = Object.keys(this.filterObj).length > 0 ? 310 : 240;
+        this.tableHeight = offsetHei - removeHeight;
+        this.currentPage = 1;
+        let Filter = [];
+        data.forEach((item) => {
+          let filter = {};
+          if (item.formType === "datetime" || item.formType === "datetime") {
+            //日期类型的过滤条件是 (datetime >= a and  datetime <=b)
+            filter["Column"] = item.fieldName;
+            filter["Logic"] = 0;
+            filter["Value"] = item.value[0];
+            filter["Action"] = item.action;
+            Filter.push(filter);
+
+            if (item.value[1] != null) {
+              filter["Value"] = item.value[1];
+              filter["Action"] = 5;
+              Filter.push(filter);
+            }
+          } else {
+            filter["Column"] = item.fieldName;
+            filter["Value"] = item.value;
+            filter["Logic"] = 0;
+            filter["Action"] = item.action;
+            Filter.push(filter);
+          }
+        });
+        console.log("筛选条件" + JSON.stringify(Filter));
+        this.listQuery.Filters = Filter;
+        this.getList();
+      }
+    },
+    resetQuery() {},
+    sortChange(data) {
+      const { prop, order } = data;
+      if (!prop || !order) {
+        this.handleFilter();
+        return;
+      }
+      this.listQuery.Sorting = prop + " " + order;
+      console.log(this.listQuery.Sorting);
+      this.handleFilter();
+    },
+    handleSelectionChange(val) {
+      this.multipleSelection = val;
+    },
+    /** 通过回调控制style */
+    cellStyle({ row, column, rowIndex, columnIndex }) {
+      if (
+        column.property === "qty" ||
+        column.property === "outputQty" ||
+        column.property === "diffQty"
+      ) {
+        return { textAlign: "right" };
+      } else {
+        return { textAlign: "left" };
+      }
+      return { textAlign: "left" };
+    },
+    /** 通过回调控制表头style */
+    headerRowStyle({ row, column, rowIndex, columnIndex }) {
+      if (column.property === "qty") {
+        return { textAlign: "right", background: "#FAFAFA" };
+      } else {
+        return { textAlign: "left", background: "#FAFAFA" };
+      }
+    },
+    handleRowClick(row, column, event) {
+      this.$refs.multipleTable.clearSelection();
+      this.$refs.multipleTable.toggleRowSelection(row);
+    },
+  },
+};
+</script>
+
+
+<style lang="scss" scoped>
+@import "../../styles/crmtable.scss";
+</style>
+<style lang="scss">
+.el-table .cell.el-tooltip {
+  white-space: pre-wrap;
+}
+</style>
+
+
diff --git a/vue/src/views/ux/billManage/WMSOutputSumReport/index.vue b/vue/src/views/ux/billManage/WMSOutputSumReport/index.vue
index 210bac1e..d2e302da 100644
--- a/vue/src/views/ux/billManage/WMSOutputSumReport/index.vue
+++ b/vue/src/views/ux/billManage/WMSOutputSumReport/index.vue
@@ -156,7 +156,7 @@
             type="warning"
             icon="el-icon-upload2"
             @click="handleImportSap()"
-            >同步到SAP
+            >同步WMS至SAP
           </el-button>
         </el-form-item>
         <el-form-item>
@@ -700,7 +700,7 @@ export default {
       //   this.$refs["formCount"].resetFields();
       // });
       this.dataValue = "";
-      this.formTitle = "同步SAP";
+      this.formTitle = "同步MWS至SAP";
       this.isEdit = false;
       this.form = {};
       this.dialogAccounDateVisible = true;
diff --git a/vue/src/views/ux/billManage/wmsCusomerKanban/detail.vue b/vue/src/views/ux/billManage/wmsCusomerKanban/detail.vue
new file mode 100644
index 00000000..47362076
--- /dev/null
+++ b/vue/src/views/ux/billManage/wmsCusomerKanban/detail.vue
@@ -0,0 +1,734 @@
+<!--大众看板出库单-->
+<template>
+  <div class="cr-body-content">
+    <flexbox class="content-header">
+      <JobSelectVerson
+        :options="JobVersionList"
+        style="width: 150px; margin-left: -10px"
+        class="search-container"
+        @value-change="JobVersionValue"
+      ></JobSelectVerson>
+      <el-button
+        class="filter-item"
+        type="success"
+        icon="el-icon-check"
+        size="mini"
+        @click="handleCreateBills()"
+        >确认出库单</el-button
+      >
+      <el-button
+        class="filter-item"
+        size="mini"
+        type="warning"
+        icon="el-icon-download"
+        @click="HandleOutPutCancel()"
+        >取消出库(支持批量)
+      </el-button>
+      <el-button
+        class="filter-item"
+        size="mini"
+        type="danger"
+        icon="el-icon-download"
+        @click="handleDelete()"
+        >删除出库单(支持批量)
+      </el-button>
+      <el-input
+        v-model="searchContent"
+        clearable
+        size="small"
+        placeholder="按照零件号搜索..."
+        style="width: 230px"
+        class="search-container"
+        @keyup.enter.native="handleFilter"
+      />
+      <el-button
+        size="mini"
+        type="success"
+        icon="el-icon-search"
+        @click="handleFilter"
+        >搜索
+      </el-button>
+      <el-button
+        class="filter-item"
+        size="mini"
+        type="info"
+        icon="el-icon-download"
+        @click="handleDownload()"
+        >全部导出
+      </el-button>
+      <!--表格头组件，filter查询-->
+      <c-r-m-table-head
+        ref="crmTableHead"
+        :crm-type="crmType"
+        @handle="handleHandle"
+        @filter="handleFilters"
+      >
+      </c-r-m-table-head>
+    </flexbox>
+    <!--表格渲染-->
+    <el-table
+      ref="multipleTable"
+      v-loading="listLoading"
+      element-loading-text="拼命加载中..."
+      element-loading-spinner="el-icon-loading"
+      class="cr-table"
+      :data="list"
+      :height="tableHeight"
+      :cell-style="cellStyle"
+      :header-cell-style="headerRowStyle"
+      size="small"
+      stripe
+      border
+      highlight-current-row
+      style="width: 100%"
+      @sort-change="sortChange"
+      @selection-change="handleSelectionChange"
+      @row-click="handleRowClick"
+    >
+      <el-table-column type="selection" width="44px"></el-table-column>
+      <el-table-column
+        v-for="(item, index) in getDefaultField"
+        :key="index"
+        :prop="item.prop"
+        :label="item.label"
+        :min-width="item.width"
+        :formatter="fieldFormatter"
+        sortable="custom"
+        show-overflow-tooltip
+        :gutter="0"
+      >
+        <template slot="header" slot-scope="scope">
+          {{ scope.column.label }}
+        </template>
+      </el-table-column>
+    </el-table>
+    <div class="table-footer">
+      <!-- 分页控件 style="margin-top: -25px;margin-bottom:-25px;float:right;"-->
+      <pagination
+        v-show="totalCount > 0"
+        :total="totalCount"
+        :page.sync="page"
+        :limit.sync="listQuery.MaxResultCount"
+        @pagination="getList"
+      />
+    </div>
+    <div>
+      <el-dialog
+        :append-to-body="true"
+        :visible.sync="dialogFormVisible"
+        :title="formTitle"
+        width="700px"
+      >
+        <el-form
+          ref="accountDatelist"
+          :inline="true"
+          :model="accountDatelist"
+          :rules="rules"
+          size="small"
+          label-width="120px"
+        >
+          <el-form-item label="日期" prop="accountDate">
+            <el-date-picker
+              v-model="accountDatelist.accountDate"
+              type="date"
+              clearable
+              placeholder="选择日期"
+            >
+            </el-date-picker>
+          </el-form-item>
+        </el-form>
+
+        <div slot="footer" class="dialog-footer">
+          <el-button type="text" @click="dialogFormVisible = false"
+            >取消</el-button
+          >
+          <el-button v-loading="formLoading" type="primary" @click="save()"
+            >确认</el-button
+          >
+        </div>
+      </el-dialog>
+    </div>
+  </div>
+</template>
+
+<script>
+import Pagination from "@/components/Pagination"; // secondary package based on el-pagination
+import permission from "@/directive/permission/index.js";
+import CRMTableHead from "../../components/CRMTableHead";
+import { downloadFile } from "@/utils/crmindex.js";
+import JobSelectVerson from "@/components/CreateCom/Job-Select.vue";
+
+export default {
+  name: "sendUnsettledDiffReport",
+  components: { Pagination, CRMTableHead, CRMTableHead, JobSelectVerson },
+  directives: { permission },
+  props: {
+    customerInfos: {
+      type: Array,
+      default: () => {
+        return [];
+      },
+    },
+  },
+  data() {
+    return {
+      crmType: "kanbanOutOrder",
+      rules: {
+        //前端定义的规则，后端也有验证
+        erpMaterialCode: [
+          { required: true, message: "必须输入！", trigger: "blur" },
+        ],
+        accountDate: [
+          { required: true, message: "日期必须输入！", trigger: "blur" },
+        ],
+      },
+      searchContent: "", // 输入内容
+      customerInfo: {
+        parentId: "",
+        version: "",
+      },
+      form: {
+        dicDetailID: "",
+        customerId: "",
+        projectId: "",
+      },
+      list: null,
+      totalCount: 0,
+      listLoading: true,
+      formLoading: false,
+      JobVersionList: [
+        { value: "0", label: "未处理" },
+        { value: "1", label: "申请出库" },
+        { value: "2", label: "确认出库" },
+        { value: "3", label: "不能出库" },
+        { value: "4", label: "取消出库" },
+      ],
+      // 高级搜索
+      filterObj: {
+        type: Object,
+        default: () => {
+          return {};
+        },
+      },
+      listQuery: {
+        Filters: [
+          {
+            logic: 0,
+            column: "state",
+            action: 0,
+            value: "0",
+          }, //默认查询可用的
+        ],
+        SkipCount: 0,
+        MaxResultCount: 15,
+        billNum: "",
+      },
+      listOutPutQuery: {
+        accountDate: "",
+        version: "",
+        guids: "",
+        billNum: "",
+      },
+      listDeleteQuery: {
+        billNum: "",
+      },
+      accountDatelist: {
+        accountDate: "",
+      },
+      page: 1,
+      JobversionValue: "",
+      JobversionValueVerson: "",
+      selectJobVersionValue: "",
+      dialogFormVisible: false,
+      multipleSelection: [],
+      formTitle: "",
+      drawer: false,
+      showExcelImport: false,
+      tableHeight: document.documentElement.clientHeight - 230,
+      isEdit: false,
+    };
+  },
+  mounted() {
+    var self = this;
+    window.onresize = function () {
+      var offsetHei = document.documentElement.clientHeight;
+      self.tableHeight = offsetHei - 190;
+    };
+  },
+  created() {
+    this.getList();
+  },
+  watch: {
+    customerInfos: {
+      handler(newVal) {
+        if (newVal == "" || newVal == "undefined") {
+          //TODO
+        } else {
+          newVal.forEach((element) => {
+            this.customerInfo.parentId = element.ParentId;
+            this.customerInfo.version = element.Version;
+          });
+          if (this.customerInfo.parentId != "") {
+            this.getList();
+          }
+        }
+      },
+      immediate: true,
+    },
+  },
+  computed: {
+    /** 列表字段 */
+    getDefaultField() {
+      var tempsTabs = [];
+      tempsTabs.push({
+        label: "版本",
+        prop: "version",
+        width: 110,
+      });
+      tempsTabs.push({
+        label: "客户编码",
+        prop: "customerCode",
+        width: 150,
+      });
+      tempsTabs.push({ label: "看板编号", prop: "kanban", width: 180 });
+      tempsTabs.push({ label: "交货单号", prop: "wmsBillNum", width: 150 });
+      tempsTabs.push({
+        label: "物料组(车型)",
+        prop: "materialGroup",
+        width: 220,
+      });
+      tempsTabs.push({
+        label: "SAP零件号",
+        prop: "sapMaterialCode",
+        width: 120,
+      });
+      tempsTabs.push({
+        label: "零件中文名称",
+        prop: "materialDesc",
+        width: 250,
+      });
+      tempsTabs.push({ label: "结算数量", prop: "qty", width: 100 });
+      tempsTabs.push({ label: "结算单价", prop: "price", width: 100 });
+      tempsTabs.push({ label: "结算金额", prop: "amt", width: 100 });
+      tempsTabs.push({ label: "单据", prop: "billNum", width: 100 });
+      tempsTabs.push({ label: "状态", prop: "state", width: 100 });
+      return tempsTabs;
+    },
+  },
+  methods: {
+    //导出全部功能
+    handleDownload(command) {
+      this.listLoading = true;
+      this.listOutPutQuery.version = this.customerInfo.version;
+      this.listOutPutQuery.billNum = this.customerInfo.parentId;
+
+      console.log("导出：" + JSON.stringify(this.listOutPutQuery));
+      this.$axios
+        .posts(
+          "/api/settleaccount/WMSCusomerKanbanoutput/Export",
+          this.listOutPutQuery
+        )
+        .then((res) => {
+          let fileNameOfProject = res;
+          this.$axios
+            .BolbGets(
+              "/api/settleaccount/getblobfile/download/" + fileNameOfProject
+            )
+            .then((response) => {
+              if (fileNameOfProject.indexOf("_") != -1) {
+                let downName =
+                  fileNameOfProject.slice(
+                    0,
+                    fileNameOfProject.lastIndexOf("_")
+                  ) +
+                  fileNameOfProject.slice(fileNameOfProject.lastIndexOf("."));
+                downloadFile(response, downName);
+                this.$notify({
+                  title: "成功",
+                  message: "数据-导出成功！",
+                  type: "success",
+                  duration: 2000,
+                });
+              } else {
+                downloadFile(response, fileNameOfProject);
+                this.$notify({
+                  title: "成功",
+                  message: "数据-导出成功！",
+                  type: "success",
+                  duration: 2000,
+                });
+              }
+              this.listLoading = false;
+            });
+        });
+    },
+    //版本下拉列表选择项
+    JobVersionValue(params) {
+      //版本下拉选择
+      this.listQuery.Filters = [];
+      var column = "state";
+      let filter = {
+        logic: 0,
+        column: column,
+        action: 0,
+        value: params.value,
+      };
+      this.selectJobVersionValue = params.value;
+      this.listQuery.Filters.push(filter);
+      this.getList();
+    },
+    save(row) {
+      if (this.formTitle == "撤销出库") {
+        this.CancelBills(row);
+      } else if (this.formTitle == "创建出库单") {
+        this.saveBills(row);
+      }
+    },
+    //弹出出库单界面
+    handleCreateBills() {
+      this.dialogFormVisible = true;
+      if (this.$refs["accountDatelist"] !== undefined) {
+        this.$refs["accountDatelist"].resetFields();
+      }
+      this.formTitle = "创建出库单";
+    },
+    //撤销出库
+    HandleOutPutCancel() {
+      if (this.multipleSelection.length == 0) {
+        this.$message({
+          message: "至少选择一行！",
+          type: "warning",
+        });
+        return;
+      }
+      let myalert = "选中项"; //声明变量，其变量必须在此声明后使用
+      this.$confirm("是否确认取消出库" + myalert + "?", "提示", {
+        confirmButtonText: "确定",
+        cancelButtonText: "取消",
+        type: "warning",
+      })
+        .then(() => {
+          this.dialogFormVisible = true;
+          if (this.$refs["accountDatelist"] !== undefined) {
+            this.$refs["accountDatelist"].resetFields();
+          }
+          this.formTitle = "撤销出库";
+        })
+        .catch(() => {
+          this.$message({
+            type: "info",
+            message: "已取消操作",
+          });
+        });
+    },
+    //保存出库单
+    saveBills(row) {
+      this.listOutPutQuery.guids = [];
+      this.listOutPutQuery.version = this.customerInfo.version;
+      this.listOutPutQuery.billNum = this.customerInfo.parentId;
+      if (this.accountDatelist.accountDate == "") {
+        this.$message({
+          message: "请选择日期！",
+          type: "warning",
+        });
+        return;
+      } else {
+        if (this.accountDatelist != "") {
+          this.listOutPutQuery.accountDate = this.accountDatelist.accountDate;
+        }
+        //this.listOutPutQuery.accountDate = this.accountDatelist;
+        console.log("确认出库条件：" + JSON.stringify(this.listOutPutQuery));
+
+        this.$axios
+          .posts(
+            "/api/settleaccount/WMSCusomerKanbanoutput/WmsCustomerKanbanOutPut-Pass",
+            this.listOutPutQuery
+          )
+          .then((response) => {
+            const index = this.list.indexOf(row);
+            this.$notify({
+              title: "成功",
+              message: "生成成功",
+              type: "success",
+              duration: 2000,
+            });
+            this.accountDatelist.accountDate = "";
+            this.dialogFormVisible = false;
+            this.getList();
+            this.formLoading = false;
+          })
+          .catch(() => {
+            this.formLoading = false;
+          });
+      }
+    },
+    //取消出库单
+    CancelBills(row) {
+      if (this.accountDatelist.accountDate == "") {
+        this.$message({
+          message: "请选择日期！",
+          type: "warning",
+        });
+        return;
+      }
+      var params = [];
+      if (row) {
+        //单行
+        params.push(row.id);
+      } else {
+        //多选
+        this.multipleSelection.forEach((element) => {
+          let id = element.id;
+          params.push(id);
+        });
+      }
+      this.listOutPutQuery.version = this.customerInfo.version;
+      this.listOutPutQuery.guids = params;
+      this.listOutPutQuery.billNum = this.customerInfo.parentId;
+      this.listOutPutQuery.accountDate = this.accountDatelist.accountDate;
+      console.log("取消出库条件：" + JSON.stringify(this.listOutPutQuery));
+
+      this.$axios
+        .posts(
+          "/api/settleaccount/WMSCusomerKanbanoutput/WmsCustomerKanbanOutPut-Cancel",
+          this.listOutPutQuery
+        )
+        .then((response) => {
+          const index = this.list.indexOf(row);
+          this.$notify({
+            title: "成功",
+            message: "操作成功",
+            type: "success",
+            duration: 2000,
+          });
+          this.accountDatelist.accountDate = "";
+          this.dialogFormVisible = false;
+          this.getList();
+          this.formLoading = false;
+        })
+        .catch(() => {
+          this.formLoading = false;
+          this.$message({
+            type: "info",
+            message: "调用服务出错！",
+          });
+        });
+    },
+
+    //删除出库单
+    handleDelete(row) {
+      var params = [];
+      let myalert = ""; //声明变量，其变量必须在此声明后使用
+      if (row) {
+        //单行
+        params.push(row.id);
+        myalert = row.name;
+      } else {
+        //多选
+        this.multipleSelection.forEach((element) => {
+          let id = element.id;
+          params.push(id);
+        });
+        myalert = "选中项";
+      }
+      this.listDeleteQuery.billNum = this.listQuery.billNum;
+      console.log("单据号：" + JSON.stringify(this.listDeleteQuery));
+      this.$confirm("是否删除" + myalert + "?", "提示", {
+        confirmButtonText: "确定",
+        cancelButtonText: "取消",
+        type: "warning",
+      })
+        .then(() => {
+          this.$axios
+            .posts(
+              "/api/settleaccount/WMSCusomerKanbanoutput/WmsOutPutDelete",
+              this.listDeleteQuery
+            )
+            .then((response) => {
+              const index = this.list.indexOf(row);
+              this.$notify({
+                title: "成功",
+                message: "删除成功",
+                type: "success",
+                duration: 2000,
+              });
+              this.getList();
+            });
+        })
+        .catch(() => {
+          this.$message({
+            type: "info",
+            message: "已取消操作",
+          });
+        });
+    },
+    /** 刷新列表 */
+    handleHandle(data) {
+      if (data.type !== "edit") {
+        this.getList();
+      }
+    },
+    /** 格式化字段 */
+    fieldFormatter(row, column) {
+      if (column.property == "state") {
+        return {
+          0: "未处理",
+          1: "申请出库",
+          2: "确认出库",
+          3: "不能出库",
+          4: "取消出库",
+        }[row[column.property]];
+      }
+      return row[column.property] || "--";
+    },
+    importExcelData() {
+      //关闭导入窗体时调用
+      this.showExcelImport = false;
+      this.getList();
+    },
+
+    getList(data) {
+      this.listLoading = true;
+      if (data != undefined) {
+        this.listQuery.SkipCount = (this.page - 1) * data.limit;
+      } else {
+        this.listQuery.SkipCount = (this.page - 1) * 15;
+      }
+      this.listQuery.billNum = this.customerInfo.parentId;
+
+      let filter = {
+        Column: "state",
+        Value: this.selectJobVersionValue,
+        Logic: 0,
+        Action: 0,
+      };
+      this.listQuery.Filters.push(filter);
+      console.log("查询条件：" + JSON.stringify(this.listQuery));
+      this.$axios
+        .posts(
+          "/api/settleaccount/WMSCusomerKanbanoutput/WmsCustomerKanbanDetailList",
+          this.listQuery
+        )
+        .then((response) => {
+          this.list = response.items;
+          //alert(JSON.stringify(response.Items))
+          this.totalCount = response.totalCount;
+          setTimeout(() => {
+            //大数据量加载时
+            this.listLoading = false;
+          }, 500);
+        })
+        .catch(() => {
+          this.listLoading = false;
+        });
+    },
+    /** 筛选操作 */
+    handleFilter() {
+      this.page = 1;
+      this.getList();
+      this.listQuery.Filters = [];
+      if (this.searchContent != "") {
+        var column = "materialCode";
+        let filter = {
+          logic: 0,
+          column: column,
+          action: 6,
+          value: this.searchContent,
+        };
+        this.listQuery.Filters.push(filter);
+      }
+      this.getList();
+    },
+    /** 多项筛选操作 */
+    /** 筛选操作 */
+    handleFilters(data) {
+      if (data === null) {
+        this.listQuery.Filters = [];
+        this.getList(); //查询所有
+      } else {
+        this.filterObj = data;
+        console.log("筛选" + JSON.stringify(data));
+        var offsetHei = document.documentElement.clientHeight;
+        var removeHeight = Object.keys(this.filterObj).length > 0 ? 310 : 240;
+        this.tableHeight = offsetHei - removeHeight;
+        this.currentPage = 1;
+        let Filter = [];
+        data.forEach((item) => {
+          let filter = {};
+          if (item.formType === "datetime" || item.formType === "datetime") {
+            //日期类型的过滤条件是 (datetime >= a and  datetime <=b)
+            filter["Column"] = item.fieldName;
+            filter["Logic"] = 0;
+            filter["Value"] = item.value[0];
+            filter["Action"] = item.action;
+            Filter.push(filter);
+
+            if (item.value[1] != null) {
+              filter["Value"] = item.value[1];
+              filter["Action"] = 5;
+              Filter.push(filter);
+            }
+          } else {
+            filter["Column"] = item.fieldName;
+            filter["Value"] = item.value;
+            filter["Logic"] = 0;
+            filter["Action"] = item.action;
+            Filter.push(filter);
+          }
+        });
+        console.log("筛选条件" + JSON.stringify(Filter));
+        this.listQuery.Filters = Filter;
+        this.getList();
+      }
+    },
+    resetQuery() {},
+
+    sortChange(data) {
+      const { prop, order } = data;
+      if (!prop || !order) {
+        this.handleFilter();
+        return;
+      }
+      this.listQuery.Sorting = prop + " " + order;
+      this.handleFilter();
+    },
+    handleSelectionChange(val) {
+      this.multipleSelection = val;
+    },
+    /** 通过回调控制style */
+    cellStyle({ row, column, rowIndex, columnIndex }) {
+      if (
+        column.property === "fisQty" ||
+        column.property === "diffQty" ||
+        column.property === "stockQty"
+      ) {
+        return { textAlign: "right" };
+      } else {
+        return { textAlign: "left" };
+      }
+    },
+    /** 通过回调控制表头style */
+    headerRowStyle({ row, column, rowIndex, columnIndex }) {
+      if (
+        column.property === "fisQty" ||
+        column.property === "diffQty" ||
+        column.property === "stockQty"
+      ) {
+        return { textAlign: "right", background: "#FAFAFA" };
+      } else {
+        return { textAlign: "left", background: "#FAFAFA" };
+      }
+    },
+    handleRowClick(row, column, event) {
+      this.$refs.multipleTable.clearSelection();
+      this.$refs.multipleTable.toggleRowSelection(row);
+    },
+  },
+};
+</script>
+
+
+<style lang="scss" scoped>
+@import "../../styles/crmtable.scss";
+</style>
+
diff --git a/vue/src/views/ux/billManage/wmsCusomerKanban/index.vue b/vue/src/views/ux/billManage/wmsCusomerKanban/index.vue
new file mode 100644
index 00000000..d183fdc2
--- /dev/null
+++ b/vue/src/views/ux/billManage/wmsCusomerKanban/index.vue
@@ -0,0 +1,430 @@
+<!--大众通用代码出库单-->
+<template>
+  <div class="cr-body-content">
+    <flexbox class="content-header">
+      <el-input
+        v-model="searchContent"
+        clearable
+        size="small"
+        placeholder="按照单据号搜索..."
+        style="width: 200px"
+        class="search-container"
+        @keyup.enter.native="handleFilter"
+      />
+      <el-button
+        size="mini"
+        type="success"
+        icon="el-icon-search"
+        @click="handleFilter"
+        >搜索
+      </el-button>
+      <el-button
+        class="filter-item"
+        size="mini"
+        type="warning"
+        icon="el-icon-upload2"
+        @click="handleImportExcel()"
+        >导入文件(Excel)
+      </el-button>
+    </flexbox>
+    <!--表格渲染-->
+    <el-table
+      ref="multipleTable"
+      v-loading="listLoading"
+      element-loading-text="拼命加载中..."
+      element-loading-spinner="el-icon-loading"
+      class="cr-table"
+      :data="list"
+      :height="tableHeight"
+      :cell-style="cellStyle"
+      size="small"
+      stripe
+      border
+      highlight-current-row
+      style="width: 100%"
+      @sort-change="sortChange"
+      @selection-change="handleSelectionChange"
+      @row-click="handleRowClick"
+      @cell-dblclick="dblhandleCurrentChange"
+    >
+      <el-table-column
+        label="单据号"
+        prop="billNum"
+        sortable="custom"
+        align="center"
+        width="250px"
+      >
+        <template slot-scope="scope">
+          <el-tooltip :content="scope.row.billNum" placement="bottom-end">
+            <span class="link-type" @click="handleDrawerOpen(scope.row)">{{
+              scope.row.billNum
+            }}</span>
+          </el-tooltip>
+        </template>
+      </el-table-column>
+      <!-- <el-table-column type="selection" width="44px"></el-table-column> -->
+      <el-table-column
+        v-for="(item, index) in getDefaultField"
+        :key="index"
+        :prop="item.prop"
+        :label="item.label"
+        :min-width="item.width"
+        :formatter="fieldFormatter"
+        sortable="custom"
+        show-overflow-tooltip
+        :gutter="0"
+      >
+        <template slot="header" slot-scope="scope">
+          {{ scope.column.label }}
+        </template>
+      </el-table-column>
+
+      <el-table-column label="备注" width="400" align="center">
+        <template slot-scope="scope">
+          <el-input
+            ref="inputRef"
+            v-if="scope.row.isEditCell"
+            v-model="scope.row.remark"
+            class="el-input"
+            v-focus
+            @blur="cellBlur(scope.row, scope.column)"
+          />
+          <span v-else>{{ scope.row.remark }}</span>
+          <el-button
+            style="margin-left: 5px"
+            v-if="scope.row.isEditCell"
+            type="success"
+            icon="el-icon-check"
+            size="small"
+            circle
+            @click="submitName(scope.row)"
+          ></el-button>
+          <el-button
+            v-show="scope.row.isEditCell"
+            class="cancel-btn"
+            size="mini"
+            icon="el-icon-refresh"
+            type="warning"
+            @click.native.prevent="handleCancel(scope.row)"
+          >
+            cancel
+          </el-button>
+        </template>
+      </el-table-column>
+    </el-table>
+    <div class="table-footer">
+      <!-- 分页控件 style="margin-top: -25px;margin-bottom:-25px;float:right;"-->
+      <pagination
+        v-show="totalCount > 0"
+        :total="totalCount"
+        :page.sync="page"
+        :limit.sync="listQuery.MaxResultCount"
+        @pagination="getList"
+      />
+      <!-- 导入Excel组件 -->
+      <importExcel
+        ref="importexcel"
+        :show="showExcelImport"
+        :crmType="crmType"
+        @close="importExcelData"
+      />
+      <!-- 抽屉控件 -->
+      <el-drawer
+        title="信息详细页"
+        size="75%"
+        direction="rtl"
+        :visible.sync="drawer"
+        :before-close="handleDrawerClose"
+      >
+        <div>
+          <Detail
+            v-bind:customerInfos="customerInfos"
+            style="margin-top: -35px"
+          ></Detail>
+        </div>
+      </el-drawer>
+    </div>
+  </div>
+</template>
+
+<script>
+import Pagination from "@/components/Pagination"; // secondary package based on el-pagination
+import permission from "@/directive/permission/index.js";
+import Detail from "./detail";
+import moment from "moment";
+import importExcel from "@/components/ImportExcel-custom";
+import { formatTimeToTimestamp } from "@/utils/index";
+
+export default {
+  name: "WMSCusomerKanban",
+  components: { Pagination, Detail,importExcel },
+  directives: { permission },
+  data() {
+    return {
+      crmType: "wmsCusomerKanban",
+      rules: {
+        // version: [{ required: true, message: "必须输入！", trigger: "change" }],
+        // beginTime: [{ required: true, message: "选择日期！", trigger: "change" }],
+        // endTime: [{ required: true, message: "选择日期！", trigger: "change" }],
+      },
+      customerInfos: [],
+      searchContent: "", // 输入内容
+      drawer: false,
+      form: {
+        version: "",
+        customerCode: "",
+        customerName: "",
+        beginTime: "",
+        endTime: "",
+      },
+      versionValue: "",
+      versionList: [],
+      startTimeVale: "",
+      endTimeVale: "",
+      list: null,
+      totalCount: 0,
+      listLoading: true,
+      formLoading: false,
+      // 高级搜索
+      filterObj: {
+        type: Object,
+        default: () => {
+          return {};
+        },
+      },
+      listQuery: {
+        Filters: [
+          {
+            logic: 0,
+            column: "Enabled",
+            action: 0,
+            value: "true",
+          }, //默认查询可用的
+        ],
+        //OrgID:"",
+        SkipCount: 0,
+        MaxResultCount: 15,
+      },
+      page: 1,
+      dialogFormVisible: false,
+      multipleSelection: [],
+      formTitle: "",
+      drawer: false,
+      showExcelImport: false,
+      tableHeight: document.documentElement.clientHeight - 200,
+      isEdit: false,
+    };
+  },
+  mounted() {
+    var self = this;
+    window.onresize = function () {
+      var offsetHei = document.documentElement.clientHeight;
+      self.tableHeight = offsetHei - 200;
+    };
+  },
+  created() {
+    this.getList();
+    //this.getVersionInfo();
+  },
+  computed: {
+    /** 列表字段 */
+    getDefaultField() {
+      var tempsTabs = [];
+      tempsTabs.push({
+        label: "版本",
+        prop: "version",
+        width: 120,
+      });
+      tempsTabs.push({ label: "客户编码", prop: "customerCode", width: 150 });
+      tempsTabs.push({ label: "创建人", prop: "creator", width: 160 });
+      tempsTabs.push({ label: "创建时间", prop: "creationTime", width: 160 });
+      //tempsTabs.push({ label: "备注", prop: "remark", width: 120 });
+      return tempsTabs;
+    },
+  },
+  methods: {
+     dblhandleCurrentChange(row, column, cell, event) {
+      if (column.label === "备注") {
+        row.isEditCell = true;
+        this.$set(row, "isEditCell", true);
+        this.$nextTick(() => {
+          this.$refs["inputRef"].focus();
+        });
+      }
+      this.list = this.list.filter((item) => {
+        return item;
+      });
+    },
+    // 可以编辑框失去焦点
+    cellBlur(row, column) {
+      row.isEditCell = false;
+      this.$set(row, "isEditCell", false);
+    },
+    // 在线编辑中提交
+    submitName(row) {
+      let getguid = row.id;
+      let getremark = row.remark;
+      this.$axios
+        .gets("/api/settleaccount/WMSCusomerKanbanoutput/UpdateRemark", {
+          id: getguid,
+          remark: getremark,
+        })
+        .then((response) => {
+          if (response == true) {
+            this.$notify({
+              title: "成功",
+              message: "更新成功",
+              type: "success",
+              duration: 2000,
+            });
+            this.getList();
+          }
+        })
+        .catch(() => {
+          this.listLoading = false;
+        });
+    },
+    // 取消
+    handleCancel(row) {
+      row.isEditCell = false;
+      //row.stockQty = row.originalstockQty;
+      this.$set(row, "isEditCell", false);
+      // this.$message({
+      //   message: "取消后，恢复当前原值！",
+      //   type: "warning",
+      // });
+      this.getList();
+    },
+    handleImportExcel() {
+      //导入
+      this.showExcelImport = true;
+      this.$refs.importexcel.handleImportExcelClick();
+    },
+    getVersionInfo() {
+      //取版本列表信息
+      this.listLoading = true;
+      this.listQuery.SkipCount = (this.page - 1) * 1000;
+      this.$axios
+        .posts("/api/settleaccount/CentralizedControl/openlist")
+        .then((response) => {
+          this.versionList = [];
+          response.forEach((element) => {
+            let options = {};
+            options.value = element.version;
+            options.label = element.version;
+            this.versionList.push(options);
+          });
+        })
+        .catch(() => {
+          this.listLoading = false;
+        });
+    },
+    //抽屉
+    handleDrawerOpen(param) {
+      this.drawer = true;
+      var parentId = param.billNum; //单据号
+      var version = param.version; //版本
+      this.customerInfos = [
+        {
+          ParentId: parentId,
+          Version: version,
+        },
+      ];
+    },
+    handleDrawerClose(done) {
+      done();
+    },
+    /** 格式化字段 */
+    fieldFormatter(row, column) {
+      if (column.property == "creationTime") {
+        var date = row[column.property];
+        if (date == undefined) {
+          return "";
+        }
+        return moment(date).format("YYYY-MM-DD HH:mm:ss");
+      }
+      if (column.property == "state") {
+        return { 0: "已提交", 1: "已出库", 2: "不能出库" }[
+          row[column.property]
+        ];
+      }
+      return row[column.property] || "--";
+    },
+    importExcelData() {
+      //关闭导入窗体时调用
+      this.showExcelImport = false;
+      this.getList();
+    },
+    getList(data) {
+      this.listLoading = true;
+      if (data != undefined) {
+        this.listQuery.SkipCount = (this.page - 1) * data.limit;
+      } else {
+        this.listQuery.SkipCount = (this.page - 1) * 15;
+      }
+      this.$axios
+        .posts("/api/settleaccount/WMSCusomerKanbanoutput/WmsCustomerKanbanList", this.listQuery)
+        .then((response) => {
+          this.list = response.items;
+          //alert(JSON.stringify(response.Items))
+          this.totalCount = response.totalCount;
+           //动态加一个是否编辑的标识
+          this.list.forEach((element) => {
+            element["isEditCell"] = false;
+          });
+          setTimeout(() => {
+            //大数据量加载时
+            this.listLoading = false;
+          }, 500);
+        })
+        .catch(() => {
+          this.listLoading = false;
+        });
+    },
+    /** 筛选操作 */
+    handleFilter() {
+      this.page = 1;
+      this.getList();
+      this.listQuery.Filters = [];
+      if (this.searchContent != "") {
+        var column = "billNum";
+        let filter = {
+          logic: 0,
+          column: column,
+          action: 6,
+          value: this.searchContent,
+        };
+        this.listQuery.Filters.push(filter);
+      }
+      this.getList();
+    },
+    resetQuery() {},
+    sortChange(data) {
+      const { prop, order } = data;
+      if (!prop || !order) {
+        this.handleFilter();
+        return;
+      }
+      this.listQuery.Sorting = prop + " " + order;
+      this.handleFilter();
+    },
+    handleSelectionChange(val) {
+      this.multipleSelection = val;
+    },
+    /** 通过回调控制style */
+    cellStyle({ row, column, rowIndex, columnIndex }) {
+      return { textAlign: "left" };
+    },
+    handleRowClick(row, column, event) {
+      this.$refs.multipleTable.clearSelection();
+      this.$refs.multipleTable.toggleRowSelection(row);
+    },
+  },
+};
+</script>
+
+
+<style lang="scss" scoped>
+@import "../../styles/crmtable.scss";
+</style>
+
diff --git a/vue/src/views/ux/vw/dataInput/hq_h/index.vue b/vue/src/views/ux/vw/dataInput/hq_h/index.vue
index 8e704bc0..247131ac 100644
--- a/vue/src/views/ux/vw/dataInput/hq_h/index.vue
+++ b/vue/src/views/ux/vw/dataInput/hq_h/index.vue
@@ -272,7 +272,7 @@ export default {
       });
       tempsTabs.push({ label: "看板编号", prop: "kanbanNumber", width: 250 });
       tempsTabs.push({
-        label: "外部看板编号",
+        label: "外部单号",
         prop: "externalKanbanNumber",
         width: 180,
       });
diff --git a/vue/src/views/ux/vw/dataInput/hq_open/index.vue b/vue/src/views/ux/vw/dataInput/hq_open/index.vue
index 9c44a1fc..9db2bbf2 100644
--- a/vue/src/views/ux/vw/dataInput/hq_open/index.vue
+++ b/vue/src/views/ux/vw/dataInput/hq_open/index.vue
@@ -284,8 +284,8 @@ export default {
         width: 200,
       });
       tempsTabs.push({
-        label: "验收单号",
-        prop: "acceptanceNo",
+        label: "外部单号",
+        prop: "externalKanbanNumber",
         width: 130,
       });
       tempsTabs.push({
diff --git a/vue/src/views/ux/vw/dataInput/hq_y/index.vue b/vue/src/views/ux/vw/dataInput/hq_y/index.vue
index 97e7a101..0c8a2e6f 100644
--- a/vue/src/views/ux/vw/dataInput/hq_y/index.vue
+++ b/vue/src/views/ux/vw/dataInput/hq_y/index.vue
@@ -282,8 +282,8 @@ export default {
         width: 200,
       });
       tempsTabs.push({
-        label: "验收单号",
-        prop: "acceptanceNo",
+        label: "外部单号",
+        prop: "externalKanbanNumber",
         width: 130,
       });
       tempsTabs.push({
diff --git a/vue/static/tableFieldForSearch.json b/vue/static/tableFieldForSearch.json
index 002d099e..9d9c6a07 100644
--- a/vue/static/tableFieldForSearch.json
+++ b/vue/static/tableFieldForSearch.json
@@ -1485,7 +1485,7 @@
       {
         "fieldId": 1,
         "formType": "text",
-        "name": "外部看板号",
+        "name": "外部单号",
         "type": 1,
         "value": "",
         "fieldType": 1,
@@ -3253,6 +3253,42 @@
         "setting": []
       }
     ]
+  }
+  ,
+  "wmsOutputCancelDiffReport": {
+    "id": "36",
+    "data": [
+      {
+        "fieldId": 3,
+        "formType": "text",
+        "name": "交货编码",
+        "type": 1,
+        "value": "",
+        "fieldType": 1,
+        "fieldName": "switchCode",
+        "setting": []
+      },
+      {
+        "fieldId": 5,
+        "formType": "text",
+        "name": "物料号",
+        "type": 1,
+        "value": "",
+        "fieldType": 1,
+        "fieldName": "materialCode",
+        "setting": []
+      },
+      {
+        "fieldId": 5,
+        "formType": "text",
+        "name": "物料组编码",
+        "type": 1,
+        "value": "",
+        "fieldType": 1,
+        "fieldName": "materialGroupCode",
+        "setting": []
+      }
+    ]
   },
   "hqkboutput": {
     "id": "36",