scd_tools_ui/src/pages/setting/modalComp/AddSc.vue

<template>
    <div>
        <div class="bigBox">
            <el-dialog v-model="dialogVisible" :title="letTips" width="30%" @close="closes"
                :close-on-click-modal="false">
                <el-form :model="newForm" label-width="120px" :rules="formRule" ref="ruleForm">
                    <el-form-item label="字典名称" prop="name">
                        <el-input v-model="newForm.name" />
                    </el-form-item>
                    <el-form-item label="上级字典编码" prop="parents">
                        <el-select style="width: 372px;" v-model="newForm.parents" placeholder="请选择上级编码">
                            <el-option v-for="(item, index) in topCode" :key="item.id" :label="item.name"
                                :value="item.code" />
                        </el-select>
                    </el-form-item>
                    <el-form-item label="字典编码" prop="codes">
                        <el-input v-model="newForm.codes" />
                    </el-form-item>
                </el-form>
                <template #footer>
                    <span class="dialog-footer">
                        <el-button @click="cancels">取消</el-button>
                        <el-button type="primary" @click="sureAdd">确认</el-button>
                    </span>
                </template>
            </el-dialog>
        </div>
    </div>
</template>

<script>
import { ref, onMounted, toRefs, reactive } from 'vue';
import systemRow from "@/api/systemRow"
import { ElMessage } from 'element-plus';
export default {
    props: {
        setModal: {
            type: Boolean,
            required: true
        },
        addOrEdit: {
            type: Number,
            required: true
        },
        searchSystem: {
            type: Function,
            required: true
        },
        editRow: {
            type: Object,
            required: true
        },
        handleNodeClick: {
            type: Function,
            required: true
        },//systemCode.vue传过来的树形组件方法
        pageCode: {
            type: Object,
            required: true
        },//systemCode.vue传过来的code
    },
    setup(props, { emit }) {
        let dialogVisible = ref(false)
        let result = props.setModal
        let letTips = ref("新增")
        let { cancels, sureAdd } = toRefs(props)
        let obj = props.editRow
        let editId = ref('')
        let newForm = ref({
            name: "",
            parents: "",
            codes: "",
        })
        let ruleForm = ref(null)
        let formRule = reactive({
            name: [
                { required: true, message: '请输入名称', trigger: 'blur' },
            ],
            parents: [
                { required: true, message: '请选择上级', trigger: 'change' },
            ],
            codes: [
                { required: true, message: '请输入编码', trigger: 'blur' },
            ]
        })
        let topCode = ref([
        ])
        let caseNum = ref(0)
        function lineList() {
            dialogVisible.value = result
            caseNum.value = props.addOrEdit - 0
            if (caseNum.value == 0) {
                letTips.value = '新增'
            }
            if (caseNum.value == 1) {
                letTips.value = '编辑'
                newForm.value.name = obj.name
                newForm.value.parents = obj.parentcode
                newForm.value.codes = obj.code
                editId.value = obj.id
            }
            systemRow.getChildren({}).then(res => {
                topCode.value = res.data
            })
        }
        function closes() {
            dialogVisible.value = false
            emit("getModal", dialogVisible.value)
        }
        function getSure() {
            ruleForm.value.validate((val) => {
                if (val) {
                    if (caseNum.value == 0) {
                        systemRow.saveRow({
                            name: newForm.value.name,
                            parentcode: newForm.value.parents,
                            code: newForm.value.codes
                        }).then(res => {
                            if (res.returncode == 200) {
                                dialogVisible.value = false
                                emit("getModal", dialogVisible.value)
                                props.searchSystem()
                                ElMessage({
                                    type: "success",
                                    message: "新增成功"
                                })
                            }
                        })
                    } else if (caseNum.value == 1) {
                        systemRow.saveRow({
                            name: newForm.value.name,
                            parentcode: newForm.value.parents,
                            code: newForm.value.codes,
                            id: editId.value
                        }).then(res => {
                            if (res.returncode == 200) {
                                dialogVisible.value = false
                                emit("getModal", dialogVisible.value)
                                let e = { code: props.pageCode }
                                props.handleNodeClick(e)
                                ElMessage({
                                    type: "success",
                                    message: "修改成功"
                                })
                            }
                        })
                    }
                }
            })
        }
        onMounted(() => {
            lineList()
        })
        return {
            dialogVisible,
            closes,
            cancels: closes,
            sureAdd: getSure,
            lineList,
            letTips,
            newForm,
            topCode,
            formRule,
            editId,
            ruleForm,
            caseNum,
        }
    }
}
</script>

<style lang="scss" scoped></style>