Skip to content

visualcloud / Vmatrix-client

Go to a project
Commit 4e256bae by hank
Options

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

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