調用方管理-詳情

src/views/dataService/serviceManage/callerManage/callerManage.data.ts

@@ -135,7 +135,41 @@ export const formSchema: any[] = [
       disabled: true,
     },
   },
+  {
+  field: 'tokenTime',
+  label: 'token自动刷新频率',
+    slot: 'tokenTime',
+  component: 'InputNumber',
+  defaultValue: 1,
+    labelWidth: 160,
+  componentProps: {
+    min: 1,
+    max: 9999,
+    // disabled: true,
+  },
+},
+  {
+    //用户密钥
+    field: 'userKey',
+    label: '用户密钥',
+    slot: 'userKey',
+    component: 'Input',
+    defaultValue:'transwarp12345',
+    componentProps: {
+      readOnly:true,
+      disabled: true,
+      style: { width: '27%' },
+    },
+  },
+
 
 
 
 ]
+  // const [registerTable] = useTable({
+  //   title: '可编辑单元格示例',
+  //   api: demoListApi,
+  //   columns: columns,
+  //   showIndexColumn: false,
+  //   bordered: true,
+  // });

src/views/dataService/serviceManage/callerManage/details.vue

@@ -9,7 +9,18 @@
       </div>
     </div>
     <step-header title="基本信息"/>
-    <BasicForm @register="registerForm" />
+    <BasicForm @register="registerForm">
+      <template #tokenTime="{ field, model }">
+        <InputNumber style="width: 55px" v-if="tokenTimeEidt" v-model:value="model[field]"></InputNumber>
+        <span v-else>&nbsp;&nbsp;&nbsp;{{ model[field] }} 天 </span>&nbsp;
+        <EditOutlined @click="handleTokenTimeEdit" />
+      </template>
+      <template #userKey="{ field, model }">
+        <Input style="width: 300px" v-if="userKeyEidt" v-model:value="model[field]"></Input>
+        <span v-else>&nbsp;&nbsp;&nbsp;{{ model[field] }}&nbsp;</span>&nbsp;
+        <EditOutlined @click="handleUserKeyEdit" />
+      </template>
+    </BasicForm>
     <step-header title="已使用服务"/>
     <BasicTable @register="registerTable"  :rowSelection="rowSelection">
       <template #bodyCell="{ column, record }">
@@ -29,13 +40,16 @@
 </template>
 
 <script lang="ts" setup>
+import { InputNumber,Input } from 'ant-design-vue';
 import Icon from '@/components/Icon/Icon.vue';
+import { EditOutlined } from '@ant-design/icons-vue';
 import {router} from "@/router";
 import { BasicForm, useForm } from '@/components/Form';
 import {detailsColumns, formSchema, detailSchemas} from "./callerManage.data";
 import StepHeader from "@/components/stepHeader.vue";
 import {tableListDetails} from "./mock";
 import { BasicTable, useTable, TableAction } from '@/components/Table';
+import {ref} from "vue";
 
 const [registerForm, { setFieldsValue, updateSchema, resetFields, validate }] = useForm({
   labelWidth: 100,
@@ -46,7 +60,14 @@ const [registerForm, { setFieldsValue, updateSchema, resetFields, validate }] =
     span: 23,
   },
 });
-
+const tokenTimeEidt = ref(false);
+function handleTokenTimeEdit() {
+  tokenTimeEidt.value = !tokenTimeEidt.value
+}
+const userKeyEidt = ref(false);
+function handleUserKeyEdit() {
+  userKeyEidt.value = !userKeyEidt.value
+}
 const [registerTable, { reload, updateTableDataRecord, getSearchInfo, getForm,getRowSelection }] = useTable({
   title: ' ',
   api: async (params) => {