Cold_erp_web/src/views/storehouse/sales/verifyxiang.vue

<script setup lang="ts">
import { shallowRef, ref, onMounted, onUnmounted } from 'vue'
import { useRoute, useRouter } from 'vue-router'
import { GlobalStore } from '@/stores/index'
import { fnMd5 } from '@/utils/common'
import { ElMessage } from 'element-plus'
import Drawer from '@/components/Drawer/index.vue'
import ImageCom from '@/components/Image/index.vue'
import { ColumnProps } from '@/components/TableBase/interface/index'
import { Storehouse_Contract_Get, Storehouse_Contract_Approval } from '@/api/storehouse/index'

interface InfoType {
    Id: number
    T_State: number
    T_approver: string
    T_approver_name: string
    T_customer: string
    T_date: string
    T_money: number
    T_number: string
    T_out: number
    T_pdf: string
    T_remark: string
    T_submit: string
    T_type: number
    T_discount: number
    T_start_date: string
    T_end_date: string
    T_submit_name: string
    T_project: string
    T_no_recoveries_money: number
    T_no_invoice_money: number
}



const route = useRoute()
const router = useRouter()
const isSale = ref(false)
const isVerify = ref(true)
const tableSnData = ref<any[]>([])
const tableData = ref<any[]>([])
const invoiceTableData = ref<any[]>([])
const recoveriesTableData = ref<any[]>([])
const info = ref<InfoType | undefined>()
const globalStore = GlobalStore()
const drawerSnRef = ref<InstanceType<typeof Drawer> | null>(null)
const headerCellStyle = shallowRef({
    background: '#909399',
    height: '50px',
    color: '#fff'
})

let columns: ColumnProps[] = [
    { type: 'index', label: '序号', width: 80, align: 'center ' },
    { label: '产品图片', prop: 'T_product_img', align: 'center ', name: 'T_product_img' },
    { label: '产品名称', prop: 'T_product_name', align: 'center ' },
    { label: '产品分类', prop: 'T_product_class_name', align: 'center ' },
    { label: '产品型号', prop: 'T_product_model', align: 'center ', name: 'T_product_model' },
    { label: '产品规格', prop: 'T_product_spec', align: 'center ' },
    {
        label: '是否关联SN',
        prop: 'T_product_relation_sn',
        align: 'center ',
        width: 120,
        name: 'T_product_relation_sn'
    },
    { label: '数量', prop: 'T_product_total', align: 'center ' },
    { label: '已出库数量', prop: 'T_product_out', align: 'center ' },
    { prop: 'operation', label: '操作', width: 100, fixed: 'right', align: 'center ' }
]

const VerifyColumns: ColumnProps[] = [
    { type: 'index', label: '序号', width: 80, align: 'center ' },
    { label: '产品图片', prop: 'T_product_img', align: 'center ', name: 'T_product_img' },
    { label: '产品名称', prop: 'T_product_name', align: 'center ' },
    { label: '产品分类', prop: 'T_product_class_name', align: 'center ' },
    { label: '产品型号', prop: 'T_product_model', align: 'center ', name: 'T_product_model' },
    { label: '产品规格', prop: 'T_product_spec', align: 'center ' },
    { label: '数量', prop: 'T_product_total', align: 'center ' },
    { label: '单价', prop: 'T_price', align: 'center ' },
    { label: '总价', prop: 'total', align: 'center ' }
]

const columnsRecoveries = [
    { type: 'index', label: '序号', width: 80, align: 'center ' },
    { label: '回款时间', prop: 'T_date', align: 'center ' },
    { label: '回款金额', prop: 'T_money', align: 'center ' }
]

const columnsInvoice = [
    { type: 'index', label: '序号', width: 80, align: 'center ' },
    { label: '开票时间', prop: 'T_date', align: 'center ' },
    { label: '开票金额', prop: 'T_money', align: 'center ' }
]

const snColumns = [
    { type: 'index', label: '序号', width: 80, align: 'center ' },
    { label: 'SN', prop: 'sn', align: 'center ' }
]

const getStorehouseContractGet = async () => {
    const res: any = await Storehouse_Contract_Get({ User_tokey: globalStore.GET_User_tokey, T_number: window.sessionStorage.getItem('globaId') })
    if (res.Code === 200) {
        info.value = res.Data
        const { T_Product, T_invoice, T_recoveries } = res.Data
        tableData.value = T_Product
        invoiceTableData.value = T_invoice
        recoveriesTableData.value = T_recoveries
        if (!isVerify.value && T_Product) {
            tableData.value = T_Product.map((item: any) => {
                item.total = item.T_product_total * item.T_price
                return item
            })
        }
    }
}
const previewPdf = (str: string) => window.open(str)

const contractApproval = async (state: number) => {
    const res: any = await Storehouse_Contract_Approval({
        User_tokey: globalStore.GET_User_tokey,
        T_number: route.params.id,
        T_state: state
    })
    if (res.Code === 200) {
        ElMessage.success('审核成功！！')
        getStorehouseContractGet()
    }
}
const getState = (val: number, type: string) => {
    switch (val) {
        case 1:
            return type === 'T_State' ? '已通过' : '未出库'
        case 2:
            return type === 'T_State' ? '未通过' : '已部分出库'
        case 3:
            return type === 'T_State' ? '待审核' : '已全部出库'
    }
}

/**
 * 回调
 */
const callbackSnDrawer = (done: () => void) => done()

const previewSn = (devicelist: string[]) => {
    drawerSnRef.value?.openDrawer()
    if (!devicelist) return
    tableSnData.value = devicelist.map((item: string) => {
        return {
            sn: item
        }
    })
}

onUnmounted(() => {
    isSale.value = false
})

const drawerverifyRef = ref<InstanceType<typeof Drawer> | null>(null)
const openDrawer = () => drawerverifyRef.value?.openDrawer()

defineExpose({
  openDrawer,getStorehouseContractGet
})
</script>
<template>
    <Drawer ref="drawerverifyRef" size="70%">
        <div class="contract-detail">
            <div class="info">
                <h1>
                    详情<span v-if="isVerify"> - {{ getState(info?.T_State!, 'T_State') }}</span>
                </h1>
                <el-divider />
                <div class="content">
                    <el-row>
                        <el-col :xs="8" :sm="6" :md="4" :lg="3" :xl="2"><span>合同编号</span></el-col>
                        <el-col :xs="11" :sm="9" :md="7" :lg="6" :xl="5"><span>{{ info?.T_number! }}</span></el-col>
                    </el-row>
                    <el-row v-if="isVerify">
                        <el-col :xs="8" :sm="6" :md="4" :lg="3" :xl="2"> <span>客户名称</span></el-col>
                        <el-col :xs="11" :sm="9" :md="7" :lg="6" :xl="5"><span>{{ info?.T_customer! }}</span></el-col>
                    </el-row>
                    <el-row>
                        <el-col :xs="8" :sm="6" :md="4" :lg="3" :xl="2"><span>{{ isVerify ? '产品' : '验证' }}明细</span></el-col>
                        <el-col :span="21">
                            <el-table border stripe :data="tableData" style="width: 100%"
                                :header-cell-style="headerCellStyle">
                                <template v-for="item in columns" :key="item.prop">
                                    <el-table-column v-bind="item" v-if="item.fixed !== 'right'">
                                        <template #default="{ row }" v-if="item.prop === item.name">
                                            <span v-if="item.prop === 'T_product_relation_sn'">
                                                <el-tag v-if="row.T_product_relation_sn === 1" effect="dark">是</el-tag>
                                                <el-tag v-else type="success" effect="dark">否</el-tag>
                                            </span>
                                            <ImageCom v-if="item.prop === 'T_product_img'" :src="row.T_product_img" />
                                            <el-tooltip v-if="item.prop === 'T_product_model'" effect="dark"
                                                :content="row.T_product_model" placement="bottom">
                                                {{ row.T_product_model }}
                                            </el-tooltip>
                                        </template>
                                    </el-table-column>
                                    <el-table-column v-bind="item" v-if="item.fixed === 'right'">
                                        <template #default="{ row }">
                                            <el-button type="primary" :disabled="!row.T_product_relation_sn"
                                                @click="previewSn(row.T_device_list)">查看</el-button>
                                        </template>
                                    </el-table-column>
                                </template>
                            </el-table>
                        </el-col>
                    </el-row>
                    <el-row v-if="isVerify">
                        <el-col :xs="8" :sm="6" :md="4" :lg="3" :xl="2"> <span>业务日期</span></el-col>
                        <el-col :xs="11" :sm="9" :md="7" :lg="6" :xl="5">
                            <span>{{ info?.T_date! }}</span></el-col>
                    </el-row>

                    <el-row>
                        <el-col :xs="8" :sm="6" :md="4" :lg="3" :xl="2"> <span>合同金额</span></el-col>
                        <el-col :xs="11" :sm="9" :md="7" :lg="6" :xl="5">
                            <el-text type="danger">{{ info?.T_money! }}￥</el-text>
                        </el-col>
                    </el-row>
                    <el-row v-if="!isVerify">
                        <el-col :xs="8" :sm="6" :md="4" :lg="3" :xl="2"> <span>优惠金额</span></el-col>
                        <el-col :xs="11" :sm="9" :md="7" :lg="6" :xl="5">
                            <el-text type="danger">{{ info?.T_discount! }}￥</el-text>
                        </el-col>
                    </el-row>
                    <el-row v-if="!isVerify">
                        <el-col :xs="8" :sm="6" :md="4" :lg="3" :xl="2"> <span>签订时间</span></el-col>
                        <el-col :xs="11" :sm="9" :md="7" :lg="6" :xl="5">
                            <span>{{ info?.T_date! }}</span></el-col>
                    </el-row>
                    <el-row v-if="!isVerify">
                        <el-col :xs="8" :sm="6" :md="4" :lg="3" :xl="2"> <span>起始时间</span></el-col>
                        <el-col :xs="11" :sm="9" :md="7" :lg="6" :xl="5">
                            <span>{{ info?.T_start_date! }}</span></el-col>
                    </el-row>
                    <el-row v-if="!isVerify">
                        <el-col :xs="8" :sm="6" :md="4" :lg="3" :xl="2"> <span>终止时间</span></el-col>
                        <el-col :xs="11" :sm="9" :md="7" :lg="6" :xl="5">
                            <span>{{ info?.T_end_date! }}</span></el-col>
                    </el-row>

                    <el-row>
                        <el-col :xs="8" :sm="6" :md="4" :lg="3" :xl="2"> <span>项目</span></el-col>
                        <el-col :xs="11" :sm="9" :md="7" :lg="6" :xl="5">
                            <span>{{ info?.T_project }}</span>
                        </el-col>
                    </el-row>

                    <el-row v-if="isVerify">
                        <!-- 1-未出库 2-已部分出库 3-已全部出库 -->
                        <el-col :xs="8" :sm="6" :md="4" :lg="3" :xl="2"><span>出库状态</span></el-col>
                        <el-col :xs="11" :sm="9" :md="7" :lg="6" :xl="5"><span>{{ getState(info?.T_out!, 'T_out')
                        }}</span></el-col>
                    </el-row>

                    <el-row v-if="isVerify">
                        <el-col :xs="8" :sm="6" :md="4" :lg="3" :xl="2"><span v-if="isVerify">经办人</span><span
                                v-else>合同负责人</span></el-col>
                        <el-col :xs="11" :sm="9" :md="7" :lg="6" :xl="5"><span>{{ info?.T_submit_name! }}</span></el-col>
                    </el-row>

                    <el-row>
                        <el-col :xs="8" :sm="6" :md="4" :lg="3" :xl="2"><span>合同备注</span></el-col>
                        <el-col :xs="11" :sm="9" :md="7" :lg="6" :xl="5"><span>{{ info?.T_remark! }}</span></el-col>
                    </el-row>

                    <el-row>
                        <el-col :xs="8" :sm="6" :md="4" :lg="3" :xl="2"><span>附件</span></el-col>
                        <el-col :xs="11" :sm="9" :md="7" :lg="6" :xl="5"><span v-if="!info?.T_pdf!">无</span>
                            <el-button v-else type="primary" @click="previewPdf(info?.T_pdf!)">查看附件</el-button></el-col>
                    </el-row>

                    <el-row>
                        <el-col :xs="8" :sm="6" :md="4" :lg="3" :xl="2"><span>回款明细</span></el-col>
                        <el-col :span="21">
                            <el-table border stripe :data="recoveriesTableData" style="width: 100%"
                                :header-cell-style="headerCellStyle">
                                <el-table-column v-bind="item" v-for="item in columnsRecoveries"
                                    :key="item.prop"></el-table-column>
                            </el-table>
                        </el-col>
                    </el-row>

                    <el-row v-if="isVerify">
                        <el-col :xs="8" :sm="6" :md="4" :lg="3" :xl="2"><span>未回款金额</span></el-col>
                        <el-col :xs="11" :sm="9" :md="7" :lg="6" :xl="5">
                            <el-text type="danger">{{ info?.T_no_recoveries_money! }}￥</el-text>
                        </el-col>
                    </el-row>

                    <el-row>
                        <el-col :xs="8" :sm="6" :md="4" :lg="3" :xl="2"><span>开票明细</span></el-col>
                        <el-col :span="21">
                            <el-table border stripe :data="invoiceTableData" style="width: 100%"
                                :header-cell-style="headerCellStyle">
                                <el-table-column v-bind="item" v-for="item in columnsInvoice"
                                    :key="item.prop"></el-table-column>
                            </el-table>
                        </el-col>
                    </el-row>
                    <el-row v-if="isVerify">
                        <el-col :xs="8" :sm="6" :md="4" :lg="3" :xl="2"><span>未开票金额</span></el-col>
                        <el-col :xs="11" :sm="9" :md="7" :lg="6" :xl="5"><el-text type="danger">{{ info?.T_no_invoice_money!
                        }}￥</el-text></el-col>
                    </el-row>
                </div>

                <el-divider />
                <div class="submit">
                    <el-button v-if="info?.T_State === 3 && isSale" type="danger" round
                        @click="contractApproval(2)">审核不通过</el-button>
                    <el-button v-if="info?.T_State === 3 && isSale" type="success" round
                        @click="contractApproval(1)">审核通过</el-button>
                    <el-button type="primary" round @click="router.back()">返回</el-button>
                </div>
            </div>
            <Drawer ref="drawerSnRef" :handleClose="callbackSnDrawer" size="30%">
                <el-table :data="tableSnData" style="width: 100%; height: 99%" :header-cell-style="headerCellStyle">
                    <template v-for="item in snColumns" :key="item">
                        <el-table-column v-if="item.type === 'index'" v-bind="item" />
                        <el-table-column v-if="item.prop" v-bind="item" />
                    </template>
                </el-table>
            </Drawer>
        </div>
    </Drawer>
</template>

<style scoped lang="scss">
.contract-detail {
    height: 100%;
    font-weight: bold;
    color: var(--el-text-color-secondary);

    .info {
        height: 100%;
        padding: 20px;

        h1 {
            font-size: 24px;

            span {
                color: #f56c6c;
            }
        }

        & .content {
            height: calc(100% - 72px - 25px - 40px);
            overflow-y: auto;

            .el-row {
                margin-bottom: 16px;
            }
        }

        .submit {
            display: flex;
            justify-content: center;
        }
    }
}
</style>