allList.vue 28 KB

123456789101112131415161718192021222324252627282930313233343536373839404142434445464748495051525354555657585960616263646566676869707172737475767778798081828384858687888990919293949596979899100101102103104105106107108109110111112113114115116117118119120121122123124125126127128129130131132133134135136137138139140141142143144145146147148149150151152153154155156157158159160161162163164165166167168169170171172173174175176177178179180181182183184185186187188189190191192193194195196197198199200201202203204205206207208209210211212213214215216217218219220221222223224225226227228229230231232233234235236237238239240241242243244245246247248249250251252253254255256257258259260261262263264265266267268269270271272273274275276277278279280281282283284285286287288289290291292293294295296297298299300301302303304305306307308309310311312313314315316317318319320321322323324325326327328329330331332333334335336337338339340341342343344345346347348349350351352353354355356357358359360361362363364365366367368369370371372373374375376377378379380381382383384385386387388389390391392393394395396397398399400401402403404405406407408409410411412413414415416417418419420421422423424425426427428429430431432433434435436437438439440441442443444445446447448449450451452453454455456457458459460461462463464465466467468469470471472473474475476477478479480481482483484485486487488489490491492493494495496497498499500501502503504505506507508509510511512513514515516517518519520521522523524525526527528529530531532533534535536537538539540541542543544545546547548549550551552553554555556557558559560561562563564565566567568569570571572573574575576577578579580581582583584585586587588589590591592593594595596597598599600601602603604605606607608609610611612613614615616617618619620621622623624625626627628629630631632633634635636637638639640641642643644645646647648649650651652653654655656657658659660661662663664665666667668669670671672673674675676677678679680681682683684685686687688689690691692693694695696697698699700701702703704705706707708709710711712713714715716717718719720721722723724725726727728729730731732733734735736737738739740741742743744745746747748749750751752753754755756757758759760761762763764765766767768769770771772773774775776777778779780781782783784785786787788789790791792793794795796797798799800801802803804805806807808809810811812813814815816817818819820821822823824825826827828829830831832833834835836
  1. <template>
  2. <div class="app-container">
  3. <!--用户数据-->
  4. <el-form :model="queryParams" ref="queryForm" :inline="true" v-show="showSearch" label-width="68px">
  5. <el-form-item label="公司名" prop="companyId">
  6. <el-select filterable v-model="queryParams.companyId" placeholder="请选择公司名" @change="companyChange" clearable size="small">
  7. <el-option
  8. v-for="item in companys"
  9. :key="item.companyId"
  10. :label="item.companyName"
  11. :value="item.companyId"
  12. />
  13. </el-select>
  14. </el-form-item>
  15. <el-form-item label="所属部门" prop="deptId">
  16. <treeselect style="width:220px" v-model="queryParams.deptId" :options="deptOptions" :show-count="true" placeholder="请选择所属部门" />
  17. </el-form-item>
  18. <el-form-item label="订单号" prop="orderCode">
  19. <el-input
  20. style="width:220px"
  21. v-model="queryParams.orderCode"
  22. placeholder="请输入订单号"
  23. clearable
  24. size="small"
  25. @keyup.enter.native="handleQuery"
  26. />
  27. </el-form-item>
  28. <el-form-item label="运单号" prop="deliveryId">
  29. <el-input
  30. style="width:220px"
  31. v-model="queryParams.deliveryId"
  32. placeholder="请输入运单号"
  33. clearable
  34. size="small"
  35. @keyup.enter.native="handleQuery"
  36. />
  37. </el-form-item>
  38. <el-form-item label="收件人" prop="realName">
  39. <el-input
  40. style="width:220px"
  41. v-model="queryParams.realName"
  42. placeholder="请输入收件人"
  43. clearable
  44. size="small"
  45. @keyup.enter.native="handleQuery"
  46. />
  47. </el-form-item>
  48. <el-form-item label="产品" prop="productName">
  49. <el-input
  50. v-model="queryParams.productName"
  51. placeholder="请输入产品名"
  52. clearable
  53. size="small"
  54. @keyup.enter.native="handleQuery"
  55. />
  56. </el-form-item>
  57. <el-form-item label="支付方式" prop="payType">
  58. <el-select style="width: 200px" v-model="queryParams.payType" placeholder="请选择支付方式" clearable size="small" >
  59. <el-option
  60. v-for="item in payTypeOptions"
  61. :key="item.dictValue"
  62. :label="item.dictLabel"
  63. :value="item.dictValue"
  64. />
  65. </el-select>
  66. </el-form-item>
  67. <el-form-item label="上传凭证" prop="isUpload">
  68. <el-select v-model="queryParams.isUpload" placeholder="请选择" clearable size="small" >
  69. <el-option key="0" label="未上传" value="0" />
  70. <el-option key="1" label="已上传" value="1" />
  71. </el-select>
  72. </el-form-item>
  73. <el-form-item label="手机号" prop="userPhone">
  74. <el-input
  75. style="width:220px"
  76. v-model="queryParams.userPhone"
  77. placeholder="请输入收件人手机号"
  78. clearable
  79. size="small"
  80. @keyup.enter.native="handleQuery"
  81. />
  82. </el-form-item>
  83. <el-form-item label="员工姓名" prop="companyUserNickName">
  84. <el-input
  85. style="width:220px"
  86. v-model="queryParams.companyUserNickName"
  87. placeholder="请输入员工姓名"
  88. clearable
  89. size="small"
  90. @keyup.enter.native="handleQuery"
  91. />
  92. </el-form-item>
  93. <el-form-item label="订单类型" prop="orderType">
  94. <el-select style="width:220px" v-model="queryParams.orderType" placeholder="请选择订单类型" clearable size="small" >
  95. <el-option
  96. v-for="item in orderTypeOptions"
  97. :key="item.dictValue"
  98. :label="item.dictLabel"
  99. :value="item.dictValue"
  100. />
  101. </el-select>
  102. </el-form-item>
  103. <!-- <el-form-item label="物流状态" prop="deliveryStatus">-->
  104. <!-- <el-select style="width:220px" v-model="queryParams.deliveryStatus" placeholder="请选择物流状态" clearable size="small" >-->
  105. <!-- <el-option-->
  106. <!-- v-for="item in deliveryStatusOptions"-->
  107. <!-- :key="item.dictValue"-->
  108. <!-- :label="item.dictLabel"-->
  109. <!-- :value="item.dictValue"-->
  110. <!-- />-->
  111. <!-- </el-select>-->
  112. <!-- </el-form-item>-->
  113. <el-form-item label="结算状态" prop="deliveryPayStatus">
  114. <el-select style="width:220px" v-model="queryParams.deliveryPayStatus" placeholder="请选择物流结算状态" clearable size="small" >
  115. <el-option
  116. v-for="item in deliveryPayStatusOptions"
  117. :key="item.dictValue"
  118. :label="item.dictLabel"
  119. :value="item.dictValue"
  120. />
  121. </el-select>
  122. </el-form-item>
  123. <el-form-item label="下单时间" prop="createTimeRange">
  124. <el-date-picker
  125. style="width:220px"
  126. clearable size="small"
  127. v-model="createTimeRange"
  128. type="daterange"
  129. value-format="yyyy-MM-dd"
  130. start-placeholder="开始日期"
  131. end-placeholder="结束日期">
  132. </el-date-picker>
  133. </el-form-item>
  134. <el-form-item label="支付时间" prop="payTimeRange">
  135. <el-date-picker
  136. style="width:220px"
  137. clearable size="small"
  138. v-model="payTimeRange"
  139. type="daterange"
  140. value-format="yyyy-MM-dd"
  141. start-placeholder="开始日期"
  142. end-placeholder="结束日期">
  143. </el-date-picker>
  144. </el-form-item>
  145. <el-form-item label="回单时间" prop="deliveryImportTimeRange">
  146. <el-date-picker
  147. style="width:220px"
  148. clearable size="small"
  149. v-model="deliveryImportTimeRange"
  150. type="daterange"
  151. value-format="yyyy-MM-dd"
  152. start-placeholder="开始日期"
  153. end-placeholder="结束日期">
  154. </el-date-picker>
  155. </el-form-item>
  156. <el-form-item label="档期归属" prop="scheduleId" >
  157. <el-select filterable style="width: 200px" v-model="queryParams.scheduleId" placeholder="请选择档期" clearable size="small" >
  158. <el-option
  159. v-for="item in scheduleOptions"
  160. :key="item.id"
  161. :label="item.name"
  162. :value="item.id"
  163. />
  164. </el-select>
  165. </el-form-item>
  166. <el-form-item label="跟随阶段" prop="orderVisit" >
  167. <el-select filterable style="width: 200px" v-model="queryParams.orderVisit" placeholder="请选择跟随阶段" clearable size="small" >
  168. <el-option
  169. v-for="item in customerUserStatusOptions"
  170. :key="item.dictValue"
  171. :label="item.dictLabel"
  172. :value="item.dictValue"
  173. />
  174. </el-select>
  175. </el-form-item>
  176. <el-form-item>
  177. <el-button type="cyan" icon="el-icon-search" size="mini" @click="handleQuery">搜索</el-button>
  178. <el-button icon="el-icon-refresh" size="mini" @click="resetQuery">重置</el-button>
  179. </el-form-item>
  180. </el-form>
  181. <el-row :gutter="10" class="mb8">
  182. <right-toolbar :showSearch.sync="showSearch" @queryTable="getList"></right-toolbar>
  183. </el-row>
  184. <el-tabs type="card" v-model="activeName" @tab-click="handleClick">
  185. <el-tab-pane label="全部订单" name="00"></el-tab-pane>
  186. <el-tab-pane label="待支付" name="0"></el-tab-pane>
  187. <el-tab-pane label="待发货" name="1"></el-tab-pane>
  188. <el-tab-pane label="待收货" name="2"></el-tab-pane>
  189. <el-tab-pane label="交易完成" name="3"></el-tab-pane>
  190. <el-tab-pane label="退款中" name="-1"></el-tab-pane>
  191. <el-tab-pane label="已退款" name="-2"></el-tab-pane>
  192. <el-tab-pane label="已取消" name="-3"></el-tab-pane>
  193. </el-tabs>
  194. <el-table height="500" border v-loading="loading" :data="storeOrderList" @selection-change="handleSelectionChange">
  195. <el-table-column type="selection" width="55" align="center" />
  196. <el-table-column label="订单号" align="center" prop="orderCode" />
  197. <el-table-column label="所属公司" align="center" prop="companyName" />
  198. <el-table-column label="所属员工" align="center" prop="companyUserNickName" />
  199. <el-table-column label="用户昵称" align="center" prop="nickname" width="150px" >
  200. <template slot-scope="scope">
  201. <span>{{scope.row.nickname}}</span>
  202. </template>
  203. </el-table-column>
  204. <el-table-column label="收件人" align="center" prop="realName" width="150px" >
  205. <template slot-scope="scope">
  206. <span>{{scope.row.realName}} </span>
  207. </template>
  208. </el-table-column>
  209. <el-table-column label="跟随阶段" align="center" prop="orderVisit" >
  210. <template slot-scope="scope">
  211. <el-tag prop="orderVisit" v-for="(item, index) in customerUserStatusOptions" v-if="scope.row.orderVisit==item.dictValue">{{item.dictLabel}}</el-tag>
  212. </template>
  213. </el-table-column>
  214. <el-table-column label="订单金额" align="center" prop="totalPrice" >
  215. <template slot-scope="scope">
  216. <span v-if="scope.row.totalPrice!=null">{{scope.row.totalPrice.toFixed(2)}}</span>
  217. </template>
  218. </el-table-column>
  219. <el-table-column label="应付金额" align="center" prop="payPrice" >
  220. <template slot-scope="scope">
  221. <span v-if="scope.row.payPrice!=null">{{scope.row.payPrice.toFixed(2)}}</span>
  222. </template>
  223. </el-table-column>
  224. <el-table-column label="下单时间" align="center" prop="createTime" />
  225. <!-- <el-table-column label="支付状态" align="center" prop="paid" /> -->
  226. <el-table-column label="支付时间" align="center" prop="payTime" width="180">
  227. </el-table-column>
  228. <el-table-column label="支付方式" align="center" prop="payType" >
  229. <template slot-scope="scope">
  230. <span prop="payType" v-for="(item, index) in payTypeOptions" v-if="scope.row.payType==item.dictValue">{{item.dictLabel}}</span>
  231. </template>
  232. </el-table-column>
  233. <el-table-column label="订单类型" align="center" prop="orderType" >
  234. <template slot-scope="scope">
  235. <el-tag prop="status" v-for="(item, index) in orderTypeOptions" v-if="scope.row.orderType==item.dictValue">{{item.dictLabel}}</el-tag>
  236. </template>
  237. </el-table-column>
  238. <el-table-column label="状态" align="center" prop="status" >
  239. <template slot-scope="scope">
  240. <el-tag prop="status" v-for="(item, index) in statusOptions" v-if="scope.row.status==item.dictValue">{{item.dictLabel}}</el-tag>
  241. </template>
  242. </el-table-column>
  243. <!-- <el-table-column label="物流状态" align="center" prop="deliveryStatus" >-->
  244. <!-- <template slot-scope="scope">-->
  245. <!-- <el-tag prop="status" v-for="(item, index) in deliveryStatusOptions" v-if="scope.row.deliveryStatus==item.dictValue">{{item.dictLabel}}</el-tag>-->
  246. <!-- </template>-->
  247. <!-- </el-table-column>-->
  248. <!-- <el-table-column label="物流结算状态" align="center" prop="deliveryPayStatus" >-->
  249. <!-- <template slot-scope="scope">-->
  250. <!-- <el-tag prop="status" v-for="(item, index) in deliveryPayStatusOptions" v-if="scope.row.deliveryPayStatus==item.dictValue">{{item.dictLabel}}</el-tag>-->
  251. <!-- </template>-->
  252. <!-- </el-table-column>-->
  253. <el-table-column label="操作" fixed="right" width="100px" align="center" class-name="small-padding fixed-width">
  254. <template slot-scope="scope">
  255. <el-button
  256. size="mini"
  257. type="text"
  258. @click="handleDetails(scope.row)"
  259. v-hasPermi="['store:storeOrder:query']"
  260. >查看</el-button>
  261. <!-- <el-button
  262. size="mini"
  263. type="text"
  264. @click="handleGenPayUrl(scope.row)"
  265. v-hasPermi="['store:storeOrder:genPayUrl']"
  266. >生成付款链接</el-button> -->
  267. </template>
  268. </el-table-column>
  269. </el-table>
  270. <pagination
  271. v-show="total>0"
  272. :total="total"
  273. :page.sync="queryParams.pageNum"
  274. :limit.sync="queryParams.pageSize"
  275. @pagination="getList"
  276. />
  277. <el-drawer
  278. size="75%"
  279. :title="show.title" :visible.sync="show.open"
  280. >
  281. <product-order ref="order" />
  282. </el-drawer>
  283. </div>
  284. </template>
  285. <script>
  286. import {exportStoreOrderItems, createUserOrder,listAllStoreOrder, getStoreOrder, delStoreOrder, addStoreOrder, updateStoreOrder, exportStoreOrder } from "@/api/store/storeOrder";
  287. import { getUserList } from "@/api/users/user";
  288. import { getAddressList } from "@/api/users/userAddress";
  289. import { getTcmScheduleList } from "@/api/company/tcmScheduleReport";
  290. import productOrder from "../components/productOrder";
  291. import productSelect from "../components/productSelect";
  292. import addUser from "../components/addUser";
  293. import addUserAddress from "../components/addUserAddress";
  294. import config from "@/utils/config";
  295. import QRCode from 'qrcodejs2'
  296. import { treeselect } from "@/api/company/companyDept";
  297. import Treeselect from "@riophae/vue-treeselect";
  298. import { getCompanyList } from "@/api/company/company";
  299. import "@riophae/vue-treeselect/dist/vue-treeselect.css";
  300. export default {
  301. components: { Treeselect,productOrder,productSelect,addUser,addUserAddress },
  302. name: "StoreOrder",
  303. data() {
  304. return {
  305. customerUserStatusOptions:[],
  306. // 部门树选项
  307. companys:[],
  308. deptOptions:[],
  309. companyId:undefined,
  310. deptId:undefined,
  311. // 是否显示弹出层
  312. open: false,
  313. // 部门名称
  314. deptName: undefined,
  315. defaultProps: {
  316. children: "children",
  317. label: "label",
  318. },
  319. deliveryPayStatusOptions:[],
  320. deliveryStatusOptions:[],
  321. dateRange: [],
  322. orderTypeOptions:[],
  323. payTypeOptions:[],
  324. payQr:{
  325. open:false,
  326. title:"付款二维码"
  327. },
  328. user:{
  329. open:false,
  330. title:"创建会员"
  331. },
  332. userAddress:{
  333. open:false,
  334. title:"创建收货地址"
  335. },
  336. tablekey:false,
  337. totalMoney:0.00,
  338. products:[],
  339. product:{
  340. open:false,
  341. title:"商品选择"
  342. },
  343. userStatusOptions:[],
  344. phone:null,
  345. address:[],
  346. addressloading: false,
  347. userloading: false,
  348. users:[],
  349. userStatusOptions:[],
  350. show:{
  351. open:false,
  352. title:"订单详情"
  353. },
  354. activeName:"00",
  355. statusOptions:[],
  356. // 遮罩层
  357. loading: true,
  358. // 选中数组
  359. ids: [],
  360. // 非单个禁用
  361. single: true,
  362. // 非多个禁用
  363. multiple: true,
  364. // 显示搜索条件
  365. showSearch: true,
  366. // 总条数
  367. total: 0,
  368. // 订单表格数据
  369. storeOrderList: [],
  370. // 弹出层标题
  371. title: "",
  372. // 是否显示弹出层
  373. open: false,
  374. createTimeRange:[],
  375. payTimeRange:[],
  376. deliveryImportTimeRange:[],
  377. scheduleOptions:[],
  378. // 查询参数
  379. queryParams: {
  380. pageNum: 1,
  381. pageSize: 10,
  382. orderCode: null,
  383. extendOrderId: null,
  384. userId: null,
  385. realName: null,
  386. userPhone: null,
  387. userAddress: null,
  388. cartId: null,
  389. freightPrice: null,
  390. totalNum: null,
  391. totalPrice: null,
  392. totalPostage: null,
  393. payPrice: null,
  394. payPostage: null,
  395. deductionPrice: null,
  396. couponId: null,
  397. couponPrice: null,
  398. paid: null,
  399. payTime: null,
  400. payType: null,
  401. status: null,
  402. refundStatus: null,
  403. refundReasonWapImg: null,
  404. refundReasonWapExplain: null,
  405. refundReasonTime: null,
  406. refundReasonWap: null,
  407. refundReason: null,
  408. refundPrice: null,
  409. deliverySn: null,
  410. deliveryName: null,
  411. deliveryType: null,
  412. deliveryId: null,
  413. gainIntegral: null,
  414. useIntegral: null,
  415. payIntegral: null,
  416. backIntegral: null,
  417. mark: null,
  418. isDel: null,
  419. cost: null,
  420. verifyCode: null,
  421. storeId: null,
  422. shippingType: null,
  423. isChannel: null,
  424. isRemind: null,
  425. isSysDel: null
  426. },
  427. // 表单参数
  428. form: {
  429. addressId:null,
  430. userId:null,
  431. products:[],
  432. },
  433. // 表单校验
  434. rules: {
  435. userId: [
  436. { required: true, message: "会员信息不能为空" }
  437. ],
  438. addressId: [
  439. { required: true, message: "收货信息不能为空" }
  440. ],
  441. products: [
  442. { required: true, message: "商品不能为空" }
  443. ],
  444. }
  445. };
  446. },
  447. watch: {
  448. // 根据名称筛选部门树
  449. watch: {
  450. // 监听deptId
  451. 'deptId': 'currDeptChange'
  452. }
  453. },
  454. created() {
  455. getCompanyList().then(response => {
  456. this.companys = response.data;
  457. if(this.companys!=null&&this.companys.length>0){
  458. this.companyId=this.companys[0].companyId;
  459. this.getTreeselect();
  460. }
  461. });
  462. this.getDicts("crm_customer_user_status").then((response) => {
  463. this.customerUserStatusOptions = response.data;
  464. });
  465. this.getDicts("store_order_type").then((response) => {
  466. this.orderTypeOptions = response.data;
  467. });
  468. this.getDicts("store_pay_type").then((response) => {
  469. this.payTypeOptions = response.data;
  470. });
  471. this.getDicts("user_status").then((response) => {
  472. this.userStatusOptions = response.data;
  473. });
  474. this.getDicts("store_order_status").then((response) => {
  475. this.statusOptions = response.data;
  476. console.log(response.data)
  477. });
  478. this.getDicts("store_order_delivery_status").then((response) => {
  479. this.deliveryStatusOptions = response.data;
  480. });
  481. this.getDicts("store_delivery_pay_status").then((response) => {
  482. this.deliveryPayStatusOptions = response.data;
  483. });
  484. getTcmScheduleList().then(response => {
  485. this.scheduleOptions = response.data;
  486. });
  487. this.getList();
  488. },
  489. methods: {
  490. /** 查询部门下拉树结构 */
  491. getTreeselect() {
  492. var that=this;
  493. var param={companyId:this.companyId}
  494. treeselect(param).then((response) => {
  495. this.deptOptions = response.data;
  496. console.log(this.deptOptions)
  497. if(response.data!=null&&response.data.length>0){
  498. //this.queryParams.deptId=response.data[0].id;
  499. }
  500. });
  501. },
  502. companyChange(val){
  503. console.log(val);
  504. this.companyId=val;
  505. this.getTreeselect();
  506. },
  507. currDeptChange(val){
  508. console.log(val)
  509. this.queryParams.deptId=val;
  510. this.getList();
  511. },
  512. // 筛选节点
  513. filterNode(value, data) {
  514. if (!value) return true;
  515. return data.label.indexOf(value) !== -1;
  516. },
  517. // 节点单击事件
  518. handleNodeClick(data) {
  519. this.queryParams.deptId = data.id;
  520. this.getList();
  521. },
  522. handleGenPayUrl(row){
  523. this.payQr.open=true;
  524. setTimeout(() => {
  525. var qrcode = new QRCode(this.$refs.qrCodeUrl, {
  526. text: config.payQRUrl+row.id, // 需要转换为二维码的内容
  527. width: 200,
  528. height: 200,
  529. colorDark: '#000000',
  530. colorLight: '#ffffff',
  531. correctLevel: QRCode.CorrectLevel.H
  532. })
  533. }, 200);
  534. },
  535. handleAddUser(){
  536. this.user.open=true;
  537. },
  538. handleAddUserAddress(){
  539. if(this.form.userId==null){
  540. this.msgError("请选择会员");
  541. return;
  542. }
  543. this.userAddress.open=true;
  544. setTimeout(() => {
  545. this.$refs.addUserAddress.init(this.form.userId);
  546. }, 500);
  547. },
  548. addUser(){
  549. this.user.open=false;
  550. },
  551. addUserAddress(){
  552. this.userAddress.open=false;
  553. //获取地址
  554. this.getAddressList(this.form.userId);
  555. },
  556. compute(){
  557. this.totalMoney=0;
  558. var that=this;
  559. this.products.forEach (function (value) {
  560. that.totalMoney += value.money;
  561. });
  562. console.log(that.totalMoney)
  563. },
  564. handleProductCountChange(row){
  565. this.tablekey = !this.tablekey
  566. console.log(row)
  567. row.money=row.count*row.price;
  568. this.$forceUpdate();
  569. this.compute();
  570. },
  571. selectProduct(row){
  572. console.log(row);
  573. for(var i=0;i<this.products.length;i++){
  574. if(this.products[i].id==row.id){
  575. return;
  576. }
  577. }
  578. row.count=1;
  579. row.money=row.count*row.price;
  580. this.products.push(row);
  581. this.compute();
  582. },
  583. handleAddProduct(){
  584. this.product.open=true;
  585. },
  586. searchUser(){
  587. if(this.phone==null||this.phone==""){
  588. return;
  589. }
  590. var data={phone:this.phone}
  591. this.userloading = true;
  592. this.users=[];
  593. this.address=[];
  594. getUserList(data).then(response => {
  595. this.users = response.data;
  596. this.userloading = false;
  597. if(this.users!=null&&this.users.length==1){
  598. this.form.userId=this.users[0].userId;
  599. this.getAddressList(this.form.userId)
  600. }
  601. });
  602. },
  603. getAddressList(userId){
  604. var data={userId:userId}
  605. this.addressloading = true;
  606. this.address=[];
  607. getAddressList(data).then(response => {
  608. this.address = response.data;
  609. this.addressloading = false;
  610. });
  611. },
  612. handleDetails(row){
  613. this.show.open=true;
  614. const orderId = row.id ;
  615. setTimeout(() => {
  616. this.$refs.order.getOrder(orderId);
  617. }, 500);
  618. },
  619. handleClick(tab, event) {
  620. if(tab.name=="all"){
  621. this.queryParams.status==null;
  622. }
  623. else{
  624. this.queryParams.status=tab.name;
  625. }
  626. this.getList();
  627. },
  628. /** 查询订单列表 */
  629. getList() {
  630. if(this.queryParams.status=='00'){
  631. this.queryParams.status=null;
  632. }
  633. if(this.createTimeRange!=null&&this.createTimeRange.length==2){
  634. this.queryParams.createTimeRange=this.createTimeRange[0]+"--"+this.createTimeRange[1]
  635. }
  636. else{
  637. this.queryParams.createTimeRange=null;
  638. }
  639. if(this.payTimeRange!=null&&this.payTimeRange.length==2){
  640. this.queryParams.payTimeRange=this.payTimeRange[0]+"--"+this.payTimeRange[1]
  641. }
  642. else{
  643. this.queryParams.payTimeRange=null;
  644. }
  645. if(this.deliveryImportTimeRange!=null&&this.deliveryImportTimeRange.length==2){
  646. this.queryParams.deliveryImportTimeRange=this.deliveryImportTimeRange[0]+"--"+this.deliveryImportTimeRange[1]
  647. }
  648. else{
  649. this.queryParams.deliveryImportTimeRange=null;
  650. }
  651. this.loading = true;
  652. listAllStoreOrder(this.addDateRange(this.queryParams, this.dateRange)).then(response => {
  653. this.storeOrderList = response.rows;
  654. this.total = response.total;
  655. this.loading = false;
  656. });
  657. },
  658. // 取消按钮
  659. cancel() {
  660. this.open = false;
  661. this.reset();
  662. },
  663. // 表单重置
  664. reset() {
  665. this.form = {
  666. addressId:null,
  667. userId:null,
  668. products:null,
  669. };
  670. this.resetForm("form");
  671. },
  672. /** 搜索按钮操作 */
  673. handleQuery() {
  674. this.queryParams.pageNum = 1;
  675. this.getList();
  676. },
  677. /** 重置按钮操作 */
  678. resetQuery() {
  679. this.resetForm("queryForm");
  680. this.handleQuery();
  681. },
  682. // 多选框选中数据
  683. handleSelectionChange(selection) {
  684. this.ids = selection.map(item => item.id)
  685. this.single = selection.length!==1
  686. this.multiple = !selection.length
  687. },
  688. /** 新增按钮操作 */
  689. handleAdd() {
  690. this.reset();
  691. this.open = true;
  692. this.title = "创建订单";
  693. },
  694. /** 修改按钮操作 */
  695. handleUpdate(row) {
  696. this.reset();
  697. const id = row.id || this.ids
  698. getStoreOrder(id).then(response => {
  699. this.form = response.data;
  700. this.open = true;
  701. this.title = "修改订单";
  702. });
  703. },
  704. /** 提交按钮 */
  705. submitForm() {
  706. this.$refs["form"].validate(valid => {
  707. if(this.products.length==0){
  708. this.msgError("请选择商品");
  709. return;
  710. }
  711. this.form.products=this.products;
  712. if (valid) {
  713. console.log(this.form);
  714. createUserOrder(this.form).then(response => {
  715. if (response.code === 200) {
  716. this.msgSuccess("创建成功");
  717. this.open = false;
  718. this.getList();
  719. }
  720. });
  721. }
  722. });
  723. },
  724. /** 删除按钮操作 */
  725. handleDelete(row) {
  726. this.products.splice(this.products.findIndex(item => item.id === row.id), 1)
  727. this.compute();
  728. },
  729. /** 导出按钮操作 */
  730. handleExport() {
  731. if(this.queryParams.status=='00'){
  732. this.queryParams.status=null;
  733. }
  734. if(this.createTimeRange!=null&&this.createTimeRange.length==2){
  735. this.queryParams.createTimeRange=this.createTimeRange[0]+"--"+this.createTimeRange[1]
  736. }
  737. else{
  738. this.queryParams.createTimeRange=null;
  739. }
  740. if(this.payTimeRange!=null&&this.payTimeRange.length==2){
  741. this.queryParams.payTimeRange=this.payTimeRange[0]+"--"+this.payTimeRange[1]
  742. }
  743. else{
  744. this.queryParams.payTimeRange=null;
  745. }
  746. if(this.deliveryImportTimeRange!=null&&this.deliveryImportTimeRange.length==2){
  747. this.queryParams.deliveryImportTimeRange=this.deliveryImportTimeRange[0]+"--"+this.deliveryImportTimeRange[1]
  748. }
  749. else{
  750. this.queryParams.deliveryImportTimeRange=null;
  751. }
  752. const queryParams = this.addDateRange(this.queryParams, this.dateRange);
  753. this.$confirm('是否确认导出所有订单数据项?', "警告", {
  754. confirmButtonText: "确定",
  755. cancelButtonText: "取消",
  756. type: "warning"
  757. }).then(function() {
  758. return exportStoreOrder(queryParams);
  759. }).then(response => {
  760. this.download(response.msg);
  761. }).catch(function() {});
  762. },
  763. handleExportItems() {
  764. if(this.queryParams.status=='00'){
  765. this.queryParams.status=null;
  766. }
  767. if(this.createTimeRange!=null&&this.createTimeRange.length==2){
  768. this.queryParams.createTimeRange=this.createTimeRange[0]+"--"+this.createTimeRange[1]
  769. }
  770. else{
  771. this.queryParams.createTimeRange=null;
  772. }
  773. if(this.payTimeRange!=null&&this.payTimeRange.length==2){
  774. this.queryParams.payTimeRange=this.payTimeRange[0]+"--"+this.payTimeRange[1]
  775. }
  776. else{
  777. this.queryParams.payTimeRange=null;
  778. }
  779. if(this.deliveryImportTimeRange!=null&&this.deliveryImportTimeRange.length==2){
  780. this.queryParams.deliveryImportTimeRange=this.deliveryImportTimeRange[0]+"--"+this.deliveryImportTimeRange[1]
  781. }
  782. else{
  783. this.queryParams.deliveryImportTimeRange=null;
  784. }
  785. const queryParams = this.addDateRange(this.queryParams, this.dateRange);
  786. this.$confirm('是否确认导出所有订单明细数据项?', "警告", {
  787. confirmButtonText: "确定",
  788. cancelButtonText: "取消",
  789. type: "warning"
  790. }).then(function() {
  791. return exportStoreOrderItems(queryParams);
  792. }).then(response => {
  793. this.download(response.msg);
  794. }).catch(function() {});
  795. }
  796. }
  797. };
  798. </script>
  799. <style scoped lang="scss">
  800. .items{
  801. margin: 5px 0px;
  802. display: flex;
  803. flex-direction: row;
  804. align-items: center;
  805. justify-content: flex-start;
  806. .pic{
  807. width:60px;
  808. height:60px;
  809. }
  810. .goods-content{
  811. margin-left: 10px;
  812. max-width: 200px;
  813. text-align: left;
  814. .goods-title{
  815. overflow:hidden;
  816. white-space: nowrap;
  817. text-overflow: ellipsis;
  818. -o-text-overflow:ellipsis;
  819. }
  820. }
  821. }
  822. </style>