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