opms_frontend/src/views/work/train/head/components/SaleFeedback.vue

<template>
  <el-dialog title="销售反馈" :visible.sync="dialogFormVisible" width="500px" @close="close">
    <el-form
      ref="form"
      label-position="top"
      :model="form"
      :rules="rules"
      style="max-height: 550px; overflow-y: scroll; overflow-x: hidden">
      <el-row :gutter="20">
        <el-col :span="24">
          <el-form-item label="反馈时间" prop="feedbackSaleTime">
            <el-date-picker
              v-model="form.feedbackSaleTime"
              placeholder="选择反馈时间"
              style="width: 100%"
              type="date"
              value-format="yyyy-MM-dd" />
          </el-form-item>
        </el-col>
      </el-row>
      <!-- 售前讲解 -->
      <el-row v-if="workType == '售前讲解支持' || workType == '经销商支持'">
        <el-col :span="24">
          <el-form-item label="会议纪要" prop="feedbackSaleMeeting">
            <el-input
              v-model="form.feedbackSaleMeeting"
              placeholder="会议纪要"
              :rows="5"
              show-word-limit
              type="textarea" />
          </el-form-item>
        </el-col>
        <el-col :span="24">
          <el-form-item label="客户/经销商反馈" prop="feedbackSaleDist">
            <el-input
              v-model="form.feedbackSaleDist"
              placeholder="客户/经销商反馈"
              :rows="5"
              show-word-limit
              type="textarea" />
          </el-form-item>
        </el-col>
      </el-row>
      <!-- END -->
      <!-- 技术文件 -->
      <el-row v-if="workType == '技术文件支持'">
        <el-col :span="24">
          <el-form-item label="用户反馈" prop="feedbackSaleUser">
            <el-input
              v-model="form.feedbackSaleUser"
              placeholder="用户反馈"
              :rows="5"
              show-word-limit
              type="textarea" />
          </el-form-item>
        </el-col>
      </el-row>
      <!-- END -->
      <el-row v-if="workType == '售前讲解支持' || workType == '技术文件支持' || workType == '经销商支持'">
        <el-col :span="24">
          <el-form-item label="下一步计划" prop="feedbackSaleNext">
            <el-input
              v-model="form.feedbackSaleNext"
              placeholder="下一步计划"
              :rows="5"
              show-word-limit
              type="textarea" />
          </el-form-item>
        </el-col>
      </el-row>
      <!-- 技术文件 -->
      <el-row v-if="workType == '售后运维工单'">
        <el-col :span="24">
          <el-form-item label="工单反馈" prop="feedbackSaleOrder">
            <el-input
              v-model="form.feedbackSaleOrder"
              placeholder="问题是否已解决、用户是否满意"
              :rows="5"
              show-word-limit
              type="textarea" />
          </el-form-item>
        </el-col>
      </el-row>
      <!-- END -->
      <el-row v-if="workType == '售前讲解支持' || workType == '技术文件支持' || workType == '经销商支持'">
        <el-col :span="24">
          <el-form-item label="技术支持满意度" prop="satisfactionRating">
            <el-radio-group v-model="form.satisfactionRating">
              <el-radio label="1">1分</el-radio>
              <el-radio label="2">2分</el-radio>
              <el-radio label="3">3分</el-radio>
              <el-radio label="4">4分</el-radio>
              <el-radio label="5">5分</el-radio>
            </el-radio-group>
          </el-form-item>
        </el-col>
        <el-col :span="24">
          <el-form-item label="技术支持提升建议" prop="promotionProposal">
            <el-input
              v-model="form.promotionProposal"
              placeholder="技术支持提升建议"
              :rows="5"
              show-word-limit
              type="textarea" />
          </el-form-item>
        </el-col>
      </el-row>
    </el-form>
    <template #footer>
      <el-button @click="close">取 消</el-button>
      <el-button type="primary" @click="save">确 定</el-button>
    </template>
  </el-dialog>
</template>

<script>
  import workOrderApi from '@/api/work/index'
  export default {
    name: 'WorkOrderFeedback',
    data() {
      return {
        workType: '',
        form: {
          feedbackSaleTime: '',
          feedbackSaleMeeting: '',
          feedbackSaleDist: '',
          feedbackSaleUser: '',
          feedbackSaleNext: '',
          feedbackSaleOrder: '',
          orderId: '',
          satisfactionRating: '',
          promotionProposal: '',
        },
        rules: {
          feedbackSaleTime: [{ required: true, message: '不能为空', trigger: ['blur', 'change'] }],
          feedbackSaleMeeting: [{ required: true, message: '不能为空', trigger: ['blur', 'change'] }],
          feedbackSaleDist: [{ required: true, message: '不能为空', trigger: ['blur', 'change'] }],
          feedbackSaleUser: [{ required: true, message: '不能为空', trigger: ['blur', 'change'] }],
          feedbackSaleNext: [{ required: true, message: '不能为空', trigger: ['blur', 'change'] }],
          feedbackSaleOrder: [{ required: true, message: '不能为空', trigger: ['blur', 'change'] }],
          satisfactionRating: [{ required: true, message: '不能为空', trigger: ['blur', 'change'] }],
        },
        dialogFormVisible: false,
      }
    },
    mounted() {},
    methods: {
      open(row) {
        console.log(row)
        this.form.orderId = row.id
        this.workType = row.orderTypeName
        this.dialogFormVisible = true
      },
      close() {
        this.$refs['form'].resetFields()
        this.form = this.$options.data().form
        this.dialogFormVisible = false
      },
      save() {
        this.$refs['form'].validate(async (valid) => {
          if (valid) {
            const { msg } = await workOrderApi.feedbackSale(this.form)
            this.$baseMessage(msg, 'success', 'vab-hey-message-success')
            this.$emit('update-detail')
            this.close()
          }
        })
      },
    },
  }
</script>