bonus
/
mallBackend
1
0
Fork 0
Code Issues Pull Requests Packages Projects Releases Wiki Activity

页面交互搭建

This commit is contained in:
13218645326 2023-12-05 16:51:34 +08:00
parent b7da446f3b
commit 9bf8c23720
18 changed files with 1165 additions and 14 deletions
Show Stats Download Patch File Download Diff File Expand all files Collapse all files

1
auto-imports.d.ts vendored
View File

@ -6,6 +6,7 @@
export {}
declare global {
const EffectScope: typeof import('vue')['EffectScope']
const ElMessageBoxOpert: typeof import('element-plus/es')['ElMessageBoxOpert']
const acceptHMRUpdate: typeof import('pinia')['acceptHMRUpdate']
const computed: typeof import('vue')['computed']
const createApp: typeof import('vue')['createApp']

29
src/components/comNav/index.vue
View File

@ -37,19 +37,34 @@ const navStore = comNavStore()
onMounted(()=>{
console.log("routes",router.getRoutes())
// initRouteList()
menuInfo.defaultOpeneds.push()
initRouteList()
})
const initRouteList = ()=>{
const routeList = router.getRoutes()
menuInfo.menuList = routeList.find(ele=>ele.meta.routeListRoot)?.children
menuInfo.defaultOpeneds = menuInfo.menuList[0].path
console.log("menuInfo.menuList",menuInfo.menuList)
// const routeList = router.getRoutes()
// menuInfo.menuList = routeList.find(ele=>ele.meta.routeListRoot)?.children
// menuInfo.defaultOpeneds = menuInfo.menuList[0].path
// console.log("menuInfo.menuList",menuInfo.menuList)
menuInfo.defaultOpeneds.push()
const routes:any = router.getRoutes()
console.log("routes",routes)
const currentNav= routes[0]
if(navStore.topNavList){
let firstNav = {
title:currentNav.meta.title,
name:currentNav.name,
path:currentNav.path
}
navStore.addNavTarget(firstNav)
navStore.setCurrentNav(currentNav.path)
}
console.log("currentNav",currentNav)
menuInfo.defaultActive=currentNav.name+'&&'+currentNav.meta.title
console.log("currentNav",menuInfo.defaultActive)
}
</script>

4
src/components/headerCom/headerNav.vue
View File

@ -1,6 +1,6 @@
<template>
<div class="nav_out">
<el-tag v-for="(tag,index) in navStore.topNavList" :key="tag.name" size="large" closable :type="tag.type" @close="closeNavTagFn(index)" @click="TapNavTagFn(tag)" class="navItem">
<el-tag v-for="(tag,index) in navStore.topNavList" :key="tag.name" size="large" :effect="navStore.currentNav==tag.path?'dark':'light'" closable @close="closeNavTagFn(index)" @click="TapNavTagFn(tag)" class="navItem">
{{ tag.title }}
</el-tag>
</div>
@ -14,9 +14,11 @@ const closeNavTagFn =(index:any)=>{
navStore.deleteNavTarget(index)
}
const TapNavTagFn=(tag:any)=>{
router.push({
name:tag.path
})
navStore.addNavTarget(tag)
}
</script>

40
src/router/index.ts
View File

@ -147,7 +147,45 @@ const routes: Array<RouteRecordRaw> = [
AuthFlag: true
},
children: []
}
},
// 111
{
name: "systemVersion",
path: 'systemVersion',
component: () => import('views/systemManage/systemVersion/index.vue'),
meta: {
title: '系统版本管理',
keepAlive: true,
AuthFlag: true
},
children: []
},
{
name: "userManage",
path: 'userManage',
component: () => import('views/systemManage/userManage/index.vue'),
meta: {
title: '用户管理',
keepAlive: true,
AuthFlag: true
},
children: []
},
{
name: "systemLog",
path: 'systemLog',
component: () => import('views/systemManage/systemLog/index.vue'),
meta: {
title: '系统日志',
keepAlive: true,
AuthFlag: true
},
children: []
},
]
},

41
src/router/routerData.ts
View File

@ -148,6 +148,47 @@ export const list: any = [
AuthFlag: true
},
children: []
},
{
name: "systemManage",
path: 'systemManage',
meta: {
title: '系统管理',
keepAlive: true,
AuthFlag: true
},
children: [
{
path: 'systemVersion',
name: 'systemVersion',
component: 'views/systemManage/systemVersion/index.vue',
meta: {
title: '系统版本管理',
keepAlive: true,
AuthFlag: true
}
},
{
path: 'userManage',
name: 'userManage',
component: 'views/systemManage/userManage/index.vue',
meta: {
title: '用户管理',
keepAlive: true,
AuthFlag: true
}
} ,
{
path: 'systemLog',
name: 'systemLog',
component: 'views/systemManage/systemLog/index.vue',
meta: {
title: '系统日志',
keepAlive: true,
AuthFlag: true
}
}
]
}
]

10
src/store/comNav.ts
View File

@ -3,13 +3,15 @@ export const comNavStore = defineStore('main_com_nav', {
state: () => {
return {
topNavList: [] as any, //loading控制,
maxNavCount: 8
maxNavCount: 8,
currentNav:''
}
},
getters: {},
actions: {
addNavTarget(ev: any) {
console.log("topNavList", this.topNavList)
console.log("topNavList", this.topNavList,ev)
this.currentNav = ev.path
if (!this.topNavList.map((ele: any) => ele.path).includes(ev.path)) {
this.topNavList.push(ev)
}
@ -24,6 +26,10 @@ export const comNavStore = defineStore('main_com_nav', {
},
clearTarget(val: any) {
this.topNavList = []
},
setCurrentNav(ev:any){
console.log("setCurrentNav")
this.currentNav = ev
}
},
persist: {

2
src/utils/elementCom.ts
View File

@ -26,7 +26,7 @@ export const ElMessageBoxOpert = (title = '', text = "", onfirmText = "", cancel
confirmButtonText: onfirmText,
cancelButtonText: cancelText,
inputValidator: (val)=>{
inputValidator(val)
return inputValidator(val)
},
inputErrorMessage: inputErrorMessage,
})

1
src/views/enterpriseEquipmentManage/equipmentTypeTemplate/index.vue
View File

@ -34,7 +34,6 @@
</template>
<script lang="ts" setup>
import { Console } from "console";
import { ElMessageBoxOpert, ElConfirmBeforeOpert } from "utils/elementCom"
let title = ref("")
const dataSource: any = ref<any>([

2
src/views/orderManagement/com/infoCom.vue
View File

@ -99,7 +99,7 @@
<script lang="ts" setup>
const emits = defineEmits(['send'])
const addShow = ref(true)
const addShow = ref(false)
let title = ref("订单详情")

100
src/views/systemManage/systemLog/com/addCom.vue Normal file
View File

@ -0,0 +1,100 @@
<template>
<el-dialog v-model="addShow" :title="title" width="30%" draggable :close-on-click-modal="false">
<el-form :model="form" ref="ruleFormRef" label-width="102px" :rules="formRules" style="padding: 0 80px 0px 0;">
<el-form-item label="企业类型：" prop="enterprise">
<el-input v-model.trim="form.enterprise" placeholder="请输入企业类型" clearable maxlength="30" />
</el-form-item>
<el-form-item label="是否启用：" prop="isEnable">
<el-switch v-model="form.isEnable" :before-change="beforeChange" />
</el-form-item>
</el-form>
<template #footer>
<span class="dialog-footer">
<el-button @click="cancelFn">取消</el-button>
<el-button type="primary" @click="publishFn">
保存
</el-button>
</span>
</template>
</el-dialog>
</template>
<script lang="ts" setup>
import type { FormInstance, FormRules } from 'element-plus'
import { ElMessage } from 'element-plus'
const emits = defineEmits(['send'])
const addShow = ref(false)
let title = ref("新增")
const ruleFormRef: any = ref()
const form = reactive({
enterprise: '',
isEnable: ''
})
// const validatorLink = (rule: any, value: any, callback: any) => {
// if (linkReg.test(value)) {
// callback()
// } else {
// callback(new Error("请输入正确格式的跳转链接"))
// }
// }
const formRules = reactive<FormRules<any>>({
enterprise: [
{ required: true, message: '请输入企业类型', trigger: 'blur' },
],
})
const publishFn = () => {
if (!ruleFormRef) return
ruleFormRef.value.validate((valid: any) => {
if (valid) {
if (form.linkUrl && linkReg.test(form.linkUrl)) {
ElMessage({
type: 'warning',
message: "请输入正确格式的跳转链接"
})
}
console.log('submit!')
} else {
console.log('error submit!')
return false
}
})
}
const cancelFn = (formEl: FormInstance | undefined) => {
if (!ruleFormRef) return
ruleFormRef.value.resetFields()
addShow.value = false
}
const beforeChange = (ev: any) => {
return new Promise((resolve, reject) => {
resolve(true)
})
}
const open = (val: any) => {
title.value = "新增"
addShow.value = true
}
const edit = () => {
title.value = "编辑"
addShow.value = true
}
defineExpose({
open,
edit
})
</script>
<style scoped lang="scss"></style>

49
src/views/systemManage/systemLog/com/headerTop.vue Normal file
View File

@ -0,0 +1,49 @@
<template>
<el-card shadow="always" class="search_header_top_row1">
<el-form :inline="true" :model="filterForm" class="demo-form-inline">
<el-form-item label="用户ID">
<el-input v-model="filterForm.keyword" placeholder="请输入关键字" clearable />
</el-form-item>
<el-form-item label="操作时间">
<el-date-picker v-model="filterForm.dataRange" type="daterange" range-separator="To"
start-placeholder="Start date" end-placeholder="End date" />
</el-form-item>
<el-form-item >
<el-button type="primary" @click="serachFn">查询</el-button>
<el-button type="plain" @click="resetFn">重置</el-button>
</el-form-item>
</el-form>
<div>
<el-button type="primary" @click="exportFn">导出</el-button>
</div>
</el-card>
</template>
<script lang="ts" setup>
const emits = defineEmits(['search', 'reset', 'export'])
const filterForm = reactive({
keyword: '',
compnayName: '',
name: '',
code: '',
dataRange: ''
})
const serachFn = () => {
emits('search', filterForm)
}
const resetFn = () => {
emits('reset')
}
const exportFn = () => {
emits('export')
}
</script>
<style scoped lang="scss"></style>

131
src/views/systemManage/systemLog/index.vue Normal file
View File

@ -0,0 +1,131 @@
<template>
<headerTop @search="searchFn" @reset="resetFn" @export="exportFn"></headerTop>
<el-card shadow="always" class="content_body_row">
<el-table :data="tableListInfo.list" border style="width: 100%" show-overflow-tooltip
:max-height="'calc(100vh - 72px - 48px - 65px - 12px - 60px - 88px)'"
:height="'calc(100vh - 72px - 48px - 65px - 12px - 60px - 88px)'">
<el-table-column type="index" width="72" label="序号" />
<el-table-column prop="v_opert_time" label="操作时间" min-width="150" />
<el-table-column prop="v_userID" label="用户ID" min-width="150" />
<el-table-column prop="v_opert_module" label="操作模块" min-width="220">
</el-table-column>
<el-table-column prop="v_opert_target" label="操作对象" min-width="220">
</el-table-column>
<el-table-column prop="v_opert_type" label="操作类型" min-width="220">
</el-table-column>
<el-table-column prop="v_opert_result" label="操作结果" min-width="220">
</el-table-column>
<el-table-column prop="v_opert_desc" label="操作描述" min-width="220">
</el-table-column>
</el-table>
<div class="paination_out">
<Pagination :currentPage="paginationInfo.currentPage" :pageSize="paginationInfo.pageSize" @sendPage="getPageFn">
</Pagination>
</div>
</el-card>
</template>
<script lang="ts" setup>
import headerTop from "./com/headerTop.vue"
import { ElConfirmBeforeOpert } from "utils/elementCom"
const addComRef = ref()
const paginationInfo = reactive({
currentPage: 1,
pageSize: 15
})
const tableData = [
{
v_id: '1',
v_opert_time: '2016-05-03',
v_userID: 'Tom',
v_opert_module: 'California',
v_opert_target: 'Los Angeles',
v_opert_type: 'No. 189, Grove St, Los Angeles',
v_opert_result: 'CA 90036',
v_opert_desc: '154646465',
},
{
v_id: '2',
v_opert_time: '2016-05-03',
v_userID: 'Tom',
v_opert_module: 'California',
v_opert_target: 'Los Angeles',
v_opert_type: 'No. 189, Grove St, Los Angeles',
v_opert_result: 'CA 90036',
v_opert_desc: '154646465',
},
{
v_id: '3',
v_opert_time: '2016-05-03',
v_userID: 'Tom',
v_opert_module: 'California',
v_opert_target: 'Los Angeles',
v_opert_type: 'No. 189, Grove St, Los Angeles',
v_opert_result: 'CA 90036',
v_opert_desc: '154646465',
},
{
v_id: '4',
v_opert_time: '2016-05-03',
v_userID: 'Tom',
v_opert_module: 'California',
v_opert_target: 'Los Angeles',
v_opert_type: 'No. 189, Grove St, Los Angeles',
v_opert_result: 'CA 90036',
v_opert_desc: '154646465',
},
{
v_id: '5',
v_opert_time: '2016-05-03',
v_userID: 'Tom',
v_opert_module: 'California',
v_opert_target: 'Los Angeles',
v_opert_type: 'No. 189, Grove St, Los Angeles',
v_opert_result: 'CA 90036',
v_opert_desc: '154646465',
},
]
let tableListInfo = reactive({
list: tableData
})
const searchFn = () => {
}
const resetFn = () => {
}
const exportFn = () => {
}
const getPageFn = (val: any) => {
paginationInfo.currentPage = val.currentPage
paginationInfo.pageSize = val.pageSize
initTableList()
}
const initTableList = () => {
}
</script>
<style scoped lang="scss"></style>

122
src/views/systemManage/systemVersion/com/addCom.vue Normal file
View File

@ -0,0 +1,122 @@
<template>
<el-dialog v-model="addShow" :title="title" width="1200px" draggable :close-on-click-modal="false" >
<el-form :model="form" ref="ruleFormRef" label-width="120px" :rules="formRules" style="padding: 0 80px 0px 0;">
<el-form-item label="版本号：" prop="versionName">
<el-input v-model.trim="form.versionName" placeholder="请输入版本号" clearable maxlength="30" />
</el-form-item>
<el-form-item label="系统类型：" prop="systemType">
<el-select v-model="form.systemType" placeholder="请选择系统类型" clearable filterable>
<el-option v-for="item in systemTypeList.list" :key="item.value" :label="item.label" :value="item.value" />
</el-select>
</el-form-item>
<el-form-item label="更新内容：" prop="editorText">
<editorWang ref="editorWangRef"></editorWang>
</el-form-item>
</el-form>
<template #footer>
<span class="dialog-footer">
<el-button @click="cancelFn">取消</el-button>
<el-button type="primary" @click="publishFn">
确认发布
</el-button>
</span>
</template>
</el-dialog>
</template>
<script lang="ts" setup>
import type { FormInstance, FormRules } from 'element-plus'
import { ElMessage } from 'element-plus'
import editorWang from "components/com/editorWang.vue"
const emits = defineEmits(['send'])
const addShow = ref(false)
let title = ref("新增")
const editorWangRef = ref()
const ruleFormRef: any = ref()
const form = reactive({
versionName: '',
systemType: '',
editorText: ''
})
const systemTypeList = reactive({
list: [{
value: 'Option1',
label: 'Option1',
},
{
value: 'Option2',
label: 'Option2',
}]
})
const formRules = reactive<FormRules<any>>({
versionName: [
{ required: true, message: '请输入版本号', trigger: 'blur' },
],
systemType: [
{ required: true, message: '请选择系统类型', trigger: 'change' },
],
editorText:[
{ required: true, message: '请输入更新内容', trigger: 'blur' },
]
})
const publishFn = () => {
if (!ruleFormRef) return
ruleFormRef.value.validate((valid: any) => {
if (valid) {
const editVal= editorWangRef.value.getHtmlByFather()
console.log("editVal",editVal)
console.log('submit!')
} else {
console.log('error submit!')
return false
}
})
}
const cancelFn = (formEl: FormInstance | undefined) => {
if (!ruleFormRef) return
ruleFormRef.value.resetFields()
editorWangRef.value.editorClear()
addShow.value = false
}
const open = (val: any) => {
title.value = "新增"
addShow.value = true
}
const edit = (val:any) => {
title.value = "编辑"
addShow.value = true
nextTick(()=>{
editorWangRef.value.setHtmlByFather("<p>head</p><p>hello <strong>word</strong></p>")
})
}
const show = (val:any) => {
title.value =val.title
addShow.value = true
nextTick(()=>{
editorWangRef.value.setHtmlByFather("<p>head</p><p>hello <strong>word</strong></p>")
})
}
defineExpose({
open,
edit,
show
})
</script>
<style scoped lang="scss"></style>

58
src/views/systemManage/systemVersion/com/headerTop.vue Normal file
View File

@ -0,0 +1,58 @@
<template>
<el-card shadow="always" class="search_header_top_row1">
<el-form :inline="true" :model="filterForm" class="demo-form-inline">
<el-form-item label="系统类型">
<el-input v-model="filterForm.systemType" placeholder="请选择系统类型" clearable />
</el-form-item>
<el-form-item label="版本号">
<el-input v-model="filterForm.versionCode" placeholder="请输入版本号" clearable />
</el-form-item>
<el-form-item label="部署时间范围">
<el-date-picker v-model="filterForm.dataRange" type="daterange" range-separator="To" start-placeholder="Start date"
end-placeholder="End date" />
</el-form-item>
<el-form-item >
<el-button type="primary" @click="serachFn">查询</el-button>
<el-button type="plain" @click="resetFn">重置</el-button>
</el-form-item>
</el-form>
<div>
<el-button type="primary" @click="addFn">新增</el-button>
<el-button type="primary" @click="exportFn">导出</el-button>
</div>
</el-card>
</template>
<script lang="ts" setup>
const emits = defineEmits(['search','reset','export','add'])
const filterForm = reactive({
systemType: '',
versionCode:'',
dataRange:''
})
const serachFn = () => {
emits('search',filterForm)
}
const resetFn=()=>{
emits('reset')
}
const exportFn =()=>{
emits('export')
}
const addFn =()=>{
emits('add')
}
</script>
<style scoped lang="scss"></style>

151
src/views/systemManage/systemVersion/index.vue Normal file
View File

@ -0,0 +1,151 @@
<template>
<headerTop @search="searchFn" @reset="resetFn" @export="exportFn" @add="addFn"></headerTop>
<addCom ref="addComRef"></addCom>
<el-card shadow="always" class="content_body_row">
<el-table :data="tableListInfo.list" border style="width: 100%" show-overflow-tooltip
:max-height="'calc(100vh - 72px - 48px - 65px - 12px - 60px - 88px)'"
:height="'calc(100vh - 72px - 48px - 65px - 12px - 60px - 88px)'">
<el-table-column type="index" width="72" label="序号" />
<el-table-column prop="v_systemType" label="系统类型" min-width="150" />
<el-table-column prop="v_version_code" label="版本号" min-width="150" />
<el-table-column prop="v_bushu_time" label="部署时间" min-width="220">
</el-table-column>
<el-table-column prop="v_update_info" label="更新内容" min-width="220">
</el-table-column>
<el-table-column label="操作" align="center" width="200">
<template #default="scope">
<el-button type="primary" size="small" @click.prevent="showRowFn(scope.row)">
查看
</el-button>
<el-button type="primary" size="small" @click.prevent="editRowFn(scope.row)">
编辑
</el-button>
<el-button type="danger" size="small" @click.prevent="deleteRowFn(scope.row)">
删除
</el-button>
</template>
</el-table-column>
</el-table>
<div class="paination_out">
<Pagination :currentPage="paginationInfo.currentPage" :pageSize="paginationInfo.pageSize" @sendPage="getPageFn">
</Pagination>
</div>
</el-card>
</template>
<script lang="ts" setup>
import headerTop from "./com/headerTop.vue"
import addCom from "./com/addCom.vue"
import { ElConfirmBeforeOpert } from "utils/elementCom"
const addComRef = ref()
const paginationInfo = reactive({
currentPage: 1,
pageSize: 15
})
const tableData = [
{
v_id: '1',
v_systemType: '2016-05-03',
v_version_code: 'Tom',
v_bushu_time: 'California',
v_update_info: 'Los Angeles'
},
{
v_id: '2',
v_systemType: '2016-05-03',
v_version_code: 'Tom',
v_bushu_time: 'California',
v_update_info: 'Los Angeles'
},
{
v_id: '3',
v_systemType: '2016-05-03',
v_version_code: 'Tom',
v_bushu_time: 'California',
v_update_info: 'Los Angeles'
},
{
v_id: '4',
v_systemType: '2016-05-03',
v_version_code: 'Tom',
v_bushu_time: 'California',
v_update_info: 'Los Angeles'
},
{
v_id: '5',
v_systemType: '2016-05-03',
v_version_code: 'Tom',
v_bushu_time: 'California',
v_update_info: 'Los Angeles'
},
]
let tableListInfo = reactive({
list: tableData
})
const editRowFn = (row: any) => {
addComRef.value.edit({
a: "111"
})
}
const showRowFn = (row: any) => {
addComRef.value.show({
a: "111"
})
}
const addFn = () => {
addComRef.value.open()
}
const deleteItem = (row: any) => {
const itemID = row.v_id
console.log("ITEMid", row)
}
const deleteRowFn = (row: any) => {
ElConfirmBeforeOpert(
'操作确认',
'是否确定删除数据？',
deleteItem,
'确定',
'取消',
row
)
}
const searchFn = () => {
}
const resetFn = () => {
}
const exportFn = () => {
}
const getPageFn = (val: any) => {
paginationInfo.currentPage = val.currentPage
paginationInfo.pageSize = val.pageSize
initTableList()
}
const initTableList = () => {
}
</script>
<style scoped lang="scss"></style>

177
src/views/systemManage/userManage/com/addCom.vue Normal file
View File

@ -0,0 +1,177 @@
<template>
<el-dialog v-model="addShow" :title="title" width="660px" draggable :close-on-click-modal="false">
<el-form :model="form" ref="ruleFormRef" label-width="102px" :rules="formRules" style="padding: 0 80px 0px 0;">
<el-form-item label="姓名：" prop="userName">
<el-input v-model.trim="form.userName" placeholder="请输入姓名" clearable maxlength="30" />
</el-form-item>
<el-form-item label="身份证：" prop="IDCard">
<el-input v-model.trim="form.IDCard" placeholder="请输入身份证" clearable maxlength="30" />
</el-form-item>
<el-form-item label="性别：" prop="sex">
<el-select v-model="form.sex" placeholder="请选择性别" clearable filterable style="width:100%;">
<el-option v-for="item in sexInfo.list" :key="item.value" :label="item.label" :value="item.value" />
</el-select>
</el-form-item>
<el-form-item label="联系方式：" prop="contactgWays">
<el-input v-model.trim="form.contactgWays" placeholder="请输入联系方式" clearable maxlength="30" />
</el-form-item>
<el-form-item label="所属岗位：" prop="position">
<el-select v-model="form.position" placeholder="请选择所属岗位" clearable filterable style="width:100%;">
<el-option v-for="item in positionIfo.list" :key="item.value" :label="item.label" :value="item.value" />
</el-select>
</el-form-item>
<el-form-item label="系统角色：" prop="roleType">
<el-select v-model="form.roleType" placeholder="请选择系统角色" clearable filterable style="width:100%;">
<el-option v-for="item in roleTypeInfo.list" :key="item.value" :label="item.label" :value="item.value" />
</el-select>
</el-form-item>
</el-form>
<template #footer>
<span class="dialog-footer">
<el-button @click="cancelFn">取消</el-button>
<el-button type="primary" @click="publishFn">
保存
</el-button>
</span>
</template>
</el-dialog>
</template>
<script lang="ts" setup>
import type { FormInstance, FormRules } from 'element-plus'
import { ElMessage } from 'element-plus'
const emits = defineEmits(['send'])
const addShow = ref(false)
let title = ref("新增")
const ruleFormRef = ref()
const form = reactive({
userName: '',
IDCard: '',
sex: '',
contactgWays:'',
position:'',
roleType: ''
})
const roleTypeInfo = reactive({
list: [{
value: 'Option1',
label: 'Option1',
},
{
value: 'Option2',
label: 'Option2',
}]
})
const positionIfo = reactive({
list: [{
value: 'Option1',
label: 'Option1',
},
{
value: 'Option2',
label: 'Option2',
}]
})
const sexInfo = reactive({
list: [{
value: 'Option1',
label: 'Option1',
},
{
value: 'Option2',
label: 'Option2',
}]
})
// const validatorLink = (rule: any, value: any, callback: any) => {
// if (linkReg.test(value)) {
// callback()
// } else {
// callback(new Error("请输入正确格式的跳转链接"))
// }
// }
const formRules = reactive<FormRules<any>>({
userName: [
{ required: true, message: '请输入姓名', trigger: 'blur' },
],
IDCard: [
{ required: true, message: '请输入身份证', trigger: 'blur' },
],
sex: [
{ required: true, message: '请选择性别', trigger: 'blur' },
],
contactgWays: [
{ required: true, message: '请输入联系方式', trigger: 'blur' },
],
position: [
{ required: true, message: '请选择所属岗位', trigger: 'blur' },
],
roleType: [
{ required: true, message: '请选择系统角色', trigger: 'blur' },
],
})
const publishFn = () => {
if (!ruleFormRef) return
ruleFormRef.value.validate((valid: any) => {
if (valid) {
if (form.linkUrl && linkReg.test(form.linkUrl)) {
ElMessage({
type: 'warning',
message: "请输入正确格式的跳转链接"
})
}
console.log('submit!')
} else {
console.log('error submit!')
return false
}
})
}
const cancelFn = (formEl: FormInstance | undefined) => {
if (!ruleFormRef) return
ruleFormRef.value.resetFields()
addShow.value = false
}
const beforeChange = (ev: any) => {
return new Promise((resolve, reject) => {
resolve(true)
})
}
const open = (val: any) => {
title.value = "新增"
addShow.value = true
}
const edit = () => {
title.value = "编辑"
addShow.value = true
}
defineExpose({
open,
edit
})
</script>
<style scoped lang="scss"></style>

70
src/views/systemManage/userManage/com/headerTop.vue Normal file
View File

@ -0,0 +1,70 @@
<template>
<el-card shadow="always" class="search_header_top_row1">
<el-form :inline="true" :model="filterForm" class="demo-form-inline">
<el-form-item label="姓名/身份证/联系方式">
<el-input v-model="filterForm.keyword" placeholder="请输入姓名/身份证/联系方式" clearable style="width:250px;" />
</el-form-item>
<el-form-item label="系统角色" prop="roleType">
<el-select v-model="filterForm.roleType" placeholder="请选择系统角色" clearable filterable>
<el-option v-for="item in roleTypeInfo.list" :key="item.value" :label="item.label"
:value="item.value" />
</el-select>
</el-form-item>
<el-form-item>
<el-button type="primary" @click="serachFn">查询</el-button>
<el-button type="plain" @click="resetFn">重置</el-button>
</el-form-item>
</el-form>
<div>
<el-button type="primary" @click="addFn">新增</el-button>
<el-button type="primary" @click="batchDownFn">下载</el-button>
<el-button type="primary" @click="exportFn">导出</el-button>
</div>
</el-card>
</template>
<script lang="ts" setup>
const emits = defineEmits(['search', 'reset', 'export','add','batchDown'])
const filterForm = reactive({
keyword: '',
roleType: ''
})
const roleTypeInfo = reactive({
list: [{
value: 'Option1',
label: 'Option1',
},
{
value: 'Option2',
label: 'Option2',
}]
})
const serachFn = () => {
emits('search', filterForm)
}
const resetFn = () => {
emits('reset')
}
const exportFn = () => {
emits('export')
}
const addFn = () => {
emits('add')
}
const batchDownFn = () => {
emits('batchDown')
}
</script>
<style scoped lang="scss"></style>

191
src/views/systemManage/userManage/index.vue Normal file
View File

@ -0,0 +1,191 @@
<template>
<headerTop @search="searchFn" @reset="resetFn" @export="exportFn" @add="addFn" @batchDown="batchDownFn"></headerTop>
<addCom ref="addComRef"></addCom>
<el-card shadow="always" class="content_body_row">
<el-table :data="tableListInfo.list" border style="width: 100%" show-overflow-tooltip
@selection-change="handleSelectionChange"
:max-height="'calc(100vh - 72px - 48px - 65px - 12px - 60px - 88px)'"
:height="'calc(100vh - 72px - 48px - 65px - 12px - 60px - 88px)'">
<el-table-column type="selection" width="55" />
<el-table-column type="index" width="72" label="序号" />
<el-table-column prop="v_name" label="姓名" min-width="150" />
<el-table-column prop="v_IDcard" label="身份证号" min-width="150" />
<el-table-column prop="v_sex" label="性别" min-width="220">
</el-table-column>
<el-table-column prop="v_contact" label="联系方式" min-width="220">
</el-table-column>
<el-table-column prop="v_position" label="所属岗位" min-width="220">
</el-table-column>
<el-table-column prop="v_system_role" label="系统角色" min-width="220">
</el-table-column>
<el-table-column prop="v_create_time" label="创建日期" min-width="220">
</el-table-column>
<el-table-column label="操作" align="center" width="240">
<template #default="scope">
<el-button type="primary" size="small" @click.prevent="editRowFn(scope.row)">
编辑
</el-button>
<el-button type="primary" size="small" @click.prevent="resetPasswordFn(scope.row)">
重置密码
</el-button>
<el-button type="danger" size="small" @click.prevent="deleteRowFn(scope.row)">
删除
</el-button>
</template>
</el-table-column>
</el-table>
<div class="paination_out">
<Pagination :currentPage="paginationInfo.currentPage" :pageSize="paginationInfo.pageSize" @sendPage="getPageFn">
</Pagination>
</div>
</el-card>
</template>
<script lang="ts" setup>
import headerTop from "./com/headerTop.vue"
import addCom from "./com/addCom.vue"
import { ElConfirmBeforeOpert, ElMessageBoxOpert } from "utils/elementCom"
const addComRef = ref()
const paginationInfo = reactive({
currentPage: 1,
pageSize: 15
})
const tableData = [
{
v_id: '1',
v_name: '2016-05-03',
v_IDcard: 'Tom',
v_sex: 'California',
v_contact: 'Los Angeles',
v_position: 'No. 189, Grove St, Los Angeles',
v_system_role: 'CA 90036',
v_create_time: 'No. 189, Grove St, Los Angeles',
},
{
v_id: '2',
v_name: '2016-05-03',
v_IDcard: 'Tom',
v_sex: 'California',
v_contact: 'Los Angeles',
v_position: 'No. 189, Grove St, Los Angeles',
v_system_role: 'CA 90036',
v_create_time: 'No. 189, Grove St, Los Angeles',
},
{
v_id: '3',
v_name: '2016-05-03',
v_IDcard: 'Tom',
v_sex: 'California',
v_contact: 'Los Angeles',
v_position: 'No. 189, Grove St, Los Angeles',
v_system_role: 'CA 90036',
v_create_time: 'No. 189, Grove St, Los Angeles',
},
{
v_id: '4',
v_name: '2016-05-03',
v_IDcard: 'Tom',
v_sex: 'California',
v_contact: 'Los Angeles',
v_position: 'No. 189, Grove St, Los Angeles',
v_system_role: 'CA 90036',
v_create_time: 'No. 189, Grove St, Los Angeles',
},
{
v_id: '5',
v_name: '2016-05-03',
v_IDcard: 'Tom',
v_sex: 'California',
v_contact: 'Los Angeles',
v_position: 'No. 189, Grove St, Los Angeles',
v_system_role: 'CA 90036',
v_create_time: 'No. 189, Grove St, Los Angeles',
},
]
let tableListInfo = reactive({
list: tableData
})
const editRowFn = (row: any) => {
addComRef.value.edit({
a: "111"
})
}
const editCallBack = (row: any, value: any) => {
console.log("editCallBack", row, value)
}
const resetPasswordFn = (row: any) => {
ElMessageBoxOpert(
'编辑',
'',
'确定',
'取消',
(val: any) => {
if (!val) {
return false
}
},
"请填写类型模板",
editCallBack,
row
)
}
const deleteItem = (row: any) => {
const itemID = row.v_id
console.log("ITEMid", row)
}
const deleteRowFn = (row: any) => {
ElConfirmBeforeOpert(
'操作确认',
'是否确定删除数据？',
deleteItem,
'确定',
'取消',
row
)
}
const searchFn = () => {
}
const resetFn = () => {
}
const addFn = () => {
addComRef.value.open()
}
const batchDownFn =()=>{
}
const getPageFn = (val: any) => {
paginationInfo.currentPage = val.currentPage
paginationInfo.pageSize = val.pageSize
initTableList()
}
const initTableList = () => {
}
</script>
<style scoped lang="scss"></style>