klp-oa/klp-ui/src/views/wms/bonus/components/PostCoeffConfig.vue

<template>
  <div class="post-coeff-config">
    <el-row :gutter="10" class="mb8">
      <el-col :span="1.5">
        <el-button
          type="primary"
          plain
          icon="el-icon-plus"
          size="mini"
          @click="handleAdd"
        >新增</el-button>
      </el-col>
    </el-row>

    <el-table :data="postCoeffConfigList" v-loading="loading" border>
      <el-table-column label="岗位名称" align="center" prop="postName" width="150" />
      <el-table-column label="职务系数" align="center" prop="dutyCoeff" width="120">
        <template slot-scope="scope">
          <span>{{ Number(scope.row.dutyCoeff).toFixed(2) }}</span>
        </template>
      </el-table-column>
      <el-table-column label="基本系数" align="center" prop="baseCoeff" width="120">
        <template slot-scope="scope">
          <span>{{ Number(scope.row.baseCoeff).toFixed(2) }}</span>
        </template>
      </el-table-column>
      <el-table-column label="备注" align="center" prop="remark" show-overflow-tooltip />
      <el-table-column label="操作" align="center" width="150" class-name="small-padding fixed-width">
        <template slot-scope="scope">
          <el-button
            size="mini"
            type="text"
            icon="el-icon-edit"
            @click="handleUpdate(scope.row)"
          >修改</el-button>
          <el-button
            size="mini"
            type="text"
            icon="el-icon-delete"
            @click="handleDelete(scope.row)"
          >删除</el-button>
        </template>
      </el-table-column>
    </el-table>

    <!-- 新增/修改弹窗 -->
    <el-dialog :title="dialogTitle" :visible.sync="dialogVisible" width="600px" append-to-body>
      <el-form ref="form" :model="form" :rules="rules" label-width="100px">
        <el-form-item label="岗位名称" prop="postName">
          <el-input v-model="form.postName" placeholder="请输入岗位名称" />
        </el-form-item>
        <el-form-item label="职务系数" prop="dutyCoeff">
          <el-input-number v-model="form.dutyCoeff" :precision="2" :step="0.01" :min="0" placeholder="请输入职务系数" style="width: 100%" />
        </el-form-item>
        <el-form-item label="基本系数" prop="baseCoeff">
          <el-input-number v-model="form.baseCoeff" :precision="2" :step="0.01" :min="0" placeholder="请输入基本系数" style="width: 100%" />
        </el-form-item>
        <el-form-item label="备注">
          <el-input type="textarea" v-model="form.remark" placeholder="请输入备注" :rows="4" />
        </el-form-item>
      </el-form>
      <div slot="footer" class="dialog-footer">
        <el-button @click="dialogVisible = false">取 消</el-button>
        <el-button type="primary" @click="handleSubmit" :loading="submitLoading">确 定</el-button>
      </div>
    </el-dialog>
  </div>
</template>

<script>
import { listPostCoeffConfig, getPostCoeffConfig, delPostCoeffConfig, addPostCoeffConfig, updatePostCoeffConfig } from "@/api/wms/postCoeffConfig";

export default {
  name: "PostCoeffConfig",
  props: {
    show: {
      type: Boolean,
      default: false
    }
  },
  data() {
    return {
      loading: false,
      postCoeffConfigList: [],
      dialogVisible: false,
      dialogTitle: "",
      submitLoading: false,
      form: {},
      rules: {
        postName: [
          { required: true, message: "岗位名称不能为空", trigger: "blur" }
        ],
        dutyCoeff: [
          { required: true, message: "职务系数不能为空", trigger: "blur" }
        ],
        baseCoeff: [
          { required: true, message: "基本系数不能为空", trigger: "blur" }
        ]
      }
    };
  },
  watch: {
    show: {
      handler(newVal) {
        if (newVal) {
          this.getList();
        }
      },
      immediate: true
    }
  },
  methods: {
    getList() {
      this.loading = true;
      listPostCoeffConfig({}).then(response => {
        this.postCoeffConfigList = response.rows || [];
        this.loading = false;
      }).catch(() => {
        this.postCoeffConfigList = [];
        this.loading = false;
      });
    },
    handleAdd() {
      this.resetForm();
      this.dialogTitle = "新增岗位系数配置";
      this.dialogVisible = true;
    },
    handleUpdate(row) {
      this.loading = true;
      getPostCoeffConfig(row.configId).then(response => {
        this.loading = false;
        this.form = response.data;
        this.dialogTitle = "修改岗位系数配置";
        this.dialogVisible = true;
      });
    },
    handleDelete(row) {
      this.$modal.confirm('是否确认删除岗位系数配置编号为"' + row.configId + '"的数据项？').then(() => {
        return delPostCoeffConfig(row.configId);
      }).then(() => {
        this.getList();
        this.$modal.msgSuccess("删除成功");
        this.$emit("refresh");
      }).catch(() => {});
    },
    resetForm() {
      this.form = {
        configId: null,
        postName: null,
        dutyCoeff: 0,
        baseCoeff: 0,
        remark: null,
        createBy: null,
        createTime: null,
        updateBy: null,
        updateTime: null,
        delFlag: null
      };
    },
    handleSubmit() {
      this.$refs.form.validate(valid => {
        if (!valid) return;
        
        this.submitLoading = true;
        const api = this.form.configId != null ? updatePostCoeffConfig : addPostCoeffConfig;
        api(this.form).then(() => {
          this.$modal.msgSuccess(this.form.configId != null ? "修改成功" : "新增成功");
          this.dialogVisible = false;
          this.getList();
          this.$emit("refresh");
        }).finally(() => {
          this.submitLoading = false;
        });
      });
    },
    refresh() {
      this.getList();
    }
  }
};
</script>

<style scoped>
.post-coeff-config {
  width: 100%;
}
</style>