|
@@ -59,38 +59,49 @@
|
|
|
<!-- 暂存关联列表 -->
|
|
|
<div class="submit-area">
|
|
|
<div class="card selection-area">
|
|
|
- <!-- 左侧人员选择 -->
|
|
|
- <div class="person-selector">
|
|
|
- <el-select
|
|
|
- v-model="selectedPersons"
|
|
|
- multiple
|
|
|
- filterable
|
|
|
- :placeholder="t('configPerson.selectPersons')"
|
|
|
- style="width: 100%"
|
|
|
- >
|
|
|
- <el-option
|
|
|
- v-for="person in simpleUsers"
|
|
|
- :key="person.id"
|
|
|
- :label="person.nickname"
|
|
|
- :value="person.id"
|
|
|
- />
|
|
|
- </el-select>
|
|
|
- </div>
|
|
|
+ <div class="control-row">
|
|
|
+ <!-- 左侧人员选择 -->
|
|
|
+ <div class="control-group">
|
|
|
+ <label class="control-title">{{ t('devicePerson.rp') }}</label>
|
|
|
+ <div class="person-selector">
|
|
|
+ <el-select
|
|
|
+ v-model="selectedPersons"
|
|
|
+ multiple
|
|
|
+ filterable
|
|
|
+ :placeholder="t('configPerson.selectPersons')"
|
|
|
+ style="width: 100%"
|
|
|
+ >
|
|
|
+ <el-option
|
|
|
+ v-for="person in simpleUsers"
|
|
|
+ :key="person.id"
|
|
|
+ :label="person.nickname"
|
|
|
+ :value="person.id"
|
|
|
+ />
|
|
|
+ </el-select>
|
|
|
+ </div>
|
|
|
+ </div>
|
|
|
|
|
|
- <div class="reason-input-wrapper">
|
|
|
- <el-input
|
|
|
- v-model="formData.reason"
|
|
|
- :placeholder="t('configDevice.rfaHolder')"
|
|
|
- class="reason-input"
|
|
|
- type="textarea"
|
|
|
- :rows="3"
|
|
|
- @input="updateTempRelations"
|
|
|
- />
|
|
|
+ <div class="control-group">
|
|
|
+ <label class="control-title">{{ t('configDevice.reasonForAdjustment') }}</label>
|
|
|
+ <div class="reason-input-wrapper">
|
|
|
+ <el-input
|
|
|
+ v-model="formData.reason"
|
|
|
+ :placeholder="t('configDevice.rfaHolder')"
|
|
|
+ class="reason-input"
|
|
|
+ type="textarea"
|
|
|
+ :rows="4"
|
|
|
+ resize="none"
|
|
|
+ @input="updateTempRelations"
|
|
|
+ />
|
|
|
+ </div>
|
|
|
+ </div>
|
|
|
</div>
|
|
|
</div>
|
|
|
+
|
|
|
<el-button
|
|
|
type="primary"
|
|
|
size="large"
|
|
|
+ style="min-width: 180px;"
|
|
|
@click="submitRelations"
|
|
|
:disabled="tempRelations.length === 0 || !formData.reason.trim() || selectedPersons.length === 0"
|
|
|
>
|
|
@@ -416,7 +427,7 @@ onMounted(async () => {
|
|
|
}
|
|
|
|
|
|
.submit-area {
|
|
|
- margin-top: 5px;
|
|
|
+ margin-top: 20px;
|
|
|
text-align: center;
|
|
|
}
|
|
|
|
|
@@ -486,13 +497,51 @@ h3 {
|
|
|
color: #999;
|
|
|
}
|
|
|
|
|
|
+.control-row {
|
|
|
+ display: flex;
|
|
|
+ width: 100%;
|
|
|
+ gap: 20px;
|
|
|
+}
|
|
|
+
|
|
|
+/* 调整文本域高度 */
|
|
|
+.reason-input-wrapper :deep(.el-textarea__inner) {
|
|
|
+ height: 100% !important;
|
|
|
+ min-height: 100px;
|
|
|
+}
|
|
|
+
|
|
|
+/* 响应式调整 */
|
|
|
+@media (max-width: 992px) {
|
|
|
+ .control-row {
|
|
|
+ flex-direction: column;
|
|
|
+ gap: 15px;
|
|
|
+ }
|
|
|
+
|
|
|
+ .control-group {
|
|
|
+ width: 100%;
|
|
|
+ }
|
|
|
+}
|
|
|
+
|
|
|
.selection-area {
|
|
|
display: flex;
|
|
|
- gap: 20px; /* 两个元素之间的间距 */
|
|
|
}
|
|
|
|
|
|
+.control-group {
|
|
|
+ flex: 1;
|
|
|
+ min-width: 0;
|
|
|
+ display: flex;
|
|
|
+ flex-direction: column;
|
|
|
+}
|
|
|
+
|
|
|
+.control-title {
|
|
|
+ display: block;
|
|
|
+ margin-bottom: 8px;
|
|
|
+ font-weight: bold;
|
|
|
+ color: #606266;
|
|
|
+}
|
|
|
+
|
|
|
+.person-selector,
|
|
|
.reason-input-wrapper {
|
|
|
- flex: 1; /* 占据一半宽度 */
|
|
|
- min-width: 0; /* 防止溢出 */
|
|
|
+ flex: 1;
|
|
|
+ min-height: 100px;
|
|
|
}
|
|
|
</style>
|