327 lines
11 KiB
TypeScript
327 lines
11 KiB
TypeScript
<!-- 物料 -->
|
|
<template>
|
|
<div class="main">
|
|
<div class="main-from common-box">
|
|
<el-form :inline="true" :model="state.queryParams" class="demo-form-inline" label-width="70px">
|
|
<el-row>
|
|
<el-col :span="8">
|
|
<el-form-item label="名称">
|
|
<el-input v-model="state.queryParams.name" placeholder="请输入名称" clearable />
|
|
</el-form-item>
|
|
</el-col>
|
|
<el-col :span="8">
|
|
<el-form-item label="编码">
|
|
<el-input v-model="state.queryParams.codeNum" placeholder="请输入编码" clearable />
|
|
</el-form-item>
|
|
</el-col>
|
|
</el-row>
|
|
<el-row>
|
|
|
|
<el-col :span="8">
|
|
<el-form-item label="规格型号">
|
|
<el-input v-model="state.queryParams.specifications" placeholder="请输入" clearable />
|
|
</el-form-item>
|
|
</el-col>
|
|
<el-col :span="8">
|
|
<el-form-item label="关键字">
|
|
<el-input v-model="state.queryParams.searchKey" placeholder="请输入" clearable />
|
|
</el-form-item>
|
|
</el-col>
|
|
<el-col :span="8">
|
|
<el-form-item label="品牌">
|
|
<el-select v-model="state.queryParams.brand" placeholder="请选择" clearable>
|
|
<el-option :label="item.name" :value="item.id" v-for="item, index in state.brandDate"
|
|
:key="index" />
|
|
</el-select>
|
|
</el-form-item>
|
|
</el-col>
|
|
</el-row>
|
|
<el-form-item>
|
|
<el-button type="primary" @click="onSubmit">查询</el-button>
|
|
<el-button type="primary" @click="add">新增</el-button>
|
|
<el-dropdown style="margin-left: 10px;">
|
|
<el-button type="primary">
|
|
更多操作<el-icon class="el-icon--right"><arrow-down /></el-icon>
|
|
</el-button>
|
|
<template #dropdown>
|
|
<el-dropdown-menu>
|
|
<el-dropdown-item>导入</el-dropdown-item>
|
|
<el-dropdown-item>导出</el-dropdown-item>
|
|
</el-dropdown-menu>
|
|
</template>
|
|
</el-dropdown>
|
|
</el-form-item>
|
|
</el-form>
|
|
</div>
|
|
|
|
<div class="main-table common-box">
|
|
<div class="tab-hed">
|
|
<el-select v-model="state.queryParams.classify" placeholder="分类" clearable style="width: 200px;">
|
|
<el-option :label="item.name" :value="item.id" v-for="item, index in fyListData" :key="index" />
|
|
</el-select>
|
|
<div>
|
|
<el-button type="success" link
|
|
style="border-right: 1px #515a6e solid; border-radius: 0px; margin-right: 3px; padding: 0 3px;">新增</el-button>
|
|
<el-dropdown>
|
|
<span class="el-dropdown-link">
|
|
更多
|
|
<el-icon class="el-icon--right">
|
|
<arrow-down />
|
|
</el-icon>
|
|
</span>
|
|
<template #dropdown>
|
|
<el-dropdown-menu>
|
|
<el-dropdown-item>查看</el-dropdown-item>
|
|
<el-dropdown-item>修改</el-dropdown-item>
|
|
<el-dropdown-item>删除</el-dropdown-item>
|
|
<el-dropdown-item>刷新</el-dropdown-item>
|
|
</el-dropdown-menu>
|
|
</template>
|
|
</el-dropdown>
|
|
</div>
|
|
</div>
|
|
<div class="tab">
|
|
<vxe-table show-overflow height="100%" :data="state.tableData" :border=true :tree-config="{ transform: true }"
|
|
:scroll-y="{ gt: 20 }">
|
|
<vxe-column field="codeNum" sortable title="编码" width=""></vxe-column>
|
|
<vxe-column field="name" sortable title="名称" width=""></vxe-column>
|
|
<vxe-column field="isEnable" sortable title="可用状态" width="">
|
|
<template #default="{ row }">
|
|
<!-- <el-switch v-model="row.isEnable" inline-prompt active-text="启用" inactive-text="禁用" /> -->
|
|
{{ row.isEnable ? '启用' : '禁用' }}
|
|
</template>
|
|
</vxe-column>
|
|
|
|
<vxe-column field="barcode" sortable title="仓库条码" width=""></vxe-column>
|
|
<vxe-column field="createTime" sortable title="创建时间" width=""></vxe-column>
|
|
<vxe-column title="操作" width="200" fixed="right" show-overflow>
|
|
<template #default="{ row }">
|
|
<vxe-button type="text">查看</vxe-button>
|
|
<vxe-button type="text" @click="editDelete(row)">编辑</vxe-button>
|
|
<vxe-button @click="matterDelete(row)" type="text" style="color: rgb(223, 65, 65)">删除</vxe-button>
|
|
<!-- <vxe-button type="text" icon="vxe-icon-delete"></vxe-button> -->
|
|
</template>
|
|
</vxe-column>
|
|
</vxe-table>
|
|
|
|
</div>
|
|
<div>
|
|
<vxe-pager v-model:current-page="pageVO1.currentPage" v-model:page-size="pageVO1.pageSize"
|
|
:total="pageVO1.total" />
|
|
</div>
|
|
|
|
</div>
|
|
<EditAccess ref="editOpenAccessRef" :title="state.editOpenAccessTitle" :orgData="state.orgTreeData" @handleQuery="handleQuery"/>
|
|
</div>
|
|
</template>
|
|
|
|
<script setup lang="ts" name="matter">
|
|
import { onMounted, reactive, ref, watch } from 'vue';
|
|
import { getAPI } from '/@/utils/axios-utils';
|
|
import { BrandApi, MaterialClassifyApi, MaterialsApi} from '/@/api-services/api';
|
|
import { AddMaterialsInput, BrandOutput, DeleteMaterialsInput, MaterialsOutput} from '/@/api-services/models';
|
|
import { ElMessageBox, ElMessage, TabsPaneContext } from 'element-plus';
|
|
import EditAccess from '/@/views/basics-date/matter/component/editOpenAccess.vue';
|
|
|
|
const editOpenAccessRef = ref<InstanceType<typeof EditAccess>>();
|
|
//获取物料分类
|
|
let fyListData = ref();
|
|
|
|
const fyListGet = async () => {
|
|
let res = await getAPI(MaterialClassifyApi).apiMaterialClassifyListGet();
|
|
if (res.data.code === 200) {
|
|
fyListData.value = res.data.result;
|
|
}
|
|
}
|
|
|
|
const state = reactive({
|
|
loading: false,
|
|
editOpenAccessTitle:'新增',
|
|
tableData: [] as Array<MaterialsOutput>,
|
|
orgTreeData: [] as Array<MaterialsOutput>,
|
|
brandDate:[] as Array<BrandOutput>,
|
|
tableParams: {
|
|
page: 1,
|
|
pageSize: 10,
|
|
total: 0 as any,
|
|
},
|
|
queryParams: {
|
|
name: '',//名称
|
|
brand: '',//品牌
|
|
isEnable: "",//可用状态
|
|
codeNum: '',//编码
|
|
searchKey: "",//助记码
|
|
specifications: "",//规格型号
|
|
classify: ""
|
|
},
|
|
editPrintTitle: '',
|
|
});
|
|
|
|
const pageVO1 = reactive({
|
|
currentPage: 1,
|
|
pageSize: 10,
|
|
total: 0
|
|
})
|
|
|
|
onMounted(() => {
|
|
fyListGet();
|
|
handleQuery();
|
|
getBrandList();
|
|
})
|
|
|
|
|
|
const handleQuery = async () => {
|
|
state.loading = true;
|
|
let params = Object.assign(state.queryParams, state.tableParams);
|
|
let res = await getAPI(MaterialsApi).apiMaterialsPagePost(params);
|
|
if (res.data.code === 200) {
|
|
state.tableData = res.data.result?.items!;
|
|
state.tableParams.total = res.data.result?.total!;
|
|
}
|
|
state.loading = false;
|
|
}
|
|
|
|
const onSubmit = () => {
|
|
handleQuery();
|
|
}
|
|
|
|
//获取品牌数据
|
|
let brandDate = ref([] as BrandOutput[]);
|
|
|
|
const getBrandList = async () => {
|
|
let res = await getAPI(BrandApi).apiBrandListGet();
|
|
if (res.data.code === 200) {
|
|
brandDate.value = res.data.result!;
|
|
}
|
|
}
|
|
|
|
//新增
|
|
//let mTitle = ref('新增');
|
|
let dialogTableVisible = ref(false);
|
|
|
|
let matterFrom = reactive({} as AddMaterialsInput)
|
|
|
|
const add = () => {
|
|
state.editOpenAccessTitle = '新增';
|
|
editOpenAccessRef.value?.openDialog({ id: undefined });
|
|
}
|
|
|
|
const activeName = ref('基本信息')
|
|
|
|
const handleClick = (tab: TabsPaneContext, event: Event) => {
|
|
console.log(tab, event)
|
|
}
|
|
|
|
const clearFormValues = (formObject) => {
|
|
for (let key in formObject) {
|
|
if (formObject.hasOwnProperty(key)) {
|
|
formObject[key] = ''; // 或者 null
|
|
}
|
|
}
|
|
};
|
|
let key = ref(0)
|
|
watch(dialogTableVisible, (newValue, oldValue) => {
|
|
if (!newValue) {
|
|
clearFormValues(matterFrom)
|
|
//infoDate = [];
|
|
|
|
activeName.value = '基本信息';
|
|
}else{
|
|
key.value = Math.random();
|
|
}
|
|
})
|
|
|
|
|
|
|
|
//删除
|
|
const matterDelete = async (row: any) => {
|
|
ElMessageBox.confirm(`确定删除?`, '提示', {
|
|
confirmButtonText: '确定',
|
|
cancelButtonText: '取消',
|
|
type: 'warning',
|
|
})
|
|
.then(async () => {
|
|
let deleteRow = {} as DeleteMaterialsInput
|
|
deleteRow.id=row.id
|
|
let res = await getAPI(MaterialsApi).apiMaterialsDeletePost(deleteRow);
|
|
//console.log(res)
|
|
if (res.data.code == 200) {
|
|
ElMessage({ message: '成功', type: 'success', })
|
|
handleQuery()
|
|
//state.tableData.handleList();
|
|
} else
|
|
ElMessage.error(res.data.message!)
|
|
})
|
|
.catch(() => {});
|
|
|
|
|
|
|
|
|
|
}
|
|
|
|
//编辑
|
|
const editDelete = async (row: any) => {
|
|
let res = await getAPI(MaterialsApi).apiMaterialsDetailGet(row.id);
|
|
if (res.data.code === 200) {
|
|
//dialogTableVisible.value = true;
|
|
state.editOpenAccessTitle = '编辑';
|
|
//Object.assign(matterFrom, res.data.result)
|
|
editOpenAccessRef.value?.openDialog(row);
|
|
}
|
|
}
|
|
|
|
|
|
/**
|
|
* 单位组值变更
|
|
* @param clearBindUserId 是否清空
|
|
*/
|
|
// const unitGroupChange = async (clearBindUserId: boolean = true) => {
|
|
// var res = await getAPI(SysUnitApi).apiSysUnitListUnitGroupIdGet(groupId);
|
|
// state.userData = res.data.result ?? [];
|
|
// if (clearBindUserId) {
|
|
// state.ruleForm.bindUserId = undefined!;
|
|
// }
|
|
// };
|
|
|
|
</script>
|
|
|
|
<style lang="scss" scoped>
|
|
.main {
|
|
padding: 10px;
|
|
display: flex;
|
|
flex-direction: column;
|
|
|
|
.main-from {
|
|
// height: 300px;
|
|
width: 100%;
|
|
padding: 20px 10px;
|
|
|
|
.el-row {
|
|
width: 100%;
|
|
}
|
|
}
|
|
|
|
.main-table {
|
|
margin-top: 20px;
|
|
box-sizing: border-box;
|
|
padding: 10px;
|
|
flex-grow: 1;
|
|
height: 0;
|
|
|
|
display: flex;
|
|
flex-direction: column;
|
|
|
|
.tab {
|
|
flex: 1;
|
|
overflow: scroll;
|
|
}
|
|
|
|
.tab-hed {
|
|
display: flex;
|
|
justify-content: space-between;
|
|
margin: 5px;
|
|
align-items: center;
|
|
}
|
|
}
|
|
}
|
|
</style> |