economic_crime/economic-crime-web/src/views/business/case-management/weekly-schedule.vue

<!--
  * 周调度：勾选案件生成标红模板，手填调度内容，推送人员全员确认后锁定可打印
-->
<template>
  <div class="weekly-schedule-container">
    <a-form class="smart-query-form">
      <a-row class="smart-query-form-row" v-privilege="'weekly-schedule:query'">
        <a-form-item label="调度编号" class="smart-query-form-item">
          <a-input style="width: 180px" v-model:value="queryForm.scheduleNo" placeholder="请输入调度编号" allowClear />
        </a-form-item>
        <a-form-item label="状态" class="smart-query-form-item">
          <a-select style="width: 140px" v-model:value="queryForm.status" placeholder="请选择" allowClear>
            <a-select-option v-for="item in statusOptions" :key="item.value" :value="item.value">{{ item.desc }}</a-select-option>
          </a-select>
        </a-form-item>
        <a-form-item class="smart-query-form-item">
          <a-button-group>
            <a-button type="primary" @click="onSearch" v-privilege="'weekly-schedule:query'">
              <template #icon><SearchOutlined /></template>
              查询
            </a-button>
            <a-button @click="resetQuery" v-privilege="'weekly-schedule:query'">
              <template #icon><ReloadOutlined /></template>
              重置
            </a-button>
          </a-button-group>
        </a-form-item>
      </a-row>
    </a-form>

    <div class="section-card">
      <a-row class="smart-table-btn-block">
        <div class="smart-table-operate-block">
          <a-button type="primary" v-privilege="'weekly-schedule:add'" @click="openCreate">
            <template #icon><PlusOutlined /></template>
            新增
          </a-button>
          <a-radio-group v-model:value="listTab" button-style="solid" class="list-tab" @change="onTabChange">
            <a-radio-button :value="false">全部</a-radio-button>
            <a-radio-button :value="true">待我确认</a-radio-button>
          </a-radio-group>
        </div>
        <div class="smart-table-setting-block">
          <TableOperator v-model="columns" :tableId="TABLE_ID_CONST.BUSINESS.CASE.WEEKLY_SCHEDULE" :refresh="queryData" />
        </div>
      </a-row>
      <a-table
        size="small"
        :dataSource="tableData"
        :columns="columns"
        rowKey="scheduleId"
        :scroll="{ x: 1200 }"
        bordered
        :pagination="false"
        :loading="tableLoading"
      >
        <template #bodyCell="{ record, column }">
          <template v-if="column.dataIndex === 'status'">
            <a-tag :color="getWeeklyScheduleStatusColor(record.status)">{{ record.statusName || getWeeklyScheduleStatusName(record.status) }}</a-tag>
          </template>
          <template v-else-if="column.dataIndex === 'progress'">
            {{ record.confirmedCount || 0 }}/{{ record.memberCount || 0 }}
          </template>
          <template v-else-if="column.dataIndex === 'createTime'">
            {{ formatTime(record.createTime) }}
          </template>
          <template v-else-if="column.dataIndex === 'action'">
            <div class="smart-table-operate">
              <a-button type="link" size="small" v-privilege="'weekly-schedule:view'" @click="openDetail(record)">查看</a-button>
              <a-button type="link" size="small" v-if="record.canPush" v-privilege="'weekly-schedule:push'" @click="handlePush(record)">推送</a-button>
              <a-popconfirm title="确认调度内容后不可更改，确定确认？" ok-text="确定" cancel-text="取消" @confirm="handleConfirm(record)">
                <a-button type="link" size="small" v-if="record.canConfirm" v-privilege="'weekly-schedule:confirm'">确认</a-button>
              </a-popconfirm>
              <a-button type="link" size="small" v-if="record.canPrint" v-privilege="'weekly-schedule:print'" @click="handlePrint(record)">打印</a-button>
            </div>
          </template>
        </template>
      </a-table>
      <div class="smart-query-table-page">
        <a-pagination
          showSizeChanger
          showQuickJumper
          show-less-items
          :pageSizeOptions="PAGE_SIZE_OPTIONS"
          v-model:current="queryForm.pageNum"
          v-model:pageSize="queryForm.pageSize"
          :total="pagination.total"
          @change="onPageChange"
          @showSizeChange="onPageChange"
          :show-total="(total) => `共${total}条`"
        />
      </div>
    </div>

    <a-modal
      v-model:open="createVisible"
      title="新增周调度"
      :width="1180"
      :maskClosable="false"
      :confirm-loading="createLoading"
      @cancel="closeCreate"
    >
      <div class="create-layout">
        <div class="create-left">
          <a-form layout="inline" class="case-search-form">
            <a-form-item label="案件名称">
              <a-input v-model:value="caseQuery.caseName" placeholder="关键字模糊搜索" allowClear style="width: 160px" />
            </a-form-item>
            <a-form-item label="案件编号">
              <a-input v-model:value="caseQuery.caseNo" placeholder="案件编号" allowClear style="width: 140px" />
            </a-form-item>
            <a-form-item>
              <a-button type="primary" @click="searchCases">搜索</a-button>
            </a-form-item>
          </a-form>
          <a-table
            size="small"
            :dataSource="caseTableData"
            :columns="caseColumns"
            rowKey="caseId"
            :pagination="false"
            :loading="caseLoading"
            :row-selection="{ selectedRowKeys: selectedCaseIds, onChange: onSelectCases }"
            :scroll="{ y: 280 }"
            bordered
          />
          <div class="smart-query-table-page">
            <a-pagination
              size="small"
              :pageSize="caseQuery.pageSize"
              v-model:current="caseQuery.pageNum"
              :total="casePagination.total"
              @change="onCasePageChange"
              :show-total="(total) => `共${total}条`"
            />
          </div>
        </div>
        <div class="create-right">
          <div class="paper-preview">
            <WeeklyScheduleMinutes
              :form="createForm"
              :cases="selectedCases"
              :members="selectedMembers"
              editable
            />
          </div>
          <div class="member-block">
            <div class="member-header">
              <span>参加调度人员</span>
              <a-button size="small" @click="openEmployeeSelect">选择人员</a-button>
            </div>
            <div class="member-tags">
              <a-tag v-for="item in selectedMembers" :key="item.employeeId" closable @close="removeMember(item.employeeId)">
                {{ item.actualName }}
              </a-tag>
              <span v-if="!selectedMembers.length" class="empty-hint">请勾选参加调度人员进行推送</span>
            </div>
          </div>
        </div>
      </div>
      <template #footer>
        <a-button @click="closeCreate">取消</a-button>
        <a-button @click="submitCreate(false)" :loading="createLoading" v-privilege="'weekly-schedule:add'">保存草稿</a-button>
        <a-button type="primary" @click="submitCreate(true)" :loading="createLoading" v-privilege="'weekly-schedule:push'">推送</a-button>
      </template>
    </a-modal>

    <EmployeeTableSelectModal ref="selectEmployeeModal" @selectData="onSelectEmployees" />

    <a-drawer v-model:open="detailVisible" title="周调度详情" placement="right" :width="780">
      <div class="paper-preview" v-if="currentRecord">
        <div class="meta-line">调度编号：{{ currentRecord.scheduleNo }}　状态：{{ currentRecord.statusName }}　创建人：{{ currentRecord.createUserName || '-' }}</div>
        <WeeklyScheduleMinutes
          :form="currentRecord"
          :cases="currentRecord.caseList || []"
          :members="currentRecord.memberList || []"
        />
        <div class="content-label">确认进度</div>
        <a-tag v-for="item in currentRecord.memberList || []" :key="item.employeeId" :color="item.confirmedFlag ? 'success' : 'warning'">
          {{ item.employeeName }}{{ item.confirmedFlag ? '（已确认）' : '（待确认）' }}
        </a-tag>
        <div class="detail-actions">
          <a-popconfirm v-if="currentRecord.canConfirm" title="确认调度内容后不可更改，确定确认？" @confirm="handleConfirm(currentRecord)">
            <a-button type="primary" v-privilege="'weekly-schedule:confirm'">确认</a-button>
          </a-popconfirm>
          <a-button v-if="currentRecord.canPush" v-privilege="'weekly-schedule:push'" @click="handlePush(currentRecord)">推送</a-button>
          <a-button v-if="currentRecord.canPrint" v-privilege="'weekly-schedule:print'" @click="printWeeklySchedule(currentRecord)">打印</a-button>
        </div>
      </div>
    </a-drawer>
  </div>
</template>

<script setup>
import { reactive, ref, onMounted } from 'vue';
import { message } from 'ant-design-vue';
import { SearchOutlined, ReloadOutlined, PlusOutlined } from '@ant-design/icons-vue';
import _ from 'lodash';
import dayjs from 'dayjs';
import TableOperator from '/@/components/support/table-operator/index.vue';
import EmployeeTableSelectModal from '/@/components/system/employee-table-select-modal/index.vue';
import { PAGE_SIZE_OPTIONS } from '/@/constants/common-const';
import { TABLE_ID_CONST } from '/@/constants/support/table-id-const';
import { smartSentry } from '/@/lib/smart-sentry';
import { weeklyScheduleApi } from '/@/api/business/case-management/weekly-schedule-api.js';
import { employeeApi } from '/@/api/system/employee-api';
import {
  WEEKLY_SCHEDULE_STATUS_ENUM,
  getWeeklyScheduleStatusName,
  getWeeklyScheduleStatusColor,
} from '/@/constants/business/case-management/case-supervision-const.js';
import { printWeeklySchedule } from '/@/utils/print-weekly-schedule.js';
import WeeklyScheduleMinutes from './weekly-schedule-minutes.vue';
import { useUserStore } from '/@/store/modules/system/user';

const statusOptions = Object.values(WEEKLY_SCHEDULE_STATUS_ENUM);
const listTab = ref(false);

const columns = ref([
  { title: '调度编号', dataIndex: 'scheduleNo', width: 160 },
  { title: '调度内容', dataIndex: 'scheduleContent', width: 260, ellipsis: true },
  { title: '案件数', dataIndex: 'caseCount', width: 80, align: 'center' },
  { title: '确认进度', dataIndex: 'progress', width: 100, align: 'center' },
  { title: '状态', dataIndex: 'status', width: 100, align: 'center' },
  { title: '创建人', dataIndex: 'createUserName', width: 100 },
  { title: '创建时间', dataIndex: 'createTime', width: 160 },
  { title: '操作', dataIndex: 'action', fixed: 'right', width: 200 },
]);

const queryFormState = {
  scheduleNo: '',
  status: undefined,
  pendingMine: false,
  pageNum: 1,
  pageSize: 10,
};
const queryForm = reactive(_.cloneDeep(queryFormState));
const tableLoading = ref(false);
const tableData = ref([]);
const pagination = reactive({ total: 0 });

const createVisible = ref(false);
const createLoading = ref(false);
const userStore = useUserStore();
const createForm = reactive({
  meetingTime: undefined,
  meetingPlace: '',
  scheduleUnit: '',
  hostName: '',
  recorderName: '',
});
const selectedCases = ref([]);
const selectedMembers = ref([]);
const employeeMap = ref([]);
const selectEmployeeModal = ref();

const caseQuery = reactive({ caseNo: '', caseName: '', pageNum: 1, pageSize: 8 });
const caseTableData = ref([]);
const casePagination = reactive({ total: 0 });
const caseLoading = ref(false);
const caseColumns = [
  { title: '案件名称', dataIndex: 'caseName', ellipsis: true },
  { title: '案件编号', dataIndex: 'caseNo', width: 140 },
  { title: '主办民警', dataIndex: 'handlerName', width: 90 },
  { title: '办案单位', dataIndex: 'handleDept', width: 130, ellipsis: true },
];

const selectedCaseIds = ref([]);
const detailVisible = ref(false);
const currentRecord = ref(null);

function resetQuery() {
  const pageSize = queryForm.pageSize;
  Object.assign(queryForm, _.cloneDeep(queryFormState));
  queryForm.pageSize = pageSize;
  listTab.value = false;
  queryData();
}

function onSearch() {
  queryForm.pageNum = 1;
  queryData();
}

function onTabChange() {
  queryForm.pendingMine = listTab.value;
  queryForm.pageNum = 1;
  queryData();
}

async function queryData() {
  queryForm.pendingMine = listTab.value;
  tableLoading.value = true;
  try {
    const res = await weeklyScheduleApi.query(queryForm);
    tableData.value = res.data?.list || [];
    pagination.total = res.data?.total || 0;
  } catch (e) {
    smartSentry.captureError(e);
  } finally {
    tableLoading.value = false;
  }
}

function onPageChange(page, pageSize) {
  queryForm.pageNum = page;
  queryForm.pageSize = pageSize;
  queryData();
}

function emptyCreateForm() {
  createForm.meetingTime = undefined;
  createForm.meetingPlace = '';
  createForm.scheduleUnit = userStore.departmentName || '';
  createForm.hostName = '';
  createForm.recorderName = '';
}

async function openCreate() {
  emptyCreateForm();
  selectedCases.value = [];
  selectedCaseIds.value = [];
  selectedMembers.value = [];
  createVisible.value = true;
  await loadEmployees();
  await searchCases();
}

function closeCreate() {
  createVisible.value = false;
}

async function searchCases() {
  caseQuery.pageNum = 1;
  await loadCasePage();
}

async function loadCasePage() {
  caseLoading.value = true;
  try {
    const res = await weeklyScheduleApi.searchCase(caseQuery);
    caseTableData.value = res.data?.list || [];
    casePagination.total = res.data?.total || 0;
  } catch (e) {
    smartSentry.captureError(e);
  } finally {
    caseLoading.value = false;
  }
}

function onCasePageChange(page) {
  caseQuery.pageNum = page;
  loadCasePage();
}

function onSelectCases(keys) {
  const map = new Map(selectedCases.value.map((item) => [item.caseId, item]));
  caseTableData.value.forEach((row) => {
    const existing = map.get(row.caseId);
    map.set(row.caseId, {
      ...row,
      itemContent: existing?.itemContent || '',
    });
  });
  selectedCases.value = keys.map((id) => map.get(id)).filter(Boolean);
  selectedCaseIds.value = keys;
}

async function loadEmployees() {
  try {
    const res = await employeeApi.queryAll();
    employeeMap.value = res.data || [];
  } catch (e) {
    smartSentry.captureError(e);
  }
}

function openEmployeeSelect() {
  selectEmployeeModal.value?.showModal(selectedMembers.value.map((item) => item.employeeId));
}

function onSelectEmployees(ids) {
  const list = selectedMembers.value.slice();
  (ids || []).forEach((id) => {
    if (list.some((item) => item.employeeId === id)) {
      return;
    }
    const emp = employeeMap.value.find((item) => item.employeeId === id);
    list.push({ employeeId: id, actualName: emp?.actualName || String(id) });
  });
  selectedMembers.value = list;
}

function removeMember(employeeId) {
  selectedMembers.value = selectedMembers.value.filter((item) => item.employeeId !== employeeId);
}

async function submitCreate(pushFlag) {
  if (!selectedCases.value.length) {
    message.warning('请勾选调度案件');
    return;
  }
  const itemContentList = selectedCases.value.map((item) => item.itemContent || '');
  if (pushFlag && !itemContentList.some((text) => String(text).trim())) {
    message.warning('请输入调度内容');
    return;
  }
  if (pushFlag && !selectedMembers.value.length) {
    message.warning('请勾选参加调度人员');
    return;
  }
  createLoading.value = true;
  try {
    await weeklyScheduleApi.create({
      caseIdList: selectedCases.value.map((item) => item.caseId),
      itemContentList,
      meetingTime: createForm.meetingTime,
      meetingPlace: createForm.meetingPlace,
      scheduleUnit: createForm.scheduleUnit,
      hostName: createForm.hostName,
      recorderName: createForm.recorderName,
      memberIdList: selectedMembers.value.map((item) => item.employeeId),
      pushFlag,
    });
    message.success(pushFlag ? '已推送，等待参加人员确认' : '草稿已保存');
    closeCreate();
    queryData();
  } catch (e) {
    smartSentry.captureError(e);
  } finally {
    createLoading.value = false;
  }
}

async function openDetail(record) {
  try {
    const res = await weeklyScheduleApi.detail(record.scheduleId);
    currentRecord.value = res.data;
    detailVisible.value = true;
  } catch (e) {
    smartSentry.captureError(e);
  }
}

async function handlePush(record) {
  try {
    const res = await weeklyScheduleApi.push(record.scheduleId);
    message.success(res.msg || res.data || '已推送');
    queryData();
    if (detailVisible.value) {
      openDetail(record);
    }
  } catch (e) {
    smartSentry.captureError(e);
  }
}

async function handleConfirm(record) {
  try {
    const res = await weeklyScheduleApi.confirm(record.scheduleId);
    message.success(res.msg || res.data || '确认成功');
    queryData();
    if (detailVisible.value) {
      openDetail(record);
    }
  } catch (e) {
    smartSentry.captureError(e);
  }
}

async function handlePrint(record) {
  try {
    const res = await weeklyScheduleApi.detail(record.scheduleId);
    printWeeklySchedule(res.data);
  } catch (e) {
    smartSentry.captureError(e);
  }
}

function formatTime(value) {
  if (!value) {
    return '-';
  }
  return dayjs(value).isValid() ? dayjs(value).format('YYYY-MM-DD HH:mm') : value;
}

onMounted(() => {
  queryData();
});
</script>

<style lang="less" scoped>
.weekly-schedule-container {
  padding: 16px;

  .section-card {
    background: white;
    border-radius: 8px;
    box-shadow: 0 2px 8px rgba(0, 0, 0, 0.08);
    padding: 16px;
    margin-bottom: 16px;
  }

  .list-tab {
    margin-left: 12px;
  }

  :deep(.smart-table-operate) {
    display: flex;
    gap: 4px;
    flex-wrap: wrap;
  }
}

.create-layout {
  display: flex;
  gap: 16px;
  min-height: 460px;
}

.create-left,
.create-right {
  flex: 1;
  min-width: 0;
}

.case-search-form {
  margin-bottom: 8px;
}

.paper-preview {
  border: 1px solid #e8e8e8;
  border-radius: 6px;
  padding: 12px;
  background: #fafafa;
  max-height: 560px;
  overflow: auto;
}

.case-block {
  border: 1px solid #f0f0f0;
  background: #fff;
  padding: 8px 12px;
  margin-bottom: 8px;
  line-height: 1.9;
}

.label {
  display: inline-block;
  width: 80px;
  color: #595959;
}

.red-field {
  color: #cf1322;
  font-weight: 600;
}

.content-label {
  margin: 8px 0 6px;
  font-weight: 600;
}

.content-text {
  white-space: pre-wrap;
  min-height: 48px;
}

.empty-hint {
  color: #8c8c8c;
  font-size: 13px;
}

.member-block {
  margin-top: 12px;
}

.member-header {
  display: flex;
  justify-content: space-between;
  align-items: center;
  margin-bottom: 8px;
}

.member-tags {
  min-height: 32px;
}

.meta-line {
  line-height: 2;
}

.detail-actions {
  margin-top: 16px;
  display: flex;
  gap: 8px;
}
</style>