dy-admin-manager/src/views/organManager/components/openService.vue

<!--  -->
<template>
  <div class="m-core">
    <el-alert
        title="开通服务"
        type="info"
        :closable="false"
        style="margin-bottom: 20px"
      ></el-alert>
      <el-form ref="form" label-position="top" :model="form" label-width="140px"  :inline="true">
        <el-form-item label="服务名称" prop="serveId"
          :rules="[{ required: true, message: '请选择服务名称', trigger: 'change' }]">
          <el-select
            v-model="form.serveId"
            :disabled="isDisabled"
            placeholder="请选择服务名称"
            @change="onProductChange"
          >
            <el-option v-for="item in productList" :key="item.id"
              :label="item.serveName" :value="item.id"></el-option>
          </el-select>
        </el-form-item>
        <el-form-item label="付费模式" prop="serveMode"
          :rules="[{ required: true, message: '请选择付费模式', trigger: 'change' }]">
          <el-select
            v-model="form.serveMode"
            :disabled="isDisabled"
            placeholder="请选择付费模式"
            @change="onModeChange"
          >
            <el-option v-for="(item, index) in modeList" :key="index"
              :label="paymentMode[item.mode]" :value="item.mode"></el-option>
          </el-select>
        </el-form-item>
        <el-form-item label="学员上限" prop="serveDetailId"
          :rules="[{ required: true, message: '请选择学员上限', trigger: 'blur, change' }]">
          <el-select
            placeholder="请选择学员上限"
            :disabled="isDisabled"
            @change="onStudentUpLimitChange"
            v-model="form.serveDetailId"
          >
            <el-option v-for="(item, index) in studentUpList" :key="index"
              :label="item.studentUpLimit" :value="item.id"></el-option>
          </el-select>
        </el-form-item>
        <el-form-item label="合同价" prop="contractPrice"
          :rules="[{ required: true, message: '请输入合同价', trigger: 'blur' },
            { type: 'number', message: '合同价必须为数字值' }]">
          <el-input
            :disabled="isDisabled"
            placeholder="请输入合同价"
            v-model.number="form.contractPrice"
            type="number"
          >
            <div slot="append">元/{{ unitSuffix }}</div>
          </el-input>
        </el-form-item>
        <el-form-item label="原价" prop="originalPrice"
          :rules="[{ required: true, message: '请输入原价', trigger: 'blur' },
            { type: 'number', message: '原价必须为数字值' }]">
          <el-input
            placeholder="请输入原价"
            disabled
            v-model.number="form.originalPrice"
          >
            <div slot="append">元/{{ unitSuffix }}</div>
          </el-input>
        </el-form-item>
        <el-form-item label="有效期" prop="expiryCount"
          :rules="[{ required: true, message: '请输入有效期', trigger: 'blur' },
            { type: 'number', message: '有效期必须为数字值' }]">
          <el-input
            :disabled="isDisabled"
            type="number"
            v-model.number="form.expiryCount"
            placeholder="请输入有效期"
          >
            <div slot="append">{{ unitSuffix }}</div>
          </el-input>
        </el-form-item>
        <el-form-item label="开通价格" prop="payAmount"
          :rules="[{ required: true, message: '请输入开通价格', trigger: 'blur' },
            { type: 'number', message: '开通价格必须为数字值' }]">
          <el-input
            placeholder="请输入开通价格"
            type="number"
            v-model.number="form.payAmount"
            :disabled="isDisabled"
          >
            <div slot="append">元</div>
          </el-input>
        </el-form-item>
      </el-form>
  </div>
</template>

<script>
import { platformServeQueryPage, platformServeQueryModeDetail } from '@/views/platformManager/serviceManager/api'
import { paymentMode } from '@/constant'
export default {
  props: ['type', 'data'],
  data () {
    return {
      paymentMode,
      form: {
        serveId: null,
        serveMode: null,
        serveDetailId: null,
        studentUpLimit: null,
        expiryUnit: null,
        contractPrice: null,
        originalPrice: null,
        expiryCount: null,
        payAmount: null
      },
      payState: null,
      productList: [],
      modeList: [],
      studentUpList: [], // 学员上限列表
    };
  },
  async mounted () {
    await this.__init()
    if(this.data) {
      const data = this.data
      this.payState = data.payState
      data.serveId ? (await this.onProductChange(data.serveId)) : null
      this.form = data
      this.form.serveMode = data.expiryUnit
      data.serveDetailId ? (await this.onModeChange(data.expiryUnit, 'none')) : null
    }
  },
  computed: {
    isDisabled() {
      console.log(this.payState)
      return this.type == 'setting' || this.payState == 1  ? true : false
    },
    unitSuffix() {
      // 后辍默认为年
      return this.paymentMode[this.form.expiryUnit] || '年'
    }
  },
  methods: {
    async __init() {
      try {
        const res = await platformServeQueryPage({ page: 1, rows: 999 })
        this.productList = res.data?.rows || []
      } catch(e) {}
    },
    async onProductChange(val) {
      const form = this.form
      try {
        const res = await platformServeQueryModeDetail({ id: val })
        this.modeList = res.data || []
      } catch(e) { console.log(e) }
    },
    onSubmit() {
      let status = false
      this.$refs.form.validate(_ => {
        status = _
      })
      return status
    },
    getValues() {
      return this.form
    },
    onModeChange(val, type) { // 付费模式改变时
      const form = this.form
      for(let item of (this.modeList || [])) {
        if(val == item.mode) {
          this.studentUpList = item.list || []
          form.expiryUnit = item.mode

          // ...
          if(type != 'none') {
            form.serveDetailId = null // 学员上限
            form.originalPrice = null // 重置原价
          }
        }
      }
    },
    onStudentUpLimitChange(val) {
      const form = this.form
      for(let item of (this.studentUpList || [])) {
        if(val == item.id) {
          form.serveDetailId = item.id
          form.originalPrice = item.originalPrice
        }
      }
    }
  },
};
</script>
<style lang='scss' scoped>
.el-input, .el-select {
  width: 300px !important;
}
</style>