检修区域管理，生产区域管理

src/views/area/area.vue

@@ -0,0 +1,203 @@
+<template>
+  <div class="app-container">
+    <el-form :inline="true" :model="queryParams">
+      <el-form-item label="区域名称">
+        <el-input
+          v-model="queryParams.user"
+          placeholder="请输入区域名称"
+        ></el-input>
+      </el-form-item>
+      <el-form-item label="区域编码">
+        <el-input
+          v-model="queryParams.user"
+          placeholder="请输入区域编码"
+        ></el-input>
+      </el-form-item>
+      <el-form-item label="活动类型">
+        <el-select v-model="queryParams.region" placeholder="活动类型">
+          <el-option label="区域一" value="shanghai"></el-option>
+          <el-option label="区域二" value="beijing"></el-option>
+        </el-select>
+      </el-form-item>
+      <el-form-item>
+        <el-button type="primary" icon="el-icon-search" size="mini"
+          >搜索</el-button
+        >
+        <el-button icon="el-icon-refresh" size="mini">重置</el-button>
+      </el-form-item>
+    </el-form>
+    <el-row :gutter="10" class="mb8">
+      <el-col :span="1.5">
+        <el-button
+          type="primary"
+          icon="el-icon-plus"
+          plain
+          size="mini"
+          @click="add"
+          >新增</el-button
+        >
+      </el-col>
+      <el-col :span="1.5">
+        <el-button icon="el-icon-sort" plain size="mini">展开折叠</el-button>
+      </el-col>
+      <el-col :span="1.5">
+        <el-button type="primary" size="mini">导出</el-button>
+      </el-col>
+    </el-row>
+
+    <el-table
+      :data="tableData"
+      style="width: 100%; margin-bottom: 20px"
+      row-key="id"
+      default-expand-all
+      :tree-props="{ children: 'children', hasChildren: 'hasChildren' }"
+    >
+      <el-table-column prop="date" label="区域名称"> </el-table-column>
+      <el-table-column prop="name" label="编码" width="180" align="center">
+      </el-table-column>
+      <el-table-column prop="address" label="排序" align="center">
+      </el-table-column>
+      <el-table-column prop="address" label="区域类型" align="center">
+      </el-table-column>
+      <el-table-column prop="address" label="创建时间" align="center">
+      </el-table-column>
+      <el-table-column prop="address" label="操作" width="180" align="center">
+        <template slot-scope="scope">
+          <el-button
+            type="text"
+            size="small"
+            @click="handleEdit(scope.$index, scope.row)"
+            >修改</el-button
+          >
+          <el-button
+            type="text"
+            size="small"
+            @click="handleEdit(scope.$index, scope.row)"
+            >新增</el-button
+          >
+          <el-button
+            type="text"
+            size="small"
+            @click="handleDelete(scope.$index, scope.row)"
+            >删除</el-button
+          >
+        </template>
+      </el-table-column>
+    </el-table>
+
+    <el-dialog
+      :title="title"
+      :visible.sync="dialogVisible"
+      width="30%"
+      :before-close="handleClose"
+    >
+      <el-row :gutter="10">
+        <el-form :model="dialogForm">
+          <el-col :span="12">
+            <el-form-item label="上级区域" label-width="80px">
+              <el-select v-model="dialogForm.region" placeholder="上级区域">
+                <el-option label="区域一" value="shanghai"></el-option>
+                <el-option label="区域二" value="beijing"></el-option>
+              </el-select>
+            </el-form-item>
+          </el-col>
+          <el-col :span="12">
+            <el-form-item label="区域类型" label-width="80px">
+              <el-select v-model="dialogForm.region" placeholder="区域类型">
+                <el-option label="区域一" value="shanghai"></el-option>
+                <el-option label="区域二" value="beijing"></el-option>
+              </el-select>
+            </el-form-item>
+          </el-col>
+          <el-col :span="12">
+            <el-form-item label="区域名称" label-width="80px">
+              <el-input placeholder="请输入区域名称"></el-input>
+            </el-form-item>
+          </el-col>
+          <el-col :span="12">
+            <el-form-item label="区域编码" label-width="80px">
+              <el-input placeholder="请输入区域编码"></el-input>
+            </el-form-item>
+          </el-col>
+          <el-col :span="12">
+            <el-form-item label="显示排序" label-width="80px">
+                <el-input-number v-model="dialogForm.num" controls-position="right" :min="0"></el-input-number>
+            </el-form-item>
+          </el-col>
+        </el-form>
+      </el-row>
+      <span slot="footer" class="dialog-footer">
+        <el-button @click="dialogVisible = false">取 消</el-button>
+        <el-button type="primary" @click="dialogVisible = false"
+          >确 定</el-button
+        >
+      </span>
+    </el-dialog>
+  </div>
+</template>
+
+<script>
+export default {
+  data() {
+    return {
+      queryParams: {},
+      tableData: [
+        {
+          id: 1,
+          date: "2016-05-02",
+          name: "王小虎",
+          address: "上海市普陀区金沙江路 1518 弄",
+        },
+        {
+          id: 2,
+          date: "2016-05-04",
+          name: "王小虎",
+          address: "上海市普陀区金沙江路 1517 弄",
+        },
+        {
+          id: 3,
+          date: "2016-05-01",
+          name: "王小虎",
+          address: "上海市普陀区金沙江路 1519 弄",
+          children: [
+            {
+              id: 31,
+              date: "2016-05-01",
+              name: "王小虎",
+              address: "上海市普陀区金沙江路 1519 弄",
+            },
+            {
+              id: 32,
+              date: "2016-05-01",
+              name: "王小虎",
+              address: "上海市普陀区金沙江路 1519 弄",
+            },
+          ],
+        },
+        {
+          id: 4,
+          date: "2016-05-03",
+          name: "王小虎",
+          address: "上海市普陀区金沙江路 1516 弄",
+        },
+      ],
+      dialogVisible: false,
+      title: "添加区域",
+      dialogForm: {
+        num:0
+      },
+    };
+  },
+  methods: {
+    add() {
+      this.dialogVisible = true;
+    },
+  },
+};
+</script>
+
+<style lang="scss" scoped>
+::v-deep.el-input-number{
+    width: 100%;
+}
+</style>

src/views/area/area_management.vue

@@ -0,0 +1,153 @@
+<template>
+  <div class="app-container">
+    <el-form :inline="true" :model="queryParams" class="demo-form-inline">
+      <el-form-item label="开始日期">
+        <el-date-picker v-model="value1" type="date" placeholder="选择日期">
+        </el-date-picker>
+      </el-form-item>
+      <el-form-item label="结束日期">
+        <el-date-picker v-model="value1" type="date" placeholder="选择日期">
+        </el-date-picker>
+      </el-form-item>
+
+      <el-form-item>
+        <el-button type="primary" icon="el-icon-search">搜索</el-button>
+      </el-form-item>
+    </el-form>
+    <el-row :gutter="10">
+      <el-col :span="1.5">
+        <el-button type="primary" icon="el-icon-plus" @click="add">新增</el-button>
+      </el-col>
+      <el-col :span="1.5">
+        <el-button type="primary" plain>区域下发</el-button>
+      </el-col>
+    </el-row>
+    <el-table :data="tableData" border style="width: 100%; margin-top: 10px">
+      <el-table-column type="selection" width="55" align="center" />
+      <el-table-column label="序号" type="index" align="center" />
+      <el-table-column prop="date" label="检修区域配置编码" align="center" />
+      <el-table-column prop="date" label="检修时间节点开始" align="center" />
+      <el-table-column prop="date" label="检修时间节点结束" align="center" />
+      <el-table-column prop="date" label="是否有效" align="center" />
+      <el-table-column label="操作" align="center">
+        <template slot-scope="scope">
+          <el-button type="text" icon="el-icon-edit"> 失效 </el-button>
+          <el-button type="text" icon="el-icon-delete"> 删除</el-button>
+        </template>
+      </el-table-column>
+    </el-table>
+    <pagination
+      v-show="total > 0"
+      :total="total"
+      :page.sync="queryParams.pageNum"
+      :limit.sync="queryParams.pageSize"
+    />
+    <el-dialog
+      :title="title"
+      :visible.sync="dialogVisible"
+      width="42%"
+      :before-close="handleClose"
+    >
+      <el-row :gutter="10">
+        <el-col :span="9">
+          <el-input></el-input>
+          <el-tree
+            :data="treeData"
+            :props="defaultProps"
+            @node-click="handleNodeClick"
+          ></el-tree>
+        </el-col>
+        <el-col :span="15">
+          <el-form :model="dialogForm">
+            <el-form-item label="类型" label-width="150px">
+              <el-select>
+                <el-option label="item.label" value="item.value"> </el-option>
+              </el-select>
+            </el-form-item>
+            <el-form-item label="检修区域配置编码" label-width="150px">
+              <el-input placeholder="请输入检修区域配置编码"></el-input>
+            </el-form-item>
+            <el-form-item label="时间日期" label-width="150px">
+              <el-date-picker
+                v-model="value1"
+                type="daterange"
+                range-separator="至"
+                start-placeholder="开始日期"
+                end-placeholder="结束日期"
+              >
+              </el-date-picker>
+            </el-form-item>
+            <el-form-item >
+                <div style="text-align: center;">
+                    <el-button type="primary" >确定</el-button>
+                    <el-button>取消</el-button>
+                </div>
+               
+            </el-form-item>
+          </el-form>
+        </el-col>
+      </el-row>
+    </el-dialog>
+  </div>
+</template>
+
+<script>
+export default {
+  data() {
+    return {
+      queryParams: {
+        user: "",
+      },
+      total: 4,
+      tableData: [{}],
+      title: "新增检修计划",
+      dialogVisible: false,
+      treeData: [
+        {
+          label: "一级 1",
+          type: 1,
+          children: [
+            {
+              label: "二级 1-1",
+              children: [
+                {
+                  label: "三级 1-1-1",
+                  children: [
+                    {
+                      label: "四级 1-1-1-1",
+                      type: 4,
+                    },
+                    {
+                      label: "四级 1-1-1-2",
+                      type: 4,
+                    },
+                  ],
+                },
+              ],
+            },
+          ],
+        },
+      ],
+      defaultProps: {
+        children: "children",
+        label: "label",
+      },
+      dialogForm: {},
+    };
+  },
+  methods: {
+    add(){
+      this.dialogVisible = true;
+    }
+  },
+};
+</script>
+
+<style lang="scss" scoped>
+::v-deep .el-date-editor{
+    width: 100%;
+}
+::v-deep .el-select{
+    width: 100%;
+}
+</style>