dvcp_v2_webapp/packages/device/AppEquipmentManage/components/taskList.vue

<template>
  <section class="taskList">
    <ai-list>
      <ai-title slot="title" title="任务列表" isShowBack isShowBottomBorder @onBackClick="cancel"/>
      <template #content>
        <ai-search-bar bottomBorder>
          <template slot="right">
            <el-input v-model="search.sourceName" size="small" placeholder="媒资名称/创建人" clearable
                      v-throttle="() => {page.current = 1, getList()}"
                      @clear=";(page.current = 1), (search.sourceName = ''), getList()" suffix-icon="iconfont iconSearch"/>
          </template>
        </ai-search-bar>
        <ai-table :tableData="tableData" :col-configs="colConfigs" :total="page.total" ref="aitableex"
                  :current.sync="page.current" :size.sync="page.size" @getList="getList"
                  @selection-change="(v) => (ids = v.map((e) => e.id))">
          <el-table-column slot="options" label="操作" align="center" width="280" fixed="right">
            <template slot-scope="{ row }" v-if="row.taskType == 1 && (row.broadcastStatus == 0 || row.broadcastStatus == 1 || row.broadcastStatus == 2 )">
              <el-button type="text" @click="reset(row.id)">撤回任务</el-button>
            </template>
          </el-table-column>
        </ai-table>
      </template>
    </ai-list>
  </section>
</template>

<script>
import {mapMutations} from "vuex";

export default {
  name: 'taskList',
  props: {
    dict: Object,
    instance: Function,
  },
  data() {
    return {
      page: {
        current: 1,
        size: 10,
        total: 0,
      },
      search: {
        sourceName: '',
      },
      tableData: [],
      colConfigs: [
        {
          prop: 'sourceName',
          label: '任务名称',
        },
        {
          prop: 'type',
          label: '媒资类型',
          width: '200',
          align: 'center',
          render: (h, {row}) => {
            return h('span', null, this.dict.getLabel('dlbResourceType', row.type))
          }
        },
        {
          prop: 'messageLevel',
          label: '级别',
          align: 'center',
          render: (h, {row}) => {
            return h('span', null, this.dict.getLabel('dlbMessageUrgency', row.messageLevel))
          }
        },
        {
          prop: 'taskType',
          label: '播发方式',
          width: '220',
          align: 'center',
          render: (h, {row}) => {
            return h('span', null, (row.taskType == 1 ? '定时播放' : '立即播放'))
          },
        },
        {
          prop: 'startTime',
          label: '开始时间',
          width: '120',
          align: 'center',
        },
        {
          prop: 'broadcastStatus',
          label: '状态',
          align: 'center',
          render: (h, {row}) => {
            return h('span', null, (row.broadcastStatus == 0 ? '已下发' : row.broadcastStatus == 3 ? '播发成功' : row.broadcastStatus == 6 ? '已取消' : ''))
          }
        },
        {
          prop: 'createUserName',
          label: '创建人',
          align: 'center',
        },
        {
          slot: 'options',
          label: '操作',
          align: 'center',
        },
      ],
    }
  },
  created() {
    this.setPageTitle("设备任务列表")
    this.dict.load('dlbDyclingType', 'dlbMessageUrgency', 'dlbBroadcastStatus', 'dlbResourceType')
    this.getList()
  },
  methods: {
    ...mapMutations(['setPageTitle']),
    getList() {
      const {id: deviceId} = this.$route.query
      this.instance.post(`/app/appzyvideobroadcast/list`, null, {
        params: {...this.page, ...this.search, deviceId}
      }).then(res => {
        if (res?.data) {
          this.tableData = res.data.records
          this.page.total = res.data.total
        }
      })
    },
    reset(id) {
      this.$confirm('确定要撤回该任务吗?').then(() => {
        this.instance.post(`/app/appzyvideobroadcast/getBroadcastRecall?broadcastId=${id}`).then((res) => {
          if (res.code == 0) {
            this.$message.success('撤回成功！')
            this.getList()
          }
        })
      })
    },
    cancel() {
      this.$router.push({})
    },
  },
}
</script>

<style lang="scss" scoped>
.taskList {
  height: 100%;
}
</style>