|  | @@ -0,0 +1,271 @@
 | 
	
		
			
				|  |  | +<template>
 | 
	
		
			
				|  |  | +  <div class='m-container'>
 | 
	
		
			
				|  |  | +    <!-- <h2>折扣设置</h2> -->
 | 
	
		
			
				|  |  | +    <div class="m-core">
 | 
	
		
			
				|  |  | +      <div class='newBand' v-permission="'chargeType/upSet'"
 | 
	
		
			
				|  |  | +           @click="openTypes('create')">添加</div>
 | 
	
		
			
				|  |  | +      <!-- 列表 -->
 | 
	
		
			
				|  |  | +      <div class="tableWrap">
 | 
	
		
			
				|  |  | +        <el-table :data='tableList'
 | 
	
		
			
				|  |  | +                  :header-cell-style="{background:'#EDEEF0',color:'#444'}">
 | 
	
		
			
				|  |  | +          <el-table-column align='center'
 | 
	
		
			
				|  |  | +                           prop="name"
 | 
	
		
			
				|  |  | +                           label="收费类型">
 | 
	
		
			
				|  |  | +          </el-table-column>
 | 
	
		
			
				|  |  | +          <el-table-column align='center'
 | 
	
		
			
				|  |  | +                           prop="subjectId"
 | 
	
		
			
				|  |  | +                           label="声部组合">
 | 
	
		
			
				|  |  | +          </el-table-column>
 | 
	
		
			
				|  |  | +          <el-table-column align='center'
 | 
	
		
			
				|  |  | +                  prop="goodsDiscountRate"
 | 
	
		
			
				|  |  | +                  label="折扣(%)">
 | 
	
		
			
				|  |  | +          </el-table-column>
 | 
	
		
			
				|  |  | +          <el-table-column align='center'
 | 
	
		
			
				|  |  | +                           label="操作">
 | 
	
		
			
				|  |  | +            <template slot-scope="scope">
 | 
	
		
			
				|  |  | +              <el-button @click="openTypes('update', scope.row)" v-permission="'chargeType/upSet'"
 | 
	
		
			
				|  |  | +                         type="text">修改</el-button>
 | 
	
		
			
				|  |  | +              <el-button @click="onTypesDel(scope.row)" v-permission="'chargeType/del'"
 | 
	
		
			
				|  |  | +                         type="text">删除</el-button>
 | 
	
		
			
				|  |  | +            </template>
 | 
	
		
			
				|  |  | +          </el-table-column>
 | 
	
		
			
				|  |  | +        </el-table>
 | 
	
		
			
				|  |  | +        <pagination :total="pageInfo.total"
 | 
	
		
			
				|  |  | +                    :page.sync="pageInfo.page"
 | 
	
		
			
				|  |  | +                    :limit.sync="pageInfo.limit"
 | 
	
		
			
				|  |  | +                    :page-sizes="pageInfo.page_size"
 | 
	
		
			
				|  |  | +                    @pagination="getList" />
 | 
	
		
			
				|  |  | +      </div>
 | 
	
		
			
				|  |  | +    </div>
 | 
	
		
			
				|  |  | +    <el-dialog :title="formTitle[formActionTitle]"
 | 
	
		
			
				|  |  | +               :visible.sync="typeStatus"
 | 
	
		
			
				|  |  | +               @close="onFormClose('ruleForm')"
 | 
	
		
			
				|  |  | +               width="500px">
 | 
	
		
			
				|  |  | +      <el-form :model="form"
 | 
	
		
			
				|  |  | +               :rules="rules"
 | 
	
		
			
				|  |  | +               ref="ruleForm">
 | 
	
		
			
				|  |  | +        <el-form-item label="收费类型"
 | 
	
		
			
				|  |  | +                      prop="name"
 | 
	
		
			
				|  |  | +                      :label-width="formLabelWidth">
 | 
	
		
			
				|  |  | +          <el-input v-model.trim="form.name"
 | 
	
		
			
				|  |  | +                    placeholder="请输入收费类型"
 | 
	
		
			
				|  |  | +                    autocomplete="off"></el-input>
 | 
	
		
			
				|  |  | +        </el-form-item>
 | 
	
		
			
				|  |  | +        <el-form-item label="声部选择"
 | 
	
		
			
				|  |  | +                      v-if="form.classGroupType != 'MIX'"
 | 
	
		
			
				|  |  | +                      prop="subjectId"
 | 
	
		
			
				|  |  | +                      :label-width="formLabelWidth">
 | 
	
		
			
				|  |  | +          <el-select v-model.trim="form.subjectId"
 | 
	
		
			
				|  |  | +                     filterable
 | 
	
		
			
				|  |  | +                     placeholder="请选择声部组合"
 | 
	
		
			
				|  |  | +                     clearable>
 | 
	
		
			
				|  |  | +            <el-option-group v-for="group in subjectList"
 | 
	
		
			
				|  |  | +                             :key="group.label"
 | 
	
		
			
				|  |  | +                             :label="group.label">
 | 
	
		
			
				|  |  | +              <el-option v-for="item in group.options"
 | 
	
		
			
				|  |  | +                         :key="item.value"
 | 
	
		
			
				|  |  | +                         :label="item.label"
 | 
	
		
			
				|  |  | +                         :value="item.value">
 | 
	
		
			
				|  |  | +              </el-option>
 | 
	
		
			
				|  |  | +            </el-option-group>
 | 
	
		
			
				|  |  | +          </el-select>
 | 
	
		
			
				|  |  | +        </el-form-item>
 | 
	
		
			
				|  |  | +        <el-form-item label="折扣"
 | 
	
		
			
				|  |  | +                      prop="discount"
 | 
	
		
			
				|  |  | +                      :label-width="formLabelWidth">
 | 
	
		
			
				|  |  | +          <el-input-number v-model.trim="form.discount"
 | 
	
		
			
				|  |  | +            autocomplete="off"
 | 
	
		
			
				|  |  | +            placeholder="请输入折扣 1-100"
 | 
	
		
			
				|  |  | +            controls-position="right"
 | 
	
		
			
				|  |  | +            class="number-input"
 | 
	
		
			
				|  |  | +            :min="1"
 | 
	
		
			
				|  |  | +            :max="100"
 | 
	
		
			
				|  |  | +            :precision="0"
 | 
	
		
			
				|  |  | +          ></el-input-number>
 | 
	
		
			
				|  |  | +        </el-form-item>
 | 
	
		
			
				|  |  | +      </el-form>
 | 
	
		
			
				|  |  | +      <span slot="footer"
 | 
	
		
			
				|  |  | +            class="dialog-footer">
 | 
	
		
			
				|  |  | +        <el-button @click="typeStatus = false">取 消</el-button>
 | 
	
		
			
				|  |  | +        <el-button type="primary"
 | 
	
		
			
				|  |  | +                   @click="onTypesSubmit('ruleForm')">确 定</el-button>
 | 
	
		
			
				|  |  | +      </span>
 | 
	
		
			
				|  |  | +    </el-dialog>
 | 
	
		
			
				|  |  | +  </div>
 | 
	
		
			
				|  |  | +</template>
 | 
	
		
			
				|  |  | +<script>
 | 
	
		
			
				|  |  | +import pagination from '@/components/Pagination/index'
 | 
	
		
			
				|  |  | +import { chargeTypeList, subjectListTree, insertChargeTypeSubjectMapperm, updateChargeTypeSubjectMapper, delChargeTypeSubjectMapper, chargeTypeSubjectMapper } from '@/api/specialSetting'
 | 
	
		
			
				|  |  | +export default {
 | 
	
		
			
				|  |  | +  name: 'typesManager',
 | 
	
		
			
				|  |  | +  components: { pagination },
 | 
	
		
			
				|  |  | +  data () {
 | 
	
		
			
				|  |  | +    return {
 | 
	
		
			
				|  |  | +      tableList: [],
 | 
	
		
			
				|  |  | +      subjectList: [], // 声部列表
 | 
	
		
			
				|  |  | +      formActionTitle: 'create',
 | 
	
		
			
				|  |  | +      formTitle: {
 | 
	
		
			
				|  |  | +        create: '添加收费类型',
 | 
	
		
			
				|  |  | +        update: '修改收费类型'
 | 
	
		
			
				|  |  | +      },
 | 
	
		
			
				|  |  | +      typeStatus: false, // 添加教学点
 | 
	
		
			
				|  |  | +      formLabelWidth: '100px',
 | 
	
		
			
				|  |  | +      form: {
 | 
	
		
			
				|  |  | +        name: null, //
 | 
	
		
			
				|  |  | +        subjectId: null,
 | 
	
		
			
				|  |  | +        discount: null,
 | 
	
		
			
				|  |  | +      },
 | 
	
		
			
				|  |  | +      rules: {
 | 
	
		
			
				|  |  | +        name: [{ required: true, message: '请输入类型名称', trigger: 'blur' }],
 | 
	
		
			
				|  |  | +        subjectId: [{ required: true, message: '请选择声部组合', trigger: 'change' }],
 | 
	
		
			
				|  |  | +        discount: [{ required: true, message: '请输入折扣', trigger: 'blur' }],
 | 
	
		
			
				|  |  | +      },
 | 
	
		
			
				|  |  | +      pageInfo: {
 | 
	
		
			
				|  |  | +        // 分页规则
 | 
	
		
			
				|  |  | +        limit: 10, // 限制显示条数
 | 
	
		
			
				|  |  | +        page: 1, // 当前页
 | 
	
		
			
				|  |  | +        total: 0, // 总条数
 | 
	
		
			
				|  |  | +        page_size: [10, 20, 40, 50] // 选择限制显示条数
 | 
	
		
			
				|  |  | +      }
 | 
	
		
			
				|  |  | +    }
 | 
	
		
			
				|  |  | +  },
 | 
	
		
			
				|  |  | +  mounted () {
 | 
	
		
			
				|  |  | +    this.getList()
 | 
	
		
			
				|  |  | +    this.getSubjectTree()
 | 
	
		
			
				|  |  | +  },
 | 
	
		
			
				|  |  | +  methods: {
 | 
	
		
			
				|  |  | +    onTypesSubmit (formName) { // 添加数据
 | 
	
		
			
				|  |  | +      this.$refs[formName].validate((valid) => {
 | 
	
		
			
				|  |  | +        if (valid) {
 | 
	
		
			
				|  |  | +          if (this.formActionTitle == 'create') {
 | 
	
		
			
				|  |  | +            if (this.form.id) { // 判断有没有Id,如果有则删除
 | 
	
		
			
				|  |  | +              delete this.form.id
 | 
	
		
			
				|  |  | +            }
 | 
	
		
			
				|  |  | +            insertChargeTypeSubjectMapperm(this.form).then(res => {
 | 
	
		
			
				|  |  | +              this.messageTips('添加', res)
 | 
	
		
			
				|  |  | +            })
 | 
	
		
			
				|  |  | +          } else if (this.formActionTitle == 'update') {
 | 
	
		
			
				|  |  | +            updateChargeTypeSubjectMapper(this.form).then(res => {
 | 
	
		
			
				|  |  | +              this.messageTips('修改', res)
 | 
	
		
			
				|  |  | +            })
 | 
	
		
			
				|  |  | +          }
 | 
	
		
			
				|  |  | +        } else {
 | 
	
		
			
				|  |  | +          return false;
 | 
	
		
			
				|  |  | +        }
 | 
	
		
			
				|  |  | +      })
 | 
	
		
			
				|  |  | +    },
 | 
	
		
			
				|  |  | +    messageTips (title, res) {
 | 
	
		
			
				|  |  | +      if (res.code == 200) {
 | 
	
		
			
				|  |  | +        this.$message.success(title + '成功')
 | 
	
		
			
				|  |  | +        this.typeStatus = false
 | 
	
		
			
				|  |  | +        this.getList()
 | 
	
		
			
				|  |  | +      } else {
 | 
	
		
			
				|  |  | +        this.$message.error(res.msg)
 | 
	
		
			
				|  |  | +      }
 | 
	
		
			
				|  |  | +    },
 | 
	
		
			
				|  |  | +    onTypesDel (row) {
 | 
	
		
			
				|  |  | +      delChargeTypeSubjectMapper({id: row.id}).then(res => {
 | 
	
		
			
				|  |  | +        this.messageTips('删除', res)
 | 
	
		
			
				|  |  | +      })
 | 
	
		
			
				|  |  | +    },
 | 
	
		
			
				|  |  | +    getList () {
 | 
	
		
			
				|  |  | +      chargeTypeSubjectMapper({
 | 
	
		
			
				|  |  | +        rows: this.pageInfo.limit,
 | 
	
		
			
				|  |  | +        page: this.pageInfo.page
 | 
	
		
			
				|  |  | +      }).then(res => {
 | 
	
		
			
				|  |  | +        let result = res.data
 | 
	
		
			
				|  |  | +        if (res.code == 200) {
 | 
	
		
			
				|  |  | +          result.rows.forEach(row => {
 | 
	
		
			
				|  |  | +            let subjectname = [],
 | 
	
		
			
				|  |  | +              subjectIds = []
 | 
	
		
			
				|  |  | +            row.subjects.forEach(item => {
 | 
	
		
			
				|  |  | +              subjectname.push(item.name)
 | 
	
		
			
				|  |  | +              subjectIds.push(item.id)
 | 
	
		
			
				|  |  | +            })
 | 
	
		
			
				|  |  | +            row.subjectName = subjectname
 | 
	
		
			
				|  |  | +            row.subjectIds = subjectIds
 | 
	
		
			
				|  |  | +          })
 | 
	
		
			
				|  |  | +          this.tableList = result.rows
 | 
	
		
			
				|  |  | +          this.pageInfo.total = result.total
 | 
	
		
			
				|  |  | +        }
 | 
	
		
			
				|  |  | +      })
 | 
	
		
			
				|  |  | +    },
 | 
	
		
			
				|  |  | +    openTypes (type, row) {
 | 
	
		
			
				|  |  | +      this.typeStatus = true
 | 
	
		
			
				|  |  | +      this.formActionTitle = type
 | 
	
		
			
				|  |  | +      // 修改的时候赋值
 | 
	
		
			
				|  |  | +      if (type == 'update') {
 | 
	
		
			
				|  |  | +        this.form = {
 | 
	
		
			
				|  |  | +          id: row.id,
 | 
	
		
			
				|  |  | +          name: row.name,
 | 
	
		
			
				|  |  | +          subjectId: row.subjectId,
 | 
	
		
			
				|  |  | +          discount: row.discount,
 | 
	
		
			
				|  |  | +        }
 | 
	
		
			
				|  |  | +      }
 | 
	
		
			
				|  |  | +    },
 | 
	
		
			
				|  |  | +    onFormClose (formName) { // 关闭弹窗重置验证
 | 
	
		
			
				|  |  | +      this.form = {
 | 
	
		
			
				|  |  | +        name: null, // 作业模块名称
 | 
	
		
			
				|  |  | +        subjectId: null,
 | 
	
		
			
				|  |  | +        discount: null,
 | 
	
		
			
				|  |  | +      }
 | 
	
		
			
				|  |  | +      this.$refs[formName].resetFields()
 | 
	
		
			
				|  |  | +    },
 | 
	
		
			
				|  |  | +    getSubjectTree () { // 获取声部列表
 | 
	
		
			
				|  |  | +      subjectListTree({
 | 
	
		
			
				|  |  | +        delFlag: 0,
 | 
	
		
			
				|  |  | +        rows: 9999
 | 
	
		
			
				|  |  | +      }).then(res => {
 | 
	
		
			
				|  |  | +        let result = res.data
 | 
	
		
			
				|  |  | +        if (res.code == 200) {
 | 
	
		
			
				|  |  | +          let tempArray = []
 | 
	
		
			
				|  |  | +          result.rows.forEach((item, index) => {
 | 
	
		
			
				|  |  | +            let subject = []
 | 
	
		
			
				|  |  | +            if (item.subjects) {
 | 
	
		
			
				|  |  | +              item.subjects.forEach(s => {
 | 
	
		
			
				|  |  | +                subject.push({
 | 
	
		
			
				|  |  | +                  value: s.id,
 | 
	
		
			
				|  |  | +                  label: s.name
 | 
	
		
			
				|  |  | +                })
 | 
	
		
			
				|  |  | +              })
 | 
	
		
			
				|  |  | +            }
 | 
	
		
			
				|  |  | +
 | 
	
		
			
				|  |  | +            tempArray[index] = {
 | 
	
		
			
				|  |  | +              label: item.name,
 | 
	
		
			
				|  |  | +              options: subject
 | 
	
		
			
				|  |  | +            }
 | 
	
		
			
				|  |  | +          })
 | 
	
		
			
				|  |  | +          this.subjectList = tempArray
 | 
	
		
			
				|  |  | +        }
 | 
	
		
			
				|  |  | +      })
 | 
	
		
			
				|  |  | +    }
 | 
	
		
			
				|  |  | +  }
 | 
	
		
			
				|  |  | +}
 | 
	
		
			
				|  |  | +</script>
 | 
	
		
			
				|  |  | +<style lang="scss" scoped>
 | 
	
		
			
				|  |  | +.el-button--primary {
 | 
	
		
			
				|  |  | +  background: #14928a;
 | 
	
		
			
				|  |  | +  border-color: #14928a;
 | 
	
		
			
				|  |  | +  color: #fff;
 | 
	
		
			
				|  |  | +  &:hover,
 | 
	
		
			
				|  |  | +  &:active,
 | 
	
		
			
				|  |  | +  &:focus {
 | 
	
		
			
				|  |  | +    background: #14928a;
 | 
	
		
			
				|  |  | +    border-color: #14928a;
 | 
	
		
			
				|  |  | +    color: #fff;
 | 
	
		
			
				|  |  | +  }
 | 
	
		
			
				|  |  | +}
 | 
	
		
			
				|  |  | +/deep/.el-date-editor.el-input {
 | 
	
		
			
				|  |  | +  width: 100% !important;
 | 
	
		
			
				|  |  | +}
 | 
	
		
			
				|  |  | +.el-select {
 | 
	
		
			
				|  |  | +  width: 100% !important;
 | 
	
		
			
				|  |  | +}
 | 
	
		
			
				|  |  | +.number-input{
 | 
	
		
			
				|  |  | +  /deep/ .el-input__inner {
 | 
	
		
			
				|  |  | +    text-align: left;
 | 
	
		
			
				|  |  | +  }
 | 
	
		
			
				|  |  | +
 | 
	
		
			
				|  |  | +  width: 100%;
 | 
	
		
			
				|  |  | +}
 | 
	
		
			
				|  |  | +</style>
 |