|
|
@@ -1,96 +1,205 @@
|
|
|
<template>
|
|
|
- <div class="facilities-dialog-container">
|
|
|
- <el-dialog :title="state.dialog.title" @close="onCancel" :close-on-click-modal="false" v-model="state.dialog.isShowDialog" width="90%">
|
|
|
- <header class="mb8">
|
|
|
- <span>资源分配</span>
|
|
|
- <el-form inline size="mini" label-width="0">
|
|
|
- <el-form-item label="资源组" label-width="60px">
|
|
|
- <el-select v-model="groupId" placeholder="全部资源组" clearable style="width: 120px" @change="filterOutListByGroupId">
|
|
|
- <el-option v-for="item in molecularGroupList" :key="item.id" :label="item.groupName" :value="item.id"></el-option>
|
|
|
- </el-select>
|
|
|
- </el-form-item>
|
|
|
- <el-form-item class="ml20">
|
|
|
- <el-radio-group v-model="resClass" size="small" @change="filterOutList">
|
|
|
- <el-radio label="">全部</el-radio>
|
|
|
- <el-radio v-for="item in cellType" :key="item.dictValue" :label="item.dictValue">{{ item.dictLabel }}</el-radio>
|
|
|
- </el-radio-group>
|
|
|
- </el-form-item>
|
|
|
- <!-- <el-form-item class="ml12">
|
|
|
+ <div class="facilities-dialog-container">
|
|
|
+ <el-dialog
|
|
|
+ :title="state.dialog.title"
|
|
|
+ @close="onCancel"
|
|
|
+ :close-on-click-modal="false"
|
|
|
+ v-model="state.dialog.isShowDialog"
|
|
|
+ width="90%"
|
|
|
+ >
|
|
|
+ <header class="mb8">
|
|
|
+ <span>资源分配</span>
|
|
|
+ <el-form
|
|
|
+ inline
|
|
|
+ size="mini"
|
|
|
+ label-width="0"
|
|
|
+ >
|
|
|
+ <el-form-item
|
|
|
+ label="资源组"
|
|
|
+ label-width="60px"
|
|
|
+ >
|
|
|
+ <el-select
|
|
|
+ v-model="groupId"
|
|
|
+ placeholder="全部资源组"
|
|
|
+ clearable
|
|
|
+ style="width: 120px"
|
|
|
+ @change="filterOutListByGroupId"
|
|
|
+ >
|
|
|
+ <el-option
|
|
|
+ v-for="item in molecularGroupList"
|
|
|
+ :key="item.id"
|
|
|
+ :label="item.groupName"
|
|
|
+ :value="item.id"
|
|
|
+ ></el-option>
|
|
|
+ </el-select>
|
|
|
+ </el-form-item>
|
|
|
+ <el-form-item class="ml20">
|
|
|
+ <el-radio-group
|
|
|
+ v-model="resClass"
|
|
|
+ size="small"
|
|
|
+ @change="filterOutList"
|
|
|
+ >
|
|
|
+ <el-radio label="">全部</el-radio>
|
|
|
+ <el-radio
|
|
|
+ v-for="item in cellType"
|
|
|
+ :key="item.dictValue"
|
|
|
+ :label="item.dictValue"
|
|
|
+ >
|
|
|
+ {{ item.dictLabel }}
|
|
|
+ </el-radio>
|
|
|
+ </el-radio-group>
|
|
|
+ </el-form-item>
|
|
|
+ <!-- <el-form-item class="ml12">
|
|
|
<el-button color="#2c78ff" @click="onSubmit('20')" size="default">分配</el-button>
|
|
|
</el-form-item> -->
|
|
|
- </el-form>
|
|
|
- </header>
|
|
|
- <div class="table-container">
|
|
|
- <div class="confirm-table">
|
|
|
- <el-alert :title="`待分配队列（已确认${comfirmTotal}人）`" type="warning" :closable="false" class="mb8" />
|
|
|
- <el-empty v-if="state.confirmList.length == 0" description="暂无队列数据"></el-empty>
|
|
|
- <ul v-else>
|
|
|
- <li v-for="(item, index) in state.confirmList" :key="index" :class="{ active: index === state.active }" @click="state.active = index">
|
|
|
- <!-- <el-checkbox v-model="item.checked" class="mr8"></el-checkbox> -->
|
|
|
- <div class="text">
|
|
|
- <p>
|
|
|
- 分配房间： <span class="assignRoom">{{ item.resName }}</span>
|
|
|
- </p>
|
|
|
- <p class="mb4 mt4">
|
|
|
- {{ item.memberName }}
|
|
|
- 【{{ formatDate(new Date(item.appointStartDate), 'YYYY-mm-dd') }}~{{ formatDate(new Date(item.appointEndDate), 'mm-dd') }}】
|
|
|
- </p>
|
|
|
- <p>【{{ getDictLabel(cellType, item.cellSourceType) }}】{{ formatDate(new Date(item.queueTime), 'YYYY-mm-dd HH:MM:SS') }}</p>
|
|
|
- </div>
|
|
|
- <!-- <el-icon v-if="item.checked">
|
|
|
+ </el-form>
|
|
|
+ </header>
|
|
|
+ <div class="table-container">
|
|
|
+ <div class="confirm-table">
|
|
|
+ <el-alert
|
|
|
+ :title="`待分配队列（已确认${comfirmTotal}人）`"
|
|
|
+ type="warning"
|
|
|
+ :closable="false"
|
|
|
+ class="mb8"
|
|
|
+ />
|
|
|
+ <el-empty
|
|
|
+ v-if="state.confirmList.length == 0"
|
|
|
+ description="暂无队列数据"
|
|
|
+ ></el-empty>
|
|
|
+ <ul v-else>
|
|
|
+ <li
|
|
|
+ v-for="(item, index) in state.confirmList"
|
|
|
+ :key="index"
|
|
|
+ :class="{ active: index === state.active }"
|
|
|
+ @click="state.active = index"
|
|
|
+ >
|
|
|
+ <!-- <el-checkbox v-model="item.checked" class="mr8"></el-checkbox> -->
|
|
|
+ <div class="text">
|
|
|
+ <p>
|
|
|
+ 分配房间：
|
|
|
+ <span class="assignRoom">{{ item.resName }}</span>
|
|
|
+ </p>
|
|
|
+ <p class="mb4 mt4">
|
|
|
+ {{ item.memberName }}
|
|
|
+ 【{{ formatDate(new Date(item.appointStartDate), 'YYYY-mm-dd') }}~{{
|
|
|
+ formatDate(new Date(item.appointEndDate), 'mm-dd')
|
|
|
+ }}】
|
|
|
+ </p>
|
|
|
+ <p>
|
|
|
+ 【{{ getDictLabel(cellType, item.cellSourceType) }}】{{
|
|
|
+ formatDate(new Date(item.queueTime), 'YYYY-mm-dd HH:MM:SS')
|
|
|
+ }}
|
|
|
+ </p>
|
|
|
+ </div>
|
|
|
+ <!-- <el-icon v-if="item.checked">
|
|
|
<ele-Select />
|
|
|
</el-icon> -->
|
|
|
- <div class="btns">
|
|
|
- <el-button v-if="item.resId" link type="primary" @click="cancelAllocate(item)">取消</el-button>
|
|
|
- <el-button link type="primary" @click="onDetail(item)">查看</el-button>
|
|
|
- </div>
|
|
|
- </li>
|
|
|
- </ul>
|
|
|
- </div>
|
|
|
- <div class="out-table mr12">
|
|
|
- <el-alert :title="`资源列表（共${state.resourceList.length}个）`" type="warning" :closable="false" class="mb8" />
|
|
|
- <div class="out-table-wrap">
|
|
|
- <el-row :gutter="20" class="out-table-wrap-row">
|
|
|
- <!-- 资源列表 -->
|
|
|
- <el-col :span="24" class="resourceList-col">
|
|
|
- <el-row :gutter="10" v-if="state.resourceList.length">
|
|
|
- <el-col :span="8" v-for="item in state.resourceList" :key="item.id" class="mb8" @click="onSelectResource(item)">
|
|
|
- <div class="items" :class="{ active: curSelectedResourceId === item.id }">
|
|
|
- <header>
|
|
|
- <div class="title">
|
|
|
- <span class="mr8">{{ item.resName }}</span>
|
|
|
- <!-- <el-checkbox v-model="item.checked" class="mr8"></el-checkbox> -->
|
|
|
- </div>
|
|
|
- <div class="btns">
|
|
|
- <el-tag size="small">{{ getDictLabel(cellType, item.resClass) }}</el-tag>
|
|
|
- </div>
|
|
|
- </header>
|
|
|
- <p>{{ item.resLocation }}</p>
|
|
|
- <footer>
|
|
|
- <p>{{ item.usingSource || 0 }}/{{ item.maxNum }}</p>
|
|
|
- <ul>
|
|
|
- <li v-for="(p, index) in item.usedList" :key="index" :class="getUsedClass(p)"></li>
|
|
|
- </ul>
|
|
|
- </footer>
|
|
|
- </div>
|
|
|
- </el-col>
|
|
|
- </el-row>
|
|
|
- </el-col>
|
|
|
- </el-row>
|
|
|
- </div>
|
|
|
- </div>
|
|
|
- <div class="use-table out-table">
|
|
|
- <el-alert title="房间使用情况" type="warning" :closable="false" class="mb8" />
|
|
|
- <div class="out-table-wrap">
|
|
|
- <el-row :gutter="20" class="out-table-wrap-row">
|
|
|
- <!-- 资源列表 -->
|
|
|
- <el-col :span="24" class="allocation-situation-col">
|
|
|
- <!-- 资源分配情况页面 -->
|
|
|
- <div class="allocation-situation">
|
|
|
- <ul class="position-choose">
|
|
|
- <li v-for="(p, index) in allocationSituationList" :key="index" class="flex">
|
|
|
- <i :class="getUsedClass(p)"></i>
|
|
|
- <!-- <span v-if="p.userObj"
|
|
|
+ <div class="btns">
|
|
|
+ <el-button
|
|
|
+ v-if="item.resId"
|
|
|
+ link
|
|
|
+ type="primary"
|
|
|
+ @click="cancelAllocate(item)"
|
|
|
+ >
|
|
|
+ 取消
|
|
|
+ </el-button>
|
|
|
+ <el-button
|
|
|
+ link
|
|
|
+ type="primary"
|
|
|
+ @click="onDetail(item)"
|
|
|
+ >
|
|
|
+ 查看
|
|
|
+ </el-button>
|
|
|
+ </div>
|
|
|
+ </li>
|
|
|
+ </ul>
|
|
|
+ </div>
|
|
|
+ <div class="out-table mr12">
|
|
|
+ <el-alert
|
|
|
+ :title="`资源列表（共${state.resourceList.length}个）`"
|
|
|
+ type="warning"
|
|
|
+ :closable="false"
|
|
|
+ class="mb8"
|
|
|
+ />
|
|
|
+ <div class="out-table-wrap">
|
|
|
+ <el-row
|
|
|
+ :gutter="20"
|
|
|
+ class="out-table-wrap-row"
|
|
|
+ >
|
|
|
+ <!-- 资源列表 -->
|
|
|
+ <el-col
|
|
|
+ :span="24"
|
|
|
+ class="resourceList-col"
|
|
|
+ >
|
|
|
+ <el-row
|
|
|
+ :gutter="10"
|
|
|
+ v-if="state.resourceList.length"
|
|
|
+ >
|
|
|
+ <el-col
|
|
|
+ :span="8"
|
|
|
+ v-for="item in state.resourceList"
|
|
|
+ :key="item.id"
|
|
|
+ class="mb8"
|
|
|
+ @click="onSelectResource(item)"
|
|
|
+ >
|
|
|
+ <div
|
|
|
+ class="items"
|
|
|
+ :class="{ active: curSelectedResourceId === item.id }"
|
|
|
+ >
|
|
|
+ <header>
|
|
|
+ <div class="title">
|
|
|
+ <span class="mr8">{{ item.resName }}</span>
|
|
|
+ <!-- <el-checkbox v-model="item.checked" class="mr8"></el-checkbox> -->
|
|
|
+ </div>
|
|
|
+ <div class="btns">
|
|
|
+ <el-tag size="small">{{ getDictLabel(cellType, item.resClass) }}</el-tag>
|
|
|
+ </div>
|
|
|
+ </header>
|
|
|
+ <p>{{ item.resLocation }}</p>
|
|
|
+ <footer>
|
|
|
+ <p>{{ item.usingSource || 0 }}/{{ item.maxNum }}</p>
|
|
|
+ <ul>
|
|
|
+ <li
|
|
|
+ v-for="(p, index) in item.usedList"
|
|
|
+ :key="index"
|
|
|
+ :class="getUsedClass(p)"
|
|
|
+ ></li>
|
|
|
+ </ul>
|
|
|
+ </footer>
|
|
|
+ </div>
|
|
|
+ </el-col>
|
|
|
+ </el-row>
|
|
|
+ </el-col>
|
|
|
+ </el-row>
|
|
|
+ </div>
|
|
|
+ </div>
|
|
|
+ <div class="use-table out-table">
|
|
|
+ <el-alert
|
|
|
+ title="房间使用情况"
|
|
|
+ type="warning"
|
|
|
+ :closable="false"
|
|
|
+ class="mb8"
|
|
|
+ />
|
|
|
+ <div class="out-table-wrap">
|
|
|
+ <el-row
|
|
|
+ :gutter="20"
|
|
|
+ class="out-table-wrap-row"
|
|
|
+ >
|
|
|
+ <!-- 资源列表 -->
|
|
|
+ <el-col
|
|
|
+ :span="24"
|
|
|
+ class="allocation-situation-col"
|
|
|
+ >
|
|
|
+ <!-- 资源分配情况页面 -->
|
|
|
+ <div class="allocation-situation">
|
|
|
+ <ul class="position-choose">
|
|
|
+ <li
|
|
|
+ v-for="(p, index) in allocationSituationList"
|
|
|
+ :key="index"
|
|
|
+ class="flex"
|
|
|
+ >
|
|
|
+ <i :class="getUsedClass(p)"></i>
|
|
|
+ <!-- <span v-if="p.userObj"
|
|
|
>{{ p.userObj.memberName }}【{{ formatDate(new Date(new Date(p.userObj.appointStartDate)), 'YYYY-mm-dd') }}~{{
|
|
|
formatDate(new Date(new Date(p.userObj.appointEndDate)), 'mm-dd')
|
|
|
}}】</span
|
|
|
@@ -100,550 +209,582 @@
|
|
|
formatDate(new Date(p.endTime), 'mm-dd')
|
|
|
}}】</span
|
|
|
> -->
|
|
|
- <div class="txt-flex">
|
|
|
- <span v-if="p.userObj" :title="p.userObj.memberName">{{ p.userObj.memberName }}</span>
|
|
|
- <span v-else-if="p.userName" :title="p.userName">{{ p.userName }}</span>
|
|
|
- <span v-else>空闲</span>
|
|
|
- </div>
|
|
|
- <el-button v-if="!p.userObj && (p.assignStatus == '10' || p.assignStatus == '40')" link type="primary" @click="onAllocate(p)"
|
|
|
- >分配</el-button
|
|
|
- >
|
|
|
- </li>
|
|
|
- </ul>
|
|
|
- </div>
|
|
|
- </el-col>
|
|
|
- </el-row>
|
|
|
- </div>
|
|
|
- </div>
|
|
|
- </div>
|
|
|
- <template #footer>
|
|
|
- <span class="dialog-footer">
|
|
|
- <el-button type="info" @click="onCancel" size="default">取 消</el-button>
|
|
|
- <!-- <el-button type="success" @click="handelBatchAssign()" size="default">一键分配</el-button> -->
|
|
|
- <el-button color="#2c78ff" @click="onSubmit('20')" size="default">确 定</el-button>
|
|
|
- </span>
|
|
|
- </template>
|
|
|
- </el-dialog>
|
|
|
- <DetailsDialog ref="detailsDialog" />
|
|
|
- </div>
|
|
|
+ <div class="txt-flex">
|
|
|
+ <span
|
|
|
+ v-if="p.userObj"
|
|
|
+ :title="p.userObj.memberName"
|
|
|
+ >
|
|
|
+ {{ p.userObj.memberName }}
|
|
|
+ </span>
|
|
|
+ <span
|
|
|
+ v-else-if="p.userName"
|
|
|
+ :title="p.userName"
|
|
|
+ >
|
|
|
+ {{ p.userName }}
|
|
|
+ </span>
|
|
|
+ <span v-else>空闲</span>
|
|
|
+ </div>
|
|
|
+ <el-button
|
|
|
+ v-if="!p.userObj && (p.assignStatus == '10' || p.assignStatus == '40')"
|
|
|
+ link
|
|
|
+ type="primary"
|
|
|
+ @click="onAllocate(p)"
|
|
|
+ >
|
|
|
+ 分配
|
|
|
+ </el-button>
|
|
|
+ </li>
|
|
|
+ </ul>
|
|
|
+ </div>
|
|
|
+ </el-col>
|
|
|
+ </el-row>
|
|
|
+ </div>
|
|
|
+ </div>
|
|
|
+ </div>
|
|
|
+ <template #footer>
|
|
|
+ <span class="dialog-footer">
|
|
|
+ <el-button
|
|
|
+ type="info"
|
|
|
+ @click="onCancel"
|
|
|
+ size="default"
|
|
|
+ >
|
|
|
+ 取 消
|
|
|
+ </el-button>
|
|
|
+ <!-- <el-button type="success" @click="handelBatchAssign()" size="default">一键分配</el-button> -->
|
|
|
+ <el-button
|
|
|
+ color="#2c78ff"
|
|
|
+ @click="onSubmit('20')"
|
|
|
+ size="default"
|
|
|
+ >
|
|
|
+ 确 定
|
|
|
+ </el-button>
|
|
|
+ </span>
|
|
|
+ </template>
|
|
|
+ </el-dialog>
|
|
|
+ <DetailsDialog ref="detailsDialog" />
|
|
|
+ </div>
|
|
|
</template>
|
|
|
|
|
|
<script setup lang="ts" name="entryAllocate">
|
|
|
-import to from 'await-to-js';
|
|
|
-import { reactive, ref, defineAsyncComponent, computed } from 'vue';
|
|
|
-import { getDictLabel } from '/@/utils/other';
|
|
|
-import { ElMessage, ElMessageBox } from 'element-plus';
|
|
|
-import { usePlatformApi } from '/@/api/platform/home';
|
|
|
-import { useSystemApi } from '/@/api/platform/system';
|
|
|
-import { useUserInfo } from '/@/stores/userInfo';
|
|
|
-import { storeToRefs } from 'pinia';
|
|
|
-import { useDictApi } from '/@/api/base/system/dict';
|
|
|
-import { useCellAssignApi } from '/@/api/platform/home/assign';
|
|
|
-import { formatDate } from '/@/utils/formatTime';
|
|
|
+ import to from 'await-to-js'
|
|
|
+ import { reactive, ref, defineAsyncComponent, computed } from 'vue'
|
|
|
+ import { getDictLabel } from '/@/utils/other'
|
|
|
+ import { ElMessage, ElMessageBox } from 'element-plus'
|
|
|
+ import { usePlatformApi } from '/@/api/platform/home'
|
|
|
+ import { useSystemApi } from '/@/api/platform/system'
|
|
|
+ import { useUserInfo } from '/@/stores/userInfo'
|
|
|
+ import { storeToRefs } from 'pinia'
|
|
|
+ import { useDictApi } from '/@/api/base/system/dict'
|
|
|
+ import { useCellAssignApi } from '/@/api/platform/home/assign'
|
|
|
+ import { formatDate } from '/@/utils/formatTime'
|
|
|
|
|
|
-const DetailsDialog = defineAsyncComponent(() => import('/@/view/entry/components/details.vue'));
|
|
|
-const stores = useUserInfo();
|
|
|
-const { userInfos } = storeToRefs(stores);
|
|
|
+ const DetailsDialog = defineAsyncComponent(() => import('/@/view/entry/components/details.vue'))
|
|
|
+ const stores = useUserInfo()
|
|
|
+ const { userInfos } = storeToRefs(stores)
|
|
|
|
|
|
-// 定义子组件向父组件传值/事件
|
|
|
-const emit = defineEmits(['refresh']);
|
|
|
+ // 定义子组件向父组件传值/事件
|
|
|
+ const emit = defineEmits(['refresh'])
|
|
|
|
|
|
-// 定义变量内容
|
|
|
-const systemApi = useSystemApi();
|
|
|
-const platformApi = usePlatformApi();
|
|
|
-const dictApi = useDictApi();
|
|
|
-const userTypeList = ref<RowDicDataType[]>([]);
|
|
|
-const projectGroupList = ref<any[]>([]);
|
|
|
-const cellType = ref<RowDicDataType[]>([]);
|
|
|
-const resourceList = ref<any[]>([]);
|
|
|
-const molecularGroupList = ref<any[]>([]);
|
|
|
-const cellAssignApi = useCellAssignApi();
|
|
|
+ // 定义变量内容
|
|
|
+ const systemApi = useSystemApi()
|
|
|
+ const platformApi = usePlatformApi()
|
|
|
+ const dictApi = useDictApi()
|
|
|
+ const userTypeList = ref<RowDicDataType[]>([])
|
|
|
+ const projectGroupList = ref<any[]>([])
|
|
|
+ const cellType = ref<RowDicDataType[]>([])
|
|
|
+ const resourceList = ref<any[]>([])
|
|
|
+ const molecularGroupList = ref<any[]>([])
|
|
|
+ const cellAssignApi = useCellAssignApi()
|
|
|
|
|
|
-const state = reactive({
|
|
|
- form: {
|
|
|
- id: 0,
|
|
|
- memberId: 0,
|
|
|
- memberName: '',
|
|
|
- memberPhone: '',
|
|
|
- memberSex: '',
|
|
|
- memberNo: '',
|
|
|
- memberIden: '',
|
|
|
- startDate: '',
|
|
|
- endDate: '',
|
|
|
- memberType: '',
|
|
|
- deptId: 0,
|
|
|
- deptName: '',
|
|
|
- workPlace: '',
|
|
|
- mentorId: 0,
|
|
|
- mentorName: '',
|
|
|
- mentorPhone: '',
|
|
|
- mentorDeptId: 0,
|
|
|
- mentorDeptName: '',
|
|
|
- platformId: 0,
|
|
|
- platformName: '',
|
|
|
- platformType: '',
|
|
|
- platformTime: 0,
|
|
|
- other: '',
|
|
|
- isTemporary: '',
|
|
|
- },
|
|
|
- confirmList: [] as any[],
|
|
|
- resourceList: [] as any[],
|
|
|
- active: -1,
|
|
|
- dialog: {
|
|
|
- isShowDialog: false,
|
|
|
- type: '',
|
|
|
- title: '',
|
|
|
- submitTxt: '',
|
|
|
- },
|
|
|
-});
|
|
|
-const comfirmTotal = computed(() => {
|
|
|
- return state.confirmList.reduce((pre: number, cur: any) => {
|
|
|
- if (cur.resId) return pre + 1;
|
|
|
- return pre;
|
|
|
- }, 0);
|
|
|
-});
|
|
|
-const confirmList = ref<any[]>([]);
|
|
|
-const belongOrgOption = ref<any[]>([]);
|
|
|
-const userList = ref<any[]>([]);
|
|
|
-const platformList = ref();
|
|
|
-const resClass = ref('');
|
|
|
-const groupId = ref(null); // 资源组ID
|
|
|
-const detailsDialog = ref();
|
|
|
-const curSelectedResourceId = ref(0); // 当前选中的资源ID
|
|
|
-const allocationSituationList = ref<any[]>([]); // 资源分配情况列表
|
|
|
-const getDicts = () => {
|
|
|
- Promise.all([
|
|
|
- systemApi.getDeptTree(),
|
|
|
- systemApi.getUserList({ noPage: true }),
|
|
|
- platformApi.getAllPlatformList({ noPage: true }),
|
|
|
- dictApi.getDictDataByType('sys_user_type'),
|
|
|
- systemApi.getProjectGroupList({ noPage: true }),
|
|
|
- userInfos.value.platformId != 0 ? platformApi.getResourceTypeDict({ id: userInfos.value.platformId }) : '',
|
|
|
- ]).then(([dept, user, plat, type, pjt, cell]) => {
|
|
|
- belongOrgOption.value = dept?.data || [];
|
|
|
- userList.value = user?.data?.list || [];
|
|
|
- platformList.value = plat?.data?.list || [];
|
|
|
- userTypeList.value = type?.data?.values || [];
|
|
|
- projectGroupList.value = pjt?.data?.list || [];
|
|
|
- cellType.value = cell?.data || [];
|
|
|
- });
|
|
|
-};
|
|
|
-const getMolecularGroupList = async () => {
|
|
|
- const [err, res]: ToResponse = await to(platformApi.getMolecularGroupList({ id: userInfos.value.platformId }));
|
|
|
- if (err) return;
|
|
|
- molecularGroupList.value = res?.data || [];
|
|
|
-};
|
|
|
-const getResourceList = async () => {
|
|
|
- const [err, res]: ToResponse = await to(platformApi.getResourceList({ platformId: userInfos.value.platformId, resStatus: '10' }));
|
|
|
- if (err) return;
|
|
|
- resourceList.value = res?.data?.list || [];
|
|
|
- state.resourceList = JSON.parse(JSON.stringify(resourceList.value));
|
|
|
-};
|
|
|
-// 待分配列表
|
|
|
-const getConfirmList = async () => {
|
|
|
- const [err, res]: ToResponse = await to(cellAssignApi.assignQueue({ platformId: userInfos.value.platformId }));
|
|
|
- if (err) return;
|
|
|
- confirmList.value = res?.data || [];
|
|
|
- state.confirmList = JSON.parse(JSON.stringify(confirmList.value));
|
|
|
-};
|
|
|
-// 打开弹窗
|
|
|
-const openDialog = async (type: string, row: number) => {
|
|
|
- getDicts();
|
|
|
- getResourceList();
|
|
|
- getConfirmList();
|
|
|
- getMolecularGroupList();
|
|
|
- state.dialog.type = type;
|
|
|
- state.dialog.title = '入室资源分配';
|
|
|
- state.dialog.isShowDialog = true;
|
|
|
-};
|
|
|
-// 前端筛选类型
|
|
|
-const filterOutList = (val: string) => {
|
|
|
- if (val) {
|
|
|
- state.resourceList = resourceList.value.filter((item: any) => item.resClass == val);
|
|
|
- state.confirmList = confirmList.value.filter((item: any) => item.cellSourceType == val);
|
|
|
- } else {
|
|
|
- state.resourceList = [...resourceList.value];
|
|
|
- state.confirmList = [...confirmList.value];
|
|
|
- }
|
|
|
-};
|
|
|
-// 前端筛选资源组
|
|
|
-const filterOutListByGroupId = (val: string) => {
|
|
|
- if (val) {
|
|
|
- state.resourceList = resourceList.value.filter((item: any) => item.groupId == val);
|
|
|
- } else {
|
|
|
- state.resourceList = [...resourceList.value];
|
|
|
- }
|
|
|
-};
|
|
|
-// 选择资源房间
|
|
|
-const onSelectResource = (row: any) => {
|
|
|
- curSelectedResourceId.value = row.id;
|
|
|
- allocationSituationList.value = row.usedList;
|
|
|
-};
|
|
|
-// 确认
|
|
|
-const onConfirm = (row: any) => {
|
|
|
- // 验证同类型 下个月出室人员 = 已确认人数 提示无法确认
|
|
|
-};
|
|
|
-// 关闭弹窗
|
|
|
-const closeDialog = () => {
|
|
|
- state.resourceList = [];
|
|
|
- state.confirmList = [];
|
|
|
- resourceList.value = [];
|
|
|
- confirmList.value = [];
|
|
|
- state.dialog.isShowDialog = false;
|
|
|
-};
|
|
|
-// 取消
|
|
|
-const onCancel = () => {
|
|
|
- closeDialog();
|
|
|
-};
|
|
|
+ const state = reactive({
|
|
|
+ form: {
|
|
|
+ id: 0,
|
|
|
+ memberId: 0,
|
|
|
+ memberName: '',
|
|
|
+ memberPhone: '',
|
|
|
+ memberSex: '',
|
|
|
+ memberNo: '',
|
|
|
+ memberIden: '',
|
|
|
+ startDate: '',
|
|
|
+ endDate: '',
|
|
|
+ memberType: '',
|
|
|
+ deptId: 0,
|
|
|
+ deptName: '',
|
|
|
+ workPlace: '',
|
|
|
+ mentorId: 0,
|
|
|
+ mentorName: '',
|
|
|
+ mentorPhone: '',
|
|
|
+ mentorDeptId: 0,
|
|
|
+ mentorDeptName: '',
|
|
|
+ platformId: 0,
|
|
|
+ platformName: '',
|
|
|
+ platformType: '',
|
|
|
+ platformTime: 0,
|
|
|
+ other: '',
|
|
|
+ isTemporary: '',
|
|
|
+ },
|
|
|
+ confirmList: [] as any[],
|
|
|
+ resourceList: [] as any[],
|
|
|
+ active: -1,
|
|
|
+ dialog: {
|
|
|
+ isShowDialog: false,
|
|
|
+ type: '',
|
|
|
+ title: '',
|
|
|
+ submitTxt: '',
|
|
|
+ },
|
|
|
+ })
|
|
|
+ const comfirmTotal = computed(() => {
|
|
|
+ return state.confirmList.reduce((pre: number, cur: any) => {
|
|
|
+ if (cur.resId) return pre + 1
|
|
|
+ return pre
|
|
|
+ }, 0)
|
|
|
+ })
|
|
|
+ const confirmList = ref<any[]>([])
|
|
|
+ const belongOrgOption = ref<any[]>([])
|
|
|
+ const userList = ref<any[]>([])
|
|
|
+ const platformList = ref()
|
|
|
+ const resClass = ref('')
|
|
|
+ const groupId = ref(null) // 资源组ID
|
|
|
+ const detailsDialog = ref()
|
|
|
+ const curSelectedResourceId = ref(0) // 当前选中的资源ID
|
|
|
+ const allocationSituationList = ref<any[]>([]) // 资源分配情况列表
|
|
|
+ const getDicts = () => {
|
|
|
+ Promise.all([
|
|
|
+ systemApi.getDeptTree(),
|
|
|
+ systemApi.getUserList({ noPage: true }),
|
|
|
+ platformApi.getAllPlatformList({ noPage: true }),
|
|
|
+ dictApi.getDictDataByType('sys_user_type'),
|
|
|
+ systemApi.getProjectGroupList({ noPage: true }),
|
|
|
+ userInfos.value.platformId != 0 ? platformApi.getResourceTypeDict({ id: userInfos.value.platformId }) : '',
|
|
|
+ ]).then(([dept, user, plat, type, pjt, cell]) => {
|
|
|
+ belongOrgOption.value = dept?.data || []
|
|
|
+ userList.value = user?.data?.list || []
|
|
|
+ platformList.value = plat?.data?.list || []
|
|
|
+ userTypeList.value = type?.data?.values || []
|
|
|
+ projectGroupList.value = pjt?.data?.list || []
|
|
|
+ cellType.value = cell?.data || []
|
|
|
+ })
|
|
|
+ }
|
|
|
+ const getMolecularGroupList = async () => {
|
|
|
+ const [err, res]: ToResponse = await to(platformApi.getMolecularGroupList({ id: userInfos.value.platformId }))
|
|
|
+ if (err) return
|
|
|
+ molecularGroupList.value = res?.data || []
|
|
|
+ }
|
|
|
+ const getResourceList = async () => {
|
|
|
+ console.log(userInfos.value, 'dsaddada')
|
|
|
+ const [err, res]: ToResponse = await to(
|
|
|
+ platformApi.getResourceList({ platformId: userInfos.value.platformId, resStatus: '10' }),
|
|
|
+ )
|
|
|
+ if (err) return
|
|
|
+ resourceList.value = res?.data?.list || []
|
|
|
+ state.resourceList = JSON.parse(JSON.stringify(resourceList.value))
|
|
|
+ }
|
|
|
+ // 待分配列表
|
|
|
+ const getConfirmList = async () => {
|
|
|
+ const [err, res]: ToResponse = await to(cellAssignApi.assignQueue({ platformId: userInfos.value.platformId }))
|
|
|
+ if (err) return
|
|
|
+ confirmList.value = res?.data || []
|
|
|
+ state.confirmList = JSON.parse(JSON.stringify(confirmList.value))
|
|
|
+ }
|
|
|
+ // 打开弹窗
|
|
|
+ const openDialog = async (type: string, row: number) => {
|
|
|
+ getDicts()
|
|
|
+ getResourceList()
|
|
|
+ getConfirmList()
|
|
|
+ getMolecularGroupList()
|
|
|
+ state.dialog.type = type
|
|
|
+ state.dialog.title = '入室资源分配'
|
|
|
+ state.dialog.isShowDialog = true
|
|
|
+ }
|
|
|
+ // 前端筛选类型
|
|
|
+ const filterOutList = (val: string) => {
|
|
|
+ if (val) {
|
|
|
+ state.resourceList = resourceList.value.filter((item: any) => item.resClass == val)
|
|
|
+ state.confirmList = confirmList.value.filter((item: any) => item.cellSourceType == val)
|
|
|
+ } else {
|
|
|
+ state.resourceList = [...resourceList.value]
|
|
|
+ state.confirmList = [...confirmList.value]
|
|
|
+ }
|
|
|
+ }
|
|
|
+ // 前端筛选资源组
|
|
|
+ const filterOutListByGroupId = (val: string) => {
|
|
|
+ if (val) {
|
|
|
+ state.resourceList = resourceList.value.filter((item: any) => item.groupId == val)
|
|
|
+ } else {
|
|
|
+ state.resourceList = [...resourceList.value]
|
|
|
+ }
|
|
|
+ }
|
|
|
+ // 选择资源房间
|
|
|
+ const onSelectResource = (row: any) => {
|
|
|
+ curSelectedResourceId.value = row.id
|
|
|
+ allocationSituationList.value = row.usedList
|
|
|
+ }
|
|
|
+ // 确认
|
|
|
+ const onConfirm = (row: any) => {
|
|
|
+ // 验证同类型 下个月出室人员 = 已确认人数 提示无法确认
|
|
|
+ }
|
|
|
+ // 关闭弹窗
|
|
|
+ const closeDialog = () => {
|
|
|
+ state.resourceList = []
|
|
|
+ state.confirmList = []
|
|
|
+ resourceList.value = []
|
|
|
+ confirmList.value = []
|
|
|
+ state.dialog.isShowDialog = false
|
|
|
+ }
|
|
|
+ // 取消
|
|
|
+ const onCancel = () => {
|
|
|
+ closeDialog()
|
|
|
+ }
|
|
|
|
|
|
-const handelBatchAssign = async () => {
|
|
|
- const checkedUser = state.confirmList.filter((item: any) => item.checked);
|
|
|
- console.log(checkedUser);
|
|
|
- if (!checkedUser.length) {
|
|
|
- ElMessage.warning('请选择待分配队列人员');
|
|
|
- return;
|
|
|
- }
|
|
|
- ElMessageBox.confirm(`是否将选中队列人员一键分配资源?`, '提示', {
|
|
|
- confirmButtonText: '确认',
|
|
|
- cancelButtonText: '取消',
|
|
|
- type: 'warning',
|
|
|
- })
|
|
|
- .then(async () => {
|
|
|
- const [err]: ToResponse = await to(platformApi.batchAssign({ appointIds: checkedUser.map((item: any) => item.id) }));
|
|
|
- if (err) return;
|
|
|
- ElMessage.warning('一键分配成功');
|
|
|
- getResourceList();
|
|
|
- getConfirmList();
|
|
|
- })
|
|
|
- .catch(() => {});
|
|
|
-};
|
|
|
-// 提交
|
|
|
-const onSubmit = async (type: string) => {
|
|
|
- const arr = confirmList.value.filter((item: any) => item.resId);
|
|
|
- if (!arr.length) {
|
|
|
- ElMessage.warning('请分配资源');
|
|
|
- return;
|
|
|
- }
|
|
|
+ const handelBatchAssign = async () => {
|
|
|
+ const checkedUser = state.confirmList.filter((item: any) => item.checked)
|
|
|
+ console.log(checkedUser)
|
|
|
+ if (!checkedUser.length) {
|
|
|
+ ElMessage.warning('请选择待分配队列人员')
|
|
|
+ return
|
|
|
+ }
|
|
|
+ ElMessageBox.confirm(`是否将选中队列人员一键分配资源?`, '提示', {
|
|
|
+ confirmButtonText: '确认',
|
|
|
+ cancelButtonText: '取消',
|
|
|
+ type: 'warning',
|
|
|
+ })
|
|
|
+ .then(async () => {
|
|
|
+ const [err]: ToResponse = await to(
|
|
|
+ platformApi.batchAssign({ appointIds: checkedUser.map((item: any) => item.id) }),
|
|
|
+ )
|
|
|
+ if (err) return
|
|
|
+ ElMessage.warning('一键分配成功')
|
|
|
+ getResourceList()
|
|
|
+ getConfirmList()
|
|
|
+ })
|
|
|
+ .catch(() => {})
|
|
|
+ }
|
|
|
+ // 提交
|
|
|
+ const onSubmit = async (type: string) => {
|
|
|
+ const arr = confirmList.value.filter((item: any) => item.resId)
|
|
|
+ if (!arr.length) {
|
|
|
+ ElMessage.warning('请分配资源')
|
|
|
+ return
|
|
|
+ }
|
|
|
|
|
|
- const [err]: ToResponse = await to(
|
|
|
- cellAssignApi.create({
|
|
|
- assignList: arr.map((item: any) => {
|
|
|
- return {
|
|
|
- appointId: item.id,
|
|
|
- resId: item.resId,
|
|
|
- location: item.location,
|
|
|
- replaceId: item.replaceId,
|
|
|
- mainId: item.id || 0,
|
|
|
- platformType:item.platformType || '10',
|
|
|
- };
|
|
|
- }),
|
|
|
- })
|
|
|
- );
|
|
|
- if (err) return;
|
|
|
- ElMessage.success('操作成功');
|
|
|
- emit('refresh');
|
|
|
- closeDialog();
|
|
|
-};
|
|
|
-const onDetail = (val: number) => {
|
|
|
- detailsDialog.value.openDialog('get', val);
|
|
|
-};
|
|
|
-// 分配
|
|
|
-const onAllocate = (pos: any) => {
|
|
|
- if (state.active < 0) {
|
|
|
- ElMessage.warning('请先选择一个待分配人员');
|
|
|
- return;
|
|
|
- }
|
|
|
- const activeObj = state.confirmList[state.active];
|
|
|
- const room = state.resourceList.find((item: any) => item.id == curSelectedResourceId.value);
|
|
|
- if (room.resClass != activeObj.cellSourceType) {
|
|
|
- ElMessage.warning('请选择正确的资源');
|
|
|
- return;
|
|
|
- }
|
|
|
- activeObj.resId = room.id;
|
|
|
- activeObj.resName = room.resName;
|
|
|
- activeObj.location = pos.location;
|
|
|
- activeObj.replaceId = pos.id;
|
|
|
- const user = confirmList.value.find((item: any) => item.id == activeObj.id);
|
|
|
- user.resId = room.id;
|
|
|
- user.resName = room.resName;
|
|
|
- user.location = pos.location;
|
|
|
- user.replaceId = pos.id;
|
|
|
- pos.userObj = { ...activeObj };
|
|
|
- const resource = resourceList.value.find((item: any) => item.id == room.id);
|
|
|
- const used = resource.usedList.find((item: any) => item.location == pos.location);
|
|
|
- used.userObj = { ...activeObj };
|
|
|
-};
|
|
|
-// 取消分配
|
|
|
-const cancelAllocate = (obj: any) => {
|
|
|
- for (const room of resourceList.value) {
|
|
|
- if (room.id == obj.resId) {
|
|
|
- const used = room.usedList.find((i: any) => {
|
|
|
- return i.location == obj.location;
|
|
|
- });
|
|
|
- used.userObj = null;
|
|
|
- }
|
|
|
- }
|
|
|
- const user = confirmList.value.find((item) => item.resId == obj.resId);
|
|
|
- user.resId = null;
|
|
|
- user.resName = null;
|
|
|
- user.location = null;
|
|
|
- user.replaceId = null;
|
|
|
- filterOutList(resClass.value);
|
|
|
-};
|
|
|
-const getUsedClass = (row: any) => {
|
|
|
- if (row.assignStatus == '10') {
|
|
|
- // 空
|
|
|
- if (row.userObj) return 'empty-allocate';
|
|
|
- return 'empty';
|
|
|
- } else if (row.assignStatus == '40') {
|
|
|
- // 次月离室
|
|
|
- if (row.userObj) return 'leave-allocate';
|
|
|
- return 'leave';
|
|
|
- } else {
|
|
|
- // 占用20 已分配45
|
|
|
- return 'used';
|
|
|
- }
|
|
|
-};
|
|
|
-// 暴露变量
|
|
|
-defineExpose({
|
|
|
- openDialog,
|
|
|
-});
|
|
|
+ const [err]: ToResponse = await to(
|
|
|
+ cellAssignApi.create({
|
|
|
+ assignList: arr.map((item: any) => {
|
|
|
+ return {
|
|
|
+ appointId: item.id,
|
|
|
+ resId: item.resId,
|
|
|
+ location: item.location,
|
|
|
+ replaceId: item.replaceId,
|
|
|
+ mainId: item.id || 0,
|
|
|
+ platformType: item.platformType || '10',
|
|
|
+ }
|
|
|
+ }),
|
|
|
+ }),
|
|
|
+ )
|
|
|
+ if (err) return
|
|
|
+ ElMessage.success('操作成功')
|
|
|
+ emit('refresh')
|
|
|
+ closeDialog()
|
|
|
+ }
|
|
|
+ const onDetail = (val: number) => {
|
|
|
+ detailsDialog.value.openDialog('get', val)
|
|
|
+ }
|
|
|
+ // 分配
|
|
|
+ const onAllocate = (pos: any) => {
|
|
|
+ if (state.active < 0) {
|
|
|
+ ElMessage.warning('请先选择一个待分配人员')
|
|
|
+ return
|
|
|
+ }
|
|
|
+ const activeObj = state.confirmList[state.active]
|
|
|
+ const room = state.resourceList.find((item: any) => item.id == curSelectedResourceId.value)
|
|
|
+ if (room.resClass != activeObj.cellSourceType) {
|
|
|
+ ElMessage.warning('请选择正确的资源')
|
|
|
+ return
|
|
|
+ }
|
|
|
+ activeObj.resId = room.id
|
|
|
+ activeObj.resName = room.resName
|
|
|
+ activeObj.location = pos.location
|
|
|
+ activeObj.replaceId = pos.id
|
|
|
+ const user = confirmList.value.find((item: any) => item.id == activeObj.id)
|
|
|
+ user.resId = room.id
|
|
|
+ user.resName = room.resName
|
|
|
+ user.location = pos.location
|
|
|
+ user.replaceId = pos.id
|
|
|
+ pos.userObj = { ...activeObj }
|
|
|
+ const resource = resourceList.value.find((item: any) => item.id == room.id)
|
|
|
+ const used = resource.usedList.find((item: any) => item.location == pos.location)
|
|
|
+ used.userObj = { ...activeObj }
|
|
|
+ }
|
|
|
+ // 取消分配
|
|
|
+ const cancelAllocate = (obj: any) => {
|
|
|
+ for (const room of resourceList.value) {
|
|
|
+ if (room.id == obj.resId) {
|
|
|
+ const used = room.usedList.find((i: any) => {
|
|
|
+ return i.location == obj.location
|
|
|
+ })
|
|
|
+ used.userObj = null
|
|
|
+ }
|
|
|
+ }
|
|
|
+ const user = confirmList.value.find((item) => item.resId == obj.resId)
|
|
|
+ user.resId = null
|
|
|
+ user.resName = null
|
|
|
+ user.location = null
|
|
|
+ user.replaceId = null
|
|
|
+ filterOutList(resClass.value)
|
|
|
+ }
|
|
|
+ const getUsedClass = (row: any) => {
|
|
|
+ if (row.assignStatus == '10') {
|
|
|
+ // 空
|
|
|
+ if (row.userObj) return 'empty-allocate'
|
|
|
+ return 'empty'
|
|
|
+ } else if (row.assignStatus == '40') {
|
|
|
+ // 次月离室
|
|
|
+ if (row.userObj) return 'leave-allocate'
|
|
|
+ return 'leave'
|
|
|
+ } else {
|
|
|
+ // 占用20 已分配45
|
|
|
+ return 'used'
|
|
|
+ }
|
|
|
+ }
|
|
|
+ // 暴露变量
|
|
|
+ defineExpose({
|
|
|
+ openDialog,
|
|
|
+ })
|
|
|
</script>
|
|
|
<style lang="scss" scoped>
|
|
|
-h4 {
|
|
|
- font-size: 18px;
|
|
|
-}
|
|
|
+ h4 {
|
|
|
+ font-size: 18px;
|
|
|
+ }
|
|
|
|
|
|
-header {
|
|
|
- display: flex;
|
|
|
- justify-content: space-between;
|
|
|
- align-items: center;
|
|
|
- height: 32px;
|
|
|
- line-height: 32px;
|
|
|
+ header {
|
|
|
+ display: flex;
|
|
|
+ justify-content: space-between;
|
|
|
+ align-items: center;
|
|
|
+ height: 32px;
|
|
|
+ line-height: 32px;
|
|
|
|
|
|
- .el-form.el-form--inline .el-form-item {
|
|
|
- margin: 0;
|
|
|
- }
|
|
|
-}
|
|
|
+ .el-form.el-form--inline .el-form-item {
|
|
|
+ margin: 0;
|
|
|
+ }
|
|
|
+ }
|
|
|
|
|
|
-.table-container {
|
|
|
- /* display: flex; */
|
|
|
- .use-table {
|
|
|
- /* width: 240px !important; */
|
|
|
- }
|
|
|
- .out-table {
|
|
|
- /* width: 848px; */
|
|
|
- .out-table-wrap {
|
|
|
- height: 500px;
|
|
|
- .out-table-wrap-row {
|
|
|
- height: 100%;
|
|
|
- }
|
|
|
- .resourceList-col {
|
|
|
- height: 100%;
|
|
|
- overflow: auto;
|
|
|
- }
|
|
|
- }
|
|
|
- .items {
|
|
|
- height: 146px;
|
|
|
- padding: 12px;
|
|
|
- border-radius: 4px;
|
|
|
- background-color: #f2f2f2;
|
|
|
- display: flex;
|
|
|
- flex-direction: column;
|
|
|
- justify-content: space-between;
|
|
|
- overflow: hidden;
|
|
|
- cursor: pointer;
|
|
|
- &:hover {
|
|
|
- box-shadow: 0px 0px 6px rgba(0, 0, 0, 0.3);
|
|
|
- }
|
|
|
- &.active {
|
|
|
- background: #ebf3ff;
|
|
|
- box-shadow: 0px 0px 6px rgba(0, 0, 0, 0.3);
|
|
|
- }
|
|
|
- header {
|
|
|
- display: flex;
|
|
|
- align-items: center;
|
|
|
- justify-content: space-between;
|
|
|
+ .table-container {
|
|
|
+ /* display: flex; */
|
|
|
+ .use-table {
|
|
|
+ /* width: 240px !important; */
|
|
|
+ }
|
|
|
+ .out-table {
|
|
|
+ /* width: 848px; */
|
|
|
+ .out-table-wrap {
|
|
|
+ height: 500px;
|
|
|
+ .out-table-wrap-row {
|
|
|
+ height: 100%;
|
|
|
+ }
|
|
|
+ .resourceList-col {
|
|
|
+ height: 100%;
|
|
|
+ overflow: auto;
|
|
|
+ }
|
|
|
+ }
|
|
|
+ .items {
|
|
|
+ height: 146px;
|
|
|
+ padding: 12px;
|
|
|
+ border-radius: 4px;
|
|
|
+ background-color: #f2f2f2;
|
|
|
+ display: flex;
|
|
|
+ flex-direction: column;
|
|
|
+ justify-content: space-between;
|
|
|
+ overflow: hidden;
|
|
|
+ cursor: pointer;
|
|
|
+ &:hover {
|
|
|
+ box-shadow: 0px 0px 6px rgba(0, 0, 0, 0.3);
|
|
|
+ }
|
|
|
+ &.active {
|
|
|
+ background: #ebf3ff;
|
|
|
+ box-shadow: 0px 0px 6px rgba(0, 0, 0, 0.3);
|
|
|
+ }
|
|
|
+ header {
|
|
|
+ display: flex;
|
|
|
+ align-items: center;
|
|
|
+ justify-content: space-between;
|
|
|
|
|
|
- .title {
|
|
|
- display: flex;
|
|
|
- align-items: center;
|
|
|
+ .title {
|
|
|
+ display: flex;
|
|
|
+ align-items: center;
|
|
|
|
|
|
- .el-switch {
|
|
|
- line-height: 24px;
|
|
|
- }
|
|
|
- }
|
|
|
- }
|
|
|
+ .el-switch {
|
|
|
+ line-height: 24px;
|
|
|
+ }
|
|
|
+ }
|
|
|
+ }
|
|
|
|
|
|
- footer {
|
|
|
- display: flex;
|
|
|
- align-items: center;
|
|
|
+ footer {
|
|
|
+ display: flex;
|
|
|
+ align-items: center;
|
|
|
|
|
|
- ul {
|
|
|
- flex: 1;
|
|
|
- list-style: none;
|
|
|
- display: flex;
|
|
|
- flex-wrap: wrap;
|
|
|
+ ul {
|
|
|
+ flex: 1;
|
|
|
+ list-style: none;
|
|
|
+ display: flex;
|
|
|
+ flex-wrap: wrap;
|
|
|
|
|
|
- li {
|
|
|
- flex: 0 0 20%;
|
|
|
- display: flex;
|
|
|
- justify-content: center;
|
|
|
- margin-bottom: 2px;
|
|
|
+ li {
|
|
|
+ flex: 0 0 20%;
|
|
|
+ display: flex;
|
|
|
+ justify-content: center;
|
|
|
+ margin-bottom: 2px;
|
|
|
|
|
|
- &::before {
|
|
|
- display: block;
|
|
|
- content: '';
|
|
|
- height: 10px;
|
|
|
- width: 10px;
|
|
|
- border-radius: 50%;
|
|
|
- background-color: #70b603;
|
|
|
- }
|
|
|
+ &::before {
|
|
|
+ display: block;
|
|
|
+ content: '';
|
|
|
+ height: 10px;
|
|
|
+ width: 10px;
|
|
|
+ border-radius: 50%;
|
|
|
+ background-color: #70b603;
|
|
|
+ }
|
|
|
|
|
|
- &.used::before {
|
|
|
- background-color: #fe5d5a;
|
|
|
- }
|
|
|
- &.empty-allocate::before {
|
|
|
- background: linear-gradient(to right, #70b603 0%, #70b603 50%, #2c78ff 50%, #2c78ff 100%);
|
|
|
- }
|
|
|
- &.leave::before {
|
|
|
- background-color: #f59a23;
|
|
|
- }
|
|
|
- &.leave-allocate::before {
|
|
|
- background: linear-gradient(to right, #f59a23 0%, #f59a23 50%, #2c78ff 50%, #2c78ff 100%);
|
|
|
- }
|
|
|
- }
|
|
|
- }
|
|
|
- }
|
|
|
+ &.used::before {
|
|
|
+ background-color: #fe5d5a;
|
|
|
+ }
|
|
|
+ &.empty-allocate::before {
|
|
|
+ background: linear-gradient(to right, #70b603 0%, #70b603 50%, #2c78ff 50%, #2c78ff 100%);
|
|
|
+ }
|
|
|
+ &.leave::before {
|
|
|
+ background-color: #f59a23;
|
|
|
+ }
|
|
|
+ &.leave-allocate::before {
|
|
|
+ background: linear-gradient(to right, #f59a23 0%, #f59a23 50%, #2c78ff 50%, #2c78ff 100%);
|
|
|
+ }
|
|
|
+ }
|
|
|
+ }
|
|
|
+ }
|
|
|
|
|
|
- .el-icon {
|
|
|
- font-size: 20px !important;
|
|
|
- }
|
|
|
- }
|
|
|
- }
|
|
|
-}
|
|
|
+ .el-icon {
|
|
|
+ font-size: 20px !important;
|
|
|
+ }
|
|
|
+ }
|
|
|
+ }
|
|
|
+ }
|
|
|
|
|
|
-.confirm-table {
|
|
|
- margin-right: 12px;
|
|
|
- width: 300px;
|
|
|
- display: flex;
|
|
|
- flex-direction: column;
|
|
|
- ul {
|
|
|
- height: 500px;
|
|
|
- overflow-y: auto;
|
|
|
- li {
|
|
|
- display: flex;
|
|
|
- align-items: center;
|
|
|
- justify-content: space-between;
|
|
|
- border-radius: 4px;
|
|
|
- border: 1px solid #eee;
|
|
|
- padding: 8px;
|
|
|
- cursor: pointer;
|
|
|
- & + li {
|
|
|
- margin-top: 8px;
|
|
|
- }
|
|
|
- &.active {
|
|
|
- background-color: #ebf3ff;
|
|
|
- }
|
|
|
- .text {
|
|
|
- flex: 1;
|
|
|
- }
|
|
|
- .assignRoom {
|
|
|
- font-weight: bold;
|
|
|
- color: #2c78ff;
|
|
|
- }
|
|
|
- .el-icon {
|
|
|
- color: #fff;
|
|
|
- background-color: #0dda83;
|
|
|
- font-size: 20px;
|
|
|
- padding: 4px;
|
|
|
- border-radius: 50%;
|
|
|
- margin: 0 12px;
|
|
|
- }
|
|
|
- .btns {
|
|
|
- display: flex;
|
|
|
- flex-direction: column;
|
|
|
- .el-button {
|
|
|
- margin-left: 0;
|
|
|
- }
|
|
|
- }
|
|
|
- }
|
|
|
- }
|
|
|
-}
|
|
|
+ .confirm-table {
|
|
|
+ margin-right: 12px;
|
|
|
+ width: 300px;
|
|
|
+ display: flex;
|
|
|
+ flex-direction: column;
|
|
|
+ ul {
|
|
|
+ height: 500px;
|
|
|
+ overflow-y: auto;
|
|
|
+ li {
|
|
|
+ display: flex;
|
|
|
+ align-items: center;
|
|
|
+ justify-content: space-between;
|
|
|
+ border-radius: 4px;
|
|
|
+ border: 1px solid #eee;
|
|
|
+ padding: 8px;
|
|
|
+ cursor: pointer;
|
|
|
+ & + li {
|
|
|
+ margin-top: 8px;
|
|
|
+ }
|
|
|
+ &.active {
|
|
|
+ background-color: #ebf3ff;
|
|
|
+ }
|
|
|
+ .text {
|
|
|
+ flex: 1;
|
|
|
+ }
|
|
|
+ .assignRoom {
|
|
|
+ font-weight: bold;
|
|
|
+ color: #2c78ff;
|
|
|
+ }
|
|
|
+ .el-icon {
|
|
|
+ color: #fff;
|
|
|
+ background-color: #0dda83;
|
|
|
+ font-size: 20px;
|
|
|
+ padding: 4px;
|
|
|
+ border-radius: 50%;
|
|
|
+ margin: 0 12px;
|
|
|
+ }
|
|
|
+ .btns {
|
|
|
+ display: flex;
|
|
|
+ flex-direction: column;
|
|
|
+ .el-button {
|
|
|
+ margin-left: 0;
|
|
|
+ }
|
|
|
+ }
|
|
|
+ }
|
|
|
+ }
|
|
|
+ }
|
|
|
|
|
|
-:deep(.disUoloadSty .el-upload--picture-card) {
|
|
|
- display: none;
|
|
|
- /* 上传按钮隐藏 */
|
|
|
-}
|
|
|
+ :deep(.disUoloadSty .el-upload--picture-card) {
|
|
|
+ display: none;
|
|
|
+ /* 上传按钮隐藏 */
|
|
|
+ }
|
|
|
|
|
|
-.avatar-uploader {
|
|
|
- :deep(.el-upload) {
|
|
|
- width: 100%;
|
|
|
- height: 100%;
|
|
|
- border: 1px dashed var(--el-border-color);
|
|
|
- border-radius: 6px;
|
|
|
- cursor: pointer;
|
|
|
- position: relative;
|
|
|
- overflow: hidden;
|
|
|
- transition: var(--el-transition-duration-fast);
|
|
|
+ .avatar-uploader {
|
|
|
+ :deep(.el-upload) {
|
|
|
+ width: 100%;
|
|
|
+ height: 100%;
|
|
|
+ border: 1px dashed var(--el-border-color);
|
|
|
+ border-radius: 6px;
|
|
|
+ cursor: pointer;
|
|
|
+ position: relative;
|
|
|
+ overflow: hidden;
|
|
|
+ transition: var(--el-transition-duration-fast);
|
|
|
|
|
|
- &:hover {
|
|
|
- border-color: var(--el-color-primary);
|
|
|
- }
|
|
|
- }
|
|
|
-}
|
|
|
+ &:hover {
|
|
|
+ border-color: var(--el-color-primary);
|
|
|
+ }
|
|
|
+ }
|
|
|
+ }
|
|
|
|
|
|
-.el-icon.avatar-uploader-icon {
|
|
|
- font-size: 28px;
|
|
|
- color: #8c939d;
|
|
|
- width: 178px;
|
|
|
- height: 178px;
|
|
|
- text-align: center;
|
|
|
-}
|
|
|
-.allocation-situation-col {
|
|
|
- height: 100%;
|
|
|
- .allocation-situation {
|
|
|
- height: 100%;
|
|
|
- overflow: auto;
|
|
|
- .position-choose {
|
|
|
- list-style: none;
|
|
|
- border: 1px solid #eee;
|
|
|
- height: 100%;
|
|
|
- overflow: auto;
|
|
|
- li {
|
|
|
- height: 32px;
|
|
|
- line-height: 32px;
|
|
|
- display: flex;
|
|
|
- // justify-content: space-between;
|
|
|
- align-items: center;
|
|
|
- .txt-flex {
|
|
|
- flex: 1;
|
|
|
- white-space: nowrap;
|
|
|
- overflow: hidden;
|
|
|
- text-overflow: ellipsis;
|
|
|
- }
|
|
|
- i {
|
|
|
- display: inline-block;
|
|
|
- height: 10px;
|
|
|
- width: 10px;
|
|
|
- border-radius: 50%;
|
|
|
- margin: 0 4px;
|
|
|
- background-color: #70b603;
|
|
|
- &.used {
|
|
|
- background-color: #fe5d5a;
|
|
|
- }
|
|
|
- &.empty-allocate {
|
|
|
- background: linear-gradient(to right, #70b603 0%, #70b603 50%, #2c78ff 50%, #2c78ff 100%);
|
|
|
- }
|
|
|
- &.leave {
|
|
|
- background-color: #f59a23;
|
|
|
- }
|
|
|
- &.leave-allocate {
|
|
|
- background: linear-gradient(to right, #f59a23 0%, #f59a23 50%, #2c78ff 50%, #2c78ff 100%);
|
|
|
- }
|
|
|
- }
|
|
|
- }
|
|
|
- }
|
|
|
- }
|
|
|
-}
|
|
|
+ .el-icon.avatar-uploader-icon {
|
|
|
+ font-size: 28px;
|
|
|
+ color: #8c939d;
|
|
|
+ width: 178px;
|
|
|
+ height: 178px;
|
|
|
+ text-align: center;
|
|
|
+ }
|
|
|
+ .allocation-situation-col {
|
|
|
+ height: 100%;
|
|
|
+ .allocation-situation {
|
|
|
+ height: 100%;
|
|
|
+ overflow: auto;
|
|
|
+ .position-choose {
|
|
|
+ list-style: none;
|
|
|
+ border: 1px solid #eee;
|
|
|
+ height: 100%;
|
|
|
+ overflow: auto;
|
|
|
+ li {
|
|
|
+ height: 32px;
|
|
|
+ line-height: 32px;
|
|
|
+ display: flex;
|
|
|
+ // justify-content: space-between;
|
|
|
+ align-items: center;
|
|
|
+ .txt-flex {
|
|
|
+ flex: 1;
|
|
|
+ white-space: nowrap;
|
|
|
+ overflow: hidden;
|
|
|
+ text-overflow: ellipsis;
|
|
|
+ }
|
|
|
+ i {
|
|
|
+ display: inline-block;
|
|
|
+ height: 10px;
|
|
|
+ width: 10px;
|
|
|
+ border-radius: 50%;
|
|
|
+ margin: 0 4px;
|
|
|
+ background-color: #70b603;
|
|
|
+ &.used {
|
|
|
+ background-color: #fe5d5a;
|
|
|
+ }
|
|
|
+ &.empty-allocate {
|
|
|
+ background: linear-gradient(to right, #70b603 0%, #70b603 50%, #2c78ff 50%, #2c78ff 100%);
|
|
|
+ }
|
|
|
+ &.leave {
|
|
|
+ background-color: #f59a23;
|
|
|
+ }
|
|
|
+ &.leave-allocate {
|
|
|
+ background: linear-gradient(to right, #f59a23 0%, #f59a23 50%, #2c78ff 50%, #2c78ff 100%);
|
|
|
+ }
|
|
|
+ }
|
|
|
+ }
|
|
|
+ }
|
|
|
+ }
|
|
|
+ }
|
|
|
</style>
|
xukai