ams-backend/front/admin-front/src/views/sys-param/index.vue

<template>
  <div>
    <el-row class="ml-5" style="margin-bottom: 20px">
      <el-col :span="2">
        <div class="">
          <div class="block-title">系统参数</div>
          <div class="totalCount-text">
            参数数量：{{ this.tableData.length }}
          </div>
        </div>
      </el-col>
      <!-- <el-col :span="5">
        <el-input
          clearable
          prefix-icon="el-icon-search"
          type="text"
          placeholder="搜索系统参数"
          style="width: 275px; border-radius: 30px"
          v-model="searchParam"
        >
        </el-input>
      </el-col>
      <el-col :span="14">
        <el-button
          icon="el-icon-search"
          class="btn-filter"
          @click="getParamList"
        >
          筛选
        </el-button>
      </el-col> -->
      <el-col :span="3" :offset="19">
        <el-button type="primary" class="btn-add" @click="addParamBtn">
          添加参数
        </el-button>
      </el-col>
    </el-row>
    <el-row>
      <el-col>
        <el-table
          :data="tableData"
          style="width: 100%"
          :header-cell-style="{
            fontSize: '12px',
            fontFamily: 'hm-regular',
            fontWeight: 400,
            textAlign: 'LEFT',
            color: '#888888',
            lineHeight: '12px',
          }"
        >
          <el-table-column prop="paramName" label="参数名称" width="">
          </el-table-column>
          <el-table-column prop="paramValue" label="参数值"> </el-table-column>
          <el-table-column prop="systemName" label="系统名称">
          </el-table-column>
          <el-table-column prop="createTime" label="创建时间">
          </el-table-column>
          <el-table-column prop="updateTime" label="修改时间">
          </el-table-column>
          <el-table-column prop="paramNote" label="备注"> </el-table-column>
          <el-table-column label="操作">
            <template slot-scope="scope">
              <el-button
                type="text"
                @click="handleEdit(scope.$index, scope.row)"
                class="fs-14 bold blue"
                >编辑
              </el-button>
              <el-button
                type="text"
                @click="handleDelete(scope.$index, scope.row)"
                class="fs-14 bold color-red"
                >删除
              </el-button>
            </template>
          </el-table-column>
        </el-table>
        <el-pagination
          style="margin-top: 20px"
          class="float-right"
          @size-change="handleSizeChange"
          @current-change="handleCurrentChange"
          :current-page.sync="page"
          :page-sizes="[10, 20, 30, 40]"
          :page-size.sync="pageSize"
          layout="total, sizes, prev, pager, next, jumper"
          :total="totalCount"
        >
        </el-pagination>
      </el-col>
    </el-row>
    <save-or-update ref="SaveOrUpdate" />
  </div>
</template>
<script>
import SaveOrUpdate from "./SaveOrUpdate.vue";
import { pageParam, deleteParam } from "@/api/param";
import constant from "@/api/constant";
export default {
  components: { SaveOrUpdate },
  data() {
    return {
      page: 1,
      pageSize: 10,
      totalCount: 0,
      searchParam: undefined,
      systemId: constant.systemId,
      param: {},
      tableData: [],
    };
  },
  methods: {
    handleSizeChange(val) {
      this.pageSize = val;
      this.page = 1;
      this.getParamList();
    },
    handleCurrentChange(val) {
      this.page = val;
      this.getParamList();
    },
    getParamList() {
      pageParam({
        page: this.page,
        pageSize: this.pageSize,
        paramName: this.searchParam,
        systemId: this.systemId,
      }).then((res) => {
        this.tableData = res.records;
        this.totalCount = res.total;
      });
    },
    addParamBtn() {
      this.$refs.SaveOrUpdate.isSave = true;
      this.$refs.SaveOrUpdate.paramModal = true;
      // this.$refs.SaveOrUpdate.resetForm();
      this.$refs.SaveOrUpdate.param.systemParamId = undefined;
      this.$refs.SaveOrUpdate.param.paramName = undefined;
      this.$refs.SaveOrUpdate.param.paramValue = undefined;
      this.$refs.SaveOrUpdate.param.systemId = constant.systemId;
      this.$refs.SaveOrUpdate.param.paramNote = undefined;
    },
    handleEdit(index, row) {
      this.$refs.SaveOrUpdate.isSave = false;
      this.$refs.SaveOrUpdate.paramModal = true;
      Object.assign(this.$refs.SaveOrUpdate.param, row);
    },
    handleDelete(index, row) {
      this.$confirm("此操作将永久删除此系统参数信息, 是否继续?", "提示", {
        confirmButtonText: "确定",
        cancelButtonText: "取消",
        type: "warning",
      })
        .then(() => {
          deleteParam(row.systemParamId).then(() => {
            this.$message.success("删除成功");
            this.getParamList();
          });
        })
        .catch(() => {
          this.$message({
            type: "info",
            message: "已取消删除",
          });
        });
    },
  },
  created() {
    this.getParamList();
  },
};
</script>