kd-aiot-frontend-ehs/src/views/DangerousWorkManagement/index.vue

<template>
  <div class="ele-body">
    <el-card shadow="never">
      <div>
        <!-- 搜索区域 -->
        <div class="search-area">
          <seek-page
            ref="seekPage"
            :seekList="seekList"
            @search="handleSearch"
            :formLength="4"
          />
        </div>

        <!-- 列表视图 -->
        <div class="list-view">
          <ele-pro-table
            ref="table"
            row-key="id"
            :columns="columns"
            :datasource="datasource"
            :cache-key="cacheKeyUrl"
            height="calc(100vh - 320px)"
            @columns-change="handleColumnChange"
            @selection-change="handleSelectionChange"
          >
            <template v-slot:toolbar>
              <div class="toolbar-left">
                <el-button
                  type="primary"
                  size="small"
                  icon="el-icon-plus"
                  @click="handleAdd"
                  >新增</el-button
                >
                <el-button
                  type="danger"
                  size="small"
                  icon="el-icon-delete"
                  :disabled="!selectedRows.length"
                  @click="handleBatchDelete"
                  >批量删除</el-button
                >
              </div>
            </template>
            <template v-slot:ticketCount="{ row }">
              <span>{{ row.ticketList?.length || '-' }}</span>
            </template>
            <template v-slot:action="{ row }">
              <div class="action-links">
                <el-link
                  type="primary"
                  :underline="false"
                  @click="handleWorkTicket(row)"
                  >作业票管理</el-link
                >
                <el-link
                  type="primary"
                  :underline="false"
                  @click="handleView(row)"
                  >查看</el-link
                >
                <el-link
                  type="primary"
                  :underline="false"
                  @click="handleEdit(row)"
                  >编辑</el-link
                >
                <el-link
                  type="danger"
                  :underline="false"
                  @click="handleDelete(row)"
                  >删除</el-link
                >
              </div>
            </template>
          </ele-pro-table>
        </div>
        <!-- 新增/编辑弹窗 -->
        <add ref="dialogRef" @reload="$refs.table.reload()" />

        <!-- 作业票管理弹窗 -->
        <work-ticket-dialog ref="ticketDialogRef" />
      </div>
    </el-card>
  </div>
</template>

<script>
  import add from './add.vue';
  import WorkTicketDialog from '@/views/DangerousWorkList/workTicketDialog.vue';
  import tabMixins from '@/mixins/tableColumnsMixin';
  import { page as getPage, remove, toSortParams } from '@/api/dangerousWork';
  export default {
    components: {
      add,
      WorkTicketDialog
    },
    mixins: [tabMixins],

    data() {
      return {
        // 表格选中的数据
        selectedRows: [],
        // 表格列配置
        columns: [
          {
            columnKey: 'selection',
            type: 'selection',
            width: 50,
            align: 'center',
            reserveSelection: true,
            fixed: 'left'
          },
          {
            columnKey: 'index',
            label: '序号',
            type: 'index',
            width: 60,
            align: 'center'
          },
          {
            prop: 'workCode',
            label: '作业编码',
            align: 'center',
            minWidth: 180,
            showOverflowTooltip: true
          },
          {
            prop: 'workName',
            label: '作业名称',
            align: 'center',
            minWidth: 180,
            showOverflowTooltip: true
          },
          {
            prop: 'applyDeptName',
            label: '申请单位',
            align: 'center',
            minWidth: 120
          },
          {
            prop: 'applicantName',
            label: '申请人',
            align: 'center',
            minWidth: 120,
            showOverflowTooltip: true
          },
          {
            prop: 'workLocation',
            label: '作业地点',
            align: 'center',
            minWidth: 150,
            showOverflowTooltip: true
          },
          {
            prop: 'startTime',
            label: '作业开始时间',
            align: 'center',
            minWidth: 160,
            sortable: true
          },
          {
            prop: 'endTime',
            label: '作业结束时间',
            align: 'center',
            minWidth: 160,
            sortable: true
          },
          {
            columnKey: 'action',
            label: '操作',
            width: 260,
            align: 'center',
            slot: 'action'
          }
        ],
        cacheKeyUrl: 'ehs-dangerousWork-list',
        // 是否已完成首次初始化（keep-alive 首次进入不重置，避免重复请求）
        inited: false
      };
    },
    computed: {
      seekList() {
        return [
          {
            label: '作业名称：',
            value: 'workName',
            type: 'input',
            width: 220,
            placeholder: '请输入作业名称'
          },
          {
            label: '作业编码：',
            value: 'workCode',
            type: 'input',
            width: 220,
            placeholder: '请输入作业编码'
          },
          {
            label: '申请人：',
            value: 'applicantName',
            type: 'input',
            width: 220,
            placeholder: '请输入申请人'
          },
          {
            label: '申请单位：',
            value: 'applyDeptId',
            type: 'deptSelect',
            width: 240,
            placeholder: '请选择申请单位'
          },
          {
            label: '作业开始时间：',
            value: 'startTime',
            type: 'date',
            dateType: 'datetimerange',
            width: 360,
            valueAr: ['startTimeBegin', 'startTimeEnd'],
            placeholder: '请选择作业开始时间'
          }
        ];
      }
    },
    mounted() {},
    // 每次进入菜单都回到初始值：页码第一页、搜索条件清空
    activated() {
      if (!this.inited) {
        this.inited = true;
        return;
      }
      this.resetSearch();
    },
    methods: {
      // 重置为初始值（页码、搜索条件、选中项）
      resetSearch() {
        this.clearSelection();
        if (this.$refs.seekPage) {
          // seek-page 的 reset 会清空条件并触发 search -> reload({ page: 1 })
          this.$refs.seekPage.reset();
        } else {
          this.$refs.table.reload({ page: 1, where: {} });
        }
      },
      // 作业票管理
      handleWorkTicket(row) {
        this.$refs.ticketDialogRef.open(row);
      },
      // 新增危险作业
      handleAdd() {
        this.$refs.dialogRef.open();
      },
      // 编辑
      handleEdit(row) {
        this.$refs.dialogRef.open(row, 'edit');
      },
      // 查看
      handleView(row) {
        this.$refs.dialogRef.open(row, 'view');
      },

      // 删除
      handleDelete(row) {
        this.$confirm(
          '确认删除吗？删除后该危险作业下的作业票将一并删除。',
          '提示',
          {
            confirmButtonText: '确定',
            cancelButtonText: '取消',
            type: 'warning'
          }
        )
          .then(() => {
            remove([row.id]).then(() => {
              this.$message.success('删除成功');
              this.clearSelection();
              this.$refs.table.reload();
            });
          })
          .catch(() => {});
      },
      // 多选
      handleSelectionChange(rows) {
        this.selectedRows = rows || [];
      },
      // 清空选中项
      clearSelection() {
        this.selectedRows = [];
        this.$refs.table && this.$refs.table.clearSelection();
      },
      // 批量删除
      handleBatchDelete() {
        const ids = this.selectedRows.map((row) => row.id);
        if (!ids.length) {
          this.$message.warning('请至少选择一条数据');
          return;
        }
        this.$confirm(
          `确认删除选中的 ${ids.length} 条危险作业吗？其下作业票将一并删除。`,
          '提示',
          {
            confirmButtonText: '确定',
            cancelButtonText: '取消',
            type: 'warning'
          }
        )
          .then(() => {
            remove(ids).then(() => {
              this.$message.success('删除成功');
              this.clearSelection();
              this.$refs.table.reload({ page: 1 });
            });
          })
          .catch(() => {});
      },
      // 搜索
      handleSearch(where) {
        this.$refs.table.reload({ page: 1, where });
      },

      // 表格数据源
      async datasource({ page, limit, where, order }) {
        const body = {
          ...where,
          ...toSortParams(order),
          pageNum: page,
          size: limit
        };
        // 去掉未填写的查询条件，避免空字符串传给后端类型转换报错
        Object.keys(body).forEach((key) => {
          if (
            body[key] === '' ||
            body[key] === null ||
            body[key] === undefined
          ) {
            delete body[key];
          }
        });
        return await getPage(body);
      }
    }
  };
</script>

<style lang="scss" scoped>
  .major-hazard-monitoring {
    padding: 15px;
    background-color: #f0f2f5;

    .full-height {
      height: 100%;
    }

    .tree-col,
    .table-col {
      height: 100%;
    }

    // 左侧树形卡片
    .tree-card {
      height: 100%;

      ::v-deep .el-card__body {
        height: 100%;
        padding: 0;
        display: flex;
        flex-direction: column;
      }

      .tree-title {
        padding: 15px;
        font-weight: bold;
        font-size: 14px;
        border-bottom: 1px solid #ebeef5;
        background-color: #fff;
      }

      .tree-content {
        flex: 1;
        overflow: auto;
        padding: 10px;

        ::v-deep .el-tree {
          .el-tree-node__content {
            height: 32px;
            line-height: 32px;
          }

          .el-tree-node.is-current > .el-tree-node__content {
            background-color: #f5f7fa;
            color: #409eff;
          }
        }
      }
    }

    // 右侧表格卡片
    .table-card {
      height: 100%;

      ::v-deep .el-card__body {
        height: 100%;
        padding: 15px;
        display: flex;
        flex-direction: column;
      }
    }

    // 搜索区域
    .search-area {
      margin-bottom: 15px;
      padding-bottom: 15px;
      border-bottom: 1px solid #ebeef5;
    }

    // 列表视图
    .list-view {
      flex: 1;
      overflow: hidden;

      ::v-deep .ele-pro-table {
        .el-table {
          border: 1px solid #ebeef5;
          border-radius: 4px;
        }
      }
    }

    // 工具栏
    ::v-deep .ele-pro-table .ele-pro-table-toolbar {
      display: flex;
      justify-content: space-between;
      align-items: center;
    }

    // 操作链接
    .action-links {
      display: flex;
      flex-wrap: wrap;
      justify-content: center;
      gap: 8px;

      .el-link {
        font-size: 12px;
      }
    }
  }
</style>