大厅排队记录报表页面对接接口调用数据

Signed-off-by: 王启林 <1940603613@qq.com>

portal-manager-ui/admin/src/views/dataAdmin/components/queueCall/queueRecord.vue

@@ -5,50 +5,93 @@
         <a-button type="success" @click="exportTable">
           <span>{{ tableSelectedRows.length ? "导出" : "导出全部" }}</span>
         </a-button>
-        <b>叫号次数：<i>233次</i></b>
-        <sub>统计时间段：2020.09.09~2021.09.09</sub>
+        <b>叫号次数：<i>{{ tablePagination.total }}</i>次</b>
+        <sub>统计时间段：{{ searchForm.time[0] }}~{{ searchForm.time[1] }}</sub>
       </div>
       <span>
-        <a-select default-value="001">
-          <a-select-option value="001"> 设备001 </a-select-option>
-          <a-select-option value="002"> 设备002 </a-select-option>
+        <a-select v-model="searchForm.id" style="width: 120px">
+          <a-select-option value=""> 全部设备 </a-select-option>
+          <a-select-option v-for="item in deviceData" :key="item.id" :value="item.id">
+            {{ item.name }}
+          </a-select-option>
         </a-select>
-        <a-select default-value="001">
-          <a-select-option value="001"> 状态001 </a-select-option>
-          <a-select-option value="002"> 状态002 </a-select-option>
+        <a-select v-model="searchForm.style" style="width: 120px">
+          <a-select-option value=""> 全部状态 </a-select-option>
+          <a-select-option v-for="v in style" :key="v.key" :value="v.key">{{
+            v.name
+          }}</a-select-option>
         </a-select>
-        <a-range-picker format="YYYY年MM月DD日" class="range_picker_style" @change="rangePickerChange"
-          v-model="BegindAndEndTime">
+        <a-range-picker valueFormat="YYYY-MM-DD" v-model="searchForm.time">
         </a-range-picker>
-
-        <a-input v-model="searchName" placeholder="请输入排队编号或申报人姓名搜索">
+        <a-input v-model="searchForm.flownum" placeholder="请输入排队编号搜索">
           <a-icon slot="prefix" type="search" />
         </a-input>
-        <a-button type="primary">搜索</a-button>
+        <a-button type="primary" @click="getDataList">搜索</a-button>
+        <a-button @click="resetBtn">重置</a-button>
       </span>
     </div>
     <div class="main">
       <a-table size="small" bordered :row-key="(record) => record.id" :row-selection="{
         selectedRowKeys: tableSelectedKeys,
         onChange: onSelectChange,
-      }" :scroll="{ y: 590 }" :pagination="tablePagination" @change="pagTableChange" :loading="tableLoading"
-        :columns="tableHeaders" :dataSource="tableSourceData">
-        <template slot="shenbaoren" slot-scope="text, record, index">
-          <a-button type="link" @click="openDeclarant">{{ text }}</a-button>
+      }" :scroll="{ y: 590 }" :pagination="tablePagination" @change="changeTablePage" :loading="tableLoading"
+        :columns="tableHeaders" :dataSource="tableList">
+        <!-- 序号 -->
+        <span slot="num" slot-scope="text, record, index">{{
+          (tablePagination.current - 1) * tablePagination.pageSize + index + 1
+        }}</span>
+        <!-- 申报人 -->
+        <template slot="people_name" slot-scope="text">
+          <a v-if="text.people_name" @click="openDeclarant(text)">{{
+            text.people_name
+          }}</a>
+          <span v-else>--</span>
+        </template>
+        <!-- 联系方式 -->
+        <template slot="people_phone" slot-scope="text">
+          {{ text.people_phone ? text.people_phone : "--" }}
+        </template>
+        <!-- 取号设备 -->
+        <template slot="device_name" slot-scope="text">
+          {{ text.device_name ? text.device_name : "--" }}
+        </template>
+        <!-- 办理业务 -->
+        <template slot="business" slot-scope="text">
+          <a v-if="text.business" @click="openBusiness(text.business, text.businessId)">{{ text.business }}</a>
+          <span v-else>--</span>
         </template>
-        <template slot="banliyewu" slot-scope="text, record, index">
-          <a-button type="link" @click="openBusiness">{{ text }}</a-button>
+        <!-- 办理开始时间 -->
+        <template slot="calltime" slot-scope="text">
+          {{ text.calltime ? text.calltime : "--" }}
         </template>
-        <template slot="gongzuorenyuan" slot-scope="text, record, index">
-          <a-button type="link" @click="openWorkpeople">{{ text }}</a-button>
+        <!-- 办理窗口 -->
+        <template slot="window_name" slot-scope="text">
+          {{ text.window_name ? text.window_name : "--" }}
         </template>
-        <template slot="zhuangtai" slot-scope="text, record, index">
-          <a-button type="link" :class="[QueueState(index)]">{{
-            text
-          }}</a-button>
+        <!-- 工作人员 -->
+        <template slot="workman_name" slot-scope="text">
+          <a v-if="text.workman_name" @click="openWorkpeople(text.workmanid)">{{
+            text.workman_name
+          }}</a>
+          <span v-else>--</span>
         </template>
-        <template slot="operation" slot-scope="text, record, index">
-          <a-button type="link" @click="openHandlingDetails">详细信息{{ record.id }}</a-button>
+        <!-- 办理结束时间 -->
+        <template slot="endtime" slot-scope="text">
+          {{ text.endtime ? text.endtime : "--" }}
+        </template>
+        <!-- 操作 -->
+        <template slot="action" slot-scope="text">
+          <a @click="openHandlingDetails(text.id)">详细信息</a>
+        </template>
+        <!-- 状态 -->
+        <template slot="style" slot-scope="text">
+          <span :class="{
+            'stand-line': text.style === 0,
+            'on-transact': text.style === 1,
+            'on-end': text.style === 4,
+          }">
+            {{ $codeMap.queueState[text.style] }}
+          </span>
         </template>
       </a-table>
       <UserInfo ref="UserInfo" />
@@ -56,16 +99,17 @@
       <WorkpeopleInfo ref="WorkpeopleInfo" />
       <HandlingDetails ref="HandlingDetails" />
     </div>
-  </div>
+</div>
 </template>
 
 <script>
 import table from "@/mixins/table";
+import moment from "moment";
 import UserInfo from "./components/userInfo.vue";
 import BusinessInfo from "./components/businessInfo.vue";
 import WorkpeopleInfo from "./components/workpeopleInfo.vue";
 import HandlingDetails from "./components/HandlingDetails.vue";
-import { getQueueData } from "@/api/dataAdmin";
+import { getTaskList, getQueueData, getQueueInfo, getBusinessEvent, getWorkerInfo } from "@/api/dataAdmin";
 export default {
   mixins: [table],
   name: "PortalAdminVueQueueRecord",
@@ -74,95 +118,123 @@ export default {
       tableHeaders: [
         {
           title: "序号",
-          dataIndex: "index",
-          width: "60px",
-          key: "index",
+          width: "65px",
           align: "center",
-          customRender: (text, record, index) => `${index + 1}`,
+          scopedSlots: {
+            customRender: "num",
+          },
         },
         {
           title: "排队编号",
           align: "center",
-          dataIndex: "paiduibianhao",
+          dataIndex: "flownum",
         },
         {
           title: "申报人",
           align: "center",
-          dataIndex: "shenbaoren",
           scopedSlots: {
-            customRender: "shenbaoren",
+            customRender: "people_name",
           },
         },
         {
           title: "联系方式",
           align: "center",
-          dataIndex: "lianxifangshi",
+          scopedSlots: {
+            customRender: "people_phone",
+          },
         },
         {
           title: "取号时间",
-          width: "115px",
           align: "center",
-          dataIndex: "quhaoshijian",
+          dataIndex: "taketime",
         },
         {
           title: "取号设备",
           align: "center",
-          dataIndex: "quhaoshebei",
+          scopedSlots: {
+            customRender: "device_name",
+          },
         },
         {
           title: "办理业务",
           align: "center",
-          dataIndex: "banliyewu",
           scopedSlots: {
-            customRender: "banliyewu",
+            customRender: "business",
           },
         },
         {
           title: "办理开始时间",
-          width: "115px",
+          width: "8%",
           align: "center",
-          dataIndex: "banlikaishishijian",
+          scopedSlots: {
+            customRender: "calltime",
+          },
         },
         {
           title: "办理窗口",
           align: "center",
-          dataIndex: "banlichuangkou",
+          scopedSlots: {
+            customRender: "window_name",
+          },
         },
         {
           title: "工作人员",
           align: "center",
-          dataIndex: "gongzuorenyuan",
           scopedSlots: {
-            customRender: "gongzuorenyuan",
+            customRender: "workman_name",
           },
         },
         {
           title: "办理结束时间",
-          width: "115px",
+          width: "8%",
           align: "center",
-          dataIndex: "banlijieshushijian",
+          scopedSlots: {
+            customRender: "endtime",
+          },
         },
+
         {
           title: "状态",
           align: "center",
-          dataIndex: "zhuangtai",
           scopedSlots: {
-            customRender: "zhuangtai",
+            customRender: "style",
           },
         },
 
         {
           title: "操作",
           align: "center",
-          width: "110px",
-          dataIndex: "operation",
           scopedSlots: {
-            customRender: "operation",
+            customRender: "action",
           },
         },
       ],
-      BegindAndEndTime: [],
-      searchName: undefined,
+      //设备数据
+      deviceData: [],
+      // 搜索数据
+      searchForm: {
+        id: "", // 排队机id
+        style: "", // 状态
+        time: [moment().format("YYYY-MM-DD"), moment().format("YYYY-MM-DD")], // 时间区间
+        flownum: "", // 排号编码
+      },
+      //状态
+      style: [
+        {
+          key: 0,
+          name: "排队中",
+        },
+        {
+          key: 1,
+          name: "办理中",
+        },
+        {
+          key: 4,
+          name: "办理完成",
+        },
+      ],
+      //Form数据列表
+      tableList: [],
     };
   },
   components: {
@@ -173,62 +245,85 @@ export default {
   },
   mounted() {
     this.setMoment();
+    this.getTaskListArr();
+    this.getQueueDataArr();
+  },
+  methods: {
+    //搜索按钮
+    getDataList() {
+      this.tablePagination.current = 1
+      this.getQueueDataArr();
+    },
+    //重置按钮
+    resetBtn() {
+      this.tablePagination.current = 1
+      this.searchForm = {
+        id: "", // 排队机id
+        style: "", // 状态
+        time: [moment().format("YYYY-MM-DD"), moment().format("YYYY-MM-DD")], // 时间区间
+        flownum: "", // 排号编码
+      }
       this.getQueueDataArr()
-    for (let key = 0; key < 20; key++) {
-      this.tableSourceData.push({
-        id: `00${key + 1}`,
-        paiduibianhao: `A0001${key + 1}`,
-        shenbaoren: `张三 00${key + 1}`,
-        lianxifangshi: `13080888888${key + 1}`,
-        quhaoshijian: `2021-01-15 12:00:00`,
-        quhaoshebei: `一楼排队机 ${key + 1}`,
-        banliyewu: `公安户籍类 ${key + 1}`,
-        banlikaishishijian: `2021-01-15 12:00:00`,
-        banlichuangkou: `01/东区1 ${key + 1}`,
-        gongzuorenyuan: `刘明洋 ${key + 1}`,
-        banlijieshushijian: `2021-01-15 12:00:00`,
-        zhuangtai: `排队中 ${key + 1}`,
+    },
+    //获取排号机设备列表
+    async getTaskListArr() {
+      await getTaskList({ page: 1, size: -1 }).then((res) => {
+        // console.log(res.data.data)
+        this.deviceData = res.data.data;
       });
-    }
     },
-  methods: {
     // 获取列表数据
     getQueueDataArr() {
-      getQueueData().then(res => {
-        console.log(res)
-      })
+      getQueueData({
+        page: this.tablePagination.current,
+        size: this.tablePagination.pageSize,
+        ...this.searchForm,
+      }).then((res) => {
+        this.tableList = res.data.data;
+        this.tablePagination.total = res.data.total;
+      });
     },
-    openDeclarant() {
+    //分页
+    changeTablePage(page) {
+      this.pagTableChange(page)
+      this.getQueueDataArr()
+    },
+    //用户模态框
+    openDeclarant(item) {
+      console.log(item)
       this.$refs.UserInfo.modalInfo.title = "用户信息";
       this.$refs.UserInfo.modalInfo.width = "25%";
       this.$refs.UserInfo.modalInfo.visible = true;
     },
-    openBusiness() {
+    //业务关联模块
+    async openBusiness(business, id) {
+      let siteId = localStorage.getItem('siteId')
+      await getBusinessEvent({ siteId, page: 1, size: -1, siteBusinessId: id }).then(res => {
+        this.$refs.BusinessInfo.dataList = res.data.data
+      })
       this.$refs.BusinessInfo.modalInfo.title = "业务分析";
+      this.$refs.BusinessInfo.title = business
       this.$refs.BusinessInfo.modalInfo.visible = true;
     },
-    openWorkpeople() {
+    //工作人员信息模态框
+    async openWorkpeople(id) {
+      await getWorkerInfo({ id }).then(res => {
+        console.log(res.data)
+        this.$refs.WorkpeopleInfo.infoData = res.data
+      })
       this.$refs.WorkpeopleInfo.modalInfo.title = "工作人员信息";
       this.$refs.WorkpeopleInfo.modalInfo.visible = true;
     },
-    openHandlingDetails() {
+    //详情信息抽屉
+    async openHandlingDetails(id) {
+      //获取排队叫号对应ID详情
+      await getQueueInfo({ id }).then(res => {
+        this.$refs.HandlingDetails.dataList = res.data
+      })
       this.$refs.HandlingDetails.modalInfo.title = "办理明细";
       this.$refs.HandlingDetails.modalInfo.visible = true;
     },
-    rangePickerChange(val) {
-      console.log(val);
-    },
 
-    QueueState(type) {
-      switch (type) {
-        case 0:
-          return "type1";
-        case 1:
-          return "type2";
-        default:
-          return "type0";
-      }
-    },
   },
 };
 </script>
@@ -237,5 +332,12 @@ export default {
 /deep/.ant-spin-container {
   display: block !important;
 }
-</style>
 
+.stand-line {
+  color: #f23a3a;
+}
+
+.on-transact {
+  color: #04ca8f;
+}
+</style>