规则模块页面开发

src/api/canteen/canteenList.js

+import request from '@/utils/request'
+
+//get all canteen list
+export function getList(query) {
+  return request({
+    url: '/canteen/canteenList',
+    method: 'get',
+    params: query
+  })
+}
+
+//add
+export function addCanteen(data) {
+  return request({
+    url: '/canteen/addCanteen',
+    method: 'post',
+    data:data
+  })
+}
+
+//del
+export function delCanteen(id) {
+  return request({
+    url: '/canteen/delCanteen/'+id,
+    method: 'delete',
+  })
+}

src/views/announcement/announcementList/index.vue

@@ -169,7 +169,7 @@
         this.$refs["form"].validate(valid => {
           if (valid) {
 
-            if (this.form.id != undefined) {
+            if (this.form.id !== undefined) {
               updateAnnouncement(this.form).then(response => {
                 if (response.code === 200) {
                   this.msgSuccess("修改成功");

src/views/canteen/canteenList/index.vue

+<template>
+  <div class="app-container">
+    <!--操作按钮组-->
+    <el-row :gutter="10" class="mb8">
+      <el-col :span="1.5">
+        <el-button type="primary" icon="el-icon-plus" size="mini" @click="handleAdd" v-hasPermi="['system:user:add']">新增</el-button>
+      </el-col>
+      <el-col :span="1.5">
+        <el-button type="success" icon="el-icon-edit" size="mini" :disabled="single" @click="handleUpdate" v-hasPermi="['system:user:edit']" >修改</el-button>
+      </el-col>
+      <el-col :span="1.5">
+        <el-button type="danger" icon="el-icon-delete" size="mini" :disabled="multiple" @click="handleDelete" v-hasPermi="['system:user:remove']" >删除</el-button>
+      </el-col>
+    </el-row>
+    <!--列表-->
+    <el-table v-loading="loading" :data="canteenList" @selection-change="handleSelectionChange">
+      <el-table-column type="selection" width="40" align="center" :show-overflow-tooltip="true"/>
+      <el-table-column label="饭堂名" align="center" prop="canteenName" :show-overflow-tooltip="true" />
+      <el-table-column label="创建时间" align="left" prop="createTime" width="160">
+        <template slot-scope="scope">
+          <span>{{ parseTime(scope.row.createTime) }}</span>
+        </template>
+      </el-table-column>
+    </el-table>
+
+    <!--分页按钮组-->
+    <pagination v-show="total>0" :total="total" :page.sync="queryParams.pageNum" :limit.sync="queryParams.pageSize" @pagination="getList"/>
+
+    <!-- 添加或修改饭堂通知对话框 -->
+    <el-dialog :title="title" :visible.sync="open" width="600px" append-to-body>
+      <el-form ref="form" :model="form" :rules="rules" label-width="80px">
+        <el-row>
+          <el-col :span="16" >
+            <el-form-item label="饭堂名称" prop="canteenName">
+              <el-input v-model="form.canteenName" type="text" placeholder="请输入饭堂名称"  clearable rows="4"/>
+            </el-form-item>
+          </el-col>
+        </el-row>
+      </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>
+
+
+  </div>
+</template>
+<script>
+  import { getList,delCanteen,addCanteen,updateCanteen,getCanteen} from "@/api/canteen/canteenList";
+  export default {
+    //页签缓存页面的name要和路由中的那么要相同，才能缓存，
+    //如果是自定义菜单，则页面的name和菜单管理中路由地址要相同，才能页签缓存
+    name: "canteenList",
+    data() {
+      return {
+        // 遮罩层
+        loading: true,
+        ids: [],// 选中数组
+        single: true, // 非单个禁用
+        multiple: true, // 非多个禁用
+        total: 0, // 总条数
+        canteenList: [],// 所有饭堂列表
+        title: "", // 弹出层标题
+        open: false,// 是否显示弹出层
+        queryParams: {  // 查询参数
+          pageNum: 1,
+          pageSize: 10
+        },
+        form: {}, // 表单参数
+        rules: {// 表单校验
+          canteenName: [
+            { required: true, message: "饭堂名称不能不空", trigger: "blur" }
+          ]
+        }
+      };
+    },
+    created() {
+      this.getList();
+    },
+    methods: {
+      /** get all canteen list */
+      getList() {
+        this.loading = true;
+        getList(this.queryParams).then(response=>{
+          this.canteenList = response.rows
+          this.total=response.total
+          this.loading = false
+        })
+      },
+
+      // 取消按钮
+      cancel() {
+        this.open = false;
+        this.reset();
+      },
+      // 表单重置
+      reset() {
+        this.form = {
+          id: undefined
+        };
+        this.resetForm("form");
+      },
+      /** 新增按钮操作 */
+      handleAdd() {
+        this.reset();
+        this.open = true;
+        this.title = "添加饭堂";
+      },
+      //多选框选中数据
+      handleSelectionChange(selection) {
+        this.ids = selection.map(item => item.id)
+        this.single = selection.length!==1
+        this.multiple = !selection.length
+      },
+      /** 修改按钮操作 */
+      handleUpdate(row) {
+        //清空表单
+        this.reset();
+        const id = row.id || this.ids[0]
+        let data ={
+          id:id
+        }
+        getCanteen(data).then(response => {
+          this.form = response.data;
+          this.open = true;
+          this.title = "修改饭堂";
+        });
+      },
+      /** 提交按钮 */
+      submitForm: function() {
+        this.$refs["form"].validate(valid => {
+          if (valid) {
+            if (this.form.id !== undefined) {
+              this.open = true;
+              updateCanteen(this.form).then(response => {
+                if (response.code === 200) {
+                  this.msgSuccess("修改成功");
+                  this.open = false;
+                  this.getList();
+                } else {
+                  this.msgError("修改失败："+response.msg);
+                }
+              });
+            } else {
+              this.open = true;
+              addCanteen(this.form).then(response => {
+                if (response.code === 200) {
+                  this.msgSuccess("新增成功");
+                  this.open = false;
+                  this.getList();
+                } else {
+                  this.msgError("新增失败："+response.msg);
+                }
+              });
+            }
+          }
+        });
+      },
+      /** 删除按钮操作 */
+      handleDelete(row) {
+        const ids = row.dictId || this.ids;
+        this.$confirm('是否确认删除已选中的数据项?', "警告", {
+          confirmButtonText: "确定",
+          cancelButtonText: "取消",
+          type: "warning"
+        }).then(function() {
+          return delCanteen(ids);
+        }).then((res) => {
+          if (res.code === 200){
+            this.getList();
+            this.msgSuccess("删除成功");
+          }
+
+        }).catch(function() {});
+      }
+    }
+  };
+
+</script>
+<style scoped>
+
+</style>