tire-platform-ui/src/views/salaryManagement/logisticsDepartment/detailsPage.vue

<template>
  <div class="borderless">
    <div class="customer-head">
      <div class="customer-back">
        <el-button type="danger" style="border: none;background: none;color: red" icon="el-icon-arrow-left"
                   @click="backToList">返回列表
        </el-button>
      </div>
      <el-button
          class="el-button--small-yh add-customer-btn"
          type="primary"
          :disabled="disabled"
          size="small"
          @click="editCustomer"
      >{{ form.id ? '确认修改' : '确认新增' }}
      </el-button>
    </div>
    <basic-container style="margin-top: 60px">
          <avue-form
              ref="form"
              style="margin-bottom: -20px"
              v-model="form"
              :option="option">
          </avue-form>
    </basic-container>
    <containerTitle title="基础资料"></containerTitle>
    <basic-container>
      <div style="display: flex;justify-content: space-between;margin-bottom: 10px">
        <div>
          <el-button type="primary" @click="dataList.push({})" size="small">新增</el-button>
        </div>
        <div>
          <el-button icon="el-icon-s-operation" size="small" circle @click="drawer=true"></el-button>
        </div>
      </div>
      <!--抽屉自定义列-->
      <el-drawer
          title="自定义列设置(加项录入正数、减项录入负数)"
          :visible.sync="drawer"
          append-to-body
          withHeader
          size="60%"
          :with-header="false">
        <el-table
            :data="optionList.column"
            border
            ref="table"
            size="mini"
            :height="tableHeight"
            style="width: 100%;">
<!--          <el-table-column-->
<!--              type="index"-->
<!--              align="center"-->
<!--              label="序号"-->
<!--              width="50">-->
<!--          </el-table-column>-->
          <el-table-column
              prop="label"
              align="center"
              label="列名"
              width="200">
            <template slot-scope="scope">
              <el-input v-model="scope.row.label" size="mini" placeholder="请输入内容"></el-input>
            </template>
          </el-table-column>
          <el-table-column
              prop="fixed"
              align="center"
              label="冻结"
              width="50">
            <template slot-scope="scope">
              <el-checkbox v-model="scope.row.fixed"></el-checkbox>
            </template>
          </el-table-column>
          <el-table-column
              prop="hide"
              align="center"
              label="隐藏"
              width="50">
            <template slot-scope="scope">
              <el-checkbox v-model="scope.row.hide"></el-checkbox>
            </template>
          </el-table-column>
          <el-table-column
              prop="width"
              align="center"
              label="宽度"
              width="400">
            <template slot-scope="scope">
              <el-slider :min="1" :max="500" show-input v-model="scope.row.width"></el-slider>
            </template>
          </el-table-column>
          <el-table-column
              prop="remarks"
              align="center"
              label="备注"
              width="200">
            <template slot-scope="scope">
              <el-input v-model="scope.row.remarks" size="mini" placeholder="请输入内容"></el-input>
            </template>
          </el-table-column>
        </el-table>
      </el-drawer>
      <el-table
          :data="dataList"
          border
          size="small"
          :header-cell-style="bug"
          style="width: 100%;"
      >
        <el-table-column
            type="index"
            align="center"
            label="序号"
            width="50">
        </el-table-column>
        <el-table-column
            v-for="item in optionList.column"
            :prop="item.prop"
            align="center"
            v-if="item.hide != true"
            :fixed="item.fixed"
            :label="item.label"
            :width="item.width>2?item.width:100">
          <template slot-scope="scope">
            <el-input v-model="scope.row[item.prop]" size="small" :placeholder="'请输入'+item.label"></el-input>
          </template>
        </el-table-column>
      </el-table>
    </basic-container>
  </div>
</template>

<script>
import {typeSave} from "@/api/maintenance/salesPolicy";

export default {
  name: "detailsPage",
  data(){
    return{
      disabled:false,
      form:{},
      dataList:[],
      drawer:false,
      tableHeight:0,
      option:{
        menuBtn: false,
        labelWidth: 100,
        column:[
          {
            label:'年',
            prop:'name',
            type:'year',
            search:true,
            span: 4,
            maxlength: 3,
          },
          {
            label:'月',
            prop:'name1',
            type:'month',
            search:true,
            span: 4,
            maxlength: 3,
          },
          {
            label:'备注',
            prop:'name1',
            search:true,
            span: 16,
            maxlength: 3,
          }]
      },
      optionList:{
        addBtn:false,
        addRowBtn:true,
        cellBtn:true,
        border: true,
        "lazy": true,
        "tip": false,
        "simplePage": true,
        "searchShow": true,
        "align": "center",
        index: true,
        column:[
        {
          label:'部门',
          prop:'nameA',
          slot: true,
          width:100,
        },
        {
          label:'姓名',
          prop:'nameB',
          slot:true,
          width:100
        },
        {
          label:'工资拨付标准',
          prop:'nameC',
          width:100,
          cell: true,
        },
        {
          label:'职级拨付标准',
          prop:'name4',
          cell: true,
        },
        {
          label:'履约奖',
          prop:'name5',
          cell: true,
        },
        {
          label:'校龄工资',
          prop:'name6',
          cell: true,
          remarks:'基础工资'
        },
        {
          label:'增资',
          prop:'name7',
          cell: true,
          remarks:'基础工资'
        },
        {
          label:'学历工资',
          prop:'name8',
          cell: true,
          remarks:'基础工资'
        },
        {
          label:'职级工资',
          prop:'name9',
          cell: true,
          remarks:'基础工资'
        },
        {
          label:'工资基数',
          prop:'name10',
          cell: true,
          remarks:'基础工资'
        },
        {
          label:'基础工资',
          prop:'name11',
          cell: true,
          remarks:'基础工资'
        },
        {
          label:'工作量工资',
          prop:'name12',
          cell: true,
          remarks:'工作量工资'
        },
        {
          label:'日常考核工资',
          prop:'name13',
          cell: true,
          remarks:'日常考核工资'
        },
        {
          label:'绩效工资',
          prop:'name',
          cell: true,
          remarks:'绩效工资'
        },
        {
          label:'突出贡献奖',
          prop:'name14',
          cell: true,
          remarks:'奖励工资'
        },
        {
          label:'教学成绩优胜奖',
          prop:'name15',
          cell: true,
          remarks:'奖励工资'
        },
        {
          label:'教学成绩进步奖',
          prop:'name16',
          cell: true,
          remarks:'奖励工资'
        },
        {
          label:'荣誉奖',
          prop:'name17',
          cell: true,
          remarks:'奖励工资'
        },
        {
          label:'领导干部奖励',
          prop:'name18',
          cell: true,
          remarks:'奖励工资'
        },
        {
          label:'奖励工资',
          prop:'name',
          cell: true,
          remarks:'奖励工资'
        },
        {
          label:'领导干部补贴',
          prop:'name',
          cell: true,
          remarks:'职务津贴'
        },
        {
          label:'教研组长',
          prop:'name',
          cell: true,
          remarks:'职务津贴'
        },
        {
          label:'备课组长',
          prop:'name',
          cell: true,
          remarks:'职务津贴'
        },
        {
          label:'职务津贴',
          prop:'name',
          cell: true,
          remarks:'职务津贴'
        },
        {
          label:'班主任',
          prop:'name',
          cell: true,
          remarks:'其他补贴'
        },
        {
          label:'班额',
          prop:'name',
          cell: true,
          remarks:'其他补贴'
        },
        {
          label:'其他补贴',
          prop:'name',
          cell: true,
          remarks:'其他补贴'
        },
        {
          label:'微信补贴',
          prop:'name',
          cell: true,
          remarks:'补贴项'
        },
        {
          label:'特长班补贴',
          prop:'name',
          cell: true,
          remarks:'补贴项'
        },
        {
          label:'空中课堂补贴',
          prop:'name',
          cell: true,
          remarks:'补贴项'
        },
        {
          label:'补发项',
          prop:'name',
          cell: true,
          remarks:'补贴项'
        },
        {
          label:'产假工资',
          prop:'name',
          cell: true,
          remarks:'补贴项'
        },
        {
          label:'绩效工资',
          prop:'name',
          cell: true,
          remarks:'补贴项'
        },
        {
          label:'补贴项',
          prop:'name',
          cell: true,
          remarks:'补贴项'
        },
        {
          label:'考勤扣除',
          prop:'name',
          cell: true,
          remarks:'扣除项'
        },
        {
          label:'罚款',
          prop:'name',
          cell: true,
          remarks:'扣除项'
        },
        {
          label:'五险个人扣除',
          prop:'name',
          cell: true,
          remarks:'扣除项'
        },
        {
          label:'宿舍管理费扣除',
          prop:'name',
          cell: true,
          remarks:'扣除项'
        },
        {
          label:'团意险',
          prop:'name',
          cell: true,
          remarks:'扣除项'
        },
        {
          label:'扣除项',
          prop:'name',
          cell: true,
          remarks:'扣除项'
        },
        {
          label:'保险单位部分',
          prop:'name',
          cell: true,
          remarks:'保险单位部分'
        },
        {
          label:'保险个人部分',
          prop:'name',
          cell: true,
          remarks:'保险个人部分'
        },
        {
          label:'公积金单位部分',
          prop:'name',
          cell: true,
          remarks:'公积金单位部分'
        },
        {
          label:'公积金个人部分',
          prop:'name',
          cell: true,
          remarks:'公积金个人部分'
        },
        {
          label:'应发工资',
          prop:'name',
          cell: true,
          remarks:'应发工资'
        },
        {
          label:'个人所得税',
          prop:'name',
          cell: true,
          remarks:'个人所得税'
        },
        {
          label:'实发工资',
          prop:'name',
          cell: true,
          remarks:'实发工资'
        },
        {
          label:'其他信息',
          prop:'name',
          cell: true,
          remarks:'其他信息'
        }
      ]
    },
    }
  },
  created() {
    let windowHeight = document.documentElement.clientHeight || document.body.clientHeight;
    console.log(windowHeight)
    this.tableHeight = windowHeight - 140;
  },
  methods:{
    //修改提交触发
    editCustomer() {
      console.log(this.form)
      this.$refs["form"].validate((valid) => {
        if (valid) {
          this.form.corps = this.form.corps.join(',')
          this.form.specialItemList = this.contactsData
          this.form.presentItemList = this.contactsDataBuyFree
          typeSave(this.form).then(res=>{
            this.$message({
              type: "success",
              message: this.form.id ? "修改成功!" : "新增成功!"
            });
            this.backToList()
          })
        } else {
          return false;
        }
      });
    },
    //新增
    rowSave(form, done) {
      this.$message.success(
          '新增数据' + JSON.stringify(form)
      )
      done()
    },
    //返回列表
    backToList() {
      this.$emit("goBack");
      // this.$router.$avueRouter.closeTag();
      // this.$router.push({
      //   path: '/maintenance/salesPolicy/index',
      //   query: {}
      // });
    },
  }
}
</script>

<style scoped>
::v-deep .el-drawer.rtl{
  overflow: scroll;
}
::v-deep .el-table .el-table__fixed {
  height: auto !important;
  bottom: 8px !important;
}
</style>