任务详情

packages/device/AppBroadcast/components/Detail.vue

@@ -0,0 +1,96 @@
+<template>
+  <ai-detail isHasSidebar>
+    <template slot="title">
+      <ai-title title="任务详情" isShowBack isShowBottomBorder @onBackClick="cancel(true)">
+      </ai-title>
+    </template>
+    <template slot="content">
+      <AiSidebar :tabTitle="tabList" v-model="currIndex"></AiSidebar>
+      <div v-show="currIndex == 0">
+        <ai-card title="播发任务" v-show="currIndex === 0">
+          <template #content>
+            <!-- <ai-wrapper
+              label-width="120px">
+              <ai-info-item label="姓名" :value="info.name"></ai-info-item>
+              <ai-info-item label="上报时间" :value="info.createTime"></ai-info-item>
+              <ai-info-item label="身份证号" :value="info.idNumber"></ai-info-item>
+              <ai-info-item label="所属地区" :value="info.areaName"></ai-info-item>
+              <ai-info-item label="详细地址" isLine :value="info.address"></ai-info-item>
+            </ai-wrapper> -->
+          </template>
+        </ai-card>
+      </div>
+      <ai-card title="播发设备" v-show="currIndex == 1">
+        <template #content>
+          <ai-table
+            class="detail-table__table"
+            :tableData="tableData"
+            :col-configs="colConfigs"
+            :total="total"
+            :current.sync="search.current"
+            :size.sync="search.size"
+            @getList="getList">
+            <el-table-column slot="options" width="140px" fixed="right" label="操作" align="center">
+              <template slot-scope="{ row }">
+                <div class="table-options">
+                  <el-button type="text" @click="toDetail(row.id)">详情</el-button>
+                </div>
+              </template>
+            </el-table-column>
+          </ai-table>
+        </template>
+      </ai-card>
+      <ai-card title="播发素材" v-show="currIndex == 2">
+        <template #content>
+          <ai-table
+            class="detail-table__table"
+            :tableData="tableData"
+            :col-configs="colConfigs"
+            :total="total"
+            :current.sync="search.current"
+            :size.sync="search.size"
+            @getList="getList">
+            <el-table-column slot="options" width="140px" fixed="right" label="操作" align="center">
+              <template slot-scope="{ row }">
+                <div class="table-options">
+                  <el-button type="text" @click="toDetail(row.id)">详情</el-button>
+                </div>
+              </template>
+            </el-table-column>
+          </ai-table>
+        </template>
+      </ai-card>
+    </template>
+  </ai-detail>
+</template>
+
+<script>
+export default {
+  name: 'Detail',
+  components: {},
+  props: {
+    dict: Object,
+    params: Object,
+    instance: Function,
+  },
+  data() {
+    return {
+      tabList: ['播发任务','播发设备','播发素材']
+    }
+  },
+  methods: {
+    cancel(isRefresh) {
+      this.$emit('change', {
+        type: 'list',
+        isRefresh: !!isRefresh,
+      })
+    },
+  }
+}
+</script>
+
+<style lang="scss" scoped>
+.Detail {
+  height: 100%;
+}
+</style>

packages/device/AppBroadcast/components/List.vue

@@ -31,6 +31,7 @@
           <el-table-column slot="options" label="操作" align="center" width="180" fixed="right">
             <template slot-scope="{ row }">
               <el-button type="text" @click="onAdd(row.broadcastId)">复制</el-button>
+              <el-button type="text" @click="toDetail(row.broadcastId)">详情</el-button>
               <el-button type="text" @click="cancel(row.broadcastId)"
                          v-if="row.broadcastStatus == 0 || row.broadcastStatus == 1 || row.broadcastStatus == 2">撤回
               </el-button>
@@ -126,6 +127,14 @@ export default {
         }
       })
     },
+    toDetail(id) {
+      this.$emit('change', {
+        type: 'detail',
+        params: {
+          id: id || ''
+        }
+      })
+    },
     cancel(id) {
       this.$confirm('确定撤回该广播?').then(() => {
         this.instance.post(`/app/appzyvideobroadcast/getBroadcastRecall?broadcastId=${id}`).then((res) => {