全局参数修改

src/views/categroyManager/specialSetup/chargesList.vue

@@ -8,13 +8,16 @@
         <el-table :data="dataList"
                   :header-cell-style="{background:'#EDEEF0',color:'#444'}">
           <el-table-column prop="organName"
+                    label="乐团模式">
+          </el-table-column>
+          <el-table-column prop="收费方式名称"
                            label="所属分部">
           </el-table-column>
           <el-table-column prop="chargeTypeName"
-                           label="收费类型">
+                           label="收费方式名称">
           </el-table-column>
           <el-table-column prop="courseFee"
-                           label="课程费用">
+                           label="课程费用(元)">
           </el-table-column>
           <el-table-column align='center'
                            label="操作">
@@ -38,51 +41,8 @@
       <el-dialog :title="formTitle[formActionTitle]"
                  :visible.sync="chargeStatus"
                  @close="onFormClose('ruleForm')"
-                 width="500px">
-        <el-form :model="form"
-                 :rules="rules"
-                 ref="ruleForm">
-          <el-form-item label="所属分部"
-                        prop="organId"
-                        :label-width="formLabelWidth">
-            <el-select v-model.trim="form.organId"
-                       clearable
-                       filterable>
-              <el-option v-for="(item, index) in branchList"
-                         :key="index"
-                         :label="item.label"
-                         :value="item.value">
-              </el-option>
-            </el-select>
-          </el-form-item>
-          <el-form-item label="收费类型"
-                        prop="chargeTypeId"
-                        :label-width="formLabelWidth">
-            <el-select v-model.trim="form.chargeTypeId"
-                       clearable
-                       filterable>
-              <el-option v-for="(item, index) in typesList"
-                         :key="index"
-                         :label="item.label"
-                         :value="item.value">
-              </el-option>
-            </el-select>
-          </el-form-item>
-          <el-form-item label="课程费用"
-                        prop="courseFee"
-                        :label-width="formLabelWidth">
-            <el-input type="number"
-                      @mousewheel.native.prevent
-                      v-model.trim="form.courseFee"
-                      autocomplete="off"></el-input>
-          </el-form-item>
-        </el-form>
-        <span slot="footer"
-              class="dialog-footer">
-          <el-button @click="chargeStatus = false">取 消</el-button>
-          <el-button @click="onTypesSubmit('ruleForm')"
-                     type="primary">确 定</el-button>
-        </span>
+                 width="850px">
+        <chargesForm/>
       </el-dialog>
     </div>
   </div>
@@ -90,8 +50,12 @@
 <script>
 import pagination from '@/components/Pagination/index'
 import { chargeTypeList, chargeTypeOrganizationFeeAdd, chargeTypeOrganizationFeeDelete, chargeTypeOrganizationFeeUpdate, chargeTypeOrganizationFee, branchQueryPage } from '@/api/specialSetting'
+import chargesForm from './modals/chargesForm'
 export default {
-  components: { pagination },
+  components: {
+    pagination,
+    chargesForm
+  },
   name: 'chargesList',
   data () {
     return {
@@ -256,4 +220,4 @@ export default {
 /deep/.el-table {
   display: inline-block;
 }
-</style>
+</style>

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

@@ -0,0 +1,163 @@
+<template>
+  <div>
+    <el-form :model="form"
+              :rules="rules"
+              ref="ruleForm">
+      <el-form-item label="所属分部"
+                    prop="organId"
+                    :label-width="formLabelWidth">
+        <el-select v-model.trim="form.organId"
+                    clearable
+                    filterable>
+          <el-option v-for="(item, index) in branchList"
+                      :key="index"
+                      :label="item.label"
+                      :value="item.value">
+          </el-option>
+        </el-select>
+      </el-form-item>
+      <el-form-item label="收费类型"
+                    prop="chargeTypeId"
+                    :label-width="formLabelWidth">
+        <el-select v-model.trim="form.chargeTypeId"
+                    clearable
+                    filterable>
+          <el-option v-for="(item, index) in typesList"
+                      :key="index"
+                      :label="item.label"
+                      :value="item.value">
+          </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>
+      </div>
+      <el-form-item label="课程费用"
+                    prop="courseFee"
+                    :label-width="formLabelWidth">
+        <el-input type="number"
+                  @mousewheel.native.prevent
+                  v-model.trim="form.courseFee"
+                  autocomplete="off"></el-input>
+      </el-form-item>
+    </el-form>
+    <span slot="footer"
+          class="dialog-footer">
+      <el-button @click="chargeStatus = false">取 消</el-button>
+      <el-button @click="onTypesSubmit('ruleForm')"
+                  type="primary">确 定</el-button>
+    </span>
+  </div>
+</template>
+<script>
+export default {
+  data() {
+    return {
+      form: {
+
+      },
+      formLabelWidth: '100px',
+    }
+  },
+}
+</script>
+<style lang="less" scoped>
+  .dialog-footer{
+    display: block;
+    text-align: right;
+  }
+  .items{
+    .items-header,
+    .item{
+      display: flex;
+      >.el-form-item,
+      >span{
+        width: 100%;
+        text-align: center;
+        padding: 0 10px;
+        &.ctrl{
+          width: 300px;
+        }
+      }
+    }
+    .items-header{
+      background-color: #f1f1f1;
+      padding: 10px 0;
+    }
+  }
+</style>