席位管理

src/api/modules/seat.ts

@@ -16,8 +16,14 @@ export const getSeatDutyPersonEdit = (params: any) => handle({
   params
 })
 
-//  席位管理 > 列表
+//  席位管理 > 48个座位列表
 export const getSeatDutyUnitList = () => handle({
   url: `/${suffix}/seat/duty/unit/list`,
   method: 'get',
 })
+
+//  席位管理 > 座位详情
+export const getSeatDutyUnitById = (id: string) => handle({
+  url: `/${suffix}/seat/duty/unit/${id}`,
+  method: 'get',
+})

src/views/system/seat-manage/index.vue

@@ -40,16 +40,16 @@
                 @change="setDuty"/>
           </CusForm>
         </div>
-        <div class="seat-position">
+        <div class="seat-position" v-loading="loadingSeat">
           <template v-for="item in seatList">
-            <div class="seat-item __hover" :class="{no: !item.deptName, active: currentSeat.index === item.index}" @click="currentSeat = item">
-              <div class="index">{{item.index}}</div>
-              <div class="name">{{item.deptName ? item.deptName : '无单位'}}</div>
+            <div class="seat-item __hover" :class="{no: !(item.abbreviation || item.name), active: currentSeatId === item.id}" @click="onSeatClick(item)">
+              <div class="index">{{item.serialNumber}}</div>
+              <div class="name">{{item.abbreviation || item.name || '无单位'}}</div>
             </div>
           </template>
         </div>
       </div>
-      <div class="dept" v-if="currentSeat?.index">
+      <div class="dept" v-if="seatInfo.info?.id">
         <template v-if="isEdit">
           <div class="dept-edit-buttons">
             <div class="reset __hover">清空</div>
@@ -62,17 +62,17 @@
                   :span="24"
                   :disabled="true"
                   label="席位编号:"
-                  v-model:param="editDutyInfo.deptForm.index"/>
+                  v-model:param="seatInfo.editDutyInfo.deptForm.index"/>
               <CusFormColumn
                   :span="24"
                   required
                   label="单位名称:"
                   link="dept"
-                  v-model:param="editDutyInfo.deptForm.p2"/>
+                  v-model:param="seatInfo.editDutyInfo.deptForm.p2"/>
               <CusFormColumn
                   :span="24"
                   label="单位简称:"
-                  v-model:param="editDutyInfo.deptForm.p2"/>
+                  v-model:param="seatInfo.editDutyInfo.deptForm.p2"/>
               <CusFormColumn
                   :span="24"
                   label="简介:"
@@ -80,19 +80,19 @@
                   :rows="4"
                   show-word-limit
                   :maxlength="100"
-                  v-model:param="editDutyInfo.deptForm.p3"/>
+                  v-model:param="seatInfo.editDutyInfo.deptForm.p3"/>
             </CusForm>
           </div>
           <div class="dept-duty-total">
-            值班人员列表({{editDutyInfo.tableData.length}})
+            值班人员列表({{seatInfo.editDutyInfo.tableData.length}})
             <div class="people-add __hover" @click="addPeople">
               <img src="./add.png"/>新增
             </div>
           </div>
           <div class="dept-duty-table">
             <CusTable
-                :tableData="editDutyInfo.tableData"
-                :tableHead="editDutyInfo.tableHead"
+                :tableData="seatInfo.editDutyInfo.tableData"
+                :tableHead="seatInfo.editDutyInfo.tableHead"
                 noPage
             >
             </CusTable>
@@ -100,33 +100,29 @@
         </template>
         <template v-else>
           <div class="dept-title">
-            <div class="dept-title-index">{{currentSeat.index}}</div>
-            <div class="dept-title-name">{{currentSeat.deptName ? currentSeat.deptName : '无单位'}}</div>
+            <div class="dept-title-index">{{seatInfo.info.serialNumber}}</div>
+            <div class="dept-title-name">{{seatInfo.info.name || '无单位'}}</div>
             <div class="dept-title-button __hover" @click="onEdit">编辑</div>
           </div>
           <div class="dept-info">
             <div class="item">
               <div class="label">单位简称：</div>
-              <div class="value">{{currentSeat.deptName}}</div>
+              <div class="value">{{seatInfo.info.abbreviation}}</div>
             </div>
             <div class="item">
               <div class="label">单位简介：</div>
-              <div class="value">{{currentSeat.remark}}</div>
+              <div class="value">{{seatInfo.info.introduction}}</div>
             </div>
           </div>
           <div class="dept-duty-total">
-            值班人员列表({{dutyInfo.total}})
+            值班人员列表({{seatInfo.dutyInfo.total}})
           </div>
           <div class="dept-duty-table">
             <CusTable
-                v-loading="dutyInfo.loading"
-                ref="ref_cusTable"
-                :tableData="dutyInfo.tableData"
-                :tableHead="dutyInfo.tableHead"
-                :total="dutyInfo.total"
-                :page="dutyInfo.pageNum"
-                :pageSize="dutyInfo.pageSize"
-                @handlePage="handlePage"
+                v-loading="seatInfo.dutyInfo.loading"
+                :tableData="seatInfo.dutyInfo.tableData"
+                :tableHead="seatInfo.dutyInfo.tableHead"
+                noPage
             >
             </CusTable>
           </div>
@@ -153,7 +149,7 @@ import {
 import {useStore} from 'vuex'
 import {useRouter, useRoute} from 'vue-router'
 import PeopleCom from './people.vue'
-import {getSeatDutyPersonEdit} from "@/api/modules/seat";
+import {getSeatDutyPersonEdit, getSeatDutyUnitById, getSeatDutyUnitList} from "@/api/modules/seat";
 import {ElMessage} from "element-plus";
 
 export default defineComponent({
@@ -169,94 +165,35 @@ export default defineComponent({
     const state = reactive({
       dutyForm: {},
       loadingDuty: false,
-      seatList: [],
-      currentSeat: {},
-      dutyInfo: {
-        tableData: [],
-        pageNum: 1,
-        pageSize: 10,
-        total: 10,
-        loading: false,
-        tableHead: [
-          {value: "p1", label: "姓名", show: true},
-          {value: "p1", label: "联系电话", show: true},
-          {value: "p1", label: "更新时间", show: true},
-        ],
-      },
-      editDutyInfo: {
-        tableData: [],
-        tableHead: [
-          {value: "p1", label: "姓名", show: true},
-          {value: "p1", label: "联系电话", show: true},
-          {value: "p1", label: "更新时间", show: true},
-          {value: "do", label: "操作", show: true},
-        ],
-        deptForm: {}
+      seatList: <any>[],
+      loadingSeat: false,
+      currentSeatId: '',
+      seatInfo: {
+        info: {},
+        dutyInfo: {
+          tableData: [],
+          loading: false,
+          tableHead: [
+            {value: "p1", label: "姓名", show: true},
+            {value: "p1", label: "联系电话", show: true},
+            {value: "p1", label: "更新时间", show: true},
+          ],
+        },
+        editDutyInfo: {
+          tableData: [],
+          tableHead: [
+            {value: "p1", label: "姓名", show: true},
+            {value: "p1", label: "联系电话", show: true},
+            {value: "p1", label: "更新时间", show: true},
+            {value: "do", label: "操作", show: true},
+          ],
+          deptForm: {}
+        },
       },
       isEdit: false,
       showPeople: false,
       transfer: {}
     })
-    const handlePage = ({page, pageSize}: any) => {
-      state.dutyInfo.pageNum = page
-      state.dutyInfo.pageSize = pageSize
-      handleSearch(page, pageSize)
-    }
-    //  查询方法
-    const handleSearch = (page = 1, pageSize = 10) => {
-      //  添加分页参数
-      const queryParams: any = {
-        pageNum: page,
-        pageSize: pageSize,
-      }
-      state.dutyInfo.loading = true
-      // mock
-      const arr: any = []
-      for (let i = 0; i < 77; i++) {
-        arr.push({
-          p1: '阿三顶顶顶顶顶顶顶顶顶顶顶顶顶' + i,
-          fileList: [
-            { "url": "http://8.140.240.182:18085/profile/upload/2023/10/23/6b7bf3b4-592a-4e2f-ba92-11923671ce3b.doc", "name": "迁移案例.doc"},
-          ],
-        })
-      }
-      state.dutyInfo.tableData = arr
-      state.dutyInfo.total = arr.length
-      state.dutyInfo.loading = false
-    }
-    onMounted(() => {
-      for (let i = 0; i< 48; i++) {
-        const obj = {index: i + 1}
-        if (i === 0) {
-          obj.deptId = '111'
-          obj.deptName = '广海局'
-          obj.remark = '中华人民共和国海南海事局，是交通运输部派驻海南的海事行政管理机关,隶属中华人民共和国海事局中华人民共和国海南海事局，是交通运输部派驻海南的海事行政管理机关,隶属中华人民共和国海事局'
-        }
-        if (i === 1) {
-          obj.deptId = '222'
-          obj.deptName = '海事局'
-        }
-        if (i === 26) {
-          obj.deptId = '333'
-          obj.deptName = '太极'
-        }
-        state.seatList.push(obj)
-      }
-    })
-    const onEdit = () => {
-      state.editDutyInfo.deptForm = JSON.parse(JSON.stringify(state.currentSeat))
-      state.editDutyInfo.tableData = JSON.parse(JSON.stringify(state.dutyInfo.tableData))
-      state.isEdit = true
-    }
-    const onEditCancel = () => {
-      state.editDutyInfo.deptForm = {}
-      state.editDutyInfo.tableData = []
-      state.isEdit = false
-    }
-    const addPeople = () => {
-      state.transfer = JSON.parse(JSON.stringify(state.currentSeat))
-      state.showPeople = true
-    }
     //  获取字典
     const initDictionary = () => {
       store.dispatch('dictionary/LOAD_DICT_LIST', 'duty_hall_leader')
@@ -293,21 +230,70 @@ export default defineComponent({
         })
       }, 100)
     }
+    const initSeat = () => {
+      state.loadingSeat = true
+      state.seatList = []
+      that.$api.getSeatDutyUnitList().then(res => {
+        if (res.code === 200) {
+          res.data?.forEach(v => {
+            state.seatList.push(v)
+          })
+        } else {
+          ElMessage.error(res.message)
+        }
+        state.loadingSeat = false
+      }).catch(() => {
+        state.loadingSeat = false
+      })
+    }
+    const onSeatClick = (item) => {
+      state.currentSeatId = item.id
+      //  重置数据
+      state.seatInfo.info = {}
+      state.seatInfo.dutyInfo.tableData = []
+      state.seatInfo.editDutyInfo.tableData = []
+      state.seatInfo.editDutyInfo.deptForm = {}
+      state.loadingSeat = true
+      that.$api.getSeatDutyUnitById(state.currentSeatId).then(res => {
+        if (res.code === 200) {
+          state.seatInfo.info = res.data
+        } else {
+          ElMessage.error(res.message)
+        }
+        state.loadingSeat = false
+      }).catch(() => {
+        state.loadingSeat = false
+      })
+    }
+    const onEdit = () => {
+      state.seatInfo.editDutyInfo.deptForm = JSON.parse(JSON.stringify(state.seatInfo.info))
+      state.seatInfo.editDutyInfo.tableData = JSON.parse(JSON.stringify(state.seatInfo.dutyInfo.tableData))
+      state.isEdit = true
+    }
+    const onEditCancel = () => {
+      state.seatInfo.editDutyInfo.deptForm = {}
+      state.seatInfo.editDutyInfo.tableData = []
+      state.isEdit = false
+    }
+    const addPeople = () => {
+      state.transfer = JSON.parse(JSON.stringify(state.seatInfo.info))
+      state.showPeople = true
+    }
     watch(() => store.state.app.dutyInfo, () => {
       initDuty()
     })
     onMounted(() => {
-      initDuty()
       initDictionary()
-      handleSearch()
+      initDuty()
+      initSeat()
     })
     return {
       ...toRefs(state),
-      handlePage,
       onEdit,
       onEditCancel,
       addPeople,
-      setDuty
+      setDuty,
+      onSeatClick
     }
   },
 })