Commit 839a4751 authored by rockyl's avatar rockyl

烽火台皮肤操作二次确认

parent aec84a87
......@@ -195,6 +195,7 @@
"Skin html required": "皮肤代码必填",
"Skin name": "皮肤名",
"Skin html": "皮肤代码",
"Click save will overwrite and apply immediately": "即将覆盖【{name} | {skin}】并立刻生效,确定吗?",
"Copy skin success": "复制皮肤成功",
"Copy url success": "复制链接成功",
"Copy skin": "复制皮肤",
......
......@@ -243,12 +243,23 @@
.px-skin-editor-dialog {
.wrapper {
padding: 10px;
height: 100%;
display: flex;
flex-direction: column;
.env-select {
align-self: flex-end;
.header{
display: flex;
align-items: center;
.env-select{
}
.px-project-name{
margin-left: 10px;
font-weight: bold;
color: $--color-danger;
}
}
.operate-wrapper > :not(*:first-child) {
......@@ -290,6 +301,32 @@
}
}
.dialog-footer{
.save-button{
margin-left: 10px;
}
}
}
.px-publish-view {
display: flex;
flex-direction: column;
.px-project-name{
font-weight: bold;
color: $--color-danger;
}
.operate-bar{
display: flex;
}
.name {
display: inline-block;
width: 200px;
}
}
.meta-search-dialog {
......
......@@ -333,7 +333,7 @@ export function getCmpProps(type) {
inherits.unshift(_.cloneDeep(typeProps));
}
let result = Object.assign({}, ...inherits);
cmpPropsCache[type] = result;
cmpProps = cmpPropsCache[type] = result;
delete result.base;
delete result.groupName;
}
......
<template>
<div class="zero-inspector-props-form" v-if="activeComponent.uuid">
<el-scrollbar class="scrollbar" wrap-class="wrap-x-hidden">
<el-form ref="form" size="mini" :model="form" label-width="80px" @submit.native.prevent>
<el-form ref="form" size="mini" :model="form" label-width="100px" @submit.native.prevent>
<el-collapse accordion v-if="activeComponent.scripts && activeComponent.scripts.length">
<template v-for="(script, index) in activeComponent.scripts">
<el-collapse-item :title="getScriptName(script.script)" :key="script + index">
......
<template>
<div class="config">
<el-select size="small" v-model="env" placeholder="请选择环境" @change="changeEnv">
<el-option v-for="(item, key) in pxEnvs" :key="key" :label="item" :value="key"></el-option>
</el-select>
<el-select size="small" v-model="operate" placeholder="是否新增">
<el-option v-for="(item, key) in tplOperates" :key="key" :label="item" :value="key"></el-option>
</el-select>
<el-select
v-if="operate !== 0"
size="small"
v-model="skinId"
placeholder="选择skinID"
clearable
>
<el-option
v-for="item in skinList"
:key="item.id"
:label="`${item.type !== 0 ? item.name : '首页'}(${item.id})`"
:value="item.id"
></el-option>
</el-select>
<div v-if="operate === 0">
<el-select size="small" v-model="tplType" placeholder>
<el-option v-for="(item, key) in tplTypes" :key="key" :label="item" :value="key"></el-option>
<div class="px-publish-view">
<span class="px-project-name">
{{pxProjectName}}
</span>
<div class="operate-bar">
<el-select size="small" v-model="env" placeholder="请选择环境" @change="changeEnv">
<el-option v-for="(item, key) in pxEnvs" :key="key" :label="item" :value="key"></el-option>
</el-select>
<el-input v-model="name" size="small" class="name" placeholder="请输入皮肤名称"></el-input>
</div>&nbsp;
<el-button type="primary" size="small" @click="clickSave">保存</el-button>
<el-button v-if="skinId" type="primary" size="small" @click="getUrl">获取链接</el-button>
<el-select size="small" v-model="operate" placeholder="是否新增">
<el-option v-for="(item, key) in tplOperates" :key="key" :label="item" :value="key"></el-option>
</el-select>
<el-select
v-if="operate !== 0"
size="small"
v-model="skinId"
placeholder="选择skinID"
clearable
>
<el-option
v-for="item in skins"
:key="item.id"
:label="`${item.type !== 0 ? item.name : '首页'}(${item.id})`"
:value="item.id"
></el-option>
</el-select>
<div v-if="operate === 0">
<el-select size="small" v-model="tplType" placeholder>
<el-option v-for="(item, key) in tplTypes" :key="key" :label="item" :value="key"></el-option>
</el-select>
<el-input v-model="name" size="small" class="name" placeholder="请输入皮肤名称"></el-input>
</div>&nbsp;
<el-popconfirm v-if="skinId" class="save-button" @onConfirm="clickSave" placement="top"
:title="$t('Click save will overwrite and apply immediately', {name: this.pxProjectName, skin: skinName})">
<el-button slot="reference" type="primary" size="small">{{ $t("Save") }}</el-button>
</el-popconfirm>
<el-button v-if="skinId" size="small" @click="getUrl">获取链接</el-button>
</div>
</div>
</template>
......@@ -59,12 +67,16 @@
tplType: 0,
skinId: "",
skinList: [],
pxProjectName: "",
skins: [],
pxPid: "",
name: ""
};
},
computed: {
skinName(){
return this.skins.find(skin => skin.id === this.skinId).name;
},
...mapGetters(["options"])
},
methods: {
......@@ -90,7 +102,7 @@
if (!pxPid) {
this.$message({
message: `请先配置${env}环境下的projectId`,
message: this.$t('Please config projectID', {env}),
type: "error"
});
return;
......@@ -98,7 +110,8 @@
try {
const data = await getProjectSkins(pxPid, env);
if (data.success !== false) {
this.skinList = data;
this.pxProjectName = data.name;
this.skins = data.skins;
} else {
// 如果是测试环境,ticket过期,则重新获取ticket
if (env === "test" && data.notLogin) {
......@@ -108,26 +121,28 @@
} else if (env === "prod" && data.notLogin) {
localStorage.setItem("prod_ticket", "");
this.$message({
message: "线上tickct失效,请联系管理员修改",
message: this.$t('Online ticket is invalid'),
type: "info"
});
this.skinList = [];
this.pxProjectName = '';
this.skins = [];
} else {
this.$message({
message: data.message,
type: "error"
});
this.skinList = [];
this.pxProjectName = '';
this.skins = [];
}
}
} catch (e) {
this.skinList = [];
this.pxProjectName = '';
this.skins = [];
throw new Error(e.message);
}
},
hasIndex() {
const {skinList} = this;
return skinList.some(v => v.type === "1");
return this.skins.some(v => v.type === "1");
},
async clickSave() {
const {
......@@ -138,7 +153,6 @@
pxPid,
tpl,
name,
skinList
} = this;
if (operate === 1 && !skinId) {
this.$message({message: "请选择修改的皮肤", type: "warning"});
......@@ -182,9 +196,9 @@
},
/** 获取访问链接 */
getUrl() {
const {env, skinId, pxPid, skinList} = this;
const {env, skinId, pxPid, skins} = this;
let type = 1;
skinList.forEach(skin => {
skins.forEach(skin => {
if (skin.id === skinId) {
type = skin.type;
}
......@@ -206,9 +220,9 @@
}
},
/*getTpl(id) {
const {skinList} = this;
const {skins} = this;
let tpl = "";
skinList.forEach(skin => {
skins.forEach(skin => {
if (skin.id === id) {
tpl = skin.html;
}
......@@ -219,12 +233,5 @@
};
</script>
<style lang="scss">
.config {
display: flex;
.name {
display: inline-block;
width: 200px;
}
}
</style>
......@@ -28,7 +28,10 @@
</div>
<div>
<el-button size="mini" @click="clickClose">{{ $t("Close") }}</el-button>
<el-button type="primary" size="mini" @click="clickSave">{{ $t("Save") }}</el-button>
<el-popconfirm v-if="skin" class="save-button" @onConfirm="clickSave" placement="top"
:title="$t('Click save will overwrite and apply immediately', {name: this.pxProjectName, skin: skin.name})">
<el-button slot="reference" type="primary" size="mini">{{ $t("Save") }}</el-button>
</el-popconfirm>
</div>
</div>
</el-dialog>
......@@ -46,6 +49,7 @@
data() {
return {
visible: false,
pxProjectName: '',
skin: null,
operate: 0,
rules: {
......@@ -59,7 +63,8 @@
}
},
methods: {
async edit(operate, skin) {
async edit(operate, skin, pxProjectName) {
this.pxProjectName = pxProjectName;
this.operate = operate;
this.skin = clonePureObj(skin);
if (!this.skin.html) {
......@@ -68,9 +73,9 @@
this.visible = true;
},
clickSave() {
if(!this.skin.html){
if (!this.skin.html) {
this.$message(this.$t('Skin html required'));
}else{
} else {
this.$refs.form.validate(async (valid) => {
if (valid) {
try {
......
......@@ -7,9 +7,12 @@
custom-class="flex-dialog px-skin-editor-dialog"
>
<div class="wrapper">
<el-select class="env-select" size="mini" v-model="env" @change="changeEnv">
<el-option v-for="(item, key) in pxEnvs" :key="key" :label="item" :value="key"></el-option>
</el-select>
<div class="header">
<el-select class="env-select" size="mini" v-model="env" @change="changeEnv">
<el-option v-for="(item, key) in pxEnvs" :key="key" :label="item" :value="key"></el-option>
</el-select>
<span class="px-project-name">{{pxProjectName}}</span>
</div>
<el-table class="mock-table" :data="skins" height="100%" stripe size="mini">
<el-table-column
prop="id"
......@@ -93,6 +96,7 @@
visible: false,
pxEnvs: this.$t("pxEnvs"),
tplTypes: this.$t("tplTypes"),
pxProjectName: '',
skins: [],
env: 'dev',
}
......@@ -114,11 +118,11 @@
if (type === 0 && this.hasIndex()) {
this.$message({message: this.$t('Index page exists'), type: "warning"});
} else {
this.$refs.pxSkinEditor.edit(0, {type: (type + 1).toString()});
this.$refs.pxSkinEditor.edit(0, {type: (type + 1).toString()}, this.pxProjectName);
}
},
editItem(skin) {
this.$refs.pxSkinEditor.edit(1, skin);
this.$refs.pxSkinEditor.edit(1, skin, this.pxProjectName);
},
copyUrl(skin) {
const {id, type} = skin;
......@@ -175,7 +179,8 @@
try {
const data = await getProjectSkins(pxPid, env);
if (data.success !== false) {
this.skins = data;
this.pxProjectName = data.name;
this.skins = data.skins;
} else {
// 如果是测试环境,ticket过期,则重新获取ticket
if (env === "test" && data.notLogin) {
......@@ -185,19 +190,23 @@
} else if (env === "prod" && data.notLogin) {
localStorage.setItem("prod_ticket", "");
this.$message({
message: this.$('Online ticket is invalid'),
message: this.$t('Online ticket is invalid'),
type: "info"
});
this.pxProjectName = '';
this.skins = [];
} else {
this.$message({
message: data.message,
type: "error"
});
this.pxProjectName = '';
this.skins = [];
}
}
} catch (e) {
this.pxProjectName = '';
this.skins = [];
throw new Error(e.message);
}
},
......
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