维修工单

naqwzsjtj/naqwzsjtj/src/router/index.js

@@ -31,6 +31,8 @@ import Comments from "../views/comments/Comments"; // 评价管理
 import PolicyDelivery from '@/views/policyDelivery/PolicyDeliveryIndex' //政策兑现
 import Rectification from '@/views/rectification/RectificationIndex' //纠错管理
 import Statistics from '@/views/rectification/Statistics' //纠错管理
+import WorkOrder from '@/views/repair/WorkOrder'
+import RepairWorker from '@/views/repair/RepairWorker'
 
 export const constantRoutes = [{
     path: '/redirect',
@@ -217,6 +219,33 @@ export const constantRoutes = [{
     ]
   },
   {
+    path: '/repair',
+    component: Layout,
+    redirect: '/repair/manage',
+    name: 'Repair',
+    meta: {
+      title: '维修',
+      icon: 'el-icon-suitcase'
+    },
+    children: [
+      {
+        path: 'worker',
+        component: RepairWorker,
+        name: 'RepairWorker',
+        meta: {
+          title: '工人管理'
+        }
+      }, {
+        path: 'work',
+        component: WorkOrder,
+        name: 'WorkOrder',
+        meta: {
+          title: '工单管理'
+        }
+      }
+    ]
+  },
+  {
     path: '/mechanism',
     component: Layout,
     redirect: '/mechanism/department',

naqwzsjtj/naqwzsjtj/src/views/repair/RepairWorker.vue

@@ -0,0 +1,796 @@
+<template>
+  <div class="yxnaContent">
+    <!--操作栏-->
+    <div style="display: flex; justify-content: space-between; margin-bottom: 10px">
+      <div>
+        <el-button type="primary" class="add" @click="openAddWork">新增</el-button>
+      </div>
+      <div style="display: flex">
+        <el-input v-model.trim="query.canteenName" clearable placeholder="请输入食堂名称"
+          style="margin: 0 10px; width: 200px" />
+        <el-button type="primary" class="search" @click="searchData">搜索</el-button>
+        <el-button type="primary" class="search" @click="reset" style="margin-left: 5px">重置</el-button>
+      </div>
+    </div>
+    <!--表格-->
+    <el-table :data="tableData" border ref="multipleTable" :height="tableH" stripe :header-cell-style="{
+        background: '#e5e8ed',
+        color: '#666',
+        textAlign: 'center',
+      }" :cell-style="tableStyle" style="cursor: default">
+      <el-table-column width="50" label="序号">
+        <template slot-scope="scope">
+          {{ (sorts.page - 1) * sorts.limit + scope.$index + 1 }}
+        </template>
+      </el-table-column>
+      <el-table-column prop="canteenName" label="食堂名称" :show-overflow-tooltip="true" min-width="160" />
+      <el-table-column prop="founder" :show-overflow-tooltip="true" label="创建人" />
+      <el-table-column prop="principal" :show-overflow-tooltip="true" label="负责人" />
+      <el-table-column prop="complaintPhone" :show-overflow-tooltip="true" label="投诉电话" />
+      <el-table-column prop="takeoutPhone" :show-overflow-tooltip="true" label="外卖电话" />
+      <el-table-column prop="createTime" :show-overflow-tooltip="true" label="创建时间" width="160" />
+      <el-table-column prop="updateTime" :show-overflow-tooltip="true" label="更新时间" width="160" />
+      <el-table-column label="操作" width="140">
+        <template slot-scope="scope">
+          <el-button class="but" type="primary" @click="openModifyWorkDialog(scope.row)">
+            编辑</el-button>
+          <el-button class="but" type="danger" @click="handleDelete(scope.row.id, scope.$index)">删除
+          </el-button>
+        </template>
+      </el-table-column>
+    </el-table>
+    <div class="block">
+      <el-pagination @size-change="handleSizeChange" @current-change="handleCurrentChange" :current-page="sorts.page"
+        :page-sizes="[10, 20, 30, 40, 50]" :page-size="sorts.limit" layout="prev, pager,next,jumper,total,sizes"
+        :total="total">
+      </el-pagination>
+    </div>
+    <!-- 新增/编辑食堂 -->
+    <el-dialog :visible.sync="workDialog" width="40%" class="detailDialog" :close-on-click-modal="false" top="40px">
+      <div slot="title">
+        <div class="addTitle">{{ workTitle }}</div>
+      </div>
+      <div style="height: 65vh; overflow: auto; padding-right: 20px">
+        <el-form :model="postManagement" label-width="80px">
+          <el-row>
+            <el-col :span="22">
+              <el-form-item class="input-star" label="食堂名称" prop="canteenName">
+                <el-input v-model="postManagement.canteenName" placeholder="请输入食堂名称">
+                </el-input>
+              </el-form-item>
+            </el-col>
+          </el-row>
+          <el-row>
+            <el-col :span="22">
+              <el-form-item class="input-star" label="供应时间" prop="url">
+                <el-select v-model="postManagement.supplyTimeId" @change="timeNodeChange" @remove-tag="timeNodeChange"
+                  @visible-change="timeNodeChange" multiple placeholder="请选择" style="width: 100%">
+                  <el-option-group v-for="group in timeNodeOptions" :key="group.label" :label="group.label">
+                    <el-option v-for="item in group.options" :key="item.id" :label="
+                        item.supplyStartTime +
+                        ' —— ' +
+                        item.supplyEndTime +
+                        ' (' +
+                        group.label +
+                        ')'
+                      " :value="item.id" :disabled="item.disabled">
+                    </el-option>
+                  </el-option-group>
+                </el-select>
+              </el-form-item>
+            </el-col>
+          </el-row>
+          <el-row>
+            <el-col :span="22">
+              <el-form-item class="input-star" label="负责人" prop="principal">
+                <el-input v-model="postManagement.principal" maxlength="32" placeholder="请输入食堂负责人">
+                </el-input>
+              </el-form-item>
+            </el-col>
+          </el-row>
+          <el-row>
+            <el-col :span="22">
+              <el-form-item class="input-star" label="投诉电话" prop="complaintPhone">
+                <el-input v-model="postManagement.complaintPhone" placeholder="请输入食堂投诉电话" maxlength="12">
+                </el-input>
+              </el-form-item>
+            </el-col>
+          </el-row>
+          <el-row>
+            <el-col :span="22">
+              <el-form-item label="外卖电话" prop="takeoutPhone">
+                <el-input v-model="postManagement.takeoutPhone" placeholder="请输入外卖电话" maxlength="12">
+                </el-input>
+              </el-form-item>
+            </el-col>
+          </el-row>
+          <el-row>
+            <el-col :span="24">
+              <el-form-item label="食堂图片" prop="url"> </el-form-item>
+              <el-upload element-loading-text="数据上传中请等待..." action="" :on-change="handleChange" :multiple="false"
+                :auto-upload="false" :http-request="saveWork" list-type="picture-card"
+                accept="image/png,image/jpg,image/jpeg,image/bmp" :show-file-list="true" :file-list="fileList"
+                :on-remove="picRemove">
+                <i class="el-icon-plus"></i>
+              </el-upload>
+            </el-col>
+          </el-row>
+        </el-form>
+      </div>
+      <div slot="footer" class="dialog-footer">
+        <el-button type="primary" @click="saveWork">提交</el-button>
+        <el-button @click="workDialog = false">返回</el-button>
+      </div>
+    </el-dialog>
+  </div>
+</template>
+
+<script>
+  import api from "../../api";
+
+
+  import CONFIG from "../../../vue.config"
+
+  export default {
+    name: "CanteenManage",
+    created() {
+      this.getData();
+    },
+    data() {
+      return {
+        imgUrl: process.env.VUE_APP_IMG_URL,
+        tableStyle: {
+          textAlign: "center",
+        },
+        tableH: "calc(100vh - 230px)",
+        // 搜索参数
+        query: {
+          canteenName: "",
+        },
+        // 所有时间节点
+        timeNodeList: [],
+        // 整体分组
+        timeNodeOptions: [],
+        // 4个时间段分组
+        timeNodeOption1: {
+          label: "早餐",
+          options: [],
+        },
+        timeNodeOption2: {
+          label: "中餐",
+          options: [],
+        },
+        timeNodeOption3: {
+          label: "晚餐",
+          options: [],
+        },
+        timeNodeOption4: {
+          label: "外卖",
+          options: [],
+        },
+        // 早餐列表
+        timeNodeList1: [],
+        // 中餐列表
+        timeNodeList2: [],
+        timeNodeList3: [],
+        timeNodeList4: [],
+        // 列表数据
+        tableData: [],
+        // 总数
+        total: 0,
+        //新增/编辑食堂界面
+        workDialog: false,
+        //新增/编辑食堂标题
+        workTitle: "新增食堂",
+        // 新增/编辑表单
+        postManagement: {
+          canteenName: "",
+          canteenPhotoPath: "",
+          supplyTimeId: [],
+          principal: "",
+          complaint_phone: "",
+          takeout_phone: "",
+        },
+        // 分页
+        sorts: {
+          page: 1,
+          limit: 10,
+        },
+        // 实际保存的文件File,在文件上传change的时候改变
+        uploadFiles: [],
+        // 文件上传绑定的list
+        fileList: [],
+      };
+    },
+    methods: {
+      // 删除文件
+      picRemove(file, fileList) {
+        if (this.postManagement.canteenPhotoPath) {
+          let temp = this.postManagement.canteenPhotoPath.split(",");
+          for (let i = 0; i < temp.length; i++) {
+            if (temp[i] == file.name) {
+              temp[i] = temp[i] + "x";
+              break;
+            }
+          }
+          this.postManagement.canteenPhotoPath = temp.join(",");
+        }
+        this.uploadFiles = fileList;
+      },
+      // 列表排序
+      compare(property) {
+        return function (a, b) {
+          var value1 = a[property];
+          var value2 = b[property];
+          return value1 - value2;
+        };
+      },
+      // 供应时间按早中晚外卖排序
+      supplyTimeIdSort() {
+        // 存在供应时间才排序
+        if (
+          this.postManagement.supplyTimeId &&
+          this.postManagement.supplyTimeId.length > 0
+        ) {
+          let supplyList = this.postManagement.supplyTimeId;
+          let supplyData = [];
+          supplyList.forEach((id) => {
+            let node = this.timeNodeList.find((item) => item.id === id)
+            if (node) {
+              supplyData.push(node);
+            }
+
+          });
+          supplyData = supplyData.sort(this.compare("timeNode"));
+          this.postManagement.supplyTimeId = [];
+          supplyData.forEach((item) => {
+            this.postManagement.supplyTimeId.push(item.id);
+          });
+        }
+      },
+      // 根据选择的时间节点，保证同一组选项只能选择一个
+      timeNodeChange() {
+        // 排序
+        this.supplyTimeIdSort();
+        // 分别代表早中晚快递选择的数量
+        let timeNodeNum1 = 0;
+        let timeNodeNum2 = 0;
+        let timeNodeNum3 = 0;
+        let timeNodeNum4 = 0;
+        if (
+          this.postManagement.supplyTimeId &&
+          this.postManagement.supplyTimeId.length > 0
+        ) {
+          // 遍历已选择的选项
+          this.postManagement.supplyTimeId.forEach((item) => {
+            let index = this.timeNodeList.findIndex(function (node) {
+              return item === node.id;
+            });
+            // 找到时间节点类型
+            if (index !== -1) {
+              let nodeType = this.timeNodeList[index].timeNode;
+              switch (nodeType) {
+                case 1:
+                  timeNodeNum1++;
+                  break;
+                case 2:
+                  timeNodeNum2++;
+                  break;
+                case 3:
+                  timeNodeNum3++;
+                  break;
+                case 4:
+                  timeNodeNum4++;
+                  break;
+              }
+            }
+          });
+        }
+        if (timeNodeNum1 > 0) {
+          this.timeNodeList1.forEach((node1) => {
+            node1.disabled = true;
+          });
+        } else {
+          this.timeNodeList1.forEach((node1) => {
+            node1.disabled = false;
+          });
+        }
+        if (timeNodeNum2 > 0) {
+          this.timeNodeList2.forEach((node1) => {
+            node1.disabled = true;
+          });
+        } else {
+          this.timeNodeList2.forEach((node1) => {
+            node1.disabled = false;
+          });
+        }
+        if (timeNodeNum3 > 0) {
+          this.timeNodeList3.forEach((node1) => {
+            node1.disabled = true;
+          });
+        } else {
+          this.timeNodeList3.forEach((node1) => {
+            node1.disabled = false;
+          });
+        }
+        if (timeNodeNum4 > 0) {
+          this.timeNodeList4.forEach((node1) => {
+            node1.disabled = true;
+          });
+        } else {
+          this.timeNodeList4.forEach((node1) => {
+            node1.disabled = false;
+          });
+        }
+      },
+      // 监听文件上传改变
+      handleChange(file, fileList) {
+        if (file.raw.type === 'image/png' || file.raw.type === 'image/jpg' || file.raw.type ===
+          'image/jpeg' ||
+          file.raw.type === 'image/bmp') {
+          this.uploadFiles = fileList;
+        } else {
+          this.$message.error('只能上传jpg或png或bmp或jpeg格式!');
+          fileList.splice(-1);
+        }
+      },
+      //打开新增食堂界面
+      openAddWork() {
+        api
+          .supplyTimeList()
+          .then((r) => {
+            if (r.data.result) {
+              // 拿到时间节点，并分组
+              this.updateTimeNodeGroup(r.data.data);
+            } else {
+              this.$message.error("获取时间节点列表失败");
+            }
+          })
+          .catch(() => {
+            this.$message.error("获取时间节点列表失败");
+          });
+        this.postManagement = {
+          canteenName: "",
+          canteenPhotoPath: "",
+          supplyTimeId: [],
+          principal: "",
+          complaint_phone: "",
+          takeout_phone: "",
+        };
+        this.fileList = [];
+        this.workTitle = "新增食堂";
+        this.workDialog = true;
+      },
+      //打开修改食堂界面
+      openModifyWorkDialog(data) {
+        api
+          .supplyTimeList()
+          .then((r) => {
+            if (r.data.result) {
+              // 拿到时间节点列表，并分组
+              this.updateTimeNodeGroup(r.data.data);
+              this.postManagement = JSON.parse(JSON.stringify(data));
+              if (
+                this.postManagement.supplyTimeId &&
+                this.postManagement.supplyTimeId !== ""
+              ) {
+                this.postManagement.supplyTimeId =
+                  this.postManagement.supplyTimeId.split(",");
+              }
+              this.timeNodeChange();
+              this.fileList = [];
+              let params = {
+                picId: this.postManagement.canteenPhotoPath,
+              };
+              if (params.picId && params.picId !== "") {
+                api
+                  .getFoodPicByPicId({
+                    params,
+                  })
+                  .then((res) => {
+                    if (res.data.result) {
+                      this.fileList = res.data.data.map((item) => {
+                        return {
+                          url: this.imgUrl + item.path,
+                          name: item.id,
+                        };
+                      });
+                    }
+                  });
+              }
+
+            } else {
+              this.$message.error("获取时间节点列表失败2");
+            }
+          })
+          .catch(() => {
+            this.$message.error("获取时间节点列表失败1");
+          });
+        this.workTitle = "编辑食堂";
+        this.postManagement = JSON.parse(JSON.stringify(data));
+        this.workDialog = true;
+      },
+      // 更新时间节点的分组
+      updateTimeNodeGroup(data) {
+        this.timeNodeList = data;
+        this.timeNodeList1 = this.timeNodeList.filter((item) => {
+          return item.timeNode === 1;
+        });
+        this.timeNodeList2 = this.timeNodeList.filter((item) => {
+          return item.timeNode === 2;
+        });
+        this.timeNodeList3 = this.timeNodeList.filter((item) => {
+          return item.timeNode === 3;
+        });
+        this.timeNodeList4 = this.timeNodeList.filter((item) => {
+          return item.timeNode === 4;
+        });
+        this.timeNodeOption1.options = this.timeNodeList1;
+        this.timeNodeOption2.options = this.timeNodeList2;
+        this.timeNodeOption3.options = this.timeNodeList3;
+        this.timeNodeOption4.options = this.timeNodeList4;
+        this.timeNodeOptions = [];
+        this.timeNodeOptions.push(
+          this.timeNodeOption1,
+          this.timeNodeOption2,
+          this.timeNodeOption3,
+          this.timeNodeOption4
+        );
+      },
+      isMobile(value) {
+        if (!value || value === "") {
+          return false;
+        }
+        const mobileReg =
+          /^(([1][3,4,5,7,8]\d{9})|([0]\d{10,11})|(\d{7,8})|(\d{4}|\d{3})-(\d{7,8}))$/;
+        if (!mobileReg.test(value)) {
+          return false;
+        }
+        return true;
+      },
+      isTel(value) {
+        if (!value || value === "") {
+          return false;
+        }
+        const phoneReg = /^\d{3}-\d{8}|\d{4}-\d{7}$/;
+        if (!phoneReg.test(value)) {
+          return false;
+        }
+        return true;
+      },
+      // 保存
+      saveWork() {
+        if (
+          !this.postManagement.canteenName ||
+          this.postManagement.canteenName.length < 1
+        ) {
+          this.$message.error("请输入食堂名称！");
+          return;
+        }
+        if (
+          !this.postManagement.principal ||
+          this.postManagement.principal.length < 1
+        ) {
+          this.$message.error("请输入负责人名称！");
+          return;
+        }
+        if (
+          !this.postManagement.complaintPhone ||
+          this.postManagement.complaintPhone.length < 1
+        ) {
+          this.$message.error("投诉电话不能为空！");
+          return;
+        }
+        if (
+          !this.isMobile(this.postManagement.complaintPhone) &&
+          !this.isTel(this.postManagement.complaintPhone)
+        ) {
+          this.$message.error("投诉电话格式有误！");
+          return;
+        }
+        if (
+          this.postManagement.takeoutPhone &&
+          this.postManagement.takeoutPhone.length > 0
+        ) {
+          if (
+            !this.isMobile(this.postManagement.takeoutPhone) &&
+            !this.isTel(this.postManagement.takeoutPhone)
+          ) {
+            this.$message.error("外卖电话格式有误！");
+            return;
+          }
+        }
+        let params = new FormData();
+        this.uploadFiles.forEach((item) => {
+          params.append("files", item.raw);
+        });
+        params.append("canteenName", this.postManagement.canteenName);
+        if (this.postManagement.canteenPhotoPath) {
+          params.append("canteenPhotoPath", this.postManagement.canteenPhotoPath);
+        }
+        if (this.postManagement.supplyTimeId) {
+          params.append("supplyTimeId", this.postManagement.supplyTimeId);
+        }
+        params.append("principal", this.postManagement.principal);
+        params.append("complaintPhone", this.postManagement.complaintPhone);
+        if (this.postManagement.takeoutPhone) {
+          params.append("takeoutPhone", this.postManagement.takeoutPhone);
+        }
+        if (this.workTitle == "编辑食堂") {
+          params.append("id", this.postManagement.id);
+          api
+            .updateCanteen(params)
+            .then((r) => {
+              if (r.data.result) {
+                this.$message.success("编辑成功");
+                this.getData();
+                this.workDialog = false;
+              } else {
+                this.$message.error(r.data.msg);
+              }
+            })
+            .catch(() => {
+              this.$message.error(r.data.msg);
+            });
+        } else {
+          // 新增食堂
+          params.append("founder", sessionStorage.getItem("pid"));
+          api
+            .addCanteen(params)
+            .then((r) => {
+              if (r.data.result) {
+                this.$message.success("新增成功");
+                this.reset();
+                this.workDialog = false;
+              } else {
+                this.$message.error(r.data.msg);
+              }
+            })
+            .catch(() => {
+              this.$message.error(r.data.msg);
+            });
+        }
+      },
+      //切换列表条数
+      handleSizeChange(pageSize) {
+        this.sorts.limit = pageSize;
+        this.sorts.page = 1;
+        this.getData();
+      },
+      //切换页码
+      handleCurrentChange(currentPage) {
+        this.$refs.multipleTable.bodyWrapper.scrollTop = 0;
+        this.sorts.page = currentPage;
+        this.getData();
+      },
+      //删除
+      handleDelete(id, index) {
+        this.$confirm("您确定要删除该数据吗?", "提示", {
+            cancelButtonClass: "btn-custom-cancel",
+            confirmButtonText: "确定",
+            cancelButtonText: "取消",
+            type: "warning",
+          })
+          .then(() => {
+            let fd = new FormData();
+            fd.append("id", id);
+            api.deleteCanteenById(fd).then((res) => {
+              if (res.data.result) {
+                this.$message({
+                  type: "success",
+                  message: "删除成功!",
+                });
+                this.tableData.splice(index, 1);
+                this.getData();
+              } else {
+                this.$message({
+                  type: "info",
+                  message: res.data.msg,
+                });
+              }
+            });
+          })
+          .catch(() => {
+            this.$message({
+              type: "info",
+              message: "已取消删除",
+            });
+          });
+      },
+      // 获取列表数据
+      getData() {
+        let params = {
+          page: this.sorts.page,
+          limit: this.sorts.limit,
+          canteenName: this.query.canteenName,
+        };
+        api
+          .canteenPage({
+            params,
+          })
+          .then((r) => {
+            this.total = r.data.count;
+            this.tableData = r.data.data;
+          });
+      },
+      // 搜索
+      searchData() {
+        this.sorts.page = 1;
+        this.getData();
+      },
+      // 清空输入框
+      reset() {
+        this.query.canteenName = "";
+        this.sorts.page = 1;
+        this.getData();
+      },
+    },
+  };
+</script>
+
+<style>
+  /* 全局取消按钮 */
+  .btn-custom-cancel {
+    margin-left: 10px !important;
+    float: right;
+  }
+</style>
+
+<style scoped lang="less">
+  /* 禁用后的勾选*/
+  /deep/ .el-checkbox__input.is-disabled.is-checked .el-checkbox__inner::after {
+    border-color: #def5cb;
+  }
+
+  /deep/ .el-checkbox__input.is-disabled.is-checked .el-checkbox__inner {
+    background-color: #157de9;
+    border-color: #dcdfe6;
+  }
+
+  /deep/ .el-dialog__body {
+    padding: 0 0 30px 20px;
+    color: #606266;
+    font-size: 14px;
+    word-break: break-all;
+  }
+
+  /deep/ .el-dialog {
+    margin: 0 auto 0;
+  }
+
+  /deep/ .el-form-item__label {
+    padding: 0;
+  }
+
+  .yxnaContent {
+    padding: 10px;
+  }
+
+  .addTitle {
+    font-size: 18px;
+    font-weight: bold;
+    margin-bottom: 10px;
+  }
+
+  .add {
+    width: 66px;
+    height: 38px;
+    margin-left: 0;
+  }
+
+  /deep/ .el-col-12 {
+    width: 50%;
+    text-align: left;
+  }
+
+  .search {
+    width: 66px;
+    height: 38px;
+    margin-left: 0;
+  }
+
+  /deep/ .el-form-item__label {
+    // height: 40px;
+    // width: 110px;
+    // background-color: #fafafa;
+    text-align: center;
+    // border: 1px solid #dcdfe6;
+    // border-radius: 2px 0 0 2px;
+  }
+
+  /deep/ .el-button.is-disabled {
+    color: #c0c4cc !important;
+  }
+
+  /deep/.el-button--primary.is-disabled {
+    color: #fff !important;
+  }
+
+  /deep/ .el-input__inner {
+    border-radius: 2px 0 0 2px;
+  }
+
+  .el-select>.el-input {
+    width: 200px;
+  }
+
+  /deep/ .el-textarea__inner {
+    height: 100px;
+  }
+
+  /deep/ .el-dialog__title {
+    font-size: 14px;
+  }
+
+  /deep/ .el-pagination__total {
+    margin-left: 10px !important;
+  }
+
+  .el-pagination {
+    margin: 0;
+    margin-top: 10px;
+    /* position: fixed;
+        left: 13rem; */
+  }
+
+  /deep/ .el-table--scrollable-x .el-table__body-wrapper {
+    z-index: 2;
+  }
+
+  .imgBox {
+    width: 100%;
+    /*height: 55vh;*/
+    height: 100%;
+  }
+
+  .but {
+    width: 36px;
+    height: 22px;
+    padding: 0;
+    font-size: 12px;
+  }
+
+  .el-checkbox {
+    margin: 0;
+    margin-right: 10px;
+  }
+
+  /deep/ .bewrite>.el-form-item__label {
+    width: 100%;
+    text-align: left;
+    padding-left: 21px;
+  }
+
+  /deep/ .el-form--inline .el-form-item {
+    margin-right: 0px;
+  }
+
+  /deep/ [data-v-2cde7735] .el-form-item__label {
+    border: 1px solid #dcdfe6;
+    /*border-right: transparent;*/
+  }
+
+  /*    空白框*/
+  /deep/ .formTempBox {
+    height: 38px;
+    border: 1px solid #dcdfe6;
+    width: 100%;
+    border-left: transparent;
+    background-color: #fafafa;
+  }
+
+  /deep/ .el-select__tags .el-select__tags-text {
+    font-size: 14px;
+  }
+
+  /deep/ .input-star>.el-form-item__label:before {
+    content: "*";
+    color: #f56c6c;
+    margin-right: 4px;
+  }
+
+  // 去除上传组件动画过渡效果
+  /deep/ .el-upload-list__item {
+    transition: none !important;
+  }
+</style>

naqwzsjtj/naqwzsjtj/src/views/repair/WorkOrder.vue

@@ -0,0 +1,415 @@
+<template>
+  <div class="yxnaContent">
+    <!--操作栏-->
+    <div style="display: flex;justify-content: space-between;margin-bottom: 10px">
+      <div>
+      </div>
+      <div style="display: flex">
+        <el-input v-model.trim="query.dishesName" clearable placeholder="请输入菜品名称" style="margin: 0 10px;width: 200px" />
+        <el-button type="primary" class="search" @click="searchData">搜索</el-button>
+        <el-button type="primary" class="search" @click="reset" style="margin-left: 5px">重置</el-button>
+      </div>
+    </div>
+    <!--表格-->
+    <el-table :data="tableData" border ref='multipleTable' :height="tableH" stripe
+      :header-cell-style="{ background: '#e5e8ed', color: '#666', textAlign: 'center' }" :cell-style="tableStyle"
+      style="cursor: default">
+      <el-table-column width="50" label="序号">
+        <template slot-scope="scope">
+          {{ (sorts.page - 1) * sorts.limit + scope.$index + 1 }}
+        </template>
+      </el-table-column>
+      <el-table-column prop="canteenName" :show-overflow-tooltip="true" label="食堂名称" />
+      <el-table-column prop="dishesName" :show-overflow-tooltip="true" label="菜品名称" />
+      <el-table-column prop="score" label="评分" width="70" />
+      <el-table-column prop="evaluation" :show-overflow-tooltip="true" label="评论" />
+      <el-table-column prop="createTime" :show-overflow-tooltip="true" label="创建时间" width="160" />
+      <el-table-column prop="updateTime" :show-overflow-tooltip="true" label="更新时间" width="160" />
+      <el-table-column label="操作" width="230">
+        <template slot-scope="scope">
+          <el-button class="but" type="primary" @click="info(scope.row)">详情</el-button>
+          <el-button class="but" type="warning" @click="markEvaluation(scope.row.id)">
+            标记</el-button>
+          <el-button class="but" type="danger" @click="handleDelete(scope.row.id, scope.$index)">删除
+          </el-button>
+        </template>
+      </el-table-column>
+    </el-table>
+    <div class="block">
+      <el-pagination @size-change="handleSizeChange" @current-change="handleCurrentChange" :current-page="sorts.page"
+        :page-sizes="[10, 20, 30, 40, 50]" :page-size="sorts.limit" layout="prev, pager,next,jumper,total,sizes"
+        :total="total">
+      </el-pagination>
+    </div>
+    <!-- 详情页面 -->
+    <el-dialog :visible.sync="workDialog" width="50%" class="detailDialog" :close-on-click-modal="false" top="40px">
+      <div slot="title">
+        <div class="addTitle">{{ workTitle }}</div>
+      </div>
+      <div style="height: 65vh; overflow: auto; padding-right: 20px">
+        <el-form :model="postManagement" label-width="140px">
+          <el-row>
+            <el-col :span="12">
+              <el-form-item label="食堂名称">
+                <el-input v-model="postManagement.canteenName" :readonly="true"></el-input>
+              </el-form-item>
+            </el-col>
+            <el-col :span="12">
+              <el-form-item label="菜品名称">
+                <el-input v-model="postManagement.dishesName" :readonly="true"></el-input>
+              </el-form-item>
+            </el-col>
+          </el-row>
+          <el-row>
+            <el-col :span="12">
+              <el-form-item label="评分">
+                <el-input v-model="postManagement.score" :readonly="true"></el-input>
+              </el-form-item>
+            </el-col>
+            <el-col :span="12">
+              <el-form-item label="评论人">
+                <el-input v-model="postManagement.nickName" :readonly="true"></el-input>
+              </el-form-item>
+            </el-col>
+          </el-row>
+          <el-row>
+            <el-col :span="24">
+              <el-form-item label="评论">
+                <el-input type="textarea" v-model="postManagement.evaluation" :autosize="{ minRows: 4, maxRows: 6}"
+                  resize="none" :readonly="true"></el-input>
+              </el-form-item>
+            </el-col>
+          </el-row>
+          <el-row>
+            <el-col :span="24">
+              <el-form-item label="评论图">
+                <el-image style="width:100px; height:100px;margin:0 5px 0 10px;" v-for="(urls,index) in photoUrl"
+                  :key="index" :src="urls" :preview-src-list="photoUrl">
+                </el-image>
+              </el-form-item>
+            </el-col>
+          </el-row>
+
+        </el-form>
+      </div>
+      <div slot="footer" class="dialog-footer">
+        <el-button @click="workDialog = false" size="mini">返回</el-button>
+      </div>
+    </el-dialog>
+  </div>
+</template>
+
+<script>
+  import api from '../../api'
+
+  export default {
+    name: 'EvaluationManage',
+    created() {
+      this.getData()
+    },
+    data() {
+      return {
+        imgUrl: process.env.VUE_APP_IMG_URL,
+        tableStyle: {
+          textAlign: 'center',
+        },
+        tableH: 'calc(100vh - 230px)',
+        // 搜索参数
+        query: {
+          dishesName: ''
+        },
+        // 列表数据
+        tableData: [],
+        // 总数
+        total: 0,
+        //详情界面
+        workDialog: false,
+        //详情标题
+        workTitle: '详情',
+        // 详情表单
+        postManagement: {
+          dishesName: ''
+        },
+        photoUrl: [],
+        // 分页
+        sorts: {
+          page: 1,
+          limit: 10,
+        },
+      }
+    },
+    methods: {
+      //切换列表条数
+      handleSizeChange(pageSize) {
+        this.sorts.limit = pageSize
+        this.sorts.page = 1;
+        this.getData();
+      },
+      //切换页码
+      handleCurrentChange(currentPage) {
+        this.$refs.multipleTable.bodyWrapper.scrollTop = 0;
+        this.sorts.page = currentPage;
+        this.getData();
+      },
+      // 违规标记
+      markEvaluation(id) {
+        this.$confirm("是否标记违规?", "提示", {
+          cancelButtonClass: "btn-custom-cancel",
+          confirmButtonText: "确定",
+          cancelButtonText: "取消",
+          type: "warning"
+        }).then(() => {
+          let params = {
+            "id": id
+          };
+          api.markEvaluation({
+            params
+          }).then(res => {
+            if (res.data.result) {
+              this.$message({
+                type: 'success',
+                message: '标记成功!'
+              });
+              this.getData();
+            } else {
+              this.$message({
+                type: 'info',
+                message: '标记失败!'
+              });
+            }
+          })
+        }).catch(() => {
+          this.$message({
+            type: 'info',
+            message: '已取消标记'
+          });
+        })
+      },
+      // 详情
+      info: function (data) {
+        this.workTitle = "详情";
+        this.postManagement = JSON.parse(JSON.stringify(data));
+        this.photoUrl = [];
+        if (this.postManagement.photoPath) {
+          let params = {
+            picId: this.postManagement.photoPath
+          }
+          api.getFoodPicByPicId({
+            params
+          }).then(r => {
+            for (let i = 0; i < r.data.data.length; i++) {
+              this.photoUrl.push(this.imgUrl + r.data.data[i].path)
+            }
+            this.workDialog = true;
+          })
+        } else {
+          this.workDialog = true;
+        }
+      },
+      // 删除
+      handleDelete(id, index) {
+        this.$confirm("您确定要删除该数据吗?", "提示", {
+          cancelButtonClass: "btn-custom-cancel",
+          confirmButtonText: "确定",
+          cancelButtonText: "取消",
+          type: "warning"
+        }).then(() => {
+          let params = {
+            "id": id
+          }
+          api.removeEvaluation({
+            params
+          }).then(res => {
+            if (res.data.result) {
+              this.$message({
+                type: 'success',
+                message: '删除成功!'
+              });
+              this.tableData.splice(index, 1);
+              this.getData();
+            } else {
+              this.$message({
+                type: 'info',
+                message: '删除失败!'
+              });
+            }
+          })
+        }).catch(() => {
+          this.$message({
+            type: 'info',
+            message: '已取消删除'
+          });
+        })
+      },
+      // 获取列表数据
+      getData() {
+        api.queryEvaluationByPage({
+          page: this.sorts.page,
+          size: this.sorts.limit,
+          dishesName: this.query.dishesName
+        }).then(r => {
+          this.total = r.data.data.totalElements
+          this.tableData = r.data.data.content
+        })
+      },
+      // 搜索
+      searchData() {
+        this.sorts.page = 1;
+        this.getData()
+      },
+      // 清空输入框
+      reset() {
+        this.query.dishesName = '';
+        this.sorts.page = 1;
+        this.getData()
+      }
+    },
+  }
+</script>
+
+<style>
+  /* 全局取消按钮 */
+  .btn-custom-cancel {
+    margin-left: 10px !important;
+    float: right;
+  }
+</style>
+
+<style scoped lang="less">
+  /* 禁用后的勾选*/
+  /deep/ .el-checkbox__input.is-disabled.is-checked .el-checkbox__inner::after {
+    border-color: #def5cb;
+  }
+
+  /deep/ .el-checkbox__input.is-disabled.is-checked .el-checkbox__inner {
+    background-color: #157de9;
+    border-color: #DCDFE6;
+  }
+
+  /deep/ .el-dialog__body {
+    padding: 0 30px 30px 20px;
+    color: #606266;
+    font-size: 14px;
+    word-break: break-all;
+  }
+
+  /deep/ .el-dialog {
+    margin: 0 auto 0;
+  }
+
+  /deep/ .el-form-item__label {
+    padding: 0;
+  }
+
+  .yxnaContent {
+    padding: 10px;
+  }
+
+  .addTitle {
+    font-size: 18px;
+    font-weight: bold;
+    margin-bottom: 10px;
+  }
+
+  .add {
+    width: 66px;
+    height: 38px;
+    margin-left: 0;
+  }
+
+  /deep/ .el-col-12 {
+    width: 50%;
+    text-align: left;
+  }
+
+  .search {
+    width: 66px;
+    height: 38px;
+    margin-left: 0;
+  }
+
+  /deep/ .el-form-item__label {
+    height: 40px;
+    width: 110px;
+    //background-color: #FAFAFA;
+    text-align: center;
+    //border: 1px solid #DCDFE6;
+    border-radius: 2px 0 0 2px;
+  }
+
+  /deep/ .el-button.is-disabled {
+    color: #C0C4CC !important;
+  }
+
+  /deep/.el-button--primary.is-disabled {
+    color: #FFF !important;
+  }
+
+  /deep/ .el-input__inner {
+    border-radius: 2px 0 0 2px;
+  }
+
+  .el-select>.el-input {
+    width: 200px;
+  }
+
+  /deep/ .el-textarea__inner {
+    height: 100px;
+  }
+
+
+  /deep/ .el-dialog__title {
+    font-size: 14px;
+  }
+
+  /deep/ .el-pagination__total {
+    margin-left: 10px !important;
+  }
+
+  .el-pagination {
+    margin: 0;
+    margin-top: 10px;
+    /* position: fixed;
+  left: 13rem; */
+  }
+
+  /deep/ .el-table--scrollable-x .el-table__body-wrapper {
+    z-index: 2;
+  }
+
+  .but {
+    width: 36px;
+    height: 22px;
+    padding: 0;
+    font-size: 12px;
+  }
+
+  .el-checkbox {
+    margin: 0;
+    margin-right: 10px;
+  }
+
+  /deep/ .bewrite>.el-form-item__label {
+    width: 100%;
+    text-align: left;
+    padding-left: 21px;
+  }
+
+  /deep/ .el-form--inline .el-form-item {
+    margin-right: 0px;
+  }
+
+  /deep/ [data-v-2cde7735] .el-form-item__label {
+    //border: 1px solid #DCDFE6;
+    /*border-right: transparent;*/
+  }
+
+  /*    空白框*/
+  /deep/ .formTempBox {
+    height: 38px;
+    border: 1px solid #DCDFE6;
+    width: 100%;
+    border-left: transparent;
+    background-color: #FAFAFA;
+  }
+</style>