From b34869cbc691e32c4a842b64e0729c602c2eed41 Mon Sep 17 00:00:00 2001
From: zzyuan <781948537@qq.com>
Date: Wed, 11 Dec 2024 16:32:36 +0800
Subject: [PATCH] =?UTF-8?q?=E4=BA=8C=E7=BB=B4=E7=A0=81=E6=A0=87=E5=87=86?=
 =?UTF-8?q?=E7=AE=B1=E9=A1=B5=E9=9D=A2=E7=BB=98=E5=88=B6?=
MIME-Version: 1.0
Content-Type: text/plain; charset=UTF-8
Content-Transfer-Encoding: 8bit

---
 src/views/material/ma/standardBox/index.vue | 310 ++++++++++++++++++++
 1 file changed, 310 insertions(+)
 create mode 100644 src/views/material/ma/standardBox/index.vue

diff --git a/src/views/material/ma/standardBox/index.vue b/src/views/material/ma/standardBox/index.vue
new file mode 100644
index 00000000..2e5cb862
--- /dev/null
+++ b/src/views/material/ma/standardBox/index.vue
@@ -0,0 +1,310 @@
+<template> 
+    <div class="app-container">
+        <el-form :model="queryParams" ref="queryForm" size="small" :inline="true" v-show="showSearch" label-width="100px">
+            <el-form-item label="日期">
+                <el-date-picker
+                    type="daterange"
+                    v-model="queryTime"
+                    range-separator="-"
+                    style="width: 240px"
+                    value-format="yyyy-MM-dd"
+                    end-placeholder="结束日期"
+                    start-placeholder="开始日期"
+                    @change="onTimeChange"
+                ></el-date-picker>
+            </el-form-item> 
+            <el-form-item label="关键字" prop="keyWord">
+                <el-input
+                    v-model="queryParams.keyWord"
+                    placeholder="请输入关键字"
+                    clearable
+                    maxlength="50"
+                    style="width: 240px"
+                    @keyup.enter.native="handleQuery"/>
+            </el-form-item>
+
+            <el-form-item>
+                <el-button type="primary" icon="el-icon-search" size="mini" @click="handleQuery">查询</el-button>
+                <el-button icon="el-icon-refresh" size="mini" @click="resetQuery">重置</el-button>
+                <el-button type="success" icon="el-icon-plus" size="mini" @click="handleAdd">新增</el-button>
+            </el-form-item>
+        </el-form> 
+        <!-- <el-row :gutter="10" class="mb8">
+            <el-col :span="1.5">
+                <el-button type="warning" plain icon="el-icon-download" size="mini">导出数据</el-button>
+            </el-col>
+            <right-toolbar :showSearch.sync="showSearch" @queryTable="getList"></right-toolbar>
+        </el-row> -->
+        <el-table border :data="tableList" v-loading="loading" @selection-change="handleSelectionChange">
+            <!-- <el-table-column type="selection" width="55" align="center" /> -->
+            <el-table-column label="序号" align="center" type="index">
+                <template slot-scope="scope">
+                    <span>{{ (queryParams.pageNum - 1) * queryParams.pageSize + scope.$index + 1 }}</span>
+                </template>
+            </el-table-column>
+            <el-table-column label="标准箱类型" align="center" prop="boxType"   show-overflow-tooltip/>
+            <el-table-column label="标准箱名称" align="center" prop="boxName"   show-overflow-tooltip/>
+            <el-table-column label="标准箱编码" align="center" prop="boxCode" show-overflow-tooltip/>
+            <el-table-column label="标准箱机具数" align="center" prop="devNum" show-overflow-tooltip/> 
+            <el-table-column label="操作" align="center" width="400">
+                <template slot-scope="{ row }">
+                    <el-button size="mini" @click="handleView(row)">
+                        查看
+                    </el-button>
+                    <el-button size="mini" type="primary" @click="handleDetail(row)">
+                        设备明细
+                    </el-button>
+                    <!-- <el-button size="mini" type="primary" @click="handleDownload(row)">
+                        下载
+                    </el-button> -->
+                    <el-button size="mini" type="danger" @click="handleNotice(row)">
+                        删除
+                    </el-button>
+                </template>
+            </el-table-column>
+        </el-table> 
+        <pagination :total="total"
+                    v-show="total > 0"
+                    :page.sync="queryParams.pageNum"
+                    :limit.sync="queryParams.pageSize"
+                    @pagination="getList"
+        />
+        
+        <!-- 标准箱设备明细 -->
+        <el-dialog title="标准箱设备明细" :visible.sync="open" width="1000px" append-to-body>
+            <el-form :model="queryDialogForm" ref="queryDialogForm" size="small" :inline="true"  label-width="80px">
+                <el-form-item prop="keyWord">
+                    <el-input v-model="queryDialogForm.keyWord" placeholder="请输入关键字" clearable maxlength="20"/>
+                </el-form-item>
+                <el-form-item>
+                    <el-button type="primary" icon="el-icon-search"
+                        size="mini" @click="handleQueryDialog"
+                        >查询</el-button>
+                    <el-button icon="el-icon-refresh"
+                        size="mini" @click="resetQueryDialog"
+                        >重置</el-button>
+                </el-form-item>
+            </el-form>
+            <el-table border :data="tableListDialog">
+                <el-table-column label="序号" align="center" type="index">
+                    <template slot-scope="scope">
+                        <span>{{ (queryDialogForm.pageNum - 1) * queryDialogForm.pageSize + scope.$index + 1 }}</span>
+                    </template>
+                </el-table-column>
+                <el-table-column label="物资类型" align="center" prop="maType"   show-overflow-tooltip/>
+                <el-table-column label="规格型号" align="center" prop="typeName"   show-overflow-tooltip/>
+                <el-table-column label="设备编码" align="center" prop="maCode" show-overflow-tooltip/>
+                <el-table-column label="录入人" align="center" prop="updateBy" show-overflow-tooltip/> 
+                <el-table-column label="操作" align="center" width="120">
+                    <template slot-scope="{ row }">  
+                        <el-button size="mini" type="danger">
+                            删除
+                        </el-button>
+                    </template>
+                </el-table-column>
+            </el-table>
+            <pagination :total="totalDialog"
+                    v-show="totalDialog > 0"
+                    :page.sync="queryDialogForm.pageNum"
+                    :limit.sync="queryDialogForm.pageSize"
+                    @pagination="getDialogList"
+            /> 
+        </el-dialog> 
+
+        <!-- 二维码下载对话框 -->
+        <el-dialog title="标准箱二维码" :visible.sync="uploadOpen" width="450px" append-to-body :close-on-click-modal="false">
+            <div style="text-align: center" ref="codeBox">
+                <div class="uploadImg">
+                    <div id="qrcode" class="qrcode" ref="codeItem"></div> 
+                </div>
+                <div class="boxCode">编号：{{ rowObj.boxCode }}</div>
+            </div>
+            <div slot="footer" class="dialog-footer" style="text-align: center">
+                <el-button type="primary" @click="downloadCode">下 载</el-button>
+            </div>
+        </el-dialog>
+    </div>
+</template>
+
+<script>
+// import { getNewBuyBindListApi } from '@/api/purchase/goodsBind'
+import QRCode from 'qrcodejs2';
+import html2canvas from 'html2canvas';
+export default {
+    name: 'Home',
+    dicts: ['purchase_task_status'],
+    data() {
+        return {
+            total: 0, //                总条数
+            loading: false, //           遮罩层
+            showSearch: true, //        显示搜索条件 
+            tableList: [], //            列表数据源
+            queryTime: [], //           日期数据源
+            selectList: [], //          列表选中数据
+            // 列表查询参数
+            queryParams: {
+                pageNum: 1,
+                pageSize: 10,
+                status: '',
+                endTime: '',
+                keyWord: '',
+                startTime: '',
+                // taskStatus: 3,
+            },
+            open:false,
+            queryDialogForm:{
+                keyWord: '',
+                pageNum: 1,
+                pageSize: 10,
+            },
+            totalDialog:0,
+            tableListDialog:[], 
+            uploadOpen: false,
+            rowObj:{},
+            boxCode:""
+        }
+    },
+    created() {
+        this.getList()
+    },
+    methods: {
+        // 日期change
+        onTimeChange(val) {
+            if (val.length > 0) {
+                const [time_1, time_2] = val
+                this.queryParams.startTime = time_1
+                this.queryParams.endTime = time_2
+            } else {
+                this.queryParams.startTime = ''
+                this.queryParams.endTime = ''
+            }
+        },
+        // 获取列表
+        async getList() {
+            // this.loading = true 
+            // const res = await getNewBuyBindListApi(this.queryParams)
+            // this.tableList = res.data.rows
+            this.tableList = [{boxType:"标准箱类型",boxName:"标准箱名称",boxCode:"bzx121334343",devNum:"20"},{boxType:"标准箱类型",boxName:"标准箱名称",boxCode:"bzx121334343",devNum:"20"},{boxType:"标准箱类型",boxName:"标准箱名称",boxCode:"bzx121334343",devNum:"20"},]
+            // this.total = res.data.total
+            // this.loading = false
+        },
+        // 搜索按钮
+        handleQuery() {
+            this.queryParams.pageNum = 1
+            this.getList()
+        },
+        // 重置按钮
+        resetQuery() {
+            this.queryTime = []
+            this.resetForm('queryForm')
+            this.queryParams.pageNum = 1
+            this.queryParams.endTime = ''
+            this.queryParams.pageSize = 10
+            this.queryParams.startTime = ''
+            this.getList()
+        }, 
+        handleAdd(){
+            console.log('新增')
+        }, 
+        //二维码查看
+        handleView(row) { 
+            this.rowObj = row
+            this.uploadOpen = true 
+            this.boxCode = row.boxCode
+            let str = row.boxCode
+            this.$nextTick(() => { 
+                this.$refs.codeItem.innerHTML = ''
+                var qrcode = new QRCode(this.$refs.codeItem, {
+                    text: str, //二维码内容
+                    width: 256,
+                    height: 256,
+                    colorDark: '#000000',
+                    colorLight: '#ffffff',
+                    correctLevel: QRCode.CorrectLevel.H,
+                }) 
+            }, 500)
+        },
+        //二维码下载
+        downloadCode(e) {
+            if (document.getElementById('qrcode').childNodes[0]) {
+                let element = this.$refs.codeBox
+                html2canvas(element).then((canvas) => {
+                    // 将canvas转换为图片URL
+                    const image = canvas.toDataURL('image/png')
+                    const alink = document.createElement('a')
+                    alink.href = image
+                    alink.download = this.boxCode
+                    alink.click()
+                })
+            }
+        },
+        // 设备明细
+        handleDetail(row) {
+            this.open=true;
+            this.resetQueryDialog()
+        },
+        // 获取列表数据
+        async getDialogList() {  
+            // const res = await getNewBuyBindListApi(this.queryDialogForm)
+            // this.tableListDialog = res.data.rows
+            this.tableListDialog = [{maType:"抱杆",typeName:"10t",maCode:"bg121334343",updateBy:"张三"},{maType:"抱杆",typeName:"10t",maCode:"bg121334343",updateBy:"张三"},{maType:"抱杆",typeName:"10t",maCode:"bg121334343",updateBy:"张三"},{maType:"抱杆",typeName:"10t",maCode:"bg121334343",updateBy:"张三"}]
+            // this.totalDialog = res.data.total 
+            this.totalDialog = 3
+        },
+        //弹窗搜索
+        handleQueryDialog() {
+            this.queryDialogForm.pageNum = 1
+            this.getDialogList()
+        },
+         //弹窗搜索重置
+        resetQueryDialog() { 
+            this.resetForm('queryDialogForm')
+            this.queryDialogForm.pageNum = 1 
+            this.getDialogList()
+        },
+
+        // 删除
+        handleNotice(row) {
+            this.$confirm('是否确定删除', '提示', {
+                confirmButtonText: '确定',
+                cancelButtonText: '取消',
+                type: 'warning',
+            }).then(() => {}).catch(() => {})
+        }, 
+        // 导出数据
+        handleExport() {
+            console.log('数据导出')
+            // this.download(
+            //     "/material/purchase_check_info/export",
+            //     { ...this.queryParams},
+            //     `新购到货入库_${new Date().getTime()}.xlsx`
+            // );
+        },
+        // 列表复选框
+        handleSelectionChange(list) {
+            this.selectList = list
+        },
+    },
+}
+</script>
+<style lang="scss" scoped>
+// .qrcode{
+//   height: 300px;
+//   width: 300px;
+// }
+.uploadImg {
+    padding-top: 20px;
+    display: flex;
+    align-items: center;
+    justify-content: center;
+}
+.boxCode {
+    margin-top: 10px;
+    padding-bottom: 20px;
+    font-size: 18px;
+}
+::v-deep.el-table .fixed-width .el-button--mini {
+    width: 60px !important;
+    margin-bottom: 10px;
+}
+</style>
\ No newline at end of file