| | |
|---|
| | | <template>
|
|---|
| | | <div>
|
|---|
| | | <h1>设备分组页面</h1>
|
|---|
| | | </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: [
|
|---|
| | | {
|
|---|
| | | label: "逻辑ID",
|
|---|
| | | prop: "logic_id",
|
|---|
| | | component: {
|
|---|
| | | name: "el-input"
|
|---|
| | | },
|
|---|
| | | required: true
|
|---|
| | | },
|
|---|
| | | {
|
|---|
| | | label: "配置人名称",
|
|---|
| | | prop: "configurator",
|
|---|
| | | component: {
|
|---|
| | | name: "el-input"
|
|---|
| | | },
|
|---|
| | | required: true
|
|---|
| | | },
|
|---|
| | | {
|
|---|
| | | label: "备注",
|
|---|
| | | prop: "remark",
|
|---|
| | | component: {
|
|---|
| | | name: "el-input"
|
|---|
| | | }
|
|---|
| | | },
|
|---|
| | | {
|
|---|
| | | label: "状态",
|
|---|
| | | prop: "status",
|
|---|
| | | component: {
|
|---|
| | | name: "el-input"
|
|---|
| | | }
|
|---|
| | | }
|
|---|
| | | ]
|
|---|
| | | });
|
|---|
| | |
|
|---|
| | | // 表格配置
|
|---|
| | | const table = reactive<Table>({
|
|---|
| | | columns: [
|
|---|
| | | {
|
|---|
| | | type: "selection",
|
|---|
| | | align: "center"
|
|---|
| | | },
|
|---|
| | | {
|
|---|
| | | label: "序号",
|
|---|
| | | prop: "id",
|
|---|
| | | sortable: true //是否排序功能
|
|---|
| | | },
|
|---|
| | | {
|
|---|
| | | label: "逻辑ID",
|
|---|
| | | prop: "logic_id"
|
|---|
| | | },
|
|---|
| | | {
|
|---|
| | | label: "配置人名称",
|
|---|
| | | prop: "configurator"
|
|---|
| | | },
|
|---|
| | | {
|
|---|
| | | label: "备注",
|
|---|
| | | prop: "remark"
|
|---|
| | | },
|
|---|
| | | {
|
|---|
| | | label: "状态",
|
|---|
| | | prop: "status"
|
|---|
| | | },
|
|---|
| | | {
|
|---|
| | | label: "操作",
|
|---|
| | | type: "op"
|
|---|
| | | }
|
|---|
| | | ]
|
|---|
| | | });
|
|---|
| | |
|
|---|
| | | // crud 加载
|
|---|
| | | function onLoad({ ctx, app }: CrudLoad) {
|
|---|
| | | // 绑定 service
|
|---|
| | | ctx.service(service.deviceGroup.deviceGroup).done();
|
|---|
| | | app.refresh();
|
|---|
| | | }
|
|---|
| | |
|
|---|
| | | return {
|
|---|
| | | refs,
|
|---|
| | | setRefs,
|
|---|
| | | upsert,
|
|---|
| | | table,
|
|---|
| | | onLoad
|
|---|
| | | };
|
|---|
| | | }
|
|---|
| | | });
|
|---|
| | | </script>
|
|---|
