eladmin-web/.svn/pristine/01/01b694fd37ddaa25bce5f751a6c8584d880cdb2c.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.trim="searchParm.shop" clearable placeholder='店铺'></el-input>
  		</el-form-item>
  		<el-form-item label="订单ID">
    		<el-input v-model.trim="searchParm.orderId" clearable placeholder='订单ID'></el-input>
  		</el-form-item>
  		 <el-form-item label="公司">
        <el-select v-model.trim="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.trim="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.trim="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.trim="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="companyName" />
      <el-table-column label="类型" prop="type" align="center">
      	<template slot-scope="scope">
	     		{{ scope.row.type | getListType}}
	     	</template>
      </el-table-column>
      <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.trim="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="amount">
	    		<el-input v-model.trim="addParm.amount" clearable></el-input>
	  		</el-form-item>
	  		<el-form-item label="状态描述" prop="paymentResults">
	    		<el-input v-model.trim="addParm.paymentResults" clearable></el-input>
	  		</el-form-item>
	  		<el-form-item label="购买数量" prop="pricesNumber">
	    		<el-input v-model.trim="addParm.pricesNumber" clearable></el-input>
	  		</el-form-item>
	  		<el-form-item label="商品名称" prop="shopName">
	    		<el-input v-model.trim="addParm.shopName" clearable></el-input>
	  		</el-form-item>
	  		<el-form-item label="时间" prop="orderDate">
	    		<el-input v-model.trim="addParm.orderDate" clearable></el-input>
	    	</el-form-item>
	  		<el-form-item label="店铺名称" prop="shop">
	    		<el-input v-model.trim="addParm.shop" clearable></el-input>
	  		</el-form-item>
	  		<el-form-item label="订单id" prop="orderId">
	    		<el-input v-model.trim="addParm.orderId" clearable></el-input>
	  		</el-form-item>
	  		<el-form-item label="评论" prop="comment">
	    		<el-input v-model.trim="addParm.comment" clearable></el-input>
	  		</el-form-item>
	  		<el-input v-model.trim="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"
			  :before-upload="beforeImgUpload"
			  :before-remove="beforeRemove"
			  :file-list="fileList"
			  list-type="picture">
			  <el-button size="small" type="primary">点击上传</el-button>
			  <div slot="tip" class="el-upload__tip">只能上传img/jpg/png/jpeg文件，且不超过5M</div>
			</el-upload>
		</el-form>
  	</div>
  	<span slot="footer">
  		<el-button type="info" @click="sureAddCancle('addParm')">取消</el-button>
      <el-button type="primary" @click="sureAdd('addParm')">确认</el-button>
  	</span>
  </el-dialog>
  
  
  <!--评论弹窗-->
  <el-dialog :visible.sync="dialogEditVisible" :title="dialogEditTitle" center width="45%">
  	<div class="dialog-content">
  		 <el-form ref="editParm" size="small" :model="editParm" :rules="rules" label-width="130px">
  		 	<el-form-item label="评论" prop="accountcommentName">
	    		<el-input v-model.trim="editParm.comment" clearable></el-input>
	  		</el-form-item>
		</el-form>
		<el-input v-model.trim="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"
		  :before-upload="beforeImgUpload"
		  :before-remove="beforeRemove"
		  :file-list="fileList"
		  list-type="picture">
		  <el-button size="small" type="primary">点击上传</el-button>
			  <div slot="tip" class="el-upload__tip">只能上传img/jpg/png/jpeg文件，且不超过5M</div>
		</el-upload>
  	</div>
  	<span slot="footer">
  		<el-button type="info" @click="sureEditCancle('editParm')">取消</el-button>
   		<el-button type="primary" @click="sureEdit('editParm')">确认</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.trim="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="amount">
	    		<el-input v-model.trim="detailParm.amount" disabled></el-input>
	  		</el-form-item>
	  		<el-form-item label="店铺名称" prop="shop">
	    		<el-input v-model.trim="detailParm.shop" disabled></el-input>
	  		</el-form-item>
	  		<el-form-item label="商品名称" prop="shopName">
	    		<el-input v-model.trim="detailParm.shopName" disabled></el-input>
	  		</el-form-item>
	  		<el-form-item label="订单id" prop="orderId">
	    		<el-input v-model.trim="detailParm.orderId" disabled></el-input>
	  		</el-form-item>
	  		<el-form-item label="评论" prop="comment">
	    		<el-input v-model.trim="detailParm.comment" disabled></el-input>
	  		</el-form-item>
	  		<el-form-item label="时间" prop="orderDate">
	    		<el-input v-model.trim="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-remove="beforeRemove"
				  :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">只能上传Excel文件，且不超过5M</div>
			</el-upload>
  	</div>
  </el-dialog>
  </div>
</template>

<script>
  import { add, getDetailById, commentFun, getList } from '@/api/group/clickOrder';
  import { getAll } from "@/api/group/company";
  import { doMainName } from "@/api/group/fileUpload";
  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 '执行失败';
//		   }
//		},
		getListType: function (value) {
		  	// 类型：1.导入 2.刷单
		    if(value == 1) {
		   		return '导入';
		    } else if (value == 2) {
		   		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,
        	companyId: null,
        	type: null,
        	status: null
    	},
    	total:0,
      list: [],
      fileList:[],
      doMainNameUrl: null,
      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,
    	companyId:null,
    	paymentResults:null,
    	pricesNumber:null,
    	shopName:null,
    	orderDate:null,
    	amount:null,
    	shop:null,
    	orderId:null,
    	comment:null,
    	paths: []
      },
      detailParm: {
      	id:null,
    	companyId:null,
    	amount:null,
    	shop:null,
    	shopName: null,
    	orderDate: null,
    	orderId:null,
    	comment:null,
    	paths:[]
      },
      editParm: {
      	id:null,
    	comment:null,
    	paths:[]
      },
	  companys: [],
      rules: {
      	companyId: [
            { required: true, message: '请输入公司', trigger: 'blur' }
          ],
    	amount: [
            { required: true, message: '请输入总金额', trigger: 'blur' }
          ],
        paymentResults: [
            { required: true, message: '请输入状态描述', trigger: 'blur' }
          ],
      	pricesNumber: [
            { required: true, message: '请输入购买数量', trigger: 'blur' }
          ],
      	shopName: [
        	{ required: true, message: '请输入商品名称', trigger: 'blur' }
      	],
      	shop: [
            { required: true, message: '请输入店铺名称', trigger: 'blur' }
          ],
        orderDate: [
            { required: true, message: '请输入时间', trigger: 'blur' }
        ],
        orderId: [
            { required: true, message: '请输入订单ID', trigger: 'blur' }
        ]
       },
	}
  },
  // 调用
  created() {
  	this.getFileDoMainName();
  	this.getCompanyAll();
	this.goSearch();
	this.fileList = [];
  },
	//方法
  methods: {
  	// 图片上传
  	handleRemove(file, fileList) {
  		console.log(fileList)
	  this.editParm.paths = [];
	  for (let i = 0; i < fileList.length; i++) {
	  	const imgUrl = fileList[i].url;
	  	if (imgUrl.includes("/file/")) {
	  		imgUrl =  imgUrl.substring(imgUrl.lastIndexOf("\/file\/") + 5, imgUrl.length);
		  	this.editParm.paths.push(imgUrl);
	  	}
	  }
	},
	handlePreview(file) {
	  console.log("======handlePreview=======");
	  console.log(file);
	},
	uploadImgSuccess(res, file) {
    if(res.code==200) {
		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 = this.doMainNameUrl + res.data.list[0].path;
		this.editParm.paths.push(res.data.list[0].path);
	  }
 	},
	//重置
  	resetForm() {
		this.searchParm.shop = null;
        this.searchParm.orderId = null;
        this.searchParm.companyId = null;
        this.searchParm.type = null;
        this.searchParm.status = null;
        this.searchTime = "";
        this.goSearch();
    },
    // 获取所有公司信息
    getCompanyAll() {
      getAll()
        .then(res => {
          if (res.code == 200) {
          	this.companys = res.data;
          }
        })
        .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.getDataList()
	},
	// 获取图片域名请求url fileDoMainName
	getFileDoMainName() {
		doMainName().then(res => {
			if(res.code==200) {
				this.doMainNameUrl = res.data;
			}
		}).catch(err => {
			console.log(err)
		})
	},
	//导入成功
	uploadSuccess(res, file) {
  		this.dialogImportVisible = false;
    	if(res.code==200) {
			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;
	 },
	 beforeRemove(file, fileList) {
        return this.$confirm(`确定移除 ${ file.name }？`);
     },
	 beforeImgUpload(file) {
	 	console.log(file);
	 	
	 	const isXlsImg = file.type === 'image/img';
	 	const isXlsJpg = file.type === 'image/jpg';
	 	const isXlsPng = file.type === 'image/png';
	 	const isXlsJpeg = file.type === 'image/jpeg';
	 	
	 	console.log("isXlsImg:" + isXlsImg);
	 	console.log("isXlsJpg:" + isXlsJpg);
	 	console.log("isXlsPng:" + isXlsPng);
	 	console.log("isXlsJpeg:" + isXlsJpeg);
	 	
    	const isLt10M = file.size / 1024 / 1024 < 5;
		const isXls = true;
	    if (!isXlsImg && !isXlsJpg && !isXlsPng && !isXlsJpeg) {
	       this.$message.error('上传头像图片只能是img/jpg/png/jpeg 格式!');
	       isXls = false;
	    }
		
	    const isLt5M = file.size / 1024 / 1024 <5;
	    if (!isLt5M) {
	      this.$message.error('上传Excel文件大小不能超过 5MB!');
	    }
	    
	    return isXls && isLt5M;
	 },
	// 导入
	importBtn() {
		this.dialogImportVisible = true
	},
	//机器人模板
	exportTempBtn() {
		console.log(this.tempUrl)
		window.location.href = this.tempUrl;
	},
	// 新增
	addBtn(){
		this.addParm = {
    		id:null,
	    	companyId:null,
	    	account:null,
	    	pwd:null,
	    	amount:null,
	    	shop:null,
	    	orderId:null,
	    	comment:null,
	    	paths: []
      }
		this.fileList = []
		this.dialogAddTitle='新增'
		this.dialogAddVisible = true;
		this.$refs.addParm.clearValidate();
	},
	//	修改
	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(',');
		    		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: this.doMainNameUrl + val}
						console.log("url:" + val);
			    	})
			    	console.log(this.fileList)
		    	}
		    	console.log("this.editParm.paths:" + this.editParm.paths);
				this.dialogEditVisible = true
				this.$refs.editParm.clearValidate();
			}
		}).catch(err => {
			console.log(err)
		})
	},
	// 确认修改
	sureEdit(editParm){
		this.$refs[editParm].validate((valid) => {
          if (valid) {
          	this.$refs.editParm.clearValidate();
            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)
				})
          } else {
            console.log('error submit!!');
            return false;
          }
        });
	},
	sureAddCancle(editParm) {
		this.dialogEditVisible=flase
		this.$refs.editParm.clearValidate();
	},
	// 确认新增
	sureAdd(addParm){
		this.$refs[addParm].validate((valid) => {
          if (valid) {
          	this.$refs.addParm.clearValidate();
            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)
			})
          } else {
            console.log('error submit!!');
            return false;
          }
        });
	},
	sureAddCancle(addParm) {
		this.dialogAddVisible=flase
		this.$refs.addParm.clearValidate();
	},
	// 查看根据id
	getBtnById(id){
		getDetailById({id}).then(res => {
			if(res.code==200) {
				
				this.detailParm.id = res.data.id;
		    	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: this.doMainNameUrl + val}
			    	})
			    	console.log(this.fileList)
		    	}
				
				this.dialogDetailVisible = true;
				
			}
		}).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>