rmLayGaoujU9O46l603ccl_plm-vue/src/views/modules/base/laborClass.vue

<script>
import {queryLaborClass, updateLaborClass} from "../../../api/base/laborClass";

export default {
  name: "laborClass",
  props:{
    height:{
      type: [Number,String],
      default: '78vh'
    }
  },
  data(){
    return{
      dataList:[],
      queryLoading:false,
      laborClass:{

      },
      queryParams:{
        levelId:'',
        levelDesc:'',
        active:'',
      },
      no:1,
      size:50,
      total:0,
      saveLoading:false,
      saveVisible:false,
      rules:{
        currentLevelCost:[{required: true,message: '人工等级成本不能为空',trigger: ['change','blur']}]
      },
      columns:[
        {
          userId: this.$store.state.user.name,
          functionId: 100001010,
          serialNumber: '100001010Table1LevelId',
          tableId: '100001010Table1',
          tableName: '人员等级信息表',
          columnProp: 'levelId',
          headerAlign: 'center',
          align: 'left',
          columnLabel: '人员等级编码',
          columnHidden: false,
          columnImage: false,
          columnSortable: false,
          sortLv: 0,
          status: true,
          fixed: '',
          columnWidth: 140
        },
        {
          userId: this.$store.state.user.name,
          functionId: 100001010,
          serialNumber: '100001010Table1LevelDesc',
          tableId: '100001010Table1',
          tableName: '人员等级信息表',
          columnProp: 'levelDesc',
          headerAlign: 'center',
          align: 'left',
          columnLabel: '人员等级描述',
          columnHidden: false,
          columnImage: false,
          columnSortable: false,
          sortLv: 0,
          status: true,
          fixed: '',
          columnWidth: 180
        },
        {
          userId: this.$store.state.user.name,
          functionId: 100001010,
          serialNumber: '100001010Table1CurrentLevelCost',
          tableId: '100001010Table1',
          tableName: '人员等级信息表',
          columnProp: 'currentLevelCost',
          headerAlign: 'center',
          align: 'right',
          columnLabel: '人员等级成本',
          columnHidden: false,
          columnImage: false,
          columnSortable: false,
          sortLv: 0,
          status: true,
          fixed: '',
          columnWidth: 100
        },
        {
          userId: this.$store.state.user.name,
          functionId: 100001010,
          serialNumber: '100001010Table1Active',
          tableId: '100001010Table1',
          tableName: '人员等级信息表',
          columnProp: 'active',
          headerAlign: 'center',
          align: 'center',
          columnLabel: '是否在用',
          columnHidden: false,
          columnImage: false,
          columnSortable: false,
          sortLv: 0,
          status: true,
          fixed: '',
          columnWidth: 80
        },
      ],
    }
  },
  methods:{
    handleQuery(){
      let params = {
        ...this.queryParams,
        site:this.$store.state.user.site,
        no:this.no,
        size:this.size
      }
      this.queryLoading = true;
      queryLaborClass(params).then(({data})=>{
        if (data && data.code === 0){
          this.dataList = data.rows;
          this.total = data.total;
        }else {
          this.$message.error(data.msg)
        }
        this.queryLoading = false;
      }).catch(err=>{
        this.$message.error(err);
        this.queryLoading = false;
      })
    },
    handleUpdate(row){
      this.laborClass = {
        ...row
      }
      this.saveVisible = true;
    },
    handleSizeChange(val){
      this.size = val;
      this.handleQuery();
    },
    handlePageChange(val){
      this.no = val;
      this.handleQuery();
    },
    handleUpdateLaborClass(){
      this.$refs.saveForm.validate((valid,obj) => {
        if (valid){
          let params = {
            ...this.laborClass,
          }
          this.saveLoading = true;
          updateLaborClass(params).then(({data})=>{
            if (data && data.code === 0){
              this.saveVisible = false;
              this.$message.success(data.msg)
              this.handleQuery();
            }else {
              this.$message.warning(data.msg)
            }
            this.saveLoading = false;
          }).catch((error)=>{
            this.$message.error(error)
            this.saveLoading = false;
          })
        }else {
          let i = 1;
          for (let key in obj){
            this.$message.warning(obj[key][0].message)
            if (i === 1){
              return
            }
            i++;
          }
        }
      })
    }
  },
  watch:{
    queryLoading(newVal,oldVal){
      if (newVal){
        setTimeout(()=>{
          this.queryLoading = false;
        },5000)
      }
    },
    saveLoading(newVal,oldVal){
      if (newVal){
        setTimeout(()=>{
          this.saveLoading = false;
        },5000)
      }
    }
  },
  created() {
    this.handleQuery();
  }
}
</script>

<template>
<div>
  <el-form :model="queryParams" label-position="top" style="width: 1000px">
    <el-row :gutter="10">
      <el-col :span="4">
        <el-form-item label="人员等级编码">
          <el-input v-model="queryParams.levelId"></el-input>
        </el-form-item>
      </el-col>
      <el-col :span="4">
        <el-form-item label="人员等级描述">
          <el-input v-model="queryParams.levelDesc"></el-input>
        </el-form-item>
      </el-col>
      <el-col :span="3">
        <el-form-item label="是否在用">
          <el-select v-model="queryParams.active" style="width: 100%">
            <el-option label="全部" value=""></el-option>
            <el-option label="Y" value="Y"></el-option>
            <el-option label="N" value="N"></el-option>
          </el-select>
        </el-form-item>
      </el-col>
      <el-col :span="4">
        <el-form-item label=" ">
          <el-button type="primary" @click="handleQuery">查询</el-button>
        </el-form-item>
      </el-col>
    </el-row>
  </el-form>

  <el-table :data="dataList" v-loading="queryLoading" border :height="height">
    <el-table-column
      v-for="(item,index) in columns" :key="index"
      :sortable="item.columnSortable"
      :prop="item.columnProp"
      :header-align="item.headerAlign"
      :show-overflow-tooltip="item.showOverflowTooltip"
      :align="item.align"
      :fixed="item.fixed===''?false:item.fixed"
      :min-width="item.columnWidth"
      :label="item.columnLabel">
      <template slot-scope="scope">
        <span v-if="!item.columnHidden">{{ scope.row[item.columnProp] }}</span>
        <span v-if="item.columnImage"><img :src="scope.row[item.columnProp]" style="width: 100px; height: 80px"/></span>
      </template>
    </el-table-column>
    <el-table-column label="操作" align="center">
      <template slot-scope="{row,$index}">
        <a @click="handleUpdate(row)">编辑</a>
      </template>
    </el-table-column>
  </el-table>

  <el-pagination @size-change="handleSizeChange"
                 @current-change="handlePageChange"
                 :current-page="no"
                 :page-sizes="[50, 100, 200, 500]"
                 :page-size="size"
                 :total="total"
                 layout="total,sizes, prev, pager, next, jumper">
  </el-pagination>

  <el-dialog v-drag title="人员等级" :visible.sync="saveVisible" width="400px" :close-on-click-modal="false">
    <el-form :model="laborClass" ref="saveForm" label-position="top" :rules="rules">
      <el-row :gutter="10">
        <el-col :span="12">
          <el-form-item label="人员等级编码">
            <el-input v-model="laborClass.levelId" disabled></el-input>
          </el-form-item>
        </el-col>
        <el-col :span="12">
          <el-form-item label="人员等级描述">
            <el-input v-model="laborClass.levelDesc" disabled></el-input>
          </el-form-item>
        </el-col>
        <el-col :span="12">
          <el-form-item label="人员等级成本" prop="currentLevelCost" :show-message="false">
            <el-input-number v-model="laborClass.currentLevelCost" :min="0" :controls="false"></el-input-number>
          </el-form-item>
        </el-col>
        <el-col :span="12">
          <el-form-item label="是否在用">
            <el-select v-model="laborClass.active" style="width: 100%" disabled>
              <el-option label="Y" value="Y"></el-option>
              <el-option label="N" value="N"></el-option>
            </el-select>
          </el-form-item>
        </el-col>
      </el-row>
    </el-form>
    <div slot="footer" class="dialog-footer">
      <el-button type="primary" :loading="saveLoading" @click="handleUpdateLaborClass">确 定</el-button>
      <el-button @click="saveVisible = false">取 消</el-button>
    </div>
  </el-dialog>
</div>
</template>

<style scoped>

</style>