spms-vue/src/views/basic/BasicThirdSysModify.vue

<template>
    <div>
        <el-card>


            <el-row :gutter="20" class="el-row" type="flex" align="middle">
                <el-col :span="10" class="el-col">
                    <div class="text item">
                        <div class="itemTag">
                            <span>系统ID:&nbsp;</span>
                        </div>
                        <el-input
                            style="width: 200px"
                            size="mini"
                            splaceholder="请输入内容"
                            :disabled="true"
                            v-model="inputQuery.thirdId"
                        ></el-input>
                    </div>
                </el-col>
                <el-col :span="10" class="el-col">
                    <div class="text item">
                        <div class="itemTag">
                            <span>系统名称:&nbsp;</span>
                        </div>
                        <el-input
                            style="width: 200px"
                            size="mini"
                            splaceholder="请输入内容"
                            v-model="inputQuery.thirdName"
                        ></el-input>
                    </div>
                </el-col>

            </el-row>
            <el-row :gutter="20" class="el-row" type="flex">
                <el-col :span="10" class="el-col">
                    <div class="text item">
                        <div class="itemTag">
                            <span>API说明文档:&nbsp;</span>
                        </div>
                        <div style="padding-top: 5px">
                            <a :href="inputQuery.guideUrl" target="_blank">{{ inputQuery.thirdName }}接口说明文档</a>
                        </div>


                    </div>
                </el-col>
                <el-col :span="4" class="el-col">
                    <div class="text item">
                        <el-checkbox v-model="inputQuery.enabled">是否启用</el-checkbox>
                    </div>
                </el-col>
                <el-col :span="4" class="el-col">
                    <div class="text item">
                        <el-checkbox v-model="inputQuery.mainSys">是否设为主系统</el-checkbox>
                    </div>
                </el-col>
            </el-row>

            <el-row :gutter="20" class="el-row" type="flex">
                <el-col :span="18" class="el-col">
                    <div class="text item">
                        <div class="itemTag">
                            <span>第三方服务IP地址:&nbsp;</span>
                        </div>

                        <el-input
                            style="width: 80%"
                            size="mini"
                            splaceholder="请输入内容"
                            v-model="inputQuery.thridUrl"
                        ></el-input>
                    </div>
                </el-col>
            </el-row>

        </el-card>
        <el-card>
            <el-row :gutter="20" class="el-row" type="flex">
                <el-col :span="12" class="el-col">

                    <div class="text item">
                        <span>UDI自助管理平台接口授权:&nbsp;</span>
                    </div>
                </el-col>
            </el-row>
            <el-row :gutter=" 20" class="el-row" type="flex">
                <el-col :span="24" class="el-col">
                    <div class="text item">
                        <label>apikey：</label>
                        <el-input
                            style="width: 38%; margin-right: 20px;"
                            size="mini"
                            splaceholder="请输入内容"
                            v-model="inputQuery.licenseApikey"
                        ></el-input>
                        <label>secretkey：</label>
                        <el-input
                            style="width: 38%"
                            size="mini"
                            splaceholder="请输入内容"
                            v-model="inputQuery.licenseSecretkey"
                        ></el-input>

                    </div>
                </el-col>
            </el-row>
        </el-card>


        <el-card>
            <el-row :gutter="20" class="el-row" type="flex">
                <el-col :span="12" class="el-col">

                    <div class="text item">
                        <span>第三方服务接口授权:&nbsp;</span>
                    </div>
                </el-col>
            </el-row>
            <el-row :gutter=" 20" class="el-row" type="flex">
                <el-col :span="24" class="el-col">
                    <div class="text item">
                        <label>apikey：</label>
                        <el-input
                            style="width: 38%; margin-right: 20px;"
                            size="mini"
                            splaceholder="请输入内容"
                            v-model="inputQuery.apikey"
                        ></el-input>
                        <label>secretkey：</label>
                        <el-input
                            style="width: 38%"
                            size="mini"
                            splaceholder="请输入内容"
                            v-model="inputQuery.apikey"
                        ></el-input>

                    </div>
                </el-col>
            </el-row>
        </el-card>

        <el-row :gutter="20" class="el-row" type="flex" style="margin-top: 10px">
            <el-col :span="24" class="el-col">
                <div class="text item">
                    <div class="itemTag">
                        <span>备注说明:&nbsp;</span>
                    </div>

                    <el-input
                        style="width: 80%"
                        type="textarea"
                        size="mini"
                        rows="6"
                        splaceholder="请输入内容"
                        v-model="inputQuery.remark"
                        @input="change()"
                    ></el-input>
                </div>
            </el-col>

        </el-row>
    </div>
</template>

<script>
export default {
    name: "inputQuery",
    props: {
        inputQuery: {
            type: Object,
            required: true,
        },
    },
};
</script>
<style scoped>
.itemTag {
    float: left;
    text-align: left;
    margin-top: 5px;
}

.text {
    font-size: 13px;
    font-family: "Microsoft YaHei";
}


.el-row {
    display: flex;
    flex-wrap: wrap;
    margin-bottom: 20px;

}

.el-col {
    border-radius: 4px;
    flex-wrap: wrap;

}
</style>