things model

package.json

@@ -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",

src/api/product/product.js

@@ -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}`
+    url: `/product/product/check/${productSn}`,
-    , method: "get"
+    method: "get",
   });
 }

src/constant/dict.js

@@ -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, "否"],
 ]);
-
-

src/views/login.vue

@@ -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 {
+//.slide-left-enter-active {
-  transition: all 0.3s ease-out;
+//  transition: all 0.3s ease-out;
-}
+//}
-
+//
-.slide-left-leave-active {
+//.slide-left-leave-active {
-  transition: all 0.3s cubic-bezier(1, 0.5, 0.8, 1);
+//  transition: all 0.3s cubic-bezier(1, 0.5, 0.8, 1);
-}
+//}
-
+//
-.slide-left-enter-from,
+//.slide-left-enter-from,
-.slide-left-leave-to {
+//.slide-left-leave-to {
-  transform: translateX(-500px);
+//  transform: translateX(-500px);
-  position: relative;
+//  position: relative;
-  left: -500px;
+//  left: -500px;
-  opacity: 0;
+//  opacity: 0;
-}
+//}
-
+//
-.slide-right-enter-active {
+//.slide-right-enter-active {
-  transition: all 0.3s ease-out;
+//  transition: all 0.3s ease-out;
-}
+//}
-
+//
-.slide-right-leave-active {
+//.slide-right-leave-active {
-  transition: all 0.3s cubic-bezier(1, 0.5, 0.8, 1);
+//  transition: all 0.3s cubic-bezier(1, 0.5, 0.8, 1);
-}
+//}
-
+//
-.slide-right-enter-from,
+//.slide-right-enter-from,
-.slide-right-leave-to {
+//.slide-right-leave-to {
-  transform: translateX(500px);
+//  transform: translateX(500px);
-  opacity: 0;
+//  opacity: 0;
-}
+//}
 </style>

src/views/product/product/components/edit.vue

@@ -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-select
-                  <el-option v-for="item in tenantOptions" :key="item.tenantId" :label="item.tenantName"
+                  v-model="form.tenantId"
-                             :value="item.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"
+                <el-select
-                           placeholder="请选择认证方式">
+                  v-model="form.vertificateMethod"
-                  <el-option v-for="item in vertificateMethodOptions" :key="item.value" :label="item.label"
+                  placeholder="请选择认证方式"
-                             :value="item.value" />
+                >
+                  <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-form-item style="text-align: center; margin: 40px 0px">
-              <el-button v-if="form.status!==2" type="primary" @click="submitForm">提交</el-button>
+              <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="产品模型">
+      <el-tab-pane :disabled="!form.productId" label="产品模型">
-        <model ref="modelRef" :model-json="form.thingsModelsJson" :product="form" />
+        <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 :disabled="!form.productId" label="固件管理"></el-tab-pane>
-      <el-tab-pane label="设备授权"></el-tab-pane>
+      <el-tab-pane :disabled="!form.productId" label="设备授权"></el-tab-pane>
-      <el-tab-pane label="告警配置"></el-tab-pane>
+      <el-tab-pane :disabled="!form.productId" label="告警配置"></el-tab-pane>
-      <el-tab-pane 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,13 +168,13 @@ 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);
@@ -155,11 +183,9 @@ 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: "修改产品" });
+            // const tabObj = Object.assign({}, route, { title: "修改产品" });
-            tab.updatePage(tabObj);
+            // tab.updatePage(tabObj);
+            const tabObj = { path: "/produc/product" };
+            tab.closeOpenPage(tabObj);
           });
         }
       }

src/views/product/product/components/model.vue

@@ -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
+        <el-button icon="upload" plain size="small" type="success" @click=""
-          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">
+      <el-table-column align="center" label="标识符" prop="id" />
-        <template #default="{row}">
+
-          {{ isTopMap.get(row.isTop) ?? "未知" }}
+      <!--      <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">
+      <el-table-column
-        <template #default="{row}">
+        align="left"
-          {{ isMonitor.get(row.isMonitor) ?? "未知" }}
+        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}">
+        <template #default="{ row }">
-          <el-tag v-if="row.modelType==='events'">事件</el-tag>
+          <el-button
-          <el-tag v-else-if="row.modelType==='functions'">函数</el-tag>
+            icon="Edit"
-          <el-tag v-else-if="row.modelType==='properties'">属性</el-tag>
+            link
-          <el-tag v-else>未知</el-tag>
+            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-dialog v-model="open" :title="title" append-to-body width="600px">
-      <el-form ref="form" :model="form" :rules="rules" label-width="100px">
+      <el-form ref="formRef" :model="form" :rules="rules" label-width="100px">
-        <el-form-item label="模型名称" prop="modelName">
+        <el-form-item label="模型名称" prop="name">
-          <el-input v-model="form.modelName" placeholder="请输入物模型名称，例如：温度" style="width:385px;" />
+          <el-input
+            v-model="form.name"
+            placeholder="请输入物模型名称，例如：温度"
+            style="width: 385px"
+          />
         </el-form-item>
-        <el-form-item label="标识符" prop="identifier">
+        <el-form-item label="标识符" prop="id">
-          <el-input v-model="form.identifier" placeholder="请输入标识符，例如：temperature" style="width:385px;" />
+          <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="1">属性</el-radio-button>
-            <el-radio-button label="2">功能</el-radio-button>
+            <el-radio-button :label="2">功能</el-radio-button>
-            <el-radio-button label="3">事件</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-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=""
+        <!--          <el-switch v-model="form.isTop" :active-value="1" :inactive-value="0" active-color="#13ce66" active-text=""-->
-                     inactive-text="">
+        <!--                     inactive-text="">-->
-          </el-switch>
+        <!--          </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
+    required: true,
-  }, modelJson: {
+  },
-    type: String
+  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 openJsonViewer = ref(false);
+const title = ref("");
 
+const modelTypeMap = new Map([
+  [1, "properties"],
+  [2, "functions"],
+  [3, "events"],
+]);
 watch(modelJson, (value) => {
   if (value) {
+    try {
       const { functions, events, properties } = JSON.parse(value);
-    modelList.value = [...functions.map(el => ({
+      modelList.value = [
-      ...el, modelType: "functions"
+        ...properties.map((el) => ({
-    })), ...events.map(el => ({
+          ...el,
-      ...el, modelType: "events"
+          modelType: "properties",
-    })), ...properties.map(el => ({
+          type: 1,
-      ...el, modelType: "properties"
+        })),
-    }))];
+        ...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>

src/views/product/product/index.vue

@@ -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 + "\"的数据项？")
+    .confirm('是否确认删除产品编号为"' + _productIds + '"的数据项？')
-    .then(function() {
+    .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`
   );