Browse Source

修改站点列表交互、修改错误提示展示位置

pull/109/head
zq 2 weeks ago
parent
commit
5a501077f6
  1. 40
      src/components/GuipInput.vue
  2. 26
      src/components/GuipRadio.vue
  3. 40
      src/components/GuipSelect.vue
  4. 3
      src/style/theme/index.css
  5. 5
      src/views/agent/siteList.vue

40
src/components/GuipInput.vue

@ -1,8 +1,7 @@
<template> <template>
<el-form-item :style="{ ...styleObject, display: 'flex', flexDirection: 'column' }" :required="required" <el-form-item :style="{ ...styleObject}" :required="required"
:class="[{ 'column': column }, { 'w510': addClass == 'w510' }, { 'w388': addClass == 'w388' }, 'form-item']" :label="label" :class="[{ 'column': column }, { 'w510': addClass == 'w510' }, { 'w388': addClass == 'w388' }, 'form-item']" :label="label"
:prop="prop" :rules="rules" class="custom-form-item"> :prop="prop" :rules="rules" >
<div class="input-wrapper"> <!-- 添加包裹层 -->
<p v-if="desc" class="desc_right">{{ desc }}</p> <p v-if="desc" class="desc_right">{{ desc }}</p>
<el-input :type="type" v-bind="$attrs" :placeholder="placeholder1" :disabled="disabled" :maxlength="maxlength1" <el-input :type="type" v-bind="$attrs" :placeholder="placeholder1" :disabled="disabled" :maxlength="maxlength1"
:style="{ width: width, height: height }" :value="inputValue" :minLength="minLength1" :show-word-limit="showWordLimit" :style="{ width: width, height: height }" :value="inputValue" :minLength="minLength1" :show-word-limit="showWordLimit"
@ -30,7 +29,6 @@
</el-input> </el-input>
<!-- 单位 --> <!-- 单位 -->
<span class="unit" v-if="unit">{{ unit }}</span> <span class="unit" v-if="unit">{{ unit }}</span>
</div>
</el-form-item> </el-form-item>
</template> </template>
@ -149,23 +147,23 @@ export default {
pointer-events: none; pointer-events: none;
/* 防止单位文本影响输入框的点击事件 */ /* 防止单位文本影响输入框的点击事件 */
} }
.custom-form-item { // .custom-form-item {
::v-deep .el-form-item__content { // ::v-deep .el-form-item__content {
display: flex; // display: flex;
flex-direction: column; // flex-direction: column;
align-items: flex-start; // align-items: flex-start;
} // }
.input-wrapper { // .input-wrapper {
position: relative; // position: relative;
width: 100%; // width: 100%;
} // }
::v-deep .el-form-item__error { // ::v-deep .el-form-item__error {
position: relative; // position: relative;
margin-top: 4px; // margin-top: 4px;
padding-top: 0; // padding-top: 0;
line-height: 1; // line-height: 1;
} // }
} // }
</style> </style>

26
src/components/GuipRadio.vue

@ -178,4 +178,30 @@ export default {
gap: 20px 24px; gap: 20px 24px;
flex-wrap: wrap; flex-wrap: wrap;
} }
.custom-form-item {
::v-deep .el-form-item__content {
display: flex;
flex-direction: column;
align-items: flex-start;
min-height: auto; /* 允许高度自由扩展 */
}
/* 错误提示样式调整 */
::v-deep .el-form-item__error {
position: relative; /* 改为相对定位 */
margin-top: 4px; /* 与单选框组保持间距 */
padding-top: 0;
line-height: 1.5;
white-space: normal; /* 允许错误信息换行 */
}
/* 单选框组布局调整 */
.el-radio-group {
margin: 10px 0;
display: flex;
flex-wrap: wrap;
gap: 20px 24px;
width: 100%; /* 确保宽度填满 */
}
}
</style> </style>

40
src/components/GuipSelect.vue

@ -1,7 +1,7 @@
<template> <template>
<el-form-item :style="{ ...style, height: height, ...styleObject }" :required="required" <el-form-item :style="{ ...style, height: height, ...styleObject }" :required="required"
:class="[{ 'column': column }, { 'w510': addClass == 'w510' }, { 'w388': addClass == 'w388' }, 'form-item']" :class="[{ 'column': column }, { 'w510': addClass == 'w510' }, { 'w388': addClass == 'w388' }, 'form-item']"
:label="label" :prop="prop" :rules="rules" class="custom-form-item"> :label="label" :prop="prop" :rules="rules">
<p v-if="desc" class="desc_right">{{ desc }}</p> <p v-if="desc" class="desc_right">{{ desc }}</p>
<el-select :style="{ width: width }" :placeholder="placeholder1" @change="handleChange" v-model="selectedValue" <el-select :style="{ width: width }" :placeholder="placeholder1" @change="handleChange" v-model="selectedValue"
v-bind="$attrs"> v-bind="$attrs">
@ -143,25 +143,25 @@ export default {
} }
</script> </script>
<style scoped lang="scss"> <style scoped lang="scss">
.custom-form-item { // .custom-form-item {
::v-deep .el-form-item__content { // ::v-deep .el-form-item__content {
display: flex; // display: flex;
flex-direction: column; // flex-direction: column;
align-items: flex-start; // align-items: flex-start;
min-height: auto; /* 允许高度自由扩展 */ // min-height: auto; /* */
} // }
::v-deep .el-form-item__error { // ::v-deep .el-form-item__error {
position: relative; /* 改为相对定位 */ // position: relative; /* */
margin-top: 4px; /* 与输入框保持间距 */ // margin-top: 4px; /* */
padding-top: 0; // padding-top: 0;
line-height: 1; // line-height: 1;
white-space: normal; /* 允许错误信息换行 */ // white-space: normal; /* */
} // }
/* 确保 Select 组件宽度填满父容器 */ // /* Select */
.el-select { // .el-select {
width: 100%; // width: 100%;
} // }
} // }
</style> </style>

3
src/style/theme/index.css

@ -12567,9 +12567,10 @@ border-color:#006AFF !important;
font-size: 12px; font-size: 12px;
line-height: 1; line-height: 1;
padding-top: 4px; padding-top: 4px;
text-align: right;
position: absolute; position: absolute;
top: 100%; top: 100%;
left: 0 right: 0
} }
.el-form-item__error--inline { .el-form-item__error--inline {

5
src/views/agent/siteList.vue

@ -86,8 +86,9 @@
<el-table-column label="操作" fixed="right"> <el-table-column label="操作" fixed="right">
<template slot-scope="scope"> <template slot-scope="scope">
<el-link type="primary" :href="serviceListUrl+'?uid='+scope.row.uid" target="_blank" class="mr-16">服务列表</el-link> <el-link type="primary" v-if="scope.row.config_progress_status == '3'" :href="addNewSiteUrl+'?uid='+scope.row.uid" target="_blank" class="mr-16">继续配置</el-link>
<el-link type="primary" :href="siteSettingUrl+'?uid='+scope.row.uid" target="_blank">站点设置</el-link> <el-link type="primary" v-if="scope.row.config_progress_status != '3'" :href="serviceListUrl+'?uid='+scope.row.uid" target="_blank" class="mr-16">服务列表</el-link>
<el-link type="primary" v-if="scope.row.config_progress_status != '3'" :href="siteSettingUrl+'?uid='+scope.row.uid" target="_blank">站点设置</el-link>
</template> </template>
</el-table-column> </el-table-column>

Loading…
Cancel
Save