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

<script>
import {queryWorkCenterCost, updateWorkCenterCost} from "../../../api/base/workCenterCost";

export default {
  name: "workCenterCost",
  props:{
    height:{
      type: [Number],
    }
  },
  data(){
    return{
      scrollHeight:0,
      dataList:[],
      queryLoading:false,
      workCenterCost:{

      },
      queryParams:{
        workCenterNo:'',
        workCenterDesc:'',
        workCenterType:'',
        active:'',
      },
      no:1,
      size:50,
      total:0,
      saveLoading:false,
      saveVisible:false,
      rules:{
        currentWorkCenterCost:[{required: true,message: '加工中心成本不能为空',trigger: ['change','blur']}]
      },
      columns:[
        {
          userId: this.$store.state.user.name,
          functionId: 100001011,
          serialNumber: '100001011Table1WorkCenterNo',
          tableId: '100001011Table1',
          tableName: '加工中心信息表',
          columnProp: 'workCenterNo',
          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: 100001011,
          serialNumber: '100001011Table1WorkCenterDesc',
          tableId: '100001011Table1',
          tableName: '加工中心信息表',
          columnProp: 'workCenterDesc',
          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: 100001011,
          serialNumber: '100001011Table1WorkCenterType',
          tableId: '100001011Table1',
          tableName: '加工中心信息表',
          columnProp: 'workCenterType',
          headerAlign: 'center',
          align: 'center',
          columnLabel: '加工中心类型',
          columnHidden: false,
          columnImage: false,
          columnSortable: false,
          sortLv: 0,
          status: true,
          fixed: '',
          columnWidth: 80
        },
        {
          userId: this.$store.state.user.name,
          functionId: 100001011,
          serialNumber: '100001011Table1CurrentWorkCenterCost',
          tableId: '100001011Table1',
          tableName: '加工中心信息表',
          columnProp: 'currentWorkCenterCost',
          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: 100001011,
          serialNumber: '100001011Table1Active',
          tableId: '100001011Table1',
          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;
      queryWorkCenterCost(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.workCenterCost = {
        ...row
      }
      this.saveVisible = true;
    },
    handleSizeChange(val){
      this.size = val;
      this.handleQuery();
    },
    handlePageChange(val){
      this.no = val;
      this.handleQuery();
    },
    handleUpdateWorkCenterCost(){
      this.$refs.saveForm.validate((valid,obj) => {
        if (valid){
          let params = {
            ...this.workCenterCost,
          }
          this.saveLoading = true;
          updateWorkCenterCost(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++;
          }
        }
      })
    },
    setScrollHeight(){
      this.scrollHeight = window.innerHeight-120
    }
  },
  watch:{
    queryLoading(newVal,oldVal){
      if (newVal){
        setTimeout(()=>{
          this.queryLoading = false;
        },5000)
      }
    },
    saveLoading(newVal,oldVal){
      if (newVal){
        setTimeout(()=>{
          this.saveLoading = false;
        },5000)
      }
    }
  },
  created() {
    this.handleQuery();
    if (!this.height){
      this.setScrollHeight()
      window.addEventListener('resize',this.setScrollHeight)
    }else {
      this.scrollHeight = this.height
    }
  },
  destroyed() {
    window.removeEventListener('resize',this.setScrollHeight)
  }
}
</script>

<template>
<div class="full-block flex-layout" :style="{height:scrollHeight+'px'}">
  <el-form class="flex-none" :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.workCenterNo"></el-input>
        </el-form-item>
      </el-col>
      <el-col :span="4">
        <el-form-item label="加工中心描述">
          <el-input v-model="queryParams.workCenterDesc"></el-input>
        </el-form-item>
      </el-col>
      <el-col :span="3">
        <el-form-item label="加工中心类型">
          <el-select v-model="queryParams.workCenterType" style="width: 100%">
            <el-option label="全部" value=""></el-option>
            <el-option label="内部" value="内部"></el-option>
            <el-option label="外部" value="外部"></el-option>
          </el-select>
        </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 class="flex-auto" :data="dataList" v-loading="queryLoading" border height="100%">
    <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 class="flex-none"
                 @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="workCenterCost" ref="saveForm" label-position="top" :rules="rules">
      <el-row :gutter="10">
        <el-col :span="12">
          <el-form-item label="加工中心编码">
            <el-input v-model="workCenterCost.workCenterNo" disabled></el-input>
          </el-form-item>
        </el-col>
        <el-col :span="12">
          <el-form-item label="加工中心描述">
            <el-input v-model="workCenterCost.workCenterDesc" disabled></el-input>
          </el-form-item>
        </el-col>
        <el-col :span="12">
          <el-form-item label="加工中心成本" prop="currentWorkCenterCost" :show-message="false">
            <el-input-number v-model="workCenterCost.currentWorkCenterCost" :min="0" :controls="false"></el-input-number>
          </el-form-item>
        </el-col>
        <el-col :span="12">
          <el-form-item label="加工中心类型">
            <el-select v-model="workCenterCost.workCenterType" style="width: 100%" disabled>
              <el-option label="内部" value="内部"></el-option>
              <el-option label="外部" value="外部"></el-option>
            </el-select>
          </el-form-item>
        </el-col>
        <el-col :span="12">
          <el-form-item label="是否在用">
            <el-select v-model="workCenterCost.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="handleUpdateWorkCenterCost">确 定</el-button>
      <el-button @click="saveVisible = false">取 消</el-button>
    </div>
  </el-dialog>
</div>
</template>

<style scoped>

</style>