profitManage/src/views/disRevenue/resource/group/index.vue

<template>
    <div class="app-container pageTopForm">
        <el-form :model="queryParams" ref="queryRef" v-show="showSearch" size="small" label-width="130px">
          <el-col :span="6">
              <el-form-item label="资源组名称" prop="groupName">
                  <el-input
                        v-model="queryParams.groupName"
                        placeholder="请输入资源组名称"
                        clearable
                        @keyup.enter.native="handleQuery"/>
              </el-form-item>
          </el-col>
          <el-col :span="6">
              <el-form-item class="lastBtnSty">
                  <el-button type="primary" size="mini" icon="Search" @click="handleQuery">搜索</el-button>
                  <el-button icon="Refresh" size="mini" @click="resetQuery">重置</el-button>
              </el-form-item>
          </el-col>
        </el-form>
        <TableList :columns="columns" :config="config" :queryParams="queryParams" :tableList="roleList" @fnClick="callback" @fnRenderList="getList" @value-change="handleValueChange">
<!--            <template #tempTooltip="{ row, column }">-->
<!--                <span class="verticalAlign">{{column.label}}</span>-->
<!--                <el-tooltip trigger="click" effect="dark" placement="top">-->
<!--                    <template #content><div style="width: 300px">{{column.tooltip}}</div></template>-->
<!--                    <el-icon><QuestionFilled /></el-icon>-->
<!--                </el-tooltip>-->
<!--            </template>-->
        </TableList>
    </div>
</template>

<script setup name="Topology">
    import TableList from "@/components/table/index.vue"
    import {listGroup, delGroup} from "@/api/disRevenue/resource"
    export default {
      name: 'GroupIndex',
      components: {TableList},
      data() {
        return {
          loading: true,
          showSearch: true,
          roleList: [],
          queryParams: {
            total: 0,
            pageNum: 1,
            pageSize: 10
          },
          // 列显隐信息
          columns: {
            id: { label: `ID`, visible: false },
            groupName: { label: `名称`, visible: true},
            description: { label: `描述`, visible: true},
            includedDevicesName: { label: `包含设备`, visible: true },
            createTime: { label: `创建时间`},
            updateTime: { label: `修改时间`, visible: true}
          },
          config: {
            searcherForm: [
              {label: '资源组名称', prop: 'groupName', type: 'input'}
            ],
            tableButton: {
              top: [
                {content: '新增', fnCode: 'add', type: 'primary', icon: 'el-icon-plus', hasPermi: 'disRevenue:resource:register:add'},
                {content: '删除', fnCode: 'delete', type: 'danger', icon: 'el-icon-delete', hasPermi: 'disRevenue:resource:register:detele'},
                {content: '导出', fnCode: 'export', type: 'warning', icon: 'el-icon-download', hasPermi: 'disRevenue:resource:register:export'},
              ],
              line: [
                {content: '修改', fnCode: 'edit', type: 'text', icon: 'el-icon-edit', hasPermi: 'disRevenue:resource:register:edit'},
              ]
            }
          }
        }
      },
      created() {
        this.getList();
      },
      methods: {
        // 处理子组件传递的新值
        handleValueChange(newValue) {
          // 父组件更新自身数据，实现同步
          this.showSearch = newValue;
          // console.log('父组件拿到新值:', newValue);
        },
        /** 查询列表 */
        getList() {
            this.loading = true;
            listGroup(this.queryParams).then(response => {
              this.roleList = response.rows;
              this.queryParams.total = response.total;
              this.loading = false;
            })
        },

        /** 搜索按钮操作 */
        handleQuery() {
          this.queryParams.pageNum = 1
          this.getList()
        },

        /** 重置按钮操作 */
        resetQuery() {
          this.resetForm("queryRef");
          this.handleQuery();
        },

        callback(result, rowData, selectChange) {
            if (result && result.fnCode) {
                switch (result.fnCode) {
                    case 'add':
                        this.$router.push({
                            path:'/disRevenue/resource/group/edit/index'});
                        break;
                    case 'edit':
                        this.$router.push({
                            path:'/disRevenue/resource/group/edit/index',
                            query:{
                                id: rowData.id
                            }
                        });
                        break;
                    case 'delete':
                      this.$modal.confirm('是否确认删除数据项？').then(function() {
                        return delGroup(selectChange)
                          }).then(() => {
                            this.getList();
                            this.$modal.msgSuccess("删除成功")
                          }).catch(() => {});
                        break;
                    case 'export':
                      // let dataList = [];
                      // Object.keys(this.columns).forEach(item => {
                      //   if (item.visible) {
                      //     dataList.push(item.prop);
                      //   }
                      // });
                      // this.download("/system/group/export", {properties: dataList,}, `资源分组_${new Date().getTime()}.xlsx`);
                      let paramsList = Object.assign({}, this.queryParams,rowData);
                      this.download("system/group/export", paramsList, `资源分组_${new Date().getTime()}.xlsx`, null, 'json');
                        break;
                    default:

                }
            }
        }
      }
    }
</script>
<style scoped>
  ::v-deep .lastBtnSty .el-form-item__content{
    margin-left: 10px!important;
  }
</style>