sd-vue/src/views/shengde/subsidiary/order/management/deleteDetails.vue

<template>
  <div class="box-cardTwo">
    <el-form
      ref="ruleForm"
      :model="form"
      label-width="90px"
      v-loading="loadingStatus"
      :element-loading-text="loadingText"
      element-loading-background="rgba(0, 0, 0, 0.2)"
    >
      <LabelTemplate title="删除原因" />
      <div style="padding: 20px 0">
        <el-form-item>
          <div v-html="getStyle(form.deleteRemarks)"></div>
        </el-form-item>
      </div>
      <LabelTemplate title="产品" />
      <div style="padding: 20px 0">
        <div>
          <el-collapse v-model="activeNames">
            <div v-for="(item, index) in form.contractProductList" :key="item.id" style="margin-bottom: 20px">
              <div style="border: 1px solid #edf0f5">
                <table cellspacing="0" cellpadding="0" border="0" class="productTable">
                  <thead>
                    <tr>
                      <th style="width: 230px">
                        <div>产品</div>
                      </th>
                      <th style="width: 150px">
                        <div>图稿（设计图）</div>
                      </th>
                      <th style="width: 330px" v-if="form.draftType !== '2'">
                        <div>图稿（生产文件）</div>
                      </th>
                      <th>
                        <div>包材配件/单品</div>
                      </th>
                      <th style="width: 80px; text-align: center" v-if="item.waybillNo">
                        <span>操作</span>
                      </th>
                    </tr>
                  </thead>
                  <tr>
                    <td>
                      <div style="display: flex; padding: 8px 20px 0px">
                        <div v-if="item.pic" style="min-width: 80px">
                          <img v-if="!item.pic.includes('https')" class="productImg" :src="pathPrefix + item.pic" @click="openImg(pathPrefix + item.pic)" />
                          <img v-else :src="item.pic" class="productImg" @click="openImg(item.pic)" />
                        </div>
                        <div>
                          <div style="line-height: 28px">
                            <span>商品名称: {{ item.olnSkuName }}</span>
                          </div>
                          <div style="line-height: 28px">
                            <span>品号: {{ item.specCode }}</span>
                          </div>
                          <div style="line-height: 28px">
                            <span>品名: {{ item.colorName }}</span>
                          </div>
                          <div style="line-height: 40px">
                            <span>数量:{{ Number(item.quantity) }} </span>
                          </div>
                          <div style="line-height: 28px">
                            <span>定制加工费: {{ item.processPrice }}</span>
                          </div>
                          <div style="line-height: 28px">
                            <span>代发费: {{ item.deliverGoodsPrice }}</span>
                          </div>
                          <div style="line-height: 28px">
                            <span>快递包材费: {{ item.expressPrice }}</span>
                          </div>
                          <div style="line-height: 28px">
                            <span>包装人工费: {{ item.expensePrice }}</span>
                          </div>
                          <div style="line-height: 28px">
                            <span>单价: ¥{{ moneyFormat(item.productPrice, 2) }}</span>
                          </div>
                          <div style="line-height: 28px">
                            <span>小计: ¥ {{ statisticalAmount(item) }}</span>
                          </div>
                          <div style="line-height: 40px">
                            <span>打印: <span v-if="item.identification === 1">单面</span> <span v-if="item.identification === 2">双面</span> </span>
                          </div>
                        </div>
                      </div>
                    </td>
                    <td>
                      <div style="padding: 8px 20px 0px">
                        <div v-if="item.imgPath">
                          <img
                            v-if="!item.imgPath.includes('https')"
                            class="productImg"
                            :src="pathPrefix + item.imgPath"
                            style="width: 80px; height: 80px"
                            @click="openImg(pathPrefix + item.imgPath)"
                          />
                          <img v-else :src="item.imgPath" class="productImg" style="width: 80px; height: 80px" @click="openImg(item.imgPath)" />
                        </div>
                      </div>
                    </td>
                    <td v-if="form.draftType !== '2'">
                      <div style="padding: 8px 20px 0px">
                        <div>共享文件夹路径（点击下方链接并上传文件）：</div>
                        <a style="color: #027db4; cursor: pointer; word-break: break-all" @click="clickPath(item.artworkDocument)">
                          {{ item.artworkDocument.replace(/\\/g, '/') }}
                        </a>
                      </div>
                    </td>
                    <td>
                      <div style="padding: 8px 20px 0px">
                        <el-table
                          :data="item.partsContractProductList"
                          size="small"
                          :row-style="{ height: '35px' }"
                          :cell-style="{ padding: '0' }"
                          border
                          ref="table"
                        >
                          <el-table-column label="单价￥" prop="price" align="left" width="120">
                            <template slot-scope="scope">
                              <span>{{ moneyFormat(scope.row.price, 2) }}</span>
                            </template>
                          </el-table-column>
                          <el-table-column label="数量" prop="singleQuantity" align="left" width="90"> </el-table-column>
                          <el-table-column label="名称" prop="name" align="left" min-width="150" />
                          <el-table-column label="总量" prop="quantity" align="center" width="70">
                            <template slot-scope="scope">
                              {{ scope.row.quantity }}
                            </template>
                          </el-table-column>
                          <el-table-column label="小计￥" align="center" width="100">
                            <template slot-scope="scope">
                              {{ moneyFormat(scope.row.amount, 2) }}
                            </template>
                          </el-table-column>
                        </el-table>
                      </div>
                    </td>
                  </tr>
                </table>
                <el-collapse-item title="包装" :name="index">
                  <div style="display: flex; padding: 8px 10px 0px">
                    <div style="width: 100%; padding: 0px 10px">
                      <div>
                        包装要求:
                        <div style="border: 1px solid #d3d3d3; max-height: 500px; overflow: auto; padding: 10px" v-if="item.packageRemarks">
                          <div v-html="item.packageRemarks"></div>
                        </div>
                        <span v-else>无</span>
                      </div>
                    </div>
                  </div>
                </el-collapse-item>
              </div>
            </div>
          </el-collapse>
        </div>
      </div>
    </el-form>
  </div>
</template>

<script>
import LabelTemplate from '@/components/LabelTemplate'
import { orderDetails } from '@/api/shengde/subsidiary/AddOrModifiedOrder/index.js'

export default {
  components: { LabelTemplate },
  props: {
    rowData: Object,
  },
  data() {
    return {
      pathPrefix: process.env.VUE_APP_IMG_URL,
      filePrefix: process.env.VUE_APP_FILE_PREFIX,
      loadingStatus: false,
      loadingText: '',
      form: {
        deleteRemarks: '',
        contractProductList: [],
      },
      activeNames: '',
    }
  },
  created() {},
  mounted() {
    if (this.rowData && this.rowData.processInstanceId) {
      this.getDetails({ processInstanceId: this.rowData.processInstanceId })
    }
  },
  methods: {
    getDetails(data) {
      this.loadingText = '获取数据中,请稍后'
      this.loadingStatus = true
      orderDetails(data).then(
        (res) => {
          for (let i = 0; i < res.data.data.contractProductList.length; i++) {
            res.data.data.contractProductList[i].artworkDocument = (this.filePrefix + res.data.data.contractProductList[i].artworkDocument).replace(/\//g, '\\')
          }
          this.form = res.data.data
          console.log(this.form)
          this.loadingStatus = false
        },
        (err) => {
          console.log('orderDetails: ' + err)
          this.loadingStatus = false
        }
      )
    },
    getStyle(text) {
      if (text) {
        return text.replace(/\n|\r\n/g, '<br>')
      } else {
        return ''
      }
    },
    openImg(path) {
      window.open(path)
    },
    getPath(val) {
      if (val) {
        let path = val.replace(/\\/g, '/')
        return 'printer://' + path + '/'
      }
      return ''
    },
    statisticalAmount(item) {
      if (item.quantity && item.quantity > 0) {
        let money = item.productPrice || 0
        if (item.processPrice) {
          money = parseFloat(Number(money) + Number(item.processPrice)).toFixed(2)
        }
        if (item.deliverGoodsPrice) {
          money = parseFloat(Number(money) + Number(item.deliverGoodsPrice)).toFixed(2)
        }
        if (item.expressPrice) {
          money = parseFloat(Number(money) + Number(item.expressPrice)).toFixed(2)
        }
        if (item.expensePrice) {
          money = parseFloat(Number(money) + Number(item.expensePrice)).toFixed(2)
        }
        money = parseFloat(Number(money) * Number(item.quantity)).toFixed(2)
        return this.moneyFormat(money, 2)
      }
      return ''
    },
    clickPath(item) {
      let path = JSON.parse(JSON.stringify(item)).replace(/\\/g, '/')
      addFolder(path).then(
        () => {
          let a = document.createElement('a')
          a.href = 'printer://' + path.replace(/\//g, '/') + '/'
          a.style.display = 'none'
          document.body.appendChild(a)
          a.click()
          document.body.removeChild(a)
        },
        (err) => {
          console.log('addFolder:' + err)
        }
      )
    },
  },
}
</script>

<style lang="scss" scoped>
.box-cardTwo {
  height: calc(100vh - 110px - 10px - 125px - 40px);
  overflow-y: auto;
}

::v-deep {
  .tableHeader th {
    background-color: #edf0f5;
    height: 35px;
    padding: 0;
  }
  .el-collapse-item__header {
    justify-content: center;
  }
  .el-collapse-item__arrow {
    margin: 0;
  }
}
.productTable {
  width: 100%;
  table-layout: fixed;

  th {
    background-color: #edf0f5;
    height: 35px;
    line-height: 35px;
    padding: 0;
    div {
      text-align: left;
      padding: 0 20px;
    }
  }
  td {
    vertical-align: top;
  }
}
.productImg {
  width: 60px;
  height: 60px;
  cursor: pointer;
  object-fit: contain;
  vertical-align: middle;
  border: none;
}
p {
  margin: 0px;
}
</style>