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