Commit f1b8dc95 by 杨子

feat(路由): 添加通过路由参数自动触发创建操作的功能

refactor(统计卡片): 将统计卡片重构为可配置的组件结构
fix(表单): 修复表单双向绑定问题
style(登录页): 移除未使用的背景图片样式
parent f181e6a1
......@@ -4,60 +4,15 @@
<div class="stats-quick-container grid grid-cols-1 lg:grid-cols-4 gap-4 mb-6">
<!-- 统计概览卡片 -->
<div class="stats-container grid grid-cols-1 md:grid-cols-2 lg:grid-cols-4 gap-4 lg:col-span-3">
<el-card shadow="hover" class="h-[120px]">
<div class="flex items-center justify-between">
<div>
<p class="text-gray-500 text-sm">总库存</p>
<el-statistic :value="statistics.totalQuantity" :precision="0" suffix="件" class="text-2xl font-bold" />
</div>
<div class="stat-icon bg-blue-100 text-blue-600 p-3 rounded-full">
<el-icon :size="32">
<Goods />
</el-icon>
</div>
</div>
</el-card>
<el-card shadow="hover" class="h-[120px]">
<div class="flex items-center justify-between">
<div>
<p class="text-gray-500 text-sm">今日入库</p>
<el-statistic :value="statistics.todayInboundQuantity" :precision="0" suffix="件"
class="text-2xl font-bold" />
</div>
<div class="stat-icon bg-green-100 text-green-600 p-3 rounded-full">
<el-icon :size="32">
<Plus />
</el-icon>
</div>
</div>
</el-card>
<el-card shadow="hover" class="h-[120px]">
<el-card v-for="(item, index) in statCards" :key="index" shadow="hover" class="h-[120px]">
<div class="flex items-center justify-between">
<div>
<p class="text-gray-500 text-sm">今日出库</p>
<el-statistic :value="statistics.todayOutboundQuantity" :precision="0" suffix="件"
class="text-2xl font-bold" />
<p class="text-gray-500 text-sm">{{ item.title }}</p>
<el-statistic :value="statistics[item.field]" :precision="0" :suffix="item.suffix" class="text-2xl font-bold" />
</div>
<div class="stat-icon bg-purple-100 text-purple-600 p-3 rounded-full">
<div :class="`stat-icon ${item.iconClass} p-3 rounded-full flex items-center justify-center w-12 h-12`">
<el-icon :size="32">
<Minus />
</el-icon>
</div>
</div>
</el-card>
<el-card shadow="hover" class="h-[120px]">
<div class="flex items-center justify-between">
<div>
<p class="text-gray-500 text-sm">物资总数</p>
<el-statistic :value="statistics.nonZeroMaterialCount" :precision="0" suffix="种"
class="text-2xl font-bold" />
</div>
<div class="stat-icon bg-cyan-100 text-cyan-600 p-3 rounded-full">
<el-icon :size="32">
<List />
<component :is="item.icon" />
</el-icon>
</div>
</div>
......@@ -406,6 +361,14 @@ const { proxy } = getCurrentInstance()
const { alert_status, alert_level, alarm_type, flow_type, task_type, check_status, diff_type } = proxy.useDict('alert_status', 'alert_level', 'alarm_type', 'flow_type', 'task_type', 'check_status', 'diff_type')
// 统计卡片配置
const statCards = ref([
{ title: '总库存', field: 'totalQuantity', suffix: '件', icon: Goods, iconClass: 'bg-blue-100 text-blue-600' },
{ title: '今日入库', field: 'todayInboundQuantity', suffix: '件', icon: Plus, iconClass: 'bg-green-100 text-green-600' },
{ title: '今日出库', field: 'todayOutboundQuantity', suffix: '件', icon: Minus, iconClass: 'bg-purple-100 text-purple-600' },
{ title: '物资总数', field: 'nonZeroMaterialCount', suffix: '种', icon: List, iconClass: 'bg-cyan-100 text-cyan-600' }
])
// 统计数据
const statistics = ref({
totalQuantity: 0,
......@@ -563,8 +526,8 @@ const initWarehouseInventoryChart = () => {
formatter: '{a} <br/>{b}: {c} ({d}%)'
},
legend: {
top: '5%',
left: 'center',
orient: 'vertical',
left: 10,
type: chartData.length > 10 ? 'scroll' : 'plain'
},
series: [
......@@ -572,7 +535,7 @@ const initWarehouseInventoryChart = () => {
name: chartTitle,
type: 'pie',
radius: '60%',
center: ['50%', '60%'],
radius: ['40%', '70%'],
data: chartData,
emphasis: {
itemStyle: {
......@@ -804,16 +767,13 @@ function loadTaskDetail(taskId) {
const handleQuickAction = (actionType) => {
switch (actionType) {
case 'inventory':
ElMessage.info('跳转到新增盘点任务页面')
// 这里可以添加路由跳转逻辑
router.push({ path: '/inventoryManagement/wmsInventoryTask', query: { action: 'createTask' } })
break
case 'inbound':
ElMessage.info('跳转到新增入库单页面')
// 这里可以添加路由跳转逻辑
router.push({ path: '/inOutManagement/wmsInboundOrder', query: { action: 'createInOrder' } })
break
case 'outbound':
ElMessage.info('跳转到新增出库单页面')
// 这里可以添加路由跳转逻辑
router.push({ path: '/inOutManagement/wmsOutboundOrder', query: { action: 'createOutOrder' } })
break
case 'query':
router.push('/inOutManagement/wmsInventory')
......
......@@ -583,10 +583,6 @@ function createBgDots() {
.text-image {
// width: 1200px;
height: 4.44vh;
background-image: url("@/assets/images/login-title-1.png");
background-repeat: no-repeat;
background-position: center;
background-size: 100%;
}
</style>
......@@ -145,9 +145,12 @@ import DetailInfo from "./components/DetailInfo.vue"
import EditForm from "./components/EditForm.vue"
import useUserStore from '@/store/modules/user'
import { dayjs } from "element-plus"
import { useRoute } from "vue-router"
import { watch } from "vue"
const { proxy } = getCurrentInstance()
const route = useRoute()
const { inbound_type, in_order_status } = proxy.useDict('inbound_type', 'in_order_status')
......@@ -689,6 +692,11 @@ function showAdjustBtn(row) {
// 当订单状态不是'0'且操作时间(applyTime)小于等于7天时显示调整按钮
return row.orderStatus !== '0' && dayjs(row.applyTime).isSameOrAfter(dayjs().subtract(7, 'day'))
}
// 监听路由参数中的action
watch(() => route.query.action, (newAction) => {
if (newAction === 'createInOrder') {
handleAdd()
}
}, { immediate: true })
getList()
</script>
\ No newline at end of file
......@@ -81,6 +81,10 @@ import { listWmsInventoryTask, getWmsInventoryTask, delWmsInventoryTask, addWmsI
import DetailInfo from "./components/DetailInfo.vue"
import AddForm from "./components/AddForm.vue"
import InventoryExecuteForm from "./components/InventoryExecuteForm.vue"
import {useRoute} from "vue-router"
import { watch } from "vue"
const route = useRoute()
const { proxy } = getCurrentInstance()
......@@ -266,6 +270,11 @@ function handleExecute(row) {
// 传递任务ID到执行盘点组件
inventoryExecuteFormRef.value?.open(row.taskId)
}
// 监听路由参数中的action
watch(() => route.query.action, (newAction) => {
if (newAction === 'createTask') {
handleAdd()
}
}, { immediate: true })
getList()
</script>
......@@ -136,7 +136,7 @@
</template>
<script setup name="EditForm">
import { ref, reactive, watch } from 'vue'
import { ref, reactive, watch, computed } from 'vue'
const props = defineProps({
visible: {
......@@ -163,7 +163,14 @@ const props = defineProps({
const emit = defineEmits(['update:visible', 'submitSuccess', 'openWarehouseSelect', 'openCustomerSelect', 'openMaterialSelect', 'showError', 'showSuccess'])
const dialogVisible = ref(false)
const dialogVisible = computed({
get() {
return props.visible
},
set(value) {
emit('update:visible', value)
}
})
const form = computed({
get() {
......@@ -173,6 +180,8 @@ const form = computed({
return props.form
},
set(value) {
// 由于props是单向数据流,我们需要通过修改props.form的属性来更新数据
Object.assign(props.form, value)
}
})
......
......@@ -128,9 +128,13 @@ import { dayjs } from 'element-plus'
import BatchDetailDialog from './components/BatchDetailDialog.vue'
import WmsOutboundOrderDetail from './components/detail.vue'
import EditForm from './components/EditForm.vue'
import { useRoute } from "vue-router"
import { watch } from "vue"
const { proxy } = getCurrentInstance()
const route = useRoute()
const { outbound_type, out_order_status } = proxy.useDict('outbound_type', 'out_order_status')
const userStore = useUserStore()
......@@ -217,7 +221,7 @@ const data = reactive({
{ required: true, message: "出库类型不能为空", trigger: "change" }
],
warehouseId: [
{ required: true, message: "仓库ID不能为空", trigger: "blur" }
{ required: true, message: "仓库不能为空", trigger: "blur" }
],
totalQuantity: [
{ required: true, message: "总数量不能为空", trigger: "blur" }
......@@ -705,6 +709,11 @@ function handleDetail(row) {
currentOrder.value = row;
detailVisible.value = true
}
// 监听路由参数中的action
watch(() => route.query.action, (newAction) => {
if (newAction === 'createOutOrder') {
handleAdd()
}
}, { immediate: true })
getList()
</script>
Markdown is supported
0% or
You are about to add 0 people to the discussion. Proceed with caution.
Finish editing this message first!
Please register or to comment