添加设备分组页面以及功能

master

2022-03-08 f9c926251d45fb4930317c545d2d77b5f1a338a9

 src/cool/modules/immediateTask/views/immediateTask.vue

@@ -1,5 +1,70 @@
<template>

  <div>

    即时任务

  </div>

</template>
  <cl-crud :ref="setRefs('crud')"

           @load="onLoad">

    <el-row type="flex"

            align="middle">

      <!-- 刷新按钮 -->

      <cl-refresh-btn />

      <!-- 新增按钮 -->

      <cl-add-btn />

      <!-- 删除按钮 -->

      <cl-multi-delete-btn />

      <cl-flex1 />

      <!-- 关键字搜索 -->

      <cl-search-key />

    </el-row>



    <el-row>

      <!-- 数据表格 -->

      <cl-table :ref="setRefs('table')"

                v-bind="table" />

    </el-row>



    <el-row type="flex">

      <cl-flex1 />

      <!-- 分页控件 -->

      <cl-pagination />

    </el-row>



    <!-- 新增、编辑 -->

    <cl-upsert :ref="setRefs('upsert')"

               v-bind="upsert" />

  </cl-crud>

</template>



<script lang="ts">

import { defineComponent, reactive } from "vue";

import { CrudLoad, Upsert, Table } from "@cool-vue/crud/types";

import { useCool } from "/@/cool";



export default defineComponent({

   setup() {

      const { refs, setRefs, service } = useCool();



      // 新增、编辑配置

      const upsert = reactive<Upsert>({

         items: []

      });



      // 表格配置

      const table = reactive<Table>({

         columns: []

      });



      // crud 加载

      function onLoad({ ctx, app }: CrudLoad) {

         // 绑定 service

         ctx.service(service.xx).done();

         app.refresh();

      }



      return {

         refs,

         setRefs,

         upsert,

         table,

         onLoad

      };

   }

});

</script>