enter.vue

<template>
  <div class="enter pagex">
    <div class="enter-con">
      <!--搜索区-->
      <el-form :inline="true" :model="formParam" class="demo-form-inline" ref="formParam" label-width="80px">
        <el-form-item label="状态" prop="status">
          <el-select v-model="formParam.status" placeholder="全部" clearable>
            <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-option label="失败" value="4"></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="formParam.date" 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('formParam')">重置</el-button>
        </el-form-item>
      </el-form>
      <!--操作区-->
      <div class="operation-area row">
        <el-button type="primary" @click="importChange">导入</el-button>
        <a href="/uploadSku.csv" class="downTemplate">下载模版</a>
        <el-button type="danger" @click="del">删除</el-button>
      </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 label="单号" min-width="20%" align="center">
            <template slot-scope="scope">
              <a :href="'/#/listDetail?sn='+scope.row.up_sn+'&id='+scope.row.id" class="alink">{{ scope.row.up_sn }}</a>
            </template>
          </el-table-column>
          <el-table-column prop="file_name" label="文件名字" min-width="20%" :show-overflow-tooltip="true" align="center"></el-table-column>
          <el-table-column prop="status" label="状态" width="120" align="center">
            <template slot-scope="scope">
              <el-tag v-if="scope.row.status==1" type="primary">待处理</el-tag>
              <el-tag v-else-if="scope.row.status==2" type="warning">处理中</el-tag>
              <el-tag v-else-if="scope.row.status==3" type="success">已处理</el-tag>
              <el-tag v-else-if="scope.row.status==4" type="danger">失败</el-tag>
              <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.status_tips }}</div>
              </el-tooltip>
            </template>
          </el-table-column>
          <el-table-column prop="latest_notice" label="最新上传状态" min-width="20%" align="center"></el-table-column>
          <el-table-column prop="create_time" label="上传时间" width="160" align="center"></el-table-column>
        </el-table>
        <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>
      <!--导入数据确认-->
      <el-dialog title="导入数据确认" :close-on-click-modal="false" :visible.sync="dialogVisible" width="700px">
        <div class="dialog-text">
          <p class="tt">
            上传的型号经由猎芯审核通过后，会展示在【猎芯网】进行售卖，并参与【猎芯询报价】系统自动推送询价<br/>
            您此次上传的型号是否要对已在【猎芯网】展示的型号进行覆盖或是新增？
          </p>
          <p class="alink">覆盖：已在【猎芯网】进行展示的型号全部下架，展示现在新上传的型号；</p>
          <p class="alink">新增：已在【猎芯网】进行展示的型号保持不变，额外加上新上传的型号；</p>
          <div class="row" style="margin-top: 10px;margin-bottom: 10px;">
            <el-radio v-model="fileData.type" label="1">覆盖</el-radio>
            <el-radio v-model="fileData.type" label="2">新增</el-radio>
          </div>
          <div slot="footer" class="dialog-footer row" style="text-align: right;justify-content: flex-end;">
            <el-button @click="dialogVisible = false" style="margin-right: 10px;">取 消</el-button>
            <el-upload :data="fileData" :action="uploadUrl" :on-success="handleChange" multiple>
              <el-button type="primary">确 定</el-button>
            </el-upload>
          </div>
        </div>
      </el-dialog>
    </div>
    <Menu/>
  </div>
</template>
<script>
import Vue from 'vue';
import Menu from "@/components/menu.vue";
import Tool from '../../tool'
import {NODE_ENVS} from "../../ajax";
import {Button, DatePicker, Dialog, Dropdown, DropdownItem, DropdownMenu, Form, FormItem, Input, Message, MessageBox, Option, Pagination, Radio, Select, Table, TableColumn, Tag, Tooltip, Upload} from 'element-ui'

Vue.prototype.$message = Message
Vue.use(Button).use(Form).use(Select).use(Option).use(Input).use(FormItem).use(Dialog).use(Pagination).use(Tag).use(Tooltip);
Vue.use(DatePicker).use(Dropdown).use(DropdownMenu).use(DropdownItem).use(TableColumn).use(Table).use(Upload).use(Radio);
export default {
  name: "enter",
  data() {
    return {
      total: 0,
      limit: 10,
      page: 1,
      downHref: "",
      dialogVisible: false,
      uploadUrl: NODE_ENVS + '/api/uploadSku/import',
      fileData: {
        token: Tool.getCookie('token'),
        type: "1"//1覆盖 2新增
      },
      formParam: {
        status: '',
        date: ''
      },
      tableData: "",
      multipleSelection: []
    };
  },
  watch: {
    'formParam.date'(val) {
      if (!val) {
        this.formParam.date = []
      }
    }
  },
  created() {
    this.getData();
  },
  methods: {
    importChange() {
      this.dialogVisible = true;
    },
    /**
     * 获取数据
     */
    getData() {
      this.$http('get', "/api/uploadSku/list", {
        page: this.page,
        limit: this.limit,
        status: this.formParam.status,
        action_time: this.formParam.date[0],
        end_time: this.formParam.date[1]
      }).then(res => {
        if (res.code === 0) {
          this.tableData = res.data.list || [];
          this.total = Number(res.data.total) || 0;
        } else {
          this.$message({
            message: res.msg,
            type: 'warning'
          });
        }
      })
    },
    resetForm(formName) {
      this.formParam.date = '';
      this.$refs[formName].resetFields();
    },
    /**
     * 搜索提交
     */
    submit() {
      this.page = 1;
      this.getData();
    },
    /**
     * 文件导入
     * @param file
     * @param fileList
     * @returns {boolean}
     */
    handleChange(file, fileList) {
      var that = this;
      if (file.code === 0) {
        that.dialogVisible = false;
        that.page = 1;
        that.getData();
        this.$message({
          message: '导入成功',
          type: 'success',
          onClose() {

          }
        });
      } else {
        this.$message({
          message: file.msg,
          type: 'warning'
        });
      }
    },
    /**
     * 删除
     */
    del() {
      if (this.multipleSelection.length == 0) {
        this.$message({
          message: '请至少选择一条数据',
          type: 'warning'
        });
        return;
      }
      var arr = [];
      for (var i = 0; i < this.multipleSelection.length; i++) {
        arr.push(this.multipleSelection[i]['id'])
      }
      MessageBox.confirm('确认到删除当前勾选数据吗？', {
        type: 'error'
      }).then(() => {
        this.$http('get', "/api/uploadSku/del", {
          log_ids: arr.join(",")
        }).then(res => {
          if (res.code === 0) {
            this.$message({
              message: '删除成功',
              type: 'success'
            });
            this.getData()
          } else {
            this.$message({
              message: res.msg,
              type: 'warning'
            });
          }
        })
      }).catch(() => {

      })
    },
    handleSizeChange(val) {
      this.limit = val;
      this.getData();
    },
    handleCurrentChange(val) {
      this.page = val;
      this.getData();
    },
    handleSelectionChange(val) {
      this.multipleSelection = val || [];
    }
  },
  components: {
    Menu
  }
};
</script>
<style scoped>
@import "../../assets/css/store/enter.min.css";

.downTemplate {
  width: 68px;
  height: 28px;
  text-align: center;
  line-height: 28px;
  color: #FFF;
  background-color: #409EFF;
  border-color: #409EFF;
  font-size: 12px;
  border-radius: 3px;
  margin-left: 10px;
  margin-right: 10px;
  display: block;
}

.dialog-text .tt {
  color: #333;
  font-weight: bold;
  line-height: 25px;
  margin-bottom: 16px;
}

.dialog-text .alink {
  font-size: 12px;
}
</style>