新购绑定

package.json

@@ -43,13 +43,16 @@
     "crypto-js": "^4.2.0",
     "echarts": "5.4.0",
     "element-ui": "2.15.14",
-    "file-saver": "2.0.5",
+    "file-saver": "^2.0.5",
     "fuse.js": "6.4.3",
     "highlight.js": "9.18.5",
+    "html2canvas": "^1.4.1",
     "js-beautify": "1.13.0",
     "js-cookie": "3.0.1",
     "jsencrypt": "3.0.0-rc.1",
+    "jszip": "^3.10.1",
     "nprogress": "0.2.0",
+    "qrcodejs2": "^0.0.2",
     "quill": "1.3.7",
     "screenfull": "5.0.2",
     "sm-crypto": "^0.3.13",

src/api/baseGround/newBuy.js

@@ -17,6 +17,15 @@ export function getPurchaseCheckInfo(id) {
   })
 }
 
+// 保存--新增
+export function addPurchaseCheckInfo(data) {
+  return request({
+      url: '/material/purchase_check_info',
+      method: 'post',
+      data: data,
+  })
+}
+
 //人员 详情
 export function getNoticePeople(query) {
   return request({
@@ -34,6 +43,8 @@ export function delPeople(ids) {
   })
 }
 
+
+
 // 人员管理--新增
 export function addNoticeUser(data) {
   return request({
@@ -88,6 +99,8 @@ export function queryKeeperNameApi(query) {
   })
 }
 
+
+
 // 仓库管理--删除
 export function delHouse(id) {
   return request({

src/api/baseGround/newBuyBind.js

@@ -18,6 +18,15 @@ export function getListDetail(query) {
   })
 }
 
+//任务 详情
+export function bindAllData(data) {
+  return request({
+      url: '/material/purchase/bind/bind',
+      method: 'post',
+      data: data,
+  })
+}
+
 //二级页面 详情
 export function getListDetailById(query) {
   return request({
@@ -27,6 +36,18 @@ export function getListDetailById(query) {
   })
 }
 
+// 导出
+export function exportNewBuy(data) {
+  return request({
+      url: '/material/purchase/bind/downloadQrCode',
+      method: 'post',
+      responseType: 'blob',
+      data: data
+  })
+}
+
+
+
 //人员 详情
 export function getNoticePeople(query) {
   return request({

src/main.js

@@ -38,6 +38,7 @@ import VueMeta from 'vue-meta'
 // 字典数据组件
 import DictData from '@/components/DictData'
 
+import global_ from '@/utils/globalUrl'
 // 全局方法挂载
 Vue.prototype.getDicts = getDicts
 Vue.prototype.getConfigKey = getConfigKey
@@ -48,7 +49,7 @@ Vue.prototype.selectDictLabel = selectDictLabel
 Vue.prototype.selectDictLabels = selectDictLabels
 Vue.prototype.download = download
 Vue.prototype.handleTree = handleTree
-
+Vue.prototype.globalUrl = global_
 // 全局组件挂载
 Vue.component('DictTag', DictTag)
 Vue.component('Pagination', Pagination)

src/permission.js

@@ -8,7 +8,10 @@ import { isRelogin } from '@/utils/request'
 
 NProgress.configure({ showSpinner: false })
 
-const whiteList = ['/login', '/register']
+const whiteList = [
+  '/login', '/register',
+  '/qrCode/qrCodePage',
+]
 
 router.beforeEach((to, from, next) => {
   NProgress.start()

src/router/index.js

@@ -74,6 +74,11 @@ export const constantRoutes = [
       }
     ]
   },
+  {
+    path: '/qrCode/qrCodePage',
+    component: () => import('@/views/qrCode/qrCode'),
+    hidden: true
+  },
   {
     path: '/user',
     component: Layout,

src/utils/chapter.js

@@ -0,0 +1,76 @@
+let chapter = (text, companyName) => {
+    let canvas = document.getElementById("canvas");
+    let context = canvas.getContext("2d");
+  
+    //let text = "XXX专用章";
+    //let companyName = "XXX科技股份有限公司";
+  
+    // 绘制印章边框
+    let width = canvas.width / 2;
+    let height = canvas.height / 2;
+    context.lineWidth = 3;
+    context.strokeStyle = "#f00";
+    context.beginPath();
+    context.arc(width, height, 80, 0, Math.PI * 2); //宽、高、半径
+    context.stroke();
+  
+    //画五角星
+    create5star(context, width, height, 20, "#f00", 0);
+  
+    // 绘制印章名称
+    context.font = "14px 宋体";
+    context.textBaseline = "middle"; //设置文本的垂直对齐方式
+    context.textAlign = "center"; //设置文本的水平对对齐方式
+    context.lineWidth = 1;
+    context.strokeStyle = "#f00";
+    context.strokeText(text, width, height + 50);
+  
+    // 绘制印章单位
+    context.translate(width, height); // 平移到此位置,
+    context.font = "14px 宋体";
+    let count = companyName.length; // 字数
+    let angle = (4 * Math.PI) / (3 * (count - 1)); // 字间角度
+    let chars = companyName.split("");
+    let c;
+    for (let i = 0; i < count; i++) {
+      c = chars[i]; // 需要绘制的字符
+      if (i == 0) {
+        context.rotate((5 * Math.PI) / 6);
+      } else {
+        context.rotate(angle);
+      }
+  
+      context.save();
+      context.translate(65, 0); // 平移到此位置,此时字和x轴垂直，公司名称和最外圈的距离
+      context.rotate(Math.PI / 2); // 旋转90度,让字平行于x轴
+      context.strokeText(c, 0, 0); // 此点为字的中心点
+      context.restore();
+    }
+  
+    //绘制五角星
+    function create5star(context, sx, sy, radius, color, rotato) {
+      context.save();
+      context.fillStyle = color;
+      context.translate(sx, sy); //移动坐标原点
+      context.rotate(Math.PI + rotato); //旋转
+      context.beginPath(); //创建路径
+      // let x = Math.sin(0);
+      // let y = Math.cos(0);
+      let dig = (Math.PI / 5) * 4;
+      for (let i = 0; i < 5; i++) {
+        //画五角星的五条边
+        let x = Math.sin(i * dig);
+        let y = Math.cos(i * dig);
+        context.lineTo(x * radius, y * radius);
+      }
+      context.closePath();
+      context.stroke();
+      context.fill();
+      context.restore();
+    }
+  };
+  
+  export default chapter;
+  
+  
+  

src/utils/globalUrl.js

@@ -0,0 +1,19 @@
+// const qrUrl = 'http://192.168.0.14:21624/qrCode/qrCodePage?qrCode='; //测试
+// const qrUrl = 'http://112.29.103.165:21626/qrCode/qrCodePage?qrCode='; //重庆
+// const qrUrl = 'http://112.29.103.165:21624/qrCode/qrCodePage?qrCode='; //宁夏
+// const qrUrl = 'https://z.csgmall.com.cn/gl/qrCode/qrCodePage?qrCode='; //南网
+const qrUrl = 'http://192.168.0.110:80/qrCode/qrCodePage?qrCode='; //本地
+// const qrUrl = process.env.NODE_ENV === 'production' ? 'http://192.168.0.14:18866/qrCode/qrCodePage?qrCode=' : 'http://192.168.0.14:21624/qrCode/qrCodePage?qrCode='
+// let qrUrl = ''
+const origin = window.location.origin
+
+// qrUrl = origin + '/qrCode/qrCodePage?qrCode='
+// if (origin == 'http://112.29.103.165:21626') {
+//     qrUrl = 'http://112.29.103.165:21626/qrCode/qrCodePage?qrCode='
+// } else {
+//     qrUrl = 'http://192.168.0.14:18866/qrCode/qrCodePage?qrCode='
+// }
+
+export default {
+    qrUrl,
+}

src/views/material/newBuy/goodsArrived/component/addTools.vue

@@ -5,6 +5,7 @@
             :model="maForm"
             ref="maForm"
             size="small"
+            :rules="rules"
             :inline="true"
             label-width="120px"
         >
@@ -18,35 +19,21 @@
                     placeholder="请选择到货日期"
                 ></el-date-picker>
             </el-form-item>
-            <el-form-item label="物资厂家" prop="typeId">
+
-                <el-select
+            <el-form-item label="出厂日期" prop="productionTime">
-                    v-model="queryParams.typeId"
-                    placeholder="请选择物资厂家"
-                    clearable
-                    filterable
-                    style="width: 240px"
-                >
-                    <el-option
-                        v-for="typeItem in typesList"
-                        :key="typeItem.typeId"
-                        :label="typeItem.typeName"
-                        :value="typeItem.typeId"
-                    />
-                </el-select>
-            </el-form-item>
-            <el-form-item label="出厂日期" prop="arrivalTime">
                 <el-date-picker
-                    v-model="maForm.arrivalTime"
+                    v-model="maForm.productionTime"
                     style="width: 240px"
                     value-format="yyyy-MM-dd"
                     :picker-options="pickerOptions"
                     type="date"
                     placeholder="请选择出厂日期"
+                     @change="productionTimeChange"
                 ></el-date-picker>
             </el-form-item>
-            <el-form-item label="税率" prop="keyWord">
+            <el-form-item label="税率" prop="taxRate">
                 <el-input
-                    v-model="queryParams.keyWord"
+                    v-model="maForm.taxRate"
                     placeholder="请输入税率"
                     clearable
                     maxlength="50"
@@ -55,7 +42,7 @@
                 />
             </el-form-item>
 
-            <el-form-item label="类型规格" prop="typeId">
+            <el-form-item label="类型规格" prop="deviceType">
                 <el-cascader
                     :key="propsKey"
                     v-model="deviceType"
@@ -163,12 +150,8 @@
                         filterable
                         clearable
                     >
-                        <el-option
+            <el-option label="是" value="0"></el-option>
-                            v-for="item in supplierList"
+            <el-option label="否" value="1"></el-option>
-                            :key="item.supplierId"
-                            :label="item.supplier"
-                            :value="item.supplierId"
-                        />
                     </el-select>
                 </template>
             </el-table-column>
@@ -354,6 +337,7 @@ export default {
             pageNum: 1,
             pageSize: 10,
             id:undefined,
+            typesList:[],
             },
             // 数据范围选项
             dataScopeOptions: [
@@ -403,24 +387,17 @@ export default {
             },
             // 表单校验
             rules: {
-                purchaseNumber: [
+                // deviceType: [
-                    {
+                //     {
-                        required: true,
+                //         required: true,
-                        message: '请输入线下采购单编号',
+                //         message: '请选择类型规格',
-                        trigger: 'blur',
+                //         trigger: 'blur',
-                    },
+                //     },
-                ],
+                // ],
-                purchaseTime: [
-                    {
-                        required: true,
-                        message: '采购日期不能为空',
-                        trigger: 'blur',
-                    },
-                ],
                 arrivalTime: [
                     {
                         required: true,
-                        message: '到货日期不能为空',
+                        message: '请选择到货日期',
                         trigger: 'blur',
                     },
                 ],
@@ -480,45 +457,6 @@ export default {
     },
     methods: {
 
-        /** 机具类型 */
-        equipmentType() {
-            console.log('11111111')
-            equipmentTypeTree().then((response) => {
-                this.equipmentTypeList = response.data
-                console.log('22221111',this.equipmentTypeList)
-                this.equipmentTypeList.forEach((item, index) => {
-                    if (item.children && item.children.length > 0) {
-                        item.children.forEach((item2, index2) => {
-                            if (item2.children && item2.children.length > 0) {
-                                item2.children.forEach((item3) => {
-                                    if (
-                                        item3.children &&
-                                        item3.children.length > 0
-                                    ) {
-                                        item3.children.forEach((item4) => {
-                                            item4.machineTypeName =
-                                                item3.typeName
-                                            item4.specificationType =
-                                                item4.typeName
-                                            this.$set(item4, 'purchasePrice', 0)
-                                            this.$set(item4, 'purchaseNum', 1)
-                                        })
-                                    }
-                                })
-                            }
-                        })
-                    }
-                })
-
-                let selectList = []
-                this.equipmentList.forEach((e) => {
-                    selectList.push(
-                        this.getParentsById(this.equipmentTypeList, e.typeId),
-                    )
-                })
-                this.deviceType = selectList
-            })
-        },
 
         getParentsById(list, id) {
             for (let i in list) {
@@ -537,82 +475,6 @@ export default {
             }
         },
 
-        /** 新增按钮操作 */
-        handleSave() {
-            if (this.equipmentList.length > 0) {
-                this.$refs['maForm'].validate((valid) => {
-                    if (valid) {
-                        // console.log(this.maForm,'maForm')
-                        // console.log(this.equipmentList,'equipmentList')
-                        this.equipmentList.forEach((item) => {
-                            if (item.purchaseNum == '' || !item.purchaseNum) {
-                                isEmpty = false
-                            }
-                        })
-
-                        this.maForm.taskId = this.taskId
-                        this.maForm.checkDetailsList = this.equipmentList
-                        // console.log(this.maForm)
-                            if (this.equipmentList.length > 0) {
-                                this.$modal
-                                    .confirm('是否确认保存当前页面')
-                                    .then(function () {})
-                                    .then(() => {
-                                        if (this.isEdit) {
-                                            console.log('编辑')
-                                            this.loading = true
-                                            updatePurchaseCheckInfo(
-                                                this.maForm,
-                                            ).then((response) => {
-                                                if (response.code == 200) {
-                                                    this.$modal.msgSuccess(
-                                                        '编辑成功',
-                                                    )
-                                                    // this.$tab.closeOpenPage({
-                                                    //     path: '/store/newBuy/newDevicesList',
-                                                    // })
-
-                                                    this.$emit(
-                                                        'addToolsSuccess',
-                                                    )
-                                                }
-                                                this.loading = false
-                                            })
-                                        } else if (!this.isEdit) {
-                                            console.log('新增')
-                                            this.loading = true
-                                            addPurchaseCheckInfo(
-                                                this.maForm,
-                                            ).then((response) => {
-                                                if (response.code == 200) {
-                                                    this.$modal.msgSuccess(
-                                                        '新增成功',
-                                                    )
-                                                    // this.$tab.closeOpenPage({
-                                                    //     path: '/store/newBuy/newDevicesList',
-                                                    // })
-
-                                                    this.$emit(
-                                                        'addToolsSuccess',
-                                                    )
-                                                }
-                                                this.loading = false
-                                            })
-                                        }
-                                    })
-                                    .catch(() => {})
-                            } else {
-                                this.$modal.msgError(
-                                    '请先选择并添加机具类型！！！',
-                                )
-                            }
-
-                    }
-                })
-            } else {
-                this.$modal.msgError('请先添加机具类型')
-            }
-        },
         /** 查询用户列表--采购员 */
         getUserList() {
             getUserByRoleList({ roleIds: [152] }).then((response) => {
@@ -639,7 +501,7 @@ export default {
                                         item3.children.length > 0
                                     ) {
                                         item3.children.forEach((item4) => {
-                                            item4.machineTypeName =
+                                            item4.maTypeName =
                                                 item3.typeName
                                             item4.specificationType =
                                                 item4.typeName
@@ -807,23 +669,14 @@ export default {
 
         /** 新增按钮操作 */
         handleSave() {
+            console.log(this.equipmentList)
             if (this.equipmentList.length > 0) {
                 this.$refs['maForm'].validate((valid) => {
                     if (valid) {
-                        // console.log(this.maForm,'maForm')
-                        // console.log(this.equipmentList,'equipmentList')
-                        let isEmpty = true
-                        this.equipmentList.forEach((item) => {
-                            if (item.purchaseNum == '' || !item.purchaseNum) {
-                                isEmpty = false
-                            }
-                        })
-                        // console.log(this.taskId)
 
                         this.maForm.taskId = this.taskId
                         this.maForm.checkDetailsList = this.equipmentList
                         // console.log(this.maForm)
-                        if (isEmpty) {
                             if (this.equipmentList.length > 0) {
                                 this.$modal
                                     .confirm('是否确认保存当前页面')
@@ -853,7 +706,7 @@ export default {
                                             console.log('新增')
                                             this.loading = true
                                             addPurchaseCheckInfo(
-                                                this.maForm,
+                                            //    {purchaseCheckDetailsList: this.maForm.checkDetailsList,purchaseCheckInfo:}
                                             ).then((response) => {
                                                 if (response.code == 200) {
                                                     this.$modal.msgSuccess(
@@ -877,19 +730,12 @@ export default {
                                     '请先选择并添加机具类型！！！',
                                 )
                             }
-                        } else {
+                        
-                            this.$modal.msgError('请填写采购数量！！！')
-                        }
                     }
                 })
-            } else {
-                this.$modal.msgError('请先添加机具类型')
             }
         },
-        jumpList() {
+
-            const obj = { path: '/store/newBuy/newDevicesList' }
-            this.$tab.closeOpenPage(obj)
-        },
         /** 修改按钮操作 */
         handleUpdate(row) {
             // this.reset();
@@ -940,6 +786,11 @@ export default {
             //   ...this.queryParams
             // }, `role_${new Date().getTime()}.xlsx`)
         },
+        productionTimeChange(val){
+            this.equipmentList.forEach(item=>{
+                item.productionTime=val
+            })
+        },
         deviceTypeChange(val) {
             const deviceTypeList =
                 this.$refs.deviceTypeCascader.getCheckedNodes()

src/views/material/newBuy/goodsArrived/component/home.vue

@@ -395,8 +395,8 @@
       <el-dialog :title="title" :visible.sync="showPeople" width="800px" append-to-body @close="cancel">
              <el-row :gutter="24">  
              <el-col :span="20">
-              <el-form :model="form" ref="form" size="small" :inline="true"  label-width="120px">
+              <el-form :model="form" ref="form" size="small" :inline="true" >
-                 <el-form-item label="通知内容:" prop="remark">
+                 <el-form-item label="通知内容:" prop="remark" label-width="120px">
                     <el-input
                         v-model="form.remark"
                         type="textarea"

src/views/material/newBuy/goodsArrived/component/queryTools.vue

@@ -37,7 +37,7 @@
             <el-table-column
                 label="单位"
                 align="center"
-                prop="manageType"
+                prop="unitName"
                 :show-overflow-tooltip="true"
             >
             </el-table-column>

src/views/material/newBuy/goodsBind/component/bindQrTools.vue

@@ -10,7 +10,7 @@
     >
       <el-form-item label="类型规格" prop="keyWord">
         <el-input
-                    v-model="queryParams.keyWord"
+          v-model="maForm.keyWord"
           placeholder="请输入类型规格"
           clearable
           maxlength="50"
@@ -21,7 +21,7 @@
 
       <el-form-item label="机具厂家" prop="typeId">
         <el-select
-                    v-model="queryParams.typeId"
+          v-model="maForm.typeId"
           placeholder="请选择机具厂家"
           clearable
           filterable
@@ -46,8 +46,16 @@
         ></el-date-picker>
       </el-form-item>
       <el-form-item>
-          <el-button type="primary" icon="el-icon-search" size="mini" @click="handleQuery">查询</el-button>
+        <el-button
-          <el-button icon="el-icon-refresh" size="mini" @click="resetQuery">重置</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-form-item>
     </el-form>
     <el-row :gutter="10" class="mb8">
@@ -69,12 +77,7 @@
       @selection-change="handleSelectionChange"
     >
       <el-table-column type="selection" width="55" align="center" />
-             <el-table-column
+      <el-table-column align="center" label="序号" type="index" width="55" />
-                align="center"
-                label="序号"
-                type="index"
-                width="55"
-            />
       <el-table-column
         align="center"
         label="物资名称"
@@ -107,11 +110,7 @@
         show-overflow-tooltip
       />
 
-            <el-table-column
+      <el-table-column label="相关配套资料" align="center" prop="checkUrlName">
-                label="相关配套资料"
-                align="center"
-                prop="checkUrlName"
-            >
         <!-- <template slot-scope="scope">
             <div @click="openGt(scope.row)" style="color: #02a7f0; cursor: pointer">
                 {{ '报告管理' }}
@@ -127,26 +126,21 @@
       />
 
       <el-table-column label="操作" align="center" width="300">
-                <template slot-scope="scope" >
+        <template slot-scope="scope">
           <el-button
             size="mini"
             type="primary"
             icon="el-icon-zoom-in"
             @click="handleView(scope.row)"
+           
             >查看</el-button
           >
           <el-button
             size="mini"
             type="primary"
             icon="el-icon-zoom-in"
-                        @click="handleBind(scope.row)"
+            @click="handleUpload(scope.row)"
-                        >绑定</el-button
+            v-if="scope.row.statusName != '待入库'"
-                    >
-                    <el-button
-                        size="mini"
-                        type="success"
-                        icon="success"
-                        @click="handleDonload(scope.row)"
             >下载</el-button
           >
           <el-button
@@ -154,6 +148,7 @@
             type="danger"
             icon="el-icon-close"
             @click="handleBack(scope.row)"
+            v-if="scope.row.statusName != '待入库'"
             >驳回</el-button
           >
         </template>
@@ -165,24 +160,90 @@
       :total="total"
       :page.sync="maForm.pageNum"
       :limit.sync="maForm.pageSize"
-            @pagination="getListPeople"
+      @pagination="getList"
     />
 
     <!-- 新购查看弹窗 -->
-      <el-dialog :title="titleBind" :visible.sync="showBind" width="800px" append-to-body >
+    <el-dialog
-          <el-form :model="queryBind" ref="queryFormBind" size="small" :inline="true" v-show="showSearch" label-width="68px">
+      :title="titleBind"
+      :visible.sync="showBind"
+      width="1000px"
+      append-to-body
+    >
+      <el-form
+        :model="queryBind"
+        ref="queryFormBind"
+        size="small"
+        :inline="true"
+        v-show="showSearch"
+        label-width="68px"
+      >
       </el-form>
-      <el-table v-loading="loadingTwo" :data="getListPeople" width="600px" height = "600px" >
+      <el-table
-        <el-table-column type="selection" width="55" align="center" :reserve-selection="true" />
+        v-loading="loadingTwo"
-        <el-table-column label="序号" align="center" prop="userName" sortable/>
+        :data="getListQr"
-        <el-table-column label="类型名称" align="center" prop="newdeptId" sortable/>
+        width="800px"
-        <el-table-column label="规格型号" align="center" prop="userRoleName" sortable/>
+        height="600px"
-        <el-table-column label="设备编码" align="center" prop="telphone" sortable/>
+        @selection-change="handleSelectionChangeQr"
-        <el-table-column label="绑定人员" align="center" prop="telphone" sortable/>
+      >
-        <el-table-column label="绑定时间" align="center" prop="telphone" sortable/>
+        <!-- <el-table-column label="序号" align="center" prop="userName" sortable /> -->
-        <el-table-column label="出厂编号" align="center" prop="telphone" sortable/>
+        <el-table-column
-        <el-table-column label="出厂时间" align="center" prop="telphone" sortable/>
+          label="类型名称"
+          align="center"
+          prop="materialName"
+          sortable
+        />
+        <el-table-column
+          label="规格型号"
+          align="center"
+          prop="materialModel"
+          sortable
+        />
+        <el-table-column
+          label="设备编码"
+          align="center"
+          prop="maCode"
+          sortable
+        />
+        <el-table-column
+          label="绑定人员"
+          align="center"
+          prop="createBy"
+          sortable
+        />
+        <el-table-column
+          label="绑定时间"
+          align="center"
+          prop="createTime"
+          sortable
+        />
+        <el-table-column
+          label="出厂编号"
+          align="center"
+          prop="outFacCode"
+          sortable
+        />
+        <el-table-column
+          label="出厂时间"
+          align="center"
+          prop="productDate"
+          sortable
+        />
+        <el-table-column
+          label="二维码编码"
+          align="center"
+          prop="qrCode"
 
+        >
+        <template slot-scope="scope">
+            <span
+                style="color: blue; cursor: pointer"
+                @click="labelUploadCode(scope.row)"
+            >
+                {{ scope.row.qrCode }}</span
+            >
+        </template>
+         </el-table-column>
       </el-table>
 
       <pagination
@@ -190,25 +251,33 @@
         :total="total"
         :page.sync="queryBind.pageNum"
         :limit.sync="queryBind.pageSize"
-            @pagination="getListPeople"
+        @pagination="getListQr"
       />
     </el-dialog>
 
-
     <!-- 绑定查看弹窗 -->
-      <el-dialog :title="titleBind" :visible.sync="showBind" width="800px" append-to-body >
+    <el-dialog
-          <el-form :model="queryBindTwo" ref="queryFormBind" size="small" :inline="true" v-show="showSearch" label-width="68px">
+      :title="titleTwo"
-                        <el-form-item
+      :visible.sync="showTwo"
-                            label="前缀"
+      width="1100px"
-                            label-width="50px"
+      append-to-body
-                            prop="codePrefix"
+      @close="cancel"
     >
+      <el-form
+        :model="queryBindTwo"
+        ref="queryFormBind"
+        :rules="queryBindTwoRules"
+        size="small"
+        :inline="true"
+        v-show="showSearch"
+        label-width="68px"
+      >
+        <el-form-item label="前缀" label-width="50px" prop="codePrefix">
           <el-input
             v-model="queryBindTwo.codePrefix"
             placeholder="请输入前缀"
             clearable
             maxlength="20"
-                               
           />
         </el-form-item>
 
@@ -222,28 +291,52 @@
             clearable
             placeholder="请输入后缀起始值"
             maxlength="99999999"
-                               
           />
         </el-form-item>
         <el-form-item>
-                        <el-button type="primary"  size="mini" @click="handleQuery">填充</el-button>
+          <el-button type="primary" size="mini" @click="handleAdd"
-                        <el-button type="primary" size="mini" @click="handleQuery">绑定</el-button>
+            >填充</el-button
+          >
+          <el-button type="primary" size="mini" @click="handleBindTwo"
+            >绑定</el-button
+          >
         </el-form-item>
       </el-form>
-      <el-table v-loading="loadingTwo" :data="getListBind" width="600px" height = "600px" >
+      <el-table
-        <el-table-column label="序号" align="center" prop="userName" />
+        v-loading="loadingTwo"
-        <el-table-column label="设备名称" align="center" prop="newdeptId" />
+        :data="codeTableList"
-        <el-table-column label="规格型号" align="center" prop="userRoleName" />
+        width="1000px"
-        <el-table-column label="设备编码" align="center" prop="telphone" />
+        height="600px"
-        <el-table-column label="出厂编号" align="center" prop="telphone" />
+      >
-        <el-table-column label="出厂时间" align="center" prop="telphone" />
+        <el-table-column label="设备名称" align="center" prop="materialName" />
-        <el-table-column label="操作" align="center" width="180">
+        <el-table-column label="规格型号" align="center" prop="materialModel" />
-                        <template>
+        <el-table-column label="设备编码" align="center" prop="maCode" />
+        <el-table-column label="出厂编号" align="center" prop="outFacCode">
+          <template v-slot:default="{ row }">
+            <el-input
+              v-model="row.outFacCode"
+              placeholder="请输入出厂编码"
+              maxlength="30"
+            ></el-input>
+          </template>
+        </el-table-column>
+        <el-table-column label="出厂时间" align="center" prop="productDate">
+          <template v-slot:default="{ row }">
+            <el-date-picker
+              v-model="row.productDate"
+              type="date"
+              placeholder="请输入检验时间"
+              style="width: 160px"
+            ></el-date-picker>
+          </template>
+        </el-table-column>
+        <el-table-column label="操作" align="center" width="140">
+          <template slot-scope="scope">
             <el-button
               size="mini"
-                                type="text"
+              type="danger"
-                                icon="el-icon-delete"
+              icon="el-icon-remove"
-                                @click="handleDelete(scope.row)"
+              @click="handleRemove(scope.$index)"
             >
               移除
             </el-button>
@@ -251,6 +344,50 @@
         </el-table-column>
       </el-table>
     </el-dialog>
+
+        <!-- 标签下载对话框 -->
+        <el-dialog
+            :title="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>
+                    <!--        <img src="" alt="">-->
+                </div>
+                <div class="maCode">设备编号：{{ rowObj.maCode }}</div>
+            </div>
+            <div slot="footer" class="dialog-footer" style="text-align: center">
+                <el-button type="primary" @click="downloadCode"
+                    >下 载</el-button
+                >
+            </div>
+        </el-dialog>
+        <div style="background-color: transparent" ref="qrCodeAll">
+            <div
+                id="qrCode"
+                v-for="(codeItem, codeIndex) in checkboxModel"
+                :key="codeIndex"
+                class="captureId"
+                v-show="codeId"
+                ref="QrcodePage"
+                style="
+                    z-index: -1111111;
+                    position: absolute;
+                    top: 10px;
+                    left: -99999;
+                    width: 450px;
+                    height: 475px;
+                    background-size: cover;
+                "
+            ></div>
+            <!-- <center style="text-align: center; font-size: 1.5625rem">
+        {{ codeVal }}
+      </center> -->
+        </div>
     </div>
 
     
@@ -263,42 +400,44 @@ import {
   getPurchaseCheckInfo,
   equipmentTypeTree,
   addPurchaseCheckInfo,
-//     getPurchaseCheckInfo,
+  //     getPurchaseCheckInfo,
   updatePurchaseCheckInfo,
-} from '@/api/baseGround/newBuy'
+} from "@/api/baseGround/newBuy";
+
+import { getListDetail, getListDetailById,bindAllData,exportNewBuy } from "@/api/baseGround/newBuyBind";
+import { downloadFile } from '@/utils/download'
+import QRCode from 'qrcodejs2'
+import html2canvas from 'html2canvas'
+import JSZip from 'jszip'
+import FileSaver from 'file-saver'
 // import { getUserByRoleList } from '@/api/system/user'
 // import { equipmentTypeTree, supplierInfoList } from '@/api/store/tools'
 // import Treeselect from '@riophae/vue-treeselect'
 // import '@riophae/vue-treeselect/dist/vue-treeselect.css'
 // import HoldingpoleDialog from '@/components/HoldingpoleDialog/index.vue'
 
-// import {} from '@/api/store/newBuy'
+// import {} from '@/api/store/newBuy
 
 export default {
-    name: 'BindTools',
+    name: 'BindQrTools',
-    dicts: ['sys_normal_disable'],
+    // dicts: ['sys_normal_disable'],
     // components: { Treeselect, HoldingpoleDialog },
     props: {
-        isEdit: {
-            type: Boolean,
-            default: () => {
-                return false
-            },
-        },
         editTaskId: {
         type: [String, Number],
         default: () => {
-                return ''
+            return "";
         },
         },
     },
     data() {
     return {
-            taskId: '',
+      taskId: "",
       // isEdit: false,
       // 遮罩层
       loading: false,
       loadingTwo: false,
+      typesList:[],
       // 选中数组
       ids: [],
       // 非单个禁用
@@ -309,54 +448,84 @@ export default {
       showSearch: true,
       // 总条数
       total: 0,
+      num: 0,
       //机具类型
       equipmentTypeList: [],
       // 角色表格数据
       equipmentList: [],
+      getListQr:[],
       // 弹出层标题
-            title: '',
+      title: "",
-            titleBind: '',
+      titleBind: "",
-            getListBind: [],
+      titleTwo: "",
-            getListPeople: [],
-            typesList:[],
       // 是否显示弹出层
       open: false,
       showBind: false,
+      showTwo: false,
       // 日期范围
       dateRange: [],
-            queryBind: 
+      queryBind: {
-            {
+        pageNum: 1,
-            oageNum: 1,
         pageSize: 10,
       },
-            queryBindTwo: 
+      queryBindTwo: {
-            {
         codePrefix: undefined,
         codeSuffixStart: undefined,
       },
       // 查询参数
       queryParams: {
         equipmentId: undefined,
-                productionTime: '',
+        productionTime: "",
-                supplierId: '',
+        supplierId: "",
       },
       maForm: {
         pageNum: 1,
         pageSize: 10,
+        taskId:undefined,
       },
       // 表单参数
       form: {},
-        }
+      materialName: undefined,
+      materialModel: undefined,
+      codeTableList: [],
+      codeTableListTemp: [],
+      productDate: undefined,
+      taskIdTemp:undefined,
+      typeIdTemp:undefined,
+      rowObj:{},
+      labelmaCode: '',
+      uploadOpen: false,
+      qrUrl: this.globalUrl.qrUrl,
+      checkboxModel: [], // 列表复选框
+      qrcodeArr:[],
+      codeId: true,
+      queryBindTwoRules: {
+        codePrefix: [
+          { required: true, message: "请输入前缀", trigger: "blur" },
+        ],
+        codeSuffixStart: [
+          {
+            required: true,
+            message: "请输入后缀起始值",
+            trigger: "blur",
+          },
+          {
+            pattern: /^[1-9][0-9]*$/,
+            message: "请输入大于0且不能以0开头的正整数",
+          },
+        ],
+      },
+    };
   },
   computed: {
     pickerOptions() {
       return {
         disabledDate(time) {
-                    const currentDate = new Date()
+          const currentDate = new Date();
-                    currentDate.setHours(0, 0, 0, 0)
+          currentDate.setHours(0, 0, 0, 0);
-                    return time.getTime() < currentDate.getTime()
+          return time.getTime() < currentDate.getTime();
         },
-            }
+      };
     },
   },
   watch: {
@@ -367,77 +536,285 @@ export default {
     // },
   },
   mounted() {
-
+    this.taskId = this.editTaskId;
-        if (this.isEdit) {
+    this.maForm.taskId = this.taskId;
-            console.log('isEdit',this.isEdit)
+    this.getTaskInfo();
-            this.id = this.editTaskId
-            this.getTaskInfo()
-        }
-
     // this.getUserList()
     // this.getList();
     // this.supplierInfoList()
   },
   methods: {
-
+            handleSelectionChangeQr(selection){
-        handleQuery(){
+            this.checkboxModel = selection
-
+            // this.checkboxModel.forEach((item) => {
+            //     item.exportUrl = this.qrUrl + item.qrCode
+            // })
+            this.single = selection.length != 1
+            this.multiple = !selection.length
             },
 
-        handleDelete(row){
+            async handleDownloadQr() {
+            this.codeId = true;
+            console.log('checkboxModel', this.checkboxModel)
+            if(this.checkboxModel.length>0){
+                const msg = this.$modal.loading('批量生成中，请稍候...')
+                let that = this
+                try {
+                    let captureId = document.getElementsByClassName('captureId')
+                    for (let i = 0; i < this.checkboxModel.length; i++) {
+                        const element = this.checkboxModel[i]
+                        captureId[i].innerHTML = ''
+                        let shareContent = that.$refs['QrcodePage'][i],
+                            width = shareContent.offsetWidth,
+                            height = shareContent.offsetHeight
+                        const maCodeText = document.createElement('div')
+                        maCodeText.innerHTML = '编码:' + element
+                        maCodeText.style =
+                            'font-size=18px; width:100%;text-align:center;margin:10px;'
+                        shareContent.appendChild(maCodeText)
+                        console.log(element)
+                        new QRCode(captureId[i], {
+                            width: width,
+                            height: height,
+                            text: this.qrUrl + element.qrCode,
+                            colorDark: '#000',
+                            colorLight: '#fff',
+                        })
+                        let canvas = document.createElement('canvas'),
+                            scale = 0.9
+                        canvas.width = width * scale
+                        canvas.height = height * scale
+                        canvas.style.width =
+                            (shareContent.clientWidth * scale) / 100 + 'px'
+                        canvas.style.height =
+                            (shareContent.clientHeight * scale) / 100 + 'px'
+                        canvas.getContext('2d').scale(scale, scale)
+                        let opts = {
+                            scale: scale,
+                            canvas: canvas,
+                            logging: false,
+                            width: width,
+                            height: height,
+                            useCORS: true,
+                        }
+                        await html2canvas(shareContent, opts)
+                            .then(function (canvas) {
+                                const qrContentImage = canvas.toDataURL(
+                                    'image/jpeg',
+                                    1.0,
+                                )
+                                if (i <= that.checkboxModel.length - 1) {
+                                    that.qrcodeArr.push({
+                                        url: qrContentImage,
+                                        name: element,
+                                    })
+                                }
+                            })
+                            .catch(function (reason) {
+                                console.log(reason)
+                                this.$emit('clearCheck')
+                                that.$modal.closeLoading()
+                            })
+                    }
+                    await new Promise((resolve) => setTimeout(resolve, 2000))
+                    that.packageImages()
+                    setTimeout(msg, 1000)
+                    that.$modal.closeLoading()
+                } catch (error) {
+                    setTimeout(msg, 1000)
+                    // that.getList()
+                    this.$emit('clearCheck')
+                    that.$modal.closeLoading()
+                }
+            }else{
+                this.$modal.msgError("请先选择导出设备");
+            }
             
         },
+        //打包压缩
+        packageImages() {
+            let that = this
+            const zip = new JSZip()
+            const cache = {}
+            let arr = that.qrcodeArr
+            arr.forEach((item, index) => {
+                let fileName = item.name
+                zip.file(fileName + '.png', item.url.substring(22), {
+                    base64: true,
+                })
+                cache[fileName] = item.url
+            })
+            zip.generateAsync({ type: 'blob' }).then((content) => {
+                FileSaver.saveAs(content, '二维码.zip')
+            })
+            // that.getList()
+            this.$emit('clearCheck')
+            that.qrcodeArr = []
+            that.codeId = false;
+        },
 
+    //二维码查看
+    labelUploadCode(row) {
+            // if (row.maCode == null) {
+            //   this.$message.error('当前设备没有设备编码');
+            //   return
+            // }
+            this.rowObj = row
+            this.uploadOpen = true
+            this.title = '二维码查看'
+            this.labelmaCode = row.qrCode
+            let str = this.qrUrl + row.qrCode
+            console.log('qrUrl',this.qrUrl)
+            console.log('str',str)
+            this.$nextTick(() => {
+                // this.selectionList.forEach((item, index) => {
+                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.labelmaCode
+                    alink.click()
+                })
+            }
+    },
     resetQuery(){
 
     },
+
     /** 新增按钮操作 */
-        handleBackAll() {
+    handleBackAll() {},
-        },
 
     //获取任务详情--- 编辑回显数据
     getTaskInfo() {
-            // this.loading = true;
+      this.maForm.pageNum = 1;
-            getPurchaseCheckInfo(this.id).then((response) => {
+      this.getList();
-                // this.taskInfo = response.data
-                this.maForm.purchaseTime = response.data.purchaseTime
-                this.maForm.arrivalTime = response.data.arrivalTime
-                this.maForm.purchaser = response.data.purchaser
-                this.maForm.remark = response.data.remark
-                this.maForm.purchaseNumber = response.data.purchaseNumber
-                this.equipmentList = response.data.purchaseCheckDetailsList
-
-                // this.loading = false;
-            })
     },
 
+        //获取任务详情--- 编辑回显数据
+    handleQuery() {
+      this.maForm.pageNum = 1;
+      this.getList();
+    },
+
+    getList(){
+        this.loading = true;
+        getListDetail(this.maForm).then((response) => {
+        this.equipmentList = response.rows;
+        this.total = response.total;
+        this.loading = false;
+      }); 
+    },
+
+
     //打开查看页面
-        handleView(row){
+    handleView(row) {
-          this.titleBind = "查看"
+      this.loadingTwo = true;
+      getListDetailById({ taskId: row.taskId, typeId: row.typeId }).then(
+        (response) => {
+          this.getListQr = response.data;
           this.showBind = true;
-          this.loadingTwo = false
+          this.titleBind = "查看";
-        //   this.getListGt();
+          this.loadingTwo = false;
+        }
+      );
+    },
+    //打开绑定页面
+    handleBind(row) {
+      this.queryBindTwo = {};
+      this.resetForm("queryFormBind");
+      this.titleTwo = "绑定";
+      this.showTwo = true;
+      this.num = row.checkNum;
+      this.materialName = row.materialName;
+      this.materialModel = row.materialModel;
+      this.productDate = row.productDate;
+      this.taskIdTemp = row.taskId;
+      this.typeIdTemp = row.typeId;
     },
 
-
+    //填充
-
+    handleAdd() {
-        /** 查询右侧列表 */
+      this.$refs["queryFormBind"].validate((valid) => {
-        getList() {
+        if (valid) {
-            // this.loading = true;
+          this.codeTableList = [];
-            // listRole().then(response => {
+          // 设备编码: 前缀 拼接 后缀
-            //       this.equipmentList = response.rows;
+          for (let i = 0; i < this.num; i++) {
-            //       this.total = response.total;
+            let suffix = parseInt(this.queryBindTwo.codeSuffixStart) + i;
-            //       this.loading = false;
+            suffix = suffix.toString().padStart(5, "0");
-            //     }
+            console.log("suffix", suffix);
-            // );
+            suffix = isNaN(suffix) ? "" : suffix;
+            console.log("suffixTwo", suffix);
+            const maCode = `${this.queryBindTwo.codePrefix || ""}${suffix}`;
+            console.log("maCode", maCode);
+            // 出厂编码
+            const outFacCode = "";
+            const materialName = this.materialName;
+            const materialModel = this.materialModel;
+            const productDate = this.productDate;
+            this.codeTableList.push({
+              materialName,
+              materialModel,
+              maCode,
+              outFacCode,
+              productDate,
+            });
+          }
+        }
+      });
     },
 
+    handleBindTwo(){
+        this.codeTableList.forEach(item=>{
+           this.codeTableListTemp.push({maCode:item.maCode,outFacCode:item.outFacCode,productDate:item.productDate})
+        })
+            bindAllData({taskId:this.taskIdTemp,typeId:this.typeIdTemp,dtoList:this.codeTableListTemp}).then(
+                (response) => {
+                   this.$modal.msgSuccess("绑定成功");
+                    this.getList();
+                    this.showTwo = false
+                    
+                },
+            )
+    },
+
+    handleRemove(index){
+        this.codeTableList.splice(index,1)
+    },
+    
+    cancel() {
+      this.codeTableList = [];
+      this.showTwo = false;
+      this.reset();
+    },
+    reset() {
+      this.resetForm("queryFormBind");
+    },
+
+
     // 表单重置
     reset() {
       if (this.$refs.menu != undefined) {
-                this.$refs.menu.setCheckedKeys([])
+        this.$refs.menu.setCheckedKeys([]);
       }
-            ;(this.menuExpand = false),
+      (this.menuExpand = false),
         (this.menuNodeAll = false),
         (this.deptExpand = true),
         (this.deptNodeAll = false),
@@ -446,23 +823,22 @@ export default {
           roleName: undefined,
           roleKey: undefined,
           roleSort: 0,
-                    status: '0',
+          status: "0",
           menuIds: [],
           deptIds: [],
           menuCheckStrictly: true,
           deptCheckStrictly: true,
           remark: undefined,
-                })
+        });
-            this.resetForm('form')
+      this.resetForm("form");
     },
     // 多选框选中数据
     handleSelectionChange(selection) {
-            this.ids = selection.map((item) => item.roleId)
+      this.ids = selection.map((item) => item.roleId);
-            this.single = selection.length != 1
+      this.single = selection.length != 1;
-            this.multiple = !selection.length
+      this.multiple = !selection.length;
     },
 
-
     /** 修改按钮操作 */
     handleUpdate(row) {
       // this.reset();
@@ -471,33 +847,29 @@ export default {
     },
     /** 明细按钮操作 */
     handleDetail(row) {
-            this.holdingpoleData = row
+      this.holdingpoleData = row;
-            this.showDialog = true
+      this.showDialog = true;
-        },
-        onDialogClose() {
-            console.log('弹窗已关闭')
-            this.showDialog = false
-            // 在这里执行关闭后的相关操作
     },
+
     /** 删除按钮操作 */
     handleBack(row) {
       // console.log(row.id)
       this.$modal
-                .confirm('是否确认删除所选择的数据项？')
+        .confirm("是否确认删除所选择的数据项？")
         .then(() => {
           this.deviceType.forEach((e, index) => {
             if (e[3] === row.typeId) {
-                            this.deviceType.splice(index, 1)
+              this.deviceType.splice(index, 1);
-                            this.propsKey++
+              this.propsKey++;
             }
-                    })
+          });
           this.equipmentList.forEach((item, index) => {
             if (item.id == row.id) {
-                            this.equipmentList.splice(index, 1)
+              this.equipmentList.splice(index, 1);
             }
+          });
         })
-                })
+        .catch(() => {});
-                .catch(() => {})
 
       // const roleIds = row.roleId || this.ids;
       // this.$modal.confirm('是否确认删除角色编号为"' + roleIds + '"的数据项？').then(function() {
@@ -508,17 +880,28 @@ export default {
       // }).catch(() => {});
     },
 
-        handleBind(row){
+    /** 导出二维码按钮操作 */
-            this.loadingTwo = true
+        handleUpload(row) {
-          this.titleBind = "绑定"
+            exportNewBuy({purchaseId:row.purchaseId}).then(res => {
-          this.showBind = true;
+              downloadFile({ fileName: `二维码_${new Date().getTime()}.zip`, fileData: res, fileType: 'application/zip;charset=utf-8' })
-          this.getListBind = null
+            })
-           this.loadingTwo = false
           }
+        
   },
-}
+};
 </script>
 <style lang="scss">
+.uploadImg {
+    padding-top: 20px;
+    display: flex;
+    align-items: center;
+    justify-content: center;
+}
+.maCode {
+    margin-top: 10px;
+    padding-bottom: 20px;
+    font-size: 18px;
+}
 .popper-select {
     .el-cascader-panel .el-scrollbar .el-checkbox {
         display: none;

src/views/material/newBuy/goodsBind/component/bindTools.vue

@@ -10,7 +10,7 @@
     >
       <el-form-item label="类型规格" prop="keyWord">
         <el-input
-                    v-model="queryParams.keyWord"
+          v-model="maForm.keyWord"
           placeholder="请输入类型规格"
           clearable
           maxlength="50"
@@ -21,7 +21,7 @@
 
       <el-form-item label="机具厂家" prop="typeId">
         <el-select
-                    v-model="queryParams.typeId"
+          v-model="maForm.typeId"
           placeholder="请选择机具厂家"
           clearable
           filterable
@@ -46,8 +46,16 @@
         ></el-date-picker>
       </el-form-item>
       <el-form-item>
-          <el-button type="primary" icon="el-icon-search" size="mini" @click="handleQuery">查询</el-button>
+        <el-button
-          <el-button icon="el-icon-refresh" size="mini" @click="resetQuery">重置</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-form-item>
     </el-form>
     <el-row :gutter="10" class="mb8">
@@ -69,12 +77,7 @@
       @selection-change="handleSelectionChange"
     >
       <el-table-column type="selection" width="55" align="center" />
-            <el-table-column
+      <el-table-column align="center" label="序号" type="index" width="55" />
-                align="center"
-                label="序号"
-                type="index"
-                width="55"
-            />
       <el-table-column
         align="center"
         label="物资名称"
@@ -107,11 +110,7 @@
         show-overflow-tooltip
       />
 
-            <el-table-column
+      <el-table-column label="相关配套资料" align="center" prop="checkUrlName">
-                label="相关配套资料"
-                align="center"
-                prop="checkUrlName"
-            >
         <!-- <template slot-scope="scope">
             <div @click="openGt(scope.row)" style="color: #02a7f0; cursor: pointer">
                 {{ '报告管理' }}
@@ -127,13 +126,13 @@
       />
 
       <el-table-column label="操作" align="center" width="300">
-                <template slot-scope="scope" >
+        <template slot-scope="scope">
           <el-button
             size="mini"
             type="primary"
             icon="el-icon-zoom-in"
             @click="handleView(scope.row)"
-                         v-if="scope.row.statusName == '已绑定'"
+            v-if="scope.row.statusName == '待入库'"
             >查看</el-button
           >
           <el-button
@@ -141,7 +140,7 @@
             type="primary"
             icon="el-icon-zoom-in"
             @click="handleBind(scope.row)"
-                         v-if="scope.row.statusName != '已绑定'"
+            v-if="scope.row.statusName != '待入库'"
             >绑定</el-button
           >
           <el-button
@@ -149,7 +148,7 @@
             type="danger"
             icon="el-icon-close"
             @click="handleBack(scope.row)"
-                        v-if="scope.row.statusName != '已绑定'"
+            v-if="scope.row.statusName != '待入库'"
             >驳回</el-button
           >
         </template>
@@ -165,19 +164,70 @@
     />
 
     <!-- 新购查看弹窗 -->
-      <el-dialog :title="titleBind" :visible.sync="showBind" width="1000px" append-to-body >
+    <el-dialog
-          <el-form :model="queryBind" ref="queryFormBind" size="small" :inline="true" v-show="showSearch" label-width="68px">
+      :title="titleBind"
+      :visible.sync="showBind"
+      width="1000px"
+      append-to-body
+    >
+      <el-form
+        :model="queryBind"
+        ref="queryFormBind"
+        size="small"
+        :inline="true"
+        v-show="showSearch"
+        label-width="68px"
+      >
       </el-form>
-      <el-table v-loading="loadingTwo" :data="getListPeople" width="800px" height = "600px" >
+      <el-table
-        <el-table-column label="序号" align="center" prop="userName" sortable/>
+        v-loading="loadingTwo"
-        <el-table-column label="类型名称" align="center" prop="newdeptId" sortable/>
+        :data="getListPeople"
-        <el-table-column label="规格型号" align="center" prop="userRoleName" sortable/>
+        width="800px"
-        <el-table-column label="设备编码" align="center" prop="telphone" sortable/>
+        height="600px"
-        <el-table-column label="绑定人员" align="center" prop="telphone" sortable/>
+      >
-        <el-table-column label="绑定时间" align="center" prop="telphone" sortable/>
+        <!-- <el-table-column label="序号" align="center" prop="userName" sortable /> -->
-        <el-table-column label="出厂编号" align="center" prop="telphone" sortable/>
+        <el-table-column
-        <el-table-column label="出厂时间" align="center" prop="telphone" sortable/>
+          label="类型名称"
-
+          align="center"
+          prop="materialName"
+          sortable
+        />
+        <el-table-column
+          label="规格型号"
+          align="center"
+          prop="materialModel"
+          sortable
+        />
+        <el-table-column
+          label="设备编码"
+          align="center"
+          prop="maCode"
+          sortable
+        />
+        <el-table-column
+          label="绑定人员"
+          align="center"
+          prop="createBy"
+          sortable
+        />
+        <el-table-column
+          label="绑定时间"
+          align="center"
+          prop="createTime"
+          sortable
+        />
+        <el-table-column
+          label="出厂编号"
+          align="center"
+          prop="outFacCode"
+          sortable
+        />
+        <el-table-column
+          label="出厂时间"
+          align="center"
+          prop="productDate"
+          sortable
+        />
       </el-table>
 
       <pagination
@@ -189,22 +239,29 @@
       />
     </el-dialog>
 
-
     <!-- 绑定查看弹窗 -->
-      <el-dialog :title="titleTwo" :visible.sync="showTwo" width="1100px" append-to-body  @close="cancel">
+    <el-dialog
-          <el-form :model="queryBindTwo" ref="queryFormBind"  :rules="queryBindTwoRules" size="small" :inline="true" v-show="showSearch" label-width="68px">
+      :title="titleTwo"
-                        <el-form-item
+      :visible.sync="showTwo"
-                            label="前缀"
+      width="1100px"
-                            label-width="50px"
+      append-to-body
-                            prop="codePrefix"
+      @close="cancel"
-
     >
+      <el-form
+        :model="queryBindTwo"
+        ref="queryFormBind"
+        :rules="queryBindTwoRules"
+        size="small"
+        :inline="true"
+        v-show="showSearch"
+        label-width="68px"
+      >
+        <el-form-item label="前缀" label-width="50px" prop="codePrefix">
           <el-input
             v-model="queryBindTwo.codePrefix"
             placeholder="请输入前缀"
             clearable
             maxlength="20"
-                               
           />
         </el-form-item>
 
@@ -212,27 +269,34 @@
           label="后缀起始值"
           label-width="100px"
           prop="codeSuffixStart"
-
         >
           <el-input
             v-model="queryBindTwo.codeSuffixStart"
             clearable
             placeholder="请输入后缀起始值"
             maxlength="99999999"
-                               
           />
         </el-form-item>
         <el-form-item>
-                        <el-button type="primary"  size="mini" @click="handleAdd">填充</el-button>
+          <el-button type="primary" size="mini" @click="handleAdd"
-                        <el-button type="primary" size="mini" @click="handleQuery">绑定</el-button>
+            >填充</el-button
+          >
+          <el-button type="primary" size="mini" @click="handleBindTwo"
+            >绑定</el-button
+          >
         </el-form-item>
       </el-form>
-      <el-table v-loading="loadingTwo" :data="codeTableList" width="1000px" height = "600px" >
+      <el-table
+        v-loading="loadingTwo"
+        :data="codeTableList"
+        width="1000px"
+        height="600px"
+      >
         <el-table-column label="设备名称" align="center" prop="materialName" />
         <el-table-column label="规格型号" align="center" prop="materialModel" />
         <el-table-column label="设备编码" align="center" prop="maCode" />
         <el-table-column label="出厂编号" align="center" prop="outFacCode">
-                    <template v-slot:default="{ row }" >
+          <template v-slot:default="{ row }">
             <el-input
               v-model="row.outFacCode"
               placeholder="请输入出厂编码"
@@ -240,7 +304,7 @@
             ></el-input>
           </template>
         </el-table-column>
-        <el-table-column label="出厂时间" align="center" prop="productDate"  >
+        <el-table-column label="出厂时间" align="center" prop="productDate">
           <template v-slot:default="{ row }">
             <el-date-picker
               v-model="row.productDate"
@@ -251,12 +315,12 @@
           </template>
         </el-table-column>
         <el-table-column label="操作" align="center" width="140">
-                        <template>
+          <template slot-scope="scope">
             <el-button
               size="mini"
-                                type="text"
+              type="danger"
-                                icon="el-icon-delete"
+              icon="el-icon-remove"
-                                @click="handleRemove(scope.row)"
+              @click="handleRemove(scope.$index)"
             >
               移除
             </el-button>
@@ -265,8 +329,6 @@
       </el-table>
     </el-dialog>
   </div>
-
-    
 </template>
 
 <script>
@@ -276,14 +338,11 @@ import {
   getPurchaseCheckInfo,
   equipmentTypeTree,
   addPurchaseCheckInfo,
-//     getPurchaseCheckInfo,
+  //     getPurchaseCheckInfo,
   updatePurchaseCheckInfo,
-} from '@/api/baseGround/newBuy'
+} from "@/api/baseGround/newBuy";
 
-import {
+import { getListDetail, getListDetailById,bindAllData } from "@/api/baseGround/newBuyBind";
-    getListDetail,
-    getListDetailById,
-} from '@/api/baseGround/newBuyBind'
 // import { getUserByRoleList } from '@/api/system/user'
 // import { equipmentTypeTree, supplierInfoList } from '@/api/store/tools'
 // import Treeselect from '@riophae/vue-treeselect'
@@ -293,20 +352,20 @@ import {
 // import {} from '@/api/store/newBuy'
 
 export default {
-    name: 'BindTools',
+  name: "BindTools",
-    dicts: ['sys_normal_disable'],
+  dicts: ["sys_normal_disable"],
   // components: { Treeselect, HoldingpoleDialog },
   props: {
     editTaskId: {
       type: [String, Number],
       default: () => {
-                return ''
+        return "";
       },
     },
   },
   data() {
     return {
-            taskId: '',
+      taskId: "",
       // isEdit: false,
       // 遮罩层
       loading: false,
@@ -321,75 +380,76 @@ export default {
       showSearch: true,
       // 总条数
       total: 0,
-            num:0,
+      num: 0,
       //机具类型
       equipmentTypeList: [],
       // 角色表格数据
       equipmentList: [],
       // 弹出层标题
-            title: '',
+      title: "",
-            titleBind: '',
+      titleBind: "",
-            titleTwo: '',
+      titleTwo: "",
       // 是否显示弹出层
       open: false,
       showBind: false,
       showTwo: false,
       // 日期范围
       dateRange: [],
-            queryBind: 
+      queryBind: {
-            {
         pageNum: 1,
         pageSize: 10,
       },
-            queryBindTwo: 
+      queryBindTwo: {
-            {
         codePrefix: undefined,
         codeSuffixStart: undefined,
       },
       // 查询参数
       queryParams: {
         equipmentId: undefined,
-                productionTime: '',
+        productionTime: "",
-                supplierId: '',
+        supplierId: "",
       },
       maForm: {
         pageNum: 1,
         pageSize: 10,
+        taskId:undefined,
       },
       // 表单参数
       form: {},
       materialName: undefined,
       materialModel: undefined,
-            codeTableList:[],
+      codeTableList: [],
-            productDate:undefined,
+      codeTableListTemp: [],
+      productDate: undefined,
+      taskIdTemp:undefined,
+      typeIdTemp:undefined,
       queryBindTwoRules: {
         codePrefix: [
-                    { required: true, message: '请输入前缀', trigger: 'blur' },
+          { required: true, message: "请输入前缀", trigger: "blur" },
         ],
         codeSuffixStart: [
           {
             required: true,
-                        message: '请输入后缀起始值',
+            message: "请输入后缀起始值",
-                        trigger: 'blur',
+            trigger: "blur",
           },
           {
             pattern: /^[1-9][0-9]*$/,
-                        message: '请输入大于0且不能以0开头的正整数',
+            message: "请输入大于0且不能以0开头的正整数",
           },
         ],
       },
-            
+    };
-        }
   },
   computed: {
     pickerOptions() {
       return {
         disabledDate(time) {
-                    const currentDate = new Date()
+          const currentDate = new Date();
-                    currentDate.setHours(0, 0, 0, 0)
+          currentDate.setHours(0, 0, 0, 0);
-                    return time.getTime() < currentDate.getTime()
+          return time.getTime() < currentDate.getTime();
         },
-            }
+      };
     },
   },
   watch: {
@@ -400,79 +460,81 @@ export default {
     // },
   },
   mounted() {
-
+    this.taskId = this.editTaskId;
-        this.taskId = this.editTaskId
+    this.maForm.taskId = this.taskId;
     this.getTaskInfo();
     // this.getUserList()
     // this.getList();
     // this.supplierInfoList()
   },
   methods: {
-
     /** 新增按钮操作 */
-        handleBackAll() {
+    handleBackAll() {},
-        },
 
     //获取任务详情--- 编辑回显数据
     getTaskInfo() {
-            this.loading = true;
+      this.maForm.pageNum = 1;
-            getListDetail({taskId: this.taskId}).then((response) => {
+      this.getList();
-                this.equipmentList = response.rows
+    },
-                // this.maForm.purchaseTime = response.data.purchaseTime
-                // this.maForm.arrivalTime = response.data.arrivalTime
-                // this.maForm.purchaser = response.data.purchaser
-                // this.maForm.remark = response.data.remark
-                // this.maForm.purchaseNumber = response.data.purchaseNumber
-                // this.equipmentList = response.data.purchaseCheckDetailsList
 
+        //获取任务详情--- 编辑回显数据
+    handleQuery() {
+      this.maForm.pageNum = 1;
+      this.getList();
+    },
+
+    getList(){
+        this.loading = true;
+        getListDetail(this.maForm).then((response) => {
+        this.equipmentList = response.rows;
+        this.total = response.total;
         this.loading = false;
-            })
+      }); 
     },
 
     //打开查看页面
-        handleView(row){
+    handleView(row) {
       this.loadingTwo = true;
-           getListDetailById({taskId: row.taskId,typeId: row.typeId}).then((response) => {
+      getListDetailById({ taskId: row.taskId, typeId: row.typeId }).then(
+        (response) => {
           this.getListBind = response.rows;
-                this.showBind = true
+          this.showBind = true;
-                this.titleBind = "查看"
+          this.titleBind = "查看";
-                this.loadingTwo = false
+          this.loadingTwo = false;
-            })
+        }
+      );
     },
     //打开绑定页面
-        handleBind(row){
+    handleBind(row) {
-          this.titleTwo = "绑定"
+      this.queryBindTwo = {};
+      this.resetForm("queryFormBind");
+      this.titleTwo = "绑定";
       this.showTwo = true;
       this.num = row.checkNum;
       this.materialName = row.materialName;
       this.materialModel = row.materialModel;
       this.productDate = row.productDate;
+      this.taskIdTemp = row.taskId;
+      this.typeIdTemp = row.typeId;
     },
 
     //填充
-        handleAdd(){
+    handleAdd() {
-        //    this.$refs['queryBindTwo'].validate((valid) => {
+      this.$refs["queryFormBind"].validate((valid) => {
-        // if(valid){
+        if (valid) {
-         this.codeTableList = []
+          this.codeTableList = [];
           // 设备编码: 前缀 拼接 后缀
           for (let i = 0; i < this.num; i++) {
-            let suffix = parseInt(this.queryBindTwo.codeSuffixStart) + i
+            let suffix = parseInt(this.queryBindTwo.codeSuffixStart) + i;
-            suffix = suffix
+            suffix = suffix.toString().padStart(5, "0");
-                .toString()
+            console.log("suffix", suffix);
-                .padStart(
-                    this.queryBindTwo.codeSuffixStart?.length,
-                    '0',
-                )
-                console.log('suffix',suffix)
             // console.log('🚀 ~ fillCodeForm ~ suffix:', suffix);
-            suffix = isNaN(suffix) ? '' : suffix
+            suffix = isNaN(suffix) ? "" : suffix;
-              console.log('suffixTwo',suffix)
+            console.log("suffixTwo", suffix);
-            const maCode = `${
+            const maCode = `${this.queryBindTwo.codePrefix || ""}${suffix}`;
-                this.queryBindTwo.codePrefix || ''
+            console.log("maCode", maCode);
-            }${suffix}`
-              console.log('maCode',maCode)
             // 出厂编码
-            const outFacCode = ''
+            const outFacCode = "";
             const materialName = this.materialName;
             const materialModel = this.materialModel;
             const productDate = this.productDate;
@@ -483,32 +545,46 @@ export default {
               maCode,
               outFacCode,
               productDate,
-        })
+            });
           }
-        //  }
+        }
-        //    })  
+      });
     },
 
-        cancel(){
+    handleBindTwo(){
+        this.codeTableList.forEach(item=>{
+           this.codeTableListTemp.push({maCode:item.maCode,outFacCode:item.outFacCode,productDate:item.productDate})
+        })
+            bindAllData({taskId:this.taskIdTemp,typeId:this.typeIdTemp,dtoList:this.codeTableListTemp}).then(
+                (response) => {
+                   this.$modal.msgSuccess("绑定成功");
+                    this.getList();
+                    this.showTwo = false
+                    
+                },
+            )
+    },
+
+    handleRemove(index){
+        this.codeTableList.splice(index,1)
+    },
+    
+    cancel() {
       this.codeTableList = [];
       this.showTwo = false;
-           this.reset()
+      this.reset();
     },
     reset() {
       this.resetForm("queryFormBind");
     },
 
-       handleQuery(){
-
-       },
-
 
     // 表单重置
     reset() {
       if (this.$refs.menu != undefined) {
-                this.$refs.menu.setCheckedKeys([])
+        this.$refs.menu.setCheckedKeys([]);
       }
-            ;(this.menuExpand = false),
+      (this.menuExpand = false),
         (this.menuNodeAll = false),
         (this.deptExpand = true),
         (this.deptNodeAll = false),
@@ -517,23 +593,22 @@ export default {
           roleName: undefined,
           roleKey: undefined,
           roleSort: 0,
-                    status: '0',
+          status: "0",
           menuIds: [],
           deptIds: [],
           menuCheckStrictly: true,
           deptCheckStrictly: true,
           remark: undefined,
-                })
+        });
-            this.resetForm('form')
+      this.resetForm("form");
     },
     // 多选框选中数据
     handleSelectionChange(selection) {
-            this.ids = selection.map((item) => item.roleId)
+      this.ids = selection.map((item) => item.roleId);
-            this.single = selection.length != 1
+      this.single = selection.length != 1;
-            this.multiple = !selection.length
+      this.multiple = !selection.length;
     },
 
-
     /** 修改按钮操作 */
     handleUpdate(row) {
       // this.reset();
@@ -542,29 +617,29 @@ export default {
     },
     /** 明细按钮操作 */
     handleDetail(row) {
-            this.holdingpoleData = row
+      this.holdingpoleData = row;
-            this.showDialog = true
+      this.showDialog = true;
     },
 
     /** 删除按钮操作 */
     handleBack(row) {
       // console.log(row.id)
       this.$modal
-                .confirm('是否确认删除所选择的数据项？')
+        .confirm("是否确认删除所选择的数据项？")
         .then(() => {
           this.deviceType.forEach((e, index) => {
             if (e[3] === row.typeId) {
-                            this.deviceType.splice(index, 1)
+              this.deviceType.splice(index, 1);
-                            this.propsKey++
+              this.propsKey++;
             }
-                    })
+          });
           this.equipmentList.forEach((item, index) => {
             if (item.id == row.id) {
-                            this.equipmentList.splice(index, 1)
+              this.equipmentList.splice(index, 1);
             }
+          });
         })
-                })
+        .catch(() => {});
-                .catch(() => {})
 
       // const roleIds = row.roleId || this.ids;
       // this.$modal.confirm('是否确认删除角色编号为"' + roleIds + '"的数据项？').then(function() {
@@ -574,9 +649,8 @@ export default {
       //   this.$modal.msgSuccess("删除成功");
       // }).catch(() => {});
     },
-
   },
-}
+};
 </script>
 <style lang="scss">
 .popper-select {

src/views/qrCode/qrCode.vue

@@ -0,0 +1,226 @@
+<template>
+    <div style="width: 100%">
+        <div style="width: 100%; padding: 10px">
+            <div class="item-box">
+                <div>设备类型:</div>
+                <div style="margin-left: 10px; color: blue">{{
+                    queryParams.deviceType
+                }}</div>
+            </div>
+            <div class="item-box">
+                <div>规格型号:</div>
+                <div style="margin-left: 10px">
+                    {{ queryParams.specificationType }}</div
+                >
+            </div>
+            <div class="item-box">
+                <div>二维码编码:</div>
+                <div style="margin-left: 10px">{{ queryParams.qrCode }}</div>
+            </div>
+            <div class="item-box">
+                <div>设备编码:</div>
+                <div style="margin-left: 10px">{{ queryParams.maCode }}</div>
+            </div>
+            <div class="item-box">
+                <div>设备状态:</div>
+                <div style="margin-left: 10px">{{
+                    queryParams.maStatusName
+                }}</div>
+            </div>
+            <!-- <div class="item-box">
+            <div >本次检修人员:</div>
+            <div style="margin-left: 10px;">{{queryParams.checkMan}}</div>
+          </div>   -->
+            <div class="item-box">
+                <div>本次检修时间:</div>
+                <div style="margin-left: 10px; color: blue">{{
+                    queryParams.thisCheckTime
+                }}</div>
+            </div>
+            <div class="item-box">
+                <div>下次检修时间:</div>
+                <div style="margin-left: 10px; color: blue">{{
+                    queryParams.nextCheckTime
+                }}</div>
+            </div>
+            <div class="item-box">
+                <div>检验人员:</div>
+                <div style="margin-left: 10px">{{ queryParams.checkMan }}</div>
+            </div>
+            <div class="item-box">
+                <div>检验结论:</div>
+                <div style="margin-left: 10px; color: blue">{{
+                    queryParams.inspectStatus || '合格'
+                }}</div>
+            </div>
+            <div class="item-box">
+                <div>联系电话:</div>
+                <div style="margin-left: 10px">{{ queryParams.phone }}</div>
+            </div>
+            <div class="item-box">
+                <div>生产厂家:</div>
+                <div style="margin-left: 10px">{{ queryParams.maVender }}</div>
+            </div>
+            <div class="item-box">
+                <div>出厂日期:</div>
+                <div style="margin-left: 10px">{{
+                    queryParams.outFacTime
+                }}</div>
+            </div>
+            <div class="item-box">
+                <div>出入库次数:</div>
+                <div style="margin-left: 10px">{{ queryParams.inOutNum }}</div>
+            </div>
+            <div class="item-box">
+                <div>领料单位:</div>
+                <div style="margin-left: 10px"
+                    >{{ queryParams.leaseUnit }}
+                </div>
+            </div>
+            <div class="item-box">
+                <div>领料工程:</div>
+                <div style="margin-left: 10px">{{ queryParams.leasePro }} </div>
+            </div>
+            <div class="item-box">
+                <div>领料时间:</div>
+                <div style="margin-left: 10px"
+                    >{{ queryParams.leaseTime }}
+                </div>
+            </div>
+            <div class="item-box">
+                <div>退料单位:</div>
+                <div style="margin-left: 10px">{{ queryParams.backUnit }} </div>
+            </div>
+            <div class="item-box">
+                <div>退料工程:</div>
+                <div style="margin-left: 10px">{{ queryParams.backPro }} </div>
+            </div>
+            <div class="item-box">
+                <div>退料时间:</div>
+                <div style="margin-left: 10px">{{ queryParams.backTime }} </div>
+            </div>
+        </div>
+        <div class="bottom-box">
+            <div
+                style="
+                    width: 100%;
+                    text-align: center;
+                    margin-bottom: 20px;
+                    color: green;
+                    margin-top: 10px;
+                "
+            >
+                检 验 合 格 证
+            </div>
+            <div style="width: 50%; display: flex; margin-bottom: 10px">
+                <div style="color: green">名 称：</div>
+                <div style="border-bottom: 1px solid green">{{
+                    queryParams.deviceType
+                }}</div>
+            </div>
+            <div style="width: 50%; display: flex; margin-bottom: 10px">
+                <div style="color: green">检验结论：</div>
+                <div style="color: red; font-size: 18px; font-weight: 600">{{
+                    queryParams.inspectStatus || '合格'
+                }}</div>
+            </div>
+            <div style="width: 100%; display: flex; margin-bottom: 10px">
+                <div style="color: green">型 号：</div>
+                <div style="border-bottom: 1px solid green">{{
+                    queryParams.specificationType
+                }}</div>
+            </div>
+            <div style="width: 100%; display: flex; margin-bottom: 10px">
+                <div style="color: green">编 号：</div>
+                <div style="border-bottom: 1px solid green">{{
+                    queryParams.maCode
+                }}</div>
+            </div>
+            <div style="width: 100%; display: flex; margin-bottom: 10px">
+                <div style="color: green">本次检验日期：</div>
+                <div style="border-bottom: 1px solid green">{{
+                    queryParams.thisCheckTime
+                }}</div>
+            </div>
+            <div style="width: 100%; display: flex; margin-bottom: 10px">
+                <div style="color: green">下次检验日期：：</div>
+                <div style="border-bottom: 1px solid green">{{
+                    queryParams.nextCheckTime
+                }}</div>
+            </div>
+            <div style="position: absolute; top: 0%; left: 25%">
+                <canvas id="canvas" width="180" height="180"></canvas>
+            </div>
+        </div>
+    </div>
+</template>
+
+<script>
+import chapter from '../../utils/chapter'
+import { getMachineByQrCode } from '@/api/base/base'
+export default {
+    data() {
+        return {
+            qrCode: '',
+            queryParams: {
+                deviceType: '', //设备类型
+                specificationType: '', //规格型号
+                qrCode: '', //二维码
+                maCode: '', //设备编码
+                maStatusName: '', //设备状态
+                checkMan: '', //本次检验人
+                thisCheckTime: '', //本次检验日期
+                nextCheckTime: '', //下次检验日期
+                // maStatusName:'',//设备状态
+                inspectMan: '', //检验人员
+                inspectStatus: '', //检验结论
+                phone: '', //联系电话
+                maVender: '', //厂家名称
+                outFacTime: '', //出厂日期
+                inOutNum: '', //出入库次数
+                leaseUnit: '', // 领料单位
+                leasePro: '', // 领料工程
+                leaseTime: '', // 领料时间
+                backUnit: '', //  退料单位
+                backPro: '', // 退料工程
+                backTime: '', // 退料时间
+            },
+        }
+    },
+    created() {
+        this.qrCode = this.$route.query.qrCode
+        // console.log(this.qrCode)
+        this.getMachineByQrCode()
+    },
+    mounted() {
+        chapter('机具检验专用章', '重庆送变电工程有限公司')
+    },
+    methods: {
+        getMachineByQrCode() {
+            let param = {
+                qrCode: this.qrCode,
+            }
+            getMachineByQrCode(param).then((response) => {
+                console.log(response, '返回结果-----')
+                this.queryParams = response.data
+            })
+        },
+    },
+}
+</script>
+<style lang="scss" scoped>
+.item-box {
+    display: flex;
+    width: 100%;
+    border-bottom: 1px solid green;
+    margin-bottom: 10px;
+}
+.bottom-box {
+    display: flex;
+    width: 99%;
+    border: 4px solid rgb(2, 196, 2);
+    flex-wrap: wrap;
+    margin: auto;
+    position: relative;
+}
+</style>