first commit

src/views/system/point/index.vue

@@ -0,0 +1,451 @@
+<template>
+  <div class="app-container">
+    <el-row :gutter="20">
+      <!--部门数据-->
+      <el-col :span="4" :xs="24">
+        <div class="head-container">
+          <el-input
+            v-model="spaceName"
+            placeholder="请输入空间名称"
+            clearable
+            size="small"
+            prefix-icon="el-icon-search"
+            style="margin-bottom: 20px"
+          />
+        </div>
+        <div class="head-container">
+          <!-- <a @click="handleAdd1"><i class="el-icon-plus"></i>添加父级空间</a> -->
+          <el-tree
+            :data="spaceOptions"
+            :props="defaultProps"
+            node-key="id"
+            :expand-on-click-node="false"
+            :filter-node-method="filterNode"
+            ref="treeRef"
+            default-expand-all
+            highlight-current
+            @node-click="handleNodeClick"
+          />
+        </div>
+      </el-col>
+      <el-col :span="20" :xs="24">
+          <el-form :model="queryParams" ref="queryForm" size="small" :inline="true" v-show="showSearch" label-width="68px">
+            <el-form-item label="点位名称" prop="name">
+              <el-input
+                v-model="queryParams.name"
+                placeholder="请输入点位名称"
+                clearable
+                @keyup.enter.native="handleQuery"
+              />
+            </el-form-item>
+<!--            <el-form-item label="所属空间" prop="spaceId">
+              <el-input
+                v-model="queryParams.spaceId"
+                placeholder="请输入所属空间"
+                clearable
+                @keyup.enter.native="handleQuery"
+              />
+            </el-form-item>-->
+            <el-form-item>
+              <el-button type="primary" icon="el-icon-search" size="mini" @click="handleQuery">搜索</el-button>
+              <el-button icon="el-icon-refresh" size="mini" @click="resetQuery">重置</el-button>
+            </el-form-item>
+          </el-form>
+
+          <el-row :gutter="10" class="mb8">
+            <el-col :span="1.5">
+              <el-button
+                type="primary"
+                plain
+                icon="el-icon-plus"
+                size="mini"
+                @click="handleAdd"
+                v-hasPermi="['system:point:add']"
+              >新增</el-button>
+            </el-col>
+            <el-col :span="1.5">
+              <el-button
+                type="success"
+                plain
+                icon="el-icon-edit"
+                size="mini"
+                :disabled="single"
+                @click="handleUpdate"
+                v-hasPermi="['system:point:edit']"
+              >修改</el-button>
+            </el-col>
+            <el-col :span="1.5">
+              <el-button
+                type="danger"
+                plain
+                icon="el-icon-delete"
+                size="mini"
+                :disabled="multiple"
+                @click="handleDelete"
+                v-hasPermi="['system:point:remove']"
+              >删除</el-button>
+            </el-col>
+            <el-col :span="1.5">
+              <el-button
+                type="warning"
+                plain
+                icon="el-icon-download"
+                size="mini"
+                @click="handleExport"
+                v-hasPermi="['system:point:export']"
+              >导出</el-button>
+            </el-col>
+            <right-toolbar :showSearch.sync="showSearch" @queryTable="getList"></right-toolbar>
+          </el-row>
+
+          <el-table v-loading="loading" :data="pointList" @selection-change="handleSelectionChange">
+            <el-table-column type="selection" width="55" align="center" />
+            <el-table-column label="排序" align="center" width="80" prop="sort" />
+            <!-- <el-table-column label="序号" align="center" width="80">
+              <template v-slot="scope">
+                <span>{{ queryParams.pageSize * (queryParams.pageNum - 1) + scope.$index + 1 }}</span>
+              </template>
+            </el-table-column> -->
+            <el-table-column label="点位名称" align="center" prop="name" />
+            <el-table-column label="所属空间" align="center" prop="spaceId" >
+              <template v-slot="scope">
+                <span>{{ scope.row.space.name}}</span>
+              </template>
+            </el-table-column>
+            <el-table-column label="备注" align="center" prop="remark" />
+            <el-table-column label="操作" align="center" class-name="small-padding fixed-width">
+              <template slot-scope="scope">
+                <el-button
+                  size="mini"
+                  type="text"
+                  icon="el-icon-edit"
+                  @click="handleUpdate(scope.row)"
+                  v-hasPermi="['system:point:edit']"
+                >修改</el-button>
+                <el-button
+                  size="mini"
+                  type="text"
+                  icon="el-icon-delete"
+                  @click="handleDelete(scope.row)"
+                  v-hasPermi="['system:point:remove']"
+                >删除</el-button>
+              </template>
+            </el-table-column>
+          </el-table>
+
+          <pagination
+            v-show="total>0"
+            :total="total"
+            :page.sync="queryParams.pageNum"
+            :limit.sync="queryParams.pageSize"
+            @pagination="getList"
+          />
+      </el-col>
+    </el-row>
+
+    <!-- 添加或修改点位管理对话框 -->
+    <el-dialog :title="title" :visible.sync="open" width="500px" append-to-body>
+      <el-form ref="form" :model="form" :rules="rules" label-width="80px">
+        <el-form-item label="点位名称" prop="name">
+          <el-input v-model="form.name" placeholder="请输入点位名称" />
+        </el-form-item>
+        <el-form-item label="排序" prop="sort">
+            <el-input v-model="form.sort" placeholder="请输入排序数字"/>
+        </el-form-item>
+        <el-form-item label="所属空间" prop="spaceId">
+          <treeselect v-model="form.spaceId" :options="spaceOptions" :normalizer="normalizer" placeholder="请输入所属空间"/>
+        </el-form-item>
+        <el-form-item label="备注" prop="remark">
+          <el-input v-model="form.remark" placeholder="请输入备注" />
+        </el-form-item>
+      </el-form>
+      <div slot="footer" class="dialog-footer">
+        <el-button type="primary" @click="submitForm">确 定</el-button>
+        <el-button @click="cancel">取 消</el-button>
+      </div>
+    </el-dialog>
+
+    <!-- 添加或修改空间管理对话框 -->
+    <el-dialog :title="title" :visible.sync="open1" width="780px"  append-to-body>
+      <el-form ref="form1" :model="form1" :rules="rules1" label-width="80px">
+        <el-row>
+          <el-col :span="24" >
+            <el-form-item label="上级部门" prop="parentId" v-if="form1.parentId !== 0">
+              <treeselect v-model="form1.parentId" :options="spaceOptions" :normalizer="normalizer" placeholder="选择上级部门" />
+            </el-form-item>
+          </el-col>
+          <el-col :span="24" >
+            <el-form-item label="空间名称" prop="name">
+              <el-input v-model="form1.name" placeholder="请输入空间名称"/>
+            </el-form-item>
+          </el-col>
+          <el-col :span="24" >
+            <el-form-item label="备注" prop="remark">
+              <el-input v-model="form1.remark" placeholder="请输入备注" type="textarea"/>
+            </el-form-item>
+          </el-col>
+        </el-row>
+      </el-form>
+      <div slot="footer" class="dialog-footer">
+        <el-button type="primary"  @click="submitForm1">确 定</el-button>
+        <el-button @click="cancel">取 消</el-button>
+      </div>
+    </el-dialog>
+
+  </div>
+</template>
+
+<script>
+import { listPoint, getPoint, delPoint, addPoint, updatePoint } from "@/api/system/point";
+import {spaceTreeSelect} from "@/api/system/space";
+import Treeselect from "@riophae/vue-treeselect";
+import "@riophae/vue-treeselect/dist/vue-treeselect.css";
+
+export default {
+  name: "Point",
+  components: { Treeselect },
+  data() {
+    return {
+      // 遮罩层
+      loading: true,
+      // 选中数组
+      ids: [],
+      // 非单个禁用
+      single: true,
+      // 非多个禁用
+      multiple: true,
+      // 显示搜索条件
+      showSearch: true,
+      // 空间树选项
+      spaceOptions: [],
+      // 空间名称
+      spaceId: undefined,
+      spaceName: undefined,
+      // 总条数
+      total: 0,
+      // 点位管理表格数据
+      pointList: [],
+      // 弹出层标题
+      title: "",
+      // 是否显示弹出层
+      open: false,
+      open1: false,
+      defaultProps: {
+        children: 'children',
+        label: 'label'
+      },
+      // 查询参数
+      queryParams: {
+        pageNum: 1,
+        pageSize: 10,
+        name: null,
+        spaceId: null,
+      },
+      // 表单参数
+      form: {},
+      // 表单参数
+      form1: {},
+      // 表单校验
+      rules: {
+        name: [
+          { required: true, message: "点位名称不能为空", trigger: "blur" }
+        ],
+        sort: [
+          { required: true, message: "排序数字不能为空", trigger: "blur" },
+          { pattern:/^[1-9][0-9]*$/, message: "请输入正整数", trigger: "blur" }
+        ],
+      },
+      // 表单校验
+      rules1: {
+        name: [
+          { required: true, message: "空间名称不能为空", trigger: "blur" }
+        ]
+      }
+    };
+  },
+  watch: {
+    // 根据名称筛选部门树
+    spaceName(val) {
+      this.$refs.treeRef.filter(val)
+    }
+  },
+  created() {
+    this.getOptions()
+    this.getList();
+  },
+  methods: {
+    /** 查询点位管理列表 */
+    getList() {
+      this.loading = true;
+      listPoint(this.queryParams).then(response => {
+        this.pointList = response.rows;
+        this.total = response.total;
+        this.loading = false;
+      });
+    },
+    /** 查询选项列表 */
+    getOptions() {
+      this.spaceOptions = []
+      spaceTreeSelect().then(response => {
+        this.spaceOptions = response.data
+        //this.spaceId= response.data[0].id
+        //this.queryParams.spaceId= response.data[0].id
+      })
+    },
+    /** 转换树数据结构 */
+    normalizer(node) {
+      if (node.children && !node.children.length) {
+        delete node.children
+      }
+      return {
+        id: node.id,
+        label: node.label,
+        isDisabled: false,
+        children: node.children
+      }
+    },
+    // 取消按钮
+    cancel() {
+      this.open = false;
+      this.open1 = false;
+      this.reset();
+      this.reset1();
+    },
+    // 表单重置
+    reset() {
+      this.form = {
+        id: null,
+        name: null,
+        spaceId: null,
+        remark: null,
+        createBy: null,
+        createTime: null,
+        updateBy: null,
+        updateTime: null
+      };
+      this.resetForm("form");
+    },
+    reset1() {
+      this.form1 = {
+        id: undefined,
+        name: undefined,
+        type: undefined,
+        remark: undefined,
+      };
+      this.resetForm("form1");
+    },
+    /** 搜索按钮操作 */
+    handleQuery() {
+      this.queryParams.pageNum = 1;
+      this.getList();
+    },
+    /** 重置按钮操作 */
+    resetQuery() {
+      this.spaceName = undefined
+      this.queryParams.spaceId = undefined
+      this.resetForm("queryForm");
+      this.handleQuery();
+    },
+    // 多选框选中数据
+    handleSelectionChange(selection) {
+      this.ids = selection.map(item => item.id)
+      this.idNames = selection.map(item => item.name)
+      this.single = selection.length!==1
+      this.multiple = !selection.length
+    },
+    /** 筛选节点 */
+    filterNode(value, data) {
+      if (!value) return true
+      return data.label.indexOf(value) !== -1
+    },
+    /** 节点单击事件 */
+    handleNodeClick(data) {
+      this.queryParams.spaceId = data.id
+      this.spaceId = data.id
+      this.handleQuery()
+    },
+    /** 新增按钮操作 */
+    handleAdd() {
+      this.reset();
+      this.open = true;
+      this.form.spaceId = this.spaceId;
+      this.title = "添加点位管理";
+    },
+    /** 新增操作 */
+    handleAdd1() {
+      this.reset1();
+      this.open1 = true;
+      this.title = "添加空间管理";
+    },
+    /** 修改按钮操作 */
+    handleUpdate(row) {
+      this.reset();
+      const id = row.id || this.ids
+      getPoint(id).then(response => {
+        this.form = response.data;
+        this.open = true;
+        this.title = "修改点位管理";
+      });
+    },
+    /** 提交按钮 */
+    submitForm() {
+      this.$refs["form"].validate(valid => {
+        if (valid) {
+            this.form.sort = Number(this.form.sort);
+          if (this.form.id != null) {
+            updatePoint(this.form).then(response => {
+              this.$modal.msgSuccess("修改成功");
+              this.open = false;
+              this.getList();
+            });
+          } else {
+            addPoint(this.form).then(response => {
+              this.$modal.msgSuccess("新增成功");
+              this.open = false;
+              this.getList();
+            });
+          }
+        }
+      });
+    },
+    /** 提交操作 */
+    submitForm1: function() {
+      this.submitLoading = false
+      this.$refs["form1"].validate(valid => {
+        if (valid) {
+          if (this.form1.id !== undefined) {
+            editSpaceApi(this.form1).then(response => {
+              this.$modal.msgSuccess("修改成功");
+              this.open1 = false;
+              this.getOptions()
+            }).catch()
+          } else {
+            addSpaceApi(this.form1).then(response => {
+              this.$modal.msgSuccess("新增成功");
+              this.open1 = false;
+              this.getOptions()
+            }).catch()
+          }
+        }
+      });
+      this.submitLoading = false
+    },
+    /** 删除按钮操作 */
+    handleDelete(row) {
+      const ids = row.id || this.ids;
+      this.$modal.confirm('是否确认删除点位管理编号为"' + ids + '"的数据项？').then(function() {
+        return delPoint(ids);
+      }).then(() => {
+        this.getList();
+        this.$modal.msgSuccess("删除成功");
+      }).catch(() => {});
+    },
+    /** 导出按钮操作 */
+    handleExport() {
+      this.download('system/point/export', {
+        ...this.queryParams
+      }, `point_${new Date().getTime()}.xlsx`)
+    }
+  }
+};
+</script>