feat:2.02迭代

src/controller/iot/tps.ts

@@ -7,8 +7,7 @@ export class TpsController {
   }
 
   static async devicePage (params: {page: number, pageSize: number, label?: string, deviceId?: string}) {
-    const { data } = await getDevicePage(params)
-    return data
+    return await getDevicePage(params)
   }
 
   static async delDeviceById (id: string) {

src/pages/Iot/tps/device.vue

@@ -11,11 +11,32 @@
       <!-- <a-space><InputTsx placeholder="请输入设备名称进行搜索" v-model:value="deviceName" /> <a-button type="primary" @click="search">搜索</a-button> </a-space> -->
     </template>
     <template #render="{column, record}" >
+      <template v-if="column.key === 'thirdParam'" >
+        <a-tooltip color="white" :overlayStyle="{width: '800px'}" >
+          <template #title>
+            <a-textarea
+              :bordered="false"
+              style="width: 600px;"
+              :auto-size="{ minRows: 5, maxRows: 15 }"
+              :value="JSON.stringify(record.thirdParam, null, '\t')"
+              >
+            </a-textarea>
+          </template>
+          <div style="width: 100px">{{record.thirdParam}}</div>
+        </a-tooltip>
+      </template>
       <template v-if="column.key === 'action'" >
         <a-space>
           <a @click="openModal('update', record)">详情</a>
           <a @click="openModal('update', record)">修改</a>
-          <a @click="delDevice(record.id)">删除</a>
+          <a-popconfirm
+            title="你确定要删除这个服务吗?"
+            ok-text="是"
+            cancel-text="否"
+            @confirm="delDevice(record.id)"
+          >
+            <a href="">删除</a>
+          </a-popconfirm>
         </a-space>
       </template>
     </template>
@@ -25,12 +46,10 @@
   <RealView
     :open="visible"
     @cancel="closeModal"
+    @ok="ok"
     footer
   >
     <a-card title="基本信息" >
-      <template #extra >
-        <a-button type="primary" @click="ok" >提交修改</a-button>
-      </template>
       <a-form  style="width: 100%;" :labelCol="{span: 3}" :wrapperCol="{span: 14}" >
         <a-form-item label="设备服务名称" v-bind="validateInfos.label"  >
           <InputTsx allowClear placeholder="请输入设备服务名称" v-model:value="deviceState.label" />
@@ -51,11 +70,11 @@
             </a-select-option>
           </a-select>
         </a-form-item>
-        <a-form-item label="设备方法" v-bind="validateInfos.deviceMethod"  >
+        <!-- v-bind="validateInfos.deviceMethod" -->
+        <a-form-item label="设备方法"  >
           <a-select
-            :value="deviceState.deviceId"
+            v-model:value="deviceState.deviceMethod"
             style="width: 170px;"
-            @change="onChangeDevice"
             placeholder="请选择设备"
           >
             <a-select-option
@@ -74,14 +93,14 @@
         <InputTsx allowClear placeholder="ak" v-model:value="deviceState.thirdParam.ak" />
       </a-form-item>
       <a-form-item label="sk" >
-        <InputTsx allowClear placeholder="ak" v-model:value="deviceState.thirdParam.ak" />
+        <InputTsx allowClear placeholder="sk" v-model:value="deviceState.thirdParam.sk" />
       </a-form-item>
       <a-form-item label="服务地址" >
         <InputTsx allowClear placeholder="请输入服务地址" v-model:value="deviceState.thirdParam.endpoint" />
       </a-form-item>
       <a-form-item label="服务地址" >
         <a-select
-            :value="deviceState.deviceId"
+            :value="deviceState.thirdParam.method"
             style="width: 170px;"
             @change="onChangeMethod"
             placeholder="请选择服务方法"
@@ -136,7 +155,6 @@ const columns = [
     dataIndex: 'deviceMethod',
     key: 'deviceMethod'
   },
-
   {
     title: '第三服务code',
     dataIndex: 'thirdCode',
@@ -145,7 +163,9 @@ const columns = [
   {
     title: '第三服务参数',
     dataIndex: 'thirdParam',
-    key: 'thirdParam'
+    key: 'thirdParam',
+    width: '100',
+    ellipsis: true
   },
   {
     title: '操作',
@@ -174,7 +194,7 @@ const onChangeMethod = (method: string) => {
 
 const onChangeDevice = (deviceId: string) => deviceState.deviceId = deviceId
 
-const deviceState = reactive<TPS.Device>({
+const initDeviceState = {
   deviceId: '',
   thirdCode: '',
   label: '',
@@ -187,11 +207,13 @@ const deviceState = reactive<TPS.Device>({
     attributeKey: '',
     attributeJsonPath: ''
   }
-})
+}
+
+let deviceState = reactive<TPS.Device>(JSON.parse(JSON.stringify(initDeviceState)))
 
 const { resetFields, validate, validateInfos } = useForm(deviceState, {
-  label: [{ required: true, message: '请填写设备名称' }],
-  thirdCode: [{ required: true, message: '请填写第三方服务code' }]
+  label: [{ required: true, message: '请填写设备名称' }]
+  // thirdCode: [{ required: true, message: '请填写第三方服务code' }]
 })
 
 const opraState = ref<'add' | 'update'>('add')
@@ -201,7 +223,7 @@ const ok = () => {
     opraState.value === 'add' ? await TpsController.addDevice(deviceState) : await TpsController.updateDevice(deviceState)
     search()
     closeModal()
-  })
+  }).catch(_ => _)
 }
 
 const search = () => {
@@ -211,7 +233,8 @@ const search = () => {
 const openModal = (type: 'add' | 'update', record?: TPS.Device) => {
   opraState.value = type
   visible.value = true
-  // resetDeviceState(record)
+  if (opraState.value === 'add') deviceState = Object.assign({}, initDeviceState)
+  else deviceState = Object.assign({}, record)
 }
 
 const closeModal = () => {
@@ -230,5 +253,5 @@ onMounted(() => {
 })
 
 </script>
-  <style lang='less' scoped >
-  </style>
+<style lang='less' scoped >
+</style>