hitch-sb-antd/src/views/workplace/backlog/WorkplaceBacklog.vue

<template>
  <page-view :avatar="avatar" :title="false">
    <div slot="headerContent">
      <div class="title">{{ timeFix }}，{{ user.realName }}<!--<span class="welcome-text">，{{ welcome }}</span>--></div>
      <!--      <div>前端工程师 | 蚂蚁金服 - 某某某事业群 - VUE平台</div>-->
    </div>
    <div slot="extra">
    </div>

    <a-card :bordered="false" v-show="dataFlag">
      <div v-show="visible">
        <div class="table-page-search-wrapper">
          <a-form layout="inline">
            <a-row :gutter="48">
              <a-col :md="4" :sm="24">
                <a-form-item label="内容">
                  <a-input v-model="queryParam.content" placeholder="内容"/>
                </a-form-item>
              </a-col>
              <a-col :md="4" :sm="24">
                <a-form-item label="状态">
                  <a-select :default-value="defaultValue" v-model="queryParam.status" placeholder="请选择">
                    <a-select-option
                      :key="1"
                      label="未读"
                      :value="1">未读
                    </a-select-option>
                    <a-select-option
                      :key="2"
                      label="已读"
                      :value="2">已读
                    </a-select-option>
                  </a-select>
                </a-form-item>
              </a-col>
              <a-col :md="8 || 24" :sm="24">
                <span class="table-page-search-submitButtons">
                  <a-button type="primary" @click="$refs.table.refresh(true)">查询</a-button>
                  <a-button style="margin-left: 8px" @click="resetSearchForm">重置</a-button>
                </span>
              </a-col>
            </a-row>
          </a-form>
        </div>

        <s-table
          ref="table"
          size="default"
          rowKey="id"
          :columns="columns"
          :data="loadData"
          showPagination="auto"
        >
          <span slot="action" slot-scope="record">
            <template>
              <a @click="handle(record)">详情</a>
              <a-divider v-if="record.status === 1" type="vertical" />
              <a v-if="record.status === 1" @click="dealJumpDetail(record)">跳转</a>
            </template>
          </span>
          <a slot="name" slot-scope="text" v-html="text"> {{ text }}</a>
          <span slot="content" slot-scope="text" v-html="text">
          </span>
        </s-table>
      </div>
      <detail ref="detail" />
      <detail-repair-application-form ref="detailRepairApplicationFormModal" @ok="handleOk"/>
      <detail-repair-application-form-repair ref="detailRepairApplicationFormRepairModal" @ok="handleOk"/>
      <detail-repair-application-form-check ref="detailRepairApplicationFormCheckModal" @ok="handleOk"/>
      <detail-out-store ref="detailOutStoreModal" @ok="handleOk"/>
      <detail-spare-pick ref="detailSparePickModal" @ok="handleOk"/>
      <sb-allocate-apply-detail ref="sbAllocateApplyDetail" @ok="handleOk" />
    </a-card>
    <sb-allocate-task-audit res="sbAllocateTaskAudit" v-if="sbAllocateTaskAuditShow" :target-id="targetId" @back="back" />
    <suplier-audit-form ref="supplierAuditModal" @ok="handleOk"/>
    <detail-audit-scrap ref="detailAuditScrapModal" @ok="handleOk"/>
    <detail-scrap ref="detailScrapModal" @ok="handleOk"/>
  </page-view>
</template>

<script>
import { timeFix } from '@/utils/util'
import { mapState } from 'vuex'
import { PageView } from '@/layouts'
import HeadInfo from '@/components/tools/HeadInfo'
import { Radar, STable } from '@/components'
import Detail from './modules/Detail'
import SbAllocateApplyDetail from '@/views/sb/allocate-apply/modules/Detail'
import SbAllocateTaskAudit from '@/views/sb/allocate-task/SbAllocateTaskAudit'
import { getWorkplaceBacklogUserPage, updateWorkplaceBacklog, fetchWorkplaceBacklogUserById } from '@/api/workplace/backlog'
import { fetchRepairApplicationForm } from '@/api/repair/application-form'
import { fetchOutStoreForm } from '@/api/store/outstoreform'
import { fetchPurchaseOrder } from '@/api/purchase/purchase-order'
import { fetchPurchaseDispatchOrder } from '@/api/purchase/purchase-dispatch-order'
import { fetchSparePickForm } from '@/api/store/sparepickform'
import DetailRepairApplicationForm from '../../repair/application-form/modules/Detail'
import DetailRepairApplicationFormRepair from '../../repair/application-form/modules/DetailRepair'
import DetailRepairApplicationFormCheck from '../../repair/application-form/modules/DetailCheck'
import DetailOutStore from '../../store/outstoreform/modules/Detail'
import DetailSparePick from '../../store/sparepickform/modules/Detail'
import { fetchSbOil } from '@/api/sb/oil'
import { fetchSbAllocateApply } from '@/api/sb/allocate-apply'
import SuplierAuditForm from '@/views/purchase/supplier/modules/AuditForm'
import DetailAuditScrap from '@/views/sb/scrap/modules/DetailAuditScrap'
import DetailScrap from '@/views/sb/scrap/modules/Detail'

export default {
  name: 'Workplace',
  components: {
    PageView,
    STable,
    HeadInfo,
    Radar,
    Detail,
    DetailRepairApplicationForm,
    DetailRepairApplicationFormRepair,
    DetailRepairApplicationFormCheck,
    DetailOutStore,
    DetailSparePick,
    SbAllocateTaskAudit,
    SbAllocateApplyDetail,
    SuplierAuditForm,
    DetailAuditScrap,
    DetailScrap
  },
  data () {
    return {
      // 查询参数
      queryParam: {
        status: 1
      },
      defaultValue: 1,
      typeDict: {},
      typeDetailDict: {},
      leaderFlag: false,
      dataFlag: true,
      targetId: null,
      // 表头

      columns: [
        {
          title: '序号',
          dataIndex: 'index',
          align: 'center',
          customRender: (text, record, index) => {
            return `${(this.$refs.table.localPagination.current - 1) * this.$refs.table.localPagination.pageSize + index + 1}`
          }
        },
        {
          title: '类型',
          dataIndex: 'type',
          align: 'center',
          customRender: (text, record, index) => {
            return this.typeDict[text]
          }
        },
        {
          title: '详细类型',
          dataIndex: 'detailType',
          align: 'center',
          customRender: (text, record, index) => {
            return this.typeDetailDict[text]
          }
        },
        {
          title: '内容',
          dataIndex: 'content',
          align: 'center',
          width: 400,
          scopedSlots: { customRender: 'content' }
        },
        {
          title: '时间',
          align: 'center',
          dataIndex: 'createdTime'
        },
        {
          title: '状态',
          align: 'center',
          dataIndex: 'status',
          customRender: (text, record, index) => {
            return (text === 1 ? '未读' : '已读')
          }
        },
        {
          title: '操作',
          key: 'action',
          align: 'center',
          scopedSlots: { customRender: 'action' }
        }
      ],
      // 加载数据方法 必须为 Promise 对象
      loadData: parameter => {
        parameter = {
          ...parameter,
          ...this.queryParam
        }
        return getWorkplaceBacklogUserPage(parameter)
          .then(res => {
            return res.data
          })
      },
      selectedRowKeys: [],
      selectedRows: [],

      options: {
        alert: { show: true, clear: () => { this.selectedRowKeys = [] } },
        rowSelection: {
          selectedRowKeys: this.selectedRowKeys,
          onChange: this.onSelectChange
        }
      },
      optionAlertShow: false,

      timeFix: timeFix(),
      avatar: '',
      user: {},
      visible: true,
      sbOilTaskShow: false,
      sbOilAuditShow: false,
      sbAllocateTaskAuditShow: false,
      loading: true
    }
  },
  computed: {
    ...mapState({
      nickname: (state) => state.user.realName,
      welcome: (state) => state.user.welcome
    }),
    userInfo () {
      return this.$store.getters.userInfo
    }
  },
  created () {
    this.user = this.userInfo
    this.avatar = this.BaseTool.Constant.FILE_URL + this.userInfo.avatar
    this.getDict()
    this.tableOption()
  },
  mounted () {
    // this.getProjects()
    // this.getActivity()
    // this.getTeams()
    // this.initRadar()
  },
  methods: {
    tableOption () {
      this.options = {
        alert: false,
        rowSelection: null
      }
      this.optionAlertShow = false
    },
    handle (record) {
      // 已读
      if (record.status === 1) {
        updateWorkplaceBacklog({ id: record.backlogId }).then(res => {
          this.$refs.table.refresh()
        })
      }
      fetchWorkplaceBacklogUserById({ id: record.id }).then(res => {
        const data = res.data
        this.$refs.detail.base(data)
      })
    },
    dealJumpDetail (record) {
      // 维修跳转到维修详情
      if (record.type === this.DictCache.getValueByCode(this.DictCache.TYPE.WORKPLACE_BACKLOG_TYPE, 'REPAIR')) {
        // 已读
        if (record.status === 1) {
          updateWorkplaceBacklog({ id: record.backlogId }).then(res => {
            record.status = 2
          })
        }
        if (record.detailType === this.DictCache.getValueByCode(this.DictCache.TYPE.WORKPLACE_BACKLOG_DETAIL_TYPE, 'REPAIR_APPLICATION') ||
          record.detailType === this.DictCache.getValueByCode(this.DictCache.TYPE.WORKPLACE_BACKLOG_DETAIL_TYPE, 'REPAIR_DISPATCH') ||
          record.detailType === this.DictCache.getValueByCode(this.DictCache.TYPE.WORKPLACE_BACKLOG_DETAIL_TYPE, 'REPAIR_BACK') ||
          record.detailType === this.DictCache.getValueByCode(this.DictCache.TYPE.WORKPLACE_BACKLOG_DETAIL_TYPE, 'REPAIR_RECEIVE') ||
          record.detailType === this.DictCache.getValueByCode(this.DictCache.TYPE.WORKPLACE_BACKLOG_DETAIL_TYPE, 'REPAIR_APPLICATION_STOP')) {
          fetchRepairApplicationForm({ id: record.otherId }).then(res => {
            this.visible = false
            const modal = this.$refs.detailRepairApplicationFormRepairModal
            modal.base(res.data)
          })
        }
        if (record.detailType === this.DictCache.getValueByCode(this.DictCache.TYPE.WORKPLACE_BACKLOG_DETAIL_TYPE, 'REPAIR_OK')) {
          fetchRepairApplicationForm({ id: record.otherId }).then(res => {
            this.visible = false
            const modal = this.$refs.detailRepairApplicationFormRepairModal
            modal.base(res.data)
          })
        }
        if (record.detailType === this.DictCache.getValueByCode(this.DictCache.TYPE.WORKPLACE_BACKLOG_DETAIL_TYPE, 'REPAIR_FINISH')) {
          fetchRepairApplicationForm({ id: record.otherId }).then(res => {
            this.visible = false
            // const modal = this.$refs.detailRepairApplicationFormCheckModal
            const modal = this.$refs.detailRepairApplicationFormRepairModal
            modal.base(res.data)
          })
        }
      } else if (record.type === this.DictCache.getValueByCode(this.DictCache.TYPE.WORKPLACE_BACKLOG_TYPE, 'OUT_STORE')) {
        this.visible = false
        fetchOutStoreForm({ id: record.otherId }).then(res => {
          const modal = this.$refs.detailOutStoreModal
          modal.base(res.data)
        })
      } else if (record.type === this.DictCache.getValueByCode(this.DictCache.TYPE.WORKPLACE_BACKLOG_TYPE, 'SPARE_PICK')) {
        this.visible = false
        fetchSparePickForm({ id: record.otherId }).then(res => {
          const modal = this.$refs.detailSparePickModal
          modal.base(res.data)
        })
      } else if (record.type === this.DictCache.VALUE.WORKPLACE_BACKLOG_TYPE.SB_ALLOCATE) {
        this.targetId = record.targetId
        // 已读
        if (record.status === 1) {
          updateWorkplaceBacklog({ id: record.backlogId }).then(res => {
          })
        }
        // 设备调拨处理
        if (record.detailType === this.DictCache.VALUE.WORKPLACE_BACKLOG_DETAIL_TYPE.SB_ALLOCATE_APPLY_RESULT) {
          fetchSbAllocateApply({ id: record.targetId }).then(res => {
            const modal = this.$refs.sbAllocateApplyDetail
            modal.base(res.data)
          })
        } else if (record.detailType === this.DictCache.VALUE.WORKPLACE_BACKLOG_DETAIL_TYPE.SB_ALLOCATE_AUDIT_TASK) {
          this.dataFlag = false
          this.sbAllocateTaskAuditShow = true
        } else {
          this.$message.info('没有该类型消息通知,请联系管理员...')
        }
      } else if (record.type === this.DictCache.VALUE.WORKPLACE_BACKLOG_TYPE.SB_OIL) {
        // 已读
        if (record.status === 1) {
          updateWorkplaceBacklog({ id: record.backlogId }).then(res => {
            console.log('已置为已读')
          })
        }
        // 设备加油处理
        this.targetId = record.targetId
        if (record.detailType === this.DictCache.VALUE.WORKPLACE_BACKLOG_DETAIL_TYPE.SB_OIL_AUDIT_TASK) {
          this.dataFlag = false
          this.sbOilAuditShow = true
        } else if (record.detailType === this.DictCache.VALUE.WORKPLACE_BACKLOG_DETAIL_TYPE.SB_OIL_OIL) {
          this.dataFlag = false
          this.sbOilTaskShow = true
        } else if (record.detailType === this.DictCache.VALUE.WORKPLACE_BACKLOG_DETAIL_TYPE.SB_OIL_AUDIT_RESULT) {
          fetchSbOil({ id: this.targetId }).then(res => {
            const modal = this.$refs.sbOilDetail
            modal.base(res.data)
          })
        } else if (record.detailType === this.DictCache.VALUE.WORKPLACE_BACKLOG_DETAIL_TYPE.SB_OIL_OIL_CONFIRM) {
          fetchSbOil({ id: this.targetId }).then(res => {
            const sbOilModel = res.data
            if (this.$auth('sb-oils-confirm') && sbOilModel.status === this.DictCache.VALUE.SB_OIL_STATUS.OIL) {
              const modal = this.$refs.sbOilConfirmBaseForm
              modal.base(res.data)
            } else {
              const modal = this.$refs.sbOilDetail
              modal.base(res.data)
            }
          })
        } else {
          this.$message.info('没有该类型消息通知,请联系管理员...')
        }
      } else if (record.type === this.DictCache.VALUE.WORKPLACE_BACKLOG_TYPE.SB_SCRAP) {
        // 已读
        if (record.status === 1) {
          updateWorkplaceBacklog({ id: record.backlogId }).then(res => {
            console.log('已置为已读')
          })
        }
        if (record.detailType === this.DictCache.VALUE.WORKPLACE_BACKLOG_DETAIL_TYPE.SB_SCRAP) {
          this.visible = false
          const param = {
            targetId: record.otherId,
            taskId: record.targetId
          }
          this.$refs.detailAuditScrapModal.base(param)
        } else if (record.detailType === this.DictCache.VALUE.WORKPLACE_BACKLOG_DETAIL_TYPE.SB_SCRAP_RESULT) {
          this.visible = false
          const param = {
            targetId: record.otherId,
            taskId: record.targetId
          }
          this.$refs.detailScrapModal.base(param)
        }
      } else {
        this.$message.info('该类型的通知正在开发中，请稍后...')
      }
    },
    toPurchaseOrder (record) {
      const id = record.otherId ? record.otherId : record.targetId
      fetchPurchaseOrder({ id: id }).then(res => {
        this.$store.dispatch('setPurchaseNo', res.data.billNo)
        this.$router.push('/purchase/order')
      })
    },
    toDispatchOrder (record) {
      const id = record.otherId ? record.otherId : record.targetId
      fetchPurchaseDispatchOrder({ id: id }).then(res => {
        this.$store.dispatch('setPurchaseNo', res.data.billNo)
        this.$router.push('/purchase/dispatch/order')
      })
    },
    updateStatus (targetId) {
      updateWorkplaceBacklog({ id: targetId })
    },
    handleOk () {
      this.visible = true
      this.$refs.table.refresh()
    },
    resetSearchForm () {
      this.queryParam = {
        status: 1
      }
      this.$refs.table.refresh(true)
    },
    getDict () {
      this.typeDict = this.DictCache.getLabelByValueMapByType(this.DictCache.TYPE.WORKPLACE_BACKLOG_TYPE)
      this.typeDetailDict = this.DictCache.getLabelByValueMapByType(this.DictCache.TYPE.WORKPLACE_BACKLOG_DETAIL_TYPE)
    },
    back () {
      this.leaderFlag = false
      this.sbOilTaskShow = false
      this.sbOilAuditShow = false
      this.sbAllocateTaskAuditShow = false
      this.dataFlag = true
      this.$refs.table.refresh()
    }
  }
}
</script>

<style lang="less" scoped>
.item-group {
  padding: 20px 0 8px 24px;
  font-size: 0;
  a {
    color: rgba(0, 0, 0, 0.65);
    display: inline-block;
    font-size: 14px;
    margin-bottom: 13px;
    width: 25%;
  }
}

.mobile {

  .project-list {

    .project-card-grid {
      width: 100%;
    }
  }

  .more-info {
    border: 0;
    padding-top: 16px;
    margin: 16px 0 16px;
  }

  .headerContent .title .welcome-text {
    display: none;
  }
}

</style>