<!--
 * @Description: 系统管理 => 须知管理
 * @Author: 空白格
 * @Date: 2023-07-04 11:29:37
 * @LastEditors: 空白格
 * @LastEditTime: 2023-07-05 18:00:17
 * @FilePath: \cattle_webui\src\views\system\noticeMgr\noticeMgrIndex.vue
 * @Copyright: Copyright (c) 2016~2023 by 空白格, All Rights Reserved.
-->
<template>
  <div class="app-container">
    <!--  搜索条件  -->
    <div class="search-condition">
      <el-card shadow="never">
        <el-form
          :model="queryParams"
          inline
          ref="queryParams"
          @submit.native.prevent
        >
          <el-form-item label="名称：" prop="name">
            <el-input
              v-model="queryParams.name"
              placeholder="请输入名称"
              size="small"
              @keyup.enter.native="handleQuery"
            />
          </el-form-item>
          <el-form-item>
            <el-button
              icon="el-icon-search"
              type="primary"
              size="small"
              v-hasPermi="['system:noticemgr:query']"
              @click="handleQuery"
              >搜索</el-button
            >
            <el-button
              icon="el-icon-refresh"
              type="warning"
              size="small"
              v-hasPermi="['system:noticemgr:reset']"
              @click="handleReset"
              >重置</el-button
            >
          </el-form-item>
        </el-form>
      </el-card>
    </div>
    <!--  表格部分  -->
    <div class="table-content">
      <el-card shadow="never">
        <el-row :gutter="10">
          <!-- 表格 -->
          <el-col :span="24">
            <el-table
              :data="tableData.list"
              border
              v-loading="tableData.loading"
              height="calc(100vh - 420px)"
            >
              <el-table-column
                label="序号"
                align="center"
                type="index"
                width="150"
              />
              <el-table-column label="名称" align="center" prop="name" />
              <el-table-column
                label="模块"
                align="center"
                prop="type"
                :formatter="formatModule"
              />
              <el-table-column label="操作项" align="center">
                <template slot-scope="{ row }">
                  <el-button
                    type="text"
                    icon="el-icon-edit-outline"
                    class="table-add-btn"
                    v-hasPermi="['system:noticemgr:edit']"
                    @click="handleUpdate(row)"
                    >修改</el-button
                  >
                </template>
              </el-table-column>
            </el-table>
          </el-col>
          <!-- 分页 -->
          <el-col :span="24" v-if="tableData.total > 0">
            <pagination
              :total="tableData.total"
              :page.sync="queryParams.pageNum"
              :limit.sync="queryParams.pageSize"
              @pagination="getList"
            />
          </el-col>
        </el-row>
      </el-card>
    </div>
    <!-- 新增/编辑弹框 -->
    <add-or-edit-dialog
      ref="addOrEditDialog"
      :moduleList="moduleList"
      @getList="getList"
    />
  </div>
</template>

<script>
import { listNoticeMgr } from "@/api/system/noticeMgr";
import AddOrEditDialog from "./Dialog/AddOrEditDialog.vue";
export default {
  name: "NoticeMgrIndex",
  components: {
    AddOrEditDialog,
  },
  data() {
    return {
      queryParams: {
        name: undefined,
        pageNum: 1,
        pageSize: 10,
      },
      tableData: {
        loading: false,
        list: [],
        total: 0,
      },
      moduleList: [
        { dictLabel: "小程序", dictValue: 1 },
        { dictLabel: "h5", dictValue: 2 },
      ],
    };
  },
  created() {
    this.getList();
  },
  methods: {
    /**
     * @description: 获取列表
     * @return {*}
     */
    async getList() {
      try {
        this.tableData.loading = true;
        const { code, data } = await listNoticeMgr({ ...this.queryParams });
        if (code === 200) {
          this.tableData.list = data?.rows || [];
          this.tableData.total = data?.total || 0;
        }
      } catch (error) {
      } finally {
        this.tableData.loading = false;
      }
    },
    /**
     * @description: 搜索
     * @return {*}
     */
    handleQuery() {
      this.queryParams.pageNum = 1;
      this.getList();
    },
    /**
     * @description: 重置
     * @return {*}
     */
    handleReset() {
      this.$refs["queryParams"].resetFields();
      this.handleQuery();
    },
    /**
     * @description: 编辑
     * @param {*} row
     * @return {*}
     */
    handleUpdate(row) {
      this.$refs["addOrEditDialog"].openDialog("EDIT", row);
    },
    /**
     * @description: 初始化
     * @param {*} row
     * @return {*}
     */
    formatModule(row) {
      if (!row.type) return;
      return this.moduleList.find((item) => item.dictValue === row.type)
        .dictLabel;
    },
  },
};
</script>
