orderCheck.vue 56 KB

123456789101112131415161718192021222324252627282930313233343536373839404142434445464748495051525354555657585960616263646566676869707172737475767778798081828384858687888990919293949596979899100101102103104105106107108109110111112113114115116117118119120121122123124125126127128129130131132133134135136137138139140141142143144145146147148149150151152153154155156157158159160161162163164165166167168169170171172173174175176177178179180181182183184185186187188189190191192193194195196197198199200201202203204205206207208209210211212213214215216217218219220221222223224225226227228229230231232233234235236237238239240241242243244245246247248249250251252253254255256257258259260261262263264265266267268269270271272273274275276277278279280281282283284285286287288289290291292293294295296297298299300301302303304305306307308309310311312313314315316317318319320321322323324325326327328329330331332333334335336337338339340341342343344345346347348349350351352353354355356357358359360361362363364365366367368369370371372373374375376377378379380381382383384385386387388389390391392393394395396397398399400401402403404405406407408409410411412413414415416417418419420421422423424425426427428429430431432433434435436437438439440441442443444445446447448449450451452453454455456457458459460461462463464465466467468469470471472473474475476477478479480481482483484485486487488489490491492493494495496497498499500501502503504505506507508509510511512513514515516517518519520521522523524525526527528529530531532533534535536537538539540541542543544545546547548549550551552553554555556557558559560561562563564565566567568569570571572573574575576577578579580581582583584585586587588589590591592593594595596597598599600601602603604605606607608609610611612613614615616617618619620621622623624625626627628629630631632633634635636637638639640641642643644645646647648649650651652653654655656657658659660661662663664665666667668669670671672673674675676677678679680681682683684685686687688689690691692693694695696697698699700701702703704705706707708709710711712713714715716717718719720721722723724725726727728729730731732733734735736737738739740741742743744745746747748749750751752753754755756757758759760761762763764765766767768769770771772773774775776777778779780781782783784785786787788789790791792793794795796797798799800801802803804805806807808809810811812813814815816817818819820821822823824825826827828829830831832833834835836837838839840841842843844845846847848849850851852853854855856857858859860861862863864865866867868869870871872873874875876877878879880881882883884885886887888889890891892893894895896897898899900901902903904905906907908909910911912913914915916917918919920921922923924925926927928929930931932933934935936937938939940941942943944945946947948949950951952953954955956957958959960961962963964965966967968969970971972973974975976977978979980981982983984985986987988989990991992993994995996997998999100010011002100310041005100610071008100910101011101210131014101510161017101810191020102110221023102410251026102710281029103010311032103310341035103610371038103910401041104210431044104510461047104810491050105110521053105410551056105710581059106010611062106310641065106610671068106910701071107210731074107510761077107810791080108110821083108410851086108710881089109010911092109310941095109610971098109911001101110211031104110511061107110811091110111111121113111411151116111711181119112011211122112311241125112611271128112911301131113211331134113511361137113811391140114111421143114411451146114711481149115011511152115311541155115611571158115911601161116211631164116511661167116811691170117111721173117411751176117711781179118011811182118311841185118611871188118911901191119211931194119511961197119811991200120112021203120412051206120712081209121012111212121312141215121612171218121912201221122212231224122512261227122812291230123112321233123412351236123712381239124012411242124312441245124612471248124912501251125212531254125512561257125812591260126112621263126412651266126712681269127012711272127312741275127612771278127912801281128212831284128512861287128812891290129112921293129412951296129712981299130013011302130313041305130613071308130913101311131213131314131513161317131813191320132113221323132413251326132713281329133013311332133313341335133613371338133913401341134213431344134513461347134813491350135113521353
  1. <template>
  2. <div class="bg-in-stock" ref="printId">
  3. <div class="numOrder">
  4. <barcode :value="barcodeValue"></barcode>
  5. </div>
  6. <el-form ref="orderFormRef" :rules="rules" :model="OrderForm" label-width="120px" inline :disabled="isDetail">
  7. <h3>基本信息</h3>
  8. <el-row>
  9. <el-col :span="10">
  10. <el-form-item label="订单类型:" prop="type" :rules="rules.type">
  11. {{ getTypeName(OrderForm.type) }}
  12. </el-form-item>
  13. </el-col>
  14. <el-col :span="10">
  15. <el-form-item label="下单客户:" prop="member_id">
  16. {{ getMemberName(OrderForm.member_id) }}
  17. </el-form-item>
  18. </el-col>
  19. <el-col :span="10">
  20. <el-form-item label="客户名称:" prop="customer_name">
  21. {{ OrderForm.customer_name }}
  22. </el-form-item>
  23. </el-col>
  24. <el-col :span="10">
  25. <el-form-item label="客户联系方式:">
  26. {{ OrderForm.customer_phone }}
  27. </el-form-item>
  28. </el-col>
  29. <el-col :span="10">
  30. <el-form-item label="起始时间:" prop="time" :rules="rules.start_time" v-if="OrderForm.type == 'TO_C'">
  31. {{ OrderForm.start_time }}
  32. </el-form-item>
  33. </el-col>
  34. <el-col :span="10">
  35. <el-form-item label="付款方式:" prop="pay_type" :rules="rules.pay_type">
  36. {{ getPayType(OrderForm.pay_type) }}
  37. </el-form-item>
  38. </el-col>
  39. <!-- <el-col :span="10">
  40. <el-form-item label="应付金额:" prop="pay_price" :rules="rules.pay_price">
  41. <span>{{ "¥" + price }}</span>
  42. </el-form-item>
  43. </el-col>
  44. <el-col :span="10">
  45. <el-form-item label="折扣:" prop="">
  46. <el-input placeholder="请输入" v-model="discount" @blur="handleBlur"
  47. :disabled="type == 'pone'"></el-input>
  48. </el-form-item>
  49. </el-col>
  50. <el-col :span="10">
  51. <el-form-item label="实付金额:" prop="real_price" :rules="rules.pay_price">
  52. {{ "¥" + OrderForm.real_price }}
  53. </el-form-item>
  54. </el-col>-->
  55. <el-col :span="10">
  56. <el-form-item label="销售人员:" prop="marketing_id" :rules="rules.marketing_id">
  57. {{ getMarketingName(OrderForm.marketing_id) }}
  58. </el-form-item>
  59. </el-col>
  60. <el-col :span="10">
  61. <el-form-item label="配送方式:" prop="send_type" :rules="rules.send_type">
  62. {{ getSendType(OrderForm.send_type) }}
  63. </el-form-item>
  64. </el-col>
  65. <el-col :span="10">
  66. <el-form-item label="配送仓库:" prop="warehouse_id" :rules="rules.warehouse_id">
  67. {{ warehouseNames(OrderForm.warehouse_id) }}
  68. </el-form-item>
  69. </el-col>
  70. <el-col :span="10">
  71. <el-form-item label="返回仓库:" prop="return_warehouse_id" :rules="rules.return_warehouse_id">
  72. {{ warehouseName(OrderForm.return_warehouse_id) }}
  73. </el-form-item>
  74. </el-col>
  75. <el-col :span="10">
  76. <el-form-item label="配送地址:" prop="province_city_area_address">
  77. {{ OrderForm.province_city_area_address }}
  78. </el-form-item>
  79. </el-col>
  80. <!-- <el-col :span="10">
  81. <el-form-item label="允许负库存:">
  82. <el-radio-group v-model="OrderForm.subtract_stock" :disabled="type == 'pone'">
  83. <el-radio :label="false">禁止</el-radio>
  84. <el-radio :label="true">允许</el-radio>
  85. </el-radio-group>
  86. </el-form-item>
  87. </el-col> -->
  88. <el-col :span="24">
  89. <div class="redClass">
  90. <el-form-item label="备注:" prop="remark">
  91. {{ OrderForm.remark }}
  92. </el-form-item>
  93. </div>
  94. </el-col>
  95. </el-row>
  96. <div style="margin-bottom: 10px">
  97. <h3>商品明细</h3>
  98. <div v-if="!isDetail">
  99. <el-button class="button" size="mini" type="primary" @click="handleSelectGoods">手动选择</el-button>
  100. <el-button class="button" size="mini" type="primary" @click="handleSelectGrou">选择分组商品</el-button>
  101. </div>
  102. </div>
  103. <div style="display: block">
  104. <el-table :data="OrderForm.product_list" border :cell-style="{ textAlign: 'center' }"
  105. @selection-change="handleSelectionChange" :header-cell-style="{ textAlign: 'center' }"
  106. style="width: 95%">
  107. <el-table-column type="selection" width="40" align="center" />
  108. <el-table-column label="图标">
  109. <template slot-scope="scope">
  110. <img :src="cleanUrl(scope.row.goods_vo.image_small_list)" alt="" width="50px">
  111. </template>
  112. </el-table-column>
  113. <el-table-column label="仓库名称">
  114. <template slot-scope="scope">
  115. {{ warehouseName(scope.row.warehouse_id) }}
  116. </template>
  117. </el-table-column>
  118. <el-table-column label="商品编号">
  119. <template slot-scope="scope">
  120. {{ scope.row.goods_vo.sn }}
  121. </template>
  122. </el-table-column>
  123. <el-table-column label="商品名称">
  124. <template slot-scope="scope">
  125. {{ scope.row.goods_vo.name }}
  126. </template>
  127. </el-table-column>
  128. <el-table-column label="sku">
  129. <template slot-scope="scope">
  130. <span v-if="!id"> {{ scope.row.product_vo.sku }}</span>
  131. <span v-else> {{ scope.row.product_vo.sku }}</span>
  132. </template>
  133. </el-table-column>
  134. <el-table-column label="序列号">
  135. <template slot-scope="scope">
  136. <span v-if="!id"> {{ scope.row.product_vo.sn_code }}</span>
  137. <span v-else> {{ scope.row.product_vo.sn_code }}</span>
  138. </template>
  139. </el-table-column>
  140. <el-table-column prop="product_vo.spec_name" label="规格型号">
  141. <!-- <template slot-scope="scope">
  142. <span v-if="!id">{{ scope.row.product_vo.spec_name }}</span>
  143. <span v-else>{{ scope.row.product_vo.spec_name }}</span>
  144. </template> -->
  145. </el-table-column>
  146. <el-table-column label="单位">
  147. <template slot-scope="scope">
  148. <span v-if="!id"> {{ scope.row.product_vo.unit }}</span>
  149. <span v-else> {{ scope.row.product_vo.unit }}</span>
  150. </template>
  151. </el-table-column>
  152. <el-table-column label="订单数量">
  153. <template slot-scope="scope">
  154. {{ scope.row.num }}
  155. </template>
  156. </el-table-column>
  157. <el-table-column label="库存数量">
  158. <template slot-scope="scope">
  159. {{ scope.row.usable_stock }}
  160. </template>
  161. </el-table-column>
  162. <el-table-column label="售后数量">
  163. <template slot-scope="scope">
  164. {{ scope.row.return_num }}
  165. </template>
  166. </el-table-column>
  167. <el-table-column label="租赁天数" v-if="OrderForm.type == 'TO_C'">
  168. <template slot-scope="scope">
  169. {{ scope.row.day_num }}
  170. </template>
  171. </el-table-column>
  172. <!-- <el-table-column label="结束时间" width="200" v-if="OrderForm.type == 'TO_C'">
  173. <template slot-scope="scope">
  174. <el-date-picker style="width: 170px;" v-model="scope.row.end_time" type="datetime"
  175. placeholder="选择日期时间" :picker-options="pickerOptionsEnd"
  176. value-format="yyyy-MM-dd HH:mm:ss">
  177. </el-date-picker>
  178. </template>
  179. </el-table-column> -->
  180. <el-table-column label="操作" v-if="!isDetail && type !== 'pone'">
  181. <template slot-scope="scope">
  182. <el-button size="mini" type="danger"
  183. @click="OrderForm.product_list.splice(scope.$index, 1)">删除
  184. </el-button>
  185. </template>
  186. </el-table-column>
  187. </el-table>
  188. </div>
  189. <el-row style="margin-top: 15px;margin-bottom: 20px;">
  190. <el-col :span="8">
  191. <el-form-item label="应付金额:" prop="pay_price" :rules="rules.pay_price">
  192. <span>{{ "¥" + price }}</span>
  193. </el-form-item>
  194. </el-col>
  195. <el-col :span="8">
  196. <el-form-item label="实付金额:" prop="real_price" :rules="rules.pay_price">
  197. {{ OrderForm.real_price }}
  198. <!-- <el-input v-model="OrderForm.real_price" placeholder="请输入"
  199. :disabled="type == 'pone'"></el-input> style="display: flex;justify-content: center;" -->
  200. </el-form-item>
  201. </el-col>
  202. <el-col :span="8">
  203. <el-form-item label="扫码支付:" prop="real_price" :rules="rules.pay_price">
  204. <div id="qrCode" ref="qrCodeDiv"></div>
  205. </el-form-item>
  206. </el-col>
  207. </el-row>
  208. <div class="footer">
  209. <el-button type="primary" @click="submit" v-if="!isDetail && type == 'pone'"
  210. :loading="formLoading">确认</el-button>
  211. <el-button type="primary" @click="submitOrderForm" v-if="!isDetail && type !== 'pone'"
  212. :loading="formLoading">保存</el-button>
  213. <el-button type="primary" @click="saveSubmitOrderForm" v-if="!isDetail && type !== 'pone'"
  214. :loading="formLoading">确认并保存</el-button>
  215. <el-button @click="printIng" :disabled="false" v-if="isDetail">打印</el-button>
  216. <el-button @click="roBack()" :disabled="false">返回</el-button>
  217. </div>
  218. </el-form>
  219. <el-dialog title="添加客户信息" :visible.sync="customer.dialogVisible" width="1100px" @open="handleDialogOpen"
  220. :modal-append-to-body="false" :close-on-click-modal="false" :close-on-press-escape="false">
  221. <el-form :model="customer.supplierForm" :rules="customer.supplierRules" ref="supplierForm"
  222. label-width="120px" inline>
  223. <el-form-item label="公司名称" prop="name">
  224. <el-input v-model="customer.supplierForm.name" :minlength="2" :maxlength="20" clearable
  225. placeholder="请输入公司名称"></el-input>
  226. </el-form-item>
  227. <el-form-item label="客户联系人" prop="contact ">
  228. <el-input v-model="customer.supplierForm.contact" :minlength="2" :maxlength="20" clearable
  229. placeholder="请输入客户联系人"></el-input>
  230. </el-form-item>
  231. <el-form-item label="性别" prop="gender">
  232. <el-radio v-model="customer.supplierForm.gender" label="男">男</el-radio>
  233. <el-radio v-model="customer.supplierForm.gender" label="女">女</el-radio>
  234. </el-form-item>
  235. <el-form-item label="手机号码" prop="mobile">
  236. <el-input v-model="customer.supplierForm.mobile" :minlength="2" :maxlength="20" clearable
  237. placeholder="请输入手机号码"></el-input>
  238. </el-form-item>
  239. <el-form-item label="邮件" prop="email">
  240. <el-input v-model="customer.supplierForm.email" :minlength="2" :maxlength="20" clearable
  241. placeholder="请输入电子邮件"></el-input>
  242. </el-form-item>
  243. <el-form-item label="客户类别" prop="type">
  244. <el-select v-model="customer.supplierForm.type" placeholder="请选择客户类别">
  245. <el-option v-for="item in customer.options" :key="item.value" :label="item.label"
  246. :value="item.value">
  247. </el-option>
  248. </el-select>
  249. </el-form-item>
  250. <!-- <el-form-item label="状态" prop="status">
  251. <el-input v-model="customer.supplierForm.status" :minlength="2" :maxlength="20" clearable
  252. placeholder="请输入客户状态"></el-input>
  253. </el-form-item> -->
  254. </el-form>
  255. <span slot="footer" class="dialog-footer">
  256. <el-button @click="customer.dialogVisible = false">取 消</el-button>
  257. <el-button type="primary" @click="submitSupplierForm">确 定</el-button>
  258. </span>
  259. </el-dialog>
  260. <el-dialog title="商品列表" :visible.sync="goodsVisible" width="1000px" @close="closeGoosData">
  261. <el-table ref="table" :data="goodsData.records" border style="width: 100%"
  262. @selection-change="handleSelChange">
  263. <el-table-column type="selection" width="55" />
  264. <el-table-column prop="name" label="分组名称"> </el-table-column>
  265. <el-table-column prop="remark" label="描述"> </el-table-column>
  266. </el-table>
  267. <el-pagination @size-change="handlePageSizeChange" @current-change="handlePageCurrentChange"
  268. :current-page="goodsData.page" :page-sizes="[10, 20, 50, 100]" :page-size="goodsData.size"
  269. layout="total, sizes, prev, pager, next, jumper" :total="goodsData.total"></el-pagination>
  270. <span slot="footer" class="dialog-footer">
  271. <el-button @click="closeGoosData">取 消</el-button>
  272. <el-button type="primary" @click="submitGoosData()">确 定</el-button>
  273. </span>
  274. </el-dialog>
  275. </div>
  276. </template>
  277. <script>
  278. import { mapGetters } from "vuex";
  279. import * as API_Order from "@/api/order";
  280. import * as API_BasicSetting from "@/api/basicSetting";
  281. import * as API_Member from "@/api/member";
  282. import * as API_Setting from "@/api/setting";
  283. import * as API_CollectingAccount from "@/api/collectingAccount";
  284. import * as API_productClass from "@/api/productClass.js"
  285. import { RegExp } from "~/ui-utils";
  286. import {
  287. provinceAndCityData,
  288. pcTextArr,
  289. regionData,
  290. pcaTextArr,
  291. codeToText,
  292. } from "element-china-area-data";
  293. import Print from "print-js";
  294. import html2canvas from "html2canvas";
  295. import QRCode from 'qrcodejs2'
  296. const initOrderForm = {
  297. product_list: [],
  298. payment_list: [],
  299. tax_price: 0,
  300. total_price: 0,
  301. discount_price: 0,
  302. pay_price: 0,
  303. deposit_price: 0,
  304. send_type: "express",
  305. subtract_stock: false,
  306. payment_status: "NOT_PAY",
  307. start_time: null,
  308. real_price: 0
  309. };
  310. export default {
  311. name: "orderAdd",
  312. data() {
  313. return {
  314. brcode: false,
  315. options: regionData,
  316. selectedOptions: [],
  317. warehouseList: [], // 仓库列表
  318. memberList: [], // 会员列表
  319. marketingList: [], // 销售经理列表
  320. storeList: [], // 门店列表
  321. collectingAccountList: [], // 支付方式列表
  322. fileList: [],
  323. deliveryTypeList: [
  324. {
  325. code: "express",
  326. name: "快递配送",
  327. },
  328. {
  329. code: "self_pick",
  330. name: "门店自提",
  331. },
  332. ],
  333. id: "",
  334. /** 订单表单*/
  335. OrderForm: {
  336. //省市区地址
  337. province_city_area: "",
  338. //详细信息
  339. address: "",
  340. real_price: '',
  341. province_city_area_address: "",
  342. subtract_stock: false,
  343. warehouse_id: [],
  344. return_warehouse_id: '',
  345. start_time: null,
  346. customer_name: "",
  347. customer_phone: '',
  348. },
  349. formLoading: false,
  350. isDetail: undefined,
  351. multipleSelection: [], // 勾选的商品
  352. batchUpdateNum: 0, // 批量设置的数量
  353. showUpdateNum: false, // 是否显示数量设置
  354. batchDiscountType: 0, // 批量设置的类型 0按比例 1按金额
  355. batchDiscountPrice: 0, // 批量设置的优惠比例或金额
  356. showDiscountPrice: false, // 是否显示优惠金额设置
  357. batchTaxRate: 0, // 批量设置的税率
  358. showTaxRate: false, // 是否显示税率设置
  359. rules: {
  360. customer_name: [this.MixinRequired("请输入客户名称", "blur")],
  361. type: [this.MixinRequired("请选择订单类型", "change")],
  362. pay_type: [this.MixinRequired("请选择付款方式", "change")],
  363. pay_price: [this.MixinRequired("请输入付款金额", "blur")],
  364. marketing_id: [this.MixinRequired("请选择销售人员", "change")],
  365. send_type: [this.MixinRequired("请选择配送方式", "change")],
  366. warehouse_id: [this.MixinRequired("请选择仓库", "change")],
  367. return_warehouse_id: [this.MixinRequired("请选择返回仓库", "change")],
  368. order_time: [this.MixinRequired("下单时间不能为空", "change")],
  369. payment_status: [this.MixinRequired("支付状态不能为空", "change")],
  370. payment_time: [this.MixinRequired("支付时间不能为空", "change")],
  371. real_price: [this.MixinRequired("请输入实付金额", "blur")],
  372. // delivery_type: [this.MixinRequired("请选择配送方式", "change")],
  373. product_list: {
  374. num: [
  375. this.MixinRequired("数量不能为空", "change"),
  376. {
  377. validator: (rule, value, callback) => {
  378. if (value && !RegExp.integer.test(value)) {
  379. callback(new Error("请输入正整数"));
  380. } else {
  381. callback();
  382. }
  383. },
  384. },
  385. ],
  386. tax_rate: [
  387. this.MixinRequired("税率不能为空", "change"),
  388. {
  389. validator: (rule, value, callback) => {
  390. if (value && !RegExp.money.test(value)) {
  391. callback(new Error("请输入正确的税率"));
  392. } else {
  393. callback();
  394. }
  395. },
  396. trigger: "blur",
  397. },
  398. ],
  399. price: [
  400. this.MixinRequired("单价不能为空", "change"),
  401. {
  402. validator: (rule, value, callback) => {
  403. if (value && !RegExp.money.test(value)) {
  404. callback(new Error("请输入正确的价格"));
  405. } else {
  406. callback();
  407. }
  408. },
  409. trigger: "blur",
  410. },
  411. ],
  412. discount_price: [
  413. this.MixinRequired("优惠金额不能为空", "change"),
  414. {
  415. validator: (rule, value, callback) => {
  416. if (value && !RegExp.money.test(value)) {
  417. callback(new Error("请输入正确的金额"));
  418. } else {
  419. callback();
  420. }
  421. },
  422. trigger: "blur",
  423. },
  424. ],
  425. },
  426. payment_list: {
  427. collecting_account_id: [
  428. this.MixinRequired("请选择支付方式", "change"),
  429. ],
  430. price: [
  431. this.MixinRequired("支付金额不能为空", "change"),
  432. {
  433. validator: (rule, value, callback) => {
  434. if (value && !RegExp.money.test(value)) {
  435. callback(new Error("请输入正确的金额"));
  436. } else {
  437. callback();
  438. }
  439. },
  440. trigger: "blur",
  441. },
  442. {
  443. validator: (rule, value, callback) => {
  444. if (value && value * 1 <= 0) {
  445. callback(new Error("支付金额必须大于0"));
  446. } else {
  447. callback();
  448. }
  449. },
  450. trigger: "blur",
  451. },
  452. ],
  453. },
  454. customer_phone: [
  455. this.MixinRequired("请输入手机号码!"),
  456. {
  457. validator: (rule, value, callback) => {
  458. if (!RegExp.mobile.test(value)) {
  459. callback(new Error("手机号码格式有误!"));
  460. } else {
  461. callback();
  462. }
  463. },
  464. trigger: ["change", "blur"],
  465. },
  466. ],
  467. },
  468. deptList: [],
  469. // 客户列表
  470. customerList: [],
  471. //
  472. orderTypeList: [],
  473. // 条形码
  474. barcodeValue: "",
  475. time: [],
  476. //新增客户
  477. customer: {
  478. dialogVisible: false,
  479. supplierRules: {
  480. custom_sn: [
  481. this.MixinRequired("请输入客户编号!"),
  482. { min: 2, max: 20, message: "长度在 2 到 20 个字符" },
  483. {
  484. validator: (rule, value, callback) => {
  485. if (value && !RegExp.userName.test(value)) {
  486. callback(
  487. new Error("只支持汉字、字母、数字、“-”、“_”的组合!")
  488. );
  489. } else {
  490. callback();
  491. }
  492. },
  493. },
  494. ],
  495. postal_address: [this.MixinRequired("请输入通讯地址!")],
  496. telephone: [
  497. this.MixinRequired("请输入联系电话!"),
  498. {
  499. validator: (rule, value, callback) => {
  500. if (!RegExp.mobile.test(value)) {
  501. callback(new Error("联系电话格式有误!"));
  502. } else {
  503. callback();
  504. }
  505. },
  506. trigger: ["change", "blur"],
  507. },
  508. ],
  509. name: [this.MixinRequired("请输入联系人!")],
  510. mobile: [
  511. this.MixinRequired("请输入手机号码!"),
  512. {
  513. validator: (rule, value, callback) => {
  514. if (!RegExp.mobile.test(value)) {
  515. callback(new Error("手机号码格式有误!"));
  516. } else {
  517. callback();
  518. }
  519. },
  520. trigger: ["change", "blur"],
  521. },
  522. ],
  523. gender: [
  524. { required: true, message: "请选择性别", trigger: "change" },
  525. ],
  526. type: [
  527. { required: true, message: "请选择客户类别", trigger: "change" },
  528. ],
  529. contact: [
  530. { required: true, message: "请输入客户联系人", trigger: "blur" },
  531. ],
  532. },
  533. supplierForm: {},
  534. options: [],
  535. },
  536. //折扣
  537. discount: '',
  538. pickerOptions: {
  539. disabledDate(v) {
  540. return v.getTime() < new Date().getTime() - 86400000;// - 86400000是否包括当天
  541. }
  542. },
  543. pickerOptionsEnd: {
  544. disabledDate(time) {
  545. // 禁用所有在 start_time 之前的时间
  546. return time.getTime() < new Date().getTime();
  547. }
  548. },
  549. type: '',
  550. goodsData: [],
  551. goodsVisible: false,
  552. goodsList: [],//暂存勾选的分类
  553. params: {
  554. pages: 1,
  555. size: 10
  556. },//商品分页
  557. orderType: '',//条形码查看类型
  558. payurl:"",
  559. };
  560. },
  561. computed: {
  562. ...mapGetters(["user"])
  563. },
  564. mounted() {
  565. this.payurl = window.location.href.split('#')[0]
  566. this.type = this.$route.params.type
  567. this.orderType = this.$route.params.type
  568. this.GET_WarehouseList();
  569. this.GET_MemberList();
  570. this.GET_MarketingList();
  571. this.GET_StoreList();
  572. this.GET_CollectingAccountList();
  573. // 获取客户列表
  574. this.GET_CustomerList();
  575. },
  576. methods: {
  577. // 二维码生成
  578. creatQrCode() {
  579. this.$nextTick(() => {
  580. this.$refs.qrCodeDiv.innerHTML = "";
  581. new QRCode(this.$refs.qrCodeDiv, {
  582. text: this.payurl + '#/payType?id=' + this.id + '&sn=' + this.barcodeValue + '&price=' + this.OrderForm.real_price,
  583. width: 200,
  584. height: 200,
  585. colorDark: "#333333", //二维码颜色
  586. colorLight: "#ffffff", //二维码背景色
  587. correctLevel: QRCode.CorrectLevel.L//容错率,L/M/H
  588. })
  589. }, 500);
  590. },
  591. cleanUrl(url) {
  592. // 检查URL是否以.png结尾
  593. if (url.endsWith('.png')) {
  594. // 找到.png后第一个下划线的位置
  595. const index = url.indexOf('.png') + 4;
  596. // 返回从开始到.png后的字符串
  597. return url.substring(0, index);
  598. }
  599. // 如果不是.png,可以选择去除最后一个下划线后的部分
  600. // 这部分根据实际情况调整,这里假设总是去除最后一个下划线后的内容
  601. const lastIndex = url.lastIndexOf('_');
  602. if (lastIndex !== -1) {
  603. return url.substring(0, lastIndex);
  604. }
  605. // 如果没有下划线,返回原URL
  606. return url;
  607. },
  608. //获取仓库名称
  609. warehouseNames(val) {
  610. let name = [];
  611. this.warehouseList.map((el) => {
  612. val.map((e) => {
  613. if (el.id == e) {
  614. return name.push(el.name)
  615. }
  616. });
  617. });
  618. return name.join('/');
  619. },
  620. //配送方式
  621. getSendType(value) {
  622. // Access orderTypeList directly from the component's data
  623. const type = this.deliveryTypeList.find(type => type.value === value);
  624. return type ? type.label : '未知类型';
  625. },
  626. //销售人员
  627. getMarketingName(value) {
  628. // Access orderTypeList directly from the component's data
  629. const type = this.marketingList.find(type => type.id === value);
  630. return type ? type.real_name : '未知类型';
  631. },
  632. //付款方式
  633. getPayType(value) {
  634. // Access orderTypeList directly from the component's data
  635. const type = this.collectingAccountList.find(type => type.id === value);
  636. return type ? type.name : '未知类型';
  637. },
  638. //下单客户
  639. getMemberName(value) {
  640. // Access orderTypeList directly from the component's data
  641. const type = this.customerList.find(type => type.id === value);
  642. return type ? type.name : '未知类型';
  643. },
  644. //订单类型
  645. getTypeName(value) {
  646. // Access orderTypeList directly from the component's data
  647. const type = this.orderTypeList.find(type => type.value === value);
  648. return type ? type.label : '未知类型';
  649. },
  650. selMember(val) {
  651. API_BasicSetting.getCustomer(val).then(res => {
  652. this.$set(this.OrderForm, 'customer_name', res.name);
  653. this.$set(this.OrderForm, 'customer_phone', res.mobile);
  654. })
  655. },
  656. //选择商品
  657. handleSelChange(val) {
  658. if (val.length > 1) {
  659. // 如果当前选中数量超过1,移除先前选中的,保留最后选中的
  660. const lastSelected = val[val.length - 1];
  661. this.$refs.table.clearSelection(); // 清除所有选中
  662. this.$refs.table.toggleRowSelection(lastSelected, true); // 重新选中最后一个
  663. }
  664. this.goodsList = val // 更新当前选中的行
  665. },
  666. // 保存已选商品
  667. submitGoosData() {
  668. if (this.goodsList.length >= 1) {
  669. API_productClass.getProductByGroup(this.OrderForm.warehouse_id, this.goodsList[0].id).then(res => {
  670. res.map(el => {
  671. this.OrderForm.product_list.push(el)
  672. })
  673. this.goodsVisible = false;
  674. })
  675. } else {
  676. this.$message.error("请选择商品信息");
  677. }
  678. },
  679. // 关闭商品明细
  680. closeGoosData() {
  681. this.goodsVisible = false;
  682. },
  683. handleBlur() {
  684. const value = this.discount;
  685. const regex = /^(10|([1-9](\.\d{0,1})?))$/;
  686. if (!regex.test(value)) {
  687. this.discount = ''; // 清空不符合条件的输入
  688. }
  689. },
  690. // 打印功能
  691. printIng() {
  692. const printContent = this.$refs.printId;
  693. // 获取dom 宽度 高度
  694. const width = printContent.clientWidth;
  695. const height = printContent.clientHeight;
  696. // 创建一个canvas节点
  697. const canvas = document.createElement("canvas");
  698. const scale = 1; // 定义任意放大倍数,支持小数;越大,图片清晰度越高,生成图片越慢。
  699. canvas.width = width * scale; // 定义canvas 宽度 * 缩放
  700. canvas.height = height * scale; // 定义canvas高度 *缩放
  701. canvas.style.width = width * scale + "px";
  702. canvas.style.height = height * scale + "px";
  703. canvas.getContext("2d").scale(scale, scale); // 获取context,设置scale
  704. const scrollTop =
  705. document.documentElement.scrollTop || document.body.scrollTop; // 获取滚动轴滚动的长度
  706. const scrollLeft =
  707. document.documentElement.scrollLeft || document.body.scrollLeft; // 获取水平滚动轴的长度
  708. html2canvas(printContent, {
  709. canvas,
  710. backgroundColor: null,
  711. useCORS: true,
  712. windowHeight: document.body.scrollHeight,
  713. scrollX: -scrollLeft, // 解决水平偏移问题,防止打印的内容不全
  714. scrollY: -scrollTop,
  715. })
  716. .then((canvas) => {
  717. const url = canvas.toDataURL("image/png");
  718. printJS({
  719. printable: url,
  720. type: "image",
  721. documentTitle: "", // 标题
  722. style: "@page{size:auto;margin: 0cm 1cm 0cm 1cm;}", // 去除页眉页脚
  723. });
  724. })
  725. .catch((err) => {
  726. console.error(err);
  727. });
  728. },
  729. //获取仓库名称
  730. warehouseName(val) {
  731. let name = ''
  732. this.warehouseList.map(el => {
  733. if (el.id == val) {
  734. return name = el.name
  735. }
  736. })
  737. return name
  738. },
  739. /** dialog打开后重置form表单校验结果 */
  740. handleDialogOpen() {
  741. setTimeout(() => {
  742. this.$refs["supplierForm"].clearValidate();
  743. });
  744. this.customer.supplierForm = {};
  745. },
  746. submitSupplierForm() {
  747. this.$refs["supplierForm"].validate((valid) => {
  748. if (valid) {
  749. const { id } = this.customer.supplierForm;
  750. const params = this.MixinClone(this.customer.supplierForm);
  751. API_BasicSetting.addCustomer(params).then(() => {
  752. this.customer.dialogVisible = false;
  753. this.$message.success("添加成功!");
  754. this.GET_CustomerList();
  755. });
  756. } else {
  757. this.$message.error("表单填写有误,请核对!");
  758. return false;
  759. }
  760. });
  761. },
  762. // 添加客户
  763. addCust() {
  764. this.customer.dialogVisible = true;
  765. },
  766. handleChange(value) {
  767. this.OrderForm.province_city_area = value.join(",");
  768. //打印区域码所对应的属性值即中文地址
  769. },
  770. /** 初始化 */
  771. init() {
  772. const { id } = this.$route.params;
  773. if (id) {
  774. this.id = id;
  775. this.GET_OrderDetail();
  776. } else {
  777. this.OrderForm = this.MixinClone(initOrderForm);
  778. this.$set(this.OrderForm, "order_time", new Date().getTime());
  779. this.$nextTick(() => {
  780. this.$refs.orderFormRef.clearValidate();
  781. });
  782. }
  783. this.isDetail = this.$route.name === "orderDetail";
  784. },
  785. /** 清除已选商品明细 */
  786. cleanGoodsList() {
  787. // 切换仓库需要清除已选对应仓库下的商品数据
  788. this.$set(this.OrderForm, "product_list", []);
  789. },
  790. //获取客户列表
  791. GET_CustomerList() {
  792. API_BasicSetting.customer(this.params)
  793. .then((response) => {
  794. this.customerList = response.data;
  795. })
  796. .catch(() => { });
  797. API_Setting.getPage({ dictType: "order_type" }).then((res) => {
  798. this.orderTypeList = res.data;
  799. });
  800. API_Setting.getPage({ dictType: "order_send_type" }).then((res) => {
  801. this.deliveryTypeList = res.data;
  802. });
  803. },
  804. /** 获取会员列表 */
  805. GET_MemberList() {
  806. API_Member.getMemberList({
  807. page_no: 1,
  808. page_size: -1,
  809. disable_flag: false,
  810. }).then((response) => {
  811. this.memberList = response.data;
  812. });
  813. },
  814. /** 获取销售经理列表 */
  815. GET_MarketingList() {
  816. API_BasicSetting.getUserByDept().then((res) => {
  817. this.marketingList = res;
  818. });
  819. },
  820. /** 获取自提门店列表 */
  821. GET_StoreList() {
  822. API_BasicSetting.getBranches({
  823. page_no: 1,
  824. page_size: -1,
  825. }).then((response) => {
  826. this.storeList = response.data;
  827. });
  828. },
  829. /** 获取支付方式列表 */
  830. GET_CollectingAccountList() {
  831. API_CollectingAccount.getList({
  832. page_no: 1,
  833. page_size: -1,
  834. enable_flag: true,
  835. }).then((response) => {
  836. this.collectingAccountList = response.data;
  837. });
  838. },
  839. roBack() {
  840. const { callback } = this.$route.params;
  841. if (typeof callback === "function") callback();
  842. this.$store.dispatch("delCurrentViews", {
  843. view: this.$route,
  844. $router: this.$router,
  845. });
  846. this.$router.push({ name: "order" });
  847. },
  848. // 选择批次商品
  849. async handleSelectGoods() {
  850. if (!this.OrderForm.type) {
  851. this.$message.error("请选择订单类型!");
  852. return
  853. }
  854. if (this.OrderForm.warehouse_id.length == 0) {
  855. this.$message.error("请选择仓库!");
  856. return;
  857. }
  858. let warehouse_ids = this.OrderForm.warehouse_id.join(',')
  859. const goodsData = await this.$EnPickerGoods({
  860. goodsApi: `/admin/erp/warehouseOut/getGoodByWarehouse/warehouseIdAndOrderType/${this.OrderForm.type}/${warehouse_ids}`,
  861. selectedIds: this.OrderForm.product_list.map((item) => item.product_id),
  862. });
  863. goodsData.map(el => {
  864. el.end_time = ''
  865. })
  866. this.OrderForm.product_list = goodsData;
  867. },
  868. /** 分页大小发生改变 */
  869. handlePageSizeChange(size) {
  870. this.params.size = size;
  871. API_productClass.getProductList(this.params).then(res => {
  872. this.goodsData = res
  873. this.goodsVisible = true
  874. })
  875. },
  876. /** 分页页数发生改变 */
  877. handlePageCurrentChange(page) {
  878. this.params.page = page;
  879. API_productClass.getProductList(this.params).then(res => {
  880. this.goodsData = res
  881. this.goodsVisible = true
  882. })
  883. },
  884. /* 选择分组商品 */
  885. handleSelectGrou() {
  886. if (!this.OrderForm.type) {
  887. this.$message.error("请选择订单类型!");
  888. return
  889. }
  890. if (this.OrderForm.warehouse_id.length == 0) {
  891. this.$message.error("请选择仓库!");
  892. return;
  893. }
  894. this.params.order_choose_type = this.OrderForm.type
  895. API_productClass.getProductList(this.params).then(res => {
  896. this.goodsData = res
  897. this.goodsVisible = true
  898. })
  899. },
  900. /** 添加支付方式 */
  901. handleInsertPayment() {
  902. const defaultCollectingAccount = this.collectingAccountList.findLast(
  903. (item) => item.default_flag === true
  904. );
  905. },
  906. /** table单选框事件 */
  907. handleSelectionChange(val) {
  908. this.multipleSelection = val;
  909. },
  910. /** 显示数量设置 */
  911. handleShowUpdateNum() {
  912. if (this.multipleSelection.length === 0) {
  913. this.$message.error("请先勾选商品");
  914. return;
  915. }
  916. this.showUpdateNum = true;
  917. this.batchUpdateNum = 1;
  918. this.$nextTick(() => {
  919. this.$refs.batchSetNumRef.focus();
  920. });
  921. },
  922. /** 取消数量设置 */
  923. handleCancelUpdateNum() {
  924. this.showUpdateNum = false;
  925. },
  926. /** 确认设置数量 */
  927. handleConfirmUpdateNum() {
  928. this.showUpdateNum = false;
  929. for (let i = 0; i < this.multipleSelection.length; i++) {
  930. this.multipleSelection[i].num = this.batchUpdateNum;
  931. }
  932. },
  933. /** 显示优惠金额设置 */
  934. handleShowUpdateDiscountPrice() {
  935. if (this.multipleSelection.length === 0) {
  936. this.$message.error("请先勾选商品");
  937. return;
  938. }
  939. this.showDiscountPrice = true;
  940. this.batchDiscountPrice = 0;
  941. this.$nextTick(() => {
  942. this.$refs.batchSetDiscountRef.focus();
  943. });
  944. },
  945. /** 取消优惠金额设置 */
  946. handleCancelUpdateDiscountPrice() {
  947. this.showDiscountPrice = false;
  948. },
  949. /** 确认设置优惠金额 */
  950. handleConfirmUpdateDiscountPrice() {
  951. this.showDiscountPrice = false;
  952. for (let i = 0; i < this.multipleSelection.length; i++) {
  953. const item = this.multipleSelection[i];
  954. if (this.batchDiscountType === 0) {
  955. // 按比例
  956. item.discount_price =
  957. item.total_price * this.batchDiscountPrice * 0.01;
  958. } else {
  959. // 按金额
  960. item.discount_price = this.batchDiscountPrice;
  961. }
  962. }
  963. },
  964. /** 显示税率设置 */
  965. handleShowUpdateTaxRate() {
  966. if (this.multipleSelection.length === 0) {
  967. this.$message.error("请先勾选商品");
  968. return;
  969. }
  970. this.showTaxRate = true;
  971. this.batchTaxRate = 0;
  972. this.$nextTick(() => {
  973. this.$refs.batchSetTaxRateRef.focus();
  974. });
  975. },
  976. /** 取消税率设置 */
  977. handleCancelUpdateTaxRate() {
  978. this.showTaxRate = false;
  979. },
  980. /** 确认设置税率 */
  981. handleConfirmUpdateTaxRate() {
  982. this.showTaxRate = false;
  983. if (this.batchTaxRate != null) {
  984. for (let i = 0; i < this.multipleSelection.length; i++) {
  985. this.multipleSelection[i].tax_rate = this.batchTaxRate;
  986. }
  987. }
  988. },
  989. //保存订单
  990. async submitOrderForm() {
  991. // 校验商品明细数据
  992. const valid = await this.$refs.orderFormRef
  993. .validate()
  994. .catch((err) => err);
  995. if (valid !== true) {
  996. this.$message.error("表单数据输入有误,请检查!");
  997. return;
  998. }
  999. const { id } = this.OrderForm;
  1000. var loc = "";
  1001. for (let i = 0; i < this.selectedOptions.length; i++) {
  1002. loc += codeToText[this.selectedOptions[i]] + ",";
  1003. }
  1004. this.OrderForm.province_city_area_address = loc + this.OrderForm.address;
  1005. const params = this.MixinClone(this.OrderForm);
  1006. params.pay_price = this.price;
  1007. params.real_price = Number(params.real_price);
  1008. params.item_list = params.product_list;
  1009. params.order_time = Math.floor(params.order_time / 1000);
  1010. params.payment_time = Math.floor(params.payment_time / 1000);
  1011. this.formLoading = true;
  1012. if (id) {
  1013. API_Order.editOrder(id, params)
  1014. .then((response) => {
  1015. this.$message.success("修改成功!");
  1016. this.backOrderList();
  1017. })
  1018. .finally(() => {
  1019. this.formLoading = false;
  1020. });
  1021. } else {
  1022. params.product_list = params.product_list.map((el) => {
  1023. el.product_stock_id = el.id;
  1024. el.id = "";
  1025. return el;
  1026. });
  1027. API_Order.addOrder(params)
  1028. .then(() => {
  1029. this.$message.success("添加成功!");
  1030. this.backOrderList();
  1031. })
  1032. .finally(() => {
  1033. this.formLoading = false;
  1034. });
  1035. }
  1036. },
  1037. //确认并保存订单
  1038. async saveSubmitOrderForm() {
  1039. // 校验商品明细数据
  1040. const valid = await this.$refs.orderFormRef
  1041. .validate()
  1042. .catch((err) => err);
  1043. if (valid !== true) {
  1044. this.$message.error("表单数据输入有误,请检查!");
  1045. return;
  1046. }
  1047. const { id } = this.OrderForm;
  1048. var loc = "";
  1049. for (let i = 0; i < this.selectedOptions.length; i++) {
  1050. loc += codeToText[this.selectedOptions[i]] + ",";
  1051. }
  1052. this.OrderForm.province_city_area_address = loc + this.OrderForm.address;
  1053. const params = this.MixinClone(this.OrderForm);
  1054. params.pay_price = this.price;
  1055. params.real_price = Number(params.real_price);
  1056. params.item_list = params.product_list;
  1057. /* params.product_list.map((el) => {
  1058. el.goods_id = el.id;
  1059. el.id = "";
  1060. });*/
  1061. params.order_time = Math.floor(params.order_time / 1000);
  1062. params.payment_time = Math.floor(params.payment_time / 1000);
  1063. this.formLoading = true;
  1064. if (id) {
  1065. API_Order.editOrder(id, params)
  1066. .then((response) => {
  1067. this.$message.success("修改成功!");
  1068. API_Order.submit(id).then((res) => {
  1069. this.$message.success("订单已确认");
  1070. this.backOrderList();
  1071. });
  1072. })
  1073. .finally(() => {
  1074. this.formLoading = false;
  1075. });
  1076. } else {
  1077. params.product_list = params.product_list.map((el) => {
  1078. el.product_stock_id = el.id;
  1079. el.id = "";
  1080. return el;
  1081. });
  1082. API_Order.addOrder(params)
  1083. .then((res) => {
  1084. this.$message.success("添加成功!");
  1085. /**/ API_Order.submit(res).then((res) => {
  1086. this.$message.success("订单已确认");
  1087. this.backOrderList();
  1088. });
  1089. })
  1090. .finally(() => {
  1091. this.formLoading = false;
  1092. });
  1093. }
  1094. },
  1095. //延期确定
  1096. async submit() {
  1097. // 校验商品明细数据
  1098. const valid = await this.$refs.orderFormRef
  1099. .validate()
  1100. .catch((err) => err);
  1101. if (valid !== true) {
  1102. this.$message.error("表单数据输入有误,请检查!");
  1103. return;
  1104. }
  1105. const { id } = this.OrderForm;
  1106. const params = this.MixinClone(this.OrderForm);
  1107. params.item_list = params.product_list;
  1108. this.formLoading = true;
  1109. API_Order.extension(id, params)
  1110. .then((response) => {
  1111. this.$message.success("调整成功!");
  1112. this.backOrderList();
  1113. })
  1114. .finally(() => {
  1115. this.formLoading = false;
  1116. });
  1117. },
  1118. /** 获取仓库 */
  1119. GET_WarehouseList() {
  1120. API_BasicSetting.getWarehouseListAll({}).then((response) => {
  1121. this.warehouseList = response;
  1122. });
  1123. API_Setting.getPage({ dictType: "customer_type" }).then((res) => {
  1124. this.customer.options = res.data;
  1125. });
  1126. },
  1127. /** 审核 */
  1128. async handleAudit(isPass, remark) {
  1129. // 二次确认
  1130. const text = isPass ? "审核通过" : "审核驳回";
  1131. await this.$confirm(`确认要${text}吗?`, "提示");
  1132. await API_Order.audit(
  1133. this.id,
  1134. isPass ? "WAIT_WAREHOUSE_OUT" : "AUDIT_REJECT",
  1135. remark
  1136. );
  1137. this.$message.success("审核成功!");
  1138. this.backOrderList();
  1139. },
  1140. /** 返回订单列表 */
  1141. backOrderList() {
  1142. const { callback } = this.$route.params;
  1143. if (typeof callback === "function") callback();
  1144. this.$store.dispatch("delCurrentViews", {
  1145. view: this.$route,
  1146. $router: this.$router,
  1147. });
  1148. this.$router.push({ name: "order" });
  1149. },
  1150. /** 获取订单详情 */
  1151. GET_OrderDetail() {
  1152. API_Order.getOrderDetail(this.id).then((response) => {
  1153. /**/ this.price = response.pay_price;
  1154. this.barcodeValue = response.sn
  1155. response.product_list = response.item_list.map(el => {
  1156. el.good_vo = el.goods_vo
  1157. return el
  1158. });
  1159. this.selectedOptions = response.province_city_area.split(",");
  1160. this.OrderForm = response;
  1161. if (response.type == "TO_C") {
  1162. this.time.push(response.start_time);
  1163. this.time.push(response.end_time);
  1164. }
  1165. this.creatQrCode()
  1166. });
  1167. },
  1168. },
  1169. computed: {
  1170. price: {
  1171. get() {
  1172. let total = 0;
  1173. if (!this.OrderForm.product_list) return
  1174. if (!this.id) {
  1175. if (this.OrderForm.type == "TO_C") {
  1176. /* var start = new Date(this.OrderForm.start_time); // 将起始日期字符串转换为Date对象
  1177. this.OrderForm.product_list.map((item) => {
  1178. var end = new Date(item.end_time); // 将结束日期字符串转换为Date对象
  1179. var timeDiff = Math.abs(end.getTime() - start.getTime()); // 获取时间差(单位:毫秒)
  1180. var monthDiff = Math.ceil(timeDiff / (24 * 60 * 60 * 1000)); // 根据每个月平均天数进行近似计算
  1181. total += item.product_vo.day_price * item.num * monthDiff;
  1182. }); */
  1183. var start = new Date(this.time[1]); // 将起始日期字符串转换为Date对象
  1184. var end = new Date(this.time[0]); // 将结束日期字符串转换为Date对象
  1185. var timeDiff = Math.abs(end.getTime() - start.getTime()); // 获取时间差(单位:毫秒)
  1186. var monthDiff = Math.ceil(timeDiff / (24 * 60 * 60 * 1000)); // 根据每个月平均天数进行近似计算
  1187. this.OrderForm.product_list.map((item) => {
  1188. total += item.product_vo.day_price * item.num * item.day_num;
  1189. });
  1190. return total;
  1191. } else {
  1192. this.OrderForm.product_list.map((item) => {
  1193. total += item.product_vo.price * item.num;
  1194. });
  1195. return total;
  1196. }
  1197. } else {
  1198. if (this.OrderForm.type == "TO_C") {
  1199. var start = new Date(this.time[1]); // 将起始日期字符串转换为Date对象
  1200. var end = new Date(this.time[0]); // 将结束日期字符串转换为Date对象
  1201. var timeDiff = Math.abs(end.getTime() - start.getTime()); // 获取时间差(单位:毫秒)
  1202. var monthDiff = Math.ceil(timeDiff / (24 * 60 * 60 * 1000)); // 根据每个月平均天数进行近似计算
  1203. this.OrderForm.product_list.map((item) => {
  1204. total += item.product_vo.day_price * item.num * item.day_num;
  1205. });
  1206. return total;
  1207. } else {
  1208. this.OrderForm.product_list.map((item) => {
  1209. total += item.product_vo.price * item.num;
  1210. });
  1211. return total;
  1212. }
  1213. }
  1214. },
  1215. set(newValue) {
  1216. this.OrderForm.real_price = newValue;
  1217. }
  1218. },
  1219. },
  1220. watch: {
  1221. discount: {
  1222. deep: true,
  1223. handler(newVal) {
  1224. this.OrderForm.real_price = this.price * newVal / 10;
  1225. },
  1226. },
  1227. "OrderForm.product_list": {
  1228. deep: true,
  1229. handler(newVal) {
  1230. newVal.forEach((item) => {
  1231. });
  1232. },
  1233. },
  1234. $route: {
  1235. immediate: true,
  1236. handler(newVal) {
  1237. if (
  1238. newVal.name === "orderAdd" ||
  1239. newVal.name === "orderEdit" ||
  1240. newVal.name === "orderDetail"
  1241. ) {
  1242. this.init();
  1243. }
  1244. },
  1245. },
  1246. "OrderForm.payment_status": {
  1247. handler(newVal) {
  1248. if (newVal === "PAY" && !this.OrderForm.payment_time) {
  1249. this.OrderForm.payment_time = new Date().getTime();
  1250. }
  1251. },
  1252. },
  1253. },
  1254. };
  1255. </script>
  1256. <style type="text/scss" lang="scss" scoped>
  1257. /** 底部步骤 */
  1258. .footer {
  1259. width: 95%;
  1260. padding: 10px;
  1261. bottom: 0px;
  1262. text-align: center;
  1263. z-index: 999;
  1264. }
  1265. .mx {
  1266. display: flex;
  1267. align-items: center;
  1268. .button {
  1269. margin-left: 10px;
  1270. }
  1271. }
  1272. .bg-in-stock {
  1273. background-color: #fff;
  1274. margin: 10px;
  1275. padding: 25px;
  1276. .numOrder {
  1277. display: flex;
  1278. justify-content: center;
  1279. }
  1280. }
  1281. /deep/ {
  1282. .el-input--suffix .el-input__inner {
  1283. padding-right: 10px;
  1284. }
  1285. .error-input {
  1286. .el-input__inner {
  1287. border: 1px solid red;
  1288. }
  1289. }
  1290. }
  1291. /deep/ .el-form-item {
  1292. // width: 350px;
  1293. }
  1294. /** 表格中输入框样式 */
  1295. .tableFormItem {
  1296. width: 100%;
  1297. margin-bottom: 0;
  1298. }
  1299. /** 输入框错误提示样式 */
  1300. /deep/ .el-form-item__error {
  1301. // position: relative;
  1302. }
  1303. /** date-picker宽度和其他输入框保持一致 */
  1304. /deep/ .el-date-editor {
  1305. .el-input__inner {
  1306. padding-inline-start: 15px;
  1307. }
  1308. .el-input__prefix {
  1309. display: none;
  1310. }
  1311. }
  1312. .redClass /deep/ .el-form-item__content {
  1313. //color: red !important;
  1314. font-weight: 700;
  1315. width: 500px !important;
  1316. }
  1317. /deep/ .el-form-item {
  1318. width: 100%;
  1319. height: auto;
  1320. .el-input {
  1321. width: 200px;
  1322. }
  1323. }
  1324. </style>