feat:pc端新增公共接口管理

@@ -3,17 +3,20 @@ import type {
   queryPageParams,
   BigScreenCenterParams,
   ConfigurationCenterInfo,
-  BigScreenCenterItemsModal,
+  BigScreenCenterItemsModel,
+  BigScreenInterfaceParams,
 } from './model/bigscreenCenterModel';
 import { getPageData } from '../../base';
 import { FileUploadResponse } from '../../oem/model';
 enum API {
   basicUrl = '/data_view',
   UPLOAD = '/oss/upload',
+  //大屏公共接口
+  DATA_VIEW_INTERFACE = '/data_view_interface',
 }
 
 export const getPage = (params: queryPageParams) => {
-  return getPageData<BigScreenCenterItemsModal>(params, API.basicUrl);
+  return getPageData<BigScreenCenterItemsModel>(params, API.basicUrl);
 };
 
 export const saveConfigurationCenter = (params: BigScreenCenterParams) => {
@@ -46,3 +49,46 @@ export const saveOrUpdateBigScreenCenter = (params: ConfigurationCenterInfo, isU
 export const uploadThumbnail = (file: FormData) => {
   return defHttp.post<FileUploadResponse>({ url: API.UPLOAD, params: file });
 };
+
+/**
+ * 大屏公共接口
+ */
+
+export const getDataViewInterfacePage = (params: queryPageParams) => {
+  return getPageData<BigScreenCenterItemsModel>(params, API.DATA_VIEW_INTERFACE);
+};
+
+export const saveDataViewInterface = (params: BigScreenInterfaceParams) => {
+  return defHttp.post({
+    url: API.DATA_VIEW_INTERFACE,
+    data: params,
+  });
+};
+
+export const updateDataViewInterface = (params: BigScreenInterfaceParams) => {
+  return defHttp.put({
+    url: API.DATA_VIEW_INTERFACE,
+    data: params,
+  });
+};
+
+export const deleteBigViewInterface = (ids: string[]) => {
+  return defHttp.delete({
+    url: API.DATA_VIEW_INTERFACE,
+    data: {
+      ids: ids,
+    },
+  });
+};
+
+export function getPublish(id) {
+  return defHttp.get({
+    url: API.DATA_VIEW_INTERFACE + '/publish/' + id,
+  });
+}
+
+export function getCancelPublish(id) {
+  return defHttp.get({
+    url: API.DATA_VIEW_INTERFACE + '/cancel_publish/' + id,
+  });
+}

@@ -25,3 +25,32 @@ export interface BigScreenCenterParams {
   defaultContent?: string;
 }
 export type ConfigurationCenterInfo = BigScreenCenterParams;
+
+/**
+ * 大屏公共接口
+ */
+export interface BigScreenInterfaceParams {
+  createTime: string;
+  creator: string;
+  defaultConfig: string;
+  description: string;
+  enabled: boolean;
+  icon: string;
+  id: string;
+  interfaceName: string;
+  name: string;
+  remark: string;
+  requestContentType: 0;
+  requestHttpType: string;
+  requestOriginUrl: string;
+  requestParams: string;
+  requestUrl: string;
+  roleIds: [string];
+  state: number;
+  tenantExpireTime: string;
+  tenantId: string;
+  tenantProfileId: string;
+  tenantStatus: string;
+  updateTime: string;
+  updater: string;
+}

@@ -230,7 +230,7 @@
                     {
                       text: '未发布',
                       auth: ConfigurationPermission.UPDATE,
-                      icon: 'ant-design:double-right-outlined',
+                      icon: 'ant-design:node-expand-outlined',
                       event: '',
                       onClick: handleCreateOrUpdate.bind(null, item),
                     },

 <template>
   <div class="table-content">
-    <table align="center" style="width: 100%" cellspacing="0">
+    <!-- 采用的原生表格 -->
+    <table align="center">
       <thead>
         <tr>
           <th></th>
           <th>Key</th>
           <th>Value</th>
+          <th>是否必须</th>
           <th>操作</th>
         </tr>
       </thead>
@@ -18,10 +20,9 @@
             <Select
               v-model:value="item.key"
               placeholder="请选择"
-              notFoundContent="请选择"
               style="width: 14rem"
               :options="selectOptions"
-              @change="handleChange"
+              @change="handleChange(item.key)"
               allowClear
             />
           </td>
@@ -34,6 +35,9 @@
             />
           </td>
           <td>
+            <a-switch v-model:checked="item.required" />
+          </td>
+          <td>
             <div>
               <Button type="dashed" @click="add(item, index)">
                 <template #icon><PlusOutlined /></template
@@ -49,11 +53,10 @@
   </div>
 </template>
 <script lang="ts" setup name="editCellTable">
-  import { reactive, ref, onMounted } from 'vue';
+  import { reactive, ref, onMounted, nextTick } from 'vue';
   import { Select, Button } from 'ant-design-vue';
   import { findDictItemByCode } from '/@/api/system/dict';
   import { PlusOutlined, MinusOutlined } from '@ant-design/icons-vue';
-  import { buildUUID } from '/@/utils/uuid';
 
   const props = defineProps({
     method: {
@@ -61,7 +64,11 @@
     },
   });
 
-  onMounted(async () => {
+  onMounted(() => {
+    getSelectOptions();
+  });
+
+  const getSelectOptions = async () => {
     const res = await findDictItemByCode({ dictCode: 'dataview_builtin_params' });
     selectOptions.value = res.map((m) => ({ label: m.itemText, value: m.itemValue }));
     selectOptions.value.push({
@@ -70,15 +77,15 @@
     });
     if (props.method === '2')
       selectOptions.value = selectOptions.value.filter((f) => f.value !== 'scope');
-  });
+  };
 
   const selectOptions = ref<{ label: string; value: string; disabled?: boolean }[]>([]);
 
   type defaultItem = {
-    id: string;
     key: null | string;
     value: string;
     editDisabled: boolean;
+    required: boolean;
   };
 
   const tableArray = reactive<{
@@ -86,10 +93,10 @@
   }>({
     content: [
       {
-        id: buildUUID(),
         key: null,
         value: '',
         editDisabled: false,
+        required: false,
       },
     ],
   });
@@ -97,10 +104,10 @@
   // 新增
   const add = (_, index: number) => {
     tableArray.content.splice(index + 1, 0, {
-      id: buildUUID(),
       key: null,
       value: '',
       editDisabled: false,
+      required: false,
     });
   };
 
@@ -117,7 +124,8 @@
   };
 
   //Select互斥
-  const handleChange = () => {
+  const handleChange = (value: string) => {
+    console.log(value);
     selectOptions.value.forEach((ele) => {
       ele.disabled = false;
       tableArray.content.forEach((element) => {
@@ -135,20 +143,40 @@
 
   //获取数据
   const getValue = () => {
-    const params = {};
-    tableArray.content?.map((item: any) => {
-      if (item?.key !== 'scope') params[item?.key] = item.value;
-      params[`${(item?.key + item?.id).slice(0, 10)}`] = item.value;
-    });
-    return params;
+    return tableArray.content;
   };
 
   //设置数据
-  const setValue = (data) => (tableArray.content = data);
+  const setValue = (data) => {
+    nextTick(() => (tableArray.content = data));
+    nextTick(() =>
+      setTimeout(() => {
+        tableArray.content.forEach((it: any) => {
+          handleChange(it.key);
+        });
+      }, 20)
+    );
+  };
 
+  //重置数据
+  const resetValue = () => {
+    tableArray.content = [];
+    tableArray.content.push({
+      key: null,
+      value: '',
+      editDisabled: false,
+      required: false,
+    });
+    nextTick(() => {
+      tableArray.content.forEach((it: any) => {
+        handleChange(it.key);
+      });
+    });
+  };
   defineExpose({
     getValue,
     setValue,
+    resetValue,
   });
 </script>
 
@@ -161,10 +189,11 @@
   }
 
   .table-content {
-    margin-top: 20px;
-    margin-right: 20px;
+    overflow-x: auto;
 
     table {
+      border-collapse: collapse;
+      width: 100%;
       &:extend(.table-border-color);
     }
 

 <template>
   <div>
-    <a-radio-group v-model:value="getRequestBody.content.radioValue" @change="handleChange">
+    <a-radio-group
+      v-model:value="getRequestBody.content.requestParamsBodyType"
+      @change="handleChange"
+    >
       <a-radio v-for="item in RequestBodyTypeEnum" :key="item" :value="item">{{ item }}</a-radio>
     </a-radio-group>
     <div class="mt-3">
       <a-textarea
-        v-if="getRequestBody.content.radioValue === 'none'"
+        v-show="getRequestBody.content.requestParamsBodyType === 'none'"
         disabled
         placeholder="该接口没有 Body 体"
         :rows="2"
       />
       <EditCellTable
-        v-if="
-          getRequestBody.content.radioValue === 'form-data' ||
-          getRequestBody.content.radioValue === 'x-www-form-urlencoded'
+        ref="editCellTableRef"
+        v-show="
+          getRequestBody.content.requestParamsBodyType === 'form-data' ||
+          getRequestBody.content.requestParamsBodyType === 'x-www-form-urlencoded'
         "
       />
       <a-textarea
         v-model:value="getRequestBody.content.json"
-        v-if="getRequestBody.content.radioValue === 'json'"
+        v-show="getRequestBody.content.requestParamsBodyType === 'json'"
         placeholder="请输入json"
         :rows="6"
       />
       <a-textarea
         v-model:value="getRequestBody.content.xml"
-        v-if="getRequestBody.content.radioValue === 'xml'"
+        v-show="getRequestBody.content.requestParamsBodyType === 'xml'"
         placeholder="请输入xml"
         :rows="6"
       />
@@ -32,7 +36,7 @@
   </div>
 </template>
 <script lang="ts" setup name="body">
-  import { reactive } from 'vue';
+  import { reactive, ref, nextTick } from 'vue';
   import { RequestBodyTypeEnum } from '../../enum/index';
   import { EditCellTable } from '../EditCellTable/index';
 
@@ -43,25 +47,65 @@
   });
 
   const getRequestBody = reactive({
-    content: { json: '', xml: '', radioValue: 'none' },
+    content: {
+      requestParamsBodyType: 'none',
+      json: '',
+      xml: '',
+      'form-data': {},
+      'x-www-form-urlencoded': {},
+    },
   });
 
+  const editCellTableRef = ref<InstanceType<typeof EditCellTable>>();
+
   const handleChange = ({ target }) => {
     const { value } = target;
-    getRequestBody.content.radioValue = value;
+    getRequestBody.content.requestParamsBodyType = value;
   };
 
   //获取数据
   const getValue = () => {
+    const type = Reflect.get(getRequestBody.content, 'requestParamsBodyType');
+    if (type === 'none') getRequestBody.content = {} as any;
+    const values = editCellTableRef.value?.getValue();
+    if (type === 'form-data') getRequestBody.content['form-data'] = values as any;
+    if (type === 'x-www-form-urlencoded')
+      getRequestBody.content['x-www-form-urlencoded'] = values as any;
     return getRequestBody.content;
   };
 
   //设置数据
   const setValue = (data) => {
-    getRequestBody.content = data;
+    nextTick(() => {
+      try {
+        if (!data) return;
+        const type = data?.requestParamsBodyType;
+        getRequestBody.content.requestParamsBodyType = type;
+        type === 'none'
+          ? null
+          : type === 'form-data'
+          ? editCellTableRef.value?.setValue(data['form-data'])
+          : type === 'x-www-form-urlencoded'
+          ? editCellTableRef.value?.setValue(data['x-www-form-urlencoded'])
+          : type === 'json'
+          ? (getRequestBody.content.json = data['json'])
+          : type === 'xml'
+          ? (getRequestBody.content.xml = data['xml'])
+          : '';
+      } finally {
+      }
+    });
+  };
+
+  //重置数据
+  const resetValue = () => {
+    for (let i in getRequestBody.content) Reflect.set(getRequestBody.content, i, '');
+    getRequestBody.content.requestParamsBodyType = 'none';
+    nextTick(() => editCellTableRef?.value?.resetValue());
   };
   defineExpose({
     getValue,
     setValue,
+    resetValue,
   });
 </script>

-import SimpleRequest from './index.vue';
-
-export { SimpleRequest };

 <template>
   <div>
-    <div>
-      <Tabs type="card" v-model:activeKey="activeKey">
-        <TabPane forceRender v-for="item in RequestParamsTypeEnum" :key="item" :tab="item" />
-      </Tabs>
-    </div>
-    <div>
-      <div v-if="activeKey === RequestParamsTypeEnum.PARAMS">
+    <Tabs @change="handleChange" v-model:activeKey="activeKey">
+      <TabPane class="tab-pane" forceRender key="Params" tab="Params">
         <EditCellTable ref="editCellTableRef" :method="method" />
-        <TestRequest :method="method" />
-      </div>
-      <div v-if="activeKey === RequestParamsTypeEnum.BODY">
-        <Body :method="method" />
-        <TestRequest :method="method" />
-      </div>
-      <div v-if="activeKey === RequestParamsTypeEnum.HEADER">
-        <EditCellTable ref="editCellTableRef" :method="method" />
-        <TestRequest :method="method" />
-      </div>
-    </div>
+        <TestRequest ref="testParRequestRef" :method="method" :data="dataList" />
+      </TabPane>
+      <TabPane v-if="method !== '2'" class="tab-pane" forceRender key="Body" tab="Body">
+        <Body ref="bodyRef" :method="method" />
+        <TestRequest ref="testBodyRequestRef" :method="method" :data="dataList" />
+      </TabPane>
+      <TabPane v-if="method !== '2'" class="tab-pane" forceRender key="Header" tab="Header">
+        <EditCellTable ref="editHeaderCellTableRef" :method="method" />
+        <TestRequest ref="testHeaderRequestRef" :method="method" :data="dataList" />
+      </TabPane>
+    </Tabs>
   </div>
 </template>
 <script lang="ts" setup name="simpleRequest">
-  import { ref } from 'vue';
+  import { ref, nextTick } from 'vue';
   import { Tabs, TabPane } from 'ant-design-vue';
-  import { RequestParamsTypeEnum } from '../../enum';
   import { EditCellTable } from '../EditCellTable';
   import Body from './body.vue';
   import { TestRequest } from '../TestRequest/index';
 
-  const props = defineProps({
+  defineProps({
     method: {
       type: String,
     },
   });
 
-  if (props.method === '2') {
-    Reflect.deleteProperty(RequestParamsTypeEnum, 'BODY');
-    Reflect.deleteProperty(RequestParamsTypeEnum, 'HEADER');
-  } else {
-    Reflect.set(RequestParamsTypeEnum, 'BODY', 'Body');
-    Reflect.set(RequestParamsTypeEnum, 'HEADER', 'Header');
-  }
+  const emits = defineEmits(['activeKey']);
 
   const activeKey = ref('Params');
 
   const editCellTableRef = ref<InstanceType<typeof EditCellTable>>();
 
+  const editHeaderCellTableRef = ref<InstanceType<typeof EditCellTable>>();
+
+  const testParRequestRef = ref<InstanceType<typeof TestRequest>>();
+
+  const testBodyRequestRef = ref<InstanceType<typeof TestRequest>>();
+
+  const testHeaderRequestRef = ref<InstanceType<typeof TestRequest>>();
+
+  const dataList = ref({});
+
+  const bodyRef = ref<InstanceType<typeof Body>>();
+
+  const handleChange = () => {
+    testParRequestRef.value?.setValue();
+    testHeaderRequestRef.value?.setValue();
+    testBodyRequestRef.value?.setValue();
+  };
+
   //获取数据
   const getValue = () => {
-    return editCellTableRef?.value?.getValue();
+    const type = activeKey.value;
+    const Body = bodyRef.value?.getValue();
+    const Params = editCellTableRef.value?.getValue();
+    const Header = editHeaderCellTableRef.value?.getValue();
+    emits('activeKey', type);
+    return type === 'Params' ? Params : type === 'Body' ? Body : Header;
   };
 
   //设置数据
   const setValue = (data) => {
-    editCellTableRef?.value?.setValue(data);
+    dataList.value = data;
+    const Objects = JSON.parse(data?.requestParams);
+    nextTick(() => {
+      if (!Objects) return;
+      activeKey.value = Objects?.type;
+      if (activeKey.value === 'Params') {
+        editCellTableRef.value?.setValue(Objects?.Params);
+        testParRequestRef.value?.setValue();
+      } else if (activeKey.value === 'Body') {
+        bodyRef.value?.setValue(Objects?.Body);
+        testBodyRequestRef.value?.setValue();
+      } else if (activeKey.value === 'Header') {
+        editHeaderCellTableRef.value?.setValue(Objects?.Header);
+        testHeaderRequestRef.value?.setValue();
+      } else {
+      }
+    });
+  };
+
+  //重置数据
+  const resetValue = () => {
+    activeKey.value = 'Params';
+    nextTick(() => {
+      editCellTableRef.value?.resetValue();
+      editHeaderCellTableRef.value?.resetValue();
+      bodyRef.value?.resetValue();
+    });
   };
 
   defineExpose({
     getValue,
     setValue,
+    resetValue,
   });
 </script>
+
+<style lang="less" scoped>
+  .tab-pane {
+    display: flex;
+    justify-content: flex-start;
+    flex-direction: column;
+    align-items: flex-start;
+  }
+</style>

@@ -264,12 +264,7 @@
 
   //获取数据
   const getValue = () => {
-    const params = {};
-    tableArray.content?.map((item: any) => {
-      if (item?.key !== 'scope') params[item?.key] = item.value;
-      params[`${(item?.key + item?.id).slice(0, 10)}`] = item.value;
-    });
-    return params;
+    return tableArray.content;
   };
   defineExpose({
     getValue,

 <template>
-  <div class="mt-8">
-    <div>
-      <Button @click="showTestEditCell = true" type="primary"> 测试一下 </Button>
+  <div>
+    <div class="mt-8">
+      <div>
+        <Button @click="showTestEditCell = true" type="primary"> 测试接口 </Button>
+      </div>
+      <div v-if="showTestEditCell" class="mt-8">
+        <a-row type="flex" justify="center">
+          <a-col :span="3"> 参数设置 </a-col>
+          <a-col :span="21">
+            <TestEditCellTable ref="testEditCellTableRef" :method="method" />
+          </a-col>
+        </a-row>
+      </div>
     </div>
     <div v-if="showTestEditCell" class="mt-8">
-      <a-row type="flex" justify="center">
-        <a-col :span="3"> 参数设置 </a-col>
-        <a-col :span="21">
-          <TestEditCellTable ref="testEditCellTableRef" :method="method" />
-        </a-col>
-      </a-row>
-    </div>
-  </div>
-  <div v-if="showTestEditCell" class="mt-8">
-    <div>
-      <Button @click="handleExcute" type="primary"> 执行 </Button>
-    </div>
-    <div class="mt-8">
-      <a-row type="flex" justify="center">
-        <a-col :span="3"> 测试结果 </a-col>
-        <a-col :span="21">
-          <a-textarea v-model:value="testResult" placeholder="测试结果为：" :rows="6" />
-        </a-col>
-      </a-row>
+      <div>
+        <Button @click="handleExcute" type="primary"> 执行 </Button>
+      </div>
+      <div class="mt-8">
+        <a-row type="flex" justify="center">
+          <a-col :span="3"> 测试结果 </a-col>
+          <a-col :span="21">
+            <a-textarea
+              allow-clear
+              show-count
+              v-model:value="testResult"
+              placeholder="测试结果为："
+              :rows="8"
+            />
+          </a-col>
+        </a-row>
+      </div>
     </div>
   </div>
 </template>
-<script lang="ts" setup name="testSql">
+<script lang="ts" setup name="testRequest">
   import { ref } from 'vue';
   import { Button } from 'ant-design-vue';
   import { TestEditCellTable } from '../TestEditCellTable/index';
+  import { getAllDeviceByOrg } from '/@/api/dataBoard';
+  import { getDeviceAttributes } from '/@/api/dataBoard';
 
   defineProps({
     method: {
       type: String,
     },
+    data: {
+      type: Object,
+    },
   });
 
   const showTestEditCell = ref(false);
@@ -43,10 +56,34 @@
 
   const testResult = ref('');
 
+  // const testNeedKeys = ['organizationId', 'deviceProfileId', 'entityId', 'keys', 'date'];
+
   const handleExcute = async () => {
     const params = testEditCellTableRef.value?.getValue();
-    testResult.value = JSON.stringify(params);
+    const keys = params?.map((m) => ({ key: m.key, value: m.value }));
+    keys?.forEach(async (it: any) => {
+      console.log(it);
+      if (it.key === 'organizationId') {
+        //获取设备
+        const data = await getAllDeviceByOrg(it.value!);
+        testResult.value = JSON.stringify(data);
+      }
+      if (it.key === 'deviceProfileId') {
+        //获取属性
+        const data = await getDeviceAttributes({ deviceProfileId: it.value! });
+        testResult.value = JSON.stringify(data);
+      }
+    });
   };
+
+  //设置数据
+  const setValue = () => {
+    showTestEditCell.value = false;
+    testResult.value = '';
+  };
+  defineExpose({
+    setValue,
+  });
 </script>
 
 <style scoped lang="less"></style>

 <template>
   <div class="mt-8">
     <div>
-      <Button @click="handleExcute" type="primary"> 测试一下 </Button>
+      <Button @click="handleExcute" type="primary"> 测试SQL </Button>
     </div>
   </div>
   <div class="mt-8">
@@ -9,7 +9,13 @@
       <a-row type="flex" justify="center">
         <a-col :span="3"> 测试结果 </a-col>
         <a-col :span="21">
-          <a-textarea v-model:value="testResult" placeholder="测试结果为：" :rows="6" />
+          <a-textarea
+            allow-clear
+            show-count
+            v-model:value="testResult"
+            placeholder="测试结果为："
+            :rows="8"
+          />
         </a-col>
       </a-row>
     </div>
@@ -27,9 +33,15 @@
 
   const testResult = ref('');
 
-  const handleExcute = () => {
+  const handleExcute = async () => {
     testResult.value = '测试结果为：1234';
   };
+
+  const resetValue = () => (testResult.value = '');
+
+  defineExpose({
+    resetValue,
+  });
 </script>
 
 <style scoped lang="less"></style>

@@ -8,53 +8,65 @@ export const columns: BasicColumn[] = [
   {
     title: '接口名称',
     dataIndex: 'interfaceName',
-    width: 80,
+    width: 150,
   },
   {
     title: '请求方式',
     dataIndex: 'requestContentType',
-    width: 120,
+    width: 90,
     format(text) {
-      return text === '0' ? '普通请求' : text === '1' ? 'SQL请求' : 'websocket请求';
+      return Number(text) === 0 ? '普通请求' : Number(text) === 1 ? 'SQL请求' : 'websocket请求';
     },
   },
   {
     title: '接口内容',
     dataIndex: 'content',
-    width: 120,
+    width: 80,
+    slots: { customRender: 'content' },
   },
   {
     title: '状态',
-    dataIndex: 'status',
-    width: 120,
+    dataIndex: 'state',
+    width: 80,
     customRender: ({ record }) => {
-      const status = record.status;
-      const color = status == 0 ? 'green' : 'red';
-      const text = status == 0 ? '发布' : '未发布';
+      const status = record.state;
+      const color = status == 1 ? 'green' : 'red';
+      const text = status == 1 ? '发布' : '未发布';
       return h(Tag, { color: color }, () => text);
     },
   },
 ];
 
-//模拟数据
-export const list = [
+// 查询配置
+export const searchFormSchema: FormSchema[] = [
   {
-    interfaceName: '传感器趋势图',
-    requestContentType: '0',
-    content: '/api/sensor',
-    status: 0,
-  },
-  {
-    interfaceName: '2co趋势图',
-    requestContentType: '2',
-    content: '/api/2co',
-    status: 1,
+    field: 'name',
+    label: '接口名称',
+    component: 'Input',
+    colProps: { span: 8 },
+    componentProps: {
+      maxLength: 36,
+      placeholder: '请输入接口名称',
+    },
   },
   {
-    interfaceName: 'temp趋势图',
-    requestContentType: '1',
-    content: '/api/temp',
-    status: 1,
+    field: 'state',
+    label: '发布状态',
+    component: 'Select',
+    colProps: { span: 8 },
+    componentProps: {
+      options: [
+        {
+          label: '发布',
+          value: 1,
+        },
+        {
+          label: '未发布',
+          value: 0,
+        },
+      ],
+      placeholder: '请选择发布状态',
+    },
   },
 ];
 
@@ -149,7 +161,7 @@ export const schemas: FormSchema[] = [
       values['requestContentType'] === '0' || values['requestContentType'] === '1',
   },
   {
-    field: 'sqlKey',
+    field: 'requestSQLKey',
     label: '键名',
     colProps: { span: 12 },
     component: 'Input',
@@ -160,7 +172,7 @@ export const schemas: FormSchema[] = [
     ifShow: ({ values }) => values['requestContentType'] === '1',
   },
   {
-    field: 'sqlValue',
+    field: 'requestSQLContent',
     label: '键值',
     colProps: { span: 24 },
     component: 'InputTextArea',

@@ -12,16 +12,19 @@
           <SimpleRequest
             ref="simpleRequestRef"
             v-if="model['requestContentType'] === '0'"
+            @activeKey="handleActiveKey"
             :method="model['requestContentType']"
           />
           <SimpleRequest
             ref="simpleRequestRef"
-            v-if="model['requestContentType'] === '2'"
+            @activeKey="handleActiveKey"
+            v-else-if="model['requestContentType'] === '2'"
             :method="model['requestContentType']"
           />
         </template>
         <template #testSql="{ model }">
           <TestSql
+            ref="testSqlRef"
             v-if="model['requestContentType'] === '1'"
             :method="model['requestContentType']"
           />
@@ -31,38 +34,110 @@
   </div>
 </template>
 <script lang="ts" setup name="publicApi">
-  import { ref } from 'vue';
+  import { ref, nextTick } from 'vue';
   import { BasicDrawer, useDrawerInner } from '/@/components/Drawer';
   import { BasicForm, useForm } from '/@/components/Form';
   import { schemas } from './config';
-  import { SimpleRequest } from './components/SimpleRequest';
+  import SimpleRequest from './components/SimpleRequest/index.vue';
   import { TestSql } from './components/TestSql/index';
+  import {
+    saveDataViewInterface,
+    updateDataViewInterface,
+  } from '/@/api/bigscreen/center/bigscreenCenter';
+  import { useMessage } from '/@/hooks/web/useMessage';
+
+  const emits = defineEmits(['success', 'register']);
+
+  const { createMessage } = useMessage();
+
+  const isUpdate = ref(false);
+
+  const putId = ref('');
+
+  const activeKey = ref('');
 
   const simpleRequestRef = ref<InstanceType<typeof SimpleRequest>>();
 
-  const [registerForm, { resetFields, validate, setFieldsValue }] = useForm({
+  const testSqlRef = ref<InstanceType<typeof TestSql>>();
+
+  const [registerForm, { resetFields, validate, setFieldsValue, updateSchema }] = useForm({
     labelWidth: 120,
     schemas,
     showActionButtonGroup: false,
   });
 
-  const [registerDrawer, { setDrawerProps }] = useDrawerInner(async (data) => {
+  const [registerDrawer, { setDrawerProps, closeDrawer }] = useDrawerInner(async (data) => {
+    setDrawerProps({ loading: true });
+    await nextTick();
     await resetFields();
+    nextTick(() => simpleRequestRef.value?.resetValue());
+    nextTick(() => testSqlRef.value?.resetValue());
     const title = `${!data.isUpdate ? '新增' : '修改'}公共接口`;
     setDrawerProps({ title });
-    setFieldsValue({ ...data.record });
+    isUpdate.value = data.isUpdate;
+    !isUpdate.value ? (putId.value = '') : (putId.value = data.record.id);
+    if (isUpdate.value) {
+      await setFieldsValue({
+        ...data.record,
+        requestContentType: String(data.record?.requestContentType),
+        requestSQLContent: JSON.parse(data.record?.requestParams)?.requestSQLContent?.sql,
+      });
+      await nextTick(() =>
+        setTimeout(() => {
+          simpleRequestRef.value?.setValue(data.record);
+        }, 200)
+      );
+      const opt = [
+        { label: 'get', value: 'GET' },
+        { label: 'post', value: 'POST' },
+        { label: 'put', value: 'PUT' },
+      ];
+      if (data.record?.requestContentType === 1) {
+        updateSchema({
+          field: 'requestHttpType',
+          componentProps: {
+            options: opt.slice(-2),
+          },
+        });
+      } else {
+        updateSchema({
+          field: 'requestHttpType',
+          componentProps: {
+            options: opt,
+          },
+        });
+      }
+    }
+    setDrawerProps({ loading: false });
   });
 
+  const handleActiveKey = (v) => (activeKey.value = v);
+
   const handleOnSubmit = async () => {
-    const values = await validate();
-    if (!values) return;
-    const params = simpleRequestRef?.value?.getValue();
-    const data = {
-      ...values,
-      requestParams: {
-        params,
-      },
-    };
-    console.log('Get form values', data);
+    setDrawerProps({ loading: true });
+    try {
+      const values = await validate();
+      if (!values) return;
+      const Objects = simpleRequestRef.value?.getValue();
+      const data = {
+        ...values,
+        id: !putId.value ? null : putId.value,
+        requestParams: JSON.stringify({
+          requestSQLContent: {
+            sql: values?.requestSQLContent,
+          },
+          type: activeKey.value,
+          Params: activeKey.value === 'Params' ? Objects : {},
+          Body: activeKey.value === 'Body' ? Objects : {},
+          Header: activeKey.value === 'Header' ? Objects : {},
+        }),
+      };
+      !putId.value ? await saveDataViewInterface(data) : await updateDataViewInterface(data);
+      emits('success');
+      closeDrawer();
+      createMessage.success(`${!isUpdate.value ? '新增' : '修改'}成功`);
+    } finally {
+      setDrawerProps({ loading: false });
+    }
   };
 </script>

 <template>
   <div>
     <BasicTable @register="registerTable">
+      <template #content="{ record }">
+        <a-button type="link" class="ml-2" @click="handleRecordContent(record)"> 查看 </a-button>
+      </template>
       <template #toolbar>
         <a-button type="primary" @click="handleCreateOrEdit(null)"> 新增公共接口 </a-button>
+        <Popconfirm
+          title="您确定要批量删除数据"
+          ok-text="确定"
+          cancel-text="取消"
+          @confirm="handleDeleteOrBatchDelete(null)"
+        >
+          <a-button color="error" :disabled="hasBatchDelete"> 批量删除 </a-button>
+        </Popconfirm>
       </template>
       <template #action="{ record }">
         <TableAction
           :actions="[
             {
               label: '发布',
-              icon: 'clarity:note-edit-line',
-              onClick: handleCreateOrEdit.bind(null, record),
+              icon: 'ant-design:node-expand-outlined',
+              onClick: handlePublish.bind(null, record),
+              ifShow: () => {
+                return record.state === 0;
+              },
             },
             {
               label: '取消发布',
-              icon: 'clarity:note-edit-line',
-              onClick: handleCreateOrEdit.bind(null, record),
+              icon: 'ant-design:node-collapse-outlined',
+              onClick: handleCancelPublish.bind(null, record),
+              ifShow: () => {
+                return record.state === 1;
+              },
             },
             {
               label: '修改',
               icon: 'clarity:note-edit-line',
               onClick: handleCreateOrEdit.bind(null, record),
+              ifShow: () => {
+                return record.state === 0;
+              },
             },
             {
               label: '删除',
               icon: 'ant-design:delete-outlined',
               color: 'error',
+              ifShow: () => {
+                return record.state === 0;
+              },
               popConfirm: {
                 title: '是否确认删除',
                 confirm: handleDeleteOrBatchDelete.bind(null, record),
@@ -36,24 +59,39 @@
       </template>
     </BasicTable>
   </div>
-  <PublicApiForm @register="registerDrawer" />
+  <PublicApiForm @register="registerDrawer" @success="handleSuccess" />
 </template>
 <script lang="ts" setup name="list">
+  import { nextTick, h } from 'vue';
   import { BasicTable, useTable, TableAction } from '/@/components/Table';
   import { useDrawer } from '/@/components/Drawer';
-  import { columns, list } from './config';
+  import { columns, searchFormSchema } from './config';
   import { PublicApiForm } from './index';
+  import {
+    getDataViewInterfacePage,
+    deleteBigViewInterface,
+    getPublish,
+    getCancelPublish,
+  } from '/@/api/bigscreen/center/bigscreenCenter';
+  import { useBatchDelete } from '/@/hooks/web/useBatchDelete';
+  import { Popconfirm, Modal } from 'ant-design-vue';
+  import { JsonPreview } from '/@/components/CodeEditor';
+  import { useMessage } from '/@/hooks/web/useMessage';
 
-  const [registerTable] = useTable({
-    // api: exportPage,
-    dataSource: list,
+  const [registerTable, { reload, setProps }] = useTable({
+    api: getDataViewInterfacePage,
     columns,
     showIndexColumn: false,
     clickToRowSelect: false,
     showTableSetting: true,
     bordered: true,
+    formConfig: {
+      labelWidth: 120,
+      schemas: searchFormSchema,
+    },
+    useSearchForm: true,
     actionColumn: {
-      width: 200,
+      width: 150,
       title: '操作',
       dataIndex: 'action',
       slots: { customRender: 'action' },
@@ -63,9 +101,19 @@
 
   const [registerDrawer, { openDrawer }] = useDrawer();
 
-  const handleDeleteOrBatchDelete = (record) => {
-    console.log(record);
-  };
+  const { createMessage } = useMessage();
+
+  const handleSuccess = () => reload();
+
+  const { hasBatchDelete, handleDeleteOrBatchDelete, selectionOptions } = useBatchDelete(
+    deleteBigViewInterface,
+    handleSuccess,
+    setProps
+  );
+
+  nextTick(() => {
+    setProps(selectionOptions);
+  });
 
   const handleCreateOrEdit = (record) => {
     const isUpdate = record === null ? false : true;
@@ -75,4 +123,24 @@
       record: recordContent,
     });
   };
+
+  const handleRecordContent = (record) => {
+    Modal.info({
+      title: '接口内容',
+      width: 600,
+      content: h(JsonPreview, { data: JSON.parse(record.requestParams) }),
+    });
+  };
+
+  const handlePublish = async (record) => {
+    await getPublish(record.id);
+    createMessage.success(`发布成功`);
+    handleSuccess();
+  };
+
+  const handleCancelPublish = async (record) => {
+    await getCancelPublish(record.id);
+    createMessage.success(`取消发布成功`);
+    handleSuccess();
+  };
 </script>