From 05da3a9d2c862aa6abe7926cc752a816f998cf43 Mon Sep 17 00:00:00 2001
From: 张含笑 <zhx18749296735@163.com>
Date: Sat, 22 Nov 2025 10:16:32 +0800
Subject: [PATCH] feat:更换成树形数据
---
src/views/tickets/ticketComponent/DispatchDialog.vue | 349 ++++++++++++++++++++++++++++++---------------------------
1 files changed, 185 insertions(+), 164 deletions(-)
diff --git a/src/views/tickets/ticketComponent/DispatchDialog.vue b/src/views/tickets/ticketComponent/DispatchDialog.vue
index ea4d5dc..bbe47c8 100644
--- a/src/views/tickets/ticketComponent/DispatchDialog.vue
+++ b/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%;
--
Gitblit v1.9.3