辨识分级

src/views/hazard/RiskClassification/index.vue

@@ -1,3 +1,277 @@
 <template>
-  <div>123</div>
-</template>
+  <div :style="{ padding: '32px' }">
+    <el-card style="text-align: left">
+      <el-button type="primary" size="medium"> 新增 </el-button>
+      <el-button size="medium" plain> 导出 </el-button>
+    </el-card>
+    <el-card :style="{ marginTop: '16px' }">
+      <el-row :gutter="15">
+        <el-form
+          ref="elForm"
+          :model="formData"
+          size="medium"
+          label-width="120px"
+        >
+          <el-col :span="24">
+            <el-row type="flex" justify="start" align="top">
+              <el-col :span="24">
+                <el-form-item label="重大危险源名称" prop="field110">
+                  <el-input
+                    v-model="formData.field110"
+                    placeholder="请输入重大危险源名称"
+                    clearable
+                    :style="{ width: '100%' }"
+                  ></el-input>
+                </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="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="field115">
+                  <el-date-picker
+                    type="daterange"
+                    v-model="formData.field115"
+                    format="yyyy-MM-dd"
+                    value-format="yyyy-MM-dd"
+                    :style="{ width: '100%' }"
+                    start-placeholder="开始日期"
+                    end-placeholder="结束日期"
+                    range-separator="至"
+                    clearable
+                  ></el-date-picker>
+                </el-form-item>
+              </el-col>
+              <el-col :span="7">
+                <el-form-item label-width="0" prop="field113">
+                  <el-button size="medium" plain> 查询 </el-button>
+                </el-form-item>
+              </el-col>
+              <el-col :span="4">
+                <el-form-item label-width="0" prop="field112">
+                  <el-button size="medium" plain> 重置 </el-button>
+                </el-form-item>
+              </el-col>
+            </el-row>
+          </el-col>
+        </el-form>
+        <el-table stripe :data="tableData" border style="width: 100%">
+          <el-table-column type="index" label="序号" width="50">
+          </el-table-column>
+          <el-table-column align="center" prop="title" label="单位" />
+          <el-table-column
+            align="center"
+            prop="subTitle"
+            label="重大危险源名称"
+          />
+          <el-table-column align="center" prop="status" label="类别" />
+          <el-table-column align="center" prop="org" label="辨识单位" />
+          <el-table-column align="center" prop="startDate" label="投用时间">
+            <template slot-scope="scope">{{ scope.row.startDate }}</template>
+          </el-table-column>
+          <el-table-column align="center" prop="lv" label="重大危险源级别" />
+          <el-table-column align="center" prop="state" label="状态" width="100">
+            <template slot-scope="scope">
+              {{ scope.row.state === 1 ? "已备案" : "未备案" }}
+            </template>
+          </el-table-column>
+          <el-table-column
+            align="center"
+            label="操作"
+            min-width="100"
+            width="280"
+          >
+            <template slot-scope="scope">
+              <el-button type="text" @click="toggleState(scope.row)"
+                >修改</el-button
+              >
+              <el-button type="text" @click="toggleState(scope.row)"
+                >查看</el-button
+              >
+              <!-- <el-link
+                :underline="false"
+                style="margin-right: 1em"
+                type="text"
+              >
+                <router-link
+                  :to="{
+                    path: 'course/edit',
+                    query: { courseId: scope.row.courseId },
+                  }"
+                  >查看</router-link
+                >
+              </el-link> -->
+              <el-popconfirm
+                icon="el-icon-info"
+                icon-color="red"
+                title="确定要删除该数据吗？"
+                @onConfirm="handleDelete(scope.row)"
+              >
+                <el-link
+                  slot="reference"
+                  style="margin-left: 1em"
+                  :underline="false"
+                  type="primary"
+                  >删除</el-link
+                >
+              </el-popconfirm>
+            </template>
+          </el-table-column>
+          <el-pagination
+            v-show="Total !== 0"
+            style="float: right; margin: 20px 0"
+            :total="Total"
+            :current-page="currentPage"
+            :page-size="pageSize"
+            :page-sizes="[pageSize, 20, 35, 40, 50, 80, 100]"
+            layout="total, prev, pager, next, sizes"
+            @size-change="handleSizeChange"
+            @current-change="handleCurrentChange"
+          />
+        </el-table>
+      </el-row>
+    </el-card>
+  </div>
+</template>
+<script>
+export default {
+  components: {},
+  props: [],
+  data() {
+    return {
+      formData: {
+        field103: undefined,
+        field102: undefined,
+        field110: undefined,
+        field114: undefined,
+        field109: undefined,
+        field115: null,
+        field113: undefined,
+        field112: undefined,
+      },
+      tableData: [],
+      field114Options: [{
+        "label": "选项一",
+        "value": 1
+      }, {
+        "label": "选项二",
+        "value": 2
+      }],
+      field109Options: [{
+        "label": "选项一",
+        "value": 1
+      }, {
+        "label": "选项二",
+        "value": 2
+      }],
+      pageSize: 10,
+      currentPage: 1,
+      Total: 1 // 条目总数
+    }
+  },
+  computed: {},
+  watch: {},
+  created() { },
+  mounted() {
+    this.tableData = [
+      {
+        title: '北方管道有限责任公司',
+        subTitle: '石家庄储备库1#汽油罐区',
+        status: '储罐',
+        org: '储存单元',
+        startDate: '2022/12/15',
+        lv: '一级',
+        state: '1',
+      },
+      {
+        title: '北方管道有限责任公司',
+        subTitle: '石家庄储备库1#汽油罐区',
+        status: '储罐',
+        org: '储存单元',
+        startDate: '2022/12/15',
+        lv: '一级',
+        state: '1',
+      },
+      {
+        title: '北方管道有限责任公司',
+        subTitle: '石家庄储备库1#汽油罐区',
+        status: '储罐',
+        org: '储存单元',
+        startDate: '2022/12/15',
+        lv: '一级',
+        state: '1',
+      },
+      {
+        title: '北方管道有限责任公司',
+        subTitle: '石家庄储备库1#汽油罐区',
+        status: '储罐',
+        org: '储存单元',
+        startDate: '2022/12/15',
+        lv: '一级',
+        state: '1',
+      },
+      {
+        title: '北方管道有限责任公司',
+        subTitle: '石家庄储备库1#汽油罐区',
+        status: '储罐',
+        org: '储存单元',
+        startDate: '2022/12/15',
+        lv: '一级',
+        state: '1',
+      },
+      {
+        title: '北方管道有限责任公司',
+        subTitle: '石家庄储备库1#汽油罐区',
+        status: '储罐',
+        org: '储存单元',
+        startDate: '2022/12/15',
+        lv: '一级',
+        state: '1',
+      },
+    ]
+    this.pageSize = this.tableData.length
+    this.Total = this.tableData.length
+  },
+  methods: {
+    handleSizeChange() { },
+    handleCurrentChange() { },
+    toggleState() { }
+  }
+}
+
+</script>
+<style>
+</style>