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

<template>
  <!-- 筛选 -->
  <div class="screenBox_mini">
    <Input ref="InputRef_text" title="关键词" placeholderTxt="关键词" @changeEvent="() => init()" @clearEvent="() => init()" />
    <Select ref="acRef" title="账号" selectWidth="160px" @changeEvent="() => init()" @clearEvent="() => init()"
      :optObj="{ k: 'account_id', la: 'account_id', val: 'account_id' }" :options="pageInfo.acList" />
    <Select ref="statusRef" title="状态" selectWidth="160px" @changeEvent="() => init()" @clearEvent="() => init()"
      :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();init()}">清空</span>
  </div>
  <!-- 表格 -->
  <el-table v-loading="loading" ref="tableRef" :data="tableInfo.tableList" :header-cell-style="tableHeaderStyle"
    style="width: 100%;" border empty-text="暂无数据" row-key="campaign_id" max-height="calc(100vh - 294px)">
    <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>
            <el-tooltip v-if="item.note" placement="top" effect="dark">
              <template #content><span v-html="item.note"></span></template>
              <i-ep-QuestionFilled class="c-999 f14 pointer" />
            </el-tooltip>
          </div>
        </template>
        <template #default="scope">
          <!-- 任务 -->
          <div v-if="item.prop == 'name'" class="flex_start">
            <span>{{ scope.row[item.prop] }}</span>
            <el-icon color="#3173FF" class="tMar3 pointer lMarauto f16 icon" @click="editNameEvent(scope.row)"><i-ep-Edit /></el-icon>
          </div>
          <!-- 提交规则 -->
          <div v-else-if="item.prop == 'comtype'">
            {{ scope.row[item.prop] == 1 ? '立即提交' : scope.row[item.prop] == 2 ? '定时提交' : '' }}
            <p v-if="scope.row[item.prop] == 2">{{ scope.row.dotime }}</p>
          </div>
          <!-- 提交状态 -->
          <div v-else-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 v-else-if="item.prop == 'operate'">
            <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>
              </template>
            </el-popconfirm>
          </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>
  <div class="paginationBox flex" style="justify-content: center" v-if="Number(tableInfo.total) > 0">
    <el-pagination v-model:currentPage="tableInfo.currentPage" v-model:page-size="tableInfo.pageSize" background
      :total="tableInfo.total" @current-change="handleCurrentChange" />
  </div>
  <!-- 修改任务名称 -->
  <EditTaskName ref="EditTaskNameRef" @confirm="EditTaskNameConfig"></EditTaskName>
  <!-- 任务详情 -->
  <Detail ref="DetailRef"></Detail>
</template>
<script setup lang="ts">
import Input from '@/components/capsulationMoudle/_input.vue'
import Select from '@/components/capsulationMoudle/_select.vue'
import TimeScreen from '@/components/capsulationMoudle/timeScreen.vue'
import { exportDefine } from './ts/define'
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,
  statusRef,
  timeRef,
  loading,
  tableInfo,
  pageInfo,
  init_acList,
  clearEvent,
  tableHeaderStyle,
} = exportDefine()

onBeforeMount(async () => {
  await init_acList()
  await init()
})

/**init */
const init = (page?: number) => {
  loading.value = true
  const paramsModel = {
    account_id: acRef.value!.value,
    keyword: InputRef_text.value!.value,
    status: statusRef.value!.value,
    start: timeRef.value!.dateVal && timeRef.value!.dateVal[0],
    end: timeRef.value!.dateVal && timeRef.value!.dateVal[1],
    page: page ? page : 1,
    pageSize: tableInfo.pageSize
  }
  getTaskList(paramsModel).then((res: any) => {
    loading.value = false
    tableInfo.tableList = res.data;
    tableInfo.total = res.pageInfo.total;
    tableInfo.totalPages = res.pageInfo.totalPages;
  }).catch(() => { loading.value = false })
}

/**分页 */
const handleCurrentChange = (val) => {
  tableInfo.currentPage = val
  init(val)
}

/**详情 */
const goDetail = (id) => {
  DetailRef.value?.switchShow(true,id)
}

/**删除任务 */
const deleteTask = (id) => {
  loading.value = true
  adTaskDel({ task_id: id }).then(() => {
    ElMessage.success('删除成功！')
    init(tableInfo.currentPage)
  }).catch(() => { loading.value = false })
}

/**修改任务名称 */
const editNameEvent = (info) => {
  EditTaskNameRef.value?.switchShow(true, {
    task_id: info.id,
    name: info.name
  })
}
const EditTaskNameConfig = (info) => {
  loading.value = true
  adTaskEdit({
    task_id: info.task_id,
    name: info.name
  }).then(()=>{
    ElMessage.success('修改成功！')
    init(tableInfo.currentPage)
  }).catch(() => { loading.value = false })
}
</script>
<style scoped lang="scss">
.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>