water_dealer-agent/src/views/sales/Offline.vue

<template>
  <!-- 线下出货列表 -->
  <page-header-wrapper>
    <template v-slot:content>
      <div class="table-page-search-wrapper">
        <a-form layout="inline">
          <a-row :gutter="48">
            <a-col :md="8" :sm="24">
              <a-form-item label="手机号码">
                <a-input v-model="queryParam.mobile" placeholder="购买人手机号" />
              </a-form-item>
            </a-col>
            <a-col :md="8" :sm="24">
              <a-form-item label="真实姓名">
                <a-input v-model="queryParam.name" placeholder="购买人真实姓名" />
              </a-form-item>
            </a-col>
            <a-col :md="8" :sm="24">
              <a-form-item label="详细地址">
                <a-input v-model="queryParam.address" placeholder="购买人收货地址" />
              </a-form-item>
            </a-col>

            <!-- <a-col :md="8" :sm="24">
              <a-form-item label="发货方式" has-feedback>
                <a-select v-model="queryParam.channel" placeholder="发货方式">
                  <a-select-option v-for="item in channels" :key="item.value" :value="item.value">{{ item.text }}</a-select-option>
                </a-select>
              </a-form-item>
            </a-col>
            <a-col :md="8" :sm="24">
              <a-form-item label="快递类型" has-feedback>
                <a-select v-model="queryParam.express" placeholder="快递类型">
                  <a-select-option v-for="(item, key, index) in expresses" :key="index" :value="key">{{ item }}</a-select-option>
                </a-select>
              </a-form-item>
            </a-col> -->
            <a-col :md="8" :sm="24">
              <a-button type="primary" @click="search"><a-icon type="search" />搜索</a-button>
              <a-button class="ml8" t ype="primary" @click="CreateOffline"><a-icon type="plus" />新增线下出货</a-button>
              <a-button class="ml8" @click="resetSearch"><a-icon type="undo" />重置</a-button>
            </a-col>
          </a-row>
        </a-form>
      </div>
    </template>

    <!-- 列表 -->
    <a-card :bordered="false">
      <s-table
        ref="table"
        :columns="columns"
        :data="loadData"
        :rowKey="(row) => row.offline_id"
        showPagination="auto"
        bordered
        size="default"
      >
        <div slot="name" slot-scope="text, record">
          <div>{{ record.name }} {{ record.mobile?'('+record.mobile+')':'--' }}</div>
          <div>{{ record.address || '--' }}</div>
        </div>
        <div slot="number" slot-scope="text, record">{{ record.number }}件</div>
        <a slot="total" slot-scope="text, record">￥{{ record.total || '0.00' }}</a>
        <div slot="channel" slot-scope="text, record">{{ record.channel == 'express' ?'快递':'自提' }}</div>
        <div slot="express" slot-scope="text, record">
          <div v-if="record.channel === 'express'">
            {{ record.express.name || '-' }} <div>{{ record.express.express_no || '-' }}</div>
          </div>
          <div v-else>发货时间：{{ record.deliver_at }}</div>
        </div>
      </s-table>
    </a-card>
  </page-header-wrapper>
</template>

<script>
import { STable, UserInfo } from '@/components'
import DeriveButton from '@/components/OrderDetailInfo/DeriveButton'
import moment from 'moment'
import Info from '@/views/home/components/Info'
import { getMiddlesStockOffline, getMiddlesStockOfflineInit } from '@/api/stock'
import AddOffline from './widgets/AddOffline.vue'

// 列表规格
const columns = [
{
    title: 'ID',
    dataIndex: 'offline_id',
    align: 'center',
    width: 100
  },
  {
    title: '发货数量',
    scopedSlots: { customRender: 'number' },
    align: 'center',
    width: 120
  },
  {
    title: '金额',
    scopedSlots: { customRender: 'total' },
    align: 'center',
    width: 120
  },
  {
    title: '发货方式',
    scopedSlots: { customRender: 'channel' },
    align: 'center',
    width: 120
  },
  {
    title: '收货人',
    scopedSlots: { customRender: 'name' },
    align: 'center'
  },
  {
    title: '快递信息',
    scopedSlots: { customRender: 'express' },
    align: 'center'
  },
  {
    title: '创建时间',
    dataIndex: 'created_at',
    align: 'center'
  }
  // {
  //   title: '操作',
  //   scopedSlots: { customRender: 'actions' },
  //   align: 'center',
  //   width: 160,
  //   fixed: 'right'
  // }
]

export default {
  name: 'Online',
  components: {
    STable,
    UserInfo,
    Info,
    DeriveButton
  },
  data () {
    return {
      exports_can: false,
      columns,
      searchType: false, // 展示全部的搜索
      expresses: [], // 快递列表
      channels: [], // 返货方式

      queryParam: {
        name: undefined,
        mobile: undefined,
        channel: undefined,
        address: undefined,
        express: undefined
      },
      listCount: 0,
      loadData: (parameter) => {
        const requestParameters = Object.assign({}, parameter, this.queryParam)
        return getMiddlesStockOffline(requestParameters)
      }
    }
  },
  watch: {
    $route (to, from) {
      if (to.name === 'SalesOffline' && (
        from.name === 'Home' ||
        from.name === 'cityExperienceOfficer' ||
        from.name === 'StockOut' ||
        from.name === 'StockIn' ||
        from.name === 'DealerIn' ||
        from.name === 'DealerOut' ||
        from.name === 'UserIndex' ||
        from.name === 'SalesOnline' ||
        from.name === 'SalesOffline' ||
        from.name === 'PermissionsIndex' ||
        from.name === 'SalesStock')
      ) {
        this.$refs.table.loadData()
      }
    }
  },
  created () {
    this.init()
  },
  methods: {
    moment,
    // 获取检索的基本样式
    init () {
      getMiddlesStockOfflineInit().then(res => {
        this.channels = res.channel
        this.expresses = res.expresses
      })
    },
    // 搜索列表
    search () {
      this.$refs.table.refresh(true) // 重置接口且刷先到第一页
    },
    // 重置搜索列表
    resetSearch () {
      this.queryParam = {
        name: undefined,
        mobile: undefined,
        channel: undefined,
        address: undefined,
        express: undefined
      }
      this.$refs.table.refresh(true) // 重置接口且刷先到第一页
    },
    // 创建线下出货
    CreateOffline () {
      const success = {
        title: '新增线下出货',
        width: 600,
        maskClosable: true,
        closable: true,
        okText: '确认新增',
        cancelText: '取消'
      }
      const offline = {
        channels: this.channels,
        expresses: this.expresses
      }
      console.log(offline)
      this.$dialog(
        AddOffline,
        {
          offline,
          on: {
            ok: () => {
              this.$refs.table.loadData()
            }
          }
        },
        success
      )
    }
  }
}
</script>

<style lang="less" scoped>
.ml8 {
  margin-left: 8px;
}
</style>