admin-vue3/.vtj/vue/7pdk4mxyf.vue

<template>
  <XGrid
    ref="gridRef"
    :pager="true"
    height="auto"
    :loader="loader"
    :columns="columns"
    :resizable="true"
    :customable="true"
    class="XGrid_1kqd4haeckr">
    <template #toolbar__buttons="scope_1kqd4haeckr">
      <ElInput
        v-model:modelValue="state.keyword"
        placeholder="请输入查询关键字"
        class="ElInput_1mp9b7mk9wj">
        <template #append="scope_1mp9b7mk9wj">
          <ElButton type="primary" @click="search"> 查询</ElButton>
        </template></ElInput
      >
      <ElButton
        icon="Plus"
        type="primary"
        @click="
          (...args: any[]) => click_2ammdsu07o6({ scope_1kqd4haeckr }, args)
        ">
        新增</ElButton
      >
      <ElButton
        icon="Delete"
        type="danger"
        @click="
          (...args: any[]) => click_257nvaelda4({ scope_1kqd4haeckr }, args)
        ">
        批量删除</ElButton
      >
    </template>
    <template #isDefault="scope_1kqd4haeckr">
      <ElTag :type="scope_1kqd4haeckr.row.isDefault ? 'success' : 'info'">
        {{ scope_1kqd4haeckr.row.isDefault ? '是' : '否' }}</ElTag
      >
    </template>
    <template #actions="scope_1kqd4haeckr">
      <XAction
        mode="icon"
        size="default"
        type="primary"
        label="编辑"
        @click="
          (...args: any[]) => click_1ft4np8i6i1({ scope_1kqd4haeckr }, args)
        "></XAction>
      <XAction
        mode="icon"
        size="default"
        type="primary"
        label="设置"
        @click="
          (...args: any[]) => click_1e8ewprm6ts({ scope_1kqd4haeckr }, args)
        "></XAction>
      <XAction
        mode="icon"
        size="default"
        type="danger"
        label="删除"
        @click="
          (...args: any[]) => click_2a1cq8bhwej({ scope_1kqd4haeckr }, args)
        "></XAction> </template
  ></XGrid>
</template>
<script lang="ts">
  // @ts-nocheck
  import { defineComponent, reactive } from 'vue';
  import { XGrid, XAction } from '@vtj/ui';
  import { ElInput, ElButton, ElTag } from 'element-plus';
  import { useProvider } from '@vtj/renderer';
  export default defineComponent({
    name: 'Users',
    components: { XGrid, ElInput, ElButton, ElTag, XAction },
    setup(props) {
      const provider = useProvider({ id: '7pdk4mxyf', version: '1736401534792' });
      const state = reactive<Record<string, any>>({ keyword: '' });
      return { state, props, provider };
    },
    computed: {
      columns() {
        return [
          {
            type: 'checkbox',
            width: 40
          },
          {
            type: 'seq',
            width: 60,
            title: '序号'
          },
          {
            field: 'name',
            title: '名称',
            minWidth: 100
          },
          {
            field: 'label',
            title: '描述',
            minWidth: 100
          },
          {
            field: 'isDefault',
            title: '默认角色',
            minWidth: 100,
            slots: {
              default: 'isDefault'
            }
          },
          {
            field: 'order',
            title: '排序',
            minWidth: 100,
            sortable: true
          },
          {
            field: 'desc',
            title: '备注',
            minWidth: 100
          },
          {
            field: 'createdAt',
            title: '创建时间',
            minWidth: 140
          },
          {
            field: 'actions',
            title: '操作',
            width: 160,
            slots: {
              default: 'actions'
            }
          }
        ];
      }
    },
    methods: {
      async getData(...args: any[]) {
        const mock = this.provider.createMock((params) => {
          const { page = 1, pageSize = 50 } = params || {};
          const total = 1000;
          return {
            [`list|${pageSize}`]: [
              {
                id: '@guid',
                name: '@cname',
                label: '@ctitle',
                'isDefault|1': '@boolean',
                'order|+1': 1,
                desc: '@cparagraph',
                createdAt: '@date(yyyy-MM-dd hh:mm:ss)'
              }
            ],
            total,
            page,
            limit: pageSize
          };
        });
        return await mock.apply(this, args);
      },
      click_2ammdsu07o6({ scope_1kqd4haeckr }, args) {
        return (() => {
          this.$message.info('click add button');
        }).apply(this, args);
      },
      click_257nvaelda4({ scope_1kqd4haeckr }, args) {
        return (() => {
          const rows = this.$refs.gridRef.getSelected();
          if (rows.length) {
            this.$message.info('delete data rows: ' + rows.length);
          } else {
            this.$message.warning('请选择需要删除的数据项');
          }
        }).apply(this, args);
      },
      click_1ft4np8i6i1({ scope_1kqd4haeckr }, args) {
        return (() => {
          this.rowAction(scope_1kqd4haeckr.row);
        }).apply(this, args);
      },
      click_1e8ewprm6ts({ scope_1kqd4haeckr }, args) {
        return (() => {
          this.rowAction(scope_1kqd4haeckr.row);
        }).apply(this, args);
      },
      click_2a1cq8bhwej({ scope_1kqd4haeckr }, args) {
        return (async () => {
          const ret = await this.$confirm('确定删除?', '提示', {
            type: 'warning'
          }).catch(() => false);
          if (ret) {
            this.rowAction(scope_1kqd4haeckr.row);
          }
        }).apply(this, args);
      },
      loader(data) {
        return this.getData(data);
      },
      search() {
        this.$refs.gridRef.search();
      },
      rowAction(row) {
        this.$message.info('click row id: ' + row.id);
      }
    }
  });
</script>
<style lang="scss" scoped>
  .XGrid_1kqd4haeckr {
    background-color: #ffffff;
    padding-top: 10px;
    padding-left: 10px;
    padding-right: 10px;
    padding-bottom: 10px;
    border-radius: 4px 4px 4px 4px;
  }

  .ElInput_1mp9b7mk9wj {
    width: 300px;
    margin-right: 10px;
  }
</style>