quote.vue

<template>
    <section class="store pagex">
        <div class="store-con">
            <el-form :inline="true" :model="formInline" class="demo-form-inline">
                <el-form-item label="报价型号">
                    <el-autocomplete @keyup.enter.native="onSubmit" v-model="formInline.goods_name" :trigger-on-focus="false" :fetch-suggestions="querySearchAsync" placeholder="请输入型号" @select="handleSelectGoodsName"></el-autocomplete>
                </el-form-item>
                <el-form-item label="品牌">
                    <el-autocomplete @keyup.enter.native="onSubmit" v-model="formInline.brand_name" :trigger-on-focus="false" :fetch-suggestions="querySearchAsync2" placeholder="请输入品牌" @select="handleSelectBrandName"></el-autocomplete>
                </el-form-item>
                <el-form-item label="状态">
                    <el-select v-model="formInline.status" placeholder="请选择">
                        <el-option label="比价中" value="1"></el-option>
                        <el-option label="已确认" value="3"></el-option>
                        <el-option label="已成单" value="4"></el-option>
                    </el-select>
                </el-form-item>
                 <el-form-item label="最近报价时间">
                        <el-date-picker v-model="formInline.date" type="daterange" range-separator="至" start-placeholder="开始日期" end-placeholder="结束日期"></el-date-picker>
                    </el-form-item>
                    <el-form-item>
                        <div @click="onSubmit" class="search-btn">搜索</div>
                    </el-form-item>
            </el-form>
            <div class="btn-nav clr">
                <div class="fl dcg" @click="exportChange">导出</div>
                <div class="fl dcg" @click="close">关闭</div>
                <div class="fl dcg delbtn" @click="del">删除</div>
            </div>
            <div class="data-box th-all">
                <el-table :data="tableData" border style="width: 100%" @selection-change="handleSelectionChange">
                    <el-table-column fixed type="selection" width="40" align="center"></el-table-column>
                    <el-table-column prop="goods_name" label="型号" width="200">
                        <template slot-scope="scope">
                            <div class="price-mores">
                                <el-tooltip effect="light" placement="bottom-start" popper-class="popper-class-box">
                                    <div slot="content">
                                        <p class="p-text row verCenter">
                                            <em class="row">型号</em>
                                            <span class="row  verCenter boxsiz">{{scope.row.goods_name}}</span>
                                        </p>
                                        <p class="p-text row verCenter">
                                            <em class="row">品牌</em>
                                            <span class="row  verCenter boxsiz">{{scope.row.brand_name}}</span>
                                        </p>
                                        <p class="p-text row verCenter">
                                            <em class="row">数量</em>
                                            <span class="row  verCenter boxsiz">{{scope.row.quote_number}}</span>
                                        </p>
                                        <p class="p-text row verCenter">
                                            <em class="row">批次</em>
                                            <span class="row  verCenter boxsiz">{{scope.row.batch}}</span>
                                        </p>
                                        <p class="p-text row verCenter">
                                            <em class="row">交货日期</em>
                                            <span class="row  verCenter boxsiz">{{scope.row.delivery_time}}</span>
                                        </p>
                                    </div>
                                    <div class="more-search-btn">{{scope.row.goods_name}}</div>
                                </el-tooltip>
                            </div>
                        </template>
                    </el-table-column>
                    <el-table-column prop="brand_name" label="品牌" width="200"></el-table-column>
                    <el-table-column prop="inquiry_sn" label="询价单号" width="200"></el-table-column>
                    <el-table-column prop="quote_goods_name" label="报价型号" width="200"></el-table-column>
                    <el-table-column prop="quote_brand_name" label="报价品牌" width="200"></el-table-column>
                    <el-table-column prop="status" label="状态" width="100">
                        <template slot-scope="scope">
                            <span v-if="scope.row.status==1" class="f-green">比价中</span>
                            <span v-else-if="scope.row.status==2" class="f-yellow1">已选中</span>
                            <span v-else-if="scope.row.status==3">已确认</span>
                            <span v-else-if="scope.row.status==4">已成单</span>
                            <span v-else-if="scope.row.status==5" class="f-red1">已关闭</span>
                            <span v-else-if="scope.row.status==9" class="f-red1">已删除</span>
                            <span v-else-if="scope.row.status==-1" class="f-red1">已撤销</span>
                        </template>
                    </el-table-column>
                    <el-table-column prop="expire_status_val" label="是否有效" width="100"></el-table-column>
                    <el-table-column prop="quote_number" label="报价数量" width="100"></el-table-column>
                    <el-table-column prop="price_origin" label="价格" width="200"></el-table-column>
                    <el-table-column prop="currency_val" label="币种" width="100"></el-table-column>
                    <el-table-column prop="tax_rate" label="税率" width="100"></el-table-column>
                    <el-table-column prop="batch" label="批次" width="100"></el-table-column>
                    <el-table-column prop="delivery_time" label="货期" width="100"></el-table-column>
                    <el-table-column prop="mpq" label="最小包装数量" width="150"></el-table-column>
                    <el-table-column prop="moq" label="起订量" width="100"></el-table-column>
                    <el-table-column prop="price_other" label="其他费用" width="100"></el-table-column>
                    <el-table-column prop="expire_time" label="报价有效期" width="200"></el-table-column>
                    <el-table-column prop="remark" label="备注" width="200"></el-table-column>
                    <el-table-column prop="create_time" label="最近报价时间" width="200"></el-table-column>
                </el-table>
                <el-pagination layout="prev, pager, next,jumper" :page-size="limit" :total="total" @current-change="handleCurrentChange" :current-page="page"></el-pagination>
            </div>
        </div>
        <Menu/>
    </section>
</template>
<script>
  import Vue from 'vue';
  import Menu from "@/components/menu.vue";
  import {
    Form,
    FormItem,
    Select,
    Option,
    Input,
    DatePicker,
    Button,
    Dropdown,
    DropdownMenu,
    DropdownItem,
    Table,
    TableColumn,
    MessageBox,
    Message,
    Dialog,
    Pagination,
    Autocomplete,
    Tooltip
  } from 'element-ui'
     import {
    NODE_ENVS
  } from "../../ajax";
  import Tool from '../../tool'
Vue.prototype.$message=Message
  Vue.use(Button).use(Form).use(Select).use(Option).use(Input).use(FormItem).use(Dialog).use(Autocomplete).use(Tooltip);
  Vue.use(DatePicker).use(Dropdown).use(DropdownMenu).use(DropdownItem).use(TableColumn).use(Table).use(Pagination);

  export default {
    name: "inquire",
    data() {
      return {
        total: 0,
        limit: 10,
        page: 1,
        tableData: [],
        multipleSelection: [],
        formInline: {
          goods_name: '',
          brand_id: '',
          brand_name:"",
          date: '',
          status: ''
        }
      };
    },
    watch: {
       'formInline.date'(val){
        if(!val){
          this.formInline.date=[]
        }
      },
      'formInline.brand_name'(val){
        if(!val){
          this.formInline.brand_id=""
          return
        }
        var arr_=[]
        this.brandList=this.brandList||[]
        for(var i=0;i<this.brandList.length;i++){
          arr_.push(this.brandList[i].value)
        }
        if(arr_.indexOf(val)==-1){
          this.formInline.brand_id=""
        }
      }
    },
    created() {
      this.getData();
    },
    computed: {},
    methods: {
      getData() {
        console.log(this.formInline)
        this.$http('get', "/api/quote/getlist", {
          page: this.page,
          limit: this.limit,
          goods_name: this.formInline.goods_name,
          brand_id: this.formInline.brand_id,
          brand_name: this.formInline.brand_name,
          start_time: this.formInline.date ? this.formInline.date[0] : '',
          end_time: this.formInline.date ? this.formInline.date[1] : '',
          status: this.formInline.status
        }).then(res => {
          if (res.err_code === 0) {
            this.tableData = res.data.list || [];
            this.total = res.data.total;
          } else {
            this.$message(res.err_msg);
          }
        })
      },
      onSubmit() {
        this.page = 1;
        this.getData();
      },
      handleSelectionChange(val) {
        this.multipleSelection = val;
      },
      handleCurrentChange(val) {
        this.page = val;
        this.getData();
      },
      exportChange() {
        var arr = [];
        if (this.multipleSelection.length == 0) {
          this.$message("请至少选择一条数据");
          return;
        }

        for (var i = 0; i < this.multipleSelection.length; i++) {
          arr.push(this.multipleSelection[i]['id'])
        }

        window.location.href =NODE_ENVS+ '/api/quote/export?ids=' + arr.join(",")+'&token='+Tool.getCookie('token') ;;

      },
      close() {
        var arr = [];
        if (this.multipleSelection.length == 0) {
          this.$message("请至少选择一条数据");
          return;
        }

        for (var i = 0; i < this.multipleSelection.length; i++) {
          arr.push(this.multipleSelection[i]['id'])
        }

        this.$http('post', "/api/quote/close", {
          ids: arr.join(",")
        }).then(res => {
          if (res.err_code === 0) {
            this.$message("关闭成功");
            this.getData();
          } else {
            this.$message(res.err_msg);
          }
        })


      },
      del() {
        var arr = [];
        if (this.multipleSelection.length == 0) {
          this.$message("请至少选择一条数据");
          return;
        }

        for (var i = 0; i < this.multipleSelection.length; i++) {
          arr.push(this.multipleSelection[i]['id'])
        }
        MessageBox.confirm('确认到删除当前勾选数据吗？', {
          type: 'error'
        }).then(() => {
          this.$http('post', "/api/quote/delete", {
            ids: arr.join(",")
          }).then(res => {
            if (res.err_code === 0) {
              this.$message("删除成功");
              this.getData();
            } else {
              this.$message(res.err_msg);
            }
          })
        }).catch(()=>{

          })
      },
      handleSelectGoodsName(item) {
        this.formInline.goods_name = item.value
      },
      handleSelectBrandName(item) {
        this.formInline.brand_name = item.value;
        this.formInline.brand_id = item.brand_id;
      },
      querySearchAsync(queryString, cb) {
        this.$http('get', "/api/search/getspu", {
          spu_name: this.formInline.goods_name
        }).then(res => {
          if (res.err_code == 0) {
            var arrlist_ = res.data || [];
            var arr_ = []
            for (var i = 0; i < arrlist_.length; i++) {
              arr_.push({value: arrlist_[i]['spu_name']})
            }
            cb(arr_);
          }
        })
      },
      querySearchAsync2(queryString, cb) {
        this.$http('get', "/api/search/getbrand", {
          brand_name: this.formInline.brand_name,
          type:2
        }).then(res => {
          if (res.err_code == 0) {
            var arrlist_ = res.data || [];
            this.brandList = []
            this.formInline.brand_id = ""
            for (var i = 0; i < arrlist_.length; i++) {
              this.brandList.push({value: arrlist_[i]['brand_name'], brand_id: arrlist_[i]['brand_id']})
            }
            cb(this.brandList);
          }
        })
      }
    },
    components: {
      Menu
    }
  };
</script>
<style scoped>
    @import "../../assets/css/list/quote.min.css";
</style>