Skip to content

V
vue-gjjs
Commit b5152d8b by yangxiaolei
Options

依赖收集添加其它颜色

parent 828fb1c9
Showing with 258 additions and 138 deletions
src/business/litdck/event/index.js
...@@ -55,6 +55,8 @@ export default { ...@@ -55,6 +55,8 @@ export default {
// 兼容处理在前端model中定义了字段，后端返回的数据中不存在字段的问题 // 兼容处理在前端model中定义了字段，后端返回的数据中不存在字段的问题
copyValueFromVoData (model, data) { copyValueFromVoData (model, data) {
model.modifySet = [] model.modifySet = []
model.ebankSet = []
model.incSet = []
let keysList = Object.keys(model) let keysList = Object.keys(model)
keysList.map((key) => { keysList.map((key) => {
if (data[key]) { if (data[key]) {
......
src/business/litopn/event/index.js
...@@ -41,6 +41,8 @@ export default { ...@@ -41,6 +41,8 @@ export default {
// 兼容处理在前端model中定义了字段，后端返回的数据中不存在字段的问题 // 兼容处理在前端model中定义了字段，后端返回的数据中不存在字段的问题
copyValueFromVoData (model, data) { copyValueFromVoData (model, data) {
model.modifySet = [] model.modifySet = []
model.ebankSet = []
model.incSet = []
let keysList = Object.keys(model) let keysList = Object.keys(model)
keysList.map((key) => { keysList.map((key) => {
if (data[key]) { if (data[key]) {
......
src/components/DatePicker.vue
<template> <template>
<el-date-picker v-storeModify :id="id" :class="{'highlight': highlight,'redClass':red && isDisplay}" v-model="model" v-bind="attrs" v-on="$listeners" v-bind:disabled="isDisable" :value-format="valueFormat" :format="format"></el-date-picker> <el-date-picker v-storeModify :id="id"
:class="{ 'highlight': highlight, 'greenClass': isGreen && isDisplay, 'yellowClass': isYellow && isDisplay, 'redClass': isRed && isDisplay }"
v-model="model" v-bind="attrs" v-on="$listeners" v-bind:disabled="isDisable" :value-format="valueFormat"
:format="format"></el-date-picker>
</template> </template>
<script> <script>
export default { export default {
inject: ["root"], inject: ["root"],
directives:{ directives: {
storeModify:{ storeModify: {
update(el,bind,vnode){ update(el, bind, vnode) {
let target = el.querySelector('.el-input__inner') let target = el.querySelector('.el-input__inner')
let _this = vnode.context let _this = vnode.context
let key = vnode.parent.data.model.expression let key = vnode.parent.data.model.expression
let keyArray = key.split('.') let keyArray = key.split('.')
let curKey = keyArray.pop() let curKey = keyArray.pop()
let resultKey = keyArray.join(".") let resultKey = keyArray.join(".")
let deepData = _this.getProperty(resultKey,_this.root) let deepData = _this.getProperty(resultKey, _this.root)
if(deepData && Array.isArray(deepData.modifySet)){ if (deepData && Array.isArray(deepData.modifySet)) {
if(deepData.modifySet.includes(curKey)){ if (deepData.modifySet.includes(curKey)) {
_this.red = true _this.isRed = true
} }
} }
target.onfocus = (...args)=>{ if (deepData && Array.isArray(deepData.ebankSet)) {
if(deepData.modifySet){ if (deepData.ebankSet.includes(curKey)) {
if(Array.isArray(deepData.modifySet)){ _this.isYellow = true
if(deepData.modifySet.includes(curKey)){
return }
} }
deepData.modifySet.push(curKey) if (deepData && Array.isArray(deepData.incSet)) {
if (deepData.incSet.includes(curKey)) {
_this.isGreen = true
}
}
target.onfocus = (...args) => {
if (deepData.modifySet) {
if (Array.isArray(deepData.modifySet)) {
if (deepData.modifySet.includes(curKey)) {
return
}
deepData.modifySet.push(curKey)
} }
} else { } else {
deepData.modifySet = [curKey] deepData.modifySet = [curKey]
...@@ -56,46 +70,47 @@ export default { ...@@ -56,46 +70,47 @@ export default {
default: undefined default: undefined
} }
}, },
data(){ data() {
return { return {
red:false isRed: false,
isGreen: false,
isYellow: false
} }
}, },
computed: { computed: {
model: { model: {
get () { get() {
return this.value return this.value
}, },
set (newVal) { set(newVal) {
this.$emit('input', newVal) this.$emit('input', newVal)
} }
}, },
mode () { mode() {
return this.$store.state.Status.mode return this.$store.state.Status.mode
}, },
isDisable: { isDisable: {
get () { get() {
return this.mode === 'display' || this.disabled return this.mode === 'display' || this.disabled
} }
}, },
isDisplay: { isDisplay: {
get () { get() {
return this.mode === 'display' return this.mode === 'display'
} }
}, },
highlight () { highlight() {
return this.$store.state.Status.highlights.indexOf(this.id) !== -1 return this.$store.state.Status.highlights.indexOf(this.id) !== -1
}, },
attrs(){ attrs() {
if(this.mode === 'display' || this.disabled) if (this.mode === 'display' || this.disabled) {
{ let { placeholder, ...rest } = this.$attrs
let {placeholder,...rest} = this.$attrs
return rest return rest
} }
return this.$attrs return this.$attrs
} }
}, },
methods:{ methods: {
getProperty(str, value) { getProperty(str, value) {
let keys = str?.split('.') let keys = str?.split('.')
for (let key of keys) { for (let key of keys) {
...@@ -110,11 +125,26 @@ export default { ...@@ -110,11 +125,26 @@ export default {
</script> </script>
<style lang="less" scoped> <style lang="less" scoped>
.el-input.highlight .el-input__inner{ .greenClass /deep/ .el-input__inner {
border-color: red; border-color: green;
} }
.redClass /deep/ .el-input__inner{
.greenClass /deep/ .el-textarea__inner {
border-color: green;
}
.yellowClass /deep/ .el-input__inner {
border-color: blue;
}
.yellowClass /deep/ .el-textarea__inner {
border-color: blue;
}
.redClass /deep/ .el-input__inner {
border-color: red; border-color: red;
} }
</style> .redClass /deep/ .el-textarea__inner {
\ No newline at end of file border-color: red;
}</style>
\ No newline at end of file
src/components/Input.vue
<template> <template>
<el-input :class="{'redClass':red && isDisplay}" v-storeModify :id="id" ref="form-item" v-model="model" v-bind="attrs" v-on="$listeners" v-bind:disabled="isDisable"> <el-input :class="{ 'greenClass': isGreen && isDisplay, 'yellowClass': isYellow && isDisplay, 'redClass': isRed && isDisplay }"
v-storeModify :id="id" ref="form-item" v-model="model" v-bind="attrs" v-on="$listeners" v-bind:disabled="isDisable">
<template v-slot:suffix> <template v-slot:suffix>
<slot name="suffix"></slot> <slot name="suffix"></slot>
</template> </template>
...@@ -23,80 +24,109 @@ export default { ...@@ -23,80 +24,109 @@ export default {
default: undefined default: undefined
} }
}, },
data(){ data() {
return { return {
red:false isRed: false,
isGreen: false,
isYellow: false
} }
}, },
directives:{ directives: {
storeModify:{ storeModify: {
update(el,bind,vnode){ update(el, bind, vnode) {
let _this = vnode.context let _this = vnode.context
let key = vnode.parent.data.model.expression let key = vnode.parent.data.model.expression
let keyArray = key.split('.') let keyArray = key.split('.')
let curKey = keyArray.pop() let curKey = keyArray.pop()
let resultKey = keyArray.join(".") let resultKey = keyArray.join(".")
let deepData = _this.getProperty(resultKey,_this.root) let deepData = _this.getProperty(resultKey, _this.root)
if(deepData && Array.isArray(deepData.modifySet)){ if (deepData && Array.isArray(deepData.modifySet)) {
if(deepData.modifySet.includes(curKey)){ if (deepData.modifySet.includes(curKey)) {
_this.red = true _this.isRed = true
}
}
if (deepData && Array.isArray(deepData.ebankSet)) {
if (deepData.ebankSet.includes(curKey)) {
_this.isYellow = true
}
}
if (deepData && Array.isArray(deepData.incSet)) {
if (deepData.incSet.includes(curKey)) {
_this.isGreen = true
} }
} }
el.onchange = (...args)=>{ el.onchange = (...args) => {
if(deepData.modifySet){ if (deepData.modifySet) {
if(Array.isArray(deepData.modifySet)){ if (Array.isArray(deepData.modifySet)) {
if(deepData.modifySet.includes(curKey)){ if (deepData.modifySet.includes(curKey)) {
return return
} }
deepData.modifySet.push(curKey) deepData.modifySet.push(curKey)
} }
} else { } else {
deepData.modifySet = [curKey] deepData.modifySet = [curKey]
} }
} }
} }
} }
}, },
computed: { computed: {
model: { model: {
get () { get() {
return this.value return this.value
}, },
set (newVal) { set(newVal) {
this.$emit('input', newVal) this.$emit('input', newVal)
} }
}, },
mode () { mode() {
return this.$store.state.Status.mode return this.$store.state.Status.mode
}, },
isDisable: { isDisable: {
get () { get() {
return this.mode === 'display' || this.disabled return this.mode === 'display' || this.disabled
} }
}, },
isDisplay: { isDisplay: {
get () { get() {
return this.mode === 'display' return this.mode === 'display'
} }
}, },
highlight () { highlight() {
return this.$store.state.Status.highlights.indexOf(this.id) !== -1 return this.$store.state.Status.highlights.indexOf(this.id) !== -1
}, },
highlightChanges () { highlightChanges() {
return this.$store.state.Status.highlightChanges.indexOf(this.id) !== -1 return this.$store.state.Status.highlightChanges.indexOf(this.id) !== -1
}, },
attrs(){ attrs() {
if(this.mode === 'display' || this.disabled) if (this.mode === 'display' || this.disabled) {
{ let { placeholder, ...rest } = this.$attrs
let {placeholder,...rest} = this.$attrs
return rest return rest
} }
return this.$attrs return this.$attrs
} }
}, },
methods:{ methods: {
isIncludeType(data) {
if (data && Array.isArray(data.modifySet)) {
if (data.modifySet.includes(curKey)) {
_this.isRed = true
}
}
if (data && Array.isArray(data.ebankSet)) {
if (data.ebankSet.includes(curKey)) {
_this.isYellow = true
}
}
if (data && Array.isArray(data.incSet)) {
if (data.incSet.includes(curKey)) {
_this.isGreen = true
}
}
},
getProperty(str, value) { getProperty(str, value) {
let keys = str?.split('.') let keys = str?.split('.')
for (let key of keys) { for (let key of keys) {
...@@ -111,18 +141,34 @@ export default { ...@@ -111,18 +141,34 @@ export default {
</script> </script>
<style lang="less" scoped> <style lang="less" scoped>
.redClass /deep/ .el-input__inner{ .greenClass /deep/ .el-input__inner {
border-color: green;
}
.greenClass /deep/ .el-textarea__inner {
border-color: green;
}
.yellowClass /deep/ .el-input__inner {
border-color: blue;
}
.yellowClass /deep/ .el-textarea__inner {
border-color: blue;
}
.redClass /deep/ .el-input__inner {
border-color: red; border-color: red;
} }
.redClass /deep/ .el-textarea__inner { .redClass /deep/ .el-textarea__inner {
border-color: red; border-color: red;
} }
/* /*
.el-input.change-light .el-input__inner{ .el-input.change-light .el-input__inner{
border-color: #E6A23C; border-color: #E6A23C;
} }
.el-textarea.change-light .el-textarea__inner { .el-textarea.change-light .el-textarea__inner {
border-color: #E6A23C; border-color: #E6A23C;
} */ } */</style>
</style> \ No newline at end of file
\ No newline at end of file
src/components/Select.vue
...@@ -3,7 +3,11 @@ ...@@ -3,7 +3,11 @@
:id="id" :id="id"
filterable filterable
allow-create allow-create
:class="{'redClass':red && isDisable}" :class="{
greenClass: isGreen && isDisplay,
yellowClass: isYellow && isDisplay,
redClass: isRed && isDisplay,
}"
v-storeModify v-storeModify
v-model="model" v-model="model"
v-bind="$attrs" v-bind="$attrs"
...@@ -35,39 +39,49 @@ ...@@ -35,39 +39,49 @@
</template> </template>
<script> <script>
import { getCodetable } from "~/service/business/codeTable" import { getCodetable } from "~/service/business/codeTable";
export default { export default {
inject: ["root"], inject: ["root"],
directives:{ directives: {
storeModify:{ storeModify: {
update(el,bind,vnode){ update(el, bind, vnode) {
let target = el.querySelector('.el-input') let target = el.querySelector(".el-input");
let _this = vnode.context let _this = vnode.context;
let key = vnode.parent.data.model.expression let key = vnode.parent.data.model.expression;
let keyArray = key.split('.') let keyArray = key.split(".");
let curKey = keyArray.pop() let curKey = keyArray.pop();
let resultKey = keyArray.join(".") let resultKey = keyArray.join(".");
let deepData = _this.getProperty(resultKey,_this.root) let deepData = _this.getProperty(resultKey, _this.root);
if(deepData && Array.isArray(deepData.modifySet)){ if (deepData && Array.isArray(deepData.modifySet)) {
if(deepData.modifySet.includes(curKey)){ if (deepData.modifySet.includes(curKey)) {
_this.red = true _this.isRed = true;
} }
} }
target.onclick = (...args)=>{ if (deepData && Array.isArray(deepData.ebankSet)) {
if(deepData.modifySet){ if (deepData.ebankSet.includes(curKey)) {
if(Array.isArray(deepData.modifySet)){ _this.isYellow = true;
if(deepData.modifySet.includes(curKey)){ }
return }
} if (deepData && Array.isArray(deepData.incSet)) {
deepData.modifySet.push(curKey) if (deepData.incSet.includes(curKey)) {
_this.isGreen = true;
}
}
target.onclick = (...args) => {
if (deepData.modifySet) {
if (Array.isArray(deepData.modifySet)) {
if (deepData.modifySet.includes(curKey)) {
return;
}
deepData.modifySet.push(curKey);
} }
} else { } else {
deepData.modifySet = [curKey] deepData.modifySet = [curKey];
} }
} };
} },
} },
}, },
props: { props: {
value: { value: {
...@@ -97,23 +111,25 @@ export default { ...@@ -97,23 +111,25 @@ export default {
default: undefined, default: undefined,
}, },
}, },
data(){ data() {
return { return {
dbCodeList:[], dbCodeList: [],
red:false isRed:false,
} isGreen:false,
isYellow:false
};
}, },
watch:{ watch: {
//动态从服务器上渲染码表 //动态从服务器上渲染码表
dbCode(){ dbCode() {
if(!this.dbCode){ if (!this.dbCode) {
this.dbCodeList=[] this.dbCodeList = [];
//清理数据 //清理数据
this.model = undefined; this.model = undefined;
return return;
} }
getDBCode() getDBCode();
} },
}, },
computed: { computed: {
model: { model: {
...@@ -132,6 +148,11 @@ export default { ...@@ -132,6 +148,11 @@ export default {
return this.mode === "display" || this.disabled; return this.mode === "display" || this.disabled;
}, },
}, },
isDisplay: {
get() {
return this.mode === "display"
}
},
highlight() { highlight() {
return this.$store.state.Status.highlights.indexOf(this.id) !== -1; return this.$store.state.Status.highlights.indexOf(this.id) !== -1;
}, },
...@@ -143,18 +164,18 @@ export default { ...@@ -143,18 +164,18 @@ export default {
} }
return this.$attrs; return this.$attrs;
}, },
combinCodes(){ combinCodes() {
//取dbcode，和 setvalues的合集 //取dbcode，和 setvalues的合集
if(!this.dbCodeList || this.dbCodeList.length == 0){ if (!this.dbCodeList || this.dbCodeList.length == 0) {
return [] return [];
} }
return this.dbCodeList.filter(item=>{ return this.dbCodeList.filter((item) => {
if(this.code && this.code.length){ if (this.code && this.code.length) {
return this.code.findIndex(item2=>item.value == item2.value)>-1 return this.code.findIndex((item2) => item.value == item2.value) > -1;
} }
return true return true;
}) });
} },
}, },
methods: { methods: {
handleClick: function (e) { handleClick: function (e) {
...@@ -164,41 +185,58 @@ export default { ...@@ -164,41 +185,58 @@ export default {
node.parentElement.dispatchEvent(ev); node.parentElement.dispatchEvent(ev);
} }
}, },
getDBCode(){ getDBCode() {
let args = {tbl:this.dbCode,lang:this.$store.state.I18n.lang.toUpperCase()} let args = {
if(args.lang == "ZH"){ tbl: this.dbCode,
lang: this.$store.state.I18n.lang.toUpperCase(),
};
if (args.lang == "ZH") {
args.lang = "CN"; args.lang = "CN";
} }
getCodetable(args).then(rtnmsg=>{ getCodetable(args).then((rtnmsg) => {
if(rtnmsg.respCode==SUCCESS){ if (rtnmsg.respCode == SUCCESS) {
this.dbCodeList=rtnmsg.data this.dbCodeList = rtnmsg.data;
} }
}) });
}, },
getProperty(str, value) { getProperty(str, value) {
let keys = str?.split('.') let keys = str?.split(".");
for (let key of keys) { for (let key of keys) {
if (value) { if (value) {
value = value[key] value = value[key];
} }
} }
return value return value;
} },
}, },
mounted(){ mounted() {
if(this.dbCode){ if (this.dbCode) {
this.getDBCode() this.getDBCode();
} }
} },
}; };
</script> </script>
<style lang="less" scoped> <style lang="less" scoped>
.redClass /deep/ .el-input__inner{ .greenClass /deep/ .el-input__inner {
border-color: green;
}
.greenClass /deep/ .el-textarea__inner {
border-color: green;
}
.yellowClass /deep/ .el-input__inner {
border-color: blue;
}
.yellowClass /deep/ .el-textarea__inner {
border-color: blue;
}
.redClass /deep/ .el-input__inner {
border-color: red; border-color: red;
} }
.c-highlight-content { .redClass /deep/ .el-textarea__inner {
overflow: hidden; border-color: red;
} }
</style> </style>
\ No newline at end of file
src/components/business/setmod/views/index.vue
...@@ -1236,6 +1236,9 @@ export default { ...@@ -1236,6 +1236,9 @@ export default {
}, },
}, },
created: function () {}, created: function () {},
mounted(){
console.log("this.root=>费用/",this.root)
},
computed: { computed: {
modifyflg: { modifyflg: {
get() { get() {
......
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