udiwms-vue-frame/src/views/collect/fieldOperation.vue

<template>
  <div style="padding: 20px">
    <div style=" display: flex;justify-content: left;">
      <h1 style="color: #000000;font-weight: bold;margin-left: 20px">采集工位</h1>
    </div>
    <el-divider/>
    <!-- 分割线 -->
    <!--<el-form :model="query" class="query-form" size="mini" label-width="100px" :inline="true">-->
      <!--<el-form-item prop="key" label="工位信息:">-->
      <!--  <el-input v-model="query.workKey" clearable placeholder="请输入或扫描工位二维码" style="width: 400px"  ref="inputField" ></el-input>-->
      <!--</el-form-item>-->

      <!--<el-form-item>-->
      <!--  <el-button-group style="margin-left: 10px;display:flex;">-->
      <!--    <el-button type="primary" icon="el-icon-search" @click.native.stop="getStationList()">搜索</el-button>-->
      <!--  </el-button-group>-->
      <!--</el-form-item>-->

    <!--</el-form>-->


      <el-row :gutter="8" style="height: 50%">
        <el-col v-for="(info, index)  in stationList"  :key="index" :xs="12" :sm="8" :md="8" :lg="6" v-if="info.workPlaceClass == 1">
          <el-card :body-style="{margin:'20px'}"
                   style="margin:20px 20px 20px 20px;height: 200px;background-color: #e1f3fb;border-radius: 12px; position: relative;"
          >

            <div style="display: flex; justify-content: space-between; align-items: center; height: 66px; /* 约为 200px 的 1/3 */" >
              <p style="font-size: 20px;background-color: #e1f3fb;font-weight: bold;">{{ info.workplaceName }}</p> <!-- 假设你的信息对象中包含一个title属性 -->
              <!--            <div style="width: 60px; height: 60px;  display: flex; justify-content: center; align-items: center;">-->
              <!--              &lt;!&ndash; 二维码占位，这里用灰色方块代替 &ndash;&gt;-->
              <!--&lt;!&ndash;              <span>QR</span>&ndash;&gt;-->
              <!--              <div ref="qrcode" :id="'qrcode-'+index" style="width: 60px;height: 60px;"></div>-->

              <!--            </div>-->
            </div>
            <div style="flex: 1; display: flex; flex-direction: column; justify-content: flex-end; padding-top: 10px;"  >
              <!-- 假设这里有一些信息内容 -->
              <p style="font-size: 14px;background-color: #e1f3fb" >{{ info.remake }}</p>
              <el-button type="primary" style="position: absolute; bottom: 20px; right: 20px;" icon="el-icon-thumb" @click="handleClick(index)">开始作业</el-button>

            </div>



          </el-card>
        </el-col>
      </el-row>

    <div style=" display: flex;justify-content: left;margin-top: 30px">
      <h1 style="color: #000000;font-weight: bold;margin-left: 20px">上货工位</h1>
    </div>
    <el-divider/>

    <el-row :gutter="8" style="height: 50%">
      <el-col v-for="(info, index)  in stationList"  :key="index" :xs="12" :sm="8" :md="8" :lg="6" v-if="info.workPlaceClass == 2">
        <el-card :body-style="{margin:'20px'}"
                 style="margin:20px 20px 20px 20px;height: 200px;background-color: #e1f3fb;border-radius: 12px; position: relative;"
        >

          <div style="display: flex; justify-content: space-between; align-items: center; height: 66px; /* 约为 200px 的 1/3 */" >
            <p style="font-size: 20px;background-color: #e1f3fb;font-weight: bold;">{{ info.workplaceName }}</p> <!-- 假设你的信息对象中包含一个title属性 -->
            <!--            <div style="width: 60px; height: 60px;  display: flex; justify-content: center; align-items: center;">-->
            <!--              &lt;!&ndash; 二维码占位，这里用灰色方块代替 &ndash;&gt;-->
            <!--&lt;!&ndash;              <span>QR</span>&ndash;&gt;-->
            <!--              <div ref="qrcode" :id="'qrcode-'+index" style="width: 60px;height: 60px;"></div>-->

            <!--            </div>-->
          </div>
          <div style="flex: 1; display: flex; flex-direction: column; justify-content: flex-end; padding-top: 10px;"  >
            <!-- 假设这里有一些信息内容 -->
            <p style="font-size: 14px;background-color: #e1f3fb" >{{ info.remake }}</p>
            <el-button type="primary" style="position: absolute; bottom: 20px; right: 20px;" icon="el-icon-thumb" @click="handleClick(index)">开始作业</el-button>

          </div>



        </el-card>
      </el-col>
    </el-row>


    </div>
</template>

<script>
import {listPage} from "@/api/basic/workPlace/sysWorkplaceManage.js";
import QRCode from 'qrcodejs2'
import { getUserBindWork, getUserWorkByWorkplaceCode } from '@/api/basic/collectPoint/userWorkplace'

export default {
  name: 'fieldOperation',
  data() {
    return {
      query:{
        workKey: '',
        workplaceStatus: 1,
        userId: this.$store.getters.adminId,
        workplaceCode:'',
        // invCode: this.$store.getters.locInvCode,
        page: 1,
        limit: 200
      },
      // 假设这是你的卡片数据
      stationList: []
    };
  },
  created() {
    //获取工位list
    this.getStationList()
    // this.generateQRCodes()
  },
  methods: {
    generateQRCodes() {
      this.stationList.forEach((info, index) => {
        new QRCode(document.getElementById(`qrcode-${index}`), {
          text: info.workplaceId,
          width: 60,
          height: 60,
          colorDark: "#000000",
          colorLight: "transparent",
          correctLevel: QRCode.CorrectLevel.H
        });
      });
    },
    handleClick(index) {
      let query = {
        userId: this.$store.getters.adminId,
        workplaceCode: this.stationList[index].workplaceId,
      }
      let workPlaceClass = this.stationList[index].workPlaceClass
      getUserWorkByWorkplaceCode(query).then(res => {
        if (res.code == 20000){
          let url = window.location.origin + `/UDI_WMS_NEW#/tagCodeBlank?workplaceId=` + this.stationList[index].workplaceId +`&workPlaceClass=`+ this.stationList[index].workPlaceClass
            +`&productType=`+ this.stationList[index].productType + `&jobMode=` + this.stationList[index].jobMode
          // this.$router.push( workplaceId)
          window.open(url, '_blank');
        }else {
          this.$message.error(res.message)
        }
      }).catch(() => {})

    },
    getStationList() {
      getUserBindWork(this.query).then(res => {
        this.stationList = res.data?.list || []
        // this.generateQRCodes
      })

    },
  },
  mounted() {
    // this.getStationList()
    // this.generateQRCodes();
    this.$nextTick(() => {
      this.$refs.inputField.focus();
    });
  }
}
</script>

<style >

.custom-disabled-input input.el-input__inner:disabled {
  color: #000000; /* 修改为需要的颜色 */
}
/* 添加样式来定位左上角的删除按钮 */
.close-button {
  position: absolute;
  top: 10px; /* 你可以根据需要调整这个值 */
  right: 10px; /* 你可以根据需要调整这个值 */
  z-index: 1; /* 确保按钮在卡片内容之上 */
}

</style>