|
@@ -0,0 +1,287 @@
|
|
|
+<template>
|
|
|
+ <div class="zy-template">
|
|
|
+ <div class="zy-main-title">设备组管理</div>
|
|
|
+ <div class="zy-module">
|
|
|
+ <el-form :model="query" label-width="80px">
|
|
|
+ <el-form-item label="关键字" class="zy-search-form-item">
|
|
|
+ <el-input v-model="query.name" size="mini" placeholder="名称/编号" clearable></el-input>
|
|
|
+ </el-form-item>
|
|
|
+
|
|
|
+ <el-form-item label="项目" class="zy-search-form-item">
|
|
|
+ <el-select v-model="query.itemId" size="mini" clearable placeholder="不选默认全部">
|
|
|
+ <el-option :label="item.name" :value="item.id" v-for="item in itemList" />
|
|
|
+ </el-select>
|
|
|
+ </el-form-item>
|
|
|
+
|
|
|
+ <el-form-item label="状态" class="zy-search-form-item">
|
|
|
+ <el-select v-model="query.status" size="mini" clearable placeholder="不选默认全部">
|
|
|
+ <el-option label="禁用" value="0" />
|
|
|
+ <el-option label="启用" value="1" />
|
|
|
+ </el-select>
|
|
|
+ </el-form-item>
|
|
|
+ <el-button type="primary" size="mini" @click="submit">查询</el-button>
|
|
|
+ </el-form>
|
|
|
+ </div>
|
|
|
+
|
|
|
+ <div class="zy-module">
|
|
|
+ <el-button type="primary" size="small" style="margin-bottom: 20px;" @click="addDialog = true">增加</el-button>
|
|
|
+ <el-table :data="page.records" max-height="800" stripe size="small"
|
|
|
+ header-cell-class-name="zy-table-header-cell" cell-class-name='zy-table-cell'>
|
|
|
+ <el-table-column prop="code" label="设备组编号" width="100" />
|
|
|
+ <el-table-column prop="name" label="设备组名称" width="120" />
|
|
|
+ <el-table-column prop="item" label="所属项目" width="150" />
|
|
|
+ <el-table-column label="备注" min-width="30%">
|
|
|
+ <template #default="scope">
|
|
|
+ <div style="height: 24px; overflow: hidden;">
|
|
|
+ {{scope.row.remark}}
|
|
|
+ </div>
|
|
|
+ </template>
|
|
|
+ </el-table-column>
|
|
|
+ <el-table-column label="状态" width="60">
|
|
|
+ <template #default="scope">
|
|
|
+ <el-tag type="danger" size="mini" v-if="scope.row.status==0">禁用</el-tag>
|
|
|
+ <el-tag type="success" size="mini" v-if="scope.row.status==1">启用</el-tag>
|
|
|
+ </template>
|
|
|
+ </el-table-column>
|
|
|
+ <el-table-column prop="createTime" label="创建时间" width="180" />
|
|
|
+ <el-table-column label="操作" width="100" min-width="10%">
|
|
|
+ <template #default="scope">
|
|
|
+ <el-button @click="handleUpdate(scope.row)" type="text" size="small">修改</el-button>
|
|
|
+ <el-button @click="handlePass(scope.row.id)" type="text" size="small" style="color: #67c23a"
|
|
|
+ v-if="scope.row.status==0">启用</el-button>
|
|
|
+ <el-button @click="handleRefuse(scope.row.id)" type="text" size="small" style="color: #f56c6c;"
|
|
|
+ v-if="scope.row.status==1">禁用</el-button>
|
|
|
+ </template>
|
|
|
+ </el-table-column>
|
|
|
+ </el-table>
|
|
|
+ <el-pagination class="zy-table-pagination" background layout="prev, pager, next"
|
|
|
+ :current-page="page.current" :total="page.total" :page-size="page.size" @current-change="pagination" />
|
|
|
+ </div>
|
|
|
+
|
|
|
+ <el-dialog title="添加设备组" v-model="addDialog" width="500px">
|
|
|
+ <el-form ref="addForm" :model="addForm" label-width="100px" :rules="rules">
|
|
|
+ <el-form-item label="设备组编号:" prop="code">
|
|
|
+ <el-input v-model="addForm.code" maxlength="30" placeholder="不可重复"></el-input>
|
|
|
+ </el-form-item>
|
|
|
+
|
|
|
+ <el-form-item label="设备组名称:">
|
|
|
+ <el-input v-model="addForm.name" maxlength="30"></el-input>
|
|
|
+ </el-form-item>
|
|
|
+
|
|
|
+ <el-form-item label="所属项目:">
|
|
|
+ <el-select v-model="addForm.itemId" clearable placeholder="可以为空,但不建议">
|
|
|
+ <el-option :label="item.name" :value="item.id" v-for="item in itemList" />
|
|
|
+ </el-select>
|
|
|
+ </el-form-item>
|
|
|
+
|
|
|
+ <el-form-item label="备注:">
|
|
|
+ <el-input type="textarea" v-model="addForm.remark" maxlength="100"></el-input>
|
|
|
+ </el-form-item>
|
|
|
+ </el-form>
|
|
|
+ <template #footer>
|
|
|
+ <span class="dialog-footer">
|
|
|
+ <el-button @click="addDialog = false">取 消</el-button>
|
|
|
+ <el-button type="primary" @click="addSubmit('addForm')">提 交</el-button>
|
|
|
+ </span>
|
|
|
+ </template>
|
|
|
+ </el-dialog>
|
|
|
+
|
|
|
+ <el-dialog title="修改设备组" v-model="updateDialog" width="500px">
|
|
|
+ <el-form ref="updateForm" :model="updateForm" label-width="100px" :rules="rules">
|
|
|
+ <el-form-item label="设备组编号:" prop="code">
|
|
|
+ <el-input v-model="updateForm.code" maxlength="30" placeholder="不可重复"></el-input>
|
|
|
+ </el-form-item>
|
|
|
+
|
|
|
+ <el-form-item label="设备组名称:">
|
|
|
+ <el-input v-model="updateForm.name" maxlength="30"></el-input>
|
|
|
+ </el-form-item>
|
|
|
+
|
|
|
+ <el-form-item label="所属项目:">
|
|
|
+ <el-select v-model="updateForm.itemId" clearable placeholder="可以为空,但不建议">
|
|
|
+ <el-option :label="item.name" :value="item.id" :key="item.id" v-for="item in itemList" />
|
|
|
+ </el-select>
|
|
|
+ </el-form-item>
|
|
|
+
|
|
|
+ <el-form-item label="备注:">
|
|
|
+ <el-input type="textarea" v-model="updateForm.remark" maxlength="100"></el-input>
|
|
|
+ </el-form-item>
|
|
|
+ </el-form>
|
|
|
+ <template #footer>
|
|
|
+ <span class="dialog-footer">
|
|
|
+ <el-button @click="updateDialog = false">取 消</el-button>
|
|
|
+ <el-button type="primary" @click="updateSubmit('updateForm')">提 交</el-button>
|
|
|
+ </span>
|
|
|
+ </template>
|
|
|
+ </el-dialog>
|
|
|
+ </div>
|
|
|
+</template>
|
|
|
+
|
|
|
+<script>
|
|
|
+ export default {
|
|
|
+ data() {
|
|
|
+ return {
|
|
|
+ query: {
|
|
|
+ name: null,
|
|
|
+ itemId: null,
|
|
|
+ status: null,
|
|
|
+ },
|
|
|
+ page: {
|
|
|
+ current: 1,
|
|
|
+ size: 10,
|
|
|
+ },
|
|
|
+ itemList: null, //项目列表
|
|
|
+ addDialog: false, //增加表单
|
|
|
+ updateDialog: false, //更新表单
|
|
|
+ updateForm: { //更新表单
|
|
|
+ code: null,
|
|
|
+ name: null,
|
|
|
+ itemId: null,
|
|
|
+ remark: null
|
|
|
+ },
|
|
|
+ addForm: { //添加表单
|
|
|
+ code: null,
|
|
|
+ name: null,
|
|
|
+ itemId: null,
|
|
|
+ remark: null
|
|
|
+ },
|
|
|
+ rules: {
|
|
|
+ code: [{
|
|
|
+ required: true,
|
|
|
+ message: '项目编号必填',
|
|
|
+ trigger: 'blur'
|
|
|
+ }],
|
|
|
+
|
|
|
+ }
|
|
|
+ };
|
|
|
+ },
|
|
|
+ mounted: function() {
|
|
|
+ this.getListPage(this.page);
|
|
|
+ this.allItem();
|
|
|
+ },
|
|
|
+ methods: {
|
|
|
+ /**
|
|
|
+ * 提交查询条件
|
|
|
+ */
|
|
|
+ submit: function() {
|
|
|
+ const params = {
|
|
|
+ name: this.query.name,
|
|
|
+ itemId: this.query.itemId,
|
|
|
+ status: this.query.status
|
|
|
+ };
|
|
|
+ this.getListPage(params);
|
|
|
+ },
|
|
|
+
|
|
|
+ /**
|
|
|
+ * 分页点击事件
|
|
|
+ */
|
|
|
+ pagination: function(current) {
|
|
|
+ const params = {
|
|
|
+ name: this.query.name,
|
|
|
+ itemId: this.query.itemId,
|
|
|
+ status: this.query.status,
|
|
|
+ current: current,
|
|
|
+ size: this.page.size,
|
|
|
+ };
|
|
|
+ this.getListPage(params);
|
|
|
+ },
|
|
|
+
|
|
|
+ /**
|
|
|
+ * 获取设备列表
|
|
|
+ */
|
|
|
+ getListPage: function(params) {
|
|
|
+ this.$http.Get(this.$global.group.listPage, params).then(res => {
|
|
|
+ this.page = res.data;
|
|
|
+ })
|
|
|
+ },
|
|
|
+
|
|
|
+ /**
|
|
|
+ * 增加设备组
|
|
|
+ */
|
|
|
+ handleAdd: function(obj) {
|
|
|
+ this.addDialog = true;
|
|
|
+ },
|
|
|
+
|
|
|
+ /**
|
|
|
+ * 更新设备组
|
|
|
+ */
|
|
|
+ handleUpdate: function(obj) {
|
|
|
+ this.updateForm = {
|
|
|
+ id:obj.id,
|
|
|
+ code: obj.code,
|
|
|
+ name: obj.name,
|
|
|
+ itemId: parseInt(obj.itemId),
|
|
|
+ remark: obj.remark
|
|
|
+ }
|
|
|
+ console.log(obj);
|
|
|
+ this.updateDialog = true;
|
|
|
+ },
|
|
|
+
|
|
|
+ /**
|
|
|
+ * 提交增加表单
|
|
|
+ */
|
|
|
+ addSubmit: function(formName) {
|
|
|
+ this.$refs[formName].validate((valid) => {
|
|
|
+ if (!valid) return false;
|
|
|
+ //提交表单
|
|
|
+ this.$http.Post(this.$global.group.save, this.addForm).then(res => {
|
|
|
+ this.$message.success("添加成功!");
|
|
|
+ this.refresh();
|
|
|
+ })
|
|
|
+ });
|
|
|
+ },
|
|
|
+
|
|
|
+ /**
|
|
|
+ * 提交更新表单
|
|
|
+ */
|
|
|
+ updateSubmit: function(formName) {
|
|
|
+ this.$refs[formName].validate((valid) => {
|
|
|
+ if (!valid) return false;
|
|
|
+ //提交表单
|
|
|
+ this.$http.Post(this.$global.group.update, this.updateForm).then(res => {
|
|
|
+ console.log(res.data);
|
|
|
+ this.$message.success("修改成功!");
|
|
|
+ this.refresh();
|
|
|
+ })
|
|
|
+ });
|
|
|
+ },
|
|
|
+
|
|
|
+ /**
|
|
|
+ * 禁用
|
|
|
+ */
|
|
|
+ forbidden: function(id) {},
|
|
|
+
|
|
|
+ /**
|
|
|
+ * 启用
|
|
|
+ */
|
|
|
+ permit: function(id) {},
|
|
|
+
|
|
|
+ /**
|
|
|
+ * 全部的项目组
|
|
|
+ */
|
|
|
+ allItem: function() {
|
|
|
+ this.$http.Get(this.$global.item.allList, {}).then(res => {
|
|
|
+ this.itemList = res.data;
|
|
|
+ })
|
|
|
+ },
|
|
|
+ /**
|
|
|
+ * 刷新列表
|
|
|
+ */
|
|
|
+ refresh: function() {
|
|
|
+ this.addDialog = false;
|
|
|
+ this.updateDialog = false;
|
|
|
+ const params = {
|
|
|
+ key: this.query.key,
|
|
|
+ itemId: this.query.itemId,
|
|
|
+ status: this.query.status,
|
|
|
+ current: this.page.current,
|
|
|
+ size: this.page.size,
|
|
|
+ }
|
|
|
+ this.getListPage(params);
|
|
|
+ }
|
|
|
+ }
|
|
|
+ };
|
|
|
+</script>
|
|
|
+
|
|
|
+<style lang="scss" scoped>
|
|
|
+
|
|
|
+</style>
|