Smart_platform_ui/src/views/salaryManagement/primarySchool/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>
          <el-button type="primary" @click="exportAll" size="small">导出全部</el-button>
          <el-button type="primary" @click="exportSalary" 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="50%"
          :with-header="false">
        <el-table
            :data="optionList.column"
            border
            ref="table"
            size="small"
            :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" 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="500">
            <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="400">
            <template slot-scope="scope">
              <el-input v-model="scope.row.remarks" placeholder="请输入内容"></el-input>
            </template>
          </el-table-column>
        </el-table>
      </el-drawer>
      <el-table
          :data="dataList"
          border
          size="small"
          :header-cell-style="headerColor"
          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]" :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:'name2',
            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',
          type: "date",
          span:8,
          format:'yyyy-MM-dd',
          valueFormat:'yyyy-MM-dd',
          mock:{
            type:'datetime',
            format:'yyyy-MM-dd'
          },
          width:100,
          cell: true,
        },
        {
          label:'职务',
          prop:'name4',
          cell: true,
        },
        {
          label:'姓名',
          prop:'name5',
          cell: true,
        },
        {
          label:'工资拨付标准',
          prop:'name6',
          cell: true,
        },
        {
          label:'职级拨付标准',
          prop:'name7',
          cell: true,
        },
        {
          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:'name14',
          cell: true,
          remarks:'基础工资'
        },
        {
          label:'基础工资',
          prop:'name15',
          cell: true,
          headerColor:true,
          remarks:'基础工资'
        },
        {
          label:'工作量工资标准',
          prop:'name16',
          cell: true,
        },
        {
          label:'10月份课时',
          prop:'name17',
          cell: true,
        },
        {
          label:'10月工作量工资',
          prop:'name18',
          cell: true,
          remarks:'10月工作量工资'
        },
        {
          label:'自定义',
          prop:'name19',
          cell: true,
          remarks:'工作量工资'
        },
        {
          label:'自定义',
          prop:'name20',
          cell: true,
          remarks:'工作量工资'
        },{
          label:'自定义',
          prop:'name21',
          cell: true,
          remarks:'工作量工资'
        },{
          label:'自定义',
          prop:'name22',
          cell: true,
          remarks:'工作量工资'
        },{
          label:'自定义',
          prop:'name23',
          cell: true,
          remarks:'工作量工资'
        },{
          label:'自定义',
          prop:'name24',
          cell: true,
          remarks:'工作量工资'
        },{
          label:'自定义',
          prop:'name25',
          cell: true,
          remarks:'工作量工资'
        },{
          label:'自定义',
          prop:'name26',
          cell: true,
          remarks:'工作量工资'
        },{
          label:'自定义',
          prop:'name27',
          cell: true,
          remarks:'工作量工资'
        },{
          label:'自定义',
          prop:'name28',
          cell: true,
          remarks:'工作量工资'
        },{
          label:'工作量工资',
          prop:'name29',
          cell: true,
        },
        {
          label:'日常考核标准',
          prop:'name30',
          cell: true,
        },
        {
          label:'日常考核工资',
          prop:'name31',
          cell: true,
        },
        {
          label:'学期绩效工资',
          prop:'name32',
          cell: true,
        },
        {
          label:'自定义奖励',
          prop:'name33',
          cell: true,
          remarks:'奖励工资'
        },
        {
          label:'自定义奖励',
          prop:'name34',
          cell: true,
          remarks:'奖励工资'
        },
        {
          label:'自定义奖励',
          prop:'name35',
          cell: true,
          remarks:'奖励工资'
        },
        {
          label:'自定义奖励',
          prop:'name36',
          cell: true,
          remarks:'奖励工资'
        },
        {
          label:'自定义奖励',
          prop:'name37',
          cell: true,
          remarks:'奖励工资'
        },
        {
          label:'自定义奖励',
          prop:'name38',
          cell: true,
          remarks:'奖励工资'
        },
        {
          label:'自定义奖励',
          prop:'name39',
          cell: true,
          remarks:'奖励工资'
        },
        {
          label:'自定义奖励',
          prop:'name40',
          cell: true,
          remarks:'奖励工资'
        },
        {
          label:'自定义奖励',
          prop:'name41',
          cell: true,
          remarks:'奖励工资'
        },
        {
          label:'自定义奖励',
          prop:'name42',
          cell: true,
          remarks:'奖励工资'
        },{
          label:'奖励工资',
          prop:'name43',
          cell: true,
        },
        {
          label:'领导干部补贴',
          prop:'name44',
          cell: true,
          remarks:'职务津贴'
        },
        {
          label:'备课组长',
          prop:'name45',
          cell: true,
          remarks:'职务津贴'
        },
        {
          label:'教研组长',
          prop:'name46',
          cell: true,
          remarks:'职务津贴'
        },
        {
          label:'职务津贴',
          prop:'name47',
          cell: true,
        },
        {
          label:'班主任费',
          prop:'name48',
          cell: true,
          remarks:'班主任津贴'
        },
        {
          label:'班额',
          prop:'name49',
          cell: true,
          remarks:'班主任津贴'
        },
        {
          label:'班主任津贴',
          prop:'name50',
          cell: true,
          remarks:'班主任津贴'
        },
        {
          label:'微信',
          prop:'name51',
          cell: true,
          remarks:'补贴项'
        },
        {
          label:'产假工资',
          prop:'name52',
          cell: true,
          remarks:'补贴项'
        },
        {
          label:'周末加班',
          prop:'name53',
          cell: true,
          remarks:'补贴项'
        },
        {
          label:'2020年上学期绩效',
          prop:'name54',
          cell: true,
          remarks:'补贴项'
        },
        {
          label:'2020年下学期绩效',
          prop:'name55',
          cell: true,
          remarks:'补贴项'
        },
        {
          label:'干部补贴预留',
          prop:'name56',
          cell: true,
          remarks:'补贴项'
        },
        {
          label:'假期加班费',
          prop:'name57',
          cell: true,
          remarks:'补贴项'
        },
        {
          label:'新岗岗前培训',
          prop:'name58',
          cell: true,
          remarks:'补贴项'
        },
        {
          label:'期中期末考试学科优胜奖（预留发放）',
          prop:'name59',
          cell: true,
          remarks:'补贴项'
        },
        {
          label:'级部长（预留发放）',
          prop:'name60',
          cell: true,
          remarks:'补贴项'
        },
        {
          label:'9月副班费（预留补发）',
          prop:'name61',
          cell: true,
          remarks:'补贴项'
        },
        {
          label:'餐车、周五测温、周五安全岗（预留补发）',
          prop:'name62',
          cell: true,
          remarks:'补贴项'
        },
        {
          label:'预留补发',
          prop:'name63',
          cell: true,
          remarks:'补贴项'
        },
        {
          label:'调整差额',
          prop:'name64',
          cell: true,
          remarks:'调整差额'
        },
        {
          label:'自定义',
          prop:'name65',
          cell: true,
          remarks:'补贴项'
        },
        {
          label:'自定义',
          prop:'name66',
          cell: true,
          remarks:'补贴项'
        },
        {
          label:'自定义',
          prop:'name67',
          cell: true,
          remarks:'补贴项'
        },
        {
          label:'自定义',
          prop:'name68',
          cell: true,
          remarks:'补贴项'
        },
        {
          label:'自定义',
          prop:'name69',
          cell: true,
          remarks:'补贴项'
        },
        {
          label:'自定义',
          prop:'name70',
          cell: true,
          remarks:'补贴项'
        },
        {
          label:'自定义',
          prop:'name71',
          cell: true,
          remarks:'补贴项'
        },
        {
          label:'自定义',
          prop:'name72',
          cell: true,
          remarks:'补贴项'
        },
        {
          label:'自定义',
          prop:'name73',
          cell: true,
          remarks:'补贴项'
        },
        {
          label:'自定义',
          prop:'name74',
          cell: true,
          remarks:'补贴项'
        },
        {
          label:'补贴项',
          prop:'name75',
          cell: true,
          remarks:'补贴项'
        },
        {
          label:'出勤',
          prop:'name76',
          cell: true,
          remarks:'扣除项'
        },
        {
          label:'督查罚款',
          prop:'name77',
          cell: true,
          remarks:'扣除项'
        },
        {
          label:'电话费',
          prop:'name78',
          cell: true,
          remarks:'扣除项'
        },
        {
          label:'学习强国',
          prop:'name79',
          cell: true,
          remarks:'扣除项'
        },
        {
          label:'宿舍管理费',
          prop:'name80',
          cell: true,
          remarks:'扣除项'
        },
        {
          label:'生育津贴',
          prop:'name81',
          cell: true,
          remarks:'扣除项'
        },
        {
          label:'五险一金个人',
          prop:'name82',
          cell: true,
          remarks:'扣除项'
        },
        {
          label:'扣除项',
          prop:'name83',
          cell: true,
          remarks:'扣除项'
        },
        {
          label:'保险（单位部分）',
          prop:'name84',
          cell: true,
          remarks:'保险（单位部分）'
        },
        {
          label:'保险（个人部分）',
          prop:'name85',
          cell: true,
          remarks:'保险（个人部分）'
        },
        {
          label:'公积金（单位部分）',
          prop:'name86',
          cell: true,
          remarks:'公积金（单位部分）'
        },
        {
          label:'公积金（个人部分）',
          prop:'name87',
          cell: true,
          remarks:'公积金（个人部分）'
        },
        {
          label:'应发工资',
          prop:'name88',
          cell: true,
          remarks:'应发工资'
        },
        {
          label:'个税',
          prop:'name89',
          cell: true,
          remarks:'个税'
        },
        {
          label:'实发工资（减去个人）',
          prop:'name90',
          cell: true,
          remarks:'实发工资（减去个人）'
        },
        {
          label:'备注',
          prop:'name91',
          cell: true,
          remarks:'备注'
        },
        {
          label:'自定义',
          prop:'name92',
          cell: true,
        },
        {
          label:' ',
          prop:'name93',
          cell: true,
        },
        {
          label:' ',
          prop:'name94',
          cell: true,
        },
        {
          label:'日照银行代发最终',
          prop:'name95',
          cell: true,
          remarks:'日照银行代发最终'
        },
        {
          label:'已付',
          prop:'name96',
          cell: true,
          remarks:'已付'
        },
        {
          label:'冲借款',
          prop:'name97',
          cell: true,
          remarks:'冲借款'
        },
        {
          label:'现金付款',
          prop:'name98',
          cell: true,
          remarks:'现金付款'
        },
        {
          label:'暂不付',
          prop:'name99',
          cell: true,
          remarks:'暂不付'
        },
        {
          label:'暂不付1',
          prop:'name100',
          cell: true,
          remarks:'暂不付1'
        },
        {
          label:'暂不付2',
          prop:'name101',
          cell: true,
          remarks:'暂不付2'
        },
        {
          label:'备注',
          prop:'name102',
          cell: true,
          remarks:'备注'
        }
      ]
    },
    }
  },
  created() {
    let windowHeight = document.documentElement.clientHeight || document.body.clientHeight;
    console.log(windowHeight)
    this.tableHeight = windowHeight - 140;
  },
  methods:{
    //自定义表头颜色
    headerColor(row, column, rowIndex, columnIndex){
      // console.log(row, column, rowIndex, columnIndex)
      switch (row.column.property) {
        case 'name14':
          return "color: #fff;background:#a4cf57"
        case 'name29':
          return "color: #fff;background:#a4cf57"
        case 'name31':
          return "color: #fff;background:#a4cf57"
        case 'name43':
          return "color: #fff;background:#a4cf57"
        case 'name47':
          return "color: #fff;background:#a4cf57"
        case 'name50':
          return "color: #fff;background:#a4cf57"
        case 'name75':
          return "color: #fff;background:#a4cf57"
        case 'name83':
          return "color: #fff;background:#a4cf57"
        case 'name84':
          return "color: #fff;background:#a4cf57"
        case 'name85':
          return "color: #fff;background:#a4cf57"
        case 'name86':
          return "color: #fff;background:#a4cf57"
        case 'name87':
          return "color: #fff;background:#a4cf57"
        case 'name88':
          return "color: #fff;background:#a4cf57"
        case 'name89':
          return "color: #fff;background:#a4cf57"
        case 'name90':
          return "color: #fff;background:#a4cf57"
      }
    },
    //修改提交触发
    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()
    },
    //导出全部
    exportAll(){
      let opt = {
        title: '工资条',
        column: this.optionList.column,
        data: this.dataList
      }
      this.$Export.excel({
        title: opt.title ,
        columns: opt.column,
        data: opt.data
      });
    },
    //导出工资条
    exportSalary(){
      let data = []
      for (let item in this.optionList.column){
        switch (this.optionList.column[item].prop) {
          case 'name14':
            data.push(this.optionList.column[item])
            break
          case 'name29':
            data.push(this.optionList.column[item])
            break
          case 'name31':
            data.push(this.optionList.column[item])
            break
          case 'name43':
            data.push(this.optionList.column[item])
            break
          case 'name47':
            data.push(this.optionList.column[item])
            break
          case 'name50':
            data.push(this.optionList.column[item])
            break
          case 'name75':
            data.push(this.optionList.column[item])
            break
          case 'name83':
            data.push(this.optionList.column[item])
            break
          case 'name84':
            data.push(this.optionList.column[item])
            break
          case 'name85':
            data.push(this.optionList.column[item])
            break
          case 'name86':
            data.push(this.optionList.column[item])
            break
          case 'name87':
            data.push(this.optionList.column[item])
            break
          case 'name88':
            data.push(this.optionList.column[item])
            break
          case 'name89':
            data.push(this.optionList.column[item])
            break
          case 'name90':
            data.push(this.optionList.column[item])
            break

        }
      }
      let opt = {
        title: '工资条',
        column: data,
        data: this.dataList
      }
      this.$Export.excel({
        title: opt.title ,
        columns: opt.column,
        data: opt.data
      });
    },
    //返回列表
    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>