151 lines
		
	
	
		
			4.2 KiB
		
	
	
	
		
			Vue
		
	
	
	
	
	
			
		
		
	
	
			151 lines
		
	
	
		
			4.2 KiB
		
	
	
	
		
			Vue
		
	
	
	
	
	
| <template>
 | |
|   <section class="taskList">
 | |
|     <ai-list>
 | |
|       <ai-title slot="title" title="任务列表" isShowBack isShowBottomBorder @onBackClick="cancel(true)"/>
 | |
|       <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>
 | |
| export default {
 | |
|   name: 'taskList',
 | |
|   components: {},
 | |
|   props: {
 | |
|     dict: Object,
 | |
|     instance: Function,
 | |
|     params: Object,
 | |
|   },
 | |
|   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.cyclingType))
 | |
|           }
 | |
|         },
 | |
|         {
 | |
|           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.$dict.load('dlbDyclingType','dlbMessageUrgency','dlbBroadcastStatus','dlbResourceType').then(()=>{
 | |
|       this.getList()
 | |
|     })
 | |
|   },
 | |
| 
 | |
|   methods: {
 | |
|     getList() {
 | |
|       this.instance.post(`/app/appzyvideobroadcast/list?deviceId`,null,{
 | |
|         params: {
 | |
|           ...this.page,
 | |
|           ...this.search,
 | |
|           deviceId: this.params.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(isRefresh) {
 | |
|       this.$emit('change', {
 | |
|         type: 'list',
 | |
|         isRefresh: !!isRefresh,
 | |
|       })
 | |
|     },
 | |
|   },
 | |
| }
 | |
| </script>
 | |
| 
 | |
| <style lang="scss" scoped>
 | |
| .taskList {
 | |
|   height: 100%;
 | |
| }
 | |
| </style> |