|
@@ -0,0 +1,306 @@
|
|
|
+<template>
|
|
|
+ <div class="org-info" v-if="org_info">
|
|
|
+ <div class="org-info__header">
|
|
|
+ <div class="menu-container">
|
|
|
+ <span class="name">{{ org_info.name }}</span>
|
|
|
+ </div>
|
|
|
+ <div class="courseware">
|
|
|
+ <span class="name-path"></span>
|
|
|
+ <div class="operator">
|
|
|
+ <span class="link" @click="$router.push({ path: `/org_manage` })">返回机构列表</span>
|
|
|
+ </div>
|
|
|
+ </div>
|
|
|
+ </div>
|
|
|
+
|
|
|
+ <main class="org-info-manage">
|
|
|
+ <el-form
|
|
|
+ ref="projectForm"
|
|
|
+ :inline="true"
|
|
|
+ :model="org_info"
|
|
|
+ :rules="formRules"
|
|
|
+ label-width="120px"
|
|
|
+ class="org-info-form"
|
|
|
+ >
|
|
|
+ <el-form-item label="名称" prop="name" class="link-item">
|
|
|
+ <el-input v-model="org_info.name" placeholder="请输入名称" maxlength="20" disabled />
|
|
|
+ <span class="link">更改</span>
|
|
|
+ </el-form-item>
|
|
|
+ <el-form-item label="最大用户量" prop="user_count_max" class="link-item">
|
|
|
+ <el-input v-model="org_info.user_count_max" type="number" disabled />
|
|
|
+ <span class="link">更改</span>
|
|
|
+ </el-form-item>
|
|
|
+ <el-form-item label="已注册用户数" prop="user_count" class="label-input link-item">
|
|
|
+ <el-input v-model="org_info.user_count" type="text" disabled />
|
|
|
+ <span class="link"></span>
|
|
|
+ </el-form-item>
|
|
|
+ <el-form-item label="已停用用户数" prop="user_count_stop" class="link-item">
|
|
|
+ <el-input v-model="org_info.user_count_stop" type="text" disabled />
|
|
|
+ <span class="link"></span>
|
|
|
+ </el-form-item>
|
|
|
+ <el-form-item label="最大项目量" prop="project_count_max" class="link-item">
|
|
|
+ <el-input v-model="org_info.project_count_max" type="number" placeholder="请输入最大项目量" disabled />
|
|
|
+ <span class="link">更改</span>
|
|
|
+ </el-form-item>
|
|
|
+ <el-form-item label="已创建项目数" prop="project_count" class="link-item">
|
|
|
+ <el-input v-model="org_info.project_count" disabled />
|
|
|
+ <span class="link"></span>
|
|
|
+ </el-form-item>
|
|
|
+
|
|
|
+ <el-form-item label="已上架教材数" prop="book_count" class="link-item">
|
|
|
+ <el-input v-model="org_info.book_count" disabled />
|
|
|
+ <span class="link"></span>
|
|
|
+ </el-form-item>
|
|
|
+ <el-form-item label="创建时间" prop="create_time" class="link-item">
|
|
|
+ <el-date-picker v-model="org_info.create_time" disabled />
|
|
|
+ <span class="link"></span>
|
|
|
+ </el-form-item>
|
|
|
+ <el-form-item prop="use_end_date_book_edit" class="link-item">
|
|
|
+ <span slot="label">教材编辑<br />使用期限</span>
|
|
|
+ <el-date-picker
|
|
|
+ v-model="org_info.use_end_date_book_edit"
|
|
|
+ format="yyyy-MM-dd"
|
|
|
+ value-format="yyyy-MM-dd"
|
|
|
+ placeholder="选择日期"
|
|
|
+ disabled
|
|
|
+ ></el-date-picker>
|
|
|
+
|
|
|
+ <span class="link">更改</span>
|
|
|
+ </el-form-item>
|
|
|
+ <el-form-item prop="use_end_date_book_store" class="link-item">
|
|
|
+ <span slot="label">教材仓库<br />使用期限</span>
|
|
|
+
|
|
|
+ <el-date-picker
|
|
|
+ v-model="org_info.use_end_date_book_store"
|
|
|
+ format="yyyy-MM-dd"
|
|
|
+ value-format="yyyy-MM-dd"
|
|
|
+ placeholder="选择日期"
|
|
|
+ disabled
|
|
|
+ ></el-date-picker>
|
|
|
+ <span class="link">更改</span>
|
|
|
+ </el-form-item>
|
|
|
+ <el-form-item label="机构管理员" prop="org_manager_name_desc" class="link-item link-all">
|
|
|
+ <el-input v-model="org_info.org_manager_name_desc" type="text" disabled />
|
|
|
+ <span class="link">更改</span>
|
|
|
+ </el-form-item>
|
|
|
+ <el-form-item label="机构权限" prop="org_popedom_name_desc" class="link-item link-all">
|
|
|
+ <el-input v-model="org_info.org_popedom_name_desc" type="text" placeholder="请输入机构权限" disabled />
|
|
|
+ <span class="link">更改</span>
|
|
|
+ </el-form-item>
|
|
|
+
|
|
|
+ <el-form-item label="备注" prop="memo" class="link-item link-all">
|
|
|
+ <el-input
|
|
|
+ v-model="org_info.memo"
|
|
|
+ type="textarea"
|
|
|
+ :autosize="{ minRows: 4 }"
|
|
|
+ maxlength="1500"
|
|
|
+ show-word-limit
|
|
|
+ placeholder="请输入备注"
|
|
|
+ disabled
|
|
|
+ />
|
|
|
+ <span class="link">更改</span>
|
|
|
+ </el-form-item>
|
|
|
+ </el-form>
|
|
|
+ </main>
|
|
|
+ </div>
|
|
|
+</template>
|
|
|
+
|
|
|
+<script>
|
|
|
+import { getOrgInfo } from '@/api/org.js';
|
|
|
+
|
|
|
+export default {
|
|
|
+ name: 'OrgManageInfo',
|
|
|
+ components: {},
|
|
|
+ data() {
|
|
|
+ return {
|
|
|
+ id: this.$route.params.id,
|
|
|
+ isManage: this.$route.query.isManage,
|
|
|
+ labelInput: '',
|
|
|
+ selectMembersTitle: '',
|
|
|
+ visibleMembers: false,
|
|
|
+ type: '',
|
|
|
+ leaderNames: '', // 组长姓名
|
|
|
+ memberNames: '', // 组员姓名
|
|
|
+ list: {
|
|
|
+ leader: [],
|
|
|
+ member: [],
|
|
|
+ },
|
|
|
+ org_info: null,
|
|
|
+ formRules: {
|
|
|
+ name: [{ required: true, message: '请输入机构名称', trigger: 'blur' }],
|
|
|
+ },
|
|
|
+ };
|
|
|
+ },
|
|
|
+ created() {
|
|
|
+ this.getProjectInfo();
|
|
|
+ },
|
|
|
+ methods: {
|
|
|
+ getProjectInfo() {
|
|
|
+ getOrgInfo({ id: this.id }).then(({ org_info }) => {
|
|
|
+ this.org_info = org_info;
|
|
|
+ });
|
|
|
+ },
|
|
|
+ // 处理标签输入
|
|
|
+ labelChange() {
|
|
|
+ if (this.labelInput.trim() !== '') {
|
|
|
+ this.org_info.label_list.push(this.labelInput.trim());
|
|
|
+ this.labelInput = ''; // 清空输入框
|
|
|
+ }
|
|
|
+ },
|
|
|
+ selectLeader() {
|
|
|
+ this.selectMembersTitle = '选择组长';
|
|
|
+ this.type = 'leader';
|
|
|
+ this.visibleMembers = true;
|
|
|
+ },
|
|
|
+ selectMembers() {
|
|
|
+ this.selectMembersTitle = '选择项目成员';
|
|
|
+ this.type = 'member';
|
|
|
+ this.visibleMembers = true;
|
|
|
+ },
|
|
|
+ /**
|
|
|
+ * 处理选择的成员
|
|
|
+ * @param {Array} selectedUsers - 选中的用户列表
|
|
|
+ */
|
|
|
+ handleSelectedMembers(selectedUsers) {
|
|
|
+ if (this.type === 'leader') {
|
|
|
+ this.leaderNames = selectedUsers.map((user) => user.real_name).join(';');
|
|
|
+ this.org_info.leader_id_list = selectedUsers.map((user) => user.id);
|
|
|
+ } else if (this.type === 'member') {
|
|
|
+ this.memberNames = selectedUsers.map((user) => user.real_name).join(';');
|
|
|
+ this.org_info.member_id_list = selectedUsers.map((user) => user.id);
|
|
|
+ this.setProjectMember();
|
|
|
+ }
|
|
|
+ },
|
|
|
+ /**
|
|
|
+ * 得到用户列表(指定ID)
|
|
|
+ * @param {Array} id_list - 用户ID列表
|
|
|
+ * @param {string} type - 用户类型(组长或组员)
|
|
|
+ */
|
|
|
+ getUserList_ID(id_list, type) {
|
|
|
+ GetUserList_ID({ id_list }).then(({ user_list }) => {
|
|
|
+ if (type === 'leader') {
|
|
|
+ this.leaderNames = user_list.map((user) => user.real_name).join(', ');
|
|
|
+ this.list.leader = user_list;
|
|
|
+ } else if (type === 'member') {
|
|
|
+ this.memberNames = user_list.map((user) => user.real_name).join(', ');
|
|
|
+ this.list.member = user_list;
|
|
|
+ }
|
|
|
+ });
|
|
|
+ },
|
|
|
+ // 设置项目成员
|
|
|
+ setProjectMember() {
|
|
|
+ SetProjectMember({
|
|
|
+ project_id: this.id,
|
|
|
+ user_id_list: this.org_info.member_id_list,
|
|
|
+ }).then(() => {
|
|
|
+ this.$message.success('项目成员更新成功');
|
|
|
+ this.getProjectInfo();
|
|
|
+ });
|
|
|
+ },
|
|
|
+ },
|
|
|
+};
|
|
|
+</script>
|
|
|
+
|
|
|
+<style lang="scss" scoped>
|
|
|
+@use '@/styles/mixin.scss' as *;
|
|
|
+
|
|
|
+.org-info {
|
|
|
+ @include page-content(true);
|
|
|
+
|
|
|
+ &__header {
|
|
|
+ top: 0;
|
|
|
+
|
|
|
+ .name {
|
|
|
+ width: 240px;
|
|
|
+ font-size: 16px;
|
|
|
+ font-weight: bold;
|
|
|
+ }
|
|
|
+ }
|
|
|
+
|
|
|
+ &-manage {
|
|
|
+ max-width: 1148px;
|
|
|
+ margin: 0 auto !important;
|
|
|
+
|
|
|
+ .org-info-form {
|
|
|
+ .link-item {
|
|
|
+ .el-input,
|
|
|
+ .el-select {
|
|
|
+ width: 380px;
|
|
|
+ }
|
|
|
+
|
|
|
+ .el-textarea {
|
|
|
+ width: 930px;
|
|
|
+ }
|
|
|
+
|
|
|
+ .link {
|
|
|
+ width: 20px;
|
|
|
+ margin-left: 12px;
|
|
|
+ }
|
|
|
+ }
|
|
|
+
|
|
|
+ .link-all {
|
|
|
+ display: block;
|
|
|
+
|
|
|
+ .el-input,
|
|
|
+ .el-select {
|
|
|
+ width: 930px;
|
|
|
+ }
|
|
|
+ }
|
|
|
+
|
|
|
+ .label-tworow {
|
|
|
+ :deep > label {
|
|
|
+ display: inline-flex;
|
|
|
+ justify-content: flex-end;
|
|
|
+ width: 100%;
|
|
|
+ line-height: 16px;
|
|
|
+ }
|
|
|
+ }
|
|
|
+
|
|
|
+ .el-input,
|
|
|
+ .el-select {
|
|
|
+ width: 420px;
|
|
|
+
|
|
|
+ :deep .el-input__inner {
|
|
|
+ background-color: #fff;
|
|
|
+ border-color: #dcdcdc;
|
|
|
+ }
|
|
|
+ }
|
|
|
+
|
|
|
+ .el-textarea {
|
|
|
+ width: 970px;
|
|
|
+
|
|
|
+ :deep .el-textarea__inner {
|
|
|
+ background-color: #fff;
|
|
|
+ border-color: #dcdcdc;
|
|
|
+ }
|
|
|
+ }
|
|
|
+
|
|
|
+ .label-input {
|
|
|
+ max-width: 540px;
|
|
|
+
|
|
|
+ :deep .label-input-content {
|
|
|
+ display: flex;
|
|
|
+ align-items: center;
|
|
|
+ width: 420px;
|
|
|
+
|
|
|
+ .label-list {
|
|
|
+ display: flex;
|
|
|
+ flex-wrap: wrap;
|
|
|
+ gap: 4px;
|
|
|
+ }
|
|
|
+
|
|
|
+ .el-input {
|
|
|
+ flex: 1;
|
|
|
+ min-width: 90px;
|
|
|
+ margin-left: 6px;
|
|
|
+ }
|
|
|
+ }
|
|
|
+ }
|
|
|
+ }
|
|
|
+ }
|
|
|
+
|
|
|
+ :deep .el-input.is-disabled .el-input__inner,
|
|
|
+ :deep .el-textarea.is-disabled .el-textarea__inner {
|
|
|
+ color: #1d2129;
|
|
|
+ }
|
|
|
+}
|
|
|
+</style>
|