日期选择框样式调整

src/views/vent/safetyList/common/HistoryTable.vue

@@ -2,7 +2,7 @@
   <div class="history-table" v-if="loading">
     <BasicTable ref="historyTable" @register="registerTable" :data-source="dataSource" :columns="historyColumns">
       <template #form-submitBefore>
-        <a-button type="primary" preIcon="ant-design:search-outlined" @click="getDataSource">查询</a-button>
+        <a-button type="primary" preIcon="ant-design:search-outlined" @click="getDataSource" style="margin-right: 20px">查询</a-button>
         <a-button type="primary" preIcon="ant-design:export-outlined" @click="onExportXlsFn">导出</a-button>
       </template>
     </BasicTable>
@@ -10,313 +10,311 @@
 </template>
 
 <script lang="ts" setup>
-  //ts语法
-  import { watchEffect, ref, watch, defineExpose, inject, nextTick, onMounted, computed } from 'vue';
-  import { subStationList } from '../safetyList.api';
-  import { historyColumns } from '../historyLsit.data';
-  import { FormSchema } from '/@/components/Form/index';
-  import { BasicTable } from '/@/components/Table';
-  import { useListPage } from '/@/hooks/system/useListPage';
-  import { getTableHeaderColumns } from '/@/hooks/web/useWebColumns';
-  import { useMethods } from '/@/hooks/system/useMethods';
-  import { defHttp } from '/@/utils/http/axios';
-  import dayjs from 'dayjs';
-  import { getAutoScrollContainer } from '/@/utils/common/compUtils';
+//ts语法
+import { watchEffect, ref, watch, defineExpose, inject, nextTick, onMounted, computed } from 'vue';
+import { subStationList } from '../safetyList.api';
+import { historyColumns } from '../historyLsit.data';
+import { FormSchema } from '/@/components/Form/index';
+import { BasicTable } from '/@/components/Table';
+import { useListPage } from '/@/hooks/system/useListPage';
+import { getTableHeaderColumns } from '/@/hooks/web/useWebColumns';
+import { useMethods } from '/@/hooks/system/useMethods';
+import { defHttp } from '/@/utils/http/axios';
+import dayjs from 'dayjs';
+import { getAutoScrollContainer } from '/@/utils/common/compUtils';
 
-  const props = defineProps({
-    columnsType: {
-      type: String,
-    },
-    columns: {
-      type: Array,
-      // required: true,
-      default: () => [],
-    },
-    historyColumns: {
-      type: Array,
-      default: () => [],
-    },
-    stationId: {
-      type: String,
-    },
-    scroll: {
-      type: Object,
-      default: { y: 0 },
-    },
-    formSchemas: {
-      type: Array<FormSchema>,
-      default: () => [],
-    },
-  });
-  const postExportXlsUrl = '/safety/ventanalySubStation/export158StatusLog';
-  //获取分站数据
-  const historyTable = ref();
-  const loading = ref(false);
-  const dataSource = ref([]);
-
-  const emit = defineEmits(['change']);
+const props = defineProps({
+  columnsType: {
+    type: String,
+  },
+  columns: {
+    type: Array,
+    // required: true,
+    default: () => [],
+  },
+  historyColumns: {
+    type: Array,
+    default: () => [],
+  },
+  stationId: {
+    type: String,
+  },
+  scroll: {
+    type: Object,
+    default: { y: 0 },
+  },
+  formSchemas: {
+    type: Array<FormSchema>,
+    default: () => [],
+  },
+});
+const postExportXlsUrl = '/safety/ventanalySubStation/export158StatusLog';
+//获取分站数据
+const historyTable = ref();
+const loading = ref(false);
+const dataSource = ref([]);
 
-  const deviceKide = ref('');
-  const columns = ref([]);
-  const tableScroll = props.scroll.y ? ref({ y: props.scroll.y - 100 }) : ref({});
-  loading.value = true;
+const emit = defineEmits(['change']);
 
-  watch(
-    () => {
-      return props.columnsType;
-    },
-    async (newVal) => {
-      debugger;
-      if (!newVal) return;
-      deviceKide.value = newVal;
-      if (historyTable.value) {
-        getForm().resetFields();
-        // getForm().updateSchema();
-        // getForm();
-      }
-      dataSource.value = [];
-      nextTick(() => {
-        getDataSource();
-      });
+const deviceKide = ref('');
+const columns = ref([]);
+const tableScroll = props.scroll.y ? ref({ y: props.scroll.y - 100 }) : ref({});
+loading.value = true;
 
-      if (historyTable.value) reload();
-    },
-    {
-      immediate: true,
+watch(
+  () => {
+    return props.columnsType;
+  },
+  async (newVal) => {
+    debugger;
+    if (!newVal) return;
+    deviceKide.value = newVal;
+    if (historyTable.value) {
+      getForm().resetFields();
+      // getForm().updateSchema();
+      // getForm();
     }
-  );
+    dataSource.value = [];
+    nextTick(() => {
+      getDataSource();
+    });
 
-  watch(
-    () => props.scroll.y,
-    (newVal) => {
-      if (newVal) {
-        tableScroll.value = { y: newVal - 100 };
-      } else {
-        tableScroll.value = {};
-      }
-    }
-  );
+    if (historyTable.value) reload();
+  },
+  {
+    immediate: true,
+  }
+);
 
-  watch(
-    () => props.stationId,
-    async () => {
-      await getForm().setFieldsValue({});
+watch(
+  () => props.scroll.y,
+  (newVal) => {
+    if (newVal) {
+      tableScroll.value = { y: newVal - 100 };
+    } else {
+      tableScroll.value = {};
     }
-  );
+  }
+);
 
-  function resetFormParam() {
-    const formData = getForm().getFieldsValue();
-    const pagination = getPaginationRef();
-    formData['pageNo'] = pagination['current'];
-    formData['pageSize'] = pagination['pageSize'];
-    const params = {
-      pageNo: pagination['current'],
-      pageSize: pagination['pageSize'],
-      createTime_begin: formData['starttime_begin'],
-      createTime_end: formData['starttime_end'],
-      stationId: props.stationId,
-      status: formData['status'],
-    };
-    return params;
+watch(
+  () => props.stationId,
+  async () => {
+    await getForm().setFieldsValue({});
   }
+);
+
+function resetFormParam() {
+  const formData = getForm().getFieldsValue();
+  const pagination = getPaginationRef();
+  formData['pageNo'] = pagination['current'];
+  formData['pageSize'] = pagination['pageSize'];
+  const params = {
+    pageNo: pagination['current'],
+    pageSize: pagination['pageSize'],
+    createTime_begin: formData['starttime_begin'],
+    createTime_end: formData['starttime_end'],
+    stationId: props.stationId,
+    status: formData['status'],
+  };
+  return params;
+}
 
-  async function getDataSource() {
+async function getDataSource() {
+  dataSource.value = [];
+  setLoading(true);
+  const params = await resetFormParam();
+  const res = await defHttp.post(
+    { url: '/safety/ventanalySubStation/get158StatusLog', params: params },
+    { joinParamsToUrl: true, isTransformResponse: false }
+  );
+  console.log(res.result['records']);
+  if (res.result['records'].length > 0) {
+    dataSource.value = res.result['records'];
+    setLoading(false);
+  } else {
     dataSource.value = [];
-    setLoading(true);
-    const params = await resetFormParam();
-    const res = await defHttp.post(
-      { url: '/safety/ventanalySubStation/get158StatusLog', params: params },
-      { joinParamsToUrl: true, isTransformResponse: false }
-    );
-    console.log(res.result['records']);
-    if (res.result['records'].length > 0) {
-      dataSource.value = res.result['records'];
-      setLoading(false);
-    } else {
-      dataSource.value = [];
-      setLoading(false);
-    }
-  }
-  //导入导出方法
-  function onExportXlsFn() {
-    const { exportXlsPost0 } = useMethods();
-    const params = resetFormParam();
-    exportXlsPost0('历史数据', postExportXlsUrl, params);
+    setLoading(false);
   }
+}
+//导入导出方法
+function onExportXlsFn() {
+  const { exportXlsPost0 } = useMethods();
+  const params = resetFormParam();
+  exportXlsPost0('历史数据', postExportXlsUrl, params);
+}
 
-  // 列表页面公共参数、方法
-  const { tableContext } = useListPage({
-    tableProps: {
-      // api: list,
-      columns: props.historyColumns ? props.historyColumns : (props.historyColumns as any[]),
-      canResize: true,
-      showTableSetting: false,
-      showActionColumn: false,
-      bordered: false,
-      size: 'small',
-      scroll: tableScroll,
-      showIndexColumn: true,
-      tableLayout: 'auto',
-      formConfig: {
-        labelAlign: 'left',
-        showAdvancedButton: false,
-        showSubmitButton: false,
-        showResetButton: false,
-        baseColProps: {
-          xs: 24,
-          sm: 24,
-          md: 24,
-          lg: 9,
-          xl: 7,
-          xxl: 4,
-        },
-        schemas:
-          props.formSchemas.length > 0
-            ? props.formSchemas
-            : [
-                {
-                  field: 'starttime_begin',
-                  label: '开始时间',
-                  component: 'DatePicker',
-                  defaultValue: dayjs().startOf('date'),
-                  required: true,
-                  componentProps: {
-                    showTime: true,
-                    valueFormat: 'YYYY-MM-DD HH:mm:ss',
-                    getPopupContainer: getAutoScrollContainer,
-                  },
-                  colProps: {
-                    span: 6,
-                  },
+// 列表页面公共参数、方法
+const { tableContext } = useListPage({
+  tableProps: {
+    // api: list,
+    columns: props.historyColumns ? props.historyColumns : (props.historyColumns as any[]),
+    canResize: true,
+    showTableSetting: false,
+    showActionColumn: false,
+    bordered: false,
+    size: 'small',
+    scroll: tableScroll,
+    showIndexColumn: true,
+    tableLayout: 'auto',
+    formConfig: {
+      labelAlign: 'left',
+      showAdvancedButton: false,
+      showSubmitButton: false,
+      showResetButton: false,
+      baseColProps: {
+        xs: 24,
+        sm: 24,
+        md: 24,
+        lg: 9,
+        xl: 7,
+        xxl: 4,
+      },
+      schemas:
+        props.formSchemas.length > 0
+          ? props.formSchemas
+          : [
+              {
+                field: 'starttime_begin',
+                label: '开始时间',
+                component: 'DatePicker',
+                defaultValue: dayjs().startOf('date'),
+                required: true,
+                componentProps: {
+                  showTime: true,
+                  valueFormat: 'YYYY-MM-DD HH:mm:ss',
+                  getPopupContainer: getAutoScrollContainer,
                 },
-                {
-                  field: 'starttime_end',
-                  label: '结束时间',
-                  component: 'DatePicker',
-                  defaultValue: dayjs(),
-                  required: true,
-                  componentProps: {
-                    showTime: true,
-                    valueFormat: 'YYYY-MM-DD HH:mm:ss',
-                    getPopupContainer: getAutoScrollContainer,
-                  },
-                  colProps: {
-                    span: 6,
-                  },
+                colProps: {
+                  span: 8,
                 },
-                {
-                  label: '连接状态',
-                  field: 'status',
-                  component: 'Select',
-                  defaultValue: 1,
-                  componentProps: () => {
-                    return {
-                      options: [
-                        { label: '连接成功', value: 1 },
-                        { label: '连接失败', value: 0 },
-                      ],
-                    };
-                  },
-                  colProps: {
-                    span: 6,
-                  },
+              },
+              {
+                field: 'starttime_end',
+                label: '结束时间',
+                component: 'DatePicker',
+                defaultValue: dayjs(),
+                required: true,
+                componentProps: {
+                  showTime: true,
+                  valueFormat: 'YYYY-MM-DD HH:mm:ss',
+                  getPopupContainer: getAutoScrollContainer,
                 },
-              ],
-      },
-      // fetchSetting: {
-      pagination: {
-        current: 1,
-        pageSize: 20,
-        pageSizeOptions: ['10', '30', '50', '100'],
-        showQuickJumper: false,
-      },
-
-      beforeFetch() {
-        const newParams = { ...resetFormParam() };
-        // debugger;
-        return newParams;
-      },
+                colProps: {
+                  span: 8,
+                },
+              },
+              {
+                label: '连接状态',
+                field: 'status',
+                component: 'Select',
+                defaultValue: 1,
+                componentProps: {
+                  options: [
+                    { label: '连接成功', value: 1 },
+                    { label: '连接失败', value: 0 },
+                  ],
+                },
+                colProps: {
+                  span: 8,
+                },
+              },
+            ],
     },
-    exportConfig: {
-      name: '历史列表',
-      url: postExportXlsUrl,
+    // fetchSetting: {
+    pagination: {
+      current: 1,
+      pageSize: 20,
+      pageSizeOptions: ['10', '30', '50', '100'],
+      showQuickJumper: false,
     },
-  });
 
-  //注册table数据
-  const [registerTable, { reload, setLoading, getForm, setColumns, getPaginationRef, setPagination }] = tableContext;
+    beforeFetch() {
+      const newParams = { ...resetFormParam() };
+      // debugger;
+      return newParams;
+    },
+  },
+  exportConfig: {
+    name: '历史列表',
+    url: postExportXlsUrl,
+  },
+});
 
-  watchEffect(() => {
-    if (historyTable.value && dataSource) {
-      const data = dataSource.value || [];
-      emit('change', data);
-    }
-  });
+//注册table数据
+const [registerTable, { reload, setLoading, getForm, setColumns, getPaginationRef, setPagination }] = tableContext;
 
-  onMounted(async () => {
-    if (props.stationId) {
-      nextTick(async () => {
-        await getDataSource();
-      });
-    }
-  });
-  defineExpose({ setLoading });
+watchEffect(() => {
+  if (historyTable.value && dataSource) {
+    const data = dataSource.value || [];
+    emit('change', data);
+  }
+});
+
+onMounted(async () => {
+  if (props.stationId) {
+    nextTick(async () => {
+      await getDataSource();
+    });
+  }
+});
+defineExpose({ setLoading });
 </script>
 
 <style scoped lang="less">
-  @import '/@/design/theme.less';
+@import '/@/design/theme.less';
 
-  :deep(.@{ventSpace}-table-body) {
-    height: auto !important;
-  }
-  :deep(.zxm-picker) {
-    height: 30px !important;
-  }
-  .history-table {
-    width: 100%;
-    :deep(.jeecg-basic-table-form-container) {
-      .@{ventSpace}-form {
-        padding: 0 !important;
-        border: none !important;
-        margin-bottom: 0 !important;
-        .@{ventSpace}-picker,
-        .@{ventSpace}-select-selector {
-          width: 100% !important;
-          height: 100%;
-          background: #00000017;
-          border: 1px solid #b7b7b7;
-          input,
-          .@{ventSpace}-select-selection-item,
-          .@{ventSpace}-picker-suffix {
-            color: #fff;
-          }
-          .@{ventSpace}-select-selection-placeholder {
-            color: #ffffffaa;
-          }
-          .@{ventSpace}-zxm-select-selection-item {
-            color: #00000017 !important;
-          }
+:deep(.@{ventSpace}-table-body) {
+  height: auto !important;
+}
+:deep(.zxm-picker) {
+  height: 30px !important;
+}
+.history-table {
+  width: 100%;
+  :deep(.jeecg-basic-table-form-container) {
+    .@{ventSpace}-form {
+      padding: 0 !important;
+      border: none !important;
+      margin-bottom: 0 !important;
+      .@{ventSpace}-picker,
+      .@{ventSpace}-select-selector {
+        width: 100% !important;
+        height: 100%;
+        background: #00000017;
+        border: 1px solid #b7b7b7;
+        input,
+        .@{ventSpace}-select-selection-item,
+        .@{ventSpace}-picker-suffix {
+          color: #fff;
+        }
+        .@{ventSpace}-select-selection-placeholder {
+          color: #ffffffaa;
+        }
+        .@{ventSpace}-zxm-select-selection-item {
+          color: #00000017 !important;
         }
-      }
-      .@{ventSpace}-table-title {
-        min-height: 0 !important;
       }
     }
-    .pagination-box {
-      display: flex;
-      justify-content: flex-end;
-      align-items: center;
-      .page-num {
-        border: 1px solid #0090d8;
-        padding: 4px 8px;
-        margin-right: 5px;
-        color: #0090d8;
-      }
-      .btn {
-        margin-right: 10px;
-      }
+    .@{ventSpace}-table-title {
+      min-height: 0 !important;
+    }
+  }
+  .pagination-box {
+    display: flex;
+    justify-content: flex-end;
+    align-items: center;
+    .page-num {
+      border: 1px solid #0090d8;
+      padding: 4px 8px;
+      margin-right: 5px;
+      color: #0090d8;
+    }
+    .btn {
+      margin-right: 10px;
     }
   }
+}
 </style>
 <style lang="less" scoped>
 :deep(.zxm-picker-dropdown) {

src/views/vent/safetyList/common/detail.vue

@@ -1379,7 +1379,6 @@ onUnmounted(() => {
 
 ::v-deep(.zxm-select:not(.zxm-select-customize-input) .zxm-select-selector) {
   border: 1px solid #3ad8ff77 !important;
-  background-color: #ffffffff !important;
 }
 
 ::v-deep(.zxm-select-selection-item) {