feat: 排班提交

packages/screen/src/views/WarningManagement/law/dutyManagement/addDialog.vue

@@ -11,24 +11,45 @@
               children: 'children',
               label: 'orgName'
             }" node-key="orgId" :expand-on-click-node="false" :default-expand-all="false" highlight-current
-              style="height: 400px; overflow-y: auto;"
+              style="height: 400px; overflow-y: auto;" @node-click="handleNodeClick">
-              @node-click="handleNodeClick">
+              <template #default="{ node: _node }">
-              <template #default="{ node, data }">
                 <span class="custom-tree-node">
-                  <span>{{ node.label }}</span>
+                  <span>{{ _node.label }}</span>
                 </span>
               </template>
             </el-tree>
           </div>
 
-          <!-- 中间空白区域 -->
+          <!-- 中间用户列表 -->
           <div class="middle-panel">
-            <!-- 暂留空，后续使用 -->
+            <div class="panel-title">用户列表</div>
+            <div class="user-list">
+              <div v-for="user in currentUsers" :key="user.userId" class="user-item"
+                :class="{ 'selected': isUserSelected(user) }" @click="toggleUserSelection(user)">
+                <span class="user-name">{{ user.realName || user.nickName || user.account }}</span>
+                <span class="user-position">{{ user.positionName }}</span>
+              </div>
+            </div>
           </div>
 
-          <!-- 右侧空白区域 -->
+          <!-- 右侧已选择用户 -->
           <div class="right-panel">
-            <!-- 暂留空，后续使用 -->
+            <div class="panel-title">已选择用户 ({{ selectedUsers.length }})</div>
+            <div class="selected-user-list">
+              <div v-for="user in selectedUsers" :key="user.userId" class="selected-user-item">
+                <div class="user-info">
+                  <span class="user-name">{{ user.realName || user.nickName || user.account }}</span>
+                  <span class="user-position">{{ user.positionName }}</span>
+                </div>
+                <div class="time-picker-container">
+                  <el-date-picker v-model="user.timeRange" type="datetimerange" range-separator="至"
+                    start-placeholder="开始时间" end-placeholder="结束时间" format="YYYY-MM-DD HH:mm:ss"
+                    value-format="YYYY-MM-DD HH:mm:ss" size="small" :shortcuts="dateShortcuts"
+                    @change="handleTimeChange(user)" />
+                </div>
+                <el-button type="danger" size="small" icon="Delete" circle @click.stop="removeSelectedUser(user)" />
+              </div>
+            </div>
           </div>
         </div>
       </el-form-item>
@@ -38,13 +59,31 @@
 </template>
 
 <script setup>
-import { ref, computed, onMounted } from "vue";
+import { ref, computed, onMounted, watch } from "vue";
 import { request } from "@/utils/request";
 import { ElMessage } from 'element-plus';
 
 const formRef = ref(null);
-defineExpose({ formRef });
+// 获取保存用的用户数据（格式化后的数据）
+const getFormattedSelectedUsers = () => {
+  return selectedUsers.value.map(user => ({
+    userId: user.userId,
+    userName: user.realName || user.nickName || user.account,
+    orgId: user.orgId,
+    startTime: user.timeRange ? user.timeRange[0] : '',
+    endTime: user.timeRange ? user.timeRange[1] : ''
+  }));
+}
 
+// 当前显示的用户列表
+const currentUsers = ref([]);
+// 已选择的用户列表
+const selectedUsers = ref([]);
+
+defineExpose({
+  formRef,
+  getFormattedSelectedUsers
+});
 const props = defineProps({
   form: {
     type: Object,
@@ -52,6 +91,13 @@ const props = defineProps({
   },
 });
 
+// 监听已选择用户变化，实时保存到form中
+watch(selectedUsers, (newSelectedUsers) => {
+  // 格式化数据并保存到form
+  props.form.schedules = getFormattedSelectedUsers();
+}, { deep: true, immediate: true });
+
+
 
 
 const rules = computed(() => {
@@ -122,14 +168,14 @@ const buildOrgTree = (orgList) => {
           // 取最后一个ID作为直接父级（排除-1）
           const parentIds = pidMatches.filter(id => id !== '-1');
           if (parentIds.length > 0) {
-            parentId = parseInt(parentIds[parentIds.length - 1]);
+            parentId = parentIds[parentIds.length - 1]; // 保持字符串类型，不转成数字
           }
         }
       }
 
-      // 方法2：如果无法从orgPids解析，使用orgParentId
+      // 方法2：如果无法从orgPids解析，使用orgParentId（转换为字符串）
       if (parentId === null && org.orgParentId && org.orgParentId !== -1) {
-        parentId = org.orgParentId;
+        parentId = String(org.orgParentId);
       }
 
       // 添加到父节点的children中
@@ -156,15 +202,66 @@ const buildOrgTree = (orgList) => {
   return sortTree(tree);
 }
 
+// 检查用户是否已被选择
+const isUserSelected = (user) => {
+  return selectedUsers.value.some(selected => selected.userId === user.userId);
+};
+
+// 切换用户选择状态
+const toggleUserSelection = (user) => {
+  if (isUserSelected(user)) {
+    removeSelectedUser(user);
+  } else {
+    // 添加用户时初始化时间范围和orgId
+    selectedUsers.value.push({
+      ...user,
+      orgId: user.orgId, // 确保包含orgId
+      timeRange: null
+    });
+  }
+};
+
+// 移除已选择的用户
+const removeSelectedUser = (user) => {
+  const index = selectedUsers.value.findIndex(selected => selected.userId === user.userId);
+  if (index > -1) {
+    selectedUsers.value.splice(index, 1);
+  }
+};
+
 // 树节点点击事件
-const handleNodeClick = (data, node) => {
+const handleNodeClick = async (_data) => {
-  // 判断是否为叶子节点（没有子节点）
+  // 获取该组织的用户列表
-  if (!node.childNodes || node.childNodes.length === 0) {
+  await getUsersByOrgId(_data.orgId);
-    // 叶子节点，调用获取用户列表方法
-    getUsersByOrgId(data.orgId);
-  }
 }
 
+// 日期时间范围快捷选项
+const dateShortcuts = [
+  {
+    text: '今天',
+    value: [new Date(), new Date()],
+  },
+  {
+    text: '明天',
+    value: [
+      new Date(new Date().getTime() + 86400000),
+      new Date(new Date().getTime() + 86400000)
+    ],
+  },
+  {
+    text: '最近一周',
+    value: [new Date(), new Date(new Date().getTime() + 604800000)],
+  },
+];
+
+// 处理时间范围变化
+const handleTimeChange = (user) => {
+  // 时间变化时的处理逻辑可以在这里添加
+  console.log('时间范围变化:', user.userId, user.timeRange);
+};
+
+
+
 // 根据组织ID查询用户列表
 const getUsersByOrgId = async (orgId) => {
   try {
@@ -176,7 +273,8 @@ const getUsersByOrgId = async (orgId) => {
       }
     })
     if (res.code === '00000') {
-      console.log('@@@@@@用户列表',res.data);
+      currentUsers.value = res.data || [];
+      // console.log('@@@@@', res.data);
     } else {
       throw new Error(res.message)
     }
@@ -215,16 +313,14 @@ onMounted(() => {
   background-color: #fff;
 }
 
-.empty-panel {
-
-}
-
 .middle-panel {
   flex: 2;
   border: 1px solid #dcdfe6;
   border-radius: 4px;
   padding: 10px;
   background-color: #fff;
+  display: flex;
+  flex-direction: column;
 }
 
 .right-panel {
@@ -233,6 +329,98 @@ onMounted(() => {
   border-radius: 4px;
   padding: 10px;
   background-color: #fff;
+  display: flex;
+  flex-direction: column;
+}
+
+.panel-title {
+  font-weight: bold;
+  font-size: 14px;
+  color: #303133;
+  margin-bottom: 10px;
+  padding-bottom: 8px;
+  border-bottom: 1px solid #ebeef5;
+}
+
+.user-list {
+  flex: 1;
+  overflow-y: auto;
+}
+
+.user-item {
+  display: flex;
+  justify-content: space-between;
+  align-items: center;
+  padding: 8px 12px;
+  margin-bottom: 4px;
+  border-radius: 4px;
+  cursor: pointer;
+  transition: all 0.3s;
+  border: 1px solid transparent;
+}
+
+.user-item:hover {
+  background-color: #f5f7fa;
+}
+
+.user-item.selected {
+  background-color: #409eff;
+  color: white;
+  border-color: #409eff;
+}
+
+.user-name {
+  font-size: 14px;
+  font-weight: 500;
+}
+
+.user-position {
+  font-size: 12px;
+  opacity: 0.7;
+}
+
+.selected-user-list {
+  flex: 1;
+  overflow-y: auto;
+}
+
+.selected-user-item {
+  display: flex;
+  justify-content: space-between;
+  align-items: center;
+  padding: 8px 12px;
+  margin-bottom: 4px;
+  border-radius: 4px;
+  background-color: #f0f9ff;
+  border: 1px solid #e1f5fe;
+  gap: 12px;
+}
+
+.time-picker-container {
+  flex: 1.2;
+  min-width: 280px;
+}
+
+.time-picker-container :deep(.el-date-editor) {
+  width: 100%;
+}
+
+.user-info {
+  display: flex;
+  flex-direction: column;
+  min-width: 120px;
+  flex: 0.8;
+}
+
+.selected-user-item .user-name {
+  font-size: 14px;
+  font-weight: 500;
+  color: #303133;
+}
+
+.selected-user-item .user-position {
+  font-size: 12px;
+  color: #606266;
 }
 
 .custom-tree-node {

packages/screen/src/views/WarningManagement/law/dutyManagement/index.js

@@ -68,7 +68,7 @@ const pagination = reactive({
     },
 });
 
-// 获取预警列表
+// 获取值班列表
 const getTableData = async (filterData = {}) => {
     try {
         // 过滤空字符串属性
@@ -100,7 +100,28 @@ const getTableData = async (filterData = {}) => {
     }
 }
 
-// 打开发布预警弹窗
+// 排班提交
+const addSchedule = async (form) => {
+    try {
+        const res = await request({
+            url: '/snow-ops-platform/law-duty/schedule',
+            method: "POST",
+            data: form
+        })
+        if (res.code === '00000') {
+            ElMessage.success('排班成功');
+            modelVisible.value = false;
+            getTableData(filterData)
+        } else {
+            throw new Error(res.message)
+        }
+    } catch (error) {
+        ElMessage.error('排班失败');
+        console.error('排班失败:', error);
+    }
+}
+
+// 打开排班弹窗
 const openAddDialog = () => {
     model.title = '立即排班';
     Object.assign(form, INIT_FORM);
@@ -113,7 +134,7 @@ const openAddDialog = () => {
     };
     model.onConfirm = async () => {
         await dialogRef?.value?.dynamicComponentRef?.formRef.validate().then(async () => {
-            console.log('@@@@@立即排班', form);
+            await addSchedule(form)
             // await publishWarning(form)
         })
             .catch((err) => {

packages/screen/src/views/WarningManagement/law/index.js

@@ -2,6 +2,7 @@ import { h, ref, onMounted, reactive, watch, toRaw, nextTick } from "vue";
 import { request } from "@/utils/request";
 import { useRoute, useRouter } from 'vue-router'
 import AddDialog from "./addDialog.vue";
+import ScheduleDiaog from "../law/dutyManagement/addDialog.vue"
 import DetailDrawer from "./detailDrawer.vue";
 
 const tableData = ref([]); // 表格数据
@@ -305,6 +306,53 @@ const uploadFile = async (file) => {
     }
 }
 
+const form2 = reactive({});
+const INIT_FORM2 = {};
+
+// 排班提交
+const addSchedule = async (form) => {
+    try {
+        const res = await request({
+            url: '/snow-ops-platform/law-duty/schedule',
+            method: "POST",
+            data: form
+        })
+        if (res.code === '00000') {
+            ElMessage.success('排班成功');
+            modelVisible.value = false;
+            getTableData(filterData)
+        } else {
+            throw new Error(res.message)
+        }
+    } catch (error) {
+        ElMessage.error('排班失败');
+        console.error('排班失败:', error);
+    }
+}
+
+const openScheduleDiaog = () => {
+    model.title = '立即排班';
+    Object.assign(form2, INIT_FORM2);
+    model.props = {
+        form: form2,
+    };
+    model.content = ScheduleDiaog;
+    model.onCancel = () => {
+        modelVisible.value = false;
+    };
+    model.onConfirm = async () => {
+        await dialogRef?.value?.dynamicComponentRef?.formRef.validate().then(async () => {
+            await addSchedule(form)
+            // await publishWarning(form)
+        })
+            .catch((err) => {
+                ElMessage.error('请处理表单中的错误项');
+            });
+    };
+    model.width = "70%"
+    modelVisible.value = true;
+}
+
 
 
 
@@ -356,6 +404,7 @@ export default () => {
         dialogRef,
         drawerRef,
         openAddDialog,
+        openScheduleDiaog,
 
         uploadFile,
     }

packages/screen/src/views/WarningManagement/law/index.vue

@@ -15,7 +15,7 @@
             <el-button type="primary" @click="script.openAddDialog">发布预警</el-button>
             <el-button type="primary" @click="triggerFileSelect">上传线下帮扶</el-button>
             <el-button type="primary" @click="script.gotoLedgerPage">线下帮扶台账</el-button>
-            <el-button type="primary" @click="">立即排班</el-button>
+            <el-button type="primary" @click="script.openScheduleDiaog">立即排班</el-button>
             <el-button type="primary" @click="script.gotoDutyPage">值班管理</el-button>
             <el-button type="primary" color="#952DE6" @click="">导出</el-button>
             <input type="file" ref="fileInput" style="display: none" @change="handleFileSelect" accept=".*"></input>