Skip to content

iBiz-Vue-R7-Res
iBiz-Vue-R7-Res
提交 0ad47d65 编写于 作者: lijinyang's avatar lijinyang
浏览文件
操作

穿梭框本地文件更新

上级 42e765ac
隐藏空白字符变更
内嵌 并排
正在显示 包含 273 行增加 和 253 行删除
src/components/app-transfer/app-transfer.less
浏览文件 @ 0ad47d65
.ivu-select-dropdown { .transfer-select{
padding: 0px; .ivu-select-dropdown {
.hidden { padding: 0px;
display: none; .hidden {
} display: none;
} }
\ No newline at end of file .el-transfer{
min-width: 100% !important;
display: flex;
justify-content: space-between;
.el-transfer-panel{
min-width: 25%;
}
.el-transfer__buttons{
align-self: center;
}
}
}
}
src/components/app-transfer/app-transfer.vue
浏览文件 @ 0ad47d65
<template> <template>
<Select <Select
@on-open-change="transferRefresh" class="transfer-select"
@on-change="dataChange" @on-open-change="transferRefresh"
v-model="dataRight" @on-change="dataChange"
:style="{width:width?width:'586px'}" v-model="dataRight"
multiple :style="{width:width}"
> :disabled="disabled"
<Option class="hidden" :value="item" v-for="(item,i) in dataRight" :key="i">{{findLabel(item)}}</Option> :placeholder="placeholder"
<el-transfer v-model="dataRight" :data="dataLeft" @change="dataChange" :titles="['未选择', '已选择']"></el-transfer> multiple>
</Select> <Option class="hidden" :value="item" v-for="(item,i) in dataRight" :key="i">
{{findLabel(item)}}
</Option>
<el-transfer
v-model="dataRight"
:data="dataLeft"
@change="dataChange"
:titles="['未选择', '已选择']"/>
</Select>
</template> </template>
<script lang="ts"> <script lang="ts">
import { Vue, Component, Watch, Prop, Model } from "vue-property-decorator"; import { Vue, Component, Watch, Prop, Model } from "vue-property-decorator";
import CodeListService from "@service/app/codelist-service"; import CodeListService from "@service/app/codelist-service";
...@@ -17,273 +26,270 @@ import { ElSelect } from "element-ui/types/select"; ...@@ -17,273 +26,270 @@ import { ElSelect } from "element-ui/types/select";
@Component({}) @Component({})
export default class AppTransfer extends Vue { export default class AppTransfer extends Vue {
/**
* 传入表单数据
*
* @type {*}
* @memberof AppTransfer
*/
@Prop() public data:any;
/** /**
* 穿梭框宽度 * 穿梭框宽度
* *
* @type {*} * @type {string}
* @memberof AppTransfer * @memberof AppTransfer
*/ */
@Prop() public width: any; @Prop() public width?: string;
/** /**
* 表单传入字符串值分隔符 * 表单传入字符串值分隔符
* *
* @type {string} * @type {string}
* @memberof AppTransfer * @memberof AppTransfer
*/ */
@Prop() public valueSeparator!: string; @Prop() public valueSeparator?: string;
/** /**
* 当前选中值 * 代码表标识
* @type {any} *
* @memberof AppTransfer * @type {string}
*/ * @memberof AppTransfer
@Model("change") public itemValue!: any; */
@Prop() public tag?: string;
/** /**
* 代码表标识 * 代码表类型
* *
* @type {string} * @type {string}
* @memberof AppTransfer * @memberof AppTransfer
*/ */
@Prop() public tag?: string; @Prop() public codelistType?: string;
/** /**
* 代码表类型 * 局部上下文导航参数
* *
* @type {string} * @type {*}
* @memberof AppTransfer * @memberof AppTransfer
*/ */
@Prop() public codelistType?: string; @Prop() public localContext!: any;
/** /**
* 局部上下文导航参数 * 局部导航参数
* *
* @type {*} * @type {*}
* @memberof AppTransfer * @memberof AppTransfer
*/ */
@Prop() public localContext!: any; @Prop() public localParam!: any;
/** /**
* 局部导航参数 * 视图上下文
* *
* @type {*} * @type {*}
* @memberof AppTransfer * @memberof AppAutocomplete
*/ */
@Prop() public localParam!: any; @Prop() public context!: any;
/** /**
* 视图上下文 * 视图参数
* *
* @type {*} * @type {*}
* @memberof AppAutocomplete * @memberof AppFormDRUIPart
*/ */
@Prop() public context!: any; @Prop() public viewparams!: any;
/** /**
* 视图参数 * 是否禁用
* *
* @type {*} * @type {any}
* @memberof AppFormDRUIPart * @memberof AppTransfer
*/ *
@Prop() public viewparams!: any; */
@Prop() public disabled?: any;
/** /**
* 是否禁用 * 穿梭框提示内容
* *
* @type {any} * @type {string}
* @memberof AppTransfer * @memberof AppTransfer
* */
*/ @Prop() public placeholder?: string;
@Prop() public disabled?: any;
/** /**
* placeholder * 当前选中值
* *
* @type {string} * @type {any}
* @memberof AppTransfer * @memberof AppTransfer
* */
*/ @Model("change") public itemValue!: any;
@Prop() public placeholder?: string;
/** /**
* 左侧框数据 * 左侧框数据
* *
* @type {any[]} * @memberof AppTransfer
* @memberof AppTransfer */
*/ public dataLeft: any[] = [];
public dataLeft: any[] = [];
/** /**
* 右侧框数据 * 右侧框数据
* *
* @type {any[]} * @memberof AppTransfer
* @memberof AppTransfer */
*/ public dataRight: any[] = [];
public dataRight: any[] = [];
/** /**
* 代码表服务对象 * 代码表服务对象
* *
* @type {CodeListService} * @type {CodeListService}
* @memberof AppTransfer * @memberof AppTransfer
*/ */
public codeListService: CodeListService = new CodeListService({
$store: this.$store
});
public codeListService: CodeListService = new CodeListService({$store: this.$store}); /**
* vue 生命周期
* @memberof AppTransfer
*/
public created() {
this.dataHandle();
}
/** /**
* vue 生命周期 * 数据处理
* *
* @memberof AppTransfer * @memberof AppTransfer
*/ */
public created() { public dataHandle() {
this.dataHandle(); if (this.tag && Object.is(this.codelistType, "STATIC")) {
} const codelist = this.$store.getters.getCodeList(this.tag);
if (codelist) {
this.dataLeft = [...JSON.parse(JSON.stringify(codelist.items))];
this.initData()
} else {
console.log(`----${this.tag}----代码表不存在`);
}
} else if (this.tag && Object.is(this.codelistType, "DYNAMIC")) {
// 处理公共参数
let data: any = {};
this.handlePublicParams(data);
// 参数处理
let _context = data.context;
let _param = data.param;
this.codeListService
.getItems(this.tag, _context, _param)
.then((res: any) => {
this.dataLeft = res;
this.initData()
})
.catch((error: any) => {
console.log(`----${this.tag}----代码表不存在`);
});
}
}
/** /**
* 组件change事件,右侧框数据变化时 * 公共参数处理
* *
* @memberof AppTransfer * @param {*} arg
*/ * @returns
dataChange(e: any) { * @memberof AppTransfer
let _valueSeparator: string = this.initValueSeparator(); */
let newVal: string = e.join(`${_valueSeparator}`); public handlePublicParams(arg: any) {
if (newVal) { // 合并表单参数
this.$emit("change", newVal); arg.param = this.viewparams? JSON.parse(JSON.stringify(this.viewparams)): {};
} else { arg.context = this.context ? JSON.parse(JSON.stringify(this.context)) : {};
this.$emit("change", null); // 附加参数处理
if (this.localContext && Object.keys(this.localContext).length > 0) {
let _context = this.$util.computedNavData(this.data,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.data,arg.context,arg.param,this.localParam);
Object.assign(arg.param, _param);
}
} }
}
/** /**
* 初始化valueSeparator * 初始化获取到的选项数据
* *
* @memberof AppTransfer * @memberof AppTransfer
*/ */
public initValueSeparator() { public initData(){
return this.valueSeparator?this.valueSeparator:","; // 初始化左侧框数据
} let left: any[] = [];
Object.assign(left, this.dataLeft);
this.dataLeft = [];
left.forEach((elem: any, i: any) => {
this.dataLeft.push({
key: elem.id,
value: elem.value,
label: elem.text,
disabled: elem.disabled
});
});
/** // 初始化右侧框数据
* 数据处理 let _valueSeparator: any;
* _valueSeparator = this.initValueSeparator();
* @memberof AppTransfer let _data: any = this.itemValue;
*/ if (_data) {
public dataHandle() { let _dataRight: any = [];
if (this.tag && Object.is(this.codelistType, "STATIC")) { let newData: any[] = _data.split(`${_valueSeparator}`);
const codelist = this.$store.getters.getCodeList(this.tag); this.dataLeft.forEach((elem: any) => {
if (codelist) { newData.forEach((item: any) => {
this.dataLeft = [...JSON.parse(JSON.stringify(codelist.items))]; if (item === elem.value) {
this.initLeft(); _dataRight.push(elem.key);
this.initRight(); }
} else { });
console.log(`----${this.tag}----代码表不存在`);
}
} else if (this.tag && Object.is(this.codelistType, "DYNAMIC")) {
// 处理公共参数
let data: any = {};
this.handlePublicParams(data);
// 参数处理
let _context = data.context;
let _param = data.param;
this.codeListService.getItems(this.tag, _context, _param).then((res: any) => {
this.dataLeft = res;
this.initLeft();
this.initRight();
}).catch((error: any) => {
console.log(`----${this.tag}----代码表不存在`);
}); });
this.dataRight = _dataRight;
}
} }
}
/** /**
* 公共参数处理 * 组件change事件,右侧框数据变化时
* * @memberof AppTransfer
* @param {*} arg */
* @returns public dataChange(e: any) {
* @memberof AppTransfer let _valueSeparator: string;
*/ _valueSeparator = this.initValueSeparator();
public handlePublicParams(arg: any) { let newVal: string = e.join(`${_valueSeparator}`);
// 合并表单参数 if (newVal) {
arg.param = this.viewparams? JSON.parse(JSON.stringify(this.viewparams)): {}; this.$emit("change", newVal);
arg.context = this.context ? JSON.parse(JSON.stringify(this.context)) : {}; } else {
// 附加参数处理 this.$emit("change", null);
if (this.localContext && Object.keys(this.localContext).length > 0) { }
let _context = this.$util.computedNavData(this.itemValue,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.itemValue,arg.context,arg.param,this.localParam);
Object.assign(arg.param, _param);
}
}
/**
* 初始化左侧框数据
*
* @memberof AppTransfer
*/
public initLeft() {
let left: any[] = [];
Object.assign(left, this.dataLeft);
this.dataLeft = [];
left.forEach((elem: any, i: any) => {
this.dataLeft.push({
key: elem.id,
value: elem.value,
label: elem.text,
disabled: elem.disabled
});
});
}
/** /**
* 初始化右侧框数据 * 初始化valueSeparator
* * @memberof AppTransfer
* @memberof AppTransfer */
*/ public initValueSeparator() {
public initRight() { return this.valueSeparator ? this.valueSeparator : ",";
let _valueSeparator: any;
_valueSeparator = this.initValueSeparator();
let _data: any = this.itemValue;
if (_data) {
let _dataRight: any = [];
let newData: any[] = _data.split(`${_valueSeparator}`);
this.dataLeft.forEach((elem: any) => {
newData.forEach((item: any) => {
if (item === elem.value) {
_dataRight.push(elem.key);
}
});
});
this.dataRight = _dataRight;
} }
}
/** /**
* 穿梭框打开时刷新数据 * 穿梭框打开时刷新数据
* * @memberof AppTransfer
* @memberof AppTransfer */
*/ public transferRefresh(e: boolean) {
public transferRefresh(e: any) { if (e && this.codelistType === "DYNAMIC") {
if (e && this.codelistType === "DYNAMIC") { this.dataLeft = [];
this.dataLeft = []; this.dataHandle();
this.dataHandle(); }
} }
}
/** /**
* 找到dataLeft中key与dataRight中item相等的元素，返回label * 找到dataLeft中key与dataRight中item相等的元素，返回label
* * @memberof AppTransfer
* @memberof AppTransfer */
*/ public findLabel(item: any) {
public findLabel(item: any) { for (const elem of this.dataLeft) {
for (const elem of this.dataLeft) { if (elem.key === item) return elem.label;
if (elem.key === item) return elem.label; }
} }
}
} }
</script> </script>
......
Markdown 格式
0% or
您添加了 0 人 到此讨论。请谨慎行事。
先完成此消息的编辑！
想要评论请 注册 或