ll

liukangdong

2025-02-12 4c9d218bf8742f22276245e7d623ff823d13758d

 admin/src/views/meeting/components/OperaRoomsWindow.vue

@@ -1,68 +1,60 @@
<template>
  <GlobalAlertWindow
    v-loading="isUploading"
    :title="title"
    :visible.sync="visible"
    :confirm-working="isWorking"
    @confirm="confirm"
  >
  <GlobalAlertWindow v-loading="isUploading" :title="title" :visible.sync="visible" :confirm-working="isWorking"
    @confirm="confirm">
    <el-form :model="form" ref="form" :rules="rules" label-width="120px" label-suffix="：">
      <el-form-item label="会议室名称" prop="name">
        <el-input v-model="form.name" placeholder="请输入会议室名称" :maxlength="10" v-trim/>
        <el-input v-model="form.name" placeholder="请输入会议室名称" :maxlength="10" v-trim />
      </el-form-item>
      <el-form-item label="开放时间" prop="timeRange">
        <el-time-picker
          is-range
          value-format="HH:mm"
          format="HH:mm"
          v-model="timeRange"
          range-separator="至"
          start-placeholder="开始时间"
          end-placeholder="结束时间"
          placeholder="选择时间范围"
          @change="selectRange"
        ></el-time-picker>
        <el-time-picker is-range value-format="HH:mm" format="HH:mm" v-model="timeRange" range-separator="至"
          start-placeholder="开始时间" end-placeholder="结束时间" placeholder="选择时间范围" @change="selectRange"></el-time-picker>
      </el-form-item>
      <el-form-item label="粒度分钟" prop="intervalTime">
        <el-input v-model="form.intervalTime" type="number" placeholder="请输入时间粒度（分钟）" v-trim/>
        <el-input v-model="form.intervalTime" type="number" placeholder="请输入时间粒度（分钟）" v-trim />
      </el-form-item>
      <el-form-item label="容纳人数" prop="limitNum">
        <el-input v-model="form.limitNum" type="number" placeholder="请输入容纳人数" v-trim/>
        <el-input v-model="form.limitNum" type="number" placeholder="请输入容纳人数" v-trim />
      </el-form-item>
      <el-form-item label="管理员" prop="sysList">
        <el-select
          v-model="form.sysList"
          filterable
          multiple
          clearable
          placeholder="请选择部门"
        >
        <!-- :label="`${item.department.name}-${item.realname}`" -->
          <el-option
            v-for="item in userList()"
            :key="item.id"
            :value="item.id"

            :label="item.department?`${item.department.name}-${item.realname}`:item.realname"
          />
        <el-select style="width: 100%" v-model="form.sysList" filterable multiple clearable placeholder="请选择部门">
          <!-- :label="`${item.department.name}-${item.realname}`" -->
          <el-option v-for="item in userList()" :key="item.id" :value="item.id"
            :label="item.companyId ? `${item.realname}-${item.companyName}` : item.realname" />
        </el-select>
      </el-form-item>
      <el-form-item label="提供服务项目" prop="projectList">
        <el-checkbox-group v-model="form.projectList">
          <el-checkbox v-for="project in projectList" :label="project.id" :key="project.id">{{project.name}}</el-checkbox>
          <el-checkbox v-for="project in projectList" :label="project.id" :key="project.id">{{ project.name
            }}</el-checkbox>
        </el-checkbox-group>
      </el-form-item>
      <el-form-item label="会议室图片" prop="imgurl">
        <UploadAvatarImage
          :file="{ 'imgurlfull': form.imgFullUrl, 'imgurl': form.imgurl }"
          :uploadData="uploadData"
          @uploadSuccess="uploadAvatarSuccess"
          @uploadEnd="isUploading = false"
          @uploadBegin="isUploading = true"
        />
      <el-form-item label="空闲展示内容" prop="fileType">
        <el-radio v-model="form.fileType" @change="changeFile" :label="2">无</el-radio>
        <el-radio v-model="form.fileType" @change="changeFile" :label="0">图片</el-radio>
        <el-radio v-model="form.fileType" @change="changeFile" :label="1">视频</el-radio>
      </el-form-item>
      <el-form-item v-if="form.fileType == 0" label="展示图片" prop="imgurl">
        <div class="upload_wrap">
          <el-upload class="avatar-uploader" accept=".png,.jpg,.jpeg" :action="uploadImgUrl" :data="uploadData"
            :show-file-list="false" :before-upload="beforeAvatarUpload" :on-error="uploadError"
            :on-success="handleImgSuccess">
            <div>
              <i class="el-icon-plus avatar-uploader-icon"></i>
            </div>
          </el-upload>
          <div v-for="item, i in form.multifileList" class="img_wrap">
            <img :src="item.fileurlFull" class="img">
            <i class="el-icon-error del" @click="imgDel(i)"></i>
          </div>
        </div>
      </el-form-item>
      <el-form-item v-if="form.fileType == 1" label="展示视频" prop="imgurl">
        <UploadAvatarVideo :file="{ 'videourlfull': form.videoFullUrl, 'videourl': form.videourl }"
          :uploadData="uploadData" @uploadSuccess="uploadAvatarSuccess" @uploadEnd="isUploading = false"
          @uploadBegin="isUploading = true" />
      </el-form-item>
      <el-form-item label="使用须知" prop="tips">
        <el-input v-model="form.tips" type="textarea" placeholder="请输入使用须知" v-trim/>
        <el-input v-model="form.tips" type="textarea" placeholder="请输入使用须知" v-trim />
      </el-form-item>
    </el-form>
  </GlobalAlertWindow>
@@ -71,14 +63,15 @@
<script>
import BaseOpera from '@/components/base/BaseOpera'
import GlobalAlertWindow from '@/components/common/GlobalAlertWindow'
import UploadAvatarImage from '@/components/common/UploadAvatarImage'
import UploadAvatarVideo from '@/components/common/UploadAvatarVideo'
import { numRule } from '@/utils/form'
import { fetchList } from '@/api/meeting/projects'
import { Loading } from 'element-ui'
export default {
  name: 'OperaRoomsWindow',
  extends: BaseOpera,
  components: { GlobalAlertWindow, UploadAvatarImage },
  data () {
  components: { GlobalAlertWindow, UploadAvatarVideo },
  data() {
    let timeRangeRule = (rule, value, callBack) => {
      if (!this.form.startTime) {
        callBack(new Error('请选择开始时间'))
@@ -91,20 +84,24 @@
      callBack()
    }
    return {
      uploadImgUrl: process.env.VUE_APP_API_PREFIX + '/visitsAdmin/cloudService/public/upload',
      isUploading: false,
      uploadData: {
        folder: 'projects'
      },
      timeRange: ['', ''],
      loading: null,
      // 表单数据
      form: {
        id: null,
        sysList: [],
        multifileList: [],
        projectList: [],
        createDate: null,
        createDate: '',
        editor: '',
        editDate: null,
        isdeleted: 0,
        fileType: 2,
        name: '',
        remark: '',
        startTime: '',
@@ -133,7 +130,7 @@
    }
  },
  inject: ['userList'],
  created () {
  created() {
    this.config({
      api: '/meeting/rooms',
      'field.id': 'id'
@@ -154,12 +151,9 @@
     * @title 窗口标题
     * @target 编辑的对象
     */
     open (title, target) {
    open(title, target) {
      this.title = title
      this.visible = true
      this.form.imgFullUrl = ''
      // this.timeRange = ['14:34:55', '14:34:55']
      // debugger
      this.timeRange = ['', '']
      // 新建
      if (target == null) {
@@ -174,29 +168,76 @@
        for (const key in this.form) {
          this.form[key] = target[key]
        }
        if (target.fileType == 1 && target.multifileList && target.multifileList.length > 0) {
          this.$set(this.form, 'videoFullUrl', target.multifileList[0].fileurlFull)
          this.$set(this.form, 'videourl', target.multifileList[0].fileurl)
        }
        this.timeRange = [target.startTime, target.endTime]
        this.form.projectList = this.form.projectList ? target.projectList.map(item => item.projectId) : []
        this.form.sysList = this.form.sysList ? this.form.sysList.map(item => item.userId) : []
        // console.log(this.form.imgFullUrl);
        console.log(this.form)
        console.log(this.form.intervalTime)
        console.log(target)
      })
    },
    imgDel(i) {
      this.form.multifileList.splice(i, 1)
    },
    handleImgSuccess(res) {
      this.$nextTick(() => {
        this.loading.close()
      })
      const list = [...this.form.multifileList]

      if (res.code == 200) {
        let { data } = res
        list.push({
          fileurl: data.imgaddr,
          fileurlFull: data.url,
          type: 0
        })
        this.$set(this.form, 'multifileList', list)

      }
    },
    uploadError() {
      // this.$message.error('上传失败')
      this.$nextTick(() => {
        this.loading.close()
      })
    },
    // // 拦截
    beforeAvatarUpload(file) {
      this.loading = Loading.service({
        lock: true,
        text: 'Loading',
        spinner: 'el-icon-loading',
        background: 'rgba(0, 0, 0, 0.7)'
      })
      return true
    },
    selectRange(v) {
      // console.log(this.timeRange);
      console.log(v);
      console.log(v)
      this.form.startTime = v[0]
      this.form.endTime = v[1]
      console.log(this.form.startTime, this.form.endTime);
      console.log(this.form.startTime, this.form.endTime)
    },
    // 上传图片
    changeFile() {
      this.$set(this.form, 'multifileList', [])
    },
    uploadAvatarSuccess(file) {
      this.form.imgurl = file.imgurl;
      this.form.imgFullUrl = file.imgurlfull;
      console.log('file', file)
      let temp = []
      temp.push({
        fileurl: file.imgurl,
        fileurlFull: file.imgurlfull,
        type: 1
      })
      this.form.multifileList = temp
      this.$set(this.form, 'videourl', file.imgurl)
      this.$set(this.form, 'videoFullUrl', file.imgurlfull)
    },
    // 确认新建
    __confirmCreate () {
    __confirmCreate() {
      this.$refs.form.validate((valid) => {
        // debugger
        if (!valid) {
@@ -208,11 +249,11 @@
        this.isWorking = true
        let sysList = [...this.form.sysList]
        sysList = sysList.map(item => {
          return {userId: item}
          return { userId: item }
        })
        let projectList = [...this.form.projectList]
        projectList = projectList.map(item => {
          return {projectId: item}
          return { projectId: item }
        })
        this.api.create({
          ...this.form,
@@ -225,7 +266,7 @@
            this.$emit('success')
          })
          .catch(e => {
            this.$tip.apiFailed(e)
            // this.$tip.apiFailed(e)
          })
          .finally(() => {
            this.isWorking = false
@@ -233,22 +274,22 @@
      })
    },
    // 确认修改
    __confirmEdit () {
    __confirmEdit() {
      this.$refs.form.validate((valid) => {
        if (!valid) {
          return
        }
        console.log(this.form);
        console.log(this.form)
        debugger
        // 调用新建接口
        this.isWorking = true
        let sysList = [...this.form.sysList]
        sysList = sysList.map(item => {
          return {userId: item}
          return { userId: item }
        })
        let projectList = [...this.form.projectList]
        projectList = projectList.map(item => {
          return {projectId: item}
          return { projectId: item }
        })
        this.api.updateById({
          ...this.form,
@@ -261,7 +302,7 @@
            this.$emit('success')
          })
          .catch(e => {
            this.$tip.apiFailed(e)
            // this.$tip.apiFailed(e)
          })
          .finally(() => {
            this.isWorking = false
@@ -273,6 +314,63 @@
</script>

<style lang="scss" scoped>
@import "@/assets/style/alertstyle.scss";
$image-width: 90px;

.upload_wrap {
  display: flex;

  .img_wrap {
    margin-left: 10px;
    border: 1px dashed #d9d9d9;
    width: $image-width;
    height: $image-width;
    border-radius: 6px;
    position: relative;

    .img {
      width: $image-width;
      height: $image-width;
    }

    .del {
      position: absolute;
      top: -6px;
      right: -6px;
      cursor: pointer;
      color: red;
    }
  }
}

.avatar-uploader {
  width: $image-width;
  height: $image-width;
}

::v-deep .el-upload {
  border: 1px dashed #d9d9d9;
  border-radius: 6px;
  cursor: pointer;
  position: relative;
  overflow: hidden;
}

.avatar-uploader .el-upload:hover {
  border-color: #409EFF;
}

.avatar-uploader-icon {
  line-height: 90px;
  font-size: 28px;
  color: #8c939d;
  width: $image-width;
  height: $image-width;
  text-align: center;
}

.avatar {
  width: 90px;
  max-height: 90px;
  display: block;
}
</style>