<template>
|
<div class="system-add-menu-container">
|
<el-dialog :title="addGoodsState.title" :close-on-click-modal="false" v-model="addGoodsState.showAddGoodsDialog" width="50%">
|
<el-tabs class="active" v-model="addGoodsState.activeName">
|
<el-tab-pane label="物资信息" name="goodsInformation">
|
<div class="filter-container" style="padding-bottom: 20px">
|
<el-button size="default" type="primary" @click="onOpenGoodsClassifyDialog('新增', '')">
|
<el-icon>
|
<ele-FolderAdd />
|
</el-icon>
|
新增分类
|
</el-button>
|
</div>
|
|
<el-table
|
:data="addGoodsState.goodsData"
|
border fit highlight-current-row lazy
|
row-key="id"
|
:load="load"
|
:row-class-name="tableRowClassName"
|
:header-cell-style="{ background: '#fafafa' }"
|
:tree-props="{ children: 'childList', hasChildren: true }"
|
style="width: 100%">
|
<el-table-column prop="materialClassifyName" label="分类名称" show-overflow-tooltip align="center"/>
|
<el-table-column prop="materialClassifyName" label="类别" show-overflow-tooltip align="center">
|
<template #default="scope">
|
<div v-if="scope.row.parentId === 0">{{'分类名称'}}</div>
|
<div v-if="scope.row.parentId !== 0">{{'物资名称'}}</div>
|
</template>
|
</el-table-column>
|
<el-table-column label="操作" width="150" align="center">
|
<template #default="scope">
|
<el-button v-if="scope.row.parentId === 0" size="small" text type="primary" @click="onOpenGoodsClassifyDialog('新增物资', scope.row)">
|
<el-icon>
|
<ele-FolderAdd />
|
</el-icon>
|
新增物资
|
</el-button>
|
<el-button size="small" text type="primary" :icon="Edit" @click="onOpenGoodsClassifyDialog('编辑', scope.row)">编辑</el-button>
|
<el-button size="small" text type="danger" :icon="Delete" @click="deleteGoodsClassify(scope.row)">删除</el-button>
|
</template>
|
</el-table-column>
|
</el-table>
|
<el-pagination @size-change="onHandleSizeChange" @current-change="onHandleCurrentChange" :pager-count="5" :page-sizes="[5, 10, 20]" v-model:current-page="addGoodsState.listQuery.pageIndex" background v-model:page-size="addGoodsState.listQuery.pageSize" layout="total, sizes, prev, pager, next, jumper" :total="addGoodsState.total" class="page-position" style="padding-top: 20px;"> </el-pagination>
|
</el-tab-pane>
|
</el-tabs>
|
</el-dialog>
|
<el-dialog :title="addGoodsState.goodsClassifyTitle" :close-on-click-modal="false" v-model="addGoodsState.showAddGoodsClassifyDialog" width="30%">
|
<el-form
|
:model="addGoodsState.goodsClassifyForm"
|
:rules="addGoodsState.goodsClassifyRules"
|
ref="goodsClassifyRef"
|
size="default"
|
label-width="120px">
|
<el-row>
|
<el-col :span="24" class="mb20" v-if="!addGoodsState.goodsClassifyForm.parentId">
|
<el-form-item label="分类名称" prop="materialClassifyName">
|
<el-input v-model="addGoodsState.goodsClassifyForm.materialClassifyName" placeholder="输入分类名称" class="input-add">
|
</el-input>
|
</el-form-item>
|
</el-col>
|
<el-col :span="24" class="mb20" v-if="addGoodsState.goodsClassifyForm.parentId">
|
<el-form-item label="物资名称" prop="materialClassifyName">
|
<el-input v-model="addGoodsState.goodsClassifyForm.materialClassifyName" placeholder="输入物资名称" class="input-add">
|
</el-input>
|
</el-form-item>
|
</el-col>
|
</el-row>
|
</el-form>
|
<template #footer>
|
<span class="dialog-footer">
|
<el-button @click="addGoodsState.showAddGoodsClassifyDialog = !addGoodsState.showAddGoodsClassifyDialog" size="default">取 消</el-button>
|
<el-button type="primary" @click="submitGoodsClassify" v-throttle size="default">确 定</el-button>
|
</span>
|
</template>
|
</el-dialog>
|
</div>
|
</template>
|
|
<script setup lang="ts">
|
import {computed, nextTick, onMounted, reactive, ref, watch} from 'vue'
|
import { Edit, Delete, } from '@element-plus/icons-vue';
|
import {AddGoodsStateType, BigClassifyType} from "/@/views/facilityManagement/safetyGoodsAndEquipment/index";
|
import {mount} from "sortablejs";
|
import {goodsAndEquipmentApi} from "/@/api/facilityManagement/safetyGoodsAndEquipment";
|
import {ElMessage, valueEquals} from "element-plus/es";
|
import {ElMessageBox} from "element-plus";
|
import {inspectTaskApi} from "/@/api/intellectInspectSystem/inspectTask";
|
|
const addGoodsState = reactive<AddGoodsStateType>({
|
title:'',
|
goodsClassifyTitle:'',
|
showAddGoodsDialog: false,
|
showAddGoodsClassifyDialog: false,
|
activeName: 'goodsInformation',
|
goodsData: [],
|
goodsBigClassifyList: [],
|
total:0,
|
listQuery:{
|
pageSize: 5,
|
pageIndex: 1,
|
searchParams: {
|
classifyName:''
|
}
|
},
|
goodsClassifyForm: {
|
id: null,
|
materialClassifyName: '',
|
parentId: null,
|
},
|
goodsClassifyRules: {
|
|
},
|
});
|
|
const openAddGoodsDialog = (goodsBigClassifyList: BigClassifyType []) => {
|
addGoodsState.showAddGoodsDialog = true
|
addGoodsState.goodsBigClassifyList = goodsBigClassifyList
|
getGoodsClassifyDataByPage()
|
}
|
|
const onOpenGoodsClassifyDialog = (title: string, value:BigClassifyType ) => {
|
addGoodsState.showAddGoodsClassifyDialog = true
|
addGoodsState.goodsClassifyForm = {
|
id: null,
|
materialClassifyName: '',
|
parentId: null,
|
}
|
if(title === '新增') {
|
addGoodsState.goodsClassifyTitle = '新增分类'
|
}else if(title === '新增物资'){
|
addGoodsState.goodsClassifyTitle = `新增${value.materialClassifyName}`
|
addGoodsState.goodsClassifyForm.parentId = value.id
|
} else if(title === '编辑' && value.parentId === 0){
|
addGoodsState.goodsClassifyTitle = '编辑分类'
|
addGoodsState.goodsClassifyForm = {
|
id: value.id,
|
materialClassifyName: value.materialClassifyName,
|
parentId: null,
|
}
|
}else {
|
addGoodsState.goodsClassifyTitle = `编辑${addGoodsState.goodsBigClassifyList.find(item => item.id === value.parentId)?.materialClassifyName as string}`
|
addGoodsState.goodsClassifyForm.parentId = addGoodsState.goodsBigClassifyList.find(item => item.id === value.parentId)?.id as number
|
addGoodsState.goodsClassifyForm.materialClassifyName = value.materialClassifyName
|
addGoodsState.goodsClassifyForm.id = value.id
|
}
|
}
|
|
const submitGoodsClassify = async () => {
|
if(addGoodsState.goodsClassifyTitle.substring(0,2) === '新增'){
|
let res = await goodsAndEquipmentApi().addGoodsClassify(addGoodsState.goodsClassifyForm);
|
if(res.data.code === '200'){
|
addGoodsState.showAddGoodsClassifyDialog = false;
|
await getGoodsClassifyDataByPage();
|
ElMessage({
|
type: 'success',
|
message: '新增成功',
|
duration: 2000
|
});
|
}else{
|
ElMessage({
|
type:'warning',
|
message:res.data.msg
|
})
|
}
|
}else{
|
let res = await goodsAndEquipmentApi().updateGoodsClassify(addGoodsState.goodsClassifyForm);
|
if(res.data.code === '200'){
|
addGoodsState.showAddGoodsClassifyDialog = false;
|
await getGoodsClassifyDataByPage();
|
emit('refreshClassify')
|
ElMessage({
|
type: 'success',
|
message: '编辑成功',
|
duration: 2000
|
});
|
}else{
|
ElMessage({
|
type:'warning',
|
message:res.data.msg
|
})
|
}
|
}
|
};
|
|
const deleteGoodsClassify = (row: BigClassifyType) => {
|
ElMessageBox.confirm(`此操作将永久删除该：“${row.materialClassifyName}”，是否继续?`, '提示', {
|
confirmButtonText: '确认',
|
cancelButtonText: '取消',
|
type: 'warning'
|
})
|
.then(async () => {
|
let res = await goodsAndEquipmentApi().deleteGoodsClassify({ id: row.id });
|
if (res.data.code === '200') {
|
ElMessage({
|
type: 'success',
|
duration: 2000,
|
message: '删除成功'
|
});
|
await getGoodsClassifyDataByPage();
|
} else {
|
ElMessage({
|
type: 'warning',
|
message: res.data.msg
|
});
|
}
|
})
|
.catch(() => {});
|
};
|
|
const getGoodsClassifyDataByPage = async () => {
|
let res = await goodsAndEquipmentApi().getAllSafetyEquipmentByPage(addGoodsState.listQuery);
|
if(res.data.code === '200'){
|
addGoodsState.goodsData = res.data.data
|
addGoodsState.total = res.data.total
|
}else{
|
ElMessage({
|
message:res.data.msg,
|
type:'warning'
|
})
|
}
|
}
|
|
const tableRowClassName = ( row: {rowIndex: number, row: BigClassifyType } ) => {
|
if (row.row.parentId === 0) {
|
return 'big-row';
|
} else{
|
return 'small-row';
|
}
|
}
|
|
const onHandleSizeChange = (val: number) => {
|
addGoodsState.listQuery.pageSize = val
|
getGoodsClassifyDataByPage()
|
}
|
|
const onHandleCurrentChange = (val: number) => {
|
addGoodsState.listQuery.pageIndex = val
|
getGoodsClassifyDataByPage()
|
}
|
|
const load = (
|
row: BigClassifyType,
|
treeNode: unknown,
|
resolve: (date: BigClassifyType[]) => void
|
) => {
|
setTimeout(() => {
|
resolve([])
|
}, 1000)
|
}
|
|
const emit = defineEmits(['refreshClassify'])
|
|
defineExpose({
|
openAddGoodsDialog,
|
});
|
|
|
</script>
|
|
<style scoped>
|
/*:deep(.el-overlay .el-overlay-dialog .el-dialog .el-dialog__body) {*/
|
/* padding-bottom: 20px !important;*/
|
/*}*/
|
:deep(.el-table .big-row) {
|
font-size: 16px !important;
|
font-weight: 700;
|
}
|
|
</style>
|
