Merge branch 'feature/chw' into 'master'

设备管理

See merge request product/kim3-web-vue/starter-web-vue!34

src/api/index.js

 import { request, METHOD, formatObj } from '@/utils';
+import Lang from '@/utils/langUtils';
 export * from './menu';
 export * from './system';
 export * from './task';
@@ -19,3 +20,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

@@ -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

@@ -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

+<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

+<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

 <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

+<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

@@ -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

@@ -125,6 +125,10 @@ export const formatObj = (ArrObj, obj) => {
     return newDataOne;
 };
 
+export const isObjEmpty = (data = {}) => {
+    const arr = Object.keys(data);
+    return arr.length === 0;
+};
 /**
  * 下载文件
  * @param {String} url 下载路径

src/utils/requestUtil.js

@@ -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) {