gongchunyi
2026-05-28 2c8a663d12ef967a6378d9f38a4224d14201f9d9
src/views/customerService/afterSalesHandling/components/formDia.vue
¶Ô±ÈÐÂÎļþ
@@ -0,0 +1,215 @@
<template>
  <div>
    <el-dialog
        v-model="dialogFormVisible"
        title="售后处理"
        width="70%"
        @close="closeDia"
    >
         <el-form
            :model="form"
            label-width="140px"
            label-position="top"
            :rules="operationType === 'view' ? {} : rules"
            ref="formRef"
         >
            <el-row :gutter="30">
               <el-col :span="12">
                  <el-form-item label="反馈时间:" prop="feedbackDate">
                     <el-date-picker
                        style="width: 100%"
                        v-model="form.feedbackDate"
                        value-format="YYYY-MM-DD"
                        format="YYYY-MM-DD"
                        type="date"
                        placeholder="请选择"
                        clearable
                        disabled
                     />
                  </el-form-item>
               </el-col>
               <el-col :span="12">
                  <el-form-item label="登记人:" prop="checkUserId">
                     <el-select
                        v-model="form.checkUserId"
                        placeholder="请选择"
                        clearable
                        disabled
                     >
                        <el-option
                           v-for="item in userList"
                           :key="item.userId"
                           :label="item.nickName"
                           :value="item.userId"
                        ></el-option>
                     </el-select>
                  </el-form-item>
               </el-col>
            </el-row>
            <el-row :gutter="30">
               <el-col :span="12">
                  <el-form-item label="客户名称:" prop="customerName">
                     <el-input
                        v-model="form.customerName"
                        placeholder="请输入"
                        clearable
                        disabled
                     />
                  </el-form-item>
               </el-col>
               <el-col :span="12">
                  <el-form-item label="问题描述:" prop="proDesc">
                     <el-input
                        v-model="form.proDesc"
                        placeholder="请输入"
                        clearable
                        :disabled="operationType === 'view'"
                        type="textarea"
                     />
                  </el-form-item>
               </el-col>
            </el-row>
            <el-row :gutter="30">
               <el-col :span="24">
                  <el-form-item label="处理结果:" prop="disRes">
                     <el-input
                        v-model="form.disRes"
                        placeholder="请输入"
                        clearable
                        :disabled="operationType === 'view'"
                        type="textarea"
                     />
                  </el-form-item>
               </el-col>
            </el-row>
         </el-form>
         <el-row :gutter="30">
            <el-col :span="12">
               <el-form-item label="处理人:" prop="disposeUserId">
                  <el-select
                     v-model="form.disposeUserId"
                     placeholder="请选择"
                     clearable
                     disabled
                  >
                     <el-option
                        v-for="item in userList"
                        :key="item.userId"
                        :label="item.nickName"
                        :value="item.userId"
                     ></el-option>
                  </el-select>
               </el-form-item>
            </el-col>
            <el-col :span="12">
               <el-form-item label="处理时间:" prop="disDate">
                  <el-date-picker
                     style="width: 100%"
                     v-model="form.disDate"
                     value-format="YYYY-MM-DD"
                     format="YYYY-MM-DD"
                     type="date"
                     placeholder="请选择"
                     clearable
                     disabled
                  />
               </el-form-item>
            </el-col>
         </el-row>
         <template #footer>
            <div class="dialog-footer">
               <el-button v-if="operationType === 'approve'" type="primary" @click="submitForm">确认</el-button>
               <el-button v-if="operationType === 'approve'" @click="closeDia">取消</el-button>
               <el-button v-else type="primary" @click="closeDia">关闭</el-button>
            </div>
         </template>
    </el-dialog>
  </div>
</template>
<script setup>
import {ref} from "vue";
import useUserStore from "@/store/modules/user.js";
import {userListNoPageByTenantId} from "@/api/system/user.js";
import {afterSalesServiceAdd, afterSalesServiceDispose, afterSalesServiceUpdate} from "@/api/customerService/index.js";
import { getCurrentDate } from "@/utils/index.js";
const { proxy } = getCurrentInstance()
const emit = defineEmits(['close'])
const dialogFormVisible = ref(false);
const operationType = ref('')
const userStore = useUserStore();
const data = reactive({
   form: {
      feedbackDate: "",
      checkUserId: "",
      customerName: "",
      proDesc: "",
      disposeUserId: "",
      disDate: "",
      disRes: "",
   },
   rules: {
      feedbackDate: [{required: true, message: "请选择", trigger: "change"}],
      checkUserId: [{required: true, message: "请选择", trigger: "change"}],
      customerName: [{required: true, message: "请输入", trigger: "blur"}],
      proDesc: [{required: true, message: "请输入", trigger: "blur"}],
      disRes: [{required: true, message: "请输入", trigger: "blur"}],
      disposeUserId: [{required: true, message: "请选择", trigger: "change"}],
      disDate: [{required: true, message: "请选择", trigger: "change"}],
   }
})
const { form, rules } = toRefs(data);
const userList = ref([])
// æ‰“开弹框
const openDialog = (type, row) => {
  operationType.value = type;
  dialogFormVisible.value = true;
   userListNoPageByTenantId().then((res) => {
      userList.value = res.data;
   });
   form.value = {...row}
   if (type === 'approve') {
      if (!form.value.disposeUserId) {
         form.value.disposeUserId = userStore.id;
      }
      if (!form.value.disDate) {
         form.value.disDate = getCurrentDate();
      }
   }
}
// const setName = (code) => {
//    const index = userList.value.findIndex(item => item.deviceModel === code);
//    if (index > -1) {
//       console.log(userList)
//       form.value.name = userList.value[index].deviceName;
//    }
// }
const submitForm = () => {
   if (operationType.value === 'view') {
      closeDia();
      return;
   }
   proxy.$refs["formRef"].validate(valid => {
      if (!valid) return;
      afterSalesServiceDispose(form.value).then(() => {
         proxy.$modal.msgSuccess("处理成功")
         closeDia()
      })
   })
}
// å…³é—­å¼¹æ¡†
const closeDia = () => {
   proxy.resetForm("formRef");
  dialogFormVisible.value = false;
  emit('close')
};
defineExpose({
  openDialog,
});
</script>
<style scoped>
</style>