integrated_traffic_vue/src/views/security_commitment/details.vue

<template>
  <div>
    <layout-card>
      <layout-table
        ref="tableRef"
        v-model:pagination="pagination"
        :data="list"
        @get-data="fnGetData"
      >
        <el-table-column label="序号" width="60">
          <template #default="{ $index }">
            {{ serialNumber(pagination, $index) }}
          </template>
        </el-table-column>
        <el-table-column prop="NAME" label="姓名" width="100"></el-table-column>
        <el-table-column
          prop="CORP_NAME"
          label="公司名称"
          width="150"
        ></el-table-column>
        <el-table-column
          prop="COMMITMENTNAME"
          label="名称"
          width="200"
        ></el-table-column>
        <el-table-column
          prop="EXPIRYDATE"
          label="到期日期"
          width="150"
        ></el-table-column>
        <el-table-column
          prop="CREATORNAME"
          label="上传人"
          width="150"
        ></el-table-column>
        <el-table-column
          prop="CREATETIME"
          label="上传时间"
          width="180"
        ></el-table-column>
        <el-table-column label="有效状态" width="180">
          <template #default="{ row }">
            <div v-if="row.VALIDSTATUS === '1'">正常</div>
            <div v-else-if="row.VALIDSTATUS === '2'">已失效</div>
          </template>
        </el-table-column>
        <el-table-column label="文件" width="300">
          <template #default="{ row }">
            <div @click="previewPdf(row.ATTACHMENT_ROUTE)">
              {{ fileName(row.ATTACHMENT_ROUTE) }}
              <el-button type="primary" text link class="ml-10">预览</el-button>
            </div>
          </template>
        </el-table-column>
        <el-table-column label="操作" width="150">
          <template #default="{ row }">
            <el-button
              type="primary"
              text
              link
              @click="
                fnAddOrEdit(row.SECURITYCOMMITMENT_ID, row.USER_ID, 'edit')
              "
            >
              编辑
            </el-button>
            <el-button
              text
              link
              type="danger"
              @click="deleteItem(row.SECURITYCOMMITMENT_ID)"
            >
              删除
            </el-button>
          </template>
        </el-table-column>
        <template #button>
          <el-button
            type="primary"
            @click="fnAddOrEdit('', $route.query.USER_ID, 'add')"
          >
            新增
          </el-button>
        </template>
      </layout-table>
    </layout-card>
    <add
      v-model:visible="data.addOrEditDialog.visible"
      v-model:form="data.addOrEditDialog.form"
      :type="data.addOrEditDialog.type"
      :loading="data.addOrEditDialog.loading"
      :options="[]"
      @get-data="fnResetPagination"
    />
    <layout-pdf
      v-if="pdfVisible"
      :src="pdfSrc"
      :visible="pdfVisible"
      @update:visible="pdfVisible = $event"
    ></layout-pdf>
  </div>
</template>

<script setup>
import { useRoute } from "vue-router";
import {
  deleteCommitmentView,
  getSafetyCommitmentList,
  getSafetyCommitmentUserList,
} from "@/request/traffic_safety_commitment.js";
import useListData from "@/assets/js/useListData.js";
import { serialNumber } from "@/assets/js/utils.js";
import { ElMessage, ElMessageBox } from "element-plus";
import { nextTick, reactive, ref } from "vue";
import Add from "@/views/security_commitment/components/add.vue";
import LayoutPdf from "@/components/pdf/index.vue";

const route = useRoute();

const { list, pagination, fnGetData, fnResetPagination } = useListData(
  getSafetyCommitmentUserList,
  {
    defaultSearchForm: {
      SECURITYCOMMITMENT_ID: route.query.SECURITYCOMMITMENT_ID,
      USER_ID: route.query.USER_ID,
    },
    immediate: true,
  }
);

const data = reactive({
  addOrEditDialog: {
    visible: false,
    type: "",
    loading: false,
    form: {},
  },
  viewDialog: {
    visible: false,
    info: {},
  },
});

const pdfVisible = ref(false); // 定义pdfVisible为响应式引用
const pdfSrc = ref(""); // 定义pdfSrc为响应式引用

function fileName(path) {
  return path.split("/").pop();
}

const fnAddOrEdit = async (
  SECURITYCOMMITMENT_ID = "",
  USER_ID = "",
  type = "add"
) => {
  data.addOrEditDialog.visible = true;
  data.addOrEditDialog.type = type;
  if (type === "edit" && SECURITYCOMMITMENT_ID && USER_ID) {
    const resData = await getSafetyCommitmentList({
      SECURITYCOMMITMENT_ID,
      USER_ID,
    });
    if (resData && resData.varList && resData.varList.length > 0) {
      const detail = resData.varList.find(
        (detail) => detail.USER_ID === USER_ID
      );
      data.addOrEditDialog.form = {
        ...detail,
        OPERATINGCOMPANY: detail.CORP_NAME,
      };
    }
  } else {
    data.addOrEditDialog.form = { USER_ID };
  }
  await nextTick();
};

// 删除事件
const deleteItem = async (value) => {
  await ElMessageBox.confirm(`确定要删除吗？`, {
    type: "warning",
  });
  await deleteCommitmentView({ SECURITYCOMMITMENT_ID: value });
  ElMessage.success("删除成功");
  fnGetData();
};
const previewPdf = (src) => {
  pdfSrc.value = src; // 设置PDF源地址
  pdfVisible.value = true; // 显示PDF预览对话框
};
</script>

<style scoped></style>