canvasScreen_admin/src/views/publishContent/publishList/index.vue

<template>
  <div class="list_warp">
    <el-row :gutter="15">
      <el-col>
        <!--     v-loading="crud.loading" -->
        <el-table
          ref="table"
          :data="tableData"
          :header-cell-style="{ background: '#3a8aeb', color: '#fff' }"
          class="publish_table"
          @selection-change="handleSelectionChange"
        >
          <el-table-column type="selection" width="55" />
          <el-table-column label="文件名称" align="center" prop="name" />
          <el-table-column label="发布内容" align="center" prop="content">
            <template slot-scope="scope">
              <div>
                <img width="100px" size="medium" :src="scope.row.cover" />
              </div>
            </template>
          </el-table-column>
          <el-table-column label="发布时间" align="center" prop="date" />
          <el-table-column label="发布类型" align="center" prop="type">
            <template slot-scope="scope">
              <div>{{ scope.row.type ? "定时发布" : "即时发布" }}</div>
            </template>
          </el-table-column>
          <el-table-column label="发布人" align="center" prop="user" />
          <el-table-column label="状态" align="center" prop="enabled">
            <template slot-scope="scope">
              <div :class="{ stop_txt: scope.row.enabled }">
                {{ scope.row.enabled ? "发布中" : "停止" }}
              </div>
            </template>
          </el-table-column>
          <el-table-column
            prop="device"
            align="center"
            label="发布设备"
            width="300px"
          >
            <template slot-scope="scope">
              <div>
                {{ scope.row.device ? "" : "全部设备" }}
                <div class="tag_list">
                  <el-tag
                    v-for="tag in scope.row.deviceData"
                    :key="tag"
                    type="primary"
                  >{{ tag }}</el-tag>
                </div>
              </div>
            </template>
          </el-table-column>
          <el-table-column
            label="操作"
            width="220px"
            align="center"
            fixed="right"
          >
            <template slot-scope="scope">
              <el-button
                type="primary"
                :class="['top_btn', { top_btn_active: scope.row.isTop }]"
                @click="isTophandle(scope.$index, scope.row)"
              >{{ scope.row.isTop ? "取消" : "置顶" }}</el-button>
              <el-button
                type="primary"
                class="edit_btn"
                @click="editForm(scope.$index, scope.row)"
              >编辑</el-button>
              <el-button
                type="primary"
                :class="['start_btn', { stop_btn: scope.row.enabled }]"
                @click="isStopHandle(scope.$index, scope.row)"
              >{{ scope.row.enabled ? "停止" : "恢复" }}</el-button>
              <el-button type="info" class="delt_btn">删除</el-button>
            </template>
          </el-table-column>
        </el-table>
        <!--分页组件-->
        <pagination />
      </el-col>
    </el-row>
    <!-- 编辑 -->
    <div class="publish_layer">
      <el-dialog
        title="编辑"
        :close-on-click-modal="false"
        :show-close="false"
        :visible.sync="publishVisible"
        width="872px"
        height="384px"
      >
        <el-form ref="form" :model="form" size="small" label-width="100px">
          <el-form-item
            label="发布名称"
            prop="name"
            :rules="[
              { required: true, message: '请输入发布名称', trigger: '' },
            ]"
          >
            <el-input v-model="form.name" style="width: 674px" />
          </el-form-item>
          <el-form-item
            label="发布时间"
            prop="date"
            :rules="[
              { required: true, message: '请选择发布时间', trigger: 'change' },
            ]"
          >
            <el-date-picker
              v-if="isTypeDate === 0"
              v-model="form.date"
              type="date"
              placeholder="选择日期"
            />
            <el-date-picker
              v-else
              v-model="form.date"
              type="daterange"
              range-separator="至"
              start-placeholder="开始日期"
              end-placeholder="结束日期"
            />
          </el-form-item>
          <el-form-item label="上传内容" prop="file">
            <el-upload action="#" list-type="picture-card" :auto-upload="false">
              <!-- <i slot="default" class="el-icon-plus"></i> -->
              <img src="@/assets/images/t-sc.png" alt />
              <div slot="file" slot-scope="{ file }">
                <img
                  class="el-upload-list__item-thumbnail"
                  :src="file.url"
                  alt
                />
                <!-- <span class="el-upload-list__item-actions">
                  <span
                    class="el-upload-list__item-preview"
                    @click="handlePictureCardPreview(file)"
                  >
                    <i class="el-icon-zoom-in"></i>
                  </span>
                  <span
                    v-if="!disabled"
                    class="el-upload-list__item-delete"
                    @click="handleDownload(file)"
                  >
                    <i class="el-icon-download"></i>
                  </span>
                  <span
                    v-if="!disabled"
                    class="el-upload-list__item-delete"
                    @click="handleRemove(file)"
                  >
                    <i class="el-icon-delete"></i>
                  </span>
                </span>-->
              </div>
            </el-upload>
            <!-- <el-dialog :visible.sync="dialogVisible">
              <img width="100%" :src="dialogImageUrl" alt />
            </el-dialog>-->
          </el-form-item>
          <el-form-item
            label="选择设备"
            prop="deviceSelect"
            :rules="[
              { required: true, message: '请选择设备', trigger: 'change' },
            ]"
          >
            <el-radio-group v-model="form.deviceSelect">
              <el-radio label="all" value="all">所有设备</el-radio>
              <el-radio
                label="other"
                value="other"
              >部分设备<i
                v-if="form.deviceSelect === 'other'"
                class="radio_tip"
                @click="addDeviceTag()"
              >添加</i></el-radio>
            </el-radio-group>
          </el-form-item>
          <div v-if="form.deviceSelect === 'all'" class="select_all_tip">
            所有设备都将被发送
          </div>
          <div
            v-if="deviceTags.length > 0 && form.deviceSelect === 'other'"
            class="select_other"
          >
            <el-row>
              <el-col
                :span="10"
                class="other_tip"
              >以下设备都将被发送<span>总计{{ deviceTags.length }}个设备</span></el-col>
              <el-col :span="4">
                <el-button
                  round
                  class="delt_btn"
                  @click="clearDevice()"
                >清空</el-button>
              </el-col>
            </el-row>
            <el-tag
              v-for="tag in deviceTags"
              :key="tag"
              closable
              :disable-transitions="true"
              :hit="false"
              color="#cbe3ff"
              @close="handleClose(tag)"
            >
              {{ tag }}
            </el-tag>
          </div>
        </el-form>
        <div slot="footer" class="dialog-footer">
          <!--    :loading="crud.status.cu === 2" 
          @click="crud.submitCU"-->
          <el-button       
            type="primary"
            round         
          >保存</el-button>
          <el-button round @click="publishVisible=false">关闭</el-button>
        </div>
      </el-dialog>
    </div>
    <!-- 添加发布的设备 -->
    <div class="add_device_layer">
      <el-dialog
        title="请选择设备"
        :close-on-click-modal="false"
        :visible.sync="selectDeviceVisible"
        width="400px"
      >
        <el-tag
          v-for="tag in deviceAllTags"
          :key="tag"
          :disable-transitions="true"
          :hit="false"
          color="#cbe3ff"
          class="all_tags"
          @click="tagHandle(tag)"
        >
          {{ tag }}
        </el-tag>
      </el-dialog>
    </div>
  </div>
</template>

<script>
import pagination from '@crud/Pagination'
import {reqPublishList} from '@/api/publish/publishList'
export default {
  name: 'PublishList',
   components: { pagination },
  data() {
    return {
      queryInfo:{
        release_name:'',
        orga_id:'',
        page:1,
        size:3,
      },
      selectedList: [],
      publishVisible: false,
      messageVisible: false,
      selectDeviceVisible: false,
      isTypeDate: 0,
      tableData: [
        {
          id: 1,
          name: '及时发布 2022-1-1',
          cover: require('@/assets/images/background.jpg'),
          type: 0,
          user: '某某某',
          device: 0,
          deviceData: [],
          enabled: true,
          isTop: true,
          date: '2021-2-2'
        },
        {
          id: 2,
          name: '定时发布 2022-1-1',
          cover: require('@/assets/images/background.jpg'),
          type: 1,
          user: '某某某2',
          device: 1,
          deviceData: ['GCXR1', 'GCXR2', 'GCXR3', 'GCXR4', 'GCXR5'],
          enabled: false,
          isTop: false,
          date: '2021-2-2 至 2022-4-6'
        }
      ],
      deviceAllTags: ['GCXR1', 'GCXR2', 'GCXR3', 'GCXR4', 'GCXR5'],
      deviceTags: []
    }
  },
  mounted(){
   this.getPublishList()
  },
  methods: {
    // 获取发布列表的数据
    getPublishList(){
      const params=this.queryInfo
      reqPublishList(params).then(res=>{
      if(res.code==200) {
        this.publishList=res.data.content
      }
      })
    },
    isTophandle(index, row) {
      row.isTop = !row.isTop
    },
    isStopHandle(index, row) {
      row.enabled = !row.enabled
    },
    editForm(index, row) {
      this.publishVisible = true
      this.form.name = row.name
      this.isTypeDate = row.type
      if (this.isTypeDate === 0) {
        this.form.date = row.date
      } else {
        const dateSplice = row.date.split('至')
        this.form.date = dateSplice
      }
      if (row.device === 0) {
        this.form.deviceSelect = 'all'
      } else {
        this.form.deviceSelect = 'other'
      }
      this.deviceTags = row.deviceData
    },
    handleSelectionChange(val) {
      this.selectedList = val
      if (val.length > 0) {
        this.clearBtnDisabled = false
      } else {
        this.clearBtnDisabled = true
      }
      console.log(val)
    },
    addDeviceTag() {
      this.selectDeviceVisible = true
    },
    tagHandle(tag) {
      console.log(tag)
      this.deviceTags.push(tag)
    },
    handleClose(tag) {
      this.deviceTags.splice(this.deviceTags.indexOf(tag), 1)
      console.log(this.deviceTags)
    },
    clearDevice() {
      this.deviceTags = []
    }
  }
}
</script>

<style lang="scss" scoped>
.list_warp {
  padding: 0 24px;
  .stop_txt {
    color: #3a8aeb;
  }
}

.publish_table {
  .tag_list {
    text-align: left;
    .el-tag {
      height: 26px;
      line-height: 26px;
      margin: 5px 10px 5px 0;
      background: #cbe3ff;
      color: #3a8aeb;
      border: none;
    }
  }
}
</style>