web资产弹出层

yfy
许宏杰 2 months ago
parent 1298d0da72
commit 43d52a9111

@ -1,199 +1,4 @@
const list = [
{ key: "xtmc", label: "系统名称", type: "input", prop: "xtmc" },
{ key: "dwmc", label: "单位名称", type: "input", prop: "dwmc" },
{ key: "xtym", label: "系统域名", type: "input", prop: "xtym" },
{
key: "fwwz",
label: "访问网址",
type: "input2",
prop: "nickName",
add: true,
},
{
key: "jsyydw",
label: "建设(运营)单位",
type: "input",
prop: "jsyydw",
},
{
key: "hlwkfyt",
label: "互联网开放用途",
type: "select",
prop: "hlwkfyt",
dict: "zc_hlwkfyt",
},
{
key: "ipAddress",
key2: "ipPort",
label: "Ip/Port",
type: "input2",
prop: "nickName",
},
{
key: "isZjhlwip",
label: "是否自建互联网专线IP",
type: "select",
prop: "isZjhlwip",
dict: "is_no",
},
{
key: "glymList",
label: "关联域名",
type: "input",
prop: "glymList",
add: true,
},
{ key: "ymdqsj", label: "域名到期时间", type: "date", prop: "ymdqsj" },
{ key: "glIpList", label: "关联IP", type: "input3", prop: "glIpList" },
{
key: "ymtxrXm",
key2: "ymtxrLxfs",
label: "到期提醒人",
type: "input2",
prop: "ymtxrXm",
},
{
key: "xtzyx",
label: "系统重要性",
type: "select",
prop: "xtzyx",
dict: "zc_xtzyx",
},
{
key: "gjxt",
label: "是否关基系统",
type: "select",
prop: "gjxt",
dict: "is_no",
},
{
key: "xtlx",
label: "系统类型",
type: "select",
prop: "xtlx",
dict: "zc_xtlx",
},
{ key: "jfxx", label: "机房信息", type: "input", prop: "jfxx" },
{ key: "sysj", label: "使用时间", type: "date", prop: "sysj" },
{
key: "hlwxt",
label: "是否是互联网系统",
type: "select",
prop: "hlwxt",
dict: "is_no",
},
{ key: "xtbh", label: "系统编号", type: "input", prop: "xtbh" },
{
key: "xtzt",
label: "系统状态",
type: "select",
prop: "xtzt",
dict: "zc_xtzt",
},
{
key: "zxzt",
label: "在线状态",
type: "select",
prop: "zxzt",
dict: "zc_zxzt",
},
{
key: "cjmx",
label: "C-机密性",
type: "select",
prop: "cjmx",
dict: "zc_c_i_a",
},
{
key: "iwzx",
label: "I-完整性",
type: "select",
prop: "iwzx",
dict: "zc_c_i_a",
},
{
key: "akyx",
label: "A-可用性",
type: "select",
prop: "akyx",
dict: "zc_c_i_a",
},
{
key: "chl",
label: "存活率",
type: "select",
prop: "chl",
dict: "zc_c_i_a",
},
{ key: "nickName", label: "地理位置", type: "select", prop: "nickName" },
{ key: "jd", label: "经度", type: "input", prop: "jd" },
{ key: "wd", label: "纬度", type: "input", prop: "wd" },
{ key: "nickName", label: "系统特征", type: "multiple", prop: "nickName" },
{
key: "yhgm",
label: "用户规模",
type: "select",
prop: "yhgm",
dict: "zc_yhgm",
},
{
key: "hlwjryys",
label: "互联网接入运营商",
type: "input",
prop: "hlwjryys",
},
{
key: "zcwljrdz",
label: "资产物理接入地址",
type: "input",
prop: "zcwljrdz",
},
{
key: "bsypt",
label: "是否部署云平台",
type: "select",
prop: "bsypt",
dict: "is_no",
},
{
key: "yfwsmc",
label: "云服务商名称",
type: "input",
prop: "yfwsmc",
},
{
key: "wzfwxy",
label: "网站访问协议/开通协议",
type: "input",
prop: "wzfwxy",
},
{
key: "xtbsfs",
label: "系统部署方式",
type: "select",
prop: "xtbsfs",
dict: "zc_xtbsfs",
},
{
key: "dgzkf",
label: "是否对公众开放",
type: "select",
prop: "dgzkf",
dict: "is_no",
},
{
key: "dns",
label: "DNS",
type: "input",
prop: "dns",
},
{
key: "xtbq",
label: "系统标签",
type: "input",
prop: "xtbq",
},
];
const list = [];
console.log(list);
export default list;

@ -14,165 +14,10 @@
label-position="right"
:disabled="disabled"
>
<form-title title="基本信息"></form-title>
<div class="grid-container">
<el-form-item
:label="item.label"
v-for="(item, index) in list.slice(0, 39)"
:key="index"
:prop="item.prop"
:class="item.type == 'multiple' ? 'full-width' : ''"
:required="item.required"
>
<!-- 输入框 -->
<el-input
v-if="item.type == 'input'"
v-model="ruleForm[item.key]"
:placeholder="'请输入' + item.label"
></el-input>
<!-- 多选框 -->
<el-checkbox-group v-model="xttz" v-if="item.type == 'multiple'">
<el-checkbox label="党政机关门户网站、重点新闻网站" name="type">
党政机关门户网站重点新闻网站
</el-checkbox>
<el-checkbox label="大型网络平台" name="type">
大型网络平台
</el-checkbox>
<el-checkbox
label="系统业务覆盖单个地市级行政区30%以上人口的工作、生活"
name="type"
>
系统业务覆盖单个地市级行政区30%以上人口的工作生活
</el-checkbox>
<el-checkbox
label="系统业务覆盖10万人以上用水、用电、用气、用油、取暖或交通出行"
name="type"
>
系统业务覆盖10万人以上用水用电用气用油取暖或交通出行
</el-checkbox>
<el-checkbox label="存储超过5万人以上个人敏感信息" name="type">
存储超过5万人以上个人敏感信息
</el-checkbox>
<el-checkbox
label="存储超过100万条以上地理、人口、资源等国家基础数据"
name="type"
>
存储超过100万条以上地理人口资源等国家基础数据
</el-checkbox>
</el-checkbox-group>
<!-- select框 -->
<el-select
v-if="item.type == 'select'"
v-model="ruleForm[item.key]"
:placeholder="'请选择' + item.label"
>
<el-option
v-for="dict in dict.type[item.dict]"
:key="dict.value"
:label="dict.label"
:value="dict.value"
/>
</el-select>
<!-- 日期框 -->
<el-date-picker
v-if="item.type == 'date'"
v-model="ruleForm[item.key]"
type="date"
format="yyyy-MM-dd"
value-format="yyyy-MM-dd"
placeholder="选择日期"
>
</el-date-picker>
<!-- 输入框前后带插槽 -->
<el-input
v-if="item.type == 'input3'"
placeholder="请输入内容"
class="input-with-select"
>
<el-select slot="prepend" placeholder="选择设备IP">
<el-option
v-for="dict in dict.type.sb_ip"
:key="dict.value"
:label="dict.label"
:value="dict.label"
/>
</el-select>
<template slot="append">
<el-input placeholder="端口号" v-model="input1"> </el-input>
<i
class="el-icon-circle-plus-outline"
style="margin-left: 5px; font-size: 16px; cursor: pointer"
></i>
</template>
</el-input>
<!-- 访问网址 -->
<el-input
v-if="item.key == 'fwwz'"
placeholder="请输入内容"
class="input-with-select"
v-model="ruleForm[item.key]"
>
<template slot="prepend">
<el-select v-model="fwwzSelect">
<el-option label="http" value="http"></el-option>
<el-option label="https" value="https"></el-option>
</el-select>
<span class="wangzhispan">://</span>
</template>
<template slot="append">
<el-popover placement="top" width="250" trigger="hover">
<div>说明请仔细填写访问地址确保网站地址能被访问</div>
<i
slot="reference"
class="el-icon-document-copy"
style="margin-left: 5px; font-size: 16px; cursor: pointer"
></i>
</el-popover>
</template>
</el-input>
<!-- Ip/Port -->
<el-input
v-if="item.key == 'ipAddress'"
placeholder="请输入内容"
class="input-with-select"
v-model="ruleForm[item.key]"
>
<template slot="append">
<el-input placeholder="端口号" v-model="ruleForm[item.key2]">
</el-input>
</template>
</el-input>
<!-- 到期提醒人 -->
<el-input
v-if="item.key == 'daoqitixingren'"
placeholder="请输入手机号"
class="input-with-select"
>
<template slot="append">
<el-input placeholder="姓名" v-model="input1"> </el-input>
</template>
</el-input>
</el-form-item>
</div>
<form-title title="系统防护信息"> </form-title>
<form-title title="联系人"></form-title>
<form-title title="ICP备案"></form-title>
<form-title title="公安机关备案信息"></form-title>
<form-title title="系统架构"></form-title>
<form-title title="等保信息"></form-title>
<form-title title="密评信息"></form-title>
<form-title title="供应链信息"></form-title>
<form-title title="基础网络"></form-title>
<form-title title="新监管业务形态"></form-title>
<form-title title="Whois信息"></form-title>
<form-title title="业务系统拓扑图"></form-title>
</el-form>
<span slot="footer" class="dialog-footer">
<el-button @click="open = false" size="medium"></el-button>
<el-button @click="open = false" size="medium"> </el-button>
<el-button
type="primary"
size="medium"
@ -185,69 +30,21 @@
</template>
<script>
import formTitle from "../formTitle.vue";
import formData from "./index.js";
export default {
dicts: [
"is_no",
"zc_xtlx",
"zc_xtzyx",
"zc_xtzt",
"zc_zxzt",
"zc_c_i_a",
"zc_yhgm",
"zc_xtbsfs",
"zc_hlwkfyt",
"fgfw",
"wlxz",
"ywlx",
"hlqk",
"fwdx",
"fwfw",
"dbxx_dbdj",
"dbxx_zjps",
"sf_cpszsdj",
"sjzc_gxsx",
"sjzc_kfsx",
"sjzc_sjly",
"sjzc_gxzq",
"sjzc_sjfjfl",
"fwq_czxt",
"wlw_fwdx",
"wlw_wlhlqk",
"wlw_fwfw",
"dwlx",
"sb_ip",
"xtfhqk_fcg",
"xtfhqk_fxl",
"xtfhqk_fzd",
"xtfhqk_fls",
"database_type",
"sjzc_sjldw",
],
components: { formTitle },
data() {
return {
fwwzSelect: [],
xttz: [],
disabled: false,
list: formData,
loading: false,
options: [],
list: [],
title: "",
open: true,
ruleForm: {},
rules: {},
disabled: false,
};
},
methods: {
submit() {
this.$refs["ruleForm"].validate(async (valid) => {
if (valid) {
console.log(this.list, this.ruleForm);
} else {
return false;
}
});
},
submit() {},
},
};
</script>
@ -266,24 +63,8 @@ export default {
}
::v-deep .el-select,
.el-cascader,
.el-date-editor {
.el-date-editor,
.el-autocomplete {
width: 100%;
}
::v-deep .input-with-select {
.el-input-group__prepend {
width: 125px !important;
.el-select {
width: auto !important;
}
}
.el-input-group__append {
width: 130px;
background: transparent;
border: 0;
padding: 0;
padding-left: 10px;
}
}
</style>

Loading…
Cancel
Save