调整样式

src/views/org_manage/OrgManageInfo.vue

@@ -13,93 +13,167 @@
     </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 />
+      <div class="table-fourcolumn">
+        <span class="label">名称</span>
+        <div class="project-item">
+          <span>{{ org_info.name }}</span>
           <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 />
+        </div>
+        <span class="label">最大用户量</span>
+        <div class="project-item">
+          <span>{{ org_info.user_count_max }}</span>
           <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 />
+        </div>
+        <span class="label">已注册用户数</span>
+        <div class="project-item">
+          <span>{{ org_info.user_count }}</span>
           <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>
-
+        </div>
+        <span class="label">已停用用户数</span>
+        <div class="project-item">
+          <span>{{ org_info.user_count_stop }}</span>
           <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>
+        </div>
+        <span class="label">最大项目量</span>
+        <div class="project-item">
+          <span>{{ org_info.project_count_max }}</span>
           <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 />
+        </div>
+        <span class="label">已创建项目数</span>
+        <div class="project-item">
+          <span>{{ org_info.project_count }}</span>
+        </div>
+        <span class="label">已上架教材数</span>
+        <div class="project-item">
+          <span>{{ org_info.book_count }}</span>
+        </div>
+        <span class="label">创建时间</span>
+        <div class="project-item">
+          <span>{{ org_info.create_time }}</span>
+        </div>
+        <span class="label" style="line-height: 16px">教材编辑<br />使用期限</span>
+        <div class="project-item">
+          <span>{{ org_info.use_end_date_book_edit }}</span>
           <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 />
+        </div>
+        <span class="label" style="line-height: 16px">教材仓库<br />使用期限</span>
+        <div class="project-item">
+          <span>{{ org_info.use_end_date_book_store }}</span>
           <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
-          />
+        </div>
+      </div>
+      <div class="table-twocolumn">
+        <span class="label">机构管理员</span>
+        <div class="project-item">
+          <span>{{ org_info.org_manager_name_desc }}</span>
           <span class="link">更改</span>
-        </el-form-item>
-      </el-form>
+        </div>
+        <span class="label">机构权限</span>
+        <div class="project-item">
+          <span>{{ org_info.org_popedom_name_desc }}</span>
+          <span class="link">更改</span>
+        </div>
+        <span class="label">备注</span>
+        <div class="project-item">
+          <span>{{ org_info.memo }}</span>
+          <span class="link">更改</span>
+        </div>
+      </div>
+      <!-- <el-form-item label="名称" prop="name" class="link-item">
+        <el-input v-if="1 === 2" v-model="org_info.name" placeholder="请输入名称" maxlength="20" disabled />
+
+        <span>{{ org_info.name }}</span>
+        <span class="link">更改</span>
+      </el-form-item>
+      <el-form-item label="最大用户量" prop="user_count_max" class="link-item">
+        <el-input v-if="1 === 2" 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-if="1 === 2" 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-if="1 === 2" 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-if="1 === 2"
+          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-if="1 === 2" 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-if="1 === 2" 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-if="1 === 2" 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-if="1 === 2"
+          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-if="1 === 2"
+          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-if="1 === 2" 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-if="1 === 2"
+          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-if="1 === 2"
+          v-model="org_info.memo"
+          type="textarea"
+          :autosize="{ minRows: 4 }"
+          maxlength="1500"
+          show-word-limit
+          placeholder="请输入备注"
+          disabled
+        />
+        <span class="link">更改</span>
+      </el-form-item> -->
     </main>
   </div>
 </template>
@@ -113,21 +187,8 @@ export default {
   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() {
@@ -139,63 +200,6 @@ export default {
         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>
@@ -217,90 +221,45 @@ export default {
   }
 
   &-manage {
+    row-gap: 0 !important;
     max-width: 1148px;
     margin: 0 auto !important;
 
-    .org-info-form {
-      .link-item {
-        .el-input,
-        .el-select {
-          width: 380px;
-        }
-
-        .el-textarea {
-          width: 930px;
-        }
+    .table-fourcolumn,
+    .table-twocolumn {
+      display: grid;
 
-        .link {
-          width: 20px;
-          margin-left: 12px;
-        }
+      .label,
+      .project-item {
+        padding: 4px 8px;
+        line-height: 32px;
+        border-bottom: $border;
       }
 
-      .link-all {
-        display: block;
-
-        .el-input,
-        .el-select {
-          width: 930px;
-        }
+      .label {
+        text-align: right;
+        background-color: $fill-color;
       }
 
-      .label-tworow {
-        :deep > label {
-          display: inline-flex;
-          justify-content: flex-end;
-          width: 100%;
-          line-height: 16px;
-        }
-      }
-
-      .el-input,
-      .el-select {
-        width: 420px;
+      .project-item {
+        display: flex;
+        column-gap: 8px;
 
-        :deep .el-input__inner {
-          background-color: #fff;
-          border-color: #dcdcdc;
+        :first-child {
+          flex: 1;
         }
       }
+    }
 
-      .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;
-          }
-        }
-      }
+    .table-fourcolumn {
+      grid-template-rows: repeat(5, minmax(40px, auto));
+      grid-template-columns: 120px 1fr 120px 1fr;
     }
-  }
 
-  :deep .el-input.is-disabled .el-input__inner,
-  :deep .el-textarea.is-disabled .el-textarea__inner {
-    color: #1d2129;
+    .table-twocolumn {
+      grid-template-rows: repeat(3, minmax(40px, auto));
+      grid-template-columns: 120px 1fr;
+    }
   }
 }
 </style>