DigitalFactory/Web/src/views/basics-date/matter/component/editClassifyOpenAccess.vue

<!-- 物料 -->
<template>
    <div class="sys-open-access-container">
        <el-dialog v-model="state.isShowDialog" :title="props.title" width="1000">
            <el-form :inline="true" :model="ruleForm" class="demo-form-inline" label-width="90px">
                <el-row>
                    <el-col :span="24">
                        <el-form-item label="物料类型" :rules="[{ required: true, message: '物料类型不能为空', trigger: 'blur' }]">
                            <el-input v-model="ruleForm.name" placeholder="请输入名称" clearable />
                        </el-form-item>
                    </el-col>
                </el-row>
            </el-form>
            <el-row style="display: flex; justify-content: space-around;">
                <el-button style="width: 100px;" type="primary" @click="matterSubmit">提交</el-button>
                <el-button style="width: 100px;" @click="closeDialog">取消</el-button>
            </el-row>
        </el-dialog>
    </div>
</template>

<script setup lang="ts">
import { onMounted, reactive, ref } from 'vue';
import { getAPI } from '/@/utils/axios-utils';
import { BrandApi, MaterialClassifyApi, PackageInfoApi, SysUnitGroupApi,SysUnitApi } from '/@/api-services/api';
import { AddMaterialsInput, BrandOutput, MaterialsOutput, PackageInfoOutput, SysUnitGroupOutput, SysUnitOutput} from '/@/api-services/models';
import { ElMessageBox, ElMessage, TabsPaneContext } from 'element-plus';
import { addMaterials, updateMaterials,detailMaterials } from '/@/api/main/materials';
import { listUnitGroup } from '/@/api/main/unit';
import {addMaterialsClassify, detailMaterialsClassify, updateMaterialsClassify} from "/@/api/main/materialClassify";

const props = defineProps({
	title: String,
	orgData: Array<MaterialsOutput>,
});
	//父级传递来的函数，用于回调
	const emit = defineEmits(["reloadTable"]);

//获取物料分类
let fyListData = ref();

const fyListGet = async () => {
    let res = await getAPI(MaterialClassifyApi).apiMaterialClassifyListGet();
    if (res.data.code === 200) {
        fyListData.value = res.data.result;
    }
}

const ruleForm = ref<any>({});

const state = reactive({
	loading: false,
    isShowDialog:false,
    editClassifyOpenAccessTitle:'新增',
	tableData: [] ,//as Array<MaterialsOutput>
    orgTreeData: [] ,//as Array<MaterialsOutput>
    //matterFrom: {} ,//as AddMaterialsInput
	queryParams: {
		name: undefined,
	},
	tableParams: {
		page: 1,
		pageSize: 10,
		total: 0 as any,
	},
	editPrintTitle: '',
    unitGroupData:[] as Array<SysUnitGroupOutput>,
    unitData:[] as Array<SysUnitOutput>,
});

// 打开弹窗
const openDialog = async (row: any) => {
	//ruleFormRef.value?.resetFields();
	//state.selectedTabName = '0'; // 重置为第一个 tab 页
    let rowData = JSON.parse(JSON.stringify(row));
		if (rowData.id)
        ruleForm.value = (await detailMaterialsClassify(rowData.id)).data.result;
		else{
            ruleForm.value = rowData;
            ruleForm.value.isEnable=true;
        }
	state.isShowDialog = true;
};

	// 关闭弹窗
	const closeDialog = () => {
		state.isShowDialog = false;
	};

onMounted(() => {
    fyListGet();
});

//提交
const matterSubmit = async () => {
    let res;
    if (props.title=='添加物料类型'){
        res = await addMaterialsClassify(ruleForm.value);
    }
    else {
        res = await updateMaterialsClassify(ruleForm.value);
    }
    //console.log(res)

    if (res.data.code == 200) {
        state.isShowDialog = false;
        ElMessage({
            message: '成功',
            type: 'success',
        })
        //state.tableData.handleList();
    } 
    else
        ElMessage.error(res.message!)
    emit("reloadTable");
    closeDialog();
}



// 导出对象
defineExpose({ openDialog });
</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>