easydo-zcgx-web/src/views/policyStrive/explain.vue

<template>
    <el-dialog v-model="visible" :title="titleMap[mode]" width="680" @closed="$emit('closed')">
        <el-form :model="form" :rules="rules" disabled label-width="110px">
            <el-row>
                <el-col :span="12">
                    <el-form-item label="政策编号" prop="businessNo">
                        <el-input v-model="form.businessNo"></el-input>
                    </el-form-item>
                </el-col>
                <el-col :span="12">
                    <el-form-item label="填报人">
                        <el-input v-model="form.createName"></el-input>
                    </el-form-item>
                </el-col>
                <el-col :span="12">
                    <el-form-item label="填报部门">
                        <el-input v-model="form.deptName"></el-input>
                    </el-form-item>
                </el-col>
                <el-col :span="12">
                    <el-form-item label="填报单位">
                        <el-input v-model="form.companyName"></el-input>
                    </el-form-item>
                </el-col>
                <el-col :span="12">
                    <el-form-item label="填报时间">
                        <el-date-picker v-model="form.createTime" 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="12">
                    <el-form-item label="预计争取金额" prop="yjStriveAmount">
                        <el-input-number v-model="form.yjStriveAmount" :min="0" :step="0.1" :precision="2" :controls="false" placeholder="请输入预计争取金额"></el-input-number>
                    </el-form-item>
                </el-col>
                <el-col :span="12">
                    <el-form-item label="预计完成时间" prop="yjFinishTime">
                        <el-date-picker v-model="form.yjFinishTime" value-format="YYYY-MM-DD" placeholder="请选择预计完成时间"></el-date-picker>
                    </el-form-item>
                </el-col>
                <el-col :span="12">
                    <el-form-item label="责任人" prop="directorName">
                        <el-input v-model="form.directorName" placeholder="请输入责任人"></el-input>
                    </el-form-item>
                </el-col>
                <el-col :span="24">
                    <el-form-item label="政策考核类别" prop="rewardType">
                        <el-radio-group v-model="form.rewardType">
                            <el-radio v-for="(label, key) in rewardTypeDic" :key="key" :label="label" :value="parseInt(key)"></el-radio>
                        </el-radio-group>
                    </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="no-upload-btn" label="附件">
                        <yhUpload v-model="form.fileList" :limit="10"></yhUpload>
                    </el-form-item>
                </el-col>
            </el-row>
        </el-form>

        <el-form v-if="mode == 'explain' || (mode == 'detail' && form.monthSituation)" ref="formRef" :model="form" :rules="rules" :disabled="mode == 'detail'" label-width="110px">
            <el-row>
                <el-col :span="12">
                    <el-form-item label="是否已落地" prop="isLand">
                        <el-radio-group v-model="form.isLand" @change="form.landAmount = null, form.partPerson = null, form.partPersonArr = '[]'">
                            <el-radio v-for="(label, key) in whetherDic" :key="key" :label="label" :value="parseInt(key)"></el-radio>
                        </el-radio-group>
                    </el-form-item>
                </el-col>
                <template v-if="form.isLand == 1">
                    <el-col :span="12">
                        <el-form-item label="落地金额" prop="landAmount">
                            <el-input-number v-model="form.landAmount" :min="0" :step="0.1" :precision="2" :controls="false" placeholder="请输入落地金额"></el-input-number>
                        </el-form-item>
                    </el-col>
                    <el-col :span="12">
                        <el-form-item label="实际完成时间" prop="sjFinishTime">
                            <el-date-picker v-model="form.sjFinishTime" value-format="YYYY-MM-DD" placeholder="请选择实际完成时间"></el-date-picker>
                        </el-form-item>
                    </el-col>
                    <el-col :span="24">
                        <el-form-item label="参与人" prop="partPerson">
                            <el-input v-model="form.partPerson" type="textarea" :rows="4" placeholder="请输入参与人(以英文 , 分割)"></el-input>
                        </el-form-item>
                    </el-col>
                </template>
                <el-col :span="24">
                    <el-form-item class="label-column-2" label="月度争取情况说明" prop="monthSituation" label-width="80px">
                        <el-input v-model="form.monthSituation" type="textarea" :rows="4" placeholder="请输入月度争取情况说明"></el-input>
                    </el-form-item>
                </el-col>
            </el-row>
        </el-form>

        <template #footer>
            <template v-if="mode == 'explain'">
                <el-button :loading="isSaving" type="primary" @click="submit">保 存</el-button>
            </template>
        </template>
    </el-dialog>
</template>

<script>
import moment from "moment";
import API from "@/api/policy/strive";
import { levelDic, typeDic, whetherDic } from "@/views/policyShare/main";
import { rewardTypeDic } from "@/views/policyStrive/main";
import yhUpload from "@/components/Upload/index.vue";

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

    data() {
        return {
            levelDic, typeDic, whetherDic, rewardTypeDic,

            visible: false,
            isSaving: false,
            mode: "explain",
            titleMap: {
                explain: "月度争取情况说明",
                detail: "详情"
            },
            form: {
                id: null,
                businessNo: null,
                status: null,
                createId: null,
                createName: null,
                createTime: null,
                deptId: null,
                deptName: null,
                companyId: null,
                companyName: null,
                name: null,
                zcLevel: null,
                zcType: null,
                docNo: null,
                contactPhone: null,
                directorName: null,
                yjFinishTime: null,
                yjStriveAmount: null,
                rewardType: null,
                abstractContent: null,
                isLand: 0,
                landAmount: null,
                sjFinishTime: null,
                partPersonArr: "[]", // [{name: }]
                partPerson: null, // a1,a2
                monthSituation: 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: "请输入联系方式" }],
                directorName: [{ required: true, message: "请输入责任人" }],
                yjFinishTime: [{ required: true, message: "请选择预计完成时间" }],
                yjStriveAmount: [{ required: true, message: "请输入预计争取金额" }],
                rewardType: [{ required: true, message: "请选择政策考核类别" }],
                abstractContent: [{ required: true, message: "请输入政策概要" }],
                isLand: [{ required: true }],
                landAmount: [{ required: true, message: "请输入落地金额" }],
                sjFinishTime: [{ required: true, message: "请选择时实际完成时间" }],
                partPerson: [{ required: true, message: "请输入参与人(以英文 , 分割)" }],
                monthSituation: [{ required: true, message: "请输入月度争取情况" }]
            }
        }
    },

    methods: {
        open(mode = "explain") {
            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 if (key == "isLand") this.form[key] = !!res.data[key] && res.data[key] || 0;
                        else if (key == "sjFinishTime") this.form[key] = res.data[key] || moment().format("YYYY-MM-DD");
                        else if (key == "partPerson") this.form[key] = res.data["partPersonArr"] && JSON.parse(res.data["partPersonArr"]).map(item => item.name).join() || null;
                        else this.form[key] = res.data[key] || null;
                    }
                } else ElMessage.error(res.msg);
            });
        },

        // 表单提交方法
        submit() {
            this.$refs.formRef.validate(valid => {
                if (valid) {
                    this.isSaving = true;
                    const partPersonArr = this.form.partPerson && JSON.stringify(this.form.partPerson.split(",").map(name => ({ name }))) || "";
                    API.updateById({ ...this.form, partPersonArr }).then(res => {
                        this.isSaving = false;
                        if (res.code === 200) {
                            ElMessage.success("操作成功");
                            this.visible = false;
                            this.$emit("success");
                        } 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;
  }
}

.el-input-number {
  width: 100%;

  :deep(.el-input) .el-input__wrapper {
    padding: 1px 11px;

    .el-input__inner {
      text-align: unset;
    }
  }
}

.label-column-2 :deep(.el-form-item__label) {
  margin-left: 30px;
}
</style>