248 lines
7.2 KiB
Vue
248 lines
7.2 KiB
Vue
<!-- 业主模块-签发人管理-列表 -->
|
|
<template>
|
|
<div class="MainBox">
|
|
<el-form :model="queryForm" inline class="card-box mb-4">
|
|
|
|
<div class="FlexBox" style="margin-bottom: 12px;">
|
|
<el-button type="primary" size="default" @click="handleAdd">新增签发人</el-button>
|
|
<el-button size="default">批量启用</el-button>
|
|
<el-button size="default">批量禁用</el-button>
|
|
<el-button size="default">导出清单</el-button>
|
|
</div>
|
|
|
|
<el-form-item label="姓名">
|
|
<el-input v-model="queryForm.userName" placeholder="请输入姓名"></el-input>
|
|
</el-form-item>
|
|
<el-form-item label="所属部门">
|
|
<el-select v-model="queryForm.departmentId" placeholder="请选择部门" clearable>
|
|
<el-option v-for="item in departmentList" :key="item.value" :label="item.label"
|
|
:value="item.value"></el-option>
|
|
</el-select>
|
|
</el-form-item>
|
|
<el-form-item label="角色">
|
|
<el-select v-model="queryForm.roleId" placeholder="请选择角色" clearable>
|
|
<el-option v-for="item in roleList" :key="item.value" :label="item.label"
|
|
:value="item.value"></el-option>
|
|
</el-select>
|
|
</el-form-item>
|
|
<el-form-item label="状态">
|
|
<el-select v-model="queryForm.status" placeholder="请选择状态" clearable>
|
|
<el-option v-for="item in StatusList" :key="item.value" :label="item.label"
|
|
:value="item.value"></el-option>
|
|
</el-select>
|
|
</el-form-item>
|
|
|
|
<el-form-item>
|
|
<el-button size="default">重置</el-button>
|
|
<el-button type="primary" size="default">查询</el-button>
|
|
</el-form-item>
|
|
</el-form>
|
|
|
|
<div class="card-box">
|
|
<el-table :data="tableData" class="mt-2" :loading="loading">
|
|
<el-table-column prop="userName" label="姓名"></el-table-column>
|
|
<el-table-column prop="departmentName" label="所属部门"></el-table-column>
|
|
<el-table-column prop="roleName" label="角色"></el-table-column>
|
|
<el-table-column prop="projectScope" label="负责项目范围"></el-table-column>
|
|
<el-table-column prop="phone" label="联系电话"></el-table-column>
|
|
<el-table-column prop="permissionDesc" label="权限说明"></el-table-column>
|
|
<el-table-column prop="status" label="状态">
|
|
<template #default="scope">
|
|
<el-tag :type="scope.row.status === '1' ? 'success' : 'danger'">
|
|
{{ scope.row.status === '1' ? '启用' : '禁用' }}
|
|
</el-tag>
|
|
</template>
|
|
</el-table-column>
|
|
<el-table-column label="操作" width="180">
|
|
<template #default="scope">
|
|
<el-button size="small" type="primary" link @click="handleEdit(scope.row)">编辑</el-button>
|
|
<el-button size="small" type="primary" link v-if="scope.row.status === '2'">启用</el-button>
|
|
<el-button size="small" type="primary" link v-else>禁用</el-button>
|
|
<el-button size="small" type="primary" link @click="handleDetail(scope.row)">查看详情</el-button>
|
|
</template>
|
|
</el-table-column>
|
|
</el-table>
|
|
|
|
<div class="pagination-container">
|
|
<span class="total-count">显示第 {{ (pageNum - 1) * pageSize + 1 }} 到 {{ pageNum * pageSize }} 条记录，共 {{
|
|
total }}
|
|
条</span>
|
|
<el-pagination v-model:current-page="pageNum" v-model:page-size="pageSize" :page-sizes="[5, 10, 20]"
|
|
:total="total" layout="prev, pager, next"></el-pagination>
|
|
</div>
|
|
</div>
|
|
<!-- 签证人编辑详情弹窗 -->
|
|
<DialogBox v-if="dialogShow" ref="dialogRef" :show="dialogShow" :CloseDialog="handleCancel" />
|
|
</div>
|
|
</template>
|
|
<script setup name="Index">
|
|
import { ref } from "vue";
|
|
import DialogBox from "./DialogBox.vue";
|
|
|
|
// 加载状态
|
|
const loading = ref(false);
|
|
|
|
// 查询表单数据
|
|
const queryForm = ref({
|
|
dateRange: [],
|
|
userName: "",
|
|
departmentId: "",
|
|
roleId: "",
|
|
status: ""
|
|
});
|
|
|
|
// 部门列表
|
|
const departmentList = ref([
|
|
{
|
|
label: "工程部",
|
|
value: "1"
|
|
},
|
|
{
|
|
label: "安全监督部",
|
|
value: "2"
|
|
},
|
|
{
|
|
label: "后勤管理部",
|
|
value: "3"
|
|
},
|
|
]);
|
|
|
|
// 角色列表
|
|
const roleList = ref([
|
|
{
|
|
label: "工作票签发人",
|
|
value: "1"
|
|
},
|
|
{
|
|
label: "危险作业票签发人",
|
|
value: "2"
|
|
},
|
|
{
|
|
label: "双签发人",
|
|
value: "3"
|
|
},
|
|
]);
|
|
|
|
|
|
// 状态列表
|
|
const StatusList = ref([
|
|
|
|
{
|
|
label: "启用",
|
|
value: "1"
|
|
},
|
|
{
|
|
label: "禁用",
|
|
value: "2"
|
|
},
|
|
]);
|
|
|
|
// 表格数据
|
|
const tableData = ref([
|
|
{
|
|
id: 1,
|
|
needBallheadNum: "1001",
|
|
projectName: "项目1",
|
|
returnStatus: "待审核",
|
|
returnUserName: "用户1",
|
|
submitEndTime: "2023-08-01 10:00:00",
|
|
userName: "张三",
|
|
departmentName: "工程部",
|
|
roleName: "工作票签发人",
|
|
projectScope: "项目1",
|
|
phone: "13800000000",
|
|
permissionDesc: "对项目1的工作票进行签发",
|
|
status: "1"
|
|
},
|
|
{
|
|
id: 2,
|
|
needBallheadNum: "1002",
|
|
projectName: "项目2",
|
|
returnStatus: "待审核",
|
|
returnUserName: "用户2",
|
|
submitEndTime: "2023-08-02 10:00:00",
|
|
userName: "李四",
|
|
departmentName: "安全监督部",
|
|
roleName: "危险作业票签发人",
|
|
projectScope: "项目2",
|
|
phone: "13900000000",
|
|
permissionDesc: "对项目2的危险作业票进行签发",
|
|
status: "2"
|
|
},
|
|
|
|
|
|
]);
|
|
const dialogShow = ref(false); // 入库审核弹窗-显示状态
|
|
const pageNum = ref(1); // 当前页码
|
|
const pageSize = ref(5); // 每页显示条数
|
|
const total = ref(20); // 总记录数
|
|
|
|
|
|
// 新增签发人
|
|
const handleAdd = (row) => {
|
|
dialogShow.value = true
|
|
}
|
|
|
|
// 编辑签发人
|
|
const handleEdit = (row) => {
|
|
dialogShow.value = true
|
|
}
|
|
|
|
// 查看详情
|
|
const handleDetail = (row) => {
|
|
dialogShow.value = true
|
|
}
|
|
|
|
// 关闭弹窗
|
|
const handleCancel = () => {
|
|
console.log('关闭弹窗')
|
|
dialogShow.value = false
|
|
}
|
|
|
|
</script>
|
|
<style scoped lang="scss">
|
|
.MainBox {
|
|
padding: 20px;
|
|
height: 100%;
|
|
background: #F9FAFB;
|
|
}
|
|
|
|
.FlexBox {
|
|
display: flex;
|
|
justify-content: flex-start;
|
|
align-items: center;
|
|
gap: 10px;
|
|
}
|
|
|
|
.TitleBox {
|
|
font-size: 16px;
|
|
font-weight: bold;
|
|
color: #303133;
|
|
}
|
|
|
|
|
|
.mt-2 {
|
|
margin-top: 20px;
|
|
}
|
|
|
|
|
|
.card-box {
|
|
background: #fff;
|
|
padding: 16px;
|
|
border-radius: 4px;
|
|
box-shadow: 0px 0px 10px rgba(0, 0, 0, 0.1);
|
|
overflow: hidden;
|
|
}
|
|
|
|
.pagination-container {
|
|
display: flex;
|
|
justify-content: space-between;
|
|
align-items: center;
|
|
margin-top: 16px;
|
|
}
|
|
|
|
.total-count {
|
|
color: #606266;
|
|
}
|
|
</style>
|