You can not select more than 25 topics
Topics must start with a letter or number, can include dashes ('-') and can be up to 35 characters long.
580 lines
14 KiB
580 lines
14 KiB
<template> |
|
<div id="oilSiteUser"> |
|
<div class="table-header table-div el-scrollbar table-div-box"> |
|
<div slot="search" class="frame"> |
|
<!--这里放顶部搜索--> |
|
<!-- 搜索部分开始 --> |
|
<el-form label-width="90px" :inline="true" :model="page" class="search-form" :size="$store.getters.size"> |
|
<el-form-item> |
|
<el-input v-model="page.params.settlementNo" placeholder="结算单号" clearable @keyup.enter.native="getByPage" /> |
|
</el-form-item> |
|
<el-form-item> |
|
<el-select v-model="page.params.settlementType" clearable placeholder="客户类型"> |
|
<el-option label="企业" value="1" /> |
|
<el-option label="炼厂" value="2" /> |
|
</el-select> |
|
</el-form-item> |
|
|
|
<autocomplete class="mr20" :params="page.params" :config="configAutocomplete" /> |
|
|
|
<el-form-item> |
|
<el-select v-model="page.params.auditState" clearable placeholder="审核状态"> |
|
<el-option label="待审核" value="0" /> |
|
<el-option label="已审核" value="1" /> |
|
<el-option label="审核失败" value="-1" /> |
|
</el-select> |
|
</el-form-item> |
|
<el-form-item> |
|
<el-select |
|
v-model="page.params.createUser" |
|
clearable |
|
filterable |
|
remote |
|
reserve-keyword |
|
placeholder="请输入创建人" |
|
:remote-method="userRemoteMethod" |
|
@keyup.enter.native="getByPage" |
|
> |
|
<el-option |
|
v-for="item in userList" |
|
:key="item.id" |
|
:label="item.phone + '(' + (item.nickName ? item.nickName + '-' : '') + item.userCode + ')'" |
|
:value="item.id" |
|
/> |
|
</el-select> |
|
</el-form-item> |
|
<el-form-item> |
|
<el-date-picker |
|
v-model="page.params.createTime" |
|
clearable |
|
format="yyyy-MM-dd" |
|
value-format="yyyy-MM-dd" |
|
type="date" |
|
placeholder="创建时间" |
|
/> |
|
</el-form-item> |
|
</el-form> |
|
|
|
<!-- 搜索部分结束 --> |
|
<el-row slot="button-group" style="margin-top: 5px; display: flex; align-items: center"> |
|
<el-col :span="16" style="text-align: start"> |
|
<el-button icon="el-icon-plus" @click="toAdd()">新增</el-button> |
|
</el-col> |
|
<el-col :span="8"> |
|
<div style="text-align: right"> |
|
<el-button icon="el-icon-search" @click="search">查询</el-button> |
|
<el-button icon="el-icon-refresh" @click="refrech">重置</el-button> |
|
</div> |
|
</el-col> |
|
</el-row> |
|
</div> |
|
|
|
<div slot="table" class="table"> |
|
<!--这里放表格和分页--> |
|
<!-- 列表开始 --> |
|
<el-table :max-height="tableHeight" stripe :data="dataPage" fit style="width: 100%" :size="$store.getters.size"> |
|
<el-table-column label="序号" type="index" :index="indexMethod" /> |
|
<template v-for="(item, index) in tableColumns"> |
|
<el-table-column |
|
v-if="item.show" |
|
:key="index" |
|
:fixed="item.fixed" |
|
:align="item.align" |
|
:show-overflow-tooltip="true" |
|
:min-width="item.minWidth" |
|
:width="item.width" |
|
:prop="item.prop" |
|
:sortable="item.sortable" |
|
:label="item.label" |
|
:formatter="item.render" |
|
/> |
|
</template> |
|
<el-table-column fixed="right" label="操作" width="150px"> |
|
<template slot-scope="scope"> |
|
<el-button :size="$store.getters.size" type="text" @click="detail(scope.row)"> <svg-icon icon-class="iconxiangqing1" />详情 </el-button> |
|
</template> |
|
</el-table-column> |
|
</el-table> |
|
<!-- 列表结束 --> |
|
|
|
<!-- 分页组件开始 --> |
|
<div class="page-div"> |
|
<el-pagination |
|
:current-page="page.currentPage" |
|
:page-sizes="[10, 15, 20, 30]" |
|
:page-size="page.pageSize" |
|
layout="total, sizes, prev, pager, next, jumper" |
|
:total="page.totalCount" |
|
@size-change="handleSizeChange" |
|
@current-change="handleCurrentChange" |
|
/> |
|
</div> |
|
<!-- 分页组件结束 --> |
|
</div> |
|
<!-- 详情抽屉 --> |
|
<el-drawer v-if="detailDrawer" :visible.sync="detailDrawer" destroy-on-close direction="ltr" size="70%"> |
|
<oilFinalStatementListInfo :importData="importData" @getByPage="getByPage" @closeDialog="closeDialog" /> |
|
</el-drawer> |
|
</div> |
|
</div> |
|
</template> |
|
<script> |
|
import oilFinalStatementListInfo from './oilFinalStatementListInfo' |
|
import internalCompanyApi from '@/api/user/internalCompany' |
|
import sysCustomerInfoApi from '@/api/user/sysCustomerInfo' |
|
import autocomplete from 'components/autocomplete/index.vue' |
|
import { mapGetters } from 'vuex' |
|
|
|
export default { |
|
components: { |
|
oilFinalStatementListInfo, |
|
autocomplete |
|
}, |
|
data() { |
|
return { |
|
configAutocomplete: { |
|
serveTarget: internalCompanyApi.getLikeByCompanyType, |
|
autocompleteKey: 'name', |
|
labelKey: 'name', |
|
valueKey: 'id', |
|
placeholder: '客户名称', |
|
querykey: 'settlementId' |
|
}, |
|
detailDrawer: false, |
|
thisloding: true, |
|
page: { |
|
pageSize: 10, // 每页显示条数 |
|
currentPage: 1, // 默认页 |
|
params: {}, // 查询参数 |
|
sorted: {}, |
|
columns: [] |
|
}, |
|
userList: '', |
|
tableHeight: document.documentElement.clientHeight - 300 - 50, |
|
filters: this.$options.filters, |
|
dataPage: [], |
|
tableColumns: [ |
|
{ |
|
prop: 'settlementNo', |
|
minWidth: 350, |
|
label: '结算单号', |
|
show: true, |
|
render: (row, column, cell) => { |
|
return cell |
|
} |
|
}, |
|
{ |
|
prop: 'settlementObjectName', |
|
minWidth: 350, |
|
label: '结算客户名称', |
|
show: true, |
|
render: (row, column, cell) => { |
|
return ( |
|
<div> |
|
<el-tag color={row.settlementType != 1 ? '#F59A23' : ''} effect="dark" type={row.settlementType != 1 ? 'warning' : ''}> |
|
{row.settlementType == 1 ? '企业' : '炼厂'} |
|
</el-tag> |
|
<span style="margin-left:10px">{row.settlementObjectName}</span> |
|
</div> |
|
) |
|
} |
|
}, |
|
{ |
|
prop: 'auditState', |
|
minWidth: 120, |
|
label: '审核状态', |
|
show: true, |
|
render: (row, column, cell) => { |
|
if (cell === 0) { |
|
return ( |
|
<el-button type="warning" size="mini"> |
|
待审核 |
|
</el-button> |
|
) |
|
} |
|
if (cell === 1) { |
|
return ( |
|
<el-button type="success" size="mini"> |
|
已审核 |
|
</el-button> |
|
) |
|
} |
|
if (cell === -1) { |
|
return ( |
|
<el-button type="danger" size="mini"> |
|
审核失败 |
|
</el-button> |
|
) |
|
} |
|
return cell |
|
} |
|
}, |
|
{ |
|
prop: 'settlementAmount', |
|
minWidth: 120, |
|
label: '订单金额', |
|
show: true, |
|
render: (row, column, cell) => { |
|
return cell |
|
} |
|
}, |
|
{ |
|
prop: 'invoicedAmount', |
|
minWidth: 120, |
|
label: '开票金额', |
|
show: true, |
|
render: (row, column, cell) => { |
|
return Number(cell).toFixed(2) |
|
} |
|
}, |
|
{ |
|
prop: 'createUserName', |
|
minWidth: 180, |
|
label: '创建人信息', |
|
show: true, |
|
render: (row, column, cell) => { |
|
return ( |
|
<div> |
|
<span> |
|
{row.createUserName} - {row.createUserPhone} |
|
</span> |
|
<br /> |
|
<span>{row.createTime}</span> |
|
</div> |
|
) |
|
} |
|
} |
|
], |
|
importData: {}, |
|
rules: { |
|
encryptPsw: [ |
|
{ required: true, message: '请输入新密码', trigger: 'blur' }, |
|
{ min: 6, max: 16, message: '长度在 6 到 16 个字符', trigger: 'blur' } |
|
] |
|
} |
|
} |
|
}, |
|
computed: { |
|
...mapGetters(['sysUserList']) |
|
}, |
|
created() { |
|
this.getByPage() |
|
// 增加监听事件，窗口变化时得到高度。 |
|
window.addEventListener('resize', this.getHeight, false) |
|
}, |
|
watch: { |
|
'$route.path'(toPath, fromPath) { |
|
if (toPath == '/finance/oilFinalStatement/oilFinalStatementList') { |
|
this.getByPage() |
|
} |
|
} |
|
}, |
|
methods: { |
|
userRemoteMethod(value) { |
|
// 远程搜索 |
|
if (value) { |
|
sysCustomerInfoApi.liekQuery(value).then(res => { |
|
this.userList = res.data |
|
}) |
|
} |
|
}, |
|
toAdd() { |
|
this.$router.push({ path: './oilFinalStatementAddList', query: { type: 'toAdd' } }) |
|
}, |
|
indexMethod(index) { |
|
return (index + 1) * 1 |
|
}, |
|
async detail(row) { |
|
await internalCompanyApi.getByIdDetail(row.id).then(res => { |
|
this.importData = res.data |
|
}) |
|
// 查看行 详情 |
|
this.detailDrawer = true |
|
}, |
|
getHeight() { |
|
// 获取浏览器高度并计算得到表格所用高度。 |
|
this.tableHeight = document.documentElement.clientHeight - 300 - 60 |
|
}, |
|
search() { |
|
// 搜索 |
|
this.page.currentPage = 1 |
|
this.getByPage() |
|
}, |
|
handleSizeChange(val) { |
|
this.page.pageSize = val |
|
this.getByPage() |
|
}, |
|
handleCurrentChange(val) { |
|
this.page.currentPage = val |
|
this.getByPage() |
|
}, |
|
refrech() { |
|
this.page.params = {} |
|
this.getByPage() |
|
}, |
|
getByPage() { |
|
// 分页查询 |
|
|
|
internalCompanyApi.getByPage(this.page).then(res => { |
|
this.dataPage = res.data.list |
|
this.page.totalCount = res.data.totalCount |
|
this.page.totalPage = res.data.totalPage |
|
}) |
|
// },500) |
|
// }) |
|
}, |
|
closeDialog() { |
|
this.detailDrawer = false |
|
} |
|
} |
|
} |
|
</script> |
|
|
|
<style lang="scss" scoped> |
|
.type-yuan { |
|
border-radius: 50%; |
|
width: 12px; |
|
height: 12px; |
|
background: #168efa; |
|
} |
|
|
|
.type-yuan-info { |
|
border-radius: 50%; |
|
width: 12px; |
|
height: 12px; |
|
background: #c0c4cc; |
|
} |
|
|
|
.handle-button-group { |
|
margin-bottom: 10px; |
|
} |
|
|
|
.table-div { |
|
min-height: calc(100vh - 150px); |
|
max-height: calc(100vh - 110px); |
|
position: relative; |
|
margin-bottom: 20px; |
|
} |
|
|
|
.table-div >>> .header-container { |
|
position: sticky; |
|
top: 0rem; |
|
min-height: 110px; |
|
z-index: 4; |
|
background: #fff; |
|
} |
|
|
|
.table-div .el-table__footer-wrapper { |
|
position: fixed !important; |
|
} |
|
|
|
.page-div { |
|
position: fixed; |
|
background: #fff; |
|
bottom: 0rem; |
|
z-index: 4; |
|
min-width: 100%; |
|
} |
|
|
|
.el-icon-check { |
|
color: #46a6ff; |
|
} |
|
|
|
.dispose-dialog { |
|
width: 95%; |
|
margin: 0 auto; |
|
} |
|
|
|
.dispose-dialog div:nth-child(2) span:first-child { |
|
color: #999; |
|
} |
|
|
|
.dispose-dialog div:nth-child(2) span:last-child { |
|
color: #46a6ff; |
|
} |
|
|
|
.dispose-dialog div:nth-child(3) { |
|
display: flex; |
|
justify-content: space-between; |
|
} |
|
|
|
.dispose-dialog .flex2 { |
|
width: 45%; |
|
background: #e4e4e4; |
|
padding: 30px 20px; |
|
} |
|
|
|
.dispose-dialog .flex2 span { |
|
color: #666 !important; |
|
font-size: 16px; |
|
margin-bottom: 20px; |
|
display: block; |
|
text-align: center; |
|
} |
|
|
|
.stepsStyle >>> .el-step__icon { |
|
width: 20px; |
|
height: 20px; |
|
} |
|
|
|
.stepsStyle >>> .el-step__title { |
|
font-size: 14px; |
|
line-height: 24px; |
|
} |
|
|
|
.stepsStyle >>> .el-step__main { |
|
margin-top: 5px; |
|
} |
|
|
|
.stepsStyle >>> .el-step__title.is-process { |
|
background: #168efa !important; |
|
color: #fff; |
|
border-radius: 20px; |
|
cursor: pointer; |
|
font-weight: normal; |
|
} |
|
|
|
.stepsStyle >>> .el-loading-mask { |
|
opacity: 0.8; |
|
} |
|
|
|
.stepsStyle >>> .el-loading-spinner { |
|
margin-top: -10px; |
|
} |
|
|
|
.stepsStyle >>> .el-loading-spinner .circular { |
|
height: 20px; |
|
width: 20px; |
|
} |
|
|
|
.stepsStyle >>> .el-step__head.is-process { |
|
color: #168efa; |
|
border-color: #c0c4cc; |
|
} |
|
|
|
.stepsStyle >>> .el-step__description { |
|
margin-top: 0; |
|
} |
|
|
|
.stepsStyle >>> .el-step__head.is-finish { |
|
color: #168efa; |
|
border-color: #c0c4cc; |
|
} |
|
|
|
.stepsStyle >>> .el-step__head.is-finish .el-step__line { |
|
background: #168efa; |
|
} |
|
|
|
.stepsStyle >>> .el-step__title.is-finish { |
|
color: #c0c4cc; |
|
} |
|
|
|
.stepsStyle >>> .el-step__line-inner { |
|
width: fit-content !important; |
|
} |
|
|
|
.el-icon-error, |
|
.errstyle { |
|
color: red; |
|
} |
|
|
|
.stepsStyle >>> .is-horizontal:last-child .el-step__title { |
|
background: transparent !important; |
|
color: #c0c4cc; |
|
cursor: auto; |
|
} |
|
</style> |
|
<style> |
|
.table-div-box .el-form-item__content .el-input { |
|
box-shadow: none !important; |
|
} |
|
|
|
.table-div-box .el-form-item--medium .el-form-item__content { |
|
width: 100%; |
|
} |
|
#oilSiteUser .frame { |
|
margin: 20px; |
|
padding: 20px; |
|
border-radius: 6px; |
|
border: 1px solid #e3e3e5; |
|
background: #fff; |
|
|
|
.el-input, |
|
.el-select { |
|
width: 183px; |
|
height: 40px; |
|
} |
|
.el-autocomplete + .el-select, |
|
.el-input + .el-input, |
|
.el-input + .el-select, |
|
.el-select + .el-select, |
|
.el-select + .el-input { |
|
margin-right: 20px; |
|
margin-bottom: 15px; |
|
} |
|
.mr20 { |
|
margin-right: 20px; |
|
} |
|
.buttons { |
|
text-align: right; |
|
} |
|
} |
|
#oilSiteUser .table { |
|
overflow: hidden; |
|
margin: 0 20px; |
|
padding-bottom: 20px; |
|
background: #fff; |
|
border-radius: 6px; |
|
border: 1px solid #e3e3e5; |
|
> .operation { |
|
box-sizing: content-box; |
|
padding: 15px; |
|
} |
|
.gray { |
|
color: #999; |
|
span { |
|
color: #333; |
|
} |
|
} |
|
.el-table { |
|
margin-bottom: 20px; |
|
border-radius: 10px 10px 0px 0px; |
|
} |
|
.el-link { |
|
margin-right: 10px; |
|
} |
|
} |
|
#oilSiteUser .el-badge__content { |
|
right: 15px; |
|
top: 5px; |
|
} |
|
|
|
.el-icon-sort { |
|
transform: rotate(90deg); |
|
font-weight: 600; |
|
} |
|
|
|
.el-icon-daijiesuan { |
|
background: url('../../assets/img/oilFinalStatement/icon-daijiesuan.png') center no-repeat; |
|
font-size: 12px; |
|
background-size: cover; |
|
} |
|
|
|
.el-icon-daijiesuan:before { |
|
content: '替'; |
|
font-size: 12px; |
|
visibility: hidden; |
|
} |
|
|
|
.el-icon-jiesuandanqiehuan { |
|
background: url('../../assets/img/oilFinalStatement/icon-jiesuandanqiehuan.png') center no-repeat; |
|
font-size: 12px; |
|
background-size: cover; |
|
} |
|
|
|
.el-icon-jiesuandanqiehuan:before { |
|
content: '替'; |
|
font-size: 12px; |
|
visibility: hidden; |
|
} |
|
</style>
|
|
|