web资产

src/assets/styles/element-ui.scss

@@ -90,3 +90,16 @@
   .el-submenu__icon-arrow {
   display: none;
 }
+.search-form {
+  .el-form-item__content {
+    width: 280px;
+    .el-select,
+    .el-date-editor {
+      width: 100%;
+    }
+  }
+}
+.el-dialog.is-fullscreen {
+  margin-left: 260px;
+  width: calc(100% - 260px) !important;
+}

src/views/auditPages/assetsManagement.vue

@@ -43,6 +43,7 @@
         size="small"
         :inline="true"
         label-width="88px"
+        class="search-form"
       >
         <el-form-item label="系统名称：" prop="xtmc">
           <el-input
@@ -218,6 +219,9 @@
           <el-button @click="upload.open = false">取 消</el-button>
         </div>
       </el-dialog>
+
+      <!-- 新增/修改/查看 -->
+      <assetsManagement />
     </template>
   </main-app>
 </template>
@@ -225,8 +229,10 @@
 <script>
 import { getToken } from "@/utils/auth";
 import { assetUnit, deleteAssetInfo, schema } from "@/api/auditPagesApi/index";
+import assetsManagement from "./components/assetsManagement/index.vue";
 export default {
   dicts: ["zc_xtzt", "zc_xtlx", "tc_sys_stste"],
+  components: { assetsManagement },
   data() {
     return {
       deptOptions: undefined,
@@ -396,12 +402,4 @@ export default {
 };
 </script>
 
-<style lang="scss" scoped>
+<style lang="scss" scoped></style>
-::v-deep .el-form-item__content {
-  width: 280px;
-  .el-select,
-  .el-date-editor {
-    width: 100%;
-  }
-}
-</style>

src/views/auditPages/components/assetsManagement/index.js

@@ -0,0 +1,199 @@
+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",
+  },
+];
+
+console.log(list);
+export default list;

src/views/auditPages/components/assetsManagement/index.vue

@@ -0,0 +1,289 @@
+<template>
+  <el-dialog
+    :title="title"
+    :visible.sync="open"
+    append-to-body
+    fullscreen
+    center
+  >
+    <el-form
+      :model="ruleForm"
+      :rules="rules"
+      ref="ruleForm"
+      label-width="170px"
+      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
+        type="primary"
+        size="medium"
+        @click="submit()"
+        v-show="!disabled"
+        >确 定</el-button
+      >
+    </span>
+  </el-dialog>
+</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,
+      title: "",
+      open: true,
+      ruleForm: {},
+      rules: {},
+    };
+  },
+  methods: {
+    submit() {
+      this.$refs["ruleForm"].validate(async (valid) => {
+        if (valid) {
+          console.log(this.list, this.ruleForm);
+        } else {
+          return false;
+        }
+      });
+    },
+  },
+};
+</script>
+
+<style lang="scss" scoped>
+.grid-container {
+  display: grid;
+  /* 设置网格布局为一行两列 */
+  grid-template-columns: repeat(2, 1fr);
+  gap: 10px;
+}
+/* 定义强制占一行的类样式 */
+.full-width {
+  /* 让元素跨越两列，从而占满一行 */
+  grid-column: span 2;
+}
+::v-deep .el-select,
+.el-cascader,
+.el-date-editor {
+  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>

src/views/auditPages/components/unitNewAndEdit/index.vue

@@ -12,7 +12,6 @@
       :rules="rules"
       ref="ruleForm"
       label-width="170px"
-      class="demo-ruleForm"
       label-position="right"
       :disabled="disabled"
     >
@@ -392,10 +391,6 @@ export default {
 </script>
 
 <style lang="scss" scoped>
-::v-deep .el-dialog.is-fullscreen {
-  margin-left: 260px;
-  width: calc(100% - 260px) !important;
-}
 .grid-container {
   display: grid;
   /* 定义两列布局，每列平均分配空间 */

src/views/auditPages/unit.vue

@@ -531,14 +531,4 @@ export default {
 };
 </script>
 
-<style lang="scss" scoped>
+<style lang="scss" scoped></style>
-::v-deep .search-form {
-  .el-form-item__content {
-    width: 280px;
-    .el-select,
-    .el-date-editor {
-      width: 100%;
-    }
-  }
-}
-</style>