ECS5 / ECS5.0Web · Files

<template>

  <el-container style="padding: 20px">
    <el-aside>

      <el-card :style="{ height: asideHeight }">

        <el-form label-width="80px">
          <el-form-item label="参数编码">
            <el-input
              v-model="paramCode"
              placeholder="请输入参数编码"
            ></el-input>
          </el-form-item>
          <el-form-item label="参数名称">
            <el-input
              v-model="paramName"
              placeholder="请输入参数名称"
            ></el-input>
          </el-form-item>

          <el-form-item>
            <el-row>
              <el-col :span="8">
                <el-button type="primary" size="small" @click="handleQuery"
                  >查询</el-button
                >
              </el-col>
              <el-col :span="8">
                <el-button type="success" size="small" @click="handleAdd"
                  >新增</el-button
                >
              </el-col>
            </el-row>
            <el-row style="margin-top: 5px">
              <el-col :span="8">
                <el-button type="warning" size="small" @click="handleEdit"
                  >编辑</el-button
                >
              </el-col>
              <el-col :span="8">
                <el-button type="danger" size="small" @click="handleDelete"
                  >删除</el-button
                >
              </el-col>
            </el-row>
          </el-form-item>
        </el-form>
      </el-card>
    </el-aside>

    <el-dialog
      title="新增字典"
      :visible.sync="dialogFormVisible"
      width="30%"
      center
    >
      <el-form :model="form" label-width="80px">
        <el-form-item label="参数编码">
          <el-input v-model="form.code" autocomplete="off"></el-input>
        </el-form-item>
        <el-form-item label="参数名称">
          <el-input v-model="form.name" autocomplete="off"></el-input>
        </el-form-item>
        <el-form-item label="参数值">
          <el-input v-model="form.value" autocomplete="off"></el-input>
        </el-form-item>
        <el-form-item label="备注">
          <el-input v-model="form.remark" autocomplete="off"></el-input>
        </el-form-item>
      </el-form>
      <span slot="footer" class="dialog-footer">
        <el-button @click="dialogFormVisible = false">取 消</el-button>
        <el-button type="primary" @click="handleAddData">确 定</el-button>
      </span>
    </el-dialog>
    <el-dialog

      title="编辑"

      :visible.sync="EditdialogFormVisible"
      width="30%"
      center
    >
      <el-form :model="Editform" label-width="80px">
        <el-form-item label="参数编码">
          <el-input v-model="Editform.code" autocomplete="off"></el-input>
        </el-form-item>
        <el-form-item label="参数名称">
          <el-input v-model="Editform.name" autocomplete="off"></el-input>
        </el-form-item>
        <el-form-item label="参数值">
          <el-input v-model="Editform.value" autocomplete="off"></el-input>
        </el-form-item>
        <el-form-item label="备注">
          <el-input v-model="Editform.remark" autocomplete="off"></el-input>
        </el-form-item>
      </el-form>
      <span slot="footer" class="dialog-footer">
        <el-button @click="EditdialogFormVisible = false">取 消</el-button>
        <el-button type="primary" :loading="editLoading" @click="handleEditData"
          >确 定</el-button
        >
      </span>
    </el-dialog>

    <el-main>
      <el-card>
        <el-table
          :data="tableData"

          border

          style="width: 100%"

          :height="TableHeight"

          @selection-change="handleSelectionChange"

          highlight-current-row

          @row-click="handleRowClick"
          ref="multipleTable"

        >
          <el-table-column type="selection" width="55"></el-table-column>
          <el-table-column prop="id" label="ID" width="80"></el-table-column>
          <el-table-column prop="code" label="参数编码"></el-table-column>
          <el-table-column prop="name" label="参数名称"></el-table-column>

          <el-table-column
            prop="value"
            width="290"
            label="参数值"
          ></el-table-column>

          <el-table-column prop="remark" label="备注"></el-table-column>

          <el-table-column
            prop="created"
            width="180"
            label="创建时间"
          ></el-table-column>

          <el-table-column prop="createdBy" label="创建人"></el-table-column>

          <el-table-column
            prop="updated"
            width="180"
            label="更新时间"
          ></el-table-column>

          <el-table-column prop="updatedBy" label="更新人"></el-table-column>
        </el-table>
        <el-pagination
          style="margin-top: 15px"
          align="center"
          @size-change="handleSizeChange"
          @current-change="handleCurrentChange"
          :current-page="currentPage"
          :page-sizes="[10, 20, 50, 100]"
          :page-size="pageSize"
          layout="total, sizes, prev, pager, next, jumper"

          :total="total"

        />
      </el-card>
    </el-main>
  </el-container>

</template>

<script>

import {
  GetConfigsByPage,
  AddConfig,
  DeleteConfigs,
  EditConfig,
} from "@/api/systemManage/config";

export default {

  name: "Config",

  data() {
    return {

      paramCode: "",
      paramName: "",
      currentPage: 1,
      total: 0,
      pageSize: 10,
      selectedItems: [],

      dialogFormVisible: false,
      form: {
        code: "",
        name: "",
        value: "",
        remark: "",
      },
      EditdialogFormVisible: false,
      Editform: {
        code: "",
        name: "",
        value: "",
        remark: "",
      },
      editLoading: false,
      tableData: [],

    };

  },

  computed: {
    TableHeight() {
      return `calc(100vh - 220px )`;
    },
    asideHeight() {
      return `calc(100vh - 150px)`;
    },
  },

  methods: {

    handleRowClick(row) {
      this.$refs.multipleTable.toggleRowSelection(row);
    },

    handleSelectionChange(val) {
      this.selectedItems = val;
      // console.log("选中的行数据:", this.selectedItems);
    },
    handleSizeChange(val) {
      this.pageSize = val;
      this.currentPage = 1;
      this.handleQuery();
    },

    handleCurrentChange(val) {
      this.currentPage = val;
      this.handleQuery();
    },
    handleQuery() {

      const requestData = {
        pageNumber: this.currentPage,
        perPageCount: this.pageSize,
        queryConfig: {
          code: this.paramCode.trim(),
          name: this.paramName.trim(),
        },
      };
      GetConfigsByPage(requestData).then((res) => {
        if (res.code == "Success" && res.data) {
          this.tableData = res.data.data || res.data;
          this.total = res.data.totalCount || res.data.data.length;
        }
      });

    },
    handleAdd() {

      this.dialogFormVisible = true;
      this.form = {
        code: "",
        name: "",
        value: "",
        remark: "",
      };
    },
    handleAddData() {
      if (!this.form.code) {
        this.$message.error("参数编码不能为空");
        return;
      }
      if (!this.form.name) {
        this.$message.error("参数名称不能为空");
        return;
      }
      if (!this.form.value) {
        this.$message.error("参数值不能为空");
        return;
      }
      AddConfig(this.form).then((res) => {
        if (res.code === "Success") {
          this.$message.success("新增成功");
          this.dialogFormVisible = false;
          this.handleQuery();
        } else {
          this.$message.error(res.message);
        }
      });

    },
    handleEdit() {

      if (this.selectedItems.length === 0) {
        this.$alert("请至少选择一条数据", "提示", {
          confirmButtonText: "确定",
        });
        return;
      }
      if (this.selectedItems.length > 1) {
        this.$alert("只能选择一条数据进行编辑", "提示", {
          confirmButtonText: "确定",
        });
        return;
      }
      this.EditdialogFormVisible = true;

      this.Editform = { ...this.selectedItems[0] };

    },
    handleEditData() {
      this.editLoading = true;
      EditConfig(this.Editform).then((res) => {
        if (res.code === "Success") {
          this.$message.success("数据修改成功");
          this.EditdialogFormVisible = false;
          this.editLoading = false;
          this.handleQuery();
        } else {
          this.$message.error(res.message);
        }
      });

    },
    handleDelete() {

      if (this.selectedItems.length === 0) {
        this.$alert("请至少选择一条数据", "提示", {
          confirmButtonText: "确定",
        });
        return;
      }
      this.$confirm("确定要删除选中的数据吗？", "提示", {
        confirmButtonText: "确定",
        cancelButtonText: "取消",
        type: "warning",
      })
        .then(() => {
          const list = this.selectedItems;
          DeleteConfigs(list).then((res) => {
            if (res.code === "Success") {
              this.$message.success("删除成功");
              this.handleQuery();
            }
          });
        })
        .catch(() => {
          this.$message.info("已取消删除");
        });

    },
  },
};

</script>

<style scoped>

.el-card__body,
.el-main {
  padding: 0 10px 0 10px;
}
::v-deep.el-table thead {
  color: #101010;
  font-weight: 600;
}

.el-form-item {
  margin-bottom: 18px;
}

.el-table__body tr.current-row {
  background-color: #f0f9eb; /* 自定义高亮背景色 */
}

</style>