浅念
407 lines
11 KiB
Vue
407 lines
11 KiB
Vue
<template>
|
|
<div class="stocking-page">
|
|
<div class="stocking-toolbar boxshadow">
|
|
<!-- <div class="toolbar-left">
|
|
<ElButton type="primary" v-ripple @click="handleCreate">创建备货单</ElButton>
|
|
</div> -->
|
|
<div class="toolbar-right">
|
|
<el-input
|
|
v-model="keyword"
|
|
placeholder="请输入客户名称"
|
|
clearable
|
|
style="width: 260px"
|
|
@keyup.enter="getList"
|
|
>
|
|
<template #suffix>
|
|
<el-icon class="clickable" @click="getList"><Search /></el-icon>
|
|
</template>
|
|
</el-input>
|
|
</div>
|
|
</div>
|
|
|
|
<div class="boxshadow">
|
|
<ArtTable
|
|
ref="tableRef"
|
|
row-key="id"
|
|
:loading="loading"
|
|
:data="tableData"
|
|
:currentPage="pagination.currentPage"
|
|
:pageSize="pagination.pageSize"
|
|
:total="pagination.total"
|
|
@size-change="handleSizeChange"
|
|
@current-change="handleCurrentChange"
|
|
>
|
|
<template #default>
|
|
<ElTableColumn label="审批单名称" prop="flows_name" min-width="140" />
|
|
<ElTableColumn label="审批说明" prop="biz_desc" min-width="160" />
|
|
<ElTableColumn label="审批结果" prop="action_desc" min-width="160" />
|
|
<ElTableColumn label="提交人" prop="initiator_name" min-width="120">
|
|
<template #default="scope">
|
|
<div style="display: flex; align-items: center">
|
|
<img class="avatar" :src="scope.row.initiator_avatar" alt="" />
|
|
<p>{{ scope.row.initiator_name }}</p>
|
|
</div>
|
|
</template>
|
|
</ElTableColumn>
|
|
<ElTableColumn label="审核人" prop="approver_name" min-width="120" />
|
|
<ElTableColumn label="状态" prop="status_desc" min-width="120" />
|
|
<ElTableColumn label="审批时间" prop="approved_at" min-width="120" />
|
|
<ElTableColumn label="提交时间" prop="created_at" min-width="120" />
|
|
<ElTableColumn label="操作" fixed="right" min-width="140" align="center">
|
|
<template #default="scope">
|
|
<ElRow :gutter="10" justify="center">
|
|
<el-link
|
|
type="primary"
|
|
underline="never"
|
|
@click="handleView(scope.row)"
|
|
style="margin-right: 8px"
|
|
>
|
|
<i class="iconfont-sys"></i> 查看审批
|
|
</el-link>
|
|
<el-link
|
|
v-if="scope.row.status == 'pending'"
|
|
type="success"
|
|
underline="never"
|
|
@click="handleCreateRepair(scope.row)"
|
|
>
|
|
<i class="iconfont-sys"></i> 快速审批
|
|
</el-link>
|
|
</ElRow>
|
|
</template>
|
|
</ElTableColumn>
|
|
</template>
|
|
</ArtTable>
|
|
</div>
|
|
|
|
<!-- 快速审批弹出框 -->
|
|
<el-dialog
|
|
v-model="approvalDialogVisible"
|
|
title="合塑实业-汽车事业部-备货单(客户下定)"
|
|
width="80%"
|
|
:close-on-click-modal="false"
|
|
:close-on-press-escape="false"
|
|
class="approval-dialog"
|
|
>
|
|
<div class="approval-content">
|
|
<!-- 头部信息 -->
|
|
<OrderDetailContent :orderData="orderDialog.orderData" />
|
|
<!-- 审批备注 -->
|
|
<div class="info-section">
|
|
<ElRow :gutter="12">
|
|
<ElCol :span="24">
|
|
<el-input
|
|
v-model="approvalNotes"
|
|
type="textarea"
|
|
:rows="2"
|
|
placeholder="备注"
|
|
class="approval-notes"
|
|
/>
|
|
</ElCol>
|
|
</ElRow>
|
|
</div>
|
|
</div>
|
|
|
|
<template #footer>
|
|
<div class="dialog-footer">
|
|
<ElButton type="primary" plain size="large" class="submit-btn" @click="handleApprove('reject')"
|
|
>驳回</ElButton
|
|
>
|
|
<ElButton type="primary" size="large" class="submit-btn" @click="handleApprove('approve')"
|
|
>同意</ElButton
|
|
>
|
|
</div>
|
|
</template>
|
|
</el-dialog>
|
|
</div>
|
|
</template>
|
|
|
|
<script setup lang="ts">
|
|
import { router } from '@/router'
|
|
import { manageService } from '@/api/adminApi'
|
|
import { useAuth } from '@/composables/useAuth'
|
|
import { CrmService } from '@/api/crmApi'
|
|
import { commonService } from '@/api/commonApi'
|
|
import OrderDetailContent from '@/components/custom/OrderDetailContent.vue'
|
|
import type { OrderData } from '@/composables/useOrderDetailDialog'
|
|
defineOptions({ name: 'AdminStockingPage' })
|
|
const orderDialog = reactive({
|
|
orderData: {} as OrderData
|
|
})
|
|
const { hasAuth } = useAuth()
|
|
const loading = ref(false)
|
|
const keyword = ref('')
|
|
const tableRef = ref()
|
|
const tableData = ref<any[]>([])
|
|
const pagination = reactive({ currentPage: 1, pageSize: 10, total: 0 })
|
|
|
|
// 审批弹出框相关
|
|
const approvalDialogVisible = ref(false)
|
|
const stockingInfo = ref<any>({})
|
|
|
|
// 回显视图模型，字段与模板一致
|
|
const header = reactive({ order_no: '', salesman: '' })
|
|
const base = reactive({
|
|
pn_no: '',
|
|
date: '',
|
|
close_date: '',
|
|
channel: '',
|
|
customer_name: '',
|
|
client_country: '',
|
|
total_cif: '',
|
|
total_cif_currency: '',
|
|
contract_rate: ''
|
|
})
|
|
const items = ref<any[]>([])
|
|
|
|
const approvalNotes = ref('')
|
|
const approvalAction = ref('')
|
|
onMounted(() => {
|
|
getList()
|
|
})
|
|
|
|
watch([keyword], () => {
|
|
pagination.currentPage = 1
|
|
// 不自动请求，保持与截图行为一致，点击搜索或回车触发
|
|
})
|
|
|
|
const getList = async () => {
|
|
loading.value = true
|
|
try {
|
|
const { currentPage, pageSize } = pagination
|
|
const params = {
|
|
current: currentPage,
|
|
size: pageSize,
|
|
scene: 'history',
|
|
keyword: keyword.value
|
|
}
|
|
|
|
const { records, current, size, total } = await manageService.stockapprovalrecord(params)
|
|
tableData.value = records || []
|
|
Object.assign(pagination, { currentPage: current, pageSize: size, total })
|
|
} catch (error) {
|
|
console.error('获取列表失败:', error)
|
|
} finally {
|
|
loading.value = false
|
|
}
|
|
}
|
|
|
|
const handleSizeChange = (size: number) => {
|
|
pagination.pageSize = size
|
|
getList()
|
|
}
|
|
const handleCurrentChange = (page: number) => {
|
|
pagination.currentPage = page
|
|
getList()
|
|
}
|
|
const handleView = (row: any) => {
|
|
router.push({
|
|
path: '/admin/approval/stocking_auth_detil',
|
|
query: {
|
|
id: row.id,
|
|
biz_id: row.biz_id,
|
|
instance_id: row.instance_id,
|
|
status: row.status,
|
|
flow_type: row.flow_type,
|
|
step_index: row.step_index
|
|
} // 可带客户名等参数
|
|
})
|
|
}
|
|
const instance_id = ref('')
|
|
const handleCreateRepair = async (row: any) => {
|
|
instance_id.value = row.instance_id
|
|
const res = await manageService.checkStock({ id: row.biz_id })
|
|
const orderData: OrderData = res
|
|
orderDialog.orderData = orderData
|
|
approvalDialogVisible.value = true
|
|
}
|
|
|
|
// 审批操作
|
|
const handleApprove = async (approvalAction: string) => {
|
|
try {
|
|
// 这里调用审批API
|
|
const { message } = await manageService.stockapprovalpass({
|
|
instance_id: instance_id.value,
|
|
action: approvalAction,
|
|
comment: approvalNotes.value
|
|
})
|
|
|
|
ElMessage.success(message)
|
|
approvalDialogVisible.value = false
|
|
approvalNotes.value = ''
|
|
instance_id.value = ''
|
|
// 刷新列表
|
|
getList()
|
|
} catch (error) {
|
|
console.error('审批失败:', error)
|
|
ElMessage.error('审批失败')
|
|
}
|
|
}
|
|
</script>
|
|
|
|
<style scoped lang="scss">
|
|
.avatar {
|
|
width: 40px;
|
|
height: 40px;
|
|
border-radius: 6px;
|
|
margin-right: 10px;
|
|
}
|
|
.stocking-page {
|
|
background: var(--art-main-bg-color);
|
|
min-height: 100vh;
|
|
}
|
|
.stocking-toolbar {
|
|
display: flex;
|
|
justify-content: space-between;
|
|
align-items: center;
|
|
margin-bottom: 16px;
|
|
padding: 12px 16px;
|
|
background: var(--art-main-bg-color);
|
|
}
|
|
.toolbar-left {
|
|
display: flex;
|
|
align-items: center;
|
|
gap: 8px;
|
|
}
|
|
.toolbar-right {
|
|
display: flex;
|
|
align-items: center;
|
|
}
|
|
.clickable {
|
|
cursor: pointer;
|
|
}
|
|
|
|
// 审批弹出框样式
|
|
.approval-dialog {
|
|
.approval-content {
|
|
max-height: 70vh;
|
|
overflow-y: auto;
|
|
}
|
|
|
|
.header {
|
|
display: flex;
|
|
justify-content: center;
|
|
align-items: center;
|
|
margin-bottom: 12px;
|
|
color: #333333;
|
|
.mr40 { margin-right: 40px; }
|
|
}
|
|
|
|
.info-section {
|
|
margin-bottom: 24px;
|
|
|
|
.section-title {
|
|
display: flex;
|
|
align-items: center;
|
|
margin-bottom: 16px;
|
|
|
|
.title-bar {
|
|
width: 4px;
|
|
height: 20px;
|
|
background: #409eff;
|
|
margin-right: 8px;
|
|
border-radius: 2px;
|
|
}
|
|
|
|
span {
|
|
font-size: 16px;
|
|
font-weight: 600;
|
|
color: #303133;
|
|
}
|
|
}
|
|
}
|
|
|
|
.order-items {
|
|
.order-item {
|
|
border: 1px solid #e4e7ed;
|
|
border-radius: 8px;
|
|
padding: 16px;
|
|
margin-bottom: 16px;
|
|
background: #fafafa;
|
|
|
|
.item-header {
|
|
margin-bottom: 16px;
|
|
padding-bottom: 12px;
|
|
border-bottom: 1px solid #e4e7ed;
|
|
|
|
.item-title {
|
|
font-size: 16px;
|
|
font-weight: 600;
|
|
color: #303133;
|
|
}
|
|
}
|
|
|
|
.item-details {
|
|
.detail-row {
|
|
display: grid;
|
|
grid-template-columns: repeat(3, 1fr);
|
|
gap: 16px;
|
|
margin-bottom: 12px;
|
|
|
|
.detail-item {
|
|
display: flex;
|
|
flex-direction: column;
|
|
|
|
label {
|
|
margin-bottom: 6px;
|
|
font-size: 14px;
|
|
font-weight: 500;
|
|
color: #606266;
|
|
}
|
|
}
|
|
}
|
|
}
|
|
}
|
|
}
|
|
|
|
.summary-section {
|
|
display: flex;
|
|
justify-content: space-between;
|
|
align-items: center;
|
|
padding: 16px;
|
|
background: #f0f9ff;
|
|
border-radius: 8px;
|
|
margin-bottom: 24px;
|
|
|
|
.summary-item {
|
|
.summary-label {
|
|
font-weight: 600;
|
|
color: #606266;
|
|
margin-right: 8px;
|
|
}
|
|
.summary-value {
|
|
font-size: 18px;
|
|
font-weight: 700;
|
|
color: #409eff;
|
|
}
|
|
}
|
|
}
|
|
|
|
.approval-notes {
|
|
width: 100%;
|
|
}
|
|
|
|
.dialog-footer {
|
|
display: flex;
|
|
justify-content: space-around;
|
|
width: 500px;
|
|
margin: auto;
|
|
gap: 12px;
|
|
|
|
.reject-btn {
|
|
border-color: #409eff;
|
|
color: #409eff;
|
|
background: white;
|
|
|
|
&:hover {
|
|
background: #ecf5ff;
|
|
}
|
|
}
|
|
|
|
.approve-btn {
|
|
background: #409eff;
|
|
border-color: #409eff;
|
|
}
|
|
}
|
|
}
|
|
</style>
|