<template>
|
<div id="tableContainer"
|
class="scrollCss"
|
:key="number">
|
<!-- @row-click="handleRowClick" v-el-table-infinite-scroll="load"
|
:infinite-scroll-disabled="infintedisabled" :style="{ height: $slots.default ? '91%' : '95%' }" -->
|
<el-table class="borderR8"
|
:data="tablelist"
|
v-loading="loading"
|
element-loading-text="拼命加载中"
|
element-loading-spinner="el-icon-loading"
|
highlight-current-row
|
:border="bordershow"
|
:show-summary="showSummary"
|
stripe
|
:cell-style="cellStyle"
|
height="100%"
|
style="height: calc(100% - 35px) !important"
|
:key="number"
|
@selection-change="handleSelectionChange"
|
@row-dblclick="rowdblclick"
|
@row-click="rowclick"
|
ref="tableCommon">
|
<el-table-column v-if="selectionShow"
|
type="selection"
|
header-align="center"
|
align="center"
|
width="55">
|
</el-table-column>
|
<el-table-column header-align="center"
|
type="index"
|
label="序号"
|
width="60"
|
v-if="containHead.length > 0"></el-table-column>
|
<template v-for="item in containHead">
|
<el-table-column header-align="left"
|
align="left"
|
:label="item.columnDescription"
|
:prop="item.columnName"
|
:key="item.columnName"
|
:sortable="item.sortable"
|
v-if="item.wipe && wipelist.indexOf(item.columnName) == -1"
|
:min-width="fixWidth(item.columnDescription)"
|
:width="item.width ? item.width : ''">
|
<template slot-scope="{ row }">
|
<!-- v-if="item.columnName != 'maxNum' && item.coucolumnName != 'image'" -->
|
<p :style="
|
item.columnName == 'stStatus' && row[item.columnName] == '预警'
|
? 'color: #f8b360'
|
: item.columnName == 'stStatus' && row[item.columnName] == '超期'
|
? 'color:#E36168'
|
: ''
|
"
|
v-if="plist.indexOf(item.columnName) == -1">
|
{{ row[item.columnName] }}
|
</p>
|
<el-image v-if="item.columnName == 'image'"
|
style="width: 35px; height: 35px"
|
:src="row[item.columnName]"
|
:preview-src-list="[row[item.columnName]]">
|
</el-image>
|
|
<p class=""
|
v-if="item.columnName == 'inOrderCode' && !row.edit">
|
{{ row[item.columnName] }}
|
</p>
|
<p class=""
|
v-if="item.columnName == 'maxNum' && !row.edit">
|
{{ row[item.columnName] }}
|
</p>
|
<p class=""
|
v-if="item.columnName == 'doTime' && !row.edit">{{ row[item.columnName] }}</p>
|
<el-input oninput="value=value.replace(/[^\d.]/g,'')"
|
size="mini"
|
v-if="row.edit && item.columnName == 'maxNum'"
|
v-model="row.maxNum"></el-input>
|
<el-select v-if="row.edit && item.columnName == 'inOrderCode'"
|
v-model="row.inOrderCode"
|
placeholder="请选择"
|
size="mini">
|
<el-option v-for="(item, index) in inOrderCodeList"
|
:key="index + 'inOrderCode'"
|
:label="item.inOrderCode"
|
:value="item.inOrderCode">
|
<span style="float: left">{{ item.inOrderCode }}</span>
|
<span style="float: right; color: #ff0000;font-weight:bold; font-size: 17px">{{ item.totalNum }}</span>
|
</el-option>
|
</el-select>
|
<el-date-picker style="width: 100%"
|
v-if="row.edit && item.columnName == 'doTime'"
|
v-model="row.doTime"
|
size="mini"
|
value-format="yyyy-MM-dd HH:mm:ss"
|
type="datetime"
|
placeholder="选择日期时间">
|
</el-date-picker>
|
</template>
|
</el-table-column>
|
</template>
|
|
<el-table-column v-if="operation"
|
:width="operationwidth"
|
fixed="right"
|
align="center">
|
<template slot="header"
|
slot-scope="scope">
|
<span>操作</span>
|
<span v-if="setshow"
|
class="set"
|
@click="modalShow = true">设置</span>
|
</template>
|
<template v-if="buttonshow"
|
slot-scope="scope">
|
<el-button class="elbuttonsize"
|
v-if="mustFirstShow"
|
:disabled="scope.row.taskStatus == '完成' || scope.row.taskStatus == '异常/取消'"
|
:style="
|
scope.row.taskStatus == '完成' || scope.row.taskStatus == '异常/取消'
|
? 'color: #909399'
|
: 'color: #f8b360'
|
"
|
@click.native.prevent="$emit('mustFirst', scope.row)"
|
type="text">
|
强制优先
|
</el-button>
|
|
<el-button class="elbuttonsize"
|
v-if="issuShow"
|
:disabled="scope.row.orderStatus != '未下发' && scope.row.orderStatus != '新建'"
|
:style="
|
scope.row.orderStatus == '未下发' || scope.row.orderStatus == '新建' ? 'color: #f8b360' : 'color: #909399'
|
"
|
@click.native.prevent="$emit('issu', scope.row)"
|
type="text">
|
下发
|
</el-button>
|
<!-- 完工品输入页面 -->
|
<el-button class="elbuttonsize"
|
v-if="relevanceShow"
|
:style="
|
'color: #426ab3'
|
"
|
@click.native.prevent="$emit('relevance', scope.row)"
|
type="text">
|
关联
|
</el-button>
|
<el-button class="elbuttonsize"
|
v-if="weldingAuditShow"
|
:style="
|
'color: #426ab3'
|
"
|
@click.native.prevent="$emit('weldingAudit', scope.row)"
|
type="text">
|
提交审核
|
</el-button>
|
<el-button class="elbuttonsize"
|
v-if="unlineCommitShow"
|
:style="
|
'color: #426ab3'
|
"
|
@click.native.prevent="$emit('unlineCommit', scope.row)"
|
type="text">
|
线下交付
|
</el-button>
|
<el-button class="elbuttonsize"
|
v-if="editShow"
|
style="color: #f8b360"
|
@click.native.prevent="edit(scope.row)"
|
type="text">
|
{{ scope.row.edit == true ? '保存' : scope.row.edit == false ? '编辑' : '编辑' }}
|
</el-button>
|
|
<el-button class="elbuttonsize"
|
v-if="maintask"
|
:disabled="scope.row.taskStatus == '完成' || scope.row.taskStatus == '异常/取消'"
|
:style="
|
scope.row.taskStatus == '完成' || scope.row.taskStatus == '异常/取消'
|
? 'color: #909399'
|
: 'color: #f8b360'
|
"
|
@click.native.prevent="$emit('abnormal', scope.row)"
|
type="text">
|
异常处理
|
</el-button>
|
<el-button class="elbuttonsize"
|
v-if="delShow"
|
style="color: #f8b360"
|
@click.native.prevent="del(scope.row)"
|
type="text">
|
删除
|
</el-button>
|
<el-button class="elbuttonsize"
|
v-if="viewShow"
|
style="color: #7fb80e"
|
@click.native.prevent="view(scope.row)"
|
type="text">
|
查看
|
</el-button>
|
<el-button v-if="passShow"
|
size="mini"
|
type="text"
|
:style="
|
'color:#1d953f'
|
"
|
@click.native.prevent="$emit('passCommit', scope.row)">
|
通过
|
</el-button>
|
<el-button v-if="rejectShow"
|
type="text"
|
size="mini"
|
:style="
|
'color: #d71345'
|
"
|
@click.native.prevent="$emit('rejectCommit', scope.row)">
|
驳回
|
</el-button>
|
</template>
|
</el-table-column>
|
</el-table>
|
|
<el-pagination v-if="paginationshow"
|
class="elpagin"
|
background
|
small
|
@size-change="handleSizeChange"
|
@current-change="handleCurrentChange"
|
:current-page="currentPage"
|
:page-sizes="[5, 15, , 20, , 50, 100, 200, 300, 400, 1000]"
|
:page-size="pageSize"
|
layout="total, sizes, prev, pager, next, jumper"
|
:total="totle">
|
</el-pagination>
|
<transition name="modal">
|
<modal v-if="modalShow"
|
:modabg="true"
|
@cancel="modalShow = false">
|
<p slot="title">参数设置</p>
|
<div class="height"
|
slot="centent">
|
<div class="width height overflow">
|
<p class="width modal-title">点击右侧开关可以设置字段是否显示</p>
|
<div class="modal-item margintopbot flex align-center justify-between">
|
<p>字段名</p>
|
<p>
|
<span>显示排序</span>
|
<span class="margin-left">字段显示</span>
|
</p>
|
</div>
|
<div class="applyheight overflowy-auto">
|
<draggable v-model="containHead"
|
:move="fielSetMove"
|
class="draggable-main"
|
tag="ul"
|
ghost-class="ghost"
|
chosen-class="chosen"
|
filter=".forbid"
|
animation="300"
|
@start="startDrag"
|
@end="endDrag">
|
<template v-for="item in containHead">
|
<div :key="item.columnName"
|
class="modal-item margintopbot flex align-center justify-between">
|
<p>{{ item.columnDescription }}</p>
|
<p>
|
<span>
|
<el-switch v-model="item.sortable"
|
:active-value="true"
|
:inactive-value="false"> </el-switch>
|
</span>
|
<span class="margin-left">
|
<el-switch v-model="item.wipe"
|
:active-value="true"
|
:inactive-value="false"> </el-switch>
|
</span>
|
</p>
|
</div>
|
</template>
|
</draggable>
|
</div>
|
<div class="text-right margin-top2">
|
<el-button type="primary"
|
size="mini">确定</el-button>
|
<el-button size="mini">取消</el-button>
|
</div>
|
</div>
|
</div>
|
</modal>
|
</transition>
|
</div>
|
</template>
|
|
<script>
|
import elTableInfiniteScroll from 'el-table-infinite-scroll';
|
import draggable from 'vuedraggable';
|
import Modal from '../modal/index';
|
import { getimestampDate } from '@/utils/date';
|
|
export default {
|
directives: {
|
'el-table-infinite-scroll': elTableInfiniteScroll
|
},
|
name: 'tableCommon',
|
props: {
|
//行样式
|
cellStyle: {
|
type: Function
|
},
|
tableHead: Array,
|
height: String,
|
tableData: {
|
type: Array,
|
default: () => []
|
},
|
totle: {
|
type: [String, Number],
|
default: '0'
|
},
|
loading: {
|
type: Boolean,
|
default: false
|
},
|
paginationshow: {
|
type: Boolean,
|
default: true
|
},
|
//查看
|
viewShow: {
|
type: Boolean,
|
default: false
|
},
|
bordershow: {
|
type: Boolean,
|
default: false
|
},
|
passShow: {
|
type: Boolean,
|
default: false
|
},
|
rejectShow: {
|
type: Boolean,
|
default: false
|
},
|
showSummary: {
|
type: Boolean,
|
default: false
|
},
|
selectionShow: {
|
type: Boolean,
|
default: false
|
},
|
operation: {
|
type: Boolean,
|
default: true
|
},
|
buttonshow: {
|
type: Boolean,
|
default: true
|
},
|
weldingAuditShow: {
|
type: Boolean,
|
default: false
|
},
|
unlineCommitShow: {
|
type: Boolean,
|
default: false
|
},
|
mustFirstShow: {
|
type: Boolean,
|
default: false
|
},
|
editShow: {
|
type: Boolean,
|
default: false
|
},
|
delShow: {
|
type: Boolean,
|
default: false
|
},
|
issuShow: {
|
type: Boolean,
|
default: false
|
},
|
inputshow: {
|
type: Boolean,
|
default: false
|
},
|
relevanceShow: {
|
type: Boolean,
|
default: false
|
},
|
wipelist: {
|
type: Array,
|
default: () => []
|
},
|
maintask: {
|
type: Boolean,
|
default: false
|
},
|
setshow: {
|
type: Boolean,
|
default: true
|
},
|
operationwidth: {
|
type: [Number, String],
|
default: 120
|
},
|
currentPage: {
|
type: [Number, String],
|
defaults: 1
|
},
|
pageSize: {
|
type: [Number, String],
|
defaults: 20
|
},
|
naxnumShow: {
|
type: Boolean,
|
default: false
|
},
|
inOrderCodeList: {
|
type: Array,
|
default: () => []
|
}
|
},
|
components: { Modal, draggable },
|
data () {
|
const that = this;
|
return {
|
number: Math.random() * 100,
|
tablelist: [],
|
containHead: [],
|
// currentPage: 1,
|
modalShow: false,
|
plist: ['doTime', 'maxNum', 'image', 'inOrderCode'],
|
rowedit: false
|
};
|
},
|
mounted () {
|
this.containHead = this.tableHead;
|
this.conversion(JSON.stringify(this.tableData));
|
},
|
methods: {
|
//下拉加载
|
load () { },
|
fixWidth (val) {
|
let length = 0;
|
if (val.indexOf('(') != -1) {
|
length = val.length * 16 + 10;
|
} else {
|
length = val.length * 25 + 10;
|
}
|
length = val == '生产计划单号' || val == '出库计划单号' ? 130 : length;
|
if (length < 100) {
|
length = 90;
|
}
|
return length;
|
},
|
//分页
|
handleCurrentChange (e) {
|
this.$emit('CurrentChange', e);
|
},
|
handleSizeChange (e) {
|
this.$emit('SizeChange', e);
|
},
|
//筛选
|
conversion (nl) {
|
this.tablelist = JSON.parse(nl);
|
this.tablelist.filter(item => {
|
item.enable = item.enable == 1 ? '是' : item.enable == 0 ? '否' : item.enable;
|
item.isLock = item.isLock == 1 ? '是' : item.isLock == 0 ? '否' : item.isLock;
|
item.isBad = item.isBad == 1 ? '是' : item.isBad == 0 ? '否' : item.isBad;
|
item.isWork = item.isWork == 1 ? '是' : item.isWork == 0 ? '否' : item.isWork;
|
item.isErp = item.isErp == 1 ? '是' : item.isErp == 0 ? '否' : item.isErp;
|
|
item.isFull = item.isFull == 1 ? '是' : item.isFull == 0 ? '否' : item.isFull;
|
item.isDestination = item.isDestination == 1 ? '是' : item.isDestination == 0 ? '否' : item.isDestination;
|
item.isError = item.isError == 1 ? '是' : item.isError == 0 ? '否' : item.isError;
|
item.isMainOut = item.isMainOut == 1 ? '是' : item.isMainOut == 0 ? '否' : item.isMainOut;
|
|
item.taskType == 1 ? '入库' : item.taskType == 2 ? '出库' : item.taskType == 3 ? '移库' : item.taskType;
|
item.doTime = item.doTime ? getimestampDate(item.doTime) : '';
|
item.updateTime = item.updateTime ? getimestampDate(item.updateTime) : '';
|
item.createTime = item.createTime ? getimestampDate(item.createTime) : '';
|
item.taskCreateTime = item.taskCreateTime ? getimestampDate(item.taskCreateTime) : '';
|
item.finishTime = item.finishTime ? getimestampDate(item.finishTime) : '';
|
item.CheckTime = item.CheckTime ? getimestampDate(item.CheckTime) : '';//审核时间
|
item.SendTime = item.SendTime ? getimestampDate(item.SendTime) : '';//提交审核时间
|
|
if (item.IsWeldingAuditGroup != undefined) {
|
item.IsWeldingAuditGroupText = item.IsWeldingAuditGroup ? '是' : item.IsWeldingAuditGroup == false ? '否' : item.IsWeldingAuditGroup;
|
}
|
|
//
|
});
|
},
|
//拖拽开始
|
startDrag (e) { },
|
//拖拽结束
|
endDrag (e) {
|
this.number = Math.random() * 100;
|
},
|
//编辑
|
edit (row) {
|
let rowobj = { ...row };
|
rowobj.enable = rowobj.enable == '是' ? 1 : rowobj.enable == '否' ? 0 : rowobj.enable;
|
rowobj.isLock = rowobj.isLock == '是' ? 1 : rowobj.isLock == '否' ? 0 : rowobj.isLock;
|
rowobj.isBad = rowobj.isBad == '是' ? 1 : rowobj.isBad == '否' ? 0 : rowobj.isBad;
|
rowobj.isWork = rowobj.isWork == 1 ? '是' : rowobj.isWork == 0 ? '否' : rowobj.isWork;
|
rowobj.isErp = rowobj.isErp == 1 ? '是' : rowobj.isErp == 0 ? '否' : rowobj.isErp;
|
rowobj.isFull = rowobj.isFull == '是' ? 1 : rowobj.isFull == '否' ? 0 : rowobj.isFull;
|
rowobj.isDestination = rowobj.isDestination == 1 ? '是' : rowobj.isDestination == 0 ? '否' : rowobj.isDestination;
|
rowobj.isError = rowobj.isError == '是' ? 1 : rowobj.isError == '否' ? 0 : rowobj.isError;
|
rowobj.taskType =
|
rowobj.taskType == '入库' ? 1 : rowobj.taskType == '出库' ? 2 : rowobj.taskType == '移库' ? 3 : rowobj.taskType;
|
rowobj.isMainOut = rowobj.isMainOut == 1 ? '是' : rowobj.isMainOut == 0 ? '否' : rowobj.isMainOut;
|
console.log(this.inputshow);
|
if (this.inputshow) {
|
this.rowdblclick(row);
|
} else {
|
this.$emit('edit', rowobj);
|
}
|
},
|
//查看
|
view (row) {
|
let rowobj = { ...row };
|
rowobj.enable = rowobj.enable == '是' ? 1 : rowobj.enable == '否' ? 0 : rowobj.enable;
|
rowobj.isLock = rowobj.isLock == '是' ? 1 : rowobj.isLock == '否' ? 0 : rowobj.isLock;
|
rowobj.isBad = rowobj.isBad == '是' ? 1 : rowobj.isBad == '否' ? 0 : rowobj.isBad;
|
rowobj.isWork = rowobj.isWork == 1 ? '是' : rowobj.isWork == 0 ? '否' : rowobj.isWork;
|
rowobj.isErp = rowobj.isErp == 1 ? '是' : rowobj.isErp == 0 ? '否' : rowobj.isErp;
|
rowobj.isFull = rowobj.isFull == '是' ? 1 : rowobj.isFull == '否' ? 0 : rowobj.isFull;
|
rowobj.isDestination = rowobj.isDestination == 1 ? '是' : rowobj.isDestination == 0 ? '否' : rowobj.isDestination;
|
rowobj.isError = rowobj.isError == '是' ? 1 : rowobj.isError == '否' ? 0 : rowobj.isError;
|
rowobj.taskType =
|
rowobj.taskType == '入库' ? 1 : rowobj.taskType == '出库' ? 2 : rowobj.taskType == '移库' ? 3 : rowobj.taskType;
|
rowobj.isMainOut = rowobj.isMainOut == 1 ? '是' : rowobj.isMainOut == 0 ? '否' : rowobj.isMainOut;
|
console.log(this.inputshow);
|
if (this.inputshow) {
|
this.rowdblclick(row);
|
} else {
|
this.$emit('view', rowobj);
|
}
|
},
|
//删除
|
del (row) {
|
let rowobj = { ...row };
|
rowobj.enable = rowobj.enable == '是' ? 1 : rowobj.enable == '否' ? 0 : rowobj.enable;
|
rowobj.isLock = rowobj.isLock == '是' ? 1 : rowobj.isLock == '否' ? 0 : rowobj.isLock;
|
rowobj.isBad = rowobj.isBad == '是' ? 1 : rowobj.isBad == '否' ? 0 : rowobj.isBad;
|
this.$emit('del', rowobj);
|
},
|
//勾选
|
handleSelectionChange (e) {
|
this.$emit('handleSelectionChange', e);
|
},
|
//双击行
|
rowdblclick (item) {
|
item.edit = !item.edit;
|
this.$emit('itemchange', this.tablelist, item);
|
},
|
//单机行
|
rowclick (row) {
|
this.$emit('rowchange', row);
|
},
|
tableRowClassName ({ row, rowIndex }) {
|
this.$emit('tableRowClassName', row, rowIndex);
|
},
|
fielSetMove () { }
|
},
|
watch: {
|
tableData: {
|
handler (nl, ol) {
|
this.number = Math.random() * 1000;
|
this.conversion(JSON.stringify(nl));
|
},
|
deep: true
|
}
|
}
|
};
|
</script>
|
<style lang="scss" scoped>
|
#tableContainer {
|
position: relative;
|
z-index: 6;
|
height: 100%;
|
.widthscope {
|
width: 200px;
|
}
|
.elbuttonsize {
|
font-size: 0.8rem;
|
}
|
.set {
|
color: #0465a8;
|
cursor: pointer;
|
display: inline-block;
|
margin-left: 20px;
|
}
|
.modal-title {
|
background-color: #f0f9eb;
|
color: #67c23a;
|
font-size: 14px;
|
padding: 4px 10px;
|
border-radius: 4px;
|
}
|
.modal-item {
|
border: 1px solid #f8f8f8;
|
padding: 4px 10px;
|
background-color: #f3f3f3;
|
font-size: 14px;
|
}
|
.draggable-main {
|
margin: 0;
|
padding: 0;
|
cursor: pointer;
|
.drag {
|
border: 1px dotted rgb(44, 104, 163);
|
background-color: #409eff;
|
}
|
|
.chosen {
|
background-color: #409eff;
|
color: #fff;
|
}
|
|
.ghost {
|
background-color: #409eff;
|
}
|
}
|
::v-deep {
|
.el-table__fixed-right {
|
right: 1px !important;
|
}
|
.el-table--border td {
|
// border-right: none !important;
|
}
|
}
|
::v-deep .el-table {
|
height: calc(100% - 35px) !important;
|
}
|
|
::v-deep .el-button + .el-button {
|
margin-left: 5px;
|
}
|
::v-deep .el-table__empty-text {
|
position: absolute;
|
top: 50%;
|
left: 50%;
|
transform: translate(-50%, -50%);
|
}
|
::v-deep .el-table td,
|
.el-table th {
|
padding: 4px 0;
|
}
|
}
|
</style>
|
