Skip to content

GitLab

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

Merge branch 'feature/chw' into 'master' 

设备管理

See merge request product/kim3-web-vue/starter-web-vue!36
parents 30ec7c09 c6c3093f
Hide whitespace changes
Inline Side-by-side
Showing with 554 additions and 82 deletions
src/api/oceanus.js
View file @ e6d2a34e
...@@ -10,8 +10,13 @@ function updateOceanusTreeApi(data) { ...@@ -10,8 +10,13 @@ function updateOceanusTreeApi(data) {
return putReq('/oceanus/api/v1/categories', data); return putReq('/oceanus/api/v1/categories', data);
} }
function delOceanusTreeApi(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) { function addAttributesApi(data) {
return postReq('/oceanus/api/v1/categories/attributes', data); return postReq('/oceanus/api/v1/categories/attributes', data);
} }
...@@ -39,12 +44,32 @@ function delEquipmentsTreeApi(data) { ...@@ -39,12 +44,32 @@ function delEquipmentsTreeApi(data) {
function getEquipmentsInfoApi(data) { function getEquipmentsInfoApi(data) {
return getReq(`/oceanus/api/v1/equipments/${data.catalogValue}`); 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 { export default {
getOceanusTree: getOceanusTreeApi, getOceanusTree: getOceanusTreeApi,
addOceanusTree: addOceanusTreeApi, addOceanusTree: addOceanusTreeApi,
updateOceanusTree: updateOceanusTreeApi, updateOceanusTree: updateOceanusTreeApi,
delOceanusTree: delOceanusTreeApi, delOceanusTree: delOceanusTreeApi,
getAttributes:getAttributesApi,
addAttributes: addAttributesApi, addAttributes: addAttributesApi,
updateAttributes: updateAttributesApi, updateAttributes: updateAttributesApi,
movementAttributes: movementAttributesApi, movementAttributes: movementAttributesApi,
...@@ -53,4 +78,9 @@ export default { ...@@ -53,4 +78,9 @@ export default {
updateEquipmentsTree: updateEquipmentsTreeApi, updateEquipmentsTree: updateEquipmentsTreeApi,
delEquipmentsTree: delEquipmentsTreeApi, delEquipmentsTree: delEquipmentsTreeApi,
getEquipmentsInfo: getEquipmentsInfoApi, getEquipmentsInfo: getEquipmentsInfoApi,
getEquipmentsAttributes:getEquipmentsAttributesApi,
addEquipmentsAttributes:addEquipmentsAttributesApi,
updateEquipmentsAttributes:updateEquipmentsAttributesApi,
topEquipmentsAttributes:topEquipmentsAttributesApi,
bottomEquipmentsAttributes:bottomEquipmentsAttributesApi,
}; };
src/components/popconfirm_delete/index.vue
View file @ e6d2a34e
...@@ -46,10 +46,10 @@ export default { ...@@ -46,10 +46,10 @@ export default {
await postReq(this.url.url, this.url?.data); await postReq(this.url.url, this.url?.data);
break; break;
case 'put': case 'put':
await putReq(this.url.url, this.url?.data); await putReq(this.url.url, {}, { data: this.url?.data });
break; break;
case 'del': case 'del':
await delReq(this.url.url, this.url?.data); await delReq(this.url.url, {}, { data: this.url?.data });
break; break;
} }
} }
......
src/components/table/SimpleTable.vue 0 → 100644
View file @ e6d2a34e
<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 @ e6d2a34e
...@@ -89,7 +89,7 @@ export default { ...@@ -89,7 +89,7 @@ export default {
this.expandedKeys = expandedKeys; this.expandedKeys = expandedKeys;
this.selectedKeys = [treeObj.treeData[0]?.categoryId]; this.selectedKeys = [treeObj.treeData[0]?.categoryId];
this.selectedObj = treeObj.treeData[0]; this.selectedObj = treeObj.treeData[0];
this.$emit('change', treeObj.treeData[0]); this.$emit('change', { categoryId: treeObj.treeData[0].categoryId });
}, },
async onSearch(searchText) { async onSearch(searchText) {
const dataList = this.treeObj.data; const dataList = this.treeObj.data;
...@@ -110,7 +110,7 @@ export default { ...@@ -110,7 +110,7 @@ export default {
const cueData = node.$props.dataRef; const cueData = node.$props.dataRef;
this.selectedObj = cueData; this.selectedObj = cueData;
this.searchValue = undefined; this.searchValue = undefined;
this.$emit('change', cueData); this.$emit('change', { categoryId: cueData.categoryId });
} }
}, },
onExpand(expandedKeys) { onExpand(expandedKeys) {
...@@ -131,11 +131,11 @@ export default { ...@@ -131,11 +131,11 @@ export default {
delete data.children; delete data.children;
this.view(data, 1); this.view(data, 1);
}, },
del() { async del() {
const categoryId = this.selectedObj?.categoryId; const categoryId = this.selectedObj?.categoryId;
if (categoryId) return; if (!categoryId) return;
try { try {
this.Api.delOceanusTree({ categoryId }); await Api.delOceanusTree({ categoryId });
this.$message.success('删除成功!'); this.$message.success('删除成功!');
this.init(); this.init();
} catch (e) { } catch (e) {
......
src/pages/oceanus/category/components/RightTable.vue
View file @ e6d2a34e
<template> <template>
<my-table <my-card>
:style="{ marginTop: 0 }" <Table :request="Api.getAttributes" rowKey="attributeId" ref="table" :otherParams="tableParam">
url="/oceanus/api/v1/categories/attributes" <!-- <template v-if="tableParam.categoryId !== 1" #search="{ query }">
:tableParam="{ categoryId: tableParam.categoryId }"
rowKey="key"
ref="table"
:formatData="formatData"
>
<template v-if="tableParam.categoryId !== 1" #search="{ query }">
<my-form-item label="账号" :colAttr="{ span: 12 }"> <my-form-item label="账号" :colAttr="{ span: 12 }">
<a-input placeholder="Basic usage" v-model="query.attributeName" /> <a-input placeholder="Basic usage" v-model="query.attributeName" />
</my-form-item> </my-form-item>
</template> </template> -->
<template v-if="tableParam.categoryId !== 1" #buttons> <!-- <template v-if="tableParam.categoryId !== 1" #buttons>
<a-button type="primary" @click="onAddTableRow">新增</a-button> <a-button type="primary" @click="onAddTableRow">新增</a-button>
</template> </template> -->
<template #search>
<a-table-column title="属性名称"> <a-row>
<template #default="row"> <a-col :span="12">
<a-input v-if="row.editable" v-model="row.attributeName" /> <a-button type="link" @click="onAddTableRow">新增</a-button>
<span v-else> </a-col>
{{ row.attributeName }} <a-col :span="12" class="tw-text-right">
</span> <a-input-search
</template> v-model="attributeName"
</a-table-column> :style="{ width: '80%' }"
<a-table-column title="操作" :width="180"> placeholder="请输入搜索内容"
<template #default="row"> enter-button
<ActionButton v-if="row.editable" :buttons="editButtons" :row="row" /> allowClear
<ActionButton v-else :buttons="buttons" :row="row" /> @search="onSearch"
/>
</a-col>
</a-row>
</template> </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> </template>
<script> <script>
import Api from '@/api/oceanus'; import Api from '@/api/oceanus';
import { formatObj } from '@/utils';
import ActionButton from '@/components/action_button/index.vue'; import ActionButton from '@/components/action_button/index.vue';
import Table from '@/components/table/SimpleTable.vue';
export default { export default {
components: { ActionButton }, components: { ActionButton, Table },
props: { props: {
param: Object, param: Object,
}, },
watch: { watch: {
param(val) { param: {
this.tableParam = val; handler(val) {
this.tableParam = { ...val };
this.attributeName = '';
},
deep: true,
immediate: true,
}, },
}, },
data() { data() {
...@@ -100,12 +117,16 @@ export default { ...@@ -100,12 +117,16 @@ export default {
}, },
], ],
tableParam: {}, tableParam: {},
attributeName: '',
Api,
}; };
}, },
methods: { methods: {
async formatData(data) { onSearch(val) {
const newData = await formatObj(data.records, { key: 'attributeId' }); this.tableParam = {
return newData; ...this.tableParam,
attributeName: val,
};
}, },
onAddTableRow() { onAddTableRow() {
const data = this.$refs['table']?.getTableData(); const data = this.$refs['table']?.getTableData();
...@@ -170,7 +191,7 @@ export default { ...@@ -170,7 +191,7 @@ export default {
this.$refs['table']?.setTableData(newData); this.$refs['table']?.setTableData(newData);
}, },
refreshTable() { refreshTable() {
this.$refs['table']?.reset(); this.$refs['table']?.refresh();
}, },
}, },
}; };
......
src/pages/oceanus/category/index.vue
View file @ e6d2a34e
...@@ -20,6 +20,11 @@ export default { ...@@ -20,6 +20,11 @@ export default {
treeVale: {}, treeVale: {},
}; };
}, },
watch: {
treeVale(val) {
console.log(val);
},
},
methods: {}, methods: {},
}; };
</script> </script>
src/pages/oceanus/equipment/Left/LeftTree.vue
View file @ e6d2a34e
...@@ -2,7 +2,7 @@ ...@@ -2,7 +2,7 @@
<div> <div>
<my-card> <my-card>
<a-row :gutter="[16, 16]"> <a-row :gutter="[16, 16]">
<a-col :span="24"> <!-- <a-col :span="24">
<a-select <a-select
show-search show-search
v-model="searchValue" v-model="searchValue"
...@@ -16,22 +16,22 @@ ...@@ -16,22 +16,22 @@
@search="onSearch" @search="onSearch"
@change="onChange" @change="onChange"
/> />
</a-col> </a-col> -->
<a-col :span="24" class="tw-text-right"> <a-col :span="24" class="tw-text-right">
<a-button-group> <a-button-group>
<a-dropdown :disabled="selectedKeys.length === 0"> <a-dropdown :disabled="!treeNode">
<a-menu slot="overlay"> <a-menu slot="overlay">
<a-menu-item <a-menu-item
key="1" key="1"
@click="addOrg" @click="addOrg"
:disabled="selectedObj.catalogType === 'EQUIPMENT'" :disabled="!(treeNode && treeNode.dataRef.catalogType !== 'EQUIPMENT')"
>新增组织 >新增组织
</a-menu-item> </a-menu-item>
<a-menu-item key="2" @click="addEqu">新增设备 </a-menu-item> <a-menu-item key="2" @click="addEqu">新增设备 </a-menu-item>
</a-menu> </a-menu>
<a-button type="primary" ghost>新增 <a-icon type="down" /></a-button> <a-button type="primary" ghost>新增 <a-icon type="down" /></a-button>
</a-dropdown> </a-dropdown>
<a-button <!-- <a-button
type="primary" type="primary"
ghost ghost
@click="edit" @click="edit"
...@@ -39,13 +39,27 @@ ...@@ -39,13 +39,27 @@
selectedKeys.length === 0 || selectedObj.catalogType === 'ORGANIZATION' selectedKeys.length === 0 || selectedObj.catalogType === 'ORGANIZATION'
" "
>编辑</a-button >编辑</a-button
> >
<a-button <a-button
type="primary" type="primary"
ghost ghost
@click="del" @click="del"
:disabled="selectedKeys.length === 0 || selectedObj.catalogType === 'ROOTNODE'" :disabled="selectedKeys.length === 0 || selectedObj.catalogType === 'ROOTNODE'"
>删除</a-button >删除</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-button-group>
</a-col> </a-col>
...@@ -86,7 +100,6 @@ export default { ...@@ -86,7 +100,6 @@ export default {
replaceFields: { title: 'catalogName', key: 'catalogId', children: 'children' }, replaceFields: { title: 'catalogName', key: 'catalogId', children: 'children' },
treeData: [], treeData: [],
selectedKeys: [], selectedKeys: [],
selectedObj: {},
allData: [], allData: [],
treeNode: undefined, treeNode: undefined,
}; };
...@@ -112,7 +125,6 @@ export default { ...@@ -112,7 +125,6 @@ export default {
this.allData = [...this.allData, parentNode]; this.allData = [...this.allData, parentNode];
this.treeNode = undefined; this.treeNode = undefined;
this.selectedKeys = []; this.selectedKeys = [];
this.selectedObj = {};
}, },
onLoadData(treeNode) { onLoadData(treeNode) {
return new Promise((resolve) => { return new Promise((resolve) => {
...@@ -135,31 +147,29 @@ export default { ...@@ -135,31 +147,29 @@ export default {
}, },
onChange(val) { onChange(val) {
const data = this.allData.find((i) => i.catalogId === val); const data = this.allData.find((i) => i.catalogId === val);
this.selectedObj = data;
this.selectedKeys = [val]; this.selectedKeys = [val];
this.searchValue = val; this.searchValue = val;
this.$emit('change', data); this.$emit('change', data);
}, },
async onSelect(selectedKeys, { node }) { async onSelect(selectedKeys, { node }) {
console.log(node.dataRef);
this.treeNode = node; this.treeNode = node;
this.selectedKeys = selectedKeys; this.selectedKeys = selectedKeys;
let data = {}; let data = {};
if (selectedKeys.length !== 0) { if (selectedKeys.length !== 0) {
const curData = node.dataRef; const curData = node.dataRef;
this.selectedObj = curData;
this.searchValue = undefined; this.searchValue = undefined;
if (curData.catalogType === 'EQUIPMENT') { if (curData.catalogType === 'EQUIPMENT') {
data = await Api.getEquipmentsInfo(curData); data = await Api.getEquipmentsInfo(curData);
this.selectedObj = { Object.keys(data).forEach((key) => {
node.dataRef[key] = data[key];
});
data = {
...data, ...data,
catalogId: curData.catalogId, catalogId: curData.catalogId,
catalogType: curData.catalogType, catalogType: curData.catalogType,
}; };
data = this.selectedObj; this.treeData = [...this.treeData];
} }
} else {
this.selectedObj = {};
} }
this.$emit('change', data); this.$emit('change', data);
}, },
...@@ -170,7 +180,8 @@ export default { ...@@ -170,7 +180,8 @@ export default {
}); });
}, },
addEqu() { addEqu() {
const { catalogId } = this.selectedObj; const data = { ...this.treeNode.dataRef };
const { catalogId } = data;
this.view({ parentCatalogId: catalogId, catalogType: 'EQUIPMENT' }, 0); this.view({ parentCatalogId: catalogId, catalogType: 'EQUIPMENT' }, 0);
}, },
addOrg() { addOrg() {
...@@ -180,24 +191,24 @@ export default { ...@@ -180,24 +191,24 @@ export default {
this.onLoadData(this.treeNode); this.onLoadData(this.treeNode);
}, },
edit() { edit() {
const curData = { ...this.treeNode.dataRef };
const data = { const data = {
...this.selectedObj, ...curData,
installTime: installTime: curData.installTime && moment(curData.installTime, 'YYYY-MM-DD'),
this.selectedObj.installTime && moment(this.selectedObj.installTime, 'YYYY-MM-DD'), runTime: curData.runTime && moment(curData.runTime, 'YYYY-MM-DD'),
runTime: this.selectedObj.runTime && moment(this.selectedObj.runTime, 'YYYY-MM-DD'),
}; };
delete data.children; delete data.children;
this.view(data, 1); this.view(data, 1);
}, },
async del() { async del() {
if (isObjEmpty(this.selectedObj)) return; const data = { ...this.treeNode.dataRef };
if (isObjEmpty(data)) return;
try { try {
await Api.delEquipmentsTree(this.selectedObj); await Api.delEquipmentsTree(data);
this.$message.success('删除成功!'); this.$message.success('删除成功!');
this.onLoadData(this.treeNode.$parent); this.onLoadData(this.treeNode.$parent);
this.treeNode = undefined; this.treeNode = undefined;
this.selectedKeys = []; this.selectedKeys = [];
this.selectedObj = {};
} catch (e) { } catch (e) {
this.$message.warning('删除失败!'); this.$message.warning('删除失败!');
} }
...@@ -212,13 +223,13 @@ export default { ...@@ -212,13 +223,13 @@ export default {
const { catalogId, catalogType } = catalogForm; const { catalogId, catalogType } = catalogForm;
console.log(this.treeNode); console.log(this.treeNode);
this.treeNode.dataRef.catalogName = equipmentName; this.treeNode.dataRef.catalogName = equipmentName;
this.selectedObj = { const newData = {
...equipmentForm, ...equipmentForm,
catalogId, catalogId,
catalogType, catalogType,
}; };
this.treeData = [...this.treeData]; this.treeData = [...this.treeData];
this.$emit('change', this.selectedObj); this.$emit('change', newData);
} }
}, },
}, },
......
src/pages/oceanus/equipment/Left/TreeDrawer.vue
View file @ e6d2a34e
...@@ -8,7 +8,7 @@ ...@@ -8,7 +8,7 @@
<a-input v-model="form.equipmentName" :disabled="isView" /> <a-input v-model="form.equipmentName" :disabled="isView" />
</a-form-model-item> </a-form-model-item>
<a-form-model-item label="类别" prop="categoryId"> <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>
<a-form-model-item label="等级" prop="equipmentGrade"> <a-form-model-item label="等级" prop="equipmentGrade">
<Select v-model="form.equipmentGrade" :options="equipmentGradeList" :disabled="isView" /> <Select v-model="form.equipmentGrade" :options="equipmentGradeList" :disabled="isView" />
......
src/pages/oceanus/equipment/Right/RightBox.vue
View file @ e6d2a34e
<template> <template>
<my-card> <my-card>
<a-tabs default-active-key="1" @change="callback"> <a-tabs v-model="key">
<a-tab-pane key="1" tab="Tab 1"> Content of Tab Pane 1 </a-tab-pane> <a-tab-pane key="1" tab="基本信息" :forceRender="true">
<a-tab-pane key="2" tab="Tab 2" force-render> Content of Tab Pane 2 </a-tab-pane> <TabOne v-if="key === '1'" :dataInfo="dataInfo" />
<a-tab-pane key="3" tab="Tab 3"> Content of Tab Pane 3 </a-tab-pane> </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> </a-tabs>
</my-card> </my-card>
</template> </template>
<script> <script>
import TabOne from './TabOne.vue';
import TabTwo from './TabTwo.vue';
export default { export default {
components: { TabOne, TabTwo },
props: {
info: {
type: Object,
default: () => ({}),
},
},
data() { data() {
return {}; return {
dataInfo: {},
key: '1',
};
}, },
methods: { watch: {
callback(key) { info: {
console.log(key); handler(val) {
this.dataInfo = val;
this.key = '1';
},
immediate: true,
deep: true,
}, },
}, },
methods: {
// callback(key) {
// this.key = key;
// },
},
}; };
</script> </script>
src/pages/oceanus/equipment/Right/TabOne.vue 0 → 100644
View file @ e6d2a34e
<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 @ e6d2a34e
<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 @ e6d2a34e
...@@ -22,10 +22,6 @@ export default { ...@@ -22,10 +22,6 @@ export default {
isObjEmpty, isObjEmpty,
}; };
}, },
watch: { watch: {},
treeVale(val) {
console.log(val);
},
},
}; };
</script> </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