酒店预订平台
You can not select more than 25 topics Topics must start with a letter or number, can include dashes ('-') and can be up to 35 characters long.
 
 
 
 
 
 

604 lines
27 KiB

  1. <!DOCTYPE html>
  2. <html>
  3. <head>
  4. <meta charset="UTF-8">
  5. <!-- import CSS -->
  6. <link rel="stylesheet" href="https://unpkg.com/element-ui/lib/theme-chalk/index.css">
  7. </head>
  8. <body>
  9. <div id="app" class="table">
  10. <div>
  11. <div class="header-search">
  12. <span>名称:</span>
  13. <el-input v-model="search.name" style="width: 150px;" placeholder="请输入内容"></el-input>
  14. <span>状态</span>
  15. <el-select v-model="search.status" placeholder="请选择" clearable>
  16. <el-option
  17. v-for="item in status"
  18. :key="item.id"
  19. :label="item.value"
  20. :value="item.id">
  21. </el-option>
  22. </el-select>
  23. <el-button type="primary" icon="el-icon-search" @click="getData(1)">搜索</el-button>
  24. <el-button type="primary" icon="el-icon-plus" @click="edit(null)">新增收款单</el-button>
  25. </div>
  26. <el-table ref="multipleTable" :data="tableData" border tooltip-effect="dark"
  27. style="font-size:12px;width: 100%;margin-top: 12px">
  28. <el-table-column prop="create_id" label="创建人" min-width="70" :formatter="getUserName"></el-table-column>
  29. <el-table-column prop="id" label="收款单号" min-width="50"></el-table-column>
  30. <el-table-column prop="name" label="收款单名称" min-width="120"></el-table-column>
  31. <el-table-column prop="status" label="收款单状态" :formatter="getStatusName" min-width="140">
  32. <template slot-scope="scope">
  33. <el-radio-group v-model="scope.row.status" size="mini" @change="setStatus(scope.row)">
  34. <el-radio-button label="0">未收款</el-radio-button>
  35. <el-radio-button label="1">收款中</el-radio-button>
  36. <el-radio-button label="2">已收款</el-radio-button>
  37. </el-radio-group>
  38. </template>
  39. </el-table-column>
  40. <el-table-column prop="order_ids" label="关联订单" min-width="150"></el-table-column>
  41. <el-table-column prop="total_amount" label="金额" min-width="60"></el-table-column>
  42. <el-table-column prop="create_time" label="创建时间" min-width="80"></el-table-column>
  43. <el-table-column prop="update_time" label="更新时间" min-width="80"></el-table-column>
  44. <el-table-column label="操作" min-width="180">
  45. <template slot-scope="scope">
  46. <el-button-group>
  47. <el-button type="primary" size="mini" @click="edit(scope.row)" icon="el-icon-edit">编辑</el-button>
  48. <el-button type="success" size="mini" @click="editOrderDivShow(scope.row)" icon="el-icon-share">订单</el-button>
  49. <el-button type="danger" size="mini" icon="el-icon-delete" @click="delAll(scope.row.id)">删除</el-button>
  50. </el-button-group>
  51. </template>
  52. </el-table-column>
  53. </el-table>
  54. <el-pagination
  55. :page-size="search.pageSize"
  56. :pager-count="11"
  57. layout="total, sizes, prev, pager, next, jumper"
  58. :total="total"
  59. :current-page="search.pageNum"
  60. :page-sizes="[10, 20, 30, 40, 50]"
  61. @size-change="sizeChange"
  62. @current-change="getData"
  63. @prev-click="getData"
  64. @next-click="getData"
  65. ></el-pagination>
  66. </div>
  67. <transition name="bounce" v-if="editShow">
  68. <el-dialog title="收款单详情" :visible.sync="editShow" width="90%" top="15px">
  69. <el-form ref="form" label-width="100px" style="width: 100%;padding-bottom: 20px">
  70. <div style="display: flex;width: 100%">
  71. <el-form-item v-if="editType" label="收款单ID:" style="width: 80%">
  72. <div v-html="editData.id"></div>
  73. </el-form-item>
  74. </div>
  75. <div>
  76. <el-form-item label="收款单名称:" style="width: 80%">
  77. <el-input v-model="editData.name" style="width: 150px;" placeholder="请输入内容"></el-input>
  78. </el-form-item>
  79. </div>
  80. <div>
  81. <el-form-item v-if="editType" label="收款单状态:" style="width: 80%">
  82. <el-radio-group v-model="editData.status" size="mini" disabled>
  83. <el-radio-button label="0">未收款</el-radio-button>
  84. <el-radio-button label="1">收款中</el-radio-button>
  85. <el-radio-button label="2">已收款</el-radio-button>
  86. </el-radio-group>
  87. </el-form-item>
  88. </div>
  89. <div>
  90. <el-button type="primary" @click="editDoing()" >保存</el-button>
  91. </div>
  92. </el-form>
  93. </el-dialog>
  94. </transition>
  95. <transition name="bounce" v-if="editOrderShow">
  96. <el-dialog title="详情" :visible.sync="editOrderShow" width="90%" top="15px">
  97. <el-form ref="form" label-width="100px" style="width: 100%;padding-bottom: 10px">
  98. <div style="display: flex;width: 100%">
  99. <el-form-item label="收款单ID:" style="width: 80%">
  100. <div v-html="editOrder.id"></div>
  101. </el-form-item>
  102. <el-form-item label="收款单名称:" style="width: 80%">
  103. <div v-html="editOrder.name"></div>
  104. </el-form-item>
  105. <el-form-item label="收款单状态:" style="width: 80%">
  106. <el-radio-group v-model="editOrder.status" size="mini" disabled="true">
  107. <el-radio-button label="0">未收款</el-radio-button>
  108. <el-radio-button label="1">收款中</el-radio-button>
  109. <el-radio-button label="2">已收款</el-radio-button>
  110. </el-radio-group>
  111. </el-form-item>
  112. </div>
  113. </el-form>
  114. <div>
  115. <div class="header-search" style="width: 100%;margin-bottom: 10px">
  116. <span>订单ID:</span>
  117. <el-input v-model="orderMainListSearch.order_id" style="width: 150px;" placeholder="请输入内容"></el-input>
  118. <span>订单状态:</span>
  119. <el-select v-model="orderMainListSearch.order_status" style="width: 150px;" placeholder="请选择" clearable>
  120. <el-option
  121. v-for="item in orderMainStatus"
  122. :key="item.id"
  123. :label="item.name"
  124. :value="item.id">
  125. </el-option>
  126. </el-select>
  127. <span>收款单状态</span>
  128. <el-select v-model="orderMainListSearch.inReceipt" style="width: 150px;" placeholder="请选择" clearable>
  129. <el-option
  130. v-for="item in inReceipt"
  131. :key="item.id"
  132. :label="item.name"
  133. :value="item.id">
  134. </el-option>
  135. </el-select>
  136. <span>渠道:</span>
  137. <el-select v-model="orderMainListSearch.channel_id" style="width: 150px;" placeholder="请选择" clearable>
  138. <el-option
  139. v-for="item in channelList"
  140. :key="item.id"
  141. :label="item.name"
  142. :value="item.id">
  143. </el-option>
  144. </el-select>
  145. <span>专员</span>
  146. <el-select v-model="orderMainListSearch.commissioner_id" style="width: 150px;" placeholder="请选择" clearable>
  147. <el-option
  148. v-for="item in userList"
  149. :key="item.id"
  150. :label="item.name"
  151. :value="item.id">
  152. </el-option>
  153. </el-select>
  154. <span>下单人</span>
  155. <el-select v-model="orderMainListSearch.create_id" style="width: 150px;" placeholder="请选择" clearable>
  156. <el-option
  157. v-for="item in userList"
  158. :key="item.id"
  159. :label="item.name"
  160. :value="item.id">
  161. </el-option>
  162. </el-select>
  163. </div>
  164. <div class="header-search" style="width: 100%;margin-bottom: 10px">
  165. <span>用户名</span>
  166. <el-input v-model="orderMainListSearch.user_name" style="width: 150px;" placeholder="请输入内容" clearable></el-input>
  167. <span>手机号</span>
  168. <el-input v-model="orderMainListSearch.user_phone" style="width: 150px;" placeholder="请输入内容" clearable></el-input>
  169. <span>金额</span>
  170. <el-input-number v-model="orderMainListSearch.startMoney" style="width: 170px;" placeholder="请输入内容" clearable></el-input-number>
  171. ~
  172. <el-input-number v-model="orderMainListSearch.endMoney" style="width: 170px;" placeholder="请输入内容" clearable></el-input-number>
  173. <span>时间</span>
  174. <el-date-picker
  175. style="width: 150px;"
  176. v-model="orderMainListSearch.startTime"
  177. type="date"
  178. value-format="yyyy-MM-dd"
  179. placeholder="选择日期">
  180. </el-date-picker>
  181. ~
  182. <el-date-picker
  183. style="width: 150px;"
  184. v-model="orderMainListSearch.endTime"
  185. value-format="yyyy-MM-dd"
  186. type="date"
  187. placeholder="选择日期">
  188. </el-date-picker>
  189. <el-button type="primary" icon="el-icon-search" @click="getOrderMainData(1)">搜索</el-button>
  190. </div>
  191. <div>
  192. <el-table ref="multipleTable" :data="orderMainList" border tooltip-effect="dark" style="font-size:12px;width: 100%;margin-top: 12px" @selection-change="handleSelectionChange">
  193. <el-table-column type="selection" width="30" :selectable="checkSelect"></el-table-column>
  194. <el-table-column prop="id" label="订单ID" min-width="40" ></el-table-column>
  195. <el-table-column prop="commissioner" label="专员" min-width="40" ></el-table-column>
  196. <el-table-column prop="channel_name" label="渠道" min-width="80" ></el-table-column>
  197. <el-table-column prop="channel_order_no" label="渠道订单号" min-width="90" ></el-table-column>
  198. <el-table-column prop="create_id" label="下单人" min-width="50" :formatter="getUserName"></el-table-column>
  199. <el-table-column prop="user_name" label="用户名称" min-width="50" ></el-table-column>
  200. <el-table-column prop="user_phone" label="手机号" min-width="60" ></el-table-column>
  201. <el-table-column prop="total_amount" label="总金额" min-width="40" ></el-table-column>
  202. <el-table-column prop="order_status" label="状态" min-width="40" :formatter="getOrderMainStatus"></el-table-column>
  203. <el-table-column prop="create_time" label="下单时间" min-width="80" ></el-table-column>
  204. <el-table-column prop="receipt_order_id" label="收款单ID" min-width="40" ></el-table-column>
  205. <el-table-column prop="receipt_order_name" label="收款单名称" min-width="80" ></el-table-column>
  206. <el-table-column label="操作" >
  207. <template slot-scope="scope">
  208. <el-button-group>
  209. <el-button type="primary" size="mini" v-if="scope.row.receipt_order_id==0 && editOrder.status==0" @click="addOrderMain(scope.row.id)" icon="el-icon-edit">添加</el-button>
  210. <el-button type="danger" size="mini" v-if="scope.row.receipt_order_id==editOrder.id && editOrder.status==0" @click="removeOrderMain(scope.row.id)" icon="el-icon-delete">移除</el-button>
  211. </el-button-group>
  212. </template>
  213. </el-table-column>
  214. </el-table>
  215. <div style="margin-top: 5px">
  216. <el-button type="primary" icon="el-icon-circle-plus" @click="addOrderAll()" :disabled="multipleSelection.length==0">添加到采购单</el-button>
  217. </div>
  218. <el-pagination
  219. :page-size="orderMainListSearch.pageSize"
  220. :pager-count="11"
  221. layout="total, sizes, prev, pager, next, jumper"
  222. :total="orderMainTotal"
  223. :current-page="orderMainListSearch.pageNum"
  224. :page-sizes="[10, 20, 30, 40, 50]"
  225. @size-change="sizeOrderMainChange"
  226. @current-change="getOrderMainData"
  227. @prev-click="getOrderMainData"
  228. @next-click="getOrderMainData"
  229. ></el-pagination>
  230. </div>
  231. </div>
  232. </el-dialog>
  233. </transition>
  234. </div>
  235. </body>
  236. <!-- import Vue before Element -->
  237. <script src="/assets/js/vue/vue.js"></script>
  238. <!-- import JavaScript -->
  239. <script src="/assets/js/vue/index.js"></script>
  240. <script src="https://unpkg.com/axios/dist/axios.min.js"></script>
  241. <script>
  242. new Vue({
  243. el: '#app',
  244. data: function () {
  245. return {
  246. search: {
  247. name: "",
  248. status: "all",
  249. pageSize: 10,
  250. pageNum: 1
  251. },
  252. status: [
  253. {"id": "all", "value": "请选择"},
  254. {"id": 0, 'value': "未收款"},
  255. {"id": 1, 'value': "收款中"},
  256. {"id": 2, 'value': "已收款"}
  257. ],
  258. total: 0,
  259. tableData: [],
  260. userList: [],
  261. info: {
  262. id: null,
  263. name: "",
  264. status: 0,
  265. list: []
  266. },
  267. editShow: false,
  268. editType: false,
  269. editData: {},
  270. editOrderShow:false,
  271. editOrder:{},
  272. orderMainListSearch:{
  273. "receipt_order_id":"",
  274. "inReceipt":"",
  275. "order_id":"",
  276. "channel_id":"",
  277. "order_status":"",
  278. "commissioner_id":"",
  279. "user_name":"",
  280. "user_phone":"",
  281. "create_id":"",
  282. "startMoney":"",
  283. "endMoney":"",
  284. "startTime":"",
  285. "endTime":"",
  286. "pageNum":1,
  287. "pageSize":10
  288. },
  289. orderMainTotal:0,
  290. orderMainList:[],
  291. inReceipt:[
  292. {id:1,name:"在此收款单中"},
  293. {id:2,name:"不在此收款单中"},
  294. {id:3,name:"不在任何收款单中"}
  295. ],
  296. //0待处理 1已确认 2部分取消 10已完成 11已取消
  297. orderMainStatus:[
  298. {id:0,name:"待处理"},
  299. {id:1,name:"已确认"},
  300. {id:2,name:"部分取消"},
  301. {id:3,name:"处理中"},
  302. {id:10,name:"已完成"},
  303. {id:11,name:"已取消"}
  304. ],
  305. channelList:[],
  306. multipleSelection: []
  307. }
  308. },
  309. created() {
  310. this.getAdminUser();
  311. this.getChannelList();
  312. this.getData(1)
  313. },
  314. methods: {
  315. checkSelect(row,index){
  316. if (this.editOrder.status != 0) {
  317. return false;
  318. }
  319. if (row.receipt_order_id ==0) {
  320. return true;
  321. }
  322. return false;
  323. },
  324. handleSelectionChange(val) {
  325. this.multipleSelection = val;
  326. },
  327. getChannelList(){
  328. axios.post("/hotel.php/cf_channel_info/getList", this.search).then((response) => {
  329. console.log(response)
  330. let data = response.data;
  331. this.channelList = data.list;
  332. }).catch(function (error) {
  333. console.log(error);
  334. });
  335. },
  336. getStatusName(info) {
  337. for (let i = 0; i < this.status.length; i++) {
  338. if (this.status[i].id == info.status) {
  339. return this.status[i].value
  340. }
  341. }
  342. return "-"
  343. },
  344. getUserName(info) {
  345. for (let i = 0; i < this.userList.length; i++) {
  346. if (this.userList[i].id == info.create_id) {
  347. return this.userList[i].name
  348. }
  349. }
  350. return "-"
  351. },
  352. getOrderMainStatus(info){
  353. for (let i = 0; i < this.orderMainStatus.length; i++) {
  354. if (this.orderMainStatus[i].id == info.order_status) {
  355. return this.orderMainStatus[i].name
  356. }
  357. }
  358. return "-"
  359. },
  360. sizeChange(pageSize) {
  361. this.search.pageSize = pageSize;
  362. this.getData(this.search.pageNum)
  363. },
  364. sizeOrderMainChange(pageSize) {
  365. this.orderMainListSearch.pageSize = pageSize;
  366. this.getOrderMainData(this.orderMainListSearch.pageNum)
  367. },
  368. //獲取列表
  369. getData(page) {
  370. this.search.pageNum = page;
  371. axios.post("/hotel.php/receipt_order/getList", this.search).then((response) => {
  372. let data = response.data;
  373. console.log(this.tableData);
  374. if (data.flag) {
  375. this.tableData = data.data.list;
  376. this.total = data.data.total;
  377. console.log(this.tableData);
  378. } else {
  379. this.$message.error(response.msg);
  380. }
  381. }).catch(function (error) {
  382. console.log(error);
  383. });
  384. },
  385. getAdminUser() {
  386. axios.post("/hotel.php/auth/admin/getList", this.search).then((response) => {
  387. this.userList = response.data.list;
  388. }).catch(function (error) {
  389. console.log(error);
  390. });
  391. },
  392. edit(info) {
  393. if (info == null) {
  394. this.editType = false;
  395. this.editData = {
  396. name: ""
  397. }
  398. } else {
  399. this.editType = true;
  400. this.editData = {
  401. id:info.id,
  402. name: info.name,
  403. status:info.status
  404. }
  405. }
  406. this.editShow = true;
  407. },
  408. editDoing(){
  409. axios.post("/hotel.php/receipt_order/save", this.editData).then( (response)=> {
  410. let data = response.data;
  411. console.log(this.tableData);
  412. if (data.flag) {
  413. this.$message({
  414. message: '保存成功!',
  415. type: 'success'
  416. });
  417. this.editShow = false;
  418. this.getData(1);
  419. } else {
  420. this.$message.error(data.msg);
  421. }
  422. }).catch(function (error) {
  423. this.$message.error("保存失败");
  424. console.log(error);
  425. });
  426. },
  427. setStatus(info){
  428. this.$confirm('确定修改状态?', '提示', {
  429. confirmButtonText: '确定',
  430. cancelButtonText: '取消',
  431. type: 'warning'
  432. }).then(() => {
  433. axios.post("/hotel.php/receipt_order/setStatus", info).then( (response)=> {
  434. let data = response.data;
  435. if (data.flag) {
  436. this.$message({
  437. message: '设置成功!',
  438. type: 'success'
  439. });
  440. } else {
  441. this.$message.error(data.msg);
  442. this.getData(this.search.pageNum)
  443. }
  444. }).catch(function (error) {
  445. this.$message.error("保存失败");
  446. console.log(error);
  447. this.getData(this.search.pageNum)
  448. });
  449. }).catch(() => {
  450. this.$message({
  451. type: 'info',
  452. message: '已取消'
  453. });
  454. this.getData(this.search.pageNum)
  455. })
  456. },
  457. editOrderDivShow(info){
  458. console.log(info);
  459. this.editOrder = info;
  460. this.orderMainListSearch.receipt_order_id = info.id;
  461. this.orderMainList=[];
  462. this.getOrderMainData(1);
  463. this.editOrderShow = true;
  464. },
  465. getOrderMainData(page){
  466. this.orderMainListSearch.pageNum = page;
  467. axios.post("/hotel.php/receipt_order/getOrderMainList", this.orderMainListSearch).then((response) => {
  468. let data = response.data;
  469. console.log(this.tableData);
  470. if (data.flag) {
  471. this.orderMainList = data.data.list;
  472. this.orderMainTotal = data.data.total;
  473. console.log(this.orderMainList);
  474. } else {
  475. this.$message.error(data.msg);
  476. }
  477. }).catch(function (error) {
  478. console.log(error);
  479. });
  480. },
  481. addOrderMain(order_id){
  482. let param = {
  483. order_id:order_id,
  484. id:this.editOrder.id
  485. }
  486. axios.post("/hotel.php/receipt_order/addOrderMain", param).then((response) => {
  487. let data = response.data;
  488. if (data.flag) {
  489. this.$message({
  490. message: '添加成功!',
  491. type: 'success'
  492. });
  493. this.getOrderMainData(this.orderMainListSearch.pageNum)
  494. this.getData(this.search.pageNum)
  495. } else {
  496. this.$message.error(data.msg);
  497. }
  498. }).catch(function (error) {
  499. console.log(error);
  500. });
  501. },
  502. addOrderAll(){
  503. let orderId = "";
  504. let length = this.multipleSelection.length;
  505. for (var k = 0; k < length; k++) {
  506. if (orderId == "") {
  507. orderId = this.multipleSelection[k].id;
  508. continue;
  509. }
  510. orderId =orderId+","+this.multipleSelection[k].id;
  511. }
  512. this.addOrderMain(orderId);
  513. },
  514. removeOrderMain(order_id){
  515. let param = {
  516. order_id:order_id,
  517. id:this.editOrder.id
  518. }
  519. axios.post("/hotel.php/receipt_order/removeOrderMain", param).then((response) => {
  520. let data = response.data;
  521. if (data.flag) {
  522. this.$message({
  523. message: '移除成功!',
  524. type: 'success'
  525. });
  526. this.getOrderMainData(this.orderMainListSearch.pageNum)
  527. this.getData(this.search.pageNum)
  528. } else {
  529. this.$message.error(data.msg);
  530. }
  531. }).catch(function (error) {
  532. console.log(error);
  533. });
  534. },
  535. delAll(id){
  536. let param = {
  537. id:id
  538. }
  539. this.$confirm('确定删除采购单?', '提示', {
  540. confirmButtonText: '确定',
  541. cancelButtonText: '取消',
  542. type: 'warning'
  543. }).then(() => {
  544. axios.post("/hotel.php/receipt_order/delAll", param).then((response) => {
  545. let data = response.data;
  546. if (data.flag) {
  547. this.$message({
  548. message: '移除成功!',
  549. type: 'success'
  550. });
  551. this.getData(this.search.pageNum)
  552. } else {
  553. this.$message.error(data.msg);
  554. }
  555. }).catch(function (error) {
  556. console.log(error);
  557. });
  558. }).catch(() => {
  559. this.$message({
  560. type: 'info',
  561. message: '已取消'
  562. });
  563. });
  564. }
  565. }
  566. })
  567. </script>
  568. <style lang="scss" scoped>
  569. .el-table thead {
  570. background-color: #5a5e66 !important;
  571. }
  572. .header-search {
  573. font-size: 14px;
  574. font-weight: 900;
  575. }
  576. body {
  577. background-color: white;
  578. }
  579. .table {
  580. width: 100%;
  581. font-size: 12px;
  582. margin-top: 12px;
  583. background-color: white;
  584. }
  585. .el-form-item{
  586. margin-bottom: 5px !important;
  587. }
  588. </style>
  589. </html>