123456789101112131415161718192021222324252627282930313233343536373839404142434445464748495051525354555657585960616263646566676869707172737475767778798081828384858687888990919293949596979899100101102103104105106107108109110111112113114115116117118119120121122123124125126127128129130131132133134135136137138139140141142143144145146147148149150151152153154155156157158159160161162163164165166167168169170171172173174175176177178179180181182183184185186187188189190191192193194195196197198199200201202203204205206207208209210211212213214215216217218219220221222223224225226227228229230231232233234235236237238239240241242243244245246247248249250251252253254255256257258259260261262263264265266267268269270271272273274275276277278279280281282283284285286287288289290291292293294295296297298299300301302303304305306307308309310 |
- <template>
- <a-modal
- centered
- class="vinRecord-modal"
- :footer="null"
- :maskClosable="false"
- :title="shelfName"
- v-model="isShow"
- @cancel="isShow=false"
- width="60%">
- <!-- 详情 -->
- <div v-if="itemData">
- <a-descriptions :column="3" size="default">
- <a-descriptions-item label="调回单号">{{ itemData.recallBillNo }}</a-descriptions-item>
- <a-descriptions-item label="创建时间">{{ itemData.createDate }}</a-descriptions-item>
- <a-descriptions-item label="状态" :span="1">{{ itemData.billStateDictValue }}</a-descriptions-item>
- <a-descriptions-item label="退库时间">{{ itemData.confirmTime }}</a-descriptions-item>
- <a-descriptions-item style="width:calc(100% - 18px);background:red">
- <span style="color:rgba(0, 0, 0, 0.85)">关联销售退货单:</span>
- <span v-if="salesReturnBillList && salesReturnBillList.length>0">
- <span v-for="con in salesReturnBillList" :key="con.id" class="recallBillNo" @click="jumpDetail(con)">{{ con.salesReturnNo }}</span>
- </span>
- <span v-else>
- --
- </span>
- <a-button type="primary" ghost class="recallBillBtn" @click="seeRecallBill" v-if="itemData.billState != 'CANCEL'">生成销售退货单</a-button>
- </a-descriptions-item>
- </a-descriptions>
- </div>
- <!-- 表格 -->
- <div class="table-body" v-if="detailList && detailList.length>0">
- <a-table
- :columns="columns"
- :data-source="detailList"
- :scroll="{ y: 300 }"
- :rowKey="(record) => record.id"
- :pagination="false"
- :bordered="true"
- ></a-table>
- </div>
- <div class="btn-cont"><a-button id="vinRecord-modal-back" @click="isShow = false">关闭</a-button></div>
- <!-- 回调单号提示窗 -->
- <a-modal
- class="tipPopup"
- :maskClosable="false"
- v-model="tipVisible"
- :centered="true"
- :closable="false"
- :footer="null"
- width="23%">
- <div class="tipTop" v-if="itemData">
- <div>产品总款数:<span>{{ itemData.totalCategory }}</span></div>
- <div>产品总件数:<span>{{ itemData.viewQty }}</span></div>
- </div>
- <div class="tipCon" v-if="salesReturnBillList && salesReturnBillList.length==0">确认生成销售退货订单吗?</div>
- <div v-else>
- <div class="tipCon">此调回单已经存在相应的销售退货单,确定再次生成销售退货单吗?</div>
- <div class="tipRecallBillNo">
- <p v-for="con in salesReturnBillList" :key="con.id" @click="jumpDetail(con)">{{ con.salesReturnNo }}</p>
- </div>
- </div>
- <div class="tipFooter">
- <a-button class="btnLeft" type="link" @click="tipVisible = false">
- 取消
- </a-button>
- <a-button class="btnLeft" type="link" @click="setReturnBill" :loading="btnLoading">
- 确定
- </a-button>
- </div>
- </a-modal>
- </a-modal>
- </template>
- <script>
- import { generateSaleReturnBill } from '@/api/shelfRecall.js'
- export default {
- name: 'DetailModal',
- props: {
- openModal: { // 弹框显示状态
- type: Boolean,
- default: false
- },
- itemData: {
- type: Object,
- default: function () {
- return []
- }
- }
- },
- data () {
- return {
- isShow: this.openModal, // 是否打开弹框
- tipVisible: false,
- salesReturnBillList: [],
- detailList: [],
- btnLoading: false,
- columns: [{
- title: '序号',
- dataIndex: 'no',
- width: '10%',
- align: 'center'
- },
- {
- title: '产品编码',
- dataIndex: 'productCode',
- width: '15%',
- align: 'center',
- customRender: function (text) {
- return text || '--'
- }
- },
- {
- title: '产品名称',
- dataIndex: 'productName',
- width: '30%',
- align: 'left',
- customRender: function (text) {
- return text || '--'
- },
- ellipsis: true
- },
- {
- title: '调回数量',
- dataIndex: 'qty',
- width: '15%',
- align: 'center',
- customRender: function (text) {
- return text || text == 0 ? text : '--'
- }
- },
- {
- title: '实退数量',
- dataIndex: 'confirmQty',
- width: '15%',
- align: 'center',
- customRender: function (text) {
- return text || text == 0 ? text : '--'
- }
- },
- {
- title: '单位',
- dataIndex: 'product.unit',
- width: '15%',
- align: 'center',
- customRender: function (text) {
- return text || text == 0 ? text : '--'
- }
- }
- ],
- shelfName: ''
- }
- },
- watch: {
- // 父页面传过来的弹框状态
- openModal (newValue, oldValue) {
- this.isShow = newValue
- },
- // 重定义的弹框状态
- isShow (newValue, oldValue) {
- if (!newValue) {
- this.$emit('close')
- } else {
- if (this.itemData) {
- this.salesReturnBillList = this.itemData.salesReturnBillList ? this.itemData.salesReturnBillList : []
- this.itemData.detailList.map((con, i) => {
- con.no = i + 1
- })
- this.detailList = this.itemData.detailList
- this.shelfName = '调回单详情——' + this.itemData.shelfInfo.shelfName
- }
- }
- }
- },
- methods: {
- seeRecallBill () {
- this.tipVisible = true
- },
- // 生成销售退货单
- setReturnBill () {
- this.spinning = true
- this.btnLoading = true
- generateSaleReturnBill({ recallBillSn: this.itemData.recallBillSn }).then(res => {
- if (res.status == 200) {
- this.$message.success(res.message)
- this.tipVisible = false
- this.$emit('close')
- this.spinning = false
- } else {
- this.spinning = false
- }
- this.btnLoading = false
- })
- },
- jumpDetail (row) {
- const _this = this
- if (row.delFlag == 0) {
- _this.isShow = false
- _this.tipVisible = false
- _this.$router.push({ name: 'salesReturnDetail', params: { id: row.id, sn: row.salesReturnSn } })
- } else {
- _this.$error({
- title: '提示',
- content: '此销售退货单已删除,无法查看详情',
- centered: true
- })
- }
- }
- }
- }
- </script>
- <style lang="less">
- .vinRecord-modal{
- .ant-modal-body {
- padding: 40px 40px 24px;
- }
- .ant-modal-title{
- font-weight: 600;
- }
- .btn-cont {
- text-align: center;
- margin: 35px 0 10px;
- }
- .table-body{
- margin-top:10px;
- // table{
- // th,td{
- // text-align: center;
- // padding: 5px;
- // border:1px solid #ddd;
- // }
- // th{
- // background:#f8f8f8;
- // }
- // }
- }
- .recallBillNo{
- color:#39f;
- font-weight: 600;
- cursor: pointer;
- }
- .recallBillNo:not(:last-child)::after{
- content:',';
- }
- .recallBillBtn{
- border-color:#39f;
- color:#39f;
- margin-left: 20px;
- &:hover, &:focus {
- border-color: #52a6fb;
- color: #52a6fb;
- }
- }
- .ant-descriptions-item{
- vertical-align: top;
- }
- }
- // 弹窗
- .tipPopup{
- .ant-modal-body{
- padding:0 !important;
- }
- text-align: center;
- .tipTop{
- width:62%;
- display: flex;
- algin-item:center;
- padding:20px 0;
- box-sizing: border-box;
- justify-content: space-between;
- color:#333;
- margin:0 auto;
- span{
- color:#f30f30;
- font-weight: bold;
- }
- }
- .tipCon{
- width:62%;
- margin: 0 auto 30px;
- text-align: center;
- }
- .tipRecallBillNo{
- padding:0 20px;
- p{
- padding-bottom: 15px;
- border-bottom: 1px solid #e0e0e0;
- }
- }
- .tipFooter{
- display: flex;
- algin-item:center;
- border-top:1px solid #e0e0e0;
- :hover{
- }
- .btnLeft{
- width:50%;
- text-align: center;
- height:46px;
- line-height: 46px;
- color:#39f;
- &:first-child{
- border-right:1px solid #e0e0e0;
- }
- }
- }
- }
- </style>
|