attachmentSalesOrderDetail.vue 32 KB

123456789101112131415161718192021222324252627282930313233343536373839404142434445464748495051525354555657585960616263646566676869707172737475767778798081828384858687888990919293949596979899100101102103104105106107108109110111112113114115116117118119120121122123124125126127128129130131132133134135136137138139140141142143144145146147148149150151152153154155156157158159160161162163164165166167168169170171172173174175176177178179180181182183184185186187188189190191192193194195196197198199200201202203204205206207208209210211212213214215216217218219220221222223224225226227228229230231232233234235236237238239240241242243244245246247248249250251252253254255256257258259260261262263264265266267268269270271272273274275276277278279280281282283284285286287288289290291292293294295296297298299300301302303304305306307308309310311312313314315316317318319320321322323324325326327328329330331332333334335336337338339340341342343344345346347348349350351352353354355356357358359360361362363364365366367368369370371372373374375376377378379380381382383384385386387388389390391392393394395396397398399400401402403404405406407408409410411412413414415416417418419420421422423424425426427428429430431432433434435436437438439440441442443444445446447448449450451452453454455456457458459460461462463464465466467468469470471472473474475476477478479480481482483484485486487488489490491492493494495496497498499500501502503504505506507508509510511512513514515516517518519520521522523524525526527528529530531532533534535536537538539540541542543544545546547548549550551552553554555556557558559560561562563564565566567568569570571572573574575576577578579580581582583584585586587588589590591592593594595596597598599600601602603604605606607608609610611612613614615616617618619620621622623624625626627628629630631632633634635636637638639640641642643644645646647648649650651652653654655656657658659660661662663664665666667668669670671672673674675676677678679680681682683684685686687688689690691692693694695696697698699700701702703704705706707708709710711712713714715716717718719720721722723724725726727728729730731732733734735736737738739740741742743744745746747748749750751752753754755756757758759760761762763764765766767768769770771772773774775776777778779780781782783784785786787788789790791792793794795796797798799800801802803804805806807808809810811812813814815816817818819820821822823824825826827828829830831832833834835836837838839840841842843844845846847848849850
  1. <template>
  2. <div class="s-page">
  3. <el-page-header @back="goBack" :content="title"></el-page-header>
  4. <el-divider></el-divider>
  5. <el-card class="box-card">
  6. <div slot="header" class="clearfix">
  7. <span>单据信息</span>
  8. </div>
  9. <div class="mymain-container">
  10. <el-form ref="formData" :rules="rules" :model="formData" label-width="110px" size="small" label-position="left">
  11. <el-row :gutter="20" justify="start">
  12. <el-col :span="8" v-if="id">
  13. <el-form-item label="单据状态">
  14. <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>
  15. </el-form-item>
  16. </el-col>
  17. <el-col :span="8" v-if="id">
  18. <el-form-item label="单据编号">
  19. <el-input type="text" :value="formData.salesId" disabled></el-input>
  20. </el-form-item>
  21. </el-col>
  22. <el-col :span="8">
  23. <el-form-item label="所属商户" :required="true" >
  24. <el-input type="text" :value="companyName" disabled></el-input>
  25. </el-form-item>
  26. </el-col>
  27. <el-col :span="8">
  28. <el-form-item label="网点名称" prop="websitId" :required="true">
  29. <el-select v-model="formData.websit" :disabled="formType == 2" value-key="websitId" @change="changeWebsit" placeholder="请选择" style="width: 100%;">
  30. <el-option
  31. v-for="item in websitList"
  32. :key="item.websitId"
  33. :label="item.name"
  34. :value="item">
  35. </el-option>
  36. </el-select>
  37. </el-form-item>
  38. </el-col>
  39. <el-col :span="8">
  40. <el-form-item label="购买方" :required="true" style="padding-bottom: 1px;">
  41. <el-radio-group v-model="formData.buyPeople" @change="formData.workerName = '';formData.workerMobile=''">
  42. <el-radio :disabled="(formData.flag != 'SAVE' && formType!=0) || formData.salesType == '工程'" label="WORKER">内部师傅</el-radio>
  43. <el-radio :disabled="(formData.flag != 'SAVE' && formType!=0) || formData.salesType == '工程'" label="CUSTOMER">客户</el-radio>
  44. </el-radio-group>
  45. </el-form-item>
  46. </el-col>
  47. <template v-if="formData.buyPeople == 'CUSTOMER'">
  48. <el-col :span="8">
  49. <el-form-item label="客户姓名" prop="workerName" :required="true">
  50. <el-input type="text" :disabled="formData.flag != 'SAVE' && formType!=0" v-model="formData.workerName" placeholder="请输入"></el-input>
  51. </el-form-item>
  52. </el-col>
  53. <el-col :span="8">
  54. <el-form-item label="客户联系电话" prop="workerMobile" :required="true">
  55. <el-input type="text" :disabled="formData.flag != 'SAVE' && formType!=0" v-model="formData.workerMobile" placeholder="请输入"></el-input>
  56. </el-form-item>
  57. </el-col>
  58. </template>
  59. <template v-else>
  60. <el-col :span="8">
  61. <el-form-item label="师傅姓名" prop="worker" :required="true">
  62. <el-select v-model="formData.worker" :disabled="formType == 2" value-key="nickName" @focus="()=>{
  63. if(!this.formData.websitId){return this.$message.warning('请先选择网点名称!');}
  64. }" filterable @change="changeWorker" @blur="workerBlur" placeholder="请选择" style="width: 100%;">
  65. <el-option
  66. v-for="item in workerList"
  67. :key="item.id"
  68. :label="item.nickName + '-' + item.mobile"
  69. :value="item">
  70. </el-option>
  71. </el-select>
  72. </el-form-item>
  73. </el-col>
  74. <!-- <el-col :span="8">
  75. <el-form-item label="师傅身份证" prop="identity" :required="true">
  76. <el-input type="text" v-model="formData.identity" :disabled="formType == 2" placeholder="请输入"></el-input>
  77. </el-form-item>
  78. </el-col> -->
  79. <el-col :span="8">
  80. <el-form-item label="师傅联系电话" prop="workerMobile" :required="true">
  81. <el-input type="text" v-model="formData.workerMobile" :disabled="formType == 2" placeholder="请输入"></el-input>
  82. </el-form-item>
  83. </el-col>
  84. </template>
  85. <el-col :span="8">
  86. <el-form-item label="销售类型" :required="true" style="padding-bottom: 1px;">
  87. <el-radio-group v-model="formData.salesType" @change="changeSale">
  88. <el-radio :disabled="formData.flag != 'SAVE' && formType!=0" label="零售">零售</el-radio>
  89. <el-radio :disabled="formData.flag != 'SAVE' && formType!=0" label="工程">工程</el-radio>
  90. </el-radio-group>
  91. </el-form-item>
  92. </el-col>
  93. <el-col :span="6" v-if="id">
  94. <el-form-item label="单据金额">
  95. <el-input type="text" :value="formData.totalAmount" disabled></el-input>
  96. </el-form-item>
  97. </el-col>
  98. <el-col :span="8">
  99. <el-form-item label="订单来源" prop="source" :required="true">
  100. <el-select v-model="formData.source" :disabled="true" placeholder="请选择" style="width: 100%;">
  101. <el-option
  102. v-for="item in [{name: '在线订单',id: 'ONLINE'},{name: '自建订单',id: 'SELF'}]"
  103. :key="item.id"
  104. :label="item.name"
  105. :value="item.id">
  106. </el-option>
  107. </el-select>
  108. </el-form-item>
  109. </el-col>
  110. <el-col :span="6">
  111. <el-form-item label="支付方式" prop="payType" :required="true">
  112. <el-radio-group v-model="formData.payType">
  113. <el-radio :disabled="formType == 2" label="CASH">现金</el-radio>
  114. <el-radio :disabled="formType == 2" label="WECHAT">微信</el-radio>
  115. <el-radio v-if="formData.salesType == '工程'" :disabled="formData.flag != 'SAVE' && formType!=0" label="ENGIN">工程支付</el-radio>
  116. </el-radio-group>
  117. </el-form-item>
  118. </el-col>
  119. <el-col :span="2" v-if="formData.flag == 'SUBMIT' && formData.payType == 'WECHAT'">
  120. <div style="height: 32px;display: flex;align-items: center;cursor: pointer;" @click="wxPay()">微信支付<i class="el-icon-full-screen"></i></div>
  121. </el-col>
  122. <el-col :span="2" v-else>
  123. <div style="opacity: 0;">隐藏</div>
  124. </el-col>
  125. <template v-if="formData.salesType == '工程'">
  126. <el-col :span="8">
  127. <el-form-item label="工程名称" prop="project" :required="true">
  128. <div style="display: flex;align-items: center;">
  129. <el-select v-model="formData.project" value-key="id" @change="(e)=>{
  130. formData.orderEnginBaseId = e.id
  131. }" :disabled="formData.flag != 'SAVE' && formType!=0" placeholder="请选择" style="width: 100%;">
  132. <el-option
  133. v-for="(item,index) in projectList"
  134. :key="index"
  135. :label="item.projectName"
  136. :value="item">
  137. </el-option>
  138. </el-select>
  139. <i class="el-icon-circle-plus" @click="toAddProject" style="transform: scale(1.5);color: #1989FA;margin-left: 10px;cursor: pointer;"></i>
  140. </div>
  141. </el-form-item>
  142. </el-col>
  143. <el-col :span="6">
  144. <el-form-item label="工程编号" :required="true">
  145. <el-input type="text" :disabled="true" v-model="formData.project.projectNo" placeholder="请输入"></el-input>
  146. </el-form-item>
  147. </el-col>
  148. <el-col :span="6">
  149. <el-form-item label="负责人" :required="true">
  150. <el-input type="text" :disabled="true" v-model="formData.project.manger" placeholder="请输入"></el-input>
  151. </el-form-item>
  152. </el-col>
  153. <el-col :span="6">
  154. <el-form-item label="联系电话" :required="true">
  155. <el-input type="text" :disabled="true" v-model="formData.project.mobile" placeholder="请输入"></el-input>
  156. </el-form-item>
  157. </el-col>
  158. <el-col :span="6">
  159. <el-form-item label="项目时间" :required="true">
  160. <el-date-picker
  161. style="width:50%"
  162. v-model="formData.project.startTime"
  163. type="date"
  164. :disabled="true"
  165. value-format="yyyy-MM-dd"
  166. placeholder="开始日期">
  167. </el-date-picker>
  168. <el-date-picker
  169. style="width:50%"
  170. v-model="formData.project.endTime"
  171. type="date"
  172. :disabled="true"
  173. value-format="yyyy-MM-dd"
  174. placeholder="结束日期">
  175. </el-date-picker>
  176. </el-form-item>
  177. </el-col>
  178. <el-col :span="24">
  179. <el-form-item label="项目地址" prop="province" :required="true">
  180. <el-row>
  181. <el-col :span="5" style="margin-right: 12px;">
  182. <el-input type="text" v-model="formData.project.province" disabled placeholder="请选择省"></el-input>
  183. </el-col>
  184. <el-col :span="5" style="margin-right: 12px;">
  185. <el-input type="text" v-model="formData.project.city" disabled placeholder="请选择市"></el-input>
  186. </el-col>
  187. <el-col :span="5" style="margin-right: 12px;">
  188. <el-input type="text" v-model="formData.project.area" disabled placeholder="请选择区"></el-input>
  189. </el-col>
  190. <el-col :span="8">
  191. <el-input type="text" v-model="formData.project.street" disabled placeholder="请选择街道"></el-input>
  192. </el-col>
  193. </el-row>
  194. </el-form-item>
  195. </el-col>
  196. <el-col :span="24">
  197. <el-form-item label="" prop="address">
  198. <el-row :gutter="20">
  199. <el-col :span="24">
  200. <el-input type="text" v-model="formData.project.address" :disabled="true" placeholder="详细地址"></el-input>
  201. </el-col>
  202. <!-- <el-col :span="2">
  203. <geographicalPosi :disabled="formType==2" :formData="this.formData" @selectPosi="selectAddress"/>
  204. </el-col> -->
  205. </el-row>
  206. </el-form-item>
  207. </el-col>
  208. </template>
  209. <el-col :span="6" v-if="id">
  210. <el-form-item label="制单人">
  211. <el-input type="text" :value="formData.createBy" disabled></el-input>
  212. </el-form-item>
  213. </el-col>
  214. <el-col :span="6" v-if="id">
  215. <el-form-item label="制单时间">
  216. <el-input type="text" :value="formData.createTime" disabled></el-input>
  217. </el-form-item>
  218. </el-col>
  219. <el-col :span="6" v-if="id">
  220. <el-form-item label="审核人">
  221. <el-input type="text" :value="formData.confirmBy" disabled></el-input>
  222. </el-form-item>
  223. </el-col>
  224. <el-col :span="6" v-if="id">
  225. <el-form-item label="审核时间">
  226. <el-input type="text" :value="formData.confirmTime" disabled></el-input>
  227. </el-form-item>
  228. </el-col>
  229. <el-col :span="24">
  230. <el-form-item label="备注">
  231. <el-input type="textarea" :rows="4" v-model="formData.remark" :disabled="formType == 2" placeholder="请输入"></el-input>
  232. </el-form-item>
  233. </el-col>
  234. </el-row>
  235. </el-form>
  236. </div>
  237. </el-card>
  238. <el-card class="box-card">
  239. <div slot="header" class="clearfix">
  240. <span>配件信息</span>
  241. </div>
  242. <el-button size="small" v-if="formData.flag == 'SAVE' || formType==0" type="primary" @click="add()">添加</el-button>
  243. <div class="table">
  244. <el-table :data="dataList" element-loading-text="Loading" border fit highlight-current-row stripe>
  245. <el-table-column label="配件名称" align="center">
  246. <template slot-scope="scope">
  247. <el-select v-model="scope.row.goods" @change="changeGoods" value-key="goodsId" :disabled="isEdit != scope.$index || formType == 2" placeholder="请选择" style="width: 100%;">
  248. <el-option
  249. v-for="item in scope.row.goodsList"
  250. :key="item.goodsId"
  251. :label="item.goodsName"
  252. :value="item">
  253. </el-option>
  254. </el-select>
  255. </template>
  256. </el-table-column>
  257. <el-table-column prop="goods.goodsSalesUnit" align="center" label="单位" ></el-table-column>
  258. <el-table-column prop="" align="center" label="数量" >
  259. <template slot-scope="scope">
  260. <el-input type="number" v-model="scope.row.salesQty" :disabled="isEdit != scope.$index || formType == 2" placeholder="请输入"></el-input>
  261. </template>
  262. </el-table-column>
  263. <el-table-column prop="goods.goodsCode" align="center" label="配件编码"></el-table-column>
  264. <el-table-column prop="goods.brandRelaName" align="center" label="适用品牌"></el-table-column>
  265. <el-table-column prop="goods.productRelaName" align="center" label="适用产品大类"></el-table-column>
  266. <el-table-column prop="" align="center" label="销售价格">
  267. <template slot-scope="scope">
  268. <el-input type="number" v-model="scope.row.price" :disabled="isEdit != scope.$index || formType == 2" placeholder="请输入"></el-input>
  269. </template>
  270. </el-table-column>
  271. <el-table-column prop="goods.saleAmount" align="center" label="销售金额" >
  272. <template slot-scope="scope" v-if="scope.row.salesQty && scope.row.price">
  273. {{(scope.row.price * 100) * scope.row.salesQty / 100}}
  274. </template>
  275. </el-table-column>
  276. <el-table-column prop="goods.qty" align="center" label="库存数量"></el-table-column>
  277. <el-table-column label="操作" align="right" width="140">
  278. <template slot-scope="scope" v-if="formType != 2">
  279. <el-button size="mini" type="primary" v-if="scope.$index != isEdit" @click="isEdit = scope.$index">编辑</el-button>
  280. <el-button size="mini" type="danger" @click="del(scope.$index)">删除</el-button>
  281. </template>
  282. </el-table-column>
  283. </el-table>
  284. </div>
  285. </el-card>
  286. <el-card class="box-card" v-if="formData.salesType == '工程' && formType != 0 && formData.flag == 'SAVE'">
  287. <div slot="header" class="clearfix">
  288. <span>收款信息</span>
  289. </div>
  290. <div class="mymain-container">
  291. <el-form ref="formData1" :rules="rules1" :model="formData1" label-width="110px" size="small" label-position="left">
  292. <el-row :gutter="20" justify="start">
  293. <el-col :span="24">
  294. <el-form-item label="收款金额">
  295. <el-input type="text" style="width: 30%" v-model="formData1.price" placeholder="请输入"></el-input>
  296. <span style="color: #FF8F47;margin-left: 10px">注:操作【提交】时,系统方可记录收款信息</span>
  297. </el-form-item>
  298. </el-col>
  299. <el-col :span="24">
  300. <el-form-item label="收款凭证">
  301. <ImageUpload :fileList="formData1.fileUrl" :limit="1" :isEdit="formType !== 2" />
  302. </el-form-item>
  303. </el-col>
  304. <el-col :span="24">
  305. <el-form-item label="备注">
  306. <el-input type="textarea" :rows="4" v-model="formData1.remark" placeholder="请输入"></el-input>
  307. </el-form-item>
  308. </el-col>
  309. </el-row>
  310. </el-form>
  311. </div>
  312. </el-card>
  313. <el-card class="box-card" v-if="formData.salesType == '工程' && formType != 0">
  314. <div slot="header" class="clearfix">
  315. <span>收款记录</span>
  316. </div>
  317. <div class="table">
  318. <el-table :data="collectionList" element-loading-text="Loading" border fit highlight-current-row stripe>
  319. <el-table-column prop="status" label="收款结果" align="center">
  320. <template slot-scope="scope">
  321. {{scope.row.status == 'NO'?'未付款':scope.row.status == 'WAIT'?'部分付款':scope.row.status == 'OK'?'已完成':''}}
  322. </template>
  323. </el-table-column>
  324. <el-table-column prop="price" label="收款金额" align="center"></el-table-column>
  325. <el-table-column prop="" align="center" label="收款凭证" >
  326. <template slot-scope="scope" v-if="scope.row.urlPrc">
  327. <el-image style="width: 80px;" :src="scope.row.urlPrc" fit="scale-down" :preview-src-list="[scope.row.urlPrc]"></el-image>
  328. </template>
  329. </el-table-column>
  330. <el-table-column prop="remark" label="备注" align="center"></el-table-column>
  331. <el-table-column prop="updateBy" align="center" label="收款人" ></el-table-column>
  332. <el-table-column prop="updateTime" align="center" label="收款时间" ></el-table-column>
  333. </el-table>
  334. </div>
  335. </el-card>
  336. <div class="page-footer">
  337. <div class="footer">
  338. <el-button v-if="formType == 0 || (formType == 1 && formData.flag == 'SAVE')" size="small" type="primary" @click="save()">保存</el-button>
  339. <el-button v-if="formType != 0 && formData.flag == 'SAVE'" size="small" type="primary" @click="submit()">提交</el-button>
  340. <el-button v-if="formData.flag == 'PAY_NOT_TAKE'" size="small" type="primary" @click="confirm()">确认收货</el-button>
  341. <el-button v-if="formData.flag == 'SUBMIT' && formData.payType == 'WECHAT'" size="small" type="primary" @click="wxPay()">微信支付</el-button>
  342. <el-button size="small" type="info" @click="goBack">返回</el-button>
  343. </div>
  344. </div>
  345. <el-dialog title="微信支付" :visible.sync="isPay" width="50%" :close-on-click-modal="false" :modal-append-to-body="false" @close="payCodeUrl = '';clear()">
  346. <h3 style="text-align: center;">扫二维码支付</h3>
  347. <!-- <el-image :src="payCodeUrl" fit="fit"></el-image> -->
  348. <div
  349. ref="payQRCode"
  350. style="display: flex; justify-content: center;"
  351. />
  352. <div style="color: #EA8000;text-align: center;margin-top: 20px;">注:支付成功后,方可操作确认提货!</div>
  353. <div style="display: flex;justify-content: flex-end;margin-top: 30px;">
  354. <el-button size="mini" type="text" @click="isPay = false;clear()">取消</el-button>
  355. <el-button size="small" type="primary" @click="isPay = false;getDetail()">确定</el-button>
  356. </div>
  357. </el-dialog>
  358. </div>
  359. </template>
  360. <script>
  361. import { getWebsit } from "@/api/customerManagement";
  362. import QRCode from "qrcodejs2";
  363. import { lbsAmapRegion } from '@/api/common.js'
  364. import geographicalPosi from '@/components/geographicalPosi/index.vue'
  365. import ImageUpload from '@/components/file-upload'
  366. import { getWorker, getCategory, getGoods, getDetail, add, edit, confirm, submit, getCode, getProject, getProjectCollectionList } from "@/api/auxiliaryFittings/auxiliarySalesOrder";
  367. export default {
  368. components: {geographicalPosi,ImageUpload},
  369. props: ['id','title','formType'],
  370. data() {
  371. return {
  372. dataList: [],
  373. websitList: [],
  374. workerList: [],
  375. projectList: [],
  376. collectionList: [],
  377. isPay: false,
  378. is_submit: true,
  379. payCodeUrl: '',
  380. formData: {
  381. websit: {},
  382. websitId: '',
  383. websitName: '',
  384. file_url: [],
  385. salesId: '',
  386. flag: '',
  387. createBy: '',
  388. createTime: '',
  389. confirmBy: '',
  390. confirmTime: '',
  391. worker: {},
  392. workerName: '',
  393. workerId: '',
  394. identity: '',
  395. workerMobile: '',
  396. source: 'SELF',
  397. payType: '',
  398. totalAmount: '',
  399. remark: '',
  400. buyPeople: 'WORKER',
  401. salesType: '零售',
  402. province: '',
  403. provinceId: '',
  404. city: '',
  405. cityId: '',
  406. area: '',
  407. areaId: '',
  408. street: '',
  409. streetId: '',
  410. address: '',
  411. lat: '',
  412. lng: '',
  413. project: {},
  414. orderEnginBaseId: '',
  415. },
  416. formData1: {
  417. price: '',
  418. remark: '',
  419. fileUrl: []
  420. },
  421. provinceList: [],
  422. cityList: [],
  423. areaList: [],
  424. streetList: [],
  425. isEdit: 0,
  426. timer: '',
  427. companyName: JSON.parse(localStorage.getItem('greemall_user')).companyName,
  428. rules: {
  429. websitId: [
  430. { required: true, message: '请选择网点', trigger: 'change' }
  431. ],
  432. worker: [
  433. { required: true, message: '请选择师傅', trigger: 'change' }
  434. ],
  435. source: [
  436. { required: true, message: '请选择订单来源', trigger: 'change' }
  437. ],
  438. payType: [
  439. { required: true, message: '请选择订单来源', trigger: 'change' }
  440. ],
  441. identity: [
  442. { required: true, message: '请输入师傅身份证', trigger: 'blur' },
  443. { pattern:/(^\d{15}$)|(^\d{18}$)|(^\d{17}(\d|X|x)$)/, message: '身份证号格式不正确', trigger: 'blur' }
  444. ],
  445. workerMobile: [
  446. { required: true, message: '请输入联系电话', trigger: 'blur' },
  447. { required: true, message: '请输入联系电话', trigger: 'change' },
  448. { pattern:/^((0\d{2,3}-\d{7,8})|(1[34578]\d{9}))$/, message: '电话号码格式不正确', trigger: 'blur' }
  449. ],
  450. workerName: [
  451. { required: true, message: '请输入客户姓名', trigger: 'blur' }
  452. ],
  453. }
  454. };
  455. },
  456. computed: {},
  457. created() {
  458. if(this.id){
  459. this.getDetail()
  460. }
  461. this.getinitlbslist()
  462. this.getWebsit()
  463. this.getProject()
  464. },
  465. methods: {
  466. // 返回
  467. goBack() {
  468. this.$emit('back');
  469. },
  470. async getDetail(){
  471. const that = this
  472. getDetail({salesId: this.id}).then(async res => {
  473. Object.assign(this.formData, res.data, {
  474. websit: {websitId: res.data.websitId,name: res.data.websitName},
  475. worker: {nickName: res.data.workerName,userId: res.data.workerId},
  476. 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}
  477. })
  478. this.getWorker()
  479. if(res.data.salesType == '工程'){
  480. this.getProjectCollectionList(res.data.orderEnginBaseId)
  481. }
  482. for(var item of res.data.items){
  483. var ress = await that.getGoods(item.goodsName, 1)
  484. item.goods = {...ress.data,oldPrice:ress.data.price}
  485. item.goodsList = ress.data ? [{...ress.data,oldPrice:ress.data.price}] : []
  486. }
  487. this.dataList = res.data.items
  488. })
  489. },
  490. getWebsit(){
  491. getWebsit({type: 'C'}).then(res => {
  492. this.websitList = res.data
  493. })
  494. },
  495. changeWebsit(e){
  496. this.formData.websitId = e.websitId
  497. this.formData.websitName = e.name
  498. this.getWorker()
  499. },
  500. toAddProject(){
  501. this.$router.push({
  502. name: 'basicEngineeringData'
  503. })
  504. },
  505. getProject(){
  506. getProject({
  507. pageNum: 1,
  508. pageSize: -1,
  509. params:[]
  510. }).then(res => {
  511. this.projectList = res.data.records
  512. })
  513. },
  514. getProjectCollectionList(orderEnginBaseId){
  515. getProjectCollectionList({orderEnginBaseId,goodsType: 'P'}).then(res => {
  516. this.collectionList = res.data
  517. })
  518. },
  519. async getGoods(goodsName,type){
  520. const that = this
  521. if(type == 1){
  522. return new Promise((resolve, reject) => {
  523. getGoods({websitId: this.formData.websitId,type: 'P',goodsName: goodsName,orderEnginBaseId: this.formData.orderEnginBaseId,saleType: this.formData.salesType}).then(res => {
  524. resolve({
  525. data: res.data[0]
  526. })
  527. })
  528. })
  529. }else{
  530. getGoods({websitId: this.formData.websitId,type: 'P',orderEnginBaseId: this.formData.orderEnginBaseId,saleType: this.formData.salesType}).then(res => {
  531. that.dataList[that.isEdit].goodsList = res.data
  532. console.log(this.dataList)
  533. })
  534. }
  535. },
  536. getWorker(){
  537. getWorker({pageNum: 1,pageSize: -1,params: [{param: 'b.websit_id',compare: '=',value: this.formData.websitId}]}).then(res => {
  538. this.workerList = res.data.records
  539. })
  540. },
  541. changeWorker(e){
  542. this.formData.identity = e.idCard
  543. this.formData.workerMobile = e.mobile
  544. this.formData.workerId = e.userId
  545. this.formData.workerName = e.nickName
  546. },
  547. workerBlur(e){
  548. this.formData.worker = e.target.value
  549. this.$forceUpdate()
  550. },
  551. changeGoods(e){
  552. console.log(e)
  553. this.dataList[this.isEdit].goodsId = e.goodsId
  554. this.dataList[this.isEdit].goodsName = e.goodsName
  555. this.dataList[this.isEdit].goodsSalesUnit = e.goodsSalesUnit
  556. this.dataList[this.isEdit].brandRelaName = e.brandRelaName
  557. this.dataList[this.isEdit].productRelaName = e.productRelaName
  558. this.dataList[this.isEdit].price = e.price
  559. this.dataList[this.isEdit].goodsCode = e. goodsCode
  560. this.dataList[this.isEdit].qty = e.qty
  561. this.dataList[this.isEdit].itemSourceType = e.itemSourceType
  562. this.dataList[this.isEdit].itemSourceId = e.itemSourceId
  563. this.dataList[this.isEdit].normType = e.normType
  564. },
  565. add(){
  566. if(this.dataList.length != 0){this.isEdit = 0}
  567. this.dataList.unshift({
  568. goodsList: [],
  569. goods: {},
  570. goodsId: '',
  571. goodsName: '',
  572. goodsSalesUnit: '',
  573. brandRelaName: '',
  574. productRelaName: '',
  575. goodsCode: '',
  576. price: '',
  577. saleAmount: '',
  578. salesQty: 1,
  579. qty: '',
  580. goodsType: 'P',
  581. itemSourceType: '',
  582. itemSourceId: '',
  583. normType: ''
  584. })
  585. this.getGoods()
  586. },
  587. del(index){
  588. if(index <= 1){this.isEdit == 0}else{this.isEdit -= 1}
  589. this.dataList.splice(index,1)
  590. },
  591. submit(){
  592. this.$confirm(`请确定是否提交订单, 是否继续?`, '提示', {
  593. confirmButtonText: '确定',
  594. cancelButtonText: '取消',
  595. type: 'warning'
  596. }).then(() => {
  597. submit({
  598. salesId: this.formData.salesId,
  599. price: this.formData1.price,
  600. urlPrc: this.formData1.fileUrl.length> 0 ?this.formData1.fileUrl[0].url: '',
  601. remark: this.formData1.remark
  602. }).then(res => {
  603. if(res.code == 200){
  604. this.$message.success('提交成功!')
  605. if(this.formData.payType == 'WECHAT'){
  606. this.wxPay()
  607. }else{
  608. this.goBack()
  609. }
  610. }
  611. })
  612. });
  613. },
  614. confirm(){
  615. this.$confirm(`请确定是否确认提货, 是否继续?`, '提示', {
  616. confirmButtonText: '确定',
  617. cancelButtonText: '取消',
  618. type: 'warning'
  619. }).then(() => {
  620. confirm({
  621. salesId: this.formData.salesId
  622. }).then(res => {
  623. if(res.code == 200){
  624. this.$message.success('审核成功!')
  625. this.goBack()
  626. }
  627. })
  628. });
  629. },
  630. checkPay(){
  631. this.timer = setInterval(()=>{
  632. getDetail({salesId: this.id}).then(res => {
  633. if(res.data.payFlag == 'YES'){
  634. this.$refs.payQRCode.innerHTML = '';
  635. this.clear()
  636. this.$message.success('支付成功!')
  637. this.goBack()
  638. }
  639. })
  640. },3000)
  641. },
  642. clear(){
  643. clearInterval(this.timer)
  644. },
  645. wxPay(){
  646. if(!this.is_submit){
  647. return false
  648. }
  649. this.is_submit = false
  650. setTimeout(()=>{
  651. this.is_submit = true
  652. },2000)
  653. getCode({
  654. salesId: this.formData.salesId
  655. }).then(res => {
  656. if(res.code == 200){
  657. this.payCodeUrl = res.data.codeUrl
  658. this.$refs.payQRCode.innerHTML = '';
  659. this.$nextTick(() => {
  660. this.payUrl = res.data.codeUrl;
  661. new QRCode(this.$refs.payQRCode, {
  662. text: res.data.codeUrl,
  663. width: 200,
  664. height: 200,
  665. colorDark: "#333333", // 二维码颜色
  666. colorLight: "#ffffff", // 二维码背景色
  667. correctLevel: QRCode.CorrectLevel.L // 容错率,L/M/H
  668. });
  669. this.checkPay()
  670. });
  671. }
  672. })
  673. this.isPay = true
  674. },
  675. save(){
  676. this.$refs.formData.validate((valid, invalidFields, errLabels) => {
  677. if (valid) {
  678. if(this.formType == 0){
  679. add({
  680. goodsType: 'P',
  681. source: this.formData.source,
  682. payType: this.formData.payType,
  683. remark: this.formData.remark,
  684. websitId: this.formData.websitId,
  685. websitName: this.formData.websitName,
  686. workerName: this.formData.workerName,
  687. workerId: this.formData.workerId,
  688. identity: this.formData.identity,
  689. workerMobile: this.formData.workerMobile,
  690. buyPeople: this.formData.buyPeople,
  691. items: this.dataList,
  692. orderEnginBaseId: this.formData.orderEnginBaseId,
  693. salesType: this.formData.salesType
  694. }).then(res => {
  695. if(res.code == 200){
  696. this.$message.success('提交成功!')
  697. this.goBack()
  698. }
  699. })
  700. }else if(this.formType == 1){
  701. edit({
  702. salesId: this.formData.salesId,
  703. goodsType: 'P',
  704. source: this.formData.source,
  705. payType: this.formData.payType,
  706. remark: this.formData.remark,
  707. websitId: this.formData.websitId,
  708. websitName: this.formData.websitName,
  709. workerName: this.formData.workerName,
  710. workerId: this.formData.workerId,
  711. identity: this.formData.identity,
  712. workerMobile: this.formData.workerMobile,
  713. buyPeople: this.formData.buyPeople,
  714. items: this.dataList,
  715. orderEnginBaseId: this.formData.orderEnginBaseId,
  716. salesType: this.formData.salesType
  717. }).then(res => {
  718. if(res.code == 200){
  719. this.dataList = []
  720. this.$message.success('提交成功!')
  721. this.goBack()
  722. }
  723. })
  724. }
  725. }
  726. })
  727. },
  728. changeSale(){
  729. this.formData.buyPeople = 'CUSTOMER'
  730. },
  731. getinitlbslist() {
  732. // 初始化请求省市区街道下拉选项数据
  733. lbsAmapRegion({ pid: 0 }).then(res => {
  734. this.provinceList = res.data
  735. // 创建工单时获取ip地址定位赋值
  736. if (!this.id && this.$IpAdd.province) {
  737. var item = this.provinceList.find(item => item.name === this.$IpAdd.province)
  738. if (item) {
  739. this.formData.provinceId = item.id
  740. this.formData.province = item.name
  741. }
  742. }
  743. if (this.formData.provinceId) {
  744. lbsAmapRegion({ pid: this.formData.provinceId }).then(res => {
  745. this.cityList = res.data
  746. // 创建工单时获取ip地址定位赋值
  747. if (!this.id && this.$IpAdd.city) {
  748. var item2 = this.cityList.find(item => item.name === this.$IpAdd.city)
  749. if (item2) {
  750. this.formData.cityId = item2.id
  751. this.formData.city = item2.name
  752. }
  753. }
  754. if (this.formData.cityId) {
  755. lbsAmapRegion({ pid: this.formData.cityId }).then(res => {
  756. this.areaList = res.data
  757. })
  758. }
  759. if (this.formData.areaId) {
  760. lbsAmapRegion({ pid: this.formData.areaId }).then(res => {
  761. this.streetList = res.data
  762. })
  763. }
  764. })
  765. }
  766. })
  767. },
  768. selectAddress(data){
  769. this.formData.lng = data.center[0]
  770. this.formData.lat = data.center[1]
  771. // 获取定位的省市区街道
  772. var { province, city, district, township } = data.data.addressComponent
  773. // 获取选中省名称id
  774. var { id, name } = this.provinceList.find(item => item.name === province)
  775. this.formData.provinceId = id
  776. this.formData.province = name
  777. // 请求市选项
  778. lbsAmapRegion({ pid: this.formData.provinceId }).then(res => {
  779. // 赋值市选项
  780. this.cityList = res.data
  781. // 获取选中市名称id
  782. var { id, name } = res.data.find(item => item.name === city)
  783. this.formData.cityId = id
  784. this.formData.city = name
  785. // 请求区选项
  786. lbsAmapRegion({ pid: this.formData.cityId }).then(res => {
  787. // 赋值区选项
  788. this.areaList = res.data
  789. // 获取选中区名称id
  790. var { id, name } = res.data.find(item => item.name === district)
  791. this.formData.areaId = id
  792. this.formData.area = name
  793. // 请求街道选项
  794. lbsAmapRegion({ pid: this.formData.areaId }).then(res => {
  795. // 赋值街道选项
  796. this.streetList = res.data
  797. // 获取选中街道名称id
  798. var { id, name } = res.data.find(item => item.name === township)
  799. this.formData.streetId = id
  800. this.formData.street = name
  801. // 赋值GPS详细地址
  802. this.formData.address = data.name
  803. })
  804. })
  805. })
  806. },
  807. }
  808. };
  809. </script>
  810. <style scoped="scoped" lang="scss">
  811. .s-page {
  812. padding: 20px;
  813. background-color: #ffffff;
  814. }
  815. .page-footer {
  816. height: 70px;
  817. }
  818. .footer {
  819. position: fixed;
  820. bottom: 0;
  821. left: 0;
  822. z-index: 1;
  823. width: 100%;
  824. background: #fff;
  825. padding: 15px 40px;
  826. box-sizing: border-box;
  827. transition: all 0.28s;
  828. text-align: right;
  829. box-shadow: 0 2px 5px 0 rgb(0 0 0 / 50%), 0 2px 5px 0 rgb(0 0 0 / 10%);
  830. &.hideSidebar {
  831. margin-left: 54px;
  832. width: calc(100vw - 54px);
  833. }
  834. &.openSidebar {
  835. margin-left: 210px;
  836. width: calc(100vw - 210px);
  837. }
  838. .tips {
  839. font-size: 12px;
  840. color: red;
  841. margin-top: 10px;
  842. }
  843. }
  844. </style>