feat:大屏公共接口管理新增批量发布

@@ -104,3 +104,12 @@ export const getCancelPublish = (id) => {
     url: API.DATA_VIEW_INTERFACE + '/cancel_publish/' + id,
   });
 };
+
+//批量发布和取消发布
+export const putPublishOrCancelPublish = (type, ids) => {
+  return defHttp.put({
+    url: `${API.DATA_VIEW_INTERFACE}/${
+      type === 'batchPublish' ? 'batch_publish' : 'batch_cancel_publish'
+    }/?ids=${ids.join(',')}`,
+  });
+};

@@ -26,11 +26,18 @@
             />
           </td>
           <td style="width: 12vw">
-            <a-input
-              :disabled="item.editDisabled"
-              placeholder="请输入"
-              v-model:value="item.value"
-            />
+            <div v-if="item.key === 'fixed_date' || item.key === 'date_range'">
+              <a-input style="width: 6vw" placeholder="请输入" v-model:value="item.date1" />
+              <span>~</span>
+              <a-input style="width: 6vw" placeholder="请输入" v-model:value="item.date2" />
+            </div>
+            <div v-else>
+              <a-input
+                :disabled="item.editDisabled"
+                placeholder="请输入"
+                v-model:value="item.value"
+              />
+            </div>
           </td>
           <td style="width: 4vw">
             <a-switch v-model:checked="item.required" />
@@ -82,6 +89,8 @@
     value: string;
     editDisabled: boolean;
     required: boolean;
+    date1: string;
+    date2: string;
   };
 
   const tableArray = reactive<{
@@ -93,6 +102,8 @@
         value: '',
         editDisabled: false,
         required: false,
+        date1: '',
+        date2: '',
       },
     ],
   });
@@ -104,6 +115,8 @@
       value: '',
       editDisabled: false,
       required: false,
+      date1: '',
+      date2: '',
     });
   };
 
@@ -139,19 +152,39 @@
 
   //获取数据
   const getValue = () => {
-    return tableArray.content;
+    const assemblyData = tableArray.content.map((it) => {
+      return {
+        key: it.key,
+        value:
+          it.key === 'fixed_date'
+            ? `${it.date1},${it.date2}`
+            : it.key === 'date_range'
+            ? `${it.date1},${it.date2}`
+            : it.value,
+        editDisabled: it.editDisabled,
+        required: it.required,
+      };
+    });
+    return assemblyData;
   };
 
   //设置数据
-  const setValue = (data) => {
-    nextTick(() => (tableArray.content = data));
-    nextTick(() =>
-      setTimeout(() => {
-        tableArray.content.forEach(() => {
-          handleChange();
-        });
-      }, 20)
-    );
+  const setValue = async (data) => {
+    await nextTick();
+    const assemblyData = data.map((it) => {
+      return {
+        key: it.key,
+        value: it.value,
+        editDisabled: it.editDisabled,
+        required: it.required,
+        date1: it.key === 'date_range' || it.key === 'fixed_date' ? it.value.split(',').at(-2) : '',
+        date2: it.key === 'date_range' || it.key === 'fixed_date' ? it.value.split(',').at(-1) : '',
+      };
+    });
+    tableArray.content = assemblyData;
+    tableArray.content.forEach(() => {
+      handleChange();
+    });
   };
 
   //重置数据
@@ -162,6 +195,8 @@
       value: '',
       editDisabled: false,
       required: false,
+      date1: '',
+      date2: '',
     });
     nextTick(() => {
       tableArray.content.forEach(() => {

+<!-- eslint-disable vue/valid-v-model -->
 <template>
   <div class="table-content">
+    <!-- TODO 待优化 -->
     <table align="center">
       <thead>
         <tr>
@@ -14,7 +16,7 @@
           <td style="width: 1vw">
             {{ index + 1 }}
           </td>
-          <td style="width: 12vw">
+          <td style="width: 8vw">
             <Select
               :disabled="true"
               v-model:value="item.key"
@@ -24,7 +26,7 @@
               allowClear
             />
           </td>
-          <td style="width: 12vw">
+          <td style="width: 8vw">
             <a-input v-if="item.key === 'scope'" placeholder="请输入" v-model:value="item.value" />
             <a-tree-select
               v-else-if="item.key === 'organizationId'"
@@ -44,7 +46,6 @@
               notFoundContent="请选择"
               :options="entityOptions"
               allowClear
-              @change="handleDeviceChange(item)"
             />
             <Select
               v-else-if="item.key === 'keys'"
@@ -54,15 +55,11 @@
               :options="attributeOptions"
               allowClear
             />
-            <a-range-picker
-              v-else-if="item.key === 'date'"
-              v-model:value="item.value"
-              style="width: 12vw"
-              :show-time="{ format: 'HH:mm' }"
-              format="YYYY-MM-DD HH:mm"
-              :placeholder="['开始', '结束']"
-              @ok="onRangeOk"
-            />
+            <div v-else-if="item.key === 'fixed_date' || item.key === 'date_range'">
+              <a-button disabled type="primary">{{ item.value?.split(',').at(-2) }}</a-button>
+              <span>~</span>
+              <a-button disabled type="primary">{{ item.value?.split(',').at(-1) }}</a-button>
+            </div>
             <Select
               v-else
               v-model:value="item.value"
@@ -73,13 +70,31 @@
               @change="handleValueChange(item)"
             />
           </td>
-          <td style="width: 12vw">
+          <td style="width: 8vw">
             <a-input
               :disabled="item.key !== 'scope'"
               placeholder="请输入"
               v-model:value="item.keyValue"
             />
           </td>
+          <td style="width: 6vw">
+            <a-range-picker
+              v-if="item.key === 'fixed_date'"
+              style="width: 6vw"
+              v-model:value="item.dateValue"
+              :show-time="{ format: 'HH:mm' }"
+              format="YYYY-MM-DD HH:mm"
+              :placeholder="['开始', '结束']"
+            />
+            <a-range-picker
+              v-if="item.key === 'date_range'"
+              style="width: 6vw"
+              v-model:value="item.dateValue"
+              :show-time="{ format: 'HH:mm' }"
+              format="YYYY-MM-DD HH:mm"
+              :placeholder="['开始', '结束']"
+            />
+          </td>
         </tr>
       </tbody>
     </table>
@@ -125,6 +140,7 @@
     key: null | string;
     value: null | string;
     keyValue: null | string;
+    dateValue: null | string;
     editDisabled: boolean;
   };
 
@@ -137,6 +153,7 @@
         value: null,
         keyValue: null,
         editDisabled: false,
+        dateValue: null,
       },
     ],
   });
@@ -155,10 +172,6 @@
         getApi(list['x-www-form-urlencoded']);
   };
 
-  const onRangeOk = (value) => {
-    console.log('onOk: ', value);
-  };
-
   const getApi = (list) => {
     list?.forEach(async (it) => {
       if (it.key === 'deviceProfileId') {
@@ -213,10 +226,6 @@
     }
   };
 
-  const handleDeviceChange = (e) => {
-    console.log(e);
-  };
-
   //获取数据
   const getValue = () => {
     return tableTestArray.content;
@@ -229,7 +238,7 @@
 
 <style scoped lang="less">
   :deep(.ant-select-selector) {
-    width: 12vw !important;
+    width: 7.5vw !important;
   }
   @table-color: #e5e7eb;
 

@@ -102,14 +102,31 @@
 
   //获取测试表格的key value 数组对象形式
   const getTestTableKeyValue = () => {
-    return testEditCellTableRef.value?.getValue().map((it) => {
-      const value = it.key === 'scope' ? it.keyValue : it.value;
-      const key = it.key === 'scope' ? it.value : it.key;
-      return {
-        key,
-        value,
-      };
+    //把日期拆分成多个
+    const keyValueList = [];
+    testEditCellTableRef.value?.getValue()?.forEach((item) => {
+      const splitDateKey = item.key === 'date_range' ? item.value?.split(',') : [];
+      const splitDateValue = item.key === 'date_range' ? item.dateValue : [];
+      for (let i in splitDateKey) {
+        const obj = {
+          key: splitDateKey[i],
+          value: moment(splitDateValue[i]).valueOf(),
+        };
+        keyValueList.push(obj);
+      }
     });
+    return testEditCellTableRef.value
+      ?.getValue()
+      .concat(keyValueList)
+      .filter((it) => it.key !== 'date_range' && it.key !== 'fixed_date')
+      .map((it) => {
+        const value = it.key === 'scope' ? it.keyValue : it.value;
+        const key = it.key === 'scope' ? it.value : it.key;
+        return {
+          key,
+          value,
+        };
+      });
   };
 
   //格式化"http:xxxx/api/xx/{xx}/{xx}/{xx}这种格式"
@@ -143,12 +160,6 @@
         Reflect.deleteProperty(params, 'scope');
         Reflect.deleteProperty(params, 'id');
         Reflect.deleteProperty(params, 'type');
-        if (params['date']) {
-          Reflect.set(params, 'startTs', moment(params['date'][0]).valueOf());
-          Reflect.set(params, 'endTs', moment(params['date'][1]).valueOf());
-          Reflect.deleteProperty(params, 'date');
-        } else {
-        }
         return await otherHttp.get(
           { url: api, params },
           {

@@ -118,15 +118,33 @@ export const schemas: FormSchema[] = [
     },
   },
   {
-    field: 'requestOriginUrl',
+    field: 'originUrlType',
     label: '源地址',
+    component: 'ApiSelect',
+    required: true,
+    colProps: { span: 24 },
+    defaultValue: 'server_url',
+    componentProps: {
+      placeholder: '请选择源地址',
+      api: findDictItemByCode,
+      params: {
+        dictCode: 'dataview_select_origin_type',
+      },
+      labelField: 'itemText',
+      valueField: 'itemValue',
+    },
+  },
+  {
+    field: 'requestOriginUrl',
+    label: '地址',
     colProps: { span: 24 },
     required: true,
     component: 'Input',
     componentProps: {
       maxLength: 255,
-      placeholder: '请输入源地址',
+      placeholder: '请输入地址',
     },
+    ifShow: ({ values }) => values['originUrlType'] === 'custom_url',
   },
   {
     field: 'requestHttpType',

@@ -90,6 +90,9 @@
         ...data.record,
         requestContentType: String(data.record?.requestContentType),
         requestSQLContent: JSON.parse(data.record?.requestParams)?.requestSQLContent?.sql,
+        originUrlType: data.record?.requestOriginUrl.startsWith('localhost')
+          ? 'server_url'
+          : 'custom_url',
       });
       await nextTick(() =>
         setTimeout(() => {
@@ -121,6 +124,8 @@
       const values = await validate();
       if (!values) return;
       const Objects = simpleRequestRef.value?.getValue(true);
+      const requestOriginUrl =
+        values['originUrlType'] === 'server_url' ? 'localhost' : values['requestOriginUrl'];
       const data = {
         ...values,
         id: !putId.value ? null : putId.value,
@@ -133,6 +138,7 @@
           Body: activeKey.value === 'Body' ? Objects : {},
           Header: activeKey.value === 'Header' ? Objects : {},
         }),
+        requestOriginUrl,
       };
       !putId.value ? await saveDataViewInterface(data) : await updateDataViewInterface(data);
       emits('success');

 <template>
   <div>
-    <BasicTable @register="registerTable">
+    <BasicTable @register="registerTable" :row-selection="rowSelection">
       <template #content="{ record }">
         <a-button type="link" class="ml-2" @click="handleRecordContent(record)"> 查看 </a-button>
       </template>
@@ -14,6 +14,22 @@
         >
           <a-button color="error" :disabled="hasBatchDelete"> 批量删除 </a-button>
         </Popconfirm>
+        <Popconfirm
+          title="您确定要批量发布"
+          ok-text="确定"
+          cancel-text="取消"
+          @confirm="handleBatchPublish('batchPublish')"
+        >
+          <a-button color="error" :disabled="hasBatchPublish"> 批量发布 </a-button>
+        </Popconfirm>
+        <!-- <Popconfirm
+          title="您确定要批量取消发布"
+          ok-text="确定"
+          cancel-text="取消"
+          @confirm="handleBatchPublish('cancelBatchPublish')"
+        >
+          <a-button color="error" :disabled="hasBatchPublish"> 批量取消发布 </a-button>
+        </Popconfirm> -->
       </template>
       <template #action="{ record }">
         <TableAction
@@ -21,7 +37,7 @@
             {
               label: '发布',
               icon: 'ant-design:node-expand-outlined',
-              onClick: handlePublish.bind(null, record),
+              onClick: handlePublish.bind(null, 'publish', record),
               ifShow: () => {
                 return record.state === 0;
               },
@@ -29,7 +45,7 @@
             {
               label: '取消发布',
               icon: 'ant-design:node-collapse-outlined',
-              onClick: handleCancelPublish.bind(null, record),
+              onClick: handlePublish.bind(null, 'canelPublish', record),
               ifShow: () => {
                 return record.state === 1;
               },
@@ -62,7 +78,7 @@
   <PublicApiForm @register="registerDrawer" @success="handleSuccess" />
 </template>
 <script lang="ts" setup name="list">
-  import { nextTick, h } from 'vue';
+  import { h, ref } from 'vue';
   import { BasicTable, useTable, TableAction } from '/@/components/Table';
   import { useDrawer } from '/@/components/Drawer';
   import { columns, searchFormSchema } from './config';
@@ -72,13 +88,14 @@
     deleteBigViewInterface,
     getPublish,
     getCancelPublish,
+    putPublishOrCancelPublish,
   } 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';
+  import { cloneDeep } from 'lodash-es';
 
-  const [registerTable, { reload, setProps }] = useTable({
+  const [registerTable, { reload }] = useTable({
     api: getDataViewInterfacePage,
     columns,
     showIndexColumn: false,
@@ -101,19 +118,43 @@
 
   const [registerDrawer, { openDrawer }] = useDrawer();
 
+  const hasBatchPublish = ref(true);
+
+  const hasBatchDelete = ref(true);
+
+  const batchDeleteIds = ref([]);
+
   const { createMessage } = useMessage();
 
-  const handleSuccess = () => reload();
+  const handleSuccess = () => {
+    reload();
+    setStatusIsTrue();
+  };
 
-  const { hasBatchDelete, handleDeleteOrBatchDelete, selectionOptions } = useBatchDelete(
-    deleteBigViewInterface,
-    handleSuccess,
-    setProps
-  );
+  const setStatusIsFalse = () => {
+    hasBatchDelete.value = false;
+    hasBatchPublish.value = false;
+  };
 
-  nextTick(() => {
-    setProps(selectionOptions);
-  });
+  const setStatusIsTrue = () => {
+    hasBatchDelete.value = true;
+    hasBatchPublish.value = true;
+  };
+
+  const rowSelection = {
+    onChange: (_, selectedRows: any[]) => {
+      const list = cloneDeep(selectedRows);
+      batchDeleteIds.value = list.filter((it) => it.state === 0).map((it) => it.id) as never as any;
+      if (batchDeleteIds.value.length > 0) {
+        setStatusIsFalse();
+      } else {
+        setStatusIsTrue();
+      }
+    },
+    getCheckboxProps: (record) => ({
+      disabled: record.state === 1,
+    }),
+  };
 
   const handleCreateOrEdit = (record) => {
     const isUpdate = record === null ? false : true;
@@ -132,15 +173,22 @@
     });
   };
 
-  const handlePublish = async (record) => {
-    await getPublish(record.id);
-    createMessage.success(`发布成功`);
+  const handlePublish = async (type, record) => {
+    type === 'publish' ? await getPublish(record.id) : await getCancelPublish(record.id);
+    createMessage.success(`${type === 'publish' ? '发布' : '取消发布'}成功`);
+    handleSuccess();
+  };
+
+  const handleBatchPublish = async (type) => {
+    await putPublishOrCancelPublish(type, batchDeleteIds.value);
+    createMessage.success(`${type === 'batchPublish' ? '批量发布' : '批量取消发布'}成功`);
     handleSuccess();
   };
 
-  const handleCancelPublish = async (record) => {
-    await getCancelPublish(record.id);
-    createMessage.success(`取消发布成功`);
+  const handleDeleteOrBatchDelete = async (record) => {
+    const ids = record === null ? batchDeleteIds.value : [record.id];
+    await deleteBigViewInterface(ids);
+    createMessage.success(`${record === null ? '批量删除' : '删除'}成功`);
     handleSuccess();
   };
 </script>