物料新增+用户修改
This commit is contained in:
119
src/views/material/MaterialInfoAddModal.vue
Normal file
119
src/views/material/MaterialInfoAddModal.vue
Normal file
@@ -0,0 +1,119 @@
|
||||
<template>
|
||||
<a-modal
|
||||
v-model:visible="visible"
|
||||
:title="title"
|
||||
:mask-closable="false"
|
||||
:esc-to-close="false"
|
||||
:width="width >= 600 ? 600 : '100%'"
|
||||
draggable
|
||||
@before-ok="save"
|
||||
@close="reset"
|
||||
>
|
||||
<GiForm ref="formRef" v-model="form" :columns="columns" />
|
||||
</a-modal>
|
||||
</template>
|
||||
|
||||
<script setup lang="ts">
|
||||
import { Message } from '@arco-design/web-vue'
|
||||
import { useWindowSize } from '@vueuse/core'
|
||||
import { addMaterialInfo, getMaterialInfo, updateMaterialInfo } from '@/apis/material/materialInfo'
|
||||
import { type ColumnItem, GiForm } from '@/components/GiForm'
|
||||
import { useResetReactive } from '@/hooks'
|
||||
|
||||
const emit = defineEmits<{
|
||||
(e: 'save-success'): void
|
||||
}>()
|
||||
|
||||
const { width } = useWindowSize()
|
||||
|
||||
const dataId = ref('')
|
||||
const visible = ref(false)
|
||||
const isUpdate = computed(() => !!dataId.value)
|
||||
const title = computed(() => (isUpdate.value ? '修改物料管理' : '新增物料管理'))
|
||||
const formRef = ref<InstanceType<typeof GiForm>>()
|
||||
|
||||
const [form, resetForm] = useResetReactive({
|
||||
// todo 待补充
|
||||
})
|
||||
|
||||
const columns: ColumnItem[] = reactive([
|
||||
{
|
||||
label: '物料名称',
|
||||
field: 'materialName',
|
||||
type: 'input',
|
||||
span: 24,
|
||||
required: true,
|
||||
},
|
||||
{
|
||||
label: '物料编码',
|
||||
field: 'encoding',
|
||||
type: 'input',
|
||||
span: 24,
|
||||
required: true,
|
||||
},
|
||||
{
|
||||
label: '物料单位重量，单位(g)',
|
||||
field: 'unitWeight',
|
||||
type: 'input-number',
|
||||
span: 24,
|
||||
},
|
||||
{
|
||||
label: '物料单次可称量最大重量(kg)',
|
||||
field: 'maxWeight',
|
||||
type: 'input-number',
|
||||
span: 24,
|
||||
},
|
||||
{
|
||||
label: '物料照片上传',
|
||||
field: 'photoUrl',
|
||||
type: 'image',
|
||||
savePath: 'material/',
|
||||
span: 24,
|
||||
},
|
||||
])
|
||||
|
||||
// 重置
|
||||
const reset = () => {
|
||||
formRef.value?.formRef?.resetFields()
|
||||
resetForm()
|
||||
}
|
||||
|
||||
// 保存
|
||||
const save = async () => {
|
||||
try {
|
||||
const isInvalid = await formRef.value?.formRef?.validate()
|
||||
if (isInvalid) return false
|
||||
if (isUpdate.value) {
|
||||
await updateMaterialInfo(form, dataId.value)
|
||||
Message.success('修改成功')
|
||||
} else {
|
||||
await addMaterialInfo(form)
|
||||
Message.success('新增成功')
|
||||
}
|
||||
emit('save-success')
|
||||
return true
|
||||
} catch (error) {
|
||||
return false
|
||||
}
|
||||
}
|
||||
|
||||
// 新增
|
||||
const onAdd = async () => {
|
||||
reset()
|
||||
dataId.value = ''
|
||||
visible.value = true
|
||||
}
|
||||
|
||||
// 修改
|
||||
const onUpdate = async (id: string) => {
|
||||
reset()
|
||||
dataId.value = id
|
||||
const { data } = await getMaterialInfo(id)
|
||||
Object.assign(form, data)
|
||||
visible.value = true
|
||||
}
|
||||
|
||||
defineExpose({ onAdd, onUpdate })
|
||||
</script>
|
||||
|
||||
<style scoped lang="scss"></style>
|
||||
174
src/views/material/index.vue
Normal file
174
src/views/material/index.vue
Normal file
@@ -0,0 +1,174 @@
|
||||
<template>
|
||||
<div class="gi_table_page">
|
||||
<GiTable
|
||||
title="物料管理管理"
|
||||
row-key="id"
|
||||
:data="dataList"
|
||||
:columns="columns"
|
||||
:loading="loading"
|
||||
:scroll="{ x: '100%', y: '100%', minWidth: 1000 }"
|
||||
:pagination="pagination"
|
||||
:disabled-tools="['size']"
|
||||
:disabled-column-keys="['name']"
|
||||
@refresh="search"
|
||||
>
|
||||
<template #toolbar-left>
|
||||
<a-input-search v-model="queryForm.materialName" placeholder="请输入物料名称" allow-clear @search="search" />
|
||||
<a-input-search v-model="queryForm.encoding" placeholder="请输入物料编码" allow-clear @search="search" />
|
||||
<a-button @click="reset">
|
||||
<template #icon><icon-refresh /></template>
|
||||
<template #default>重置</template>
|
||||
</a-button>
|
||||
</template>
|
||||
<template #toolbar-right>
|
||||
<a-button v-permission="['admin:materialInfo:add']" type="primary" @click="onAdd">
|
||||
<template #icon><icon-plus /></template>
|
||||
<template #default>新增</template>
|
||||
</a-button>
|
||||
<a-button v-permission="['admin:materialInfo:export']" @click="onExport">
|
||||
<template #icon><icon-download /></template>
|
||||
<template #default>导出</template>
|
||||
</a-button>
|
||||
</template>
|
||||
<!-- 物料照片插槽：核心新增部分 -->
|
||||
<template #photoUrl="{ record }">
|
||||
<div class="photo-container">
|
||||
<img
|
||||
v-if="record.photoUrl"
|
||||
:src="record.photoUrl"
|
||||
alt="物料照片"
|
||||
class="material-photo"
|
||||
@error="handleImgError($event)"
|
||||
/>
|
||||
<span v-else class="no-photo">暂无照片</span>
|
||||
</div>
|
||||
</template>
|
||||
<template #action="{ record }">
|
||||
<a-space>
|
||||
<a-link v-permission="['admin:materialInfo:update']" title="修改" @click="onUpdate(record)">修改</a-link>
|
||||
<a-link
|
||||
v-permission="['admin:materialInfo:delete']"
|
||||
status="danger"
|
||||
:disabled="record.disabled"
|
||||
:title="record.disabled ? '不可删除' : '删除'"
|
||||
@click="onDelete(record)"
|
||||
>
|
||||
删除
|
||||
</a-link>
|
||||
</a-space>
|
||||
</template>
|
||||
</GiTable>
|
||||
|
||||
<MaterialInfoAddModal ref="MaterialInfoAddModalRef" @save-success="search" />
|
||||
</div>
|
||||
</template>
|
||||
|
||||
<script setup lang="ts">
|
||||
import MaterialInfoAddModal from './MaterialInfoAddModal.vue'
|
||||
import { type MaterialInfoQuery, type MaterialInfoResp, deleteMaterialInfo, exportMaterialInfo, listMaterialInfo } from '@/apis/material/materialInfo'
|
||||
import type { TableInstanceColumns } from '@/components/GiTable/type'
|
||||
import { useDownload, useTable } from '@/hooks'
|
||||
import { isMobile } from '@/utils'
|
||||
import has from '@/utils/has'
|
||||
|
||||
defineOptions({ name: 'MaterialInfo' })
|
||||
|
||||
const queryForm = reactive<MaterialInfoQuery>({
|
||||
materialName: undefined,
|
||||
encoding: undefined,
|
||||
sort: ['id,desc'],
|
||||
})
|
||||
|
||||
const {
|
||||
tableData: dataList,
|
||||
loading,
|
||||
pagination,
|
||||
search,
|
||||
handleDelete,
|
||||
} = useTable((page) => listMaterialInfo({ ...queryForm, ...page }), { immediate: true })
|
||||
const columns = ref<TableInstanceColumns[]>([
|
||||
{ title: '物料名称', dataIndex: 'materialName', slotName: 'materialName' },
|
||||
{ title: '物料编码', dataIndex: 'encoding', slotName: 'encoding' },
|
||||
{ title: '物料单位重量(g)', dataIndex: 'unitWeight', slotName: 'unitWeight' },
|
||||
{ title: '物料单次可称量最大重量(kg)', dataIndex: 'maxWeight', slotName: 'maxWeight' },
|
||||
// 可给photoUrl列添加宽度，优化显示
|
||||
{ title: '物料照片', dataIndex: 'photoUrl', slotName: 'photoUrl', width: 120, align: 'center' },
|
||||
{ title: '创建人', dataIndex: 'createUserString', slotName: 'createUser' },
|
||||
{ title: '创建时间', dataIndex: 'createTime', slotName: 'createTime' },
|
||||
{
|
||||
title: '操作',
|
||||
dataIndex: 'action',
|
||||
slotName: 'action',
|
||||
width: 160,
|
||||
align: 'center',
|
||||
fixed: !isMobile() ? 'right' : undefined,
|
||||
show: has.hasPermOr(['admin:materialInfo:detail', 'admin:materialInfo:update', 'admin:materialInfo:delete']),
|
||||
},
|
||||
])
|
||||
|
||||
// 重置
|
||||
const reset = () => {
|
||||
queryForm.materialName = undefined
|
||||
queryForm.encoding = undefined
|
||||
search()
|
||||
}
|
||||
|
||||
// 删除
|
||||
const onDelete = (record: MaterialInfoResp) => {
|
||||
return handleDelete(() => deleteMaterialInfo(record.id), {
|
||||
content: `是否确定删除该条数据？`,
|
||||
showModal: true,
|
||||
})
|
||||
}
|
||||
|
||||
// 导出
|
||||
const onExport = () => {
|
||||
useDownload(() => exportMaterialInfo(queryForm))
|
||||
}
|
||||
|
||||
// 图片加载失败处理函数（新增）
|
||||
const handleImgError = (e: Event) => {
|
||||
// 替换为你的默认图片地址（建议放在/static目录下）
|
||||
const target = e.target as HTMLImageElement
|
||||
target.src = '/static/images/default-material.png'
|
||||
}
|
||||
|
||||
const MaterialInfoAddModalRef = ref<InstanceType<typeof MaterialInfoAddModal>>()
|
||||
// 新增
|
||||
const onAdd = () => {
|
||||
MaterialInfoAddModalRef.value?.onAdd()
|
||||
}
|
||||
|
||||
// 修改
|
||||
const onUpdate = (record: MaterialInfoResp) => {
|
||||
MaterialInfoAddModalRef.value?.onUpdate(record.id)
|
||||
}
|
||||
|
||||
// 详情（补充定义，避免报错）
|
||||
const onDetail = (record: MaterialInfoResp) => {
|
||||
// 可补充详情逻辑，如打开详情弹窗
|
||||
console.log('物料详情', record)
|
||||
}
|
||||
</script>
|
||||
|
||||
<style scoped lang="scss">
|
||||
// 物料照片样式（新增）
|
||||
.photo-container {
|
||||
display: flex;
|
||||
align-items: center;
|
||||
justify-content: center;
|
||||
height: 80px;
|
||||
}
|
||||
|
||||
.material-photo {
|
||||
width: 80px;
|
||||
height: 80px;
|
||||
object-fit: cover; // 保持图片比例，避免拉伸
|
||||
border-radius: 4px;
|
||||
}
|
||||
|
||||
.no-photo {
|
||||
color: #999;
|
||||
font-size: 12px;
|
||||
}
|
||||
</style>
|
||||
Reference in New Issue
Block a user