easydo-zcgx-web/src/views/policyShare/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' || mode == 'approve'" label-width="100px">
            <el-row>
                <el-col v-if="form.id" :span="12">
                    <el-form-item label="政策编号" prop="businessNo">
                        <el-input v-model="form.businessNo" disabled></el-input>
                    </el-form-item>
                </el-col>
                <el-col :span="12">
                    <el-form-item label="填报人">
                        <el-input v-model="form.createName" disabled></el-input>
                    </el-form-item>
                </el-col>
                <el-col :span="12">
                    <el-form-item label="填报部门">
                        <el-input v-model="form.deptName" disabled></el-input>
                    </el-form-item>
                </el-col>
                <el-col :span="12">
                    <el-form-item label="填报单位">
                        <el-input v-model="form.companyName" disabled></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" disabled format="YYYY-MM-DD HH:mm:ss"></el-date-picker>
                    </el-form-item>
                </el-col>
                <el-col :span="12">
                    <el-form-item label="政策名称" prop="name">
                        <el-input v-model="form.name" placeholder="请输入政策名称"></el-input>
                    </el-form-item>
                </el-col>
                <el-col :span="12">
                    <el-form-item label="政策等级" prop="zcLevel">
                        <el-select v-model="form.zcLevel" placeholder="请选择政策等级">
                            <el-option v-for="item in levelDic" :key="item" :label="item" :value="item"></el-option>
                        </el-select>
                    </el-form-item>
                </el-col>
                <el-col :span="12">
                    <el-form-item label="政策类别" prop="zcType">
                        <el-select v-model="form.zcType" placeholder="请选择政策类别">
                            <el-option v-for="item in typeDic" :key="item" :label="item" :value="item"></el-option>
                        </el-select>
                    </el-form-item>
                </el-col>
                <el-col :span="12">
                    <el-form-item label="政策文号" prop="docNo">
                        <el-input v-model="form.docNo" placeholder="请输入政策文号"></el-input>
                    </el-form-item>
                </el-col>
                <el-col :span="12">
                    <el-form-item label="联系方式" prop="contactPhone">
                        <el-input v-model="form.contactPhone" placeholder="请输入联系方式"></el-input>
                    </el-form-item>
                </el-col>
                <el-col :span="24">
                    <el-form-item label="政策概要" prop="abstractContent">
                        <el-input v-model="form.abstractContent" type="textarea" :rows="4" placeholder="请输入政策概要"></el-input>
                    </el-form-item>
                </el-col>
                <el-col :span="24">
                    <el-form-item :class="(mode == 'detail' || mode == 'approve') && 'no-upload-btn'" label="附件">
                        <yhUpload v-model="form.fileList" :limit="10">
                            <el-button type="primary" icon="upload" size="small"></el-button>
                        </yhUpload>
                    </el-form-item>
                </el-col>
            </el-row>

            <el-row v-if="form.status == 'done' || form.status == 'inactive'">
                <template v-if="form.status == 'done'">
                    <el-col :span="24">
                        <el-form-item label="分值" prop="score">
                            <el-input v-model="form.score"></el-input>
                        </el-form-item>
                    </el-col>
                    <el-col :span="24">
                        <el-form-item label="是否入库" prop="isInWh">{{ form.isInWh == 1 && "是" || "否" }}</el-form-item>
                    </el-col>
                    <el-col v-if="form.isInWh == 1" :span="24">
                        <el-form-item label="入库类型" prop="inWhType">
                            <el-input v-model="form.inWhType"></el-input>
                        </el-form-item>
                    </el-col>
                </template>

                <el-col v-else :span="24">
                    <el-form-item label="意见" prop="remark">
                        <el-input v-model="form.remark" type="textarea" :rows="4" placeholder="请输入意见"></el-input>
                    </el-form-item>
                </el-col>
            </el-row>
        </el-form>

        <template #footer>
            <template v-if="mode == 'approve' && form.status == 'approve'">
                <el-button type="primary" @click="policyApprove('agree')">通 过</el-button>
                <el-button type="primary" @click="policyApprove('disagree')">退 回</el-button>
            </template>
            <template v-if="mode == 'add' || mode == 'edit'">
                <el-button type="primary" @click="validateForm(mode)">保 存</el-button>
                <el-button type="primary" @click="validateForm('saveApprove')">直接上报</el-button>
            </template>
        </template>
    </el-dialog>

    <approve-detail v-if="dialog" ref="approveDetail" @success="setData" @closed="dialog = false"></approve-detail>
</template>

<script>
import API from "@/api/policy/share";
import { useUserStore } from "@/store/user";
import { levelDic, typeDic, inWHDic } from "./main";
import yhUpload from "@/components/Upload/index.vue";
import approveDetail from "./approve.vue";

const { userInfo } = useUserStore(); // store 用户

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

    data() {
        return {
            levelDic, typeDic, inWHDic,
            visible: false,
            mode: "add",
            titleMap: {
                add: "新增政策",
                edit: "编辑政策",
                detail: "政策详情",
                approve: "政策详情"
            },
            form: {
                id: null,
                businessNo: null,
                status: null,
                createId: userInfo.id,
                createName: userInfo.name,
                createTime: null,
                name: null,
                companyName: null,
                deptName: null,
                zcLevel: null,
                zcType: null,
                docNo: null,
                contactPhone: null,
                abstractContent: null,
                score: null,
                isInWh: "0",
                inWhType: null,
                fileList: []
            },

            rules: {
                businessNo: [{ required: true }],
                name: [{ required: true, message: "请输入政策名称" }],
                zcLevel: [{ required: true, message: "请选择政策等级" }],
                zcType: [{ required: true, message: "请选择政策类别" }],
                docNo: [{ required: true, message: "请输入政策文号" }],
                contactPhone: [{ required: true, message: "请输入联系方式" }],
                abstractContent: [{ required: true, message: "请输入政策概要" }],
                score: [{ required: true, message: "请输入分值" }],
                isInWh: [{ required: true }],
                inWhType: [{ required: true, message: "请选择入库类型" }],
            },

            dialog: false
        }
    },

    mounted() {
        this.getUserDept();
    },

    methods: {
        init(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 == "fileList") {
                            this.form[key] = res.data[key].map(file => ({ ...file, name: file.originalName, path: file.fileDomain + "/" + file.fileName }));
                        } else this.form[key] = res.data[key] || null;
                    }
                    this.form.updateId = userInfo.id;
                } else ElMessage.error(res.msg);
            });
        },

        getUserDept() {
            API.getUserDept(userInfo.deptId).then(res => {
                if (res.code === 200) {
                    this.form.companyName = res.data.companyName;
                    this.form.deptName = res.data.deptName;
                }
            });
        },

        // 表单提交方法
        validateForm(mode) {
            this.$refs.formRef.validate(valid => {
                if (valid) {
                    this.submit(mode);
                } else {
                    return false;
                }
            });
        },
			
        submit(mode) {
            API[mode](this.form).then(() => {
                ElMessage.success("操作成功");
                this.visible = false;
                this.$emit("success", mode);
            });
        },

        policyApprove(mode) {
            this.dialog = true;
            this.$nextTick(() => this.$refs.approveDetail.init(mode).setData(this.form));
        }
    }
}
</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>