Skip to content

iBiz-Vue-R7-Res
iBiz-Vue-R7-Res
提交 33a00402 编写于 作者: RedPig97's avatar RedPig97
浏览文件
操作

update: 样式优化

上级 84c2a190
隐藏空白字符变更
内嵌 并排
正在显示 包含 153 行增加 和 128 行删除
src/components/app-ey-mpicker/app-ey-mpicker.scss
浏览文件 @ 33a00402
......@@ -4,6 +4,9 @@
gap: 10px;
.el-select {
width: 100%;
.el-input__suffix {
right: 25px;
}
}
.app-ey-mpicker__item {
width: 100%;
......
src/components/app-ey-mpicker/app-ey-mpicker.vue
浏览文件 @ 33a00402
<template>
<div class="app-ey-mpicker">
<div class="app-ey-mpicker__item" v-for="count in selectCount" :key="count">
<el-select :value="getSelectLabel(count-1)" filterable remote :remote-method="onSearch" size="small" @change="onSelect" :disabled="disabled">
<template v-if="!valueItems[count-1]">
<el-option v-for="(item, index) in items" :key="index" :label="item[deMajorField]" :value="item[deKeyField]"></el-option>
</template>
<el-select
:value="valueItems[count - 1]"
filterable
remote
:remote-method="onSearch"
size="small"
@change="onSelect($event, valueItems[count - 1])"
@clear="onRemove(valueItems[count - 1], true)"
@visible-change="onSelectOpen($event, count - 1)"
:clearable="selectCount == 1"
:disabled="disabled"
>
<el-option v-for="(item, index) in items" :key="index" :label="item[deMajorField]" :value="item[deKeyField]"></el-option>
</el-select>
<span class="app-ey-mpicker__search">
<i class="el-icon-search" @click="openView(valueItems[count-1])"></i>
<i class="el-icon-search" @click="openView(valueItems[count - 1])"></i>
</span>
<div class="app-ey-mpicker__button">
<img v-if="count === selectCount" src="assets/img/ic_add_circle.svg" @click="selectCount++">
<img v-else src="assets/img/remove_circle.svg" @click="onRemove(valueItems[count-1])">
<img v-if="count === selectCount" src="assets/img/ic_add_circle.svg" @click="selectCount++" />
<img v-else src="assets/img/remove_circle.svg" @click="onRemove(valueItems[count - 1])" />
</div>
</div>
</div>
</template>
<script lang = 'ts'>
import { Component, Vue, Prop, Watch } from 'vue-property-decorator';
import { Subject } from 'rxjs';
<script lang="ts">
import { Component, Vue, Prop, Watch } from "vue-property-decorator";
import { Subject } from "rxjs";
@Component({
})
@Component({})
export default class AppEYMPicker extends Vue {
/**
* 传入url
*/
......@@ -56,25 +63,25 @@ export default class AppEYMPicker extends Vue {
/**
* 局部上下文导航参数
*
*
* @type {any}
* @memberof AppEYMPicker
*/
@Prop() public localContext!:any;
@Prop() public localContext!: any;
/**
* 局部导航参数
*
*
* @type {any}
* @memberof AppEYMPicker
*/
@Prop() public localParam!:any;
@Prop() public localParam!: any;
/**
* 表单项名称
*/
@Prop() name: any;
/**
* 视图上下文
*
......@@ -97,7 +104,7 @@ export default class AppEYMPicker extends Vue {
* @type {*}
* @memberof AppEYMPicker
*/
@Prop({default: () => {}}) public acParams?: any;
@Prop({ default: () => {} }) public acParams?: any;
/**
* 应用实体主信息属性名称
......@@ -105,7 +112,7 @@ export default class AppEYMPicker extends Vue {
* @type {string}
* @memberof AppEYMPicker
*/
@Prop({default: 'srfmajortext'}) public deMajorField!: string;
@Prop({ default: "srfmajortext" }) public deMajorField!: string;
/**
* 应用实体主键属性名称
......@@ -113,7 +120,7 @@ export default class AppEYMPicker extends Vue {
* @type {string}
* @memberof AppEYMPicker
*/
@Prop({default: 'srfkey'}) public deKeyField!: string;
@Prop({ default: "srfkey" }) public deKeyField!: string;
/**
* 表单服务
......@@ -140,19 +147,19 @@ export default class AppEYMPicker extends Vue {
/**
* 选中项key-value键值对
*
*
*/
public selectItems: Array<any> = [];
/**
* 选项框数量
*
*
*/
public selectCount: number = 1;
/**
/**
* 获取选中label
*
*
*/
public getSelectLabel(index: number) {
const selection = this.selectItems[index];
......@@ -163,38 +170,51 @@ export default class AppEYMPicker extends Vue {
/**
* 监听curvalue值
* @param newVal
* @param val
* @param newVal
* @param val
*/
@Watch('curvalue', {immediate:true, deep: true })
@Watch("curvalue", { immediate: true, deep: true })
oncurvalueChange(newVal: any, val: any) {
this.valueItems = [];
this.selectItems = [];
if (newVal) {
try {
this.selectItems = this.parseValue(JSON.parse(newVal));
this.selectItems.forEach((item: any) => {
this.valueItems.push(item[this.deKeyField]);
});
this.selectItems = this.parseValue(JSON.parse(newVal));
this.selectItems.forEach((item: any) => {
this.valueItems.push(item[this.deKeyField]);
});
} catch (error) {
if((error as any).name === 'SyntaxError'){
let srfkeys:any = newVal.split(',');
let srfmajortexts:any = null;
if(this.valueitem && this.activeData[this.valueitem]){
srfmajortexts = this.activeData[this.valueitem].split(',');
}
if(srfkeys.length && srfkeys.length > 0 && srfmajortexts.length && srfmajortexts.length > 0 && srfkeys.length == srfmajortexts.length){
srfkeys.forEach((id: any, index: number) => {
this.valueItems.push(id);
this.selectItems.push({[this.deKeyField]: id, [this.deMajorField]: srfmajortexts[index]});
});
if ((error as any).name === "SyntaxError") {
let srfkeys: any = newVal.split(",");
let srfmajortexts: any = null;
if (this.valueitem && this.activeData[this.valueitem]) {
srfmajortexts = this.activeData[this.valueitem].split(",");
}
if (srfkeys.length && srfkeys.length > 0 && srfmajortexts.length && srfmajortexts.length > 0 && srfkeys.length == srfmajortexts.length) {
srfkeys.forEach((id: any, index: number) => {
this.valueItems.push(id);
this.selectItems.push({ [this.deKeyField]: id, [this.deMajorField]: srfmajortexts[index] });
});
}
}
}
}
}
this.$forceUpdate();
}
/**
* 下拉切换回调
* @param boolean
*/
public onSelectOpen(visible: boolean, index: number): void {
if (visible) {
const label = this.getSelectLabel(index);
if (this.items.length == 0 || !label) {
this.onSearch(label);
}
}
}
/**
* 远程执行搜索
*
......@@ -211,57 +231,46 @@ export default class AppEYMPicker extends Vue {
// 参数处理
let _context = data.context;
let _param = data.param;
Object.assign(_param ,{ query: query });
Object.assign(_param, { query: query });
if (this.activeData) {
Object.assign(_param, { srfreferdata: this.activeData });
}
// 错误信息国际化
let error: string = (this.$t('components.appMpicker.error') as any);
let miss: string = (this.$t('components.appMpicker.miss') as any);
let requestException: string = (this.$t('components.appMpicker.requestException') as any);
if(!this.service){
this.$Notice.error({ title: error, desc: miss+'service' });
} else if(!this.acParams.serviceName) {
this.$Notice.error({ title: error, desc: miss+'serviceName' });
} else if(!this.acParams.interfaceName) {
this.$Notice.error({ title: error, desc: miss+'interfaceName' });
let error: string = this.$t("components.appMpicker.error") as any;
let miss: string = this.$t("components.appMpicker.miss") as any;
let requestException: string = this.$t("components.appMpicker.requestException") as any;
if (!this.service) {
this.$Notice.error({ title: error, desc: miss + "service" });
} else if (!this.acParams.serviceName) {
this.$Notice.error({ title: error, desc: miss + "serviceName" });
} else if (!this.acParams.interfaceName) {
this.$Notice.error({ title: error, desc: miss + "interfaceName" });
} else {
this.service.getItems(this.acParams.serviceName,this.acParams.interfaceName, _context, _param).then((response: any) => {
if (!response) {
this.$Notice.error({ title: error, desc: requestException });
} else {
this.items = [...response];
}
}).catch((error: any) => {
console.log(error);
});
this.service
.getItems(this.acParams.serviceName, this.acParams.interfaceName, _context, _param)
.then((response: any) => {
if (!response) {
this.$Notice.error({ title: error, desc: requestException });
} else {
this.items = [...response];
}
})
.catch((error: any) => {
console.log(error);
});
}
}
/**
* 下拉选中回调
*
* @param {*} selects
* @param {*} value
* @memberof AppEYMPicker
*/
public onSelect(selects: any) {
let val: Array<any> = [];
if (selects.length > 0) {
selects.forEach((select: any) => {
let index = this.items.findIndex((item) => Object.is(item[this.deKeyField], select));
if (index >= 0) {
let item = this.items[index];
val.push({ [this.deKeyField]: item[this.deKeyField], [this.deMajorField]: item[this.deMajorField] });
} else {
index = this.selectItems.findIndex((item: any) => Object.is(item[this.deKeyField], select));
if (index >= 0) {
let item = this.selectItems[index];
val.push(item);
}
}
});
let value = val.length > 0 ? JSON.stringify(this.formatValue(val)) : '';
this.$emit('formitemvaluechange', { name: this.name, value: value });
public onSelect(value: string, valueItem: string) {
const item = this.items.find((item) => Object.is(item[this.deKeyField], value));
if (item) {
this.computeItemSelect([item], valueItem);
}
}
......@@ -271,14 +280,39 @@ export default class AppEYMPicker extends Vue {
* @param {*} tag
* @memberof AppEYMPicker
*/
public onRemove(tag: any) {
let index = this.selectItems.findIndex((item: any) => Object.is(item[this.deKeyField], tag));
public onRemove(value: string, isClear: boolean = false) {
let index = this.selectItems.findIndex((item: any) => Object.is(item[this.deKeyField], value));
if (index >= 0) {
this.selectItems.splice(index, 1);
let value = this.selectItems.length > 0 ? JSON.stringify(this.formatValue(this.selectItems)) : '';
this.$emit('formitemvaluechange', { name: this.name, value: value });
let value = this.selectItems.length > 0 ? JSON.stringify(this.formatValue(this.selectItems)) : "";
console.log(value, 123);
this.$emit("formitemvaluechange", { name: this.name, value: value });
}
if (!isClear) {
this.selectCount--;
}
}
/**
* 移除标签回调
*
* @param {*} items
* @memberof AppEYMPicker
*/
public computeItemSelect(items: any[], value: string) {
if (value) {
const index = this.selectItems.findIndex((item: any) => Object.is(item[this.deKeyField], value));
if (index != -1) {
this.selectItems.splice(index, 1, ...items);
}
} else {
this.selectItems.push(...items);
}
if (this.name && this.activeData) {
let value = this.selectItems.length > 0 ? JSON.stringify(this.formatValue(this.selectItems)) : "";
console.log(value, 123);
this.$emit("formitemvaluechange", { name: this.name, value: value });
}
this.selectCount--;
}
/**
......@@ -290,20 +324,20 @@ export default class AppEYMPicker extends Vue {
*/
public handlePublicParams(arg: any): boolean {
if (!this.activeData) {
this.$Notice.error({ title: (this.$t('components.AppMpicker.error') as any), desc: (this.$t('components.AppMpicker.formdataException') as any) });
this.$Notice.error({ title: this.$t("components.AppMpicker.error") as any, desc: this.$t("components.AppMpicker.formdataException") as any });
return false;
}
// 合并表单参数
arg.param = this.viewparams ? JSON.parse(JSON.stringify(this.viewparams)) : {};
arg.context = this.context ? JSON.parse(JSON.stringify(this.context)) : {};
// 附加参数处理
if (this.localContext && Object.keys(this.localContext).length >0) {
let _context = this.$util.computedNavData(this.activeData,arg.context,arg.param,this.localContext);
Object.assign(arg.context,_context);
if (this.localContext && Object.keys(this.localContext).length > 0) {
let _context = this.$util.computedNavData(this.activeData, arg.context, arg.param, this.localContext);
Object.assign(arg.context, _context);
}
if (this.localParam && Object.keys(this.localParam).length >0) {
let _param = this.$util.computedNavData(this.activeData,arg.param,arg.param,this.localParam);
Object.assign(arg.param,_param);
if (this.localParam && Object.keys(this.localParam).length > 0) {
let _param = this.$util.computedNavData(this.activeData, arg.param, arg.param, this.localParam);
Object.assign(arg.param, _param);
}
return true;
}
......@@ -331,17 +365,17 @@ export default class AppEYMPicker extends Vue {
let _context = data.context;
let _viewparams = data.param;
let _selectItems = JSON.parse(JSON.stringify(this.selectItems));
if(!Object.is(this.deKeyField,"srfkey")){
_selectItems.forEach((item:any, index:number)=>{
if (!Object.is(this.deKeyField, "srfkey")) {
_selectItems.forEach((item: any, index: number) => {
_selectItems[index].srfkey = item[this.deKeyField];
});
}
_context = Object.assign(_context, { srfparentdata: { srfparentkey: this.activeData[this.deKeyField] }, });
_viewparams = Object.assign(_viewparams,{ selectedData: [..._selectItems]});
_context = Object.assign(_context, { srfparentdata: { srfparentkey: this.activeData[this.deKeyField] } });
_viewparams = Object.assign(_viewparams, { selectedData: [..._selectItems] });
let formdata = this.activeData;
const modal: Subject<any> = this.$appmodal.openModal(view, _context, _viewparams)
const modal: Subject<any> = this.$appmodal.openModal(view, _context, _viewparams);
modal.subscribe((result: any) => {
if (!result || !Object.is(result.ret, 'OK')) {
if (!result || !Object.is(result.ret, "OK")) {
return;
}
let selects: Array<any> = [];
......@@ -350,19 +384,8 @@ export default class AppEYMPicker extends Vue {
selects.push({ [this.deKeyField]: select[this.deKeyField], [this.deMajorField]: select[this.deMajorField] });
});
}
if (value) {
const index = this.selectItems.findIndex((item: any) => Object.is(item[this.deKeyField], value));
if (index != -1) {
this.selectItems.splice(index, 1, ...selects);
}
} else {
this.selectItems.push(...selects);
}
if (this.name && this.activeData) {
let value = this.selectItems.length > 0 ? JSON.stringify(this.formatValue(this.selectItems)) : '';
this.$emit('formitemvaluechange', { name: this.name, value: value });
}
})
this.computeItemSelect(selects, value);
});
}
}
......@@ -372,13 +395,13 @@ export default class AppEYMPicker extends Vue {
* @param {any[]} value 需要转换的数组
* @memberof AppEYMPicker
*/
public parseValue(value: any[]){
public parseValue(value: any[]) {
let result = [];
if(this.deKeyField !== "srfkey" || this.deMajorField !== "srfmajortext"){
if (this.deKeyField !== "srfkey" || this.deMajorField !== "srfmajortext") {
value.forEach((item: any) => {
result.push({[this.deMajorField]: item.srfmajortext, [this.deKeyField]: item.srfkey});
result.push({ [this.deMajorField]: item.srfmajortext, [this.deKeyField]: item.srfkey });
});
}else{
} else {
result = value;
}
return result;
......@@ -390,21 +413,20 @@ export default class AppEYMPicker extends Vue {
* @param {any[]} value 需要转换的数组
* @memberof AppEYMPicker
*/
public formatValue(value: any[]){
public formatValue(value: any[]) {
let result = [];
if(this.deKeyField !== "srfkey" || this.deMajorField !== "srfmajortext"){
if (this.deKeyField !== "srfkey" || this.deMajorField !== "srfmajortext") {
value.forEach((item: any) => {
result.push({srfmajortext : item[this.deMajorField], srfkey : item[this.deKeyField]});
result.push({ srfmajortext: item[this.deMajorField], srfkey: item[this.deKeyField] });
});
}else{
} else {
result = value;
}
return result;
const res = new Map();
return result.filter((item: any) => !res.has(item.srfmajortext) && res.set(item.srfmajortext, item.srfkey));
}
}
</script>
<style lang="scss">
@import './app-ey-mpicker.scss';
</style>
\ No newline at end of file
@import "./app-ey-mpicker.scss";
</style>
src/components/app-ey-upload/app-ey-upload.vue
浏览文件 @ 33a00402
<template>
<div class="app-ey-upload">
<el-row>
<el-col v-for="(item,index) in uploadFileList" :key="index" class="app-ey-upload__item app-ey-upload__preview">
<el-col v-for="(item,index) in uploadFileList" :key="'preview' + index" class="app-ey-upload__item app-ey-upload__preview">
<span class="file-title" @click="onDownload(item)">
<span>{{item.name}}</span>
</span>
......@@ -22,7 +22,7 @@
<img src="assets/img/remove_circle.svg" @click="onRemove(item,index)">
</div>
</el-col>
<el-col v-if="!previewMode" v-for="count in buttonCount" :key="count" class="app-ey-upload__item">
<el-col v-if="!previewMode" v-for="count in buttonCount" :key="'button' + count" class="app-ey-upload__item">
<el-upload
ref="upload"
list-type="text"
......
Markdown 格式
0% or
您添加了 0 人 到此讨论。请谨慎行事。
先完成此消息的编辑！
想要评论请 注册 或