fix: 更新组件和页面

src/components/Table/src/BasicTable.vue

@@ -379,21 +379,23 @@
 
       .ant-form {
         width: 100%;
-        padding: 12px 10px 6px;
         margin-bottom: 16px;
-        background-color: @component-background;
+        padding: 12px 10px 6px;
         border-radius: 2px;
+        background-color: @component-background;
       }
     }
 
-    .ant-tag {
-      margin-right: 0;
+    .ant-table-cell {
+      .ant-tag {
+        margin-right: 0;
+      }
     }
 
     .ant-table-wrapper {
       padding: 6px;
-      background-color: @component-background;
       border-radius: 2px;
+      background-color: @component-background;
 
       .ant-table-title {
         min-height: 40px;
@@ -419,10 +421,10 @@
 
       &-title {
         display: flex;
+        align-items: center;
+        justify-content: space-between;
         padding: 8px 6px;
         border-bottom: none;
-        justify-content: space-between;
-        align-items: center;
       }
 
       //.ant-table-tbody > tr.ant-table-row-selected td {

src/components/TableCard/src/BasicTable.vue

@@ -75,7 +75,9 @@
   export default defineComponent({
     components: {
       Checkbox,
+      // eslint-disable-next-line vue/no-reserved-component-names
       Table,
+      // eslint-disable-next-line vue/no-reserved-component-names
       Button,
       HeaderCell,
     },
@@ -111,7 +113,7 @@
       const formRef = ref(null);
       const innerPropsRef = ref<Partial<BasicTableProps>>();
 
-      const { prefixCls } = useDesign('basic-table');
+      const { prefixCls } = useDesign('basic-table-card');
       const [registerForm, formActions] = useForm();
 
       const getProps = computed(() => {
@@ -399,7 +401,7 @@
 <style lang="less">
   @border-color: #cecece4d;
 
-  @prefix-cls: ~'@{namespace}-basic-table';
+  @prefix-cls: ~'@{namespace}-basic-table-card';
 
   [data-theme='dark'] {
     .ant-table-tbody > tr:hover.ant-table-row-selected > td,

src/components/XTForm/src/XTForm.vue

@@ -74,6 +74,7 @@
           </div>
           <div v-if="item.componentType == ComponentEnum.IconBtn">
             <div :class="['icon-btn', item.selected ? 'icon-btn--selected' : '']">
+              <div class="icon-btn_count" v-if="item.count">{{ item.count }}</div>
               <i class="iconfont icon-xt-screen_default" @click="handleClick(item)" />
             </div>
           </div>
@@ -135,6 +136,8 @@
       size?: string;
       // filter btn 是否选中
       selected?: string;
+      // iconBtn 数
+      count?: number;
     }>;
   }
   withDefaults(defineProps<Props>(), {
@@ -170,6 +173,7 @@
   }
 
   .icon-btn {
+    position: relative;
     width: 40px;
     height: 40px;
     background: #fff;
@@ -184,6 +188,21 @@
       color: #0075ff;
     }
 
+    &_count {
+      position: absolute;
+      top: 2px;
+      right: 4px;
+      display: block;
+      font-size: 10px;
+      width: 16px;
+      height: 16px;
+      line-height: 14px;
+      color: #fff;
+      background: #ff5d39;
+      border-radius: 8px;
+      border: 1px solid #fff;
+    }
+
     & .iconfont {
       font-size: 24px;
       margin-right: 0;

src/components/XTList/index.ts

@@ -1,4 +1,5 @@
 import List from './src/List.vue';
 import Menu from './src/Menu.vue';
+import Sift from './src/Sift.vue';
 
-export { List, Menu };
+export { List, Menu, Sift };

src/components/XTList/src/Sift.vue

@@ -0,0 +1,87 @@
+<template>
+  <div class="flex sift">
+    <div class="sift-left">
+      <div class="">筛选条件: </div>
+      <div class="sift-item" v-for="item in data" :key="item.label">
+        <span class="sift-item_label">{{ item.label }}: </span>
+        <span class="sift-item_value">{{ item.value }} </span>
+        <i class="iconfont icon-xt-close_default sift-item_icon" @click="handleClose(item)" />
+      </div>
+    </div>
+    <div v-if="data.length" class="sift-right" @click="handleClear"> 清除 </div>
+  </div>
+</template>
+
+<script setup lang="ts">
+  interface Props {
+    tit?: string;
+    data: Array<{
+      field: string;
+      label: string;
+      value: string;
+    }>;
+  }
+
+  withDefaults(defineProps<Props>(), {
+    tit: '筛选条件',
+    data: () => [],
+  });
+  const emit = defineEmits(['close', 'clear']);
+  function handleClose(item) {
+    console.log('🚀 ~ file: Sift.vue:28 ~ handleClose ~ item:', item);
+    emit('close', item);
+  }
+
+  function handleClear() {
+    emit('clear');
+  }
+</script>
+
+<style lang="less" scoped>
+  .sift {
+    display: flex;
+    align-items: center;
+    justify-content: space-between;
+    width: 100%;
+
+    &-left {
+      display: flex;
+      align-items: center;
+    }
+
+    &-right {
+      font-size: 14px;
+      font-weight: 400;
+      color: #0075ff;
+      border-bottom: 1px solid #0075ff;
+      cursor: pointer;
+    }
+
+    &-item {
+      display: flex;
+      align-items: center;
+      justify-content: space-between;
+      margin-left: 8px;
+      padding: 0 8px;
+      min-width: 80px;
+      height: 32px;
+      font-size: 14px;
+      font-weight: 500;
+      color: #000a18;
+      line-height: 32px;
+      background: #e9f5ff;
+      border-radius: 4px;
+
+      &_label {
+        margin-right: 4px;
+      }
+
+      &_icon {
+        margin-left: 8px;
+        font-size: 12px;
+        color: #9198a5;
+        cursor: pointer;
+      }
+    }
+  }
+</style>

src/components/XTTab/src/XTTab.vue

@@ -83,7 +83,6 @@
   // }
   .tab-list {
     display: flex;
-    justify-content: center;
     align-items: center;
 
     &_item {

src/components/XTTitle/src/Title.vue

@@ -0,0 +1,157 @@
+<template>
+  <div class="xt-title">
+    <div class="xt-title_left">
+      <i
+        v-if="goBack"
+        :class="['iconfont xt-title_left-back', 'icon-xt-drawer-return_selected']"
+        @click="$router.go(-1)"
+      />
+      <span>{{ title }}</span>
+      <slot name="title" />
+    </div>
+    <div class="xt-title_right">
+      <slot name="prefix" />
+      <div v-if="rightData" class="flex">
+        <div
+          v-for="item in rightData"
+          :key="item.type"
+          :class="['xt-title_item', item.icon ? 'xt-title_item--icon' : 'xt-title_item--btn']"
+        >
+          <a-upload
+            v-if="item.type == 'upload'"
+            :max-count="1"
+            action="https://www.mocky.io/v2/5cc8019d300000980a055e76"
+          >
+            <i class="iconfont icon-xt-details_upload_default" />
+          </a-upload>
+          <!-- icon-xt-print_default -->
+          <i v-else-if="item.icon" :class="['iconfont', item.icon]" @click="handleClick(item)" />
+          <a-button
+            v-else
+            :type="item.btnType || 'primary'"
+            size="large"
+            @click="handleClick(item)"
+          >
+            <template #icon>
+              <i :class="['iconfont mr-1', item.btnIcon]" />
+            </template>
+            {{ item.btnText }}
+          </a-button>
+        </div>
+      </div>
+      <slot name="suffix" />
+    </div>
+  </div>
+</template>
+
+<script setup lang="ts">
+  interface Props {
+    // 标题
+    title: string | number | undefined;
+    goBack?: boolean;
+    rightData?: Array<{
+      type: string;
+      icon?: string;
+      iconType?: string | 'primary';
+      isBtn: boolean;
+      btnText?: string;
+      btnType?: 'primary' | 'ghost' | 'dashed' | 'link' | 'text' | 'default';
+      btnIcon?: string;
+    }>;
+    upload?: {
+      accept: string;
+      action: string;
+      data: object;
+      maxCount: number;
+    };
+  }
+  withDefaults(defineProps<Props>(), {
+    title: '',
+    goBack: false,
+    // upload: {
+    //   accept:
+    // }
+    rightData: () => [],
+  });
+  const emit = defineEmits(['click']);
+
+  // 回调
+  function handleClick(data) {
+    console.log('🚀 ~ file: Title.vue:55 ~ handleClick ~ data:', data);
+    emit('click', data);
+  }
+</script>
+
+<style lang="less" scoped>
+  .xt-title {
+    display: flex;
+    justify-content: space-between;
+
+    &_left {
+      font-size: 24px;
+      font-weight: 600;
+      color: #000a18;
+      display: flex;
+      align-items: center;
+
+      &-back {
+        font-size: 20px;
+        position: relative;
+        color: #262a41;
+        margin-right: 24px;
+        cursor: pointer;
+
+        &::after {
+          position: absolute;
+          content: '';
+          top: 5px;
+          right: -14px;
+          width: 1px;
+          height: 22px;
+          background: rgb(222 226 231 / 100%);
+          // background: rgb(63, 119, 187);
+        }
+      }
+    }
+
+    &_right {
+      display: flex;
+    }
+
+    &_item {
+      margin-right: 10px;
+      cursor: pointer;
+
+      &--icon {
+        width: 40px;
+        height: 40px;
+        background: #fff;
+        border-radius: 4px;
+        color: #3d4155;
+        text-align: center;
+
+        & .iconfont {
+          font-size: 20px;
+          line-height: 40px;
+        }
+
+        &:hover {
+          color: #0075ff;
+        }
+      }
+
+      &--btn {
+        height: 40px;
+        border-radius: 4px;
+
+        & .iconfont {
+          font-size: 14px;
+        }
+      }
+
+      &:last-child {
+        margin-right: 0;
+      }
+    }
+  }
+</style>

src/views/biz/visit/ready/data.ts

@@ -61,18 +61,18 @@ export const dataFormSchema: FormSchema[] = [
     field: 'configName333',
     label: '有无异常',
     component: 'ApiComplex',
-    componentProps: {
-      placeholder: '请输入异常内容',
-      api: listDictModel,
-      params: {
-        dictCode: 'sys_dict_type',
-      },
-      values: {
-        radioValue: 0,
-        inputValue: '',
-        checkboxValue: [],
-      },
-      defaultValue: '123123',
+    componentProps: ({ formModel }) => {
+      return {
+        placeholder: '请输入异常内容',
+        api: listDictModel,
+        params: {
+          dictCode: 'sys_dict_type',
+        },
+        onChange: e => {
+          console.log('🚀 ~ file: data.ts:81 ~ e:', e);
+          return (formModel['configName333'] = e);
+        },
+      };
     },
   },
   {
@@ -104,6 +104,25 @@ export const dataFormSchema: FormSchema[] = [
       };
     },
   },
+  {
+    field: 'idCard',
+    label: '证件号码',
+    component: 'ApiInputDict',
+    componentProps: ({ formModel }) => {
+      return {
+        placeholder: '请输入异常内容',
+        api: listDictModel,
+        params: {
+          dictCode: 'sys_dict_type',
+          dictSort: true,
+        },
+        onChange: e => {
+          console.log('🚀 ~ file: data.ts:81 ~ e:', e);
+          return (formModel['idCard'] = e);
+        },
+      };
+    },
+  },
   {
     field: 'sort',
     label: '排序',

src/views/biz/visit/ready/index.vue

@@ -1,22 +1,30 @@
 <template>
-  <div>
-    透前准备
+  <div class="m-4">
+    <!-- 透前准备
     <a-button type="primary" @click="plusFn">
       {{ countRef }}
-    </a-button>
-    <XTTab
-      type="illness"
-      :width="120"
-      :selected="tabSelected"
-      :data="tabData"
-      @item-click="callTab"
-    />
+    </a-button> -->
+    <XTTitle title="透析病历" :right-data="titleData" />
+
     <div class="mt-6" />
     <XTTab type="illness11" :selected="tabSelected" :data="tabData1" @item-click="callTab" />
     <div class="mt-6" />
     <div class="mt-6" />
     <XTTab type="illness11" :selected="tabSelected" :data="tabData2" @item-click="callTab" />
     <div class="mt-6" />
+    <div class="flex justify-between my-4">
+      <XTTab
+        type="illness"
+        :width="120"
+        :selected="tabSelected"
+        :data="tabData"
+        @item-click="callTab"
+      />
+      <XTForm :form-data="formData" />
+    </div>
+    <div class="flex">
+      <Sift :data="siftData" />
+    </div>
     <div class="m-6">
       <BasicForm @register="registerForm" @field-value-change="filedChange" />
     </div>
@@ -30,9 +38,6 @@
         </template>
       </BasicTable>
     </div>
-    <div>
-      <XTForm :form-data="formData" />
-    </div>
     <div class="mx-6 my-2">
       <ChartsCard
         title="透前血压趋势"
@@ -54,15 +59,13 @@
     <div class="mx-6 my-2">
       <TimeLine :data="timeLineData" @hover="callHover">
         <template #head>
-          <div class="timeline-outer" v-if="timeOuter">
-            <div
-              class="timeline-outer_item animate__animated animate__slideInLeft"
-              @click="handleAdd"
-              >AVF</div
-            >
-            <div class="timeline-outer_item animate__animated animate__slideInLeft">AVH</div>
-            <div class="timeline-outer_item animate__animated animate__slideInLeft">TCG</div>
-          </div>
+          <transition class="animate__animated animate__slideInLeft">
+            <div class="timeline-outer" v-if="timeOuter">
+              <div class="timeline-outer_item" @click="handleAdd">AVF</div>
+              <div class="timeline-outer_item">AVH</div>
+              <div class="timeline-outer_item">TCG</div>
+            </div>
+          </transition>
         </template>
       </TimeLine>
     </div>
@@ -86,6 +89,7 @@
   import { XTTab } from '/@/components/XTTab/index';
   import { XTCard } from '/@/components/XTCard/index';
   import { XTForm } from '/@/components/XTForm/index';
+  import { XTTitle } from '/@/components/XTTitle/index';
   import { ColorEnum } from '/@/enums/colorEnum';
   import { BasicForm, useForm } from '/@/components/Form';
   import { dataFormSchema, columns } from './data';
@@ -95,10 +99,38 @@
   import DescCard from '/@/components/XTCard/src/DescCard.vue';
   import TimeLine from '/@/components/XTTimeLine/src/TimeLine.vue';
   import List from '/@/components/XTList/src/List.vue';
-  import { TransitionPresets, useTransition } from '@vueuse/core';
+  import { Sift } from '/@/components/XTList/index';
+  // import { TransitionPresets, useTransition } from '@vueuse/core';
 
   const tabSelected = ref('0');
   const dataSource = ref([]);
+  const titleData = [
+    {
+      type: 'import',
+      icon: 'icon-xt-import_default',
+    },
+    {
+      type: 'export',
+      icon: 'icon-xt-export_default',
+    },
+    {
+      type: 'add',
+      btnIcon: 'icon-xt-add_default',
+      btnText: '患者建档',
+    },
+  ];
+  const siftData = [
+    {
+      field: 'gender',
+      label: '性别',
+      value: '男',
+    },
+    {
+      field: 'age',
+      label: '年龄区间',
+      value: '25岁-50岁',
+    },
+  ];
   const chartData = {
     colors: [
       {
@@ -206,7 +238,7 @@
     },
   ];
   const timeOuter = ref(false);
-  onMounted(() => {
+  onMounted(async () => {
     for (let i = 0; i < 10; i++) {
       const obj = {
         createTime: '2023-05-23 10:09:48',
@@ -224,15 +256,28 @@
       };
       dataSource.value.push(obj);
     }
+
+    await setFieldsValue({
+      configName333: {
+        bool: 1,
+        remark: '321321dsada',
+        dictValues: ['DIC_BIZ', '-1'],
+      },
+      configValue: [100, 150],
+      idCard: {
+        input: '测试',
+        dictValue: 'DIC_BIZ',
+      },
+    });
   });
-  const count = ref(0);
-  const countRef = useTransition(count, {
-    duration: 1000,
-    transition: TransitionPresets.easeInCirc,
-  });
-  function plusFn() {
-    count.value = Math.round(Math.random() * 100);
-  }
+  // const count = ref(0);
+  // const countRef = useTransition(count, {
+  //   duration: 1000,
+  //   transition: TransitionPresets.easeInCirc,
+  // });
+  // function plusFn() {
+  //   count.value = Math.round(Math.random() * 100);
+  // }
   // const [registerTable, { reload, getCacheColumns, setColumns }] = useTable({
   const [registerTable] = useTable({
     id: 'sys_config',
@@ -250,10 +295,10 @@
     showIndexColumn: false,
     pagination: false,
     // maxHeight: 350,
-    canResize: true,
+    canResize: false,
   });
 
-  const [registerForm] = useForm({
+  const [registerForm, { setFieldsValue }] = useForm({
     layout: 'vertical',
     labelWidth: '100%',
     baseColProps: {
@@ -373,9 +418,17 @@
       format: 'YYYY-MM-DD',
       valueFormat: 'YYYY-MM-DD',
     },
+    {
+      name: 'text233',
+      componentType: 'RangePicker',
+      placeholder: '请输入',
+      format: 'YYYY-MM-DD',
+      valueFormat: 'YYYY-MM-DD',
+    },
     {
       name: 'filter',
       componentType: 'IconBtn',
+      count: 4,
     },
   ];
   // card 标签组

src/views/monitor/operLog/data.ts

@@ -23,10 +23,10 @@ export const columns: BasicColumn[] = [
   //   title: '方法名称',
   //   dataIndex: 'javaMethod',
   // },
-  // {
-  //   title: '操作日志类型',
-  //   dataIndex: 'type',
-  // },
+  {
+    title: '操作日志类型',
+    dataIndex: 'type',
+  },
   {
     title: '操作时间',
     dataIndex: 'opTime',

src/views/monitor/operLog/index.vue

@@ -1,5 +1,18 @@
 <template>
-  <div>
+  <div class="m-4">
+    <div>
+      <XTTitle title="操作日志" :go-back="true" />
+      <div class="flex items-center justify-between my-4">
+        <XTTab
+          type="opLog"
+          :width="120"
+          :selected="tabSelected"
+          :data="typeOptions"
+          @item-click="callTab"
+        />
+        <XTForm :form-data="formData" @change="callForm" />
+      </div>
+    </div>
     <BasicTable @register="registerTable">
       <template #bodyCell="{ column, record }">
         <template v-if="column.key === 'type'">
@@ -78,6 +91,24 @@
   import { formatDictColor, formatDictValue } from '/@/utils'; //
   import { useDrawer } from '/@/components/Drawer';
 
+  import { XTTitle } from '/@/components/XTTitle/index';
+  import { XTTab } from '/@/components/XTTab/index';
+  import { XTForm } from '/@/components/XTForm/index';
+
+  // formdata
+  const formData = [
+    {
+      name: 'opName',
+      componentType: 'Input',
+      placeholder: '请输入操作名称',
+      width: 200,
+    },
+  ];
+  // tab 切换选中
+  const tabSelected = ref();
+  // 操作名称
+  const opName = ref('');
+
   const typeOptions = ref();
   const responseTypeOptions = ref();
   const resultJsonOptions = ref();
@@ -85,6 +116,11 @@
     typeOptions.value = await listDictModel({ dictCode: 'sys_log_type' });
     responseTypeOptions.value = await listDictModel({ dictCode: 'sys_response_type' });
     resultJsonOptions.value = await listDictModel({ dictCode: 'sys_response_type' });
+    typeOptions.value = typeOptions.value.map(ele => {
+      ele.key = ele.value;
+      return ele;
+    });
+    tabSelected.value = typeOptions.value[0].value;
   });
 
   const { createConfirm, createMessage } = useMessage();
@@ -175,7 +211,7 @@
 
   // 表格请求之前，对参数进行处理, 添加默认 排序
   function handleBeforeFetch(params) {
-    return { ...params, orders: tableSort.value };
+    return { ...params, orders: tableSort.value, type: tabSelected.value, opName: opName.value };
   }
 
   // 弹窗回调事件
@@ -184,4 +220,14 @@
     console.log(values);
     await reload();
   }
+
+  // 组件回调
+  async function callTab(data) {
+    tabSelected.value = data.value;
+    await reload();
+  }
+  async function callForm(data) {
+    opName.value = data.opName;
+    await reload();
+  }
 </script>