打卡13

<script setup>
import {ref} from 'vue'
import {getPolicyService} from "@/api/getPolicy.js";

import {ElMessage} from "element-plus"

const name = ref('');       //政策名称
const document = ref('');   //发文字号
const organ = ref('');      //发文机构
const text = ref('');       //全文检索
const selectedPolicyText = ref('');
const drawer = ref(false)

const policyData = ref([
    {
        name:'',
        organ:'',
        pubdata:'',
        type:'',
        text:''
    }
]);


//分页条数据模型
const pageNum = ref(1)//当前页
const total = ref(20)//总条数
const pageSize = ref(3)//每页条数

//当每页条数发生了变化，调用此函数
const onSizeChange = (size) => {
    pageSize.value = size;
    policyList();
}
//当前页码发生变化，调用此函数
const onCurrentChange = (num) => {
    pageNum.value = num;
    policyList();
}

//获取政策列表数据
const policyList = async () => {
    let params = {
        pageNum: pageNum.value,
        pageSize: pageSize.value,
        name:name.value ? name.value : null,
        document:document.value ? document.value : null,
        organ:organ.value ? organ.value : null,
        text:text.value ? text.value : null,
    }
    let result = await getPolicyService(params);
    total.value = result.data.total;
    policyData.value=result.data.items;

}
const openDrawer = (row) => {
    selectedPolicyText.value = row.text; // 将选中政策的文本内容赋值给selectedPolicyText
    drawer.value = true; // 打开对话框
}

</script>
<template>
    <el-form :inline="true" >
        <el-form-item label="政策名称">
            <el-input v-model="name" placeholder="请输入政策名称" clearable />
        </el-form-item>
        <el-form-item label="发文字号">
            <el-input v-model="document" placeholder="请输入发文字号" clearable />
        </el-form-item>
        <el-form-item label="发文机构">
            <el-input v-model="organ"  clearable />
        </el-form-item>
        <el-form-item label="全文检索">
            <el-input v-model="text"  clearable />
        </el-form-item>

        <el-form-item>
            <el-button type="primary" @click="policyList()">搜索</el-button>
        </el-form-item>
    </el-form>
    <!-- 政策列表 -->
    <el-table :data="policyData" style="width: 100%">
        <el-table-column label="政策名称" width="650" prop="name"></el-table-column>
        <el-table-column label="发文机构" width="200" prop="organ"></el-table-column>
        <el-table-column label="颁布日期" width="200" prop="pubdata"> </el-table-column>
        <el-table-column label="政策分类" width="200" prop="type"></el-table-column>
        <el-table-column label="操作" width="100">
            <template #default="{ row }">
                <el-button   plain type="primary" @click=openDrawer(row)>查看</el-button>
            </template>
        </el-table-column>
        <template #empty>
            <el-empty description="没有数据" />
        </template>

    </el-table>
    <!-- 分页条 -->
    <el-pagination v-model:current-page="pageNum" v-model:page-size="pageSize" :page-sizes="[3, 5, 10, 15]"
                   layout="jumper, total, sizes, prev, pager, next" background :total="total" @size-change="onSizeChange"
                   @current-change="onCurrentChange" style="margin-top: 20px; justify-content: flex-end" />

    <el-dialog v-model="drawer"  :with-header="false">
        <div v-html="selectedPolicyText"></div>

    </el-dialog>

</template>