sishitongtang-crm/src/views/business/component/addBusiness.vue

<template>
  <div>
    <xy-dialog
      ref="dialog"
      :form="form"
      :is-show.sync="isShow"
      :rules="rules"
      :title="type === 'add' ? '新增业务板块' : '编辑业务板块'"
      type="form"
      @submit="submit">
      <template v-slot:name>
        <div class="xy-table-item">
          <div class="xy-table-item-label">
            <span style="color: red;font-weight: 600;padding-right: 4px;">*</span>名称：
          </div>
          <div class="xy-table-item-content">
            <el-input v-model="form.name" clearable placeholder="请输入产品名称" style="width: 300px;"></el-input>
          </div>
        </div>
      </template>

      <template v-slot:buy_name>
        <div class="xy-table-item">
          <div class="xy-table-item-label">
            <span style="color: red;font-weight: 600;padding-right: 4px;">*</span>服务购买方：
          </div>
          <div class="xy-table-item-content">
            <el-input v-model="form.buy_name" clearable placeholder="请输入服务购买方" style="width: 300px;"></el-input>
          </div>
        </div>
      </template>

      <template v-slot:cycle>
        <div class="xy-table-item">
          <div class="xy-table-item-label">
            <span style="color: red;font-weight: 600;padding-right: 4px;">*</span>结算周期：
          </div>
          <div class="xy-table-item-content">
            <el-select v-model="form.cycle" clearable placeholder="请选择服务周期" style="width: 300px;">
              <el-option
                v-for="item in [{id:1,value:'月度结算'},{id:2,value:'季度结算'},{id:3,value:'年度结算'}]"
                :key="item.id"
                :label="item.value"
                :value="item.id"></el-option>
            </el-select>
          </div>
        </div>
      </template>

      <template v-slot:flow>
        <div class="xy-table-item">
          <div class="xy-table-item-label">
            服务流程：
          </div>
          <div class="xy-table-item-content">
            <el-input v-model="form.flow" :autosize="{minRows:2}" clearable placeholder="请输入服务流程" style="width: 300px;"
                      type="textarea"></el-input>
          </div>
        </div>
      </template>

      <template v-slot:sortnumber>
        <div class="xy-table-item">
          <div class="xy-table-item-label">
            排序：
          </div>
          <div class="xy-table-item-content">
            <el-input-number v-model="form.sortnumber" :controls="false" :precision="0" clearable placeholder="请输入排序"
                             style="width: 300px;"></el-input-number>
          </div>
        </div>
      </template>

      <template v-slot:product_sku_list>
        <div class="xy-table-item">
          <div class="xy-table-item-label">
            <span style="color: red;font-weight: 600;padding-right: 4px;">*</span>关联服务：
          </div>
          <div class="xy-table-item-content">
            <el-select v-model="form.product_sku_list" style="width: 300px;" placeholder="请选择关联服务" multiple value-key="sku_id">
              <el-option v-for="(item,index) in skus" :value="{sku_id:item.id}" :label="item.name" :key="item.id"></el-option>
            </el-select>
          </div>
        </div>
      </template>
    </xy-dialog>
  </div>
</template>

<script>
import {getForm, save} from '@/api/productType'

export default {

  props:{
    skus:{
      type:Array,
      default:()=>[]
    }
  },
  data() {
    return {
      id: '',
      isShow: false,
      type: 'add',

      form: {
        name: '',
        buy_name: '',
        cycle: '',
        flow: '',
        sortnumber: 0,
        product_sku_list:[]
      },
      rules: {
        name: [
          {required: true, message: '请填写名称'}
        ],
        buy_name: [
          {required: true, message: '请填写服务购买方'}
        ],
        cycle: [
          {required: true, message: '请填写结算周期'}
        ]
      },
    }
  },
  methods: {
    async getDetail() {
      const res = await getForm(this.id)

      this.$integrateData(this.form, res)
      this.form.product_sku_list = res.product_skus.map(item => {
        return {
          sku_id:item.sku_id
        }
      })
      console.log(res)
    },

    submit() {
      if (this.type === 'editor') {
        Object.defineProperty(this.form, 'id', {
          value: this.id,
          enumerable: true,
          writable: false,
          configurable: true
        })
      }
      save(this.form).then(res => {
        this.$successMessage(this.type, '业务类型')
        this.isShow = false
        this.$emit('refresh')
      })
    }
  },
  watch: {
    isShow(val) {
      if (val) {
        if (this.type === 'editor') {
          this.getDetail()
        }
      } else {
        this.id = ''
        this.type = ''
        delete this.form.id
        this.$refs['dialog'].reset()
      }
    }
  }
}
</script>

<style lang="scss" scoped>
::v-deep .el-input__inner {
  text-align: left;
}
</style>