bonus-ui/src/views/materialsStation/equipment/totalLeaseRecord/index.vue

<template>
  <!-- 基础页面 -->
  <div class="app-container">
    <el-form v-show="showSearch" :model="queryParams" ref="queryForm" size="small" inline @submit.native.prevent label-width="100px">
      <el-form-item label="分公司" prop="impUnitName">
        <el-input
          v-model="queryParams.impUnitName"
          placeholder="请输入分公司"
          clearable
          maxlength="50"
          style="width: 240px"
          @keyup.enter.native="handleQuery"
        />
      </el-form-item>

      <el-form-item label="领料单位" prop="leaseUnit">
        <el-input
          v-model="queryParams.leaseUnit"
          placeholder="请输入领料单位"
          clearable
          maxlength="50"
          style="width: 240px"
          @keyup.enter.native="handleQuery"
        />
      </el-form-item>

      <el-form-item label="领料工程" prop="leaseProject">
        <el-input
          v-model="queryParams.leaseProject"
          placeholder="请输入领料工程"
          clearable
          maxlength="50"
          style="width: 240px"
          @keyup.enter.native="handleQuery"
        />
      </el-form-item>

      <el-form-item label="物资名称" prop="maTypeNames">
        <el-input
          v-model="queryParams.maTypeNames"
          placeholder="请输入物资名称"
          clearable
          maxlength="50"
          style="width: 240px"
          @keyup.enter.native="handleQuery"
        />
      </el-form-item>

      <!-- 日期范围 -->
      <el-form-item label="领料时间" prop="timeRange">
        <el-date-picker
          v-model="queryParams.timeRange"
          type="daterange"
          range-separator="至"
          start-placeholder="开始日期"
          end-placeholder="结束日期"
          clearable
          value-format="yyyy-MM-dd"
          format="yyyy-MM-dd"
          style="width: 240px"
        />
      </el-form-item>

      <el-form-item label="领料人" prop="leasePerson">
        <el-input
          v-model="queryParams.leasePerson"
          placeholder="请输入领料人"
          clearable
          @keyup.enter.native="handleQuery"
          style="width: 240px"
        />
      </el-form-item>

      <el-form-item label="领料单号" prop="code">
        <el-input
          v-model="queryParams.code"
          placeholder="请输入领料单号"
          clearable
          @keyup.enter.native="handleQuery"
          style="width: 240px"
        />
      </el-form-item>

      <!-- <el-form-item label="关键字" prop="keyWord">
        <el-input
          v-model="queryParams.keyWord"
          placeholder="请输入关键字"
          clearable
          @keyup.enter.native="handleQuery"
          style="width: 240px"
        />
      </el-form-item> -->

      <!-- 表单按钮 -->
      <el-form-item>
        <el-button type="primary" icon="el-icon-search" @click="handleQuery">查询</el-button>
        <el-button icon="el-icon-refresh" @click="handleReset">重置</el-button>
      </el-form-item>
    </el-form>

    <el-row :gutter="10" class="mb8">
      <right-toolbar :showSearch.sync="showSearch" @queryTable="getList"></right-toolbar>
    </el-row>

    <el-table :data="tableList" fit highlight-current-row style="width: 100%" :max-height="650">
      <!-- 多选 -->
      <!-- <el-table-column type="selection" width="55" align="center" @selection-change="selectionChange" /> -->
      <el-table-column
        type="index"
        width="55"
        label="序号"
        align="center"
        :index="index => (queryParams.pageNum - 1) * queryParams.pageSize + index + 1"
      />
      <el-table-column
        v-for="(column, index) in tableColumns"
        :key="index"
        :label="column.label"
        :prop="column.prop"
        align="center"
        :width="column.width"
      ></el-table-column>
      <!-- 操作 -->
      <el-table-column label="操作" align="center" width="220">
        <template slot-scope="{ row }">
          <el-button type="text" size="mini" icon="el-icon-zoom-in" @click="handleView(row)">查看</el-button>
          <el-button
            type="text"
            size="mini"
            icon="el-icon-document"
            style="color: #67c23a"
            @click="handleLld(row)"
          >
            领料单
          </el-button>
           <!-- <el-button type="text" size="mini" icon="el-icon-document" style="color: #67c23a" @click="handleCheck(row)">
            出库检验单
          </el-button> -->
        </template>
      </el-table-column>
    </el-table>

    <!-- 分页 -->
    <pagination
      v-show="total > 0"
      :total="total"
      :page.sync="queryParams.pageNum"
      :limit.sync="queryParams.pageSize"
      @pagination="getList"
    />

     <!-- 弹框 -->
    <el-dialog :title="dialogTitle" :visible.sync="dialogVisible" width="60%">
      <el-table :data="dialogList" fit highlight-current-row style="width: 100%">
        <el-table-column
          type="index"
          width="55"
          label="序号"
          align="center"
          :index="index => (dialogForm.pageNum - 1) * dialogForm.pageSize + index + 1"
        />
        <el-table-column
          v-for="(column, index) in dialogColumns"
          show-overflow-tooltip
          :key="index"
          :label="column.label"
          :prop="column.prop"
          align="center"
        ></el-table-column>
      </el-table>

      <!-- 分页 -->
      <pagination
        v-show="dlgTotal > 0"
        :total="dlgTotal"
        :page.sync="dialogForm.pageNum"
        :limit.sync="dialogForm.pageSize"
        @pagination="getDetailsList"
      />
      <span slot="footer" class="dialog-footer">
        <el-button @click="dialogVisible = false">关 闭</el-button>
      </span>
    </el-dialog>

    <!-- 领料单弹窗 -->
      <el-dialog :visible.sync="open" width="1090px" :title="title" append-to-body>
          <div style="height: 500px; overflow-y: scroll; padding: 0 20px" v-loading="leaseLoading">
              <vue-easy-print tableShow ref="remarksPrintRef" class="print">
                  <div class="title" style="text-align: center; font-weight: 600; font-size: 16px">领料单</div>
                  <div class="info" style="margin-top: 10px; display: flex; flex-wrap: wrap">
                      <div class="item" style="width: 60%; flex-shrink: 0; margin-bottom: 5px; font-size: 14px">
                          <span>领料单位：</span>
                          {{ leaseApplyData.leaseUnit }}
                      </div>
                      <div class="item" style="width: 40%; flex-shrink: 0; margin-bottom: 5px; font-size: 14px">
                          <span>工程名称：</span>
                          {{ leaseApplyData.leaseProject }}
                      </div>
                      <div class="item" style="width: 40%; flex-shrink: 0; margin-bottom: 5px; font-size: 14px">
                          <span>发料单位：</span>
                          {{ '机具（物流）分公司' }}
                      </div>
                      <div class="item" style="width: 30%; flex-shrink: 0; margin-bottom: 5px; font-size: 14px">
                          <span>时间：</span>
                          <span v-if="leaseApplyData.createTime">{{ leaseApplyData.createTime.split(' ')[0] }}</span>
                      </div>
                      <div class="item" style="width: 30%; flex-shrink: 0; margin-bottom: 5px; font-size: 14px">
                          <span>编号：</span>
                          {{ leaseApplyData.code }}
                      </div>
                  </div>
                  <table class="print-table" style="margin-top: 20px; width: 100%; border-collapse: collapse" border>
                      <thead>
                          <tr>
                              <th align="center">序号</th>
                              <th align="center">物资名称</th>
                              <th align="center">规格型号</th>
                              <th align="center">计量单位</th>
                              <th align="center">领用数量</th>
                              <th align="center">备注</th>
                              <th align="center">出库方式</th>
                          </tr>
                      </thead>
                      <tbody>
                          <tr v-for="(item, index) in leaseApplyDetails" :key="index">
                              <td align="center">{{ index + 1 }}</td>
                              <td align="center">{{ item.maTypeName }}</td>
                              <td align="center">{{ item.typeName }}</td>
                              <td align="center">{{ item.unitName }}</td>
                              <td align="center">{{ item.preNum }}</td>
                              <td align="center">{{ item.remark }}</td>
                              <td align="center">
                                  <span
                                      v-if="item.manageType == 0"
                                      style="color: blue; cursor: pointer"
                                      @click="codeInfo(item)"
                                  >
                                      编码出库
                                  </span>
                                  <span v-if="item.manageType == 1">数量出库</span>
                              </td>
                          </tr>
                      </tbody>
                  </table>
                  <div class="fillIn" style="margin-top: 50px; display: flex; justify-content: space-between">
                      <div class="item" style="width: 23%; display: flex; align-items: flex-start; flex-wrap: wrap">
                          <div style="width: 25%">审核：</div>
                          <div
                              style="width: 75%; display: flex; align-items: center; flex-wrap: wrap"
                              v-if="approveSignList.length > 0"
                          >
                              <div
                                  style="width: 80%; margin-left: 20px; height: 40px; transform: translateY(-30px)"
                                  v-for="(item, index) in approveSignList"
                                  :key="index"
                              >
                                  <img
                                      :src="item.outSignUrl"
                                      style="width: 40px; height: 90px; max-width: 100%"
                                      :style="{ transform: item.outSignType == 0 ? 'rotate(-90deg)' : '' }"
                                      alt=""
                                  />
                              </div>
                          </div>
                      </div>
                      <div class="item" style="width: 24%; display: flex; align-items: flex-start; flex-wrap: wrap">
                          <div style="width: 30%">领料：</div>
                          <div
                              style="
                                  width: 70%;
                                  display: flex;
                                  align-items: center;
                                  flex-wrap: wrap;
                                  transform: translateY(-30px);
                              "
                              v-if="outSignList.length > 0"
                          >
                              <div
                                  style="width: 80%; margin-left: 20px; height: 40px"
                                  v-for="(item, index) in outSignList"
                                  :key="index"
                              >
                                  <img
                                      :src="item.outSignUrl"
                                      style="width: 40px; height: 90px; max-width: 100%"
                                      :style="{ transform: item.outSignType == 0 ? 'rotate(-90deg)' : '' }"
                                      alt=""
                                  />
                              </div>
                          </div>
                      </div>
                      <div class="item" style="width: 28%; display: flex; align-items: flex-start">
                          <div style="width: 25%">库管：</div>
                          <div
                              style="
                                  width: 75%;
                                  display: flex;
                                  align-items: center;
                                  flex-wrap: wrap;
                                  transform: translateY(-30px);
                              "
                              v-if="kgSignList.length > 0"
                          >
                              <div
                                  style="width: 80%; margin-left: 20px; height: 40px"
                                  v-for="(item, index) in kgSignList"
                                  :key="index"
                              >
                                  <img
                                      :src="item.outSignUrl"
                                      style="width: 40px; height: 90px"
                                      :style="{ transform: item.outSignType == 0 ? 'rotate(-90deg)' : '' }"
                                      alt=""
                                  />
                              </div>
                          </div>
                      </div>
                      <div class="item" style="width: 25%; display: flex; align-items: flex-start">
                          <div style="width: 25%">制单：</div>
                          <div
                              style="width: 75%; margin-left: 20px; transform: translateY(-30px)"
                              v-if="leaseApplyData.leaseSignUrl"
                          >
                              <img
                                  :src="leaseApplyData.leaseSignUrl"
                                  style="width: 40px; height: 90px; max-width: 100%"
                                  :style="{ transform: leaseApplyData.leaseSignType == 0 ? 'rotate(-90deg)' : '' }"
                                  alt=""
                              />
                          </div>
                      </div>
                  </div>
              </vue-easy-print>
          </div>
          <div slot="footer" class="dialog-footer" style="text-align: center">
              <el-button type="primary" @click="print">打 印</el-button>
              <el-button @click="open = false">关 闭</el-button>
          </div>
      </el-dialog>

        <!-- 编码管理查看弹窗 -->
        <el-dialog :title="titleView" :visible.sync="showView" width="800px" append-to-body>
            <div style="overflow-y: scroll">
                <vue-easy-print tableShow ref="remarksPrintRefView" class="print">
                    <div
                        class="title"
                        style="text-align: center; font-weight: 600; font-size: 16px; margin-bottom: 20px"
                    >
                        领料单编号明细
                    </div>
                    <!-- <el-table :data="getListViewInfo" width="600px" height="450">
                        <el-table-column align="center" label="序号" type="index" width="55" />
                        <el-table-column
                            label="类型名称"
                            align="center"
                            prop="materialName"
                            :show-overflow-tooltip="true"
                        />
                        <el-table-column
                            label="规格型号"
                            align="center"
                            prop="typeName"
                            :show-overflow-tooltip="true"
                        />
                        <el-table-column label="设备编码" align="center" prop="maCode" :show-overflow-tooltip="true" />
                    </el-table> -->
                    <table class="print-table" style="margin-top: 20px; width: 100%; border-collapse: collapse" border>
                        <thead>
                            <tr>
                                <th align="center" width="55">序号</th>
                                <th align="center">类型名称</th>
                                <th align="center">规格型号</th>
                                <th align="center">设备编码</th>
                            </tr>
                        </thead>
                        <tbody>
                            <tr v-for="(item, index) in getListViewInfo" :key="index">
                                <td align="center">{{ index + 1 }}</td>
                                <td align="center">{{ item.materialName }}</td>
                                <td align="center">{{ item.typeName }}</td>
                                <td align="center">{{ item.maCode }}</td>
                            </tr>
                        </tbody>
                    </table>
                </vue-easy-print>
            </div>
            <div slot="footer" class="dialog-footer" style="text-align: center">
                <el-button type="primary" @click="printView">打 印</el-button>
                <el-button @click="showView = false">关 闭</el-button>
            </div>
        </el-dialog>
  </div>
</template>

<script>
import { getTotalListApi, getDetailsListApi,getPickListApi } from '@/api/materialsStation'
import { getClzApplyInfo,  } from '@/api/lease/apply'
import Treeselect from '@riophae/vue-treeselect'
import '@riophae/vue-treeselect/dist/vue-treeselect.css'
import vueEasyPrint from 'vue-easy-print'
import printJS from 'print-js'
export default {
  components: { Treeselect,vueEasyPrint },
  data() {
    return {
      showSearch: true,
      queryParams: {
        pageNum: 1,
        pageSize: 10,
        keyWord: '', // 关键字
        proStatus: '', // 状态
        timeRange: [], // 日期范围
        startTime: '', // 开始时间
        endTime: '', // 结束时间
        impUnitName: '', // 分公司
        maTypeNames: '', // 物资名称
        leasePerson: '', // 领料人
        code: '', // 领料单号
        leaseUnit: '', // 领料单位
        leaseProject: '' // 领料工程
      },
      total: 0, // 总条数
      // 表头
      tableColumns: [
        { label: '分公司', prop: 'impUnitName' },
        { label: '领料单位', prop: 'leaseUnit' },
        { label: '领料工程', prop: 'leaseProject' },
        { label: '物资名称', prop: 'maTypeNames' },
        { label: '领料人', prop: 'leasePerson', width: '90' },
        { label: '领料时间', prop: 'leaseTime', width: '100' },
        { label: '领料单号', prop: 'code' }
      ],
      // 表格数据
      tableList: [],
      dlgTotal: 0, // 弹框总条数
      dialogTitle: '查看',
      dialogVisible: false,
      dialogForm: {
        pageNum: 1,
        pageSize: 10,
        keyWord: '' // 关键字
      },
      dialogColumns: [
        { label: '类型名称', prop: 'typeCode' },
        { label: '规格型号', prop: 'modelCode' },
        { label: '计量单位', prop: 'unitNames' },
        { label: '设备编码', prop: 'maCode' },
        { label: '预领数量', prop: 'preCountNum' },
        { label: '出库数量', prop: 'preCountNum' },
        { label: '备注', prop: 'remark' }
      ],
      dialogList: [],
      deptList: [], // 分公司
      unitList: [], // 领料单位
      proList: [], // 领料工程
      typeModelList: [], // 物资名称

      //领料单
      title: '',
      open: false,
      leaseApplyDetails: [],
      // 领料任务详情数据
      leaseApplyData: {},
      leaseLoading: false,
      titleView: '',
      showView: false,
      getListViewInfo: [],
      publishTask: '',
      kgSignList: [],
      outSignList: [],
      approveSignList: [],
    }
  },
  created() {
    const end = new Date()
    let start = new Date()
    start.setMonth(start.getMonth() - 1)
    this.queryParams.timeRange = [this.format(start), this.format(end)]
    this.getList()
  },
  methods: {
    format(date) {
      const y = date.getFullYear()
      const m = String(date.getMonth() + 1).padStart(2, '0')
      const day = String(date.getDate()).padStart(2, '0')
      return `${y}-${m}-${day}`
    },

    /** 转换菜单数据结构 */
    normalizer(node) {
      if (node.children && !node.children.length) {
        delete node.children
      }
      return {
        id: node.id,
        label: node.name,
        children: node.children
      }
    },

    // 查询
    handleQuery() {
      this.queryParams.pageNum = 1
      this.getList()
    },
    // 重置
    handleReset() {
      this.queryParams.pageNum = 1
      this.queryParams.pageSize = 10
      this.$refs.queryForm.resetFields()
      const end = new Date()
      let start = new Date()
      start.setMonth(start.getMonth() - 1)
      this.queryParams.timeRange = [this.format(start), this.format(end)]
      this.getList()
    },
    // 获取列表
    async getList() {
      console.log('列表-查询', this.queryParams)
      const loading = this.$loading({ text: '加载中...' })
      this.queryParams.startTime = this.queryParams.timeRange ? this.queryParams.timeRange[0] : ''
      this.queryParams.endTime = this.queryParams.timeRange ? this.queryParams.timeRange[1] : ''
      try {
        const params = { ...this.queryParams }
        const res = await getTotalListApi(params)
        console.log('🚀 ~ 获取列表 ~ res:', res)
        this.tableList = res.data.rows
        this.total = res.data.total
        loading.close()
      } catch (error) {
        console.log('🚀 ~ 获取列表 ~ error:', error)
        this.tableList = []
        this.total = 0
        loading.close()
      }
    },
    // 获取详情列表
    async getDetailsList() {
      try {
        const res = await getDetailsListApi({ ...this.dialogForm })
        console.log('🚀 ~ 获取详情列表 ~ res:', res)
        this.dialogList = res.data.rows
        this.dlgTotal = res.data.total
      } catch (error) {
        console.log('🚀 ~ 获取详情列表 ~ error:', error)
        this.dialogList = []
        this.dlgTotal = 0
      }
    },
    // 查看
    handleView(row) {
      console.log('查看', row)
      this.dialogTitle = '查看'
      this.dialogVisible = true
      setTimeout(() => {
        this.dialogForm.code = row.code
        this.getDetailsList()
      }, 100)
    },

    //打开领料单
    async handleLld(row) {
          this.title = '领料单'
          // this.queryOutView.keyWord = ''
          this.open = true
          // var ids = row.id
          const { id, publishTask } = row
          this.publishTask = publishTask
          this.leaseLoading = true
          try {
              const res = await getClzApplyInfo(id, {  publishTask })
              this.leaseApplyDetails = res.data.leaseApplyDetailsList
              this.leaseApplyData = res.data.leaseApplyInfo
              this.kgSignList = res.data.kgSignList || []
              this.outSignList = res.data.outSignList || []
              this.approveSignList = res.data.approveSignList || []
          } catch (error) {
              console.log('🚀 ~ handleLld ~ error:', error)
          } finally {
              this.leaseLoading = false
          }
      },


    //打印
    printView() {
      this.$refs.remarksPrintRefView.print()
    },

    //领料单打印
    print() {
        this.$refs.remarksPrintRef.print()
    },

    codeInfo(row) {
        this.showView = true
        this.titleView = '查看'
        this.getListViewInfo = row.maCodeVoList
    },


    // 出库检验单
    handleCheck(row) {
      console.log('出库检验单', row)
      this.$message({
        type: 'warning',
        message: '出库检验单功能开发中，敬请期待！'
      })
    },
    // 导出数据
    handleExport() {
      // 提示
      this.$message({
        type: 'warning',
        message: '导出功能开发中，敬请期待！'
      })
      try {
        let fileName = `数据_${new Date().getTime()}.xLsx`
        let url = ''
        const params = { ...this.queryParams }
        console.log('🚀 ~ 导出 ~ params:', params)
        // this.derive(url, params, fileName)
        // this.download(url, params, fileName)
      } catch (error) {
        console.log('导出数据失败', error)
      }
    }
  }
}
</script>

<style lang="scss" scoped>

.print-table {
    table,
    th,
    td {
        border: 1.5px solid black;
        border-collapse: collapse;
    }
}
</style>