Merge branch 'master' of http://139.186.142.91:10010/r/productDev/dmvisit

liukangdong

2024-05-10 c58ada7f49aac20b06ea2ebda2cb5c006decf122

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

¶Ô±ÈÐÂÎļþ
@@ -0,0 +1,275 @@
<template>
  <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-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-form-item>
      <el-form-item label="粒度分钟" prop="intervalTime">
        <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-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>
      </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-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>
      <el-form-item label="使用须知" prop="tips">
        <el-input v-model="form.tips" type="textarea" placeholder="请输入使用须知" v-trim/>
      </el-form-item>
    </el-form>
  </GlobalAlertWindow>
</template>

<script>
import BaseOpera from '@/components/base/BaseOpera'
import GlobalAlertWindow from '@/components/common/GlobalAlertWindow'
import UploadAvatarImage from '@/components/common/UploadAvatarImage'
import { numRule } from '@/utils/form'
import { fetchList } from '@/api/meeting/projects'
export default {
  name: 'OperaRoomsWindow',
  extends: BaseOpera,
  components: { GlobalAlertWindow, UploadAvatarImage },
  data () {
    let timeRangeRule = (rule, value, callBack) => {
      if (!this.form.startTime) {
        callBack(new Error('请选择开始时间'))
        return
      }
      if (!this.form.endTime) {
        callBack(new Error('请选择结束时间'))
        return
      }
      callBack()
    }
    return {
      isUploading: false,
      uploadData: {
        folder: 'projects'
      },
      timeRange: ['', ''],
      // è¡¨å•æ•°æ®
      form: {
        id: null,
        sysList: [],
        projectList: [],
        createDate: '',
        editor: '',
        editDate: '',
        isdeleted: '',
        name: '',
        remark: '',
        startTime: '',
        endTime: '',
        limitNum: '',
        imgurl: '',
        imgFullUrl: '',
        tips: '',
        status: '',
        intervalTime: ''
      },
      user: [],
      projectList: [],
      // éªŒè¯è§„则
      rules: {
        name: [
          { required: true, message: '请输入会议室名称', tigger: 'blur' }
        ],
        intervalTime: [
          { required: true, validator: numRule, message: '请输入时间粒度', tigger: 'blur' }
        ],
        timeRange: [
          { required: true, validator: timeRangeRule, tigger: 'change' }
        ]
      }
    }
  },
  inject: ['userList'],
  created () {
    this.config({
      api: '/meeting/rooms',
      'field.id': 'id'
    })
    // realname: this.filterText
    fetchList({
      page: 1,
      capacity: 9999,
      model: {},
    })
      .then(res => {
        this.projectList = res.records
      })
  },
  methods: {
    /**
     * æ‰“开窗口
     * @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) {
        this.$nextTick(() => {
          this.$refs.form.resetFields()
          this.form[this.configData['field.id']] = null
        })
        return
      }
      // ç¼–辑
      this.$nextTick(() => {
        for (const key in this.form) {
          this.form[key] = target[key]
        }
        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);
      })
    },
    selectRange(v) {
      // console.log(this.timeRange);
      console.log(v);
      this.form.startTime = v[0]
      this.form.endTime = v[1]
      console.log(this.form.startTime, this.form.endTime);
    },
    // ä¸Šä¼ å›¾ç‰‡
    uploadAvatarSuccess(file) {
      this.form.imgurl = file.imgurl;
      this.form.imgFullUrl = file.imgurlfull;
    },
    // ç¡®è®¤æ–°å»º
    __confirmCreate () {
      this.$refs.form.validate((valid) => {
        // debugger
        if (!valid) {
          return
        }
        // console.log(this.form);
        // debugger
        // è°ƒç”¨æ–°å»ºæŽ¥å£
        this.isWorking = true
        let sysList = [...this.form.sysList]
        sysList = sysList.map(item => {
          return {userId: item}
        })
        let projectList = [...this.form.projectList]
        projectList = projectList.map(item => {
          return {projectId: item}
        })
        this.api.create({
          ...this.form,
          sysList,
          projectList
        })
          .then(() => {
            this.visible = false
            this.$tip.apiSuccess('新建成功')
            this.$emit('success')
          })
          .catch(e => {
            this.$tip.apiFailed(e)
          })
          .finally(() => {
            this.isWorking = false
          })
      })
    },
    // ç¡®è®¤ä¿®æ”¹
    __confirmEdit () {
      this.$refs.form.validate((valid) => {
        if (!valid) {
          return
        }
        console.log(this.form);
        debugger
        // è°ƒç”¨æ–°å»ºæŽ¥å£
        this.isWorking = true
        let sysList = [...this.form.sysList]
        sysList = sysList.map(item => {
          return {userId: item}
        })
        let projectList = [...this.form.projectList]
        projectList = projectList.map(item => {
          return {projectId: item}
        })
        this.api.updateById({
          ...this.form,
          sysList,
          projectList
        })
          .then(() => {
            this.visible = false
            this.$tip.apiSuccess('修改成功')
            this.$emit('success')
          })
          .catch(e => {
            this.$tip.apiFailed(e)
          })
          .finally(() => {
            this.isWorking = false
          })
      })
    }
  },
}
</script>

<style lang="scss" scoped>
@import "@/assets/style/alertstyle.scss";

</style>