goods.vue

<template>
  <section class="goods pagex">
    <div class="goods-con">
      <!--搜索区-->
      <el-form :inline="true" :model="formInline" label-width="100px" ref="formInline">
        <el-form-item label="型号" prop="goods_name">
          <el-autocomplete v-model="formInline.goods_name" :trigger-on-focus="false" @keyup.enter.native="onSubmit" :fetch-suggestions="querySearchAsync" placeholder="请输入型号" clearable></el-autocomplete>
        </el-form-item>
        <el-form-item label="品牌" prop="brand_name">
          <el-autocomplete v-model="formInline.brand_name" :trigger-on-focus="false" @keyup.enter.native="onSubmit" :fetch-suggestions="querySearchAsyncBrand" placeholder="请输入品牌" clearable></el-autocomplete>
        </el-form-item>
        <el-form-item label="订单状态" prop="status">
          <el-select v-model="formInline.status" placeholder="请选择">
            <el-option label="全部" value=""></el-option>
            <el-option label="待提审" value="-2"></el-option>
            <el-option label="待审核" value="-1"></el-option>
            <el-option label="进行中" value="2"></el-option>
            <el-option label="已完成" value="4"></el-option>
            <el-option label="已作废" value="-3"></el-option>
          </el-select>
        </el-form-item>
        <el-form-item label="发货状态" prop="shipping_status">
          <el-select v-model="formInline.shipping_status" placeholder="请选择">
            <el-option label="全部" value=""></el-option>
            <el-option label="待发货" value="1"></el-option>
            <el-option label="部分发货" value="2"></el-option>
            <el-option label="全部发货" value="3"></el-option>
          </el-select>
        </el-form-item>
        <el-form-item label="收款状态" prop="pay_status">
          <el-select v-model="formInline.pay_status" placeholder="请选择">
            <el-option label="全部" value=""></el-option>
            <el-option label="待收款" value="1"></el-option>
            <el-option label="部分收款" value="2"></el-option>
            <el-option label="全部收款" value="3"></el-option>
          </el-select>
        </el-form-item>
        <el-form-item label="报价单号" prop="quote_sn">
          <el-input v-model="formInline.quote_sn" placeholder="请输入报价单号" @keyup.enter.native="submit" style="width: 193px;"></el-input>
        </el-form-item>
        <el-form-item label="订单来源" prop="source_type">
          <el-select v-model="formInline.source_type" placeholder="请选择">
            <el-option label="全部" value=""></el-option>
            <el-option label="云芯采购" value="2"></el-option>
            <el-option label="正常采购" value="1"></el-option>
          </el-select>
        </el-form-item>
        <el-form-item label="币种" prop="currency">
          <el-select v-model="formInline.currency" placeholder="全部" clearable>
            <el-option label="全部" value=""></el-option>
            <el-option label="RMB（人民币）" value="1"></el-option>
            <el-option label="USD（美元）" value="2"></el-option>
            <el-option label="HKD（港币）" value="3"></el-option>
            <el-option label="EUR（欧元）" value="4"></el-option>
            <el-option label="GBP（英镑）" value="5"></el-option>
          </el-select>
        </el-form-item>
        <el-form-item label="创建时间">
          <el-date-picker :unlink-panels=true style="width:193px" prefix-icon="prefix-icon-time-style" v-model="create_time_val" value-format="yyyy-MM-dd" type="daterange" range-separator="至" start-placeholder="开始日期" end-placeholder="结束日期"></el-date-picker>
        </el-form-item>
        <el-form-item>
          <el-button type="primary" @click="submit">查询</el-button>
          <el-button @click="resetForm('formInline')">重置</el-button>
        </el-form-item>
      </el-form>
      <!--操作区-->
      <div class="operation-area row verCenter bothSide">
        <div class="operation-button row verCenter">
          <el-button type="primary" @click="addSend">生成发货单</el-button>
          <el-button type="primary" @click="exportChange">导出</el-button>
        </div>
        <div class="text-tip row verCenter">
          <i class="el-icon-warning"></i>
          <span>该页面展示的数据为：猎芯客户与贵司产生的订单交易数据</span>
        </div>
      </div>
      <!--列表区-->
      <div class="data-box th-all" v-if="tableData">
        <el-table :data="tableData" border max-height="600" @selection-change="handleSelectionChange">
          <el-table-column fixed type="selection" width="40" align="center"></el-table-column>
          <el-table-column prop="purchase_sn" label="订单号" width="200" align="center" :show-overflow-tooltip="true">
            <template slot-scope="scope">
              <a :href="'/#/orderTrackGoodsDetail?purchase_id='+scope.row.purchase_id" class="alink">{{ scope.row.purchase_sn }}</a>
            </template>
          </el-table-column>
          <el-table-column prop="company_name" label="订货公司" min-width="160" :show-overflow-tooltip="true" align="center"></el-table-column>
          <el-table-column prop="currency_val" label="币种" min-width="60" align="center"></el-table-column>
          <el-table-column prop="purchase_amount" label="订单金额" min-width="110" align="center"></el-table-column>
          <el-table-column prop="status_val" label="订单状态" min-width="80" align="center">
            <template slot-scope="scope">
              <el-tag type="primary" v-if="scope.row.status_val == '待提审'" disable-transitions>{{ scope.row.status_val }}</el-tag>
              <el-tag type="info" v-else-if="scope.row.status_val == '待审核'" disable-transitions>{{ scope.row.status_val }}</el-tag>
              <el-tag type="warning" v-else-if="scope.row.status_val == '进行中'" disable-transitions>{{ scope.row.status_val }}</el-tag>
              <el-tag type="success" v-else-if="scope.row.status_val == '已完成'" disable-transitions>{{ scope.row.status_val }}</el-tag>
              <el-tag type="danger" v-else-if="scope.row.status_val == '已作废'" disable-transitions>{{ scope.row.status_val }}</el-tag>
              <el-tag type="primary" v-else>{{ scope.row.status_val }}</el-tag>
            </template>
          </el-table-column>
          <el-table-column prop="pay_name" label="猎芯付款方式" min-width="80" align="center"></el-table-column>
          <el-table-column prop="pay_status_val" label="收款状态" min-width="85" align="center">
            <template slot-scope="scope">
              <el-tag type="primary" v-if="scope.row.pay_status_val == '待付款'" disable-transitions>{{ scope.row.pay_status_val }}</el-tag>
              <el-tag type="warning" v-if="scope.row.pay_status_val == '部分付款'" disable-transitions>{{ scope.row.pay_status_val }}</el-tag>
              <el-tag type="success" v-if="scope.row.pay_status_val == '全部付款'" disable-transitions>{{ scope.row.pay_status_val }}</el-tag>
            </template>
          </el-table-column>
          <el-table-column prop="shipping_status_val" label="发货状态" width="100" align="center">
            <template slot-scope="scope">
              <span v-if="scope.row.shipping_status_val == '待发货'">{{ scope.row.shipping_status_val }}</span>
              <a class="f-yellow1" v-if="scope.row.shipping_status_val == '部分发货'" :href="'/#/orderTrackInvoice?purchase_id='+scope.row.purchase_id">{{ scope.row.shipping_status_val }}</a>
              <a class="alink" v-if="scope.row.shipping_status_val == '全部发货'" :href="'/#/orderTrackInvoice?purchase_id='+scope.row.purchase_id">{{ scope.row.shipping_status_val }}</a>
            </template>
          </el-table-column>
          <el-table-column prop="buyer_name" label="订单人员" width="100" align="center">
            <template slot-scope="scope">
              <el-popover placement="bottom" title="订单人员" width="200" trigger="hover">
                <div class="contact-information">
                  <p class="row verCenter"><em>电话：</em><span>{{ scope.row.buyer_info.mobile }}</span></p>
                  <p class="row verCenter"><em>邮箱：</em><span>{{ scope.row.buyer_info.email }}</span></p>
                </div>
                <a slot="reference" href="javascript:;" class="alink">{{ scope.row.buyer_info.buyer_name }}</a>
              </el-popover>
            </template>
          </el-table-column>
          <el-table-column prop="source_type" label="订单来源" width="150" align="center">
            <template slot-scope="scope">
              <span>{{ scope.row.source_type }}</span>
              <el-tooltip :aa="scope" class="item" effect="dark" placement="top-start">
                <i class="el-icon-question" style="color:#ff7e11;margin-left:5px;cursor:pointer;font-size:16px;"></i>
                <div slot="content">{{ scope.row.source_type_tips }}</div>
              </el-tooltip>
            </template>
          </el-table-column>
          <el-table-column prop="create_time" label="创建时间" width="150" align="center"></el-table-column>
          <el-table-column fixed="right" label="操作" width="110" align="center">
            <template slot-scope="scope">
              <el-button @click="handleClick(scope.row)" type="primary" size="mini" class="yunyin-btn">查看日志</el-button>
            </template>
          </el-table-column>
        </el-table>
        <div class="row bothSide">
          <p class="tetx-goods row verCenter">
            <span>订单总金额：</span>
            <em>￥{{ total_amount }}</em>
          </p>
          <el-pagination layout="total, sizes, prev, pager, next, jumper" :page-sizes="[10, 20, 50, 100, 200]" :total="total" @size-change="handleSizeChange" @current-change="handleCurrentChange" :current-page="page"></el-pagination>
        </div>
      </div>
    </div>
    <Menu/>
    <el-dialog title="已采购订单日志" :close-on-click-modal="false" :visible.sync="dialogVisible" width="1000px">
      <el-table :data="logs" border max-height="600">
        <el-table-column prop="create_time" label="时间" min-width="150" align="center"></el-table-column>
        <el-table-column prop="message" label="操作说明" min-width="150" align="center"></el-table-column>
        <el-table-column prop="operator" label="操作人" min-width="150" align="center"></el-table-column>
      </el-table>
    </el-dialog>
  </section>
</template>
<script>
import Vue from 'vue';
import Menu from "@/components/menu.vue";
import {Autocomplete, Button, Cascader, DatePicker, Dialog, Form, FormItem, Input, Message, Option, Pagination, Popover, Select, Table, TableColumn, Tag} from 'element-ui'
import Tool from "@/tool";
import {NODE_ENVS} from "@/ajax";
import qs from 'qs';

Vue.prototype.$message = Message;
Vue.use(Button).use(Form).use(Select).use(Option).use(Input).use(FormItem).use(Dialog).use(Pagination);
Vue.use(TableColumn).use(Table).use(Cascader).use(Autocomplete).use(DatePicker).use(Tag).use(Popover);
export default {
  name: "orderTrackGoods",
  data() {
    return {
      total_amount: '',//订单总金额
      total: 0,
      limit: 10,
      page: 1,
      dialogVisible: false,
      logs: [],
      create_time_val: '',
      inquiry_item_id: '',//询价id
      formInline: {
        goods_name: '',
        brand_name: '',
        shipping_status: '',
        status: '',
        pay_status: '',
        inquiry_sn: '',
        quote_sn: '',
        source_type: '',
        currency: '',
        create_time: ''
      },
      tableData: "",
      multipleSelection: []
    };
  },
  created() {
    this.formInline.inquiry_sn = this.$route.query.inquiry_sn || '';
    this.formInline.quote_sn = this.$route.query.quote_sn || '';
    this.getData();
  },
  watch: {
    $route(to, from) {
      if (to.path == '/orderTrackGoods') {
        this.formInline.inquiry_sn = this.$route.query.inquiry_sn || '';
        this.formInline.quote_sn = this.$route.query.quote_sn || '';
        this.getData();
      }
    }
  },
  methods: {
    getData() {
      //格式化时间
      if (this.create_time_val) {
        this.formInline.create_time = this.create_time_val[0] + '~' + this.create_time_val[1];
      } else {
        this.formInline.create_time = '';
      }
      var params = Object.assign({}, {page: this.page}, {limit: this.limit}, this.formInline, {inquiry_item_id: this.inquiry_item_id})
      this.$http('post', "/api/purchase/getPurchaseList", params).then(res => {
        if (res.code === 0) {
          this.tableData = res.data.list || [];
          this.total = Number(res.data.total) || 0;
          this.total_amount = res.data.total_amount;
        } else {
          this.$message({
            message: res.msg,
            type: "error"
          });
        }
      })
    },
    handleCurrentChange(val) {
      this.page = val;
      this.getData();
    },
    handleSelectionChange(val) {
      this.multipleSelection = val;
    },
    handleSizeChange(val) {
      this.limit = val;
      this.getData();
    },
    getLogs(obj_type, obj_id) {
      this.$http('GET', "/api/log/getLogs", {
        obj_type: obj_type,
        obj_id: obj_id
      }).then(res => {
        if (res.code === 0) {
          this.dialogVisible = true;
          this.logs = res.data.list;
        } else {
          this.$message({
            message: res.msg,
            type: 'warning'
          });
        }
      });
    },
    handleClick(row) {
      this.getLogs(204, row.purchase_id);
      console.log(row);
    },
    submit() {
      this.page = 1;
      this.getData();
    },
    resetForm(formName) {
      this.create_time_val = '';
      this.$refs[formName].resetFields();
    },
    /**
     * 导出
     */
    exportChange() {
      var ids = this.multipleSelection.map(obj => {
        return obj.purchase_id;
      });
      var params = Object.assign({}, {token: Tool.getCookie('token')},{ids: ids.join(',')})
      var url = NODE_ENVS + '/api/purchase/export?' + qs.stringify(params);
      const newsUrl = this.$router.resolve(url);
      window.open(url);
    },
    //生成发货单
    addSend() {
      if (this.multipleSelection.length != 1) {
        this.$message({
          message: "请选择一条数据进行操作",
          type: 'warning'
        });
        return false;
      }

      if (this.multipleSelection[0].status_val == '待提审') {
        this.$message({
          message: "待提审状态下不可生成",
          type: 'warning'
        });
        return false;
      }

      if (this.multipleSelection[0].status_val == '待审核') {
        this.$message({
          message: "待审核状态下不可生成",
          type: 'warning'
        });
        return false;
      }

      if (this.multipleSelection[0].shipping_status_val != '待发货' && this.multipleSelection[0].shipping_status_val != '部分发货') {
        this.$message({
          message: "请选择待发货/部分发货的数据进行操作",
          type: 'warning'
        });
        return false;
      }
      this.$router.push({
        path: "/OrderTrackPurAdd",
        query: {
          purchase_id: this.multipleSelection[0].purchase_id
        }
      })
    },
    //型号
    querySearchAsync(queryString, cb) {
      this.$http('get', "/api/search/getspu", {
        spu_name: queryString
      }).then(res => {
        if (res.code == 0) {
          if (res.data.list.length > 0) {
            var arrlist_ = res.data.list || [];
            var arr_ = []
            for (var i = 0; i < arrlist_.length; i++) {
              arr_.push({
                value: arrlist_[i]['spu_name']
              })
            }
            cb(arr_);
          } else {
            cb([]);
          }
        }
      })
    },
    //品牌
    querySearchAsyncBrand(queryString, cb) {
      this.$http('get', "/api/brand/get_stand_brand", {
        brand: queryString
      }).then(res => {
        if (res.code == 0) {
          if (res.data.list.length > 0) {
            var arrlist_ = res.data.list || [];
            var arr_ = []
            for (var i = 0; i < arrlist_.length; i++) {
              arr_.push({
                value: arrlist_[i]
              })
            }
            cb(arr_);
          } else {
            cb([]);
          }
        }
      })
    },
  },
  components: {
    Menu
  }
};
</script>
<style scoped lang="less">
@import "../../assets/css/goods/goods.min.css";

.tetx-goods {
  font-size: 12px;
  margin-top: 20px;
  flex-wrap: wrap;

  span {
    color: #333;
    font-weight: bold;
  }

  em {
    color: #D9001B;
    font-weight: bold;
    margin-right: 15px;
  }
}
</style>