sen-yu-new-web/src/views/reportForms/supplier-capacity.vue

<template>
  <!-- 供应商产能维护 -->
  <div id="preBookList">
    <!-- 查询区域 -->
    <a-card :bordered="false">
      <div class="table-page-search-wrapper">
        <a-form layout="inline" @keyup.enter.native="searchQuery">
          <a-row :gutter="24">
            <a-col :md="6" :sm="8">
                <a-form-item label="供应商">
                  <a-input placeholder="请输入供应商" v-model="queryParam.supplier"></a-input>
                   <!-- <j-search-select-tag
                  placeholder="请选择供应商"
                  v-model="queryParam.supplier"
                  dict="view_supplier,supplier,supplier">
                </j-search-select-tag> -->
                </a-form-item>
            </a-col>
            <a-col :md="6" :sm="8">
                <a-form-item label="供应商分类">
                  <a-input placeholder="请输入" v-model="queryParam.cvenCodeType"></a-input>
                </a-form-item>
            </a-col>
            <a-col :md="6" :sm="8">
                <a-form-item label="供应商状态">
                  <a-input placeholder="请输入" v-model="queryParam.supplierState"></a-input>
                </a-form-item>
            </a-col>

            
            <a-col :md="6" :sm="8">
              <span style="float: left;overflow: hidden;" class="table-page-search-submitButtons">
                <a-button type="primary" @click="getSupplierList" icon="search">查询</a-button>
                <a-button type="primary" @click="searchReset" icon="reload" style="margin-left: 8px">重置</a-button>
                <a @click="handleToggleSearch" style="margin-left: 8px">
                  {{ toggleSearchStatus ? '收起' : '展开' }}
                  <a-icon :type="toggleSearchStatus ? 'up' : 'down'" />
                </a>
              </span>
            </a-col>
          </a-row>
        </a-form>
      </div>
    </a-card>

    <!-- 操作按钮区域 新增-->
    <a-card :bordered="false" style="marginTop:10px;">
      <div class="table-operator">
        <a-button type="primary"  icon="plus" @click="addLine">增行</a-button>
        <a-button type="primary"  icon="plus" @click="editLine">修改</a-button>
        <a-button type="primary"  icon="plus" @click="delectLLine">删除</a-button>
        <a-button type="primary"  icon="plus" @click="saveLine">保存</a-button>
        <a-button type="primary"  icon="plus" @click="cancelLine">取消</a-button>
        <!-- <a-button type="primary"  icon="plus" @click="subitLine">提交</a-button>
        <a-button type="primary"  icon="plus" @click="cancelSubitLine">取消提交</a-button> -->
      </div>

      <!-- 子表 -->
      <a-table
        bordered
        v-if="suplierListData"
        :row-key="record => record.id"
        :columns="suplierListColumns"
        :data-source="suplierListData"
        :loading="loading"
        :height="500"
        :pagination="pagination"
        @change="handleTableChange"
        :rowSelection="{ selectedRowKeys: selectedRowKeys,onChange: onSelectChange }"
        :scroll="{ x: 1800,}"
      >
      <!-- 供应商编码 -->
      <template slot="supplierCode" slot-scope="text, record, index" >
          <a-form-model-item prop="supplierCode" :rules="rules.supplierCode" v-if="record.status == '0'">
              <a-input placeholder="根据供应商名称自动带出" v-model="record.supplierCode" readOnly></a-input>
          </a-form-model-item>
          <a-form-model-item prop="supplierCode" :rules="rules.supplierCode" v-if="record.status == '1'">
               <span>{{record.supplierCode}}</span>
          </a-form-model-item>
      </template>
      <!-- 供应商名称 -->
      <template slot="supplier" slot-scope="text, record, index" >
          <a-form-model-item prop="supplier" :rules="rules.supplier" v-if="record.status == '0'">
               <a-select v-model="record.supplier" style="width: 200px" placeholder="请选择供应商名称" @change="changeSuplier($event,record)">
                 <a-select-option v-for="(item,index) in option" :key="item.supplier">{{item.supplier}}</a-select-option>
               </a-select>
          </a-form-model-item>
          <a-form-model-item prop="supplier" :rules="rules.supplier" v-if="record.status == '1'">
               <span>{{record.supplier}}</span>
          </a-form-model-item>
      </template>
       <!-- 供应商分类 -->
       <template slot="cvenCodeType" slot-scope="text, record, index" >
          <a-form-model-item prop="cvenCodeType" :rules="rules.cvenCodeType" v-if="record.status == '0'">
              <a-input style="width:100%" type="text" v-model="record.cvenCodeType"  />
          </a-form-model-item>
          <a-form-model-item prop="cvenCodeType" :rules="rules.cvenCodeType" v-if="record.status == '1'">
               <span>{{record.cvenCodeType}}</span>
          </a-form-model-item>
      </template>
      <!-- 产能额度（月） -->
      <template slot="capacityQuota" slot-scope="text, record, index" >
          <a-form-model-item prop="capacityQuota" :rules="rules.capacityQuota" v-if="record.status == '0'">
              <a-input style="width:100%" type="text" v-model="record.capacityQuota"  />
          </a-form-model-item>
          <a-form-model-item prop="capacityQuota" :rules="rules.capacityQuota" v-if="record.status == '1'">
               <span>{{record.capacityQuota}}</span>
          </a-form-model-item>
      </template>
      <!-- 工时（月） -->
      <template slot="workingHours" slot-scope="text, record, index" >
          <a-form-model-item prop="workingHours" :rules="rules.workingHours" v-if="record.status == '0'">
              <a-input style="width:100%" type="text" v-model="record.workingHours"  />
          </a-form-model-item>
          <a-form-model-item prop="workingHours" :rules="rules.workingHours" v-if="record.status == '1'">
               <span>{{record.workingHours}}</span>
          </a-form-model-item>
      </template>
      <!-- 产能额度上浮区间 -->
      <template slot="capacitySection" slot-scope="text, record, index" >
          <a-form-model-item prop="capacitySection" :rules="rules.capacitySection" v-if="record.status == '0'">
              <a-input style="width:100%" type="text" v-model="record.capacitySection"  @change="changeCapacitySection(record)"/>
          </a-form-model-item>
          <a-form-model-item prop="capacitySection" :rules="rules.capacitySection" v-if="record.status == '1'">
               <span>{{record.capacitySection}}</span>
          </a-form-model-item>
      </template>
      <!-- 供应商状态 -->
      <template slot="supplierState" slot-scope="text, record, index" >
          <a-form-model-item prop="supplierState" :rules="rules.supplierState" v-if="record.status == '0'">
              <a-select v-model="record.supplierState" style="width: 200px" placeholder="请选择发货情况" >
                 <a-select-option value="正常">正常</a-select-option>
                 <a-select-option value="关闭">关闭</a-select-option>
               </a-select>
          </a-form-model-item>
          <a-form-model-item prop="supplierState" :rules="rules.supplierState" v-if="record.status == '1'">
               <span>{{record.supplierState}}</span>
          </a-form-model-item>
      </template>
      <!-- 备注 -->
      <template slot="remarks" slot-scope="text, record, index" >
          <a-form-model-item prop="remarks" :rules="rules.remarks" v-if="record.status == '0'">
              <a-input style="width:100%" type="text" v-model="record.remarks"  />
          </a-form-model-item>
          <a-form-model-item prop="remarks" :rules="rules.remarks" v-if="record.status == '1'">
               <span>{{record.remarks}}</span>
          </a-form-model-item>
      </template>
      </a-table>
    </a-card>
  </div>
</template>

<script>
import { JeecgListMixin } from '@/mixins/JeecgListMixin'
import JEllipsis from '@/components/jeecg/JEllipsis'
import moment from 'moment'

import { supplierList,addSupplierList,editSupplierList,deleteSupplierList ,option} from '@api/reportForms/supplier-capacity'

export default {
  name: 'PreBookList', // 预托书列表
  mixins: [JeecgListMixin],
  components: { JEllipsis, moment},
  data() {
    let ellipsis = (v, l = 20) => <j-ellipsis value={v} length={l} /> // 省略

    return {
      // 表头
      suplierListColumns: [
        {
          title: '供应商编码',
          width: 130,
          dataIndex: 'supplierCode',
          className: 'replacecolor',
          scopedSlots: { customRender: 'supplierCode' },
        },
        { 
          title: '供应商名称', 
          dataIndex: 'supplier', 
          width: 150, 
          className: 'replacecolor' ,
          scopedSlots: { customRender: 'supplier' },
          },
          { 
          title: '供应商分类', 
          dataIndex: 'cvenCodeType', 
          width: 150, 
          scopedSlots: { customRender: 'cvenCodeType' },
          className: 'replacecolor' ,
          },
        {
          title: '产能额度（月）',
          dataIndex: 'capacityQuota',
          width: 120,
          className: 'replacecolor',
          scopedSlots: { customRender: 'capacityQuota' },
        },
        {
          title: '工时（月）',
          dataIndex: 'workingHours',
          width: 150,
          className: 'replacecolor',
          scopedSlots: { customRender: 'workingHours' },
        },
         {
          title: '产能额度上浮区间',
          dataIndex: 'capacitySection',
          width: 150,
          className: 'replacecolor',
          scopedSlots: { customRender: 'capacitySection' },
        },
        { 
          title: '供应商状态', 
          dataIndex: 'supplierState', 
          width: 170, 
          className: 'replacecolor' ,
          scopedSlots: { customRender: 'supplierState' },
        },
        { 
          title: '备注', 
          dataIndex: 'remarks', 
          width: 120, 
          className: 'replacecolor' ,
          scopedSlots: { customRender: 'remarks' },
        },
        
      ],
      option:[],
      suplierListData: [
      ],
      selectedRowKeys:[],
      selectedRows:[],
      loading: false, // 表格加载

      // 查询条件
      queryParam: { },
      pagination: {
        // total: '',
        // current: 0,
        // pageSize: 0
      },
      defaultMode:'add'
      
    }
  },

  created() {
    this.getSupplierList()
    option().then(res => {  
      this.option = res
 })
  },
  computed: {},
  mounted() {},
  methods: {
    // 分页查询
    getSupplierList(){
      this.$nextTick(() => {
        // this.queryParam.pageSize = 20
        supplierList(this.queryParam).then(res => {
          if (res.success) {
            this.suplierListData = res.result;
            this.loading = false
            this.pagination = {
              total: res.result.total,
              current: res.result.current,
              pageSize: res.result.size
            }
            if(this.suplierListData.length !== 0){
              this.suplierListData.map(item=>{
               item.status = '1'
              })
            }
          
          }else{
              this.$message.error(res.message);
          }
        })
      })
    },
    //重置
    searchReset(){
      this.queryParam = {}
      this.getSupplierList()
    },

    addLine(){
      var operation = 0
      this.suplierListData.map(item=>{
        if(item.status == 0){
          operation +=1
        }
      })
      if(operation == 0){
        var line ={
        supplierCode:'',
        supplier:'',
        capacityQuota:'',
        workingHours:'',
        supplierState:'',
        remarks:'',
        status : '0'
      }
      this.suplierListData.unshift(line)
      }else{
        this.$message.error('当前有操作未完成');
      }
      
    },
    editLine(){
       var operation = 0
      this.suplierListData.map(item=>{
        if(item.status == 0){
          operation +=1
        }
      })
      if(this.selectedRowKeys.length == '0'){
        this.$message.error('请勾选需要修改的数据');
      }else if(this.selectedRowKeys.length > 1){
        this.$message.error('一次只允许修改一行数据');
      }else if(this.selectedRows[0].state =='1'){
        this.$message.error('已提交数据不可修改');
      }else if(operation !== 0){
        this.$message.error('当前有操作未完成');
      }else{
        this.suplierListData.map(item =>{
          if(item.id == this.selectedRows[0].id){
            item.status = '0'
          }
        })
        this.defaultMode = 'edit'
        this.$forceUpdate()
        
      }
    },
    changeSuplier(val,record){
      this.option.map(item =>{
        if(item.supplier == val) {
          record.supplierCode = item.supplier_code
        }
      })
    },
    changeCapacitySection(record){
      if(record.capacitySection < 0 || record.capacitySection>100){
        this.$message.destroy();
        this.$message.error('产能额度上浮区间必须是大于0小于100',1);
      }
    },
    delectLLine(){
       if(this.selectedRowKeys.length == '0'){
        this.$message.error('请勾选需要删除的数据');
      }else if(this.selectedRowKeys.length > 1){
        this.$message.error('一次只允许删除一行数据');
      }else{
        var objNew = this.selectedRows[0]
        objNew.state = '-1'
        editSupplierList(objNew).then(res => {
          if (res.success) {
            this.$message.success('删除成功');
            this.getSupplierList()
            this.selectedRowKeys = []
            this.selectedRows = []
          }else{
              this.$message.error(res.message);
          }
      })
      }
    },
    saveLine(){
      var newObj = {}
      //获取修改的数据
      this.suplierListData.map(item =>{
        if(item.status == 0){
           newObj = item
        }
      })
      //校验产能额度上浮区间
      if(newObj.capacitySection == '' || !newObj.capacitySection){
          this.$message.error('产能额度上浮区间为必填',1);
        }else if(newObj.capacitySection < 0 || newObj.capacitySection>100){
          this.$message.error('产能额度上浮区间必须是大于0小于100',1);
        }else{
           if(this.defaultMode == 'add'){
              newObj.state = '1'
              addSupplierList(newObj).then(res => {
              if (res.success) {
                this.$message.success('新增成功');
                this.getSupplierList()
              }else{
                this.$message.error(res.message);
              }
             })       
           }else {
              editSupplierList(newObj).then(res => {
              if (res.success) {
                 this.$message.success('修改成功');
                 this.getSupplierList()
                 this.selectedRowKeys = []
                 this.selectedRows = []
              }else{
                  this.$message.error(res.message);
              }
              //清空勾选恢复默认
              this.selectedRowKeys = []
              this.selectedRows = []
               this.defaultMode = 'add'
             })   
         }
      }

    },
    cancelLine(){
        this.getSupplierList()
        this.defaultMode ='add'
        this.selectedRowKeys=[]
        this.selectedRows = []
    },
    subitLine(){
      if(this.selectedRowKeys.length ==0){
        this.$message.error('请勾选需要提交的数据');
      }else if(this.selectedRowKeys.length > 1){
        this.$message.error('一次只可提交一行数据');
      }else if(this.selectedRows[0].state == '1'){
        this.$message.error('不可重复提交');
      }else {
        var objNew = this.selectedRows[0]
        objNew.state = '1'
        editSupplierList(objNew).then(res => {
          if (res.success) {
            this.$message.success('提交成功');
            this.getSupplierList()
            this.selectedRowKeys = []
            this.selectedRows = []
          }else{
              this.$message.error(res.message);
          }
      })
      }   

    },
    cancelSubitLine(){
      if(this.selectedRowKeys.length ==0){
        this.$message.error('请勾选需要取消提交的数据');
      }else if(this.selectedRowKeys.length > 1){
        this.$message.error('一次只可取消一行');
      }else if(this.selectedRows[0].state == '0'){
        this.$message.error('选择的数据未提交');
      }else{
        var objNew = this.selectedRows[0]
        objNew.state = '0'
        editSupplierList(objNew).then(res => {
          if (res.success) {
            this.$message.success('取消提交成功');
            this.getSupplierList()
            this.selectedRowKeys = []
            this.selectedRows = []
          }else{
              this.$message.error(res.message);
          }
      })
      }
    },
     // 选中行
    onSelectChange(keys, rows) {
      this.selectedRowKeys = keys
      this.selectedRows = rows
    },
    // 分页、排序、筛选变化时触发
    handleTableChange(pagination, filters, sorter) {
      // console.log('当前页信息>>>>',pagination)
      this.queryParam.pageNo = pagination.current
      this.getSupplierList()
    }
}
}
</script>
<style lang="less" scoped>
@import '~@assets/less/common.less';
@import '~@assets/less/overwriter.less';
/deep/ .ant-table-thead > tr > th {
  text-align: center;
  // font-weight: 700;
}

/deep/ .ant-table-tbody {
  text-align: center;
}

/deep/ .ant-form-item {
  margin-bottom: 0;
}
</style>