cxc/IoT_platform_frontend
1
0
Fork 0
Code Issues Pull Requests Projects Releases Wiki Activity

things model

Browse Source
This commit is contained in:
ailanyin
2023-03-18 13:31:32 +08:00
parent a66f049894
commit 53280f0160
7 changed files with 752 additions and 172 deletions
Download Patch File Download Diff File Expand all files Collapse all files

4
package.json
View File

@ -29,9 +29,11 @@
"lodash-es": "^4.17.21",
"nprogress": "0.2.0",
"pinia": "2.0.22",
"uuid": "^9.0.0",
"vue": "3.2.45",
"vue-cropper": "1.0.3",
"vue-router": "4.1.4"
"vue-router": "4.1.4",
"vue3-json-viewer": "^2.2.2"
},
"devDependencies": {
"@vitejs/plugin-vue": "3.1.0",

16
src/api/product/product.js
View File

@ -5,7 +5,7 @@ export function listProduct(query) {
return request({
url: "/product/product/list",
method: "get",
params: query
params: query,
});
}
@ -13,7 +13,7 @@ export function listProduct(query) {
export function getProduct(productId) {
return request({
url: "/product/product/" + productId,
method: "get"
method: "get",
});
}
@ -22,7 +22,7 @@ export function addProduct(data) {
return request({
url: "/product/product",
method: "post",
data: data
data: data,
});
}
@ -31,7 +31,7 @@ export function updateProduct(data) {
return request({
url: "/product/product",
method: "put",
data: data
data: data,
});
}
@ -39,7 +39,7 @@ export function updateProduct(data) {
export function delProduct(productId) {
return request({
url: "/product/product/" + productId,
method: "delete"
method: "delete",
});
}
@ -50,7 +50,7 @@ export function delProduct(productId) {
*/
export function checkProductSn(productSn) {
return request({
url: `/product/product/check/${productSn}`
, method: "get"
url: `/product/product/check/${productSn}`,
method: "get",
});
}
}

24
src/constant/dict.js
View File

@ -1,34 +1,34 @@
export const statusMap = new Map([
["0", "正常"],
["1", "禁用"]
["1", "禁用"],
]);
export const deviceTypeMap = new Map([
[1, "直连设备"],
[2, "网关子设备"],
[3, "网关子设备"]
[3, "网关子设备"],
]);
export const vertificateMethodOptions = [
{
label: "简单认证",
value: 1
}, {
value: 1,
},
{
label: "加密认证",
value: 2
}, {
value: 2,
},
{
label: "简单+加密",
value: 3
}
value: 3,
},
];
export const isTopMap = new Map([
[0, "是"],
[1, "否"]
[1, "否"],
]);
export const isMonitor = new Map([
[0, "是"],
[1, "否"]
[1, "否"],
]);

62
src/views/login.vue
View File

@ -12,7 +12,7 @@
<el-tab-pane label="验证码登录" name="captcha"></el-tab-pane>
</el-tabs>
<Transition name="slide-left">
<div v-if="loginMethod === 'password'" class="password-input">
<div v-if="loginMethod === 'password'" class="input-container">
<el-form-item prop="username">
<el-input
v-model="loginForm.username"
@ -71,7 +71,7 @@
</div>
</Transition>
<Transition name="slide-right">
<div v-if="loginMethod === 'captcha'" class="captcha-input">
<div v-if="loginMethod === 'captcha'" class="input-container">
<el-form-item prop="phone">
<el-input
v-model="loginForm.phone"
@ -415,33 +415,33 @@ getCookie();
padding-left: 12px;
}
.slide-left-enter-active {
transition: all 0.3s ease-out;
}
.slide-left-leave-active {
transition: all 0.3s cubic-bezier(1, 0.5, 0.8, 1);
}
.slide-left-enter-from,
.slide-left-leave-to {
transform: translateX(-500px);
position: relative;
left: -500px;
opacity: 0;
}
.slide-right-enter-active {
transition: all 0.3s ease-out;
}
.slide-right-leave-active {
transition: all 0.3s cubic-bezier(1, 0.5, 0.8, 1);
}
.slide-right-enter-from,
.slide-right-leave-to {
transform: translateX(500px);
opacity: 0;
}
//.slide-left-enter-active {
// transition: all 0.3s ease-out;
//}
//
//.slide-left-leave-active {
// transition: all 0.3s cubic-bezier(1, 0.5, 0.8, 1);
//}
//
//.slide-left-enter-from,
//.slide-left-leave-to {
// transform: translateX(-500px);
// position: relative;
// left: -500px;
// opacity: 0;
//}
//
//.slide-right-enter-active {
// transition: all 0.3s ease-out;
//}
//
//.slide-right-leave-active {
// transition: all 0.3s cubic-bezier(1, 0.5, 0.8, 1);
//}
//
//.slide-right-enter-from,
//.slide-right-leave-to {
// transform: translateX(500px);
// opacity: 0;
//}
</style>

98
src/views/product/product/components/edit.vue
View File

@ -32,11 +32,18 @@
</el-form-item>
<el-form-item label="租户ID" prop="tenantId">
<el-select v-model="form.tenantId" :remote-method="getTenantList" filterable>
<el-option v-for="item in tenantOptions" :key="item.tenantId" :label="item.tenantName"
:value="item.tenantId" />
<el-select
v-model="form.tenantId"
:remote-method="getTenantList"
filterable
>
<el-option
v-for="item in tenantOptions"
:key="item.tenantId"
:label="item.tenantName"
:value="item.tenantId"
/>
</el-select>
</el-form-item>
<el-form-item label="备注" prop="remark">
<el-input
@ -54,10 +61,13 @@
@input="checkProductSnUnique"
>
<template #suffix>
<el-icon v-if="isProductSnUnique===true" color="green">
<el-icon v-if="isProductSnUnique === true" color="green">
<SuccessFilled />
</el-icon>
<el-icon v-else-if="isProductSnUnique===false" color="red">
<el-icon
v-else-if="isProductSnUnique === false"
color="red"
>
<CircleCloseFilled />
</el-icon>
<el-icon v-else>
@ -87,15 +97,18 @@
/>
</el-form-item>
<el-form-item label="认证方式" prop="vertificateMethod">
<el-select v-model="form.vertificateMethod"
placeholder="请选择认证方式">
<el-option v-for="item in vertificateMethodOptions" :key="item.value" :label="item.label"
:value="item.value" />
<el-select
v-model="form.vertificateMethod"
placeholder="请选择认证方式"
>
<el-option
v-for="item in vertificateMethodOptions"
:key="item.value"
:label="item.label"
:value="item.value"
/>
</el-select>
</el-form-item>
</el-col>
<el-col :lg="12" :md="24" :sm="24" :xl="8" :xs="24">
<el-form-item label="图片地址" prop="imgUrl">
@ -105,19 +118,29 @@
</el-col>
</el-row>
<el-col :span="20">
<el-form-item style="text-align: center;margin:40px 0px;">
<el-button v-if="form.status!==2" type="primary" @click="submitForm">提交</el-button>
<el-form-item style="text-align: center; margin: 40px 0px">
<el-button
v-if="form.status !== 2"
type="primary"
@click="submitForm"
>提交</el-button
>
</el-form-item>
</el-col>
</el-form>
</el-tab-pane>
<el-tab-pane label="产品模型">
<model ref="modelRef" :model-json="form.thingsModelsJson" :product="form" />
<el-tab-pane :disabled="!form.productId" label="产品模型">
<model
ref="modelRef"
:model-json="form.thingsModelsJson"
:product="form"
@model-updated="getData"
/>
</el-tab-pane>
<el-tab-pane label="固件管理"></el-tab-pane>
<el-tab-pane label="设备授权"></el-tab-pane>
<el-tab-pane label="告警配置"></el-tab-pane>
<el-tab-pane label="控制界面"></el-tab-pane>
<el-tab-pane :disabled="!form.productId" label="固件管理"></el-tab-pane>
<el-tab-pane :disabled="!form.productId" label="设备授权"></el-tab-pane>
<el-tab-pane :disabled="!form.productId" label="告警配置"></el-tab-pane>
<el-tab-pane :disabled="!form.productId" label="控制界面"></el-tab-pane>
</el-tabs>
</div>
</template>
@ -126,7 +149,12 @@
import { onMounted, reactive, ref, toRefs } from "vue";
import Model from "@/views/product/product/components/model.vue";
import { useRoute } from "vue-router";
import { addProduct, checkProductSn, getProduct, updateProduct } from "@/api/product/product";
import {
addProduct,
checkProductSn,
getProduct,
updateProduct,
} from "@/api/product/product";
import { listCategory } from "@/api/product/category";
import { listTenant } from "@/api/system/tenant";
import ImageUpload from "@/components/ImageUpload/index.vue";
@ -140,26 +168,24 @@ const data = reactive({
form: {},
rules: {
productName: [
{ required: true, message: "产品名称不能为空", trigger: "blur" }
{ required: true, message: "产品名称不能为空", trigger: "blur" },
],
categoryId: [
{ required: true, message: "产品分类ID不能为空", trigger: "blur" }
{ required: true, message: "产品分类ID不能为空", trigger: "blur" },
],
tenantId: [{ required: true, message: "租户ID不能为空", trigger: "blur" }]
}
tenantId: [{ required: true, message: "租户ID不能为空", trigger: "blur" }],
},
});
const { form, rules } = toRefs(data);
const productRef = ref();
const categoryOptions = ref([]); // 产品分类树形选择
const categoryOptions = ref([]); // 产品分类树形选择
const tenantOptions = ref([]);
const isProductSnUnique = ref();
const checkProductSnUnique = debounce((sn) => {
console.log(sn);
checkProductSn(sn).then(response => {
checkProductSn(sn).then((response) => {
console.log(response);
isProductSnUnique.value = response.empty;
});
@ -183,7 +209,7 @@ function reset() {
imgUrl: null,
createBy: null,
createTime: null,
remark: null
remark: null,
};
// proxy.resetForm("productRef");
if (productRef.value) {
@ -213,7 +239,9 @@ const getCategoryList = async () => {
const getTenantList = async (keyword) => {
const response = await listTenant({
pageNum: 1, pageSize: 20, tenantName: keyword
pageNum: 1,
pageSize: 20,
tenantName: keyword,
});
tenantOptions.value = response.rows;
};
@ -229,8 +257,10 @@ const submitForm = () => {
addProduct(form.value).then((response) => {
ElMessage.success("新增成功");
form.value = response.data;
const tabObj = Object.assign({}, route, { title: "修改产品" });
tab.updatePage(tabObj);
// const tabObj = Object.assign({}, route, { title: "修改产品" });
// tab.updatePage(tabObj);
const tabObj = { path: "/produc/product" };
tab.closeOpenPage(tabObj);
});
}
}

672
src/views/product/product/components/model.vue
View File

@ -3,93 +3,299 @@
<el-row :gutter="10" class="mb8">
<el-col :span="1.5">
<el-button
v-hasPermi="['product:product:add']"
icon="plus"
plain
size="small"
type="primary"
@click="open=true"
>新增
@click="handleAdd"
>新增
</el-button>
</el-col>
<el-col :span="1.5">
<el-button icon="upload" plain size="small" type="success" @click=""
>导入
</el-button>
</el-col>
<el-col :span="1.5">
<el-button
v-hasPermi="['product:product:add']"
icon="upload"
plain
size="small"
type="success"
@click=""
>新增
</el-button>
</el-col>
<el-col :span="1.5">
<el-button
v-hasPermi="['product:product:add']"
icon="refresh"
plain
size="small"
type="warning"
@click=""
>新增
@click="emits('model-updated')"
>刷新
</el-button>
</el-col>
<el-col :span="1.5">
<el-button
v-hasPermi="['product:product:add']"
icon="view"
plain
size="small"
type="info"
@click=""
>新增
@click="openJsonViewer = true"
>预览
</el-button>
</el-col>
</el-row>
<el-table :data="modelList" size="small">
<el-table :data="modelList" border size="small">
<el-table-column align="center" label="名称" prop="name" />
<el-table-column align="center" label="首页显示" prop="isTop">
<template #default="{row}">
{{ isTopMap.get(row.isTop) ?? "未知" }}
<el-table-column align="center" label="标识符" prop="id" />
<!-- <el-table-column align="center" label="首页显示" prop="isTop">-->
<!-- <template #default="{row}">-->
<!-- {{ isTopMap.get(row.isTop) ?? "未知" }}-->
<!-- </template>-->
<!-- </el-table-column>-->
<!-- <el-table-column align="center" label="实时监测" prop="isMonitor">-->
<!-- <template #default="{row}">-->
<!-- {{ isMonitor.get(row.isMonitor) ?? "未知" }}-->
<!-- </template>-->
<!-- </el-table-column>-->
<el-table-column align="center" label="物模型类别" prop="isMonitor">
<template #default="{ row }">
<el-tag v-if="row.type === 3" size="small">事件</el-tag>
<el-tag v-else-if="row.type === 2" size="small">功能</el-tag>
<el-tag v-else-if="row.type === 1" size="small">属性</el-tag>
<el-tag v-else size="small">未知</el-tag>
</template>
</el-table-column>
<el-table-column align="center" label="实时监测" prop="isMonitor">
<template #default="{row}">
{{ isMonitor.get(row.isMonitor) ?? "未知" }}
<el-table-column
align="left"
class-name="specsColor"
header-align="center"
label="数据定义"
min-width="150"
prop="specs"
>
<template #default="{ row }">
<div v-html="formatSpecsDisplay(row.specs)"></div>
</template>
</el-table-column>
<el-table-column align="center" label="物模型类别" prop="isMonitor">
<template #default="{row}">
<el-tag v-if="row.modelType==='events'">事件</el-tag>
<el-tag v-else-if="row.modelType==='functions'">函数</el-tag>
<el-tag v-else-if="row.modelType==='properties'">属性</el-tag>
<el-tag v-else>未知</el-tag>
<template #default="{ row }">
<el-button
icon="Edit"
link
size="small"
type="warning"
@click="handleUpdate(row)"
>修改
</el-button>
<el-button
icon="delete"
link
size="small"
type="danger"
@click="handleDelete(row)"
>删除
</el-button>
</template>
</el-table-column>
</el-table>
<!-- 添加或修改物模型对话框 -->
<el-dialog v-model="open" append-to-body title="" width="600px">
<el-form ref="form" :model="form" :rules="rules" label-width="100px">
<el-form-item label="模型名称" prop="modelName">
<el-input v-model="form.modelName" placeholder="请输入物模型名称，例如：温度" style="width:385px;" />
<el-dialog v-model="open" :title="title" append-to-body width="600px">
<el-form ref="formRef" :model="form" :rules="rules" label-width="100px">
<el-form-item label="模型名称" prop="name">
<el-input
v-model="form.name"
placeholder="请输入物模型名称，例如：温度"
style="width: 385px"
/>
</el-form-item>
<el-form-item label="标识符" prop="identifier">
<el-input v-model="form.identifier" placeholder="请输入标识符，例如：temperature" style="width:385px;" />
<el-form-item label="标识符" prop="id">
<el-input
v-model="form.id"
placeholder="请输入标识符，例如：temperature"
style="width: 385px"
/>
</el-form-item>
<el-form-item label="模型类别" prop="type">
<el-radio-group v-model="form.type" @change="typeChange(form.type)">
<el-radio-button label="1">属性</el-radio-button>
<el-radio-button label="2">功能</el-radio-button>
<el-radio-button label="3">事件</el-radio-button>
<el-radio-button :label="1">属性</el-radio-button>
<el-radio-button :label="2">功能</el-radio-button>
<el-radio-button :label="3">事件</el-radio-button>
</el-radio-group>
</el-form-item>
<el-form-item v-show="form.type != 3" label="首页显示" prop="isTop">
<el-switch v-model="form.isTop" :active-value="1" :inactive-value="0" active-color="#13ce66" active-text=""
inactive-text="">
</el-switch>
<!-- <el-form-item v-show="form.type !== 3" label="首页显示" prop="isTop">-->
<!-- <el-switch v-model="form.isTop" :active-value="1" :inactive-value="0" active-color="#13ce66" active-text=""-->
<!-- inactive-text="">-->
<!-- </el-switch>-->
<!-- </el-form-item>-->
<!-- <el-form-item v-show="form.type === 1" label="实时监测" prop="isMonitor">-->
<!-- <el-switch v-model="form.isMonitor" :active-value="1" :inactive-value="0" active-color="#13ce66"-->
<!-- active-text=""-->
<!-- inactive-text=""-->
<!-- @change="changeMonitor(form.isMonitor)"-->
<!-- >-->
<!-- </el-switch>-->
<!-- </el-form-item>-->
<el-divider></el-divider>
<el-form-item label="数据类型" prop="datatype">
<el-select
v-model="form.datatype"
placeholder="请选择数据类型"
style="width: 175px"
@change="dataTypeChange"
>
<el-option key="integer" label="整数" value="integer"></el-option>
<el-option key="decimal" label="小数" value="decimal"></el-option>
<el-option
key="bool"
:disabled="form.isMonitor === 1"
label="布尔"
value="bool"
></el-option>
<el-option
key="enum"
:disabled="form.isMonitor === 1"
label="枚举"
value="enum"
></el-option>
<el-option
key="string"
:disabled="form.isMonitor === 1"
label="字符串"
value="string"
></el-option>
<el-option
key="array"
:disabled="form.isMonitor === 1"
label="数组"
value="array"
></el-option>
</el-select>
</el-form-item>
<div v-if="form.datatype === 'integer' || form.datatype === 'decimal'">
<el-form-item label="取值范围">
<el-row>
<el-col :span="9">
<el-input
v-model="form.specs.min"
placeholder="最小值"
type="number"
/>
</el-col>
<el-col :span="2" align="center">到</el-col>
<el-col :span="9">
<el-input
v-model="form.specs.max"
placeholder="最大值"
type="number"
/>
</el-col>
</el-row>
</el-form-item>
<el-form-item label="单位">
<el-input
v-model="form.specs.unit"
placeholder="请输入单位，例如：℃"
style="width: 385px"
/>
</el-form-item>
<el-form-item label="步长">
<el-input
v-model="form.specs.step"
placeholder="请输入步长，例如：1"
style="width: 385px"
type="number"
/>
</el-form-item>
</div>
<div v-if="form.datatype === 'bool'">
<el-form-item label="布尔值" prop="">
<el-row style="margin-bottom: 10px">
<el-col :span="9">
<el-input
v-model="form.specs.falseText"
placeholder="例如：关闭"
/>
</el-col>
<el-col :offset="1" :span="10"> （0 值对应文本）</el-col>
</el-row>
<el-row>
<el-col :span="9">
<el-input
v-model="form.specs.trueText"
placeholder="例如：打开"
/>
</el-col>
<el-col :offset="1" :span="10"> （1 值对应文本）</el-col>
</el-row>
</el-form-item>
</div>
<div v-if="form.datatype === 'enum'">
<el-form-item label="枚举项" prop="">
<el-row
v-for="(item, index) in form.specs.enumList"
:key="`enum${index}`"
style="margin-bottom: 10px"
>
<el-col :span="9">
<el-input
v-model="item.value"
placeholder="参数值，例如：0"
type="number"
/>
</el-col>
<el-col :offset="1" :span="11">
<el-input
v-model="item.text"
placeholder="参数描述，例如：中速档位"
/>
</el-col>
<el-col v-if="index !== 0" :offset="1" :span="2"
><a style="color: #f56c6c" @click="removeEnumItem(index)"
>删除</a
></el-col
>
</el-row>
<div>
+ <a style="color: #409eff" @click="addEnumItem()">添加枚举项</a>
</div>
</el-form-item>
</div>
<div v-if="form.datatype === 'string'">
<el-form-item label="最大长度" prop="">
<el-row>
<el-col :span="9">
<el-input
v-model="form.specs.maxLength"
placeholder="例如：1024"
type="number"
/>
</el-col>
<el-col :offset="1" :span="14">（字符串的最大长度）</el-col>
</el-row>
</el-form-item>
</div>
<div v-if="form.datatype === 'array'">
<el-form-item label="数组类型" prop="">
<el-radio-group v-model="form.specs.arrayType">
<el-radio label="int">int（整数）</el-radio>
<el-radio label="double">double（小数）</el-radio>
<el-radio label="string">string（字符串）</el-radio>
</el-radio-group>
</el-form-item>
</div>
</el-form>
<template #footer>
<div class="dialog-footer">
<el-button type="primary" @click="submitForm">确 定</el-button>
<el-button @click="cancel">取 消</el-button>
</div>
</template>
</el-dialog>
<el-dialog v-model="openJsonViewer" append-to-body width="600px">
<json-viewer :value="JSON.parse(modelJson)" copyable>
<template #copy>复制</template>
</json-viewer>
</el-dialog>
</div>
</template>
@ -97,43 +303,381 @@
<script setup>
import { useRoute } from "vue-router";
import { reactive, ref, toRefs, watch } from "vue";
import { isMonitor, isTopMap } from "@/constant/dict";
import { updateProduct } from "@/api/product/product";
import "vue3-json-viewer/dist/index.css";
import { JsonViewer } from "vue3-json-viewer";
import { ElMessage, ElMessageBox } from "element-plus";
import { v4 as uuidv4 } from "uuid";
import { cloneDeep } from "lodash-es";
const emits = defineEmits(["model-updated"]);
const props = defineProps({
product: {
type: Object,
required: true
}, modelJson: {
type: String
}
required: true,
},
modelJson: {
type: String,
},
});
const { product, modelJson } = toRefs(props);
const formRef = ref();
const route = useRoute();
/**
* 检查标识符唯一性
*/
const checkIdIsUnique = (rule, value, callback) => {
if (
modelList.value.findIndex(
(el) => el.id === value && el.modelId !== form.value.modelId
) > -1
) {
callback(new Error("标识符不可重复"));
}
callback();
};
const data = reactive({
form: {}
form: {},
rules: {
// TODO: 标识符 id 不可重复
name: [
{
required: true,
message: "物模型名称不能为空",
trigger: "blur",
},
],
id: [
{
required: true,
message: "标识符，产品下唯一不能为空",
trigger: "blur",
},
{
validator: checkIdIsUnique,
trigger: "change",
},
],
datatype: [
{
required: true,
message: "数据类型不能为空",
trigger: "change",
},
],
specs: [
{
required: true,
message: "数据定义不能为空",
trigger: "blur",
},
],
},
});
const modelList = ref([]);
const { form } = toRefs(data);
const { form, rules } = toRefs(data);
const open = ref(false); // 是否显示编辑对话框
const open = ref(false); // 是否显示编辑对话框
const openJsonViewer = ref(false);
const title = ref("");
const modelTypeMap = new Map([
[1, "properties"],
[2, "functions"],
[3, "events"],
]);
watch(modelJson, (value) => {
if (value) {
const { functions, events, properties } = JSON.parse(value);
modelList.value = [...functions.map(el => ({
...el, modelType: "functions"
})), ...events.map(el => ({
...el, modelType: "events"
})), ...properties.map(el => ({
...el, modelType: "properties"
}))];
try {
const { functions, events, properties } = JSON.parse(value);
modelList.value = [
...properties.map((el) => ({
...el,
modelType: "properties",
type: 1,
})),
...functions.map((el) => ({
...el,
modelType: "functions",
type: 2,
})),
...events.map((el) => ({
...el,
modelType: "events",
type: 3,
})),
];
} catch (e) {
console.log(e);
}
}
});
function getModelData() {
}
const reset = () => {
form.value = {
templateId: null,
templateName: null,
userId: null,
userName: null,
tenantId: null,
tenantName: null,
id: null,
type: 1,
datatype: "integer",
isSys: null,
isTop: null,
isMonitor: null,
delFlag: null,
createBy: null,
createTime: null,
updateBy: null,
updateTime: null,
remark: null,
specs: {
enumList: [
{
value: "",
text: "",
},
],
arrayType: "int",
},
};
if (formRef.value) {
formRef.value.resetFields();
}
};
const cancel = () => {
open.value = false;
reset();
};
const handleAdd = () => {
reset();
open.value = true;
title.value = "新增物模型";
};
const handleUpdate = (row) => {
form.value = cloneDeep(row);
open.value = true;
title.value = "修改物模型";
};
/**
* 删除
* @param row
*/
const handleDelete = (row) => {
ElMessageBox.confirm(`是否确认删除`)
.then(() => {
const _model = JSON.parse(modelJson.value);
const modelType = modelTypeMap.get(row.type);
_model[modelType] = _model[modelType].filter(
(el) => el.modelId !== row.modelId
);
return updateProduct({
productId: product.value.productId,
thingsModelsJson: JSON.stringify(_model),
});
})
.then(() => {
ElMessage.success("删除成功");
emits("model-updated");
});
};
// 类型改变
const typeChange = (label) => {
if (label === 2 || label === 3) {
form.value.isMonitor = 0;
}
};
const dataTypeChange = () => {};
// 实时监测改变
const changeMonitor = (isMonitor) => {
if (
isMonitor === 1 &&
form.value.datatype !== "integer" &&
form.value.datatype !== "decimal"
) {
form.value.datatype = "integer";
}
};
/** 添加枚举项 */
const addEnumItem = () => {
form.value.specs.enumList.push({
value: "",
text: "",
});
};
/** 删除枚举项 */
const removeEnumItem = (index) => {
form.value.specs.enumList.splice(index, 1);
};
const submitForm = () => {
formRef.value.validate((valid) => {
if (valid) {
if (form.value.modelId != null) {
// 格式化specs
// this.form.specs = this.formatThingsSpecs();
form.value.specs = formatThingsSpecs();
form.value.productId = product.value.productId;
form.value.productName = product.value.productName;
const _modelJson = JSON.parse(modelJson.value);
const modelType = modelTypeMap.get(form.value.type);
_modelJson[modelType].forEach((el, index) => {
if (el.modelId === form.value.modelId) {
_modelJson[modelType][index] = form.value;
}
});
updateProduct({
productId: product.value.productId,
thingsModelsJson: JSON.stringify(_modelJson),
}).then((resp) => {
ElMessage.success("修改成功");
open.value = false;
emits("model-updated");
});
// if (this.form.type == 2) {
// this.form.isMonitor = 0;
// } else if (this.form.type == 3) {
// this.form.isMonitor = 0;
// this.form.isTop = 0;
// }
// updateModel(this.form).then((response) => {
// this.$modal.msgSuccess("修改成功");
// this.open = false;
// this.getList();
// });
} else {
// 格式化specs
form.value.modelId = uuidv4();
form.value.specs = formatThingsSpecs();
form.value.productId = product.value.productId;
form.value.productName = product.value.productName;
// if (form.value.type === 2) {
// form.value.isMonitor = 0;
// } else if (form.value.type === 3) {
// form.value.isMonitor = 0;
// form.value.isTop = 0;
// }
const _modelJson = JSON.parse(modelJson.value);
// _modelJson.properties.forEach((el, idx) => {
// _modelJson.properties[idx] = {
// ...el, modelId: uuidv4()
// };
// });
// _modelJson.events.forEach((el, idx) => {
// _modelJson.events[idx] = {
// ...el, modelId: uuidv4()
// };
// });
// _modelJson.functions.forEach((el, idx) => {
// _modelJson.functions[idx] = {
// ...el, modelId: uuidv4()
// };
// });
if (form.value.type === 1) {
_modelJson.properties.push(form.value);
} else if (form.value.type === 2) {
_modelJson.functions.push(form.value);
} else if (form.value.type === 3) {
_modelJson.events.push(form.value);
} else {
return;
}
updateProduct({
productId: product.value.productId,
thingsModelsJson: JSON.stringify(_modelJson),
}).then((resp) => {
emits("model-updated");
ElMessage.success("新增成功");
open.value = false;
});
}
}
});
};
/** 格式化显示数据定义 */
const formatSpecsDisplay = (specs) => {
// let specs = JSON.parse(json);
if (!specs) {
return;
}
if (specs.type === "integer" || specs.type === "decimal") {
return (
"<span style='width:50%;display:inline-block;'>最大值：<span style=\"color:#F56C6C\">" +
specs.max +
'</span></span>最小值：<span style="color:#F56C6C">' +
specs.min +
"</span><br /><span style='width:50%;display:inline-block;'>步长：<span style=\"color:#F56C6C\">" +
specs.step +
'</span></span>单位：<span style="color:#F56C6C">' +
specs.unit
);
} else if (specs.type === "string") {
return (
'最大长度：<span style="color:#F56C6C">' + specs.maxLength + "</span>"
);
} else if (specs.type === "array") {
return (
'数组类型：<span style="color:#F56C6C">' + specs.arrayType + "</span>"
);
} else if (specs.type === "enum") {
let items = "";
for (let i = 0; i < specs.enumList.length; i++) {
items =
items +
"<span style='width:50%;display:inline-block;'>" +
specs.enumList[i].value +
"：<span style='color:#F56C6C'>" +
specs.enumList[i].text +
"</span></span>";
if (i > 0 && i % 2 !== 0) {
items = items + "<br />";
}
}
return items;
} else if (specs.type === "bool") {
return (
"<span style='width:50%;display:inline-block;'>0：<span style=\"color:#F56C6C\">" +
specs.falseText +
'</span></span>1：<span style="color:#F56C6C">' +
specs.trueText
);
}
};
// 格式化物模型
const formatThingsSpecs = () => {
let _data = {};
_data.type = form.value.datatype;
if (form.value.datatype === "integer" || form.value.datatype === "decimal") {
_data.min = Number(form.value.specs.min);
_data.max = Number(form.value.specs.max);
_data.unit = form.value.specs.unit;
_data.step = Number(form.value.specs.step);
} else if (form.value.datatype === "string") {
_data.maxLength = Number(form.value.specs.maxLength);
} else if (form.value.datatype === "bool") {
_data.falseText = form.value.specs.falseText;
_data.trueText = form.value.specs.trueText;
} else if (form.value.datatype === "array") {
_data.arrayType = form.value.specs.arrayType;
} else if (form.value.datatype === "enum") {
_data.enumList = form.value.specs.enumList;
}
// return JSON.stringify(data);
return _data;
};
function getModelData() {}
</script>
<style scoped></style>

48
src/views/product/product/index.vue
View File

@ -82,7 +82,7 @@
<!-- </el-form-item>-->
<el-form-item>
<el-button icon="Search" type="primary" @click="handleQuery"
>搜索
>搜索
</el-button>
<el-button icon="Refresh" @click="resetQuery">重置</el-button>
</el-form-item>
@ -96,7 +96,7 @@
plain
type="primary"
@click="handleAdd"
>新增
>新增
</el-button>
</el-col>
<el-col :span="1.5">
@ -107,7 +107,7 @@
plain
type="success"
@click="handleUpdate"
>修改
>修改
</el-button>
</el-col>
<el-col :span="1.5">
@ -118,7 +118,7 @@
plain
type="danger"
@click="handleDelete"
>删除
>删除
</el-button>
</el-col>
<el-col :span="1.5">
@ -128,7 +128,7 @@
plain
type="warning"
@click="handleExport"
>导出
>导出
</el-button>
</el-col>
<right-toolbar
@ -173,7 +173,7 @@
link
type="primary"
@click="handleUpdate(scope.row)"
>修改
>修改
</el-button>
<el-button
v-hasPermi="['product:product:remove']"
@ -181,7 +181,7 @@
link
type="primary"
@click="handleDelete(scope.row)"
>删除
>删除
</el-button>
</template>
</el-table-column>
@ -247,7 +247,12 @@
</template>
<script name="Product" setup>
import { addProduct, delProduct, listProduct, updateProduct } from "@/api/product/product";
import {
addProduct,
delProduct,
listProduct,
updateProduct,
} from "@/api/product/product";
import { useRouter } from "vue-router";
const router = useRouter();
@ -278,17 +283,17 @@ const data = reactive({
thingsModelsJson: null,
deviceType: null,
vertificateMethod: null,
imgUrl: null
imgUrl: null,
},
rules: {
productName: [
{ required: true, message: "产品名称不能为空", trigger: "blur" }
{ required: true, message: "产品名称不能为空", trigger: "blur" },
],
categoryId: [
{ required: true, message: "产品分类ID不能为空", trigger: "blur" }
{ required: true, message: "产品分类ID不能为空", trigger: "blur" },
],
tenantId: [{ required: true, message: "租户ID不能为空", trigger: "blur" }]
}
tenantId: [{ required: true, message: "租户ID不能为空", trigger: "blur" }],
},
});
const { queryParams, form, rules } = toRefs(data);
@ -327,7 +332,7 @@ function reset() {
imgUrl: null,
createBy: null,
createTime: null,
remark: null
remark: null,
};
proxy.resetForm("productRef");
}
@ -357,7 +362,7 @@ function handleAdd() {
// open.value = true;
// title.value = "添加产品";
router.push({
path: "/produc/product/edit"
path: "/produc/product/edit",
});
}
@ -368,8 +373,8 @@ function handleUpdate(row) {
path: "/produc/product/edit",
query: {
productId: _productId,
pageNum: queryParams.value.pageNum
}
pageNum: queryParams.value.pageNum,
},
});
// getProduct(_productId).then(response => {
// form.value = response.data;
@ -403,16 +408,15 @@ function submitForm() {
function handleDelete(row) {
const _productIds = row.productId || ids.value;
proxy.$modal
.confirm("是否确认删除产品编号为\"" + _productIds + "\"的数据项？")
.then(function() {
.confirm('是否确认删除产品编号为"' + _productIds + '"的数据项？')
.then(function () {
return delProduct(_productIds);
})
.then(() => {
getList();
proxy.$modal.msgSuccess("删除成功");
})
.catch(() => {
});
.catch(() => {});
}
/** 导出按钮操作 */
@ -420,7 +424,7 @@ function handleExport() {
proxy.download(
"product/product/export",
{
...queryParams.value
...queryParams.value,
},
`product_${new Date().getTime()}.xlsx`
);