supervision-vue/src/views/rightsComfort/Rights.vue

<template>
    <div class="container">
        <header class="mb-20">
            <el-form :label-width="114">
                <el-row>
                    <el-col :span="6">
                        <el-form-item label="申请时间">
                            <date-time-range-picker-ext
                                v-model="query.applyDate"
                            />
                        </el-form-item>
                    </el-col>
                    <el-col :span="6">
                        <el-form-item label="事发时间">
                            <date-time-range-picker-ext
                                v-model="query.happenTime"
                            />
                        </el-form-item>
                    </el-col>
                    <el-col :span="6">
                        <el-form-item label="姓名">
                            <el-input
                                placeholder="请输入姓名"
                                v-model="query.applicantEmpName"
                            />
                        </el-form-item>
                    </el-col>
                    <el-col :span="6">
                        <el-form-item label="申请人单位">
                            <depart-tree-select v-model="query.departId" />
                        </el-form-item>
                    </el-col>
                </el-row>
            </el-form>
            <div class="flex end">
                <div>
                    <el-button type="primary" @click="getList">
                        <template #icon>
                            <icon name="el-icon-Search" />
                        </template>
                        查询</el-button
                    >
                    <el-button @click="reset">重置</el-button>
                </div>
            </div>
        </header>
        <div class="table-container">
            <el-table :data="list">
                <el-table-column
                    label="申请人姓名"
                    prop="applicantEmpName"
                    width="100"
                />
                <el-table-column
                    label="申请人警号"
                    prop="applicantEmpNo"
                    width="100"
                />
                <el-table-column
                    label="事发时间"
                    prop="happenTime"
                    width="160"
                />
                <el-table-column label="申请人单位" prop="departName" width="180" show-overflow-tooltip />
                <el-table-column label="案件编号" prop="caseNumber" width="200" />
                <el-table-column label="案件经过" prop="factReason" show-overflow-tooltip />
                <el-table-column label="状态" width="100">
                    <template #default="{ row }">
                        <el-tag type="primary">{{
                            getDictLable(dict.comfortStatus, row.rpcStatus)
                        }}</el-tag>
                    </template>
                </el-table-column>
                <el-table-column label="操作" width="200">
                    <template #default="{ row }">
                        <el-button
                            link
                            type="primary"
                            @click="handleDetail(row)"
                            >查看</el-button
                        >
                        <el-button
                            link
                            type="danger"
                            @click="handleDelete(row)"
                            >删除</el-button
                        >
                    </template>
                </el-table-column>
            </el-table>
        </div>
        <div class="flex end mt-8">
            <el-pagination
                @size-change="getList"
                @current-change="getList"
                :page-sizes="[10, 20, 50]"
                v-model:page-size="query.size"
                v-model:current-page="query.current"
                layout="total, sizes, prev, pager, next"
                :total="total"
            >
            </el-pagination>
        </div>
    </div>
  说明：维权记录，展示各单位申请的维权记录。
    <el-dialog title="维权详情" v-model="show" width="50vw">
        <div class="dialog-container">
            <div class="row mt-10">
                <div class="col col-12">
                    <label>申请人姓名</label>
                    <span>{{ activeRow.applicantEmpName }}</span>
                </div>
                <div class="col col-12">
                    <label>申请人警号</label>
                    <span>{{ activeRow.applicantEmpNo }}</span>
                </div>
                <div class="col col-12">
                    <label>事发时间</label>
                    <span>{{ activeRow.happenTime }}</span>
                </div>
                <div class="col col-12">
                    <label>案件编号</label>
                    <span>{{ activeRow.caseNumber || '/' }}</span>
                </div>
                <div class="col col-12">
                    <label>状态</label>
                    <span>{{
                        getDictLable(
                            dict.comfortStatus,
                            activeRow.rpcStatus
                        )
                    }}</span>
                </div>
            </div>
            <div class="row mt-10" style="margin-bottom: 60px">
                <div class="col col-24">
                    <label>案件经过</label>
                    <span>{{ activeRow.factReason }}</span>
                </div>
            </div>
        </div>
    </el-dialog>

</template>
<script setup>
import moment from "moment";
import { listRights,delRights } from "@/api/rightsComfort/rights";
import { delComfort } from "@/api/rightsComfort/comfort";
import { listPolice } from "@/api/system/police";
import { getDictLable } from "@/utils/util";
import feedback from "@/utils/feedback";

import useCatchStore from "@/stores/modules/catch";

const catchStore = useCatchStore();
const dict = catchStore.getDicts([
    "comfortStatus"
]);

const list = ref([]);
const query = ref({
    current: 1,
    size: 10,
    code:'2'
});
const total = ref(0);
function getList() {
    listRights(query.value).then((data) => {
        list.value = data.records;
        total.value = data.total;
    });
}

function reset() {
    query.value = {
        current: 1,
        size: 10,
    };
    getList();
}

getList();

const actionShow = ref(false);
const activeRpcId = ref(false)

function handleShow(row) {
    actionShow.value = true
    activeRpcId.value = row.rpcId
}

const handleDelete = async (row) => {
    await feedback.confirm(`确定要删除该数据？`);
    // await delComfort(row.rpcId);
    console.log('row.id',row)
    await delRights(row.personId)
    feedback.msgSuccess("删除成功");
    getList();
};

const activeRow = ref({})
const show = ref(false)
const handleDetail = (row) => {
    activeRow.value = row
    show.value = true
};
</script>
<style lang="scss" scoped>
h5 {
    margin: 10px 0;
}
</style>