Crunchy
2023-12-07 6d213775d14a63d18d9eb17b44ba14bd3bb220da
src/views/quality/Packaging_ledger/index.vue
¶Ô±ÈÐÂÎļþ
@@ -0,0 +1,441 @@
<template>
    <div class="mod-config">
        <basic-container>
        <el-row>
            <el-col :span="11">
            <ttable
            :table="table"
            :isShowHide="true"
            :prelang="prelang"
            :ajaxFun="ajaxFun"
            :options="options"
            @handleSelectionChange="handleSelectionChange"
            ref="processconfiguration"
            >
              <template #toolbar></template>
            </ttable>
            </el-col>
            <el-col :span="13" style="padding-left: 10px">
                <el-card>
                <div slot="header">
                <el-row>
                    <el-col :span="8">
                    <span>装箱明细</span>
                    </el-col>
                    <el-col :span="8" :offset="4">
                    <!-- <el-button
                        style="float: right; padding: 3px 0"
                        type="text"
                        @click="beginItemLayOut"
                    >
                        å¸ƒå±€
                    </el-button> -->
                    </el-col>
                    <el-col :span="2">
                    <el-button
                        style="float: right; padding: 3px 0"
                        type="text"
                        @click="addpreserve"
                        >保存
                    </el-button>
                    </el-col>
                    <el-col :span="2">
                    <el-button
                        v-if="!isCheck"
                        style="float: right; padding: 3px 0"
                        type="text"
                        @click="relateOperationParam()"
                        >添加
                    </el-button>
                    </el-col>
                </el-row>
                </div>
                <el-table
              :data="testStandardParams"
              id="testStandardParamTable"
              ref="testStandardParam"
              highlight-current-row
              height="700"
              style="width: 100%"
              class="l-mes-table"
              border
              stripe
            >
              <el-table-column
                type ="index"
                label="序号"
                align="center"
                width="50"
              />
              <el-table-column
                label="产品"
                prop="product"
                align="center"
              />
              <el-table-column
                label="产品编号"
                prop="productNo"
                align="center"
              >
              </el-table-column>
              <el-table-column
                label="规格型号"
                prop="specs"
                align="center"
              >
              </el-table-column>
              <el-table-column
                label="单位"
                prop="unit"
                align="center"
              >
              </el-table-column>
              <el-table-column
                label="数量"
                prop="number"
                align="center"
                width="80"
              >
                <template slot-scope="scope">
                  <el-input v-model="scope.row.number"></el-input>
                </template>
              </el-table-column>
              <el-table-column
                fixed="right"
                label="操作"
                align="center"
                width="80">
                <template slot-scope="scope">
                  <el-button @click="deleteadd(scope.row)"  size="small">删除</el-button>
                </template>
              </el-table-column>
            </el-table>
                </el-card>
            </el-col>
        </el-row>
        <!-- æ–°å¢ž -->
        <packfrom
        :currshowlist.sync="addOrUpdateVisible"
        @refreshDataList="getData">
        </packfrom>
        <packfromadd
        :currshowlist.sync="increase"
        :packageBoxIddata ="packageBoxId"
        @handleSelectionChange = "preserve"
        >
        </packfromadd>
      </basic-container>
      <el-dialog title="标签列表" top="5vh" :visible.sync="diaPrintTab" width="500px">
        <div id="qrCard" class="dia_body" style="height: 400px;overflow-y: auto;padding: 0 10px;">
          <el-card class="box-card" v-for="(item, i) in qrData" :key="i" style="margin-bottom: 15px;">
            <el-row>
              <el-col :span="10" :offset="3">序号:</el-col>
              <el-col :span="10" style="font-weight: bold;">{{ i + 1 }}</el-col>
            </el-row>
            <el-row>
              <el-col :span="10" :offset="3">包装编号:</el-col>
              <el-col :span="10" style="font-weight: bold;">{{ item.packageNo }}</el-col>
            </el-row>
            <el-row>
              <el-col :span="10" :offset="3">二维码:</el-col>
              <el-col :span="10">
                <vueQr :text="JSON.stringify(item)" :size="120" :margin="1"></vueQr>
              </el-col>
            </el-row>
          </el-card>
        </div>
        <span slot="footer" class="dialog-footer">
          <el-button @click="diaPrintTab = false">取 æ¶ˆ</el-button>
          <el-button type="primary" @click="printFun">打 å°</el-button>
        </span>
      </el-dialog>
    </div>
</template>
<script>
import { pagedata,dropById,list,saveList,deledata,sAuditstatus} from '@/api/quality/Packaging_ledger'
import ttable from '@/views/common/ztt-table.vue'
import packfrom from './pack-from.vue'
import packfromadd from './pack-fromadd.vue'
import vueQr from 'vue-qr'
import PrintJS from 'print-js'
export default {
    data(){
        return {
          qrData:[],
          diaPrintTab: false,
          multipleSelection: [],
          isCheck: false,
          dataway:{},
          goid:'',
          testStandardParams: [],
          packageBoxId:{},
            prelang: 'operation',
            dataListLoading: false,
            ajaxFun: pagedata,
            increase:false,
            addOrUpdateVisible:false,
            options: {
                height: 300, // é»˜è®¤é«˜åº¦-为了表头固定
                stripe: true, // æ˜¯å¦ä¸ºæ–‘马纹 table
                highlightCurrentRow: false, // æ˜¯å¦è¦é«˜äº®å½“前行
                border: true, // æ˜¯å¦æœ‰çºµå‘边框
                lazy: false, // æ˜¯å¦éœ€è¦æ‡’加载
                fit: true, // åˆ—的宽度是否自撑开
                multiSelect: true, //
                isEdit:false,
                seqNo: true,
                isShowHide: true, // æ˜¯å¦æ˜¾ç¤ºæ˜¾å½±æŒ‰é’®
                isRefresh: true, // æ˜¯å¦æ˜¾ç¤ºåˆ·æ–°æŒ‰é’®
                isSearch: true, // é«˜çº§æŸ¥è¯¢æŒ‰é’®
                defaultOrderBy: { column: 'createTime', direction: 'desc' }
            },
            table: {
                total: 0,
                currentPage: 1,
                pageSize: 20,
                data: [],
                // æ ‡é¢˜
                column: [
                {
                  minWidth: 'code',
                  prop: 'state',
                  label: '状态',
                  sort: true,
                  isTrue: true,
                  isSearch: true,
                  searchInfoType: 'text'
                },
                  {
                    minWidth: '140',
                    prop: 'packageNo',
                    label: '包装编号',
                    isTrue: true,
                    isSearch: true,
                    searchInfoType: 'text',
                  },{
                    minWidth: '140',
                    prop: 'createUser',
                    label: '创建人',
                    isTrue: true,
                    isSearch: true,
                    searchInfoType: 'text',
                  },{
                    minWidth: '140',
                    prop: 'contractNo',
                    label: '合同号',
                    isTrue: true,
                    isSearch: true,
                    searchInfoType: 'text',
                  },
                  {
                    minWidth: '140',
                    prop: 'updateUser',
                    label: '更新人',
                    isTrue: true,
                    isSearch: true,
                    searchInfoType: 'text',
                  },
                  {
                    minWidth: '130',
                    width: '150',
                    prop: 'updateTime',
                    label: '更新日期',
                    sort: true,
                    isTrue: true,
                    isSearch: true,
                    searchInfoType: 'datetimerange',
                },
                {
                    minWidth: '130',
                    width: '150',
                    prop: 'createTime',
                    label: '创建日期',
                    sort: true,
                    isTrue: true,
                    isSearch: true,
                    searchInfoType: 'datetimerange',
                },
                ],
                toolbar: [
                    {
                      text: '新增',
                      type: 'primary',
                      fun: this.addOrUpdateHandle
                    },
                    {
                      text: '标签打印',
                      type: 'primary',
                      fun: this.printLabel
                    },
                ],
                operator: [
                    {
                      text: '检验',
                      icon: 'el-icon-position',
                      type: 'text',
                      size: 'small',
                      fun: this.check
                    },{
                      text: '删除',
                      icon: 'el-icon-delete',
                      type: 'text',
                      size: 'small',
                      fun: this.deleteHandle
                    }
                  ],
                  operatorConfig: {
                    fixed: 'right',
                    label: '操作',
                    width: 120,
                    minWidth: 120
                  }
            },
       }
    },
    components: {
      ttable,
      packfrom,
      packfromadd,
      vueQr
    },
    watch: {
      diaPrintTab(newVal){
        if(!newVal){
          this.qrData = []
        }
      }
    },
    methods: {
      //打印按钮
      printFun() {
          this.diaPrintTab = false;
          PrintJS({
              printable: "qrCard",
              type: "html",
              // header: "原材料检测报告",
              targetStyles: ["*"],
              style: `@page {margin: 0mm 5mm;}
                      html {zoom:100%;}
                      @media print {
                        html,body{
                          width:60mm;
                          height:40mm;
                        }
                      }`,
              ignoreElements: ["no-ignore"],
              orientation: 'portrait'
          });
      },
      handleSelectionChange(val){
        this.multipleSelection = val
        let lastRow = val[val.length - 1]
        this.handleCurrentChange(lastRow)
      },
      printLabel(){
        if(this.multipleSelection.length==0){
          this.$message.warning('请选择一条数据')
          return
        }
        this.diaPrintTab = true
        console.log(this.multipleSelection);
        this.multipleSelection.forEach(item=>{
          let obj = {
            packageNo: item.packageNo,
            contractNo: item.contractNo,
            boxInfo: []
          }
          list({packageBoxId:item.id}).then((res) =>{
            res.data.data.forEach(ele=>{
              obj.boxInfo.push({
                product: ele.product,
                productNo: ele.productNo,
                specs: ele.specs,
                unit: ele.unit,
                number: ele.number
              })
            })
          })
          this.qrData.push(obj)
        })
      },
       // èŽ·å–æ•°æ®åˆ—è¡¨
      getData() {
        this.$refs.processconfiguration.refreshData()
      },
      wayRenovate(){
        this.getData()
      },
      //add
      addOrUpdateHandle(){
        this.addOrUpdateVisible = true
      },
      //删除
      deleteHandle(row){
        dropById({id:row.id}).then((res) =>{
          this.getData()
          this.$message.success('删除成功')
        })
      },
      handleCurrentChange(row){
        if(row.state=='已报检'){
          this.isCheck = true
        }
        this.dataway = row
        this.packageBoxId = {
          packageBoxId:row.id
        }
        this.goid = row.id
        this.rightquery()
      },
      rightquery(){
        list({packageBoxId:this.goid}).then((res) =>{
          this.testStandardParams = res.data.data
        })
      },
      //详情添加
      relateOperationParam(){
        if (this.dataway.state == "未报检") {
            this.increase = true
        }else{
          this.$message.error('请先选择包装项目')
        }
      },
      preserve(datalist){
        this.testStandardParams = datalist
      },
      //右边保存
      addpreserve(){
         this.testStandardParams.forEach(el => {
              el.packageBoxId =this.goid
         });
        saveList(this.testStandardParams).then((res) =>{
          this.$message.success('保存成功')
          this.rightquery()
        })
      },
      //删除
      deleteadd(row){
          deledata({id:row.id}).then((res)=>{
          this.$message.success('删除成功')
          this.rightquery()
          })
      },
      //审核
      check(row){
        let packageBox = {
                id:row.id,
                packageNo:row.packageNo,
                contractNo:row.contractNo,
                customerId:row.customerId,
        }
        sAuditstatus(packageBox).then((res) =>{
          this.getData()
          this.$message.success('检验成功')
        })
      },
    },
}
</script>