Skip to content

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

优化模版 编辑者 新增颜色

parent 258cd81e
Hide 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 @@
+ 添加标签
</el-button>
</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="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>
<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">
<el-select v-model="queryColor.Code" placeholder="请选择分类"
@change="getColor(2)">
......@@ -162,6 +221,57 @@
</el-option>
</el-select>
</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>
<div class="row wrap q-mt-md">
<el-select v-model="queryObj.SeasonName" class="m-2" placeholder="请选择季节">
......@@ -225,6 +335,19 @@
ColorValue: '',
ColorName: '',
},
addColor: {
ID: 0,
DictKey: 'Trip_Template_Color',
Name: '',
Content: '',
Code: '',
SNO: 0,
// ColorValue: '',
// ColorName: '',
// Code: ''
},
addColorsShow: false,
addColorLoading: false,
ColorList: [],
EditAddType: 0,//0新增 1编辑
addEditLoading: false,
......@@ -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 = () => {
let TemplateList = TemplateDataSource.value.filter(x=>{
return x.FiledType==datas.DataSource.pageType
......@@ -565,4 +740,25 @@
.Required{
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>
\ 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