<template>
  <div class="app-container">
    <div class="search-bx">
      <div class="search">
        <el-row :gutter="0">
          <el-input
            v-model="tableObj.getdataListParm.parammaps.deliveryCode"
            placeholder="发货单号"
            class="filter-item"
            style="width: 120px"
          />
          <el-input
            v-model="tableObj.getdataListParm.parammaps.stockupCodes"
            placeholder="备货单号"
            class="filter-item"
            style="width: 120px"
          />

          <el-select
            v-model="tableObj.getdataListParm.parammaps.deliveryTypeId"
            placeholder="发货类型"
            class="filter-item"
            style="width: 120px"
            clearable
          >
            <el-option
              v-for="item in deliveryNameList"
              :key="item.id"
              :label="item.name"
              :value="item.id"
            />
          </el-select>

          <!-- <el-select v-model="tableObj.getdataListParm.parammaps.customerId" placeholder="客户名称" class="filter-item" style="width: 120px;" clearable filterable>
                <el-option v-for="item in customerNameList" :key="item.id" :label="item.name" :value="item.id" />
              </el-select> -->
          <!-- <el-autocomplete v-model="tableObj.getdataListParm.parammaps.customerName" :fetch-suggestions="customer_search" placeholder="客户名称" style="width: 200px;margin-right:10px" @select="change_customer_select" @clear="clear_customer_select" @blur="customer_search_blur" clearable>
                <template slot-scope="{ item }">
                  <span class="name">{{ item.name }}</span>
                </template>
              </el-autocomplete> -->

          <el-input
            v-model="tableObj.getdataListParm.parammaps.customerName"
            placeholder="客户名称"
            style="width: 180px"
            class="filter-item"
            clearable
          />

          <el-select
            v-model="tableObj.getdataListParm.parammaps.groupId"
            placeholder="所属集团"
            class="filter-item"
            style="width: 120px"
            clearable
          >
            <el-option
              v-for="item in groupNameList"
              :key="item.id"
              :label="item.name"
              :value="item.id"
            />
          </el-select>

          <el-select
            v-model="tableObj.getdataListParm.parammaps.postName"
            placeholder="快递名称"
            class="filter-item"
            style="width: 120px"
            clearable
          >
            <el-option
              v-for="item in postNameList"
              :key="item.name"
              :label="item.name"
              :value="item.name"
            />
          </el-select>

          <el-input
            v-model="tableObj.getdataListParm.parammaps.postCode"
            placeholder="快递单号"
            class="filter-item"
            style="width: 120px"
          />

          <el-date-picker
            v-model="tableObj.getdataListParm.parammaps.inputDatetime"
            class="inputDatetime filter-item"
            type="daterange"
            range-separator="至"
            start-placeholder="开始日期"
            end-placeholder="结束日期"
            style="width: 250px"
          />

          <el-select
            v-model="tableObj.getdataListParm.parammaps.statusName"
            placeholder="单据状态"
            class="filter-item"
            style="width: 120px"
            clearable
          >
            <el-option
              v-for="item in billStatusNameList"
              :key="item.id"
              :label="item.name"
              :value="item.id"
            />
          </el-select>

          <el-select
            v-model="tableObj.getdataListParm.parammaps.isCreateServiceNo"
            placeholder="是否生成服务单"
            class="filter-item"
            style="width: 150px"
            clearable
          >
            <el-option
              v-for="item in isCreateServiceNoList"
              :key="item.id"
              :label="item.name"
              :value="item.id"
            />
          </el-select>
          <el-button class="successBorder" @click="form_search">查询</el-button>
          <el-button class="successBorder" @click="form_clear">重置</el-button>

          <el-button
            v-if="isDeliveryAdd"
            class="success"
            icon="el-icon-plus"
            @click="form_add"
            >新增</el-button
          >
          <!-- <el-button  class="success" icon="el-icon-upload2" @click="form_export">导出</el-button> -->
        </el-row>
      </div>
      <!-- <div class="operation">


          <el-row :gutter="0">
            <el-col :span="21">
              <el-button v-if="isRoleEdit" class="success" icon="el-icon-plus" @click="form_add">新增</el-button>
            </el-col>
            <el-col :span="3">
                <el-dropdown>
                  <el-button class="export">导出</el-button>
                  <el-dropdown-menu slot="dropdown">
                    <el-dropdown-item @click.native="form_export(1)">导出模板</el-dropdown-item>
                    <el-dropdown-item @click.native="form_export(2)">导出数据</el-dropdown-item>
                  </el-dropdown-menu>
                </el-dropdown>
            </el-col>
          </el-row>


        </div> -->
    </div>

    <div class="table">
      <el-table
        :key="tableObj.tableKey"
        v-loading="tableObj.listLoading"
        element-loading-text="给我一点时间"
        :data="tableObj.list"
        border
        fit
        highlight-current-row
        style="width: 100%"
        :row-style="rowStyle"
        :cell-style="cellStyle"
        class="elTable table-fixed"
        :max-height="myHeight"
      >
        <!-- <el-table-column type="selection" align="center" width="50" /> -->
        <el-table-column
          label="序号"
          align="center"
          type="index"
          width="50px"
          fixed="left"
        >
          <template slot-scope="scope">
            <span>{{
              scope.$index + (tableObj.pageNum - 1) * tableObj.pageSize + 1
            }}</span>
          </template>
        </el-table-column>
        <el-table-column
          label="发货单号"
          min-width="120px"
          align="center"
          show-overflow-tooltip
          fixed="left"
        >
          <template slot-scope="scope">
            <span
              style="color: #409eff; cursor: pointer"
              @click="form_see(scope.row)"
              >{{ scope.row.deliveryCode }}</span
            >
          </template>
        </el-table-column>
        <el-table-column
          label="单据状态"
          min-width="90px"
          align="center"
          fixed="left"
        >
          <template slot-scope="scope">
            <span>{{ scope.row.statusName }}</span>
          </template>
        </el-table-column>
        <el-table-column
          label="客户名称"
          min-width="120px"
          align="center"
          show-overflow-tooltip
        >
          <template slot-scope="scope">
            <span>{{ scope.row.customerName }}</span>
          </template>
        </el-table-column>
        <el-table-column
          label="所属集团"
          min-width="110px"
          align="center"
          show-overflow-tooltip
        >
          <template slot-scope="scope">
            <span>{{ scope.row.groupName }}</span>
          </template>
        </el-table-column>
        <el-table-column label="发货日期" min-width="110px" align="center">
          <template slot-scope="scope">
            <span>{{ scope.row.sendDate }}</span>
          </template>
        </el-table-column>
        <el-table-column label="发货类型" min-width="110px" align="center">
          <template slot-scope="scope">
            <span>{{ scope.row.deliveryTypeName }}</span>
          </template>
        </el-table-column>
        <el-table-column label="收件人名称" min-width="110px" align="center">
          <template slot-scope="scope">
            <span>{{ scope.row.receiverName }}</span>
          </template>
        </el-table-column>
        <el-table-column label="收件人电话" min-width="110px" align="center">
          <template slot-scope="scope">
            <span>{{ scope.row.receiverTel }}</span>
          </template>
        </el-table-column>
        <el-table-column
          label="快递名称"
          min-width="110px"
          align="center"
          show-overflow-tooltip
        >
          <template slot-scope="scope">
            <span>{{ scope.row.postName }}</span>
          </template>
        </el-table-column>
        <el-table-column label="快递单号" min-width="130px" align="center">
          <template slot-scope="scope">
            <span>{{ scope.row.postCode }}</span>
          </template>
        </el-table-column>

        <el-table-column
          label="备货单号"
          min-width="130px"
          align="center"
          show-overflow-tooltip
        >
          <template slot-scope="scope">
            <span>{{ scope.row.stockupCodes }}</span>
          </template>
        </el-table-column>
        <el-table-column
          label="备注"
          min-width="120px"
          align="center"
          show-overflow-tooltip
        >
          <template slot-scope="scope">
            <span>{{ scope.row.remark }}</span>
          </template>
        </el-table-column>
        <el-table-column
          label="录入日期"
          min-width="110px"
          align="center"
          show-overflow-tooltip
        >
          <template slot-scope="scope">
            <span>{{ scope.row.createrDate }}</span>
          </template>
        </el-table-column>
        <el-table-column
          label="创建人"
          min-width="110px"
          align="center"
          show-overflow-tooltip
        >
          <template slot-scope="scope">
            <span>{{ scope.row.createrName }}</span>
          </template>
        </el-table-column>
        <el-table-column
          prop="isCreateServiceNo"
          label="是否生成服务单"
          width="120"
          align="center"
        />
        <el-table-column
          label="操作"
          align="center"
          :width="autoWidth"
          v-if="autoWidth !== 0"
          class-name="small-padding fixed-width"
          fixed="right"
        >
          <template slot-scope="{ row }">
            <el-button
              v-if="isDeliveryAdd && row.isModify == 1"
              class="miniSuccess"
              @click="form_edit(row)"
              >编辑</el-button
            >
            <el-button
              v-if="isDeliveryAdd && row.isDel == 1"
              class="miniDanger"
              @click="form_delete(row)"
              >删除</el-button
            >

            <el-button
              v-if="row.isRevoke == 1 && isDeliveryAdd"
              class="miniSuccess"
              @click="form_revoke(row)"
              >撤销</el-button
            >
            <el-button
              v-if="
                row.isCreateServiceNo == '未生成' && row.statusName == '正常'
              "
              class="miniSuccess"
              @click="create_service_no(row)"
              >生成工单</el-button
            >
          </template>
        </el-table-column>
      </el-table>
      <pagination
        v-show="tableObj.total >= 0"
        :total="tableObj.total"
        :page.sync="tableObj.getdataListParm.offset"
        :limit.sync="tableObj.getdataListParm.pagecount"
        @pagination="get_table_data"
      />
    </div>

    <!-- 新增/编辑 -->
    <el-dialog
      :title="textMap[create.dialogStatus]"
      :visible.sync="create.dialogFormVisible"
      :close-on-click-modal="false"
      width="95%"
      :before-close="dialog_close"
    >
      <div class="app-add">
        <el-form
          ref="temp"
          :rules="create.rules"
          :model="create.temp"
          label-position="right"
          label-width="150px"
          style="width: 95%; margin: 0 auto 50px"
        >
          <el-row :gutter="25">
            <el-col :span="8">
              <!-- <el-row>
                    <el-form-item label="所属集团：" prop="groupId">
                      <el-select v-model="create.temp.groupId" placeholder="所属集团" class="filter-item" style="width: 100%;" filterable  @change="change_group" clearable :disabled="create.dialogStatus=='see' || create.dialogStatus=='update'  || isHome=='home' ">
                        <el-option v-for="item in groupNameList" :key="item.id" :label="item.name" :value="item.id" />
                      </el-select>
                    </el-form-item>
                  </el-row> -->

              <el-row>
                <el-form-item label="客户名称：" prop="customerId">
                  <el-select
                    v-model="create.temp.customerId"
                    filterable
                    placeholder="客户名称"
                    class="filter-item"
                    style="width: 100%"
                    clearable
                    @change="change_customer"
                    :disabled="
                      create.dialogStatus == 'see' ||
                      create.dialogStatus == 'update' ||
                      isHome == 'home'
                    "
                  >
                    <el-option
                      v-for="item in create.customerNameList"
                      :key="item.id"
                      :label="item.name"
                      :value="item.id"
                    />
                  </el-select>
                </el-form-item>
              </el-row>
              <el-form-item label="集团：" prop="groupName">
                <el-input
                  ref="groupName"
                  v-model="create.temp.groupName"
                  class="filter-item"
                  style="width: 100%"
                  disabled
                />
              </el-form-item>
              <el-row> </el-row>

              <el-row
                v-if="create.dialogStatus === 'create' && isHome !== 'home'"
              >
                <el-form-item label="选择备货单：" prop="contractCode">
                  <el-input
                    ref="contractCode"
                    v-model="create.temp.stockupNums"
                    class="filter-item"
                    style="width: 100%"
                    disabled
                  />
                  <el-button class="miniPrimary" @click="choose_stock('create')"
                    >选择备货单</el-button
                  >
                </el-form-item>
              </el-row>

              <el-row v-if="create.dialogStatus === 'update'">
                <el-form-item label="备货单数：" prop="contractCode">
                  <el-input
                    ref="contractCode"
                    v-model="create.temp.stockupNums"
                    class="filter-item"
                    style="width: 100%"
                    disabled
                  />
                  <el-button class="miniPrimary" @click="choose_stock('create')"
                    >选择备货单</el-button
                  >
                </el-form-item>
              </el-row>

              <el-row v-if="create.dialogStatus === 'see'">
                <el-form-item label="备货单数：" prop="contractCode">
                  <!-- <el-input ref="contractCode" v-model="create.temp.contractCode" class="filter-item" style="width: 100%;" disabled/> -->
                  <span
                    style="color: #409eff; cursor: pointer"
                    @click="choose_stock('see')"
                    >{{ create.temp.stockupNums }}</span
                  >
                </el-form-item>
              </el-row>

              <!-- <el-row   >
                      <el-form-item label="合同编号："  >
                        <span  v-for="(item,index) in contractCodeNameIdArr"   style = "color:#409EFF; cursor: pointer;" @click="click_contract(item)">{{item.name}}</span>
                      </el-form-item>
                  </el-row> -->
              <el-row>
                <el-form-item label="合同编号：">
                  <span
                    v-for="(item, index) in contractCodeIdArr"
                    style="
                      display: inline-block;
                      padding-right: 20px;
                      color: #409eff;
                      cursor: pointer;
                    "
                    @click="click_contract(item)"
                    >{{ contractCodeArr[index] }}</span
                  >
                </el-form-item>
              </el-row>

              <el-row>
                <el-form-item label="发货类型：" prop="deliveryTypeId">
                  <el-select
                    ref="deliveryTypeId"
                    v-model="create.temp.deliveryTypeId"
                    placeholder="请选择"
                    class="filter-item"
                    style="width: 100%"
                    :disabled="create.dialogStatus == 'see'"
                  >
                    <el-option
                      v-for="item in create.deliveryNameList"
                      :key="item.id"
                      :label="item.name"
                      :value="item.id"
                    />
                  </el-select>
                </el-form-item>
              </el-row>

              <el-row>
                <el-form-item label="发货日期：" prop="sendDate">
                  <el-date-picker
                    v-model="create.temp.sendDate"
                    type="date"
                    placeholder="选择日期"
                    format="yyyy-MM-dd"
                    value-format="yyyy-MM-dd"
                    style="width: 100%"
                    :clearable="false"
                    :disabled="create.dialogStatus == 'see'"
                  />
                </el-form-item>
              </el-row>

              <!-- <el-row>
                    <el-form-item label="收件人姓名：" prop="receiverName">
                      <el-input ref="receiverName" v-model="create.temp.receiverName" class="filter-item" style="width: 100%;"  placeholder="请输入收件人姓名" :disabled="create.dialogStatus=='see'" />
                    </el-form-item>
                  </el-row>     -->

              <el-row>
                <el-form-item label="收件人姓名：" prop="receiverName">
                  <el-select
                    v-model="create.temp.receiverName"
                    style="width: 100%"
                    placeholder="请选择"
                    filterable
                    allow-create
                    @change="change_receiverName"
                    :disabled="create.dialogStatus == 'see'"
                  >
                    <el-option
                      v-for="item in receiverList"
                      :key="item.name"
                      :label="item.name"
                      :value="item.name"
                    >
                    </el-option>
                  </el-select>
                </el-form-item>
              </el-row>

              <el-row>
                <el-form-item label="收件人电话：" prop="receiverTel">
                  <el-input
                    ref="receiverTel"
                    v-model="create.temp.receiverTel"
                    class="filter-item"
                    style="width: 100%"
                    maxlength="11"
                    placeholder="请输入收件人电话"
                    :disabled="create.dialogStatus == 'see'"
                  />
                </el-form-item>
              </el-row>

              <el-row>
                <el-form-item label="快递名称：" prop="postName">
                  <el-select
                    ref="postName"
                    v-model="create.temp.postName"
                    placeholder="请选择快递"
                    class="filter-item"
                    style="width: 100%"
                    allow-create
                    :disabled="create.dialogStatus == 'see'"
                  >
                    <el-option
                      v-for="item in postNameList"
                      :key="item.id"
                      :label="item.name"
                      :value="item.id"
                    />
                  </el-select>
                </el-form-item>
              </el-row>

              <el-row>
                <el-form-item label="快递单号：" prop="postCode">
                  <el-input
                    ref="postCode"
                    v-model="create.temp.postCode"
                    placeholder="请输入快递单号"
                    maxlength="255"
                    class="filter-item"
                    style="width: 100%"
                    :disabled="create.dialogStatus == 'see'"
                  />
                </el-form-item>
              </el-row>
              <el-row>
                <el-form-item label="收货地点：" prop="deliveryAddress">
                  <el-input
                    ref="deliveryAddress"
                    v-model="create.temp.deliveryAddress"
                    placeholder="请输入收货地点"
                    maxlength="255"
                    class="filter-item"
                    style="width: 100%"
                    :disabled="create.dialogStatus == 'see'"
                  />
                </el-form-item>
              </el-row>
              <el-row>
                <el-form-item label="备注：" prop="remark">
                  <el-input
                    ref="remark"
                    v-model="create.temp.remark"
                    type="textarea"
                    :autosize="{ minRows: 1.3, maxRows: 4 }"
                    placeholder="请输入备注，最多255个字"
                    maxlength="255"
                    class="filter-item"
                    style="width: 100%"
                    :disabled="create.dialogStatus == 'see'"
                  />
                </el-form-item>
              </el-row>
            </el-col>

            <el-col :span="16">
              <h3>发货清单</h3>

              <el-row
                v-if="
                  create.dialogStatus == 'create' ||
                  create.dialogStatus == 'update'
                "
              >
                <el-button
                  style="margin-right: 20px; display: inline-block"
                  class="miniPrimary"
                  @click="reset_tableDeliveryList()"
                  >重置清单</el-button
                >

                <el-button
                  style="margin-right: 20px; display: inline-block"
                  class="miniPrimary"
                  @click="form_down()"
                  >模板下载</el-button
                >

                <el-upload
                  style="margin-right: 20px; display: inline-block"
                  ref="uploadEx"
                  :headers="headers2"
                  :data="uploadData"
                  :action="uploadExcelUrl"
                  :show-file-list="false"
                  :before-upload="beforeImport"
                  :on-success="handleImportSuccess"
                >
                  <el-button class="miniPrimary">导入</el-button>
                </el-upload>
              </el-row>

              <el-button
                v-if="create.dialogStatus == 'see'"
                class="miniPrimary"
                @click="form_export2"
                >导出</el-button
              >

              <el-row
                v-if="
                  create.dialogStatus == 'create' ||
                  create.dialogStatus == 'update'
                "
                style="padding-top: 10px"
              >
                <el-form-item label="发货详情：" prop="stockupId">
                  <el-select
                    ref="stockupId"
                    v-model="create.temp.stockupId"
                    filterable
                    placeholder="请选择发货详情"
                    class="filter-item"
                    style="width: 100%"
                    :disabled="create.dialogStatus == 'see'"
                    @change="change_receProduct"
                  >
                    <el-option
                      v-for="item in receProductNameList"
                      :key="item.productsId"
                      :label="
                        '产品名称：' +
                        item.productsName +
                        ' 型号：' +
                        item.model +
                        ' 规格：' +
                        item.Specifications
                      "
                      :value="item.productsId"
                    >
                    </el-option>
                  </el-select>
                </el-form-item>
              </el-row>
              <el-row>
                <div class="table">
                  <el-table
                    key="0"
                    :data="tableDeliveryList"
                    border
                    fit
                    highlight-current-row
                    style="width: 100%"
                    :row-style="rowStyle"
                    :cell-style="cellStyle"
                    class="elTable table-fixed"
                  >
                    <el-table-column
                      label="序号"
                      align="center"
                      type="index"
                      width="50px"
                    >
                      <template slot-scope="scope">
                        <span>{{ scope.$index + 1 }} </span>
                      </template>
                    </el-table-column>

                    <el-table-column
                      label="类别"
                      min-width="110px"
                      align="center"
                    >
                      <template slot-scope="scope">
                        <span>{{ scope.row.categoryName }}</span>
                      </template>
                    </el-table-column>
                    <el-table-column
                      label="型号"
                      min-width="110px"
                      align="center"
                    >
                      <template slot-scope="scope">
                        <span>{{ scope.row.model }}</span>
                      </template>
                    </el-table-column>
                    <el-table-column
                      label="规格"
                      min-width="110px"
                      align="center"
                    >
                      <template slot-scope="scope">
                        <span>{{ scope.row.Specifications }}</span>
                      </template>
                    </el-table-column>
                    <el-table-column
                      label="产品名称"
                      min-width="110px"
                      align="center"
                    >
                      <template slot-scope="scope">
                        <span>{{ scope.row.productsName }}</span>
                      </template>
                    </el-table-column>
                    <el-table-column
                      label="合同数量"
                      min-width="110px"
                      align="center"
                    >
                      <template slot-scope="scope">
                        <span>{{ scope.row.planNums }}</span>
                      </template>
                    </el-table-column>
                    <el-table-column
                      label="已发数量"
                      min-width="110px"
                      align="center"
                    >
                      <template slot-scope="scope">
                        <span>{{ scope.row.sendNums }}</span>
                      </template>
                    </el-table-column>
                    <el-table-column
                      label="本次发货数量"
                      min-width="110px"
                      align="center"
                    >
                      <template slot-scope="scope">
                        <span v-if="create.dialogStatus == 'see'">{{
                          scope.row.nums
                        }}</span>
                        <el-input
                          v-if="
                            create.dialogStatus == 'update' ||
                            create.dialogStatus == 'create'
                          "
                          v-model="scope.row.nums"
                          style="width: 95%; padding: 10px 0"
                        />
                      </template>
                    </el-table-column>

                    <el-table-column
                      label="单价(元)"
                      min-width="110px"
                      align="center"
                    >
                      <template slot-scope="scope">
                        <span>{{ scope.row.price }}</span>
                      </template>
                    </el-table-column>

                    <el-table-column
                      label="总价(元)"
                      min-width="110px"
                      align="center"
                    >
                      <template slot-scope="scope">
                        <span>{{ scope.row.sumPrice2 }}</span>
                      </template>
                    </el-table-column>

                    <el-table-column
                      label="备注"
                      min-width="280px"
                      align="center"
                    >
                      <template slot-scope="scope">
                        <span v-if="create.dialogStatus == 'see'">{{
                          scope.row.remark
                        }}</span>
                        <el-input
                          v-if="
                            create.dialogStatus == 'update' ||
                            create.dialogStatus == 'create'
                          "
                          v-model="scope.row.remark"
                          type="textarea"
                          :autosize="{ minRows: 1.3, maxRows: 4 }"
                          style="width: 95%; padding: 10px 0"
                        />
                      </template>
                    </el-table-column>
                    <el-table-column
                      v-if="
                        create.dialogStatus == 'update' ||
                        create.dialogStatus == 'create'
                      "
                      label="操作"
                      align="center"
                      width="110"
                      class-name="small-padding fixed-width"
                      fixed="right"
                    >
                      <template slot-scope="{ row }">
                        <el-button
                          v-if="
                            create.dialogStatus == 'update' ||
                            create.dialogStatus == 'create'
                          "
                          class="miniDanger"
                          @click="delivery_delete(row)"
                          >删除</el-button
                        >
                      </template>
                    </el-table-column>
                  </el-table>
                </div>
              </el-row>

              <el-row type="flex" justify="end">
                <el-col style="color: #ff4949" :span="6" :offset="18"
                  >列表货物总价：{{ devliSumPrice }}</el-col
                >
              </el-row>
              <el-divider></el-divider>

              <!-- <h3>备货清单</h3> -->
              <!-- <el-row  v-if = "false" >
                    <el-form-item label="备货单号：" prop="stockupId">
                      <el-select ref="stockupId" v-model="create.stockupCodeId" filterable  class="filter-item" style="width: 100%;"  @change="change_stockupCode">
                        <el-option v-for="item in create.stockupCodeList" :key="item.name" :label='item.name' :value="item.id">
                        </el-option>
                      </el-select>
                    </el-form-item>

                </el-row> -->

              <!-- <el-row>
                  <div class="table">
                    <el-table  key="0"  :data="tableStockList" border fit highlight-current-row style="width: 100%;" :row-style="rowStyle" :cell-style="cellStyle" class="elTable table-fixed">

                          <el-table-column label="序号" align="center" type="index" width="50px">
                            <template slot-scope="scope">
                              <span>{{ scope.row.sort  }}</span>
                            </template>
                          </el-table-column>
                          <el-table-column label="备货单号" min-width="130px" align="center">
                            <template slot-scope="scope">
                              <span>{{ scope.row.stockupCode }}</span>
                            </template>
                          </el-table-column>
                          <el-table-column label="类别" min-width="110px" align="center">
                            <template slot-scope="scope">
                              <span>{{ scope.row.categoryName  }}</span>
                            </template>
                          </el-table-column>
                          <el-table-column label="型号" min-width="110px" align="center">
                            <template slot-scope="scope">
                              <span>{{ scope.row.model }}</span>
                            </template>
                          </el-table-column>
                          <el-table-column label="规格" min-width="110px" align="center">
                            <template slot-scope="scope">
                              <span>{{ scope.row.Specifications }}</span>
                            </template>
                          </el-table-column>
                          <el-table-column label="货品名称" min-width="110px" align="center">
                            <template slot-scope="scope">
                              <span>{{ scope.row.productsName }}</span>
                            </template>
                          </el-table-column>


                          <el-table-column label="数量" min-width="110px" align="center">
                            <template slot-scope="scope">
                              <span v-if="create.dialogStatus == 'see'">{{ scope.row.nums }}</span>
                              <el-input v-if="create.dialogStatus == 'update' ||  create.dialogStatus == 'create' " v-model="scope.row.nums"   type="number"  />
                            </template>
                          </el-table-column>
                          <el-table-column label="单价(元)" min-width="110px" align="center">
                            <template slot-scope="scope">
                              <span>{{ scope.row.price }}</span>
                            </template>
                          </el-table-column>

                          <el-table-column label="总价(元)" min-width="110px" align="center">
                            <template slot-scope="scope">
                              <span>{{ scope.row.sumPrice  }}</span>
                            </template>
                          </el-table-column>

                          <el-table-column label="备注" min-width="280px" align="center">
                            <template slot-scope="scope">
                              <span v-if="create.dialogStatus == 'see'">{{ scope.row.remark }}</span>
                              <el-input v-if="create.dialogStatus == 'update' ||  create.dialogStatus == 'create' " v-model="scope.row.remark" type="textarea" :autosize="{ minRows: 1.3, maxRows: 4}" style="width:95%;padding:10px 0;" />
                            </template>
                          </el-table-column>
                      <el-table-column v-if="create.dialogStatus == 'update' ||  create.dialogStatus == 'create' " label="操作" align="center" width="110" class-name="small-padding fixed-width" fixed="right">
                            <template slot-scope="{row}">
                              <el-button v-if="create.dialogStatus == 'update' ||  create.dialogStatus == 'create' " class="miniDanger" @click="stock_delete(row)">删除</el-button>
                            </template>
                          </el-table-column>

                    </el-table>

                  </div>
                </el-row> -->

              <!-- <el-row type="flex"  >
                  <el-col style="color:#FF4949;" :span="6" :offset="18">列表货物总价：{{stockSumPrice}}</el-col>
                </el-row>
                <el-divider></el-divider> -->

              <!-- <h3>发货图片</h3> -->
              <el-row>
                <el-form-item label="发货图片：" prop="deliveryPhoto">
                  <!-- <span style="color:#f57272;position:absolute;top:0px;left:-92px">*</span> -->
                  <el-upload
                    id="uploadPic"
                    list-type="picture-card"
                    class="uploadPic"
                    :action="uploadImageUrl"
                    :limit="1"
                    :headers="headers"
                    :file-list="fileList"
                    :on-preview="handlePicPreview"
                    :auto-upload="true"
                    :on-change="
                      (file, fileList) => {
                        return handlePicChange(file, fileList);
                      }
                    "
                    :on-success="
                      (response, file, fileList) => {
                        return handlePicSuccess(response, file, fileList);
                      }
                    "
                    :on-remove="
                      (file, fileList) => {
                        return handlePicRemove(file, fileList);
                      }
                    "
                  >
                    <i slot="default" class="el-icon-plus"></i>
                  </el-upload>
                  <el-dialog
                    :visible.sync="dialogVisible"
                    append-to-body
                    width="40%"
                  >
                    <img width="80%" :src="dialogImageUrl" alt="" />
                  </el-dialog>
                </el-form-item>
              </el-row>
            </el-col>
          </el-row>
        </el-form>
        <div slot="footer" class="dialog-footer">
          <el-button class="cancelClose" @click="dialog_close()"
            >关闭</el-button
          >

          <el-button
            v-if="
              create.dialogStatus === 'create' ||
              create.dialogStatus === 'update'
            "
            class="success"
            :disabled="isokDisable"
            @click="
              create.dialogStatus === 'create'
                ? add_dialog_save()
                : form_edit_save()
            "
            >确认</el-button
          >
        </div>
      </div>
    </el-dialog>

    <!-- 备货单详情 -->
    <el-dialog
      title="备货单详情"
      :visible.sync="seeStock.dialogFormVisible"
      top="10px"
      :close-on-click-modal="false"
      width="95%"
    >
      <div class="app-add">
        <StockDetail :stock-data="stockData" ref="childstock" />

        <div slot="footer" class="dialog-footer">
          <el-button class="success" @click="add_stock_save()">确认</el-button>
          <el-button class="cancelClose" @click="add_stock_cancel()"
            >关闭</el-button
          >
        </div>
      </div>
    </el-dialog>

    <!-- 撤销 -->
    <el-dialog
      title="确认是否撤销"
      :visible.sync="revoke.dialogFormVisible"
      :close-on-click-modal="false"
      width="60%"
    >
      <div class="app-add">
        <el-form
          ref="revoketemp"
          :rules="revoke.rules"
          :model="revoke.temp"
          label-position="right"
          label-width="150px"
          style="width: 80%; margin: 0 auto 50px"
        >
          <el-form-item label="撤销原因：" prop="revokeReason">
            <el-input
              ref="remark"
              v-model="revoke.temp.revokeReason"
              type="textarea"
              :autosize="{ minRows: 4, maxRows: 8 }"
              :rows="8"
              placeholder="请输入备注，最多200个字"
              maxlength="200"
              class="filter-item"
              style="width: 100%"
            />
          </el-form-item>
        </el-form>
        <div slot="footer" class="dialog-footer">
          <el-button
            class="cancelClose"
            @click="
              revoke.dialogFormVisible = false;
              get_table_data();
            "
            >关闭</el-button
          >
          <el-button class="success" @click="form_revoke_save()"
            >确认</el-button
          >
        </div>
      </div>
    </el-dialog>

    <!-- 查看/反馈 -->
    <el-dialog
      title="合同详情"
      :visible.sync="createSee.dialogFormVisible"
      :close-on-click-modal="false"
      width="95%"
      :before-close="dialog_close_see"
    >
      <div class="app-add">
        <el-tabs v-model="activeName" type="card">
          <el-tab-pane label="合同信息" name="first">
            <ContractMoreDetail :conmore-data="conmoreData" />
          </el-tab-pane>
          <el-tab-pane label="合同履历" name="second">
            <ContractCustomerDetail :concustomer-data="concustomerData" />
          </el-tab-pane>
        </el-tabs>
        <div slot="footer" class="dialog-footer">
          <el-button class="cancelClose" @click="dialog_close_see()"
            >关闭</el-button
          >
        </div>
      </div>
    </el-dialog>

    <el-dialog
      title="生成服务工单"
      :visible.sync="createServiceNo.dialogFormVisible"
      :close-on-click-modal="false"
      width="40%"
    >
      <div class="app-add">
        <el-form
          ref="createServiceForm"
          :rules="createServiceNo.rules"
          :model="createServiceNo.temp"
          label-position="right"
          label-width="150px"
          style="width: 80%; margin: 0 auto 50px"
        >
          <el-form-item label="是否生成服务工单：" prop="isCreateServiceNo">
            <el-select
              ref="isCreateService"
              v-model="createServiceNo.temp.isCreateServiceNo"
              class="filter-item"
              style="width: 100%"
              allow-create
            >
              <el-option
                v-for="item in isCreateServiceNoList2"
                :key="item.id"
                :label="item.name"
                :value="item.id"
              />
            </el-select>
          </el-form-item>

          <!-- <el-form-item
            label="服务项目："
            prop="projectId"
            v-if="createServiceNo.temp.isCreateServiceNo === '1'"
          >
            <el-select
              placeholder="请选择服务项目"
              ref="project"
              v-model="createServiceNo.temp.projectId"
              class="filter-item"
              style="width: 100%"
              allow-create
            >
              <el-option
                v-for="item in projectOptions"
                :key="item.id"
                :label="item.name"
                :value="item.id"
              />
            </el-select>
          </el-form-item> -->
          <el-form-item
            label="备注："
            prop="remark"
            v-if="createServiceNo.temp.isCreateServiceNo === '1'"
          >
            <el-input
              ref="remark"
              v-model="createServiceNo.temp.remark"
              type="text"
              value="发货自动生成服务工单"
              maxlength="200"
              class="filter-item"
              style="width: 100%"
            />
          </el-form-item>
        </el-form>
        <div slot="footer" class="dialog-footer">
          <el-button class="cancelClose" @click="handleNoService()"
            >关闭</el-button
          >
          <el-button class="success" @click="handleConfirmService()"
            >确认</el-button
          >
        </div>
      </div>
    </el-dialog>
  </div>
</template>

<script>
import {
  GetDataByName,
  PostDataByName,
  failproccess,
  ExecDataByConfig,
  GetDataByNames,
  checkButtons,
  calculativeWidth,
  wxpush,
  downloadfileCRM,
} from "@/api/common";
import Cookies from "js-cookie";
import { parseTime, json2excel } from "@/utils/index.js";
// import littleTable from './components/littleTable'
import Pagination from "@/components/Pagination";
import { MessageBox } from "element-ui";
import { getToken } from "@/utils/auth";

import ContractMoreDetail from "@/componentView/ContractMoreDetail.vue";
import ContractCustomerDetail from "@/componentView/ContractCustomerDetail.vue";
import axios from "axios";
import StockDetail from "@/componentView/StockDetail.vue";

export default {
  name: "DeliveryRecord",
  components: {
    Pagination,
    StockDetail,
    ContractCustomerDetail,
    ContractMoreDetail,
  },

  data() {
    return {
      myHeight: document.documentElement.clientHeight - 85 - 160,
      employeid: Cookies.get("employeid"),
      isRoleEdit: [],
      isDeliveryAdd: [],
      // 项目选项
      projectOptions: [],
      rowData: {},
      isHome: "",

      dialogImageUrl: "",
      dialogVisible: false,
      //图片请求地址
      uploadImageUrl: process.env.VUE_APP_BASE_API + "authdata/uploaderimage",
      //图片请求头
      headers: {
        optname: "insertcustompic",
        id: 1,
        token: getToken(), // 从cookie里获取token，并赋值token
      },
      //图片路径
      fileList: [],
      customerNameList: [], // 客户名称
      groupNameList: [], // 集团

      deliveryNameList: [], // 发货类型
      // 下拉框 - 快递名称
      postNameList: [], //
      receProductNameList: [],

      // 下拉框 - 单据状态
      billStatusNameList: [
        { name: "正常", id: "正常" },
        { name: "已撤销", id: "已撤销" },
      ],
      //
      isCreateServiceNoList: [
        { name: "已生成", id: "已生成" },
        { name: "未生成", id: "未生成" },
        { name: "无需服务", id: "无需服务" },
      ],
      isCreateServiceNoList2: [
        { name: "生成服务工单", id: "1" },
        { name: "无需生成服务工单", id: "2" },
      ],
      //表格请求参数~~
      tableObj: {
        getdataListParm: {
          name: "getDelivery",
          page: 1,
          offset: 1,
          pagecount: parseInt(Cookies.get("pagecount")),
          returntype: "Map",
          parammaps: {
            roleId: Cookies.get("g_roleId"),
            userId: Cookies.get("g_userId"),
            customerName: "",
            deliveryCode: "",
            stockupCodes: "",
            customerId: "",
            groupId: "",
            postName: "",
            postCode: "",
            deliveryAddress: "",
            inputDatetime: "",
            beginDate: "",
            endDate: "",
            statusName: "",
          },
        },
        tableKey: 0,
        list: [],
        total: 0,
        listLoading: true,
        temp: {},
      },
      createSee: {
        dialogFormVisible: false,
      },
      activeName: "first",
      download: {
        getdataListParm: {
          name: "getDelivery",
          page: 1,
          offset: 1,
          pagecount: parseInt(Cookies.get("pagecount")),
          returntype: "Map",
          parammaps: {
            roleId: Cookies.get("g_roleId"),
            userId: Cookies.get("g_userId"),
            customerName: "",
            deliveryCode: "",
            stockupCodes: "",
            customerId: "",
            groupId: "",
            postName: "",
            postCode: "",
            deliveryAddress: "",
            inputDatetime: "",
            beginDate: "",
            endDate: "",
            statusName: "",
          },
        },
        tableKey: 0,
        list: [],
        total: 0,
        listLoading: true,
        temp: {},
      },

      //客户资料详情组件
      conmoreData: { id: "" },
      concustomerData: { id: "" },

      receiverList: [
        // {"name":1,"id":1},
        // {"name":2,"id":2},
      ],

      // 新增/编辑
      create: {
        dialogFormVisible: false,
        dialogStatus: "",
        temp: {
          customerId: "",
          deliveryTypeId: "",
          groupId: "",
          groupName: "",
          sendDate: parseTime(new Date(), "{y}-{m}-{d}"),
          receiverName: "",
          receiverTel: "",
          postName: "",
          postCode: "",
          deliveryAddress: "",
          stockupIds: "",
          remark: "",
          id: "",
          modifyName: "add",
          receiverChoose: "true",
          deliveryPhoto: -1,
          deliveryPhotoUrl: "",
        },

        rules: {
          customerId: [{ required: true, message: "必填", trigger: "blur" }],
          //  groupId: [{ required: true, message: '必填', trigger: 'blur' }],
          sendDate: [{ required: true, message: "必填", trigger: "blur" }],
          receiverName: [{ required: true, message: "必填", trigger: "blur" }],
          receiverTel: [
            { required: true, message: "电话不能为空" },
            { min: 11, max: 11, message: "必填11个字符", trigger: "blur" },
          ],
          postName: [{ required: true, message: "必填", trigger: "blur" }],
          postCode: [{ required: true, message: "必填", trigger: "blur" }],
          deliveryAddress: [
            { required: true, message: "必填", trigger: "blur" },
          ],

          stockupIds: [{ required: true, message: "必填", trigger: "blur" }],
          project: [
            {
              required: true,
              message: "必填",
              trigger: "blur",
              validator: (rule, value, callback) => {
                if (
                  this.createServiceNo.temp.isCreateServiceNo === "1" &&
                  !value
                ) {
                  callback(new Error("当需要生成服务单时，服务项目为必填项"));
                } else {
                  callback();
                }
              },
            },
          ],
        },
        // 客户名称、
        getdataListParmCust: {
          name: "getCustomerByGroupId",
          returntype: "Map",
          parammaps: { groupId: "" },
        },
        customerNameList: [],
        deliveryNameList: [], // 发货类型

        // 发货详情小表格 - 编辑和查看时才也有
        getdataListParmDelivery: {
          name: "getDeliveryGoodsByDeliveryId",
          returntype: "Map",
          parammaps: { deliveryId: "" },
        },

        // 弹窗里的表格，关联发货清单时调用
        getdataListParm3: {
          name: "getStockGoodsBySid",
          returntype: "Map",
          parammaps: { stockupId: "" },
        },

        // 弹窗里的表格，仅编辑查看时调用
        getdataListParm4: {
          name: "getStockupGoodsByDeliveryId",
          returntype: "Map",
          parammaps: { deliveryId: "" },
        },

        //备货内容 - 新增时用
        getdataListStockupCode: {
          name: "getStockGoodsBySidOfDelivery",
          returntype: "Map",
          parammaps: { stockupId: "" },
        },

        //备货内容 - 编辑时用
        getdataListStockupCode2: {
          name: "getStockGoodsBySidOfDelivery",
          returntype: "Map",
          parammaps: { id: "", stockupId: "" },
        },
        //备货内容 - 查看时用
        getdataListStockupCode3: {
          name: "getStockGoodsBySidOfDelivery2",
          returntype: "Map",
          parammaps: { id: "", stockupId: "" },
        },

        //下拉框 - 备货单号数组
        stockupCodeList: [],
      },
      textMap: {
        create: "新增",
        see: "查看",
        update: "编辑",
      },

      //备货单的ID集合
      stockupCodeIdArr: [],

      stockupIds: "",

      //备货单的合同的集合
      contractCodeArr: [],
      //备货单的合同的ID集合
      contractCodeIdArr: [],
      //备货单的合同的名字和ID集合
      contractCodeNameIdArr: [],

      //发货表格集合
      tableDeliveryList: [],
      //备货表格集合
      tableStockList: [],

      //备货详情组件
      stockData: { id: "" },
      seeStock: {
        dialogFormVisible: false,
      },

      // 撤销
      revoke: {
        dialogFormVisible: false,
        dialogStatus: "",
        temp: { revokeReason: "", id: "" },
        rules: {
          revokeReason: [{ required: true, message: "必填", trigger: "blur" }],
        },
      },

      devliSumPrice: 0,
      stockSumPrice: 0,

      autoWidth: 130,

      requestParam: {},
      isokDisable: false,
      selectList: [],
      rowStyle: { maxHeight: 50 + "px", height: 45 + "px" },
      cellStyle: { padding: 0 + "px" },

      // 生成工单弹窗
      createServiceNo: {
        dialogFormVisible: false,
        temp: {
          remark: "发货自动生成服务工单",
          id: "",
          deliveryCode: "",
          isCreateServiceNo: "1",
          projectId: "",
          projectName: "",
          customerId: "",
          customerName: "",
          totalQuantity: 0,
          installedQuantity: 0,
          uninstalledQuantity: 0,
          dispatcherId: "",
          dispatcherName: "",
          serviceStaffNames: "",
          serviceStaffIds: "",
          deliveryNo: "",
          deliveryId: "",
          contractNo: "",
          contractId: "",
          updateTime: "",
        },
        rules: {
          projectId: [
            {
              required: true,
              message: "必填",
              trigger: "change",
              validator: (rule, value, callback) => {
                if (
                  this.createServiceNo.temp.isCreateServiceNo === "1" &&
                  !value
                ) {
                  callback(new Error("当需要生成服务单时，服务项目为必填项"));
                } else {
                  callback();
                }
              },
            },
          ],
        },
      },
    };
  },
  computed: {
    // 设置请求头
    headers2() {
      return {
        token: getToken(),
      };
    },
    uploadData() {
      return {
        // name: 'updateUpKeepSpot',
        // importParams: '设备类别名称,部位,检查内容,标准',
        // sheetname: 'SheetJS'
        // date: parseTime(this.exportList.inputDatetime,'{y}-{m}'),
        useStockupId: this.stockupCodeIdArr.join(),
      };
    },
    // 设置上传地址
    uploadExcelUrl() {
      return process.env.VUE_APP_BASE_API + "importProductExcel";
    },
  },

  watch: {
    tableDeliveryList: {
      deep: true,
      handler: function (newValue, oldValue) {
        //计算每行总价

        for (let j = 0; j < newValue.length; j++) {
          if (newValue[j].nums && newValue[j].price) {
            this.tableDeliveryList[j].sumPrice2 =
              parseFloat(newValue[j].nums) * parseFloat(newValue[j].price);
          }
        }

        //计算总价格
        var sum = 0;
        this.tableDeliveryList.forEach(function (i) {
          if (parseInt(i.nums) && parseFloat(i.price)) {
            sum = parseInt(i.nums) * parseFloat(i.price) + sum;
          }
        });
        this.devliSumPrice = sum;
      },
    },
    tableStockList: {
      deep: true,
      handler: function (item) {
        //计算总价格
        var sum = 0;

        this.tableStockList.forEach(function (i) {
          sum = parseInt(i.nums) * parseFloat(i.price) + sum;
        });

        this.tableStockList.forEach(function (i) {
          if (parseInt(i.nums) > parseFloat(i.maxNums)) {
            i.nums = i.maxNums;
          }
        });

        this.stockSumPrice = sum;
      },
    },
  },

  created() {
    this.get_table_data();
    this.get_select_list();
    this.get_auto_buttons();

    var rowData = this.$route.params.rowData;
    var isHome = this.$route.params.isHome;

    console.log("rowData", rowData);
    console.log("isHome", isHome);

    if (isHome == "home") {
      this.rowData = rowData;
      this.isHome = isHome;
      this.form_add2();
    } else {
      this.rowData = {};
      this.isHome = "";
    }
  },

  mounted() {
    this.RoadlittleTable();
  },

  methods: {
    RoadlittleTable() {
      const vue = this;
      var littleTable = () => import("./components/littleTable");
      return (vue.littleTable = littleTable);
    },
    //获取按钮权限
    get_auto_buttons() {
      const Edit = "deliveryRecord";
      const isRoleEdit = checkButtons(
        JSON.parse(sessionStorage.getItem("buttons")),
        Edit
      );
      this.isRoleEdit = isRoleEdit;

      const DeliveryAdd = "business:delivery:add";
      const isDeliveryAdd = checkButtons(
        this.$store.state.user.buttons,
        DeliveryAdd
      );
      this.isDeliveryAdd = isDeliveryAdd;

      //操作的宽度
      // var widthCount = calculativeWidth(isDeliveryAdd,isDeliveryAdd,isDeliveryAdd)
      // this.autoWidth = widthCount
    },
    //获取所有下拉框的内容
    get_select_list() {
      var send_select_list = [
        { name: "getCustomerSelect", offset: 0, pagecount: 0, parammaps: {} },
        {
          name: "getDictListSelectByPids",
          offset: 0,
          pagecount: 0,
          parammaps: { pids: "54,60,74,79" },
        },
        {
          name: "getProductsEnable",
          offset: 0,
          pagecount: 0,
          parammaps: { enable: "1" },
        },
        {
          name: "getDeliveryTypeSelect",
          offset: 0,
          pagecount: 0,
          parammaps: { pid: "74" },
        },
      ];

      GetDataByNames(send_select_list).then((response) => {
        this.create.customerNameList = response.data.getCustomerSelect.list;
        console.log("客户名称下拉框", this.create.customerNameList);

        response.data.getDictListSelectByPids.list.map((item) => {
          if (item.pid == 54) {
            this.groupNameList.push(item);
          } else if (item.pid == 60) {
            this.postNameList.push(item);
          } else if (item.pid == 74) {
            this.deliveryNameList.push(item);
            this.create.deliveryNameList.push(item);
          } else if (item.pid == 79) {
            this.projectOptions.push(item);
          }
        });

        response.data.getProductsEnable.list.map((item) => {
          item.customerId = "";
          item.nums = "";
          item.remark = "";
          return item;
        });

        this.receProductNameList = response.data.getProductsEnable.list;
      });
    },

    //图片展示
    handlePicPreview(file) {
      this.dialogImageUrl = file.url;
      this.dialogVisible = true;
    },
    handlePicChange(file, fileList) {},
    //文件上传成功后的操作
    handlePicSuccess(response, file, fileList) {
      console.log("文件上传成功时的钩子response", response);
      console.log("文件上传成功时的钩子file", file);
      console.log("fileList", fileList);

      // //3张图片时，关闭新增的按钮
      if (fileList.length == 1) {
        document.getElementById("uploadPic").lastChild.style.display = "none";
      } else {
        document.getElementById("uploadPic").lastChild.style.display =
          "inline-block";
      }

      if (
        this.create.temp.deliveryPhoto === undefined ||
        this.create.temp.deliveryPhoto == -1
      ) {
        console.log("111");
        this.create.temp.deliveryPhoto = response.execresult.LastInsertId;
      }
      console.log("this.picArr1", this.picArr1);

      console.log("this.create.temp", this.create.temp);
    },
    //图片文件删除
    handlePicRemove(file, fileList) {
      console.log(file, "文件列表移除文件时的钩子file---");
      console.log(fileList, "文件列表移除文件时的钩子fileList--");
      // this.$set(this.create.temp, "deliveryPhoto", -1)
      // this.$set(this.create.temp, "scenePhoto2", -1)
      // this.$set(this.create.temp, "scenePhoto3", -1)
      //9张图片时，关闭新增的按钮
      if (fileList.length == 1) {
        document.getElementById("uploadPic").lastChild.style.display = "none";
      } else {
        document.getElementById("uploadPic").lastChild.style.display =
          "inline-block";
      }
      this.create.temp.deliveryPhoto = -1;

      if (fileList.length == 1) {
        this.create.temp.deliveryPhoto =
          fileList[0].response.execresult.LastInsertId;
      }
      console.log(this.create.temp);
    },

    //加载表格
    get_table_data() {
      var me = this;

      this.tableObj.listLoading = true;
      console.log(
        "this.tableObj.getdataListParm======>",
        this.tableObj.getdataListParm
      );
      GetDataByName(this.tableObj.getdataListParm).then((response) => {
        console.log("table数据======>", response.data.list);
        if (response.data.list !== null) {
          for (let i = 0; i < response.data.list.length; i++) {
            var url =
              process.env.VUE_APP_BASE_API +
              response.data.list[i].deliveryPhotoUrl;
            this.$set(response.data.list[i], "imgUrlDetil", url);
          }

          this.tableObj.list = response.data.list;
          this.tableObj.pageNum = response.data.pageNum;
          this.tableObj.pageSize = response.data.pageSize;
          this.tableObj.total = response.data.total;

          //计算操作栏宽度
          var btnNum = 0;
          var arrList = response.data.list;
          arrList.forEach(function (row) {
            var itemBtnNum = 0;
            if (me.isDeliveryAdd && row.isModify == 1) {
              itemBtnNum = itemBtnNum + 1;
            }
            if (me.isDeliveryAdd && row.isDel == 1) {
              itemBtnNum = itemBtnNum + 1;
            }
            if (row.isRevoke == 1 && me.isDeliveryAdd) {
              itemBtnNum = itemBtnNum + 1;
            }

            console.log(itemBtnNum);
            if (itemBtnNum > btnNum) {
              btnNum = itemBtnNum;
            }
          });
          console.log("btnNum=============", btnNum);
          me.autoWidth = btnNum * 90;
        } else {
          this.tableObj.list = [];
        }
        setTimeout(() => {
          this.tableObj.listLoading = false;
        }, 100);
      });
    },
    form_search() {
      console.log("点击了查询");

      if (
        this.tableObj.getdataListParm.parammaps.inputDatetime !== "" &&
        this.tableObj.getdataListParm.parammaps.inputDatetime !== null
      ) {
        this.tableObj.getdataListParm.parammaps.beginDate = parseTime(
          this.tableObj.getdataListParm.parammaps.inputDatetime[0],
          "{y}-{m}-{d}"
        );
        this.tableObj.getdataListParm.parammaps.endDate = parseTime(
          this.tableObj.getdataListParm.parammaps.inputDatetime[1],
          "{y}-{m}-{d}"
        );
      } else {
        this.tableObj.getdataListParm.parammaps.inputDatetime = "";
        this.tableObj.getdataListParm.parammaps.beginDate = "";
        this.tableObj.getdataListParm.parammaps.endDate = "";
      }
      this.tableObj.getdataListParm.offset = 1;
      this.get_table_data();
    },
    form_clear() {
      console.log("点击了重置");

      this.tableObj.getdataListParm.parammaps.customerName = "";

      this.tableObj.getdataListParm.parammaps.deliveryCode = "";
      this.tableObj.getdataListParm.parammaps.stockupCodes = "";
      this.tableObj.getdataListParm.parammaps.customerId = "";
      this.tableObj.getdataListParm.parammaps.groupId = "";
      this.tableObj.getdataListParm.parammaps.postName = "";
      this.tableObj.getdataListParm.parammaps.postCode = "";
      this.tableObj.getdataListParm.parammaps.deliveryAddress = "";
      this.tableObj.getdataListParm.parammaps.beginDate = "";
      this.tableObj.getdataListParm.parammaps.endDate = "";
      this.tableObj.getdataListParm.parammaps.inputDatetime = "";
      this.tableObj.getdataListParm.offset = 1;
      this.get_table_data();
    },

    // 新增
    form_reset() {
      this.create.temp = {
        customerName: "",
        customerId: "",
        groupId: "",
        groupName: "",
        sendDate: parseTime(new Date(), "{y}-{m}-{d}"),
        receiverName: "",
        receiverTel: "",
        receiverName: "",
        postName: "",
        postCode: "",
        deliveryAddress: "",
        stockupIds: "",
        remark: "",
        id: "",
        modifyName: "add",
        receiverChoose: "true",
        deliveryPhoto: -1,
        deliveryPhotoUrl: "",
      };
      this.stockupIdArr = [];
      this.tableArrList = [];
      this.tableDeliveryList = [];
      this.tableStockList = [];

      this.contractCodeIdArr = [];
      this.contractCodeArr = [];

      this.fileList = [];
      // document.getElementById('uploadPic').lastChild.style.display = "inline-block"
    },

    //客户失去焦点
    customer_search_blur(item) {
      console.log("客户失去焦点");
      this.tableObj.getdataListParm.parammaps.customerId = "";
      this.tableObj.getdataListParm.parammaps.customerName = "";
      this.customerNameList = [];
    },

    //模糊查询客户
    customer_search(queryString, cb) {
      console.log("模糊查询输入值", queryString);
      GetDataByName({
        name: "getCustomerNameFuzzy",
        page: 1,
        offset: 1,
        pagecount: 10,
        returntype: "Map",
        parammaps: { inputvalue: queryString },
      }).then((response) => {
        this.customerNameList = response.data.list;
        console.log("客户名称下拉框", response);
        cb(response.data.list);
      });
    },

    //模糊查询客户选择
    change_customer_select(item) {
      console.log("客户名称模糊查询选中值", item);
      this.tableObj.getdataListParm.parammaps.customerId = item.id;
      this.tableObj.getdataListParm.parammaps.customerName = item.name;
    },

    //清空客户选择
    clear_customer_select(item) {
      document.activeElement.blur();

      this.tableObj.getdataListParm.parammaps.customerId = "";
      this.tableObj.getdataListParm.parammaps.customerName = "";
    },

    //监听 - 集团
    change_group(item) {
      console.log(item);
      console.log(this.create.temp.groupId);
      this.create.temp.groupId = item;
      this.create.getdataListParmCust.parammaps.groupId = item;

      this.create.temp.customerName = "";
      this.create.temp.customerId = "";
      this.create.customerNameList = [];

      this.get_customer_list();

      //清空备货单信息
      this.create.temp.stockupCode = "";
      this.create.stockupCodeList = [];
      this.stockupCodeIdArr = [];
      this.create.temp.stockupNums = 0;
      this.tableStockList = [];

      this.$forceUpdate();
    },

    // 弹窗中的客户
    get_customer_list() {
      GetDataByName(this.create.getdataListParmCust).then((response) => {
        if (response.data.list !== null) {
          this.create.customerNameList = response.data.list;
          console.log("弹窗中的客户数据", response.data.list);
        } else {
          this.create.customerNameList = [];
        }
      });
    },

    //监听 - 下拉中客户名称
    change_customer(item) {
      console.log(item);
      this.create.temp.customerId = item;
      this.get_groupName(item);
      this.create.temp.stockupCode = "";
      this.create.stockupCodeList = [];
      this.stockupCodeIdArr = [];
      this.create.temp.stockupNums = 0;
      this.tableStockList = [];

      this.get_receiverList(item);

      this.$forceUpdate();
    },

    change_receiverName(item) {
      console.log(item);
      var findItem = this.receiverList.filter((items) => items.name == item);
      console.log(findItem);
      var receiverTel = findItem[0].telephone;
      console.log(receiverTel);

      this.create.temp.receiverTel = receiverTel;

      this.$forceUpdate();
    },

    // 获取联系人下拉
    get_receiverList(customerId) {
      var me = this;
      var send_data = {
        name: "getContacts",
        returntype: "Map",
        parammaps: { customerId: customerId },
      };
      GetDataByName(send_data).then((response) => {
        console.log(response);
        if (response.data.list !== null) {
          me.receiverList = response.data.list;
        } else {
          me.receiverList = [];
        }
      });
    },

    // 获取集团名称
    get_groupName(customerId) {
      var me = this;
      var send_data = {
        name: "getgroupNameById",
        returntype: "Map",
        parammaps: { id: customerId },
      };
      GetDataByName(send_data).then((response) => {
        console.log(response);
        if (response.data.list !== null) {
          me.create.temp.groupName = response.data.list[0].groupName;
          me.create.temp.groupId = response.data.list[0].groupId;
        } else {
          me.create.temp.groupName = "";
          me.create.temp.groupId = "";
        }
      });
    },

    //新增
    form_add() {
      var me = this;
      console.log("点击了新增");

      this.create.dialogStatus = "create";
      this.create.dialogFormVisible = true;

      this.create.temp = {
        customerName: "",
        customerId: "",
        groupId: "",
        groupName: "",
        sendDate: parseTime(new Date(), "{y}-{m}-{d}"),
        receiverName: "",
        receiverTel: "",
        receiverName: "",
        postName: "",
        postCode: "",
        deliveryAddress: "",
        stockupIds: "",
        remark: "",
        id: "",
        modifyName: "add",
        receiverChoose: "true",
        deliveryPhoto: -1,
        deliveryPhotoUrl: "",
      };
      this.stockupIdArr = [];
      this.tableArrList = [];
      this.tableDeliveryList = [];
      this.tableStockList = [];

      this.contractCodeIdArr = [];
      this.contractCodeArr = [];

      this.fileList = [];

      document.getElementById("uploadPic").lastChild.style.display =
        "inline-block";
    },

    form_add2() {
      var me = this;
      console.log("点击了新增");

      this.$nextTick(() => {
        this.contractCodeIdArr = [];
        this.contractCodeArr = [];

        console.log("this.rowData", this.rowData);
        this.create.temp.groupId = this.rowData.groupId;
        this.create.temp.customerId = this.rowData.customerId;
        this.create.temp.groupName = this.rowData.groupName;
        this.create.temp.customerName = this.rowData.customerName;

        this.create.temp.receiverName = this.rowData.receiverName;
        this.create.temp.receiverTel = this.rowData.receiverTel;
        this.create.temp.remark = this.rowData.remark;

        this.create.temp.postName = this.rowData.postName;
        this.create.temp.postCode = this.rowData.postCode;
        this.create.temp.deliveryAddress = this.rowData.deliveryAddress;
        // this.create.getdataListParmCust.parammaps.groupId = this.rowData.groupId
        // this.get_customer_list()

        this.stockupCodeIdArr = [this.rowData.id];

        var contractCodeIdArr = [];
        var contractCodeArr = [];
        var contractCodeNameIdArr = [];

        if (this.rowData.contractId && this.rowData.contractId !== 0) {
          contractCodeIdArr.push(me.rowData.contractId);
          contractCodeArr.push(me.rowData.contractCode);
          contractCodeNameIdArr.push({
            name: me.rowData.contractCode,
            id: me.rowData.contractId,
          });
        }
        me.contractCodeIdArr = contractCodeIdArr;
        me.contractCodeArr = contractCodeArr;
        me.contractCodeNameIdArr = contractCodeNameIdArr;

        this.create.getdataListStockupCode.parammaps.stockupId =
          this.rowData.id;
        this.getStockNameList();

        // this.create.getdataListParm1.parammaps.customerId = this.rowData.customerId
        // this.get_postalNameList()
        // this.create.getdataListParm4.parammaps.id = this.rowData.id
        // this.getReceProduct2()
        // this.create.getdataListParmCust.parammaps.groupId = this.rowData.groupId
        // this.get_customer_list()

        //加载联系人下拉
        this.get_receiverList(this.rowData.customerId);
      });

      this.create.dialogStatus = "create";
      this.create.dialogFormVisible = true;

      this.$nextTick(() => {
        document.getElementById("uploadPic").lastChild.style.display =
          "inline-block";
      });
    },
    //新增保存
    add_dialog_save() {
      console.log("点击了新增保存");
      var me = this;
      this.isokDisable = true;
      setTimeout(() => {
        this.isokDisable = false;
      }, 1000);
      this.$refs["temp"].validate((valid) => {
        if (valid) {
          this.isokDisable = true;
          setTimeout(() => {
            this.isokDisable = false;
          }, 1000);

          // if(this.create.temp.deliveryPhoto == "-1"){
          //   this.$message({ type: 'error', message: '请添加照片！', duration: 2000 })
          //   return false
          // }

          if (this.tableDeliveryList.length == 0) {
            me.$message({
              type: "error",
              message: "必须有发货品！",
              duration: 2000,
            });
            return false;
          }

          var isNo = true;
          this.tableDeliveryList.forEach(function (i) {
            if (i.nums == "" || i.nums == null) {
              isNo = false;
              return false;
            }
          });
          if (!isNo) {
            me.$message({
              type: "error",
              message: "每行发货数量必须填写！",
              duration: 2000,
            });
            return false;
          }

          var stockupCodeIdArr = this.stockupCodeIdArr;

          var customerId = this.create.temp.customerId;

          this.tableDeliveryList.map(function (i) {
            return (i.customerId = customerId);
          });

          // this.tableStockList.map(function (i) {
          //   return (i.customerId = customerId)
          // })

          this.create.temp.stockupIds = stockupCodeIdArr.join();
          this.create.temp.createrId = Cookies.get("employeid");

          var stockupIds = this.create.temp.stockupIds;

          if (me.contractCodeIdArr && me.contractCodeIdArr.length !== 0) {
            this.create.temp.contractCodeArr = me.contractCodeArr.join();
            this.create.temp.contractCodeIdArr = me.contractCodeIdArr.join();
          } else {
            this.create.temp.contractCodeArr = "";
            this.create.temp.contractCodeIdArr = "";
          }

          // this.tableDeliveryList.map(function (i) {
          //   return (i.useStockupId = stockupIds)
          // })

          var send_data1 = {
            common: { returnmap: "0" },
            data: [
              {
                name: "insertDelivery",
                type: "e",
                parammaps: this.create.temp,
              },
              {
                name: "insertDeliveryGoodsNew",
                resultmaps: {
                  list: this.tableDeliveryList,
                },
                children: [
                  {
                    name: "insertDeliveryGoodsNew",
                    type: "e",
                    parammaps: {
                      deliveryId: "@insertDelivery.LastInsertId",
                      customerId: "@insertDeliveryGoodsNew.customerId",
                      productsId: "@insertDeliveryGoodsNew.productsId",
                      nums: "@insertDeliveryGoodsNew.nums",
                      remark: "@insertDeliveryGoodsNew.remark",
                      useStockupId: "@insertDeliveryGoodsNew.useStockupId",
                    },
                  },
                ],
              },
              {
                name: "updateStockupOnSendNums",
                type: "e",
                parammaps: { id: stockupIds },
              },

              {
                name: "insertContactsOfService",
                type: "e",
                parammaps: {
                  customerId: this.create.temp.customerId,
                  contactName: this.create.temp.receiverName,
                  telephone: this.create.temp.receiverTel,
                },
              },
            ],
          };

          console.log("this.tableDeliveryList", this.tableDeliveryList.length);

          // console.log('新增保存发送参数 - 有备货', send_data1)
          // console.log('新增保存发送参数  - 无备货', send_data2)

          //无备货
          // if(this.tableStockList.length == 0){
          if (false) {
            ExecDataByConfig(send_data2).then((response) => {
              if (response.msg !== "fail") {
                this.$notify({
                  title: "成功",
                  message: "保存成功",
                  type: "success",
                  duration: 2000,
                });
                this.create.dialogFormVisible = false;
                this.get_table_data();

                var rowId = response.data[0].resultmaps.LastInsertId;
                this.get_wxPush(21, "发货", rowId);

                if (this.isHome == "home") {
                  // 回到首页
                  this.$router.push({
                    name: "Dashboard",
                    params: { isTodo: "delivery" },
                  });
                }
              } else {
                this.$notify({
                  title: "失败",
                  message: "保存失败" + response.data,
                  type: "error",
                  duration: 2000,
                });
              }
            });
            //有备货
          } else {
            ExecDataByConfig(send_data1).then((response) => {
              if (response.msg !== "fail") {
                this.$notify({
                  title: "成功",
                  message: "保存成功",
                  type: "success",
                  duration: 2000,
                });
                this.create.dialogFormVisible = false;
                this.get_table_data();

                var rowId = response.data[0].resultmaps.LastInsertId;
                this.get_wxPush(21, "发货", rowId);

                if (this.isHome == "home") {
                  // 回到首页
                  this.$router.push({
                    name: "Dashboard",
                    params: { isTodo: "delivery" },
                  });
                }
              } else {
                this.$notify({
                  title: "失败",
                  message: "保存失败" + response.data,
                  type: "error",
                  duration: 2000,
                });
              }
            });
          }

          // ExecDataByConfig(send_data).then(response => {

          //   if (response.msg !== 'fail') {
          //     this.$notify({ title: '成功', message: '保存成功', type: 'success', duration: 2000 })
          //     this.create.dialogFormVisible = false
          //     this.get_table_data()
          //   } else {
          //     this.$notify({ title: '失败', message: '保存失败' + response.data, type: 'error', duration: 2000 })
          //   }
          // })
        }
      });
    },
    //微信推送
    get_wxPush(remindId, remindTypeName, rowId) {
      var send_weixin_data1 = {
        name: "getRemindData",
        parammaps: {
          userId: Cookies.get("g_userId"),
          remindId: remindId,
          remindTypeName: remindTypeName,
          rowId: rowId,
        },
      };

      GetDataByName(send_weixin_data1).then((response) => {
        console.log("微信推送(获取参数)======>", response);
        if (response.data.message == "ok") {
          var receiverStr = response.data.list[0].receivers;
          var receiverArr = receiverStr.split(",");
          var value1 = response.data.list[0].value1;
          var value2 = response.data.list[0].value2;
          var value3 = response.data.list[0].value3;
          var value4 = response.data.list[0].value4;
          var send_weixin_data2 = {
            target: receiverArr,
            serviceId: remindId,
            content: [
              { color: "#173177", value: value1 },
              { color: "#173177", value: value2 },
              { color: "#173177", value: value3 },
              { color: "#173177", value: value4 },
            ],
          };

          wxpush(send_weixin_data2).then((response) => {
            console.log("微信推送(获取参数)======>", response);
          });
          // this.tableSumMoney = response.data.list[0].totlePrice
        } else {
          // this.$notify({ title: '失败', message: '消息推送失败', type: 'error', duration: 2000 })
        }
      });
    },
    // 查看
    form_see(row) {
      this.form_reset();
      console.log("点击了查看", row);

      // this.$nextTick(() => {
      //   this.$refs.temp.resetFields()
      //   this.create.temp = Object.assign({}, row)

      // })

      this.create.temp = Object.assign({}, row);

      this.create.temp.id = row.id;

      if (row.stockupIds) {
        this.stockupCodeIdArr = row.stockupIds.split(",");
        this.seeStockupIds = row.stockupIds;
      } else {
        this.stockupCodeIdArr = [];
        this.seeStockupIds = "";
      }

      this.create.getdataListParmDelivery.parammaps.deliveryId = row.id;
      this.getDeliveryList();

      if (row.contractCodeIdArr) {
        this.contractCodeArr = row.contractCodeArr.split(",");
        this.contractCodeIdArr = row.contractCodeIdArr.split(",");
      } else {
        this.contractCodeArr = [];
        this.contractCodeIdArr = [];
      }

      // this.create.getdataListParmCust.parammaps.groupId = row.groupId
      // this.get_customer_list()

      // if (row.stockupIds !== "") {
      //     this.get_stock_select(row.id)
      // } else {
      //     this.tableStockList = []
      // }

      // console.log('点击了编辑', row.stockupIds)

      // if (row.stockupIds !== "") {
      //    this.create.getdataListStockupCode3.parammaps.id = row.id
      //     this.create.getdataListStockupCode3.parammaps.stockupId = row.stockupIds
      //     this.getStockNameList3()
      // } else {
      //   this.tableStockList = []
      // }

      // 现场照片
      const urlArray = [];
      const urlArrayId = [];
      const fileList = [];

      if (this.create.temp.deliveryPhotoUrl != undefined) {
        urlArray.push(
          process.env.VUE_APP_BASE_API + this.create.temp.deliveryPhotoUrl
        );
        urlArrayId.push(this.create.temp.deliveryPhoto);
      }

      console.log("urlArray", urlArray);
      console.log("urlArrayId", urlArrayId);

      for (let i = 0; i < urlArray.length; i++) {
        var urlObj = {
          url: "",
          response: { execresult: { LastInsertId: "" } },
        };
        urlObj.url = urlArray[i];
        // this.$set(urlObj, 'url', urlArray[i])
        // this.$set(urlObj, 'response', 15)
        urlObj.response.execresult.LastInsertId = urlArrayId[i];
        fileList.push(urlObj);
      }

      this.fileList = fileList;

      console.log("fileList", fileList);
      this.create.dialogStatus = "see";
      this.create.dialogFormVisible = true;

      this.$nextTick(() => {
        //1张图片时，关闭新增的按钮
        if (fileList.length == 1 || fileList.length == 0) {
          document.getElementById("uploadPic").lastChild.style.display = "none";
        } else {
          document.getElementById("uploadPic").lastChild.style.display =
            "inline-block";
        }
      });
    },
    beforeImport(file) {
      const isLt2M = file.size / 1024 / 1024 < 2;
      if (!isLt2M) {
        this.$message.error("上传文件大小不能超过 2MB!");
      }
      this.fullscreenLoading = true;
      return isLt2M;
    },
    handleImportSuccess(res, file) {
      const that = this;

      console.log(res);
      if (res.msg == "ok") {
        that.$message({
          title: "成功",
          message: "导入成功!",
          type: "success",
          duration: 2000,
        });

        if (res.data.list !== null) {
          that.tableDeliveryList = res.data.list;
        } else {
          that.tableDeliveryList = [];
        }
      } else {
        that.$notify({
          title: "失败",
          message: "上传失败" + res.msg,
          type: "danger",
          duration: 2000,
        });
        that.$refs.uploadEx.clearFiles();
      }
    },

    form_down() {
      var send_data = {
        fileId: 166,
      };

      downloadfileCRM(send_data).then((res) => {
        const content = res;
        const blob = new Blob([content]);

        if ("download" in document.createElement("a")) {
          // 非IE下载
          const elink = document.createElement("a");
          elink.download = "发货清单模板.xlsx";
          elink.style.display = "none";
          elink.href = URL.createObjectURL(blob);
          document.body.appendChild(elink);
          elink.click();
          URL.revokeObjectURL(elink.href); // 释放URL 对象
          document.body.removeChild(elink);
        } else {
          // IE10+下载
          navigator.msSaveBlob(blob, "发货清单模板.xlsx");
        }
      });

      // const url = process.env.VUE_APP_BASE_API + 'downloadfileCRM' // 根目录+后端下载的接口
      // axios({
      //   method: 'POST',
      //   url: url,
      //   data: send_data,
      //   headers: { token: getToken(), optname: 'insertcustomdoc' },
      //   responseType: 'blob'
      // }).then(res => {

      //   const content = res
      //   const blob = new Blob([content])

      //   if ('download' in document.createElement('a')) { // 非IE下载
      //     const elink = document.createElement('a')
      //     elink.download = fileName
      //     elink.style.display = 'none'
      //     elink.href = URL.createObjectURL(blob)
      //     document.body.appendChild(elink)
      //     elink.click()
      //     URL.revokeObjectURL(elink.href) // 释放URL 对象
      //     document.body.removeChild(elink)
      //   } else { // IE10+下载
      //     navigator.msSaveBlob(blob, fileName)
      //   }

      // })
    },

    // 导出
    form_export2(item) {
      const downLoad = {
        parammaps: {
          deliveryCode: this.create.temp.deliveryCode,
        },
      };
      const url = process.env.VUE_APP_BASE_API + "delivery/excel/export"; // 请求下载文件的地址
      axios({
        method: "post",
        url: url,
        data: downLoad,
        headers: { token: getToken(), optname: "insertcustomdoc" },
        responseType: "blob",
      }).then((res) => {
        if (!res) return;
        // this.percentage = 99
        // setTimeout(() => {
        //   this.isPercentage = false
        // }, 2000)
        const blob = new Blob([res.data], { type: "application/octet-stream" });
        const url = window.URL.createObjectURL(blob);
        const aLink = document.createElement("a");
        aLink.style.display = "none";
        aLink.href = url;
        const docname = "发货清单.xlsx";
        aLink.setAttribute("download", docname); // 下载的文件
        document.body.appendChild(aLink);
        aLink.click();
        document.body.removeChild(aLink);
        window.URL.revokeObjectURL(url);
      });
    },

    // 获取查看弹窗中的备货下拉框 - 用不上了
    get_stock_select(id) {
      var send_data = {
        name: "getStockupCodeByDeliveryId",
        returntype: "Map",
        parammaps: { deliveryId: id },
      };
      GetDataByName(send_data).then((response) => {
        console.log("获取查看弹窗中的备货下拉框", response.data.list);
        if (response.data.list !== null) {
          this.create.stockupCodeList = response.data.list;

          if (this.create.dialogStatus == "update") {
            this.create.getdataListStockupCode2.parammaps.id = id;
            this.create.getdataListStockupCode2.parammaps.stockupId =
              response.data.list[0].id;
            this.getStockNameList2();
          }

          if (this.create.dialogStatus == "see") {
            this.create.getdataListStockupCode3.parammaps.id = id;
            this.create.getdataListStockupCode3.parammaps.stockupId =
              response.data.list[0].id;
            this.getStockNameList3();
          }
        } else {
          this.create.stockupCodeList = [];
        }
      });
    },

    // 编辑
    form_edit(row) {
      //this.form_reset()
      console.log("点击了编辑", row);

      // this.$nextTick(() => {
      //   this.$refs.temp.resetFields()
      //   this.create.temp = Object.assign({}, row)

      // })

      this.contractCodeIdArr = [];
      this.contractCodeArr = [];

      this.create.temp = Object.assign({}, row);

      this.create.temp.id = row.id;

      if (row.stockupIds) {
        this.stockupCodeIdArr = row.stockupIds.split(",");
      } else {
        this.stockupCodeIdArr = [];
      }

      this.create.getdataListParmDelivery.parammaps.deliveryId = row.id;
      this.getDeliveryList();

      if (row.contractCodeIdArr) {
        this.contractCodeArr = row.contractCodeArr.split(",");
        this.contractCodeIdArr = row.contractCodeIdArr.split(",");
      } else {
        this.contractCodeArr = [];
        this.contractCodeIdArr = [];
      }

      // this.create.getdataListParmCust.parammaps.groupId = row.groupId
      // this.get_customer_list()

      console.log("点击了编辑", row.stockupIds);

      if (row.stockupIds !== "") {
        this.create.getdataListStockupCode2.parammaps.id = row.id;
        this.create.getdataListStockupCode2.parammaps.stockupId =
          row.stockupIds;
        // this.getStockNameList2()
      } else {
        this.tableStockList = [];
      }
      //加载联系人下拉
      this.get_receiverList(row.customerId);

      // 营业执照
      const urlArray = [];
      const urlArrayId = [];
      const fileList = [];
      if (this.create.temp.deliveryPhotoUrl != undefined) {
        urlArray.push(
          process.env.VUE_APP_BASE_API + this.create.temp.deliveryPhotoUrl
        );
        urlArrayId.push(this.create.temp.deliveryPhoto);
      }

      console.log("urlArray", urlArray);
      console.log("urlArrayId", urlArrayId);

      for (let i = 0; i < urlArray.length; i++) {
        var urlObj = {
          url: "",
          response: { execresult: { LastInsertId: "" } },
        };
        urlObj.url = urlArray[i];
        // this.$set(urlObj, 'url', urlArray[i])
        // this.$set(urlObj, 'response', 15)
        urlObj.response.execresult.LastInsertId = urlArrayId[i];
        fileList.push(urlObj);
      }

      this.fileList = fileList;

      console.log("fileList", fileList);

      this.create.dialogStatus = "update";
      this.create.dialogFormVisible = true;

      this.$nextTick(() => {
        //1张图片时，关闭新增的按钮
        if (fileList.length == 1) {
          document.getElementById("uploadPic").lastChild.style.display = "none";
        } else {
          document.getElementById("uploadPic").lastChild.style.display =
            "inline-block";
        }
      });
    },

    // 获取编辑弹窗中的发货表格
    getDeliveryList() {
      GetDataByName(this.create.getdataListParmDelivery).then((response) => {
        console.log("获取编辑弹窗中的发货表格", response.data.list);
        if (response.data.list !== null) {
          this.tableDeliveryList = response.data.list;
        } else {
          this.tableDeliveryList = [];
        }
      });
    },

    // 编辑保存
    form_edit_save() {
      var me = this;
      this.isokDisable = true;
      setTimeout(() => {
        this.isokDisable = false;
      }, 1000);
      this.$refs["temp"].validate((valid) => {
        if (valid) {
          this.isokDisable = true;
          setTimeout(() => {
            this.isokDisable = false;
          }, 1000);

          // if(this.create.temp.deliveryPhoto == "-1"){
          //   this.$message({ type: 'error', message: '请添加照片！', duration: 2000 })
          //   return false
          // }

          if (this.tableDeliveryList.length == 0) {
            me.$message({
              type: "error",
              message: "必须有发货品！",
              duration: 2000,
            });
            return false;
          }

          var stockupCodeIdArr = this.stockupCodeIdArr;

          var customerId = this.create.temp.customerId;

          this.tableDeliveryList.map(function (i) {
            return (i.customerId = customerId);
          });

          this.tableStockList.map(function (i) {
            return (i.customerId = customerId);
          });

          this.create.temp.stockupIds = stockupCodeIdArr.join();
          this.create.temp.createrId = Cookies.get("employeid");

          console.log(
            " this.create.temp.stockupIds ",
            this.create.temp.stockupIds
          );

          var stockupIds = this.create.temp.stockupIds;

          // this.tableDeliveryList.map(function (i) {
          //   return (i.useStockupId = stockupIds)
          // })

          if (me.contractCodeIdArr && me.contractCodeIdArr.length !== 0) {
            this.create.temp.contractCodeArr = me.contractCodeArr.join();
            this.create.temp.contractCodeIdArr = me.contractCodeIdArr.join();
          } else {
            this.create.temp.contractCodeArr = "";
            this.create.temp.contractCodeIdArr = "";
          }

          var send_data1 = {
            common: {
              returnmap: "0",
            },
            data: [
              {
                name: "updateDelivery",
                type: "e",
                parammaps: this.create.temp,
              },
              {
                name: "delDeliveryGoods",
                type: "e",
                parammaps: {
                  deliveryId: this.create.temp.id,
                },
              },
              {
                name: "insertDeliveryGoodsNew",
                resultmaps: {
                  list: this.tableDeliveryList,
                },
                children: [
                  {
                    name: "insertDeliveryGoodsNew",
                    type: "e",
                    parammaps: {
                      deliveryId: this.create.temp.id,
                      customerId: "@insertDeliveryGoodsNew.customerId",
                      productsId: "@insertDeliveryGoodsNew.productsId",
                      nums: "@insertDeliveryGoodsNew.nums",
                      remark: "@insertDeliveryGoodsNew.remark",
                      useStockupId: "@insertDeliveryGoodsNew.useStockupId",
                    },
                  },
                ],
              },
              {
                name: "updateStockupOnSendNums",
                type: "e",
                parammaps: {
                  id: stockupIds,
                },
              },

              {
                name: "insertContactsOfService",
                type: "e",
                parammaps: {
                  customerId: this.create.temp.customerId,
                  contactName: this.create.temp.receiverName,
                  telephone: this.create.temp.receiverTel,
                },
              },
            ],
          };

          // console.log('编辑保存发送参数 - 有备货', send_data1)
          // console.log('编辑保存发送参数  - 无备货', send_data2)

          if (false) {
            // if( this.tableStockList.length == 0){

            ExecDataByConfig(send_data2).then((response) => {
              if (response.msg !== "fail") {
                this.$notify({
                  title: "成功",
                  message: "保存成功",
                  type: "success",
                  duration: 2000,
                });
                this.create.dialogFormVisible = false;
                this.get_table_data();

                var rowId = this.create.temp.id;

                this.get_wxPush(21, "发货", rowId);
              } else {
                this.$notify({
                  title: "失败",
                  message: "保存失败" + response.data,
                  type: "error",
                  duration: 2000,
                });
              }
            });
          } else {
            ExecDataByConfig(send_data1).then((response) => {
              if (response.msg !== "fail") {
                this.$notify({
                  title: "成功",
                  message: "保存成功",
                  type: "success",
                  duration: 2000,
                });
                this.create.dialogFormVisible = false;
                this.get_table_data();

                var rowId = this.create.temp.id;

                this.get_wxPush(21, "发货", rowId);
              } else {
                this.$notify({
                  title: "失败",
                  message: "保存失败" + response.data,
                  type: "error",
                  duration: 2000,
                });
              }
            });
          }
        }
      });
    },

    //重置发货清单
    reset_tableDeliveryList() {
      var me = this;

      if (this.create.dialogStatus == "create") {
        this.create.getdataListStockupCode.parammaps.stockupId =
          me.stockupCodeIdArr.join();
        this.getStockNameList();
      } else if (this.create.dialogStatus == "update") {
        this.create.getdataListStockupCode2.parammaps.id = me.create.temp.id;
        this.create.getdataListStockupCode2.parammaps.stockupId =
          me.stockupCodeIdArr.join();
        this.getStockNameList2();
      } else {
        this.create.getdataListStockupCode3.parammaps.id = me.create.temp.id;
        this.create.getdataListStockupCode3.parammaps.stockupId =
          me.stockupCodeIdArr.join();
        this.getStockNameList3();
      }
    },
    // 删除
    form_delete(row) {
      MessageBox.confirm("是否确认删除此信息?", {
        confirmButtonText: "确认",
        cancelButtonText: "取消",
        type: "warning",
      })
        .then(() => {
          var send_data = {
            name: "delDelivery",
            parammaps: { id: row.id },
          };
          PostDataByName(send_data).then((response) => {
            if (response.msg === "fail") {
              this.$notify({
                title: "删除失败",
                message: response.data,
                type: "warning",
                duration: 2000,
              });
            } else {
              this.$notify({
                title: "成功",
                message: "删除成功",
                type: "success",
                duration: 2000,
              });
              this.get_table_data();
            }
          });
        })
        .catch(() => {
          this.$message({ type: "info", message: "已取消删除" });
        });
    },

    // 撤销
    form_revoke(row) {
      console.log("点击了完成备货", row);
      this.reset_revoke();

      this.revoke.temp.id = row.id;
      this.revoke.temp.stockupIds = row.stockupIds;
      this.revoke.dialogFormVisible = true;
    },
    // 撤销 - 重置
    reset_revoke() {
      this.revoke.temp.revokeReason = "";
    },

    // 完成确认
    form_revoke_save() {
      this.$refs["revoketemp"].validate((valid) => {
        if (valid) {
          var send_data = {
            common: { returnmap: "0" },
            data: [
              {
                name: "revokeDeliveryGoods",
                type: "e",
                parammaps: { id: this.revoke.temp.id },
              },
              {
                name: "revokeDelivery",
                type: "e",
                parammaps: this.revoke.temp,
              },
              {
                name: "updateStockupOnSendNums",
                type: "e",
                parammaps: { id: this.revoke.temp.stockupIds },
              },
            ],
          };
          ExecDataByConfig(send_data).then((response) => {
            console.log("撤销发送参数", send_data);
            if (response.msg !== "fail") {
              this.$notify({
                title: "成功",
                message: "撤销成功",
                type: "success",
                duration: 2000,
              });
              this.revoke.dialogFormVisible = false;
              this.get_table_data();

              var send_weixin_data1 = {
                name: "getRemindData",
                parammaps: {
                  userId: Cookies.get("g_userId"),
                  remindId: 22,
                  remindTypeName: "发货",
                  rowId: this.revoke.temp.id,
                },
              };

              GetDataByName(send_weixin_data1).then((response) => {
                console.log("微信推送(获取参数)======>", response);
                if (response.data.message == "ok") {
                  var receiverStr = response.data.list[0].receivers;
                  var receiverArr = receiverStr.split(",");
                  var value1 = response.data.list[0].value1;
                  var value2 = response.data.list[0].value2;
                  var value3 = response.data.list[0].value3;
                  var value4 = response.data.list[0].value4;
                  var send_weixin_data2 = {
                    target: receiverArr,
                    serviceId: 22,
                    content: [
                      { color: "#173177", value: value1 },
                      { color: "#173177", value: value2 },
                      { color: "#173177", value: value3 },
                      { color: "#173177", value: value4 },
                    ],
                  };

                  wxpush(send_weixin_data2).then((response) => {
                    console.log("微信推送(获取参数)======>", response);
                  });
                  // this.tableSumMoney = response.data.list[0].totlePrice
                } else {
                  // this.$notify({ title: '失败', message: '消息推送失败', type: 'error', duration: 2000 })
                }
              });
            } else {
              this.$notify({
                title: "失败",
                message: "撤销失败" + response.data,
                type: "error",
                duration: 2000,
              });
            }
          });
        }
      });
    },

    //下拉 - 发货详情
    change_receProduct(item) {
      console.log("发货品ID ", item);
      var index = this.receProductNameList.findIndex(
        (obj) => obj.productsId == item
      );
      console.log("备货品index ", index);
      var ifHasId = this.tableDeliveryList.findIndex(
        (obj) => obj.productsId == item
      );
      console.log("备货品是否存在列表 ", ifHasId);

      var addRow = Object.assign({}, this.receProductNameList[index]);
      addRow.nums = 1;
      addRow.planNums = 0;
      addRow.sendNums = 0;
      addRow.remark = "";
      if (ifHasId == "-1") {
        this.tableDeliveryList.unshift(addRow);
      }
    },

    delivery_delete(row) {
      console.log("发货小表格中的删除", row);
      var index2 = this.tableDeliveryList.findIndex((obj) => obj.id == row.id);
      this.tableDeliveryList.splice(index2, 1);
      console.log("tableDeliveryList", this.tableDeliveryList);
    },

    //选择备货单
    choose_stock(item) {
      console.log("查看备货单详情");
      // this.stockData.id = row.id

      var customerId = this.create.temp.customerId;
      var groupId = this.create.temp.groupId;

      if (item == "see") {
        this.stockData.title = "see";
        this.stockData.stockupIds = this.seeStockupIds;
        this.seeStock.dialogFormVisible = true;

        this.$nextTick(() => {
          this.$refs.childstock.parent_change_parp(customerId, groupId, "see");
        });
      } else {
        this.stockData.title = "create";
        if (
          customerId !== "" &&
          groupId !== "" &&
          customerId !== null &&
          groupId !== null
        ) {
          this.seeStock.dialogFormVisible = true;
          this.$nextTick(() => {
            this.$refs.childstock.parent_change_parp(
              customerId,
              groupId,
              "create"
            );
          });
        } else {
          this.$notify({
            title: "失败",
            message: "必须选择集团和客户名称后才能选择合同！",
            type: "error",
            duration: 2000,
          });
        }
      }
    },
    //确认备货单
    add_stock_save() {
      console.log("查看备货单子组件传递的信息this.stockData", this.stockData);
      console.log(
        "查看备货单子组件传递的信息this.stockData.selectList",
        this.stockData.selectList
      );

      if (this.stockData.selectList.length == 0) {
        this.create.temp.stockupCode = "";
        this.create.stockupCodeList = [];

        this.stockupCodeIdArr = [];

        this.create.temp.stockupNums = 0;

        this.contractCodeArr = [];
        this.contractCodeIdArr = [];
        this.contractCodeNameIdArr = [];
      } else {
        this.create.temp.stockupNums = this.stockData.selectList.length;

        var stockupCodeIdArr = [];

        this.stockData.selectList.forEach(function (i) {
          stockupCodeIdArr.push(i.id);
        });
        this.stockupCodeIdArr = stockupCodeIdArr;

        var contractCodeArr = [];
        var contractCodeIdArr = [];
        var contractCodeNameIdArr = [];

        this.stockData.selectList.forEach(function (i) {
          if (i.useContractId && i.useContractId !== 0) {
            contractCodeIdArr.push(i.useContractId);
            contractCodeArr.push(i.contractCode);
            contractCodeNameIdArr.push({
              name: i.contractCode,
              id: i.useContractId,
            });
          }
        });
        this.contractCodeArr = contractCodeArr;
        this.contractCodeIdArr = contractCodeIdArr;
        this.contractCodeNameIdArr = contractCodeNameIdArr;

        console.log("contractCodeArr", contractCodeArr);
        console.log("contractCodeIdArr", contractCodeIdArr);

        if (this.create.dialogStatus == "create") {
          this.create.getdataListStockupCode.parammaps.stockupId =
            stockupCodeIdArr.join();
          this.getStockNameList();
        } else if (this.create.dialogStatus == "update") {
          this.create.getdataListStockupCode2.parammaps.id =
            this.create.temp.id;
          this.create.getdataListStockupCode2.parammaps.stockupId =
            stockupCodeIdArr.join();
          this.getStockNameList2();
        } else {
          this.create.getdataListStockupCode3.parammaps.id =
            this.create.temp.id;
          this.create.getdataListStockupCode3.parammaps.stockupId =
            stockupCodeIdArr.join();
          this.getStockNameList3();
        }
      }
      this.$refs.childstock.form_clear();

      this.seeStock.dialogFormVisible = false;
    },

    click_contract(row) {
      console.log(row);
      this.createSee.dialogFormVisible = true;
      this.concustomerData.id = row;
      this.conmoreData.id = row;
    },

    dialog_close_see() {
      this.createSee.dialogFormVisible = false;
      this.conmoreData.id = "";

      this.get_table_data();
    },

    add_stock_cancel() {
      this.$refs.childstock.form_clear();
      this.seeStock.dialogFormVisible = false;
      this.get_table_data();
    },

    //备货清单小表格删除
    stock_delete(row) {
      console.log("小表格中的删除", row);
      var index2 = this.tableStockList.findIndex((obj) => obj.id == row.id);
      this.tableStockList.splice(index2, 1);
      console.log("tableStockList", this.tableStockList);
    },

    //监听 - 备货单号 - 不用了
    change_stockupCode(item) {
      console.log(item);

      if (this.create.dialogStatus == "create") {
        this.create.getdataListStockupCode2.parammaps.stockupId = item;
        this.getStockNameList();
      } else if (this.create.dialogStatus == "update") {
        this.create.getdataListStockupCode2.parammaps.id = this.create.temp.id;
        this.create.change_stockupCode.parammaps.stockupId = item;
        this.getStockNameList2();
      } else {
        this.create.getdataListStockupCode3.parammaps.id = this.create.temp.id;
        this.create.getdataListStockupCode3.parammaps.stockupId = item;
        this.getStockNameList3();
      }
    },

    // 弹窗中的备货单 - 新增用
    getStockNameList() {
      var me = this;
      GetDataByName(this.create.getdataListStockupCode).then((response) => {
        if (response.data.list !== null) {
          // this.tableStockList = response.data.list
          //原备货不要，改成发货列表

          this.tableDeliveryList = response.data.list;
          //         if(me.stockupCodeIdArr.length !== 0 ){
          //            var stockupIds = me.stockupCodeIdArr.join()
          //             me.tableDeliveryList.map(function (i) {
          //                return (i.useStockupId = stockupIds)
          //             })

          //         }

          console.log("弹窗中的备货单 - 新增用-", response.data.list);
        } else {
          // this.tableStockList = []
          this.tableDeliveryList = [];
        }
      });
    },
    //弹窗中的备货单 - 编辑用
    getStockNameList2() {
      console.log(this.create.getdataListStockupCode2);
      GetDataByName(this.create.getdataListStockupCode2).then((response) => {
        if (response.data.list !== null) {
          // this.tableStockList = response.data.list
          //原备货不要，改成发货列表
          this.tableDeliveryList = response.data.list;
          //          if(me.stockupCodeIdArr.length !== 0 ){
          //            var stockupIds = me.stockupCodeIdArr.join()
          //             me.tableDeliveryList.map(function (i) {
          //                return (i.useStockupId = stockupIds)
          //             })

          //         }
          console.log("弹窗中的备货单 - 编辑用", response.data.list);
        } else {
          // this.tableStockList = []
          this.tableDeliveryList = [];
        }
      });
    },

    //弹窗中的备货单 - 查看用
    getStockNameList3() {
      console.log(this.create.getdataListStockupCode3);
      GetDataByName(this.create.getdataListStockupCode3).then((response) => {
        if (response.data.list !== null) {
          // this.tableStockList = response.data.list
          //原备货不要，改成发货列表
          this.tableDeliveryList = response.data.list;
          console.log("弹窗中的备货单 - 查看用", response.data.list);
        } else {
          // this.tableStockList = []
          this.tableDeliveryList = [];
        }
      });
    },

    dialog_close() {
      this.create.dialogFormVisible = false;
      this.get_table_data();
      if (this.isHome == "home") {
        // 返回首页
        this.$router.push({
          name: "Dashboard",
          params: { isTodo: "delivery" },
        });
      }
    },

    // 导出
    form_export(item) {
      this.download.getdataListParm.parammaps =
        this.tableObj.getdataListParm.parammaps;

      GetDataByName(this.download.getdataListParm).then((response) => {
        if (response.data.list !== null) {
          this.download.list = response.data.list;
        } else {
          this.download.list = [];
        }
        var excelDatas = [
          {
            tHeader: [
              "序号",
              "发货单号",
              "单据状态",
              "客户名称",
              "客户集团",
              "发货日期",
              "收件人名称",
              "快递名称",
              "快递单号",
              "备货单号",
              "备注",
              "录入日期",
            ],
            filterVal: [
              "sort",
              "deliveryCode",
              "statusName",
              "customerName",
              "groupName",
              "sendDate",
              "receiverName",
              "postName",
              "postCode",
              "remark",
              "createrDate",
            ],
            tableDatas: this.download.list,
            sheetName: "Sheet1",
          },
        ];
        json2excel(excelDatas, "发货记录", true, "xlsx");
      });
    },

    // 导入
    form_inport() {
      console.log("点击了导入");
    },

    // 打开生成工单弹窗
    create_service_no(row) {
      this.createServiceNo.temp.id = row.id;
      this.createServiceNo.temp.deliveryCode = row.deliveryCode;
      this.createServiceNo.temp.projectId = row.projectId;
      this.createServiceNo.temp.projectName = row.projectName;
      this.createServiceNo.temp.customerId = row.customerId;
      this.createServiceNo.temp.customerName = row.customerName;
      this.createServiceNo.temp.contractNo = row.contractCodeArr;
      this.createServiceNo.temp.contractId = row.contractCodeIdArr;
      this.createServiceNo.temp.updateTime = row.updateTime;
      this.createServiceNo.dialogFormVisible = true;
    },
    // 处理无需生成服务工单
    handleNoService() {
      this.$notify({
        title: "提示",
        message: "取消操作",
        type: "info",
        duration: 2000,
      });
      this.createServiceNo.dialogFormVisible = false;
    },

    // 处理确认生成服务工单
    handleConfirmService() {
      this.$refs.createServiceForm.validate((valid) => {
        if (!valid) {
          return;
        }

        const params = {
          common: {
            returnmap: "0",
          },
          data: [],
        };
        // 生成服务工单
        if (this.createServiceNo.temp.isCreateServiceNo === "1") {
          params.data.push(
            {
              name: "insertInstallationOrder",
              type: "e",
              parammaps: {
                deliveryId: this.createServiceNo.temp.id,
                projectId: this.createServiceNo.temp.projectId,
                projectName:
                  this.projectOptions.find(
                    (item) => item.id === this.createServiceNo.temp.projectId
                  )?.name || "",
                customerId: this.createServiceNo.temp.customerId,
                customerName: this.createServiceNo.temp.customerName,
                deliveryNo: this.createServiceNo.temp.deliveryCode,
                contractNo: this.createServiceNo.temp.contractNo,
                contractId: this.createServiceNo.temp.contractId,
                remark: this.createServiceNo.temp.remark,
                createId: Cookies.get("employeid"),
                createName: Cookies.get("employename"),
                updateTime: this.createServiceNo.temp.updateTime,
              },
            },
            {
              name: "insertInstallationOrderDetailByDeliveryId",
              type: "e",
              parammaps: {
                deliveryId: this.createServiceNo.temp.id,
                orderId: "@insertInstallationOrder.LastInsertId",
              },
            },
            {
              name: "refreshInstallationOrderProcessByOrderId",
              type: "e",
              parammaps: {
                orderId: "@insertInstallationOrder.LastInsertId",
              },
            }
          );
        }
        // 更新是否生成服务工单
        params.data.push({
          name: "UpdateIsCreateServiceNoByDeliveryId",
          type: "e",
          parammaps: {
            deliveryId: this.createServiceNo.temp.id,
            isCreateServiceNo:
              this.createServiceNo.temp.isCreateServiceNo === "1"
                ? "已生成"
                : "无需服务",
          },
        });
        // 调用保存接口
        ExecDataByConfig(params).then((response) => {
          if (response.msg === "fail") {
            this.$notify({
              title: "失败",
              message: "生成服务工单失败：" + response.data,
              type: "error",
              duration: 2000,
            });
          } else {
            this.$notify({
              title: "成功",
              message: "生成服务工单成功",
              type: "success",
              duration: 2000,
            });
            this.createServiceNo.dialogFormVisible = false;
            this.get_table_data();
          }
        });
      });
    },
  },
};
</script>
<style lang="scss" scoped>
.search {
  padding-top: 10px;
  clear: both;
}
.table {
  margin-top: 10px;
}

#uploadPic {
  width: 800px;
}

/deep/ .el-input.is-disabled .el-input__inner {
  color: #000000 !important;
}
/deep/ .el-textarea.is-disabled .el-textarea__inner {
  color: #000000 !important;
}
/deep/ .el-radio__input.is-disabled + span.el-radio__label {
  color: #000000 !important;
}
/deep/ .el-checkbox__input.is-disabled + span.el-checkbox__label {
  color: #000000 !important;
}

.service-dialog {
  padding: 20px 0;

  .service-btn {
    width: 120px;
    height: 40px;
  }
}

.service-dialog-container {
  border-radius: 8px;

  /deep/ .el-dialog__header {
    padding: 20px;
    border-bottom: 1px solid #eee;

    .el-dialog__title {
      font-size: 18px;
      font-weight: 600;
      color: #303133;
    }
  }

  /deep/ .el-dialog__body {
    padding: 30px 20px;
  }
}

.service-dialog {
  .service-btn-group {
    padding: 20px 0;
    gap: 20px; // 按钮之间的间距
  }

  .service-btn {
    width: 140px;
    height: 40px;
    border-radius: 4px;
    font-size: 14px;
    font-weight: 500;
    transition: all 0.3s;

    &:hover {
      transform: translateY(-2px);
      box-shadow: 0 2px 8px rgba(0, 0, 0, 0.1);
    }
  }

  .no-service-btn {
    background: #909399;
    border-color: #909399;
    color: #fff;

    &:hover {
      background: #a6a9ad;
      border-color: #a6a9ad;
    }
  }

  .confirm-btn {
    background: #409eff;
    border-color: #409eff;

    &:hover {
      background: #66b1ff;
      border-color: #66b1ff;
    }
  }

  .cancel-btn {
    background: #fff;
    border-color: #dcdfe6;
    color: #606266;

    &:hover {
      color: #409eff;
      border-color: #c6e2ff;
      background-color: #ecf5ff;
    }
  }
}
</style>
