颜色 分类 及新增

src/components/home/temDesign.vue

@@ -55,7 +55,7 @@ import { reactive, ref, inject, onMounted, watch} from "vue";
 import LineService from '@/services/LineService'
 import ConfigService from '@/services/ConfigService'
 import { useUserStore } from "@/store/user";
-import { useSellTemplateStore } from '@/store'
+import { useSellTemplateStore,useSlidesStore } from '@/store'
 import { useScreenStore } from "@/store/screen";
 import { storeToRefs } from "pinia";
 import { injectKeyTemplate } from '@/types/injectKey'
@@ -72,6 +72,7 @@ import { noDataImg } from "@/utils/common";
 const {
     userInfo
 } = storeToRefs(useUserStore())
+const slidesStore = useSlidesStore()
 const router = useRouter();
 const typeArr = ref([] as Array < any > ); //类型
 const layouts = ref([
@@ -107,7 +108,6 @@ const deleteLoading = ref<any>(null)
 const datas = reactive({
     TemplateBoxRec: null,// 推荐尺寸
     DetailsVisible: false,
-    addVisible: false,
     loading: false,
     ColorValue: '',
     scrollTop: 0,
@@ -211,10 +211,12 @@ const ConfirmCreation = () => {
             })
         }
     }
-    datas.addVisible = false
+    let viewportRatios = 0
     if(datas.TemplateBoxRec&&datas.TemplateBoxRec.Id){
         VIEWPORT_SIZE.value = datas.TemplateBoxRec.width
         VIEWPORT_VER_SIZE.value = datas.TemplateBoxRec.height
+        viewportRatios = datas.TemplateBoxRec.height/datas.TemplateBoxRec.width
+        slidesStore.setViewportRatio(viewportRatios)
         if(datas.TemplateBoxRec.Id==3) {
             datas.TemplateBoxRec = null
             addTemplate(1)
@@ -225,6 +227,8 @@ const ConfirmCreation = () => {
     }else{
         VIEWPORT_SIZE.value = datas.CustomSize.width
         VIEWPORT_VER_SIZE.value = datas.CustomSize.height
+        viewportRatios = datas.CustomSize.height/datas.CustomSize.width
+        slidesStore.setViewportRatio(viewportRatios)
         datas.CustomSize.width = null
         datas.CustomSize.height = null
         addTemplate(2)

src/services/ConfigService.ts

@@ -147,7 +147,7 @@ class ConfigService{
 
     /**
      * 
-     * @returns 获取模板查询条件
+     * @returns 获取模板查询条件 配置项数据(颜色、国家、季节)
      */
     static async GetTemplateQueryAsync():Promise<HttpResponse>{
         return Api.Post("triptemplate_GetTemplateConfigData",{})

src/services/LineService.ts

@@ -6,17 +6,17 @@ class LineService{
     static async RemoveTemplateConfigData(ID : number):Promise<HttpResponse>{
         return Api.Post("triptemplate_RemoveTemplateConfigData",{ID})
     }
-    // 根据ke新增编辑配置
-    static async SetTemplateConfigData(params : any):Promise<HttpResponse>{
-        return Api.Post("triptemplate_SetTemplateConfigData",params)
+    // 批量设置颜色分类
+    static async BatchSetColor(params : any):Promise<HttpResponse>{
+        return Api.Post("triptemplate_BatchSetColor",params)
     }
     // 获取配置项数据(颜色、国家、季节) Trip_Template_Color Trip_Template_Country Trip_Template_Season
     static async GetTemplateConfigDataList(params : any):Promise<HttpResponse>{
         return Api.Post("triptemplate_GetTemplateConfigDataList",params)
     }
-    // 获取配置项数据(颜色、国家、季节)
-    static async GetTemplateConfigData(params : any):Promise<HttpResponse>{
-        return Api.Post("triptemplate_GetTemplateConfigData",params)
+    // 获取颜色
+    static async GetParentColor(params : any):Promise<HttpResponse>{
+        return Api.Post("triptemplate_GetParentColor",params)
     }
 
     // 系列

src/views/Editor/Toolbar/ElementTemplateData.vue

@@ -157,7 +157,8 @@
                 </el-button> -->
             </p>
             <div class="row q-mt-md">
-                <el-select v-model="queryObj.ColorId" placeholder="请选择分类">
+                <el-select v-model="queryColor.Code" placeholder="请选择分类"
+                @change="getColor(1)">
                     <el-option
                         key=""
                         label="不限"
@@ -165,28 +166,26 @@
                     />
                     <el-option
                         v-for="item in ColorList"
-                        :key="item.Id"
-                        :label="`${item.ColorName}`"
-                        :value="item.Id"
+                        :key="item.ID"
+                        :label="`${item.Name}`"
+                        :value="item.ID"
                     />
                 </el-select>
                 <el-select class="q-pl-sm" v-model="queryObj.ColorStr" filterable placeholder="请选择颜色"
                     @change="setCountryValue">
                     <el-option
-                        v-for="item in dispositionObj.ColorList"
-                        :key="item.ColorValue"
-                        :label="`${item.ColorName}${item.ColorValue}`"
-                        :value="item.ColorValue"
+                        v-for="item in datas.ColorList"
+                        :key="item.Content"
+                        :label="`${item.Content}`"
+                        :value="item.Content"
                         
                     >
                     <template #default>
                         <el-tag
-                        :color="item.ColorValue"
-                        effect="dark" class="q-mr-md">
-                        {{ item.label }}
-                        </el-tag>
-                        <span>{{item.ColorName}}</span>
-                        <span class="q-ml-md">{{item.ColorValue}}</span>
+                        :color="item.Content"
+                        effect="dark" class="q-mr-md"></el-tag>
+                        <span>{{item.Name}}</span>
+                        <span class="q-ml-md">{{item.Content}}</span>
                     </template>
                     </el-option>
                 </el-select>
@@ -222,10 +221,10 @@
                             value=""
                         />
                         <el-option
-                            v-for="item in ColorList"
-                            :key="item.Id"
-                            :label="`${item.ColorName}`"
-                            :value="item.Id"
+                            v-for="item in datas.ColorList"
+                            :key="item.ID"
+                            :label="`${item.Name}`"
+                            :value="item.ID"
                         />
                     </el-select>
                     <span class="Required q-ma-xs">*</span>
@@ -309,6 +308,7 @@
             ColorValue: '',
             ColorName: '',
         },
+        ColorList: [],
         EditAddType: 0,//0新增 1编辑
         addEditLoading: false,
         EditAddShow: false,
@@ -318,13 +318,21 @@
     })
     const dispositionObj = ref({} as any)
     const queryObj = ref({} as any)
+    const queryColor = ref({
+        DictKey: 'Trip_Template_Color',
+        Code: '',
+    })
+    const queryColors = ref({
+        DictKey: 'Trip_Template_Color',
+        Name: queryObj.value.ColorName,
+    })
     const searchData = ref({} as any)
     datas.DataSource = inject(injectKeyDataSource)
     queryObj.value = inject(injectKeyDataSource).queryObj
     searchData.value = inject(injectKeyTemplate)
     const lines = ref([] as Array < any > ) //线路
     const Series = ref([] as Array < any > ) //系列
-    const ColorList = DominantColour()
+    const ColorList = ref([] as Array < any > ) //DominantColour()
 
     const cursors = [] as Array<any>
 
@@ -648,16 +656,40 @@
      */
      const GetTemplateConfigDatas = async () => {
         try {
-            let response = await LineService.GetTemplateConfigData()
+            let response = await ConfigService.GetTemplateQueryAsync()
             if (response.data.resultCode == 1) {
                 dispositionObj.value = response.data.data;
                 getCountryId()
             }
+            
         } catch (error) {
         }
     }
+    const getColor = async (type:Number) => {
+        if(type==1&&!queryColor.Code) {
+            queryObj.value.ColorName = ''
+            queryObj.value.ColorStr = ''
+        }
+        let response = await LineService.GetParentColor(queryColor.value)
+        if (response.data.resultCode == 1) {
+            if(type==0) ColorList.value = response.data.data
+            else datas.ColorList = response.data.data;
+        }
+    }
+    const GetTemplateColors = async () => {
+        let pageRes = await LineService.GetTemplateConfigDataList(queryColors.value);
+        let colorArr = pageRes.data.data
+        for(let i=0;i<colorArr.length;i++){
+            if(colorArr[i].Content==queryObj.value.ColorStr) {
+                queryColor.value.Code = Number(colorArr[i].Code)
+                getColor()
+            }
+        }
+    }
     GetTemplateConfigDatas()
     getLinesHandler()
+    getColor(0)
+    GetTemplateColors()
   </script>
   
   <style lang="scss" scoped>

src/views/Market/Index.vue

@@ -47,7 +47,7 @@
                             
                         </div>
                         <div class="row wrap q-pt-sm ">
-                            <el-check-tag :checked="queryObj.CountryName == ''" @change="onCountryNameChangeHandler('')">通用</el-check-tag>
+                            <el-check-tag :checked="queryObj.CountryList.length==0" @change="onCountryNameChangeHandler('')">通用</el-check-tag>
                             <el-check-tag :checked="x.checked"
                                 @change="onCountryNameChangeHandler(x)" class="text-small"
                                 v-for="(x,i) in countries" :key="i">{{x.CountryName}}</el-check-tag>
@@ -61,7 +61,7 @@
                             <el-button color="#FFF" class="opacity0"><span></span></el-button>
                         </div>
                         <div class="row wrap q-pt-sm">
-                            <el-check-tag :checked="queryObj.SeasonName == ''" @change="onSeasonNameChangeHandler('')"
+                            <el-check-tag :checked="queryObj.SeasonList.length==0" @change="onSeasonNameChangeHandler('')"
                                 class="text-small">四季</el-check-tag>
                             <el-check-tag v-for="(x,i) in seasonArr" :checked="x.checked" @change="onSeasonNameChangeHandler(x)"
                             class="text-small" :key="i">{{x.SeasonName}}</el-check-tag>
@@ -107,19 +107,19 @@
                                     <div class="marketTag-color text-small pointer" @click="onColorNameChangeHandler('')">
                                         <span class="colorMark"
                                         :style="{'background': 'conic-gradient(from 90deg at 51.03303% 50.931181%, #E43939, #F79A2C, #FFF60B, #39CAE4, #7A39E4)',
-                                        'border-color':queryObj.ColorName==''?'black':'#eee'}"></span>
+                                        'border-color':queryObj.ColorList.length==0?'black':'#eee'}"></span>
                                     </div>
                                 </el-tooltip>
-                                <template v-for="(x,i) in colorArr" :key="i">
+                                <template v-for="(x,i) in ColorList" :key="i">
                                     <el-tooltip
                                         class="box-item"
                                         effect="dark"
-                                        :content="x.ColorName"
+                                        :content="x.Name"
                                         placement="bottom"
                                     >
                                         <div class="marketTag-color text-small pointer" @click="onColorNameChangeHandler(x)">
                                             <span class="colorMark"
-                                            :style="{'background':x.ColorValue,'border-color':x.checked?'black':'#eee'}"></span>
+                                            :style="{'background':x.Content,'border-color':x.checked?'black':'#eee'}"></span>
                                         </div>
                                     </el-tooltip>
                                 </template>
@@ -291,20 +291,22 @@ const queryObj = reactive({
     pageSize: 20,
     LineId: 0, //线路Id
     Title: '', //模板名称
-    CountryName: '', //国家名称
-    SeasonName: '', //季节名称
-    ColorName: '', //颜色名称
-    CountryNames: [], //国家名称
-    SeasonNames: [], //季节名称
-    ColorNames:  [], //颜色名称
+    TagJsonStr: '',
+    CountryList: [], //国家名称
+    SeasonList: [], //季节名称
+    ColorList:  [], //颜色名称
     pageCount: 0, //总页数
     TempType: 0,
     TemplateType: TemplateType,//0 不限 1模版 2广告
     type: 0,
     sort: 0,//排序方式
 })
+const queryColor = ref({
+    DictKey: 'Trip_Template_Color',
+    Code: '',
+})
 
-const ColorList = DominantColour()
+const ColorList = ref([]) //DominantColour()
 
 // 版型 横版 竖版
 const SwitchingVersion = (row: Object) =>{
@@ -417,8 +419,7 @@ const onLineChangeHandler = (lineId: number) => {
 //国家切换
 const onCountryNameChangeHandler = (row: Object) => {
     if(row=='') {
-        queryObj.CountryName = ''
-        queryObj.CountryNames = []
+        queryObj.CountryList = []
         countriesOther.value.forEach(x=>{
             x.checked = false
         })
@@ -426,17 +427,15 @@ const onCountryNameChangeHandler = (row: Object) => {
             x.checked = false
         })
     }else{
-        queryObj.CountryName = row.CountryName;
         if(!row.checked) {
             row.checked = true
-            queryObj.CountryNames.push(row.CountryName)
+            queryObj.CountryList.push(row.CountryName)
         }else{
             row.checked = false
-            let list = queryObj.CountryNames.filter(x=>{
+            let list = queryObj.CountryList.filter(x=>{
                 if(x!=row.CountryName) return x
             })
-            queryObj.CountryNames = list
-            if(queryObj.CountryNames.length==0) queryObj.CountryName = ''
+            queryObj.CountryList = list
         }
     }
     search()
@@ -445,29 +444,20 @@ const onCountryNameChangeHandler = (row: Object) => {
 //季节切换
 const onSeasonNameChangeHandler = (row: Object) => {
     if(row=='') {
-        queryObj.SeasonName = ''
-        queryObj.SeasonNames = []
+        queryObj.SeasonList = []
         seasonArr.value.forEach(x=>{
             x.checked = false
         })
     }else{
-        queryObj.SeasonName = row.SeasonName;
         if(!row.checked) {
             row.checked = true
-            queryObj.SeasonNames.push(row.SeasonName)
-            // if(queryObj.SeasonNames.length==4) {
-            //     queryObj.SeasonName = ''
-            //     seasonArr.value.forEach(x=>{
-            //         x.checked = false
-            //     })
-            // }
+            queryObj.SeasonList.push(row.SeasonName)
         }else{
             row.checked = false
-            let list = queryObj.SeasonNames.filter(x=>{
+            let list = queryObj.SeasonList.filter(x=>{
                 if(x!=row.SeasonName) return x
             })
-            queryObj.SeasonNames = list
-            if(queryObj.SeasonNames.length==0) queryObj.SeasonName = ''
+            queryObj.SeasonList = list
         }
     }
     search()
@@ -487,23 +477,20 @@ const onTypeChangeHandler = (Type: string,num: Number) => {
 //颜色切换
 const onColorNameChangeHandler = (row: Object) => {
     if(row=='') {
-        queryObj.ColorName = ''
-        queryObj.ColorNames = []
+        queryObj.ColorList = []
         colorArr.value.forEach(x=>{
             x.checked = false
         })
     }else{
-        queryObj.ColorName = row.ColorName;
         if(!row.checked) {
             row.checked = true
-            queryObj.ColorNames.push(row.ColorName)
+            queryObj.ColorList.push(row.Name)
         }else{
             row.checked = false
-            let list = queryObj.ColorNames.filter(x=>{
-                if(x!=row.ColorName) return x
+            let list = queryObj.ColorList.filter(x=>{
+                if(x!=row.Name) return x
             })
-            queryObj.ColorNames = list
-            if(queryObj.ColorNames.length==0) queryObj.ColorName = ''
+            queryObj.ColorList = list
         }
     }
     search()
@@ -555,6 +542,7 @@ const getTemplateQuery = async () => {
                         ColorName: ColorList[i].ColorName,
                         ColorValue: ColorList[i].ColorValue,
                         checked: false,
+                        ID: ColorList[i].Id
                     })
                 }
                 // arrList(tempData.ColorList)
@@ -608,6 +596,14 @@ const scrollingHandler = () =>{
     
 }
 
+const getColor = async () => {
+    let response = await LineService.GetParentColor(queryColor.value)
+    if (response.data.resultCode == 1) {
+        ColorList.value = response.data.data
+    }
+}
+
+getColor()
 getLinesHandler();
 getTemplateQuery();
 queryTemplateBySearchHandler();

src/views/TemplateCenter/Index.vue

@@ -4,13 +4,13 @@
           <div class="row wrap">
             <div class="row items-center q-mb-lg">
                 <span class="fz14 q-pr-sm shrink">关键字:</span>
-                <el-input style="width:212px" v-model="queryObj.Title" placeholder="请输入关键字" clearable
+                <el-input style="max-width:212px" v-model="queryObj.Title" placeholder="请输入关键字" clearable
                 @keyup.enter="search"></el-input>
             </div>
             <div class="row items-center q-mb-lg">
                 <span class="fz14 q-pr-sm shrink">&nbsp;&nbsp;模版:</span>
                 <el-select v-model="queryObj.TemplateType" 
-                    class="ml-1 shrink"
+                    class="ml-1 shrink TemSel"
                     placeholder="模版类型" clearable>
                         <el-option
                             v-for="item in typeArr"
@@ -23,7 +23,7 @@
             <div class="row items-center q-mb-lg">
                 <span class="fz14 q-pr-sm shrink">&nbsp;&nbsp;&nbsp;版型:</span>
                 <el-select v-model="queryObj.TempType" 
-                    class="ml-1 shrink"
+                    class="ml-1 shrink TemSel"
                     placeholder="版型" clearable>
                         <el-option
                             v-for="item in layouts"
@@ -33,17 +33,45 @@
                         />
                 </el-select>
             </div>
+            <div class="row items-center q-mb-lg">
+                <span class="fz14 q-pr-sm shrink">&nbsp;&nbsp;国家:</span>
+                <el-select v-model="queryObj.CountryList" multiple
+                    class="ml-1 shrink TemSel"
+                    placeholder="国家" clearable>
+                        <el-option key="" label="不限" value=""/>
+                        <el-option
+                            v-for="item in countries"
+                            :key="item.CountryName"
+                            :label="`${item.CountryName}`"
+                            :value="item.CountryName"
+                        />
+                </el-select>
+            </div>
+            <div class="row items-center q-mb-lg">
+                <span class="fz14 q-pr-sm shrink">&nbsp;&nbsp;季节:</span>
+                <el-select v-model="queryObj.SeasonList" multiple
+                    class="ml-1 shrink TemSel"
+                    placeholder="季节" clearable>
+                        <el-option key="" label="四季" value=""/>
+                        <el-option
+                            v-for="item in seasonArr"
+                            :key="item.SeasonName"
+                            :label="`${item.SeasonName}`"
+                            :value="item.SeasonName"
+                        />
+                </el-select>
+            </div>
             <div class="row items-center q-mb-lg">
                 <span class="fz14 q-pr-sm shrink">&nbsp;&nbsp;颜色:</span>
-                <el-select v-model="queryObj.ColorName" 
-                    class="ml-1 shrink"
+                <el-select v-model="queryObj.ColorList" multiple
+                    class="ml-1 shrink TemSel"
                     placeholder="颜色" clearable>
                         <el-option key="" label="不限" value=""/>
                         <el-option
                             v-for="item in ColorList"
-                            :key="item.ColorName"
-                            :label="`${item.ColorName}`"
-                            :value="item.ColorName"
+                            :key="item.ID"
+                            :label="`${item.Name}`"
+                            :value="item.Name"
                         />
                 </el-select>
             </div>
@@ -234,8 +262,12 @@ const queryObj = reactive({
   type: 0,
   sort: 0,//排序方式
 })
+const queryColor = ref({
+    DictKey: 'Trip_Template_Color',
+    Code: '',
+})
 const setTemplateType = ref(1)
-const ColorList = DominantColour()
+const ColorList =  ref([])//DominantColour()
 
 const tableScrollHandler = ()=>{
     if(queryObj.pageCount>queryObj.pageIndex){
@@ -568,34 +600,17 @@ const getTemplateQuery = async () => {
           }
           //国家
           if (tempData && tempData.CountryList) {
-              arrList(tempData.CountryList)
-              countriesOther.value = tempData.CountryList.filter((x,index)=>{ 
-                  if(model.value==1){ return index>=12 }
-                  else return index>=13
-              })
-              countries.value = tempData.CountryList.filter((x,index)=>{ 
-                  if(model.value==1) {return index<12}
-                  else return index<13
-              })
+            countries.value = tempData.CountryList
           }
           //颜色
           if (tempData && tempData.ColorList) {
-              for(let i=0;i<ColorList.length;i++){
-                  colorArr.value.push({
-                      ColorName: ColorList[i].ColorName,
-                      ColorValue: ColorList[i].ColorValue,
-                      checked: false,
-                  })
-              }
-              // arrList(tempData.ColorList)
-              // colorArrOther.value = tempData.ColorList.filter((x,index)=>{ 
-              //     if(model.value==1){ return index>=15 }
-              //     else return index>=14
-              // })
-              // colorArr.value = tempData.ColorList.filter((x,index)=>{ 
-              //     if(model.value==1){ return index<14 }
-              //     else return index<14
-              // })
+            //   for(let i=0;i<ColorList.length;i++){
+            //       colorArr.value.push({
+            //           ColorName: ColorList[i].ColorName,
+            //           ColorValue: ColorList[i].ColorValue,
+            //           checked: false,
+            //       })
+            //   }
           }
           //季节
           if (tempData && tempData.SeasonList) {
@@ -638,6 +653,14 @@ const scrollingHandler = () =>{
   
 }
 
+const getColor = async () => {
+    let response = await LineService.GetParentColor(queryColor.value)
+    if (response.data.resultCode == 1) {
+        ColorList.value = response.data.data
+    }
+}
+
+getColor()
 getLinesHandler();
 getTemplateQuery();
 queryTemplateBySearchHandler();
@@ -1104,4 +1127,7 @@ onMounted(()=>{
       height: 42px;
       line-height: 42px;
   }
+  .TemSel{
+    width: 120px;
+  }
 </style>
\ No newline at end of file

src/views/TemplateCenter/font.vue

 <template>
     <div class="row items-center flex-between q-mb-lg">
       <div></div>
-      <el-input style="width:600px" v-model="queryObj.keyWords" placeholder="请输入关键字" class="q-pr-33" clearable
+      <el-input style="max-width:600px" v-model="queryObj.keyWords" placeholder="请输入关键字" class="q-pr-33" clearable
       @keyup.enter="search">
         <template #append>
           <div class="Market-select-line absolute"></div>

src/views/TemplateCenter/nation.vue

 <template>
     <div class="row items-center flex-between q-mb-lg">
       <div></div>
-      <el-input style="width:600px" v-model="queryObj.Name" placeholder="请输入关键字" class="q-pr-33" clearable
+      <el-input style="max-width:600px" v-model="queryObj.Name" placeholder="请输入关键字" class="q-pr-33" clearable
       @keyup.enter="search">
         <template #append>
           <div class="Market-select-line absolute"></div>
@@ -11,7 +11,7 @@
           </div>
         </template>
       </el-input>
-      <el-button type="primary" size="default" style="color: #ffff;" @click="addFont">
+      <el-button type="primary" size="default" style="color: #ffff;" @click="addNation">
         新增国家
       </el-button>
     </div>
@@ -121,7 +121,7 @@
                 type: 'warning',
             }) 
       datas.requestLoading = true
-      const result = await LineService.SetTemplateConfigData(datas.params)
+      const result = await ConfigService.SetTemplateConfigData(datas.params)
       if(result){
         datas.addEditVisible = false
         datas.requestLoading = false
@@ -134,7 +134,7 @@
           datas.requestLoading = false
       }
     }
-    const addFont = () => {
+    const addNation = () => {
       datas.addEditVisible = true
     }
     const editDelete = (item: Object,index: Number) => {