feat: base 优化ticket组件

src/views/wf/ticketd.vue

@@ -16,25 +16,13 @@
                     v-if="ticketDetail.participant_type == 2 || ticketDetail.participant_type == 1">
                     <span v-for="item in ticketDetail.participant_" :key="item.id">{{ item.name }}/</span>
                 </el-descriptions-item>
-            </el-descriptions>
-        </el-collapse-item>
-        <el-collapse-item title="操作" name="2" v-if="actionShow">
-            <el-input type="textarea" :rows="2" v-model="handleForm.suggestion" placeholder="处理意见" />
-            <el-row>
-                <el-col :xs="24" :md="12" style="padding: 1px">
-                    <el-button :loading="submitLoading" :disabled="submitLoading" v-for="item in transitions"
-                        :key="item.id" size="small" :type="item.attribute_type === 2 ? 'danger' : 'primary'
-                            " @click="handleTransition(item.id)">
-                        {{ item.name }}
-                    </el-button>
-                </el-col>
-                <el-col :xs="24" :md="12" style="text-align: right;padding: 1px">
+                <el-descriptions-item label="操作:">
                     <el-button v-if="ticketDetail.state_.enable_retreat && isOwn" type="danger" size="small"
                         @click="handleRetreat">撤回</el-button>
-                </el-col>
-            </el-row>
+                </el-descriptions-item>
+            </el-descriptions>
         </el-collapse-item>
-        <el-collapse-item title="审批历史" name="3">
+        <el-collapse-item title="审批历史" name="2">
             <div style="padding:1px"><el-timeline>
                     <el-timeline-item v-for="item in ticketLog" :key="item.id" :timestamp="item.create_time"
                         :color="getColor(item)">
@@ -66,28 +54,30 @@
 
         </el-collapse-item>
     </el-collapse>
+    <el-dialog :title="dialogTitle" v-model="dialogVisible">
+        <el-input v-model="suggestion" type="textarea" :rows="2"></el-input>
+        <template #footer>
+            <el-button @click="dialogVisible = false">取 消</el-button>
+            <el-button type="primary" @click="dialogConfirm()">确 定</el-button>
+        </template>
+    </el-dialog>
 </template>
 <script setup>
 import { ref, defineProps, onMounted } from "vue";
 import { actStateEnum, interveneTypeEnum } from "@/utils/enum.js";
 import API from '@/api';
 import TOOL from "@/utils/tool.js";
-import { ElMessageBox } from 'element-plus'
 const props = defineProps({
     ticket_data: { type: Object, default: null },
     ticket_: { type: Object, default: null, required: true },
 });
 const currentUser = ref(TOOL.data.get("USER_INFO").id)
-const actionShow = ref(false);
 const isOwn = ref(false);
-const activeNames = ref(['1', '3']);
+const activeNames = ref(['1', '2']);
 const ticketDetail = ref({
     state_: {}
 });
 const ticketLog = ref([]);
-const handleForm = ref({
-    suggestion: ""
-})
 const ticketId = ref(null);
 onMounted(() => {
     if (props.ticket_) {
@@ -98,12 +88,9 @@ onMounted(() => {
 });
 const emit = defineEmits(['success']);
 const refreshTicket = async () => {
-    actionShow.value = false
     isOwn.value = false
-    transitions.value = []
-    handleForm.value.suggestion = ''
     ticketLog.value = []
-    activeNames.value = ['1', '3'] // 根据需要恢复初始展开项
+    activeNames.value = ['1', '2'] // 根据需要恢复初始展开项
     getTicketDetail()
     getTicketLog()
     emit('success')
@@ -113,32 +100,13 @@ const getTicketDetail = () => {
     API.wf.ticket.ticketItem.req(ticketId.value).then(res => {
         ticketDetail.value = res;
         const isCreator = res.create_by === currentUser.value
-        const isParticipant =
-        (res.participant_type === 1 && res.participant === currentUser.value) ||
-        (res.participant_type === 2 && res.participant.includes(currentUser.value))
-
         if (isCreator) {
         isOwn.value = true
         }
 
-        if (isCreator || isParticipant) {
-        actionShow.value = true
-        if (!activeNames.value.includes('2')) {
-            activeNames.value.push('2')
-        }
-        if (isParticipant) {
-            getTransitions()
-        }
-        }
-
     });
 };
 
-const getTransitions = () => {
-    API.wf.ticket.ticketTransitions.req(ticketId.value).then(res => {
-        transitions.value = res;
-    });
-}
 
 const getTicketLog = () => {
     API.wf.ticket.ticketFlowlogs.req(ticketId.value).then(res => {
@@ -152,37 +120,18 @@ function getColor(item) {
     return "#909399"; // 默认灰色
 }
 
+const dialogVisible = ref(false);
+const dialogTitle = ref("意见/原因");
+const suggestion = ref("");
 const handleRetreat = () => {
-    ElMessageBox.confirm("确认撤回吗?", "温馨提示", {
-        confirmButtonText: "确认",
-        cancelButtonText: "取消",
-        type: "warning",
-    }).then(() => {
-        API.wf.ticket.ticketRetreat
-            .req(ticketId.value, handleForm.value)
+    dialogTitle.value = "撤回原因";
+    dialogVisible.value = true;
+};
+const dialogConfirm = () => {
+    API.wf.ticket.ticketRetreat
+            .req(ticketId.value, {"suggestion": suggestion.value})
             .then((res) => {
                 refreshTicket();
             });
-    })
-}
-
-const submitLoading = ref(false);
-const transitions = ref([]);
-const handleTransition = (transitionId) => {
-    let params = new Object();
-    params.transition = transitionId;
-    if (props.ticket_data) {
-        params.ticket_data = props.ticket_data;
-    } else {
-        params.ticket_data = {};
-    }
-    params.suggestion = handleForm.value.suggestion;
-    submitLoading.value = true;
-    API.wf.ticket.ticketHandle.req(ticketId.value, params).then((res) => {
-        submitLoading.value = false;
-        refreshTicket();
-    }).catch((e) => {
-        submitLoading.value = false;
-    });
-}
+};
 </script>

src/views/wf/ticketd_b.vue

@@ -5,12 +5,19 @@
             :type="item.attribute_type === 2 ? 'danger' : 'primary'"
             :loading="isSaveing"
             :disabled="isSaveing"
-            @click="submit(item.id)"
+            @click="handleTransition(item)"
             style="margin-right: 2px"
         >{{ item.name }}</el-button></span>
+    <el-dialog :title="dialogTitle" v-model="dialogVisible" style="text-align: left;">
+        <el-input v-model="suggestion" type="textarea" :rows="2" required></el-input>
+        <template #footer>
+            <el-button @click="dialogVisible = false">取 消</el-button>
+            <el-button type="primary" @click="dialogConfirm()">确 定</el-button>
+        </template>
+    </el-dialog>
 </template>
 <script setup>
-import { ref, reactive, onMounted, defineEmits } from 'vue'
+import { ref, reactive, onMounted, defineEmits,watch } from 'vue'
 import { ElMessage } from 'element-plus'
 import API from '@/api';
 import TOOL from "@/utils/tool.js";
@@ -30,6 +37,15 @@ const transitions = ref([]);
 onMounted(async () => {
     init()
 })
+watch(
+  () => props.ticket_,
+  async (newVal) => {
+    if (newVal && Object.keys(newVal).length > 0) {
+      await init()
+    }
+  },
+  { immediate: false }
+)
 const ticketId = ref(null);
 const actionShow = ref(false);
 const init = async () => {
@@ -56,6 +72,19 @@ const currentUser = ref(TOOL.data.get("USER_INFO").id)
 const isSaveing = ref(false);
 
 const emit = defineEmits(["success"]);
+const handleTransition = (item) => {
+    currentTransitionId.value = item.id;
+    if (item.attribute_type != 1) {
+        dialogVisible.value = true;
+    } else {
+        submit(item.id);
+    }
+}
+const currentTransitionId = ref(null);
+const dialogConfirm = () => {
+    dialogVisible.value = false;
+    submit(currentTransitionId.value);
+}
 const submit = async (transition_id) => {
     isSaveing.value = true;
     if (props.submit_b_func) {
@@ -109,4 +138,7 @@ const submit = async (transition_id) => {
         }
     }
 }
+const dialogVisible = ref(false);
+const dialogTitle = ref("处理意见");
+const suggestion = ref("");
 </script>