supply-front/src/components/NotifyBox/index.vue

<template>
  <el-dialog
    title="消息"
    :visible.sync="showMessages"
    :append-to-body="true"
    width="50%"
    :show-close="false"
    :close-on-click-modal="false"
  >
    <el-radio-group v-model="type" size="mini" @change="checkFn">
      <el-radio-button :label="0">系统通知</el-radio-button>
      <el-radio-button :label="1">文件下发</el-radio-button>
      <el-radio-button :label="2">返利确认单</el-radio-button>
      <el-radio-button :label="3">物流通知</el-radio-button>
      <el-radio-button :label="4">到货通知</el-radio-button>
      <el-radio-button :label="5">货满订单</el-radio-button>

    </el-radio-group>
    <!-- 系统通知 -->
    <div v-show="type === 0" class="table">
      <el-table
        ref="table"
        v-loading="listLoading"
        class="cql"
        :data="dataList"
        element-loading-text="Loading"
        border
        fit
        highlight-current-row
        stripe
      >
        <el-table-column align="center" type="index" min-width="160" show-overflow-tooltip />
        <el-table-column align="center" label="标题" prop="title" min-width="160" show-overflow-tooltip />
        <el-table-column align="center" label="来源" prop="source" min-width="160" show-overflow-tooltip />
        <el-table-column align="center" label="时间" prop="issueTime" min-width="160" show-overflow-tooltip />
        <el-table-column align="center" label="是否已读" prop="isTopRead" min-width="160" show-overflow-tooltip >
          <template slot-scope="scope">
            {{scope.row.isTopRead ? '已读':'未读'}}
          </template>
        </el-table-column>
        <el-table-column align="center" label="操作" min-width="160" show-overflow-tooltip>
          <template slot-scope="scope">
            <el-button :style="{
              color: scope.row.readFlag ? '#c0c4cc' : ''
            }" type="text" class="textColor" @click="lookInDialog(scope.row.id)">查看</el-button>
          </template>
        </el-table-column>
      </el-table>
    </div>
    <!-- 文件下发 -->
    <div v-show="type === 1" class="table">
      <el-table
        ref="table"
        v-loading="listLoading"
        :data="fileList"
        element-loading-text="Loading"
        border
        fit
        highlight-current-row
        stripe
      >
        <el-table-column align="center" type="index" min-width="160" show-overflow-tooltip />
        <el-table-column align="center" label="标题" prop="title" min-width="160" show-overflow-tooltip />
        <el-table-column align="center" label="来源" prop="operatorNickName" min-width="160" show-overflow-tooltip />
        <el-table-column align="center" label="时间" prop="createTime" min-width="160" show-overflow-tooltip />
        <el-table-column align="center" label="操作" min-width="160" show-overflow-tooltip>
          <template slot-scope="scope">
            <el-button type="text" class="textColor" @click="downloadFn(scope.row.id)">下载</el-button>
          </template>
        </el-table-column>
      </el-table>
    </div>
    <!-- 返利确认单 -->
    <div v-show="type === 2" class="table">
      <el-table
        ref="table"
        v-loading="listLoading"
        :data="rebateList"
        element-loading-text="Loading"
        border
        fit
        highlight-current-row
        stripe
      >
        <el-table-column align="center" type="index" min-width="160" show-overflow-tooltip />
        <el-table-column align="center" label="经销商名称" prop="customerName" min-width="160" show-overflow-tooltip />
        <el-table-column align="center" label="确认人" prop="examineBy" min-width="160" show-overflow-tooltip />
        <el-table-column align="center" label="确认时间" prop="examineTime" min-width="160" show-overflow-tooltip />
        <el-table-column align="center" label="操作" min-width="160" show-overflow-tooltip>
          <template slot-scope="scope">
            <el-button type="text" class="textColor" @click="secondFn(scope.row.rebateOrderId)">{{
              isCustomer ? '确认' : '复核'
            }}</el-button>
          </template>
        </el-table-column>
      </el-table>
    </div>
    <!-- 物流通知 -->
    <div v-show="type === 3" class="table">
      <el-form ref="invoiceOrderForm" :model="invoiceOrderForm" label-width="120px" label-position="left" size="mini">
        <el-row :gutter="20">
          <el-col :xs="24" :sm="12" :lg="8">
            <el-form-item prop="invoiceId" label="发货单">
              <el-input v-model="invoiceOrderForm.invoiceId" placeholder="请输入发货单" />
            </el-form-item>
          </el-col>
          <el-col
            :xs="24"
            :sm="12"
            :lg="8"
          ><el-form-item prop="time" label="发货单时间">
            <el-date-picker
              v-model="invoiceOrderForm.time"
              style="width: 100%"
              type="daterange"
              value-format="yyyy-MM-dd HH:mm:ss"
              range-separator="至"
              start-placeholder="开始日期"
              end-placeholder="结束日期"
            /></el-form-item></el-col>
          <el-col
            :xs="24"
            :sm="12"
            :lg="8"
          ><el-form-item prop="userName" label="收货客户">
            <el-input v-model="invoiceOrderForm.userName" placeholder="请输入收货客户" /> </el-form-item></el-col>
          <el-col
            :xs="24"
            :sm="12"
            :lg="8"
          ><el-form-item prop="address" label="收货地址">
            <el-input v-model="invoiceOrderForm.address" placeholder="请输入收货地址" /> </el-form-item></el-col>
          <el-col
            :xs="24"
            :sm="12"
            :lg="8"
          ><el-form-item prop="remark" label="内容"> <el-input v-model="invoiceOrderForm.remark" placeholder="请输入内容" /> </el-form-item></el-col>
          <el-col :xs="24" :sm="12" :lg="8" style="text-align: right;">
            <el-button size="mini" @click="handleReset($event,'invoiceOrde')">重置</el-button>
            <el-button size="mini" type="primary" @click="currentPage = 1,getListInvoiceOrder()">查询</el-button>
          </el-col>
        </el-row>
      </el-form>
      <el-table
        ref="table"
        v-loading="listLoading"
        :data="invoiceOrderList"
        element-loading-text="Loading"
        border
        fit
        highlight-current-row
        stripe
      >
        <el-table-column align="center" type="index" min-width="160" show-overflow-tooltip />
        <el-table-column align="center" label="发货单" prop="id" min-width="160" show-overflow-tooltip>
          <template slot-scope="scope">
            <el-link v-if="!isCustomer" type="primary" :underline="false" @click="handleJump(scope.row.id)">{{
              scope.row.id
            }}</el-link>
            <template v-else>{{ scope.row.id }}</template>
          </template>
        </el-table-column>
        <el-table-column align="center" label="内容" prop="orderTrackStatus" min-width="160" show-overflow-tooltip />
        <el-table-column align="center" label="时间" prop="orderTrackTime" min-width="160" show-overflow-tooltip />
        <el-table-column align="center" label="收货地址" prop="address" min-width="160" show-overflow-tooltip>
          <template slot-scope="scope">
            {{ scope.row.address ? scope.row.address : '——' }}
          </template>
        </el-table-column>
        <el-table-column align="center" label="收货客户" prop="receivingName" min-width="160" show-overflow-tooltip>
          <template slot-scope="scope">{{ scope.row.receivingName ? scope.row.receivingName : '——' }}</template>
        </el-table-column>
        <el-table-column align="center" label="操作" min-width="80" show-overflow-tooltip fixed="right">
          <template slot-scope="scope">
            <el-button type="text" class="textColor" @click="handLogistics(scope.row)">查看</el-button>
          </template>
        </el-table-column>
      </el-table>
    </div>
    <!-- 到货通知 -->
    <div v-show="type == 4" class="table">
      <div class="mymain-container">
        <el-form ref="form" label-width="80px" label-position="left" size="mini">
          <el-row>
            <el-col>
              <el-form-item prop="specification" label="规格型号">
                <div style="display: flex">
                  <el-input v-model="specification" clearable style="margin-right: 10px" placeholder="请输入规格型号" />
                  <el-button @click="handleReset">重置</el-button>
                  <el-button type="primary" size="mini" @click="currentPage = 1,getArrivalNotice()">查询</el-button>
                </div>
              </el-form-item>
            </el-col>
          </el-row>
        </el-form>
        <div class="table">
          <el-table
            ref="table"
            v-loading="listLoading"
            :data="arrivalNoticeList"
            element-loading-text="Loading"
            border
            fit
            highlight-current-row
            stripe
          >
            <el-table-column
              property="materialOldNumber"
              align="left"
              min-width="120"
              label="产品编号"
              show-overflow-tooltip
            />
            <el-table-column
              property="materialNumber"
              align="left"
              min-width="100"
              label="物料编码"
              show-overflow-tooltip
            />
            <el-table-column
              property="materialName"
              align="left"
              min-width="250"
              label="产品名称"
              show-overflow-tooltip
            />
            <el-table-column
              property="specification"
              align="left"
              min-width="350"
              label="规格型号"
              show-overflow-tooltip
            />
            <el-table-column property="stockName" align="left" min-width="100" label="到货仓库" show-overflow-tooltip />
            <el-table-column
              property="updateTime"
              align="left"
              min-width="200"
              label="到货通知时间"
              show-overflow-tooltip
            />
          </el-table>
        </div>
      </div>
    </div>
    <!-- 订单满货通知 -->
    <div v-show="type == 5" class="table">
      <div class="mymain-container">
        <el-form ref="form" label-width="80px" label-position="left" size="mini">
          <el-row>
            <el-col :span="8">
              <el-form-item prop="stockOrderNo" label="订单号">
                <div style="display: flex">
                  <el-input v-model="stockOrderNo" clearable style="margin-right: 10px" placeholder="请输入订单号" />
                </div>
              </el-form-item>
            </el-col>
            <el-col :span="8">
              <el-form-item prop="stockOrderSpecification" label="机型">
                <div style="display: flex">
                  <el-input v-model="stockOrderSpecification" clearable style="margin-right: 10px" placeholder="请输入机型" />
                </div>
              </el-form-item>
            </el-col>
            <el-col :span="8">
              <el-form-item prop="stockTimes" label="日期">
                <el-date-picker
                  v-model="stockTimes"
                  style="width: 100%;"
                  type="daterange"
                  value-format="yyyy-MM-dd HH:mm:ss"
                  range-separator="至"
                  start-placeholder="开始日期"
                  end-placeholder="结束日期"
                />
              </el-form-item>
            </el-col>
            <el-col :span="24">
              <div style="float: right;"> <el-button size="mini" @click="handleReset($event, 'stockCost')">重置</el-button>
                <el-button type="primary" size="mini" @click="currentPage = 1,getStockCostList()">查询</el-button></div>
            </el-col>
          </el-row>
        </el-form>
        <div class="table">
          <el-table
            ref="table"
            v-loading="listLoading"
            :data="stockCostList"
            element-loading-text="Loading"
            border
            fit
            highlight-current-row
            stripe
          >
            <el-table-column
              type="index"
              align="left"
              min-width="50"
              label="序号"
            />
            <el-table-column
              property="orderId"
              align="left"
              min-width="150"
              label="订单号"
              show-overflow-tooltip
            >
              <template slot-scope="scope">
                <el-link type="primary" :underline="false" @click="handleToDaily(scope.row.orderId)">{{
                  scope.row.orderId
                }}</el-link>
              </template>
            </el-table-column>
            <el-table-column
              property="specification"
              align="left"
              min-width="250"
              label="机型"
              show-overflow-tooltip
            />
            <el-table-column
              property="full"
              align="left"
              min-width="120"
              label="是否已生成仓租"
              show-overflow-tooltip
            >
              <template slot-scope="scope">
                {{ scope.row.full =='YES'? '是': '否' }}
              </template>
            </el-table-column>
            <el-table-column
              property="fullTime"
              align="left"
              min-width="150"
              label="货满日期"
              show-overflow-tooltip
            />
            <el-table-column property="fullNum" align="left" min-width="80" label="计算天数" show-overflow-tooltip />
            <el-table-column align="center" label="操作" min-width="80" show-overflow-tooltip fixed="right">
              <template slot-scope="scope">
                <el-button type="text" class="textColor" @click="handleToDaily(scope.row.orderId)">查看</el-button>
              </template>
            </el-table-column>
          </el-table>
        </div>
      </div>
    </div>
    <!-- 分页 -->
    <div class="fr">
      <el-pagination
        :current-page="currentPage"
        :page-sizes="[10, 20, 30, 50]"
        :page-size="10"
        layout="total, sizes, prev, pager, next, jumper"
        :total="listTotal"
        @size-change="handleSizeChange"
        @current-change="handleCurrentChange"
      />
    </div>
    <!-- 内层弹窗 -->
    <el-dialog width="40%" title="消息标题" :visible.sync="inDialog" append-to-body>
      <div class="detail-container">
        <div class="title">{{ detailData.title }}</div>
        <div class="text">
          发布人：{{ detailData.issueNickName }}<el-divider direction="vertical" />发布时间：{{ detailData.issueTime }}
        </div>
        <el-divider />
        <div class="content">{{ detailData.content }}</div>
        <el-divider v-if="detailData.files && detailData.files.length > 0" />
        <div v-if="detailData.files && detailData.files.length > 0" class="file">
          <div>附件：</div>
          <div class="file-list">
            <div v-for="(item, index) in detailData.files" :key="index" class="item">
              <el-image
                v-if="checkFileType(item.url) == 'image'"
                class="img"
                :src="imageURL + item.url"
                :preview-src-list="[imageURL + item.url]"
              />
              <div v-else class="box2" @click="openLink(item.url)">
                <img v-if="checkFileType(item.url) == 'word'" src="@/assets/common/word.png">
                <img v-if="checkFileType(item.url) == 'excel'" src="@/assets/common/excel.png">
                <img v-if="checkFileType(item.url) == 'ppt'" src="@/assets/common/ppt.png">
                <img v-if="checkFileType(item.url) == 'pdf'" src="@/assets/common/pdf.png">
                <div class="name ellipsis-3">{{ item.name }}</div>
              </div>
            </div>
          </div>
        </div>
      </div>
      <div slot="footer" class="dialog-footer">
        <el-button size="mini" type="primary" @click="confirmCheck(detailData.noticeId)">确认接收</el-button>
        <el-button size="mini" @click="inDialog = false">关 闭</el-button>
      </div>
    </el-dialog>
    <el-dialog
      title="物流信息"
      :visible.sync="visible"
      width="60%"
      append-to-body
      :close-on-click-modal="false"
      @close="onClose"
    >
      <el-timeline v-if="logisticsDetail.length" class="logistics" :reverse="false">
        <el-timeline-item
          v-for="(item, index) in logisticsDetail"
          :key="index"
          placement="top"
          type="success"
          :stock-timestamp="item.time"
        >
          <el-row :gutter="20">
            <el-col class="logistics-title"> {{ item.status }} </el-col>
            <el-col>
              <div class="flex">
                <div>{{ item.context }}</div>
                <!-- <div>{{ item.createTime }}</div> -->
              </div>
            </el-col>
          </el-row>
        </el-timeline-item>
      </el-timeline>
      <div v-else class="tip">暂无物流信息</div>
    </el-dialog>
    <div slot="footer" class="dialog-footer">
      <el-button type="primary" size="mini" @click="closeFn">关闭</el-button>
    </div>
  </el-dialog>
</template>

<script>
import { mapGetters } from 'vuex'
import {
  getNoticeList,
  getComListList,
  getComListDownload,
  getNoticeDetail,
  confirmCheck,
  getRebateOrderList,
  getListInvoiceOrder,
  getStockCostList
} from '@/api/dashboard'
import { getArrivalNotice } from '@/api/stock'
import { getListOrderTrack } from '@/api/supply/pickup'
import { getFileUrl } from '@/api/common'
export default {
  // eslint-disable-next-line vue/require-prop-types
  props: ['mesType'],
  data() {
    return {
      imageURL: this.$imageUrl,
      type: 0,
      currentPage: 1,
      pageSize: 10,
      listTotal: 0,
      dataList: [],
      listLoading: false,
      fileList: [],
      inDialog: false,
      detailData: [],
      rebateList: [],
      stockCostList: [],
      invoiceOrderList: [],
      visible: false,
      orderId: '',
      logisticsDetail: [],
      arrivalNoticeList: [],
      specification: '',
      stockOrderNo: '',
      stockTimes: [],
      stockOrderSpecification: '',
      invoiceOrderForm: {
        time: [],
        invoiceId: '',
        address: '',
        startTime: '',
        endTime: '',
        remark: '',
        userName: ''
      },
      fnArr: ['getDataList', 'getFileList', 'getRebateList', 'getListInvoiceOrder', 'getArrivalNotice', 'getStockCostList']
    }
  },
  computed: {
    ...mapGetters(['showMessages', 'isCustomer'])
  },
  watch: {
    mesType(newValue, oldValue) {
      if (!oldValue) {
        this.type = newValue
        this[this.fnArr[newValue]]()
      }
      this.$emit('reset')
    }
  },
  created() {
    this[this.fnArr[this.type]]()
  },
  methods: {
    checkFn(i) {
      this.listTotal = 0
      this.pageSize = 10
      this.currentPage = 1
      this.listLoading = false
      this.fnArr[i] && this[this.fnArr[i]]()
    },
    // 获取文件列表数据
    async getFileList() {
      const data = {
        needDown: true,
        pageSize: this.pageSize,
        pageNo: this.currentPage
      }
      const res = await getComListList(data)
      this.fileList = res.data.records
      this.listTotal = res.data.total
    },
    // 获取返利确认单数据
    async getRebateList() {
      const data = {
        pageSize: this.pageSize,
        pageNum: this.currentPage,
        isSecondExamine: false
      }
      const res = await getRebateOrderList(data)
      this.rebateList = res.data.records
      this.listTotal = res.data.total
    },
    // 获取列表数据
    async getDataList() {
      const data = {
        pageSize: this.pageSize,
        pageNum: this.currentPage,
        readFlag: false
      }
      const res = await getNoticeList(data)
      this.dataList = res.data.records
      this.listTotal = res.data.total
    },
    // 获取物流列表
    async getListInvoiceOrder() {
      const time = this.invoiceOrderForm.time || []
      const data = {
        pageSize: this.pageSize,
        pageNum: this.currentPage,
        ...this.invoiceOrderForm,
        startTime: time.length ? time[0] : '',
        endTime: time.length ? time[1] : ''
      }
      const res = await getListInvoiceOrder(data)
      this.invoiceOrderList = res.data.records
      this.listTotal = res.data.total
    },
    async getArrivalNotice() {
      const data = {
        pageSize: this.pageSize,
        pageNum: this.currentPage,
        specification: this.specification
      }
      const res = await getArrivalNotice(data)
      this.arrivalNoticeList = res.data.records
      this.listTotal = res.data.total
    },
    // 订单满货通知
    async getStockCostList() {
      const time = this.stockTimes || []

      const data = {
        pageSize: this.pageSize,
        pageNum: this.currentPage,
        materialName: '',
        materialNumber: '',
        materialOldNumber: '',
        specification: this.stockOrderSpecification,
        orderId: this.stockOrderNo,
        endTime: time.length ? time[0] : '',
        startTime: time.length ? time[1] : ''
      }
      const res = await getStockCostList(data)
      this.stockCostList = res.data.records
      this.listTotal = res.data.total
    },
    handleReset(e, type) {
      this.pageSize = 10
      this.pageNum = 1
      if (type === 'invoiceOrde') {
        this.$refs.invoiceOrderForm.resetFields()
        this.getListInvoiceOrder()
      } else if (type === 'stockCost') {
        this.stockOrderNo = ''
        this.stockOrderSpecification = ''
        this.stockTimes = []
        this.getStockCostList()
      } else {
        this.specification = ''
        this.getArrivalNotice()
      }
    },
    // 更改每页数量
    handleSizeChange(val) {
      this.pageSize = val
      this.currentPage = 1
      this[this.fnArr[this.type]]()
    },
    // 更改当前页
    handleCurrentChange(val) {
      this.currentPage = val
      this[this.fnArr[this.type]]()
    },
    openLink(url) {
      getFileUrl({ key: url }).then(res => {
        window.open(res.data)
      })
    },
    // 复核
    secondFn(id) {
      this.$router.push({
        path: '/finance/rebate_list',
        query: {
          id
        }
      })
      this.type = 0
      this.$emit('reset')
      this.$store.commit('user/showMessage', 'no')
    },
    // 确认查收
    confirmCheck(id) {
      confirmCheck({ noticeIds: id }).then(res => {
        this.$successMsg('查收成功')
        this.inDialog = false
        this[this.fnArr[this.type]]()
      })
    },
    // 检查文件类型
    checkFileType(url) {
      if (!url) return ''
      const fileSuffix = url.substring(url.lastIndexOf('.') + 1)

      if (['jpg', 'jpeg', 'png'].includes(fileSuffix)) {
        return 'image'
      } else if (['doc', 'docx', 'dot', 'wps', 'wpt'].includes(fileSuffix)) {
        return 'word'
      } else if (['xls', 'xlsx', 'xlt', 'et', 'ett'].includes(fileSuffix)) {
        return 'excel'
      } else if (['ppt', 'pptx', 'dps', 'dpt', 'pot', 'pps'].includes(fileSuffix)) {
        return 'ppt'
      } else if (['pdf'].includes(fileSuffix)) {
        return 'pdf'
      } else {
        return ''
      }
    },
    // 查看
    async lookInDialog(id) {
      const res = await getNoticeDetail({ id, isTopRead: true })
      this.detailData = res.data
      this.inDialog = true
      this.getDataList()
    },
    // 下载
    async downloadFn(id) {
      const res = await getComListDownload({ id })
      if (res.data) {
        window.open(this.imageURL + res.data)
      }
    },
    // 关闭
    closeFn() {
      this.type = 0
      this.$emit('reset')
      this.$store.commit('user/showMessage', 'no')
    },
    handLogistics(row) {
      getListOrderTrack({ orderId: row.id }).then(res => {
        this.logisticsDetail = res.data
      })
      this.orderId = row.id
      this.visible = true
    },
    onClose() {
      this.logisticsDetail = []
      this.orderId = ''
      this.visible = false
    },
    handleJump(id) {
      // this.$router.push({ path: `/supply/pickup/sum_list?id=${id}` })
      this.$router.push({name: 'exwarehouseSum_list', query:{id}})
      this.type = 0
      this.$emit('reset')
      this.$store.commit('user/showMessage', 'no')
    },
    handleToDaily(orderId) {
      // this.$router.push({ path: `/basic_data/dailyWarehouseRent?orderId=${orderId}` })
      this.$router.push({ name: 'dailyWarehouseRent', query:{orderId}})
      this.type = 0
      this.$emit('reset')
      this.$store.commit('user/showMessage', 'no')
    }
  }
}
</script>

<style lang="scss" scoped>
::v-deep .el-form-item--mini .el-form-item__content, ::v-deep .el-form-item--mini .el-form-item__label{
  line-height: 27px;
}
::v-deep .el-range-editor--mini .el-range-separator {
  line-height: 27px;
}
</style>