最简单的一个页面

6个月前更新

<template>
<div class=”app-container”>
<div class=”main-search-list”>
<resrun-drawer-form ref=”searchForm” :form-item-list=”formOptions” @onSearch=”onSearch” @onReset=”onReset” @onSelectChange=”selectChange” />
<div class=”table-container”>
<div class=”el-btn-table”>
<business-table-setting :table-columns=”col” @setLayout=”listenSetLayout” />
</div>
<div class=”table-body draggable”>
<el-table
ref=”table”
v-loading=”loading”
:data=”data”
stripe
border
:height=”tableHeight”
style=”width: 100%”
highlight-current-row
tooltip-effect=”dark”
@selection-change=”selectionChange”
@row-click=”handleRowClick”
@sort-change=”sortList”
>
<el-table-column :selectable=”checkboxT” type=”selection” width=”55″ fixed=”left” />

<template v-for=”column in col”>
<table-column-drag :key=”column.prop” :column=”column”>
<template #custom=”scope”>
<el-button type=”success” size=”mini” @click=”downloadLog(scope.row)”>
下载
</el-button>
</template>
</table-column-drag>
</template>
</el-table>
<CustomPagination :pagation=”pagation” @currentChange=”currentChange” @sizeChange=”sizeChange” />
</div>
</div>
</div>
</div>
</template>

<script>
import { getLogsOfDocking, downloadLog } from ‘@/api/business/baseConfig/config’
import { users } from ‘@/components/business/viewbase’
import indexBase from ‘@/components/business/indexBase’
import { getDictMapByValue } from ‘@/api/system/dictDetail’
import { LOV } from ‘@/api/framework/xwlListOfValue’
const dirctionOptions = [
{ value: ‘0’, label: ‘SAP->CTRM’ },
{ value: ‘1’, label: ‘CTRM->SAP’ },
{ value: ‘3’, label: ‘MDM->CTRM’ },
{ value: ‘4’, label: ‘CTRM->OA’ },
{ value: ‘5’, label: ‘OA->CTRM’ },
{ value: ‘6’, label: ‘CTRM->GX’ },
{ value: ‘7’, label: ‘GX->CTRM’ },
{ value: ‘8’, label: ‘CRM->CTRM’ }
]
export default {
name: ‘zlgmlogging’,
components: {},
mixins: [indexBase(), users()],
data() {
return {
autoQuery: false,
tableTopBtn: true,
defaultTableColumns: [],
showTryBtn: false,
tableColumns: [
{ prop: ‘id’, label: ‘日志id’, width: ‘100’, visible: true },
{ prop: ‘direction’, label: ‘方向’, width: ‘100’, visible: true },
{ prop: ‘businessTypeName’, label: ‘业务类型’, width: ‘100’, visible: true },
{ prop: ‘legalEntityId’, label: ‘业务机构’, width: ‘100’, visible: true },
{ prop: ‘contractNumber’, label: ‘合同号’, width: ‘100’, visible: true },
{ prop: ‘businessId’, label: ‘记录ID’, width: ‘100’, visible: true },
{ prop: ‘code’, label: ‘记录Code’, width: ‘100’, visible: true },
{ prop: ‘sendingStatusName’, label: ‘状态’, width: ‘100’, visible: true },
{ prop: ‘response’, label: ‘返回信息’, width: ‘100’, visible: true },
{ prop: ‘submittedBy’, label: ‘提交人’, width: ‘100’, visible: true },
{ prop: ‘submissionTime’, label: ‘提交时间’, width: ‘100’, visible: true },
{ prop: ‘operation’, label: ‘操作’, width: ‘100’, visible: true, slot: true }
],
formOptions: [
{ type: ‘input’, label: ‘日志id’, prop: ‘id’, rules: [] },
{ type: ‘select’, label: ‘方向’, prop: ‘direction’, rules: [] },
{ type: ‘select’, label: ‘业务类型’, prop: ‘businessType’, rules: [] },
{ type: ‘select’, label: ‘业务机构’, prop: ‘legalEntityId’, rules: [], options: [], props: { value: ‘id’, label: ‘name’ }},
{ type: ‘input’, label: ‘合同号’, prop: ‘contractNumber’, rules: [] },
{ type: ‘input’, label: ‘记录ID’, prop: ‘businessId’, rules: [] },
{ type: ‘input’, label: ‘记录Code’, prop: ‘code’, rules: [] },
{ type: ‘select’, label: ‘状态’, prop: ‘sendingStatus’, rules: [] },
{ type: ‘select’, label: ‘提交人’, prop: ‘submittedBy’, rules: [] },
{ type: ‘date’, label: ‘提交开始时间’, prop: ‘submissionBeginTime’, rules: [] },
{ type: ‘date’, label: ‘提交结束时间’, prop: ‘submissionEndTime’, rules: [] }
],
isAllowColumnsOrder: true
}
},
computed: {},
watch: {
selectRow(val) {
if (val && val.sendingStatus !== 4) {
this.showTryBtn = true
}
}
},
async mounted() {
this.setFormItemOptionsModify(this.col, ‘direction’, dirctionOptions)
this.setFormItemOptionsModify(this.col, ‘submittedBy’, null, null, ‘users’)

this.setFormItemOptionsModify(this.formOptions, ‘direction’, dirctionOptions)
this.setFormItemOptionsModify(this.formOptions, ‘businessType’, null, getDictMapByValue(‘business_type’))
this.setFormItemOptionsModify(this.formOptions, ‘sendingStatus’, null, getDictMapByValue(‘sending_status’))
this.setFormItemOptionsModify(this.formOptions, ‘submittedBy’, null, null, ‘users’)
const companylistRes = await LOV(‘CTRM.COMMON/ListOfValue/LOV_Companylist’, false)
if (companylistRes) {
this.setFormItemOptionsModify(this.col, ‘legalEntityId’, companylistRes)
this.setFormItemOptionsModify(this.formOptions, ‘legalEntityId’, companylistRes)
}
// 有businessId的话，默认填充 businessId ,并且不设置默认开始结束时间有 code 的话,默认填充 code
if (this.$route.params.businessId && this.$route.query.type === ‘code’) {
this.setFormItemInitValue(this.formOptions, ‘code’, this.$route.params.businessId, ‘initValue’)
this.setFormItemInitValue(this.formOptions, ‘submissionBeginTime’, this.$dayjs(this.$route.query.createdTime).format(‘YYYY-MM-DD’), ‘initValue’)
this.setFormItemInitValue(this.formOptions, ‘submissionEndTime’, this.$dayjs(this.$route.query.createdTime).add(6, ‘day’).format(‘YYYY-MM-DD’), ‘initValue’)
} else if (this.$route.params.businessId) {
this.setFormItemInitValue(this.formOptions, ‘businessId’, this.$route.params.businessId, ‘initValue’)
this.setFormItemInitValue(this.formOptions, ‘submissionBeginTime’, this.$dayjs(this.$route.query.createdTime).format(‘YYYY-MM-DD’), ‘initValue’)
this.setFormItemInitValue(this.formOptions, ‘submissionEndTime’, this.$dayjs(this.$route.query.createdTime).add(6, ‘day’).format(‘YYYY-MM-DD’), ‘initValue’)
} else {
this.setFormItemInitValue(this.formOptions, ‘submissionEndTime’, this.$dayjs().format(‘YYYY-MM-DD’), ‘initValue’)
this.setFormItemInitValue(this.formOptions, ‘submissionBeginTime’, this.$dayjs().subtract(6, ‘day’).format(‘YYYY-MM-DD’), ‘initValue’)
}
setTimeout(() => {
this.pagation.page = 0
this.searchList()
}, 100)
},
methods: {
searchItems(params) {
// eslint-disable-next-line eqeqeq
if (params.submissionBeginTime != undefined) {
params.submissionBeginTime = params.submissionBeginTime + ‘ 00:00:00’
}
// eslint-disable-next-line eqeqeq
if (params.submissionEndTime != undefined) {
params.submissionEndTime = params.submissionEndTime + ‘ 23:59:59’
}
return getLogsOfDocking(params)
},
downloadLog(row) {
downloadLog(row).then(res => {
const blob = new Blob([res], { type: ‘application/octet-stream;charset=utf-8’ })
const url = window.URL.createObjectURL(blob)
const link = document.createElement(‘a’)
link.style.display = ‘none’
link.href = url
link.setAttribute(‘download’, row.logPath.split(‘/’).pop())
document.body.appendChild(link)
link.click()
document.body.removeChild(link)
})
}
}
}
</script>

<style lang=’scss’ scoped>
.el-form-item–small.el-form-item {
margin-bottom: 0;
}
</style>