joylink/rts-sim-testing-client
6
0
Fork 0
Code Issues 2 Pull Requests Actions Packages Projects Releases Wiki Activity

添加厂家信息管理；另存到草稿；

Browse Source
This commit is contained in:
dong 2023-08-04 15:41:30 +08:00
parent 4613ff43af
commit a6c4245751
8 changed files with 552 additions and 114 deletions
Show Stats Download Patch File Download Diff File Expand all files Collapse all files

79
src/api/CategoryInfoApi.ts Normal file
View File

@ -0,0 +1,79 @@
import { api } from 'src/boot/axios';
import { PageDto, PageQueryDto } from './ApiCommon';
const UriBase = '/api/v1/category';
export interface createParams {
name: string;
id?: number;
config?: string;
}
export interface CategoryItem extends createParams {
id: number;
created_at: string;
update_at: string;
}
export class PagingQueryParams extends PageQueryDto {
name?: string;
}
/**
* 分页查询
* @param params
* @returns
*/
export async function pageQuery(
params: PagingQueryParams
): Promise<PageDto<CategoryItem>> {
const response = await api.get(`${UriBase}/paging`, {
params: params,
});
return response.data;
}
/**
* 创建厂家
* @param params
* @returns
*/
export function createCategory(data: createParams) {
return api.post(`${UriBase}`, data);
}
/**
* 删除厂家
* @param id 厂家id
*/
export function deleteCategory(id: number) {
return api.delete(`${UriBase}/${id}`);
}
/**
* 修改厂家数据
* @param id 草稿id
*/
export function saveCategoryData(id: number, data: createParams) {
return api.put(`${UriBase}/${id}`, data);
}
/**
* 获取厂家数据详情
* @param params
* @returns
*/
export async function getCategoryInfo(id: number): Promise<CategoryItem> {
const response = await api.get(`${UriBase}/${id}`);
return response.data;
}
/**
* 获取厂家信息列表
* @param params
* @returns
*/
export async function getCategoryList(): Promise<Array<CategoryItem>> {
const response = await api.get(`${UriBase}/list`);
return response.data;
}

15
src/api/DraftApi.ts
View File

@ -3,14 +3,15 @@ import { PageDto, PageQueryDto } from './ApiCommon';
const DraftUriBase = '/api/v1/drafting';
interface Item {
export interface DraftItem {
id: number;
name: string;
proto: string;
type: string;
createdAt: string;
updateAt: string;
created_at: string;
update_at: string;
creatorId?: number;
category?: number;
}
export class PagingQueryParams extends PageQueryDto {
@ -24,7 +25,7 @@ export class PagingQueryParams extends PageQueryDto {
*/
export async function pageQuery(
params: PagingQueryParams
): Promise<PageDto<Item>> {
): Promise<PageDto<DraftItem>> {
const response = await api.get(`${DraftUriBase}/paging`, {
params: params,
});
@ -36,7 +37,7 @@ export async function pageQuery(
* @param params
* @returns
*/
export function createDraft(draftData: { name: string; type: string }) {
export function createDraft(draftData: { name: string; category: number }) {
return api.post(`${DraftUriBase}`, draftData);
}
@ -53,7 +54,7 @@ export function deleteDraft(id: number) {
* @param params
* @returns
*/
export async function getDraft(id: number): Promise<Item> {
export async function getDraft(id: number): Promise<DraftItem> {
const response = await api.get(`${DraftUriBase}/${id}`);
return response.data;
}
@ -80,7 +81,7 @@ export function saveDraft(
export async function saveAsDraft(
id: number,
data: { name: string; proto: string }
): Promise<Item> {
): Promise<DraftItem> {
const response = await api.post(`${DraftUriBase}/${id}/saveAs`, data);
return response.data;
}

40
src/api/PublishApi.ts
View File

@ -3,13 +3,13 @@ import { PageDto, PageQueryDto } from './ApiCommon';
const PublishUriBase = '/api/v1/publishedGi';
interface Item {
export interface PublishItem {
id: number;
name: string;
proto: string;
createdAt: string;
updateAt: string;
creatorId?: number;
note: string;
publishAt: string;
userID: number;
}
export class PagingQueryParams extends PageQueryDto {
@ -18,11 +18,12 @@ export class PagingQueryParams extends PageQueryDto {
/**
* 草稿图发布
* @param id 草稿id
* @param draftId 草稿id
* @param note 备注
*/
export function publishDraft(data: {
name: string;
lineId?: number;
note: string;
draftId: number;
}) {
return api.post(`${PublishUriBase}/publish`, data);
@ -33,7 +34,7 @@ export function publishDraft(data: {
* @param params
* @returns
*/
export async function getDraft(): Promise<Item> {
export async function getDraft(): Promise<PublishItem> {
const response = await api.get(`${PublishUriBase}/list`);
return response.data;
}
@ -45,7 +46,7 @@ export async function getDraft(): Promise<Item> {
*/
export async function pageQuery(
params: PagingQueryParams
): Promise<PageDto<Item>> {
): Promise<PageDto<PublishItem>> {
const response = await api.get(`${PublishUriBase}/paging`, {
params: params,
});
@ -54,7 +55,7 @@ export async function pageQuery(
/**
* 删除发布图
* @param id 草稿id
* @param id 发布id
*/
export function deletePublish(id: number) {
return api.delete(`${PublishUriBase}/${id}`);
@ -63,14 +64,14 @@ export function deletePublish(id: number) {
* 获取发布地图详细信息
* @param id 发布地图id
*/
export async function getPublishMapInfoById(id: number): Promise<Item> {
export async function getPublishMapInfoById(id: number): Promise<PublishItem> {
const response = await api.get(`${PublishUriBase}/${id}`);
return response.data;
}
/**
* 获取已发布的线路地图数据
*/
export async function getPublishLineNet(): Promise<Item> {
export async function getPublishLineNet(): Promise<PublishItem> {
const response = await api.get(`${PublishUriBase}/publish/lineNetwork/info`);
return response.data;
}
@ -79,7 +80,22 @@ export async function getPublishLineNet(): Promise<Item> {
* 获取发布地图详细信息
* @param id 发布地图线路ID
*/
export async function getPublishMapInfoByLineId(lineId: string): Promise<Item> {
export async function getPublishMapInfoByLineId(
lineId: string
): Promise<PublishItem> {
const response = await api.get(`${PublishUriBase}/${lineId}`);
return response.data;
}
/**
* 另存到草稿
* @param id 发布id
*/
export function saveToDraft(
id: number,
data: {
name: string;
}
) {
return api.post(`${PublishUriBase}/saveAsDrafting/${id}`, data);
}

10
src/components/SysMenu.vue
View File

@ -69,11 +69,11 @@ const list = reactive([
label: '发布管理',
icon: 'app_registration',
},
// {
// path: '/dataManage/lineInfo',
// label: '线路信息管理',
// icon: 'app_registration',
// },
{
path: '/dataManage/categoryInfo',
label: '厂家信息管理',
icon: 'app_registration',
},
],
},
]);

271
src/pages/CategoryManage.vue Normal file
View File

@ -0,0 +1,271 @@
<template>
<div class="q-pa-md">
<q-table
ref="tableRef"
title="厂家信息"
:style="{ height: tableHeight + 'px' }"
:rows="rows"
:columns="columnDefs"
row-key="id"
v-model:pagination="pagination"
:rows-per-page-options="[10, 20, 50, 100]"
:loading="loading"
:filter="filter"
binary-state-sort
@request="onRequest"
>
<template v-slot:top-right>
<q-input
dense
debounce="1000"
v-model="filter.name"
label="名称"
></q-input>
<q-btn flat round color="primary" icon="search" />
<q-btn color="primary" label="新建" @click="createFormShow = true" />
</template>
<template v-slot:body-cell-operations="props">
<q-td :props="props">
<div class="q-gutter-sm row justify-center">
<q-btn
color="primary"
:disable="operateDisabled"
label="编辑"
@click="editData(props.row)"
/>
<q-btn
color="red"
:disable="operateDisabled"
label="删除"
@click="deleteData(props.row)"
/>
</div>
</q-td>
</template>
</q-table>
<q-dialog
v-model="createFormShow"
persistent
transition-show="scale"
transition-hide="scale"
>
<q-card style="width: 300px">
<q-card-section>
<q-form
ref="myForm"
@submit="onCreate"
@reset="onReset"
class="q-gutter-md"
>
<div class="text-h6">
{{ editInfo.id ? '编辑厂家信息' : '新建厂家信息' }}
</div>
<q-input
outlined
label="名称"
v-model="editInfo.categoryName"
lazy-rules
:rules="[(val) => val.length > 0 || '请输入名称！']"
/>
<q-input outlined label="配置" v-model="editInfo.config" />
<q-card-actions align="right">
<q-btn
color="primary"
:label="editInfo.id ? '修改' : '创建'"
type="submit"
/>
<q-btn label="取消" type="reset" v-close-popup />
</q-card-actions>
</q-form>
</q-card-section>
</q-card>
</q-dialog>
</div>
</template>
<script setup lang="ts">
import { ref, reactive, onMounted, computed } from 'vue';
import { useQuasar, type QTableColumn, QForm } from 'quasar';
import {
pageQuery,
createCategory,
deleteCategory,
saveCategoryData,
createParams,
CategoryItem,
getCategoryInfo,
} from '../api/CategoryInfoApi';
import { ApiError } from 'src/boot/axios';
const $q = useQuasar();
const props = withDefaults(
defineProps<{
sizeHeight: number;
}>(),
{ sizeHeight: 500 }
);
const tableHeight = computed(() => {
return props.sizeHeight - 32;
});
onMounted(() => {
tableRef.value.requestServerInteraction();
});
const columnDefs: QTableColumn[] = [
{
name: 'name',
label: '名称',
field: 'name',
required: true,
align: 'center',
},
{
name: 'created_at',
label: '创建时间',
field: 'created_at',
align: 'center',
},
{
name: 'update_at',
label: '更新时间',
field: 'update_at',
align: 'center',
},
{ name: 'operations', label: '操作', field: 'operations', align: 'center' },
];
const operateDisabled = ref(false);
const tableRef = ref();
const rows = reactive([]);
const filter = reactive({
name: '',
});
const loading = ref(false);
const pagination = ref({
sortBy: 'desc',
descending: false,
page: 1,
rowsPerPage: 10,
rowsNumber: 10,
});
async function onRequest(props: any) {
const { page, rowsPerPage, sortBy, descending } = props.pagination;
const filter = props.filter;
loading.value = true;
try {
let response = await pageQuery({
current: page,
size: rowsPerPage,
name: filter.name,
});
const pageData = response;
pagination.value.rowsNumber = pageData.total;
pagination.value.page = page;
pagination.value.rowsPerPage = rowsPerPage;
pagination.value.sortBy = sortBy;
pagination.value.descending = descending;
rows.splice(0, rows.length, ...(pageData.records as []));
} catch (err) {
const error = err as ApiError;
$q.notify({
type: 'negative',
message: error.title,
});
} finally {
loading.value = false;
}
}
const createFormShow = ref(false);
const myForm = ref<QForm | null>(null);
function onCreate() {
myForm.value?.validate().then(async (res) => {
if (res) {
operateDisabled.value = true;
try {
const params: createParams = {
name: editInfo.categoryName,
config: JSON.stringify(editInfo.config),
};
if (editInfo.id) {
await saveCategoryData(+editInfo.id, params);
} else {
await createCategory(params);
}
onReset();
createFormShow.value = false;
tableRef.value.requestServerInteraction(); // 刷新列表
} catch (err) {
const error = err as ApiError;
$q.notify({
type: 'negative',
message: error.title,
});
} finally {
operateDisabled.value = false;
}
}
});
}
function onReset() {
editInfo.id = '';
editInfo.categoryName = '';
editInfo.config = '';
myForm.value?.resetValidation();
}
async function deleteData(row: CategoryItem) {
operateDisabled.value = true;
$q.dialog({
title: '确认',
message: `确认删除厂家 "${row.name}" 吗?`,
cancel: true,
})
.onOk(async () => {
try {
await deleteCategory(row.id);
tableRef.value.requestServerInteraction(); // 刷新列表
} catch (err) {
const error = err as ApiError;
$q.notify({
type: 'negative',
message: error.title,
});
}
})
.onDismiss(() => {
operateDisabled.value = false;
});
}
const editInfo = reactive({
id: '',
categoryName: '',
config: '',
});
function editData(row: CategoryItem) {
getCategoryInfo(row.id)
.then((res: CategoryItem) => {
editInfo.id = res.id + '';
editInfo.categoryName = res.name;
editInfo.config = res.config ? JSON.parse(res.config) : '';
createFormShow.value = true;
})
.catch((err) => {
const error = err as ApiError;
$q.notify({
type: 'negative',
message: error.title,
});
});
}
</script>

164
src/pages/DraftManage.vue
View File

@ -58,30 +58,32 @@
transition-hide="scale"
>
<q-card style="width: 300px">
<q-form ref="myForm" @submit="onCreate" class="q-gutter-md">
<q-card-section>
<q-card-section>
<q-form ref="myForm" @submit="onCreate" class="q-gutter-md">
<div class="text-h6">新建草稿图</div>
<q-input
outlined
label="名称"
label="名称 * "
v-model="draftName"
lazy-rules
:rules="[(val) => val.length > 0 || '请输入名称！']"
/>
<q-select
v-model="createType"
:options="typeOptions"
v-model="categoryId"
:options="categoryOptions"
emit-value
map-options
label="类型 * "
label="厂家 * "
lazy-rules
:rules="[(val) => val.length > 0 || '请选择厂家！']"
/>
</q-card-section>
<q-card-actions align="right">
<q-btn color="primary" label="创建" type="submit" />
<q-btn label="取消" v-close-popup />
</q-card-actions>
</q-form>
<q-card-actions align="right">
<q-btn color="primary" label="创建" type="submit" />
<q-btn label="取消" v-close-popup />
</q-card-actions>
</q-form>
</q-card-section>
</q-card>
</q-dialog>
@ -93,11 +95,8 @@
>
<q-card style="width: 300px">
<q-card-section>
<div class="text-h6">草稿发布</div>
</q-card-section>
<q-form ref="pubForm" @submit="publishGraphics" class="q-gutter-md">
<q-card-section>
<q-form ref="pubForm" @submit="publishGraphics" class="q-gutter-md">
<div class="text-h6">草稿发布</div>
<q-input
outlined
disable
@ -111,23 +110,20 @@
lazy-rules
:rules="[(val) => val.length > 0 || '请输入名称！']"
/>
<!-- <q-select
v-if="publishForm.type == 'Line'"
v-model="publishForm.lineId"
:options="lineOptions"
emit-value
map-options
label="线路 * "
<q-input
outlined
label="备注 * "
v-model="publishForm.note"
lazy-rules
:rules="[(val) => val || '请选择线路！']"
/> -->
</q-card-section>
:rules="[(val) => val.length > 0 || '请输入备注！']"
/>
<q-card-actions align="right">
<q-btn color="primary" label="发布" type="submit" />
<q-btn label="取消" v-close-popup />
</q-card-actions>
</q-form>
<q-card-actions align="right">
<q-btn color="primary" label="发布" type="submit" />
<q-btn label="取消" v-close-popup />
</q-card-actions>
</q-form>
</q-card-section>
</q-card>
</q-dialog>
</div>
@ -136,10 +132,20 @@
<script setup lang="ts">
import { ref, reactive, onMounted, computed } from 'vue';
import { useQuasar, type QTableColumn, QForm } from 'quasar';
import { pageQuery, createDraft, deleteDraft } from '../api/DraftApi';
import {
pageQuery,
createDraft,
deleteDraft,
DraftItem,
} from '../api/DraftApi';
import { publishDraft } from '../api/PublishApi';
// import { getLineList } from '../api/LineInfoApi';
import { ApiError } from 'src/boot/axios';
import { CategoryItem, getCategoryList } from 'src/api/CategoryInfoApi';
interface OptionsItem {
label: string;
value: string;
}
const $q = useQuasar();
@ -154,41 +160,9 @@ const tableHeight = computed(() => {
return props.sizeHeight - 32;
});
const typeOptions = [
{ label: '线路', value: 'Line' },
// { label: '线网', value: 'LineNetwork' },
];
const createType = ref('Line');
// let lineOptions: Array<{ label: string; value: number }> = [];
// function getAllLineList() {
// lineOptions = [];
// getLineList()
// .then((res) => {
// res.forEach((item) => {
// const obj = {
// label: item.name,
// value: item.lineId,
// };
// lineOptions.push(obj);
// });
// })
// .catch((err) => {
// console.log(err, '---err--');
// });
// }
// const typeOptionsMap = computed(() => {
// const obj: { [k: string]: string } = {};
// typeOptions.forEach((item: { value: string; label: string }) => {
// obj[item.value] = item.label;
// });
// return obj;
// });
onMounted(() => {
tableRef.value.requestServerInteraction();
// getAllLineList();
getCategoryListFn();
});
const columnDefs: QTableColumn[] = [
@ -200,14 +174,14 @@ const columnDefs: QTableColumn[] = [
align: 'center',
},
// { name: 'creator', label: '创建人', field: 'creator', align: 'center' },
// {
// name: 'type',
// label: '类型',
// field: (row) => {
// return typeOptionsMap.value[row.type];
// },
// align: 'center',
// },
{
name: 'category',
label: '厂家',
field: (row) => {
return categoryName(row.category);
},
align: 'center',
},
{
name: 'created_at',
label: '创建时间',
@ -277,7 +251,7 @@ function onCreate() {
try {
await createDraft({
name: draftName.value,
type: createType.value,
category: +categoryId.value,
});
createFormShow.value = false;
tableRef.value.requestServerInteraction(); // 刷新列表
@ -299,25 +273,23 @@ const publishForm = reactive({
id: '',
draftName: '',
pubName: '',
// lineId: '',
type: 'Line',
note: '',
});
function prePublish(row: any) {
function prePublish(row: DraftItem) {
publishFormShow.value = true;
publishForm.id = row.id;
publishForm.id = row.id + '';
publishForm.draftName = row.name;
publishForm.pubName = row.name;
// publishForm.lineId = '';
publishForm.type = row.type || 'Line';
}
async function publishGraphics() {
pubForm.value?.validate().then(async (res) => {
if (res) {
try {
const params: { draftId: number; name: string; lineId?: number } = {
const params: { draftId: number; name: string; note: string } = {
draftId: +publishForm.id,
name: publishForm.pubName,
note: publishForm.note,
};
await publishDraft(params);
publishFormShow.value = false;
@ -336,7 +308,7 @@ async function publishGraphics() {
});
}
async function deleteData(row: any) {
async function deleteData(row: DraftItem) {
operateDisabled.value = true;
$q.dialog({
title: '确认',
@ -359,4 +331,28 @@ async function deleteData(row: any) {
operateDisabled.value = false;
});
}
const categoryOptions: OptionsItem[] = [];
const categoryId = ref('');
function categoryName(val?: number) {
let n = '';
if (val) {
const find = categoryOptions.find((item) => {
return item.value == val + '';
});
n = find ? find.label : '';
}
return n;
}
function getCategoryListFn() {
getCategoryList()
.then((res: CategoryItem[]) => {
res.forEach((item) => {
categoryOptions.push({ label: item.name, value: item.id + '' });
});
})
.catch((err) => {
console.log(err, '获取厂家列表失败！');
});
}
</script>

81
src/pages/PublishManage.vue
View File

@ -32,6 +32,11 @@
label="创建仿真"
@click="create(props.row)"
/>
<q-btn
color="primary"
label="另存到草稿"
@click="showSaveToDraftFn(props.row)"
/>
<q-btn
color="red"
:disable="operateDisabled"
@ -42,13 +47,50 @@
</q-td>
</template>
</q-table>
<q-dialog
v-model="showDialog"
persistent
transition-show="scale"
transition-hide="scale"
>
<q-card style="width: 300px">
<q-card-section>
<q-form ref="pubForm" @submit="saveToDraftFn" class="q-gutter-md">
<div class="text-h6">另存到草稿</div>
<q-input
outlined
disable
label="发布图名称"
v-model="toDraftForm.name"
/>
<q-input
outlined
label="草稿名称"
v-model="toDraftForm.draftName"
lazy-rules
:rules="[(val) => val.length > 0 || '请输入草稿名称！']"
/>
<q-card-actions align="right">
<q-btn color="primary" label="确定" type="submit" />
<q-btn label="取消" v-close-popup />
</q-card-actions>
</q-form>
</q-card-section>
</q-card>
</q-dialog>
</div>
</template>
<script setup lang="ts">
import { ref, reactive, onMounted, computed } from 'vue';
import { useQuasar, type QTableColumn } from 'quasar';
import { pageQuery, deletePublish } from '../api/PublishApi';
import {
pageQuery,
deletePublish,
saveToDraft,
PublishItem,
} from '../api/PublishApi';
import { useRouter } from 'vue-router';
import { createSimulation } from 'src/api/Simulation';
import { ApiError } from 'src/boot/axios';
@ -79,6 +121,13 @@ const columnDefs: QTableColumn[] = [
required: true,
align: 'center',
},
{
name: 'note',
label: '备注',
field: 'note',
required: true,
align: 'center',
},
{
name: 'publishAt',
label: '发布时间',
@ -133,7 +182,7 @@ async function onRequest(props: any) {
}
}
async function create(row: any) {
async function create(row: PublishItem) {
createSimulation({ mapId: row.id })
.then((res) => {
const query = {
@ -152,7 +201,7 @@ async function create(row: any) {
});
}
async function deleteData(row: any) {
async function deleteData(row: PublishItem) {
operateDisabled.value = true;
$q.dialog({
title: '确认',
@ -175,4 +224,30 @@ async function deleteData(row: any) {
operateDisabled.value = false;
});
}
const showDialog = ref(false);
const toDraftForm = reactive({
id: '',
name: '',
draftName: '',
});
function showSaveToDraftFn(row: PublishItem) {
toDraftForm.id = row.id + '';
toDraftForm.name = row.name;
showDialog.value = true;
}
function saveToDraftFn() {
saveToDraft(+toDraftForm.id, { name: toDraftForm.draftName })
.then((res) => {
console.log(res, 'res');
showDialog.value = false;
})
.catch((err) => {
const error = err as ApiError;
$q.notify({
type: 'negative',
message: error.title,
});
});
}
</script>

6
src/router/routes.ts
View File

@ -35,9 +35,9 @@ const routes: RouteRecordRaw[] = [
component: () => import('pages/PublishManage.vue'),
},
{
path: 'lineInfo',
name: 'lineInfo',
component: () => import('pages/LineInfoManage.vue'),
path: 'categoryInfo',
name: 'categoryInfo',
component: () => import('pages/CategoryManage.vue'),
},
],
},