|
- <!DOCTYPE html>
- <html>
- <head>
- <meta charset="UTF-8">
- <!-- import CSS -->
- <link rel="stylesheet" href="https://unpkg.com/element-ui/lib/theme-chalk/index.css">
- </head>
- <body>
- <div id="app" class="table">
- <div>
- <div class="header-search">
- <span>名称:</span>
- <el-input v-model="search.name" style="width: 120px;" placeholder="请输入内容"></el-input>
- <span>状态</span>
- <el-select v-model="search.status" placeholder="请选择" clearable>
- <el-option
- v-for="item in status"
- :key="item.id"
- :label="item.value"
- :value="item.id">
- </el-option>
- </el-select>
- <span>成本</span>
- <el-input-number v-model="search.startCost" style="width: 170px;" placeholder="请输入内容" clearable></el-input-number>
- ~
- <el-input-number v-model="search.endCost" style="width: 170px;" placeholder="请输入内容" clearable></el-input-number>
- <el-button type="primary" icon="el-icon-search" @click="getData(1)">搜索</el-button>
- <el-button type="primary" icon="el-icon-plus" @click="edit(null)">新增付款单</el-button>
- </div>
-
- <el-table ref="multipleTable" :data="tableData" border tooltip-effect="dark"
- style="font-size:12px;width: 100%;margin-top: 12px">
- <el-table-column prop="create_id" label="创建人" min-width="70" :formatter="getUserName"></el-table-column>
- <el-table-column prop="id" label="付款单号" min-width="50"></el-table-column>
- <el-table-column prop="name" label="付款单名称" min-width="120"></el-table-column>
- <el-table-column prop="status" label="付款单状态" :formatter="getStatusName" min-width="150">
- <template slot-scope="scope">
- <el-radio-group v-model="scope.row.status" size="mini" @change="setStatus(scope.row)">
- <el-radio-button label="0">未付款</el-radio-button>
- <el-radio-button label="1">付款中</el-radio-button>
- <el-radio-button label="2">已付款</el-radio-button>
- </el-radio-group>
- </template>
- </el-table-column>
- <el-table-column prop="order_ids" label="酒店" min-width="130">
- <template slot-scope="scope">
- <div v-html="scope.row.hotel"></div>
- </template>
- </el-table-column>
- <el-table-column prop="total_amount" label="附加项目" min-width="130">
- <template slot-scope="scope">
- <div v-html="scope.row.item"></div>
- </template>
- </el-table-column>
- <el-table-column prop="create_time" label="创建时间" min-width="80"></el-table-column>
- <el-table-column prop="update_time" label="更新时间" min-width="80"></el-table-column>
- <el-table-column label="操作" min-width="180">
- <template slot-scope="scope">
- <el-button-group>
- <el-button type="primary" size="mini" @click="edit(scope.row)" icon="el-icon-edit">编辑</el-button>
- <el-button type="success" size="mini" @click="editOrderDivShow(scope.row)" icon="el-icon-share">订单</el-button>
- <el-button type="danger" size="mini" icon="el-icon-delete" @click="delAll(scope.row.id)">删除</el-button>
- </el-button-group>
- </template>
- </el-table-column>
- </el-table>
- <el-pagination
- :page-size="search.pageSize"
- :pager-count="11"
- layout="total, sizes, prev, pager, next, jumper"
- :total="total"
- :current-page="search.pageNum"
- :page-sizes="[10, 20, 30, 40, 50]"
- @size-change="sizeChange"
- @current-change="getData"
- @prev-click="getData"
- @next-click="getData"
- ></el-pagination>
- </div>
-
-
- <transition name="bounce" v-if="editShow">
- <el-dialog title="付款单详情" :visible.sync="editShow" width="90%" top="15px">
- <el-form ref="form" label-width="100px" style="width: 100%;padding-bottom: 20px">
- <div style="display: flex;width: 100%">
- <el-form-item v-if="editType" label="付款单ID:" style="width: 80%">
- <div v-html="editData.id"></div>
- </el-form-item>
- </div>
- <div>
- <el-form-item label="付款单名称:" style="width: 80%">
- <el-input v-model="editData.name" style="width: 120px;" placeholder="请输入内容"></el-input>
- </el-form-item>
- </div>
- <div>
- <el-form-item v-if="editType" label="付款单状态:" style="width: 80%">
- <el-radio-group v-model="editData.status" size="mini" disabled>
- <el-radio-button label="0">未付款</el-radio-button>
- <el-radio-button label="1">付款中</el-radio-button>
- <el-radio-button label="2">已付款</el-radio-button>
- </el-radio-group>
- </el-form-item>
- </div>
- <div>
- <el-button type="primary" @click="editDoing()" >保存</el-button>
- </div>
- </el-form>
- </el-dialog>
- </transition>
-
-
- <transition name="bounce" v-if="editOrderShow">
- <el-dialog title="详情" :visible.sync="editOrderShow" width="100%" top="15px">
- <el-form ref="form" label-width="100px" style="width: 100%;padding-bottom: 10px">
- <div style="display: flex;width: 100%">
- <el-form-item label="付款单ID:" style="width: 80%">
- <div v-html="editOrder.id"></div>
- </el-form-item>
- <el-form-item label="付款单名称:" style="width: 80%">
- <div v-html="editOrder.name"></div>
- </el-form-item>
- <el-form-item label="付款单状态:" style="width: 80%">
- <el-radio-group v-model="editOrder.status" size="mini" disabled>
- <el-radio-button label="0">未付款</el-radio-button>
- <el-radio-button label="1">付款中</el-radio-button>
- <el-radio-button label="2">已付款</el-radio-button>
- </el-radio-group>
- </el-form-item>
- </div>
- </el-form>
- <div>
- <div class="header-search" style="width: 100%;margin-bottom: 10px">
- <span>主订单ID:</span>
- <el-input v-model="orderMainListSearch.order_id" style="width: 120px;" placeholder="请输入内容"></el-input>
- <span>子订单ID:</span>
- <el-input v-model="orderMainListSearch.sub_order_id" style="width: 120px;" placeholder="请输入内容"></el-input>
- <span>订单类型:</span>
- <el-select v-model="orderMainListSearch.prod_type" style="width: 120px;" placeholder="请选择" >
- <el-option
- v-for="item in prodTypeList"
- :key="item.id"
- :label="item.name"
- :value="item.id">
- </el-option>
- </el-select>
- <span>用户名</span>
- <el-input v-model="orderMainListSearch.customer_name" style="width: 120px;" placeholder="请输入内容" clearable></el-input>
- </div>
- <div class="header-search" style="width: 100%;margin-bottom: 10px">
-
- <span>附加项目</span>
- <el-select v-model="orderMainListSearch.item_id" style="width: 120px;" placeholder="请选择" clearable>
- <el-option
- v-for="item in itemList"
- :key="item.id"
- :label="item.name"
- :value="item.id">
- </el-option>
- </el-select>
- <span>酒店</span>
- <el-select v-model="orderMainListSearch.hotel_id" style="width: 120px;" placeholder="请选择" clearable>
- <el-option
- v-for="item in hotelList"
- :key="item.id"
- :label="item.name"
- :value="item.id">
- </el-option>
- </el-select>
- <span>确认单状态:</span>
- <el-select v-model="orderMainListSearch.confirm_status" style="width: 120px;" placeholder="请选择" clearable>
- <el-option
- v-for="item in confirmStatusList"
- :key="item.id"
- :label="item.name"
- :value="item.id">
- </el-option>
- </el-select>
- <span>付款单状态</span>
- <el-select v-model="orderMainListSearch.inPayment" style="width: 120px;" placeholder="请选择" clearable>
- <el-option
- v-for="item in inPaymentList"
- :key="item.id"
- :label="item.name"
- :value="item.id">
- </el-option>
- </el-select>
- <span>供应商:</span>
- <el-select v-model="orderMainListSearch.supplier_id" style="width: 120px;" placeholder="请选择" clearable>
- <el-option
- v-for="item in supplierList"
- :key="item.id"
- :label="item.name"
- :value="item.id">
- </el-option>
- </el-select>
- </div>
- <div class="header-search" style="width: 100%;margin-bottom: 10px">
- <span>成本</span>
- <el-input-number v-model="orderMainListSearch.startMoney" style="width: 180px;" placeholder="请输入内容" clearable></el-input-number>
- ~
- <el-input-number v-model="orderMainListSearch.endMoney" style="width: 180px;" placeholder="请输入内容" clearable></el-input-number>
- <span>时间</span>
- <el-date-picker
- style="width: 180px;"
- v-model="orderMainListSearch.startTime"
- type="date"
- value-format="yyyy-MM-dd"
- :picker-options="pickerOptions"
- placeholder="选择日期">
- </el-date-picker>
- ~
- <el-date-picker
- style="width: 180px;"
- v-model="orderMainListSearch.endTime"
- value-format="yyyy-MM-dd"
- type="date"
- :picker-options="pickerOptions"
- placeholder="选择日期">
- </el-date-picker>
- <el-button type="primary" icon="el-icon-search" @click="getOrderMainData(1)">搜索</el-button>
- </div>
- <div>
- <el-table ref="multipleTable" :data="orderMainList" border tooltip-effect="dark" style="font-size:12px;width: 100%;margin-top: 12px" @selection-change="handleSelectionChange">
- <el-table-column type="selection" width="30" :selectable="checkSelect"></el-table-column>
- <el-table-column prop="order_id" label="主订单ID" min-width="20" ></el-table-column>
- <el-table-column prop="id" label="子订单ID" min-width="20" ></el-table-column>
- <el-table-column label="订单类型" min-width="30" :formatter="getProdTypeName" ></el-table-column>
- <el-table-column prop="supplier_name" label="供应商" min-width="40" ></el-table-column>
- <el-table-column prop="trade_order_number" label="第三方订单号" min-width="40" ></el-table-column>
- <el-table-column prop="hotel_name" label="酒店/项目类型" min-width="80" :formatter="getTypeName"></el-table-column>
- <el-table-column prop="room_name" label="房型/附加项目" min-width="80" ></el-table-column>
- <el-table-column prop="plan_name" label="价格方案/计价单位" min-width="40" ></el-table-column>
- <el-table-column prop="check_in_date" label="时间" min-width="40" >
- <template slot-scope="scope">
- <div v-html="scope.row.check_in_date"></div>
- <div v-html="scope.row.check_out_date"></div>
- </template>
- </el-table-column>
- <el-table-column prop="count" label="数量" min-width="20" ></el-table-column>
- <el-table-column prop="customer_name" label="出游人姓名" min-width="40" ></el-table-column>
- <el-table-column prop="total_cost" label="总成本" min-width="30" ></el-table-column>
- <el-table-column label="发单状态" min-width="30" :formatter="confirmStatusName"></el-table-column>
- <el-table-column prop="create_time" label="子订单生成时间" min-width="60" ></el-table-column>
- <el-table-column prop="payment_order_name" label="付款单" min-width="40" >
- <template slot-scope="scope">
- <div v-html="scope.row.payment_order_id"></div>
- <div v-html="scope.row.payment_order_name"></div>
- </template>
- </el-table-column>
- <el-table-column label="操作" >
- <template slot-scope="scope">
- <el-button-group>
- <el-button type="primary" size="mini" v-if="scope.row.payment_order_id==0 && editOrder.status==0" @click="addOrderInfo(scope.row)" icon="el-icon-edit">添加</el-button>
- <el-button type="danger" size="mini" v-if="scope.row.payment_order_id==editOrder.id && editOrder.status==0" @click="removeOrderMain(scope.row)" icon="el-icon-delete">移除</el-button>
- </el-button-group>
- </template>
- </el-table-column>
-
- </el-table>
- <div style="margin-top: 5px">
- <el-button type="primary" icon="el-icon-circle-plus" @click="addOrderAll()" :disabled="multipleSelection.length==0">添加到采购单</el-button>
- </div>
- <el-pagination
- :page-size="orderMainListSearch.pageSize"
- :pager-count="11"
- layout="total, sizes, prev, pager, next, jumper"
- :total="orderMainTotal"
- :current-page="orderMainListSearch.pageNum"
- :page-sizes="[10, 20, 30, 40, 50]"
- @size-change="sizeOrderMainChange"
- @current-change="getOrderMainData"
- @prev-click="getOrderMainData"
- @next-click="getOrderMainData"
- ></el-pagination>
- </div>
- </div>
- </el-dialog>
- </transition>
- </div>
- </body>
- <!-- import Vue before Element -->
- <script src="/assets/js/vue/vue.js"></script>
- <!-- import JavaScript -->
- <script src="/assets/js/vue/index.js"></script>
- <script src="https://unpkg.com/axios/dist/axios.min.js"></script>
- <script>
- new Vue({
- el: '#app',
- data: function () {
- return {
- search: {
- name: "",
- status: "all",
- startCost:"",
- endCost:"",
- pageSize: 10,
- pageNum: 1
- },
- status: [
- {"id": "all", "value": "请选择"},
- {"id": 0, 'value': "未付款"},
- {"id": 1, 'value': "付款中"},
- {"id": 2, 'value': "已付款"}
- ],
- total: 0,
- tableData: [],
- userList: [],
- info: {
- id: null,
- name: "",
- status: 0,
- list: []
- },
- editShow: false,
- editType: false,
- editData: {},
- editOrderShow:false,
- editOrder:{},
- orderMainListSearch:{
- "payment_order_id":"",
- "order_id":"",
- "sub_order_id":"",
- "prod_type":"hotel",
- "supplier_id":"",
- "inPayment":"",
- "confirm_status":"",
- "customer_name":"",
- "startMoney":"",
- "endMoney":"",
- "startTime":"",
- "endTime":"",
- "pageNum":1,
- "pageSize":10,
- "item_id":"",
- "hotel_id":"",
- "room_id":"",
- "plan_id":""
- },
- orderMainTotal:0,
- orderMainList:[],
- inPaymentList:[
- {id:1,name:"在此付款单中"},
- {id:2,name:"不在此付款单中"},
- {id:3,name:"不在任何付款单中"}
- ],
- //1、未发单/ 2已发单、3已确认、4已取消
- confirmStatusList:[
- {id:1,name:"未发单"},
- {id:2,name:"已发单"},
- {id:3,name:"已确认"},
- {id:4,name:"已取消"}
- ],
- prodTypeList:[
- {id:"hotel",name:"酒店"},
- {id:"item",name:"附加项目"}
- ],
- supplierList:[],
- multipleSelection: [],
- hotelList:[],
- itemList:[],
- type_list:[],
- pickerOptions: {
- shortcuts: [{
- text: '今天',
- onClick(picker) {
- picker.$emit('pick', new Date());
- }
- }, {
- text: '昨天',
- onClick(picker) {
- const date = new Date();
- date.setTime(date.getTime() - 3600 * 1000 * 24);
- picker.$emit('pick', date);
- }
- }, {
- text: '一周前',
- onClick(picker) {
- const date = new Date();
- date.setTime(date.getTime() - 3600 * 1000 * 24 * 7);
- picker.$emit('pick', date);
- }
- }]
- },
- }
- },
- created() {
- this.getAdminUser();
- this.getSupplierList();
- this.getData(1)
- this.getHotelList()
- this.getConfig()
- this.getItemList()
-
- },
- watch: {
- "orderMainListSearch.prod_type" : function (newVal,oldVal){
- this.getOrderMainData(1)
- }
- },
- methods: {
- getTypeName(info) {
- for (let i = 0; i < this.type_list.length; i++) {
- if (this.type_list[i].id == info.hotel_name) {
- return this.type_list[i].name
- }
- }
- return info.hotel_name
- },
- getConfig(){
- axios.post("/hotel.php/general/config/getList?key=site.item_category", {}).then((response) => {
- let data = response.data;
- this.type_list = data.list;
- }).catch(function (error) {
- console.log(error);
- });
- },
- getProdTypeName(info){
- for (let i = 0; i < this.prodTypeList.length; i++) {
- if (this.prodTypeList[i].id == info.prod_type) {
- return this.prodTypeList[i].name
- }
- }
- return "-"
- },
- getHotelList(){
- axios.post("/hotel.php/cf_hotel_info/getHotelList", this.search).then((response) => {
- console.log(response)
- let data = response.data;
- this.hotelList = data.list;
- }).catch(function (error) {
- console.log(error);
- });
- },
- getItemList(){
- axios.post("/hotel.php/cf_item/getList", this.search).then((response) => {
- console.log(response)
- let data = response.data;
- this.itemList = data.list;
- }).catch(function (error) {
- console.log(error);
- });
- },
- checkSelect(row,index){
- if (this.editOrder.status != 0) {
- return false;
- }
- if (row.payment_order_id ==0) {
- return true;
- }
- return false;
- },
- handleSelectionChange(val) {
- this.multipleSelection = val;
- },
- getSupplierList(){
- axios.post("/hotel.php/cf_suplier_info/getList", this.search).then((response) => {
- console.log(response)
- let data = response.data;
- this.supplierList = data.list;
- }).catch(function (error) {
- console.log(error);
- });
- },
- getStatusName(info) {
- for (let i = 0; i < this.status.length; i++) {
- if (this.status[i].id == info.status) {
- return this.status[i].value
- }
- }
- return "-"
- },
- getUserName(info) {
- for (let i = 0; i < this.userList.length; i++) {
- if (this.userList[i].id == info.create_id) {
- return this.userList[i].name
- }
- }
- return "-"
- },
- confirmStatusName(info){
- for (let i = 0; i < this.confirmStatusList.length; i++) {
- if (this.confirmStatusList[i].id == info.confirm_status) {
- return this.confirmStatusList[i].name
- }
- }
- return "-"
- },
- sizeChange(pageSize) {
- this.search.pageSize = pageSize;
- this.getData(this.search.pageNum)
- },
- sizeOrderMainChange(pageSize) {
- this.orderMainListSearch.pageSize = pageSize;
- this.getOrderMainData(this.orderMainListSearch.pageNum)
- },
- //獲取列表
- getData(page) {
- this.search.pageNum = page;
- axios.post("/hotel.php/payment_order/getList", this.search).then((response) => {
- let data = response.data;
- console.log(this.tableData);
- if (data.flag) {
- this.tableData = data.data.list;
- this.total = data.data.total;
- console.log(this.tableData);
- } else {
- this.$message.error(response.msg);
- }
- }).catch(function (error) {
- console.log(error);
- });
- },
- getAdminUser() {
- axios.post("/hotel.php/auth/admin/getList", this.search).then((response) => {
- this.userList = response.data.list;
- }).catch(function (error) {
- console.log(error);
- });
- },
- edit(info) {
- if (info == null) {
- this.editType = false;
- this.editData = {
- name: ""
- }
- } else {
- this.editType = true;
- this.editData = {
- id:info.id,
- name: info.name,
- status:info.status
- }
- }
- this.editShow = true;
- },
- editDoing(){
- axios.post("/hotel.php/payment_order/save", this.editData).then( (response)=> {
- let data = response.data;
- console.log(this.tableData);
- if (data.flag) {
- this.$message.success("保存成功");
- this.editShow = false;
- this.getData(1);
- } else {
- this.$message.error(data.msg);
- }
- }).catch(function (error) {
- this.$message.error("保存失败");
- console.log(error);
- });
- },
- setStatus(info){
- this.$confirm('确定修改状态?', '提示', {
- confirmButtonText: '确定',
- cancelButtonText: '取消',
- type: 'warning'
- }).then(() => {
- axios.post("/hotel.php/payment_order/setStatus", info).then( (response)=> {
- let data = response.data;
- if (data.flag) {
- this.$message.success("设置成功");
- } else {
- this.$message.error(data.msg);
- this.getData(this.search.pageNum)
- }
- }).catch(function (error) {
- this.$message.error("保存失败");
- console.log(error);
- this.getData(this.search.pageNum)
- });
- }).catch(() => {
- this.$message.success("已取消");
- this.getData(this.search.pageNum)
- })
-
- },
- editOrderDivShow(info){
- console.log(info);
- this.editOrder = info;
- this.orderMainListSearch.payment_order_id = info.id;
- this.orderMainList=[];
- this.getOrderMainData(1);
- this.editOrderShow = true;
- },
- getOrderMainData(page){
- this.orderMainListSearch.pageNum = page;
- axios.post("/hotel.php/payment_order/getSubOrderList", this.orderMainListSearch).then((response) => {
- let data = response.data;
- console.log(this.tableData);
- if (data.flag) {
- this.orderMainList = data.data.list;
- this.orderMainTotal = data.data.total;
- console.log(this.orderMainList);
- } else {
- this.$message.error(data.msg);
- }
- }).catch(function (error) {
- console.log(error);
- });
- },
- addOrderInfo(info){
- let param = {
- hotel_id:[],
- item_id:[],
- id:this.editOrder.id
- }
- if (info.prod_type=='hotel') {
- param.hotel_id.push(info.id)
- }else{
- param.item_id.push(info.id)
- }
- this.addOrderMain(param)
- },
- addOrderMain(param){
- axios.post("/hotel.php/payment_order/addOrderMain", param).then((response) => {
- let data = response.data;
- if (data.flag) {
- this.$message.success("添加成功");
- this.getOrderMainData(this.orderMainListSearch.pageNum)
- this.getData(this.search.pageNum)
- } else {
- this.$message.error(data.msg);
- }
- }).catch(function (error) {
- console.log(error);
- });
- },
- addOrderAll(){
- let param = {
- hotel_id:[],
- item_id:[],
- id:this.editOrder.id
- }
- let length = this.multipleSelection.length;
- for (var k = 0; k < length; k++) {
- if (this.multipleSelection[k].prod_type=='hotel'){
- param.hotel_id.push(this.multipleSelection[k].id)
- }else{
- param.item_id.push(this.multipleSelection[k].id)
- }
- }
- this.addOrderMain(param);
- },
- removeOrderMain(info){
- let param = {
- hotel_id:[],
- item_id:[],
- id:this.editOrder.id
- }
- if (info.prod_type=='hotel') {
- param.hotel_id.push(info.id)
- }else{
- param.item_id.push(info.id)
- }
- axios.post("/hotel.php/payment_order/removeOrderMain", param).then((response) => {
- let data = response.data;
- if (data.flag) {
- this.$message.success("移除成功");
- this.getOrderMainData(this.orderMainListSearch.pageNum)
- this.getData(this.search.pageNum)
- } else {
- this.$message.error(data.msg);
- }
- }).catch(function (error) {
- console.log(error);
- });
- },
- delAll(id){
- let param = {
- id:id
- }
- this.$confirm('确定删除采购单?', '提示', {
- confirmButtonText: '确定',
- cancelButtonText: '取消',
- type: 'warning'
- }).then(() => {
- axios.post("/hotel.php/payment_order/delAll", param).then((response) => {
- let data = response.data;
- if (data.flag) {
- this.$message.success("移除成功");
- this.getData(this.search.pageNum)
- } else {
- this.$message.error(data.msg);
- }
- }).catch(function (error) {
- console.log(error);
- });
- }).catch(() => {
- this.$message.success("已取消");
- });
- }
-
- }
- })
- </script>
- <style lang="scss" scoped>
- .el-table thead {
- background-color: #5a5e66 !important;
- }
-
- .header-search {
- font-size: 14px;
- font-weight: 900;
- }
-
- body {
- background-color: white;
- }
-
- .table {
- width: 100%;
- font-size: 12px;
- margin-top: 12px;
- background-color: white;
- }
- .el-form-item{
- margin-bottom: 5px !important;
- }
- </style>
- </html>
|