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

<template>
  <div class='app-container'>
    <div class="left">
      <el-button type="primary" icon="Plus" @click="getDialog()">新增场景</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"
        dragClass="dragClass" data-id="content" :group="{ name: 'componentGroup', pull: 'clone', put: false }"
        :sort="false" :move="onMove" @end="onEnd" forceFallback v-loading="loading">
        <template #item="{ element, index }">
          <div class="item" @click="getDialog(element.takeId)">
            <el-icon class="close" size="18" @click.stop="getDelete(element)">
              <CircleClose />
            </el-icon>
            <img src="@/assets/icons/svg/file.svg" width="50" height="50" />
            <span style="margin-top: 10px">{{ element.takeName }}</span>
          </div>
        </template>
      </draggable>
      <pagination v-show="total > 10" 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">
      <el-form class="search" inline>
        <el-form-item>
          <el-select filterable placeholder="请选择门店" style="width: 200px" @change="getSearch">
            <el-option v-for="item in businessOptions" :key="item.value" :value="item.value" :label="item.label" />
          </el-select>
        </el-form-item>
        <el-form-item style="float:right">
          <el-button type="primary" icon="Plus" @click="getRouter()">新增预设</el-button>
        </el-form-item>
      </el-form>
      <div class="chart">
        <GanttChart />
      </div>
    </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/content/scene'
import GanttChart from '@/components/GanttChart/index.vue'
import { useBusinessList } from '@/hooks/index'

const { businessForm, businessOptions } = useBusinessList(true)

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'
    }]
  },
  businessForm: {
    pageNum: 1,
    pageSize: 10
  },
  options: []
})

// 总数据
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()
}

// 拖拽中
function onMove(params) {
  if (params.to.childElementCount < 1) {
    return true
  } else {
    return false
  }
}
// 拖拽结束
function onEnd(params) {
  if (params.from.className === 'contentList' &&
    params.to.className === 'label_box' ||
    params.from.className === 'label_box' &&
    params.from.__draggable_component__.itemKey !== params.to.__draggable_component__.itemKey) {
    let query = {
      value: params.item._underlying_vm_.value,
      label: params.item._underlying_vm_.label
    }
    getRouter(query)
  }
}

// 弹窗
const dialogVisible = ref(false)
// 弹窗标题
const title = ref('')
// 打开弹窗
function getDialog(id) {
  dialogVisible.value = true
  title.value = '新增'
  if (id) {
    getDetail(id)
  }
}
// 详情
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: `/content/scene/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;
      }
    }
  }
}

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

  .search {
    padding-left: 70px;
  }

  .chart {
    overflow-y: auto;
    padding: 20px;
    display: flex;
  }
}

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

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