kd-aiot-frontend-eom/src/views/salesServiceManagement/evaluate/components/addDialog.vue

<template>
  <ele-modal
    custom-class="ele-dialog-form long-dialog-form"
    :centered="true"
    :visible.sync="addRepairNotesDialog"
    title="评价"
    :close-on-click-modal="false"
    width="800px"
    :maxable="true"
    append-to-body
    @close="handleClose"
  >
    <el-form
      ref="form"
      :model="form"
      :rules="rules"
      label-width="100px"
      class="create-form"
    >
      <el-form-item label="服务态度" prop="attitudeRating">
        <div class="block">
          <el-rate v-model="form.attitudeRating" show-text :texts="texts">
          </el-rate>
        </div>
      </el-form-item>
      <el-form-item label="响应速度" prop="responseSpeed">
        <div class="block">
          <el-rate v-model="form.responseSpeed" show-text :texts="texts">
          </el-rate>
        </div>
      </el-form-item>
      <el-form-item label="整体满意度" prop="serviceRating">
        <div class="block">
          <el-rate v-model="form.serviceRating" show-text :texts="texts">
          </el-rate>
        </div>
      </el-form-item>
      <el-form-item label="评价" prop="comment">
        <el-input
          type="textarea"
          placeholder="请输入内容"
          v-model="form.comment"
          :disabled="type == 'view'"
        >
        </el-input>
      </el-form-item>
    </el-form>

    <div slot="footer" class="footer">
      <el-button type="primary" @click="submitAdd">确认</el-button>
      <el-button @click="handleClose">返回</el-button>
    </div>
  </ele-modal>
</template>

<script>
  import { evaluateSave } from '@/api/salesServiceManagement/index';

  import fileMain from '@/components/addDoc/index.vue';
  const def = {
    attachmen: [],
    attitudeRating: '',
    code: '',
    comment: '',
    isAnonymous: '',
    responseSpeed: '',
    serviceRating: '',
    workId: ''
  };
  export default {
    components: {},
    data() {
      return {
        texts: ['非常不满意', '不满意', '一般', '满意', '非常满意'],
        rules: {
          attitudeRating: [
            { required: true, message: '请选择服务态度', trigger: 'change' }
          ],
          responseSpeed: [
            { required: true, message: '请选择响应速度', trigger: 'change' }
          ],
          serviceRating: [
            { required: true, message: '请选择服务评分', trigger: 'change' }
          ]
        },
        title: '新增',
        addRepairNotesDialog: false,
        type: 'add',
        form: { ...def }
      };
    },
    created() {},
    methods: {
      open(row, type) {
        this.addRepairNotesDialog = true;
        this.type = type;
        this.title = type == 'add' ? '新增' : '详情';
        if (type != 'add') {
          this.getDetail(row.id);
        } else {
          this.form.workId = row.id;
        }
      },
      async getDetail(id) {
        const res = await getSalesDemandById(id);
        this.form = res;
      },

      handleClose() {
        this.addRepairNotesDialog = false;
        this.form = { ...def };
      },
      async submitAdd() {
        alert(1)

        try {
          alert(1)
          let valid = await this.$refs.form.validate();
          console.log(this.form);
          return;
          const res = await evaluateSave(this.form);
          if (res) {
            this.$message.success('操作成功!');
            this.$emit('refresh');
            this.handleClose();
          }
        } catch (error) {}
      }
    }
  };
</script>

<style lang="scss" scoped>
  .block {
    height: 36px;
    display: flex;
    align-items: center;
  }
</style>