| | |
| | | placeholder="请选择工单类型" |
| | | class="filter-item" |
| | | clearable |
| | | @change="handleSearch" |
| | | > |
| | | <el-option |
| | | v-for="item in types" |
| | |
| | | placeholder="请选择状态" |
| | | class="filter-item" |
| | | clearable |
| | | @change="handleSearch" |
| | | > |
| | | <el-option |
| | | v-for="item in statuses" |
| | |
| | | placeholder="请选择关联算法" |
| | | class="filter-item" |
| | | clearable |
| | | @change="handleSearch" |
| | | > |
| | | <el-option |
| | | v-for="item in algorithms" |
| | |
| | | placeholder="请选择复核状态" |
| | | class="filter-item" |
| | | clearable |
| | | @change="handleSearch" |
| | | > |
| | | <el-option |
| | | v-for="item in reviewStatuses" |
| | |
| | | </el-form> |
| | | <template #footer> |
| | | <div class="dialog-footer"> |
| | | |
| | | <el-button type="danger" :loading="submitLoading" @click="submitForm">发布</el-button> |
| | | <el-button type="infoprimary" plain :loading="draftLoading" @click="saveDraft" |
| | | >存草稿</el-button |
| | |
| | | </el-dialog> |
| | | |
| | | <!-- 工单详情对话框 --> |
| | | <el-dialog v-model="detailVisible" title="工单详情" width="80%" append-to-body> |
| | | <el-dialog class="custom-dialog" align-center v-model="detailVisible" title="工单详情" width="80%" append-to-body> |
| | | <div class="detail-container"> |
| | | <div class="detail-top-title"> |
| | | <div class="event-title-center event-orderNumber"> |
| | |
| | | </el-steps> |
| | | </div> |
| | | |
| | | <!-- 基本信息表格 --> |
| | | <div class="PopUpTableScrolls"> |
| | | <!-- 基本信息表格 --> |
| | | <el-table :show-header="false" :data="formattedDetailFields" border class="tableCss"> |
| | | <el-table-column prop="label1" label="基本信息" width="150"> |
| | | <template #default="{ row }"> |
| | | <!-- 添加必填星号的标签 --> |
| | | <span |
| | | v-if="currentDetail.status === 0 && row.label1 === '工单名称'" |
| | | v-if="currentDetail.status === 0 &&(row.label1 === '关联算法' || row.label1 === '工单名称')" |
| | | class="required-label" |
| | | > |
| | | <span class="required-star">*</span>{{ row.label1 }} |
| | |
| | | class="required-input" |
| | | /> |
| | | </template> |
| | | <template |
| | | v-else-if=" |
| | | currentDetail.status === 0 && |
| | | row.label1 === '关联算法' && |
| | | hasProcessingBtnPermission() |
| | | " |
| | | > |
| | | <el-select |
| | | v-model="currentDetail.aiType" |
| | | placeholder="请选择关联算法" |
| | | class="required-input" |
| | | > |
| | | <el-option |
| | | v-for="item in algorithms" |
| | | :key="item.value" |
| | | :label="item.label" |
| | | :value="item.value" |
| | | /> |
| | | </el-select> |
| | | </template> |
| | | <template v-else>{{ row.value1 }}</template> |
| | | </template> |
| | | </el-table-column> |
| | | <el-table-column prop="label2" label="基本信息" width="150"> |
| | | <template #default="{ row }"> |
| | | <!-- 添加必填星号的标签 --> |
| | | |
| | | <span |
| | | v-if=" |
| | | currentDetail.status === 0 && |
| | | (row.label2 === '工单类型' || row.label2 === '工单内容') |
| | | row.label2 === '工单内容' |
| | | " |
| | | class="required-label" |
| | | > |
| | |
| | | <el-table-column> |
| | | <template #default="{ row }"> |
| | | <!-- 修改工单类型和工单内容的显示 --> |
| | | |
| | | |
| | | <template |
| | | v-if=" |
| | | currentDetail.status === 0 && |
| | | row.label2 === '工单类型' && |
| | | hasProcessingBtnPermission() |
| | | " |
| | | > |
| | | <el-select |
| | | v-model="currentDetail.type" |
| | | placeholder="请选择工单类型" |
| | | class="required-input" |
| | | > |
| | | <el-option |
| | | v-for="item in types" |
| | | :key="item.value" |
| | | :label="item.label" |
| | | :value="item.value" |
| | | /> |
| | | </el-select> |
| | | </template> |
| | | <template |
| | | v-else-if=" |
| | | currentDetail.status === 0 && |
| | | row.label2 === '工单内容' && |
| | | hasProcessingBtnPermission() |
| | |
| | | <!-- 图片和地图部分 --> |
| | | <div class="media-section"> |
| | | <el-row :gutter="20"> |
| | | <el-col :span="1"> |
| | | <div |
| | | class="leftBtn" |
| | | :class="currentIndex === 0 ? 'disableds' : ''" |
| | | @click="leftClick" |
| | | > |
| | | < |
| | | </div> |
| | | </el-col> |
| | | <el-col :span="11"> |
| | | |
| | | <el-col :span="12"> |
| | | <div class="media-box"> |
| | | <div class="media-title">事件图片</div> |
| | | <div class="media-content"> |
| | |
| | | </div> |
| | | </div> |
| | | </el-col> |
| | | <el-col :span="11"> |
| | | <el-col :span="12"> |
| | | <div class="media-box"> |
| | | <!-- 根据状态显示不同的标题和内容 --> |
| | | |
| | |
| | | </template> |
| | | </div> |
| | | </el-col> |
| | | <el-col :span="1"> |
| | | <div |
| | | :class="currentIndex === tableData.length - 1 ? 'disableds' : ''" |
| | | class="leftBtn" |
| | | @click="rightClick" |
| | | > |
| | | > |
| | | </div> |
| | | </el-col> |
| | | |
| | | |
| | | </el-row> |
| | | </div> |
| | | </div> |
| | | |
| | | <!-- 操作按钮 --> |
| | | <div class="dialog-footer"> |
| | | <template v-if="currentDetail.status === 2"> |
| | | <div |
| | | class="leftBtn" |
| | | :class="currentIndex === 0 ? 'disableds' : ''" |
| | | @click="leftClick" |
| | | > |
| | | 上一页 |
| | | </div> |
| | | <div class="btngroups"> |
| | | <template v-if="currentDetail.status === 2"> |
| | | <!-- 待审核 --> |
| | | <el-button |
| | | v-if="hasReviewBtnPermission()" |
| | |
| | | @click="finalizeTicket">完结工单</el-button> --> |
| | | <el-button @click="detailVisible = false">取消</el-button> |
| | | </template> |
| | | </div> |
| | | <div |
| | | :class="currentIndex === tableData.length - 1 ? 'disableds' : ''" |
| | | class="leftBtn" |
| | | @click="rightClick" |
| | | > |
| | | 下一页 |
| | | </div> |
| | | </div> |
| | | </div> |
| | | </el-dialog> |
| | |
| | | <el-form :model="dispatchForm" :rules="dispatchRules" ref="dispatchForm" label-width="100px"> |
| | | <el-form-item label="选择部门" prop="department"> |
| | | <el-select |
| | | |
| | | v-model="dispatchForm.department" |
| | | placeholder="请选择部门" |
| | | @change="handleDispatchDepartmentChange" |
| | |
| | | </el-form-item> |
| | | <el-form-item label="选择处理人" prop="handler"> |
| | | <el-select |
| | | filterable |
| | | v-model="dispatchForm.handler" |
| | | placeholder="请选择处理人" |
| | | :disabled="!dispatchForm.department" |
| | |
| | | { label: '任务发起人', value: this.currentDetail.creator }, |
| | | { label: '当前状态', value: this.mapStatus(this.currentDetail.status) }, |
| | | { label: '事件地址', value: this.currentDetail.address || this.currentDetail.latAndLon }, // 包含经纬度信息 |
| | | { label: '关联算法', value: this.currentDetail.aiType }, |
| | | { label: '关联算法', |
| | | value: |
| | | this.algorithms.find(t => t.value === this.currentDetail.aiType)?.label || |
| | | this.currentDetail.aiType || |
| | | '/', |
| | | |
| | | }, |
| | | { label: '发起单位', value: this.currentDetail.department }, |
| | | { label: '发起任务时间', value: this.currentDetail.startTime }, |
| | | { label: '工单内容', value: this.currentDetail.content }, |
| | |
| | | value2: filteredFields[i + 1]?.value || (filteredFields[i + 1]?.label ? '暂无数据' : ''), |
| | | }); |
| | | } |
| | | |
| | | return formattedFields; |
| | | |
| | | }, |
| | | dynamicFixedStatuses() { |
| | | // 直接使用接口返回的 stepInfos |
| | |
| | | columnType.dicData = this.types; |
| | | this.allAlgorithms = info |
| | | |
| | | // console.log('工单类型',this.types); |
| | | // console.log('关联算法',this.allAlgorithms ); |
| | | console.log('工单类型',this.types); |
| | | console.log('关联算法',this.allAlgorithms ); |
| | | // 确保算法数据的映射一致 |
| | | // this.algorithms = |
| | | // ai_type?.map(item => ({ |
| | |
| | | this.$message.info('该工单类型暂无关联算法'); |
| | | return; |
| | | } |
| | | // console.log('matchedCategory',matchedCategory); |
| | | |
| | | this.algorithms = matchedCategory.algorithms.map(algo => ({ |
| | | label: algo.dict_value, |
| | |
| | | |
| | | console.log('this.currentDetail', this.currentDetail); |
| | | this.detailVisible = true; |
| | | this.handleTypeChange(this.currentDetail.type) |
| | | this.$nextTick(() => { |
| | | if (this.$refs.MapContainer && this.$refs.MapContainer.initAddEntity) { |
| | | this.$refs.MapContainer.initAddEntity('point', this.currentDetail.location); |
| | |
| | | this.$message.warning('请填写工单名称'); |
| | | return; |
| | | } |
| | | if (!this.currentDetail.type) { |
| | | this.$message.warning('请选择工单类型'); |
| | | if (!this.currentDetail.aiType) { |
| | | this.$message.warning('请选择关联算法'); |
| | | return; |
| | | } |
| | | if (!this.currentDetail.content || !this.currentDetail.content.trim()) { |
| | |
| | | |
| | | // 通过验证后,打开派发对话框 |
| | | this.dispatchDialogVisible = true; |
| | | |
| | | console.log('受理',this.currentDetail); |
| | | |
| | | }, |
| | | hasProcessingBtnPermission() { |
| | | // undefined 或 false 都返回 false,只有 true 返回 true |
| | | // console.log('权限检查:', this.permission) |
| | | // console.log('权限检查:', this.permission.tickets_processing_btn) |
| | | return this.permission && this.permission.tickets_processing_btn === true; |
| | | }, |
| | | hasProcessedAndOverBtnPermission() { |
| | |
| | | return; |
| | | } |
| | | this.dispatchLoading = true; |
| | | console.log('派发成功',this.currentDetail); |
| | | |
| | | this.$refs.dispatchForm.validate(async valid => { |
| | | if (valid) { |
| | | try { |
| | |
| | | content: this.currentDetail.content, // 使用 content 替代原来的 remark |
| | | createDept: this.dispatchForm.department, // 派发部门 ID |
| | | updateUser: this.dispatchForm.handler, // 处理人 ID |
| | | aiType:this.currentDetail.aiType |
| | | }; |
| | | console.log('派发',data); |
| | | |
| | | const file = this.currentDetail.file || null; // 如果没有文件,则为 null |
| | | |
| | |
| | | |
| | | }; |
| | | </script> |
| | | |
| | | <style lang="scss"> |
| | | .custom-dialog { max-height: 96vh; /* 80% 视口高度 */} |
| | | </style> |
| | | <style lang="scss" scoped> |
| | | |
| | | ::v-deep(.el-tabs) { |
| | | height: 100%; |
| | | display: flex; |
| | |
| | | |
| | | .tableCss { |
| | | width: 100%; |
| | | margin-bottom: 20px; |
| | | margin-bottom: 10px; |
| | | } |
| | | |
| | | .step-timer { |
| | |
| | | } |
| | | |
| | | .dialog-footer { |
| | | text-align: center; |
| | | padding-top: 16px; |
| | | border-top: 1px solid #ebeef5; |
| | | |
| | | position: sticky; |
| | | bottom: 28px; |
| | | left: 0; |
| | | right: 0; |
| | | background: white; |
| | | z-index: 10; |
| | | padding: 16px 20px; |
| | | border-top: 1px solid #ebeef5; |
| | | display: flex; |
| | | justify-content: space-between; |
| | | align-items: center; |
| | | .el-button + .el-button { |
| | | margin-left: 12px; |
| | | } |
| | | |
| | | .btngroups { |
| | | margin-left: 12px; |
| | | } |
| | | .el-button { |
| | | padding: 9px 20px; |
| | | |
| | | &:last-child { |
| | | margin-left: 12px; |
| | | margin-right: 12px; |
| | | } |
| | | } |
| | | } |
| | |
| | | } |
| | | |
| | | .detail-container { |
| | | padding: 20px; |
| | | padding:0 20px; |
| | | |
| | | .detail-top-title { |
| | | display: flex; |
| | |
| | | } |
| | | |
| | | .media-section { |
| | | margin-bottom: 20px; |
| | | // margin-bottom: 20px; |
| | | |
| | | .el-row { |
| | | display: flex; |
| | |
| | | } |
| | | |
| | | .leftBtn { |
| | | width: 36px; |
| | | height: 36px; |
| | | width: 70px; |
| | | height: 32px; |
| | | background-color: #999; |
| | | border-radius: 50%; |
| | | border-radius: 5px; |
| | | text-align: center; |
| | | line-height: 36px; |
| | | line-height: 32px; |
| | | color: #fff; |
| | | cursor: pointer; |
| | | opacity: 0.8; |
| | | |
| | | } |
| | | |
| | | .disableds { |
| | |
| | | pointer-events: none; |
| | | opacity: 0.3 !important; |
| | | } |
| | | |
| | | .PopUpTableScrolls{ |
| | | height: 600px; |
| | | overflow-y: scroll; |
| | | overflow-x: hidden; |
| | | } |
| | | .media-box { |
| | | width: 100%; |
| | | border: 1px solid #dcdfe6; |
| | |
| | | |
| | | .media-title { |
| | | font-weight: bold; |
| | | margin-bottom: 10px; |
| | | margin-bottom: 5px; |
| | | } |
| | | |
| | | .media-content { |
| | |
| | | .el-image__inner { |
| | | width: 100%; |
| | | height: 100%; |
| | | object-fit: contain; |
| | | object-fit: cover !important; |
| | | } |
| | | } |
| | | } |
| | |
| | | background-color: #f5f7fa; |
| | | padding: 12px; |
| | | border-radius: 4px; |
| | | min-height: 40px; |
| | | min-height: 30px; |
| | | color: #606266; |
| | | line-height: 1.5; |
| | | display: block; |
| | | text-align: left; |
| | | |
| | | margin-bottom: 5px; |
| | | &:first-child { |
| | | font-weight: bold; |
| | | margin-bottom: 4px; |
| | |
| | | |
| | | .custom-steps-container { |
| | | width: 100%; |
| | | margin: 20px 0; |
| | | margin: 10px 0; |
| | | } |
| | | |
| | | .steps-titles { |
| | | display: flex; |
| | | justify-content: space-between; |
| | | margin-bottom: 16px; |
| | | margin-bottom: 14px; |
| | | position: relative; |
| | | } |
| | | |
| | | .step-title { |
| | | text-align: center; |
| | | flex: 1; |
| | | font-size: 16px; |
| | | font-size: 14px; |
| | | color: #999; |
| | | position: relative; |
| | | padding-bottom: 10px; |
| | | padding-bottom: 5px; |
| | | } |
| | | |
| | | .step-title.active { |
| | |
| | | text-align: center; |
| | | font-size: 20px; |
| | | font-weight: bold; |
| | | margin-bottom: 12px; |
| | | margin-bottom: 5px; |
| | | color: #333; |
| | | } |
| | | |