Browse Source

【长春派格1.5】计划管理页面开发 + 普通导入组件封装

HQ
安虹睿 11 months ago
parent
commit
2a677a0a2f
  1. 178
      vue/src/components/ImportExcel-normal/index.vue
  2. 10
      vue/src/router/modules/fis.js
  3. 558
      vue/src/views/pg-fis/basedate/planControl/index.vue

178
vue/src/components/ImportExcel-normal/index.vue

@ -0,0 +1,178 @@
<template>
<el-dialog
:visible="show"
:title="title"
:append-to-body="true"
:close-on-click-modal="false"
width="600px"
@close="closeView"
v-loading="loading"
>
<el-upload
ref="upload"
class="avatar-uploader"
drag
action="#"
accept=".xlsx, .xls"
:http-request="httpRequestfiles"
:headers="httpHeader"
:file-list="fileuploadList"
:before-upload="beforeAvatarUpload"
:before-remove="beforeRemove"
:on-remove="handleRemove"
:on-change="handleChange"
:limit="10"
>
<i class="el-icon-upload"></i>
<div class="el-upload__text">
将文件拖到此处
<em>点击上传</em>
</div>
</el-upload>
<span slot="footer" class="dialog-footer">
<el-button @click="closeView" >取消</el-button>
<el-button type="primary" @click="sureClick">立即导入</el-button>
</span>
</el-dialog>
</template>
<script>
import { getToken } from "@/utils/auth"; // get token from cookie
export default {
name: "ImportExcelNormal",
props: {
show: {
type: Boolean,
default: false,
},
title:{
type: String,
default: "导入文件",
},
//
importURL:{
type: String,
default: null,
}
},
computed:{
httpHeader() {
//token
return {
Authorization: "Bearer " + getToken(),
};
},
},
watch: {
show: function (val) {
this.fileuploadList = []
}
},
data(){
return {
fileuploadList: [],
isLt2M: "",
loading:false
}
},
methods:{
//
closeView() {
this.$emit("update:show", false);
this.$emit("close");
},
httpRequestfiles(data) {
let _this = this;
let rd = new FileReader(); //
let file = data.file;
this.fileuploadList.push(file);
rd.readAsDataURL(file); // base64
},
beforeAvatarUpload(file) {
var FileExt = file.name.replace(/.+\./, "");
if (["xlsx"].indexOf(FileExt.toLowerCase()) === -1) {
this.$message({
type: "warning",
message: "只支持xlsx类型文件!",
});
this.isFileType = "0";
return false;
} else {
this.isFileType = "1";
}
this.isLt2M = file.size / 1024 / 1024 < 100 ? "1" : "0";
if (this.isLt2M === "0") {
this.$message.error("上传文件大小不能超过 100MB!");
}
return this.isLt2M === "1" ? true : false;
},
beforeRemove(file, fileList) {
if (this.isLt2M === "1" && this.isFileType === "1") {
return this.$confirm(`确定移除 ${file.name}`);
}
},
handleRemove(file, fileList) {
//
const index = this.fileuploadList.indexOf(file.originFileObj);
const newFileList = this.fileuploadList.slice();
newFileList.splice(index, 1);
this.fileuploadList = newFileList;
},
handleChange(file, fileList) {
this.fileuploadList = []
},
//
sureClick() {
if (
this.fileuploadList === [] ||
JSON.stringify(this.fileuploadList) === "[]"
) {
this.$message.error("请选择导入文件");
return false;
}
this.saveTemplateData();
},
saveTemplateData() {
this.loading = true;
if (JSON.stringify(this.fileuploadList) != "[]") {
let fd = new FormData();
const { fileuploadList } = this;
fileuploadList.forEach((file) => {
fd.append("files", file); //
});
const webapi = this.importURL;
this.$axios
.posts(webapi, fd)
.then(async (res) => {
this.loading = false;
if (res.status) {
this.$message({
message: "导入成功!",
type: "success",
});
this.$parent.importCallback()
} else {
this.$message({
message: res.message,
type: "error",
});
}
})
.catch(() => {
this.loading = false;
this.$message({
message: "导入失败!",
type: "error",
});
});
} else {
this.loading = false;
this.$message({
message: "未上传任何附件,请查检!",
type: "warning",
});
}
},
}
}
</script>

10
vue/src/router/modules/fis.js

@ -145,6 +145,16 @@ const pgfis = {
//roles: ['SettleAccount.Reports'], //roles: ['SettleAccount.Reports'],
icon: '客户零件' icon: '客户零件'
} }
},
{
path: '/pg-planControl',
component: () => import('@/views/pg-fis/basedate/planControl/index.vue'),
name: 'pg-planControl',//命名路由
meta: {
title: '计划管理',
//roles: ['SettleAccount.Reports'],
icon: '客户零件'
}
} }
] ]
} }

558
vue/src/views/pg-fis/basedate/planControl/index.vue

@ -0,0 +1,558 @@
<!--计划管理信息页-->
<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;//57footer79
});
},
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>
Loading…
Cancel
Save