add demo

package.json

@@ -37,7 +37,9 @@
     "parserOptions": {
       "parser": "@babel/eslint-parser"
     },
-    "rules": {}
+    "rules": {
+      "vue/multi-word-component-names": "off"
+    }
   },
   "browserslist": [
     "> 1%",

src/router/index.js

@@ -1,5 +1,7 @@
 import Vue from 'vue'
 import VueRouter from 'vue-router'
+import hazardRoutes from '../views/hazard/routes'
+
 const processSystem = () => import(/* webpackChunkName: "processSystem" */ '../views/processSystem.vue')
 
 Vue.use(VueRouter)
@@ -9,7 +11,8 @@ const routes = [
     path: '/',
     name: 'processSystem',
     component: processSystem
-  }
+  },
+  ...hazardRoutes,
 ]
 
 const router = new VueRouter({

src/views/hazard/RiskClassification/edit.vue

@@ -0,0 +1,268 @@
+<template>
+  <div>
+    <el-row :gutter="15">
+      <el-form ref="elForm" :model="formData" :rules="rules" size="medium" label-width="200px">
+        <el-col :span="24">
+          <el-row type="flex" justify="space-between" align="top">
+            <el-col :span="24">
+              <el-form-item label="单位" prop="field109">
+                <el-select v-model="formData.field109" placeholder="请选择单位" clearable :style="{width: '100%'}">
+                  <el-option v-for="(item, index) in field109Options" :key="index" :label="item.label"
+                    :value="item.value" :disabled="item.disabled"></el-option>
+                </el-select>
+              </el-form-item>
+            </el-col>
+            <el-col :span="24">
+              <el-form-item label="责任部门" prop="field114">
+                <el-select v-model="formData.field114" placeholder="请选择责任部门" clearable
+                  :style="{width: '100%'}">
+                  <el-option v-for="(item, index) in field114Options" :key="index" :label="item.label"
+                    :value="item.value" :disabled="item.disabled"></el-option>
+                </el-select>
+              </el-form-item>
+            </el-col>
+            <el-col :span="24">
+              <el-form-item label="重大危险源名称" prop="field113">
+                <el-input v-model="formData.field113" placeholder="请输入重大危险源名称" clearable
+                  :style="{width: '100%'}"></el-input>
+              </el-form-item>
+            </el-col>
+          </el-row>
+        </el-col>
+        <el-col :span="24">
+          <el-form-item label="单行文本" prop="field128">
+            <el-input v-model="formData.field128" placeholder="请输入单行文本" clearable :style="{width: '100%'}">
+            </el-input>
+          </el-form-item>
+        </el-col>
+        <el-col :span="16">
+          <el-row type="flex" justify="space-between" align="middle">
+            <el-col :span="24">
+              <el-form-item label="时间选择" prop="field116">
+                <el-time-picker v-model="formData.field116" format="HH:mm:ss" value-format="HH:mm:ss"
+                  :picker-options='{"selectableRange":"00:00:00-23:59:59"}' :style="{width: '100%'}"
+                  placeholder="请选择时间选择" clearable></el-time-picker>
+              </el-form-item>
+            </el-col>
+            <el-col :span="24">
+              <el-form-item label="下拉选择" prop="field122">
+                <el-select v-model="formData.field122" placeholder="请选择下拉选择" clearable
+                  :style="{width: '100%'}">
+                  <el-option v-for="(item, index) in field122Options" :key="index" :label="item.label"
+                    :value="item.value" :disabled="item.disabled"></el-option>
+                </el-select>
+              </el-form-item>
+            </el-col>
+          </el-row>
+        </el-col>
+        <el-col :span="24">
+          <el-row type="flex" justify="space-between" align="top">
+            <el-col :span="16">
+              <el-form-item label="所在地址" prop="field134">
+                <el-input v-model="formData.field134" placeholder="请输入所在地址" clearable
+                  :style="{width: '100%'}"></el-input>
+              </el-form-item>
+            </el-col>
+            <el-col :span="8">
+              <el-form-item label="单位从业人员数量" prop="field131">
+                <el-input v-model="formData.field131" placeholder="请输入单位从业人员数量" clearable
+                  :style="{width: '100%'}"></el-input>
+              </el-form-item>
+            </el-col>
+          </el-row>
+        </el-col>
+        <el-col :span="16">
+          <el-row type="flex" justify="space-between" align="top">
+            <el-col :span="16">
+              <el-form-item label="R值" prop="field136">
+                <el-input v-model="formData.field136" placeholder="请输入R值" clearable :style="{width: '100%'}">
+                </el-input>
+              </el-form-item>
+            </el-col>
+            <el-col :span="16">
+              <el-form-item label="是否位于化工（工业）园区" prop="field137">
+                <el-select v-model="formData.field137" placeholder="请选择是否位于化工（工业）园区" clearable
+                  :style="{width: '100%'}">
+                  <el-option v-for="(item, index) in field137Options" :key="index" :label="item.label"
+                    :value="item.value" :disabled="item.disabled"></el-option>
+                </el-select>
+              </el-form-item>
+            </el-col>
+          </el-row>
+        </el-col>
+        <el-col :span="16">
+          <el-row type="flex" justify="space-between" align="top">
+            <el-col :span="16">
+              <el-form-item label="辨识单位" prop="field139">
+                <el-select v-model="formData.field139" placeholder="请选择辨识单位" clearable
+                  :style="{width: '100%'}">
+                  <el-option v-for="(item, index) in field139Options" :key="index" :label="item.label"
+                    :value="item.value" :disabled="item.disabled"></el-option>
+                </el-select>
+              </el-form-item>
+            </el-col>
+            <el-col :span="16">
+              <el-form-item label="辨识评估时间" prop="field140">
+                <el-date-picker v-model="formData.field140" format="yyyy-MM-dd" value-format="yyyy-MM-dd"
+                  :style="{width: '100%'}" placeholder="请选择辨识评估时间" clearable></el-date-picker>
+              </el-form-item>
+            </el-col>
+          </el-row>
+        </el-col>
+        <el-col :span="24">
+          <el-form-item label="单元内主要装置、设施及生产（储存）规模" prop="field141">
+            <el-input v-model="formData.field141" type="textarea" placeholder="请输入单元内主要装置、设施及生产（储存）规模"
+              :autosize="{minRows: 4, maxRows: 4}" :style="{width: '100%'}"></el-input>
+          </el-form-item>
+        </el-col>
+        <el-col :span="24">
+          <el-form-item label="重大危险源与周边重点防护目标最近距离情况（m）" prop="field142">
+            <el-input v-model="formData.field142" type="textarea" placeholder="请输入重大危险源与周边重点防护目标最近距离情况（m）"
+              :autosize="{minRows: 4, maxRows: 4}" :style="{width: '100%'}"></el-input>
+          </el-form-item>
+        </el-col>
+        <el-col :span="24">
+          <el-form-item label="厂区边界外 500m 范围内人数估算值" prop="field143">
+            <el-input v-model="formData.field143" type="textarea" placeholder="请输入厂区边界外 500m 范围内人数估算值"
+              :autosize="{minRows: 4, maxRows: 4}" :style="{width: '100%'}"></el-input>
+          </el-form-item>
+        </el-col>
+        <el-col :span="24">
+          <el-form-item label="近三年内危险化学品事故情况" prop="field144">
+            <el-input v-model="formData.field144" type="textarea" placeholder="请输入近三年内危险化学品事故情况"
+              :autosize="{minRows: 4, maxRows: 4}" :style="{width: '100%'}"></el-input>
+          </el-form-item>
+        </el-col>
+        <el-col :span="24">
+          <el-form-item size="large">
+            <el-button type="primary" @click="submitForm">提交</el-button>
+            <el-button @click="resetForm">重置</el-button>
+          </el-form-item>
+        </el-col>
+      </el-form>
+    </el-row>
+  </div>
+</template>
+<script>
+export default {
+  components: {},
+  props: [],
+  data() {
+    return {
+      formData: {
+        field109: undefined,
+        field114: undefined,
+        field113: undefined,
+        field128: undefined,
+        field116: null,
+        field122: undefined,
+        field134: undefined,
+        field131: undefined,
+        field136: undefined,
+        field137: undefined,
+        field139: undefined,
+        field140: null,
+        field141: undefined,
+        field142: undefined,
+        field143: undefined,
+        field144: undefined,
+      },
+      rules: {
+        field109: [{
+          required: true,
+          message: '请选择单位',
+          trigger: 'change'
+        }],
+        field114: [{
+          required: true,
+          message: '请选择责任部门',
+          trigger: 'change'
+        }],
+        field113: [{
+          required: true,
+          message: '请输入重大危险源名称',
+          trigger: 'blur'
+        }],
+        field128: [{
+          required: true,
+          message: '请输入单行文本',
+          trigger: 'blur'
+        }],
+        field116: [{
+          required: true,
+          message: '请选择时间选择',
+          trigger: 'change'
+        }],
+        field122: [{
+          required: true,
+          message: '请选择下拉选择',
+          trigger: 'change'
+        }],
+        field134: [],
+        field131: [],
+        field136: [],
+        field137: [],
+        field139: [],
+        field140: [],
+        field141: [],
+        field142: [],
+        field143: [],
+        field144: [],
+      },
+      field109Options: [{
+        "label": "选项一",
+        "value": 1
+      }, {
+        "label": "选项二",
+        "value": 2
+      }],
+      field114Options: [{
+        "label": "选项一",
+        "value": 1
+      }, {
+        "label": "选项二",
+        "value": 2
+      }],
+      field122Options: [{
+        "label": "选项一",
+        "value": 1
+      }, {
+        "label": "选项二",
+        "value": 2
+      }],
+      field137Options: [{
+        "label": "选项一",
+        "value": 1
+      }, {
+        "label": "选项二",
+        "value": 2
+      }],
+      field139Options: [{
+        "label": "选项一",
+        "value": 1
+      }, {
+        "label": "选项二",
+        "value": 2
+      }],
+    }
+  },
+  computed: {},
+  watch: {},
+  created() {},
+  mounted() {},
+  methods: {
+    submitForm() {
+      this.$refs['elForm'].validate(valid => {
+        if (!valid) return
+        // TODO 提交表单
+      })
+    },
+    resetForm() {
+      this.$refs['elForm'].resetFields()
+    },
+  }
+}
+
+</script>
+<style>
+</style>

src/views/hazard/RiskClassification/index.vue

@@ -0,0 +1,3 @@
+<template>
+  <div>123</div>
+</template>

src/views/hazard/routes.js

@@ -0,0 +1,13 @@
+
+export default [
+  {
+    path: '/riskclassification',
+    name: 'riskclassification',
+    component: () => import(/* webpackChunkName: "riskclassification" */ './RiskClassification/index.vue')
+  },
+  {
+    path: '/riskclassification/edit',
+    name: 'riskclassification.edit',
+    component: () => import(/* webpackChunkName: "riskclassificationedit" */ './RiskClassification/edit.vue')
+  }
+]