caseEditor/src/app/fire/view/dispatch/index.vue

<template>
  <Header :pagging="pagging" :isTeached="isTeached" />
  <List :pagging="pagging" :checkPerm="isTeached ? 'cancel' : 'teach'">
    <template v-slot:tableCtrl>
      <template v-if="isTeached">
        <el-button
          type="primary"
          @click="revokeTeaching()"
          v-pdpath="'cancel'"
          :class="{ disabled: pagging.state.table.selectRows.length }"
        >
          撤销教学
        </el-button>
      </template>
      <template v-else>
        <el-button type="primary" @click="addHandler" v-pdpath="'add'">
          新增火调项目
        </el-button>
        <el-button type="primary" @click="setTeaching" v-pdpath="'teach'">
          设为教学项目
        </el-button>
      </template>
    </template>

    <template v-slot:appendColumn v-if="!isTeached">
      <el-table-column label="教学项目" v-slot:default="{ row }: { row: Fire }">
        {{ row.isTeached ? "是" : "否" }}
      </el-table-column>
    </template>

    <template v-slot:rowCtrl="{ row }: { row: Fire }">
      <template v-if="isTeached">
        <span class="oper-span" @click="gotoQuery(row.caseId)" v-pdpath="['view']">
          查看
        </span>
        <span
          class="oper-span"
          @click="showMessageHandler(row)"
          v-pdpath="['message:look']"
          >留言
        </span>
      </template>
      <template v-else>
        <CaseEditMenu
          :prev-menu="[
            {
              key: 'info',
              label: '火调信息',
              onClick: () => editHandler(row),
            },
          ]"
          :caseId="row.caseId"
          v-if="row.caseId"
        />
        <span class="oper-span" @click="gotoQuery(row.caseId)" v-pdpath="['view']">
          查看
        </span>
        <span
          class="oper-span"
          @click="pagging.del(row)"
          style="color: var(--primaryColor)"
          v-pdpath="['del']"
        >
          删除
        </span>
      </template>
    </template>
  </List>
</template>

<script setup lang="ts">
import Header from "./header.vue";
import List from "./list.vue";
import { useFirePagging } from "./pagging";
import { Fire, revokeFireTeachs, setFireTeachs } from "@/app/fire/store/fire";
import CaseEditMenu from "@/view/case/editMenu.vue";
import { gotoQuery } from "@/view/case/help";
import { confirm } from "@/helper/message";
import { addFire, editFire, showLeaveMsgList, addLeaveMsg } from "./quisk";
import { shareCase } from "@/view/case/quisk";
import { ElMessage } from "element-plus";

const { pagging, isTeached } = useFirePagging();

// 撤销教学
const revokeTeaching = async (row?: Fire) => {
  if (!(await confirm("撤销教学，火调项目将不再显示在教学平台。（火调项目不会删除）"))) {
    return;
  }
  const items = row ? [row] : pagging.state.table.selectRows;
  await revokeFireTeachs(items.map(({ id }) => id));
  pagging.refresh();
  ElMessage.success(
    items.map(({ projectSn }) => projectSn).join(",") + "已成功从教学项目撤销"
  );
};

const showMessageHandler = (row: Fire) => {
  showLeaveMsgList({
    projectId: row.id,
    onAddLeaveMsg: () => addLeaveMsg({ projectId: row.id }),
  });
};

const setTeaching = async () => {
  let items = pagging.state.table.selectRows || [];
  if (!items.length) {
    return ElMessage.error("请先选择操作项");
  }
  if (
    !(await confirm(
      "将火调场景设为教学项目后，所有用户均可查看。设置后可在教学平台取消设置。"
    ))
  ) {
    return;
  }
  await setFireTeachs(items.map(({ id }) => id));
  pagging.refresh();
  ElMessage.success(
    "已成功设置" + items.length + "个火调项目到教学平台，已设置的项目不重复设置。"
  );
};

const editHandler = async (row: Fire) => {
  (await editFire({ fire: row })) && pagging.refresh();
};
const addHandler = async () => {
  (await addFire({})) && pagging.refresh();
};
</script>