feat:更换成树形数据

张含笑

2025-11-22 05da3a9d2c862aa6abe7926cc752a816f998cf43

feat:更换成树形数据

 src/views/tickets/ticketComponent/DispatchDialog.vue

@@ -14,19 +14,17 @@
      @submit.prevent
    >
      <el-form-item label="选择部门" prop="department">
        <el-select
        <el-tree-select
          v-model="form.department"
          placeholder="请选择部门"
          :data="deptTreeData"
          :props="treeProps"
          :filterable="true"
          :allow-clear="true"
          :check-strictly="true"
          @change="handleDepartmentChange"
          class="full-width"
        >
          <el-option
            v-for="dept in departments"
            :key="dept.value"
            :label="dept.label"
            :value="dept.value"
          />
        </el-select>
        />
      </el-form-item>
      <el-form-item label="选择处理人" prop="handler">
        <el-select
@@ -60,168 +58,191 @@
  </el-dialog>
</template>

<script>
<script setup>
import { getDeptTree, getDeptLazyTree } from '@/api/system/dept'
import { ElMessage } from 'element-plus';
import { flowEvent } from '@/api/tickets/ticket';
import { onMounted } from 'vue';
const props = defineProps({
  modelValue: {
    type: Boolean,
    default: false
  },
  currentDetail: {
    type: Object,
    default: () => ({})
  },
  departments: {
    type: Array,
    default: () => []
  },
  departmentUsers: {
    type: Object,
    default: () => ({})
  },
  algorithms: {
    type: Array,
    default: () => []
  },
  types: {
    type: Array,
    default: () => []
  }
});
const emit = defineEmits(['update:modelValue', 'dispatch-success', 'dispatch-error']);
const formRef = ref(null); // 表单引用
const loading = ref(false);
const form = ref({
  department: '',
  handler: ''
});
const deptTreeData =ref([])
// 树形选择器配置
const treeProps = ref({
  value: 'id', // 对应部门数据的id字段（作为选中值）
  label: 'name', // 对应部门数据的name字段（作为显示文本）
  children: 'children' // 对应子部门字段
});
// 获取树形数据
const getDepartmentTree=() =>{
const tenantId = '000000'
getDeptTree(tenantId).then(res => {
deptTreeData.value = res.data.data
       console.log('部门树形',res.data.data);
       
      })
}
// 表单校验规则
const rules = ref({
  department: [{ required: true, message: '请选择部门', trigger: 'change' }],
  handler: [{ required: true, message: '请选择处理人', trigger: 'change' }]
});

export default {
  name: 'DispatchDialog',
  props: {
    modelValue: {
      type: Boolean,
      default: false
    },
    currentDetail: {
      type: Object,
      default: () => ({})
    },
    departments: {
      type: Array,
      default: () => []
    },
    departmentUsers: {
      type: Object,
      default: () => ({})
    },
    algorithms: {
      type: Array,
      default: () => []
    },
    types: {
      type: Array,
      default: () => []
// 计算属性 - 对话框显示状态（双向绑定）
const dialogVisible = computed({
  get() {
    return props.modelValue;
  },
  set(value) {
    emit('update:modelValue', value);
  }
});

// 处理人列表
const availableHandlers = computed(() => {
  return form.value.department ? props.departmentUsers[form.value.department] || [] : [];
});

// 监听 modelValue 变化，打开对话框时重置表单
watch(
  () => props.modelValue,
  (newVal) => {
    if (newVal) {
      resetForm();
    }
  },
  emits: ['update:modelValue', 'dispatch-success', 'dispatch-error'],
  data() {
    return {
      form: {
        department: '',
        handler: ''
      },
      rules: {
        department: [{ required: true, message: '请选择部门', trigger: 'change' }],
        handler: [{ required: true, message: '请选择处理人', trigger: 'change' }]
      },
      loading: false
    };
  },
  computed: {
    dialogVisible: {
      get() {
        return this.modelValue;
      },
      set(value) {
        this.$emit('update:modelValue', value);
      }
    },
    availableHandlers() {
      return this.form.department ? this.departmentUsers[this.form.department] || [] : [];
    }
  },
  watch: {
    modelValue(newVal) {
      if (newVal) {
        this.resetForm();
      }
    }
  },
  methods: {
    resetForm() {
      this.form = {
        department: '',
        handler: ''
      };
      if (this.$refs.formRef) {
        this.$refs.formRef.clearValidate();
      }
    },
    
    handleClose() {
      this.dialogVisible = false;
      this.resetForm();
    },
    
    handleDepartmentChange(deptId) {
      this.form.handler = ''; // 清空处理人选择
    },
    
    async handleSubmit() {
      try {
        const valid = await this.$refs.formRef.validate();
        if (!valid) return;
        
        this.loading = true;
        
        // 验证必填字段
        if (!this.validateRequiredFields()) {
          return;
        }
        
        const algorithmValue = this.getAlgorithmValue();
        
        const data = {
          id: this.currentDetail.id,
          status: this.currentDetail.status,
          isPass: 0, // 0 表示通过
          eventName: this.currentDetail.orderName,
          eventNum: this.currentDetail.orderNumber,
          workOrderTypeDictKey: this.currentDetail.type,
          content: this.currentDetail.content,
          createDept: this.form.department,
          updateUser: this.form.handler,
          aiType: algorithmValue,
        };
        
        const response = await flowEvent(data);
        if (response.data.code === 0) {
          this.$message.success('工单已成功派发');
          this.$emit('dispatch-success');
          this.handleClose();
        } else {
          throw new Error(response.data.msg || '派发失败');
        }
      } catch (error) {
        console.error('派发失败:', error);
        this.$emit('dispatch-error', error);
        this.$message.error(error.message || '派发失败，请稍后重试');
      } finally {
        this.loading = false;
      }
    },
    
    validateRequiredFields() {
      if (!this.currentDetail.orderName || !this.currentDetail.orderName.trim()) {
        this.$message.warning('请填写工单名称');
        return false;
      }
      if (!this.currentDetail.type) {
        this.$message.warning('请选择工单类型');
        return false;
      }
      if (!this.currentDetail.content || !this.currentDetail.content.trim()) {
        this.$message.warning('请填写工单内容');
        return false;
      }
      return true;
    },
    
    getAlgorithmValue() {
      const isValue = this.algorithms.some(item => item.value === this.currentDetail.aiType);
      
      if (isValue) {
        return this.currentDetail.aiType;
      } else {
        const matched = this.algorithms.find(
          item => item.dict_value === this.currentDetail.aiType ||
                  item.label === this.currentDetail.aiType
        );
        return matched ? matched.value : null;
      }
    }
  { immediate: true }
);

// 重置表单
const resetForm = () => {
  form.value = {
    department: '',
    handler: ''
  };
  if (formRef.value) {
    formRef.value.clearValidate(); 
  }
};
</script>

// 关闭对话框
const handleClose = () => {
  dialogVisible.value = false;
  resetForm();
};

// 部门切换时清空处理人
const handleDepartmentChange = () => {
  form.value.handler = '';
};

// 验证必填字段（currentDetail 中的必填项）
const validateRequiredFields = () => {
  if (!props.currentDetail.orderName || !props.currentDetail.orderName.trim()) {
    ElMessage.warning('请填写工单名称');
    return false;
  }
  if (!props.currentDetail.type) {
    ElMessage.warning('请选择工单类型');
    return false;
  }
  if (!props.currentDetail.content || !props.currentDetail.content.trim()) {
    ElMessage.warning('请填写工单内容');
    return false;
  }
  return true;
};

// 获取算法值
const getAlgorithmValue = () => {
  const { aiType } = props.currentDetail;
  // 检查是否直接匹配 value
  const isValueMatch = props.algorithms.some(item => item.value === aiType);
  if (isValueMatch) {
    return aiType;
  }
  // 尝试匹配 dict_value 或 label
  const matched = props.algorithms.find(
    item => item.dict_value === aiType || item.label === aiType
  );
  return matched ? matched.value : null;
};

// 提交派发
const handleSubmit = async () => {
  try {
    const valid = await formRef.value.validate();
    if (!valid) return;
    if (!validateRequiredFields()) {
      return;
    }

    loading.value = true;
    const algorithmValue = getAlgorithmValue();
    const data = {
      id: props.currentDetail.id,
      status: props.currentDetail.status,
      isPass: 0, // 0 表示通过
      eventName: props.currentDetail.orderName,
      eventNum: props.currentDetail.orderNumber,
      workOrderTypeDictKey: props.currentDetail.type,
      content: props.currentDetail.content,
      createDept: form.value.department,
      updateUser: form.value.handler,
      aiType: algorithmValue,
    };

    // 发送请求
    const response = await flowEvent(data);
    if (response.data.code === 0) {
      ElMessage.success('工单已成功派发');
      emit('dispatch-success');
      handleClose();
    } else {
      throw new Error(response.data.msg || '派发失败');
    }
  } catch (error) {
    console.error('派发失败:', error);
    emit('dispatch-error', error);
    ElMessage.error(error.message || '派发失败，请稍后重试');
  } finally {
    loading.value = false;
  }
};
onMounted(()=>{
  getDepartmentTree()
})
</script>
<style scoped>
.full-width {
  width: 100%;