### Extend BaseService for CRUD Operations (TypeScript)

Source: https://context7.com/cool-team-official/cool-admin-vue/llms.txt

Demonstrates extending the BaseService class to implement custom CRUD operations and custom methods for a UserService. It shows how to define the API namespace and override default methods. Usage examples in a component are also provided.

```typescript
// src/service/user.ts
import { BaseService } from '/@/cool';

class UserService extends BaseService {
  constructor() {
    super('admin/user'); // API namespace: /admin/user/xxx
  }

  // Custom method
  async changePassword(data: { oldPassword: string; newPassword: string }) {
    return this.request({
      url: '/changePassword',
      method: 'POST',
      data
    });
  }

  // Override default methods if needed
  async page(data: any) {
    return this.request({
      url: '/page',
      method: 'POST',
      data: { ...data, includeRoles: true }
    });
  }
}

export default new UserService();

// Usage in component:
import userService from '/@/service/user';

// Standard CRUD operations
await userService.page({ page: 1, size: 20 });
await userService.list({ status: 1 });
await userService.info({ id: 1 });
await userService.add({ name: 'John', email: 'john@example.com' });
await userService.update({ id: 1, name: 'John Doe' });
await userService.delete({ ids: [1, 2, 3] });

// Custom method
await userService.changePassword({
  oldPassword: '123456',
  newPassword: 'newpass123'
});
```

--------------------------------

### Install and Configure Cool-Admin Vue CRUD Plugin

Source: https://context7.com/cool-team-official/cool-admin-vue/llms.txt

This snippet demonstrates how to install and globally register the `@cool-vue/crud` plugin in a Vue 3 application. It includes essential global configuration options for API endpoints, primary IDs, pagination, and styling for form and table components.

```typescript
import {
  createApp
} from 'vue';
import App from './App.vue';
import ElementPlus from 'element-plus';
import {
  Crud
} from '@cool-vue/crud';

const app = createApp(App);

app.use(ElementPlus);
app.use(Crud, {
  // Global configuration options
  dict: {
    primaryId: 'id',
    api: {
      list: 'list',
      add: 'add',
      update: 'update',
      delete: 'delete',
      info: 'info',
      page: 'page'
    },
    pagination: {
      page: 'page',
      size: 'size'
    }
  },
  style: {
    form: {
      labelWidth: '100px',
      span: 24
    },
    table: {
      border: true,
      autoHeight: true
    }
  }
});

app.mount('#app');
```

--------------------------------

### Enable Test Service Mode for Mock Data (Vue)

Source: https://context7.com/cool-team-official/cool-admin-vue/llms.txt

Illustrates how to configure and use the Cool Admin Vue CRUD component with the 'test' service mode. This mode provides mock data for development and prototyping, eliminating the need for a backend. It includes setup for the crud, table, and upsert components.

```vue
<template>
  <cl-crud ref="Crud">
    <cl-row>
      <cl-refresh-btn />
      <cl-add-btn />
      <cl-multi-delete-btn />
      <cl-flex1 />
      <cl-search-key />
    </cl-row>
    <cl-row>
      <cl-table ref="Table" />
    </cl-row>
    <cl-row>
      <cl-flex1 />
      <cl-pagination />
    </cl-row>
    <cl-upsert ref="Upsert" />
  </cl-crud>
</template>

<script setup lang="ts">
import { useCrud, useTable, useUpsert } from '@cool-vue/crud';

// Using test mode - provides mock CRUD operations
const Crud = useCrud(
  { service: 'test' },
  (app) => {
    app.refresh({
      page: 1,
      size: 10,
      status: 1 // Filter by status
    });
  }
);

const Table = useTable({
  autoHeight: false,
  columns: [
    { type: 'selection' },
    { label: 'Name', prop: 'name', minWidth: 140 },
    { label: 'Phone', prop: 'phone', minWidth: 140 },
    { label: 'Account', prop: 'account', minWidth: 140 },
    { label: 'Wages', prop: 'wages', minWidth: 100 },
    { label: 'Status', prop: 'status', minWidth: 80 },
    { label: 'Created', prop: 'createTime', minWidth: 170, sortable: 'desc' },
    { type: 'op', buttons: ['edit', 'delete'] }
  ]
});

const Upsert = useUpsert({
  items: [
    { label: 'Name', prop: 'name', required: true, component: { name: 'el-input' } },
    { label: 'Phone', prop: 'phone', component: { name: 'el-input' } },
    { label: 'Account', prop: 'account', component: { name: 'el-input' } },
    { label: 'Wages', prop: 'wages', component: { name: 'el-input-number' } }
  ]
});
</script>
```

--------------------------------

### Configure CRUD Component Language Labels with TypeScript

Source: https://context7.com/cool-team-official/cool-admin-vue/llms.txt

This snippet demonstrates how to configure language labels for CRUD components in Cool-Admin Vue using TypeScript. It involves importing the `Crud` plugin and providing a dictionary of labels for various operations and messages. This setup allows for easy internationalization of the admin panel.

```typescript
// main.ts
import { Crud } from '@cool-vue/crud';

app.use(Crud, {
  dict: {
    label: {
      op: 'Operation',
      add: 'Add',
      delete: 'Delete',
      multiDelete: 'Delete',
      update: 'Edit',
      refresh: 'Refresh',
      info: 'Details',
      search: 'Search',
      reset: 'Reset',
      clear: 'Clear',
      save: 'Save',
      close: 'Cancel',
      confirm: 'Confirm',
      advSearch: 'Advanced Search',
      searchKey: 'Search Keyword',
      placeholder: 'Please enter',
      tips: 'Tips',
      saveSuccess: 'Save successful',
      deleteSuccess: 'Delete successful',
      deleteConfirm: 'This operation will permanently delete the selected data. Do you want to continue?',
      empty: 'No data available',
      desc: 'Descending',
      asc: 'Ascending',
      select: 'Select',
      deselect: 'Deselect',
      seeMore: 'See more',
      hideContent: 'Hide content',
      nonEmpty: '{label} cannot be empty',
      collapse: 'Collapse',
      expand: 'Expand'
    }
  }
});

```

--------------------------------

### Implement cl-dialog Component (Vue)

Source: https://context7.com/cool-team-official/cool-admin-vue/llms.txt

Shows how to use the cl-dialog component in a Vue application. It covers basic usage, setting dialog properties like title, width, height, and controls. It also demonstrates handling the before-close event and listening for fullscreen changes.

```vue
<template>
  <el-button @click="visible = true">Open Dialog</el-button>

  <cl-dialog
    v-model="visible"
    title="Custom Dialog"
    width="600px"
    height="400px"
    :controls="['fullscreen', 'close']"
    :before-close="handleBeforeClose"
    @fullscreen-change="onFullscreenChange"
  >
    <!-- Dialog content -->
    <div class="dialog-content">
      <p>Your content here...</p>
    </div>

    <!-- Footer slot -->
    <template #footer>
      <el-button @click="visible = false">Cancel</el-button>
      <el-button type="primary" @click="handleSave">Save</el-button>
    </template>
  </cl-dialog>
</template>

<script setup lang="ts">
import { ref } from 'vue';

const visible = ref(false);

function handleBeforeClose(done: () => void) {
  // Confirm before close
  if (confirm('Are you sure?')) {
    done();
  }
}

function onFullscreenChange(isFullscreen: boolean) {
  console.log('Fullscreen:', isFullscreen);
}

function handleSave() {
  console.log('Saving...');
  visible.value = false;
}
</script>
```

--------------------------------

### Configure Table with useTable Hook in Vue.js

Source: https://context7.com/cool-team-official/cool-admin-vue/llms.txt

This snippet demonstrates how to configure a table using the `useTable` hook in Vue.js. It covers setting up columns, enabling features like auto-height, context menus, default sorting, and various column types including selection, index, expand, text, image, dictionary mapping, switch for inline editing, custom formatting, and operation buttons. It also shows how to integrate with `cl-crud` and `cl-row` components.

```vue
<template>
  <cl-crud ref="Crud">
    <cl-row>
      <cl-table ref="Table" @selection-change="onSelectionChange">
        <!-- Custom column slot -->
        <template #column-status="{ scope }">
          <el-tag :type="scope.row.status ? 'success' : 'danger'">
            {{ scope.row.status ? 'Active' : 'Inactive' }}
          </el-tag>
        </template>
      </cl-table>
    </cl-row>
  </cl-crud>
</template>

<script setup lang="ts">
import { useCrud, useTable } from '@cool-vue/crud';

const Crud = useCrud({ service: 'test' }, (app) => app.refresh());

const Table = useTable({
  // Auto-calculate table height based on viewport
  autoHeight: true,

  // Right-click context menu options
  contextMenu: ['refresh', 'edit', 'delete', 'order-asc', 'order-desc'],

  // Default sort configuration
  defaultSort: { prop: 'createTime', order: 'descending' },

  columns: [
    // Selection column for batch operations
    { type: 'selection', width: 60 },

    // Index column
    { type: 'index', label: '#', width: 60 },

    // Expand column for row details
    { type: 'expand', prop: 'detail', width: 60 },

    // Basic text column
    {
      label: 'Name',
      prop: 'name',
      minWidth: 140,
      sortable: true,

      // Inline search component
      search: {
        component: {
          name: 'el-input',
          props: { placeholder: 'Search name', clearable: true }
        }
      }
    },

    // Column with image component
    {
      label: 'Avatar',
      prop: 'avatar',
      width: 100,
      component: {
        name: 'cl-image',
        props: { size: 40 }
      }
    },

    // Column with dictionary mapping
    {
      label: 'Status',
      prop: 'status',
      minWidth: 100,
      dict: [
        { label: 'Active', value: 1, type: 'success' },
        { label: 'Inactive', value: 0, type: 'danger' }
      ],
      dictColor: true // Apply tag colors from dict
    },

    // Column with switch component for inline editing
    {
      label: 'Enabled',
      prop: 'enabled',
      width: 100,
      component: {
        name: 'cl-switch'
      }
    },

    // Sortable column with custom formatter
    {
      label: 'Amount',
      prop: 'amount',
      minWidth: 120,
      sortable: 'custom',
      formatter: (row) => `$${row.amount.toFixed(2)}`
    },

    // Date column with default descending sort
    {
      label: 'Created At',
      prop: 'createTime',
      minWidth: 170,
      sortable: 'desc'
    },

    // Operation column with action buttons
    {
      type: 'op',
      width: 200,
      // Static buttons
      // buttons: ['info', 'edit', 'delete'],

      // Dynamic buttons based on row data
      buttons({ scope }) {
        const btns = ['edit', 'delete'];
        if (scope.row.status === 1) {
          btns.push({
            label: 'Disable',
            type: 'warning',
            onClick() {
              console.log('Disable:', scope.row);
            }
          });
        }
        return btns;
      }
    }
  ]
});

function onSelectionChange(selection: any[]) {
  console.log('Selected rows:', selection);
}
</script>
```

--------------------------------

### Create and Manage Form Dialogs with useForm Hook (Vue.js)

Source: https://context7.com/cool-team-official/cool-admin-vue/llms.txt

Demonstrates how to use the `useForm` hook to open a form dialog, configure its title, width, pre-fill data, define form items including tabs and conditional fields, and handle form events like opening, closing, and submission. This hook is essential for building interactive forms within the Cool Admin Vue framework.

```vue
<template>
  <el-button @click="openForm">Open Form</el-button>
  <cl-form ref="Form" />
</template>

<script setup lang="ts">
import { useForm } from '@cool-vue/crud';

const Form = useForm();

function openForm() {
  Form.value?.open({
    title: 'User Profile',
    width: '600px',

    // Pre-fill form data
    form: {
      name: 'John Doe',
      age: 25
    },

    // Form items configuration
    items: [
      // Tabs for grouping
      {
        type: 'tabs',
        props: {
          type: 'card',
          labels: [
            { label: 'Basic Info', value: 'basic' },
            { label: 'Contact', value: 'contact' }
          ]
        }
      },

      // Basic group items
      {
        label: 'Name',
        prop: 'name',
        group: 'basic',
        required: true,
        component: {
          name: 'el-input',
          props: {
            placeholder: 'Enter name',
            clearable: true,
            onChange(value: string) {
              console.log('Name changed:', value);
            }
          }
        }
      },
      {
        label: 'Age',
        prop: 'age',
        group: 'basic',
        value: 18, // Default value
        component: {
          name: 'el-input-number',
          props: { min: 0, max: 150 }
        }
      },
      {
        label: 'Avatar',
        prop: 'avatar',
        group: 'basic',
        component: {
          name: 'cl-upload',
          props: { limit: 1 }
        }
      },

      // Contact group items
      {
        label: 'Email',
        prop: 'email',
        group: 'contact',
        rules: [
          { required: true, message: 'Email is required' },
          { type: 'email', message: 'Invalid email format' }
        ],
        component: {
          name: 'el-input',
          props: { type: 'email' }
        }
      },
      {
        label: 'Phone',
        prop: 'phone',
        group: 'contact',
        component: { name: 'el-input' }
      },

      // Conditionally hidden field
      {
        label: 'Notes',
        prop: 'notes',
        hidden: ({ scope }) => scope.age < 18,
        component: {
          name: 'el-input',
          props: { type: 'textarea', rows: 3 }
        }
      }
    ],

    // Form operation buttons
    op: {
      saveButtonText: 'Submit',
      closeButtonText: 'Cancel',
      buttons: ['save', 'close']
    },

    // Event handlers
    on: {
      open(form) {
        console.log('Form opened with:', form);
      },
      close(action, done) {
        if (action === 'close') {
          // Optionally confirm before closing
          done();
        } else {
          done();
        }
      },
      submit(data, { done, close }) {
        console.log('Form submitted:', data);
        // Simulate API call
        setTimeout(() => {
          close(); // Close form on success
        }, 1000);
      }
    }
  });
}
</script>
```

--------------------------------

### Implement Advanced Search Panel with useAdvSearch Hook in Vue

Source: https://context7.com/cool-team-official/cool-admin-vue/llms.txt

The `useAdvSearch` hook provides a slide-out advanced search panel for complex filtering scenarios in Cool Admin Vue. It allows for a more extensive set of form fields to be presented to the user for detailed data filtering. This hook integrates with the CRUD components for a cohesive user experience.

```vue
<template>
  <cl-crud ref="Crud">
    <cl-row>
      <cl-refresh-btn />
      <cl-flex1 />
      <cl-search-key />
      <cl-adv-btn />
    </cl-row>
    <cl-row>
      <cl-table ref="Table" />
    </cl-row>
    <cl-adv-search ref="AdvSearch" />
  </cl-crud>
</template>

<script setup lang="ts">
import { useCrud, useTable, useAdvSearch } from '@cool-vue/crud';

const Crud = useCrud({ service: 'test' }, (app) => app.refresh());

const Table = useTable({
  autoHeight: false,
  columns: [
    { label: 'Name', prop: 'name', minWidth: 140 },
    { label: 'Email', prop: 'email', minWidth: 200 },
    { label: 'Phone', prop: 'phone', minWidth: 140 },
    { label: 'Status', prop: 'status', minWidth: 100 }
  ]
});

const AdvSearch = useAdvSearch({
  items: [
    {
      label: 'Name',
      prop: 'name',
      component: {
        name: 'el-input',
        props: { clearable: true }
      }
    },
    {
      label: 'Email',
      prop: 'email',
      component: {
        name: 'el-input',
        props: { clearable: true }
      }
    },
    {
      label: 'Phone',
      prop: 'phone',
      component: {
        name: 'el-input',
        props: { clearable: true }
      }
    },
    {
      label: 'Status',
      prop: 'status',
      // Hook for value transformation
      hook: { bind: 'string' },
      component: {
        name: 'el-select',
        props: { clearable: true },
        options: [
          { label: 'Active', value: '1' },
          { label: 'Inactive', value: '0' }
        ]
      }
    },
    {
      label: 'Created Date',
      prop: 'createTime',
      component: {
        name: 'el-date-picker',
        props: {
          type: 'daterange',
          valueFormat: 'YYYY-MM-DD'
        }
      }
    }
  ]
});
</script>
```

--------------------------------

### Implement Search Panel with useSearch Hook in Vue

Source: https://context7.com/cool-team-official/cool-admin-vue/llms.txt

The `useSearch` hook in Cool Admin Vue allows for the creation of a search panel within a CRUD interface. It supports various form components, custom layouts, and event handlers for search actions. This hook is useful for filtering table data based on user input.

```vue
<template>
  <cl-crud ref="Crud">
    <cl-row>
      <cl-search ref="Search">
        <template #buttons="form">
          <el-button type="warning" @click="exportData(form)">Export</el-button>
        </template>
      </cl-search>
    </cl-row>
    <cl-row>
      <cl-table ref="Table" />
    </cl-row>
    <cl-row>
      <cl-flex1 />
      <cl-pagination />
    </cl-row>
  </cl-crud>
</template>

<script setup lang="ts">
import { useCrud, useTable, useSearch } from '@cool-vue/crud';

const Crud = useCrud({ service: 'test' }, (app) => app.refresh());

const Table = useTable({
  autoHeight: false,
  columns: [
    { label: 'Name', prop: 'name', minWidth: 140 },
    { label: 'Status', prop: 'status', minWidth: 100 },
    { label: 'Created', prop: 'createTime', minWidth: 170 }
  ]
});

const Search = useSearch({
  // Enable collapse mode for many fields
  collapse: false,

  // Show reset button
  resetBtn: true,

  // Pre-fill search values
  data: {
    status: 1
  },

  // Search form items
  items: [
    {
      label: 'Name',
      prop: 'name',
      component: {
        name: 'el-input',
        props: {
          clearable: true,
          // Auto-search on value change
          onChange(val: string) {
            Crud.value?.refresh({ name: val, page: 1 });
          }
        }
      }
    },
    {
      label: 'Status',
      prop: 'status',
      component: {
        name: 'el-select',
        props: { clearable: true },
        options: [
          { label: 'Active', value: 1 },
          { label: 'Inactive', value: 0 }
        ]
      }
    },
    {
      label: 'Date Range',
      prop: 'dateRange',
      component: {
        name: 'el-date-picker',
        props: {
          type: 'daterange',
          valueFormat: 'YYYY-MM-DD'
        }
      }
    }
  ],

  // Called when form loads
  onLoad(data) {
    console.log('Search form initialized:', data);
  },

  // Custom search handler
  onSearch(form, { next }) {
    console.log('Searching with:', form);
    // Modify params or add custom logic
    next({ ...form, customParam: 'value' });
  },

  // Called when any field changes
  onChange(data, prop) {
    console.log(`Field ${prop} changed:`, data[prop]);
  }
});

function exportData(form: any) {
  console.log('Exporting with filters:', form);
}
</script>
```

--------------------------------

### Implement Data Management with useCrud Hook in Vue

Source: https://context7.com/cool-team-official/cool-admin-vue/llms.txt

This Vue component utilizes the `useCrud` hook to manage data operations and UI components like tables, forms, and search panels. It shows how to bind to a backend service, define custom hooks for refresh and delete operations, and programmatically control CRUD actions.

```vue
<template>
  <cl-crud ref="Crud">
    <cl-row>
      <cl-refresh-btn />
      <cl-add-btn />
      <cl-multi-delete-btn />
      <cl-flex1 />
      <cl-search-key placeholder="Search by name or phone" />
    </cl-row>

    <cl-row>
      <cl-table ref="Table" />
    </cl-row>

    <cl-row>
      <cl-flex1 />
      <cl-pagination />
    </cl-row>

    <cl-upsert ref="Upsert" />
  </cl-crud>
</template>

<script setup lang="ts">
import {
  useCrud,
  useTable,
  useUpsert
} from '@cool-vue/crud';
import {
  useCool
} from '/@/cool';

const {
  service
} = useCool();

// Initialize CRUD with service binding
const Crud = useCrud(
  {
    // Bind to backend service (e.g., service.user.info)
    service: service.user.info,

    // Optional: Custom refresh hook
    async onRefresh(params, { next, done, render }) {
      // Modify params before request
      const res = await next({ ...params, status: 1 });
      console.log('Data loaded:', res);
    },

    // Optional: Custom delete hook
    onDelete(selection, { next }) {
      // Custom confirmation or logic before delete
      next({ ids: selection.map(e => e.id) });
    }
  },
  (app) => {
    // Callback after CRUD is ready - initial data fetch
    app.refresh({
      page: 1,
      size: 20
    });
  }
);

// Programmatic refresh
function refreshList() {
  Crud.value?.refresh({ page: 1 });
}

// Access CRUD methods
function addNewItem() {
  Crud.value?.rowAdd();
}
</script>
```

--------------------------------

### Vue useUpsert Hook for CRUD Operations

Source: https://context7.com/cool-team-official/cool-admin-vue/llms.txt

Demonstrates the implementation of the useUpsert hook in a Vue.js component for handling add, edit, and info operations. It configures table columns, form items with dynamic visibility, dialog settings, and various lifecycle hooks for data persistence and user interaction.

```vue
<template>
  <cl-crud ref="Crud">
    <cl-row>
      <cl-add-btn />
      <cl-table ref="Table" />
    </cl-row>
    <cl-upsert ref="Upsert" />
  </cl-crud>
</template>

<script setup lang="ts">
import { useCrud, useTable, useUpsert } from '@cool-vue/crud';
import { ElMessage, ElMessageBox } from 'element-plus';

const Crud = useCrud({ service: 'test' }, (app) => app.refresh());

const Table = useTable({
  autoHeight: false,
  columns: [
    { label: 'Name', prop: 'name', minWidth: 140 },
    { label: 'Email', prop: 'email', minWidth: 200 },
    { type: 'op', buttons: ['edit', 'delete', 'info'] }
  ]
});

const Upsert = useUpsert({
  // Form items (same as useForm)
  items: [
    {
      label: 'Name',
      prop: 'name',
      required: true,
      component: { name: 'el-input' }
    },
    {
      label: 'Email',
      prop: 'email',
      rules: [{ type: 'email', message: 'Invalid email' }],
      component: { name: 'el-input' }
    },
    // Dynamic item based on mode
    () => ({
      label: 'Password',
      prop: 'password',
      // Hide password field in update mode
      hidden: Upsert.value?.mode === 'update',
      component: {
        name: 'el-input',
        props: { type: 'password', showPassword: true }
      }
    })
  ],

  // Dialog configuration
  dialog: {
    width: '500px'
  },

  // Sync mode: wait for data before opening dialog
  sync: true,

  // Called when editing - fetch full record
  onInfo(data, { next, done }) {
    // Option 1: Use default info API
    // next({ id: data.id });

    // Option 2: Use list data directly
    done(data);
  },

  // Called on form submit
  onSubmit(data, { next, done, close }) {
    console.log('Submitting:', data);
    // Continue with default save API
    next(data);

    // Or use custom API:
    // service.user.save(data).then(() => {
    //   ElMessage.success('Saved!');
    //   close();
    // }).catch(() => done());
  },

  // Called after dialog opens and data loads
  onOpened(data) {
    console.log('Dialog opened with data:', data);
  },

  // Called before dialog closes
  onClose(action, done) {
    if (action === 'close' && Upsert.value?.mode === 'update') {
      ElMessageBox.confirm('Discard changes?', 'Warning', { type: 'warning' })
        .then(() => done())
        .catch(() => {});
    } else {
      done();
    }
  }
});

// Programmatic operations
function addUser() {
  Upsert.value?.add();
}

function editUser(row: any) {
  Upsert.value?.edit(row);
}

function viewUser(row: any) {
  Upsert.value?.info(row);
}
</script>
```

=== COMPLETE CONTENT === This response contains all available snippets from this library. No additional content exists. Do not make further requests.