Skip to content

S
source-trace-manage-go
Commit 2972adfb authored by zenglun's avatar zenglun
Browse files
Options

提交代码

parent c3cb0523
Expand all Hide whitespace changes
Inline Side-by-side
Showing with 406 additions and 5 deletions
src/entry/gs/components/banner/banner.vue 0 → 100644
View file @ 2972adfb
This diff is collapsed.
src/entry/gs/components/setBar/setBar.vue 0 → 100644
View file @ 2972adfb
<template>
<div class="set_bar">
<h2 class="title">修改标题名</h2>
<el-input
class="edit"
v-model="editTitle"
placeholder="请输入标题名"
:maxlength="titleLength"
@input="changeEdit"
></el-input>
<h2 class="title">设置表现形式</h2>
<ul class="menu">
<set-select-item
label="输入框"
:selected="type === PropertyType.Input"
:disabled="selectedDisabled"
@click.native="handleSelect(PropertyType.Input)"
>
<div class="menu-item-example menu-item-example_input"></div>
</set-select-item>
<set-select-item
label="外部链接"
:selected="type === PropertyType.Link"
:disabled="selectedDisabled"
@click.native="handleSelect(PropertyType.Link)"
>
<div class="menu-item-example menu-item-example_input"></div>
</set-select-item>
<set-select-item
label="文本域"
:selected="type === PropertyType.TextArea"
:disabled="selectedDisabled"
@click.native="handleSelect(PropertyType.TextArea)"
>
<div class="menu-item-example menu-item-example_input"></div>
</set-select-item>
<set-select-item
label="下拉框"
:selected="type === PropertyType.Select"
:disabled="selectedDisabled"
@click.native="handleSelect(PropertyType.Select)"
>
<div class="menu-item-example menu-item-example_select">
<span>下拉框</span>
<i class="iconfont iconxiangxia"></i>
</div>
</set-select-item>
<set-select-item
label="上传图片"
:selected="type === PropertyType.Image"
:disabled="selectedDisabled"
@click.native="handleSelect(PropertyType.Image)"
>
<div class="menu-item-example menu-item-example_image">
<i class="iconfont iconjiahao"></i>
</div>
</set-select-item>
<set-select-item
label="日期"
:selected="type === PropertyType.Date"
:disabled="selectedDisabled"
@click.native="handleSelect(PropertyType.Date)"
>
<div class="menu-item-example menu-item-example_date">
<i class="iconfont iconxingzhuang"></i>
</div>
</set-select-item>
<set-select-item
label="上传PDF"
:selected="type === PropertyType.File"
:disabled="selectedDisabled"
@click.native="handleSelect(PropertyType.File)"
>
<div class="menu-item-example menu-item-example_up">
<i class="iconfont iconshangchuanwenjianbeifen"></i>
</div>
</set-select-item>
<set-select-item
label="上传视频"
:selected="type === PropertyType.Video"
:disabled="selectedDisabled"
@click.native="handleSelect(PropertyType.Video)"
>
<div class="menu-item-example menu-item-example_up">
<i class="iconfont iconshangchuanwenjianbeifen"></i>
</div>
</set-select-item>
<set-select-item
label="上传语音"
:selected="type === PropertyType.Audio"
:disabled="selectedDisabled"
@click.native="handleSelect(PropertyType.Audio)"
>
<div class="menu-item-example menu-item-example_up">
<i class="iconfont iconshangchuanwenjianbeifen"></i>
</div>
</set-select-item>
<set-select-item
label="编辑器"
:selected="type === PropertyType.Editor"
:disabled="selectedDisabled"
@click.native="handleSelect(PropertyType.Editor)"
>
<div class="editor"></div>
</set-select-item>
</ul>
<div class="btn_wrapper">
<button
class="g-btn_primary"
:class="{ 'js-btn_disabled': addDisabled }"
@click="emitAddChild"
>
添加下一级
</button>
<button
class="g-btn_primary"
:class="{ 'js-btn_disabled': deleteDisabled }"
@click="emitDelete"
>
删除
</button>
</div>
</div>
</template>
<script lang="ts">
import { Component, Prop, Vue, Watch } from "vue-property-decorator";
import { PropertyType } from "@/plugins/types";
import SetSelectItem from "@/components/editTemplate/SetSelectItem.vue";
import { Property, Unit } from "@/plugins/types2";
@Component({
components: {
SetSelectItem,
},
})
export default class SetBar extends Vue {
@Prop() public selectTarget!: Unit | Property | null;
public PropertyType = PropertyType;
public editTitle = ``;
public titleLength = 100;
public get type() {
const target = this.selectTarget;
if (target) {
if (target instanceof Property) {
return target.type;
}
}
return PropertyType.Input;
}
@Watch("selectTarget.title")
public editTitleChange(val: string) {
if (val) {
this.editTitle = val;
}
}
@Watch("selectTarget.label")
public editLabelChange(val: string) {
if (val) {
this.editTitle = val;
}
}
public changeEdit() {
this.$nextTick(() => {
if (this.selectTarget) {
if (this.selectTarget.hasOwnProperty("title"))
(this.selectTarget as Unit).title = this.editTitle;
if (this.selectTarget.hasOwnProperty("label"))
(this.selectTarget as Property).label = this.editTitle;
}
});
}
public get selectedDisabled() {
return !(this.selectTarget && this.selectTarget instanceof Property);
}
public get addDisabled() {
const target = this.selectTarget;
const isL3 = target && (target as Property).parent;
// (target as Property).parent.parent;
return !(this.selectTarget && !isL3);
}
public get deleteDisabled() {
const target = this.selectTarget;
return !target || (target instanceof Unit && target.children.length > 0);
}
public handleSelect(val: PropertyType) {
if (this.selectedDisabled) return;
this.$emit("select-type", val);
}
public emitAddChild() {
if (this.addDisabled) {
return;
}
this.$emit("add-child");
}
public emitDelete() {
if (this.deleteDisabled) {
return;
}
this.$emit("delete");
}
}
</script>
<style scoped lang="less">
.set_bar {
position: relative;
height: 100%;
padding: 0 5px;
background: #fff;
border-left: 1px solid #f0f0f0;
}
.editor {
width: 125px;
vertical-align: middle;
display: inline-block;
background: white;
vertical-align: middle;
box-sizing: border-box;
margin-left: 10px;
display: inline-block;
height: 35px;
border: 1px solid #e7e7e7;
border-radius: 4px;
color: rgba(53, 53, 53, 0.4);
font-size: 12px;
}
.edit {
width: 220px;
margin-left: 19px;
margin-top: 19px;
/deep/.el-input__inner {
height: 30px !important;
line-height: 30px !important;
font-size: 12px;
&::-webkit-input-placeholder {
/* WebKit browsers */
// color: #999;
font-size: 12px;
}
&::-moz-placeholder {
/* Mozilla Firefox 19+ */
// color: #999;
font-size: 12px;
}
}
}
.g-btn_primary {
border: none;
background: #0CC399;
font-size: 14px;
color: #fff;
outline: none;
cursor: pointer;
border-radius: 8px;
}
.title {
margin: 0;
padding-left: 19px;
padding-top: 10px;
font-size: 14px;
font-weight: 400;
line-height: 44px;
border-bottom: 1px solid #f1f1f1;
}
.menu {
margin: 0;
padding: 0;
list-style: none;
}
.menu-item {
padding-left: 23px;
line-height: 35px;
font-size: 0;
margin-top: 18px; /* todo ui间距不统一,文字非对齐 */
}
.menu-item-icon_check {
vertical-align: middle;
display: inline-block;
width: 15px;
height: 15px;
border: 1px solid #d1d1d1;
border-radius: 50%;
cursor: pointer;
}
.menu-item_icon_check_active {
vertical-align: middle;
color: #50b74d;
font-size: 17px;
}
.menu-item-name {
vertical-align: middle;
display: inline-block;
width: 56px;
margin-left: 9px;
font-size: 14px;
}
.menu-item-name_active {
color: #4fb64c;
}
.menu-item-example {
vertical-align: middle;
box-sizing: border-box;
margin-left: 10px;
display: inline-block;
height: 35px;
border: 1px solid #e7e7e7;
border-radius: 4px;
color: rgba(53, 53, 53, 0.4);
font-size: 12px;
}
.menu-item-example_input {
width: 125px;
padding-left: 13px;
height: 25px;
background: white;
line-height: 25px;
}
.menu-item-example_select {
width: 125px;
padding: 0 5px 0 12px;
height: 25px;
line-height: 25px;
background: white;
i {
float: right;
font-size: 12px;
transform: scale(0.46);
}
}
.menu-item-example_image {
width: 25px;
height: 25px;
text-align: center;
background: white;
line-height: 23px;
font-size: 12px;
i {
font-size: 12px;
}
}
.menu-item-example_up {
width: 35px;
height: 25px;
background: rgba(255, 255, 255, 1);
border-radius: 4px;
text-align: center;
line-height: 25px;
border: 1px solid rgba(231, 231, 231, 1);
}
.menu-item-example_date {
width: 125px;
padding: 0 8px 0 12px;
height: 25px;
line-height: 25px;
background: white;
& i {
float: right;
font-size: 13px;
}
}
.btn_wrapper {
position: absolute;
right: 0;
bottom: 39px;
left: 0;
text-align: center;
& > button {
margin-top: 20px;
width: 220px;
height: 35px;
}
}
.js-btn_disabled {
background: #c5cfe8;
cursor: not-allowed;
}
</style>
src/entry/gs/views/editTemplate/editTemplate.vue
View file @ 2972adfb
......@@ -220,10 +220,10 @@ import CommonDialog from "@/components/CommonDialog.vue";
import NameEditor from "@/components/NameEditor.vue";
import ReadOnly from "@/views/template/readOnly.vue"; // 回显
import AddLevel1Button from "@/components/editTemplate/AddLevel1Button.vue";
import SetBar from "@/components/editTemplate/SetBar.vue";
import SetBar from "../../components/setBar/setBar.vue";
import RootUnit from "@/components/editTemplate/RootUnit.vue";
import ModifyPresentation from "@/components/editTemplate/ModifyPresentation.vue"; //修改表现形式
import banner from "@/components/editTemplate/banner.vue";
import banner from "../../components/banner/banner.vue";
import TemplatePopup from "@/views/template/TemplatePopup.vue";
import AddChildDialog from "@/components/editTemplate/AddChildDialog.vue"; //添加下一级
import AddRootDialog from "@/components/editTemplate/AddRootDialog.vue";
......@@ -334,7 +334,7 @@ export default class editTemplate extends Vue {
}
public async successCallback(val: number) {
var newrout = formatApiJson(this.rootUnitList);
for (let index = 0; index < newrout.length; index++) {
const element = newrout[index];
if (element.label === "ext") {
......@@ -1283,7 +1283,7 @@ export default class editTemplate extends Vue {
width: 17px;
height: 69px;
line-height: 69px;
background: #8ca5ff;
background: #0CC399;
border-radius: 7px 0 0 7px;
cursor: pointer;
}
......@@ -1433,7 +1433,7 @@ export default class editTemplate extends Vue {
}
}
.richTextShow_btn--focus {
background: #5779f4;
background: #0cc399;
color: white;
}
.btn-box {
......
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