@tencentcloud/ai-desk-customer-vue 1.0.1 → 1.3.0

package/components/CustomerServiceChat/message-list/message-elements/message-desk/message-desk-elements/message-multi-form/component-pc/input-pc.vue

@@ -1,95 +1,91 @@
 <template>
-    <div class="form-input-box">
-      <div class="form-input-line">
-        <input
-          v-model="text"
-          :class="['form-input',validator? 'form-input-validate':'']"
-          :placeholder="placeholder"
-          @change="onInputChanged"
-        >
-        <div v-if="validator" class="validator-line">
-            {{ TUITranslateService.t("AIDesk.请填写必填项") }}
+  <div class="form-input-box">
+    <div class="form-input-line">
+      <input
+        v-model="text"
+        :class="['form-input',validator && !isDisabled ? 'form-input-validate':'']"
+        :placeholder="placeholder"
+        @change="onInputChanged"
+        :disabled="isDisabled"
+      >
+      <div v-if="validator && !isDisabled" class="validator-line">
+        {{ TUITranslateService.t("AIDesk.请填写必填项") }}
       </div>
-      </div>
-      
     </div>
+  </div>
 </template>
 <script lang="ts">
 import vue from '../../../../../../../../adapter-vue';
 import { TUITranslateService } from '@tencentcloud/chat-uikit-engine';
-const { computed, ref} = vue;
-
-interface FormItem{
-    name:string;
-    value:string;
-}
-
+const { ref } = vue;
 
 export default {
-    props:{
-        placeholder:{
-            type:String,
-            default:''
-        },
-        variableValue:{
-            type:String,
-            default:''
-        },
-        name:{
-            type:String,
-            default:'',
-        },
-        isRequired:{
-            type:Number,
-            default:0,
-        },
-        nodeStatus:{
-            type:Number,
-            default:0
-        },
-        validator:{
-            type:Boolean,
-            default:false
-        }
+  props: {
+    placeholder: {
+      type: String,
+      default: ''
+    },
+    variableValue: {
+      type: String,
+      default: ''
+    },
+    name: {
+      type: String,
+      default: '',
     },
-    emits:['input-change'],
-    setup(props, {emit}){
-        const text = ref<string>('');
-        if(props.variableValue.length!=0){
-            text.value = props.variableValue;
-        }
-        const onInputChanged = ():void => {
-            emit('input-change',{name:props.name,value:text.value});
-        };
-        return {
-            text,
-            onInputChanged,
-            TUITranslateService
-        }
+    isRequired: {
+      type: Number,
+      default: 0,
+    },
+    validator: {
+      type: Boolean,
+      default: false
+    },
+    isDisabled: {
+      type: Boolean,
+      default: false
+    }
+  },
+  emits:['input-change'],
+  setup(props, {emit}){
+    const text = ref<string>('');
+    if (props.variableValue.length != 0) {
+      text.value = props.variableValue;
     }
+    const onInputChanged = ():void => {
+      emit('input-change',{name:props.name,value:text.value});
+    };
+    return {
+      text,
+      onInputChanged,
+      TUITranslateService
+    }
+  }
 }
 </script>
 <style lang="scss">
-
+input:disabled {
+  background-color: #dbdbdb;
+  opacity: 0.5;
+}
 .form-input-line {
-    display:flex;
-    margin-bottom: 10px;
-    flex-direction: column;
+  display: flex;
+  margin-bottom: 10px;
+  flex-direction: column;
 }
 .form-input {
-    flex:1;
-    height: 27px;
-    border-radius: 5px;
-    border-color: transparent;
-    width:300px;
-    padding:5px 8px;
+  flex: 1;
+  height: 27px;
+  border-radius: 5px;
+  border-color: transparent;
+  padding: 5px 8px;
 }
 .form-input-validate {
-    border:1px solid #e54545;
+  border: 1px solid #e54545;
 }
 .validator-line {
-    font-size: 12px;
-    color:#e54545;
-    margin-top: 3px;
+  font-size: 12px;
+  color: #e54545;
+  margin-top: 3px;
 }
-</style>
+</style>

package/components/CustomerServiceChat/message-list/message-elements/message-desk/message-desk-elements/message-multi-form/component-pc/label-pc.vue

@@ -1,33 +1,29 @@
 <template>
-    <div class="form-label">
-        <div v-if="isRequired" style="color: red;">
-            *&nbsp;
-        </div>
-        {{ name }}
-        
+  <div class="form-label">
+    <div v-if="isRequired" style="color: red;">
+      *&nbsp;
     </div>
+    {{ name }}
+  </div>
 </template>
 <script lang="ts">
-    export default {
-        props:{
-            name:{
-                type:String,
-                default:''
-            },
-            isRequired:{
-                type:Number,
-                default:0
-            }
-        },
-        setup(props){
-            
-        }
-    }
+  export default {
+    props: {
+      name: {
+        type: String,
+        default: ''
+      },
+      isRequired: {
+        type: Number,
+        default: 0
+      }
+    },
+  }
 </script>
 <style lang="scss">
 .form-label {
-    display:flex;
-    padding-bottom: 8px;
-    margin-top:12px;
+  display:flex;
+  padding-bottom: 8px;
+  margin-top:12px;
 }
-</style>
+</style>

package/components/CustomerServiceChat/message-list/message-elements/message-desk/message-desk-elements/message-multi-form/component-pc/radio-pc.vue

@@ -1,99 +1,109 @@
 <template>
-    <div>
-        <div class="radio-container-pc">
-            <div v-if="validator" class="validator-line">
-                {{ TUITranslateService.t("AIDesk.请填写必填项") }}
-            </div>
-                <div class="form-radio-box-pc" v-for="(item,index) in chooseItemList" :key="index">
-                    <div class="radio-container-pc-icon" @click="clickItem(index)">
-                        <div class="radio-icon">
-                                <img :src="changeSelectedIcon(item)" alt="" style="width: 20px; height: 20px; vertical-align: middle;"/>
-                        </div>
-                        <div class="radio-label">
-                            {{ item }}
-                        </div>
-                    </div>
-                </div>
+  <div>
+    <div class="radio-container-pc">
+      <div v-if="validator && !isDisabled" class="validator-line">
+        {{ TUITranslateService.t("AIDesk.请填写必填项") }}
+      </div>
+      <div :class="['form-radio-box-pc',isDisabled ? 'form-radio-box-pc-disabled' : '']" v-for="(item,index) in chooseItemList" :key="index">
+        <div class="radio-container-pc-icon" @click="clickItem(index)">
+          <div class="radio-icon">
+            <img :src="changeSelectedIcon(item)" alt="" style="width: 20px; height: 20px; vertical-align: middle;"/>
+          </div>
+          <div class="radio-label">
+            {{ item }}
+          </div>
         </div>
-        
+      </div>
     </div>
+  </div>
 </template>
 <script lang="ts">
 import vue from '../../../../../../../../adapter-vue';
 import radioUncheckIcon from '../../../../../../../../assets/radio-uncheck.png';
 import radioCheckIcon from '../../../../../../../../assets/radio-check.png';
 import { TUITranslateService } from '@tencentcloud/chat-uikit-engine';
-const {  ref } = vue;
+const { ref } = vue;
 export default {
-    props:{
-        chooseItemList:{
-            type:Array,
-            default:[]
-        },
-        name:{
-            type:String,
-            default:'',
-        },
-        isRequired:{
-            type:Number,
-            default:0,
-        },
-        validator:{
-            type:Boolean,
-            default:false
-        }
+  props: {
+    chooseItemList: {
+      type: Array,
+      default: []
     },
-    emits:['input-change'],
-    setup(props,{emit}){
-        const selectedOption = ref<string>('');
-        const checkedIcon = ref<string>('');
-        const changeSelectedIcon = (name:any) => {
-            if(selectedOption.value === name)
-                return radioCheckIcon;
-            else
-                return radioUncheckIcon;
-        }
-        
-        const clickItem=(index:number) => {
-            selectedOption.value = props.chooseItemList[index] as string;
-            emit('input-change',{name:props.name,value:selectedOption.value});
-        }
+    name: {
+      type: String,
+      default: '',
+    },
+    isRequired: {
+      type: Number,
+      default: 0,
+    },
+    validator: {
+      type: Boolean,
+      default: false
+    },
+    isDisabled: {
+      type: Boolean,
+      default: false
+    }
+  },
+  emits:['input-change'],
+  setup(props,{emit}){
+    const selectedOption = ref<string>('');
+    const checkedIcon = ref<string>('');
+    const changeSelectedIcon = (name:any) => {
+      if (selectedOption.value === name) {
+        return radioCheckIcon;
+      } else {
+        return radioUncheckIcon;
+      }
+    }
 
-        const onInputChanged = ():void => {
-            emit('input-change',{name:props.name,value:selectedOption.value});
-        };
-        return {
-            onInputChanged,
-            selectedOption,
-            clickItem,
-            radioUncheckIcon,
-            radioCheckIcon,
-            changeSelectedIcon,
-            checkedIcon,
-            TUITranslateService
-        }
+    const clickItem=(index:number) => {
+      if (props.isDisabled) {
+        return;
+      }
+      selectedOption.value = props.chooseItemList[index] as string;
+      emit('input-change',{name:props.name,value:selectedOption.value});
     }
+
+    const onInputChanged = ():void => {
+      emit('input-change',{name:props.name,value:selectedOption.value});
+    };
+    return {
+      onInputChanged,
+      selectedOption,
+      clickItem,
+      radioUncheckIcon,
+      radioCheckIcon,
+      changeSelectedIcon,
+      checkedIcon,
+      TUITranslateService
+    }
+  }
 }
 </script>
 <style lang="scss">
 .form-radio-box{
-    margin-bottom: 5px;
+  margin-bottom: 5px;
 }
 .radio-container-pc {
-    display:flex;
-    flex-direction: column;
-    width:100%;
+  display: flex;
+  flex-direction: column;
+  width: 100%;
 }
-.form-radio-box-pc{
-    padding: 5px 0;
+.form-radio-box-pc {
+  padding: 5px 0;
 }
-.radio-container-pc-icon{
-    display:flex;
-    flex-direction: row;
-    width: 100%;
-    align-items: center;
-    .radio-icon {
-        margin-right:5px;
-    }
+.form-radio-box-pc-disabled {
+  color: #b0b0b0;
+}
+.radio-container-pc-icon {
+  display: flex;
+  flex-direction: row;
+  width: 100%;
+  align-items: center;
+  .radio-icon {
+    margin-right:5px;
+  }
 }
-</style>
+</style>