爱~海~爱海爱海~右
6 days ago
6 changed files with 773 additions and 193 deletions
@ -0,0 +1,149 @@ |
|||||||
|
<template> |
||||||
|
<section> |
||||||
|
<el-button type="primary" @click="selectPersonnal">选择人员</el-button> |
||||||
|
<teleport to="body"> |
||||||
|
<section |
||||||
|
class="choose-container" |
||||||
|
v-if="showChoose" |
||||||
|
@click.self="showChoose = false" |
||||||
|
> |
||||||
|
<section class="choose-wrapper"> |
||||||
|
<section class="isChoose"> |
||||||
|
<section class="none">待选区</section> |
||||||
|
</section> |
||||||
|
<section class="chooseOption"> |
||||||
|
<el-form inline :model="form"> |
||||||
|
<el-form-item label="用户昵称"> |
||||||
|
<el-input |
||||||
|
v-model="form.username" |
||||||
|
placeholder="请输入用户名称" |
||||||
|
/> |
||||||
|
</el-form-item> |
||||||
|
<el-form-item label="角色"> |
||||||
|
<el-select |
||||||
|
v-model="form.role" |
||||||
|
style="width: 200px" |
||||||
|
placeholder="请选择角色" |
||||||
|
> |
||||||
|
<el-option> </el-option> |
||||||
|
</el-select> |
||||||
|
</el-form-item> |
||||||
|
<el-form-item> |
||||||
|
<el-button type="primary">查询</el-button> |
||||||
|
<el-button>重置</el-button> |
||||||
|
</el-form-item> |
||||||
|
</el-form> |
||||||
|
</section> |
||||||
|
<section> |
||||||
|
<el-table v-loading="loading" :data="tableData"> |
||||||
|
<el-table-column |
||||||
|
label="用户编号" |
||||||
|
align="center" |
||||||
|
key="userId" |
||||||
|
prop="userId" |
||||||
|
/> |
||||||
|
<el-table-column |
||||||
|
label="用户名称" |
||||||
|
align="center" |
||||||
|
key="userName" |
||||||
|
prop="userName" |
||||||
|
:show-overflow-tooltip="true" |
||||||
|
/> |
||||||
|
<el-table-column |
||||||
|
label="用户昵称" |
||||||
|
align="center" |
||||||
|
key="nickName" |
||||||
|
prop="nickName" |
||||||
|
:show-overflow-tooltip="true" |
||||||
|
/> |
||||||
|
<el-table-column |
||||||
|
label="部门" |
||||||
|
align="center" |
||||||
|
key="deptName" |
||||||
|
prop="dept.deptName" |
||||||
|
:show-overflow-tooltip="true" |
||||||
|
/> |
||||||
|
<el-table-column |
||||||
|
label="手机号码" |
||||||
|
align="center" |
||||||
|
key="phonenumber" |
||||||
|
prop="phonenumber" |
||||||
|
width="120" |
||||||
|
/> |
||||||
|
</el-table> |
||||||
|
<pagination |
||||||
|
v-show="total > 0" |
||||||
|
:total="total" |
||||||
|
v-model:page="form.pageNum" |
||||||
|
v-model:limit="form.pageSize" |
||||||
|
/> |
||||||
|
</section> |
||||||
|
</section> |
||||||
|
</section> |
||||||
|
</teleport> |
||||||
|
</section> |
||||||
|
</template> |
||||||
|
|
||||||
|
<script setup> |
||||||
|
const loading = ref(false); |
||||||
|
const tableData = ref([]); |
||||||
|
const showChoose = ref(false); |
||||||
|
const total = ref(0); |
||||||
|
const form = ref({ |
||||||
|
username: undefined, |
||||||
|
role: undefined, |
||||||
|
pageSize: 10, |
||||||
|
pageNum: 1, |
||||||
|
}); |
||||||
|
|
||||||
|
function selectPersonnal() { |
||||||
|
showChoose.value = true; |
||||||
|
} |
||||||
|
</script> |
||||||
|
|
||||||
|
<style scoped lang="scss"> |
||||||
|
.choose-container { |
||||||
|
cursor: pointer; |
||||||
|
position: absolute; |
||||||
|
inset: 0; |
||||||
|
background-color: var(--el-overlay-color-lighter); |
||||||
|
z-index: 9999; |
||||||
|
display: flex; |
||||||
|
justify-content: center; |
||||||
|
align-items: center; |
||||||
|
|
||||||
|
.choose-wrapper { |
||||||
|
min-width: 60vw; |
||||||
|
min-height: 60vh; |
||||||
|
background-color: #fff; |
||||||
|
border-radius: var(--el-border-radius-base, 4px); |
||||||
|
display: grid; |
||||||
|
padding: 15px; |
||||||
|
grid-template-rows: auto 1fr; |
||||||
|
grid-template-columns: 25% 1fr; |
||||||
|
grid-gap: 15px; |
||||||
|
grid-template-areas: |
||||||
|
"ischoose chooseoption" |
||||||
|
"ischoose waitchoose"; |
||||||
|
|
||||||
|
.isChoose { |
||||||
|
grid-area: ischoose; |
||||||
|
border: 1px dashed #ccc; |
||||||
|
border-radius: var(--el-border-radius-base, 4px); |
||||||
|
.none{ |
||||||
|
height: 100%; |
||||||
|
width: 100%; |
||||||
|
display: flex; |
||||||
|
justify-content: center; |
||||||
|
align-items: center; |
||||||
|
color: var(--el-text-color-secondary); |
||||||
|
font-size: 14px; |
||||||
|
} |
||||||
|
} |
||||||
|
|
||||||
|
.chooseOption { |
||||||
|
grid-area: chooseoption; |
||||||
|
} |
||||||
|
} |
||||||
|
} |
||||||
|
</style> |
@ -0,0 +1,118 @@ |
|||||||
|
<template> |
||||||
|
<el-dialog :title="title" v-model="show" width="500px" append-to-body> |
||||||
|
<el-form ref="roleRef" :model="form" :rules="rule" label-width="100px"> |
||||||
|
<el-form-item label="任务标题" prop="roleName"> |
||||||
|
<el-input v-model="form.roleName" placeholder="请输入任务标题" /> |
||||||
|
</el-form-item> |
||||||
|
<el-form-item label="任务类型" prop="roleSort"> |
||||||
|
<el-select placeholder="请选择任务类型"> |
||||||
|
<el-option |
||||||
|
v-for="dict in task_type" |
||||||
|
:key="dict.value" |
||||||
|
:label="dict.label" |
||||||
|
:value="dict.value" |
||||||
|
/> |
||||||
|
</el-select> |
||||||
|
</el-form-item> |
||||||
|
<el-form-item label="执行周期"> |
||||||
|
<el-select placeholder="请选择执行周期"> |
||||||
|
<el-option |
||||||
|
v-for="dict in task_period_type" |
||||||
|
:key="dict.value" |
||||||
|
:label="dict.label" |
||||||
|
:value="dict.value" |
||||||
|
/> |
||||||
|
</el-select> |
||||||
|
</el-form-item> |
||||||
|
<el-form-item label="执行日期"> |
||||||
|
<el-date-picker |
||||||
|
type="daterange" |
||||||
|
range-separator="至" |
||||||
|
start-placeholder="请选择开始日期" |
||||||
|
end-placeholder="请选择结束日期" |
||||||
|
/> |
||||||
|
</el-form-item> |
||||||
|
<el-form-item label="任务内容"> |
||||||
|
<el-input |
||||||
|
type="textarea" |
||||||
|
:autosize="{ |
||||||
|
minRows: 2, |
||||||
|
}" |
||||||
|
placeholder="请输入任务内容" |
||||||
|
/> |
||||||
|
</el-form-item> |
||||||
|
</el-form> |
||||||
|
<template #footer> |
||||||
|
<div class="dialog-footer"> |
||||||
|
<el-button type="primary" @click="submitForm">确 定</el-button> |
||||||
|
<el-button @click="cancel">取 消</el-button> |
||||||
|
</div> |
||||||
|
</template> |
||||||
|
</el-dialog> |
||||||
|
</template> |
||||||
|
<script setup> |
||||||
|
const title = ref(""); |
||||||
|
const show = ref(false); |
||||||
|
const form = ref({}); |
||||||
|
const rule = ref({}); |
||||||
|
const { proxy } = getCurrentInstance(); |
||||||
|
|
||||||
|
const { task_period_type, task_type } = proxy.useDict( |
||||||
|
"task_period_type", |
||||||
|
"task_type", |
||||||
|
); |
||||||
|
|
||||||
|
/** 提交按钮 */ |
||||||
|
function submitForm() { |
||||||
|
proxy.$refs["roleRef"].validate((valid) => { |
||||||
|
if (valid) { |
||||||
|
if (form.value.roleId != undefined) { |
||||||
|
form.value.menuIds = getMenuAllCheckedKeys(); |
||||||
|
updateRole(form.value).then((response) => { |
||||||
|
proxy.$modal.msgSuccess("修改成功"); |
||||||
|
open.value = false; |
||||||
|
getList(); |
||||||
|
}); |
||||||
|
} else { |
||||||
|
form.value.menuIds = getMenuAllCheckedKeys(); |
||||||
|
addRole(form.value).then((response) => { |
||||||
|
proxy.$modal.msgSuccess("新增成功"); |
||||||
|
open.value = false; |
||||||
|
getList(); |
||||||
|
}); |
||||||
|
} |
||||||
|
} |
||||||
|
}); |
||||||
|
} |
||||||
|
|
||||||
|
/** 取消按钮 */ |
||||||
|
function cancel() { |
||||||
|
show.value = false; |
||||||
|
reset(); |
||||||
|
} |
||||||
|
|
||||||
|
/** 重置新增的表单以及其他数据 */ |
||||||
|
function reset() { |
||||||
|
form.value = { |
||||||
|
roleId: undefined, |
||||||
|
roleName: undefined, |
||||||
|
roleKey: undefined, |
||||||
|
roleSort: 0, |
||||||
|
status: "0", |
||||||
|
menuIds: [], |
||||||
|
deptIds: [], |
||||||
|
menuCheckStrictly: true, |
||||||
|
deptCheckStrictly: true, |
||||||
|
remark: undefined, |
||||||
|
}; |
||||||
|
proxy.resetForm("roleRef"); |
||||||
|
} |
||||||
|
|
||||||
|
function open(param) { |
||||||
|
title.value = param.title; |
||||||
|
show.value = true; |
||||||
|
} |
||||||
|
|
||||||
|
defineExpose({ open }); |
||||||
|
</script> |
||||||
|
<style scoped lang="scss"></style> |
@ -0,0 +1,206 @@ |
|||||||
|
<template> |
||||||
|
<section class="app-container"> |
||||||
|
<el-form |
||||||
|
:model="queryParams" |
||||||
|
ref="queryRef" |
||||||
|
v-show="showSearch" |
||||||
|
:inline="true" |
||||||
|
label-width="auto" |
||||||
|
> |
||||||
|
<el-form-item label="任务标题" prop="roleName"> |
||||||
|
<el-input |
||||||
|
v-model="queryParams.roleName" |
||||||
|
placeholder="请输入角色名称" |
||||||
|
clearable |
||||||
|
style="width: 240px" |
||||||
|
@keyup.enter="handleQuery" |
||||||
|
/> |
||||||
|
</el-form-item> |
||||||
|
<el-form-item label="权限字符" prop="roleKey"> |
||||||
|
<el-input |
||||||
|
v-model="queryParams.roleKey" |
||||||
|
placeholder="请输入权限字符" |
||||||
|
clearable |
||||||
|
style="width: 240px" |
||||||
|
@keyup.enter="handleQuery" |
||||||
|
/> |
||||||
|
</el-form-item> |
||||||
|
<el-form-item label="任务类型" prop="status"> |
||||||
|
<el-select |
||||||
|
v-model="queryParams.status" |
||||||
|
placeholder="角色状态" |
||||||
|
clearable |
||||||
|
style="width: 240px" |
||||||
|
> |
||||||
|
<el-option |
||||||
|
v-for="dict in sys_normal_disable" |
||||||
|
:key="dict.value" |
||||||
|
:label="dict.label" |
||||||
|
:value="dict.value" |
||||||
|
/> |
||||||
|
</el-select> |
||||||
|
</el-form-item> |
||||||
|
<el-form-item label="创建时间" style="width: 308px"> |
||||||
|
<el-date-picker |
||||||
|
v-model="dateRange" |
||||||
|
value-format="YYYY-MM-DD" |
||||||
|
type="daterange" |
||||||
|
range-separator="-" |
||||||
|
start-placeholder="开始日期" |
||||||
|
end-placeholder="结束日期" |
||||||
|
></el-date-picker> |
||||||
|
</el-form-item> |
||||||
|
<el-form-item> |
||||||
|
<el-button type="primary" icon="Search" @click="handleQuery"> |
||||||
|
搜索 |
||||||
|
</el-button> |
||||||
|
<el-button icon="Refresh" @click="resetQuery">重置</el-button> |
||||||
|
</el-form-item> |
||||||
|
</el-form> |
||||||
|
<el-row :gutter="10" class="mb8"> |
||||||
|
<el-col :span="1.5"> |
||||||
|
<el-button type="primary" plain icon="Plus" @click="create()" |
||||||
|
>新增</el-button |
||||||
|
> |
||||||
|
</el-col> |
||||||
|
<!-- <el-col :span="1.5">--> |
||||||
|
<!-- <el-button--> |
||||||
|
<!-- type="warning"--> |
||||||
|
<!-- plain--> |
||||||
|
<!-- icon="Download"--> |
||||||
|
<!-- @click="handleExport"--> |
||||||
|
<!-- v-hasPermi="['system:role:export']"--> |
||||||
|
<!-- >导出</el-button--> |
||||||
|
<!-- >--> |
||||||
|
<!-- </el-col>--> |
||||||
|
<right-toolbar |
||||||
|
v-model:showSearch="showSearch" |
||||||
|
@queryTable="getList" |
||||||
|
></right-toolbar> |
||||||
|
</el-row> |
||||||
|
|
||||||
|
<!-- 表格数据 --> |
||||||
|
<el-table v-loading="loading" :data="list"> |
||||||
|
<el-table-column label="任务标题" prop="roleId" align="center" /> |
||||||
|
<el-table-column |
||||||
|
label="执行周期" |
||||||
|
prop="roleName" |
||||||
|
:show-overflow-tooltip="true" |
||||||
|
align="center" |
||||||
|
/> |
||||||
|
<el-table-column |
||||||
|
label="任务类型" |
||||||
|
prop="roleKey" |
||||||
|
:show-overflow-tooltip="true" |
||||||
|
align="center" |
||||||
|
/> |
||||||
|
<el-table-column |
||||||
|
label="进度" |
||||||
|
prop="roleKey" |
||||||
|
:show-overflow-tooltip="true" |
||||||
|
align="center" |
||||||
|
/> |
||||||
|
|
||||||
|
<el-table-column label="执行范围" prop="roleSort" align="center"> |
||||||
|
<template #default> |
||||||
|
<el-link type="primary">共200家</el-link> |
||||||
|
</template> |
||||||
|
</el-table-column> |
||||||
|
<el-table-column |
||||||
|
label="操作" |
||||||
|
align="center" |
||||||
|
class-name="small-padding fixed-width" |
||||||
|
> |
||||||
|
<template #default="scope"> |
||||||
|
<el-tooltip content="执行日志" placement="top"> |
||||||
|
<el-button link type="primary" icon="Document"></el-button> |
||||||
|
</el-tooltip> |
||||||
|
<el-tooltip content="修改" placement="top"> |
||||||
|
<el-button link type="primary" icon="Edit"></el-button> |
||||||
|
</el-tooltip> |
||||||
|
<el-tooltip content="删除" placement="top"> |
||||||
|
<el-button link type="primary" icon="Delete"></el-button> |
||||||
|
</el-tooltip> |
||||||
|
</template> |
||||||
|
</el-table-column> |
||||||
|
</el-table> |
||||||
|
|
||||||
|
<pagination |
||||||
|
v-show="total > 0" |
||||||
|
:total="total" |
||||||
|
v-model:page="queryParams.pageNum" |
||||||
|
v-model:limit="queryParams.pageSize" |
||||||
|
@pagination="getList" |
||||||
|
/> |
||||||
|
|
||||||
|
<TaskForm ref="taskFormRef" /> |
||||||
|
</section> |
||||||
|
</template> |
||||||
|
|
||||||
|
<script setup> |
||||||
|
import TaskForm from "./form.vue"; |
||||||
|
|
||||||
|
const { proxy } = getCurrentInstance(); |
||||||
|
const { task_period_type } = proxy.useDict("task_period_type"); |
||||||
|
const loading = ref(false); |
||||||
|
const showSearch = ref(true); |
||||||
|
const taskFormRef = ref(); |
||||||
|
const data = reactive({ |
||||||
|
form: {}, |
||||||
|
queryParams: { |
||||||
|
pageNum: 1, |
||||||
|
pageSize: 10, |
||||||
|
roleName: undefined, |
||||||
|
roleKey: undefined, |
||||||
|
status: undefined, |
||||||
|
}, |
||||||
|
rules: { |
||||||
|
roleName: [ |
||||||
|
{ required: true, message: "角色名称不能为空", trigger: "blur" }, |
||||||
|
], |
||||||
|
roleKey: [{ required: true, message: "权限字符不能为空", trigger: "blur" }], |
||||||
|
roleSort: [ |
||||||
|
{ required: true, message: "角色顺序不能为空", trigger: "blur" }, |
||||||
|
], |
||||||
|
}, |
||||||
|
}); |
||||||
|
const total = ref(0); |
||||||
|
const { queryParams, form, rules } = toRefs(data); |
||||||
|
const dateRange = ref([]); |
||||||
|
const list = ref([ |
||||||
|
{ |
||||||
|
roleId: 1, |
||||||
|
roleName: "超级管理员", |
||||||
|
roleKey: "admin", |
||||||
|
roleSort: 1, |
||||||
|
roleStatus: "0", |
||||||
|
roleRemark: "超级管理员拥有所有权限", |
||||||
|
}, |
||||||
|
]); |
||||||
|
/** |
||||||
|
* 获取列表 |
||||||
|
*/ |
||||||
|
function getList() {} |
||||||
|
|
||||||
|
/** 重置按钮操作 */ |
||||||
|
function resetQuery() { |
||||||
|
dateRange.value = []; |
||||||
|
proxy.resetForm("queryRef"); |
||||||
|
handleQuery(); |
||||||
|
} |
||||||
|
|
||||||
|
/** 搜索按钮操作 */ |
||||||
|
function handleQuery() { |
||||||
|
queryParams.value.pageNum = 1; |
||||||
|
getList(); |
||||||
|
} |
||||||
|
|
||||||
|
/** |
||||||
|
* 新增任务 |
||||||
|
*/ |
||||||
|
function create() { |
||||||
|
unref(taskFormRef).open({ title: "新增任务" }); |
||||||
|
} |
||||||
|
</script> |
||||||
|
|
||||||
|
<style scoped lang="scss"></style> |
@ -0,0 +1,19 @@ |
|||||||
|
|
||||||
|
<template> |
||||||
|
<section class="app-container"> |
||||||
|
<el-form> |
||||||
|
<el-form-item label="选择人员"> |
||||||
|
<ChoosePersonnel/> |
||||||
|
</el-form-item> |
||||||
|
</el-form> |
||||||
|
</section> |
||||||
|
</template> |
||||||
|
|
||||||
|
<script setup> |
||||||
|
import ChoosePersonnel from '@/BusinessCom/ChoosePersonnel/index.vue' |
||||||
|
</script> |
||||||
|
|
||||||
|
|
||||||
|
<style scoped lang="scss"> |
||||||
|
|
||||||
|
</style> |
Loading…
Reference in new issue