web-admin/src/components/orderParts/parts/detail-3.vue

<template>
  <div id="card-1">
    <el-row>
      <el-col :span="24" class="main" v-loading="loadings" element-loading-text="拼命加载中" element-loading-spinner="el-icon-loading">
        <el-col :span="24" v-if="num == '1'">
          <el-col :span="24" class="one">
            <search-1
              :form="searchForm"
              :shopList="shopList"
              :goodsList="goodsList"
              @onSubmit="search"
              @querySearch="querySearch"
              @toReset="toClose"
              @goodsSearch="goodsSearch"
            >
            </search-1>
          </el-col>
          <el-col :span="24" class="one">
            <el-button type="primary" size="mini" @click="toDeliver()">生成发货清单</el-button>
            <p>(发货清单里不显示售后的订单)</p>
          </el-col>
          <data-table
            :select="true"
            :selected="selected"
            @handleSelect="handleSelect"
            :fields="fields"
            :opera="opera"
            @query="search"
            :data="list"
            :total="total"
            @detail="toDetail"
            @sales="toSales"
          >
            <template #is_afterSale="{ row }">
              <span :style="{ color: row.is_afterSale === true ? 'red' : '' }"> {{ row.is_afterSale === true ? '该订单有商品申请售后' : '未申请售后' }}</span>
            </template>
          </data-table>
        </el-col>
      </el-col>
    </el-row>
  </div>
</template>

<script>
const _ = require('lodash');

import { mapState, createNamespacedHelpers } from 'vuex';
const { mapActions } = createNamespacedHelpers('groupOrder');
const { mapActions: shop } = createNamespacedHelpers('shop');
const { mapActions: goods } = createNamespacedHelpers('goods');
export default {
  name: 'card-1',
  props: { statusList: { type: Array } },
  components: { search1: () => import('../search-3.vue') },
  data: function () {
    return {
      loadings: true,
      num: '1',
      searchForm: {},
      list: [],
      total: 0,
      opera: [
        { label: '详情', method: 'detail' },
        { label: '售后', method: 'sales', type: 'danger' },
      ],
      fields: [
        { label: '订单号', model: 'no', showTip: false },
        { label: '下单时间', model: 'buy_time' },
        { label: '顾客', model: 'customer' },
        { label: '收货人', model: 'address', showTip: false },
        { label: '商品名称', model: 'goods' },
        { label: '规格名称', model: 'spec' },
        { label: '支付金额', model: 'pay' },
        { label: '购买数量', model: 'num' },
        { label: '是否售后', model: 'is_afterSale', format: (i) => (i === true ? '该订单有商品申请售后' : '未申请售后'), custom: true },
      ],
      // 多选值
      selected: [],
      // 店铺列表
      shopList: [],
      // 商品列表
      goodsList: [],
      // 发货清单
      deliverList: [],
      deliver: '0',
    };
  },
  async created() {
    await this.search();
  },
  methods: {
    ...shop({ shopQuery: 'query' }),
    ...goods({ goodsQuery: 'query' }),
    ...mapActions(['query', 'fetch', 'create', 'update', 'delete']),
    // 查询
    async search({ skip = 0, limit = this.$limit, ...info } = {}) {
      let condition = _.cloneDeep(this.searchForm);
      if (condition.buy_time) {
        condition[`buy_time@start`] = _.head(condition.buy_time);
        condition[`buy_time@end`] = _.last(condition.buy_time);
        delete condition.buy_time;
      }
      info.status = '1';
      let res = await this.query({ skip, limit, ...condition, ...info });
      if (this.$checkRes(res)) {
        this.$set(this, 'list', res.data);
        this.$set(this, 'total', res.total);
      }
      this.loadings = false;
    },
    getAddress(i) {
      let name = i.name + ',' + i.phone;
      return name;
    },
    // 详情
    toDetail({ data }) {
      this.$emit('toDetails', data._id);
    },
    toSales({ data }) {
      this.$emit('toSaless', { id: data._id, status: '1' });
    },
    toClose() {
      this.searchForm = {};
      this.search();
    },
    // 多选
    handleSelect(data) {
      this.$set(this, 'deliverList', data);
    },
    // 生成发货清单
    toDeliver() {
      this.$emit('toDeliver', { data: this.deliverList });
    },
    // 店铺名称远程查询
    async querySearch(value) {
      let res = await this.shopQuery({ name: value });
      if (this.$checkRes(res)) this.$set(this, 'shopList', res.data);
    },
    //商品名称远程查询
    async goodsSearch(value) {
      let res = await this.goodsQuery({ name: value });
      if (this.$checkRes(res)) this.$set(this, 'goodsList', res.data);
    },
  },
  computed: {
    ...mapState(['user']),
  },
  metaInfo() {
    return { title: this.$route.meta.title };
  },
  watch: {
    test: {
      deep: true,
      immediate: true,
      handler(val) {},
    },
  },
};
</script>

<style lang="less" scoped>
.one {
  margin: 0 0 10px 0;
  p {
    font-size: 12px;
    color: #777;
  }
}
</style>