123456789101112131415161718192021222324252627282930313233343536373839404142434445464748495051525354555657585960616263646566676869707172737475767778798081828384858687888990919293949596979899100101102103104105106107108109110111112113114115116117118119120121122123124125126127128129130131132133134135136137138139140141142143144145146147148149150151152153154155156157158159160161162163164165166167168169170171172173174175176177178179180181182183184185186187188189190191192193194195196197198199200201202203204205206207208209210211212213214215216217218219220221222223224225226227228229230231232233234235236237238239240241242243244245246247248249250251252253254255256257258259260261262263264265266267268269270271272273274275276277278279280281282283284285286287288289290291292293294295296297298299300301302303304305306307308309310311312313314315316317318319320321322323324325326327328329330331332333334335336337338339340341342343344345346347348349350351352353354355356357358359360361362363364365366367368369370371372373374375376377378379380381382383384385386387388389390391392393394395396397398399400401402403404405406407408409410411412413414415416417418419420421422423424425426427428429 |
- <template>
- <div class="detail-container">
- <el-page-header @back="goBack" :content="!edit ? '详情' : '编辑'"></el-page-header>
- <div id="printMe">
- <div class="main-title">
- <div class="title">出库单信息</div>
- </div>
- <div class="diy-table-1">
- <el-row :gutter="0">
- <el-col :span="8" class="item">
- <div class="label">出库单号</div>
- <div class="value">{{ detailData.id }}</div>
- </el-col>
- <el-col :span="8" class="item">
- <div class="label">单据日期</div>
- <div class="value">{{ detailData.orderTime }}</div>
- </el-col>
- <el-col :span="8" class="item">
- <div class="label">单据状态</div>
- <div class="value">
- {{ detailData.examineStatus | statusFilter }}
- </div>
- </el-col>
- <el-col :span="8" class="item">
- <div class="label">发货单号</div>
- <div class="value">{{ detailData.orderNo }}</div>
- </el-col>
- <el-col :span="16" class="item">
- <div class="label">经销商</div>
- <div class="value">{{ detailData.customerName }}</div>
- </el-col>
- <el-col :span="8" class="item">
- <div class="label">仓库</div>
- <div class="value">{{ detailData.correspondName }}</div>
- </el-col>
- <el-col :span="16" class="item">
- <div class="label">备注</div>
- <div class="value">
- <el-input v-model="detailData.remark" :readonly="!edit" placeholder="请输入备注"></el-input>
- </div>
- </el-col>
- <el-col :span="24" class="item file" style="width: 100%; height: auto">
- <div class="label" style="height: 140px">附件</div>
- <div class="value" style="height: 140px">
- <div class="file-list" v-if="edit">
- <ImageUpload :file-list="fileList" multiple />
- </div>
- <div class="file-list" v-else>
- <div class="file-item" v-for="item in detailData.salesOrderPictures">
- <el-image
- v-if="checkFileType(item.fileUrl) == 'image'"
- class="img"
- fit="fill"
- :src="$imageUrl + item.fileUrl"
- :preview-src-list="[$imageUrl + item.fileUrl]"
- ></el-image>
- <div v-else class="box2" @click="openLink(item.fileUrl)">
- <img src="@/assets/common/word.png" v-if="checkFileType(item.fileUrl) == 'word'" />
- <img src="@/assets/common/excel.png" v-if="checkFileType(item.fileUrl) == 'excel'" />
- <img src="@/assets/common/ppt.png" v-if="checkFileType(item.fileUrl) == 'ppt'" />
- <img src="@/assets/common/pdf.png" v-if="checkFileType(item.fileUrl) == 'pdf'" />
- <div class="name ellipsis-3">{{ item.fileName }}</div>
- </div>
- </div>
- </div>
- </div>
- </el-col>
- </el-row>
- </div>
- <!-- <div class="fileUpload" v-if="edit">
- <div class="main-title">
- <div class="title">上传附件</div>
- </div>
- <fileUpload :fileList="fileList" multiple />
- </div> -->
- <div class="main-title">
- <div class="title">货品信息</div>
- </div>
- <div class="table">
- <el-table
- :data="detailData.saleOrderData"
- element-loading-text="Loading"
- border
- fit
- highlight-current-row
- stripe
- max-height="400"
- show-summary
- :summary-method="$getSummaries"
- >
- <el-table-column align="center" label="序号" type="index" width="50"></el-table-column>
- <el-table-column align="center" label="销售订单号" prop="mainOrderId" min-width="180" show-overflow-tooltip>
- <template slot-scope="scope">
- {{
- scope.row.orderType === 'TRADE' ||
- scope.row.orderType === 'HOME' ||
- scope.row.orderType === 'REQUISITION_TRADE' ||
- scope.row.orderType === 'REQUISITION_HOME'
- ? scope.row.enginOrderNo
- : scope.row.mainOrderId
- }}
- </template>
- </el-table-column>
- <el-table-column
- align="center"
- label="物料编码"
- prop="materialCode"
- min-width="120"
- show-overflow-tooltip
- ></el-table-column>
- <el-table-column
- align="center"
- label="产品编码"
- prop="materialOldNumber"
- min-width="120"
- show-overflow-tooltip
- ></el-table-column>
- <el-table-column
- align="center"
- label="产品名称"
- prop="materialName"
- min-width="160"
- show-overflow-tooltip
- ></el-table-column>
- <el-table-column
- align="center"
- label="规格型号"
- prop="specification"
- min-width="160"
- show-overflow-tooltip
- ></el-table-column>
- <el-table-column
- align="center"
- label="单位"
- prop="unit"
- min-width="100"
- show-overflow-tooltip
- ></el-table-column>
- <el-table-column align="right" label="数量" prop="refundableQty" min-width="100" show-overflow-tooltip>
- <template slot-scope="scope">
- <template v-if="edit">
- <el-input
- size="mini"
- class="input"
- v-model="scope.row.refundableQty"
- placeholder="请输入数量"
- ></el-input>
- </template>
- <template v-else>
- {{ scope.row.refundableQty }}
- </template>
- </template>
- </el-table-column>
- <!-- <el-table-column align="right" label="单价" prop="price" min-width="100" show-overflow-tooltip>
- <template slot-scope="scope">
- {{ scope.row.price | numToFixed }}
- </template>
- </el-table-column>
- <el-table-column align="right" label="订单金额" prop="payAmount" min-width="100" show-overflow-tooltip>
- <template slot-scope="scope">
- {{ scope.row.payAmount | numToFixed }}
- </template>
- </el-table-column> -->
- <el-table-column align="left" label="表头备注" prop="headerRemark" min-width="160" show-overflow-tooltip>
- <template slot-scope="scope">
- <template v-if="edit">
- <el-input
- size="mini"
- class="input"
- v-model="scope.row.headerRemark"
- placeholder="请输入表头备注"
- ></el-input>
- </template>
- <template v-else>
- {{ scope.row.headerRemark }}
- </template>
- </template>
- </el-table-column>
- <!-- <el-table-column align="left" label="发货申请备注" prop="remark" min-width="160" show-overflow-tooltip></el-table-column> -->
- <el-table-column align="left" label="表体备注" prop="invoiceRemark" min-width="160" show-overflow-tooltip>
- <template slot-scope="scope">
- <template v-if="edit">
- <el-input
- size="mini"
- class="input"
- v-model="scope.row.invoiceRemark"
- placeholder="请输表体备注"
- ></el-input>
- </template>
- <template v-else>
- {{ scope.row.invoiceRemark }}
- </template>
- </template>
- </el-table-column>
- <el-table-column
- align="left"
- label="表头业务员"
- prop="k3ServiceName"
- min-width="100"
- show-overflow-tooltip
- ></el-table-column>
- <el-table-column
- align="left"
- label="表体业务员"
- prop="serviceName"
- min-width="100"
- show-overflow-tooltip
- ></el-table-column>
- <el-table-column
- align="left"
- label="打印时间"
- prop="printTime"
- min-width="100"
- show-overflow-tooltip
- sortable
- ></el-table-column>
- <el-table-column
- align="left"
- label="打印状态"
- prop="printStatus"
- min-width="100"
- show-overflow-tooltip
- sortable
- >
- <template slot-scope="scope">
- {{ scope.row.printStatus == 1 ? '已打印' : '未打印' }}
- </template>
- </el-table-column>
- </el-table>
- </div>
- <div class="main-title">
- <div class="title">审批记录</div>
- </div>
- <div class="diy-table-1">
- <el-row :gutter="0">
- <el-col :xs="12" :sm="12" :lg="12" class="item">
- <div class="label">审批人</div>
- <div class="value">{{ detailData.approvalName }}</div>
- </el-col>
- <el-col :xs="12" :sm="12" :lg="12" class="item">
- <div class="label">制单人</div>
- <div class="value">{{ detailData.createBy }}</div>
- </el-col>
- <el-col :xs="12" :sm="12" :lg="12" class="item">
- <div class="label">审批结果</div>
- <div class="value">
- {{ detailData.examineStatus | statusFilter }}
- </div>
- </el-col>
- <el-col :xs="12" :sm="12" :lg="12" class="item">
- <div class="label">审批时间</div>
- <div class="value">{{ detailData.approvalTime }}</div>
- </el-col>
- <el-col :xs="24" :sm="24" :lg="24" class="item">
- <div class="label">审批说明</div>
- <div class="value">{{ detailData.approvalRemark }}</div>
- </el-col>
- </el-row>
- </div>
- </div>
- <div style="margin: 10px" v-if="edit">
- <el-button type="primary" @click="updateNum">保存</el-button>
- </div>
- </div>
- </template>
- <script>
- import print from 'vue-print-nb'
- import { getDetail, updateNum } from '@/api/supply/sales'
- import { getFileUrl } from '@/api/common'
- import fileUpload from '@/components/Common/file-upload.vue'
- import ImageUpload from '@/components/Common/image-upload.vue'
- export default {
- name: 'SalesDetail',
- componentName: 'SalesDetail',
- props: ['listItem', 'edit'],
- components: {
- fileUpload,
- ImageUpload
- },
- directives: {
- print
- },
- filters: {
- statusFilter(val) {
- const statusList = [
- { label: '已保存', value: 'SAVE' },
- { label: '待审核', value: 'WAIT' },
- { label: '审核通过', value: 'OK' }
- // { label: '审核驳回', value: 'FAIL' },,
- ]
- let obj = statusList.find(o => o.value == val)
- return obj ? obj.label : ''
- }
- },
- data() {
- return {
- printObj: {
- id: 'printMe'
- },
- detailData: {},
- srcList: [],
- fileList: [],
- }
- },
- created() {
- this.getDetail()
- },
- methods: {
- // 返回列表
- goBack() {
- this.$emit('backListFormDetail')
- this.$parent.edit = false
- },
- updateNum() {
- this.detailData.saleOrderData.forEach(item => {
- item.remark = item.invoiceRemark
- item.invoiceNum = +item.refundableQty
- })
- const salesOrderPictures = []
- if (this.fileList.length) {
- this.fileList.forEach(k => {
- salesOrderPictures.push({
- fileName: k.name,
- fileUrl: k.url,
- salesId: this.detailData.id
- })
- })
- }
- updateNum({
- ...this.detailData,
- salesOrderPictures:salesOrderPictures
- }).then(res => {
- this.$successMsg('修改成功')
- this.$parent.edit = false
- this.goBack()
- this.$parent.getList()
- })
- },
- // 打开链接
- openLink(url) {
- getFileUrl({ key: url }).then(res => {
- window.open(res.data)
- })
- },
- // 检查文件类型
- checkFileType(url) {
- if (!url) return ''
- const fileSuffix = url.substring(url.lastIndexOf('.') + 1)
- if (['jpg', 'jpeg', 'png'].includes(fileSuffix)) {
- return 'image'
- } else if (['doc', 'docx', 'dot', 'wps', 'wpt'].includes(fileSuffix)) {
- return 'word'
- } else if (['xls', 'xlsx', 'xlt', 'et', 'ett'].includes(fileSuffix)) {
- return 'excel'
- } else if (['ppt', 'pptx', 'dps', 'dpt', 'pot', 'pps'].includes(fileSuffix)) {
- return 'ppt'
- } else if (['pdf'].includes(fileSuffix)) {
- return 'pdf'
- } else if (['zip', 'rar', 'gz', 'apk'].includes(fileSuffix)) {
- return 'file'
- } else {
- return ''
- }
- },
- // 获取详情
- getDetail() {
- getDetail({ id: this.listItem.id }).then(res => {
- if (res.data.saleOrderData) {
- res.data.saleOrderData.forEach(item => {
- item.sums1 = ['refundableQty']
- item.sums2 = ['payAmount', 'price']
- })
- }
- console.log(res.data);
- res.data.salesOrderPictures.forEach(k=>{
- this.fileList.push({
- hover: '',
- url:k.fileUrl,
- name:k.fileName,
- })
- this.srcList.push(this.$imageUrl+k.fileUrl)
- })
-
- this.detailData = res.data
- // this.srcList = [this.$imageUrl + this.detailData.fileUrl]
- })
- }
- }
- }
- </script>
- <style scoped lang="scss">
- .detail-container {
- width: 100%;
- height: 100%;
- .input {
- ::v-deep .el-input__inner {
- text-align: right !important;
- }
- }
- }
- .img-box {
- height: 150px;
- display: flex;
- align-items: center;
- }
- .file {
- width: 64px;
- height: 64px;
- }
- .fileUpload{
- margin-right: 10px;
- }
- </style>
|