首页

src/styles/home/agent-charge.scss

@@ -101,3 +101,31 @@
         right: -9px;
     }
 }
+
+.hc-agent-charge-new-table {
+    border-spacing: 0;
+    border-collapse: collapse;
+    border-color: #dddddd;
+    width: 100%;
+    .new-titile{
+        text-align:center;
+        width:120px;
+        padding: 10px;
+        background-color: #F8F8F8;
+        color: #838791;
+    }
+    .new-content{
+        text-align:left;
+        padding: 10px;
+        color: #50545E;
+    }
+    .new-content .new-img {
+        width: 100px;
+        height: 100px;
+        border-radius: 4px;
+        position: absolute;
+        background-color: rgba(0,0,0,0.3);
+        z-index:99;
+        pointer-events: none;
+    }
+}

src/views/home/modules/agent-charge.vue

@@ -42,8 +42,7 @@
                             <span class="title-red">{{ item.title }}</span>
                         </div>
                         <div class="frame-time is-more">{{ item.time }}</div>
-                        <!-- v-if="(activeIndex === 2 && item.operation) || activeIndex === 1" -->
-                        <div class="frame-more">
+                        <div v-if="(activeIndex === 2 && item.operation) || activeIndex === 1" class="frame-more">
                             <el-dropdown class="outline: none;">
                                 <span class="el-dropdown-more">
                                     <el-link :underline="false">
@@ -63,6 +62,67 @@
                 </div>
             </el-scrollbar>
         </div>
+
+        <!-- 工单详情 -->
+        <hc-new-dialog v-model="isAgentChargeShow" widths="720px" title="工单详情" save-text="处理" @save="agentChargeSave">
+            <table border="1" class="hc-agent-charge-new-table">
+                <tbody>
+                    <tr>
+                        <td class="new-titile">合同名称</td>
+                        <td class="new-content">{{ agentChargeData.projectName }}——{{ agentChargeData.contractName }}</td>
+                    </tr>
+                    <tr>
+                        <td class="new-titile">问题描述</td>
+                        <td class="new-content" style="color:#EB4D3D">{{ agentChargeData.opinionContent }}</td>
+                    </tr>
+                    <tr>
+                        <td class="new-titile">反馈人员</td>
+                        <td class="new-content">{{ agentChargeData.submitUserName }}</td>
+                    </tr>
+                    <tr>
+                        <td class="new-titile">电话</td>
+                        <td class="new-content">{{ agentChargeData.submitPhone }}</td>
+                    </tr>
+                    <tr>
+                        <td class="new-titile">岗位</td>
+                        <td class="new-content">{{ agentChargeData.submitUserRole }}</td>
+                    </tr>
+                    <tr>
+                        <td class="new-titile">反馈时间</td>
+                        <td class="new-content">{{ agentChargeData.manageTime }}</td>
+                    </tr>
+                    <tr>
+                        <td class="new-titile">图片补充</td>
+                        <td class="new-content">
+                            <div v-if="agentChargeData.fileUrl && agentChargeData.fileUrl.length" class="flex">
+                                <div v-for="item in agentChargeData.fileUrl" :key="item">
+                                    <div class="new-img">
+                                        <img src="data:image/png;base64,iVBORw0KGgoAAAANSUhEUgAAABAAAAAQCAYAAAAf8/9hAAAAAXNSR0IArs4c6QAAAQhJREFUOE+lkzFOAzEURN8cASkSoUqOETroOAI3oEgBHekiOuiggxtwBDrSwS2AiiBRcIOJHNmrv85KVsRWu9/2+/4zs+Kfj+rztl+Bk6r+Lul4qFcHsD0BPoGFpLu42fYlcA9MJX3FtQgwcCRpPdTJ9hj4ltS79fbD9hvwLOmhHLZ9mN4l/YTaNXAm6bTUCsA12fYyA26qcXp7dwC2R8A8CLkCHstNbDcBadaLCvBUtGkCwrx7jZC8f4n2ZdWTiJ0r2c7zmInaxnFUvRIvubIetDFbOQU+gKtoZ15L9t1mYK/JUJRTJmZVmFbJ+xImoIPsAFr/VoAcSPrbG5BHGkn63Qat1bG1vgHcfowRy9YlxwAAAABJRU5ErkJggg==" style="margin: 40px 0 0 40px;" alt="">
+                                    </div>
+                                    <el-image class="h-[100px] w-[100px] border-4" :src="item" :preview-src-list="agentChargeData.fileUrl" />
+                                </div>
+                            </div>
+                            <span v-else>无</span>
+                        </td>
+                    </tr>
+                </tbody>
+            </table>
+        </hc-new-dialog>
+
+        <!-- 处理工单 -->
+        <hc-new-dialog v-model="isAgentDisposeShow" widths="400px" title="处理工单" @save="agentDisposeSave">
+            <el-form ref="formRef" :model="formModel" :rules="formRules" label-position="top">
+                <el-form-item label="计量期：">
+                    <el-select v-model="formModel.currentLink" placeholder="选择提交进度" block>
+                        <el-option label="进入人工预处理环节" :value="2" />
+                        <el-option label="已解决" :value="3" />
+                    </el-select>
+                </el-form-item>
+                <el-form-item v-show="formModel.currentLink === 2" label="预计处理截止日期：" prop="manageTime">
+                    <el-date-picker v-model="formModel.manageTime" class="block" format="YYYY-MM-DD" type="date" value-format="YYYY-MM-DD" />
+                </el-form-item>
+            </el-form>
+        </hc-new-dialog>
     </div>
 </template>
 
@@ -73,7 +133,8 @@ import frame257 from '~ass/home/Frame257.png'
 import frame256 from '~ass/home/Frame256.png'
 import frame255 from '~ass/home/Frame255.png'
 import frameWarning from '~ass/home/warning.png'
-import { getArrValue, getObjValue } from 'js-fast-way'
+import { formValidate, getArrValue, getObjValue } from 'js-fast-way'
+import { actionConfirm } from '~uti/tools'
 import mainApi from '~api/home/index'
 
 const props = defineProps({
@@ -127,18 +188,92 @@ const getLoadData = (first = true) => {
 }
 
 //立即处理
-const openPreview = async (item) => {
+const isAgentChargeShow = ref(false)
+const agentChargeData = ref({})
+const agentChargeRow = ref({})
+const openPreview = async (row) => {
     const { data } = await mainApi.queryOpinionDetails({
-        userOpinionId : item.userOpinionId,
+        userOpinionId : row.userOpinionId,
     })
-    console.log(data)
-    //this.curRow = row;
-    //this.imgVisible = true;
+    agentChargeRow.value = row
+    agentChargeData.value = getObjValue(data)
+    isAgentChargeShow.value = true
 }
 
-//忽略
-const ignore = (val) => {
+//处理工单
+const isAgentDisposeShow = ref(false)
+const agentChargeSave = () => {
+    formModel.value = { currentLink: 2 }
+    isAgentDisposeShow.value = true
+}
+
+//基础表单
+const formRef = ref(null)
+const formModel = ref({ currentLink: 2 })
+const formRules = {
+    manageTime: {
+        required: true,
+        trigger: 'blur',
+        message: '请选择预计处理截止日期',
+    },
+}
+
+//确认处理工单
+const isCancel = ref(true)
+const agentDisposeSave = async () => {
+    const isForm = await formValidate(formRef.value)
+    if (!isForm) return
+    //业务人员提交环节操作
+    const { manageTime } = formModel.value
+    const { currentLinkId, currentLink, newNumber, userOpinionId } = agentChargeRow.value
+    const { error, code, msg } = await mainApi.manageUserOperationStatus({
+        currentLinkId: currentLinkId,
+        currentLink: currentLink,
+        newNumber: newNumber,
+        userOpinionId: userOpinionId,
+        manageTime: manageTime ?? null,
+    })
+    if (!error && code === 200) {
+        window.$message.success('提交成功')
+        isAgentDisposeShow.value = false
+        isAgentChargeShow.value = false
+        //重新刷新列表
+        getLoadData(false)
+    } else {
+        window.$message.error(msg ?? '操作失败')
+    }
+    //是否前往消息区继续处理
+    if (isCancel.value) {
+        window?.$messageBox?.alert('是否前往消息区继续处理?', '提示', {
+            showCancelButton: true,
+            confirmButtonText: '确认',
+            cancelButtonText: '取消',
+            type: 'warning',
+            callback: (action) => {
+                if (action === 'confirm') {
+                    console.log('前往消息区继续处理')
+                } else {
+                    isCancel.value = false
+                }
+            },
+        })
+    }
+}
 
+//忽略
+const ignore = (index) => {
+    actionConfirm(async () => {
+        const { userOpinionId } = tableData.value[index]
+        const { error, code, msg } = await mainApi.isIgnore({
+            userOpinionId : userOpinionId,
+        })
+        if (!error && code === 200) {
+            //重新刷新列表
+            getLoadData(false)
+        } else {
+            window.$message.error(msg ?? '操作失败')
+        }
+    })
 }
 </script>