FIS1.5/vue/src/views/pg-fis/basedate/planControl/index.vue

<!--计划管理信息页-->
<template>
	<div class="cr-body-content">
	  <div ref="box">
		<flexbox class="content-header">
		  <el-form
			:model="listQuery"
			ref="searchForm"
			v-show="showSearch"
			:inline="true">
			<el-form-item label="工厂" prop="factory" >
				<el-input
					v-model="listQuery.factory"
					clearable
					size="small"
					style="width: 120px"
				/>
			</el-form-item>

			<el-form-item label="底盘号" prop="vin" >
				<el-input
					v-model="listQuery.vin"
					clearable
					size="small"
					style="width: 120px"
				/>
			</el-form-item>
			
			<el-form-item label="车型代码" prop="vehicleModelCode" >
				<el-input
					v-model="listQuery.vehicleModelCode"
					clearable
					size="small"
					style="width: 120px"
				/>
			</el-form-item>

			<el-form-item label="涂装下线时间">
				<el-date-picker
					v-model="listQuery.paintOfflineTimeBegin"
					size="small"
					style="width: 200px"
					type="datetime"
				></el-date-picker>
			</el-form-item>
			<el-form-item label="-">
				<el-date-picker
					v-model="listQuery.paintOfflineTimeEnd"
					size="small"
					style="width: 200px"
					type="datetime"
				></el-date-picker>
			</el-form-item>

			<el-form-item label="总装上线时间">
				<el-date-picker
					v-model="listQuery.onlineTimeBegin"
					size="small"
					style="width: 200px"
					type="datetime"
				></el-date-picker>
			</el-form-item>
			<el-form-item label="-">
				<el-date-picker
					v-model="listQuery.onlineTimeEnd"
					size="small"
					style="width: 200px"
					type="datetime"
				></el-date-picker>
			</el-form-item>

			<el-form-item label="序列号">
				<el-input
					v-model="listQuery.serialNumBegin"
					clearable
					size="small"
					style="width: 120px"
				/>
			</el-form-item>
			<el-form-item label="-">
				<el-input
					v-model="listQuery.serialNumEnd"
					clearable
					size="small"
					style="width: 120px"
				/>
			</el-form-item>

			<el-form-item label="流水号">
				<el-input
					v-model="listQuery.hostSNBegin"
					clearable
					size="small"
					style="width: 120px"
				/>
			</el-form-item>
			<el-form-item label="-">
				<el-input
					v-model="listQuery.hostSNEnd"
					clearable
					size="small"
					style="width: 120px"
				/>
			</el-form-item>

			<el-form-item label="生产线">
				<el-select v-model="listQuery.productLine" clearable>
					<el-option label="A" value="A"></el-option>
					<el-option label="B" value="B"></el-option>
				</el-select>
			</el-form-item>

			<el-form-item label="创建时间">
				<el-date-picker
					v-model="listQuery.createTimeBegin"
					size="small"
					style="width: 200px"
					type="datetime"
				></el-date-picker>
			</el-form-item>
			<el-form-item label="-">
				<el-date-picker
					v-model="listQuery.createTimeEnd"
					size="small"
					style="width: 200px"
					type="datetime"
				></el-date-picker>
			</el-form-item>

			<el-form-item label="导入时间">
				<el-date-picker
					v-model="listQuery.importTimeBegin"
					size="small"
					style="width: 200px"
					type="datetime"
				></el-date-picker>
			</el-form-item>
			<el-form-item label="-">
				<el-date-picker
					v-model="listQuery.importTimeEnd"
					size="small"
					style="width: 200px"
					type="datetime"
				></el-date-picker>
			</el-form-item>
  
			<el-form-item>
			  <el-button
				type="primary"
				icon="el-icon-search"
				size="mini"
				@click="handleFilter"
				>搜索</el-button
			  >
			  <el-button
				icon="el-icon-refresh"
				size="mini"
				@click="resetQuery('searchForm')"
				>重置</el-button
			  >
			  <el-button
				type="warning"
				plain
				icon="el-icon-download"
				size="mini"
				style="margin-left: 15px"
				@click="handleDownload()"
				>导出(Excel)查询信息
			  </el-button>
			  <el-button 
			  	class="filter-item" 
				size="mini" 
				type="success" 
				icon="el-icon-plus" 
				@click="handleImport" 
				>导入
			  </el-button>
			</el-form-item>
		  </el-form>
		</flexbox>
	  </div>
	  <div class="l-table">
		<!--表格渲染-->
		<el-table
		  ref="multipleTable"
		  v-loading="listLoading"
		  element-loading-text="拼命加载中..."
		  element-loading-spinner="el-icon-loading"
		  class="cr-table"
		  :data="list"
		  :height="tableHeight"
		  size="small"
		  stripe
		  border
		  highlight-current-row
		  style="width: 100%"
		  @sort-change="sortChange"
		  @selection-change="handleSelectionChange"
		  @row-click="handleRowClick"
		>
		  <el-table-column
			v-for="(item, index) in getDefaultField"
			:key="index"
			:prop="item.prop"
			:label="item.label"
			:min-width="item.width"
			:formatter="fieldFormatter"
			sortable="custom"
			show-overflow-tooltip
			:gutter="0"
		  >
			<template slot="header" slot-scope="scope">
			  {{ scope.column.label }}
			</template>
		  </el-table-column>
		</el-table>
	  </div>
  
	  <div class="table-footer">
		<!-- 分页控件 style="margin-top: -25px;margin-bottom:-25px;float:right;"-->
		<pagination
		  v-show="totalCount > 0"
		  :total="totalCount"
		  :page.sync="page"
		  :limit.sync="listQuery.MaxResultCount"
		  @pagination="getList"
		/>
		<!-- 导入Excel组件 -->
		<importExcel
		  ref="importexcel"
		  :show="showExcelImport"
		  :importURL="'/api/newjit/import-record/import'"
		  @close="importClose"
		/>
	  </div>
	  <!-- 抽屉控件 -->
	  <el-drawer
		title="信息详细页"
		size="75%"
		direction="rtl"
		:visible.sync="drawer"
		:before-close="handleDrawerClose"
	  >
		<div>
		  <!-- <Detail
			v-bind:customerInfos="customerInfos"
			style="margin-top: -35px"
		  ></Detail> -->
		</div>
	  </el-drawer>
	</div>
  </template>
  
  <script>
  import Pagination from "@/components/Pagination";
  import permission from "@/directive/permission/index.js";
  import CRMTableHead from "../../components/CRMTableHead";
  import importExcel from "@/components/ImportExcel-normal";
  import { mapGetters } from "vuex";
  import Lockr from "lockr";
  import moment from "moment";
  import message_table from "../../components/mixins/message_table";
  import { downloadFile } from "@/utils/crmindex.js";
  
  //组件计量单位
  const bomUnit = [
	{ key: 0, display_name: "PC" },
	{ key: 1, display_name: "TON" },
	{ key: 2, display_name: "Other" },
  ];
  const projectTypeKeyValue = bomUnit.reduce((acc, cur) => {
	acc[cur.key] = cur.display_name;
	return acc;
  }, {});
  
  export default {
	name: "RepeatM100",
	// components: { Pagination, CRMTableHead, importExcel, Detail },
	components: { Pagination, CRMTableHead, importExcel },
	directives: { permission },
	filters: {
	  IsCustomerSignFilter(status) {
		//翻译是否签字
		const statusMap = {
		  true: "是",
		  false: "否",
		};
		return statusMap[status];
	  },
	},
	mixins: [message_table],
	data() {
	  return {
		customerInfos: [],
		isVINShowState:false,
		versionValue: "",
		customerInfosMB:[],
		customerInfosZHB:[],
		versionList: [], //版本列表
		searchContent: "", // 输入内容
		showExcelImport: false,
		form: {},
		drawer: false,
		list: null,
		totalCount: 0,
		listLoading: true,
		customerInfo: {
		  bomId: "",
		},
		listQuery: {
			factory:undefined,
			vin:undefined,
			vehicleModelCode:undefined,
			paintOfflineTimeBegin:undefined,
			paintOfflineTimeEnd:undefined,
			onlineTimeBegin:undefined,
			onlineTimeEnd:undefined,
			serialNumBegin:undefined,
			serialNumEnd:undefined,
			hostSNBegin:undefined,
			hostSNEnd:undefined,
			productLine:undefined,
			createTimeBegin:undefined,
			createTimeEnd:undefined,
			importTimeBegin:undefined,
			importTimeEnd:undefined,
			SkipCount: 0,
        	MaxResultCount: 15,
		},
		listPLQuery: {
		  BillType: 2,
		  //UserId: this.userinfo.UserId,
		},
		page: 1,
		// 显示搜索条件
		  // VehicleModelCodelist:[
		  //   {id: 1, name: "C8"},
		  //   {id: 2, name: "B8L"},
		  //   {id: 3, name: "CC"},
		  //   {id: 4, name: "BSMV"},
		  //   {id: 5, name: "B9"},
		  //    {id: 6, name: "Q5"},
		  // ],
		  productTypeList: [
		  { id: 1, name: "门板" },
		  { id: 2, name: "柱护板" },
		],
		showSearch: true,
		bomUnit,
		PLList: [],
		PLChildList: [], //筛选后产线下拉
		multipleSelection: [],
		drawer: false,
		isShowState: true,
		dialogTableVisible: false,
		vehicleModelList:[],//车型list
		//tableHeight: document.documentElement.clientHeight - 260,
	  };
	},
	mounted() {
	  this.$nextTick(() => { 
		  var offsetHei = document.documentElement.clientHeight;
		  let boxH = this.$refs.box.offsetHeight;
		  this.tableHeight = offsetHei - boxH - 57 - 79;//57为footer高度，79为页面上部标签高度
	  });
	},
	created() {
	  this.getList();
	},
	computed: {
	  getDefaultField() {
		var tempsTabs = [
			{ label: "底盘号", prop: "vin", width: 180 },
			{ label: "序列号", prop: "serialNum", width: 120 },
			{ label: "流水号", prop: "hostSN", width: 120 },
			{ label: "生产线", prop: "productLine", width: 120 },
			{ label: "工厂", prop: "factory", width: 120 },
			{ label: "工位", prop: "workLocation", width: 120 },
			{ label: "车位", prop: "vehicleLocation", width: 120 },
			{ label: "车身号", prop: "vehicleBodyCode", width: 120 },
			{ label: "车型代码", prop: "vehicleModelCode", width: 180 },
			{ label: "车型名称", prop: "vehicleModelName", width: 120 },
			{ label: "车型描述", prop: "vehicleModelDesc", width: 120 },
			{ label: "规格", prop: "spec", width: 120 },
			{ label: "规格说明", prop: "specDesc", width: 120 },
			{ label: "类别", prop: "type", width: 120 },
			{ label: "涂装下线时间", prop: "paintOfflineTime", width: 150 },
			{ label: "总装上线时间", prop: "onlineTime", width: 150 },
			{ label: "内饰颜色", prop: "interiorColor", width: 120 },
			{ label: "外饰颜色", prop: "exteriorTrimmingColor", width: 120 },
			{ label: "目的", prop: "target", width: 120 },
			{ label: "备注", prop: "remark", width: 120 },
			{ label: "备注2", prop: "remark2", width: 120 },
			{ label: "备注3", prop: "remark3", width: 120 },
			{ label: "备注4", prop: "remark4", width: 120 },
			{ label: "备注5", prop: "remark5", width: 120 },
			{ label: "创建时间", prop: "createTime", width: 150 },
			{ label: "创建人", prop: "createPerson", width: 120 },
			{ label: "导入时间", prop: "importTime", width: 150 },
			{ label: "导入人", prop: "importPerson", width: 120 },
		];
		return tempsTabs;
	  },
	  ...mapGetters(["userInfo"]), //获取当前用户信息
	},
	methods: {
	  //抽屉
	  handleDrawerOpen(param) {
		this.drawer = true;
		var parentId = param.id; //传入的是总成id
		this.customerInfos = [
		  {
			ParentId: parentId,
		  },
		];
	  },
	  handleDrawerClose(done) {
		done();
	  },
	  /** 导出功能 */
	  handleDownload() {
		this.listLoading = true;
		console.log("计划管理导出条件：" + JSON.stringify(this.listQuery));
		this.$axios
		  .posts("/api/newjit/import-record/export", this.listQuery)
		  .then((res) => {
			let filename = res.item;
			this.$axios
			  .BolbGets("/api/newjit/exclude-part-cfg/download/" + filename)
			  .then((response) => {
				if (filename.indexOf("_") != -1) {
				  let downName =
					filename.slice(0, filename.lastIndexOf("_")) +
					filename.slice(filename.lastIndexOf("."));
				  downloadFile(response, downName);
				  this.$notify({
					title: "成功",
					message: "数据-导出成功！",
					type: "success",
					duration: 2000,
				  });
				} else {
				  downloadFile(response, filename);
				  this.$notify({
					title: "成功",
					message: "数据-导出成功！",
					type: "success",
					duration: 2000,
				  });
				}
				this.listLoading = false;
			  })
			  .catch(() => {
				this.listLoading = false;
			  });
		  });
	  },

	  /** 重置按钮操作 */
	  resetQuery(refName) {
		this.$refs[refName].resetFields();
		this.handleQuery();
	  },
	  /** 搜索按钮操作 */
	  handleQuery() {
		this.listQuery.SkipCount = 1;
		//this.getList();
	  },
	  selectValue(params) {
		//版本下拉选择
		this.versionValue = params.value;
		this.getList();
	  },
  
	  selectOptionsChange(item) {
		this.getList();
	  },
	  //关闭导入窗体时调用
	  importClose() {
		this.showExcelImport = false;
	  },
	  // 导入后回调
	  importCallback(){
		this.importClose()
		this.getList();
	  },
	  /** 刷新列表 */
	  handleHandle(data) {
		if (data.type !== "edit") {
		  this.getList();
		}
	  },
	  /** 格式化字段 */
	  fieldFormatter(row, column) {
		return row[column.property] || "--";
	  },
	  roleFilter(type) {
		return projectTypeKeyValue[type];
		
	  },
   
	  getList(data){
		this.listLoading = true;
		if (data != undefined) {
		this.listQuery.SkipCount = (this.page - 1) * data.limit;
		} else {
		this.listQuery.SkipCount = (this.page - 1) * this.listQuery.MaxResultCount;
		}
		this.dialogTableVisible = true;
		this.$axios.gets("/api/newjit/import-record/list", this.listQuery)
		.then((response) => {
			this.list = response.items;
			this.totalCount = response.totalCount;
			setTimeout(() => {
			//大数据量加载时
			this.listLoading = false;
			}, 500);
		})
		.catch(() => {
			this.listLoading = false;
		});  
	  },
	  handleFilter() {
	   this.dialogTableVisible = false;
		this.page = 1;
		this.getList();
	  },
	  sortChange(data) {
		const { prop, order } = data;
		if (!prop || !order) {
		  this.handleFilter();
		  return;
		}
		this.listQuery.Sorting = prop + " " + order;
		this.handleFilter();
	  },
  
	  handleSelectionChange(val) {
		this.multipleSelection = val;
	  },
	  handleRowClick(row, column, event) {
		this.$refs.multipleTable.clearSelection();
		this.$refs.multipleTable.toggleRowSelection(row);
	  },
	  handleImport() {
		//导入
		this.showExcelImport = true;
	  },
	},
  };
  </script>
  
  
  <style lang="scss" scoped>
  @import "../../../pg-fis/styles/crmtable.scss";
  </style>