trace-admin/src/views/identity/scanRecord/index.vue

<template>
  <div class="app-container">
    <div class="app-container-search main-bgcolor main-radius">
      <h1 class="">生成记录</h1>
      <br />

      <!-- 搜索工作栏 -->
      <Bound
        ref="searchForm"
        :searchFormParam="{ queryParams, dataSource }"
        :showSearch.sync="showSearch"
        @handleQuery="handleQuery"
        @resetQuery="resetQuery"
      ></Bound>
    </div>
    <!-- 操作工具栏 -->

    <!-- 列表 -->
     <div class="app-container-list main-bgcolor main-radius shopping">
      <div class="shopping-top">
        <div class="shopping-title">生成记录列表</div>
        <el-button class="shopping-add-btn" type="primary" plain @click="handleOpenAddBatch"
                  v-hasPermi="['identity:scan-record:createBatch']">批量新增扫码记录</el-button>
      </div>

      <el-table v-loading="loading" :data="list">
        <el-table-column label="序号" align="center" type="index" width="80" >
          <template v-slot="{ $index }">
            <span>{{($index+1)+ (queryParams.pageNo-1)*queryParams.pageSize }}</span>
          </template>
        </el-table-column>
        <el-table-column label="记录编号" align="center" prop="generateRecordId" width="280" >
          <template slot-scope="{ row }">
             <el-tooltip class="item" effect="dark" :content="row.generateRecordId" placement="top">
               <div class="flex-acenter">
                 <span class="more-width-20">{{ row.generateRecordId }}</span>
                 <el-button type="text" icon="el-icon-copy-document" @click.stop="copyContent(row.generateRecordId)"></el-button>
               </div>
             </el-tooltip>
          </template>
        </el-table-column>
        <el-table-column label="商户名称" align="center" prop="belongBusinessName" width="150" >
           <template slot-scope="{ row }">
              <div class="table-column">
                <span class="more-width-20">{{ row.belongBusinessName }}</span>
                <el-button type="text" icon="el-icon-copy-document" @click.stop="copyContent(row.belongBusinessName)"></el-button>
              </div>
           </template>
        </el-table-column>
        <el-table-column label="商品名称" align="center" prop="goodsName" min-width="160" />
        <el-table-column label="采收批次" align="center" prop="batchId" min-width="250" />
        <!-- 生成时间就是创建时间   对应数据库字段名-->
        <el-table-column label="生成时间" align="center" prop="createTime" width="180">
          <template slot-scope="{row}">
              <span>{{parseTime(row.createTime)}}</span>
          </template>
        </el-table-column>
        <el-table-column label="码类型" align="center" prop="codeType" width="100">
          <template slot-scope="scope">
              <span>{{codeText(scope.row.codeType)}}</span>
          </template>
        </el-table-column>
        <el-table-column label="字符长度" align="center" prop="charLength" width="100"/>
        <el-table-column label="字符类型" align="center" prop="charType" width="100">
           <template slot-scope="scope">
              <span>{{charText(scope.row.charType)}}</span>
            </template>
        </el-table-column>
        <el-table-column label="数量" align="center" prop="codeNum" width="100"/>
        <el-table-column label="操作" align="center" fixed="right" class-name="small-padding fixed-width" width="150">
          <template v-slot="scope">
            <el-button size="mini" type="text"
                       v-hasPermi="['identity:code:export']" @click="downloadText(scope.row)">下载文字码包</el-button>
            <el-button size="mini" type="text"
                       v-hasPermi="['identity:code:export']" @click="downloadThirdText(scope.row)">下载第三方标签文字码包</el-button>
            <el-button size="mini" type="text"
                       v-hasPermi="['basic:goods-info:update']" @click="downloadImage(scope.row)">下载图片文字码包</el-button>
            <el-button size="mini" type="text"
                       v-hasPermi="['basic:goods-info:update']" @click="downloadNoTextImage(scope.row)">下载纯图片码包</el-button>
             <el-button size="mini" type="text"  @click="handleDelete(scope.row)"
                       v-hasPermi="['identity:generate-record:delete']">删除码包</el-button>
          </template>
        </el-table-column>
         <div slot="empty">
            <EmptyBound />
          </div>
      </el-table>

      <!-- 分页组件 -->
      <pagination v-show="total > 0" :total="total" :page.sync="queryParams.pageNo" :limit.sync="queryParams.pageSize"
                  @pagination="getList"/>
    </div>
    <!-- 对话框(添加 / 修改) -->
    <el-dialog title="批量新增扫码记录" :visible.sync="open" width="500px" v-dialogDrag append-to-body>
      <el-form ref="form" :model="form" :rules="rules" label-width="80px">
        <el-form-item label="采收批次" prop="batchIdList">
          <el-select v-model="form.batchIdList" placeholder="请选择批次" multiple filterable style="width: 100%;">
            <el-option v-for="item in batchList" :key="item" :label="item" :value="item" />
          </el-select>
        </el-form-item>
        <el-form-item label="扫码时间" prop="scanTime">
          <el-date-picker type="datetime" placeholder="请选择扫码时间" v-model="form.scanTime" style="width: 100%;"></el-date-picker>
        </el-form-item>
        <el-form-item label="手机信息" prop="mobileSystemInfo">
          <el-input v-model="form.mobileSystemInfo" type="textarea" rows="5" placeholder="请输入手机信息" />
        </el-form-item>
        <el-form-item label="扫码IP" prop="scanIp">
          <el-input v-model="form.scanIp" placeholder="请输入扫码IP" />
        </el-form-item>
        <el-form-item label="扫码区域" prop="scanArea">
          <el-input v-model="form.scanArea" placeholder="请输入扫码区域" />
        </el-form-item>
        <el-form-item label="扫码地址" prop="scanLocation">
          <el-input v-model="form.scanLocation" placeholder="请输入扫码地址" />
        </el-form-item>
      </el-form>
      <div slot="footer" class="dialog-footer">
        <el-button type="primary" @click="submitForm" :loading="submitLoading">确 定</el-button>
        <el-button @click="cancel">取 消</el-button>
      </div>
    </el-dialog>
  </div>
</template>

<script>
import Bound from '@/components/Customer/SearchForm'
import EmptyBound from '@/components/EmptyTable'
import { deleteGenerateRecord, getGenerateRecordPage } from "@/api/identity/generateRecord";
import {
  getAllBatchCode,
} from "@/api/production/harvestBatch";
import { createCode , exportExcel, exportThirdExcel } from '@/api/identity/code';
import { createScanRecordBatch } from "@/api/identity/scanRecord";
export default {
  name: "GenerateRecord",
  components: {
    EmptyBound,
    Bound,
  },
  data() {
    return {
      // 遮罩层
      loading: true,
      // 导出遮罩层
      exportLoading: false,
      // 显示搜索条件
      showSearch: true,
      // 总条数
      total: 0,
      // 标识码生成记录列表
      list: [],
      // 弹出层标题
      title: "",
      // 是否显示弹出层
      open: false,
      batchList: [],
      // 查询参数
      queryParams: {
        pageNo: 1,
        pageSize: 10,
        belongBusinessName: null,
        batchId: null,
      },
       dataSource: [
         {
          key: 'belongBusinessName', //所属商户
          itemType: 'input',
          label: '商户名称',
          placeholder: '请输入',
          onEnterKeyUp: this.handleQuery,
        },
        {
          key: 'batchId', //采收批次
          itemType: 'input',
          label: '采收批次',
          placeholder: '请输入采收批次',
          onEnterKeyUp: this.handleQuery,
        }
       ],

      submitLoading: false,
      // 表单参数
      form: {
        mobileSystemInfo: `{"type":"h5","userAgent":"Mozilla/5.0 (iPhone; CPU iPhone OS 18_1 like Mac OS X) AppleWebKit/605.1.15 (KHTML, like Gecko) Version/18.1 Mobile/15E148 Safari/604.1","model":"iPhone","brand":"iPhone","platform":"iOS","system":"iOS 18.1"}`,
      },
      // 表单校验
      rules: {
        batchIdList: [
          { required: true, message: "请选择采收批次", trigger: "blur" },
        ],
        scanTime: [
          { required: true, message: "请选择扫码时间", trigger: "blur" },
        ],
        mobileSystemInfo: [
          { required: true, message: "请输入手机信息", trigger: "blur" },
        ],
        scanIp: [
          { required: true, message: "请输入扫码IP", trigger: "blur" },
        ],
        scanArea: [
          { required: true, message: "请输入扫码区域", trigger: "blur" },
        ],
        scanLocation: [
          { required: true, message: "请输入扫码地址", trigger: "blur" },
        ],
      }
    };
  },
  mounted() {
    this.getList();
  },
  methods: {
    stateText(state){
      switch(state){
        case 0:
          return '生成中'
        case 1:
          return '已生成文字码，未生成图片码'
        case 2:
          return '文字及图片码均生成'
      }
    },
    codeText(codeType){
      switch(codeType){
         case 0:
          return '普通码'
         case 1:
          return '明暗码'
      }
    },
    charText(charType){
      switch(charType){
        case 0:
          return '纯数字'
        case 1:
          return '纯字母'
        case 2:
          return '混合类型'
      }
    },
    // 下载文字码包
    downloadText(row){
      exportExcel({
        generateRecordId: row.generateRecordId,
      }).then((res)=>{
        this.$download.excel(res, '文字码包.xls');
      });
    },
    downloadThirdText(row) {
      exportThirdExcel({
        generateRecordId: row.generateRecordId,
      }).then((res)=>{
        this.$download.excel(res, '第三方标签文字码包.xls');
      });
    },
    // 下载图片码包
    async downloadImage(row) {
      let url = row.fileUrl;
      window.open(url,'_self');
    },
    async downloadNoTextImage(row) {
      if (row.imageFileUrl) {
        window.open(row.imageFileUrl, '_self');
      } else {
        this.$modal.msgError("未生成纯图片码包, 请重新生成");
      }
    },

    /** 查询列表 */
    getList() {
      const { query: { businessName } } = this.$route;
      if (businessName) {
        this.queryParams.belongBusinessName = businessName;
      }
      this.loading = true;
      // 执行查询
      getGenerateRecordPage(this.queryParams).then(response => {
        this.list = response.data.list;
        this.total = response.data.total;
        this.loading = false;
      });
    },
    /** 搜索按钮操作 */
    handleQuery() {
      this.queryParams.pageNo = 1;
      this.getList();
    },
    /** 重置按钮操作 */
    resetQuery() {
      this.resetForm("queryForm", "searchForm");
      this.handleQuery();
    },
    /** 删除按钮操作 */
    handleDelete(row) {
      const id = row.id;
      this.$modal.confirm('是否确认删除标识码生成记录编号为"' + row.generateRecordId + '"的数据项?').then(function() {
          return deleteGenerateRecord(id);
        }).then(() => {
          this.getList();
          this.$modal.msgSuccess("删除成功");
        }).catch(() => {});
    },
    // 存入码仓
    async saveCodeWarehouse(row){
      let form = {
        ...row,
        status: row.state,
      }
      let res = await createCode(form);
      console.log('存入结果',res);
    },
    handleOpenAddBatch() {
      this.open = true;
      getAllBatchCode().then(({ data }) => {
        this.batchList = data;
      });
    },
    /** 取消按钮 */
    cancel() {
      this.open = false;
      this.reset();
    },
    /** 表单重置 */
    reset() {
      this.form = {
        batchIdList: undefined,
        scanTime: undefined,
        mobileSystemInfo: `{"type":"h5","userAgent":"Mozilla/5.0 (iPhone; CPU iPhone OS 18_1 like Mac OS X) AppleWebKit/605.1.15 (KHTML, like Gecko) Version/18.1 Mobile/15E148 Safari/604.1","model":"iPhone","brand":"iPhone","platform":"iOS","system":"iOS 18.1"}`,
        scanIp: undefined,
        scanArea: undefined,
        scanLocation: undefined,
      };
      this.resetForm("form");
    },
    submitForm() {
      this.$refs["form"].validate((valid) => {
        if (valid) {
          this.submitLoading = true;
          // this.form.batchIdList = this.form.batchIdList.join(',');
          // this.form.createTime = this.form.scanTime;
          createScanRecordBatch(this.form).then(() => {
            this.cancel();
            this.getList();
            this.$message.success("新增成功");
          }).finally(() => {
            this.submitLoading = false;
          });
        } else {
          return false;
        }
      });
    }
  }
};
</script>
<style lang="scss">
  .table-column{
    display: flex;
    align-items: center;
    justify-content: center;
    .dian{
      width: 5px;
      height: 5px;
      border-radius: 100%;
      background-color: rgb(217, 217, 217);
      display: inline-block;
    }
    .dian-active{
      background-color: rgb(82, 196, 26);
    }
    .column-content{
      display: inline-block;
      padding-left: 6px;
    }
  }
</style>