auth-web/src/pages/data-auth-module/auth-object-manage/appfun-resource-manage/add-app-form.vue

<!--
新增应用
@Author: linqian
@Date: 2021-05-17 16:47
-->
<template>
    <dg-row>
        <el-form ref="form" :model="form" :rules="rules" label-width="180px" v-if="show">
            <dg-col :span="12">
                <el-form-item label="应用系统名称：" prop="applyName">
                    <el-input v-model="form.applyName" placeholder="" v-if="!isDetail"></el-input>
                    <span v-else>{{ form.applyName }}</span>
                </el-form-item>
                <el-form-item label="应用英文名称：" prop="appEnglishName">
                    <el-input v-model="form.appEnglishName" placeholder="" v-if="!isDetail"></el-input>
                    <span v-else>{{ form.appEnglishName }}</span>
                </el-form-item>
                <el-form-item label="上线日期：" prop="lineTime">
                    <dg-date-picker type="date" v-model="form.lineTime" v-if="!isDetail"> </dg-date-picker>
                    <span v-else>{{ form.lineTime | dateFormatter("YYYY-MM-DD") }}</span>
                </el-form-item>
                <el-form-item label="应用负责人：" prop="fzr">
                    <el-input v-model="form.fzr" placeholder="" v-if="!isDetail"></el-input>
                    <span v-else>{{ form.fzr }}</span>
                </el-form-item>
                <el-form-item label="应用系统管理单位名称：" prop="managerOrgName">
                    <el-input v-model="form.managerOrgName" placeholder="" v-if="!isDetail"></el-input>
                    <span v-else>{{ form.managerOrgName }}</span>
                </el-form-item>
            </dg-col>
            <dg-col :span="12">
                <el-form-item label="应用系统编号：" prop="applyCode">
                    <el-input v-model="form.applyCode" placeholder="" v-if="!isDetail"></el-input>
                    <span v-else>{{ form.applyCode }}</span>
                </el-form-item>
                <el-form-item label="应用系统在用标识：" prop="applyStatus">
                    <dg-select v-model="form.applyStatus" v-if="!isDetail" code="DM_APPLY_STATUS"></dg-select>
                    <!-- <span v-else>{{ form.applyStatus == "1" ? "禁用" : "启用"}}</span> -->
                    <div v-else>
                        <div class="u-detail__text" v-translate="{ code: 'DM_APPLY_STATUS' }">
                            {{ form.applyStatus }}
                        </div>
                    </div>
                </el-form-item>
                <el-form-item label="应用系统事权单位代码：" prop="orgCode">
                    <el-input v-model="form.orgCode" placeholder="" v-if="!isDetail"></el-input>
                    <span v-else>{{ form.orgCode }}</span>
                </el-form-item>
                <el-form-item label="应用系统运维单位名称：" prop="appOpsDepName">
                    <el-input v-model="form.appOpsDepName" placeholder="" v-if="!isDetail"></el-input>
                    <span v-else>{{ form.appOpsDepName }}</span>
                </el-form-item>
            </dg-col>
            <dg-col :span="24">
                <el-form-item label="应用系统说明：" prop="managerDescribe">
                    <el-input
                        v-model="form.managerDescribe"
                        placeholder=""
                        type="textarea"
                        :rows="3"
                        v-if="!isDetail"
                    ></el-input>
                    <span v-else>{{ form.managerDescribe }}</span>
                </el-form-item>
            </dg-col>
        </el-form>
    </dg-row>
</template>

<script>
import { appRestApi } from "@/api/application";
export default {
    props: {
        id: String,
        isDetail: {
            type: Boolean,
            default: false
        }
    },
    components: {},
    data() {
        return {
            form: {
                applyName: "",
                appEnglishName: "",
                lineTime: "",
                fzr: "",
                managerOrgName: "",
                applyCode: "",
                applyStatus: "",
                orgCode: "",
                appOpsDepName: "",
                managerDescribe: ""
            },
            rules: {
                applyName: [{ required: true, message: "请输入应用系统名称", trigger: "change" }],
                applyCode: [{ required: true, message: "请输入应用系统编号", trigger: "change" }],
                appEnglishName: [{ required: true, message: "请输入应用英文名称", trigger: "change" }],
                applyStatus: [{ required: true, message: "请选择系统在用标识", trigger: "change" }]
            },
            show: false
        };
    },
    computed: {},
    methods: {
        /**
         * 保存
         */
        saveForm() {
            return new Promise((resolve) => {
                this.$refs.form.validate((valid) => {
                    if (valid) {
                        const api = this.id ? "update" : "save";
                        appRestApi[api](this.form)
                            .then((res) => {
                                this.$message.success("保存成功!");
                                resolve("成功");
                            })
                            .catch((error) => {
                                this.$message.error(error);
                            });
                    }
                });
            });
        },
        /**
         * 获取详情
         */
        getDetail() {
            appRestApi.detail(this.id).then((res) => {
                this.form = res;
                this.show = true;
            });
        }
    },
    created() {
        if (this.id) {
            if (this.isDetail) {
                this.rules = {};
            }
            this.getDetail();
        }else {
            this.show = true;
        }
    },
    mounted() {}
};
</script>

<style lang='scss'>
</style>