<style scoped>
|
.value-table {
|
width: 100%;
|
height: 100%;
|
overflow-y: auto;
|
}
|
|
.table {
|
width: 100%;
|
height: calc(100% - 42px);
|
}
|
|
.page {
|
width: 100%;
|
height: 30px;
|
text-align: right;
|
margin-top: 10px;
|
}
|
|
.down-left {
|
width: 50%;
|
display: flex;
|
align-items: center;
|
justify-content: center;
|
}
|
|
.down-right {
|
width: 50%;
|
display: flex;
|
align-items: center;
|
justify-content: center;
|
}
|
|
.body {
|
overflow-x: hidden;
|
}
|
|
.handleBtn {
|
border: none;
|
padding: 0;
|
color: #409eff;
|
background: transparent;
|
}
|
|
.handleBtn:hover {
|
background: transparent;
|
}
|
|
.handleBtn.is-disabled {
|
color: #c0c4cc;
|
}
|
.red {
|
color: red !important;
|
}
|
>>> .el-loading-parent--relative {
|
z-index: 1 !important;
|
}
|
>>> .el-table__body-wrapper::-webkit-scrollbar {
|
height: 14px; /* 设置滚动条宽度 */
|
}
|
</style>
|
<style>
|
/* .value-table .highlight-warning-row-border td {
|
border-top: 2px solid #ffcd29;
|
border-bottom: 2px solid #ffcd29;
|
} */
|
|
.value-table .highlight-warning-row-border td:first-child {
|
border-left: 4px solid #ffcd29;
|
}
|
|
.value-table .highlight-warning-row-border td:last-child {
|
border-right: 4px solid #ffcd29;
|
}
|
|
/* .value-table .highlight-danger-row-border td {
|
border-top: 2px solid red;
|
border-bottom: 2px solid red;
|
} */
|
|
.value-table .highlight-danger-row-border td:first-child {
|
border-left: 4px solid #f56c6c;
|
}
|
|
.value-table .highlight-danger-row-border td:last-child {
|
border-right: 4px solid #f56c6c;
|
}
|
|
.value-table .el-upload {
|
width: 100%;
|
}
|
|
.value-table .el-upload-dragger {
|
width: 100%;
|
}
|
|
.value-table .handleBtn.is-disabled .el-upload:focus {
|
color: #c0c4cc !important;
|
}
|
|
.value-table .avatar-uploader .el-upload {
|
height: 80px;
|
display: flex;
|
align-items: center;
|
justify-content: center;
|
}
|
.el-table__empty-text {
|
text-align: left;
|
width: 100%;
|
display: inline-block;
|
margin-left: 200px;
|
}
|
</style>
|
|
<template>
|
<div class="value-table">
|
<div
|
:style="
|
data.isPage != undefined && data.isPage != true ? 'height:100%' : ''
|
"
|
class="table"
|
>
|
<el-table
|
:key="specialKey"
|
ref="eltable"
|
v-loading="loading"
|
:current-row-key="data.currentId"
|
:data="tableData"
|
:highlight-current-row="data.highlight === undefined || data.highlight"
|
:row-class-name="tableRowClassName"
|
:row-key="(record) => record[rowKey]"
|
:show-summary="
|
data.countFleid != undefined && data.countFleid.length > 0
|
"
|
:span-method="spanMethod"
|
:summary-method="getSummaries"
|
height="100%"
|
style="width: 100%"
|
tooltip-effect="dark"
|
@select="select"
|
@selection-change="selectChange"
|
@sort-change="sortChange"
|
@row-click="rowClick"
|
>
|
<el-table-column
|
v-if="data.showSelect"
|
:key="Math.random()"
|
:width="selectionWidth"
|
type="selection"
|
>
|
</el-table-column>
|
<el-table-column
|
v-if="data.isIndex"
|
:key="Math.random()"
|
:width="selectionWidth"
|
align="center"
|
label="序号"
|
type="index"
|
>
|
</el-table-column>
|
<el-table-column
|
v-for="(a, ai) in tableHead"
|
v-if="
|
!data.headNoShow ||
|
(data.headNoShow && data.headNoShow.length == 0) ||
|
(data.headNoShow &&
|
data.headNoShow.length > 0 &&
|
!data.headNoShow.find((d) => d == a.label))
|
"
|
:key="ai + 'bbbbb'"
|
:isColumnWidth="isColumnWidth"
|
:isShowZero="isShowZero"
|
:label="a.value"
|
:min-width="columnMinWidth"
|
:prop="a.label"
|
:sortable="a.sort === 'custom' ? 'custom' : false"
|
show-overflow-tooltip
|
>
|
<template slot-scope="scope">
|
<div v-if="showType(a.label, data.tagField) != null">
|
<template v-if="typeof scope.row[a.label] == 'object'">
|
<template v-for="(param, i) in scope.row[a.label]">
|
<el-tag
|
v-for="(b, bi) in data.tagField[a.label].select"
|
v-if="b.value == param"
|
:key="bi + 'cccc'"
|
:type="b.type"
|
size="medium"
|
style="margin-right: 5px"
|
>{{ b.label }}</el-tag
|
>
|
</template>
|
</template>
|
<template v-else>
|
<el-tag
|
v-for="(b, bi) in data.tagField[a.label].select"
|
v-show="b.value == scope.row[a.label]"
|
:key="bi + 'ddddd'"
|
:type="b.type"
|
size="medium"
|
>{{ b.label }}</el-tag
|
>
|
</template>
|
</div>
|
<!-- 可操作行进行点击事件 -->
|
<span
|
v-else-if="data.linkEvent && showLink(a.label, data.linkEvent)"
|
style="color: #409eff; cursor: pointer"
|
@click="handleLinkEvent(scope.row, data.linkEvent[a.label])"
|
>{{ scope.row[a.label] }}</span
|
>
|
<img
|
v-else-if="showUpload(a.label) && scope.row[a.label]"
|
:src="javaApi + '/img/' + scope.row[a.label]"
|
alt=""
|
style="width: 40px; height: 40px; margin-top: 10px"
|
/>
|
<span v-else :class="{ red: getRedColor(a.label, scope.row) }">{{
|
scope.row[a.label]
|
}}</span>
|
</template>
|
</el-table-column>
|
<el-table-column
|
v-if="data.do.length > 0"
|
:width="getWidth()"
|
align="center"
|
fixed="right"
|
label="操作"
|
>
|
<template slot-scope="scope">
|
<el-button
|
v-for="(a, ai) in data.do"
|
:key="ai + 'qqqq'"
|
:disabled="
|
a.disabFun ? a.disabFun(scope.row, scope.$index) : false
|
"
|
:type="a.type"
|
class="handleBtn"
|
@click="main(scope.row, a)"
|
>
|
<span v-if="a.type != 'upload'">{{ a.font }}</span>
|
<el-upload
|
v-else
|
ref="upload"
|
:accept="a.uploadConfig.accept"
|
:action="
|
javaApi +
|
a.uploadConfig.url +
|
'?id=' +
|
(a.uploadConfig.uploadIdFun
|
? a.uploadConfig.uploadIdFun(scope.row)
|
: scope.row.id)
|
"
|
:disabled="
|
a.disabFun ? a.disabFun(scope.row, scope.$index) : false
|
"
|
:headers="token"
|
:on-error="onError"
|
:on-success="handleSuccessUp"
|
:show-file-list="false"
|
name="file"
|
style="background: transparent"
|
>
|
<span>{{ a.font }}</span>
|
</el-upload>
|
</el-button>
|
</template>
|
</el-table-column>
|
</el-table>
|
</div>
|
<div v-if="data.isPage == undefined || data.isPage" class="page">
|
<el-pagination
|
:current-page="page.current"
|
:page-size="page.size"
|
:page-sizes="[10, 20, 30, 50, 100]"
|
:total="total"
|
layout="total, sizes, prev, pager, next, jumper"
|
@size-change="sizeChange"
|
@current-change="currentChange"
|
>
|
</el-pagination>
|
</div>
|
<el-dialog
|
:close-on-click-modal="false"
|
:visible.sync="upDia"
|
:width="data.row == 1 ? '500px' : 540 + data.row * 200 + 'px'"
|
append-to-body
|
title="编辑"
|
>
|
<div
|
class="body"
|
style="max-height: 600px; overflow-y: auto; padding: 5px 10px 5px 0"
|
>
|
<div v-if="data.row > 1">
|
<div
|
v-for="(a, ai) in upHead"
|
:key="ai + 'ffff'"
|
style="line-height: 50px"
|
>
|
<el-col :offset="1" :span="6 / data.row" style="text-align: right">
|
<span v-if="showUpReq(a.label)" class="required-span">* </span
|
>{{ a.value }}：
|
</el-col>
|
<el-col :span="16 / data.row">
|
<el-input
|
v-if="
|
showType(a.label, data.selectField) == null &&
|
!showUpload(a.label) &&
|
!showCascader(a.label)
|
"
|
v-model="upData[a.label]"
|
:disabled="isDisabled(a.label)"
|
:placeholder="`请输入${a.value}`"
|
clearable
|
size="small"
|
></el-input>
|
<el-select
|
v-if="showType(a.label, data.selectField) != null"
|
v-model="upData[a.label]"
|
:allow-create="data.selectField[a.label].allowCreate"
|
:default-first-option="
|
data.selectField[a.label].defaultFirstOption
|
"
|
:disabled="isDisabled(a.label)"
|
:multiple="data.selectField[a.label].choose"
|
clearable
|
filterable
|
size="small"
|
style="width: 100%"
|
>
|
<el-option
|
v-for="(b, bi) in data.selectField[a.label].select"
|
:key="bi + 'eeeee'"
|
:label="b.label"
|
:value="b.value"
|
>
|
</el-option>
|
</el-select>
|
<el-upload
|
v-if="showUpload(a.label)"
|
ref="upload"
|
:accept="data.addUploadConfig.accept"
|
:action="javaApi + data.addUploadConfig.url"
|
:headers="token"
|
:multiple="false"
|
:on-error="onError"
|
:on-success="(m) => handleSuccessUp(m, a.label)"
|
:show-file-list="false"
|
class="avatar-uploader"
|
name="file"
|
style="
|
background: transparent;
|
width: 80px;
|
height: 80px;
|
border: 1px solid #dcdfe6;
|
border-radius: 6px;
|
margin: 10px 0;
|
"
|
>
|
<img
|
v-if="upData[a.label]"
|
:src="javaApi + '/img/' + upData[a.label]"
|
class="avatar"
|
style="width: 80px; height: 80px; border-radius: 6px"
|
/>
|
<i v-else class="el-icon-plus avatar-uploader-icon"></i>
|
</el-upload>
|
<el-cascader
|
v-if="showCascader(a.label)"
|
:options="data.cascaderField[a.label].tree"
|
:placeholder="`请选择${a.value}`"
|
:props="data.cascaderField.props"
|
:show-all-levels="false"
|
:value="upData[a.label]"
|
clearable
|
filterable
|
size="small"
|
style="width: 100%"
|
@change="(m) => handleCascader(m, a.label)"
|
></el-cascader>
|
</el-col>
|
</div>
|
</div>
|
<div v-else>
|
<el-row
|
v-for="(a, ai) in upHead"
|
:key="ai + 'ggggg'"
|
style="line-height: 50px"
|
>
|
<el-col :span="6" style="text-align: right">
|
<span v-if="showUpReq(a.label)" class="required-span">* </span
|
>{{ a.value }}：
|
</el-col>
|
<el-col :offset="1" :span="16">
|
<el-input
|
v-if="
|
showType(a.label, data.selectField) == null &&
|
!showUpload(a.label) &&
|
!showCascader(a.label)
|
"
|
v-model="upData[a.label]"
|
:disabled="isDisabled(a.label)"
|
:placeholder="`请输入${a.value}`"
|
clearable
|
size="small"
|
></el-input>
|
<el-select
|
v-if="showType(a.label, data.selectField) != null"
|
v-model="upData[a.label]"
|
:disabled="isDisabled(a.label)"
|
:multiple="data.selectField[a.label].choose"
|
clearable
|
filterable
|
size="small"
|
style="width: 100%"
|
>
|
<el-option
|
v-for="(b, bi) in data.selectField[a.label].select"
|
:key="bi + 'fffff'"
|
:label="b.label"
|
:value="b.value"
|
></el-option>
|
</el-select>
|
<el-upload
|
v-if="showUpload(a.label)"
|
ref="upload"
|
:accept="data.addUploadConfig.accept"
|
:action="javaApi + data.addUploadConfig.url"
|
:headers="token"
|
:multiple="false"
|
:on-error="onError"
|
:on-success="(m) => handleSuccessUp(m, a.label)"
|
:show-file-list="false"
|
class="avatar-uploader"
|
name="file"
|
style="
|
background: transparent;
|
width: 80px;
|
height: 80px;
|
border: 1px solid #dcdfe6;
|
border-radius: 6px;
|
margin: 10px 0;
|
"
|
>
|
<img
|
v-if="upData[a.label]"
|
:src="javaApi + '/img/' + upData[a.label]"
|
class="avatar"
|
style="width: 80px; height: 80px; border-radius: 6px"
|
/>
|
<i v-else class="el-icon-plus avatar-uploader-icon"></i>
|
</el-upload>
|
<el-cascader
|
v-if="showCascader(a.label)"
|
:options="data.cascaderField[a.label].tree"
|
:placeholder="`请选择${a.value}`"
|
:props="data.cascaderField.props"
|
:show-all-levels="false"
|
:value="upData[a.label]"
|
clearable
|
filterable
|
size="small"
|
style="width: 100%"
|
@change="(m) => handleCascader(m, a.label)"
|
></el-cascader>
|
</el-col>
|
</el-row>
|
</div>
|
</div>
|
<span slot="footer" class="dialog-footer">
|
<el-button @click="upDia = false">取 消</el-button>
|
<el-button :loading="upLoad" type="primary" @click="saveUpData"
|
>确 定</el-button
|
>
|
</span>
|
</el-dialog>
|
<el-dialog
|
:close-on-click-modal="false"
|
:visible.sync="addDia"
|
:width="data.row == 1 ? '500px' : 540 + data.row * 200 + 'px'"
|
append-to-body
|
title="新增"
|
>
|
<div
|
v-if="addDia"
|
class="body"
|
style="max-height: 550px; overflow-y: auto; padding: 5px 10px 5px 0"
|
>
|
<div v-if="data.row > 1">
|
<div
|
v-for="(a, ai) in upHead"
|
:key="ai + 'yyyyy'"
|
style="line-height: 50px"
|
>
|
<el-col :offset="1" :span="6 / data.row" style="text-align: right"
|
><span v-if="showAddReq(a.label)" class="required-span">* </span
|
>{{ a.value }}：</el-col
|
>
|
<el-col :span="16 / data.row">
|
<el-input
|
v-if="
|
showType(a.label, data.selectField) == null &&
|
!showUpload(a.label) &&
|
!showCascader(a.label)
|
"
|
v-model="upData[a.label]"
|
:placeholder="`请输入${a.value}`"
|
clearable
|
size="small"
|
></el-input>
|
<el-select
|
v-if="showType(a.label, data.selectField) != null"
|
v-model="upData[a.label]"
|
:multiple="data.selectField[a.label].choose"
|
:placeholder="`请选择${a.value}`"
|
clearable
|
filterable
|
size="small"
|
style="width: 100%"
|
>
|
<el-option
|
v-for="(b, bi) in data.selectField[a.label].select"
|
:key="bi + 'hhhh'"
|
:label="b.label"
|
:value="b.value"
|
></el-option>
|
</el-select>
|
<el-upload
|
v-if="showUpload(a.label)"
|
ref="upload"
|
:accept="data.addUploadConfig.accept"
|
:action="javaApi + data.addUploadConfig.url"
|
:headers="token"
|
:multiple="false"
|
:on-error="onError"
|
:on-success="(m) => handleSuccessUp(m, a.label)"
|
:show-file-list="false"
|
class="avatar-uploader"
|
name="file"
|
style="
|
background: transparent;
|
width: 80px;
|
height: 80px;
|
border: 1px solid #dcdfe6;
|
border-radius: 6px;
|
margin: 10px 0;
|
"
|
>
|
<img
|
v-if="upData[a.label]"
|
:src="javaApi + '/img/' + upData[a.label]"
|
class="avatar"
|
style="width: 80px; height: 80px; border-radius: 6px"
|
/>
|
<i v-else class="el-icon-plus avatar-uploader-icon"></i>
|
</el-upload>
|
<el-cascader
|
v-if="showCascader(a.label)"
|
:options="data.cascaderField[a.label].tree"
|
:placeholder="`请选择${a.value}`"
|
:props="data.cascaderField.props"
|
:show-all-levels="false"
|
clearable
|
filterable
|
size="small"
|
style="width: 100%"
|
@change="(m) => handleCascader(m, a.label)"
|
></el-cascader>
|
</el-col>
|
</div>
|
</div>
|
<div v-else>
|
<el-row
|
v-for="(a, ai) in upHead"
|
:key="ai + 'jjjjj'"
|
style="line-height: 50px"
|
>
|
<el-col :span="6" style="text-align: right"
|
><span v-if="showAddReq(a.label)" class="required-span">* </span
|
>{{ a.value }}：</el-col
|
>
|
<el-col :offset="1" :span="16">
|
<el-input
|
v-if="
|
showType(a.label, data.selectField) == null &&
|
!showUpload(a.label) &&
|
!showCascader(a.label)
|
"
|
v-model="upData[a.label]"
|
:placeholder="`请输入${a.value}`"
|
clearable
|
size="small"
|
></el-input>
|
<el-select
|
v-if="showType(a.label, data.selectField) != null"
|
v-model="upData[a.label]"
|
:multiple="data.selectField[a.label].choose"
|
:placeholder="`请选择${a.value}`"
|
clearable
|
size="small"
|
style="width: 100%"
|
>
|
<el-option
|
v-for="(b, bi) in data.selectField[a.label].select"
|
:key="bi + 'mmmmmm'"
|
:label="b.label"
|
:value="b.value"
|
></el-option>
|
</el-select>
|
<el-upload
|
v-if="showUpload(a.label)"
|
ref="upload"
|
:accept="data.addUploadConfig.accept"
|
:action="javaApi + data.addUploadConfig.url"
|
:headers="token"
|
:multiple="false"
|
:on-error="onError"
|
:on-success="(m) => handleSuccessUp(m, a.label)"
|
:show-file-list="false"
|
class="avatar-uploader"
|
name="file"
|
style="
|
background: transparent;
|
width: 80px;
|
height: 80px;
|
border: 1px solid #dcdfe6;
|
border-radius: 6px;
|
margin: 10px 0;
|
"
|
>
|
<img
|
v-if="upData[a.label]"
|
:src="javaApi + '/img/' + upData[a.label]"
|
class="avatar"
|
style="width: 80px; height: 80px; border-radius: 6px"
|
/>
|
<i v-else class="el-icon-plus avatar-uploader-icon"></i>
|
</el-upload>
|
<el-cascader
|
v-if="showCascader(a.label)"
|
:options="data.cascaderField[a.label].tree"
|
:placeholder="`请选择${a.value}`"
|
:props="data.cascaderField.props"
|
:show-all-levels="false"
|
clearable
|
filterable
|
size="small"
|
style="width: 100%"
|
@change="(m) => handleCascader(m, a.label)"
|
></el-cascader>
|
</el-col>
|
</el-row>
|
</div>
|
</div>
|
<span slot="footer" class="dialog-footer">
|
<el-button @click="addDia = false">取 消</el-button>
|
<el-button :loading="addLoad" type="primary" @click="saveAddData"
|
>确 定</el-button
|
>
|
</span>
|
</el-dialog>
|
<el-dialog :visible.sync="downDia" title="导出" width="400px">
|
<div style="display: flex; width: 100%; height: 100px">
|
<div class="down-left" @click="downFile(true)">
|
<el-button>本页导出</el-button>
|
</div>
|
<div class="down-right" @click="downFile(false)">
|
<el-button>全部导出</el-button>
|
</div>
|
</div>
|
</el-dialog>
|
<el-dialog :visible.sync="uploadDia" title="数据导入" width="500px">
|
<div style="margin: 0 auto">
|
<el-upload
|
ref="upload"
|
:accept="data.accept === undefined ? '.csv' : data.accept"
|
:action="javaApi + inputUrl"
|
:auto-upload="false"
|
:data="{ param: data.uploadStr }"
|
:file-list="fileList"
|
:headers="token"
|
:limit="1"
|
:on-change="beforeUpload"
|
:on-error="onError"
|
:on-success="onSuccess"
|
drag
|
name="file"
|
>
|
<i class="el-icon-upload"></i>
|
<div class="el-upload__text">将文件拖到此处，或<em>点击上传</em></div>
|
</el-upload>
|
</div>
|
<span slot="footer" class="dialog-footer">
|
<el-button @click="uploadDia = false">取 消</el-button>
|
<el-button type="primary" @click="submitUpload()">上 传</el-button>
|
</span>
|
</el-dialog>
|
</div>
|
</template>
|
|
<script>
|
export default {
|
props: {
|
selectionWidth: {
|
type: String,
|
default: () => "65",
|
},
|
columnMinWidth: {
|
type: String,
|
default: () => "155",
|
},
|
isColumnWidth: {
|
type: Boolean,
|
default: () => false,
|
},
|
isShowZero: {
|
type: Boolean,
|
default: () => false,
|
},
|
tableRowClassName: {
|
type: Function,
|
},
|
rowKey: {
|
type: String,
|
default: () => {
|
return "id";
|
},
|
},
|
url: {
|
type: String,
|
default: () => null,
|
},
|
upUrl: {
|
type: String,
|
default: () => null,
|
},
|
delUrl: {
|
type: String,
|
default: () => null,
|
},
|
downUrl: {
|
type: String,
|
default: () => null,
|
},
|
inputUrl: {
|
type: String,
|
default: () => null,
|
},
|
componentData: {
|
type: Object,
|
default: () => {
|
return {
|
entity: {
|
orderBy: {
|
field: "id",
|
order: "asc",
|
},
|
},
|
isIndex: false,
|
showSelect: false,
|
select: true,
|
row: 1,
|
do: [
|
{
|
id: "update",
|
font: "编辑",
|
type: "text",
|
method: "doDiy",
|
},
|
{
|
id: "delete",
|
font: "删除",
|
type: "text",
|
method: "doDiy",
|
},
|
],
|
doDiy: true,
|
tagField: [
|
{
|
label: "state",
|
select: [
|
{
|
value: "1",
|
type: "success",
|
label: "启用",
|
},
|
{
|
value: "0",
|
type: "danger",
|
label: "停用",
|
},
|
],
|
},
|
],
|
};
|
},
|
},
|
},
|
data() {
|
return {
|
data: {
|
entity: {
|
orderBy: {
|
field: "id",
|
order: "asc",
|
},
|
},
|
isIndex: false,
|
showSelect: false,
|
select: true,
|
row: 1,
|
isPage: true, //
|
do: [
|
{
|
font: "删除",
|
type: "text",
|
},
|
],
|
type: [],
|
uploadStr: "",
|
currentId: "", //当前高亮的ID
|
},
|
tableHead: [],
|
tableData: [],
|
multipleSelection: [],
|
user: {},
|
page: {
|
current: 1,
|
size: 20,
|
},
|
total: 0,
|
loading: false,
|
upDia: false,
|
upData: {},
|
upHead: [],
|
upLoad: false,
|
addDia: false,
|
addUrl: null,
|
addLoad: false,
|
dataCopy: {},
|
downDia: false,
|
uploadDia: false,
|
token: null,
|
fileList: [],
|
init: true,
|
spanList: [
|
// {
|
// arr:[],
|
// position:0
|
// }
|
],
|
specialSpanList: [
|
// {
|
// arr:[],
|
// position:0
|
// }
|
],
|
param: {},
|
specialKey: "table-",
|
};
|
},
|
beforeUpdate() {
|
this.$nextTick(() => {
|
this.$refs.eltable.doLayout();
|
});
|
},
|
mounted() {
|
this.data = this.componentData;
|
this.dataCopy = this.HaveJson(this.componentData);
|
if (this.data.init === undefined || this.data.init === true) {
|
this.selectList();
|
}
|
this.token = {
|
token: sessionStorage.getItem("token"),
|
};
|
this.specialKey = this.specialKey + Math.random() * 100;
|
},
|
methods: {
|
rowspan(spanArr, position, spanName) {
|
this.tableData.forEach((item, index) => {
|
if (index === 0) {
|
spanArr.push(1);
|
position = 0;
|
} else {
|
if (
|
this.tableData[index][spanName] ===
|
this.tableData[index - 1][spanName]
|
) {
|
spanArr[position] += 1;
|
spanArr.push(0);
|
} else {
|
spanArr.push(1);
|
position = index;
|
}
|
}
|
});
|
},
|
spanMethod({ row, column, rowIndex, columnIndex }) {
|
// 一般的合并行
|
if (
|
this.data.spanConfig != undefined &&
|
this.data.spanConfig.rows &&
|
this.data.spanConfig.rows.length > 0
|
) {
|
let i = null;
|
let obj = this.data.spanConfig.rows.find((item, index) => {
|
i = index;
|
return item.index == columnIndex;
|
});
|
if (obj) {
|
const _row = this.spanList[i].arr[rowIndex];
|
const _col = _row > 0 ? 1 : 0;
|
return {
|
rowspan: _row,
|
colspan: _col,
|
};
|
}
|
}
|
// 特殊的合并行
|
if (
|
this.data.spanConfig != undefined &&
|
this.data.spanConfig.special &&
|
this.data.spanConfig.special.main &&
|
this.data.spanConfig.special.rows &&
|
this.data.spanConfig.special.rows.length > 0
|
) {
|
let i = null;
|
let obj = this.data.spanConfig.special.rows.find((item, index) => {
|
i = index;
|
return item.index == columnIndex;
|
});
|
if (obj) {
|
const _row = this.specialSpanList[i].arr[rowIndex];
|
const _col = _row > 0 ? 1 : 0;
|
return {
|
rowspan: _row,
|
colspan: _col,
|
};
|
}
|
}
|
},
|
selectChange(val) {
|
if (this.data.select) {
|
this.multipleSelection = val;
|
} else {
|
this.multipleSelection = val[val.length - 1];
|
}
|
if (this.data.selectMethod != undefined) {
|
if (this.$parent.$el.className.indexOf("el-") == 0) {
|
this.$parent.$parent[this.data.selectMethod](val);
|
} else {
|
this.$parent[this.data.selectMethod](val);
|
}
|
}
|
},
|
select(val, row) {
|
if (!this.data.select) {
|
this.$refs["eltable"].clearSelection();
|
this.$refs["eltable"].toggleRowSelection(row, true);
|
}
|
},
|
rowClick(row, column, event) {
|
if (this.data.select) {
|
this.$refs["eltable"].toggleRowSelection(row);
|
} else {
|
this.$refs["eltable"].clearSelection();
|
this.$refs["eltable"].toggleRowSelection(row, true);
|
}
|
},
|
sizeChange(val) {
|
this.page.size = val;
|
this.selectList("page");
|
},
|
currentChange(val) {
|
this.page.current = val;
|
this.selectList("page");
|
},
|
// 调取表格查询接口
|
selectList(val) {
|
// console.log('val---', val)
|
// console.log('this.page---', this.page)
|
// this.loading = true
|
if (val === undefined) {
|
this.page.current = 1;
|
}
|
if (val === "lastPage") {
|
this.page.current = this.page.current - 1; // 例如删除本页最后一条数据，将当前页面定为上一页，除第一页外
|
}
|
// 不要分页就全查
|
if (this.data.isPage != undefined && this.data.isPage != true) {
|
this.page = {
|
current: -1,
|
size: -1,
|
};
|
}
|
this.$axios
|
.post(
|
this.url,
|
{
|
page: this.page,
|
entity: this.data.entity,
|
},
|
{
|
headers: {
|
"Content-Type": "application/json",
|
},
|
}
|
)
|
.then((res) => {
|
if (res.code === 201) {
|
this.loading = false;
|
return;
|
}
|
this.total = res.data.body.total;
|
this.tableHead = res.data.head;
|
this.tableData = res.data.body.records;
|
if (this.data.needSort !== undefined) {
|
// 根据父组件传回来的needSort数组，判断哪些字段需要排序功能
|
for (var i = 0; i < this.data.needSort.length; i++) {
|
this.tableHead.forEach((item) => {
|
if (item.label === this.data.needSort[i]) {
|
item.sort = "custom";
|
}
|
});
|
}
|
}
|
if (this.isShowZero) {
|
// 工时管理-工时统计没有时间的就展示0
|
this.tableData.map((item) => {
|
Object.keys(item).forEach((val) => {
|
if (
|
item[val] === null &&
|
(val.includes("Hours") || val === "total")
|
) {
|
item[val] = 0;
|
}
|
});
|
});
|
}
|
if (this.tableData.length === 0 && this.page.current > 1) {
|
this.selectList("lastPage");
|
}
|
// if (this.isColumnWidth) {
|
// this.tableHead.forEach(item => {
|
// if(!item.width){
|
// if (item.value.length === 4) {
|
// item.width = 120
|
// } else if (item.value.length === 3){
|
// item.width = item.label.includes('Hours') ? 50 : 100
|
// } else if (item.value.length === 5){
|
// item.width = 130
|
// } else if (item.value.length === 7){
|
// item.width = 160
|
// } else if (item.value.length === 6){
|
// item.width = 150
|
// } else if (item.value.length === 2){
|
// item.width = item.label.includes('Hours') ? 52 : 86
|
// } else {
|
// item.width = item.label.includes('Hours') ? 46 : 86
|
// }
|
// }
|
// })
|
// }
|
|
// console.log(JSON.stringify(this.tableHead)+"---------"+JSON.stringify(this.tableData))
|
for (var a in this.data.selectField) {
|
if (this.data.selectField[a].choose == true) {
|
this.tableData.map((b) => {
|
try {
|
b[a] = JSON.parse(b[a]);
|
} catch (e) {}
|
});
|
}
|
}
|
// 一般的合并行
|
if (
|
this.data.spanConfig != undefined &&
|
this.data.spanConfig.rows &&
|
this.data.spanConfig.rows.length > 0
|
) {
|
this.spanList = [];
|
this.data.spanConfig.rows.forEach((item, index) => {
|
this.spanList.push({
|
arr: [],
|
position: 0,
|
});
|
this.rowspan(
|
this.spanList[index].arr,
|
this.spanList[index].position,
|
item.name
|
);
|
});
|
}
|
// 特殊的合并行
|
if (
|
this.data.spanConfig != undefined &&
|
this.data.spanConfig.special &&
|
this.data.spanConfig.special.main &&
|
this.data.spanConfig.special.rows &&
|
this.data.spanConfig.special.rows.length > 0
|
) {
|
this.specialSpanList = [];
|
this.data.spanConfig.special.rows.forEach((item, index) => {
|
this.specialSpanList.push({
|
arr: [],
|
position: 0,
|
});
|
this.rowspan(
|
this.specialSpanList[index].arr,
|
this.specialSpanList[index].position,
|
this.data.spanConfig.special.main
|
);
|
});
|
}
|
this.loading = false;
|
})
|
.catch((e) => {
|
console.log("请刷新页面再尝试---", e);
|
this.loading = false;
|
this.$message.error("请刷新页面再尝试");
|
});
|
},
|
sortChange(ob) {
|
this.data.entity.orderBy = {};
|
this.data.entity.orderBy.field = ob.prop;
|
if (ob.order == "ascending") {
|
this.data.entity.orderBy.order = "asc";
|
} else if (ob.order == "descending") {
|
this.data.entity.orderBy.order = "desc";
|
} else {
|
if (this.componentData.entity.orderBy != undefined) {
|
this.data.entity.orderBy = this.HaveJson(
|
this.dataCopy.entity.orderBy
|
);
|
}
|
}
|
this.selectList();
|
},
|
// 展示tag
|
showType(val, ob) {
|
var str = ob[val];
|
return str == undefined ? null : ob[val].select;
|
},
|
// 展示操作栏
|
showLink(val, ob) {
|
var str = ob[val];
|
return str == undefined ? null : ob[val].method;
|
},
|
showAddReq(label) {
|
if (this.data.requiredAdd == undefined) {
|
return;
|
}
|
for (var i = 0; i < this.data.requiredAdd.length; i++) {
|
if (label == this.data.requiredAdd[i]) {
|
return true;
|
}
|
}
|
return false;
|
},
|
showUpReq(label) {
|
if (this.data.requiredUp == undefined) {
|
return;
|
}
|
for (var i = 0; i < this.data.requiredUp.length; i++) {
|
if (label == this.data.requiredUp[i]) {
|
return true;
|
}
|
}
|
return false;
|
},
|
showUpload(label) {
|
if (this.data.addUpload && this.data.addUpload.find((m) => m == label)) {
|
return true;
|
} else {
|
return false;
|
}
|
},
|
showCascader(label) {
|
if (this.data.cascaderField && this.data.cascaderField[label]) {
|
return true;
|
} else {
|
return false;
|
}
|
},
|
handleTree(arr, value) {
|
let label = "";
|
for (let i = 0; i < arr.length; i++) {
|
if (arr[i].id == value) {
|
label = arr[i].name;
|
return label;
|
} else if (arr[i].children) {
|
label = this.handleTree(arr[i].children, value);
|
}
|
}
|
return label;
|
},
|
main(row, val) {
|
if (val.method == undefined) return;
|
else if (val.method == "doDiy") {
|
if (val.id == "update") {
|
// 编辑操作
|
(this.upDia = true), (this.upData = this.HaveJson(row));
|
this.upHead = this.HaveJson(this.tableHead);
|
this.upHead.forEach((item, index) => {
|
if (
|
this.data.cascaderField &&
|
this.data.cascaderField[item.label]
|
) {
|
if (this.upData[item.label]) {
|
this.upData[item.label] = JSON.parse(this.upData[item.label]);
|
} else {
|
this.upData[item.label] = [];
|
}
|
}
|
});
|
this.upHead = this.upHead.filter(
|
(a) => a.label != "createTime" && a.label != "updateTime"
|
);
|
delete this.upData.orderBy;
|
delete this.upData.createTime;
|
delete this.upData.updateTime;
|
delete this.upData.createUser;
|
delete this.upData.updateUser;
|
val.field.forEach((a) => {
|
if (this.upData[a] === undefined) {
|
this.upHead.push({
|
value: a.split("=")[0],
|
label: a.split("=")[1],
|
});
|
} else {
|
delete this.upData[a];
|
for (var i = 0; i < this.upHead.length; i++) {
|
if (this.upHead[i].label == a) {
|
this.upHead.splice(i, 1);
|
i--;
|
break;
|
}
|
}
|
}
|
});
|
} else if (val.id == "delete") {
|
// 删除操作
|
if (this.delUrl == null) {
|
this.$message.error("请给删除请求地址");
|
return;
|
}
|
this.$confirm("是否删除当前数据?", "警告", {
|
confirmButtonText: "确定",
|
cancelButtonText: "取消",
|
type: "warning",
|
})
|
.then(() => {
|
this.$axios
|
.post(this.delUrl, {
|
id: row.id,
|
})
|
.then((res) => {
|
if (res.code === 201) {
|
return;
|
}
|
this.$message.success("删除成功");
|
this.selectList("page");
|
this.$emit("delete");
|
})
|
.catch((e) => {
|
this.$message.error("删除失败");
|
});
|
})
|
.catch(() => {});
|
}
|
} else if (val.id === "parent") {
|
delete row.orderBy;
|
this.$parent.$parent[val.method](row);
|
} else {
|
delete row.orderBy;
|
this.$parent[val.method](row);
|
}
|
},
|
saveUpData() {
|
if (this.upUrl == null) {
|
this.$message.error("请给修改请求地址");
|
return;
|
}
|
for (var i = 0; i < this.data.requiredUp.length; i++) {
|
// 必填校验
|
if (
|
this.upData[this.data.requiredUp[i]] === null ||
|
this.upData[this.data.requiredUp[i]] === ""
|
) {
|
var list = this.upHead.filter((a) => {
|
if (a.label == this.data.requiredUp[i]) return a;
|
});
|
if (list[0].value == undefined) continue;
|
this.$message.error(list[0].value + "是必填项");
|
return;
|
}
|
}
|
for (var a in this.data.selectField) {
|
if (this.data.selectField[a].choose == true) {
|
this.upData[a] = JSON.stringify(this.upData[a]);
|
}
|
}
|
for (var i = 0; i < this.upHead.length; i++) {
|
if (this.upHead[i].label == "password") {
|
if (this.upData[this.upHead[i].label]) {
|
const reg2 =
|
/^(?=.*?[a-z])(?=.*?[A-Z])(?=.*?\d)(?=.*?[~!#@$%^*&()_+{}\[\]|\\;:'",<.>\/?])[a-zA-Z\d~!#@$%^*&()_+{}\[\]|\\;:'",<.>\/?]*$/;
|
if (!reg2.test(this.upData[this.upHead[i].label])) {
|
this.$message.error("密码必须包括数字、大小写字母以及特殊字符");
|
return;
|
}
|
}
|
}
|
if (
|
this.data.cascaderField &&
|
this.data.cascaderField[this.upHead[i].label]
|
) {
|
if (this.upData[this.upHead[i].label]) {
|
this.upData[this.upHead[i].label] = JSON.stringify(
|
this.upData[this.upHead[i].label]
|
);
|
} else {
|
this.upData[this.upHead[i].label] = "";
|
}
|
}
|
}
|
this.upLoad = true;
|
this.$axios
|
.post(this.upUrl, this.upData, {
|
headers: {
|
"Content-Type": "application/json",
|
},
|
})
|
.then((res) => {
|
if (res.code === 201) {
|
this.upLoad = false;
|
return;
|
}
|
this.$message.success("修改成功");
|
this.upDia = false;
|
this.selectList("page");
|
this.$refs.eltable.doLayout();
|
this.upLoad = false;
|
})
|
.catch((e) => {
|
this.$message.error("修改失败");
|
this.upDia = false;
|
this.upLoad = false;
|
});
|
},
|
// 打开新增弹框回调
|
openAddDia(addUrl, param) {
|
this.addDia = true;
|
this.addUrl = addUrl;
|
this.param = param;
|
this.upData = {};
|
this.tableHead.forEach((k, v) => {
|
if (
|
k.label != "orderBy" &&
|
k.label != "createTime" &&
|
k.label != "updateTime" &&
|
k.label != "createUser" &&
|
k.label != "updateUser"
|
)
|
this.upData[k.label] = null;
|
});
|
this.upData = this.HaveJson(this.upData);
|
this.upHead = this.HaveJson(this.tableHead);
|
this.upHead = this.upHead.filter(
|
(a) => a.label != "createTime" && a.label != "updateTime"
|
);
|
var val = this.data.do.filter((a) => a.id == "update")[0];
|
if (val == undefined) {
|
val = {
|
field: [],
|
};
|
}
|
val.field.forEach((a) => {
|
if (JSON.stringify(this.upData[a]) === undefined) {
|
this.upHead.push({
|
value: a.split("=")[0],
|
label: a.split("=")[1],
|
});
|
} else {
|
delete this.upData[a];
|
for (var i = 0; i < this.upHead.length; i++) {
|
if (this.upHead[i].label == a) {
|
this.upHead.splice(i, 1);
|
i--;
|
break;
|
}
|
}
|
}
|
});
|
},
|
// 新增回调
|
saveAddData() {
|
if (this.addUrl == null) {
|
this.$message.error("请给添加请求地址");
|
return;
|
}
|
for (var i = 0; i < this.data.requiredAdd.length; i++) {
|
if (
|
this.upData[this.data.requiredAdd[i]] === null ||
|
this.upData[this.data.requiredAdd[i]] === ""
|
) {
|
var list = this.upHead.filter((a) => {
|
if (a.label == this.data.requiredAdd[i]) return a;
|
});
|
if (list[0].value == undefined) continue;
|
this.$message.error(list[0].value + "是必填项");
|
return;
|
}
|
}
|
this.addLoad = true;
|
for (var a in this.data.selectField) {
|
if (this.data.selectField[a].choose == true) {
|
this.upData[a] = JSON.stringify(this.upData[a]);
|
}
|
}
|
this.upHead.forEach((item, index) => {
|
if (this.data.cascaderField && this.data.cascaderField[item.label]) {
|
if (this.upData[item.label]) {
|
this.upData[item.label] = JSON.stringify(this.upData[item.label]);
|
} else {
|
this.upData[item.label] = "";
|
}
|
}
|
});
|
if (this.param !== undefined && this.param !== null) {
|
for (let i in this.param) {
|
this.upData[i] = this.param[i];
|
}
|
}
|
this.$axios
|
.post(this.addUrl, this.upData, {
|
headers: {
|
"Content-Type": "application/json",
|
},
|
})
|
.then((res) => {
|
if (res.code === 201) {
|
this.addLoad = false;
|
return;
|
}
|
this.$message.success("添加成功");
|
this.addDia = false;
|
this.selectList("page");
|
this.addLoad = false;
|
})
|
.catch((e) => {
|
this.addDia = false;
|
this.addLoad = false;
|
});
|
},
|
openDownDia() {
|
this.downDia = true;
|
},
|
downFile(type) {
|
if (this.downUrl == null) {
|
this.$message.error("请给导出请求地址");
|
return;
|
}
|
var page = this.HaveJson(this.page);
|
if (!type) {
|
page.current = 0;
|
page.size = this.total;
|
}
|
this.loading = true;
|
this.$axios
|
.post(
|
this.downUrl,
|
{
|
page: page,
|
entity: this.data.entity,
|
},
|
{
|
headers: {
|
"Content-Type": "application/json",
|
},
|
}
|
)
|
.then((res) => {
|
if (res.code === 201) {
|
this.loading = false;
|
return;
|
}
|
this.downDia = false;
|
this.loading = false;
|
this.$message.success("导出成功");
|
let eleLink = document.createElement("a");
|
eleLink.style.display = "none";
|
eleLink.download = res.data;
|
eleLink.href = this.javaApi + "/outPath/" + res.data;
|
document.body.appendChild(eleLink);
|
eleLink.click();
|
document.body.removeChild(eleLink);
|
})
|
.catch((e) => {
|
console.log(e);
|
this.loading = false;
|
this.$message.error("请刷新页面再尝试");
|
});
|
},
|
openUpload() {
|
if (this.inputUrl == null) {
|
this.$message.error("请给导入请求地址");
|
return;
|
}
|
this.uploadDia = true;
|
},
|
beforeUpload(file, fileList) {
|
console.log(file.raw.type);
|
if (
|
file.raw.type !=
|
(this.data.inputType === undefined ? "text/csv" : this.data.inputType)
|
) {
|
this.$message.error("上传文件格式不正确");
|
this.$refs.upload.clearFiles();
|
return false;
|
}
|
},
|
submitUpload() {
|
if (this.$refs.upload.uploadFiles.length == 0) {
|
this.$message.error("未选择文件");
|
return;
|
}
|
this.uploading = true;
|
this.$refs.upload.submit();
|
},
|
onSuccess(response, file, fileList) {
|
this.$refs.upload.clearFiles();
|
this.uploadDia = false;
|
this.uploading = false;
|
if (response.code == 201) {
|
this.$message.error(response.message);
|
return;
|
}
|
this.$message.success("上传成功");
|
this.selectList();
|
},
|
onError(err, file, fileList) {
|
this.$message.error("上传失败");
|
this.$refs.upload.clearFiles();
|
this.uploading = false;
|
},
|
// 操作按钮置灰判断
|
isDisabled(label) {
|
if (this.data.disabledUp == undefined) {
|
return;
|
}
|
for (var i = 0; i < this.data.disabledUp.length; i++) {
|
if (label == this.data.disabledUp[i]) {
|
return true;
|
}
|
}
|
return false;
|
},
|
getSummaries(param) {
|
const { columns, data } = param;
|
const sums = [];
|
columns.forEach((column, index) => {
|
if (index === 0) {
|
sums[index] = "合计";
|
return;
|
}
|
const values = data.map((item) => Number(item[column.property]));
|
if (this.data.countFleid == undefined) {
|
sums[index] = "";
|
return;
|
}
|
if (
|
this.data.countFleid.filter((str) => {
|
return str === column.property;
|
}).length > 0
|
) {
|
sums[index] = values.reduce((prev, curr) => {
|
const value = Number(curr);
|
if (!isNaN(value)) {
|
return prev + curr;
|
} else {
|
return prev;
|
}
|
}, 0);
|
sums[index] += "";
|
} else {
|
sums[index] = "";
|
}
|
});
|
return sums;
|
},
|
handleLinkEvent(row, val) {
|
if (val.method == "doDiy") {
|
this.main(row, val);
|
} else {
|
this.$parent[val.method](row);
|
}
|
},
|
getWidth() {
|
let count = 0;
|
this.data.do.forEach((a) => {
|
count += a.font.length;
|
});
|
return count * 15 + 60 + "px";
|
},
|
handleSuccessUp(response, label) {
|
if (typeof label === "string") {
|
if (response.code == 200) {
|
this.upData[label] = response.data.url;
|
}
|
} else {
|
if (response.code == 200) {
|
this.$message.success("上传成功");
|
this.selectList();
|
}
|
}
|
},
|
handleCascader(e, label) {
|
this.upData[label] = e;
|
},
|
// 批量删除
|
batchDelete() {
|
if (this.multipleSelection && this.multipleSelection.length > 0) {
|
this.$confirm("是否删除选中的数据?", "警告", {
|
confirmButtonText: "确定",
|
cancelButtonText: "取消",
|
type: "warning",
|
})
|
.then(() => {
|
this.$axios
|
.post(this.delUrl, {
|
ids: JSON.stringify(
|
this.multipleSelection.map((item) => item.id)
|
),
|
})
|
.then((res) => {
|
if (res.code === 201) {
|
return;
|
}
|
this.$message.success("删除成功");
|
this.selectList("page");
|
})
|
.catch((e) => {
|
this.$message.error("删除失败");
|
});
|
})
|
.catch(() => {});
|
} else {
|
this.$message.error("请选择要删除的数据");
|
}
|
},
|
// 日工时管理辅助工时--批量审核和批准
|
batchCheck(e) {
|
if (this.multipleSelection && this.multipleSelection.length > 0) {
|
const list = JSON.parse(JSON.stringify(this.multipleSelection));
|
const state = e === 0 ? "不批准" : "已批准";
|
let auxiliaryWorkingHoursDays = [];
|
list.forEach((item) => {
|
delete item.orderBy;
|
item.state = state;
|
auxiliaryWorkingHoursDays.push(item);
|
});
|
this.$axios
|
.post(
|
this.$api.auxiliaryWorkingHoursDay.approve,
|
{ auxiliaryWorkingHoursDays: auxiliaryWorkingHoursDays },
|
{
|
headers: {
|
"Content-Type": "application/json",
|
},
|
}
|
)
|
.then((res) => {
|
if (res.code === 201) {
|
return;
|
}
|
this.$parent.submitBatchCheckDialog();
|
this.$message.success("操作成功");
|
});
|
} else {
|
this.$message.error("请选择至少一条数据");
|
}
|
},
|
getRedColor(label, row) {
|
if (
|
this.data.cellSpecialStyle &&
|
this.data.cellSpecialStyle.redColorByKey &&
|
label.includes(this.data.cellSpecialStyle.redColorByKey) &&
|
row[label.replace(this.data.cellSpecialStyle.redColorByKey, "")]
|
) {
|
return true;
|
} else {
|
return false;
|
}
|
},
|
},
|
};
|
</script>
|
