duosanbian_yos/src/SManagement/user/pay-orders/index.vue

<template>
  <div>
    <div class="container normal-panel normal-margin  flex-between">
      <add @onSuccess="onSuccess"></add>
      <payment ref="payment" ></payment>
    </div>
    <div class="container normal-panel">
      <el-input style="width:200px;" placeholder="搜索" :suffix-icon="param.content.where.condition?param.content.where.condition.length > 0?'':'':'el-icon-search'"
                v-model="param.content.where.condition" @keyup.native.enter="listData(param.content.pageNumber = 1)" @clear="listData(param.content.pageNumber = 1)"
                size="small" class="input-with-select inline-16 layout_search__panel" clearable>
      </el-input>
      <tableLayout style="margin-top: 20px" :layout="tablecols" :data="list" :opwidth="200" :custom="true"  height="calc(100vh - 340px)" fixedName="operation">
        <template v-slot:customcol="scope">
          <span v-if="scope.column.columnname === 'ispaid'" >
            <span v-if="scope.column.data[scope.column.columnname] == '0'" style="color: #4f7bfd">未付费</span>
            <span v-else>已付费</span>
          </span>
          <span v-else-if="scope.column.columnname === 'amount'" >
            <span style="color: red">{{tool.formatAmount(scope.column.data[scope.column.columnname],2)}}</span>
          </span>
          <span v-else-if="scope.column.columnname === 'operation'" ></span>
          <p v-else>{{scope.column.data[scope.column.columnname] || '--'}}</p>
        </template>
        <template v-slot:opreation="scope">
          <el-button type="text" size="mini" class="inline-16" @click="$router.push({path:'/pay_orders_detail',query:{id:scope.data.sys_payorderid}})">详 情</el-button>
          <el-popconfirm
              title="确定删除该订单吗？"
              @confirm="onDel(scope.data)"
          >
            <el-button slot="reference" type="text" size="mini" v-if="scope.data.ispaid == '0'" >删 除</el-button>
          </el-popconfirm>
        </template>
      </tableLayout>
      <div class="container normal-panel" style="text-align:right">
        <el-pagination
            background
            @size-change="handleSizeChange"
            @current-change="handleCurrentChange"
            :current-page="currentPage"
            :page-sizes="[20, 50, 100, 200]"
            :page-size="20"
            layout="total,sizes, prev, pager, next, jumper"
            :total="total">
        </el-pagination>
      </div>
    </div>
  </div>
</template>

<script>
import tableLayout from '@/components/table/index2.vue'
import add from './modules/add.vue'
import payment from './modules/payment'
export default {
  name: "index",
  data() {
    return {
      param:{
        "classname": "system.payorder.payorder",
        "method": "list",
        "content": {
          "pageNumber": 1,
          "pageSize": 20,
          "where": {
            "condition": ""
          }
        },
      },
      tablecols:[],
      list:[],
      total:0,
      currentPage:0,
    }
  },
  components:{tableLayout,add,payment},
  methods: {
    async listData(){
      const res = await this.$api.requested(this.param)
      console.log(res,'订单列表')
      this.list = res.data
      this.total = res.total
      this.currentPage = res.pageNumber
    },
    onSuccess(id,orderno){
      this.listData()
      let that = this
      this.$refs.payment.dialogVisible = true
      this.$refs.payment.queryAccount(id)
      this.$refs.payment.queryData(id)
      this.$refs.payment.queryCode(orderno)
      this.payChangeFun(function(a) {
        a.result  = () => {
          that.$refs.payment.dialogVisible = false
          that.listData()
        }
      })
    },
    handleSizeChange(val) {
      // console.log(`每页 ${val} 条`);
      this.param.content.pageSize = val
      this.listData()
    },
    handleCurrentChange(val) {
      // console.log(`当前页: ${val}`);
      this.param.content.pageNumber = val
      this.listData()
    },
    async onDel(val){
      const res = await this.$api.requested({
        "classname": "system.payorder.payorder",
        "method": "delete",
        "content": {
          "sys_payorderid": val.sys_payorderid
        },
      })
      this.tool.showMessage(res,()=>{
        this.listData()
      })

    }
  },
  mounted() {
    this.listData()
  },
  created() {
    this.tablecols = this.tool.tabelCol(this.$route.name).payOrdersTable.tablecols
  }
}
</script>

<style scoped>

</style>