yunyubang-supplier-web/src/views/order/index.vue

<template>
  <div>
    <div >
      <div ref="lxHeader">
        <LxHeader icon="md-apps" text="订单管理" style="margin-bottom: 10px; border: 0px; margin-top: 15px">
          <div slot="content"></div>
          <slot>
            <div style="display: flex;align-items: center;">
<!--              <div style="margin-right: 10px;">是否包含历史记录</div>

              <el-switch v-model="select.show_history" :active-value="1" :inactive-value="0" style="margin-right: 10px;"></el-switch>
 -->
              <div style="margin-right: 10px;">订单状态</div>

              <el-select size="mini" placeholder="请选择状态" v-model="select.state" style="width: 140px;margin-right: 10px;">
                <el-option v-for="(item,index) in status" :key="index" :label="item.label" :value="item.value">
                </el-option>
              </el-select>

              <div style="margin-right: 10px;">关键词</div>

              <el-input size="mini" placeholder="请输入关键词" v-model="select.keyword" style="width: 160px;margin-right: 10px;"></el-input>

              <el-button size="medium" type="primary" @click="getList" style="margin-left: 10px">查询</el-button>
            </div>
          </slot>
        </LxHeader>
      </div>

    </div>

    <xy-table
      :table-item="table"
      :list="data"
      :total="total"
      @pageSizeChange="e => {select.rows = e;select.page = 1;getList()}"
      @pageIndexChange="e => {select.page = e;getList()}">
      <template v-slot:btns><div></div></template>
    </xy-table>

    <operate ref="operate" @refresh="getList"></operate>

    <el-drawer
      size="38%"
      title="日志"
      :visible.sync="isShowDraw"
      direction="rtl">
      <xy-table style="margin: 20px 0" :is-page="false" :list="logs" :table-item="logTable">
        <template v-slot:btns><div></div></template>
      </xy-table>
    </el-drawer>
  </div>
</template>

<script>
import operate from '@/views/order/component/operate.vue'
import LxHeader from '@/components/LxHeader/index.vue'

import {getList,log} from '@/api/order'
export default {
  components: {
    LxHeader,
    operate
  },
  data() {
    return {
      isShowDraw:false,
      isShowOperate:false,
      select:{
        page:1,
        rows:10,
        show_history:0,
        state:'',
        keyword:'',
        not_state:["pending"],
        sort_name:"updated_at",
        sort_type:"desc"
      },
      status:[
        {
          label:'全部',
          value:''
        },
        // {
        //   label:'待处理',
        //   value:'pending'
        // },
        {
          label:'已分发',
          value:'assigned'
        },
        {
          label:'已退回',
          value:'returned'
        },
        {
          label:'已接收',
          value:'accepted'
        },
        {
          label:'确认有效',
          value:'confirmed'
        },
        {
          label:'用户申请取消',
          value:'canceled_by_user'
        },
        {
          label:'商家标注无效单',
          value:'canceled_by_merchant'
        },
        {
          label:'已完成',
          value:'finished'
        },
        {
          label:'已取消',
          value:'canceled'
        },
      ],
      total:0,
      data:[],
      logs:[],
      logTable:[
        {
          label:'操作类型',
          prop:'operate_name',
          width:120,
          sortable: false
        },
        {
          label:'操作人',
          prop:'operator.username',
          width: 140,
          sortable: false
        },
        {
          label:'操作时间',
          prop:'created_at',
          width: 200,
          sortable: false
        },
        {
          label:'备注',
          prop:'remark',
          sortable: false
        }
      ],
      table:[
        {
          label:'订单名称',
          sortable:false,
          prop:'order.order_name',
          width:180,
          align:'left'
        },
        {
          label:'客户姓名',
          sortable:false,
          prop:'member_name',
          width:140
        },
        {
          label:'客户电话',
          sortable:false,
          prop:'member_phone',
          width: 180
        },
        {
          label:'区域',
          sortable:false,
          prop:'member.area',
          width: 160
        },
        {
          label:'预产期',
          sortable:false,
          prop:'member_due_date',
          width: 160
        },
        {
          label:'产品类型',
          sortable:false,
          prop:'product_type.name',
          width: 140
        },
        {
          prop:'order.serial',
          label:'订单编号',
          width:180,
          sortable:false,
        },
        {
          prop:'order.created_at',
          label:'订单创建时间',
          width:180,
          sortable:false,
        },
        {
          prop:'updated_at',
          label:'订单更新时间',
          width:180,
          sortable:false,
        },
        {
          label:'状态',
          sortable:false,
          prop:'state_name',
          width:120
        },
        {
          label:'操作',
          sortable:false,
          align:'left',
          fixed:'right',
          minWidth:200,
          customFn:row => {
            const _this = this
            let map = new Map([
              ['follow_by_merchant','el-icon-s-comment'],
              ['accept_by_merchant','el-icon-s-promotion'],
              ['return_by_merchant','el-icon-refresh-left'],
              // ['confirm_by_merchant','el-icon-check'],
              ['mark_cancel_by_merchant','el-icon-circle-close'],
              ['finish_by_merchant','el-icon-edit-outline']
            ])
            let btns = []
            if(typeof row?.merchant_actions == 'object'){
              for(let key in row.merchant_actions){
                if(key!="confirm_by_merchant"){
                  btns.push(
                    <el-button
                      size="mini"
                      type="primary"
                      icon={map.get(key)}
                      plain
                      style={
                        {
                          'margin':'0 6px 4px 0'
                        }
                      }
                      on={
                        {
                          ['click']:e => {
                            _this.$refs['operate'].form.item_id = row.id
                            _this.$refs['operate'].form.action = key
                            _this.$refs['operate'].isShow = true
                            console.log(key)
                          }
                        }
                      }>{row.merchant_actions[key]}</el-button>
                  )
                }

              }
            }
            btns.push(
              <el-button
                size="mini"
                type="primary"
                icon="el-icon-document-copy"
                plain
                style={
                  {
                    'margin':'0 6px 4px 0'
                  }
                }
                on={
                  {
                    ['click']:e => {
                      log({
                        item_id:row.id
                      }).then(res => {
                        this.logs = res.data
                      })
                      this.isShowDraw = true
                    }
                  }
                }>日志</el-button>
            )
            return (
              <div style={
                {
                  'display':'flex',
                  'flex-wrap':'wrap'
                }
              }>
                { btns }
              </div>
            )
          }
        }
      ]
    }
  },
  methods: {
    async getList(){
      let res = await getList(this.select)
      console.log(res)
      this.data = res.data
      this.total = res.total
    }
  },
  computed: {},
  mounted() {
    this.getList()
  }
}
</script>

<style scoped lang="scss">
//::v-deep .el-button + .el-button{
//  margin-left: 0 !important;
//}
::v-deep .el-button{
  padding: 5px 8px !important;
}
</style>