PrintShopMisUI/src/components/orderDetail/orderDetail.vue

<template>
  <div class="orderDetail">
    <el-card class="box">
        <span class="box-header-title">
          基本信息(<el-link type="primary">{{ form.orderCode }}</el-link>)
<!--          <el-link v-show="form.printFileUrlLink != null" target="_blank" :href="form.printFileUrlLink">下载原图文件</el-link>-->
          <el-button  v-show="form.printFileUrlLink != null" type="primary" size="mini">
            <a target="_blank" :href="form.printFileUrlLink">下载原图文件</a>
            </el-button>

           <el-button  v-show="form.attachFileUrlLink != null" type="success" size="mini">
            <a target="_blank" :href="form.attachFileUrlLink">下载附件文件</a>
            </el-button>
<!--          <el-link v-show="form.attachFileUrlLink != null" target="_blank" :href="form.attachFileUrlLink">下载附件文件</el-link>-->
        </span>
        <i class="box-header-icon el-icon-caret-top" @click="unfold($event,'basicInfo',2)"></i>

      <div class="box-content" id="basicInfo">
        <el-row :gutter="5">
          <el-col :span="6">
            <div class="detailItem">
              <label class="item_label">制单时间：</label>
              <div class="item_content" v-if="form.createTime">{{ form.createTime | getTime }}</div>
            </div>
          </el-col>
          <el-col :span="5">
            <div class="detailItem">
              <label class="item_label">制单人：</label>
              <div class="item_content">{{ form.createManUser}}</div>
            </div>
          </el-col>
          <el-col :span="5">
            <div class="detailItem">
              <label class="item_label">客户名称：</label>
              <div class="item_content">{{ form.clientName }}</div>
            </div>
          </el-col>
          <el-col :span="5">
            <div class="detailItem">
              <label class="item_label">产品类型：</label>
              <div class="item_content">{{ form.productName }}</div>
            </div>
          </el-col>
          <el-col :span="5">
            <div class="detailItem">
              <label class="item_label">订单数量：</label>
              <div class="item_content">
                <span>{{ form.printQty }}</span>
              </div>
            </div>
          </el-col>
          <el-col :span="10">
            <div class="detailItem">
              <label class="item_label">备注：</label>
              <div class="item_content">{{ form.orderMemo }}</div>
            </div>
          </el-col>
        </el-row>
      </div>
    </el-card>
    <el-card class="box" style="margin-top: 10px">
      <div slot="header">
        <span class="box-header-title">产品信息</span>
        <i class="box-header-icon el-icon-caret-top" @click="unfold($event,'deliverInfo',2)"></i>
      </div>
      <div class="box-content" id="deliverInfo">
        <el-row :gutter="10">
          <el-col style="height: 40px" :span="4">
            <div class="detailItem">
              <label class="item_label">材料类型：</label>
              <div class="item_content">{{ form.paperName }}</div>
            </div>
          </el-col>
          <el-col style="height: 40px" :span="4">
            <div class="detailItem">
              <label class="item_label">每本页数：</label>
              <div class="item_content">{{ form.pageCount }}</div>
            </div>
          </el-col>
          <el-col style="height: 40px" :span="4">
            <div class="detailItem">
              <label class="item_label">印刷颜色：</label>
              <div class="item_content">{{ form.printColor }}</div>
            </div>
          </el-col>
          <el-col style="height: 40px" :span="15">
            <div class="detailItem">
              <label class="item_label">生产工艺：</label>
              <div class="item_content">
                <el-checkbox  v-model="form.printCodeFlag" :true-label="1" :false-label="0" disabled >打码</el-checkbox>
                <el-checkbox  v-model="form.printCoverFlag" :true-label="1" :false-label="0" disabled>封面</el-checkbox>
                <el-checkbox  v-model="form.printMatFlag" :true-label="1" :false-label="0" disabled>加垫</el-checkbox>
                <el-checkbox  v-model="form.printNotCodeFlag" :true-label="1" :false-label="0" disabled>不打码</el-checkbox>
                <el-checkbox  v-model="form.printAllCoverFlag" :true-label="1" :false-label="0" disabled>封面全包</el-checkbox>
              </div>
            </div>
          </el-col>
        </el-row>
      </div>
    </el-card>
    <el-card class="box">
      <div slot="header">
        <span class="box-header-title">报价信息</span>
        <i class="box-header-icon el-icon-caret-top" @click="unfold($event,'produceInfo',2)"></i>
      </div>
      <div class="box-content" id="produceInfo">
        <el-row :gutter="10">
        <el-col :span="6">
          <div class="detailItem">
            <label class="item_label">数量：</label>
            <div class="item_content">{{ form.printQty }}</div>
            <div v-if="form.printQtyUnit" class="item_content">({{ form.printQtyUnit }})</div>
          </div>
        </el-col>
        <el-col :span="6">
          <div class="detailItem">
            <label class="item_label">单价：</label>
            <div class="item_content">{{ form.printPrice }}</div>
          </div>
        </el-col>
          <el-col :span="6">
            <div class="detailItem">
              <label class="item_label">金额：</label>
              <div class="item_content">{{ form.printMoneyTotal }}</div>
            </div>
          </el-col>
        </el-row>
        <el-row :gutter="10">
          <el-col :span="6">
            <div class="detailItem">
              <label class="item_label">送货方式：</label>
              <div class="item_content">{{ form.sendKind }}</div>
            </div>
          </el-col>
          <el-col :span="15">
            <div class="detailItem">
              <label class="item_label">送货地址：</label>
              <div class="item_content">{{ form.sendAddress }}</div>
            </div>
          </el-col>
        </el-row>
      </div>
    </el-card>
    <el-card class="box">
      <div slot="header">
        <span class="box-header-title">外发信息</span>
        <i class="box-header-icon el-icon-caret-top" @click="unfold($event,'outInfo',2)"></i>
      </div>
      <div class="box-content" id="outInfo">
        <el-row :gutter="10">
<!--          <el-col :span="20">-->
<!--            <div class="detailItem">-->
<!--              <label class="item_label">外发形式：</label>-->
<!--              <el-radio-group v-model="form.orderKind">-->
<!--                <el-radio disabled :label="0">常规</el-radio>-->
<!--                <el-radio disabled :label="1">销售</el-radio>-->
<!--                <el-radio disabled :label="2">自产</el-radio>-->
<!--                <el-radio disabled :label="3">外发</el-radio>-->
<!--              </el-radio-group>-->
<!--            </div>-->
<!--          </el-col>-->
<!--          <el-col :span="6">-->
<!--            <div v-if="form.outWorkDept != null" class="detailItem">-->
<!--              <label class="item_label">外发部门：</label>-->
<!--              <div class="item_content">{{ form.outWorkDept }}</div>-->
<!--            </div>-->
<!--          </el-col>-->
          <el-col :span="6">
            <div  class="detailItem">
              <label class="item_label">供应商：</label>
              <div class="item_content">{{ form.outWorkFactory }}</div>
            </div>
          </el-col>
        </el-row>
        <el-row :gutter="10">
          <el-col :span="6">
            <div class="detailItem">
              <label class="item_label">外发数量：</label>
              <div class="item_content">{{ form.outQty }}</div>
            </div>
          </el-col>
          <el-col :span="6">
            <div class="detailItem">
              <label class="item_label">外发单价：</label>
              <div class="item_content">{{ form.outPrice }}</div>
            </div>
          </el-col>
          <el-col :span="6">
            <div class="detailItem">
              <label class="item_label">外发金额：</label>
              <div class="item_content">{{ form.outMoneyTotal }}</div>
            </div>
          </el-col>
          <el-col :span="6">
            <div class="detailItem">
              <label class="item_label">外发运费：</label>
              <div class="item_content">{{ form.outSendMoney }}</div>
            </div>
          </el-col>
          <el-col :span="15">
            <div class="detailItem">
              <label class="item_label">外发备注：</label>
              <div class="item_content">{{ form.outMemo }}</div>
            </div>
          </el-col>
        </el-row>
      </div>
    </el-card>
    <el-card class="box">
      <div slot="header">
        <span class="box-header-title">成本信息</span>
        <i class="box-header-icon el-icon-caret-top" @click="unfold($event,'CostInfo',2)"></i>
      </div>
      <div class="box-content" id="CostInfo">
        <el-row :gutter="10">
          <el-col :span="6">
            <div class="detailItem">
              <label class="item_label">毛利：</label>
              <div class="item_content">{{ form.orderGrossProfit }}</div>
            </div>
          </el-col>
          <el-col :span="6">
            <div class="detailItem">
              <label class="item_label">毛利率：</label>
              <div class="item_content">{{ form.orderGrossProfitRate }}%</div>
            </div>
          </el-col>
        </el-row>
      </div>
    </el-card>
    <el-dialog size="mini" title="PDF文件列表" :append-to-body="true" :visible.sync="dialogPdfVisible" width="560px">
      <el-table :data="gridDataPdf">
        <el-table-column
          label="#"
          align="center"
          type="index"
          :index="indexMethod">
        </el-table-column>
        <el-table-column
          label="PDF文件名称"
          width="450px"
        >
          <template slot-scope="{row}">
            <a target="_blank" :href="row.url" style="color: #409EFF;cursor: pointer"
               class="ellipsis"> {{ row.fileName }}</a>
          </template>
        </el-table-column>
      </el-table>
    </el-dialog>
    <div v-show="machinefListVisible" style="width: 100%;position: fixed;left: 0px;height: 510px;z-index: 9999;background: #fff;bottom:0px;border-top: 1px solid #ddd;overflow-y: auto">
      <machinef-list @closeDrawer="closeDrawer" @searchList="searchList" ref="machinefList"></machinef-list>
    </div>
  </div>
</template>

<script>
import {
  getPrintOrderInfo
} from '@/api/order/orderDetail'
import OrderStep from "@/components/orderStep/orderStep";
import {getOrderPDFFiles} from "@/api/printbill/printbill";
import {getConfigInfo} from "@/api/system/config";
import {ifPermission} from "@/api/order/orderList";
// import PrintbillDetail from "@/components/printbillDetail/printbillDetail";
import printStep from "@/components/printbillDetail/printStep";
import machinefList from "@/components/machinefList/machinefList";

export default {
  name: 'OrderDetail',
  components: {
    OrderStep,
    printStep,
    machinefList
  },
  data() {
    return {
      machinefListVisible:false,
      dialogPdfVisible: false,
      gridDataPdf: [],
      form: {},
      deliverInform: [],
      partInfoList: [],
      produceInfoList: [],
      outAssistBillList: [],
      orderStockItemList: [],
      sendBillItemList: [],
      idOrder: '',
      eleindex: 0,
      deptSurveylist: [{id: 1}, {id: 2}],
      payKind: [],
      activeName: 'first',
      craftInfoList: [],
      permissionFlag1: false,
      printBillCode: ''
    }
  },
  watch: {
    activeName(val) {
      console.log(val);
      if (val == 'second') {
        this.getCraftInfo()
      }
    }
  },
  mounted() {
    if (this.$route.query.idOrder != undefined) {
      this.idOrder = this.$route.query.idOrder
      this.getInfo()

    }
  },
  methods: {
    //获取机台任务
    handleMachine(){
      const _that = this;
      _that.machinefListVisible = true;
      _that.$refs.machinefList.getMachine(_that.$refs.machinefList.activeName,_that.$refs.machinefList.activeIndex);
    },
    closeDrawer(){
      this.machinefListVisible = false;
    },
    searchList(id){
      const _that = this;
      // _that.search.idMachineInfo = id;
      // _that.listData.page=1;
      // _that.tableData = [];
      // _that.getTableInfo();
    },
    getPrintBillStep(id){
      const _that = this;

      _that.$refs.printStep.idOrder = id;
      _that.$refs.printStep.drawer = true;
      _that.$refs.printStep.getStep();
    },
    handlePrintBillDetail(id){
      const _that = this;
      if(_that.$route.path=="/printbill/list"){
        return
      }
      _that.$refs.printbillDetail.idOrder = id;
      _that.$refs.printbillDetail.printVisible = true;
      _that.$refs.printbillDetail.fullscreenLoading = true;
      _that.$refs.printbillDetail.getDetail();
    },
    getInfo() {
      const _that = this
      var data = {
        'idOrder': _that.idOrder
      }
      getPrintOrderInfo(data).then(res => {
        _that.activeName = 'first'
        _that.form = res.data
        document.title = _that.form.orderCode + '_订单详情'
      })
    },
    getCraftInfo() {
      const _that = this
      var data = {
        'idOrder': _that.idOrder
      }
      readPrintOrderDetailCraftInfo(data).then(res => {
        console.log('readPrintOrderDetailCraftInfo', res)
        _that.craftInfoList = res.data
      })
    },

    customRowStyle({row, rowIndex}) {
      if (row.processState == 10) {
        return {
          color: 'green'
        }
      }
    },
    enter(i) {
      this.eleindex = i
    },
    //序号
    indexMethod(index) {
      return index + 1;
    },
    openOrderStep() {
      const _that = this
      _that.$refs.orderStep.idOrder = _that.form.id
      _that.$refs.orderStep.getOrderStep()
    },

    handleOrderPDFFiles(id) {
      //查看pdf
      const _that = this;
      var datas = {
        "idOrder": id
      }
      getOrderPDFFiles(datas).then(response => {
        // console.log(response.data);
        _that.dialogPdfVisible = true;
        _that.gridDataPdf = response.data

      }).catch(err => {
        console.log(err);
      })
    },


    // 展开收起
    unfold: function (e, data, type) {
      const dv = document.getElementById(data)

      var pv = dv.parentNode
      if (dv.className == 'noShow') {
        dv.removeAttribute('class')
        pv.className = 'el-card__body'
        if (type == 2) {
          e.target.className = 'box-header-icon el-icon-caret-top'
        } else {
          pv.parentNode.children[0].children[0].children[1].className = 'box-header-icon el-icon-caret-top'
        }
      } else {
        dv.setAttribute('class', 'noShow')
        pv.className = 'hideContent'
        if (type == 2) {
          e.target.className = 'box-header-icon el-icon-caret-bottom'
        } else {
          pv.parentNode.children[0].children[0].children[1].className = 'box-header-icon el-icon-caret-bottom'
        }
      }
    },
  }
}
</script>

<style>
.el-tooltip__popper {
  max-width: 800px;
  line-height: 180%;
}
</style>
<style lang="scss" scoped>
.box {
  margin-bottom: 10px;
}

.box-header-title {
  line-height: 20px;
  font-size: 17px;
  font-weight: 500;
  color: #666;
}

.detailItem {
  margin: 5px;
  color: #666;
}

.detailItem .item_content {
  display: inline-block;
}

/*手风琴样式*/
.or-container {
  display: flex;
  width: 100%;
  /*padding: 4% 2%;*/
  box-sizing: border-box;
  /*height: 400px;*/
}

.or-container:before {
  background-color: rgba(0, 0, 0, 0.4);
}

.boxItem {
  flex: 1;
  overflow: hidden;
  transition: .5s;
  box-shadow: 0 20px 30px rgba(0, 0, 0, 0.1);
  line-height: 0;
  padding: 0 15px;
}

.noShow {
  display: none;
}

.box-title {
  font-size: 16px;
  font-width: 700;
  line-height: 30px;
  margin: 10px 0;
  padding-left: 10px;
}

.box-header-right {
  float: right;
  color: #20a0ff;
  line-height: 36px;
  cursor: pointer;
  margin-right: 10px;
}

.box-header-icon {
  float: right;
  color: #20a0ff;
  line-height: 36px;
  cursor: pointer;
}


.title-state {
  display: none;
}

/*.box-show{*/
/*  display: block;*/
/*  line-height: 20px;*/
/*}*/
.box-main {
  display: block;
  line-height: 20px;
}

.eleactive {
  flex: 1 1 30%;
}

.eleactive .title-state {
  display: inline-block;
}

/*.eleactive .box-show{*/
/*  display: none;*/
/*}*/
/*.eleactive .box-main{*/
/*  display: block;*/
/*}*/

.eleactive > img {
  width: 100%;
  height: 100%;
}
.tip {
  padding: 8px 16px;
  background-color: #ecf8ff;
  border-radius: 4px;
  border-left: 5px solid #50bfff;
  margin: 8px 0;
}

::v-deep .el-checkbox__input.is-disabled .el-checkbox__inner::after {
  box-sizing: content-box;
  content: "";
  border: 2px solid #409eff;
  border-left: 0;
  border-top: 0;
  height: 7px;
  left: 4px;
  position: absolute;
  top: 1px;
  transform-origin: center;
}

::v-deep .el-radio__input.is-disabled.is-checked .el-radio__inner::after {
  background-color:#409eff;
  width: 10px;
  height: 10px;
}
::v-deep .el-radio__input.is-disabled .el-radio__inner, .el-radio__input.is-disabled.is-checked .el-radio__inner {
  border-color:#E4E7ED;
  background-color: #ffffff;
}
/*end*/

.orderDetail {
  //margin-top:-30px ;
  ::v-deep .el-card__header {
    padding: 9px 20px;
  }
  .el-checkbox__original {
    background-color: #c91111 !important;
  }

  ::v-deep .el-card__body {
    padding: 10px 20px;
  }
}

::v-deep .el-tooltip__popper {
  max-width: 400px;
}
</style>