attachmentSalesOrderDetail.vue 33 KB

123456789101112131415161718192021222324252627282930313233343536373839404142434445464748495051525354555657585960616263646566676869707172737475767778798081828384858687888990919293949596979899100101102103104105106107108109110111112113114115116117118119120121122123124125126127128129130131132133134135136137138139140141142143144145146147148149150151152153154155156157158159160161162163164165166167168169170171172173174175176177178179180181182183184185186187188189190191192193194195196197198199200201202203204205206207208209210211212213214215216217218219220221222223224225226227228229230231232233234235236237238239240241242243244245246247248249250251252253254255256257258259260261262263264265266267268269270271272273274275276277278279280281282283284285286287288289290291292293294295296297298299300301302303304305306307308309310311312313314315316317318319320321322323324325326327328329330331332333334335336337338339340341342343344345346347348349350351352353354355356357358359360361362363364365366367368369370371372373374375376377378379380381382383384385386387388389390391392393394395396397398399400401402403404405406407408409410411412413414415416417418419420421422423424425426427428429430431432433434435436437438439440441442443444445446447448449450451452453454455456457458459460461462463464465466467468469470471472473474475476477478479480481482483484485486487488489490491492493494495496497498499500501502503504505506507508509510511512513514515516517518519520521522523524525526527528529530531532533534535536537538539540541542543544545546547548549550551552553554555556557558559560561562563564565566567568569570571572573574575576577578579580581582583584585586587588589590591592593594595596597598599600601602603604605606607608609610611612613614615616617618619620621622623624625626627628629630631632633634635636637638639640641642643644645646647648649650651652653654655656657658659660661662663664665666667668669670671672673674675676677678679680681682683684685686687688689690691692693694695696697698699700701702703704705706707708709710711712713714715716717718719720721722723724725726727728729730731732733734735736737738739740741742743744745746747748749750751752753754755756757758759760761762763764765766767768769770771772773774775776777778779780781782783784785786787788789790791792793794795796797798799800801802803804805806807808809810811812813814815816817818819820821822823824825826827828829830831832833834835836837838839840841842843844845846847848849850851852853854855856857858859860861862863864865866867868869870871872873874875876877878879880881882883884885886
  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="项目地址" :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="收款金额" prop="price">
  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. rules1: {
  455. price: [
  456. { pattern:/^[1-9]\d*(\.\d+)?$|^0\.[1-9]\d*$/, message: '请输入大于0的数字', trigger: 'blur' }
  457. ],
  458. }
  459. };
  460. },
  461. computed: {},
  462. created() {
  463. if(this.id){
  464. this.getDetail()
  465. }
  466. this.getinitlbslist()
  467. this.getWebsit()
  468. this.getProject()
  469. },
  470. methods: {
  471. // 返回
  472. goBack() {
  473. this.$emit('back');
  474. },
  475. async getDetail(){
  476. const that = this
  477. getDetail({salesId: this.id}).then(async res => {
  478. Object.assign(this.formData, res.data, {
  479. websit: {websitId: res.data.websitId,name: res.data.websitName},
  480. worker: {nickName: res.data.workerName,userId: res.data.workerId},
  481. 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}
  482. })
  483. this.getWorker()
  484. if(res.data.salesType == '工程'){
  485. this.getProjectCollectionList(res.data.orderEnginBaseId)
  486. }
  487. for(var item of res.data.items){
  488. var ress = await that.getGoods(item.goodsName, 1)
  489. item.goods = {...ress.data,oldPrice:ress.data.price}
  490. item.goodsList = ress.data ? [{...ress.data,oldPrice:ress.data.price}] : []
  491. }
  492. this.dataList = res.data.items
  493. })
  494. },
  495. getWebsit(){
  496. getWebsit({type: 'C'}).then(res => {
  497. this.websitList = res.data
  498. })
  499. },
  500. changeWebsit(e){
  501. this.formData.websitId = e.websitId
  502. this.formData.websitName = e.name
  503. this.getWorker()
  504. },
  505. toAddProject(){
  506. this.$router.push({
  507. name: 'basicEngineeringData'
  508. })
  509. },
  510. getProject(){
  511. getProject({
  512. pageNum: 1,
  513. pageSize: -1,
  514. params:[]
  515. }).then(res => {
  516. this.projectList = res.data.records
  517. })
  518. },
  519. getProjectCollectionList(orderEnginBaseId){
  520. getProjectCollectionList({orderEnginBaseId,goodsType: 'P'}).then(res => {
  521. this.collectionList = res.data
  522. })
  523. },
  524. async getGoods(goodsName,type){
  525. const that = this
  526. if(type == 1){
  527. return new Promise((resolve, reject) => {
  528. getGoods({websitId: this.formData.websitId,type: 'P',goodsName: goodsName,orderEnginBaseId: this.formData.orderEnginBaseId,saleType: this.formData.salesType}).then(res => {
  529. resolve({
  530. data: res.data[0]
  531. })
  532. })
  533. })
  534. }else{
  535. getGoods({websitId: this.formData.websitId,type: 'P',orderEnginBaseId: this.formData.orderEnginBaseId,saleType: this.formData.salesType}).then(res => {
  536. that.dataList[that.isEdit].goodsList = res.data
  537. console.log(this.dataList)
  538. })
  539. }
  540. },
  541. getWorker(){
  542. getWorker({pageNum: 1,pageSize: -1,params: [{param: 'b.websit_id',compare: '=',value: this.formData.websitId}]}).then(res => {
  543. this.workerList = res.data.records
  544. })
  545. },
  546. changeWorker(e){
  547. this.formData.identity = e.idCard
  548. this.formData.workerMobile = e.mobile
  549. this.formData.workerId = e.userId
  550. this.formData.workerName = e.nickName
  551. },
  552. workerBlur(e){
  553. this.formData.worker = e.target.value
  554. this.$forceUpdate()
  555. },
  556. changeGoods(e){
  557. console.log(e)
  558. this.dataList[this.isEdit].goodsId = e.goodsId
  559. this.dataList[this.isEdit].goodsName = e.goodsName
  560. this.dataList[this.isEdit].goodsSalesUnit = e.goodsSalesUnit
  561. this.dataList[this.isEdit].brandRelaName = e.brandRelaName
  562. this.dataList[this.isEdit].productRelaName = e.productRelaName
  563. this.dataList[this.isEdit].price = e.price
  564. this.dataList[this.isEdit].goodsCode = e. goodsCode
  565. this.dataList[this.isEdit].qty = e.qty
  566. this.dataList[this.isEdit].itemSourceType = e.itemSourceType
  567. this.dataList[this.isEdit].itemSourceId = e.itemSourceId
  568. this.dataList[this.isEdit].normType = e.normType
  569. },
  570. add(){
  571. if(this.dataList.length != 0){this.isEdit = 0}
  572. this.dataList.unshift({
  573. goodsList: [],
  574. goods: {},
  575. goodsId: '',
  576. goodsName: '',
  577. goodsSalesUnit: '',
  578. brandRelaName: '',
  579. productRelaName: '',
  580. goodsCode: '',
  581. price: '',
  582. saleAmount: '',
  583. salesQty: 1,
  584. qty: '',
  585. goodsType: 'P',
  586. itemSourceType: '',
  587. itemSourceId: '',
  588. normType: ''
  589. })
  590. this.getGoods()
  591. },
  592. del(index){
  593. if(index <= 1){this.isEdit == 0}else{this.isEdit -= 1}
  594. this.dataList.splice(index,1)
  595. },
  596. confirmSubmit(){
  597. if(this.formData1.price && !/^[1-9]\d*(\.\d+)?$|^0\.[1-9]\d*$/.test(this.formData1.price)){
  598. return this.$message.warning('请输入大于0的数字!')
  599. }
  600. this.$confirm(`请确定是否提交订单, 是否继续?`, '提示', {
  601. confirmButtonText: '确定',
  602. cancelButtonText: '取消',
  603. type: 'warning'
  604. }).then(() => {
  605. submit({
  606. salesId: this.formData.salesId,
  607. price: this.formData1.price,
  608. urlPrc: this.formData1.fileUrl.length> 0 ?this.formData1.fileUrl[0].url: '',
  609. remark: this.formData1.remark
  610. }).then(res => {
  611. if(res.code == 200){
  612. this.$message.success('提交成功!')
  613. if(this.formData.payType == 'WECHAT'){
  614. this.wxPay()
  615. }else{
  616. this.goBack()
  617. }
  618. }
  619. })
  620. });
  621. },
  622. submit(){
  623. const that = this
  624. this.$refs.formData.validate((valid, invalidFields, errLabels) => {
  625. if (valid) {
  626. edit({
  627. salesId: this.formData.salesId,
  628. goodsType: 'P',
  629. source: this.formData.source,
  630. payType: this.formData.payType,
  631. remark: this.formData.remark,
  632. websitId: this.formData.websitId,
  633. websitName: this.formData.websitName,
  634. workerName: this.formData.workerName,
  635. workerId: this.formData.workerId,
  636. identity: this.formData.identity,
  637. workerMobile: this.formData.workerMobile,
  638. buyPeople: this.formData.buyPeople,
  639. items: this.dataList,
  640. orderEnginBaseId: this.formData.orderEnginBaseId,
  641. salesType: this.formData.salesType
  642. }).then(res => {
  643. if(res.code == 200){
  644. this.confirmSubmit()
  645. }
  646. })
  647. }
  648. })
  649. },
  650. confirm(){
  651. this.$confirm(`请确定是否确认提货, 是否继续?`, '提示', {
  652. confirmButtonText: '确定',
  653. cancelButtonText: '取消',
  654. type: 'warning'
  655. }).then(() => {
  656. confirm({
  657. salesId: this.formData.salesId
  658. }).then(res => {
  659. if(res.code == 200){
  660. this.$message.success('审核成功!')
  661. this.goBack()
  662. }
  663. })
  664. });
  665. },
  666. checkPay(){
  667. this.timer = setInterval(()=>{
  668. getDetail({salesId: this.id}).then(res => {
  669. if(res.data.payFlag == 'YES'){
  670. this.$refs.payQRCode.innerHTML = '';
  671. this.clear()
  672. this.$message.success('支付成功!')
  673. this.goBack()
  674. }
  675. })
  676. },3000)
  677. },
  678. clear(){
  679. clearInterval(this.timer)
  680. },
  681. wxPay(){
  682. if(!this.is_submit){
  683. return false
  684. }
  685. this.is_submit = false
  686. setTimeout(()=>{
  687. this.is_submit = true
  688. },2000)
  689. getCode({
  690. salesId: this.formData.salesId
  691. }).then(res => {
  692. if(res.code == 200){
  693. this.payCodeUrl = res.data.codeUrl
  694. this.$refs.payQRCode.innerHTML = '';
  695. this.$nextTick(() => {
  696. this.payUrl = res.data.codeUrl;
  697. new QRCode(this.$refs.payQRCode, {
  698. text: res.data.codeUrl,
  699. width: 200,
  700. height: 200,
  701. colorDark: "#333333", // 二维码颜色
  702. colorLight: "#ffffff", // 二维码背景色
  703. correctLevel: QRCode.CorrectLevel.L // 容错率,L/M/H
  704. });
  705. this.checkPay()
  706. });
  707. }
  708. })
  709. this.isPay = true
  710. },
  711. save(){
  712. this.$refs.formData.validate((valid, invalidFields, errLabels) => {
  713. if (valid) {
  714. if(this.formType == 0){
  715. add({
  716. goodsType: 'P',
  717. source: this.formData.source,
  718. payType: this.formData.payType,
  719. remark: this.formData.remark,
  720. websitId: this.formData.websitId,
  721. websitName: this.formData.websitName,
  722. workerName: this.formData.workerName,
  723. workerId: this.formData.workerId,
  724. identity: this.formData.identity,
  725. workerMobile: this.formData.workerMobile,
  726. buyPeople: this.formData.buyPeople,
  727. items: this.dataList,
  728. orderEnginBaseId: this.formData.orderEnginBaseId,
  729. salesType: this.formData.salesType
  730. }).then(res => {
  731. if(res.code == 200){
  732. this.$message.success('提交成功!')
  733. this.goBack()
  734. }
  735. })
  736. }else if(this.formType == 1){
  737. edit({
  738. salesId: this.formData.salesId,
  739. goodsType: 'P',
  740. source: this.formData.source,
  741. payType: this.formData.payType,
  742. remark: this.formData.remark,
  743. websitId: this.formData.websitId,
  744. websitName: this.formData.websitName,
  745. workerName: this.formData.workerName,
  746. workerId: this.formData.workerId,
  747. identity: this.formData.identity,
  748. workerMobile: this.formData.workerMobile,
  749. buyPeople: this.formData.buyPeople,
  750. items: this.dataList,
  751. orderEnginBaseId: this.formData.orderEnginBaseId,
  752. salesType: this.formData.salesType
  753. }).then(res => {
  754. if(res.code == 200){
  755. this.dataList = []
  756. this.$message.success('提交成功!')
  757. this.goBack()
  758. }
  759. })
  760. }
  761. }
  762. })
  763. },
  764. changeSale(){
  765. this.formData.buyPeople = 'CUSTOMER'
  766. },
  767. getinitlbslist() {
  768. // 初始化请求省市区街道下拉选项数据
  769. lbsAmapRegion({ pid: 0 }).then(res => {
  770. this.provinceList = res.data
  771. // 创建工单时获取ip地址定位赋值
  772. if (!this.id && this.$IpAdd.province) {
  773. var item = this.provinceList.find(item => item.name === this.$IpAdd.province)
  774. if (item) {
  775. this.formData.provinceId = item.id
  776. this.formData.province = item.name
  777. }
  778. }
  779. if (this.formData.provinceId) {
  780. lbsAmapRegion({ pid: this.formData.provinceId }).then(res => {
  781. this.cityList = res.data
  782. // 创建工单时获取ip地址定位赋值
  783. if (!this.id && this.$IpAdd.city) {
  784. var item2 = this.cityList.find(item => item.name === this.$IpAdd.city)
  785. if (item2) {
  786. this.formData.cityId = item2.id
  787. this.formData.city = item2.name
  788. }
  789. }
  790. if (this.formData.cityId) {
  791. lbsAmapRegion({ pid: this.formData.cityId }).then(res => {
  792. this.areaList = res.data
  793. })
  794. }
  795. if (this.formData.areaId) {
  796. lbsAmapRegion({ pid: this.formData.areaId }).then(res => {
  797. this.streetList = res.data
  798. })
  799. }
  800. })
  801. }
  802. })
  803. },
  804. selectAddress(data){
  805. this.formData.lng = data.center[0]
  806. this.formData.lat = data.center[1]
  807. // 获取定位的省市区街道
  808. var { province, city, district, township } = data.data.addressComponent
  809. // 获取选中省名称id
  810. var { id, name } = this.provinceList.find(item => item.name === province)
  811. this.formData.provinceId = id
  812. this.formData.province = name
  813. // 请求市选项
  814. lbsAmapRegion({ pid: this.formData.provinceId }).then(res => {
  815. // 赋值市选项
  816. this.cityList = res.data
  817. // 获取选中市名称id
  818. var { id, name } = res.data.find(item => item.name === city)
  819. this.formData.cityId = id
  820. this.formData.city = name
  821. // 请求区选项
  822. lbsAmapRegion({ pid: this.formData.cityId }).then(res => {
  823. // 赋值区选项
  824. this.areaList = res.data
  825. // 获取选中区名称id
  826. var { id, name } = res.data.find(item => item.name === district)
  827. this.formData.areaId = id
  828. this.formData.area = name
  829. // 请求街道选项
  830. lbsAmapRegion({ pid: this.formData.areaId }).then(res => {
  831. // 赋值街道选项
  832. this.streetList = res.data
  833. // 获取选中街道名称id
  834. var { id, name } = res.data.find(item => item.name === township)
  835. this.formData.streetId = id
  836. this.formData.street = name
  837. // 赋值GPS详细地址
  838. this.formData.address = data.name
  839. })
  840. })
  841. })
  842. },
  843. }
  844. };
  845. </script>
  846. <style scoped="scoped" lang="scss">
  847. .s-page {
  848. padding: 20px;
  849. background-color: #ffffff;
  850. }
  851. .page-footer {
  852. height: 70px;
  853. }
  854. .footer {
  855. position: fixed;
  856. bottom: 0;
  857. left: 0;
  858. z-index: 1;
  859. width: 100%;
  860. background: #fff;
  861. padding: 15px 40px;
  862. box-sizing: border-box;
  863. transition: all 0.28s;
  864. text-align: right;
  865. box-shadow: 0 2px 5px 0 rgb(0 0 0 / 50%), 0 2px 5px 0 rgb(0 0 0 / 10%);
  866. &.hideSidebar {
  867. margin-left: 54px;
  868. width: calc(100vw - 54px);
  869. }
  870. &.openSidebar {
  871. margin-left: 210px;
  872. width: calc(100vw - 210px);
  873. }
  874. .tips {
  875. font-size: 12px;
  876. color: red;
  877. margin-top: 10px;
  878. }
  879. }
  880. </style>