jsm-mall-front/src/views/auxiliaryFittings/salesManagement/components/auxiliarySalesOrderDetail.vue

<template>
  <div class="s-page">
    <el-page-header @back="goBack" :content="title"></el-page-header>
    <el-divider></el-divider>
    <el-card class="box-card">
      <div slot="header" class="clearfix">
        <span>单据信息</span>
      </div>
      <div class="mymain-container">
        <el-form ref="formData" :rules="rules" :model="formData" label-width="110px" size="small" label-position="left">
          <el-row :gutter="20" justify="start">
            <el-col :span="8" v-if="id">
              <el-form-item label="单据状态">
                <el-input
                  type="text"
                  :value="
                    formData.flag == 'SAVE'
                      ? '已保存'
                      : formData.flag == 'SUBMIT'
                      ? '已提交'
                      : formData.flag == 'CANCEL'
                      ? '取消订单'
                      : formData.flag == 'PAY_NOT_TAKE'
                      ? '已支付,未提货'
                      : formData.flag == 'PAY_TAKE'
                      ? '已支付,已提货'
                      : ''
                  "
                  disabled
                ></el-input>
              </el-form-item>
            </el-col>
            <el-col :span="8" v-if="id">
              <el-form-item label="单据编号">
                <el-input type="text" :value="formData.salesId" disabled></el-input>
              </el-form-item>
            </el-col>
            <el-col :span="8">
              <el-form-item label="网点名称" prop="websitId">
                <el-select
                  clearable
                  filterable
                  v-model="formData.websit"
                  :disabled="formData.flag != 'SAVE' && formType != 0"
                  value-key="websitId"
                  @change="changeWebsit"
                  placeholder="请选择"
                  style="width: 100%"
                >
                  <el-option
                    v-for="item in websitList"
                    :key="item.websitId"
                    :label="`(${item.websitId})${item.name}`"
                    :value="item"
                  >
                  </el-option>
                </el-select>
              </el-form-item>
            </el-col>
            <el-col :span="8">
              <el-form-item label="购买方" :required="true" style="padding-bottom: 1px">
                <el-radio-group
                  v-model="formData.buyPeople"
                  @change="
                    formData.workerName = ''
                    formData.workerMobile = ''
                  "
                >
                  <el-radio
                    :disabled="(formData.flag != 'SAVE' && formType != 0) || formData.salesType == '工程'"
                    label="WORKER"
                    >内部师傅</el-radio
                  >
                  <el-radio
                    :disabled="(formData.flag != 'SAVE' && formType != 0) || formData.salesType == '工程'"
                    label="CUSTOMER"
                    >客户</el-radio
                  >
                </el-radio-group>
              </el-form-item>
            </el-col>
            <template v-if="formData.buyPeople == 'CUSTOMER'">
              <el-col :span="8">
                <el-form-item label="客户姓名" prop="workerName">
                  <el-input
                    type="text"
                    :disabled="formData.flag != 'SAVE' && formType != 0"
                    v-model="formData.workerName"
                    placeholder="请输入"
                  ></el-input>
                </el-form-item>
              </el-col>
              <el-col :span="8">
                <el-form-item label="客户联系电话" prop="workerMobile">
                  <el-input
                    type="text"
                    :disabled="formData.flag != 'SAVE' && formType != 0"
                    v-model="formData.workerMobile"
                    placeholder="请输入"
                  ></el-input>
                </el-form-item>
              </el-col>
            </template>
            <template v-else>
              <el-col :span="8">
                <el-form-item label="师傅所属网点" prop="websitId">
                  <el-select
                    clearable
                    filterable
                    v-model="formData.websit2"
                    :disabled="formData.flag != 'SAVE' && formType != 0"
                    value-key="websitId"
                    @change="changeWebsit2"
                    placeholder="请选择"
                    style="width: 100%"
                  >
                    <el-option
                      v-for="item in websitList2"
                      :key="item.websitId"
                      :label="`(${item.websitId})${item.name}`"
                      :value="item"
                    >
                    </el-option>
                  </el-select>
                </el-form-item>
              </el-col>
              <el-col :span="8">
                <el-form-item label="师傅姓名" prop="worker">
                  <el-select
                    v-model="formData.worker"
                    :disabled="formData.flag != 'SAVE' && formType != 0"
                    value-key="nickName"
                    @focus="
                      () => {
                        if (!this.formData.websitId) {
                          return this.$message.warning('请先选择网点名称！')
                        }
                      }
                    "
                    filterable
                    @change="changeWorker"
                    @blur="workerBlur"
                    placeholder="请选择"
                    style="width: 100%"
                  >
                    <el-option
                      v-for="item in workerList"
                      :key="item.workerNumber"
                      :label="item.nickName + '-' + item.mobile"
                      :value="item"
                    >
                    </el-option>
                  </el-select>
                </el-form-item>
              </el-col>
              <!-- <el-col :span="8">
								<el-form-item label="师傅身份证" prop="identity" :required="true">
									<el-input type="text" :disabled="formData.flag != 'SAVE' && formType!=0" v-model="formData.identity" placeholder="请输入"></el-input>
								</el-form-item>
							</el-col> -->
              <el-col :span="8">
                <el-form-item label="师傅联系电话" prop="workerMobile">
                  <el-input
                    type="text"
                    :disabled="formData.flag != 'SAVE' && formType != 0"
                    v-model="formData.workerMobile"
                    placeholder="请输入"
                  ></el-input>
                </el-form-item>
              </el-col>
            </template>
            <!-- <el-col :span="8">
              <el-form-item label="销售类型" :required="true" style="padding-bottom: 1px">
                <el-radio-group v-model="formData.salesType" @change="changeSale">
                  <el-radio :disabled="formData.flag != 'SAVE' && formType != 0" label="零售">零售</el-radio>
                  <el-radio :disabled="formData.flag != 'SAVE' && formType != 0" label="工程">工程</el-radio>
                </el-radio-group>
              </el-form-item>
            </el-col> -->
            <el-col :span="8" v-if="id">
              <el-form-item label="单据金额">
                <el-input type="text" :value="formData.totalAmount" disabled></el-input>
              </el-form-item>
            </el-col>
            <el-col :span="8">
              <el-form-item label="订单来源" prop="orderSource" :required="true">
                <el-select v-model="formData.orderSource" :disabled="true" placeholder="请选择" style="width: 100%">
                  <el-option
                    v-for="item in [
                      { name: '在线订单', id: 'ONLINE' },
                      { name: '自建订单', id: 'SELF' }
                    ]"
                    :key="item.id"
                    :label="item.name"
                    :value="item.id"
                  >
                  </el-option>
                </el-select>
              </el-form-item>
            </el-col>
            <el-col :span="6">
              <el-form-item label="支付方式" prop="payType" :required="true">
                <el-radio-group v-model="formData.payType">
                  <el-radio :disabled="formData.flag != 'SAVE' && formType != 0" label="CASH">现金</el-radio>
                  <el-radio :disabled="formData.flag != 'SAVE' && formType != 0" label="ALLINPAY">通联支付</el-radio>
                  <el-radio
                    v-if="formData.salesType == '工程'"
                    :disabled="formData.flag != 'SAVE' && formType != 0"
                    label="ENGIN"
                    >工程支付</el-radio
                  >
                </el-radio-group>
              </el-form-item>
            </el-col>
            <el-col :span="2" v-if="formData.flag == 'SUBMIT' && formData.payType == 'ALLINPAY'">
              <div style="height: 32px; display: flex; align-items: center; cursor: pointer" @click="wxPay()">
                通联支付<i class="el-icon-full-screen"></i>
              </div>
            </el-col>
            <el-col :span="2" v-else>
              <div style="opacity: 0">隐藏</div>
            </el-col>
            <el-col :span="6">
              <el-form-item label="出库仓库" prop="storage">
                <el-select
                  v-model="formData.storage"
                  value-key="storageId"
                  @focus="
                    () => {
                      if (!this.formData.websitId) {
                        return this.$message.warning('请先选择网点名称！')
                      }
                    }
                  "
                  @change="changeStorage"
                  :disabled="
                    (['SAVE', 'PAY_NOT_TAKE'].indexOf(formData.flag) == -1 && formData.orderSource == 'ONLINE') ||
                    (formType != 0 && ['SAVE', 'PAY_NOT_TAKE'].indexOf(formData.flag) == -1)
                  "
                  placeholder="请选择"
                  style="width: 100%"
                >
                  <el-option
                    v-for="(item, index) in warehouseList"
                    :key="index"
                    :label="item.storageName"
                    :value="item"
                  >
                  </el-option>
                </el-select>
              </el-form-item>
            </el-col>
            <template v-if="formData.salesType == '工程'">
              <el-col :span="8">
                <el-form-item label="工程名称" prop="project" :required="true">
                  <div style="display: flex; align-items: center">
                    <el-select
                      v-model="formData.project"
                      value-key="id"
                      @change="
                        e => {
                          formData.orderEnginBaseId = e.id
                        }
                      "
                      :disabled="formData.flag != 'SAVE' && formType != 0"
                      placeholder="请选择"
                      style="width: 100%"
                    >
                      <el-option
                        v-for="(item, index) in projectList"
                        :key="index"
                        :label="item.projectName"
                        :value="item"
                      >
                      </el-option>
                    </el-select>
                    <i
                      class="el-icon-circle-plus"
                      @click="toAddProject"
                      style="transform: scale(1.5); color: #1989fa; margin-left: 10px; cursor: pointer"
                    ></i>
                  </div>
                </el-form-item>
              </el-col>
              <el-col :span="6">
                <el-form-item label="工程编号" :required="true">
                  <el-input
                    type="text"
                    :disabled="true"
                    v-model="formData.project.projectNo"
                    placeholder="请输入"
                  ></el-input>
                </el-form-item>
              </el-col>
              <el-col :span="6">
                <el-form-item label="负责人" :required="true">
                  <el-input
                    type="text"
                    :disabled="true"
                    v-model="formData.project.manger"
                    placeholder="请输入"
                  ></el-input>
                </el-form-item>
              </el-col>
              <el-col :span="6">
                <el-form-item label="联系电话" :required="true">
                  <el-input
                    type="text"
                    :disabled="true"
                    v-model="formData.project.mobile"
                    placeholder="请输入"
                  ></el-input>
                </el-form-item>
              </el-col>
              <el-col :span="6">
                <el-form-item label="项目时间" :required="true">
                  <el-date-picker
                    style="width: 50%"
                    v-model="formData.project.startTime"
                    type="date"
                    :disabled="true"
                    value-format="yyyy-MM-dd"
                    placeholder="开始日期"
                  >
                  </el-date-picker>
                  <el-date-picker
                    style="width: 50%"
                    v-model="formData.project.endTime"
                    type="date"
                    :disabled="true"
                    value-format="yyyy-MM-dd"
                    placeholder="结束日期"
                  >
                  </el-date-picker>
                </el-form-item>
              </el-col>
              <el-col :span="24">
                <el-form-item label="项目地址" :required="true">
                  <el-row>
                    <el-col :span="5" style="margin-right: 12px">
                      <el-input
                        type="text"
                        v-model="formData.project.province"
                        disabled
                        placeholder="请选择省"
                      ></el-input>
                    </el-col>
                    <el-col :span="5" style="margin-right: 12px">
                      <el-input type="text" v-model="formData.project.city" disabled placeholder="请选择市"></el-input>
                    </el-col>
                    <el-col :span="5" style="margin-right: 12px">
                      <el-input type="text" v-model="formData.project.area" disabled placeholder="请选择区"></el-input>
                    </el-col>
                    <el-col :span="8">
                      <el-input
                        type="text"
                        v-model="formData.project.street"
                        disabled
                        placeholder="请选择街道"
                      ></el-input>
                    </el-col>
                  </el-row>
                </el-form-item>
              </el-col>
              <el-col :span="24">
                <el-form-item label="">
                  <el-row :gutter="20">
                    <el-col :span="24">
                      <el-input
                        type="text"
                        v-model="formData.project.address"
                        :disabled="true"
                        placeholder="详细地址"
                      ></el-input>
                    </el-col>
                    <!-- <el-col :span="2">
											<geographicalPosi :disabled="formType==2" :formData="this.formData" @selectPosi="selectAddress"/>
										</el-col> -->
                  </el-row>
                </el-form-item>
              </el-col>
            </template>
            <el-col :span="6" v-if="id">
              <el-form-item label="制单人">
                <el-input type="text" :value="formData.createBy" disabled></el-input>
              </el-form-item>
            </el-col>
            <el-col :span="6" v-if="id">
              <el-form-item label="制单时间">
                <el-input type="text" :value="formData.createTime" disabled></el-input>
              </el-form-item>
            </el-col>
            <el-col :span="6" v-if="id">
              <el-form-item label="审核人">
                <el-input type="text" :value="formData.confirmBy" disabled></el-input>
              </el-form-item>
            </el-col>
            <el-col :span="6" v-if="id">
              <el-form-item label="审核时间">
                <el-input type="text" :value="formData.confirmTime" disabled></el-input>
              </el-form-item>
            </el-col>
            <el-col :span="24">
              <el-form-item label="备注">
                <el-input
                  type="textarea"
                  :rows="4"
                  :disabled="formData.flag != 'SAVE' && formType != 0"
                  v-model="formData.remark"
                  placeholder="请输入"
                ></el-input>
              </el-form-item>
            </el-col>
          </el-row>
        </el-form>
      </div>
    </el-card>
    <el-card class="box-card">
      <div slot="header" class="clearfix">
        <span>辅材信息</span>
      </div>
      <el-button size="small" v-if="formData.flag == 'SAVE' || formType == 0" type="primary" @click="add()"
        >添加</el-button
      >
      <div class="table">
        <el-table :data="dataList" element-loading-text="Loading" border fit highlight-current-row stripe>
          <el-table-column label="大类名称" align="center">
            <template slot-scope="scope">
              <el-select
                v-model="scope.row.parentCategory"
                value-key="categoryId"
                @change="changeMain"
                :disabled="isEdit != scope.$index || formType == 2"
                placeholder="请选择"
                style="width: 100%"
              >
                <el-option v-for="item in mainList" :key="item.categoryId" :label="item.categoryName" :value="item">
                </el-option>
              </el-select>
            </template>
          </el-table-column>
          <el-table-column label="小类名称" align="center">
            <template slot-scope="scope">
              <el-select
                v-model="scope.row.goodsCategory"
                @change="changeSmall"
                @focus="
                  () => {
                    if (!scope.row.parentCategory) {
                      return this.$message.warning('请先选择大类！')
                    }
                  }
                "
                :disabled="isEdit != scope.$index || formType == 2"
                value-key="categoryId"
                placeholder="请选择"
                style="width: 100%"
              >
                <el-option
                  v-for="item in scope.row.parentCategory.items"
                  :key="item.categoryId"
                  :label="item.categoryName"
                  :value="item"
                >
                </el-option>
              </el-select>
            </template>
          </el-table-column>
          <el-table-column label="辅材名称" align="center" width="220px">
            <template slot-scope="scope">
              <el-select
                v-model="scope.row.goods"
                @change="changeGoods"
                value-key="goodsId"
                :disabled="isEdit != scope.$index || formType == 2"
                placeholder="请选择"
                style="width: 100%"
              >
                <el-option
                  v-for="item in scope.row.goodsList"
                  :key="item.goodsId"
                  :label="item.goodsName"
                  :value="item"
                >
                </el-option>
              </el-select>
            </template>
          </el-table-column>
          <el-table-column prop="goods.goodsSalesUnit" align="center" label="单位"></el-table-column>
          <el-table-column prop="" align="center" label="数量">
            <template slot-scope="scope">
              <el-input
                type="number"
                v-model="scope.row.salesQty"
                :disabled="isEdit != scope.$index || formType == 2"
                placeholder="请输入"
              ></el-input>
            </template>
          </el-table-column>
          <el-table-column prop="goods.goodsCode" align="center" label="辅材代码"></el-table-column>
          <el-table-column prop="goods.goodsSpecification" align="center" label="规格型号"></el-table-column>
          <el-table-column prop="" align="center" label="销售价格">
            <template slot-scope="scope">
              <el-input
                type="number"
                v-model="scope.row.price"
                :disabled="isEdit != scope.$index || formType == 2"
                placeholder="请输入"
              ></el-input>
            </template>
          </el-table-column>
          <el-table-column prop="" align="center" label="销售金额">
            <template slot-scope="scope" v-if="scope.row.salesQty && scope.row.price">
              {{ ((scope.row.price * 100 * scope.row.salesQty) / 100).toFixed(2) }}
            </template>
          </el-table-column>
          <el-table-column prop="goods.qty" align="center" label="全部库存数量"></el-table-column>
          <el-table-column label="操作" align="right" width="140">
            <template slot-scope="scope" v-if="formType != 2">
              <el-button size="mini" type="primary" v-if="scope.$index != isEdit" @click="isEdit = scope.$index"
                >编辑</el-button
              >
              <el-button size="mini" type="danger" @click="del(scope.$index)">删除</el-button>
            </template>
          </el-table-column>
        </el-table>
      </div>
    </el-card>
    <el-card class="box-card" v-if="formData.salesType == '工程' && formType != 0 && formData.flag == 'SAVE'">
      <div slot="header" class="clearfix">
        <span>收款信息</span>
      </div>
      <div class="mymain-container">
        <el-form
          ref="formData1"
          :rules="rules1"
          :model="formData1"
          label-width="110px"
          size="small"
          label-position="left"
        >
          <el-row :gutter="20" justify="start">
            <el-col :span="24">
              <el-form-item label="收款金额" prop="price">
                <el-input type="text" style="width: 30%" v-model="formData1.price" placeholder="请输入"></el-input>
                <span style="color: #ff8f47; margin-left: 10px">注:操作【提交】时，系统方可记录收款信息</span>
              </el-form-item>
            </el-col>
            <el-col :span="24">
              <el-form-item label="收款凭证">
                <ImageUpload :fileList="formData1.fileUrl" :limit="1" :isEdit="formType !== 2" />
              </el-form-item>
            </el-col>
            <el-col :span="24">
              <el-form-item label="备注">
                <el-input type="textarea" :rows="4" v-model="formData1.remark" placeholder="请输入"></el-input>
              </el-form-item>
            </el-col>
          </el-row>
        </el-form>
      </div>
    </el-card>
    <el-card class="box-card" v-if="formData.salesType == '工程' && formType != 0">
      <div slot="header" class="clearfix">
        <span>收款记录</span>
      </div>
      <div class="table">
        <el-table :data="collectionList" element-loading-text="Loading" border fit highlight-current-row stripe>
          <el-table-column prop="status" label="收款结果" align="center">
            <template slot-scope="scope">
              {{
                scope.row.status == 'NO'
                  ? '未付款'
                  : scope.row.status == 'WAIT'
                  ? '部分付款'
                  : scope.row.status == 'OK'
                  ? '已完成'
                  : ''
              }}
            </template>
          </el-table-column>
          <el-table-column prop="price" label="收款金额" align="center"></el-table-column>
          <el-table-column prop="" align="center" label="收款凭证">
            <template slot-scope="scope" v-if="scope.row.urlPrc">
              <el-image
                style="width: 80px"
                :src="$showImgUrl(scope.row.urlPrc)"
                fit="scale-down"
                :preview-src-list="[$showImgUrl(scope.row.urlPrc)]"
              ></el-image>
            </template>
          </el-table-column>
          <el-table-column prop="remark" label="备注" align="center"></el-table-column>
          <el-table-column prop="updateBy" align="center" label="收款人"></el-table-column>
          <el-table-column prop="updateTime" align="center" label="收款时间"></el-table-column>
        </el-table>
      </div>
    </el-card>
    <div class="page-footer">
      <div class="footer">
        <el-button
          v-if="formType == 0 || (formType == 1 && formData.flag == 'SAVE')"
          size="small"
          type="primary"
          @click="save()"
          >保存</el-button
        >
        <el-button v-if="formType != 0 && formData.flag == 'SAVE'" size="small" type="primary" @click="submit()"
          >提交</el-button
        >
        <el-button
          v-if="formData.flag == 'SUBMIT' && formData.payType == 'ALLINPAY'"
          size="small"
          type="primary"
          @click="wxPay()"
          >通联支付</el-button
        >
        <el-button v-if="formData.flag == 'PAY_NOT_TAKE'" size="small" type="primary" @click="confirm()"
          >确认提货</el-button
        >
        <el-button size="small" type="info" @click="goBack">返回</el-button>
      </div>
    </div>
    <el-dialog
      title="微信支付"
      :visible.sync="isPay"
      width="50%"
      :close-on-click-modal="false"
      :modal-append-to-body="false"
      @close="
        payCodeUrl = ''
        clear()
      "
    >
      <h3 style="text-align: center">扫二维码支付</h3>
      <!-- 			<el-image :src="payCodeUrl" fit="fit"></el-image> -->
      <div ref="payQRCode" style="display: flex; justify-content: center" />
      <div style="color: #ea8000; text-align: center; margin-top: 20px">注：支付成功后，方可操作确认提货！</div>
      <div style="display: flex; justify-content: flex-end; margin-top: 30px">
        <el-button
          size="mini"
          type="text"
          @click="
            isPay = false
            clear()
          "
          >取消</el-button
        >
        <el-button
          size="small"
          type="primary"
          @click="
            isPay = false
            getDetail()
          "
          >确定</el-button
        >
      </div>
    </el-dialog>
  </div>
</template>

<script>
import { getWebsit } from '@/api/customerManagement'
import QRCode from 'qrcodejs2'
import { lbsAmapRegion, adminWebsitPayConfigList } from '@/api/common.js'
import geographicalPosi from '@/components/geographicalPosi/index.vue'
import ImageUpload from '@/components/file-upload'
import {
  getWorker,
  getCategory,
  getGoods,
  getDetail,
  add,
  edit,
  confirm,
  submit,
  getCode,
  getProject,
  getProjectCollectionList
} from '@/api/auxiliaryFittings/auxiliarySalesOrder'
import { storageListPageV2 } from '@/api/storage.js'
import selectEl from '@/utils/xialaxuanz.js'
export default {
  components: { geographicalPosi, ImageUpload },
  props: ['id', 'title', 'formType'],
  data() {
    return {
      dataList: [],
      websitList: [],
      websitList2: [],
      workerList: [],
      mainList: [],
      projectList: [],
      collectionList: [],
      warehouseList: [],
      isPay: false,
      payCodeUrl: '',
      formData: {
        websit: {},
        websit2: {},
        websitId: '',
        websitName: '',
        workerWebsitName: '',
        workerWebsitId: '',
        file_url: [],
        salesId: '',
        flag: '',
        createBy: '',
        createTime: '',
        confirmBy: '',
        confirmTime: '',
        worker: {},
        workerName: '',
        workerId: '',
        identity: '',
        workerMobile: '',
        orderSource: 'SELF',
        payType: '',
        remark: '',
        totalAmount: '',
        buyPeople: 'WORKER',
        salesType: '零售',
        province: '',
        provinceId: '',
        city: '',
        cityId: '',
        area: '',
        areaId: '',
        street: '',
        streetId: '',
        address: '',
        lat: '',
        lng: '',
        project: {},
        orderEnginBaseId: '',
        storage: null,
        storageId: '',
        storageName: ''
      },
      formData1: {
        price: '',
        remark: '',
        fileUrl: []
      },
      provinceList: [],
      cityList: [],
      areaList: [],
      streetList: [],
      isEdit: 0,
      is_submit: true,
      timer: '',
      companyName: JSON.parse(localStorage.getItem('greemall_user')).companyName,
      rules: {
        websitId: [{ required: true, message: '请选择网点', trigger: 'change' }],
        worker: [{ required: true, message: '请选择师傅', trigger: 'change' }],
        orderSource: [{ required: true, message: '请选择订单来源', trigger: 'change' }],
        payType: [{ required: true, message: '请选择订单来源', trigger: 'change' }],
        identity: [
          { required: true, message: '请输入师傅身份证', trigger: 'blur' },
          { pattern: /(^\d{15}$)|(^\d{18}$)|(^\d{17}(\d|X|x)$)/, message: '身份证号格式不正确', trigger: 'blur' }
        ],
        workerMobile: [
          { required: true, message: `请输入联系电话`, trigger: 'blur' },
          { required: true, message: `请输入联系电话`, trigger: 'change' },
          { pattern: /^((0\d{2,3}-\d{7,8})|(1[3456789]\d{9}))$/, message: '电话号码格式不正确', trigger: 'blur' }
        ],
        workerName: [{ required: true, message: '请输入客户姓名', trigger: 'blur' }],
        storage: [{ required: true, message: `请选择入库仓库`, trigger: 'change' }]
      },
      rules1: {
        price: [{ pattern: /^[1-9]\d*(\.\d+)?$|^0\.[1-9]\d*$/, message: '请输入大于0的数字', trigger: 'blur' }]
      }
    }
  },
  computed: {},
  created() {
    if (this.id) {
      this.getDetail()
    }
    this.getinitlbslist()
    this.getWebsit()
    this.getProject()
  },
  mounted() {},
  methods: {
    // 返回
    goBack() {
      this.$emit('back')
    },
    async getDetail() {
      const that = this
      getDetail({ salesId: this.id }).then(async res => {
        Object.assign(this.formData, res.data, {
          websit: { websitId: res.data.websitId, name: res.data.websitName },
          websit2: { websitId: res.data.workerWebsitId, name: res.data.workerWebsitName },
          worker: { nickName: res.data.workerName, userId: res.data.workerId },
          project: {
            id: res.data.orderEnginBaseId,
            projectName: res.data.projectName,
            projectNo: res.data.projectNo,
            manger: res.data.manger,
            mobile: res.data.mobile,
            startTime: res.data.startTime,
            endTime: res.data.endTime,
            province: res.data.province,
            provinceId: res.data.provinceId,
            city: res.data.city,
            cityId: res.data.cityId,
            area: res.data.area,
            areaId: res.data.areaId,
            street: res.data.street,
            streetId: res.data.streetId,
            address: res.data.address,
            lat: res.data.lat,
            lng: res.data.lng
          },
          storage: {
            storageId: res.data.storageId
          }
        })
        this.getWorker()
        this.getCategory(res.data.websitId, res.data.storageId)
        this.getWarehouseList(res.data.websitId)
        if (res.data.salesType == '工程') {
          this.getProjectCollectionList(res.data.orderEnginBaseId)
        }
        this.formData.remark = res.data.remark
        for (var item of res.data.items) {
          item.parentCategory = {
            categoryId: item.parentCategoryId,
            categoryName: item.parentCategoryName,
            items: [{ categoryId: item.goodsCategoryId, categoryName: item.goodsCategoryName }]
          }
          item.goodsCategory = { categoryId: item.goodsCategoryId, categoryName: item.goodsCategoryName }
          var ress = await that.getGoods(item.goodsCategoryId, item.goodsName, 1)
          item.goods = ress.data
          item.goodsList = ress.data ? [ress.data] : []
        }
        this.dataList = res.data.items
        console.log(this.dataList)
      })
    },
    getWebsit() {
      getWebsit({ type: 'C' }).then(res => {
        this.websitList = res.data
      })
      getWebsit({ type: 'C', isAll: true }).then(res => {
        this.websitList2 = res.data
      })
    },
    changeWebsit(e) {
      this.dataList = []
      this.formData.websitId = e.websitId
      this.formData.websitName = e.name
      this.formData.storageName = ''
      this.formData.storageId = ''
      this.getCategory(e.websitId, this.formData.storageId)
      this.getWarehouseList(e.websitId)
    },
    changeWebsit2(e) {
      this.formData.workerWebsitId = e.websitId
      this.formData.workerWebsitName = e.name
      this.formData.identity = ''
      this.formData.workerMobile = ''
      this.formData.workerId = ''
      this.formData.workerName = ''
      this.getWorker()
    },
    changeStorage(e) {
      if (!this.formData.isImport && this.formData.orderSource == 'SELF') {
        this.dataList = []
      }
      this.formData.storageId = e.storageId
      this.formData.storageName = e.storageName
      this.getCategory(this.formData.websitId, e.storageId)
    },
    getCategory(websitId, storageId) {
      if (websitId && storageId) {
        getCategory({ websitId, storageId }).then(res => {
          this.mainList = res.data
        })
      } else {
        this.mainList = []
      }
    },
    toAddProject() {
      this.$router.push({
        name: 'basicEngineeringData'
      })
    },
    getProject() {
      getProject({
        pageNum: 1,
        pageSize: -1,
        params: []
      }).then(res => {
        this.projectList = res.data.records
      })
    },
    getWarehouseList(websitId) {
      if (!websitId) {
        return (this.warehouseList = [])
      }
      storageListPageV2({
        pageNum: 1,
        pageSize: -1,
        params: [
          { param: 'a.type', compare: 'like', value: '辅材' },
          { param: 'a.status', compare: '=', value: 'true' },
          { param: 'a.websit_id', compare: '=', value: websitId }
        ]
      }).then(res => {
        this.warehouseList = res.data.records
      })
    },
    getProjectCollectionList(orderEnginBaseId) {
      getProjectCollectionList({ orderEnginBaseId, goodsType: 'M' }).then(res => {
        this.collectionList = res.data
      })
    },
    async getGoods(categoryId, goodsName, type) {
      // if(!this.formData.storageId){return this.$message.warning('请先选择出库仓库！')}
      const that = this
      if (type == 1) {
        return new Promise((resolve, reject) => {
          getGoods({
            websitId: this.formData.websitId,
            categoryId: categoryId,
            type: 'M',
            goodsName: goodsName,
            orderEnginBaseId: this.formData.orderEnginBaseId,
            saleType: this.formData.salesType,
            storageId: this.formData.storageId
          }).then(res => {
            resolve({
              data: res.data[0]
            })
          })
        })
      } else {
        getGoods({
          websitId: this.formData.websitId,
          categoryId: categoryId,
          type: 'M',
          orderEnginBaseId: this.formData.orderEnginBaseId,
          saleType: this.formData.salesType,
          storageId: this.formData.storageId
        }).then(res => {
          that.dataList[that.isEdit].goodsList = res.data
        })
      }
    },
    getWorker() {
      if (this.formData.workerWebsitId) {
        getWorker({
          pageNum: 1,
          pageSize: -1,
          ignoreWebsitRole: true,
          params:
            this.formType == 2
              ? []
              : [
                  { param: 'b.websit_id', compare: '=', value: this.formData.workerWebsitId }
                  // { param: 'b.ignore_websit_role', compare: '=', value: true }
                ]
        }).then(res => {
          this.workerList = res.data.records
        })
      } else {
        this.workerList = []
      }
    },
    changeWorker(e) {
      this.formData.identity = e.idCard
      this.formData.workerMobile = e.mobile
      this.formData.workerId = e.workerNumber
      this.formData.workerName = e.nickName
    },
    workerBlur(e) {
      this.formData.worker = e.target.value
      this.$forceUpdate()
    },
    changeMain(e) {
      ;(this.dataList[this.isEdit].goodsList = []),
        (this.dataList[this.isEdit].parentCategory = e),
        (this.dataList[this.isEdit].parentCategoryId = e.categoryId),
        (this.dataList[this.isEdit].parentCategoryName = e.categoryName),
        (this.dataList[this.isEdit].goodsCategory = {}),
        (this.dataList[this.isEdit].goodsCategoryName = ''),
        (this.dataList[this.isEdit].goodsCategoryId = ''),
        (this.dataList[this.isEdit].goods = {}),
        (this.dataList[this.isEdit].goodsId = ''),
        (this.dataList[this.isEdit].goodsName = ''),
        (this.dataList[this.isEdit].goodsSalesUnit = ''),
        (this.dataList[this.isEdit].goodsSpecification = ''),
        (this.dataList[this.isEdit].goodsCode = ''),
        (this.dataList[this.isEdit].price = ''),
        (this.dataList[this.isEdit].saleAmount = ''),
        (this.dataList[this.isEdit].salesQty = '')
      ;(this.dataList[this.isEdit].qty = ''), (this.dataList[this.isEdit].goodsType = 'M')
    },
    async changeSmall(e) {
      ;(this.dataList[this.isEdit].goods = {}),
        (this.dataList[this.isEdit].goodsId = ''),
        (this.dataList[this.isEdit].goodsName = ''),
        (this.dataList[this.isEdit].goodsSalesUnit = ''),
        (this.dataList[this.isEdit].goodsSpecification = ''),
        (this.dataList[this.isEdit].goodsCode = ''),
        (this.dataList[this.isEdit].price = ''),
        (this.dataList[this.isEdit].saleAmount = ''),
        (this.dataList[this.isEdit].salesQty = '')
      ;(this.dataList[this.isEdit].qty = ''), (this.dataList[this.isEdit].goodsCategoryId = e.categoryId)
      this.dataList[this.isEdit].goodsCategoryName = e.categoryName
      // if(!this.formData.storageId){return this.$message.warning('请先选择出库仓库！')}
      getGoods({
        websitId: this.formData.websitId,
        categoryId: e.categoryId,
        type: 'M',
        orderEnginBaseId: this.formData.orderEnginBaseId,
        saleType: this.formData.salesType,
        storageId: this.formData.storageId
      }).then(res => {
        this.dataList[this.isEdit].goodsList = res.data
      })
    },
    changeGoods(e) {
      console.log(e)
      this.dataList[this.isEdit].goodsId = e.goodsId
      this.dataList[this.isEdit].goodsName = e.goodsName
      this.dataList[this.isEdit].goodsSalesUnit = e.goodsSalesUnit
      this.dataList[this.isEdit].goodsSpecification = e.goodsSpecification
      this.dataList[this.isEdit].price = e.price
      this.dataList[this.isEdit].goodsCode = e.goodsCode
      this.dataList[this.isEdit].qty = e.qty
      this.dataList[this.isEdit].itemSourceType = e.itemSourceType
      this.dataList[this.isEdit].itemSourceId = e.itemSourceId
      this.dataList[this.isEdit].normType = e.normType
    },
    add() {
      if (this.dataList.length != 0) {
        this.isEdit = 0
      }
      this.dataList.unshift({
        goodsList: [],
        parentCategory: {},
        parentCategoryId: '',
        parentCategoryName: '',
        goodsCategory: {},
        goodsCategoryName: '',
        goodsCategoryId: '',
        goods: {},
        goodsId: '',
        goodsName: '',
        goodsSalesUnit: '',
        goodsSpecification: '',
        goodsCode: '',
        price: '',
        saleAmount: '',
        salesQty: 1,
        qty: '',
        goodsType: 'M',
        itemSourceType: '',
        itemSourceId: '',
        normType: ''
      })
    },
    del(index) {
      if (index <= 1) {
        this.isEdit == 0
      } else {
        this.isEdit -= 1
      }
      this.dataList.splice(index, 1)
    },
    confirmSubmit() {
      if (this.formData1.price && !/^[1-9]\d*(\.\d+)?$|^0\.[0-9]\d*$/.test(this.formData1.price)) {
        return this.$message.warning('请输入大于0的数字！')
      }
      this.$confirm(`请确定是否提交订单, 是否继续?`, '提示', {
        confirmButtonText: '确定',
        cancelButtonText: '取消',
        type: 'warning'
      }).then(() => {
        submit({
          salesId: this.formData.salesId,
          price: this.formData1.price,
          urlPrc: this.formData1.fileUrl.length > 0 ? this.formData1.fileUrl[0].url : '',
          remark: this.formData1.remark
        }).then(res => {
          if (res.code == 200) {
            this.$message.success('提交成功！')
            if (this.formData.payType == 'ALLINPAY') {
              this.wxPay()
            } else {
              this.goBack()
            }
          }
        })
      })
    },
    submit() {
      const that = this
      this.$refs.formData.validate((valid, invalidFields, errLabels) => {
        if (valid) {
          edit({
            salesId: this.formData.salesId,
            goodsType: 'M',
            orderSource: this.formData.orderSource,
            payType: this.formData.payType,
            remark: this.formData.remark,
            websitId: this.formData.websitId,
            websitName: this.formData.websitName,
            workerWebsitName: this.formData.workerWebsitName,
            workerWebsitId: this.formData.workerWebsitId,
            workerName: this.formData.workerName,
            workerId: this.formData.workerId,
            identity: this.formData.identity,
            workerMobile: this.formData.workerMobile,
            buyPeople: this.formData.buyPeople,
            items: this.dataList,
            orderEnginBaseId: this.formData.orderEnginBaseId,
            salesType: this.formData.salesType,
            storageId: this.formData.storageId,
            storageName: this.formData.storageName
          }).then(res => {
            if (res.code == 200) {
              this.$nextTick(() => {
                that.confirmSubmit()
              })
            }
          })
        }
      })
    },
    confirm() {
      if (!this.formData.storageId) {
        return this.$message.warning('请先选择出库仓库！')
      }
      this.$confirm(`请确定是否确认提货, 是否继续?`, '提示', {
        confirmButtonText: '确定',
        cancelButtonText: '取消',
        type: 'warning'
      }).then(() => {
        confirm({
          salesId: this.formData.salesId,
          storageId: this.formData.storageId
        }).then(res => {
          if (res.code == 200) {
            this.$message.success('审核成功！')
            this.goBack()
          }
        })
      })
    },
    checkPay() {
      this.timer = setInterval(() => {
        getDetail({ salesId: this.id }).then(res => {
          if (res.data.payFlag == 'YES') {
            this.$refs.payQRCode.innerHTML = ''
            this.clear()
            this.$message.success('支付成功！')
            this.goBack()
          }
        })
      }, 3000)
    },
    clear() {
      clearInterval(this.timer)
    },
    wxPay() {
      if (!this.is_submit) {
        return false
      }
      adminWebsitPayConfigList({
        status: true,
        type: 'M',
        websitId: this.formData.websitId
      }).then(resd => {
        selectEl
          .bind(this)(
            resd?.data?.map(item => ({
              value: item.id,
              label: item.name
            }))
          )
          .then(val => {
            this.is_submit = false
            setTimeout(() => {
              this.is_submit = true
            }, 2000)
            getCode({
              payConfigId: val,
              salesId: this.formData.salesId
            }).then(res => {
              if (res.code == 200) {
                this.isPay = true
                this.$nextTick(() => {
                  this.payCodeUrl = res.data.codeUrl
                  this.$refs.payQRCode.innerHTML = ''
                  this.$nextTick(() => {
                    this.payUrl = res.data.codeUrl
                    new QRCode(this.$refs.payQRCode, {
                      text: res.data.codeUrl,
                      width: 200,
                      height: 200,
                      colorDark: '#333333', // 二维码颜色
                      colorLight: '#ffffff', // 二维码背景色
                      correctLevel: QRCode.CorrectLevel.L // 容错率，L/M/H
                    })
                    this.checkPay()
                  })
                })
              }
            })
          })
      })
    },
    save() {
      this.$refs.formData.validate((valid, invalidFields, errLabels) => {
        if (valid) {
          if (this.formType == 0) {
            add({
              goodsType: 'M',
              orderSource: this.formData.orderSource,
              payType: this.formData.payType,
              remark: this.formData.remark,
              websitId: this.formData.websitId,
              websitName: this.formData.websitName,
              workerName: this.formData.workerName,
              workerWebsitName: this.formData.workerWebsitName,
              workerWebsitId: this.formData.workerWebsitId,
              workerId: this.formData.workerId,
              identity: this.formData.identity,
              workerMobile: this.formData.workerMobile,
              buyPeople: this.formData.buyPeople,
              items: this.dataList,
              orderEnginBaseId: this.formData.orderEnginBaseId,
              salesType: this.formData.salesType,
              storageId: this.formData.storageId,
              storageName: this.formData.storageName
            }).then(res => {
              if (res.code == 200) {
                this.$message.success('提交成功！')
                this.goBack()
              }
            })
          } else if (this.formType == 1) {
            edit({
              salesId: this.formData.salesId,
              goodsType: 'M',
              orderSource: this.formData.orderSource,
              payType: this.formData.payType,
              remark: this.formData.remark,
              websitId: this.formData.websitId,
              websitName: this.formData.websitName,
              workerWebsitName: this.formData.workerWebsitName,
              workerWebsitId: this.formData.workerWebsitId,
              workerName: this.formData.workerName,
              workerId: this.formData.workerId,
              identity: this.formData.identity,
              workerMobile: this.formData.workerMobile,
              buyPeople: this.formData.buyPeople,
              items: this.dataList,
              orderEnginBaseId: this.formData.orderEnginBaseId,
              salesType: this.formData.salesType,
              storageId: this.formData.storageId,
              storageName: this.formData.storageName
            }).then(res => {
              if (res.code == 200) {
                this.dataList = []
                this.$message.success('提交成功！')
                this.goBack()
              }
            })
          }
        }
      })
    },
    changeSale() {
      this.formData.buyPeople = 'CUSTOMER'
    },
    getinitlbslist() {
      // 初始化请求省市区街道下拉选项数据
      lbsAmapRegion({ pid: 0 }).then(res => {
        this.provinceList = res.data
        // 创建工单时获取ip地址定位赋值
        if (!this.id && this.$IpAdd.province) {
          var item = this.provinceList.find(item => item.name === this.$IpAdd.province)
          if (item) {
            this.formData.provinceId = item.id
            this.formData.province = item.name
          }
        }
        if (this.formData.provinceId) {
          lbsAmapRegion({ pid: this.formData.provinceId }).then(res => {
            this.cityList = res.data
            // 创建工单时获取ip地址定位赋值
            if (!this.id && this.$IpAdd.city) {
              var item2 = this.cityList.find(item => item.name === this.$IpAdd.city)
              if (item2) {
                this.formData.cityId = item2.id
                this.formData.city = item2.name
              }
            }
            if (this.formData.cityId) {
              lbsAmapRegion({ pid: this.formData.cityId }).then(res => {
                this.areaList = res.data
              })
            }
            if (this.formData.areaId) {
              lbsAmapRegion({ pid: this.formData.areaId }).then(res => {
                this.streetList = res.data
              })
            }
          })
        }
      })
    },
    selectAddress(data) {
      this.formData.lng = data.center[0]
      this.formData.lat = data.center[1]
      // 获取定位的省市区街道
      var { province, city, district, township } = data.data.addressComponent
      // 获取选中省名称id
      var { id, name } = this.provinceList.find(item => item.name === province)
      this.formData.provinceId = id
      this.formData.province = name
      // 请求市选项
      lbsAmapRegion({ pid: this.formData.provinceId }).then(res => {
        // 赋值市选项
        this.cityList = res.data
        // 获取选中市名称id
        var { id, name } = res.data.find(item => item.name === city)
        this.formData.cityId = id
        this.formData.city = name
        // 请求区选项
        lbsAmapRegion({ pid: this.formData.cityId }).then(res => {
          // 赋值区选项
          this.areaList = res.data
          // 获取选中区名称id
          var { id, name } = res.data.find(item => item.name === district)
          this.formData.areaId = id
          this.formData.area = name
          // 请求街道选项
          lbsAmapRegion({ pid: this.formData.areaId }).then(res => {
            // 赋值街道选项
            this.streetList = res.data
            // 获取选中街道名称id
            var { id, name } = res.data.find(item => item.name === township)
            this.formData.streetId = id
            this.formData.street = name
            // 赋值GPS详细地址
            this.formData.address = data.name
          })
        })
      })
    }
  }
}
</script>

<style scoped="scoped" lang="scss">
.s-page {
  padding: 20px;
  background-color: #ffffff;
}
.page-footer {
  height: 70px;
}

.footer {
  position: fixed;
  bottom: 0;
  left: 0;
  z-index: 1;
  width: 100%;
  background: #fff;
  padding: 15px 40px;
  box-sizing: border-box;
  transition: all 0.28s;
  text-align: right;
  box-shadow: 0 2px 5px 0 rgb(0 0 0 / 50%), 0 2px 5px 0 rgb(0 0 0 / 10%);

  &.hideSidebar {
    margin-left: 54px;
    width: calc(100vw - 54px);
  }

  &.openSidebar {
    margin-left: 210px;
    width: calc(100vw - 210px);
  }

  .tips {
    font-size: 12px;
    color: red;
    margin-top: 10px;
  }
}
</style>