模版编辑新增国家

src/views/Editor/Toolbar/ElementTemplateData.vue

@@ -58,9 +58,46 @@
                 <el-input v-model="titleValue" @blur="handleUpdateTitle()"
                 :placeholder="searchData.TemplateType!=2?'输入模板名称':'输入广告名称'"></el-input>
             </div>
-            <p class="q-mt-md row flex-between items-center">
-                <div><span class="Required q-mr-md">*</span>国家：</div>
-            </p>
+            <div style="position: relative;height: 34px;">
+                <p class="q-mt-md row flex-between items-center">
+                    <div class="row items-center">
+                        <span class="Required q-mr-md">*</span>国家：
+                    </div> 
+                    <el-button size="small" 
+                    class="button-new-tag q-ml-md ml-1" 
+                    @click="setNationShow">
+                        + 国家
+                    </el-button>
+                </p>
+                <div v-if="datas.addNationShow" 
+                        class="ColorsShowBox" @click= "stopPropagation">
+                            <p class="q-mt-md row flex-between">
+                                <span>新增国家：</span>
+                                <span>
+                                    <el-button class="button-new-tag ml-1"
+                                    size="small" @click.stop="CancelAddNation()">
+                                        取消
+                                    </el-button>
+                                    <el-button class="button-new-tag ml-1 q-ml-xs"
+                                    :loading="datas.addNationLoading"
+                                    type="primary"
+                                    size="small" @click="setNation()">
+                                        提交
+                                    </el-button>
+                                </span>
+                            </p>
+                            <div class="row q-mt-md items-center">
+                                <span class="Required q-mr-xs">*</span>
+                                <el-input
+                                    placeholder="国家名称"
+                                    v-model="datas.params.Name"
+                                    class="ml-1 w-20 q-ml-sm"
+                                    size="small"
+                                />
+                            </div>
+                </div>
+            </div>
+            
             <div class="row q-mt-md">
                 <el-select v-model="queryObj.CountryName" filterable class="m-2" placeholder="请选择国家"
                 @change="getCountryId">
@@ -282,6 +319,14 @@
     const { userInfo } = storeToRefs(useUserStore());
 
     const datas = reactive({
+        params: {
+            ID: 0,
+            DictKey: 'Trip_Template_Country',
+            Name: '',
+            Content: '',
+            Code: '',
+            SNO: 0,
+        },
         addEditCountry: {
             CountryId: '',
             CountryName: '',
@@ -302,6 +347,8 @@
             // ColorName: '',
             // Code: ''
         },
+        addNationShow: false,
+        addNationLoading: false,
         addColorsShow: false,
         addColorLoading: false,
         ColorList: [],
@@ -367,6 +414,11 @@
         event.stopPropagation()
     }
 
+    const setNationShow = (event) => {
+        event.stopPropagation()
+        datas.addNationShow=!datas.addNationShow
+    }
+
     const setColorsShow = (event) => {
         event.stopPropagation()
         datas.addColorsShow=!datas.addColorsShow
@@ -383,6 +435,18 @@
         })
     }
 
+    const CancelAddNation = () =>{
+        datas.addNationShow = false
+        datas.params = {
+            ID: 0,
+            DictKey: 'Trip_Template_Country',
+            Name: '',
+            Content: '',
+            Code: '',
+            SNO: 0,
+        }
+    }
+
     const CancelAddColor = () =>{
         datas.addColorsShow = false
         datas.addColor = {
@@ -395,6 +459,39 @@
         }
     }
 
+    const setNation = async () => {
+        if(!datas.params.Name){
+            ElMessage({
+                showClose: true,
+                message: '请输入国家名称',
+                type: 'warning',
+            }) 
+            return
+        }
+        try {
+            datas.addNationLoading = true
+            let dataRes = await ConfigService.SetTemplateConfigData(datas.params)
+            if (dataRes.data.resultCode == 1) {
+                ElMessage({
+                    showClose: true,
+                    message: '新增国家成功',
+                    type: 'success',
+                })
+                GetTemplateConfigDatas()
+                CancelAddNation()
+            }else {
+                ElMessage({
+                    showClose: true,
+                    message: '新增国家失败',
+                    type: 'warning',
+                }) 
+            }
+            datas.addNationLoading = false
+        } catch (error) {
+            datas.addNationLoading = false
+        }
+    }
+    
     const setColor = async () => {
         if(!datas.addColor.Content||!datas.addColor.Name){
             ElMessage({
@@ -431,7 +528,9 @@
                 }) 
             }
             datas.addColorLoading = false
-        } catch (error) {}
+        } catch (error) {
+            datas.addColorLoading = false
+        }
     }
     
 
@@ -676,6 +775,9 @@
             if (datas.addColorsShow) {
                 CancelAddColor()
             }
+            if (datas.addNationShow) {
+                CancelAddNation()
+            }
         });
     })
     onBeforeUnmount(() => {