eladmin-web/.svn/pristine/1b/1bfe601787dbe1ff216fbb5ed025ae3b54864add.svn-base

<template>
	<div class="app-container">
  	<div style="margin-bottom:10px">
  		<el-button type="success" @click="addBtn">新增</el-button>
		<el-button type="success" @click="importBtn">导入</el-button>
		<el-button type="success" @click="exportTempBtn">模版下载</el-button>
  	</div>
    <!--搜索-->
    <el-form class="mt_15" ref="form" inline size="small">
  		<el-form-item label="店铺">
    		<el-input v-model="searchParm.shop" clearable placeholder='店铺'></el-input>
  		</el-form-item>
  		<el-form-item label="订单ID">
    		<el-input v-model="searchParm.orderId" clearable placeholder='订单ID'></el-input>
  		</el-form-item>
  		 <el-form-item label="公司">
        <el-select v-model="searchParm.companyId" placeholder="请选择">
          <el-option v-for="item in companys" :key="item.name" :label="item.name" :value="item.id"></el-option>
        </el-select>
      </el-form-item>
      <el-form-item label="平台">
        <el-select v-model="searchParm.platformId" placeholder="请选择">
          <el-option
            v-for="item in platformList"
            :key="item.id"
            :label="item.name"
            :value="item.id"
          ></el-option>
        </el-select>
      </el-form-item>
      <el-form-item label="类型">
  			<el-select v-model="searchParm.status" placeholder="请选择">
			    <el-option
			      v-for="item in typeList"
			      :key="item.name"
			      :label="item.name"
			      :value="item.id">
			    </el-option>
			  </el-select>
  		</el-form-item>
  		<el-form-item label="状态">
  			<el-select v-model="searchParm.status" placeholder="请选择">
			    <el-option
			      v-for="item in statusList"
			      :key="item.name"
			      :label="item.name"
			      :value="item.id">
			    </el-option>
			  </el-select>
  		</el-form-item>
       <el-date-picker
        v-model="searchTime"
        type="daterange"
        range-separator=":"
        start-placeholder="开始日期"
        end-placeholder="结束日期"
        style="width:270px"
      ></el-date-picker>
  		<el-form-item>
    		<el-button type="primary" @click="goSearch">搜索</el-button>
    		<el-button type="warning" @click="resetForm">重置</el-button>
  		</el-form-item>
	</el-form>
    <!--表格渲染-->
    <el-table ref="table" border size="small" :data="list" :header-cell-style="{textAlign:'center'}" :cell-style="{textAlign:'center'}">
      <el-table-column label="序号" type="index" width="50" />
      <el-table-column label="平台名称" prop="platformName" />
      <el-table-column label="公司名称" prop="companyName" />
      <el-table-column label="总金额" prop="amount" />
      <el-table-column label="店铺名称" prop="shop" />
      <el-table-column label="订单ID" prop="orderId" />
      <el-table-column label="评论" prop="comment" :formatter="commentSub"/>
      <el-table-column label="状态" prop="status" align="center">
      	<template slot-scope="scope">
	     		{{ scope.row.status | getStatus}}
	     	</template>
      </el-table-column>
      <el-table-column label="创建时间" prop="createdAt" />
      <el-table-column label="修改时间" prop="updatedAt" />
      <el-table-column label="操作" width="300">
      	<template slot-scope="scope">
    		<el-button type="info" @click="getBtnById(scope.row.id)">查看</el-button>
      		<el-button type="warning" @click="editById(scope.row)">评论</el-button>
      	</template>
      </el-table-column>
    </el-table>
    <!--分页-->
    <div class="mt_15">
	    <el-pagination
	      @size-change="handleSizeChange"
	      @current-change="handleCurrentChange"
	      :current-page="searchParm.page"
	      :page-sizes="[10, 20, 30, 40, 50]"
	      :page-size="searchParm.pageSize"
	      layout="total, sizes, prev, pager, next, jumper"
	      :total="total">
	    </el-pagination>
  	</div>
  
  <!--新增弹窗-->
  <el-dialog :visible.sync="dialogAddVisible" :title="dialogAddTitle" center width="45%">
  	<div class="dialog-content">
  		 <el-form ref="addParm" size="small" :model="addParm" :rules="rules" label-width="130px">
	  		<el-form-item label="公司" prop="companyId">
            <el-select v-model="addParm.companyId" placeholder="请选择">
              <el-option
                v-for="item in companys"
                :key="item.name"
                :label="item.name"
                :value="item.id"
              ></el-option>
            </el-select>
          </el-form-item>
          <el-form-item label="平台" prop="platformId">
            <el-select v-model="addParm.platformId" placeholder="请选择">
              <el-option
                v-for="item in platformList"
                :key="item.name"
                :label="item.name"
                :value="item.id"
              ></el-option>
            </el-select>
          </el-form-item>
	  		<el-form-item label="总金额" prop="amount">
	    		<el-input v-model="addParm.amount" clearable></el-input>
	  		</el-form-item>
	  		<el-form-item label="状态描述" prop="paymentResults">
	    		<el-input v-model="addParm.paymentResults" clearable></el-input>
	  		</el-form-item>
	  		<el-form-item label="购买数量" prop="pricesNumber">
	    		<el-input v-model="addParm.pricesNumber" clearable></el-input>
	  		</el-form-item>
	  		<el-form-item label="商品名称" prop="shopName">
	    		<el-input v-model="addParm.shopName" clearable></el-input>
	  		</el-form-item>
	  		<el-form-item label="时间" prop="orderDate">
	    		<el-input v-model="addParm.orderDate" clearable></el-input>
	    	</el-form-item>
	  		<el-form-item label="店铺名称" prop="shop">
	    		<el-input v-model="addParm.shop" clearable></el-input>
	  		</el-form-item>
	  		<el-form-item label="订单id" prop="orderId">
	    		<el-input v-model="addParm.orderId" clearable></el-input>
	  		</el-form-item>
	  		<el-form-item label="评论" prop="comment">
	    		<el-input v-model="addParm.comment" clearable></el-input>
	  		</el-form-item>
	  		<el-input v-model="addParm.paths" type="hidden" clearable></el-input>
	  		<el-upload
			  class="upload-demo"
			  :data = "updateFileType"
			  :action="uploadFileImgUrl"
			  :on-preview="handlePreview"
			  :headers="uploadHeaders"
			  :on-remove="handleRemove"
			  :on-success="uploadImgSuccess"
			  :file-list="fileList"
			  list-type="picture">
			  <el-button size="small" type="primary">点击上传</el-button>
			  <div slot="tip" class="el-upload__tip">只能上传jpg/png文件，且不超过500kb</div>
			</el-upload>
		</el-form>
  	</div>
  	<span slot="footer">
  		<el-button type="info" @click="dialogAddVisible=flase">取消</el-button>
      <el-button type="primary" @click="sureAdd">确认</el-button>
  	</span>
  </el-dialog>
  
  
  <!--评论弹窗-->
  <el-dialog :visible.sync="dialogEditVisible" :title="dialogEditTitle" center width="45%">
  	<div class="dialog-content">
  		 <el-form ref="ruleForm" size="small" :model="editParm" :rules="rules" label-width="130px">
  		 	<el-form-item label="评论" prop="accountcommentName">
	    		<el-input v-model="editParm.comment" clearable></el-input>
	  		</el-form-item>
		</el-form>
		<el-input v-model="editParm.paths" type="hidden" clearable></el-input>
  		<el-upload
		  class="upload-demo"
		  :data = "updateFileType"
		  :action="uploadFileImgUrl"
		  :on-preview="handlePreview"
		  :headers="uploadHeaders"
		  :on-remove="handleRemove"
		  :on-success="uploadImgSuccess"
		  :file-list="fileList"
		  list-type="picture">
		  <el-button size="small" type="primary">点击上传</el-button>
		  <div slot="tip" class="el-upload__tip">只能上传jpg/png文件，且不超过500kb</div>
		</el-upload>
  	</div>
  	<span slot="footer">
  		<el-button type="info" @click="dialogEditVisible=false">取消</el-button>
   		<el-button type="primary" @click="sureEdit">确认</el-button>
  	</span>
  </el-dialog>
  
  <!--详情弹窗-->
  <el-dialog :visible.sync="dialogDetailVisible" :title="dialogDetailTitle" center width="45%">
  	<div class="dialog-content">
  		 <el-form ref="form" size="small" label-width="130px">
	  		<el-form-item label="公司" prop="companyId">
            <el-select v-model="detailParm.companyId" disabled>
              <el-option
                v-for="item in companys"
                :key="item.name"
                :label="item.name"
                :value="item.id"
              ></el-option>
            </el-select>
          </el-form-item>
          <el-form-item label="平台" prop="platformId">
            <el-select v-model="detailParm.platformId" disabled>
              <el-option
                v-for="item in platformList"
                :key="item.name"
                :label="item.name"
                :value="item.id"
              ></el-option>
            </el-select>
          </el-form-item>
          </el-form-item>
	  		<el-form-item label="总金额" prop="amount">
	    		<el-input v-model="detailParm.amount" disabled></el-input>
	  		</el-form-item>
	  		<el-form-item label="店铺名称" prop="shop">
	    		<el-input v-model="detailParm.shop" disabled></el-input>
	  		</el-form-item>
	  		<el-form-item label="商品名称" prop="shopName">
	    		<el-input v-model="detailParm.shopName" disabled></el-input>
	  		</el-form-item>
	  		<el-form-item label="订单id" prop="orderId">
	    		<el-input v-model="detailParm.orderId" disabled></el-input>
	  		</el-form-item>
	  		<el-form-item label="评论" prop="comment">
	    		<el-input v-model="detailParm.comment" disabled></el-input>
	  		</el-form-item>
	  		<el-form-item label="时间" prop="orderDate">
	    		<el-input v-model="detailParm.orderDate" disabled></el-input>
	  		</el-form-item>
	  		
	  		<el-upload
			  class="upload-demo"
			  :data = "updateFileType"
			  :action="uploadFileImgUrl"
			  :on-preview="handlePreview"
			  :headers="uploadHeaders"
			  :on-remove="handleRemove"
			  :on-success="uploadImgSuccess"
			  :file-list="fileList"
			  list-type="picture">
			</el-upload>
		</el-form>
  	</div>
  </el-dialog>

  <!--订单信息导入  importBtn-->
  <el-dialog :visible.sync="dialogImportVisible" :title="dialogImportTitle" center width="23%">
  	<div class="dialog-content">                 
	  		<el-upload
				  class="upload-demo"
				  drag
				  ref="upload"
				  :action="uploadFileUrl"
				  :headers="uploadHeaders"
				  :show-file-list = "false"
				  :on-success="uploadSuccess"
				  :before-upload="beforeAvatarUpload"
				  multiple>
				  <i class="el-icon-upload"></i>
				  <div class="el-upload__text">将文件拖到此处，或<em>点击上传</em></div>
				  <div class="el-upload__tip" slot="tip">只能上传xlsl文件，且不超过10M</div>
			</el-upload>
  	</div>
  </el-dialog>
  </div>
</template>

<script>
  import { add, getDetailById, commentFun, getList } from '@/api/group/clickOrder';
  import { getAll } from "@/api/group/company";
  export default {
  	filters: {
	  getStatus: function (value) {
	  	// 状态 1.待执行 2.执行中 3.执行成功 4.执行失败
			   if(value == 1) {
			   		return '待执行';
			   } else if (value == 2) {
			   		return '执行中';
			   } else if (value == 3) {
			   		return '执行成功';
			   } else if(value == 4) {
			   		return '执行失败';
			   } else {
			   	 return '执行失败';
			   }
		  }
	  },
	//	数据
    data() {
    return {
    	searchParm: {
    		page: 1,
    		pageSize: 10,
    		sort:'created_at',
    		order:'desc',
			accountName:null,
    		robotClientUuid:null,
    		sTime: null,
        	eTime: null,
        	shop: null,
        	orderId: null,
        	platformId: null,
        	companyId: null,
        	type: null,
        	status: null
    	},
    	total:0,
      list: [],
      fileList:[],
      platformList: [
        {
          id: 1,
          name: "敦煌"
        },
        {
          id: 2,
          name: "速卖通"
        },
        {
          id: 3,
          name: "马帮"
        }
      ],
      typeList: [
        {
          id: 1,
          name: "导入"
        },
        {
          id: 2,
          name: "刷单"
        }
      ],
      statusList: [
        {
          id: 1,
          name: "待执行"
        },
        {
          id: 2,
          name: "执行中"
        },
        {
          id: 3,
          name: "执行成功"
        },
        {
          id: 4,
          name: "执行失败"
        }
      ],
	  uploadHeaders:{ Authorization: this.$store.getters.token },
      dialogAddVisible: false,
      dialogAddTitle: '新增',
      dialogDetailVisible: false,
      dialogDetailTitle: '详情',
      dialogEditVisible: false,
      dialogEditTitle: '修改',
	  dialogImportVisible: false,
      dialogImportTitle:'导入',
      searchTime: "",
      updateFileType: {type: 12},
      uploadFileImgUrl: process.env.VUE_APP_BASE_API + '/api/file/uploadFile',
	  uploadFileUrl: process.env.VUE_APP_BASE_API + '/api/clickOrder/import',
	  tempUrl: process.env.VUE_APP_BASE_API + '/api/clickOrder/exportTemp',
	  fileImages:{
	  	name: null,
	  	url: null
	  },
      addParm: {
		id:null,
		platformId:null,
    	companyId:null,
    	paymentResults:null,
    	pricesNumber:null,
    	shopName:null,
    	orderDate:null,
    	amount:null,
    	shop:null,
    	orderId:null,
    	comment:null,
    	paths: []
      },
      detailParm: {
      	id:null,
		platformId:null,
    	companyId:null,
    	amount:null,
    	shop:null,
    	shopName: null,
    	orderDate: null,
    	orderId:null,
    	comment:null,
    	paths:[]
      },
      editParm: {
      	id:null,
    	comment:null,
    	paths:[]
      },
	  ruleForm:{
		platformId:null,
    	companyId:null,
    	account:null,
    	pwd:null,
    	amount:null,
    	shop:null,
    	orderId:null,
    	comment:null,
	  },
	  companys: [],
      rules: {
      	platformId: [
            { required: true, message: '请输入平台', trigger: 'blur' }
          ],
      	companyId: [
            { required: true, message: '请输入公司', trigger: 'blur' }
          ],
        account: [
            { required: true, message: '请输入账号', trigger: 'blur' }
          ],
      	pwd: [
            { required: true, message: '请输入密码', trigger: 'blur' }
          ],
    	amount: [
            { required: true, message: '请输入总金额', trigger: 'blur' }
          ],
      	shop: [
            { required: true, message: '请输入店铺名称', trigger: 'blur' }
          ],
        orderId: [
            { required: true, message: '请输入订单ID', trigger: 'blur' }
          ],
      	comment: [
            { required: true, message: '请输入评论', trigger: 'blur' }
          ]
    	},
	}
  },
  // 调用
  created() {
	this.goSearch();
	this.fileList = [];
  },
	//方法
  methods: {
  	// 图片上传
  	handleRemove(file, fileList) {
  	  console.log("======fileList=======");
	  console.log(file);
	  console.log(fileList);
	  
	  // 剔除  -这里先这样吧。硬编码
	  this.editParm.paths = [];
	  for (let i = 0; i < fileList.length; i++) {
	  	console.log("for--- " + i);
	  	
	  	const imgUrl = fileList[i].url;
	  	console.log(imgUrl);
	  	if (imgUrl.includes("/file/")) {
	  		
	  		imgUrl =  imgUrl.substring(imgUrl.lastIndexOf("\/file\/") + 5, imgUrl.length);
	  		console.log("包含file")
	  	}
	  	console.log(imgUrl);
	  	console.log("====1====")
	  	this.editParm.paths.push(imgUrl);
	  	console.log("====2====")
	  }
	  
	  console.log("this.editParm.paths:" + this.editParm.paths);
	},
	handlePreview(file) {
	  console.log("======handlePreview=======");
	  console.log(file);
	},
	uploadImgSuccess(res, file) {
    if(res.code==200) {
    	
		// this.addParm.path =res.data.list[0].path;
		
		const index = res.data.list[0].path.lastIndexOf("\/");
		this.fileImages.name = res.data.list[0].path.substring(index + 1, res.data.list[0].path.length);
		this.fileImages.url = process.env.VUE_APP_BASE_API + "/file" + res.data.list[0].path;
		
		console.log("this.fileImages.url:" + this.fileImages.url);
		console.log("====uploadImgSuccess====");
		console.log(this.fileList);
		console.log(this.editParm.paths);
		if (this.dialogEditVisible) {
//			if (this.editParm.paths != "undefined" && this.editParm.paths != null && this.editParm.paths != " " && this.editParm.paths != "null" && this.editParm.paths != "NULL") {
//			  this.editParm.paths = this.editParm.paths + ";" + res.data.list[0].path;
//			} else {
//				this.editParm.paths = res.data.list[0].path;
//			}
			
			for (let i = 0; i < this.editParm.paths.length; i++) {
			  	console.log("for--- " + i);
			  	
			  	const imgUrl = this.editParm.paths[i].url;
			  	console.log(imgUrl);
			  	if (imgUrl.includes("/file/")) {
		  			imgUrl =  imgUrl.substring(imgUrl.lastIndexOf("\/file\/") + 5, imgUrl.length);
		  		}
		  		console.log("包含file")
		  	}

			console.log("this.editParm.paths====1:" + this.editParm.paths);
            this.editParm.paths.push(res.data.list[0].path)
            console.log("res.data.list[0].path==:" + res.data.list[0].path);
            console.log("this.editParm.paths====2:" + this.editParm.paths);
		}
		
		if (this.dialogAddVisible) {
//			if (this.addParm.paths != "undefined" && this.addParm.paths != null && this.addParm.paths != " " && this.addParm.paths != "null" && this.addParm.paths != "NULL") {
//			  this.addParm.paths = this.addParm.paths + ";" + res.data.list[0].path;
//			} else {
//				this.addParm.paths = res.data.list[0].path;
//			}
            this.addParm.paths.push(res.data.list[0].path)
//          console.log(this.addParm.paths);
			console.log("this.addParm.paths:" + this.addParm.paths);
		}
	  }
 	},
	//重置
  	resetForm() {
		this.searchParm.shop = null;
        this.searchParm.orderId = null;
        this.searchParm.platformId = null;
        this.searchParm.companyId = null;
        this.searchParm.type = null;
        this.searchParm.status = null;
        this.searchTime = "";
        this.goSearch();
    },
    // 获取所有公司信息
    getCompanyAll() {
      getAll()
        .then(res => {
          this.companys = res.data;
          if (res.code == 200) {
            console.log(this.companys);
          }
        })
        .catch(() => {});
    },
    // 评论截取
    commentSub(row, column) {
    	 if (row['comment'] != "undefined" && row['comment'] != null && row['comment'] != "" && row['comment'] != "null" && row['comment'] != "NULL") {
    		return row['comment'].slice(0,3) + "...";
    	}
    },
	//	查询
	goSearch() {
		this.searchParm.sTime = this.searchTime[0];
     	this.searchParm.eTime = this.searchTime[1];
		this.searchParm.page=1
		this.getCompanyAll();
		this.getDataList()
	},
	//导入成功
	uploadSuccess(res, file) {
  		this.dialogImportVisible = false;
    	if(res.code==200) {
			console.log("********date:"+res.data)
			if(res.data == true) {
				this.$message.success('导入成功!');
			}
    		else{
				window.location.href = res.data;
				this.$message.error('导入失败!');
			}
		}
		this.goSearch();
  	},
	beforeAvatarUpload(file) {
	    console.log(file);
	    const isLt10M = file.size / 1024 / 1024 <10;
	    if (!isLt10M) {
	      this.$message.error('上传Excel文件大小不能超过 10MB!');
	    }
	    return isLt10M;
	 },
	// 导入
	importBtn() {
		this.dialogImportVisible = true
	},
	//机器人模板
	exportTempBtn() {
		console.log(this.tempUrl)
		window.location.href = this.tempUrl;
	},
	// 新增
	addBtn(){
		this.addParm = {
    		id:null,
			platformId:null,
	    	companyId:null,
	    	account:null,
	    	pwd:null,
	    	amount:null,
	    	shop:null,
	    	orderId:null,
	    	comment:null,
	    	paths: []
      }
		this.fileList = []
		this.dialogAddTitle='新增'
		this.dialogAddVisible = true
	},
	//	修改
	editById(data){
		this.fileList = [];
		this.editParm.paths = [];
		this.editParm.comment = null;
		getDetailById({id: data.id}).then(res => {
			if(res.code==200) {
				
				this.editParm.id = res.data.id;
		    	this.editParm.comment = res.data.comment;
		    	
		    	if (res.data.paths != "undefined" && res.data.paths != null && res.data.paths != "" &&res.data.paths != "null" && res.data.paths != "NULL") {
		    		this.editParm.paths = res.data.paths.split(',');
		    	}
		    	
		    	if (this.editParm.paths != "undefined" && this.editParm.paths != null && this.editParm.paths != "" && this.editParm.paths != "null" && this.editParm.paths != "NULL") {
		    		this.editParm.paths = res.data.paths.split(',');
		    		this.fileList = res.data.paths.split(',').map(val => {
//			    	  return {url:"http://localhost:8008/file" + val}
						return {name: val.substring(val.lastIndexOf("\/") + 1, val.length), url: val}
						console.log("url:" + val);
			    	})
			    	console.log(this.fileList)
		    	}
		    	
				this.dialogEditVisible = true
				this.$refs.ruleForm.clearValidate()
			}
		}).catch(err => {
			console.log(err)
		})
	},
	// 确认修改
	sureEdit(){
		this.editParm.paths = this.editParm.paths.toString()
		commentFun(this.editParm).then(res => {
				if(res.code==200) {
					console.log(res)
					this.dialogEditVisible = false
					this.$message.success('修改成功!')
					this.getDataList()
				}
			}).catch(err => {
				console.log(err)
			})
	},
	// 确认新增
	sureAdd(){
		this.addParm.paths = this.addParm.paths.toString()
		console.log(this.addParm)
		add(this.addParm).then(res => {
				if(res.code==200) {
					this.dialogAddVisible = false
					this.$message.success('新增成功!')
					this.getDataList()
				}
		}).catch(err => {
				console.log(err)
		})
	},
	// 查看根据id
	getBtnById(id){
		getDetailById({id}).then(res => {
			if(res.code==200) {
				
				this.detailParm.id = res.data.id;
				this.detailParm.platformId = res.data.platformId;
		    	this.detailParm.companyId = res.data.companyId;
		    	this.detailParm.amount = res.data.amount;
		    	this.detailParm.shop = res.data.shop;
		    	this.detailParm.orderId = res.data.orderId;
		    	this.detailParm.comment = res.data.comment;
		    	this.detailParm.shopName = res.data.shopName;
		    	this.detailParm.orderDate = res.data.orderDate;
		    	this.detailParm.paths = res.data.paths;
		    	this.fileList = [];
		    	
		    	if (res.data.paths != "undefined" && res.data.paths != null && res.data.paths != "" &&res.data.paths != "null" && res.data.paths != "NULL") {
		    		this.detailParm.paths = res.data.paths.split(',');
		    	}
		    	
		    	if (this.detailParm.paths != "undefined" && this.detailParm.paths != null && this.detailParm.paths != "" && this.detailParm.paths != "null" && this.detailParm.paths != "NULL") {
		    		this.detailParm.paths = res.data.paths.split(',')
		    		this.fileList = res.data.paths.split(',').map(val => {
//			    	  return {url:"http://localhost:8008/file" + val}
						return {name: val.substring(val.lastIndexOf("\/") + 1, val.length), url: val}
			    	})
			    	console.log(this.fileList)
		    	}
				
				this.dialogDetailVisible = true;
				this.$refs.ruleForm.clearValidate();
				
			}
		}).catch(err => {
			console.log(err)
		})
	},
	// 分页获取表格数据
	getDataList(){
		getList(this.searchParm).then(res => {
				console.log(res)
				if(res.code==200) {
					console.log(res)
					this.list = res.data.list;
					this.total = res.data.total;
				}
			}).catch(err => {
				console.log(err)
			})
	},
	
	//	分页
		handleSizeChange(val) {
   		console.log(`每页 ${val} 条`);
   		this.searchParm.pageSize = val;
   		this.getDataList();
  	},
  	handleCurrentChange(val) {
    	console.log(`当前页: ${val}`);
    	this.searchParm.page = val;
    	this.getDataList();
  	}
  }
}
</script>

<style rel="stylesheet/scss" lang="scss" scoped>
</style>