1
This commit is contained in:
parent
f43a8643a2
commit
bdf8afaa68
@ -110,6 +110,60 @@ export const YearCreate= function(date: any) {
|
||||
export const YearInfo= function(date: any) {
|
||||
return Http.post('/api/backend/Year/getYearFind', date)
|
||||
}
|
||||
//科室列表
|
||||
export const userGroupData= function(date: any) {
|
||||
return Http.post('/api/backend/User_group/getUserGroupData', date)
|
||||
}
|
||||
//科室列表(新增)
|
||||
export const userGroupDataAdd= function(date: any) {
|
||||
return Http.post('/api/backend/User_group/create', date)
|
||||
}
|
||||
//科室列表(编辑)
|
||||
export const userGroupDataEdit= function(date: any) {
|
||||
return Http.post('/api/backend/User_group/update', date)
|
||||
}
|
||||
//科室列表(删除)
|
||||
export const userGroupDataDel= function(date: any) {
|
||||
return Http.post('/api/backend/User_group/delete', date)
|
||||
}
|
||||
|
||||
|
||||
|
||||
//党支部列表
|
||||
export const partyGroupData= function(date: any) {
|
||||
return Http.post('/api/backend/Party_group/getPartyGroupData', date)
|
||||
}
|
||||
//党支部列表(新增)
|
||||
export const partyGroupDataAdd= function(date: any) {
|
||||
return Http.post('/api/backend/Party_group/create', date)
|
||||
}
|
||||
//党支部列表(编辑)
|
||||
export const partyGroupDataEdit= function(date: any) {
|
||||
return Http.post('/api/backend/Party_group/update', date)
|
||||
}
|
||||
//党支部列表(删除)
|
||||
export const partyGroupDataDel= function(date: any) {
|
||||
return Http.post('/api/backend/Party_group/delete', date)
|
||||
}
|
||||
|
||||
//菜单列表
|
||||
export const menuData= function(date: any) {
|
||||
return Http.post('/api/backend/auth_rule/getAuthRuleData', date)
|
||||
}
|
||||
//菜单列表(新增)
|
||||
export const menuDataAdd= function(date: any) {
|
||||
return Http.post('/api/backend/auth_rule/create', date)
|
||||
}
|
||||
//菜单(编辑)
|
||||
export const menuDataEdit= function(date: any) {
|
||||
return Http.post('/api/backend/auth_rule/update', date)
|
||||
}
|
||||
//菜单(删除)
|
||||
export const menuDataDel= function(date: any) {
|
||||
return Http.post('/api/backend/auth_rule/delete', date)
|
||||
}
|
||||
|
||||
|
||||
|
||||
|
||||
|
||||
|
||||
@ -204,10 +204,20 @@ const menus = [
|
||||
icon: "layui-icon-util",
|
||||
title: "部门管理"
|
||||
},
|
||||
{
|
||||
id: "/system/party",
|
||||
icon: "layui-icon-util",
|
||||
title: "党支部管理"
|
||||
},
|
||||
{
|
||||
id: "/system/permission",
|
||||
icon: "layui-icon-util",
|
||||
title: "权限管理"
|
||||
},
|
||||
{
|
||||
id: "/system/menu",
|
||||
icon: "layui-icon-util",
|
||||
title: "菜单管理"
|
||||
}
|
||||
]
|
||||
},
|
||||
|
||||
@ -41,11 +41,21 @@ export default [
|
||||
name: 'systemDepartment',
|
||||
component: () => import('../../views/system/department.vue'),
|
||||
meta: {title: '部门管理', requireAuth: true, affix: true, closable: true},
|
||||
},{
|
||||
path: '/system/party',
|
||||
name: 'systemParty',
|
||||
component: () => import('../../views/system/party.vue'),
|
||||
meta: {title: '党支部管理', requireAuth: true, affix: true, closable: true},
|
||||
},{
|
||||
path: '/system/permission',
|
||||
name: 'systemPermission',
|
||||
component: () => import('../../views/system/permission.vue'),
|
||||
meta: {title: '权限管理', requireAuth: true, affix: true, closable: true},
|
||||
},{
|
||||
path: '/system/menu',
|
||||
name: 'systemMenu',
|
||||
component: () => import('../../views/system/menu.vue'),
|
||||
meta: {title: '菜单管理', requireAuth: true, affix: true, closable: true},
|
||||
}
|
||||
]
|
||||
},
|
||||
|
||||
@ -104,7 +104,7 @@ const userStore = useUserStore()
|
||||
const active = ref(-1);
|
||||
const visible11 = ref(false);
|
||||
|
||||
const page = ref({total: 100, limit: 10, current: 2});
|
||||
const page = ref({total: 1, limit: 10, current: 1});
|
||||
|
||||
const dataSource = ref([]);
|
||||
|
||||
|
||||
@ -1,694 +1,181 @@
|
||||
<template>
|
||||
<lay-container fluid="true" class="organization-box">
|
||||
<div style="display: flex">
|
||||
<div :style="{ width: isFold ? `0px` : `300px` }" class="left-tree">
|
||||
<!-- tree -->
|
||||
<div v-show="!isFold">
|
||||
<lay-button type="normal" size="sm" @click="toAdd">
|
||||
<lay-icon type="layui-icon-addition"></lay-icon>新建
|
||||
</lay-button>
|
||||
<lay-button type="warm" size="sm" @click="toEdit">
|
||||
<lay-icon type="layui-icon-edit"></lay-icon>修改
|
||||
</lay-button>
|
||||
<lay-button type="danger" size="sm" @click="toDelete">
|
||||
<lay-icon type="layui-icon-delete"></lay-icon>删除
|
||||
</lay-button>
|
||||
</div>
|
||||
|
||||
<lay-tree
|
||||
v-show="!isFold"
|
||||
style="margin-top: 10px"
|
||||
:data="data"
|
||||
v-model:selectedKey="selectedKey"
|
||||
:showLine="showLine"
|
||||
:expandKeys="[1, 3, 4]"
|
||||
@node-click="handleClick"
|
||||
>
|
||||
<template #title="{ data }">
|
||||
<span :class="selectedKey == data.id ? 'isChecked' : ''">
|
||||
{{ data.title }} {{ data.id }}
|
||||
</span>
|
||||
</template>
|
||||
</lay-tree>
|
||||
<div class="isFold" @click="isFold = !isFold">
|
||||
<lay-icon v-if="!isFold" class="layui-icon-left"></lay-icon>
|
||||
<lay-icon v-else class="layui-icon-right"></lay-icon>
|
||||
</div>
|
||||
<lay-container style="padding: 20px">
|
||||
<lay-card>
|
||||
<div style="padding: 10px">
|
||||
<span style="font-size: 18px;vertical-align: center;margin-right: 20px">科室管理</span>
|
||||
<lay-button type="primary" @click="openNew()" size="sm">新增科室</lay-button>
|
||||
</div>
|
||||
<div style="flex: 1; padding: 10px; over-flow: auto">
|
||||
<!-- table -->
|
||||
<lay-card>
|
||||
<lay-form>
|
||||
<lay-row>
|
||||
<lay-col :md="5">
|
||||
<lay-form-item label="用户账号" label-width="80">
|
||||
<lay-input
|
||||
v-model="searchQuery.userAccount"
|
||||
placeholder="请输入"
|
||||
size="sm"
|
||||
:allow-clear="true"
|
||||
style="width: 98%"
|
||||
></lay-input>
|
||||
</lay-form-item>
|
||||
</lay-col>
|
||||
<lay-col :md="5">
|
||||
<lay-form-item label="用户名" label-width="80">
|
||||
<lay-input
|
||||
v-model="searchQuery.userName"
|
||||
placeholder="请输入"
|
||||
size="sm"
|
||||
:allow-clear="true"
|
||||
style="width: 98%"
|
||||
></lay-input>
|
||||
</lay-form-item>
|
||||
</lay-col>
|
||||
<lay-col :md="5">
|
||||
<lay-form-item label="性别" label-width="80">
|
||||
<lay-select
|
||||
class="search-input"
|
||||
size="sm"
|
||||
v-model="searchQuery.sex"
|
||||
:allow-clear="true"
|
||||
placeholder="请选择"
|
||||
>
|
||||
<lay-select-option
|
||||
value="man"
|
||||
label="男"
|
||||
></lay-select-option>
|
||||
<lay-select-option
|
||||
value="woman"
|
||||
label="女"
|
||||
></lay-select-option>
|
||||
</lay-select>
|
||||
</lay-form-item>
|
||||
</lay-col>
|
||||
<lay-col :md="5">
|
||||
<lay-form-item label-width="20">
|
||||
<lay-button
|
||||
style="margin-left: 20px"
|
||||
type="normal"
|
||||
size="sm"
|
||||
@click="toSearch"
|
||||
>
|
||||
查询
|
||||
</lay-button>
|
||||
<lay-button size="sm" @click="toReset"> 重置 </lay-button>
|
||||
</lay-form-item>
|
||||
</lay-col>
|
||||
</lay-row>
|
||||
</lay-form>
|
||||
</lay-card>
|
||||
<lay-table
|
||||
:page="page"
|
||||
:height="'100%'"
|
||||
:columns="columns"
|
||||
:loading="loading"
|
||||
:default-toolbar="true"
|
||||
:data-source="dataSource"
|
||||
v-model:selected-keys="selectedKeys"
|
||||
@change="change"
|
||||
@sortChange="sortChange"
|
||||
>
|
||||
<template #status="{ row }">
|
||||
<lay-switch
|
||||
:model-value="row.status"
|
||||
@change="changeStatus($event, row)"
|
||||
></lay-switch>
|
||||
</template>
|
||||
<template #role="{ row }">
|
||||
<lay-tag color="#165DFF" variant="light">{{ row.role }}</lay-tag>
|
||||
</template>
|
||||
|
||||
<template v-slot:toolbar>
|
||||
<lay-button
|
||||
size="sm"
|
||||
type="primary"
|
||||
@click="changeVisible11('新增', null)"
|
||||
>新增</lay-button
|
||||
>
|
||||
<lay-button size="sm" @click="toRemove">删除</lay-button>
|
||||
</template>
|
||||
<template v-slot:operator="{ row }">
|
||||
<lay-button
|
||||
size="xs"
|
||||
border="green"
|
||||
border-style="dashed"
|
||||
@click="changeVisible11('编辑', row)"
|
||||
>编辑</lay-button
|
||||
>
|
||||
<lay-popconfirm
|
||||
content="确定要删除此用户吗?"
|
||||
@confirm="confirm"
|
||||
@cancel="cancel"
|
||||
>
|
||||
<lay-button size="xs" border="red" border-style="dashed"
|
||||
>删除</lay-button
|
||||
>
|
||||
<lay-table size="lg" ref="tableRef6" children-column-name="children" :columns="columns6"
|
||||
:data-source="dataSource6">
|
||||
<template v-slot:status="{ data }">
|
||||
<span v-if="data.status == 1">启用</span>
|
||||
<span v-if="data.status == 0">禁用</span>
|
||||
</template>
|
||||
<template v-slot:operator="{ data }">
|
||||
<lay-space size="lg">
|
||||
<span style="color: #00A394;cursor: pointer" @click="addShowMsd(data, data.pid)">平级新增</span>
|
||||
<span style="color: #00A394;cursor: pointer"
|
||||
@click="addShowMsd(data, data.id)">子级新增</span>
|
||||
<span style="color: #00A394;cursor: pointer" @click="editShowMsd(data)">编辑</span>
|
||||
<lay-popconfirm trigger="click" content="确定要删除吗？" @confirm="delShowMsd(data)">
|
||||
<span style="color: #00A394;cursor: pointer">删除</span>
|
||||
</lay-popconfirm>
|
||||
</template>
|
||||
</lay-table>
|
||||
</div>
|
||||
</div>
|
||||
<lay-layer v-model="visible11" :title="title" :area="['500px', '450px']">
|
||||
<div style="padding: 20px">
|
||||
<lay-form :model="model11" ref="layFormRef11" required>
|
||||
<lay-form-item label="用户账号" prop="account">
|
||||
<lay-input v-model="model11.account"></lay-input>
|
||||
</lay-space>
|
||||
</template>
|
||||
</lay-table>
|
||||
</lay-card>
|
||||
<lay-layer v-model="addShow" :title="addIsEdit == 1 ? '新增科室' : '编辑科室'" :type="4" :shade="true"
|
||||
:area="['950px', '100%']" :btn="addButton">
|
||||
<lay-container fluid="true" style="padding: 20px">
|
||||
<lay-form :model="addData">
|
||||
<lay-form-item required label="科室名称" prop="name">
|
||||
<lay-input v-model="addData.name" placeholder="请输入科室名称"></lay-input>
|
||||
</lay-form-item>
|
||||
<lay-form-item label="用户名" prop="name">
|
||||
<lay-input v-model="model11.name"></lay-input>
|
||||
<lay-form-item required label="科室描述" prop="describe">
|
||||
<lay-textarea placeholder="请输入科室描述" v-model="addData.describe"></lay-textarea>
|
||||
</lay-form-item>
|
||||
<lay-form-item label="性别" prop="sex">
|
||||
<lay-select v-model="model11.sex" style="width: 100%">
|
||||
<lay-select-option value="男" label="男"></lay-select-option>
|
||||
<lay-select-option value="女" label="女"></lay-select-option>
|
||||
<lay-form-item required label="状态" prop="status">
|
||||
<lay-select v-model="addData.status" placeholder="请选择">
|
||||
<lay-select-option :value="1" label="启用"></lay-select-option>
|
||||
<lay-select-option :value="0" label="禁用"></lay-select-option>
|
||||
</lay-select>
|
||||
</lay-form-item>
|
||||
<lay-form-item label="角色" prop="role">
|
||||
<lay-input v-model="model11.role"></lay-input>
|
||||
</lay-form-item>
|
||||
<lay-form-item label="状态" prop="status">
|
||||
<lay-switch :model-value="model11.status"></lay-switch>
|
||||
</lay-form-item>
|
||||
</lay-form>
|
||||
<div style="width: 100%; text-align: center">
|
||||
<lay-button size="sm" type="primary" @click="toSubmit"
|
||||
>保存</lay-button
|
||||
>
|
||||
<lay-button size="sm" @click="toCancel">取消</lay-button>
|
||||
</div>
|
||||
</div>
|
||||
</lay-layer>
|
||||
|
||||
<lay-layer v-model="visible22" :title="title22" :area="['700px', '400px']">
|
||||
<div style="padding: 20px">
|
||||
<lay-form :model="model22" ref="layFormRef11" required>
|
||||
<lay-row>
|
||||
<lay-col md="12">
|
||||
<lay-form-item label="上级机构" prop="organization">
|
||||
<lay-select v-model="model22.organization" style="width: 100%">
|
||||
<lay-select-option value="1" label="研发部">
|
||||
</lay-select-option>
|
||||
<lay-select-option value="2" label="测试部">
|
||||
</lay-select-option>
|
||||
<lay-select-option value="3" label="设计部">
|
||||
</lay-select-option>
|
||||
<lay-select-option value="4" label="市场部">
|
||||
</lay-select-option>
|
||||
<lay-select-option value="5" label="运维部">
|
||||
</lay-select-option>
|
||||
</lay-select>
|
||||
</lay-form-item>
|
||||
<lay-form-item label="机构名称" prop="name">
|
||||
<lay-input v-model="model22.name"></lay-input>
|
||||
</lay-form-item>
|
||||
<lay-form-item label="机构全称" prop="fullName">
|
||||
<lay-input v-model="model22.fullName"></lay-input>
|
||||
</lay-form-item>
|
||||
<lay-form-item label="机构代码" prop="code">
|
||||
<lay-input v-model="model22.code"></lay-input>
|
||||
</lay-form-item>
|
||||
</lay-col>
|
||||
<lay-col md="12">
|
||||
<lay-form-item label="机构类型" prop="type">
|
||||
<lay-select v-model="model22.type" style="width: 100%">
|
||||
<lay-select-option value="1" label="公司"></lay-select-option>
|
||||
<lay-select-option value="2" label="子公司">
|
||||
</lay-select-option>
|
||||
<lay-select-option value="3" label="部门"></lay-select-option>
|
||||
<lay-select-option value="4" label="小组"></lay-select-option>
|
||||
</lay-select>
|
||||
</lay-form-item>
|
||||
<lay-form-item label="排序号" prop="sort">
|
||||
<lay-input-number
|
||||
style="width: 100%"
|
||||
v-model="model22.sort"
|
||||
position="right"
|
||||
></lay-input-number>
|
||||
</lay-form-item>
|
||||
<lay-form-item label="备注" prop="remark">
|
||||
<lay-textarea
|
||||
placeholder="请输入备注"
|
||||
v-model="model22.remark"
|
||||
:rows="4"
|
||||
></lay-textarea>
|
||||
</lay-form-item>
|
||||
</lay-col>
|
||||
</lay-row>
|
||||
</lay-form>
|
||||
<div style="width: 100%; text-align: center">
|
||||
<lay-button size="sm" type="primary" @click="toSubmit"
|
||||
>保存</lay-button
|
||||
>
|
||||
<lay-button size="sm" @click="toCancel">取消</lay-button>
|
||||
</div>
|
||||
</div>
|
||||
</lay-container>
|
||||
</lay-layer>
|
||||
</lay-container>
|
||||
</template>
|
||||
<script setup lang="ts">
|
||||
import { ref, reactive } from 'vue'
|
||||
import { layer } from '@layui/layui-vue'
|
||||
|
||||
const data = ref([
|
||||
{
|
||||
title: 'xxxx公司',
|
||||
id: 1,
|
||||
checked: true,
|
||||
children: [
|
||||
{
|
||||
title: '研发部',
|
||||
id: 2,
|
||||
children: [
|
||||
{
|
||||
title: '研发一部',
|
||||
id: 3
|
||||
},
|
||||
{
|
||||
title: '研发二部',
|
||||
id: 4
|
||||
},
|
||||
{
|
||||
title: '研发三部',
|
||||
id: 5
|
||||
}
|
||||
]
|
||||
},
|
||||
{
|
||||
title: '测试部',
|
||||
id: 6,
|
||||
children: [
|
||||
{
|
||||
title: '测试一部',
|
||||
id: 7,
|
||||
disabled: true
|
||||
},
|
||||
{
|
||||
title: '测试二部',
|
||||
id: 8
|
||||
}
|
||||
]
|
||||
},
|
||||
{
|
||||
title: '设计部',
|
||||
id: 9
|
||||
},
|
||||
{
|
||||
title: '市场部',
|
||||
id: 10
|
||||
}
|
||||
]
|
||||
}
|
||||
])
|
||||
const showLine = ref(false)
|
||||
const selectedKey = ref('')
|
||||
const selectedNode = ref({
|
||||
id: 0,
|
||||
title: ''
|
||||
import {
|
||||
userGroupDataAdd, homeGetHierarchicalDataDelete,
|
||||
userGroupData, userGroupDataEdit, userGroupDataDel
|
||||
} from '../../api/module/home'
|
||||
import { ref, watch, onMounted, reactive } from 'vue'
|
||||
import { layer } from '@layui/layer-vue'
|
||||
//列表内容
|
||||
const dataSource6 = ref([]);
|
||||
const addShow = ref(false)
|
||||
//1 add 2 edit
|
||||
const addIsEdit = ref(1)
|
||||
const addData = reactive({
|
||||
name: '',
|
||||
describe: '',
|
||||
status: 1,
|
||||
pid: 0,
|
||||
})
|
||||
const isFold = ref(false)
|
||||
const searchQuery = ref({
|
||||
userAccount: '',
|
||||
userName: '',
|
||||
sex: ''
|
||||
onMounted(() => {
|
||||
getHierarchicalData()
|
||||
})
|
||||
function toReset() {
|
||||
searchQuery.value = {
|
||||
userAccount: '',
|
||||
userName: '',
|
||||
sex: ''
|
||||
}
|
||||
}
|
||||
function handleClick(node: any) {
|
||||
selectedNode.value = JSON.parse(JSON.stringify(node))
|
||||
page.current = selectedNode.value.id
|
||||
change(page)
|
||||
}
|
||||
function toAdd() {
|
||||
visible22.value = true
|
||||
}
|
||||
function toEdit() {
|
||||
model22.value = {
|
||||
organization: '1',
|
||||
name: '研发部',
|
||||
fullName: 'xxxx公司-研发部',
|
||||
code: '001',
|
||||
type: '1',
|
||||
sort: 1,
|
||||
remark: '备注'
|
||||
}
|
||||
visible22.value = true
|
||||
}
|
||||
function toDelete() {
|
||||
if (selectedKey.value == '') {
|
||||
layer.msg('您未选择组织机构，请先选择要删除的组织机构', {
|
||||
icon: 3,
|
||||
time: 2000
|
||||
})
|
||||
return
|
||||
}
|
||||
layer.confirm(
|
||||
'您将删除所选中的组织机构 [ ' + selectedNode.value.title + ' ] ？',
|
||||
{
|
||||
title: '提示',
|
||||
btn: [
|
||||
{
|
||||
text: '确定',
|
||||
callback: (id: any) => {
|
||||
layer.msg('您已成功删除')
|
||||
layer.close(id)
|
||||
}
|
||||
},
|
||||
{
|
||||
text: '取消',
|
||||
callback: (id: any) => {
|
||||
layer.msg('您已取消操作')
|
||||
layer.close(id)
|
||||
}
|
||||
}
|
||||
]
|
||||
}
|
||||
)
|
||||
}
|
||||
const openNew = () => {
|
||||
|
||||
function toSearch() {
|
||||
page.current = 1
|
||||
change(page)
|
||||
addData.id = 0;
|
||||
addData.pid = 0;
|
||||
addIsEdit.value = 1;
|
||||
addData.name = '';
|
||||
addData.describe = '';
|
||||
addData.status = 1;
|
||||
addShow.value = true;
|
||||
}
|
||||
|
||||
const loading = ref(false)
|
||||
const selectedKeys = ref()
|
||||
const page = reactive({ current: 1, limit: 10, total: 100 })
|
||||
const columns = ref([
|
||||
{ title: '选项', width: '55px', type: 'checkbox', fixed: 'left' },
|
||||
{ title: '编号', width: '80px', key: 'id', fixed: 'left', sort: 'id' },
|
||||
{ title: '用户账号', width: '80px', key: 'account', sort: 'account' },
|
||||
{ title: '用户名', width: '80px', key: 'name', sort: 'name' },
|
||||
{ title: '性别', width: '80px', key: 'sex', sort: 'sex' },
|
||||
{ title: '角色', width: '120px', key: 'role', customSlot: 'role' },
|
||||
const getHierarchicalData = () => {
|
||||
userGroupData({}).then((res) => {
|
||||
console.log(res)
|
||||
if (res.code == 1) {
|
||||
dataSource6.value = res.data;
|
||||
} else {
|
||||
layer.msg(res.msg, { icon: 2 })
|
||||
}
|
||||
})
|
||||
}
|
||||
const addShowMsd = (data, pid) => {
|
||||
console.log(data);
|
||||
addShow.value = true;
|
||||
addData.id = 0;
|
||||
addData.pid = pid;
|
||||
addData.name = '';
|
||||
addData.describe = '';
|
||||
addData.status = 1;
|
||||
addIsEdit.value = 1;
|
||||
}
|
||||
const editShowMsd = (data) => {
|
||||
console.log(data);
|
||||
addShow.value = true;
|
||||
addData.id = data.id;
|
||||
addData.name = data.name;
|
||||
addData.pid = data.pid;
|
||||
addData.status = parseInt(data.status);
|
||||
addData.describe = data.describe;
|
||||
addIsEdit.value = 2;
|
||||
}
|
||||
const delShowMsd = async (data) => {
|
||||
var res = await userGroupDataDel({ id: data.id });
|
||||
console.log(res)
|
||||
if (res.code == 1) {
|
||||
layer.msg('删除成功！', { icon: 1 })
|
||||
getHierarchicalData();
|
||||
} else {
|
||||
layer.msg(res.msg, { icon: 2 })
|
||||
}
|
||||
}
|
||||
const columns6 = [
|
||||
{
|
||||
title: '创建时间',
|
||||
width: '120px',
|
||||
key: 'joinTime'
|
||||
title: "科室名称",
|
||||
width: "200px",
|
||||
key: "name"
|
||||
},
|
||||
{
|
||||
title: "科室描述",
|
||||
width: "300px",
|
||||
key: "describe"
|
||||
},
|
||||
{
|
||||
title: "状态",
|
||||
width: "100px",
|
||||
customSlot: 'status',
|
||||
key: "status"
|
||||
},
|
||||
{ title: '状态', width: '120px', key: 'status', sort: 'status' },
|
||||
|
||||
{
|
||||
title: '操作',
|
||||
width: '150px',
|
||||
width: '180px',
|
||||
customSlot: 'operator',
|
||||
key: 'operator',
|
||||
align: 'center',
|
||||
fixed: 'right'
|
||||
}
|
||||
])
|
||||
const change = (page: any) => {
|
||||
loading.value = true
|
||||
setTimeout(() => {
|
||||
dataSource.value = loadDataSource(page.current, page.limit)
|
||||
loading.value = false
|
||||
}, 1000)
|
||||
}
|
||||
const sortChange = (key: any, sort: number) => {
|
||||
layer.msg(`字段${key} - 排序${sort}, 你可以利用 sort-change 实现服务端排序`)
|
||||
}
|
||||
const dataSource = ref([
|
||||
]
|
||||
const addButton = ref([
|
||||
{
|
||||
id: '1',
|
||||
name: '管理员',
|
||||
sex: '男',
|
||||
role: '管理员',
|
||||
account: 'admin',
|
||||
joinTime: '2022-02-09 18:34:56',
|
||||
status: true
|
||||
},
|
||||
{
|
||||
id: '2',
|
||||
name: '张三2',
|
||||
sex: '男',
|
||||
role: '普通用户',
|
||||
account: '用户2',
|
||||
joinTime: '2022-02-09 18:34:56',
|
||||
status: true
|
||||
},
|
||||
{
|
||||
id: '3',
|
||||
name: '李四3',
|
||||
sex: '男',
|
||||
role: '普通用户',
|
||||
account: '用户3',
|
||||
joinTime: '2022-02-09 18:34:56',
|
||||
status: true
|
||||
},
|
||||
{
|
||||
id: '4',
|
||||
name: '用户4',
|
||||
sex: '男',
|
||||
role: '普通用户',
|
||||
account: '用户4',
|
||||
joinTime: '2022-02-09 18:34:56',
|
||||
status: true
|
||||
},
|
||||
{
|
||||
id: '5',
|
||||
name: '王五5',
|
||||
sex: '男',
|
||||
role: '普通用户',
|
||||
account: '用户5',
|
||||
joinTime: '2022-02-09 18:34:56',
|
||||
status: true
|
||||
},
|
||||
{
|
||||
id: '6',
|
||||
name: '赵六6',
|
||||
sex: '男',
|
||||
role: '普通用户',
|
||||
account: '用户6',
|
||||
joinTime: '2022-02-09 18:34:56',
|
||||
status: true
|
||||
},
|
||||
{
|
||||
id: '7',
|
||||
name: '黄齐7',
|
||||
sex: '男',
|
||||
role: '普通用户',
|
||||
account: '用户7',
|
||||
joinTime: '2022-02-09 18:34:56',
|
||||
status: true
|
||||
},
|
||||
{
|
||||
id: '8',
|
||||
name: '用户8',
|
||||
sex: '男',
|
||||
role: '普通用户',
|
||||
account: '用户8',
|
||||
joinTime: '2022-02-09 18:34:56',
|
||||
status: true
|
||||
},
|
||||
{
|
||||
id: '9',
|
||||
name: '游客9',
|
||||
sex: '男',
|
||||
role: '游客',
|
||||
account: '游客9',
|
||||
joinTime: '用户22-02-09 18:34:56',
|
||||
status: true
|
||||
},
|
||||
{
|
||||
id: '10',
|
||||
name: '用户10',
|
||||
sex: '女',
|
||||
role: '普通用户',
|
||||
account: 'user10',
|
||||
joinTime: '2022-02-09 18:34:56 18:34:56',
|
||||
status: true
|
||||
}
|
||||
])
|
||||
const changeStatus = (isChecked: boolean, row: any) => {
|
||||
dataSource.value.forEach((item) => {
|
||||
if (item.id === row.id) {
|
||||
layer.msg('Success', { icon: 1 }, () => {
|
||||
item.status = isChecked
|
||||
})
|
||||
}
|
||||
})
|
||||
}
|
||||
const remove = () => {
|
||||
layer.msg(selectedKeys.value, { area: '50%' })
|
||||
}
|
||||
const loadDataSource = (page: number, pageSize: number) => {
|
||||
var response = []
|
||||
var startIndex = (page - 1) * pageSize + 1
|
||||
var endIndex = page * pageSize
|
||||
for (var i = startIndex; i <= endIndex; i++) {
|
||||
response.push({
|
||||
id: `${i}`,
|
||||
account: `user${i}`,
|
||||
sex: '男',
|
||||
name: `用户${i}`,
|
||||
joinTime: '2022-02-09 18:34:56',
|
||||
role: '普通用户',
|
||||
status: true
|
||||
})
|
||||
}
|
||||
return response
|
||||
}
|
||||
const model11 = ref({
|
||||
name: '',
|
||||
role: '',
|
||||
sex: '',
|
||||
status: '',
|
||||
account: ''
|
||||
})
|
||||
const layFormRef11 = ref()
|
||||
const visible11 = ref(false)
|
||||
const title = ref('新增')
|
||||
const changeVisible11 = (text: any, row: any) => {
|
||||
title.value = text
|
||||
if (row != null) {
|
||||
let info = JSON.parse(JSON.stringify(row))
|
||||
model11.value = info
|
||||
} else {
|
||||
model11.value = {
|
||||
name: '',
|
||||
role: '',
|
||||
sex: '',
|
||||
status: '',
|
||||
account: ''
|
||||
}
|
||||
}
|
||||
visible11.value = !visible11.value
|
||||
}
|
||||
const submit11 = function () {
|
||||
layFormRef11.value.validate((isValidate: any, model: any, errors: any) => {
|
||||
layer.open({
|
||||
type: 1,
|
||||
title: '表单提交结果',
|
||||
content: `<div style="padding: 10px"><p>是否通过 : ${isValidate}</p> <p>表单数据 : ${JSON.stringify(
|
||||
model
|
||||
)} </p> <p>错误信息 : ${JSON.stringify(errors)}</p></div>`,
|
||||
shade: false,
|
||||
isHtmlFragment: true,
|
||||
btn: [
|
||||
{
|
||||
text: '确认',
|
||||
callback(index: any) {
|
||||
layer.close(index)
|
||||
}
|
||||
}
|
||||
],
|
||||
area: '500px'
|
||||
})
|
||||
})
|
||||
}
|
||||
// 清除校验
|
||||
const clearValidate11 = function () {
|
||||
layFormRef11.value.clearValidate()
|
||||
}
|
||||
// 重置表单
|
||||
const reset11 = function () {
|
||||
layFormRef11.value.reset()
|
||||
}
|
||||
function toRemove() {
|
||||
if (selectedKeys.value.length == 0) {
|
||||
layer.msg('您未选择数据，请先选择要删除的数据', { icon: 3, time: 2000 })
|
||||
return
|
||||
}
|
||||
layer.confirm('您将删除所有选中的数据？', {
|
||||
title: '提示',
|
||||
btn: [
|
||||
{
|
||||
text: '确定',
|
||||
callback: (id: any) => {
|
||||
layer.msg('您已成功删除')
|
||||
layer.close(id)
|
||||
}
|
||||
},
|
||||
{
|
||||
text: '取消',
|
||||
callback: (id: any) => {
|
||||
layer.msg('您已取消操作')
|
||||
layer.close(id)
|
||||
}
|
||||
text: "确认",
|
||||
callback: async () => {
|
||||
console.log(addData);
|
||||
if (addData.name == '') {
|
||||
layer.msg('科室名称不能为空！', { icon: 2 })
|
||||
return;
|
||||
}
|
||||
]
|
||||
})
|
||||
}
|
||||
function toSubmit() {
|
||||
layer.msg('保存成功！', { icon: 1, time: 1000 })
|
||||
visible11.value = false
|
||||
visible22.value = false
|
||||
}
|
||||
function toCancel() {
|
||||
visible11.value = false
|
||||
visible22.value = false
|
||||
}
|
||||
function confirm() {
|
||||
layer.msg('您已成功删除')
|
||||
}
|
||||
function cancel() {
|
||||
layer.msg('您已取消操作')
|
||||
}
|
||||
|
||||
const model22 = ref({
|
||||
organization: '',
|
||||
name: '',
|
||||
fullName: '',
|
||||
code: '',
|
||||
type: '',
|
||||
sort: 0,
|
||||
remark: ''
|
||||
})
|
||||
const layFormRef22 = ref()
|
||||
const visible22 = ref(false)
|
||||
const title22 = ref('新建')
|
||||
if (addData.describe == '') {
|
||||
layer.msg('科室描述不能为空！', { icon: 2 })
|
||||
return;
|
||||
}
|
||||
if (addIsEdit.value == 1) {
|
||||
var res = await userGroupDataAdd(addData);
|
||||
} else {
|
||||
var res = await userGroupDataEdit(addData);
|
||||
}
|
||||
console.log(res)
|
||||
if (res.code == 1) {
|
||||
layer.msg('提交成功！', { icon: 1 })
|
||||
addShow.value = false;
|
||||
getHierarchicalData();
|
||||
} else {
|
||||
layer.msg(res.msg, { icon: 2 })
|
||||
}
|
||||
}
|
||||
},
|
||||
{
|
||||
text: "取消",
|
||||
callback: () => {
|
||||
addShow.value = false;
|
||||
}
|
||||
}
|
||||
])
|
||||
</script>
|
||||
|
||||
<style scoped>
|
||||
.organization-box {
|
||||
width: calc(100vw - 240px);
|
||||
height: calc(100vh - 110px);
|
||||
margin-top: 10px;
|
||||
box-sizing: border-box;
|
||||
background-color: #fff;
|
||||
overflow: hidden;
|
||||
}
|
||||
.left-tree {
|
||||
display: inline-block;
|
||||
padding: 20px 15px 0 5px;
|
||||
height: 1200px;
|
||||
border-right: 1px solid #e6e6e6;
|
||||
box-sizing: border-box;
|
||||
position: relative;
|
||||
}
|
||||
/* todo layui-tree-entry 设置无效 */
|
||||
.layui-tree-entry {
|
||||
position: relative;
|
||||
padding: 10px 0;
|
||||
height: 20px;
|
||||
line-height: 20px;
|
||||
white-space: nowrap;
|
||||
}
|
||||
.isFold {
|
||||
position: absolute;
|
||||
top: 36%;
|
||||
right: -10px;
|
||||
width: 26px;
|
||||
height: 26px;
|
||||
line-height: 26px;
|
||||
border-radius: 13px;
|
||||
background-color: #fff;
|
||||
border: 1px solid #e6e6e6;
|
||||
cursor: pointer;
|
||||
}
|
||||
.search-input {
|
||||
display: inline-block;
|
||||
width: 98%;
|
||||
margin-right: 10px;
|
||||
}
|
||||
|
||||
.isChecked {
|
||||
display: inline-block;
|
||||
background-color: #e8f1ff;
|
||||
color: red;
|
||||
}
|
||||
</style>
|
||||
<style scoped></style>
|
||||
|
||||
@ -1,232 +1,695 @@
|
||||
<template>
|
||||
<lay-container fluid="true" style="padding: 10px">
|
||||
<lay-row :space="10">
|
||||
<lay-col :md="24">
|
||||
<lay-container fluid="true" class="organization-box">
|
||||
<div style="display: flex">
|
||||
<div :style="{ width: isFold ? `0px` : `300px` }" class="left-tree">
|
||||
<!-- tree -->
|
||||
<div v-show="!isFold">
|
||||
<lay-button type="normal" size="sm" @click="toAdd">
|
||||
<lay-icon type="layui-icon-addition"></lay-icon>新建
|
||||
</lay-button>
|
||||
<lay-button type="warm" size="sm" @click="toEdit">
|
||||
<lay-icon type="layui-icon-edit"></lay-icon>修改
|
||||
</lay-button>
|
||||
<lay-button type="danger" size="sm" @click="toDelete">
|
||||
<lay-icon type="layui-icon-delete"></lay-icon>删除
|
||||
</lay-button>
|
||||
</div>
|
||||
|
||||
<lay-tree
|
||||
v-show="!isFold"
|
||||
style="margin-top: 10px"
|
||||
:data="data"
|
||||
v-model:selectedKey="selectedKey"
|
||||
:showLine="showLine"
|
||||
:expandKeys="[1, 3, 4]"
|
||||
@node-click="handleClick"
|
||||
>
|
||||
<template #title="{ data }">
|
||||
<span :class="selectedKey == data.id ? 'isChecked' : ''">
|
||||
{{ data.title }} {{ data.id }}
|
||||
</span>
|
||||
</template>
|
||||
</lay-tree>
|
||||
<div class="isFold" @click="isFold = !isFold">
|
||||
<lay-icon v-if="!isFold" class="layui-icon-left"></lay-icon>
|
||||
<lay-icon v-else class="layui-icon-right"></lay-icon>
|
||||
</div>
|
||||
</div>
|
||||
<div style="flex: 1; padding: 10px; over-flow: auto">
|
||||
<!-- table -->
|
||||
<lay-card>
|
||||
<lay-form style="margin-top: 20px">
|
||||
<lay-form>
|
||||
<lay-row>
|
||||
<lay-col :md="6">
|
||||
<lay-form-item label="账号：" label-width="50">
|
||||
<lay-col :md="5">
|
||||
<lay-form-item label="用户账号" label-width="80">
|
||||
<lay-input
|
||||
v-model="searchAccount"
|
||||
style="width: 90%"
|
||||
v-model="searchQuery.userAccount"
|
||||
placeholder="请输入"
|
||||
size="sm"
|
||||
:allow-clear="true"
|
||||
style="width: 98%"
|
||||
></lay-input>
|
||||
</lay-form-item>
|
||||
</lay-col>
|
||||
<lay-col :md="6">
|
||||
<lay-form-item label="邮箱：" label-width="50">
|
||||
<lay-col :md="5">
|
||||
<lay-form-item label="用户名" label-width="80">
|
||||
<lay-input
|
||||
v-model="searchEmail"
|
||||
style="width: 90%"
|
||||
v-model="searchQuery.userName"
|
||||
placeholder="请输入"
|
||||
size="sm"
|
||||
:allow-clear="true"
|
||||
style="width: 98%"
|
||||
></lay-input>
|
||||
</lay-form-item>
|
||||
</lay-col>
|
||||
<lay-col :md="6">
|
||||
<lay-form-item label-width="0">
|
||||
<lay-button type="primary" @click="toSearch">查询</lay-button>
|
||||
<lay-button @click="toReset">重置</lay-button>
|
||||
<lay-col :md="5">
|
||||
<lay-form-item label="性别" label-width="80">
|
||||
<lay-select
|
||||
class="search-input"
|
||||
size="sm"
|
||||
v-model="searchQuery.sex"
|
||||
:allow-clear="true"
|
||||
placeholder="请选择"
|
||||
>
|
||||
<lay-select-option
|
||||
value="man"
|
||||
label="男"
|
||||
></lay-select-option>
|
||||
<lay-select-option
|
||||
value="woman"
|
||||
label="女"
|
||||
></lay-select-option>
|
||||
</lay-select>
|
||||
</lay-form-item>
|
||||
</lay-col>
|
||||
<lay-col :md="5">
|
||||
<lay-form-item label-width="20">
|
||||
<lay-button
|
||||
style="margin-left: 20px"
|
||||
type="normal"
|
||||
size="sm"
|
||||
@click="toSearch"
|
||||
>
|
||||
查询
|
||||
</lay-button>
|
||||
<lay-button size="sm" @click="toReset"> 重置 </lay-button>
|
||||
</lay-form-item>
|
||||
</lay-col>
|
||||
</lay-row>
|
||||
</lay-form>
|
||||
</lay-card>
|
||||
</lay-col>
|
||||
<lay-col :md="24">
|
||||
<lay-card>
|
||||
<lay-table
|
||||
:page="page"
|
||||
:columns="columns"
|
||||
:dataSource="dataSource"
|
||||
:default-toolbar="defaultToolbar"
|
||||
v-model:selectedKeys="selectedKeys"
|
||||
@row="rowClick"
|
||||
@change="change"
|
||||
<lay-table
|
||||
:page="page"
|
||||
:height="'100%'"
|
||||
:columns="columns"
|
||||
:loading="loading"
|
||||
:default-toolbar="true"
|
||||
:data-source="dataSource"
|
||||
v-model:selected-keys="selectedKeys"
|
||||
@change="change"
|
||||
@sortChange="sortChange"
|
||||
>
|
||||
<template #status="{ row }">
|
||||
<lay-switch
|
||||
:model-value="row.status"
|
||||
@change="changeStatus($event, row)"
|
||||
></lay-switch>
|
||||
</template>
|
||||
<template #role="{ row }">
|
||||
<lay-tag color="#165DFF" variant="light">{{ row.role }}</lay-tag>
|
||||
</template>
|
||||
|
||||
<template v-slot:toolbar>
|
||||
<lay-button
|
||||
size="sm"
|
||||
type="primary"
|
||||
@click="changeVisible11('新增', null)"
|
||||
>新增</lay-button
|
||||
>
|
||||
<lay-button size="sm" @click="toRemove">删除</lay-button>
|
||||
</template>
|
||||
<template v-slot:operator="{ row }">
|
||||
<lay-button
|
||||
size="xs"
|
||||
border="green"
|
||||
border-style="dashed"
|
||||
@click="changeVisible11('编辑', row)"
|
||||
>编辑</lay-button
|
||||
>
|
||||
<lay-popconfirm
|
||||
content="确定要删除此用户吗?"
|
||||
@confirm="confirm"
|
||||
@cancel="cancel"
|
||||
>
|
||||
<lay-button size="xs" border="red" border-style="dashed"
|
||||
>删除</lay-button
|
||||
>
|
||||
</lay-popconfirm>
|
||||
</template>
|
||||
</lay-table>
|
||||
</div>
|
||||
</div>
|
||||
<lay-layer v-model="visible11" :title="title" :area="['500px', '450px']">
|
||||
<div style="padding: 20px">
|
||||
<lay-form :model="model11" ref="layFormRef11" required>
|
||||
<lay-form-item label="用户账号" prop="account">
|
||||
<lay-input v-model="model11.account"></lay-input>
|
||||
</lay-form-item>
|
||||
<lay-form-item label="用户名" prop="name">
|
||||
<lay-input v-model="model11.name"></lay-input>
|
||||
</lay-form-item>
|
||||
<lay-form-item label="性别" prop="sex">
|
||||
<lay-select v-model="model11.sex" style="width: 100%">
|
||||
<lay-select-option value="男" label="男"></lay-select-option>
|
||||
<lay-select-option value="女" label="女"></lay-select-option>
|
||||
</lay-select>
|
||||
</lay-form-item>
|
||||
<lay-form-item label="角色" prop="role">
|
||||
<lay-input v-model="model11.role"></lay-input>
|
||||
</lay-form-item>
|
||||
<lay-form-item label="状态" prop="status">
|
||||
<lay-switch :model-value="model11.status"></lay-switch>
|
||||
</lay-form-item>
|
||||
</lay-form>
|
||||
<div style="width: 100%; text-align: center">
|
||||
<lay-button size="sm" type="primary" @click="toSubmit"
|
||||
>保存</lay-button
|
||||
>
|
||||
<template v-slot:toolbar>
|
||||
<lay-button size="sm" type="primary">新增</lay-button>
|
||||
<lay-button size="sm">删除</lay-button>
|
||||
</template>
|
||||
<template v-slot:username="{ data }">
|
||||
{{ data.username }}
|
||||
</template>
|
||||
<template v-slot:password="{ data }">
|
||||
{{ data.password }}
|
||||
</template>
|
||||
<template v-slot:operator="{}">
|
||||
<lay-button size="xs" type="primary">修改</lay-button>
|
||||
<lay-button size="xs">删除</lay-button>
|
||||
</template>
|
||||
<template v-slot:footer>
|
||||
{{ selectedKeys }}
|
||||
</template>
|
||||
</lay-table>
|
||||
</lay-card>
|
||||
</lay-col>
|
||||
</lay-row>
|
||||
<lay-button size="sm" @click="toCancel">取消</lay-button>
|
||||
</div>
|
||||
</div>
|
||||
</lay-layer>
|
||||
|
||||
<lay-layer v-model="visible22" :title="title22" :area="['700px', '400px']">
|
||||
<div style="padding: 20px">
|
||||
<lay-form :model="model22" ref="layFormRef11" required>
|
||||
<lay-row>
|
||||
<lay-col md="12">
|
||||
<lay-form-item label="上级机构" prop="organization">
|
||||
<lay-select v-model="model22.organization" style="width: 100%">
|
||||
<lay-select-option value="1" label="研发部">
|
||||
</lay-select-option>
|
||||
<lay-select-option value="2" label="测试部">
|
||||
</lay-select-option>
|
||||
<lay-select-option value="3" label="设计部">
|
||||
</lay-select-option>
|
||||
<lay-select-option value="4" label="市场部">
|
||||
</lay-select-option>
|
||||
<lay-select-option value="5" label="运维部">
|
||||
</lay-select-option>
|
||||
</lay-select>
|
||||
</lay-form-item>
|
||||
<lay-form-item label="机构名称" prop="name">
|
||||
<lay-input v-model="model22.name"></lay-input>
|
||||
</lay-form-item>
|
||||
<lay-form-item label="机构全称" prop="fullName">
|
||||
<lay-input v-model="model22.fullName"></lay-input>
|
||||
</lay-form-item>
|
||||
<lay-form-item label="机构代码" prop="code">
|
||||
<lay-input v-model="model22.code"></lay-input>
|
||||
</lay-form-item>
|
||||
</lay-col>
|
||||
<lay-col md="12">
|
||||
<lay-form-item label="机构类型" prop="type">
|
||||
<lay-select v-model="model22.type" style="width: 100%">
|
||||
<lay-select-option value="1" label="公司"></lay-select-option>
|
||||
<lay-select-option value="2" label="子公司">
|
||||
</lay-select-option>
|
||||
<lay-select-option value="3" label="部门"></lay-select-option>
|
||||
<lay-select-option value="4" label="小组"></lay-select-option>
|
||||
</lay-select>
|
||||
</lay-form-item>
|
||||
<lay-form-item label="排序号" prop="sort">
|
||||
<lay-input-number
|
||||
style="width: 100%"
|
||||
v-model="model22.sort"
|
||||
position="right"
|
||||
></lay-input-number>
|
||||
</lay-form-item>
|
||||
<lay-form-item label="备注" prop="remark">
|
||||
<lay-textarea
|
||||
placeholder="请输入备注"
|
||||
v-model="model22.remark"
|
||||
:rows="4"
|
||||
></lay-textarea>
|
||||
</lay-form-item>
|
||||
</lay-col>
|
||||
</lay-row>
|
||||
</lay-form>
|
||||
<div style="width: 100%; text-align: center">
|
||||
<lay-button size="sm" type="primary" @click="toSubmit"
|
||||
>保存</lay-button
|
||||
>
|
||||
<lay-button size="sm" @click="toCancel">取消</lay-button>
|
||||
</div>
|
||||
</div>
|
||||
</lay-layer>
|
||||
</lay-container>
|
||||
</template>
|
||||
<script setup lang="ts">
|
||||
import { ref, reactive } from 'vue'
|
||||
import { layer } from '@layui/layui-vue'
|
||||
|
||||
<script lang="ts">
|
||||
import { ref, watch } from 'vue'
|
||||
import { layer } from '@layui/layer-vue'
|
||||
|
||||
export default {
|
||||
setup() {
|
||||
const selectedKeys = ref(['1'])
|
||||
const checkbox = ref(true)
|
||||
const defaultToolbar = ref(true)
|
||||
const page = ref({ total: 100, limit: 10, current: 2 })
|
||||
|
||||
const columns = [
|
||||
const data = ref([
|
||||
{
|
||||
title: 'xxxx公司',
|
||||
id: 1,
|
||||
checked: true,
|
||||
children: [
|
||||
{
|
||||
title: '复选',
|
||||
width: '50px',
|
||||
type: 'checkbox',
|
||||
fixed: 'left'
|
||||
title: '研发部',
|
||||
id: 2,
|
||||
children: [
|
||||
{
|
||||
title: '研发一部',
|
||||
id: 3
|
||||
},
|
||||
{
|
||||
title: '研发二部',
|
||||
id: 4
|
||||
},
|
||||
{
|
||||
title: '研发三部',
|
||||
id: 5
|
||||
}
|
||||
]
|
||||
},
|
||||
{
|
||||
title: '账户',
|
||||
width: '200px',
|
||||
customSlot: 'username',
|
||||
key: 'username'
|
||||
title: '测试部',
|
||||
id: 6,
|
||||
children: [
|
||||
{
|
||||
title: '测试一部',
|
||||
id: 7,
|
||||
disabled: true
|
||||
},
|
||||
{
|
||||
title: '测试二部',
|
||||
id: 8
|
||||
}
|
||||
]
|
||||
},
|
||||
{
|
||||
title: '密码',
|
||||
width: '180px',
|
||||
customSlot: 'password',
|
||||
key: 'password'
|
||||
title: '设计部',
|
||||
id: 9
|
||||
},
|
||||
{
|
||||
title: '年龄',
|
||||
width: '180px',
|
||||
key: 'age'
|
||||
},
|
||||
{
|
||||
title: '描述',
|
||||
key: 'remark',
|
||||
ellipsisTooltip: true
|
||||
},
|
||||
{
|
||||
title: '操作',
|
||||
width: '180px',
|
||||
customSlot: 'operator',
|
||||
key: 'operator',
|
||||
fixed: 'right'
|
||||
title: '市场部',
|
||||
id: 10
|
||||
}
|
||||
]
|
||||
|
||||
const dataSource = [
|
||||
{
|
||||
id: '1',
|
||||
username: 'shana',
|
||||
password: '夏娜',
|
||||
remark: '花开堪折直须折,莫待无花空折枝',
|
||||
age: '22'
|
||||
},
|
||||
{
|
||||
id: '2',
|
||||
username: 'shana',
|
||||
password: '夏娜',
|
||||
remark: '花开堪折直须折,莫待无花空折枝',
|
||||
age: '22'
|
||||
},
|
||||
{
|
||||
id: '3',
|
||||
username: 'shana',
|
||||
password: '夏娜',
|
||||
remark: '花开堪折直须折,莫待无花空折枝',
|
||||
age: '22'
|
||||
},
|
||||
{
|
||||
id: '4',
|
||||
username: 'shana',
|
||||
password: '夏娜',
|
||||
remark: '花开堪折直须折,莫待无花空折枝',
|
||||
age: '22'
|
||||
},
|
||||
{
|
||||
id: '5',
|
||||
username: 'shana',
|
||||
password: '夏娜',
|
||||
remark: '花开堪折直须折,莫待无花空折枝',
|
||||
age: '22'
|
||||
},
|
||||
{
|
||||
id: '6',
|
||||
username: 'shana',
|
||||
password: '夏娜',
|
||||
remark: '花开堪折直须折,莫待无花空折枝',
|
||||
age: '22'
|
||||
},
|
||||
{
|
||||
id: '7',
|
||||
username: 'shana',
|
||||
password: '夏娜',
|
||||
remark: '花开堪折直须折,莫待无花空折枝',
|
||||
age: '22'
|
||||
},
|
||||
{
|
||||
id: '8',
|
||||
username: 'shana',
|
||||
password: '夏娜',
|
||||
remark: '花开堪折直须折,莫待无花空折枝',
|
||||
age: '22'
|
||||
},
|
||||
{
|
||||
id: '9',
|
||||
username: 'shana',
|
||||
password: '夏娜',
|
||||
remark: '花开堪折直须折,莫待无花空折枝',
|
||||
age: '22'
|
||||
},
|
||||
{
|
||||
id: '10',
|
||||
username: 'shana',
|
||||
password: '夏娜',
|
||||
remark: '花开堪折直须折,莫待无花空折枝',
|
||||
age: '22'
|
||||
},
|
||||
{
|
||||
id: '11',
|
||||
username: 'shana',
|
||||
password: '夏娜',
|
||||
remark: '花开堪折直须折,莫待无花空折枝',
|
||||
age: '22'
|
||||
}
|
||||
]
|
||||
|
||||
const rowClick = function (data: any) {}
|
||||
|
||||
const rowDoubleClick = function (data: any) {}
|
||||
|
||||
const change = function ({ current, limit }: any) {
|
||||
layer.msg('current:' + current + ' limit:' + limit)
|
||||
}
|
||||
function toSearch() {
|
||||
layer.load(2, { time: 3000 })
|
||||
}
|
||||
const searchAccount = ref('')
|
||||
const searchEmail = ref('')
|
||||
function toReset() {
|
||||
searchAccount.value = ''
|
||||
searchEmail.value = ''
|
||||
}
|
||||
|
||||
return {
|
||||
columns,
|
||||
dataSource,
|
||||
selectedKeys,
|
||||
checkbox,
|
||||
defaultToolbar,
|
||||
page,
|
||||
rowClick,
|
||||
rowDoubleClick,
|
||||
change,
|
||||
toReset,
|
||||
toSearch,
|
||||
searchAccount,
|
||||
searchEmail
|
||||
}
|
||||
}
|
||||
])
|
||||
const showLine = ref(false)
|
||||
const selectedKey = ref('')
|
||||
const selectedNode = ref({
|
||||
id: 0,
|
||||
title: ''
|
||||
})
|
||||
const isFold = ref(false)
|
||||
const searchQuery = ref({
|
||||
userAccount: '',
|
||||
userName: '',
|
||||
sex: ''
|
||||
})
|
||||
function toReset() {
|
||||
searchQuery.value = {
|
||||
userAccount: '',
|
||||
userName: '',
|
||||
sex: ''
|
||||
}
|
||||
}
|
||||
function handleClick(node: any) {
|
||||
selectedNode.value = JSON.parse(JSON.stringify(node))
|
||||
page.current = selectedNode.value.id
|
||||
change(page)
|
||||
}
|
||||
function toAdd() {
|
||||
visible22.value = true
|
||||
}
|
||||
function toEdit() {
|
||||
model22.value = {
|
||||
organization: '1',
|
||||
name: '研发部',
|
||||
fullName: 'xxxx公司-研发部',
|
||||
code: '001',
|
||||
type: '1',
|
||||
sort: 1,
|
||||
remark: '备注'
|
||||
}
|
||||
visible22.value = true
|
||||
}
|
||||
function toDelete() {
|
||||
if (selectedKey.value == '') {
|
||||
layer.msg('您未选择组织机构，请先选择要删除的组织机构', {
|
||||
icon: 3,
|
||||
time: 2000
|
||||
})
|
||||
return
|
||||
}
|
||||
layer.confirm(
|
||||
'您将删除所选中的组织机构 [ ' + selectedNode.value.title + ' ] ？',
|
||||
{
|
||||
title: '提示',
|
||||
btn: [
|
||||
{
|
||||
text: '确定',
|
||||
callback: (id: any) => {
|
||||
layer.msg('您已成功删除')
|
||||
layer.close(id)
|
||||
}
|
||||
},
|
||||
{
|
||||
text: '取消',
|
||||
callback: (id: any) => {
|
||||
layer.msg('您已取消操作')
|
||||
layer.close(id)
|
||||
}
|
||||
}
|
||||
]
|
||||
}
|
||||
)
|
||||
}
|
||||
|
||||
function toSearch() {
|
||||
page.current = 1
|
||||
change(page)
|
||||
}
|
||||
|
||||
const loading = ref(false)
|
||||
const selectedKeys = ref()
|
||||
const page = reactive({ current: 1, limit: 10, total: 100 })
|
||||
const columns = ref([
|
||||
{ title: '选项', width: '55px', type: 'checkbox', fixed: 'left' },
|
||||
{ title: '编号', width: '80px', key: 'id', fixed: 'left', sort: 'id' },
|
||||
{ title: '用户账号', width: '80px', key: 'account', sort: 'account' },
|
||||
{ title: '用户名', width: '80px', key: 'name', sort: 'name' },
|
||||
{ title: '性别', width: '80px', key: 'sex', sort: 'sex' },
|
||||
{ title: '角色', width: '120px', key: 'role', customSlot: 'role' },
|
||||
{
|
||||
title: '创建时间',
|
||||
width: '120px',
|
||||
key: 'joinTime'
|
||||
},
|
||||
{ title: '状态', width: '120px', key: 'status', sort: 'status' },
|
||||
|
||||
{
|
||||
title: '操作',
|
||||
width: '150px',
|
||||
customSlot: 'operator',
|
||||
key: 'operator',
|
||||
fixed: 'right'
|
||||
}
|
||||
])
|
||||
const change = (page: any) => {
|
||||
loading.value = true
|
||||
setTimeout(() => {
|
||||
dataSource.value = loadDataSource(page.current, page.limit)
|
||||
loading.value = false
|
||||
}, 1000)
|
||||
}
|
||||
const sortChange = (key: any, sort: number) => {
|
||||
layer.msg(`字段${key} - 排序${sort}, 你可以利用 sort-change 实现服务端排序`)
|
||||
}
|
||||
const dataSource = ref([
|
||||
{
|
||||
id: '1',
|
||||
name: '管理员',
|
||||
sex: '男',
|
||||
role: '管理员',
|
||||
account: 'admin',
|
||||
joinTime: '2022-02-09 18:34:56',
|
||||
status: true
|
||||
},
|
||||
{
|
||||
id: '2',
|
||||
name: '张三2',
|
||||
sex: '男',
|
||||
role: '普通用户',
|
||||
account: '用户2',
|
||||
joinTime: '2022-02-09 18:34:56',
|
||||
status: true
|
||||
},
|
||||
{
|
||||
id: '3',
|
||||
name: '李四3',
|
||||
sex: '男',
|
||||
role: '普通用户',
|
||||
account: '用户3',
|
||||
joinTime: '2022-02-09 18:34:56',
|
||||
status: true
|
||||
},
|
||||
{
|
||||
id: '4',
|
||||
name: '用户4',
|
||||
sex: '男',
|
||||
role: '普通用户',
|
||||
account: '用户4',
|
||||
joinTime: '2022-02-09 18:34:56',
|
||||
status: true
|
||||
},
|
||||
{
|
||||
id: '5',
|
||||
name: '王五5',
|
||||
sex: '男',
|
||||
role: '普通用户',
|
||||
account: '用户5',
|
||||
joinTime: '2022-02-09 18:34:56',
|
||||
status: true
|
||||
},
|
||||
{
|
||||
id: '6',
|
||||
name: '赵六6',
|
||||
sex: '男',
|
||||
role: '普通用户',
|
||||
account: '用户6',
|
||||
joinTime: '2022-02-09 18:34:56',
|
||||
status: true
|
||||
},
|
||||
{
|
||||
id: '7',
|
||||
name: '黄齐7',
|
||||
sex: '男',
|
||||
role: '普通用户',
|
||||
account: '用户7',
|
||||
joinTime: '2022-02-09 18:34:56',
|
||||
status: true
|
||||
},
|
||||
{
|
||||
id: '8',
|
||||
name: '用户8',
|
||||
sex: '男',
|
||||
role: '普通用户',
|
||||
account: '用户8',
|
||||
joinTime: '2022-02-09 18:34:56',
|
||||
status: true
|
||||
},
|
||||
{
|
||||
id: '9',
|
||||
name: '游客9',
|
||||
sex: '男',
|
||||
role: '游客',
|
||||
account: '游客9',
|
||||
joinTime: '用户22-02-09 18:34:56',
|
||||
status: true
|
||||
},
|
||||
{
|
||||
id: '10',
|
||||
name: '用户10',
|
||||
sex: '女',
|
||||
role: '普通用户',
|
||||
account: 'user10',
|
||||
joinTime: '2022-02-09 18:34:56 18:34:56',
|
||||
status: true
|
||||
}
|
||||
])
|
||||
const changeStatus = (isChecked: boolean, row: any) => {
|
||||
dataSource.value.forEach((item) => {
|
||||
if (item.id === row.id) {
|
||||
layer.msg('Success', { icon: 1 }, () => {
|
||||
item.status = isChecked
|
||||
})
|
||||
}
|
||||
})
|
||||
}
|
||||
const remove = () => {
|
||||
layer.msg(selectedKeys.value, { area: '50%' })
|
||||
}
|
||||
const loadDataSource = (page: number, pageSize: number) => {
|
||||
var response = []
|
||||
var startIndex = (page - 1) * pageSize + 1
|
||||
var endIndex = page * pageSize
|
||||
for (var i = startIndex; i <= endIndex; i++) {
|
||||
response.push({
|
||||
id: `${i}`,
|
||||
account: `user${i}`,
|
||||
sex: '男',
|
||||
name: `用户${i}`,
|
||||
joinTime: '2022-02-09 18:34:56',
|
||||
role: '普通用户',
|
||||
status: true
|
||||
})
|
||||
}
|
||||
return response
|
||||
}
|
||||
const model11 = ref({
|
||||
name: '',
|
||||
role: '',
|
||||
sex: '',
|
||||
status: '',
|
||||
account: ''
|
||||
})
|
||||
const layFormRef11 = ref()
|
||||
const visible11 = ref(false)
|
||||
const title = ref('新增')
|
||||
const changeVisible11 = (text: any, row: any) => {
|
||||
title.value = text
|
||||
if (row != null) {
|
||||
let info = JSON.parse(JSON.stringify(row))
|
||||
model11.value = info
|
||||
} else {
|
||||
model11.value = {
|
||||
name: '',
|
||||
role: '',
|
||||
sex: '',
|
||||
status: '',
|
||||
account: ''
|
||||
}
|
||||
}
|
||||
visible11.value = !visible11.value
|
||||
}
|
||||
const submit11 = function () {
|
||||
layFormRef11.value.validate((isValidate: any, model: any, errors: any) => {
|
||||
layer.open({
|
||||
type: 1,
|
||||
title: '表单提交结果',
|
||||
content: `<div style="padding: 10px"><p>是否通过 : ${isValidate}</p> <p>表单数据 : ${JSON.stringify(
|
||||
model
|
||||
)} </p> <p>错误信息 : ${JSON.stringify(errors)}</p></div>`,
|
||||
shade: false,
|
||||
isHtmlFragment: true,
|
||||
btn: [
|
||||
{
|
||||
text: '确认',
|
||||
callback(index: any) {
|
||||
layer.close(index)
|
||||
}
|
||||
}
|
||||
],
|
||||
area: '500px'
|
||||
})
|
||||
})
|
||||
}
|
||||
// 清除校验
|
||||
const clearValidate11 = function () {
|
||||
layFormRef11.value.clearValidate()
|
||||
}
|
||||
// 重置表单
|
||||
const reset11 = function () {
|
||||
layFormRef11.value.reset()
|
||||
}
|
||||
function toRemove() {
|
||||
if (selectedKeys.value.length == 0) {
|
||||
layer.msg('您未选择数据，请先选择要删除的数据', { icon: 3, time: 2000 })
|
||||
return
|
||||
}
|
||||
layer.confirm('您将删除所有选中的数据？', {
|
||||
title: '提示',
|
||||
btn: [
|
||||
{
|
||||
text: '确定',
|
||||
callback: (id: any) => {
|
||||
layer.msg('您已成功删除')
|
||||
layer.close(id)
|
||||
}
|
||||
},
|
||||
{
|
||||
text: '取消',
|
||||
callback: (id: any) => {
|
||||
layer.msg('您已取消操作')
|
||||
layer.close(id)
|
||||
}
|
||||
}
|
||||
]
|
||||
})
|
||||
}
|
||||
function toSubmit() {
|
||||
layer.msg('保存成功！', { icon: 1, time: 1000 })
|
||||
visible11.value = false
|
||||
visible22.value = false
|
||||
}
|
||||
function toCancel() {
|
||||
visible11.value = false
|
||||
visible22.value = false
|
||||
}
|
||||
function confirm() {
|
||||
layer.msg('您已成功删除')
|
||||
}
|
||||
function cancel() {
|
||||
layer.msg('您已取消操作')
|
||||
}
|
||||
|
||||
const model22 = ref({
|
||||
organization: '',
|
||||
name: '',
|
||||
fullName: '',
|
||||
code: '',
|
||||
type: '',
|
||||
sort: 0,
|
||||
remark: ''
|
||||
})
|
||||
const layFormRef22 = ref()
|
||||
const visible22 = ref(false)
|
||||
const title22 = ref('新建')
|
||||
</script>
|
||||
|
||||
<style scoped>
|
||||
.organization-box {
|
||||
width: calc(100vw - 240px);
|
||||
height: calc(100vh - 110px);
|
||||
margin-top: 10px;
|
||||
box-sizing: border-box;
|
||||
background-color: #fff;
|
||||
overflow: hidden;
|
||||
}
|
||||
.left-tree {
|
||||
display: inline-block;
|
||||
padding: 20px 15px 0 5px;
|
||||
height: 1200px;
|
||||
border-right: 1px solid #e6e6e6;
|
||||
box-sizing: border-box;
|
||||
position: relative;
|
||||
}
|
||||
/* todo layui-tree-entry 设置无效 */
|
||||
.layui-tree-entry {
|
||||
position: relative;
|
||||
padding: 10px 0;
|
||||
height: 20px;
|
||||
line-height: 20px;
|
||||
white-space: nowrap;
|
||||
}
|
||||
.isFold {
|
||||
position: absolute;
|
||||
top: 36%;
|
||||
right: -10px;
|
||||
width: 26px;
|
||||
height: 26px;
|
||||
line-height: 26px;
|
||||
border-radius: 13px;
|
||||
background-color: #fff;
|
||||
border: 1px solid #e6e6e6;
|
||||
cursor: pointer;
|
||||
}
|
||||
.search-input {
|
||||
display: inline-block;
|
||||
width: 98%;
|
||||
margin-right: 10px;
|
||||
}
|
||||
|
||||
.isChecked {
|
||||
display: inline-block;
|
||||
background-color: #e8f1ff;
|
||||
color: red;
|
||||
}
|
||||
</style>
|
||||
|
||||
|
||||
196
src/views/system/menu.vue
Normal file
196
src/views/system/menu.vue
Normal file
@ -0,0 +1,196 @@
|
||||
<template>
|
||||
<lay-container style="padding: 20px">
|
||||
<lay-card>
|
||||
<div style="padding: 10px">
|
||||
<span style="font-size: 18px;vertical-align: center;margin-right: 20px">菜单管理</span>
|
||||
<lay-button type="primary" @click="openNew()" size="sm">新增菜单</lay-button>
|
||||
</div>
|
||||
<lay-table size="lg" ref="tableRef6" children-column-name="children" :columns="columns6"
|
||||
:data-source="dataSource6">
|
||||
<template v-slot:status="{ data }">
|
||||
<span v-if="data.status == '1'">启用</span>
|
||||
<span v-if="data.status == '0'">禁用</span>
|
||||
</template>
|
||||
<template v-slot:operator="{ data }">
|
||||
<lay-space size="lg">
|
||||
<span style="color: #00A394;cursor: pointer" v-if="data.pid==0"
|
||||
@click="addShowMsd(data, data.id)">子级新增</span>
|
||||
<span style="color: #00A394;cursor: pointer" @click="editShowMsd(data)">编辑</span>
|
||||
<lay-popconfirm trigger="click" content="确定要删除吗？" @confirm="delShowMsd(data)">
|
||||
<span style="color: #00A394;cursor: pointer">删除</span>
|
||||
</lay-popconfirm>
|
||||
</lay-space>
|
||||
</template>
|
||||
</lay-table>
|
||||
</lay-card>
|
||||
<lay-layer v-model="addShow" :title="addIsEdit == 1 ? '新增菜单' : '编辑菜单'" :type="4" :shade="true"
|
||||
:area="['950px', '100%']" :btn="addButton">
|
||||
<lay-container fluid="true" style="padding: 20px">
|
||||
<lay-form :model="addData">
|
||||
<lay-form-item required label="菜单名称" prop="title">
|
||||
<lay-input v-model="addData.title" placeholder="请输入菜单名称"></lay-input>
|
||||
</lay-form-item>
|
||||
<lay-form-item required label="菜单图标" prop="icon">
|
||||
<lay-input v-model="addData.icon" placeholder="请输入菜单图标"></lay-input>
|
||||
</lay-form-item>
|
||||
<lay-form-item required label="菜单URL" prop="url">
|
||||
<lay-input v-model="addData.url" placeholder="请输入菜单URL"></lay-input>
|
||||
</lay-form-item>
|
||||
<lay-form-item required label="状态" prop="status">
|
||||
<lay-select v-model="addData.status" placeholder="请选择">
|
||||
<lay-select-option :value="1" label="启用"></lay-select-option>
|
||||
<lay-select-option :value="0" label="禁用"></lay-select-option>
|
||||
</lay-select>
|
||||
</lay-form-item>
|
||||
</lay-form>
|
||||
</lay-container>
|
||||
</lay-layer>
|
||||
</lay-container>
|
||||
</template>
|
||||
|
||||
<script setup lang="ts">
|
||||
import {
|
||||
menuDataAdd,
|
||||
menuDataEdit,
|
||||
menuDataDel,
|
||||
menuData
|
||||
} from '../../api/module/home' // 确保 API 路径正确
|
||||
import { ref, watch, onMounted, reactive } from 'vue'
|
||||
import { layer } from '@layui/layer-vue'
|
||||
|
||||
// 列表内容
|
||||
const dataSource6 = ref([]);
|
||||
const addShow = ref(false)
|
||||
// 1 add 2 edit
|
||||
const addIsEdit = ref(1)
|
||||
const addData = reactive({
|
||||
title: '',
|
||||
icon: '',
|
||||
url: '',
|
||||
status: 1,
|
||||
pid: 0,
|
||||
})
|
||||
const addShowMsd = (data, pid) => {
|
||||
console.log(data);
|
||||
addShow.value = true;
|
||||
addData.id = 0;
|
||||
addData.pid = pid;
|
||||
addData.title = '';
|
||||
addData.icon = '';
|
||||
addData.url = '';
|
||||
addData.status = 1;
|
||||
addIsEdit.value = 1;
|
||||
}
|
||||
const columns6 = [
|
||||
{
|
||||
title: "菜单名称",
|
||||
width: "200px",
|
||||
key: "title"
|
||||
},
|
||||
{
|
||||
title: "菜单图标",
|
||||
width: "100px",
|
||||
key: "icon"
|
||||
},
|
||||
{
|
||||
title: "菜单URL",
|
||||
width: "300px",
|
||||
key: "url"
|
||||
},
|
||||
{
|
||||
title: "状态",
|
||||
width: "100px",
|
||||
customSlot: 'status',
|
||||
key: "status"
|
||||
},
|
||||
{
|
||||
title: '操作',
|
||||
width: '180px',
|
||||
customSlot: 'operator',
|
||||
key: 'operator',
|
||||
align: 'center',
|
||||
fixed: 'right'
|
||||
}
|
||||
]
|
||||
|
||||
onMounted(() => {
|
||||
getHierarchicalData()
|
||||
})
|
||||
|
||||
const openNew = () => {
|
||||
addData.id = 0;
|
||||
addData.pid = 0;
|
||||
addIsEdit.value = 1;
|
||||
addData.title = '';
|
||||
addData.icon = '';
|
||||
addData.url = '';
|
||||
addData.status = 1;
|
||||
addShow.value = true;
|
||||
}
|
||||
|
||||
const getHierarchicalData = () => {
|
||||
menuData({}).then((res) => {
|
||||
console.log(res)
|
||||
if (res.code == 1) {
|
||||
dataSource6.value = res.data;
|
||||
} else {
|
||||
layer.msg(res.msg, { icon: 2 })
|
||||
}
|
||||
})
|
||||
}
|
||||
|
||||
const editShowMsd = (data) => {
|
||||
console.log(data);
|
||||
addShow.value = true;
|
||||
addData.id = data.id;
|
||||
addData.title = data.title;
|
||||
addData.icon = data.icon;
|
||||
addData.url = data.url;
|
||||
addData.status = parseInt(data.status);
|
||||
addIsEdit.value = 2;
|
||||
}
|
||||
|
||||
const delShowMsd = async (data) => {
|
||||
var res = await menuDataDel({ id: data.id });
|
||||
console.log(res)
|
||||
if (res.code == 1) {
|
||||
layer.msg('删除成功！', { icon: 1 })
|
||||
getHierarchicalData();
|
||||
} else {
|
||||
layer.msg(res.msg, { icon: 2 })
|
||||
}
|
||||
}
|
||||
|
||||
const addButton = ref([
|
||||
{
|
||||
text: "确认",
|
||||
callback: async () => {
|
||||
console.log(addData);
|
||||
if (addData.title == '') {
|
||||
layer.msg('菜单名称不能为空！', { icon: 2 })
|
||||
return;
|
||||
}
|
||||
if (addIsEdit.value == 1) {
|
||||
var res = await menuDataAdd(addData);
|
||||
} else {
|
||||
var res = await menuDataEdit(addData);
|
||||
}
|
||||
console.log(res)
|
||||
if (res.code == 1) {
|
||||
layer.msg('提交成功！', { icon: 1 })
|
||||
addShow.value = false;
|
||||
getHierarchicalData();
|
||||
} else {
|
||||
layer.msg(res.msg, { icon: 2 })
|
||||
}
|
||||
}
|
||||
},
|
||||
{
|
||||
text: "取消",
|
||||
callback: () => {
|
||||
addShow.value = false;
|
||||
}
|
||||
}
|
||||
])
|
||||
</script>
|
||||
<style scoped></style>
|
||||
180
src/views/system/party.vue
Normal file
180
src/views/system/party.vue
Normal file
@ -0,0 +1,180 @@
|
||||
<template>
|
||||
<lay-container style="padding: 20px">
|
||||
<lay-card>
|
||||
<div style="padding: 10px">
|
||||
<span style="font-size: 18px;vertical-align: center;margin-right: 20px">党支部管理</span>
|
||||
<lay-button type="primary" @click="openNew()" size="sm">新增党支部</lay-button>
|
||||
</div>
|
||||
<lay-table size="lg" ref="tableRef6" children-column-name="children" :columns="columns6"
|
||||
:data-source="dataSource6">
|
||||
<template v-slot:status="{ data }">
|
||||
<span v-if="data.status == 1">启用</span>
|
||||
<span v-if="data.status == 0">禁用</span>
|
||||
</template>
|
||||
<template v-slot:operator="{ data }">
|
||||
<lay-space size="lg">
|
||||
<span style="color: #00A394;cursor: pointer" @click="addShowMsd(data, data.pid)">平级新增</span>
|
||||
<span style="color: #00A394;cursor: pointer" @click="addShowMsd(data, data.id)">子级新增</span>
|
||||
<span style="color: #00A394;cursor: pointer" @click="editShowMsd(data)">编辑</span>
|
||||
<lay-popconfirm trigger="click" content="确定要删除吗？" @confirm="delShowMsd(data)">
|
||||
<span style="color: #00A394;cursor: pointer">删除</span>
|
||||
</lay-popconfirm>
|
||||
</lay-space>
|
||||
</template>
|
||||
</lay-table>
|
||||
</lay-card>
|
||||
<lay-layer v-model="addShow" :title="addIsEdit == 1 ? '新增党支部' : '编辑党支部'" :type="4" :shade="true"
|
||||
:area="['950px', '100%']" :btn="addButton">
|
||||
<lay-container fluid="true" style="padding: 20px">
|
||||
<lay-form :model="addData">
|
||||
<lay-form-item required label="党支部名称" prop="name">
|
||||
<lay-input v-model="addData.name" placeholder="请输入党支部名称"></lay-input>
|
||||
</lay-form-item>
|
||||
<lay-form-item required label="党支部描述" prop="describe">
|
||||
<lay-textarea placeholder="请输入党支部描述" v-model="addData.describe"></lay-textarea>
|
||||
</lay-form-item>
|
||||
<lay-form-item required label="状态" prop="status">
|
||||
<lay-select v-model="addData.status" placeholder="请选择">
|
||||
<lay-select-option :value="1" label="启用"></lay-select-option>
|
||||
<lay-select-option :value="0" label="禁用"></lay-select-option>
|
||||
</lay-select>
|
||||
</lay-form-item>
|
||||
</lay-form>
|
||||
</lay-container>
|
||||
</lay-layer>
|
||||
</lay-container>
|
||||
</template>
|
||||
<script setup lang="ts">
|
||||
import {
|
||||
partyGroupDataAdd,
|
||||
partyGroupData, partyGroupDataEdit, partyGroupDataDel
|
||||
} from '../../api/module/home'
|
||||
import { ref, watch, onMounted, reactive } from 'vue'
|
||||
import { layer } from '@layui/layer-vue'
|
||||
//列表内容
|
||||
const dataSource6 = ref([]);
|
||||
const addShow = ref(false)
|
||||
//1 add 2 edit
|
||||
const addIsEdit = ref(1)
|
||||
const addData = reactive({
|
||||
name: '',
|
||||
describe: '',
|
||||
status: 1,
|
||||
pid: 0,
|
||||
})
|
||||
onMounted(() => {
|
||||
getHierarchicalData()
|
||||
})
|
||||
const openNew = () => {
|
||||
|
||||
addData.id = 0;
|
||||
addData.pid = 0;
|
||||
addIsEdit.value = 1;
|
||||
addData.name = '';
|
||||
addData.describe = '';
|
||||
addData.status = 1;
|
||||
addShow.value = true;
|
||||
}
|
||||
const getHierarchicalData = () => {
|
||||
partyGroupData({}).then((res) => {
|
||||
console.log(res)
|
||||
if (res.code == 1) {
|
||||
dataSource6.value = res.data;
|
||||
} else {
|
||||
layer.msg(res.msg, { icon: 2 })
|
||||
}
|
||||
})
|
||||
}
|
||||
const addShowMsd = (data, pid) => {
|
||||
console.log(data);
|
||||
addShow.value = true;
|
||||
addData.id = 0;
|
||||
addData.pid = pid;
|
||||
addData.name = '';
|
||||
addData.describe = '';
|
||||
addData.status = 1;
|
||||
addIsEdit.value = 1;
|
||||
}
|
||||
const editShowMsd = (data) => {
|
||||
console.log(data);
|
||||
addShow.value = true;
|
||||
addData.id = data.id;
|
||||
addData.name = data.name;
|
||||
addData.pid = data.pid;
|
||||
addData.status = parseInt(data.status);
|
||||
addData.describe = data.describe;
|
||||
addIsEdit.value = 2;
|
||||
}
|
||||
const delShowMsd = async (data) => {
|
||||
var res = await partyGroupDataDel({ id: data.id });
|
||||
console.log(res)
|
||||
if (res.code == 1) {
|
||||
layer.msg('删除成功！', { icon: 1 })
|
||||
getHierarchicalData();
|
||||
} else {
|
||||
layer.msg(res.msg, { icon: 2 })
|
||||
}
|
||||
}
|
||||
const columns6 = [
|
||||
{
|
||||
title: "党支部名称",
|
||||
width: "200px",
|
||||
key: "name"
|
||||
},
|
||||
{
|
||||
title: "党支部描述",
|
||||
width: "300px",
|
||||
key: "describe"
|
||||
},
|
||||
{
|
||||
title: "状态",
|
||||
width: "100px",
|
||||
customSlot: 'status',
|
||||
key: "status"
|
||||
},
|
||||
{
|
||||
title: '操作',
|
||||
width: '180px',
|
||||
customSlot: 'operator',
|
||||
key: 'operator',
|
||||
align: 'center',
|
||||
fixed: 'right'
|
||||
}
|
||||
]
|
||||
const addButton = ref([
|
||||
{
|
||||
text: "确认",
|
||||
callback: async () => {
|
||||
console.log(addData);
|
||||
if (addData.name == '') {
|
||||
layer.msg('党支部名称不能为空！', { icon: 2 })
|
||||
return;
|
||||
}
|
||||
if (addData.describe == '') {
|
||||
layer.msg('党支部描述不能为空！', { icon: 2 })
|
||||
return;
|
||||
}
|
||||
if (addIsEdit.value == 1) {
|
||||
var res = await partyGroupDataAdd(addData);
|
||||
} else {
|
||||
var res = await partyGroupDataEdit(addData);
|
||||
}
|
||||
console.log(res)
|
||||
if (res.code == 1) {
|
||||
layer.msg('提交成功！', { icon: 1 })
|
||||
addShow.value = false;
|
||||
getHierarchicalData();
|
||||
} else {
|
||||
layer.msg(res.msg, { icon: 2 })
|
||||
}
|
||||
}
|
||||
},
|
||||
{
|
||||
text: "取消",
|
||||
callback: () => {
|
||||
addShow.value = false;
|
||||
}
|
||||
}
|
||||
])
|
||||
</script>
|
||||
<style scoped></style>
|
||||
Loading…
x
Reference in New Issue
Block a user