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

<template>
    <div>
        <el-dialog v-model="dialogVisible" :title="titleTips" width="30%" @close="closes" :close-on-click-modal="false">
            <el-form :model="addForm" label-width="120px" :rules="formRule" ref="ruleForm">
                <el-form-item label="模板名称" prop="name">
                    <el-input v-model="addForm.name" />
                </el-form-item>
                <el-form-item label="模板描述" prop="memos">
                    <el-input type="textarea" v-model="addForm.memos" />
                </el-form-item>
                <el-form-item label="上传文件" width="200" prop="docName">
                    <el-input style="width: 167px;" v-model="addForm.docName" disabled />
                    <el-upload v-model:file-list="fileList" class="upload-demo" :show-file-list="false"
                        :http-request="uploadFile" multiple :limit="1">
                        <el-button type="primary" plain :disabled="upState"><el-icon>
                                <DocumentAdd />
                            </el-icon>点击上传文件</el-button>
                        <!-- <template #tip>
                            <div class="el-upload__tip">
                                jpg/png files with a size less than 500KB.
                            </div>
                        </template> -->
                    </el-upload>
                </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>
</template>

<script>
import { ref, onMounted, toRefs, reactive, watch } from 'vue';
import report from '@/api/report';
import cid from '@/api/cid/cid';
import { ElMessage } from 'element-plus';
export default {
    props: {
        addModal: {
            type: Boolean,
            required: true
        },
        addOrEdit: {
            type: Number,
            required: true
        },
        editRow: {
            type: Object,
            required: true
        },
        searchReport: {
            type: Function,
            required: true
        }
    },
    setup(props, { emit }) {
        let dialogVisible = ref(false)
        let result = props.addModal
        let obj = props.editRow
        let tipsNow = ref(0)//新增编辑，0新增，1编辑
        let filesCacl = ref({})
        let needRow = ref({})//需要编辑的数据
        let needId = ref("")//需要的id
        let { cancels, sureAdd } = toRefs(props)
        let titleTips = ref('新增')
        let upState = ref(false)//上传文件状态
        let addForm = ref({
            name: "",
            docid: "",
            memos: "",
            states: 1,
            docName: "",
        })
        let formRule = reactive({
            name: [
                { required: true, message: '还未输入名称', trigger: 'blur' },
            ],
            memos: [
                { required: true, message: '还未输入备注', trigger: 'blur' },
            ],
            docName: [
                { required: true, message: '还未选择文件', trigger: 'change' },
            ],
        })
        let ruleForm = ref(null)//组件ref
        watch(() => props.addOrEdit, (newVal) => {
            tipsNow.value = newVal
        })
        function lineList() {//接收父组件参数
            tipsNow.value = props.addOrEdit
            if (tipsNow.value == 0) {
                titleTips.value = '新增'
                upState.value = false
            }
            if (tipsNow.value == 1) {
                titleTips.value = '编辑'
                upState.value = true
                needRow.value = props.editRow
                addForm.value.name = needRow.value.name
                addForm.value.docid = needRow.value.doc_id
                addForm.value.docName = needRow.value.doc_id
                addForm.value.memos = needRow.value.memo
                addForm.value.states = needRow.value.state
                console.log(needRow.value, 'dee');
                // addForm.value.docName = needRow.value
                needId.value = needRow.value.id
            }
            dialogVisible.value = result
        }
        function uploadFile(e) {
            addForm.value.docName = e.file.name
            filesCacl.value = e.file
            cid.fileUpload({ station_id: 9999, file: filesCacl.value, attachment_type: "tpl" }).then(res => {
                addForm.value.docid = res.data.fileid
                console.log(addForm.value.docid,'filesifafk');
            })
        }
        function getCancel() {
            dialogVisible.value = false
            emit("armBack", dialogVisible.value)
        }
        function getSure() {
            ruleForm.value.validate((date) => {
                if (date) {
                    if (tipsNow.value == 0) {
                        report.addReport({
                            name: addForm.value.name,
                            doc_id: addForm.value.docid - 0,
                            memo: addForm.value.memos,
                            state: addForm.value.states - 0,
                        }).then(res => {
                            if (res.code == 0) {
                                ElMessage({
                                    type: "success",
                                    message: "新增成功"
                                })
                                props.searchReport()
                                dialogVisible.value = false
                                emit("armBack", dialogVisible.value)
                            } else {
                                ElMessage({
                                    type: "error",
                                    message: res.msg
                                })
                            }
                        })
                    } else if (tipsNow.value == 1) {
                        report.addReport({
                            id: needId.value - 0,
                            name: addForm.value.name,
                            doc_id: addForm.value.docid - 0,
                            memo: addForm.value.memos,
                            state: addForm.value.states - 0,
                        }).then(res => {
                            if (res.code == 0 && res.data != null) {
                                props.searchReport()
                                dialogVisible.value = false
                                emit("armBack", dialogVisible.value)
                                ElMessage({
                                    message: "修改成功",
                                    type: "success"
                                })
                            }
                        })
                    }
                }else{
                    console.log(date);
                }
            })


        }
        onMounted(() => {
            lineList()
        })
        return {
            dialogVisible,
            lineList,
            cancels: getCancel,
            sureAdd: getSure,
            closes: getCancel,
            uploadFile,
            addForm,
            titleTips,
            formRule,
            filesCacl,
            needRow,//需要编辑的数据
            needId,//需要的id
            upState,//上传文件状态
            ruleForm,//表单ref
        }
    }
}
</script>

<style scoped></style>