Commit 369174a7 authored by 罗超's avatar 罗超

Merge branch 'router' of http://gitlab.oytour.com/viitto/pptist into router

parents 91566d89 eca7030a
...@@ -55,7 +55,7 @@ import { reactive, ref, inject, onMounted, watch} from "vue"; ...@@ -55,7 +55,7 @@ import { reactive, ref, inject, onMounted, watch} from "vue";
import LineService from '@/services/LineService' import LineService from '@/services/LineService'
import ConfigService from '@/services/ConfigService' import ConfigService from '@/services/ConfigService'
import { useUserStore } from "@/store/user"; import { useUserStore } from "@/store/user";
import { useSellTemplateStore } from '@/store' import { useSellTemplateStore,useSlidesStore } from '@/store'
import { useScreenStore } from "@/store/screen"; import { useScreenStore } from "@/store/screen";
import { storeToRefs } from "pinia"; import { storeToRefs } from "pinia";
import { injectKeyTemplate } from '@/types/injectKey' import { injectKeyTemplate } from '@/types/injectKey'
...@@ -72,6 +72,7 @@ import { noDataImg } from "@/utils/common"; ...@@ -72,6 +72,7 @@ import { noDataImg } from "@/utils/common";
const { const {
userInfo userInfo
} = storeToRefs(useUserStore()) } = storeToRefs(useUserStore())
const slidesStore = useSlidesStore()
const router = useRouter(); const router = useRouter();
const typeArr = ref([] as Array < any > ); //类型 const typeArr = ref([] as Array < any > ); //类型
const layouts = ref([ const layouts = ref([
...@@ -107,7 +108,6 @@ const deleteLoading = ref<any>(null) ...@@ -107,7 +108,6 @@ const deleteLoading = ref<any>(null)
const datas = reactive({ const datas = reactive({
TemplateBoxRec: null,// 推荐尺寸 TemplateBoxRec: null,// 推荐尺寸
DetailsVisible: false, DetailsVisible: false,
addVisible: false,
loading: false, loading: false,
ColorValue: '', ColorValue: '',
scrollTop: 0, scrollTop: 0,
...@@ -211,10 +211,12 @@ const ConfirmCreation = () => { ...@@ -211,10 +211,12 @@ const ConfirmCreation = () => {
}) })
} }
} }
datas.addVisible = false let viewportRatios = 0
if(datas.TemplateBoxRec&&datas.TemplateBoxRec.Id){ if(datas.TemplateBoxRec&&datas.TemplateBoxRec.Id){
VIEWPORT_SIZE.value = datas.TemplateBoxRec.width VIEWPORT_SIZE.value = datas.TemplateBoxRec.width
VIEWPORT_VER_SIZE.value = datas.TemplateBoxRec.height VIEWPORT_VER_SIZE.value = datas.TemplateBoxRec.height
viewportRatios = datas.TemplateBoxRec.height/datas.TemplateBoxRec.width
slidesStore.setViewportRatio(viewportRatios)
if(datas.TemplateBoxRec.Id==3) { if(datas.TemplateBoxRec.Id==3) {
datas.TemplateBoxRec = null datas.TemplateBoxRec = null
addTemplate(1) addTemplate(1)
...@@ -225,6 +227,8 @@ const ConfirmCreation = () => { ...@@ -225,6 +227,8 @@ const ConfirmCreation = () => {
}else{ }else{
VIEWPORT_SIZE.value = datas.CustomSize.width VIEWPORT_SIZE.value = datas.CustomSize.width
VIEWPORT_VER_SIZE.value = datas.CustomSize.height VIEWPORT_VER_SIZE.value = datas.CustomSize.height
viewportRatios = datas.CustomSize.height/datas.CustomSize.width
slidesStore.setViewportRatio(viewportRatios)
datas.CustomSize.width = null datas.CustomSize.width = null
datas.CustomSize.height = null datas.CustomSize.height = null
addTemplate(2) addTemplate(2)
......
...@@ -147,7 +147,7 @@ class ConfigService{ ...@@ -147,7 +147,7 @@ class ConfigService{
/** /**
* *
* @returns 获取模板查询条件 * @returns 获取模板查询条件 配置项数据(颜色、国家、季节)
*/ */
static async GetTemplateQueryAsync():Promise<HttpResponse>{ static async GetTemplateQueryAsync():Promise<HttpResponse>{
return Api.Post("triptemplate_GetTemplateConfigData",{}) return Api.Post("triptemplate_GetTemplateConfigData",{})
......
...@@ -6,17 +6,17 @@ class LineService{ ...@@ -6,17 +6,17 @@ class LineService{
static async RemoveTemplateConfigData(ID : number):Promise<HttpResponse>{ static async RemoveTemplateConfigData(ID : number):Promise<HttpResponse>{
return Api.Post("triptemplate_RemoveTemplateConfigData",{ID}) return Api.Post("triptemplate_RemoveTemplateConfigData",{ID})
} }
// 根据ke新增编辑配置 // 批量设置颜色分类
static async SetTemplateConfigData(params : any):Promise<HttpResponse>{ static async BatchSetColor(params : any):Promise<HttpResponse>{
return Api.Post("triptemplate_SetTemplateConfigData",params) return Api.Post("triptemplate_BatchSetColor",params)
} }
// 获取配置项数据(颜色、国家、季节) Trip_Template_Color Trip_Template_Country Trip_Template_Season // 获取配置项数据(颜色、国家、季节) Trip_Template_Color Trip_Template_Country Trip_Template_Season
static async GetTemplateConfigDataList(params : any):Promise<HttpResponse>{ static async GetTemplateConfigDataList(params : any):Promise<HttpResponse>{
return Api.Post("triptemplate_GetTemplateConfigDataList",params) return Api.Post("triptemplate_GetTemplateConfigDataList",params)
} }
// 获取配置项数据(颜色、国家、季节) // 获取颜色
static async GetTemplateConfigData(params : any):Promise<HttpResponse>{ static async GetParentColor(params : any):Promise<HttpResponse>{
return Api.Post("triptemplate_GetTemplateConfigData",params) return Api.Post("triptemplate_GetParentColor",params)
} }
// 系列 // 系列
......
...@@ -157,7 +157,8 @@ ...@@ -157,7 +157,8 @@
</el-button> --> </el-button> -->
</p> </p>
<div class="row q-mt-md"> <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 <el-option
key="" key=""
label="不限" label="不限"
...@@ -165,28 +166,26 @@ ...@@ -165,28 +166,26 @@
/> />
<el-option <el-option
v-for="item in ColorList" v-for="item in ColorList"
:key="item.Id" :key="item.ID"
:label="`${item.ColorName}`" :label="`${item.Name}`"
:value="item.Id" :value="item.ID"
/> />
</el-select> </el-select>
<el-select class="q-pl-sm" v-model="queryObj.ColorStr" filterable placeholder="请选择颜色" <el-select class="q-pl-sm" v-model="queryObj.ColorStr" filterable placeholder="请选择颜色"
@change="setCountryValue"> @change="setCountryValue">
<el-option <el-option
v-for="item in dispositionObj.ColorList" v-for="item in datas.ColorList"
:key="item.ColorValue" :key="item.Content"
:label="`${item.ColorName}${item.ColorValue}`" :label="`${item.Content}`"
:value="item.ColorValue" :value="item.Content"
> >
<template #default> <template #default>
<el-tag <el-tag
:color="item.ColorValue" :color="item.Content"
effect="dark" class="q-mr-md"> effect="dark" class="q-mr-md"></el-tag>
{{ item.label }} <span>{{item.Name}}</span>
</el-tag> <span class="q-ml-md">{{item.Content}}</span>
<span>{{item.ColorName}}</span>
<span class="q-ml-md">{{item.ColorValue}}</span>
</template> </template>
</el-option> </el-option>
</el-select> </el-select>
...@@ -222,10 +221,10 @@ ...@@ -222,10 +221,10 @@
value="" value=""
/> />
<el-option <el-option
v-for="item in ColorList" v-for="item in datas.ColorList"
:key="item.Id" :key="item.ID"
:label="`${item.ColorName}`" :label="`${item.Name}`"
:value="item.Id" :value="item.ID"
/> />
</el-select> </el-select>
<span class="Required q-ma-xs">*</span> <span class="Required q-ma-xs">*</span>
...@@ -309,6 +308,7 @@ ...@@ -309,6 +308,7 @@
ColorValue: '', ColorValue: '',
ColorName: '', ColorName: '',
}, },
ColorList: [],
EditAddType: 0,//0新增 1编辑 EditAddType: 0,//0新增 1编辑
addEditLoading: false, addEditLoading: false,
EditAddShow: false, EditAddShow: false,
...@@ -318,13 +318,21 @@ ...@@ -318,13 +318,21 @@
}) })
const dispositionObj = ref({} as any) const dispositionObj = ref({} as any)
const queryObj = 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) const searchData = ref({} as any)
datas.DataSource = inject(injectKeyDataSource) datas.DataSource = inject(injectKeyDataSource)
queryObj.value = inject(injectKeyDataSource).queryObj queryObj.value = inject(injectKeyDataSource).queryObj
searchData.value = inject(injectKeyTemplate) searchData.value = inject(injectKeyTemplate)
const lines = ref([] as Array < any > ) //线路 const lines = ref([] as Array < any > ) //线路
const Series = 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> const cursors = [] as Array<any>
...@@ -648,16 +656,40 @@ ...@@ -648,16 +656,40 @@
*/ */
const GetTemplateConfigDatas = async () => { const GetTemplateConfigDatas = async () => {
try { try {
let response = await LineService.GetTemplateConfigData() let response = await ConfigService.GetTemplateQueryAsync()
if (response.data.resultCode == 1) { if (response.data.resultCode == 1) {
dispositionObj.value = response.data.data; dispositionObj.value = response.data.data;
getCountryId() getCountryId()
} }
} catch (error) { } 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() GetTemplateConfigDatas()
getLinesHandler() getLinesHandler()
getColor(0)
GetTemplateColors()
</script> </script>
<style lang="scss" scoped> <style lang="scss" scoped>
......
...@@ -47,7 +47,7 @@ ...@@ -47,7 +47,7 @@
</div> </div>
<div class="row wrap q-pt-sm "> <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" <el-check-tag :checked="x.checked"
@change="onCountryNameChangeHandler(x)" class="text-small" @change="onCountryNameChangeHandler(x)" class="text-small"
v-for="(x,i) in countries" :key="i">{{x.CountryName}}</el-check-tag> v-for="(x,i) in countries" :key="i">{{x.CountryName}}</el-check-tag>
...@@ -61,7 +61,7 @@ ...@@ -61,7 +61,7 @@
<el-button color="#FFF" class="opacity0"><span></span></el-button> <el-button color="#FFF" class="opacity0"><span></span></el-button>
</div> </div>
<div class="row wrap q-pt-sm"> <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> class="text-small">四季</el-check-tag>
<el-check-tag v-for="(x,i) in seasonArr" :checked="x.checked" @change="onSeasonNameChangeHandler(x)" <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> class="text-small" :key="i">{{x.SeasonName}}</el-check-tag>
...@@ -107,19 +107,19 @@ ...@@ -107,19 +107,19 @@
<div class="marketTag-color text-small pointer" @click="onColorNameChangeHandler('')"> <div class="marketTag-color text-small pointer" @click="onColorNameChangeHandler('')">
<span class="colorMark" <span class="colorMark"
:style="{'background': 'conic-gradient(from 90deg at 51.03303% 50.931181%, #E43939, #F79A2C, #FFF60B, #39CAE4, #7A39E4)', :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> </div>
</el-tooltip> </el-tooltip>
<template v-for="(x,i) in colorArr" :key="i"> <template v-for="(x,i) in ColorList" :key="i">
<el-tooltip <el-tooltip
class="box-item" class="box-item"
effect="dark" effect="dark"
:content="x.ColorName" :content="x.Name"
placement="bottom" placement="bottom"
> >
<div class="marketTag-color text-small pointer" @click="onColorNameChangeHandler(x)"> <div class="marketTag-color text-small pointer" @click="onColorNameChangeHandler(x)">
<span class="colorMark" <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> </div>
</el-tooltip> </el-tooltip>
</template> </template>
...@@ -291,20 +291,22 @@ const queryObj = reactive({ ...@@ -291,20 +291,22 @@ const queryObj = reactive({
pageSize: 20, pageSize: 20,
LineId: 0, //线路Id LineId: 0, //线路Id
Title: '', //模板名称 Title: '', //模板名称
CountryName: '', //国家名称 TagJsonStr: '',
SeasonName: '', //季节名称 CountryList: [], //国家名称
ColorName: '', //颜色名称 SeasonList: [], //季节名称
CountryNames: [], //国家名称 ColorList: [], //颜色名称
SeasonNames: [], //季节名称
ColorNames: [], //颜色名称
pageCount: 0, //总页数 pageCount: 0, //总页数
TempType: 0, TempType: 0,
TemplateType: TemplateType,//0 不限 1模版 2广告 TemplateType: TemplateType,//0 不限 1模版 2广告
type: 0, type: 0,
sort: 0,//排序方式 sort: 0,//排序方式
}) })
const queryColor = ref({
DictKey: 'Trip_Template_Color',
Code: '',
})
const ColorList = DominantColour() const ColorList = ref([]) //DominantColour()
// 版型 横版 竖版 // 版型 横版 竖版
const SwitchingVersion = (row: Object) =>{ const SwitchingVersion = (row: Object) =>{
...@@ -417,8 +419,7 @@ const onLineChangeHandler = (lineId: number) => { ...@@ -417,8 +419,7 @@ const onLineChangeHandler = (lineId: number) => {
//国家切换 //国家切换
const onCountryNameChangeHandler = (row: Object) => { const onCountryNameChangeHandler = (row: Object) => {
if(row=='') { if(row=='') {
queryObj.CountryName = '' queryObj.CountryList = []
queryObj.CountryNames = []
countriesOther.value.forEach(x=>{ countriesOther.value.forEach(x=>{
x.checked = false x.checked = false
}) })
...@@ -426,17 +427,15 @@ const onCountryNameChangeHandler = (row: Object) => { ...@@ -426,17 +427,15 @@ const onCountryNameChangeHandler = (row: Object) => {
x.checked = false x.checked = false
}) })
}else{ }else{
queryObj.CountryName = row.CountryName;
if(!row.checked) { if(!row.checked) {
row.checked = true row.checked = true
queryObj.CountryNames.push(row.CountryName) queryObj.CountryList.push(row.CountryName)
}else{ }else{
row.checked = false row.checked = false
let list = queryObj.CountryNames.filter(x=>{ let list = queryObj.CountryList.filter(x=>{
if(x!=row.CountryName) return x if(x!=row.CountryName) return x
}) })
queryObj.CountryNames = list queryObj.CountryList = list
if(queryObj.CountryNames.length==0) queryObj.CountryName = ''
} }
} }
search() search()
...@@ -445,29 +444,20 @@ const onCountryNameChangeHandler = (row: Object) => { ...@@ -445,29 +444,20 @@ const onCountryNameChangeHandler = (row: Object) => {
//季节切换 //季节切换
const onSeasonNameChangeHandler = (row: Object) => { const onSeasonNameChangeHandler = (row: Object) => {
if(row=='') { if(row=='') {
queryObj.SeasonName = '' queryObj.SeasonList = []
queryObj.SeasonNames = []
seasonArr.value.forEach(x=>{ seasonArr.value.forEach(x=>{
x.checked = false x.checked = false
}) })
}else{ }else{
queryObj.SeasonName = row.SeasonName;
if(!row.checked) { if(!row.checked) {
row.checked = true row.checked = true
queryObj.SeasonNames.push(row.SeasonName) queryObj.SeasonList.push(row.SeasonName)
// if(queryObj.SeasonNames.length==4) {
// queryObj.SeasonName = ''
// seasonArr.value.forEach(x=>{
// x.checked = false
// })
// }
}else{ }else{
row.checked = false row.checked = false
let list = queryObj.SeasonNames.filter(x=>{ let list = queryObj.SeasonList.filter(x=>{
if(x!=row.SeasonName) return x if(x!=row.SeasonName) return x
}) })
queryObj.SeasonNames = list queryObj.SeasonList = list
if(queryObj.SeasonNames.length==0) queryObj.SeasonName = ''
} }
} }
search() search()
...@@ -487,23 +477,20 @@ const onTypeChangeHandler = (Type: string,num: Number) => { ...@@ -487,23 +477,20 @@ const onTypeChangeHandler = (Type: string,num: Number) => {
//颜色切换 //颜色切换
const onColorNameChangeHandler = (row: Object) => { const onColorNameChangeHandler = (row: Object) => {
if(row=='') { if(row=='') {
queryObj.ColorName = '' queryObj.ColorList = []
queryObj.ColorNames = []
colorArr.value.forEach(x=>{ colorArr.value.forEach(x=>{
x.checked = false x.checked = false
}) })
}else{ }else{
queryObj.ColorName = row.ColorName;
if(!row.checked) { if(!row.checked) {
row.checked = true row.checked = true
queryObj.ColorNames.push(row.ColorName) queryObj.ColorList.push(row.Name)
}else{ }else{
row.checked = false row.checked = false
let list = queryObj.ColorNames.filter(x=>{ let list = queryObj.ColorList.filter(x=>{
if(x!=row.ColorName) return x if(x!=row.Name) return x
}) })
queryObj.ColorNames = list queryObj.ColorList = list
if(queryObj.ColorNames.length==0) queryObj.ColorName = ''
} }
} }
search() search()
...@@ -555,6 +542,7 @@ const getTemplateQuery = async () => { ...@@ -555,6 +542,7 @@ const getTemplateQuery = async () => {
ColorName: ColorList[i].ColorName, ColorName: ColorList[i].ColorName,
ColorValue: ColorList[i].ColorValue, ColorValue: ColorList[i].ColorValue,
checked: false, checked: false,
ID: ColorList[i].Id
}) })
} }
// arrList(tempData.ColorList) // arrList(tempData.ColorList)
...@@ -608,6 +596,14 @@ const scrollingHandler = () =>{ ...@@ -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(); getLinesHandler();
getTemplateQuery(); getTemplateQuery();
queryTemplateBySearchHandler(); queryTemplateBySearchHandler();
......
...@@ -4,13 +4,13 @@ ...@@ -4,13 +4,13 @@
<div class="row wrap"> <div class="row wrap">
<div class="row items-center q-mb-lg"> <div class="row items-center q-mb-lg">
<span class="fz14 q-pr-sm shrink">关键字:</span> <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> @keyup.enter="search"></el-input>
</div> </div>
<div class="row items-center q-mb-lg"> <div class="row items-center q-mb-lg">
<span class="fz14 q-pr-sm shrink">&nbsp;&nbsp;模版:</span> <span class="fz14 q-pr-sm shrink">&nbsp;&nbsp;模版:</span>
<el-select v-model="queryObj.TemplateType" <el-select v-model="queryObj.TemplateType"
class="ml-1 shrink" class="ml-1 shrink TemSel"
placeholder="模版类型" clearable> placeholder="模版类型" clearable>
<el-option <el-option
v-for="item in typeArr" v-for="item in typeArr"
...@@ -23,7 +23,7 @@ ...@@ -23,7 +23,7 @@
<div class="row items-center q-mb-lg"> <div class="row items-center q-mb-lg">
<span class="fz14 q-pr-sm shrink">&nbsp;&nbsp;&nbsp;版型:</span> <span class="fz14 q-pr-sm shrink">&nbsp;&nbsp;&nbsp;版型:</span>
<el-select v-model="queryObj.TempType" <el-select v-model="queryObj.TempType"
class="ml-1 shrink" class="ml-1 shrink TemSel"
placeholder="版型" clearable> placeholder="版型" clearable>
<el-option <el-option
v-for="item in layouts" v-for="item in layouts"
...@@ -33,17 +33,45 @@ ...@@ -33,17 +33,45 @@
/> />
</el-select> </el-select>
</div> </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"> <div class="row items-center q-mb-lg">
<span class="fz14 q-pr-sm shrink">&nbsp;&nbsp;颜色:</span> <span class="fz14 q-pr-sm shrink">&nbsp;&nbsp;颜色:</span>
<el-select v-model="queryObj.ColorName" <el-select v-model="queryObj.ColorList" multiple
class="ml-1 shrink" class="ml-1 shrink TemSel"
placeholder="颜色" clearable> placeholder="颜色" clearable>
<el-option key="" label="不限" value=""/> <el-option key="" label="不限" value=""/>
<el-option <el-option
v-for="item in ColorList" v-for="item in ColorList"
:key="item.ColorName" :key="item.ID"
:label="`${item.ColorName}`" :label="`${item.Name}`"
:value="item.ColorName" :value="item.Name"
/> />
</el-select> </el-select>
</div> </div>
...@@ -234,8 +262,12 @@ const queryObj = reactive({ ...@@ -234,8 +262,12 @@ const queryObj = reactive({
type: 0, type: 0,
sort: 0,//排序方式 sort: 0,//排序方式
}) })
const queryColor = ref({
DictKey: 'Trip_Template_Color',
Code: '',
})
const setTemplateType = ref(1) const setTemplateType = ref(1)
const ColorList = DominantColour() const ColorList = ref([])//DominantColour()
const tableScrollHandler = ()=>{ const tableScrollHandler = ()=>{
if(queryObj.pageCount>queryObj.pageIndex){ if(queryObj.pageCount>queryObj.pageIndex){
...@@ -568,34 +600,17 @@ const getTemplateQuery = async () => { ...@@ -568,34 +600,17 @@ const getTemplateQuery = async () => {
} }
//国家 //国家
if (tempData && tempData.CountryList) { if (tempData && tempData.CountryList) {
arrList(tempData.CountryList) countries.value = 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
})
} }
//颜色 //颜色
if (tempData && tempData.ColorList) { if (tempData && tempData.ColorList) {
for(let i=0;i<ColorList.length;i++){ // for(let i=0;i<ColorList.length;i++){
colorArr.value.push({ // colorArr.value.push({
ColorName: ColorList[i].ColorName, // ColorName: ColorList[i].ColorName,
ColorValue: ColorList[i].ColorValue, // ColorValue: ColorList[i].ColorValue,
checked: false, // 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
// })
} }
//季节 //季节
if (tempData && tempData.SeasonList) { if (tempData && tempData.SeasonList) {
...@@ -638,6 +653,14 @@ const scrollingHandler = () =>{ ...@@ -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(); getLinesHandler();
getTemplateQuery(); getTemplateQuery();
queryTemplateBySearchHandler(); queryTemplateBySearchHandler();
...@@ -1104,4 +1127,7 @@ onMounted(()=>{ ...@@ -1104,4 +1127,7 @@ onMounted(()=>{
height: 42px; height: 42px;
line-height: 42px; line-height: 42px;
} }
.TemSel{
width: 120px;
}
</style> </style>
\ No newline at end of file
<template> <template>
<div class="row items-center flex-between q-mb-lg"> <div class="row items-center flex-between q-mb-lg">
<div></div> <div class="row items-center shrink q-pr-md marketTagDown marketTagDown">
<el-input style="width:600px" v-model="queryObj.Title" placeholder="请输入关键字" class="q-pr-33" clearable <div class="MarketButton cursor-pointer"
:class="[datas.type == x.Id?'active':'']" v-for="(x,index) in datas.colorType" :key="index"
@click="datas.type=x.Id,search()">
{{x.Name}}
</div>
<!-- <span class="fz14 q-pr-sm shrink">&nbsp;&nbsp;列表类型:</span>
<el-select v-model="datas.type"
class="ml-1 shrink TemSel"
placeholder="类型" @change="search">
<el-option
v-for="item in datas.colorType"
:key="item.Id"
:label="`${item.Name}`"
:value="item.Id"
/>
</el-select> -->
</div>
<el-input style="max-width:500px" v-model="queryObj.Name" placeholder="请输入关键字" class="q-pr-33" clearable
@keyup.enter="search"> @keyup.enter="search">
<template #append> <template #append>
<div class="Market-select-line absolute"></div> <div class="Market-select-line absolute"></div>
...@@ -11,18 +28,25 @@ ...@@ -11,18 +28,25 @@
</div> </div>
</template> </template>
</el-input> </el-input>
<el-button type="primary" size="default" style="color: #ffff;" @click="addFont"> <div class="row">
新增颜色 <el-button type="primary" size="default" style="color: #ffff;" @click="addColour">
</el-button> 新增颜色{{datas.type==2?'分类':''}}
</el-button>
<el-button v-if="datas.type==1" class="q-pl-md" type="primary" size="default" style="color: #ffff;" @click="BatchSetting">
批量设置
</el-button>
</div>
</div> </div>
<el-table v-loading="loading" ref="dataTableRef" highlight-current-row <el-table v-loading="loading" ref="dataTableRef" highlight-current-row
v-load-more="tableScrollHandler" :data="dataList" class="tableHBEbeef5 col" height="82vh"> v-load-more="tableScrollHandler" :data="dataList" class="tableHBEbeef5 col" height="82vh"
<el-table-column label="主色调"> @selection-change="handleSelectionChange">
<el-table-column type="selection" width="55" v-if="datas.type==1"/>
<el-table-column v-if="datas.type==1" label="颜色分类">
<template #default="scope"> <template #default="scope">
{{scope.row.ColorName?scope.row.ColorName:'不限'}} {{scope.row.ColorName?scope.row.ColorName:'不限'}}
</template> </template>
</el-table-column> </el-table-column>
<el-table-column label="颜色名称"> <el-table-column :label="datas.type==1?'颜色名称':'名称'">
<template #default="scope"> <template #default="scope">
{{scope.row.Name}} {{scope.row.Name}}
</template> </template>
...@@ -53,25 +77,25 @@ ...@@ -53,25 +77,25 @@
<div class="text-title text-center fz16 PingFangSC">{{datas.params.ID?'编辑':'新增'}}颜色</div> <div class="text-title text-center fz16 PingFangSC">{{datas.params.ID?'编辑':'新增'}}颜色</div>
</template> </template>
<div class="addTemplateBox q-mb-lg fz14"> <div class="addTemplateBox q-mb-lg fz14">
<div class="addTemplateInput q-mt-xs q-mb-lg row items-center"> <div v-if="datas.type==1" class="addTemplateInput q-mt-xs q-mb-lg row items-center">
<span class="q-pr-md shrink">主色</span> <span class="q-pr-md shrink">颜色分类</span>
<el-select v-model="datas.params.Code" <el-select v-model="datas.params.Code"
style="width: 260px;" style="width: 260px;"
class="ml-1" class="ml-1"
placeholder="主颜" clearable> placeholder="请选择颜色分类" clearable>
<el-option key="" label="不限" value=""/> <el-option :key="Number(0)" label="不限" :value="Number(0)"/>
<el-option <el-option
v-for="item in ColorList" v-for="item in ColorList"
:key="item.Id" :key="item.ID"
:label="`${item.ColorName}`" :label="`${item.Name}`"
:value="item.Id" :value="item.ID"
/> />
</el-select> </el-select>
</div> </div>
<div class="addTemplateInput q-mt-xs q-mb-lg row items-center"> <div class="addTemplateInput q-mt-xs q-mb-lg row items-center">
<span class="q-pr-md shrink">名称:</span> <span class="q-pr-md shrink">{{datas.type==1?'':'分类'}}名称:</span>
<el-input min="750" v-model="datas.params.Name" <el-input min="750" v-model="datas.params.Name"
placeholder="请输入颜色名称" class=""></el-input> :placeholder="datas.type==1?'请输入颜色名称':'请输入颜色分类名称'" class=""></el-input>
</div> </div>
<div class="addTemplateInput q-mt-xs q-mb-lg row items-center"> <div class="addTemplateInput q-mt-xs q-mb-lg row items-center">
<span class="q-pr-md shrink">色值:</span> <span class="q-pr-md shrink">色值:</span>
...@@ -88,12 +112,66 @@ ...@@ -88,12 +112,66 @@
</div> </div>
</div> </div>
<div class="text-center"> <div class="text-center">
<el-button class="MarketIndexButtom MarketRec" type="primary" @click="ConfirmCreation" <el-button class="MarketIndexButtom MarketRec" type="primary" @click="ConfirmCreation(0)"
:loading="requestLoading"> :loading="requestLoading">
确认{{datas.params.ID?'编辑':'新增'}} 确认{{datas.params.ID?'编辑':'新增'}}
</el-button> </el-button>
</div> </div>
</el-dialog> </el-dialog>
<!-- 批量设置分类 -->
<el-dialog v-model="datas.DominantColour" :align-center="true"
:show-close="true" :close-on-press-escape="false"
:close-on-click-modal="false" style="width: 373px;"
class="small-padding" @close="close">
<template #header>
<div class="text-title text-center fz16 PingFangSC">设置颜色分类</div>
</template>
<div class="addTemplateBox q-mb-lg fz14">
<div class="addTemplateInput q-mt-xs q-mb-lg">
<template v-for="(x,index) in multipleSelection">
<el-tag
:color="x.Content"
effect="dark" class="q-mr-xs w10">
&nbsp;
</el-tag>
</template>
</div>
<div class="addTemplateInput q-mt-xs q-mb-lg row items-center">
<span class="q-pr-md shrink">颜色分类:</span>
<el-select v-model="datas.paramsParent.ParentId"
style="width: 260px;"
class="ml-1"
placeholder="请选择颜色分类" clearable>
<el-option :key="Number(0)" label="不限" :value="Number(0)"/>
<el-option
v-for="item in ColorList"
:key="item.ID"
:label="`${item.Name}`"
:value="item.ID"
/>
</el-select>
</div>
<!-- <div class="addTemplateInput q-mt-xs q-mb-lg row items-center">
<span class="q-pr-md shrink">名称:</span>
<el-input min="750" v-model="datas.params.Name"
placeholder="请输入颜色名称" class=""></el-input>
</div>
<div class="addTemplateInput q-mt-xs q-mb-lg row items-center">
<span class="q-pr-md shrink">色值:</span>
<el-input min="750" v-model="datas.params.Content"
placeholder="例子:#e5e3da" class=""></el-input>
<div class="q-pl-sm">
<el-color-picker v-model="datas.params.Content" />
</div>
</div> -->
</div>
<div class="text-center">
<el-button class="MarketIndexButtom MarketRec" type="primary" @click="ConfirmCreation(1)"
:loading="requestLoading">
确认设置
</el-button>
</div>
</el-dialog>
</template> </template>
<script lang="ts" setup> <script lang="ts" setup>
...@@ -103,7 +181,7 @@ ...@@ -103,7 +181,7 @@
import { storeToRefs } from "pinia"; import { storeToRefs } from "pinia";
import { USER_DEFAULT_HEADER } from '@/configs/customer' import { USER_DEFAULT_HEADER } from '@/configs/customer'
import { Edit,Delete } from '@element-plus/icons-vue'; import { Edit,Delete } from '@element-plus/icons-vue';
import { ElMessage, ElMessageBox } from 'element-plus' import { ElLoading, ElMessage, ElMessageBox } from 'element-plus'
import { CustomerFonts } from '@/store/font' import { CustomerFonts } from '@/store/font'
import {getFonts} from '@/utils/psdParser/index' import {getFonts} from '@/utils/psdParser/index'
import FontService from '@/services/FontService' import FontService from '@/services/FontService'
...@@ -133,6 +211,12 @@ ...@@ -133,6 +211,12 @@
}) })
const dataTableRef = ref() const dataTableRef = ref()
const datas = reactive({ const datas = reactive({
type: 1,
colorType:[
{Name:'颜色',Id:1},
{Name:'颜色分类',Id:2},
],
DominantColour: false,
requestLoading: false, requestLoading: false,
addEditVisible: false, addEditVisible: false,
params: { params: {
...@@ -140,15 +224,38 @@ ...@@ -140,15 +224,38 @@
DictKey: 'Trip_Template_Color', DictKey: 'Trip_Template_Color',
Name: '', Name: '',
Content: '', Content: '',
Code: '', Code: 0,
},
paramsParent: {
ParentId: 0,
ColorList: []
} }
}) })
const queryColor = ref({
DictKey: 'Trip_Template_Color',
Code: '',
})
const fonts = ref<{fontFamily:string,uploadType:number,selectedFont?:string}[]>() const fonts = ref<{fontFamily:string,uploadType:number,selectedFont?:string}[]>()
const uploadingIndex = ref(-1) const uploadingIndex = ref(-1)
const ColorList = DominantColour() const ColorList = ref([]) //DominantColour()
const multipleSelection = ref([])
const handleSelectionChange = (val: any) =>{
multipleSelection.value = val
datas.paramsParent.ColorList = val.length>0? val.map(x=> {return x.ID}) : 0
}
// 批量设置颜色分类
const BatchSetting = () => {
if(datas.paramsParent.ColorList.length==0)return ElMessage({
showClose: true,
message: '请选择需要设置的颜色',
type: 'warning',
})
datas.DominantColour = true
}
const close = () => { const close = () => {
datas.params = { datas.params = {
ID: 0, ID: 0,
...@@ -157,14 +264,40 @@ ...@@ -157,14 +264,40 @@
Content: '', Content: '',
Code: '', Code: '',
} }
// datas.paramsParent = {
// ParentId: 0,
// ColorList: []
// }
} }
const ConfirmCreation = async () => { const ConfirmCreation = async (type:Number) => {
if(type==1){
await setColour()
}else{
await addEditColor()
}
}
const setColour = async () => {
datas.requestLoading = true
const result = await LineService.BatchSetColor(datas.paramsParent)
if(result.data.resultCode==1){
datas.DominantColour = false
datas.requestLoading = false
querySearchHandler()
}else{
ElMessage({
message:'颜色分类设置失败,请重试',
type:'error'
})
datas.requestLoading = false
}
}
const addEditColor = async () => {
//添加、编辑颜色 //添加、编辑颜色
if(!datas.params.Name)return ElMessage({ if(!datas.params.Name)return ElMessage({
showClose: true, showClose: true,
message: '请完善颜色名称', message: '请完善颜色名称',
type: 'warning', type: 'warning',
}) })
if(!datas.params.Content){ if(!datas.params.Content){
ElMessage({ ElMessage({
showClose: true, showClose: true,
...@@ -182,8 +315,9 @@ ...@@ -182,8 +315,9 @@
return return
} }
datas.requestLoading = true datas.requestLoading = true
const result = await LineService.SetTemplateConfigData(datas.params) if(datas.type==2) datas.params.Code = ''
if(result){ const result = await ConfigService.SetTemplateConfigData(datas.params)
if(result.data.resultCode==1){
datas.addEditVisible = false datas.addEditVisible = false
datas.requestLoading = false datas.requestLoading = false
querySearchHandler() querySearchHandler()
...@@ -195,12 +329,12 @@ ...@@ -195,12 +329,12 @@
datas.requestLoading = false datas.requestLoading = false
} }
} }
const addFont = () => { const addColour = () => {
datas.addEditVisible = true datas.addEditVisible = true
} }
const editDelete = (item: Object,index: Number) => { const editDelete = (item: Object,index: Number) => {
if(index>=0){ if(index>=0){
deleteFont(index,item) deleteColor(item)
}else{ }else{
datas.params = JSON.parse(JSON.stringify(item)) datas.params = JSON.parse(JSON.stringify(item))
datas.params.Code = item.Code?Number(item.Code):'' datas.params.Code = item.Code?Number(item.Code):''
...@@ -208,9 +342,9 @@ ...@@ -208,9 +342,9 @@
} }
} }
const deleteFont = (index: Number, item: Object) => { const deleteColor = (item: Object) => {
ElMessageBox.confirm( ElMessageBox.confirm(
`此操作将删除 ${item.label} 颜色,是否确定?`, `此操作将删除 ${item.Content} 颜色,是否确定?`,
'提示', '提示',
{ {
confirmButtonText: '确定', confirmButtonText: '确定',
...@@ -219,34 +353,35 @@ ...@@ -219,34 +353,35 @@
} }
).then(async () => { ).then(async () => {
try { try {
dataList.value.splice(index,1) try {
// let queryMsg = { deleteLoading.value = ElLoading.service({
// TempId: item.TempId lock:true,
// } text:'正在处理'
// deleteLoading.value = ElLoading.service({ })
// lock:true, let dataRes = await LineService.RemoveTemplateConfigData(item.ID)
// text:'正在处理' if (dataRes.data.resultCode == 1) {
// }) queryObj.pageIndex = 1
// let dataRes = await ConfigService.SetDeleteTripTemplate(queryMsg) ElMessage({
// if (dataRes.data.resultCode == 1) { showClose: true,
// queryObj.pageIndex = 1 message: `删除${item.Content}成功`,
// ElMessage({ type: 'success',
// showClose: true, })
// message: `删除${item.label}成功`, search()
// type: 'success', }else {
// }) ElMessage({
// await queryTemplateBySearchHandler() showClose: true,
// }else { message: `删除${item.Content}失败`,
// ElMessage({ type: 'warning',
// showClose: true, })
// message: `删除${item.label}失败`, }
// type: 'warning', } catch (error) {}
// }) deleteLoading.value.close()
// } deleteLoading.value = null
// deleteLoading.value.close()
// deleteLoading.value = null
} catch (error) {} } catch (error) {}
}).catch(() => {}) }).catch(() => {
deleteLoading.value.close()
deleteLoading.value = null
})
} }
const tableScrollHandler = ()=>{ const tableScrollHandler = ()=>{
...@@ -264,6 +399,8 @@ ...@@ -264,6 +399,8 @@
loading.value = true loading.value = true
try { try {
let pageRes = await LineService.GetTemplateConfigDataList(queryObj); let pageRes = await LineService.GetTemplateConfigDataList(queryObj);
// if(datas.type==1) pageRes = await LineService.GetTemplateConfigDataList(queryObj);
// else pageRes = await LineService.GetParentColor(queryColor.value);
if (pageRes.data.resultCode == 1) { if (pageRes.data.resultCode == 1) {
let arrList = function(list){ let arrList = function(list){
list.forEach(x=>{ list.forEach(x=>{
...@@ -271,11 +408,25 @@ ...@@ -271,11 +408,25 @@
}) })
} }
arrList(pageRes.data.data) arrList(pageRes.data.data)
dataList.value = pageRes.data.data if(datas.type==1) {
dataList.value = pageRes.data.data.filter(x=>{
return x.Code
})
}
else {
dataList.value = pageRes.data.data.filter(x=>{
return !x.Code
})
// dataList.value = pageRes.data.data
// ColorList.value = pageRes.data.data
}
for(let i=0;i<dataList.value.length;i++){ for(let i=0;i<dataList.value.length;i++){
let Color = ColorList.filter(x=>{return x.Id==dataList.value[i].Code }) let Color = ColorList.value.filter(x=>{
if(datas.type==1) return x.ID==Number(dataList.value[i].Code)
else return x.ID==Number(dataList.value[i].ID)
})
if(Color.length>0) { if(Color.length>0) {
dataList.value[i].ColorName = Color[0].ColorName dataList.value[i].ColorName = Color[0].Name
} }
} }
} }
...@@ -284,6 +435,13 @@ ...@@ -284,6 +435,13 @@
loading.value = false loading.value = false
} }
} }
const getColor = async () => {
let response = await LineService.GetParentColor(queryColor.value)
if (response.data.resultCode == 1) {
ColorList.value = response.data.data;
}
}
getColor()
querySearchHandler() querySearchHandler()
</script> </script>
...@@ -292,6 +450,10 @@ ...@@ -292,6 +450,10 @@
width: 95px; width: 95px;
text-align: right; text-align: right;
} }
.addTemplateInput span.w10{
width: 10px;
height: 15px;
}
.user-header { .user-header {
padding: 16px 24px; padding: 16px 24px;
position: relative; position: relative;
...@@ -328,4 +490,46 @@ ...@@ -328,4 +490,46 @@
font-weight: bold; font-weight: bold;
color: #000; color: #000;
} }
.TemSel{
width: 120px;
}
.marketTagDown .el-check-tag{
line-height: 22px;
margin-left: 13px;
margin-right: 0;
}
.marketTagDown {
width: 409px;
}
.marketTagDown.marketTagDown{
width: 309px;
}
.MarketButton{
width: 90px;
height: 36px;
line-height: 36px;
font-size: 14px;
text-align: center;
color: #9EA2B3;
position: relative;
margin-right: 13px;
}
.MarketButton.active{
background: #F4F7FE;
border-radius: 6px;
-webkit-border-radius: 6px;
-moz-border-radius: 6px;
-ms-border-radius: 6px;
-o-border-radius: 6px;
color: #1C1C1C;
}
.MarketButton.active::after{
content: "";
position: absolute;
left: 35.5px;
bottom: 0;
width: 19px;
height: 4px;
background: linear-gradient(134deg, #649DED, #570AD8);
}
</style> </style>
\ No newline at end of file
<template> <template>
<div class="row items-center flex-between q-mb-lg"> <div class="row items-center flex-between q-mb-lg">
<div></div> <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"> @keyup.enter="search">
<template #append> <template #append>
<div class="Market-select-line absolute"></div> <div class="Market-select-line absolute"></div>
......
<template> <template>
<div class="row items-center flex-between q-mb-lg"> <div class="row items-center flex-between q-mb-lg">
<div></div> <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"> @keyup.enter="search">
<template #append> <template #append>
<div class="Market-select-line absolute"></div> <div class="Market-select-line absolute"></div>
...@@ -11,7 +11,7 @@ ...@@ -11,7 +11,7 @@
</div> </div>
</template> </template>
</el-input> </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> </el-button>
</div> </div>
...@@ -121,7 +121,7 @@ ...@@ -121,7 +121,7 @@
type: 'warning', type: 'warning',
}) })
datas.requestLoading = true datas.requestLoading = true
const result = await LineService.SetTemplateConfigData(datas.params) const result = await ConfigService.SetTemplateConfigData(datas.params)
if(result){ if(result){
datas.addEditVisible = false datas.addEditVisible = false
datas.requestLoading = false datas.requestLoading = false
...@@ -134,7 +134,7 @@ ...@@ -134,7 +134,7 @@
datas.requestLoading = false datas.requestLoading = false
} }
} }
const addFont = () => { const addNation = () => {
datas.addEditVisible = true datas.addEditVisible = true
} }
const editDelete = (item: Object,index: Number) => { const editDelete = (item: Object,index: Number) => {
......
Markdown is supported
0% or
You are about to add 0 people to the discussion. Proceed with caution.
Finish editing this message first!
Please register or to comment