新疆_马铃薯 1.角色管理页面角色编号不展示

gaoluyang

2026-08-04 760433983d2ab722774bc3384a789f3ddf2c4dd8

 src/views/customerService/expiryAfterSales/components/formDia.vue

¶Ô±ÈÐÂÎļþ
@@ -0,0 +1,319 @@
<template>
  <div>
    <el-dialog
        v-model="dialogFormVisible"
        :title="dialogTitle"
        width="70%"
        @close="closeDia"
    >
         <el-form
            :model="form"
            label-width="140px"
            label-position="top"
            :rules="rules"
            ref="formRef"
         >
            <el-row :gutter="30">
               <el-col :span="12">
                  <el-form-item label="临期产品名称：" prop="productName">
                     <el-input
                        v-model="form.productName"
                        placeholder="请输入产品名称"
                        clearable
                        :disabled="isFieldDisabled('productName')"
                     />
                  </el-form-item>
               </el-col>
               <el-col :span="12">
                  <el-form-item label="产品批号：" prop="batchNumber">
                     <el-input
                        v-model="form.batchNumber"
                        placeholder="请输入产品批号"
                        clearable
                        :disabled="isFieldDisabled('batchNumber')"
                     />
                  </el-form-item>
               </el-col>
            </el-row>
            <el-row :gutter="30">
               <el-col :span="12">
                  <el-form-item label="临期日期：" prop="expiryDate">
                     <el-date-picker
                        style="width: 100%"
                        v-model="form.expiryDate"
                        value-format="YYYY-MM-DD"
                        format="YYYY-MM-DD"
                        type="date"
                        placeholder="请选择临期日期"
                        clearable
                        :disabled="isFieldDisabled('expiryDate')"
                     />
                  </el-form-item>
               </el-col>
               <el-col :span="12">
                  <el-form-item label="库存数量：" prop="stockQuantity">
                     <el-input-number
                        v-model="form.stockQuantity"
                        :min="0"
                        placeholder="请输入库存数量"
                        style="width: 100%"
                        :disabled="isFieldDisabled('stockQuantity')"
                     />
                  </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="isFieldDisabled('customerName')"
                     />
                  </el-form-item>
               </el-col>
               <el-col :span="12">
                  <el-form-item label="联系电话：" prop="contactPhone">
                     <el-input
                        v-model="form.contactPhone"
                        placeholder="请输入联系电话"
                        clearable
                        :disabled="isFieldDisabled('contactPhone')"
                     />
                  </el-form-item>
               </el-col>
            </el-row>
            <el-row :gutter="30">
               <el-col :span="24">
                  <el-form-item label="问题描述：" prop="problemDesc">
                     <el-input
                        v-model="form.problemDesc"
                        placeholder="请输入问题描述"
                        clearable
                        :disabled="isFieldDisabled('problemDesc')"
                        type="textarea"
                        :rows="3"
                     />
                  </el-form-item>
               </el-col>
            </el-row>
            <el-row :gutter="30" v-if="operationType !== 'add'">
               <el-col :span="12">
                  <el-form-item label="处理人：" prop="handlerId">
                     <el-select
                        v-model="form.handlerId"
                        placeholder="请选择处理人"
                        clearable
                        :disabled="isFieldDisabled('handlerId')"
                        style="width: 100%"
                     >
                        <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="handleDate">
                     <el-date-picker
                        style="width: 100%"
                        v-model="form.handleDate"
                        value-format="YYYY-MM-DD"
                        format="YYYY-MM-DD"
                        type="date"
                        placeholder="请选择处理日期"
                        clearable
                        :disabled="isFieldDisabled('handleDate')"
                     />
                  </el-form-item>
               </el-col>
            </el-row>
            <el-row :gutter="30" v-if="operationType !== 'add'">
               <el-col :span="24">
                  <el-form-item label="处理结果：" prop="handleResult">
                     <el-input
                        v-model="form.handleResult"
                        placeholder="请输入处理结果"
                        clearable
                        :disabled="isFieldDisabled('handleResult')"
                        type="textarea"
                        :rows="3"
                     />
                  </el-form-item>
               </el-col>
            </el-row>
         </el-form>
         <template #footer>
            <div class="dialog-footer">
               <el-button type="primary" @click="submitForm" v-if="operationType !== 'view'">确认</el-button>
               <el-button @click="closeDia">{{ operationType === 'view' ? '关闭' : '取消' }}</el-button>
            </div>
         </template>
    </el-dialog>
  </div>
</template>

<script setup>
import {ref, computed} from "vue";
import useUserStore from "@/store/modules/user.js";
import { getCurrentDate } from "@/utils/index.js";
import {userListNoPageByTenantId} from "@/api/system/user.js";
import {expiryAfterSalesAdd, expiryAfterSalesUpdate} from "@/api/customerService/index.js";
const { proxy } = getCurrentInstance()
const emit = defineEmits(['close'])
const dialogFormVisible = ref(false);
const operationType = ref('')
const userStore = useUserStore();

const dialogTitle = computed(() => {
   switch (operationType.value) {
      case 'add':
         return '新增临期售后';
      case 'edit':
         return '编辑临期售后';
      case 'handle':
         return '处理临期售后';
      case 'view':
         return '查看临期售后';
      default:
         return '临期售后管理';
   }
});

const data = reactive({
   form: {
      id: "",
      productName: "",
      batchNumber: "",
      expiryDate: "",
      stockQuantity: 0,
      customerName: "",
      contactPhone: "",
      problemDesc: "",
      handlerId: "",
      handleDate: "",
      handleResult: "",
      status: 1
   },
   rules: {
      productName: [{required: true, message: "请输入产品名称", trigger: "blur"}],
      batchNumber: [{required: true, message: "请输入产品批号", trigger: "blur"}],
      expiryDate: [{required: true, message: "请选择临期日期", trigger: "change"}],
      stockQuantity: [{required: true, message: "请输入库存数量", trigger: "blur"}],
      customerName: [{required: true, message: "请输入客户名称", trigger: "blur"}],
      contactPhone: [
         {required: true, message: "请输入联系电话", trigger: "blur"},
         {pattern: /^1[3-9]\d{9}$/, message: "请输入正确的手机号码", trigger: "blur"}
      ],
      problemDesc: [{required: true, message: "请输入问题描述", trigger: "blur"}],
   }
})
const { form, rules } = toRefs(data);
const userList = ref([])
const handleEditableFields = ["handlerId", "handleDate", "handleResult"];

const isFieldDisabled = (field) => {
   if (operationType.value === "view") return true;
   if (operationType.value === "handle") return !handleEditableFields.includes(field);
   return false;
};

// æ‰“开弹框
const openDialog = (type, row) => {
  operationType.value = type;
  dialogFormVisible.value = true;
	
   // èŽ·å–用户列表
   userListNoPageByTenantId().then(res => {
      userList.value = res.data;
   });

   if (type === 'add') {
      // æ–°å¢žæ—¶é‡ç½®è¡¨å•
      form.value = {
         id: "",
         productName: "",
         batchNumber: "",
         expiryDate: "",
         stockQuantity: 0,
         customerName: "",
         contactPhone: "",
         problemDesc: "",
         handlerId: "",
         handleDate: "",
         handleResult: "",
         status: 1
      };
   } else {
      // ç¼–辑或查看时填充数据
      form.value = { ...row };
      if (type === 'handle' && !form.value.handlerId) {
         form.value.handlerId = userStore.id;
         form.value.handleDate = getCurrentDate();
      }
   }
}

const submitForm = () => {
   if (operationType.value === "handle") {
      if (!form.value.handlerId || !form.value.handleDate || !form.value.handleResult) {
         proxy.$modal.msgWarning("请填写处理人、处理日期和处理结果");
         return;
      }
      handleSubmit();
      return;
   }
   proxy.$refs["formRef"].validate(valid => {
      if (valid) {
         handleSubmit();
      }
   });
}

const handleSubmit = () => {
   const submitData = {
      id: form.value.id,
      productName: form.value.productName,
      batchNumber: form.value.batchNumber,
      expireDate: form.value.expiryDate,
      stockQuantity: form.value.stockQuantity,
      customerName: form.value.customerName,
      contactPhone: form.value.contactPhone,
      disRes: form.value.problemDesc,
      status: operationType.value === "handle" ? 2 : form.value.status,
      disposeUserId: form.value.handlerId,
      disposeNickName: userList.value.find(item => item.userId === form.value.handlerId)?.nickName,
      disposeResult: form.value.handleResult,
      disDate: form.value.handleDate
   };

   const apiCall = operationType.value === 'add' ? expiryAfterSalesAdd : expiryAfterSalesUpdate;
   apiCall(submitData).then(() => {
      const successText = operationType.value === "add" ? "新增成功" : operationType.value === "handle" ? "处理成功" : "更新成功";
      proxy.$modal.msgSuccess(successText);
      closeDia();
   }).catch(error => {
      console.error('提交数据失败:', error);
      proxy.$modal.msgError('提交数据失败，请稍后重试');
   });
}

// å…³é—­å¼¹æ¡†
const closeDia = () => {
   proxy.resetForm("formRef");
  dialogFormVisible.value = false;
  emit('close')
};

defineExpose({
  openDialog,
});
</script>

<style scoped>

</style>