ShippingService_WebApp/src/views/workStation/legalAidManage.vue

<template>
  <div class="full-container-p24">
    <div class="mb30 df aic">
      <el-input
        class="w200 mr10"
        v-model="term"
        placeholder="船名/船员姓名/联系电话"
        clearable
        @keyup.enter="getLegalAidRequestList"
        @clear="getLegalAidRequestList"
      />
      <el-button type="primary" @click="getLegalAidRequestList">搜索</el-button>
    </div>

    <el-table border :data="tableData" stripe style="width: 100%">
      <el-table-column align="center" type="index" label="序号" width="80" />
      <el-table-column
        align="center"
        prop="shipName"
        label="船名"
        min-width="120"
      />
      <el-table-column
        align="center"
        prop="shipOwnerName"
        label="船员姓名"
        min-width="120"
      />
      <el-table-column
        align="center"
        prop="contactPhone"
        label="联系电话"
        min-width="120"
      />
      <el-table-column
        align="center"
        prop="requestContent"
        label="援助内容"
        min-width="200"
      />
      <el-table-column
        align="center"
        prop="createTime"
        label="申请日期"
        min-width="120"
      >
        <template v-slot="scope">
          {{ subTimeStr(scope.row.createTime, 10) }}
        </template>
      </el-table-column>
      <el-table-column align="center" label="操作" width="120">
        <template #default="scope">
          <el-button type="primary" text @click="showDetail(scope.row)">
            查看更多
          </el-button>
        </template>
      </el-table-column>
    </el-table>

    <div class="df aic jcfe mt40 mr20">
      <el-pagination
        :current-page="currentPage"
        @current-change="pageChange"
        background
        layout="prev, pager, next"
        :total="total"
      />
    </div>

    <el-dialog v-model="dialogVisible" title="法律援助详情" width="400px">
      <el-descriptions :column="1" border>
        <el-descriptions-item width="40px" label="船名">
          {{ currentRow.shipName }}
        </el-descriptions-item>
        <el-descriptions-item label="船员姓名">
          {{ currentRow.shipOwnerName }}
        </el-descriptions-item>
        <el-descriptions-item label="联系电话">
          {{ currentRow.contactPhone }}
        </el-descriptions-item>
        <el-descriptions-item label="援助内容">
          {{ currentRow.requestContent }}
        </el-descriptions-item>
        <el-descriptions-item label="申请日期">
          {{ subTimeStr(currentRow.createTime) }}
        </el-descriptions-item>
      </el-descriptions>
      <div class="df jcfe mt30">
        <el-button type="primary" @click="dialogVisible = false">
          关闭
        </el-button>
      </div>
    </el-dialog>
  </div>
</template>

<script setup>
import { ref, onMounted } from "vue";
import { ElMessage } from "element-plus";
import api from "../../apis/fetch";
import { subTimeStr } from "../../utils/utils";

const tableData = ref([]);
const total = ref(0);
const currentPage = ref(1);
const term = ref("");
const dialogVisible = ref(false);
const currentRow = ref({});

async function getLegalAidRequestList() {
  try {
    const { data } = await api.getLegalAidRequestList({
      currentPage: currentPage.value,
      size: 10,
      term: term.value,
    });
    if (data.status === 0) {
      tableData.value = data.result;
      total.value = data.total;
    } else {
      tableData.value = [];
      total.value = 0;
    }
  } catch (error) {
    ElMessage.error("获取数据失败");
  }
}

function pageChange(page) {
  currentPage.value = page;
  getLegalAidRequestList();
}

function showDetail(row) {
  currentRow.value = row;
  dialogVisible.value = true;
}

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