添加采集设备页面

master

2022-03-04 8b56ab2d31905c3c7582296e9e0052fe02f45207

 src/cool/modules/huaneng/views/huaneng.vue

@@ -1,122 +1,126 @@
<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: [
            {
               label: "姓名",
               prop: "name",
               component: {
                  name: "el-input"
               }
            },
            {
               label: "名称",
               prop: "title",
               component: {
                  name: "el-input"
               }
            },
            {
               label: "序号",
               prop: "price",
               component: {
                  name: "el-input"
               }
            },
            {
               label: "分类",
               prop: "type",
               component: {
                  name: "el-input"
               }
            }
         ]
      });

      // 表格配置
      const table = reactive<Table>({
         columns: [
            {
               label: "姓名",
               prop: "name"
            },
            {
               label: "设备",
               prop: "title"
            },
            {
               label: "序号",
               prop: "price"
            },
            {
               label: "分类",
               prop: "type"
            },
            {
               label: "操作",
               type: "op"
            }
         ]
      });

      // crud 加载
      function onLoad({ ctx, app }: CrudLoad) {
         console.log(service);

         // 绑定 service
         ctx.service(service.huaneng.huaneng).done();
         app.refresh();
      }

      return {
         refs,
         setRefs,
         upsert,
         table,
         onLoad
      };
   }
});
</script>
<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: [

            {

               label: "姓名",

               prop: "name",

               component: {

                  name: "el-input"

               }

            },

            {

               label: "名称",

               prop: "title",

               component: {

                  name: "el-input"

               }

            },

            {

               label: "序号",

               prop: "price",

               component: {

                  name: "el-input"

               }

            },

            {

               label: "分类",

               prop: "type",

               component: {

                  name: "el-input"

               }

            }

         ]

      });



      // 表格配置

      const table = reactive<Table>({

         columns: [

            {

               type: "selection",

               align: "center"

            },

            {

               label: "姓名",

               prop: "name"

            },

            {

               label: "设备",

               prop: "title"

            },

            {

               label: "序号",

               prop: "price"

            },

            {

               label: "分类",

               prop: "type"

            },

            {

               label: "操作",

               type: "op"

            }

         ]

      });



      // crud 加载

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

         console.log("service", service);



         // 绑定 service

         ctx.service(service.huaneng.huaneng).done();

         app.refresh();

      }



      return {

         refs,

         setRefs,

         upsert,

         table,

         onLoad

      };

   }

});

</script>