form 修改

src/views/categroyManager/specialSetup/modals/chargesForm.vue

@@ -29,83 +29,94 @@
           </el-option>
         </el-select>
       </el-form-item>
-      <div class="items">
-        <div class="items-header">
-          <span class="name">课程类型</span>
-          <span class="name">是否免费</span>
-          <span class="name">课程总时长(分钟)</span>
-          <span class="name">每分钟费用(元)</span>
-          <span class="name">课程费用(元)</span>
-          <span class="ctrl"></span>
-        </div>
-        <div class="item">
-          <el-form-item prop="organId">
-            <el-select v-model.trim="form.organId"
-                        size="mini"
-                        clearable
-                        filterable>
-              <el-option label="1"
-                          value="1">
-              </el-option>
-              <el-option label="2"
-                          value="2">
-              </el-option>
-            </el-select>
-          </el-form-item>
-          <el-form-item prop="organId">
-            <el-select v-model.trim="form.organId"
-                        size="mini"
-                        clearable
-                        filterable>
-              <el-option label="1"
-                          value="1">
-              </el-option>
-              <el-option label="2"
-                          value="2">
-              </el-option>
-            </el-select>
-          </el-form-item>
-          <el-form-item prop="organId">
-            <el-select v-model.trim="form.organId"
-                        size="mini"
-                        clearable
-                        filterable>
-              <el-option label="1"
-                          value="1">
-              </el-option>
-              <el-option label="2"
-                          value="2">
-              </el-option>
-            </el-select>
-          </el-form-item>
-          <el-form-item prop="organId">
-            <el-select v-model.trim="form.organId"
-                        size="mini"
-                        clearable
-                        filterable>
-              <el-option label="1"
-                          value="1">
-              </el-option>
-              <el-option label="2"
-                          value="2">
-              </el-option>
-            </el-select>
-          </el-form-item>
-          <el-form-item prop="organId">
-            <el-select v-model.trim="form.organId"
-                        size="mini"
-                        clearable
-                        filterable>
-              <el-option label="1"
-                          value="1">
-              </el-option>
-              <el-option label="2"
-                          value="2">
-              </el-option>
-            </el-select>
-          </el-form-item>
-          <span class="ctrl"></span>
+      <div class="class-items">
+        <div class="items">
+          <div class="items-header">
+            <span class="name">课程类型</span>
+            <span class="name">是否免费</span>
+            <span class="name">课程总时长(分钟)</span>
+            <span class="name">每分钟费用(元)</span>
+            <span class="name">课程费用(元)</span>
+            <span class="ctrl"></span>
+          </div>
+          <div class="item" v-for="(item, index) in items" :key="index">
+            <el-form-item prop="organId">
+              <el-select v-model.trim="item.type"
+                          size="mini"
+                          clearable
+                          filterable>
+                <el-option label="1"
+                            value="1">
+                </el-option>
+                <el-option label="2"
+                            value="2">
+                </el-option>
+              </el-select>
+            </el-form-item>
+            <el-form-item prop="organId">
+              <el-select v-model.trim="item.free"
+                          size="mini"
+                          clearable
+                          filterable>
+                <el-option label="1"
+                            value="1">
+                </el-option>
+                <el-option label="2"
+                            value="2">
+                </el-option>
+              </el-select>
+            </el-form-item>
+            <el-form-item prop="organId">
+              <el-select v-model.trim="item.time"
+                          size="mini"
+                          clearable
+                          filterable>
+                <el-option label="1"
+                            value="1">
+                </el-option>
+                <el-option label="2"
+                            value="2">
+                </el-option>
+              </el-select>
+            </el-form-item>
+            <el-form-item prop="organId">
+              <el-select v-model.trim="item.fee"
+                          size="mini"
+                          clearable
+                          filterable>
+                <el-option label="1"
+                            value="1">
+                </el-option>
+                <el-option label="2"
+                            value="2">
+                </el-option>
+              </el-select>
+            </el-form-item>
+            <el-form-item prop="organId">
+              <el-select v-model.trim="item.allfee"
+                          size="mini"
+                          clearable
+                          filterable>
+                <el-option label="1"
+                            value="1">
+                </el-option>
+                <el-option label="2"
+                            value="2">
+                </el-option>
+              </el-select>
+            </el-form-item>
+            <span class="ctrl">
+              <i @click="removeItem(index)" v-if="index !== 0" class="el-icon-circle-close" />
+            </span>
+          </div>
         </div>
+        <el-button
+          icon="el-icon-circle-plus-outline"
+          plain class="create-type-button"
+          type="info"
+          size="small"
+          @click="addItem"
+        >新增课程类型</el-button>
       </div>
       <el-form-item label="课程费用"
                     prop="courseFee"
@@ -125,15 +136,40 @@
   </div>
 </template>
 <script>
+const initItem = {
+  type: '',
+  free: '',
+  time: '',
+  fee: '',
+  allfee: '',
+}
 export default {
   data() {
     return {
-      form: {
-
-      },
+      form: {},
+      items: [],
       formLabelWidth: '100px',
     }
   },
+  watch: {
+    items() {
+      console.log(this.items)
+    }
+  },
+  mounted() {
+    this.items.push({})
+  },
+  methods: {
+    addItem() {
+      const _items = [...this.items, {}]
+      this.items = _items
+    },
+    removeItem(index) {
+      const _items = [...this.items]
+      _items[index] = null
+      this.items = _items.filter(item => !!item)
+    }
+  },
 }
 </script>
 <style lang="less" scoped>
@@ -158,6 +194,27 @@ export default {
     .items-header{
       background-color: #f1f1f1;
       padding: 10px 0;
+      margin-bottom: 10px;
+      >span{
+        line-height: 26px;
+      }
+    }
+  }
+  .create-type-button{
+    width: 100%;
+    margin-bottom: 20px;
+  }
+  .class-items{
+    padding-left: 30px;
+  }
+  .ctrl{
+    display: flex;
+    align-items: center;
+    justify-content: center;
+    margin-bottom: 26px;
+    i{
+      cursor: pointer;
+      font-size: 18px;
     }
   }
 </style>