4dkk_mp/src/views/workerShare/index.vue

<template>
  <div>
    <BasicTable @register="registerTimeTable">
      <template #toolbar>
        <a-button type="primary" @click="handleCreate" v-if="getCheckPerm('sceneShare-add')">
          新增</a-button
        >
      </template>
      <template #action="{ record }">
        <TableAction
          :actions="[
            {
              label: '删除',
              color: 'error',
              ifShow: getCheckPerm('sceneShare-del'),
              onClick: handleDlet.bind(null, record),
            },
          ]"
        />
      </template>
    </BasicTable>
    <addModal @register="registerAdd" @ok="reload" />
  </div>
</template>
<script lang="ts">
  import { defineComponent } from 'vue';
  import { BasicTable, useTable, FormProps, TableAction } from '/@/components/Table';
  import { userShareList, userShareDel } from '/@/api/account';
  import { userListSchema } from './data';
  import { useI18n } from '/@/hooks/web/useI18n';
  import { useModal } from '/@/components/Modal';
  import { usePermissionStore } from '/@/store/modules/permission';
  import addModal from './addModal.vue';
  import { useMessage } from '/@/hooks/web/useMessage';

  export default defineComponent({
    components: {
      BasicTable,
      TableAction,
      addModal,
    },
    setup() {
      const { t } = useI18n();
      const { createMessage, createConfirm } = useMessage();
      const permissionStore = usePermissionStore();
      const [registerAdd, { openModal: openAddModal }] = useModal();
      const { getCheckPerm } = permissionStore;
      const searchForm: Partial<FormProps> = {
        labelWidth: 100,
        schemas: [
          {
            field: 'ryNickName',
            label: '姓名',
            component: 'Input',
            componentProps: {
              maxLength: 100,
            },
            colProps: {
              xl: 6,
              xxl: 6,
            },
          },
          {
            field: 'ryNo',
            label: '人员编号',
            component: 'Input',
            componentProps: {
              maxLength: 100,
            },
            colProps: {
              xl: 8,
              xxl: 8,
            },
          },
        ],
      };
      const [registerTimeTable, { reload }] = useTable({
        api: userShareList,
        columns: userListSchema,
        useSearchForm: true,
        formConfig: searchForm,
        showTableSetting: true,
        showIndexColumn: false,
        searchInfo: { type: 0 },
        rowKey: 'id',
        fetchSetting: {
          pageField: 'pageNum',
          sizeField: 'pageSize',
          listField: 'list',
          totalField: 'total',
        },
        actionColumn: {
          width: 100,
          title: '操作',
          dataIndex: 'action',
          slots: { customRender: 'action' },
        },
        canResize: true,
      });
      function handleCreate() {
        openAddModal(true, {});
      }
      function tabChange(val: string) {
        console.log('tabChange', val);
        reload();
      }
      function handleOpen(record) {
        console.log('点击了启用', record);
      }
      async function handleDlet(record) {
        createConfirm({
          title: '删除',
          content: `确定要删除 ${record.ryNo} 吗？`,
          onOk: async () => {
            await userShareDel({id: record.id });
            createMessage.success('操作成功');
            reload();
          },
        });
      }
      return {
        registerTimeTable,
        registerAdd,
        handleOpen,
        tabChange,
        reload,
        handleDlet,
        getCheckPerm,
        handleCreate,
        t,
      };
    },
  });
</script>
<style lang="less" scoped>
  .desc-wrap-BasicTable {
    background-color: #f0f2f5;
    .vben-basic-table-form-container {
      padding: 0;
    }
  }
</style>