bonus-ui/src/views/material/back/component/dialogFormByCq.vue

<template>
  <el-dialog
    v-dialogDrag
    v-loading.fullscreen.lock="fullscreenLoading"
    :before-close="cancel"
    :title="dialogTitle"
    :visible.sync="dialogShowFlag"
    append-to-body
    width="1000px"
  >
    <div id="printcontent" style="height: 600px;overflow-y: scroll;padding: 0 20px;">
      <vue-easy-print tableShow ref="printRef">
        <div style="text-align: center;font-weight: 600;font-size: 16px;">
            机具设备退料单
        </div>
        <div class="order_box">
          <div class="order_box_one">
            <div>
              <span>工程名称：</span><span>{{ rowObj.proName }}</span>
            </div>
            <div>
              <span>退料时间：</span><span>{{ rowObj.createTime }}</span>
            </div>
          </div>
          <div class="order_box_one">
            <div>
              <span>退料单位：</span><span>{{ rowObj.unitName }}</span>
            </div>
            <div>
              <span>单号：</span><span>{{ rowObj.code }}</span>
            </div>
          </div>
        </div>
        <el-table :data="tableData" border style="width: 100%;margin-bottom: 10px;padding: 2px;">
          <el-table-column label="编号" align="center" type="index" />
          <el-table-column label="物资类型"
            align="center"
            prop="materialType"
            :show-overflow-tooltip="true"
          />
          <el-table-column
            label="物资名称"
            align="center"
            prop="typeName"
            :show-overflow-tooltip="true"
          />
          <el-table-column
            label="规格型号"
            align="center"
            prop="typeModel"
            :show-overflow-tooltip="true"
          />
          <el-table-column
            label="计量单位"
            align="center"
            prop="unitName"
            :show-overflow-tooltip="true"
          />
          <el-table-column
            label="退料数量"
            align="center"
            class-name="small-padding fixed-width"
            width="200"
            prop="preNum"
          >
          </el-table-column>
          <el-table-column
            label="编号"
            align="center"
            class-name="small-padding fixed-width"
            width="200"
            prop="num"
          >
          <template slot-scope="scope">
              <span v-if="scope.row.manageType==1">无编码</span>
              <span v-if="scope.row.manageType==0" style="color: rgb(2, 167, 240);" @click="checkDetail(scope.row)">查看明细</span>
            </template>
          </el-table-column>
          <!-- <el-table-column prop="remarks" label="备注" align="center">
            <template slot-scope="scope">
              <span
                @click="remarksClick"
                style="color: #1890ff; cursor: pointer"
                >{{ scope.row.remarks }}</span
              >
            </template>
          </el-table-column> -->
        </el-table>
        <div class="order_footer">
          <div>审核人：</div>
          <div>退料人：</div>
          <div>制单：</div>
        </div>
      </vue-easy-print>
      <div>
        <el-button type="primary" @click="print">打印</el-button>
      </div>
    </div>
    <el-dialog :title="title" :visible.sync="open" width="1000px" append-to-body>
      <div style="height: 500px;overflow-y: scroll;padding: 0 20px;">
      <vue-easy-print tableShow ref="remarksPrintRef">
        <div class="remarks_box">
          <div class="remarks_box_title">退料编码明细</div>
        </div>
        <div class="order_box">
          <div class="order_box_one">
            <div>
              <span>工程名称：</span><span>{{ rowObj.proName }}</span>
            </div>
            <div>
              <span>退料时间：</span><span>{{ rowObj.createTime }}</span>
            </div>
          </div>
          <div class="order_box_one">
            <div>
              <span>退料单位：</span><span>{{ rowObj.unitName }}</span>
            </div>
            <div>
              <span>单号：</span><span>{{ rowObj.code }}</span>
            </div>
          </div>
        </div>
        <el-table :data="tableSubData" border style="width: 100%;margin-bottom: 10px;padding: 2px;">
          <el-table-column label="序号" align="center" type="index" />
          <el-table-column prop="materialType" label="物资类型" align="center">
          </el-table-column>
          <el-table-column prop="materialName" label="物资名称" align="center">
          </el-table-column>
          <el-table-column prop="typeName" label="规格型号" align="center">
          </el-table-column>
          <el-table-column prop="maCode" label="设备编号" align="center">
          </el-table-column>
        </el-table>
        <div class="order_footer">
          <div>审核人：</div>
          <div>退料人：</div>
          <div>制单：</div>
        </div>
      </vue-easy-print>
      </div>
      <div style="margin-top: 10px">
        <el-button type="primary" @click="remarksPrint">打印</el-button>
      </div>
    </el-dialog>
  </el-dialog>
</template>
<script>
import vueEasyPrint from 'vue-easy-print';
import { 
    getBackApplyInfo, 
    updatePrintStatus,
} from '@/api/back/index.js' 
// import { getViewByApply,materialReturnNoteByApply } from "@/api/claimAndRefund/return.js"
export default {
  components: { vueEasyPrint },
  props: {
    // 弹窗是否显示
    isShowFlag: {
      type: Boolean,
      default: false
    },
    // 对应操作数据键值
    priKey: {
      type: [String, Number],
      default: ""
    },
    //弹窗标题
    dialogTitle: {
      type: String,
      default: ""
    },
    rowObj: {
      type: Object,
      default: {}
    }
  },
  watch: {
    isShowFlag(val) {
      if (val) {
        this.init();
      }
    }
  },
  computed: {
    dialogShowFlag: {
      get() {
        return this.isShowFlag;
      },
      set(v) {
        this.$emit("update:isShowFlag", v);
      }
    }
  },
  data() {
    return {
      fullscreenLoading: false,
      tableData: [],
      tableSubData: [],
      open: false,
      title: ""
    };
  },
  methods: {
    init() {
      // let params = {
      //   id: this.rowObj.id, 
      // }
   
      getBackApplyInfo(this.rowObj.id).then(res => {
        console.log(res)
        this.tableData = res.data.backApplyDetailsList
      })
    },
    // 取消按钮
    cancel() {
      this.dialogShowFlag = false;
    },
    print() {
      this.$refs.printRef.print();
      console.log(this.rowObj)
      updatePrintStatus(this.rowObj.id).then(response => {
        if (response.code === 200) {
          //this.$modal.msgSuccess("打印成功");
          // 如果需要刷新列表
          this.$emit('refresh');
        }
      }).catch(() => {
        this.$modal.msgError("打印状态更新失败");
      });

    },
    checkDetail(row) {
      this.title = '查看'
      this.tableSubData = row.maCodeList
      this.open = true
    },
    remarksPrint() {
      this.$refs.remarksPrintRef.print();
    },
    
  }
};
</script>
<style lang="scss" scoped>
.order_box {
  display: flex;
  flex-direction: column;
  .order_box_one {
    width: 100%;
    display: flex;
    align-content: center;
    justify-content: space-between;
    margin-bottom: 10px;
    :last-child {
      margin-right: 20px;
    }
  }
}
.order_footer {
  margin-top: 10px;
  display: flex;
  justify-content: space-around;
  align-items: center;
}
.remarks_box {
  display: flex;
  // align-items: center;
  justify-content: center;
  .remarks_box_title {
    margin-bottom: 10px;

    font-size: 18px;
  }
}
@media print {
  .no-print {
    display: none;
  }
  
  .print-content {
    /* 打印内容的样式 */
  }
}
</style>