sl-sfy-safety/src/views/message/reportmessage/components/Form.vue

<template>
  <div class="report-list">
    <BasicTable
      :columns="reportDataCol"
      :data-source="formList"
      :row-key="(row) => row.id"
      :action-column="actionColumn"
      :tableSetting="{
        size: false,
        redo: false,
        fullscreen: false,
        striped: false,
        setting: false,
      }"
      :striped="true"
      ref="tableRef"
    >
      <template #tableTitle>
        <el-button type="primary" :icon="Plus" @click="CreateReport(type)">新建报表配置</el-button>
      </template>
      <template #empty>
        <div class="empty-content flex flex-col items-center">
          <span class="empty-text">暂无数据</span>
        </div>
      </template>
    </BasicTable>
    <el-dialog
      v-model="logFormVisible"
      title="推送记录"
      width="800"
      align-center
      :close-on-click-modal="false"
      :destroy-on-close="true"
    >
      <LogForm :statisticType="statisticType" />
    </el-dialog>
  </div>
</template>

<script lang="ts" setup>
  import { h, ref, reactive, watch, onUnmounted } from 'vue';
  import { BasicTable, TableActionIcons, BasicColumn } from '@/components/Table';
  import { reportDataCol } from '../overviewColumns';
  import { Plus } from '@element-plus/icons-vue';
  import logIcon from '@/assets/icons/log.svg';
  import viewIcon from '@/assets/icons/view.svg';
  import editIcon from '@/assets/icons/edit.svg';
  import deleteIcon from '@/assets/icons/delete.svg';
  import { ElMessage, ElMessageBox } from 'element-plus';
  import LogForm from './LogForm.vue';
  import { storeToRefs } from 'pinia';
  import useFormList from '../store/useFormList';
  import { deleteReportConfig } from '@/api/message/report-message';

  const formStore = useFormList();
  const { getForm } = formStore;
  const { type, formList } = storeToRefs(formStore);
  const logFormVisible = ref(false);
  const actionColumn: BasicColumn = reactive({
    width: 224,
    title: '操作',
    prop: 'action',
    key: 'action',
    fixed: 'right',
    render(record) {
      return h(TableActionIcons as any, {
        space: 20,
        color: '#629bf9',
        style: 'img',
        size: 16,
        actionIcons: [
          {
            label: '推送记录',
            icon: logIcon,
            onClick: handleLog.bind(null, record.row),
          },
          {
            label: '查看',
            icon: viewIcon,
            onClick: handleView.bind(null, record.row),
          },
          {
            label: '编辑',
            icon: editIcon,
            onClick: handleEdit.bind(null, record.row),
          },
          {
            label: '删除',
            icon: deleteIcon,
            onClick: handleDelete.bind(null, record.row),
          },
        ],
      });
    },
  });
  import { useRouter } from 'vue-router';
  const router = useRouter();
  const CreateReport = (type) => {
    router.push(`/message/report-config?type=${type}&operationType=1`);
  };
  const statisticType = ref<number>(0);
  const handleLog = (record: Recordable) => {
    logFormVisible.value = true;
    statisticType.value = record.statisticType;
  };
  const handleView = (record: Recordable) => {
    router.push(`/message/report-config?type=${type.value}&statisticType=${record.statisticType}&operationType=2`
    );
  };
  const handleEdit = (record: Recordable) => {
    router.push(
      `/message/report-config?type=${type.value}&statisticType=${record.statisticType}&operationType=3`,
    );
  };
  const handleDelete = (record: Recordable) => {
    ElMessageBox.confirm('删除之后，这条数据无法恢复', '请确认是否删除', {
      confirmButtonText: '确定',
      cancelButtonText: '取消',
      type: 'warning',
    })
      .then(() => {
        deleteReportConfig(type.value, record.statisticType).then(() => {
          ElMessage.success('删除成功');
          getForm(type.value);
        });
      })
      .catch(() => {});
  };
  onUnmounted(() => {
    type.value = 1;
    formList.value = [];
  });
  watch(
    type,
    (newType) => {
      getForm(newType);
    },
    { immediate: true },
  );
</script>

<style lang="scss" scoped>
  .report-list {
    position: relative;
    width: 100%;
  }
  ::v-deep .el-dialog__body {
    height: 600px;
  }
</style>