jsm-mall-front/src/views/engineerFeeSettlement/dailyMaintenanceBalance/maintenanceSettlementDeduction/index.vue

<template>
  <div class="app-container">
    <strong>1.工伤、残保费用配置:</strong>
    <br /><br />
    <!-- 按钮 -->
    <div class="btn-group clearfix">
      <div class="fl">
        <el-button type="primary" size="mini" @click="showDialog">新增</el-button>
      </div>
    </div>
    <!-- 列表 -->
    <div class="mymain-container">
      <div class="table">
        <el-table
          v-loading="listLoading"
          :data="dataList"
          element-loading-text="Loading"
          border
          fit
          highlight-current-row
          stripe
        >
          <el-table-column align="center" label="操作" fixed width="100">
            <template slot-scope="scope">
              <el-button type="text" @click="editFn(scope.row)">编辑</el-button>
              <el-popconfirm @confirm="delFn(scope.row.id)" title="你确定删除吗？">
                <el-button type="text" class="textColor" slot="reference">删除</el-button>
              </el-popconfirm>
            </template>
          </el-table-column>
          <el-table-column
            align="left"
            label="费用名称"
            prop="name"
            min-width="100"
            show-overflow-tooltip
          ></el-table-column>
          <el-table-column align="right" label="扣除金额" prop="amount" min-width="100" show-overflow-tooltip>
            <template slot-scope="scope">
              {{ scope.row.amount | numToFixed }}
            </template>
          </el-table-column>
          <el-table-column
            align="left"
            label="备注"
            prop="remark"
            min-width="100"
            show-overflow-tooltip
          ></el-table-column>
          <el-table-column
            align="left"
            label="创建人"
            prop="createBy"
            min-width="100"
            show-overflow-tooltip
          ></el-table-column>
          <el-table-column
            align="left"
            label="创建时间"
            prop="createTime"
            min-width="100"
            show-overflow-tooltip
          ></el-table-column>
        </el-table>
      </div>
      <!-- 分页 -->
      <div class="fr">
        <el-pagination
          @size-change="handleSizeChange"
          @current-change="handleCurrentChange"
          :current-page="currentPage"
          :page-sizes="[10, 20, 30, 50]"
          :page-size="pageSize"
          layout="total, sizes, prev, pager, next, jumper"
          :total="listTotal"
        >
        </el-pagination>
      </div>
    </div>
    <br /><br />
    <el-row>
      <el-col :xs="24" :sm="6" :lg="4">
        <strong style="line-height: 28px"> 2.结算汇总暂扣款比例：</strong>
      </el-col>
      <el-col :xs="24" :sm="3" :lg="3">
        <el-input type="number" v-model="config" size="mini"><i class="el-input__icon" slot="suffix">% </i></el-input>
      </el-col>
    </el-row>
    <br />
    <span style="color: red"
      >注：维修结算费用发放优先扣除工伤、残保：每天结算费用汇总时扣除暂扣比例后，再发放工资给师傅！</span
    >

    <!-- 弹窗 -->
    <el-dialog
      :title="title"
      :visible.sync="dialogForm"
      width="500px"
      :show-close="false"
      :close-on-click-modal="false"
    >
      <el-form ref="addForm" :rules="rules" :model="addForm" label-width="100px">
        <el-form-item label="费用名称" prop="name">
          <el-input v-model="addForm.name" placeholder="请输入"></el-input>
        </el-form-item>
        <el-form-item label="扣除金额" prop="amount">
          <el-input v-model="addForm.amount" placeholder="请输入"
            ><i class="el-input__icon" slot="suffix">元 </i></el-input
          >
        </el-form-item>
        <el-form-item label="备注" prop="remark">
          <el-input v-model="addForm.remark" placeholder="请输入"></el-input>
        </el-form-item>
      </el-form>
      <div slot="footer" class="dialog-footer">
        <el-button @click="cancelFn">取 消</el-button>
        <el-button type="primary" @click="confirmFn">确 定</el-button>
      </div>
    </el-dialog>
    <div class="page-footer">
      <div class="footer">
        <el-button type="primary" @click="editConfigFn">修改</el-button>
      </div>
    </div>
  </div>
</template>

<script>
import {
  getList,
  getListAdd,
  getListDelete,
  getListUpdate,
  getConfig,
  getConfigSave
} from '@/api/maintainDailyWithholdDispose'
export default {
  data() {
    return {
      title: '新增',
      dialogForm: false,
      dialogForm: false,
      rules: {
        name: [{ required: true, message: '请输入费用名称', trigger: 'blur' }],
        amount: [{ required: true, message: '请输入金额', trigger: 'blur' }]
      },
      addForm: {
        name: '',
        amount: '',
        remark: ''
      },
      editId: '',
      dataList: [], // 列表数据
      listLoading: false, // 列表加载loading
      currentPage: 1, // 当前页码
      pageSize: 10, // 每页数量
      listTotal: 0, // 列表总数
      config: 0
    }
  },
  created() {
    this.getDataList()
    this.getConfigData()
  },
  methods: {
    //修改
    async editConfigFn() {
      let res = (this.config / 100).toFixed(2)
      await getConfigSave({
        rate: res
      })
      this.$message.success('修改成功')
    },
    //获取扣款比例
    async getConfigData() {
      let res = await getConfig()
      this.config = (res.data.dictValue * 100).toFixed(0)
    },
    // 更改每页数量
    handleSizeChange(val) {
      this.pageSize = val
      this.currentPage = 1
      this.getDataList()
    },
    // 更改当前页
    handleCurrentChange(val) {
      this.currentPage = val
      this.getDataList()
    },
    //编辑
    editFn(value) {
      this.dialogForm = true
      this.$nextTick(() => {
        this.title = '编辑'
        this.editId = value.id
        this.addForm.name = value.name
        this.addForm.amount = value.amount
        this.addForm.remark = value.remark
      })
    },
    //删除
    async delFn(id) {
      await getListDelete({ id })
      this.getDataList()
      this.$message.success('删除成功')
    },
    //获取列表数据
    async getDataList() {
      let res = await getList({ pageNum: this.currentPage, pageSize: this.pageSize, params: [] })
      this.dataList = res.data.records
      this.listTotal = res.data.total
    },
    //取消
    async cancelFn() {
      await this.$refs.addForm.resetFields()
      this.dialogForm = false
    },
    //确定
    async confirmFn() {
      await this.$refs.addForm.validate()

      if (this.title == '编辑') {
        let data = {
          id: this.editId,
          ...this.addForm
        }
        await getListUpdate(data)
        this.$message.success('编辑成功')
      } else {
        await getListAdd(this.addForm)
        this.$message.success('新增成功')
      }

      this.getDataList()
      this.cancelFn()
    },
    //新增
    showDialog() {
      this.title = '新增'
      this.dialogForm = true
    }
  }
}
</script>

<style lang="scss" scoped>
.page-footer {
  height: 70px;
  .footer {
    position: fixed;
    bottom: 0;
    left: 0;
    z-index: 9;
    width: 100%;
    background: #fff;
    padding: 15px 40px;
    box-sizing: border-box;
    transition: all 0.28s;
    text-align: right;
    box-shadow: 0 2px 5px 0 rgb(0 0 0 / 50%), 0 2px 5px 0 rgb(0 0 0 / 10%);
    &.hideSidebar {
      margin-left: 54px;
      width: calc(100vw - 54px);
    }
    &.openSidebar {
      margin-left: 210px;
      width: calc(100vw - 210px);
    }
  }
}
::v-deep .el-dialog__body {
  overflow-y: auto;
}
</style>