devicesmgt/sgzb-ui/src/views/warehouseManage/pushAndAccept/pushAndAcceptDetail.vue

<template>
  <div class="app-container">
    <!-- 表单 -->
    <el-form :inline="true" :model="queryForm" ref="queryForm" label-width="68px" size="small" v-show="showSearch">
      <el-form-item label="关键字" prop="keyWord">
        <el-input v-model="queryForm.keyWord" clearable placeholder="请输入关键字" />
      </el-form-item>
      <!-- 物品种类下拉 -->
      <el-form-item label="物品种类" prop="goodsType">
        <el-select v-model="queryForm.goodsType" placeholder="请选择物品种类" filterable clearable>
          <el-option label="物品种类1" value="1"></el-option>
          <el-option label="物品种类2" value="2"></el-option>
        </el-select>
      </el-form-item>
      <!-- 设备类型下拉 -->
      <el-form-item label="设备类型" prop="deviceType">
        <el-select v-model="queryForm.deviceType" placeholder="请选择设备类型" filterable clearable>
          <el-option label="设备类型1" value="1"></el-option>
          <el-option label="设备类型2" value="2"></el-option>
        </el-select>
      </el-form-item>
      <!-- 规格型号下拉 -->
      <el-form-item label="规格型号" prop="specificationModel">
        <el-select v-model="queryForm.specificationModel" placeholder="请选择规格型号" filterable clearable>
          <el-option label="规格型号1" value="1"></el-option>
          <el-option label="规格型号2" value="2"></el-option>
        </el-select>
      </el-form-item>
      <el-form-item>
        <el-button icon="el-icon-search" type="primary" @click="handleQuery">搜索</el-button>
        <el-button icon="el-icon-refresh" plain @click="resetQueryForm">重置</el-button>
      </el-form-item>
    </el-form>

    <el-row :gutter="10" class="mb8">
      <el-button class="el-icon-back" type="success" @click="goBackPushAndAccept" size="mini">&nbsp;推送接收</el-button>
      <el-button type="primary" @click="accept" size="mini" :loading="loading" v-if="!isDetail">接收</el-button>
      <right-toolbar :showSearch.sync="showSearch" @queryTable="getList" />
    </el-row>

    <!-- 列表 -->
    <el-table :data="tableData" style="width: 100%" @selection-change="selection">
      <el-table-column
        v-if="!isDetail"
        type="selection"
        width="55"
        align="center"
        :selectable="row => row.status == '1'"
      />
      <el-table-column
        type="index"
        label="序号"
        align="center"
        width="50"
        :index="indexContinuation(queryParams.pageNum, queryParams.pageSize)"
      />
      <el-table-column prop="machineryNum" label="机具编号" align="center" show-overflow-tooltip />
      <el-table-column prop="machineryName" label="机具名称" align="center" show-overflow-tooltip />
      <el-table-column prop="machineryType" label="机具类型" align="center" show-overflow-tooltip />
      <el-table-column prop="specificationModel" label="规格型号" align="center" show-overflow-tooltip />
      <el-table-column prop="rentalDate" label="租赁日期" align="center" show-overflow-tooltip />
      <el-table-column prop="rentalPrice" label="租赁价格" align="center" show-overflow-tooltip />
      <el-table-column prop="unit" label="所属单位" align="center" show-overflow-tooltip />
      <el-table-column prop="manufacturer" label="生产厂家" align="center" show-overflow-tooltip />
      <el-table-column prop="productionDate" label="出厂日期" align="center" show-overflow-tooltip />
      <el-table-column prop="isNewEquipment" label="是否是新装备" align="center" show-overflow-tooltip />
      <el-table-column prop="verificationNum" label="检验证编号" align="center" show-overflow-tooltip />
      <el-table-column prop="inspectionUnit" label="检验单位" align="center" show-overflow-tooltip />
      <el-table-column prop="inspectionDate" label="检验日期" align="center" show-overflow-tooltip />
      <el-table-column prop="nextInspectionDate" label="下次检验日期" align="center" show-overflow-tooltip />
      <el-table-column prop="machinistName" label="机手姓名" align="center" show-overflow-tooltip v-if="!isDetail">
        <template slot-scope="scope">
          <el-button v-if="scope.row.machinistName" type="text" size="mini" @click="getMachinistDetail(scope.row)">
            {{ scope.row.machinistName }}
          </el-button>
          <span v-else>无</span>
        </template>
      </el-table-column>
      <el-table-column prop="status" label="状态" align="center" show-overflow-tooltip>
        <template slot-scope="scope">
          <el-tag v-if="scope.row.status == 0" type="danger">未接收</el-tag>
          <el-tag v-else-if="scope.row.status == 1" type="success">已接收</el-tag>
        </template>
      </el-table-column>
    </el-table>

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

    <!-- 机手详情Dialog -->
    <el-dialog title="机手详情" :visible.sync="dialogVisible" width="50%">
      <el-card>
        <div class="wrapper">
          <div class="idCardContainer">
            <el-image class="idCard" :src="src.IDCardFront" :preview-src-list="src.IDCardFrontList"></el-image>
            <el-image class="idCard" :src="src.IDCardBack" :preview-src-list="src.IDCardBackList"></el-image>
          </div>
          <div class="information">
            <el-row>
              <el-col :span="10" class="item">姓名: {{ information.name }}</el-col>
              <el-col :span="14" class="item">身份证号: {{ information.IDCard }}</el-col>
            </el-row>
            <el-row>
              <el-col :span="12" class="item">性别: {{ information.gender }}</el-col>
            </el-row>
            <el-row>
              <el-col :span="10" class="item">年龄: {{ information.age }}</el-col>
              <el-col :span="14" class="item">电话: {{ information.phone }}</el-col>
            </el-row>
          </div>
        </div>
      </el-card>
      <!-- 持证信息 -->
      <el-card header="持证信息">
        <div class="certificate">
          <div class="certificateItem" v-for="item in certificateList">
            <el-image class="itemImg" :src="item.src" :preview-src-list="item.previewList"></el-image>
            <span class="itemName">{{ item.name }}</span>
          </div>
        </div>
      </el-card>
      <!-- 关闭按钮 -->
      <el-button type="primary" slot="footer" @click="dialogVisible = false">关闭</el-button>
    </el-dialog>
  </div>
</template>

<script>
export default {
  name: 'PushAndAcceptDetail',
  data() {
    return {
      loading: false,
      showSearch: true,
      queryForm: {
        keyWord: '',
        goodsType: '',
        deviceType: '',
        specificationModel: '',
      },
      tableData: [
        {
          machineryNum: '001',
          machineryName: '机具名称1',
          machineryType: '机具类型1',
          specificationModel: '规格型号1',
          rentalDate: '2021-01-01',
          rentalPrice: '1000',
          unit: '所属单位1',
          manufacturer: '生产厂家1',
          productionDate: '2021-01-01',
          isNewEquipment: '是',
          verificationNum: '检验证编号1',
          inspectionUnit: '检验单位1',
          inspectionDate: '2021-01-01',
          nextInspectionDate: '2021-01-01',
          machinistName: '机手姓名1',
          status: 0,
        },
        {
          machineryNum: '002',
          machineryName: '机具名称2',
          machineryType: '机具类型2',
          specificationModel: '规格型号2',
          rentalDate: '2021-01-02',
          rentalPrice: '2000',
          unit: '所属单位2',
          manufacturer: '生产厂家2',
          productionDate: '2021-01-02',
          isNewEquipment: '否',
          verificationNum: '检验证编号2',
          inspectionUnit: '检验单位2',
          inspectionDate: '2021-01-02',
          nextInspectionDate: '2021-01-02',
          machinistName: '',
          status: 1,
        },
      ],
      queryParams: {
        pageNum: 1,
        pageSize: 10,
      },
      total: 0,
      isDetail: false, // 是否详情页
      dialogVisible: false,
      // 机手身份证
      src: {
        IDCardFront: 'https://cube.elemecdn.com/6/94/4d3ea53c084bad6931a56d5158a48jpeg.jpeg',
        IDCardBack: 'https://cube.elemecdn.com/6/94/4d3ea53c084bad6931a56d5158a48jpeg.jpeg',
        IDCardFrontList: ['https://cube.elemecdn.com/6/94/4d3ea53c084bad6931a56d5158a48jpeg.jpeg'],
        IDCardBackList: ['https://cube.elemecdn.com/6/94/4d3ea53c084bad6931a56d5158a48jpeg.jpeg'],
      },
      // 机手信息
      information: {
        name: '张三',
        IDCard: '123456789012345678',
        gender: '男',
        age: '18',
        phone: '12345678901',
      },
      // 持证信息
      certificateList: [
        {
          name: 'xx范德萨范德萨范德萨范德萨发大水范德萨发大水x证',
          src: 'https://cube.elemecdn.com/6/94/4d3ea53c084bad6931a56d5158a48jpeg.jpeg',
          previewList: ['https://cube.elemecdn.com/6/94/4d3ea53c084bad6931a56d5158a48jpeg.jpeg'],
        },
        {
          name: 'xx范德萨范范德萨范德萨发大水范德萨德萨发大水x证',
          src: 'https://fuss10.elemecdn.com/e/5d/4a731a90594a4af544c0c25941171jpeg.jpeg',
          previewList: ['https://fuss10.elemecdn.com/e/5d/4a731a90594a4af544c0c25941171jpeg.jpeg']
        },
        {
          name: 'xx范德萨范德萨发大水x证',
          src: 'https://cube.elemecdn.com/6/94/4d3ea53c084bad6931a56d5158a48jpeg.jpeg',
          previewList: ['https://cube.elemecdn.com/6/94/4d3ea53c084bad6931a56d5158a48jpeg.jpeg']
        },
        {
          name: 'xx范德萨范德萨发大水x证',
          src: 'https://shadow.elemecdn.com/app/element/hamburger.9cf7b091-55e9-11e9-a976-7f4d0b07eef6.png',
          previewList: ['https://shadow.elemecdn.com/app/element/hamburger.9cf7b091-55e9-11e9-a976-7f4d0b07eef6.png']
        },
      ],
    }
  },
  created() {
    this.isDetail = this.$route.query.isDetail == 'true' ? true : false
    this.getList()
    this.getGoodsTypeList()
    this.getDeviceTypeList()
    this.getSpecificationModelList()
  },
  methods: {
    // 搜索
    handleQuery() {
      console.log('🚀 ~ handleQuery ~ 搜索:', params)
      this.getList()
    },
    // 重置
    resetQueryForm() {
      console.log('🚀 ~ resetQueryForm ~ 重置:')
      this.$refs.queryForm.resetFields()
      this.getList()
    },
    // 获取列表
    getList() {
      const params = {
        ...this.queryParams,
        ...this.queryForm,
      }
      console.log('🚀 ~ getList ~ 获取列表:', params)
    },
    // 获取物品种类
    getGoodsTypeList() {
      console.log('🚀 ~ getGoodsTypeList ~ 获取物品种类下拉:')
    },
    // 获取设备类型
    getDeviceTypeList() {
      console.log('🚀 ~ getDeviceTypeList ~ 获取设备类型下拉:')
    },
    // 获取规格型号
    getSpecificationModelList() {
      console.log('🚀 ~ getSpecificationModelList ~ 获取规格型号下拉:')
    },
    // 返回推送接收
    goBackPushAndAccept() {
      this.$router.push({ path: 'pushAndAccept' })
    },
    // 接收
    accept() {
      console.log('🚀 ~ accept ~ 接收:')
      // this.loading = true
      // 接口().then(res => {
      //   this.getList()
      // }).catch(err => {
      //   console.log('🚀 ~ accept ~ err:', err)
      // }).finally(() => {
      //   this.loading = false
      // })
    },
    // 选择
    selection(val) {
      console.log('🚀 ~ selection ~ 选择:', val)
    },
    // 机手详情 - 弹框
    getMachinistDetail(row) {
      console.log('🚀 ~ getMachinistDetail ~ 机手详情:', row)
      this.dialogVisible = true
    },
  },
}
</script>

<style lang="scss" scoped>
.el-row {
  margin-left: 0px !important;
}
.wrapper {
  display: flex;
  .idCardContainer {
    display: flex;
    flex-direction: column;
    .idCard {
      margin-bottom: 10px;
      width: 172px;
      height: 115px;
    }
  }
  .information {
    padding: 0 20px 0 80px;
    width: 100%;
    .item {
      margin-top: 10px;
      margin-bottom: 30px;
    }
  }
}
.certificate {
  width: 100%;
  display: flex;
  flex-wrap: wrap;
  justify-content: start;
  .certificateItem {
    width: 25%;
    display: flex;
    flex-direction: column;
    margin: 15px 0;
    .itemImg {
      // 居中展示图片
      margin: 5px auto;
      width: 100px;
      height: 120px;
    }
    .itemName {
      margin: 0 5px;
      display: block;
      text-align: center;
    }
  }
}
</style>