mky-vent-base/src/views/vent/deviceManager/workingFace/CustomNormalTable.vue

<template>
  <div >
    <BasicTable @register="registerTable" :rowSelection="rowSelection">
      <template #tableTitle>
        <a-button preIcon="ant-design:plus-outlined" type="primary" @click="handleAdd">新增</a-button><span style="color: #f00;">（注：新增时请先选择系统类型 <b style="color: rgb(255, 191, 0); font-size: 20px;">↑</b>）</span>
        <a-dropdown v-if="selectedRowKeys.length > 0" :getPopupContainer="getPopupContainer">
          <template #overlay>
            <a-menu>
              <a-menu-item key="1" @click="batchHandleDelete">
                <Icon icon="ant-design:delete-outlined" />
                删除
              </a-menu-item>
            </a-menu>
          </template>
          <a-button
            >批量操作
            <Icon style="fontsize: 12px" icon="ant-design:down-outlined" />
          </a-button>
        </a-dropdown>
      </template>
      <template #action="{ record }">
        <a class="table-action-link" @click="handleEdit(record)">编辑</a>
        <a-popconfirm
          title="确定删除?"
          @confirm="handleDelete(record)"
        >
          <a class="table-action-link">删除</a>
        </a-popconfirm>
        <slot name="action" v-bind="{ record }"></slot>
      </template>
      <template #bodyCell="{ column, record }">
        <slot name="filterCell" v-bind="{ column, record }"></slot>
      </template>
    </BasicTable>
    <DeviceModal @register="registerModal" @saveOrUpdate="saveOrUpdateHandler" :showTab="showTab" :deviceType="deviceType" />
    <!-- <DeviceModal v-model:visible="modalVisible" @saveOrUpdate="saveOrUpdateHandler" @close-modal="closeModal" :showTab="showTab"  /> -->
  </div>
</template>

<script lang="ts" setup>
//ts语法
import { ref, provide, reactive, toRaw, defineExpose, watch } from 'vue';
import { BasicTable, ActionItem, EditRecordRow, BasicColumn } from '/@/components/Table';
import { useModal } from '/@/components/Modal';
import DeviceModal from '../comment/DeviceModal.vue';
// import { getToken } from '/@/utils/auth';
// import { useGlobSetting } from '/@/hooks/setting';
import { getTableHeaderColumns } from '/@/hooks/web/useWebColumns';
import { useListPage } from '/@/hooks/system/useListPage';
import { getPopupContainer } from '/@/utils';
import { message } from 'ant-design-vue';

const props = defineProps({
  columnsType: {
    type: String,
    // required: true,
  },
  columns: {
    type: Array,
    // required: true,
    default: () => [],
  },
  searchFormSchema: {
    type: Array,
    default: () => [],
  },
  formSchema: {
    type: Array,
    required: true,
  },
  list: {
    type: Function,
    required: true,
  },
  getImportUrl: {
    type: String,
  },
  getExportUrl: {
    type: String,
  },
  deleteById: {
    type: Function,
    required: true,
  },
  batchDelete: {
    type: Function,
  },
  saveOrUpdate: {
    type: Function,
    required: true,
  },
  pointList: {
    type: Function,
  },
  showTab: {
    type: Boolean,
    default: false,
  },
  designScope: {
    type: String,
  },
  title: {
    type: String,
  },
  deviceType: {
    type: String,
  },
});

const emit = defineEmits(['submitSuccess', 'editHandler']);

const isUpdate = ref(false);
const record = reactive({});
const formSchemaData = ref(props.formSchema)
const deviceTypeId = ref('')
const pageType = ref('')

watch(() => props.formSchema, (val) => {
  formSchemaData.value = val
})

provide('formSchema', formSchemaData);
provide('isUpdate', isUpdate);
provide('formData', record);
provide('deviceType', props.deviceType);
// const glob = useGlobSetting();
const [registerModal, { openModal, closeModal }] = useModal();

const columnList = getTableHeaderColumns(props.columnsType);

// 列表页面公共参数、方法
const { prefixCls, tableContext, onExportXls, onImportXls, doRequest } = useListPage({
  designScope: props.designScope,
  tableProps: {
    showTableSetting: false,
    title: props.title,
    api: props.list,
    columns: props.columns.length > 0 ? (props.columns as any[]) : columnList,
    // size: 'small',
    // bordered: false,
    formConfig: {
      showAdvancedButton: true,
      // labelWidth: 100,
      labelAlign: 'left',
      labelCol: {
        xs: 24,
        sm: 24,
        md: 24,
        lg: 9,
        xl: 7,
        xxl: 5,
      },
      schemas: props.searchFormSchema as any[],
    },
    useSearchForm: props.searchFormSchema.length > 0 ? true : false,
    striped: true,
    actionColumn: {
      width: 180,
    },
    beforeFetch: (params) => {
      return Object.assign(params, { column: 'createTime', devicekind: props.deviceType });
    },
  },
});


//注册table数据
const [registerTable, { reload, getForm }, { rowSelection, selectedRowKeys }] = tableContext;

const saveOrUpdateHandler = async (params) => {
  try {
    await props.saveOrUpdate(params, isUpdate.value);
    !props.showTab ? closeModal() : '';
    await doRequest(props.list, { confirm: false });
    emit('submitSuccess', params)
  } catch (error) {
    message.error('保存失败，请联系管理员');
  }
};

// const closeModalFn = () => {
//   closeModal()
// }
/**
 * 新增事件
 */
function handleAdd() {
  const searchFormData = getForm().getFieldsValue()
  if(searchFormData && searchFormData['strtype']){
    emit('editHandler', searchFormData)
    for (let key in record) {
      if(key == 'strtype'){
        record[key] = searchFormData['strtype']
      }else{
        delete record[key];
      }
    }
    isUpdate.value = false;
    openModal(true, {
      record: { strtype : searchFormData['strtype'] }
    }, false);
  }else{
    message.info('请先选择系统类型！！')
  }
}

/**
 * 编辑事件
 */
function handleEdit(data) {
  emit('editHandler', data)
  isUpdate.value = true;
  Object.assign(record, toRaw(data));
  openModal(true, {
    record,
  }, false);
}

/**
 * 删除事件
 */
async function handleDelete(record) {
  await props.deleteById({ id: record.id }, reload);
}

/**
 * 批量删除事件
 */
async function batchHandleDelete() {
  doRequest(() => props.batchDelete({ ids: selectedRowKeys.value }));
}
/**
 * 查看
 */
// function handleDetail(record) {
//   iframeUrl.value = `${glob.uploadUrl}/sys/annountCement/show/${record.id}?token=${getToken()}`;
//   openDetail(true);
// }
/**
 * 操作列定义
 * @param record
 */
function getActions(record: EditRecordRow, column: BasicColumn): ActionItem[] {
  return [
    {
      label: '编辑',
      onClick: handleEdit.bind(null, record, column),
    },
    {
      label: '删除',
      popConfirm: {
        title: '是否确认删除',
        confirm: handleDelete.bind(null, record, column),
      },
    },
    // {
    //   label: '查看',
    //   onClick: handleDetail.bind(null, record),
    // },
  ];
}


defineExpose({
  doRequest, onExportXls, onImportXls, reload, getForm
});

</script>

<style scoped lang="less">
  @ventSpace: zxm;
  @vent-table-no-hover: #00bfff10;

  :deep(.@{ventSpace}-table-cell-row-hover) {
    background: #264d8833 !important;
  }
  :deep(.@{ventSpace}-table-row-selected) {
    background: #268bc522 !important;
  }

  :deep(.@{ventSpace}-table-tbody > tr > td) {
    background-color: #0dc3ff05;
  }
  :deep(.jeecg-basic-table-row__striped) {
    td {
      background-color: @vent-table-no-hover !important;
    }
  }
  :deep(.@{ventSpace}-select-dropdown) {
    .@{ventSpace}-select-item-option-selected,
    .@{ventSpace}-select-item-option-active {
      background-color: #ffffff33 !important;
    }

    .@{ventSpace}-select-item:hover {
      background-color: #ffffff33 !important;
    }
  }
</style>