任务列表

src/components/businessMoudle/adTask/detail/index.vue

@@ -0,0 +1,325 @@
+<template>
+  <Drawer :drawerShow="drawer_show" @close="closeDrawer" drawerSize="70%" :headerSlotFlag="true">
+    <template v-slot:headerSlot>
+      <div class="flex_between">
+        <h4 class="lMar10 c-000 f22 c-theme_text">{{ '详情' }}</h4>
+        <el-icon class="pointer" @click="closeDrawer">
+          <CloseBold />
+        </el-icon>
+      </div>
+    </template>
+    <template v-slot:content>
+      <div class="container" v-loading="loading">
+        <el-collapse v-model="activeNames" @change="handleCollapseChange">
+          <el-collapse-item title="任务基本信息" name="1">
+            <div class="flexWrap">
+              <div class="base-info">
+                <div class="label">任务名称：</div>
+                <div class="con">{{ task_info?.info?.name }}</div>
+              </div>
+              <div class="base-info">
+                <div class="label">账户：</div>
+                <el-tooltip effect="dark" placement="top">
+                  <template #content><span
+                      v-html="task_info?.info?.account?.map((v) => `${v.account_name}(${v.account_id})<br/>`).join('')"></span></template>
+                  <div class="con">
+                    <span v-for="(item, index) in task_info?.info?.account">{{ item.account_name }}
+                      <em v-if="index != task_info?.info?.account?.length - 1">、</em>
+                    </span>
+                  </div>
+                </el-tooltip>
+              </div>
+              <div class="base-info">
+                <div class="label">提交广告计划数：</div>
+                <div class="con">{{ task_info?.info?.camp_count }}</div>
+              </div>
+              <div class="base-info">
+                <div class="label">提交广告数：</div>
+                <div class="con">{{ task_info?.info?.ad_count }}</div>
+              </div>
+              <div class="base-info">
+                <div class="label">提交规则：</div>
+                <div class="con">{{ task_info?.info?.comtype == '1' ? '立即提交' : task_info?.info?.comtype == '2' ? '定时提交' :
+                  '' }}</div>
+              </div>
+              <div class="base-info">
+                <div class="label">开始执行时间：</div>
+                <div class="con">{{ task_info?.info?.dotime }}</div>
+              </div>
+            </div>
+          </el-collapse-item>
+        </el-collapse>
+        <!-- tab切换 -->
+        <div class="menu bMar15">
+          <div :class="['menu-item', tab == item.value ? 'menu-item-active' : '']" v-for="item in tab_list" @click="handleSelect(item.value)">{{ item.label
+          }}</div>
+        </div>
+        <!-- 提交信息 -->
+        <template v-if="tab == 1">
+          <el-table ref="tableRef" :data="task_info?.list" :header-cell-style="tableHeaderStyle"
+          border empty-text="暂无数据" max-height="70vh">
+          <template v-for="item in tableInfo.descol">
+            <el-table-column :fixed="item.fixed" :prop="item.prop" :min-width="item.width ? item.width : '80px'">
+              <template #header>
+                <div class="flex">
+                  <span>{{ item.label }}</span>
+                </div>
+              </template>
+              <template #default="scope">
+                <!-- 提交状态 -->
+                <div v-if="item.prop == 'status'">
+                  <span
+                    :class="['task-status', 'rMar10', scope.row.status == 2 && (scope.row.fail_num == 0 ? 'success' : 'fail')]">
+                    <span class="icon task-status--finish-icon"></span>
+                    <span class="task-status--finish-font">{{ scope.row.status == 0 ? '待提交' : scope.row.status == 1 ?
+                      '提交中' :
+                      scope.row.status == 2 ? '提交完成' : '' }} </span>
+                  </span>
+                  <span class="opt-link" v-if="scope.row.status == 2"> 成功：{{ scope.row.success_num }} 失败：{{
+                    scope.row.fail_num
+                  }} </span>
+                </div>
+                <!-- 其他 -->
+                <div class="cellDiv" v-else>
+                  <el-tooltip :disabled="!(scope.row[item.prop] && scope.row[item.prop].length > 30)" effect="dark"
+                    :content="scope.row[item.prop] + ''">
+                    <div class="clampTwo line21" style="flex: 1">
+                      {{ scope.row[item.prop] || scope.row[item.prop] == 0 ? scope.row[item.prop] : '-' }}
+                    </div>
+                  </el-tooltip>
+                </div>
+              </template>
+            </el-table-column>
+          </template>
+        </el-table>
+        </template>
+        <!-- 执行记录 -->
+        <template v-if="tab == 2">
+          <el-table ref="tableRef" :data="tableInfo.taskRecordList" :header-cell-style="tableHeaderStyle"
+          border empty-text="暂无数据" max-height="70vh">
+          <template v-for="item in tableInfo.recordDescol">
+            <el-table-column :fixed="item.fixed" :prop="item.prop" :min-width="item.width ? item.width : '80px'">
+              <template #header>
+                <div class="flex">
+                  <span>{{ item.label }}</span>
+                </div>
+              </template>
+              <template #default="scope">
+                <!-- 提交状态 -->
+                <div v-if="item.prop == 'status'">
+                  <span
+                    :class="['task-status', 'rMar10', scope.row.status == 2 && (scope.row.fail_num == 0 ? 'success' : 'fail')]">
+                    <span class="icon task-status--finish-icon"></span>
+                    <span class="task-status--finish-font">{{ scope.row.status == 0 ? '待提交' : scope.row.status == 1 ?
+                      '提交中' :
+                      scope.row.status == 2 ? '提交完成' : '' }} </span>
+                  </span>
+                </div>
+                <!-- 其他 -->
+                <div class="cellDiv" v-else>
+                  <el-tooltip :disabled="!(scope.row[item.prop] && scope.row[item.prop].length > 30)" effect="dark"
+                    :content="scope.row[item.prop] + ''">
+                    <div class="clampTwo line21" style="flex: 1">
+                      {{ scope.row[item.prop] || scope.row[item.prop] == 0 ? scope.row[item.prop] : '-' }}
+                    </div>
+                  </el-tooltip>
+                </div>
+              </template>
+            </el-table-column>
+          </template>
+        </el-table>
+        </template>
+      </div>
+    </template>
+  </Drawer>
+</template>
+<script setup lang="ts">
+import Drawer from '@/components/capsulationMoudle/_drawer.vue'
+import { reactive, ref } from 'vue';
+import { taskDetail, taskRecord } from '../ts/api'
+import { exportDefine } from '../ts/define';
+
+const loading = ref(false)
+const drawer_show = ref(false)
+const task_id = ref()
+const task_info = ref()
+const activeNames = ref(["1"])
+const tab = ref(1)
+const tab_list = [
+  { label: '提交信息', value: 1 },
+  { label: '执行记录', value: 2 },
+]
+const tableInfo:any = reactive({
+  taskRecordList:[],//执行记录
+  descol: [
+    { prop: 'account_name', label: '账户', fixed: '', width: '120' },
+    { prop: 'optimization_goal', label: '转化目标', fixed: '' },
+    { prop: 'deep_conversion_spec_goal', label: '深度转化目标', fixed: '' },
+    { prop: 'bid_amount', label: '转化目标出价', fixed: '' },
+    { prop: 'deep_bid_amount', label: '深度转化目标出价', fixed: '' },
+    { prop: 'ad_count', label: '新建广告数', fixed: '' },
+    { prop: 'status', label: '提交结果', fixed: '' ,width: '140' },
+  ],
+  recordDescol: [
+    { prop: 'created_at', label: '创建时间', fixed: ''},
+    { prop: 'ad_count', label: '提交广告数', fixed: ''},
+    { prop: 'status', label: '状态', fixed: ''},
+  ]
+})
+const {
+  tableHeaderStyle,
+} = exportDefine()
+
+/**获取任务详情 */
+const getTaskDetail = () => {
+  loading.value = true
+  taskDetail({
+    task_id: task_id.value,
+  }).then((res) => {
+    loading.value = false
+    task_info.value = res
+  }).catch(() => { loading.value = false })
+}
+
+/**获取执行记录 */
+const getTaskRecord = () => {
+  loading.value = true
+  taskRecord({task_id: task_id.value}).then((res:any)=>{
+    loading.value = false
+    if(res){
+      tableInfo.taskRecordList = [res]
+    }
+  }).catch(()=>{ loading.value = false})
+}
+
+/**点击切换 */
+const handleSelect = (key: any) => {
+  if(key != tab.value && key == 2) {
+    getTaskRecord()
+  }
+  tab.value = key
+}
+
+/**折叠面板 */
+const handleCollapseChange = (val: string[]) => {
+  console.log(val)
+}
+
+/**关闭Detail */
+const closeDrawer = () => {
+  drawer_show.value = false
+  tab.value = 1;
+}
+
+const switchShow = (val: boolean, id: any) => {
+  drawer_show.value = val
+  task_id.value = id
+  if (val) {
+    getTaskDetail()
+  }
+}
+// 父组件共享值
+defineExpose({
+  switchShow,
+});
+</script>
+<style scoped lang="scss">
+:deep(.el-collapse-item__header) {
+  color: #333;
+  font-weight: bold;
+  font-size: 16px;
+}
+
+:deep(.el-collapse-item__arrow) {
+  color: #333;
+}
+
+:deep(.el-collapse-item__wrap) {
+  border-bottom: 0;
+}
+
+.container {
+  min-height: 80vh;
+  margin-top: -20px;
+}
+
+.base-info {
+  display: flex;
+  align-items: center;
+  width: 50%;
+
+  .label,
+  .con {
+    line-height: 31px;
+    overflow: hidden;
+    font-size: 12px;
+    line-height: 31px;
+    color: #444;
+    text-overflow: ellipsis;
+    white-space: nowrap;
+  }
+
+  .label {
+    width: 100px;
+  }
+}
+
+.menu {
+  display: flex;
+  align-items: center;
+  border-bottom: 1px solid #ebeef5;
+  height: 40px;
+
+  .menu-item {
+    font-size: 16px;
+    color: #333;
+    font-weight: bold;
+    margin-right: 40px;
+    cursor: pointer;
+
+    &.menu-item-active {
+      color: #3173FF;
+      position: relative;
+
+      &::after {
+        content: "";
+        position: absolute;
+        left: 0;
+        bottom: -13px;
+        width: 100%;
+        height: 2px;
+        background-color: #3173FF;
+        z-index: 1;
+      }
+    }
+  }
+}
+.task-status {
+  .icon {
+    display: inline-block;
+    width: 7px;
+    height: 7px;
+    margin-right: 8px;
+    border-radius: 50%;
+  }
+
+  &.success {
+    .icon {
+      background-color: #28ba52;
+    }
+
+    color: #28ba52;
+  }
+
+  &.fail {
+    .icon {
+      background-color: #ec5f2e;
+    }
+
+    color: #ec5f2e;
+  }
+}
+.opt-link {
+  color: #197afb;
+  text-decoration: none;
+}</style>

src/components/businessMoudle/adTask/index.vue

@@ -8,7 +8,7 @@
       :options="pageInfo.statusList" />
     <TimeScreen title="时间" selectWidth="260px" :haveQuick="false" :clearFlag="true" :valueIsKong="true" ref="timeRef"
       @init="() => init()"></TimeScreen>
-    <span class="pointer c-theme lMar10" @click="clearEvent">清空</span>
+    <span class="pointer c-theme lMar10" @click="()=>{clearEvent();init()}">清空</span>
   </div>
   <!-- 表格 -->
   <el-table v-loading="loading" ref="tableRef" :data="tableInfo.tableList" :header-cell-style="tableHeaderStyle"
@@ -47,7 +47,7 @@
             }} </span>
           </div>
           <div v-else-if="item.prop == 'operate'">
-            <span class="opt-link rMar10 pointer"> 详情 </span>
+            <span class="opt-link rMar10 pointer" @click="goDetail(scope.row.id)"> 详情 </span>
             <el-popconfirm title="确定要删除该任务?" @confirm="deleteTask(scope.row.id)">
               <template #reference>
                 <span class="opt-link pointer"> 删除 </span>
@@ -73,6 +73,8 @@
   </div>
   <!-- 修改任务名称 -->
   <EditTaskName ref="EditTaskNameRef" @confirm="EditTaskNameConfig"></EditTaskName>
+  <!-- 任务详情 -->
+  <Detail ref="DetailRef"></Detail>
 </template>
 <script setup lang="ts">
 import Input from '@/components/capsulationMoudle/_input.vue'
@@ -83,8 +85,10 @@ import { onBeforeMount } from 'vue'
 import { getTaskList, adTaskDel, adTaskEdit } from './ts/api'
 import { ElMessage } from 'element-plus'
 import EditTaskName from './dialog/editTaskName.vue'
+import Detail from './detail/index.vue'
 
 const {
+  DetailRef,
   EditTaskNameRef,
   InputRef_text,
   acRef,
@@ -117,7 +121,6 @@ const init = (page?: number) => {
   }
   getTaskList(paramsModel).then((res: any) => {
     loading.value = false
-    console.log(res)
     tableInfo.tableList = res.data;
     tableInfo.total = res.pageInfo.total;
     tableInfo.totalPages = res.pageInfo.totalPages;
@@ -130,6 +133,11 @@ const handleCurrentChange = (val) => {
   init(val)
 }
 
+/**详情 */
+const goDetail = (id) => {
+  DetailRef.value?.switchShow(true,id)
+}
+
 /**删除任务 */
 const deleteTask = (id) => {
   loading.value = true

src/components/businessMoudle/adTask/ts/api.ts

@@ -62,7 +62,23 @@ interface IAdTaskEdit {
 }
 export function adTaskEdit(params: IAdTaskEdit) {
   return new Promise(async (resolve,reject)=>{
-    const res: any = await http.post('api/ad/adTaskEdit', params)
+    const res: any = await http.post('/api/ad/adTaskEdit', params)
+    if (res.errNo == 0) {
+      resolve(res.rst)
+    } else {
+      ElMessage.error(res.errMsg)
+      reject()
+    }
+  })
+}
+
+/**广告任务详情 */
+interface ITaskDetail {
+  task_id: string
+}
+export function taskDetail(params: ITaskDetail) {
+  return new Promise(async (resolve,reject)=>{
+    const res: any = await http.get('/api/ad/taskDetail', params)
     if (res.errNo == 0) {
       resolve(res.rst)
     } else {

src/components/businessMoudle/adTask/ts/define.ts

@@ -9,6 +9,7 @@ const acRef = ref<{value:any}>()
 const statusRef = ref<{value:any}>()
 const timeRef = ref<{dateVal:any}>()
 const EditTaskNameRef = ref<{ switchShow: (val: Boolean, info?: any) => void }>()
+const DetailRef = ref<{ switchShow: (val: Boolean, info?: any) => void }>()
 const loading = ref(false)
 
 const tableInfo = reactive({
@@ -33,9 +34,9 @@ const tableInfo = reactive({
 const pageInfo = reactive({
   acList:[],
   statusList:[
-      {value:1,label:'所有未删除'},
-      {value:2,label:'启用'},
-      {value:3,label:'暂停'},
+      {value:0,label:'待提交'},
+      {value:1,label:'提交中'},
+      {value:2,label:'提交完成'},
   ],
   ad_statusList:[]
 })
@@ -62,16 +63,15 @@ const init_acList = async () => {
 }
 
 const clearEvent = () => {
-  nextTick(()=>{
-    InputRef_text.value!.value = ''
-    acRef.value!.value = []
-    statusRef.value!.value = ''
-    timeRef.value!.dateVal = ''
-  })
+  InputRef_text.value!.value = ''
+  acRef.value!.value = []
+  statusRef.value!.value = ''
+  timeRef.value!.dateVal = ''
 }
 
 export const exportDefine = () => {
   return {
+    DetailRef,
     EditTaskNameRef,
     InputRef_text,
     acRef,