feat: 修复平台接入的新增编辑及列表显示

src/views/modules/iotCard/platformManage/addOrEditItem.vue

@@ -1,47 +1,47 @@
 <!-- 平台接入-新增或者编辑 -->
 <template>
-		<el-dialog :title="ruleForm.id ? '新增' : '编辑'" v-model="isShowDialog" width="650px">
-			<el-form :model="ruleForm" ref="formRef" :rules="rules" label-width="100px">
-				<el-form-item label="平台类型" prop="types">
-          <el-select style="width: 100%;" v-model="ruleForm.types" placeholder="请选择">
-            <el-option label="电信" value="1"></el-option>
-<!--            <el-option disabled label="联通" value="2"></el-option>-->
-<!--            <el-option label="移动" value="3"></el-option>-->
-          </el-select>
-        </el-form-item>
-        <el-form-item label="名称" prop="name">
-          <el-input v-model="ruleForm.name" placeholder="请输入名称" />
-        </el-form-item>
-        <el-form-item label="App ID" prop="appKey">
-          <el-input v-model="ruleForm.appKey" placeholder="请输入App ID" />
-        </el-form-item>
-        <el-form-item v-if="ruleForm.types == 1" label="secretKey" prop="appSecret">
-          <el-input v-model="ruleForm.appSecret" placeholder="请输入secretKey" />
-        </el-form-item>
-        <el-form-item v-if="ruleForm.types == 1" label="用户id" prop="userId">
-          <el-input v-model="ruleForm.userId" placeholder="请输入用户id" />
-        </el-form-item>
-        <el-form-item label="密码" prop="password">
-          <el-input v-model="ruleForm.password" placeholder="请输入密码" />
-        </el-form-item>
-        <el-form-item v-if="ruleForm.types == 3" label="接口地址" prop="restUrl">
-          <el-input v-model="ruleForm.restUrl" placeholder="请输入接口地址" />
-        </el-form-item>
-        <el-form-item label="状态">
-          <!-- 1启用,0禁用 -->
-          <el-switch v-model="ruleForm.status" active-value="1" inactive-value="0" inline-prompt active-text="启" inactive-text="禁"></el-switch>
-        </el-form-item>
-        <el-form-item label="说明">
-          <el-input :rows="6" type="textarea" v-model="ruleForm.remark" placeholder="请输入说明" />
-        </el-form-item>
-			</el-form>
-			<template #footer>
-				<span class="dialog-footer">
-					<el-button @click="onCancel">取 消</el-button>
-					<el-button :loading="btnLoading" type="primary" @click="onSubmit">确定</el-button>
-				</span>
-			</template>
-		</el-dialog>
+  <el-dialog :title="ruleForm.id ? '编辑' : '新增'" v-model="isShowDialog" width="650px">
+    <el-form :model="ruleForm" ref="formRef" :rules="rules" v-if="isShowDialog" label-width="100px">
+      <el-form-item label="平台类型" prop="types">
+        <el-select style="width: 100%;" v-model="ruleForm.types" placeholder="请选择">
+          <el-option label="电信" value="1"></el-option>
+          <!--            <el-option disabled label="联通" value="2"></el-option>-->
+          <!--            <el-option label="移动" value="3"></el-option>-->
+        </el-select>
+      </el-form-item>
+      <el-form-item label="名称" prop="name">
+        <el-input v-model="ruleForm.name" placeholder="请输入名称" />
+      </el-form-item>
+      <el-form-item label="App ID" prop="appKey">
+        <el-input v-model="ruleForm.appKey" placeholder="请输入App ID" />
+      </el-form-item>
+      <el-form-item v-if="ruleForm.types == '1'" label="secretKey" prop="appSecret">
+        <el-input v-model="ruleForm.appSecret" placeholder="请输入secretKey" />
+      </el-form-item>
+      <el-form-item v-if="ruleForm.types == '1'" label="用户id" prop="userId">
+        <el-input v-model="ruleForm.userId" placeholder="请输入用户id" />
+      </el-form-item>
+      <el-form-item label="密码" prop="password">
+        <el-input v-model="ruleForm.password" placeholder="请输入密码" />
+      </el-form-item>
+      <el-form-item v-if="ruleForm.types == '3'" label="接口地址" prop="restUrl">
+        <el-input v-model="ruleForm.restUrl" placeholder="请输入接口地址" />
+      </el-form-item>
+      <el-form-item label="状态">
+        <!-- 1启用,0禁用 -->
+        <el-switch v-model="ruleForm.status" active-value="1" inactive-value="0" inline-prompt active-text="启" inactive-text="禁"></el-switch>
+      </el-form-item>
+      <el-form-item label="说明">
+        <el-input :rows="6" type="textarea" v-model="ruleForm.remark" placeholder="请输入说明" />
+      </el-form-item>
+    </el-form>
+    <template #footer>
+      <span class="dialog-footer">
+        <el-button @click="onCancel">取 消</el-button>
+        <el-button :loading="btnLoading" type="primary" @click="onSubmit">确定</el-button>
+      </span>
+    </template>
+  </el-dialog>
 </template>
 
 <script lang="ts" setup>
@@ -54,8 +54,8 @@ const formRef = ref<HTMLElement | null>(null);
 const emit = defineEmits(['updateList']);
 const btnLoading = ref(false);
 
-const ruleForm = ref({
-  id: 0,
+const baseForm = {
+  id: undefined,
   types: "1",
   name: "",
   userId: "",
@@ -65,6 +65,10 @@ const ruleForm = ref({
   appKey: "",
   restUrl: "",
   status: 1
+}
+
+const ruleForm = ref({
+  ...baseForm
 })
 
 const rules = ref({
@@ -86,42 +90,33 @@ const onSubmit = () => {
   formWrap.validate(async (valid: boolean) => {
     if (!valid) return
     btnLoading.value = true
-    if(ruleForm.value.id) {
+    if (ruleForm.value.id) {
       // 修改
       api.platform.editItem(ruleForm.value)
-      .then(() => {
-        ElMessage({ type: 'success', message: '修改成功' })
-        emit('updateList')
-        closeDialog();
-        resetForm();
-      })
-      .finally(() => (btnLoading.value = false))
-    }else{
+        .then(() => {
+          ElMessage({ type: 'success', message: '修改成功' })
+          emit('updateList')
+          closeDialog();
+          resetForm();
+        })
+        .finally(() => (btnLoading.value = false))
+    } else {
       // 新增
       api.platform.addItem(ruleForm.value)
-      .then(() => {
-        ElMessage({ type: 'success', message: '添加成功' })
-        emit('updateList')
-        closeDialog();
-        resetForm();
-      })
-      .finally(() => (btnLoading.value = false))
-      }
+        .then(() => {
+          ElMessage({ type: 'success', message: '添加成功' })
+          emit('updateList')
+          closeDialog();
+          resetForm();
+        })
+        .finally(() => (btnLoading.value = false))
+    }
   });
 };
 
 const resetForm = () => {
-  ruleForm.value  = {
-    id: 0,
-    types: "1",
-    name: "",
-    userId: "",
-    password: "",
-    appSecret: "",
-    remark: "",
-    appKey: "",
-    restUrl: "",
-    status: 1
+  ruleForm.value = {
+    ...baseForm
   }
 }
 
@@ -139,10 +134,12 @@ const closeDialog = () => {
   isShowDialog.value = false;
 };
 
-const openDialog = (item:any) => {
-  if(item) {
+const openDialog = (item: any) => {
+  if (item) {
     // 修改
     ruleForm.value = { ...item };
+  } else {
+    ruleForm.value = { ...baseForm };
   }
   isShowDialog.value = true;
 }

src/views/modules/iotCard/platformManage/index.vue

@@ -28,17 +28,18 @@
         </el-form-item>
       </el-form>
       <el-table :data="tableData" max-height="calc(100vh  - 210px);" v-loading="loading" style="width: 100%">
-        <el-table-column v-col="'name'" label="名称" prop="name" align="center" />
-        <el-table-column v-col="'simStatus'" label="状态" prop="simStatus" align="center">
+        <el-table-column v-col="'name'" label="名称" prop="name" align="left" />
+        <el-table-column v-col="'type'" label="平台类型" prop="types" :formatter="function (row: any) { return ['', '电信', '联通', '移动'][row.types] }" align="center" width="120" />
+        <el-table-column v-col="'appKey'" label="App ID" prop="appKey" align="center" />
+        <el-table-column v-col="'simStatus'" label="状态" prop="simStatus" align="center" width="80">
           <template #default="scope">
             <el-tag :type="scope.row.status === '0' ? 'danger' : 'primary'">{{ formatStatus(scope.row.status) }}</el-tag>
           </template>
         </el-table-column>
-        <el-table-column v-col="'remark'" label="说明" prop="remark" align="center" />
-
+        <el-table-column v-col="'remark'" label="说明" prop="remark" align="center" show-overflow-tooltip />
         <el-table-column v-col="'handle'" width="110" label="操作" fixed="right" prop="handle" align="center">
           <template #default="scope">
-            <el-button v-auth="'detail'" size="small" text type="primary" @click="onOpenDetail(scope.row)">详情</el-button>
+            <el-button v-auth="'detail'" size="small" text type="primary" @click="onOpenDetail(scope.row)">编辑</el-button>
             <el-button v-auth="'del'" size="small" text type="warning" @click="onDel(scope.row)">删除</el-button>
           </template>
         </el-table-column>
@@ -52,7 +53,7 @@
 <script lang="ts" setup>
 import api from '/@/api/iotCard';
 import { defineAsyncComponent, ref } from 'vue';
-import { ElMessageBox, ElMessage } from 'element-plus';
+import { ElMessageBox, ElMessage, formatter } from 'element-plus';
 import { useSearch } from "/@/hooks/useCommon"
 const AddOrEditItem = defineAsyncComponent(() => import('./addOrEditItem.vue'));