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>
                </a-form-item>
            </a-col>
            <a-col :md="6" :sm="8">
                <a-form-item label="供应商分类">
                  <a-select  v-model="queryParam.cvenCodeType"  show-search allowClear     :filterOption="filterOption"   > 
                      <a-select-option
                     v-for="(item,index) in SupplierTypeOption"
                     :key="index"
                     :value="item.cvenCodeType">
                     {{item.cvenCodeType}}
                     </a-select-option>
                   </a-select>
                  <!-- <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-select v-model="queryParam.supplierState"  placeholder="请选择发货情况" >
                 <a-select-option value="">请选择</a-select-option>
                 <a-select-option value="正常">正常</a-select-option>
                 <a-select-option value="关闭">关闭</a-select-option>
               </a-select>
                  <!-- <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: 1200,}"
      >
      <!-- 供应商编码 -->
      <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" >
          <a-form-model-item prop="supplier" :rules="rules.supplier" v-if="record.status == '0'">
            <a-select  v-model="record.supplier"  show-search     :filterOption="filterOption"  @change="changeSuplier($event,record)" style="width: 200px" > 
                      <a-select-option
                     v-for="(item,index) in option"
                     :key="index"
                     :value="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-select  v-model="record.cvenCodeType"  show-search     :filterOption="filterOption"  style="width: 120px" > 
                      <a-select-option
                     v-for="(item,index) in SupplierTypeOption"
                     :key="index"
                     :value="item.cvenCodeType">
                     {{item.cvenCodeType}}
                     </a-select-option>
                   </a-select>
              <!-- <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)">
                 <i slot="suffix">%</i>
                </a-input>
          </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: 120px" 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,getSupplierTypeOption} 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: '供应商名称', 
          dataIndex: 'supplier', 
          width: 150, 
          className: 'replacecolor' ,
          scopedSlots: { customRender: 'supplier' },
          },
          {
          title: '产能额度（月）',
          dataIndex: 'capacityQuota',
          width: 120,
          className: 'replacecolor',
          scopedSlots: { customRender: 'capacityQuota' },
        },
        {
          title: '工时（时/月）',
          dataIndex: 'workingHours',
          width: 100,
          className: 'replacecolor',
          scopedSlots: { customRender: 'workingHours' },
        },
        {
          title: '上浮区间%',
          dataIndex: 'capacitySection',
          width: 80,
          className: 'replacecolor',
          scopedSlots: { customRender: 'capacitySection' },
        },
        {
          title: '供应商编码',
          width: 100,
          dataIndex: 'supplierCode',
          className: 'replacecolor',
          scopedSlots: { customRender: 'supplierCode' },
        },
          { 
          title: '供应商分类', 
          dataIndex: 'cvenCodeType', 
          width: 100, 
          scopedSlots: { customRender: 'cvenCodeType' },
          className: 'replacecolor' ,
          },
        
        
        
        { 
          title: '供应商状态', 
          dataIndex: 'supplierState', 
          width: 100, 
          className: 'replacecolor' ,
          scopedSlots: { customRender: 'supplierState' },
        },
        { 
          title: '备注', 
          dataIndex: 'remarks', 
          width: 140, 
          className: 'replacecolor' ,
          // ellipsis: true,
          scopedSlots: { customRender: 'remarks' },
        },
        
      ],
      option:[],
      suplierListData: [
      ],
      selectedRowKeys:[],
      selectedRows:[],
      SupplierTypeOption:[],
      loading: false, // 表格加载

      // 查询条件
      queryParam: {
        cvenCodeType:'成衣厂',
        supplierState:'正常'
       },
      pagination: {
        
        // total: '',
        // current: 0,
        // pageSize: 0
      },
      defaultMode:'add'
      
    }
  },

  async created() {
    await this.getOption()
    this.getSupplierList()
  
    
  },
  computed: {},
  mounted() {},
  methods: {
    getOption(){
      option().then(res => {  
      this.option = res
    })
    getSupplierTypeOption().then(res => {  
      this.SupplierTypeOption = res
    })
    },
    // 分页查询
    getSupplierList(){
      this.$nextTick(() => {
        // this.queryParam.pageSize = 20
        supplierList(this.queryParam).then(res => {
          if (res.success) {
            this.suplierListData = res.result.records;
            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 = {
        cvenCodeType:'成衣厂',
        supplierState:'正常'
      }
      this.getSupplierList()
    },
    //报关品名下拉框模糊搜索
    filterOption(input, option) {
      return option.componentOptions.children[0].text.toLowerCase().indexOf(input.toLowerCase()) >= 0
    },
    addLine(){
      var operation = 0
      this.suplierListData.map(item=>{
        if(item.status == 0){
          operation +=1
        }
      })
      if(operation == 0){
        var line ={
        supplierCode:'',
        supplier:'',
        capacityQuota:'',
        workingHours:'',
        cvenCodeType:'成衣厂',
        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(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 == record.supplier) {
          record.supplierCode = item.supplier_code
          record.cvenCodeType = item.cvenCodeType
        }
      })
    },
    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;
}
/deep/.ant-table-tbody .ant-table-row td{
     padding-top: 0px;
    padding-bottom: 0px;
}
</style>