446 lines
12 KiB
Vue
446 lines
12 KiB
Vue
|
<template>
|
||
|
|
<a-button v-if="props.isCreate" type="primary" @click="handleClick">
|
||
|
|
<template #icon><icon-plus /></template>
|
||
|
|
新建
|
||
|
|
</a-button>
|
||
|
|
<a-button
|
||
|
|
v-if="!props.isCreate"
|
||
|
|
type="outline"
|
||
|
|
size="small"
|
||
|
|
:style="{ marginRight: '10px', padding: '7px' }"
|
||
|
|
@click="handleClick"
|
||
|
|
>
|
||
|
|
<template #icon><icon-edit /></template>
|
||
|
|
修改
|
||
|
|
</a-button>
|
||
|
|
|
||
|
|
<a-modal
|
||
|
|
width="900px"
|
||
|
|
height="500px"
|
||
|
|
:visible="visible"
|
||
|
|
@cancel="handleCancel"
|
||
|
|
>
|
||
|
|
<template #title>{{ modalTitle }}</template>
|
||
|
|
<a-form
|
||
|
|
ref="CreateRef"
|
||
|
|
:model="formData"
|
||
|
|
:style="{ width: '800px',height: '420px' }"
|
||
|
|
>
|
||
|
|
<!-- 产品名称 -->
|
||
|
|
<a-form-item
|
||
|
|
field="name"
|
||
|
|
label='产品名称'
|
||
|
|
:rules="[{ required: true, message: '产品名称不能为空' }]"
|
||
|
|
:validate-trigger="['change']"
|
||
|
|
>
|
||
|
|
<a-input
|
||
|
|
v-model="formData.name"
|
||
|
|
placeholder='请输入产品名称'
|
||
|
|
/>
|
||
|
|
</a-form-item>
|
||
|
|
<!-- 产品分类-->
|
||
|
|
<a-form-item
|
||
|
|
field="productType"
|
||
|
|
label="产品分类"
|
||
|
|
:rules="[{ required: true, message: '产品分类不能为空' }]"
|
||
|
|
:validate-trigger="['change']"
|
||
|
|
>
|
||
|
|
<a-input
|
||
|
|
v-model="formData.productType"
|
||
|
|
placeholder='请选择产品分类'
|
||
|
|
/>
|
||
|
|
</a-form-item>
|
||
|
|
<!-- 产品类型 -->
|
||
|
|
<a-form-item
|
||
|
|
field="model"
|
||
|
|
label="类型"
|
||
|
|
:rules="[{ required: true, message: '产品类型不能为空' }]"
|
||
|
|
:validate-trigger="['change']"
|
||
|
|
>
|
||
|
|
<a-input
|
||
|
|
v-model="formData.model"
|
||
|
|
placeholder='请输入产品类型'
|
||
|
|
/>
|
||
|
|
</a-form-item>
|
||
|
|
<!-- 接入方式 -->
|
||
|
|
<a-form-item
|
||
|
|
field="link"
|
||
|
|
label="接入"
|
||
|
|
:rules="[{ required: true, message: '接入方式不能为空' }]"
|
||
|
|
:validate-trigger="['change']"
|
||
|
|
>
|
||
|
|
<a-select
|
||
|
|
v-model="formData.link"
|
||
|
|
placeholder='请输入接入方式'
|
||
|
|
:options="linkOptions"
|
||
|
|
allow-search
|
||
|
|
/>
|
||
|
|
</a-form-item>
|
||
|
|
<!-- 备注 -->
|
||
|
|
<a-form-item
|
||
|
|
field="remark"
|
||
|
|
label="备注"
|
||
|
|
>
|
||
|
|
<a-input
|
||
|
|
v-model="formData.remark"
|
||
|
|
placeholder='请输入备注'
|
||
|
|
/>
|
||
|
|
</a-form-item>
|
||
|
|
<!-- 参数 -->
|
||
|
|
<a-form-item
|
||
|
|
field="params"
|
||
|
|
label="参数"
|
||
|
|
>
|
||
|
|
<!-- <a-table-->
|
||
|
|
<!-- :columns="columns"-->
|
||
|
|
<!-- :data="paramsData"-->
|
||
|
|
<!-- :bordered="false"-->
|
||
|
|
<!-- :pagination="false"-->
|
||
|
|
<!-- :table-layout-fixed="true"-->
|
||
|
|
<!-- :show-header="false"-->
|
||
|
|
<!-- :hoverable="false"-->
|
||
|
|
<!-- :column-resizable="true"-->
|
||
|
|
<!-- :filter-icon-align-left="true"-->
|
||
|
|
<!-- :body-cell-class="{ padding: '0px',marginLeft: '-10px' }"-->
|
||
|
|
<!-- >-->
|
||
|
|
<!-- <template #name="{ record }">-->
|
||
|
|
<!-- <a-input-->
|
||
|
|
<!-- v-model="record.name"-->
|
||
|
|
<!-- placeholder="名称"-->
|
||
|
|
<!-- />-->
|
||
|
|
<!-- </template>-->
|
||
|
|
<!-- <template #identifier="{ record }">-->
|
||
|
|
<!-- <a-input-->
|
||
|
|
<!-- v-model="record.identifier"-->
|
||
|
|
<!-- placeholder="标识"-->
|
||
|
|
<!-- />-->
|
||
|
|
<!-- </template>-->
|
||
|
|
<!-- <template #dataType="{ record }">-->
|
||
|
|
<!-- <a-select-->
|
||
|
|
<!-- v-model="record.dataType"-->
|
||
|
|
<!-- :options="dataTypeOptions"-->
|
||
|
|
<!-- allow-search-->
|
||
|
|
<!-- />-->
|
||
|
|
<!-- </template>-->
|
||
|
|
<!-- <template #type="{ record }">-->
|
||
|
|
<!-- <a-select-->
|
||
|
|
<!-- v-model="record.type"-->
|
||
|
|
<!-- :options="typeOptions"-->
|
||
|
|
<!-- allow-search-->
|
||
|
|
<!-- />-->
|
||
|
|
<!-- </template>-->
|
||
|
|
<!-- <template #operation="{ record }">-->
|
||
|
|
<!-- <a-button type="text" @click="handleDeleteParams(record)"><icon-minus-circle /></a-button>-->
|
||
|
|
<!-- </template>-->
|
||
|
|
<!-- <template #footer>-->
|
||
|
|
<!-- <a-button @click="handleAddParams" style="width: 100%" >-->
|
||
|
|
<!-- <icon-plus />-->
|
||
|
|
<!-- </a-button>-->
|
||
|
|
<!-- </template>-->
|
||
|
|
<!-- </a-table>-->
|
||
|
|
<div style="width: 100%">
|
||
|
|
<div style="width: 100%;margin-bottom: 5px; ">
|
||
|
|
<a-space v-for="(param,index) in paramsData" :key="index" style="margin-bottom: 5px">
|
||
|
|
<a-input v-model="param.name" placeholder="名称" allow-clear />
|
||
|
|
<a-input v-model="param.identifier" placeholder="标识" allow-clear />
|
||
|
|
<a-select v-model="param.dataType" :options="dataTypeOptions" allow-search />
|
||
|
|
<a-select v-model="param.type" :options="typeOptions" allow-search />
|
||
|
|
<a-button type="text" @click="handleDeleteParams(index)"><icon-minus-circle /></a-button>
|
||
|
|
</a-space>
|
||
|
|
</div>
|
||
|
|
<a-button @click="handleAddParams" style="width: 100%" type="outline">
|
||
|
|
<icon-plus />
|
||
|
|
</a-button>
|
||
|
|
</div>
|
||
|
|
</a-form-item>
|
||
|
|
</a-form>
|
||
|
|
|
||
|
|
<template #footer>
|
||
|
|
<a-button class="editor-button" @click="handleCancel">取消</a-button>
|
||
|
|
<a-button class="editor-button" type="primary" @click="handleSubmit">确定</a-button>
|
||
|
|
</template>
|
||
|
|
</a-modal>
|
||
|
|
|
||
|
|
<a-modal
|
||
|
|
width="900px"
|
||
|
|
:visible="paramsVisible"
|
||
|
|
@cancel="paramsCancel"
|
||
|
|
>
|
||
|
|
<template #title>添加参数</template>
|
||
|
|
<a-form
|
||
|
|
ref="CreateRef"
|
||
|
|
:model="paramsData"
|
||
|
|
:style="{ width: '650px' }"
|
||
|
|
>
|
||
|
|
<!-- 添加参数 -->
|
||
|
|
<a-form-item
|
||
|
|
field="name"
|
||
|
|
label="参数名称"
|
||
|
|
:rules="[{ required: true, message: '参数名称不能为空' }]"
|
||
|
|
:validate-trigger="['change']"
|
||
|
|
>
|
||
|
|
<a-input
|
||
|
|
v-model="paramsData.name"
|
||
|
|
placeholder='请选择参数名称'
|
||
|
|
/>
|
||
|
|
</a-form-item>
|
||
|
|
<!-- 参数标识 -->
|
||
|
|
<a-form-item
|
||
|
|
field="identifier"
|
||
|
|
label="参数标识"
|
||
|
|
:rules="[{ required: true, message: '参数标识不能为空' }]"
|
||
|
|
:validate-trigger="['change']"
|
||
|
|
>
|
||
|
|
<a-input
|
||
|
|
v-model="paramsData.identifier"
|
||
|
|
placeholder='请选择参数标识'
|
||
|
|
/>
|
||
|
|
</a-form-item>
|
||
|
|
|
||
|
|
<a-form-item
|
||
|
|
field="dataType"
|
||
|
|
label="数据类型"
|
||
|
|
:rules="[{ required: true, message: '数据类型不能为空' }]"
|
||
|
|
:validate-trigger="['change']"
|
||
|
|
>
|
||
|
|
<a-select
|
||
|
|
v-model="paramsData.dataType"
|
||
|
|
placeholder='请输入数据类型'
|
||
|
|
:options="dataTypeOptions"
|
||
|
|
allow-search
|
||
|
|
/>
|
||
|
|
</a-form-item>
|
||
|
|
<a-form-item
|
||
|
|
field="type"
|
||
|
|
label="参数类型"
|
||
|
|
:rules="[{ required: true, message: '参数类型不能为空' }]"
|
||
|
|
:validate-trigger="['change']"
|
||
|
|
>
|
||
|
|
<a-select
|
||
|
|
v-model="paramsData.type"
|
||
|
|
placeholder='请输入参数类型'
|
||
|
|
:options="typeOptions"
|
||
|
|
allow-search
|
||
|
|
/>
|
||
|
|
</a-form-item>
|
||
|
|
</a-form>
|
||
|
|
|
||
|
|
<template #footer>
|
||
|
|
<a-button class="editor-button" @click="paramsCancel">取消</a-button>
|
||
|
|
<a-button class="editor-button" type="primary" @click="paramsSubmit">确定</a-button>
|
||
|
|
</template>
|
||
|
|
</a-modal>
|
||
|
|
|
||
|
|
</template>
|
||
|
|
|
||
|
|
<script lang="ts" setup>
|
||
|
|
import useVisible from '@/hooks/visible';
|
||
|
|
import { computed, defineEmits, onMounted, PropType, ref } from 'vue';
|
||
|
|
import { FormInstance } from '@arco-design/web-vue/es/form';
|
||
|
|
import { Message } from '@arco-design/web-vue';
|
||
|
|
import '@wangeditor/editor/dist/css/style.css'
|
||
|
|
import type { SelectOptionData } from '@arco-design/web-vue/es/select/interface';
|
||
|
|
import { createProduct, ProductCreateRecord, queryProductDetail, updateProduct } from '@/api/product';
|
||
|
|
|
||
|
|
const props = defineProps({
|
||
|
|
prem: {
|
||
|
|
type: Object as PropType<ProductCreateRecord>,
|
||
|
|
},
|
||
|
|
isCreate: Boolean,
|
||
|
|
id: Number,
|
||
|
|
});
|
||
|
|
const emit = defineEmits(['refresh']);
|
||
|
|
const modalTitle = computed(() => {
|
||
|
|
return props.isCreate ? '创建产品' : '编辑产品';
|
||
|
|
});
|
||
|
|
const { visible, setVisible } = useVisible(false);
|
||
|
|
const CreateRef = ref<FormInstance>();
|
||
|
|
const formData = ref<any>({
|
||
|
|
// params: [],
|
||
|
|
// ...props.prem,
|
||
|
|
});
|
||
|
|
const columns=[
|
||
|
|
{
|
||
|
|
title: '参数名称',
|
||
|
|
dataIndex: 'name',
|
||
|
|
slotName: 'name',
|
||
|
|
width: '120',
|
||
|
|
},
|
||
|
|
{
|
||
|
|
title: '参数标识',
|
||
|
|
dataIndex: 'identifier',
|
||
|
|
slotName: 'identifier',
|
||
|
|
width: '120',
|
||
|
|
align: 'left'
|
||
|
|
},
|
||
|
|
{
|
||
|
|
title: '数据类型',
|
||
|
|
dataIndex: 'dataType',
|
||
|
|
slotName: 'dataType',
|
||
|
|
width: '150',
|
||
|
|
align: 'left'
|
||
|
|
},
|
||
|
|
{
|
||
|
|
title: '参数类型',
|
||
|
|
dataIndex: 'type',
|
||
|
|
slotName: 'type',
|
||
|
|
width: '180',
|
||
|
|
align: 'left'
|
||
|
|
},
|
||
|
|
{
|
||
|
|
title: '操作',
|
||
|
|
dataIndex: 'operation',
|
||
|
|
slotName: 'operation',
|
||
|
|
align: 'left'
|
||
|
|
}
|
||
|
|
];
|
||
|
|
const paramsData = ref([
|
||
|
|
{
|
||
|
|
name: '',
|
||
|
|
identifier: '',
|
||
|
|
dataType: '',
|
||
|
|
type: '',
|
||
|
|
},
|
||
|
|
]);
|
||
|
|
const linkOptions = computed<SelectOptionData[]>(() => [
|
||
|
|
{
|
||
|
|
label: 'TCP',
|
||
|
|
value: 'TCP',
|
||
|
|
},
|
||
|
|
{
|
||
|
|
label: 'HTTP',
|
||
|
|
value: 'HTTP',
|
||
|
|
},
|
||
|
|
{
|
||
|
|
label: 'MQTT',
|
||
|
|
value: 'MQTT',
|
||
|
|
},
|
||
|
|
]);
|
||
|
|
const dataTypeOptions = computed<SelectOptionData[]>(() => [
|
||
|
|
{
|
||
|
|
label: '整型',
|
||
|
|
value: 'INT',
|
||
|
|
},
|
||
|
|
{
|
||
|
|
label: '单精度浮点型',
|
||
|
|
value: 'FLOAT',
|
||
|
|
},
|
||
|
|
{
|
||
|
|
label: '双精度浮点型',
|
||
|
|
value: 'DOUBLE',
|
||
|
|
},
|
||
|
|
{
|
||
|
|
label: '布尔型',
|
||
|
|
value: 'BOOLEAN',
|
||
|
|
},
|
||
|
|
{
|
||
|
|
label: '字符串',
|
||
|
|
value: 'STRING',
|
||
|
|
},
|
||
|
|
{
|
||
|
|
label: '日期型',
|
||
|
|
value: 'DATE',
|
||
|
|
},
|
||
|
|
{
|
||
|
|
label: '透传',
|
||
|
|
value: 'RAW',
|
||
|
|
},
|
||
|
|
]);
|
||
|
|
const typeOptions = computed<SelectOptionData[]>(() => [
|
||
|
|
{
|
||
|
|
label: '物模型输入',
|
||
|
|
value: 'INPUT',
|
||
|
|
},
|
||
|
|
{
|
||
|
|
label: '物模型输出',
|
||
|
|
value: 'OUTPUT',
|
||
|
|
},
|
||
|
|
{
|
||
|
|
label: '读写属性',
|
||
|
|
value: 'RW',
|
||
|
|
},
|
||
|
|
]);
|
||
|
|
const paramsVisible = ref(false);
|
||
|
|
const paramsName = ref([]);
|
||
|
|
const fetchData = async (Id: number | undefined) => {
|
||
|
|
const res = await queryProductDetail(Id);
|
||
|
|
formData.value = res.data;
|
||
|
|
};
|
||
|
|
// 组件被点击
|
||
|
|
const handleClick = () => {
|
||
|
|
setVisible(true);
|
||
|
|
if (!props.isCreate) {
|
||
|
|
fetchData(props.id);
|
||
|
|
}
|
||
|
|
};
|
||
|
|
// 提交
|
||
|
|
const handleSubmit = async () => {
|
||
|
|
const valid = await CreateRef.value?.validate();
|
||
|
|
if (!valid) {
|
||
|
|
// 新增
|
||
|
|
if (props.isCreate) {
|
||
|
|
formData.value.params = paramsData.value;
|
||
|
|
// formData.value.username = formData.value.email;
|
||
|
|
const res = await createProduct(formData.value);
|
||
|
|
if (res.status === 200) {
|
||
|
|
Message.success({
|
||
|
|
content: '新建成功',
|
||
|
|
duration: 5 * 1000,
|
||
|
|
});
|
||
|
|
emit('refresh');
|
||
|
|
setVisible(false);
|
||
|
|
}
|
||
|
|
CreateRef.value?.resetFields();
|
||
|
|
} else {
|
||
|
|
// 编辑
|
||
|
|
const res = await updateProduct(formData.value);
|
||
|
|
if (res.status === 200) {
|
||
|
|
Message.success({
|
||
|
|
content: '修改成功',
|
||
|
|
duration: 5 * 1000,
|
||
|
|
});
|
||
|
|
emit('refresh');
|
||
|
|
setVisible(false);
|
||
|
|
}
|
||
|
|
}
|
||
|
|
}
|
||
|
|
};
|
||
|
|
|
||
|
|
// 点击添加参数
|
||
|
|
const handleAddParams = () => {
|
||
|
|
// paramsVisible.value = true;
|
||
|
|
paramsData.value.push({
|
||
|
|
name: '',
|
||
|
|
identifier: '',
|
||
|
|
dataType: '',
|
||
|
|
type: '',
|
||
|
|
});
|
||
|
|
};
|
||
|
|
// 删除参数
|
||
|
|
const handleDeleteParams = (record: any) => {
|
||
|
|
if (record !== -1) {
|
||
|
|
paramsData.value.splice(record, 1);
|
||
|
|
}
|
||
|
|
};
|
||
|
|
// 点击取消
|
||
|
|
const paramsCancel = () => {
|
||
|
|
paramsVisible.value = false;
|
||
|
|
};
|
||
|
|
// 参数模态框提交
|
||
|
|
const paramsSubmit = () => {
|
||
|
|
paramsVisible.value = false;
|
||
|
|
formData.value.params.push(paramsData.value);
|
||
|
|
paramsName.value.push(paramsData.value.name);
|
||
|
|
}
|
||
|
|
// 关闭
|
||
|
|
const handleCancel = async () => {
|
||
|
|
setVisible(false);
|
||
|
|
};
|
||
|
|
</script>
|
||
|
|
|
||
|
|
<style scoped>
|
||
|
|
.editor-button{
|
||
|
|
position: static
|
||
|
|
}
|
||
|
|
</style>
|