Commit b52bae8b authored by 黄奎's avatar 黄奎

页面修改

parent 5e256d1e
...@@ -13,6 +13,7 @@ ...@@ -13,6 +13,7 @@
border-radius: 0; border-radius: 0;
padding: 0; padding: 0;
} }
</style> </style>
<template> <template>
<div :class="{'active':searchData.isCked}"> <div :class="{'active':searchData.isCked}">
...@@ -26,13 +27,18 @@ ...@@ -26,13 +27,18 @@
</div> </div>
<div class="diy-component-preview"> <div class="diy-component-preview">
<div class="diy-search" style="min-height:91px;"> <div class="diy-search" style="min-height:91px;">
<el-form label-width="90px"> <el-form label-width="90px">
<el-form-item :label="searchData.CompData.Name" style="margin-bottom:0"> <el-form-item :label="searchData.CompData.Name" style="margin-bottom:0">
<div> <div>
<template v-for="(item,index) in imgNum"> <template v-for="(item,index) in searchData.CompData.FileList">
<img :key="index" src="../../../assets/img/default.png" style="width:80px;margin-right:20px;" alt=""> <template v-if="item">
<img :key="index" :src="item" style="width:80px;margin-right:20px;" alt="">
</template>
<template v-else>
<img :key="index" src="../../../assets/img/default.png" style="width:80px;margin-right:20px;" alt="">
</template> </template>
<div class="tradeRemark" style="margin-top:0;">{{searchData.CompData.Remark}}</div> </template>
<div class="tradeRemark" style="margin-top:0;">{{searchData.CompData.Remark}}</div>
</div> </div>
</el-form-item> </el-form-item>
</el-form> </el-form>
...@@ -49,8 +55,9 @@ ...@@ -49,8 +55,9 @@
</el-form-item> </el-form-item>
<el-form-item label="选择文件" v-if="searchData.CompData.FileCount>0"> <el-form-item label="选择文件" v-if="searchData.CompData.FileCount>0">
<div style="display:flex;"> <div style="display:flex;">
<div class="goods-add" style="width:50px;height:50px;" v-for="(item,index) in imgNum" :key="index"> <div class="goods-add" style="width:50px;height:50px;" v-for="(item,index) in searchData.CompData.FileList"
<el-button size="small" icon="el-icon-plus"></el-button> :key="index" :style="{ backgroundImage: 'url(' + item + ')' }">
<el-button size="small" icon="el-icon-plus" @click="ckedIndex=index,choicImg=true"></el-button>
</div> </div>
</div> </div>
</el-form-item> </el-form-item>
...@@ -63,23 +70,64 @@ ...@@ -63,23 +70,64 @@
</el-form-item> </el-form-item>
</el-form> </el-form>
</div> </div>
<!-- 选择图片文件 -->
<el-dialog title="选择文件" :visible.sync="choicImg" width="1240px">
<ChooseImg @SelectId="SelectId"></ChooseImg>
</el-dialog>
</div> </div>
</template> </template>
<script> <script>
import ChooseImg from "@/components/global/ChooseImg.vue";
export default { export default {
props: ["searchData", "index", "dataLeng"], props: ["searchData", "index", "dataLeng"],
components: {
ChooseImg
},
data() { data() {
return { return {
imgNum:0 choicImg: false,
ckedIndex: -1,
}; };
}, },
created() {}, created() {},
watch:{ watch: {
'searchData.CompData.FileCount'(val){ 'searchData.CompData.FileCount'(val, oldVal) {
this.imgNum = parseInt(val); var newSize = 0;
if (val != "") {
newSize = parseInt(val);
}
var oldSize = 0;
if (oldVal != "") {
oldSize = parseInt(oldVal);
}
if (newSize > 0 && oldSize == 0) {
for (var i = 0; i < newSize; i++) {
this.searchData.CompData.FileList.push("");
}
}
//清空
else if (oldSize > 0 && newSize == 0) {
this.searchData.CompData.FileList = [];
} else if (oldSize > 0 && newSize > 0 && newSize > oldSize) {
for (var i = oldSize; i < newSize; i++) {
this.searchData.CompData.FileList.push("");
}
} else if (oldSize > 0 && newSize > 0 && newSize < oldSize) {
var tempArray = JSON.parse(JSON.stringify(this.searchData.CompData.FileList));
this.searchData.CompData.FileList = [];
for (var i = 0; i < newSize; i++) {
this.searchData.CompData.FileList.push(tempArray[i]);
}
}
} }
}, },
methods: { methods: {
//选择图片
SelectId(msg) {
this.searchData.CompData.FileList[this.ckedIndex] = msg.url;
this.choicImg = false;
},
//向父组件传值 并调用排序 //向父组件传值 并调用排序
resetSord(IsUp) { resetSord(IsUp) {
this.$emit('getSord', this.index, IsUp); this.$emit('getSord', this.index, IsUp);
......
...@@ -11,8 +11,10 @@ ...@@ -11,8 +11,10 @@
<div class="diy-component-preview"> <div class="diy-component-preview">
<div class="diy-search"> <div class="diy-search">
<el-form label-width="90px"> <el-form label-width="90px">
<el-form-item :label="searchData.CompData.Name" :required="searchData.CompData.IsRequire" style="margin-bottom:0"> <el-form-item :label="searchData.CompData.Name" :required="searchData.CompData.IsRequire"
<el-input type="textarea" v-model="searchData.CompData.TextValue" :placeholder="`最多输入${searchData.CompData.WordsLength}个字`"></el-input> style="margin-bottom:0">
<el-input type="textarea" v-model="searchData.CompData.TextValue"
:placeholder="`最多输入${searchData.CompData.WordsLength}个字`"></el-input>
<div class="tradeRemark">{{searchData.CompData.Remark}}</div> <div class="tradeRemark">{{searchData.CompData.Remark}}</div>
</el-form-item> </el-form-item>
</el-form> </el-form>
...@@ -21,10 +23,12 @@ ...@@ -21,10 +23,12 @@
<div class="diy-component-edit" v-if="searchData.isCked"> <div class="diy-component-edit" v-if="searchData.isCked">
<el-form label-width="100px"> <el-form label-width="100px">
<el-form-item label="名称" required> <el-form-item label="名称" required>
<el-input v-model="searchData.CompData.Name" size="small" :maxlength="10"></el-input> <el-input v-model="searchData.CompData.Name" size="small" :maxlength="100"
:placeholder="getplaceholderStr(searchData.CompData.WordsLength)"></el-input>
</el-form-item> </el-form-item>
<el-form-item label="字数"> <el-form-item label="字数">
<el-input type="text" v-model="searchData.CompData.WordsLength" @keyup.native="checkInteger(searchData.CompData,'WordsLength')" size="small"></el-input> <el-input type="text" v-model="searchData.CompData.WordsLength"
@keyup.native="checkInteger(searchData.CompData,'WordsLength')" size="small"></el-input>
</el-form-item> </el-form-item>
<el-form-item label="提示文字"> <el-form-item label="提示文字">
<el-input type="textarea" v-model="searchData.CompData.Remark" size="small"></el-input> <el-input type="textarea" v-model="searchData.CompData.Remark" size="small"></el-input>
...@@ -41,11 +45,17 @@ ...@@ -41,11 +45,17 @@
export default { export default {
props: ["searchData", "index", "dataLeng"], props: ["searchData", "index", "dataLeng"],
data() { data() {
return { return {};
};
}, },
created() {}, created() {},
methods: { methods: {
getplaceholderStr(num) {
var str = "";
if (num > 0) {
str = "最多输入" + num + " 个字";
}
return str;
},
//向父组件传值 并调用排序 //向父组件传值 并调用排序
resetSord(IsUp) { resetSord(IsUp) {
this.$emit('getSord', this.index, IsUp); this.$emit('getSord', this.index, IsUp);
......
...@@ -11,8 +11,10 @@ ...@@ -11,8 +11,10 @@
<div class="diy-component-preview"> <div class="diy-component-preview">
<div class="diy-search"> <div class="diy-search">
<el-form label-width="90px"> <el-form label-width="90px">
<el-form-item :label="searchData.CompData.Name" :required="searchData.CompData.IsRequire" style="margin-bottom:0"> <el-form-item :label="searchData.CompData.Name" :required="searchData.CompData.IsRequire"
<el-input v-model="searchData.CompData.TextValue" :placeholder="`最多输入${searchData.CompData.WordsLength}个字`"></el-input> style="margin-bottom:0">
<el-input v-model="searchData.CompData.TextValue" :placeholder="getplaceholderStr(searchData.CompData.WordsLength)">
</el-input>
<div class="tradeRemark">{{searchData.CompData.Remark}}</div> <div class="tradeRemark">{{searchData.CompData.Remark}}</div>
</el-form-item> </el-form-item>
</el-form> </el-form>
...@@ -21,7 +23,7 @@ ...@@ -21,7 +23,7 @@
<div class="diy-component-edit" v-if="searchData.isCked"> <div class="diy-component-edit" v-if="searchData.isCked">
<el-form label-width="100px"> <el-form label-width="100px">
<el-form-item label="名称" required> <el-form-item label="名称" required>
<el-input v-model="searchData.CompData.Name" size="small" :maxlength="10"></el-input> <el-input v-model="searchData.CompData.Name" size="small" :maxlength="100"></el-input>
</el-form-item> </el-form-item>
<el-form-item label="字数"> <el-form-item label="字数">
<el-input type="text" v-model="searchData.CompData.WordsLength" <el-input type="text" v-model="searchData.CompData.WordsLength"
...@@ -42,11 +44,18 @@ ...@@ -42,11 +44,18 @@
export default { export default {
props: ["searchData", "index", "dataLeng"], props: ["searchData", "index", "dataLeng"],
data() { data() {
return { return {};
};
}, },
created() {}, created() {},
methods: { methods: {
getplaceholderStr(num)
{
var str = "";
if (num > 0) {
str = "最多输入" + num + " 个字";
}
return str;
},
//向父组件传值 并调用排序 //向父组件传值 并调用排序
resetSord(IsUp) { resetSord(IsUp) {
this.$emit('getSord', this.index, IsUp); this.$emit('getSord', this.index, IsUp);
......
...@@ -10,13 +10,18 @@ ...@@ -10,13 +10,18 @@
</div> </div>
<div class="diy-component-preview"> <div class="diy-component-preview">
<div class="diy-search" style="min-height:91px;"> <div class="diy-search" style="min-height:91px;">
<el-form label-width="90px"> <el-form label-width="90px">
<el-form-item :label="searchData.CompData.Name" style="margin-bottom:0"> <el-form-item :label="searchData.CompData.Name" style="margin-bottom:0">
<div > <div>
<template v-for="(item,index) in imgNum"> <template v-for="(item,index) in searchData.CompData.FileList">
<img :key="index" src="../../../assets/img/default.png" style="width:80px;margin-right:20px;" alt=""> <template v-if="item">
<img :key="index" :src="item" style="width:80px;margin-right:20px;" alt="">
</template> </template>
<div class="tradeRemark" style="margin-top:0;">{{searchData.CompData.Remark}}</div> <template v-else>
<img :key="index" src="../../../assets/img/default.png" style="width:80px;margin-right:20px;" alt="">
</template>
</template>
<div class="tradeRemark" style="margin-top:0;">{{searchData.CompData.Remark}}</div>
</div> </div>
</el-form-item> </el-form-item>
</el-form> </el-form>
...@@ -31,6 +36,14 @@ ...@@ -31,6 +36,14 @@
<el-input v-model="searchData.CompData.FileCount" <el-input v-model="searchData.CompData.FileCount"
@keyup.native="checkInteger(searchData.CompData,'FileCount')" size="small"></el-input> @keyup.native="checkInteger(searchData.CompData,'FileCount')" size="small"></el-input>
</el-form-item> </el-form-item>
<el-form-item label="选择文件" v-if="searchData.CompData.FileCount>0">
<div style="display:flex;">
<div class="goods-add" style="width:50px;height:50px;" v-for="(item,index) in searchData.CompData.FileList"
:key="index" :style="{ backgroundImage: 'url(' + item + ')' }">
<el-button size="small" icon="el-icon-plus" @click="ckedIndex=index,choicImg=true"></el-button>
</div>
</div>
</el-form-item>
<el-form-item label="上传文件大小"> <el-form-item label="上传文件大小">
<el-input v-model="searchData.CompData.FileSizeLimit" <el-input v-model="searchData.CompData.FileSizeLimit"
@keyup.native="checkInteger(searchData.CompData,'FileSizeLimit')" size="small"></el-input> @keyup.native="checkInteger(searchData.CompData,'FileSizeLimit')" size="small"></el-input>
...@@ -40,23 +53,63 @@ ...@@ -40,23 +53,63 @@
</el-form-item> </el-form-item>
</el-form> </el-form>
</div> </div>
<!-- 选择图片文件 -->
<el-dialog title="选择文件" :visible.sync="choicImg" width="1240px">
<ChooseImg @SelectId="SelectId"></ChooseImg>
</el-dialog>
</div> </div>
</template> </template>
<script> <script>
import ChooseImg from "@/components/global/ChooseImg.vue";
export default { export default {
props: ["searchData", "index", "dataLeng"], props: ["searchData", "index", "dataLeng"],
components: {
ChooseImg
},
data() { data() {
return { return {
imgNum:0 choicImg: false,
ckedIndex: -1,
}; };
}, },
created() {}, created() {},
watch:{ watch: {
'searchData.CompData.FileCount'(val){ 'searchData.CompData.FileCount'(val, oldVal) {
this.imgNum = parseInt(val); var newSize = 0;
if (val != "") {
newSize = parseInt(val);
}
var oldSize = 0;
if (oldVal != "") {
oldSize = parseInt(oldVal);
}
if (newSize > 0 && oldSize == 0) {
for (var i = 0; i < newSize; i++) {
this.searchData.CompData.FileList.push("");
}
}
//清空
else if (oldSize > 0 && newSize == 0) {
this.searchData.CompData.FileList = [];
} else if (oldSize > 0 && newSize > 0 && newSize > oldSize) {
for (var i = oldSize; i < newSize; i++) {
this.searchData.CompData.FileList.push("");
}
} else if (oldSize > 0 && newSize > 0 && newSize < oldSize) {
var tempArray = JSON.parse(JSON.stringify(this.searchData.CompData.FileList));
this.searchData.CompData.FileList = [];
for (var i = 0; i < newSize; i++) {
this.searchData.CompData.FileList.push(tempArray[i]);
}
}
} }
}, },
methods: { methods: {
//选择图片
SelectId(msg) {
this.searchData.CompData.FileList[this.ckedIndex] = msg.url;
this.choicImg = false;
},
//向父组件传值 并调用排序 //向父组件传值 并调用排序
resetSord(IsUp) { resetSord(IsUp) {
this.$emit('getSord', this.index, IsUp); this.$emit('getSord', this.index, IsUp);
......
...@@ -426,9 +426,9 @@ ...@@ -426,9 +426,9 @@
CompData: { CompData: {
Name: "", //名字 Name: "", //名字
WordsLength: "", //字数 WordsLength: "", //字数
TextValue:'', TextValue:'',//绑定值
IsRequire: false, IsRequire: false,//是否必填
Remark:'' Remark:'',//提示信息
}, },
}; };
this.addMsg.FormData.push(singleObj); this.addMsg.FormData.push(singleObj);
...@@ -441,9 +441,9 @@ ...@@ -441,9 +441,9 @@
CompData: { CompData: {
Name: "", //名字 Name: "", //名字
WordsLength: "", //字数 WordsLength: "", //字数
TextValue:'', TextValue:'',//绑定值
IsRequire: false, IsRequire: false,//是否必填
Remark:'' Remark:'',//提示信息
}, },
}; };
this.addMsg.FormData.push(multiObj); this.addMsg.FormData.push(multiObj);
...@@ -459,7 +459,7 @@ ...@@ -459,7 +459,7 @@
OptionValue: '', //选项值 OptionValue: '', //选项值
IsRequire: false, //是否必填 IsRequire: false, //是否必填
OptionList:[], OptionList:[],
Remark:'' Remark:'',//提示信息
}, },
}; };
this.addMsg.FormData.push(dorpObj); this.addMsg.FormData.push(dorpObj);
...@@ -473,7 +473,8 @@ ...@@ -473,7 +473,8 @@
Name: "", //名字 Name: "", //名字
FileCount: '', //上传文件数量 FileCount: '', //上传文件数量
FileSizeLimit: '', //上传文件大小 FileSizeLimit: '', //上传文件大小
Remark:'' Remark:'',//提示信息
FileList:[],//文件列表
}, },
}; };
this.addMsg.FormData.push(imgObj); this.addMsg.FormData.push(imgObj);
...@@ -487,7 +488,8 @@ ...@@ -487,7 +488,8 @@
Name: "", //名字 Name: "", //名字
FileCount: '', //上传文件数量 FileCount: '', //上传文件数量
FileSizeLimit: '', //上传文件大小 FileSizeLimit: '', //上传文件大小
Remark:'' Remark:'',//提示信息
FileList:[],//文件列表
}, },
}; };
this.addMsg.FormData.push(videoObj); this.addMsg.FormData.push(videoObj);
......
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