tire-platform-ui/src/views/storehouse/inStockManage/inStockPlan/detailsPage.vue

<template>
  <div>
    <div class="customer-head">
      <div class="customer-back">
        <el-button type="danger" style="border: none;background: none;color: red" icon="el-icon-arrow-left" @click="backToList(0)"
          >返回列表
        </el-button>
      </div>
      <div class="add-customer-btn">
        <el-button
          class="el-button&#45;&#45;small-yh"
          style="margin-left: 6px;"
          type="primary"
          size="small"
          v-if="editButton && form.status == 0"
          @click="inEdit"
          >编 辑
        </el-button>
        <el-button
          class="el-button--small-yh"
          v-if="!editButton"
          style="margin-left: 6px;"
          type="primary"
          size="small"
          :disabled="isSaveBtn"
          @click="editCustomer(0)"
          >保 存
        </el-button>
        <el-button
          class="el-button--small-yh"
          style="margin-left: 6px;"
          type="warning"
          size="small"
          @click="revokePlan()"
          v-if="Number(form.status) === 1"
          >撤 销
        </el-button>
        <el-button
          class="el-button--small-yh"
          style="margin-left: 6px;"
          type="success"
          size="small"
          v-if="!editButton"
          @click="editCustomer(1)"
          :disabled="form.status == 1"
          >提 交
        </el-button>
        <!-- <el-dropdown v-if="form.status == 1">
                    <el-button style="margin-left: 6px;" type="success" size="small">
                        审 核<i class="el-icon-arrow-down el-icon--right"></i>
                    </el-button>
                    <el-dropdown-menu slot="dropdown">
                        <el-dropdown-item @click.native="auditPlan(2)">通过</el-dropdown-item>
                        <el-dropdown-item @click.native="approve()">驳回</el-dropdown-item>
                    </el-dropdown-menu>
                </el-dropdown> -->
      </div>
    </div>
    <div style="margin-top: 50px">
      <trade-card title="基础信息">
        <avue-form :option="optionForm" v-model="form" ref="form" :upload-exceed="uploadExceed">
          <template slot-scope="{ row, index }" slot="contacts">
            <!-- 联系人 -->
            <el-select
              v-model="form.contacts"
              placeholder="请选择"
              size="small"
              style="width:60%"
              clearable
              filterable
              allow-create
              default-first-option
              @change="contactsChange($event)"
              :disabled="editButton || form.status == 1"
            >
              <el-option v-for="item in contactsOption" :key="item.cname" :label="item.cname" :value="item.contacts" />
            </el-select>
          </template>
          <tempalte slot="customerName">
            <dic-select
              v-model="form.customerName"
              placeholder="货主"
              key="id"
              label="cname"
              res="records"
              url="/blade-sales-part/corpsDesc/list?current=1&size=20&&enableOrNot=1&corpType=KH"
              :filterable="true"
              :remote="true"
              dataName="cname"
              @selectChange="dicChange('customerName', $event)"
              :disabled="editButton || form.status == 1"
            ></dic-select>
          </tempalte>
          <tempalte slot="storageName">
            <dic-select
              v-model="form.storageName"
              placeholder="仓库"
              key="id"
              label="cname"
              res="records"
              url="/blade-sales-part/tire/center/warehouse/storage/list?current=1&size=5"
              :filterable="true"
              :remote="true"
              dataName="cname"
              @selectChange="dicChange('storageName', $event)"
              :disabled="editButton || form.status == 1 || form.planItemsList.length > 0"
            ></dic-select>
          </tempalte>
          <tempalte slot="warehouseKeeperName">
            <dic-select
              v-model="form.warehouseKeeperName"
              placeholder="库管"
              key="id"
              label="realName"
              res="records"
              url="/blade-user/page?current=1&size=5&userType=2"
              :filterable="true"
              :remote="true"
              dataName="realName"
              @selectChange="dicChange('warehouseKeeperName', $event)"
              :disabled="editButton || form.status == 1"
            ></dic-select>
          </tempalte>
        </avue-form>
      </trade-card>
      <trade-card title="明细信息">
        <el-tabs v-model="activeName" type="card">
          <el-tab-pane label="商品明细" name="sale_detail">
            <avue-crud
              :option="optionContacts"
              ref="formContacts"
              :data="form.planItemsList"
              :key="key"
              @row-update="rowUpdate"
              @row-close="rowClose"
              :before-close="beforeClose"
              @selection-change="selectionContacts"
              @resetColumn="resetColumnTwo('formContacts', 'optionContacts', 'optionContactsBack', 477)"
              @saveColumn="saveColumnTwo('formContacts', 'optionContacts', 'optionContactsBack', 477)"
            >
              <template slot-scope="{ scope, row }" slot="menuLeft">
                <el-button type="primary" icon="el-icon-plus" size="small" :disabled="editButton || form.status == 1" @click="rowAdd(row)"
                  >添加商品
                </el-button>
                <el-button
                  type="success"
                  size="small"
                  :disabled="editButton || form.status == 1"
                  icon="el-icon-bottom"
                  @click="excelDialogfun('code')"
                  >按Code导入
                </el-button>
                <el-button type="primary" icon="el-icon-printer" size="small" @click="handlePrint">打印 </el-button>
                <!-- <el-button type="danger" plain size="small" @click="batchDelete"
                                    :disabled="editButton || form.status == 1 || selectionMultilist.length == 0">
                                    一键删除
                                </el-button> -->
              </template>
              <template slot="regionNameForm" slot-scope="{ row }">
                <dic-select
                  v-if="row.$cellEdit"
                  v-model="row.regionName"
                  placeholder="库区"
                  key="id"
                  label="regionName"
                  :url="'/blade-sales-part/tire/center/warehouse/storage-region/getRegionSelected?storageId=' + form.storageId"
                  :filterable="true"
                  :remote="true"
                  dataName="regionName"
                  @selectChange="rowDicChange('regionName', $event, row)"
                ></dic-select>
                <span v-else>{{ row.regionName }}</span>
              </template>
              <template slot="goodsNumForm" slot-scope="{ row }">
                <el-input-number
                  v-if="row.$cellEdit"
                  size="small"
                  v-model="row.goodsNum"
                  type="number"
                  :min="1"
                  :max="99999"
                  :controls="false"
                  :precision="numberDecimal"
                  style="width: 100%"
                  @change="moneyChange(row)"
                ></el-input-number>
                <span v-else>{{ row.goodsNum }}</span>
              </template>
              <template slot="price" slot-scope="{ row }">
                <el-input
                  v-if="row.$cellEdit"
                  size="small"
                  v-model="row.price"
                  style="width: 100%"
                  type="number"
                  :controls="false"
                  @change="moneyChange(row)"
                ></el-input>
                <span v-else>{{ row.price }}</span>
              </template>
              <template slot="dot" slot-scope="{ row }">
                <el-input v-if="row.$cellEdit" v-model="row.dot" size="small" style="width: 100%" />
                <span v-else>{{ row.dot }}</span>
              </template>
              <template slot="rebatePrice" slot-scope="{ row }">
                <el-input v-if="row.$cellEdit" size="small" v-model="row.rebatePrice" style="width: 100%"></el-input>
                <span v-else>{{ row.rebatePrice }}</span>
              </template>
              <template slot="remarks" slot-scope="{ row }">
                <el-input v-if="row.$cellEdit" size="small" v-model="row.remarks" style="width: 100%"></el-input>
                <span v-else>{{ row.remarks }}</span>
              </template>
              <template slot-scope="{ type, size, row, index, disabled }" slot="menu">
                <el-button
                  :size="size"
                  :disabled="editButton || form.status == 1 || row.isDeleted == 1"
                  :type="type"
                  :icon="row.$cellEdit ? 'el-icon-plus' : 'el-icon-edit'"
                  @click="rowEdit(row, index)"
                  >{{ row.$cellEdit ? "保存" : "编辑" }}
                </el-button>
                <el-button
                  :icon="row.isDeleted == 1 ? 'el-icon-refresh-left' : 'el-icon-delete'"
                  :size="size"
                  :disabled="editButton || form.status == 1"
                  :type="type"
                  @click="rowDel(row, index, 'planItemsList')"
                  >{{ row.isDeleted == 1 ? "恢复" : "删除" }}
                </el-button>
              </template>
            </avue-crud>
          </el-tab-pane>
          <el-tab-pane label="费用明细" name="outbound_records">
            <avue-crud
              :option="optionOutboundRecords"
              ref="outbound_records"
              :data="form.centerShipCostList"
              @row-update="rowUpdate"
              @resetColumn="resetColumnTwo('outbound_records', 'optionOutboundRecords', 'optionOutboundRecordsBack', 478)"
              @saveColumn="saveColumnTwo('outbound_records', 'optionOutboundRecords', 'optionOutboundRecordsBack', 478)"
            >
              <template slot-scope="{ scope, row }" slot="menuLeft">
                <el-button type="primary" size="small" @click="feeSubmit()">一键保存</el-button>
              </template>
              <template slot="indexHeader" slot-scope="{ row, index }">
                <el-button type="primary" size="mini" icon="el-icon-plus" circle @click="addRow()"> </el-button>
              </template>
              <template slot="index" slot-scope="{ row, index }">
                <span>{{ index + 1 }}</span>
              </template>
              <template slot="costNameForm" slot-scope="{ row }">
                <dic-select
                  v-if="row.$cellEdit"
                  v-model="row.costName"
                  placeholder="费用名称"
                  key="id"
                  res="records"
                  label="cname"
                  url="/blade-sales-part/tire/center/warehouse/costDesc/list?current=1&size=5"
                  :filterable="true"
                  :remote="true"
                  dataName="cname"
                  @selectChange="rowDicChange('costName', $event, row)"
                ></dic-select>
                <span v-else>{{ row.costName }}</span>
              </template>
              <tempalte slot="costPriceForm" slot-scope="{ row }">
                <el-input-number
                  v-if="row.$cellEdit"
                  v-model="row.costPrice"
                  @change="countChange(row)"
                  type="number"
                  :controls="false"
                  placeholder="请输入 单价"
                  size="small"
                  style="width: 100%;"
                ></el-input-number>
                <span v-else>{{ row.costPrice }}</span>
              </tempalte>
              <tempalte slot="goodsNumForm" slot-scope="{ row }">
                <el-input-number
                  v-if="row.$cellEdit"
                  v-model="row.goodsNum"
                  @change="countChange(row)"
                  type="number"
                  :min="1"
                  :max="99999"
                  :controls="false"
                  placeholder="请输入 数量"
                  size="small"
                  style="width: 100%;"
                ></el-input-number>
                <span v-else>{{ row.goodsNum }}</span>
              </tempalte>
              <template slot-scope="{ type, size, row, index, disabled }" slot="menu">
                <el-button
                  :size="size"
                  :disabled="row.isDeleted == 1"
                  :type="type"
                  :icon="row.$cellEdit ? 'el-icon-plus' : 'el-icon-edit'"
                  @click="rowEdit(row, index)"
                  >{{ row.$cellEdit ? "保存" : "编辑" }}
                </el-button>
                <el-button
                  :icon="row.isDeleted == 1 ? 'el-icon-refresh-left' : 'el-icon-delete'"
                  :size="size"
                  :type="type"
                  @click="rowDel(row, index, 'centerShipCostList')"
                  >{{ row.isDeleted == 1 ? "恢复" : "删除" }}
                </el-button>
              </template>
            </avue-crud>
          </el-tab-pane>
        </el-tabs>
      </trade-card>
      <report-dialog :switchDialog="switchDialog" reportName="中心仓-入库" :reportId="form.id" @onClose="onClose()"></report-dialog>
    </div>
    <el-dialog title="导入明细" append-to-body :visible.sync="excelBox" v-if="excelBox" width="555px" :close-on-click-modal="false" v-dialog-drag>
      <avue-form :option="excelOption" v-model="excelForm" table-loading="excelLoading" :upload-before="uploadBefore" :upload-after="uploadAfter">
        <template slot="excelTemplate">
          <el-button type="primary" @click="derivation"> 点击下载<i class="el-icon-download el-icon--right"></i> </el-button>
        </template>
      </avue-form>
      <p style="text-align: center;color: #DC0505">
        温馨提示 第一次导入时请先下载模板
      </p>
    </el-dialog>
    <el-dialog
      title="选择商品"
      append-to-body
      class="el-dialogDeep"
      :visible.sync="dialogVisible"
      width="80%"
      :close-on-click-modal="false"
      :destroy-on-close="true"
      :close-on-press-escape="false"
      @close="closeGoods"
    >
      <el-row :style="{ height: rowHeight }">
        <el-col :span="5">
          <div>
            <el-scrollbar>
              <basic-container>
                <avue-tree style="height: 70vh;overflow-y: auto" :option="treeOption" :data="treeDataGoods" @node-click="nodeClick" />
              </basic-container>
            </el-scrollbar>
          </div>
        </el-col>
        <el-col :span="19">
          <basic-container>
            <avue-crud
              :option="optionTwo"
              :table-loading="loading"
              :data="goodsListShow"
              ref="crud"
              :search.sync="SelectSearch"
              @refresh-change="refreshChange"
              @selection-change="selectionChange"
              @search-change="goodsSearch"
              :page.sync="page"
              @on-load="onLoadfun"
            >
              <template slot="menuLeft">
                <el-tabs v-model="activeNameTabs" @tab-click="tabHandle">
                  <el-tab-pane label="查询结果" name="searchList" />
                  <el-tab-pane label="已选定数据" name="importStaging" />
                </el-tabs>
              </template>
              <template slot="goodsNum" slot-scope="{ row }">
                <el-input-number
                  v-model="row.goodsNum"
                  size="small"
                  :controls="false"
                  :precision="numberDecimal"
                  @input="amountChange($event, row)"
                  style="width: 100%"
                />
              </template>
              <template slot="price" slot-scope="{ row }">
                <el-input-number v-model="row.price" size="small" :controls="false" style="width: 100%" />
              </template>
              <template slot="dot" slot-scope="{ row }">
                <el-input v-model="row.dot" size="small" style="width: 100%" />
              </template>
              <template slot-scope="scope" slot="menu">
                <el-button
                  type="text"
                  icon="el-icon-edit"
                  size="small"
                  @click.stop="importStagList(scope.row, scope.index)"
                  v-if="activeNameTabs == 'searchList'"
                  :disabled="goodsListSave.findIndex(item => item.id == scope.row.id) !== -1"
                >
                  选择
                </el-button>
                <el-button type="text" icon="el-icon-delete" size="small" @click.stop="removeStagList(scope.row, scope.index)" v-else
                  >移除
                </el-button>
              </template>
            </avue-crud>
          </basic-container>
        </el-col>
      </el-row>
      <span slot="footer" class="dialog-footer">
        <el-button @click="dialogVisible = false" :loading="saveLoading">取 消</el-button>
        <el-button type="primary" @click="importGoods" v-if="commodityData !== true" :loading="saveLoading">导入</el-button>
      </span>
    </el-dialog>
    <el-dialog title="驳回数据" append-to-body :visible.sync="approveVisible" width="30%" :close-on-click-modal="false" v-dialog-drag>
      <span>
        <el-input type="textarea" :rows="5" placeholder="请输入驳回原因" v-model="auditMsg"> </el-input>
      </span>
      <span slot="footer" class="dialog-footer">
        <el-button @click="approveVisible = false" size="mini">取消</el-button>
        <el-button
          type="danger"
          @click="
            approveVisible = false;
            auditPlan(3);
          "
          size="mini"
          >确定</el-button
        >
      </span>
    </el-dialog>
  </div>
</template>

<script>
import { getDetails as getCustom } from "@/api/tirePartsMall/basicData/customerInformation";
import { dateFormat } from "@/util/date";
import { getToken } from "@/util/auth";
import { dotList, goodsDetail } from "@/api/tirePartsMall/purchasingManagement/warehouseEntryOrder";
import reportDialog from "@/components/report-dialog/main";
import checkSchedule from "@/components/checkL/checkSchedule";
import check from "@/components/checkL/check";
import { getCorpType, getList } from "@/api/tirePartsMall/basicData/commodityInformation";
import { isProcurement } from "@/api/basicData/configuration";
import commodity from "../../configuration/commodity.json";
import { getDetails, submit, itemRemove, auditPlan, revokePlanIn, feeSubmit } from "@/api/storehouse/plan.js";
import dicSelect from "@/components/dicSelect/main";
import _ from "lodash";
export default {
  name: "detailsPage",
  data() {
    return {
      auditMsg: null,
      approveVisible: false,
      excelBox: false,
      numberDecimal: 0,
      SelectSearch: {},
      // 编辑还是保存
      mingxibaocun: true,
      // 批次号请求到的数据
      picihaolist: [],
      // 添加商品弹窗
      dialogVisible: false,
      // 弹窗高度
      rowHeight: "",
      // 左侧选择搜索
      treeDataGoods: [],
      treeDeptId: "",
      page: {
        pageSize: 10,
        currentPage: 1,
        total: 0,
        pageSizes: [10, 50, 100, 300, 500]
      },
      pageList: {
        pageSize: 10,
        currentPage: 1,
        total: 0
      },
      // 左侧选择
      treeOption: {
        addBtn: false,
        menu: false,
        size: "small",
        props: {
          labelText: "标题",
          label: "title",
          value: "value"
        }
      },
      // 表格需要的配置
      optionTwo: commodity,
      loading: false,
      // 商品列表数据合计
      goodsListShow: [],
      // 商品列表暂存
      goodsListSave: [],
      saveLoading: false,
      commodityData: false,
      surplusRouteQuantityOption: [],
      tableData: [],
      // tabs切换
      activeNameTabs: "searchList",
      data: [],

      inventory: 0,
      isStatus: 1,
      // 商品名称
      goodsIdoptions: [],
      dataList: [],
      dicUrlWithCustomId: "",
      sharedCompanyId: 0,
      isAddBtn: false,

      viewDisabled: false, // 请核和大审批按钮是否禁用
      isApplySettlement: false, // 请核数据按钮是否禁用
      isRevocationRequest: true, // 撤销审核
      isExamineBtn: true, // 审批
      isAdd: false,
      editButton: false, // 编辑按钮和保存按钮的显示隐藏
      isSaveBtn: false, // 保存的禁用
      isDisabledTask: false, // 生成，撤销任务按钮是否禁用
      buttonText: "生成任务",
      buttonColor: "success", // 初始颜色为success
      isContacts: false, // 基础信息插槽禁用

      goods: [],
      isDisabled: false,

      //地址
      recAddressOption: [],
      contactsOption: [],

      checkData: {},

      checkScheduleDialog: false,

      isConfirmRefundBtn: true,

      checkDialog: false,
      checkId: "",
      batchNo: "",
      switchDialog: false,
      activeName: "sale_detail",
      disabled: false,
      key: 0,
      templateUrl: "/api/blade-sales-part/tire/center/warehouse/stockDesc/exportStockTemplate", // 模板url
      form: {
        planItemsList: [],
        centerShipCostList: [],
        bsType: "RP",
        status: 0
      },
      excelOption: {
        submitBtn: false,
        emptyBtn: false,
        column: [
          {
            label: "模板下载",
            prop: "excelTemplate",
            formslot: true,
            span: 24
          },
          {
            label: "导入明细",
            prop: "excelFile",
            type: "upload",
            drag: true,
            loadText: "上传中，请稍等",
            accept: ".xls,.xlsx",
            span: 24,
            propsHttp: {
              res: "data"
            },
            tip: "请上传 .xls,.xlsx 标准格式文件",
            action: "/api/blade-sales-part/ship/import-item"
          }
        ]
      },
      optionForm: {
        menuBtn: false,
        span: 8,
        disabled: false,
        labelWidth: 100,
        column: [
          {
            label: "货主",
            prop: "customerName",
            disabled: false,
            rules: [
              {
                required: true,
                message: " ",
                trigger: "blur"
              }
            ]
          },
          {
            label: "联系人",
            type: "select",
            prop: "contacts",
            disabled: false,
            allowCreate: true,
            filterable: true,
            props: {
              label: "address",
              value: "id"
            },
            dicUrl: "/api/blade-sales-part/corpsAddr/corpIdByAddr?pid={{key}}"
          },
          {
            label: "电话",
            prop: "phone",
            disabled: false,
            type: "number",
            controls: false,
            precision: 0,
            max: 99999999999
          },
          {
            label: "制单人",
            prop: "createUserName",
            disabled: true
          },
          {
            label: "仓库",
            prop: "storageName",
            rules: [
              {
                required: true,
                message: " ",
                trigger: "blur"
              }
            ]
          },
          {
            label: "入库日期",
            prop: "businesDate",
            searchProp: "businesDateList",
            disabled: false,
            type: "date",
            value: dateFormat(new Date(), "yyyy-MM-dd"),
            format: "yyyy-MM-dd",
            valueFormat: "yyyy-MM-dd",
            rules: [
              {
                required: true,
                message: "",
                trigger: "blur"
              }
            ]
          },
          {
            label: "单据编号",
            prop: "ordNo",
            disabled: true
          },
          {
            label: "计划总数量",
            prop: "goodsTotalNum",
            disabled: true
          },
          {
            label: "司机姓名",
            prop: "driverName"
          },
          {
            label: "司机电话",
            prop: "driverPhone"
          },
          {
            label: "车牌号",
            prop: "licensePlate"
          },
          {
            label: "库管",
            prop: "warehouseKeeperName"
          },
          {
            label: "车辆照片",
            prop: "vehiclePhoto",
            listType: "picture-card",
            type: "upload",
            limit: 4,
            span: 24,
            propsHttp: {
              url: "link",
              name: "originalName",
              res: "data"
            },
            action: "/api/blade-resource/oss/endpoint/put-file"
          },
          {
            label: "备注",
            prop: "remarks",
            type: "textarea",
            disabled: false,
            span: 24,
            minRows: 1
          }
        ]
      },
      formContacts: {},
      optionContacts: {},
      optionContactsBack: {
        disabled: false,
        border: true,
        align: "center",
        index: true,
        addBtnText: "添加商品",
        updateBtnText: "保存",
        refreshBtn: false,
        dialogDrag: true,
        addBtn: false,
        span: 8,
        height: 500,
        // 添加
        addRowBtn: false,
        // 保存按钮
        editBtn: false,
        // 航编辑开启
        // cellBtn: true,
        rowKey: "ids",
        delBtn: false,
        menuWidth: 140,
        dialogTop: 25,
        dialogWidth: "80%",
        summaryText: this.$t("land118n.total"),
        showSummary: true,
        selection: true,
        sumColumnList: [
          {
            name: "goodsNum",
            type: "sum"
          },
          {
            name: "price",
            type: "sum",
            decimals: 2
          },
          {
            name: "sendNum",
            type: "sum",
            decimals: 2
          },
          {
            name: "subTotalMoney",
            type: "sum",
            decimals: 2
          },
          {
            name: "returnsNumber",
            type: "sum"
          },
          {
            name: "returnsAmount",
            type: "sum"
          }
        ],
        column: [
          {
            label: "商品名称",
            prop: "goodsName",
            width: 200,
            disabled: false,
            remote: true,
            overHidden: true
          },
          {
            label: "库区",
            prop: "regionName",
            cell: true,
            slot: true,
            formslot: true,
            overHidden: true,
            rules: [
              {
                required: true,
                message: " ",
                trigger: "blur"
              }
            ]
          },
          {
            label: "数量",
            prop: "goodsNum",
            cell: true,
            slot: true,
            formslot: true,
            overHidden: true,
            rules: [
              {
                required: true,
                message: " ",
                trigger: "blur"
              }
            ]
          },
          {
            label: "价格",
            prop: "price",
            overHidden: true,
            width: 100
          },
          {
            label: "批次号",
            prop: "dot",
            width: 100,
            overHidden: true
          },
          {
            label: "小计",
            prop: "subTotalMoney",
            overHidden: true,
            width: 100,
            disabled: true,
            editDisplay: false,
            addDisplay: false
          },
          {
            label: "商品编码",
            prop: "goodsNo",
            overHidden: true,
            disabled: false,
            width: 100
          },
          {
            label: "品牌",
            prop: "brandName",
            disabled: false,
            width: 100,
            overHidden: true
          },
          {
            label: "规格型号",
            prop: "propertyName",
            overHidden: true,
            disabled: false,
            width: 100
          },
          {
            label: "花纹",
            prop: "pattern",
            overHidden: true,
            disabled: false,
            width: 100
          },
          {
            label: "商品描述",
            prop: "goodsDescription",
            disabled: false,
            overHidden: true,
            width: 100
          },
          {
            label: "单位",
            prop: "units",
            overHidden: true
            // type: "select",
            // disabled: false,
            // props: {
            //     label: "dictValue",
            //     value: "dictValue"
            // },
            // dicUrl: "/api/blade-system/dict-biz/dictionary?code=unit",
            // overHidden: true,
            // width: 100
          },
          {
            label: "备注",
            prop: "remarks",
            overHidden: true,
            width: 100,
            disabled: false
          }
        ]
      },
      selectionMultilist: [], // 多选数据
      optionPaymentDetails: {},
      optionPaymentDetailsBack: {
        align: "center",
        index: true,
        addBtnText: "录入明细",
        menu: false,
        refreshBtn: false,
        dialogDrag: true,
        addBtn: false,
        span: 8,
        height: 600,
        addRowBtn: false,
        editBtn: false,
        delBtn: false,
        menuWidth: 140,
        dialogTop: 25,
        dialogWidth: "80%",
        column: [
          {
            label: "支付编号",
            prop: "serialNumber"
          },
          {
            label: "金额",
            prop: "amount"
          },
          {
            label: "类型",
            prop: "type"
          },
          {
            label: "支付时间",
            prop: "createTime"
          }
        ]
      },
      optionOutboundRecords: {},
      optionOutboundRecordsBack: {
        height: "auto",
        calcHeight: 30,
        menuWidth: 120,
        align: "center",
        border: true,
        menu: true,
        refreshBtn: false,
        addBtn: false,
        span: 8,
        addRowBtn: false,
        editBtn: false,
        delBtn: false,
        column: [
          {
            label: "index",
            prop: "index",
            width: "55",
            headerslot: true
          },
          {
            label: "费用名称",
            prop: "costName",
            headerslot: true,
            cell: true,
            slot: true,
            formslot: true,
            rules: [
              {
                required: true,
                message: " ",
                trigger: "blur"
              }
            ]
          },
          {
            label: "单价",
            prop: "costPrice",
            headerslot: true,
            cell: true,
            slot: true,
            formslot: true,
            rules: [
              {
                required: true,
                message: " ",
                trigger: "blur"
              }
            ]
          },
          {
            label: "数量",
            prop: "goodsNum",
            headerslot: true,
            cell: true,
            slot: true,
            formslot: true,
            rules: [
              {
                required: true,
                message: " ",
                trigger: "blur"
              }
            ]
          },
          {
            label: "金额",
            prop: "costAmount",
            headerslot: true
          },
          {
            label: "备注",
            prop: "remark",
            cell: true,
            headerslot: true
          }
        ]
      }
    };
  },
  components: { reportDialog, check, checkSchedule, dicSelect },
  props: {
    onLoad: Object,
    detailData: Object
  },
  async created() {
    this.optionContacts = await this.getColumnData(this.getColumnName(477), this.optionContactsBack);
    this.optionOutboundRecords = await this.getColumnData(this.getColumnName(478), this.optionOutboundRecordsBack);
    this.key++;
    if (this.onLoad.id && this.detailData.id) {
      this.$set(this.optionForm, "disabled", true);
      this.$set(this.optionContactsBack, "disabled", true);
      this.editButton = true;
      this.getDetail(this.onLoad.id, true);
    } else if (this.onLoad.id) {
      this.getDetail(this.onLoad.id, true);
    }
    isProcurement({ param: "number.decimal" }).then(res => {
      this.numberDecimal = res.data.data ? Number(res.data.data) : 0;
    });
  },
  mounted() {
    this.$nextTick(() => {
      // 监听浏览器高度变化，改变表格高度
      window.onresize = () => {
        this.rowHeight = window.innerHeight - 130 + "px";
      };
    });
  },
  methods: {
    uploadExceed(limit, files, fileList, column) {
      this.$message.error("超出上传限制文件数量");
    },
    countChange(row) {
      row.costAmount = _.multiply(Number(row.costPrice ? row.costPrice : 0), Number(row.goodsNum ? row.goodsNum : 0)).toFixed(2);
    },
    moneyChange(row) {
      row.subTotalMoney = _.multiply(Number(row.price ? row.price : 0), Number(row.goodsNum ? row.goodsNum : 0)).toFixed(2);
    },

    revokePlan() {
      this.$confirm("确定要撤销该入库单吗?", "提示", {
        confirmButtonText: "确定",
        cancelButtonText: "取消",
        type: "warning"
      }).then(() => {
        revokePlanIn(this.form.id).then(res => {
          this.$message({
            type: "success",
            message: "撤销成功!"
          });
          this.getDetail(res.data.data, true);
        });
      });
    },
    addRow() {
      // if (!this.form.id) {
      //     return this.$message.error('请保存数据')
      // }
      this.form.centerShipCostList.push({
        parentId: this.form.id,
        billType: 1,
        costType: 0,
        goodsNum: this.form.goodsTotalNum,
        $cellEdit: true
      });
    },
    feeSubmit() {
      if (!this.form.id) {
        return this.$message.error("请保存数据");
      }
      if (this.form.centerShipCostList.length == 0) {
        return this.$message.error("请录入费用明细");
      }
      for (let row of this.form.centerShipCostList.filter(item => item.isDeleted != 1)) {
        if (!row.costName || !row.goodsNum || !row.costPrice) {
          this.$refs.outbound_records.rowCell(row, row.$index);
          return this.$message.error("请完善费用明细信息");
        }
      }
      feeSubmit(this.form.centerShipCostList).then(res => {
        this.getDetail(this.form.id);
      });
    },
    inEdit() {
      if (this.form.status != 1) {
        this.editButton = false;
        this.$set(this.optionForm, "disabled", false);
        this.$set(this.optionContactsBack, "disabled", false);
      }
    },
    rowDicChange(name, row, el) {
      if (name == "costName") {
        if (row) {
          el.costId = row.id;
        } else {
          el.costId = null;
          el.costName = null;
        }
      }
      if (name == "regionName") {
        if (row) {
          el.regionId = row.id;
        } else {
          el.regionId = null;
          el.regionName = null;
        }
      }
    },
    dicChange(name, row) {
      if (name == "customerName") {
        if (row) {
          this.form.customerId = row.id;
          getCustom({ id: row.id }).then(res => {
            if (res.data.data) {
              this.dicUrlWithCustomId = res.data.data.id ? res.data.data.id : "";
              this.form.contacts = res.data.data.corpsAttnList[0].cname;
              this.form.phone = res.data.data.corpsAttnList[0].tel;
              this.contactsOption = res.data.data.corpsAddrList;
            }
          });
        } else {
          this.form.customerId = null;
          this.form.customerName = null;
          this.dicUrlWithCustomId = null;
          this.form.contacts = null;
          this.form.phone = null;
        }
      }
      if (name == "warehouseKeeperName") {
        if (row) {
          this.form.warehouseKeeper = row.id;
          // this.form.warehouseKeeperName=row.realName
        } else {
          this.form.warehouseKeeper = null;
          this.form.warehouseKeeperName = null;
        }
      }
      if (name == "storageName") {
        if (row) {
          this.form.storageId = row.id;
          this.form.storageName = row.cname;
        } else {
          this.form.storageId = null;
          this.form.storageName = null;
        }
      }
    },
    // 获取左侧筛选
    getAllWorkDicts() {
      getCorpType({ corpType: "SP", whetherIntegral: "0" }).then(res => {
        this.treeDataGoods = res.data.data;
      });
    },
    //导入页左商品类型查询
    nodeClick(data) {
      this.treeDeptId = data.id;
      this.page.currentPage = 1;
      this.onLoadfun(this.page, { ...this.SelectSearch, goodsTypeId: this.treeDeptId });
    },
    closeGoods() {
      this.treeDataGoods = [];
      this.treeDeptId = "";
      this.activeNameTabs = "searchList";
    },
    //刷新触发
    refreshChange() {
      this.page.currentPage = 1;
      this.onLoadfun(this.page);
    },
    // 这个方法是解决 this.onLoad is not a function 的问题
    onaloadfun(page, params = { artsVision: this.form.belongToCorpId }) {
      this.loading = true;
      getList({
        ...params,
        current: page.currentPage,
        size: page.pageSize,
        whetherIntegral: "0"
      }).then(res => {
        console.log(res, 1213);
        const data = res.data.data;
        this.page.total = data.total;
        this.pageList.total = data.total;
        this.data = data.records;
        this.goodsListShow = data.records;
        this.loading = false;
      });
    },
    //选中触发
    selectionChange(list) {
      this.tableData = list;
    },
    // 点击搜索触发
    goodsSearch(params, done) {
      this.page.currentPage = 1;
      params = {
        ...params,
        artsVision: this.form.belongToCorpId
      };
      this.onLoadfun(this.page, params);
      done();
    },
    // 标签页切换
    tabHandle(data) {
      if (data.name == "searchList") {
        this.goodsListShow = this.data;
        this.page.total = this.pageList.total;
      } else if (data.name == "importStaging") {
        this.goodsListShow = this.goodsListSave;
        this.page.total = 0;
      }
    },
    // 商品信息价格计算
    amountChange(value, row) {
      if (value > 0) {
        this.$refs.crud.toggleRowSelection(row, true);
      } else {
        this.$refs.crud.toggleRowSelection(row, false);
      }
    },
    importStagList(row, index, type) {
      this.goodsListSave.push(row);
    },
    removeStagList(row, index, type) {
      this.goodsListSave.splice(row.$index, 1);
    },
    //确认导入触发
    async importGoods() {
      this.surplusRouteQuantityOption.push({ storageQuantity: "0" });
      if (this.goodsListSave.length > 0) {
        this.goodsListSaveHandle();
      } else {
        if (this.tableData.length > 0) {
          this.tableDataHandle();
        }
      }
    },

    // 导入按钮事件
    tableDataHandle() {
      // 循环获取库存数量
      for (let item of this.tableData) {
        this.form.planItemsList.push({
          price: item.price ? item.price : 0,
          goodsId: item.id,
          goodsName: item.cname,
          dot: item.dot,
          brandName: item.brandName,
          brandId: item.brandId,
          goodsTypeId: item.goodsTypeId,
          goodsNo: item.code,
          // propertyName:item.typeno,
          // 规格型号
          propertyName: item.specificationAndModel,
          // 花纹
          pattern: item.brandItem,
          // 商品描述
          goodsDescription: item.goodsDescription,

          goodsNum: item.goodsNum,
          units: item.unit,
          inventory: item.inventory,
          // sendNum:res.data.data[0],
          // 小计
          subTotalMoney: item.goodsNum * item.price,
          //
          // inventory:item.balanceQuantity,
          // 备注
          remarks: item.remarks,
          rebatePrice: item.rebatePrice,
          // 批次号的状态
          dotedittype: false,
          // 价格数量
          goodsNumtype: false,
          // 价格
          pricetype: false,
          // 是否是编辑状态
          $cellEdit: true
        });
      }
      this.dialogVisible = false;
    },
    // 导入
    goodsListSaveHandle() {
      this.tableData = this.goodsListSave;
      this.tableDataHandle();
    },

    //导入商品弹窗列表查询
    onLoadfun(page, params = {}) {
      console.log(params);
      this.loading = true;
      getList({
        ...params,
        current: page.currentPage,
        size: page.pageSize,
        customId: this.form.customerId,
        stock: this.form.storageId,
        enableOrNot: 1,
        artsVision: this.form.belongToCorpId,
        goodsTypeId: this.treeDeptId,
        whetherIntegral: "0",
        ...Object.assign(params, this.SelectSearch)
      }).then(res => {
        res.data.data.records.forEach(e => {
          e.rebatePrice = 0;
        });
        const data = res.data.data;
        this.page.total = data.total;
        this.pageList.total = data.total;
        this.data = data.records;
        this.goodsListShow = data.records;

        // 获取单价数据
        for (let item of this.goodsListShow) {
          item.goodsNum = item.goodsNum ? item.goodsNum : 0;
        }
        this.loading = false;
      });
    },
    // 采购明细行编辑
    rowEdit(row, index) {
      if (row.$cellEdit) {
        this.$set(row, "$cellEdit", false);
      } else {
        this.$set(row, "$cellEdit", true);
      }
    },
    //联系人change
    contactsChange(e) {
      console.log(e);
      console.log(this.contactsOption);
      // 假设this.contactsOption是你的数组对象
      let matchedContact = this.contactsOption.find(item => item.contacts == e);
      // 判断是否找到匹配的对象
      this.$set(this.form, "phone", matchedContact.tel);
    },
    uploadAfter(res, done, loading, column) {
      if (Array.isArray(res)) {
        if (res instanceof Array) {
          this.form.planItemsList = this.form.planItemsList.concat(res);
          for (let item of this.form.planItemsList) {
              item.price = item.price ? item.price : 0;
          }
          res.forEach(item => {
            dotList({
              storageId: this.form.storageId,
              goodsId: res.goodsId
            }).then(e => {
              this.findObject(this.optionContactsBack.column, "dot").dicData = e.data.data;
            });
          });
        }
        this.excelBox = false;
      } else {
        this.$message.error(res);
      }
      loading = false;
      done(res);
    },
    derivation() {
      window.open(`${this.templateUrl}?${this.website.tokenHeader}=${getToken()}&stockId=${this.form.storageId}`);
    },
    uploadBefore(file, done, loading) {
      done();
      loading = true;
    },
    // 销售明细 导入按钮
    excelDialogfun(name) {
      if (!this.form.customerId) {
        this.$message.error("请选择货主");
        return;
      }
      if (!this.form.storageId) {
        this.$message.error("请选择仓库");
        return;
      }
      if (name == "名称") {
        this.findObject(this.excelOption.column, "excelFile").action = "/api/blade-sales-part/order/import-item-name";
        this.templateUrl = "/api/blade-sales-part/order/export-item-name";
      } else if (name == "code") {
        this.findObject(this.excelOption.column, "excelFile").action = "/api/blade-sales-part/tire/center/warehouse/plan/import-item-code/" + this.form.storageId;
        this.templateUrl = "/api/blade-sales-part/tire/center/warehouse/plan/exportPlanTemplate";
      }
      this.excelBox = true;
    },
    approve(type) {
      this.approveVisible = true;
      this.auditMsg = null;
    },
    auditPlan(type) {
      if (type == 2) {
        this.$confirm("是否提交审核?", "提示", {
          confirmButtonText: "确定",
          cancelButtonText: "取消",
          type: "warning"
        }).then(() => {
          let obj = {
            id: this.form.id,
            status: type,
            auditMsg: type == 3 ? this.auditMsg : null,
            version: this.form.version
          };
          auditPlan(obj).then(res => {
            this.getDetail(this.form.id);
          });
        });
      }
      if (type == 3) {
        let obj = {
          id: this.form.id,
          status: type,
          auditMsg: type == 3 ? this.auditMsg : null,
          version: this.form.version
        };
        auditPlan(obj).then(res => {
          this.getDetail(this.form.id);
        });
      }
    },
    isMobile(s) {
      return /^1[0-9]{10}$/.test(s);
    },
    //修改提交触发
    editCustomer(type) {
      this.$refs["form"].validate((valid, done) => {
        done();
        if (valid) {
          if (!this.isMobile(this.form.phone)) {
            return this.$message.error("请正确输入电话");
          }
          for (let row of this.form.planItemsList.filter(item => item.isDeleted != 1)) {
            if (!row.regionName || !row.goodsNum) {
              this.$refs.formContacts.rowCell(row, row.$index);
              return this.$message.error("请完善商品明细信息");
            }
          }
          for (let row of this.form.centerShipCostList.filter(item => item.isDeleted != 1)) {
            if (!row.costName || !row.goodsNum || !row.costPrice) {
              this.$refs.outbound_records.rowCell(row, row.$index);
              return this.$message.error("请完善费用明细信息");
            }
          }
          let obj = {
            ...this.form,
            vehiclePhoto: JSON.stringify(this.form.vehiclePhoto),
            status: type
          };
          const loading = this.$loading({
            lock: true,
            text: "加载中",
            spinner: "el-icon-loading",
            background: "rgba(255,255,255,0.7)"
          });
          submit(obj)
            .then(res => {
              this.$message.success(type === 1 ? "提交成功" : "保存成功");
              this.getDetail(res.data.data);
            })
            .finally(() => {
              loading.close();
            });
        } else {
          return false;
        }
      });
    },
    //关闭弹窗表单
    beforeClose(done, type) {
      done();
    },
    getDetail(id, type) {
      const loading = this.$loading({
        lock: true,
        text: "加载中",
        spinner: "el-icon-loading",
        background: "rgba(255,255,255,0.7)"
      });
      getDetails({ id: id })
        .then(res => {
          (res.data.data.vehiclePhoto = JSON.parse(res.data.data.vehiclePhoto)), (this.form = res.data.data);
          this.$nextTick(() => {
            this.$refs.formContacts.doLayout();
          });
          if (res.data.data.status == 1) {
            this.$set(this.optionForm, "disabled", true);
            this.$set(this.optionContactsBack, "disabled", true);
            this.editButton = true;
          }
        })
        .finally(() => {
          loading.close();
        });
    },
    rowDel(row, index, list) {
      if (row.isDeleted == 1) {
        row.isDeleted = 0;
      } else {
        this.$confirm("确定将选择数据删除?", {
          confirmButtonText: "确定",
          cancelButtonText: "取消",
          type: "warning"
        }).then(() => {
          if (row.id) {
            // itemRemove({ ids: row.id }).then(res => {
            //     this.form.planItemsList.splice(index, 1);
            //     this.$message.success("操作成功!");
            // });
            row.isDeleted = 1;
            this.$set(row, "$cellEdit", false);
          } else {
            this.form[list].splice(index, 1);
          }
        });
      }
    },
    // 明细信息多选
    selectionContacts(list) {
      this.selectionMultilist = list;
    },
    // 一键删除
    batchDelete() {
      if (this.selectionMultilist.length == 0) {
        return this.$message.warning("请选择要删除的数据");
      }
      this.$confirm("确定将选择数据删除?", {
        confirmButtonText: "确定",
        cancelButtonText: "取消",
        type: "warning"
      }).then(() => {
        let multiList = this.selectionMultilist;
        let arr = this.form.planItemsList;
        // 获取有id 的数据
        const itemsWithId = multiList.filter(item => item.hasOwnProperty("id"));
        let arrIds = itemsWithId.map(item => item.id); // 获取id 数据
        // 把选中的删除掉
        multiList.forEach(item => {
          for (let index in arr) {
            if (JSON.stringify(item) == JSON.stringify(arr[index])) {
              arr.splice(Number(index), 1);
            }
          }
        });
        // 有id 的处理
        if (itemsWithId.length != 0) {
          itemRemove({ ids: arrIds.join(",") }).then(res => {
            this.$message.success("操作成功!");
          });
        }
      });
    },
    rowUpdate(form, index, done, loading) {
      this.$set(form, "goodsName", form.$goodsId);
      console.log(form);
      done(form);
    },
    rowAdd(row) {
      if (!this.form.customerId) {
        this.$message.error("请选择货主");
        return;
      }
      if (!this.form.storageId) {
        this.$message.error("请选择仓库");
        return;
      }
      this.getAllWorkDicts();
      this.refreshChange();
      this.goodsListSave = [];
      this.dialogVisible = true;
    },
    //打印
    handlePrint() {
      this.switchDialog = !this.switchDialog;
    },
    onClose(val) {
      this.switchDialog = val;
    },
    //自定义列保存
    async saveColumnTwo(ref, option, optionBack, code) {
      /**
       * 已定义全局方法，直接使用，saveColumnData保存列数据方法,参数传值(表格名称，当前表格的option数据)
       * 已定义全局方法，直接使用，getColumnName方法用来获取枚举值，参数根据自己定义的code值获取中文名
       * 一定要执行异步操作，要等接口成功返回，才能执行下一行代码
       */
      const inSave = await this.saveColumnData(this.getColumnName(code), this[option]);
      if (inSave) {
        this.$message.success("保存成功");
        //关闭窗口
        this.$refs[ref].$refs.dialogColumn.columnBox = false;
      }
    },
    //自定义列重置
    async resetColumnTwo(ref, option, optionBack, code) {
      this[option] = this[optionBack];
      const inSave = await this.delColumnData(this.getColumnName(code), this[optionBack]);
      if (inSave) {
        this.$message.success("重置成功");
        this.$refs[ref].$refs.dialogColumn.columnBox = false;
      }
    },
    backToList(type) {
      this.$emit("backToList", type);
    }
  },
  watch: {
    "form.planItemsList": {
      // 执行方法
      handler(Value, newValue) {
        this.form.goodsTotalNum = 0;
        Value.forEach(item => {
          this.form.goodsTotalNum += Number(item.goodsNum ? item.goodsNum : 0);
        });
      },
      deep: false, // 深度监听
      immediate: false // 第一次改变就执行
    }
  }
};
</script>

<style lang="scss" scoped>
::v-deep .el-form-item {
  margin-bottom: 8px !important;
}

::v-deep .el-dialog__body {
  padding: 10px 20px;
}

::v-deep .el-table .cell {
  padding: 0 2px !important;

  .el-form-item {
    margin-bottom: 0px !important;
  }
}

::v-deep .avue-crud .el-table .el-form-item__label {
  left: -1px;
}
</style>