Skip to content

GitLab

S
Starter Web Vue
Commit f7f7fddb authored by 陈浩玮's avatar 陈浩玮
Browse files
Options

Merge branch 'feature/shuiluo' into 'master' 

feat: 表单优化，任务管理页面列表完成

See merge request product/kim3-web-vue/starter-web-vue!6
parents 5438269a 3e08487a
Hide whitespace changes
Inline Side-by-side
Showing with 124 additions and 52 deletions
src/components/action_button/index.vue
View file @ f7f7fddb
...@@ -3,9 +3,11 @@ ...@@ -3,9 +3,11 @@
<span v-for="(btn, index) of basicBtns" :key="btn.label"> <span v-for="(btn, index) of basicBtns" :key="btn.label">
<PopconfirmDelete <PopconfirmDelete
:url="getDelUrl(btn.url, row)" :url="getDelUrl(btn.url, row)"
v-if="btn.type === 'del'" v-if="btn.type === 'confirm'"
:cb="btn.after" :cb="btn.after"
:title="btn.title" :title="btn.title"
:onOk="btn.onOk"
:label="btn.label"
/> />
<a v-else @click="() => btn.click(row)">{{ btn.label }}</a> <a v-else @click="() => btn.click(row)">{{ btn.label }}</a>
<a-divider type="vertical" v-if="moreBtns.length || index !== basicBtns.length - 1" /> <a-divider type="vertical" v-if="moreBtns.length || index !== basicBtns.length - 1" />
...@@ -15,9 +17,17 @@ ...@@ -15,9 +17,17 @@
<a-popover> <a-popover>
<template slot="content"> <template slot="content">
<a-space direction="vertical"> <a-space direction="vertical">
<a v-for="btn of moreBtns" :key="btn.label" @click="() => btn.click(row)"> <span v-for="btn of moreBtns" :key="btn.label">
{{ btn.label }} <PopconfirmDelete
</a> :url="getDelUrl(btn.url, row)"
v-if="btn.type === 'confirm'"
:cb="btn.after"
:title="btn.title"
:onOk="btn.onOk"
:label="btn.label"
/>
<a v-else @click="() => btn.click(row)">{{ btn.label }}</a>
</span>
</a-space> </a-space>
</template> </template>
<a>...</a> <a>...</a>
......
src/components/popconfirm_delete/index.vue
View file @ f7f7fddb
<template> <template>
<a-popconfirm :title="title" ok-text="确认" cancel-text="取消" @confirm="onOk"> <a-popconfirm :title="title" ok-text="确认" cancel-text="取消" @confirm="confirm">
<a>删除</a> <a>{{ label }}</a>
</a-popconfirm> </a-popconfirm>
</template> </template>
...@@ -19,10 +19,23 @@ export default { ...@@ -19,10 +19,23 @@ export default {
type: String, type: String,
default: '确认是否删除', default: '确认是否删除',
}, },
onOk: {
type: Function,
default: EMPTY_FUN,
},
label: {
type: String,
default: '删除',
},
}, },
methods: { methods: {
async onOk() { async confirm() {
await delReq(this.url); if (this.url) {
await delReq(this.url);
}
if (this.onOk) {
await this.onOk();
}
this?.cb(); this?.cb();
}, },
}, },
......
src/components/table/index.vue
View file @ f7f7fddb
...@@ -46,11 +46,15 @@ ...@@ -46,11 +46,15 @@
<slot name="drawer" /> <slot name="drawer" />
</div> </div>
</div> </div>
<a-divider /> <template v-if="!noFooter">
<a-space> <a-divider />
<a-button @click="addVisible = false">取消</a-button> <a-space>
<a-button type="primary" @click="submit" :loading="submitLoading">确认</a-button> <a-button @click="addVisible = false">取消</a-button>
</a-space> <a-button type="primary" @click="submit" :loading="submitLoading">
确认
</a-button>
</a-space>
</template>
</a-drawer> </a-drawer>
</div> </div>
</template> </template>
...@@ -94,6 +98,7 @@ export default { ...@@ -94,6 +98,7 @@ export default {
display: 'flex', display: 'flex',
flexDirection: 'column', flexDirection: 'column',
}, },
noFooter: false,
}; };
}, },
watch: { watch: {
...@@ -144,7 +149,7 @@ export default { ...@@ -144,7 +149,7 @@ export default {
} }
this.submitLoading = false; this.submitLoading = false;
}, },
show({ type, title } = {}) { show({ type, title, noFooter } = {}) {
if (type === 0) { if (type === 0) {
this.title = '新增'; this.title = '新增';
} }
...@@ -157,6 +162,7 @@ export default { ...@@ -157,6 +162,7 @@ export default {
if (title) { if (title) {
this.title = title; this.title = title;
} }
this.noFooter = noFooter;
this.addVisible = true; this.addVisible = true;
}, },
}, },
......
src/pages/system/view/menu/MenuManagement.vue
View file @ f7f7fddb
...@@ -7,7 +7,7 @@ ...@@ -7,7 +7,7 @@
noPage noPage
ref="table" ref="table"
> >
<template #add> <template #drawer>
<Form ref="addForm" /> <Form ref="addForm" />
</template> </template>
...@@ -20,7 +20,7 @@ ...@@ -20,7 +20,7 @@
<template #default="row"> <template #default="row">
<a @click="() => edit(row)">编辑</a> <a @click="() => edit(row)">编辑</a>
<a-divider type="vertical" /> <a-divider type="vertical" />
<PopconfirmDelete :onOk="() => delMenu(row.menuId)" /> <PopconfirmDelete :url="`/api/v1/menus/${row.menuId}`" :cb="refreshTable" />
</template> </template>
</a-table-column> </a-table-column>
</my-table> </my-table>
...@@ -29,14 +29,12 @@ ...@@ -29,14 +29,12 @@
<script> <script>
import { convertListToTree } from '@/utils'; import { convertListToTree } from '@/utils';
import PopconfirmDelete from '@/components/popconfirm_delete/index.vue'; import PopconfirmDelete from '@/components/popconfirm_delete/index.vue';
import { delMenuApi } from '@/api';
import Form from './form.vue'; import Form from './form.vue';
export default { export default {
data: vm => ({ data: vm => ({
addBtn: { addBtn: {
text: '新建', text: '新建',
title: '菜单配置',
onOk() { onOk() {
return vm.$refs['addForm']?.submit(); return vm.$refs['addForm']?.submit();
}, },
...@@ -51,16 +49,11 @@ export default { ...@@ -51,16 +49,11 @@ export default {
refreshTable() { refreshTable() {
this.$refs['table'].getData(); this.$refs['table'].getData();
}, },
async delMenu(id) {
await delMenuApi(id);
this.refreshTable();
},
sorter(pre, next) { sorter(pre, next) {
return pre.viewIndex - next.viewIndex; return pre.viewIndex - next.viewIndex;
}, },
edit(data) { edit(data) {
console.log(data); this.$refs['table']?.show({ type: 1 });
this.$refs['table']?.showAdd();
this.$nextTick(() => { this.$nextTick(() => {
this.$refs['addForm'].setEdit(data); this.$refs['addForm'].setEdit(data);
}); });
......
src/pages/system/view/role/RoleManagement.vue
View file @ f7f7fddb
<template> <template>
<my-table url="/api/v1/roles" rowKey="roleId" :addBtn="addBtn" ref="table" noPage> <my-table url="/api/v1/roles" rowKey="roleId" :addBtn="addBtn" ref="table" noPage>
<template #add> <template #drawer>
<Form ref="form" /> <Form ref="form" />
</template> </template>
...@@ -34,7 +34,7 @@ export default { ...@@ -34,7 +34,7 @@ export default {
this.$refs['table']?.getData(); this.$refs['table']?.getData();
}, },
view(data, type) { view(data, type) {
this.$refs['table']?.showAdd(); this.$refs['table']?.show({ type });
this.$nextTick(() => { this.$nextTick(() => {
this.$refs['form'].setData(data, type); this.$refs['form'].setData(data, type);
}); });
......
src/pages/system/view/task/form.vue 0 → 100644
View file @ f7f7fddb
<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-item label="实现类" prop="jobDescription">
<a-input v-model="form.jobDescription" :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>
</template>
<script>
import JobsApi from '@/api/organization';
import FormMixin from '@/components/FormMixin';
export default {
mixins: [FormMixin],
data() {
return {
rules: {
jobName: [{ required: true, message: 'Please select Activity zone', trigger: 'change' }],
jobDescription: [
{ required: true, message: 'Please select Activity zone', trigger: 'change' },
],
},
};
},
methods: {
add() {
return JobsApi.add({ ...this.form });
},
edit() {
return JobsApi.update({ ...this.form });
},
},
};
</script>
src/pages/system/view/task/index.vue
View file @ f7f7fddb
<template> <template>
<my-table url="/api/v1/schedules" rowKey="taskId"> <my-table url="/api/v1/schedules" rowKey="taskId" :addBtn="addBtn" ref="table">
<template #drawer>
<Form ref="form" />
</template>
<a-table-column title="任务名称" data-index="taskName" /> <a-table-column title="任务名称" data-index="taskName" />
<a-table-column title="调度规则" data-index="taskRule" /> <a-table-column title="调度规则" data-index="taskRule" />
<a-table-column title="实现类" data-index="implementClass" /> <a-table-column title="实现类" data-index="implementClass" />
...@@ -14,49 +17,54 @@ ...@@ -14,49 +17,54 @@
<script> <script>
import ActionButton from '@/components/action_button/index.vue'; import ActionButton from '@/components/action_button/index.vue';
import Form from './form.vue';
export default { export default {
components: { ActionButton }, components: { ActionButton, Form },
data() { data() {
return { return {
addBtn: {},
buttons: [ buttons: [
{ {
label: '查看', label: '查看',
onClick(row) {}, click: row => {
this.showDrawer(2, true);
this.$nextTick(() => {
this.$refs['form'].setData(row, 2);
});
},
}, },
{ {
label: '编辑', label: '编辑',
onClick(row) {}, click: row => {
}, this.showDrawer(1);
{ this.$nextTick(() => {
type: 'del', this.$refs['form'].setData(row, 1);
url: row => { });
console.log(row);
return 'dassda';
}, },
after() {
console.log('ddd');
},
},
{
label: 'chakan',
onClick(row) {},
}, },
{ {
label: '查看1', type: 'confirm',
onClick(row) {}, label: '失效',
title: '确认是否失效?',
url: row => `/api/v1/schedules/${row.taskId}`,
after: () => this.refreshTable(),
}, },
{ {
label: '查看2', type: 'confirm',
onClick(row) {}, url: row => `/api/v1/schedules/${row.taskId}`,
}, after: () => this.refreshTable(),
{
label: '查看3',
onClick(row) {},
}, },
], ],
}; };
}, },
methods: {
refreshTable() {
this.$refs.table.getData();
},
showDrawer(type, noFooter) {
this.$refs['table'].show({ type, noFooter });
},
},
}; };
</script> </script>
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