hldy_yunwei_vue/src/views/internaltool/cleanAdvisory/index.vue

<template>
  <div>
    <!--引用表格-->
    <BasicTable @register="registerTable" style="padding: 0 !important;">
      <!--插槽:table标题-->
      <template #tableTitle>
      </template>
      <!--操作栏-->
      <template #action="{ record }">
        <TableAction :actions="getTableAction(record)" />
      </template>
      <template v-slot:bodyCell="{ column, record, index, text }">
        <template v-if="column.dataIndex === 'type1'">
          <span style="color: red;font-weight: 700;font-size: 16px;" v-if="text == '0'">×</span>
          <span style="color: green;font-weight: 700;font-size: 16px;" v-else-if="text == '1'">√</span>
        </template>
        <template v-if="column.dataIndex === 'type2'">
          <span style="color: red;font-weight: 700;font-size: 16px;" v-if="text == '0'">×</span>
          <span style="color: green;font-weight: 700;font-size: 16px;" v-else-if="text == '1'">√</span>
        </template>
        <template v-if="column.dataIndex === 'type3'">
          <span style="color: red;font-weight: 700;font-size: 16px;" v-if="text == '0'">×</span>
          <span style="color: green;font-weight: 700;font-size: 16px;" v-else-if="text == '1'">√</span>
        </template>
        <template v-if="column.dataIndex === 'type4'">
          <span style="color: red;font-weight: 700;font-size: 16px;" v-if="text == '0'">×</span>
          <span style="color: green;font-weight: 700;font-size: 16px;" v-else-if="text == '1'">√</span>
        </template>
      </template>
    </BasicTable>
  </div>
</template>

<script lang="ts" name="internaltool-clean-advisory" setup>
import { ref, reactive } from 'vue';
import { BasicTable, useTable, TableAction } from '/@/components/Table';
import { useListPage } from '/@/hooks/system/useListPage';
import { columns, formSchema } from './cleanadvisory.data';
import { list, dataClean, dataDelete } from './cleanadvisory.api';

const props = defineProps({
  serverType: '',
});

const queryParam = reactive<any>({});
//注册table数据
const { prefixCls, tableContext, onExportXls, onImportXls } = useListPage({
  tableProps: {
    title: '入驻咨询表',
    api: list,
    columns: columns,
    formConfig: {
      schemas: formSchema
    },
    actionColumn: {
      width: 380,
    },
    canResize: false,
    useSearchForm: true,
    showTableSetting: false,
    showActionColumn: true,
    showIndexColumn: true,
    beforeFetch: async (params) => {
      queryParam.serverType = props.serverType
      return Object.assign(params, queryParam);
    },
  },
});
const [registerTable, { reload, collapseAll, updateTableDataRecord, findTableDataRecord, getDataSource }, { rowSelection, selectedRowKeys }] = tableContext;

/**
 * 成功回调
 */
function handleSuccess() {
  (selectedRowKeys.value = []) && reload();
}

/**
 * 查询
 */
function searchQuery() {
  reload();
}

async function handleClean(record, type) {
  console.log("🚀 ~ handleClean ~ record:", record)
  record.advisoryType = type;
  await dataClean(record, handleSuccess);
}

async function handleDelete(record, type) {
  console.log("🚀 ~ handleDelete ~ record:", record)
  await dataDelete(record, handleSuccess);
}

/**
 * 操作栏
 */
function getTableAction(record) {
  return [
    {
      label: '清除员工',
      popConfirm: {
        title: '是否确认清除员工',
        confirm: handleClean.bind(null, record, '2'),
        placement: 'topLeft',
      },
      ifShow: record.type1 == '1'
    },
    {
      label: '清除供应商',
      popConfirm: {
        title: '是否确认清除供应商',
        confirm: handleClean.bind(null, record, '4'),
        placement: 'topLeft',
      },
      ifShow: record.type2 == '1'
    },
    {
      label: '清除机构',
      popConfirm: {
        title: '是否确认清除机构',
        confirm: handleClean.bind(null, record, '3'),
        placement: 'topLeft',
      },
      ifShow: record.type3 == '1'
    },
    {
      label: '清除长者',
      popConfirm: {
        title: '是否确认清除长者',
        confirm: handleClean.bind(null, record, '1'),
        placement: 'topLeft',
      },
      ifShow: record.type4 == '1'
    },
    {
      label: '清除所有',
      popConfirm: {
        title: '是否确认清除所有',
        confirm: handleDelete.bind(null, record, '-1'),
        placement: 'topLeft',
      },
    },
  ];
}

defineExpose({
  searchQuery
});

</script>

<style lang="less" scoped>
.jeecg-basic-table-form-container {
  padding: 0;

  .table-page-search-submitButtons {
    display: block;
    margin-bottom: 24px;
    white-space: nowrap;
  }

  .query-group-cust {
    min-width: 100px !important;
  }

  .query-group-split-cust {
    width: 30px;
    display: inline-block;
    text-align: center
  }

  .ant-form-item:not(.ant-form-item-with-help) {
    margin-bottom: 16px;
    height: 32px;
  }

  :deep(.ant-picker),
  :deep(.ant-input-number) {
    width: 100%;
  }
}

:deep(.ant-table-title) {
  display: none !important;
}

:deep(.darkened-table) {
  .ant-table-thead>tr>th {
    background-color: #dadadaee;
  }

  .ant-table-tbody>tr>td {
    background-color: #f3f3f3f5;
  }

}

:deep(.z-table-class) {
  .ant-table-thead>tr>th {
    background-color: #e6f0fd;
  }

  .ant-table-tbody>tr>td {
    background-color: #FBFBFB;
  }
}
</style>