Skip to content

visualcloud / Vmatrix-client

Go to a project
Commit 4e256bae by hank
Options

修改编辑项数据限制以及提示

parent a4c93918
Showing with 181 additions and 47 deletions
src/App.vue
<template> <template>
<div id="app"> <div id="app">
<transition :name="transitionName" > <keep-alive v-if="$route.meta.keepAlive">
<keep-alive v-show="$route.meta.keepAlive"> <router-view class="child-view" />
<router-view class="child-view"/> </keep-alive>
</keep-alive> <router-view class="child-view" v-if="!$route.meta.keepAlive" />
<router-view class="child-view" v-show="!$route.meta.keepAlive"/> <!-- <transition :name="transitionName" >
</transition>
</transition>-->
</div> </div>
</template> </template>
<script> <script>
...@@ -14,12 +14,13 @@ ...@@ -14,12 +14,13 @@
export default { export default {
data() { data() {
return { return {
transitionName: '', transitionName: "",
keepAlive: false keepAlive: false
} };
}, },
watch: { watch: {
$route: function() { $route: function() {
console.log(this.$route.meta.keepAlive)
// let isBack = this.$router.isBack // let isBack = this.$router.isBack
// if (isBack) { // if (isBack) {
// this.transitionName = 'slide-right' // this.transitionName = 'slide-right'
...@@ -32,31 +33,33 @@ export default { ...@@ -32,31 +33,33 @@ export default {
// this.$router.isBack = false // this.$router.isBack = false
} }
}, },
created () { created() {
if (window.history && window.history.pushState) { if (window.history && window.history.pushState) {
history.pushState(null, null, document.URL) history.pushState(null, null, document.URL);
window.addEventListener( window.addEventListener(
'popstate', () => { "popstate",
console.log('popstate') () => {
this.$router.isBack = true console.log("popstate");
this.$router.isBack = true;
}, },
false false
) );
window.addEventListener( window.addEventListener(
'pushstate', () => { "pushstate",
console.log('pushstate') () => {
this.$router.isBack = false console.log("pushstate");
this.$router.isBack = false;
}, },
false false
) );
} }
} }
} };
</script> </script>
<style lang="scss"> <style lang="scss">
#app { #app {
font-family: 'Avenir', Helvetica, Arial, sans-serif; font-family: "Avenir", Helvetica, Arial, sans-serif;
-webkit-font-smoothing: antialiased; -webkit-font-smoothing: antialiased;
-moz-osx-font-smoothing: grayscale; -moz-osx-font-smoothing: grayscale;
text-align: center; text-align: center;
...@@ -80,7 +83,8 @@ export default { ...@@ -80,7 +83,8 @@ export default {
width: 100%; width: 100%;
min-height: 100vh; min-height: 100vh;
} }
html, body { html,
body {
min-height: 100vh; min-height: 100vh;
} }
.slide-left-enter, .slide-left-enter,
...@@ -108,5 +112,4 @@ html, body { ...@@ -108,5 +112,4 @@ html, body {
transition: opacity 0.3s !important; transition: opacity 0.3s !important;
/* opacity: 0 !important; */ /* opacity: 0 !important; */
} }
</style> </style>
src/store/getters.js
const getters = { const getters = {
sidebar: state => state.app.sidebar, sidebar: state => state.app.sidebar,
device: state => state.app.device, device: state => state.app.device,
token: state => state.user.token token: state => state.user.token,
errorData: state => state.app.errorData
} }
export default getters export default getters
src/store/modules/app.js
...@@ -5,7 +5,8 @@ const app = { ...@@ -5,7 +5,8 @@ const app = {
opened: !+localStorage.getItem('sidebarStatus'), opened: !+localStorage.getItem('sidebarStatus'),
withoutAnimation: false withoutAnimation: false
}, },
device: 'desktop' device: 'desktop',
errorData: {}
}, },
mutations: { mutations: {
TOGGLE_SIDEBAR: state => { TOGGLE_SIDEBAR: state => {
...@@ -24,6 +25,9 @@ const app = { ...@@ -24,6 +25,9 @@ const app = {
}, },
TOGGLE_DEVICE: (state, device) => { TOGGLE_DEVICE: (state, device) => {
state.device = device state.device = device
},
SET_ERROR_DATA: (state, errorData) => {
state.errorData = errorData
} }
}, },
actions: { actions: {
......
src/views/tempaltes/editMenu.vue
...@@ -24,19 +24,33 @@ ...@@ -24,19 +24,33 @@
/>是否隐藏 />是否隐藏
</label> </label>
</div> </div>
<div> <div class="form-container">
<div <div
class="input-title" class="input-title"
v-if="item.type === 'text' || item.type === 'textarea' || item.type === 'number'" v-if="item.type === 'text' || item.type === 'textarea' || item.type === 'number'"
>{{item.description}}</div> >{{item.description}}</div>
<input <input
v-if="item.type === 'number'"
class="edit-input"
:class="{'edit-input-error': errorData[item.dataKey]}"
type="number"
:maxlength="item.maxlength ? item.maxlength : ''"
:minlength="item.minlength ? item.minlength : ''"
@blur="onBlur"
@change="inputValueChange(item, schemaData[item.dataKey])"
:placeholder="item.description"
v-model="schemaData[item.dataKey].value"
@keyup="valueChange2()"
/>
<input
v-if="item.type === 'text'" v-if="item.type === 'text'"
class="edit-input" class="edit-input"
:class="{'edit-input-error': errorData[item.dataKey]}"
type="text" type="text"
:maxlength="item.maxlength ? parseInt(item.maxlength) : ''" :maxlength="item.maxlength ? item.maxlength : ''"
:minlength="item.minlength ? parseInt(item.maxlength) : ''" :minlength="item.minlength ? item.minlength : ''"
@blur="onBlur" @blur="onBlur"
@change="valueChange2()" @change="inputValueChange(item, schemaData[item.dataKey])"
:placeholder="item.description" :placeholder="item.description"
v-model="schemaData[item.dataKey].value" v-model="schemaData[item.dataKey].value"
@keyup="valueChange2()" @keyup="valueChange2()"
...@@ -44,14 +58,18 @@ ...@@ -44,14 +58,18 @@
<textarea <textarea
v-if="item.type === 'textarea'" v-if="item.type === 'textarea'"
class="edit-input-area" class="edit-input-area"
:class="{'edit-input-error': errorData[item.dataKey]}"
@blur="onBlur" @blur="onBlur"
:maxlength="item.maxlength ? item.maxlength : ''"
:minlength="item.minlength ? item.minlength : ''"
:placeholder="item.description" :placeholder="item.description"
v-model="schemaData[item.dataKey].value" v-model="schemaData[item.dataKey].value"
@keyup="valueChange2()" @change="inputValueChange(item, schemaData[item.dataKey])"
@input="valueChange2()" @input="valueChange2"
cols="30" cols="30"
rows="5" rows="5"
></textarea> ></textarea>
<div class="input-error-tips">{{errorData[itemKey]}}</div>
</div> </div>
<div v-if="item.type === 'group'"> <div v-if="item.type === 'group'">
<div v-for="(children, index) in item.itemList" :key="index"> <div v-for="(children, index) in item.itemList" :key="index">
...@@ -62,6 +80,7 @@ ...@@ -62,6 +80,7 @@
:schemaData="schemaData" :schemaData="schemaData"
:frameUrl="frameUrl" :frameUrl="frameUrl"
@setList="setList" @setList="setList"
:errorData="errorData"
></editMenu> ></editMenu>
</div> </div>
</div> </div>
...@@ -78,19 +97,40 @@ ...@@ -78,19 +97,40 @@
</div> </div>
<div class="list-item-list"> <div class="list-item-list">
<div class="list-item-list-item" v-for="(item3, index3) in item2" :key="index3"> <div class="list-item-list-item" v-for="(item3, index3) in item2" :key="index3">
<div <!-- <div
class="input-title" class="input-title"
v-if="item.modelSchema[isSchemaIndex(item2)][index3].type === 'text' || item.modelSchema[isSchemaIndex(item2)][index3].type === 'textarea'" v-if="item.modelSchema[isSchemaIndex(item2)][index3].type === 'text' || item.modelSchema[isSchemaIndex(item2)][index3].type === 'textarea' && item.description"
>{{item.description}}</div> >{{item.description}}</div> -->
<div v-if="(index3 != 'schemaIndex' && index3 != 'index')"> <div class="form-container" v-if="(index3 != 'schemaIndex' && index3 != 'index')">
<div
class="input-title"
v-if="item.modelSchema[isSchemaIndex(item2)][index3].type === 'text' || item.modelSchema[isSchemaIndex(item2)][index3].type === 'textarea'"
v-show="item.modelSchema[isSchemaIndex(item2)][index3].description.trim()"
>{{item.modelSchema[isSchemaIndex(item2)][index3].description}}</div>
<!-- {{item.modelSchema[isSchemaIndex(item2)][index3].description.trim()}} -->
<input
v-if="item.modelSchema[isSchemaIndex(item2)][index3].type === 'number'"
:placeholder="item.modelSchema[isSchemaIndex(item2)][index3].description"
class="edit-input edit-input-list-item"
:class="{'edit-input-error': errorData[index3 + index2]}"
type="number"
:maxlength="item.modelSchema[isSchemaIndex(item2)][index3].maxlength ? item.modelSchema[isSchemaIndex(item2)][index3].maxlength : ''"
:minlength="item.modelSchema[isSchemaIndex(item2)][index3].minlength ? item.modelSchema[isSchemaIndex(item2)][index3].minlength : ''"
@blur="onBlur"
v-model="item2[index3]"
@change="inputValueChange(item.modelSchema[isSchemaIndex(item2)][index3], item2[index3], 'list', index3, index2)"
/>
<input <input
v-if="item.modelSchema[isSchemaIndex(item2)][index3].type === 'text'" v-if="item.modelSchema[isSchemaIndex(item2)][index3].type === 'text'"
:placeholder="item.modelSchema[isSchemaIndex(item2)][index3].description" :placeholder="item.modelSchema[isSchemaIndex(item2)][index3].description"
class="edit-input edit-input-list-item" class="edit-input edit-input-list-item"
:class="{'edit-input-error': errorData[index3 + index2]}"
type="text" type="text"
:maxlength="item.modelSchema[isSchemaIndex(item2)][index3].maxlength ? item.modelSchema[isSchemaIndex(item2)][index3].maxlength : ''"
:minlength="item.modelSchema[isSchemaIndex(item2)][index3].minlength ? item.modelSchema[isSchemaIndex(item2)][index3].minlength : ''"
@blur="onBlur" @blur="onBlur"
v-model="item2[index3]" v-model="item2[index3]"
@keyup="valueChange2()" @change="inputValueChange(item.modelSchema[isSchemaIndex(item2)][index3], item2[index3], 'list', index3, index2)"
/> />
<textarea <textarea
cols="30" cols="30"
...@@ -98,11 +138,15 @@ ...@@ -98,11 +138,15 @@
v-if="item.modelSchema[isSchemaIndex(item2)][index3].type === 'textarea'" v-if="item.modelSchema[isSchemaIndex(item2)][index3].type === 'textarea'"
:placeholder="item.modelSchema[isSchemaIndex(item2)][index3].description" :placeholder="item.modelSchema[isSchemaIndex(item2)][index3].description"
class="edit-input-area edit-input-list-item" class="edit-input-area edit-input-list-item"
:class="{'edit-input-error': errorData[index3 + index2]}"
:maxlength="item.modelSchema[isSchemaIndex(item2)][index3].maxlength ? item.modelSchema[isSchemaIndex(item2)][index3].maxlength : ''"
:minlength="item.modelSchema[isSchemaIndex(item2)][index3].minlength ? item.modelSchema[isSchemaIndex(item2)][index3].minlength : ''"
type="text" type="text"
@blur="onBlur" @blur="onBlur"
v-model="item2[index3]" v-model="item2[index3]"
@keyup="valueChange2()" @change="inputValueChange"
/> />
<div class="input-error-tips">{{errorData[index3 + index2]}}</div>
<div> <div>
<van-uploader <van-uploader
result-type="dataUrl" result-type="dataUrl"
...@@ -126,7 +170,10 @@ ...@@ -126,7 +170,10 @@
</div> </div>
</div> </div>
</div> </div>
<div class="list-item-delete"> <div
class="list-item-delete"
v-show="schemaData[item.dataKey] && schemaData[item.dataKey].length > 1"
>
<span @click="deleteItem(index2, schemaData[item.dataKey])"> <span @click="deleteItem(index2, schemaData[item.dataKey])">
<img src="../../assets/img/delete-icon.png" class="list-item-delete-icon" alt /> <img src="../../assets/img/delete-icon.png" class="list-item-delete-icon" alt />
<span class="del-btn">删除</span> <span class="del-btn">删除</span>
...@@ -222,6 +269,10 @@ export default { ...@@ -222,6 +269,10 @@ export default {
type: String, type: String,
default: "" default: ""
}, },
// errorData: {
// type: Object,
// default: () => {}
// },
item: { item: {
type: Object, type: Object,
default: () => {} default: () => {}
...@@ -244,7 +295,7 @@ export default { ...@@ -244,7 +295,7 @@ export default {
VueCropper VueCropper
}, },
mounted() { mounted() {
console.log(this.tempalteShow, "this.tempalteShow"); // console.log(this.tempalteShow, "this.tempalteShow");
if (this.tempalteShow === "HORIZONTAL") { if (this.tempalteShow === "HORIZONTAL") {
this.VueCropperOption.fixedNumber = [16, 9]; this.VueCropperOption.fixedNumber = [16, 9];
} else { } else {
...@@ -252,6 +303,11 @@ export default { ...@@ -252,6 +303,11 @@ export default {
} }
}, },
created() {}, created() {},
computed: {
errorData() {
return this.$store.state.app.errorData;
}
},
data() { data() {
return { return {
activeName: "", activeName: "",
...@@ -261,6 +317,7 @@ export default { ...@@ -261,6 +317,7 @@ export default {
selectData: { selectData: {
show: false show: false
}, },
listErr: {},
VueCropperOption: { VueCropperOption: {
fixedState: 0, fixedState: 0,
img: "", img: "",
...@@ -274,6 +331,7 @@ export default { ...@@ -274,6 +331,7 @@ export default {
}, },
methods: { methods: {
changeFixedState(state) { changeFixedState(state) {
// 当点裁剪击切换比列
this.VueCropperOption.fixedState = state; this.VueCropperOption.fixedState = state;
if (state === 0) { if (state === 0) {
this.VueCropperOption.fixedNumber = [16, 9]; this.VueCropperOption.fixedNumber = [16, 9];
...@@ -322,19 +380,80 @@ export default { ...@@ -322,19 +380,80 @@ export default {
}, },
onBlur() { onBlur() {
var top = window.scrollY; var top = window.scrollY;
console.log(top); // console.log(top);
window.scrollTo(0, 0); window.scrollTo(0, 0);
var time = setTimeout(() => { var time = setTimeout(() => {
window.scrollTo(0, top); window.scrollTo(0, top);
clearTimeout(time); clearTimeout(time);
}, 100); }, 100);
}, },
inputValueChange(item, value, isList, key, Listindex) {
this.valueChange2();
let errorData = JSON.parse(JSON.stringify(this.errorData));
function isArray(obj) {
Object.prototype.toString.call(obj) === "[object Array]";
}
// function isReg(obj) {
// Object.prototype.toString.call(obj) === "[object String]";
// }
let val = value.value || value;
// 判断最小长度
if (item.minlength && value.length < item.minlength) {
if (isList) {
errorData[key + Listindex] = "数据长度最小为" + item.minlength;
} else {
errorData[item.dataKey] = "数据长度最小为" + item.minlength;
}
this.$store.commit("SET_ERROR_DATA", errorData);
// console.log(errorData, item);
this.$toast("数据长度最小为" + item.minlength);
return;
} else {
delete errorData[key + Listindex];
this.$store.commit("SET_ERROR_DATA", errorData);
}
if (item.maxlength && value.length > item.maxlength) {
if (isList) {
errorData[key + Listindex] = "数据长度最大为" + item.maxlength;
} else {
errorData[item.dataKey] = "数据长度最大为" + item.maxlength;
}
this.$store.commit("SET_ERROR_DATA", errorData);
this.$toast("数据长度最大为" + item.maxlength);
return;
} else {
delete errorData[key + Listindex];
this.$store.commit("SET_ERROR_DATA", errorData);
}
if (item.valueRule && isArray(item.valueRule)) {
if (isList === "list") {
if (new RegExp(item.valueRule, "g").test(val)) {
delete this.errorData[item.dataKey];
} else {
errorData[key + Listindex] = value;
console.error(errorData);
this.$toast("数据不合法");
}
} else {
if (new RegExp(item.valueRule, "g").test(val)) {
delete errorData[item.dataKey];
} else {
errorData[item.dataKey] = value;
this.$toast("数据不合法");
}
}
} else {
// this.valueChange2();
}
this.$store.commit("SET_ERROR_DATA", errorData);
},
valueChange2() { valueChange2() {
console.log(this.schemaData); // console.log(this.schemaData);
this.$emit("setList", this.schemaData);
setTimeout(() => { setTimeout(() => {
this.$emit("setList", this.schemaData); this.$emit("setList", this.schemaData);
}, 100); }, 100);
this.$emit("setList", this.schemaData);
}, },
setList() { setList() {
this.$emit("setList", this.schemaData); this.$emit("setList", this.schemaData);
...@@ -347,14 +466,12 @@ export default { ...@@ -347,14 +466,12 @@ export default {
this.dataKey = key; this.dataKey = key;
this.listIndex = index; this.listIndex = index;
this.itemKey = itemKey; this.itemKey = itemKey;
console.log(key, index, itemKey, "dsadadsa");
}, },
isSchemaIndex(item) { isSchemaIndex(item) {
// console.log(item); // console.log(item);
return item["schemaIndex"] ? item["schemaIndex"] : 0; return item["schemaIndex"] ? item["schemaIndex"] : 0;
}, },
toObj(obj) { toObj(obj) {
console.log(obj);
return JSON.parse(JSON.stringify(obj)); return JSON.parse(JSON.stringify(obj));
}, },
addItem(item) { addItem(item) {
...@@ -365,7 +482,6 @@ export default { ...@@ -365,7 +482,6 @@ export default {
obj[item] = ""; obj[item] = "";
}); });
this.schemaData[item.dataKey].push(obj); this.schemaData[item.dataKey].push(obj);
console.log(obj);
} else { } else {
alert("选择类型添加，敬请期待！"); alert("选择类型添加，敬请期待！");
} }
...@@ -412,7 +528,6 @@ export default { ...@@ -412,7 +528,6 @@ export default {
this.$emit("setClipImg", false); this.$emit("setClipImg", false);
this.VueCropperOption.img = ""; this.VueCropperOption.img = "";
this.$refs.cropper.getCropBlob(data => { this.$refs.cropper.getCropBlob(data => {
console.log(data);
// do something // do something
this.uploadFile(data); this.uploadFile(data);
}); });
...@@ -634,6 +749,7 @@ export default { ...@@ -634,6 +749,7 @@ export default {
font-weight: bold; font-weight: bold;
padding-top: 23px; padding-top: 23px;
padding-bottom: 16px; padding-bottom: 16px;
color: black;
} }
.edit-input { .edit-input {
width: 97%; width: 97%;
...@@ -653,6 +769,14 @@ export default { ...@@ -653,6 +769,14 @@ export default {
border: none; border: none;
outline: none; outline: none;
} }
.edit-input-error {
border: 1px solid red;
box-sizing: border-box;
}
.input-error-tips {
font-size: 12px;
color: red;
}
} }
</style> </style>
src/views/tempaltes/editMore.vue
...@@ -242,6 +242,7 @@ ...@@ -242,6 +242,7 @@
:schemaData="templateData.listData[currentPage].schemaData" :schemaData="templateData.listData[currentPage].schemaData"
:frameUrl="templateData.frameUrl" :frameUrl="templateData.frameUrl"
:templateShow="templateData.templateShow" :templateShow="templateData.templateShow"
:errorData="errorData"
@setList="setList" @setList="setList"
@setClipImg="setClipImg" @setClipImg="setClipImg"
></editMenu> ></editMenu>
...@@ -347,6 +348,7 @@ export default { ...@@ -347,6 +348,7 @@ export default {
defaultData: [], defaultData: [],
templateInfo: {} templateInfo: {}
}, },
errorData: {},
clipImg: false, clipImg: false,
editObj: {}, editObj: {},
editIndex: "", editIndex: "",
...@@ -382,7 +384,7 @@ export default { ...@@ -382,7 +384,7 @@ export default {
}, },
watch: { watch: {
currentPage: function() { // 页面改变时 改变编辑项的索引 currentPage: function() { // 页面改变时 改变编辑项的索引
this.itemListIndex = 0; this.itemListIndex = 0;
} }
}, },
activated() { // keepalive 下显示触发 activated() { // keepalive 下显示触发
......
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 sign in to comment