|
|
@@ -0,0 +1,389 @@
|
|
|
+<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: route.params.id })
|
|
|
+ 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
|
|
|
+ }
|
|
|
+ })
|
|
|
+}
|
|
|
+
|
|
|
+onMounted(() => {
|
|
|
+ const { params } = route
|
|
|
+ getStorehouseContractGet()
|
|
|
+ params.verify && (isVerify.value = false)
|
|
|
+ params.type === fnMd5('contract') && (isSale.value = true)
|
|
|
+
|
|
|
+ columns = isVerify.value ? columns : VerifyColumns
|
|
|
+})
|
|
|
+onUnmounted(() => {
|
|
|
+ isSale.value = false
|
|
|
+})
|
|
|
+</script>
|
|
|
+<template>
|
|
|
+ <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>
|
|
|
+</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>
|
YangJian0701