Skip to content

P
pptist
Commit 7c5f81cc authored by zhengke's avatar zhengke
Browse files
Options

优化模版 编辑者 新增颜色

parent 258cd81e
Show whitespace changes
Inline Side-by-side
Showing with 199 additions and 3 deletions
src/views/Editor/Toolbar/ElementTemplateData.vue
View file @ 7c5f81cc
...@@ -125,9 +125,68 @@ ...@@ -125,9 +125,68 @@
+ 添加标签 + 添加标签
</el-button> </el-button>
</div> </div>
<div style="position: relative;height: 34px;">
<p class="q-mt-md row flex-between items-center"> <p class="q-mt-md row flex-between items-center">
<div><span class="Required q-mr-md">*</span>选择颜色：</div> <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="datas.addColorsShow=!datas.addColorsShow">
+ 颜色
</el-button>
</p>
<div v-if="datas.addColorsShow"
class="ColorsShowBox">
<p class="q-mt-md row flex-between">
<span>新增颜色：</span>
<span>
<el-button class="button-new-tag ml-1"
size="small" @click="CancelAddColor()">
取消
</el-button>
<el-button class="button-new-tag ml-1 q-ml-xs"
:loading="datas.addColorLoading"
type="primary"
size="small" @click="setColor()">
提交
</el-button>
</span>
</p> </p>
<div class="row q-mt-md items-center">
<span class="Required q-mr-xs">*</span>
<el-select class="q-ml-sm" v-model="datas.addColor.Code" placeholder="请选择分类">
<el-option
key=""
label="不限"
value=""
/>
<el-option
v-for="item in ColorList"
:key="item.ID"
:label="`${item.Name}`"
:value="item.ID"
/>
</el-select>
</div>
<div class="row q-mt-md items-center">
<span class="Required q-mr-xs">*</span>
<el-input
placeholder="颜色名称"
v-model="datas.addColor.Name"
class="ml-1 w-20 q-ml-sm"
size="small"
/>
<span class="Required q-mr-xs q-ml-sm">*</span>
<el-input
placeholder="例：#e5e3da"
v-model="datas.addColor.Content"
class="ml-1 w-20 q-ml-sm"
size="small"
/>
</div>
</div>
</div>
<div class="row q-mt-md"> <div class="row q-mt-md">
<el-select v-model="queryColor.Code" placeholder="请选择分类" <el-select v-model="queryColor.Code" placeholder="请选择分类"
@change="getColor(2)"> @change="getColor(2)">
...@@ -162,6 +221,57 @@ ...@@ -162,6 +221,57 @@
</el-option> </el-option>
</el-select> </el-select>
</div> </div>
<!-- <div class="q-mt-sm" v-if="datas.addColorsShow"
style="background: #eeee;border-radius: 3px;padding: 0 5px 10px 5px;">
<p class="q-mt-md row flex-between">
<span>新增颜色：</span>
<span>
<el-button class="button-new-tag ml-1"
size="small" @click="CancelAddColor()">
取消
</el-button>
<el-button class="button-new-tag ml-1 q-ml-xs"
:loading="datas.addColorLoading"
type="primary"
size="small" @click="setColor()">
提交
</el-button>
</span>
</p>
<div class="row q-mt-md items-center">
<span class="Required q-mr-xs">* </span>
<el-select v-model="datas.addColor.Code" placeholder="请选择分类">
<el-option
key=""
label="不限"
value=""
/>
<el-option
v-for="item in ColorList"
:key="item.ID"
:label="`${item.Name}`"
:value="item.ID"
/>
</el-select>
</div>
<div class="row q-mt-md items-center">
<span class="Required q-mr-xs">*</span>
<el-input
placeholder="颜色名称"
v-model="datas.addColor.Name"
class="ml-1 w-20 q-ml-sm"
size="small"
/>
<span class="Required q-mr-xs q-ml-sm">*</span>
<el-input
placeholder="例：#e5e3da"
v-model="datas.addColor.Content"
class="ml-1 w-20 q-ml-sm"
size="small"
/>
</div>
</div> -->
<p class="q-mt-md"><span class="Required q-mr-md">*</span>选择季节：</p> <p class="q-mt-md"><span class="Required q-mr-md">*</span>选择季节：</p>
<div class="row wrap q-mt-md"> <div class="row wrap q-mt-md">
<el-select v-model="queryObj.SeasonName" class="m-2" placeholder="请选择季节"> <el-select v-model="queryObj.SeasonName" class="m-2" placeholder="请选择季节">
...@@ -225,6 +335,19 @@ ...@@ -225,6 +335,19 @@
ColorValue: '', ColorValue: '',
ColorName: '', ColorName: '',
}, },
addColor: {
ID: 0,
DictKey: 'Trip_Template_Color',
Name: '',
Content: '',
Code: '',
SNO: 0,
// ColorValue: '',
// ColorName: '',
// Code: ''
},
addColorsShow: false,
addColorLoading: false,
ColorList: [], ColorList: [],
EditAddType: 0,//0新增 1编辑 EditAddType: 0,//0新增 1编辑
addEditLoading: false, addEditLoading: false,
...@@ -297,6 +420,58 @@ ...@@ -297,6 +420,58 @@
}) })
} }
const CancelAddColor = () =>{
datas.addColorsShow = false
datas.addColor = {
ID: 0,
DictKey: 'Trip_Template_Color',
Name: '',
Content: '',
Code: '',
SNO: 0,
}
}
const setColor = async () => {
if(!datas.addColor.Content||!datas.addColor.Name){
ElMessage({
showClose: true,
message: '请完善颜色的名称及颜色16进制',
type: 'warning',
})
return
}
if(datas.addColor.Content.indexOf('#')==-1){
ElMessage({
showClose: true,
message: "色号需要在最前面加 # 号",
type: 'warning',
})
return
}
try {
datas.addColorLoading = true
let dataRes = await ConfigService.SetTemplateConfigData(datas.addColor)
if (dataRes.data.resultCode == 1) {
ElMessage({
showClose: true,
message: '新增颜色成功',
type: 'success',
})
getColor(0)
CancelAddColor()
}else {
ElMessage({
showClose: true,
message: '新增颜色失败',
type: 'warning',
})
}
datas.addColorLoading = false
} catch (error) {}
}
const getPageType = () => { const getPageType = () => {
let TemplateList = TemplateDataSource.value.filter(x=>{ let TemplateList = TemplateDataSource.value.filter(x=>{
return x.FiledType==datas.DataSource.pageType return x.FiledType==datas.DataSource.pageType
...@@ -565,4 +740,25 @@ ...@@ -565,4 +740,25 @@
.Required{ .Required{
color: red; color: red;
} }
.ColorsShowBox{
position: absolute;
right: -10px;
bottom: 34px;
width: 245px;
padding: 5px 15px 15px 15px;
background: #eee;
border-radius: 3px;
z-index: 999;
}
.ColorsShowBox::after{
content: '';
width: 0;
height: 0;
position: absolute;
right: 40px;
bottom: -10px;
border-left: 5px solid transparent;
border-right: 5px solid transparent;
border-top: 10px solid #eee;
}
</style> </style>
\ No newline at end of file
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