|
@@ -1,260 +1,324 @@
|
|
|
<template>
|
|
|
- <div class="global-variable">
|
|
|
- <div class="condition">
|
|
|
- <el-form :inline="true" :model="formInline" class="demo-form-inline">
|
|
|
- <el-form-item label="单位名称:">
|
|
|
- <el-input v-model="formInline.user" placeholder="请输入单位名称" size="small"></el-input>
|
|
|
- </el-form-item>
|
|
|
- <el-form-item label="状态:">
|
|
|
- <el-select v-model="formInline.region" placeholder="选择状态" size="small ">
|
|
|
- <el-option label="启用" value="1"></el-option>
|
|
|
- <el-option label="停用" value="2"></el-option>
|
|
|
- </el-select>
|
|
|
- </el-form-item>
|
|
|
- <el-form-item>
|
|
|
- <el-button type="primary" @click="onSubmit" size="small">查询</el-button>
|
|
|
- <el-button @click="reset" size="small">重置</el-button>
|
|
|
- </el-form-item>
|
|
|
- </el-form>
|
|
|
- </div>
|
|
|
- <div class="list-page">
|
|
|
- <div class="newly">
|
|
|
- <el-button type="primary" @click="newnuedialog" size="small">新增</el-button>
|
|
|
- </div>
|
|
|
-
|
|
|
- <el-table class="center-align-table" :data="tableData" border :cell-style="rowStyle" stripe row-key="id"
|
|
|
- default-expand-all :tree-props="{ children: 'children', hasChildren: 'hasChildren' }">
|
|
|
- <!-- Table Columns -->
|
|
|
- <el-table-column fixed prop="name" align="center" label="单位名称">
|
|
|
- </el-table-column>
|
|
|
- <el-table-column prop="" align="center" label="单位ID">
|
|
|
- </el-table-column>
|
|
|
-
|
|
|
- <el-table-column prop="abnormal" label="风场数量" width="80">
|
|
|
- <template slot-scope="scope">
|
|
|
- <el-button v-if="scope.row.abnormal == 1" @click="particulars(scope.row)" type="text"
|
|
|
- size="small">10</el-button>
|
|
|
- <span v-else>/</span>
|
|
|
- </template>
|
|
|
- </el-table-column>
|
|
|
-
|
|
|
- <el-table-column prop="" align="center" label="状态" width="100">
|
|
|
- </el-table-column>
|
|
|
- <el-table-column prop="" align="center" label="转换时间">
|
|
|
- </el-table-column>
|
|
|
- <el-table-column prop="transition" align="center" fixed="right" label="操作" width="200">
|
|
|
- <template slot-scope="scope">
|
|
|
- <el-button @click="compile(scope.row)" type="text" size="small">编辑</el-button>
|
|
|
- <el-button @click="newcomer(scope.row)" type="text" size="small">新增</el-button>
|
|
|
- <el-button v-if="scope.row.transition == 1" @click="start(scope.row)" type="text"
|
|
|
- size="small">启用</el-button>
|
|
|
- <el-button v-else style="color: #666;" @click="stop(scope.row)" type="text"
|
|
|
- size="small">停用</el-button>
|
|
|
- <el-button style="color: #f00;" @click="deleted(scope.row)" type="text"
|
|
|
- size="small">删除</el-button>
|
|
|
- </template>
|
|
|
- </el-table-column>
|
|
|
- </el-table>
|
|
|
- <div class="pagination-container">
|
|
|
- <el-pagination :page-size="10" :pager-count="11" layout="total, prev, pager, next" :total="35">
|
|
|
- </el-pagination>
|
|
|
- </div>
|
|
|
- </div>
|
|
|
+ <div class="global-variable">
|
|
|
+ <div class="condition">
|
|
|
+ <el-form :inline="true" :model="formInline" class="demo-form-inline">
|
|
|
+ <el-form-item label="单位名称:">
|
|
|
+ <el-input
|
|
|
+ v-model="formInline.user"
|
|
|
+ placeholder="请输入单位名称"
|
|
|
+ size="small"
|
|
|
+ ></el-input>
|
|
|
+ </el-form-item>
|
|
|
+ <el-form-item label="状态:">
|
|
|
+ <el-select
|
|
|
+ v-model="formInline.region"
|
|
|
+ placeholder="选择状态"
|
|
|
+ size="small "
|
|
|
+ >
|
|
|
+ <el-option label="启用" value="1"></el-option>
|
|
|
+ <el-option label="停用" value="2"></el-option>
|
|
|
+ </el-select>
|
|
|
+ </el-form-item>
|
|
|
+ <el-form-item>
|
|
|
+ <el-button type="primary" @click="onSubmit" size="small"
|
|
|
+ >查询</el-button
|
|
|
+ >
|
|
|
+ <el-button @click="reset" size="small">重置</el-button>
|
|
|
+ </el-form-item>
|
|
|
+ </el-form>
|
|
|
+ </div>
|
|
|
+ <div class="list-page">
|
|
|
+ <div class="newly">
|
|
|
+ <el-button type="primary" @click="newnuedialog" size="small"
|
|
|
+ >新增</el-button
|
|
|
+ >
|
|
|
+ </div>
|
|
|
|
|
|
+ <el-table
|
|
|
+ class="center-align-table"
|
|
|
+ :data="tableData"
|
|
|
+ border
|
|
|
+ :cell-style="rowStyle"
|
|
|
+ stripe
|
|
|
+ row-key="id"
|
|
|
+ default-expand-all
|
|
|
+ :tree-props="{ children: 'children', hasChildren: 'hasChildren' }"
|
|
|
+ >
|
|
|
+ <!-- Table Columns -->
|
|
|
+ <el-table-column fixed prop="name" align="center" label="单位名称">
|
|
|
+ </el-table-column>
|
|
|
+ <el-table-column prop="" align="center" label="单位ID">
|
|
|
+ </el-table-column>
|
|
|
|
|
|
- <!-- 弹出层 -->
|
|
|
- <!-- 新增 -->
|
|
|
- <el-dialog :title="title" :visible.sync="nuedialog" width="380px">
|
|
|
- <el-form ref="newform" :rules="rules" :model="newform" label-width="90px">
|
|
|
- <el-form-item label="单位名称:" prop="unit">
|
|
|
- <el-input v-model="newform.unit" size="small"></el-input>
|
|
|
- </el-form-item>
|
|
|
- <el-form-item label="所属省:" prop="province">
|
|
|
- <el-select v-model="newform.province" placeholder="请选择" size="small">
|
|
|
- <el-option label="区域一" value="shanghai"></el-option>
|
|
|
- </el-select>
|
|
|
- </el-form-item>
|
|
|
- <el-form-item label="所属市:" prop="city">
|
|
|
- <el-select v-model="newform.city" placeholder="请选择" size="small">
|
|
|
- <el-option label="区域一" value="shanghai"></el-option>
|
|
|
- </el-select>
|
|
|
- </el-form-item>
|
|
|
- <el-form-item label="备注:">
|
|
|
- <el-input v-model="newform.name" size="small" type="textarea"></el-input>
|
|
|
- </el-form-item>
|
|
|
- </el-form>
|
|
|
- <span slot="footer" class="dialog-footer">
|
|
|
- <el-button @click="nuedialog = false" size="small">取 消</el-button>
|
|
|
- <el-button type="primary" @click="newly" size="small">确 定</el-button>
|
|
|
- </span>
|
|
|
- </el-dialog>
|
|
|
+ <el-table-column prop="abnormal" label="风场数量" width="80">
|
|
|
+ <template slot-scope="scope">
|
|
|
+ <el-button
|
|
|
+ v-if="scope.row.abnormal == 1"
|
|
|
+ @click="particulars(scope.row)"
|
|
|
+ type="text"
|
|
|
+ size="small"
|
|
|
+ >10</el-button
|
|
|
+ >
|
|
|
+ <span v-else>/</span>
|
|
|
+ </template>
|
|
|
+ </el-table-column>
|
|
|
|
|
|
- <!-- 风场数量 -->
|
|
|
- <el-dialog title="风场数量" :visible.sync="unusualdialog" width="1000px">
|
|
|
- <el-table class="center-align-table" :data="tableData" border :cell-style="rowStyle" stripe>
|
|
|
- <!-- Table Columns -->
|
|
|
- <el-table-column fixed prop="name" align="center" label="风场名称">
|
|
|
- </el-table-column>
|
|
|
- <el-table-column prop="" align="center" label="所在省">
|
|
|
- </el-table-column>
|
|
|
- <el-table-column prop="" align="center" label="所在市">
|
|
|
- </el-table-column>
|
|
|
- <el-table-column prop="" align="center" label="海拔高度" width="80">
|
|
|
- </el-table-column>
|
|
|
- <el-table-column prop="" align="center" label="经度" width="80">
|
|
|
- </el-table-column>
|
|
|
- <el-table-column prop="" align="center" label="纬度" width="80">
|
|
|
- </el-table-column>
|
|
|
- <el-table-column prop="" align="center" label="额定容量">
|
|
|
- </el-table-column>
|
|
|
+ <el-table-column prop="" align="center" label="状态" width="100">
|
|
|
+ </el-table-column>
|
|
|
+ <el-table-column prop="" align="center" label="转换时间">
|
|
|
+ </el-table-column>
|
|
|
+ <el-table-column
|
|
|
+ prop="transition"
|
|
|
+ align="center"
|
|
|
+ fixed="right"
|
|
|
+ label="操作"
|
|
|
+ width="200"
|
|
|
+ >
|
|
|
+ <template slot-scope="scope">
|
|
|
+ <el-button @click="compile(scope.row)" type="text" size="small"
|
|
|
+ >编辑</el-button
|
|
|
+ >
|
|
|
+ <el-button @click="newcomer(scope.row)" type="text" size="small"
|
|
|
+ >新增</el-button
|
|
|
+ >
|
|
|
+ <el-button
|
|
|
+ v-if="scope.row.transition == 1"
|
|
|
+ @click="start(scope.row)"
|
|
|
+ type="text"
|
|
|
+ size="small"
|
|
|
+ >启用</el-button
|
|
|
+ >
|
|
|
+ <el-button
|
|
|
+ v-else
|
|
|
+ style="color: #666"
|
|
|
+ @click="stop(scope.row)"
|
|
|
+ type="text"
|
|
|
+ size="small"
|
|
|
+ >停用</el-button
|
|
|
+ >
|
|
|
+ <el-button
|
|
|
+ style="color: #f00"
|
|
|
+ @click="deleted(scope.row)"
|
|
|
+ type="text"
|
|
|
+ size="small"
|
|
|
+ >删除</el-button
|
|
|
+ >
|
|
|
+ </template>
|
|
|
+ </el-table-column>
|
|
|
+ </el-table>
|
|
|
+ <div class="pagination-container">
|
|
|
+ <el-pagination
|
|
|
+ :page-size="10"
|
|
|
+ :pager-count="11"
|
|
|
+ layout="total, prev, pager, next"
|
|
|
+ :total="35"
|
|
|
+ >
|
|
|
+ </el-pagination>
|
|
|
+ </div>
|
|
|
+ </div>
|
|
|
|
|
|
- </el-table>
|
|
|
+ <!-- 弹出层 -->
|
|
|
+ <!-- 新增 -->
|
|
|
+ <el-dialog :title="title" :visible.sync="nuedialog" width="380px">
|
|
|
+ <el-form ref="newform" :rules="rules" :model="newform" label-width="90px">
|
|
|
+ <el-form-item label="单位名称:" prop="unit">
|
|
|
+ <el-input v-model="newform.unit" size="small"></el-input>
|
|
|
+ </el-form-item>
|
|
|
+ <el-form-item label="所属省:" prop="province">
|
|
|
+ <el-select
|
|
|
+ v-model="newform.province"
|
|
|
+ placeholder="请选择"
|
|
|
+ size="small"
|
|
|
+ >
|
|
|
+ <el-option label="区域一" value="shanghai"></el-option>
|
|
|
+ </el-select>
|
|
|
+ </el-form-item>
|
|
|
+ <el-form-item label="所属市:" prop="city">
|
|
|
+ <el-select v-model="newform.city" placeholder="请选择" size="small">
|
|
|
+ <el-option label="区域一" value="shanghai"></el-option>
|
|
|
+ </el-select>
|
|
|
+ </el-form-item>
|
|
|
+ <el-form-item label="备注:">
|
|
|
+ <el-input
|
|
|
+ v-model="newform.name"
|
|
|
+ size="small"
|
|
|
+ type="textarea"
|
|
|
+ ></el-input>
|
|
|
+ </el-form-item>
|
|
|
+ </el-form>
|
|
|
+ <span slot="footer" class="dialog-footer">
|
|
|
+ <el-button @click="nuedialog = false" size="small">取 消</el-button>
|
|
|
+ <el-button type="primary" @click="newly" size="small">确 定</el-button>
|
|
|
+ </span>
|
|
|
+ </el-dialog>
|
|
|
|
|
|
- <div class="pagination-container">
|
|
|
- <el-pagination :page-size="10" :pager-count="11" layout="total, prev, pager, next" :total="35">
|
|
|
- </el-pagination>
|
|
|
- </div>
|
|
|
- </el-dialog>
|
|
|
+ <!-- 风场数量 -->
|
|
|
+ <el-dialog title="风场数量" :visible.sync="unusualdialog" width="1000px">
|
|
|
+ <el-table
|
|
|
+ class="center-align-table"
|
|
|
+ :data="tableData"
|
|
|
+ border
|
|
|
+ :cell-style="rowStyle"
|
|
|
+ stripe
|
|
|
+ >
|
|
|
+ <!-- Table Columns -->
|
|
|
+ <el-table-column fixed prop="name" align="center" label="风场名称">
|
|
|
+ </el-table-column>
|
|
|
+ <el-table-column prop="" align="center" label="所在省">
|
|
|
+ </el-table-column>
|
|
|
+ <el-table-column prop="" align="center" label="所在市">
|
|
|
+ </el-table-column>
|
|
|
+ <el-table-column prop="" align="center" label="海拔高度" width="80">
|
|
|
+ </el-table-column>
|
|
|
+ <el-table-column prop="" align="center" label="经度" width="80">
|
|
|
+ </el-table-column>
|
|
|
+ <el-table-column prop="" align="center" label="纬度" width="80">
|
|
|
+ </el-table-column>
|
|
|
+ <el-table-column prop="" align="center" label="额定容量">
|
|
|
+ </el-table-column>
|
|
|
+ </el-table>
|
|
|
|
|
|
- </div>
|
|
|
+ <div class="pagination-container">
|
|
|
+ <el-pagination
|
|
|
+ :page-size="10"
|
|
|
+ :pager-count="11"
|
|
|
+ layout="total, prev, pager, next"
|
|
|
+ :total="35"
|
|
|
+ >
|
|
|
+ </el-pagination>
|
|
|
+ </div>
|
|
|
+ </el-dialog>
|
|
|
+ </div>
|
|
|
</template>
|
|
|
|
|
|
<script>
|
|
|
export default {
|
|
|
- data() {
|
|
|
- return {
|
|
|
- rules: {
|
|
|
- unit: [
|
|
|
- { required: true, message: '请填写单位名称', trigger: 'blur' }
|
|
|
- ],
|
|
|
- province: [
|
|
|
- { required: true, message: '请选择省', trigger: 'change' }
|
|
|
- ],
|
|
|
- city: [
|
|
|
- { required: true, message: '请选择省', trigger: 'change' }
|
|
|
- ],
|
|
|
- },
|
|
|
- formInline: {
|
|
|
- user: '',
|
|
|
- region: ''
|
|
|
- },
|
|
|
- tableData: [{
|
|
|
- id: 1,
|
|
|
- name: '王小虎',
|
|
|
- transition: "1"
|
|
|
- }, {
|
|
|
- id: 3,
|
|
|
- name: '王小虎',
|
|
|
- abnormal: "1",
|
|
|
- transition: "0",
|
|
|
- children: [{
|
|
|
- id: 31,
|
|
|
-
|
|
|
- name: '王小虎',
|
|
|
-
|
|
|
- abnormal: "1",
|
|
|
- }]
|
|
|
- },],
|
|
|
- nuedialog: false,
|
|
|
- unusualdialog: false,
|
|
|
- newform: {
|
|
|
- unit: "",
|
|
|
- province: "",
|
|
|
- city: "",
|
|
|
- descr: "",
|
|
|
- },
|
|
|
- title: "新增",
|
|
|
- warningShown: false
|
|
|
-
|
|
|
- }
|
|
|
- },
|
|
|
- methods: {
|
|
|
- rowStyle() {
|
|
|
- return "text-align:center";
|
|
|
- },
|
|
|
-
|
|
|
- // 查询
|
|
|
- onSubmit() {
|
|
|
- console.log('submit!');
|
|
|
+ data() {
|
|
|
+ return {
|
|
|
+ rules: {
|
|
|
+ unit: [{ required: true, message: "请填写单位名称", trigger: "blur" }],
|
|
|
+ province: [{ required: true, message: "请选择省", trigger: "change" }],
|
|
|
+ city: [{ required: true, message: "请选择省", trigger: "change" }],
|
|
|
+ },
|
|
|
+ formInline: {
|
|
|
+ user: "",
|
|
|
+ region: "",
|
|
|
+ },
|
|
|
+ tableData: [
|
|
|
+ {
|
|
|
+ id: 1,
|
|
|
+ name: "王小虎",
|
|
|
+ transition: "1",
|
|
|
},
|
|
|
- // 重置
|
|
|
- reset() {
|
|
|
- this.formInline.user = ""
|
|
|
- this.formInline.region = ""
|
|
|
+ {
|
|
|
+ id: 3,
|
|
|
+ name: "王小虎",
|
|
|
+ abnormal: "1",
|
|
|
+ transition: "0",
|
|
|
+ children: [
|
|
|
+ {
|
|
|
+ id: 31,
|
|
|
|
|
|
- },
|
|
|
- // 新增
|
|
|
- newly() {
|
|
|
- this.nuedialog = false
|
|
|
+ name: "王小虎",
|
|
|
|
|
|
+ abnormal: "1",
|
|
|
+ },
|
|
|
+ ],
|
|
|
},
|
|
|
+ ],
|
|
|
+ nuedialog: false,
|
|
|
+ unusualdialog: false,
|
|
|
+ newform: {
|
|
|
+ unit: "",
|
|
|
+ province: "",
|
|
|
+ city: "",
|
|
|
+ descr: "",
|
|
|
+ },
|
|
|
+ title: "新增",
|
|
|
+ warningShown: false,
|
|
|
+ };
|
|
|
+ },
|
|
|
+ methods: {
|
|
|
+ rowStyle() {
|
|
|
+ return "text-align:center";
|
|
|
+ },
|
|
|
|
|
|
- //异常详情
|
|
|
- particulars(row) {
|
|
|
- this.unusualdialog = true;
|
|
|
- },
|
|
|
- // 编辑
|
|
|
- compile(row) {
|
|
|
- this.nuedialog = true
|
|
|
- this.title = "编辑"
|
|
|
- },
|
|
|
- // 新增子级
|
|
|
- newcomer(row) {
|
|
|
- this.nuedialog = true
|
|
|
- this.title = "新增"
|
|
|
- },
|
|
|
- // 启用
|
|
|
- start(row) {
|
|
|
-
|
|
|
- },
|
|
|
- // 停用
|
|
|
- stop(row) {
|
|
|
-
|
|
|
- },
|
|
|
- // 删除
|
|
|
- deleted(row) {
|
|
|
- if (row.transition === "0") {
|
|
|
- if (!this.warningShown) {
|
|
|
- this.$message({
|
|
|
- type: 'error',
|
|
|
- message: '该项处于停用状态,无法删除!'
|
|
|
- });
|
|
|
- this.warningShown = true; // 设置警告消息已经显示过了的标志位为true
|
|
|
- }
|
|
|
- return;
|
|
|
- }
|
|
|
-
|
|
|
- this.$confirm('此操作将永久删除该文件,是否继续?', '提示', {
|
|
|
- confirmButtonText: '确定',
|
|
|
- cancelButtonText: '取消',
|
|
|
- type: 'warning'
|
|
|
- }).then(() => {
|
|
|
- // 执行删除操作
|
|
|
- this.$message({
|
|
|
- type: 'success',
|
|
|
- message: '删除成功!'
|
|
|
- });
|
|
|
- }).catch(() => {
|
|
|
- // 取消删除
|
|
|
- this.$message({
|
|
|
- type: 'info',
|
|
|
- message: '已取消删除'
|
|
|
- });
|
|
|
- });
|
|
|
- },
|
|
|
-
|
|
|
- newnuedialog() {
|
|
|
- this.nuedialog = true
|
|
|
- this.title = "新增"
|
|
|
+ // 查询
|
|
|
+ onSubmit() {
|
|
|
+ console.log("submit!");
|
|
|
+ },
|
|
|
+ // 重置
|
|
|
+ reset() {
|
|
|
+ this.formInline.user = "";
|
|
|
+ this.formInline.region = "";
|
|
|
+ },
|
|
|
+ // 新增
|
|
|
+ newly() {
|
|
|
+ this.nuedialog = false;
|
|
|
+ },
|
|
|
|
|
|
+ //异常详情
|
|
|
+ particulars(row) {
|
|
|
+ this.unusualdialog = true;
|
|
|
+ },
|
|
|
+ // 编辑
|
|
|
+ compile(row) {
|
|
|
+ this.nuedialog = true;
|
|
|
+ this.title = "编辑";
|
|
|
+ },
|
|
|
+ // 新增子级
|
|
|
+ newcomer(row) {
|
|
|
+ this.nuedialog = true;
|
|
|
+ this.title = "新增";
|
|
|
+ },
|
|
|
+ // 启用
|
|
|
+ start(row) {},
|
|
|
+ // 停用
|
|
|
+ stop(row) {},
|
|
|
+ // 删除
|
|
|
+ deleted(row) {
|
|
|
+ if (row.transition === "0") {
|
|
|
+ if (!this.warningShown) {
|
|
|
+ this.$message({
|
|
|
+ type: "error",
|
|
|
+ message: "该项处于停用状态,无法删除!",
|
|
|
+ });
|
|
|
+ this.warningShown = true; // 设置警告消息已经显示过了的标志位为true
|
|
|
}
|
|
|
- }
|
|
|
+ return;
|
|
|
+ }
|
|
|
|
|
|
-}
|
|
|
+ this.$confirm("此操作将永久删除该文件,是否继续?", "提示", {
|
|
|
+ confirmButtonText: "确定",
|
|
|
+ cancelButtonText: "取消",
|
|
|
+ type: "warning",
|
|
|
+ })
|
|
|
+ .then(() => {
|
|
|
+ // 执行删除操作
|
|
|
+ this.$message({
|
|
|
+ type: "success",
|
|
|
+ message: "删除成功!",
|
|
|
+ });
|
|
|
+ })
|
|
|
+ .catch(() => {
|
|
|
+ // 取消删除
|
|
|
+ this.$message({
|
|
|
+ type: "info",
|
|
|
+ message: "已取消删除",
|
|
|
+ });
|
|
|
+ });
|
|
|
+ },
|
|
|
+
|
|
|
+ newnuedialog() {
|
|
|
+ this.nuedialog = true;
|
|
|
+ this.title = "新增";
|
|
|
+ },
|
|
|
+ },
|
|
|
+};
|
|
|
</script>
|
|
|
|
|
|
<style lang="scss" scoped>
|
|
|
.el-select {
|
|
|
- width: 250px;
|
|
|
+ width: 250px;
|
|
|
}
|
|
|
-</style>
|
|
|
+</style>
|