Commit 329e6df2 authored by 仇晓婷's avatar 仇晓婷

Merge branch 'product' of http://git.mes123.com/zhouyx/mes-ui into product

parents 4a4ee0ca dafab4ae
<template>
<div>
<DataGrid
:columns="columns"
ref="grid"
:draggable="true"
:data="list"
:high="false"
@on-drag-drop="onDragDrop"
:page="false"
@on-selection-change="onSelect"
:batch="true"
:border="true"
:easy="false"
>
<template slot="searchBack"></template>
<template slot="searchForm">
<Search />
</template>
<template slot="buttons">
<DatePicker
type="date"
placeholder="设置基准日期"
style="width: 150px;"
v-model="entity.setTime"
@on-change="getTime"
></DatePicker>
<Button type="primary" @click="openApsModal">智能排产</Button>
</template>
<template slot="batch">
<Button type="primary" class="mr10 ml10" @click="removeOk">移出排产</Button>
</template>
<div>
<DataGrid :columns="columns" ref="grid" :draggable="true" :data="list" :high="false" @on-drag-drop="onDragDrop" :page="false" @on-selection-change="onSelect" :batch="true" :border="true" :easy="false">
<template slot="searchBack"></template>
<template slot="searchForm">
<Search />
</template>
<template slot="buttons">
<Select v-model="rulesAi" multiple style="width:280px;" class="tl">
<Option v-for="item in rulesAiList" :value="item.value" :key="item.value">{{ item.label }}</Option>
</Select>
<DatePicker type="date" placeholder="设置基准日期" style="width: 150px;" v-model="entity.setTime" @on-change="getTime"></DatePicker>
<Button type="primary" @click="openApsModal">智能排产</Button>
</template>
<template slot="batch">
<Button type="primary" class="mr10 ml10" @click="removeOk">移出排产</Button>
</template>
</DataGrid>
<Modal v-model="apsModal" title="确定智能排产" @on-ok="apsOk" @on-cancel="cancel">
<p>确定进行智能排产?</p>
<p>确定进行智能排产?</p>
</Modal>
<Modal v-model="resultModal" title="数据检查" width="1500" @on-ok="cancel" @on-cancel="cancel">
<CheckResult :data="result"></CheckResult>
<CheckResult :data="result"></CheckResult>
</Modal>
<Modal v-model="apsCheckModal" title="确定智能排产" @on-ok="apsCheckOk" @on-cancel="cancel">
<p>已有排产方案,是否移出排产池?</p>
<p>已有排产方案,是否移出排产池?</p>
</Modal>
<Modal v-model="circleModal" title footer-hide :mask-closable="false">
<div slot="close"></div>
<Row>
<Col class="demo-spin-col" span="24">
<Spin fix>
<Icon type="ios-loading" size="36" class="demo-spin-icon-load"></Icon>
<div>智能排产进行中......</div>
</Spin>
</Col>
</Row>
<div slot="close"></div>
<Row>
<Col class="demo-spin-col" span="24">
<Spin fix>
<Icon type="ios-loading" size="36" class="demo-spin-icon-load"></Icon>
<div>智能排产进行中......</div>
</Spin>
</Col>
</Row>
</Modal>
</div>
</div>
</template>
<script>
var myDate = new Date();
var nowDate = myDate.getFullYear() + "-" + (myDate.getMonth() + 1) + "-" + myDate.getDate();
......@@ -64,533 +50,571 @@ import Duration from "./duration";
import Expand from "./components/excute";
import CheckResult from "./components/check";
export default {
name: "list",
components: {
Add,
Expand,
Temp,
Duration,
CheckResult,
},
data() {
return {
action: Api.index,
easySearch: {
keys: { op: "notes", value: null },
},
result: {
res: true,
datas: "{}",
},
resultModal: false,
entity: {
setTime:this.getFormatDate(nowDate)
},
editModal: false,
detailModal: false,
deletelModal: false,
apsModal: false,
apsCheckModal: false,
tempParams: null,
insertTItle1: "插单",
rowIndex1: null,
list: [],
curId: 0,
columns: [
{
key: "move",
title: " ",
hide: false,
align: "center",
width: 30,
render: (h, params) => {
return h("Icon", {
attrs: {
type: "md-more",
size: 18,
},
class: "drag",
});
},
},
{
type: "expand",
width: 50,
render: (h, params) => {
return h(Expand, {
props: {
rowId: params.row.part_task_pk,
},
name: "list",
components: {
Add,
Expand,
Temp,
Duration,
CheckResult,
},
data() {
return {
action: Api.index,
easySearch: {
keys: {
op: "notes",
value: null
},
},
result: {
res: true,
datas: "{}",
},
resultModal: false,
entity: {
setTime: this.getFormatDate(nowDate),
rules: '',
},
editModal: false,
detailModal: false,
deletelModal: false,
apsModal: false,
apsCheckModal: false,
tempParams: null,
insertTItle1: "插单",
rowIndex1: null,
list: [],
curId: 0,
columns: [{
key: "move",
title: " ",
hide: false,
align: "center",
width: 30,
render: (h, params) => {
return h("Icon", {
attrs: {
type: "md-more",
size: 18,
},
class: "drag",
});
},
},
{
type: "expand",
width: 50,
render: (h, params) => {
return h(Expand, {
props: {
rowId: params.row.part_task_pk,
},
});
},
},
{
key: "selection",
type: "selection",
width: 50,
align: "center",
},
{
key: "id",
title: this.l("id"),
hide: true,
align: "left",
sortable: true,
width: 50,
},
{
key: "mesCode",
title: this.l("mes_code"),
align: "left",
high: true,
width: 240,
},
{
key: "product_name",
title: this.l("product_name"),
align: "left",
high: true,
},
{
key: "drawingnum",
title: this.l("drawingnum"),
align: "left",
high: true,
},
{
key: "project_no",
title: this.l("project_no"),
align: "left",
high: true,
},
{
key: "batchnum",
title: this.l("batchnum"),
align: "left",
high: true,
},
{
key: "urgency_level",
title: this.l("urgency_level"),
align: "left",
high: true,
code: "plan.order.urgencyLevel",
width: 100,
},
{
key: "priority",
title: this.l("priority"),
align: "left",
high: true,
hide: true,
render: (h, params) => {
return h("span", {}, params.index + 1);
},
},
{
key: "plan_qty",
title: this.l("plan_qty"),
align: "right",
width: 100,
high: true,
},
{
key: "spare_qty",
title: this.l("spare_qty"),
align: "right",
width: 100,
high: true,
hide: true,
},
{
key: "plan_start",
title: this.l("plan_start"),
align: "center",
high: true,
hide: true,
resizable: true,
width: 150,
},
{
key: "plan_finish",
title: this.l("plan_finish"),
align: "center",
high: true,
hide: true,
sortable: true,
resizable: true,
width: 150,
},
{
key: "notes",
title: this.l("notes"),
align: "left",
easy: true,
high: true,
hide: true,
},
{
key: "demand_start",
title: this.l("demand_start"),
align: "center",
resizable: true,
width: 150,
type: "date",
},
{
key: "demand_finish",
title: this.l("demand_finish"),
align: "center",
high: true,
resizable: true,
width: 150,
type: "date",
},
{
key: "badjustflag",
title: this.l("badjustflag"),
align: "left",
high: true,
hide: true,
},
{
title: "操作",
key: "action",
width: 140,
align: "center",
// fixed:"right",
render: (h, params) => {
return h("div", {
class: "action"
}, [
h("op", {
attrs: {
icon: "md-refresh",
type: "icon",
title: "恢复工序",
oprate: "edit",
msg: "确认要恢复工序吗?",
},
on: {
click: () => this.refresh(params.row.part_task_pk)
},
}),
h("op", {
attrs: {
icon: "ios-trash",
type: "icon",
title: "移出排产池",
oprate: "delete",
msg: "确认要移出排产吗?",
},
on: {
click: () => this.remove(params.row.part_task_pk)
},
}),
]);
},
},
],
arrPartPkId: [],
//设置参数开始
setParams: {
opTaskPk: 0, //工单ID
partTaskPk: 0, //生产计划ID
taskSeq: "", //工序编号
count: 0, //生产计划数量
},
//设置参数结束
circleModal: false, //进度条
tempStatu: 0, //新建模型时传过来的id值
rulesAi: ['1', '2', '3', '4'],
rulesAiList: [{
value: '1',
label: '转序'
}, {
value: '2',
label: '多台'
}, {
value: '3',
label: '加班'
}, {
value: '4',
label: '公休'
}]
};
},
mounted() {
this.loadList();
},
async fetch({
store,
params
}) {
await store.dispatch("loadDictionary"); // 加载数据字典
},
methods: {
//排产池加载数据列表
loadList() {
Api.getall().then((res) => {
if (res.success) {
this.list = res.result;
}
});
},
},
{
key: "selection",
type: "selection",
width: 50,
align: "center",
},
{
key: "id",
title: this.l("id"),
hide: true,
align: "left",
sortable: true,
width: 50,
},
{
key: "mesCode",
title: this.l("mes_code"),
align: "left",
high: true,
width: 240,
},
{
key: "product_name",
title: this.l("product_name"),
align: "left",
high: true,
},
{
key: "drawingnum",
title: this.l("drawingnum"),
align: "left",
high: true,
},
{
key: "project_no",
title: this.l("project_no"),
align: "left",
high: true,
detail(id) {
this.detailModal = true;
this.curId = id;
},
{
key: "batchnum",
title: this.l("batchnum"),
align: "left",
high: true,
edit(id) {
this.editModal = true;
this.curId = id;
},
{
key: "urgency_level",
title: this.l("urgency_level"),
align: "left",
high: true,
code: "plan.order.urgencyLevel",
width: 100,
refresh(partPkId) {
//恢复工序
let params = {
id: partPkId,
};
Api.recoveryoptasksimluate(params).then((r) => {
if (r.success) {
this.$Message.success("恢复成功");
this.list = [];
this.loadList();
}
});
},
{
key: "priority",
title: this.l("priority"),
align: "left",
high: true,
hide: true,
render: (h, params) => {
return h("span", {}, params.index + 1);
},
remove(partPkId) {
//移出排产池
this.tempParams = null;
let paramsArry = [];
if (partPkId.constructor == Array) {
paramsArry = partPkId;
} else {
paramsArry.push(partPkId);
}
let params = {
partPks: paramsArry,
};
Api.beforeshiftoutapspool(params)
.then((res) => {
if (res.success) {
if (res.result) {
this.checkapspool(params);
} else {
this.tempParams = null;
this.tempParams = params;
this.apsCheckModal = true;
}
} else {
this.$Message.error("校验失败");
}
})
.catch((err) => {
this.$Message.error("连接错误1");
});
},
{
key: "plan_qty",
title: this.l("plan_qty"),
align: "right",
width: 100,
high: true,
apsCheckOk() {
this.checkapspool(this.tempParams);
},
{
key: "spare_qty",
title: this.l("spare_qty"),
align: "right",
width: 100,
high: true,
hide: true,
checkapspool(params) {
Api.shiftoutapspool(params)
.then((r) => {
if (r.success) {
this.$Message.success("移出排产池操作成功");
this.loadList();
//移出排产后将aps对应的store数量去掉
this.$store.commit(
"setCountAps",
this.$store.state.countAps - params.partPks.length
);
} else {
this.$Message.error("移出排产池操作失败");
}
})
.catch((err) => {
this.$Message.error("连接失败2");
});
},
{
key: "plan_start",
title: this.l("plan_start"),
align: "center",
high: true,
hide: true,
resizable: true,
width: 150,
onSelect(a, b) {
//批量选择
let selectRows = a;
this.arrPartPkId = [];
selectRows.forEach((e) => {
this.arrPartPkId.push(e.part_task_pk);
});
},
{
key: "plan_finish",
title: this.l("plan_finish"),
align: "center",
high: true,
hide: true,
sortable: true,
resizable: true,
width: 150,
removeOk() {
//批量选择移出排产池
this.remove(this.arrPartPkId);
},
{
key: "notes",
title: this.l("notes"),
align: "left",
easy: true,
high: true,
hide: true,
removeCancel() {
this.deletelModal = false;
},
{
key: "demand_start",
title: this.l("demand_start"),
align: "center",
resizable: true,
width: 150,
type: "date",
cancel() {
this.curId = 0;
this.detailModal = false;
this.editModal = false;
this.deletedlModal = false;
this.apsModal = false;
this.apsCheckModal = false;
this.resultModal = false;
},
{
key: "demand_finish",
title: this.l("demand_finish"),
align: "center",
high: true,
resizable: true,
width: 150,
type: "date",
onDragDrop(a, b) {
//拖拽排序
//this.list.splice(b, 1, ...this.list.splice(a, 1, this.list[b]));
let tempArray = this.list[a];
this.list.splice(a, 1);
this.list.splice(b, 0, tempArray);
},
{
key: "badjustflag",
title: this.l("badjustflag"),
align: "left",
high: true,
hide: true,
l(key) {
let vkey = "mes_part_task_plan_simulate" + "." + key;
return this.$t(vkey) || key;
},
{
title: "操作",
key: "action",
width: 140,
align: "center",
// fixed:"right",
render: (h, params) => {
return h("div", { class: "action" }, [
h("op", {
attrs: {
icon: "md-refresh",
type: "icon",
title: "恢复工序",
oprate: "edit",
msg: "确认要恢复工序吗?",
},
on: { click: () => this.refresh(params.row.part_task_pk) },
}),
h("op", {
attrs: {
icon: "ios-trash",
type: "icon",
title: "移出排产池",
oprate: "delete",
msg: "确认要移出排产吗?",
},
on: { click: () => this.remove(params.row.part_task_pk) },
}),
]);
},
getTime(value) {
this.entity.getTime = value;
},
],
arrPartPkId: [],
//设置参数开始
setParams: {
opTaskPk: 0, //工单ID
partTaskPk: 0, //生产计划ID
taskSeq: "", //工序编号
count: 0, //生产计划数量
},
//设置参数结束
circleModal: false, //进度条
tempStatu: 0, //新建模型时传过来的id值
};
},
mounted() {
this.loadList();
},
async fetch({ store, params }) {
await store.dispatch("loadDictionary"); // 加载数据字典
},
methods: {
//排产池加载数据列表
loadList() {
Api.getall().then((res) => {
if (res.success) {
this.list = res.result;
}
});
},
detail(id) {
this.detailModal = true;
this.curId = id;
},
edit(id) {
this.editModal = true;
this.curId = id;
},
refresh(partPkId) {
//恢复工序
let params = {
id: partPkId,
};
Api.recoveryoptasksimluate(params).then((r) => {
if (r.success) {
this.$Message.success("恢复成功");
this.list = [];
this.loadList();
}
});
},
remove(partPkId) {
//移出排产池
this.tempParams = null;
let paramsArry = [];
if (partPkId.constructor == Array) {
paramsArry = partPkId;
} else {
paramsArry.push(partPkId);
}
let params = {
partPks: paramsArry,
};
Api.beforeshiftoutapspool(params)
.then((res) => {
if (res.success) {
if (res.result) {
this.checkapspool(params);
openApsModal() {
if (this.entity.setTime != "") {
this.apsModal = true;
} else {
this.tempParams = null;
this.tempParams = params;
this.apsCheckModal = true;
this.$Message.error("请设置基准日期");
}
} else {
this.$Message.error("校验失败");
}
})
.catch((err) => {
this.$Message.error("连接错误1");
});
},
apsCheckOk() {
this.checkapspool(this.tempParams);
},
checkapspool(params) {
Api.shiftoutapspool(params)
.then((r) => {
if (r.success) {
this.$Message.success("移出排产池操作成功");
this.loadList();
//移出排产后将aps对应的store数量去掉
this.$store.commit(
"setCountAps",
this.$store.state.countAps - params.partPks.length
);
} else {
this.$Message.error("移出排产池操作失败");
}
})
.catch((err) => {
this.$Message.error("连接失败2");
});
},
onSelect(a, b) {
//批量选择
let selectRows = a;
this.arrPartPkId = [];
selectRows.forEach((e) => {
this.arrPartPkId.push(e.part_task_pk);
});
},
removeOk() {
//批量选择移出排产池
this.remove(this.arrPartPkId);
},
removeCancel() {
this.deletelModal = false;
},
cancel() {
this.curId = 0;
this.detailModal = false;
this.editModal = false;
this.deletedlModal = false;
this.apsModal = false;
this.apsCheckModal = false;
this.resultModal = false;
},
onDragDrop(a, b) {
//拖拽排序
//this.list.splice(b, 1, ...this.list.splice(a, 1, this.list[b]));
let tempArray = this.list[a];
this.list.splice(a, 1);
this.list.splice(b, 0, tempArray);
},
l(key) {
let vkey = "mes_part_task_plan_simulate" + "." + key;
return this.$t(vkey) || key;
},
getTime(value) {
this.entity.getTime = value;
},
openApsModal() {
if (this.entity.setTime != "") {
this.apsModal = true;
} else {
this.$Message.error("请设置基准日期");
}
},
},
//确定智能排产
apsOk() {
this.circleModal = true;
//智能排产前订单优先级功能
let parmsOrderpriority = { alls: [] };
let arryIds = [];
this.list.forEach((e, index) => {
let objIds = {};
objIds.orderId = e.part_task_pk;
objIds.priority = index + 1;
arryIds.push(objIds);
});
parmsOrderpriority.alls = arryIds;
Api.orderpriority(parmsOrderpriority)
.then((res) => {
if (res.success) {
if (res.result) {
//this.$Message.success("排序成功");
//智能排产前检查
Api.apsdatachecked()
.then((res1) => {
if (res1.success) {
this.checkOk();
} else {
// this.circleModal = false;
// this.$Message.error("操作失败:数据校验");
this.result = res1.result;
this.resultModal = true;
}
//确定智能排产
apsOk() {
this.circleModal = true;
//智能排产前订单优先级功能
let parmsOrderpriority = {
alls: []
};
let arryIds = [];
this.list.forEach((e, index) => {
let objIds = {};
objIds.orderId = e.part_task_pk;
objIds.priority = index + 1;
arryIds.push(objIds);
});
parmsOrderpriority.alls = arryIds;
Api.orderpriority(parmsOrderpriority)
.then((res) => {
if (res.success) {
if (res.result) {
//this.$Message.success("排序成功");
//智能排产前检查
Api.apsdatachecked()
.then((res1) => {
if (res1.success) {
this.checkOk();
} else {
// this.circleModal = false;
// this.$Message.error("操作失败:数据校验");
this.result = res1.result;
this.resultModal = true;
}
})
.catch(
function (err) {
this.circleModal = false;
this.$Message.error("操作失败");
}.bind(this)
);
} else {
this.circleModal = false;
this.$Message.error("排序失败,请重新智能排产操作");
}
} else {
this.circleModal = false;
this.$Message.error("操作失败:排序");
}
})
.catch(
function (err) {
this.circleModal = false;
this.$Message.error("操作失败");
}.bind(this)
function (err) {
this.circleModal = false;
this.$Message.error("操作失败");
}.bind(this)
);
} else {
this.circleModal = false;
this.$Message.error("排序失败,请重新智能排产操作");
}
} else {
this.circleModal = false;
this.$Message.error("操作失败:排序");
}
})
.catch(
function (err) {
this.circleModal = false;
this.$Message.error("操作失败");
}.bind(this)
);
},
checkOk() {
//排产计算
let paramsTime = {
setTime: this.entity.setTime,
};
Api.apsprepareandcalc(paramsTime)
.then((res2) => {
if (res2.success) {
if (res2.result.res) {
// this.$Message.success("排产计算成功");
//智能排产操作start
Api.aischedule(paramsTime).then((res3) => {
if (res3.success) {
if (res3.result.res) {
this.$Message.success("排产成功");
this.circleModal = false;
this.$router.push({
path: "/aps/results",
// params: { customerId: id }
});
} else {
this.circleModal = false;
this.$Message.error(res3.result.msg);
}
}
});
//智能排产操作end
} else {
this.circleModal = false;
this.$Message.error(res2.result.msg);
}
} else {
this.circleModal = false;
this.$Message.error("操作失败:排产计算");
}
})
.catch(
function (err) {
this.circleModal = false;
this.$Message.error("操作失败");
}.bind(this)
);
},
},
checkOk() {
//排产计算
let paramsTime = {
setTime: this.entity.setTime,
rules: JSON.stringify(this.rulesAi).replace('[', '').replace(']', '').replace(/\"/g, '')
};
Api.apsprepareandcalc(paramsTime)
.then((res2) => {
if (res2.success) {
if (res2.result.res) {
// this.$Message.success("排产计算成功");
//智能排产操作start
Api.aischedule(paramsTime).then((res3) => {
if (res3.success) {
if (res3.result.res) {
this.$Message.success("排产成功");
this.circleModal = false;
this.$router.push({
path: "/aps/results",
// params: { customerId: id }
});
} else {
this.circleModal = false;
this.$Message.error(res3.result.msg);
}
}
});
//智能排产操作end
} else {
this.circleModal = false;
this.$Message.error(res2.result.msg);
}
} else {
this.circleModal = false;
this.$Message.error("操作失败:排产计算");
}
})
.catch(
function (err) {
this.circleModal = false;
this.$Message.error("操作失败");
}.bind(this)
);
},
getFormatDate(dates) {
const d = new Date(dates);
const resDate =
d.getFullYear() +
"-" +
this.p(d.getMonth() + 1) +
"-" +
this.p(d.getDate()) +
" 00:00:01";
return resDate;
getFormatDate(dates) {
const d = new Date(dates);
const resDate =
d.getFullYear() +
"-" +
this.p(d.getMonth() + 1) +
"-" +
this.p(d.getDate()) +
" 00:00:01";
return resDate;
},
p(s) {
return s < 10 ? "0" + s : s;
}
},
p(s) {
return s < 10 ? "0" + s : s;
}
},
};
</script>
<style lang="less">
.drag {
cursor: move;
cursor: move;
}
.demo-spin-icon-load {
animation: ani-demo-spin 1s linear infinite;
animation: ani-demo-spin 1s linear infinite;
}
@keyframes ani-demo-spin {
from {
transform: rotate(0deg);
}
50% {
transform: rotate(180deg);
}
to {
transform: rotate(360deg);
}
from {
transform: rotate(0deg);
}
50% {
transform: rotate(180deg);
}
to {
transform: rotate(360deg);
}
}
.demo-spin-col {
height: 100px;
position: relative;
border: 0px solid #eee;
height: 100px;
position: relative;
border: 0px solid #eee;
}
.vertical-center-modal {
display: flex;
align-items: center;
justify-content: center;
display: flex;
align-items: center;
justify-content: center;
.ivu-modal {
top: 0;
}
.ivu-modal {
top: 0;
}
}
.tempModal {
.ivu-modal-body {
padding: 16px;
font-size: 14px;
line-height: 1.5;
padding-top: 2px;
padding-bottom: 0px;
}
.ivu-modal-footer {
border-top: none;
padding: 12px 18px 12px 18px;
text-align: right;
}
.ivu-modal-body {
padding: 16px;
font-size: 14px;
line-height: 1.5;
padding-top: 2px;
padding-bottom: 0px;
}
.ivu-modal-footer {
border-top: none;
padding: 12px 18px 12px 18px;
text-align: right;
}
}
</style>
<template>
<div class="h100">
<Tabs type="card" width="100">
<TabPane label="excel数据">
<TablePaste hide-table :input-props="inputProps" @on-success="handleSuccess" @on-error="handleError" />
</TabPane>
<TabPane label="预览">
<Table border="true" :columns="columnsImport" :data="excelData" :height="tableHeight" ref="tableExcel" class="tableCommon"></Table>
</TabPane>
</Tabs>
</div>
</template>
<script>
import Api from "./api";
export default {
name: "detailExcel",
data() {
return {
entity: {},
downUrl: fileUrlDown,
fileUrlPath: "",
excelRows: 100,
tableHeight: '',
inputProps: {
rows: 10,
placeholder: "请从Excel复制一段表格数据,粘贴在这里",
},
};
},
props: {
eid: Number,
},
created() {
this.excelRows = parseInt((window.innerHeight - 231) / 21) + 1;
this.inputProps.rows = this.excelRows
this.tableHeight = window.innerHeight - 200
},
mounted() {
window.onresize = () => {
///浏览器窗口大小变化
return (() => {
window.screenHeight = window.innerHeight;
this.excelRows = parseInt((window.screenHeight - 231) / 21) + 1;
this.inputProps.rows = this.excelRows
this.tableHeight = window.innerHeight - 200
})();
};
},
methods: {
load(v) {
Api.get({
id: v,
}).then((r) => {
this.entity = r.result;
this.$emit("on-load");
});
},
handleClose() {
this.$emit("on-close");
},
downFile(path) {
//alert(path)
let truePath = path;
if (truePath.length > 2) {
if (
truePath.substring(0, 7).toLowerCase() == "http://" ||
truePath.substring(0, 8).toLowerCase() == "https://"
) {
window.open(truePath, "_blank");
} else {
this.fileUrlPath = this.downUrl + path;
window.open(this.fileUrlPath, "_blank");
}
}
},
l(key) {
key = "import_center" + "." + key;
return this.$t(key);
},
},
watch: {
eid(v) {
if (v > 0) {
this.load(v);
}
},
},
};
</script>
<template>
<div class="content">
<div class="table-content">
<TablePaste hide-table :input-props="inputProps" @on-success="handleSuccess" @on-error="handleError" v-show="showTablePaste" />
<DataGrid border :height="tdHeightExcel" :columns="columnsImport" :data="excelData" :page="false" :set="false">
<template slot="easySearch">
<div class="table-tools">
<div class="table-search">
<Form inline>
<FormItem>
<span>导入到</span>
......@@ -16,13 +16,6 @@
<FormItem>
<Button type="primary" @click="openInfoModal">导入</Button>
</FormItem>
</Form>
</template>
<template slot="buttons">
<Form inline>
<FormItem>
<Button @click="downFile">下载原始文件</Button>
</FormItem>
<FormItem>
<div style="height:34px;overflow: hidden;padding:0">
<Upload action :before-upload="beforeUpload" ref="uploadfile" :format="formatList">
......@@ -30,16 +23,43 @@
</Upload>
</div>
</FormItem>
</Form>
</div>
<div class="btns">
<Form inline>
<FormItem>
<a @click="downFile">
<Icon type="md-download" />{{entity.file}}
</a>
</FormItem>
<FormItem>
<a class="ml10 mr10" @click="resetTable">
<Icon type="md-eye" />预览
</a>
</FormItem>
<FormItem v-if="show">
<Button @click="openPaste" :type="btnType" :ghost="ghostStatus">{{btnTxt}}</Button>
</FormItem>
<FormItem>
<Button @click="resetTable">还原到原始文件</Button>
<RadioGroup value="0" type="button" @on-change="changeExcel">
<Radio label="0">
<Icon type="md-list" />列表
</Radio>
<Radio label="1">
<Icon type="md-clipboard" />Excel
</Radio>
</RadioGroup>
</FormItem>
</Form>
</template>
</DataGrid>
<FooterToolbar v-if="sheetNames.length>1">
</div>
</div>
<div class="table-main" ref="main">
<Table border="true" :columns="columnsImport" :data="excelData" :height="tdHeightExcel" ref="table" class="tableCommon" v-if="tableImport"></Table>
<component :is="detailExcel" />
</div>
<FooterToolbar v-if="sheetNames.length>1&&tableImport">
<Form inline>
<FormItem>
<Tabs :animated="false" :value="0" @on-click="sheetClick">
......@@ -71,6 +91,8 @@ export default {
downUrl: fileUrlDown,
fileUrlPath: "",
disabled: false,
detailExcel: null,
tableImport: true,
columns0: [{
key: "userName",
title: this.l("userName"),
......@@ -424,7 +446,7 @@ export default {
useData.push(objTm);
});
//对列表里的数据字典项进行处理
//对列表里的部门及数据字典项进行处理
useData.forEach(eles => {
//如果导入文件没有departmentid,但存在departmentTitle的话,通过title获取id
if (
......@@ -551,10 +573,10 @@ export default {
pageChange(val) {
switch (val) {
case 0:
this.loadColum(this.columns0);
//this.loadColum(this.columns0);
break;
case 1:
this.loadColum(this.columns1);
//this.loadColum(this.columns1);
break;
case undefined:
if (this.dataType == 0) {
......@@ -564,7 +586,7 @@ export default {
}
break;
default:
this.loadColum(this.columns1);
//this.loadColum(this.columns1);
}
},
handleClose() {
......@@ -704,6 +726,16 @@ export default {
}
});
},
changeExcel(val) {
if (val == 1) {
this.tableImport = false
this.detailExcel = () => import("./detailExcel");
} else {
this.detailExcel = null;
this.tableImport = true
}
},
l(key) {
key = "user" + "." + key;
return this.$t(key);
......@@ -720,7 +752,54 @@ export default {
</script>
<style lang="less">
.content {
.table-content {
position: relative;
height: 100%;
display: flex;
flex-direction: column;
.tip {
display: inline;
}
form {
display: inline-block;
.ivu-form-item {
margin: 0;
vertical-align: middle;
}
}
.table-main {
width: 100%;
text-align: left;
padding: 0;
display: block;
overflow-y: auto;
flex-grow: 1;
tr td .ivu-table-cell {
padding: 0 5px;
}
overflow-x: hidden;
}
.table-tools {
display: flex;
line-height: 50px;
.table-search {
flex-grow: 1;
}
.btns {
min-width: 200px;
text-align: right;
}
}
.table-footer {
line-height: 45px;
background: #f5f5f5;
......@@ -728,6 +807,7 @@ export default {
.ivu-footer-toolbar {
text-align: left;
background: #f5f5f5;
.ivu-footer-toolbar-right {
float: left;
......
<template>
<div class="content">
<TablePaste hide-table :input-props="inputProps" @on-success="handleSuccess" @on-error="handleError" v-show="showTablePaste" />
<DataGrid border :height="tdHeightExcel" :columns="columnsImport" :data="excelData" :page="false" :set="false">
<template slot="easySearch">
<Form inline>
<FormItem>
<span>导入到</span>
</FormItem>
<FormItem>
<dictionary code="import.im.page" style="width:160px" @on-change="pageChange" v-model="pageType"></dictionary>
</FormItem>
<FormItem>
<div class="tip mr20">{{excelData.length}}条数据</div>
</FormItem>
<FormItem>
<Button type="primary" @click="openInfoModal">导入</Button>
</FormItem>
</Form>
</template>
<template slot="buttons">
<Form inline>
<FormItem>
<Button @click="downFile">下载原始文件</Button>
</FormItem>
<FormItem>
<div style="height:34px;overflow: hidden;padding:0">
<Upload action :before-upload="beforeUpload" ref="uploadfile" :format="formatList">
<Button icon="ios-cloud-upload-outline" @click="resetParms">重新上传</Button>
</Upload>
</div>
</FormItem>
<FormItem>
<Button @click="openPaste" :type="btnType" :ghost="ghostStatus">{{btnTxt}}</Button>
</FormItem>
<FormItem>
<Button @click="resetTable">还原到原始文件</Button>
</FormItem>
</Form>
</template>
</DataGrid>
<FooterToolbar v-if="sheetNames.length>1">
<Form inline>
<FormItem>
<Tabs :animated="false" :value="0" @on-click="sheetClick">
<TabPane :label="item" v-for="(item,index) in sheetNames"></TabPane>
</Tabs>
</FormItem>
</Form>
</FooterToolbar>
<Modal v-model="infoModal" title="提示信息" @on-ok="importOk">
<p>确定批量导入数据到<span class="red f16 fwBold ml10 mr10">用户管理</span>模块下?</p>
</Modal>
</div>
</template>
<script>
import Api from "./api";
import XLSX from "xlsx";
import {
Switch
} from "view-design";
export default {
name: "Edit",
data() {
return {
pageType: undefined,
tabVal: 0,
infoModal: false,
entity: {},
downUrl: fileUrlDown,
fileUrlPath: "",
disabled: false,
columns0: [{
key: "userName",
title: this.l("userName"),
align: "left",
easy: true,
},
{
key: "cardNo",
title: this.l("cardNo"),
align: "left",
easy: true,
high: true,
},
{
key: "gender",
title: this.l("gender"),
align: "center",
high: true,
code: "User.base.gender",
},
{
key: "birthday",
title: this.l("birthday"),
align: "center",
high: true,
type: "date",
},
{
key: "degreeId",
title: this.l("degreeId"),
align: "left",
high: true,
code: "User.base.degree",
},
{
key: "status",
title: this.l("status"),
align: "center",
high: true,
code: "User.base.status",
},
{
key: "departmentId",
title: this.l("departmentId"),
align: "right",
easy: true,
high: true,
},
{
key: "departmentTitle",
title: this.l("departmentTitle"),
align: "left",
easy: true,
high: true,
},
{
key: "roleTitles",
title: this.l("roleTitles"),
align: "left",
easy: true,
high: true,
hide: true,
render: (h, params) => {
return h(
"div", {
class: "action",
},
[
h(
"op", {
attrs: {
oprate: "detail",
class: params.row.roleTitles == null ||
params.row.roleTitles == "" ?
"empower" : "detail",
},
on: {
click: () => this.authorize(params.row.id),
},
},
params.row.roleTitles == null || params.row.roleTitles == "" ?
"授权" :
params.row.roleTitles
),
]
);
},
},
{
key: "accountId",
title: this.l("accountId"),
hide: true,
align: "left",
},
{
key: "phone",
title: this.l("phone"),
align: "left",
easy: true,
high: true,
},
{
key: "email",
title: this.l("email"),
align: "left",
easy: true,
high: true,
},
{
key: "licensedToWork",
title: this.l("licensedToWork"),
align: "left",
},
{
key: "positionId",
title: this.l("positionId"),
align: "left",
high: true,
code: "User.base.position",
},
{
key: "titleId",
title: this.l("titleId"),
align: "left",
high: true,
code: "User.base.jobtitle",
},
{
key: "creatorUserId",
title: this.l("creatorUserId"),
align: "left",
import: false,
hide: true,
},
{
key: "creationTime",
title: this.l("creationTime"),
align: "left",
import: false,
hide: true,
},
{
key: "lastModifierUserId",
title: this.l("lastModifierUserId"),
align: "left",
import: false,
hide: true,
},
{
key: "lastModificationTime",
title: this.l("lastModificationTime"),
align: "left",
import: false,
hide: true,
},
{
title: "操作",
key: "action",
width: 180,
align: "right",
import: false,
render: (h, params) => {
return h(
"div", {
class: "action",
},
[
h(
"op", {
attrs: {
oprate: "detail",
class: "empower",
},
on: {
click: () => this.syncAccount(params.row),
},
},
params.row.accountId == 0 ? "同步" : ""
),
h(
"op", {
attrs: {
oprate: "edit",
},
on: {
click: () => this.edit(params.row.id),
},
},
"编辑"
),
h(
"op", {
attrs: {
oprate: "remove",
},
on: {
click: () => this.remove(params.row),
},
},
"删除"
),
h(
"op", {
attrs: {
oprate: "detail",
},
on: {
click: () => this.openReset(params.row),
},
},
"重置密码"
),
]
);
},
},
],
columns1: [{
key: "userName",
title: this.l("userName"),
align: "left",
},
{
key: "status",
title: this.l("status"),
align: "center",
code: "User.base.status",
},
],
tdHeightExcel: "",
excelData: [],
excelDataBack: [], //临时存储原始数据
formatList: ["xlsx"],
columnsImport: [],
departArr: [], //部门list
sheetNames: [], //excel的表明
workBook: {},
openDatas: [],
dataType: 0,
//粘贴excel内容start
btnType: "default",
ghostStatus: false,
btnTxt: "打开粘贴Excel",
showTablePaste: false,
inputProps: {
rows: 10,
placeholder: "请从Excel复制一段表格数据,粘贴在这里",
},
};
},
props: {
eid: Number,
},
created() {
this.tdHeightExcel = window.innerHeight - 180;
//导出对列表头进行预加载start
this.$api.get(`${systemUrl}/Department/GetDepartments`).then((r) => {
this.departArr = r.result.items;
});
//导出对列表头进行预加载end
},
mounted() {
if (this.eid > 0) {
this.load(this.eid);
}
window.onresize = () => {
///浏览器窗口大小变化
return (() => {
window.screenHeight = window.innerHeight;
if (this.showTablePaste) {
this.tdHeightExcel = window.screenHeight - 180 - 220;
} else {
this.tdHeightExcel = window.screenHeight - 180;
}
})();
};
},
methods: {
load(v) {
Api.get({
id: v,
}).then((r) => {
this.entity = r.result || {};
});
this.dataType = 0;
this.sheetNames = [];
this.excelData = [];
this.excelDataBack = [];
Api.openExcel({
id: v,
}).then((res) => {
if (res.success) {
this.openDatas = res.result || [];
this.dealOpenTable(0);
//获取excel sheetname
if (res.result.length > 0) {
res.result.forEach((el) => {
this.sheetNames.push(el.title);
});
}
}
});
},
//加载原文件列表
dealOpenTable(val) {
this.excelData = this.openDatas[val].dataTable;
this.excelDataBack = this.openDatas[val].dataTable;
var tempCos = Object.keys(this.openDatas[val].dataTable[0]); //获取列表标题
this.columnsImport = [];
var headersNow = [];
tempCos.forEach((el) => {
let headObj = {};
headObj.title = el;
headObj.key = el;
headersNow.push(headObj);
});
this.columnsImport = headersNow;
},
//重新处理colum
loadColum(columns) {
let tempCol = this.$u.clone(columns);
tempCol.forEach((ele, index) => {
if (ele.key == "action") {
ele.hide = true;
}
});
this.columnsImport = tempCol;
//处理原始数据和表头进行对应
let temCol = this.$u.clone(this.columnsImport); //原始数据表头
let temColPage = this.$u.clone(columns); //需要显示的页面的表头
let temData = this.$u.clone(this.excelDataBack); //原始数据
let arrTitleUse = []; ////使用数据字典的字段
temColPage.forEach((elCode) => {
if (elCode.code) {
arrTitleUse.push({
key: elCode.key,
code: elCode.code,
});
}
});
let useData = []; //重新组织list列表数据
temData.forEach((elData, index) => {
let objTm = {};
temCol.forEach((elTitle) => {
objTm[elTitle.key] = elData[elTitle.title];
});
useData.push(objTm);
});
//对列表里的部门及数据字典项进行处理
useData.forEach(eles => {
//如果导入文件没有departmentid,但存在departmentTitle的话,通过title获取id
if (
eles.departmentTitle &&
eles.departmentTitle != "" &&
(!eles.departmentId || eles.departmentId == "")
) {
this.departArr.forEach((e) => {
if (eles.departmentTitle && eles.departmentTitle == e.name) {
eles.departmentId = e.id;
}
});
} else if (
//如果导入文件没有departmentTitle,但存在departmentid的话,通过id获取departmentTitle
eles.departmentId &&
eles.departmentId + "" != "" &&
(!eles.departmentTitle || eles.departmentTitle == "")
) {
this.departArr.forEach((e) => {
if (eles.departmentId && eles.departmentId == e.id) {
eles.departmentTitle = e.name;
}
});
}
arrTitleUse.forEach((elem) => {
if (eles[elem.key] && eles[elem.key] != "" && eles[elem.key] != null) {
//如果数据字典项对应的DirName字段存在,通过name查询到对应的code,然后赋值
eles[elem.key] = this.$u.dirCode(
this.$store.getters.dictionaryByKey(elem.code),
eles[elem.key]
);
}
});
})
this.excelData = useData;
},
//下载原excel文件
downFile() {
let truePath = this.entity.path;
if (truePath.length > 2) {
if (
truePath.substring(0, 7).toLowerCase() == "http://" ||
truePath.substring(0, 8).toLowerCase() == "https://"
) {
window.open(truePath, "_blank");
} else {
this.fileUrlPath = this.downUrl + this.entity.path;
window.open(this.fileUrlPath, "_blank");
}
}
},
//导入excel文件
//打开传时初始化
resetParms() {
this.pageType = undefined;
this.btnTxt = "打开粘贴Excel";
this.showTablePaste = false;
this.btnType = "default";
this.ghostStatus = false;
this.tdHeightExcel = window.innerHeight - 180;
},
async beforeUpload(file) {
//初始化
this.sheetNames = [];
this.workBook = {};
this.$refs.uploadfile.clearFiles(); //清除上一次上传文件列表
//上传成功后的读取到excel信息
this.workBook = await this.$u.readXLSX(file);
this.sheetNames = this.workBook.SheetNames; //execel里的表明
this.dealSheet(0); //默认显示第一个表
return false;
},
//对上传的excel表信息进行处理,不对表头进行处理
dealSheet(index) {
this.dataType = 1;
this.columnsImport = [];
this.excelData = [];
this.excelDataBack = [];
const sheet2JSONOpts = {
defval: "", //给defval赋值为空的字符串
};
var csv = XLSX.utils.sheet_to_csv(
this.workBook.Sheets[this.workBook.SheetNames[index]],
sheet2JSONOpts
);
var lines = csv.split("\n"); //第一行标题
var headers = lines[0].split(",");
var headersNow = [];
headers.forEach((elHead) => {
let headObj = {};
headObj.title = elHead;
headObj.key = elHead;
headersNow.push(headObj);
});
this.columnsImport = headersNow;
var result = [];
for (var i = 1; i < lines.length - 1; i++) {
var obj = {};
var currentline = lines[i].split(",");
for (var j = 0; j < headers.length; j++) {
obj[headers[j]] = currentline[j];
}
result.push(obj);
}
this.excelData = result;
this.excelDataBack = result;
},
//切换sheet表重新加载
sheetClick(val) {
this.tabVal = val
if (this.dataType == 0) {
this.dealOpenTable(val);
} else {
this.dealSheet(val);
}
if (this.pageType != undefined) {
this.pageChange(this.pageType)
}
},
//选择导入的模块 0:用户管理
pageChange(val) {
switch (val) {
case 0:
this.loadColum(this.columns0);
break;
case 1:
this.loadColum(this.columns1);
break;
case undefined:
if (this.dataType == 0) {
this.load(this.eid);
} else {
this.dealSheet(this.tabVal);
}
break;
default:
this.loadColum(this.columns1);
}
},
handleClose() {
this.$emit("on-close");
},
cancelExcel() {
this.excelData = [];
this.excelDataBack = [];
this.$refs.uploadfile.clearFiles();
let parms = {
status: 1,
id: this.eid
}
//导入中心列表数据状态更新
Api.updateimportstatus(parms).then(res => {
if (res.success) {
this.$emit("on-ok");
}
})
this.$emit("on-close");
},
//粘贴excel相关start
openPaste() {
if (this.btnTxt == "打开粘贴Excel") {
this.btnType = "primary";
this.ghostStatus = true;
this.showTablePaste = true;
this.btnTxt = "关闭粘贴Excel";
this.tdHeightExcel = window.innerHeight - 180 - 220;
} else {
this.btnType = "default";
this.ghostStatus = false;
this.showTablePaste = false;
this.btnTxt = "打开粘贴Excel";
this.tdHeightExcel = window.innerHeight - 180;
}
},
//粘贴excel成功
handleSuccess(tableData) {
//初始化数据
this.excelData = [];
this.excelDataBack = [];
this.columnsImport = [];
this.sheetNames = [];
this.pageType = undefined;
//处理colum和data
let tabColum = tableData.columns
let tabData = tableData.data
let arrData = []
tabData.forEach(ele => {
let objData = {}
tabColum.forEach(el => {
objData[el.title] = ele[el.key]
})
arrData.push(objData)
})
//处理title和key一致
tabColum.forEach(el => {
el.key = el.title
})
this.columnsImport = tabColum;
this.excelData = arrData;
this.excelDataBack = arrData;
},
//粘贴excel失败
handleError(tableData, errorIndex) {
//console.log(tableData, errorIndex);
this.$Message.error("表格数据有误");
},
//粘贴excel相关end
//重新加载excel
resetTable() {
this.pageType = undefined;
this.btnTxt = "打开粘贴Excel";
this.showTablePaste = false;
this.btnType = "default";
this.ghostStatus = false;
this.load(this.eid);
this.tdHeightExcel = window.innerHeight - 180;
},
openInfoModal() {
if (this.excelData.length > 0 && this.pageType != undefined) {
this.infoModal = true
} else {
if (this.excelData.length == 0) {
this.$Message.error("表【" + this.sheetNames[this.tabVal] + "】没有可导入的数据!")
} else if (this.pageType == undefined) {
this.$Message.error("请选择需要批量导入到的模块!")
}
}
},
//导入按钮操作
importOk() {
switch (this.pageType) {
case 0:
this.importUser();
break;
case 1:
this.loadColum(this.columns1);
break;
default:
this.loadColum(this.columns1);
}
},
//批量导入用户
importUser() {
let tempData = this.$u.clone(this.excelData);
let tempList = [];
tempData.forEach((ele) => {
let obj = {
userName: ele.userName,
cardNo: ele.cardNo,
gender: ele.gender,
birthday: ele.birthday,
degreeId: ele.degreeId,
departmentId: ele.departmentId,
status: ele.status,
phone: ele.phone,
email: ele.email,
licensedToWork: ele.licensedToWork,
positionId: ele.positionId,
titleId: ele.titleId,
departmentTitle: ele.departmentTitle,
};
tempList.push(obj);
});
let parms = {
list: tempList,
};
Api.importUser(parms).then((res) => {
if (res.success) {
this.$Message.success("批量导入用户管理成功!");
this.cancelExcel();
} else {
this.$Message.error("批量导入用户管理失败!");
}
});
},
l(key) {
key = "user" + "." + key;
return this.$t(key);
},
},
watch: {
eid(v) {
if (v != 0) {
this.load(v);
}
},
},
};
</script>
<style lang="less">
.content {
.table-footer {
line-height: 45px;
background: #f5f5f5;
}
.ivu-footer-toolbar {
text-align: left;
.ivu-footer-toolbar-right {
float: left;
}
}
}
</style>
......@@ -40,7 +40,7 @@ export const actions = {
if (res.result) {
util.cookies.set('uuid', res.result.userId);
util.cookies.set('tanantCode', res.result.tanantCode);
util.cookies.set('tenantCode', res.result.tenantCode );
util.cookies.set('token', res.result.accessToken);
sessionStorage.setItem('token', res.result.accessToken)
// // 设置 vuex 用户信息
......
Markdown is supported
0% or
You are about to add 0 people to the discussion. Proceed with caution.
Finish editing this message first!
Please register or to comment