feat: 排队和评价报表详情弹窗

admin_2/src/assets/css/common.less

@@ -121,11 +121,11 @@
 .el-drawer__body {
   border-top: 1px solid #ececec;
 }
-.el-button--primary {
-  background: linear-gradient(90deg, #5ab6ff, #2e9aff) !important;
-  border: none !important;
-  border-color: transparent !important;
-}
+// .el-button--primary {
+//   background: linear-gradient(90deg, #5ab6ff, #2e9aff) !important;
+//   border: none !important;
+//   border-color: transparent !important;
+// }
 .el-dialog__header {
   .el-dialog__title {
     color: #1890ff !important;
@@ -149,13 +149,16 @@
   }
   .is-active {
     .tab-label {
-      color:#2681e8
+      color:var(--primary)
     }
   }
 }
 .el-tabs__header{
   margin: 0px !important;
 }
+.el-tabs__active-bar{
+  background-color:var(--primary)
+}
 
 // .search-popover{
 //   box-shadow: 0 0 12px 0 rgba(24, 144, 255, 0.1);

admin_2/src/pages/market/EvaluateReport.vue

@@ -81,15 +81,33 @@
       </el-popover>
     </div>
     <div class="main max-w-[1396px] flex-1">
-      <y-table border :tableData="tableData" :column="column"> </y-table>
+      <y-table
+        ref="MyTable"
+        :loading="loading"
+        :data="tableData"
+        :column="column"
+        border
+        tooltip-effect="dark"
+        :max-height="600"
+        :row-key="(row) => row.id"
+        @selection-change="handleSelectionChange"
+      ></y-table>
     </div>
+    <!-- 详情 -->
+    <EvaluateDetails :show.sync="show"></EvaluateDetails>
   </div>
 </template>
 
 <script>
+import EvaluateDetails from "./components/EvaluateDetails.vue";
 export default {
+  components: {
+    EvaluateDetails,
+  },
   data() {
     return {
+      show: false,
+      loading: false,
       pickerOptions: {
         shortcuts: [
           {
@@ -125,7 +143,12 @@ export default {
       form2: {
         type: [],
       },
-      tableData: [],
+      tableData: [
+        {
+          name: "测试",
+        },
+      ],
+      selectionRows: [],
       column: [
         {
           type: "selection",
@@ -144,6 +167,7 @@ export default {
           label: "站点名称",
           align: "center",
           width: "150",
+          prop: "name",
         },
         {
           label: "业务名称",
@@ -255,10 +279,31 @@ export default {
           align: "center",
           fixed: "right",
           width: "100",
+          formatter: (row) => {
+            return (
+              <span
+                class="primary cursor-pointer"
+                onClick={() => {
+                  this.checkDetails(row);
+                }}
+              >
+                查看详情
+              </span>
+            );
+          },
         },
       ],
     };
   },
+  methods: {
+    checkDetails(row) {
+      console.log(row);
+      this.show = true;
+    },
+    handleSelectionChange(rows) {
+      this.selectionRows = rows;
+    },
+  },
 };
 </script>
 

admin_2/src/pages/market/QueueUpReport.vue

@@ -81,15 +81,34 @@
       </el-popover>
     </div>
     <div class="main max-w-[1396px] flex-1">
-      <y-table border :tableData="tableData" :column="column"> </y-table>
+      <y-table
+        ref="MyTable"
+        :loading="loading"
+        :data="tableData"
+        :column="column"
+        border
+        tooltip-effect="dark"
+        :max-height="600"
+        :row-key="(row) => row.id"
+        @selection-change="handleSelectionChange"
+      ></y-table>
     </div>
+    <!-- 详情 -->
+    <QueueUpDetails :show.sync="show"></QueueUpDetails>
   </div>
 </template>
 
 <script>
+import QueueUpDetails from "./components/QueueUpDetails.vue";
 export default {
+  components: {
+    QueueUpDetails,
+  },
   data() {
     return {
+      show: false,
+      loading: false,
+      selectionRow: [],
       pickerOptions: {
         shortcuts: [
           {
@@ -125,7 +144,11 @@ export default {
       form2: {
         type: [],
       },
-      tableData: [],
+      tableData: [
+        {
+          name: "高县",
+        },
+      ],
       column: [
         {
           type: "selection",
@@ -144,6 +167,7 @@ export default {
           label: "站点名称",
           align: "center",
           width: "150",
+          prop: "name",
         },
         {
           label: "业务名称",
@@ -255,10 +279,31 @@ export default {
           align: "center",
           fixed: "right",
           width: "100",
+          formatter: (row) => {
+            return (
+              <span
+                class="primary cursor-pointer"
+                onClick={() => {
+                  this.checkDetails(row);
+                }}
+              >
+                查看详情
+              </span>
+            );
+          },
         },
       ],
     };
   },
+  methods: {
+    checkDetails(row) {
+      console.log(row);
+      this.show = true;
+    },
+    handleSelectionChange(val) {
+      this.selectionRow = val;
+    },
+  },
 };
 </script>
 

admin_2/src/pages/market/components/EvaluateDetails.vue

+<template>
+  <el-drawer
+    title="详情"
+    :visible.sync="drawer"
+    size="60%"
+    @close="drawer = false"
+  >
+    <div class="main h-full w-full p-[20px]">
+      <el-descriptions
+        :column="3"
+        border
+        size="medium"
+        labelClassName="label-name"
+      >
+        <el-descriptions-item
+          v-for="(v, i) in detailsList"
+          :key="i"
+          :label="v.title"
+        >
+          {{ v.content }}
+        </el-descriptions-item>
+      </el-descriptions>
+    </div>
+  </el-drawer>
+</template>
+
+<script>
+export default {
+  props: {
+    show: {
+      type: Boolean,
+      default: false,
+    },
+  },
+  data() {
+    return {
+      detailsList: [
+        {
+          title: "身份证号",
+          content: "测试",
+        },
+        {
+          title: "姓名",
+          content: "测试",
+        },
+        {
+          title: "性别",
+          content: "测试",
+        },
+        {
+          title: "手机号",
+          content: "测试",
+        },
+        {
+          title: "评价选项",
+          content: "测试",
+        },
+        {
+          title: "评价标签",
+          content: "测试",
+        },
+        {
+          title: "评价人图片地址",
+          content: "测试",
+        },
+        {
+          title: "部门",
+          content: "测试",
+        },
+        {
+          title: "大厅名称",
+          content: "测试",
+        },
+        {
+          title: "评价来源",
+          content: "测试",
+        },
+        {
+          title: "手输意见",
+          content: "测试",
+        },
+        {
+          title: "窗口名称",
+          content: "测试",
+        },
+        {
+          title: "窗口编号",
+          content: "测试",
+        },
+        {
+          title: "排队编号",
+          content: "测试",
+        },
+        {
+          title: "窗口评价",
+          content: "测试",
+        },
+        {
+          title: "工作人员姓名",
+          content: "测试",
+        },
+        {
+          title: "工作人员工号",
+          content: "测试",
+        },
+        {
+          title: "评价器MAC地址",
+          content: "测试",
+        },
+        {
+          title: "评价状态",
+          content: "测试",
+        },
+        {
+          title: "截图还是评价",
+          content: "测试",
+        },
+        {
+          title: "截图地",
+          content: "测试",
+        },
+        {
+          title: "签字图片",
+          content: "测试",
+        },
+        {
+          title: "抓拍评价人照片",
+          content: "测试",
+        },
+        {
+          title: "音视频地址",
+          content: "测试",
+        },
+        {
+          title: "评价标记",
+          content: "测试",
+        },
+        {
+          title: "评价指向",
+          content: "测试",
+        },
+        {
+          title: "评价时间",
+          content: "测试",
+        },
+        {
+          title: "站点编码",
+          content: "测试",
+        },
+        {
+          title: "站点名称",
+          content: "测试",
+        },
+        {
+          title: "扩展编号",
+          content: "测试",
+        },
+      ],
+    };
+  },
+  computed: {
+    drawer: {
+      get() {
+        return this.show;
+      },
+      set(val) {
+        this.$emit("update:show", val);
+      },
+    },
+  },
+};
+</script>
+
+<style lang="less" scoped>
+:deep(.label-name) {
+  width: 180px !important;
+}
+</style>

admin_2/src/pages/market/components/QueueUpDetails.vue

+<template>
+  <el-drawer
+    title="详情"
+    :visible.sync="drawer"
+    size="60%"
+    @close="drawer = false"
+  >
+    <div class="main h-full w-full p-[20px]">
+      <el-descriptions
+        :column="3"
+        border
+        size="medium"
+        labelClassName="label-name"
+      >
+        <el-descriptions-item
+          v-for="(v, i) in detailsList"
+          :key="i"
+          :label="v.title"
+        >
+          {{ v.content }}
+        </el-descriptions-item>
+      </el-descriptions>
+    </div>
+  </el-drawer>
+</template>
+
+<script>
+export default {
+  props: {
+    show: {
+      type: Boolean,
+      default: false,
+    },
+  },
+  data() {
+    return {
+      detailsList: [
+        {
+          title: "预约编号",
+          content: "测试",
+        },
+        {
+          title: "叫号状态",
+          content: "测试",
+        },
+        {
+          title: "业务名称",
+          content: "测试",
+        },
+        {
+          title: "窗口名称",
+          content: "测试",
+        },
+        {
+          title: "窗口编号",
+          content: "测试",
+        },
+        {
+          title: "流水编号,当天的第xxx号",
+          content: "测试",
+        },
+        {
+          title: "呼叫转移号",
+          content: "测试",
+        },
+        {
+          title: "姓名",
+          content: "测试",
+        },
+        {
+          title: "身份证号",
+          content: "测试",
+        },
+        {
+          title: "性别",
+          content: "测试",
+        },
+        {
+          title: "手机号",
+          content: "测试",
+        },
+        {
+          title: "工作人员姓名",
+          content: "测试",
+        },
+        {
+          title: "工作人员工号",
+          content: "测试",
+        },
+        {
+          title: "取号时间",
+          content: "测试",
+        },
+        {
+          title: "结束时间",
+          content: "测试",
+        },
+        {
+          title: "等待时间",
+          content: "测试",
+        },
+        {
+          title: "办理时间",
+          content: "测试",
+        },
+        {
+          title: "取号设备类型",
+          content: "测试",
+        },
+        {
+          title: "取号设备名称",
+          content: "测试",
+        },
+        {
+          title: "呼叫设备",
+          content: "测试",
+        },
+        {
+          title: "事项名称",
+          content: "测试",
+        },
+        {
+          title: "排号队列ID，唯一",
+          content: "测试",
+        },
+        {
+          title: "大厅名称",
+          content: "测试",
+        },
+        {
+          title: "站点ID",
+          content: "测试",
+        },
+        {
+          title: "站点编码",
+          content: "测试",
+        },
+        {
+          title: "站点名称",
+          content: "测试",
+        },
+        {
+          title: "扩展编号",
+          content: "测试",
+        },
+      ],
+    };
+  },
+  computed: {
+    drawer: {
+      get() {
+        return this.show;
+      },
+      set(val) {
+        this.$emit("update:show", val);
+      },
+    },
+  },
+};
+</script>
+
+<style lang="less" scoped>
+:deep(.label-name) {
+  width: 180px !important;
+}
+</style>

admin_2/src/pages/system/parameter/Parameter.vue

@@ -154,7 +154,7 @@ export default {
           width: "120",
           formatter: (row) => {
             return (
-              <div class="flex justify-center gap-2">
+              <div class="flex justify-center gap-4">
                 <span
                   class="primary cursor-pointer"
                   onClick={() => this.handleEdit(row)}

admin_2/src/pages/system/task/TaskSet.vue

@@ -142,7 +142,7 @@ export default {
           width: "120",
           formatter: (row) => {
             return (
-              <div class="flex justify-center gap-2">
+              <div class="flex justify-center gap-4">
                 <span
                   class="primary cursor-pointer"
                   onClick={() => this.handleEdit(row)}