vue-insagent-pc/src/views/FinancialManagement/ExpenseManagement/Profit.vue

<template>
  <!--布局容器-->
  <div class="container" style="width: 99%; margin-top: 0px">
    <!-- 新增 -->
    <kt-button class="operation" label="新增利润" type="primary" :plain="true" perms="expenseManagement:fundsOwnership:add"
      @click="addAmount" />

    <!-- 表格 -->
    <el-table class="expendtable" :stripe="true" default-expand-all :header-cell-style="{
      background: '#F2F7FC',
      fontWeight: '900',
      color: '#606266',
    }" :data="tableData" style="width: 100%; margin-bottom: 20px; margin-top: 30px" row-key="expensesId" border
      :tree-props="{ children: 'child', hasChildren: 'hasChildren' }">
      <el-table-column prop="profitId" align="center" label="归属id">
      </el-table-column>
      <el-table-column prop="profitEng" align="center" label="归属标识">
      </el-table-column>
      <el-table-column prop="profitName" align="center" label="归属名称">
      </el-table-column>
      <el-table-column align="center" label="操作">
        <template slot-scope="scope">
          <kt-button label="编辑" perms="expenseManagement:fundsOwnership:update"
            @click="handleTableEdit(scope.$index, scope.row)" />
          <kt-button label="删除" type="danger" perms="expenseManagement:fundsOwnership:delete"
            @click="handleDelete(scope.$index, scope.row)" />
        </template>
      </el-table-column>
    </el-table>
    <el-pagination @size-change="handleSizeChange" @current-change="handleCurrentChange"
      :current-page="searchParams.pageNo" :page-sizes="[10, 200, 300, 400]" :page-size="searchParams.pageSize"
      layout="total, sizes, prev, pager, next, jumper" :total="searchParams.totalSize">
    </el-pagination>
    <!-- 新增弹出框 -->
    <el-dialog class="dialog" :title="title" :close-on-click-modal="false" :before-close="handleClose"
      :visible.sync="dialogFormVisible" width="50%">
      <el-form :model="formData" :rules="rules" ref="formData" label-width="120px" size="small" class="frame">
        <el-row>
          <el-col :span="12">
            <el-form-item label="归属标识" :label-width="formLabelWidth" prop="profitEng">
              <el-input v-model="formData.profitEng" autocomplete="off" placeholder="请填写英文标识"></el-input>
            </el-form-item>
          </el-col>
          <el-col :span="12">
            <el-form-item label="归属名称" :label-width="formLabelWidth" prop="profitName">
              <el-input v-model="formData.profitName" autocomplete="off"></el-input>
            </el-form-item>
          </el-col>
        </el-row>
      </el-form>
      <div slot="footer" class="dialog-footer">
        <el-button @click="resetForm('formData')" size="small">取 消</el-button>
        <el-button type="primary" @click="submitForm('formData')" size="small">确 定</el-button>
      </div>
    </el-dialog>
  </div>
</template>
<script>
import KtCommonTable from "@/views/Core/KtCommonTable.vue"; //表格组件
import KtButton from "@/views/Core/KtButton"; // 按钮权限组件

export default {
  name: "ExpenseMessage",
  components: { KtCommonTable, KtButton },
  created() {
  },
  mounted() {
    this.findPage();
  },
  data() {
    return {
      searchParams: {
        pageNo: 1,
        pageSize: 10,
      },
      title: "新增利润",
      tableData: [], //表格数据
      button3Name: "删除",
      button3Background: "rgb(222, 80, 76)",
      button2Background: "rgb(14, 194, 22)",
      button2Name: "新建子类",
      dialogFormVisible: false, //弹出框状态
      formLabelWidth: "120px",
      formData: {
        profitName: "",
      },
      rules: {
        profitEng: [
          { required: true, message: "归属标识不能为空", trigger: "blur" },
          { pattern: /[a-zA-z]$/, message: '请输入英文' }
        ],
        profitName: [
          { required: true, message: "归属名称不能为空", trigger: "blur" },
        ],
      },
      formDataId: "", //编辑id
    };
  },
  watch: {
    dialogFormVisible(n) {
      if (!n) {
        this.handleClose();
      }
    },
  },
  methods: {
    //切换条数
    handleSizeChange(val) {
      this.searchParams.pageSize = val
      this.findPage()
    },
    //切换页数
    handleCurrentChange(val) {
      this.searchParams.pageNo = val
      this.findPage()
    },
    //删除
    handleDelete(index, row) {
      let id = row.profitId;
      this.$confirm("确认删除该记录吗?", "提示", {
        type: "warning",
      })
        .then(() => {
          this.$api.expense.deleteProfit(id).then((res) => {
            if (res.code == 200) {
              this.$message.success("删除成功");
              this.findPage();
            } else {
              this.$message.error(res.msg);
            }
          });
        })
        .catch(() => { });
    },
    //获取列表数据
    findPage(data) {
      this.$api.expense
        .getPageList(this.searchParams)
        .then((res) => {
          this.tableData = res.data.records;
          this.searchParams.pageNo = res.data.current;
          this.searchParams.pageSize = res.data.size;
          this.searchParams.totalPages = res.data.pages;
          this.searchParams.totalSize = res.data.total;
        })
        .then(data != null ? data.callback : "");
    },
    //新增事件
    addAmount() {
      this.title = "新增利润";
      this.dialogFormVisible = true;
    },
    //弹框取消
    handleClose() {
      this.formDataId = ""; //编辑id
      this.dialogFormVisible = false;
      this.formData = {
        profitName: "",
      };
      this.$refs.formData.resetFields();
    },
    //新增取消重置
    resetForm(formData) {
      this.dialogFormVisible = false;
      this.$refs[formData].resetFields();
    },
    //修改
    handleTableEdit(index, row) {
      this.title = "编辑利润";
      this.formDataId = row.profitId;
      this.$api.expense.getPageList({ profitId: this.formDataId }).then((res) => {
        if (res.code == 200) {
          this.formData = JSON.parse(JSON.stringify(res.data.records[0]));
        } else {
          this.$message.error(res.msg);
        }
      });
      this.dialogFormVisible = true;
    },
    //提交
    submitForm(formData) {
      let params = JSON.parse(JSON.stringify(this.formData));
      this.$refs[formData].validate((valid) => {
        if (valid) {
          if (this.formDataId) {
            //修改
            this.$api.expense.updateProfit(params).then((res) => {
              if (res.code == 200) {
                this.$message({
                  message: "修改成功",
                  type: "success",
                });
              } else {
                this.$message({
                  message: `修改失败, ${res.msg}`,
                  type: "error",
                });
              }
              this.dialogFormVisible = false;
              this.findPage();
            });
          } else {
            //新增
            this.$api.expense.addInsert(params).then((res) => {
              if (res.code == 200) {
                this.$message({
                  message: "添加成功",
                  type: "success",
                });
              } else {
                this.$message({
                  message: `添加失败, ${res.msg}`,
                  type: "error",
                });
              }
              this.dialogFormVisible = false;
              this.findPage();
            });
          }
        } else {
          return false;
        }
      });
    },
  },
};
</script>

<style scoped>
.operation {
  margin-left: 14px !important;
  margin-top: 15px !important;
}

.form {
  display: flex;
  margin-top: 14px;
  align-items: center;
  margin-left: -12px;
  margin-bottom: 20px;
}

.el-pagination {
  font-weight: normal;
}

.el-card__body {
  padding: 12px !important;
}

.footer .footerdiv {
  display: flex;
  align-items: center;
}

.container .el-form-item {
  margin-bottom: -14px !important;
}

.form .el-form-item__label {
  font-size: 15px !important;
  font-weight: 600 !important;
}

.ktTable {
  margin-top: 20px;
}

.el-row {
  margin-top: 18px;
}

.top {
  margin-top: 0px;
}

.el-date-editor--daterange.el-input__inner {
  width: 300px;
}

/deep/ .el-select--small {
  width: 100%;
}

.frame {
  width: 100%;
  background-color: #fff;
  padding: 20px;
  -webkit-box-sizing: border-box;
  box-sizing: border-box;
  margin-bottom: 15px;
  border-radius: 6px;
  border: 1px solid #ebeef5;
  -webkit-transition: all 0.2s ease-in-out;
  transition: all 0.2s ease-in-out;
  -webkit-box-shadow: 0 2px 12px 0 rgba(0, 0, 0, 0.1);
  box-shadow: 0 2px 12px 0 rgba(0, 0, 0, 0.1);
}

/deep/ .el-dialog__body {
  overflow-y: scroll;
  max-height: 500px;
}

.addremove-box {
  width: 100%;
  display: flex;
  justify-content: center;
  align-items: center;
  font-size: 25px;
  margin-top: 10px;
  /* position: absolute;
      bottom:0;
      left: 0; */
}

.addremove-box>i {
  cursor: pointer;
}

.frame>>>.el-date-editor {
  width: 100%;
}

.expendtable>>>.el-table__body-wrapper {
  overflow-y: auto;
  height: 600px;
}
</style>