easydo-zcgx-web/src/views/caseShare/dialog.vue

<template>
    <el-dialog v-model="visible" :title="titleMap[mode]" width="680" @closed="$emit('closed')">
        <el-form ref="formRef" :model="form" :rules="rules" :disabled="mode == 'detail'" label-width="110px">
            <el-row>
                <el-col v-if="form.id" :span="12">
                    <el-form-item label="案例编号" prop="businessNo">
                        <el-input v-model="form.businessNo" readonly :disabled="mode != 'add'"></el-input>
                    </el-form-item>
                </el-col>
                <el-col :span="12">
                    <el-form-item label="项目名称" prop="policyStrive.name">
                        <el-input v-model="form.policyStrive.name" readonly placeholder="点击选择政策争取" @click="showStrive"></el-input>
                    </el-form-item>
                </el-col>
                <el-col :span="12">
                    <el-form-item label="填报人">
                        <el-input v-model="form.policyStrive.createName" readonly placeholder="自动带出"></el-input>
                    </el-form-item>
                </el-col>
                <el-col :span="12">
                    <el-form-item label="填报部门">
                        <el-input v-model="form.policyStrive.deptName" readonly placeholder="自动带出"></el-input>
                    </el-form-item>
                </el-col>
                <el-col :span="12">
                    <el-form-item label="填报单位">
                        <el-input v-model="form.policyStrive.companyName" readonly placeholder="自动带出"></el-input>
                    </el-form-item>
                </el-col>
                <el-col v-if="form.id" :span="12">
                    <el-form-item label="填报日期">
                        <el-date-picker v-model="form.createTime" readonly format="YYYY-MM-DD"></el-date-picker>
                    </el-form-item>
                </el-col>
                <el-col :span="12">
                    <el-form-item label="项目等级" required>
                        <el-input v-model="form.policyStrive.zcLevel" readonly placeholder="自动带出"></el-input>
                    </el-form-item>
                </el-col>
                <el-col :span="12">
                    <el-form-item label="项目类别" required>
                        <el-input v-model="form.policyStrive.zcType" readonly placeholder="自动带出"></el-input>
                    </el-form-item>
                </el-col>
                <el-col :span="12">
                    <el-form-item label="政策文号" required>
                        <el-input v-model="form.policyStrive.docNo" readonly placeholder="自动带出"></el-input>
                    </el-form-item>
                </el-col>
                <el-col :span="12">
                    <el-form-item label="联系方式" required>
                        <el-input v-model="form.policyStrive.contactPhone" readonly placeholder="自动带出"></el-input>
                    </el-form-item>
                </el-col>
                <el-col :span="24">
                    <el-form-item label="项目概要" required>
                        <el-input v-model="form.policyStrive.abstractContent" type="textarea" :rows="4" readonly placeholder="自动带出"></el-input>
                    </el-form-item>
                </el-col>
                <el-col :span="24">
                    <el-form-item label="经验分享" prop="expContent">
                        <el-input v-model="form.expContent" type="textarea" :rows="4" placeholder="请输入经验"></el-input>
                    </el-form-item>
                </el-col>

                <el-col :span="24">
                    <el-form-item class="no-upload-btn" label="附件">
                        <yhUpload v-model="form.policyStrive.fileList" disabled :limit="10">
                            <el-button type="primary" icon="upload" size="small"></el-button>
                        </yhUpload>
                    </el-form-item>
                </el-col>
            </el-row>
        </el-form>

        <template #footer>
            <template v-if="mode == 'add' || mode == 'edit'">
                <el-button :loading="isSaving" type="primary" @click="submit(mode)">保 存</el-button>
                <el-button :loading="isSaving" type="primary" @click="submit('saveApprove')">直接上报</el-button>
            </template>
        </template>
    </el-dialog>

    <strive-select v-if="dialog" ref="striveSelect" :striveId="form.striveId" @selected="striveChange" @closed="dialog = false"></strive-select>
</template>

<script>
import API from "@/api/policy/case";
import { useUserStore } from "@/store/user";

import yhUpload from "@/components/Upload/index.vue";
import striveSelect from "./strive.vue";

export default {
    emits: ["success", "closed"],
    
    components: {
        yhUpload,
        striveSelect
    },

    data() {
        return {
            visible: false,
            isSaving: false,
            mode: "add",
            titleMap: {
                add: "新增",
                edit: "修改",
                detail: "详情"
            },

            form: {
                id: null,
                striveId: null,
                policyStrive: {
                    id: null,
                    name: null,
                    createName: null,
                    companyName: null,
                    deptName: null,
                    zcLevel: null,
                    zcType: null,
                    docNo: null,
                    contactPhone: null,
                    abstractContent: null,
                    fileList: []
                },
                businessNo: null,
                status: null,
                createId: useUserStore().userInfo.id,
                createName: useUserStore().userInfo.name,
                createTime: null,
                expContent: null
            },

            rules: {
                businessNo: [{ required: true }],
                "policyStrive.name": [{ required: true, message: "请选择政策争取" }],
                expContent: [{ required: true, message: "请输入经验" }]
            },

            dialog: false
        }
    },

    methods: {
        open(mode = "add") {
            this.mode = mode;
            this.visible = true;
            return this;
        },

        setData(id) {
            API.detail(id).then(res => {
                if (res.code === 200) {
                    for (const key in this.form) {
                        if (key == "policyStrive") {
                            for (const striveKey in this.form[key]) {
                                if (striveKey == "fileList") this.form[key][striveKey] = res.data[key][striveKey].map(file => ({ ...file, name: file.originalName, path: file.fileDomain + "/" + file.fileName }));
                                else this.form[key][striveKey] = res.data[key][striveKey] || null;
                            }
                        } else this.form[key] = res.data[key] || null;
                    }
                } else ElMessage.error(res.msg);
            });
        },

        showStrive() {
            if (this.mode == "add") {
                this.dialog = true;
                nextTick(() => this.$refs.striveSelect.open().reloadTable());
            }
        },

        striveChange(e) {
            for (const key in this.form.policyStrive) {
                if (key == "fileList") this.form.policyStrive[key] = e[key].map(file => ({ ...file, name: file.originalName, path: file.fileDomain + "/" + file.fileName }));
                else this.form.policyStrive[key] = e[key];
            }

            this.form.striveId = e.id;
        },

        // 表单提交方法
        submit(mode) {
            this.$refs.formRef.validate(valid => {
                if (valid) {
                    this.isSaving = true;
                    API[mode](this.form).then(res => {
                        this.isSaving = false;
                        if (res.code === 200) {
                            ElMessage.success("操作成功");
                            this.visible = false;
                            this.$emit("success", mode);
                        } else ElMessage.error(res.msg);
                    }).catch(() => this.isSaving = false);
                } else {
                    return false;
                }
            });
        }
    }
}
</script>

<style lang="scss" scoped>
.no-upload-btn :deep(.yh-upload-file) {
  .el-upload {
    display: none;
  }

  .el-upload-list.is-disabled {
    margin-top: 0;
  }
}
</style>