外协人员就餐管理，人员就餐记录

src/views/base/canteenDiningRecord-list.vue

@@ -0,0 +1,280 @@
+<template>
+  <el-dialog
+    :visible.sync="showDialog"
+    title="就餐记录"
+    :modal-append-to-body="false"
+    append-to-body
+    :modal="true"
+    style="text-align:left;"
+    @close="closeDialog"
+    :close-on-click-modal="false"
+    width="60%"
+  >
+    <div>
+      <!--
+      要resetFields起作用，必须配置:model和prop
+      -->
+      <el-form
+        ref="queryForm"
+        :model="queryModel"
+        inline
+        class="demo-form-inline"
+        label-width="100px"
+      >
+        <el-form-item label="起止时间" prop="timeRanges">
+            <el-date-picker
+            size="mini"
+            v-model="queryModel.timeRanges"
+            type="datetimerange"
+            range-separator="至"
+            start-placeholder="开始日期"
+            end-placeholder="结束日期"
+            format="yyyy-MM-dd"
+            value-format="yyyy-MM-dd">
+            </el-date-picker>
+        </el-form-item>
+        <el-form-item>
+          <el-button
+            type="primary"
+            size="mini"
+            icon="ios-search"
+            @click="changePage(1)"
+            :loading="loading"
+          >查询</el-button>&nbsp;
+        <el-button
+          type="info"
+          size="mini"
+          style="margin-left: 8px"
+          @click="handleReset('queryForm')"
+        >重置</el-button>&nbsp;
+        </el-form-item>
+      </el-form>
+      <el-divider></el-divider>
+
+        <el-row class="button-group">
+        <el-button type="primary" size="small" plain icon="el-icon-circle-plus" @click="handleAdd">导出数据</el-button>
+        </el-row>
+      <el-table
+        :data="tableData"
+        style="min-height:400px;"
+        v-loading="loading"
+        stripe
+        @sort-change="sortChange"
+        @selection-change="handleSelectionChange"
+      >
+        <el-table-column prop="personName" label="姓名" width="100"></el-table-column>
+        <el-table-column prop="createTime" label="时间" width="180"></el-table-column>
+        <el-table-column prop="categoryName" label="餐别" width="100"></el-table-column>
+        <el-table-column prop="categoryAmount" label="就餐金额（元）" width="130"></el-table-column>
+        <el-table-column prop="address" label="地点" ></el-table-column>
+      </el-table>
+      <el-pagination
+        :current-page.sync="pageIndex"
+        :total="totalElements"
+        :page-sizes="pageSizeList"
+        @current-change="changePage"
+        @size-change="pageSizeChange"
+        layout="total, sizes, prev, pager, next, jumper"
+      ></el-pagination>
+    </div>
+  </el-dialog>
+</template>
+<script>
+import Constant from "@/constant";
+import canteenDiningRecordApi from "@/api/base/canteenDiningRecord";
+import NProgress from "nprogress"; // progress bar
+import "nprogress/nprogress.css"; // progress bar style
+
+export default {
+  props: ["personId"],
+  data() {
+    var self = this;
+
+    return {
+      formModel: {},
+      queryModel: {
+        timeRanges:"",
+        personId: ""
+      },
+      loading: false,
+      tableData: [],
+      pageIndex: 1,
+      pageSize: 10,
+      totalPages: 0,
+      totalElements: 0,
+      field: "",
+      direction: "",
+      pageSizeList: [10, 20, 30],
+      multipleSelection: [],
+      showModal: false,
+      modalTitle: "",
+      showDialog: true
+    };
+  },
+  methods: {
+    closeDialog() {
+      this.$emit("close", false);
+    },
+    disableSelect(row, rowIndex) {
+      //多选按钮是否禁用
+      if (row.isBindPerson) {
+        return false;
+      } else {
+        return true;
+      }
+    },
+    changePage(pageIndex) {
+      var self = this;
+
+      self.loading = true;
+
+      self.pageIndex = pageIndex;
+      var formData = new FormData();
+
+      formData.append("pageIndex", self.pageIndex);
+      formData.append("pageSize", self.pageSize);
+
+      formData.append("personId", self.personId);
+
+      if (self.queryModel.timeRanges == null) {
+        self.queryModel.timeRanges = "";
+      }
+      formData.append("timeRanges", self.queryModel.timeRanges);
+
+
+      canteenDiningRecordApi
+        .pageList(formData)
+        .then(function(response) {
+          self.loading = false;
+
+          var jsonData = response.data.data;
+
+          self.tableData = jsonData.data;
+          self.totalPages = jsonData.totalPages;
+          self.totalElements = jsonData.recordsTotal;
+        })
+        .catch(error => {
+          self.loading = false;
+          // self.$message.error(error + "");
+        });
+    },
+    pageSizeChange(pageSize) {
+      this.pageSize = pageSize;
+    },
+    sortChange(data) {
+      this.field = data.column.field;
+       this.direction = data.order == "ascending" ? "asc" : "desc";
+
+      this.changePage(this.pageIndex);
+    },
+    handleSelectionChange(val) {
+      this.multipleSelection = val;
+    },
+    handleReset(name) {
+      this.$refs[name].resetFields();
+      this.queryModel.timeRanges = "";
+    },
+    handleDelete(record) {
+      var self = this;
+      this.$confirm("是否解除关联？", "提示", {
+        confirmButtonText: "确定",
+        cancelButtonText: "取消",
+        type: "warning",
+        distinguishCancelAndClose: true
+      })
+        .then(() => {
+          self.loading = true;
+
+          canteenDiningRecordApi.remove(record.id).then(function(response) {
+            var jsonData = response.data;
+            self.loading = false;
+            if (jsonData.result) {
+              // var index = self.tableData.indexOf(record);
+              // self.tableData.splice(index, 1);
+              self.changePage(self.pageIndex);
+
+              self.$message({
+                type: "success",
+                message: "解绑成功!"
+              });
+            }
+          });
+        })
+        .catch(error => {
+          self.loading = false;
+          // self.$message.error(error + "");
+        });
+    },
+    handleRemoveAll() {
+      var self = this;
+
+      this.$confirm("是否解除关联？", "提示", {
+        confirmButtonText: "确定",
+        cancelButtonText: "取消",
+        type: "warning",
+        distinguishCancelAndClose: true
+      })
+        .then(() => {
+          self.loading = true;
+          var formData = new FormData();
+          formData.append("personId", self.personId);
+
+          canteenDiningRecordApi
+            .unbindDevice(formData)
+            .then(function(response) {
+              var jsonData = response.data;
+              self.loading = false;
+              if (jsonData.result) {
+                self.changePage(self.pageIndex);
+
+                self.$message({
+                  type: "success",
+                  message: "解绑成功!"
+                });
+              } else {
+                self.$message({
+                  type: "warning",
+                  message: jsonData.message
+                });
+              }
+            });
+        })
+        .catch(error => {
+          self.loading = false;
+          // self.$message.error(error + "");
+        });
+    },
+    onDetailModalClose(refreshed) {
+      //保存成功后回调
+      this.showModal = false;
+
+      if (refreshed) {
+        this.changePage(this.pageIndex);
+      }
+    }
+  },
+  mounted: function() {
+    this.changePage(1);
+  },
+};
+</script>
+<style lang="scss" scoped>
+.el-breadcrumb {
+  margin: 10px;
+  line-height: 20px;
+}
+
+.el-divider {
+  margin: 5px 0;
+}
+
+.demo-form-inline {
+  margin-left: 10px;
+  text-align: left;
+}
+
+.button-group {
+  margin-left: 10px;
+  text-align: left;
+}
+</style>