xuziqiang/SaaS-lib
1
0
Fork 0
Code Issues Pull Requests Projects Releases Wiki Activity

feat: 分组管理

Browse Source
This commit is contained in:
xuziqiang
2024-05-29 16:29:22 +08:00
parent f7ebb4bd60
commit 4614c8699f
14 changed files with 584 additions and 157 deletions
Download Patch File Download Diff File Expand all files Collapse all files

27
hx-ai-intelligent/src/view/equipmentManage/group/config.ts
View File

@@ -41,7 +41,8 @@ const doWnload = (url) => {
};
const mockData = ref(data.listData);
export const tableConfig = {
export const tableConfig = (el, elGroup, elFormula) => {
return {
title: '设备台账',
// api: '/carbon_emission/device/getDeviceList',
value: mockData.value,
@@ -51,18 +52,14 @@ export const tableConfig = {
return Promise.resolve(data);
},
},
rowSelection: () => {
return {
columnWidth: 30,
};
},
headerActions: [
{
label: '编辑',
name: 'groupEdit',
type: 'primary',
handle: (a, b) => {
console.log(a, b);
el.value.toggle();
},
},
{
@@ -120,11 +117,17 @@ export const tableConfig = {
label: '批量分组',
name: 'groupTemDownload',
type: 'primary',
handle: () => {
elGroup.value.toggle();
},
},
{
label: '公式编辑',
name: 'groupTemDownload',
type: 'primary',
handle: () => {
elFormula.value.toggle();
},
},
],
columns: tableKeyMap,
@@ -207,3 +210,13 @@ export const tableConfig = {
// pagination: { pageSizeOptions: false },
rowKey: 'id',
};
};
export const treeConfig = {
defaultExpandAll: true,
defaultSelectedKeys: ['A008'],
resultField: 'insertData',
api: () => {
return Promise.resolve(data);
},
};

96
hx-ai-intelligent/src/view/equipmentManage/group/edit.vue Normal file
View File

@@ -0,0 +1,96 @@
<template>
<ns-drawer
v-model:visible="visible"
size="large"
class="custom-class"
title="编辑"
:ok="btnClick"
:cancel="() => (visible = false)"
placement="right">
<div class="drawerContainer">
<ns-tree-api v-bind="treeConfig" @select="treeSelect" />
<a-transfer
v-model:target-keys="targetKeys"
:data-source="mockData"
style="height: 100%; width: 66%"
:listStyle="listStyle"
show-search
:filter-option="filterOption"
:render="(item) => item.title" />
</div>
</ns-drawer>
</template>
<script lang="ts" setup>
import { onMounted, ref } from 'vue';
import { NsMessage } from '/nerv-lib/component';
import { treeConfig } from './config';
const visible = ref(false);
const mockData = ref([]);
const listStyle = {
height: '100%',
width: '100%',
};
const targetKeys = ref<string[]>([]);
const toggle = () => {
visible.value = !visible.value;
};
onMounted(() => {
getMock('上海公司');
});
const filterOption = (inputValue: string, option: MockData) => {
return option.description.indexOf(inputValue) > -1;
};
const btnClick = () => {
visible.value = false;
NsMessage.success('编辑成功');
};
function treeSelect(
selectedKeys: never[],
e: {
selected: boolean;
selectedNodes: { props: { dataRef: any } }[];
node: any;
event: any;
},
) {
console.log(selectedKeys, e);
const {
dataRef: { title },
} = e.node;
getMock(title);
}
const getMock = (company) => {
const keys = [];
const mData = [];
for (let i = 0; i < 60; i++) {
const data = {
key: i.toString(),
title: `A00${i + 1}总用电量(${company})`,
description: `description of content${i + 1}`,
chosen: Math.random() * 2 > 1,
};
if (data.chosen) {
keys.push(data.key);
}
mData.push(data);
}
mockData.value = mData;
targetKeys.value = keys;
};
defineExpose({
toggle,
});
</script>
<style scoped lang="less">
.drawerContainer {
height: 100%;
display: flex;
justify-content: space-between;
}
</style>

116
hx-ai-intelligent/src/view/equipmentManage/group/editFormula.vue Normal file
View File

@@ -0,0 +1,116 @@
<template>
<ns-drawer
v-model:visible="visible"
width="520"
title="公式编辑"
:ok="btnClick"
:cancel="() => (visible = false)"
placement="right">
<ns-form :schemas="schemas" :model="model" formLayout="vertical" />
</ns-drawer>
</template>
<script lang="ts" setup>
import { ref } from 'vue';
import { NsMessage } from '/nerv-lib/component';
const visible = ref(false);
const model = ref({});
const toggle = () => {
visible.value = !visible.value;
};
const mockDataSource = ref([
{
groupName: '1号厂区',
},
{
groupName: '2号厂区',
},
{
groupName: '3号厂区',
},
]);
const schemas = [
{
field: 'basicInfo',
label: '',
displayFormItem: false,
class: 'ns-form-item-full',
component: 'NsChildForm',
componentProps: {
title: '公式编辑',
schemas: [
{
label: '',
field: 'formula',
component: 'NsTextarea',
defaultValue: '(A+B)*2',
style: { width: '450px' },
componentProps: {
placeholder: '请输入',
autosize: {
minRows: 6,
maxRows: 6,
},
},
},
],
},
},
{
field: 'list',
label: '',
displayFormItem: false,
class: 'ns-form-item-full',
component: 'NsChildForm',
componentProps: {
title: '分组列表',
schemas: [
{
label: '',
field: 'NsBasicTable',
component: 'NsBasicTable',
componentProps: {
disabled: true,
placeholder: '请输入',
dataSource: mockDataSource.value,
style: { width: '450px' },
pagination: false,
rowKey: (record) => record.groupName,
columns: [
{
title: '序号',
dataIndex: 'name',
customRender: ({ index }) => index + 1,
width: 80,
align: 'center',
},
{
title: '分组名称',
dataIndex: 'groupName',
align: 'center',
},
],
},
},
],
},
},
];
const btnClick = () => {
visible.value = false;
NsMessage.success('操作成功');
};
defineExpose({
toggle,
});
</script>
<style scoped lang="less">
.drawerContainer {
height: 100%;
display: flex;
justify-content: space-between;
}
</style>

145
hx-ai-intelligent/src/view/equipmentManage/group/editGroup.vue Normal file
View File

@@ -0,0 +1,145 @@
<template>
<ns-drawer
v-model:visible="visible"
width="520"
title="分组编辑"
:ok="btnClick"
:cancel="() => (visible = false)"
placement="right">
<ns-form :schemas="schemas" :model="model" formLayout="vertical" />
</ns-drawer>
</template>
<script lang="ts" setup>
import { createVNode, onMounted, ref, unref } from 'vue';
import { NsMessage } from '/nerv-lib/component';
import { DeleteOutlined } from '@ant-design/icons-vue';
const visible = ref(false);
const model = ref({});
const toggle = () => {
visible.value = !visible.value;
};
const deleteRow = (index) => {
console.log(index);
mockDataSource.value.splice(index, 1);
};
const addRow = () => {
console.log(model);
if (model.value?.groupName) mockDataSource.value.push(unref(model) as any);
};
const mockDataSource = ref([
{
groupName: '1号厂区',
},
{
groupName: '2号厂区',
},
{
groupName: '3号厂区',
},
]);
const schemas = [
{
field: 'basicInfo',
label: '',
displayFormItem: false,
class: 'ns-form-item-full',
component: 'NsChildForm',
componentProps: {
title: '分组信息',
schemas: [
{
label: '分组编号',
field: 'groupCode',
component: 'NsInput',
defaultValue: 'WDIFHSUNGNDOR',
componentProps: {
disabled: true,
placeholder: '请输入',
},
},
{
label: '分组名称',
field: 'groupName',
component: 'NsInput',
componentProps: {
placeholder: '请输入',
addonAfter: createVNode(
'div',
{ style: { cursor: 'pointer' }, onclick: addRow },
'新增',
),
},
rules: [{ required: true }],
},
],
},
},
{
field: 'list',
label: '',
displayFormItem: false,
class: 'ns-form-item-full',
component: 'NsChildForm',
componentProps: {
title: '分组列表',
schemas: [
{
label: '',
field: 'NsBasicTable',
component: 'NsBasicTable',
componentProps: {
disabled: true,
placeholder: '请输入',
dataSource: mockDataSource.value,
style: { width: '450px' },
rowSelection: { type: 'radio' },
pagination: false,
rowKey: (record) => record.groupName,
columns: [
{
title: '序号',
dataIndex: 'name',
customRender: ({ index }) => index + 1,
width: 80,
align: 'center',
},
{
title: '分组名称',
dataIndex: 'groupName',
align: 'center',
},
{
title: '删除',
dataIndex: 'delete',
width: 80,
align: 'center',
customRender: ({ index }) =>
createVNode(DeleteOutlined, {
style: { color: 'red', cursor: 'pointer' },
onClick: () => deleteRow(index),
}),
},
],
},
},
],
},
},
];
const btnClick = () => {
visible.value = false;
NsMessage.success('操作成功');
};
defineExpose({
toggle,
});
</script>
<style scoped lang="less">
.drawerContainer {
height: 100%;
display: flex;
justify-content: space-between;
}
</style>

0
hx-ai-intelligent/src/view/equipmentManage/group/groupEdit.vue Normal file
View File

18
hx-ai-intelligent/src/view/equipmentManage/group/index.vue
View File

@@ -1,7 +1,21 @@
<template>
<ns-view-list-table v-bind="tableConfig" />
<editDrawer ref="editDrawerRef" />
<editGroup ref="editGroupRef" />
<editFormula ref="editFormulaRef" />
<ns-view-list-table v-bind="config" />
</template>
<script lang="ts" setup>
import { tableConfig } from './config';
import { createVNode, onMounted, ref } from 'vue';
import { tableConfig, treeConfig } from './config';
import { useParams } from '/nerv-lib/use';
import editDrawer from './edit.vue';
import editGroup from './editGroup.vue';
import editFormula from './editFormula.vue';
const { getParams } = useParams();
const editDrawerRef = ref();
const editGroupRef = ref();
const editFormulaRef = ref();
const config = tableConfig(editDrawerRef, editGroupRef, editFormulaRef);
</script>
<style lang="less" scoped></style>

33
hx-ai-intelligent/src/view/equipmentManage/group/mock.json
View File

@@ -38,6 +38,38 @@
}
]
}
],
"insertData":[
{
"title": "北京公司",
"key": "A001"
},
{
"title": "广州公司",
"key": "A002"
},
{
"title": "南京公司",
"key": "A004"
},
{
"title": "上海公司",
"key": "A008",
"children": [
{
"title": "上海长宁",
"key": "A009"
},
{
"title": "上海徐汇",
"key": "A010"
},
{
"title": "上海浦东",
"key": "A011"
}
]
}
],
"listData":[
{
@@ -84,7 +116,6 @@
"devicePointList": null,
"insertUser": null
}
]
}

11
lib/component/drawer/drawer.vue
View File

@@ -6,22 +6,27 @@
<slot :name="item" v-bind="data || {}"></slot>
</template>
<template #footer>
<a-button>取消</a-button>
<a-space>
<a-button v-if="cancel" @click="cancel">取消</a-button>
<a-button type="primary" @click="ok">确定</a-button>
</a-space>
</template>
</a-drawer>
</template>
<script lang="ts">
import { computed, defineComponent, toRefs } from 'vue';
import { computed, defineComponent, getCurrentInstance, toRefs } from 'vue';
import { drawerProps } from 'ant-design-vue/es/drawer';
export default defineComponent({
name: 'NsDrawer',
props: {
...drawerProps(),
ok: Function,
cancel: Function,
},
setup(props, { attrs, emit, slots }) {
console.log(props, slots);
console.log(props, getCurrentInstance());
const getBindValue = computed(() => ({
...attrs,

2
lib/component/form/form/child-form.vue
View File

@@ -110,7 +110,7 @@
font-size: 16px;
font-weight: bold;
line-height: 24px;
padding: 32px 0 24px 0;
padding: 16px 0;
}
.ns-child-form-divider {
margin: 8px 0 0 0;

3
lib/component/form/form/form-item.vue
View File

@@ -99,7 +99,7 @@
const formItemProps = computed(() => {
const {
schema: { field, rules, label, component, autoLink, formItemProps, extra },
schema: { field, rules, label, component, autoLink, formItemProps, extra, style },
} = props;
const tableComponent = ['nsTable'];
let nsClass = '';
@@ -111,6 +111,7 @@
label: label,
autoLink: autoLink || true,
extra: extra,
style,
...formItemProps,
...validateRef.value,
};

4
lib/component/form/form/form.d.ts vendored
View File

@@ -1,5 +1,3 @@
import type { RuleObject } from 'ant-design-vue/es/form/interface';
declare global {
type Rule = RuleObject & {
@@ -33,5 +31,7 @@ declare global {
class?: String; //添加额外样式
autoSubmit: Boolean; //是否操作后提交表单
format: Function;
extra: string;
style: Object;
}
}

4
lib/component/table/table.vue
View File

@@ -332,7 +332,7 @@
tableState.selectedRows = selectedRows;
},
},
rowSelection,
isFunction(rowSelection) ? rowSelection(tableState) : rowSelection,
);
});
@@ -392,6 +392,8 @@
}
return total;
}
console.log('current', (current >= 0 ? current : 0) + props.pageFieldOffset);
return {
showQuickJumper: true,
showLessItems: true,

6
lib/component/tree/tree-api.vue
View File

@@ -1,5 +1,5 @@
<template>
<ns-tree v-if="treeData.length" v-bind="getBindValue">
<ns-tree v-if="treeData?.length" v-bind="getBindValue" v-model:selectedKeys="selectedKeys">
<template #[item]="data" v-for="item in Object.keys($slots)" :key="item">
<slot :name="item" v-bind="data || {}"></slot>
</template>
@@ -20,6 +20,7 @@
resultField?: string;
defaultExpandAll?: boolean;
blockNode?: boolean;
defaultSelectedKeys?: Array<string>;
}
defineOptions({
name: 'NsTreeApi',
@@ -31,6 +32,7 @@
transform: (data) => data,
});
const treeData = ref<TreeDataItem[]>([]);
const selectedKeys = ref(props.defaultSelectedKeys || []);
const { httpRequest } = useApi();
const requestConfig: AxiosRequestConfig = { method: 'get' };
const route = useRoute();
@@ -55,6 +57,8 @@
}).then((res) => {
let data = [];
data = get(res, resultField);
console.log('sdfasfasf', res);
treeData.value = transform(data);
});
};

2
lib/saas/config/table.config.ts
View File

@@ -5,7 +5,7 @@ export const tableConfig = {
listField: 'data.records', // 数据集合
totalField: 'data.total', // 数据总数
pageFieldOffset: 0, //前端页码1开始，后端0 偏移量 1
pageFieldOffset: 1, //前端页码1开始，后端0 偏移量 1
pageSizeOptions: ['10', '20', '40'], // 分页设置种类
defaultPageSize: 10, // 默认每页数量
paramsPageSizeField: 'pageSize',