提交浏览发货信息

廖井涛

4 天以前 4955996ab044bc275ac78da3543b9d9f5ad7f8d9

 north-glass-erp/northglass-erp/src/views/sd/bom/OrderBOM.vue

New file
@@ -0,0 +1,820 @@
<script setup>
import {Check, Search} from "@element-plus/icons-vue"
import {useRouter} from "vue-router"
import {computed, onMounted, reactive, ref} from "vue"
import request from "@/utils/request"
import deepClone from "@/utils/deepClone"
import {ElMessage, ElMessageBox} from "element-plus"
import { VXETable} from "vxe-table"
import  useUserInfoStore from '@/stores/userInfo'
import companyInfo from "@/stores/sd/companyInfo"
import footSum from "@/hook/footSum"
import OrderDetail from "@/components/sd/order/OrderDetail.vue"
import OrderCraftDetail from "@/components/sd/order/OrderCraftDetail.vue"
import OrderProcess from "@/components/sd/order/OrderProcess.vue"
import PrintSheet1 from "@/components/sd/order/PrintSheet1.vue"
import PrintSheet2 from "@/components/sd/order/PrintSheet2.vue"
import {useI18n} from "vue-i18n"
import useOrderInfoStore from "@/stores/sd/order/orderInfo"
import {CircleCheck, Download, Printer} from "@element-plus/icons-vue/global"
import { saveAs } from "file-saver"
import PrintSheet3 from "@/components/sd/order/PrintSheet3.vue"
import PrintSheet4 from "@/components/sd/order/PrintSheet4.vue"
import PrintSheet5 from "@/components/sd/order/PrintSheet5.vue"
const { t } = useI18n()
const orderInfo = useOrderInfoStore()
const userStore = useUserInfoStore()
const company = companyInfo()
const tabsValue=ref('1')
const router = useRouter()
let rowClickIndex = ref(null)
let reviewDisabled = ref(true)
const dialogTableVisible = ref(false)
let dialogKey = ref(0)
let sheetIndex = ref(-1)
let orderType = ref("2")
let filterData = ref({})
let sortData = ref({
  field:'id',
  order:null
})
let orderList = ref([])
let pageNum=ref(1)
let total = ref({
  pageTotal : 0,
  dataTotal : 0,
  pageSize : 50
})
let orderBomData =ref({
  productName:[]
})
let bomSum = ref({
  sumData:[],
  sumDatilsData:[]
})

let orderBomDetails = ref(null)

const xGrid = ref()
const gridOptions = reactive({
  border:  "full",//表格加边框
  keepSource: true,//保持源数据
  align: 'center',//文字居中
  stripe:true,//斑马纹
  rowConfig: {isCurrent: true, isHover: true,height: 30},//鼠标移动或选择高亮
  id: 'OrderList',
  showFooter: true,//显示脚
  printConfig: {},
  importConfig: {},
  exportConfig: {},
  scrollY:{ enabled: true },//开启虚拟滚动
  showOverflow:true,
  columnConfig: {
    resizable: true,
    useKey: true
  },
  filterConfig: {   //筛选配置项
    remote: true
  },
  sortConfig: {   //排序配置项
    remote: true//是否服务端排序
  },
  customConfig: {
    storage: true
  },
  editConfig: {
    trigger: 'click',
    mode: 'row',
    showStatus: true
  },
 /* menuConfig: {
    body: {
      options: [
        [
          { code: 'copy', name: t('searchOrder.copy'), prefixIcon: 'vxe-icon-copy', visible: true},
          { code: 'copyTitle', name: t('searchOrder.copyTitle'), prefixIcon: 'vxe-icon-copy', visible: true},
          {
            prefixIcon: 'vxe-icon-print',
            name: t('order.processingOrder'),
            children: [
              // { code: 'sheet1', name: '横版-普通' },
              { code: 'sheet2', name: t('order.sheet2') },
              { code: 'sheet4', name: t('order.sheet4') },
              { code: 'sheet3', name: t('order.sheet3') },
              { code: 'sheet5', name: t('order.sheet5')},

            ]
          },
          {
            prefixIcon: 'vxe-icon-repeat',
            name: t('order.oneClickReturn'),
            children: [
              // { code: 'sheet1', name: '横版-普通' },
              { code: 'back1', name: t('searchOrder.createOrder'),disabled:true },
              { code: 'back2', name: t('order.technology'),disabled:true  },
              { code: 'back3', name: t('basicData.review'),disabled:true  },
              { code: 'back4', name: t('searchOrder.production'),disabled:true },

            ]
          },
          { code: 'oneClickStorage', name: t('order.oneClickStorage'), prefixIcon: 'vxe-icon-copy', visible: true},
          // { code: 'getProcessList', name: t('searchOrder.processFlows'), prefixIcon: 'vxe-icon-file-txt', visible: true}
        ]
      ]
    }
  },*/
  //表头参数
  columns:[
    {title: t('basicData.operate'), width: 110, slots: { default: 'button_slot' },fixed:"left",},
    {type: 'seq', title: t('basicData.Number'), width: 80 ,fixed:"left",},
    {field: 'orderId',width:120,  title: t('order.orderId'),filters:[{ data: '' }],slots: { filter: 'num1_filter' }, sortable: true},
    {field: 'customerId',width:120,  title: t('customer.customerNumber'),filters:[{ data: '' }],slots: { filter: 'num1_filter' }, sortable: true},
    {field: 'customerName',width:120,  title: t('customer.customerName'),filters:[{ data: '' }],slots: { filter: 'num1_filter' }, sortable: true},
    {field: 'project',width:120,  title: t('order.project'),filters:[{ data: '' }],slots: { filter: 'num1_filter' }, sortable: true},
    {field: 'batch',width:120,  title: t('order.batch'),filters:[{ data: '' }],slots: { filter: 'num1_filter' }, sortable: true},
    {field: 'quantity',width:120,  title: t('order.quantity'),filters:[{ data: '' }],slots: { filter: 'num1_filter' }, sortable: true},
   // {field: 'goodsQuantity',width:120,  title: t('searchOrder.inventoryNum'), sortable: true},
    {field: 'area',width:120,  title: t('order.computeGrossArea'),filters:[{ data: '' }],slots: { filter: 'num1_filter' }, sortable: true},
    {field: 'bomPrice',width:120,  title: t('bom.bomPrice'),filters:[{ data: '' }],slots: { filter: 'num1_filter' }, sortable: true},
    {field: 'money',width:120,  title: t('order.money'),filters:[{ data: '' }],slots: { filter: 'num1_filter' }, sortable: true},
    {field: 'createTime',width:120,filters:[{ data: '' }],slots: { filter: 'num1_filter' },   title: t('basicData.reportData'), sortable: true},
    {field: 'packType',width:120,  title: t('order.packType'),filters:[{ data: '' }],slots: { filter: 'num1_filter' }, sortable: true},
    {field: 'orderType',width:120,  title: t('order.orderType'),filters:[{ data: '' }],slots: { filter: 'num1_filter' }, sortable: true},
    {field: 'salesman',width:120,  title: t('order.salesman'),filters:[{ data: '' }],slots: { filter: 'num1_filter' }, sortable: true},
    {field: 'creator',width:120,  title: t('product.creator'),filters:[{ data: '' }],slots: { filter: 'num1_filter' }, sortable: true},
    //{field: 'verifier',width:120,  title: t('basicData.review'),filters:[{ data: '' }],slots: { filter: 'num1_filter' }, sortable: true},
    {field: 'perimeter',width:120,  title: t('searchOrder.perimeter'),filters:[{ data: '' }],slots: { filter: 'num1_filter' }, sortable: true},
    {field: 'deliveryDate',width:120,  title: t('order.deliveryDate'), sortable: true},
    {field: 'customerBatch',width:120,  title: t('order.customerBatch'),filters:[{ data: '' }],slots: { filter: 'num1_filter' }, sortable: true},

    //{field: '14',width:120,  title: '备注',filters:[{ data: '' }],slots: { filter: 'num1_filter' }, sortable: true},
    //{field: 'deliveryAddress',width:120,  title: t('order.deliveryAddress'),filters:[{ data: '' }],slots: { filter: 'num1_filter' }, sortable: true},
    {field: 'processingNote',width:120,  title: t('order.processingNote'),filters:[{ data: '' }],slots: { filter: 'num1_filter' }, sortable: true}

  ],
  mouseConfig:{selected: true},//鼠标选中
  keyboardConfig:{
    isArrow: true
  },
  //表头按钮
  toolbarConfig: {
    buttons: [

    ],
    slots:{
      buttons: "toolbar_buttons"
    },

    // import: false,
    // export: true,
    // print: true,
    zoom: true,
    custom: true
  },

  footerMethod ({ columns, data }) {//页脚函数
    return[
      columns.map((column, columnIndex) => {
        if (columnIndex === 0) {
          return t('basicData.total')
        }
        const List = ["quantity",'goodsQuantity','area','perimeter','money','bomPrice']
        if (List.includes(column.field)) {
          return footSum(data, column.field)
          //return total.value[column.field]
        }
        return ''
      })
    ]
  }

})
const gridEvents = {
  toolbarButtonClick ({ code }) {
    const $grid = xGrid.value
    if ($grid) {
      switch (code) {
        case 'checkList': {
          if($grid.getCheckboxRecords().length===0){
            VXETable.modal.message( t('searchOrder.msg'))
            return
          }
          break
        }

      }
    }
  },
  menuClick ({ menu, row, column }) {
    const $grid = xGrid.value
    if ($grid) {
      switch (menu.code) {
        case 'sheet1': {
          if(rowClickIndex.value===null){
            ElMessage.warning(t('searchOrder.msgList.checkOrder'))
            return
          }
          dialogTableVisible.value = true
          sheetIndex.value=1
          if(rowClickIndex.value.processReview===2 && rowClickIndex.value.orderReview===0){
            reviewDisabled.value=false
          }
          break
        }
        case 'sheet2': {
          if(rowClickIndex.value===null){
            ElMessage.warning(t('searchOrder.msgList.checkOrder'))
            return
          }
          dialogTableVisible.value = true
          sheetIndex.value=2
          if(rowClickIndex.value.processReview===2 && rowClickIndex.value.orderReview===0){
            reviewDisabled.value=false
          }
          break
        }
        case 'sheet3': {
          if(rowClickIndex.value===null){
            ElMessage.warning(t('searchOrder.msgList.checkOrder'))
            return
          }
          dialogTableVisible.value = true
          sheetIndex.value=3
          if(rowClickIndex.value.processReview===2 && rowClickIndex.value.orderReview===0){
            reviewDisabled.value=false
          }
          break
        }
        case 'sheet4': {
          if(rowClickIndex.value===null){
            ElMessage.warning(t('searchOrder.msgList.checkOrder'))
            return
          }
          ElMessage.warning(t('order.printingNumber')+rowClickIndex.value.printingNumber)
          dialogTableVisible.value = true
          sheetIndex.value=4
          if(rowClickIndex.value.processReview===2 && rowClickIndex.value.orderReview===0){
            reviewDisabled.value=false
          }
          break
        }
        case 'sheet5': {
          if(rowClickIndex.value===null){
            ElMessage.warning(t('searchOrder.msgList.checkOrder'))
            return
          }
          ElMessage.warning(t('order.printingNumber')+rowClickIndex.value.printingNumber)
          dialogTableVisible.value = true
          sheetIndex.value=5
          if(rowClickIndex.value.processReview===2 && rowClickIndex.value.orderReview===0){
            reviewDisabled.value=false
          }
          break
        }
        case 'back1': {
          backProcess(1)
          break
        }
        case 'back2': {
          backProcess(2)
          break
        }
        case 'back3': {
          backProcess(3)
          break
        }
        case 'back4': {
          backProcess(4)
          break
        }

        case 'copy': {
          if(rowClickIndex.value===null){
            ElMessage.warning(t('searchOrder.msgList.checkOrder'))
            return
          }
          router.push({path:'/main/order/createOrder',
            state:{
              orderId:rowClickIndex.value.orderId,
              type:'copy'
            }})
          break
        }
        case 'copyTitle': {
          if(rowClickIndex.value===null){
            ElMessage.warning(t('searchOrder.msgList.checkOrder'))
            return
          }
          router.push({path:'/main/order/createOrder',
            state:{
              orderId:rowClickIndex.value.orderId,
              type:'copyTitle'
            }})
          break
        }
        case 'print':{

          break
        }
        case 'oneClickStorage': {
          if(rowClickIndex.value.processReview===0||rowClickIndex.value.orderReview===0){
            ElMessage.warning(t('order.orderNotApproved'))
            return
          }
          if(rowClickIndex.value.warehousing==2){
            ElMessage.warning(t('order.orderHasBeenReceived'))
            return
          }
          request.post(`/finishedGoodsInventory/oneClickStorage/${rowClickIndex.value.orderId}/${userStore.user.userName}`).then((res) => {
            if(res.code==200 && res.data===true){
              ElMessage.success(t('productStock.receivedSuccessfully'))
              router.push({path:'/main/order/selectOrder',query:{random:Math.random()}})
            }else{
              ElMessage.warning(res.msg)
            }
          })
          break
        }

      }
    }
  },
  cellClick({ row }){
    rowClickIndex.value = row
    // xGrid.value.menuConfig.body.options[0][3].children.forEach((item)=>{
    //   item.disabled=true
    // })
    //判断是否入库
    if(row.warehousing>0){
      return
    }
    if(row.processReview===2){
      xGrid.value.menuConfig.body.options[0][3].children[0].disabled=false
    }
    if(row.orderReview===2){
      xGrid.value.menuConfig.body.options[0][3].children[1].disabled=false
    }
    if(row.productionOrder>0){
      xGrid.value.menuConfig.body.options[0][3].children[2].disabled=false
    }
    if(row.processingCard>0){
      xGrid.value.menuConfig.body.options[0][3].children[3].disabled=false
    }
  },
  sortChange ({ field, order }) {
    sortData.value = {field,order}
    selectOrderList()
  }
}



const getOrderList = async () => {
  //加载请求
  const config = {
    filter: filterData.value,
    sort: sortData.value
  }
  await request.post(`/order/getOrderList/1/${total.value.pageSize}/${orderType.value}/${orderInfo.selectDate}`,config).then((res) => {
    if(res.code==200){
      total.value = res.data.total
      /*total.dataTotal = res.data.total.dataTotal*1
      total.pageTotal= res.data.total.pageTotal*/
      orderInfo.selectDate = res.data.selectDate
      res.data.data.forEach((item)=>{
        item.bomPrice=(item.money/1.3).toFixed(2)
      })
      orderList.value = deepClone(res.data.data)
      xGrid.value.loadData(orderList.value)
    }else{
      ElMessage.warning(res.msg)
    }
  })
}
onMounted(async () => {
  filterData.value = orderInfo.searchOrderFilter.data
  await getOrderList()
  orderInfo.searchOrderFilter.list.forEach(item =>{
    xGrid.value.getColumnByField(item.field).filters = item.column.filters
  })
})

const changeFilterEvent = (event, option, $panel) => {
  // 手动触发筛选
  $panel.changeOption(event, !!option.data, option)
}

function filterChanged(column){
  gridOptions.loading=true
  //筛选条件发生变化条件发生变化
  let value = column.datas[0]!=undefined?column.datas[0]:''
  value = value.trim()
  //判断是否存在外键
  if (column.property.indexOf('.')>-1){
    const  columnArr = column.property.split('.')
    filterData.value[columnArr[0]] = {
      [columnArr[1]]:value
    }
  }else{
    filterData.value[column.property] = value
  }
  const config = {
    filter: filterData.value,
    sort: sortData.value
  }
  request.post(`/order/getOrderList/${pageNum.value}/${total.value.pageSize}/${orderType.value}/${orderInfo.selectDate}`,config).then((res) => {
    if(res.code==200){
      total.value = res.data.total
      /*total.dataTotal = res.data.total.total*1
      total.pageTotal=parseInt(res.data.total)*/
      pageNum.value=1
      orderList.value = deepClone(res.data.data)
      xGrid.value.loadData(orderList.value)
      gridOptions.loading=false
      orderInfo.searchOrderFilter.list = xGrid.value.getCheckedFilters()
      orderInfo.searchOrderFilter.data = filterData.value
    }else{
      ElMessage.warning(res.msg)
    }
  })
}

//双击表格行

const selectOrderList = ()=>{
  const config = {
    filter: filterData.value,
    sort: sortData.value
  }
  request.post(`/order/getOrderList/${pageNum.value}/${total.value.pageSize}/${orderType.value}/${orderInfo.selectDate}`
      ,config).then((res) => {
    if(res.code==200){
      total.value = res.data.total
      /*total.dataTotal = res.data.total.total*1
      total.pageTotal = res.data.total.pageTotal*/
      orderInfo.selectDate=res.data.selectDate
      orderList.value = deepClone(res.data.data)
      xGrid.value.loadData(orderList.value)

    }else{
      ElMessage.warning(res.msg)
    }
  })
}

const changeOrderType = ()=>{
  pageNum.value=1
  selectOrderList()
}
const changeDate =  ()=>{
  pageNum.value=1
  selectOrderList()
}

//页脚跳转
const handlePageChange = ({ currentPage, pageSize }) => {
  pageNum.value=currentPage
  total.pageTotal    = pageSize
  selectOrderList()
}

//页面跳转更新或者删除订单
const getTableRow =  (row,type) => {
  switch (type) {
    case 'edit': {
      if (row.orderId!="" && row.orderId!=null){
        request.post(`/BomData/getOrderBomData/${row.orderId}`,).then((res) => {
          if (res.code == 200 ) {
            orderBomData.value.productName =res.data.data
            bomSum.value.sumData = res.data.sumData
            bomSum.value.sumDatilsData  =res.data.sumDataDatils
            request.post(`/BomData/getBomDataProduct`,orderBomData.value).then((res) => {
              if (res.code == 200 ) {
                orderBomDetails.value=res.data.data
                orderBomData.value.productName.forEach((product, i) => {
                  const details = orderBomDetails.value[i]?.data || []

                  // 生成 parts
                  const parts = product.product_name.split(/[*+]/)
                  parts.push("其它")

                  product.product_parts = parts.map((p, idx) => {
                    // 找出所有 product_layer == idx+1 的 detail
                    const assignedDetails = details.filter(d => d.product_layer === idx + 1)

                    return {
                      name: p,
                      details: assignedDetails
                    }
                  })
                  // 计算总价
                  product.totalPrice = details.reduce((sum, d) => sum + (d.materialPric || 0) , 0)
                })
                dialogTableVisible.value = true
              }
            })
          }
        })


      }


      break
    }

  }
}

const showCheckbox = computed(()=>(item)=>{ //计算属性传递参数
  return 2 === item
})



const printContent = ref({
  id: 'child',

})




const printingNumber = ()=>{
  if(sheetIndex.value===4){
    request.post(`/order/updateOrderPrintNumber/${rowClickIndex.value.orderId}`).then(res =>{

    })
  }

}

const closeDialog = ()=>{
  /*selectOrderList()
  console.log(xGrid.value.getTableData())*/

}

const handleKeyDown = (evnt) =>{

  if(evnt.$event.keyCode === 38 ){
    let nextRowIndex = xGrid.value.getRowIndex(xGrid.value.getCurrentRecord()) - 1;
    if (nextRowIndex < xGrid.value.getTableData().fullData.length && nextRowIndex>=0) {
      xGrid.value.setCurrentRow(xGrid.value.getTableData().fullData[nextRowIndex]);
      rowClickIndex.value = xGrid.value.getCurrentRecord()
    }

  }
  if(evnt.$event.keyCode === 40 ){
    let nextRowIndex = xGrid.value.getRowIndex(xGrid.value.getCurrentRecord()) + 1;
    if (nextRowIndex < xGrid.value.getTableData().fullData.length) {
      xGrid.value.setCurrentRow(xGrid.value.getTableData().fullData[nextRowIndex]);
      rowClickIndex.value = xGrid.value.getCurrentRecord()
    }

  }
}
//订单距离小于三天则改变checkbox class 改变颜色
const timeOutChangeColor =(row)=>{
  if(company.timeOut){
    return row.timeOut
  }
}

//总价
const totalPrice = computed(() => {
  return bomSum.value.sumDatilsData.reduce((sum, d) => sum + d.materialPrice, 0)
})
</script>

<template>
  <div  style="width: 100%;height: 100% ;">
    <div style="width: 100%;height: 95%">
      <el-date-picker
          v-model="orderInfo.selectDate"
          type="daterange"
          :start-placeholder="$t('basicData.startDate')"
          :end-placeholder="$t('basicData.startDate')"
          format="YYYY-MM-DD"
          value-format="YYYY-MM-DD"

      />
      <el-button @click="changeDate"
                 style="margin-top: -5px"
                 id="searchButton"
                 type="primary"
                 :icon="Search">
        {{ $t('basicData.search') }}
      </el-button>
      <vxe-grid
          @filter-change="filterChanged"
          height="110%"
          size="mini"
          class="mytable-scrollbar"
          ref="xGrid"
          v-bind="gridOptions"
          v-on="gridEvents"
          @keydown="handleKeyDown"

      >


        <template #state="{ row,column}">
          <el-checkbox
              :class="timeOutChangeColor(row)"
              v-if="row[column.field] === 2"
              @click.native.prevent
              :indeterminate="row[column.field]===1"
              :checked="true"/>
          <el-checkbox
              v-else
              :class="timeOutChangeColor(row)"
              @click.native.prevent
              :indeterminate="row[column.field]===1"
              :checked="false"/>
        </template>

        <!--左边固定显示的插槽-->
        <template #button_slot="{ row }">
          <el-button @click="getTableRow(row,'edit')"
                     link
                     type="primary"
                     size="small">
            BOM查询
          </el-button>

        </template>

        <template #num1_filter="{ column, $panel }">
          <div>
            <div v-for="(option, index) in column.filters" :key="index">
              <input
                  v-model="option.data"
                  @keyup.enter.native="$panel.confirmFilter()"
                  @input="changeFilterEvent($event, option, $panel)"/>
            </div>
          </div>
        </template>
        <template #num2_filter="{ column, $panel }">
          <div>
            <div v-for="(option, index) in column.filters" :key="index">
              <vxe-select
                  v-model="option.data"
                  @change="changeFilterEvent($event, option, $panel)"
                  :placeholder="$t('processCard.pleaseSelect')">
                <vxe-option value="0" :label="$t('basicData.unchecked')"></vxe-option>
                <vxe-option value="1" :label="$t('basicData.partiallySelected')"></vxe-option>
                <vxe-option value="2" :label="$t('basicData.selected')"></vxe-option>
              </vxe-select>
            </div>
          </div>
        </template>

        <template #toolbar_buttons>
          <vxe-select @change="changeOrderType" v-model="orderType" :placeholder="$t('searchOrder.orderType')">
            <vxe-option value="2" :label="$t('searchOrder.regularOrders')"></vxe-option>
            <vxe-option value="-2" :label="$t('searchOrder.cancelledOrders')"></vxe-option>
            <vxe-option value="0" :label="$t('searchOrder.allOrders')"></vxe-option>
          </vxe-select>
        </template>

        <template #pager>
          <!--使用 pager 插槽-->
          <!--        'PrevJump','NextJump', -->
          <vxe-pager
              @page-change="handlePageChange"
              :layouts="[  'PrevPage', 'Jump','PageCount', 'NextPage',  'Total']"
              v-model:current-page="pageNum"
              v-model:page-size="total.pageSize"
              v-model:pager-count="total.pageTotal"
              :total="total.dataTotal"
          >
          </vxe-pager>
        </template>
      </vxe-grid>

    </div>
    <el-dialog
        :key="dialogKey"
        id="print"
        v-model="dialogTableVisible"
        destroy-on-close
        style="width: 600px;height: 600px"
        :close-on-click-modal="false"
        :close-on-press-escape="false"
    >
      <el-card style="max-width: 480px;margin-left: 45px;margin-top: 20px">
        <!-- header -->
        <template #header>
          <div class="card-header">
            <span style="font-weight: bold">成品合计</span>
            &nbsp;&nbsp;&nbsp;
            <span>面积：{{ bomSum.sumData[0].area.toFixed(2) }}㎡</span>
            &nbsp;&nbsp;&nbsp;
            <span>数量：{{ bomSum.sumData[0].quantity }}</span>
            &nbsp;&nbsp;&nbsp;
            <span>周长：{{ bomSum.sumData[0].perimeter.toFixed(2) }}m</span>
          </div>
        </template>

        <!-- body -->
        <el-row
            v-for="(mat, idx) in bomSum.sumDatilsData"
            :key="idx"
            style="text-align: left; margin-bottom: 6px"
        >
          <el-col :span="8">{{ mat.material }}：</el-col>
          <el-col :span="8">{{ mat.consume }}㎡</el-col>
        </el-row>

        <!-- footer -->
        <template #footer>
          合计 ¥{{ totalPrice }}
        </template>
      </el-card>

      <el-card
          v-for="item in orderBomData.productName"
          :key="item.product_id"
          style="max-width: 480px;margin-left: 45px;margin-top: 20px"
      >
        <!-- header -->
        <template #header>
          <div class="card-header">
            <span style="font-weight: bold">{{ item.product_name }}</span>
            <br />
            <span>面积：{{ item.area }}</span>
            &nbsp;&nbsp;&nbsp;
            <span>数量：{{ item.quantity }}</span>
            &nbsp;&nbsp;&nbsp;
            <span>周长：{{ Number(item.perimeter).toFixed(2) }}</span>
          </div>
        </template>

        <!-- body -->
        <el-row
            v-for="(part, index) in item.product_parts"
            :key="index"
            style="text-align: left; margin-bottom: 6px"
        >
          <el-col :span="24">

              <el-row v-for="(d, j) in part.details"
                      :key="j"
                      style="text-align: left">
              <el-col :span="8">{{ d.material }}</el-col>
              <el-col :span="8">{{ d.consume }}{{d.unit}}</el-col>
              </el-row>
<!--            <hr v-if="part.details.length > 0" />-->
          </el-col>
        </el-row>

        <!-- footer -->
        <template #footer>合计 {{ item.totalPrice }}</template>
      </el-card>

      <template #footer>
        <div class="dialog-footer">
          <el-button type="primary">转采购单</el-button>
          <el-button type="primary">
            领料
          </el-button>
        </div>
      </template>
    </el-dialog>





  </div>
</template>

<style scoped>
:deep(.el-tabs__content) {
  width: 100%;
  height: 86%;
}
.el-tab-pane{
  width: 100%;
  height: 100%;
}
:deep(#print .el-dialog__body){
  height: 85%;
  width: 100%;
  overflow-y: auto;
}
#child{
  width:100%;
  height: 100%;
}

:deep(.timeOut.is-checked .el-checkbox__inner) {
  background-color: orangered;
  border-color: orangered;
}
.el-row{
  text-align: center
}

</style>