Skip to content

GitLab

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

设备管理

parent 6438032c
Hide whitespace changes
Inline Side-by-side
Showing with 563 additions and 8 deletions
src/api/index.js
View file @ de87c07c
import { request, METHOD, formatObj } from '@/utils';
import Lang from '@/utils/langUtils';
export * from './menu';
export * from './system';
export * from './task';
......@@ -18,3 +19,16 @@ export const getStaticParam = async staticKey => {
});
return newData;
};
export const getStaticDataApi = async data => {
const res = await request('/api/v1/parameters/business/list', METHOD.GET, {
...data,
paramLocale: Lang.get(),
});
const newData = await formatObj(res || [], {
value: 'paramValue',
label: 'paramName',
key: 'paramId',
});
return newData;
};
src/api/oceanus.js
View file @ de87c07c
......@@ -23,7 +23,21 @@ function movementAttributesApi(data) {
}
function getEquipmentsTreeApi(data) {
return getReq(`/oceanus/api/v1/equipments/catalogs/${data.catalogId}`, data);
return getReq(`/oceanus/api/v1/equipments/catalogs/${data.catalogId}`);
}
function addEquipmentsTreeApi(data) {
return postReq(`/oceanus/api/v1/equipments/catalogs`, data);
}
function updateEquipmentsTreeApi(data) {
return putReq(`/oceanus/api/v1/equipments/catalogs`, data);
}
function delEquipmentsTreeApi(data) {
return delReq(`/oceanus/api/v1/equipments/catalogs`, {}, { data });
}
function getEquipmentsInfoApi(data) {
return getReq(`/oceanus/api/v1/equipments/${data.catalogValue}`);
}
export default {
......@@ -35,4 +49,8 @@ export default {
updateAttributes: updateAttributesApi,
movementAttributes: movementAttributesApi,
getEquipmentsTree: getEquipmentsTreeApi,
addEquipmentsTree: addEquipmentsTreeApi,
updateEquipmentsTree: updateEquipmentsTreeApi,
delEquipmentsTree: delEquipmentsTreeApi,
getEquipmentsInfo: getEquipmentsInfoApi,
};
src/pages/oceanus/equipment/components/LeftTree.vue → src/pages/oceanus/equipment/Left/LeftTree.vue
View file @ de87c07c
......@@ -19,9 +19,14 @@
</a-col>
<a-col :span="24" class="tw-text-right">
<a-button-group>
<a-dropdown>
<a-dropdown :disabled="selectedKeys.length === 0">
<a-menu slot="overlay">
<a-menu-item key="1" @click="addOrg">新增组织 </a-menu-item>
<a-menu-item
key="1"
@click="addOrg"
:disabled="selectedObj.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>
......@@ -30,10 +35,18 @@
type="primary"
ghost
@click="edit"
:disabled="selectedObj.catalogType !== 'ORGANIZATION'"
:disabled="
selectedKeys.length === 0 || selectedObj.catalogType === 'ORGANIZATION'
"
>编辑</a-button
>
<a-button type="primary" ghost @click="del">删除</a-button>
<a-button
type="primary"
ghost
@click="del"
:disabled="selectedKeys.length === 0 || selectedObj.catalogType === 'ROOTNODE'"
>删除</a-button
>
</a-button-group>
</a-col>
</a-row>
......@@ -42,6 +55,7 @@
<a-row :gutter="[16, 16]">
<a-col :span="24">
<a-tree
ref="Tree"
:treeData="treeData"
:replaceFields="replaceFields"
:selectedKeys="selectedKeys"
......@@ -50,21 +64,23 @@
/>
</a-col>
</a-row>
<TreeDrawer ref="TreeDrawer" :refresh="init" />
<TreeDrawer ref="TreeDrawer" :refresh="treeDrawerRefresh" />
<TreeModal ref="TreeModal" :parentNodeId="selectedKeys[0]" :afterSubmit="afterSubmit" />
</my-card>
</div>
</template>
<script>
import moment from 'moment';
import Api from '@/api/oceanus';
import { formatObj } from '@/utils';
import { formatObj, isObjEmpty } from '@/utils';
import TreeDrawer from './TreeDrawer.vue';
import TreeModal from './TreeModal.vue';
export default {
components: { TreeDrawer },
components: { TreeDrawer, TreeModal },
data() {
return {
catalogId: -1,
searchValue: undefined,
dataSource: [],
replaceFields: { title: 'catalogName', key: 'catalogId', children: 'children' },
......@@ -72,6 +88,7 @@ export default {
selectedKeys: [],
selectedObj: {},
allData: [],
treeNode: undefined,
};
},
model: {
......@@ -79,35 +96,32 @@ export default {
event: 'change',
},
mounted() {
this.init(this.catalogId);
this.init();
},
methods: {
async init(id) {
const data = await Api.getEquipmentsTree({ catalogId: id });
this.treeData = data;
this.selectedKeys = [data[0]?.catalogId];
this.selectedObj = data[0];
this.$emit('change', data[0]);
this.allData = [...this.allData, ...data];
async init() {
this.treeData = [];
const parentNode = {
catalogId: -1,
catalogName: '根节点',
catalogType: 'ROOTNODE',
isLeaf: false,
};
this.treeData = [parentNode];
this.allData = [...this.allData, parentNode];
this.treeNode = undefined;
this.selectedKeys = [];
this.selectedObj = {};
},
onLoadData(treeNode) {
return new Promise((resolve) => {
if (treeNode.dataRef.children) {
resolve();
return;
}
Api.getEquipmentsTree({ catalogId: treeNode.dataRef.catalogId }).then((resp) => {
if (resp.length === 0) {
treeNode.dataRef.isLeaf = true;
treeNode.dataRef.isLeaf = false;
} else {
this.allData = [...this.allData, ...resp];
const newData = resp.map((i) => {
return {
...i,
isLeaf: i.catalogType !== 'ORGANIZATION',
};
});
treeNode.dataRef.children = newData;
treeNode.dataRef.children = resp;
}
this.treeData = [...this.treeData];
resolve();
......@@ -126,14 +140,28 @@ export default {
this.searchValue = val;
this.$emit('change', data);
},
onSelect(selectedKeys, { node }) {
async onSelect(selectedKeys, { node }) {
console.log(node.dataRef);
this.treeNode = node;
this.selectedKeys = selectedKeys;
let data = {};
if (selectedKeys.length !== 0) {
this.selectedKeys = selectedKeys;
const cueData = node.$props.dataRef;
this.selectedObj = cueData;
const curData = node.dataRef;
this.selectedObj = curData;
this.searchValue = undefined;
this.$emit('change', cueData);
if (curData.catalogType === 'EQUIPMENT') {
data = await Api.getEquipmentsInfo(curData);
this.selectedObj = {
...data,
catalogId: curData.catalogId,
catalogType: curData.catalogType,
};
data = this.selectedObj;
}
} else {
this.selectedObj = {};
}
this.$emit('change', data);
},
async view(data = {}, type = 0) {
this.$refs['TreeDrawer']?.open();
......@@ -142,26 +170,57 @@ export default {
});
},
addEqu() {
const { categoryId } = this.selectedObj;
this.view({ parentCategoryId: categoryId }, 0);
const { catalogId } = this.selectedObj;
this.view({ parentCatalogId: catalogId, catalogType: 'EQUIPMENT' }, 0);
},
addOrg() {
this.$refs.TreeModal.open();
},
afterSubmit() {
this.onLoadData(this.treeNode);
},
addOrg() {},
edit() {
const data = this.selectedObj;
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'),
};
delete data.children;
this.view(data, 1);
},
del() {
const categoryId = this.selectedObj?.categoryId;
if (categoryId) return;
async del() {
if (isObjEmpty(this.selectedObj)) return;
try {
this.Api.delOceanusTree({ categoryId });
await Api.delEquipmentsTree(this.selectedObj);
this.$message.success('删除成功!');
this.init();
this.onLoadData(this.treeNode.$parent);
this.treeNode = undefined;
this.selectedKeys = [];
this.selectedObj = {};
} catch (e) {
this.$message.warning('删除失败!');
}
},
treeDrawerRefresh(type, data) {
if (type === 0) {
this.onLoadData(this.treeNode);
}
if (type === 1) {
const { equipmentForm, catalogForm } = data;
const { equipmentName } = equipmentForm;
const { catalogId, catalogType } = catalogForm;
console.log(this.treeNode);
this.treeNode.dataRef.catalogName = equipmentName;
this.selectedObj = {
...equipmentForm,
catalogId,
catalogType,
};
this.treeData = [...this.treeData];
this.$emit('change', this.selectedObj);
}
},
},
};
</script>
src/pages/oceanus/equipment/Left/OrganizationTree.vue 0 → 100644
View file @ de87c07c
<template>
<a-tree-select
:value="value"
show-search
style="width: 100%"
:dropdown-style="{ maxHeight: '400px', overflow: 'auto' }"
placeholder="Please select"
:tree-data="treeData"
allow-clear
tree-default-expand-all
:replaceFields="replaceFields"
@change="onChange"
/>
</template>
<!-- v-on="$listeners" -->
<script>
import api from '@/api/organization';
import { arrayToTree } from '@/utils';
export default {
model: {
prop: 'value',
event: 'change',
},
props: {
value: Number,
showMenu: Boolean,
getName: Function,
},
data() {
return {
treeData: [],
replaceFields: {
title: 'orgName',
key: 'orgId',
value: 'orgId',
},
};
},
async mounted() {
const rawData = await api.getOrganizationList();
const newData = rawData.map((i) => ({
...i,
}));
const newArr = new arrayToTree({
data: newData,
rootValue: 0,
parentKey: 'parentOrgId',
key: 'orgId',
}).treeData;
this.treeData = [...newArr];
},
methods: {
onChange(value, label, extra) {
this.getName && this.getName(label);
this.$emit('change', value);
},
},
};
</script>
src/pages/oceanus/equipment/Left/TreeDrawer.vue 0 → 100644
View file @ de87c07c
<template>
<Drawer ref="drawerRef" v-model="visible" :title="title" :onOk="submit" :colesAfter="colesAfter">
<a-form-model layout="vertical" :model="form" :rules="rules" ref="DrawerForm">
<a-form-model-item label="设备编码" prop="equipmentCode">
<a-input v-model="form.equipmentCode" :disabled="isView" />
</a-form-model-item>
<a-form-model-item label="设备名称" prop="equipmentName">
<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-form-model-item>
<a-form-model-item label="等级" prop="equipmentGrade">
<Select v-model="form.equipmentGrade" :options="equipmentGradeList" :disabled="isView" />
</a-form-model-item>
<a-form-model-item label="安装日期" prop="installTime">
<a-date-picker class="tw-w-full" v-model="form.installTime" :disabled="isView" />
</a-form-model-item>
<a-form-model-item label="运行日期" prop="runTime">
<a-date-picker class="tw-w-full" v-model="form.runTime" :disabled="isView" />
</a-form-model-item>
<a-form-model-item label="供应商" prop="supplier">
<a-input v-model="form.supplier" :disabled="isView" />
</a-form-model-item>
<a-form-model-item label="制造商" prop="manufacturer">
<a-input v-model="form.manufacturer" :disabled="isView" />
</a-form-model-item>
<a-form-model-item label="专业" prop="specialtyCode">
<Select v-model="form.specialtyCode" :options="specialtyCodeList" :disabled="isView" />
</a-form-model-item>
</a-form-model>
</Drawer>
</template>
<script>
import { getStaticDataApi } from '@/api';
import Drawer from '@/components/table/drawer.vue';
import FormMixin from '@/components/FormMixin';
import Api from '@/api/oceanus';
import Select from '@/components/MySelect/index.vue';
import { arrayToTree, formatObj } from '@/utils';
export default {
components: { Drawer, Select },
props: {
refresh: Function,
},
mixins: [FormMixin],
data() {
return {
visible: false,
form: {},
rules: {
equipmentCode: [
{ required: true, message: 'Please select Activity zone', trigger: 'change' },
],
equipmentName: [
{ required: true, message: 'Please select Activity zone', trigger: 'change' },
],
categoryId: [{ required: true, message: 'Please select Activity zone', trigger: 'change' }],
},
equipmentGradeList: [],
specialtyCodeList: [],
oceanusTreeList: [],
Api,
};
},
async mounted() {
const oceanusTreeList = await formatObj(await Api.getOceanusTree(), {
label: 'categoryName',
value: 'categoryId',
});
const newOceanusTreeList = new arrayToTree({
data: oceanusTreeList,
rootValue: -1,
parentKey: 'parentCategoryId',
key: 'categoryId',
}).treeData;
const equipmentGradeList = await getStaticDataApi({
paramModule: 'oceanus_equipment',
paramCode: 'equipment_grade',
});
const specialtyCodeList = await getStaticDataApi({
paramModule: 'oceanus_equipment',
paramCode: 'specialty_code',
});
this.oceanusTreeList = newOceanusTreeList;
this.equipmentGradeList = equipmentGradeList;
this.specialtyCodeList = specialtyCodeList;
},
methods: {
open() {
this.form = {};
this.visible = true;
},
add() {
const { parentCatalogId, catalogType, installTime, runTime, ...rest } = this.form;
const data = {
catalogForm: {
parentCatalogId,
catalogType,
},
equipmentForm: {
installTime: installTime && installTime.format('YYYY-MM-DD hh:mm:ss'),
runTime: runTime && runTime.format('YYYY-MM-DD hh:mm:ss'),
...rest,
},
};
return Api.addEquipmentsTree(data);
},
edit() {
const { catalogId, catalogType, installTime, runTime, ...rest } = this.form;
const data = {
catalogForm: {
catalogId,
catalogType,
},
equipmentForm: {
installTime: installTime && installTime.format('YYYY-MM-DD hh:mm:ss'),
runTime: runTime && runTime.format('YYYY-MM-DD hh:mm:ss'),
...rest,
},
};
return Api.updateEquipmentsTree(data);
},
colesAfter() {
const { catalogId, catalogType, installTime, runTime, ...rest } = this.form;
const data = {
catalogForm: {
catalogId,
catalogType,
},
equipmentForm: {
installTime: installTime && installTime.format('YYYY-MM-DD hh:mm:ss'),
runTime: runTime && runTime.format('YYYY-MM-DD hh:mm:ss'),
...rest,
},
};
this.refresh(this.type, data);
},
},
};
</script>
src/pages/oceanus/equipment/components/TreeDrawer.vue → src/pages/oceanus/equipment/Left/TreeModal.vue
View file @ de87c07c
<template>
<Drawer ref="drawerRef" v-model="visible" :title="title" :onOk="submit" :colesAfter="refresh">
<a-modal ref="drawerRef" :visible="visible" title="新增组织" @ok="submit" @cancel="close">
<a-form-model layout="vertical" :model="form" :rules="rules" ref="DrawerForm">
<a-form-model-item label="编码" prop="categoryCode">
<a-input v-model="form.categoryCode" :disabled="isView" />
</a-form-model-item>
<a-form-model-item label="名称" prop="categoryName">
<a-input v-model="form.categoryName" :disabled="isView" />
</a-form-model-item>
<a-form-model-item label="说明" prop="remark">
<a-textarea v-model="form.remark" :disabled="isView" :rows="4" />
<a-form-model-item label="组织" prop="catalogValue">
<OrganizationTree v-model="form.catalogValue" :disabled="isView" />
</a-form-model-item>
</a-form-model>
</Drawer>
</a-modal>
</template>
<script>
import Drawer from '@/components/table/drawer.vue';
import FormMixin from '@/components/FormMixin';
import Api from '@/api/oceanus';
import OrganizationTree from './OrganizationTree.vue';
export default {
components: { Drawer },
components: { OrganizationTree },
props: {
refresh: Function,
afterSubmit: Function,
parentNodeId: [String, Number],
},
watch: {
parentNodeId(val) {
this.parentId = val;
},
},
mixins: [FormMixin],
data() {
return {
visible: false,
parentId: undefined,
form: {},
rules: {
categoryCode: [{ required: true, message: 'Please select Activity zone', trigger: 'change' }],
categoryName: [{ required: true, message: 'Please select Activity zone', trigger: 'change' }],
remark: [{ required: true, message: 'Please select Activity zone', trigger: 'change' }],
catalogValue: [{ required: true, message: 'Please select Activity zone', trigger: 'change' }],
},
Api,
};
......@@ -43,11 +42,19 @@ export default {
this.form = {};
this.visible = true;
},
add() {
return Api.addOceanusTree(this.form);
async add() {
const data = {
...this.form,
catalogType: 'ORGANIZATION',
parentCatalogId: this.parentId + '',
};
await Api.addEquipmentsTree({ catalogForm: data });
this.close();
this.afterSubmit && this.afterSubmit();
},
edit() {
return Api.updateOceanusTree(this.form);
close() {
this.form = {};
this.visible = false;
},
},
};
......
src/pages/oceanus/equipment/Right/RightBox.vue 0 → 100644
View file @ de87c07c
<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>
</my-card>
</template>
<script>
export default {
data() {
return {};
},
methods: {
callback(key) {
console.log(key);
},
},
};
</script>
src/pages/oceanus/equipment/index.vue
View file @ de87c07c
......@@ -4,22 +4,28 @@
<LeftTree v-model="treeVale" />
</a-col>
<a-col :span="16">
<RightTable />
<RightBox v-if="!isObjEmpty(treeVale)" :info="treeVale" />
</a-col>
</a-row>
</template>
<script>
import RightTable from './components/RightTable.vue';
import LeftTree from './components/LeftTree.vue';
import RightBox from './Right/RightBox.vue';
import LeftTree from './Left/LeftTree.vue';
import { isObjEmpty } from '@/utils';
export default {
components: { RightTable, LeftTree },
components: { RightBox, LeftTree },
data() {
return {
treeVale: {},
isObjEmpty,
};
},
methods: {},
watch: {
treeVale(val) {
console.log(val);
},
},
};
</script>
src/utils/index.js
View file @ de87c07c
......@@ -124,3 +124,8 @@ export const formatObj = async (ArrObj, obj) => {
});
return newDataOne;
};
export const isObjEmpty = (data = {}) => {
const arr = Object.keys(data);
return arr.length === 0;
};
src/utils/requestUtil.js
View file @ de87c07c
......@@ -135,8 +135,8 @@ function checkAuthorization() {
return !!getToken();
}
function delReq(url, config) {
return request(url, METHOD.DELETE, config);
function delReq(url, params, config) {
return request(url, METHOD.DELETE, params, config);
}
function getReq(url, params, config) {
......
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