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

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

@@ -1,104 +1,97 @@
 <template>
-    <div class="form-input-box-mobile">
-        <LabelMobile :name="name" :is-required="isRequired" />
-      <div class="form-input-line">
-        <input
-            class="form-input-mobile"
-          v-model="text"
-          :placeholder="placeholder"
-          @input="onInputChanged"
-        >
-        <div v-if="validator" class="validator-line">
-            {{TUITranslateService.t("AIDesk.请填写必填项")}}
-        </div>
+  <div class="form-input-box-mobile">
+    <LabelMobile :name="name" :is-required="isRequired" />
+    <div class="form-input-line">
+      <input
+        class="form-input-mobile"
+        v-model="text"
+        :placeholder="placeholder"
+        @input="onInputChanged"
+      >
+      <div v-if="validator" class="validator-line">
+        {{ TUITranslateService.t("AIDesk.请填写必填项") }}
       </div>
-      
     </div>
+
+  </div>
 </template>
 <script lang="ts">
 import vue from '../../../../../../../../adapter-vue';
 import LabelMobile from './label-mobile.vue';
 import { TUITranslateService } from '@tencentcloud/chat-uikit-engine';
-const { computed, ref} = vue;
-
-interface FormItem{
-    name:string;
-    value:string;
-}
-
+const { ref } = vue;
 
 export default {
-    components:{
-        LabelMobile
+  components: {
+    LabelMobile
+  },
+  props: {
+    placeholder: {
+      type: String,
+      default: ''
+    },
+    variableValue: {
+      type: String,
+      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
-        }
+    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,
-            props,
-            TUITranslateService
-        }
+    isRequired: {
+      type: Number,
+      default: 0,
+    },
+    nodeStatus: {
+      type: Number,
+      default: 0
+    },
+    validator: {
+      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,
+      props,
+      TUITranslateService
     }
+  }
 }
 </script>
 <style lang="scss">
 .form-input-box-mobile{
-    display:flex;
-    flex-direction: row;
-    align-items: center;
-    margin:0 16px;
-    border-bottom:1px solid #e7e7e7;
-    padding-top:5px;
+  display: flex;
+  flex-direction: row;
+  align-items: center;
+  margin: 0 16px;
+  border-bottom: 1px solid #e7e7e7;
+  padding-top: 5px;
 }
 .form-input-line {
-    display:flex;
-    margin-bottom: 10px;
-    flex:1;
-    flex-direction: column;
-    
+  display:flex;
+  margin-bottom: 10px;
+  flex:1;
+  flex-direction: column;
 }
 .form-input-mobile {
-    border-color:transparent;
-    padding:5px 8px;
-    font-size:14px;
+  border-color: transparent;
+  padding: 5px 8px;
+  font-size: 14px;
 }
 .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-mobile/label-mobile.vue

@@ -1,32 +1,29 @@
 <template>
-    <div class="form-label">
-        {{ name }}
-        <div v-if="isRequired" style="color: red;">
-            &nbsp;*
-        </div>
+  <div class="form-label">
+    {{ name }}
+    <div v-if="isRequired" style="color: red;">
+      &nbsp;*
     </div>
+  </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;
-    width:70px;
-    padding-bottom: 8px;
+  display:flex;
+  width:70px;
+  padding-bottom: 8px;
 }
-</style>
+</style>

package/components/CustomerServiceChat/message-list/message-elements/message-desk/message-desk-elements/message-multi-form/component-mobile/radios-mobile.vue

@@ -1,30 +1,29 @@
 <template>
-    <div class="label-container">
-        <div>
-            <Label :name="name" :is-required="isRequired"/>
-        </div>
-        <div class="radio-container">
-            <div v-if="validator" class="validator-line">
-                {{ TUITranslateService.t("AIDesk.请填写必填项") }}
+  <div class="label-container">
+    <div>
+      <Label :name="name" :is-required="isRequired"/>
+    </div>
+    <div class="radio-container">
+      <div v-if="validator" class="validator-line">
+          {{ TUITranslateService.t("AIDesk.请填写必填项") }}
+      </div>
+      <div class="form-radio-box-mobile" v-for="(item,index) in chooseItemList" :key="index">
+        <div class="radio-container-uni" @click="clickItem(index)">
+          <div class="radio-icon-uni">
+            <div v-if="isUniFrameWork">
+              <image :src="changeSelectedIcon(item)" alt="" style="width: 20px; height: 20px; vertical-align: middle;"/>
+            </div>
+            <div v-else>
+              <img :src="changeSelectedIcon(item)" alt="" style="width: 20px; height: 20px; vertical-align: middle;"/>
             </div>
-                <div class="form-radio-box-mobile" v-for="(item,index) in chooseItemList" :key="index">
-                    <div class="radio-container-uni" @click="clickItem(index)">
-                        <div class="radio-icon-uni">
-                            <div v-if="isUniFrameWork">
-                                <image :src="changeSelectedIcon(item)" alt="" style="width: 20px; height: 20px; vertical-align: middle;"/>
-                            </div>
-                            <div v-else>
-                                <img :src="changeSelectedIcon(item)" alt="" style="width: 20px; height: 20px; vertical-align: middle;"/>
-                            </div>
-                        </div>
-                        <div class="radio-label-uni">
-                            {{ item }}
-                        </div>
-                    </div>
-                </div>
+          </div>
+          <div class="radio-label-uni">
+            {{ item }}
+          </div>
         </div>
-        
+      </div>
     </div>
+  </div>
 </template>
 <script lang="ts">
 import Label from './label-mobile.vue';
@@ -32,112 +31,112 @@ import vue from '../../../../../../../../adapter-vue';
 import Icon from '../../customer-icon.vue';
 import radioUncheckIcon from '../../../../../../../../assets/radio-uncheck.png';
 import radioCheckIcon from '../../../../../../../../assets/radio-check.png';
-import { isPC, isH5,isWeChat, isUniFrameWork } from '../../../../../../../../utils/env';
+import { isUniFrameWork } from '../../../../../../../../utils/env';
 import { TUITranslateService } from '@tencentcloud/chat-uikit-engine';
-const {  ref} = vue;
+const { ref } = vue;
 export default {
-    components:{
-        Label,
-        Icon
+  components: {
+    Label,
+    Icon
+  },
+  props: {
+    chooseItemList: {
+      type: Array,
+      default: []
     },
-    props:{
-        chooseItemList:{
-            type:Array,
-            default:[]
-        },
-        name:{
-            type:String,
-            default:'',
-        },
-        isRequired:{
-            type:Number,
-            default:0,
-        },
-        validator:{
-            type:Boolean,
-            default:false
-        }
+    name: {
+      type: String,
+      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});
-        }
+    isRequired: {
+      type: Number,
+      default: 0,
+    },
+    validator: {
+      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 clickItem = (index:number) => {
+      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,
-            isUniFrameWork,
-            radioUncheckIcon,
-            radioCheckIcon,
-            changeSelectedIcon,
-            checkedIcon,
-            TUITranslateService
-        }
+    const onInputChanged = ():void => {
+      emit('input-change',{name:props.name,value:selectedOption.value});
+    };
+    return {
+      onInputChanged,
+      selectedOption,
+      clickItem,
+      isUniFrameWork,
+      radioUncheckIcon,
+      radioCheckIcon,
+      changeSelectedIcon,
+      checkedIcon,
+      TUITranslateService
     }
+  }
 }
 </script>
 <style lang="scss">
 .label-container{
-    display:flex;
-    padding:0 16px;
+  display:flex;
+  padding:0 16px;
 }
 .radio-container {
-    display:flex;
-    flex-direction: column;
-    margin-left:16px;
-    
-    width:100%;
+  display:flex;
+  flex-direction: column;
+  margin-left:16px;
+  width:100%;
 }
 
 .form-radio-box-mobile{
-    margin-bottom: 5px;
-    padding:10px 0;
-    border-bottom: 1px solid #e7e7e7;
+  margin-bottom: 5px;
+  padding:10px 0;
+  border-bottom: 1px solid #e7e7e7;
 }
 
 input[type="radio"] {
-    display: none;
-    +label { 
-      position: relative; 
-      cursor: pointer; 
-      &::before { 
-        content: ""; 
-        position: absolute; 
-        left: -24px; 
-        top: 0px;
-        border-radius: 50%;
-        // border: 1px solid #6f686a;
-        width: 20px; 
-        height: 20px;
-        background-image: url('../../../../../../../../assets/radio-uncheck.png');
-        background-size: cover;
-        background-position: center;
-    } 
-    &::after {
+  display: none;
+  +label {
+    position: relative;
+    cursor: pointer;
+    &::before {
       content: "";
       position: absolute;
       left: -24px;
       top: 0px;
       border-radius: 50%;
+      // border: 1px solid #6f686a;
       width: 20px;
       height: 20px;
-      }
-  } 
+      background-image: url('../../../../../../../../assets/radio-uncheck.png');
+      background-size: cover;
+      background-position: center;
+  }
+  &::after {
+    content: "";
+    position: absolute;
+    left: -24px;
+    top: 0px;
+    border-radius: 50%;
+    width: 20px;
+    height: 20px;
+    }
+  }
   &:checked {
     + label::after {
       background-image: url('../../../../../../../../assets/radio-check.png');
@@ -146,18 +145,18 @@ input[type="radio"] {
   }
 }
 
-.radio-container-uni{
-    display:flex;
-    flex-direction: row;
-    width: 100%;
-    align-items: center;
-    .radio-icon-uni {
-        margin-right:5px;
-    }
+.radio-container-uni {
+  display: flex;
+  flex-direction: row;
+  width: 100%;
+  align-items: center;
+  .radio-icon-uni {
+    margin-right:5px;
+  }
 }
 .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/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>