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-07-12 17:17:32 +08:00
parent 6137aaa4b6
commit e0206a228b
9 changed files with 696 additions and 353 deletions
Download Patch File Download Diff File Expand all files Collapse all files

348
hx-ai-intelligent/src/view/equipmentManage/group/editGroup.vue
View File

@@ -2,136 +2,260 @@
<ns-drawer
v-model:visible="visible"
width="520"
title="分组编辑"
title=" "
:ok="btnClick"
:cancel="() => (visible = false)"
placement="right">
<ns-form :schemas="schemas" :model="model" formLayout="vertical" />
<ns-form
:schemas="schemas(inputDisabled)"
:model="model"
formLayout="vertical"
:wrapperCol="{ span: 20 }"
:labelCol="{ span: 4 }">
<template #addonAfter="data">
<template v-if="data.field === 'groupName'">
<div class="iconOP">
<EditOutlined v-if="inputDisabled" @click="() => (inputDisabled = false)" />
<CheckOutlined v-else @click="op" />
</div>
</template>
</template>
</ns-form>
<div
style="
font-size: 16px;
font-weight: bold;
line-height: 24px;
padding: 16px 0;
padding-top: 0;
">
分组列表
<ns-button style="margin-left: 10px" type="primary" @click="addGroup">新增</ns-button>
</div>
<NsBasicTable
v-model:dataSource="mockDataSource"
v-bind="basicTableConfig"
:rowSelection="{
type: 'radio',
onChange: rowSelectChange,
selectedRowKeys,
}" />
</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';
import { group } from '/@/api/deviceManage';
import { http } from '/nerv-lib/util/http';
import { EditOutlined, CheckOutlined } from '@ant-design/icons-vue';
import { Popconfirm } from 'ant-design-vue';
const emit = defineEmits(['sure']);
const props = defineProps({ params: Object });
const visible = ref(false);
const model = ref({});
const inputDisabled = ref(true);
const selectedRowKeys = ref([]);
let opType = true; // true新增false编辑
const toggle = () => {
visible.value = !visible.value;
visible.value && getTableData();
};
const deleteRow = (index) => {
console.log(index);
mockDataSource.value.splice(index, 1);
const startCararcter = 65;
const addGroup = () => {
opType = true;
getCode();
const code = startCararcter + mockDataSource.value?.length;
inputDisabled.value = false;
model.value = { groupName: '' };
// if(mockDataSource.value.length)
};
const addRow = () => {
console.log(model);
if (model.value?.groupName) mockDataSource.value.push(unref(model) as any);
const op = () => {
inputDisabled.value = !inputDisabled.value;
add();
};
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 }],
},
],
//新增
const add = () => {
const finalParams = { ...props.params, ...model.value };
if (opType) {
delete finalParams.id;
}
http.post(group.saveComputeGroup, finalParams).then(() => {
getTableData();
NsMessage.success('操作成功');
});
};
const delGroup = (id) => {
http.post(group.delComputeGroup, { id }).then(() => {
getTableData();
NsMessage.success('操作成功');
});
};
const rowSelectChange = (selected, selectedRows) => {
opType = false;
console.log(selectedRowKeys, selectedRows);
selectedRowKeys.value = selected;
model.value = { ...selectedRows[0] };
};
const mockDataSource = ref([]);
const getTableData = () => {
http.post(group.queryComputeGroup, props.params).then((res) => {
mockDataSource.value = res.data;
});
};
const getCode = () => {
http.post(group.computeGroupNum, props.params).then((res) => {
model.value.groupNum = res.data;
});
};
const basicTableConfig = ref({
bordered: true,
placeholder: '请输入',
pagination: false,
rowKey: (record) => record.id,
columns: [
{
title: '分组编号',
dataIndex: 'groupNum',
// customRender: ({ index }) => index + 1,
width: 80,
align: 'center',
},
},
{
field: 'list',
label: '',
displayFormItem: false,
class: 'ns-form-item-full',
component: 'NsChildForm',
componentProps: {
title: '分组列表',
schemas: [
{
label: '',
field: 'NsBasicTable',
component: 'NsBasicTable',
formItemProps: {
wrapperCol: { span: 24 },
},
componentProps: {
disabled: true,
placeholder: '请输入',
dataSource: mockDataSource.value,
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),
}),
},
],
},
},
],
{
title: '分组名称',
dataIndex: 'groupName',
align: 'center',
},
},
];
{
title: '删除',
dataIndex: 'delete',
width: 80,
align: 'center',
customRender: ({ record }) =>
createVNode(
Popconfirm,
{ title: '确定删除吗?', placement: 'leftTop', onConfirm: () => delGroup(record.id) },
() => [
createVNode(DeleteOutlined, {
style: { color: 'red', cursor: 'pointer' },
// onClick: () => delGroup(record.id),
}),
],
),
},
],
});
const schemas = (val) => {
return [
{
field: 'basicInfo',
label: '',
displayFormItem: false,
class: 'ns-form-item-full',
component: 'NsChildForm',
componentProps: {
title: '分组信息',
schemas: [
{
label: '分组id',
field: 'id',
component: 'NsInput',
show: false,
},
{
label: '分组编号',
field: 'groupNum',
component: 'NsInput',
componentProps: {
disabled: true,
placeholder: '请输入',
},
},
{
label: '分组名称',
field: 'groupName',
component: 'NsInput',
componentProps: {
placeholder: '请输入',
disabled: val,
},
rules: [{ required: true }],
},
],
},
},
// {
// field: 'list',
// label: '',
// displayFormItem: false,
// class: 'ns-form-item-full',
// component: 'NsChildForm',
// componentProps: {
// title: '分组列表',
// schemas: [
// {
// label: '',
// field: 'NsBasicTable',
// component: 'NsBasicTable',
// formItemProps: {
// wrapperCol: { span: 24 },
// },
// componentProps: {
// bordered: true,
// disabled: true,
// placeholder: '请输入',
// dataSource: mockDataSource.value,
// rowSelection: { type: 'radio', onChange: rowSelectChange },
// 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('操作成功');
http
.post(group.saveComputeGroupInfo, {
...props.params,
groupListId: selectedRowKeys.value[0],
})
.then(() => {
emit('sure');
toggle();
NsMessage.success('操作成功');
});
};
defineExpose({
@@ -144,4 +268,8 @@
display: flex;
justify-content: space-between;
}
.iconOP {
cursor: pointer;
color: @primary-color;
}
</style>