dcWaterService/src/views/dcSystem/installationProcess/process/machineAccount/index.vue

<!-- 报装申请 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>