Skip to content

V
vue-quasar-admin-dev
Commit d553149b by 周海峰
Options

分组

parent 25df482f
正在显示 包含 349 行增加 和 5 行删除
src/pages/platformapplications/platformapplications.vue
......@@ -70,6 +70,12 @@
<q-field :count="255">
<q-input v-model="temp.title" float-label="名称" />
</q-field>
<q-field>
<div class="row no-wrap">
<q-select class="col" v-model="temp.groupCode" float-label="应用分组" radio :options="applicationsGroupOptions"/>
<q-btn color="negative" flat round dense icon="add" @click="openAddApplicationsGroup" />
</div>
</q-field>
<q-field :count="255">
<q-input v-model="temp.href" float-label="连接" />
</q-field>
......@@ -95,9 +101,9 @@
<q-input v-model="temp.mailtype" float-label="待办标识（待办唯一标识，需要给到对方系统）" />
</q-field>
<q-field>
<q-input v-model="temp.img" float-label="上传图标" disable v-if="subtype=='edit'"/>
<q-input v-model="temp.img" float-label="图标路径" disable v-if="subtype=='edit'"/>
<q-uploader
float-label="图标路径"
float-label="上传图标"
ref="attachmentUploader"
name="file"
@uploaded="attachmentUploaded"
......@@ -105,7 +111,6 @@
:url="uploadurl"
auto-expand
clearable
hide-upload-button
@add="$refs['attachmentUploader'].upload()"
></q-uploader>
......@@ -122,11 +127,12 @@
<script>
import { getPlatformApplicationsPagedList,saveapp,delapp } from "@/service/permission/platformapplications";
import { getApplicationsGroupList,addApplicationsGroup,updateApplicationsGroup,delApplicationsGroup } from "@/service/permission/platformapplicationsGroup";
const uploadpath="http://nw.sy-metro.com:6104/uploadfileadmin/manager";
export default {
data() {
return {
uploadurl: uploadpath+"/znzl/file/upload/videoandimgurl?uploadPar=adv&",
uploadurl: "manager/znzl/file/upload/videoandimgurl?uploadPar=adv&",
selectOptions:[
{
label: '启用',
......@@ -218,6 +224,7 @@
appidflag:true,
subtype: "add",
fileCount: 0,
applicationsGroupOptions: [] // 应用分组下拉选项
}
},
mounted() {
......@@ -225,6 +232,9 @@
pagination: this.serverPagination,
filter: this.filter
});
// 获取应用分组选项
this.getApplicationsGroupOptions();
},
methods: {
async request(props) {
......@@ -342,7 +352,45 @@
position: "top-right"
});
}
}
},
// 获取应用分组选项
async getApplicationsGroupOptions() {
try {
const response = await getApplicationsGroupList({});
this.applicationsGroupOptions = response.data.data.map(group => ({
label: group.groupName,
value: group.groupCode
}));
} catch (error) {
console.error("Failed to fetch applications group options:", error);
}
},
// 点击添加应用分组按钮
async openAddApplicationsGroup() {
try {
const name = await this.$q.dialog({
title: '添加应用分组',
prompt: {
model: '',
type: 'text',
isValid: val => val && val.trim().length > 0
},
ok: { label: '添加', push: true },
cancel: { label: '取消', push: true }
});
console.log(name);
// `name` contains the input string in this Quasar version
if (name) {
const groupName = name; // be defensive across versions
await addApplicationsGroup({ groupName: groupName });
this.$q.notify({ type: 'positive', message: '添加成功', position: 'bottom-right' });
// refresh options
await this.getApplicationsGroupOptions();
}
} catch (e) {
// user cancelled or error
}
},
},
}
</script>
......
src/pages/platformapplicationsGroup/platformapplicationsGroup.vue 0 → 100644
<template>
<div style="padding:10px" >
<q-card inline class="fit shadow-6">
<q-card-main>
<q-table class="fixed-height-table" ref="table" color="primary" :data="serverData" :columns="columns" separator="cell" row-key="id" :pagination.sync="pagination"
@request="request" :loading="loading" :rows-per-page-options="[10,20,30,40,50,60,200,500]" :rows-per-page-label="$t('Rows per page')" :no-data-label="$t('No data')">
<template slot="top-left" slot-scope="props">
<q-input v-model="filter.groupName" type="text" prefix="名称：" />&nbsp;&nbsp;
<q-btn push dense color="primary" icon="search" @click="search">{{$t('Search')}}</q-btn>&nbsp;&nbsp;
<q-btn push dense color="primary" icon="add" @click="openAddApplicationsGroup">{{$t('Add')}}</q-btn>
</template>
<template slot="top-right" slot-scope="props">
<q-btn flat round dense :icon="props.inFullscreen ? 'fullscreen_exit' : 'fullscreen'" @click="props.toggleFullscreen" />
</template>
<q-td slot="body-cell-id" slot-scope="props" :props="props" style="width:100px">
<q-btn-dropdown color="secondary" label="操作" no-wrap>
<q-list link>
<q-item v-close-overlay @click.native="editApplicationsGroup(props.row)">
<q-item-main>
<q-item-tile sublabel>修改</q-item-tile>
</q-item-main>
</q-item>
<q-item v-close-overlay @click.native="delApplicationsGroup(props.value)">
<q-item-main>
<q-item-tile sublabel >删除</q-item-tile>
</q-item-main>
</q-item>
<q-item v-close-overlay>
<q-item-main>
<q-item-tile sublabel>关闭弹窗</q-item-tile>
</q-item-main>
</q-item>
</q-list>
</q-btn-dropdown>
</q-td>
</q-table>
</q-card-main>
</q-card>
<!-- 编辑弹层：在一个弹层中同时修改 groupName 和 sortIndex -->
<q-modal v-model="editDialogVisible" maximized >
<q-modal-layout>
<q-toolbar slot="header">
<q-btn flat round dense @click="closeEditDialog" icon="reply" />
<q-toolbar-title>
{{$t('Edit')}}
</q-toolbar-title>
</q-toolbar>
<q-toolbar slot="footer">
<q-toolbar-title>
</q-toolbar-title>
<q-btn round color="red" @click="saveEditGroup" >{{$t('Save')}}</q-btn>
<q-btn round @click="closeEditDialog">{{$t('Cancel')}}</q-btn>
</q-toolbar>
<div class="layout-padding">
<q-field :count="255">
<q-input v-model="editDialogModel.groupName" float-label="名称" />
</q-field>
<q-field :count="255">
<q-input v-model.number="editDialogModel.sortIndex" type="number" float-label="排序" />
</q-field>
</div>
</q-modal-layout>
</q-modal>
</div>
</template>
<script>
import { getApplicationsGroupList,addApplicationsGroup,updateApplicationsGroup,delApplicationsGroup } from "@/service/permission/platformapplicationsGroup";
export default {
data() {
return {
serverData: [],
pagination: {
page: 1,
rowsPerPage: 10 // 默认每页显示条数
},
columns: [
{
name: "groupName",
required: true,
label: '名称',
align: "left",
field: "groupName",
sortable: true
},
{
name: "groupCode",
required: true,
label: '编码',
align: "left",
field: "groupCode",
sortable: true
},
{
name: "sortIndex",
required: true,
label: '排序',
align: "left",
field: "sortIndex",
sortable: true
},
{
name: "id",
required: true,
label: '操作',
align: "left",
field: "id",
sortable: true
}
],
filter: {
groupName: "",
},
selected: [],
loading: false,
// 编辑弹层状态
editDialogVisible: false,
editDialogModel: {
id: null,
groupName: '',
sortIndex: 0
},
}
},
mounted() {
this.request({
filter: this.filter
});
},
methods: {
async request() {
this.loading = true;
let query = {
groupName: this.filter.groupName
};
let dataRes = await getApplicationsGroupList(query);
this.serverData = dataRes.data.data;
setTimeout(() => {
this.loading = false;
}, 500);
},
search() {
this.request({
filter: this.filter
});
},
async delApplicationsGroup(id) {
try {
await this.$q.dialog({
title: this.$t("Delete"),
message: this.$t("Confirm the deletion？"),
position: "right",
ok: {
push: true,
label: this.$t("Delete")
},
cancel: {
push: true,
color: "negative",
label: this.$t("Cancel")
}
});
await delApplicationsGroup({ id: id });
this.$q.notify({
type: "positive",
message: this.$t("Successfully deleted"),
position: "bottom-right"
});
this.search();
} catch (e) {}
},
// 点击添加应用分组按钮
async openAddApplicationsGroup() {
try {
const name = await this.$q.dialog({
title: '添加应用分组',
prompt: {
model: '',
type: 'text',
isValid: val => val && val.trim().length > 0
},
ok: { label: '添加', push: true },
cancel: { label: '取消', push: true }
});
console.log(name);
// `name` contains the input string in this Quasar version
if (name) {
const groupName = name; // be defensive across versions
await addApplicationsGroup({ groupName: groupName });
this.$q.notify({ type: 'positive', message: '添加成功', position: 'bottom-right' });
// refresh options
this.search();
}
} catch (e) {
// user cancelled or error
}
},
editApplicationsGroup(row) {
// fill model and open dialog
this.editDialogModel.id = row.id;
this.editDialogModel.groupName = row.groupName;
this.editDialogModel.sortIndex = row.sortIndex != null ? row.sortIndex : 0;
this.editDialogVisible = true;
},
closeEditDialog() {
this.editDialogVisible = false;
// reset model
this.editDialogModel = { id: null, groupName: '', sortIndex: 0 };
},
async saveEditGroup() {
// validation
if (!this.editDialogModel.groupName || !this.editDialogModel.groupName.trim()) {
this.$q.notify({ type: 'negative', message: '名称不能为空', position: 'bottom-right' });
return;
}
const sid = this.editDialogModel.id;
try {
await updateApplicationsGroup({ id: sid, groupName: this.editDialogModel.groupName, sortIndex: this.editDialogModel.sortIndex });
this.$q.notify({ type: 'positive', message: '修改成功', position: 'bottom-right' });
this.editDialogVisible = false;
this.search();
} catch (e) {
console.error(e);
this.$q.notify({ type: 'negative', message: '修改失败', position: 'bottom-right' });
}
},
},
}
</script>
<style scoped>
.fixed-height-table {
.q-table-middle {
/* 设置一个你认为合适的高度 */
height: 500px;
overflow: hidden;
/* 滚动 */
overflow-y: auto;
/* 固定table头 */
thead tr:first-child th {
position: sticky;
top: 0;
z-index: 1;
background-color: #fff; /* 确保表头有背景色，否则滚动时内容会透上来 */
}
}
}
</style>
\ No newline at end of file
src/router/routes.js
......@@ -155,6 +155,11 @@ const appRouter = [{
name: 'platformapplications',
component: () => import('pages/platformapplications/platformapplications.vue')
},
{
path: 'platformapplicationsGroup',
name: 'platformapplicationsGroup',
component: () => import('pages/platformapplicationsGroup/platformapplicationsGroup.vue')
},
]
},
{
......
src/service/permission/platformapplicationsGroup.js 0 → 100644
import request from '@/libs/request'
export function getApplicationsGroupList(query) {
return request({
url: '/applicationsGroup/list',
method: 'get',
params: query
})
}
export function addApplicationsGroup(data) {
return request({
url: '/applicationsGroup/add',
method: 'post',
data: data,
loading:"hourglass"
})
}
export function updateApplicationsGroup(data) {
return request({
url: '/applicationsGroup/update',
method: 'post',
data: data,
loading:"hourglass"
})
}
export function delApplicationsGroup(data) {
return request({
url: '/applicationsGroup/delete',
method: 'post',
data: data,
loading:"hourglass"
})
}
\ No newline at end of file
Markdown 格式
0% 或
您添加了 0 人 到此讨论。请谨慎行事。
请先完成此评论的编辑！
请 注册 或者 后发表评论