<!-- 报装申请 1 -->
<template>
<div id="machineAccount">
<div class="head">
<el-form :inline="true" class="demo-form-inline" size="small">
<el-form-item label="关键字">
<el-input v-model="keys" clearable placeholder="请输入编号、名称、地址" />
</el-form-item>
<el-form-item label="当前环节：">
<el-select v-model="currentStep" clearable filterable placeholder="请选择当前环节">
<el-option v-for="item in optionData" :key="item.id" :label="item.label" :value="item.id" />
</el-select>
</el-form-item>
<el-form-item label="申请日期">
<el-date-picker
v-model="applyDate"
type="daterange"
format="yyyy年MM月dd日"
value-format="yyyy-MM-dd"
range-separator="-"
start-placeholder="开始日期"
end-placeholder="结束日期"
/>
</el-form-item>
<el-form-item>
<el-button type="primary" size="small" icon="el-icon-search" @click="searchBtn">查询</el-button>
</el-form-item>
</el-form>
</div>
<div class="modal_box">
<div class="form">
<el-dialog v-dialogDrag title="报装详情" :visible.sync="dialogVisible" width="80%">
<div class="dialog_style" :style="{ height: mapHeight }">
<ProcessDetails v-if="dialogVisible" ref="processDetails" style="height:100%" :data="editData" :map-height="mapHeightT" :active-names="['apply','headViews']" :is-look="isLook" :process-instance-id="processInstanceId" :destroy-on-close="true" />
</div>
</el-dialog>
</div>
</div>
<div class="main">
<tf-table
:loading="listLoading"
:table-data="list"
:column="column"
:pagination="true"
:pagesize="pagination.size"
:currentpage="pagination.current"
:for-id="true"
:tableheight="tableheight"
:border="true"
:multiple="false"
:total="total"
:isdelete="false"
@rowDblclick="rowDblclick"
@handleCurrentChange="handleCurrentChange"
@handleSizeChange="handleSizeChange"
@handleSelectionChange="handleSelectionChange"
@detail="detail"
/>
</div>
</div>
</template>
<script>
import { client } from '@/utils/index'
import ProcessDetails from '../processDetails/indexTabs.vue'
import { getInstallList } from '@/api/dcApi/installationProcess/process.js'
export default {
name: 'MachineAccount',
components: { ProcessDetails },
data() {
return {
keys: '',
applyDate: '',
currentStep: '',
optionData: [
{
id: 'apply',
label: '报装申请'
},
{
id: 'installChargeSuggest',
label: '安装负责人意见'
},
{
id: 'managerChargeApproval',
label: '分管经理批示'
},
{
id: 'managerApproval',
label: '经理批示'
},
{
id: 'survey',
label: '上门勘察'
},
{
id: 'pay',
label: '用户缴费'
},
{
id: 'construction',
label: '上门施工'
},
{
id: 'check',
label: '工程验收'
},
{
id: 'finished',
label: '已完结'
}
],
column: [
{
label: '报装编号',
prop: 'applyInstallNo',
width: 200
},
{
label: '用户名称',
prop: 'consumerName'
},
{
label: '业务类型',
prop: 'buinessTypeName'
},
{
label: '详细地址',
prop: 'consumerAddress'
},
{
label: '安装数量',
prop: 'installNum'
},
{
label: '申请人',
prop: 'applyUserName'
},
{
label: '联系电话',
prop: 'contactPhoneNo'
},
{
label: '申请日期',
prop: 'applyDate'
},
{
label: '勘察日期',
prop: 'surveyDate'
},
{
label: '缴费日期',
prop: 'chargeTime'
},
{
label: '安装日期',
prop: 'installTime'
},
{
label: '验收日期',
prop: 'checkTime'
},
{
label: '当前环节',
prop: 'currentNodeName'
},
{
slotScoped: 'operation',
label: '操作',
acts: [{ emitWay: 'detail', color: '#0000FF', operation: '详情' }]
}
],
list: [],
total: 0,
editData: {},
selectedData: [],
multipleSelection: [],
pagination: { current: 1, size: 30, approvalPersonId: sessionStorage.getItem('userId') },
listLoading: true,
dialogVisible: false,
isLook: false,
processInstanceId: 0, visible: false
}
},
computed: {
tableheight() {
return client().height - 64 - 43 - 40 - 55 + 'px'
},
mapHeight() {
return client().height - 134 - (client().height * 0.02) + 'px'
},
mapHeightT() {
return client().height - 134 - 193 - (client().height * 0.02) + 'px'
}
},
watch: {
},
created() {
this.fetchData(this.pagination)
},
methods: {
handleCurrentChange(currentPage) {
this.pagination.current = currentPage
this.fetchData(this.pagination)
},
handleSizeChange(pagesize) {
this.pagination.current = 1
this.pagination.size = pagesize
this.fetchData(this.pagination)
},
handleSelectionChange(value) {
this.multipleSelection = value
},
fetchData(data) {
this.listLoading = true
getInstallList({
...data,
applyStatus: 2
}).then((res) => {
if (res.code === 1) {
this.total = res.result.total
this.list = res.result.records
this.list.map(e => {
e.applyDate = e.applyDate.split(' ')[0]
})
this.listLoading = false
}
})
},
searchBtn() {
this.pagination.current = 1
this.keys ? this.pagination.keys = this.keys : delete this.pagination.keys
this.currentStep ? this.pagination.queryNodeAlias = this.currentStep : delete this.pagination.queryNodeAlias
if (this.applyDate) {
console.log('this.applyDate', this.applyDate)
this.pagination.applyInstallTimeStart = this.applyDate[0]
this.pagination.applyInstallTimeEnd = this.applyDate[1]
} else {
delete this.pagination.applyInstallTimeStart
delete this.pagination.applyInstallTimeEnd
}
this.fetchData(this.pagination)
},
submitForm() {
this.$refs.form.submitForm()
},
rowDblclick(row) {
console.log(row)
},
detail(val) {
if (val.id) {
this.editData = val
this.processInstanceId = val.processInstanceId
} else {
this.editData = this.multipleSelection[0]
this.processInstanceId = this.multipleSelection[0].processInstanceId
}
this.processInstanceId = this.processInstanceId || 0
this.dialogTitle = '详情'
this.dialogVisible = true
this.isLook = false
},
remind(data) {
this.dialogVisible = false
this.searchBtn()
}
}
}
</script>
<style lang="scss" scoped>
#machineAccount {
margin: 20px;
.el-form-item {
margin-bottom: 15px;
}
.modal_box {
/deep/ .el-dialog__wrapper {
display: flex;
justify-content: center;
align-items: center;
padding: 20px 0;
box-sizing: border-box;
.el-dialog {
margin-top: 0vh !important;
font-size: 12px;
.el-date-editor {
width: 100%;
}
.el-dialog__body {
padding: 10px 0px !important;
}
.el-dialog__header {
height: 40px;
padding: 7px 0;
.el-dialog__headerbtn {
position: absolute;
top: 0px;
right: 0px;
height: 40px;
padding: 7px 20px;
}
background-color: #2d74e7;
.el-dialog__title {
color: #dfeffe;
}
.el-icon-close:before {
color: #fff;
}
}
.el-input__inner {
height: 34px;
}
.el-form {
padding: 0 35px;
box-sizing: border-box;
.el-form-item {
margin-bottom: 14px;
}
}
.el-dialog__footer {
padding: 0 20px 5px !important;
}
}
}
.text-space {
/deep/.el-link--inner {
font-size: 12px;
max-width: 650px;
// 1.先强制一行内显示文本
white-space: nowrap;
// 2.超出部分隐藏
overflow: hidden;
// 3.文字用省略号替换超出的部分
text-overflow: ellipsis;
}
}
}
}
.dialog_style {
width: 100%;
/deep/ .el-table {
text-align: center;
vertical-align: middle;
}
}
</style>