Skip to content

GitLab

S
Starter Web Vue
Commit ac470ab1 authored by 水落(YangLei)'s avatar 水落(YangLei)
Browse files
Options

Merge branch 'master' into feature/shuiluo

parents 8df0af8f b9748521
Hide whitespace changes
Inline Side-by-side
Showing with 183 additions and 47 deletions
src/components/action_button/index.vue
View file @ ac470ab1
......@@ -50,20 +50,38 @@ export default {
},
row: Object,
},
watch: {
row() {
this.init();
},
},
data() {
return {
buttonsArr: [],
};
},
created() {
this.init();
},
computed: {
basicBtns() {
return this.buttons.length > 3 ? this.buttons.slice(0, 3) : this.buttons;
return this.buttonsArr.length > 3 ? this.buttonsArr.slice(0, 3) : this.buttonsArr;
},
moreBtns() {
return this.buttons.length > 3 ? this.buttons.slice(3) : [];
return this.buttonsArr.length > 3 ? this.buttonsArr.slice(3) : [];
},
},
methods: {
getDelUrl(url, row) {
if (isFunction(url)) return url(row);
return url;
},
init() {
this.buttons.map((i) => {
i.__hidden__ = i.isHidden && i.isHidden(this.row);
});
this.buttonsArr = this.buttons.filter((i) => !i.__hidden__);
},
},
};
</script>
src/components/popconfirm_delete/index.vue
View file @ ac470ab1
......@@ -6,11 +6,11 @@
<script>
import { EMPTY_FUN } from '@/utils';
import { delReq } from '@/utils';
import { delReq, getReq, postReq, putReq } from '@/utils';
export default {
props: {
url: String,
url: [String, Object],
cb: {
type: Function,
default: EMPTY_FUN,
......@@ -30,9 +30,25 @@ export default {
},
methods: {
async confirm() {
if (this.url) {
if (typeof this.url === 'string') {
await delReq(this.url);
}
if (typeof this.url === 'object') {
switch (this.url.method) {
case 'get':
await getReq(this.url.url, this.url?.data);
break;
case 'post':
await postReq(this.url.url, this.url?.data);
break;
case 'put':
await putReq(this.url.url, this.url?.data);
break;
case 'del':
await delReq(this.url.url, this.url?.data);
break;
}
}
if (this.onOk) {
await this.onOk();
}
......
src/components/table/drawer.vue
View file @ ac470ab1
<template>
<a-drawer
placement="right"
:visible="visible"
:visible="value"
:drawerStyle="drawerStyle"
:bodyStyle="bodyStyle"
destroyOnClose
:width="600"
v-bind="$attrs"
v-on="$listeners"
@close="onClose"
>
<div class="tw-overflow-y-hidden">
<div class="tw-overflow-y-hidden tw-flex-1">
<div class="tw-overflow-y-auto tw-h-full">
<slot />
</div>
</div>
<template>
<a-divider />
<a-space>
<a-space class="tw-justify-end">
<a-button @click="cancel">取消</a-button>
<slot name="footer">
<a-button @click="cancel">取消</a-button>
<a-button type="primary" @click="ok" :loading="loading">确认</a-button>
</slot>
</a-space>
......@@ -29,10 +32,14 @@ export default {
props: {
oncancel: Function,
onok: Function,
value: Boolean,
},
model: {
prop: 'value',
event: 'change',
},
data() {
return {
visiable: false,
loading: false,
drawerStyle: {
display: 'flex',
......@@ -48,21 +55,18 @@ export default {
};
},
methods: {
show() {
this.visiable = true;
},
hidden() {
this.visiable = false;
},
cancel() {
this.oncancel && this.oncancel();
this.visiable = false;
this.$emit('change', false);
},
onClose() {
this.cancel();
},
async ok() {
this.loading = true;
await (this.onok && this.onok());
this.loading = false;
this.visiable = false;
this.$emit('change', false);
},
},
};
......
src/components/table/index.vue
View file @ ac470ab1
......@@ -20,9 +20,7 @@
<a-button v-if="addBtn" type="primary" key="add" v-bind="addBtn.options" @click="add">
{{ addBtn.text || '新建' }}
</a-button>
<template v-for="btn of buttons">
<a-button :type="btn.primary" :key="btn.text">{{ btn.text }}</a-button>
</template>
<slot name="buttons" />
</a-space>
<div class="tw-mb-2">
<a-alert
......@@ -65,12 +63,13 @@
</div>
<template v-if="!noFooter">
<a-divider />
<a-space>
<a-space class="tw-justify-end">
<a-button @click="addVisible = false">取消</a-button>
<a-button type="primary" @click="submit" :loading="submitLoading"> 确认 </a-button>
</a-space>
</template>
</a-drawer>
<slot name="children"></slot>
</div>
</template>
......
src/pages/system/view/organization/usermanagement/User.vue
View file @ ac470ab1
<template>
<my-table url="/api/v1/users" rowKey="userId" :addBtn="addBtn" ref="table">
<template #drawer>
<Form ref="form" />
</template>
<my-table url="/api/v1/users" rowKey="userId" ref="table">
<template #search="{ query }">
<my-form-item label="归属部门">
<OrganizationTree v-model="query.orgId" />
......@@ -11,6 +8,9 @@
<a-input placeholder="Basic usage" v-model="query.loginId" />
</my-form-item>
</template>
<template #buttons>
<a-button type="primary" @click="onAdd">新增</a-button>
</template>
<a-table-column title="账号" data-index="loginId" />
<a-table-column title="姓名" data-index="userName" />
......@@ -21,36 +21,95 @@
<a-table-column title="是否锁定" data-index="isLockedName" />
<a-table-column title="操作">
<template #default="row">
<a @click="() => view(row, 1)">编辑</a>
<a-divider type="vertical" />
<PopconfirmDelete :url="`/api/v1/jobs/${row.jobId}`" :cb="refreshTable" />
<ActionButton :buttons="buttons" :row="row" />
</template>
</a-table-column>
<template #children>
<Form ref="form" />
</template>
</my-table>
</template>
<script>
import Form from './form.vue';
import PopconfirmDelete from '@/components/popconfirm_delete/index.vue';
import ActionButton from '@/components/action_button/index.vue';
import OrganizationTree from '../components/OrganizationTree.vue';
export default {
components: { Form, PopconfirmDelete, OrganizationTree },
components: { Form, OrganizationTree, ActionButton },
data() {
return {
addBtn: { width: 600, onOk: () => this.$refs['form']?.submit() },
span: { xs: 12, md: 8, lg: 6 },
buttons: [
{
label: '编辑',
click: (row) => {},
},
{
type: 'confirm',
url: (row) => `/api/v1/jobs/${row.jobId}`,
after: () => this.refreshTable(),
isHidden: (row) => {
return row.userId === 1;
},
},
{
type: 'confirm',
label: '重置',
title: '确认是否重置?',
url: (row) => {
return {
url: `/api/v1/users/${row.userId}/resetting`,
method: 'put',
};
},
after: () => this.refreshTable(),
},
{
type: 'confirm',
label: '解锁',
title: '确认是否解锁?',
url: (row) => {
return {
url: `/api/v1/users/${row.userId}/unlocking`,
method: 'put',
};
},
after: () => this.refreshTable(),
isHidden: (row) => {
return !row.isLocked;
},
},
{
type: 'confirm',
label: '锁定',
title: '确认是否锁定?',
url: (row) => {
return {
url: `/api/v1/users/${row.userId}/locking`,
method: 'put',
};
},
after: () => this.refreshTable(),
isHidden: (row) => {
return !!row.isLocked;
},
},
],
};
},
methods: {
refreshTable() {
this.$refs['table']?.getData();
},
view(data, type) {
this.$refs['table']?.show({ type });
this.$nextTick(() => {
this.$refs['form'].setData({ ...data }, type);
});
onAdd() {
this.$refs['form']?.open();
},
// view(data, type) {
// this.$refs['table']?.show({ type });
// this.$nextTick(() => {
// this.$refs['form'].setData({ ...data }, type);
// });
// },
},
};
</script>
src/pages/system/view/organization/usermanagement/form.vue
View file @ ac470ab1
<template>
<a-form-model layout="vertical" :model="form" :rules="rules" ref="DrawerForm">
<a-form-model-item label="名称" prop="jobName">
<a-input v-model="form.jobName" :disabled="isView" />
</a-form-model-item>
<a-form-model-item label="描述" prop="jobDescription">
<a-textarea v-model="form.jobDescription" :disabled="isView" :rows="4" />
</a-form-model-item>
</a-form-model>
<Drawer ref="drawerRef" v-model="visible" title="用户配置">
<!-- <a-form-model layout="vertical" :model="form" :rules="rules" ref="DrawerForm">
<a-form-model-item label="名称" prop="jobName">
<a-input v-model="form.jobName" :disabled="isView" />
</a-form-model-item>
<a-form-model-item label="描述" prop="jobDescription">
<a-textarea v-model="form.jobDescription" :disabled="isView" :rows="4" />
</a-form-model-item>
</a-form-model> -->
<a-steps :current="current">
<a-step v-for="item in steps" :key="item.title" :title="item.title" />
</a-steps>
<a-form-model layout="vertical" :model="form" :rules="rules" ref="DrawerForm">
<a-form-model-item label="名称" prop="jobName">
<a-input v-model="form.jobName" :disabled="isView" />
</a-form-model-item>
</a-form-model>
<template #footer>
<a-button type="primary" @click="prev" v-if="current > 0"> 上一步 </a-button>
<a-button type="primary" @click="next" v-if="current < 2"> 下一步 </a-button>
</template>
</Drawer>
</template>
<script>
import Drawer from '@/components/table/drawer.vue';
import JobsApi from '@/api/organization';
import FormMixin from '@/components/FormMixin';
export default {
components: { Drawer },
mixins: [FormMixin],
data() {
return {
visible: false,
rules: {
jobName: [{ required: true, message: 'Please select Activity zone', trigger: 'change' }],
jobDescription: [
{ required: true, message: 'Please select Activity zone', trigger: 'change' },
],
},
current: 0,
steps: [
{
title: '基本信息',
},
{
title: '证件设置',
},
{
title: '岗位设置',
},
],
};
},
methods: {
open() {
this.visible = true;
},
next() {
this.current++;
},
prev() {
this.current--;
},
add() {
return JobsApi.addJobs({ ...this.form });
},
......
Markdown is supported
0% or .
You are about to add 0 people to the discussion. Proceed with caution.
Finish editing this message first!
Please register or to comment