simulation-front/src/views/algorithmsLibrary/gitAlgorithms.vue

<template>
    <div class="gitAlgorithmsPanel">
        <el-row>
            <el-col :span="16" :offset="4">
                <el-form
                    ref="form"
                    :model="form"
                    :rules="rules"
                    label-width="160px"
                >
                    <el-form-item label="算法名称:" prop="algorithmName">
                        <el-input
                            placeholder="请输入"
                            maxlength="60"
                            v-autoTrim="{ obj: form, key: 'algorithmName' }"
                            v-model="form.algorithmName"
                        >
                        </el-input>
                    </el-form-item>
                    <el-form-item label="算法描述:" prop="description">
                        <el-input
                            placeholder="请输入"
                            maxlength="200"
                            v-autoTrim="{ obj: form, key: 'description' }"
                            v-model="form.description"
                        >
                        </el-input>
                    </el-form-item>

                    <el-form-item label="地址:" prop="gitUrl">
                        <el-input
                            placeholder="请输入"
                            maxlength="100"
                            v-autoTrim="{ obj: form, key: 'gitUrl' }"
                            v-model="form.gitUrl"
                        >
                        </el-input>
                    </el-form-item>
                    <el-form-item label="用户名:" prop="gitUserName">
                        <el-input
                            placeholder="请输入"
                            maxlength="30"
                            v-autoTrim="{ obj: form, key: 'gitUserName' }"
                            v-model="form.gitUserName"
                        >
                        </el-input>
                    </el-form-item>
                    <el-form-item label="密码:" prop="gitPassword">
                        <el-input
                            placeholder="请输入"
                            maxlength="30"
                            type="password"
                            v-autoTrim="{ obj: form, key: 'gitPassword' }"
                            v-model="form.gitPassword"
                        >
                        <el-button slot="suffix" type="primary" @click="testConnection">测试链接</el-button>
                        </el-input>
                    </el-form-item>
                </el-form>

                <div class="btns">
                    <el-button
                        type="primary"
                        @click="save"
                        >保存</el-button
                    >
                    <el-button
                        v-if="form.share === '0' || form.share === '1'"
                        type="primary"
                        @click="saveOther"
                        >另存为</el-button
                    >
                    <el-button type="primary" plain @click="cancel"
                        >取消</el-button
                    >
                </div>
            </el-col>
        </el-row>
    </div>
</template>

<script>
//import  from '';

export default {
    name: "gitAlgorithms", // 仓库算法详情
    components: {},
    data() {
        return {
            form: {
                id: "",
                algorithmName: "", // 算法名称
                description: "", // 算法描述
                gitUrl: "", // 地址
                gitUserName: "",  //仓库用户名
                gitPassword: "",  //仓库密码
                uploadMode: "2", // 方式
            },
            type: "1",
            rules: {
                algorithmName: [{ required: true, message: "请输入", trigger: "blur" }],
                description: [{ required: true, message: "请输入", trigger: "blur" }],
                gitUrl: [{ required: true, message: "请输入", trigger: "blur" }],
                gitUserName: [{ required: true, message: "请输入", trigger: "blur" }],
                gitPassword: [{ required: true, message: "请输入", trigger: "blur" }],
            },
        };
    },
    mounted(){
        let id = this.$route.query.id;
        if (id) {
            this.form.share = this.$route.query.share;
            this.$axios({
                method: "post",
                url: this.$api.algorithmsLibrary.selectDetailsById,
                data: {
                    id,
                },
            }).then((res) => {
                if (res.code == 200 && res.info) {
                    this.form = res.info;
                } else {
                    this.$message.error(res.message || "获取信息失败");
                }
            });
        }
    },
    methods: {
        testConnection(){
            let validateFieldList = []
            this.$refs.form.validateField(['gitUserName','gitPassword','gitUrl'],async errorMsg=>{
                if(!errorMsg){
                    validateFieldList.push(errorMsg)
                    if(validateFieldList.length == 3 && validateFieldList.every(item=>item ==='')){
                        this.$axios({
                            method: "POST",
                            url: this.$api.algorithmsLibrary.testConnection,
                            data:{
                                gitUrl: this.form.gitUrl,
                                gitUserName: this.form.gitUserName,
                                gitPassword: this.form.gitPassword,
                            }
                        }).then(res=>{
                            if(res.code == 200) {
                                this.$message.success("测试成功");
                            } else {
                                this.$message.error(res.message || "测试失败");
                            }
                        })    
                    }
                }else{
                    return false
                } 
            })
            return
        },
        save(){
            this.$refs.form.validate((valid) => {
                if (valid) {
                    this.$axios({
                        method: "post",
                        url: this.$api.algorithmsLibrary.addOrUpdate,
                        data: {
                            ...this.form,
                        },
                    }).then((res) => {
                        if (res.code == 200) {
                            this.$message.success("保存成功");
                            this.cancel();
                        } else {
                            this.$message.error(res.message || "保存失败");
                        }
                    });
                }
            });
        },
        saveOther(){
            this.$refs.form.validate((valid) => {
                if (valid) {
                    let data = {...this.form}
                    data.id = ''
                    this.$axios({
                        method: "post",
                        url: this.$api.algorithmsLibrary.addOrUpdate,
                        data: data,
                    }).then((res) => {
                        if (res.code == 200) {
                            this.$message.success("保存成功");
                            this.cancel();
                        } else {
                            this.$message.error(res.message || "保存失败");
                        }
                    });
                }
            });
        },
        cancel(){
            this.$router.replace({ path: "/algorithmsLibraryList" });
        }
        /* typeChange(val) {
            if (val === "1") {
                this.rules = {
                    name: [
                        { required: true, message: "请输入", trigger: "blur" },
                    ],
                    sf: [
                        {
                            required: true,
                            message: "请选择",
                            trigger: "change",
                        },
                    ],
                    type: [
                        {
                            required: true,
                            message: "请选择",
                            trigger: "change",
                        },
                    ],
                };
            } else {
                this.rules = {
                    name: [
                        { required: true, message: "请输入", trigger: "blur" },
                    ],
                    type: [
                        {
                            required: true,
                            message: "请选择",
                            trigger: "change",
                        },
                    ],
                    add: [
                        { required: true, message: "请输入", trigger: "blur" },
                    ],
                    add1: [
                        { required: true, message: "请输入", trigger: "blur" },
                    ],
                    add2: [
                        { required: true, message: "请输入", trigger: "blur" },
                    ],
                };
            }
            this.$nextTick(() => {
                this.$refs["form"].clearValidate();
            });
            this.type = val;
        }, */
    },
};
</script>

<style lang='less' scoped>
.gitAlgorithmsPanel {
    padding: 45px 30px 0;

    .el-form {

        /deep/ .el-input,
        .el-select {
            width: 100%;
        }
        /deep/ .el-input__suffix{
            right: 0;
        }
    }

    .testLinkPanel {
        margin-left: 160px;
    }

    .btns {
        padding-top: 90px;
        text-align: center;
    }
}
</style>