xt-front/src/views/biz/engineer/water/treatmentList/index.vue

<template>
  <div>
    <div class="flex justify-between mb-4">
      <div>
        <a-button type="primary" size="large" class="btn-add" @click="handleCreate"
          ><template #icon> <Icon icon="icon-xt-add_default|iconfont" /> </template
          >新增检查</a-button
        >
      </div>
      <div>
        <XTForm :form-data="formData" @change="callForm" />
      </div>
    </div>
    <BasicTable @register="registerTable">
      <template #bodyCell="{ column, record }">
        <template v-if="column.key === 'examinerTime'">
          {{ dayjs(record.examinerTime).format('YYYY-MM-DD') }}
        </template>
        <template v-for="item in dataFiled" :key="item">
          <template v-if="item === 'systemDisinfection' || item === 'filterReplacement'">
            <template v-if="column.key === item">
              <span>{{ record.checkContent[item] === 1 ? '是' : '否' }}</span>
            </template>
          </template>
          <template v-else>
            <template v-if="column.key === item">
              <span>{{ record.checkContent[item] === 1 ? '合格' : '不合格' }}</span>
            </template>
          </template>
        </template>
      </template>
    </BasicTable>
    <FormDrawer @register="registerDrawer" @success="callSuccess" />
    <!--  @cancel="handleCancel"  -->
  </div>
</template>
<script lang="ts" setup>
  import { onBeforeMount, reactive, ref } from 'vue';
  import { XTForm } from '/@/components/XTForm/index';
  import { useDrawer } from '/@/components/Drawer';
  import FormDrawer from './formDrawer.vue';
  import { BasicTable, useTable } from '/@/components/Table';
  import Icon from '/@/components/Icon/index';
  import { columns, dataFiled } from './data';
  import { waterTreatmentQueryPage } from '/@/api/biz/engineer/waterTreatmentApi';
  import dayjs from 'dayjs';

  const props = defineProps({
    info: {
      type: Object,
      default: () => {},
    },
  });
  const [registerDrawer, { openDrawer }] = useDrawer();
  const tableSort = ref([
    {
      field: 'create_time',
      direction: 'DESC',
    },
  ]) as any;

  // formdata
  const formData = [
    {
      name: 'patrolTime',
      label: '检查时间',
      componentType: 'RangePicker',
      placeholder: '请选择检查时间',
      format: 'YYYY-MM-DD',
      valueFormat: 'YYYY-MM-DD',
    },
  ];
  const formValue = reactive({
    patrolTime: [],
    maintainCompany: '',
  });

  const [registerTable, { reload }] = useTable({
    api: waterTreatmentQueryPage,
    rowKey: 'id',
    columns,
    showIndexColumn: false,
    bordered: true,
    striped: false,
    // actionColumn: {
    //   width: 100,
    //   title: '操作',
    //   dataIndex: 'action',
    // },
    beforeFetch: handleBeforeFetch,
  });
  onBeforeMount(async () => {});
  // 新增按钮事件
  function handleCreate() {
    openDrawer(true, {
      isUpdate: false,
      record: { id: props.info.id },
    });
  }

  // 表格请求之前，对参数进行处理, 添加默认 排序
  function handleBeforeFetch(params) {
    return {
      ...params,
      orders: tableSort.value,
      deviceId: props.info?.id,
      maintainTime:
        formValue.patrolTime && formValue.patrolTime.length > 0
          ? [
              formValue.patrolTime[0],
              dayjs(formValue.patrolTime[1]).add(1, 'day').format('YYYY-MM-DD'),
            ]
          : undefined,
      maintainCompany: formValue.maintainCompany,
    };
  }

  // 弹窗回调事件
  async function callSuccess() {
    await reload();
  }

  // 查询回调
  async function callForm(data) {
    formValue.maintainCompany = data.maintainCompany || '';
    formValue.patrolTime = data.patrolTime || [];
    await reload();
  }
</script>
<style lang="less" scoped>
  ::v-deep(.ant-btn-link) {
    color: rgb(61 65 85 / 100%);
  }

  ::v-deep(.ant-input) {
    border-color: #c2ccd4;
    border-radius: 4px;
  }

  ::v-deep(.ant-input-affix-wrapper) {
    border-color: #c2ccd4;
    border-radius: 4px;
  }

  ::v-deep(.ant-picker) {
    border-color: #c2ccd4;
    border-radius: 4px;
  }

  ::v-deep(.ant-table-tbody > tr > td) {
    border-right: 0 !important;
    border-left: 0 !important;
    border-bottom: 1px solid #f0f0f0;
  }

  ::v-deep(.ant-table-wrapper table) {
    border: 0;
  }

  ::v-deep(.ant-table-cell-fix-right-first::after, .ant-table-cell-fix-right-last::after) {
    content: '';
    top: auto;
    width: 0;
  }

  .btn-add {
    width: 120px;
    border-radius: 4px;
  }
</style>