Skip to content

H
hs-sky-ui
Commit 4e0d53b9 authored by 何虹's avatar 何虹 💬
Browse files
Options

参照

parent a4aa6a49
Hide whitespace changes
Inline Side-by-side
Showing with 440 additions and 349 deletions
src/components/HelloWorld.vue
View file @ 4e0d53b9
<template> <template>
<div class="hello"> <div style="width:500px">
<hsInput></hsInput> <hsSelectPlus
<hsTable></hsTable> ref='select'
:allSourceData='allSourceData'
></hsSelectPlus>
<el-button @click="change1">change1</el-button>
<el-button @click="change2">change2</el-button>
</div> </div>
</template>
</template>
<script> <script>
export default { export default {
name: 'HelloWorld', data() {
props: { return {
msg: String allSourceData: {
config: {
url: "",
proxyTag: "commonUtilAPI",
ref: {
const_id: "0",
table_name: "im_store_group",
columns: "id,name",
remote_condition: "",
displayfield: "",
writebackfield: []
},
dyncQueryParms: {},
multiple: false,
disabled: false,
size: "mini",
clearable: true,
title: "标题",
placeholder: "请选择",
value: "id",
label: "name",
is_computed: false
},
sourceData: []
},
show: false,
config: {
url: "",
proxyTag: "commonUtilAPI",
ref: {
const_id: "0",
table_name: "im_store_group",
columns: "id,name",
remote_condition: "",
displayfield: "",
writebackfield: []
},
dyncQueryParms: {},
multiple: false,
disabled: false,
size: "mini",
clearable: true,
title: "标题",
placeholder: "请选择",
value: "id",
label: "name",
is_computed: false
}
};
},
mounted() {
this.init();
},
methods: {
change1(){
this.allSourceData.sourceData=[{value:1,label:2}]
},
change2(){
this.allSourceData.sourceData=[{value:2,label:3}]
},
init() {
// this.getData();
},
async getData() {
const data = await this.get_options(this.config);
//this.allSourceData.config=this.config
this.allSourceData.sourceData=data
}
} }
} };
</script> </script>
\ No newline at end of file
<!-- Add "scoped" attribute to limit CSS to this component only -->
<style scoped>
h3 {
margin: 40px 0 0;
}
ul {
list-style-type: none;
padding: 0;
}
li {
display: inline-block;
margin: 0 10px;
}
a {
color: #42b983;
}
</style>
src/packages/hs-select-plus/index.vue
View file @ 4e0d53b9
<template> <template>
<div :id='elId' class="selectBoxPlus" style='width:100%;height:100%;'> <div
<div class="contarnBox" style='width:100%;height:100%;'> :id='elId'
<div class="selectTitle" v-show="configData.title">{{configData.title}}</div> class="selectBoxPlus"
<div class="selectCurr" style='width:100%;height:100%;'> style='width:100%;height:100%;'
<el-select >
:allow-create='configData.allowCreate' <div
:default-first-option='configData.defaultFirstOption' class="contarnBox"
style="width:100%" style='width:100%;height:100%;'
:class="{'noneStyle':isReadOnly1,'noneStyle2':isReadOnly2}" >
:size='configData.size' <div
@clear="clear_select" class="selectTitle"
:collapse-tags="configData.collapse_tags" v-show="configData.title"
:multiple="configData.multiple" >{{configData.title}}</div>
:disabled="isReadOnly" <div
:clearable="configData.clearable" class="selectCurr"
ref="select_demo" style='width:100%;height:100%;'
@change="change" >
@focus="select_focus" <el-select
v-model="value_inner" :allow-create='configData.allowCreate'
:filterable="configData.filterable" :default-first-option='configData.defaultFirstOption'
:remote="configData.remote" style="width:100%"
:remote-method="remoteMethod_" :class="{'noneStyle':isReadOnly1,'noneStyle2':isReadOnly2}"
:placeholder="configData.placeholder" :size='configData.size'
> @clear="clear_select"
<el-option v-for="item in options" :key="item.value" :label="item.label" :value="item.value"></el-option> :collapse-tags="configData.collapse_tags"
</el-select> :multiple="configData.multiple"
<el-tooltip v-if='linkBtnUiVis' el-tooltip content="主表" placement="bottom" effect="light"> :disabled="isReadOnly"
<el-button size="mini" @click='jumpSelect' circle icon="el-icon-s-promotion"></el-button> :clearable="configData.clearable"
</el-tooltip> ref="select_demo"
@change="change"
@focus="select_focus"
v-model="value_inner"
:filterable="configData.filterable"
:remote="configData.remote"
:remote-method="remoteMethod_"
:placeholder="configData.placeholder"
>
<el-option
v-for="item in options"
:key="item.value"
:label="item.label"
:value="item.value"
></el-option>
</el-select>
<el-tooltip
v-if='linkBtnUiVis'
el-tooltip
content="主表"
placement="bottom"
effect="light"
>
<el-button
size="mini"
@click='jumpSelect'
circle
icon="el-icon-s-promotion"
></el-button>
</el-tooltip>
</div> </div>
</div> </div>
<jsoneditor <jsoneditor
v-model='jsoneditorVisible' v-model='jsoneditorVisible'
:elInfo='elInfo' :elInfo='elInfo'
:jsoneditorData='editData' :jsoneditorData='editData'
:jsoneditorCloseAfter='jsoneditorCloseAfter' :jsoneditorCloseAfter='jsoneditorCloseAfter'
:jsoneditorOpenAfter='jsoneditorOpenAfter' :jsoneditorOpenAfter='jsoneditorOpenAfter'
> >
</jsoneditor> </jsoneditor>
<dialogIframe @closeDialog='closeDialog' v-if='linkBtnUiVis' @linkBtnUiBack='linkBtnUiBack' v-model="dialogIframeVisible" :src='dialogIframeSrc'></dialogIframe> <dialogIframe
</div> @closeDialog='closeDialog'
v-if='linkBtnUiVis'
@linkBtnUiBack='linkBtnUiBack'
v-model="dialogIframeVisible"
:src='dialogIframeSrc'
></dialogIframe>
</div>
</template> </template>
<script> <script>
import uuidv1 from 'uuid/v1' import uuidv1 from "uuid/v1";
import jsoneditor from '../common/jsoneditor' import jsoneditor from "../common/jsoneditor";
import mockData from '../common/initDbConfigDataJson' import mockData from "../common/initDbConfigDataJson";
import ucComponent from '../ucClass/uc_component' import ucComponent from "../ucClass/uc_component";
import _ from 'lodash' import _ from "lodash";
import commonUtility from '../funTools/commonUtility' import commonUtility from "../funTools/commonUtility";
import dialogIframe from '../common/dialogTemplate/dialogIframe' import dialogIframe from "../common/dialogTemplate/dialogIframe";
export default { export default {
mixins: [ucComponent], mixins: [ucComponent],
name: 'hsSelectPlus', name: "hsSelectPlus",
components: { components: {
jsoneditor, dialogIframe jsoneditor,
dialogIframe
}, },
props: { props: {
remoteMethod: { remoteMethod: {
type: Function, type: Function,
default() { default() {}
}
}, },
containerType: {}, containerType: {},
elInfo: { elInfo: {
type: Object, type: Object,
default() { default() {
return {} return {};
} }
}, },
allSourceData: { allSourceData: {
type: Object, type: Object,
default() { default() {
return {} return {};
} }
}, },
jsoneditorCloseAfter: { jsoneditorCloseAfter: {
type: Function, type: Function,
default() { default() {
return () => {} return () => {};
} }
}, },
jsoneditorOpenAfter: { jsoneditorOpenAfter: {
type: Function, type: Function,
default() { default() {
return () => {} return () => {};
} }
}, },
value: '', value: "",
writeBackObject: { writeBackObject: {
default() { default() {
return {} return {};
} }
}, },
readonly: { readonly: {
...@@ -101,562 +136,565 @@ export default { ...@@ -101,562 +136,565 @@ export default {
data() { data() {
return { return {
options: [], options: [],
value_inner: this.multiple ? [] : '', value_inner: this.multiple ? [] : "",
filterable: false, filterable: false,
remote: false, remote: false,
// url_static: 'commonUtilAPI/ref/items/', // url_static: 'commonUtilAPI/ref/items/',
// url_dynamic: 'commonUtilAPI/ref/table/', // url_dynamic: 'commonUtilAPI/ref/table/',
url_static: 'commonUtilAPI/', url_static: "commonUtilAPI/",
url_dynamic: 'commonUtilAPI/ref/table/', url_dynamic: "commonUtilAPI/ref/table/",
url_ipCommonAPI: 'ipCommonAPI/', url_ipCommonAPI: "ipCommonAPI/",
real_url: '', real_url: "",
elId: '', elId: "",
chart: null, chart: null,
jsoneditorVisible: false, // 是否显示动态配置的弹框 jsoneditorVisible: false, // 是否显示动态配置的弹框
editData: { editData: {
config: {}, config: {},
sourceData: [], sourceData: [],
sql: '' sql: ""
}, },
configData: { configData: {
url: '', url: "",
ref: { ref: {
const_id: '', const_id: "",
table_name: '', table_name: "",
columns: '', columns: "",
remote_condition: '', remote_condition: "",
displayfield: '', // 默认值 displayfield: "", // 默认值
writebackfield: [] writebackfield: []
}, },
multiple: false, multiple: false,
collapse_tags: true, collapse_tags: true,
disabled: false, disabled: false,
size: 'mini', size: "mini",
clearable: true, clearable: true,
title: '', title: "",
value: '', value: "",
label: '', label: "",
parms: {}, parms: {},
placeholder: '请选择', placeholder: "请选择",
is_computed: false, is_computed: false,
remote: false, remote: false,
filterable: false filterable: false
}, },
emptyList: [undefined, 'undefined', null, 'null', ''], emptyList: [undefined, "undefined", null, "null", ""],
number: 0, number: 0,
menuGlobalParams: {}, menuGlobalParams: {},
focus: false, focus: false,
writeBackObject_: {}, writeBackObject_: {},
dialogIframeSrc: '', dialogIframeSrc: "",
dialogIframeVisible: false, dialogIframeVisible: false,
linkBtnUiVis: false, linkBtnUiVis: false,
linkUiBtnTxt: '调整' linkUiBtnTxt: "调整"
} };
}, },
computed: { computed: {
dialogIfameVis: function() { dialogIfameVis: function() {
const linkBtnUi = !!this.configData.linkBtnUi const linkBtnUi = !!this.configData.linkBtnUi;
return linkBtnUi return linkBtnUi;
}, },
isReadOnly: function() { isReadOnly: function() {
return this.readonly || this.configData.disabled return this.readonly || this.configData.disabled;
}, },
isReadOnly1: function() { isReadOnly1: function() {
if (this.containerType !== 'editArea' && (this.readonly || this.configData.disabled)) { if (
return true this.containerType !== "editArea" &&
(this.readonly || this.configData.disabled)
) {
return true;
} }
}, },
isReadOnly2: function() { isReadOnly2: function() {
// 是编辑框 // 是编辑框
if (this.containerType === 'editArea' && (this.readonly || this.configData.disabled)) { if (
return true this.containerType === "editArea" &&
(this.readonly || this.configData.disabled)
) {
return true;
} }
} }
}, },
watch: { watch: {
writeBackObject: { writeBackObject: {
handler(newValue, oldValue) { handler(newValue, oldValue) {
const linkProp = this.configData.linkProp const linkProp = this.configData.linkProp;
const displayfield = this.configData.ref.displayfield const displayfield = this.configData.ref.displayfield;
const remote_condition = this.configData.ref.remote_condition const remote_condition = this.configData.ref.remote_condition;
const newData = newValue[linkProp] const newData = newValue[linkProp];
const oldData = this.writeBackObject_[linkProp] const oldData = this.writeBackObject_[linkProp];
if (linkProp && newData !== oldData) { if (linkProp && newData !== oldData) {
this.value_inner = '' this.value_inner = "";
this.$emit('input', '') this.$emit("input", "");
this.writeBackObject[displayfield] = '' this.writeBackObject[displayfield] = "";
if (remote_condition) { if (remote_condition) {
this.remoteMethod_() this.remoteMethod_();
} }
} }
this.writeBackObject_ = _.cloneDeep(newValue) this.writeBackObject_ = _.cloneDeep(newValue);
}, },
deep: true deep: true
}, },
value: { value: {
handler(newValue, oldValue) { handler(newValue, oldValue) {
this.initValue(newValue) this.initValue(newValue);
}, },
deep: true deep: true
}, },
allSourceData: { allSourceData: {
handler: function(newVal, oldVal) { handler: function(newVal, oldVal) {
this.number += 1 // this.number += 1
if (this.number <= 1) { // if (this.number <= 1) {
this.initData(newVal) // this.initData(newVal)
this.initValue(this.value) // this.initValue(this.value)
} // }
this.initData(newVal);
this.initValue(this.value);
}, },
deep: true deep: true
} }
}, },
created() { created() {
this.elId = uuidv1() // 获取随机id this.elId = uuidv1(); // 获取随机id
}, },
mounted() { mounted() {
this.$nextTick(() => { this.$nextTick(() => {
this.placeholder = this.elInfo.placeholder this.placeholder = this.elInfo.placeholder;
this.title = this.elInfo.title this.title = this.elInfo.title;
this.initData(this.allSourceData) this.initData(this.allSourceData);
this.initValue(this.value) this.initValue(this.value);
}) });
}, },
methods: { methods: {
closeDialog() { closeDialog() {
this.dialogIframeVisible = false this.dialogIframeVisible = false;
}, },
linkBtnUiBack(data) { linkBtnUiBack(data) {
debugger debugger;
const linkBtnUi = this.configData.linkBtnUi const linkBtnUi = this.configData.linkBtnUi;
if (!linkBtnUi) return if (!linkBtnUi) return;
const writeProp = linkBtnUi.writeProp || {} const writeProp = linkBtnUi.writeProp || {};
for (const key in writeProp) { for (const key in writeProp) {
const value = writeProp[key] const value = writeProp[key];
this.$set(this.writeBackObject, key, data[value]) this.$set(this.writeBackObject, key, data[value]);
} }
this.dialogIframeVisible = false this.dialogIframeVisible = false;
}, },
jumpSelect() { jumpSelect() {
const item = this.configData.linkBtnUi const item = this.configData.linkBtnUi;
const { url, dyncQueryParms, newDefault } = item const { url, dyncQueryParms, newDefault } = item;
const newDefaultStr = JSON.stringify(newDefault) const newDefaultStr = JSON.stringify(newDefault);
const parms = _.cloneDeep(dyncQueryParms || {}) const parms = _.cloneDeep(dyncQueryParms || {});
parms.newDefault = newDefaultStr parms.newDefault = newDefaultStr;
const href = location.href const href = location.href;
const startUrl = href.split('#')[0] const startUrl = href.split("#")[0];
let url_ = url let url_ = url;
const parseQuery = commonUtility.parseUrlQueryString() const parseQuery = commonUtility.parseUrlQueryString();
const { db_name } = parseQuery const { db_name } = parseQuery;
if (db_name) { if (db_name) {
parms.db_name = db_name parms.db_name = db_name;
} }
if (item.url.includes('?')) { if (item.url.includes("?")) {
url_ = url + '&fromMenu=1' url_ = url + "&fromMenu=1";
} else { } else {
url_ = url + '?fromMenu=1' url_ = url + "?fromMenu=1";
} }
let parmsStr = '' let parmsStr = "";
for (const key in parms) { for (const key in parms) {
parmsStr += `&${key}=${parms[key]}` parmsStr += `&${key}=${parms[key]}`;
} }
const url__ = `${startUrl}#${url_}` + parmsStr + '&isInnerDialog=1' const url__ = `${startUrl}#${url_}` + parmsStr + "&isInnerDialog=1";
this.dialogIframeSrc = url__ this.dialogIframeSrc = url__;
this.dialogIframeVisible = true this.dialogIframeVisible = true;
}, },
disAbledFun() { disAbledFun() {
return this.readonly || this.configData.disabled return this.readonly || this.configData.disabled;
}, },
initValue(value) { initValue(value) {
if (!Object.keys(this.allSourceData.config || {}).length) return if (!Object.keys(this.allSourceData.config || {}).length) return;
const is_computed = this.configData.is_computed const is_computed = this.configData.is_computed;
const { multiple } = this.configData const { multiple } = this.configData;
if (is_computed) { if (is_computed) {
// 计算模式 // 计算模式
this.value_inner = this.ten_twe_tans(value) this.value_inner = this.ten_twe_tans(value);
} else { } else {
if (multiple) { if (multiple) {
this.value_inner = value ? value.split(',') : [] this.value_inner = value ? value.split(",") : [];
} else { } else {
this.value_inner = value this.value_inner = value;
} }
if (value === null || value === 'null') { if (value === null || value === "null") {
this.value_inner = '' this.value_inner = "";
} }
this.setDefault() this.setDefault();
} }
}, },
getSysParams() { getSysParams() {
const { db_name, is_mock, db_code } = commonUtility.parseUrlQueryString() const { db_name, is_mock, db_code } = commonUtility.parseUrlQueryString();
const { appCode, pagename } = commonUtility.parseUrlQueryBIDyncAppcodePageName() const {
const isMock = this.emptyList.includes(is_mock) ? 1 : is_mock appCode,
const dbName = db_name || '' pagename
} = commonUtility.parseUrlQueryBIDyncAppcodePageName();
const isMock = this.emptyList.includes(is_mock) ? 1 : is_mock;
const dbName = db_name || "";
const obj = _.cloneDeep({ const obj = _.cloneDeep({
dbName, dbName,
appCode, appCode,
page: pagename, page: pagename,
isMock, isMock,
db_code db_code
}) });
return obj return obj;
}, },
mergeCinfig(config1, config2) { mergeCinfig(config1, config2) {
Object.assign(config1, config2) Object.assign(config1, config2);
}, },
initConfig(config) { initConfig(config) {
this.mergeCinfig(this.configData, _.cloneDeep(config)) this.mergeCinfig(this.configData, _.cloneDeep(config));
if (this.configData.ref) { if (this.configData.ref) {
this.configData.remote = !!this.configData.ref.remote_condition this.configData.remote = !!this.configData.ref.remote_condition;
this.configData.filterable = !!this.configData.ref.remote_condition this.configData.filterable = !!this.configData.ref.remote_condition;
} }
const linkBtnUi = this.configData.linkBtnUi const linkBtnUi = this.configData.linkBtnUi;
this.linkBtnUiVis = !!linkBtnUi this.linkBtnUiVis = !!linkBtnUi;
if (this.linkBtnUiVis) { if (this.linkBtnUiVis) {
this.linkUiBtnTxt = this.configData.linkBtnUi.label this.linkUiBtnTxt = this.configData.linkBtnUi.label;
} }
}, },
async initData(allSourceData) { async initData(allSourceData) {
const { config, sourceData, is_mock } = _.cloneDeep(allSourceData) const { config, sourceData, is_mock } = _.cloneDeep(allSourceData);
this.is_mock = is_mock this.is_mock = is_mock;
if (!sourceData) { if (!sourceData) {
this.initMockData() this.initMockData();
} else { } else {
this.initConfig(config) this.initConfig(config);
this.dealWithData(sourceData) this.dealWithData(sourceData);
} }
}, },
autoAddNullValue(data) { autoAddNullValue(data) {
const sourceData = _.cloneDeep(data) const sourceData = _.cloneDeep(data);
if (Array.isArray(sourceData)) { if (Array.isArray(sourceData)) {
const list = sourceData.map(item => { const list = sourceData.map(item => {
if (item.value !== '') { if (item.value !== "") {
return Number(item.value) return Number(item.value);
} }
}) });
const hasNaN = list.find(item => isNaN(item)) const hasNaN = list.find(item => isNaN(item));
const zeroTarget = list.find(item => item === 0 || item === '0') const zeroTarget = list.find(item => item === 0 || item === "0");
let hasZero = false let hasZero = false;
if (zeroTarget === 0 || hasZero === '0') { if (zeroTarget === 0 || hasZero === "0") {
hasZero = true hasZero = true;
} }
if (!hasZero && !hasNaN) { if (!hasZero && !hasNaN) {
sourceData.unshift({ sourceData.unshift({
value: '0', value: "0",
label: ' ' label: " "
}) });
} }
} }
return sourceData return sourceData;
}, },
dealWithData(data) { dealWithData(data) {
const sourceData = this.autoAddNullValue(data) const sourceData = this.autoAddNullValue(data);
const sourceData_ = _.cloneDeep(sourceData) const sourceData_ = _.cloneDeep(sourceData);
this.options = Array.isArray(sourceData_) this.options = Array.isArray(sourceData_)
? this.tansLate(sourceData_) ? this.tansLate(sourceData_)
: this.translate_json(sourceData_) : this.translate_json(sourceData_);
}, },
setDefault() { setDefault() {
const { value, multiple, ref } = this.configData const { value, multiple, ref } = this.configData;
const displayfield = ref && ref.displayfield const displayfield = ref && ref.displayfield;
const writebackfield = ref.writebackfield || [] const writebackfield = ref.writebackfield || [];
// 查找一下默认值,如果不存在就设置display_field // 查找一下默认值,如果不存在就设置display_field
const t = this.options.find(xs => { const t = this.options.find(xs => {
if (xs[value] === this.value && this.value !== undefined) { if (xs[value] === this.value && this.value !== undefined) {
return xs[value] === this.value return xs[value] === this.value;
} }
}) });
let displayfield_value = '' let displayfield_value = "";
displayfield_value = this.writeBackObject[displayfield] displayfield_value = this.writeBackObject[displayfield];
if (!t && displayfield_value && displayfield_value !== 'null') { if (!t && displayfield_value && displayfield_value !== "null") {
// 不存在就设置默认值 // 不存在就设置默认值
this.value_inner = multiple this.value_inner = multiple
? displayfield_value.split(',') ? displayfield_value.split(",")
: displayfield_value : displayfield_value;
} }
const targetItem = this.options.find(item => item.value === this.value_inner) const targetItem = this.options.find(
item => item.value === this.value_inner
);
if (targetItem) { if (targetItem) {
for (const item of writebackfield) { for (const item of writebackfield) {
const [key, value] = item.split('=') const [key, value] = item.split("=");
const result = value ? targetItem[value] : targetItem[key] const result = value ? targetItem[value] : targetItem[key];
if (result !== undefined) { if (result !== undefined) {
this.$set( this.$set(this.writeBackObject, key, result);
this.writeBackObject,
key,
result
)
} }
} }
} }
}, },
initMockData() { initMockData() {
this.initMockSelectData(this.elInfo.el) this.initMockSelectData(this.elInfo.el);
}, },
// 折线图的模拟数据 // 折线图的模拟数据
initMockSelectData(type) { initMockSelectData(type) {
const mockData_ = mockData[type] const mockData_ = mockData[type];
if (!mockData_) return if (!mockData_) return;
this.editData.config = mockData_.config this.editData.config = mockData_.config;
this.editData.sourceData = mockData_.sourceData this.editData.sourceData = mockData_.sourceData;
this.options = mockData_.sourceData this.options = mockData_.sourceData;
}, },
checkUndefinedOrNullOrStr(val) { checkUndefinedOrNullOrStr(val) {
const result = [undefined, null, ''] const result = [undefined, null, ""];
return result.includes(val) return result.includes(val);
}, },
// 复合值转换成2进制 // 复合值转换成2进制
ten_twe_tans(val) { ten_twe_tans(val) {
const list = parseInt(val) const list = parseInt(val)
.toString(2) .toString(2)
.split('') .split("")
.reverse() .reverse();
const result = [] const result = [];
list.forEach((x, index) => { list.forEach((x, index) => {
if (typeof this.value === 'number') { if (typeof this.value === "number") {
x.toString() === '1' ? result.push(2 ** index) : '' x.toString() === "1" ? result.push(2 ** index) : "";
} else { } else {
x.toString() === '1' ? result.push((2 ** index).toString()) : '' x.toString() === "1" ? result.push((2 ** index).toString()) : "";
} }
}) });
return result return result;
}, },
// 节流 // 节流
remoteMethodsDebounce: _.debounce(async function(query) { remoteMethodsDebounce: _.debounce(async function(query) {
if (this.is_mock) return if (this.is_mock) return;
const data = await this.remoteMethod(query, this.configData) const data = await this.remoteMethod(query, this.configData);
this.options = this.tansLate(data || []) this.options = this.tansLate(data || []);
}, 1000), }, 1000),
async remoteMethod_(query) { async remoteMethod_(query) {
await this.remoteMethodsDebounce(query, this.configData) await this.remoteMethodsDebounce(query, this.configData);
}, },
clear_select() { clear_select() {
const { ref, linkBtnUi, cleared, changed } = this.configData const { ref, linkBtnUi, cleared, changed } = this.configData;
const { writebackfield } = ref const { writebackfield } = ref;
if (Array.isArray(writebackfield)) { if (Array.isArray(writebackfield)) {
for (const item of writebackfield) { for (const item of writebackfield) {
const [key] = item.split('=') const [key] = item.split("=");
this.$set(this.writeBackObject, key, '') this.$set(this.writeBackObject, key, "");
} }
} }
if (linkBtnUi) { if (linkBtnUi) {
const writeProp = linkBtnUi.writeProp || {} const writeProp = linkBtnUi.writeProp || {};
for (const key in writeProp) { for (const key in writeProp) {
this.$set(this.writeBackObject, key, '') this.$set(this.writeBackObject, key, "");
} }
} }
this.$emit('input', '') this.$emit("input", "");
this.$emit('clear_callback', '') this.$emit("clear_callback", "");
this.$nextTick(() => { this.$nextTick(() => {
this.exectAction(cleared) this.exectAction(cleared);
this.exectAction(changed) this.exectAction(changed);
}) });
}, },
select_focus(event) { select_focus(event) {
const { remote_condition } = this.configData.ref const { remote_condition } = this.configData.ref;
if (remote_condition && !this.is_mock) { if (remote_condition && !this.is_mock) {
this.remoteMethod_() this.remoteMethod_();
} }
}, },
exectAction(action) { exectAction(action) {
const type = typeof action const type = typeof action;
if (type === 'function') { if (type === "function") {
action(this.value, this.writeBackObject) action(this.value, this.writeBackObject);
} }
}, },
change(val) { change(val) {
const is_computed = this.configData.is_computed const is_computed = this.configData.is_computed;
if (is_computed) { if (is_computed) {
// 计算模式 // 计算模式
const s = val.reduce((prve, next) => { const s = val.reduce((prve, next) => {
return Number(prve) + Number(next) return Number(prve) + Number(next);
}, 0) }, 0);
this.$emit('input', typeof this.value === 'number' ? s : s.toString()) this.$emit("input", typeof this.value === "number" ? s : s.toString());
} else { } else {
const { multiple, ref } = this.configData const { multiple, ref } = this.configData;
const { writebackfield } = ref const { writebackfield } = ref;
if (multiple) { if (multiple) {
const f_list = this.options.filter(xs => val.includes(xs.value)) const f_list = this.options.filter(xs => val.includes(xs.value));
if (writebackfield) { if (writebackfield) {
if (Array.isArray(writebackfield)) { if (Array.isArray(writebackfield)) {
for (const item of writebackfield) { for (const item of writebackfield) {
const [key, value] = item.split('=') const [key, value] = item.split("=");
const r = f_list.map(xs => { const r = f_list.map(xs => {
return value ? xs[value] : xs[key] return value ? xs[value] : xs[key];
}) });
this.$set(this.writeBackObject, key, r.join()) this.$set(this.writeBackObject, key, r.join());
} }
} else { } else {
const f_label = f_list.map(xs => { const f_label = f_list.map(xs => {
return xs.label return xs.label;
}) });
this.$set(this.writeBackObject, writebackfield, f_label.join()) this.$set(this.writeBackObject, writebackfield, f_label.join());
} }
} }
this.$emit('input', val.join()) this.$emit("input", val.join());
const return_obj = { const return_obj = {
val, val,
data: this.writeBackObject ? this.writeBackObject : {} data: this.writeBackObject ? this.writeBackObject : {}
} };
this.$emit('change_callback', return_obj) this.$emit("change_callback", return_obj);
} else { } else {
// 单选模式 // 单选模式
const target = this.options.find(xs => val === xs.value) const target = this.options.find(xs => val === xs.value);
if (val === '0' || (target && target.label === ' ')) { if (val === "0" || (target && target.label === " ")) {
this.$emit('input', '') this.$emit("input", "");
this.value_inner = '' this.value_inner = "";
} }
if (val && this.configData.allowCreate) { if (val && this.configData.allowCreate) {
this.$emit('input', val) this.$emit("input", val);
this.value_inner = val this.value_inner = val;
} }
if (writebackfield && target) { if (writebackfield && target) {
if (Array.isArray(writebackfield)) { if (Array.isArray(writebackfield)) {
for (const item of writebackfield) { for (const item of writebackfield) {
const [key, value] = item.split('=') const [key, value] = item.split("=");
if (value && !value.startsWith('$')) { if (value && !value.startsWith("$")) {
const result = value ? target[value] : target[key] const result = value ? target[value] : target[key];
if (!value.startsWith('$')) { // 取下拉里面的值 if (!value.startsWith("$")) {
// 取下拉里面的值
if (result !== undefined) { if (result !== undefined) {
this.$set( this.$set(this.writeBackObject, key, result);
this.writeBackObject,
key,
result
)
} }
} else { // 直接设置值 } else {
const str = val.substr(1, length) // 直接设置值
this.$set( const str = val.substr(1, length);
this.writeBackObject, this.$set(this.writeBackObject, key, str);
key,
str
)
} }
} }
} }
} else { } else {
this.$set(this.writeBackObject, writebackfield, target.label) this.$set(this.writeBackObject, writebackfield, target.label);
} }
} }
const return_obj = { const return_obj = {
val, val,
data: this.writeBackObject ? this.writeBackObject : {} data: this.writeBackObject ? this.writeBackObject : {}
} };
if (target.label !== ' ') { if (target.label !== " ") {
this.$emit('input', val) this.$emit("input", val);
this.$emit('change_callback', return_obj) this.$emit("change_callback", return_obj);
} }
} }
} }
const changed = this.configData.changed const changed = this.configData.changed;
this.$nextTick(() => { this.$nextTick(() => {
this.exectAction(changed) this.exectAction(changed);
}) });
// setTimeout(() => { // setTimeout(() => {
// this.exectAction(changed) // this.exectAction(changed)
// }, 1) // }, 1)
}, },
tansLate(data) { tansLate(data) {
const arr = data const arr = data;
const list = [] const list = [];
const { value, label } = this.configData const { value, label } = this.configData;
arr.forEach(element => { arr.forEach(element => {
const parm = {} const parm = {};
for (const pro in element) { for (const pro in element) {
if (pro === value && value === label) { if (pro === value && value === label) {
parm.value = element[pro] parm.value = element[pro];
parm.label = element[pro] parm.label = element[pro];
} else if (pro === value) { } else if (pro === value) {
parm.value = element[pro] parm.value = element[pro];
} else if (pro === label) { } else if (pro === label) {
parm.label = element[label] parm.label = element[label];
} }
parm[pro] = element[pro] parm[pro] = element[pro];
} }
list.push(parm) list.push(parm);
}) });
return list return list;
}, },
tansLateParm(obj) { tansLateParm(obj) {
const { url } = this.configData const { url } = this.configData;
let str let str;
if (url.includes('/?')) { if (url.includes("/?")) {
str = '&' str = "&";
} else { } else {
str = '?' str = "?";
} }
for (const prop in obj) { for (const prop in obj) {
if (obj[prop]) { if (obj[prop]) {
str += `${prop}=${obj[prop]}&` str += `${prop}=${obj[prop]}&`;
} }
} }
return str === '?' ? '' : str return str === "?" ? "" : str;
}, },
translate_json(data = {}) { translate_json(data = {}) {
const list = [] const list = [];
for (const prop in data) { for (const prop in data) {
const parm = {} const parm = {};
parm.value = data[prop] parm.value = data[prop];
parm.label = prop parm.label = prop;
list.push(parm) list.push(parm);
} }
return list return list;
}, },
initRealUrl() { initRealUrl() {
const { url, ref } = this.configData const { url, ref } = this.configData;
const { const_id, table_name, columns, remote_condition } = ref const { const_id, table_name, columns, remote_condition } = ref;
if (remote_condition) { if (remote_condition) {
if (table_name) { if (table_name) {
return `${this.url_dynamic}${table_name}/${columns}/` return `${this.url_dynamic}${table_name}/${columns}/`;
} else { } else {
return `${this.url_ipCommonAPI}${url}` return `${this.url_ipCommonAPI}${url}`;
} }
} else { } else {
if (const_id) { if (const_id) {
return const_id return const_id;
} else if (table_name) { } else if (table_name) {
return `${table_name}/${columns}` return `${table_name}/${columns}`;
} else { } else {
return url return url;
} }
} }
} }
} }
} };
</script> </script>
<style scoped> <style scoped>
.contarnBox{ .contarnBox {
display: flex; display: flex;
} }
.selectTitle{ .selectTitle {
flex:1; flex: 1;
display: flex; display: flex;
justify-content: center; justify-content: center;
align-items: center; align-items: center;
} }
.selectCurr{ .selectCurr {
flex: 3; flex: 3;
display: flex; display: flex;
justify-content: center; justify-content: center;
align-items: center; align-items: center;
} }
.noneStyle >>> .el-input__inner{ .noneStyle >>> .el-input__inner {
background: inherit; background: inherit;
border: none; border: none;
color: inherit; color: inherit;
} }
.noneStyle >>>.el-input__suffix-inner{ .noneStyle >>> .el-input__suffix-inner {
display: none display: none;
} }
.noneStyle2 >>> .el-input__inner{ .noneStyle2 >>> .el-input__inner {
/* background: inherit; /* background: inherit;
border: none; border: none;
color: inherit; */ color: inherit; */
} }
.noneStyle2 >>>.el-input__suffix-inner{ .noneStyle2 >>> .el-input__suffix-inner {
display: none display: none;
} }
/* .selectBoxPlus>>> .el-select>.el-input{ /* .selectBoxPlus>>> .el-select>.el-input{
height: 100%; height: 100%;
......
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