new_huozhou_frontend/src/views/performanceIndicator/templateContent/index.vue

<template>
  <PageWrapper dense>
    <!--引用表格-->
    <BasicTable @register="registerTable">
      <template #tableTitle>
        <el-button type="primary" @click="handleAdd" v-if="isShowByRoles('projectContact')">
          新增模板</el-button
        >
      </template>
      <template #action="{ record }">
        <TableAction :actions="getTableAction(record)" />
      </template>
    </BasicTable>
    <detailTemplateContent @register="registerDetail" />
    <modify @register="registerModify" @close="closeModel" />
    <addTemplate ref="addTemplateRef" @success="reload()" />
  </PageWrapper>
</template>

<script lang="ts" name="planSummary" setup>
  //ts语法
  import { BasicTable, useTable, ActionItem, TableAction } from '@/components/Table';
  import { PageWrapper } from '@/components/Page';
  import { useModal } from '@/components/Modal';
  import { ref } from 'vue';
  import { isShowByRoles } from '@/views/projectLib/projectInfo/projectInfo.api';
  import detailTemplateContent from './detailTemplateContent.vue';
  import modify from './modify.vue';
  import { PerformanColumns } from './templateContent.data';
  import { getPerforman } from './templateContent.api';
  import addTemplate from './addTemplate.vue';
  const [registerDetail, { openModal: openModalDetail }] = useModal();
  const [registerModify, { openModal: openModalModify, closeModal: closeModalModify }] = useModal();

  const [registerTable, { reload }] = useTable({
    api: getPerforman,
    columns: PerformanColumns,
    useSearchForm: false,
    pagination: false,
    actionColumn: {
      width: 140,
      title: '操作',
      dataIndex: 'action',
      slots: { customRender: 'action' },
    },
    afterFetch: (data) => {},
    //表单查询项设置
    // formConfig: {
    //   schemas: searchFormSchema,
    // }
  });
  function getTableAction(record): ActionItem[] {
    return [
      {
        label: '详情',
        onClick: handledetail.bind(null, record),
      },
      // {
      //     label: '修改',
      //     ifShow: () => {
      //         return isShowByRoles("manageOrg")
      //     },
      //     onClick: handleModify.bind(null, record),
      // },
    ];
  }
  function handledetail(record) {
    openModalDetail(true, { type: record.type });
    console.log(record);
  }
  // function handleModify(record) {
  //   openModalModify(true,{type:record.type})
  //   console.log(record)
  // }
  function closeModel() {
    closeModalModify();
    reload();
  }
  //新增模板
  const addTemplateRef = ref();
  function handleAdd() {
    addTemplateRef.value.showModal()
  }
</script>

<style scoped></style>