Skip to content

GitLab

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

设备管理

parent 010a1519
Hide whitespace changes
Inline Side-by-side
Showing with 554 additions and 82 deletions
src/api/oceanus.js
View file @ c6c3093f
......@@ -10,8 +10,13 @@ function updateOceanusTreeApi(data) {
return putReq('/oceanus/api/v1/categories', data);
}
function delOceanusTreeApi(data) {
return putReq(`/oceanus/api/v1/categories/${data.categoryId}`, data);
return delReq(`/oceanus/api/v1/categories/${data.categoryId}`, data);
}
function getAttributesApi(data) {
return getReq('/oceanus/api/v1/categories/attributes', data);
}
function addAttributesApi(data) {
return postReq('/oceanus/api/v1/categories/attributes', data);
}
......@@ -39,12 +44,32 @@ function delEquipmentsTreeApi(data) {
function getEquipmentsInfoApi(data) {
return getReq(`/oceanus/api/v1/equipments/${data.catalogValue}`);
}
function getEquipmentsAttributesApi(data) {
return getReq('/oceanus/api/v1/equipments/attributes', data);
}
function addEquipmentsAttributesApi(data) {
return postReq('/oceanus/api/v1/equipments/attributes', data);
}
function updateEquipmentsAttributesApi(data) {
return putReq('/oceanus/api/v1/equipments/attributes', data);
}
function topEquipmentsAttributesApi(data) {
return putReq(`/oceanus/api/v1/equipments/attributes/top/${data.instanceId}`,{});
}
function bottomEquipmentsAttributesApi(data) {
return putReq(`/oceanus/api/v1/equipments/attributes/bottom/${data.instanceId}`,{});
}
export default {
getOceanusTree: getOceanusTreeApi,
addOceanusTree: addOceanusTreeApi,
updateOceanusTree: updateOceanusTreeApi,
delOceanusTree: delOceanusTreeApi,
getAttributes:getAttributesApi,
addAttributes: addAttributesApi,
updateAttributes: updateAttributesApi,
movementAttributes: movementAttributesApi,
......@@ -53,4 +78,9 @@ export default {
updateEquipmentsTree: updateEquipmentsTreeApi,
delEquipmentsTree: delEquipmentsTreeApi,
getEquipmentsInfo: getEquipmentsInfoApi,
getEquipmentsAttributes:getEquipmentsAttributesApi,
addEquipmentsAttributes:addEquipmentsAttributesApi,
updateEquipmentsAttributes:updateEquipmentsAttributesApi,
topEquipmentsAttributes:topEquipmentsAttributesApi,
bottomEquipmentsAttributes:bottomEquipmentsAttributesApi,
};
src/components/popconfirm_delete/index.vue
View file @ c6c3093f
......@@ -46,10 +46,10 @@ export default {
await postReq(this.url.url, this.url?.data);
break;
case 'put':
await putReq(this.url.url, this.url?.data);
await putReq(this.url.url, {}, { data: this.url?.data });
break;
case 'del':
await delReq(this.url.url, this.url?.data);
await delReq(this.url.url, {}, { data: this.url?.data });
break;
}
}
......
src/components/table/SimpleTable.vue 0 → 100644
View file @ c6c3093f
<template>
<a-row :gutter="[24, 24]">
<a-col :span="24" v-if="$scopedSlots.search">
<slot name="search" />
</a-col>
<a-col :span="24">
<a-table
:dataSource="dataSource"
:loading="loading"
:pagination="pagination"
@change="pageChange"
v-bind="$attrs"
rowKey="key"
>
<slot />
</a-table>
</a-col>
</a-row>
</template>
<script>
const initQuery = {
pageNum: 1,
pageSize: 10,
total: 0,
};
export default {
props: {
request: { type: Function, default: undefined },
otherParams: { type: Object, default: () => ({}) },
rowKey: String,
},
data() {
return {
loading: true,
dataSource: [],
params: {
...initQuery,
},
};
},
computed: {
pagination() {
return {
current: this.params.pageNum,
pageSize: this.params.pageSize,
total: this.params.total,
showQuickJumper: true,
};
},
},
watch: {
otherParams: {
handler() {
this.refresh();
},
deep: true,
immediate: true,
},
},
mounted() {
this.getList({ ...this.params, ...this.otherParams });
},
methods: {
async getList(params) {
if (!this.request) return;
this.loading = true;
const data = await this.request(params);
const { records, total, pageNum } = data;
const newData = records.map((i) => ({
...i,
key: i[this.rowKey],
editable: false,
}));
this.dataSource = newData;
this.params = {
...this.params,
total,
pageNum,
};
this.loading = false;
},
refresh() {
const params = {
...initQuery,
...this.otherParams,
};
this.getList(params);
},
pageChange(pagination) {
const params = {
...this.params,
...this.otherParams,
pageNum: pagination.current,
};
this.getList(params);
},
getTableData() {
return this.dataSource;
},
setTableData(data) {
this.dataSource = data;
},
},
};
</script>
src/pages/oceanus/category/components/LeftTree.vue
View file @ c6c3093f
......@@ -89,7 +89,7 @@ export default {
this.expandedKeys = expandedKeys;
this.selectedKeys = [treeObj.treeData[0]?.categoryId];
this.selectedObj = treeObj.treeData[0];
this.$emit('change', treeObj.treeData[0]);
this.$emit('change', { categoryId: treeObj.treeData[0].categoryId });
},
async onSearch(searchText) {
const dataList = this.treeObj.data;
......@@ -110,7 +110,7 @@ export default {
const cueData = node.$props.dataRef;
this.selectedObj = cueData;
this.searchValue = undefined;
this.$emit('change', cueData);
this.$emit('change', { categoryId: cueData.categoryId });
}
},
onExpand(expandedKeys) {
......@@ -131,11 +131,11 @@ export default {
delete data.children;
this.view(data, 1);
},
del() {
async del() {
const categoryId = this.selectedObj?.categoryId;
if (categoryId) return;
if (!categoryId) return;
try {
this.Api.delOceanusTree({ categoryId });
await Api.delOceanusTree({ categoryId });
this.$message.success('删除成功!');
this.init();
} catch (e) {
......
src/pages/oceanus/category/components/RightTable.vue
View file @ c6c3093f
<template>
<my-table
:style="{ marginTop: 0 }"
url="/oceanus/api/v1/categories/attributes"
:tableParam="{ categoryId: tableParam.categoryId }"
rowKey="key"
ref="table"
:formatData="formatData"
>
<template v-if="tableParam.categoryId !== 1" #search="{ query }">
<my-card>
<Table :request="Api.getAttributes" rowKey="attributeId" ref="table" :otherParams="tableParam">
<!-- <template v-if="tableParam.categoryId !== 1" #search="{ query }">
<my-form-item label="账号" :colAttr="{ span: 12 }">
<a-input placeholder="Basic usage" v-model="query.attributeName" />
</my-form-item>
</template>
<template v-if="tableParam.categoryId !== 1" #buttons>
</template> -->
<!-- <template v-if="tableParam.categoryId !== 1" #buttons>
<a-button type="primary" @click="onAddTableRow">新增</a-button>
</template>
<a-table-column title="属性名称">
<template #default="row">
<a-input v-if="row.editable" v-model="row.attributeName" />
<span v-else>
{{ row.attributeName }}
</span>
</template>
</a-table-column>
<a-table-column title="操作" :width="180">
<template #default="row">
<ActionButton v-if="row.editable" :buttons="editButtons" :row="row" />
<ActionButton v-else :buttons="buttons" :row="row" />
</template> -->
<template #search>
<a-row>
<a-col :span="12">
<a-button type="link" @click="onAddTableRow">新增</a-button>
</a-col>
<a-col :span="12" class="tw-text-right">
<a-input-search
v-model="attributeName"
:style="{ width: '80%' }"
placeholder="请输入搜索内容"
enter-button
allowClear
@search="onSearch"
/>
</a-col>
</a-row>
</template>
</a-table-column>
</my-table>
<a-table-column title="属性名称">
<template #default="row">
<a-input v-if="row.editable" v-model="row.attributeName" />
<span v-else>
{{ row.attributeName }}
</span>
</template>
</a-table-column>
<a-table-column title="操作" :width="180">
<template #default="row">
<ActionButton v-if="row.editable" :buttons="editButtons" :row="row" />
<ActionButton v-else :buttons="buttons" :row="row" />
</template>
</a-table-column>
</Table>
</my-card>
</template>
<script>
import Api from '@/api/oceanus';
import { formatObj } from '@/utils';
import ActionButton from '@/components/action_button/index.vue';
import Table from '@/components/table/SimpleTable.vue';
export default {
components: { ActionButton },
components: { ActionButton, Table },
props: {
param: Object,
},
watch: {
param(val) {
this.tableParam = val;
param: {
handler(val) {
this.tableParam = { ...val };
this.attributeName = '';
},
deep: true,
immediate: true,
},
},
data() {
......@@ -100,12 +117,16 @@ export default {
},
],
tableParam: {},
attributeName: '',
Api,
};
},
methods: {
async formatData(data) {
const newData = await formatObj(data.records, { key: 'attributeId' });
return newData;
onSearch(val) {
this.tableParam = {
...this.tableParam,
attributeName: val,
};
},
onAddTableRow() {
const data = this.$refs['table']?.getTableData();
......@@ -170,7 +191,7 @@ export default {
this.$refs['table']?.setTableData(newData);
},
refreshTable() {
this.$refs['table']?.reset();
this.$refs['table']?.refresh();
},
},
};
......
src/pages/oceanus/category/index.vue
View file @ c6c3093f
......@@ -20,6 +20,11 @@ export default {
treeVale: {},
};
},
watch: {
treeVale(val) {
console.log(val);
},
},
methods: {},
};
</script>
src/pages/oceanus/equipment/Left/LeftTree.vue
View file @ c6c3093f
......@@ -2,7 +2,7 @@
<div>
<my-card>
<a-row :gutter="[16, 16]">
<a-col :span="24">
<!-- <a-col :span="24">
<a-select
show-search
v-model="searchValue"
......@@ -16,22 +16,22 @@
@search="onSearch"
@change="onChange"
/>
</a-col>
</a-col> -->
<a-col :span="24" class="tw-text-right">
<a-button-group>
<a-dropdown :disabled="selectedKeys.length === 0">
<a-dropdown :disabled="!treeNode">
<a-menu slot="overlay">
<a-menu-item
key="1"
@click="addOrg"
:disabled="selectedObj.catalogType === 'EQUIPMENT'"
:disabled="!(treeNode && treeNode.dataRef.catalogType !== 'EQUIPMENT')"
>新增组织
</a-menu-item>
<a-menu-item key="2" @click="addEqu">新增设备 </a-menu-item>
</a-menu>
<a-button type="primary" ghost>新增 <a-icon type="down" /></a-button>
</a-dropdown>
<a-button
<!-- <a-button
type="primary"
ghost
@click="edit"
......@@ -39,13 +39,27 @@
selectedKeys.length === 0 || selectedObj.catalogType === 'ORGANIZATION'
"
>编辑</a-button
>
>
<a-button
type="primary"
ghost
@click="del"
:disabled="selectedKeys.length === 0 || selectedObj.catalogType === 'ROOTNODE'"
>删除</a-button
> -->
<a-button
type="primary"
ghost
@click="edit"
:disabled="!(treeNode && treeNode.dataRef.catalogType === 'EQUIPMENT')"
>编辑</a-button
>
<a-button
type="primary"
ghost
@click="del"
:disabled="!(treeNode && treeNode.dataRef.catalogType !== 'ROOTNODE')"
>删除</a-button
>
</a-button-group>
</a-col>
......@@ -86,7 +100,6 @@ export default {
replaceFields: { title: 'catalogName', key: 'catalogId', children: 'children' },
treeData: [],
selectedKeys: [],
selectedObj: {},
allData: [],
treeNode: undefined,
};
......@@ -112,7 +125,6 @@ export default {
this.allData = [...this.allData, parentNode];
this.treeNode = undefined;
this.selectedKeys = [];
this.selectedObj = {};
},
onLoadData(treeNode) {
return new Promise((resolve) => {
......@@ -135,31 +147,29 @@ export default {
},
onChange(val) {
const data = this.allData.find((i) => i.catalogId === val);
this.selectedObj = data;
this.selectedKeys = [val];
this.searchValue = val;
this.$emit('change', data);
},
async onSelect(selectedKeys, { node }) {
console.log(node.dataRef);
this.treeNode = node;
this.selectedKeys = selectedKeys;
let data = {};
if (selectedKeys.length !== 0) {
const curData = node.dataRef;
this.selectedObj = curData;
this.searchValue = undefined;
if (curData.catalogType === 'EQUIPMENT') {
data = await Api.getEquipmentsInfo(curData);
this.selectedObj = {
Object.keys(data).forEach((key) => {
node.dataRef[key] = data[key];
});
data = {
...data,
catalogId: curData.catalogId,
catalogType: curData.catalogType,
};
data = this.selectedObj;
this.treeData = [...this.treeData];
}
} else {
this.selectedObj = {};
}
this.$emit('change', data);
},
......@@ -170,7 +180,8 @@ export default {
});
},
addEqu() {
const { catalogId } = this.selectedObj;
const data = { ...this.treeNode.dataRef };
const { catalogId } = data;
this.view({ parentCatalogId: catalogId, catalogType: 'EQUIPMENT' }, 0);
},
addOrg() {
......@@ -180,24 +191,24 @@ export default {
this.onLoadData(this.treeNode);
},
edit() {
const curData = { ...this.treeNode.dataRef };
const data = {
...this.selectedObj,
installTime:
this.selectedObj.installTime && moment(this.selectedObj.installTime, 'YYYY-MM-DD'),
runTime: this.selectedObj.runTime && moment(this.selectedObj.runTime, 'YYYY-MM-DD'),
...curData,
installTime: curData.installTime && moment(curData.installTime, 'YYYY-MM-DD'),
runTime: curData.runTime && moment(curData.runTime, 'YYYY-MM-DD'),
};
delete data.children;
this.view(data, 1);
},
async del() {
if (isObjEmpty(this.selectedObj)) return;
const data = { ...this.treeNode.dataRef };
if (isObjEmpty(data)) return;
try {
await Api.delEquipmentsTree(this.selectedObj);
await Api.delEquipmentsTree(data);
this.$message.success('删除成功!');
this.onLoadData(this.treeNode.$parent);
this.treeNode = undefined;
this.selectedKeys = [];
this.selectedObj = {};
} catch (e) {
this.$message.warning('删除失败!');
}
......@@ -212,13 +223,13 @@ export default {
const { catalogId, catalogType } = catalogForm;
console.log(this.treeNode);
this.treeNode.dataRef.catalogName = equipmentName;
this.selectedObj = {
const newData = {
...equipmentForm,
catalogId,
catalogType,
};
this.treeData = [...this.treeData];
this.$emit('change', this.selectedObj);
this.$emit('change', newData);
}
},
},
......
src/pages/oceanus/equipment/Left/TreeDrawer.vue
View file @ c6c3093f
......@@ -8,7 +8,7 @@
<a-input v-model="form.equipmentName" :disabled="isView" />
</a-form-model-item>
<a-form-model-item label="类别" prop="categoryId">
<a-tree-select :treeData="oceanusTreeList" v-model="form.categoryId" :disabled="isView" />
<a-tree-select :treeData="oceanusTreeList" v-model="form.categoryId" :disabled="type === 1" />
</a-form-model-item>
<a-form-model-item label="等级" prop="equipmentGrade">
<Select v-model="form.equipmentGrade" :options="equipmentGradeList" :disabled="isView" />
......
src/pages/oceanus/equipment/Right/RightBox.vue
View file @ c6c3093f
<template>
<my-card>
<a-tabs default-active-key="1" @change="callback">
<a-tab-pane key="1" tab="Tab 1"> Content of Tab Pane 1 </a-tab-pane>
<a-tab-pane key="2" tab="Tab 2" force-render> Content of Tab Pane 2 </a-tab-pane>
<a-tab-pane key="3" tab="Tab 3"> Content of Tab Pane 3 </a-tab-pane>
<a-tabs v-model="key">
<a-tab-pane key="1" tab="基本信息" :forceRender="true">
<TabOne v-if="key === '1'" :dataInfo="dataInfo" />
</a-tab-pane>
<a-tab-pane key="2" tab="属性" :forceRender="true">
<TabTwo v-if="key === '2'" :dataInfo="dataInfo" />
</a-tab-pane>
<a-tab-pane key="3" tab="事件" :forceRender="true"> Content of Tab Pane 3 </a-tab-pane>
</a-tabs>
</my-card>
</template>
<script>
import TabOne from './TabOne.vue';
import TabTwo from './TabTwo.vue';
export default {
components: { TabOne, TabTwo },
props: {
info: {
type: Object,
default: () => ({}),
},
},
data() {
return {};
return {
dataInfo: {},
key: '1',
};
},
methods: {
callback(key) {
console.log(key);
watch: {
info: {
handler(val) {
this.dataInfo = val;
this.key = '1';
},
immediate: true,
deep: true,
},
},
methods: {
// callback(key) {
// this.key = key;
// },
},
};
</script>
src/pages/oceanus/equipment/Right/TabOne.vue 0 → 100644
View file @ c6c3093f
<template>
<a-descriptions :column="2">
<a-descriptions-item label="设备编码">{{ dataInfo.equipmentCode }}</a-descriptions-item>
<a-descriptions-item label="设备名称"> {{ dataInfo.equipmentName }} </a-descriptions-item>
<a-descriptions-item label="类别"> {{ dataInfo.categoryName }} </a-descriptions-item>
<a-descriptions-item label="等级"> {{ dataInfo.equipmentGradeName }} </a-descriptions-item>
<a-descriptions-item label="安装日期">
{{ dataInfo.installTime ? dataInfo.installTime.substring(0, 10) : '' }}
</a-descriptions-item>
<a-descriptions-item label="运行日期">
{{ dataInfo.runTime ? dataInfo.runTime.substring(0, 10) : '' }}
</a-descriptions-item>
<a-descriptions-item label="供应商">{{ dataInfo.supplier }}</a-descriptions-item>
<a-descriptions-item label="制造商">{{ dataInfo.manufacturer }} </a-descriptions-item>
<a-descriptions-item label="专业">{{ dataInfo.specialtyCodeName }} </a-descriptions-item>
</a-descriptions>
</template>
<script>
export default {
props: {
dataInfo: {
type: Object,
default: () => ({}),
},
},
methods: {},
};
</script>
src/pages/oceanus/equipment/Right/TabTwo.vue 0 → 100644
View file @ c6c3093f
<template>
<Table
ref="TableRef"
:request="Api.getEquipmentsAttributes"
rowKey="instanceId"
:otherParams="otherParams"
>
<template #search>
<a-row>
<a-col :span="12">
<a-button type="link" @click="onAddRow">新增</a-button>
<a-divider type="vertical" />
<a-dropdown>
<a-button type="link"> 过滤 <a-icon type="down" /> </a-button>
<a-menu slot="overlay">
<a-menu-item>
<a @click="() => onChangeAttributeType('ALL')">全部</a>
</a-menu-item>
<a-menu-item>
<a @click="() => onChangeAttributeType('SYSTEM')">系统</a>
</a-menu-item>
<a-menu-item>
<a @click="() => onChangeAttributeType('CUSTOM')">自定义</a>
</a-menu-item>
</a-menu>
</a-dropdown>
</a-col>
<a-col :span="12" class="tw-text-right">
<a-input-search
v-model="attributeName"
:style="{ width: '80%' }"
placeholder="请输入搜索内容"
enter-button
allowClear
@search="onSearch"
/>
</a-col>
</a-row>
</template>
<a-table-column title="属性名称">
<template #default="row">
<a-input v-if="row.editable" v-model="row.attributeName" />
<span v-else>
{{ row.attributeName }}
</span>
</template>
</a-table-column>
<a-table-column title="属性值">
<template #default="row">
<a-input v-if="row.editable" v-model="row.instanceValue" />
<span v-else>
{{ row.instanceValue }}
</span>
</template>
</a-table-column>
<a-table-column title="属性类型" data-index="attributeTypeName" />
<a-table-column title="操作" :width="180">
<template #default="row">
<ActionButton v-if="row.editable" :buttons="editButtons" :row="row" />
<ActionButton v-else :buttons="buttons" :row="row" />
</template>
</a-table-column>
</Table>
</template>
<script>
import ActionButton from '@/components/action_button/index.vue';
import Api from '@/api/oceanus';
import Table from '@/components/table/SimpleTable.vue';
export default {
components: { Table, ActionButton },
props: {
dataInfo: {
type: Object,
default: () => ({}),
},
},
watch: {
dataInfo: {
handler(val) {
const { equipmentId, categoryId } = val;
this.otherParams = {
attributeType: 'ALL',
equipmentId,
categoryId,
};
this.attributeName = '';
},
deep: true,
immediate: true,
},
},
data() {
return {
Api,
attributeName: '',
otherParams: {},
buttons: [
{
label: '编辑',
click: this.onEditRow,
},
{
type: 'confirm',
url: (row) => ({
url: '/oceanus/api/v1/equipments/attributes',
method: 'del',
data: {
instanceIds: [row.instanceId],
},
}),
after: () => this.refreshTable(),
isHidden: (row) => {
return row.attributeType === 'SYSTEM';
},
},
{
label: '置顶',
click: async (row) => {
const { instanceId } = row;
try {
await Api.topEquipmentsAttributes({ instanceId });
this.refreshTable();
this.$message.success('置顶成功!');
} catch (e) {
this.$message.warning('置顶失败!');
}
},
},
{
label: '置底',
click: async (row) => {
const { instanceId } = row;
try {
await Api.bottomEquipmentsAttributes({ instanceId });
this.refreshTable();
this.$message.success('置顶成功!');
} catch (e) {
this.$message.warning('置顶失败!');
}
},
},
],
editButtons: [
{
label: '确定',
click: this.onSubmitRow,
},
{
type: 'confirm',
label: '取消',
title: '确认是否取消?',
onOk: this.onCancelRow,
},
],
};
},
mounted() {},
methods: {
onChangeAttributeType(val) {
this.otherParams = {
...this.otherParams,
attributeType: val,
};
},
onSearch(val) {
this.otherParams = {
...this.otherParams,
attributeName: val,
};
},
onAddRow() {
const data = this.$refs['TableRef']?.getTableData();
const isEdit = data.find((i) => i.action === 'add');
if (isEdit) return;
const obj = {
editable: true,
key: +new Date(),
attributeType: 'CUSTOM',
attributeName: '',
action: 'add',
equipmentId: this.dataInfo.equipmentId,
viewIndex: 0,
};
this.$refs['TableRef']?.setTableData([obj, ...data]);
},
async onSubmitRow(row) {
if (row.attributeName === '' || row.instanceValue === '') {
return this.$message.warning('请输入属性名称、属性值');
} else {
try {
if (row.action === 'add') {
await Api.addEquipmentsAttributes(row);
}
if (row.action === 'edit') {
await Api.updateEquipmentsAttributes(row);
}
this.refreshTable();
this.$message.success('提交成功!');
} catch (e) {
this.$message.warning('保存失败!');
}
}
},
onEditRow(row) {
const data = this.$refs['TableRef']?.getTableData();
const newData = data.map((i) => {
const oData = { ...i };
if (i.key === row.key) {
oData.editable = true;
oData.action = 'edit';
}
return oData;
});
this.$refs['TableRef']?.setTableData(newData);
},
onCancelRow(row) {
const data = this.$refs['TableRef']?.getTableData();
if (row.action === 'add') {
const newData = data.filter((i) => i.key !== row.key);
this.$refs['TableRef']?.setTableData(newData);
}
if (row.action === 'edit') {
const newData = data.map((i) => {
const data = { ...i };
if (i.key === row.key) {
data.editable = false;
delete data.action;
}
return data;
});
this.$refs['TableRef']?.setTableData(newData);
}
},
refreshTable() {
this.$refs['TableRef']?.refresh();
},
},
};
</script>
src/pages/oceanus/equipment/index.vue
View file @ c6c3093f
......@@ -22,10 +22,6 @@ export default {
isObjEmpty,
};
},
watch: {
treeVale(val) {
console.log(val);
},
},
watch: {},
};
</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