Commit 54d62d0f authored by 陈浩玮's avatar 陈浩玮

设备管理

parent 8136dab8
......@@ -6,8 +6,33 @@ function getOceanusTreeApi(data) {
function addOceanusTreeApi(data) {
return postReq('/oceanus/api/v1/categories', data);
}
function updateOceanusTreeApi(data) {
return putReq('/oceanus/api/v1/categories', data);
}
function delOceanusTreeApi(data) {
return putReq(`/oceanus/api/v1/categories/${data.categoryId}`, data);
}
function addAttributesApi(data) {
return postReq('/oceanus/api/v1/categories/attributes', data);
}
function updateAttributesApi(data) {
return putReq('/oceanus/api/v1/categories/attributes', data);
}
function movementAttributesApi(data) {
return putReq('/oceanus/api/v1/categories/attributes/movement', data);
}
function getEquipmentsTreeApi(data) {
return getReq(`/oceanus/api/v1/equipments/catalogs/${data.catalogId}`, data);
}
export default {
getOceanusTree: getOceanusTreeApi,
addOceanusTree: addOceanusTreeApi,
updateOceanusTree: updateOceanusTreeApi,
delOceanusTree: delOceanusTreeApi,
addAttributes: addAttributesApi,
updateAttributes: updateAttributesApi,
movementAttributes: movementAttributesApi,
getEquipmentsTree: getEquipmentsTreeApi,
};
......@@ -6,7 +6,7 @@
v-if="btn.type === 'confirm'"
:cb="btn.after"
:title="btn.title"
:onOk="btn.onOk"
:onOk="() => btn.onOk && btn.onOk(row)"
:label="btn.label"
/>
<a v-else @click="() => btn.click(row)" v-bind="btn.option">{{ btn.label }}</a>
......@@ -23,7 +23,7 @@
v-if="btn.type === 'confirm'"
:cb="btn.after"
:title="btn.title"
:onOk="btn.onOk"
:onOk="() => btn.onOk && btn.onOk(row)"
:label="btn.label"
/>
<a v-else @click="() => btn.click(row)" v-bind="btn.option">{{ btn.label }}</a>
......@@ -77,10 +77,10 @@ export default {
return url;
},
init() {
this.buttons.map(i => {
this.buttons.map((i) => {
i.__hidden__ = i.isHidden && i.isHidden(this.row);
});
this.buttonsArr = this.buttons.filter(i => !i.__hidden__);
this.buttonsArr = this.buttons.filter((i) => !i.__hidden__);
},
},
};
......
......@@ -32,6 +32,7 @@ export default {
props: {
oncancel: Function,
onOk: Function,
colesAfter: Function,
value: Boolean,
width: { type: Number, default: 600 },
},
......@@ -72,6 +73,7 @@ export default {
// TODO
}
this.loading = false;
this.colesAfter && this.colesAfter();
},
},
};
......
......@@ -15,7 +15,7 @@
</div>
</my-card>
<my-card class="tw-mt-3">
<my-card :class="$scopedSlots.search ? 'tw-mt-3' : ''">
<a-space class="tw-mb-2.5">
<a-button v-if="addBtn" type="primary" key="add" v-bind="addBtn.options" @click="add">
{{ addBtn.text || '新建' }}
......@@ -89,11 +89,16 @@ export default {
formatData: Function,
noPage: Boolean,
rowSelection: Object, // radio OR checkbox
tableParam: {
type: Object,
default: () => ({}),
},
},
data() {
return {
initQuery: {
...initQuery,
...this.tableParam,
},
title: '新增',
data: [],
......@@ -126,6 +131,9 @@ export default {
addVisible(val) {
if (!val && this?.addBtn?.onCancel) this.addBtn.onCancel();
},
tableParam(val) {
this.reset();
},
},
mounted() {
this.getData();
......@@ -165,14 +173,14 @@ export default {
},
async getDataNoPage() {
const res = await request(this.url, METHOD.GET, this.queryForm);
if (this.formatData) this.data = this.formatData(res);
if (this.formatData) this.data = await this.formatData(res);
else this.data = res;
},
async getDataWithPage() {
const res = await request(this.url, METHOD.GET, { ...this.initQuery, ...this.queryForm });
this.total = res.total;
if (this.formatData) this.data = this.formatData(res);
if (this.formatData) this.data = await this.formatData(res);
else this.data = res.records;
},
......@@ -214,7 +222,7 @@ export default {
},
reset() {
this.queryForm = {};
this.initQuery = { ...initQuery };
this.initQuery = { ...initQuery, ...this.tableParam };
this.getData();
},
pageChange(page) {
......@@ -236,6 +244,9 @@ export default {
getTableData() {
return this.data;
},
setTableData(data) {
this.data = data;
},
},
};
</script>
<template>
<a-col v-bind="span">
<a-col v-bind="attr">
<a-form-model-item v-bind="layout">
<slot />
</a-form-model-item>
......@@ -8,9 +8,15 @@
<script>
export default {
props: {
colAttr: {
type: Object,
default: undefined,
},
},
data() {
return {
span: { xs: 24, sm: 24, lg: 12, xl: 6 },
attr: this.colAttr ? this.colAttr : { xs: 24, sm: 24, lg: 12, xl: 6 },
layout: { labelCol: { span: 6 }, wrapperCol: { span: 18 }, ...this.$attrs },
};
},
......
<template>
<div>
<my-card>
<a-row :gutter="[16, 16]">
<a-col :span="24">
<a-select
show-search
v-model="searchValue"
placeholder="input search text"
style="width: 100%"
:default-active-first-option="false"
:show-arrow="false"
:filter-option="false"
:not-found-content="null"
:options="dataSource"
@search="onSearch"
@change="onChange"
/>
</a-col>
<a-col :span="24" class="tw-text-right">
<a-button-group>
<a-button type="primary" ghost @click="add">新增</a-button>
<a-button type="primary" ghost @click="edit">编辑</a-button>
<a-button type="primary" ghost @click="del">删除</a-button>
</a-button-group>
</a-col>
</a-row>
</my-card>
<my-card class="tw-mt-2.5">
<a-row :gutter="[16, 16]">
<a-col :span="24">
<a-tree
:treeData="treeObj.treeData || []"
:replaceFields="replaceFields"
:expandedKeys="expandedKeys"
:selectedKeys="selectedKeys"
@select="onSelect"
@expand="onExpand"
/>
</a-col>
</a-row>
</my-card>
<TreeDrawer ref="TreeDrawer" :refresh="init" />
</div>
</template>
<script>
import Api from '@/api/oceanus';
import { arrayToTree, formatObj } from '@/utils';
import TreeDrawer from './TreeDrawer.vue';
export default {
components: { TreeDrawer },
data() {
return {
searchValue: undefined,
treeObj: {},
replaceFields: { title: 'categoryName', key: 'categoryId', children: 'children' },
selectedKeys: [],
expandedKeys: [],
dataSource: [],
selectedObj: {},
};
},
model: {
prop: 'value',
event: 'change',
},
mounted() {
this.init();
},
methods: {
async init() {
const data = await Api.getOceanusTree();
const expandedKeys = [];
const treeObj = new arrayToTree({
data: data,
rootValue: -1,
parentKey: 'parentCategoryId',
key: 'categoryId',
});
treeObj.data.map((i) => {
if (i.children) {
expandedKeys.push(i.categoryId);
}
});
this.treeObj = treeObj;
this.expandedKeys = expandedKeys;
this.selectedKeys = [treeObj.treeData[0]?.categoryId];
this.selectedObj = treeObj.treeData[0];
this.$emit('change', treeObj.treeData[0]);
},
async onSearch(searchText) {
const dataList = this.treeObj.data;
const newData = dataList.filter((i) => i.categoryName.indexOf(searchText) != -1);
this.dataSource = await formatObj(newData, { label: 'categoryName', value: 'categoryId' });
},
onChange(val) {
const data = this.treeObj.data.find((i) => i.categoryId === val);
delete data.children;
this.selectedObj = data;
this.selectedKeys = [val];
this.searchValue = val;
this.$emit('change', data);
},
onSelect(selectedKeys, { node }) {
if (selectedKeys.length !== 0) {
this.selectedKeys = selectedKeys;
const cueData = node.$props.dataRef;
this.selectedObj = cueData;
this.searchValue = undefined;
this.$emit('change', cueData);
}
},
onExpand(expandedKeys) {
this.expandedKeys = expandedKeys;
},
async view(data = {}, type = 0) {
this.$refs['TreeDrawer']?.open();
this.$nextTick(() => {
this.$refs['TreeDrawer'].setData({ ...data }, type);
});
},
add() {
const { categoryId } = this.selectedObj;
this.view({ parentCategoryId: categoryId }, 0);
},
edit() {
const data = this.selectedObj;
delete data.children;
this.view(data, 1);
},
del() {
const categoryId = this.selectedObj?.categoryId;
if (categoryId) return;
try {
this.Api.delOceanusTree({ categoryId });
this.$message.success('删除成功!');
this.init();
} catch (e) {
this.$message.warning('删除失败!');
}
},
},
};
</script>
<style scoped>
</style>
<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-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>
<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>
</a-table-column>
</my-table>
</template>
<script>
import Api from '@/api/oceanus';
import { formatObj } from '@/utils';
import ActionButton from '@/components/action_button/index.vue';
export default {
components: { ActionButton },
props: {
param: Object,
},
watch: {
param(val) {
this.tableParam = val;
},
},
data() {
return {
buttons: [
{
label: '编辑',
click: this.onEditTableRow,
},
{
type: 'confirm',
url: (row) => `/oceanus/api/v1/categories/attributes/${row.attributeId}`,
after: () => this.refreshTable(),
},
{
label: '置顶',
click: async (row) => {
const { attributeId, categoryId } = row;
try {
await Api.movementAttributes({ attributeId, categoryId, moveType: 'TOP' });
this.refreshTable();
this.$message.success('置顶成功!');
} catch (e) {
this.$message.warning('置顶失败!');
}
},
},
{
label: '置底',
click: async (row) => {
const { attributeId, categoryId } = row;
try {
await Api.movementAttributes({ attributeId, categoryId, moveType: 'BOTTOM' });
this.refreshTable();
this.$message.success('置顶成功!');
} catch (e) {
this.$message.warning('置顶失败!');
}
},
},
],
editButtons: [
{
label: '确定',
click: this.onSubmitTableRow,
},
{
type: 'confirm',
label: '取消',
title: '确认是否取消?',
onOk: this.onCancelTableRow,
},
],
tableParam: {},
};
},
methods: {
async formatData(data) {
const newData = await formatObj(data.records, { key: 'attributeId' });
return newData;
},
onAddTableRow() {
const data = this.$refs['table']?.getTableData();
const isEdit = data.find((i) => i.action === 'add');
if (isEdit) return;
const obj = {
editable: true,
key: +new Date(),
attributeName: '',
action: 'add',
categoryId: this.tableParam.categoryId,
viewIndex: 1,
};
this.$refs['table']?.setTableData([obj, ...data]);
},
onCancelTableRow(row) {
const data = this.$refs['table']?.getTableData();
if (row.action === 'add') {
const newData = data.filter((i) => i.key !== row.key);
this.$refs['table']?.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['table']?.setTableData(newData);
}
},
async onSubmitTableRow(row) {
if (row.attributeName === '') {
return this.$message.warning('请输入属性名称!');
} else {
try {
if (row.action === 'add') {
await Api.addAttributes(row);
}
if (row.action === 'edit') {
await Api.updateAttributes(row);
}
this.refreshTable();
this.$message.success('提交成功!');
} catch (e) {
this.$message.warning('保存失败!');
}
}
},
onEditTableRow(row) {
const data = this.$refs['table']?.getTableData();
const newData = data.map((i) => {
const oData = { ...i };
if (i.key === row.key) {
oData.editable = true;
oData.action = 'edit';
}
return oData;
});
this.$refs['table']?.setTableData(newData);
},
refreshTable() {
this.$refs['table']?.reset();
},
},
};
</script>
<style scoped>
</style>
<template>
<Drawer ref="drawerRef" v-model="visible" :title="title">
<a-form-model layout="vertical" :model="form" :rules="rules" ref="DrawerForm"></a-form-model>
<Drawer ref="drawerRef" v-model="visible" :title="title" :onOk="submit" :colesAfter="refresh">
<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>
</a-form-model>
</Drawer>
</template>
......@@ -20,7 +30,9 @@ export default {
visible: false,
form: {},
rules: {
loginId: [{ required: true, message: 'Please select Activity zone', trigger: 'change' }],
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' }],
},
Api,
};
......@@ -31,10 +43,11 @@ export default {
this.form = {};
this.visible = true;
},
async onSubmit() {
this.visible = false;
this.refresh && this.refresh();
add() {
return Api.addOceanusTree(this.form);
},
edit() {
return Api.updateOceanusTree(this.form);
},
},
};
......
<template>
<a-row :gutter="24">
<a-row :gutter="10">
<a-col :span="8">
<my-card>
<a-row :gutter="[16, 16]">
<a-col :span="24">
<a-input-search
placeholder="input search text"
style="width: 100%"
@search="onSearch"
/>
</a-col>
<a-col :span="24">
<a-button-group>
<a-button type="link" @click="() => view()">新增</a-button>
<a-button type="link">编辑</a-button>
<a-button type="link">删除</a-button>
</a-button-group>
</a-col>
<a-col :span="24">
<a-tree
:showLine="true"
:treeData="treeData"
:replaceFields="replaceFields"
:expandedKeys="expandedKeys"
@select="onSelect"
@expand="onExpand"
/>
</a-col>
</a-row>
<OceanusTreeDrawer ref="OceanusTreeDrawer" />
</my-card>
<LeftTree v-model="treeVale" />
</a-col>
<a-col :span="16">
<my-card></my-card>
<RightTable :param="treeVale" />
</a-col>
</a-row>
</template>
<script>
import Api from '@/api/oceanus';
import { arrayToTree } from '@/utils';
import OceanusTreeDrawer from './components/OceanusTree.vue';
import RightTable from './components/RightTable.vue';
import LeftTree from './components/LeftTree.vue';
export default {
components: { OceanusTreeDrawer },
components: { RightTable, LeftTree },
data() {
return {
treeData: [],
replaceFields: { title: 'categoryName', key: 'categoryId', children: 'children' },
selectedKeys: [],
expandedKeys: [],
treeVale: {},
};
},
async mounted() {
const expandedKeys = [];
const data = await Api.getOceanusTree();
const treeObj = new arrayToTree({
data: data,
rootValue: -1,
parentKey: 'parentCategoryId',
key: 'categoryId',
});
console.log(treeObj);
treeObj.data.map((i) => {
if (i.children) {
expandedKeys.push(i.categoryId);
}
});
this.treeData = treeObj.treeData;
this.expandedKeys = expandedKeys;
},
methods: {
onSearch(val) {},
onSelect(selectedKeys, info) {
console.log('selected', selectedKeys, info);
},
onExpand(expandedKeys) {
this.expandedKeys = expandedKeys;
},
async view(data = {}, type = 0) {
this.$refs['OceanusTreeDrawer']?.open();
this.$nextTick(() => {
this.$refs['OceanusTreeDrawer'].setData({ ...data }, type);
});
},
},
methods: {},
};
</script>
<style scoped>
</style>
<template>
<div>
<my-card>
<a-row :gutter="[16, 16]">
<a-col :span="24">
<a-select
show-search
v-model="searchValue"
placeholder="input search text"
style="width: 100%"
:default-active-first-option="false"
:show-arrow="false"
:filter-option="false"
:not-found-content="null"
:options="dataSource"
@search="onSearch"
@change="onChange"
/>
</a-col>
<a-col :span="24" class="tw-text-right">
<a-button-group>
<a-dropdown>
<a-menu slot="overlay">
<a-menu-item key="1" @click="addOrg">新增组织 </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
type="primary"
ghost
@click="edit"
:disabled="selectedObj.catalogType !== 'ORGANIZATION'"
>编辑</a-button
>
<a-button type="primary" ghost @click="del">删除</a-button>
</a-button-group>
</a-col>
</a-row>
</my-card>
<my-card class="tw-mt-2.5">
<a-row :gutter="[16, 16]">
<a-col :span="24">
<a-tree
:treeData="treeData"
:replaceFields="replaceFields"
:selectedKeys="selectedKeys"
@select="onSelect"
:load-data="onLoadData"
/>
</a-col>
</a-row>
<TreeDrawer ref="TreeDrawer" :refresh="init" />
</my-card>
</div>
</template>
<script>
import Api from '@/api/oceanus';
import { formatObj } from '@/utils';
import TreeDrawer from './TreeDrawer.vue';
export default {
components: { TreeDrawer },
data() {
return {
catalogId: -1,
searchValue: undefined,
dataSource: [],
replaceFields: { title: 'catalogName', key: 'catalogId', children: 'children' },
treeData: [],
selectedKeys: [],
selectedObj: {},
allData: [],
};
},
model: {
prop: 'value',
event: 'change',
},
mounted() {
this.init(this.catalogId);
},
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];
},
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;
} else {
this.allData = [...this.allData, ...resp];
const newData = resp.map((i) => {
return {
...i,
isLeaf: i.catalogType !== 'ORGANIZATION',
};
});
treeNode.dataRef.children = newData;
}
this.treeData = [...this.treeData];
resolve();
});
});
},
async onSearch(searchText) {
const dataList = this.allData;
const newData = dataList.filter((i) => i.catalogName.indexOf(searchText) != -1);
this.dataSource = await formatObj(newData, { label: 'catalogName', value: 'catalogId' });
},
onChange(val) {
const data = this.allData.find((i) => i.catalogId === val);
this.selectedObj = data;
this.selectedKeys = [val];
this.searchValue = val;
this.$emit('change', data);
},
onSelect(selectedKeys, { node }) {
if (selectedKeys.length !== 0) {
this.selectedKeys = selectedKeys;
const cueData = node.$props.dataRef;
this.selectedObj = cueData;
this.searchValue = undefined;
this.$emit('change', cueData);
}
},
async view(data = {}, type = 0) {
this.$refs['TreeDrawer']?.open();
this.$nextTick(() => {
this.$refs['TreeDrawer'].setData({ ...data }, type);
});
},
addEqu() {
const { categoryId } = this.selectedObj;
this.view({ parentCategoryId: categoryId }, 0);
},
addOrg() {},
edit() {
const data = this.selectedObj;
delete data.children;
this.view(data, 1);
},
del() {
const categoryId = this.selectedObj?.categoryId;
if (categoryId) return;
try {
this.Api.delOceanusTree({ categoryId });
this.$message.success('删除成功!');
this.init();
} catch (e) {
this.$message.warning('删除失败!');
}
},
},
};
</script>
<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-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>
<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>
</a-table-column>
</my-table>
</template>
<script>
import Api from '@/api/oceanus';
import { formatObj } from '@/utils';
import ActionButton from '@/components/action_button/index.vue';
export default {
components: { ActionButton },
props: {
param: Object,
},
watch: {
param(val) {
this.tableParam = val;
},
},
data() {
return {
buttons: [
{
label: '编辑',
click: this.onEditTableRow,
},
{
type: 'confirm',
url: (row) => `/oceanus/api/v1/categories/attributes/${row.attributeId}`,
after: () => this.refreshTable(),
},
{
label: '置顶',
click: async (row) => {
const { attributeId, categoryId } = row;
try {
await Api.movementAttributes({ attributeId, categoryId, moveType: 'TOP' });
this.refreshTable();
this.$message.success('置顶成功!');
} catch (e) {
this.$message.warning('置顶失败!');
}
},
},
{
label: '置底',
click: async (row) => {
const { attributeId, categoryId } = row;
try {
await Api.movementAttributes({ attributeId, categoryId, moveType: 'BOTTOM' });
this.refreshTable();
this.$message.success('置顶成功!');
} catch (e) {
this.$message.warning('置顶失败!');
}
},
},
],
editButtons: [
{
label: '确定',
click: this.onSubmitTableRow,
},
{
type: 'confirm',
label: '取消',
title: '确认是否取消?',
onOk: this.onCancelTableRow,
},
],
tableParam: {},
};
},
methods: {
async formatData(data) {
const newData = await formatObj(data.records, { key: 'attributeId' });
return newData;
},
onAddTableRow() {
const data = this.$refs['table']?.getTableData();
const isEdit = data.find((i) => i.action === 'add');
if (isEdit) return;
const obj = {
editable: true,
key: +new Date(),
attributeName: '',
action: 'add',
categoryId: this.tableParam.categoryId,
viewIndex: 1,
};
this.$refs['table']?.setTableData([obj, ...data]);
},
onCancelTableRow(row) {
const data = this.$refs['table']?.getTableData();
if (row.action === 'add') {
const newData = data.filter((i) => i.key !== row.key);
this.$refs['table']?.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['table']?.setTableData(newData);
}
},
async onSubmitTableRow(row) {
if (row.attributeName === '') {
return this.$message.warning('请输入属性名称!');
} else {
try {
if (row.action === 'add') {
await Api.addAttributes(row);
}
if (row.action === 'edit') {
await Api.updateAttributes(row);
}
this.refreshTable();
this.$message.success('提交成功!');
} catch (e) {
this.$message.warning('保存失败!');
}
}
},
onEditTableRow(row) {
const data = this.$refs['table']?.getTableData();
const newData = data.map((i) => {
const oData = { ...i };
if (i.key === row.key) {
oData.editable = true;
oData.action = 'edit';
}
return oData;
});
this.$refs['table']?.setTableData(newData);
},
refreshTable() {
this.$refs['table']?.reset();
},
},
};
</script>
<style scoped>
</style>
<template>
<Drawer ref="drawerRef" v-model="visible" :title="title" :onOk="submit" :colesAfter="refresh">
<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>
</a-form-model>
</Drawer>
</template>
<script>
import Drawer from '@/components/table/drawer.vue';
import FormMixin from '@/components/FormMixin';
import Api from '@/api/oceanus';
export default {
components: { Drawer },
props: {
refresh: Function,
},
mixins: [FormMixin],
data() {
return {
visible: false,
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' }],
},
Api,
};
},
async mounted() {},
methods: {
open() {
this.form = {};
this.visible = true;
},
add() {
return Api.addOceanusTree(this.form);
},
edit() {
return Api.updateOceanusTree(this.form);
},
},
};
</script>
<template>
<div>equipment</div>
<a-row :gutter="10">
<a-col :span="8">
<LeftTree v-model="treeVale" />
</a-col>
<a-col :span="16">
<RightTable />
</a-col>
</a-row>
</template>
<script>
export default {};
import RightTable from './components/RightTable.vue';
import LeftTree from './components/LeftTree.vue';
export default {
components: { RightTable, LeftTree },
data() {
return {
treeVale: {},
};
},
methods: {},
};
</script>
......@@ -117,15 +117,17 @@ export default {
key: 'certificateId',
});
userCertificateList.map((i) => {
const name = i.pictureUrl.split('/');
const data = {
uid: +new Date(),
status: 'done',
name: name[name.length - 1],
url: i.pictureUrl,
thumbUrl: 'http://platform.kuopu.net:9300/' + i.pictureUrl,
};
i.pictureUrl = [data];
if (i.pictureUrl) {
const name = i.pictureUrl.split('/');
const data = {
uid: +new Date(),
status: 'done',
name: name[name.length - 1],
url: i.pictureUrl,
thumbUrl: 'http://platform.kuopu.net:9300/' + i.pictureUrl,
};
i.pictureUrl = [data];
}
});
this.$nextTick(() => {
this.$refs['form'].setData(
......
<template>
<a-col :span="12">
<a-card hoverable style="width: 100%">
<img class="tw-h-40" slot="cover" alt="example" :src="value.pictureUrl[0].thumbUrl" />
<img
class="tw-h-40"
slot="cover"
alt="example"
:src="value.pictureUrl && value.pictureUrl[0].thumbUrl"
/>
<template slot="actions" class="ant-card-actions">
<div class="tw-h-full" @click="onEdit">编辑</div>
<div class="tw-h-full">
......@@ -35,6 +40,14 @@ export default {
props: {
value: Object,
},
watch: {
value: {
handler(val) {
console.log(val);
},
deep: true,
},
},
data() {
return {};
},
......
......@@ -74,6 +74,7 @@ export default {
this.current--;
},
async onSubmit() {
console.log(this.form);
if (this.form.userJobRelationList.length === 0) {
this.$message.error('必须设置岗位!');
return;
......@@ -81,9 +82,10 @@ export default {
const userCertificateList = this.form.userCertificateList.map((i) => {
return {
...i,
pictureUrl: i.pictureUrl[0]?.url || undefined,
pictureUrl: i.pictureUrl && (i.pictureUrl[0]?.url || undefined),
};
});
console.log(userCertificateList);
const userRoleRelationList = this.form.userRoleRelationList.map((i) => ({ roleId: i }));
const data = { ...this.form, userRoleRelationList, userCertificateList };
if (this.form.userId) {
......
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