将出入库明细拆分为出库明细和入库明细

zuozhengqing

2023-11-17 119efc91fd3374131c31b8c5f8f5f7cb8f6731cf

将出入库明细拆分为出库明细和入库明细

 src/components/layout/components/appsidebar/index.vue

@@ -61,7 +61,8 @@
          <el-menu-item index="/reportForm/inventoryReport">库存报表</el-menu-item>
          <el-menu-item index="/reportForm/locationReport">位置报表</el-menu-item>
          <!-- <el-menu-item index="/warehouseManage/bussinessType">某日库存</el-menu-item> -->
          <el-menu-item index="/reportForm/inboundOutboundDetail">出入库明细报表</el-menu-item>
          <el-menu-item index="/reportForm/inboundOutboundDetail">入库明细报表</el-menu-item>
          <el-menu-item index="/reportForm/outboundDetail">出库明细报表</el-menu-item>
        </el-submenu>
      </el-menu>
    </div>

 src/router/index.js

@@ -115,7 +115,7 @@
    to.meta.title = to.params.name
    // document.title = to.meta.title
  } else if (to.name === "inboundOutboundDetail") {
    to.meta.title = "出入库明细"
    to.meta.title = "入库明细报表"
    // document.title = to.meta.title
  }
})

 src/router/product/index.js

@@ -1,7 +1,8 @@
// const type from '@/router/deployCode'

const product = (resolve) => require(["@/views/productManage/product/index"], resolve) // 产品
const inboundOutboundDetail = (resolve) => require(["@/views/reportForm/inboundOutboundDetail/index"], resolve) // 出入库明细
const inboundOutboundDetail = (resolve) => require(["@/views/reportForm/inboundOutboundDetail/index"], resolve) // 入库明细报表
const outboundDetail = (resolve) => require(["@/views/reportForm/outboundDetail/index"], resolve) // 入库明细报表
const productCategory = (resolve) => require(["@/views/productManage/productCategory/index"], resolve) // 产品类别
const productList = (resolve) => require(["@/views/productManage/productCategory/ProductList"], resolve) // 产品类别-产品
const overviewList = (resolve) => require(["@/views/overview/OverviewListView"], resolve) // 概述-产品列表
@@ -29,7 +30,15 @@
    name: "inboundOutboundDetail",
    component: inboundOutboundDetail,
    meta: {
      title: "出入库明细"
      title: "入库明细报表"
    }
  },
  {
    path: "/reportForm/outboundDetail",
    name: "outboundDetail",
    component: outboundDetail,
    meta: {
      title: "出库明细报表"
    }
  },
  {

 src/router/report/index.js

@@ -26,7 +26,7 @@
    name: "inboundOutboundDetail",
    component: inboundOutboundDetail,
    meta: {
      title: "出入库明细"
      title: "入库明细报表"
    }
  }
]

 src/views/reportForm/inboundOutboundDetail/index.vue

@@ -104,7 +104,7 @@
          prop: "date",
          isShowColumn: true,
          default: true,
          date: true
          // date: true
        },
        {
          label: "单号",
@@ -115,6 +115,12 @@
        {
          label: "产品",
          prop: "productName",
          isShowColumn: true,
          default: true
        },
        {
          label: "产品编码",
          prop: "productId",
          isShowColumn: true,
          default: true
        },
@@ -147,6 +153,12 @@
        {
          label: "单位",
          prop: "unit",
          isShowColumn: true,
          default: true
        },
        {
          label: "重量",
          prop: "weight",
          isShowColumn: true,
          default: true
        },
@@ -196,36 +208,28 @@
          pageSize: this.pagerOptions.pageSize
        }).then((res) => {
          if (res.code === 200) {
            res.data.map((item)=>{
                let dateObject = new Date(item.date);  
                let formattedDateString = dateObject.toISOString().split('T')[0];  
                item.date=formattedDateString
            })
            this.tableList.tableInfomation = res.data
            this.pagerOptions.totalCount = res.total
          }
        })
      } else {
        // await getProductOperatonList({
        //   productId: this.params.id,
        //   page: this.pagerOptions.currPage,
        //   pageSize: this.pagerOptions.pageSize
        // }).then((res) => {
        //   if (res.code === 200) {
        //     const list = res.data.map((item) => {
        //       return {
        //         ...item,
        //         fromLocation: item.fromLocation.name,
        //         toLocation: item.toLocation.name,
        //         productName: this.params.name,
        //         amount: item.details[0].product.amount,
        //         unit: item.details[0].product.unit
        //       }
        //     })
        //     this.tableList.tableInfomation = list || []
        //     this.pagerOptions.totalCount = res.total
        //   }
        // })
        await getHistory({
          baseOperationType:1,
          keyWord:this.params.keyWord,
          page: this.pagerOptions.currPage,
          pageSize: this.pagerOptions.pageSize
        }).then((res) => {
          if (res.code === 200) {
            res.data.map((item)=>{
                let dateObject = new Date(item.date);  
                let formattedDateString = dateObject.toISOString().split('T')[0];  
                item.date=formattedDateString
            })
            this.tableList.tableInfomation = res.data?res.data:[]
            this.pagerOptions.totalCount = res.total
          }
@@ -236,15 +240,6 @@
    getList(val) {
      this.params.keyWord=val;
      this.getData()
      // getHistory({
      //     page: this.pagerOptions.currPage,
      //     pageSize: this.pagerOptions.pageSize
      // }).then((res) => {
      //   if (res.code === 200) {
      //     this.tableList.tableInfomation = res.data
      //     this.pagerOptions.totalCount = res.total
      //   }
      // })
    },
    // 行点击
    tableRowClick(row) {

 src/views/reportForm/locationReport/index.vue

@@ -60,7 +60,7 @@
  data() {
    return {
      tableList: {},
      showcol: [ "产品类别", "预留数量", "价值"],
      showcol: [ "产品类别",  "价值"],
      // countcol: [
      //   { label: "在库数量", unit: "" },
      //   { label: "预留数量", unit: "" },
@@ -172,8 +172,8 @@
        {
          label: "预留数量",
          prop: "availableStore",
          isShowColumn: true,
          default: true,
          default: false,
          isShowColumn: showcol.includes("预留数量"),
          unit: "",
          textAlign:"right"
        },

 src/views/reportForm/outboundDetail/AddOutboundDetailDialog.vue

New file
@@ -0,0 +1,881 @@
<template>
  <div class="add-common">
    <el-dialog
      :title="editCommonConfig.title + '采购入库'"
      :visible.sync="editConfig.visible"
      :width="dialogWidth"
      :before-close="handleClose"
    >
      <!-- 头 -->
      <div slot="title" class="dialog-header">
        <span>{{ editCommonConfig.title === "查看" ? editCommonConfig.title : editCommonConfig.title + addName }}</span>
        <div class="header_btns">
          <span class="btn">
            <i class="el-icon-printer"></i>
            <span>打印</span>
          </span>
          <span class="btn" style="margin-left: 15px">
            <i class="el-icon-s-tools"></i>
            <span>动作</span>
          </span>
          <el-button v-if="showEdit" plain size="mini" style="margin-left: 15px" @click="editClick">编辑</el-button>
        </div>
      </div>
      <!-- 内容 -->
      <el-form
        ref="form"
        :model="editConfig.infomation"
        :rules="rules"
        label-position="right"
        label-width="120px"
        size="mini"
      >
        <div>
          <!-- <div>aaa</div> -->
          <StatusCommonView
            :showButton="showButton"
            :isValidateClick="isValidateClick"
            :isDelClick="isDelClick"
            :list="list"
            :showCancel="showCancel"
            @delClick="delClick"
            @validateClick="validateClick"
            @btnCancel="btnCancel"
          />
        </div>
        <div class="basic-info">
          <div class="basic-info-view">
            <el-row>
              <el-col :span="12">
                <el-form-item prop="companyName">
                  <span slot="label">{{ workType === 1 ? "供应商" : workType === 2 ? "客户" : "联系人" }}</span>
                  <el-select
                    v-model="editConfig.infomation.companyName"
                    placeholder="请选择"
                    size="mini"
                    style="width: 90%"
                    :disabled="!showFooter"
                    @change="companyChange"
                  >
                    <el-option
                      v-for="item in companyOptions"
                      :key="item.id"
                      :label="item.name"
                      :value="{ value: item.id, label: item.name }"
                    >
                    </el-option>
                  </el-select>
                </el-form-item>
              </el-col>
              <!-- <el-col :span="12">
                <el-form-item v-if="workType === 3" label="联系人" prop="contacterName">
                  <el-select
                    v-model="editConfig.infomation.contacterName"
                    placeholder="请选择"
                    size="mini"
                    style="width: 90%"
                    :disabled="!showFooter"
                  >
                    <el-option v-for="item in memberOptions" :key="item.id" :label="item.username" :value="item.id">
                    </el-option>
                  </el-select>
                </el-form-item>
              </el-col>
              <el-col :span="12">
                <el-form-item v-if="workType === 2" label="送货地址" prop="client_name">
                  <el-select
                    v-model="editConfig.infomation.memberId"
                    placeholder="请选择"
                    size="mini"
                    style="width: 90%"
                    :disabled="!showFooter"
                  >
                    <el-option v-for="item in memberOptions" :key="item.id" :label="item.username" :value="item.id">
                    </el-option>
                  </el-select>
                </el-form-item>
              </el-col> -->
              <el-col :span="12">
                <el-form-item label="日期" prop="operationDate">
                  <el-date-picker
                    v-model="editConfig.infomation.operationDate"
                    value-format="yyyy-MM-dd"
                    type="date"
                    placeholder="选择日期"
                    style="width: 90%"
                    :disabled="!showFooter"
                  >
                  </el-date-picker>
                </el-form-item>
              </el-col>
              <el-col v-if="showOperationType" :span="12">
                <el-form-item label="入库类型" prop="operationTypeId">
                  <el-select
                    v-model="editConfig.infomation.operationTypeId"
                    placeholder="请选择"
                    size="mini"
                    style="width: 90%"
                    :disabled="!showFooter"
                  >
                    <el-option v-for="item in operationTypeOptions" :key="item.id" :label="item.name" :value="item.id">
                    </el-option>
                  </el-select>
                </el-form-item>
              </el-col>
              <el-col v-else :span="12">
                <el-form-item label="入库类型">
                  <el-input v-model="receiptType" disabled style="width: 90%"></el-input>
                </el-form-item>
              </el-col>
              <el-col :span="12">
                <el-form-item label="来源单据" prop="sourceNumber">
                  <el-input
                    v-model="editConfig.infomation.sourceNumber"
                    placeholder="例如:PO0032"
                    style="width: 90%"
                    :disabled="!showFooter"
                  ></el-input>
                </el-form-item>
              </el-col>
              <el-col :span="12">
                <el-form-item v-if="workType !== 1" label="源位置" prop="fromLocationId">
                  <el-select
                    v-model="editConfig.infomation.fromLocationId"
                    placeholder="请选择"
                    size="mini"
                    style="width: 90%"
                    :disabled="!showFooter"
                  >
                    <el-option
                      v-for="item in toLocationOptions"
                      :key="item.id"
                      :label="item.jointName"
                      :value="item.id"
                    >
                    </el-option>
                  </el-select>
                </el-form-item>
              </el-col>
              <el-col :span="12">
                <el-form-item v-if="workType !== 2" label="仓库位置" prop="toLocationId">
                  <el-select
                    v-model="editConfig.infomation.toLocationId"
                    placeholder="请选择"
                    size="mini"
                    style="width: 90%"
                    :disabled="!showFooter"
                  >
                    <el-option
                      v-for="item in toLocationOptions"
                      :key="item.id"
                      :label="item.jointName"
                      :value="item.id"
                    >
                    </el-option>
                  </el-select>
                </el-form-item>
              </el-col>
              <el-col :span="12">
                <el-form-item label="负责人" prop="contacterName">
                  <el-select
                    v-model="editConfig.infomation.contacterName"
                    placeholder="请选择"
                    size="mini"
                    style="width: 90%"
                    :disabled="!showFooter"
                    @change="contacterChange"
                  >
                    <el-option
                      v-for="item in memberOptions"
                      :key="item.id"
                      :label="item.name"
                      :value="{ value: item.id, label: item.name }"
                    >
                    </el-option>
                  </el-select>
                </el-form-item>
              </el-col>
              <!-- <el-col :span="12">
                <el-form-item v-if="workType !== 1" label="送货策略" prop="client_name">
                  <el-select
                    v-model="editConfig.infomation.memberId"
                    placeholder="请选择"
                    size="mini"
                    style="width: 90%"
                    :disabled="!showFooter"
                  >
                    <el-option v-for="item in memberOptions" :key="item.id" :label="item.username" :value="item.id">
                    </el-option>
                  </el-select>
                </el-form-item>
              </el-col> -->
              <el-col :span="24">
                <el-form-item label="备注" prop="comment">
                  <el-input
                    v-model.trim="editConfig.infomation.comment"
                    size="mini"
                    type="textarea"
                    style="width: 96%"
                    :autosize="{ minRows: 3 }"
                    :disabled="!showFooter"
                  ></el-input>
                </el-form-item>
              </el-col>
            </el-row>
          </div>
          <div class="bottom">
            <el-tabs v-model="activeName" type="card">
              <!-- <el-tab-pane v-if="workType !== 1" label="详情" name="detail"> </el-tab-pane> -->
              <el-tab-pane label="产品" name="first"> </el-tab-pane>
              <el-tab-pane label="发货信息" name="two"></el-tab-pane>
            </el-tabs>
            <!-- 操作 -->
            <div v-if="activeName === 'first'">
              <CommonFormTableView
                :product-table-list="productTableList"
                :detail-enter="!showFooter"
                @inputContent="inputContent"
                @addProductClick="addProductClick('操作')"
              >
                <template v-if="showFooter" slot="tableButton">
                  <el-table-column label="操作" width="60" fixed="right" align="center">
                    <template slot-scope="scope">
                      <div @click="handleDelClick(scope, '操作')">
                        <i class="el-icon-delete"></i>
                      </div>
                    </template>
                  </el-table-column>
                </template>
              </CommonFormTableView>
            </div>
            <!-- 发货信息 -->
            <div v-if="activeName==='two'">
              <el-form label-position="left" label-width="80px" :model="shipmentsInfo">
                <el-form-item label="承运商"  style="width: 50%;">
                  <el-select :disabled="!showFooter" v-model="editConfig.infomation.logisticCompanyId" placeholder="请选择" style="width: 100%;">
                    <el-option
                      v-for="item in shipmentsInfo.carrier"
                      :key="item.id"
                      :label="item.name"
                      :value="item.id">
                    </el-option>
                  </el-select>
                </el-form-item>
                <el-form-item label="运单号" style="width: 50%;">
                  <el-input :disabled="!showFooter" v-model="editConfig.infomation.waybillNumber"></el-input>
                </el-form-item>
                <el-form-item label="重量" style="width: 50%;">
                  <el-input :disabled="!showFooter" v-model="editConfig.infomation.weight"></el-input>
                </el-form-item>
                <el-form-item label="物流重量" style="width: 50%;">
                  <el-input :disabled="!showFooter" v-model="editConfig.infomation.logisticWeight"></el-input>
                </el-form-item>
              </el-form>
            </div>
            <!-- 详情 -->
            <!-- <div v-if="activeName === 'detail'">
              <CommonFormTableView
                :product-table-list="detailTableList"
                :detail-enter="!showFooter"
                @inputContent="inputDetail"
                @addProductClick="addProductClick('详情')"
              >
                <template v-if="showFooter" slot="tableButton">
                  <el-table-column label="操作" width="60" fixed="right" align="center">
                    <template slot-scope="scope">
                      <div @click="handleDelClick(scope, '详情')">
                        <i class="el-icon-delete"></i>
                      </div>
                    </template>
                  </el-table-column>
                </template>
              </CommonFormTableView>
            </div> -->
          </div>
        </div>
      </el-form>
      <!-- 尾 -->
      <div slot="footer" class="dialog-footer">
        <!-- <el-button type="primary" size="small" @click="editConfig.visible = false">保并提交审批</el-button> -->
        <el-button type="primary" size="small" @click="saveClick('form')" :disabled="!showFooter">保存</el-button>
        <el-button size="small" @click="editConfig.visible = false">取消</el-button>
      </div>
    </el-dialog>
  </div>
</template>

<script>
import CommonFormTableView from "@/components/makepager/CommonFormTableView"
import {
  getLocationList,
  addOperation,
  updateOperation,
  updateStatus,
  stateCancel,
  deleteOperation,
  getListTransfer,
  getLogisticCompanyList
} from "@/api/overview/overview"
import { getCompanyList } from "@/api/common/other"
export default {
  name: "AddOverviewDialog",
  props: {
    editCommonConfig: {
      type: Object,
      default: () => {
        return {
          visible: false,
          title: "新建",
          operationTypeId: 0,
          infomation: {}
        }
      }
    },
    workType: {
      type: Number,
      default: 1
    },
    addName: {
      type: String,
      default: "调拨"
    },
    showOperationType: {
      type: Boolean,
      default: false
    }
  },
  components: { CommonFormTableView },
  computed: {},
  data() {
    return {
      dialogWidth: "50%",
      editConfig: this.editCommonConfig,
      rules: {
        sourceNumber: [{ required: true, message: "请输入来源单据", trigger: "blur" }],
        operationDate: [{ required: true, message: "请选择日期", trigger: "change" }],
        toLocationId: [{ required: true, message: "请选择仓库位置", trigger: "change" }],
        fromLocationId: [{ required: true, message: "请选择源位置", trigger: "change" }],
        operationTypeId: [{ required: true, message: "请选择入库类型", trigger: "change" }]
      },
      companyOptions: [], // 公司
      memberOptions: [{ id: 1, name: "管理员" }],
      toLocationOptions: [], //  源位置 仓库位置
      list: [
        { label: "草稿", status: "todo", value: 1 },
        { label: "正在等待", status: "todo", value: 2 },
        { label: "就绪", status: "todo", value: 3 },
        { label: "完成", status: "todo", value: 4 },
        { label: "已取消", status: "todo", value: 5 }
      ],
      showButton: true,
      activeName: "first",
      productTableList: {},
      tableData: [],
      countId: 0,
      isNoProduct: true, // 添加明细行时是否有产品未选择
      showEdit: false, // 是否显示编辑按钮
      isDelClick: false, // 删除按钮是否可点击
      showFooter: false, // 是否显示取消保存
      currentState: "todo", // 当前状态
      detailTableList: {},
      detailTableData: [{ name: "ssss" }],
      detailId: 0,
      isNoDetail: false, // 添加详情明细行时是否未选择
      tableColumn: [],
      receiptType: "", // 入库类型
      companyObj: {},
      contacterObj: {},
      isValidateClick: false, // 验证是否显示
      operationTypeOptions: [], // 入库类型列表
      shipmentsInfo: {
        carrier:[],
        waybillNumber:'',
        weight:0,
        logisticWeight:0,
      },
      showCancel:false, // 取消是否可以显示
    }
  },
  created() {
    this.setTableForm()
    this.setBottonView()
    this.setDetailTableForm()
    this.getCompanyList()
    this.getLocationList()
    this.receiptType = this.editConfig.title === "查看" ? this.editConfig.infomation.operationTypeName : this.addName
    if (this.showOperationType) {
      this.getListTransfer()
    }
    this.getLogisticCompanyList()
  },
  methods: {
    // 获取公司列表
    async getCompanyList() {
      await getCompanyList().then((res) => {
        console.log(res)
        if (res.code === 200) {
          this.companyOptions = res.data
        }
      })
    },
    // 获取仓库位置列表
    async getLocationList() {
      await getLocationList({
        keyWord: "",
        jointName: this.editConfig.code,
        page: 0,
        pageSize: 0
      }).then((res) => {
        console.log(res)
        if (res.code === 200) {
          this.toLocationOptions = res.data
        }
      })
    },
    // 获取仓库类型
    async getListTransfer() {
      await getListTransfer({
        keyword: "",
        page: 0,
        pageSize: 0
      }).then((res) => {
        console.log(res.data)
        if (res.code === 200) {
          const list = res.data.map((item) => {
            return {
              name: item.name,
              id: item.id
            }
          })
          this.operationTypeOptions = list || []
        }
      })
    },
    // 设置删除/打印/编辑是否显示
    setBottonView() {
      console.log(this.editConfig.infomation.status)
      if (this.editConfig.title === "新建") {
        this.showButton = false
        this.showEdit = false
        this.showFooter = true
        this.isValidateClick = false
      } else if (this.editConfig.title === "编辑") {
        this.showButton = true
        this.showEdit = false
        this.isDelClick = true
        this.showFooter = true
      } else if (this.editConfig.title === "查看" && this.editConfig.infomation.status !== 4) {
        this.showButton = true
        this.showEdit = true
        this.isDelClick = true
        this.showFooter = false
        if (this.editConfig.infomation.status === "完成") {
          this.isValidateClick = false
        }else if(this.editConfig.infomation.status === 3){
          this.isValidateClick = true
          this.showCancel=true
        }else{
          this.isValidateClick = true

        }
      } else if (this.editConfig.infomation.status === 4 || this.editConfig.infomation.status === "完成") {
        this.showButton = true
        this.showEdit = false
        this.isDelClick = true
        this.showFooter = false
        this.isValidateClick = false
      } else if (this.editConfig.infomation.status === 5) {
        this.showButton = true
        this.showEdit = false
        this.showFooter = false
        this.isValidateClick = false
      } else {
        // 就绪---
        this.showButton = true
        this.showEdit = true
        this.showFooter = false
        this.isValidateClick = true
        this.showCancel=true
      }
      if (this.editConfig.title === "新建") {
        this.list[0].status = "active"
      } else {
        this.list.map((item) => {
          console.log(item, this.editConfig.infomation.status, "打印信息")
          if (item.value === this.editConfig.infomation.status || item.label === this.editConfig.infomation.status) {
            item.status = "active"
          } else {
            item.status = "todo"
          }
        })
      }
    },
    // 关闭
    handleClose() {
      this.editConfig.visible = false
    },
    // 编辑
    editClick() {
      this.showEdit = false
      this.showButton = false
      this.showFooter = true
      this.setTableForm()
    },
    async getLogisticCompanyList(){
      await getLogisticCompanyList().then((res) => {
        if(res.code===200){
          this.shipmentsInfo.carrier=res.data
        }
      })
    },
    // 保存
    saveClick(formName) {
      this.$refs[formName].validate((valid) => {
        if (valid) {
          for (let i = 0; i < this.tableData.length; i++) {
            if (this.tableData[i].productName.length === 0) {
              this.isNoProduct = true
              break
            } else {
              this.isNoProduct = false
            }
          }
          if (this.isNoProduct) {
            this.$message.error("请添加明细行或选择产品不能为空")
          } else {
            let requestUrl = this.editConfig.title === "新建" ? addOperation : updateOperation
            let params = this.saveParams()
            requestUrl({
              ...params
            }).then((res) => {
              console.log(res)
              this.editConfig.visible = false
              if (res.code === 200) {
                this.$message.success("添加成功")
                this.$parent.getData()
              }
            })
          }
        }
      })
    },
    saveParams() {
      let data = this.editConfig.infomation
      let companyID = 0
      let companyName = ""
      let contacterID = 0
      let contacterName = ""
      if (this.editConfig.title === "新建") {
        companyID = Object.keys(this.companyObj).length === 0 ? 0 : this.companyObj.value
        companyName = Object.keys(this.companyObj).length === 0 ? "" : this.companyObj.label
        contacterID = Object.keys(this.contacterObj).length === 0 ? 0 : this.contacterObj.value
        contacterName = Object.keys(this.contacterObj).length === 0 ? "" : this.contacterObj.label
      } else {
        companyID = Object.keys(this.companyObj).length === 0 ? data.companyID : this.companyObj.value
        companyName = Object.keys(this.companyObj).length === 0 ? data.companyName : this.companyObj.label
        contacterID = Object.keys(this.contacterObj).length === 0 ? data.contacterID : this.contacterObj.value
        contacterName = Object.keys(this.contacterObj).length === 0 ? data.contacterName : this.contacterObj.label
      }
      let params = {
        baseOperationType: data.baseOperationType,
        comment: data.comment || "",
        companyID: companyID,
        companyName: companyName,
        contacterID: contacterID,
        contacterName: contacterName,
        details: this.tableData,
        fromLocationId: data.fromLocationId || 0,
        id: data.id,
        number: data.number || "",
        operationDate: data.operationDate || "",
        operationTypeId: this.showOperationType ? data.operationTypeId : this.editConfig.operationTypeId,
        operationTypeName: this.receiptType,
        sourceNumber: data.sourceNumber || "",
        status: 3,
        toLocationId: data.toLocationId || 0,
        waybillNumber:data.waybillNumber||'',
        weight:data.weight||0,
        logisticWeight:data.logisticWeight||0,
        logisticCompanyId:data.logisticCompanyId,
      }
      return params
    },
    // 删除
    async delClick() {
      await deleteOperation(this.editConfig.infomation.id).then((res) => {
        console.log(res)
        this.editConfig.visible = false
        if (res.code === 200) {
          this.$message.success("删除成功")
          this.$parent.getData()
        }
      })
    },
    // 操作列表
    setTableForm() {
      if (
        this.editConfig.title !== "新建" &&
        this.editConfig.infomation.details &&
        this.editConfig.infomation.details.length > 0
      ) {
        const list = this.editConfig.infomation.details.map((item) => {
          return {
            ...item,
            productName: item.product.name,
            unit: item.product.unit
          }
        })
        this.tableData = list
      } else {
        this.tableData = []
      }
      // this.tableData = this.editConfig.title !== "新建" ? list : []
      this.productTableList = {
        tableData: this.tableData,
        tableColumn: [
          { label: "产品", prop: "productName", productName: true, isRequird: true },
          // { label: "说明", prop: "number", input: true },
          // { label: "日期", prop: "amount", date: true, isRequird: true },
          // { label: "截止日期", prop: "price", date: true },
          { label: "数量", prop: "amount", inputFloat: true },
          { label: "计量单位", prop: "unit" }
        ]
      }
    },
    // 操作输入
    inputContent(val, prop, row) {
      this.countId = row.countId
      this.tableData.map((item) => {
        if (item.countId === row.countId) {
          item[prop] = val
        }
      })
    },
    // 新增
    addProductClick(value) {
      console.log(value)
      if (value === "操作") {
        console.log(this.tableData)
        for (let i = 0; i < this.tableData.length; i++) {
          if (this.tableData[i].productName.length === 0) {
            this.isNoProduct = false
            break
          } else {
            this.isNoProduct = true
          }
        }
        if (this.isNoProduct) {
          this.countId++
          this.tableData.push({
            countId: this.countId,
            productId: "",
            amount: 0,
            unit: "",
            productName: ""
          })
        }
      } else {
        console.log(this.detailTableData)
        for (let i = 0; i < this.detailTableData.length; i++) {
          if (this.detailTableData[i].name.length === 0) {
            this.isNoDetail = true
            break
          } else {
            this.isNoDetail = false
          }
        }
        if (!this.isNoDetail) {
          this.detailId++
          this.detailTableData.push({
            detailId: this.detailId,
            id: 0,
            amount: 0,
            desc: "",
            name: "",
            number: "",
            price: 0,
            total: 0
          })
        }
      }
    },
    // 删除
    handleDelClick(scope, value) {
      console.log(scope)
      if (value === "操作") {
        this.tableData.splice(scope.$index, 1)
      } else {
        this.detailTableData.splice(scope.$index, 1)
      }
    },
    // 详情列表
    setDetailTableForm() {
      this.setTableColumn()
      this.detailTableList = {
        tableData: this.detailTableData,
        tableColumn: this.tableColumn
      }
    },
    setTableColumn() {
      if (this.workType === "内部调拨") {
        this.tableColumn = [
          { label: "产品", prop: "name", productName: true, isRequird: true },
          { label: "从", prop: "number", select: true },
          { label: "至", prop: "amount", select: true },
          { label: "完成", prop: "total", inputFloat: true },
          { label: "计量单位", prop: "total", select: true }
        ]
      } else {
        this.tableColumn = [
          { label: "产品", prop: "name", productName: true, isRequird: true },
          { label: "从", prop: "number", select: true },
          { label: "完成", prop: "total", inputFloat: true },
          { label: "计量单位", prop: "total", select: true }
        ]
      }
    },
    // 详情输入
    inputDetail(val, prop, row) {
      this.detailId = row.detailId
      this.detailTableData.map((item) => {
        if (item.detailId === row.detailId) {
          item[prop] = val
        }
      })
    },
    // 客户选择
    companyChange(val) {
      console.log(val)
      this.companyObj = val
    },
    // 负责人选择
    contacterChange(val) {
      this.contacterObj = val
    },
    // 验证
    async validateClick() {
      await updateStatus(this.editConfig.infomation.id).then((res) => {
        console.log(res)
        this.editConfig.visible = false
        if (res.code === 200) {
          this.$message.success("验证成功")
          this.$parent.getData()
        }
      })
    },

    // 取消
    btnCancel(){
      this.$confirm('确定取消吗？', '提示', {
        confirmButtonText: '确定',
        cancelButtonText: '取消',
        type: 'warning'
      }).then(() => {
        stateCancel(this.editConfig.infomation.id).then((res) => {
          console.log(res)
          this.editConfig.visible = false
          if (res.code === 200) {
            this.$message.success("取消调拨")
            this.$parent.getData()
          }
        })
        this.list.map((item) => {
          if (item.label==="已取消") {
            item.status = "active"
          } else {
            item.status = "todo"
          }
        })
      }).catch(() => {         
      });
    }
  }
}
</script>

<!-- Add "scoped" attribute to limit CSS to this component only -->
<style lang="scss" scoped>
.dialog-header {
  display: flex;
  align-items: center;
  font-size: 14px;
  color: #333;
  .header_btns {
    margin-left: auto;
    margin-right: 60px;
    .btn {
      cursor: no-drop;
    }
  }
}
.content-status {
  display: flex;
}
.basic-info {
  height: calc(100% - 80px);
  overflow: auto;
  margin: 20px;
  // border: 1px solid #dcdfe6;
  // box-shadow: inset 0 0 2px #dee2e6;
  // -moz-box-shadow: inset 0 0 2px #dee2e6;
  // -webkit-box-shadow: inset 0 0 2px #dee2e6;
  // .basic-info-view {
  //   margin-top: 20px;
  // }
}
.purchase-view {
  display: flex;
  .left {
    width: 50%;
  }
  .right {
    width: 50%;
  }
}
.second-label {
  margin-left: 20px;
  border-bottom: 1px solid #d9d9d9;
  margin-bottom: 10px;
}
::v-deep {
  .el-dialog__headerbtn {
    position: absolute;
    top: 15px;
  }
  .el-button {
    &:hover {
      border: 1px solid #dcdfe6;
      color: #333;
    }
  }
  .el-tabs--card > .el-tabs__header {
    border-bottom: none;
  }
  // .el-tabs__item.is-active {
  //   color: #333;
  //   background: #f1f3f8;
  // }
  .el-tabs__item {
    height: 30px;
    line-height: 30px;
    font-size: 13px;
    background: #f3f3f3;
  }
  .el-tabs__header {
    margin: 0 0 1px;
  }
  .bottom{
    .el-form{
      // border-top: 1px solid #EBEEF5;
    }
    .el-form-item{
      height: 28px;
      .el-input {
        input{
          height: 28px;
        }
      } 
    }
  }
}
</style>

 src/views/reportForm/outboundDetail/index.vue

New file
@@ -0,0 +1,265 @@
<template>
  <div class="rightContent">
    <div class="top">
      <SearchCommonView
        :add-title="'新建'"
        :showAdd="false"
        :placeholder="'请根据单号、产品、业务类型进行搜索'"
        :amount-view="false"
        @addCommonClick="addBtnClick"
        @searchClick="getList"
      />
    </div>
    <div class="list-view">
      <div class="table">
        <TableCommonView
          ref="tableListRef"
          :table-list="tableList"
          @selTableCol="selTableCol"
          @tableRowClick="tableRowClick"
        ></TableCommonView>
      </div>
      <div class="btn-pager">
        <PagerView class="page" :pager-options="pagerOptions" v-on="pagerEvents" />
      </div>
    </div>
    <!-- 编辑 -->
    <AddOverviewDialog v-if="editConfig.visible" :edit-common-config="editConfig" :add-name="this.$route.params.name" />
  </div>
</template>

<script>
import pageMixin from "@/components/makepager/pager/mixin/pageMixin"
import { getHistory } from "@/api/reportForm/inventoryRwport"
// import { getProductOperatonList } from "@/api/product/product"

import AddOverviewDialog from "@/views/reportForm/outboundDetail/AddOutboundDetailDialog.vue"
import { getDataByType } from "@/api/data"
export default {
  name: "outboundDetail",
  props: {},
  components: { AddOverviewDialog },
  mixins: [pageMixin],
  computed: {},
  data() {
    return {
      tableList: {},
      showcol: ["状态"],
      searchOptions: [],
      commonDetail: {
        visible: false,
        title: "新建",
        infomation: {}
      },
      editConfig: {
        visible: false,
        title: "新建",
        infomation: {}
      },
      params: {},
      baseOperationTypeList:getDataByType("baseOperationTypeTwo"),
    }
  },
  created() {
    this.setTable()
    console.log(this.$route.params)
    var paramsList = sessionStorage.getItem("paramsList")
    let params = {}
    if (paramsList) {
      params = JSON.parse(sessionStorage.getItem("paramsList"))
    } else {
      params = this.$route.params
      sessionStorage.setItem("paramsList", JSON.stringify(params))
    }
    this.params = params
    console.log(this.params,'====111')
    this.getData()
  },
  // 页面销毁之前
  beforeDestroy() {
    sessionStorage.removeItem("paramsList")
  },
  methods: {
    setTable() {
      this.tableList = {
        tableInfomation: [],
        selectBox: true,
        showcol: this.showcol,
        allcol: [],
        tableColumn: this.setTableColumn(this.showcol)
      }
      let allcol = []
      for (let i = 0; i < this.tableList.tableColumn.length; i++) {
        if (!this.tableList.tableColumn[i].default) {
          const label = this.tableList.tableColumn[i].label
          allcol.push(label)
        }
      }
      this.tableList.allcol = allcol
    },
    setTableColumn(showcol) {
      let tableColumn = [
        {
          label: "日期",
          prop: "date",
          isShowColumn: true,
          default: true,
          // date: true
        },
        {
          label: "单号",
          prop: "number",
          isShowColumn: true,
          default: true
        },
        {
          label: "产品",
          prop: "productName",
          isShowColumn: true,
          default: true
        },
        {
          label: "产品编码",
          prop: "productId",
          isShowColumn: true,
          default: true
        },
        {
          label: "业务类型",
          prop: "baseOperationType",
          isShowColumn: true,
          default: true,
          conversion: true,
          getStatus: this.getBaseOperationTypeList
        },
        {
          label: "从",
          prop: "fromLocation",
          isShowColumn: true,
          default: true
        },
        {
          label: "至",
          prop: "toLocation",
          isShowColumn: true,
          default: true
        },
        {
          label: "数量",
          prop: "amount",
          isShowColumn: true,
          default: true
        },
        {
          label: "单位",
          prop: "unit",
          isShowColumn: true,
          default: true
        },
        {
          label: "重量",
          prop: "weight",
          isShowColumn: true,
          default: true
        },
        {
          label: "状态",
          prop: "status",
          width: 120,
          isShowColumn: showcol.includes("状态"),
          default: false,
          status: true,
          isCallMethod: true,
          getCallMethod: this.getStatus
        },
        {
          label: "完成者",
          prop: "contactedName",
          isShowColumn: showcol.includes("完成者"),
          default: false
        }
      ]
      return tableColumn
    },
    selTableCol(val) {
      this.showcol = val
      this.tableList.tableColumn = this.setTableColumn(val)
    },
    getBaseOperationTypeList(val){
      let string = "--"
      if (val) {
        for (let i in this.baseOperationTypeList) {
          if (this.baseOperationTypeList[i].id == val) {
            return this.baseOperationTypeList[i].name
          }
        }
      }
      return string
    },
    // 库存报表跳转请求数据
    async getData() {
      if (this.params.name === "报表") {
        await getHistory({
          keyWord:this.params.keyWord,
          produceId:this.params.produceId,
          unit:this.params.unit,
          productName:this.params.productName,
          page: this.pagerOptions.currPage,
          pageSize: this.pagerOptions.pageSize
        }).then((res) => {
          if (res.code === 200) {
            res.data.map((item)=>{
                let dateObject = new Date(item.date);  
                let formattedDateString = dateObject.toISOString().split('T')[0];  
                item.date=formattedDateString
            })
            this.tableList.tableInfomation = res.data
            this.pagerOptions.totalCount = res.total
          }
        })
      } else {
        await getHistory({
          keyWord:this.params.keyWord,
          baseOperationType:2,
          page: this.pagerOptions.currPage,
          pageSize: this.pagerOptions.pageSize
        }).then((res) => {
          if (res.code === 200) {
            res.data.map((item)=>{
                let dateObject = new Date(item.date);  
                let formattedDateString = dateObject.toISOString().split('T')[0];  
                item.date=formattedDateString
            })
            this.tableList.tableInfomation = res.data?res.data:[]
            this.pagerOptions.totalCount = res.total
          }
        })
      }
    },
    // 搜索
    getList(val) {
      this.params.keyWord=val;
      this.getData()
    },
    // 行点击
    tableRowClick(row) {
      console.log(row,"看看row")
      this.editConfig.visible = true
      this.editConfig.title = "查看"
      this.editConfig.infomation = { ...row }
    },
    // 新建
    addBtnClick() {
      // this.editConfig.visible = true
      this.editConfig.title = "新建"
    },
    // 状态
    getStatus(val) {
      return val === 1 ? "草稿" : val === 3 ? "就绪" : "完成"
    }
  }
}
</script>

<!-- Add "scoped" attribute to limit CSS to this component only -->
<style lang="scss" scoped></style>