tba-hzz-xc/gw-ui/src/views/hlgl/wps/index.vue

<template>
  <div class="supervise-page">
    <!-- 搜索区域 + 操作按钮 -->
    <div class="search-wrapper" v-show="showSearch">
      <div class="search-row">
        <el-form :model="queryParams" :inline="true" class="search-form">
          <el-form-item label="项目名称">
            <el-input
              v-model="queryParams.projectName"
              placeholder="请输入项目名称"
              clearable
              style="width: 160px"
              @keyup.enter="getList"
            />
          </el-form-item>
          <el-form-item label="开始时间">
            <el-date-picker
              v-model="queryParams.startDate"
              type="date"
              placeholder="开始时间"
              value-format="YYYY-MM-DD HH:mm:ss"
              style="width: 150px"
            />
          </el-form-item>
          <el-form-item label="结束时间">
            <el-date-picker
              v-model="queryParams.endDate"
              type="date"
              placeholder="结束时间"
              value-format="YYYY-MM-DD HH:mm:ss"
              style="width: 150px"
            />
          </el-form-item>
          <el-form-item>
            <el-button type="primary" icon="Search" @click="getList"
              >搜索</el-button
            >
            <el-button icon="Refresh" @click="resetQuery">重置</el-button>
          </el-form-item>
        </el-form>
        <div class="right-actions">
          <el-button type="primary" plain icon="Plus" @click="handleAdd"
            >新增督查</el-button
          >
          <right-toolbar
            v-model:showSearch="showSearch"
            @queryTable="getList"
          />
        </div>
      </div>
    </div>

    <!-- 表格区域 -->
    <div class="table-wrapper">
      <el-table
        v-loading="loading"
        :data="wpsList"
        border
        stripe
        :header-cell-style="headerCellStyle"
        class="data-table"
      >
        <el-table-column label="序号" type="index" width="60" align="center" />
        <el-table-column
          label="项目名称"
          prop="sProjectName"
          :show-overflow-tooltip="true"
          min-width="160"
          align="center"
        />
        <el-table-column
          label="督察情况"
          prop="supervision"
          :show-overflow-tooltip="true"
          min-width="180"
          align="center"
        />
        <el-table-column
          label="开始时间"
          prop="startDate"
          width="160"
          align="center"
        />
        <el-table-column
          label="结束时间"
          prop="endDate"
          width="160"
          align="center"
        />
        <el-table-column label="操作" align="center" width="160" fixed="right">
          <template #default="scope">
            <div class="action-buttons">
              <el-button
                link
                type="primary"
                icon="Edit"
                @click="handleEdit(scope.row)"
                >修改</el-button
              >
              <el-button
                link
                type="danger"
                icon="Delete"
                @click="handleDelete(scope.row)"
                >删除</el-button
              >
            </div>
          </template>
        </el-table-column>
      </el-table>

      <!-- 分页 -->
      <div class="pagination-wrap" v-show="total > 0">
        <pagination
          :total="total"
          v-model:page="pageNum"
          v-model:limit="pageSize"
          @pagination="getList"
        />
      </div>
    </div>

    <!-- 编辑对话框 -->
    <el-dialog
      :title="dialogTitle"
      v-model="dialogVisible"
      width="650px"
      append-to-body
      :close-on-click-modal="false"
      class="form-dialog"
    >
      <el-form
        ref="formRef"
        :model="form"
        :rules="formRules"
        label-width="100px"
        class="project-form"
      >
        <div class="form-section">
          <div class="section-title">基本信息</div>
          <el-row :gutter="20">
            <el-col :span="24">
              <el-form-item label="关联项目" prop="smId">
                <el-select
                  v-model="form.smId"
                  placeholder="请选择关联项目"
                  filterable
                  clearable
                  style="width: 100%"
                  :loading="projectLoading"
                  @change="handleProjectChange"
                >
                  <el-option
                    v-for="item in riverProjectOptions"
                    :key="item.guid"
                    :label="item.sProjectName"
                    :value="item.guid"
                  />
                </el-select>
              </el-form-item>
            </el-col>
            <el-col :span="24">
              <el-form-item label="项目名称" prop="sProjectName">
                <el-input
                  v-model="form.sProjectName"
                  placeholder="请输入项目名称"
                />
              </el-form-item>
            </el-col>
          </el-row>
        </div>

        <div class="form-section">
          <div class="section-title">督察信息</div>
          <el-row :gutter="20">
            <el-col :span="24">
              <el-form-item label="督察情况" prop="supervision">
                <el-input
                  v-model="form.supervision"
                  type="textarea"
                  :rows="4"
                  placeholder="请输入督察情况"
                />
              </el-form-item>
            </el-col>
            <el-col :span="12">
              <el-form-item label="开始时间" prop="startDate">
                <el-date-picker
                  v-model="form.startDate"
                  type="datetime"
                  value-format="YYYY-MM-DD HH:mm:ss"
                  placeholder="选择开始时间"
                  style="width: 100%"
                />
              </el-form-item>
            </el-col>
            <el-col :span="12">
              <el-form-item label="结束时间" prop="endDate">
                <el-date-picker
                  v-model="form.endDate"
                  type="datetime"
                  value-format="YYYY-MM-DD HH:mm:ss"
                  placeholder="选择结束时间"
                  style="width: 100%"
                />
              </el-form-item>
            </el-col>
          </el-row>
        </div>
      </el-form>

      <template #footer>
        <div class="dialog-footer">
          <el-button @click="dialogVisible = false">取消</el-button>
          <el-button type="primary" @click="submitForm" :loading="submitLoading"
            >确定</el-button
          >
        </div>
      </template>
    </el-dialog>
  </div>
</template>

<script setup>
import { ref, reactive, onMounted } from "vue";
import { listWps, addWps, updateWps, delWps } from "@/api/hzz/wps";
import { getAllProject } from "@/api/hzz/riverproject";
import { ElMessage, ElMessageBox } from "element-plus";

const showSearch = ref(true);
const loading = ref(false);
const submitLoading = ref(false);
const total = ref(0);
const pageNum = ref(1);
const pageSize = ref(10);
const wpsList = ref([]);
const queryParams = ref({ projectName: "", startDate: "", endDate: "" });

const riverProjectOptions = ref([]);
const projectLoading = ref(false);

const getRiverProjectOptions = async () => {
  projectLoading.value = true;
  try {
    const res = await getAllProject();
    riverProjectOptions.value = res.data || [];
  } finally {
    projectLoading.value = false;
  }
};

const handleProjectChange = (guid) => {
  const selected = riverProjectOptions.value.find((item) => item.guid === guid);
  form.sProjectName = selected ? selected.sProjectName : "";
};

const dialogVisible = ref(false);
const dialogTitle = ref("");
const formRef = ref(null);
const form = reactive({});
const formRules = {
  supervision: [
    { required: true, message: "督察情况不能为空", trigger: "blur" },
  ],
};

const headerCellStyle = {
  background: "#f5f7fa",
  color: "#333",
  fontWeight: "600",
  fontSize: "14px",
  textAlign: "center",
};

const getList = async () => {
  loading.value = true;
  try {
    const res = await listWps({
      ...queryParams.value,
      pageNum: pageNum.value,
      pageSize: pageSize.value,
    });
    wpsList.value = res.rows || [];
    total.value = res.total || 0;
  } finally {
    loading.value = false;
  }
};

const resetQuery = () => {
  queryParams.value = { projectName: "", startDate: "", endDate: "" };
  getList();
};

const handleAdd = () => {
  dialogTitle.value = "新增督查";
  Object.keys(form).forEach((k) => delete form[k]);
  dialogVisible.value = true;
};

const handleEdit = (row) => {
  dialogTitle.value = "修改督查";
  Object.assign(form, row);
  dialogVisible.value = true;
};

const handleDelete = async (row) => {
  try {
    await ElMessageBox.confirm(
      "确认删除该督查记录？删除后不可恢复。",
      "删除确认",
      {
        type: "warning",
        confirmButtonText: "确认删除",
        cancelButtonText: "取消",
      },
    );
    await delWps(row.guid);
    ElMessage.success("删除成功");
    getList();
  } catch {
    // 取消删除
  }
};

const submitForm = async () => {
  if (!formRef.value) return;

  try {
    await formRef.value.validate();
  } catch {
    ElMessage.warning("请完善必填信息");
    return;
  }

  submitLoading.value = true;
  try {
    if (form.guid) {
      await updateWps(form);
      ElMessage.success("修改成功");
    } else {
      await addWps(form);
      ElMessage.success("新增成功");
    }
    dialogVisible.value = false;
    getList();
  } catch {
    ElMessage.error("操作失败");
  } finally {
    submitLoading.value = false;
  }
};

onMounted(() => {
  getList();
  getRiverProjectOptions();
});
</script>

<style scoped>
.supervise-page {
  height: 100%;
  background: #f0f2f5;
  display: flex;
  flex-direction: column;
  padding: 16px;
  gap: 12px;
  overflow: hidden;
}

/* 搜索区域 */
.search-wrapper {
  background: #fff;
  padding: 16px 20px;
  border-radius: 10px;
  box-shadow: 0 1px 3px rgba(0, 0, 0, 0.06);
  flex-shrink: 0;
}
.search-row {
  display: flex;
  justify-content: space-between;
  align-items: center;
  flex-wrap: wrap;
  gap: 8px;
}
.search-form {
  display: flex;
  align-items: center;
  flex-wrap: wrap;
}
.search-form :deep(.el-form-item) {
  margin-bottom: 0;
  margin-right: 12px;
}
.search-form :deep(.el-input__wrapper) {
  border-radius: 6px;
}
.search-form :deep(.el-button) {
  border-radius: 6px;
}
.right-actions {
  display: flex;
  align-items: center;
  gap: 8px;
}
.right-actions .el-button {
  border-radius: 6px;
  font-weight: 500;
}

/* 表格区域 */
.table-wrapper {
  flex: 1;
  background: #fff;
  border-radius: 10px;
  box-shadow: 0 1px 3px rgba(0, 0, 0, 0.06);
  padding: 16px;
  display: flex;
  flex-direction: column;
  overflow: hidden;
}
.data-table {
  flex: 1;
  border-radius: 6px;
  overflow: hidden;
}
.data-table :deep(.el-table__body-wrapper) .el-table__row:hover {
  background-color: #f0f7ff !important;
}

:deep(.el-popper) {
  max-width: 800px !important;
}

.action-buttons {
  display: flex;
  justify-content: center;
  gap: 8px;
}
.action-buttons .el-button {
  font-size: 13px;
  padding: 4px 10px;
}
.pagination-wrap {
  padding-top: 12px;
  flex-shrink: 0;
}

/* 对话框 */
.form-dialog :deep(.el-dialog) {
  border-radius: 12px;
  overflow: hidden;
}
.form-dialog :deep(.el-dialog__header) {
  background: linear-gradient(135deg, #667eea, #764ba2);
  padding: 16px 24px;
  margin: 0;
  text-align: center;
}
.form-dialog :deep(.el-dialog__title) {
  color: #fff;
  font-size: 16px;
  font-weight: 600;
}
.form-dialog :deep(.el-dialog__headerbtn) {
  top: 16px;
}
.form-dialog :deep(.el-dialog__close) {
  color: #fff;
  font-size: 18px;
}
.form-dialog :deep(.el-dialog__close:hover) {
  color: #f0f0f0;
}
.form-dialog :deep(.el-dialog__body) {
  padding: 24px;
  max-height: 60vh;
  overflow-y: auto;
}
.form-dialog :deep(.el-dialog__footer) {
  padding: 16px 24px;
  border-top: 1px solid #f0f0f0;
  text-align: center;
}

/* 表单样式 */
.project-form .form-section {
  margin-bottom: 20px;
}
.project-form .form-section:last-child {
  margin-bottom: 0;
}
.section-title {
  font-size: 14px;
  font-weight: 600;
  color: #333;
  margin-bottom: 16px;
  padding-bottom: 8px;
  border-bottom: 2px solid #667eea;
  text-align: center;
}
.project-form :deep(.el-form-item__label) {
  font-weight: 500;
  color: #555;
}
.project-form :deep(.el-input__wrapper) {
  border-radius: 6px;
  transition: all 0.2s;
}
.project-form :deep(.el-textarea__inner) {
  border-radius: 6px;
}
.project-form :deep(.el-date-editor) .el-input__wrapper {
  border-radius: 6px;
}

/* 对话框底部按钮 */
.dialog-footer {
  display: flex;
  justify-content: center;
  gap: 12px;
}
.dialog-footer .el-button {
  border-radius: 6px;
  font-weight: 500;
  padding: 10px 24px;
}
</style>