loumengning
/
hbp
2
0
Форк 0
Код Проблеми 1 Запити на злиття 0 Релізи 0 Вікі Активність
酒店预订平台
Ви не можете вибрати більше 25 тем Теми мають розпочинатися з літери або цифри, можуть містити дефіси (-) і не повинні перевищувати 35 символів.
180 Коміти
3 Гілки
1.4 GiB
 
 
 
 
 
 
Дерево: 188fa317da
Гілки Теги
${ item.name }
Створити гілку ${ searchTerm }
з '188fa317da'
${ noResults }
hbp/application/admin/view/order_main/index.html

525 рядки
23 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" style="width: 100%;margin-bottom: 10px">

  12.             <span>订单ID：</span>

  13.             <el-input v-model="search.order_id" style="width: 150px;" placeholder="请输入内容" clearable></el-input>

  14.             <span>订单状态：</span>

  15.             <el-select v-model="search.order_status" style="width: 150px;" placeholder="请选择" clearable>

  16.                 <el-option

  17.                         v-for="item in orderMainStatus"

  18.                         :key="item.id"

  19.                         :label="item.name"

  20.                         :value="item.id">

  21.                 </el-option>

  22.             </el-select>

  23.             <span>收款单ID：</span>

  24.             <el-input v-model="search.receipt_order_id" style="width: 150px;" placeholder="请输入内容" clearable></el-input>

  25.             <span>收款单状态</span>

  26.             <el-select v-model="search.receipt_order_status" style="width: 150px;" placeholder="请选择" clearable>

  27.                 <el-option

  28.                         v-for="item in receiptStatus"

  29.                         :key="item.id"

  30.                         :label="item.name"

  31.                         :value="item.id">

  32.                 </el-option>

  33.             </el-select>

  34.             <span>用户名</span>

  35.             <el-input v-model="search.user_name" style="width: 150px;" placeholder="请输入内容" clearable></el-input>

  36.             <span>手机号</span>

  37.             <el-input v-model="search.user_phone" style="width: 150px;" placeholder="请输入内容" clearable></el-input>

  38.         </div>

  39.         <div class="header-search" style="width: 100%;margin-bottom: 10px">

  40.             <span>渠道订单号：</span>

  41.             <el-input v-model="search.channel_order_no" style="width: 150px;" placeholder="请输入内容" clearable></el-input>

  42.             <span>渠道：</span>

  43.             <el-select v-model="search.channel_id" style="width: 150px;" placeholder="请选择" clearable>

  44.                 <el-option

  45.                         v-for="item in channelList"

  46.                         :key="item.id"

  47.                         :label="item.name"

  48.                         :value="item.id">

  49.                 </el-option>

  50.             </el-select>

  51.             <span>专员</span>

  52.             <el-select v-model="search.commissioner_id" style="width: 150px;" placeholder="请选择" clearable>

  53.                 <el-option

  54.                         v-for="item in userList"

  55.                         :key="item.id"

  56.                         :label="item.name"

  57.                         :value="item.id">

  58.                 </el-option>

  59.             </el-select>

  60.             <span>下单人</span>

  61.             <el-select v-model="search.create_id"  style="width: 150px;" placeholder="请选择" clearable>

  62.                 <el-option

  63.                         v-for="item in userList"

  64.                         :key="item.id"

  65.                         :label="item.name"

  66.                         :value="item.id">

  67.                 </el-option>

  68.             </el-select>

  69.             <span>时间</span>

  70.             <el-date-picker

  71.                     style="width: 150px;"

  72.                     v-model="search.startTime"

  73.                     type="date"

  74.                     value-format="yyyy-MM-dd"

  75.                     placeholder="选择日期">

  76.             </el-date-picker>

  77.             ~

  78.             <el-date-picker

  79.                     style="width: 150px;"

  80.                     v-model="search.endTime"

  81.                     value-format="yyyy-MM-dd"

  82.                     type="date"

  83.                     placeholder="选择日期">

  84.             </el-date-picker>

  85.         </div>

  86.         <div class="header-search" style="width: 100%;margin-bottom: 10px">

  87.             <span>金额</span>

  88.             <el-input-number v-model="search.startMoney" style="width: 170px;" placeholder="请输入内容" clearable></el-input-number>

  89.             ~

  90.             <el-input-number v-model="search.endMoney" style="width: 170px;" placeholder="请输入内容" clearable></el-input-number>

  91.             <span>成本</span>

  92.             <el-input-number v-model="search.startCost" style="width: 170px;" placeholder="请输入内容" clearable></el-input-number>

  93.             ~

  94.             <el-input-number v-model="search.endCost" style="width: 170px;" placeholder="请输入内容" clearable></el-input-number>

  95.             <span>利润</span>

  96.             <el-input-number v-model="search.startProfit" style="width: 170px;" placeholder="请输入内容" clearable></el-input-number>

  97.             ~

  98.             <el-input-number v-model="search.endProfit" style="width: 170px;" placeholder="请输入内容" clearable></el-input-number>

  99. 

  100.             <el-button type="primary" icon="el-icon-search" @click="getData(1)">搜索</el-button>

  101.             <el-button type="primary" icon="el-icon-plus"  @click="addShow=true" >新增</el-button>

  102.         </div>

  103. 

  104.         <el-table ref="multipleTable" :data="tableData" border tooltip-effect="dark"

  105.                   style="font-size:12px;width: 100%;margin-top: 12px">

  106.             <el-table-column prop="id" label="订单ID" min-width="30" ></el-table-column>

  107.             <el-table-column prop="commissioner" label="专员" min-width="40" ></el-table-column>

  108.             <el-table-column prop="channel_order_no" label="渠道" min-width="120" >

  109.                 <template slot-scope="scope">

  110.                     <div><i class="el-icon-user" v-html="scope.row.channel_name"></i></div>

  111.                     <div><i class="el-icon-tickets" v-html="scope.row.channel_order_no"></i></div>

  112.                 </template>

  113.             </el-table-column>

  114.             <el-table-column prop="create_id" label="下单人" min-width="50" :formatter="getUserName"></el-table-column>

  115.             <el-table-column prop="user_name" label="用户" min-width="80" >

  116.                 <template slot-scope="scope">

  117.                     <div><i class="el-icon-user-solid" v-html="scope.row.user_name"></i></div>

  118.                     <div><i class="el-icon-phone" v-html="scope.row.user_phone"></i></div>

  119.                 </template>

  120.             </el-table-column>

  121.             <el-table-column prop="total_amount" label="金额" min-width="80" >

  122.                 <template slot-scope="scope">

  123.                     <div v-html="'金额:'+scope.row.total_amount"></div>

  124.                     <div v-html="'成本:'+scope.row.cost_amount"></div>

  125.                     <div v-if="scope.row.profit_amount>0" v-html="'利润:'+scope.row.profit_amount"></div>

  126.                     <div v-if="scope.row.profit_amount<=0" v-html="'利润:'+scope.row.profit_amount" style="color: red"></div>

  127.                 </template>

  128.             </el-table-column>

  129.             <el-table-column prop="order_status" label="状态" min-width="40" :formatter="getOrderMainStatus"></el-table-column>

  130.             <el-table-column prop="create_time" label="时间" min-width="100" >

  131.                 <template slot-scope="scope">

  132.                     <div ><i v-html="'下单:'+scope.row.create_time"></i></div>

  133.                     <div v-if="scope.row.success_time"><i v-html="'成功：'+scope.row.success_time"></i></div>

  134.                     <div v-if="scope.row.cancel_time"><i v-html="'取消:'+scope.row.cancel_time"></i></div>

  135.                 </template>

  136.             </el-table-column>

  137.             <el-table-column prop="receipt_order_name" label="收款单" min-width="100" >

  138.                 <template slot-scope="scope">

  139.                     <div v-if="scope.row.receipt_order_id!=0">

  140.                         <div v-html="'ID:'+scope.row.receipt_order_id"></div>

  141.                         <div v-html="'NAME:'+scope.row.receipt_order_name"></div>

  142.                         <div v-html="'状态:'+getReceiptOrderStatus(scope.row)" ></div>

  143.                     </div>

  144.                 </template>

  145.             </el-table-column>

  146.             <el-table-column label="子订单" type="expand">

  147.                 <template slot-scope="scope">

  148.                     <el-table ref="multipleTable" :data="scope.row.subOrder" border tooltip-effect="dark"

  149.                               style="font-size:12px;width: 94%;margin-left: 2%;margin-right: 4%">

  150.                         <el-table-column prop="id" label="订单ID" min-width="30" ></el-table-column>

  151.                         <el-table-column prop="type" label="类型" min-width="30" ></el-table-column>

  152.                         <el-table-column  label="名称" min-width="80" >

  153.                             <template slot-scope="prop">

  154.                                 <div v-if="prop.row.type=='酒店'" v-html="prop.row.hotel_name"></div>

  155.                                 <div v-if="prop.row.type=='附加项目'" v-html="prop.row.item_name"></div>

  156.                             </template>

  157.                         </el-table-column>

  158.                         <el-table-column  label="房型/项目类型" min-width="80" >

  159.                             <template slot-scope="prop">

  160.                                 <div v-if="prop.row.type=='酒店'" v-html="prop.row.room_name"></div>

  161.                                 <div v-if="prop.row.type=='附加项目'" v-html="getTypeName(prop.row)"></div>

  162.                             </template>

  163.                         </el-table-column>

  164.                         <el-table-column prop="id" label="时间" min-width="40" >

  165.                             <template slot-scope="prop">

  166.                                 <div v-if="prop.row.type=='酒店'" >

  167.                                     <div v-html="prop.row.check_in_date"></div>

  168.                                     <div v-html="prop.row.check_out_date"></div>

  169.                                 </div>

  170.                                 <div v-if="prop.row.type=='附加项目'" v-html="prop.row.check_in_date"></div>

  171.                             </template>

  172.                         </el-table-column>

  173.                         <el-table-column prop="prod_num" label="数量" min-width="20" ></el-table-column>

  174.                         <el-table-column prop="customer_name" label="出游人姓名" min-width="40" ></el-table-column>

  175.                         <el-table-column prop="total_price" label="金额" min-width="30" ></el-table-column>

  176.                         <el-table-column prop="total_cost" label="成本" min-width="30" ></el-table-column>

  177.                         <el-table-column prop="profit" label="利润" min-width="30" ></el-table-column>

  178.                         <el-table-column label="发单状态" min-width="30" :formatter="confirmStatusName"></el-table-column>

  179.                         <el-table-column prop="payment_order_name" label="付款单" min-width="40" >

  180.                             <template slot-scope="scope">

  181.                                 <div v-if="scope.row.payment_order_id" v-html="scope.row.payment_order_id"></div>

  182.                                 <div v-if="scope.row.payment_order_id" v-html="scope.row.payment_order_name"></div>

  183.                             </template>

  184.                         </el-table-column>

  185.                         <el-table-column  label="付款单状态" min-width="40" :formatter="paymentOrderStatus" ></el-table-column>

  186.                     </el-table>

  187.                 </template>

  188.             </el-table-column>

  189.             <el-table-column prop="receipt_order_name" label="备注" min-width="80" >

  190.                 <template slot-scope="scope">

  191.                     <el-popover

  192.                             placement="top-start"

  193.                             title=""

  194.                             width="200"

  195.                             trigger="hover"

  196.                             :content="scope.row.order_memo">

  197.                         <div slot="reference" v-html="scope.row.order_memo" style="overflow:hidden;white-space: nowrap;"></div>

  198.                     </el-popover>

  199.                 </template>

  200.             </el-table-column>

  201.             <el-table-column label="操作" min-width="70">

  202.                 <template slot-scope="scope">

  203.                     <el-button-group>

  204.                         <el-button type="primary" size="mini" @click="edit(scope.row.id)" icon="el-icon-edit">编辑</el-button>

  205.                     </el-button-group>

  206.                 </template>

  207.             </el-table-column>

  208.         </el-table>

  209.         <el-pagination

  210.                 :page-size="search.pageSize"

  211.                 :pager-count="11"

  212.                 layout="total, sizes, prev, pager, next, jumper"

  213.                 :total="total"

  214.                 :current-page="search.pageNum"

  215.                 :page-sizes="[10, 20, 30, 40, 50]"

  216.                 @size-change="sizeChange"

  217.                 @current-change="getData"

  218.                 @prev-click="getData"

  219.                 @next-click="getData"

  220.         ></el-pagination>

  221.     </div>

  222.     <transition name="bounce" v-if="addShow">

  223.         <el-dialog title="新增订单" :visible.sync="addShow" width="90%" height="100%" top="15px">

  224.             <iframe src="/view/order_main/add.html" frameborder="0" width="99%" id="addPageShow" onload="this.height=100"></iframe>

  225.         </el-dialog>

  226.     </transition>

  227.     <transition name="bounce" v-if="editShow">

  228.         <el-dialog title="编辑订单" :visible.sync="editShow" width="90%" height="100%" top="15px">

  229.             <iframe :src="editPageShowUrl" frameborder="0" width="99%" id="editPageShow" onload="this.height=100"></iframe>

  230.         </el-dialog>

  231.     </transition>

  232. </div>

  233. </body>

  234. <!-- import Vue before Element -->

  235. <script src="/assets/js/vue/vue.js"></script>

  236. <!-- import JavaScript -->

  237. <script src="/assets/js/vue/index.js"></script>

  238. <script src="https://unpkg.com/axios/dist/axios.min.js"></script>

  239. <script type="text/javascript">

  240.     function reinitIframe(){

  241.         try{

  242.             var iframe = document.getElementById("addPageShow");

  243.             var bHeight = iframe.contentWindow.document.body.scrollHeight;

  244.             var dHeight = iframe.contentWindow.document.documentElement.scrollHeight;

  245.             var height = Math.max(bHeight, dHeight);

  246.             iframe.height = height;

  247.             console.log(height);

  248.         }catch (ex){}

  249.         try{

  250.             var iframe1 = document.getElementById("editPageShow");

  251.             var bHeight1 = iframe1.contentWindow.document.body.scrollHeight;

  252.             var dHeight1 = iframe1.contentWindow.document.documentElement.scrollHeight;

  253.             var height1 = Math.max(bHeight1, dHeight1);

  254.             iframe1.height = height1;

  255.             console.log(height1);

  256.         }catch (ex){}

  257.     }

  258.     window.setInterval("reinitIframe()", 200);

  259. </script>

  260. <script>

  261.     new Vue({

  262.         el: '#app',

  263.         data: function () {

  264.             return {

  265.                 search: {

  266.                     "receipt_order_id":"",

  267.                     "receipt_order_status":"",

  268.                     "order_id":"",

  269.                     "channel_order_no":"",

  270.                     "channel_id":"",

  271.                     "order_status":"",

  272.                     "commissioner_id":"",

  273.                     "user_name":"",

  274.                     "user_phone":"",

  275.                     "create_id":"",

  276.                     "startMoney":"",

  277.                     "endMoney":"",

  278.                     "startCost":"",

  279.                     "endCost":"",

  280.                     "startProfit":"",

  281.                     "endProfit":"",

  282.                     "startTime":"",

  283.                     "endTime":"",

  284.                     "pageNum":1,

  285.                     "pageSize":10

  286.                 },

  287.                 total: 0,

  288.                 tableData: [],

  289.                 province: [],

  290.                 city: [],

  291.                 area:[],

  292.                 editShow:false,

  293.                 editPageShowUrl:"",

  294.                 addShow:false,

  295.                 //收款单状态 0：未收款 1：收款中 2已收款

  296.                 receiptStatus:[

  297.                     {id:0,name:"未收款"},

  298.                     {id:1,name:"收款中"},

  299.                     {id:2,name:"已收款"},

  300.                 ],

  301.                 //0待处理 1已确认 2部分取消 10已完成 11已取消

  302.                 orderMainStatus:[

  303.                     {id:0,name:"待处理"},

  304.                     {id:1,name:"已确认"},

  305.                     {id:2,name:"部分取消"},

  306.                     {id:3,name:"处理中"},

  307.                     {id:10,name:"已完成"},

  308.                     {id:11,name:"已取消"}

  309.                 ],

  310.                 userList: [],

  311.                 channelList:[],

  312.                 multipleSelection: [],

  313.                 confirmStatusList:[

  314.                     {id:1,name:"未发单"},

  315.                     {id:2,name:"已发单"},

  316.                     {id:3,name:"已确认"},

  317.                     {id:4,name:"已取消"}

  318.                 ],

  319.                 paymentOrderStatusList:[

  320.                     {"id": 0, 'value': "未付款"},

  321.                     {"id": 1, 'value': "付款中"},

  322.                     {"id": 2, 'value': "已付款"}

  323.                 ],

  324.                 type_list:[],

  325.             }

  326.         },

  327.         created() {

  328.             window.addEventListener("message", e => {

  329.                 this.editShow = false

  330.                 this.addShow = false

  331.                 this.getData(1)

  332.             });

  333.             this.getAdminUser();

  334.             this.getChannelList();

  335.             this.getProvince();

  336.             this.getConfig()

  337.             this.getData(1)

  338.         },

  339.         watch: {

  340.             "search.province" : function (newVal,oldVal){

  341.                 this.city = []

  342.                 this.area = []

  343.                 this.search.city=""

  344.                 this.search.area=""

  345.                 if (newVal==''){

  346.                     return false;

  347.                 }

  348.                 let row = {

  349.                     "province":newVal

  350.                 }

  351.                 axios.post("/hotel.php/ajax/areaList", row).then((response) => {

  352.                     let data = response.data;

  353.                     if (data.flag) {

  354.                         this.city = data.data;

  355. 

  356.                     } else {

  357.                         this.$message.error(data.msg);

  358.                     }

  359.                 }).catch(function (error) {

  360.                     console.log(error);

  361.                 });

  362.             },

  363.             "search.city" : function (newVal,oldVal){

  364.                 this.area = []

  365.                 this.search.area=""

  366.                 if (newVal == "") {

  367.                     return  false;

  368.                 }

  369.                 let row = {

  370.                     province:this.search.province,

  371.                     city:newVal

  372.                 }

  373.                 axios.post("/hotel.php/ajax/areaList", row).then((response) => {

  374.                     let data = response.data;

  375.                     if (data.flag) {

  376.                         this.area = data.data;

  377.                     } else {

  378.                         this.$message.error(data.msg);

  379.                     }

  380.                 }).catch(function (error) {

  381.                     console.log(error);

  382.                 });

  383. 

  384.             },

  385.         },

  386.         methods: {

  387.             getTypeName(info) {

  388.                 for (let i = 0; i < this.type_list.length; i++) {

  389.                     if (this.type_list[i].id == info.item_type) {

  390.                         return this.type_list[i].name

  391.                     }

  392.                 }

  393.                 return ""

  394.             },

  395.             getConfig(){

  396.                 axios.post("/hotel.php/general/config/getList?key=site.item_category", {}).then((response) => {

  397.                     let data = response.data;

  398.                     this.type_list = data.list;

  399.                 }).catch(function (error) {

  400.                     console.log(error);

  401.                 });

  402.             },

  403.             paymentOrderStatus(info){

  404.                 if (info.payment_order_id ==0) {

  405.                     return  "-"

  406.                 }

  407.                 for (let i = 0; i < this.paymentOrderStatusList.length; i++) {

  408.                     if (this.paymentOrderStatusList[i].id == info.payment_order_status) {

  409.                         return this.paymentOrderStatusList[i].value

  410.                     }

  411.                 }

  412.                 return "-"

  413.             },

  414.             confirmStatusName(info){

  415.                 for (let i = 0; i < this.confirmStatusList.length; i++) {

  416.                     if (this.confirmStatusList[i].id == info.confirm_status) {

  417.                         return this.confirmStatusList[i].name

  418.                     }

  419.                 }

  420.                 return "-"

  421.             },

  422.             getReceiptOrderStatus(info){

  423.                 for (let i = 0; i < this.receiptStatus.length; i++) {

  424.                     if (this.receiptStatus[i].id == info.receipt_order_status) {

  425.                         return this.receiptStatus[i].name

  426.                     }

  427.                 }

  428.                 return "-"

  429.             },

  430.             getChannelList(){

  431.                 axios.post("/hotel.php/cf_channel_info/getList", this.search).then((response) => {

  432.                     console.log(response)

  433.                     let data = response.data;

  434.                     this.channelList = data.list;

  435.                 }).catch(function (error) {

  436.                     console.log(error);

  437.                 });

  438.             },

  439.             getUserName(info) {

  440.                 for (let i = 0; i < this.userList.length; i++) {

  441.                     if (this.userList[i].id == info.create_id) {

  442.                         return this.userList[i].name

  443.                     }

  444.                 }

  445.                 return "-"

  446.             },

  447.             getOrderMainStatus(info){

  448.                 for (let i = 0; i < this.orderMainStatus.length; i++) {

  449.                     if (this.orderMainStatus[i].id == info.order_status) {

  450.                         return this.orderMainStatus[i].name

  451.                     }

  452.                 }

  453.                 return "-"

  454.             },

  455.             getAdminUser() {

  456.                 axios.post("/hotel.php/auth/admin/getList", this.search).then((response) => {

  457.                     this.userList = response.data.list;

  458.                 }).catch(function (error) {

  459.                     console.log(error);

  460.                 });

  461.             },

  462.             getProvince(){

  463.                 axios.post("/hotel.php/ajax/areaList", {}).then((response) => {

  464.                     let data = response.data;

  465.                     if (data.flag) {

  466.                         this.province = data.data;

  467.                     } else {

  468.                         this.$message.error(data.msg);

  469.                     }

  470.                 }).catch(function (error) {

  471.                     console.log(error);

  472.                 });

  473.             },

  474.             sizeChange(pageSize) {

  475.                 this.search.pageSize = pageSize;

  476.                 this.getData(this.search.pageNum)

  477.             },

  478.             edit(id){

  479.                 this.editPageShowUrl="/view/order_main/edit.html?id="+id;

  480.                 this.editShow=true;

  481.             },

  482.             //獲取列表

  483.             getData(page) {

  484.                 this.search.pageNum = page;

  485.                 axios.post("/hotel.php/order_main/getOrderList", this.search).then((response) => {

  486.                     let data = response.data;

  487.                     if (data.flag) {

  488.                         this.tableData = data.data.list;

  489.                         this.total = data.data.total;

  490.                     } else {

  491.                         this.$message.error(response.msg);

  492.                     }

  493.                 }).catch(function (error) {

  494.                     console.log(error);

  495.                 });

  496.             },

  497.         }

  498.     })

  499. </script>

  500. <style lang="scss" scoped>

  501.     .el-table thead {

  502.         background-color: #5a5e66 !important;

  503.     }

  504. 

  505.     .header-search {

  506.         font-size: 14px;

  507.         font-weight: 900;

  508.     }

  509. 

  510.     body {

  511.         background-color: white;

  512.     }

  513. 

  514.     .table {

  515.         width: 100%;

  516.         font-size: 12px;

  517.         margin-top: 12px;

  518.         background-color: white;

  519.     }

  520.     .el-form-item{

  521.         margin-bottom: 5px !important;

  522.     }

  523. </style>

  524. </html>