供应商产能维护

src/views/reportForms/supplier-capacity.vue

@@ -1,20 +1,112 @@
 <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">
+              <span style="float: left;overflow: hidden;" class="table-page-search-submitButtons">
+                <a-button type="primary" @click="searchQuery" 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" @change="subitLine">提交</a-button>
+        <a-button type="primary"  icon="plus" @click="cancelSubitLine">取消提交</a-button>
+      </div>
 
       <!-- 子表 -->
       <a-table
         bordered
-        v-if="preBookListData"
+        v-if="suplierListData"
         :rowKey=" (row, index) => {return index;}"
-        :columns="preBookListColumns"
-        :data-source="preBookListData"
+        :columns="suplierListColumns"
+        :data-source="suplierListData"
         :loading="loading"
         :pagination="pagination"
         @change="handleTableChange"
+        :rowSelection="{ onChange: onSelectChange }"
         :scroll="{ x: 1500,y: 500 }"
       >
+      <!-- 供应商编码 -->
+      <template slot="supplierCode" slot-scope="text, record, index" >
+          <a-form-model-item prop="supplierCode" :rules="rules.supplierCode" v-if="record.status == '0'">
+              <a-input style="width:100%" type="text" v-model="record.supplierCode"  />
+          </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="supplierName" slot-scope="text, record, index" >
+          <a-form-model-item prop="supplierName" :rules="rules.supplierName" v-if="record.status == '0'">
+              <a-input style="width:100%" type="text" v-model="record.supplierName"  />
+          </a-form-model-item>
+          <a-form-model-item prop="supplierName" :rules="rules.supplierName" v-if="record.status == '1'">
+               <span>{{record.supplierName}}</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.supplierName}}</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="supplierStatus" slot-scope="text, record, index" >
+          <a-form-model-item prop="supplierStatus" :rules="rules.supplierStatus" v-if="record.status == '0'">
+              <a-input style="width:100%" type="text" v-model="record.supplierStatus"  />
+          </a-form-model-item>
+          <a-form-model-item prop="supplierStatus" :rules="rules.supplierStatus" v-if="record.status == '1'">
+               <span>{{record.supplierStatus}}</span>
+          </a-form-model-item>
+      </template>
+      <!-- 备注 -->
+      <template slot="memo" slot-scope="text, record, index" >
+          <a-form-model-item prop="memo" :rules="rules.memo" v-if="record.status == '0'">
+              <a-input style="width:100%" type="text" v-model="record.memo"  />
+          </a-form-model-item>
+          <a-form-model-item prop="memo" :rules="rules.memo" v-if="record.status == '1'">
+               <span>{{record.memo}}</span>
+          </a-form-model-item>
+      </template>
       </a-table>
     </a-card>
   </div>
@@ -28,20 +120,150 @@ import moment from 'moment'
 export default {
   name: 'PreBookList', // 预托书列表
   mixins: [JeecgListMixin],
-  components: { JEllipsis, moment, addPreBookDrawer, detailsPreBookDrawer, editPreBookDrawer },
+  components: { JEllipsis, moment},
   data() {
     let ellipsis = (v, l = 20) => <j-ellipsis value={v} length={l} /> // 省略
 
     return {
+      // 表头
+      suplierListColumns: [
+        {
+          title: '供应商编码',
+          width: 220,
+          dataIndex: 'supplierCode',
+          className: 'replacecolor',
+          scopedSlots: { customRender: 'supplierCode' },
+        },
+        { 
+          title: '供应商名称', 
+          dataIndex: 'supplierName', 
+          width: 120, 
+          className: 'replacecolor' ,
+          scopedSlots: { customRender: 'supplierName' },
+          },
+        {
+          title: '产能额度（月）',
+          dataIndex: 'capacityQuota',
+          width: 120,
+          className: 'replacecolor',
+          scopedSlots: { customRender: 'capacityQuota' },
+        },
+        {
+          title: '工时（月）',
+          dataIndex: 'workingHours',
+          width: 150,
+          className: 'replacecolor',
+          scopedSlots: { customRender: 'workingHours' },
+        },
+        { 
+          title: '供应商状态', 
+          dataIndex: 'supplierStatus', 
+          width: 120, 
+          className: 'replacecolor' ,
+          scopedSlots: { customRender: 'supplierStatus' },
+        },
+        { 
+          title: '备注', 
+          dataIndex: 'memo', 
+          width: 120, 
+          className: 'replacecolor' ,
+          scopedSlots: { customRender: 'memo' },
+        },
+        
+      ],
+      suplierListData: [
+        {
+          supplierCode:'1',
+          supplierName:'2',
+          capacityQuota:'3',
+          workingHours:'4',
+          supplierStatus:'5',
+          memo:'6'
+        },
+        {
+          supplierCode:'1',
+          supplierName:'2',
+          capacityQuota:'3',
+          workingHours:'4',
+          supplierStatus:'9',
+          memo:'6'
+        }
+      ],
+      selectedRowKeys:[],
+      selectedRows:[],
+      loading: false, // 表格加载
+
+      // 查询条件
+      queryParam: {
+        supplier: '',//供应商
+        pageNo: '' // 点击的页数
+      },
+      pagination: {
+        // total: '',
+        // current: 0,
+        // pageSize: 0
+      },
+      
     }
   },
 
   created() {
-  },
-  methods: {
+    this.suplierListData.map(item=>{
+      item.status = '1'
+    })
   },
   computed: {},
-  mounted() {}
+  mounted() {},
+  methods: {
+    addLine(){
+      var line ={
+        supplierCode:'',
+        supplierName:'',
+        capacityQuota:'',
+        workingHours:'',
+        supplierStatus:'',
+        memo:'',
+        status : '0'
+      }
+      this.suplierListData.unshift(line)
+    },
+    editLine(){
+      if(this.selectedRowKeys.length == '0'){
+        this.$message.error('请勾选需要修改的数据');
+      }else if(this.selectedRowKeys.length > 1){
+        this.$message.error('一次只允许修改一行数据');
+      }else{
+        this.suplierListData.map(item =>{
+          if(item.supplierStatus == this.selectedRows[0].supplierStatus){
+            item.status = '0'
+          }
+        })
+        this.$forceUpdate()
+        
+      }
+    },
+    delectLLine(){
+
+    },
+    saveLine(){
+
+    },
+    cancelLine(){
+
+    },
+    subitLine(){
+
+    },
+    cancelSubitLine(){
+
+    },
+     // 选中行
+    onSelectChange(keys, rows) {
+      this.selectedRowKeys = keys
+      this.selectedRows = rows
+      
+    },
+}
 }
 </script>
 <style lang="less" scoped>
@@ -56,7 +278,7 @@ export default {
   text-align: center;
 }
 
-// /deep/ th.replacecolor {
-//   background-color: #ccc;
-// }
+/deep/ .ant-form-item {
+  margin-bottom: 0;
+}
 </style>