ohplay_business/src/views/scene/presets/index.vue

<template>
  <div class='app-container'>
    <div class="left">
      <el-button type="primary" plain icon="Plus" @click="getDialog()"
        v-hasPermi="['scene:presets:addScene']">新增场景</el-button>
      <el-input class="search" v-model="data.form.takeName" placeholder="搜索场景名称" clearable>
        <template #append>
          <el-button icon="Search" @click="getSearch" />
        </template>
      </el-input>
      <draggable class="contentList" v-model="data.tableData" item-key="id" chosenClass="chosenClass" data-id="content"
        :group="{ name: 'componentGroup', pull: 'clone', put: false }" :sort="false" filter=".auditStatus" @end="onEnd"
        forceFallback v-loading="loading">
        <template #item="{ element, index }">
          <div :class="['item', element.auditStatus === 0 ? 'auditStatus' : '']" @click="getDialog(element)">
            <el-icon v-if="element.auditStatus === 2" class="close" size="18" @click.stop="getDelete(element)"
              v-hasPermi="['scene:presets:deleteScene']">
              <CircleClose />
            </el-icon>
            <img src="@/assets/icons/svg/file.svg" width="50" height="50" />
            <span style="margin-top: 10px">
              {{ element.takeName }}
            </span>
            <span v-if="element.auditStatus === 0">(待审核)</span>
          </div>
        </template>
      </draggable>
      <pagination v-show="total > 0" layout="prev, pager, next" :background="false" :total="total"
        v-model:page="data.form.pageNum" v-model:limit="data.form.pageSize" @pagination="getList" />
    </div>
    <div class="right">
      <gantt-chart path="/scene/presets/detail" type="scene" />
    </div>

    <!-- 弹窗 -->
    <el-dialog v-model="dialogVisible" :title="title" width="500px" :before-close="getClose">
      <el-form :model="data.dialogForm" ref="dialogForm" :rules="data.rules">
        <el-form-item label="播放音频：" prop="list">
          <CustomUpload v-if="title !== '编辑'" ref="customUpload" :url="`${baseUrl}/radio/tProgram/mp3/upload`" multiple
            showFileList @upload="upload" />
          <div v-else>
            <div v-for="item in data.dialogForm.list" :key="item.id">{{ item.name }}</div>
          </div>
        </el-form-item>
        <el-form-item label="场景名称：" prop="takeName">
          <el-input v-model="data.dialogForm.takeName" placeholder="请输入场景名称" />
        </el-form-item>
      </el-form>
      <template #footer>
        <el-button @click="getClose">取消</el-button>
        <el-button type="primary" @click="getSubmit">确定</el-button>
      </template>
    </el-dialog>
  </div>
</template>

<script setup>
import { list, submit, detail, remove } from '@/api/scene/presets'
import { checkPermi } from '@/utils/permission'
import GanttChart from '@/components/GanttChart/index.vue'

const baseUrl = ref(import.meta.env.VITE_APP_BASE_API)
const { proxy } = getCurrentInstance();

// 遮罩层
const loading = ref(false)

const data = reactive({
  // 表单
  form: {
    pageNum: 1,
    pageSize: 10
  },
  // 列表
  tableData: [],
  // 弹窗表单
  dialogForm: {},
  // 校验
  rules: {
    list: [{
      required: true, message: '请上传音频', trigger: 'change'
    }],
    takeName: [{
      required: true, message: '请输入场景名称', trigger: 'blur'
    }]
  }
})

// 总数据
const total = ref(0)

// 列表
function getList() {
  loading.value = true
  list(data.form).then(res => {
    if (res.code === 0) {
      data.tableData = res.data.records
      total.value = res.data.total
      loading.value = false
    }
  })
}
getList()
// 搜索
function getSearch() {
  data.form.pageNum = 1
  getList()
}

// 拖拽前
const onMove = () => {

}

// 拖拽结束
function onEnd(params) {
  if (checkPermi(['scene:presets:add'])) {
    if (params.from.className !== params.to.className) {
      proxy.$modal.confirm(`是否要添加?`).then(() => {
        getRouter({ audioList: JSON.stringify(params.item.__draggable_context.element), disabled: true })
      }).catch(() => { })
    }
  } else {
    proxy.$modal.msgError('暂无权限')
  }
}

// 弹窗
const dialogVisible = ref(false)
// 弹窗标题
const title = ref('')
// 打开弹窗
function getDialog(row) {
  if (row.auditStatus === 2) {
    if (checkPermi(['scene:presets:editScene'])) {
      dialogVisible.value = true
      title.value = '新增'
      if (row.takeId) {
        getDetail(row.takeId)
      }
    }
  }
}
// 详情
function getDetail(id) {
  title.value = '编辑'
  detail({ id: id }).then(res => {
    if (res.code === 0) {
      data.dialogForm = res.data
    }
  })
}
// 上传音频
function upload(file) {
  data.dialogForm.list = file
}
// 提交
function getSubmit() {
  proxy.$refs.dialogForm.validate((valid) => {
    if (valid) {
      submit(data.dialogForm).then(res => {
        if (res.code === 0) {
          proxy.$modal.msgSuccess('提交成功！')
          getClose()
          getList()
        }
      })
    } else {
      return false
    }
  })
}
// 取消
function getClose() {
  dialogVisible.value = false
  data.dialogForm = {}
  proxy.$refs.dialogForm.resetFields()
  if (title.value === '新增') {
    proxy.$refs.customUpload.onRefresh()
  }
}
// 删除
function getDelete(row) {
  proxy.$modal.confirm(`是否删除${row.takeName}`).then(() => {
    remove(row.takeId).then(res => {
      if (res.code === 0) {
        proxy.$modal.msgSuccess('删除成功！')
        getList()
      }
    })
  }).catch(() => { })
}

// 新增预设
function getRouter(query) {
  proxy.$router.push({
    path: `/scene/presets/detail`,
    query
  })
}
</script>

<style lang="scss" scoped>
.app-container {
  display: flex;
}

.left {
  min-width: 400px;
  position: relative;

  .search {
    margin: 15px 0;
  }

  .contentList {
    display: flex;
    flex-wrap: wrap;

    .item {
      width: 33.333333%;
      display: flex;
      flex-direction: column;
      font-size: 12px;
      align-items: center;
      padding: 20px 0;
      position: relative;

      .close {
        position: absolute;
        right: 35px;
        top: 15px;
        opacity: 0;
      }

      span {
        width: 80%;
        text-align: center;
        overflow: hidden;
        white-space: nowrap;
        text-overflow: ellipsis;
      }
    }

    .item:hover .close {
      opacity: 1;
      transition: all 1s;
    }
  }
}

.right {
  display: flex;
  flex-direction: column;
  min-width: 700px;
  width: calc(100% - 400px);
  height: 792px;
}

draggable,
.label {
  user-select: none;
}

.chosenClass {
  display: none;
  background: none !important;
}
</style>