浅念
385 lines
10 KiB
Vue
385 lines
10 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" />
|
|
<ElTableColumn label="审核人" prop="approver_name" min-width="120" />
|
|
<ElTableColumn label="审批时间" prop="approved_at" min-width="120" />
|
|
<ElTableColumn label="状态" prop="status_desc" 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: 'CrmStockingAuth' }) // 定义组件名称，用于 KeepAlive 缓存控制
|
|
|
|
const { hasAuth } = useAuth()
|
|
const orderDialog = reactive({
|
|
orderData: {} as OrderData
|
|
})
|
|
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 approvalNotes = 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 CrmService.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: '/crmpc/approval/auth_detil',
|
|
query: { id: row.id, biz_id: row.biz_id, instance_id: row.instance_id, status: row.status } // 可带客户名等参数
|
|
})
|
|
}
|
|
const getDictItemSelectlist = ref<any[]>([])
|
|
const getDictItemSelect = async () => {
|
|
const res = await commonService.getDictItemSelect({ dict_id: '18' })
|
|
getDictItemSelectlist.value = res
|
|
}
|
|
const instance_id = ref('')
|
|
const handleCreateRepair = async (row: any) => {
|
|
// getDictItemSelect()
|
|
instance_id.value = row.instance_id
|
|
const res = await CrmService.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 CrmService.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">
|
|
:deep(.el-table__empty-block) {
|
|
height: 100% !important;
|
|
min-height: 200px;
|
|
display: flex;
|
|
align-items: center;
|
|
justify-content: center;
|
|
}
|
|
.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 {
|
|
justify-content: space-around;
|
|
width: 500px;
|
|
margin: auto;
|
|
display: flex;
|
|
gap: 12px;
|
|
|
|
.reject-btn {
|
|
border-color: #409eff;
|
|
color: #409eff;
|
|
background: white;
|
|
|
|
&:hover {
|
|
background: #ecf5ff;
|
|
}
|
|
}
|
|
|
|
.approve-btn {
|
|
background: #409eff;
|
|
border-color: #409eff;
|
|
}
|
|
}
|
|
}
|
|
</style>
|