feat: 增加机型弹窗

src/views/commercialEngineering/components/model.vue

@@ -2,16 +2,89 @@
   <div>
     <h3>{{ title }}</h3>
     <el-divider />
+    <div style="margin-bottom: 20px; width: 80px">
+      <el-button v-if="!['detail', 'examine'].includes(module)" type="primary" size="small" @click="handleAdd"
+        >添加机型</el-button
+      >
+    </div>
     <zj-table
       ref="tableEl"
       :is-drop="true"
       :columns="columns"
       :table-data="formData.items"
       :table-attributes="{
-        border: true
+        border: true,
+        maxHeight: 600
       }"
     />
-    <el-button v-if="!['detail', 'examine'].includes(module)" style="width: 100%" size="small" @click="handleAdd">添加</el-button>
+    <el-dialog title="添加机型" append-to-body :visible.sync="isShowDialog" width="70%" :append-to-body="true">
+      <el-form ref="screenForm" :model="screenForm" size="small" label-position="left">
+        <el-row :gutter="20">
+          <el-col :xs="12" :sm="6" :lg="6">
+            <el-form-item prop="name">
+              <el-input v-model="screenForm.name" placeholder="物料名称"></el-input>
+            </el-form-item>
+          </el-col>
+          <el-col :xs="12" :sm="6" :lg="6">
+            <el-form-item prop="number">
+              <el-input v-model="screenForm.number" placeholder="物料编码"></el-input>
+            </el-form-item>
+          </el-col>
+          <el-col :xs="12" :sm="6" :lg="6">
+            <el-form-item prop="oldNumber">
+              <el-input v-model="screenForm.oldNumber" placeholder="产品编码"></el-input>
+            </el-form-item>
+          </el-col>
+          <el-col :xs="12" :sm="6" :lg="6">
+            <el-form-item prop="specification">
+              <el-input v-model="screenForm.specification" placeholder="规格型号"></el-input>
+            </el-form-item>
+          </el-col>
+          <el-col :xs="24" :sm="24" :lg="24" class="tr">
+            <el-form-item label="">
+              <el-button size="small" @click="resetScreenForm">清空</el-button>
+              <el-button size="small" type="primary" @click="submitScreenForm">搜索</el-button>
+            </el-form-item>
+          </el-col>
+        </el-row>
+      </el-form>
+
+      <div class="table">
+        <zj-table
+          ref="tableEl"
+          :is-drop="true"
+          :columns="columns2"
+          :table-data="k3List"
+          :table-attributes="{
+            border: true,
+            selectColumn: true,
+            selectable: this.selectable
+
+          }"
+          :tableEvents ="{
+              'selection-change': this.selectionChange
+            }"
+        />
+        <div class="pagination clearfix" style="margin-top: 10px">
+          <div class="fr">
+            <el-pagination
+              @current-change="handleTableCurrentChange"
+              :current-page="currentPage"
+              :page-size="10"
+              background
+              layout="prev, pager, next"
+              :total="listTotal"
+            >
+            </el-pagination>
+          </div>
+        </div>
+      </div>
+
+      <span slot="footer" class="dialog-footer">
+        <el-button @click="closeDialog">取 消</el-button>
+        <el-button type="primary" @click="submitAddGoods">确 定</el-button>
+      </span>
+    </el-dialog>
   </div>
 </template>
 
@@ -46,92 +119,107 @@ export default {
   data() {
     return {
       loading: false,
-      k3List: []
+      k3List: [],
+      isShowDialog: false,
+      currentPage: 1,
+      pageSize: 10,
+      listTotal: 0,
+      screenForm: {
+        name: '',
+        oldNumber: '',
+        number: '',
+        specification: ''
+      },
+      recordSelected: []
     }
   },
   computed: {
     columns() {
       return [
         ...(() => {
-          return !['detail', 'examine'].includes(this.module) ? [{
-            hidden: '',
-            columnAttributes: {
-              fixed: 'left',
-              label: '操作',
-              prop: ''
-            },
-            render: (h, { row, column, index }) => {
-              return (
-                <div>
-                  <el-button
-                    size='mini'
-                    type='text'
-                    onClick={() => {
-                      this.formData.items.splice(index, 1)
-                    }}
-                  >
-                  删除
-                  </el-button>
-                </div>
-              )
-            }
-          }] : []
+          return !['detail', 'examine'].includes(this.module)
+            ? [
+                {
+                  hidden: '',
+                  columnAttributes: {
+                    fixed: 'left',
+                    label: '操作',
+                    prop: ''
+                  },
+                  render: (h, { row, column, index }) => {
+                    return (
+                      <div>
+                        <el-button
+                          size="mini"
+                          type="text"
+                          onClick={() => {
+                            this.formData.items.splice(index, 1)
+                          }}
+                        >
+                          删除
+                        </el-button>
+                      </div>
+                    )
+                  }
+                }
+              ]
+            : []
         })(),
         {
           columnAttributes: {
             label: '物料名称*',
             prop: 'materialName'
           },
-          render: (h, { row, column, index }) => {
-            return (
-              <el-select
-                value={row.materialName}
-                clearable
-                style='width: 100%;padding: 5px;'
-                onInput={e => (row.materialName = e)}
-                onChange={e => this.setCheckeData(e, row)}
-                filterable
-                size='mini'
-                remote
-                reserve-keyword
-                placeholder='请输入物料名称'
-                remote-method={e => this.remoteMethod(e, 'name')}
-                loading={this.loading}
-              >
-                {this.k3List.map(k => {
-                  return <el-option key={k.id} label={k.name} value={k.id}></el-option>
-                })}
-              </el-select>
-            )
-          }
+          // render: (h, { row, column, index }) => {
+          //   return (
+          //     <el-select
+          //       value={row.materialName}
+          //       clearable
+          //       style="width: 100%;padding: 5px;"
+          //       onInput={e => (row.materialName = e)}
+          //       onChange={e => this.setCheckeData(e, row)}
+          //       filterable
+          //       size="mini"
+          //       remote
+          //       reserve-keyword
+          //       placeholder="请输入物料名称"
+          //       remote-method={e => this.remoteMethod(e, 'name')}
+          //       loading={this.loading}
+          //     >
+          //       {this.k3List.map(k => {
+          //         return <el-option key={k.id} label={k.name} value={k.id}></el-option>
+          //       })}
+          //     </el-select>
+          //   )
+          // }
         },
         {
           columnAttributes: {
             label: '规格型号*',
             prop: 'specification'
           },
-          render: (h, { row, column, index }) => {
-            return (
-              <el-select
-                value={row.specification}
-                clearable
-                style='width: 100%;padding: 5px;'
-                onInput={e => (row.specification = e)}
-                onChange={e => this.setCheckeData(e, row)}
-                filterable
-                size='mini'
-                remote
-                reserve-keyword
-                placeholder='请输入规格型号'
-                remote-method={e => this.remoteMethod(e, 'specification')}
-                loading={this.loading}
-              >
-                {this.k3List.map(k => {
-                  return <el-option key={k.id} label={k.specification} value={k.id}></el-option>
-                })}
-              </el-select>
-            )
-          }
+          // render: (h, { row, column, index }) => {
+          //   return (
+          //     <el-select
+          //       value={row.specification}
+          //       clearable
+          //       style="width: 100%;padding: 5px;"
+          //       onInput={e => (row.specification = e)}
+          //       onChange={e => this.setCheckeData(e, row)}
+          //       filterable
+          //       size="mini"
+          //       remote
+          //       reserve-keyword
+          //       placeholder="请输入规格型号"
+          //       remote-method={e => this.remoteMethod(e, 'specification')}
+          //       loading={this.loading}
+          //     >
+          //       {this.k3List.map(k => {
+          //         return <el-option key={k.id} label={k.specification} value={k.id}></el-option>
+          //       })}
+          //     </el-select>
+          //   )
+          // }
         },
         {
           columnAttributes: {
@@ -140,9 +228,14 @@ export default {
           },
           render: (h, { row, column, index }) => {
             return (
-              <el-input style='padding: 5px;' value={row.itemRemark} onInput={e => (row.itemRemark = e)}                 placeholder='请输入备注'
-
-                size='mini' clearable ></el-input>
+              <el-input
+                style="padding: 5px;"
+                value={row.itemRemark}
+                onInput={e => (row.itemRemark = e)}
+                placeholder="请输入备注"
+                size="mini"
+                clearable
+              ></el-input>
             )
           }
         },
@@ -153,15 +246,75 @@ export default {
           },
           render: (h, { row, column, index }) => {
             return (
-              <el-input style='padding: 5px;' type='number' value={row.qty}  placeholder='请输入数量' onInput={e => (row.qty = e)}
-                size='mini' clearable ></el-input>
+              <el-input
+                style="padding: 5px;"
+                type="number"
+                value={row.qty}
+                placeholder="请输入数量"
+                onInput={e => (row.qty = e)}
+                size="mini"
+                clearable
+              ></el-input>
             )
           }
         }
       ]
+    },
+    columns2() {
+      return [
+        {
+          columnAttributes: {
+            label: '物料名称',
+            prop: 'name',
+            width: 200
+          }
+        },
+        {
+          columnAttributes: {
+            label: '物料编码',
+            prop: 'number',
+            width: 100
+          }
+        },
+        {
+          columnAttributes: {
+            label: '旧物料编码',
+            prop: 'oldNumber',
+            width: 100
+          }
+        },
+        {
+          columnAttributes: {
+            label: '规格型号',
+            prop: 'specification'
+          }
+        }
+      ]
     }
   },
+
   methods: {
+    getMaterialListV2() {
+      const params = []
+      Object.keys(this.screenForm).forEach(k => {
+        if (this.screenForm[k]) {
+          params.push({
+            param: `a.${k}`,
+            compare: 'like',
+            value: this.screenForm[k]
+          })
+        }
+      })
+      getMaterialListV2({
+        pageNum: this.currentPage,
+        pageSize: this.pageSize,
+        params
+      }).then(res => {
+        this.k3List = res.data.records
+        this.listTotal = res.data.total
+        this.loading = false
+      })
+    },
     remoteMethod(query, type, name) {
       if (query !== '') {
         this.loading = true
@@ -170,9 +323,9 @@ export default {
           pageSize: 100,
           params: [
             {
-              'param': `a.${type}`,
-              'compare': 'like',
-              'value': query
+              param: `a.${type}`,
+              compare: 'like',
+              value: query
             }
           ]
         }).then(res => {
@@ -198,19 +351,75 @@ export default {
       }
     },
     handleAdd() {
-      this.formData.items.push({
-        id: '',
-        itemRemark: '',
-        materialId: '',
-        materialName: '',
-        materialNumber: '',
-        materialOldNumber: '',
+    this.getMaterialListV2()
+      this.isShowDialog = true
+      // this.formData.items.push({
+      //   id: '',
+      //   itemRemark: '',
+      //   materialId: '',
+      //   materialName: '',
+      //   materialNumber: '',
+      //   materialOldNumber: '',
+      //   orderId: '',
+      //   projectNo: '',
+      //   qty: null,
+      //   specification: '',
+      //   unit: ''
+      // })
+    },
+    selectable(row,index){
+      for (let i = 0; i < this.formData.items.length; i++) {
+          if (this.formData.items[i].materialId == row.id) {
+            row.disabled = true
+          }
+      }
+
+      if(row.disabled){
+        return false
+      }else{
+        return true
+      }
+    },
+     // 监听勾选变化
+     selectionChange(data) {
+      this.recordSelected = data
+    },
+    closeDialog() {
+      this.isShowDialog = false
+    },
+    submitAddGoods() {
+      this.formData.items =[ ...this.formData.items,  ...this.recordSelected.map(k=>{
+        return {
+        qty: null,
+        unit: '',
         orderId: '',
         projectNo: '',
-        qty: null,
-        specification: '',
-        unit: ''
-      })
+        itemRemark: '',
+        specification : k.specification,
+        materialName : k.name,
+        materialId : k.id,
+        materialOldNumber : k.oldNumber,
+        }
+      })]
+      this.k3List= []
+      this.isShowDialog = false
+    },
+    // 更改列表当前页
+    handleTableCurrentChange(val) {
+      this.currentPage = val
+      this.getMaterialListV2()
+    },
+    // 提交筛选表单
+    submitScreenForm() {
+      this.currentPage = 1
+      this.getMaterialListV2()
+    },
+
+    // 重置筛选表单
+    resetScreenForm() {
+      this.$refs.screenForm.resetFields()
+      this.currentPage = 1
+      this.getMaterialListV2()
     }
   }
 }