dvcp_v2_webapp/packages/device/AppMediaManage/components/List.vue

<template>
  <section class="AppPetitionManage">
    <ai-list>
      <ai-title slot="title" title="媒资管理" isShowBottomBorder/>
      <template #content>
        <ai-search-bar bottomBorder>
          <template slot="left">
            <ai-select v-model="search.type" placeholder="媒资类型" clearable :selectList="$dict.getDict('dlbResourceType')"
                       @change=";(page.current = 1), getList()"></ai-select>
          </template>
          <template slot="right">
            <el-input v-model="search.name" size="small" placeholder="媒资名称" clearable
                      v-throttle="() => {page.current = 1, getList()}"
                      @clear=";(page.current = 1), (search.name = ''), getList()" suffix-icon="iconfont iconSearch"/>
          </template>
        </ai-search-bar>
        <ai-search-bar class="ai-search-ba mar-t10">
          <template slot="left">
            <el-button icon="iconfont iconAdd" type="primary" size="small" @click="onAdd('')">添加</el-button>
            <el-button icon="iconfont iconDelete" size="small" @click="removeAll" :disabled="ids.length == 0">删除
            </el-button>
          </template>
        </ai-search-bar>
        <ai-table :tableData="tableData" :col-configs="colConfigs" :total="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="content" label="内容" width="200" show-overflow-tooltip>
            <template slot-scope="{ row }">
              <span type="text" v-if="row.type == 3">{{ row.content }}</span>
              <ai-audio v-else-if="row.type == 1 && row.url" :src="row.url" skin="flat"/>
            </template>
          </el-table-column>
          <el-table-column slot="options" label="操作" align="center" width="180" fixed="right">
            <div class="table-options" slot-scope="{ row }">
              <!-- play(row.id) -->
              <el-button type="text" @click="getItemInfo(row.id)">播发</el-button>
              <el-button type="text" @click="remove(row.id)">删除</el-button>
            </div>
          </el-table-column>
        </ai-table>
      </template>
    </ai-list>

    <ai-dialog
      title="广播播发"
      :visible.sync="detailDialog"
      :customFooter="true"
      :destroyOnClose="true"
      width="780px">
      <ai-detail style="background: #FFF;">
        <template #content>
          <div class="audios">
            <ai-audio :src="info.url" skin="flat"/>
          </div>
          <ai-wrapper style="margin-top: 30px;">
            <ai-info-item label="媒资名称" :value="info.name"></ai-info-item>
            <!-- <ai-info-item label="状态">{{ $dict.getLabel('dlbDevStatus', info.devStatus)  }}</ai-info-item> -->
            <ai-info-item label="媒资类型">{{$dict.getLabel('dlbResourceType', info.type)}}</ai-info-item>
            <ai-info-item label="创建时间" :value="info.createTime"></ai-info-item>
            <ai-info-item label="内容" class="contentBox"  v-if="info.type == 3" isLine>
              <div class="content">
                {{ info.content }}
              </div>
            </ai-info-item>
          </ai-wrapper>
        </template>
      </ai-detail>

      <div class="dialog-footer" slot="footer">
        <el-button @click="detailDialog=false" size="medium">关闭</el-button>
        <el-button @click="play(info.id)" type="primary" size="medium">新建广播</el-button>
      </div>
    </ai-dialog>

  </section>
</template>

<script>
import {mapState} from 'vuex'

export default {
  name: 'List',
  props: {
    dict: Object,
    instance: Function,
    params: Object,
  },

  data() {
    return {
      isAdd: false,
      page: {
        current: 1,
        size: 10,
      },
      total: 0,
      search: {
        type: '',
        name: '',
      },
      id: '',
      ids: [],
      colConfigs: [
        {type: 'selection', width: 100, align: 'center'},
        {
          prop: 'name',
          label: '媒资名称',
        },
        {
          prop: 'type',
          label: '媒资类型',
          width: '100',
          align: 'center',
          render: (h, {row}) => {
            return h('span', null, this.dict.getLabel('dlbResourceType', row.type))
          },
        },
        // {
        //   slot: 'content',
        // },
        {prop: 'createTime', label: '创建时间', align: 'center'},
        {
          prop: 'createUserName',
          label: '创建人',
          align: 'center',
        },
        // { prop: 'liveBuildingArea', label: '状态', align: 'center',width: 120 },
        // { prop: 'liveBuildingArea', label: '发布次数', align: 'center',width: 120 },
        {
          slot: 'options',
          label: '操作',
          align: 'center',
        },
      ],
      tableData: [],
      areaId: '',
      detailDialog: false,
      info: {},
    }
  },

  computed: {
    ...mapState(['user']),
    param() {
      return {
        ...this.search,
        areaId: this.user.info?.areaId,
        ids: this.ids,
      }
    },
  },
  created() {
    this.dict.load('dlbResourceType','dlbDevStatus').then(() => {
      this.getList()
    })
  },

  methods: {
    getList() {
      this.instance.post(`/app/appdlbresource/list`, null, {
        params: {
          ...this.page,
          ...this.search,
        },
      })
      .then((res) => {
        if (res.code == 0) {
          this.tableData = res.data.records
          this.total = res.data.total
        }
      })
    },

    getItemInfo (id) {
      this.instance.post(`/app/appdlbresource/queryDetailById?id=${id}`).then(res => {
        if (res?.data) {
          this.info = res.data
          this.detailDialog = true
        }
      })
    },

    play (id) {
      this.detailDialog = false
      this.$emit('change', {
        type: 'Play',
        params: {
          id: id || ''
        },
      })
    },

    // 添加
    onAdd(id) {
      this.$emit('change', {
        type: 'add',
        params: {
          id: id || '',
          areaId: this.areaId,
        },
      })
    },

    // 删除
    remove(id) {
      this.$confirm('确定删除该数据?').then(() => {
        this.instance.post(`/app/appdlbresource/delete?id=${id}`).then((res) => {
          if (res.code == 0) {
            this.$message.success('删除成功！')
            this.getList()
          }
        })
      })
    },

    removeAll() {
      var id = this.ids.join(',')
      this.remove(id)
    },
  },
}
</script>

<style lang="scss" scoped>
.AppPetitionManage {
  height: 100%;

  .mar-t10 {
    margin-top: 10px;
  }
  .audios {
    padding-left: 40px;
  }

  :deep( .ai-info-item__right ){
    width: 100%;
  }

  .content {
    width: 100%;
    height: 200px;
    overflow-y: auto;
  }
}
</style>