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

<template>
  <div class="list_warp">
    <el-row :gutter="15">
      <el-col>
        <el-table
          ref="table"
          v-loading="crud.loading"
          :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"
        :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">
          <el-button :loading="crud.status.cu === 2" type="primary" round @click="crud.submitCU">保存</el-button>
          <el-button round @click="crud.cancelCU">关闭</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 crudDept from '@/api/system/dept'
import CRUD, { presenter, header, form, crud } from '@crud/crud'
import pagination from '@crud/Pagination'
const defaultForm = {
  name: '',
  date: null,
  deviceSelect: '',
  file: ''
}
export default {
  name: 'PublishList',
  components: { pagination },
  cruds() {
    return CRUD({ title: '部门', url: 'api/dept', crudMethod: { ...crudDept }})
  },
  mixins: [presenter(), header(), form(defaultForm), crud()],
  data() {
    return {
      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: []
    }
  },
  methods: {
    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;
  }
}
::v-deep .el-range-separator{
    width: 24px;
}
::v-deep .el-radio-group{
  display: block;
  .el-radio{
    position: relative;
    line-height: 40px;
    .radio_tip{
      position: absolute;
      right: -45px;
      top: 0;
      display: block;
      width: 42px;
      height: 21px;
      line-height: 21px;
      font-size: 12px;
      text-align: center;
      color: #fff;
      background: url(~@/assets/images/an-tj.png) no-repeat;
      background-size: 42px 21px;
    }
  }
}
.select_all_tip{
  width: 336px;
  height: 32px;
  line-height: 32px;
  margin: -20px 0 0 100px;
  padding: 0 14px;
  font-size: 12px;
  color: #999;
  background: #fff;
  box-shadow: 0 0 5px rgba(0,0,0,.14);
}
.select_other{
  width: 600px;
  margin: -20px 0 0 100px;
  padding: 18px 23px;
  background: #f8f8f8;
  border: 1px solid #dcdde3;
  border-radius: 4px;
  .other_tip{
    line-height: 24px;
    span{
      display: inline-block;
      margin-left: 20px;
    }
  }
  .el-button {
    padding: 5px 8px;
    border: none !important;
  }
  .delt_btn {
    color: #fff;
    background-color: #ee5747 !important;
  }
}
.publish_layer,
.add_device_layer{
    .el-tag--small{
        height: 28px;
        line-height: 26px;
        padding: 0 24px;
        margin: 18px 16px 0 0;
        font-size: 14px;
        // color: #3a8aeb;
        ::v-deep .el-icon-close{
            font-size: 16px;
        }
    }
}
.add_device_layer{
    ::v-deep .el-dialog__body{
        padding: 0 20px 30px 20px;
    }
}
.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>