feat(ui): change the long text editing control to a textarea #738

Author: LHRUN

cmdb-ui/src/modules/cmdb/components/ciTable/index.vue

@@ -57,7 +57,7 @@
             <span>{{ col.title }}</span>
           </span>
         </template>
-        <template v-if="col.is_choice || col.is_password || col.is_bool || col.is_reference" #edit="{ row }">
+        <template v-if="showCustomEditComponent(col)" #edit="{ row }">
           <CIReferenceAttr
             v-if="col.is_reference"
             :referenceTypeId="col.reference_type_id"
@@ -71,6 +71,17 @@
             v-model="row[col.field]"
           />
           <vxe-input v-else-if="col.is_password" v-model="passwordValue[col.field]" />
+
+          <a-textarea
+            v-else-if="col.value_type === '2' && !col.is_index"
+            :value="col.is_list && Array.isArray(row[col.field]) ? row[col.field].join(',') : row[col.field]"
+            :style="{ resize: 'none' }"
+            :rows="1"
+            @input="(e) => {
+              row[col.field] = e.target.value
+            }"
+          />
+
           <a-select
             v-if="col.is_choice"
             v-model="row[col.field]"
@@ -527,7 +538,15 @@ export default {
       })
 
       return option
-    }
+    },
+
+    showCustomEditComponent(col) {
+      if (col.value_type === '2' && !col.is_index) {
+        return true
+      }
+
+      return col.is_choice || col.is_password || col.is_bool || col.is_reference
+    },
   }
 }
 </script>

cmdb-ui/src/modules/cmdb/views/ci/modules/CreateInstanceForm.vue

@@ -108,6 +108,12 @@
                   }
                 ]"
               />
+              <a-textarea
+                v-else-if="getFieldType(list.name) === 'textarea'"
+                v-decorator="[list.name, { rules: getDecoratorRules(list) }]"
+                @focus="(e) => handleFocusInput(e, list)"
+                @blur="handleCascadeAttrByUpdate(list)"
+              />
               <a-select
                 :style="{ width: '100%' }"
                 v-decorator="[list.name, { rules: getDecoratorRules(list) }]"
@@ -459,6 +465,8 @@ export default {
           return 'input_number'
         } else if (_find.value_type === '4' || _find.value_type === '3') {
           return _find.value_type
+        } else if (_find.value_type === '2' && !_find.is_index) {
+          return 'textarea'
         } else {
           return 'input'
         }

cmdb-ui/src/modules/cmdb/views/ci/modules/ciDetailAttrContent.vue

@@ -1,6 +1,6 @@
 <template>
   <span :id="`ci-detail-attr-${attr.name}`">
-    <span v-if="!isEdit || attr.value_type === '6'">
+    <span class="ci-detail-attr-preview" v-if="!isEdit || attr.value_type === '6'">
       <template v-if="attr.is_reference" >
         <a
           v-for="(ciId) in (attr.is_list ? ci[attr.name] : [ci[attr.name]])"
@@ -108,6 +108,20 @@
               }
             ]"
           />
+
+          <a-textarea
+            v-else-if="attr.value_type === '2' && !attr.is_index"
+            size="small"
+            v-decorator="[
+              attr.name,
+              {
+                validateTrigger: ['submit'],
+                rules: [{ required: attr.is_required }],
+              },
+            ]"
+            style="width: 100%"
+          />
+
           <a-select
             :style="{ width: '200px' }"
             v-decorator="[
@@ -357,6 +371,10 @@ export default {
 </script>
 
 <style lang="less" scoped>
+.ci-detail-attr-preview {
+  white-space: pre-wrap;
+}
+
 .ci-detail-attr-json {
   overflow: hidden;
   text-overflow: ellipsis;

cmdb-ui/src/modules/cmdb/views/ci/modules/createInstanceFormByGroup.vue

@@ -39,6 +39,20 @@
               }
             ]"
           />
+          <a-textarea
+            v-else-if="attr.value_type === '2' && !attr.is_index"
+            v-decorator="[
+              attr.name,
+              {
+                validateTrigger: ['submit'],
+                rules: [{ required: attr.is_required, message: $t('placeholder1') + `${attr.alias || attr.name}` }],
+                initialValue: attr.default && attr.default.default ? attr.default.default : null,
+              },
+            ]"
+            style="width: 100%"
+            @focus="(e) => handleFocusInput(e, attr)"
+            @blur="handleChange(attr)"
+          />
           <a-select
             :style="{ width: '100%' }"
             v-decorator="[

cmdb-ui/src/modules/cmdb/views/resource_search_2/resourceSearch/components/attrDisplay.vue

@@ -52,6 +52,7 @@
     </template>
     <span
       v-else
+      :style="{ whiteSpace: isEllipsis ? 'nowrap' : 'pre-wrap' }"
       v-html="markSearchValue((attr.is_list && Array.isArray(ci[attr.name])) ? ci[attr.name].join(',') : ci[attr.name])"
     ></span>
   </div>